@jokerized/decksmith 0.2.0 → 0.3.0

package/dist/cli.js

@@ -110,6 +110,13 @@ var equationWalkParamsSchema = z.object({
   /** Walked in order, one hold-point each. */
   terms: z.array(termSchema).min(1).max(4)
 });
+var equationMorphParamsSchema = z.object({
+  eyebrow: z.string().optional(),
+  headline: z.string(),
+  fromId: z.string(),
+  toId: z.string(),
+  terms: z.array(termSchema).min(1).max(4)
+});
 var dataTableParamsSchema = z.object({
   eyebrow: z.string().optional(),
   headline: z.string(),
@@ -238,7 +245,22 @@ var stackParamsSchema = z.object({
   headline: z.string(),
   /** Drawn bottom-up as offset planes, revealed in order. */
   layers: z.array(z.object({ label: z.string(), note: z.string().optional() })).min(2).max(7),
-  note: z.string().optional()
+  note: z.string().optional(),
+  /**
+   * Tilt the slab stack away from the viewer, so the planes read as stacked in
+   * depth rather than merely offset up the page.
+   *
+   * OPTIONAL, and absent means flat — every storyboard written before this
+   * existed still parses, and every deck that does not ask for it emits exactly
+   * the bytes it did before.
+   *
+   * Degrees, and bounded at 18 rather than by taste: the tilt is paid for in
+   * declared type, because perspective shrinks the far half of the plane and
+   * invariant 5 is about what the audience SEES. At 18 degrees a 40px floor
+   * already needs 53.8px declared (`src/emit/depth.ts`), and past that a
+   * headline cannot spend enough and still fit its own line.
+   */
+  tilt: z.number().min(0).max(18).optional()
 });
 var splitSideSchema = z.object({
   label: z.string(),
@@ -303,6 +325,12 @@ var beatSchema = z.discriminatedUnion("archetype", [
     params: equationWalkParamsSchema,
     ...beatTail
   }),
+  z.object({
+    ...beatCore,
+    archetype: z.literal("equation-morph"),
+    params: equationMorphParamsSchema,
+    ...beatTail
+  }),
   z.object({
     ...beatCore,
     archetype: z.literal("data-table"),
@@ -357,6 +385,7 @@ var DIAGRAMMATIC = /* @__PURE__ */ new Set([
   "stack",
   "split-compare",
   "equation-walk",
+  "equation-morph",
   "line-chart"
 ]);
 var ARCHETYPE_FAMILY = {
@@ -371,7 +400,8 @@ var ARCHETYPE_FAMILY = {
   "bar-compare": "quantity",
   "line-chart": "quantity",
   "data-table": "quantity",
-  "equation-walk": "formal"
+  "equation-walk": "formal",
+  "equation-morph": "formal"
 };
 var storyboardSchema = z.object({
   sourceId: z.string(),
@@ -3079,7 +3109,7 @@ function locate(tex, term) {
   end = Math.max(end, hay.map[lastNorm + 1] ?? lastOrig + 1);
   return { start, end: Math.min(end, tex.length) };
 }
-function wrapTerms(tex, terms, beatId) {
+function wrapTerms(tex, terms, beatId, cls = (t2) => `term t-${t2.tone}`) {
   let parts = [{ text: tex, raw: true }];
   const used = [];
   const missing = [];
@@ -3095,7 +3125,7 @@ function wrapTerms(tex, terms, beatId) {
         1,
         { text: part.text.slice(0, at.start), raw: true },
         {
-          text: `\\htmlClass{term t-${term.tone}}{${part.text.slice(at.start, at.end)}}`,
+          text: `\\htmlClass{${cls(term)}}{${part.text.slice(at.start, at.end)}}`,
           raw: false
         },
         { text: part.text.slice(at.end), raw: true }
@@ -3128,6 +3158,24 @@ function statements(tex, stacked) {
   const parts = tex.split(/\\qquad|\\quad|\\\\/).map((s) => s.trim()).filter(Boolean);
   return parts.length > 0 ? parts : [tex];
 }
+function legendRows(sid, terms, theme) {
+  return terms.map(
+    (t2) => `<div class="leg" id="${sid}-leg-${t2.tone}"><span class="chip" id="${sid}-chip-${t2.tone}" style="color:${theme.tones[t2.tone]}"></span><span>${esc(t2.label)}</span></div>`
+  ).join("\n    ");
+}
+function legendCss(theme) {
+  return [
+    // `width:fit-content` + auto margins, not `align-items:center`: centring
+    // each row individually gave the legend a ragged left edge, because a short
+    // label indented its own chip further than a long one did. The column is
+    // centred as one block and the rows start on a shared spine.
+    ".legend{display:flex;flex-direction:column;gap:30px;width:fit-content;margin-inline:auto}",
+    `.leg{display:flex;gap:26px;align-items:baseline;max-width:1400px;font-size:48px;color:${theme.muted}}`,
+    // A common chip width, so the labels share a spine too — the glyphs inside
+    // are one symbol each and their natural widths differ by a few pixels.
+    `.chip{display:inline-block;min-width:72px;text-align:center;background:${theme.panel};border-radius:10px;padding:2px 20px;white-space:nowrap;font-weight:700}`
+  ].join("\n");
+}
 var equationWalk = (beat, ctx) => {
   const { sid, theme } = ctx;
   const p = beat.params;
@@ -3139,9 +3187,7 @@ var equationWalk = (beat, ctx) => {
   }
   const walk = wrapTerms(eq.tex, p.terms, beat.id);
   const terms = walk.used;
-  const legend = terms.map(
-    (t2) => `<div class="leg" id="${sid}-leg-${t2.tone}"><span class="chip" id="${sid}-chip-${t2.tone}" style="color:${theme.tones[t2.tone]}"></span><span>${esc(t2.label)}</span></div>`
-  ).join("\n    ");
+  const legend = legendRows(sid, terms, theme);
   const stacked = isPortrait(ctx.format);
   const raw2 = statements(eq.tex, stacked);
   const shown = statements(walk.tex, stacked);
@@ -3240,15 +3286,7 @@ var equationWalk = (beat, ctx) => {
       ".eqstack{display:flex;flex-direction:column;gap:32px}",
       // Transforms do not apply to inline boxes, and KaTeX spans are inline.
       ".term{display:inline-block}",
-      // `width:fit-content` + auto margins, not `align-items:center`: centring
-      // each row individually gave the legend a ragged left edge, because a short
-      // label indented its own chip further than a long one did. The column is
-      // centred as one block and the rows start on a shared spine.
-      ".legend{display:flex;flex-direction:column;gap:30px;width:fit-content;margin-inline:auto}",
-      `.leg{display:flex;gap:26px;align-items:baseline;max-width:1400px;font-size:48px;color:${theme.muted}}`,
-      // A common chip width, so the labels share a spine too — the glyphs inside
-      // are one symbol each and their natural widths differ by a few pixels.
-      `.chip{display:inline-block;min-width:72px;text-align:center;background:${theme.panel};border-radius:10px;padding:2px 20px;white-space:nowrap;font-weight:700}`,
+      legendCss(theme),
       // The block, not the term under discussion: which term that is, is a fact
       // about the paused timeline, and CSS cannot see it. The terms are also the
       // one thing here GSAP tints and swells, so a rule on them would win the
@@ -3258,6 +3296,117 @@ var equationWalk = (beat, ctx) => {
   };
 };
 
+// src/emit/archetypes/equation-morph.ts
+var MORPH_SECONDS = 1.6;
+var equationMorph = (beat, ctx) => {
+  const { sid, theme } = ctx;
+  const p = beat.params;
+  const find2 = (id2) => {
+    const eq = ctx.source.equations.find((e) => e.id === id2);
+    if (!eq)
+      throw new Error(`equation-morph ${beat.id}: no equation "${id2}" in source ${ctx.source.id}`);
+    return eq;
+  };
+  const a = find2(p.fromId);
+  const b = find2(p.toId);
+  const both = p.terms.filter((t2) => locate(a.tex, t2.tex) && locate(b.tex, t2.tex));
+  if (both.length === 0) {
+    throw new Error(
+      `equation-morph ${beat.id}: none of its ${p.terms.length} term(s) occur in both equations. Terms: ${p.terms.map((t2) => JSON.stringify(t2.tex)).join(", ")}. From: ${JSON.stringify(a.tex)}. To: ${JSON.stringify(b.tex)}`
+    );
+  }
+  const cls = (t2) => `term t-${t2.tone} ds-k-${t2.tone}`;
+  const wa = wrapTerms(a.tex, both, beat.id, cls).tex;
+  const wb = wrapTerms(b.tex, both, beat.id, cls).tex;
+  const size3 = Math.max(
+    MIN_FONT,
+    Math.min(
+      equationSize(a.tex.length > b.tex.length ? a.tex : b.tex),
+      Math.floor(contentW(ctx.format) / Math.max(texUnits(a.tex), texUnits(b.tex)))
+    )
+  );
+  const html = `${chrome(sid, p.eyebrow, p.headline, contentW(ctx.format))}
+<div class="eqslide">
+  <div class="morph" id="${sid}-morph" style="font-size:${size3}px">
+    <div class="side" data-morph="a" id="${sid}-eqa"></div>
+    <div class="side" data-morph="b" id="${sid}-eqb"></div>
+  </div>
+  <div class="legend">
+    ${legendRows(sid, both, theme)}
+  </div>
+</div>`;
+  const setup = [
+    `var OPTS = ${OPTS};`,
+    `katex.render('${js(wa)}', document.getElementById("${sid}-eqa"), OPTS);`,
+    `katex.render('${js(wb)}', document.getElementById("${sid}-eqb"), OPTS);`,
+    ...both.map(
+      (t2) => `katex.render('${js(t2.tex)}', document.getElementById("${sid}-chip-${t2.tone}"), ${INLINE_OPTS});`
+    )
+  ];
+  const first = 1.8;
+  const at = Math.round(
+    Math.max(2.6, Math.min(beat.seconds - MORPH_SECONDS - 0.9, beat.seconds * 0.45)) * 100
+  ) / 100;
+  const tl = [
+    ...chromeIn(sid, p.eyebrow !== void 0),
+    tween(`#${sid}-morph`, { opacity: 0, y: 22 }, { opacity: 1, y: 0, duration: 0.7 }, 0.8),
+    ...both.map(
+      (t2, i) => tween(
+        `#${sid}-leg-${t2.tone}`,
+        { opacity: 0, x: -18 },
+        { opacity: 1, x: 0, duration: 0.5 },
+        1 + i * 0.15
+      )
+    ),
+    // ONE tween, on the host, driving the plugin. Its ease is "none" because the
+    // plan carries its own eases per segment; `pace` scales this duration and
+    // the plan, being in fractions of it, scales with it.
+    tween(
+      `#${sid}-morph`,
+      { dsMorph: 0 },
+      { dsMorph: 1, duration: MORPH_SECONDS, ease: "none" },
+      at
+    )
+  ];
+  return {
+    html,
+    tl,
+    setup,
+    // SEAM B: the plan is browser geometry after fonts, so it is built inside
+    // the ready gate, and the plugin tween above finds it on the host.
+    measure: [`DSMorph.build(document.getElementById("${sid}-morph"));`],
+    plugins: ["dsMorph"],
+    holds: holdsWithin([first, at + MORPH_SECONDS + 0.4], beat.seconds),
+    css: [
+      chromeCss(theme),
+      ".eqslide{display:flex;flex-direction:column;justify-content:space-evenly;gap:64px;flex:1;min-height:0}",
+      ".katex-display{margin:0 !important}",
+      // Both sides in one grid cell, so the host is as tall as the taller line
+      // and neither needs a guessed height; the overlay is absolute over it.
+      // Padded by the room an arc needs, so a bowing glyph stays inside its
+      // offset parent and the layout gate's `escaped_container` stays quiet; the
+      // bow is capped to the same 0.8em in `plan`.
+      `.morph{position:relative;display:grid;place-items:center;text-align:center;padding:0.8em 0.5em;color:${theme.fg}}`,
+      ".side{grid-area:1/1}",
+      // B is measured, never seen: the runtime lifts its glyphs into the overlay
+      // and drives them from there. Hidden by the sheet so nothing is captured
+      // before the gate has built the plan.
+      '.side[data-morph="b"]{visibility:hidden}',
+      ".ds-morph-layer{position:absolute;inset:0}",
+      ".term{display:inline-block}",
+      // Keys are tinted from the start, on BOTH lines — the colour is what lets
+      // a viewer follow a body across the move. Scoped under `.morph` because
+      // `equation-walk` tweens `.t-<tone>` from the foreground colour, and a
+      // bare rule on the class would win that cascade and cancel its walk.
+      ...["a", "b", "c", "d"].map(
+        (tone2) => `.morph .t-${tone2}{color:${theme.tones[tone2]}}`
+      ),
+      legendCss(theme),
+      ambient(sid, "-morph", BREATHE)
+    ].join("\n")
+  };
+};
+
 // src/emit/archetypes/grid.ts
 var LABEL = 42;
 var LH = 1.25;
@@ -4541,6 +4690,30 @@ var splitCompare = (beat, ctx) => {
   };
 };
 
+// src/emit/depth.ts
+var DEFAULT_POSE = { rotateX: 12, perspective: 1400 };
+function scaleAt(pose, dy) {
+  const t2 = pose.rotateX * Math.PI / 180;
+  const denom = pose.perspective - dy * Math.sin(t2);
+  if (denom <= 0) return 0;
+  return Math.cos(t2) * (pose.perspective / denom) ** 2;
+}
+var MODEL_SLACK = 0.98;
+function worstScale(pose, height) {
+  if (scaleAt(pose, height / 2) <= 0) return 0;
+  return scaleAt(pose, -height / 2) * MODEL_SLACK;
+}
+function tiltedFloor(pose, height, floor) {
+  const s = worstScale(pose, height);
+  return s > 0 ? floor / s : Number.POSITIVE_INFINITY;
+}
+function depthCss(sid, pose, part) {
+  return [
+    `#${sid} { perspective: ${pose.perspective}px; }`,
+    `#${sid} ${part} { transform: rotateX(${pose.rotateX}deg); transform-origin: 50% 50%; }`
+  ].join("\n");
+}
+
 // src/emit/archetypes/stack.ts
 var GAP3 = 44;
 var NUM_X = 48;
@@ -4564,15 +4737,20 @@ function stackLayout(p, format, face = "latin") {
 function labelWeight(i, count) {
   return i === count - 1 ? 700 : 600;
 }
+function floorFor(p, format) {
+  if (!p.tilt) return MIN_FONT;
+  return tiltedFloor({ ...DEFAULT_POSE, rotateX: p.tilt }, contentH(format), MIN_FONT);
+}
 function solve2(p, format, inline, face) {
   const width = contentW(format);
   const boxH = contentH(format);
+  const floor = floorFor(p, format);
   const count = p.layers.length;
   const k = isPortrait(format) ? "tall" : "wide";
   const riseMax = RISE_MAX[k];
   const syMax = SY_MAX[k];
   const tMax = T_MAX[k];
-  const noteW = (l) => inline && l.note !== void 0 ? textWidth(l.note, MIN_FONT, 400, 0, false, face) + 28 : 0;
+  const noteW = (l) => inline && l.note !== void 0 ? textWidth(l.note, floor, 400, 0, false, face) + 28 : 0;
   const want = Math.max(
     ...p.layers.map(
       (l, i) => textWidth(l.label, LABEL_SIZE2, labelWeight(i, count), 0, false, face) + noteW(l)
@@ -4587,7 +4765,7 @@ function solve2(p, format, inline, face) {
       (l, i) => (colW - noteW(l)) / Math.max(1, textWidth(l.label, 1, labelWeight(i, count), 0, false, face))
     )
   );
-  const labelSize = Math.max(MIN_FONT, Math.min(LABEL_SIZE2, labelRoom));
+  const labelSize = Math.max(floor, Math.min(LABEL_SIZE2, labelRoom));
   const lines = p.layers.map((l, i) => {
     const nw = noteW(l);
     const labelMaxW = Math.max(labelSize, colW - nw);
@@ -4595,14 +4773,14 @@ function solve2(p, format, inline, face) {
       label: wrap(l.label, labelSize, labelMaxW, labelWeight(i, count), 0, face),
       // Inline notes stay on one line by contract — the schema calls a note "one
       // short line" — and wrapping one would put its second line under the label.
-      note: l.note === void 0 ? [] : inline ? [l.note] : wrap(l.note, MIN_FONT, colW, 400, 0, face),
+      note: l.note === void 0 ? [] : inline ? [l.note] : wrap(l.note, floor, colW, 400, 0, face),
       noteW: nw,
       labelMaxW
     };
   });
   const blockH = Math.max(
     ...lines.map(
-      (l) => inline ? Math.max(l.label.length * labelSize, l.note.length * MIN_FONT) * 1.16 : l.label.length * labelSize * 1.16 + (l.note.length > 0 ? 6 + l.note.length * MIN_FONT * 1.16 : 0)
+      (l) => inline ? Math.max(l.label.length * labelSize, l.note.length * floor) * 1.16 : l.label.length * labelSize * 1.16 + (l.note.length > 0 ? 6 + l.note.length * floor * 1.16 : 0)
     )
   );
   const pad = Math.max(EDGE2, blockH / 2);
@@ -4622,6 +4800,7 @@ function solve2(p, format, inline, face) {
     // BOTH directions. A layout that fits the height and not the width is not a
     // layout that fits; it is one whose overflow is in the axis nothing measured.
     fits: room >= blockH + 10 && height <= free && wide,
+    floor,
     wide,
     inline,
     width,
@@ -4661,7 +4840,7 @@ var stack = (beat, ctx) => {
   const last = count - 1;
   if (!L.fits) {
     throw new Error(
-      `stack ${beat.id}: ${count} layers with ${p.layers.filter((l) => l.note).length} note(s) need ${Math.round(L.blockH)}px of label block against ${Math.round(L.avail)}px of room, at the ${MIN_FONT}px floor and with the notes already moved beside their labels. Nothing here may be set smaller, so the lever is upstream of this beat: drop a layer, or shorten the notes.`
+      `stack ${beat.id}: ${count} layers with ${p.layers.filter((l) => l.note).length} note(s) need ${Math.round(L.blockH)}px of label block against ${Math.round(L.avail)}px of room, at the ${Math.round(L.floor)}px floor and with the notes already moved beside their labels. Nothing here may be set smaller, so the lever is upstream of this beat: drop a layer, or shorten the notes.`
     );
   }
   const parts = {};
@@ -4683,7 +4862,7 @@ var stack = (beat, ctx) => {
     const dot = circle({ x: L.x0 + L.w + L.sx / 2 + 8, y: mid }, 6, { fill: tint });
     const block = L.lines[i] ?? { label: [], note: [], noteW: 0, labelMaxW: L.colW };
     const labelH = block.label.length * L.labelSize * 1.16;
-    const noteH = block.note.length > 0 ? 6 + block.note.length * MIN_FONT * 1.16 : 0;
+    const noteH = block.note.length > 0 ? 6 + block.note.length * L.floor * 1.16 : 0;
     const label = text(
       layer.label,
       { x: L.labelX, y: L.inline ? mid : mid - noteH / 2 },
@@ -4709,7 +4888,7 @@ var stack = (beat, ctx) => {
         { x: L.labelX, y: mid + labelH / 2 + 3 }
       ),
       {
-        size: MIN_FONT,
+        size: L.floor,
         fill: theme.muted,
         anchor: L.inline ? "end" : "start",
         maxWidth: L.inline ? void 0 : L.colW,
@@ -4721,7 +4900,7 @@ var stack = (beat, ctx) => {
     const num = text(
       String(i + 1),
       { x: NUM_X, y: mid },
-      { size: MIN_FONT, weight: 600, fill: theme.dim, anchor: "end", vAlign: "middle" }
+      { size: L.floor, weight: 600, fill: theme.dim, anchor: "end", vAlign: "middle" }
     );
     return group(slab(L.x0, y0, L, tint, lift2, stroke), { id: id(sid, "lay", i), class: "lay" }) + group(num + leader + dot + label + note2, { id: id(sid, "cap", i), class: "cap" });
   }).join("");
@@ -4743,6 +4922,8 @@ var stack = (beat, ctx) => {
 <div class="stnote" id="${sid}-note">${esc(p.note)}</div>` : "";
   const html = `${chrome(sid, p.eyebrow, p.headline, contentW(ctx.format))}
 <div class="stackwrap">${svg(id(sid, "stack"), L.width, L.height, body + probe2)}</div>${noteHtml}`;
+  const centre2 = (count - 1) / 2;
+  const enterFrom = (i) => p.tilt ? (i - centre2) * L.rise : 34;
   const first = 0.9;
   const step2 = Math.min(0.8, Math.max(0.4, (beat.seconds - first - 1.5) / count));
   const tl = [...chromeIn(sid, p.eyebrow !== void 0)];
@@ -4753,7 +4934,7 @@ var stack = (beat, ctx) => {
     tl.push(
       tween(
         `#${sid}-lay${i}`,
-        { opacity: 0, y: 34 },
+        { opacity: 0, y: enterFrom(i) },
         { opacity: 1, y: 0, duration: 0.55, ease: "power2.out" },
         at
       )
@@ -4796,8 +4977,12 @@ var stack = (beat, ctx) => {
       // The top plane is the focal point — last built, differently toned, and the
       // one the final hold sits on. Its entrance owns `opacity` and `transform`,
       // so the breath takes `filter`, the property nothing else writes.
-      ambient(sid, `-lay${last}`, BREATHE)
-    ].join("\n")
+      ambient(sid, `-lay${last}`, BREATHE),
+      // Absent unless the beat asked for it, so a flat stack emits the bytes it
+      // always did.
+      // `.stackwrap` and not the scene: the slabs lean, the headline does not.
+      p.tilt ? depthCss(sid, { ...DEFAULT_POSE, rotateX: p.tilt }, ".stackwrap") : ""
+    ].filter(Boolean).join("\n")
   };
 };
 
@@ -4812,6 +4997,7 @@ var emitters = {
   stack,
   "split-compare": splitCompare,
   "equation-walk": equationWalk,
+  "equation-morph": equationMorph,
   "line-chart": lineChart,
   // The ones that describe.
   title,
@@ -5004,6 +5190,7 @@ function round4(n3) {
 // src/emit/composition.ts
 var GSAP_SRC = "./vendor/gsap.min.js";
 var DRAWSVG_SRC = "./vendor/DrawSVGPlugin.min.js";
+var MORPH_SRC = "./vendor/ds-morph.js";
 var KATEX_JS = "./vendor/katex.min.js";
 var KATEX_CSS = "./katex/katex.min.css";
 function emitDeck(storyboard, source, format, runtimeJs, opts = {}) {
@@ -5094,6 +5281,7 @@ function layout(storyboard, source, format, opts = {}) {
   });
   let start = 0;
   let builds = false;
+  const plugins = /* @__PURE__ */ new Set();
   cuts.forEach((cut2, i) => {
     const { beat, sid, dive, inside, duration } = cut2;
     if (cut2.segments?.length) spoken[sid] = cut2.segments;
@@ -5108,6 +5296,7 @@ function layout(storyboard, source, format, opts = {}) {
     }
     if (scene.css) archetypeCss.add(scene.css.trim());
     if (scene.measure?.length) builds = true;
+    for (const p of scene.plugins ?? []) plugins.add(p);
     scenes.push(
       sceneHtml(
         sid,
@@ -5139,7 +5328,8 @@ function layout(storyboard, source, format, opts = {}) {
     spoken,
     total: start,
     cut,
-    builds
+    builds,
+    plugins
   };
 }
 function enteredParts(beats) {
@@ -5220,6 +5410,9 @@ function renderComposition(storyboard, format, laid) {
     <link rel="stylesheet" href="${FONT_BUNDLE_HREF}" />` : "";
   const island = format.navigable ? `
 ${emitIsland(slides)}` : "";
+  const morph = laid.plugins.has("dsMorph") ? `
+    <script src="${MORPH_SRC}"></script>
+    <script>gsap.registerPlugin(DSMorphPlugin);</script>` : "";
   return `<!doctype html>
 <html lang="${esc(storyboard.lang)}" data-resolution="${orientation}">
   <head>
@@ -5228,7 +5421,7 @@ ${emitIsland(slides)}` : "";
     <meta name="viewport" content="width=${format.width}, height=${format.height}" />
     <script src="${GSAP_SRC}"></script>
     <script src="${DRAWSVG_SRC}"></script>
-    <script>gsap.registerPlugin(DrawSVGPlugin);</script>
+    <script>gsap.registerPlugin(DrawSVGPlugin);</script>${morph}
     <link rel="stylesheet" href="${KATEX_CSS}" />
     <script src="${KATEX_JS}"></script>${fontLink}${fontFace}
     <style>
@@ -5672,6 +5865,7 @@ var REVEALS = {
   title: "1",
   "claim-figure": "2",
   "equation-walk": "one per term",
+  "equation-morph": "2",
   "data-table": "one per highlighted row, plus 1",
   "line-chart": "1",
   callout: "one per panel",
@@ -5703,9 +5897,9 @@ A beat is one idea, one visual, one hold. It carries:
              beat immediately before it. See RULE 11. Leave it off unless the
              source itself puts one inside the other.
 
-THE TWELVE ARCHETYPES
+THE THIRTEEN ARCHETYPES
 
-Eight of them DRAW: they build a vector graphic out of the source's own content
+Nine of them DRAW: they build a vector graphic out of the source's own content
 and reveal it stage by stage, so the viewer watches the idea assemble. Four only
 describe. The drawing ones are the default. The describing ones are what you
 fall back to when a point genuinely has no shape.
@@ -5783,6 +5977,14 @@ DRAWING ARCHETYPES \u2014 reach here first
                  An equation quoted to back a claim someone else is making is
                  evidence under another archetype, not a beat of its own.
 
+  equation-morph One equation becoming the next, the shared terms carried
+                 across. The tell: THE SOURCE DERIVES ONE LINE FROM ANOTHER \u2014 a
+                 substitution, a rearrangement, a special case \u2014 and the point
+                 is what moved. \`fromId\` and \`toId\` name two equations from
+                 the inventory. Each terms[].tex must appear verbatim in BOTH,
+                 and travels as one piece; a term in only one of them is
+                 dropped. Four terms maximum.
+
   line-chart     A trend the source states numerically but does not plot. The
                  tell: A QUANTITY MOVING ALONG AN ORDERED AXIS \u2014 over length, over
                  scale, over training. Points come from the source's numbers;
@@ -6181,7 +6383,8 @@ function renderSource(source) {
   out.push("", "== EQUATIONS ==");
   for (const e of source.equations)
     out.push(`[equation ${e.id}] ${e.display ? "display" : "inline"} \u2014 ${e.tex}`);
-  if (!source.equations.length) out.push("(none \u2014 no equation-walk beat is possible)");
+  if (!source.equations.length)
+    out.push("(none \u2014 no equation-walk or equation-morph beat is possible)");
   out.push("", "== TABLES ==");
   for (const t2 of source.tables) {
     out.push(`[table ${t2.id}] ${t2.caption ?? "(no caption)"}`);
@@ -6253,6 +6456,10 @@ function assertRefsResolve(storyboard, source, opts = {}) {
       case "equation-walk":
         check3(beat, "equation", beat.params.equationId, "params.equationId");
         break;
+      case "equation-morph":
+        check3(beat, "equation", beat.params.fromId, "params.fromId");
+        check3(beat, "equation", beat.params.toId, "params.toId");
+        break;
       case "data-table": {
         check3(beat, "table", beat.params.tableId, "params.tableId");
         const table = source.tables.find((t2) => t2.id === beat.params.tableId);
@@ -6389,7 +6596,31 @@ function stripNulls(node) {
   }
   return out;
 }
-var SCHEMA = forStructuredOutput(z2.toJSONSchema(storyboardSchema, { io: "input" }));
+var PLANNER_INVISIBLE = /* @__PURE__ */ new Set(["tilt"]);
+function hideFromPlanner(node) {
+  if (Array.isArray(node)) return node.map(hideFromPlanner);
+  if (node === null || typeof node !== "object") return node;
+  const src = node;
+  const out = {};
+  for (const [key, value] of Object.entries(src)) {
+    if (key === "properties" && value && typeof value === "object") {
+      const kept = {};
+      for (const [prop, sub] of Object.entries(value))
+        if (!PLANNER_INVISIBLE.has(prop)) kept[prop] = hideFromPlanner(sub);
+      out.properties = kept;
+      continue;
+    }
+    if (key === "required" && Array.isArray(value)) {
+      out.required = value.filter((r) => typeof r !== "string" || !PLANNER_INVISIBLE.has(r));
+      continue;
+    }
+    out[key] = hideFromPlanner(value);
+  }
+  return out;
+}
+var SCHEMA = hideFromPlanner(
+  forStructuredOutput(z2.toJSONSchema(storyboardSchema, { io: "input" }))
+);
 async function codexPlanner(source, opts = {}) {
   const prefs = opts.prefs ?? prefsSchema.parse({});
   const dir = await mkdtemp(join3(tmpdir(), "decksmith-plan-"));
@@ -8932,6 +9163,178 @@ function tail(s) {
 import { readFile as readFile13 } from "node:fs/promises";
 import { join as join12 } from "node:path";
 
+// src/verify/typefloor.ts
+var TYPE_FLOOR_PX = 40;
+var CSS_PX = /font-size\s*:\s*([0-9.]+)px/g;
+var SVG_ATTR = /\bfont-size="([0-9.]+)"/g;
+var RELATIVE = /font-size\s*:\s*[0-9.]+(em|rem|%|vw|vh|ch|ex|pt)\b/g;
+function scanTypeFloor(html, file, floorPx = TYPE_FLOOR_PX) {
+  const findings = [];
+  const zones = svgZones(html);
+  const small = [];
+  for (const pattern of [CSS_PX, SVG_ATTR]) {
+    pattern.lastIndex = 0;
+    for (const m of html.matchAll(pattern)) {
+      const px = Number(m[1]) * userUnit(zones, m.index);
+      if (px < floorPx) small.push({ px, where: where(html, m.index) });
+    }
+  }
+  if (small.length > 0) {
+    const worst = [...small].sort((a, b) => a.px - b.px);
+    const named = worst.slice(0, 6).map((s) => `${round6(s.px)}px on ${s.where}`).join(", ");
+    findings.push({
+      severity: "error",
+      gate: "typography",
+      rule: "type_below_floor",
+      message: `${file} declares ${small.length} text size(s) under the ${floorPx}px floor: ${named}${worst.length > 6 ? ", \u2026" : ""}. Sizes are in reference space, so this is the floor as authored and not an artefact of the format's zoom. Raise the size, or give the archetype less to say \u2014 a beat that only fits below the floor is a beat that has to be cut in two.`
+    });
+  }
+  const units = [...new Set([...html.matchAll(RELATIVE)].map((m) => m[1]))];
+  if (units.length > 0) {
+    findings.push({
+      severity: "warning",
+      gate: "typography",
+      rule: "type_unmeasurable",
+      message: `${file} sizes some text in ${units.join("/")}, which resolves against an inherited size this scan cannot follow, so the ${floorPx}px floor was not checked there. Declare it in px, or measure it in a browser.`
+    });
+  }
+  return findings;
+}
+function svgZones(html) {
+  const zones = [];
+  for (const m of html.matchAll(/<svg\b([^>]*)>/g)) {
+    const width = Number(/\bwidth="([0-9.]+)"/.exec(m[1])?.[1]);
+    const box = Number(/\bviewBox="[0-9.-]+\s+[0-9.-]+\s+([0-9.]+)/.exec(m[1])?.[1]);
+    const close = html.indexOf("</svg>", m.index);
+    zones.push({
+      start: m.index,
+      end: close < 0 ? html.length : close,
+      unit: width > 0 && box > 0 ? width / box : 1
+    });
+  }
+  return zones;
+}
+function userUnit(zones, at) {
+  return zones.filter((z4) => at >= z4.start && at < z4.end).reduce((unit, z4) => unit * z4.unit, 1);
+}
+function where(html, at) {
+  const open = html.lastIndexOf("<", at);
+  const closed = html.lastIndexOf(">", at);
+  if (open > closed) {
+    const end = html.indexOf(">", at);
+    const tag = html.slice(open, end < 0 ? void 0 : end + 1);
+    const id2 = /\bid="([^"]+)"/.exec(tag)?.[1];
+    if (id2) return `#${id2}`;
+    const name = /^<([a-zA-Z][\w-]*)/.exec(tag)?.[1] ?? "an element";
+    const cls = /\bclass="([^"]+)"/.exec(tag)?.[1]?.split(/\s+/)[0];
+    return cls ? `${name}.${cls}` : name;
+  }
+  const brace = html.lastIndexOf("{", at);
+  if (brace < 0) return "the stylesheet";
+  const from = Math.max(html.lastIndexOf("}", brace), html.lastIndexOf(">", brace));
+  const selector = html.slice(from + 1, brace).trim().split("\n").pop()?.trim();
+  return selector ? selector : "the stylesheet";
+}
+function round6(px) {
+  return Math.round(px * 100) / 100;
+}
+
+// src/verify/apparent.ts
+function collectApparent(sid) {
+  const scene = document.querySelector(`[data-composition-id="${CSS.escape(sid)}"]`);
+  if (!scene) return { runs: [], stage: 1 };
+  const declaredW = Number(scene.dataset.width ?? 0);
+  const sceneRect = scene.getBoundingClientRect();
+  const stage = declaredW > 0 && sceneRect.width > 0 ? sceneRect.width / declaredW : 1;
+  const runs = [];
+  const walk = (el, inSvg) => {
+    const style = getComputedStyle(el);
+    if (style.display === "none" || style.visibility === "hidden") return;
+    if (Number(style.opacity) === 0) return;
+    const within = inSvg || el.tagName.toLowerCase() === "svg";
+    if (within && typeof el.getBBox === "function") {
+      let hasText = false;
+      for (const node of Array.from(el.childNodes))
+        if (node.nodeType === 3 && node.textContent?.trim()) hasText = true;
+      if (hasText) {
+        let box = null;
+        try {
+          box = el.getBBox();
+        } catch {
+          box = null;
+        }
+        const painted = el.getBoundingClientRect().height;
+        if (box && box.height > 0 && painted > 0) {
+          let opacity = 1;
+          for (let node = el; node; node = node.parentElement) {
+            const own = Number(getComputedStyle(node).opacity);
+            if (Number.isFinite(own)) opacity *= own;
+            if (node === scene) break;
+          }
+          runs.push({
+            text: (el.textContent ?? "").trim().slice(0, 40),
+            declared: Number.parseFloat(getComputedStyle(el).fontSize) || 0,
+            ratio: painted / box.height,
+            opacity
+          });
+        }
+      }
+    }
+    for (const child of Array.from(el.children)) walk(child, within);
+  };
+  walk(scene, false);
+  return { runs, stage };
+}
+function apparentPx(run4, stage) {
+  if (stage <= 0) return run4.declared;
+  return run4.declared * run4.ratio / stage;
+}
+var SETTLED_OPACITY = 0.95;
+function midpoints(stops) {
+  const out = [];
+  for (let i = 1; i < stops.length; i++) {
+    const a = stops[i - 1];
+    const b = stops[i];
+    if (a.sid !== b.sid || b.t <= a.t) continue;
+    out.push({ sid: b.sid, t: Math.round((a.t + b.t) / 2 * 1e3) / 1e3 });
+  }
+  return out;
+}
+function gradeApparent(stops, floor = TYPE_FLOOR_PX) {
+  const worst = /* @__PURE__ */ new Map();
+  for (const stop of stops) {
+    for (const run4 of stop.runs) {
+      if (!stop.settled && run4.opacity < SETTLED_OPACITY) continue;
+      const px = apparentPx(run4, stop.stage);
+      if (px >= floor - 0.1) continue;
+      const seen = worst.get(run4.text);
+      if (!seen || px < seen.px)
+        worst.set(run4.text, { sid: stop.sid, t: stop.t, text: run4.text, px });
+    }
+  }
+  if (worst.size === 0) return [];
+  const byScene = /* @__PURE__ */ new Map();
+  for (const row of worst.values()) {
+    const list = byScene.get(row.sid) ?? [];
+    list.push(row);
+    byScene.set(row.sid, list);
+  }
+  return [...byScene].map(([sid, rows]) => {
+    rows.sort((a, b) => a.px - b.px);
+    const smallest = rows[0];
+    const named = rows.slice(0, 3).map((r) => `"${r.text}" at ${Math.round(r.px * 10) / 10}px`).join(", ");
+    return {
+      severity: "error",
+      gate: "apparent",
+      rule: "apparent_type_floor",
+      // `#${sid}` as a selector, like every other finding here: `scripts/sweep.mjs`
+      // reads the selector back to decide which beat a finding belongs to, and a
+      // bare id was once filed as a deck-level orphan while the beat reported clean.
+      message: `#${sid} draws ${rows.length} text run(s) below the ${floor}px floor once the frame is rendered: ${named}, at t=${smallest.t}s. Their DECLARED sizes pass \u2014 something between the source and the glyph scales them down, a transform at a hold or a 3D projection. Invariant 5 is about what the audience sees, and the declared-size scan cannot see this.`
+    };
+  });
+}
+
 // src/verify/overprint.ts
 var MIN_OVERLAP = 8;
 function collectSvgTextRuns(sid) {
@@ -9215,6 +9618,7 @@ async function fidelity(dir, opts = {}) {
     const { page, height } = deck;
     const measured = [];
     const collided = [];
+    const apparent = [];
     for (const stop of stops) {
       await deck.seek(stop.t);
       const bandTopPx = await page.evaluate(
@@ -9227,6 +9631,11 @@ async function fidelity(dir, opts = {}) {
         ...stop,
         pairs: overprints(await page.evaluate(collectSvgTextRuns, stop.sid))
       });
+      apparent.push({
+        ...stop,
+        settled: true,
+        ...await page.evaluate(collectApparent, stop.sid)
+      });
       const frame = await decodePng(await deck.shoot());
       measured.push({
         ...stop,
@@ -9234,9 +9643,17 @@ async function fidelity(dir, opts = {}) {
         bandTop: Math.round(1e3 * bandTopPx / height) / 1e3
       });
     }
+    for (const mid of midpoints(stops)) {
+      await deck.seek(mid.t);
+      apparent.push({ ...mid, settled: false, ...await page.evaluate(collectApparent, mid.sid) });
+    }
     return {
       stops: measured,
-      findings: [...gradeFidelity(measured, floor), ...gradeOverprint(collided)],
+      findings: [
+        ...gradeFidelity(measured, floor),
+        ...gradeOverprint(collided),
+        ...gradeApparent(apparent)
+      ],
       elapsedMs: Date.now() - started
     };
   } catch (err) {
@@ -9247,82 +9664,6 @@ async function fidelity(dir, opts = {}) {
   }
 }
 
-// src/verify/typefloor.ts
-var TYPE_FLOOR_PX = 40;
-var CSS_PX = /font-size\s*:\s*([0-9.]+)px/g;
-var SVG_ATTR = /\bfont-size="([0-9.]+)"/g;
-var RELATIVE = /font-size\s*:\s*[0-9.]+(em|rem|%|vw|vh|ch|ex|pt)\b/g;
-function scanTypeFloor(html, file, floorPx = TYPE_FLOOR_PX) {
-  const findings = [];
-  const zones = svgZones(html);
-  const small = [];
-  for (const pattern of [CSS_PX, SVG_ATTR]) {
-    pattern.lastIndex = 0;
-    for (const m of html.matchAll(pattern)) {
-      const px = Number(m[1]) * userUnit(zones, m.index);
-      if (px < floorPx) small.push({ px, where: where(html, m.index) });
-    }
-  }
-  if (small.length > 0) {
-    const worst = [...small].sort((a, b) => a.px - b.px);
-    const named = worst.slice(0, 6).map((s) => `${round6(s.px)}px on ${s.where}`).join(", ");
-    findings.push({
-      severity: "error",
-      gate: "typography",
-      rule: "type_below_floor",
-      message: `${file} declares ${small.length} text size(s) under the ${floorPx}px floor: ${named}${worst.length > 6 ? ", \u2026" : ""}. Sizes are in reference space, so this is the floor as authored and not an artefact of the format's zoom. Raise the size, or give the archetype less to say \u2014 a beat that only fits below the floor is a beat that has to be cut in two.`
-    });
-  }
-  const units = [...new Set([...html.matchAll(RELATIVE)].map((m) => m[1]))];
-  if (units.length > 0) {
-    findings.push({
-      severity: "warning",
-      gate: "typography",
-      rule: "type_unmeasurable",
-      message: `${file} sizes some text in ${units.join("/")}, which resolves against an inherited size this scan cannot follow, so the ${floorPx}px floor was not checked there. Declare it in px, or measure it in a browser.`
-    });
-  }
-  return findings;
-}
-function svgZones(html) {
-  const zones = [];
-  for (const m of html.matchAll(/<svg\b([^>]*)>/g)) {
-    const width = Number(/\bwidth="([0-9.]+)"/.exec(m[1])?.[1]);
-    const box = Number(/\bviewBox="[0-9.-]+\s+[0-9.-]+\s+([0-9.]+)/.exec(m[1])?.[1]);
-    const close = html.indexOf("</svg>", m.index);
-    zones.push({
-      start: m.index,
-      end: close < 0 ? html.length : close,
-      unit: width > 0 && box > 0 ? width / box : 1
-    });
-  }
-  return zones;
-}
-function userUnit(zones, at) {
-  return zones.filter((z4) => at >= z4.start && at < z4.end).reduce((unit, z4) => unit * z4.unit, 1);
-}
-function where(html, at) {
-  const open = html.lastIndexOf("<", at);
-  const closed = html.lastIndexOf(">", at);
-  if (open > closed) {
-    const end = html.indexOf(">", at);
-    const tag = html.slice(open, end < 0 ? void 0 : end + 1);
-    const id2 = /\bid="([^"]+)"/.exec(tag)?.[1];
-    if (id2) return `#${id2}`;
-    const name = /^<([a-zA-Z][\w-]*)/.exec(tag)?.[1] ?? "an element";
-    const cls = /\bclass="([^"]+)"/.exec(tag)?.[1]?.split(/\s+/)[0];
-    return cls ? `${name}.${cls}` : name;
-  }
-  const brace = html.lastIndexOf("{", at);
-  if (brace < 0) return "the stylesheet";
-  const from = Math.max(html.lastIndexOf("}", brace), html.lastIndexOf(">", brace));
-  const selector = html.slice(from + 1, brace).trim().split("\n").pop()?.trim();
-  return selector ? selector : "the stylesheet";
-}
-function round6(px) {
-  return Math.round(px * 100) / 100;
-}
-
 // src/verify/drift.ts
 import { execFile as execFile3 } from "node:child_process";
 import { createHash as createHash8 } from "node:crypto";
@@ -10023,6 +10364,10 @@ async function vendorScripts(out) {
     const from = join15(dirname4(require2.resolve(pkg)), rel);
     await cp(from, join15(out, "vendor", name));
   }
+  await cp(
+    fileURLToPath(new URL("./ds-morph.js", import.meta.url)),
+    join15(out, "vendor", "ds-morph.js")
+  );
 }
 var HYPERFRAMES_JSON = `${JSON.stringify(
   {