@kitlangton/knobs 0.4.0-next.1 → 0.4.0-next.2

package/dist/ui.js

@@ -18970,7 +18970,7 @@ var walkthroughCss = `
 .knobs-walkthrough a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px;transition:text-decoration-color .15s}
 .knobs-walkthrough a:hover{text-decoration-color:currentColor}
 .knobs-walkthrough code,.knobs-wt-slot code{font:calc(1em - 1px) var(--_k-mono);padding:1px 5px;border-radius:5px;background:var(--_k-fill)}
-:where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-step){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
+:where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-step,button.knobs-wt-stitle,.knobs-wt-chapter){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
   background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
 
 /* ——— layout: the rail beside the column; one column where it's narrow ——— */
@@ -19029,9 +19029,9 @@ var walkthroughCss = `
 .knobs-wt-fi-body{max-width:var(--kw-measure);color:var(--_k-fg)}
 .knobs-wt-fi-q{color:var(--_k-fg-2)}
 .knobs-wt-fi-q::before{content:"You asked: ";color:var(--_k-fg-3)}
-:where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:var(--_k-weight) calc(var(--kw-text) - 2.5px)/1 var(--_k-mono);color:var(--_k-fg-2);background:transparent;border:0;
+:where(.knobs-ui) :is(.knobs-wt-fi-step,.knobs-wt-steplink){all:revert;box-sizing:border-box;font:var(--_k-weight) calc(var(--k-walkthrough-text,14px) - 2.5px)/1 var(--_k-mono);color:var(--_k-fg-2);background:transparent;border:0;
   padding:3px 6px;margin:0;border-radius:6px;cursor:pointer;outline:none;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-fi-step:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui :is(.knobs-wt-fi-step,.knobs-wt-steplink):is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 
 /* ——— a step's sent notes ——— */
 .knobs-wt-notes{display:flex;flex-direction:column}
@@ -19167,7 +19167,8 @@ var walkthroughCss = `
 }
 
 /* ——— media slots ——— */
-.knobs-ui.knobs-wt-slot{position:relative;min-width:0;container:knobs-wt-slot / inline-size;color:var(--_k-fg);font:var(--_k-weight) var(--k-walkthrough-text,14px)/1.5 var(--_k-font)}
+.knobs-ui.knobs-wt-slot{position:relative;min-width:0;container:knobs-wt-slot / inline-size;color:var(--_k-fg);font:var(--_k-weight) var(--k-walkthrough-text,14px)/1.5 var(--_k-font);
+  --kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info))}
 .knobs-wt-slot-label{display:block;margin:0 0 6px 2px;font:var(--_k-weight-label) calc(var(--k-walkthrough-text,14px) - 3px)/1.3 var(--_k-font);color:var(--_k-fg-2);letter-spacing:.04em;text-transform:uppercase}
 /* A compare is exactly as tall as its pictures at this width, so there's no letterbox: the two
    sides edge to edge (side) or one (overlaid), plus its mode bar, the timeline and their two gaps
@@ -19207,9 +19208,141 @@ var walkthroughCss = `
 .knobs-wt-text{max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
 .knobs-wt-hold{border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill)}
 .knobs-wt-failed{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--_k-fg-3);font-size:calc(var(--k-walkthrough-text,14px) - 2px)}
+
+/* ——— data blocks: history, stack, table, chapters. On the step's card, so no card of their own:
+   hairlines and fills only. Tones read the status tokens; hover fades are the panel's own. ——— */
+:where(.knobs-wt-history,.knobs-wt-stack,.knobs-wt-table,.knobs-wt-chapters){--kw-t:var(--k-walkthrough-text,14px);--kw-line:calc(var(--kw-t) + 6px);--kw-rail:var(--_k-border-strong)}
+:where(.knobs-wt-slot) [data-tone="good"]{--kw-tone:var(--kw-good)}
+:where(.knobs-wt-slot) [data-tone="warn"]{--kw-tone:var(--_k-warn)}
+:where(.knobs-wt-slot) [data-tone="bad"]{--kw-tone:var(--_k-danger)}
+:where(.knobs-wt-slot) [data-tone="info"]{--kw-tone:var(--kw-info)}
+:where(.knobs-wt-slot) [data-tone="dim"]{--kw-tone:var(--_k-fg-3)}
+.knobs-wt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
+.knobs-ui .knobs-wt-tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-2);font:var(--_k-weight) calc(var(--kw-t) - 3px)/1 var(--_k-mono);
+  text-decoration:none;white-space:nowrap;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui a.knobs-wt-tag:is(:hover,:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+
+/* A history: dates down the left, a spine of tone dots joined by a hairline (broken around each
+   dot), the event beside it. Inferred events take a ring for a dot and a dashed tag. */
+.knobs-wt-history{--kw-hy:calc(5px + var(--kw-line) / 2);display:flex;flex-direction:column;gap:18px;font-size:calc(var(--kw-t) - 1px);line-height:var(--kw-line);color:var(--_k-fg)}
+.knobs-wt-hgroup{display:flex;flex-direction:column;gap:6px;min-width:0}
+.knobs-wt-hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
+.knobs-ui .knobs-wt-hheading{margin:0;font:var(--_k-weight-label) calc(var(--kw-t) - 3px)/1.3 var(--_k-font);letter-spacing:.04em;text-transform:uppercase;color:var(--_k-fg-2)}
+.knobs-wt-hsum{color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 2px);font-variant-numeric:tabular-nums}
+.knobs-wt-hlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
+.knobs-wt-hev{display:grid;grid-template-columns:var(--kw-hw,11ch) 14px minmax(0,1fr);grid-template-areas:"when spine main";column-gap:10px;align-items:baseline;padding:5px 0}
+.knobs-wt-hwhen{grid-area:when;display:flex;flex-direction:column;min-width:0;font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
+.knobs-wt-hage{color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 3px);line-height:1.35}
+.knobs-wt-hspine{grid-area:spine;position:relative;align-self:stretch;margin-block:-5px}
+.knobs-wt-hspine::before,.knobs-wt-hspine::after{content:"";position:absolute;left:6.5px;width:1px;background:var(--kw-rail)}
+.knobs-wt-hspine::before{top:0;height:calc(var(--kw-hy) - 6px)}
+.knobs-wt-hspine::after{top:calc(var(--kw-hy) + 6px);bottom:0}
+.knobs-wt-hev:first-child .knobs-wt-hspine::before,.knobs-wt-hev:last-child .knobs-wt-hspine::after{content:none}
+.knobs-wt-hdot{position:absolute;left:3.5px;top:calc(var(--kw-hy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--kw-tone,var(--_k-fg-3))}
+.knobs-wt-hev[data-type="release"] .knobs-wt-hdot{border-radius:1.5px;rotate:45deg;scale:.9}
+.knobs-wt-hev[data-type="audit"] .knobs-wt-hdot{border-radius:1.5px}
+.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-hdot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--kw-tone,var(--_k-fg-3))}
+.knobs-wt-hmain{grid-area:main;display:flex;flex-direction:column;gap:2px;min-width:0}
+.knobs-wt-htitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
+.knobs-wt-prov{padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-3);font:var(--_k-weight) calc(var(--kw-t) - 3.5px)/18px var(--_k-mono);white-space:nowrap}
+.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-prov{background:transparent;color:var(--_k-warn);outline:1px dashed color-mix(in oklch,var(--_k-warn) 50%,transparent);outline-offset:-1px}
+.knobs-ui .knobs-wt-hdetail{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
+@container knobs-wt-slot (max-width:520px){
+  .knobs-wt-hev{grid-template-columns:14px minmax(0,1fr);grid-template-areas:"spine when" "spine main"}
+  .knobs-wt-hwhen{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
+}
+
+/* A stack: the trunk at the top, each PR hanging off the branch it merges into, rails drawn as a
+   git graph (solid, so where two meet they don't darken). A PR with a step goes there on a click. */
+.knobs-wt-stack{--kw-spt:7px;--kw-spb:7px;--kw-sy:calc(var(--kw-spt) + var(--kw-line) / 2);display:flex;flex-direction:column;font-size:calc(var(--kw-t) - 1px);line-height:var(--kw-line);color:var(--_k-fg)}
+.knobs-wt-srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:start;margin:0 -8px;padding:var(--kw-spt) 8px var(--kw-spb);
+  border-radius:max(0px,calc(var(--_k-radius-panel) - 8px));transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-wt-srow[data-trunk]{--kw-spb:0px;grid-template-columns:auto minmax(0,1fr)}
+.knobs-wt-srow[data-go]{cursor:pointer}
+.knobs-wt-srow[data-go]:hover{background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-lanes{display:flex;align-self:stretch;margin-block:calc(var(--kw-spt) * -1) calc(var(--kw-spb) * -1)}
+.knobs-wt-lane{position:relative;flex:none;width:16px}
+.knobs-wt-lane:is([data-rail="pass"],[data-rail="tee"],[data-down])::before{content:"";position:absolute;left:7.5px;top:0;bottom:0;width:1px;background:var(--kw-rail)}
+.knobs-wt-lane[data-down]::before{top:calc(var(--kw-sy) + 3.5px)}
+.knobs-wt-lane:is([data-rail="tee"],[data-rail="end"])::after{content:"";position:absolute;left:7.5px;top:0;width:13px;height:calc(var(--kw-sy) + .5px);border:solid var(--kw-rail);border-width:0 0 1px 1px;border-bottom-left-radius:6px}
+.knobs-wt-lane[data-rail="node"]::after{content:"";position:absolute;left:4.5px;top:calc(var(--kw-sy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--_k-fg-3)}
+.knobs-wt-srow[data-trunk] .knobs-wt-lane[data-rail="node"]::after{background:var(--_k-fg-2)}
+.knobs-wt-trunk{font:var(--_k-weight-label) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2)}
+.knobs-wt-smain{display:flex;flex-direction:column;gap:1px;min-width:0}
+.knobs-wt-sline{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
+.knobs-wt-sord{font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3);white-space:nowrap}
+.knobs-ui .knobs-wt-spr{font:var(--_k-weight-label) calc(var(--kw-t) - 1.5px)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2);text-decoration:none;white-space:nowrap}
+.knobs-ui a.knobs-wt-spr:is(:hover,:focus-visible){color:var(--_k-fg);text-decoration:underline}
+.knobs-ui .knobs-wt-stitle{font-weight:var(--_k-weight-label);line-height:var(--kw-line);color:var(--_k-fg);text-align:left}
+.knobs-ui button.knobs-wt-stitle{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui :is(.knobs-wt-srow[data-go]:hover button.knobs-wt-stitle,button.knobs-wt-stitle:focus-visible){text-decoration-color:color-mix(in oklch,currentColor 45%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-ssummary{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
+.knobs-wt-smeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3)}
+.knobs-wt-delta{display:inline-flex;gap:6px}
+.knobs-wt-add{color:var(--_k-diff-add)}
+.knobs-wt-del{color:var(--_k-diff-del)}
+.knobs-wt-sstatus{margin-top:calc((var(--kw-line) - 20px) / 2)}
+.knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr) auto}
+.knobs-wt-stack[data-flat] .knobs-wt-srow+.knobs-wt-srow{box-shadow:inset 0 1px 0 var(--_k-border)}
+@container knobs-wt-slot (max-width:520px){
+  .knobs-wt-srow:not([data-trunk]){grid-template-columns:auto minmax(0,1fr)}
+  .knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr)}
+  .knobs-wt-sstatus{grid-column:-2;justify-self:start;margin-top:4px}
+}
+
+/* A table: a real one, its head stuck while it scrolls, both ways; edges fade where there's more
+   (the top one under the head), and thin bars show on hover. */
+@property --kw-fade-l{syntax:"<number>";inherits:false;initial-value:1}
+@property --kw-fade-r{syntax:"<number>";inherits:false;initial-value:1}
+@keyframes kw-fade-l{from{--kw-fade-l:1}to{--kw-fade-l:0}}
+@keyframes kw-fade-r{from{--kw-fade-r:0}to{--kw-fade-r:1}}
+.knobs-wt-table{max-height:520px;overflow:auto;overscroll-behavior-x:contain;outline:none;scrollbar-width:thin;scrollbar-color:transparent transparent;
+  transition:scrollbar-color calc(var(--_k-hover-out) * 1ms)}
+.knobs-wt-table:is(:hover,:focus-visible){scrollbar-color:color-mix(in oklch,var(--_k-fg) 28%,transparent) transparent;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-table:focus-visible{box-shadow:inset 0 0 0 2px var(--_k-focus);border-radius:calc(var(--_k-radius-panel) - 4px)}
+@supports (animation-timeline:scroll()){
+  .knobs-wt-table{animation:knobs-fade-a linear both,knobs-fade-b linear both,kw-fade-l linear both,kw-fade-r linear both;animation-duration:auto;
+    animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 24px,calc(100% - 24px) 100%,0 8px,calc(100% - 8px) 100%;
+    --kw-table-mask-y:linear-gradient(to bottom,#000 var(--kw-thead,0px),rgb(0 0 0/var(--knobs-fade-a)) var(--kw-thead,0px),#000 calc(var(--kw-thead,0px) + 20px),#000 calc(100% - 20px),rgb(0 0 0/var(--knobs-fade-b)));
+    --kw-table-mask-x:linear-gradient(to right,rgb(0 0 0/var(--kw-fade-l)),#000 24px,#000 calc(100% - 24px),rgb(0 0 0/var(--kw-fade-r)));
+    -webkit-mask-image:var(--kw-table-mask-y),var(--kw-table-mask-x);mask-image:var(--kw-table-mask-y),var(--kw-table-mask-x);-webkit-mask-composite:source-in;mask-composite:intersect}
+}
+.knobs-wt-table table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:calc(var(--kw-t) - 1.5px);line-height:1.45;font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
+.knobs-wt-table caption{caption-side:bottom;padding-top:8px;text-align:left;color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 2px)}
+.knobs-wt-table th{position:sticky;top:0;padding:0 12px 7px;text-align:left;vertical-align:bottom;font-weight:var(--_k-weight-label);font-size:calc(var(--kw-t) - 2.5px);color:var(--_k-fg-3);white-space:nowrap;
+  background:var(--_k-pane-bg);box-shadow:inset 0 -1px 0 var(--_k-border)}
+.knobs-wt-table td{padding:8px 12px;vertical-align:baseline;box-shadow:inset 0 -1px 0 var(--_k-border)}
+.knobs-wt-table tr:last-child td{box-shadow:none}
+.knobs-wt-table :is(th,td):first-child{padding-left:0}
+.knobs-wt-table :is(th,td):last-child{padding-right:0}
+.knobs-wt-table td:first-child{color:var(--_k-fg)}
+.knobs-wt-table [data-align="right"]{text-align:right}
+.knobs-wt-table [data-align="center"]{text-align:center}
+.knobs-wt-table td[data-mono]{font-family:var(--_k-mono);font-size:calc(var(--kw-t) - 2.5px);color:var(--_k-fg);white-space:nowrap}
+.knobs-wt-table td[data-long]{min-width:24ch}
+.knobs-wt-table td>.knobs-wt-steplink{margin-left:4px}
+.knobs-ui .knobs-wt-table a.knobs-wt-chip{text-decoration:none}
+.knobs-wt-ctone{color:var(--kw-tone)}
+
+/* Chapters: timestamp pills under a video; one highlight springs to the one playing. */
+.knobs-wt-chapters{position:relative;display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
+.knobs-wt-chapter-mark{position:absolute;left:0;top:0;width:0;border-radius:calc(var(--_k-radius) + 2px);background:var(--_k-fill-selected);opacity:0;pointer-events:none;will-change:transform;
+  transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms)}
+.knobs-wt-chapter-mark[data-on]{opacity:1}
+.knobs-ui .knobs-wt-chapter{position:relative;display:inline-flex;align-items:baseline;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:calc(var(--_k-radius) + 2px);color:var(--_k-fg-2);
+  font-size:calc(var(--kw-t) - 2px);line-height:26px;white-space:nowrap;cursor:pointer;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-chapter:hover{background:var(--_ku-wash);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-chapter[aria-current]{background:transparent;color:var(--_k-fg)}
+.knobs-ui .knobs-wt-chapter:focus-visible{box-shadow:inset 0 0 0 2px var(--_k-focus)}
+.knobs-wt-chapter-time{font:var(--_k-weight) calc(var(--kw-t) - 3px)/1 var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3)}
+.knobs-wt-chapter[aria-current] .knobs-wt-chapter-time{color:var(--_k-fg-2)}
 @media(prefers-reduced-motion:reduce){:is(.knobs-walkthrough,.knobs-wt-slot) :where(*,::before,::after){transition-duration:.15s!important;transition-property:opacity,background,color!important}}
 `;
 
+// src/ui/walkthrough-blocks.ts
+init_motion();
+init_look();
+
 // src/ui/walkthrough-model.ts
 var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
 function slug(text) {
@@ -19251,20 +19384,207 @@ function fillMedia(m, base) {
   if (typeof m === "string")
     return mediaOf(resolveSrc(m, base));
   switch (m.kind) {
-    case "compare":
-      return { ...m, before: source2(m.before, base), after: source2(m.after, base) };
-    case "video":
+    case "compare": {
+      const { chapters, ...rest } = m;
       return {
-        ...m,
+        ...rest,
+        before: source2(m.before, base),
+        after: source2(m.after, base),
+        ...chapters?.length ? { chapters: fillChapters(chapters) } : {}
+      };
+    }
+    case "video": {
+      const { chapters, captionsSrc, captions, ...rest } = m;
+      const vtt = captions ?? captionsSrc;
+      return {
+        ...rest,
         src: resolveSrc(m.src, base),
-        ...m.poster ? { poster: resolveSrc(m.poster, base) } : {}
+        ...m.poster ? { poster: resolveSrc(m.poster, base) } : {},
+        ...vtt ? { captions: resolveSrc(vtt, base) } : {},
+        ...chapters?.length ? { chapters: fillChapters(chapters) } : {}
       };
+    }
     case "image":
       return { ...m, src: resolveSrc(m.src, base) };
+    case "history":
+      return { kind: "history", groups: fillHistory(m) };
+    case "stack":
+      return {
+        kind: "stack",
+        ...m.base ? { base: m.base } : {},
+        items: m.items.map(fillStackItem)
+      };
+    case "table":
+      return fillTable(m);
     default:
       return m;
   }
 }
+function fillHistory(m) {
+  const groups = [];
+  if (m.events?.length)
+    groups.push({ events: m.events });
+  for (const g of m.groups ?? [])
+    groups.push({
+      ...g.heading ? { heading: g.heading } : {},
+      ...g.summary ? { summary: g.summary } : {},
+      events: g.events ?? g.rows ?? []
+    });
+  return groups;
+}
+function parseBranch(branch) {
+  if (!branch?.trim())
+    return {};
+  const [head, base] = branch.split(/\s*(?:→|->|=>|⇒)\s*/, 2).map((s) => s.trim());
+  return { ...head ? { head } : {}, ...base ? { base } : {} };
+}
+function parseDelta(delta) {
+  if (delta === undefined || typeof delta === "object")
+    return delta;
+  const m = /\+\s*([\d,_]+)[^\d+]*?[-−–]\s*([\d,_]+)/.exec(delta);
+  if (!m)
+    return delta.trim() || undefined;
+  const n = (s) => Number(s.replace(/[,_]/g, ""));
+  return { add: n(m[1]), del: n(m[2]) };
+}
+function fillStackItem(it) {
+  const parsed = parseBranch(it.branch);
+  const head = parsed.head ?? it.head;
+  const base = parsed.base ?? it.base;
+  const delta = parseDelta(it.delta);
+  const step = it.step ?? it.stepId;
+  const pr = String(it.pr).trim();
+  return {
+    pr: /^\d+$/.test(pr) ? `#${pr}` : pr,
+    ...it.href ? { href: it.href } : {},
+    title: it.title,
+    ...head ? { head } : {},
+    ...base ? { base } : {},
+    ...delta !== undefined ? { delta } : {},
+    ...it.status ? { status: it.status } : {},
+    ...it.tone ? { tone: it.tone } : {},
+    ...it.summary ? { summary: it.summary } : {},
+    ...step ? { step } : {},
+    ...it.order !== undefined && it.order !== "" ? { order: String(it.order) } : {}
+  };
+}
+function stackLayout(m) {
+  const items = m.items;
+  const byHead = new Map;
+  items.forEach((it, i) => it.head && !byHead.has(it.head) && byHead.set(it.head, i));
+  let trunk = m.base ?? null;
+  if (!trunk) {
+    const tally = new Map;
+    for (const it of items)
+      if (it.base && !byHead.has(it.base))
+        tally.set(it.base, (tally.get(it.base) ?? 0) + 1);
+    let best = 0;
+    for (const [b, n] of tally)
+      if (n > best)
+        [trunk, best] = [b, n];
+  }
+  const parentOf = items.map((it, i) => {
+    const p = it.base === undefined ? undefined : byHead.get(it.base);
+    return p === undefined || p === i ? null : p;
+  });
+  items.forEach((_, i) => {
+    const seen = new Set;
+    for (let n = i;n !== null; n = parentOf[n]) {
+      if (seen.has(n)) {
+        const loop = [n];
+        for (let k = parentOf[n];k !== n && k !== null; k = parentOf[k])
+          loop.push(k);
+        parentOf[Math.min(...loop)] = null;
+        break;
+      }
+      seen.add(n);
+    }
+  });
+  const kids = items.map(() => []);
+  const roots = [];
+  parentOf.forEach((p, i) => (p === null ? roots : kids[p]).push(i));
+  const rows = [];
+  const walk = (list, depth, rails) => list.forEach((i, n) => {
+    const it = items[i];
+    const last = n === list.length - 1;
+    const off = parentOf[i] === null && it.base && it.base !== trunk ? it.base : undefined;
+    rows.push({
+      item: it,
+      index: i,
+      depth,
+      parent: parentOf[i],
+      last,
+      rails,
+      children: kids[i].length,
+      ...off ? { offBase: off } : {}
+    });
+    walk(kids[i], depth + 1, [...rails, !last]);
+  });
+  walk(roots, 0, []);
+  return { trunk, rows, flat: !trunk && rows.every((r) => r.depth === 0 && !r.children) };
+}
+var isNum = (c) => typeof c === "number" || typeof c === "object" && typeof c.text === "number";
+function fillCell(c) {
+  if (typeof c !== "object")
+    return { text: String(c) };
+  return { ...c, text: String(c.text) };
+}
+function fillTable(m) {
+  const wrapped = !m.columns.some((c) => c.key === "cells");
+  const raw = m.rows.map((r) => {
+    const keys = Object.keys(r);
+    const cells = r.cells;
+    return wrapped && keys.length === 1 && keys[0] === "cells" && cells && typeof cells === "object" ? cells : r;
+  });
+  const columns = m.columns.map((c) => {
+    const present = raw.map((r) => r[c.key]).filter((v) => v !== undefined && v !== "");
+    const numeric = present.length > 0 && present.every(isNum);
+    return { ...c, align: c.align ?? (numeric ? "right" : "left") };
+  });
+  const rows = raw.map((r) => {
+    const out = {};
+    for (const [k, v] of Object.entries(r))
+      if (v !== undefined && v !== null)
+        out[k] = fillCell(v);
+    return out;
+  });
+  return { kind: "table", columns, rows, ...m.caption ? { caption: m.caption } : {} };
+}
+function fillChapters(chapters) {
+  const id = uniqueIds();
+  const starts = chapters.map((c) => c.start).sort((a, b) => a - b);
+  return chapters.map((c) => {
+    const next = starts.find((s) => s > c.start);
+    const end = c.end ?? (c.duration !== undefined ? Math.round((c.start + c.duration) * 1000) / 1000 : next);
+    return {
+      id: id(c.id ?? slug(c.label)),
+      label: c.label,
+      start: c.start,
+      ...end !== undefined && end > c.start ? { end } : {}
+    };
+  });
+}
+function chapterAt(chapters, time) {
+  let at = -1;
+  chapters.forEach((c, i) => {
+    if (time >= c.start && time < (c.end ?? Infinity) && (at < 0 || c.start >= chapters[at].start))
+      at = i;
+  });
+  return at;
+}
+function clock(seconds) {
+  const t = Math.max(0, Math.floor(seconds));
+  const h = Math.floor(t / 3600);
+  const m = Math.floor(t % 3600 / 60);
+  const s = String(t % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
+}
+function findStep(steps, ref) {
+  if (ref === undefined)
+    return;
+  const r = ref.trim().replace(/^#/, "");
+  return steps.find((s) => s.key === r || s.id === r || s.number === r);
+}
 function linkLabel(href) {
   const pr = /\/(?:pull|issues)\/(\d+)/.exec(href);
   if (pr)
@@ -19321,7 +19641,7 @@ function normalizeWalkthrough(doc) {
     label: k,
     value
   }));
-  const stepRef = (ref) => ref === undefined ? null : steps.find((s) => s.key === ref || s.id === ref || s.number === ref)?.key ?? null;
+  const stepRef = (ref) => findStep(steps, ref)?.key ?? null;
   const feed = sortFeed([
     ...(doc.updates ?? []).map((u) => ({ kind: "update", at: parseAt(u.at), text: u.text, step: stepRef(u.step) })),
     ...(doc.qa ?? []).map((x) => ({
@@ -19488,6 +19808,8 @@ function describeMedia(m) {
     parts.push(`${m.kind} at ${formatTime(m.time)}`);
   else
     parts.push(m.kind);
+  if (m.chapter)
+    parts[0] += ` in “${m.chapter}”`;
   if (m.loop)
     parts.push(`loop ${formatTime(m.loop.start)}–${formatTime(m.loop.end)}`);
   if (m.zoom)
@@ -19647,6 +19969,388 @@ function inlineMarkdown(text) {
   return s.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`);
 }
 
+// src/ui/walkthrough-blocks.ts
+var el = (doc, tag, cls) => {
+  const n = doc.createElement(tag);
+  if (cls)
+    n.className = cls;
+  return n;
+};
+var text = (doc, tag, cls, value) => {
+  const n = el(doc, tag, cls);
+  n.textContent = value;
+  return n;
+};
+var prose = (doc, tag, cls, value) => {
+  const n = el(doc, tag, cls);
+  n.innerHTML = inlineMarkdown(value);
+  return n;
+};
+var link = (doc, cls, label, href) => {
+  if (!href)
+    return text(doc, "span", cls, label);
+  const a = text(doc, "a", cls, label);
+  a.href = href;
+  a.target = "_blank";
+  a.rel = "noreferrer";
+  return a;
+};
+function stepButton(doc, ref, steps) {
+  const s = ref && steps?.find(ref);
+  if (!s || !steps)
+    return null;
+  const b = text(doc, "button", "knobs-wt-steplink", s.number);
+  b.type = "button";
+  b.title = `Go to ${s.number} ${s.title}`;
+  b.setAttribute("aria-label", b.title);
+  b.addEventListener("click", (e) => {
+    e.stopPropagation();
+    steps.go(s.key);
+  });
+  return b;
+}
+var tags = (doc, list) => {
+  if (!list?.length)
+    return null;
+  const row = el(doc, "div", "knobs-wt-tags");
+  for (const e of list)
+    row.append(link(doc, "knobs-wt-tag", e.label, e.href));
+  return row;
+};
+function mountHistory(host, m, steps) {
+  const doc = host.ownerDocument;
+  const root = el(doc, "div", "knobs-wt-history");
+  const longest = Math.max(6, ...m.groups.flatMap((g) => g.events.flatMap((e) => [e.date.length, e.age?.length ?? 0])));
+  root.style.setProperty("--kw-hw", `${Math.min(16, longest + 1)}ch`);
+  for (const g of m.groups) {
+    const group = el(doc, "section", "knobs-wt-hgroup");
+    if (g.heading || g.summary) {
+      const head = el(doc, "header", "knobs-wt-hhead");
+      if (g.heading)
+        head.append(text(doc, "h4", "knobs-wt-hheading", g.heading));
+      if (g.summary)
+        head.append(text(doc, "span", "knobs-wt-hsum", g.summary));
+      group.append(head);
+    }
+    const list = el(doc, "ol", "knobs-wt-hlist");
+    for (const e of g.events)
+      list.append(historyEvent(doc, e, steps));
+    group.append(list);
+    root.append(group);
+  }
+  host.append(root);
+  return { dispose: () => root.remove(), context: () => ({ kind: "history" }) };
+}
+function historyEvent(doc, e, steps) {
+  const li = el(doc, "li", "knobs-wt-hev");
+  if (e.tone)
+    li.dataset.tone = e.tone;
+  if (e.type)
+    li.dataset.type = e.type;
+  if (e.provenance)
+    li.dataset.provenance = e.provenance;
+  const when = el(doc, "div", "knobs-wt-hwhen");
+  when.append(text(doc, "time", "knobs-wt-hdate", e.date));
+  if (e.age)
+    when.append(text(doc, "span", "knobs-wt-hage", e.age));
+  const spine = el(doc, "span", "knobs-wt-hspine");
+  spine.setAttribute("aria-hidden", "true");
+  spine.append(el(doc, "span", "knobs-wt-hdot"));
+  const main = el(doc, "div", "knobs-wt-hmain");
+  const title = el(doc, "div", "knobs-wt-htitle");
+  title.append(text(doc, "span", "knobs-wt-htext", e.title));
+  if (e.provenance || e.source) {
+    const p = text(doc, "span", "knobs-wt-prov", [e.provenance, e.source].filter(Boolean).join(" · "));
+    if (e.provenance === "inferred")
+      p.title = "Inferred from behaviour, not seen in the record";
+    else if (e.provenance === "verified")
+      p.title = "Seen in the record";
+    title.append(p);
+  }
+  const go = stepButton(doc, e.step, steps);
+  if (go)
+    title.append(go);
+  main.append(title);
+  if (e.detail)
+    main.append(prose(doc, "p", "knobs-wt-hdetail", e.detail));
+  const t = tags(doc, e.evidence);
+  if (t)
+    main.append(t);
+  li.append(when, spine, main);
+  return li;
+}
+function mountStack(host, m, steps) {
+  const doc = host.ownerDocument;
+  const layout = stackLayout(m);
+  const root = el(doc, "div", "knobs-wt-stack");
+  root.toggleAttribute("data-flat", layout.flat);
+  const lane = (kind) => {
+    const s = el(doc, "span", "knobs-wt-lane");
+    s.dataset.rail = kind;
+    return s;
+  };
+  const node = (down) => {
+    const s = lane("node");
+    s.toggleAttribute("data-down", down);
+    return s;
+  };
+  const from = layout.trunk ? 0 : 1;
+  if (layout.trunk && layout.rows.length) {
+    const row = el(doc, "div", "knobs-wt-srow");
+    row.dataset.trunk = "";
+    const lanes = el(doc, "span", "knobs-wt-lanes");
+    lanes.setAttribute("aria-hidden", "true");
+    lanes.append(node(true));
+    row.append(lanes, text(doc, "span", "knobs-wt-trunk", layout.trunk));
+    root.append(row);
+  }
+  for (const r of layout.rows) {
+    const it = r.item;
+    const row = el(doc, "div", "knobs-wt-srow");
+    if (!layout.flat) {
+      const lanes = el(doc, "span", "knobs-wt-lanes");
+      lanes.setAttribute("aria-hidden", "true");
+      for (let k = from;k < r.depth; k++)
+        lanes.append(lane(r.rails[k] ? "pass" : "none"));
+      if (r.depth >= from)
+        lanes.append(lane(r.last ? "end" : "tee"));
+      lanes.append(node(r.children > 0));
+      row.append(lanes);
+    }
+    const main = el(doc, "div", "knobs-wt-smain");
+    const line = el(doc, "div", "knobs-wt-sline");
+    if (it.order)
+      line.append(text(doc, "span", "knobs-wt-sord", it.order));
+    line.append(link(doc, "knobs-wt-spr", it.pr, it.href));
+    const target = it.step ? steps?.find(it.step) : null;
+    if (target && steps) {
+      const title = text(doc, "button", "knobs-wt-stitle", it.title);
+      title.type = "button";
+      title.title = `Go to ${target.number} ${target.title}`;
+      title.addEventListener("click", (e) => {
+        e.stopPropagation();
+        steps.go(target.key);
+      });
+      line.append(title);
+      const go = stepButton(doc, it.step, steps);
+      if (go)
+        line.append(go);
+      row.dataset.go = "";
+      row.addEventListener("click", (e) => {
+        const t = e.target;
+        if (t?.closest("a,button"))
+          return;
+        if (doc.getSelection()?.toString())
+          return;
+        steps.go(target.key);
+      });
+    } else
+      line.append(text(doc, "span", "knobs-wt-stitle", it.title));
+    main.append(line);
+    if (it.summary)
+      main.append(prose(doc, "p", "knobs-wt-ssummary", it.summary));
+    const meta = el(doc, "div", "knobs-wt-smeta");
+    if (it.head) {
+      const branch = r.offBase ? `${it.head} → ${r.offBase}` : it.head;
+      meta.append(text(doc, "span", "knobs-wt-sbranch", branch));
+    }
+    if (it.delta !== undefined)
+      meta.append(delta(doc, it.delta));
+    if (meta.childNodes.length)
+      main.append(meta);
+    row.append(main);
+    if (it.status) {
+      const chip = text(doc, "span", "knobs-wt-chip knobs-wt-sstatus", it.status);
+      chip.dataset.tone = it.tone ?? "dim";
+      row.append(chip);
+    }
+    root.append(row);
+  }
+  host.append(root);
+  return { dispose: () => root.remove(), context: () => ({ kind: "stack" }) };
+}
+function delta(doc, d) {
+  const s = el(doc, "span", "knobs-wt-delta");
+  if (typeof d === "string") {
+    s.textContent = d;
+    return s;
+  }
+  const n = (v) => v.toLocaleString("en-US");
+  s.append(text(doc, "span", "knobs-wt-add", `+${n(d.add)}`));
+  s.append(text(doc, "span", "knobs-wt-del", `−${n(d.del)}`));
+  s.setAttribute("aria-label", `${d.add} added, ${d.del} removed`);
+  return s;
+}
+function mountTable(host, m, steps) {
+  const doc = host.ownerDocument;
+  const win = doc.defaultView;
+  const scroller = el(doc, "div", "knobs-wt-table");
+  const table = el(doc, "table");
+  if (m.caption)
+    table.append(text(doc, "caption", "", m.caption));
+  const head = el(doc, "thead");
+  const hr = el(doc, "tr");
+  for (const c of m.columns) {
+    const th = text(doc, "th", "", c.label);
+    th.scope = "col";
+    th.dataset.align = c.align;
+    hr.append(th);
+  }
+  head.append(hr);
+  const body = el(doc, "tbody");
+  for (const r of m.rows) {
+    const tr = el(doc, "tr");
+    for (const c of m.columns) {
+      const td = el(doc, "td");
+      td.dataset.align = c.align;
+      if (c.mono)
+        td.dataset.mono = "";
+      const cell = r[c.key];
+      if (cell) {
+        if (cell.text.length > 40 && !c.mono && !cell.code)
+          td.dataset.long = "";
+        let content;
+        if (cell.badge) {
+          content = link(doc, "knobs-wt-chip", cell.text, cell.href);
+          content.dataset.tone = cell.badge;
+        } else {
+          const inner = cell.code ? text(doc, "code", "", cell.text) : null;
+          if (cell.href) {
+            content = link(doc, "knobs-wt-clink", inner ? "" : cell.text, cell.href);
+            if (inner)
+              content.append(inner);
+          } else
+            content = inner ?? text(doc, "span", "", cell.text);
+          if (cell.tone) {
+            content.classList.add("knobs-wt-ctone");
+            content.dataset.tone = cell.tone;
+          }
+        }
+        td.append(content);
+        const go = stepButton(doc, cell.step, steps);
+        if (go)
+          td.append(go);
+      }
+      tr.append(td);
+    }
+    body.append(tr);
+  }
+  table.append(head, body);
+  scroller.append(table);
+  host.append(scroller);
+  const measure = () => {
+    scroller.style.setProperty("--kw-thead", `${head.offsetHeight}px`);
+    const scrolls = scroller.scrollWidth > scroller.clientWidth + 1 || scroller.scrollHeight > scroller.clientHeight + 1;
+    if (scrolls) {
+      scroller.tabIndex = 0;
+      scroller.setAttribute("role", "region");
+      scroller.setAttribute("aria-label", m.caption ?? "Table");
+    } else {
+      scroller.removeAttribute("tabindex");
+      scroller.removeAttribute("role");
+      scroller.removeAttribute("aria-label");
+    }
+  };
+  const ro = win && "ResizeObserver" in win ? new win.ResizeObserver(measure) : null;
+  ro?.observe(scroller);
+  measure();
+  return {
+    dispose: () => {
+      ro?.disconnect();
+      scroller.remove();
+    },
+    context: () => ({ kind: "table" })
+  };
+}
+var grid = (v) => Math.round(v * 64) / 64;
+function chapterPills(host, chapters, io) {
+  const doc = host.ownerDocument;
+  const win = doc.defaultView;
+  const bar = el(doc, "div", "knobs-wt-chapters");
+  bar.setAttribute("role", "group");
+  bar.setAttribute("aria-label", "Chapters");
+  const mark = el(doc, "span", "knobs-wt-chapter-mark");
+  mark.setAttribute("aria-hidden", "true");
+  bar.append(mark);
+  const pills = chapters.map((c) => {
+    const b = el(doc, "button", "knobs-wt-chapter");
+    b.type = "button";
+    b.append(text(doc, "span", "knobs-wt-chapter-time", clock(c.start)));
+    b.append(text(doc, "span", "knobs-wt-chapter-label", c.label));
+    b.addEventListener("click", () => {
+      io.onEvent?.({ what: "seek", time: Math.round(c.start * 100) / 100, detail: c.label });
+      io.seek(c.start);
+      sync();
+    });
+    bar.append(b);
+    return b;
+  });
+  host.append(bar);
+  const x = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
+  const y = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
+  const w = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
+  const draw = () => {
+    const left = grid(x.x);
+    mark.style.transform = `translate(${left}px,${grid(y.x)}px)`;
+    mark.style.width = `${grid(x.x + w.x) - left}px`;
+  };
+  const loop = frameLoop(win, (dt) => {
+    x.step(dt);
+    y.step(dt);
+    w.step(dt);
+    draw();
+    return !x.resting || !y.resting || !w.resting;
+  });
+  let at = -2;
+  let shown = false;
+  const place = (snap) => {
+    const p = pills[at];
+    if (!p) {
+      mark.removeAttribute("data-on");
+      pills.forEach((b) => b.removeAttribute("aria-current"));
+      shown = false;
+      return;
+    }
+    pills.forEach((b, i) => i === at ? b.setAttribute("aria-current", "true") : b.removeAttribute("aria-current"));
+    const to = [p.offsetLeft, p.offsetTop, p.offsetWidth];
+    if (snap || !shown || reducedMotion(win)) {
+      x.snap(to[0]);
+      y.snap(to[1]);
+      w.snap(to[2]);
+      draw();
+    } else {
+      x.set(to[0]);
+      y.set(to[1]);
+      w.set(to[2]);
+      loop.wake();
+    }
+    mark.style.height = `${p.offsetHeight}px`;
+    mark.dataset.on = "";
+    shown = true;
+  };
+  const sync = () => {
+    const next = chapterAt(chapters, io.now());
+    if (next === at)
+      return;
+    at = next;
+    place(false);
+  };
+  sync();
+  const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => place(true)) : null;
+  ro?.observe(bar);
+  return {
+    sync,
+    get current() {
+      return chapters[at] ?? null;
+    },
+    dispose() {
+      loop.stop();
+      ro?.disconnect();
+      bar.remove();
+    }
+  };
+}
+
 // src/ui/walkthrough-media.ts
 function injectWalkthroughStyles(doc) {
   if (doc.querySelector("style[data-knobs-ui-walkthrough]"))
@@ -19779,8 +20483,25 @@ async function mountCompare(host, m, look, alive, onEvent) {
         onEvent?.({ what: "loop", detail: lastLoop = loopKey });
     }
   });
+  const chapters = m.chapters?.length ? m.chapters : null;
+  if (chapters)
+    c.timeline?.update({
+      markers: chapters.map((ch) => ({ id: ch.id, time: ch.start, label: ch.label }))
+    });
+  const pills = chapters ? chapterPills(host, chapters, {
+    now: () => c.time,
+    seek: (t) => {
+      c.seek(t);
+      c.play();
+    },
+    onEvent
+  }) : null;
   const unlisten = c.timeline?.listen({
-    onSeek: (time, source) => source !== "play" && onEvent?.({ what: "seek", time: round2(time) }),
+    onSeek: (time, source) => {
+      pills?.sync();
+      if (source !== "play")
+        onEvent?.({ what: "seek", time: round2(time) });
+    },
     onPlay: (on) => onEvent?.({ what: on ? "play" : "pause", time: round2(c.time) })
   });
   requestAnimationFrame(() => requestAnimationFrame(() => fit.dataset.settled = ""));
@@ -19802,12 +20523,14 @@ async function mountCompare(host, m, look, alive, onEvent) {
         duration: round2(c.duration),
         playing: c.playing,
         mode: c.mode,
+        ...pills?.current ? { chapter: pills.current.label } : {},
         ...loop ? { loop: { start: round2(loop.start), end: round2(loop.end) } } : {},
         ...zoom ? { zoom: { u: round2(zoom.u), v: round2(zoom.v), w: round2(zoom.w), h: round2(zoom.h) } } : {}
       };
     },
     dispose: () => {
       unlisten?.();
+      pills?.dispose();
       c.dispose();
       fit.remove();
     }
@@ -19831,6 +20554,15 @@ function mountVideo(host, m, onEvent) {
     v.poster = m.poster;
   if (!aspect)
     v.addEventListener("loadedmetadata", () => v.videoWidth && frame.style.setProperty("--kw-aspect", String(v.videoWidth / v.videoHeight)), { once: true });
+  if (m.captions) {
+    const track = doc.createElement("track");
+    track.kind = "captions";
+    track.label = "Captions";
+    track.srclang = doc.documentElement.lang || "en";
+    track.default = true;
+    track.src = m.captions;
+    v.append(track);
+  }
   v.src = m.src;
   v.addEventListener("play", () => onEvent?.({ what: "play", time: round2(v.currentTime) }));
   v.addEventListener("pause", () => onEvent?.({ what: "pause", time: round2(v.currentTime) }));
@@ -19840,6 +20572,18 @@ function mountVideo(host, m, onEvent) {
   });
   frame.append(v);
   host.append(frame);
+  const pills = m.chapters?.length ? chapterPills(host, m.chapters, {
+    now: () => v.currentTime,
+    seek: (t) => {
+      v.currentTime = t;
+      v.play().catch(() => {});
+    },
+    onEvent
+  }) : null;
+  const sync = () => pills?.sync();
+  if (pills)
+    for (const type of ["timeupdate", "seeking", "seeked"])
+      v.addEventListener(type, sync);
   return {
     pause: () => v.pause(),
     seekBy: (d) => {
@@ -19849,9 +20593,11 @@ function mountVideo(host, m, onEvent) {
       kind: "video",
       time: round2(v.currentTime),
       ...Number.isFinite(v.duration) ? { duration: round2(v.duration) } : {},
-      playing: !v.paused
+      playing: !v.paused,
+      ...pills?.current ? { chapter: pills.current.label } : {}
     }),
     dispose: () => {
+      pills?.dispose();
       v.pause();
       v.removeAttribute("src");
       v.load();
@@ -20075,6 +20821,12 @@ function mediaSlot(container, options) {
       case "callout":
       case "text":
         return done(mountProse(host, m));
+      case "history":
+        return done(mountHistory(host, m, options.steps));
+      case "stack":
+        return done(mountStack(host, m, options.steps));
+      case "table":
+        return done(mountTable(host, m, options.steps));
       case "mount": {
         const cleanup = m.mount(host);
         return done({ dispose: () => cleanup ? cleanup() : host.textContent = "" });
@@ -20129,14 +20881,14 @@ function mediaSlot(container, options) {
 var CHECK3 = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
 
 // src/ui/walkthrough.ts
-var el = (doc, tag, cls) => {
+var el2 = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
     n.className = cls;
   return n;
 };
-var prose = (doc, tag, cls, text) => {
-  const n = el(doc, tag, cls);
+var prose2 = (doc, tag, cls, text) => {
+  const n = el2(doc, tag, cls);
   n.innerHTML = inlineMarkdown(text);
   return n;
 };
@@ -20144,7 +20896,7 @@ var lookOf2 = (o) => ({
   ...o.preset ? { preset: o.preset } : {},
   ...o.theme ? { theme: o.theme } : {}
 });
-var grid = (v) => Math.round(v * 64) / 64;
+var grid2 = (v) => Math.round(v * 64) / 64;
 var ICON = {
   full: svg('<path d="M3 6.5V3h3.5M13 6.5V3H9.5M3 9.5V13h3.5M13 9.5V13H9.5"/>'),
   exit: svg('<path d="M6.5 3v3.5H3M9.5 3v3.5H13M6.5 13V9.5H3M9.5 13V9.5H13"/>'),
@@ -20170,7 +20922,7 @@ function tasteTest(container, options) {
     suggested: o.suggested === true
   });
   let picked = options.picked ?? null;
-  const root = el(doc, "div", "knobs-wt-options");
+  const root = el2(doc, "div", "knobs-wt-options");
   root.setAttribute("role", "radiogroup");
   root.setAttribute("aria-label", "Options");
   root.style.setProperty("--kw-n", String(Math.min(list.length, 3)));
@@ -20178,28 +20930,28 @@ function tasteTest(container, options) {
     applyLook2(root, options);
   const slots = [];
   const tiles = list.map((o, i) => {
-    const tile = el(doc, "div", "knobs-wt-option");
-    const pick = el(doc, "button", "knobs-wt-pick");
+    const tile = el2(doc, "div", "knobs-wt-option");
+    const pick = el2(doc, "button", "knobs-wt-pick");
     pick.type = "button";
     pick.setAttribute("role", "radio");
     if (i < 9)
       pick.setAttribute("aria-keyshortcuts", String(i + 1));
-    const letter = el(doc, "span", "knobs-wt-letter");
+    const letter = el2(doc, "span", "knobs-wt-letter");
     letter.textContent = o.letter;
-    const name = el(doc, "span", "knobs-wt-olabel");
+    const name = el2(doc, "span", "knobs-wt-olabel");
     name.textContent = o.label;
     pick.append(letter, name);
     if (o.suggested) {
-      const s = el(doc, "span", "knobs-wt-suggested");
+      const s = el2(doc, "span", "knobs-wt-suggested");
       s.textContent = "Suggested";
       pick.append(s);
     }
     if (i < 9) {
-      const key = el(doc, "span", "knobs-wt-key");
+      const key = el2(doc, "span", "knobs-wt-key");
       key.textContent = String(i + 1);
       pick.append(key);
     }
-    const check = el(doc, "span", "knobs-wt-check");
+    const check = el2(doc, "span", "knobs-wt-check");
     check.innerHTML = CHECK3;
     pick.append(check);
     pick.addEventListener("click", () => {
@@ -20212,10 +20964,11 @@ function tasteTest(container, options) {
       slots.push(mediaSlot(tile, {
         ...look,
         media: o.media,
-        ...options.lazy === false ? { lazy: false } : {}
+        ...options.lazy === false ? { lazy: false } : {},
+        ...options.steps ? { steps: options.steps } : {}
       }));
     if (o.caption)
-      tile.append(prose(doc, "p", "knobs-wt-ocap", o.caption));
+      tile.append(prose2(doc, "p", "knobs-wt-ocap", o.caption));
     root.append(tile);
     return { tile, pick };
   });
@@ -20263,7 +21016,7 @@ function walkthrough(container, options) {
   injectWalkthroughStyles(doc);
   const look = lookOf2(options);
   const storage = options.storage === undefined ? browserStorage() : options.storage;
-  const root = el(doc, "div", "knobs-walkthrough");
+  const root = el2(doc, "div", "knobs-walkthrough");
   applyLook2(root, options);
   container.append(root);
   let page = normalizeWalkthrough(options.doc);
@@ -20323,8 +21076,8 @@ function walkthrough(container, options) {
     if (mark) {
       pillY.step(dt);
       pillH.step(dt);
-      mark.style.transform = `translateY(${grid(pillY.x)}px)`;
-      mark.style.height = `${grid(pillY.x + pillH.x) - grid(pillY.x)}px`;
+      mark.style.transform = `translateY(${grid2(pillY.x)}px)`;
+      mark.style.height = `${grid2(pillY.x + pillH.x) - grid2(pillY.x)}px`;
       more ||= !pillY.resting || !pillH.resting;
     }
     if (scroll.to && scroll.el) {
@@ -20459,6 +21212,10 @@ function walkthrough(container, options) {
     scrollToCard(v);
     v.card.focus({ preventScroll: true });
   };
+  const stepLinks = {
+    find: (ref) => findStep(page.steps, ref) ?? null,
+    go: (key) => go(key)
+  };
   const slotsOf = (v) => v ? [...v.slots, ...v.taste?.slots ?? []] : [];
   const mediaContext = (v) => {
     const slots = slotsOf(v);
@@ -20473,17 +21230,17 @@ function walkthrough(container, options) {
         return true;
     return false;
   };
-  const scrim = el(doc, "div", "knobs-wt-scrim");
+  const scrim = el2(doc, "div", "knobs-wt-scrim");
   scrim.addEventListener("click", () => setFull(false));
   const fullRect = () => ({ x: 12, y: 12, w: win.innerWidth - 24, h: win.innerHeight - 24 });
   const placeFull = (f) => {
     const a = f.hold.getBoundingClientRect();
     const b = fullRect();
     const k = reduced() ? Math.round(f.p.target) : f.p.x;
-    const left = grid(a.left + (b.x - a.left) * k);
-    const top = grid(a.top + (b.y - a.top) * k);
-    const right = grid(a.right + (b.x + b.w - a.right) * k);
-    const bottom = grid(a.bottom + (b.y + b.h - a.bottom) * k);
+    const left = grid2(a.left + (b.x - a.left) * k);
+    const top = grid2(a.top + (b.y - a.top) * k);
+    const right = grid2(a.right + (b.x + b.w - a.right) * k);
+    const bottom = grid2(a.bottom + (b.y + b.h - a.bottom) * k);
     const s = f.v.card.style;
     s.left = `${left}px`;
     s.top = `${top}px`;
@@ -20518,7 +21275,7 @@ function walkthrough(container, options) {
       }
       if (!full) {
         const r = v.card.getBoundingClientRect();
-        const hold = el(doc, "div", "knobs-wt-hold-card");
+        const hold = el2(doc, "div", "knobs-wt-hold-card");
         hold.style.height = `${r.height}px`;
         v.card.before(hold);
         v.card.dataset.full = "";
@@ -20666,7 +21423,7 @@ function walkthrough(container, options) {
       toast("Couldn't reach the microphone", { tone: "warn", look, doc });
     }
   };
-  const backPill = el(doc, "button", "knobs-wt-back");
+  const backPill = el2(doc, "button", "knobs-wt-back");
   backPill.type = "button";
   let backTo = null;
   let backTimer = 0;
@@ -20691,16 +21448,16 @@ function walkthrough(container, options) {
     backTimer = win.setTimeout(hideBack, BACK_MS);
   };
   const bar = (() => {
-    const dock = el(doc, "div", "knobs-wt-dock");
-    const box = el(doc, "div", "knobs-wt-notebar");
-    const on = el(doc, "div", "knobs-wt-on");
-    const row = el(doc, "div", "knobs-wt-row");
-    const input = el(doc, "textarea", "knobs-wt-input");
+    const dock = el2(doc, "div", "knobs-wt-dock");
+    const box = el2(doc, "div", "knobs-wt-notebar");
+    const on = el2(doc, "div", "knobs-wt-on");
+    const row = el2(doc, "div", "knobs-wt-row");
+    const input = el2(doc, "textarea", "knobs-wt-input");
     input.rows = 1;
     input.setAttribute("aria-label", "Note");
-    const attach = el(doc, "div", "knobs-wt-attach");
+    const attach = el2(doc, "div", "knobs-wt-attach");
     const btn = (icon, label, run) => {
-      const b = el(doc, "button", "knobs-wt-tool");
+      const b = el2(doc, "button", "knobs-wt-tool");
       b.type = "button";
       b.innerHTML = icon;
       b.setAttribute("aria-label", label);
@@ -20711,7 +21468,7 @@ function walkthrough(container, options) {
     const fullBtn = btn(ICON.full, "Full window · f", () => setFull(!full));
     const penBtn = btn(ICON.pen, "Draw on the media", () => setInk(!ink.on));
     const micBtn = btn(ICON.mic, "Record a voice note", () => void toggleVoice());
-    const micTime = el(doc, "span", "knobs-wt-rec");
+    const micTime = el2(doc, "span", "knobs-wt-rec");
     micBtn.append(micTime);
     const sendBtn = btn(ICON.send, "Send · Enter", () => send());
     sendBtn.dataset.send = "";
@@ -20737,9 +21494,9 @@ function walkthrough(container, options) {
       }
     });
     const chip = (text, clear) => {
-      const c = el(doc, "span", "knobs-wt-chip-a");
+      const c = el2(doc, "span", "knobs-wt-chip-a");
       c.append(text);
-      const x = el(doc, "button", "knobs-wt-x");
+      const x = el2(doc, "button", "knobs-wt-x");
       x.type = "button";
       x.innerHTML = ICON.close;
       x.setAttribute("aria-label", `Remove ${text}`);
@@ -20852,9 +21609,9 @@ function walkthrough(container, options) {
     }
   };
   const renderNote = (v, n, entering = false) => {
-    const row = el(doc, "div", "knobs-wt-n");
+    const row = el2(doc, "div", "knobs-wt-n");
     row.dataset.id = n.id;
-    const meta = el(doc, "span", "knobs-wt-n-meta");
+    const meta = el2(doc, "span", "knobs-wt-n-meta");
     const m = n.context.media;
     meta.textContent = m?.time !== undefined ? formatTime(m.time) : m?.file ? m.file.split("/").pop() : "·";
     if (m?.time !== undefined) {
@@ -20870,11 +21627,11 @@ function walkthrough(container, options) {
       });
     }
     row.append(meta);
-    const body = el(doc, "div", "knobs-wt-n-body");
+    const body = el2(doc, "div", "knobs-wt-n-body");
     if (n.text)
-      body.append(prose(doc, "p", "knobs-wt-n-text", n.text));
+      body.append(prose2(doc, "p", "knobs-wt-n-text", n.text));
     if (n.voice) {
-      const a = el(doc, "audio", "knobs-wt-n-voice");
+      const a = el2(doc, "audio", "knobs-wt-n-voice");
       a.controls = true;
       a.preload = "none";
       a.src = n.voice.url;
@@ -20894,7 +21651,7 @@ function walkthrough(container, options) {
       body.append(thumb);
     }
     row.append(body);
-    const x = el(doc, "button", "knobs-wt-x");
+    const x = el2(doc, "button", "knobs-wt-x");
     x.type = "button";
     x.innerHTML = ICON.close;
     x.setAttribute("aria-label", "Delete this note");
@@ -20948,22 +21705,22 @@ function walkthrough(container, options) {
     pillPlaced = false;
     root.textContent = "";
     root.removeAttribute("data-settled");
-    const layout = el(doc, "div", "knobs-wt-layout");
-    const main = el(doc, "div", "knobs-wt-main");
-    const head = el(doc, "header", "knobs-wt-head");
-    const h1 = el(doc, "h1", "knobs-wt-title");
+    const layout = el2(doc, "div", "knobs-wt-layout");
+    const main = el2(doc, "div", "knobs-wt-main");
+    const head = el2(doc, "header", "knobs-wt-head");
+    const h1 = el2(doc, "h1", "knobs-wt-title");
     h1.textContent = page.title;
     head.append(h1);
     if (page.summary)
-      head.append(prose(doc, "p", "knobs-wt-summary", page.summary));
+      head.append(prose2(doc, "p", "knobs-wt-summary", page.summary));
     if (page.meta.length) {
-      const meta = el(doc, "div", "knobs-wt-meta");
+      const meta = el2(doc, "div", "knobs-wt-meta");
       for (const m of page.meta) {
-        const s = el(doc, "span");
+        const s = el2(doc, "span");
         s.append(m.label);
-        const b = el(doc, "b");
+        const b = el2(doc, "b");
         if (m.href) {
-          const a = el(doc, "a");
+          const a = el2(doc, "a");
           a.href = m.href;
           a.target = "_blank";
           a.rel = "noreferrer";
@@ -20978,27 +21735,27 @@ function walkthrough(container, options) {
     }
     main.append(head);
     if (page.feed.length) {
-      const feed = el(doc, "section", "knobs-wt-feed");
+      const feed = el2(doc, "section", "knobs-wt-feed");
       feed.setAttribute("aria-label", "Latest");
-      const list = el(doc, "ol", "knobs-wt-feed-list knobs-scroll-fade");
+      const list = el2(doc, "ol", "knobs-wt-feed-list knobs-scroll-fade");
       const now = Date.now();
       for (const f of page.feed) {
-        const li = el(doc, "li", "knobs-wt-fi");
+        const li = el2(doc, "li", "knobs-wt-fi");
         li.dataset.kind = f.kind;
-        const when = el(doc, "span", "knobs-wt-fi-when");
+        const when = el2(doc, "span", "knobs-wt-fi-when");
         when.textContent = f.at === null ? "" : ago(f.at, now);
         if (f.at !== null)
           when.title = new Date(f.at).toLocaleString();
-        const kind = el(doc, "span", "knobs-wt-fi-kind");
+        const kind = el2(doc, "span", "knobs-wt-fi-kind");
         kind.textContent = f.kind === "qa" ? "Answer" : "Update";
-        const body = el(doc, "div", "knobs-wt-fi-body");
+        const body = el2(doc, "div", "knobs-wt-fi-body");
         if (f.q)
-          body.append(prose(doc, "p", "knobs-wt-fi-q", f.q));
-        body.append(prose(doc, "p", "knobs-wt-fi-text", f.text));
+          body.append(prose2(doc, "p", "knobs-wt-fi-q", f.q));
+        body.append(prose2(doc, "p", "knobs-wt-fi-text", f.text));
         li.append(when, kind, body);
         if (f.step) {
           const target = f.step;
-          const link = el(doc, "button", "knobs-wt-fi-step");
+          const link = el2(doc, "button", "knobs-wt-fi-step");
           link.type = "button";
           link.textContent = page.steps.find((s) => s.key === target)?.number ?? "";
           link.title = "Go to the step";
@@ -21013,33 +21770,33 @@ function walkthrough(container, options) {
     let rail = null;
     count = fill = tocEl = mark = null;
     if (options.rail !== false) {
-      rail = el(doc, "aside", "knobs-wt-rail");
+      rail = el2(doc, "aside", "knobs-wt-rail");
       rail.setAttribute("aria-label", "Progress");
-      const progress = el(doc, "div", "knobs-wt-progress");
-      count = el(doc, "div", "knobs-wt-count");
-      const meter = el(doc, "div", "knobs-wt-bar");
-      fill = el(doc, "div", "knobs-wt-fill");
+      const progress = el2(doc, "div", "knobs-wt-progress");
+      count = el2(doc, "div", "knobs-wt-count");
+      const meter = el2(doc, "div", "knobs-wt-bar");
+      fill = el2(doc, "div", "knobs-wt-fill");
       meter.append(fill);
       progress.append(count, meter);
-      tocEl = el(doc, "nav", "knobs-wt-toc");
+      tocEl = el2(doc, "nav", "knobs-wt-toc");
       tocEl.setAttribute("aria-label", "Contents");
-      mark = el(doc, "div", "knobs-wt-toc-mark");
+      mark = el2(doc, "div", "knobs-wt-toc-mark");
       tocEl.append(mark);
       rail.append(progress, tocEl, actions(true));
       if (options.keys !== false) {
-        const keys = el(doc, "div", "knobs-wt-keys");
+        const keys = el2(doc, "div", "knobs-wt-keys");
         keys.innerHTML = "<kbd>j</kbd> <kbd>k</kbd> steps · <kbd>←</kbd> <kbd>→</kbd> seek · <kbd>f</kbd> full · <kbd>n</kbd> note" + (page.steps.some((s) => s.ask === "pick") ? " · <kbd>1</kbd>–<kbd>9</kbd> pick" : "");
         rail.append(keys);
       }
     }
     for (const section of page.sections) {
-      const sec = el(doc, "section", "knobs-wt-section");
+      const sec = el2(doc, "section", "knobs-wt-section");
       sec.id = `wt-${section.id}`;
-      const sh = el(doc, "header", "knobs-wt-shead");
+      const sh = el2(doc, "header", "knobs-wt-shead");
       if (section.link || section.status) {
-        const kicker = el(doc, "div", "knobs-wt-kicker");
+        const kicker = el2(doc, "div", "knobs-wt-kicker");
         if (section.link) {
-          const a = el(doc, "a");
+          const a = el2(doc, "a");
           a.href = section.link.href;
           a.target = "_blank";
           a.rel = "noreferrer";
@@ -21048,21 +21805,21 @@ function walkthrough(container, options) {
         }
         if (section.status) {
           const s = statusLook(section.status);
-          const chip = el(doc, "span", "knobs-wt-chip");
+          const chip = el2(doc, "span", "knobs-wt-chip");
           chip.dataset.tone = s.tone;
           chip.textContent = s.label;
           kicker.append(chip);
         }
         sh.append(kicker);
       }
-      const h2 = el(doc, "h2", "knobs-wt-stitle");
+      const h2 = el2(doc, "h2", "knobs-wt-stitle");
       h2.textContent = section.title;
       sh.append(h2);
       if (section.summary)
-        sh.append(prose(doc, "p", "knobs-wt-ssum", section.summary));
+        sh.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
       sec.append(sh);
       if (tocEl) {
-        const t = el(doc, "div", "knobs-wt-toc-section");
+        const t = el2(doc, "div", "knobs-wt-toc-section");
         t.textContent = section.link ? `${section.link.label} ${section.title}` : section.title;
         t.title = section.title;
         tocEl.append(t);
@@ -21095,9 +21852,9 @@ function walkthrough(container, options) {
     }));
   };
   const actions = (rail) => {
-    const row = el(doc, "div", "knobs-wt-actions");
+    const row = el2(doc, "div", "knobs-wt-actions");
     const btn = (text, run, primary = false) => {
-      const b = el(doc, "button", "knobs-wt-btn");
+      const b = el2(doc, "button", "knobs-wt-btn");
       b.type = "button";
       b.textContent = text;
       if (primary)
@@ -21135,43 +21892,44 @@ function walkthrough(container, options) {
     }
   };
   const stepView = (step) => {
-    const card = el(doc, "article", "knobs-wt-step knobs-surface");
+    const card = el2(doc, "article", "knobs-wt-step knobs-surface");
     card.id = `wt-${step.key.replace("/", "--")}`;
     card.tabIndex = -1;
     card.dataset.key = step.key;
     card.setAttribute("aria-label", `${step.number} ${step.title}`);
-    const head = el(doc, "header", "knobs-wt-step-head");
-    const num = el(doc, "span", "knobs-wt-num");
+    const head = el2(doc, "header", "knobs-wt-step-head");
+    const num = el2(doc, "span", "knobs-wt-num");
     num.textContent = step.number;
-    const h3 = el(doc, "h3", "knobs-wt-stepTitle");
+    const h3 = el2(doc, "h3", "knobs-wt-stepTitle");
     h3.textContent = step.title;
     head.append(num, h3);
     card.append(head);
     if (step.caption)
-      card.append(prose(doc, "p", "knobs-wt-caption", step.caption));
+      card.append(prose2(doc, "p", "knobs-wt-caption", step.caption));
     const slots = [];
     const onEvent = (e) => record({ ...e, step: step.key });
     let media = null;
     if (step.media.length) {
-      media = el(doc, "div", "knobs-wt-media");
+      media = el2(doc, "div", "knobs-wt-media");
       media.style.setProperty("--kw-n", String(Math.min(step.media.length, 3)));
       for (const m of step.media)
-        slots.push(mediaSlot(media, { ...look, media: m, onEvent }));
+        slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks }));
       card.append(media);
     }
     let taste = null;
     if (step.question)
-      card.append(prose(doc, "p", "knobs-wt-question", step.question));
+      card.append(prose2(doc, "p", "knobs-wt-question", step.question));
     if (step.ask === "pick") {
       taste = tasteTest(card, {
         ...look,
         options: step.options,
         picked: state.steps[step.key]?.pick ?? null,
-        onPick: (id) => pick(step.key, id)
+        onPick: (id) => pick(step.key, id),
+        steps: stepLinks
       });
       media ??= taste.element;
     }
-    const notes = el(doc, "div", "knobs-wt-notes");
+    const notes = el2(doc, "div", "knobs-wt-notes");
     card.append(notes);
     card.addEventListener("focusin", () => {
       if (scroll.to)
@@ -21182,10 +21940,10 @@ function walkthrough(container, options) {
     let toc = null;
     let glyph = null;
     if (tocEl) {
-      toc = el(doc, "button", "knobs-wt-toc-step");
+      toc = el2(doc, "button", "knobs-wt-toc-step");
       toc.type = "button";
-      glyph = el(doc, "span", "knobs-wt-toc-glyph");
-      const label = el(doc, "span", "knobs-wt-toc-label");
+      glyph = el2(doc, "span", "knobs-wt-toc-glyph");
+      const label = el2(doc, "span", "knobs-wt-toc-label");
       label.textContent = step.title;
       toc.title = `${step.number} ${step.title}`;
       toc.append(glyph, label);
@@ -21445,6 +22203,7 @@ export {
   solve2 as solveSplit,
   split,
   splitPath,
+  stackLayout,
   stackRows,
   stepFile,
   stepItem,