arcane-os 0.3.0 → 0.3.2

package/runtime/arcane/components/markdown-document.html

@@ -232,47 +232,6 @@
     const contentElement=host.shadowRoot.querySelector('#content');
 
     // BEGIN MARKDOWN_DOCUMENT_POLICY
-    const MARKDOWN_DOCUMENT_ALLOWED_ELEMENTS=Object.freeze([
-        'A','ABBR','BLOCKQUOTE','BR','CODE','DEL','EM',
-        'H1','H2','H3','H4','H5','H6','HR','IMG','KBD','LI',
-        'OL','P','PRE','S','STRONG','SUB','SUP','TABLE','TBODY',
-        'TD','TFOOT','TH','THEAD','TR','UL'
-    ]);
-    const MARKDOWN_DOCUMENT_ALLOWED_ATTRIBUTES=Object.freeze(
-        {
-            A:Object.freeze(['href','title']),
-            ABBR:Object.freeze(['title']),
-            CODE:Object.freeze(['class']),
-            IMG:Object.freeze(['alt','src','title']),
-            LI:Object.freeze(['value']),
-            OL:Object.freeze(['start']),
-            TD:Object.freeze(['colspan','rowspan']),
-            TH:Object.freeze(['colspan','rowspan','scope'])
-        }
-    );
-    const MARKDOWN_DOCUMENT_LINK_PROTOCOLS=new Set(['http:','https:','mailto:']);
-    const MARKDOWN_DOCUMENT_ASSET_PROTOCOLS=new Set(['http:','https:']);
-
-    function markdownDocumentElementAllowed(name=''){
-        return MARKDOWN_DOCUMENT_ALLOWED_ELEMENTS.includes(
-            String(name||'').toUpperCase()
-        );
-    }
-
-    function markdownDocumentAllowedAttributes(name=''){
-        return MARKDOWN_DOCUMENT_ALLOWED_ATTRIBUTES[
-            String(name||'').toUpperCase()
-        ]||Object.freeze([]);
-    }
-
-    function markdownDocumentCleanURLInput(value=''){
-        const input=String(value??'').trim();
-        if(!input||/[\u0000-\u001F\u007F]/.test(input)){
-            return '';
-        }
-        return input;
-    }
-
     function markdownDocumentDecodeFragment(value=''){
         try{
             return decodeURIComponent(String(value||''));
@@ -281,106 +240,58 @@
         }
     }
 
-    function markdownDocumentSourceURL(value='',baseURL='',pageOrigin=''){
+    function markdownDocumentSourceURL(value='',baseURL=''){
         const fallback=baseURL||document.baseURI;
-        const expectedOrigin=pageOrigin
-            ||globalThis.location?.origin
-            ||new URL(fallback).origin;
-        const input=markdownDocumentCleanURLInput(value||fallback);
-        if(!input){
-            return '';
-        }
-
         try{
-            const url=new URL(input,fallback);
-            if(
-                !MARKDOWN_DOCUMENT_ASSET_PROTOCOLS.has(url.protocol)
-                ||url.origin!==expectedOrigin
-                ||url.username
-                ||url.password
-            ){
-                return '';
-            }
-            return url.href;
+            return new URL(String(value||fallback),fallback).href;
         }catch{
             return '';
         }
     }
 
-    function markdownDocumentLinkPolicy(value='',sourceURL='',pageOrigin=''){
-        const input=markdownDocumentCleanURLInput(value);
+    function markdownDocumentLinkPolicy(value='',sourceURL=''){
+        const input=String(value??'');
         if(!input){
             return null;
         }
 
-        const expectedOrigin=pageOrigin
-            ||globalThis.location?.origin
-            ||new URL(sourceURL).origin;
-
         if(input.startsWith('#')){
-            const fragment=markdownDocumentDecodeFragment(input.slice(1))
-                .replace(/[\u0000-\u001F\u007F]/g,'')
-                .slice(0,256);
+            const fragment=markdownDocumentDecodeFragment(input.substring(1));
             if(!fragment){
                 return null;
             }
-            return Object.freeze(
-                {
-                    external:false,
-                    fragment,
-                    href:`#${encodeURIComponent(fragment)}`,
-                    kind:'fragment',
-                    targetURL:new URL(`#${encodeURIComponent(fragment)}`,sourceURL).href
-                }
-            );
+            return {
+                external:false,
+                fragment,
+                href:input,
+                kind:'fragment',
+                targetURL:new URL(input,sourceURL).href
+            };
         }
 
         try{
             const url=new URL(input,sourceURL);
-            if(
-                !MARKDOWN_DOCUMENT_LINK_PROTOCOLS.has(url.protocol)
-                ||url.username
-                ||url.password
-            ){
-                return null;
-            }
-
-            const sameOrigin=url.origin===expectedOrigin;
+            const sameOrigin=url.origin===new URL(sourceURL).origin;
             const markdown=sameOrigin&&/\.(?:md|markdown)$/i.test(url.pathname);
-            return Object.freeze(
-                {
-                    external:!sameOrigin,
-                    fragment:markdownDocumentDecodeFragment(url.hash.slice(1)).slice(0,256),
-                    href:url.href,
-                    kind:markdown?'markdown':'link',
-                    targetURL:url.href
-                }
-            );
+            return {
+                external:!sameOrigin,
+                fragment:markdownDocumentDecodeFragment(url.hash.substring(1)),
+                href:url.href,
+                kind:markdown?'markdown':'link',
+                targetURL:url.href
+            };
         }catch{
             return null;
         }
     }
 
-    function markdownDocumentAssetURL(value='',sourceURL='',pageOrigin=''){
-        const input=markdownDocumentCleanURLInput(value);
+    function markdownDocumentAssetURL(value='',sourceURL=''){
+        const input=String(value??'');
         if(!input){
             return '';
         }
-
-        const expectedOrigin=pageOrigin
-            ||globalThis.location?.origin
-            ||new URL(sourceURL).origin;
         try{
-            const url=new URL(input,sourceURL);
-            if(
-                !MARKDOWN_DOCUMENT_ASSET_PROTOCOLS.has(url.protocol)
-                ||url.origin!==expectedOrigin
-                ||url.username
-                ||url.password
-            ){
-                return '';
-            }
-            return url.href;
+            return new URL(input,sourceURL).href;
         }catch{
             return '';
         }
@@ -393,8 +304,7 @@
             .toLowerCase()
             .replace(/&/g,' and ')
             .replace(/[^a-z0-9]+/g,'-')
-            .replace(/^-+|-+$/g,'')
-            .slice(0,80);
+            .replace(/^-+|-+$/g,'');
         return identifier||'section';
     }
 
@@ -416,22 +326,18 @@
         document.baseURI,
         pageOrigin
     );
-    const defaultOptions=Object.freeze(
-        {
-            labels:Object.freeze(
-                {
-                    content:'Document content',
-                    empty:'No document content is available.',
-                    error:'Unable to display this document.',
-                    loading:'Loading document…',
-                    tableOfContents:'On this page'
-                }
-            ),
-            onNavigate:null,
-            showTableOfContents:true,
-            sourceURL:defaultSourceURL
-        }
-    );
+    const defaultOptions={
+        labels:{
+            content:'Document content',
+            empty:'No document content is available.',
+            error:'Unable to display this document.',
+            loading:'Loading document…',
+            tableOfContents:'On this page'
+        },
+        onNavigate:null,
+        showTableOfContents:true,
+        sourceURL:defaultSourceURL
+    };
 
     let currentMarkdown='';
     let currentSourceURL=defaultSourceURL;
@@ -503,7 +409,7 @@
             pageOrigin
         );
         if(!sourceURL){
-            throw new TypeError('Markdown document sourceURL must resolve to a same-origin HTTP(S) URL.');
+            throw new TypeError('Markdown document sourceURL must resolve to a valid URL.');
         }
 
         const onNavigate=input.onNavigate===undefined
@@ -520,14 +426,12 @@
             throw new TypeError('Markdown document showTableOfContents must be boolean.');
         }
 
-        return Object.freeze(
-            {
-                labels:Object.freeze(labels),
-                onNavigate,
-                showTableOfContents,
-                sourceURL
-            }
-        );
+        return {
+            labels,
+            onNavigate,
+            showTableOfContents,
+            sourceURL
+        };
     }
 
     function getOptions(){
@@ -712,11 +616,10 @@
             return true;
         }
 
-        // MD.safeRendered is the shared first pass. The detached template used
-        // below is inert while the stricter positive policy removes anything
-        // that the shared sanitizer intentionally leaves available.
+        // MD.safeRendered owns Markdown rendering. The detached template keeps
+        // source-relative links and images coherent before insertion.
         const safeRendered=new MD(markdown).safeRendered;
-        const fragment=strictMarkdownFragment(safeRendered,sourceURL);
+        const fragment=renderedMarkdownFragment(safeRendered,sourceURL);
         const meaningful=Boolean(
             fragment.textContent?.trim()
             ||fragment.querySelector('img,hr,table')
@@ -741,136 +644,38 @@
         return true;
     }
 
-    function strictMarkdownFragment(html='',sourceURL=options.sourceURL){
+    function renderedMarkdownFragment(html='',sourceURL=options.sourceURL){
         const template=document.createElement('template');
         template.innerHTML=html;
 
-        const elements=Array.from(template.content.querySelectorAll('*'));
-        for(const element of elements){
-            const name=element.tagName.toUpperCase();
-            if(!markdownDocumentElementAllowed(name)){
-                // Removing the complete subtree rejects custom elements such as
-                // html-import rather than preserving executable descendants.
-                element.remove();
+        for(const link of template.content.querySelectorAll('a[href]')){
+            const originalHref=link.getAttribute('href')||'';
+            const policy=markdownDocumentLinkPolicy(originalHref,sourceURL,pageOrigin);
+            if(!policy){
                 continue;
             }
-
-            const allowedAttributes=new Set(markdownDocumentAllowedAttributes(name));
-            for(const attribute of Array.from(element.attributes)){
-                if(!allowedAttributes.has(attribute.name.toLowerCase())){
-                    element.removeAttribute(attribute.name);
-                }
-            }
-
-            sanitizeAllowedAttributeValues(element,name);
-            if(name==='A'){
-                sanitizeLink(element,sourceURL);
-            }else if(name==='IMG'){
-                sanitizeImage(element,sourceURL);
+            link.setAttribute('href',policy.href);
+            link.dataset.markdownKind=policy.kind;
+            link.dataset.markdownOriginalHref=originalHref;
+            link.dataset.markdownTargetUrl=policy.targetURL;
+            link.dataset.markdownFragment=policy.fragment;
+        }
+
+        for(const image of template.content.querySelectorAll('img[src]')){
+            const resolved=markdownDocumentAssetURL(
+                image.getAttribute('src')||'',
+                sourceURL,
+                pageOrigin
+            );
+            if(resolved){
+                image.setAttribute('src',resolved);
             }
+            image.alt=image.getAttribute('alt')||'';
         }
 
-        const comments=[];
-        const commentWalker=document.createTreeWalker(
-            template.content,
-            globalThis.NodeFilter?.SHOW_COMMENT||128
-        );
-        while(commentWalker.nextNode()){
-            comments.push(commentWalker.currentNode);
-        }
-        comments.forEach(comment=>comment.remove());
         return template.content;
     }
 
-    function sanitizeAllowedAttributeValues(element,name){
-        for(const attribute of Array.from(element.attributes)){
-            if(attribute.value.length>2048){
-                element.setAttribute(attribute.name,attribute.value.slice(0,2048));
-            }
-        }
-
-        if(name==='CODE'&&element.hasAttribute('class')){
-            const className=element.getAttribute('class').trim();
-            if(!/^language-[a-z0-9][a-z0-9_+-]{0,63}$/i.test(className)){
-                element.removeAttribute('class');
-            }
-        }
-
-        for(const attribute of ['colspan','rowspan']){
-            if(element.hasAttribute(attribute)){
-                sanitizeIntegerAttribute(element,attribute,1,100);
-            }
-        }
-        if(name==='OL'&&element.hasAttribute('start')){
-            sanitizeIntegerAttribute(element,'start',-100000,100000);
-        }
-        if(name==='LI'&&element.hasAttribute('value')){
-            sanitizeIntegerAttribute(element,'value',-100000,100000);
-        }
-        if(name==='TH'&&element.hasAttribute('scope')){
-            const scope=element.getAttribute('scope').toLowerCase();
-            if(!['col','colgroup','row','rowgroup'].includes(scope)){
-                element.removeAttribute('scope');
-            }else{
-                element.setAttribute('scope',scope);
-            }
-        }
-    }
-
-    function sanitizeIntegerAttribute(element,name,min,max){
-        const value=Number(element.getAttribute(name));
-        if(!Number.isSafeInteger(value)||value<min||value>max){
-            element.removeAttribute(name);
-            return;
-        }
-        element.setAttribute(name,String(value));
-    }
-
-    function sanitizeLink(link,sourceURL){
-        const originalHref=link.getAttribute('href')||'';
-        const policy=markdownDocumentLinkPolicy(
-            originalHref,
-            sourceURL,
-            pageOrigin
-        );
-        if(!policy){
-            link.removeAttribute('href');
-            return;
-        }
-
-        link.setAttribute('href',policy.href);
-        link.dataset.markdownKind=policy.kind;
-        link.dataset.markdownOriginalHref=originalHref.slice(0,2048);
-        link.dataset.markdownTargetUrl=policy.targetURL;
-        link.dataset.markdownFragment=policy.fragment;
-
-        if(
-            policy.external
-            &&/^https?:$/i.test(new URL(policy.targetURL).protocol)
-        ){
-            link.target='_blank';
-            link.rel='noopener noreferrer';
-            link.referrerPolicy='no-referrer';
-        }
-    }
-
-    function sanitizeImage(image,sourceURL){
-        const resolved=markdownDocumentAssetURL(
-            image.getAttribute('src')||'',
-            sourceURL,
-            pageOrigin
-        );
-        if(resolved){
-            image.setAttribute('src',resolved);
-        }else{
-            image.removeAttribute('src');
-        }
-        image.alt=image.getAttribute('alt')||'';
-        image.loading='lazy';
-        image.decoding='async';
-        image.referrerPolicy='no-referrer';
-    }
-
     function decorateHeadings(fragment){
         const usedHeadingIds=new Set();
         return Array.from(fragment.querySelectorAll('h1,h2,h3,h4,h5,h6'))
@@ -884,7 +689,7 @@
                     const level=Number(heading.tagName.slice(1));
                     heading.id=id;
                     heading.tabIndex=-1;
-                    return Object.freeze({id,level,text});
+                    return {id,level,text};
                 }
             );
     }
@@ -904,7 +709,7 @@
                 const label=headingText?`${prefix}: ${headingText}`:prefix;
 
                 table.tabIndex=0;
-                table.setAttribute('aria-label',label.slice(0,256));
+                table.setAttribute('aria-label',label);
             }
         );
     }
@@ -963,7 +768,7 @@
             :String(error||options.labels.error);
         const code=String(error?.code||'ARCANE_MARKDOWN_DOCUMENT_RENDER_FAILED');
         const reason=String(error?.reason||'markdown-document-render-failed');
-        transition('error',{message:message.slice(0,2048),code,reason},operationId);
+        transition('error',{message,code,reason},operationId);
         return false;
     }
 
@@ -974,13 +779,11 @@
         state=nextState;
         updateStateDOM();
 
-        const eventDetail=Object.freeze(
-            {
-                ...detail,
-                sourceURL:currentSourceURL,
-                state
-            }
-        );
+        const eventDetail={
+            ...detail,
+            sourceURL:currentSourceURL,
+            state
+        };
         const publicDetail={
             characters:Number(detail.characters||currentMarkdown.length||0),
             headingCount:Array.isArray(detail.headings)?detail.headings.length:tableOfContents.length,
@@ -1055,15 +858,13 @@
             return;
         }
 
-        const detail=Object.freeze(
-            {
-                fragment:link.dataset.markdownFragment||'',
-                href:link.dataset.markdownOriginalHref||link.getAttribute('href'),
-                kind:link.dataset.markdownKind||'link',
-                sourceURL:currentSourceURL,
-                targetURL:link.dataset.markdownTargetUrl||link.href
-            }
-        );
+        const detail={
+            fragment:link.dataset.markdownFragment||'',
+            href:link.dataset.markdownOriginalHref||link.getAttribute('href'),
+            kind:link.dataset.markdownKind||'link',
+            sourceURL:currentSourceURL,
+            targetURL:link.dataset.markdownTargetUrl||link.href
+        };
         operationSequence+=1;
         const operationId=`${events.descriptor.instanceId}:navigate:${operationSequence}`;
         const publication=events.dispatch('markdown-document-navigate',detail,{

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

@@ -2,16 +2,12 @@
 <style>
     :host{
         display:block;
-        height:100%;
-        min-height:0;
     }
 
     .markdown-editor{
         display:grid;
         gap:.75em;
-        grid-template-rows:auto minmax(8em,1fr) auto minmax(10em,1fr) auto;
-        height:100%;
-        min-height:0;
+        grid-template-rows:auto auto auto auto auto;
     }
 
     .entry-title,
@@ -25,7 +21,7 @@
         background:var(--background);
         border:1px solid var(--border-color);
         border-radius:.5em;
-        overflow:auto;
+        overflow:visible;
         padding:1em;
     }
 
@@ -235,7 +231,7 @@
             markdown:textarea.value,
             title:titleInput.value
         };
-        emit('markdown-editor-change',detail,{markdownLength:detail.markdown.length,titleLength:detail.title.length});
+        emit('markdown-editor-change',detail,detail);
         if(options.onChange){
             Promise.resolve(options.onChange(detail)).catch(
                 error=>console.error('Markdown change callback failed:',error)
@@ -265,7 +261,7 @@
         preview.querySelectorAll('a').forEach(
             link=>{
                 link.target='_blank';
-                link.rel='noopener noreferrer';
+                link.removeAttribute('rel');
             }
         );
     }
@@ -299,7 +295,7 @@
             return false;
         }
         const markdown=textarea.value;
-        const entryTitle=titleInput.value.trim();
+        const entryTitle=titleInput.value;
         if(!markdown.trim()){
             status.innerText=options.labels.emptyError;
             textarea.focus();
@@ -330,7 +326,8 @@
                 resetEditor(false);
             }
             status.innerText=options.labels.saved;
-            emit('markdown-editor-saved',{title:entryTitle,markdown},{markdownLength:markdown.length,titleLength:entryTitle.length},operationId);
+            const detail={title:entryTitle,markdown};
+            emit('markdown-editor-saved',detail,detail,operationId);
             return true;
         }catch(error){
             if(destroyed||generation!==saveGeneration||controller.signal.aborted){

package/runtime/arcane/components/media-embed.html

@@ -1,11 +1,11 @@
 <link rel="stylesheet" href="./arcane/css/theme.css?v=1"><link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
-<style>:host{display:block}.player-shell{display:grid;gap:var(--arcane-space-4)}.loader{display:flex;gap:var(--arcane-space-2)}.loader input{min-width:0;width:100%}.player{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-large)}iframe{width:100%;height:100%;border:0}.empty{text-align:center;color:var(--arcane-muted);padding:var(--arcane-space-5)}.footer{align-items:center;display:flex;gap:var(--arcane-space-3);justify-content:space-between}.status{margin:0;color:var(--arcane-muted)}@media(max-width:36rem){.loader,.footer{align-items:stretch;flex-direction:column}}</style>
-<section class="player-shell"><form id="loader" class="loader"><label class="visually-hidden" for="mediaUrl">Video or playlist address</label><input id="mediaUrl" type="text" inputmode="url" autocomplete="off" spellcheck="false" placeholder="Paste a YouTube video or playlist URL"><button class="arcane-button" type="submit">Play</button></form><div class="player"><div id="empty" class="empty"><strong>Choose something to play</strong><p>Paste a YouTube or YouTube Music video or playlist address.</p></div><iframe id="frame" title="Embedded media player" hidden allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe></div><div class="footer"><p id="status" class="status" role="status" aria-live="polite">Nothing loaded.</p><button id="platform" class="arcane-button arcane-button--secondary" type="button">Open platform</button></div></section>
-<script type="module">const host=this,root=host.shadowRoot,form=root.querySelector('#loader'),input=root.querySelector('#mediaUrl'),frame=root.querySelector('#frame'),empty=root.querySelector('#empty'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/media-embed.html',document.baseURI);const {parseYouTubeMedia,youtubeEmbedUrl}=await import(new URL('../modules/YouTubeMedia.js',componentURL));const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.media-embed',eventTypes:['media-open-platform','media-load','media-error','media-embed-ready']}),lifecycleController=new AbortController();let platformUrl='https://www.youtube.com/',privacyEnhanced=true,destroyed=false,operationSequence=0;
+<style>:host{display:block}.player-shell{display:grid;gap:var(--arcane-space-4)}.loader{display:flex;gap:var(--arcane-space-2)}.loader input{min-width:0;width:100%}.player{aspect-ratio:16/9;display:grid;place-items:center;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-large)}iframe{width:100%;height:100%;border:0}.empty{text-align:center;color:var(--arcane-muted);padding:var(--arcane-space-5)}.footer{align-items:center;display:flex;gap:var(--arcane-space-3);justify-content:space-between}.status{margin:0;color:var(--arcane-muted)}@media(max-width:36rem){.loader,.footer{align-items:stretch;flex-direction:column}}</style>
+<section class="player-shell"><form id="loader" class="loader"><label class="visually-hidden" for="mediaUrl">Video or playlist address</label><input id="mediaUrl" type="text" inputmode="url" autocomplete="off" spellcheck="false" placeholder="Paste a YouTube video or playlist URL"><button class="arcane-button" type="submit">Play</button></form><div class="player"><div id="empty" class="empty"><strong>Choose something to play</strong><p>Paste a YouTube or YouTube Music video or playlist address.</p></div><iframe id="frame" title="Embedded media player" hidden allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowfullscreen></iframe></div><div class="footer"><p id="status" class="status" role="status" aria-live="polite">Nothing loaded.</p><button id="platform" class="arcane-button arcane-button--secondary" type="button">Open platform</button></div></section>
+<script type="module">const host=this,root=host.shadowRoot,form=root.querySelector('#loader'),input=root.querySelector('#mediaUrl'),frame=root.querySelector('#frame'),empty=root.querySelector('#empty'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/media-embed.html',document.baseURI);const {parseYouTubeMedia,youtubeEmbedUrl}=await import(new URL('../modules/YouTubeMedia.js',componentURL));const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.media-embed',eventTypes:['media-open-platform','media-load','media-error','media-embed-ready']}),lifecycleController=new AbortController();let platformUrl='https://www.youtube.com/',privacyEnhanced=false,destroyed=false,operationSequence=0;
 function nextOperationId(kind){operationSequence+=1;return `${events.descriptor.instanceId}:${kind}:${operationSequence}`}
 function emit(type,detail={},publicDetail={},operationId=null){if(destroyed)return false;const publication=events.dispatch(type,detail,{publicDetail,operationId});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true})}
-host.configure=options=>{if(destroyed)return false;platformUrl=String(options?.platformUrl||platformUrl);privacyEnhanced=options?.privacyEnhanced!==false;if(options?.placeholder)input.placeholder=String(options.placeholder);if(options?.openLabel)root.querySelector('#platform').textContent=String(options.openLabel);if(options?.initialValue){input.value=String(options.initialValue);load(input.value)}return host};host.load=load;host.destroy=destroy;
-form.addEventListener('submit',event=>{event.preventDefault();load(input.value)},{signal:lifecycleController.signal});root.querySelector('#platform').addEventListener('click',()=>emit('media-open-platform',{url:platformUrl},{destination:'platform'},nextOperationId('open-platform')),{signal:lifecycleController.signal});
-function load(value){if(destroyed)return null;const operationId=nextOperationId('load');try{const locator=parseYouTubeMedia(value),url=youtubeEmbedUrl(locator,{privacyEnhanced});frame.src=url;frame.hidden=false;empty.hidden=true;status.textContent=locator.type==='playlist'?'Playlist loaded.':'Video loaded.';emit('media-load',{locator,url},{mediaType:String(locator.type||'video')},operationId);return locator}catch(error){const code=String(error?.code||'ARCANE_MEDIA_EMBED_SOURCE_INVALID'),reason='media-source-invalid';status.textContent=error.message;frame.hidden=true;empty.hidden=false;emit('media-error',{error,code,reason},{code,reason},operationId);return null}}
+host.configure=options=>{if(destroyed)return false;platformUrl=String(options?.platformUrl||platformUrl);if(Object.hasOwn(options||{},'privacyEnhanced'))privacyEnhanced=options.privacyEnhanced===true;if(options?.placeholder)input.placeholder=String(options.placeholder);if(options?.openLabel)root.querySelector('#platform').textContent=String(options.openLabel);if(options?.initialValue){input.value=String(options.initialValue);load(input.value)}return host};host.load=load;host.destroy=destroy;
+form.addEventListener('submit',event=>{event.preventDefault();load(input.value)},{signal:lifecycleController.signal});root.querySelector('#platform').addEventListener('click',()=>{const detail={url:platformUrl,destination:'platform'};emit('media-open-platform',detail,detail,nextOperationId('open-platform'))},{signal:lifecycleController.signal});
+function load(value){if(destroyed)return null;const operationId=nextOperationId('load');try{const locator=parseYouTubeMedia(value),url=youtubeEmbedUrl(locator,{privacyEnhanced}),detail={locator,url};frame.src=url;frame.hidden=false;empty.hidden=true;status.textContent=locator.type==='playlist'?'Playlist loaded.':'Video loaded.';emit('media-load',detail,detail,operationId);return locator}catch(error){const code=String(error?.code||'ARCANE_MEDIA_EMBED_SOURCE_INVALID'),reason='media-source-invalid',detail={error,code,reason};status.textContent=error.message;frame.hidden=true;empty.hidden=false;emit('media-error',detail,detail,operationId);return null}}
 function destroy(){if(destroyed)return false;destroyed=true;lifecycleController.abort('media-embed-destroyed');frame.src='about:blank';frame.removeAttribute('src');frame.hidden=true;events.dispose();host.ready=false;return true}
 host.ready=true;emit('media-embed-ready',{}, {ready:true});</script>

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

@@ -1,14 +1,14 @@
 <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>
+<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:auto;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-large)}.preview :where(img,video){display:block}.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 the selected display as an 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 {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.screen-capture',eventTypes:['screen-capture-result','screen-capture-ready']});const capture=new ScreenCapture(),listeners=new AbortController();let destroyed=false,operationGeneration=0,previewUrl='';
 function emit(type,detail={},publicDetail={},operationId=null){if(destroyed)return false;const publication=events.dispatch(type,detail,{operationId,publicDetail});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true})}
 function current(generation){return !destroyed&&generation===operationGeneration}
-function cleanupCaptureStart(originalError=null){const cleanupErrors=[];clearInterval(capture.timer);if(capture.recorder&&capture.recorder.state!=='inactive'){try{capture.recorder.stop()}catch(error){cleanupErrors.push(error)}}try{capture.stopTracks(capture.stream)}catch(error){cleanupErrors.push(error)}try{capture.reset()}catch(error){cleanupErrors.push(error)}for(const error of cleanupErrors)console.error('Error cleaning up rejected screen capture start:',error);return originalError}
+function cleanupCaptureStart(originalError=null){const cleanupErrors=[];if(capture.recorder&&capture.recorder.state!=='inactive'){try{capture.recorder.stop()}catch(error){cleanupErrors.push(error)}}try{capture.stopTracks(capture.stream)}catch(error){cleanupErrors.push(error)}try{capture.reset()}catch(error){cleanupErrors.push(error)}for(const error of cleanupErrors)console.error('Error cleaning up rejected screen capture start:',error);return originalError}
 async function onCapture(event){const mode=event.target.closest('[data-capture]')?.dataset.capture;if(!mode||destroyed)return;const generation=++operationGeneration;setButtons(true);try{if(mode==='image'){status.textContent='Choose a display to capture…';const result=await capture.captureImage();if(!current(generation))return;showResult(result,generation)}else{status.textContent='Choose a display to record…';if(mode==='video')await capture.startVideo();else await capture.startGif();if(!current(generation)){cleanupCaptureStart();return}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){const originalError=mode==='image'?error:cleanupCaptureStart(error);if(!current(generation))return;status.textContent=originalError.message;setButtons(false)}}
 async function onStop(){if(destroyed)return;const generation=operationGeneration;root.querySelector('#stop').disabled=true;status.textContent='Finishing capture…';try{const result=await capture.stop();if(current(generation)&&result)showResult(result,generation)}catch(error){if(current(generation))status.textContent=error.message}finally{if(current(generation)){recording.hidden=true;root.querySelector('#stop').disabled=false;setButtons(false)}}}
 root.querySelector('.actions').addEventListener('click',onCapture,{signal:listeners.signal});root.querySelector('#stop').addEventListener('click',onStop,{signal:listeners.signal});
 function setButtons(value){for(const button of root.querySelectorAll('[data-capture]'))button.disabled=value}
-function showResult(result,generation){if(!current(generation))return false;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);return emit('screen-capture-result',{result},{mimeType:String(result.mimeType||''),size:Number(result.blob?.size||0)},`screen-capture-${events.instanceId}-${generation}`)}
+function showResult(result,generation){if(!current(generation))return false;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.';setButtons(false);return emit('screen-capture-result',{result},{result},`screen-capture-${events.instanceId}-${generation}`)}
 function destroy(){if(destroyed)return false;destroyed=true;++operationGeneration;listeners.abort('screen-capture-component-destroyed');host.ready=false;recording.hidden=true;setButtons(true);root.querySelector('#stop').disabled=true;if(previewUrl){URL.revokeObjectURL(previewUrl);previewUrl=''}let error=null;try{capture.destroy()}catch(value){error=value}finally{events.dispose()}if(error)throw error;return true}
 host.capture=capture;host.destroy=destroy;host.ready=true;emit('screen-capture-ready',{}, {ready:true},`screen-capture-ready-${events.instanceId}`);</script>

package/runtime/arcane/components/source-explanation.html

@@ -36,7 +36,7 @@
     <label>Alleged actor<select data-actor></select></label>
     <label>Disposition<select data-disposition></select></label>
     <label>Confidence<select data-confidence></select></label>
-    <label class="notes">Notes, contrary facts, and follow-up<textarea data-notes maxlength="10000"></textarea></label>
+    <label class="notes">Notes, contrary facts, and follow-up<textarea data-notes></textarea></label>
     <div class="save-row"><button type="submit">Save decision</button><span class="save-state" data-save-state aria-live="polite"></span></div>
   </form>
 </section>
@@ -82,7 +82,7 @@
 
   function showFinding(value={},config={}){
     finding=value&&typeof value==='object'?value:null; if(!finding) throw new TypeError('A finding is required.');
-    sources=(Array.isArray(finding.sources)?finding.sources:[]).slice(0,40);
+    sources=Array.isArray(finding.sources)?finding.sources:[];
     title.textContent=String(finding.label||'Investigative lead'); assessment.textContent=String(finding.assessment||finding.conclusion||'Human review is required before reliance.');
     badges.replaceChildren();
     for(const value of [finding.allegedActorLabel?`Alleged actor: ${finding.allegedActorLabel}`:'Actor not assigned',finding.kind||'Investigative lead',finding.confidence?`${finding.confidence} confidence`:'Confidence not assigned']){const badge=document.createElement('span'); badge.className='badge'; badge.textContent=value; badges.append(badge);}