dsh-motion-ui 0.8.1 → 0.8.3

package/lib/build-info.js

@@ -1,2 +1,2 @@
 // Generated by npm run build.
-export const BUILD_INFO = Object.freeze({"version":"0.8.1","id":"0.8.1+7d966f2ef4ce","sourceHash":"7d966f2ef4cea9bdaa32c1ea1ff74f2b51eb223f21e34b949c1e77f1459fd811"});
+export const BUILD_INFO = Object.freeze({"version":"0.8.3","id":"0.8.3+da9b5c9a709d","sourceHash":"da9b5c9a709de333a5c0348d1e9544ced197459e293f22dcfdc302b8dbb5f3d0"});

package/lib/canvas-controls.js

@@ -0,0 +1,53 @@
+// Serialized into the opaque frame. Only repairs unreadable timeline chrome;
+// the authored stage and ordinary interactive documents retain their styling.
+export function createTimelineControlRepair() {
+  const originals = new WeakMap();
+  const rgb = text => {
+    const match = text.match(/^rgba?\(([^)]+)\)$/);
+    if (!match) return null;
+    const values = match[1].split(/[,\s/]+/).filter(Boolean).map(Number);
+    return values.length >= 3 ? [...values.slice(0, 3), values[3] ?? 1] : null;
+  };
+  const over = (a, b) => a.slice(0, 3).map((v, i) => v * a[3] + b[i] * (1 - a[3]));
+  const luminance = c => c.slice(0, 3).map(v => v / 255).map(v => v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4).reduce((n, v, i) => n + v * [.2126, .7152, .0722][i], 0);
+  const contrast = (a, b) => { const x = luminance(a), y = luminance(b); return (Math.max(x, y) + .05) / (Math.min(x, y) + .05); };
+  return () => {
+    const stage = document.getElementById('stage'), root = document.getElementById('canvas');
+    if (!stage || !root) return;
+    for (const el of root.querySelectorAll('button,output,select,input:not([type=range]):not([type=checkbox]):not([type=radio])')) {
+      if (stage.contains(el)) continue;
+      let saved = originals.get(el);
+      if (saved) for (const [key, value, priority] of saved) value ? el.style.setProperty(key, value, priority) : el.style.removeProperty(key);
+      const style = getComputedStyle(el);
+      if (style.display === 'none' || style.visibility === 'hidden') continue;
+      const layers = []; let uncertain = false;
+      for (let parent = el; parent; parent = parent.parentElement) {
+        const backgroundStyle = getComputedStyle(parent);
+        // A gradient/image cannot be reduced to one reliable backdrop color.
+        if (backgroundStyle.backgroundImage !== 'none') { uncertain = true; break; }
+        const color = rgb(backgroundStyle.backgroundColor);
+        if (color) layers.push(color);
+        if (color?.[3] === 1) break;
+      }
+      if (uncertain) continue;
+      const background = layers.reverse().reduce((color, layer) => over(layer, color), [255, 255, 255]);
+      const foreground = rgb(style.color);
+      if (!foreground || contrast(over(foreground, background), background) >= 4.5) continue;
+      if (!saved) {
+        saved = ['color', 'border-color'].map(key => [key, el.style.getPropertyValue(key), el.style.getPropertyPriority(key)]);
+        originals.set(el, saved);
+      }
+      const light = [248, 250, 252], dark = [17, 24, 39];
+      el.style.setProperty('color', contrast(light, background) > contrast(dark, background) ? '#f8fafc' : '#111827', 'important');
+      const border = rgb(style.borderTopColor);
+      if (parseFloat(style.borderTopWidth) > 0 && border && contrast(over(border, background), background) < 1.5) el.style.setProperty('border-color', '#64748b', 'important');
+    }
+  };
+}
+
+export function canvasContentHeight(root) {
+  const body = getComputedStyle(document.body);
+  // getBoundingClientRect().height alone excludes author-defined body padding.
+  // Do not use scrollHeight: it is floored by the old iframe viewport and cannot shrink.
+  return Math.ceil(root.getBoundingClientRect().bottom + window.scrollY + (parseFloat(body.paddingBottom) || 0) + (parseFloat(body.marginBottom) || 0));
+}

package/lib/canvas-layout.js

@@ -0,0 +1,64 @@
+// Geometry only: no source rewriting, shadow removal, or clipping as a repair.
+// Serialized into the isolated frame together with fitTextCards.
+export function inspectTextCards(root, cards) {
+  const result = [];
+  const cache = new WeakMap(), styleOf = el => { if (!cache.has(el)) cache.set(el, getComputedStyle(el)); return cache.get(el); };
+  for (const card of cards ?? [...root.querySelectorAll('article,section,aside,figure,div')].slice(0, 256).reverse()) {
+    if (card.closest('#stage,svg,pre,code,[role=img],[data-motion-layout=preserve]')) continue;
+    const css = styleOf(card), box = card.getBoundingClientRect();
+    const radius = Math.max(parseFloat(css.borderBottomLeftRadius) || 0, parseFloat(css.borderBottomRightRadius) || 0);
+    if (box.width < 120 || box.height < 24 || css.display === 'none' || css.visibility === 'hidden') continue;
+    if (/auto|scroll/.test(css.overflowY)) continue;
+    if (!radius && css.boxShadow === 'none') continue;
+    const padding = parseFloat(css.paddingBottom) || 0, border = parseFloat(css.borderBottomWidth) || 0;
+    const bottom = box.bottom - padding - border;
+    let excess = 0, corner = false, target, flow = !['absolute', 'fixed'].includes(css.position) && css.transform === 'none' && !/auto|scroll/.test(css.overflowY) && !/size/.test(css.contain) && !css.borderBottomLeftRadius.includes('%') && !css.borderBottomRightRadius.includes('%') && !(css.transitionDuration.split(',').some(v => parseFloat(v) > 0) && /(^|,|\s)(height|max-height|all)(,|\s|$)/.test(css.transitionProperty));
+    const walker = document.createTreeWalker(card, NodeFilter.SHOW_TEXT); let text, count = 0;
+    while ((text = walker.nextNode()) && ++count <= 128) {
+      if (!text.textContent.trim()) continue;
+      const el = text.parentElement;
+      if (el.closest('svg,pre,code,script,style,textarea,[role=img]')) continue;
+      const style = styleOf(el);
+      if (style.visibility === 'hidden' || style.display === 'none') continue;
+      if (style.webkitLineClamp && style.webkitLineClamp !== 'none') continue;
+      let intentional = false;
+      for (let parent = el; parent && parent !== card; parent = parent.parentElement) {
+        const c = styleOf(parent);
+        if (/auto|scroll/.test(c.overflowY) || (c.webkitLineClamp && c.webkitLineClamp !== 'none')) { intentional = true; break; }
+      }
+      if (intentional) continue;
+      const range = document.createRange(); range.selectNode(text);
+      for (const rect of range.getClientRects()) {
+        if (!rect.width || !rect.height) continue;
+        const amount = rect.bottom - bottom;
+        // Keep the last line out of a rounded bottom corner, even if overflow is visible.
+        const r = Math.min(radius, box.height / 2, box.width / 2);
+        const progress = r ? Math.max(0, Math.min(1, (rect.bottom - (box.bottom - r)) / r)) : 0;
+        const inset = r * (1 - Math.sqrt(1 - progress * progress));
+        const touchesCorner = progress > 0 && (rect.left < box.left + inset - 1 || rect.right > box.right - inset + 1);
+        if (amount <= 1 && !touchesCorner) continue;
+        target = el; excess = Math.max(excess, amount); corner ||= touchesCorner;
+        for (let parent = el; parent && parent !== card; parent = parent.parentElement) {
+          const c = styleOf(parent);
+          if (['absolute', 'fixed'].includes(c.position) || c.transform !== 'none' || /auto|scroll/.test(c.overflowY) || (c.webkitLineClamp && c.webkitLineClamp !== 'none')) flow = false;
+        }
+      }
+    }
+    if (target) result.push({card, target, excess, corner, radius, flow});
+  }
+  return result;
+}
+
+export function fitTextCards(root, inspect) {
+  // Re-measure inner cards first so an outer container sees their final dimensions.
+  for (const {card} of inspect(root)) {
+    const issue = inspect(root, [card])[0];
+    if (!issue?.flow) continue;
+    const css = getComputedStyle(card), box = card.getBoundingClientRect();
+    if (issue.corner) card.style.setProperty('padding-bottom', Math.max(parseFloat(css.paddingBottom) || 0, Math.min(issue.radius, box.height / 2)) + 'px', 'important');
+    const inset = css.boxSizing === 'border-box' ? 0 : ['paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'].reduce((n, key) => n + (parseFloat(css[key]) || 0), 0);
+    card.style.setProperty('min-height', Math.max(parseFloat(css.minHeight) || 0, box.height - inset) + 'px', 'important');
+    card.style.setProperty('height', 'auto', 'important');
+    card.style.setProperty('max-height', 'none', 'important');
+  }
+}

package/lib/canvas-preview.js

@@ -1,4 +1,6 @@
 import { CANVAS_SYSTEM_CSS } from './canvas-system.js';
+import {canvasContentHeight} from './canvas-controls.js';
+import {inspectTextCards, fitTextCards} from './canvas-layout.js';
 // Executed only as trusted bootstrap code inside an opaque-origin preview frame.
 export function updatePreview(html) {
   const template=document.createElement('template');template.innerHTML=html;
@@ -27,5 +29,5 @@ export function updatePreview(html) {
   morph(document.getElementById('canvas'),template.content);
 }
 export function previewFrameDocument(channel,nonce){
-  return `<!doctype html><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none';script-src 'nonce-${nonce}';style-src 'unsafe-inline';img-src data:;base-uri 'none';form-action 'none';frame-src 'none'"><style>${CANVAS_SYSTEM_CSS}</style><style id="custom"></style><style>#canvas,#canvas *,#canvas *::before,#canvas *::after{animation:none!important;transition:none!important}html,body{overflow:hidden}</style><main id="canvas" inert></main><script nonce="${nonce}">const update=${updatePreview.toString()};addEventListener('message',e=>{if(e.source!==parent||e.data?.channel!==${JSON.stringify(channel)})return;document.getElementById('custom').textContent=e.data.css;for(const [k,v] of Object.entries(e.data.theme||{}))document.documentElement.style.setProperty('--canvas-'+k,v);document.documentElement.dataset.canvasScheme=e.data.theme?.scheme||'light';update(e.data.html)});new ResizeObserver(()=>parent.postMessage({channel:${JSON.stringify(channel)},previewHeight:Math.ceil(document.getElementById('canvas').getBoundingClientRect().height)},'*')).observe(document.getElementById('canvas'));</script>`;
+  return `<!doctype html><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none';script-src 'nonce-${nonce}';style-src 'unsafe-inline';img-src data:;base-uri 'none';form-action 'none';frame-src 'none'"><style>${CANVAS_SYSTEM_CSS}</style><style id="custom"></style><style>#canvas,#canvas *,#canvas *::before,#canvas *::after{animation:none!important;transition:none!important}html,body{overflow:hidden}</style><main id="canvas" inert></main><script nonce="${nonce}">const inspectCards=${inspectTextCards.toString()},fitCards=${fitTextCards.toString()};const contentHeight=${canvasContentHeight.toString()};const update=${updatePreview.toString()};addEventListener('message',e=>{if(e.source!==parent||e.data?.channel!==${JSON.stringify(channel)})return;document.getElementById('custom').textContent=e.data.css;for(const [k,v] of Object.entries(e.data.theme||{}))document.documentElement.style.setProperty('--canvas-'+k,v);document.documentElement.dataset.canvasScheme=e.data.theme?.scheme||'light';update(e.data.html);fitCards(document.getElementById('canvas'),inspectCards)});new ResizeObserver(()=>parent.postMessage({channel:${JSON.stringify(channel)},previewHeight:contentHeight(document.getElementById('canvas'))},'*')).observe(document.getElementById('canvas'));</script>`;
 }

package/lib/canvas-system.js

@@ -12,6 +12,7 @@ svg .ui-node{fill:var(--canvas-soft,#f3f5f8);stroke:var(--canvas-line,#ced4df);s
 
 export const CANVAS_SYSTEM_GUIDE = `The canvas includes optional .ui-stack, .ui-grid, .ui-surface, .ui-title, .ui-caption, .ui-value, .ui-controls, .ui-field, .ui-legend, .ui-status, .ui-error and .ui-primary classes. SVG helpers: .ui-node (shape), .ui-edge (unfilled connector), .ui-label (main text), .ui-note (annotation), .ui-leader (dashed annotation line), .ui-accent (theme-aware accent shape). Use them as building blocks, or override with your own composition; they do not prescribe cards or a fixed layout. Theme variables --canvas-bg/soft/ink/muted/line/accent follow DSH. Define --canvas-accent-ink yourself if overriding the accent with a pale color.
 For a small static diagram, .ui-flow arranges .ui-step nodes separated by .ui-arrow; each step uses strong + span. .ui-callout emphasizes one sentence. These work with no custom CSS or JavaScript and adapt to narrow screens.
+Text-card layout: let HTML card height grow with wrapped content, use real padding and a flow-root/flex/grid container so paragraph margins stay inside. Keep the last line above rounded bottom corners. Shadows are decorative paint, not content bounds: preserve them when fixing overflow. For SVG cards derive the background rect height and viewBox from actual wrapped text lines plus padding; do not fix the issue by removing shadows, hiding overflow or shrinking text.
 SVG construction: reserve label space first; center box labels with text-anchor=middle and dominant-baseline=central. Measure Chinese characters at roughly one font-size each, Latin letters about .6 font-size; mixed text needs combined width plus 24px padding on each side. These are estimates, not browser measurements. Give same-role nodes aligned dimensions. Route connectors around text and unrelated boxes, with explicit fill=none and visible arrowheads. Compute viewBox bounds from the furthest shape, label and arrow plus padding. A 680-unit diagram shown at 340px halves its fonts: reflow or move captions into HTML instead of shrinking important labels. Keep PC chat-column labels readable at actual rendered size. Use overview + focus detail for dense systems. Do not force this grammar on spatial/mechanical drawings.
 For calculators validate blanks, finite values, ranges and zero denominators; show an actionable error, never a stale result as valid. Use one state source for filtering/sorting/reset and one animation loop with cleanup. A reset restores inputs and outputs together. For explanation show relationships and one useful variable; for comparison expose criteria/units/assumptions; for a tool provide working inputs, calculation, outputs and reset.
 Keep CSS small and put a useful initial view in html. Source field order is arbitrary. Completed static content previews progressively as read-only during generation; scripts/controls activate only after the whole assistant turn ends and state restoration. Do not claim a saved document has been visually checked without evidence.