@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/BlockRenderer.svelte

@@ -0,0 +1,674 @@
+<script lang="ts">
+  /**
+   * BlockRenderer (origin mos-bqeoa) — the host half of the blocks contract.
+   *
+   * Renders a BlocksSpec IN the host page (no iframe): a blocks artifact is
+   * data, every block is schema-validated at publish, so this component's
+   * only job is lookup + delegation + the two failure modes the contract
+   * names explicitly:
+   *
+   *   - an UNKNOWN block type (the registry moved on since this version was
+   *     published) and an INVALID params object render a visible error card
+   *     — never a thrown error, never a silent skip. History is truth; a
+   *     restored old version may reference a block the present no longer
+   *     knows, and the page must still stand.
+   *   - per-viewer state flows through ctx: the renderer owns the saved
+   *     blocks map and a debounced per-block save, so a block widget calls
+   *     `ctx.saveState(next)` and stays dumb about the network.
+   *
+   * Read-only surfaces (public share without comment rights, print) get
+   * `onSaveBlock === undefined` → ctx.saveState is undefined, and every
+   * block must render correctly in that mode (the contract block authors
+   * signed up to).
+   *
+   * Groups (PARAMS-SPEC §5): a block whose authored params carry
+   * `group: { key, label, quiet? }` sits under a header the renderer draws
+   * BETWEEN cards whenever the key changes — anchored `#group-<key>` for
+   * an intro's jump links, with the run's card count; a `quiet` group
+   * starts collapsed to that one row.
+   *
+   * Host services: pass `adapter` when mounting the renderer alone (the
+   * view passes its own down). It reaches every block as `ctx.services`
+   * and every chrome piece through the context (adapter.ts).
+   */
+  import { blockDef } from "./registry.js"
+  import { PENDING_BLOCK_TYPES } from "./builtins.js"
+  import { resolveBlockParams } from "./liveData.js"
+  import BlockComments from "./BlockComments.svelte"
+  import CommentPill from "./CommentPill.svelte"
+  import BlockVerdict from "./BlockVerdict.svelte"
+  import { hostAdapter, hostServices, provideHostAdapter } from "./adapter.js"
+  import { reviewKey, takesBlockVerdict } from "./review.js"
+  import type {
+    BlockGroup,
+    BlockReviewState,
+    BlockState,
+    BlocksSpec,
+    HostAdapter,
+  } from "./types.js"
+  import { flushSync, onMount, type Snippet } from "svelte"
+
+  /** SSR vs browser, without a SvelteKit import (jatui is host-agnostic). */
+  const browser = typeof window !== "undefined"
+
+  interface Props {
+    spec: BlocksSpec
+    artifactId: string
+    version: number
+    /** This viewer's saved per-block state: blockId → its saved blob. */
+    savedBlocks?: Record<string, unknown> | null
+    /**
+     * Persist the WHOLE per-block state map (debounced here). Omit on a
+     * read-only surface — blocks then get ctx.saveState === undefined. The
+     * renderer owns the merge: it posts its current map (the touched block's
+     * new state plus every other block's latest), so a host page can POST it
+     * verbatim and never hold a stale copy.
+     */
+    onSaveBlock?: (payload: {
+      kind: "blocks"
+      blocks: Record<string, unknown>
+    }) => Promise<void>
+    /** True on the public share route — blocks must not show viewer chrome. */
+    readonly?: boolean
+    /** Live data published for the artifact; {} when none. */
+    data?: Record<string, unknown>
+    /** Save-status changes, for the host page's header indicator. */
+    onStatus?: (status: "idle" | "saving" | "saved" | "failed") => void
+    /**
+     * Per-block comment threads (mos-kib2f). Undefined on the read-only
+     * share surface — blocks render with no viewer chrome, per the contract.
+     */
+    comments?: {
+      enabled: boolean
+      /** Unresolved counts per block (server-rendered). */
+      counts: Record<string, number>
+    }
+    /**
+     * Per-block approve / needs-a-pass / note (mos-wywa3): on for a page
+     * linked to a jat task, where "Finish review" answers that task. Each
+     * verdict saves under the block's `review:<blockId>` key.
+     */
+    review?: boolean
+    /** Every change to the local state map, for the host's Finish review. */
+    onLocalChange?: (blocks: Record<string, unknown>) => void
+    /**
+     * The host's services (comments, composer, listen, block services…).
+     * Omit inside BlocksArtifactView (it provides its own); set it when
+     * mounting the renderer alone.
+     */
+    adapter?: HostAdapter
+  }
+
+  let {
+    spec,
+    artifactId,
+    version,
+    savedBlocks = null,
+    onSaveBlock = undefined,
+    readonly = false,
+    data = {},
+    onStatus = undefined,
+    comments = undefined,
+    review = false,
+    onLocalChange = undefined,
+    adapter = undefined,
+  }: Props = $props()
+
+  // An explicit adapter wins; otherwise inherit the view's (or none).
+  // svelte-ignore state_referenced_locally
+  if (adapter) provideHostAdapter(adapter)
+  const host = hostAdapter()
+  const services = hostServices(host)
+  /** Comments need the host's service too: no service → no pills. */
+  const commentsOn = $derived(
+    comments?.enabled === true && host.comments !== undefined,
+  )
+
+  // ---- Groups between cards (PARAMS-SPEC §5) ----------------------------
+  const GROUP_KEY_RE = /^[a-z0-9-]{1,32}$/
+  function groupOf(params: unknown): BlockGroup | null {
+    if (typeof params !== "object" || params === null) return null
+    const g = (params as Record<string, unknown>).group
+    if (typeof g !== "object" || g === null) return null
+    const { key, label, quiet } = g as Record<string, unknown>
+    if (typeof key !== "string" || !GROUP_KEY_RE.test(key)) return null
+    if (typeof label !== "string" || !label.trim()) return null
+    return { key, label: label.trim().slice(0, 60), quiet: quiet === true }
+  }
+  interface GroupRun extends BlockGroup {
+    /** Index of the run's first block in spec.blocks. */
+    start: number
+    count: number
+    /** The first run of this key carries the `#group-<key>` anchor. */
+    anchor: boolean
+  }
+  /** Runs of consecutive blocks sharing a group key, keyed by start index;
+   * `runOf[i]` = the run block i sits in (null = ungrouped). */
+  const groups = $derived.by(() => {
+    const headers = new Map<number, GroupRun>()
+    const runOf: (GroupRun | null)[] = []
+    const anchored = new Set<string>()
+    let current: GroupRun | null = null
+    spec.blocks.forEach((b, i) => {
+      const g = groupOf(b.params)
+      if (!g) {
+        current = null
+        runOf.push(null)
+        return
+      }
+      if (!current || current.key !== g.key) {
+        current = { ...g, start: i, count: 0, anchor: !anchored.has(g.key) }
+        anchored.add(g.key)
+        headers.set(i, current)
+      }
+      current.count++
+      runOf.push(current)
+    })
+    return { headers, runOf }
+  })
+  /**
+   * Collapsed groups, by group KEY (a republish that reorders cards keeps
+   * the viewer's choice); a quiet group starts collapsed. Collapsing HIDES
+   * the cards (`hidden`), never unmounts them: a card keeps its state and
+   * stays a jump target — revealBlock() expands its group first.
+   */
+  let collapsed = $state<Record<string, boolean>>({})
+  function isCollapsed(run: GroupRun): boolean {
+    return collapsed[run.key] ?? run.quiet === true
+  }
+
+  /**
+   * Make a block visible before a jump lands on it (the view's open-item
+   * walk, a Finish card, a #block-<id> link): expands the group it sits in.
+   * Returns true when it had to expand one.
+   */
+  export function revealBlock(blockId: string): boolean {
+    const i = spec.blocks.findIndex((b) => b.id === blockId)
+    const run = i >= 0 ? groups.runOf[i] : null
+    if (!run || !isCollapsed(run)) return false
+    collapsed = { ...collapsed, [run.key]: false }
+    return true
+  }
+
+  function revealHash() {
+    const m = /^#block-(.+)$/.exec(location.hash)
+    if (m && revealBlock(decodeURIComponent(m[1]!))) {
+      flushSync()
+      document.getElementById(`block-${m[1]}`)?.scrollIntoView()
+    }
+  }
+  // Once at mount (an arrival on a deep link); never re-run on a toggle,
+  // or collapsing the group under the hash would re-open it.
+  onMount(revealHash)
+
+  /**
+   * Local copy of every block's saved state. Reactive: a block that reads
+   * ctx.state re-renders when its own key changes (its own save round-trip).
+   * Seeded from the server's saved map and updated optimistically on save.
+   */
+  let blocks = $state<Record<string, unknown>>(
+    savedBlocks ? ($state.snapshot(savedBlocks) as typeof savedBlocks) : {},
+  )
+
+  $effect(() => {
+    onLocalChange?.(blocks)
+  })
+
+  function reviewStateOf(blockId: string): BlockReviewState | null {
+    const s = blocks[reviewKey(blockId)]
+    return typeof s === "object" && s !== null ? (s as BlockReviewState) : null
+  }
+
+  /**
+   * Fire every save still in its debounce window and wait for all flights:
+   * the host calls this before "Finish review" so the server reads the
+   * viewer's latest state.
+   */
+  export async function flush(): Promise<void> {
+    for (const [blockId, t] of pending) {
+      clearTimeout(t)
+      pending.delete(blockId)
+      pendingResolve.get(blockId)?.()
+      pendingResolve.delete(blockId)
+      void fireSave(blockId)
+    }
+    await Promise.allSettled([...inFlight.values()])
+  }
+
+  /** Block ids whose latest save FAILED — the Finish-review gate reads this
+   * before sending an answer: a send over a failed save would answer the
+   * task with whatever the server happens to hold (possibly nothing) and
+   * overwrite the viewer's state with that (mos-lwbbt, pe-dusk-sweep). */
+  export function failedSaveBlocks(): string[] {
+    return Object.keys(failedBlocks)
+  }
+
+  type SaveStatus = "idle" | "saving" | "saved" | "failed"
+  let status: SaveStatus = $state("idle")
+
+  /**
+   * A hosted comment trigger's state (mos-8fvt9): the pill renders on the
+   * block's heading row (SectionTools), the thread drawer stays here.
+   */
+  let commentOpen = $state<Record<string, boolean>>({})
+  let commentUnresolved = $state<Record<string, number>>({})
+
+  /** Per-block debounce timers — one save in flight per block, not per key. */
+  const pending = new Map<string, ReturnType<typeof setTimeout>>()
+  const inFlight = new Map<string, Promise<void>>()
+  /**
+   * The promise each debounced save returned to its block (mos-4dkv9). A
+   * save-on-press block (the decision callout) races its own debounce: a
+   * second save within the window CLEARS the first save's timer, and a
+   * promise whose timer was cleared used to never settle — a widget that
+   * awaits ctx.saveState stuck on "Saving…" forever. The superseded state
+   * rides the newer save's POST (the map at fire time carries it), so
+   * settling the displaced promise without its own POST is honest.
+   */
+  const pendingResolve = new Map<string, () => void>()
+
+  /**
+   * The per-block context handed to every block component. Getters (not
+   * snapshot values) so a block reading ctx.state sees the current local
+   * copy, and saveState is present iff this surface can actually save.
+   */
+  function ctxFor(blockId: string, tools?: Snippet) {
+    const canSave = !readonly && onSaveBlock !== undefined
+    return {
+      artifactId,
+      version,
+      blockId,
+      tools,
+      get state() {
+        const s = blocks[blockId]
+        return s === undefined ? null : (s as BlockState)
+      },
+      get saveState() {
+        return canSave
+          ? (next: BlockState) => saveBlock(blockId, next)
+          : undefined
+      },
+      data,
+      readonly,
+      services,
+    }
+  }
+
+  /**
+   * Validate one block's params: the error-card message (null when valid)
+   * and — when valid — the PARSED params the component should render.
+   *
+   * The component receives the schema-PARSED form, never the raw input
+   * (mos-659rz): publish stores the spec verbatim (history is truth), and
+   * zod defaults + preprocessing apply only at parse — so a raw params
+   * object can PASS validation yet still be missing fields the component
+   * requires. A mockup variant without `device` did exactly that: publish
+   * OK, then every render 500'd at MOCKUP_DIMS[undefined].maxFrameW. The
+   * component sees the normalized form the schema always meant it to see.
+   *
+   * `fromData` says these params ARE a live-data value (mos-0ninw) — the
+   * error then names the dataKey, because the thing to fix is the published
+   * DATA (the host's data publish), not the block's inline params. */
+  function blockRender(
+    blockId: string,
+    type: string,
+    params: unknown,
+    fromData: string | null,
+  ): { err: string | null; params: unknown } {
+    const def = blockDef(type)
+    if (!def) {
+      return {
+        err: PENDING_BLOCK_TYPES.includes(type)
+          ? `Block type "${type}" is not in this renderer yet — it is still being ported to jatui.`
+          : `Unknown block type "${type}" — this version predates a block rename, or was published for a block this host does not register.`,
+        params: null,
+      }
+    }
+    const parsed = def.schema.safeParse(params)
+    if (!parsed.success) {
+      const first = parsed.error.issues
+        .map((i) => `${i.path.join(".") || "params"}: ${i.message}`)
+        .slice(0, 3)
+        .join("; ")
+      const source = fromData
+        ? `live data "${fromData}"`
+        : `params for "${type}"`
+      return {
+        err: `Invalid ${source} — ${first}${fromData ? " (published as live data; the inline params are NOT shown while a data value for this key exists)" : ""}`,
+        params: null,
+      }
+    }
+    return { err: null, params: parsed.data }
+  }
+
+  function setStatus(next: SaveStatus) {
+    status = next
+    onStatus?.(next)
+  }
+  /** Per-block failed flag — the visible "Not saved — Retry" strip is keyed
+   * by blockId, because a failure on one block must not fail the page.
+   * (mos-yntqm: the DataCloneError era proved a save can die without ANY
+   * visible trace; network failures were only a tiny header line.) */
+  let failedBlocks = $state<Record<string, true>>({})
+
+  function markFailed(blockId: string) {
+    failedBlocks = { ...failedBlocks, [blockId]: true }
+    setStatus("failed")
+  }
+
+  function markSaving(blockId: string) {
+    if (failedBlocks[blockId]) {
+      const next = { ...failedBlocks }
+      delete next[blockId]
+      failedBlocks = next
+    }
+    setStatus("saving")
+  }
+
+  /**
+   * POST the current map NOW for one block — the debounce timer's body, and
+   * the Retry button's action. Returns the flight so callers that want its
+   * outcome can await it; the widget-facing saveBlock promise is unaffected.
+   */
+  function fireSave(blockId: string): Promise<void> {
+    if (!onSaveBlock) return Promise.resolve()
+    markSaving(blockId)
+    // The map at FIRE time, not click time — a second block's save within
+    // the debounce window rides along instead of clobbering it.
+    const flight = onSaveBlock({ kind: "blocks", blocks: { ...blocks } })
+      .then(() => {
+        inFlight.delete(blockId)
+        setStatus("saved")
+      })
+      .catch((err: unknown) => {
+        inFlight.delete(blockId)
+        // The next save retries; the widget stays usable — a failed save
+        // must not brick the block or the page. The failure is VISIBLE:
+        // a per-block "Not saved — Retry" strip (mos-yntqm) — and a 429
+        // retries itself when the window rolls (mos-lwbbt).
+        markFailed(blockId)
+        scheduleBackoff(blockId, err)
+      })
+    inFlight.set(blockId, flight)
+    return flight
+  }
+
+  /** Retry a failed save immediately with the block's latest local state. */
+  function retrySave(blockId: string) {
+    const t = pending.get(blockId)
+    if (t) {
+      clearTimeout(t)
+      pending.delete(blockId)
+      pendingResolve.get(blockId)?.()
+      pendingResolve.delete(blockId)
+    }
+    void fireSave(blockId)
+  }
+
+  /** One scheduled retry per block after a 429 (mos-lwbbt, pe-dusk-sweep):
+   * Joe approved 90 items through the lightbox faster than the save burst
+   * cap, every save got refused, the data lived only in the tab, and Send
+   * answered the task with nothing. A refused save now retries itself when
+   * the server says the window rolls — the queue drains, nothing is lost. */
+  const backoffs = new Map<string, ReturnType<typeof setTimeout>>()
+  const MAX_BACKOFF_MS = 60_000
+  function scheduleBackoff(blockId: string, err: unknown) {
+    const retryAfter = (err as { retryAfterSeconds?: unknown })
+      ?.retryAfterSeconds
+    const secs =
+      typeof retryAfter === "number" &&
+      Number.isFinite(retryAfter) &&
+      retryAfter > 0
+        ? Math.min(retryAfter, MAX_BACKOFF_MS / 1000)
+        : 5
+    if (backoffs.has(blockId)) return // one flight per block; it carries the whole map
+    const t = setTimeout(() => {
+      backoffs.delete(blockId)
+      if (inFlight.has(blockId) || pending.has(blockId)) return
+      void fireSave(blockId)
+    }, secs * 1000)
+    backoffs.set(blockId, t)
+  }
+
+  /** Optimistic local update + debounced POST of the WHOLE blocks map. The
+   * payload is keyed by blockId (feedback.ts validates it); the server
+   * resolves the viewer, the artifact and the version from the session. */
+  function saveBlock(blockId: string, next: BlockState): Promise<void> {
+    if (!onSaveBlock) return Promise.resolve()
+    // EVERY failure lands in the visible failed state (mos-yntqm): a sync
+    // throw (the DataCloneError class) used to escape into the block's click
+    // handler and vanish — no status change, no POST, no trace. Caught here,
+    // the block keeps its optimistic local state and the strip shows.
+    try {
+      blocks = { ...blocks, [blockId]: $state.snapshot(next) as BlockState }
+    } catch {
+      markFailed(blockId)
+      return Promise.resolve()
+    }
+    markSaving(blockId)
+
+    const existing = pending.get(blockId)
+    if (existing) {
+      clearTimeout(existing)
+      // The save this timer belonged to is superseded — settle its promise
+      // so the block's own awaiter unblocks (mos-4dkv9).
+      pendingResolve.get(blockId)?.()
+      pendingResolve.delete(blockId)
+    }
+    return new Promise<void>((resolve) => {
+      pendingResolve.set(blockId, resolve)
+      const timer = setTimeout(() => {
+        pending.delete(blockId)
+        pendingResolve.delete(blockId)
+        resolve(fireSave(blockId))
+      }, 600)
+      pending.set(blockId, timer)
+    })
+  }
+
+  $effect(() => () => {
+    // A save still in its debounce window when the page goes away is a real
+    // viewer decision — FIRE it instead of dropping it (mos-yntqm): the
+    // fetch keeps running through an SPA navigation, and the host page's
+    // keepalive fetch survives a full unload. A fired save into a detached
+    // component only sets state nobody reads.
+    for (const [blockId, t] of pending) {
+      clearTimeout(t)
+      void fireSave(blockId)
+      pendingResolve.get(blockId)?.()
+    }
+    pending.clear()
+    pendingResolve.clear()
+    for (const t of backoffs.values()) clearTimeout(t)
+    backoffs.clear()
+  })
+</script>
+
+<!-- A #block-<id> link into a collapsed group opens the group first. -->
+<svelte:window onhashchange={revealHash} />
+
+<div class="flex max-w-full min-w-0 flex-col gap-4">
+  {#each spec.blocks as b, i (b.id)}
+    {@const header = groups.headers.get(i)}
+    {@const run = groups.runOf[i]}
+    {#if header}
+      <!-- A group header between cards: sticky label + count; a quiet group
+           collapses to this one row. -->
+      <div
+        id={header.anchor ? `group-${header.key}` : undefined}
+        class="ab-group-header border-base-content/10 bg-base-100/95 sticky top-[var(--artifact-sticky-top,0px)] z-[1] -mb-1 flex scroll-mt-20 items-center gap-2 border-b pt-3 pb-1.5"
+        data-group-header={header.key}
+      >
+        <h2 class="text-base-content/70 min-w-0 truncate text-xs font-semibold tracking-wide uppercase">
+          {header.label}
+        </h2>
+        <span
+          class="bg-base-content/10 text-base-content/70 rounded-field px-1.5 text-xs tabular-nums"
+          aria-label="{header.count} {header.count === 1 ? 'card' : 'cards'}"
+          >{header.count}</span
+        >
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs rounded-field ml-auto"
+          aria-expanded={!isCollapsed(header)}
+          onclick={() =>
+            (collapsed = { ...collapsed, [header.key]: !isCollapsed(header) })}
+        >
+          {isCollapsed(header) ? "Show" : "Hide"}
+        </button>
+      </div>
+    {/if}
+    {@const def = blockDef(b.type)}
+    {@const resolved = resolveBlockParams(def, b.params, data)}
+    {@const render = blockRender(
+      b.id,
+      b.type,
+      resolved.params,
+      resolved.fromData ? resolved.dataKey : null,
+    )}
+    {@const wideBlock = def?.wide?.(render.params) === true}
+    <section
+      id={`block-${b.id}`}
+      class="min-w-0 scroll-mt-20"
+      aria-label={def?.title ?? `Block ${b.id}`}
+      data-group={run ? run.key : undefined}
+      hidden={run !== null && isCollapsed(run)}
+    >
+      {#if render.err}
+        <!-- Visible, honest, and non-fatal: the rest of the page stands. -->
+        <div
+          role="alert"
+          class="border-error/30 bg-error/10 text-error-content rounded-box border p-4 text-sm"
+        >
+          <p class="font-medium">Block "{b.id}" ({b.type}) could not render</p>
+          <p class="text-error-content/80 mt-1 break-words">{render.err}</p>
+        </div>
+      {:else if def}
+        {@const Block = def.component}
+        {@const label =
+          (typeof render.params === "object" &&
+          render.params !== null &&
+          !Array.isArray(render.params) &&
+          typeof (render.params as Record<string, unknown>).title === "string"
+            ? ((render.params as Record<string, unknown>).title as string)
+            : null) ??
+          def?.title ??
+          b.id}
+        {@const hosted =
+          commentsOn &&
+          !readonly &&
+          def.hostsTools?.(render.params as never) === true}
+        <!-- mos-8fvt9: a block that hosts its tools gets the comment pill on
+             its heading row (ctx.tools → SectionTools); every other block
+             keeps the pill on a row of its own above it. The thread drawer
+             is always rendered here, outside any block's @container. -->
+        {#snippet commentTool()}
+          <CommentPill
+            {label}
+            unresolved={commentUnresolved[b.id] ?? comments?.counts[b.id] ?? 0}
+            open={commentOpen[b.id] ?? false}
+            onclick={() => (commentOpen[b.id] = !(commentOpen[b.id] ?? false))}
+          />
+        {/snippet}
+        {#if commentsOn && comments}
+          <BlockComments
+            {artifactId}
+            {version}
+            blockId={b.id}
+            blockLabel={label}
+            count={comments.counts[b.id] ?? 0}
+            enabled={!readonly}
+            wide={wideBlock}
+            {hosted}
+            bind:open={() => commentOpen[b.id] ?? false,
+            (v) => (commentOpen[b.id] = v)}
+            onunresolved={(n) => (commentUnresolved[b.id] = n)}
+          />
+        {/if}
+        {#if failedBlocks[b.id]}
+          <!-- mos-yntqm: a failed save is a VISIBLE, actionable card on the
+               block itself — never a silent loss, never a throwaway line. -->
+          <div
+            role="alert"
+            class="border-warning/40 bg-warning/10 text-warning-content rounded-box mb-2 flex flex-wrap items-center gap-2 border p-3 text-sm"
+          >
+            <span class="font-medium">Not saved</span>
+            <span class="text-warning-content/80">
+              Your last change here could not be saved.</span
+            >
+            <button
+              type="button"
+              class="btn btn-xs rounded-field ml-auto"
+              onclick={() => retrySave(b.id)}
+            >
+              Retry
+            </button>
+          </div>
+        {/if}
+        <!-- Per-block error boundary (mos-659rz): a block component that
+             THROWS — a bug the schema cannot see — degrades to the same
+             quiet notice; one bad block never takes the page down.
+
+             The boundary is ACTIVE ONLY AT SSR and INTENTIONALLY
+             TRANSPARENT on the client (failed = undefined → Svelte
+             rethrows past it). Svelte boundaries cannot distinguish a
+             render error from an effect error — both destroy the block and
+             render the failed snippet — and a harmless effect hiccup
+             (canvas/audio/observer) inside e.g. the program block's player
+             must NOT blank the whole block. At SSR effects never run, so
+             the boundary there is render-only by construction: exactly the
+             500 class this fix targets (a block throwing during SSR used
+             to 500 the whole page). A client-side render throw behaves as
+             it always has (no boundary): it propagates to the app-level
+             handler. -->
+        <svelte:boundary failed={browser ? undefined : blockCrashed}>
+          <Block
+            params={render.params}
+            ctx={ctxFor(b.id, hosted ? commentTool : undefined)}
+          />
+        </svelte:boundary>
+        {#snippet blockCrashed(error: unknown, reset: () => void)}
+          <!-- Svelte adapts the failed snippet's signature per side: at SSR
+               it is called (renderer, error, reset), on the client
+               (error, reset) — declaring (error, reset) is correct on both. -->
+          <div
+            role="alert"
+            class="border-error/30 bg-error/10 text-error-content rounded-box border p-4 text-sm"
+          >
+            <p class="font-medium">
+              Block "{b.id}" ({b.type}) crashed while rendering
+            </p>
+            <p class="text-error-content/80 mt-1">
+              {error instanceof Error ? error.message : String(error)}
+            </p>
+          </div>
+        {/snippet}
+        <!-- Only blocks that take a verdict (mos-lfkys): information blocks
+             (stats, table, markdown, a plain callout) show no strip. Read
+             from the AUTHORED params — `reviewable` is a spec opt-in. -->
+        {#if review && !readonly && takesBlockVerdict(b.type, b.params)}
+          <BlockVerdict
+            {artifactId}
+            blockId={b.id}
+            blockLabel={def?.title ?? b.id}
+            saved={reviewStateOf(b.id)}
+            onChange={onSaveBlock
+              ? (next) => void saveBlock(reviewKey(b.id), { ...next })
+              : undefined}
+          />
+        {/if}
+      {/if}
+    </section>
+  {:else}
+    <p class="text-base-content/50 text-sm">This page has no blocks yet.</p>
+  {/each}
+</div>
+{#if status !== "idle"}
+  <span class="sr-only" aria-live="polite">
+    {status === "saving"
+      ? "Saving…"
+      : status === "saved"
+        ? "Saved"
+        : "Not saved"}
+  </span>
+{/if}