kempo 2.0.1 → 2.1.0

package/dist/components/DirectoryViewer.js

@@ -0,0 +1 @@
+import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),selectDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[selectDirectoryClickHandler]=()=>this.selectDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():this.toggleOpen()},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e}),this[watchId]=!1}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.opened||this.root){for await(const e of this[handle].values())"directory"===e.kind&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}async selectDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}get shadowTemplate(){return`\n      <button\n        id="selectDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #selectDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);

package/dist/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";const getIconByName=t=>{const e=async e=>{try{const n=await fetch(`${e}/${t}.svg`);if(200===n.status)return await n.text()}catch(t){console.log(t)}return!1};return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{try{const n=await fetch(t);200===n.status&&e(await n.text())}catch(t){}return n()}))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);

package/dist/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Card:Card,Component:Component,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};

package/dist/utils/files.js

@@ -0,0 +1 @@
+export const getDir=async()=>{};let id,interval=1e3;const watchers=new Map,poll=()=>{};export const watchDir=async(t,c,e=1e3)=>{};export const unwatchDir=async(t,c)=>{};

package/dist/utils/watchDirectoryHandle.js

@@ -0,0 +1 @@
+const serializeDir=async a=>{const e=[];for await(const{kind:i,name:t}of a.values())e.push(`${i}:${t}`);return e.join("|")};export default async(a,e,i=1e3)=>{let t=await serializeDir(a);return setInterval((async()=>{const i=await serializeDir(a);i!=t&&(t=i,e())}),i)};

package/docs/components/directoryviewer.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Template - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
+  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">DirectoryViewer</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#attributes">Attributes</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>The directory viewer allows the user to select a directory from their local filesystem, and the component allows them to open/close subdirectories and select files.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <div class="row -mx">
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-directory-viewer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-directory-viewer</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 t-span-6 m-span-12 px">
+        <k-directory-viewer></k-directory-viewer>
+      </div>
+    </div>
+    
+
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./lazycomponent.html">LazyComponent</a></h6>
+    <h5>
+      <code>new DirectoryViewer()</code><br />
+    </h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="">class <code>LazyComponent</code></a></li>
+      <li><a href="">class <code>Component</code></a></li>
+      <li><a href="">class <code>Icon</code></a></li>
+      <li><a href="">util <code>element.js</code></a></li>
+      <li><a href="">util <code>watchDirectoryHandle.js</code></a></li>
+    </ul>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>async selectDirectory()<i>: undefined</i></code></h5>
+    <p>Opens the directory selection dialog. When a dialog is selected it will render the directory's contents.</p>
+    <h5><code>open()<i>: undefined</i></code></h5>
+    <p>Opens the directory, this should only be called on auto-generated sub-directories.</p>
+    <h5><code>close()<i>: undefined</i></code></h5>
+    <p>Closes the directory, this should only be called on auto-generated sub-directories.</p>
+    <h5><code>toggleOpen()<i>: undefined</i></code></h5>
+    <p>Opens/Closes the directory, this should only be called on auto-generated sub-directories.</p>
+    <h5><code>clearDirectoryHandle()<i>: undefined</i></code></h5>
+    <p>Clears the handle that represents the user selected directory, allowing the user to choose a new directory.</p>
+    
+  </main>
+  <script type="module" src="../kempo/components/Import.js"></script>
+  <script type="module" src="../kempo/components/DirectoryViewer.js"></script>
+</body>
+</html>

package/docs/kempo/components/DirectoryViewer.js

@@ -0,0 +1 @@
+import LazyComponent from"./LazyComponent.js";import Component from"./Component.js";import"./Icon.js";import{onEvent,offEvent}from"../utils/element.js";import watchDirectoryHandle from"../utils/watchDirectoryHandle.js";const handle=Symbol(),selectDirectoryClickHandler=Symbol(),openToggleClickHandler=Symbol(),fileSelectedHandler=Symbol(),watchId=Symbol(),changeCallback=Symbol();export default class DirectoryViewer extends LazyComponent{constructor(e=!1){super(),this[handle]=e,this[selectDirectoryClickHandler]=()=>this.selectDirectory(),this[openToggleClickHandler]=()=>{this.root?this.clearDirectoryHandle():this.toggleOpen()},this[changeCallback]=()=>{this.updateContents()},this.slot="content",this.registerAttributes({root:!e,hasHandle:!!e,opened:!e}),this[watchId]=!1}async render(e){return!!await super.render(e)&&(onEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),onEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler]),onEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler]),this.renderDirectory(),!0)}async renderDirectory(){this[handle]&&this.rendered&&(this.innerHTML=this[handle].name,this.renderContents())}async renderContents(){if(this.querySelectorAll('[slot="content"]').forEach((e=>e.remove())),this.opened||this.root){for await(const e of this[handle].values())"directory"===e.kind&&this.appendChild(new DirectoryViewer(e,!1));for await(const e of this[handle].values())"file"===e.kind&&this.appendChild(new File(e));this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot,"fileselected",this[fileSelectedHandler]),offEvent(this.shadowRoot.getElementById("selectDirectory"),"click",this[selectDirectoryClickHandler]),offEvent(this.shadowRoot.getElementById("openToggle"),"click",this[openToggleClickHandler])}attributeChangedCallback(e,t,n){"opened"===e&&t!==n&&(!n&&this.root?this.opened=!0:this.renderContents())}async selectDirectory(){window.showDirectoryPicker&&(this[handle]=await window.showDirectoryPicker(),this[handle]&&(this.hasHandle=!0,this.renderDirectory()))}open(){this.opened=!0}close(){this.root||(this.opened=!1)}toggleOpen(){this.root||(this.opened=!this.opened)}clearDirectoryHandle(){this[handle]=!1,this.hasHandle=!1,this.innerHTML=""}async updateContents(){if(this.opened||this.root){const e=new Set([...this.querySelectorAll("k-directory-viewer")]);for await(const t of this[handle].values())if("directory"===t.kind){const n=[...e].find((e=>t.isSameEntry(e[handle])&&t.name===e[handle].name));n?(this.appendChild(n),e.delete(n)):this.appendChild(new DirectoryViewer(t,!1))}e.forEach((e=>e.remove()));const t=new Set([...this.querySelectorAll("k-directory-viewer-file")]);for await(const e of this[handle].values())if("file"===e.kind){const n=[...t].find((t=>e.isSameEntry(t[handle])&&e.name===t[handle].name));n?(this.appendChild(n),t.delete(n)):this.appendChild(new File(e))}t.forEach((e=>e.remove())),this[watchId]||(this[watchId]=watchDirectoryHandle(this[handle],this[changeCallback]))}else this[watchId]&&(clearInterval(this[watchId]),this[watchId]=!1)}get shadowTemplate(){return`\n      <button\n        id="selectDirectory"\n      >\n        <slot name="selectButton">\n          <k-icon name="folder-create"></k-icon> Select Directory\n        </slot>\n      </button>\n      <button\n        id="openToggle"\n        class="no-btn"\n      >\n        <k-icon name="folder" id="folder-closed"></k-icon>\n        <k-icon name="folder-open" id="folder-opened"></k-icon>\n        <k-icon name="folder-clear" id="folder-clear"></k-icon>\n        ${super.shadowTemplate}\n      </button>\n      <div id="tree">\n        <slot name="content"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host([has-handle]) #selectDirectory,\n      :host([opened]) #folder-closed,\n      :host(:not([opened])) #folder-opened,\n      :host(:not([has-handle])) #folder-closed,\n      :host(:not([has-handle])) #folder-opened,\n      :host(:not([has-handle])) #folder-clear,\n      :host(:not([root])) #folder-clear,\n      :host([root]) #folder-opened {\n        display: none;\n      }\n      #openToggle {\n        display: block;\n        width: 100%;\n        flex: 1 1 auto;\n      }\n      #tree {\n        padding-left: var(--spacer);\n      }\n      #wrapper {\n        display: flex;\n      }\n      #clearSelectedDirectory {\n        flex: none;\n      }\n    `}static observedAttributes=[...LazyComponent.observedAttributes,"opened"];static watchInterval=1e3}window.customElements.define("k-directory-viewer",DirectoryViewer);const selectFileClickHandler=Symbol();export class File extends Component{constructor(e=!1){super(),this[handle]=e,this[selectFileClickHandler]=()=>this.select(),this.slot="content",this.registerAttribute("selected",!1)}async render(e){if(await super.render(e)){if(this[handle]){this.innerHTML=this[handle].name;const e=this[handle].name.split(".").pop(),t=this.shadowRoot.getElementById("extIcon");["png","gif","jpeg","jpg","tif","webp"].includes(e)?t.name="image":["txt","rtf","js","css","html"].includes(e)?t.name="file-text":t.name="file",onEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("selectFile"),"click",this[selectFileClickHandler])}select(){const e=this.closest("k-directory-viewer[root]").querySelector("k-directory-viewer-file[selected]");e!==this&&(e&&(e.selected=!1),this.selected=!0,this.dispatchEvent(new CustomEvent("fileselected",{detail:{fileHandle:this[handle],fileComponent:this},bubbles:!0,composed:!0})))}get shadowTemplate(){return`\n      <button\n        id="selectFile"\n        class="no-btn"\n      >\n        <k-icon\n          id="extIcon"\n          name=""\n        ></k-icon>\n        ${super.shadowTemplate}\n    </button>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n      }\n      :host([selected]) {\n        background-color: var(--c_primary);\n        color: var(--tc_on_primary);\n        border-radius: var(--raidus);\n      }\n      #selectFile {\n        width: 100%;\n      }\n    `}}window.customElements.define("k-directory-viewer-file",File);

package/docs/kempo/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";const getIconByName=t=>{const e=async e=>{try{const n=await fetch(`${e}/${t}.svg`);if(200===n.status)return await n.text()}catch(t){console.log(t)}return!1};return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{try{const n=await fetch(t);200===n.status&&e(await n.text())}catch(t){}return n()}))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);

package/docs/kempo/index.js

@@ -1 +1 @@
-import Card from"./components/Card.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";export default{Card:Card,Component:Component,Dialog:Dialog,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames};
+import Card from"./components/Card.js";import Component from"./components/Component.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Card:Card,Component:Component,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};

package/docs/kempo/utils/files.js

@@ -0,0 +1 @@
+export const getDir=async()=>{};let id,interval=1e3;const watchers=new Map,poll=()=>{};export const watchDir=async(t,c,e=1e3)=>{};export const unwatchDir=async(t,c)=>{};

package/docs/kempo/utils/watchDirectoryHandle.js

@@ -0,0 +1 @@
+const serializeDir=async a=>{const e=[];for await(const{kind:i,name:t}of a.values())e.push(`${i}:${t}`);return e.join("|")};export default async(a,e,i=1e3)=>{let t=await serializeDir(a);return setInterval((async()=>{const i=await serializeDir(a);i!=t&&(t=i,e())}),i)};

package/docs/nav-1.inc.html

@@ -40,9 +40,9 @@
       <a href="../components/reactivelazycomponent.html">ReactiveLazyComponent</a>
       <a href="../components/focuscapture.html">FocusCapture</a>
       <hr />
-      <a href="../components/codeeditor.html">Code Editor</a>
       <a href="../components/card.html">Card</a>
       <a href="../components/dialog.html">Dialog</a>
+      <a href="../components/directory-viewer.html">Directory Viewer</a>
       <a href="../components/icon.html">Icon</a>
       <a href="../components/import.html">Import</a>
       <a href="../components/resize.html">Resize</a>
@@ -52,7 +52,6 @@
       <a href="../components/table.html">Table</a>
       <a href="../components/tabs.html">Tabs</a>
       <a href="../components/toggle.html">Toggle</a>
-      <a href="../components/websnippeteditor.html">Web Snippet Editor</a>
     </div>
   </menu>
 </k-side-menu>

package/docs/nav.inc.html

@@ -43,6 +43,7 @@
       <a href="./components/codeeditor.html">Code Editor</a>
       <a href="./components/card.html">Card</a>
       <a href="./components/dialog.html">Dialog</a>
+      <a href="./components/directory-viewer.html">Directory Viewer</a>
       <a href="./components/icon.html">Icon</a>
       <a href="./components/import.html">Import</a>
       <a href="./components/resize.html">Resize</a>

package/docs/search.json

@@ -1,4 +1,35 @@
 {
+  "/components/component.html": {
+    "name": "Components > Component",
+    "terms": [
+      "component",
+      "base",
+      "root",
+      "framework",
+      "parent"
+    ]
+  },
+  "/components/lazycomponent.html": {
+    "name": "Components > LazyComponent",
+    "terms": [
+      "lazy",
+      "component",
+      "base",
+      "root",
+      "framework",
+      "parent"
+    ]
+  },
+  "/components/directoryviewer.html": {
+    "name": "Components > DirectoryViewer",
+    "terms": [
+      "directory",
+      "viewer", 
+      "pwa",
+      "folder",
+      "file"
+    ]
+  },
   "/components/resize.html": {
     "name": "Components > Resize",
     "terms": [

package/icons/file-text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-200h560v-367L567-760H200v560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h400l240 240v400q0 33-23.5 56.5T760-120H200Zm80-160h400v-80H280v80Zm0-160h400v-80H280v80Zm0-160h280v-80H280v80Zm-80 400v-560 560Z"/></svg>

package/icons/file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>

package/icons/folder-clear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-280q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm-46-248q11-5 22-8.5t24-3.5q42 0 71 29t29 71q0 13-3.5 24t-8.5 22L434-528Zm46 188q-42 0-71-29t-29-71q0-13 3.5-24t8.5-22l134 134q-11 5-22 8.5t-24 3.5ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>

package/icons/folder-create.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M560-320h80v-80h80v-80h-80v-80h-80v80h-80v80h80v80ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>

package/icons/folder-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"/></svg>

package/icons/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>

package/icons/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/scripts/docs.js

@@ -21,8 +21,6 @@ const {
   src = false
 } = options;
 
-console.log(port, build, src);
-
 if(build){
   runChildNodeProcess(join(__dirname, 'build.js'));
 }
@@ -32,6 +30,15 @@ const app = express();
 if(src){
   app.use('/kempo', express.static('src'));
   app.use('/icons', express.static('icons'));
+  app.get('/kempo/kempo-styles.css', (req, res) => {
+    res.set('Cache-Control', 'no-cache');
+    res.sendFile(join(__dirname, '../src/kempo-styles.css'));
+  })
+} else {
+  app.get('/kempo/kempo-styles.css', (req, res) => {
+    res.set('Cache-Control', 'private');
+    res.sendFile(join(__dirname, '../docs/kempo/kempo-styles.css'));
+  });
 }
 app.use(express.static('docs'));
 

package/src/components/DirectoryViewer.js

@@ -0,0 +1,314 @@
+import LazyComponent from './LazyComponent.js';
+import Component from './Component.js';
+import './Icon.js';
+import {
+  onEvent,
+  offEvent
+} from '../utils/element.js';
+import watchDirectoryHandle from '../utils/watchDirectoryHandle.js';
+
+const handle = Symbol(),
+      selectDirectoryClickHandler = Symbol(),
+      openToggleClickHandler = Symbol(),
+      fileSelectedHandler = Symbol(),
+      watchId = Symbol(),
+      changeCallback = Symbol();
+export default class DirectoryViewer extends LazyComponent {
+  constructor(_handle = false){
+    super();
+    
+    /* Private Members */
+    this[handle] = _handle;
+
+    /* Private Methods */
+    this[selectDirectoryClickHandler] = () => this.selectDirectory();
+    this[openToggleClickHandler] = () => {
+      if(!this.root){
+        this.toggleOpen();
+      } else {
+        this.clearDirectoryHandle();
+      }
+    }
+    this[changeCallback] = () => {
+      this.updateContents();
+    }
+
+    /* Init */
+    this.slot = 'content';
+    this.registerAttributes({
+      root: !_handle,
+      hasHandle: !!_handle,
+      opened: !_handle
+    });
+    this[watchId] = false;
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force){
+    if(await super.render(force)){
+      onEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
+      onEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
+      onEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
+      this.renderDirectory();
+      return true;
+    }
+    return false;
+  }
+  async renderDirectory(){
+    if(!this[handle] || !this.rendered) return;
+    this.innerHTML = this[handle].name;
+    this.renderContents();
+  }
+  async renderContents(){
+    this.querySelectorAll('[slot="content"]').forEach(e=>e.remove());
+    if(this.opened || this.root){
+      for await(const entry of this[handle].values()){
+        if(entry.kind === 'directory'){
+          this.appendChild(new DirectoryViewer(entry, false));
+        }
+      }
+      for await(const entry of this[handle].values()){
+        if(entry.kind === 'file'){
+          this.appendChild(new File(entry));
+        }
+      }
+      if(!this[watchId]) this[watchId] = watchDirectoryHandle(this[handle], this[changeCallback]);
+    } else {
+      if(this[watchId]){
+        clearInterval(this[watchId]);
+        this[watchId] = false;
+      }
+    }
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot, 'fileselected', this[fileSelectedHandler]);
+    offEvent(this.shadowRoot.getElementById('selectDirectory'), 'click', this[selectDirectoryClickHandler]);
+    offEvent(this.shadowRoot.getElementById('openToggle'), 'click', this[openToggleClickHandler]);
+  }
+  attributeChangedCallback(n, oV, nV){
+    if(n === 'opened' && oV !== nV){
+      if(!nV && this.root){
+        this.opened = true; // root must be opened
+      } else {
+        this.renderContents();
+      }
+    }
+  }
+
+
+  /* Public Methods */
+  async selectDirectory(){
+    if(window.showDirectoryPicker){
+      this[handle] = await window.showDirectoryPicker();
+      if(this[handle]){
+        this.hasHandle = true;
+        this.renderDirectory();
+      }
+    }
+  }
+  open(){
+    this.opened = true;
+  }
+  close(){
+    if(!this.root) this.opened = false;
+  }
+  toggleOpen(){
+    if(!this.root) this.opened = !this.opened;
+  }
+  clearDirectoryHandle(){
+    this[handle] = false;
+    this.hasHandle = false;
+    this.innerHTML = '';
+  }
+  async updateContents(){
+    if(this.opened || this.root){
+      const existingSubDirSet = new Set([...this.querySelectorAll('k-directory-viewer')]);
+      for await(const entry of this[handle].values()){
+        if(entry.kind === 'directory'){
+          const existingSubDirsArray = [...existingSubDirSet];
+          const $existing = existingSubDirsArray.find(($e)=>entry.isSameEntry($e[handle])&&entry.name===$e[handle].name);
+          if($existing){
+            this.appendChild($existing)
+            existingSubDirSet.delete($existing);
+          } else this.appendChild(new DirectoryViewer(entry, false));
+        }
+      }
+      existingSubDirSet.forEach($e=>$e.remove()); // remove unused dirs
+
+      const existingFileSet = new Set([...this.querySelectorAll('k-directory-viewer-file')]);
+      for await(const entry of this[handle].values()){
+        if(entry.kind === 'file'){
+          const existingFileArray = [...existingFileSet];
+          const $existing = existingFileArray.find(($e)=>entry.isSameEntry($e[handle])&&entry.name===$e[handle].name);
+          if($existing){
+            this.appendChild($existing)
+            existingFileSet.delete($existing);
+          } else this.appendChild(new File(entry));
+        }
+      }
+      existingFileSet.forEach($e=>$e.remove()); // remove unused files
+      if(!this[watchId]) this[watchId] = watchDirectoryHandle(this[handle], this[changeCallback]);
+    } else {
+      if(this[watchId]){
+        clearInterval(this[watchId]);
+        this[watchId] = false;
+      }
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button
+        id="selectDirectory"
+      >
+        <slot name="selectButton">
+          <k-icon name="folder-create"></k-icon> Select Directory
+        </slot>
+      </button>
+      <button
+        id="openToggle"
+        class="no-btn"
+      >
+        <k-icon name="folder" id="folder-closed"></k-icon>
+        <k-icon name="folder-open" id="folder-opened"></k-icon>
+        <k-icon name="folder-clear" id="folder-clear"></k-icon>
+        ${super.shadowTemplate}
+      </button>
+      <div id="tree">
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host([has-handle]) #selectDirectory,
+      :host([opened]) #folder-closed,
+      :host(:not([opened])) #folder-opened,
+      :host(:not([has-handle])) #folder-closed,
+      :host(:not([has-handle])) #folder-opened,
+      :host(:not([has-handle])) #folder-clear,
+      :host(:not([root])) #folder-clear,
+      :host([root]) #folder-opened {
+        display: none;
+      }
+      #openToggle {
+        display: block;
+        width: 100%;
+        flex: 1 1 auto;
+      }
+      #tree {
+        padding-left: var(--spacer);
+      }
+      #wrapper {
+        display: flex;
+      }
+      #clearSelectedDirectory {
+        flex: none;
+      }
+    `;
+  }
+
+  static observedAttributes = [
+    ...LazyComponent.observedAttributes,
+    'opened'
+  ];
+
+  static watchInterval = 1000;
+}
+window.customElements.define('k-directory-viewer', DirectoryViewer);
+
+const selectFileClickHandler = Symbol();
+export class File extends Component {
+  constructor(_handle = false){
+    super();
+
+    /* Private Members */
+    this[handle] = _handle;
+
+    /* Private Methods */
+    this[selectFileClickHandler] = () => this.select();
+
+    /* Init */
+    this.slot = 'content';
+    this.registerAttribute('selected', false);
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force){
+    if(await super.render(force)){
+      if(this[handle]){
+        this.innerHTML = this[handle].name;
+        const ext = this[handle].name.split('.').pop();
+        const $extIcon = this.shadowRoot.getElementById('extIcon');
+        if(['png', 'gif', 'jpeg', 'jpg', 'tif', 'webp'].includes(ext)){
+          $extIcon.name = 'image';
+        } else if(['txt', 'rtf', 'js', 'css', 'html',].includes(ext)){
+          $extIcon.name = 'file-text';
+        } else {
+          $extIcon.name = 'file';
+        }
+        onEvent(this.shadowRoot.getElementById('selectFile'), 'click', this[selectFileClickHandler]);
+      }
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('selectFile'), 'click', this[selectFileClickHandler]);
+  }
+
+  /* Public Methods */
+  select(){
+    const $currentSelection = this.closest('k-directory-viewer[root]').querySelector('k-directory-viewer-file[selected]');
+    if($currentSelection === this) return;
+    if($currentSelection) $currentSelection.selected = false;
+    this.selected = true;
+    this.dispatchEvent(new CustomEvent('fileselected', {
+      detail: {
+        fileHandle: this[handle],
+        fileComponent: this
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button
+        id="selectFile"
+        class="no-btn"
+      >
+        <k-icon
+          id="extIcon"
+          name=""
+        ></k-icon>
+        ${super.shadowTemplate}
+    </button>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: block;
+        width: 100%;
+      }
+      :host([selected]) {
+        background-color: var(--c_primary);
+        color: var(--tc_on_primary);
+        border-radius: var(--raidus);
+      }
+      #selectFile {
+        width: 100%;
+      }
+    `
+  }
+}
+window.customElements.define('k-directory-viewer-file', File);

package/src/components/Icon.js

@@ -1,15 +1,21 @@
 import Component from './Component.js';
 
+const cache = {};
+
+const getIconByPath = async (path) => {
+  if(!cache[path]){
+    cache[path] = new Promise(async (resolve, reject)=>{
+      try {
+        const response = await fetch(path);
+        if(response.status === 200) resolve(await (response).text());
+      } catch(e){      }
+      return reject();
+    });
+  } 
+  return await cache[path];
+}
 const getIconByName = (name) => {
-  const tryDir = async (dir) => {
-    try {
-      const response = await fetch(`${dir}/${name}.svg`);
-      if(response.status === 200) return await (response).text();
-    } catch(e){
-      console.log(e);
-    }
-    return false;
-  }
+  const tryDir = async (dir) => getIconByPath(`${dir}/${name}.svg`);
 
   return new Promise( async (resolve, reject) => {
     let svg;
@@ -40,9 +46,9 @@ export default class Icon extends Component {
   async render(force){
     if(await super.render(force)){
       if(this.src){
-        const response = await fetch(this.src);
-        if(response.status === 200){
-          this.innerHTML = await (response).text();
+        const svg = await getIconByPath(this.src);
+        if(svg){
+          this.innerHTML = svg;
           this.fixSVG();
         } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
       } else if(this.name){

package/src/utils/files.js

@@ -0,0 +1,15 @@
+export const getDir = async () => {
+
+}
+let id,
+    interval = 1000;
+const watchers = new Map();
+const poll = () => {
+
+};
+export const watchDir = async (dirHandle, callback, interval = 1000) => {
+  
+}
+export const unwatchDir = async (dirHandle, callback) => {
+
+}

package/src/utils/watchDirectoryHandle.js

@@ -0,0 +1,18 @@
+const serializeDir = async (dirHandle) => {
+  const entrySerializations = [];
+  for await(const {kind,name} of dirHandle.values()){
+    entrySerializations.push(`${kind}:${name}`);
+  }
+  return entrySerializations.join('|');
+}
+
+export default async (dirHandle, callback, timer = 1000) => {
+  let lastSerialization = await serializeDir(dirHandle);
+  return setInterval(async () => {
+    const newSerialization = await serializeDir(dirHandle);
+    if(newSerialization != lastSerialization){
+      lastSerialization = newSerialization;
+      callback();
+    }
+  }, timer);
+}