arcane-os 0.1.0-dev.5

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

@@ -0,0 +1,360 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3">
+<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;
+    }
+
+    .entry-title,
+    .entry-markdown{
+        box-sizing:border-box;
+        margin:0;
+        width:100%;
+    }
+
+    .preview{
+        background:var(--background);
+        border:1px solid var(--border-color);
+        border-radius:.5em;
+        overflow:auto;
+        padding:1em;
+    }
+
+    .preview:empty::before{
+        content:attr(data-empty-label);
+        opacity:.55;
+    }
+
+    .toolbar,
+    .actions{
+        display:flex;
+        flex-wrap:wrap;
+        gap:.35em;
+    }
+
+    .toolbar button,
+    .actions button{
+        margin:0;
+    }
+
+    .entry-markdown{
+        font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+        min-height:10em;
+        resize:vertical;
+    }
+
+    .actions{
+        align-items:center;
+        justify-content:flex-end;
+    }
+
+    .status{
+        margin-right:auto;
+    }
+
+    .hidden{
+        display:none;
+    }
+</style>
+
+<section class="markdown-editor">
+    <input id="entryTitle" class="entry-title" type="text">
+    <section id="preview" class="preview"></section>
+    <section id="toolbar" class="toolbar"></section>
+    <textarea id="entryMarkdown" class="entry-markdown"></textarea>
+    <section class="actions">
+        <span id="status" class="status" aria-live="polite"></span>
+        <button id="save" type="button" disabled></button>
+    </section>
+</section>
+
+<script type="module">
+    const host=this;
+    const componentURL=new URL(
+        host.getAttribute('href')||'./arcane/components/markdown-editor.html',
+        document.baseURI
+    );
+    const moduleURL=name=>new URL(`../modules/${name}`,componentURL).href;
+    const {default:MD}=await import(moduleURL('MD.js?v=2'));
+    const {
+        applyMarkdownFormat,
+        normalizeMarkdownOptions
+    }=await import(moduleURL('ComponentContracts.js'));
+    const titleInput=host.shadowRoot.querySelector('#entryTitle');
+    const preview=host.shadowRoot.querySelector('#preview');
+    const toolbar=host.shadowRoot.querySelector('#toolbar');
+    const textarea=host.shadowRoot.querySelector('#entryMarkdown');
+    const saveButton=host.shadowRoot.querySelector('#save');
+    const status=host.shadowRoot.querySelector('#status');
+
+    let previewFrame=0;
+    let options=normalizeMarkdownOptions(optionsFromDataset());
+
+    host.clear=clear;
+    host.configure=configure;
+    host.focus=()=>textarea.focus();
+    host.saveEntry=saveEntry;
+
+    Object.defineProperties(
+        host,
+        {
+            entryTitle:{
+                get:()=>titleInput.value,
+                set:value=>setTitle(value)
+            },
+            options:{get:getOptions,set:configure},
+            value:{get:()=>textarea.value,set:setValue}
+        }
+    );
+
+    textarea.addEventListener('input',contentChanged);
+    titleInput.addEventListener('input',contentChanged);
+    toolbar.addEventListener('click',formatMarkdown);
+    saveButton.addEventListener('click',saveEntry);
+
+    function optionsFromDataset(){
+        const dataset=host.dataset||{};
+        const mapped={};
+        const fields=[
+            'bodyPlaceholder',
+            'previewLabel',
+            'saveLabel',
+            'titlePlaceholder',
+            'toolbarLabel'
+        ];
+        for(const field of fields){
+            if(dataset[field]!==undefined){
+                mapped[field]=dataset[field];
+            }
+        }
+        for(const field of [
+            'clearOnSave',
+            'readOnly',
+            'showPreview',
+            'showSave',
+            'showTitle',
+            'showToolbar'
+        ]){
+            if(dataset[field]!==undefined){
+                mapped[field]=dataset[field]==='true';
+            }
+        }
+        return mapped;
+    }
+
+    function configure(input={}){
+        const setInitialValue=Object.prototype.hasOwnProperty.call(
+            input||{},
+            'initialValue'
+        );
+        const setInitialTitle=Object.prototype.hasOwnProperty.call(
+            input||{},
+            'initialTitle'
+        );
+        options=normalizeMarkdownOptions(input,options);
+        renderOptions();
+        if(setInitialTitle){
+            titleInput.value=options.initialTitle;
+        }
+        if(setInitialValue){
+            textarea.value=options.initialValue;
+        }
+        updatePreview();
+        return getOptions();
+    }
+
+    function renderOptions(){
+        titleInput.placeholder=options.labels.titlePlaceholder;
+        textarea.placeholder=options.labels.bodyPlaceholder;
+        preview.setAttribute('aria-label',options.labels.preview);
+        preview.dataset.emptyLabel=options.labels.preview;
+        toolbar.setAttribute('aria-label',options.labels.toolbar);
+        saveButton.innerText=options.labels.save;
+        titleInput.classList.toggle('hidden',!options.showTitle);
+        preview.classList.toggle('hidden',!options.showPreview);
+        toolbar.classList.toggle('hidden',!options.showToolbar);
+        saveButton.classList.toggle('hidden',!options.showSave);
+        titleInput.readOnly=options.readOnly;
+        textarea.readOnly=options.readOnly;
+        renderToolbar();
+        syncSaveButton();
+    }
+
+    function renderToolbar(){
+        const fragment=document.createDocumentFragment();
+        for(const format of options.formats){
+            const button=document.createElement('button');
+            button.type='button';
+            button.dataset.format=format.id;
+            button.title=format.title;
+            button.innerText=format.label;
+            button.disabled=options.readOnly;
+            fragment.append(button);
+        }
+        toolbar.replaceChildren(fragment);
+    }
+
+    function contentChanged(){
+        schedulePreview();
+        const detail={
+            markdown:textarea.value,
+            title:titleInput.value
+        };
+        host.dispatchEvent(
+            new CustomEvent(
+                'markdown-editor-change',
+                {bubbles:true,composed:true,detail}
+            )
+        );
+        if(options.onChange){
+            Promise.resolve(options.onChange(detail)).catch(
+                error=>console.error('Markdown change callback failed:',error)
+            );
+        }
+    }
+
+    function schedulePreview(){
+        if(previewFrame){
+            cancelAnimationFrame(previewFrame);
+        }
+        previewFrame=requestAnimationFrame(updatePreview);
+    }
+
+    function updatePreview(){
+        if(previewFrame){
+            cancelAnimationFrame(previewFrame);
+        }
+        previewFrame=0;
+        preview.innerHTML=new MD(textarea.value).safeRendered;
+        preview.querySelectorAll('a').forEach(
+            link=>{
+                link.target='_blank';
+                link.rel='noopener noreferrer';
+            }
+        );
+    }
+
+    function formatMarkdown(event){
+        if(options.readOnly){
+            return;
+        }
+        const button=event.target.closest('[data-format]');
+        const format=options.formats.find(
+            candidate=>candidate.id===button?.dataset.format
+        );
+        if(!button||!format){
+            return;
+        }
+
+        const result=applyMarkdownFormat(
+            textarea.value,
+            textarea.selectionStart,
+            textarea.selectionEnd,
+            format
+        );
+        textarea.value=result.value;
+        textarea.focus();
+        textarea.setSelectionRange(result.selectionStart,result.selectionEnd);
+        contentChanged();
+    }
+
+    async function saveEntry(){
+        if(options.readOnly||!options.showSave){
+            return false;
+        }
+        const markdown=textarea.value;
+        const entryTitle=titleInput.value.trim();
+        if(!markdown.trim()){
+            status.innerText=options.labels.emptyError;
+            textarea.focus();
+            return false;
+        }
+
+        const save=options.onSave||(
+            typeof host.save==='function'?host.save.bind(host):null
+        );
+        if(!save){
+            status.innerText=options.labels.unavailable;
+            return false;
+        }
+
+        saveButton.disabled=true;
+        status.innerText=options.labels.saving;
+        try{
+            await save({title:entryTitle,markdown});
+            if(options.clearOnSave){
+                clear();
+            }
+            status.innerText=options.labels.saved;
+            host.dispatchEvent(
+                new CustomEvent(
+                    'markdown-editor-saved',
+                    {
+                        bubbles:true,
+                        composed:true,
+                        detail:{title:entryTitle,markdown}
+                    }
+                )
+            );
+            return true;
+        }catch(error){
+            status.innerText=options.labels.saveError;
+            console.error('Unable to save Markdown content:',error);
+            return false;
+        }finally{
+            syncSaveButton();
+        }
+    }
+
+    function clear(){
+        titleInput.value='';
+        textarea.value='';
+        updatePreview();
+        return true;
+    }
+
+    function setValue(value=''){
+        textarea.value=`${value??''}`;
+        updatePreview();
+        return textarea.value;
+    }
+
+    function setTitle(value=''){
+        titleInput.value=`${value??''}`;
+        return titleInput.value;
+    }
+
+    function syncSaveButton(){
+        saveButton.disabled=options.readOnly||!options.showSave;
+    }
+
+    function getOptions(){
+        return {
+            ...options,
+            labels:{...options.labels},
+            formats:options.formats.map(format=>({...format}))
+        };
+    }
+
+    renderOptions();
+    titleInput.value=options.initialTitle;
+    textarea.value=options.initialValue;
+    updatePreview();
+    status.innerText='';
+    host.ready=true;
+    host.dispatchEvent(
+        new CustomEvent(
+            'markdown-editor-ready',
+            {bubbles:true,composed:true}
+        )
+    );
+</script>

package/runtime/arcane/components/media-embed.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}.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));let platformUrl='https://www.youtube.com/',privacyEnhanced=true;
+host.configure=options=>{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;
+form.addEventListener('submit',event=>{event.preventDefault();load(input.value)});root.querySelector('#platform').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('media-open-platform',{bubbles:true,composed:true,detail:{url:platformUrl}})));
+function load(value){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.';host.dispatchEvent(new CustomEvent('media-load',{bubbles:true,composed:true,detail:{locator,url}}));return locator}catch(error){status.textContent=error.message;frame.hidden=true;empty.hidden=false;host.dispatchEvent(new CustomEvent('media-error',{bubbles:true,composed:true,detail:{error}}));return null}}
+host.ready=true;host.dispatchEvent(new CustomEvent('media-embed-ready',{bubbles:true,composed:true}));</script>