arcane-os 0.1.0-dev.5

package/runtime/arcane/components/file-manager.html

@@ -0,0 +1,1715 @@
+<style>
+    :host{
+        display:block;
+        overflow-y:auto;
+        height:100%;
+    }
+
+    .file-manager{
+        min-height:100%;
+    }
+
+    .directory{
+        list-style:none;
+        padding:1em;
+        margin:0;
+        max-height: 1em;
+        overflow: hidden;
+        transition: max-height 250ms ease-out;
+    }
+
+    .directory.open{
+        max-height:none;
+        overflow:visible;
+    }
+
+    .file{
+        display:flex;
+        align-items:flex-start;
+        cursor:pointer;
+        line-height:1;
+    }
+    
+    img.icon{
+        filter:var(--file-icon-filter,none);
+        transition:filter 180ms,transform 180ms;
+    }
+
+    img.action-icon{
+        filter:var(--icon-filter,none);
+    }
+
+    .directory .icon{
+        width:2em;
+        height:2em;
+        margin-right:0.5em;
+    }
+
+    .file span{
+        line-height:2.5em;
+    }
+
+    .file-count{
+        margin-left:auto;
+        opacity:.6;
+    }
+
+    .empty-directory{
+        list-style:none;
+        opacity:.6;
+        padding:.75em 2.5em;
+    }
+
+    :host([data-layout="grid"]) .file-manager{
+        display:grid;
+        grid-template-columns:repeat(auto-fit,minmax(12em,1fr));
+        gap:1em;
+        min-height:0;
+    }
+
+    :host([data-layout="grid"]) .directory{
+        background:var(--background);
+        border:1px solid var(--border-color);
+        border-radius:.5em;
+        box-shadow:0 .15em .45em var(--shadow-color);
+        max-height:none;
+        padding:1em;
+    }
+
+    :host([data-layout="grid"]) .directory>.file:not(.folder),
+    :host([data-layout="grid"]) .empty-directory{
+        display:none;
+    }
+
+    :host([data-layout="grid"]) .folder{
+        align-items:center;
+        flex-direction:column;
+        text-align:center;
+    }
+
+    :host([data-layout="grid"]) .folder .icon{
+        height:4em;
+        margin:0;
+        width:4em;
+    }
+
+    :host([data-layout="grid"]) .folder:hover .icon{
+        filter:var(--file-icon-filter,none) drop-shadow(0 .2em .25em var(--shadow-color));
+        transform:translateY(-.12em);
+    }
+
+    :host([data-layout="grid"]) .folder .file-count{
+        line-height:1.5em;
+        margin:0;
+    }
+
+    :host([data-layout="files"]) .directory{
+        max-height:none;
+        padding:0;
+    }
+
+    :host([data-layout="files"]) .folder{
+        display:none;
+    }
+
+    .directory-file-list{
+        list-style:none;
+        margin:1em 0 0;
+        padding:0;
+    }
+
+    .directory-actions,
+    .file-view-actions{
+        display:flex;
+        justify-content:flex-end;
+    }
+
+    .file-view-delete{
+        align-items:center;
+        display:flex;
+        gap:.5em;
+    }
+
+    .file-view-delete img{
+        height:1.25em;
+        width:1.25em;
+    }
+
+    .file-row,
+    .modal .file-row{
+        align-items:center;
+        background:transparent;
+        border:0;
+        border-radius:0;
+        box-sizing:border-box;
+        box-shadow:none;
+        color:var(--text-color);
+        display:flex;
+        line-height:1;
+        margin:0;
+        overflow-wrap:anywhere;
+        padding:0;
+        text-align:left;
+    }
+
+    .file-row-open,
+    .modal .file-row-open{
+        align-items:flex-start;
+        background:transparent;
+        border:0;
+        border-radius:0;
+        box-shadow:none;
+        color:var(--text-color);
+        display:flex;
+        flex:1 1 auto;
+        gap:.5em;
+        margin:0;
+        min-width:0;
+        padding:0;
+        text-align:left;
+    }
+
+    .file-row-open:hover{
+        background:var(--secondary-color);
+    }
+
+    .file-delete,
+    .modal .file-delete{
+        background:transparent;
+        border:0;
+        box-shadow:none;
+        flex:0 0 auto;
+        margin:0;
+        opacity:.55;
+        padding:.35em;
+    }
+
+    .file-delete:hover{
+        opacity:1;
+    }
+
+    .file-delete img{
+        display:block;
+        height:1.25em;
+        width:1.25em;
+    }
+
+    :host([data-layout="files"]) .file-row,
+    [data-layout="files"] .file-row{
+        border-bottom:1px solid var(--border-color);
+        padding:.5em;
+        width:100%;
+    }
+
+    .file-row .file-icon{
+        flex:0 0 2em;
+        height:2em;
+        width:2em;
+    }
+
+    .file-row .file-details{
+        display:flex;
+        flex-direction:column;
+        min-width:0;
+    }
+
+    .file-row .file-name{
+        display:block;
+        line-height:2.5em;
+        overflow-wrap:anywhere;
+    }
+
+    :host([data-layout="files"]) .file-row .file-name,
+    [data-layout="files"] .file-row .file-name{
+        line-height:1.4em;
+    }
+
+    .file-row .file-metadata{
+        display:block;
+        font-size:.8em;
+        line-height:1.4em;
+        margin-top:.25em;
+        opacity:.65;
+    }
+
+    :host([data-layout="tree"]){
+        overflow:auto;
+    }
+
+    :host([data-layout="tree"]) .file-manager{
+        box-sizing:border-box;
+        min-height:0;
+        padding:.25em;
+    }
+
+    .tree-root,
+    .tree-group{
+        list-style:none;
+        margin:0;
+        padding:0;
+    }
+
+    .tree-group{
+        margin-left:.7em;
+        padding-left:.7em;
+        border-left:1px solid var(--border-color);
+    }
+
+    .tree-item{
+        position:relative;
+        margin:.08em 0;
+        border-radius:.35em;
+        outline:none;
+    }
+
+    .tree-item-row{
+        box-sizing:border-box;
+        min-height:2em;
+        display:grid;
+        grid-template-columns:.8em 1.35em minmax(0,1fr) auto;
+        align-items:center;
+        gap:.35em;
+        padding:.3em .4em;
+        border:1px solid transparent;
+        border-radius:inherit;
+        color:var(--text-color);
+        cursor:pointer;
+    }
+
+    .tree-item:hover>.tree-item-row,
+    .tree-item:focus>.tree-item-row{
+        border-color:var(--border-color);
+        background:var(--secondary-color);
+    }
+
+    .tree-item[aria-selected="true"]>.tree-item-row{
+        border-color:var(--focus-color,var(--accent-color));
+        background:color-mix(in srgb,var(--secondary-color) 70%,transparent);
+    }
+
+    .tree-item[data-status="needs-review"]>.tree-item-row{
+        box-shadow:inset .2em 0 var(--danger-color);
+    }
+
+    .tree-disclosure{
+        width:.7em;
+        color:var(--platinum,var(--text-color));
+        text-align:center;
+        transition:transform 120ms ease-out;
+    }
+
+    .tree-item[aria-expanded="true"]>.tree-item-row .tree-disclosure{
+        transform:rotate(90deg);
+    }
+
+    .tree-item[data-kind="file"]>.tree-item-row .tree-disclosure{
+        visibility:hidden;
+    }
+
+    .tree-entry-icon{
+        width:1.25em;
+        height:1.25em;
+        filter:var(--file-icon-filter,none);
+    }
+
+    .tree-entry-name{
+        min-width:0;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+    }
+
+    .tree-file-count{
+        color:var(--platinum,var(--text-color));
+        font-size:.75em;
+        white-space:nowrap;
+    }
+
+    .tree-empty,
+    .tree-error{
+        margin:.75em;
+        color:var(--platinum,var(--text-color));
+    }
+
+    .tree-error{
+        color:var(--danger-color);
+    }
+
+</style>
+
+<div class="file-manager">
+    
+</div>
+
+<input id="fileUpload" type="file" hidden multiple>
+
+<html-import id="directoryModal" class="modal" href="./arcane/components/modal.html?v=13"></html-import>
+<html-import id="fileModal" class="modal" href="./arcane/components/modal.html?v=13"></html-import>
+<html-import id="deleteModal" class="modal" href="./arcane/components/modal.html?v=13"></html-import>
+
+<script type="module">
+    import('../modules/DBOPFS.js');
+    //importing Document at the end of the file to avoid blocking;
+
+    const host=this;
+    const {default:waitForComponent}=await import('../modules/WaitForComponent.js');
+
+    const fileManager=host.shadowRoot.querySelector('.file-manager');
+    const componentStyles=host.shadowRoot.querySelector('style');
+    const fileUpload=host.shadowRoot.querySelector('#fileUpload');
+    const directoryModal=host.shadowRoot.querySelector('#directoryModal');
+    const fileModal=host.shadowRoot.querySelector('#fileModal');
+    const deleteModal=host.shadowRoot.querySelector('#deleteModal');
+    const layout=host.dataset.layout||'';
+    const openMode=host.dataset.openMode||(
+        host.hasAttribute('data-event-only-open')?'event':''
+    );
+    const dirs=host.dataset.dirs?.split(',').map(
+        directory=>directory.trim()
+    ).filter(Boolean);
+    const fileEntityPromise=import('../entities/File.js');
+
+    let activeFileURL='';
+    let uploadDirectory='';
+    let initialized=false;
+    let provider=null;
+    let filter=null;
+    let selectedPath='';
+    let treeItems=new Map();
+    let treeLoadSequence=0;
+
+    host.ready=false;
+    host.loadAll=loadAll;
+    host.setProvider=setProvider;
+    host.setFilter=setFilter;
+    host.select=select;
+    host.clearSelection=clearSelection;
+
+    Object.defineProperty(
+        host,
+        'selectedPath',
+        {
+            configurable:true,
+            enumerable:true,
+            get:()=>selectedPath
+        }
+    );
+
+    Object.defineProperty(
+        host,
+        'provider',
+        {
+            configurable:true,
+            enumerable:true,
+            get:()=>provider
+        }
+    );
+
+    function configuredHiddenPrefixes(){
+        if(host.hasAttribute('data-show-hidden')){
+            return [];
+        }
+
+        const configured=host.dataset.hiddenPrefixes;
+
+        if(configured!==undefined){
+            return configured.split(',').map(value=>value.trim()).filter(Boolean);
+        }
+
+        return [];
+    }
+
+    function isVisibleEntry(entry={}){
+        const normalized=typeof entry==='string'
+            ?{name:entry,path:entry,kind:'file'}
+            :entry;
+        const activeFilter=filter||provider?.filter;
+
+        if(typeof activeFilter==='function'){
+            return activeFilter(normalized)!==false;
+        }
+
+        const name=String(normalized.name||'');
+        return !configuredHiddenPrefixes().some(prefix=>name.startsWith(prefix));
+    }
+
+    function isVisibleFileName(fileName=''){
+        return isVisibleEntry({name:fileName,path:fileName,kind:'file'});
+    }
+
+    window.addEventListener(
+        'dbopfs-ready',
+        init,
+        {once:true}
+    );
+
+    if(window.dbopfs?.ready){
+        init();
+    }
+
+    fileUpload.addEventListener(
+        'change',
+        ()=>uploadFiles().catch(
+            error=>console.error('Unable to upload files:',error)
+        )
+    );
+
+    fileManager.addEventListener(
+        'click', 
+        async function(e){
+            const folder=e.target.closest('.folder');
+
+            if(folder){
+                const directoryElement=folder.closest('.directory');
+                if(!directoryElement) return;
+
+                if(layout==='grid'){
+                    openDirectory(directoryElement.dataset.directory).catch(
+                        error=>console.error('Unable to open directory:',error)
+                    );
+                    return;
+                }
+
+                directoryElement.classList.toggle('open');
+                return;
+            }
+
+        }
+    );
+
+    fileManager.addEventListener('keydown',onTreeKeydown);
+
+    function emit(name,detail={},cancelable=false){
+        return host.dispatchEvent(
+            new CustomEvent(
+                name,
+                {
+                    bubbles:true,
+                    cancelable:cancelable,
+                    composed:true,
+                    detail:detail
+                }
+            )
+        );
+    }
+
+    function emitAction(action,entry={},detail={},cancelable=false){
+        return emit(
+            'file-manager-action',
+            {
+                action:action,
+                path:entry.path||'',
+                entry:entry,
+                ...detail
+            },
+            cancelable
+        );
+    }
+
+    async function setProvider(nextProvider=null){
+        if(nextProvider!==null&&typeof nextProvider?.list!=='function'){
+            throw new TypeError('File manager providers must expose list(path).');
+        }
+
+        provider=nextProvider;
+
+        if(layout==='tree'){
+            if(!initialized){
+                await init();
+            }else{
+                await loadAll();
+            }
+        }
+
+        return provider;
+    }
+
+    async function setFilter(nextFilter=null){
+        if(nextFilter!==null&&typeof nextFilter!=='function'){
+            throw new TypeError('File manager filters must be functions or null.');
+        }
+
+        filter=nextFilter;
+
+        if(initialized){
+            await loadAll();
+        }
+
+        return filter;
+    }
+
+    function normalizeProviderPath(path=''){
+        return String(path||'')
+            .replaceAll('\\','/')
+            .split('/')
+            .filter(segment=>segment&&segment!=='.')
+            .join('/');
+    }
+
+    function joinProviderPath(parentPath='',name=''){
+        return [normalizeProviderPath(parentPath),normalizeProviderPath(name)]
+            .filter(Boolean)
+            .join('/');
+    }
+
+    function normalizeProviderEntry(candidate={},parentPath=''){
+        if(!candidate||typeof candidate!=='object'){
+            return null;
+        }
+
+        const kind=candidate.kind==='directory'?'directory':'file';
+        const rawPath=normalizeProviderPath(candidate.path||'');
+        const name=String(
+            candidate.name
+            ||rawPath.split('/').pop()
+            ||''
+        ).trim();
+
+        if(!name){
+            return null;
+        }
+
+        const path=rawPath||joinProviderPath(parentPath,name);
+
+        if(!path||path===normalizeProviderPath(parentPath)){
+            return null;
+        }
+
+        return {
+            ...candidate,
+            name:name,
+            path:path,
+            kind:kind,
+            size:Number.isFinite(Number(candidate.size))?Number(candidate.size):0,
+            mimeType:String(candidate.mimeType||''),
+            lastModified:candidate.lastModified||'',
+            status:String(candidate.status||''),
+            hasChildren:kind==='directory'&&candidate.hasChildren!==false
+        };
+    }
+
+    function normalizeProviderEntries(entries=[],parentPath=''){
+        if(!Array.isArray(entries)){
+            throw new TypeError('File manager provider list(path) must return an array.');
+        }
+
+        const unique=new Map();
+
+        for(const candidate of entries){
+            const entry=normalizeProviderEntry(candidate,parentPath);
+
+            if(entry&&isVisibleEntry(entry)&&!unique.has(entry.path)){
+                unique.set(entry.path,entry);
+            }
+        }
+
+        return Array.from(unique.values()).sort((left,right)=>{
+            if(left.kind!==right.kind){
+                return left.kind==='directory'?-1:1;
+            }
+
+            return left.name.localeCompare(right.name,undefined,{numeric:true,sensitivity:'base'});
+        });
+    }
+
+    const dbopfsTreeProvider={
+        async list(path=''){
+            const normalizedPath=normalizeProviderPath(path);
+
+            if(!normalizedPath){
+                let tableNames=dirs;
+
+                if(!tableNames?.length){
+                    tableNames=await dbopfs.getTableNames(true);
+                }
+
+                return tableNames.map(tableName=>({
+                    name:tableName,
+                    path:tableName,
+                    kind:'directory',
+                    hasChildren:true
+                }));
+            }
+
+            const files=(await dbopfs.getAllKeys(normalizedPath))
+                .filter(isVisibleFileName)
+                .sort();
+            const metadata=await getFilesMetadata(normalizedPath,files);
+
+            return files.map((fileName,index)=>({
+                name:fileName,
+                path:joinProviderPath(normalizedPath,fileName),
+                kind:'file',
+                size:metadata[index]?.size,
+                mimeType:metadata[index]?.type||metadata[index]?.mimeType||'',
+                lastModified:metadata[index]?.lastModified,
+                directory:normalizedPath,
+                fileName:fileName
+            }));
+        },
+        async open(entry={}){
+            if(entry.directory&&entry.fileName){
+                return openFile(entry.directory,entry.fileName);
+            }
+        }
+    };
+
+    function activeTreeProvider(){
+        return provider||dbopfsTreeProvider;
+    }
+
+    async function loadTree(){
+        const sequence=++treeLoadSequence;
+        fileManager.replaceChildren();
+        fileManager.setAttribute('role','tree');
+        fileManager.setAttribute(
+            'aria-label',
+            host.getAttribute('aria-label')||'Files'
+        );
+        fileManager.setAttribute('aria-busy','true');
+        treeItems=new Map();
+
+        if(!provider&&!window.dbopfs?.ready){
+            const waiting=document.createElement('p');
+            waiting.className='tree-empty';
+            waiting.innerText='Files will appear when storage is ready.';
+            fileManager.append(waiting);
+            fileManager.setAttribute('aria-busy','false');
+            return [];
+        }
+
+        try{
+            const entries=normalizeProviderEntries(
+                await activeTreeProvider().list(''),
+                ''
+            );
+
+            if(sequence!==treeLoadSequence){
+                return [];
+            }
+
+            const root=document.createElement('ul');
+            root.className='tree-root';
+            root.setAttribute('role','group');
+            appendTreeEntries(root,entries);
+            fileManager.append(root);
+
+            if(!entries.length){
+                const empty=document.createElement('p');
+                empty.className='tree-empty';
+                empty.innerText=host.dataset.emptyLabel||'No files are available.';
+                fileManager.append(empty);
+            }
+
+            const restoredPath=selectedPath;
+            const firstItem=treeItems.values().next().value;
+
+            if(firstItem){
+                setRovingTreeItem(firstItem,false);
+            }
+
+            if(restoredPath){
+                const restored=await select(
+                    restoredPath,
+                    {emit:false,focus:false}
+                );
+
+                if(!restored){
+                    selectedPath='';
+                }
+            }
+
+            return entries;
+        }catch(error){
+            if(sequence!==treeLoadSequence){
+                return [];
+            }
+
+            const message=document.createElement('p');
+            message.className='tree-error';
+            message.innerText='Unable to list files.';
+            fileManager.append(message);
+            emitAction('error',{}, {error:error});
+            throw error;
+        }finally{
+            if(sequence===treeLoadSequence){
+                fileManager.setAttribute('aria-busy','false');
+            }
+        }
+    }
+
+    function appendTreeEntries(group,entries=[]){
+        const size=entries.length;
+
+        entries.forEach((entry,index)=>{
+            group.append(createTreeItem(entry,index+1,size));
+        });
+    }
+
+    function createTreeItem(entry,position=1,setSize=1){
+        const item=document.createElement('li');
+        const row=document.createElement('div');
+        const disclosure=document.createElement('span');
+        const icon=document.createElement('img');
+        const name=document.createElement('span');
+        const count=document.createElement('span');
+
+        item.className='tree-item';
+        item.dataset.kind=entry.kind;
+        item.dataset.path=entry.path;
+        item.dataset.status=entry.status||'';
+        item.tabIndex=-1;
+        item.setAttribute('role','treeitem');
+        item.setAttribute('aria-selected',String(entry.path===selectedPath));
+        item.setAttribute('aria-posinset',String(position));
+        item.setAttribute('aria-setsize',String(setSize));
+        item._fileManagerEntry=entry;
+
+        row.className='tree-item-row';
+        row.title=entry.path;
+        disclosure.className='tree-disclosure';
+        disclosure.setAttribute('aria-hidden','true');
+        disclosure.innerText='>';
+        icon.className='tree-entry-icon';
+        icon.alt='';
+        icon.src=entry.kind==='directory'
+            ?'./arcane/img/folder.svg'
+            :'./arcane/img/doc.svg';
+        name.className='tree-entry-name';
+        name.innerText=entry.name;
+        count.className='tree-file-count';
+
+        if(Number.isFinite(Number(entry.fileCount))){
+            setFileCountLabel(count,Number(entry.fileCount),false);
+            item.dataset.fileCount=String(Number(entry.fileCount));
+        }
+
+        row.append(disclosure,icon,name,count);
+        item.append(row);
+        treeItems.set(entry.path,item);
+
+        if(entry.kind==='directory'&&entry.hasChildren){
+            const group=document.createElement('ul');
+            group.className='tree-group';
+            group.hidden=true;
+            group.setAttribute('role','group');
+            item.setAttribute('aria-expanded','false');
+            item.append(group);
+        }else if(entry.kind==='directory'){
+            setFileCountLabel(count,0,false);
+            item.dataset.fileCount='0';
+        }
+
+        row.addEventListener('click',async()=>{
+            await select(entry.path,{entry:entry,focus:true});
+
+            if(entry.kind==='directory'){
+                await toggleTreeItem(item);
+            }
+        });
+        row.addEventListener('dblclick',async event=>{
+            if(entry.kind==='file'){
+                event.preventDefault();
+                await openTreeItem(item,'double-click');
+            }
+        });
+        item.addEventListener('focus',()=>setRovingTreeItem(item,false));
+
+        return item;
+    }
+
+    function setFileCountLabel(element,count=0,partial=false){
+        const suffix=partial?'+':'';
+        element.innerText=`${count}${suffix} ${count===1&&!partial?'file':'files'}`;
+    }
+
+    function updateTreeCounts(item){
+        let current=item;
+
+        while(current){
+            if(current.dataset.kind==='directory'){
+                const exact=Number(current._fileManagerEntry?.fileCount);
+                const countElement=current.querySelector(':scope>.tree-item-row>.tree-file-count');
+
+                if(Number.isFinite(exact)){
+                    current.dataset.fileCount=String(exact);
+                    setFileCountLabel(countElement,exact,false);
+                }else if(current.dataset.loaded==='true'){
+                    const group=current.querySelector(':scope>.tree-group');
+                    const count=group
+                        ?group.querySelectorAll('.tree-item[data-kind="file"]').length
+                        :0;
+                    const partial=Boolean(
+                        group&&Array.from(
+                            group.querySelectorAll('.tree-item[data-kind="directory"]')
+                        ).some(directory=>
+                            directory._fileManagerEntry?.hasChildren
+                            &&directory.dataset.loaded!=='true'
+                        )
+                    );
+                    current.dataset.fileCount=String(count);
+                    setFileCountLabel(countElement,count,partial);
+                }
+            }
+
+            current=current.parentElement?.closest('.tree-item')||null;
+        }
+    }
+
+    async function expandTreeItem(item,{emitEvent=true}={}){
+        if(!item||item.dataset.kind!=='directory'){
+            return false;
+        }
+
+        const group=item.querySelector(':scope>.tree-group');
+
+        if(!group){
+            return false;
+        }
+
+        if(item.dataset.loaded!=='true'){
+            const entry=item._fileManagerEntry;
+            const sequence=treeLoadSequence;
+            item.setAttribute('aria-busy','true');
+
+            try{
+                const entries=normalizeProviderEntries(
+                    await activeTreeProvider().list(entry.path),
+                    entry.path
+                );
+
+                if(sequence!==treeLoadSequence||!fileManager.contains(item)){
+                    return false;
+                }
+
+                group.replaceChildren();
+                appendTreeEntries(group,entries);
+
+                if(!entries.length){
+                    const empty=document.createElement('li');
+                    empty.className='tree-empty';
+                    empty.setAttribute('role','none');
+                    empty.innerText='Empty';
+                    group.append(empty);
+                }
+
+                item.dataset.loaded='true';
+                updateTreeCounts(item);
+            }catch(error){
+                group.replaceChildren();
+                const message=document.createElement('li');
+                message.className='tree-error';
+                message.setAttribute('role','none');
+                message.innerText='Unable to list this folder.';
+                group.append(message);
+                emitAction('error',entry,{error:error});
+                return false;
+            }finally{
+                item.removeAttribute('aria-busy');
+            }
+        }
+
+        group.hidden=false;
+        item.setAttribute('aria-expanded','true');
+
+        if(emitEvent){
+            emitAction('expand',item._fileManagerEntry);
+        }
+
+        return true;
+    }
+
+    function collapseTreeItem(item,{emitEvent=true}={}){
+        const group=item?.querySelector(':scope>.tree-group');
+
+        if(!group){
+            return false;
+        }
+
+        group.hidden=true;
+        item.setAttribute('aria-expanded','false');
+
+        if(emitEvent){
+            emitAction('collapse',item._fileManagerEntry);
+        }
+
+        return true;
+    }
+
+    async function toggleTreeItem(item){
+        if(item?.getAttribute('aria-expanded')==='true'){
+            return collapseTreeItem(item);
+        }
+
+        return expandTreeItem(item);
+    }
+
+    function setRovingTreeItem(item,focus=true){
+        if(!item){
+            return;
+        }
+
+        for(const treeItem of treeItems.values()){
+            treeItem.tabIndex=treeItem===item?0:-1;
+        }
+
+        if(focus){
+            item.focus();
+        }
+    }
+
+    function visibleTreeItems(){
+        return Array.from(
+            fileManager.querySelectorAll('.tree-item[role="treeitem"]')
+        ).filter(
+            item=>!item.closest('.tree-group[hidden]')
+        );
+    }
+
+    async function revealTreePath(path=''){
+        const normalizedPath=normalizeProviderPath(path);
+        let item=treeItems.get(normalizedPath)||null;
+
+        if(item){
+            return item;
+        }
+
+        const segments=normalizedPath.split('/').filter(Boolean);
+
+        for(let i=1;i<segments.length;i++){
+            const parentPath=segments.slice(0,i).join('/');
+            const parent=treeItems.get(parentPath);
+
+            if(parent?.dataset.kind==='directory'){
+                await expandTreeItem(parent,{emitEvent:false});
+                item=treeItems.get(normalizedPath)||null;
+
+                if(item){
+                    return item;
+                }
+            }
+        }
+
+        return null;
+    }
+
+    async function select(path='',options={}){
+        const normalizedPath=normalizeProviderPath(path);
+
+        if(!normalizedPath){
+            return clearSelection(options);
+        }
+
+        let item=null;
+        let entry=options.entry||null;
+
+        if(layout==='tree'){
+            item=await revealTreePath(normalizedPath);
+
+            if(!item){
+                return false;
+            }
+
+            entry=item._fileManagerEntry;
+        }
+
+        selectedPath=normalizedPath;
+
+        if(layout==='tree'){
+            for(const treeItem of treeItems.values()){
+                treeItem.setAttribute(
+                    'aria-selected',
+                    String(treeItem===item)
+                );
+            }
+            setRovingTreeItem(item,options.focus===true);
+        }else{
+            fileManager.querySelectorAll('[data-file-path]').forEach(element=>{
+                element.setAttribute(
+                    'aria-selected',
+                    String(element.dataset.filePath===selectedPath)
+                );
+            });
+        }
+
+        if(options.emit!==false){
+            emit('file-manager-select',{path:selectedPath,entry:entry});
+        }
+
+        return true;
+    }
+
+    function clearSelection(options={}){
+        const changed=Boolean(selectedPath);
+        selectedPath='';
+
+        if(layout==='tree'){
+            for(const treeItem of treeItems.values()){
+                treeItem.setAttribute('aria-selected','false');
+            }
+        }else{
+            fileManager.querySelectorAll('[data-file-path]').forEach(element=>{
+                element.setAttribute('aria-selected','false');
+            });
+        }
+
+        if(options.emit===true){
+            emit('file-manager-select',{path:'',entry:null});
+        }
+
+        return changed;
+    }
+
+    async function openTreeItem(item,trigger='open'){
+        const entry=item?._fileManagerEntry;
+
+        if(!entry||entry.kind!=='file'){
+            return false;
+        }
+
+        await select(entry.path,{entry:entry,focus:true});
+        const detail={path:entry.path,entry:entry,trigger:trigger};
+        const openAllowed=emit('file-manager-open',detail,true);
+        const actionAllowed=emitAction('open',entry,{trigger:trigger},true);
+
+        if(!openAllowed||!actionAllowed||openMode==='event'){
+            return true;
+        }
+
+        if(typeof activeTreeProvider().open==='function'){
+            try{
+                await activeTreeProvider().open(entry);
+            }catch(error){
+                emitAction('error',entry,{error:error});
+                console.error('Unable to open file:',error);
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    async function onTreeKeydown(event){
+        if(layout!=='tree'){
+            return;
+        }
+
+        const item=event.target.closest?.('.tree-item[role="treeitem"]');
+
+        if(!item||!fileManager.contains(item)){
+            return;
+        }
+
+        const items=visibleTreeItems();
+        const index=items.indexOf(item);
+        const focusAt=nextIndex=>{
+            const next=items[nextIndex];
+            if(next){
+                setRovingTreeItem(next,true);
+            }
+        };
+
+        switch(event.key){
+            case 'ArrowDown':
+                event.preventDefault();
+                focusAt(Math.min(items.length-1,index+1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                focusAt(Math.max(0,index-1));
+                break;
+            case 'Home':
+                event.preventDefault();
+                focusAt(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                focusAt(items.length-1);
+                break;
+            case 'ArrowRight':
+                if(item.dataset.kind!=='directory'){
+                    break;
+                }
+                event.preventDefault();
+                if(item.getAttribute('aria-expanded')!=='true'){
+                    await expandTreeItem(item);
+                }else{
+                    const firstChild=item.querySelector(':scope>.tree-group>.tree-item');
+                    if(firstChild){
+                        setRovingTreeItem(firstChild,true);
+                    }
+                }
+                break;
+            case 'ArrowLeft':{
+                event.preventDefault();
+                if(item.dataset.kind==='directory'&&item.getAttribute('aria-expanded')==='true'){
+                    collapseTreeItem(item);
+                }else{
+                    const parent=item.parentElement?.closest('.tree-item');
+                    if(parent){
+                        setRovingTreeItem(parent,true);
+                    }
+                }
+                break;
+            }
+            case 'Enter':
+                event.preventDefault();
+                if(item.dataset.kind==='directory'){
+                    await toggleTreeItem(item);
+                    await select(item.dataset.path,{entry:item._fileManagerEntry});
+                }else{
+                    await openTreeItem(item,'keyboard');
+                }
+                break;
+            case ' ':
+                event.preventDefault();
+                await select(item.dataset.path,{entry:item._fileManagerEntry});
+                break;
+        }
+    }
+
+    async function openDirectory(directory=''){
+        const modal=await waitForComponent(
+            directoryModal,
+            {
+                methods:['populate','open'],
+                property:'ready',
+                event:'modal-ready'
+            }
+        );
+        const files=(await dbopfs.getAllKeys(directory))
+            .filter(isVisibleFileName)
+            .sort();
+        const metadata=await getFilesMetadata(directory,files);
+        const content=document.createElement('section');
+        const styles=componentStyles.cloneNode(true);
+        const heading=document.createElement('h1');
+        const actions=document.createElement('section');
+        const uploadButton=document.createElement('button');
+        const list=document.createElement('ul');
+
+        heading.innerText=directory;
+        actions.className='directory-actions';
+        uploadButton.type='button';
+        uploadButton.dataset.directory=directory;
+        uploadButton.innerText='Upload Files';
+        uploadButton.addEventListener(
+            'click',
+            ()=>selectFiles(directory)
+        );
+        list.className='directory-file-list';
+        list.dataset.layout='files';
+
+        actions.append(uploadButton);
+        content.append(styles,heading,actions);
+
+        if(!files.length){
+            const empty=document.createElement('p');
+            empty.innerText='This directory is empty.';
+            content.append(empty);
+        }else{
+            for(let i=0;i<files.length;i++){
+                list.append(
+                    createFileRow(
+                        directory,
+                        files[i],
+                        metadata[i]
+                    )
+                );
+            }
+
+            content.append(list);
+        }
+
+        await modal.populate(content,false);
+        modal.open();
+    }
+
+    async function openFile(directory='',fileName=''){
+        const modal=await waitForComponent(
+            fileModal,
+            {
+                methods:['populate','open'],
+                property:'ready',
+                event:'modal-ready'
+            }
+        );
+        const content=document.createElement('section');
+        const styles=componentStyles.cloneNode(true);
+        const heading=document.createElement('h1');
+        const actions=document.createElement('section');
+        const deleteButton=document.createElement('button');
+        const deleteIcon=document.createElement('img');
+        const status=document.createElement('p');
+
+        heading.innerText=`${directory}/${fileName}`;
+        actions.className='file-view-actions';
+        deleteButton.type='button';
+        deleteButton.className='file-view-delete';
+        deleteButton.innerText='Delete File';
+        deleteIcon.alt='';
+        deleteIcon.className='action-icon';
+        deleteIcon.src='./arcane/img/trash.svg';
+        deleteButton.prepend(deleteIcon);
+        deleteButton.addEventListener(
+            'click',
+            ()=>confirmDelete(directory,fileName,true).catch(
+                error=>console.error('Unable to delete file:',error)
+            )
+        );
+        status.innerText='Opening file...';
+        actions.append(deleteButton);
+        content.append(
+            styles,
+            heading,
+            actions,
+            document.createElement('hr'),
+            status
+        );
+
+        modal.populate(content,false);
+        modal.open();
+
+        try{
+            const {default:FileEntity}=await fileEntityPromise;
+            const file=new FileEntity(fileName,directory);
+            const fileRef=await file.open();
+
+            status.remove();
+
+            if(fileRef.size<1){
+                const empty=document.createElement('h2');
+
+                if(!layout){
+                    await dbopfs.delete(directory,fileName);
+                    await loadAll();
+                    empty.innerText='File was empty and has been deleted';
+                }else{
+                    empty.innerText='File is empty';
+                }
+
+                content.append(empty);
+            }else{
+                content.append(await renderFile(fileRef,{directory,fileName}));
+            }
+        }catch(error){
+            status.innerText='Unable to open this file.';
+            console.error('Unable to open file:',error);
+        }
+    }
+
+    async function renderFile(fileRef,context={}){
+        if(activeFileURL){
+            URL.revokeObjectURL(activeFileURL);
+            activeFileURL='';
+        }
+
+        if(['png','jpg','jpeg','webp','svg'].includes(fileRef.ext)){
+            const image=document.createElement('img');
+
+            activeFileURL=URL.createObjectURL(
+                new Blob([fileRef],{type:fileRef.mime})
+            );
+            image.alt=fileRef.name;
+            image.src=activeFileURL;
+            image.style.maxWidth='100%';
+            return image;
+        }
+
+        if(fileRef.ext==='pdf'){
+            const frame=document.createElement('iframe');
+
+            activeFileURL=URL.createObjectURL(
+                new Blob([fileRef],{type:fileRef.mime})
+            );
+            frame.src=activeFileURL;
+            frame.style.height='60vh';
+            frame.style.width='100%';
+            frame.title=fileRef.name;
+            return frame;
+        }
+
+        if(!layout&&['html','md'].includes(fileRef.ext)){
+            const rendered=document.createElement('div');
+
+            rendered.innerHTML=fileRef.ext==='md'
+                ?fileRef.parsed
+                :await fileRef.text();
+            return rendered;
+        }
+
+        const rendered=document.createElement('div');
+        let preview=fileRef.parsed;
+
+        if(
+            ['json','jsonl','ndjson'].includes(fileRef.ext)
+            &&typeof host.previewTransform==='function'
+        ){
+            preview=await host.previewTransform(
+                preview,
+                Object.freeze(
+                    {
+                        directory:String(context.directory||''),
+                        extension:String(fileRef.ext||''),
+                        fileName:String(context.fileName||fileRef.name||'')
+                    }
+                )
+            );
+        }
+
+        switch(fileRef.ext){
+            case 'json':
+                rendered.append(
+                    createPreformatted(
+                        JSON.stringify(preview,null,4)
+                    )
+                );
+                break;
+            case 'jsonl':
+            case 'ndjson':{
+                const records=Array.isArray(preview)?preview:[];
+
+                for(let i=0;i<records.length;i++){
+                    rendered.append(
+                        createPreformatted(
+                            JSON.stringify(records[i],null,4)
+                        )
+                    );
+
+                    if(i<records.length-1){
+                        rendered.append(document.createElement('hr'));
+                    }
+                }
+                break;
+            }
+            default:
+                rendered.append(
+                    createPreformatted(await fileRef.text())
+                );
+        }
+
+        return rendered;
+    }
+
+    function createPreformatted(content=''){
+        const pre=document.createElement('pre');
+        pre.innerText=content;
+        return pre;
+    }
+
+    async function getFilesMetadata(directory='',files=[]){
+        return Promise.all(
+            files.map(
+                fileName=>dbopfs.getFileMetadata(
+                    directory,
+                    fileName
+                ).catch(()=>({}))
+            )
+        );
+    }
+
+    function formatLastModified(metadata={}){
+        if(!metadata.lastModified){
+            return '';
+        }
+
+        return `Updated: ${new Date(metadata.lastModified).toLocaleString()}`;
+    }
+
+    function createFileRow(directory='',fileName='',metadata={}){
+        const file=document.createElement('li');
+        const openButton=document.createElement('button');
+        const fileIcon=document.createElement('img');
+        const fileDetails=document.createElement('span');
+        const fileLabel=document.createElement('span');
+        const fileMetadata=document.createElement('small');
+        const deleteButton=document.createElement('button');
+        const deleteIcon=document.createElement('img');
+        const entry={
+            name:fileName,
+            path:joinProviderPath(directory,fileName),
+            kind:'file',
+            size:Number(metadata.size)||0,
+            mimeType:String(metadata.type||metadata.mimeType||''),
+            lastModified:metadata.lastModified||'',
+            directory:directory,
+            fileName:fileName
+        };
+
+        file.className='file file-row';
+
+        file.title=fileName;
+        openButton.type='button';
+        openButton.className='file-row-open';
+        openButton.dataset.fileAction='open';
+        openButton.dataset.directory=directory;
+        openButton.dataset.file=fileName;
+        openButton.dataset.filePath=entry.path;
+        openButton.setAttribute('aria-selected',String(entry.path===selectedPath));
+
+        fileIcon.alt='';
+        fileIcon.className='icon file-icon';
+        fileIcon.src='./arcane/img/doc.svg';
+        fileDetails.className='file-details';
+        fileLabel.className='file-name';
+        fileLabel.innerText=fileName;
+        fileMetadata.className='file-metadata';
+        fileMetadata.innerText=formatLastModified(metadata);
+
+        fileDetails.append(fileLabel);
+
+        if(fileMetadata.innerText){
+            fileDetails.append(fileMetadata);
+        }
+
+        deleteButton.type='button';
+        deleteButton.className='file-delete';
+        deleteButton.dataset.fileAction='delete';
+        deleteButton.dataset.directory=directory;
+        deleteButton.dataset.file=fileName;
+        deleteButton.title=`Delete ${fileName}`;
+        deleteButton.setAttribute('aria-label',`Delete ${fileName}`);
+
+        deleteIcon.alt='';
+        deleteIcon.className='action-icon';
+        deleteIcon.src='./arcane/img/trash.svg';
+
+        openButton.addEventListener(
+            'click',
+            async()=>{
+                await select(entry.path,{entry:entry});
+                const detail={path:entry.path,entry:entry,trigger:'click'};
+                const openAllowed=emit('file-manager-open',detail,true);
+                const actionAllowed=emitAction('open',entry,{trigger:'click'},true);
+
+                if(!openAllowed||!actionAllowed||openMode==='event'){
+                    return;
+                }
+
+                openFile(directory,fileName).catch(
+                    error=>console.error('Unable to open file:',error)
+                );
+            }
+        );
+        deleteButton.addEventListener(
+            'click',
+            ()=>{
+                if(!emitAction('delete',entry,{},true)){
+                    return;
+                }
+
+                confirmDelete(directory,fileName).catch(
+                    error=>console.error('Unable to delete file:',error)
+                );
+            }
+        );
+
+        openButton.append(fileIcon,fileDetails);
+        deleteButton.append(deleteIcon);
+        file.append(openButton,deleteButton);
+
+        return file;
+    }
+
+    async function confirmDelete(directory='',fileName='',closeFile=false){
+        if(!directory||!fileName){
+            return false;
+        }
+
+        const modal=await waitForComponent(
+            deleteModal,
+            {
+                methods:['populate','open','close'],
+                property:'ready',
+                event:'modal-ready'
+            }
+        );
+        const content=document.createElement('section');
+        const heading=document.createElement('h1');
+        const message=document.createElement('p');
+        const cancelButton=document.createElement('button');
+        const deleteButton=document.createElement('button');
+
+        heading.innerText='Delete File';
+        message.innerText=`Delete ${fileName}? This cannot be undone.`;
+        cancelButton.type='button';
+        cancelButton.innerText='Cancel';
+        deleteButton.type='button';
+        deleteButton.innerText='Delete';
+
+        cancelButton.addEventListener(
+            'click',
+            ()=>modal.close(undefined,true)
+        );
+        deleteButton.addEventListener(
+            'click',
+            async function deleteSelectedFile(){
+                cancelButton.disabled=true;
+                deleteButton.disabled=true;
+
+                try{
+                    await dbopfs.delete(directory,fileName);
+                    await modal.close(undefined,true);
+
+                    if(closeFile&&typeof fileModal.close==='function'){
+                        await fileModal.close(undefined,true);
+                    }
+
+                    await loadAll();
+
+                    if(layout==='grid'){
+                        await openDirectory(directory);
+                    }
+                }catch(error){
+                    message.innerText=`Unable to delete ${fileName}.`;
+                    cancelButton.disabled=false;
+                    deleteButton.disabled=false;
+                    console.error('Unable to delete file:',error);
+                }
+            }
+        );
+
+        content.append(
+            heading,
+            message,
+            cancelButton,
+            deleteButton
+        );
+
+        await modal.populate(content,false);
+        modal.open();
+
+        return true;
+    }
+
+    function selectFiles(directory=''){
+        if(!directory){
+            return;
+        }
+
+        uploadDirectory=directory;
+        fileUpload.click();
+    }
+
+    async function uploadFiles(){
+        const files=Array.from(fileUpload.files||[]);
+        const directory=uploadDirectory;
+        fileUpload.value='';
+
+        if(!files.length||!directory){
+            return;
+        }
+
+        const {default:FileEntity}=await fileEntityPromise;
+
+        const results=await Promise.allSettled(
+            files.map(
+                function saveUploadedFile(file){
+                    return new FileEntity(
+                        file.name,
+                        directory
+                    ).save(file);
+                }
+            )
+        );
+
+        await loadAll();
+
+        if(layout==='grid'){
+            await openDirectory(directory);
+        }
+
+        const failed=results.find(
+            result=>result.status==='rejected'
+        );
+
+        if(failed){
+            throw failed.reason;
+        }
+    }
+
+    async function init(){
+        if(initialized){
+            return;
+        }
+
+        initialized=true;
+
+        try{
+            if(layout!=='tree'){
+                await fileEntityPromise;
+            }
+            await loadAll();
+            host.ready=true;
+            host.dispatchEvent(
+                new CustomEvent('file-manager-ready')
+            );
+        }catch(error){
+            initialized=false;
+            console.error('Unable to initialize file manager:',error);
+        }
+    }
+
+    async function loadAll(){
+        if(layout==='tree'){
+            return loadTree();
+        }
+
+        let tableNames=dirs;
+
+        if(!tableNames?.length){
+            tableNames=await dbopfs.getTableNames(Boolean(layout));
+        }
+
+        tableNames.sort();
+        fileManager.replaceChildren();
+
+        for(let i=0;i<tableNames.length;i++){
+            const tableName=tableNames[i];
+            const files=(await dbopfs.getAllKeys(tableName))
+                .filter(isVisibleFileName)
+                .sort();
+            const metadata=layout==='files'
+                ?await getFilesMetadata(tableName,files)
+                :[];
+            const directory=document.createElement('ul');
+            const folder=document.createElement('li');
+            const folderIcon=document.createElement('img');
+            const folderName=document.createElement('span');
+            const fileCount=document.createElement('span');
+
+            directory.className='directory';
+            directory.dataset.directory=tableName;
+            folder.className='file folder';
+            folderIcon.className='icon';
+            folderIcon.src='./arcane/img/folder.svg';
+            folderName.innerText=tableName;
+            fileCount.className='file-count';
+            fileCount.innerText=`${files.length} ${files.length===1?'file':'files'}`;
+
+            folder.append(folderIcon,folderName,fileCount);
+            directory.append(folder);
+
+            for(let j=0;j<files.length;j++){
+                const fileName=files[j];
+
+                directory.append(
+                    createFileRow(
+                        tableName,
+                        fileName,
+                        metadata[j]
+                    )
+                );
+            }
+
+            if(!files.length){
+                const empty=document.createElement('li');
+                empty.className='empty-directory';
+                empty.innerText='Empty';
+                directory.append(empty);
+            }
+
+            fileManager.append(directory);
+        }
+    }
+</script>