@unoverse-platform/studio 0.1.103 → 0.1.104

package/vendor/sdk/lib/primitives.tsx

@@ -1,943 +0,0 @@
-/**
- * ════════════════════════════════════════════════════════════════════════════
- *  EVERY PRIMITIVE LIVES HERE — render.tsx is the dispatcher and renders NONE.
- * ════════════════════════════════════════════════════════════════════════════
- *
- *  This file is the CLOSED set of leaf primitives — the web realization of the
- *  irreducible neutral elements: Box, Text, Image, Button, Icon, Skeleton, Input,
- *  Markdown (+ the Unknown fallback). If you are writing a `<div>`, `<button>`,
- *  `<span>`, `<img>`, `<input>`, `<svg>` … it goes HERE, never in render.tsx.
- *  render.tsx ONLY dispatches `node.type` → one of these components. (A build
- *  guard, test/dispatcher-only.test.mjs, fails if a raw element appears in
- *  render.tsx — so this separation can't silently rot again.)
- *
- *  ⛔ A primitive renders ONE generic element and NOTHING about a specific UX.
- *     No icons-in-the-input, no send buttons, no pills, no cards, no loaders.
- *     Those are LAYOUTS — compose them in a DEFINITION from generic primitives.
- *     Every style VALUE is served (theme.*); this file authors none. The bar to
- *     ADD a primitive is high — it must be an irreducible element at the tier of
- *     Text/Image (see FRAMEWORK.md), never a composite.
- * ════════════════════════════════════════════════════════════════════════════
- */
-import { createContext, createElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
-import Markdown from "markdown-to-jsx";
-import type { ResolvedTheme, UnoverseNode } from "./core";
-import { styleToCss, cssDecls } from "./style";
-import { nodeAction, type ActionHandler } from "./render";
-import { ThinkingOrb, type OrbState, type OrbSize, type OrbTheme } from "./orb";
-
-/** Read a bound data field as a string (for Text/Image/Button content). */
-function bound(field: string | undefined, data: Record<string, unknown>): string | undefined {
-  return field ? (data[field] as string | undefined) : undefined;
-}
-
-/** Stable class name from a string (identical state specs share one injected rule). */
-function hashStr(s: string): string {
-  let h = 0;
-  for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
-  return (h >>> 0).toString(36);
-}
-
-// Interaction states are CSS pseudo-classes — inline styles can't express them, so we
-// resolve each state's tokens → a scoped rule and inject it (deduped by class hash).
-// Generic vocab (any element), values served; the SDK authors none. Add a state here.
-const INTERACTION_STATES: [string, string][] = [
-  ["hover", ":hover"],
-  ["active", ":active"],
-];
-
-// A state rule is a pure function of (spec object, theme) — and spec objects come from
-// cached defs, so they're referentially stable. Resolve + serialize + hash once, not
-// per element per render.
-const stateRuleCache = new WeakMap<ResolvedTheme, WeakMap<object, { cls: string; rule: string }>>();
-function stateRule(theme: ResolvedTheme, spec: Record<string, unknown>, key: string, pseudo: string): { cls: string; rule: string } {
-  let bySpec = stateRuleCache.get(theme);
-  if (!bySpec) {
-    bySpec = new WeakMap();
-    stateRuleCache.set(theme, bySpec);
-  }
-  let hit = bySpec.get(spec);
-  if (!hit) {
-    // !important — the base style is inline, which beats a class selector otherwise.
-    const decls = cssDecls(styleToCss(spec, theme), true);
-    const cls = `uno-${key}-${hashStr(decls)}`;
-    hit = { cls, rule: `.${cls}${pseudo}{${decls}}` };
-    bySpec.set(spec, hit);
-  }
-  return hit;
-}
-
-/**
- * Resolve the generic per-element "chrome" shared by interactive primitives:
- * the base inline style, hover/active rules (injected as <style>), and the
- * data-driven `disabled` state (known at render via `disabledWhen` → merges the
- * `disabled` style + sets the attr). All values are served; this authors none.
- */
-function nodeChrome(node: UnoverseNode, data: Record<string, unknown>, theme: ResolvedTheme) {
-  const base = styleToCss(node.style, theme, data);
-  const disabled = node.disabledWhen ? !!data[node.disabledWhen] : false;
-  const style = disabled && node.style?.disabled ? { ...base, ...styleToCss(node.style.disabled as Record<string, unknown>, theme) } : base;
-  const classes: string[] = [];
-  const styleEls: ReactNode[] = [];
-  const s = node.style as Record<string, unknown> | undefined;
-  for (const [key, pseudo] of INTERACTION_STATES) {
-    const spec = s?.[key];
-    if (!spec) continue;
-    const { cls, rule } = stateRule(theme, spec as Record<string, unknown>, key, pseudo);
-    classes.push(cls);
-    styleEls.push(<style key={key}>{rule}</style>);
-  }
-  // `hideBelow` — responsive visibility via a CONTAINER query (inline styles can't express
-  // one): hides the element when its nearest container ancestor (an element with the
-  // `container` style) is narrower than a SERVED width token — e.g. drop a side image when
-  // the COMPONENT (not the viewport) is mobile-width. Correct for SDUI: a component reacts to
-  // its slot, not the page. Generic vocab, value served; the SDK authors none.
-  if (s?.hideBelow) {
-    const w = theme.space[s.hideBelow as string] ?? theme.layout?.[s.hideBelow as string] ?? (s.hideBelow as string);
-    const cls = `uno-hidebelow-${hashStr(String(w))}`;
-    classes.push(cls);
-    styleEls.push(<style key="hideBelow">{`@container (max-width:${w}){.${cls}{display:none !important}}`}</style>);
-  }
-  // `span` STACKS. A child covering several of its grid's columns must give that up when
-  // the grid runs out of room, or four quarter-width cards keep being quarters in a 300px
-  // rail and the content is crushed. Below the threshold every spanning child takes the
-  // whole row (`1 / -1`), which IS the stack: one per row, full width, in source order.
-  //
-  // The query targets the GRID (style.ts marks it `container-type: inline-size`), so this
-  // reacts to the space the grid actually has, not the viewport. A component in a narrow
-  // panel on a wide screen stacks correctly, which a viewport breakpoint cannot do.
-  //
-  // The threshold is SERVED (`theme.grid.stackBelow`). The SDK holds no width of its own.
-  if (s?.span) {
-    const raw = theme.grid?.stackBelow ?? "";
-    const w = theme.space[raw] ?? theme.layout?.[raw] ?? raw;
-    if (w) {
-      const cls = `uno-stack-${hashStr(String(w))}`;
-      classes.push(cls);
-      styleEls.push(<style key="span-stack">{`@container (max-width:${w}){.${cls}:not(.uno-gridstack > *){grid-column:1 / -1 !important}}`}</style>);
-    }
-  }
-  // A GRID'S OWN `stackBelow` overrides the served threshold for that grid: below it, EVERY
-  // child takes the whole row, spanning or not, so a two-up list stacks as a 7/5 split does.
-  // The children query the grid itself (it is `container-type: inline-size`), and the
-  // served threshold above steps aside for them (`uno-gridstack`), so a grid may hold its
-  // shape longer as well as give it up sooner.
-  if (s?.columns && s.stackBelow) {
-    const raw = s.stackBelow as string;
-    const w = theme.space[raw] ?? theme.layout?.[raw] ?? raw;
-    const cls = `uno-gridstack-${hashStr(String(w))}`;
-    classes.push("uno-gridstack", cls);
-    styleEls.push(<style key="grid-stack">{`@container (max-width:${w}){.${cls} > *{grid-column:1 / -1 !important}}`}</style>);
-  }
-  // `columns` AS A BREAKPOINT MAP — the responsive grid: column counts per named band
-  // ({mobile: "1", tablet: "2", desktop: "3", full: "4"}), applied by CONTAINER width
-  // (the nearest `container` ancestor — a grid in a narrow panel stacks on a wide
-  // screen, which is what SDUI needs). `mobile` is the base band; a band not named
-  // inherits the previous one. Thresholds are SERVED (`theme.breakpoint.*`); the SDK
-  // holds no widths. The rule also marks the grid `container-type: inline-size`, so
-  // its own children (`span`) can query it, same as the inline `columns` form.
-  if (s?.columns && typeof s.columns === "object") {
-    const map = s.columns as Record<string, unknown>;
-    const base = map.mobile ?? map.tablet ?? map.desktop ?? map.full;
-    if (base != null) {
-      const cls = `uno-cols-${hashStr(JSON.stringify(map))}`;
-      let rules = `.${cls}{display:grid;grid-template-columns:repeat(${String(base)},minmax(0,1fr));align-content:start;container-type:inline-size}`;
-      for (const band of ["tablet", "desktop", "full"] as const) {
-        const w = theme.breakpoint?.[band];
-        if (map[band] != null && w) {
-          rules += `@container (min-width:${w}){.${cls}{grid-template-columns:repeat(${String(map[band])},minmax(0,1fr))}}`;
-        }
-      }
-      classes.push(cls);
-      styleEls.push(<style key="columns">{rules}</style>);
-    }
-  }
-  // `hideAbove` — the mirror: hide when the container is WIDER than the width. Together
-  // these are the whole layout-switch mechanism for space-responsive components: the
-  // compact layout carries hideAbove, the full layout hideBelow, and the container's
-  // width (granted by the template's surface) picks the rendering — never a state key.
-  if (s?.hideAbove) {
-    const w = theme.space[s.hideAbove as string] ?? theme.layout?.[s.hideAbove as string] ?? (s.hideAbove as string);
-    const cls = `uno-hideabove-${hashStr(String(w))}`;
-    classes.push(cls);
-    styleEls.push(<style key="hideAbove">{`@container (min-width:${w}){.${cls}{display:none !important}}`}</style>);
-  }
-  return { className: classes.join(" ") || undefined, styleEls, style, disabled };
-}
-
-/** `Box`/`Stack`/`Row`/`Column` — the generic container (`<div>`). Children are
- *  pre-rendered by the dispatcher; layout/look come entirely from node.style. */
-/**
- * INSPECTABILITY: a node carrying `$id` stamps it on the element it renders.
- *
- * Nothing in the SDK reads it back and nothing looks different without it. It exists so a
- * TOOL can ask "which element did this node produce" — an authoring surface boxing the node
- * under the cursor, for instance. The renderer is the only place that can answer, because
- * `Switch`, `Each` and `visibleWhen` mean the rendered tree is not the definition tree, so
- * the link is made while rendering or not at all.
- *
- * `$id` is assigned by whoever supplies the definition, never by an author. This is a
- * generic behaviour, not a style and not a UX shape: no primitive is added, no layout
- * decision is taken, and a definition without `$id` renders byte-identically.
- */
-const inspectId = (node: UnoverseNode): string | undefined => {
-  const id = (node as { $id?: unknown }).$id;
-  return typeof id === "string" ? id : undefined;
-};
-
-export function BoxView({ node, data, theme, children, onAction }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme; children?: ReactNode; onAction?: ActionHandler }): ReactNode {
-  const { className, styleEls, style } = nodeChrome(node, data, theme);
-  const scrollRef = useAutoScrollToEnd(node.autoScroll === true);
-  const revealRef = useRevealWhenStuck(node.revealOnStick === true);
-  const sel = (node as { selection?: { label?: string; action?: unknown } }).selection;
-  const { selRef, pick, clearPick } = useTextSelection(!!sel);
-  // A selection host must anchor its floating affordance; default to relative only when
-  // the definition declared no position of its own (sticky/absolute roots keep theirs).
-  const hostStyle = sel && !(style as CSSProperties).position ? ({ ...style, position: "relative" } as CSSProperties) : style;
-  // A STAGE (`style.stage: 1280x720`): the Box is drawn at that fixed size and scaled as one
-  // piece to the width it is given, the way slide tools render a slide. Its layout never
-  // reflows, so what is aligned stays aligned on every screen.
-  const stage = /^(\d+)x(\d+)$/.exec(String((node.style as { stage?: unknown } | undefined)?.stage ?? ""));
-  const stageW = stage ? Number(stage[1]) : 0;
-  const stageRef = useRef<HTMLDivElement>(null);
-  const [scale, setScale] = useState(1);
-  useLayoutEffect(() => {
-    const el = stageRef.current;
-    if (!stageW || !el) return;
-    const ro = new ResizeObserver(() => setScale(el.clientWidth / stageW));
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [stageW]);
-  if (stage)
-    return (
-      <div ref={stageRef} style={{ position: "relative", width: "100%", aspectRatio: `${stage[1]} / ${stage[2]}` }}>
-        <div className={className} style={{ ...hostStyle, position: "absolute", top: 0, left: 0, width: stageW, height: Number(stage[2]), transform: `scale(${scale})`, transformOrigin: "0 0" }} data-unoverse-id={inspectId(node)}>
-          {styleEls}
-          {children}
-        </div>
-      </div>
-    );
-  return (
-    <div ref={scrollRef ?? revealRef ?? selRef} className={className} style={hostStyle} data-unoverse-id={inspectId(node)}>
-      {styleEls}
-      {children}
-      {sel && pick && (
-        <button
-          style={{
-            position: "absolute",
-            top: pick.top,
-            left: pick.left,
-            transform: "translate(-50%, -100%)",
-            zIndex: 40,
-            whiteSpace: "nowrap",
-            ...styleToCss(((theme as { selection?: { chip?: Record<string, unknown> } }).selection?.chip ?? SELECTION_CHIP_BUILTIN) as Record<string, unknown>, theme),
-          }}
-          onMouseDown={(e) => e.preventDefault() /* keep the selection alive through the click */}
-          onClick={() => {
-            onAction?.((sel.action as Parameters<ActionHandler>[0]) ?? "select", { ...data, selection: pick.text });
-            clearPick();
-          }}
-        >
-          {sel.label ?? "Comment"}
-        </button>
-      )}
-    </div>
-  );
-}
-
-// The selection chip's look: a SERVED recipe (`theme.selection.chip`) when the org styles
-// one; else this neutral fallback of token NAMES resolved against the same theme — the
-// skeleton-shimmer pattern. The SDK still authors no values, only names.
-const SELECTION_CHIP_BUILTIN: Record<string, unknown> = {
-  background: "action.primary",
-  color: "text.inverse",
-  font: "body.sm",
-  radius: "full",
-  padding: ["1", "3"],
-  shadow: "lg",
-  border: "none",
-  cursor: "pointer",
-};
-
-/**
- * Generic "text was selected here" behavior (opt-in via `node.selection`). The renderer is
- * the ONLY layer that can know a reader selected text — definitions cannot express it —
- * so, like `skeleton` and `autoScroll`, capture is SDK behavior while every consequence
- * stays authored: the node declares the ACTION (fired with the selected text in scope as
- * `{{selection}}`) and the chip's look is served (`theme.selection.chip`). Selection is
- * read from the node's own root (shadow-DOM aware); collapsing it dismisses the chip.
- */
-function useTextSelection(enabled: boolean) {
-  const selRef = useRef<HTMLDivElement | null>(null);
-  const [pick, setPick] = useState<{ text: string; top: number; left: number } | null>(null);
-  useEffect(() => {
-    if (!enabled) return;
-    const el = selRef.current;
-    if (!el) return;
-    const read = () => {
-      const root = el.getRootNode() as Document | ShadowRoot;
-      const s = (root as unknown as { getSelection?: () => Selection | null }).getSelection?.() ?? window.getSelection();
-      if (!s || s.isCollapsed || s.rangeCount === 0) return setPick(null);
-      const range = s.getRangeAt(0);
-      if (!el.contains(range.commonAncestorContainer)) return setPick(null);
-      const text = s.toString().trim();
-      if (!text) return setPick(null);
-      const r = range.getBoundingClientRect();
-      const host = el.getBoundingClientRect();
-      setPick({ text, top: r.top - host.top, left: Math.min(Math.max(0, r.left - host.left + r.width / 2), host.width) });
-    };
-    const up = () => window.setTimeout(read, 0); // after the browser settles the selection
-    // Listen on the DOCUMENT, not the host: a drag-select routinely ends with the mouse
-    // released outside the host (over a rail, past the edge), and mouse events are
-    // composed, so they cross the shadow boundary to reach it. `read` still guards with
-    // `el.contains(...)`, so only selections inside this host raise the chip.
-    const doc = el.ownerDocument;
-    doc.addEventListener("mouseup", up);
-    return () => doc.removeEventListener("mouseup", up);
-  }, [enabled]);
-  return { selRef: enabled ? selRef : undefined, pick, clearPick: () => setPick(null) };
-}
-
-/**
- * Generic "stick to the newest content" behavior for a scroll container (opt-in via
- * `node.autoScroll`). Smooth-scrolls to the bottom whenever content grows — a new turn
- * (childList change) OR streaming text (a child resizing) — but only while the user is
- * already near the bottom, so scrolling up to read history is never yanked back down.
- * NOT chat-specific: any `overflow:auto` Box can opt in. The SDK owns behaviour, never
- * styles — the scroll container itself is defined in `design/` (the conversation state box).
- */
-function useAutoScrollToEnd(enabled: boolean) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!enabled) return;
-    const el = ref.current;
-    if (!el) return;
-    const nearBottom = () => el.scrollHeight - el.scrollTop - el.clientHeight < 140;
-    const stick = () => {
-      if (nearBottom()) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
-    };
-    el.scrollTop = el.scrollHeight; // land at the end on mount (no animation)
-    const ro = new ResizeObserver(stick); // catches streaming text growing a turn's height
-    const observeKids = () => {
-      for (const kid of Array.from(el.children)) ro.observe(kid);
-    };
-    observeKids();
-    const mo = new MutationObserver(() => {
-      observeKids(); // new turns → observe them too
-      stick();
-    });
-    mo.observe(el, { childList: true, subtree: true });
-    return () => {
-      ro.disconnect();
-      mo.disconnect();
-    };
-  }, [enabled]);
-  return enabled ? ref : undefined;
-}
-
-/**
- * Generic "sticky bar that reveals only once you've scrolled past the element before it"
- * (opt-in via `node.revealOnStick`). Pins the bar at the top (its own `position: sticky`
- * + `top` in `design/`) and, using an IntersectionObserver on the bar's PREVIOUS sibling as
- * the sentinel (e.g. a hero image), keeps it hidden while that sibling is on screen and
- * fades it in once the sibling scrolls away. A negative margin removes the bar's flow
- * footprint so it OVERLAYS the content (no gap at the top). NOT card-specific: any sticky
- * bar can opt in. The SDK owns behaviour, never styles — the bar's look lives in `design/`.
- */
-function useRevealWhenStuck(enabled: boolean) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!enabled) return;
-    const el = ref.current;
-    if (!el) return;
-    const sentinel = el.previousElementSibling; // reveal the bar once THIS scrolls away
-    // Overlay, not push: cancel the bar's own height so content sits under it, bar pins on top.
-    el.style.marginBottom = `-${el.offsetHeight}px`;
-    el.style.transition = "opacity 200ms ease, transform 200ms ease";
-    const hide = () => {
-      el.style.opacity = "0";
-      el.style.transform = "translateY(-8px)";
-      el.style.pointerEvents = "none";
-    };
-    const show = () => {
-      el.style.opacity = "1";
-      el.style.transform = "translateY(0)";
-      el.style.pointerEvents = "auto";
-    };
-    hide();
-    if (!sentinel) return void show(); // no sentinel to hide behind → just show
-    const io = new IntersectionObserver(([e]) => (e.isIntersecting ? hide() : show()), { threshold: 0 });
-    io.observe(sentinel);
-    return () => io.disconnect();
-  }, [enabled]);
-  return enabled ? ref : undefined;
-}
-
-/** `Text` — a bound string (`<span>`). */
-export function TextView({ node, data, theme }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme }): ReactNode {
-  // Literal `value` fallback: components are microapps — static copy is HARDCODED in the
-  // def, props exist only for state (UNOVERSE_AUTHORING.md). bind wins when present.
-  return <span style={styleToCss(node.style, theme, data)} data-unoverse-id={inspectId(node)}>{bound(node.bind?.value, data) ?? (node.value as ReactNode)}</span>;
-}
-
-/** `Image` — a bound OR literal src (`<img>`). */
-export function ImageView({ node, data, theme }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme }): ReactNode {
-  return <img data-unoverse-id={inspectId(node)} style={styleToCss(node.style, theme, data)} src={bound(node.bind?.src, data) ?? node.src} alt={bound(node.bind?.alt, data) ?? node.alt ?? ""} />;
-}
-
-/** `Button` — fires `onAction(node.action, data)`. Content is a bound label OR composed
- *  children (so an Icon can sit in a button). The SDK authors no button styling. */
-export function ButtonView({ node, data, theme, onAction, children }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme; onAction?: ActionHandler; children?: ReactNode }): ReactNode {
-  const { className, styleEls, style, disabled } = nodeChrome(node, data, theme);
-  return (
-    <button className={className} style={style} disabled={disabled} data-unoverse-id={inspectId(node)} onClick={() => onAction?.(nodeAction(node, "click"), data)}>
-      {styleEls}
-      {node.children?.length ? children : bound(node.bind?.label, data)}
-    </button>
-  );
-}
-
-/**
- * `Orb` — a procedural "the assistant is doing something" animation, drawn
- * per-frame on a 2D canvas (see ./orb — vendored thinking-orbs, MIT). This is
- * the ONE class of motion keyframe data cannot express (per-frame math, depth
- * occlusion), so like Skeleton's shimmer the drawing lives WITH the primitive;
- * every authoring decision stays data: `state` (which of the nine animations —
- * bindable), `size` (64 avatar / 20 inline), `speed`, `theme` override.
- * Unknown/unbound state degrades to "working", never a crash.
- */
-const ORB_STATES = new Set(["working", "searching", "solving", "listening", "connecting", "weaving", "composing", "breathing", "shaping", "halo", "sonar", "shimmer", "pulse"]);
-export function OrbView({ node, data, theme }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme }): ReactNode {
-  const n = node as UnoverseNode & { state?: string; size?: number | string; speed?: number | string; theme?: string };
-  // Every knob is data-driven OR literal, like Icon: `bind.<knob>` wins, the attribute is the fallback.
-  const knob = (name: "state" | "size" | "speed") =>
-    (node.bind?.[name] ? (data[node.bind[name] as string] as string | number | undefined) : undefined) ?? n[name];
-  const raw = knob("state") as string | undefined;
-  // UNKNOWN NAME → the calm ANNULAR fallback, never the sphere. A bad/stale name is an
-  // authoring or version mismatch, and the orb most often sits behind a face: degrading
-  // to `working` threw 3-D particles across the portrait (the loudest mode in the set) to
-  // signal a problem the viewer cannot act on. `halo` is quiet, ring-shaped, and wrong in
-  // no context — a mismatch should look calm, not broken.
-  const state = raw && ORB_STATES.has(raw) ? (raw as OrbState) : "halo";
-  const size = Number(knob("size")) > 0 ? Number(knob("size")) : 64;
-  const speed = Number(knob("speed")) > 0 ? Number(knob("speed")) : 1;
-  const orbTheme: OrbTheme = n.theme === "dark" || n.theme === "light" ? n.theme : "auto";
-  // Brand ink comes from the STYLE vocabulary (`color: <token>`), never a prop — LAW 1:
-  // a definition names a token, the theme serves the value, the engine tints toward it.
-  const css = styleToCss(node.style ?? {}, theme, data);
-  return <ThinkingOrb state={state} size={size as OrbSize} speed={speed} theme={orbTheme} ink={cssColorToRgb(css.color as string | undefined)} style={css} />;
-}
-
-/** #rgb / #rrggbb / rgb()/rgba() → an rgb tuple; anything else (gradients, names) → null (neutral ink). */
-function cssColorToRgb(c?: string): [number, number, number] | null {
-  if (!c) return null;
-  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(c.trim());
-  if (hex) {
-    const h = hex[1].length === 3 ? [...hex[1]].map((x) => x + x).join("") : hex[1];
-    return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)) as [number, number, number];
-  }
-  const fn = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(c.trim());
-  return fn ? [Number(fn[1]), Number(fn[2]), Number(fn[3])] : null;
-}
-
-/** Unknown node type — render children so the tree doesn't break (degenerate fallback). */
-export function UnknownView({ node, theme, children }: { node: UnoverseNode; theme: ResolvedTheme; children?: ReactNode }): ReactNode {
-  return (
-    <div style={styleToCss(node.style, theme)} data-unoverse-unknown={node.type}>
-      {children}
-    </div>
-  );
-}
-
-/**
- * `Icon` — leaf primitive (the irreducible SVG, like Text→<span>/Image→<img>).
- * Renders a named glyph whose element DATA is SERVED (theme.icons): the server sources
- * it from an icon pack (control plane) and serves `{ viewBox, attrs, children }`, where
- * children are raw SVG elements `[tag, attrs]`. The SDK NEVER bundles a pack — it's
- * pack-agnostic, just rendering served elements. Size = node.style width/height, colour
- * = node.style color (→ `currentColor`). Name is literal (`node.icon`) or bound
- * (`bind.name`). NOT a composite — one glyph, no buttons/chrome.
- */
-export function IconView({ name, style, theme }: { name?: string; style?: Record<string, unknown>; theme: ResolvedTheme }): ReactNode {
-  const set = (theme.icons ?? {}) as Record<string, { viewBox?: string; attrs?: Record<string, unknown>; children?: [string, Record<string, unknown>][] }>;
-  const ic = name ? set[name] : undefined;
-  if (!ic) return null;
-  const children = Array.isArray(ic.children) ? ic.children : [];
-  return (
-    <svg viewBox={ic.viewBox ?? "0 0 24 24"} {...(ic.attrs ?? {})} aria-hidden="true" style={styleToCss(style ?? {}, theme)}>
-      {children.map(([tag, attrs], i) => createElement(tag, { key: i, ...attrs }))}
-    </svg>
-  );
-}
-
-/**
- * `Skeleton` — built-in loading placeholder. ALL dimensions are DATA, fetched
- * from the theme (theme.skeleton ← design/styles/semantic/skeleton.json). The SDK
- * authors nothing here but structure (flex/full). `bars` are 'width height' pairs.
- */
-export function SkeletonView({ variant = "text", theme }: { variant?: string; theme: ResolvedTheme }): ReactNode {
-  // DEFENSIVE BY LAW: a loading GHOST must never crash the app. Every token read
-  // tolerates absence (missing token = that dimension simply unset — we still author
-  // no values); a theme without a skeleton recipe renders inert placeholders, never
-  // a TypeError that unmounts the whole tree (observed live: blank panel).
-  const sk = (theme.skeleton ?? {}) as Record<string, any>;
-  // SELF-CONTAINED shimmer: the loading ghost is generic chrome, so its motion lives
-  // WITH the primitive — no cross-file dependency on an org's keyframes recipe that
-  // silently breaks when absent. The sweep is a neutral white-alpha overlay (brand
-  // colors still come from the served `fill`); a served `skeleton.shimmer` object
-  // overrides it, and `skeleton.shimmer: false` disables motion entirely.
-  const SHIMMER_BUILTIN: CSSProperties = {
-    backgroundImage: "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%)",
-    backgroundSize: "200% 100%",
-    animation: "uno-skeleton-shimmer 1.4s ease-in-out infinite",
-  };
-  const shimmer: CSSProperties = sk.shimmer === false ? {} : typeof sk.shimmer === "object" ? (sk.shimmer as CSSProperties) : SHIMMER_BUILTIN;
-  const shimmerKeyframes =
-    sk.shimmer === false ? null : (
-      <style>{"@keyframes uno-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}"}</style>
-    );
-  const bar = (spec: string, i: number): ReactNode => {
-    const [w, h] = String(spec).split(" ");
-    return <div key={i} style={{ width: w, height: h, background: sk.fill, borderRadius: sk.barRadius, ...shimmer }} />;
-  };
-  if (variant === "image")
-    return (
-      <>
-        {shimmerKeyframes}
-        <div style={{ width: "100%", height: "100%", minHeight: sk.image?.minHeight, background: sk.fill, borderRadius: sk.radius, ...shimmer }} />
-      </>
-    );
-  if (variant === "card")
-    return (
-      <>
-        {shimmerKeyframes}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: sk.gap,
-          padding: sk.card?.padding,
-          border: theme.borderWidth?.thin && sk.fill ? `${theme.borderWidth.thin} solid ${sk.fill}` : undefined,
-          borderRadius: sk.radius,
-        }}
-      >
-        {(Array.isArray(sk.card?.bars) ? (sk.card.bars as string[]) : []).map(bar)}
-      </div>
-      </>
-    );
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: sk.gap }}>
-      {shimmerKeyframes}
-      {(Array.isArray(sk.text?.bars) ? (sk.text.bars as string[]) : []).map(bar)}
-    </div>
-  );
-}
-
-/**
- * `Select` — the irreducible `<select>`, like Text→<span> and Input→<input>.
- *
- * THE ONE CONTROL THAT CANNOT BE COMPOSED. Every other form field in this platform is
- * built from Box, Text, Button and Input, as data. A closed set of two hundred countries
- * is where that stops: laying them out is unusable, filtering them is logic a definition
- * may not carry, and a hand-rolled menu forfeits the OS picker, type-to-search, keyboard
- * navigation and screen-reader semantics that the real element gives for nothing.
- *
- * It reports a change exactly as a controlled Input does — `onAction("input", { field,
- * text })` — so the bound field name IS the key the answer lands in, and a select needs no
- * mechanism the platform does not already have.
- *
- * ⛔ NO CHROME HERE. No custom arrow, no popup, no styling: `node.style` is the whole look,
- * and the options are DATA (`bind.options`, entries of `{ value, label }` or plain
- * strings). A searchable picker is a different control and does not belong in this one.
- */
-export function SelectView({ node, data, theme, onAction }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme; onAction?: ActionHandler }): ReactNode {
-  const field = node.bind?.value;
-  const value = field != null ? String(data[field] ?? "") : "";
-  const raw = node.bind?.options ? data[node.bind.options] : (node as { options?: unknown }).options;
-  const options = (Array.isArray(raw) ? raw : []).map((o) =>
-    o != null && typeof o === "object"
-      ? { value: String((o as Record<string, unknown>).value ?? (o as Record<string, unknown>).label ?? ""), label: String((o as Record<string, unknown>).label ?? (o as Record<string, unknown>).value ?? "") }
-      : { value: String(o), label: String(o) },
-  );
-  const { style, disabled } = nodeChrome(node, data, theme);
-  return (
-    <select
-      style={style}
-      disabled={disabled}
-      value={value}
-      data-unoverse-id={inspectId(node)}
-      onChange={(e) => field != null && onAction?.("input", { text: e.target.value, field })}
-    >
-      {/* The placeholder is CONTENT, exactly as it is on an Input: an unanswered select
-          must say what it wants rather than pre-selecting the first option and claiming an
-          answer nobody gave. */}
-      {node.placeholder != null && (
-        <option value="" disabled>
-          {node.placeholder}
-        </option>
-      )}
-      {options.map((o) => (
-        <option key={o.value} value={o.value}>
-          {o.label}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-/**
- * `Input` — single-line composer (the irreducible `<input>`, like Text→<span>).
- * Holds its own draft text (local, not store state); on Enter it fires
- * `onAction(node.action, { text })` and clears. The SDK authors NO styling here —
- * look comes entirely from `node.style` (data), exactly like Button. `placeholder`
- * is copy (content), not a style value.
- *
- * ⛔ DO NOT add icons, send buttons, pills, or any composer chrome here. That is
- *    UX — compose it in a DEFINITION from generic primitives (Box + Icon + Input).
- *    A primitive renders ONE generic element; it never encodes a specific layout.
- */
-export function InputView({ node, data, theme, onAction }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme; onAction?: ActionHandler }): ReactNode {
-  // CONTROLLED when `bind.value` is set: value comes from shared data and changes are
-  // emitted as an "input" action (the channel writes it to the store). This is what lets
-  // a sibling send button submit the draft. Otherwise the field keeps its own local text.
-  const field = node.bind?.value;
-  const [local, setLocal] = useState("");
-  const value = field != null ? String(data[field] ?? "") : local;
-  // GENERIC constraints on what the field ACCEPTS — the same class of fact as
-  // `multiline`/`rows`, never a layout and never a named UX. `maxLength` caps the
-  // length; `inputMode: "numeric"` asks the platform for a digit keypad AND limits
-  // the value to 0-9. An OTP box is `maxLength: 1` + `inputMode: "numeric"` in a
-  // DEFINITION — the SDK knows nothing about OTP, verification, or six boxes.
-  const maxLength = (node as { maxLength?: number }).maxLength;
-  const numeric = (node as { inputMode?: string }).inputMode === "numeric";
-  // `autoComplete` — the browser's autofill hint, passed straight through. Without one,
-  // Chrome GUESSES from shape: a row of short numeric boxes reads as a card/ID number and
-  // it offers to save the digits. The definition says what the field IS (a one-time code,
-  // a postal code, "off") and the guess never happens. Generic pass-through: the SDK holds
-  // no list of values and no idea what a one-time code is.
-  const autoComplete = (node as { autoComplete?: string }).autoComplete;
-  // `type` — WHAT THE FIELD IS, passed to the platform: `date` gets the OS date picker,
-  // `tel` the phone keypad, `file` the file chooser. The same class of generic constraint
-  // as `maxLength` and `inputMode`, and the reason a definition never has to hand-roll a
-  // calendar out of Boxes. The SDK holds no list of types and no opinion about them.
-  const inputType = (node as { inputType?: string }).inputType;
-  // `maxLength` is enforced by the element itself, but `inputMode` is only a HINT —
-  // a desktop keyboard types straight past it — so the digit rule is applied here.
-  const accept = (t: string) => {
-    const kept = numeric ? t.replace(/[^0-9]/g, "") : t;
-    return maxLength != null ? kept.slice(0, maxLength) : kept;
-  };
-  // CONTROLLED: report the change as an "input" event carrying WHICH field changed.
-  // The component dispatcher writes that field into this instance's slice (local two-way
-  // binding, §2e-3); the template composer's channel reads `text` and ignores `field`
-  // (its bound field is the shared `draft`). The SDK authors no UX — just the fact.
-  // `advanceOnFill` — when this field is FULL, focus moves to the next field that opted
-  // in; Backspace in an empty one moves back. A generic fact about a field that is one
-  // of a SEQUENCE, opted into per field so an ordinary `maxLength` text box never yanks
-  // focus away the moment it fills. The SDK still knows nothing about codes or six boxes:
-  // it walks the marked peers in document order and moves focus one step.
-  const advanceOnFill = (node as { advanceOnFill?: boolean }).advanceOnFill === true;
-  const el = useRef<HTMLInputElement>(null);
-  const stepFocus = (dir: 1 | -1) => {
-    const self = el.current;
-    if (!self) return;
-    // Scope the walk to this render's ROOT — the SDK renders inside a shadow root, so
-    // `document` would miss the peers entirely (and, on a page with two instances,
-    // could reach the wrong ones).
-    const root = self.getRootNode() as Document | ShadowRoot;
-    const peers = Array.from(root.querySelectorAll<HTMLInputElement>("input[data-uno-advance]"));
-    const next = peers[peers.indexOf(self) + dir];
-    if (!next) return;
-    next.focus();
-    next.select();
-  };
-  // CONTROLLED: report the change as an "input" event carrying WHICH field changed.
-  // The component dispatcher writes that field into this instance's slice (local two-way
-  // binding, §2e-3); the template composer's channel reads `text` and ignores `field`
-  // (its bound field is the shared `draft`). The SDK authors no UX — just the fact.
-  const setValue = (raw: string) => {
-    const t = accept(raw);
-    // Move BEFORE the store round-trip: focus is DOM state, independent of the re-render,
-    // so a fast typist's next keystroke lands in the next field rather than this one.
-    if (advanceOnFill && maxLength != null && t.length >= maxLength) stepFocus(1);
-    return field != null ? onAction?.("input", { text: t, field }) : setLocal(t);
-  };
-  const submit = () => {
-    const t = value.trim();
-    if (!t) return;
-    onAction?.(nodeAction(node, "submit"), { text: t });
-    if (field == null) setLocal("");
-  };
-  const { style, disabled } = nodeChrome(node, data, theme);
-  // `multiline: true` — the same irreducible input as a `<textarea>` (critique, notes —
-  // anything longer than one line). Enter inserts a newline; Cmd/Ctrl+Enter submits.
-  // Same element class, no chrome, no new primitive.
-  if ((node as { multiline?: boolean }).multiline === true) {
-    return (
-      <textarea
-        style={style}
-        disabled={disabled}
-        value={value}
-        placeholder={node.placeholder}
-        maxLength={maxLength}
-        rows={(node as { rows?: number }).rows ?? 3}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault();
-            submit();
-          }
-        }}
-      />
-    );
-  }
-  return (
-    <input
-      ref={el}
-      style={style}
-      disabled={disabled}
-      // A file input is never controlled: assigning its value is a security error in every
-      // browser, so the chosen name lives in the data and the element stays uncontrolled.
-      value={inputType === "file" ? undefined : value}
-      placeholder={node.placeholder}
-      type={inputType}
-      maxLength={maxLength}
-      inputMode={numeric ? "numeric" : undefined}
-      autoComplete={autoComplete}
-      data-uno-advance={advanceOnFill ? "" : undefined}
-      onChange={(e) => {
-        // A FILE FIELD REPORTS ITS FILES, not its value: the DOM's value for one is a fake
-        // path, and the bytes are the host's business (an upload target, a stored
-        // reference) rather than the renderer's. The SDK states what was chosen and stops.
-        if (inputType === "file") {
-          const picked = Array.from(e.target.files ?? []).map((f) => ({ name: f.name, size: f.size, type: f.type }));
-          if (field != null) onAction?.("input", { text: picked.map((f) => f.name).join(", "), field, files: picked });
-          return;
-        }
-        setValue(e.target.value);
-      }}
-      onKeyDown={(e) => {
-        // Backspace in an ALREADY-empty field steps back, so correcting a sequence never
-        // needs the mouse. A field with content just deletes it (the default).
-        if (advanceOnFill && e.key === "Backspace" && value === "") {
-          e.preventDefault();
-          stepFocus(-1);
-          return;
-        }
-        if (e.key === "Enter" && !e.shiftKey) {
-          e.preventDefault();
-          submit();
-        }
-      }}
-    />
-  );
-}
-
-/**
- * WHAT A CITATION'S OPEN BUTTON FIRES (docs/unoverse/data/objects/citations-in-answers.md): the
- * action the Markdown node declares in `citeAction`, with the render data. Carried by context,
- * not baked into the overrides, so the overrides stay built once per theme and a marker's open
- * pop-up survives the answer streaming on around it.
- */
-const CiteContext = createContext<{ action?: string; onAction?: ActionHandler; data: Record<string, unknown> }>({ data: {} });
-
-/**
- * A CITATION STILL ARRIVING is held back (citations-in-answers.md): while an answer streams, the
- * tail from an open `[1](cite:` to its closing `)` would draw as a long line of raw link and then
- * collapse into its marker, jolting the text once per citation. Only the tail is touched, and only
- * a numbered label (a citation's), so finished text and web links draw exactly as written.
- */
-const OPEN_CITATION = /\[\d{0,3}(?:\](?:\((?:c(?:i(?:t(?:e(?::[^)\n]*)?)?)?)?)?)?)?$/;
-export function holdOpenCitation(text: string): string {
-  return text.replace(OPEN_CITATION, "");
-}
-
-/**
- * A CITATION'S QUOTE STAYS ONE CELL (citations-in-answers.md, 2026-09-15): a quote of a table row
- * carried its pipes ("Total | 10") into the link's title, and inside an answer's own table the
- * pipe split the row and left the marker raw. Before the markdown is parsed, a pipe inside a
- * `cite:` link's title becomes a broken bar and a line break a space; the words still read.
- */
-const CITATION_TITLE = /(\]\(cite:[^)\s]*\s+")([^"]*)("\))/g;
-export function keepCitationsWhole(text: string): string {
-  return text.replace(CITATION_TITLE, (_, open: string, quote: string, close: string) => `${open}${quote.replace(/\|/g, "\u00a6").replace(/\s*\n\s*/g, " ")}${close}`);
-}
-
-/**
- * WHERE A POP-UP FITS (citations-in-answers.md): the horizontal shift that keeps a box of this
- * width inside the window from an anchor at `left`, and whether it opens above the anchor
- * because below there is no room and above there is. A margin keeps it off the very edge.
- */
-export function fitPopover(anchor: { left: number; top: number; bottom: number }, box: { width: number; height: number }, view: { width: number; height: number }, margin = 8) {
-  const over = anchor.left + box.width - (view.width - margin);
-  const shift = Math.max(over > 0 ? -over : 0, margin - anchor.left);
-  const above = anchor.bottom + box.height + margin > view.height && anchor.top - box.height - margin >= 0;
-  return { shift, above };
-}
-
-/** A `cite:` link's parts: `cite:<document>?part=&page=&doc=`, its title the quoted words. */
-function citationOf(href: string, title?: string) {
-  try {
-    const u = new URL(href);
-    return { document: decodeURIComponent(u.pathname), part: u.searchParams.get("part") ?? "", page: u.searchParams.get("page") ?? "", doc: u.searchParams.get("doc") ?? "", quote: title ?? "" };
-  } catch {
-    return null;
-  }
-}
-
-/**
- * markdown-to-jsx overrides for the `Markdown` primitive.
- *
- * ⛔ AUTHORS ZERO STYLE VALUES. Every element style is read verbatim from the
- *    SERVED prose recipe (`theme.prose` ← design/styles/semantic/prose.json). The SDK
- *    only maps element → recipe key and supplies BEHAVIOUR (target=_blank, image
- *    error-fallback). No hex, no px/rem, no weights here — they live in design/.
- *
- * Built once per theme (stable component identities so streaming re-renders don't
- * remount images and drop their broken-state).
- */
-function buildMarkdownOverrides(theme: ResolvedTheme, inheritLinkColor = false) {
-  const p = theme.prose as Record<string, CSSProperties | Record<string, string> | string>;
-  const s = (k: string) => (p[k] as CSSProperties | undefined) ?? {};
-  // Heading element → served text-style NAME (the map lives in the recipe, not here).
-  const headings = (p.heading as Record<string, string>) ?? {};
-  const head = (tag: string) => (theme.text[headings[tag]] as CSSProperties | undefined) ?? {};
-
-  // Served external-link glyph (theme.icons.externalLink), styled by served prose.linkIcon.
-  // The icon inherits the link's colour via `currentColor`. The SDK authors no geometry.
-  const li = (theme.icons?.externalLink ?? {}) as { viewBox?: string; attrs?: Record<string, unknown>; children?: [string, Record<string, unknown>][] };
-  const linkArrow = li.children?.length ? (
-    <svg viewBox={li.viewBox ?? "0 0 24 24"} {...(li.attrs ?? {})} aria-hidden="true" style={s("linkIcon")}>
-      {li.children.map(([tag, attrs], i) => createElement(tag, { key: i, ...attrs }))}
-    </svg>
-  ) : null;
-  // A definition that declares `color` on its Markdown node owns its anchors'
-  // color too (`inherit` — no value authored here); the served recipe stays the
-  // default for undeclared nodes (chat prose).
-  const ExternalLink = ({ children, ...a }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
-    <a {...a} target="_blank" rel="noopener noreferrer" style={inheritLinkColor ? { ...s("link"), color: "inherit" } : s("link")}>
-      {children}
-      {linkArrow}
-    </a>
-  );
-  // A CITATION (citations-in-answers.md): a `cite:` link is a marker after the fact it supports.
-  // Tapped, a pop-up shows the quoted words, the document and the page, and an Open button that
-  // fires the node's `citeAction` with the citation. Behaviour only: every look is a served
-  // prose key (citeAnchor, citeMark, citePopover, citeQuote, citeSource, citeOpen).
-  const CiteMark = ({ href, title, children }: { href: string; title?: string; children?: ReactNode }) => {
-    const [open, setOpen] = useState(false);
-    const box = useRef<HTMLSpanElement>(null);
-    const pop = useRef<HTMLSpanElement>(null);
-    const [place, setPlace] = useState({ shift: 0, above: false });
-    // ALWAYS ON SCREEN: measured as it opens, and again when the window changes size.
-    useLayoutEffect(() => {
-      if (!open) return;
-      const fit = () => {
-        if (!box.current || !pop.current) return;
-        const a = box.current.getBoundingClientRect();
-        setPlace(fitPopover(a, { width: pop.current.offsetWidth, height: pop.current.offsetHeight }, { width: window.innerWidth, height: window.innerHeight }));
-      };
-      fit();
-      window.addEventListener("resize", fit);
-      return () => window.removeEventListener("resize", fit);
-    }, [open]);
-    const { action, onAction, data } = useContext(CiteContext);
-    const c = citationOf(href, title);
-    useEffect(() => {
-      if (!open) return;
-      const away = (e: Event) => { if (box.current && !e.composedPath().includes(box.current)) setOpen(false); };
-      const esc = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
-      document.addEventListener("pointerdown", away);
-      document.addEventListener("keydown", esc);
-      return () => { document.removeEventListener("pointerdown", away); document.removeEventListener("keydown", esc); };
-    }, [open]);
-    if (!c) return <>{children}</>;
-    const source = [c.doc, c.page ? `p. ${c.page}` : ""].filter(Boolean).join(" · ");
-    return (
-      <span ref={box} style={s("citeAnchor")}>
-        <button type="button" aria-expanded={open} aria-label={source ? `Source: ${source}` : "Source"} style={s("citeMark")} onClick={() => setOpen((o) => !o)}>
-          {children}
-        </button>
-        {open && (
-          <span ref={pop} role="dialog" style={{ ...s("citePopover"), transform: `translateX(${place.shift}px)`, ...(place.above ? { top: "auto", bottom: "100%" } : {}) }}>
-            {c.quote && <span style={{ display: "block", ...s("citeQuote") }}>“{c.quote}”</span>}
-            {source && <span style={{ display: "block", ...s("citeSource") }}>{source}</span>}
-            {action && onAction && (
-              <button type="button" style={s("citeOpen")} onClick={() => { setOpen(false); onAction(action, { ...data, citation: c }); }}>
-                Open
-              </button>
-            )}
-          </span>
-        )}
-      </span>
-    );
-  };
-  const Link = (a: React.AnchorHTMLAttributes<HTMLAnchorElement>) =>
-    typeof a.href === "string" && a.href.startsWith("cite:") ? <CiteMark href={a.href} title={a.title}>{a.children}</CiteMark> : <ExternalLink {...a} />;
-  // Wide tables scroll instead of crushing columns (legacy ScrollableTable).
-  const ScrollableTable = (a: React.TableHTMLAttributes<HTMLTableElement>) => (
-    <div style={s("tableWrap")}>
-      <table {...a} style={s("table")} />
-    </div>
-  );
-  // Broken external image URLs degrade to alt text, not a broken-image icon.
-  const MarkdownImage = ({ src, alt, title }: React.ImgHTMLAttributes<HTMLImageElement>) => {
-    const [broken, setBroken] = useState(false);
-    if (!src || broken) return <span style={s("imageFallback")}>{alt || "Image unavailable"}</span>;
-    return (
-      <img src={src as string} alt={alt || ""} title={title} loading="lazy" decoding="async" onError={() => setBroken(true)} style={s("image")} />
-    );
-  };
-
-  return {
-    p: { props: { style: s("paragraph") } },
-    a: { component: Link },
-    table: { component: ScrollableTable },
-    img: { component: MarkdownImage },
-    // INLINE MARKS and BLOCKS. Authored copy uses all of these (a bolded access code, a
-    // rule between sections, a quoted term), and an element absent from this map renders
-    // at the browser's default — the one place a definition's look escapes the token
-    // layer. Each maps to a served recipe key; the VALUES live in design/styles/semantic/prose.
-    strong: { props: { style: s("strong") } },
-    em: { props: { style: s("emphasis") } },
-    del: { props: { style: s("strikethrough") } },
-    code: { props: { style: s("code") } },
-    pre: { props: { style: s("codeBlock") } },
-    blockquote: { props: { style: s("blockquote") } },
-    hr: { props: { style: s("rule") } },
-    th: { props: { style: { ...s("cell"), ...s("headerCell") } } },
-    td: { props: { style: s("cell") } },
-    ul: { props: { style: { ...s("list"), listStyleType: p.bulletStyle as string } } },
-    ol: { props: { style: { ...s("list"), listStyleType: p.orderedStyle as string } } },
-    li: { props: { style: s("listItem") } },
-    h1: { props: { style: head("h1") } },
-    h2: { props: { style: head("h2") } },
-    h3: { props: { style: head("h3") } },
-    h4: { props: { style: head("h4") } },
-    h5: { props: { style: head("h5") } },
-    h6: { props: { style: head("h6") } },
-  };
-}
-
-/**
- * `Markdown` leaf primitive (SPEC §2d:197). Renders a bound markdown string; the
- * web impl is markdown-to-jsx (a per-platform primitive impl, like Text→<span>).
- * Container takes node.style (tokens); elements map to served theme tokens via
- * buildMarkdownOverrides. The SDK authors ZERO style values.
- */
-export function MarkdownView({ node, data, theme, onAction }: { node: UnoverseNode; data: Record<string, unknown>; theme: ResolvedTheme; onAction?: ActionHandler }): ReactNode {
-  const value = (node.bind?.value ? (data[node.bind.value] as string) : "") ?? "";
-  // Explicit opt-in ONLY (a CTA pill whose label must match its declared color):
-  // `inheritLinkColor: true` on the node. Declaring a body color alone never
-  // hijacks anchors — chat prose keeps the served link recipe.
-  const inheritLink = (node as { inheritLinkColor?: boolean }).inheritLinkColor === true;
-  const overrides = useMemo(() => buildMarkdownOverrides(theme, inheritLink), [theme, inheritLink]);
-  const cite = (node as { citeAction?: string }).citeAction;
-  return (
-    <div style={styleToCss(node.style, theme, data)}>
-      <CiteContext.Provider value={{ action: cite, onAction, data }}>
-        <Markdown options={{ overrides, forceBlock: true }}>{holdOpenCitation(keepCitationsWhole(value))}</Markdown>
-      </CiteContext.Provider>
-    </div>
-  );
-}