@bytesbybrandon/living-docs 0.2.0 → 0.3.0

package/src/render/svg.js

@@ -38,23 +38,19 @@ function anchor(node, px, py) {
   return { x: cx + dx * s, y: cy + dy * s };
 }
 
-function iconMarkup(node, palette) {
-  const cx = node.x + node.w / 2;
-  const cy = node.y + node.h / 2;
+// Icons sit in a 13-unit band at the top of the node's text block, so they never touch the label.
+function iconMarkup(node, palette, top) {
+  const at = `transform="translate(${round(node.x + node.w / 2)} ${round(top)})"`;
   const stroke = palette.accent;
   switch (node.icon) {
     case 'file':
-      return `<g class="d-icon" fill="none" stroke="${stroke}" stroke-width="1.2">
-        <path d="M ${cx - 7} ${cy - 18} h 10 l 4 4 v 13 h -14 z"/><path d="M ${cx + 3} ${cy - 18} v 4 h 4"/>
-      </g>`;
+      return `<g class="d-icon" ${at} fill="none" stroke="${stroke}" stroke-width="1.2"><path d="M -6 0 h 8 l 4 4 v 9 h -12 z"/><path d="M 2 0 v 4 h 4"/></g>`;
     case 'clock':
-      return `<g class="d-icon" fill="none" stroke="${stroke}" stroke-width="1.2">
-        <circle cx="${cx}" cy="${cy - 10}" r="7"/><path d="M ${cx} ${cy - 14} v 4 l 3 2"/>
-      </g>`;
+      return `<g class="d-icon" ${at} fill="none" stroke="${stroke}" stroke-width="1.2"><circle cx="0" cy="6.5" r="6.3"/><path d="M 0 3 v 3.5 l 2.6 1.8"/></g>`;
     case 'star':
-      return `<path class="d-icon" d="M ${cx} ${cy - 20} l 2.4 5.6 6 .7 -4.4 4.2 1.2 5.9 -5.2 -2.9 -5.2 2.9 1.2 -5.9 -4.4 -4.2 6 -.7 z" fill="${stroke}" stroke="none"/>`;
+      return `<path class="d-icon" ${at} d="M 0 0 l 2 4.6 5 .6 -3.7 3.4 1 4.9 -4.3 -2.4 -4.3 2.4 1 -4.9 -3.7 -3.4 5 -.6 z" fill="${stroke}" stroke="none"/>`;
     case 'badge':
-      return `<g class="d-icon"><rect x="${cx - 9}" y="${cy - 16}" width="18" height="11" rx="1.5" fill="none" stroke="${stroke}" stroke-width="1.1"/><path d="M ${cx - 5} ${cy - 10.5} h 10" stroke="${stroke}" stroke-width="1.1"/></g>`;
+      return `<g class="d-icon" ${at} fill="none" stroke="${stroke}" stroke-width="1.1"><rect x="-9" y="1" width="18" height="11" rx="1.5"/><path d="M -5 6.5 h 10"/></g>`;
     default:
       return '';
   }
@@ -113,7 +109,7 @@ export function diagramSvg(spec, palette, { figure = 'outline', motion = 'none'
     if (edge.route === 'elbow' || (edge.style === 'dashed' && Math.abs(toCenter.y - fromCenter.y) > 40)) {
       const midX = round((start.x + end.x) / 2);
       d = `M ${round(start.x)} ${round(start.y)} H ${midX} V ${round(end.y)} H ${round(end.x)}`;
-      labelPoint = { x: midX, y: (start.y + end.y) / 2, anchor: 'middle' };
+      labelPoint = { x: midX + 8, y: (start.y + end.y) / 2 + 4, anchor: 'start' }; // beside the vertical run, not across it
     } else {
       d = `M ${round(start.x)} ${round(start.y)} L ${round(end.x)} ${round(end.y)}`;
       labelPoint = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2, anchor: 'middle' };
@@ -150,18 +146,19 @@ export function diagramSvg(spec, palette, { figure = 'outline', motion = 'none'
     const strokeWidth = node.kind === 'accent' ? 1.5 : minimal ? 0.8 : solid ? 1.3 : 1;
     const dash = node.kind === 'dashed' ? ' stroke-dasharray="5 4"' : '';
     const opacity = node.kind === 'dashed' ? ' stroke-opacity="0.75"' : '';
-    const iconSpace = node.icon && node.icon !== 'none' ? 14 : 0;
+    const iconSpace = node.icon && node.icon !== 'none' ? 18 : 0;
     const lines = wrapLabel(node.label, Math.max(8, Math.floor((node.w - 16) / 6.5)), 3);
     const lineHeight = 15;
     const blockHeight = lines.length * lineHeight + (node.sub ? 13 : 0) + iconSpace;
-    let textY = node.y + (node.h - blockHeight) / 2 + lineHeight - 4 + iconSpace;
+    const blockTop = node.y + (node.h - blockHeight) / 2;
+    let textY = blockTop + lineHeight - 4 + iconSpace;
 
-    nodeMarkup.push(`<g class="d-node d-node-${node.kind}" style="--i:${nodeIndex++}">`);
+    nodeMarkup.push(`<g class="d-node d-node-${node.kind}" data-part="${escapeHtml(node.id)}" style="--i:${nodeIndex++}">`);
     if (node.kind === 'stack') {
       nodeMarkup.push(`<rect x="${node.x + 5}" y="${node.y + 5}" width="${node.w}" height="${node.h}" rx="2" fill="${palette.surface}" stroke="${palette.muted}" stroke-opacity="0.5"/>`);
     }
     nodeMarkup.push(`<rect x="${node.x}" y="${node.y}" width="${node.w}" height="${node.h}" rx="2" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"${dash}${opacity}/>`);
-    nodeMarkup.push(iconMarkup(node, palette));
+    nodeMarkup.push(iconMarkup(node, palette, blockTop));
     for (const line of lines) {
       nodeMarkup.push(`<text x="${round(node.x + node.w / 2)}" y="${round(textY)}" text-anchor="middle" font-size="13" fill="${palette.ink}" font-weight="${node.kind === 'accent' ? 600 : 400}">${escapeHtml(line)}</text>`);
       textY += lineHeight;

package/src/render/themes/hud.js

@@ -43,14 +43,16 @@ body{margin:0;background:#020409;color:var(--ink);font-family:var(--mono);font-s
 .scene-head{padding:14px 16px 0}
 .scene-head .brand-row{padding-bottom:6px}
 .scene-top{display:flex;justify-content:space-between;padding:12px 16px 6px;font-size:9px;letter-spacing:.12em;color:#5f8090;text-transform:uppercase}
-.scene-stage{position:relative;aspect-ratio:16/8.6;min-height:300px;margin-top:2px;background:radial-gradient(ellipse at 55% 45%,rgba(30,90,120,.35),rgba(4,8,14,0) 66%),#03060b}
+.scene-stage{position:relative;width:100%;min-width:0;aspect-ratio:16/8.6;min-height:300px;margin-top:2px;background:radial-gradient(ellipse at 55% 45%,rgba(30,90,120,.35),rgba(4,8,14,0) 66%),#03060b}
 .scene-canvas{position:absolute;inset:0;width:100%;height:100%}
 .scene-label{position:absolute;transform:translate(-50%,-50%);font-size:9.5px;letter-spacing:.04em;color:#7fa6b8;white-space:nowrap;text-shadow:0 0 6px #03060b;pointer-events:none}
 .scene-crosshair{position:absolute;transform:translate(-50%,-50%);width:190px;height:190px;border:1px solid rgba(94,200,229,.22);border-radius:50%;pointer-events:none}
 .scene-crosshair::before{content:"";position:absolute;left:50%;top:-80px;bottom:-80px;border-left:1px solid rgba(94,200,229,.14)}
 .scene-crosshair::after{content:"";position:absolute;top:50%;left:-80px;right:-80px;border-top:1px solid rgba(94,200,229,.14)}
 .scene-active-label{position:absolute;transform:translate(16px,-150%);padding:3px 9px;border:1px solid #3a7188;background:rgba(4,10,16,.86);font-size:11.5px;letter-spacing:.05em;color:#e6f7ff;white-space:nowrap}
+.scene-active-label.to-left{transform:translate(calc(-100% - 16px),-150%)}
 .scene-badge{position:absolute;transform:translate(16px,-50%);padding:2px 7px;border:1px solid #2a5568;background:#06222e;font-size:9px;letter-spacing:.14em;color:#8fd8ee}
+.scene-badge.to-left{transform:translate(calc(-100% - 16px),-50%)}
 .scene-card{position:absolute;transform:translate(26px,26px);min-width:236px;max-width:310px;border:1px solid #2a5568;background:rgba(4,12,19,.94);padding:12px 13px;font-size:10px;color:#9fc0cf;box-shadow:0 0 34px rgba(0,0,0,.65)}
 .sc-card-title{font-size:13.5px;color:#e6f7ff;margin-bottom:8px;letter-spacing:.03em}
 .sc-row{display:flex;justify-content:space-between;gap:14px;padding:2px 0;border-bottom:1px solid #0e1f2a}
@@ -217,7 +219,7 @@ tbody td{padding:5px 6px;color:#b7d4e1;border-bottom:1px solid #0a1822}
   .hud-head{flex-direction:column;gap:8px}
   .live{font-size:8px}
   .scene-stage{min-height:240px}
-  .scene-card{transform:translate(12px,18px);min-width:200px;max-width:230px}
+  .scene-card{display:none}
   .scene-label{font-size:8px}
   .sc-tail{margin-left:0}
   .footnotes{column-count:1}
@@ -251,11 +253,14 @@ function head(model) {
 
 const RUNTIME = `
 (function(){
+  // With a timeline (ld-timed) the page clock drives everything through window.__ldHooks.
+  var timed = document.documentElement.classList.contains('ld-timed');
+  var hooks = window.__ldHooks = window.__ldHooks || [];
   var clocks = document.querySelectorAll('[data-clock]');
   var started = Date.now();
   function pad(n){ return String(n).padStart(2,'0'); }
-  function tick(){
-    var ms = Date.now() - started;
+  function tick(at){
+    var ms = timed ? at : Date.now() - started;
     var cs = Math.floor(ms / 10) % 100;
     var s = Math.floor(ms / 1000) % 60;
     var m = Math.floor(ms / 60000) % 60;
@@ -263,8 +268,8 @@ const RUNTIME = `
     var text = pad(h) + ':' + pad(m) + ':' + pad(s) + '.' + pad(cs);
     for (var i = 0; i < clocks.length; i++) clocks[i].textContent = text;
   }
-  tick();
-  setInterval(tick, 90);
+  if (timed) hooks.push(tick);
+  else { tick(); setInterval(tick, 90); }
 
   var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   var scenes = document.querySelectorAll('.scene');
@@ -321,8 +326,10 @@ const RUNTIME = `
       }
 
       var active = nodes[data.active];
-      if (active) {
-        var ax = active.x * kx, ay = active.y * ky;
+      var moved = scene.__ldActive;
+      if (active || moved) {
+        var ax = moved ? moved.x / 100 * width : active.x * kx;
+        var ay = moved ? moved.y / 100 * height : active.y * ky;
         var pulse = reduce ? 1 : 0.5 + 0.5 * Math.sin(phase * 0.0014);
         ctx.beginPath();
         ctx.fillStyle = 'rgba(220,248,255,0.95)';
@@ -339,6 +346,10 @@ const RUNTIME = `
       }
     }
 
+    if (timed) {
+      hooks.push(draw);
+      return;
+    }
     if (reduce) {
       draw(0);
       return;

package/src/render/themes/variants.js

@@ -0,0 +1,43 @@
+import * as paperLight from './paper-light.js';
+import * as paperDark from './paper-dark.js';
+
+// A curated look is a base theme plus its own palette and a short CSS layer.
+// Blocks, figures, and the timeline all come from the base, so every look stays flat and printable.
+function variant(base, palette, css) {
+  return {
+    ...base,
+    palette: { ...base.palette, ...palette },
+    document: args => base.document(args).replace('</head>', () => `<style>${css}</style>\n</head>`)
+  };
+}
+
+export const VARIANTS = {
+  'field-notes': variant(paperLight, {
+    bg: '#f7f1e1', surface: '#f1e9d3', ink: '#25261c', muted: '#5c5a46', hair: '#d9cfb2', rule: '#33401f',
+    accent: '#486a1f', accentSoft: '#e5ebcf', box: '#f0e8d1', boxStroke: '#8f8a6a'
+  }, `
+html,body{background:#e6dcc0}
+.sheet{border-left:7px solid var(--ld-accent)}
+.doc-title{font-style:italic;font-weight:600}
+h2.sec-head{border-color:var(--ld-accent)}
+.abstract{border-color:var(--ld-accent)}`),
+
+  editorial: variant(paperLight, {
+    bg: '#fbf8f2', surface: '#f4efe5', ink: '#131313', muted: '#555048', hair: '#dcd5c8', rule: '#131313',
+    accent: '#b3122b', accentSoft: '#f7e0e1', box: '#f4efe5', boxStroke: '#8c857a'
+  }, `
+html,body{background:#ece7dd}
+.masthead{text-align:left;max-width:none;border-bottom:5px solid var(--ld-ink);padding-bottom:20px;margin-bottom:26px}
+.doc-title{font-size:clamp(38px,7vw,76px);line-height:.98;letter-spacing:-.034em}
+.doc-subtitle{margin-left:0;font-style:italic}
+h2.sec-head{border-top-width:3px}`),
+
+  blueprint: variant(paperDark, {
+    bg: '#0b1f3a', surface: '#102a4c', ink: '#e6f0ff', muted: '#9db8dd', hair: '#254a7c', rule: '#5b8fd0',
+    accent: '#7fe0ff', accentSoft: '#10335a', box: '#0f2745', boxStroke: '#4a79b5'
+  }, `
+html,body{background:#081729}
+body{background-image:linear-gradient(rgba(127,224,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,224,255,.06) 1px,transparent 1px);background-size:32px 32px}
+.doc-title{letter-spacing:.01em}
+@media print{body{background-image:none}}`)
+};

package/src/render/timeline.js

@@ -0,0 +1,304 @@
+// Timeline cues: one clock, every frame a pure function of t.
+// The live page plays the cues once (or loops); video export calls window.__ld.seek(t) per frame.
+
+const DEFAULT_DUR = 1.2;
+const STAGE_ONLY_SECONDS = 6;
+
+export function timelineDuration(model) {
+  const timeline = model.timeline;
+  if (!timeline) return STAGE_ONLY_SECONDS;
+  if (timeline.duration) return timeline.duration;
+  const end = Math.max(0, ...timeline.cues.map(cue => cue.at + (cue.dur || DEFAULT_DUR)));
+  return Math.round((end + 1.5) * 1000) / 1000;
+}
+
+function payload(model) {
+  const cues = (model.timeline?.cues || [])
+    .map(cue => ({ at: cue.at, dur: cue.dur || DEFAULT_DUR, do: cue.do, target: cue.target, ...(cue.zoom ? { zoom: cue.zoom } : {}) }))
+    .sort((a, b) => a.at - b.at);
+  return { duration: timelineDuration(model), loop: !!model.timeline?.loop, cues };
+}
+
+const PROPS = [['r', 1], ['f', 0], ['dim', 0], ['hl', 0], ['ha', 0], ['hr', 0]];
+
+const CSS = `
+${PROPS.map(([name, initial]) => `@property --ld-${name}{syntax:'<number>';inherits:false;initial-value:${initial}}`).join('\n')}
+.ld-mark{--ld-hlc:color-mix(in srgb,var(--ld-accent) calc(var(--ld-ha)*42%),transparent);background-image:linear-gradient(var(--ld-hlc),var(--ld-hlc));background-repeat:no-repeat;background-size:calc(var(--ld-hl)*100%) 100%;text-decoration-line:underline;text-decoration-color:color-mix(in srgb,var(--ld-accent) calc(var(--ld-hr)*75%),transparent);text-decoration-thickness:1.5px;text-underline-offset:.24em;border-radius:2px}
+.ld-t:not(svg *):not(.ld-mark){opacity:calc(var(--ld-r)*(1 - var(--ld-dim)*.4 + var(--ld-f)*.4));outline:calc(var(--ld-f)*2px) solid color-mix(in srgb,var(--ld-accent) calc(var(--ld-f)*100%),transparent);outline-offset:-2px;box-shadow:inset 0 0 calc(var(--ld-f)*30px) color-mix(in srgb,var(--ld-accent) calc(var(--ld-f)*26%),transparent),inset 0 0 0 9999px color-mix(in srgb,var(--ld-accent) calc(var(--ld-ha)*9%),transparent)}
+svg .ld-t{filter:opacity(calc(var(--ld-r)*(1 - var(--ld-dim)*.4 + var(--ld-f)*.4))) drop-shadow(0 0 calc(var(--ld-f)*5px) color-mix(in srgb,var(--ld-accent) calc(var(--ld-f)*100%),transparent))}
+.ld-count{font-variant-numeric:tabular-nums}
+::highlight(ld-untyped){color:transparent}
+.scene-label.is-matched{color:var(--ld-accent)}
+html.ld-stage,html.ld-stage body{overflow:hidden!important}
+html.ld-stage ::-webkit-scrollbar{display:none}
+.ld-cam{transform-origin:0 0}
+@media print{.ld-t{opacity:1!important;filter:none!important;outline:none!important;box-shadow:none!important}.ld-mark{background:none!important}.ld-cam{transform:none!important}}`;
+
+const RUNTIME = `
+(function(){
+  var dataEl = document.getElementById('ld-timeline');
+  if (!dataEl) return;
+  var data = JSON.parse(dataEl.textContent);
+  var root = document.documentElement;
+  var stage = root.classList.contains('ld-stage');
+  var duration = data.duration;
+  var PROPS = ${JSON.stringify(PROPS.map(([name]) => name))};
+  function clamp(x){ return x < 0 ? 0 : x > 1 ? 1 : x; }
+  function ease(x){ x = clamp(x); return x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; }
+  function lerp(a, b, p){ return a + (b - a) * p; }
+  function resolve(target){
+    if (target === 'page') return null;
+    if (target.indexOf('mark:') === 0) return document.querySelector('[data-mark="' + target.slice(5) + '"]');
+    var parts = target.split('/');
+    var block = document.querySelector('[data-cue="' + parts[0] + '"]');
+    if (!block || parts.length < 2) return block;
+    var list = block.querySelectorAll('[data-part]');
+    for (var i = 0; i < list.length; i++) if (list[i].getAttribute('data-part') === parts[1]) return list[i];
+    return null;
+  }
+  function textNodes(el){
+    var out = [], walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT), node;
+    while ((node = walker.nextNode())) out.push({ node: node, text: node.nodeValue });
+    return out;
+  }
+  function siblingsOf(el){
+    var block = el.closest('[data-cue]');
+    return block ? block.querySelectorAll('[data-part]') : [];
+  }
+
+  var items = [], cams = [], scenes = [], managed = [];
+  function manage(el){ if (!el.__ld) { el.__ld = {}; managed.push(el); el.classList.add('ld-t'); } }
+  data.cues.forEach(function(cue){
+    var el = resolve(cue.target);
+    if (cue.do === 'camera') { cams.push({ cue: cue, el: el }); return; }
+    if (!el) return;
+    if (cue.do === 'activate') {
+      var scene = el.closest('.scene');
+      if (!scene) return;
+      if (scenes.indexOf(scene) < 0) {
+        scenes.push(scene);
+        scene.__ldMoves = [];
+        scene.__ldParts = ['.scene-crosshair', '.scene-active-label', '.scene-badge', '.scene-card'].map(function(sel){ return scene.querySelector(sel); });
+        var cross = scene.__ldParts[0];
+        scene.__ldHome = cross ? { x: parseFloat(cross.style.left), y: parseFloat(cross.style.top) } : { x: 50, y: 50 };
+        scene.__ldText = scene.__ldParts[1] ? scene.__ldParts[1].textContent : '';
+      }
+      scene.__ldMoves.push({ cue: cue, el: el });
+      return;
+    }
+    manage(el);
+    if (el.hasAttribute('data-part')) Array.prototype.forEach.call(siblingsOf(el), manage);
+    if (cue.do === 'reveal') { el.classList.add('ld-rv'); el.__ldAt = el.__ldAt == null ? cue.at : Math.min(el.__ldAt, cue.at); }
+    // Panels count and type their body only, so the panel number and title stay put.
+    var body = el.querySelector('.panel-body') || el;
+    if (cue.do === 'count') { el.classList.add('ld-count'); el.__ldText = el.__ldText || textNodes(body); }
+    if (cue.do === 'type') el.__ldText = el.__ldText || textNodes(body);
+    items.push({ cue: cue, el: el });
+  });
+
+  var cam = null;
+  if (stage) {
+    cam = document.createElement('div');
+    cam.className = 'ld-cam';
+    while (document.body.firstChild) cam.appendChild(document.body.firstChild);
+    document.body.appendChild(cam);
+  }
+
+  function put(el, name, value){ if (!(el.__ld[name] >= value)) el.__ld[name] = value; }
+  function countText(src, p){
+    return src.replace(/\\d[\\d,]*(?:\\.\\d+)?/g, function(m){
+      var dec = (m.split('.')[1] || '').length;
+      var v = parseFloat(m.replace(/,/g, '')) * p;
+      return m.indexOf(',') >= 0
+        ? v.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec })
+        : v.toFixed(dec);
+    });
+  }
+
+  var ONCE = { reveal: 1, count: 1, type: 1 };
+  // settled: a looping live page keeps reveals, counts, and typing at their end state after the first pass.
+  // shift(item): live-only delay for a block that was still below the fold when its cue came up.
+  function applyCues(t0, settled, shift){
+    var i, el;
+    for (i = 0; i < managed.length; i++) managed[i].__ld = {};
+    for (i = 0; i < items.length; i++) {
+      var cue = items[i].cue, at = cue.at, dur = cue.dur;
+      el = items[i].el;
+      var t = shift ? t0 - shift(items[i]) : t0;
+      var ct = settled && ONCE[cue.do] ? Infinity : t;
+      var p = clamp((ct - at) / dur);
+      if (cue.do === 'highlight') {
+        put(el, 'hl', ease((t - at) / Math.min(.9, dur * .6)));
+        put(el, 'ha', t < at ? 0 : clamp((at + dur - t) / .45));
+        put(el, 'hr', clamp((t - (at + dur - .45)) / .45));
+      } else if (cue.do === 'focus') {
+        var env = Math.min(clamp((t - at) / .35), clamp((at + dur - t) / .45));
+        put(el, 'f', env);
+        if (el.hasAttribute('data-part')) Array.prototype.forEach.call(siblingsOf(el), function(part){ put(part, 'dim', env); });
+      } else if (cue.do === 'reveal') {
+        put(el, 'r', ease((ct - at) / Math.min(dur, .9)));
+      } else if (cue.do === 'count') {
+        put(el, 'count', ease(p));
+      } else if (cue.do === 'type') {
+        put(el, 'type', p);
+      }
+    }
+    var untyped = [];
+    for (i = 0; i < managed.length; i++) {
+      el = managed[i];
+      var state = el.__ld;
+      for (var k = 0; k < PROPS.length; k++) {
+        var name = PROPS[k];
+        if (state[name] == null) el.style.removeProperty('--ld-' + name);
+        else el.style.setProperty('--ld-' + name, state[name].toFixed(4));
+      }
+      if (state.count != null) el.__ldText.forEach(function(n){ n.node.nodeValue = countText(n.text, state.count); });
+      if (state.type != null && window.Highlight && window.CSS && CSS.highlights) {
+        var left = Math.round(state.type * el.__ldText.reduce(function(sum, n){ return sum + n.text.length; }, 0));
+        el.__ldText.forEach(function(n){
+          if (left < n.text.length) { var r = document.createRange(); r.setStart(n.node, Math.max(0, left)); r.setEnd(n.node, n.text.length); untyped.push(r); }
+          left -= n.text.length;
+        });
+      }
+    }
+    if (window.Highlight && window.CSS && CSS.highlights) {
+      if (untyped.length) CSS.highlights.set('ld-untyped', new Highlight(...untyped)); else CSS.highlights.delete('ld-untyped');
+    }
+    scenes.forEach(function(scene){ moveScene(scene, t0, shift); });
+    if (cam) moveCamera(t0);
+  }
+
+  function moveScene(scene, t0, shift){
+    var pos = { x: scene.__ldHome.x, y: scene.__ldHome.y }, text = scene.__ldText, away = 0, current = null;
+    scene.__ldMoves.forEach(function(move){
+      var t = shift ? t0 - shift(move) : t0;
+      if (t < move.cue.at) return;
+      var p = ease((t - move.cue.at) / move.cue.dur);
+      var to = { x: parseFloat(move.el.style.left), y: parseFloat(move.el.style.top) };
+      pos = { x: lerp(pos.x, to.x, p), y: lerp(pos.y, to.y, p) };
+      if (p >= .5) text = move.el.getAttribute('data-part');
+      away = Math.max(away, p);
+      current = move.el;
+    });
+    scene.__ldMoves.forEach(function(move){ move.el.classList.toggle('is-matched', move.el === current); });
+    var parts = scene.__ldParts;
+    for (var i = 0; i < 3; i++) if (parts[i]) { parts[i].style.left = pos.x.toFixed(3) + '%'; parts[i].style.top = pos.y.toFixed(3) + '%'; }
+    if (parts[1]) parts[1].classList.toggle('to-left', pos.x > 55);
+    if (parts[2]) parts[2].classList.toggle('to-left', pos.x > 55);
+    if (parts[1]) parts[1].textContent = text;
+    if (parts[3]) parts[3].style.opacity = String(1 - away);
+    scene.__ldActive = pos;
+  }
+
+  function rectOf(el){
+    var r = el.getBoundingClientRect(), c = cam.getBoundingClientRect();
+    return { x: r.left - c.left, y: r.top - c.top, w: r.width, h: r.height };
+  }
+  function moveCamera(t){
+    cam.style.transform = 'none';
+    var W = window.innerWidth, H = window.innerHeight, pageW = cam.scrollWidth, pageH = cam.scrollHeight;
+    var view = { z: 1, x: 0, y: 0 };
+    cams.forEach(function(item){
+      if (t < item.cue.at) return;
+      var goal = { z: 1, x: 0, y: 0 };
+      if (item.el) {
+        var r = rectOf(item.el);
+        var z = Math.max(1, Math.min(3, item.cue.zoom || 1));
+        goal = { z: z, x: W / 2 - (r.x + r.w / 2) * z, y: r.h * z > H * .9 ? 24 - r.y * z : H / 2 - (r.y + r.h / 2) * z };
+        goal.x = Math.min(0, Math.max(W - pageW * z, goal.x));
+        goal.y = Math.min(0, Math.max(H - pageH * z, goal.y));
+      }
+      var p = ease((t - item.cue.at) / item.cue.dur);
+      view = { z: lerp(view.z, goal.z, p), x: lerp(view.x, goal.x, p), y: lerp(view.y, goal.y, p) };
+    });
+    cam.style.transform = 'translate(' + view.x.toFixed(2) + 'px,' + view.y.toFixed(2) + 'px) scale(' + view.z.toFixed(4) + ')';
+  }
+
+  // Ambient motion (theme canvases, CSS figure motion) runs on the same clock.
+  function applyAmbient(t, live){
+    var hooks = window.__ldHooks || [];
+    for (var i = 0; i < hooks.length; i++) hooks[i](t * 1000);
+    if (!document.getAnimations) return;
+    var list = document.getAnimations();
+    for (var j = 0; j < list.length; j++) {
+      // Live pages leave hover and focus transitions to the browser.
+      if (live && window.CSSTransition && list[j] instanceof CSSTransition) continue;
+      var target = list[j].effect && list[j].effect.target;
+      var owner = target && target.closest ? target.closest('.ld-rv') : null;
+      var offset = owner && owner.__ldAt != null ? owner.__ldAt : 0;
+      list[j].pause();
+      list[j].currentTime = Math.max(0, t - offset) * 1000;
+    }
+  }
+
+  var shown = 0;
+  function seek(t){ shown = t; applyCues(t); applyAmbient(t); }
+  window.__ld = { duration: duration, seek: seek };
+  window.addEventListener('beforeprint', function(){ seek(duration); });
+
+  if (window.__ldCapture) { seek(0); return; }
+  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (reduce) { seek(duration); return; }
+  // Live playback waits for the reader: a block whose cue comes up while it is still below the fold
+  // defers its own cues, in order, until it scrolls into view. Everything else keeps playing.
+  var gates = items.slice();
+  scenes.forEach(function(scene){ gates = gates.concat(scene.__ldMoves); });
+  gates.forEach(function(g){ g.root = g.el.closest('[data-cue]') || g.el; g.root.__ldDelay = 0; });
+  function shift(g){ return g.root.__ldDelay; }
+  function belowFold(el){ return el.getBoundingClientRect().top > window.innerHeight; }
+  var last = null, wall = 0, cueT = 0, cycle = 0, running = true, paused = false;
+  function frame(now){
+    if (paused) { running = false; return; }
+    var dt = last === null ? 0 : Math.min(.1, (now - last) / 1000);
+    last = now;
+    wall += dt;
+    var waiting = [], maxDelay = 0;
+    cueT += dt;
+    gates.forEach(function(g){
+      var local = cueT - g.root.__ldDelay;
+      if (local >= g.cue.at && local < g.cue.at + g.cue.dur && waiting.indexOf(g.root) < 0 && belowFold(g.root)) {
+        waiting.push(g.root);
+        g.root.__ldDelay = cueT - g.cue.at; // hold exactly at the cue start
+      }
+    });
+    gates.forEach(function(g){ maxDelay = Math.max(maxDelay, g.root.__ldDelay); });
+    if (data.loop && cueT >= duration + maxDelay) {
+      cueT -= duration + maxDelay;
+      cycle++;
+      gates.forEach(function(g){ g.root.__ldDelay = 0; });
+    }
+    applyCues(Math.min(cueT, duration + maxDelay), cycle > 0, shift);
+    applyAmbient(wall, true);
+    shown = cueT;
+    if (data.loop || cueT < duration + maxDelay || (window.__ldHooks || []).length) requestAnimationFrame(frame); else running = false;
+  }
+  function start(){ if (!running) { running = true; last = null; requestAnimationFrame(frame); } }
+  // Live controls for a host page: pause() hands the clock to seek(t), play() resumes from the last shown time.
+  window.__ld.time = function(){ return shown; };
+  window.__ld.pause = function(){ paused = true; };
+  window.__ld.play = function(){
+    if (!paused && running) return;
+    cueT = Math.min(shown, duration);
+    gates.forEach(function(g){ g.root.__ldDelay = 0; });
+    paused = false;
+    start();
+  };
+  window.__ld.replay = function(){
+    cueT = 0; cycle = 0; shown = 0;
+    gates.forEach(function(g){ g.root.__ldDelay = 0; });
+    paused = false;
+    start();
+  };
+  seek(0);
+  requestAnimationFrame(frame);
+})();
+`;
+
+/** Markup appended before </body> when a model has a timeline or renders as a video stage. */
+export function timelineAssets(model) {
+  const json = JSON.stringify(payload(model)).replace(/</g, '\\u003c');
+  return `<style>${CSS}</style>
+<script type="application/json" id="ld-timeline">${json}</script>
+<script>${RUNTIME}</script>
+`;
+}