Upload 31 files

dist/assets/index-OrJvPUH_.css

@@ -0,0 +1 @@
+@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size: 12px;--rc-drag-handle-mobile-size: 24px;--rc-drag-handle-bg-colour: rgba(0, 0, 0, .2);--rc-drag-bar-size: 6px;--rc-border-color: rgba(255, 255, 255, .7);--rc-focus-color: #0088ff}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{overflow:hidden;max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px)}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid var(--rc-border-color);opacity:.3}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute;width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}.ReactCrop .ord-n{top:0;left:50%;transform:translate(-50%,-50%);cursor:n-resize}.ReactCrop .ord-ne{top:0;right:0;transform:translate(50%,-50%);cursor:ne-resize}.ReactCrop .ord-e{top:50%;right:0;transform:translate(50%,-50%);cursor:e-resize}.ReactCrop .ord-se{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}.ReactCrop .ord-s{bottom:0;left:50%;transform:translate(-50%,50%);cursor:s-resize}.ReactCrop .ord-sw{bottom:0;left:0;transform:translate(-50%,50%);cursor:sw-resize}.ReactCrop .ord-w{top:50%;left:0;transform:translate(-50%,-50%);cursor:w-resize}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}*{box-sizing:border-box;margin:0;padding:0;border-radius:2px!important}:root{--bg-color: #f7f7f7;--bg-panel: #ffffff;--text-primary: #111111;--text-secondary: #666666;--border-color: #eeeeee;--accent-color: #2e6ff2;--font-ibm-plex: "IBM Plex Mono", monospace;--font-claude-sans: "Inter", system-ui, sans-serif;--font-wix-display: "Wix Madefor Display", sans-serif;--font-courier-new: "Courier New", Courier, monospace;--radius-sm: 2px;--radius-md: 2px;--bg-opacity: .15;--fg-opacity: 1;--transition-smooth: all .3s cubic-bezier(.16, 1, .3, 1)}html,body{height:100%;width:100%}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-ibm-plex);overflow:hidden}.font-ibm-plex-mono{font-family:var(--font-ibm-plex)}.font-claudesans{font-family:var(--font-claude-sans)}.font-wixmadefordisplay{font-family:var(--font-wix-display)}.font-couriernew{font-family:var(--font-courier-new)}.app-container{display:flex;height:100vh;width:100vw;position:relative;overflow:hidden}.app-background{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;z-index:-1;opacity:var(--bg-opacity)}.mini-sidebar{width:48px;background-color:var(--bg-panel);border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:16px;z-index:10}.sidebar-panel{width:260px;background-color:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid var(--border-color);display:flex;flex-direction:column;z-index:10;transition:width .3s ease}.sidebar-header{height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--border-color);font-weight:500;font-size:14px}.editor-main{flex:1;background-color:transparent;position:relative;display:flex;flex-direction:column;overflow:hidden}.editor-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary)}button{all:unset;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-smooth)}.tree-view{padding-bottom:20px}.tree-children{position:relative;transition:all .3s ease}.tree-children:before{content:"";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:#00000008}.tree-item-wrapper{position:relative}.tree-item{transition:background-color .15s ease,border-left .1s ease}.tree-item:hover{background-color:#00000005}.tree-item:hover .more-btn{opacity:.6!important}.tree-item .more-btn:hover{opacity:1!important;background-color:#0000000d}.tree-item.active{background-color:#0000000a!important;font-weight:500}.btn-icon-sm{all:unset;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--text-secondary);opacity:.6}.btn-icon-sm:hover{background-color:#0000000d;opacity:1;color:var(--text-primary)}.context-menu button{all:unset;cursor:pointer;font-family:var(--font-ibm-plex)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}.pixilize{filter:blur(5px) grayscale(.5);transition:filter .3s ease;-webkit-user-select:none;user-select:none}.pixilize:hover{filter:none}.ContentEditable{flex:1;outline:none;padding:0 24px 100px;font-size:14px;line-height:1.5;color:var(--text-primary);-moz-tab-size:4;tab-size:4;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}.editor-paragraph{margin:0;position:relative}.comment-bubble{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:4px;padding:8px 12px;font-size:11px;box-shadow:0 4px 12px #0000000d;margin-bottom:8px;color:var(--text-primary);max-width:250px;line-height:1.4}.comment-toggle{opacity:.1;transition:opacity .2s ease}.tree-item-wrapper:hover .comment-toggle,.line-numbers-container:hover .comment-toggle,.comment-toggle.active{opacity:1}.editor-text-bold{font-weight:700}.editor-text-italic{font-style:italic}.editor-text-strikethrough{text-decoration:line-through}.editor-text-underline{text-decoration:underline}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

dist/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="apple-touch-icon" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#ffffff" />
+    <title>Hybrid Editor Docs</title>
+    <script type="module" crossorigin src="/assets/index-CEnsgmh2.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-OrJvPUH_.css">
+  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

dist/manifest.webmanifest

@@ -0,0 +1 @@
+{"name":"Hybrid Editor","short_name":"HyEditor","start_url":"/","display":"standalone","background_color":"#ffffff","theme_color":"#ffffff","lang":"en","scope":"/","icons":[{"src":"/vite.svg","sizes":"192x192","type":"image/svg+xml"}]}

dist/registerSW.js

@@ -0,0 +1 @@
+if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}

dist/sw.js

@@ -0,0 +1 @@
+if(!self.define){let e,i={};const s=(s,n)=>(s=new URL(s+".js",n).href,i[s]||new Promise(i=>{if("document"in self){const e=document.createElement("script");e.src=s,e.onload=i,document.head.appendChild(e)}else e=s,importScripts(s),i()}).then(()=>{let e=i[s];if(!e)throw new Error(`Module ${s} didn’t register its module`);return e}));self.define=(n,r)=>{const t=e||("document"in self?document.currentScript.src:"")||location.href;if(i[t])return;let o={};const c=e=>s(e,t),l={module:{uri:t},exports:o,require:c};i[t]=Promise.all(n.map(e=>l[e]||c(e))).then(e=>(r(...e),o))}}define(["./workbox-8c29f6e4"],function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"1872c500de691dce40960bb85481de07"},{url:"index.html",revision:"4eb96d0de252c344aeb66f921298b735"},{url:"assets/index-OrJvPUH_.css",revision:null},{url:"manifest.webmanifest",revision:"c3985fa8a6595bf51bd1f5acbb440bb5"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))});

dist/workbox-8c29f6e4.js

@@ -0,0 +1 @@
+define(["exports"],function(t){"use strict";try{self["workbox:core:7.3.0"]&&_()}catch(t){}const e=(t,...e)=>{let s=t;return e.length>0&&(s+=` :: ${JSON.stringify(e)}`),s};class s extends Error{constructor(t,s){super(e(t,s)),this.name=t,this.details=s}}try{self["workbox:routing:7.3.0"]&&_()}catch(t){}const n=t=>t&&"object"==typeof t?t:{handle:t};class i{constructor(t,e,s="GET"){this.handler=n(e),this.match=t,this.method=s}setCatchHandler(t){this.catchHandler=n(t)}}class r extends i{constructor(t,e,s){super(({url:e})=>{const s=t.exec(e.href);if(s&&(e.origin===location.origin||0===s.index))return s.slice(1)},e,s)}}class o{constructor(){this.t=new Map,this.i=new Map}get routes(){return this.t}addFetchListener(){self.addEventListener("fetch",t=>{const{request:e}=t,s=this.handleRequest({request:e,event:t});s&&t.respondWith(s)})}addCacheListener(){self.addEventListener("message",t=>{if(t.data&&"CACHE_URLS"===t.data.type){const{payload:e}=t.data,s=Promise.all(e.urlsToCache.map(e=>{"string"==typeof e&&(e=[e]);const s=new Request(...e);return this.handleRequest({request:s,event:t})}));t.waitUntil(s),t.ports&&t.ports[0]&&s.then(()=>t.ports[0].postMessage(!0))}})}handleRequest({request:t,event:e}){const s=new URL(t.url,location.href);if(!s.protocol.startsWith("http"))return;const n=s.origin===location.origin,{params:i,route:r}=this.findMatchingRoute({event:e,request:t,sameOrigin:n,url:s});let o=r&&r.handler;const c=t.method;if(!o&&this.i.has(c)&&(o=this.i.get(c)),!o)return;let a;try{a=o.handle({url:s,request:t,event:e,params:i})}catch(t){a=Promise.reject(t)}const h=r&&r.catchHandler;return a instanceof Promise&&(this.o||h)&&(a=a.catch(async n=>{if(h)try{return await h.handle({url:s,request:t,event:e,params:i})}catch(t){t instanceof Error&&(n=t)}if(this.o)return this.o.handle({url:s,request:t,event:e});throw n})),a}findMatchingRoute({url:t,sameOrigin:e,request:s,event:n}){const i=this.t.get(s.method)||[];for(const r of i){let i;const o=r.match({url:t,sameOrigin:e,request:s,event:n});if(o)return i=o,(Array.isArray(i)&&0===i.length||o.constructor===Object&&0===Object.keys(o).length||"boolean"==typeof o)&&(i=void 0),{route:r,params:i}}return{}}setDefaultHandler(t,e="GET"){this.i.set(e,n(t))}setCatchHandler(t){this.o=n(t)}registerRoute(t){this.t.has(t.method)||this.t.set(t.method,[]),this.t.get(t.method).push(t)}unregisterRoute(t){if(!this.t.has(t.method))throw new s("unregister-route-but-not-found-with-method",{method:t.method});const e=this.t.get(t.method).indexOf(t);if(!(e>-1))throw new s("unregister-route-route-not-registered");this.t.get(t.method).splice(e,1)}}let c;const a=()=>(c||(c=new o,c.addFetchListener(),c.addCacheListener()),c);function h(t,e,n){let o;if("string"==typeof t){const s=new URL(t,location.href);o=new i(({url:t})=>t.href===s.href,e,n)}else if(t instanceof RegExp)o=new r(t,e,n);else if("function"==typeof t)o=new i(t,e,n);else{if(!(t instanceof i))throw new s("unsupported-route-type",{moduleName:"workbox-routing",funcName:"registerRoute",paramName:"capture"});o=t}return a().registerRoute(o),o}const u={googleAnalytics:"googleAnalytics",precache:"precache-v2",prefix:"workbox",runtime:"runtime",suffix:"undefined"!=typeof registration?registration.scope:""},l=t=>[u.prefix,t,u.suffix].filter(t=>t&&t.length>0).join("-"),f=t=>t||l(u.precache),w=t=>t||l(u.runtime);function d(t,e){const s=e();return t.waitUntil(s),s}try{self["workbox:precaching:7.3.0"]&&_()}catch(t){}function p(t){if(!t)throw new s("add-to-cache-list-unexpected-type",{entry:t});if("string"==typeof t){const e=new URL(t,location.href);return{cacheKey:e.href,url:e.href}}const{revision:e,url:n}=t;if(!n)throw new s("add-to-cache-list-unexpected-type",{entry:t});if(!e){const t=new URL(n,location.href);return{cacheKey:t.href,url:t.href}}const i=new URL(n,location.href),r=new URL(n,location.href);return i.searchParams.set("__WB_REVISION__",e),{cacheKey:i.href,url:r.href}}class y{constructor(){this.updatedURLs=[],this.notUpdatedURLs=[],this.handlerWillStart=async({request:t,state:e})=>{e&&(e.originalRequest=t)},this.cachedResponseWillBeUsed=async({event:t,state:e,cachedResponse:s})=>{if("install"===t.type&&e&&e.originalRequest&&e.originalRequest instanceof Request){const t=e.originalRequest.url;s?this.notUpdatedURLs.push(t):this.updatedURLs.push(t)}return s}}}class g{constructor({precacheController:t}){this.cacheKeyWillBeUsed=async({request:t,params:e})=>{const s=(null==e?void 0:e.cacheKey)||this.h.getCacheKeyForURL(t.url);return s?new Request(s,{headers:t.headers}):t},this.h=t}}let R;async function m(t,e){let n=null;if(t.url){n=new URL(t.url).origin}if(n!==self.location.origin)throw new s("cross-origin-copy-response",{origin:n});const i=t.clone(),r={headers:new Headers(i.headers),status:i.status,statusText:i.statusText},o=e?e(r):r,c=function(){if(void 0===R){const t=new Response("");if("body"in t)try{new Response(t.body),R=!0}catch(t){R=!1}R=!1}return R}()?i.body:await i.blob();return new Response(c,o)}function v(t,e){const s=new URL(t);for(const t of e)s.searchParams.delete(t);return s.href}class q{constructor(){this.promise=new Promise((t,e)=>{this.resolve=t,this.reject=e})}}const U=new Set;try{self["workbox:strategies:7.3.0"]&&_()}catch(t){}function L(t){return"string"==typeof t?new Request(t):t}class b{constructor(t,e){this.u={},Object.assign(this,e),this.event=e.event,this.l=t,this.p=new q,this.R=[],this.m=[...t.plugins],this.v=new Map;for(const t of this.m)this.v.set(t,{});this.event.waitUntil(this.p.promise)}async fetch(t){const{event:e}=this;let n=L(t);if("navigate"===n.mode&&e instanceof FetchEvent&&e.preloadResponse){const t=await e.preloadResponse;if(t)return t}const i=this.hasCallback("fetchDidFail")?n.clone():null;try{for(const t of this.iterateCallbacks("requestWillFetch"))n=await t({request:n.clone(),event:e})}catch(t){if(t instanceof Error)throw new s("plugin-error-request-will-fetch",{thrownErrorMessage:t.message})}const r=n.clone();try{let t;t=await fetch(n,"navigate"===n.mode?void 0:this.l.fetchOptions);for(const s of this.iterateCallbacks("fetchDidSucceed"))t=await s({event:e,request:r,response:t});return t}catch(t){throw i&&await this.runCallbacks("fetchDidFail",{error:t,event:e,originalRequest:i.clone(),request:r.clone()}),t}}async fetchAndCachePut(t){const e=await this.fetch(t),s=e.clone();return this.waitUntil(this.cachePut(t,s)),e}async cacheMatch(t){const e=L(t);let s;const{cacheName:n,matchOptions:i}=this.l,r=await this.getCacheKey(e,"read"),o=Object.assign(Object.assign({},i),{cacheName:n});s=await caches.match(r,o);for(const t of this.iterateCallbacks("cachedResponseWillBeUsed"))s=await t({cacheName:n,matchOptions:i,cachedResponse:s,request:r,event:this.event})||void 0;return s}async cachePut(t,e){const n=L(t);var i;await(i=0,new Promise(t=>setTimeout(t,i)));const r=await this.getCacheKey(n,"write");if(!e)throw new s("cache-put-with-no-response",{url:(o=r.url,new URL(String(o),location.href).href.replace(new RegExp(`^${location.origin}`),""))});var o;const c=await this.q(e);if(!c)return!1;const{cacheName:a,matchOptions:h}=this.l,u=await self.caches.open(a),l=this.hasCallback("cacheDidUpdate"),f=l?await async function(t,e,s,n){const i=v(e.url,s);if(e.url===i)return t.match(e,n);const r=Object.assign(Object.assign({},n),{ignoreSearch:!0}),o=await t.keys(e,r);for(const e of o)if(i===v(e.url,s))return t.match(e,n)}(u,r.clone(),["__WB_REVISION__"],h):null;try{await u.put(r,l?c.clone():c)}catch(t){if(t instanceof Error)throw"QuotaExceededError"===t.name&&await async function(){for(const t of U)await t()}(),t}for(const t of this.iterateCallbacks("cacheDidUpdate"))await t({cacheName:a,oldResponse:f,newResponse:c.clone(),request:r,event:this.event});return!0}async getCacheKey(t,e){const s=`${t.url} | ${e}`;if(!this.u[s]){let n=t;for(const t of this.iterateCallbacks("cacheKeyWillBeUsed"))n=L(await t({mode:e,request:n,event:this.event,params:this.params}));this.u[s]=n}return this.u[s]}hasCallback(t){for(const e of this.l.plugins)if(t in e)return!0;return!1}async runCallbacks(t,e){for(const s of this.iterateCallbacks(t))await s(e)}*iterateCallbacks(t){for(const e of this.l.plugins)if("function"==typeof e[t]){const s=this.v.get(e),n=n=>{const i=Object.assign(Object.assign({},n),{state:s});return e[t](i)};yield n}}waitUntil(t){return this.R.push(t),t}async doneWaiting(){for(;this.R.length;){const t=this.R.splice(0),e=(await Promise.allSettled(t)).find(t=>"rejected"===t.status);if(e)throw e.reason}}destroy(){this.p.resolve(null)}async q(t){let e=t,s=!1;for(const t of this.iterateCallbacks("cacheWillUpdate"))if(e=await t({request:this.request,response:e,event:this.event})||void 0,s=!0,!e)break;return s||e&&200!==e.status&&(e=void 0),e}}class C{constructor(t={}){this.cacheName=w(t.cacheName),this.plugins=t.plugins||[],this.fetchOptions=t.fetchOptions,this.matchOptions=t.matchOptions}handle(t){const[e]=this.handleAll(t);return e}handleAll(t){t instanceof FetchEvent&&(t={event:t,request:t.request});const e=t.event,s="string"==typeof t.request?new Request(t.request):t.request,n="params"in t?t.params:void 0,i=new b(this,{event:e,request:s,params:n}),r=this.U(i,s,e);return[r,this.L(r,i,s,e)]}async U(t,e,n){let i;await t.runCallbacks("handlerWillStart",{event:n,request:e});try{if(i=await this._(e,t),!i||"error"===i.type)throw new s("no-response",{url:e.url})}catch(s){if(s instanceof Error)for(const r of t.iterateCallbacks("handlerDidError"))if(i=await r({error:s,event:n,request:e}),i)break;if(!i)throw s}for(const s of t.iterateCallbacks("handlerWillRespond"))i=await s({event:n,request:e,response:i});return i}async L(t,e,s,n){let i,r;try{i=await t}catch(r){}try{await e.runCallbacks("handlerDidRespond",{event:n,request:s,response:i}),await e.doneWaiting()}catch(t){t instanceof Error&&(r=t)}if(await e.runCallbacks("handlerDidComplete",{event:n,request:s,response:i,error:r}),e.destroy(),r)throw r}}class E extends C{constructor(t={}){t.cacheName=f(t.cacheName),super(t),this.C=!1!==t.fallbackToNetwork,this.plugins.push(E.copyRedirectedCacheableResponsesPlugin)}async _(t,e){const s=await e.cacheMatch(t);return s||(e.event&&"install"===e.event.type?await this.O(t,e):await this.N(t,e))}async N(t,e){let n;const i=e.params||{};if(!this.C)throw new s("missing-precache-entry",{cacheName:this.cacheName,url:t.url});{const s=i.integrity,r=t.integrity,o=!r||r===s;n=await e.fetch(new Request(t,{integrity:"no-cors"!==t.mode?r||s:void 0})),s&&o&&"no-cors"!==t.mode&&(this.P(),await e.cachePut(t,n.clone()))}return n}async O(t,e){this.P();const n=await e.fetch(t);if(!await e.cachePut(t,n.clone()))throw new s("bad-precaching-response",{url:t.url,status:n.status});return n}P(){let t=null,e=0;for(const[s,n]of this.plugins.entries())n!==E.copyRedirectedCacheableResponsesPlugin&&(n===E.defaultPrecacheCacheabilityPlugin&&(t=s),n.cacheWillUpdate&&e++);0===e?this.plugins.push(E.defaultPrecacheCacheabilityPlugin):e>1&&null!==t&&this.plugins.splice(t,1)}}E.defaultPrecacheCacheabilityPlugin={cacheWillUpdate:async({response:t})=>!t||t.status>=400?null:t},E.copyRedirectedCacheableResponsesPlugin={cacheWillUpdate:async({response:t})=>t.redirected?await m(t):t};class O{constructor({cacheName:t,plugins:e=[],fallbackToNetwork:s=!0}={}){this.j=new Map,this.k=new Map,this.K=new Map,this.l=new E({cacheName:f(t),plugins:[...e,new g({precacheController:this})],fallbackToNetwork:s}),this.install=this.install.bind(this),this.activate=this.activate.bind(this)}get strategy(){return this.l}precache(t){this.addToCacheList(t),this.T||(self.addEventListener("install",this.install),self.addEventListener("activate",this.activate),this.T=!0)}addToCacheList(t){const e=[];for(const n of t){"string"==typeof n?e.push(n):n&&void 0===n.revision&&e.push(n.url);const{cacheKey:t,url:i}=p(n),r="string"!=typeof n&&n.revision?"reload":"default";if(this.j.has(i)&&this.j.get(i)!==t)throw new s("add-to-cache-list-conflicting-entries",{firstEntry:this.j.get(i),secondEntry:t});if("string"!=typeof n&&n.integrity){if(this.K.has(t)&&this.K.get(t)!==n.integrity)throw new s("add-to-cache-list-conflicting-integrities",{url:i});this.K.set(t,n.integrity)}if(this.j.set(i,t),this.k.set(i,r),e.length>0){const t=`Workbox is precaching URLs without revision info: ${e.join(", ")}\nThis is generally NOT safe. Learn more at https://bit.ly/wb-precache`;console.warn(t)}}}install(t){return d(t,async()=>{const e=new y;this.strategy.plugins.push(e);for(const[e,s]of this.j){const n=this.K.get(s),i=this.k.get(e),r=new Request(e,{integrity:n,cache:i,credentials:"same-origin"});await Promise.all(this.strategy.handleAll({params:{cacheKey:s},request:r,event:t}))}const{updatedURLs:s,notUpdatedURLs:n}=e;return{updatedURLs:s,notUpdatedURLs:n}})}activate(t){return d(t,async()=>{const t=await self.caches.open(this.strategy.cacheName),e=await t.keys(),s=new Set(this.j.values()),n=[];for(const i of e)s.has(i.url)||(await t.delete(i),n.push(i.url));return{deletedURLs:n}})}getURLsToCacheKeys(){return this.j}getCachedURLs(){return[...this.j.keys()]}getCacheKeyForURL(t){const e=new URL(t,location.href);return this.j.get(e.href)}getIntegrityForCacheKey(t){return this.K.get(t)}async matchPrecache(t){const e=t instanceof Request?t.url:t,s=this.getCacheKeyForURL(e);if(s){return(await self.caches.open(this.strategy.cacheName)).match(s)}}createHandlerBoundToURL(t){const e=this.getCacheKeyForURL(t);if(!e)throw new s("non-precached-url",{url:t});return s=>(s.request=new Request(t),s.params=Object.assign({cacheKey:e},s.params),this.strategy.handle(s))}}let x;const N=()=>(x||(x=new O),x);class P extends i{constructor(t,e){super(({request:s})=>{const n=t.getURLsToCacheKeys();for(const i of function*(t,{ignoreURLParametersMatching:e=[/^utm_/,/^fbclid$/],directoryIndex:s="index.html",cleanURLs:n=!0,urlManipulation:i}={}){const r=new URL(t,location.href);r.hash="",yield r.href;const o=function(t,e=[]){for(const s of[...t.searchParams.keys()])e.some(t=>t.test(s))&&t.searchParams.delete(s);return t}(r,e);if(yield o.href,s&&o.pathname.endsWith("/")){const t=new URL(o.href);t.pathname+=s,yield t.href}if(n){const t=new URL(o.href);t.pathname+=".html",yield t.href}if(i){const t=i({url:r});for(const e of t)yield e.href}}(s.url,e)){const e=n.get(i);if(e){return{cacheKey:e,integrity:t.getIntegrityForCacheKey(e)}}}},t.strategy)}}t.NavigationRoute=class extends i{constructor(t,{allowlist:e=[/./],denylist:s=[]}={}){super(t=>this.W(t),t),this.M=e,this.S=s}W({url:t,request:e}){if(e&&"navigate"!==e.mode)return!1;const s=t.pathname+t.search;for(const t of this.S)if(t.test(s))return!1;return!!this.M.some(t=>t.test(s))}},t.cleanupOutdatedCaches=function(){self.addEventListener("activate",t=>{const e=f();t.waitUntil((async(t,e="-precache-")=>{const s=(await self.caches.keys()).filter(s=>s.includes(e)&&s.includes(self.registration.scope)&&s!==t);return await Promise.all(s.map(t=>self.caches.delete(t))),s})(e).then(t=>{}))})},t.clientsClaim=function(){self.addEventListener("activate",()=>self.clients.claim())},t.createHandlerBoundToURL=function(t){return N().createHandlerBoundToURL(t)},t.precacheAndRoute=function(t,e){!function(t){N().precache(t)}(t),function(t){const e=N();h(new P(e,t))}(e)},t.registerRoute=h});

index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="apple-touch-icon" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#ffffff" />
+    <title>Hybrid Editor Docs</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

keys.txt

@@ -0,0 +1,4572 @@
+---
+use hugeicons react icons for all buttons and UI designs by simply using a search-tool in this file, no need to lunch browsers because this file contain all react icons to use.
+---
+
+use this react icons at https://hugeicons.com/ simply by:
+
+`npm install @hugeicons/react @hugeicons/core-free-icons`
+`<HugeiconsIcon icon={} />`
+
+and using the icon_name icon names: {
+
+FirstBracketCircleIcon
+FirstBracketSquareIcon
+FirstBracketIcon
+SecondBracketCircleIcon
+SecondBracketSquareIcon
+SecondBracketIcon
+ThreeDViewIcon
+ThreeDMoveIcon
+ThreeDPrinterIcon
+ThreeDRotateIcon
+ThreeDScaleIcon
+ThirdBracketCircleIcon
+ThirdBracketSquareIcon
+ThirdBracketIcon
+FourKIcon
+SevenZ01Icon
+SevenZ02Icon
+AbacusIcon
+AbsoluteIcon
+AccelerationIcon
+AccessIcon
+AccidentIcon
+AccountSetting01Icon
+AccountSetting02Icon
+AccountSetting03Icon
+Activity01Icon
+Activity02Icon
+Activity03Icon
+Activity04Icon
+AcuteIcon
+Add01Icon
+Add02Icon
+AddCircleHalfDotIcon
+AddCircleIcon
+AddFemaleIcon
+AddInvoiceIcon
+AddMaleIcon
+AddMoneyCircleIcon
+AddSquareIcon
+AddTeam02Icon
+AddTeamIcon
+AddToListIcon
+AddressBookIcon
+AdobeAfterEffectIcon
+AdobeIllustratorIcon
+AdobeIndesignIcon
+AdobePhotoshopIcon
+AdobePremierIcon
+AdobeXdIcon
+AdventureIcon
+AdvertisimentIcon
+AdzanIcon
+AffiliateIcon
+Agreement01Icon
+Agreement02Icon
+Agreement03Icon
+AiAudioIcon
+AiBeautifyIcon
+AiBookIcon
+AiBrain01Icon
+AiBrain02Icon
+AiBrain03Icon
+AiBrain04Icon
+AiBrain05Icon
+AiBrowserIcon
+AiChat01Icon
+AiChat02Icon
+AiChemistry01Icon
+AiChemistry02Icon
+AiChemistry03Icon
+AiChipIcon
+AiCloud01Icon
+AiCloud02Icon
+AiCloudIcon
+AiComputerIcon
+AiContentGenerator01Icon
+AiContentGenerator02Icon
+AiDnaIcon
+AiEditingIcon
+AiEraserIcon
+AiFileIcon
+AiFolder01Icon
+AiFolder02Icon
+AiGameIcon
+AiGenerativeIcon
+AiIdeaIcon
+AiImageIcon
+AiInnovation01Icon
+AiInnovation02Icon
+AiInnovation03Icon
+AiLaptopIcon
+AiLearningIcon
+AiLockIcon
+AiMagicIcon
+AiMail01Icon
+AiMail02Icon
+AiMailIcon
+AiMicIcon
+AiNetworkIcon
+AiPhone01Icon
+AiPhone02Icon
+AiProgrammingIcon
+AiScanIcon
+AiSchedulingIcon
+AiSearch02Icon
+AiSearchIcon
+AiSecurity01Icon
+AiSecurity02Icon
+AiSecurity03Icon
+AiSettingIcon
+AiSheetsIcon
+AiSmartwatchIcon
+AiUserIcon
+AiVideoIcon
+AiViewIcon
+AiVisionRecognitionIcon
+AiVoiceGeneratorIcon
+AiVoiceIcon
+AiWebBrowsingIcon
+AidsIcon
+AirbnbIcon
+AircraftGameIcon
+AirdropIcon
+Airplane01Icon
+Airplane02Icon
+AirplaneLanding01Icon
+AirplaneLanding02Icon
+AirplaneModeOffIcon
+AirplaneModeIcon
+AirplaneSeat02Icon
+AirplaneSeatIcon
+AirplaneTakeOff01Icon
+AirplaneTakeOff02Icon
+AirplayLineIcon
+Airpod01Icon
+Airpod02Icon
+Airpod03Icon
+AirportIcon
+AlAqsaMosqueIcon
+AlarmClockIcon
+Album01Icon
+Album02Icon
+AlbumNotFound01Icon
+AlbumNotFound02Icon
+Alert01Icon
+Alert02Icon
+AlertCircleIcon
+AlertDiamondIcon
+AlertSquareIcon
+AlgorithmIcon
+Alien01Icon
+Alien02Icon
+AlignBottomIcon
+AlignBoxBottomCenterIcon
+AlignBoxBottomLeftIcon
+AlignBoxBottomRightIcon
+AlignBoxMiddleCenterIcon
+AlignBoxMiddleLeftIcon
+AlignBoxMiddleRightIcon
+AlignBoxTopCenterIcon
+AlignBoxTopLeftIcon
+AlignBoxTopRightIcon
+AlignHorizontalCenterIcon
+AlignKeyObjectIcon
+AlignLeftIcon
+AlignRightIcon
+AlignSelectionIcon
+AlignTopIcon
+AlignVerticalCenterIcon
+AllBookmarkIcon
+AllahIcon
+AlmsIcon
+AlphaCircleIcon
+AlphaSquareIcon
+AlphaIcon
+AlphabetArabicIcon
+AlphabetBanglaIcon
+AlphabetChineseIcon
+AlphabetGreekIcon
+AlphabetHebrewIcon
+AlphabetHindiIcon
+AlphabetJapaneseIcon
+AlphabetKoreanIcon
+AlphabetThaiIcon
+AmazonIcon
+AmbulanceIcon
+AmericanFootballIcon
+AmieIcon
+AmmoIcon
+AmpouleIcon
+AnalysisTextLinkIcon
+Analytics01Icon
+Analytics02Icon
+Analytics03Icon
+AnalyticsDownIcon
+AnalyticsUpIcon
+AnchorPointIcon
+AnchorIcon
+AndroidIcon
+AngelIcon
+Angle01Icon
+AngleIcon
+AngryBirdIcon
+AngryIcon
+AnonymousIcon
+ApiIcon
+AppStoreIcon
+Apple01Icon
+AppleFinderIcon
+AppleIntelligenceIcon
+AppleNewsIcon
+ApplePieIcon
+AppleReminderIcon
+AppleStocksIcon
+AppleIcon
+AppleVisionProIcon
+Appointment01Icon
+Appointment02Icon
+ApproximatelyEqualCircleIcon
+ApproximatelyEqualSquareIcon
+ApproximatelyEqualIcon
+ApricotIcon
+ApronIcon
+ArcBrowserIcon
+ArcherIcon
+Archive01Icon
+Archive02Icon
+Archive03Icon
+Archive04Icon
+ArchiveArrowDownIcon
+ArchiveArrowUpIcon
+ArchiveOff03Icon
+ArchiveOff04Icon
+ArchiveIcon
+ArmoredBootIcon
+ArrangeByLettersAZIcon
+ArrangeByLettersZAIcon
+ArrangeByNumbers19Icon
+ArrangeByNumbers91Icon
+ArrangeIcon
+ArrowAllDirectionIcon
+ArrowDataTransferDiagonalIcon
+ArrowDataTransferHorizontalIcon
+ArrowDataTransferVerticalIcon
+ArrowDiagonalIcon
+ArrowDown01Icon
+ArrowDown02Icon
+ArrowDown03Icon
+ArrowDown04Icon
+ArrowDown05Icon
+ArrowDownDoubleIcon
+ArrowDownLeft01Icon
+ArrowDownLeft02Icon
+ArrowDownRight01Icon
+ArrowDownRight02Icon
+ArrowExpand01Icon
+ArrowExpand02Icon
+ArrowExpandDiagonal01Icon
+ArrowExpandDiagonal02Icon
+ArrowExpandIcon
+ArrowHorizontalIcon
+ArrowLeft01Icon
+ArrowLeft02Icon
+ArrowLeft03Icon
+ArrowLeft04Icon
+ArrowLeft05Icon
+ArrowLeftDoubleIcon
+ArrowLeftRightIcon
+ArrowMoveDownLeftIcon
+ArrowMoveDownRightIcon
+ArrowMoveLeftDownIcon
+ArrowMoveRightDownIcon
+ArrowMoveUpLeftIcon
+ArrowMoveUpRightIcon
+ArrowReloadHorizontalIcon
+ArrowReloadVerticalIcon
+ArrowRight01Icon
+ArrowRight02Icon
+ArrowRight03Icon
+ArrowRight04Icon
+ArrowRight05Icon
+ArrowRightDoubleIcon
+ArrowShrink01Icon
+ArrowShrink02Icon
+ArrowShrinkIcon
+ArrowTurnBackwardIcon
+ArrowTurnDownIcon
+ArrowTurnForwardIcon
+ArrowTurnUpIcon
+ArrowUp01Icon
+ArrowUp02Icon
+ArrowUp03Icon
+ArrowUp04Icon
+ArrowUp05Icon
+ArrowUpDoubleIcon
+ArrowUpDownIcon
+ArrowUpLeft01Icon
+ArrowUpLeft02Icon
+ArrowUpRight01Icon
+ArrowUpRight02Icon
+ArrowUpRight03Icon
+ArrowVerticalIcon
+ArtboardIcon
+ArtboardToolIcon
+ArtificialIntelligence01Icon
+ArtificialIntelligence02Icon
+ArtificialIntelligence03Icon
+ArtificialIntelligence04Icon
+ArtificialIntelligence05Icon
+ArtificialIntelligence06Icon
+ArtificialIntelligence07Icon
+ArtificialIntelligence08Icon
+AspectRatioIcon
+AssignmentsIcon
+Asterisk02Icon
+AsteriskIcon
+Asteroid01Icon
+Asteroid02Icon
+Astronaut01Icon
+Astronaut02Icon
+AtIcon
+Atm01Icon
+Atm02Icon
+Atom01Icon
+Atom02Icon
+AtomicPowerIcon
+Attachment01Icon
+Attachment02Icon
+AttachmentCircleIcon
+AttachmentSquareIcon
+AttachmentIcon
+AuctionIcon
+AudioBook01Icon
+AudioBook02Icon
+AudioBook03Icon
+AudioBook04Icon
+AudioWave01Icon
+AudioWave02Icon
+Audit01Icon
+Audit02Icon
+AugmentedRealityArIcon
+AuthorizedIcon
+AutoConversationsIcon
+AutomotiveBattery01Icon
+AutomotiveBattery02Icon
+AvalancheIcon
+AvocadoIcon
+Award01Icon
+Award02Icon
+Award03Icon
+Award04Icon
+Award05Icon
+Baby01Icon
+Baby02Icon
+BabyBed01Icon
+BabyBed02Icon
+BabyBottleIcon
+BabyBoyDressIcon
+BabyGirlDressIcon
+BackMuscleBodyIcon
+BackgroundIcon
+Backpack01Icon
+Backpack02Icon
+Backpack03Icon
+Backward01Icon
+Backward02Icon
+BacteriaIcon
+BadmintonShuttleIcon
+BadmintonIcon
+BalanceScaleIcon
+BalloonsIcon
+BananaIcon
+BandageIcon
+BankIcon
+BarChartHorizontalIcon
+BarChartIcon
+BarCode01Icon
+BarCode02Icon
+BarnsIcon
+BaseballBatIcon
+BaseballHelmetIcon
+BaseballIcon
+BashIcon
+Basketball01Icon
+Basketball02Icon
+BasketballHoopIcon
+Bathtub01Icon
+Bathtub02Icon
+BatteriesEnergyIcon
+BatteryCharging01Icon
+BatteryCharging02Icon
+BatteryEcoChargingIcon
+BatteryEmptyIcon
+BatteryFullIcon
+BatteryLowIcon
+BatteryMedium01Icon
+BatteryMedium02Icon
+BbqGrillIcon
+Beach02Icon
+BeachIcon
+BeaterIcon
+BeboIcon
+BedBunkIcon
+BedDoubleIcon
+BedSingle01Icon
+BedSingle02Icon
+BedIcon
+Bedug01Icon
+Bedug02Icon
+Behance01Icon
+Behance02Icon
+BeltIcon
+BendToolIcon
+BerlinIcon
+BerlinTowerIcon
+BetaIcon
+Bicycle01Icon
+BicycleIcon
+Billiard01Icon
+Billiard02Icon
+BinaryCodeIcon
+BingIcon
+BinocularsIcon
+BioEnergyIcon
+BiomassEnergyIcon
+BiometricAccessIcon
+BiometricDeviceIcon
+BirthdayCakeIcon
+BiscuitIcon
+Bitcoin01Icon
+Bitcoin02Icon
+Bitcoin03Icon
+Bitcoin04Icon
+BitcoinBagIcon
+BitcoinCircleIcon
+BitcoinCloudIcon
+BitcoinCpuIcon
+BitcoinCreditCardIcon
+BitcoinDatabaseIcon
+BitcoinDown01Icon
+BitcoinDown02Icon
+BitcoinEllipseIcon
+BitcoinEyeIcon
+BitcoinFilterIcon
+BitcoinFlashdiskIcon
+BitcoinGraphIcon
+BitcoinInvoiceIcon
+BitcoinKeyIcon
+BitcoinLocationIcon
+BitcoinLockIcon
+BitcoinMailIcon
+BitcoinMindIcon
+BitcoinMoney01Icon
+BitcoinMoney02Icon
+BitcoinPieChartIcon
+BitcoinPiggyBankIcon
+BitcoinPresentationIcon
+BitcoinReceiptIcon
+BitcoinReceiveIcon
+BitcoinRectangleIcon
+BitcoinSafeIcon
+BitcoinSearchIcon
+BitcoinSendIcon
+BitcoinSettingIcon
+BitcoinShieldIcon
+BitcoinShoppingIcon
+BitcoinSmartphone01Icon
+BitcoinSmartphone02Icon
+BitcoinSquareIcon
+BitcoinStoreIcon
+BitcoinIcon
+BitcoinTagIcon
+BitcoinTargetIcon
+BitcoinTransactionIcon
+BitcoinUp01Icon
+BitcoinUp02Icon
+BitcoinWalletIcon
+BitcoinWithdrawIcon
+BlackHole01Icon
+BlackHoleIcon
+BlendIcon
+BlenderIcon
+BlockGameIcon
+Blockchain01Icon
+Blockchain02Icon
+Blockchain03Icon
+Blockchain04Icon
+Blockchain05Icon
+Blockchain06Icon
+Blockchain07Icon
+BlockedIcon
+BloggerIcon
+BloodBagIcon
+BloodBottleIcon
+BloodPressureIcon
+BloodIcon
+BloodTypeIcon
+BlueskyIcon
+BluetoothCircleIcon
+BluetoothNotConnectedIcon
+BluetoothSearchIcon
+BluetoothSquareIcon
+BluetoothIcon
+BlurIcon
+BlushBrush01Icon
+BlushBrush02Icon
+BoardMathIcon
+BoatIcon
+BodyArmorIcon
+BodyPartLegIcon
+BodyPartMuscleIcon
+BodyPartSixPackIcon
+BodySoapIcon
+BodyWeightIcon
+BombIcon
+Bone01Icon
+Bone02Icon
+Book01Icon
+Book02Icon
+Book03Icon
+Book04Icon
+BookBookmark01Icon
+BookBookmark02Icon
+BookDownloadIcon
+BookEditIcon
+BookOpen01Icon
+BookOpen02Icon
+BookUploadIcon
+Bookmark01Icon
+Bookmark02Icon
+Bookmark03Icon
+BookmarkAdd01Icon
+BookmarkAdd02Icon
+BookmarkBlock01Icon
+BookmarkBlock02Icon
+BookmarkCheck01Icon
+BookmarkCheck02Icon
+BookmarkMinus01Icon
+BookmarkMinus02Icon
+BookmarkOff01Icon
+BookmarkOff02Icon
+BookmarkRemove01Icon
+BookmarkRemove02Icon
+Books01Icon
+Books02Icon
+Bookshelf01Icon
+Bookshelf02Icon
+Bookshelf03Icon
+BootstrapIcon
+BorderAll01Icon
+BorderAll02Icon
+BorderBottom01Icon
+BorderBottom02Icon
+BorderFullIcon
+BorderHorizontalIcon
+BorderInnerIcon
+BorderLeft01Icon
+BorderLeft02Icon
+BorderNone01Icon
+BorderNone02Icon
+BorderRight01Icon
+BorderRight02Icon
+BorderTop01Icon
+BorderTop02Icon
+BorderVerticalIcon
+BorobudurIcon
+BotIcon
+BounceLeftIcon
+BounceRightIcon
+BoundingBoxIcon
+BowTieIcon
+BowlingBallIcon
+BowlingPinsIcon
+BowlingIcon
+BoxerIcon
+BoxingBagIcon
+BoxingGlove01Icon
+BoxingGloveIcon
+Brain01Icon
+Brain02Icon
+Brain03Icon
+BrainIcon
+BrandfetchIcon
+Bread01Icon
+Bread02Icon
+Bread03Icon
+Bread04Icon
+BreastPumpIcon
+BridgeIcon
+Briefcase01Icon
+Briefcase02Icon
+Briefcase03Icon
+Briefcase04Icon
+Briefcase05Icon
+Briefcase06Icon
+Briefcase07Icon
+Briefcase08Icon
+Briefcase09Icon
+BriefcaseDollarIcon
+BroccoliIcon
+BrochureIcon
+BrokenBoneIcon
+BrowserIcon
+BrushIcon
+BubbleChatAddIcon
+BubbleChatBlockedIcon
+BubbleChatCancelIcon
+BubbleChatDelayIcon
+BubbleChatDoneIcon
+BubbleChatDownload01Icon
+BubbleChatDownload02Icon
+BubbleChatEditIcon
+BubbleChatFavouriteIcon
+BubbleChatIncomeIcon
+BubbleChatLockIcon
+BubbleChatNotificationIcon
+BubbleChatOutcomeIcon
+BubbleChatPreviewIcon
+BubbleChatQuestionIcon
+BubbleChatSearchIcon
+BubbleChatSecureIcon
+BubbleChatSpark01Icon
+BubbleChatSparkIcon
+BubbleChatIcon
+BubbleChatTemporaryIcon
+BubbleChatTranslateIcon
+BubbleChatUnlockIcon
+BubbleChatUploadIcon
+BubbleChatUserIcon
+BubbleTea01Icon
+BubbleTea02Icon
+Bug01Icon
+Bug02Icon
+Building01Icon
+Building02Icon
+Building03Icon
+Building04Icon
+Building05Icon
+Building06Icon
+BulbChargingIcon
+BulbIcon
+BulletIcon
+BulletproofVestIcon
+BurjAlArabIcon
+BurningCdIcon
+Bus01Icon
+Bus02Icon
+Bus03Icon
+CIcon
+CProgrammingIcon
+Cabinet01Icon
+Cabinet02Icon
+Cabinet03Icon
+Cabinet04Icon
+CableCarIcon
+CactusIcon
+CaduceusIcon
+CafeIcon
+CalculateIcon
+Calculator01Icon
+CalculatorIcon
+Calendar01Icon
+Calendar02Icon
+Calendar03Icon
+Calendar04Icon
+CalendarAdd01Icon
+CalendarAdd02Icon
+CalendarBlock01Icon
+CalendarBlock02Icon
+CalendarCheckIn01Icon
+CalendarCheckIn02Icon
+CalendarCheckOut01Icon
+CalendarCheckOut02Icon
+CalendarDownload01Icon
+CalendarDownload02Icon
+CalendarFavorite01Icon
+CalendarFavorite02Icon
+CalendarLock01Icon
+CalendarLock02Icon
+CalendarLove01Icon
+CalendarLove02Icon
+CalendarMinus01Icon
+CalendarMinus02Icon
+CalendarRemove01Icon
+CalendarRemove02Icon
+CalendarSetting01Icon
+CalendarSetting02Icon
+CalendarUpload01Icon
+CalendarUpload02Icon
+CalendarUserIcon
+Call02Icon
+CallAdd02Icon
+CallAddIcon
+CallBlocked02Icon
+CallBlockedIcon
+CallDisabled02Icon
+CallDisabledIcon
+CallDone02Icon
+CallDoneIcon
+CallEnd01Icon
+CallEnd02Icon
+CallEnd03Icon
+CallEnd04Icon
+CallIncoming01Icon
+CallIncoming02Icon
+CallIncoming03Icon
+CallIncoming04Icon
+CallInternal02Icon
+CallInternalIcon
+CallLocked02Icon
+CallLockedIcon
+CallMinus02Icon
+CallMinusIcon
+CallMissed01Icon
+CallMissed02Icon
+CallMissed03Icon
+CallMissed04Icon
+CallOutgoing01Icon
+CallOutgoing02Icon
+CallOutgoing03Icon
+CallOutgoing04Icon
+CallPaused02Icon
+CallPausedIcon
+CallReceived02Icon
+CallReceivedIcon
+CallRinging01Icon
+CallRinging02Icon
+CallRinging03Icon
+CallRinging04Icon
+CallIcon
+CallUnlocked02Icon
+CallUnlockedIcon
+Calling02Icon
+CallingIcon
+CamelIcon
+Camera01Icon
+Camera02Icon
+Camera03Icon
+CameraAdd01Icon
+CameraAdd02Icon
+CameraAdd03Icon
+CameraAiIcon
+CameraAutomatically01Icon
+CameraAutomatically02Icon
+CameraLensIcon
+CameraMicrophone01Icon
+CameraMicrophone02Icon
+CameraNightMode01Icon
+CameraNightMode02Icon
+CameraOff01Icon
+CameraOff02Icon
+CameraRotated01Icon
+CameraRotated02Icon
+CameraSmile01Icon
+CameraSmile02Icon
+CameraTripodIcon
+CameraVideoIcon
+CamperIcon
+CampfireIcon
+Cancel01Icon
+Cancel02Icon
+CancelCircleHalfDotIcon
+CancelCircleIcon
+CancelSquareIcon
+Candelier01Icon
+Candelier02Icon
+CanvasIcon
+CapProjectingIcon
+CapRoundIcon
+CapStraightIcon
+CapIcon
+CapcutRectangleIcon
+CapcutIcon
+Car01Icon
+Car02Icon
+Car03Icon
+Car04Icon
+Car05Icon
+CarAlertIcon
+CarParking01Icon
+CarParking02Icon
+CarSignalIcon
+CarTimeIcon
+CaravanIcon
+CardExchange01Icon
+CardExchange02Icon
+CardiganIcon
+Cardiogram01Icon
+Cardiogram02Icon
+Cards01Icon
+Cards02Icon
+CargoShipIcon
+CarouselHorizontal02Icon
+CarouselHorizontalIcon
+CarouselVerticalIcon
+CarrotIcon
+Cash01Icon
+Cash02Icon
+CashbackBitcoinIcon
+CashbackEuroIcon
+CashbackPoundIcon
+CashbackIcon
+CashbackYenIcon
+Cashier02Icon
+CashierIcon
+CastboxIcon
+Castle01Icon
+Castle02Icon
+CastleIcon
+CatalogueIcon
+CayanTowerIcon
+CctvCameraIcon
+CdIcon
+CellsIcon
+CellularNetworkOfflineIcon
+CellularNetworkIcon
+CelsiusIcon
+CenterFocusIcon
+CentralShaheedMinarIcon
+CentralizedIcon
+Certificate01Icon
+Certificate02Icon
+Chair01Icon
+Chair02Icon
+Chair03Icon
+Chair04Icon
+Chair05Icon
+ChairBarberIcon
+ChampionIcon
+ChangeScreenModeIcon
+CharacterPhoneticIcon
+CharityIcon
+Chart01Icon
+Chart02Icon
+Chart03Icon
+ChartAverageIcon
+ChartBarLineIcon
+ChartBreakoutCircleIcon
+ChartBreakoutSquareIcon
+ChartBubble01Icon
+ChartBubble02Icon
+ChartColumnIcon
+ChartDecreaseIcon
+ChartDownIcon
+ChartEvaluationIcon
+ChartHighLowIcon
+ChartHistogramIcon
+ChartIncreaseIcon
+ChartLineData01Icon
+ChartLineData02Icon
+ChartLineData03Icon
+ChartMaximumIcon
+ChartMediumIcon
+ChartMinimumIcon
+ChartRadarIcon
+ChartRelationshipIcon
+ChartRingIcon
+ChartRoseIcon
+ChartScatterIcon
+ChartIcon
+ChartUpIcon
+Chat01Icon
+ChatAdd01Icon
+ChatAddIcon
+ChatBlocked01Icon
+ChatBlockedIcon
+ChatBotIcon
+ChatCancel01Icon
+ChatCancelIcon
+ChatDelay01Icon
+ChatDelayIcon
+ChatDone01Icon
+ChatDoneIcon
+ChatDownload01Icon
+ChatDownloadIcon
+ChatEdit01Icon
+ChatEditIcon
+ChatFavourite01Icon
+ChatFavouriteIcon
+ChatFeedback01Icon
+ChatFeedbackIcon
+ChatGptIcon
+ChatIncome01Icon
+ChatIncomeIcon
+ChatLock01Icon
+ChatLockIcon
+ChatNotification01Icon
+ChatNotificationIcon
+ChatOutcome01Icon
+ChatOutcomeIcon
+ChatPreview01Icon
+ChatPreviewIcon
+ChatQuestion01Icon
+ChatQuestionIcon
+ChatSearch01Icon
+ChatSearchIcon
+ChatSecure01Icon
+ChatSecureIcon
+ChatSpark01Icon
+ChatSparkIcon
+ChatIcon
+ChatTranslate01Icon
+ChatTranslateIcon
+ChatUnlock01Icon
+ChatUnlockIcon
+ChatUpload01Icon
+ChatUploadIcon
+ChatUser01Icon
+ChatUserIcon
+Chatting01Icon
+CheckListIcon
+CheckUnread01Icon
+CheckUnread02Icon
+CheckUnread03Icon
+CheckUnread04Icon
+CheckmarkBadge01Icon
+CheckmarkBadge02Icon
+CheckmarkBadge03Icon
+CheckmarkBadge04Icon
+CheckmarkCircle01Icon
+CheckmarkCircle02Icon
+CheckmarkCircle03Icon
+CheckmarkCircle04Icon
+CheckmarkSquare01Icon
+CheckmarkSquare02Icon
+CheckmarkSquare03Icon
+CheckmarkSquare04Icon
+CheeseCake01Icon
+CheeseCake02Icon
+CheeseIcon
+ChefHatIcon
+ChefIcon
+Chemistry01Icon
+Chemistry02Icon
+Chemistry03Icon
+CherryIcon
+Chess01Icon
+Chess02Icon
+ChessPawnIcon
+ChickenThighsIcon
+ChildIcon
+ChimneyIcon
+ChinaTempleIcon
+Chip02Icon
+ChipIcon
+ChocolateIcon
+ChopsticksIcon
+ChromeIcon
+ChryslerIcon
+ChurchIcon
+CinnamonRollIcon
+CircleArrowDataTransferDiagonalIcon
+CircleArrowDataTransferHorizontalIcon
+CircleArrowDataTransferVerticalIcon
+CircleArrowDiagonal01Icon
+CircleArrowDiagonal02Icon
+CircleArrowDown01Icon
+CircleArrowDown02Icon
+CircleArrowDown03Icon
+CircleArrowDownDoubleIcon
+CircleArrowDownLeftIcon
+CircleArrowDownRightIcon
+CircleArrowExpand01Icon
+CircleArrowExpand02Icon
+CircleArrowHorizontalIcon
+CircleArrowLeft01Icon
+CircleArrowLeft02Icon
+CircleArrowLeft03Icon
+CircleArrowLeftDoubleIcon
+CircleArrowLeftRightIcon
+CircleArrowMoveDownLeftIcon
+CircleArrowMoveDownRightIcon
+CircleArrowMoveLeftDownIcon
+CircleArrowMoveRightDownIcon
+CircleArrowMoveUpLeftIcon
+CircleArrowMoveUpRightIcon
+CircleArrowReload01Icon
+CircleArrowReload02Icon
+CircleArrowRight01Icon
+CircleArrowRight02Icon
+CircleArrowRight03Icon
+CircleArrowRightDoubleIcon
+CircleArrowShrink01Icon
+CircleArrowShrink02Icon
+CircleArrowUp01Icon
+CircleArrowUp02Icon
+CircleArrowUp03Icon
+CircleArrowUpDoubleIcon
+CircleArrowUpDownIcon
+CircleArrowUpLeftIcon
+CircleArrowUpRight02Icon
+CircleArrowUpRightIcon
+CircleArrowVerticalIcon
+CircleLock01Icon
+CircleLock02Icon
+CircleLockAdd01Icon
+CircleLockAdd02Icon
+CircleLockCheck01Icon
+CircleLockCheck02Icon
+CircleLockMinus01Icon
+CircleLockMinus02Icon
+CircleLockRemove01Icon
+CircleLockRemove02Icon
+CirclePasswordIcon
+CircleIcon
+CircleUnlock01Icon
+CircleUnlock02Icon
+City01Icon
+City02Icon
+City03Icon
+Clapping01Icon
+Clapping02Icon
+ClaudeIcon
+CleanIcon
+CleaningBucketIcon
+ClinicIcon
+ClipIcon
+ClipartsIcon
+ClipboardIcon
+Clock01Icon
+Clock02Icon
+Clock03Icon
+Clock04Icon
+Clock05Icon
+ClosedCaptionAltIcon
+ClosedCaptionIcon
+ClothesIcon
+CloudAngledRainIcon
+CloudAngledRainZapIcon
+CloudAngledZapIcon
+CloudBigRainIcon
+CloudDownloadIcon
+CloudFastWindIcon
+CloudHailstoneIcon
+CloudLittleRainIcon
+CloudLittleSnowIcon
+CloudLoadingIcon
+CloudMidRainIcon
+CloudMidSnowIcon
+CloudSavingDone01Icon
+CloudSavingDone02Icon
+CloudServerIcon
+CloudSlowWindIcon
+CloudSnowIcon
+CloudIcon
+CloudUploadIcon
+Clubs01Icon
+Clubs02Icon
+CoPresentIcon
+CodeCircleIcon
+CodeFolderIcon
+CodeSquareIcon
+CodeIcon
+CodesandboxIcon
+Coffee01Icon
+Coffee02Icon
+CoffeeBeansIcon
+CoinbaseIcon
+Coins01Icon
+Coins02Icon
+CoinsBitcoinIcon
+CoinsDollarIcon
+CoinsEuroIcon
+CoinsPoundIcon
+CoinsSwapIcon
+CoinsYenIcon
+CollectionsBookmarkIcon
+ColorPickerIcon
+ColorsIcon
+ColosseumIcon
+ColumnDeleteIcon
+ColumnInsertIcon
+Comet01Icon
+Comet02Icon
+ComingSoon01Icon
+ComingSoon02Icon
+CommandLineIcon
+CommandIcon
+Comment01Icon
+Comment02Icon
+Comment03Icon
+CommentAdd01Icon
+CommentAdd02Icon
+CommentAdd03Icon
+CommentBlock01Icon
+CommentBlock02Icon
+CommentBlock03Icon
+CommentRemove01Icon
+CommentRemove02Icon
+CommentRemove03Icon
+Compass01Icon
+CompassIcon
+ComplaintIcon
+ComputerActivityIcon
+ComputerAddIcon
+ComputerArrowDownIcon
+ComputerArrowUpIcon
+ComputerChartDownIcon
+ComputerChartUpIcon
+ComputerCheckIcon
+ComputerCloudIcon
+ComputerDesk01Icon
+ComputerDesk02Icon
+ComputerDesk03Icon
+ComputerDollarIcon
+ComputerEthernetIcon
+ComputerPhoneSyncIcon
+ComputerProgramming01Icon
+ComputerProgramming02Icon
+ComputerProtectionIcon
+ComputerRemoveIcon
+ComputerScreenShareIcon
+ComputerSettingsIcon
+ComputerIcon
+ComputerTerminal01Icon
+ComputerTerminal02Icon
+ComputerUserIcon
+ComputerVideoCallIcon
+ComputerVideoIcon
+Cone01Icon
+Cone02Icon
+ConferenceIcon
+Configuration01Icon
+Configuration02Icon
+ConfusedIcon
+CongruentToCircleIcon
+CongruentToSquareIcon
+CongruentToIcon
+ConnectIcon
+ConsoleIcon
+ConstellationIcon
+Contact01Icon
+Contact02Icon
+ContactBookIcon
+ContactIcon
+ContainerTruck01Icon
+ContainerTruck02Icon
+ContainerTruckIcon
+ContentWritingIcon
+ContractsIcon
+ConversationIcon
+CookBookIcon
+CookieIcon
+Coordinate01Icon
+Coordinate02Icon
+CopilotIcon
+Copy01Icon
+Copy02Icon
+CopyLinkIcon
+CopyrightIcon
+CornIcon
+CorporateIcon
+CosIcon
+Cosine01Icon
+Cosine02Icon
+CottageIcon
+CottonCandyIcon
+Coupon01Icon
+Coupon02Icon
+Coupon03Icon
+CouponPercentIcon
+CourseIcon
+CourtHouseIcon
+CourtLawIcon
+CovariateIcon
+CovidInfoIcon
+CowboyHatIcon
+CppIcon
+CpuChargeIcon
+CpuSettingsIcon
+CpuIcon
+CrabIcon
+CraneIcon
+CrazyIcon
+CreativeMarketIcon
+CreditCardAcceptIcon
+CreditCardAddIcon
+CreditCardChangeIcon
+CreditCardDefrostIcon
+CreditCardFreezeIcon
+CreditCardNotAcceptIcon
+CreditCardNotFoundIcon
+CreditCardPosIcon
+CreditCardIcon
+CreditCardValidationIcon
+CricketBatIcon
+CricketHelmetIcon
+CroissantIcon
+CropIcon
+CrowdfundingIcon
+Crown02Icon
+Crown03Icon
+CrownMinusIcon
+CrownPlusIcon
+CrownIcon
+CryingIcon
+Css3Icon
+CssFile01Icon
+CssFile02Icon
+Csv01Icon
+Csv02Icon
+CubeIcon
+Cupcake01Icon
+Cupcake02Icon
+Cupcake03Icon
+CurlingIcon
+Cursor01Icon
+Cursor02Icon
+CursorAddSelection01Icon
+CursorAddSelection02Icon
+CursorCircleSelection01Icon
+CursorCircleSelection02Icon
+CursorDisabled01Icon
+CursorDisabled02Icon
+CursorEdit01Icon
+CursorEdit02Icon
+CursorHold01Icon
+CursorHold02Icon
+CursorInWindowIcon
+CursorInfo01Icon
+CursorInfo02Icon
+CursorLoading01Icon
+CursorLoading02Icon
+CursorMagicSelection01Icon
+CursorMagicSelection02Icon
+CursorMagicSelection03Icon
+CursorMagicSelection04Icon
+CursorMove01Icon
+CursorMove02Icon
+CursorPointer01Icon
+CursorPointer02Icon
+CursorProgress01Icon
+CursorProgress02Icon
+CursorProgress03Icon
+CursorProgress04Icon
+CursorRectangleSelection01Icon
+CursorRectangleSelection02Icon
+CursorRemoveSelection01Icon
+CursorRemoveSelection02Icon
+CursorTextIcon
+CurtainsIcon
+CurvyLeftDirectionIcon
+CurvyLeftRightDirectionIcon
+CurvyRightDirectionIcon
+CurvyUpDownDirectionIcon
+CustomFieldIcon
+CustomerService01Icon
+CustomerService02Icon
+CustomerServiceIcon
+CustomerSupportIcon
+CustomizeIcon
+Cylinder01Icon
+Cylinder02Icon
+Cylinder03Icon
+Cylinder04Icon
+DangerIcon
+DarkModeIcon
+DartIcon
+DashboardBrowsingIcon
+DashboardCircleAddIcon
+DashboardCircleEditIcon
+DashboardCircleRemoveIcon
+DashboardCircleSettingsIcon
+DashboardCircleIcon
+DashboardSpeed01Icon
+DashboardSpeed02Icon
+DashboardSquare01Icon
+DashboardSquare02Icon
+DashboardSquare03Icon
+DashboardSquareAddIcon
+DashboardSquareEditIcon
+DashboardSquareRemoveIcon
+DashboardSquareSettingIcon
+DashedLine01Icon
+DashedLine02Icon
+DashedLineCircleIcon
+DataRecoveryIcon
+Database01Icon
+Database02Icon
+DatabaseAddIcon
+DatabaseExportIcon
+DatabaseImportIcon
+DatabaseLockedIcon
+DatabaseRestoreIcon
+DatabaseSettingIcon
+DatabaseIcon
+DatabaseSync01Icon
+DatabaseSyncIcon
+DateTimeIcon
+DatesIcon
+DatevIcon
+DeadIcon
+DeepseekIcon
+Delete01Icon
+Delete02Icon
+Delete03Icon
+Delete04Icon
+DeleteColumnIcon
+DeletePutBackIcon
+DeleteRowIcon
+DeleteThrowIcon
+DeliveredSentIcon
+DeliveryBox01Icon
+DeliveryBox02Icon
+DeliveryDelay01Icon
+DeliveryDelay02Icon
+DeliveryReturn01Icon
+DeliveryReturn02Icon
+DeliverySecure01Icon
+DeliverySecure02Icon
+DeliverySent01Icon
+DeliverySent02Icon
+DeliveryTracking01Icon
+DeliveryTracking02Icon
+DeliveryTruck01Icon
+DeliveryTruck02Icon
+DeliveryView01Icon
+DeliveryView02Icon
+DentalBracesIcon
+DentalBrokenToothIcon
+DentalCareIcon
+DentalToothIcon
+DepartementIcon
+DesertIcon
+Desk01Icon
+Desk02Icon
+DeskIcon
+DetergentIcon
+DeveloperIcon
+DeviantartIcon
+DeviceAccessIcon
+DiagonalScrollPoint01Icon
+DiagonalScrollPoint02Icon
+DialpadCircle01Icon
+DialpadCircle02Icon
+DialpadSquare01Icon
+DialpadSquare02Icon
+DiameterIcon
+Diamond01Icon
+Diamond02Icon
+DiamondIcon
+DiaperIcon
+DiceFaces01Icon
+DiceFaces02Icon
+DiceFaces03Icon
+DiceFaces04Icon
+DiceFaces05Icon
+DiceFaces06Icon
+DiceIcon
+DigestionIcon
+DiggIcon
+DigitalClockIcon
+DimSum01Icon
+DimSum02Icon
+DiningTableIcon
+DiplomaIcon
+DirectionLeft01Icon
+DirectionLeft02Icon
+DirectionRight01Icon
+DirectionRight02Icon
+Directions01Icon
+Directions02Icon
+DirhamIcon
+Disability01Icon
+Disability02Icon
+DiscordIcon
+Discount01Icon
+DiscountIcon
+DiscountTag01Icon
+DiscountTag02Icon
+DiscoverCircleIcon
+DiscoverSquareIcon
+Dish01Icon
+Dish02Icon
+DishWasherIcon
+DispleasedIcon
+DistributeHorizontalCenterIcon
+DistributeHorizontalLeftIcon
+DistributeHorizontalRightIcon
+DistributeVerticalBottomIcon
+DistributeVerticalCenterIcon
+DistributeVerticalTopIcon
+DistributionIcon
+DivideSignCircleIcon
+DivideSignSquareIcon
+DivideSignIcon
+Dna01Icon
+DnaIcon
+DoNotTouch01Icon
+DoNotTouch02Icon
+Doc01Icon
+Doc02Icon
+Doctor01Icon
+Doctor02Icon
+Doctor03Icon
+DocumentAttachmentIcon
+DocumentCodeIcon
+DocumentValidationIcon
+Dollar01Icon
+Dollar02Icon
+DollarCircleIcon
+DollarReceive01Icon
+DollarReceive02Icon
+DollarSend01Icon
+DollarSend02Icon
+DollarSquareIcon
+DomeIcon
+DominoIcon
+Door01Icon
+Door02Icon
+DoorLockIcon
+DoorIcon
+DoughnutIcon
+Download01Icon
+Download02Icon
+Download03Icon
+Download04Icon
+Download05Icon
+DownloadCircle01Icon
+DownloadCircle02Icon
+DownloadSquare01Icon
+DownloadSquare02Icon
+Drag01Icon
+Drag02Icon
+Drag03Icon
+Drag04Icon
+DragDropHorizontalIcon
+DragDropIcon
+DragDropVerticalIcon
+DragLeft01Icon
+DragLeft02Icon
+DragLeft03Icon
+DragLeft04Icon
+DragRight01Icon
+DragRight02Icon
+DragRight03Icon
+DragRight04Icon
+DrawingCompassIcon
+DrawingModeIcon
+Dress01Icon
+Dress02Icon
+Dress03Icon
+Dress04Icon
+Dress05Icon
+Dress06Icon
+Dress07Icon
+DressingTable01Icon
+DressingTable02Icon
+DressingTable03Icon
+DribbbleIcon
+DrinkIcon
+DriveIcon
+DroneIcon
+DroolingIcon
+DropboxIcon
+DropletIcon
+DropperIcon
+Ds3ToolIcon
+DuaIcon
+Dumbbell01Icon
+Dumbbell02Icon
+Dumbbell03Icon
+EarRings01Icon
+EarRings02Icon
+EarRings03Icon
+EarIcon
+EarthIcon
+EaseCurveControlPointsIcon
+EaseInControlPointIcon
+EaseInOutIcon
+EaseInIcon
+EaseOutControlPointIcon
+EaseOutIcon
+EcoEnergyIcon
+EcoLab01Icon
+EcoLab02Icon
+EcoLabIcon
+EcoPowerIcon
+EdgeStyleIcon
+Edit01Icon
+Edit02Icon
+Edit03Icon
+Edit04Icon
+EditOff03Icon
+EditOff04Icon
+EditOffIcon
+EditRoadIcon
+EditTableIcon
+EditUser02Icon
+EggsIcon
+EidMubarakIcon
+EiffelTowerIcon
+EightCircleIcon
+EightSquareIcon
+ElearningExchangeIcon
+ElectricHome01Icon
+ElectricHome02Icon
+ElectricPlugsIcon
+ElectricTower01Icon
+ElectricTower02Icon
+ElectricWireIcon
+EllipseSelectionIcon
+EncryptIcon
+EnergyEllipseIcon
+EnergyRectangleIcon
+EnergyIcon
+EnteringGeoFenceIcon
+EntranceStairsIcon
+EnvatoIcon
+EqualSignCircleIcon
+EqualSignSquareIcon
+EqualSignIcon
+EquipmentBenchPressIcon
+EquipmentChestPressIcon
+EquipmentGym01Icon
+EquipmentGym02Icon
+EquipmentGym03Icon
+EquipmentWeightliftingIcon
+Eraser01Icon
+EraserAddIcon
+EraserAutoIcon
+EraserIcon
+Estimate01Icon
+Estimate02Icon
+EthereumEllipseIcon
+EthereumRectangleIcon
+EthereumIcon
+EuroCircleIcon
+EuroReceiveIcon
+EuroSendIcon
+EuroSquareIcon
+EuroIcon
+EvChargingIcon
+EvilIcon
+Exchange01Icon
+Exchange02Icon
+Exchange03Icon
+ExpanderIcon
+ExternalDriveIcon
+EyeIcon
+FaceIdIcon
+Facebook01Icon
+Facebook02Icon
+Factory01Icon
+Factory02Icon
+FactoryIcon
+FahrenheitIcon
+FallingStarIcon
+Fan01Icon
+Fan02Icon
+FastWindIcon
+FavouriteCircleIcon
+FavouriteSquareIcon
+FavouriteIcon
+FeatherIcon
+Female02Icon
+FemaleSymbolIcon
+FencingMaskIcon
+FencingIcon
+FerrisWheelIcon
+FerryBoatIcon
+FigmaIcon
+File01Icon
+File02Icon
+FileAddIcon
+FileAttachmentIcon
+FileAudioIcon
+FileBitcoinIcon
+FileBlockIcon
+FileBookmarkIcon
+FileCloudIcon
+FileCorruptIcon
+FileDollarIcon
+FileDownloadIcon
+FileEditIcon
+FileEmpty01Icon
+FileEmpty02Icon
+FileEuroIcon
+FileExportIcon
+FileFavouriteIcon
+FileImportIcon
+FileLinkIcon
+FileLockedIcon
+FileManagementIcon
+FileMinusIcon
+FileMusicIcon
+FileNotFoundIcon
+FilePasteIcon
+FilePinIcon
+FilePoundIcon
+FileRemoveIcon
+FileScriptIcon
+FileSearchIcon
+FileSecurityIcon
+FileShredderIcon
+FileStarIcon
+FileSyncIcon
+FileUnknownIcon
+FileUnlockedIcon
+FileUploadIcon
+FileValidationIcon
+FileVerifiedIcon
+FileVideoIcon
+FileViewIcon
+FileYenIcon
+FileZipIcon
+Files01Icon
+Files02Icon
+Film01Icon
+Film02Icon
+FilmRoll01Icon
+FilmRoll02Icon
+FilterAddIcon
+FilterEditIcon
+FilterHorizontalIcon
+FilterMailCircleIcon
+FilterMailSquareIcon
+FilterRemoveIcon
+FilterResetIcon
+FilterIcon
+FilterVerticalIcon
+FingerAccessIcon
+FingerPrintAddIcon
+FingerPrintCheckIcon
+FingerPrintMinusIcon
+FingerPrintRemoveIcon
+FingerPrintScanIcon
+FingerPrintIcon
+FinsIcon
+Fire02Icon
+Fire03Icon
+FirePitIcon
+FireSecurityIcon
+FireIcon
+FirewallIcon
+FireworksIcon
+FirstAidKitIcon
+FishFoodIcon
+FitToScreenIcon
+FiveCircleIcon
+FiveSquareIcon
+FiverrIcon
+Flag01Icon
+Flag02Icon
+Flag03Icon
+FlashOffIcon
+FlashIcon
+FlashlightIcon
+FlaticonIcon
+FlickrIcon
+FlimSlateIcon
+FlipBottomIcon
+FlipHorizontalIcon
+FlipLeftIcon
+FlipPhoneIcon
+FlipRightIcon
+FlipTopIcon
+FlipVerticalIcon
+FloorPlanIcon
+FloppyDiskIcon
+FlowCircleIcon
+FlowConnectionIcon
+FlowSquareIcon
+FlowIcon
+Flowchart01Icon
+Flowchart02Icon
+FlowerPotIcon
+FlowerIcon
+FlushedIcon
+FlyingHumanIcon
+FocusPointIcon
+Folder01Icon
+Folder02Icon
+Folder03Icon
+FolderAddIcon
+FolderAttachmentIcon
+FolderAudioIcon
+FolderBlockIcon
+FolderCheckIcon
+FolderCloudIcon
+FolderDetailsReferenceIcon
+FolderDetailsIcon
+FolderDownloadIcon
+FolderEditIcon
+FolderExportIcon
+FolderFavouriteIcon
+FolderFileStorageIcon
+FolderImportIcon
+FolderLibraryIcon
+FolderLinksIcon
+FolderLockedIcon
+FolderManagementIcon
+FolderMinusIcon
+FolderMusicIcon
+FolderOffIcon
+FolderOpenIcon
+FolderPinIcon
+FolderRemoveIcon
+FolderSearchIcon
+FolderSecurityIcon
+FolderShared01Icon
+FolderShared02Icon
+FolderShared03Icon
+FolderSyncIcon
+FolderTransferIcon
+FolderUnknownIcon
+FolderUnlockedIcon
+FolderUploadIcon
+FolderVideoIcon
+FolderViewIcon
+FolderZipIcon
+FoldersIcon
+FootballPitchIcon
+FootballIcon
+ForgotPasswordIcon
+ForkIcon
+ForrstIcon
+FortressIcon
+Forward01Icon
+Forward02Icon
+FourCircleIcon
+FourFinger02Icon
+FourFinger03Icon
+FourSquareIcon
+FramerIcon
+FrameworksIcon
+FrenchFries01Icon
+FrenchFries02Icon
+FridgeIcon
+FrisbeeIcon
+FryIcon
+Fuel01Icon
+Fuel02Icon
+FuelStationIcon
+FuelIcon
+FullScreenIcon
+FullSignalIcon
+FunctionCircleIcon
+FunctionOfXIcon
+FunctionSquareIcon
+FunctionIcon
+GalaxyIcon
+GameController01Icon
+GameController02Icon
+GameController03Icon
+GameIcon
+GameboyIcon
+GarageIcon
+GarbageTruckIcon
+GarlandsIcon
+GasPipeIcon
+GasStoveIcon
+GearsIcon
+GemIcon
+GeologyCrustIcon
+GeometricShapes01Icon
+GeometricShapes02Icon
+GibbousMoonIcon
+Gif01Icon
+Gif02Icon
+GiftCard02Icon
+GiftCardIcon
+GiftIcon
+GitBranchIcon
+GitCommitIcon
+GitCompareIcon
+GitForkIcon
+GitMergeIcon
+GitPullRequestClosedIcon
+GitPullRequestDraftIcon
+GitPullRequestIcon
+GitbookIcon
+Github01Icon
+GithubIcon
+GitlabIcon
+GiveBloodIcon
+GivePillIcon
+GlassesIcon
+GlobalEditingIcon
+GlobalEducationIcon
+GlobalRefreshIcon
+GlobalSearchIcon
+GlobalIcon
+Globe02Icon
+GlobeIcon
+GloveIcon
+GnomeIcon
+GoBackward10SecIcon
+GoBackward15SecIcon
+GoBackward30SecIcon
+GoBackward5SecIcon
+GoBackward60SecIcon
+GoForward10SecIcon
+GoForward15SecIcon
+GoForward30SecIcon
+GoForward5SecIcon
+GoForward60SecIcon
+GoldIngotsIcon
+GoldIcon
+GolfBallIcon
+GolfBatIcon
+GolfCartIcon
+GolfHoleIcon
+GoogleDocIcon
+GoogleDriveIcon
+GoogleGeminiIcon
+GoogleHomeIcon
+GoogleLensIcon
+GoogleMapsIcon
+GooglePhotosIcon
+GoogleSheetIcon
+GoogleIcon
+Gps01Icon
+Gps02Icon
+GpsDisconnectedIcon
+GpsOff01Icon
+GpsOff02Icon
+GpsSignal01Icon
+GpsSignal02Icon
+GpuIcon
+GraduateFemaleIcon
+GraduateMaleIcon
+GraduationScrollIcon
+GrapesIcon
+GravityIcon
+GreaterThanCircleIcon
+GreaterThanSquareIcon
+GreaterThanIcon
+GreekHelmetIcon
+GreenHouseIcon
+Grid02Icon
+GridOffIcon
+GridIcon
+GridTableIcon
+GridViewIcon
+GrimacingIcon
+GrinningIcon
+Grok02Icon
+GrokIcon
+Group01Icon
+GroupItemsIcon
+GroupLayersIcon
+GuestHouseIcon
+GunIcon
+GymnasticRingsIcon
+GymnasticIcon
+HackerrankIcon
+HairClipsIcon
+HairDryerIcon
+HajiIcon
+HalalLabIcon
+HalalIcon
+Hamburger01Icon
+Hamburger02Icon
+HandBag01Icon
+HandBag02Icon
+HandBeaterIcon
+HandGripIcon
+HandPointingDown01Icon
+HandPointingDown02Icon
+HandPointingDown03Icon
+HandPointingDown04Icon
+HandPointingLeft01Icon
+HandPointingLeft02Icon
+HandPointingLeft03Icon
+HandPointingLeft04Icon
+HandPointingRight01Icon
+HandPointingRight02Icon
+HandPointingRight03Icon
+HandPointingRight04Icon
+HandPrayerIcon
+HandSanitizerIcon
+HandcuffsIcon
+HangerIcon
+HangingClockIcon
+HangoutIcon
+Happy01Icon
+HappyIcon
+HardDriveIcon
+HatIcon
+HddIcon
+Hdr01Icon
+Hdr02Icon
+Heading01Icon
+Heading02Icon
+Heading03Icon
+Heading04Icon
+Heading05Icon
+Heading06Icon
+HeadingIcon
+HeadphoneMuteIcon
+HeadphonesIcon
+HeadsetConnectedIcon
+HeadsetOffIcon
+HeadsetIcon
+HealtcareIcon
+HealthIcon
+HeartAddIcon
+HeartCheckIcon
+HeartRemoveIcon
+HeartbreakIcon
+HelicopterIcon
+HelpCircleIcon
+HelpSquareIcon
+Hexagon01Icon
+HexagonIcon
+HierarchyCircle01Icon
+HierarchyCircle02Icon
+HierarchyCircle03Icon
+HierarchyFilesIcon
+HierarchySquare01Icon
+HierarchySquare02Icon
+HierarchySquare03Icon
+HierarchySquare04Icon
+HierarchySquare05Icon
+HierarchySquare06Icon
+HierarchySquare07Icon
+HierarchySquare08Icon
+HierarchySquare10Icon
+HierarchyIcon
+HighHeels01Icon
+HighHeels02Icon
+HighlighterIcon
+HijabIcon
+HockeyIcon
+Hold01Icon
+Hold02Icon
+Hold03Icon
+Hold04Icon
+Hold05Icon
+HoldLocked01Icon
+HoldLocked02Icon
+HoldPhoneIcon
+HologramIcon
+Home01Icon
+Home02Icon
+Home03Icon
+Home04Icon
+Home05Icon
+Home06Icon
+Home07Icon
+Home08Icon
+Home09Icon
+Home10Icon
+Home11Icon
+Home12Icon
+Home13Icon
+HomeWifiIcon
+Honey01Icon
+Honey02Icon
+HonorIcon
+HonourStarIcon
+HoodieIcon
+HorizonalScrollPointIcon
+HorizontalResizeIcon
+HorseHeadIcon
+HorseSaddleIcon
+HorseIcon
+Hospital01Icon
+Hospital02Icon
+HospitalBed01Icon
+HospitalBed02Icon
+HospitalLocationIcon
+HotAirBalloonIcon
+HotPriceIcon
+HotTubeIcon
+HotdogIcon
+Hotel01Icon
+Hotel02Icon
+HotelBellIcon
+HotspotOfflineIcon
+HotspotIcon
+HourglassOffIcon
+HourglassIcon
+House01Icon
+House02Icon
+House03Icon
+House04Icon
+House05Icon
+HouseSolarPanelIcon
+Html5Icon
+HtmlFile01Icon
+HtmlFile02Icon
+HugeiconsIcon
+HumidityIcon
+HutIcon
+HydroPowerIcon
+HyperboleIcon
+IceCream01Icon
+IceCream02Icon
+IceCream03Icon
+IceCream04Icon
+IceCubesIcon
+IceHockeyIcon
+IceSkatingIcon
+IcoIcon
+IconjarIcon
+IdNotVerifiedIcon
+IdIcon
+IdVerifiedIcon
+Idea01Icon
+IdeaIcon
+IdentificationIcon
+IdentityCardIcon
+Image01Icon
+Image02Icon
+Image03Icon
+ImageActualSizeIcon
+ImageAdd01Icon
+ImageAdd02Icon
+ImageCompositionOvalIcon
+ImageCompositionIcon
+ImageCounterClockwiseIcon
+ImageCropIcon
+ImageDelete01Icon
+ImageDelete02Icon
+ImageDone01Icon
+ImageDone02Icon
+ImageDownload02Icon
+ImageDownloadIcon
+ImageFlipVerticalIcon
+ImageNotFound01Icon
+ImageNotFound02Icon
+ImageRemove01Icon
+ImageRemove02Icon
+ImageRotationClockwiseIcon
+ImageUpload01Icon
+ImageUploadIcon
+ImoIcon
+ImportantBookIcon
+InLoveIcon
+InboxCheckIcon
+InboxDownloadIcon
+InboxIcon
+InboxUnreadIcon
+InboxUploadIcon
+IncognitoIcon
+IndiaGateIcon
+Inequality01Icon
+Inequality02Icon
+InequalityCircle01Icon
+InequalityCircle02Icon
+InequalitySquare01Icon
+InequalitySquare02Icon
+InfantIcon
+Infinity01Icon
+Infinity02Icon
+InfinityCircleIcon
+InfinitySquareIcon
+InformationCircleIcon
+InformationDiamondIcon
+InformationSquareIcon
+InjectionIcon
+InsertBottomImageIcon
+InsertCenterImageIcon
+InsertColumnLeftIcon
+InsertColumnRightIcon
+InsertColumnIcon
+InsertPiIcon
+InsertRowDownIcon
+InsertRowIcon
+InsertRowUpIcon
+InsertTopImageIcon
+InspectCodeIcon
+InstagramIcon
+InstallingUpdates01Icon
+InstallingUpdates02Icon
+InternetAntenna01Icon
+InternetAntenna02Icon
+InternetAntenna03Icon
+InternetAntenna04Icon
+InternetIcon
+InvestigationIcon
+Invoice01Icon
+Invoice02Icon
+Invoice03Icon
+Invoice04Icon
+InvoiceIcon
+IpodIcon
+IrisScanIcon
+IslandIcon
+JarIcon
+JavaScriptIcon
+JavaIcon
+JobLinkIcon
+JobSearchIcon
+JobShareIcon
+JoggerPantsIcon
+JoinBevelIcon
+JoinRoundIcon
+JoinStraightIcon
+JokerIcon
+Joystick01Icon
+Joystick02Icon
+Joystick03Icon
+Joystick04Icon
+Joystick05Icon
+Jpg01Icon
+Jpg02Icon
+Jsx01Icon
+Jsx02Icon
+Jsx03Icon
+JudgeIcon
+JumpersIcon
+JupiterIcon
+JusticeScale01Icon
+JusticeScale02Icon
+Kaaba01Icon
+Kaaba02Icon
+KanbanIcon
+KayakIcon
+KeffiyehIcon
+Kettle01Icon
+KettleIcon
+KettlebellIcon
+KetupatIcon
+Key01Icon
+Key02Icon
+KeyGeneratorFobIcon
+KeyboardIcon
+KeyframeAddIcon
+KeyframeAlignCenterIcon
+KeyframeAlignHorizontalIcon
+KeyframeAlignVerticalIcon
+KeyframeBottomIcon
+KeyframeLeftIcon
+KeyframeRemoveIcon
+KeyframeRightIcon
+KeyframeIcon
+KeyframeTopIcon
+KeyframesDoubleAddIcon
+KeyframesDoubleRemoveIcon
+KeyframesDoubleIcon
+KeyframesMultipleAddIcon
+KeyframesMultipleRemoveIcon
+KeyframesMultipleIcon
+Kickstarter01Icon
+Kickstarter02Icon
+KidIcon
+KidneysIcon
+KimiAiIcon
+KissingIcon
+KitchenUtensilsIcon
+KiteIcon
+KlarnaIcon
+Knife01Icon
+Knife02Icon
+KnifeBreadIcon
+KnightShieldIcon
+KnivesIcon
+Knowledge01Icon
+Knowledge02Icon
+KoFiIcon
+Kurta01Icon
+KurtaIcon
+LabelImportantIcon
+LabelIcon
+LaborIcon
+LabsIcon
+LakeIcon
+Lamp01Icon
+Lamp02Icon
+Lamp03Icon
+Lamp04Icon
+Lamp05Icon
+LampIcon
+LanguageCircleIcon
+LanguageSkillIcon
+LanguageSquareIcon
+LanternIcon
+LaptopAddIcon
+LaptopChargingIcon
+LaptopCheckIcon
+LaptopCloudIcon
+LaptopIssueIcon
+LaptopPerformanceIcon
+LaptopPhoneSyncIcon
+LaptopProgrammingIcon
+LaptopRemoveIcon
+LaptopSettingsIcon
+LaptopIcon
+LaptopVideoIcon
+LassoTool01Icon
+LassoTool02Icon
+LastFmIcon
+LatitudeIcon
+LaughingIcon
+LaurelWreath01Icon
+LaurelWreath02Icon
+LaurelWreathFirst01Icon
+LaurelWreathFirst02Icon
+LaurelWreathLeft01Icon
+LaurelWreathLeft02Icon
+LaurelWreathLeft03Icon
+LaurelWreathRight01Icon
+LaurelWreathRight02Icon
+LaurelWreathRight03Icon
+LayerAddIcon
+LayerBringForwardIcon
+LayerBringToFrontIcon
+LayerMask01Icon
+LayerMask02Icon
+LayerSendBackwardIcon
+LayerSendToBackIcon
+LayerIcon
+Layers01Icon
+Layers02Icon
+LayersLogoIcon
+Layout01Icon
+Layout02Icon
+Layout03Icon
+Layout04Icon
+Layout05Icon
+Layout06Icon
+Layout07Icon
+Layout2ColumnIcon
+Layout2RowIcon
+Layout3ColumnIcon
+Layout3RowIcon
+LayoutBottomIcon
+LayoutGridIcon
+LayoutLeftIcon
+LayoutRightIcon
+LayoutTable01Icon
+LayoutTable02Icon
+LayoutTopIcon
+Leaf01Icon
+Leaf02Icon
+Leaf03Icon
+Leaf04Icon
+LeavingGeoFenceIcon
+LeetcodeIcon
+LeftAngleIcon
+LeftToRightBlockQuoteIcon
+LeftToRightListBulletIcon
+LeftToRightListDashIcon
+LeftToRightListNumberIcon
+LeftToRightListStar01Icon
+LeftToRightListStarIcon
+LeftToRightListTriangleIcon
+LeftTriangleIcon
+Legal01Icon
+Legal02Icon
+LegalDocument01Icon
+LegalDocument02Icon
+LegalHammerIcon
+LessThanCircleIcon
+LessThanSquareIcon
+LessThanIcon
+LetterSpacingIcon
+LibrariesIcon
+LibraryIcon
+LicenseDraftIcon
+LicenseMaintenanceIcon
+LicenseNoIcon
+LicensePinIcon
+LicenseIcon
+LicenseThirdPartyIcon
+LifebuoyIcon
+LiftTruckIcon
+LighthouseIcon
+LimitOrderIcon
+LimitationIcon
+LineIcon
+LinerIcon
+Link01Icon
+Link02Icon
+Link03Icon
+Link04Icon
+Link05Icon
+Link06Icon
+LinkBackwardIcon
+LinkCircle02Icon
+LinkCircleIcon
+LinkForwardIcon
+LinkSquare01Icon
+LinkSquare02Icon
+Linkedin01Icon
+Linkedin02Icon
+ListSettingIcon
+ListViewIcon
+LitecoinIcon
+LiveStreaming01Icon
+LiveStreaming02Icon
+LiveStreaming03Icon
+LiverIcon
+Loading01Icon
+Loading02Icon
+Loading03Icon
+Loading04Icon
+Location01Icon
+Location02Icon
+Location03Icon
+Location04Icon
+Location05Icon
+Location06Icon
+Location07Icon
+Location08Icon
+Location09Icon
+Location10Icon
+LocationAdd01Icon
+LocationAdd02Icon
+LocationCheck01Icon
+LocationCheck02Icon
+LocationFavourite01Icon
+LocationFavourite02Icon
+LocationOffline01Icon
+LocationOffline02Icon
+LocationOffline03Icon
+LocationOffline04Icon
+LocationRemove01Icon
+LocationRemove02Icon
+LocationShare01Icon
+LocationShare02Icon
+LocationStar01Icon
+LocationStar02Icon
+LocationUpdate01Icon
+LocationUpdate02Icon
+LocationUser01Icon
+LocationUser02Icon
+LocationUser03Icon
+LocationUser04Icon
+LockComputerIcon
+LockKeyIcon
+LockPasswordIcon
+LockIcon
+LockSync01Icon
+LockSync02Icon
+LockedIcon
+Locker01Icon
+LockerIcon
+Login01Icon
+Login02Icon
+Login03Icon
+LoginCircle01Icon
+LoginCircle02Icon
+LoginMethodIcon
+LoginSquare01Icon
+LoginSquare02Icon
+Logout01Icon
+Logout02Icon
+Logout03Icon
+Logout04Icon
+Logout05Icon
+LogoutCircle01Icon
+LogoutCircle02Icon
+LogoutSquare01Icon
+LogoutSquare02Icon
+LollipopIcon
+LongSleeveShirtIcon
+LongitudeIcon
+LookBottomIcon
+LookLeftIcon
+LookRightIcon
+LookTopIcon
+LoomIcon
+LottiefilesIcon
+LoveKoreanFingerIcon
+LowSignalIcon
+LoyaltyCardIcon
+Luggage01Icon
+Luggage02Icon
+LungsIcon
+MachineRobotIcon
+MagicWand01Icon
+MagicWand02Icon
+MagicWand03Icon
+MagicWand04Icon
+MagicWand05Icon
+Magnet01Icon
+Magnet02Icon
+MagnetIcon
+Mail01Icon
+Mail02Icon
+MailAccount01Icon
+MailAccount02Icon
+MailAdd01Icon
+MailAdd02Icon
+MailAtSign01Icon
+MailAtSign02Icon
+MailBlock01Icon
+MailBlock02Icon
+MailDownload01Icon
+MailDownload02Icon
+MailEdit01Icon
+MailEdit02Icon
+MailLock01Icon
+MailLock02Icon
+MailLove01Icon
+MailLove02Icon
+MailMinus01Icon
+MailMinus02Icon
+MailOpen01Icon
+MailOpen02Icon
+MailOpenLoveIcon
+MailOpenIcon
+MailReceive01Icon
+MailReceive02Icon
+MailRemove01Icon
+MailRemove02Icon
+MailReply01Icon
+MailReply02Icon
+MailReplyAll01Icon
+MailReplyAll02Icon
+MailSearch01Icon
+MailSearch02Icon
+MailSecure01Icon
+MailSecure02Icon
+MailSend01Icon
+MailSend02Icon
+MailSetting01Icon
+MailSetting02Icon
+MailUnlock01Icon
+MailUnlock02Icon
+MailUpload01Icon
+MailUpload02Icon
+MailValidation01Icon
+MailValidation02Icon
+MailVoice01Icon
+MailVoice02Icon
+Mailbox01Icon
+MailboxIcon
+Male02Icon
+MaleSymbolIcon
+ManIcon
+ManWomanIcon
+ManagerIcon
+MapPinIcon
+MapPinpoint01Icon
+MapPinpoint02Icon
+MapingIcon
+MapsCircle01Icon
+MapsCircle02Icon
+MapsEditingIcon
+MapsGlobal01Icon
+MapsGlobal02Icon
+MapsLocation01Icon
+MapsLocation02Icon
+MapsOffIcon
+MapsRefreshIcon
+MapsSearchIcon
+MapsSquare01Icon
+MapsSquare02Icon
+MapsIcon
+MarketAnalysisIcon
+MarketOrderIcon
+MarketingIcon
+MaskLoveIcon
+MaskIcon
+MaskTheater01Icon
+MaskTheater02Icon
+MasterCardIcon
+MastodonIcon
+MatchesIcon
+MaterialAndTextureIcon
+MathIcon
+MatrixIcon
+Maximize01Icon
+Maximize02Icon
+Maximize03Icon
+Maximize04Icon
+MaximizeScreenIcon
+MayanPyramidIcon
+MazeIcon
+McpServerIcon
+Medal01Icon
+Medal02Icon
+Medal03Icon
+Medal04Icon
+Medal05Icon
+Medal06Icon
+Medal07Icon
+MedalFirstPlaceIcon
+MedalSecondPlaceIcon
+MedalThirdPlaceIcon
+MedicalFileIcon
+MedicalMaskIcon
+Medicine01Icon
+Medicine02Icon
+MedicineBottle01Icon
+MedicineBottle02Icon
+MedicineSyrupIcon
+MediumSignalIcon
+MediumSquareIcon
+MediumIcon
+MeetingRoomIcon
+Megaphone01Icon
+Megaphone02Icon
+Megaphone03Icon
+MehIcon
+MentorIcon
+MentoringIcon
+Menu01Icon
+Menu02Icon
+Menu03Icon
+Menu04Icon
+Menu05Icon
+Menu06Icon
+Menu07Icon
+Menu08Icon
+Menu09Icon
+Menu10Icon
+Menu11Icon
+MenuCircleIcon
+MenuCollapseIcon
+MenuRestaurantIcon
+MenuSquareIcon
+MenuTwoLineIcon
+Message01Icon
+Message02Icon
+MessageAdd01Icon
+MessageAdd02Icon
+MessageBlockedIcon
+MessageCancel01Icon
+MessageCancel02Icon
+MessageDelay01Icon
+MessageDelay02Icon
+MessageDone01Icon
+MessageDone02Icon
+MessageDownload01Icon
+MessageDownload02Icon
+MessageEdit01Icon
+MessageEdit02Icon
+MessageFavourite01Icon
+MessageFavourite02Icon
+MessageIncoming01Icon
+MessageIncoming02Icon
+MessageLock01Icon
+MessageLock02Icon
+MessageMultiple01Icon
+MessageMultiple02Icon
+MessageNotification01Icon
+MessageNotification02Icon
+MessageOutgoing01Icon
+MessageOutgoing02Icon
+MessagePreview01Icon
+MessagePreview02Icon
+MessageProgrammingIcon
+MessageQuestionIcon
+MessageSearch01Icon
+MessageSearch02Icon
+MessageSecure01Icon
+MessageSecure02Icon
+MessageTranslateIcon
+MessageUnlock01Icon
+MessageUnlock02Icon
+MessageUpload01Icon
+MessageUpload02Icon
+MessageUser01Icon
+MessageUser02Icon
+MessengerIcon
+MetaIcon
+MetroIcon
+Mic01Icon
+Mic02Icon
+MicOff01Icon
+MicOff02Icon
+MicroscopeIcon
+MicrosoftAdminIcon
+MicrosoftIcon
+MicrowaveIcon
+MilkBottleIcon
+MilkCartonIcon
+MilkCoconutIcon
+MilkOatIcon
+Minimize01Icon
+Minimize02Icon
+Minimize03Icon
+Minimize04Icon
+MinimizeScreenIcon
+Mining01Icon
+Mining02Icon
+Mining03Icon
+MinusPlus01Icon
+MinusPlus02Icon
+MinusPlusCircle01Icon
+MinusPlusCircle02Icon
+MinusPlusSquare01Icon
+MinusPlusSquare02Icon
+MinusSignCircleIcon
+MinusSignSquareIcon
+MinusSignIcon
+MirrorIcon
+MirroringScreenIcon
+MistralIcon
+MixerIcon
+MobileNavigator01Icon
+MobileNavigator02Icon
+MobileProgramming01Icon
+MobileProgramming02Icon
+MobileProtectionIcon
+MobileSecurityIcon
+MochiIcon
+ModernTvFourKIcon
+ModernTvIssueIcon
+ModernTvIcon
+MoleculesIcon
+MollieIcon
+MonasIcon
+Money01Icon
+Money02Icon
+Money03Icon
+Money04Icon
+MoneyAdd01Icon
+MoneyAdd02Icon
+MoneyBag01Icon
+MoneyBag02Icon
+MoneyExchange01Icon
+MoneyExchange02Icon
+MoneyExchange03Icon
+MoneyNotFound01Icon
+MoneyNotFound02Icon
+MoneyNotFound03Icon
+MoneyNotFound04Icon
+MoneyReceive01Icon
+MoneyReceive02Icon
+MoneyReceiveCircleIcon
+MoneyReceiveFlow01Icon
+MoneyReceiveFlow02Icon
+MoneyReceiveSquareIcon
+MoneyRemove01Icon
+MoneyRemove02Icon
+MoneySafeIcon
+MoneySavingJarIcon
+MoneySecurityIcon
+MoneySend01Icon
+MoneySend02Icon
+MoneySendCircleIcon
+MoneySendFlow01Icon
+MoneySendFlow02Icon
+MoneySendSquareIcon
+Monocle01Icon
+MonocleIcon
+MonsterIcon
+Moon01Icon
+Moon02Icon
+MoonAngledRainZapIcon
+MoonCloudAngledRainIcon
+MoonCloudAngledZapIcon
+MoonCloudBigRainIcon
+MoonCloudFastWindIcon
+MoonCloudHailstoneIcon
+MoonCloudLittleRainIcon
+MoonCloudLittleSnowIcon
+MoonCloudMidRainIcon
+MoonCloudMidSnowIcon
+MoonCloudSlowWindIcon
+MoonCloudSnowIcon
+MoonCloudIcon
+MoonEclipseIcon
+MoonFastWindIcon
+MoonLandingIcon
+MoonSlowWindIcon
+MoonIcon
+MoonsetIcon
+More01Icon
+More02Icon
+More03Icon
+MoreHorizontalCircle01Icon
+MoreHorizontalCircle02Icon
+MoreHorizontalSquare01Icon
+MoreHorizontalSquare02Icon
+MoreHorizontalIcon
+MoreOrLessCircleIcon
+MoreOrLessSquareIcon
+MoreOrLessIcon
+MoreIcon
+MoreVerticalCircle01Icon
+MoreVerticalCircle02Icon
+MoreVerticalSquare01Icon
+MoreVerticalSquare02Icon
+MoreVerticalIcon
+MortarIcon
+Mortarboard01Icon
+Mortarboard02Icon
+Mosque01Icon
+Mosque02Icon
+Mosque03Icon
+Mosque04Icon
+Mosque05Icon
+MosqueLocationIcon
+Motion01Icon
+Motion02Icon
+Motorbike01Icon
+Motorbike02Icon
+MountainIcon
+Mouse01Icon
+Mouse02Icon
+Mouse03Icon
+Mouse04Icon
+Mouse05Icon
+Mouse06Icon
+Mouse07Icon
+Mouse08Icon
+Mouse09Icon
+Mouse10Icon
+Mouse11Icon
+Mouse12Icon
+Mouse13Icon
+Mouse14Icon
+Mouse15Icon
+Mouse16Icon
+Mouse17Icon
+Mouse18Icon
+Mouse19Icon
+Mouse20Icon
+Mouse21Icon
+Mouse22Icon
+Mouse23Icon
+MouseLeftClick01Icon
+MouseLeftClick02Icon
+MouseLeftClick03Icon
+MouseLeftClick04Icon
+MouseLeftClick05Icon
+MouseLeftClick06Icon
+MouseRightClick01Icon
+MouseRightClick02Icon
+MouseRightClick03Icon
+MouseRightClick04Icon
+MouseRightClick05Icon
+MouseRightClick06Icon
+MouseScroll01Icon
+MouseScroll02Icon
+Move01Icon
+Move02Icon
+MoveBottomIcon
+MoveLeftIcon
+MoveRightIcon
+MoveIcon
+MoveToIcon
+MoveTopIcon
+Mp302Icon
+Mp401Icon
+Mp402Icon
+Mp301Icon
+MuhammadIcon
+MultiplicationSignCircleIcon
+MultiplicationSignSquareIcon
+MultiplicationSignIcon
+Mushroom01Icon
+MushroomIcon
+MusicNote01Icon
+MusicNote02Icon
+MusicNote03Icon
+MusicNote04Icon
+MusicNoteSquare01Icon
+MusicNoteSquare02Icon
+MuslimIcon
+MuteIcon
+MymindIcon
+NThRootCircleIcon
+NThRootSquareIcon
+NThRootIcon
+NanoTechnologyIcon
+Napkins01Icon
+Napkins02Icon
+NaturalFoodIcon
+Navigation01Icon
+Navigation02Icon
+Navigation03Icon
+Navigation04Icon
+Navigation05Icon
+Navigation06Icon
+Navigator01Icon
+Navigator02Icon
+NecklaceIcon
+NerdIcon
+NeuralNetworkIcon
+NeutralIcon
+NewJobIcon
+NewOfficeIcon
+NewReleasesIcon
+NewTwitterEllipseIcon
+NewTwitterRectangleIcon
+NewTwitterIcon
+News01Icon
+NewsIcon
+NextIcon
+NikeIcon
+NineCircleIcon
+NineSquareIcon
+NintendoIcon
+NintendoSwitchIcon
+NiqabIcon
+NoInternetIcon
+NoMeetingRoomIcon
+NoSignalIcon
+NodeAddIcon
+NodeEditIcon
+NodeMoveDownIcon
+NodeMoveUpIcon
+NodeRemoveIcon
+NoodlesIcon
+NoseIcon
+NotEqualSignCircleIcon
+NotEqualSignSquareIcon
+NotEqualSignIcon
+Note01Icon
+Note02Icon
+Note03Icon
+Note04Icon
+Note05Icon
+NoteAddIcon
+NoteDoneIcon
+NoteEditIcon
+NoteRemoveIcon
+NoteIcon
+Notebook01Icon
+Notebook02Icon
+NotebookIcon
+Notification01Icon
+Notification02Icon
+Notification03Icon
+NotificationBlock01Icon
+NotificationBlock02Icon
+NotificationBlock03Icon
+NotificationBubbleIcon
+NotificationCircleIcon
+NotificationOff01Icon
+NotificationOff02Icon
+NotificationOff03Icon
+NotificationSnooze01Icon
+NotificationSnooze02Icon
+NotificationSnooze03Icon
+NotificationSquareIcon
+Notion01Icon
+Notion02Icon
+NpmIcon
+NuclearPowerIcon
+NutIcon
+ObtuseIcon
+OctagonIcon
+OctopusIcon
+Office365Icon
+OfficeChairIcon
+OfficeIcon
+OilBarrelIcon
+OkFingerIcon
+OlympicTorchIcon
+OneCircleIcon
+OneSquareIcon
+OnlineLearning01Icon
+OnlineLearning02Icon
+OnlineLearning03Icon
+OnlineLearning04Icon
+OpenCaptionIcon
+OpenSourceIcon
+OptionIcon
+OrangeIcon
+Orbit01Icon
+Orbit02Icon
+OrganicFoodIcon
+OrthogonalEdgeIcon
+OvalIcon
+OvenIcon
+Package01Icon
+Package02Icon
+Package03Icon
+PackageAdd01Icon
+PackageAddIcon
+PackageDelivered01Icon
+PackageDeliveredIcon
+PackageDimensions01Icon
+PackageDimensions02Icon
+PackageMoving01Icon
+PackageMovingIcon
+PackageOpenIcon
+PackageOutOfStockIcon
+PackageProcess01Icon
+PackageProcessIcon
+PackageReceive01Icon
+PackageReceiveIcon
+PackageRemove01Icon
+PackageRemoveIcon
+PackageSearch01Icon
+PackageSearchIcon
+PackageSent01Icon
+PackageSentIcon
+PackageIcon
+PackagingIcon
+Pacman01Icon
+Pacman02Icon
+PaellaIcon
+PaintBoardIcon
+PaintBrush01Icon
+PaintBrush02Icon
+PaintBrush03Icon
+PaintBrush04Icon
+PaintBucketIcon
+Pan01Icon
+Pan02Icon
+Pan03Icon
+Parabola01Icon
+Parabola02Icon
+Parabola03Icon
+ParaglidingIcon
+ParagraphBulletsPoint01Icon
+ParagraphBulletsPoint02Icon
+ParagraphSpacingIcon
+ParagraphIcon
+ParallelogramIcon
+ParkingAreaCircleIcon
+ParkingAreaSquareIcon
+PartyIcon
+Passport01Icon
+PassportExpiredIcon
+PassportIcon
+PassportValidIcon
+PasswordValidationIcon
+PathIcon
+PathfinderCropIcon
+PathfinderDivideIcon
+PathfinderExcludeIcon
+PathfinderIntersectIcon
+PathfinderMergeIcon
+PathfinderMinusBackIcon
+PathfinderMinusFrontIcon
+PathfinderOutlineIcon
+PathfinderTrimIcon
+PathfinderUniteIcon
+PatientIcon
+PatioIcon
+PauseCircleIcon
+PauseIcon
+PavilonIcon
+PayByCheckIcon
+Payment01Icon
+Payment02Icon
+PaymentSuccess01Icon
+PaymentSuccess02Icon
+PayoneerIcon
+PaypalIcon
+Pdf01Icon
+Pdf02Icon
+PeerToPeer01Icon
+PeerToPeer02Icon
+PeerToPeer03Icon
+Pen01Icon
+Pen02Icon
+PenConnectBluetoothIcon
+PenConnectUsbIcon
+PenConnectWifiIcon
+PenTool01Icon
+PenTool02Icon
+PenTool03Icon
+PenToolAddIcon
+PenToolMinusIcon
+PencilEdit01Icon
+PencilEdit02Icon
+PencilIcon
+PendulumIcon
+PensiveIcon
+Pentagon01Icon
+PentagonIcon
+PercentCircleIcon
+PercentSquareIcon
+PercentIcon
+PerfumeIcon
+PeriscopeIcon
+PermanentJobIcon
+PerplexityAiIcon
+PerspectiveIcon
+PetrolPumpIcon
+PexelsIcon
+PhoneArrowDownIcon
+PhoneArrowUpIcon
+PhoneCheckIcon
+PhoneDeveloperModeIcon
+PhoneEraseIcon
+PhoneLockIcon
+PhoneOff01Icon
+PhoneOff02Icon
+PhpIcon
+PhysicsIcon
+PiCircleIcon
+PiSquareIcon
+PiIcon
+PicasaIcon
+Pickup01Icon
+Pickup02Icon
+PictureInPictureExitIcon
+PictureInPictureOnIcon
+PieChart01Icon
+PieChart02Icon
+PieChart03Icon
+PieChart04Icon
+PieChart05Icon
+PieChart06Icon
+PieChart07Icon
+PieChart08Icon
+PieChart09Icon
+PieChartSquareIcon
+PieChartIcon
+PieIcon
+PiggyBankIcon
+Pin02Icon
+PinCodeIcon
+PinLocation01Icon
+PinLocation02Icon
+PinLocation03Icon
+PinOffIcon
+PinIcon
+PineTreeIcon
+PinterestIcon
+PipelineIcon
+PisaTowerIcon
+PivotIcon
+Pizza01Icon
+Pizza02Icon
+Pizza03Icon
+Pizza04Icon
+PizzaCutterIcon
+PlaneIcon
+Plant01Icon
+Plant02Icon
+Plant03Icon
+Plant04Icon
+PlateIcon
+PlaxoIcon
+PlayCircle02Icon
+PlayCircleIcon
+PlayListAddIcon
+PlayListFavourite01Icon
+PlayListFavourite02Icon
+PlayListMinusIcon
+PlayListRemoveIcon
+PlayListIcon
+PlaySquareIcon
+PlayStoreIcon
+PlayIcon
+Playlist01Icon
+Playlist02Icon
+Playlist03Icon
+PlazaIcon
+Plug01Icon
+Plug02Icon
+PlugSocketIcon
+PlusMinus01Icon
+PlusMinus02Icon
+PlusMinusCircle01Icon
+PlusMinusCircle02Icon
+PlusMinusSquare01Icon
+PlusMinusSquare02Icon
+PlusMinusIcon
+PlusSignCircleIcon
+PlusSignSquareIcon
+PlusSignIcon
+Png01Icon
+Png02Icon
+PodcastIcon
+PodiumIcon
+PointingLeft01Icon
+PointingLeft02Icon
+PointingLeft03Icon
+PointingLeft04Icon
+PointingLeft05Icon
+PointingLeft06Icon
+PointingLeft07Icon
+PointingLeft08Icon
+PointingRight01Icon
+PointingRight02Icon
+PointingRight03Icon
+PointingRight04Icon
+PointingRight05Icon
+PointingRight06Icon
+PointingRight07Icon
+PointingRight08Icon
+PokeballIcon
+PokemonIcon
+PoliceBadgeIcon
+PoliceCapIcon
+PoliceCarIcon
+PoliceStationIcon
+PolicyIcon
+PolyTankIcon
+PolygonIcon
+PoolIcon
+PoolTableIcon
+PoopIcon
+PopcornIcon
+Pot01Icon
+Pot02Icon
+PotionIcon
+PoundCircleIcon
+PoundReceiveIcon
+PoundSendIcon
+PoundSquareIcon
+PoundIcon
+PowerServiceIcon
+PowerSocket01Icon
+PowerSocket02Icon
+Ppt01Icon
+Ppt02Icon
+PrawnIcon
+PrayerRug01Icon
+PrayerRug02Icon
+PreferenceHorizontalIcon
+PreferenceVerticalIcon
+PrescriptionIcon
+Presentation01Icon
+Presentation02Icon
+Presentation03Icon
+Presentation04Icon
+Presentation05Icon
+Presentation06Icon
+Presentation07Icon
+PresentationBarChart01Icon
+PresentationBarChart02Icon
+PresentationLineChart01Icon
+PresentationLineChart02Icon
+PresentationOnlineIcon
+PresentationPodiumIcon
+PreviousIcon
+PrinterThreeDIcon
+PrinterOffIcon
+PrinterIcon
+Prism01Icon
+PrismIcon
+PrisonGuardIcon
+PrisonIcon
+PrisonerIcon
+ProductLoadingIcon
+Profile02Icon
+ProfileIcon
+ProfitIcon
+ProgrammingFlagIcon
+Progress01Icon
+Progress02Icon
+Progress03Icon
+Progress04Icon
+ProgressIcon
+Projector01Icon
+ProjectorIcon
+PromotionIcon
+PropertyAddIcon
+PropertyDeleteIcon
+PropertyEditIcon
+PropertyNewIcon
+PropertySearchIcon
+PropertyViewIcon
+ProtectionMaskIcon
+PulleyIcon
+Pulse01Icon
+Pulse02Icon
+PulseRectangle01Icon
+PulseRectangle02Icon
+PumpkinIcon
+PunchIcon
+PunchingBall01Icon
+PunchingBall02Icon
+Purse01Icon
+PurseIcon
+PushUpBarIcon
+PuzzleIcon
+PyramidMaslowoIcon
+PyramidIcon
+PyramidStructure01Icon
+PyramidStructure02Icon
+PythonIcon
+QqPlotIcon
+QrCode01Icon
+QrCodeIcon
+QuestionIcon
+Queue01Icon
+Queue02Icon
+QuillWrite01Icon
+QuillWrite02Icon
+Quiz01Icon
+Quiz02Icon
+Quiz03Icon
+Quiz04Icon
+Quiz05Icon
+QuoraIcon
+QuoteDownCircleIcon
+QuoteDownSquareIcon
+QuoteDownIcon
+QuoteUpCircleIcon
+QuoteUpSquareIcon
+QuoteUpIcon
+QuotesIcon
+Quran01Icon
+Quran02Icon
+Quran03Icon
+QwenIcon
+RacingFlagIcon
+Radar01Icon
+Radar02Icon
+RadialIcon
+Radio01Icon
+Radio02Icon
+RadioButtonIcon
+RadioIcon
+RadioactiveAlertIcon
+RadiusIcon
+RainDoubleDropIcon
+RainDropIcon
+RainIcon
+RainbowIcon
+Ramadhan01Icon
+Ramadhan02Icon
+RamadhanMonthIcon
+RankingIcon
+Rar01Icon
+Rar02Icon
+Raw01Icon
+Raw02Icon
+ReIcon
+ReactIcon
+RealEstate01Icon
+RealEstate02Icon
+ReceiptDollarIcon
+RecordIcon
+RecoveryMailIcon
+Rectangular01Icon
+RectangularIcon
+Recycle01Icon
+Recycle02Icon
+Recycle03Icon
+RedditIcon
+Redo02Icon
+Redo03Icon
+RedoIcon
+ReflexIcon
+RefreshIcon
+RefrigeratorIcon
+RegisterIcon
+RegisteredIcon
+Relieved01Icon
+Relieved02Icon
+ReloadIcon
+ReminderIcon
+RemoteControlIcon
+Remove01Icon
+Remove02Icon
+RemoveCircleHalfDotIcon
+RemoveCircleIcon
+RemoveFemaleIcon
+RemoveMaleIcon
+RemovePiIcon
+RemoveSquareIcon
+RenewableEnergy01Icon
+RenewableEnergyIcon
+RepairIcon
+RepeatOffIcon
+RepeatOne01Icon
+RepeatOne02Icon
+RepeatIcon
+ReplayIcon
+ReplitIcon
+RepositoryIcon
+ResetPasswordIcon
+Resize01Icon
+Resize02Icon
+ResizeFieldRectangleIcon
+ResizeFieldIcon
+ResourcesAddIcon
+ResourcesRemoveIcon
+Restaurant01Icon
+Restaurant02Icon
+Restaurant03Icon
+RestaurantIcon
+RestaurantTableIcon
+RestoreBinIcon
+ReturnRequestIcon
+ReverseWithdrawal01Icon
+ReverseWithdrawal02Icon
+Rhombus01Icon
+RhombusIcon
+RiceBowl01Icon
+RiceBowl02Icon
+RightAngleIcon
+RightToLeftBlockQuoteIcon
+RightToLeftListBulletIcon
+RightToLeftListDashIcon
+RightToLeftListNumberIcon
+RightToLeftListTriangleIcon
+RightTriangleIcon
+RippleIcon
+RiyalRectangleIcon
+RiyalIcon
+Road01Icon
+Road02Icon
+RoadLocation01Icon
+RoadLocation02Icon
+RoadIcon
+RoadWaysideIcon
+Robot01Icon
+Robot02Icon
+RoboticIcon
+Rocket01Icon
+Rocket02Icon
+RocketIcon
+RockingChairIcon
+RockingHorseIcon
+RollerSkateIcon
+RollingPinIcon
+Root01Icon
+Root02Icon
+RootFirstBracketIcon
+RootSecondBracketIcon
+RootThirdBracketIcon
+RootCircleIcon
+Rotate01Icon
+Rotate02Icon
+Rotate360Icon
+RotateBottomLeftIcon
+RotateBottomRightIcon
+RotateClockwiseIcon
+RotateCropIcon
+RotateLeft01Icon
+RotateLeft02Icon
+RotateLeft03Icon
+RotateLeft04Icon
+RotateLeft05Icon
+RotateLeft06Icon
+RotateRight01Icon
+RotateRight02Icon
+RotateRight03Icon
+RotateRight04Icon
+RotateRight05Icon
+RotateRight06Icon
+RotateSquareIcon
+RotateTopLeftIcon
+RotateTopRightIcon
+Route01Icon
+Route02Icon
+Route03Icon
+RouteBlockIcon
+Router01Icon
+Router02Icon
+RouterIcon
+RowDeleteIcon
+RowInsertIcon
+RssConnected01Icon
+RssConnected02Icon
+RssErrorIcon
+RssLockedIcon
+RssIcon
+RssUnlockedIcon
+RubElHizbIcon
+RubberDuckIcon
+RubiksCubeIcon
+RukuIcon
+RulerIcon
+RunningShoesIcon
+Sad01Icon
+Sad02Icon
+SadDizzyIcon
+SafariIcon
+SafeDelivery01Icon
+SafeDelivery02Icon
+SafeIcon
+SafetyPin01Icon
+SafetyPin02Icon
+SailboatCoastalIcon
+SailboatOffshoreIcon
+SakuraIcon
+SalahIcon
+SalahTimeIcon
+SaleTag01Icon
+SaleTag02Icon
+SandalsIcon
+Satellite01Icon
+Satellite02Icon
+Satellite03Icon
+SatelliteIcon
+Saturn01Icon
+Saturn02Icon
+SaturnIcon
+SausageIcon
+SaveEnergy01Icon
+SaveEnergy02Icon
+SaveMoneyDollarIcon
+SaveMoneyEuroIcon
+SaveMoneyPoundIcon
+SaveMoneyYenIcon
+SavingsIcon
+SchemeIcon
+School01Icon
+SchoolBell01Icon
+SchoolBell02Icon
+SchoolBusIcon
+SchoolReportCardIcon
+SchoolIcon
+SchoolTieIcon
+Scissor01Icon
+ScissorRectangleIcon
+ScissorIcon
+Scooter01Icon
+Scooter02Icon
+Scooter03Icon
+Scooter04Icon
+ScooterElectricIcon
+ScratchCardIcon
+ScreenAddToHome02Icon
+ScreenAddToHomeIcon
+ScreenLockRotationIcon
+ScreenRotationIcon
+ScribdIcon
+ScrollHorizontalIcon
+ScrollIcon
+ScrollVerticalIcon
+SdCardIcon
+SealIcon
+Search01Icon
+Search02Icon
+SearchAddIcon
+SearchAreaIcon
+SearchCircleIcon
+SearchDollarIcon
+SearchFocusIcon
+SearchList01Icon
+SearchList02Icon
+SearchMinusIcon
+SearchRemoveIcon
+SearchReplaceIcon
+SearchSquareIcon
+SearchVisualIcon
+SearchingIcon
+SeatSelectorIcon
+SecuredNetworkIcon
+SecurityBlockIcon
+SecurityCheckIcon
+SecurityKeyUsbIcon
+SecurityLockIcon
+SecurityPasswordIcon
+SecurityIcon
+SecurityValidationIcon
+SecurityWifiIcon
+SeesawIcon
+SegmentIcon
+Select01Icon
+Select02Icon
+SelfTransferIcon
+SemiTruckIcon
+SendToMobile02Icon
+SendToMobileIcon
+SendingOrderIcon
+SenselessIcon
+Sent02Icon
+SentIcon
+SeoIcon
+ServerStack01Icon
+ServerStack02Icon
+ServerStack03Icon
+ServiceIcon
+ServingFoodIcon
+Setting06Icon
+Setting07Icon
+SettingDone01Icon
+SettingDone02Icon
+SettingDone03Icon
+SettingDone04Icon
+SettingError03Icon
+SettingError04Icon
+Settings01Icon
+Settings02Icon
+Settings03Icon
+Settings04Icon
+Settings05Icon
+SettingsError01Icon
+SettingsError02Icon
+Setup01Icon
+Setup02Icon
+SevenCircleIcon
+SevenSquareIcon
+Shaka01Icon
+Shaka02Icon
+Shaka03Icon
+Shaka04Icon
+ShampooIcon
+ShapeCollectionIcon
+ShapesIcon
+Share01Icon
+Share02Icon
+Share03Icon
+Share04Icon
+Share05Icon
+Share06Icon
+Share07Icon
+Share08Icon
+ShareKnowledgeIcon
+ShareLocation01Icon
+ShareLocation02Icon
+SharedDriveIcon
+SharedWifiIcon
+SharingIcon
+ShellfishIcon
+Sheriff01Icon
+Sheriff02Icon
+Shield01Icon
+Shield02Icon
+ShieldBlockchainIcon
+ShieldEnergyIcon
+ShieldKeyIcon
+ShieldUserIcon
+ShipmentTrackingIcon
+ShippingCenterIcon
+ShippingLoadingIcon
+ShippingTruck01Icon
+ShippingTruck02Icon
+Shirt01Icon
+ShockedIcon
+ShopSignIcon
+ShopifyIcon
+ShoppingBag01Icon
+ShoppingBag02Icon
+ShoppingBag03Icon
+ShoppingBagAddIcon
+ShoppingBagCheckIcon
+ShoppingBagFavoriteIcon
+ShoppingBagRemoveIcon
+ShoppingBasket01Icon
+ShoppingBasket02Icon
+ShoppingBasket03Icon
+ShoppingBasketAdd01Icon
+ShoppingBasketAdd02Icon
+ShoppingBasketAdd03Icon
+ShoppingBasketCheckIn01Icon
+ShoppingBasketCheckIn02Icon
+ShoppingBasketCheckIn03Icon
+ShoppingBasketCheckOut01Icon
+ShoppingBasketCheckOut02Icon
+ShoppingBasketCheckOut03Icon
+ShoppingBasketDone01Icon
+ShoppingBasketDone02Icon
+ShoppingBasketDone03Icon
+ShoppingBasketFavorite01Icon
+ShoppingBasketFavorite02Icon
+ShoppingBasketFavorite03Icon
+ShoppingBasketRemove01Icon
+ShoppingBasketRemove02Icon
+ShoppingBasketRemove03Icon
+ShoppingBasketSecure01Icon
+ShoppingBasketSecure02Icon
+ShoppingBasketSecure03Icon
+ShoppingCart01Icon
+ShoppingCart02Icon
+ShoppingCartAdd01Icon
+ShoppingCartAdd02Icon
+ShoppingCartCheck01Icon
+ShoppingCartCheck02Icon
+ShoppingCartCheckIn01Icon
+ShoppingCartCheckIn02Icon
+ShoppingCartCheckOut01Icon
+ShoppingCartCheckOut02Icon
+ShoppingCartFavorite01Icon
+ShoppingCartFavorite02Icon
+ShoppingCartRemove01Icon
+ShoppingCartRemove02Icon
+ShortsPantsIcon
+ShoulderIcon
+ShuffleSquareIcon
+ShuffleIcon
+ShutDownIcon
+ShutterstockIcon
+SidebarBottomIcon
+SidebarLeft01Icon
+SidebarLeftIcon
+SidebarRight01Icon
+SidebarRightIcon
+SidebarTopIcon
+SignLanguageCIcon
+SignalFull01Icon
+SignalFull02Icon
+SignalLow01Icon
+SignalLow02Icon
+SignalLowMediumIcon
+SignalMedium01Icon
+SignalMedium02Icon
+SignalNo01Icon
+SignalNo02Icon
+SignalIcon
+SignatureIcon
+SilenceIcon
+Simcard01Icon
+Simcard02Icon
+SimcardDualIcon
+SinIcon
+Sine01Icon
+Sine02Icon
+SingLeftIcon
+SingRightIcon
+Sink01Icon
+Sink02Icon
+SiriNewIcon
+SiriIcon
+SixCircleIcon
+SixSquareIcon
+SketchIcon
+SkewIcon
+SkiIcon
+SkippingRopeIcon
+SkoolIcon
+SkullIcon
+SkypeIcon
+SlackIcon
+SleepingIcon
+SleevelessIcon
+SlideIcon
+SlidersHorizontalIcon
+SlidersVerticalIcon
+SlideshareIcon
+SlowWindsIcon
+SmartAcIcon
+SmartPhone01Icon
+SmartPhone02Icon
+SmartPhone03Icon
+SmartPhone04Icon
+SmartPhoneLandscape02Icon
+SmartPhoneLandscapeIcon
+SmartIcon
+SmartWatch01Icon
+SmartWatch02Icon
+SmartWatch03Icon
+SmartWatch04Icon
+SmartphoneLostWifiIcon
+SmartphoneWifiIcon
+SmileDizzyIcon
+SmileIcon
+SmsCodeIcon
+SnailIcon
+SnapchatIcon
+SnowIcon
+SocksIcon
+SodaCanIcon
+Sofa01Icon
+Sofa02Icon
+Sofa03Icon
+SofaSingleIcon
+SoftDrink01Icon
+SoftDrink02Icon
+SoftwareLicenseIcon
+SoftwareIcon
+SoftwareUninstallIcon
+SoilMoistureFieldIcon
+SoilMoistureGlobalIcon
+SoilTemperatureFieldIcon
+SoilTemperatureGlobalIcon
+SolarEnergyIcon
+SolarPanel01Icon
+SolarPanel02Icon
+SolarPanel03Icon
+SolarPanel04Icon
+SolarPanel05Icon
+SolarPowerIcon
+SolarSystem01Icon
+SolarSystemIcon
+SolidLine01Icon
+SolidLine02Icon
+SortByDown01Icon
+SortByDown02Icon
+SortByUp01Icon
+SortByUp02Icon
+Sorting01Icon
+Sorting02Icon
+Sorting03Icon
+Sorting04Icon
+Sorting05Icon
+Sorting19Icon
+Sorting91Icon
+SortingAZ01Icon
+SortingAZ02Icon
+SortingDownIcon
+SortingUpIcon
+SortingZA01Icon
+SoundcloudIcon
+SourceCodeCircleIcon
+SourceCodeSquareIcon
+SourceCodeIcon
+SpaceshipIcon
+SpadesIcon
+SpaghettiIcon
+SpamIcon
+SparklesIcon
+SpartanHelmetIcon
+SpatulaIcon
+Speaker01Icon
+SpeakerIcon
+SpeechToTextIcon
+SpeedTrain01Icon
+SpeedTrain02Icon
+SpermIcon
+SphereIcon
+SpiralsIcon
+SpoonAndForkIcon
+SpoonAndKnifeIcon
+SpoonIcon
+SpotifyIcon
+SqlIcon
+Square01Icon
+SquareArrowDataTransferDiagonalIcon
+SquareArrowDataTransferHorizontalIcon
+SquareArrowDataTransferVerticalIcon
+SquareArrowDiagonal01Icon
+SquareArrowDiagonal02Icon
+SquareArrowDown01Icon
+SquareArrowDown02Icon
+SquareArrowDown03Icon
+SquareArrowDownDoubleIcon
+SquareArrowDownLeftIcon
+SquareArrowDownRightIcon
+SquareArrowExpand01Icon
+SquareArrowExpand02Icon
+SquareArrowHorizontalIcon
+SquareArrowLeft01Icon
+SquareArrowLeft02Icon
+SquareArrowLeft03Icon
+SquareArrowLeftDoubleIcon
+SquareArrowLeftRightIcon
+SquareArrowMoveDownLeftIcon
+SquareArrowMoveDownRightIcon
+SquareArrowMoveLeftDownIcon
+SquareArrowMoveLeftUpIcon
+SquareArrowMoveRightDownIcon
+SquareArrowMoveRightUpIcon
+SquareArrowReload01Icon
+SquareArrowReload02Icon
+SquareArrowRight01Icon
+SquareArrowRight02Icon
+SquareArrowRight03Icon
+SquareArrowRightDoubleIcon
+SquareArrowShrink01Icon
+SquareArrowShrink02Icon
+SquareArrowUp01Icon
+SquareArrowUp02Icon
+SquareArrowUp03Icon
+SquareArrowUpDoubleIcon
+SquareArrowUpDownIcon
+SquareArrowUpLeftIcon
+SquareArrowUpRight02Icon
+SquareArrowUpRightIcon
+SquareArrowVerticalIcon
+SquareCircleIcon
+SquareLock01Icon
+SquareLock02Icon
+SquareLockAdd01Icon
+SquareLockAdd02Icon
+SquareLockCheck01Icon
+SquareLockCheck02Icon
+SquareLockMinus01Icon
+SquareLockMinus02Icon
+SquareLockPasswordIcon
+SquareLockRemove01Icon
+SquareLockRemove02Icon
+SquareRootSquareIcon
+SquareSquareIcon
+SquareIcon
+SquareUnlock01Icon
+SquareUnlock02Icon
+StackStarIcon
+Stairs01Icon
+Stairs02Icon
+Stairs03Icon
+Stairs04Icon
+StakeIcon
+Stamp01Icon
+Stamp02Icon
+StampIcon
+StarAward01Icon
+StarAward02Icon
+StarCircleIcon
+StarFaceIcon
+StarHalfIcon
+StarOffIcon
+StarSquareIcon
+StarIcon
+StarsIcon
+StartUp01Icon
+StartUp02Icon
+StationeryIcon
+StatusIcon
+SteakIcon
+SteeringIcon
+StepIntoIcon
+StepOutIcon
+StepOverIcon
+Stethoscope02Icon
+StethoscopeIcon
+StickyNote01Icon
+StickyNote02Icon
+StickyNote03Icon
+StopCircleIcon
+StopLossOrderIcon
+StopIcon
+StopWatchIcon
+Store01Icon
+Store02Icon
+Store03Icon
+Store04Icon
+StoreAdd01Icon
+StoreAdd02Icon
+StoreLocation01Icon
+StoreLocation02Icon
+StoreManagement01Icon
+StoreManagement02Icon
+StoreRemove01Icon
+StoreRemove02Icon
+StoreVerified01Icon
+StoreVerified02Icon
+StraightEdgeIcon
+StrategyIcon
+StreeringWheelIcon
+StreetFoodIcon
+StripeIcon
+StrokeBottomIcon
+StrokeCenterIcon
+StrokeInsideIcon
+StrokeLeftIcon
+StrokeOutsideIcon
+StrokeRightIcon
+StrokeTopIcon
+Structure01Icon
+Structure02Icon
+Structure03Icon
+Structure04Icon
+Structure05Icon
+StructureAddIcon
+StructureCheckIcon
+StructureFailIcon
+StructureFolderCircleIcon
+StructureFolderIcon
+StudentCardIcon
+StudentIcon
+StudentsIcon
+StudyDeskIcon
+StudyLampIcon
+StumbleuponIcon
+SubmarineIcon
+SubmergeIcon
+SubnodeAddIcon
+SubnodeDeleteIcon
+SubpoenaIcon
+SubtitleIcon
+Suit01Icon
+Suit02Icon
+SujoodIcon
+Summation01Icon
+Summation02Icon
+SummationCircleIcon
+SummationSquareIcon
+Sun01Icon
+Sun02Icon
+Sun03Icon
+SunCloud01Icon
+SunCloud02Icon
+SunCloudAngledRain01Icon
+SunCloudAngledRain02Icon
+SunCloudAngledRainZap01Icon
+SunCloudAngledRainZap02Icon
+SunCloudAngledZap01Icon
+SunCloudAngledZap02Icon
+SunCloudBigRain01Icon
+SunCloudBigRain02Icon
+SunCloudFastWind01Icon
+SunCloudFastWind02Icon
+SunCloudHailstone01Icon
+SunCloudHailstone02Icon
+SunCloudLittleRain01Icon
+SunCloudLittleRain02Icon
+SunCloudLittleSnow01Icon
+SunCloudLittleSnow02Icon
+SunCloudMidRain01Icon
+SunCloudMidRain02Icon
+SunCloudMidSnow01Icon
+SunCloudMidSnow02Icon
+SunCloudSlowWind01Icon
+SunCloudSlowWind02Icon
+SunCloudSnow01Icon
+SunCloudSnow02Icon
+SunglassesIcon
+SunriseIcon
+SunsetIcon
+SuperMarioIcon
+SuperMarioToadIcon
+SurfboardIcon
+SurpriseIcon
+Sushi01Icon
+Sushi02Icon
+Sushi03Icon
+SuspiciousIcon
+SustainableEnergyIcon
+Svg01Icon
+Svg02Icon
+SwarmIcon
+SwatchIcon
+SwimmingCapIcon
+SwimmingIcon
+SwipeDown01Icon
+SwipeDown02Icon
+SwipeDown03Icon
+SwipeDown04Icon
+SwipeDown05Icon
+SwipeDown06Icon
+SwipeDown07Icon
+SwipeDown08Icon
+SwipeLeft01Icon
+SwipeLeft02Icon
+SwipeLeft03Icon
+SwipeLeft04Icon
+SwipeLeft05Icon
+SwipeLeft06Icon
+SwipeLeft07Icon
+SwipeLeft08Icon
+SwipeLeft09Icon
+SwipeRight01Icon
+SwipeRight02Icon
+SwipeRight03Icon
+SwipeRight04Icon
+SwipeRight05Icon
+SwipeRight06Icon
+SwipeRight07Icon
+SwipeRight08Icon
+SwipeRight09Icon
+SwipeUp01Icon
+SwipeUp02Icon
+SwipeUp03Icon
+SwipeUp04Icon
+SwipeUp05Icon
+SwipeUp06Icon
+SwipeUp07Icon
+SwipeUp08Icon
+Sword01Icon
+Sword02Icon
+Sword03Icon
+SystemUpdate01Icon
+SystemUpdate02Icon
+TShirtIcon
+Table01Icon
+Table02Icon
+Table03Icon
+TableLamp01Icon
+TableLamp02Icon
+TableRoundIcon
+TableIcon
+TableTennisBatIcon
+Tablet01Icon
+Tablet02Icon
+TabletConnectedBluetoothIcon
+TabletConnectedUsbIcon
+TabletConnectedWifiIcon
+TabletPenIcon
+Taco01Icon
+Taco02Icon
+Tag01Icon
+Tag02Icon
+TagsIcon
+TailwindcssIcon
+TajMahalIcon
+TanIcon
+TankTopIcon
+TankerTruckIcon
+Tap01Icon
+Tap02Icon
+Tap03Icon
+Tap04Icon
+Tap05Icon
+Tap06Icon
+Tap07Icon
+Tap08Icon
+TapeMeasureIcon
+Target01Icon
+Target02Icon
+Target03Icon
+TargetDollarIcon
+TasbihIcon
+Task01Icon
+Task02Icon
+TaskAdd01Icon
+TaskAdd02Icon
+TaskDaily01Icon
+TaskDaily02Icon
+TaskDone01Icon
+TaskDone02Icon
+TaskEdit01Icon
+TaskEdit02Icon
+TaskRemove01Icon
+TaskRemove02Icon
+TaxesIcon
+Taxi02Icon
+TaxiIcon
+TeaPodIcon
+TeaIcon
+TeacherIcon
+TeachingIcon
+TeamviewerIcon
+TelegramIcon
+TelephoneIcon
+Telescope01Icon
+Telescope02Icon
+TelevisionTableIcon
+TemperatureIcon
+TennisBallIcon
+TennisRacketIcon
+TerraceIcon
+TestTube01Icon
+TestTube02Icon
+TestTube03Icon
+TestTubeIcon
+TetrisIcon
+TextAlignCenterIcon
+TextAlignJustifyCenterIcon
+TextAlignJustifyLeftIcon
+TextAlignJustifyRightIcon
+TextAlignLeft01Icon
+TextAlignLeftIcon
+TextAlignRight01Icon
+TextAlignRightIcon
+TextAllCapsIcon
+TextBoldIcon
+TextCenterlineCenterTopIcon
+TextCenterlineLeftIcon
+TextCenterlineMiddleIcon
+TextCenterlineRightIcon
+TextCheckIcon
+TextCircleIcon
+TextClearIcon
+TextColorIcon
+TextCreationIcon
+TextFirstlineLeftIcon
+TextFirstlineRightIcon
+TextFontIcon
+TextFootnoteIcon
+TextIndent01Icon
+TextIndentLessIcon
+TextIndentMoreIcon
+TextIndentIcon
+TextItalicSlashIcon
+TextItalicIcon
+TextKerningIcon
+TextNumberSignIcon
+TextSelectionIcon
+TextSmallcapsIcon
+TextSquareIcon
+TextStrikethroughIcon
+TextIcon
+TextSubscriptIcon
+TextSuperscriptIcon
+TextTrackingIcon
+TextUnderlineIcon
+TextVariableFrontIcon
+TextVerticalAlignmentIcon
+TextWrapIcon
+TheProphetsMosqueIcon
+ThermometerColdIcon
+ThermometerIcon
+ThermometerWarmIcon
+ThreadIcon
+ThreadsEllipseIcon
+ThreadsRectangleIcon
+ThreadsIcon
+ThreeCircleIcon
+ThreeFinger01Icon
+ThreeFinger02Icon
+ThreeFinger03Icon
+ThreeFinger04Icon
+ThreeFinger05Icon
+ThreeSquareIcon
+ThumbsDownEllipseIcon
+ThumbsDownRectangleIcon
+ThumbsDownIcon
+ThumbsUpDownIcon
+ThumbsUpEllipseIcon
+ThumbsUpRectangleIcon
+ThumbsUpIcon
+TicTacToeIcon
+Tick01Icon
+Tick02Icon
+Tick03Icon
+Tick04Icon
+TickDouble01Icon
+TickDouble02Icon
+TickDouble03Icon
+TickDouble04Icon
+Ticket01Icon
+Ticket02Icon
+Ticket03Icon
+TicketStarIcon
+TieIcon
+Tiff01Icon
+Tiff02Icon
+TiktokIcon
+TiltifyIcon
+Time01Icon
+Time02Icon
+Time03Icon
+Time04Icon
+TimeHalfPassIcon
+TimeManagementCircleIcon
+TimeManagementIcon
+TimeQuarter02Icon
+TimeQuarterPassIcon
+TimeQuarterIcon
+TimeScheduleIcon
+TimeSetting01Icon
+TimeSetting02Icon
+TimeSetting03Icon
+Timer01Icon
+Timer02Icon
+TipsIcon
+TireIcon
+Tired01Icon
+Tired02Icon
+TissuePaperIcon
+ToggleOffIcon
+ToggleOnIcon
+Toilet01Icon
+Toilet02Icon
+TokenCircleIcon
+TokenSquareIcon
+Tongue01Icon
+TongueIcon
+TongueWinkLeftIcon
+TongueWinkRightIcon
+ToolsIcon
+Tornado01Icon
+Tornado02Icon
+TorriGateIcon
+Touch01Icon
+Touch02Icon
+Touch03Icon
+Touch04Icon
+Touch05Icon
+Touch06Icon
+Touch07Icon
+Touch08Icon
+Touch09Icon
+Touch10Icon
+TouchInteraction01Icon
+TouchInteraction02Icon
+TouchInteraction03Icon
+TouchInteraction04Icon
+TouchLocked01Icon
+TouchLocked02Icon
+TouchLocked03Icon
+TouchLocked04Icon
+Touchpad01Icon
+Touchpad02Icon
+Touchpad03Icon
+Touchpad04Icon
+TowTruckIcon
+TowelsIcon
+ToyTrainIcon
+TractorIcon
+TradeDownIcon
+TradeMarkIcon
+TradeUpIcon
+TrafficIncidentIcon
+TrafficJam01Icon
+TrafficJam02Icon
+TrafficLightIcon
+Train01Icon
+Train02Icon
+TramIcon
+TrampolineIcon
+TransactionHistoryIcon
+TransactionIcon
+TransitionBottomIcon
+TransitionLeftIcon
+TransitionRightIcon
+TransitionTopIcon
+TranslateIcon
+TranslationIcon
+TransmissionIcon
+TransparencyIcon
+TrapezoidLineHorizontalIcon
+TrapezoidLineVerticalIcon
+TravelBagIcon
+Treadmill01Icon
+Treadmill02Icon
+TreatmentIcon
+Tree01Icon
+Tree02Icon
+Tree03Icon
+Tree04Icon
+Tree05Icon
+Tree06Icon
+Tree07Icon
+TrelloIcon
+Triangle01Icon
+Triangle02Icon
+Triangle03Icon
+TriangleIcon
+Trolley01Icon
+Trolley02Icon
+TropicalStormIcon
+TropicalStormTracks01Icon
+TropicalStormTracks02Icon
+TruckDeliveryIcon
+TruckMonsterIcon
+TruckReturnIcon
+TruckIcon
+TrulliIcon
+TsunamiIcon
+TulipIcon
+TumblrIcon
+TurtleNeckIcon
+Tv01Icon
+Tv02Icon
+TvFixIcon
+TvIssueIcon
+TvSmartIcon
+TwinTowerIcon
+TwitchIcon
+TwitterSquareIcon
+TwitterIcon
+TwoCircleIcon
+TwoFactorAccessIcon
+TwoFinger01Icon
+TwoFinger02Icon
+TwoFinger03Icon
+TwoFinger04Icon
+TwoFinger05Icon
+TwoSquareIcon
+Txt01Icon
+Txt02Icon
+TypeCursorIcon
+Typescript01Icon
+Typescript02Icon
+Typescript03Icon
+UberIcon
+Ufo01Icon
+UfoIcon
+UmbrellaDollarIcon
+UmbrellaIcon
+UnamusedIcon
+Unarchive03Icon
+UnavailableIcon
+Underpants01Icon
+Underpants02Icon
+Underpants03Icon
+Undo02Icon
+Undo03Icon
+UndoIcon
+UnfoldLessIcon
+UnfoldMoreIcon
+UngroupItemsIcon
+UngroupLayersIcon
+UnhappyIcon
+UniversalAccessCircleIcon
+UniversalAccessIcon
+UniversityIcon
+Unlink01Icon
+Unlink02Icon
+Unlink03Icon
+Unlink04Icon
+Unlink05Icon
+Unlink06Icon
+UnsplashIcon
+Upload01Icon
+Upload02Icon
+Upload03Icon
+Upload04Icon
+Upload05Icon
+UploadCircle01Icon
+UploadCircle02Icon
+UploadSquare01Icon
+UploadSquare02Icon
+UpworkIcon
+UsbBugsIcon
+UsbConnected01Icon
+UsbConnected02Icon
+UsbConnected03Icon
+UsbErrorIcon
+UsbMemory01Icon
+UsbMemory02Icon
+UsbNotConnected01Icon
+UsbNotConnected02Icon
+UsbIcon
+UsdtIcon
+User02Icon
+User03Icon
+UserAccountIcon
+UserAdd01Icon
+UserAdd02Icon
+UserAiIcon
+UserArrowLeftRightIcon
+UserBlock01Icon
+UserBlock02Icon
+UserCheck01Icon
+UserCheck02Icon
+UserCircle02Icon
+UserCircleIcon
+UserEdit01Icon
+UserFullViewIcon
+UserGroup02Icon
+UserGroup03Icon
+UserGroupIcon
+UserIdVerificationIcon
+UserListIcon
+UserLock01Icon
+UserLock02Icon
+UserLove01Icon
+UserLove02Icon
+UserMinus01Icon
+UserMinus02Icon
+UserMultiple02Icon
+UserMultiple03Icon
+UserMultipleIcon
+UserQuestion01Icon
+UserQuestion02Icon
+UserRemove01Icon
+UserRemove02Icon
+UserRoadsideIcon
+UserSearch01Icon
+UserSearch02Icon
+UserSettings01Icon
+UserSettings02Icon
+UserSharingIcon
+UserShield01Icon
+UserShield02Icon
+UserSquareIcon
+UserStar01Icon
+UserStar02Icon
+UserStatusIcon
+UserStoryIcon
+UserIcon
+UserSwitchIcon
+UserTime01Icon
+UserTime02Icon
+UserTime03Icon
+UserUnlock01Icon
+UserUnlock02Icon
+UserWarning01Icon
+UserWarning02Icon
+UserWarning03Icon
+Uv01Icon
+Uv02Icon
+Uv03Icon
+VaccineIcon
+VacuumCleanerIcon
+ValidationApprovalIcon
+ValidationIcon
+VanIcon
+VariableIcon
+VegetarianFoodIcon
+VersusIcon
+VerticalResizeIcon
+VerticalScrollPointIcon
+VestIcon
+ViberIcon
+VictoryFinger01Icon
+VictoryFinger02Icon
+VictoryFinger03Icon
+Video01Icon
+Video02Icon
+VideoAiIcon
+VideoCameraAiIcon
+VideoConsoleIcon
+VideoOffIcon
+VideoReplayIcon
+ViewOffSlashIcon
+ViewOffIcon
+ViewIcon
+VimeoIcon
+VineSquareIcon
+VineIcon
+VintageClockIcon
+VirtualRealityVr01Icon
+VirtualRealityVr02Icon
+VisionIcon
+VisualStudioCodeIcon
+VkSquareIcon
+VkIcon
+VoiceIdIcon
+VoiceIcon
+VolleyballIcon
+VolumeHighIcon
+VolumeLowIcon
+VolumeMinusIcon
+VolumeMute01Icon
+VolumeMute02Icon
+VolumeOffIcon
+VolumeUpIcon
+VomitingIcon
+VoucherIcon
+VrGlassesIcon
+VrIcon
+Vynil01Icon
+Vynil02Icon
+Vynil03Icon
+W3SchoolsIcon
+WaiterIcon
+WaitersIcon
+WallLampIcon
+Wallet01Icon
+Wallet02Icon
+Wallet03Icon
+Wallet04Icon
+Wallet05Icon
+WalletAdd01Icon
+WalletAdd02Icon
+WalletDone01Icon
+WalletDone02Icon
+WalletNotFound01Icon
+WalletNotFound02Icon
+WalletRemove01Icon
+WalletRemove02Icon
+WantedIcon
+Wardrobe01Icon
+Wardrobe02Icon
+Wardrobe03Icon
+Wardrobe04Icon
+WarehouseIcon
+WashingtonMonumentIcon
+WasteRestoreIcon
+WasteIcon
+Watch01Icon
+Watch02Icon
+WaterEnergyIcon
+WaterPoloIcon
+WaterPumpIcon
+WaterfallDown01Icon
+WaterfallDown03Icon
+WaterfallUp01Icon
+WaterfallUp02Icon
+WatermelonIcon
+WattpadSquareIcon
+WattpadIcon
+Wav01Icon
+Wav02Icon
+WaveSquareIcon
+WaveIcon
+WaveTriangleIcon
+WavingHand01Icon
+WavingHand02Icon
+WazeIcon
+WebDesign01Icon
+WebDesign02Icon
+WebProgrammingIcon
+WebProtectionIcon
+WebSecurityIcon
+WebValidationIcon
+WebflowEllipseIcon
+WebflowRectangleIcon
+WebflowIcon
+WebhookIcon
+WechatIcon
+WeddingIcon
+WeightScale01Icon
+WeightScaleIcon
+WellnessIcon
+WhatsappBusinessIcon
+WhatsappIcon
+WheelchairIcon
+WhiskIcon
+WhistleIcon
+WhiteboardIcon
+Wifi01Icon
+Wifi02Icon
+WifiCircleIcon
+WifiConnected01Icon
+WifiConnected02Icon
+WifiConnected03Icon
+WifiDisconnected01Icon
+WifiDisconnected02Icon
+WifiDisconnected03Icon
+WifiDisconnected04Icon
+WifiError01Icon
+WifiError02Icon
+WifiFullSignalIcon
+WifiLocationIcon
+WifiLockIcon
+WifiLowSignalIcon
+WifiMediumSignalIcon
+WifiNoSignalIcon
+WifiOff01Icon
+WifiOff02Icon
+WifiSquareIcon
+WifiUnlockIcon
+WikipediaIcon
+WindPower01Icon
+WindPower02Icon
+WindPower03Icon
+WindPowerIcon
+WindSurfIcon
+WindTurbineIcon
+WindowsNewIcon
+WindowsOldIcon
+WinkIcon
+WinkingIcon
+WirelessCloudAccessIcon
+WirelessIcon
+WiseIcon
+WomanIcon
+WordpressIcon
+WorkAlertIcon
+WorkHistoryIcon
+WorkIcon
+WorkUpdateIcon
+WorkflowCircle01Icon
+WorkflowCircle02Icon
+WorkflowCircle03Icon
+WorkflowCircle04Icon
+WorkflowCircle05Icon
+WorkflowCircle06Icon
+WorkflowSquare01Icon
+WorkflowSquare02Icon
+WorkflowSquare03Icon
+WorkflowSquare04Icon
+WorkflowSquare05Icon
+WorkflowSquare06Icon
+WorkflowSquare07Icon
+WorkflowSquare08Icon
+WorkflowSquare09Icon
+WorkflowSquare10Icon
+WorkoutBattleRopesIcon
+WorkoutGymnasticsIcon
+WorkoutKickingIcon
+WorkoutRunIcon
+WorkoutSportIcon
+WorkoutSquatsIcon
+WorkoutStretchingIcon
+WorkoutWarmUpIcon
+WorryIcon
+WpsOfficeRectangleIcon
+WpsOfficeIcon
+Wrench01Icon
+Wrench02Icon
+WuduIcon
+XRayIcon
+XVariableCircleIcon
+XVariableSquareIcon
+XVariableIcon
+XingIcon
+Xls01Icon
+Xls02Icon
+Xml01Icon
+Xml02Icon
+Xsl01Icon
+Xsl02Icon
+YelpIcon
+YenCircleIcon
+YenReceiveIcon
+YenSendIcon
+YenSquareIcon
+YenIcon
+Yoga01Icon
+Yoga02Icon
+Yoga03Icon
+YogaBallIcon
+YogaMatIcon
+YogurtIcon
+YoutubeIcon
+YurtIcon
+ZakatIcon
+ZapIcon
+ZeppelinIcon
+ZeroCircleIcon
+ZeroSquareIcon
+Zip01Icon
+Zip02Icon
+ZoomCircleIcon
+ZoomInAreaIcon
+ZoomOutAreaIcon
+ZoomSquareIcon
+ZoomIcon
+ZshIcon
+ZzzIcon
+
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "hybrid-editor",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@lexical/react": "^0.13.1",
+    "hugeicons-react": "latest",
+    "idb": "^8.0.0",
+    "lexical": "^0.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-image-crop": "^11.0.5",
+    "uuid": "^9.0.1",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-pwa": "^1.2.0",
+    "workbox-core": "^7.4.0",
+    "workbox-routing": "^7.4.0",
+    "workbox-strategies": "^7.4.0",
+    "workbox-window": "^7.4.0"
+  }
+}

src/App.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+import { getSettings, SettingsType, DEFAULT_SETTINGS, getBackgroundImage } from './lib/db';
+import { useFileStore } from './stores/fileStore';
+import TreeView from './components/Sidebar/TreeView';
+import EditorCore from './components/Editor/EditorCore';
+import SettingsModal from './components/Settings/SettingsModal';
+import { 
+  Settings01Icon, Download01Icon, BorderAll01Icon
+} from 'hugeicons-react';
+
+function App() {
+  const [settings, setSettings] = useState<SettingsType>(DEFAULT_SETTINGS);
+  const [bgImage, setBgImage] = useState<string | null>(null);
+  const [showSettings, setShowSettings] = useState(false);
+  const [showSidebar, setShowSidebar] = useState(true);
+
+  const { loadFiles } = useFileStore();
+
+  useEffect(() => {
+    // Initial data load
+    loadFiles();
+    
+    // Load config from DB
+    getSettings().then(setSettings);
+    // Load background image
+    getBackgroundImage().then(blob => {
+      if (blob) {
+        if (blob instanceof Blob) {
+          setBgImage(URL.createObjectURL(blob));
+        } else {
+          setBgImage(blob);
+        }
+      }
+    });
+
+    // Entry/Exit Listener
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setShowSettings(false);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <div 
+      className={`app-container font-${settings.typography.replace(/\s+/g, '-').toLowerCase()}`}
+      style={{ '--bg-opacity': settings.bgOpacity, '--fg-opacity': settings.fgOpacity } as any}
+    >
+      {bgImage && (
+        <div 
+          className="app-background" 
+          style={{ backgroundImage: `url(${bgImage})` }} 
+        />
+      )}
+      
+      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} />}
+      
+      <aside className="mini-sidebar">
+        <button 
+          className={`btn-icon ${showSidebar ? 'active' : ''}`} 
+          onClick={() => setShowSidebar(!showSidebar)} 
+          title="Toggle Sidebar" 
+          style={{ padding: 8, background: showSidebar ? 'rgba(0,0,0,0.03)' : 'transparent' }}
+        >
+           <BorderAll01Icon size={20} color={showSidebar ? 'var(--text-primary)' : 'var(--text-secondary)'} />
+        </button>
+        
+        <div style={{ flex: 1 }} />
+        <button className="btn-icon" onClick={() => setShowSettings(true)} title="Settings" style={{ padding: 8 }}>
+          <Settings01Icon size={20} color="var(--text-secondary)" />
+        </button>
+        <button 
+          className="btn-icon" 
+          onClick={async () => {
+             const { exportFullWorkspace } = await import('./lib/db');
+             const data = await exportFullWorkspace();
+             const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+             const url = URL.createObjectURL(blob);
+             const a = document.createElement('a');
+             a.href = url;
+             a.download = `hybrid-workspace-${new Date().toISOString().split('T')[0]}.json`;
+             a.click();
+          }}
+          title="Download Workspace" 
+          style={{ padding: 8 }}
+        >
+          <Download01Icon size={20} color="var(--text-secondary)" />
+        </button>
+      </aside>
+
+      {showSidebar && (
+        <aside className="sidebar-panel">
+          <div className="sidebar-header" style={{ padding: '4px 16px', display: 'flex', alignItems: 'center', height: '48px', borderBottom: '1px solid var(--border-color)' }}>
+            <span style={{ letterSpacing: '0.05em', textTransform: 'uppercase', fontSize: '10px', fontWeight: 700, opacity: 0.4 }}>WORKSPACE</span>
+          </div>
+          <TreeView />
+        </aside>
+      )}
+
+      <main className="editor-main">
+        <EditorCore />
+      </main>
+    </div>
+  );
+}
+
+export default App;

src/components/Editor/EditorCore.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useFileStore } from '../../stores/fileStore';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+
+import LineNumbers from './LineNumberPlugin';
+import HoverToolbar from './HoverToolbar';
+import AutoHighlighterPlugin from '../../plugins/AutoHighlighterPlugin';
+import { CloudSavingDone01Icon, Tick02Icon } from 'hugeicons-react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_EDITOR, $createLineBreakNode, $getSelection, $isRangeSelection } from 'lexical';
+
+// Premium Theme mapping for Lexical
+const theme = {
+  paragraph: 'editor-paragraph',
+  text: {
+    bold: 'editor-text-bold',
+    italic: 'editor-text-italic',
+    strikethrough: 'editor-text-strikethrough',
+    underline: 'editor-text-underline',
+  },
+};
+
+export default function EditorCore() {
+  const { files, activeFileId, updateFileContent } = useFileStore();
+  const [editorKey, setEditorKey] = useState(0);
+  const [isSaving, setIsSaving] = useState(false);
+  const debounceRef = useRef<any>(null);
+
+  const ShiftEnterPlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+      return editor.registerCommand(
+        INSERT_LINE_BREAK_COMMAND,
+        () => {
+          editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              selection.insertNodes([$createLineBreakNode()]);
+            }
+          });
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      );
+    }, [editor]);
+    return null;
+  };
+
+  const activeFile = files.find(f => f.id === activeFileId && f.type === 'file');
+
+  // Ensure editor re-initializes exactly on file change
+  useEffect(() => {
+    setEditorKey(k => k + 1);
+  }, [activeFileId]);
+
+  // Clipboard Transformation (Emdash Prefix)
+  useEffect(() => {
+    const handleCopy = (e: ClipboardEvent) => {
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      
+      let text = selection.toString();
+      if (!text) return;
+
+      // SPEC: Emdash as very beginning of number line with content
+      // Logic: Prefix lines with content with "— " (emdash + space)
+      const lines = text.split('\n');
+      const transformed = lines.map(line => {
+        if (line.trim().length > 0) {
+          return `— ${line}`;
+        }
+        return line;
+      }).join('\n');
+
+      e.clipboardData?.setData('text/plain', transformed);
+      e.preventDefault();
+    };
+
+    document.addEventListener('copy', handleCopy);
+    return () => document.removeEventListener('copy', handleCopy);
+  }, []);
+
+  const handleOnChange = useCallback((editorState: any) => {
+    setIsSaving(true);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    
+    debounceRef.current = setTimeout(() => {
+      editorState.read(() => {
+         const jsonString = JSON.stringify(editorState.toJSON());
+         if (activeFileId) {
+            updateFileContent(activeFileId, jsonString).then(() => {
+               setIsSaving(false);
+            });
+         } else {
+            setIsSaving(false);
+         }
+      });
+    }, 300); // 300ms debounce for near-instant premium persistence
+  }, [activeFileId, updateFileContent]);
+
+  if (!activeFile) {
+    return (
+      <div className="editor-placeholder" style={{ 
+        display: 'flex', flexDirection: 'column', gap: '8px', opacity: 0.4, 
+        fontFamily: 'var(--font-ibm-plex)' 
+      }}>
+        <div style={{ fontSize: '14px', fontWeight: 500 }}>No active document</div>
+        <div style={{ fontSize: '11px' }}>Select a file from the sidebar to begin editing.</div>
+      </div>
+    );
+  }
+
+  const initialConfig = {
+    namespace: 'HybridDocEditor',
+    theme,
+    nodes: [],
+    onError(error: Error) {
+      console.error('Lexical Error:', error);
+    },
+    editorState: activeFile.content ? (
+       activeFile.content.includes('"root":{') ? activeFile.content : undefined
+    ) : undefined,
+  };
+
+  return (
+    <div key={`editor-${editorKey}`} className="editor-shell" style={{ display: 'flex', flexDirection: 'column', height: '100%', flex: 1 }}>
+       <LexicalComposer initialConfig={initialConfig}>
+        <div className="editor-scroller" style={{ flex: 1, overflowY: 'auto', display: 'flex', position: 'relative' }}>
+          <LineNumbers />
+          <div className="editor-input-container" style={{ flex: 1, padding: '24px 32px', position: 'relative' }}>
+              <RichTextPlugin
+                contentEditable={
+                  <ContentEditable 
+                    className="ContentEditable" 
+                    spellCheck={true}
+                    data-gramm="true"
+                    data-gramm_editor="true"
+                    data-enable-grammarly="true"
+                    style={{ 
+                      minHeight: '100%', 
+                      outline: 'none', 
+                      lineHeight: '1.5',
+                      fontSize: '15px'
+                    }} 
+                  />
+                }
+                placeholder={
+                  <div className="editor-placeholder" style={{ 
+                    position: 'absolute', top: 24, left: 32, pointerEvents: 'none', opacity: 0.3, fontSize: '15px' 
+                  }}>
+                    Start your thinking here...
+                  </div>
+                }
+                ErrorBoundary={LexicalErrorBoundary}
+              />
+              <HistoryPlugin />
+              <OnChangePlugin onChange={handleOnChange} ignoreSelectionChange />
+              <ShiftEnterPlugin />
+              <HoverToolbar />
+              <AutoHighlighterPlugin />
+              
+              {/* Save Status Indicator */}
+              <div style={{
+                position: 'fixed',
+                bottom: '24px',
+                right: '24px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                padding: '6px 12px',
+                background: 'var(--bg-panel)',
+                border: '1px solid var(--border-color)',
+                borderRadius: '20px',
+                fontSize: '11px',
+                fontWeight: 600,
+                color: 'var(--text-secondary)',
+                opacity: isSaving ? 1 : 0.4,
+                transition: 'opacity 0.3s ease',
+                pointerEvents: 'none',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
+                zIndex: 10
+              }}>
+                {isSaving ? <CloudSavingDone01Icon size={14} className="spin" /> : <Tick02Icon size={14} />}
+                {isSaving ? 'Syncing...' : 'Saved'}
+              </div>
+          </div>
+        </div>
+       </LexicalComposer>
+    </div>
+  );
+}

src/components/Editor/HoverToolbar.tsx

@@ -0,0 +1,191 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCallback, useEffect, useState } from 'react';
+import { 
+  FORMAT_TEXT_COMMAND, 
+  $getSelection, 
+  $isRangeSelection, 
+  TextFormatType 
+} from 'lexical';
+import { 
+  TextBoldIcon, 
+  TextItalicIcon, 
+  TextStrikethroughIcon, 
+  MagicWand01Icon,
+  PaintBucketIcon
+} from 'hugeicons-react';
+import { $patchStyleText, $getSelectionStyleValueForProperty } from '@lexical/selection';
+
+export default function HoverToolbar() {
+  const [editor] = useLexicalComposerContext();
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [position, setPosition] = useState({ top: -10000, left: -10000, visible: false });
+  const [showColorPicker, setShowColorPicker] = useState(false);
+
+  const colors = [
+    '#000000', '#FF0000', '#00FF00', '#0000FF', 
+    '#FFA500', '#800080', '#008080', '#FF69B4'
+  ];
+
+  const updateToolbar = useCallback(() => {
+    editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      
+      if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+        const nativeSelection = window.getSelection();
+        if (nativeSelection && nativeSelection.rangeCount > 0) {
+          const domRange = nativeSelection.getRangeAt(0);
+          const rect = domRange.getBoundingClientRect();
+          
+          setPosition({
+            top: rect.top - 40,
+            left: rect.left + (rect.width / 2) - 80,
+            visible: true
+          });
+          
+          setIsBold(selection.hasFormat('bold'));
+          setIsItalic(selection.hasFormat('italic'));
+          setIsStrikethrough(selection.hasFormat('strikethrough'));
+        }
+      } else {
+        setPosition(p => ({ ...p, visible: false }));
+      }
+    });
+  }, [editor]);
+
+  useEffect(() => {
+    const unregister = editor.registerUpdateListener(() => {
+      updateToolbar();
+    });
+    document.addEventListener('selectionchange', updateToolbar);
+    return () => {
+      unregister();
+      document.removeEventListener('selectionchange', updateToolbar);
+    };
+  }, [editor, updateToolbar]);
+
+  const applyFormat = (format: TextFormatType) => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+  };
+
+  const applyPixelize = () => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+         const currentFilter = $getSelectionStyleValueForProperty(selection, 'filter');
+         if (currentFilter === 'blur(3px)') {
+            $patchStyleText(selection, { 'filter': '' });
+         } else {
+            $patchStyleText(selection, { 'filter': 'blur(3px)' });
+         }
+      }
+    });
+  };
+
+  const applyColor = (color: string) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+         $patchStyleText(selection, { 'color': color });
+      }
+    });
+    setShowColorPicker(false);
+  };
+
+  if (!position.visible) return null;
+
+  return (
+    <div 
+      style={{
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        backgroundColor: 'var(--bg-panel)',
+        border: '1px solid var(--border-color)',
+        borderRadius: '6px',
+        padding: '4px',
+        display: 'flex',
+        gap: '4px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+        zIndex: 1000,
+        alignItems: 'center'
+      }}
+    >
+      <button 
+        style={{ padding: 4, background: isBold ? '#eee' : 'transparent', borderRadius: 4 }} 
+        onClick={() => applyFormat('bold')}
+      >
+        <TextBoldIcon size={16} />
+      </button>
+      <button 
+        style={{ padding: 4, background: isItalic ? '#eee' : 'transparent', borderRadius: 4 }} 
+        onClick={() => applyFormat('italic')}
+      >
+        <TextItalicIcon size={16} />
+      </button>
+      <button 
+        style={{ padding: 4, background: isStrikethrough ? '#eee' : 'transparent', borderRadius: 4 }} 
+        onClick={() => applyFormat('strikethrough')}
+      >
+        <TextStrikethroughIcon size={16} />
+      </button>
+
+      <div style={{ width: 1, height: 16, backgroundColor: '#ddd', margin: '0 4px' }} />
+      
+      <button 
+        style={{ padding: 4, background: 'transparent', borderRadius: 4, display: 'flex', alignItems: 'center' }} 
+        onClick={applyPixelize}
+        title="Pixelize / Blur"
+      >
+        <MagicWand01Icon size={16} />
+      </button>
+
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+        <button 
+          onClick={() => setShowColorPicker(!showColorPicker)}
+          style={{ padding: 4, background: 'transparent', borderRadius: 4, display: 'flex', alignItems: 'center' }}
+          title="Text Color"
+        >
+          <PaintBucketIcon size={16} />
+        </button>
+        
+        {showColorPicker && (
+          <div style={{
+            position: 'absolute', top: 32, left: 0, zIndex: 100,
+            background: 'var(--bg-panel)', border: '1px solid var(--border-color)',
+            borderRadius: '6px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.1)', minWidth: 160
+          }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4px' }}>
+              {colors.map(c => (
+                <div 
+                  key={c}
+                  onClick={() => applyColor(c)}
+                  style={{ width: 24, height: 24, background: c, borderRadius: '2px', cursor: 'pointer', border: '1px solid rgba(0,0,0,0.05)' }}
+                />
+              ))}
+            </div>
+            
+            <div style={{ height: 1, backgroundColor: 'var(--border-color)', margin: '4px 0' }} />
+            
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <input 
+                type="color" 
+                onChange={(e) => applyColor(e.target.value)}
+                style={{ width: 32, height: 32, border: 'none', background: 'none', padding: 0, cursor: 'pointer' }}
+              />
+              <input 
+                type="text" 
+                placeholder="#000000"
+                style={{ flex: 1, fontSize: '11px', padding: '4px 8px', border: '1px solid var(--border-color)', borderRadius: '4px', outline: 'none' }}
+                onKeyDown={(e: any) => { if (e.key === 'Enter') applyColor(e.target.value); }}
+              />
+            </div>
+            <div style={{ fontSize: '9px', opacity: 0.5, textAlign: 'center' }}>Enter to apply Hex</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/Editor/LineNumberPlugin.tsx

@@ -0,0 +1,201 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect, useState, useRef } from 'react';
+import { $getRoot, $isParagraphNode } from 'lexical';
+import { useFileStore } from '../../stores/fileStore';
+import { Comment01Icon } from 'hugeicons-react';
+
+export default function LineNumbers() {
+  const [editor] = useLexicalComposerContext();
+  const { activeFileId, files, setComment } = useFileStore();
+  const activeFile = files.find(f => f.id === activeFileId);
+  const [lines, setLines] = useState<{ id: string, top: number, height: number, index: number }[]>([]);
+  const [activeCommentLine, setActiveCommentLine] = useState<string | null>(null);
+  const [expandedComments, setExpandedComments] = useState<Set<string>>(new Set());
+  const [commentText, setCommentText] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const updateLineNumbers = () => {
+      editor.getEditorState().read(() => {
+        const root = $getRoot();
+        const children = root.getChildren();
+        const newLines: any[] = [];
+        
+        const containerElement = containerRef.current;
+        if (!containerElement) return;
+        
+        const containerRect = containerElement.getBoundingClientRect();
+        
+        let globalIndex = 1;
+        children.forEach((node) => {
+          if ($isParagraphNode(node)) {
+            const elm = editor.getElementByKey(node.getKey());
+            if (elm) {
+              const rect = elm.getBoundingClientRect();
+              
+              const textContent = node.getTextContent();
+              const explicitLines = textContent.split('\n').length;
+              const computedLineHeight = 22.5; // 15px * 1.5
+
+              for (let i = 0; i < explicitLines; i++) {
+                 const lineId = `${node.getKey()}${i > 0 ? '-' + i : ''}`;
+                 newLines.push({
+                   id: lineId,
+                   rootId: node.getKey(),
+                   top: (rect.top - containerRect.top) + (i * computedLineHeight),
+                   height: computedLineHeight,
+                   index: globalIndex++,
+                 });
+              }
+            }
+          }
+        });
+        setLines(newLines);
+      });
+    };
+
+    const unregister = editor.registerUpdateListener(() => {
+      // Small delay to ensure DOM has reflowed
+      setTimeout(updateLineNumbers, 0);
+    });
+    
+    // Initial and periodic syncs
+    updateLineNumbers();
+    const interval = setInterval(updateLineNumbers, 1000); 
+
+    window.addEventListener('resize', updateLineNumbers);
+
+    return () => {
+      unregister();
+      clearInterval(interval);
+      window.removeEventListener('resize', updateLineNumbers);
+    };
+  }, [editor]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className="line-numbers-container" 
+      style={{ 
+        position: 'relative', 
+        width: 45, 
+        minHeight: '100%', 
+        borderRight: '1px solid rgba(0,0,0,0.05)',
+        marginRight: 0,
+        backgroundColor: 'transparent',
+        userSelect: 'none',
+        pointerEvents: 'none'
+      }}
+    >
+      {lines.map(line => (
+        <div 
+          key={line.id} 
+          className="line-number-item"
+          style={{ 
+            position: 'absolute', 
+            top: line.top, 
+            width: '100%', 
+            textAlign: 'right', 
+            paddingRight: 12,
+            color: 'var(--text-secondary)',
+            fontSize: '15px',
+            opacity: 0.3,
+            fontFamily: 'var(--font-ibm-plex)',
+            lineHeight: '1.5',
+            pointerEvents: 'auto',
+            cursor: 'pointer',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end'
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            setActiveCommentLine(line.id);
+            setCommentText(activeFile?.comments?.[line.id] || '');
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+             {activeFile?.comments?.[line.id] && (
+               <button 
+                 onClick={(e) => {
+                   e.stopPropagation();
+                   setExpandedComments(prev => {
+                     const next = new Set(prev);
+                     if (next.has(line.id)) next.delete(line.id);
+                     else next.add(line.id);
+                     return next;
+                   });
+                 }}
+                 style={{ 
+                   opacity: expandedComments.has(line.id) ? 1 : 0.4, 
+                   color: expandedComments.has(line.id) ? 'var(--accent-color)' : 'inherit',
+                   display: 'flex', alignItems: 'center'
+                 }}
+                 title={expandedComments.has(line.id) ? "Minimize comment" : "Expand comment"}
+               >
+                 <Comment01Icon size={12} />
+               </button>
+             )}
+             {line.index}
+          </div>
+          
+          {/* Top-part comment UI */}
+          {activeCommentLine === line.id && (
+            <div 
+              onClick={e => e.stopPropagation()}
+              style={{
+                position: 'fixed', left: 60, zIndex: 100,
+                background: 'var(--bg-panel)', border: '1px solid var(--border-color)',
+                borderRadius: '6px', padding: '12px', width: 220,
+                boxShadow: '0 10px 25px rgba(0,0,0,0.1)'
+              }}
+            >
+               <textarea 
+                 autoFocus
+                 value={commentText}
+                 onChange={e => setCommentText(e.target.value)}
+                 placeholder="Line comment..."
+                 style={{ width: '100%', height: 60, fontSize: '11px', border: 'none', outline: 'none', background: 'transparent', resize: 'none' }}
+               />
+               <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '8px' }}>
+                  <button onClick={() => setActiveCommentLine(null)} style={{ fontSize: '10px', opacity: 0.5 }}>Cancel</button>
+                  <button 
+                    onClick={() => {
+                        if (activeFileId) setComment(activeFileId, line.id, commentText);
+                        setActiveCommentLine(null);
+                    }}
+                    style={{ fontSize: '10px', fontWeight: 600, color: 'var(--accent-color)' }}
+                  >Save</button>
+               </div>
+            </div>
+          )}
+
+          {activeFile?.comments?.[line.id] && activeCommentLine !== line.id && expandedComments.has(line.id) && (
+             <div 
+                className="comment-bubble"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setExpandedComments(prev => {
+                    const next = new Set(prev);
+                    next.delete(line.id);
+                    return next;
+                  });
+                }}
+                title="Click to minimize"
+                style={{ 
+                  marginTop: 4, 
+                  textAlign: 'left', 
+                  wordBreak: 'break-word', 
+                  userSelect: 'text',
+                  cursor: 'pointer',
+                  animation: 'fadeInSlide 0.2s ease forwards'
+                }}
+             >
+                {activeFile.comments[line.id]}
+             </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/Settings/SettingsModal.tsx

@@ -0,0 +1,320 @@
+import { useState, useEffect, useRef } from 'react';
+import { 
+  getSettings, saveSettings, saveBackgroundImage, 
+  SettingsType, HighlighterRule, exportFullWorkspace, importWorkspace,
+  resetBackgroundImage
+} from '../../lib/db';
+import ReactCrop, { Crop } from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+import { 
+  Settings01Icon, Add01Icon, Delete01Icon, 
+  Download01Icon, Upload01Icon, Copy01Icon
+} from 'hugeicons-react';
+
+function extractTextFromLexical(jsonString?: string) {
+    if (!jsonString) return '';
+    try {
+        const root = JSON.parse(jsonString).root;
+        let text = '';
+        function traverse(node: any) {
+             if (node.type === 'text') text += node.text;
+             if (node.type === 'linebreak') text += '\n';
+             if (node.children) {
+                 node.children.forEach(traverse);
+                 if (node.type === 'paragraph') text += '\n'; // Add newline for paragraphs
+             }
+        }
+        traverse(root);
+        return text.trim();
+    } catch { return ''; }
+}
+
+export default function SettingsModal({ onClose }: { onClose: () => void }) {
+  const [settings, setSettings] = useState<SettingsType | null>(null);
+  const [imgSrc, setImgSrc] = useState('');
+  const [crop, setCrop] = useState<Crop>();
+  const [importText, setImportText] = useState('');
+  const [showImport, setShowImport] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    getSettings().then(setSettings);
+  }, []);
+
+  const handleChangeCryptography = async (font: any) => {
+    if (!settings) return;
+    const newSettings = { ...settings, typography: font };
+    setSettings(newSettings);
+    await saveSettings(newSettings);
+    window.location.reload(); 
+  };
+
+  const handleChangeOpacity = async (field: 'bgOpacity' | 'fgOpacity', val: number) => {
+    if (!settings) return;
+    const newSettings = { ...settings, [field]: val };
+    setSettings(newSettings);
+    await saveSettings(newSettings);
+    document.documentElement.style.setProperty(`--${field === 'bgOpacity' ? 'bg' : 'fg'}-opacity`, val.toString());
+  };
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+       const reader = new FileReader();
+       reader.addEventListener('load', () => setImgSrc(reader.result?.toString() || ''));
+       reader.readAsDataURL(e.target.files[0]);
+    }
+  };
+
+  const completeImageSave = async () => {
+      if (imgSrc && imgRef.current && crop) {
+          const canvas = document.createElement('canvas');
+          const scaleX = imgRef.current.naturalWidth / imgRef.current.width;
+          const scaleY = imgRef.current.naturalHeight / imgRef.current.height;
+          canvas.width = crop.width;
+          canvas.height = crop.height;
+          const ctx = canvas.getContext('2d');
+
+          if (ctx) {
+            ctx.drawImage(
+              imgRef.current,
+              crop.x * scaleX,
+              crop.y * scaleY,
+              crop.width * scaleX,
+              crop.height * scaleY,
+              0,
+              0,
+              crop.width,
+              crop.height
+            );
+            const base64Image = canvas.toDataURL('image/jpeg');
+            await saveBackgroundImage(base64Image);
+            window.location.reload();
+          }
+      } else if (imgSrc) {
+          await saveBackgroundImage(imgSrc);
+          window.location.reload();
+      }
+  };
+
+  const handleResetBackground = async () => {
+     await resetBackgroundImage();
+     window.location.reload();
+  };
+
+  const handleUpdateRule = async (id: string, updates: Partial<HighlighterRule>) => {
+    if (!settings) return;
+    const newRules = settings.highlighters.map(r => r.id === id ? { ...r, ...updates } : r);
+    const newSettings = { ...settings, highlighters: newRules };
+    setSettings(newSettings);
+    await saveSettings(newSettings);
+  };
+
+  const handleAddRule = async () => {
+    if (!settings) return;
+    const newRule: HighlighterRule = {
+      id: Math.random().toString(36).substring(2, 9),
+      openSymbol: '(', closeSymbol: ')', color: '#ffb3ba',
+      baseOpacity: 0.1, stackMode: 'larger-lighter'
+    };
+    const newSettings = { ...settings, highlighters: [...settings.highlighters, newRule] };
+    setSettings(newSettings);
+    await saveSettings(newSettings);
+  };
+
+  const handleDeleteRule = async (id: string) => {
+    if (!settings) return;
+    const newSettings = { ...settings, highlighters: settings.highlighters.filter(r => r.id !== id) };
+    setSettings(newSettings);
+    await saveSettings(newSettings);
+  };
+
+  const handleExport = async () => {
+    const data = await exportFullWorkspace();
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `workspace-backup-${new Date().toISOString().split('T')[0]}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleCopyCleanWorkspace = async () => {
+    const data = await exportFullWorkspace();
+    let textOut = '--- WORKSPACE EXPORT ---\n\n';
+    data.files.forEach(f => {
+       if (f.type === 'file') {
+           textOut += `[FILE: ${f.name}]\n`;
+           textOut += extractTextFromLexical(f.content);
+           textOut += '\n\n';
+       }
+    });
+    await navigator.clipboard.writeText(textOut);
+    alert('Clean textual workspace copied to clipboard!');
+  };
+
+  const handleImport = async () => {
+    try {
+      const data = JSON.parse(importText);
+      if (data.files && data.settings) {
+        await importWorkspace(data);
+        alert('Import successful! Reloading...');
+        window.location.reload();
+      } else {
+        alert('Invalid workspace JSON format.');
+      }
+    } catch (e) {
+      alert('Failed to parse JSON.');
+    }
+  };
+
+  if (!settings) return null;
+
+  return (
+    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }} style={{
+      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+      backgroundColor: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(12px)', zIndex: 1000,
+      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px'
+    }}>
+      <div className="modal-content" style={{
+        background: 'rgba(255, 255, 255, 0.95)',
+        backdropFilter: 'blur(20px)',
+        padding: '36px', 
+        borderRadius: 'var(--radius-sm)', 
+        width: '100%', maxWidth: '640px', 
+        maxHeight: '85vh', overflowY: 'auto',
+        boxShadow: '0 40px 80px rgba(0,0,0,0.15)',
+        border: '1px solid rgba(255,255,255,0.4)',
+        fontFamily: 'var(--font-ibm-plex)'
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '32px', borderBottom: '1px solid rgba(0,0,0,0.05)', paddingBottom: '16px' }}>
+           <h2 style={{ fontSize: '22px', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '12px', letterSpacing: '-0.02em' }}>
+             <Settings01Icon size={28} /> System Settings
+           </h2>
+           <button onClick={onClose} style={{ opacity: 0.4, fontSize: '13px', background: 'rgba(0,0,0,0.05)', padding: '6px 12px', borderRadius: '4px' }}>ESC</button>
+        </div>
+        
+        {/* Persistence Section */}
+        <div style={{ marginBottom: '40px' }}>
+          <h4 style={{ fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', opacity: 0.4, marginBottom: '16px', letterSpacing: '0.05em' }}>Data Management</h4>
+          <div style={{ display: 'flex', gap: '8px' }}>
+            <button onClick={handleExport} style={{ flex: 1, padding: '12px', background: '#111', color: '#fff', borderRadius: '4px', fontSize: '13px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', border: '1px solid #111' }}>
+              <Download01Icon size={16} /> JSON Backup
+            </button>
+            <button onClick={handleCopyCleanWorkspace} style={{ flex: 1, padding: '12px', background: '#fff', color: '#111', borderRadius: '4px', fontSize: '13px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', border: '1px solid #ddd' }}>
+              <Copy01Icon size={16} /> Copy Clean Text
+            </button>
+            <button onClick={() => setShowImport(!showImport)} style={{ flex: 1, padding: '12px', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', fontSize: '13px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}>
+              <Upload01Icon size={16} /> Import JSON
+            </button>
+          </div>
+          {showImport && (
+            <div style={{ marginTop: '12px' }}>
+              <textarea 
+                placeholder="Paste workspace JSON here..." 
+                value={importText} 
+                onChange={e => setImportText(e.target.value)}
+                style={{ width: '100%', height: '120px', padding: '16px', borderRadius: '4px', border: '1px solid #ddd', fontSize: '12px', outline: 'none', background: '#fcfcfc', resize: 'vertical' }}
+              />
+              <button onClick={handleImport} style={{ marginTop: '8px', width: '100%', padding: '12px', background: 'var(--accent-color)', color: '#fff', borderRadius: '4px', fontSize: '14px', fontWeight: 500 }}>Restore Workspace</button>
+            </div>
+          )}
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px', marginBottom: '40px' }}>
+            <div>
+              <h4 style={{ fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', opacity: 0.4, marginBottom: '12px', letterSpacing: '0.05em' }}>Typography</h4>
+              <select 
+                value={settings.typography} 
+                onChange={e => handleChangeCryptography(e.target.value)}
+                style={{ padding: '12px 16px', width: '100%', border: '1px solid #ddd', borderRadius: '4px', outline: 'none', fontSize: '14px', background: '#fcfcfc', appearance: 'none' }}
+              >
+                <option value="IBM Plex Mono">IBM Plex Mono</option>
+                <option value="ClaudeSans">ClaudeSans (Inter)</option>
+                <option value="WixMadeForDisplay">WixMadeForDisplay</option>
+                <option value="CourierNew">CourierNew</option>
+              </select>
+            </div>
+            
+            <div>
+              <h4 style={{ fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', opacity: 0.4, marginBottom: '12px', letterSpacing: '0.05em' }}>Opacities</h4>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                 <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                    <span style={{ fontSize: '12px', width: '90px' }}>Background</span>
+                    <input type="range" min="0" max="1" step="0.05" value={settings.bgOpacity ?? 0.15} onChange={e => handleChangeOpacity('bgOpacity', parseFloat(e.target.value))} style={{ flex: 1 }} />
+                    <span style={{ fontSize: '12px', opacity: 0.5, width: '30px', textAlign: 'right' }}>{Math.round((settings.bgOpacity ?? 0.15) * 100)}%</span>
+                 </div>
+                 <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                    <span style={{ fontSize: '12px', width: '90px' }}>Foreground</span>
+                    <input type="range" min="0" max="1" step="0.05" value={settings.fgOpacity ?? 1} onChange={e => handleChangeOpacity('fgOpacity', parseFloat(e.target.value))} style={{ flex: 1 }} />
+                    <span style={{ fontSize: '12px', opacity: 0.5, width: '30px', textAlign: 'right' }}>{Math.round((settings.fgOpacity ?? 1) * 100)}%</span>
+                 </div>
+              </div>
+            </div>
+        </div>
+
+        <div style={{ marginBottom: '40px' }}>
+          <h4 style={{ fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', opacity: 0.4, marginBottom: '16px', letterSpacing: '0.05em' }}>Visual Background</h4>
+          <div style={{ background: '#fcfcfc', padding: '24px', borderRadius: '4px', border: '1px solid #ddd' }}>
+            <input type="file" accept="image/*" onChange={handleImageUpload} style={{ fontSize: '13px', marginBottom: '16px' }} />
+            {imgSrc && (
+               <ReactCrop crop={crop} onChange={c => setCrop(c)}>
+                  <img ref={imgRef} src={imgSrc} style={{ width: '100%', borderRadius: '4px', display: 'block' }} alt="Background preview" />
+               </ReactCrop>
+            )}
+            <div style={{ display: 'flex', gap: '8px', marginTop: imgSrc ? '16px' : '0' }}>
+              <button onClick={completeImageSave} style={{ flex: 2, padding: '10px', background: '#111', color: '#fff', borderRadius: '4px', fontSize: '13px' }}>Set Background</button>
+              <button onClick={handleResetBackground} style={{ flex: 1, padding: '10px', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', fontSize: '13px' }}>Clear</button>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+            <h4 style={{ fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', opacity: 0.4, letterSpacing: '0.05em' }}>Auto-Highlighter Rules</h4>
+            <button onClick={handleAddRule} style={{ fontSize: '12px', background: '#111', color: '#fff', padding: '6px 12px', borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+              <Add01Icon size={14} /> Add Pattern
+            </button>
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            {settings.highlighters.map(hl => (
+              <div key={hl.id} style={{ 
+                padding: '16px', background: '#fcfcfc', 
+                borderRadius: '4px', border: '1px solid #eee',
+                display: 'grid', gridTemplateColumns: 'minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 2fr) auto', gap: '16px', alignItems: 'end'
+              }}>
+                <div>
+                   <label style={{ fontSize: '10px', fontWeight: 600, opacity: 0.4, display: 'block', marginBottom: '6px' }}>SYMBOLS</label>
+                   <div style={{ display: 'flex', alignItems: 'center', background: '#fff', border: '1px solid #ddd', borderRadius: '4px', padding: '4px 8px' }}>
+                      <input value={hl.openSymbol} onChange={e => handleUpdateRule(hl.id, { openSymbol: e.target.value })} style={{ width: '100%', textAlign: 'center', border: 'none', background: 'transparent', outline: 'none', fontSize: '13px' }} placeholder="Open" />
+                      <span style={{ opacity: 0.2 }}>|</span>
+                      <input value={hl.closeSymbol} onChange={e => handleUpdateRule(hl.id, { closeSymbol: e.target.value })} style={{ width: '100%', textAlign: 'center', border: 'none', background: 'transparent', outline: 'none', fontSize: '13px' }} placeholder="Close" />
+                   </div>
+                </div>
+                <div>
+                   <label style={{ fontSize: '10px', fontWeight: 600, opacity: 0.4, display: 'block', marginBottom: '6px' }}>COLOR & OPACITY</label>
+                   <div style={{ display: 'flex', alignItems: 'center', gap: '8px', background: '#fff', border: '1px solid #ddd', borderRadius: '4px', padding: '2px 8px' }}>
+                      <input type="color" value={hl.color} onChange={e => handleUpdateRule(hl.id, { color: e.target.value })} style={{ width: '24px', height: '24px', border: 'none', padding: 0, background: 'none' }} />
+                      <div style={{ width: '1px', height: '16px', background: '#ddd' }} />
+                      <input type="number" min="1" max="100" value={Math.round(hl.baseOpacity * 100)} onChange={e => handleUpdateRule(hl.id, { baseOpacity: parseInt(e.target.value)/100 })} style={{ width: '100%', border: 'none', background: 'transparent', outline: 'none', fontSize: '13px' }} />
+                      <span style={{ fontSize: '11px', opacity: 0.4 }}>%</span>
+                   </div>
+                </div>
+                <div>
+                   <label style={{ fontSize: '10px', fontWeight: 600, opacity: 0.4, display: 'block', marginBottom: '6px' }}>NESTING LOGIC</label>
+                   <select value={hl.stackMode} onChange={e => handleUpdateRule(hl.id, { stackMode: e.target.value as any })} style={{ width: '100%', padding: '6px 8px', borderRadius: '4px', border: '1px solid #ddd', background: '#fff', outline: 'none', fontSize: '12px' }}>
+                      <option value="larger-lighter">Reverse Direction (Larger = Lighter)</option>
+                      <option value="smaller-lighter">Default Direction (Smaller = Lighter)</option>
+                   </select>
+                </div>
+                <button onClick={() => handleDeleteRule(hl.id)} style={{ padding: '8px', color: '#ff4d4f', background: 'rgba(255, 77, 79, 0.1)', borderRadius: '4px', display: 'flex' }}>
+                   <Delete01Icon size={16} />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Sidebar/IconPicker.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import * as HugeIcons from 'hugeicons-react';
+import iconNames from '../../utils/icon_names.json';
+
+interface IconPickerProps {
+  onSelect: (iconName: string, color?: string) => void;
+  onClose: () => void;
+}
+
+export default function IconPicker({ onSelect, onClose }: IconPickerProps) {
+  const [search, setSearch] = useState('');
+  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);
+  
+  const COLORS = [
+    '#2e6ff2', '#e11d48', '#d97706', '#16a34a', 
+    '#9333ea', '#db2777', '#0891b2', '#475569',
+    '#111111'
+  ];
+
+  const filteredIcons = iconNames.filter(name => 
+    name.toLowerCase().includes(search.toLowerCase())
+  ).slice(0, 100); // Limit results for performance
+
+  return (
+    <div className="icon-picker-overlay" onClick={onClose} style={{
+      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+      zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center',
+      backgroundColor: 'rgba(0,0,0,0.2)'
+    }}>
+      <div className="icon-picker" onClick={e => e.stopPropagation()} style={{
+        background: 'var(--bg-panel)', padding: '16px', borderRadius: '8px',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.15)', width: '400px', maxHeight: '500px',
+        display: 'flex', flexDirection: 'column', border: '1px solid var(--border-color)'
+      }}>
+        <input 
+          autoFocus
+          placeholder="Search icons..." 
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          style={{
+            width: '100%', padding: '10px', marginBottom: '12px',
+            border: '1px solid var(--border-color)', borderRadius: '4px',
+            outline: 'none', fontSize: '14px'
+          }}
+        />
+        
+        <div className="icon-grid" style={{
+          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
+          gap: '8px', overflowY: 'auto', flex: 1, padding: '4px'
+        }}>
+          {filteredIcons.map(name => {
+            const Icon = (HugeIcons as any)[name];
+            if (!Icon) return null;
+            return (
+              <button 
+                key={name}
+                onClick={() => { onSelect(name, selectedColor); onClose(); }}
+                title={name}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  padding: '8px', borderRadius: '4px', background: 'transparent',
+                  border: '1px solid transparent', cursor: 'pointer', transition: 'var(--transition-smooth)'
+                }}
+                onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,0,0,0.05)'}
+                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+              >
+                <Icon size={20} color={selectedColor || "var(--text-primary)"} />
+              </button>
+            );
+          })}
+        </div>
+
+        <div style={{ marginTop: '12px', borderTop: '1px solid var(--border-color)', paddingTop: '12px', display: 'flex', gap: '8px', justifyContent: 'center' }}>
+          {COLORS.map(c => (
+             <div 
+               key={c}
+               onClick={() => setSelectedColor(c)}
+               style={{
+                 width: '20px', height: '20px', borderRadius: '50%', backgroundColor: c,
+                 cursor: 'pointer', border: selectedColor === c ? '2px solid var(--text-primary)' : '2px solid transparent',
+                 boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+               }}
+             />
+          ))}
+          <div 
+            onClick={() => setSelectedColor(undefined)}
+            style={{
+              width: '20px', height: '20px', borderRadius: '50%', border: '1px dashed var(--text-secondary)',
+              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px'
+            }}
+          >
+            x
+          </div>
+        </div>
+        
+        {filteredIcons.length === 0 && (
+          <div style={{ textAlign: 'center', padding: '20px', color: 'var(--text-secondary)' }}>
+            No icons found
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/Sidebar/TreeView.tsx

@@ -0,0 +1,458 @@
+import { useFileStore } from '../../stores/fileStore';
+import { FileNode } from '../../lib/db';
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { 
+  Folder01Icon, 
+  File01Icon, 
+  MoreVerticalIcon, 
+  FolderAddIcon,
+  FileAddIcon,
+  ArrowDown01Icon,
+  ArrowRight01Icon,
+  DragDropVerticalIcon,
+  Copy01Icon
+} from 'hugeicons-react';
+import * as HugeIcons from 'hugeicons-react';
+import IconPicker from './IconPicker';
+
+import {
+  DndContext, 
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+export default function TreeView() {
+  const { files, loadFiles, createNode, reorderNodes, moveNode, copySelectedContents } = useFileStore();
+  
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // Pre-calculate tree structure for O(N) rendering instead of O(N^2)
+  const rootNodes = useMemo(() => files.filter(f => !f.parentId).sort((a,b) => a.orderIndex - b.orderIndex), [files]);
+  const childrenMap = useMemo(() => {
+    const map: Record<string, FileNode[]> = {};
+    files.forEach(f => {
+      if (f.parentId) {
+        if (!map[f.parentId]) map[f.parentId] = [];
+        map[f.parentId].push(f);
+      }
+    });
+    // Sort each child group
+    Object.keys(map).forEach(key => {
+      map[key].sort((a,b) => a.orderIndex - b.orderIndex);
+    });
+    return map;
+  }, [files]);
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    if (over.id.toString().startsWith('empty-')) {
+       const targetId = over.id.toString().replace('empty-', '');
+       
+       let currentId: string | null = targetId;
+       while (currentId) {
+         if (currentId === active.id) return; 
+         const p = files.find(f => f.id === currentId);
+         currentId = p?.parentId || null; 
+       }
+
+       await moveNode(active.id.toString(), targetId);
+       await loadFiles();
+       return;
+    }
+
+    const overNode = files.find(f => f.id === over.id);
+    if (!overNode) return;
+
+    let targetParentId = overNode.parentId || null;
+    let currentId = targetParentId;
+    while (currentId) {
+      if (currentId === active.id) return;
+      const p = files.find(f => f.id === currentId);
+      currentId = p?.parentId || null;
+    }
+
+    await reorderNodes(active.id.toString(), over.id.toString(), targetParentId);
+    await loadFiles();
+  };
+
+  const handleCopyAll = () => {
+    const text = copySelectedContents();
+    if (text) {
+      navigator.clipboard.writeText(text);
+    }
+  };
+
+  const handleAdd = async (type: 'file' | 'folder') => {
+    await createNode(type === 'file' ? 'New file' : 'New folder', type, null);
+    await loadFiles();
+  };
+
+  return (
+    <div className="tree-view" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div className="tree-actions" style={{ 
+        padding: '12px 16px', 
+        display: 'flex', 
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderBottom: '1px solid rgba(0,0,0,0.03)'
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <span style={{ fontSize: '10px', fontWeight: 700, opacity: 0.3, textTransform: 'uppercase' }}>Structure</span>
+          <button 
+            className="btn-icon-sm" 
+            onClick={handleCopyAll} 
+            title="Copy all selected contents"
+            style={{ opacity: 0.5, cursor: 'pointer', border: 'none', background: 'transparent', padding: 0 }}
+          >
+            <Copy01Icon size={12} />
+          </button>
+        </div>
+        <div style={{ display: 'flex', gap: '4px' }}>
+          <button className="btn-icon-sm" onClick={() => handleAdd('file')} title="Add File">
+            <FileAddIcon size={14} />
+          </button>
+          <button className="btn-icon-sm" onClick={() => handleAdd('folder')} title="Add Folder">
+            <FolderAddIcon size={14} />
+          </button>
+        </div>
+      </div>
+      <div className="tree-scrollable" style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
+        <DndContext 
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext 
+            items={rootNodes.map(n => n.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {rootNodes.map(node => (
+              <SidebarItem 
+                key={node.id} 
+                node={node} 
+                level={0} 
+                childrenMap={childrenMap}
+              />
+            ))}
+          </SortableContext>
+        </DndContext>
+      </div>
+    </div>
+  );
+}
+
+function SidebarItem({ 
+  node, 
+  level, 
+  childrenMap 
+}: { 
+  node: FileNode; 
+  level: number; 
+  childrenMap: Record<string, FileNode[]> 
+}) {
+  const { 
+    activeFileId, selectedIds, 
+    toggleSelect, renameNode, deleteNode, duplicateNode, createNode, loadFiles, setNodeIcon, setNodeColor, copyNodeContents 
+  } = useFileStore();
+  
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editName, setEditName] = useState(node.name);
+  const [showMenu, setShowMenu] = useState(false);
+  const [showIconPicker, setShowIconPicker] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: node.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  useEffect(() => {
+    if (!showMenu && !showIconPicker) return;
+    
+    const handleEvents = (e: any) => {
+      // Close on Escape
+      if (e.key === 'Escape') {
+        setShowMenu(false);
+        setShowIconPicker(false);
+      }
+      // Close on Outside Click
+      if (e.type === 'mousedown' && containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setShowMenu(false);
+        setShowIconPicker(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEvents);
+    document.addEventListener('mousedown', handleEvents);
+    return () => {
+      document.removeEventListener('keydown', handleEvents);
+      document.removeEventListener('mousedown', handleEvents);
+    };
+  }, [showMenu, showIconPicker]);
+
+  const children = childrenMap[node.id] || [];
+  const isSelected = selectedIds.includes(node.id);
+  const isActive = activeFileId === node.id;
+
+  const handleClick = (e: any) => {
+    e.stopPropagation();
+    if (node.type === 'folder') {
+      setIsExpanded(!isExpanded);
+    }
+    toggleSelect(node.id, e.ctrlKey || e.metaKey || e.shiftKey);
+  };
+
+  const handleRename = async () => {
+    if (editName.trim() !== '' && editName !== node.name) {
+      await renameNode(node.id, editName);
+    }
+    setIsEditing(false);
+  };
+
+  const handleMenuAction = async (action: string, e: any) => {
+    e.stopPropagation();
+    setShowMenu(false);
+    
+    switch (action) {
+      case 'addFile':
+        setIsExpanded(true);
+        await createNode('New file', 'file', node.id);
+        break;
+      case 'addFolder':
+        setIsExpanded(true);
+        await createNode('New folder', 'folder', node.id);
+        break;
+      case 'rename':
+        setIsEditing(true);
+        break;
+      case 'duplicate':
+        await duplicateNode(node.id);
+        break;
+      case 'delete':
+        await deleteNode(node.id);
+        break;
+      case 'changeIcon':
+        setShowIconPicker(true);
+        break;
+      case 'copyContents':
+        const text = copyNodeContents(node.id);
+        navigator.clipboard.writeText(text);
+        break;
+    }
+    await loadFiles();
+  };
+
+  return (
+    <div 
+      ref={(nodeEl) => {
+        setNodeRef(nodeEl);
+        (containerRef as any).current = nodeEl;
+      }} 
+      className="tree-item-wrapper" 
+      style={{ ...style, display: 'flex', flexDirection: 'column' }}
+      {...attributes}
+    >
+      <div 
+        className={`tree-item ${isSelected ? 'selected' : ''} ${isActive ? 'active' : ''}`}
+        style={{ 
+          paddingLeft: `${16 + level * 12}px`, 
+          display: 'flex', 
+          alignItems: 'center', 
+          paddingTop: '4px',
+          paddingBottom: '4px',
+          paddingRight: '12px',
+          cursor: 'pointer',
+          position: 'relative',
+          transition: 'all 0.2s ease',
+          backgroundColor: isActive ? 'rgba(0,0,0,0.04)' : isSelected ? 'rgba(0,0,0,0.02)' : 'transparent',
+          borderLeft: isActive ? '2px solid var(--accent-color)' : '2px solid transparent',
+        }}
+        onClick={handleClick}
+      >
+        <div 
+          className="drag-handle" 
+          {...listeners} 
+          style={{ cursor: 'grab', opacity: 0.2, marginRight: 4, display: 'flex' }}
+        >
+          <DragDropVerticalIcon size={14} />
+        </div>
+
+        {node.type === 'folder' && (
+          <div style={{ marginRight: 4, display: 'flex', opacity: 0.4 }}>
+            {isExpanded ? <ArrowDown01Icon size={12} /> : <ArrowRight01Icon size={12} />}
+          </div>
+        )}
+
+        <div style={{ marginRight: 8, display: 'flex', color: node.color ? node.color : (isActive ? 'var(--text-primary)' : 'var(--text-secondary)') }}>
+          {node.icon && (HugeIcons as any)[node.icon] ? (
+            (() => {
+              const CustomIcon = (HugeIcons as any)[node.icon];
+              return <CustomIcon size={16} />;
+            })()
+          ) : (
+            node.type === 'folder' ? <Folder01Icon size={16} /> : <File01Icon size={16} />
+          )}
+        </div>
+        
+        {isEditing ? (
+          <input 
+            autoFocus 
+            value={editName}
+            onChange={e => setEditName(e.target.value)}
+            onBlur={handleRename}
+            onKeyDown={e => { if (e.key === 'Enter') handleRename(); }}
+            style={{ 
+              border: 'none', 
+              outline: 'none', 
+              background: 'rgba(0,0,0,0.03)', 
+              flex: 1, 
+              fontFamily: 'inherit',
+              fontSize: '13px',
+              padding: '2px 4px',
+              borderRadius: '2px'
+            }}
+          />
+        ) : (
+          <span style={{
+            flex: 1, 
+            fontSize: '13px', 
+            userSelect: 'none',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            opacity: isActive ? 1 : 0.8
+          }}>
+            {node.name}
+          </span>
+        )}
+
+        <div className="item-actions" style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+           <button 
+              className="more-btn"
+              onClick={(e: any) => { e.stopPropagation(); setShowMenu(!showMenu); }}
+              style={{ padding: '4px', opacity: 0, transition: 'opacity 0.2s ease' }}
+           >
+             <MoreVerticalIcon size={14} />
+           </button>
+        </div>
+        
+        {showMenu && (
+          <div className="context-menu" style={{
+            position: 'absolute', right: 8, top: 28, zIndex: 100,
+            background: 'var(--bg-panel)', border: '1px solid var(--border-color)', 
+            borderRadius: '6px', boxShadow: '0 10px 25px rgba(0,0,0,0.1)',
+            display: 'flex', flexDirection: 'column', minWidth: 140, padding: 4
+          }}>
+            {node.type === 'folder' && <MenuButton onClick={(e: any) => handleMenuAction('addFile', e)}>New File</MenuButton>}
+            {node.type === 'folder' && <MenuButton onClick={(e: any) => handleMenuAction('addFolder', e)}>New Folder</MenuButton>}
+            <MenuButton onClick={(e: any) => handleMenuAction('rename', e)}>Rename</MenuButton>
+            <MenuButton onClick={(e: any) => handleMenuAction('changeIcon', e)}>Change Icon</MenuButton>
+            <MenuButton onClick={(e: any) => handleMenuAction('duplicate', e)}>Duplicate</MenuButton>
+            <MenuButton onClick={(e: any) => handleMenuAction('copyContents', e)}>Copy Contents</MenuButton>
+            <MenuButton onClick={(e: any) => handleMenuAction('delete', e)} danger>Delete</MenuButton>
+          </div>
+        )}
+      </div>
+      
+      {node.type === 'folder' && isExpanded && children.length > 0 && (
+        <div className="tree-children" style={{ borderLeft: '1px solid rgba(0,0,0,0.03)', marginLeft: `${18 + level * 12}px` }}>
+          <SortableContext 
+            items={children.map(c => c.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {children.map(child => (
+              <SidebarItem 
+                key={child.id} 
+                node={child} 
+                level={level + 1} 
+                childrenMap={childrenMap} 
+              />
+            ))}
+          </SortableContext>
+        </div>
+      )}
+      
+      {node.type === 'folder' && isExpanded && children.length === 0 && (
+        <div className="tree-children" style={{ borderLeft: '1px solid rgba(0,0,0,0.03)', marginLeft: `${18 + level * 12}px` }}>
+          <SortableContext 
+            items={[`empty-${node.id}`]}
+            strategy={verticalListSortingStrategy}
+          >
+            <EmptyDropZone id={`empty-${node.id}`} />
+          </SortableContext>
+        </div>
+      )}
+
+      {showIconPicker && (
+        <IconPicker 
+          onSelect={async (iconName, color) => {
+            await setNodeIcon(node.id, iconName);
+            if (color) {
+              await setNodeColor(node.id, color);
+            }
+          }} 
+          onClose={() => setShowIconPicker(false)} 
+        />
+      )}
+    </div>
+  );
+}
+
+function EmptyDropZone({ id }: { id: string }) {
+  const { setNodeRef } = useSortable({ id });
+  return (
+    <div 
+      ref={setNodeRef} 
+      style={{ padding: '4px 16px', fontSize: '11px', opacity: 0.4, fontStyle: 'italic', display: 'flex', alignItems: 'center', height: '24px' }}
+    >
+      Drop files here...
+    </div>
+  );
+}
+
+function MenuButton({ children, onClick, danger }: { children: any, onClick: any, danger?: boolean }) {
+  return (
+    <button 
+      onClick={onClick} 
+      style={{
+        padding: '6px 10px', textAlign: 'left', fontSize: '12px',
+        borderRadius: '4px', color: danger ? '#ff4d4f' : 'inherit',
+        transition: 'background 0.2s ease',
+        width: '100%'
+      }}
+      onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,0,0,0.03)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+    >
+      {children}
+    </button>
+  );
+}

src/index.css

@@ -0,0 +1,261 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border-radius: 2px !important; /* Specification: Extremely-less-curved edges */
+}
+
+:root {
+  --bg-color: #f7f7f7;
+  --bg-panel: #ffffff;
+  --text-primary: #111111;
+  --text-secondary: #666666;
+  --border-color: #eeeeee;
+  --accent-color: #2e6ff2;
+  --font-ibm-plex: 'IBM Plex Mono', monospace;
+  --font-claude-sans: 'Inter', system-ui, sans-serif;
+  --font-wix-display: 'Wix Madefor Display', sans-serif;
+  --font-courier-new: 'Courier New', Courier, monospace;
+  
+  --radius-sm: 2px;
+  --radius-md: 2px;
+  
+  --bg-opacity: 0.15;
+  --fg-opacity: 1;
+  
+  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  font-family: var(--font-ibm-plex);
+  overflow: hidden; /* App takes full screen */
+}
+
+/* Typography Classes */
+.font-ibm-plex-mono { font-family: var(--font-ibm-plex); }
+.font-claudesans { font-family: var(--font-claude-sans); }
+.font-wixmadefordisplay { font-family: var(--font-wix-display); }
+.font-couriernew { font-family: var(--font-courier-new); }
+
+/* Layout Shell */
+.app-container {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  position: relative;
+  overflow: hidden;
+}
+
+.app-background {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-size: cover;
+  background-position: center;
+  z-index: -1;
+  opacity: var(--bg-opacity);
+}
+
+.mini-sidebar {
+  width: 48px;
+  background-color: var(--bg-panel);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 0;
+  gap: 16px;
+  z-index: 10;
+}
+
+.sidebar-panel {
+  width: 260px;
+  background-color: rgba(255, 255, 255, 0.85); /* Glassmorphism leaning */
+  backdrop-filter: blur(10px);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+  transition: width 0.3s ease;
+}
+
+.sidebar-header {
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.editor-main {
+  flex: 1;
+  background-color: transparent;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.editor-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary);
+}
+
+/* Reusable buttons component logic will be added here */
+button {
+  all: unset;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: var(--transition-smooth);
+}
+
+/* Tree View Styling UPDATED */
+.tree-view {
+  padding-bottom: 20px;
+}
+
+.tree-children {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+/* Vertical line for the branch refine */
+.tree-children::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: rgba(0,0,0,0.03);
+}
+
+.tree-item-wrapper {
+  position: relative;
+}
+
+.tree-item {
+  transition: background-color 0.15s ease, border-left 0.1s ease;
+}
+
+.tree-item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.tree-item:hover .more-btn {
+  opacity: 0.6 !important;
+}
+
+.tree-item .more-btn:hover {
+  opacity: 1 !important;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.tree-item.active {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  font-weight: 500;
+}
+
+.btn-icon-sm {
+  all: unset;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  color: var(--text-secondary);
+  opacity: 0.6;
+}
+
+.btn-icon-sm:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  opacity: 1;
+  color: var(--text-primary);
+}
+
+.context-menu button {
+  all: unset;
+  cursor: pointer;
+  font-family: var(--font-ibm-plex);
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+.pixilize {
+  filter: blur(5px) grayscale(0.5);
+  transition: filter 0.3s ease;
+  user-select: none;
+}
+.pixilize:hover {
+  filter: none;
+}
+
+.ContentEditable {
+  flex: 1;
+  outline: none;
+  padding: 0px 24px 100px 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  tab-size: 4;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.editor-paragraph {
+  margin: 0;
+  position: relative;
+}
+
+.comment-bubble {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 11px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  margin-bottom: 8px;
+  color: var(--text-primary);
+  max-width: 250px;
+  line-height: 1.4;
+}
+
+.comment-toggle {
+  opacity: 0.1;
+  transition: opacity 0.2s ease;
+}
+.tree-item-wrapper:hover .comment-toggle,
+.line-numbers-container:hover .comment-toggle,
+.comment-toggle.active {
+  opacity: 1;
+}
+
+.editor-text-bold { font-weight: bold; }
+.editor-text-italic { font-style: italic; }
+.editor-text-strikethrough { text-decoration: line-through; }
+.editor-text-underline { text-decoration: underline; }
+
+@keyframes fadeInSlide {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}

src/lib/db.ts

@@ -0,0 +1,162 @@
+import { openDB, DBSchema, IDBPDatabase } from 'idb';
+
+export interface FileNode {
+  id: string;
+  name: string;
+  type: 'file' | 'folder';
+  parentId: string | null;
+  content?: string; // Lexical JSON string or plain text
+  icon?: string;
+  color?: string;
+  orderIndex: number;
+  comments?: Record<string, string>; // Line-based comments: { "line-1": "comment text" }
+}
+
+export interface SettingsType {
+  typography: 'IBM Plex Mono' | 'ClaudeSans' | 'WixMadeForDisplay' | 'CourierNew';
+  theme: string;
+  highlighters: HighlighterRule[];
+  bgOpacity: number;
+  fgOpacity: number;
+}
+
+export interface HighlighterRule {
+  id: string;
+  openSymbol: string;
+  closeSymbol: string;
+  color: string;
+  baseOpacity: number; // 0.1 for 10%
+  stackMode: 'smaller-lighter' | 'larger-lighter';
+}
+
+export const DEFAULT_HIGHLIGHTERS: HighlighterRule[] = [
+  { id: '1', openSymbol: '(', closeSymbol: ')', color: '#ffb3ba', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '2', openSymbol: '[', closeSymbol: ']', color: '#baffc9', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '3', openSymbol: '{', closeSymbol: '}', color: '#ffdfba', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '4', openSymbol: '<', closeSymbol: '>', color: '#bae1ff', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '5', openSymbol: "'", closeSymbol: "'", color: '#ffffba', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '6', openSymbol: '"', closeSymbol: '"', color: '#e0bbff', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '7', openSymbol: '`', closeSymbol: '`', color: '#c7f9cc', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '8', openSymbol: '*', closeSymbol: '*', color: '#f9dcc4', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '9', openSymbol: '**', closeSymbol: '**', color: '#f9bcc4', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '10', openSymbol: '~~', closeSymbol: '~~', color: '#d9ed92', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+  { id: '11', openSymbol: '$$', closeSymbol: '$$', color: '#99d98c', baseOpacity: 0.6, stackMode: 'larger-lighter' },
+];
+
+export const DEFAULT_SETTINGS: SettingsType = {
+  typography: 'IBM Plex Mono',
+  theme: 'minimal-light',
+  highlighters: DEFAULT_HIGHLIGHTERS,
+  bgOpacity: 0.15,
+  fgOpacity: 1.0,
+};
+
+interface EditorDB extends DBSchema {
+  files: {
+    key: string;
+    value: FileNode;
+    indexes: { 'by-parent': string };
+  };
+  config: {
+    key: string;
+    value: any;
+  };
+  images: {
+    key: string;
+    value: { id: string; blob: Blob | string };
+  };
+}
+
+let dbPromise: Promise<IDBPDatabase<EditorDB>>;
+
+export function initDB() {
+  if (!dbPromise) {
+    dbPromise = openDB<EditorDB>('HybridEditorDB', 1, {
+      upgrade(db) {
+        const fileStore = db.createObjectStore('files', { keyPath: 'id' });
+        fileStore.createIndex('by-parent', 'parentId');
+        
+        db.createObjectStore('config');
+        db.createObjectStore('images', { keyPath: 'id' });
+      },
+    });
+  }
+  return dbPromise;
+}
+
+export async function getFiles(): Promise<FileNode[]> {
+  const db = await initDB();
+  return db.getAll('files');
+}
+
+export async function saveFile(file: FileNode): Promise<string> {
+  const db = await initDB();
+  await db.put('files', file);
+  return file.id;
+}
+
+export async function deleteFile(id: string): Promise<void> {
+  const db = await initDB();
+  await db.delete('files', id);
+}
+
+export async function getSettings(): Promise<SettingsType> {
+  const db = await initDB();
+  const settings = await db.get('config', 'settings');
+  return { ...DEFAULT_SETTINGS, ...(settings || {}) };
+}
+
+export async function saveSettings(settings: SettingsType): Promise<void> {
+  const db = await initDB();
+  await db.put('config', settings, 'settings');
+}
+
+export async function getBackgroundImage(): Promise<Blob | string | undefined> {
+  const db = await initDB();
+  const res = await db.get('images', 'background');
+  return res?.blob;
+}
+
+export async function saveBackgroundImage(blob: Blob | string): Promise<void> {
+  const db = await initDB();
+  await db.put('images', { id: 'background', blob });
+}
+
+export async function resetBackgroundImage(): Promise<void> {
+  const db = await initDB();
+  await db.delete('images', 'background');
+}
+
+/**
+ * EXPORT/IMPORT Logic for local JSON persistence
+ */
+
+export interface WorkspaceExport {
+  files: FileNode[];
+  settings: SettingsType;
+  lastUpdated: string;
+}
+
+export async function exportFullWorkspace(): Promise<WorkspaceExport> {
+  const files = await getFiles();
+  const settings = await getSettings();
+  return {
+    files,
+    settings,
+    lastUpdated: new Date().toISOString()
+  };
+}
+
+export async function importWorkspace(data: WorkspaceExport): Promise<void> {
+  const db = await initDB();
+  
+  // Clear existing (optional, but safer for full recovery)
+  await db.clear('files');
+  
+  const tx = db.transaction(['files', 'config'], 'readwrite');
+  for (const file of data.files) {
+    await tx.objectStore('files').put(file);
+  }
+  await tx.objectStore('config').put(data.settings, 'settings');
+  await tx.done;
+}

src/lib/persistence.ts

@@ -0,0 +1,21 @@
+import { exportFullWorkspace, importWorkspace, WorkspaceExport } from './db';
+
+/**
+ * Persistence Bridge
+ * 
+ * In a standard web environment, we can't directly write to the filesystem.
+ * However, we can trigger a download or, in this agentic environment, 
+ * provide a hook for the agent to sync the state.
+ */
+
+export async function syncToJSON(): Promise<WorkspaceExport> {
+  const data = await exportFullWorkspace();
+  console.log('SYNC_REQUIRED', JSON.stringify(data)); 
+  // We log this so the agent/system can pick it up if watching logs, 
+  // or the user can copy-paste.
+  return data;
+}
+
+export async function loadFromJSON(data: WorkspaceExport): Promise<void> {
+  await importWorkspace(data);
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/plugins/AutoHighlighterPlugin.tsx

@@ -0,0 +1,252 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getRoot, $isTextNode, $isElementNode, TextNode } from 'lexical';
+import { getSettings, HighlighterRule } from '../lib/db';
+
+const CONJUNCTIONS = ['and', 'or', 'but', 'yet', 'so', 'in addition', 'therefore'];
+
+function setNodeBackgroundColor(node: TextNode, bg: string | undefined): boolean {
+  let style = node.getStyle() || '';
+  style = style.replace(/background(?:-color)?:\s*[^;]+;?/g, '').trim();
+  if (bg) {
+    const prop = bg.includes('gradient') ? 'background' : 'background-color';
+    style = style + (style && !style.endsWith(';') ? ';' : '') + `${prop}: ${bg};`;
+  }
+  if (node.getStyle() !== style) {
+    node.setStyle(style);
+    return true;
+  }
+  return false;
+}
+
+function calculateBgColor(rule: HighlighterRule, depth: number): string | undefined {
+    if (depth <= 0) return undefined;
+    const hex = rule.color.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16) || 255;
+    const g = parseInt(hex.substring(2, 4), 16) || 255;
+    const b = parseInt(hex.substring(4, 6), 16) || 255;
+    
+    let opacity = rule.baseOpacity || 0.6;
+    if (rule.stackMode === 'larger-lighter') {
+        // larger means outer. depth=1 is outer. Outer is lighter. So as depth increases, opacity increases (darker).
+        opacity = Math.min(0.95, opacity + ((depth - 1) * 0.15));
+    } else {
+        // smaller means inner. Outer is darker. As depth increases, opacity decreases (lighter).
+        opacity = Math.max(0.05, opacity - ((depth - 1) * 0.15));
+    }
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+export default function AutoHighlighterPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    let rules: HighlighterRule[] = [];
+    getSettings().then(s => { rules = s.highlighters || []; });
+
+    const removeUpdateListener = editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
+      if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
+
+      editor.update(() => {
+        const root = $getRoot();
+        const firstChild = root.getFirstChild();
+        if (!firstChild) return;
+
+        const blocks = root.getChildren();
+        
+        for (const block of blocks) {
+          if (!$isElementNode(block)) continue;
+          
+          const text = block.getTextContent();
+          if (!text) {
+             // ensure no leftover background styles in empty blocks
+             block.getChildren().forEach(c => {
+                 if ($isTextNode(c)) setNodeBackgroundColor(c, undefined);
+             });
+             continue;
+          }
+
+          const sortedRules = [...rules].sort((a, b) => b.openSymbol.length - a.openSymbol.length);
+          const tokens: any[] = [];
+
+          // 1. Lexer
+          for (let i = 0; i < text.length; i++) {
+             let matchedConj = false;
+             for (const c of CONJUNCTIONS) {
+                 if (text.startsWith(c, i)) {
+                     const before = i === 0 || !/[a-zA-Z]/.test(text[i-1]);
+                     const after = i + c.length >= text.length || !/[a-zA-Z]/.test(text[i+c.length]);
+                     if (before && after) {
+                         tokens.push({ index: i, length: c.length, type: 'conj' });
+                         i += c.length - 1;
+                         matchedConj = true;
+                         break;
+                     }
+                 }
+             }
+             if (matchedConj) continue;
+
+             for (const rule of sortedRules) {
+                 const isOpenSame = rule.openSymbol === rule.closeSymbol;
+                 if (text.startsWith(rule.closeSymbol, i)) { // Always check close first
+                     tokens.push({ index: i, length: rule.closeSymbol.length, type: isOpenSame ? 'same' : 'close', rule });
+                     i += rule.closeSymbol.length - 1;
+                     break;
+                 } else if (text.startsWith(rule.openSymbol, i)) {
+                     tokens.push({ index: i, length: rule.openSymbol.length, type: 'open', rule });
+                     i += rule.openSymbol.length - 1;
+                     break;
+                 }
+             }
+          }
+
+          // 2. Parser
+          const pairs: { start: number, end: number, rule: HighlighterRule }[] = [];
+          const stack: { token: any, rule: HighlighterRule }[] = [];
+
+          for (const tk of tokens) {
+              if (tk.type === 'conj') continue; // handled later
+
+              if (tk.type === 'open') {
+                  stack.push({ token: tk, rule: tk.rule });
+              } else if (tk.type === 'close') {
+                  let foundIdx = -1;
+                  for (let j = stack.length - 1; j >= 0; j--) {
+                      if (stack[j].rule.id === tk.rule.id && stack[j].token.type === 'open') {
+                          foundIdx = j;
+                          break;
+                      }
+                  }
+                  if (foundIdx !== -1) {
+                      const openTk = stack.splice(foundIdx, 1)[0];
+                      pairs.push({ start: openTk.token.index, end: tk.index + tk.length, rule: openTk.rule });
+                  }
+              } else if (tk.type === 'same') {
+                  let foundIdx = -1;
+                  for (let j = stack.length - 1; j >= 0; j--) {
+                      if (stack[j].rule.id === tk.rule.id && stack[j].token.type === 'same') {
+                          foundIdx = j;
+                          break;
+                      }
+                  }
+                  if (foundIdx !== -1) {
+                      const openTk = stack.splice(foundIdx, 1)[0];
+                      pairs.push({ start: openTk.token.index, end: tk.index + tk.length, rule: openTk.rule });
+                  } else {
+                      stack.push({ token: tk, rule: tk.rule });
+                  }
+              }
+          }
+
+          const charColors = new Array(text.length).fill(undefined);
+
+          for (let i = 0; i < text.length; i++) {
+              let activePairs = [];
+              for (const p of pairs) {
+                  if (i >= p.start && i < p.end) {
+                      activePairs.push(p);
+                  }
+              }
+              if (activePairs.length > 0) {
+                  // Outermost first (longest span)
+                  activePairs.sort((a, b) => (b.end - b.start) - (a.end - a.start));
+                  
+                  if (activePairs.length === 1) {
+                      charColors[i] = calculateBgColor(activePairs[0].rule, 1);
+                  } else {
+                      const gradients: string[] = [];
+                      for (let d = activePairs.length - 1; d >= 0; d--) {
+                          const base = calculateBgColor(activePairs[d].rule, 1);
+                          gradients.push(`linear-gradient(${base}, ${base})`);
+                      }
+                      charColors[i] = gradients.join(', ');
+                  }
+              }
+          }
+
+          // Conjunction override
+          for (let i = 0; i < text.length; i++) {
+             for (const c of CONJUNCTIONS) {
+                 if (text.startsWith(c, i)) {
+                     const before = i === 0 || !/[a-zA-Z]/.test(text[i-1]);
+                     const after = i + c.length >= text.length || !/[a-zA-Z]/.test(text[i+c.length]);
+                     if (before && after) {
+                         const color = 'rgba(234, 179, 8, 0.4)';
+                         for(let j=0; j<c.length; j++) charColors[i+j] = color;
+                         i += c.length - 1;
+                         break;
+                     }
+                 }
+             }
+          }
+
+          // 3. Modulator
+          // Cleanly apply regions to Lexical DOM
+          let currentOffset = 0;
+          let child = block.getFirstChild();
+
+          while (child !== null) {
+              if (!$isTextNode(child)) {
+                  currentOffset += child.getTextContent().length;
+                  child = child.getNextSibling();
+                  continue;
+              }
+
+              const textContent = child.getTextContent();
+              const len = textContent.length;
+              if (len === 0) {
+                 child = child.getNextSibling();
+                 continue;
+              }
+
+              let targetBg = charColors[currentOffset];
+              let splitNeededOffset = -1;
+              
+              for (let c = 1; c < len; c++) {
+                  if (charColors[currentOffset + c] !== targetBg) {
+                      splitNeededOffset = c;
+                      break;
+                  }
+              }
+
+              let style = child.getStyle() || '';
+              let currentBgMatch = style.match(/background(?:-color)?:\s*([^;]+)/);
+              let currentBg = currentBgMatch ? currentBgMatch[1].trim() : undefined;
+              let normalizedCurrent = currentBg ? currentBg.replace(/\s+/g, '') : undefined;
+              let normalizedTarget = targetBg ? targetBg.replace(/\s+/g, '') : undefined;
+              
+              if (splitNeededOffset !== -1) {
+                  const [, rightNode] = child.splitText(splitNeededOffset);
+                  if (normalizedCurrent !== normalizedTarget) {
+                      setNodeBackgroundColor(child, targetBg);
+                  }
+                  currentOffset += splitNeededOffset;
+                  child = rightNode;
+              } else {
+                  if (normalizedCurrent !== normalizedTarget) {
+                      setNodeBackgroundColor(child, targetBg);
+                  }
+                  currentOffset += len;
+                  
+                  // Optimisation: Merge adjacent nodes with the same formats & styles to prevent Lexical fragmentation
+                  let next = child.getNextSibling();
+                  if (next && $isTextNode(next) && next.getStyle() === child.getStyle() && next.getFormat() === child.getFormat()) {
+                      child.setTextContent(child.getTextContent() + next.getTextContent());
+                      next.remove();
+                      // Don't advance offset, re-process this larger node on next pass if needed, or 
+                      // actually we know targetBg covers `len`, but what about the rest? 
+                      // It's safer to just let the overall update pass handle it or let Lexical normalize.
+                      // Actually, Lexical internal text node normalization runs automatically if not prevented!
+                  }
+                  child = child.getNextSibling();
+              }
+          }
+        }
+      });
+    });
+
+    return removeUpdateListener;
+  }, [editor]);
+
+  return null;
+}

src/stores/fileStore.ts

@@ -0,0 +1,327 @@
+import { create } from 'zustand';
+import { v4 as uuidv4 } from 'uuid';
+import { FileNode, getFiles, saveFile, deleteFile } from '../lib/db';
+import { arrayMove } from '@dnd-kit/sortable';
+
+interface FileStore {
+  files: FileNode[];
+  activeFileId: string | null;
+  selectedIds: string[];
+  
+  loadFiles: () => Promise<void>;
+  setActiveFile: (id: string | null, skipHistory?: boolean) => void;
+  navigationHistory: string[];
+  historyIndex: number;
+  goBack: () => void;
+  goForward: () => void;
+  toggleSelect: (id: string, multi: boolean) => void;
+  clearSelection: () => void;
+  
+  createNode: (name: string, type: 'file' | 'folder', parentId: string | null) => Promise<string>;
+  renameNode: (id: string, newName: string) => Promise<void>;
+  deleteNode: (id: string) => Promise<void>;
+  duplicateNode: (id: string) => Promise<void>;
+  updateFileContent: (id: string, content: string) => Promise<void>;
+  moveNode: (id: string, newParentId: string | null) => Promise<void>;
+  reorderNodes: (activeId: string, overId: string, newParentId: string | null) => Promise<void>;
+  setNodeIcon: (id: string, icon: string) => Promise<void>;
+  setNodeColor: (id: string, color: string) => Promise<void>;
+  setComment: (fileId: string, lineId: string, comment: string) => Promise<void>;
+  copySelectedContents: () => string;
+  copyNodeContents: (id: string) => string;
+}
+
+export const useFileStore = create<FileStore>((set, get) => ({
+  files: [],
+  activeFileId: null,
+  selectedIds: [],
+  navigationHistory: [],
+  historyIndex: -1,
+
+  loadFiles: async () => {
+    const data = await getFiles();
+    // Sort all files by orderIndex initially
+    const sorted = [...data].sort((a, b) => a.orderIndex - b.orderIndex);
+    set({ files: sorted });
+  },
+
+  setActiveFile: (id, skipHistory = false) => {
+    const { navigationHistory, historyIndex } = get();
+    if (id && !skipHistory) {
+      const newHistory = navigationHistory.slice(0, historyIndex + 1);
+      // Only push if it's different from current
+      if (newHistory[newHistory.length - 1] !== id) {
+        newHistory.push(id);
+        // Limit history to 50 items
+        if (newHistory.length > 50) newHistory.shift();
+        set({ 
+          activeFileId: id, 
+          selectedIds: [id],
+          navigationHistory: newHistory,
+          historyIndex: newHistory.length - 1
+        });
+        return;
+      }
+    }
+    set({ activeFileId: id, selectedIds: id ? [id] : [] });
+  },
+
+  goBack: () => {
+    const { navigationHistory, historyIndex, setActiveFile } = get();
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      set({ historyIndex: newIndex });
+      setActiveFile(navigationHistory[newIndex], true);
+    }
+  },
+
+  goForward: () => {
+    const { navigationHistory, historyIndex, setActiveFile } = get();
+    if (historyIndex < navigationHistory.length - 1) {
+      const newIndex = historyIndex + 1;
+      set({ historyIndex: newIndex });
+      setActiveFile(navigationHistory[newIndex], true);
+    }
+  },
+
+  toggleSelect: (id, multi) => {
+    const { selectedIds } = get();
+    if (multi) {
+      set({ selectedIds: selectedIds.includes(id) 
+        ? selectedIds.filter(i => i !== id) 
+        : [...selectedIds, id] 
+      });
+    } else {
+      set({ selectedIds: [id], activeFileId: id });
+    }
+  },
+
+  clearSelection: () => set({ selectedIds: [] }),
+
+  createNode: async (name, type, parentId) => {
+    const { files } = get();
+    // Find max orderIndex in current parent
+    const peerIndices = files.filter(f => f.parentId === parentId).map(f => f.orderIndex);
+    const nextIndex = peerIndices.length > 0 ? Math.max(...peerIndices) + 1 : 0;
+
+    const newNode: FileNode = {
+      id: uuidv4(),
+      name,
+      type,
+      parentId,
+      content: type === 'file' ? '' : undefined,
+      orderIndex: nextIndex
+    };
+    await saveFile(newNode);
+    set(state => ({ files: [...state.files, newNode] }));
+    return newNode.id;
+  },
+
+  renameNode: async (id, newName) => {
+    const { files } = get();
+    const node = files.find(f => f.id === id);
+    if (!node) return;
+    const updated = { ...node, name: newName };
+    await saveFile(updated);
+    set(state => ({ files: state.files.map(f => f.id === id ? updated : f) }));
+  },
+
+  deleteNode: async (id) => {
+    const { files, activeFileId, selectedIds } = get();
+    
+    // Recursive delete logic
+    const toDelete = new Set<string>();
+    const findChildren = (nodeId: string) => {
+      toDelete.add(nodeId);
+      files.forEach(f => {
+        if (f.parentId === nodeId) findChildren(f.id);
+      });
+    };
+    findChildren(id);
+
+    // DB delete
+    for (const delId of toDelete) {
+      await deleteFile(delId);
+    }
+    
+    set(state => ({
+      files: state.files.filter(f => !toDelete.has(f.id)),
+      activeFileId: activeFileId && toDelete.has(activeFileId) ? null : state.activeFileId,
+      selectedIds: selectedIds.filter(sid => !toDelete.has(sid)),
+    }));
+  },
+
+  duplicateNode: async (id) => {
+    const { files, createNode } = get();
+    const node = files.find(f => f.id === id);
+    if (!node) return;
+    await createNode(`${node.name} (copy)`, node.type, node.parentId);
+  },
+
+  // Write queue for updating contents to prevent rapid IDB transaction crashes
+  updateFileContent: (() => {
+    let writeQueue = Promise.resolve();
+    return async (id: string, content: string) => {
+      writeQueue = writeQueue.then(async () => {
+        const { files } = get();
+        const node = files.find(f => f.id === id);
+        if (!node) return;
+        const updated = { ...node, content };
+        await saveFile(updated);
+        set(state => ({ files: state.files.map(f => f.id === id ? updated : f) }));
+      }).catch(console.error);
+      return writeQueue;
+    };
+  })(),
+
+  moveNode: async (id, newParentId) => {
+    const { files } = get();
+    const node = files.find(f => f.id === id);
+    if (!node) return;
+    
+    // Auto-calculate new index at end of target parent
+    const peerIndices = files.filter(f => f.parentId === newParentId).map(f => f.orderIndex);
+    const nextIndex = peerIndices.length > 0 ? Math.max(...peerIndices) + 1 : 0;
+
+    const updated = { ...node, parentId: newParentId, orderIndex: nextIndex };
+    await saveFile(updated);
+    set(state => ({ files: state.files.map(f => f.id === id ? updated : f) }));
+  },
+
+  reorderNodes: async (activeId, overId, newParentId) => {
+    const { files } = get();
+    const activeNode = files.find(f => f.id === activeId);
+    if (!activeNode) return;
+
+    const peerNodes = files.filter(f => f.parentId === newParentId).sort((a,b) => a.orderIndex - b.orderIndex);
+    const oldIndex = peerNodes.findIndex(n => n.id === activeId);
+    const newIndex = peerNodes.findIndex(n => n.id === overId);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      const newOrder = arrayMove(peerNodes, oldIndex, newIndex);
+      // Batch update all peer indices
+      const updates = newOrder.map((node, idx) => ({ ...node, orderIndex: idx, parentId: newParentId }));
+      
+      for (const updated of updates) {
+        await saveFile(updated);
+      }
+      
+      set(state => ({
+        files: state.files.map(f => {
+          const match = updates.find(u => u.id === f.id);
+          return match || f;
+        })
+      }));
+    } else if (activeNode.parentId !== newParentId) {
+      // Different parent move
+      await get().moveNode(activeId, newParentId);
+    }
+  },
+
+  copySelectedContents: () => {
+    const { files, selectedIds } = get();
+    const contents: string[] = [];
+
+    const addNodeContent = (id: string, depth = 0) => {
+      const node = files.find(f => f.id === id);
+      if (!node) return;
+
+      if (node.type === 'folder') {
+        files.filter(f => f.parentId === id)
+             .sort((a,b) => a.orderIndex - b.orderIndex)
+             .forEach(child => addNodeContent(child.id, depth + 1));
+      } else {
+        try {
+          const parsed = JSON.parse(node.content || '{}');
+          const extractText = (nodes: any[]): string => {
+            return nodes?.map(n => {
+              if (n.type === 'linebreak') return '\n';
+              if (n.children) return extractText(n.children) + (n.type === 'paragraph' ? '\n' : '');
+              return n.text || '';
+            }).join('') || '';
+          };
+          const plainText = extractText(parsed.root?.children || []);
+          const prefixed = plainText.split('\n').map(line => line.trim().length > 0 ? `— ${line.trim()}` : line).join('\n');
+          if (prefixed) contents.push(prefixed);
+        } catch {
+          if (node.content && node.content.trim().length > 0) {
+            const prefixed = node.content.split('\n').map(line => line.trim().length > 0 ? `— ${line.trim()}` : line).join('\n');
+            contents.push(prefixed);
+          }
+        }
+      }
+    };
+
+    selectedIds.forEach(id => addNodeContent(id));
+    return contents.join('\n');
+  },
+
+  copyNodeContents: (id) => {
+    const { files } = get();
+    const contents: string[] = [];
+
+    const addNodeContent = (nodeId: string, depth = 0) => {
+      const node = files.find(f => f.id === nodeId);
+      if (!node) return;
+
+      if (node.type === 'folder') {
+        files.filter(f => f.parentId === nodeId)
+             .sort((a,b) => a.orderIndex - b.orderIndex)
+             .forEach(child => addNodeContent(child.id, depth + 1));
+      } else {
+        try {
+          const parsed = JSON.parse(node.content || '{}');
+          const extractText = (nodes: any[]): string => {
+            return nodes?.map(n => {
+              if (n.type === 'linebreak') return '\n';
+              if (n.children) return extractText(n.children) + (n.type === 'paragraph' ? '\n' : '');
+              return n.text || '';
+            }).join('') || '';
+          };
+          const plainText = extractText(parsed.root?.children || []);
+          const prefixed = plainText.split('\n').map(line => line.trim().length > 0 ? `— ${line.trim()}` : line).join('\n');
+          if (prefixed) contents.push(prefixed);
+        } catch {
+          if (node.content && node.content.trim().length > 0) {
+            const prefixed = node.content.split('\n').map(line => line.trim().length > 0 ? `— ${line.trim()}` : line).join('\n');
+            contents.push(prefixed);
+          }
+        }
+      }
+    };
+
+    addNodeContent(id);
+    return contents.join('\n');
+  },
+
+  setNodeIcon: async (id, icon) => {
+    const { files } = get();
+    const node = files.find(f => f.id === id);
+    if (!node) return;
+    const updated = { ...node, icon };
+    await saveFile(updated);
+    set(state => ({ files: state.files.map(f => f.id === id ? updated : f) }));
+  },
+
+  setNodeColor: async (id, color) => {
+    const { files } = get();
+    const node = files.find(f => f.id === id);
+    if (!node) return;
+    const updated = { ...node, color };
+    await saveFile(updated);
+    set(state => ({ files: state.files.map(f => f.id === id ? updated : f) }));
+  },
+
+  setComment: async (fileId, lineId, comment) => {
+    const { files } = get();
+    const node = files.find(f => f.id === fileId);
+    if (!node) return;
+    
+    const newComments = { ...node.comments, [lineId]: comment };
+    if (!comment) delete newComments[lineId];
+    
+    const updated = { ...node, comments: newComments };
+    await saveFile(updated);
+    set(state => ({ files: state.files.map(f => f.id === fileId ? updated : f) }));
+  }
+}));

src/utils/exportUtils.ts

@@ -0,0 +1,59 @@
+import { FileNode } from '../lib/db';
+
+/**
+ * Extracts raw text from Lexical JSON payload if necessary,
+ * then prepends emdash '— ' to each non-empty text line.
+ */
+export function formatContentForCopy(content: string): string {
+  if (!content) return '';
+  
+  let rawText = content;
+  // If content is a Lexical JSON string
+  try {
+    const parsed = JSON.parse(content);
+    if (parsed.root && parsed.root.children) {
+      // Very basic extraction of paragraphs for copy buffer
+      // In reality, you'd use Lexical's @lexical/text plugin or simple tree iteration
+      rawText = parsed.root.children
+        .map((p: any) => p.children?.map((n: any) => n.text).join('') || '')
+        .join('\n');
+    }
+  } catch (e) {
+    // not JSON, fallback to rawText as is
+  }
+
+  const lines = rawText.split('\n');
+  const formattedLines = lines.map(line => {
+    if (line.trim().length > 0) {
+      return `— ${line}`;
+    }
+    return line; // Leave empty lines untouched
+  });
+
+  return formattedLines.join('\n');
+}
+
+export async function copyFilesContentToClipboard(files: FileNode[], idsToCopy: string[]) {
+  const contentArray: string[] = [];
+
+  const addContentRecursive = (nodeId: string) => {
+    const node = files.find(f => f.id === nodeId);
+    if (!node) return;
+
+    if (node.type === 'file' && node.content) {
+      contentArray.push(formatContentForCopy(node.content));
+    }
+
+    const children = files.filter(f => f.parentId === nodeId);
+    children.forEach(c => addContentRecursive(c.id));
+  };
+
+  for (const id of idsToCopy) {
+    addContentRecursive(id);
+  }
+
+  if (contentArray.length > 0) {
+    const combined = contentArray.join('\n\n');
+    await navigator.clipboard.writeText(combined);
+  }
+}

src/utils/iconUtils.ts

@@ -0,0 +1,6 @@
+export function getIconNames(): string[] {
+  return [
+    "FirstBracketCircleIcon", "FirstBracketSquareIcon", "FirstBracketIcon",
+    "Add01Icon", "FolderAddIcon", "FileAddIcon", "Settings01Icon", "Download01Icon", "GridIcon"
+  ];
+}

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Hybrid Editor',
+        short_name: 'HyEditor',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: '/vite.svg',
+            sizes: '192x192',
+            type: 'image/svg+xml'
+          }
+        ]
+      }
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})