dsh-motion-ui 0.8.2 → 0.8.4

package/lib/motion-craft.js

@@ -1,7 +1,7 @@
 import {validateDocument} from './protocol.js';
 
 export const MOTION_CRAFT_GUIDE = `Motion craft: give movement a purpose (feedback, spatial continuity, causality or an occasional expressive moment). Choose one focal action; let connected objects react, then hold long enough to read. Keep identity/direction continuous across stages. Visual style controls composition/material/type; motion grammar controls how change is explained, across every style. Precise mechanisms need readable relationships, not arbitrary bounce. Quiet reading moments may be still. Use short interruptible transitions for frequent controls; never delay keyboard/click feedback. Avoid restarting entrances on state updates. Retrieve a targeted motion recipe for timelines, stages, path drawing or text; do not load the whole library.`;
-export const TIMELINE_CONTRACT = `Optional DSHUI.timeline({id?:"main",duration:seconds,draw(time,info),loop?:false,autoplay?:true,chapters?:[{time,label}]}) returns state(),seek(seconds),play(),pause(),replay(),chapter(index),subscribe(fn)->cleanup,dispose(). draw(time,info) receives seconds, not a Canvas context. For Canvas2D use const ctx=canvas.getContext("2d"); draw(t){drawFrame(ctx,t)}. draw uses ABSOLUTE time and current parameters: no accumulating phase, Date.now, random-per-frame, independent CSS animation or asynchronous draw for exportable films. Seed/cache procedural detail. Timelines pause offscreen/background and honor reduced motion; seeking remains available. Build labelled controls when requested, outside the exported stage if appropriate. Read an input value before pause/seek, since subscribers may synchronize its value. Transient time is not persisted each frame. ui_catalog topic=motion scene=timeline/stages/path/typography returns one example. Video export captures a single saved sandbox with timeline id main; author its duration to match export duration.`;
+export const TIMELINE_CONTRACT = `Optional DSHUI.timeline({id?:"main",duration:seconds,draw(time,info),loop?:false,autoplay?:true,chapters?:[{time,label}]}) returns state(),seek(seconds),play(),pause(),replay(),chapter(index),subscribe(fn)->cleanup,dispose(). draw(time,info) receives seconds, not a Canvas context. For Canvas2D use const ctx=canvas.getContext("2d"); draw(t){drawFrame(ctx,t)}. draw uses ABSOLUTE time and current parameters: no accumulating phase, Date.now, random-per-frame, independent CSS animation or asynchronous draw for exportable films. Seed/cache procedural detail. Timelines pause offscreen/background and honor reduced motion; seeking remains available. Build labelled controls when requested, outside the exported stage if appropriate. Keep playback chrome on paired surface/text colors; scope cinematic dark backgrounds and artwork colors to #stage rather than mixing host text tokens with fixed opposite-theme controls. Read an input value before pause/seek, since subscribers may synchronize its value. Transient time is not persisted each frame. ui_catalog topic=motion scene=timeline/stages/path/typography returns one example. Video export captures a single saved sandbox with timeline id main; author its duration to match export duration.`;
 export const VIDEO_GUIDE = `Video tools: preview_video captures exact source frames/contact sheet before encoding; read them and patch first. inspect_video reads an actual local video and optionally extracts timestamped JPEG samples/contact sheet; frames are sparse observations, not full semantic analysis or ASR. Read returned images with the host image tool. render_video exports one saved canvas documentId/nodeId to editable source + MP4; call render_canvas first, author DSHUI.timeline id main with #stage, then render_video only for an actual video request. process_video trims/joins local clips. synthesize_voice produces real narration, duration and provider-measured captions/words using configured MiniMax authentication (paid); it does not transcribe input video. Fit the timeline AFTER measuring voice duration. render_video/process_video audioTracks:[{path,role:voice|music|effect,volume,offset,loop,fadeIn,fadeOut}] mixes up to four tracks and replaces original audio. Voice cannot repeat or be cut; music can loop/fade at low volume. Alternatively legacy audioPath/audioVolume replaces soundtrack. captions:[{start,end,text}] uses exact output seconds; do not stretch captions across silent gaps. Sources/audio/recipe stay editable. No API key is needed for HTML motion, local Chrome/Edge + FFmpeg/FFprobe required. No invented assets or guessed timestamps. For a promotional-film brief query ui_catalog topic=video scene=promo for the production workflow. Failed export retains assets; never label queued/HTML-only output as a finished film.`;
 
 export const PROMO_GUIDE = `One-brief film workflow (on demand, not everyday UI):

package/lib/refinement.js

@@ -1,7 +1,7 @@
 import { componentFields } from './components.js';
 import { validateDocument } from './protocol.js';
 import {toolJson} from './tool-json.js';
-export const AUDIT_MESSAGES = Object.freeze({ overflow: '内容超出视口宽度', smallText: '文字实际显示尺寸小于 12px', contrast: '文字与背景对比度偏低', missingLabel: '交互控件缺少可访问名称',runtimeError:'画布报告运行异常',clippedText:'文字可能被隐藏或裁切',bottomWhitespace:'内容下方存在明显空白' });
+export const AUDIT_MESSAGES = Object.freeze({ overflow: '内容超出视口宽度', smallText: '文字实际显示尺寸小于 12px', contrast: '文字与背景对比度偏低', missingLabel: '交互控件缺少可访问名称',runtimeError:'画布报告运行异常',clippedText:'文字可能被隐藏或裁切',cardTextOverflow:'文字超出卡片内容边界；请保留阴影并调整容器尺寸、内边距或文字排版',bottomWhitespace:'内容下方存在明显空白' });
 export function normalizeNodeEdits(changes) {
   changes=toolJson(changes,'changes');
   // Some providers serialize a JSON array as {item:{id,props}}. Only unwrap

package/lib/sandbox.js

@@ -4,6 +4,8 @@ import { measureVisual } from './visual-audit.js';
 import { formatNumber } from './format-number.js';
 import { CANVAS_SYSTEM_CSS } from './canvas-system.js';
 import {createTimelineAPI} from './timeline.js';
+import {createTimelineControlRepair, canvasContentHeight} from './canvas-controls.js';
+import {inspectTextCards, fitTextCards} from './canvas-layout.js';
 // Shared bounds and document construction. Generated code runs only in an opaque-origin frame.
 export const SANDBOX_LIMITS = Object.freeze({ source: 49152, height: 1000, message: 16384, rate: 30 });
 export function canvasSnapshot(node, state, data, derived, disabled, theme) {
@@ -25,7 +27,12 @@ export function sandboxDocument(node, channel, nonce) {
   let snapshot={state:{},data:{},derived:{},disabled:true,theme:{}}, started=false;
   const listeners=new Set(), send=(type,payload)=>parent.postMessage({dshCanvas:1,channel,type,payload},'*');
   const report=e=>send('error',String(e?.message??e).slice(0,1000));
-  const audit=${measureVisual.toString()};let auditTimer;const scheduleAudit=()=>{clearTimeout(auditTimer);auditTimer=setTimeout(()=>{const issues=audit(document.getElementById('canvas'),${json(node.id??'')});send('audit',{issues,coverage:issues.coverage})},400)};
+  const repairTimelineControls=(${createTimelineControlRepair.toString()})();
+  const inspectCards=${inspectTextCards.toString()}, fitCards=${fitTextCards.toString()};
+  const contentHeight=${canvasContentHeight.toString()};
+  const repairControls=()=>{if(!window.__DSHMotionRender&&timelineAPI.capture.list().length)repairTimelineControls()};
+  for(const type of ['click','input','change'])document.addEventListener(type,()=>queueMicrotask(repairControls));
+  const audit=${measureVisual.toString()};let auditTimer;const scheduleAudit=()=>{clearTimeout(auditTimer);auditTimer=setTimeout(()=>{repairControls();fitCards(document.getElementById('canvas'),inspectCards);const issues=audit(document.getElementById('canvas'),${json(node.id??'')},inspectCards);send('audit',{issues,coverage:issues.coverage})},400)};
   addEventListener('resize',scheduleAudit);
   addEventListener('error',e=>report(e.error??e.message));addEventListener('unhandledrejection',e=>report(e.reason));
   const animations=new Set(), motion=matchMedia('(prefers-reduced-motion: reduce)');
@@ -50,9 +57,9 @@ export function sandboxDocument(node, channel, nonce) {
     const wasStarted=started;
     if(!started){started=true;document.getElementById('canvas').innerHTML=source.html;const style=document.createElement('style');style.textContent=source.css;document.head.append(style);const script=document.createElement('script');script.nonce=${json(nonce)};script.textContent=source.script;document.body.append(script)}
     if(wasStarted)for(const fn of listeners)try{fn(api.snapshot)}catch(e){report(e)}
-    refresh();if(!wasStarted)send('mounted');scheduleAudit();
+    fitCards(document.getElementById('canvas'),inspectCards);repairControls();refresh();if(!wasStarted)send('mounted');scheduleAudit();
   });
-  let resizePending=false;new ResizeObserver(()=>{if(!started||resizePending)return;resizePending=true;requestAnimationFrame(()=>{resizePending=false;send('height',Math.ceil(document.getElementById('canvas').getBoundingClientRect().height))})}).observe(document.getElementById('canvas'));
+  let resizePending=false;new ResizeObserver(()=>{if(!started||resizePending)return;resizePending=true;requestAnimationFrame(()=>{resizePending=false;send('height',contentHeight(document.getElementById('canvas')))})}).observe(document.getElementById('canvas'));
   send('ready');
 })();</script></body></html>`;
 }

package/lib/visual-audit.js

@@ -1,5 +1,5 @@
 // Serialized into the opaque frame; it never reads host content.
-export function measureVisual(root, nodeId='') {
+export function measureVisual(root, nodeId='', inspectCards=()=>[]) {
   const issues=[],seen=new Set(),coverage={nodeId,elements:0,truncated:false,contrastChecked:0,contrastUncovered:0};
   const styleCache=new WeakMap(),styleOf=el=>{let css=styleCache.get(el);if(!css){css=getComputedStyle(el);styleCache.set(el,css)}return css};
   const target=el=>{if(!el)return undefined;const tag=el.tagName.toLowerCase(),id=el.id;return{selector:id&&id.length<=64?'#'+CSS.escape(id):tag,text:(el.textContent??'').trim().replace(/\s+/g,' ').slice(0,120),tag}};
@@ -18,12 +18,27 @@ export function measureVisual(root, nodeId='') {
         const fg=color(css.color),bg=background(el);let opacitySafe=true,opacityDepth=0;for(let a=el;a;a=a.parentElement){if(++opacityDepth>64||parseFloat(styleOf(a).opacity)<1){opacitySafe=false;break}}
         if(fg&&bg&&opacitySafe){coverage.contrastChecked++;const a=luminance(blend(fg,bg)),b=luminance(bg),ratio=(Math.max(a,b)+.05)/(Math.min(a,b)+.05);if(ratio<(size>=24||(size>=18.66&&parseFloat(css.fontWeight)>=700)?3:4.5))add('contrast',ratio,el);}else coverage.contrastUncovered++;
         const range=document.createRange();range.selectNodeContents(el);const bounds=range.getBoundingClientRect();let a=el,depth=0;while(a&&a!==root.parentElement&&depth++<24){const c=styleOf(a),clip=a.getBoundingClientRect();if((['hidden','clip'].includes(c.overflowX)&&(bounds.left<clip.left-2||bounds.right>clip.right+2))||(['hidden','clip'].includes(c.overflowY)&&(bounds.top<clip.top-2||bounds.bottom>clip.bottom+2))){add('clippedText',undefined,el);break}a=a.parentElement}
-      }else coverage.contrastUncovered++;
+      }else {
+        coverage.contrastUncovered++;
+        if (!el.closest('#stage')) {
+          let parent=el.parentElement,backgrounds=[];
+          for(let depth=0;parent instanceof SVGElement&&depth<4;parent=parent.parentElement,depth++){backgrounds=parent.querySelectorAll(':scope > rect');if(backgrounds.length)break}
+          for(const background of backgrounds){
+            const c=styleOf(background),rect=background.getBoundingClientRect();
+            if(c.fill==='none'||parseFloat(c.fillOpacity)===0||!parseFloat(background.getAttribute('rx'))||rect.width<box.width*.5||rect.height<box.height*2)continue;
+            const matrix=background.getScreenCTM(),radius=Math.min(parseFloat(background.getAttribute('rx'))*(matrix?Math.hypot(matrix.a,matrix.b):1),rect.height/2,rect.width/2);
+            const progress=radius?Math.max(0,Math.min(1,(box.bottom-(rect.bottom-radius))/radius)):0,inset=radius*(1-Math.sqrt(1-progress*progress));
+            const corner=progress>0&&(box.left<rect.left+inset-1||box.right>rect.right-inset+1);
+            if(box.left>=rect.left-1&&box.left<rect.right&&box.top>=rect.top&&box.top<=rect.bottom&&(box.bottom>rect.bottom+1||corner)){add('cardTextOverflow',Math.max(0,box.bottom-rect.bottom),el);break}
+          }
+        }
+      }
 
     }
     if(text||el.matches('svg,canvas,img,video,input,select,textarea,button'))contentBottom=Math.max(contentBottom,box.bottom);
     if(el.matches('input:not([type=hidden]),select,textarea,button,[role=button]')&&!el.getAttribute('aria-label')&&!el.getAttribute('aria-labelledby')&&!el.labels?.length&&!el.textContent.trim()&&!el.getAttribute('title'))add('missingLabel',undefined,el);
   }
+  for(const issue of inspectCards(root))add('cardTextOverflow',Math.max(0,issue.excess),issue.target);
   const rect=root.getBoundingClientRect(),gap=rect.bottom-contentBottom;if(!coverage.truncated&&root.id==='canvas'&&rect.height>320&&gap>Math.max(96,rect.height*.25))add('bottomWhitespace',gap,root);
   Object.defineProperty(issues,'coverage',{value:coverage});return issues;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-motion-ui",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Readable conversational UI, interactive HTML/SVG, editable motion and local MP4 production for DeepSeek Harness.",
   "type": "module",
   "main": "index.js",