arcane-os 0.1.0-dev.5

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

@@ -0,0 +1,264 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{display:block}
+    .file-drop{overflow:hidden}
+    .drop-zone{
+        align-items:center;
+        border:2px dashed var(--arcane-border);
+        border-radius:var(--arcane-radius-medium);
+        display:grid;
+        gap:var(--arcane-space-3);
+        justify-items:center;
+        min-height:9rem;
+        padding:var(--arcane-space-5);
+        text-align:center;
+        transition:background-color 160ms ease,border-color 160ms ease;
+    }
+    .drop-zone[data-drag-active="true"]{
+        background:color-mix(in srgb,var(--arcane-action) 9%,var(--arcane-surface));
+        border-color:var(--arcane-action);
+    }
+    .drop-zone[aria-busy="true"]{cursor:wait;opacity:.72}
+    .drop-title{font-weight:700;margin:0}
+    .drop-hint{color:var(--arcane-muted);margin:0;max-width:36rem}
+    input[type="file"]{display:none}
+    .progress-wrap{display:grid;gap:var(--arcane-space-2);padding-top:var(--arcane-space-3)}
+    progress{accent-color:var(--arcane-action);width:100%}
+    .status{min-height:1.4em}
+</style>
+
+<section class="file-drop arcane-card" aria-labelledby="fileDropTitle">
+    <div id="dropZone" class="drop-zone">
+        <p id="fileDropTitle" class="drop-title">Add files</p>
+        <p id="fileDropHint" class="drop-hint">Drop files here or choose them from this device.</p>
+        <button id="choose" class="arcane-button" type="button">Choose files</button>
+        <input id="picker" type="file" aria-describedby="fileDropHint">
+    </div>
+    <div id="feedback" class="arcane-card__body" hidden>
+        <div id="progressWrap" class="progress-wrap" hidden>
+            <progress id="progress" max="100"></progress>
+            <span id="progressLabel"></span>
+        </div>
+        <p id="status" class="status" role="status" aria-live="polite"></p>
+    </div>
+</section>
+
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const dropZone=root.querySelector('#dropZone');
+    const title=root.querySelector('#fileDropTitle');
+    const hint=root.querySelector('#fileDropHint');
+    const choose=root.querySelector('#choose');
+    const picker=root.querySelector('#picker');
+    const feedback=root.querySelector('#feedback');
+    const progressWrap=root.querySelector('#progressWrap');
+    const progressElement=root.querySelector('#progress');
+    const progressLabel=root.querySelector('#progressLabel');
+    const statusElement=root.querySelector('#status');
+
+    let dragDepth=0;
+    let busy=false;
+    let currentFiles=[];
+    let progress=null;
+    let options={};
+
+    host.clear=clear;
+    host.configure=configure;
+    host.openPicker=openPicker;
+    host.setBusy=setBusy;
+    host.setError=setError;
+    host.setProgress=setProgress;
+
+    Object.defineProperties(host,{
+        busy:{get:()=>busy,set:setBusy},
+        files:{get:()=>currentFiles.slice()},
+        options:{get:getOptions,set:configure},
+        progress:{get:()=>progress,set:setProgress}
+    });
+
+    choose.addEventListener('click',openPicker);
+    picker.addEventListener('change',()=>acceptFiles(picker.files,'picker'));
+    dropZone.addEventListener('dragenter',dragEnter);
+    dropZone.addEventListener('dragover',dragOver);
+    dropZone.addEventListener('dragleave',dragLeave);
+    dropZone.addEventListener('drop',dropFiles);
+
+    function datasetOptions(){
+        return {
+            accept:host.dataset.accept||'',
+            chooseLabel:host.dataset.chooseLabel||'Choose files',
+            hint:host.dataset.hint||'Drop files here or choose them from this device.',
+            maxFiles:numberOr(host.dataset.maxFiles,0),
+            multiple:host.dataset.multiple!=='false',
+            title:host.dataset.title||'Add files'
+        };
+    }
+
+    function configure(input={}){
+        const previous={...datasetOptions(),...options};
+        options={
+            ...previous,
+            ...input,
+            accept:`${input.accept??previous.accept??''}`,
+            maxFiles:numberOr(input.maxFiles??previous.maxFiles,0),
+            multiple:input.multiple===undefined?Boolean(previous.multiple):Boolean(input.multiple)
+        };
+        title.innerText=`${options.title||'Add files'}`;
+        hint.innerText=`${options.hint||''}`;
+        choose.innerText=`${options.chooseLabel||'Choose files'}`;
+        picker.multiple=options.multiple;
+        if(options.accept){
+            picker.accept=options.accept;
+        }else{
+            picker.removeAttribute('accept');
+        }
+        return getOptions();
+    }
+
+    function getOptions(){
+        return {...options};
+    }
+
+    function openPicker(){
+        if(busy){
+            return false;
+        }
+        picker.click();
+        return true;
+    }
+
+    function dragEnter(event){
+        event.preventDefault();
+        if(busy){
+            return;
+        }
+        dragDepth+=1;
+        dropZone.dataset.dragActive='true';
+    }
+
+    function dragOver(event){
+        event.preventDefault();
+        if(event.dataTransfer){
+            event.dataTransfer.dropEffect=busy?'none':'copy';
+        }
+    }
+
+    function dragLeave(event){
+        event.preventDefault();
+        dragDepth=Math.max(0,dragDepth-1);
+        if(!dragDepth){
+            dropZone.dataset.dragActive='false';
+        }
+    }
+
+    function dropFiles(event){
+        event.preventDefault();
+        dragDepth=0;
+        dropZone.dataset.dragActive='false';
+        if(busy){
+            return;
+        }
+        acceptFiles(event.dataTransfer?.files||[],'drop');
+    }
+
+    function acceptFiles(fileList=[],source='api'){
+        const files=Array.from(fileList||[]).filter(Boolean);
+        if(!files.length){
+            return false;
+        }
+        if(options.maxFiles>0&&files.length>options.maxFiles){
+            setError(`Select no more than ${options.maxFiles} file${options.maxFiles===1?'':'s'}.`);
+            return false;
+        }
+        currentFiles=options.multiple?files:files.slice(0,1);
+        setError('');
+        feedback.hidden=false;
+        statusElement.className='status';
+        statusElement.innerText=`${currentFiles.length} file${currentFiles.length===1?'':'s'} selected.`;
+        host.dispatchEvent(new CustomEvent('file-drop-selected',{
+            bubbles:true,
+            cancelable:false,
+            composed:true,
+            detail:{files:currentFiles.slice(),source}
+        }));
+        return currentFiles.slice();
+    }
+
+    function setBusy(value=true,message=''){
+        busy=Boolean(value);
+        choose.disabled=busy;
+        picker.disabled=busy;
+        dropZone.setAttribute('aria-busy',`${busy}`);
+        host.toggleAttribute('data-busy',busy);
+        if(message){
+            feedback.hidden=false;
+            statusElement.className='status';
+            statusElement.innerText=`${message}`;
+        }
+        host.dispatchEvent(new CustomEvent('file-drop-state',{
+            bubbles:true,
+            composed:true,
+            detail:{busy,progress}
+        }));
+        return busy;
+    }
+
+    function setProgress(value=null,label=''){
+        const numeric=Number(value);
+        progress=value===null||value===undefined||!Number.isFinite(numeric)
+            ?null
+            :Math.min(100,Math.max(0,numeric));
+        feedback.hidden=progress===null&&!statusElement.innerText;
+        progressWrap.hidden=progress===null;
+        if(progress!==null){
+            progressElement.value=progress;
+            progressLabel.innerText=label||`${Math.round(progress)}%`;
+        }else{
+            progressElement.removeAttribute('value');
+            progressLabel.innerText='';
+        }
+        host.dispatchEvent(new CustomEvent('file-drop-progress',{
+            bubbles:true,
+            composed:true,
+            detail:{progress,label:progressLabel.innerText}
+        }));
+        return progress;
+    }
+
+    function setError(message=''){
+        const text=`${message||''}`;
+        feedback.hidden=!text&&progress===null;
+        statusElement.innerText=text;
+        statusElement.className=text?'status arcane-error':'status';
+        if(text){
+            host.dispatchEvent(new CustomEvent('file-drop-error',{
+                bubbles:true,
+                composed:true,
+                detail:{message:text}
+            }));
+        }
+        return text;
+    }
+
+    function clear(){
+        currentFiles=[];
+        picker.value='';
+        setBusy(false);
+        setProgress(null);
+        setError('');
+        feedback.hidden=true;
+        return true;
+    }
+
+    function numberOr(value,fallback){
+        const numeric=Number(value);
+        return Number.isFinite(numeric)&&numeric>=0?numeric:fallback;
+    }
+
+    configure(datasetOptions());
+    dropZone.dataset.dragActive='false';
+    setBusy(false);
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('file-drop-ready',{bubbles:true,composed:true}));
+</script>

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

@@ -0,0 +1,293 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{display:block;min-width:0}
+    .inspector{overflow:hidden}
+    .title-wrap{display:grid;gap:var(--arcane-space-1);min-width:0}
+    .title,.path{overflow-wrap:anywhere}
+    .path{color:var(--arcane-muted);font-size:.86rem;margin:0}
+    .status{flex:0 0 auto}
+    .metadata{
+        display:grid;
+        gap:var(--arcane-space-3);
+        grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
+        margin:0;
+    }
+    .metadata>div{display:grid;gap:var(--arcane-space-1);min-width:0}
+    .metadata dt{color:var(--arcane-muted);font-size:.8rem;font-weight:650;text-transform:uppercase}
+    .metadata dd{margin:0;overflow-wrap:anywhere}
+    .preview-shell{
+        background:var(--arcane-surface);
+        border:1px solid var(--arcane-border);
+        border-radius:var(--arcane-radius-medium);
+        margin-top:var(--arcane-space-4);
+        max-height:32rem;
+        min-height:8rem;
+        overflow:auto;
+        padding:var(--arcane-space-4);
+    }
+    .preview-shell pre{font:inherit;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
+    .preview-empty{color:var(--arcane-muted);margin:0}
+    .actions{display:flex;flex-wrap:wrap;gap:var(--arcane-space-2)}
+    .state{margin:var(--arcane-space-4)}
+</style>
+
+<section id="region" class="inspector arcane-card" aria-label="File inspector">
+    <p id="empty" class="state arcane-state arcane-state--empty">Select an item to inspect.</p>
+    <div id="content" hidden>
+        <header class="arcane-card__header">
+            <div class="title-wrap">
+                <slot name="title"><h2 id="inspectorTitle" class="title arcane-section-heading"></h2></slot>
+                <p id="path" class="path"></p>
+            </div>
+            <span id="status" class="status arcane-badge" hidden></span>
+        </header>
+        <div class="arcane-card__body">
+            <slot name="metadata"><dl id="metadata" class="metadata"></dl></slot>
+            <div id="previewShell" class="preview-shell" aria-label="Preview">
+                <slot name="preview"><div id="preview"></div></slot>
+            </div>
+        </div>
+        <footer id="footer" class="arcane-card__footer" hidden>
+            <slot name="actions"><div id="actions" class="actions"></div></slot>
+        </footer>
+    </div>
+</section>
+
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const region=root.querySelector('#region');
+    const empty=root.querySelector('#empty');
+    const content=root.querySelector('#content');
+    const title=root.querySelector('#inspectorTitle');
+    const path=root.querySelector('#path');
+    const status=root.querySelector('#status');
+    const metadata=root.querySelector('#metadata');
+    const previewShell=root.querySelector('#previewShell');
+    const preview=root.querySelector('#preview');
+    const footer=root.querySelector('#footer');
+    const actions=root.querySelector('#actions');
+
+    let actionItems=[];
+    let current=null;
+    let options={};
+
+    host.clear=clear;
+    host.configure=configure;
+    host.setActions=setActions;
+    host.setBusy=setBusy;
+    host.setError=setError;
+    host.setPreview=setPreview;
+    host.show=show;
+
+    Object.defineProperties(host,{
+        file:{get:()=>current?{...current}:null,set:show},
+        options:{get:()=>({...options}),set:configure}
+    });
+
+    actions.addEventListener('click',handleAction);
+
+    function datasetOptions(){
+        return {
+            ariaLabel:host.dataset.ariaLabel||'File inspector',
+            emptyLabel:host.dataset.emptyLabel||'Select an item to inspect.',
+            previewLabel:host.dataset.previewLabel||'Preview'
+        };
+    }
+
+    function configure(input={}){
+        options={...datasetOptions(),...options,...input};
+        region.setAttribute('aria-label',`${options.ariaLabel||'File inspector'}`);
+        empty.innerText=`${options.emptyLabel||'Select an item to inspect.'}`;
+        previewShell.setAttribute('aria-label',`${options.previewLabel||'Preview'}`);
+        return {...options};
+    }
+
+    function show(input={}){
+        if(!input){
+            clear();
+            return null;
+        }
+        current={...input};
+        empty.hidden=true;
+        content.hidden=false;
+        title.innerText=`${input.title??input.name??input.path??'Item'}`;
+        path.innerText=`${input.path??''}`;
+        path.hidden=!path.innerText;
+        setStatus(input.status||'');
+        renderMetadata(input.metadata??defaultMetadata(input));
+        setActions(input.actions||[]);
+        setPreview(input.preview??input.content??'');
+        host.dispatchEvent(new CustomEvent('file-inspector-change',{
+            bubbles:true,
+            composed:true,
+            detail:{file:{...current}}
+        }));
+        return {...current};
+    }
+
+    function defaultMetadata(input={}){
+        return [
+            ['Type',input.mimeType||input.type||''],
+            ['Size',formatSize(input.size)],
+            ['Modified',formatDate(input.lastModified)]
+        ].filter(([,value])=>value);
+    }
+
+    function renderMetadata(input=[]){
+        const entries=Array.isArray(input)
+            ?input.map(entry=>Array.isArray(entry)?entry:[entry.label,entry.value])
+            :Object.entries(input||{});
+        const fragment=document.createDocumentFragment();
+        for(const [label,value] of entries){
+            if(value===undefined||value===null||value===''){
+                continue;
+            }
+            const group=document.createElement('div');
+            const term=document.createElement('dt');
+            const description=document.createElement('dd');
+            term.innerText=`${label}`;
+            description.innerText=`${value}`;
+            group.append(term,description);
+            fragment.append(group);
+        }
+        metadata.replaceChildren(fragment);
+        metadata.hidden=!metadata.children.length;
+    }
+
+    function setPreview(value=''){
+        preview.replaceChildren();
+        if(typeof Node!=='undefined'&&value instanceof Node){
+            preview.append(value);
+        }else if(`${value??''}`){
+            const text=document.createElement('pre');
+            text.innerText=`${value}`;
+            preview.append(text);
+        }else{
+            const message=document.createElement('p');
+            message.className='preview-empty';
+            message.innerText='No preview available.';
+            preview.append(message);
+        }
+        return value;
+    }
+
+    function setActions(values=[]){
+        actionItems=Array.from(values||[]).map((value,index)=>({
+            disabled:Boolean(value.disabled),
+            id:`${value.id??value.action??`action-${index+1}`}`,
+            label:`${value.label??value.title??'Action'}`,
+            variant:`${value.variant??(index?'secondary':'action')}`
+        }));
+        const fragment=document.createDocumentFragment();
+        for(const action of actionItems){
+            const button=document.createElement('button');
+            button.type='button';
+            button.className=`arcane-button ${action.variant==='secondary'?'arcane-button--secondary':action.variant==='tertiary'?'arcane-button--tertiary':''}`.trim();
+            button.dataset.inspectorAction=action.id;
+            button.disabled=action.disabled;
+            button.innerText=action.label;
+            fragment.append(button);
+        }
+        actions.replaceChildren(fragment);
+        footer.hidden=!actionItems.length;
+        return actionItems.map(action=>({...action}));
+    }
+
+    function handleAction(event){
+        const button=event.target.closest('[data-inspector-action]');
+        const action=actionItems.find(candidate=>candidate.id===button?.dataset.inspectorAction);
+        if(!button||!action||action.disabled){
+            return;
+        }
+        host.dispatchEvent(new CustomEvent('file-inspector-action',{
+            bubbles:true,
+            cancelable:true,
+            composed:true,
+            detail:{action:{...action},file:current?{...current}:null,id:action.id}
+        }));
+    }
+
+    function setStatus(value=''){
+        const next=typeof value==='object'?value:{label:value,status:value};
+        status.innerText=`${next.label||''}`;
+        status.dataset.status=`${next.status||''}`;
+        status.hidden=!status.innerText;
+    }
+
+    function setBusy(value=true,message='Loading preview…'){
+        const busy=Boolean(value);
+        previewShell.setAttribute('aria-busy',`${busy}`);
+        if(busy){
+            preview.replaceChildren();
+            const state=document.createElement('p');
+            state.className='arcane-state arcane-state--loading';
+            state.innerText=`${message}`;
+            preview.append(state);
+        }
+        return busy;
+    }
+
+    function setError(message=''){
+        const text=`${message||''}`;
+        preview.replaceChildren();
+        if(text){
+            const state=document.createElement('p');
+            state.className='arcane-state arcane-state--error';
+            state.innerText=text;
+            preview.append(state);
+            host.dispatchEvent(new CustomEvent('file-inspector-error',{
+                bubbles:true,
+                composed:true,
+                detail:{file:current?{...current}:null,message:text}
+            }));
+        }
+        return text;
+    }
+
+    function formatSize(value){
+        const bytes=Number(value);
+        if(!Number.isFinite(bytes)||bytes<0){
+            return '';
+        }
+        if(bytes<1024){
+            return `${bytes} B`;
+        }
+        const units=['KB','MB','GB','TB'];
+        let amount=bytes/1024;
+        let unit=0;
+        while(amount>=1024&&unit<units.length-1){
+            amount/=1024;
+            unit+=1;
+        }
+        return `${amount.toFixed(amount>=10?1:2)} ${units[unit]}`;
+    }
+
+    function formatDate(value){
+        if(value===undefined||value===null||value===''){
+            return '';
+        }
+        const date=new Date(value);
+        return Number.isNaN(date.getTime())?'':date.toLocaleString();
+    }
+
+    function clear(){
+        current=null;
+        actionItems=[];
+        content.hidden=true;
+        empty.hidden=false;
+        title.innerText='';
+        path.innerText='';
+        metadata.replaceChildren();
+        preview.replaceChildren();
+        actions.replaceChildren();
+        footer.hidden=true;
+        host.dispatchEvent(new CustomEvent('file-inspector-cleared',{bubbles:true,composed:true}));
+        return true;
+    }
+
+    configure(datasetOptions());
+    clear();
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('file-inspector-ready',{bubbles:true,composed:true}));
+</script>