arcane-os 0.1.0-dev.5

package/runtime/arcane/components/task-progress.html

@@ -0,0 +1,282 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{display:block}
+    .task-progress{overflow:hidden}
+    .heading-copy{display:grid;gap:var(--arcane-space-1)}
+    .heading-copy p{color:var(--arcane-muted);margin:0}
+    .overall{display:grid;gap:var(--arcane-space-2);min-width:min(16rem,100%)}
+    .overall-label{font-variant-numeric:tabular-nums;text-align:end}
+    progress{accent-color:var(--arcane-action);width:100%}
+    .tasks{list-style:none;margin:0;padding:0}
+    .task{
+        align-items:center;
+        border-bottom:1px solid var(--arcane-border);
+        display:grid;
+        gap:var(--arcane-space-3);
+        grid-template-columns:auto minmax(0,1fr) auto;
+        padding:var(--arcane-space-3) var(--arcane-space-4);
+    }
+    .task:last-child{border-bottom:0}
+    .task-copy{display:grid;gap:var(--arcane-space-1);min-width:0}
+    .task-name{font-weight:650;overflow-wrap:anywhere}
+    .task-message{color:var(--arcane-muted);font-size:.88rem;overflow-wrap:anywhere}
+    .task-status{text-transform:capitalize}
+    .empty{margin:var(--arcane-space-4)}
+    @media(max-width:34rem){
+        .task{grid-template-columns:auto minmax(0,1fr)}
+        .task-status{grid-column:2}
+        .overall-label{text-align:start}
+    }
+</style>
+
+<section id="panel" class="task-progress arcane-card" aria-labelledby="taskProgressTitle">
+    <header class="arcane-card__header">
+        <div class="heading-copy">
+            <h2 id="taskProgressTitle" class="arcane-section-heading">Progress</h2>
+            <p id="description"></p>
+        </div>
+        <div id="overall" class="overall" hidden>
+            <progress id="overallProgress" max="100" value="0"></progress>
+            <span id="overallLabel" class="overall-label"></span>
+        </div>
+    </header>
+    <p id="empty" class="empty arcane-state arcane-state--empty">No tasks yet.</p>
+    <ol id="tasks" class="tasks" aria-live="polite"></ol>
+</section>
+
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const panel=root.querySelector('#panel');
+    const heading=root.querySelector('#taskProgressTitle');
+    const description=root.querySelector('#description');
+    const overall=root.querySelector('#overall');
+    const overallProgress=root.querySelector('#overallProgress');
+    const overallLabel=root.querySelector('#overallLabel');
+    const empty=root.querySelector('#empty');
+    const list=root.querySelector('#tasks');
+
+    const allowedStatuses=new Set(['pending','running','complete','failed','canceled']);
+    let activeRun=Promise.resolve([]);
+    let options={};
+    let running=false;
+    let tasks=[];
+
+    host.clear=clear;
+    host.configure=configure;
+    host.runTasks=runTasks;
+    host.setTasks=setTasks;
+    host.updateTask=updateTask;
+
+    Object.defineProperties(host,{
+        running:{get:()=>running},
+        snapshot:{get:getSnapshot},
+        tasks:{get:getTasks,set:setTasks}
+    });
+
+    function datasetOptions(){
+        return {
+            description:host.dataset.description||'',
+            emptyLabel:host.dataset.emptyLabel||'No tasks yet.',
+            title:host.dataset.title||'Progress'
+        };
+    }
+
+    function configure(input={}){
+        options={...datasetOptions(),...options,...input};
+        heading.innerText=`${options.title||'Progress'}`;
+        description.innerText=`${options.description||''}`;
+        description.hidden=!description.innerText;
+        empty.innerText=`${options.emptyLabel||'No tasks yet.'}`;
+        return {...options};
+    }
+
+    function setTasks(values=[]){
+        const ids=new Set();
+        tasks=Array.from(values||[]).map((value,index)=>{
+            const task=normalizeTask(value,index);
+            if(ids.has(task.id)){
+                task.id=`${task.id}-${index+1}`;
+            }
+            ids.add(task.id);
+            return task;
+        });
+        render();
+        emitChange();
+        return getTasks();
+    }
+
+    function normalizeTask(value={},index=0){
+        const status=allowedStatuses.has(value.status)?value.status:'pending';
+        return {
+            id:`${value.id??`task-${index+1}`}`,
+            message:`${value.message??''}`,
+            name:`${value.name??value.label??`Task ${index+1}`}`,
+            status
+        };
+    }
+
+    function updateTask(id,update={}){
+        const index=typeof id==='number'?id:tasks.findIndex(task=>task.id===`${id}`);
+        if(index<0||index>=tasks.length){
+            return null;
+        }
+        const current=tasks[index];
+        const status=allowedStatuses.has(update.status)?update.status:current.status;
+        tasks[index]={
+            ...current,
+            ...update,
+            id:current.id,
+            message:`${update.message??current.message}`,
+            name:`${update.name??current.name}`,
+            status
+        };
+        render();
+        emitChange(tasks[index]);
+        return {...tasks[index]};
+    }
+
+    function render(){
+        const fragment=document.createDocumentFragment();
+        for(const task of tasks){
+            const item=document.createElement('li');
+            const light=document.createElement('span');
+            const copy=document.createElement('span');
+            const name=document.createElement('span');
+            const message=document.createElement('span');
+            const status=document.createElement('span');
+
+            item.className='task';
+            item.dataset.taskId=task.id;
+            item.dataset.status=task.status;
+            light.className='arcane-status-light';
+            light.dataset.status=task.status;
+            light.setAttribute('aria-hidden','true');
+            copy.className='task-copy';
+            name.className='task-name';
+            name.innerText=task.name;
+            message.className='task-message';
+            message.innerText=task.message;
+            message.hidden=!task.message;
+            status.className='task-status arcane-badge';
+            status.dataset.status=statusTone(task.status);
+            status.innerText=statusLabel(task.status);
+            copy.append(name,message);
+            item.append(light,copy,status);
+            fragment.append(item);
+        }
+        list.replaceChildren(fragment);
+        empty.hidden=tasks.length>0;
+        list.hidden=!tasks.length;
+        syncOverall();
+    }
+
+    function syncOverall(){
+        const completed=tasks.filter(task=>['complete','failed','canceled'].includes(task.status)).length;
+        const percent=tasks.length?Math.round(completed/tasks.length*100):0;
+        overall.hidden=!tasks.length;
+        overallProgress.value=percent;
+        overallLabel.innerText=tasks.length?`${completed} of ${tasks.length} finished`:'';
+        panel.setAttribute('aria-busy',`${running}`);
+    }
+
+    async function runTasks(title='Progress',jobs=[]){
+        if(running){
+            return activeRun;
+        }
+        const runnable=Array.from(jobs||[]).filter(job=>job&&typeof job.task==='function');
+        if(!runnable.length){
+            setTasks([]);
+            return [];
+        }
+        configure({title});
+        setTasks(runnable.map((job,index)=>({
+            id:job.id??`task-${index+1}`,
+            message:job.message||'',
+            name:job.name||job.label||`Task ${index+1}`,
+            status:'pending'
+        })));
+        running=true;
+        syncOverall();
+        host.dispatchEvent(new CustomEvent('task-progress-started',{
+            bubbles:true,
+            composed:true,
+            detail:getSnapshot()
+        }));
+        activeRun=Promise.allSettled(runnable.map(async(job,index)=>{
+            updateTask(index,{status:'running'});
+            try{
+                const value=await job.task();
+                updateTask(index,{status:'complete',message:job.completeMessage||''});
+                return value;
+            }catch(error){
+                updateTask(index,{status:'failed',message:job.errorMessage||error?.message||'Unable to complete.'});
+                host.dispatchEvent(new CustomEvent('task-progress-error',{
+                    bubbles:true,
+                    composed:true,
+                    detail:{error,id:tasks[index]?.id,index,task:{...tasks[index]}}
+                }));
+                throw error;
+            }
+        }));
+        const results=await activeRun;
+        running=false;
+        syncOverall();
+        host.dispatchEvent(new CustomEvent('task-progress-complete',{
+            bubbles:true,
+            composed:true,
+            detail:{...getSnapshot(),results:results.slice()}
+        }));
+        return results;
+    }
+
+    function statusLabel(status){
+        return {
+            canceled:'Canceled',
+            complete:'Complete',
+            failed:'Failed',
+            pending:'Pending',
+            running:'In progress'
+        }[status]||status;
+    }
+
+    function statusTone(status){
+        return {
+            complete:'success',
+            failed:'error',
+            pending:'warning',
+            running:'warning'
+        }[status]||status;
+    }
+
+    function getTasks(){
+        return tasks.map(task=>({...task}));
+    }
+
+    function getSnapshot(){
+        return {running,tasks:getTasks()};
+    }
+
+    function emitChange(task=null){
+        host.dispatchEvent(new CustomEvent('task-progress-change',{
+            bubbles:true,
+            composed:true,
+            detail:{...getSnapshot(),task:task?{...task}:null}
+        }));
+    }
+
+    function clear(){
+        if(running){
+            return false;
+        }
+        tasks=[];
+        render();
+        emitChange();
+        return true;
+    }
+
+    configure(datasetOptions());
+    render();
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('task-progress-ready',{bubbles:true,composed:true}));
+</script>

package/runtime/arcane/components/terminal-workspace.html

@@ -0,0 +1,65 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{display:block;height:100%;min-height:18rem;--terminal-bg:var(--background,rgb(244, 246, 251));--terminal-fg:var(--text-color,rgb(23, 34, 56));--terminal-muted:var(--muted-text-color,rgb(95, 107, 130));--terminal-accent:var(--focus-color,rgb(118, 87, 213));--terminal-danger:var(--danger-color,rgb(165, 56, 56));--terminal-font:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;--terminal-font-size:14px;--terminal-line-height:1.55;--terminal-opacity:1}
+    *{box-sizing:border-box}.workspace{background:color-mix(in srgb,var(--terminal-bg) calc(var(--terminal-opacity)*100%),transparent);border:1px solid color-mix(in srgb,var(--terminal-accent) 20%,transparent);border-radius:.85rem;color:var(--terminal-fg);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;height:100%;overflow:hidden;box-shadow:0 1.5rem 5rem rgba(0,0,0,.28)}
+    .tabs,.toolbar{align-items:center;background:color-mix(in srgb,var(--terminal-bg) 88%,white 12%);display:flex;gap:.35rem;min-width:0;padding:.45rem .65rem}.tabs{border-bottom:1px solid color-mix(in srgb,var(--terminal-fg) 10%,transparent)}
+    .tab{align-items:center;background:transparent;border:1px solid transparent;border-radius:.45rem;color:var(--terminal-muted);display:flex;font:600 .78rem/1 var(--terminal-font);gap:.35rem;max-width:13rem;padding:.55rem .65rem}.tab[aria-selected="true"]{background:color-mix(in srgb,var(--terminal-accent) 12%,transparent);border-color:color-mix(in srgb,var(--terminal-accent) 30%,transparent);color:var(--terminal-fg)}.tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-close{border:0;background:transparent;color:inherit;cursor:pointer;padding:0 .15rem}.new-session,.tool{background:transparent;border:1px solid transparent;border-radius:.4rem;color:var(--terminal-muted);cursor:pointer;font:600 .78rem/1 var(--terminal-font);padding:.55rem}.new-session:hover,.tool:hover{border-color:color-mix(in srgb,var(--terminal-accent) 25%,transparent);color:var(--terminal-fg)}
+    .toolbar{border-bottom:1px solid color-mix(in srgb,var(--terminal-fg) 8%,transparent);justify-content:flex-end}.connection{align-items:center;display:flex;gap:.4rem;margin-right:auto;color:var(--terminal-muted);font:600 .72rem/1 var(--terminal-font);text-transform:uppercase;letter-spacing:.08em}.connection::before{background:var(--terminal-muted);border-radius:50%;content:"";height:.48rem;width:.48rem}.connection[data-state="running"]::before{background:var(--terminal-accent);box-shadow:0 0 .7rem var(--terminal-accent)}.connection[data-state="error"]::before,.connection[data-state="exited"]::before{background:var(--terminal-danger)}
+    .search{background:var(--terminal-bg);border:1px solid color-mix(in srgb,var(--terminal-fg) 16%,transparent);border-radius:.4rem;color:var(--terminal-fg);font:inherit;max-width:15rem;padding:.4rem .55rem}.search[hidden]{display:none}
+    .output{font:var(--terminal-font-size)/var(--terminal-line-height) var(--terminal-font);overflow:auto;overscroll-behavior:contain;padding:1rem 1.1rem;scrollbar-color:color-mix(in srgb,var(--terminal-accent) 30%,transparent) transparent;white-space:pre-wrap;word-break:break-word}.entry{min-height:1em}.entry.command{color:var(--terminal-accent);font-weight:650}.entry.system{color:var(--terminal-muted)}.entry.error{color:var(--terminal-danger)}mark{background:color-mix(in srgb,var(--terminal-accent) 38%,transparent);color:inherit}
+    .prompt{align-items:flex-start;border-top:1px solid color-mix(in srgb,var(--terminal-fg) 10%,transparent);display:grid;font:var(--terminal-font-size)/var(--terminal-line-height) var(--terminal-font);gap:.6rem;grid-template-columns:auto minmax(0,1fr);padding:.75rem 1.1rem}.prompt-label{color:var(--terminal-accent);font-weight:800;padding-top:.34rem}.input{background:transparent;border:0;color:var(--terminal-fg);font:inherit;min-height:2rem;outline:0;padding:.3rem 0;resize:none;width:100%}.input::placeholder{color:var(--terminal-muted)}
+    .ansi-bold{font-weight:800}.ansi-dim{opacity:.65}.ansi-italic{font-style:italic}.ansi-underline{text-decoration:underline}.ansi-red,.ansi-bright-red{color:rgb(255, 107, 122)}.ansi-green,.ansi-bright-green{color:rgb(99, 242, 162)}.ansi-yellow,.ansi-bright-yellow{color:rgb(255, 209, 102)}.ansi-blue,.ansi-bright-blue{color:rgb(121, 184, 255)}.ansi-magenta,.ansi-bright-magenta{color:rgb(210, 168, 255)}.ansi-cyan,.ansi-bright-cyan{color:rgb(114, 233, 238)}.ansi-black{color:rgb(135, 147, 141)}.ansi-white,.ansi-bright-white{color:rgb(255, 255, 255)}
+    @media(max-width:44rem){.toolbar .tool[data-secondary]{display:none}.workspace{border-radius:0}.output{padding:.8rem}.prompt{padding:.65rem .8rem}}
+</style>
+<section class="workspace" aria-label="Terminal workspace">
+    <nav class="tabs" id="tabs" aria-label="Terminal sessions"></nav>
+    <div class="toolbar">
+        <span class="connection" id="connection" data-state="starting">Starting</span>
+        <input class="search" id="search" type="search" placeholder="Find in output" aria-label="Find in terminal output" hidden>
+        <button class="tool" id="find" type="button" title="Find (Ctrl+Shift+F)">Find</button>
+        <button class="tool" id="copy" data-secondary type="button" title="Copy selected text">Copy</button>
+        <button class="tool" id="clear" type="button" title="Clear terminal">Clear</button>
+        <button class="tool" id="interrupt" type="button" title="Interrupt process (Ctrl+C)">Ctrl+C</button>
+        <button class="tool" id="settings" type="button" title="Terminal settings">Settings</button>
+    </div>
+    <div class="output" id="output" role="log" aria-live="polite" aria-label="Terminal output" tabindex="0"></div>
+    <form class="prompt" id="prompt"><label class="prompt-label" id="promptLabel" for="input">arcane ❯</label><textarea class="input" id="input" rows="1" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="Enter a command"></textarea></form>
+</section>
+<script type="module">
+    const {parseAnsi,stripAnsi}=await import('../modules/AnsiText.js');
+    const host=this,root=host.shadowRoot;
+    const tabs=root.querySelector('#tabs'),output=root.querySelector('#output'),input=root.querySelector('#input'),prompt=root.querySelector('#prompt'),promptLabel=root.querySelector('#promptLabel'),connection=root.querySelector('#connection'),search=root.querySelector('#search');
+    const sessions=new Map();let activeId='',history=[],historyIndex=0,completions=[];
+    host.configure=configure;host.addSession=addSession;host.removeSession=removeSession;host.activateSession=activateSession;host.append=append;host.clear=clear;host.setState=setState;host.setTheme=setTheme;host.focus=()=>input.focus();host.ready=true;
+    prompt.addEventListener('submit',event=>{event.preventDefault();submit();});
+    input.addEventListener('keydown',event=>{
+        if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();submit();}
+        else if(event.key==='ArrowUp'){event.preventDefault();recall(-1);}
+        else if(event.key==='ArrowDown'){event.preventDefault();recall(1);}
+        else if(event.key==='Tab'){event.preventDefault();complete();}
+        else if(event.key.toLowerCase()==='c'&&event.ctrlKey){const selected=globalThis.getSelection?.()?.toString();if(!selected){event.preventDefault();emit('terminal-interrupt',{sessionId:activeId});}}
+        else if(event.key.toLowerCase()==='f'&&event.ctrlKey&&event.shiftKey){event.preventDefault();toggleSearch(true);}
+        requestAnimationFrame(resizeInput);
+    });
+    root.querySelector('#find').onclick=()=>toggleSearch();root.querySelector('#clear').onclick=()=>clear();root.querySelector('#interrupt').onclick=()=>emit('terminal-interrupt',{sessionId:activeId});root.querySelector('#settings').onclick=()=>emit('terminal-settings');
+    root.querySelector('#copy').onclick=()=>navigator.clipboard?.writeText(globalThis.getSelection?.()?.toString()||'');
+    search.addEventListener('input',render);search.addEventListener('keydown',event=>{if(event.key==='Escape')toggleSearch(false);});
+    function configure(options={}){history=Array.from(options.history||[]);historyIndex=history.length;completions=Array.from(options.completions||[]);promptLabel.textContent=String(options.prompt||'arcane ❯');if(options.theme)setTheme(options.theme);return host;}
+    function addSession(session){sessions.set(session.id,{...session,entries:session.entries||[]});if(!activeId)activeId=session.id;renderTabs();render();setState(session.state||'starting');}
+    function removeSession(id){sessions.delete(id);if(activeId===id)activeId=sessions.keys().next().value||'';renderTabs();render();}
+    function activateSession(id){if(!sessions.has(id))return;activeId=id;renderTabs();render();setState(sessions.get(id).state||'running');input.focus();emit('terminal-session-select',{sessionId:id});}
+    function append(text,kind='output',sessionId=activeId){const session=sessions.get(sessionId);if(!session)return;session.entries.push({text:String(text??''),kind});if(session.entries.length>4000)session.entries.splice(0,session.entries.length-4000);if(sessionId===activeId)render(true);}
+    function clear(sessionId=activeId){const session=sessions.get(sessionId);if(session)session.entries=[];render();emit('terminal-clear',{sessionId});}
+    function setState(state,id=activeId){const session=sessions.get(id);if(session)session.state=state;if(id===activeId){connection.dataset.state=state;connection.textContent=state;}}
+    function setTheme(theme={}){for(const [key,value] of Object.entries(theme)){const name=`--terminal-${key.replace(/[A-Z]/g,match=>`-${match.toLowerCase()}`)}`;host.style.setProperty(name,String(value));}}
+    function submit(){const line=input.value.trimEnd();if(!line.trim())return;if(history.at(-1)!==line)history.push(line);historyIndex=history.length;append(`${promptLabel.textContent} ${line}\n`,'command');input.value='';resizeInput();emit('terminal-submit',{sessionId:activeId,line,history:[...history]});}
+    function recall(direction){if(!history.length)return;historyIndex=Math.max(0,Math.min(history.length,historyIndex+direction));input.value=historyIndex===history.length?'':history[historyIndex];resizeInput();input.setSelectionRange(input.value.length,input.value.length);}
+    function complete(){const prefix=input.value.split(/\s/).at(-1).toLowerCase();const matches=completions.filter(value=>value.toLowerCase().startsWith(prefix));if(matches.length===1)input.value=input.value.slice(0,-prefix.length)+matches[0];else if(matches.length>1)append(`${matches.join('    ')}\n`,'system');resizeInput();}
+    function renderTabs(){const fragment=document.createDocumentFragment();for(const session of sessions.values()){const button=document.createElement('button');button.className='tab';button.type='button';button.setAttribute('role','tab');button.setAttribute('aria-selected',String(session.id===activeId));button.innerHTML=`<span class="tab-label"></span><span class="tab-close" aria-label="Close session">×</span>`;button.querySelector('.tab-label').textContent=session.title||session.shell||'Terminal';button.onclick=event=>{if(event.target.classList.contains('tab-close'))emit('terminal-session-close',{sessionId:session.id});else activateSession(session.id);};fragment.append(button);}const add=document.createElement('button');add.className='new-session';add.type='button';add.textContent='＋';add.title='New terminal session';add.onclick=()=>emit('terminal-session-new');fragment.append(add);tabs.replaceChildren(fragment);}
+    function render(stick=false){const session=sessions.get(activeId);const atEnd=output.scrollHeight-output.scrollTop-output.clientHeight<48;const term=search.value.toLowerCase();const fragment=document.createDocumentFragment();for(const entry of session?.entries||[]){const row=document.createElement('div');row.className=`entry ${entry.kind||'output'}`;renderText(row,entry.text,term);fragment.append(row);}output.replaceChildren(fragment);if(stick&&(atEnd||!output.scrollTop))output.scrollTop=output.scrollHeight;}
+    function renderText(row,text,term){const clean=stripAnsi(text);if(!term){for(const token of parseAnsi(text)){const span=document.createElement('span');span.textContent=token.text;const classes=[];if(token.style.bold)classes.push('ansi-bold');if(token.style.dim)classes.push('ansi-dim');if(token.style.italic)classes.push('ansi-italic');if(token.style.underline)classes.push('ansi-underline');if(token.style.foreground&&!token.style.foreground.startsWith('index-'))classes.push(`ansi-${token.style.foreground}`);span.className=classes.join(' ');row.append(span);}return;}let cursor=0,index=clean.toLowerCase().indexOf(term);while(index>=0){row.append(document.createTextNode(clean.slice(cursor,index)));const mark=document.createElement('mark');mark.textContent=clean.slice(index,index+term.length);row.append(mark);cursor=index+term.length;index=clean.toLowerCase().indexOf(term,cursor);}row.append(document.createTextNode(clean.slice(cursor)));}
+    function toggleSearch(force){search.hidden=force===undefined?!search.hidden:!force;if(!search.hidden)search.focus();else{search.value='';render();input.focus();}}
+    function resizeInput(){input.style.height='auto';input.style.height=`${Math.min(input.scrollHeight,160)}px`;}
+    function emit(type,detail={}){host.dispatchEvent(new CustomEvent(type,{bubbles:true,composed:true,detail}));}
+    host.dispatchEvent(new CustomEvent('terminal-workspace-ready',{bubbles:true,composed:true}));
+</script>

package/runtime/arcane/components/theme-editor.html

@@ -0,0 +1,41 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{display:block;min-width:0}.intro{display:grid;gap:var(--arcane-space-1)}.intro p{margin:0}.editor{display:grid;gap:var(--arcane-space-4)}.identity{display:grid;gap:var(--arcane-space-4);grid-template-columns:2fr 1fr}.colors{display:grid;gap:var(--arcane-space-3);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.color-field{align-items:center;display:grid;gap:.65rem;grid-template-columns:2.5rem minmax(0,1fr)}.color-field input{height:2.5rem;padding:.15rem;width:2.5rem}.color-field label{font-weight:650}.status{margin-right:auto;min-height:1.4em}.preview{border:1px solid var(--border-color);border-radius:var(--arcane-radius-medium);display:flex;gap:.6rem;padding:.8rem;background:var(--background);color:var(--text-color)}.preview span{border-radius:.4rem;padding:.5rem .7rem;background:var(--secondary-color)}.preview strong{border-radius:.4rem;padding:.5rem .7rem;background:var(--primary-color);color:var(--button-text-color)}@media(max-width:36rem){.identity{grid-template-columns:1fr}}
+</style>
+<form class="arcane-card editor">
+    <header class="arcane-card__header intro"><h2 class="arcane-section-heading">Create your own skin</h2><p class="arcane-help">Choose a small set of safe design tokens. Compatible Arcane apps use the same saved skin.</p></header>
+    <div class="arcane-card__body editor">
+        <div class="identity">
+            <div class="arcane-field"><label for="themeName">Skin name</label><input id="themeName" name="name" maxlength="40" required></div>
+            <div class="arcane-field"><label for="themeScheme">Starting contrast</label><select id="themeScheme" name="scheme"><option value="light">Light</option><option value="dark">Dark</option></select></div>
+        </div>
+        <div id="colors" class="colors"></div>
+        <div class="preview" aria-label="Skin preview"><span>Surface</span><strong>Primary action</strong></div>
+    </div>
+    <footer class="arcane-card__footer"><p id="status" class="status arcane-help" role="status" aria-live="polite"></p><button id="reset" class="arcane-button arcane-button--tertiary" type="button">Remove custom skin</button><button class="arcane-button" type="submit">Save and use skin</button></footer>
+</form>
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const form=root.querySelector('form');
+    const colors=root.querySelector('#colors');
+    const status=root.querySelector('#status');
+    const {default:Theme,themeColorToHex,themeTokens}=await import('../entities/Theme.js');
+
+    host.configure=configure;host.getTheme=getTheme;host.setTheme=setTheme;host.setBusy=setBusy;host.setStatus=setStatus;
+    colors.replaceChildren(...themeTokens.map(token=>{
+        const field=document.createElement('div'),input=document.createElement('input'),label=document.createElement('label');
+        field.className='color-field';input.type='color';input.id=`theme-${token.key}`;input.name=token.key;input.value=themeColorToHex(token.defaultValue);label.htmlFor=input.id;label.textContent=token.label;field.append(input,label);return field;
+    }));
+    form.addEventListener('input',()=>emit('theme-preview',{theme:getTheme()}));
+    form.addEventListener('submit',event=>{event.preventDefault();emit('theme-save',{theme:getTheme()});});
+    root.querySelector('#reset').addEventListener('click',()=>emit('theme-reset'));
+
+    function emit(name,detail={}){host.dispatchEvent(new CustomEvent(name,{bubbles:true,composed:true,detail}));}
+    function getTheme(){return new Theme({name:form.elements.name.value,scheme:form.elements.scheme.value,tokens:Object.fromEntries(themeTokens.map(token=>[token.key,form.elements[token.key].value]))});}
+    function setTheme(input={}){const theme=Theme.fromJSON(input);form.elements.name.value=theme.name;form.elements.scheme.value=theme.scheme;for(const token of themeTokens) form.elements[token.key].value=themeColorToHex(theme.tokens[token.key]);return theme;}
+    function configure(options={}){return setTheme(options.theme||{name:'My Arcane skin'});}
+    function setBusy(value=true){for(const control of form.elements) control.disabled=Boolean(value);form.setAttribute('aria-busy',String(Boolean(value)));}
+    function setStatus(value=''){status.textContent=String(value||'');return status.textContent;}
+    configure();host.ready=true;emit('theme-editor-ready');
+</script>

package/runtime/arcane/components/theme-switcher.html

@@ -0,0 +1,46 @@
+<style>
+    :host{display:inline-block;color:inherit}
+    .switcher{align-items:center;display:flex;gap:.15rem;padding:.2rem;border:1px solid var(--app-bar-border,var(--border-color,rgba(255,255,255,.25)));border-radius:999px;background:color-mix(in srgb,currentColor 8%,transparent)}
+    button{appearance:none;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;font:700 .68rem/1 system-ui,sans-serif;min-height:1.85rem;padding:.42rem .58rem}
+    button:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
+    button[aria-pressed="true"]{background:var(--app-bar-accent,var(--secondary-color,#c49a52));color:var(--app-bar-active-text,var(--primary-color,#172238))}
+    button:focus-visible{outline:.18rem solid var(--focus-color,currentColor);outline-offset:.12rem}
+    @media(max-width:32rem){button{font-size:0;padding-inline:.5rem}button::first-letter{font-size:.72rem}}
+</style>
+<div class="switcher" role="group" aria-label="Color scheme">
+    <button type="button" data-scheme="system" aria-pressed="false" title="Use device theme">Auto</button>
+    <button type="button" data-scheme="light" aria-pressed="false" title="Use light theme">Light</button>
+    <button type="button" data-scheme="dark" aria-pressed="false" title="Use dark theme">Dark</button>
+    <button type="button" data-scheme="custom" aria-pressed="false" title="Use my custom skin" disabled>Skin</button>
+</div>
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const buttons=Array.from(root.querySelectorAll('[data-scheme]'));
+    const {default:ThemeManager}=await import('../modules/ThemeManager.js');
+    const manager=new ThemeManager();
+
+    host.setMode=setMode;
+    host.refresh=refresh;
+    root.querySelector('.switcher').addEventListener('click',async event=>{
+        const button=event.target.closest('[data-scheme]');
+        if(!button) return;
+        setBusy(true);
+        try{
+            const state=button.dataset.scheme==='custom'?await manager.activateCustom():await manager.setScheme(button.dataset.scheme);
+            setMode(state.mode);setCustomAvailable(Boolean(state.theme));
+        }finally{setBusy(false);setCustomAvailable(Boolean(manager.customTheme));}
+    });
+    globalThis.addEventListener('arcane-theme-change',()=>refresh().catch(()=>{}));
+
+    function setMode(mode='system'){
+        for(const button of buttons) button.setAttribute('aria-pressed',String(button.dataset.scheme===mode));
+        host.dataset.mode=mode;
+        return mode;
+    }
+    function setBusy(value){for(const button of buttons) button.disabled=Boolean(value);}
+    function setCustomAvailable(value){root.querySelector('[data-scheme="custom"]').disabled=!value;}
+    async function refresh(){const state=await manager.load();setMode(state.mode);setCustomAvailable(Boolean(state.theme));return state;}
+
+    refresh().catch(()=>setMode('system'));
+</script>

package/runtime/arcane/components/unified-inbox.html

@@ -0,0 +1,20 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+:host{display:block;min-width:0}.toolbar{display:grid;gap:.75rem;padding:1rem;border-bottom:1px solid var(--border-color,#ccd4df)}.toolbar-row{display:flex;gap:.5rem}.toolbar input{min-width:0;width:100%}.filters{display:flex;gap:.4rem;overflow:auto}.filters button{white-space:nowrap}.list{display:grid;max-height:calc(100vh - 17rem);overflow:auto}.thread{display:grid;gap:.35rem;width:100%;padding:1rem;border:0;border-bottom:1px solid var(--border-color,#ccd4df);color:inherit;background:transparent;text-align:left}.thread:hover,.thread[aria-current="true"]{background:var(--secondary-color,#e8edf4)}.thread:focus-visible{outline:.18rem solid var(--focus-color,#7657d5);outline-offset:-.2rem}.line{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.title{overflow:hidden;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.preview{color:var(--muted-text-color,#607080);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta{align-items:center;display:flex;gap:.4rem;font-size:.75rem}.badge{border:1px solid var(--border-color,#ccd4df);border-radius:999px;padding:.15rem .45rem;text-transform:uppercase}.unread{display:grid;place-items:center;min-width:1.4rem;height:1.4rem;border-radius:999px;color:var(--button-text-color,#fff);background:var(--focus-color,#7657d5);font-weight:800}.empty{padding:2rem;text-align:center}.empty p{color:var(--muted-text-color,#607080)}
+</style>
+<section aria-label="Unified inbox">
+ <div class="toolbar"><div class="toolbar-row"><input id="search" type="search" placeholder="Search conversations" aria-label="Search conversations"><button id="refresh" class="arcane-button arcane-button--tertiary" type="button">Refresh</button></div><div id="filters" class="filters" aria-label="Channel filters"></div></div>
+ <div id="list" class="list"></div>
+ <div id="empty" class="empty"><strong>No conversations yet</strong><p>Connect a service in settings to bring conversations into this inbox.</p></div>
+</section>
+<script type="module">
+const host=this,root=host.shadowRoot,list=root.querySelector('#list'),empty=root.querySelector('#empty'),search=root.querySelector('#search'),filters=root.querySelector('#filters');let threads=[],activeId='',channel='all',providers={};
+host.configure=options=>{providers=Object.fromEntries(Array.from(options?.providers||[],item=>[item.id,item]));renderFilters(options?.channels);return host.setThreads(options?.threads||[])};
+host.setThreads=values=>{threads=Array.from(values||[]);render();return threads};host.setActive=id=>{activeId=String(id||'');render();};host.setLoading=value=>{root.querySelector('#refresh').disabled=Boolean(value)};
+root.querySelector('#refresh').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('inbox-refresh',{bubbles:true,composed:true})));
+search.addEventListener('input',render);
+function renderFilters(values){const names=['all',...new Set(values||[])];filters.replaceChildren(...names.map(name=>{const button=document.createElement('button');button.type='button';button.className='arcane-button arcane-button--tertiary';button.textContent=name==='all'?'All':name.toUpperCase();button.setAttribute('aria-pressed',String(channel===name));button.addEventListener('click',()=>{channel=name;renderFilters(values);render()});return button}))}
+function render(){const term=search.value.trim().toLowerCase();const visible=threads.filter(item=>(channel==='all'||item.channel===channel)&&(!term||`${item.title} ${item.preview} ${(item.participants||[]).join(' ')}`.toLowerCase().includes(term)));empty.hidden=visible.length>0;list.replaceChildren(...visible.map(makeThread));}
+function makeThread(item){const button=document.createElement('button');button.type='button';button.className='thread';button.setAttribute('aria-current',String(item.id===activeId));const top=document.createElement('span'),title=document.createElement('span'),time=document.createElement('time'),preview=document.createElement('span'),meta=document.createElement('span'),badge=document.createElement('span'),provider=document.createElement('span');top.className='line';title.className='title';title.textContent=item.title;time.dateTime=item.updatedAt;time.textContent=new Intl.DateTimeFormat(undefined,{month:'short',day:'numeric'}).format(new Date(item.updatedAt));preview.className='preview';preview.textContent=item.preview||'No preview';meta.className='meta';badge.className='badge';badge.textContent=item.channel;provider.textContent=providers[item.providerId]?.label||item.providerId;top.append(title,time);meta.append(badge,provider);if(item.unreadCount){const unread=document.createElement('span');unread.className='unread';unread.textContent=String(item.unreadCount);meta.append(unread)}button.append(top,preview,meta);button.addEventListener('click',()=>host.dispatchEvent(new CustomEvent('thread-select',{bubbles:true,composed:true,detail:{thread:item}})));return button;}
+host.ready=true;host.dispatchEvent(new CustomEvent('unified-inbox-ready',{bubbles:true,composed:true}));
+</script>