arcane-os 0.35.0 → 0.36.0

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

@@ -330,6 +330,88 @@
         color:var(--danger-color);
     }
 
+    .file-preview,
+    .file-preview-collection{
+        display:grid;
+        gap:1em;
+        min-width:0;
+        overflow-wrap:anywhere;
+    }
+
+    .file-preview h2,
+    .file-preview h3,
+    .file-preview h4,
+    .file-preview p{
+        margin-top:0;
+    }
+
+    .file-preview pre{
+        margin:0;
+        overflow-wrap:anywhere;
+        white-space:pre-wrap;
+        user-select:text;
+    }
+
+    .file-preview img{
+        max-width:100%;
+        height:auto;
+    }
+
+    .file-preview audio,
+    .file-preview iframe{
+        width:100%;
+    }
+
+    .file-preview iframe{
+        min-height:60vh;
+        border:0;
+    }
+
+    .file-preview table{
+        display:block;
+        max-width:100%;
+        overflow:auto;
+    }
+
+    .file-preview-conversation{
+        display:grid;
+        gap:1em;
+    }
+
+    .file-preview-message{
+        display:grid;
+        gap:.5em;
+        padding:1em;
+        border:1px solid var(--border-color);
+        border-radius:.5em;
+        background:var(--background);
+    }
+
+    .file-preview-message header,
+    .file-preview-message footer{
+        display:flex;
+        flex-wrap:wrap;
+        gap:.75em;
+    }
+
+    .file-preview-message footer{
+        font-size:.85em;
+    }
+
+    .file-preview-download:focus-visible{
+        outline:2px solid var(--focus-color,var(--accent-color));
+        outline-offset:.2em;
+    }
+
+</style>
+
+<!-- Host preview defaults stay separate from the presentation styles copied into modals. -->
+<style>
+    :host{
+        --modal-width:min(72rem,calc(100vw - 2rem));
+        --modal-max-height:calc(100vh - 2rem);
+        --modal-padding:1.25rem;
+    }
 </style>
 
 <div class="file-manager">
@@ -373,7 +455,8 @@
     ).filter(Boolean);
     const fileEntityPromise=import('../entities/File.js');
 
-    let activeFileURL='';
+    let activePreview=null;
+    let markdownModulePromise=null;
     let uploadDirectory='';
     let initialized=false;
     let provider=null;
@@ -396,6 +479,7 @@
     host.loadAll=loadAll;
     host.setProvider=setProvider;
     host.setFilter=setFilter;
+    host.setDirectoryFilter=setDirectoryFilter;
     host.select=select;
     host.clearSelection=clearSelection;
     host.destroy=destroy;
@@ -434,24 +518,66 @@
         return [];
     }
 
-    function isVisibleEntry(entry={}){
+    function filterContext(directory='',fileName=''){
+        return {
+            directory,
+            fileName,
+            path:joinProviderPath(directory,fileName),
+            layout
+        };
+    }
+
+    function isVisibleDirectory(directory='',entry=null){
+        const candidate=entry||{name:directory,path:directory,kind:'directory'};
+        if(configuredHiddenPrefixes().some(function hasHiddenPrefix(prefix){
+            return String(candidate.name||'').startsWith(prefix);
+        })){
+            return false;
+        }
+        return !is.function(host.directoryFilter)
+            ||host.directoryFilter(candidate,filterContext(directory))!==false;
+    }
+
+    function isVisibleEntry(entry={},context=null){
         const normalized=is.string(entry)
             ?{name:entry,path:entry,kind:'file'}
             :entry;
+        const directory=normalized.directory
+            ||(normalized.kind==='directory'?normalized.path:'');
+        const details=context||filterContext(directory,normalized.fileName||normalized.name);
+
+        if(normalized.kind==='directory'
+            &&!isVisibleDirectory(normalized.path||normalized.name,normalized)){
+            return false;
+        }
         const activeFilter=filter||provider?.filter;
 
         if(is.function(activeFilter)){
-            return activeFilter(normalized)!==false;
+            return activeFilter(normalized,details)!==false;
         }
 
         const name=String(normalized.name||'');
         return !configuredHiddenPrefixes().some(prefix=>name.startsWith(prefix));
     }
 
-    function isVisibleFileName(fileName=''){
-        return isVisibleEntry({name:fileName,path:fileName,kind:'file'});
+    function visibleFileNames(fileNames=[],directory=''){
+        return fileNames.filter(function isVisibleFileName(fileName){
+            return isVisibleEntry(
+                {name:fileName,path:fileName,kind:'file'},
+                filterContext(directory,fileName)
+            );
+        });
     }
 
+    fileModal.addEventListener(
+        'modal-closed',
+        function closeFilePreview(){
+            fileOpenGeneration+=1;
+            releasePreview(activePreview,'file-preview-closed');
+        },
+        {signal:lifecycleController.signal}
+    );
+
     fileUpload.addEventListener(
         'change',
         ()=>uploadFiles().catch(
@@ -572,6 +698,21 @@
         return destroyed||generation!==filterGeneration?null:filter;
     }
 
+    async function setDirectoryFilter(nextFilter=null){
+        if(destroyed){
+            return null;
+        }
+        if(nextFilter!==null&&!is.function(nextFilter)){
+            throw new TypeError('File manager directory filters must be functions or null.');
+        }
+        const generation=++filterGeneration;
+        host.directoryFilter=nextFilter;
+        if(initialized){
+            await loadAll();
+        }
+        return destroyed||generation!==filterGeneration?null:host.directoryFilter;
+    }
+
     function normalizeProviderPath(path=''){
         return String(path||'')
             .replaceAll('\\','/')
@@ -632,7 +773,7 @@
         for(const candidate of entries){
             const entry=normalizeProviderEntry(candidate,parentPath);
 
-            if(entry&&isVisibleEntry(entry)&&!unique.has(entry.path)){
+            if(entry&&isVisibleEntry(entry,filterContext(parentPath,entry.name))&&!unique.has(entry.path)){
                 unique.set(entry.path,entry);
             }
         }
@@ -665,9 +806,10 @@
                 }));
             }
 
-            const files=(await dbopfs.getAllKeys(normalizedPath))
-                .filter(isVisibleFileName)
-                .sort();
+            if(!isVisibleDirectory(normalizedPath)){
+                return [];
+            }
+            const files=visibleFileNames(await dbopfs.getAllKeys(normalizedPath),normalizedPath).sort();
             const metadata=await getFilesMetadata(normalizedPath,files);
 
             return files.map((fileName,index)=>({
@@ -1301,7 +1443,7 @@
     }
 
     async function openDirectory(directory=''){
-        if(destroyed){
+        if(destroyed||!isVisibleDirectory(directory)){
             return false;
         }
         const generation=++directoryOpenGeneration;
@@ -1315,16 +1457,14 @@
             },
             {signal:lifecycleController.signal}
         );
-        if(destroyed||generation!==directoryOpenGeneration){
+        if(destroyed||generation!==directoryOpenGeneration||!isVisibleDirectory(directory)){
             return false;
         }
         const keys=await dbopfs.getAllKeys(directory);
         if(destroyed||generation!==directoryOpenGeneration){
             return false;
         }
-        const files=keys
-            .filter(isVisibleFileName)
-            .sort();
+        const files=visibleFileNames(keys,directory).sort();
         const metadata=await getFilesMetadata(directory,files);
         if(destroyed||generation!==directoryOpenGeneration){
             return false;
@@ -1382,20 +1522,39 @@
         if(destroyed){
             return false;
         }
+        releasePreview(activePreview,'file-preview-replaced');
         const generation=++fileOpenGeneration;
-        const modal=await waitForComponent(
-            fileModal,
-            {
-                methods:['populate','open'],
-                property:'ready',
-                event:'modal-ready',
-                signal:lifecycleController.signal
-            },
-            {signal:lifecycleController.signal}
-        );
-        if(destroyed||generation!==fileOpenGeneration){
+        const preview={
+            controller:new AbortController(),
+            generation,
+            urls:new Set(),
+            media:new Set()
+        };
+        activePreview=preview;
+        let modal;
+        try{
+            modal=await waitForComponent(
+                fileModal,
+                {
+                    methods:['populate','open'],
+                    property:'ready',
+                    event:'modal-ready',
+                    signal:preview.controller.signal
+                },
+                {signal:preview.controller.signal}
+            );
+        }catch(error){
+            const current=isCurrentPreview(preview);
+            releasePreview(preview,'file-preview-unavailable');
+            if(current){
+                throw error;
+            }
             return false;
         }
+        if(!isCurrentPreview(preview)){
+            return false;
+        }
+        configureFileModal(modal);
         const content=document.createElement('section');
         const styles=componentStyles.cloneNode(true);
         const heading=document.createElement('h1');
@@ -1413,18 +1572,17 @@
         deleteIcon.className='action-icon';
         deleteIcon.src=new URL('../img/trash.svg',componentHref).href;
         deleteButton.prepend(deleteIcon);
-        deleteButton.addEventListener(
-            'click',
-            ()=>confirmDelete(directory,fileName,true).catch(
+        deleteButton.onclick=function deletePreviewFile(){
+            return confirmDelete(directory,fileName,true).catch(
                 error=>{
                     if(!destroyed){
                         arcaneLogging.error('Unable to delete file:',error);
                     }
                 }
-            ),
-            {signal:lifecycleController.signal}
-        );
+            );
+        };
         status.innerText='Opening file...';
+        status.setAttribute('role','status');
         actions.append(deleteButton);
         content.append(
             styles,
@@ -1435,107 +1593,363 @@
         );
 
         await modal.populate(content,false);
-        if(destroyed||generation!==fileOpenGeneration){
+        if(!isCurrentPreview(preview)){
             return false;
         }
         modal.open();
 
         try{
             const {default:FileEntity}=await fileEntityPromise;
-            if(destroyed||generation!==fileOpenGeneration){
+            if(!isCurrentPreview(preview)){
                 return false;
             }
             const file=new FileEntity(fileName,directory);
             const fileRef=await file.open();
-            if(destroyed||generation!==fileOpenGeneration){
+            if(!isCurrentPreview(preview)){
                 return false;
             }
 
-            status.remove();
-
-            const rendered=await renderFile(fileRef,{directory,fileName});
-            if(destroyed||generation!==fileOpenGeneration){
+            const rendered=await renderFile(fileRef,{directory,fileName},preview);
+            if(!isCurrentPreview(preview)){
+                releasePreview(preview,'file-preview-superseded');
                 return false;
             }
+            status.remove();
             content.append(rendered);
             return true;
         }catch(error){
-            if(!destroyed&&generation===fileOpenGeneration){
+            if(isCurrentPreview(preview)){
                 status.innerText='Unable to open this file.';
+                status.setAttribute('role','alert');
                 arcaneLogging.error('Unable to open file:',error);
             }
+            releasePreview(preview,'file-preview-failed');
             return false;
         }
     }
 
-    async function renderFile(fileRef,context={}){
-        if(activeFileURL){
-            URL.revokeObjectURL(activeFileURL);
-            activeFileURL='';
+    function configureFileModal(modal){
+        const appearance=getComputedStyle(host);
+        for(const property of ['--modal-width','--modal-max-height','--modal-padding']){
+            if(!modal.style.getPropertyValue(property)){
+                modal.style.setProperty(property,appearance.getPropertyValue(property).trim());
+            }
         }
+    }
 
-        if(['png','jpg','jpeg','webp','svg'].includes(fileRef.ext)){
-            const image=document.createElement('img');
+    function isCurrentPreview(preview){
+        return !destroyed
+            &&activePreview===preview
+            &&preview.generation===fileOpenGeneration
+            &&!preview.controller.signal.aborted;
+    }
 
-            activeFileURL=URL.createObjectURL(
-                new Blob([fileRef],{type:fileRef.mime})
-            );
-            image.alt=fileRef.name;
-            image.src=activeFileURL;
-            image.style.maxWidth='100%';
-            return image;
+    function releasePreview(preview,reason){
+        if(!preview){
+            return;
+        }
+        preview.controller.abort(reason);
+        for(const element of preview.media){
+            if(element.localName==='audio'){
+                element.pause();
+            }
+            if(element.localName==='iframe'){
+                element.removeAttribute('srcdoc');
+            }
+            element.removeAttribute(element.localName==='a'?'href':'src');
+            if(element.localName==='audio'){
+                element.load();
+            }
+        }
+        for(const url of preview.urls){
+            URL.revokeObjectURL(url);
         }
+        preview.media.clear();
+        preview.urls.clear();
+        if(activePreview===preview){
+            activePreview=null;
+        }
+    }
 
-        if(fileRef.ext==='pdf'){
-            const frame=document.createElement('iframe');
+    function previewObjectURL(content,preview){
+        if(!(content instanceof Blob)){
+            throw new TypeError('File preview media and downloads require a Blob or File.');
+        }
+        preview.controller.signal.throwIfAborted();
+        const url=URL.createObjectURL(content);
+        preview.urls.add(url);
+        return url;
+    }
 
-            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;
+    async function renderDescriptor(descriptor,preview,depth=0){
+        preview.controller.signal.throwIfAborted();
+        if(!descriptor||!is.object(descriptor)||is.array(descriptor)){
+            throw new TypeError('File preview descriptors must be objects.');
+        }
+        const rendered=document.createElement('section');
+        rendered.className='file-preview';
+        if(descriptor.title!==undefined){
+            const heading=document.createElement(`h${Math.min(depth+2,6)}`);
+            heading.textContent=descriptor.title;
+            rendered.append(heading);
         }
 
-        if(!layout&&['html','md'].includes(fileRef.ext)){
-            const rendered=document.createElement('div');
+        switch(descriptor.kind){
+            case 'text':
+            case 'markdown':
+            case 'html':{
+                if(!is.string(descriptor.content)){
+                    throw new TypeError(`File preview ${descriptor.kind} content must be a string.`);
+                }
+                if(descriptor.kind==='text'){
+                    rendered.append(createPreformatted(descriptor.content));
+                    break;
+                }
+                const body=document.createElement(descriptor.kind==='html'?'iframe':'div');
+                if(descriptor.kind==='markdown'){
+                    markdownModulePromise=markdownModulePromise||import('../modules/MD.js');
+                    const {default:MD}=await markdownModulePromise;
+                    preview.controller.signal.throwIfAborted();
+                    body.innerHTML=new MD(descriptor.content).safeRendered;
+                }else{
+                    body.title=descriptor.title||'HTML preview';
+                    body.srcdoc=descriptor.content;
+                    preview.media.add(body);
+                }
+                rendered.append(body);
+                break;
+            }
+            case 'json':
+                rendered.append(createPreformatted(JSON.stringify(descriptor.content,null,4)));
+                break;
+            case 'conversation':{
+                if(!is.array(descriptor.messages)){
+                    throw new TypeError('File preview conversation messages must be an array.');
+                }
+                const messages=document.createElement('div');
+                messages.className='file-preview-conversation';
+                const entries=await Promise.all(
+                    descriptor.messages.map(async function renderConversationMessage(message){
+                        if(!message||!is.string(message.role)||!is.string(message.content)){
+                            throw new TypeError('File preview messages require role and content strings.');
+                        }
+                        const article=document.createElement('article');
+                        const header=document.createElement('header');
+                        const speaker=document.createElement('strong');
+                        const footer=document.createElement('footer');
+                        const time=document.createElement('time');
+                        article.className='file-preview-message';
+                        article.dataset.role=message.role;
+                        speaker.textContent=message.name===undefined
+                            ?message.role
+                            :`${message.name} · ${message.role}`;
+                        header.append(speaker);
+                        if(message.timestamp===undefined||message.timestamp===null){
+                            time.textContent='Time unavailable';
+                        }else{
+                            const timestamp=new Date(message.timestamp);
+                            if(is.finite(timestamp.getTime())){
+                                time.dateTime=timestamp.toISOString();
+                                time.textContent=timestamp.toLocaleString();
+                            }else{
+                                time.textContent=String(message.timestamp);
+                            }
+                        }
+                        footer.append(time);
+                        if(message.status!==undefined){
+                            const state=document.createElement('span');
+                            state.textContent=message.status;
+                            footer.append(state);
+                        }
+                        const body=await renderDescriptor(
+                            {kind:'markdown',content:message.content},
+                            preview,
+                            depth+1
+                        );
+                        article.append(header,body,footer);
+                        return article;
+                    })
+                );
+                preview.controller.signal.throwIfAborted();
+                for(const entry of entries){
+                    messages.append(entry);
+                }
+                rendered.append(messages);
+                break;
+            }
+            case 'collection':{
+                if(!is.array(descriptor.items)){
+                    throw new TypeError('File preview collection items must be an array.');
+                }
+                const items=await Promise.all(
+                    descriptor.items.map(function renderCollectionItem(item){
+                        return renderDescriptor(item,preview,depth+1);
+                    })
+                );
+                preview.controller.signal.throwIfAborted();
+                const collection=document.createElement('div');
+                collection.className='file-preview-collection';
+                for(const item of items){
+                    collection.append(item);
+                }
+                rendered.append(collection);
+                break;
+            }
+            case 'image':
+            case 'audio':
+            case 'pdf':
+            case 'download':{
+                if(descriptor.kind==='download'&&!is.string(descriptor.fileName)){
+                    throw new TypeError('File preview downloads require a fileName string.');
+                }
+                if(is.function(descriptor.content)){
+                    const item=document.createElement('div');
+                    const loadButton=document.createElement('button');
+                    const state=document.createElement('p');
+                    loadButton.type='button';
+                    loadButton.textContent=`Load ${descriptor.title||descriptor.fileName||descriptor.kind}`;
+                    state.setAttribute('role','status');
+                    loadButton.addEventListener(
+                        'click',
+                        async function loadPreviewMedia(){
+                            loadButton.disabled=true;
+                            state.setAttribute('role','status');
+                            state.textContent='Loading...';
+                            try{
+                                const content=await descriptor.content({signal:preview.controller.signal});
+                                if(!isCurrentPreview(preview)){
+                                    return;
+                                }
+                                item.replaceChildren(createPreviewMedia(descriptor,content,preview));
+                            }catch(error){
+                                if(isCurrentPreview(preview)){
+                                    state.setAttribute('role','alert');
+                                    state.textContent='Unable to load this item.';
+                                    loadButton.disabled=false;
+                                    arcaneLogging.error('Unable to load file preview item:',error);
+                                }
+                            }
+                        },
+                        {signal:preview.controller.signal}
+                    );
+                    item.append(loadButton,state);
+                    rendered.append(item);
+                }else{
+                    rendered.append(createPreviewMedia(descriptor,descriptor.content,preview));
+                }
+                break;
+            }
+            default:
+                throw new TypeError(`Unsupported file preview kind: ${String(descriptor.kind)}.`);
+        }
+        return rendered;
+    }
+
+    function createPreviewMedia(descriptor,content,preview){
+        const tag={image:'img',audio:'audio',pdf:'iframe',download:'a'}[descriptor.kind];
+        const media=document.createElement(tag);
+        const url=previewObjectURL(content,preview);
+        preview.media.add(media);
+        if(descriptor.kind==='download'){
+            media.className='file-preview-download';
+            media.href=url;
+            media.download=descriptor.fileName;
+            media.textContent=descriptor.title||descriptor.fileName;
+        }else{
+            media.src=url;
+            if(descriptor.kind==='image'){
+                media.alt=descriptor.alt??descriptor.title??content.name??'';
+            }else if(descriptor.kind==='audio'){
+                media.controls=true;
+                media.preload='metadata';
+                media.setAttribute('aria-label',descriptor.title||content.name||'Audio preview');
+            }else{
+                media.title=descriptor.title||content.name||'PDF preview';
+            }
+        }
+        return media;
+    }
+
+    async function renderFile(fileRef,context={},preview){
+        const details={
+            directory:String(context.directory||''),
+            extension:String(fileRef.ext||''),
+            fileName:String(context.fileName||fileRef.name||''),
+            path:joinProviderPath(context.directory,context.fileName||fileRef.name),
+            mimeType:String(fileRef.mime||fileRef.type||''),
+            signal:preview.controller.signal
+        };
+        const mimeType=details.mimeType.split(';')[0].trim().toLowerCase();
+        if(is.function(host.previewDescriptor)){
+            const descriptor=await host.previewDescriptor(fileRef,details);
+            preview.controller.signal.throwIfAborted();
+            if(descriptor!==null&&descriptor!==undefined){
+                return renderDescriptor(descriptor,preview);
+            }
+        }
 
-            rendered.innerHTML=fileRef.ext==='md'
-                ?fileRef.parsed
-                :await fileRef.text();
-            return rendered;
+        if(mimeType.startsWith('image/')||['png','jpg','jpeg','webp','svg'].includes(fileRef.ext)){
+            return renderDescriptor(
+                {kind:'image',content:new Blob([fileRef],{type:fileRef.mime}),alt:fileRef.name},
+                preview
+            );
+        }
+        if(mimeType.startsWith('audio/')){
+            return renderDescriptor(
+                {kind:'audio',content:new Blob([fileRef],{type:fileRef.mime})},
+                preview
+            );
+        }
+        if(fileRef.ext==='pdf'||mimeType==='application/pdf'){
+            return renderDescriptor(
+                {kind:'pdf',content:new Blob([fileRef],{type:fileRef.mime}),title:fileRef.name},
+                preview
+            );
+        }
+        if(fileRef.ext==='html'||mimeType==='text/html'){
+            const html=await fileRef.text();
+            preview.controller.signal.throwIfAborted();
+            return renderDescriptor({kind:'html',content:html,title:fileRef.name},preview);
+        }
+        if(fileRef.ext==='md'||mimeType==='text/markdown'){
+            const markdown=await fileRef.text();
+            preview.controller.signal.throwIfAborted();
+            return renderDescriptor({kind:'markdown',content:markdown},preview);
         }
 
         const rendered=document.createElement('div');
-        let preview=fileRef.parsed;
-
-        if(
-            ['json','jsonl','ndjson'].includes(fileRef.ext)
-            &&is.function(host.previewTransform)
-        ){
-            preview=await host.previewTransform(
-                preview,
+        rendered.className='file-preview';
+        let value=fileRef.parsed;
+        const transformed=['json','jsonl','ndjson'].includes(fileRef.ext)
+            &&is.function(host.previewTransform);
+
+        if(transformed){
+            value=await host.previewTransform(
+                value,
                 {
                     directory:String(context.directory||''),
                     extension:String(fileRef.ext||''),
                     fileName:String(context.fileName||fileRef.name||'')
                 }
             );
+            preview.controller.signal.throwIfAborted();
         }
 
         switch(fileRef.ext){
             case 'json':
                 rendered.append(
                     createPreformatted(
-                        JSON.stringify(preview,null,4)
+                        JSON.stringify(value,null,4)
                     )
                 );
                 break;
             case 'jsonl':
             case 'ndjson':{
-                const records=is.array(preview)?preview:[];
+                if(!transformed){
+                    rendered.append(createPreformatted(await fileRef.text()));
+                    break;
+                }
+                const records=is.array(value)?value:[];
 
                 for(let i=0;i<records.length;i++){
                     rendered.append(
@@ -1551,11 +1965,23 @@
                 break;
             }
             default:
-                rendered.append(
-                    createPreformatted(await fileRef.text())
-                );
+                if(mimeType.startsWith('text/')
+                    ||['application/json','application/javascript','application/xml'].includes(mimeType)
+                    ||mimeType.endsWith('+json')
+                    ||mimeType.endsWith('+xml')
+                    ||['txt','log','css','js','mjs'].includes(fileRef.ext)){
+                    rendered.append(createPreformatted(await fileRef.text()));
+                }else{
+                    rendered.append(
+                        await renderDescriptor(
+                            {kind:'download',content:fileRef,fileName:details.fileName},
+                            preview
+                        )
+                    );
+                }
         }
 
+        preview.controller.signal.throwIfAborted();
         return rendered;
     }
 
@@ -1879,10 +2305,7 @@
         fileOpenGeneration+=1;
         deleteGeneration+=1;
         selectionGeneration+=1;
-        if(activeFileURL){
-            URL.revokeObjectURL(activeFileURL);
-            activeFileURL='';
-        }
+        releasePreview(activePreview,'file-manager-destroyed');
         treeItems.clear();
         provider=null;
         filter=null;
@@ -1917,13 +2340,14 @@
 
         for(let i=0;i<tableNames.length;i++){
             const tableName=tableNames[i];
+            if(!isVisibleDirectory(tableName)){
+                continue;
+            }
             const keys=await dbopfs.getAllKeys(tableName);
             if(destroyed||sequence!==gridLoadSequence){
                 return [];
             }
-            const files=keys
-                .filter(isVisibleFileName)
-                .sort();
+            const files=visibleFileNames(keys,tableName).sort();
             const metadata=layout==='files'
                 ?await getFilesMetadata(tableName,files)
                 :[];