arcane-os 0.1.0-dev.5

package/runtime/arcane/components/modal.html

@@ -0,0 +1,402 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3" />
+<style>
+    :host{
+        --modal-surface:var(--modal-background,var(--background,#fff));
+        --modal-border:var(--border-color,rgba(127,127,127,.35));
+        --modal-shadow:0 .5em 2em var(--shadow-color,rgba(0,0,0,.28));
+        --modal-backdrop:rgba(0,0,0,.55);
+        --modal-width:min(35em,calc(100vw - 2em));
+        --modal-max-height:min(80vh,calc(100vh - 2em));
+        --modal-radius:.65em;
+        --modal-padding:3em;
+        display:contents;
+    }
+
+    dialog.modal{
+        box-sizing:border-box;
+        width:var(--modal-width);
+        max-width:var(--modal-width);
+        max-height:var(--modal-max-height);
+        margin:auto;
+        padding:0;
+        overflow:hidden;
+        border:1px solid var(--modal-border);
+        border-radius:var(--modal-radius);
+        color:var(--text-color,CanvasText);
+        background:var(--modal-surface);
+        box-shadow:var(--modal-shadow);
+    }
+
+    dialog.modal::backdrop{
+        background:var(--modal-backdrop);
+        backdrop-filter:blur(var(--modal-backdrop-blur,0));
+    }
+
+    .modal-shell{
+        position:relative;
+        display:grid;
+        grid-template-rows:auto auto minmax(0,1fr) auto;
+        max-height:var(--modal-max-height);
+        overflow:hidden;
+    }
+
+    .modal-header:empty,
+    .modal-footer:empty{
+        display:none;
+    }
+
+    .modal-header,
+    .modal-footer{
+        padding:var(--modal-region-padding,1em var(--modal-padding));
+    }
+
+    .modal-header{
+        border-bottom:1px solid var(--modal-border);
+    }
+
+    .modal-footer{
+        border-top:1px solid var(--modal-border);
+    }
+
+    .modal-content{
+        box-sizing:border-box;
+        min-height:0;
+        padding:var(--modal-padding);
+        overflow:auto;
+        overscroll-behavior:contain;
+    }
+
+    .modal-search{
+        box-sizing:border-box;
+        width:auto;
+        margin:1em var(--modal-padding) 0;
+        padding:.65em .75em;
+        border:1px solid var(--modal-border);
+        border-radius:.4em;
+        color:inherit;
+        background:var(--input-background,var(--modal-surface));
+    }
+
+    .modal>.modal-shell>.modal-button{
+        position:absolute;
+        top:.5em;
+        right:.5em;
+        z-index:2;
+        min-width:2.25em;
+        min-height:2.25em;
+        margin:0;
+        padding:.35em;
+        border:0;
+        border-radius:.4em;
+        color:inherit;
+        background:transparent;
+        box-shadow:none;
+        cursor:pointer;
+        opacity:.55;
+    }
+
+    .modal-button:hover,
+    .modal-button:focus-visible{
+        background:var(--secondary-color,rgba(127,127,127,.18));
+        opacity:1;
+    }
+
+    .modal-content input,
+    .modal-content textarea{
+        box-sizing:border-box;
+        width:100%;
+        max-width:100%;
+    }
+
+    .modal-content h1{
+        overflow-wrap:anywhere;
+    }
+
+    .report-progress-list{
+        list-style:none;
+        margin:2em 0 0;
+        padding:0;
+    }
+
+    .report-progress-list li{
+        display:flex;
+        align-items:center;
+        justify-content:space-between;
+        gap:2em;
+        padding:.75em 0;
+        border-bottom:1px solid var(--modal-border);
+    }
+
+    .report-progress-status{white-space:nowrap}
+    .report-progress-list li[data-status="complete"] .report-progress-status{color:var(--success-color,green)}
+    .report-progress-list li[data-status="failed"] .report-progress-status{color:var(--danger-color,#b00020)}
+    .hidden{display:none!important}
+
+    @media(max-width:36em){
+        :host{
+            --modal-width:calc(100vw - 1em);
+            --modal-max-height:calc(100vh - 1em);
+            --modal-padding:1em;
+        }
+    }
+
+    @media(prefers-reduced-motion:reduce){
+        dialog.modal{scroll-behavior:auto}
+    }
+</style>
+
+<dialog id="modal" class="modal" part="surface" aria-label="Dialog">
+    <div class="modal-shell" part="shell">
+        <button id="close" class="modal-button" part="close" type="button" aria-label="Close" title="Close">&#10005;</button>
+        <header id="modal-header" class="modal-header" part="header" hidden><slot id="header-slot" name="header"></slot></header>
+        <input type="search" id="modal-search" class="modal-search hidden" part="search" placeholder="Search..." aria-label="Search modal content">
+        <div id="modal-content" class="modal-content" part="body"><slot name="body"></slot></div>
+        <footer id="modal-footer" class="modal-footer" part="footer" hidden><slot id="footer-slot" name="footer"></slot></footer>
+    </div>
+</dialog>
+
+<script type="module">
+    const host=this;
+    const shadowRoot=host.shadowRoot;
+    const dialog=shadowRoot.querySelector('#modal');
+    const modalContent=shadowRoot.querySelector('#modal-content');
+    const modalSearch=shadowRoot.querySelector('#modal-search');
+    const closeButton=shadowRoot.querySelector('#close');
+    const headerSlot=shadowRoot.querySelector('#header-slot');
+    const footerSlot=shadowRoot.querySelector('#footer-slot');
+    const modalStack=window.modalStack=window.modalStack||[];
+
+    let running=false;
+    let disposed=false;
+    let activeRun=Promise.resolve([]);
+    let returnFocus=null;
+
+    host.ready=false;
+    host.populate=populate;
+    host.open=open;
+    host.close=close;
+    host.runTasks=runTasks;
+
+    Object.defineProperties(host,{
+        running:{get:function getRunningState(){return running;}},
+        opened:{get:function getOpenedState(){return dialog.open;}}
+    });
+
+    dialog.addEventListener('cancel',function preventRunningDialogCancellation(event){
+        event.preventDefault();
+        close(event);
+    });
+
+    dialog.addEventListener('click',function closeFromDialogBackdrop(event){
+        if(event.target!==dialog||running){
+            return;
+        }
+        const bounds=dialog.getBoundingClientRect();
+        const inside=event.clientX>=bounds.left
+            &&event.clientX<=bounds.right
+            &&event.clientY>=bounds.top
+            &&event.clientY<=bounds.bottom;
+        if(!inside){
+            close(event);
+        }
+    });
+
+    closeButton.addEventListener('click',function closeFromButton(event){
+        close(event);
+    });
+
+    for(const slot of [headerSlot,footerSlot]){
+        const region=slot.parentElement;
+        function updateSlotVisibility(){region.hidden=slot.assignedNodes({flatten:true}).length===0;}
+        slot.addEventListener('slotchange',updateSlotVisibility);
+        updateSlotVisibility();
+    }
+
+    modalContent.addEventListener('click',function dispatchModalAction(event){
+        const action=event.target.closest('[data-modal-action]');
+        if(!action){
+            return;
+        }
+        const detail={...action.dataset};
+        detail.action=detail.modalAction;
+        delete detail.modalAction;
+        host.dispatchEvent(new CustomEvent('modal-action',{detail}));
+    });
+
+    async function open(){
+        if(disposed){
+            return false;
+        }
+
+        const wasOpen=dialog.open;
+        const stackIndex=modalStack.indexOf(host);
+        if(stackIndex>-1){
+            modalStack.splice(stackIndex,1);
+        }
+        modalStack.push(host);
+
+        if(!wasOpen){
+            returnFocus=document.activeElement instanceof HTMLElement
+                ?document.activeElement
+                :null;
+            dialog.showModal();
+            queueMicrotask(function focusOpenedModal(){
+                const focusTarget=modalContent.querySelector('[autofocus],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),a[href]')||closeButton;
+                focusTarget?.focus({preventScroll:true});
+            });
+            host.dispatchEvent(new CustomEvent('modal-opened'));
+        }
+        return true;
+    }
+
+    async function close(_event,force=false){
+        if(disposed){
+            return false;
+        }
+        if(running&&!force){
+            return true;
+        }
+
+        const wasOpen=dialog.open;
+        if(wasOpen){
+            dialog.close();
+        }
+        closeButton.classList.remove('hidden');
+
+        const stackIndex=modalStack.indexOf(host);
+        if(stackIndex>-1){
+            modalStack.splice(stackIndex,1);
+        }
+
+        if(wasOpen){
+            host.dispatchEvent(new CustomEvent('modal-closed'));
+            const target=returnFocus;
+            returnFocus=null;
+            queueMicrotask(function restoreModalReturnFocus(){
+                if(target?.isConnected){
+                    target.focus({preventScroll:true});
+                }
+            });
+        }
+
+        if(host.hasAttribute('data-once')){
+            dispose();
+        }
+        return true;
+    }
+
+    function dispose(){
+        if(disposed){
+            return;
+        }
+        disposed=true;
+        host.ready=false;
+        const stackIndex=modalStack.indexOf(host);
+        if(stackIndex>-1){
+            modalStack.splice(stackIndex,1);
+        }
+        if(dialog.open){
+            dialog.close();
+        }
+        host.remove();
+    }
+
+    async function populate(content='<p>Content goes here</p>',search=false){
+        closeButton.classList.remove('hidden');
+        modalSearch.classList.toggle('hidden',!search);
+        if(content instanceof Node){
+            modalContent.replaceChildren(content);
+        }else{
+            modalContent.innerHTML=content;
+        }
+        const heading=modalContent.querySelector('h1,h2,h3');
+        if(heading){
+            heading.id=heading.id||`modal-title-${Math.random().toString(36).slice(2)}`;
+            dialog.setAttribute('aria-labelledby',heading.id);
+            dialog.removeAttribute('aria-label');
+        }else{
+            dialog.removeAttribute('aria-labelledby');
+            dialog.setAttribute('aria-label',host.dataset.label||'Dialog');
+        }
+        return modalContent;
+    }
+
+    async function runTasks(title='Stand By While Reports Are Generated',jobs=[]){
+        if(running){
+            return activeRun;
+        }
+
+        const tasks=jobs.filter(function isRunnableTask(job){
+            return job&&typeof job.name==='string'&&typeof job.task==='function';
+        });
+        if(!tasks.length){
+            return [];
+        }
+
+        running=true;
+        closeButton.classList.add('hidden');
+        modalSearch.classList.add('hidden');
+        modalContent.replaceChildren();
+
+        const heading=document.createElement('h2');
+        heading.id='modal-title';
+        heading.innerText=title;
+        dialog.setAttribute('aria-labelledby',heading.id);
+        dialog.removeAttribute('aria-label');
+        const message=document.createElement('p');
+        message.innerText='Please keep this window open until every task is complete.';
+        const list=document.createElement('ul');
+        list.className='report-progress-list';
+        list.setAttribute('aria-live','polite');
+
+        const rows=tasks.map(function createTaskProgressRow(job){
+            const row=document.createElement('li');
+            const name=document.createElement('span');
+            const status=document.createElement('span');
+            row.dataset.status='pending';
+            name.innerText=job.name;
+            status.className='report-progress-status';
+            status.innerText='Working...';
+            row.append(name,status);
+            list.append(row);
+            return {row,status};
+        });
+
+        modalContent.append(heading,message,list);
+        await open();
+
+        activeRun=Promise.allSettled(tasks.map(async function runProgressTask(job,index){
+            try{
+                const result=await job.task();
+                rows[index].row.dataset.status='complete';
+                rows[index].status.innerText='Complete';
+                return result;
+            }catch(error){
+                rows[index].row.dataset.status='failed';
+                rows[index].status.innerText='Unable to complete';
+                console.error(`Unable to complete ${job.name}:`,error);
+                throw error;
+            }
+        }));
+
+        const results=await activeRun;
+        const failed=results.some(function taskWasRejected(result){
+            return result.status==='rejected';
+        });
+        running=false;
+        closeButton.classList.remove('hidden');
+
+        if(failed){
+            heading.innerText='Some Tasks Could Not Be Completed';
+            message.innerText='You may close this message and try again.';
+            return results;
+        }
+
+        heading.innerText='All Tasks Complete';
+        message.innerText='Every task completed. You may close this message.';
+        return results;
+    }
+
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('modal-ready'));
+</script>

package/runtime/arcane/components/output-panel.html

@@ -0,0 +1,259 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{display:block;min-width:0}
+    .output-panel{overflow:hidden}
+    .title-wrap{display:grid;gap:var(--arcane-space-2);min-width:0}
+    .title{overflow-wrap:anywhere}
+    .meta{align-items:center;display:flex;flex-wrap:wrap;gap:var(--arcane-space-2)}
+    .coverage{color:var(--arcane-muted);font-size:.88rem;overflow-wrap:anywhere}
+    .header-actions,.footer-actions{display:flex;flex-wrap:wrap;gap:var(--arcane-space-2)}
+    .body{line-height:1.55;min-height:6rem;min-width:0;overflow-wrap:anywhere}
+    .body pre{font:inherit;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
+    .state{margin:0}
+    @media(max-width:36rem){
+        .header-actions{width:100%}
+        .header-actions>.arcane-button{flex:1 1 auto}
+    }
+</style>
+
+<section id="region" class="output-panel arcane-card" aria-label="Output">
+    <header class="arcane-card__header">
+        <div class="title-wrap">
+            <slot name="title"><h2 id="outputTitle" class="title arcane-section-heading">Output</h2></slot>
+            <div class="meta">
+                <span id="status" class="arcane-badge" hidden></span>
+                <slot name="coverage"><span id="coverage" class="coverage"></span></slot>
+            </div>
+        </div>
+        <slot name="header-actions"><div id="headerActions" class="header-actions"></div></slot>
+    </header>
+    <div class="arcane-card__body">
+        <div id="body" class="body" role="region" aria-live="polite">
+            <slot name="body" id="bodySlot"></slot>
+            <div id="bodyContent">
+                <p class="state arcane-state arcane-state--empty">No output yet.</p>
+            </div>
+        </div>
+    </div>
+    <footer id="footer" class="arcane-card__footer" hidden>
+        <slot name="actions"><div id="footerActions" class="footer-actions"></div></slot>
+    </footer>
+</section>
+
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const region=root.querySelector('#region');
+    const title=root.querySelector('#outputTitle');
+    const status=root.querySelector('#status');
+    const coverage=root.querySelector('#coverage');
+    const headerActions=root.querySelector('#headerActions');
+    const body=root.querySelector('#body');
+    const bodySlot=root.querySelector('#bodySlot');
+    const bodyContent=root.querySelector('#bodyContent');
+    const footer=root.querySelector('#footer');
+    const footerActions=root.querySelector('#footerActions');
+
+    let actions=[];
+    let output=null;
+    let options={};
+
+    host.clear=clear;
+    host.configure=configure;
+    host.setActions=setActions;
+    host.setBody=setBody;
+    host.setCoverage=setCoverage;
+    host.setError=setError;
+    host.setOutput=setOutput;
+    host.setPending=setPending;
+    host.setStatus=setStatus;
+
+    Object.defineProperties(host,{
+        options:{get:()=>({...options}),set:configure},
+        output:{get:()=>output?{...output}:null,set:setOutput}
+    });
+
+    headerActions.addEventListener('click',handleAction);
+    footerActions.addEventListener('click',handleAction);
+    bodySlot.addEventListener('slotchange',syncBodySlot);
+
+    function datasetOptions(){
+        return {
+            ariaLabel:host.dataset.ariaLabel||'Output',
+            bodyLabel:host.dataset.bodyLabel||'Output',
+            emptyLabel:host.dataset.emptyLabel||'No output yet.',
+            title:host.dataset.title||'Output'
+        };
+    }
+
+    function configure(input={}){
+        options={...datasetOptions(),...options,...input};
+        region.setAttribute('aria-label',`${options.ariaLabel||'Output'}`);
+        body.setAttribute('aria-label',`${options.bodyLabel||'Output'}`);
+        if(!output){
+            title.innerText=`${options.title||'Output'}`;
+            renderState(options.emptyLabel||'No output yet.','empty');
+        }
+        return {...options};
+    }
+
+    function setOutput(input={}){
+        if(!input){
+            clear();
+            return null;
+        }
+        output={...input};
+        title.innerText=`${input.title??options.title??'Output'}`;
+        setStatus(input.status||'');
+        setCoverage(input.coverage||'');
+        setActions(input.actions||[]);
+        if(input.pending){
+            setPending(true,input.pendingMessage||'Working…');
+        }else if(input.error){
+            setError(input.error);
+        }else{
+            setBody(input.body??input.content??'');
+        }
+        emitChange();
+        return {...output};
+    }
+
+    function setBody(value=''){
+        bodyContent.replaceChildren();
+        if(typeof Node!=='undefined'&&value instanceof Node){
+            bodyContent.append(value);
+        }else if(`${value??''}`){
+            const text=document.createElement('pre');
+            text.innerText=`${value}`;
+            bodyContent.append(text);
+        }else{
+            renderState(options.emptyLabel||'No output yet.','empty');
+        }
+        body.setAttribute('aria-busy','false');
+        return value;
+    }
+
+    function setCoverage(value=''){
+        const next=typeof value==='object'?value:{label:value};
+        coverage.innerText=`${next.label??next.text??''}`;
+        coverage.hidden=!coverage.innerText;
+        return coverage.innerText;
+    }
+
+    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;
+        return status.innerText;
+    }
+
+    function setActions(values=[]){
+        actions=Array.from(values||[]).map((value,index)=>({
+            disabled:Boolean(value.disabled),
+            id:`${value.id??value.action??`action-${index+1}`}`,
+            label:`${value.label??value.title??'Action'}`,
+            location:value.location==='header'?'header':'footer',
+            variant:`${value.variant??(index?'secondary':'action')}`
+        }));
+        renderActions(headerActions,actions.filter(action=>action.location==='header'));
+        const footerItems=actions.filter(action=>action.location==='footer');
+        renderActions(footerActions,footerItems);
+        footer.hidden=!footerItems.length;
+        return actions.map(action=>({...action}));
+    }
+
+    function renderActions(container,values){
+        const fragment=document.createDocumentFragment();
+        for(const action of values){
+            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.outputAction=action.id;
+            button.disabled=action.disabled;
+            button.innerText=action.label;
+            fragment.append(button);
+        }
+        container.replaceChildren(fragment);
+    }
+
+    function handleAction(event){
+        const button=event.target.closest('[data-output-action]');
+        const action=actions.find(candidate=>candidate.id===button?.dataset.outputAction);
+        if(!button||!action||action.disabled){
+            return;
+        }
+        host.dispatchEvent(new CustomEvent('output-panel-action',{
+            bubbles:true,
+            cancelable:true,
+            composed:true,
+            detail:{action:{...action},id:action.id,output:output?{...output}:null}
+        }));
+    }
+
+    function setPending(value=true,message='Working…'){
+        const pending=Boolean(value);
+        body.setAttribute('aria-busy',`${pending}`);
+        if(pending){
+            renderState(message,'loading');
+        }
+        host.dispatchEvent(new CustomEvent('output-panel-state',{
+            bubbles:true,
+            composed:true,
+            detail:{pending,state:pending?'loading':'ready'}
+        }));
+        return pending;
+    }
+
+    function setError(message=''){
+        const text=`${message||''}`;
+        body.setAttribute('aria-busy','false');
+        if(text){
+            renderState(text,'error');
+            host.dispatchEvent(new CustomEvent('output-panel-error',{
+                bubbles:true,
+                composed:true,
+                detail:{message:text,output:output?{...output}:null}
+            }));
+        }
+        return text;
+    }
+
+    function renderState(message,type){
+        const state=document.createElement('p');
+        state.className=`state arcane-state arcane-state--${type}`;
+        state.innerText=`${message}`;
+        bodyContent.replaceChildren(state);
+    }
+
+    function syncBodySlot(){
+        bodyContent.hidden=bodySlot.assignedNodes({flatten:true}).length>0;
+    }
+
+    function emitChange(){
+        host.dispatchEvent(new CustomEvent('output-panel-change',{
+            bubbles:true,
+            composed:true,
+            detail:{output:output?{...output}:null}
+        }));
+    }
+
+    function clear(){
+        output=null;
+        actions=[];
+        title.innerText=`${options.title||'Output'}`;
+        setStatus('');
+        setCoverage('');
+        setActions([]);
+        renderState(options.emptyLabel||'No output yet.','empty');
+        body.setAttribute('aria-busy','false');
+        host.dispatchEvent(new CustomEvent('output-panel-cleared',{bubbles:true,composed:true}));
+        return true;
+    }
+
+    configure(datasetOptions());
+    clear();
+    syncBodySlot();
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('output-panel-ready',{bubbles:true,composed:true}));
+</script>