@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/mockup/schema.js

@@ -0,0 +1,90 @@
+/**
+ * Params schema for the mockup block (agent HTML in sandboxed device frames).
+ * Imported by block.ts (def) and the tests — keeps them cycle-free.
+ */
+import { z } from "zod";
+/**
+ * Block-level `device` is author shorthand (mos-659rz): `device: "desktop"`
+ * on the params means "every variant that does not name its own device
+ * renders as desktop". It is not a MockupParams field, so zod would
+ * otherwise silently strip it — the Pilot's shorthand passed validation while
+ * the device intent never reached the renderer. Inherit it into device-less
+ * variants BEFORE parsing (so the variant default never preempts it), copy
+ * the objects (never mutate the caller's input — publish stores the spec
+ * verbatim), and drop the block-level key. A variant's own device wins; a
+ * non-enum shorthand value falls through to the variant enum and is
+ * rejected loudly, like any other bad device.
+ */
+function inheritBlockDevice(raw) {
+    if (typeof raw !== "object" || raw === null)
+        return raw;
+    const params = { ...raw };
+    const shorthand = params.device;
+    if (typeof shorthand !== "string" || !Array.isArray(params.variants))
+        return params;
+    delete params.device;
+    params.variants = params.variants.map((v) => typeof v === "object" &&
+        v !== null &&
+        v.device === undefined
+        ? { ...v, device: shorthand }
+        : v);
+    return params;
+}
+const ID_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/;
+const idSchema = z
+    .string()
+    .regex(ID_RE, "id must be lowercase a-z0-9_- (max 64, leading a-z0-9)");
+/** Per-variant HTML cap — a device-frame mockup is chrome + layout, not data. */
+const MAX_VARIANT_HTML_BYTES = 48 * 1024;
+/** Whole-block HTML budget — the contract's ~256KB-per-block params cap. */
+const MAX_TOTAL_HTML_BYTES = 256 * 1024;
+const MAX_VARIANTS = 6;
+function utf8Bytes(s) {
+    return new TextEncoder().encode(s).length;
+}
+const variantSchema = z.object({
+    id: idSchema,
+    label: z.string().max(80).optional(),
+    device: z.enum(["phone", "tablet", "desktop"]).default("phone"),
+    html: z
+        .string()
+        .min(1, "html is required")
+        .refine((h) => utf8Bytes(h) <= MAX_VARIANT_HTML_BYTES, `html exceeds ${Math.round(MAX_VARIANT_HTML_BYTES / 1024)}KB per variant`),
+});
+const mockupSchemaBase = z
+    .object({
+    title: z.string().max(200).optional(),
+    intro: z.string().max(2000).optional(),
+    /** Allow scripts inside the sandboxed frame. Default false. */
+    allowScripts: z.boolean().default(false),
+    variants: z
+        .array(variantSchema)
+        .min(1, "at least one variant")
+        .max(MAX_VARIANTS),
+})
+    .check((ctx) => {
+    const value = ctx.value;
+    const ids = new Set();
+    let total = 0;
+    value.variants.forEach((v, i) => {
+        if (ids.has(v.id)) {
+            ctx.issues.push({
+                code: "custom",
+                input: v,
+                path: ["variants", i, "id"],
+                message: `duplicate variant id "${v.id}"`,
+            });
+        }
+        ids.add(v.id);
+        total += utf8Bytes(v.html);
+        if (total > MAX_TOTAL_HTML_BYTES) {
+            ctx.issues.push({
+                code: "custom",
+                input: v,
+                path: ["variants", i, "html"],
+                message: `html exceeds the ${Math.round(MAX_TOTAL_HTML_BYTES / 1024)}KB whole-block budget`,
+            });
+        }
+    });
+});
+export const mockupSchema = z.preprocess(inheritBlockDevice, mockupSchemaBase);

package/dist/artifact-blocks/blocks/mockup/types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * mockup param types (mos-vzame) — the hand-written mirror of the zod schema
+ * in block.ts. The def annotates `schema: z.ZodType<MockupParams>`, so drift
+ * between schema and these interfaces is a compile error, and the Svelte
+ * component imports types WITHOUT importing the def module (block.ts imports
+ * the component; the edge must stay one-way).
+ */
+/** Display widths, device-pixel viewports, and the largest on-screen frame. */
+export type MockupDims = {
+    w: number;
+    h: number;
+    maxFrameW: number;
+};
+export type MockupDevice = "phone" | "tablet" | "desktop";
+/**
+ * Device-pixel viewport each frame renders. The frame scales the iframe down
+ * to its on-screen width (see MockupBlock.svelte), so the layout INSIDE the
+ * frame is laid out at the real device width, not the column width.
+ */
+export declare const MOCKUP_DIMS: Record<MockupDevice, MockupDims>;
+export type MockupVariant = {
+    id: string;
+    label?: string | undefined;
+    /** Which device frame this variant renders in. Default "phone". */
+    device: MockupDevice;
+    /** HTML fragment or full document, rendered verbatim in the sandbox. */
+    html: string;
+};
+export type MockupParams = {
+    title?: string | undefined;
+    intro?: string | undefined;
+    /** Allow scripts inside the sandboxed frame. Default false. */
+    allowScripts?: boolean | undefined;
+    /** One or more mockups, rendered side by side. */
+    variants: MockupVariant[];
+};

package/dist/artifact-blocks/blocks/mockup/types.js

@@ -0,0 +1,17 @@
+/**
+ * mockup param types (mos-vzame) — the hand-written mirror of the zod schema
+ * in block.ts. The def annotates `schema: z.ZodType<MockupParams>`, so drift
+ * between schema and these interfaces is a compile error, and the Svelte
+ * component imports types WITHOUT importing the def module (block.ts imports
+ * the component; the edge must stay one-way).
+ */
+/**
+ * Device-pixel viewport each frame renders. The frame scales the iframe down
+ * to its on-screen width (see MockupBlock.svelte), so the layout INSIDE the
+ * frame is laid out at the real device width, not the column width.
+ */
+export const MOCKUP_DIMS = {
+    phone: { w: 390, h: 844, maxFrameW: 320 },
+    tablet: { w: 834, h: 1112, maxFrameW: 460 },
+    desktop: { w: 1440, h: 900, maxFrameW: 760 },
+};

package/dist/artifact-blocks/blocks/program/ProgramBlock.svelte

@@ -0,0 +1,359 @@
+<script lang="ts">
+  /**
+   * ProgramBlock — the daily newspaper/podcast surface: a brief (audio or
+   * video) whose chapter rail plays live on the right while the active
+   * chapter's visual renders between the player and the transcript.
+   *
+   * The player owns the hard parts (jatui VideoPlayer ≥0.32): the timeline
+   * band with chapter flags, the click-to-seek transcript, and the opt-in
+   * `chapterRail: 'side'` pane — active row tracking the playhead, progress
+   * fill, played checks, replay affordance, listNav keys. This block adds
+   * only what the page knows:
+   *
+   *   - the visual panel in the player's `belowStage` slot: the shown
+   *     chapter's nested block instance (any registered type) + its detail
+   *     markdown, swapped with a keyed fade (reduced-motion safe);
+   *   - FOLLOW mode (default on) tracks the active chapter as audio plays;
+   *     the panel header says "Now playing". Clicking a rail row pins that
+   *     chapter, and a "Back to now playing" button returns to auto;
+   *   - ONE timeline: `transport="band"` puts play/pause, time, speed and
+   *     volume on the band (no native control bar), and audio renders no
+   *     stage at all (`kind="audio"`, jatui ≥0.33);
+   *   - nested interactive state (a decision/checklist/picker visual's
+   *     picks) persists through THIS block's ctx.saveState under a
+   *     `visuals` map keyed by the nested block id, and seeds the nested
+   *     BlockRenderer on load;
+   *   - deep links: `?t=` via the player's syncUrlTime; `#chapter-<id>`
+   *     seeks through the player's seekToTime() and shows the chapter.
+   *
+   * Every string renders as text or through the shared sanitized markdown
+   * renderer; media is by URL (https:// or root-relative, validated by
+   * urlSchema).
+   */
+  import { onDestroy, onMount } from "svelte"
+  import VideoPlayer, { type VideoChapter } from "../../../components/VideoPlayer.svelte"
+  import BlockRenderer from "../../BlockRenderer.svelte"
+  import type { BlockProps, BlockState } from "../../types.js"
+  import {
+    chapterAt,
+    programSchema,
+    STATUS_DOT,
+    STATUS_LABEL,
+    toVideoChapters,
+    toVideoSegments,
+    type ProgramParams,
+  } from "./schema.js"
+  import { renderBlockMarkdown } from "../markdown/render.js"
+  import { formatClock } from "../transcript/schema.js"
+
+  /** SSR vs browser, without a SvelteKit import (jatui is host-agnostic). */
+  const browser = typeof window !== "undefined"
+
+  let { params: rawParams, ctx }: BlockProps<ProgramParams> = $props()
+
+  /** Parsed params (defaults filled); corrupt params → empty state. The host
+   * validates at publish, so this is belt-and-braces for direct mounts. */
+  const EMPTY_PARAMS: ProgramParams = {
+    media: { src: "https://example.invalid/none.mp3", type: "audio" },
+    segments: [],
+    chapters: [],
+  }
+  const parsed = $derived(programSchema.safeParse(rawParams))
+  const params = $derived(parsed.success ? parsed.data : EMPTY_PARAMS)
+
+  const playable = $derived(
+    params.segments.length > 0 && params.chapters.length > 0,
+  )
+  /** Audio renders NO stage (there is no picture): the player is the band
+   * plus its transport row. Video keeps its stage at its intrinsic ratio. */
+  const kind = $derived<"audio" | "video">(
+    params.media.type === "video" ? "video" : "audio",
+  )
+  const vSegments = $derived(toVideoSegments(params.segments))
+  const vChapters = $derived(toVideoChapters(params.chapters, params.segments))
+  /** Rail-row index → chapter: the player reports the SORTED index. */
+  const sortedChapters = $derived(
+    params.chapters.slice().sort((a, b) => a.start - b.start),
+  )
+  const hasSrc = $derived(params.media.src !== "" && playable)
+  const firstChapter = $derived(sortedChapters[0] ?? null)
+
+  const resumeKey = $derived(`artifact:${ctx.artifactId}:${ctx.blockId}`)
+
+  // ── follow / pin ─────────────────────────────────────────────────────
+  let follow = $state(true)
+  let pinnedId = $state<string | null>(null)
+  let currentTime = $state(0)
+  /** The player instance — bandState/seekToTime exports live here. */
+  let player: ReturnType<typeof VideoPlayer> | null = $state(null)
+
+  const activeChapter = $derived(chapterAt(params.chapters, currentTime))
+  /** The chapter the panel shows: the active one while following, else the pin. */
+  const shownChapter = $derived(
+    follow || !pinnedId
+      ? activeChapter
+      : (params.chapters.find((c) => c.id === pinnedId) ?? activeChapter),
+  )
+  const shownId = $derived(shownChapter?.id ?? null)
+
+  /** Rail row click: pin the picked chapter (the rail itself keeps
+   * time-tracking — the pin only affects the visual panel). */
+  function selectChapter(_ch: VideoChapter, index: number) {
+    const c = sortedChapters[index]
+    if (!c) return
+    pinnedId = c.id
+    follow = false
+  }
+
+  function toggleFollow() {
+    if (follow) {
+      // Turning follow off pins what is on screen right now.
+      pinnedId = activeChapter?.id ?? pinnedId
+      follow = false
+    } else {
+      follow = true
+      pinnedId = null
+    }
+  }
+
+  // ── deep links (?t= rides the player's syncUrlTime) ─────────────────
+  function chapterFromHash(): string | null {
+    if (!location.hash.startsWith("#chapter-")) return null
+    return decodeURIComponent(location.hash.slice("#chapter-".length)) || null
+  }
+
+  function seekToChapterId(id: string | null): boolean {
+    if (!id) return false
+    const ch = params.chapters.find((c) => c.id === id)
+    if (!ch) return false
+    currentTime = ch.start
+    player?.seekToTime?.(ch.start)
+    return true
+  }
+
+  function onHashChange() {
+    seekToChapterId(chapterFromHash())
+  }
+
+  onMount(() => {
+    if (!browser) return
+    const hashId = chapterFromHash()
+    if (hashId) {
+      seekToChapterId(hashId)
+    } else {
+      const t = new URL(location.href).searchParams.get("t")
+      if (t != null && t !== "") {
+        const sec = Number(t)
+        if (Number.isFinite(sec) && sec >= 0) currentTime = sec
+      }
+    }
+    window.addEventListener("hashchange", onHashChange)
+  })
+  onDestroy(() => {
+    if (browser) window.removeEventListener("hashchange", onHashChange)
+  })
+
+  // ── nested visual state (picks persist through THIS block's state) ──
+  interface ProgramState extends BlockState {
+    visuals?: Record<string, BlockState>
+  }
+  let visualState = $state<Record<string, BlockState>>({})
+  // Seed once from the viewer's saved state (only when there is any). The
+  // outer renderer's state arrives as a $state proxy — snapshot before the
+  // structuredClone.
+  let seeded = false
+  $effect(() => {
+    if (seeded) return
+    const saved = (ctx.state as ProgramState | null)?.visuals
+    if (saved && typeof saved === "object") {
+      visualState = structuredClone($state.snapshot(saved))
+      seeded = true
+    }
+  })
+
+  /** The nested BlockRenderer's save hook: merge into this block's state. */
+  async function saveVisualState(payload: {
+    kind: "blocks"
+    blocks: Record<string, unknown>
+  }) {
+    visualState = { ...visualState, ...payload.blocks }
+    // Snapshot before handing it up: a $state proxy must never cross the
+    // renderer boundary (the DataCloneError class of bug — mos-yntqm); the
+    // outer renderer stores $state.snapshot of what it receives.
+    const next: ProgramState = { visuals: $state.snapshot(visualState) }
+    await ctx.saveState?.(next)
+  }
+
+  const nestedId = $derived(shownId ? `visual-${shownId}` : null)
+  const nestedSpec = $derived.by(() => {
+    const v = shownChapter?.visual
+    if (!v || !nestedId) return null
+    return {
+      version: 1 as const,
+      title: "",
+      blocks: [{ id: nestedId, type: v.type, params: v.params }],
+    }
+  })
+
+  /** Nested state flows through only when this surface can save at all. */
+  const nestedCanSave = $derived(!ctx.readonly && ctx.saveState != null)
+
+  const detailHtml = $derived(
+    shownChapter?.detail ? renderBlockMarkdown(shownChapter.detail) : null,
+  )
+</script>
+
+<section class="artifact-program w-full">
+  {#if params.title || params.note}
+    <header class="mb-3">
+      {#if params.title}
+        <h2 class="text-base font-semibold text-base-content">
+          {params.title}
+        </h2>
+      {/if}
+      {#if params.note}
+        <p class="mt-1 max-w-prose text-sm text-base-content/70">
+          {params.note}
+        </p>
+      {/if}
+    </header>
+  {/if}
+
+  {#if hasSrc}
+    <VideoPlayer
+      bind:this={player}
+      src={params.media.src}
+      {kind}
+      transport="band"
+      poster={params.media.poster || null}
+      aspect={null}
+      transcript={vSegments}
+      chapters={vChapters}
+      transcriptPosition="below"
+      transcriptMaxHeight="24rem"
+      chapterRail="side"
+      onChapterSelect={selectChapter}
+      onTimeUpdate={(v) => (currentTime = v.currentTime)}
+      syncUrlTime
+      {resumeKey}
+      belowStage={panel}
+    />
+
+    {#snippet panel()}
+      {#if shownChapter}
+        <div
+          class="program-panel rounded-box border border-base-content/10 bg-base-100"
+          role="region"
+          aria-label="Chapter: {shownChapter.title}"
+        >
+          <header
+            class="flex flex-wrap items-center gap-x-2 gap-y-1 px-4 pt-3 pb-2"
+          >
+            {#if shownChapter.status}
+              <span
+                class="size-2 shrink-0 rounded-full {STATUS_DOT[
+                  shownChapter.status
+                ]}"
+                aria-hidden="true"
+              ></span>
+              <span class="sr-only">{STATUS_LABEL[shownChapter.status]}:</span>
+            {/if}
+            <span class="text-xs tabular-nums text-base-content/60">
+              {formatClock(shownChapter.start)}
+            </span>
+            <h3 class="min-w-0 flex-1 text-sm font-semibold text-base-content">
+              {shownChapter.title}
+            </h3>
+            {#if follow}
+              <span
+                class="program-follow flex items-center gap-1.5 text-xs text-base-content/60"
+              >
+                <span
+                  class="program-live size-1.5 rounded-full bg-primary"
+                  aria-hidden="true"
+                ></span>
+                Now playing
+              </span>
+            {:else}
+              <button
+                type="button"
+                class="program-follow btn btn-ghost btn-xs rounded-field text-primary"
+                onclick={toggleFollow}
+              >
+                Back to now playing
+              </button>
+            {/if}
+          </header>
+          {#if shownId}
+            {#key shownId}
+              <div class="program-panel-body px-4 pb-4">
+                {#if detailHtml}
+                  <!-- Sanitized by renderBlockMarkdown — the contract's one {@html} path. -->
+                  <div
+                    class="program-detail prose prose-sm max-w-prose text-base-content/80"
+                  >
+                    {@html detailHtml}
+                  </div>
+                {:else if !nestedSpec && shownChapter.summary}
+                  <p class="max-w-prose text-sm text-base-content/70">
+                    {shownChapter.summary}
+                  </p>
+                {/if}
+                {#if nestedSpec}
+                  <div class={detailHtml ? "mt-3" : ""}>
+                    <BlockRenderer
+                      spec={nestedSpec}
+                      artifactId={ctx.artifactId}
+                      version={ctx.version}
+                      savedBlocks={$state.snapshot(visualState)}
+                      onSaveBlock={nestedCanSave ? saveVisualState : undefined}
+                      readonly={ctx.readonly}
+                      data={ctx.data}
+                    />
+                  </div>
+                {/if}
+              </div>
+            {/key}
+          {/if}
+        </div>
+      {:else if firstChapter}
+        <p class="px-1 text-sm text-base-content/60">
+          The first chapter, {firstChapter.title}, starts at {formatClock(
+            firstChapter.start,
+          )}.
+        </p>
+      {/if}
+    {/snippet}
+  {:else if !playable}
+    <p class="text-sm text-base-content/60">
+      No chapters published for this program block.
+    </p>
+  {/if}
+</section>
+
+<style>
+  /* The keyed panel swap: a short opacity/lift-in. Every state also reads
+	   statically (content is simply there), so reduced motion drops the move
+	   and keeps the meaning. */
+  .program-panel-body {
+    animation: program-panel-in var(--motion-fast, 150ms)
+      var(--motion-glide, ease-out);
+  }
+
+  @keyframes program-panel-in {
+    from {
+      opacity: 0;
+      transform: translateY(3px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .program-panel-body {
+      animation: none;
+    }
+  }
+</style>

package/dist/artifact-blocks/blocks/program/ProgramBlock.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { BlockProps } from "../../types.js";
+declare const ProgramBlock: import("svelte").Component<BlockProps<{
+    media: {
+        src: string;
+        type?: "audio" | "video" | undefined;
+        poster?: string | undefined;
+    };
+    segments: {
+        start: number;
+        end: number;
+        speaker: string;
+        text: string;
+        chapter?: string | undefined;
+    }[];
+    chapters: {
+        id: string;
+        title: string;
+        start: number;
+        end?: number | undefined;
+        status?: "warn" | "info" | "good" | "bad" | undefined;
+        summary?: string | undefined;
+        detail?: string | undefined;
+        visual?: {
+            type: string;
+            params: unknown;
+        } | undefined;
+    }[];
+    title?: string | undefined;
+    note?: string | undefined;
+}>, {}, "">;
+type ProgramBlock = ReturnType<typeof ProgramBlock>;
+export default ProgramBlock;

package/dist/artifact-blocks/blocks/program/block.d.ts

@@ -0,0 +1,35 @@
+/**
+ * program block — the daily newspaper/podcast surface: an audio (or video)
+ * brief with a live chapter rail and a per-chapter visual.
+ *
+ * Joe 2026-10-09 on /a/morning-2026-10-09: move the chapter list to a RIGHT
+ * column, keep the transcript in the center, highlight the active chapter as
+ * it plays, click a chapter to jump or hear it again, and show each chapter's
+ * accompanying visual (chart/diagram/picker/decision) while it plays.
+ *
+ * Everything hard is the player's: the rail is jatui VideoPlayer's opt-in
+ * `chapterRail: 'side'` pane (active row tracks the playhead with a progress
+ * fill, played rows check off, click seeks + plays, replay affordance on the
+ * active row, listNav j/k + Enter, sticky column at lg+, chip strip on a
+ * phone) — NOT re-implemented here. This block adds what only the page knows:
+ *
+ *   - the VISUAL PANEL: the selected chapter's nested block instance +
+ *     detail markdown, rendered in the player's `belowStage` slot (under the
+ *     stage, above the transcript) with a keyed swap;
+ *   - FOLLOW mode (default on): the panel shows the ACTIVE chapter as audio
+ *     plays; clicking a rail row pins that chapter and a "Back to now
+ *     playing" button returns to auto;
+ *   - nested interactive state: a decision/checklist/picker visual saves the
+ *     viewer's picks through THIS block's ctx.saveState (a `visuals` map
+ *     keyed by the nested block's id) and reads them back on load;
+ *   - deep links: `?t=` seeds the player and the panel; `#chapter-<id>`
+ *     seeks to the chapter and shows it.
+ *
+ * The nested visual is validated through the registry like a top-level block
+ * (errors report at chapters[i].visual.*); a program cannot nest a program
+ * and a scripted mockup is refused.
+ */
+import type { ArtifactBlockDef } from "../../types.js";
+import { type ProgramParams } from "./schema.js";
+declare const def: ArtifactBlockDef<ProgramParams>;
+export default def;

package/dist/artifact-blocks/blocks/program/block.js

@@ -0,0 +1,68 @@
+import ProgramBlock from "./ProgramBlock.svelte";
+import { programSchema } from "./schema.js";
+const EXAMPLE = {
+    title: "The weekly program",
+    note: "Two numbers moved this week, and one decision is waiting on you.",
+    media: {
+        // A stable public sample so the catalog example is playable as
+        // published; real programs point at the team's own media URLs.
+        src: "https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg",
+        type: "audio",
+    },
+    segments: [
+        {
+            start: 0,
+            end: 12,
+            speaker: "Host",
+            text: "Welcome back to the program.",
+            chapter: "intro",
+        },
+        {
+            start: 12,
+            end: 28,
+            speaker: "Host",
+            text: "Two numbers moved this week, and one needs your call.",
+            chapter: "numbers",
+        },
+        { start: 28, end: 30, speaker: "Host", text: "That's the show." },
+    ],
+    chapters: [
+        {
+            id: "intro",
+            title: "Cold open",
+            start: 0,
+            status: "info",
+            summary: "What this week's program covers.",
+            detail: "A one-minute orientation before the numbers.",
+        },
+        {
+            id: "numbers",
+            title: "The numbers",
+            start: 12,
+            status: "good",
+            summary: "Two moved up; one decision open.",
+            // A core block, so the example renders wherever jatui does; any
+            // registered block type works here (stats, chart, table…).
+            visual: {
+                type: "markdown",
+                params: {
+                    markdown: [
+                        "| Metric | This week | Change |",
+                        "|---|---:|---:|",
+                        "| Read rate | 81.5% | +2.1 |",
+                        "| Replies | 12 | −3 |",
+                    ].join("\n"),
+                },
+            },
+        },
+    ],
+};
+const def = {
+    type: "program",
+    title: "Program (brief + chapter rail + per-chapter visual)",
+    description: "The daily newspaper/podcast surface: an audio (or video) brief whose chapter rail plays live on the right while each chapter's visual renders between the player and the transcript. media: {src (https:// or root-relative URL), type 'audio'|'video' (default audio), poster?}. segments: [{start, end, speaker, text, chapter?}] — chapter? tags the line with a chapter id and lets that chapter's end derive from its last line. chapters (1–30): [{id (lowercase a-z0-9_-, the #chapter-<id> deep-link key), title, start (seconds), end?, status? good|warn|bad|info (the rail's dot), summary? (one line in the rail), detail? (markdown for the visual panel), visual? (ONE nested block instance {type, params} of any registered type except program and a scripted mockup — validated through the registry, errors report at chapters[i].visual.*)}]. Follow mode shows the active chapter's visual as audio plays; clicking a chapter pins it; nested decision/checklist/picker visuals save the viewer's picks per chapter. Deep links: ?t= and #chapter-<id> select + seek. Tip: give EVERY chapter a visual (stats, table, media-picker, callout decision, timeline — the rail reads like a table of contents only when the rows lead somewhere); keep summaries to one line; lead the spec with this block, context blocks after.",
+    schema: programSchema,
+    component: ProgramBlock,
+    example: EXAMPLE,
+};
+export default def;