@telepath-computer/television 0.1.18 → 0.1.20

package/README.md

@@ -74,13 +74,13 @@ This starts a Vite dev server for the shared renderer in `src/browser/` with HMR
 
 ### Layout demo
 
-To experiment with generic `layout-stream` behavior (grid sizes, drag reorder, local persistence) without the main app:
+To experiment with generic `layout-view` behavior (grid sizes, drag reorder, local persistence) without the main app:
 
 ```bash
-npm run demo:layout
+npm run layout
 ```
 
-Then open the printed URL (default dev server port `5174`). See `docs/layout-stream.md` for how the stream relates to `Workspace.layout` in production.
+Then open the printed URL (default dev server port `5174`). See `docs/layout/` for how layout rendering relates to `Workspace.layout` in production.
 
 ### Verification
 

package/dist/artifact-runtime/index.js

@@ -1 +1 @@
-(function(){"use strict";window.__televisionArtifactRuntime=!0})();
+(function(){"use strict";function s(){if(!document.referrer)return"*";try{const e=new URL(document.referrer);return e.protocol==="file:"?"*":e.origin}catch{return"*"}}function f(e){return e&&typeof e=="object"&&e.type==="scroll"&&typeof e.deltaX=="number"&&typeof e.deltaY=="number"}const u=s(),d=120,m=120;let r=null,o=null;function a(){return document.scrollingElement??document.documentElement}function p(e){r!=null&&r.frame&&cancelAnimationFrame(r.frame);const t={left:e.left,top:e.top,deadline:performance.now()+d,frame:0};r=t;const c=()=>{if(r!==t)return;const l=a();if((l.scrollLeft!==t.left||l.scrollTop!==t.top)&&l.scrollTo({left:t.left,top:t.top,behavior:"auto"}),performance.now()>=t.deadline){r=null;return}t.frame=requestAnimationFrame(c)};t.frame=requestAnimationFrame(c)}function n(e){var t;document.documentElement.classList.toggle("show-scrollbars",e),(t=document.body)==null||t.classList.toggle("show-scrollbars",e)}function i(){o&&clearTimeout(o),o=window.setTimeout(()=>{o=null,n(!1)},m)}function w(e){e.preventDefault(),e.stopPropagation(),!e.shiftKey&&Math.abs(e.deltaY)>Math.abs(e.deltaX)&&(n(!0),i());const t=a();p({left:t.scrollLeft,top:t.scrollTop}),window.parent.postMessage({type:"wheel",deltaX:e.deltaX,deltaY:e.deltaY,shiftKey:e.shiftKey},u)}document.addEventListener("wheel",w,{passive:!1,capture:!0}),window.addEventListener("message",e=>{e.source!==window.parent||!f(e.data)||(r!=null&&r.frame&&cancelAnimationFrame(r.frame),r=null,n(!0),i(),window.scrollBy({left:e.data.deltaX,top:e.data.deltaY,behavior:"auto"}))}),window.__televisionArtifactRuntime=!0})();

package/dist/artifact-runtime/style.css

@@ -1 +1 @@
-dropdown-menu{position:relative;display:inline-block;color:inherit}dropdown-group{display:grid;gap:var(--space-4)}dropdown-label{display:block;padding:var(--space-4) var(--space-8);color:var(--color-text-muted);font:inherit;font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;text-transform:uppercase}dropdown-divider{display:block;height:1px;margin:var(--space-4) 0;background:var(--color-border)}[data-dropdown-trigger],dropdown-item{color:inherit;font:inherit;line-height:1.2}[data-dropdown-trigger],dropdown-menu::part(trigger){display:inline-flex;align-items:center;gap:var(--space-8);margin:0;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);box-shadow:none;cursor:pointer}[data-dropdown-trigger]:hover,dropdown-menu::part(trigger):hover{background:var(--color-interactive-hover)}dropdown-menu[open] [data-dropdown-trigger],dropdown-menu[open]::part(trigger){background:var(--color-interactive)}[data-dropdown-trigger-label],dropdown-menu::part(trigger-label){min-width:0}[data-dropdown-trigger-icon],dropdown-menu::part(trigger-icon){display:inline-flex;align-items:center;justify-content:center;flex:none}[data-dropdown-trigger]:focus-visible,dropdown-menu::part(trigger):focus-visible,dropdown-item:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}dropdown-menu::part(panel){position:absolute;top:calc(100% + var(--space-4));left:0;z-index:var(--layer-popover);min-width:12rem;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-popover)}dropdown-item{display:block;margin:0;padding:.375rem .5rem;border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}dropdown-item:hover{background:var(--color-interactive-hover)}dropdown-item[selected]{background:var(--color-interactive)}panel-view{display:block}panel-view::part(panel){display:flex;flex-direction:column;gap:var(--space-16);color:var(--color-text)}panel-view::part(header){display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}panel-view::part(title-group){display:flex;align-items:center;gap:var(--space-8);min-width:0}panel-view::part(title){margin:0;font:inherit;font-size:var(--text-lg);font-weight:600;color:var(--color-text)}panel-view::part(button){display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;margin:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);box-shadow:none;cursor:pointer}panel-view::part(button):hover{background:var(--color-interactive-hover)}panel-view::part(button):focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}panel-view::part(icon){display:inline-flex;align-items:center;justify-content:center;flex:none}panel-view::part(back-icon){transform:rotate(90deg)}modal-overlay{color:inherit}modal-overlay::part(backdrop){position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--layer-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-16);background:var(--color-overlay-backdrop)}*,*:before,*:after{box-sizing:border-box}:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-brand: var(--font-sans);--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;--text-base: 14px;--text-scale: 1.125;--text-sm: round(calc(var(--text-base) / var(--text-scale)), 1px);--text-lg: round(calc(var(--text-base) * var(--text-scale)), 1px);--text-xl: round(calc(var(--text-lg) * var(--text-scale)), 1px);--leading-base: 1.5;--space-2: 2px;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-48: 48px;--space-64: 64px;--radius-sm: .375rem;--radius-md: .5rem;--layer-popover: 10;--layer-modal: 1000;--shadow-popover: 0 12px 32px rgb(0 0 0 / .14);--shadow-modal: 0 24px 64px rgb(0 0 0 / .2)}html,body{margin:0;padding:0;width:100%;height:100%}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--color-text);background:var(--color-bg)}a{text-underline-offset:.15em;text-decoration-thickness:.08em}button,input,textarea,select{font:inherit;color:inherit}a{color:var(--color-link)}h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,pre,hr{margin:0}h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--color-text)}code{font-family:var(--font-mono);font-size:.9em;background:var(--color-bg-muted);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm)}pre{font-family:var(--font-mono);background:var(--color-bg-muted);padding:var(--space-12);border-radius:var(--radius-md);overflow-x:auto}pre code{background:none;padding:0}blockquote{padding-left:var(--space-16);border-left:3px solid var(--color-border);color:var(--color-text-muted)}hr{border:none;border-top:1px solid var(--color-border)}table{border-collapse:collapse}th,td{padding:var(--space-8) var(--space-12);border:1px solid var(--color-border);text-align:left}th{background:var(--color-bg-muted);font-weight:600}.prose{line-height:var(--leading-base)}.prose h1{font-size:var(--text-xl);margin-bottom:var(--space-8)}.prose h2{font-size:var(--text-lg);margin-top:var(--space-24);margin-bottom:var(--space-8)}.prose h3,.prose h4,.prose h5,.prose h6{font-size:var(--text-base);margin-top:var(--space-24);margin-bottom:var(--space-8)}.prose p{margin:var(--space-12) 0}.prose ul,.prose ol{padding-left:var(--space-24);margin:var(--space-12) 0}.prose blockquote,.prose pre{margin:var(--space-12) 0}.prose hr{margin:var(--space-24) 0}.prose table{width:100%;margin:var(--space-12) 0}.prose img{max-width:100%;height:auto}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}[data-ui-icon]{display:inline-block;vertical-align:middle}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:inherit;cursor:pointer}button:hover{background:var(--color-interactive)}button[variant=toolbar]{border:none;background:transparent;color:var(--color-text-muted)}button[size=sm]{min-height:26px;padding:var(--space-2) var(--space-6)}button[size=md]{min-height:32px;padding:var(--space-6) var(--space-12)}:root{--black: #000000;--white: #ffffff;--neutral-50: oklch(.985 .001 106.423);--neutral-100: oklch(.97 .001 106.424);--neutral-200: oklch(.923 .003 48.717);--neutral-300: oklch(.869 .005 56.366);--neutral-400: oklch(.709 .01 56.259);--neutral-500: oklch(.553 .013 58.071);--neutral-600: oklch(.444 .011 73.639);--neutral-700: oklch(.374 .01 67.558);--neutral-800: oklch(.268 .007 34.298);--neutral-900: oklch(.216 .006 56.043);--neutral-950: oklch(.147 .004 49.25)}:root{--color-bg: var(--neutral-50);--color-bg-muted: var(--neutral-100);--color-surface: var(--white);--color-surface-muted: var(--neutral-100);--color-interactive: var(--neutral-200);--color-interactive-hover: var(--neutral-300);--color-border: var(--neutral-300);--color-border-muted: var(--neutral-200);--color-text: var(--neutral-900);--color-text-muted: var(--neutral-500);--color-link: inherit;--color-focus-ring: var(--neutral-500);--color-overlay-backdrop: rgb(0 0 0 / .5);color-scheme:light}html[artifact-type=markdown] body{box-sizing:border-box;max-width:650px;margin-inline:auto;padding:var(--space-24) var(--space-32)}
+dropdown-menu{position:relative;display:inline-block;color:inherit}dropdown-group{display:grid;gap:var(--space-4)}dropdown-label{display:block;padding:var(--space-4) var(--space-8);color:var(--color-text-muted);font:inherit;font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;text-transform:uppercase}dropdown-divider{display:block;height:1px;margin:var(--space-4) 0;background:var(--color-border)}[data-dropdown-trigger],dropdown-item{color:inherit;font:inherit;line-height:1.2}[data-dropdown-trigger],dropdown-menu::part(trigger){display:inline-flex;align-items:center;gap:var(--space-8);margin:0;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);box-shadow:none;cursor:pointer}[data-dropdown-trigger]:hover,dropdown-menu::part(trigger):hover{background:var(--color-interactive-hover)}dropdown-menu[open] [data-dropdown-trigger],dropdown-menu[open]::part(trigger){background:var(--color-interactive)}[data-dropdown-trigger-label],dropdown-menu::part(trigger-label){min-width:0}[data-dropdown-trigger-icon],dropdown-menu::part(trigger-icon){display:inline-flex;align-items:center;justify-content:center;flex:none}[data-dropdown-trigger]:focus-visible,dropdown-menu::part(trigger):focus-visible,dropdown-item:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}dropdown-menu::part(panel){position:absolute;top:calc(100% + var(--space-4));left:0;z-index:var(--layer-popover);min-width:12rem;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-popover)}dropdown-item{display:block;margin:0;padding:.375rem .5rem;border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}dropdown-item:hover{background:var(--color-interactive-hover)}dropdown-item[selected]{background:var(--color-interactive)}panel-view{display:block}panel-view::part(panel){display:flex;flex-direction:column;gap:var(--space-16);color:var(--color-text)}panel-view::part(header){display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}panel-view::part(title-group){display:flex;align-items:center;gap:var(--space-8);min-width:0}panel-view::part(title){margin:0;font:inherit;font-size:var(--text-lg);font-weight:600;color:var(--color-text)}panel-view::part(button){display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;margin:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);box-shadow:none;cursor:pointer}panel-view::part(button):hover{background:var(--color-interactive-hover)}panel-view::part(button):focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}panel-view::part(icon){display:inline-flex;align-items:center;justify-content:center;flex:none}panel-view::part(back-icon){transform:rotate(90deg)}modal-overlay{color:inherit}modal-overlay::part(backdrop){position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--layer-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-16);background:var(--color-overlay-backdrop)}*,*:before,*:after{box-sizing:border-box}:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-brand: var(--font-sans);--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;--text-base: 14px;--text-scale: 1.125;--text-sm: round(calc(var(--text-base) / var(--text-scale)), 1px);--text-lg: round(calc(var(--text-base) * var(--text-scale)), 1px);--text-xl: round(calc(var(--text-lg) * var(--text-scale)), 1px);--leading-base: 1.5;--space-2: 2px;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-48: 48px;--space-64: 64px;--radius-sm: .375rem;--radius-md: .5rem;--layer-popover: 10;--layer-modal: 1000;--shadow-popover: 0 12px 32px rgb(0 0 0 / .14);--shadow-modal: 0 24px 64px rgb(0 0 0 / .2)}html,body{margin:0;padding:0;width:100%;height:100%}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--color-text);background:var(--color-bg)}a{text-underline-offset:.15em;text-decoration-thickness:.08em}button,input,textarea,select{font:inherit;color:inherit}a{color:var(--color-link)}h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,pre,hr{margin:0}h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--color-text)}code{font-family:var(--font-mono);font-size:.9em;background:var(--color-bg-muted);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm)}pre{font-family:var(--font-mono);background:var(--color-bg-muted);padding:var(--space-12);border-radius:var(--radius-md);overflow-x:auto}pre code{background:none;padding:0}blockquote{padding-left:var(--space-16);border-left:3px solid var(--color-border);color:var(--color-text-muted)}hr{border:none;border-top:1px solid var(--color-border)}table{border-collapse:collapse}th,td{padding:var(--space-8) var(--space-12);border:1px solid var(--color-border);text-align:left}th{background:var(--color-bg-muted);font-weight:600}.prose{line-height:var(--leading-base)}.prose h1{font-size:var(--text-xl);margin-bottom:var(--space-8)}.prose h2{font-size:var(--text-lg);margin-top:var(--space-24);margin-bottom:var(--space-8)}.prose h3,.prose h4,.prose h5,.prose h6{font-size:var(--text-base);margin-top:var(--space-24);margin-bottom:var(--space-8)}.prose p{margin:var(--space-12) 0}.prose ul,.prose ol{padding-left:var(--space-24);margin:var(--space-12) 0}.prose blockquote,.prose pre{margin:var(--space-12) 0}.prose hr{margin:var(--space-24) 0}.prose table{width:100%;margin:var(--space-12) 0}.prose img{max-width:100%;height:auto}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}[data-ui-icon]{display:inline-block;vertical-align:middle}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:inherit;cursor:pointer}button:hover{background:var(--color-interactive)}button[variant=toolbar]{border:none;background:transparent;color:var(--color-text-muted)}button[size=sm]{min-height:26px;padding:var(--space-2) var(--space-6)}button[size=md]{min-height:32px;padding:var(--space-6) var(--space-12)}:root{--black: #000000;--white: #ffffff;--neutral-50: oklch(.985 .001 106.423);--neutral-100: oklch(.97 .001 106.424);--neutral-200: oklch(.923 .003 48.717);--neutral-300: oklch(.869 .005 56.366);--neutral-400: oklch(.709 .01 56.259);--neutral-500: oklch(.553 .013 58.071);--neutral-600: oklch(.444 .011 73.639);--neutral-700: oklch(.374 .01 67.558);--neutral-800: oklch(.268 .007 34.298);--neutral-900: oklch(.216 .006 56.043);--neutral-950: oklch(.147 .004 49.25)}:root{--color-bg: var(--neutral-50);--color-bg-muted: var(--neutral-100);--color-surface: var(--white);--color-surface-muted: var(--neutral-100);--color-interactive: var(--neutral-200);--color-interactive-hover: var(--neutral-300);--color-border: var(--neutral-300);--color-border-muted: var(--neutral-200);--color-text: var(--neutral-900);--color-text-muted: var(--neutral-500);--color-link: inherit;--color-focus-ring: var(--neutral-500);--color-overlay-backdrop: rgb(0 0 0 / .5);color-scheme:light}html,body{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}html.show-scrollbars,body.show-scrollbars{scrollbar-width:auto;-ms-overflow-style:auto}html.show-scrollbars::-webkit-scrollbar,body.show-scrollbars::-webkit-scrollbar{display:block}html[artifact-type=markdown] body{box-sizing:border-box;max-width:650px;margin-inline:auto;padding:var(--space-24) var(--space-32)}