arcane-os 0.1.0-dev.5

package/runtime/arcane/components/preferences-form.html

@@ -0,0 +1,135 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{display:block;min-width:0}
+    form{display:grid;gap:var(--arcane-space-4)}
+    .heading{display:grid;gap:var(--arcane-space-1)}
+    .heading p{margin:0}
+    .fields{display:grid;gap:var(--arcane-space-3)}
+    .preference{align-items:center;display:grid;gap:var(--arcane-space-3);grid-template-columns:minmax(0,1fr) minmax(10rem,16rem)}
+    .copy{display:grid;gap:var(--arcane-space-1)}
+    .copy label{font-weight:700}
+    .copy p{margin:0}
+    .control input[type="checkbox"]{height:1.25rem;width:1.25rem}
+    .control :where(input:not([type="checkbox"]),select){width:100%}
+    .status{min-height:1.4em;margin:0}
+    @media(max-width:36rem){.preference{grid-template-columns:1fr}}
+</style>
+
+<form class="arcane-card">
+    <header class="arcane-card__header heading">
+        <h2 id="title" class="arcane-section-heading">Preferences</h2>
+        <p id="description" class="arcane-help"></p>
+    </header>
+    <div class="arcane-card__body fields" id="fields"></div>
+    <footer class="arcane-card__footer">
+        <p class="status arcane-help" id="status" role="status" aria-live="polite"></p>
+        <button class="arcane-button arcane-button--tertiary" id="reset" type="button">Restore defaults</button>
+        <button class="arcane-button" id="save" type="submit">Save changes</button>
+    </footer>
+</form>
+
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const form=root.querySelector('form');
+    const fields=root.querySelector('#fields');
+    const title=root.querySelector('#title');
+    const description=root.querySelector('#description');
+    const status=root.querySelector('#status');
+    const reset=root.querySelector('#reset');
+    const save=root.querySelector('#save');
+    let schema=[];
+
+    host.configure=configure;
+    host.getValues=getValues;
+    host.setValues=setValues;
+    host.setBusy=setBusy;
+    host.setStatus=setStatus;
+
+    form.addEventListener('submit',event=>{
+        event.preventDefault();
+        host.dispatchEvent(new CustomEvent('preferences-submit',{bubbles:true,composed:true,detail:{values:getValues()}}));
+    });
+    form.addEventListener('input',event=>{
+        const field=schema.find(item=>item.key===event.target.name);
+        if(!field) return;
+        host.dispatchEvent(new CustomEvent('preferences-change',{bubbles:true,composed:true,detail:{key:field.key,value:readControl(event.target,field),values:getValues()}}));
+    });
+    reset.addEventListener('click',()=>host.dispatchEvent(new CustomEvent('preferences-reset',{bubbles:true,composed:true})));
+
+    function configure(options={}){
+        schema=Array.from(options.schema||[]).map(item=>typeof item.toJSON==='function'?item.toJSON():{...item});
+        title.innerText=String(options.title||'Preferences');
+        description.innerText=String(options.description||'');
+        description.hidden=!description.innerText;
+        renderFields();
+        setValues(options.values||{});
+        return host;
+    }
+
+    function renderFields(){
+        const fragment=document.createDocumentFragment();
+        for(const item of schema){
+            const row=document.createElement('div');
+            const copy=document.createElement('div');
+            const label=document.createElement('label');
+            const help=document.createElement('p');
+            const controlWrap=document.createElement('div');
+            const control=createControl(item);
+            const id=`preference-${item.key.replace(/[^A-Za-z0-9_-]/g,'-')}`;
+            row.className='preference';copy.className='copy';help.className='arcane-help';controlWrap.className='control arcane-field';
+            label.htmlFor=id;label.innerText=String(item.label||item.key);help.innerText=String(item.description||'');help.hidden=!help.innerText;
+            control.id=id;control.name=item.key;
+            copy.append(label,help);controlWrap.append(control);row.append(copy,controlWrap);fragment.append(row);
+        }
+        fields.replaceChildren(fragment);
+    }
+
+    function createControl(item){
+        if(item.type==='select'){
+            const select=document.createElement('select');
+            for(const option of item.options||[]){
+                const element=document.createElement('option');element.value=String(option.value);element.innerText=String(option.label);select.append(element);
+            }
+            return select;
+        }
+        const input=document.createElement('input');
+        input.type=item.type==='boolean'?'checkbox':item.type==='number'?'number':'text';
+        if(item.minimum!==undefined) input.min=String(item.minimum);
+        if(item.maximum!==undefined) input.max=String(item.maximum);
+        if(item.step!==undefined) input.step=String(item.step);
+        return input;
+    }
+
+    function readControl(control,item){
+        if(item.type==='boolean') return control.checked;
+        if(item.type==='number') return control.valueAsNumber;
+        return control.value;
+    }
+
+    function getValues(){
+        return Object.fromEntries(schema.map(item=>{
+            const control=form.elements.namedItem(item.key);
+            return [item.key,readControl(control,item)];
+        }));
+    }
+
+    function setValues(values={}){
+        for(const item of schema){
+            const control=form.elements.namedItem(item.key);
+            const value=Object.prototype.hasOwnProperty.call(values,item.key)?values[item.key]:item.defaultValue;
+            if(item.type==='boolean') control.checked=Boolean(value); else control.value=String(value??'');
+        }
+        return getValues();
+    }
+
+    function setBusy(value=true){
+        const busy=Boolean(value);form.setAttribute('aria-busy',String(busy));
+        for(const control of form.elements) control.disabled=busy;
+        return busy;
+    }
+    function setStatus(message=''){status.innerText=String(message||'');return status.innerText;}
+
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('preferences-form-ready',{bubbles:true,composed:true}));
+</script>

package/runtime/arcane/components/record-timeline.html

@@ -0,0 +1,105 @@
+<style>
+  :host{display:block;color:var(--text-color);font-family:Inter,Segoe UI,sans-serif}
+  *{box-sizing:border-box}
+  .timeline{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
+  .event{display:grid;grid-template-columns:minmax(8.5rem,10rem) minmax(0,1fr);gap:1rem;position:relative;padding:0 0 1rem}
+  .event::before{content:'';position:absolute;left:9.45rem;top:2rem;bottom:-.15rem;width:.12rem;background:var(--border-color)}
+  .event:last-child::before{display:none}
+  .date{display:grid;align-content:start;gap:.2rem;padding:.65rem .7rem;border:1px solid var(--border-color);border-radius:.55rem;background:var(--modal-background);font-weight:800;text-align:right}
+  .date small{color:var(--platinum);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
+  .open{display:grid;gap:.45rem;width:100%;margin:0;padding:.8rem 1rem;border:1px solid var(--border-color);border-left:.35rem solid var(--accent-color);border-radius:.55rem;background:var(--modal-background);box-shadow:none;color:var(--text-color);text-align:left}
+  .open:hover,.open:focus-visible{background:var(--secondary-color);color:var(--text-color);box-shadow:none}
+  .open:focus-visible{outline:.18rem solid var(--focus-color);outline-offset:.12rem}
+  .heading{display:flex;align-items:start;justify-content:space-between;gap:.7rem}
+  .heading strong{font-size:.94rem;line-height:1.35}
+  .category{flex:0 0 auto;padding:.2rem .45rem;border:1px solid var(--border-color);border-radius:99rem;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
+  .summary{color:var(--platinum);font-size:.78rem;line-height:1.45}
+  .meta{display:flex;gap:.45rem;flex-wrap:wrap;color:var(--platinum);font-size:.68rem}
+  .meta span+span::before{content:'·';margin-right:.45rem}
+  .empty{padding:1.2rem;border:1px dashed var(--border-color);border-radius:.55rem;color:var(--platinum);text-align:center}
+  @media(max-width:42rem){.event{grid-template-columns:1fr;gap:.45rem}.event::before{display:none}.date{text-align:left}.heading{display:grid}.category{justify-self:start}}
+  @media(forced-colors:active){.open{border-color:CanvasText}.category{border-color:CanvasText}}
+</style>
+
+<ol class="timeline" aria-label="Chronology" data-list></ol>
+<p class="empty" data-empty>No dated events match this view.</p>
+
+<script type="module">
+  const host=this;
+  const list=host.shadowRoot.querySelector('[data-list]');
+  const empty=host.shadowRoot.querySelector('[data-empty]');
+  let items=[];
+  let options={emptyLabel:'No dated events match this view.'};
+
+  host.setItems=setItems;
+  host.populate=(value,input={})=>setItems(value,input);
+
+  list.addEventListener('click',event=>{
+    const trigger=event.target.closest('[data-event-id]');
+    if(!trigger) return;
+    const item=items.find(candidate=>candidate.id===trigger.dataset.eventId);
+    if(!item) return;
+    host.dispatchEvent(new CustomEvent('record-timeline-open',{bubbles:true,composed:true,detail:{id:item.id,item:{...item}}}));
+  });
+
+  function normalizeItem(item,index){
+    const source=item&&typeof item==='object'?item:{};
+    const date=String(source.date||source.isoDate||'').slice(0,32);
+    if(!source.id||!date) return null;
+    return {
+      ...source,
+      id:String(source.id).slice(0,180),
+      date,
+      title:String(source.title||'Dated event').slice(0,500),
+      summary:String(source.summary||'').slice(0,2400),
+      category:String(source.category||source.kind||'Event').slice(0,100),
+      actor:String(source.actor||'Actor not assigned').slice(0,180),
+      sourceLabel:String(source.sourceLabel||'').slice(0,240),
+      status:String(source.status||'').slice(0,120),
+      factualPosture:String(source.factualPosture||'').slice(0,160),
+      sourceCount:Math.max(0,Math.min(9999,Number(source.sourceCount)||0)),
+      order:index
+    };
+  }
+
+  function setItems(value=[],input={}){
+    options={...options,...(input&&typeof input==='object'?input:{})};
+    items=(Array.isArray(value)?value:[]).slice(0,5000).map(normalizeItem).filter(Boolean)
+      .sort((left,right)=>left.date.localeCompare(right.date)||left.order-right.order);
+    render();
+    return items.map(item=>({...item}));
+  }
+
+  function displayDate(value=''){
+    const parsed=new Date(`${value.slice(0,10)}T00:00:00Z`);
+    return Number.isFinite(parsed.getTime())
+      ?new Intl.DateTimeFormat(undefined,{year:'numeric',month:'short',day:'numeric',timeZone:'UTC'}).format(parsed)
+      :value;
+  }
+
+  function render(){
+    list.replaceChildren();
+    empty.textContent=String(options.emptyLabel||'No dated events match this view.');
+    empty.hidden=Boolean(items.length);
+    for(const item of items){
+      const row=document.createElement('li'); row.className='event';
+      const time=document.createElement('time'); time.className='date'; time.dateTime=item.date; time.textContent=displayDate(item.date);
+      if(item.datePrecision&&item.datePrecision!=='day'){
+        const precision=document.createElement('small'); precision.textContent=String(item.datePrecision); time.append(precision);
+      }
+      const button=document.createElement('button'); button.type='button'; button.className='open'; button.dataset.eventId=item.id;
+      const heading=document.createElement('span'); heading.className='heading';
+      const title=document.createElement('strong'); title.textContent=item.title;
+      const category=document.createElement('span'); category.className='category'; category.textContent=item.category;
+      heading.append(title,category); button.append(heading);
+      if(item.summary){const summary=document.createElement('span'); summary.className='summary'; summary.textContent=item.summary; button.append(summary);}
+      const meta=document.createElement('span'); meta.className='meta';
+      for(const value of [item.actor,item.status,item.factualPosture,item.sourceLabel,item.sourceCount?`${item.sourceCount} source${item.sourceCount===1?'':'s'}`:'']){
+        if(!value) continue; const part=document.createElement('span'); part.textContent=value; meta.append(part);
+      }
+      button.append(meta); row.append(time,button); list.append(row);
+    }
+  }
+
+  host.dispatchEvent(new CustomEvent('record-timeline-ready',{bubbles:true,composed:true}));
+</script>

package/runtime/arcane/components/relationship-board.html

@@ -0,0 +1,116 @@
+<style>
+  :host{display:block;color:var(--text-color);font-family:Inter,Segoe UI,sans-serif}
+  *{box-sizing:border-box}
+  .layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(17rem,.8fr);gap:1rem;align-items:start}
+  .board{display:grid;grid-template-columns:repeat(var(--lane-count,4),minmax(12rem,1fr));gap:.7rem;overflow:auto;padding:.25rem}
+  .lane{display:grid;align-content:start;gap:.55rem;min-height:18rem;padding:.7rem;border:1px solid var(--border-color);border-radius:.65rem;background:var(--background)}
+  .lane h3{margin:0;padding:0 0 .5rem;border-bottom:1px solid var(--border-color);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
+  .node{display:grid;gap:.28rem;width:100%;margin:0;padding:.65rem;border:1px solid var(--border-color);border-left:.32rem solid var(--accent-color);border-radius:.5rem;background:var(--modal-background);box-shadow:none;color:var(--text-color);text-align:left}
+  .node:hover,.node:focus-visible,.node[aria-pressed="true"]{background:var(--secondary-color);color:var(--text-color);box-shadow:none}
+  .node:focus-visible{outline:.18rem solid var(--focus-color);outline-offset:.12rem}
+  .node strong{font-size:.82rem;line-height:1.3}.node small{color:var(--platinum);line-height:1.35}
+  .connections{position:sticky;top:.7rem;display:grid;gap:.7rem;padding:.85rem;border:1px solid var(--border-color);border-radius:.65rem;background:var(--modal-background)}
+  .connections h3,.connections p{margin:0}.connections p{color:var(--platinum);font-size:.78rem;line-height:1.45}
+  .edge-list{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}
+  .edge{width:100%;margin:0;padding:.55rem;border:1px solid var(--border-color);border-radius:.4rem;background:var(--background);box-shadow:none;color:var(--text-color);font-size:.75rem;text-align:left}
+  .edge:hover,.edge:focus-visible{background:var(--secondary-color);color:var(--text-color);box-shadow:none}.edge:focus-visible{outline:.18rem solid var(--focus-color);outline-offset:.12rem}
+  .empty{padding:.7rem;color:var(--platinum);font-size:.78rem}
+  @media(max-width:62rem){.layout{grid-template-columns:1fr}.connections{position:static}.board{grid-template-columns:repeat(var(--lane-count,4),minmax(15rem,1fr))}}
+  @media(forced-colors:active){.node,.edge{border-color:CanvasText}}
+</style>
+
+<section class="layout">
+  <div class="board" data-board aria-label="Relationship board"></div>
+  <aside class="connections" aria-live="polite" aria-atomic="true">
+    <h3 data-selected-title>Choose a card</h3>
+    <p data-selected-summary>Select a person, event, source, order, or hypothesis to see its record-based connections.</p>
+    <ul class="edge-list" data-edges></ul>
+  </aside>
+</section>
+
+<script type="module">
+  const host=this;
+  const board=host.shadowRoot.querySelector('[data-board]');
+  const selectedTitle=host.shadowRoot.querySelector('[data-selected-title]');
+  const selectedSummary=host.shadowRoot.querySelector('[data-selected-summary]');
+  const edgeList=host.shadowRoot.querySelector('[data-edges]');
+  let nodes=[]; let edges=[]; let lanes=[]; let selectedId='';
+
+  host.setGraph=setGraph;
+  host.populate=(graph={},options={})=>setGraph(graph,options);
+
+  board.addEventListener('click',event=>{
+    const trigger=event.target.closest('[data-node-id]');
+    if(!trigger) return;
+    selectedId=trigger.dataset.nodeId; renderSelection();
+    const node=nodes.find(item=>item.id===selectedId);
+    host.dispatchEvent(new CustomEvent('relationship-node-open',{bubbles:true,composed:true,detail:{id:selectedId,node:{...node}}}));
+  });
+  edgeList.addEventListener('click',event=>{
+    const trigger=event.target.closest('[data-edge-id]');
+    if(!trigger) return;
+    const edge=edges.find(item=>item.id===trigger.dataset.edgeId);
+    if(edge) host.dispatchEvent(new CustomEvent('relationship-edge-open',{bubbles:true,composed:true,detail:{id:edge.id,edge:{...edge}}}));
+  });
+
+  function normalizeNode(value,index){
+    const item=value&&typeof value==='object'?value:{};
+    if(!item.id) return null;
+    return {...item,id:String(item.id).slice(0,180),label:String(item.label||item.title||item.id).slice(0,500),summary:String(item.summary||'').slice(0,1800),lane:String(item.lane||item.kind||'Other').slice(0,100),order:Number.isFinite(Number(item.order))?Number(item.order):index};
+  }
+  function normalizeEdge(value,index,known){
+    const item=value&&typeof value==='object'?value:{};
+    const from=String(item.from||'').slice(0,180); const to=String(item.to||'').slice(0,180);
+    if(!from||!to||!known.has(from)||!known.has(to)) return null;
+    return {...item,id:String(item.id||`edge-${index+1}`).slice(0,180),from,to,label:String(item.label||'related to').slice(0,300),summary:String(item.summary||'').slice(0,1200)};
+  }
+
+  function setGraph(graph={},options={}){
+    nodes=(Array.isArray(graph.nodes)?graph.nodes:[]).slice(0,1500).map(normalizeNode).filter(Boolean);
+    const known=new Set(nodes.map(item=>item.id));
+    edges=(Array.isArray(graph.edges)?graph.edges:[]).slice(0,6000).map((item,index)=>normalizeEdge(item,index,known)).filter(Boolean);
+    const supplied=Array.isArray(options.lanes)?options.lanes:Array.isArray(graph.lanes)?graph.lanes:[];
+    lanes=[...new Set([...supplied.map(String),...nodes.map(item=>item.lane)])].slice(0,12);
+    board.style.setProperty('--lane-count',String(Math.max(1,Math.min(6,lanes.length))));
+    if(selectedId&&!known.has(selectedId)) selectedId='';
+    render();
+    return {nodes:nodes.map(item=>({...item})),edges:edges.map(item=>({...item}))};
+  }
+
+  function render(){
+    board.replaceChildren();
+    for(const laneName of lanes){
+      const lane=document.createElement('section'); lane.className='lane'; lane.setAttribute('aria-label',laneName);
+      const heading=document.createElement('h3'); heading.textContent=laneName; lane.append(heading);
+      const laneNodes=nodes.filter(node=>node.lane===laneName).sort((left,right)=>left.order-right.order||left.label.localeCompare(right.label));
+      for(const node of laneNodes){
+        const button=document.createElement('button'); button.type='button'; button.className='node'; button.dataset.nodeId=node.id; button.setAttribute('aria-pressed',String(node.id===selectedId));
+        const label=document.createElement('strong'); label.textContent=node.label; button.append(label);
+        if(node.summary){const summary=document.createElement('small'); summary.textContent=node.summary; button.append(summary);}
+        lane.append(button);
+      }
+      if(!laneNodes.length){const empty=document.createElement('p'); empty.className='empty'; empty.textContent='No cards in this lane.'; lane.append(empty);}
+      board.append(lane);
+    }
+    renderSelection();
+  }
+
+  function renderSelection(){
+    board.querySelectorAll('[data-node-id]').forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.nodeId===selectedId)));
+    const selected=nodes.find(item=>item.id===selectedId);
+    selectedTitle.textContent=selected?.label||'Choose a card';
+    selectedSummary.textContent=selected?.summary||'Select a person, event, source, order, or hypothesis to see its record-based connections.';
+    edgeList.replaceChildren();
+    if(!selected) return;
+    const related=edges.filter(edge=>edge.from===selectedId||edge.to===selectedId);
+    for(const edge of related){
+      const otherId=edge.from===selectedId?edge.to:edge.from; const other=nodes.find(node=>node.id===otherId);
+      const row=document.createElement('li'); const button=document.createElement('button');
+      button.type='button'; button.className='edge'; button.dataset.edgeId=edge.id; button.textContent=`${edge.label}: ${other?.label||otherId}`;
+      row.append(button); edgeList.append(row);
+    }
+    if(!related.length){const row=document.createElement('li'); row.className='empty'; row.textContent='No displayed connections.'; edgeList.append(row);}
+  }
+
+  host.dispatchEvent(new CustomEvent('relationship-board-ready',{bubbles:true,composed:true}));
+</script>

package/runtime/arcane/components/screen-capture.html

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="./arcane/css/theme.css?v=1"><link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>:host{display:block}.capture{display:grid;gap:var(--arcane-space-4)}.actions{display:grid;gap:var(--arcane-space-3);grid-template-columns:repeat(3,minmax(0,1fr))}.action{display:grid;gap:var(--arcane-space-2);padding:var(--arcane-space-4);text-align:left}.action strong{font-size:1.05rem}.action span{color:var(--arcane-muted);font-size:.85rem}.recording{align-items:center;display:flex;gap:var(--arcane-space-3);justify-content:space-between;padding:var(--arcane-space-3);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-medium)}.preview{display:grid;place-items:center;min-height:16rem;overflow:hidden;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-large)}.preview :where(img,video){display:block;max-width:100%;max-height:34rem}.empty{color:var(--arcane-muted);text-align:center}.status{margin:0;color:var(--arcane-muted)}@media(max-width:44rem){.actions{grid-template-columns:1fr}}</style>
+<section class="capture"><div class="actions"><button class="action arcane-card" type="button" data-capture="image"><strong>Screenshot</strong><span>Capture the selected display as PNG.</span></button><button class="action arcane-card" type="button" data-capture="video"><strong>Record video</strong><span>Record the selected display in a browser-supported video format.</span></button><button class="action arcane-card" type="button" data-capture="gif"><strong>Record GIF</strong><span>Record a compact, lower-frame-rate animated GIF.</span></button></div><div id="recording" class="recording" hidden><span id="recordingLabel">Recording…</span><button id="stop" class="arcane-button" type="button">Stop recording</button></div><div id="preview" class="preview"><div class="empty"><strong>No capture yet</strong><p>Your capture remains on this device unless you choose to save it.</p></div></div><p id="status" class="status" role="status" aria-live="polite">Choose a capture type. Your browser will ask which display to share.</p></section>
+<script type="module">const host=this,root=host.shadowRoot,preview=root.querySelector('#preview'),recording=root.querySelector('#recording'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/screen-capture.html',document.baseURI);const {default:ScreenCapture}=await import(new URL('../modules/ScreenCapture.js',componentURL));const capture=new ScreenCapture();let previewUrl='';
+root.querySelector('.actions').addEventListener('click',async event=>{const mode=event.target.closest('[data-capture]')?.dataset.capture;if(!mode)return;setButtons(true);try{if(mode==='image'){status.textContent='Choose a display to capture…';showResult(await capture.captureImage())}else{status.textContent='Choose a display to record…';if(mode==='video')await capture.startVideo();else await capture.startGif();recording.hidden=false;root.querySelector('#recordingLabel').textContent=mode==='gif'?'Recording GIF frames…':'Recording video…';status.textContent='Recording. Return here and press Stop when finished.'}}catch(error){status.textContent=error.message;setButtons(false)}});root.querySelector('#stop').addEventListener('click',async()=>{root.querySelector('#stop').disabled=true;status.textContent='Finishing capture…';try{showResult(await capture.stop())}catch(error){status.textContent=error.message}finally{recording.hidden=true;root.querySelector('#stop').disabled=false;setButtons(false)}});
+function setButtons(value){for(const button of root.querySelectorAll('[data-capture]'))button.disabled=value}
+function showResult(result){if(previewUrl)URL.revokeObjectURL(previewUrl);previewUrl=URL.createObjectURL(result.blob);const media=document.createElement(result.mimeType.startsWith('video/')?'video':'img');media.src=previewUrl;if(media.tagName==='VIDEO')media.controls=true;media.alt='Captured display preview';preview.replaceChildren(media);status.textContent=`Capture ready · ${(result.blob.size/1024/1024).toFixed(2)} MB`;setButtons(false);host.dispatchEvent(new CustomEvent('screen-capture-result',{bubbles:true,composed:true,detail:{result}}))}
+host.capture=capture;host.ready=true;host.dispatchEvent(new CustomEvent('screen-capture-ready',{bubbles:true,composed:true}));</script>