@theokit/ui 0.13.0

package/registry/r/slide.json

@@ -0,0 +1,123 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "slide",
+  "type": "registry:ui",
+  "title": "Slide",
+  "description": "View-only primitive that renders Markdown + YAML frontmatter as a themed slide surface (Marp-inspired). Sanitized hast pipeline, two built-in themes, opt-in plugin system. Subpath-isolated bundle in @theokit/ui.",
+  "dependencies": [
+    "hast",
+    "hast-util-from-html",
+    "hast-util-sanitize",
+    "hast-util-to-jsx-runtime",
+    "mdast",
+    "mdast-util-from-markdown",
+    "mdast-util-gfm",
+    "mdast-util-to-hast",
+    "micromark-extension-gfm",
+    "unist-util-visit",
+    "unist-util-visit-parents",
+    "yaml",
+    "zod"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/slide/slide.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/slide/slide.tsx",
+      "content": "import {\n  type FC,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n/**\n * `<Slide>` — view-only primitive that renders markdown + YAML frontmatter\n * into a themed, fixed-aspect surface. Lives in the isolated subpath\n * `@theokit/ui/slide`.\n *\n * See RFC 0002 (`docs/rfcs/0002-slide.md`) and the plan in\n * `.claude/knowledge-base/plans/slide-view-primitive-plan.md`.\n *\n * SSR note: initial render returns the section wrapper; the parsed React tree\n * fills in client-side via the useEffect → `parseSlide` chain. Consumers\n * wrapping in Suspense / skeleton can mitigate visible jump.\n *\n * Performance tip: pass a memoized `onValidationError` (via `useCallback`)\n * and a memoized `components` map. Inline arrows recreate on each render\n * and cause re-parses.\n */\nimport { type ParsedSlide, parseSlide } from \"@/components/ui/slide/parse\";\nimport type { SlidePlugin } from \"@/components/ui/slide/plugin\";\nimport type { SlideValidationError } from \"@/components/ui/slide/schema\";\nimport type { SlideTheme } from \"@/components/ui/slide/themes/index\";\nimport { useSlideFit } from \"@/components/ui/slide/use-slide-fit\";\n\nexport type { SlideTheme } from \"@/components/ui/slide/themes/index\";\nexport type {\n  SlideValidationError,\n  SlideValidationErrorCode,\n} from \"@/components/ui/slide/schema\";\nexport type { SlidePlugin } from \"@/components/ui/slide/plugin\";\n\nexport interface SlideAspectRatio {\n  width: number;\n  height: number;\n}\n\nexport interface SlideProps {\n  /**\n   * Slide markdown. CommonMark + GFM + optional YAML frontmatter delimited\n   * by `---`. Top-level horizontal rules (`---` on their own line outside\n   * frontmatter) imply a deck split and trigger `MULTIPLE_SLIDES`; only the\n   * first slide is rendered.\n   *\n   * Note: `<figure>`/`<figcaption>` tags are stripped by the default\n   * sanitize schema (D8). Use `<img>` directly for captionless images.\n   */\n  markdown: string;\n  /** Theme name. Defaults to `\"default\"`. */\n  theme?: SlideTheme;\n  /**\n   * Aspect ratio of the logical canvas. Default `\"16:9\"` → 1280×720.\n   * Custom `{ width, height }` accepted; zero/negative/NaN fallback to 16:9.\n   */\n  aspectRatio?: \"16:9\" | \"4:3\" | SlideAspectRatio;\n  /** Lower clamp for container-fit scale. Default 0.1. */\n  minScale?: number;\n  /** Upper clamp for container-fit scale. Default 4. */\n  maxScale?: number;\n  /** Best-effort callback invoked in useEffect when validation/sanitize emits errors. */\n  onValidationError?: (errors: SlideValidationError[]) => void;\n  /** Override individual element renderers (passed to hast-util-to-jsx-runtime). */\n  // biome-ignore lint/suspicious/noExplicitAny: third-party component override map\n  components?: Record<string, FC<any>>;\n  /**\n   * Rich-content plugins (Tier 2). Each plugin transforms the mdast/hast tree\n   * or adds React component overrides. Pass MEMOIZED arrays to avoid re-parses\n   * on every render (D15).\n   *\n   * @example\n   *   const plugins = useMemo(() => [emojiPlugin(), shikiPlugin()], []);\n   *   <Slide markdown={md} plugins={plugins} />\n   */\n  plugins?: SlidePlugin[];\n  /** Accessible label for the slide. Defaults to `\"Slide\"`. */\n  \"aria-label\"?: string;\n  /** Optional class applied to the outer host element (sizing/positioning hook). */\n  className?: string;\n}\n\nconst ASPECT_PRESETS: Record<\"16:9\" | \"4:3\", SlideAspectRatio> = {\n  \"16:9\": { width: 1280, height: 720 },\n  \"4:3\": { width: 960, height: 720 },\n};\n\n/**\n * Resolve aspectRatio prop to concrete dimensions. Invalid custom values\n * (zero, negative, non-finite) silently fall back to 16:9 — surfaced via\n * `INVALID_ASPECT_RATIO` error in `onValidationError`. ADR D14.\n */\nfunction resolveCanvas(ar: SlideProps[\"aspectRatio\"]): {\n  width: number;\n  height: number;\n  invalid?: boolean;\n} {\n  if (!ar || ar === \"16:9\") return ASPECT_PRESETS[\"16:9\"];\n  if (ar === \"4:3\") return ASPECT_PRESETS[\"4:3\"];\n  if (\n    ar.width <= 0 ||\n    ar.height <= 0 ||\n    !Number.isFinite(ar.width) ||\n    !Number.isFinite(ar.height)\n  ) {\n    return { ...ASPECT_PRESETS[\"16:9\"], invalid: true };\n  }\n  return ar;\n}\n\nexport const Slide: FC<SlideProps> = ({\n  markdown,\n  theme = \"default\",\n  aspectRatio = \"16:9\",\n  minScale,\n  maxScale,\n  onValidationError,\n  components,\n  plugins,\n  className,\n  \"aria-label\": ariaLabel = \"Slide\",\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const canvas = useMemo(() => resolveCanvas(aspectRatio), [aspectRatio]);\n  const scale = useSlideFit(containerRef, canvas.width, canvas.height, {\n    minScale,\n    maxScale,\n  });\n\n  const [parsed, setParsed] = useState<ParsedSlide | null>(null);\n\n  // Surface INVALID_ASPECT_RATIO immediately when the prop is invalid.\n  // Independent of markdown parsing so consumers see the signal even with\n  // an empty markdown payload.\n  useEffect(() => {\n    if (canvas.invalid && onValidationError) {\n      onValidationError([\n        {\n          code: \"INVALID_ASPECT_RATIO\",\n          path: [\"aspectRatio\"],\n          message:\n            \"aspectRatio width/height must be positive finite numbers; falling back to 16:9.\",\n          got: aspectRatio,\n        },\n      ]);\n    }\n  }, [canvas.invalid, onValidationError, aspectRatio]);\n\n  // EC-7 / version counter — prevents older parses from overwriting newer\n  // ones on rapid prop changes.\n  const versionRef = useRef(0);\n  useEffect(() => {\n    const myVersion = ++versionRef.current;\n    let cancelled = false;\n    parseSlide(markdown, { components, plugins }).then(\n      (result) => {\n        if (cancelled || myVersion !== versionRef.current) return;\n        setParsed(result);\n        if (result.errors.length > 0 && onValidationError) {\n          onValidationError(result.errors);\n        }\n      },\n      (err: unknown) => {\n        // Defensive: parseSlide promises to never throw, but if a runtime\n        // failure escapes (e.g. peer-dep missing), surface a synthetic error\n        // and keep the slide visible with empty body.\n        if (cancelled || myVersion !== versionRef.current) return;\n        if (onValidationError) {\n          onValidationError([\n            {\n              code: \"INVALID_FRONTMATTER\",\n              path: [],\n              message: err instanceof Error ? err.message : \"parseSlide rejected.\",\n            },\n          ]);\n        }\n        setParsed({\n          frontmatter: {},\n          tree: emptyFragment(),\n          errors: [],\n          truncated: false,\n        });\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, [markdown, components, plugins, onValidationError]);\n\n  const treeNode: ReactNode = parsed?.tree ?? null;\n  const slideThemeAttr: SlideTheme = theme;\n\n  // Tier 1 — frontmatter-driven attributes & overlays.\n  const fm = parsed?.frontmatter ?? {};\n  const layout = fm.layout;\n  // Background precedence: explicit frontmatter > Marpit ![bg](url) (D18 / EC-5).\n  const bgUrl = fm.backgroundImage ?? parsed?.extractedBackground?.url;\n  const bgModifier = parsed?.extractedBackground?.modifier;\n  const bgGradient = fm.backgroundGradient;\n  const headerText = fm.header;\n  const footerText = fm.footer;\n  const paginateValue = fm.paginate;\n  const showPaginate = paginateValue === true;\n\n  // Background style: gradient > image > inherited.\n  const backgroundImageStyle: string | undefined = bgGradient\n    ? bgGradient\n    : bgUrl\n      ? `url(\"${bgUrl}\")`\n      : undefined;\n\n  return (\n    <div\n      ref={containerRef}\n      className={[\"theo-slide-host\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-host\n      style={{\n        position: \"relative\",\n        overflow: \"hidden\",\n        width: \"100%\",\n        height: \"100%\",\n      }}\n    >\n      {/*\n        Section is taken out of normal flow with position:absolute so its\n        1280×720 layout box doesn't inflate the host. `translate(-50%, -50%)`\n        anchors the section's center to the host's center; the scale applies\n        relative to that same origin. Mirrors Reveal.js transformSlides()\n        (see `.claude/knowledge-base/reference/slide.md` §4.5 / §14.2).\n      */}\n      <section\n        aria-roledescription=\"slide\"\n        aria-label={ariaLabel}\n        className=\"theo-slide\"\n        data-theo-slide-theme={slideThemeAttr}\n        data-theo-slide-layout={layout ?? \"default\"}\n        data-theo-slide-bg-modifier={bgModifier}\n        style={{\n          position: \"absolute\",\n          top: \"50%\",\n          left: \"50%\",\n          width: canvas.width,\n          height: canvas.height,\n          transform: `translate(-50%, -50%) scale(${scale})`,\n          transformOrigin: \"center\",\n          padding: \"var(--theo-slide-padding, 64px)\",\n          color: \"inherit\",\n          // Background fills the canvas. When neither image nor gradient is set,\n          // the slide inherits the parent surface (same pattern as Whiteboard).\n          background: \"transparent\",\n          // Only set backgroundImage + ancillary props when one is provided —\n          // otherwise the shorthand `background: transparent` is preserved as-is\n          // (important for the inherit-from-parent guarantee).\n          ...(backgroundImageStyle\n            ? {\n                backgroundImage: backgroundImageStyle,\n                backgroundSize: bgModifier === \"fit\" ? \"contain\" : \"cover\",\n                backgroundPosition: \"center\",\n                backgroundRepeat: \"no-repeat\",\n              }\n            : {}),\n          fontFamily:\n            \"var(--theo-slide-font-family, system-ui, -apple-system, 'Segoe UI', sans-serif)\",\n          fontSize: \"var(--theo-slide-font-base, 28px)\",\n          lineHeight: 1.5,\n          boxSizing: \"border-box\",\n          overflow: \"hidden\",\n        }}\n      >\n        {headerText ? (\n          <div className=\"theo-slide-header\" aria-hidden=\"true\">\n            {headerText}\n          </div>\n        ) : null}\n        {treeNode}\n        {footerText ? (\n          <div className=\"theo-slide-footer\" aria-hidden=\"true\">\n            {footerText}\n          </div>\n        ) : null}\n        {showPaginate ? (\n          <div className=\"theo-slide-paginate\" aria-hidden=\"true\">\n            1\n          </div>\n        ) : null}\n      </section>\n    </div>\n  );\n};\n\n/** Empty React fragment placeholder used when parseSlide fails fatally. */\nfunction emptyFragment(): ReactElement {\n  // Cheap fallback that does not require importing Fragment from react/jsx-runtime.\n  // Using a real element keeps the type as ReactElement (not ReactNode).\n  return { type: \"span\", props: { children: null }, key: null } as unknown as ReactElement;\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/parse.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/parse.ts",
+      "content": "import type { Root as HastRoot } from \"hast\";\n/**\n * Markdown → React tree pipeline for the Slide primitive.\n *\n *   parseSlide(markdown)\n *     ├─ validateSlide(markdown) → { frontmatter, body, errors? }\n *     ├─ parseBody(body)        → mdast Root (micromark + GFM)\n *     ├─ mdastToHast(mdastTree) → hast Root (allowDangerousHtml: false)\n *     ├─ sanitizeHast(hastTree) → hast Root + BANNED_TAG diff (ADR D13)\n *     └─ hastToReact(hastTree)  → React tree (jsx-runtime, no innerHTML)\n *\n * Every transform is composed of lazy-imported peer-deps so the slide bundle\n * stays under budget and never vendors the markdown stack into the barrel\n * (ADR D2 / D3 of the slide plan).\n */\nimport type { Root as MdastRoot } from \"mdast\";\nimport type { ReactElement } from \"react\";\nimport { detectAlerts } from \"@/components/ui/slide/alerts\";\nimport { extractMarpitBackgrounds } from \"@/components/ui/slide/marpit-bg\";\nimport { type MergedSanitizeExtensions, type SlidePlugin, composePlugins } from \"@/components/ui/slide/plugin\";\nimport { collectTagCounts, getSlideSanitizeSchema } from \"@/components/ui/slide/sanitize\";\nimport { type SlideFrontmatter, type SlideValidationError, sanitizeBgUrl } from \"@/components/ui/slide/schema\";\nimport { validateSlide } from \"@/components/ui/slide/validate\";\n\nexport interface ParseSlideOptions {\n  /** Override individual element renderers (passed to hast-util-to-jsx-runtime). */\n  components?: Record<string, unknown>;\n  /** Rich-content plugins (Tier 2). Order matters — D13 / RFC 0004. */\n  plugins?: SlidePlugin[];\n}\n\nexport interface ExtractedBackground {\n  /** Sanitized URL (http/https only). */\n  url: string;\n  /** Optional Marpit modifier: `cover` | `fit` | `left` | `right`. */\n  modifier?: \"cover\" | \"fit\" | \"left\" | \"right\";\n}\n\nexport interface ParsedSlide {\n  frontmatter: SlideFrontmatter;\n  /** React element renderable as the body of a slide. Always defined (may be empty Fragment). */\n  tree: ReactElement;\n  /** Validation + sanitize errors collected during parsing. Empty on success. */\n  errors: SlideValidationError[];\n  /** True when the input contained a top-level thematic break and only the first slide was rendered. */\n  truncated: boolean;\n  /**\n   * Background image extracted from Marpit `![bg](url)` syntax (D18 / EC-5).\n   * Precedence: `frontmatter.backgroundImage` > `extractedBackground.url`.\n   */\n  extractedBackground?: ExtractedBackground;\n}\n\nexport async function parseBody(body: string): Promise<MdastRoot> {\n  const [{ fromMarkdown }, { gfmFromMarkdown }, { gfm }] = await Promise.all([\n    import(\"mdast-util-from-markdown\"),\n    import(\"mdast-util-gfm\"),\n    import(\"micromark-extension-gfm\"),\n  ]);\n  return fromMarkdown(body, {\n    extensions: [gfm()],\n    mdastExtensions: [gfmFromMarkdown()],\n  });\n}\n\nexport async function mdastToHast(tree: MdastRoot): Promise<HastRoot> {\n  const { toHast } = await import(\"mdast-util-to-hast\");\n  const hast = toHast(tree, { allowDangerousHtml: false });\n  if (!hast || hast.type !== \"root\") {\n    return { type: \"root\", children: hast ? [hast] : [] } as HastRoot;\n  }\n  return hast as HastRoot;\n}\n\nexport async function sanitizeHast(\n  tree: HastRoot,\n  extensions?: MergedSanitizeExtensions,\n): Promise<{ tree: HastRoot; bannedTags: string[] }> {\n  const schema = await getSlideSanitizeSchema(extensions);\n  const { sanitize } = await import(\"hast-util-sanitize\");\n  const preCount = collectTagCounts(tree);\n  const safe = sanitize(tree, schema);\n  const safeRoot: HastRoot =\n    safe.type === \"root\" ? (safe as HastRoot) : ({ type: \"root\", children: [safe] } as HastRoot);\n  const postCount = collectTagCounts(safeRoot);\n  const bannedTags: string[] = [];\n  for (const [tag, before] of preCount) {\n    const after = postCount.get(tag) ?? 0;\n    if (after < before) {\n      // Push once per stripped tag name; agents can self-correct from this signal.\n      bannedTags.push(tag);\n    }\n  }\n  return { tree: safeRoot, bannedTags };\n}\n\nexport async function hastToReact(\n  tree: HastRoot,\n  components?: Record<string, unknown>,\n): Promise<ReactElement> {\n  const { Fragment, jsx, jsxs } = await import(\"react/jsx-runtime\");\n  const { toJsxRuntime } = await import(\"hast-util-to-jsx-runtime\");\n  return toJsxRuntime(tree, {\n    Fragment,\n    jsx,\n    jsxs,\n    components,\n  }) as ReactElement;\n}\n\n/**\n * Public entry point. Validates → parses → sanitizes → returns a React tree.\n *\n * Never throws on input. Errors (validation, BANNED_TAG) are collected into\n * `errors[]` so callers can show them via `onValidationError`.\n */\nexport async function parseSlide(\n  markdown: string,\n  opts: ParseSlideOptions = {},\n): Promise<ParsedSlide> {\n  const errors: SlideValidationError[] = [];\n  let frontmatter: SlideFrontmatter = {};\n  let body = markdown;\n  let truncated = false;\n\n  const validation = await validateSlide(markdown);\n  if (validation.ok) {\n    frontmatter = validation.input.frontmatter;\n    body = validation.input.body;\n    errors.push(...validation.errors);\n    truncated = validation.errors.some((e) => e.code === \"MULTIPLE_SLIDES\");\n  } else {\n    errors.push(...validation.errors);\n    // Best-effort recovery: render the body as if frontmatter was absent.\n    // This preserves \"never throw, always render something\" contract.\n    body = markdown;\n  }\n\n  const compose = composePlugins(opts.plugins ?? []);\n\n  const rawMdast = await parseBody(body);\n  // Tier 1 — GFM alerts (D3): in-tree post-process, no plugin needed.\n  // Runs BEFORE plugin mdastTransforms so plugins observing the tree see the\n  // normalized aside shape (consistent with how `> [!NOTE]` is treated as\n  // native GFM by consumers).\n  detectAlerts(rawMdast);\n  // Tier 1 — Marpit ![bg](url) (D18 / EC-5): extract before plugins run so the\n  // tree handed to plugins is free of bg directives.\n  const { tree: mdastNoBg, background: marpitBg } = extractMarpitBackgrounds(rawMdast);\n  let extractedBackground: ExtractedBackground | undefined;\n  if (marpitBg) {\n    const safeUrl = sanitizeBgUrl(marpitBg.url);\n    if (safeUrl) {\n      extractedBackground = { url: safeUrl, modifier: marpitBg.modifier };\n    } else {\n      errors.push({\n        code: \"MARPIT_BG_UNSAFE_URL\",\n        path: [],\n        message: \"Marpit ![bg](url) rejected: unsafe scheme or malformed URL.\",\n        got: marpitBg.url.slice(0, 80),\n      });\n    }\n  }\n  const transformedMdast = await compose.runMdast(mdastNoBg, errors);\n  const rawHast = await mdastToHast(transformedMdast);\n  const transformedHast = await compose.runHast(rawHast, errors);\n\n  // D17 / EC-3: merge plugin sanitize-schema extensions with defaultSchema so\n  // plugins emitting non-default tags (Shiki spans, KaTeX MathML, Mermaid SVG)\n  // survive the security barrier. Sanitize ALWAYS runs.\n  const sanitizeExtensions = compose.mergedSanitizeExtensions();\n  const { tree: safeTree, bannedTags } = await sanitizeHast(transformedHast, sanitizeExtensions);\n  for (const tag of bannedTags) {\n    errors.push({\n      code: \"BANNED_TAG\",\n      path: [\"body\"],\n      message: `Tag <${tag}> was stripped by the slide sanitizer.`,\n      got: tag,\n    });\n  }\n\n  // D2 / D13: plugin component overrides merge on top of consumer's components;\n  // plugin definitions win on conflict (last-write-wins in mergedComponents).\n  const mergedComponents = {\n    ...(opts.components ?? {}),\n    ...compose.mergedComponents(),\n  };\n  const tree = await hastToReact(safeTree, mergedComponents);\n\n  return { frontmatter, tree, errors, truncated, extractedBackground };\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/validate.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/validate.ts",
+      "content": "import { extractFrontmatter } from \"@/components/ui/slide/frontmatter\";\n/**\n * Async validator for slide markdown input.\n *\n * Returns `Promise<ValidationResult>` (ADR D11 — sync impossible because\n * `yaml` and `mdast-util-from-markdown` are lazy-imported peer-deps).\n *\n * Pipeline:\n *   1. Strip BOM + extract frontmatter (`frontmatter.ts`).\n *   2. Reject `FRONTMATTER_TOO_LARGE` early if raw > 10 KB (ADR D14).\n *   3. Parse YAML in safe mode → validate against `slideFrontmatter` (Zod).\n *   4. Validate body length → emit `CONTENT_TOO_LARGE` if > 50 KB.\n *   5. Detect multi-slide via mdast `thematicBreak` walk (ADR D12) — not\n *      a regex, so `---` inside fenced code blocks does not false-positive.\n *   6. Return `{ ok, input, errors[] }`.\n *\n * Errors are structured so an LLM can self-correct from the callback.\n */\nimport {\n  type SlideFrontmatter,\n  type SlideInput,\n  type SlideValidationError,\n  slideFrontmatter,\n} from \"@/components/ui/slide/schema\";\n\nexport type ValidationResult =\n  | { ok: true; input: SlideInput; errors: SlideValidationError[] }\n  | { ok: false; errors: SlideValidationError[] };\n\ninterface ZodLikeIssue {\n  path: ReadonlyArray<string | number>;\n  message: string;\n  code: string;\n  received?: unknown;\n}\n\nconst MAX_BODY = 50_000;\n\nfunction valueAtPath(input: unknown, path: ReadonlyArray<string | number>): unknown {\n  let cursor: unknown = input;\n  for (const segment of path) {\n    if (cursor === null || typeof cursor !== \"object\") return undefined;\n    cursor = (cursor as Record<string | number, unknown>)[segment];\n  }\n  return cursor;\n}\n\nfunction formatZodIssue(\n  issue: ZodLikeIssue,\n  input: unknown,\n  pathPrefix: (string | number)[],\n): SlideValidationError {\n  const error: SlideValidationError = {\n    path: [...pathPrefix, ...issue.path],\n    message: issue.message,\n    code: \"INVALID_FRONTMATTER\",\n  };\n  if (\"received\" in issue && issue.received !== undefined) {\n    error.got = issue.received;\n  } else if (issue.path.length > 0) {\n    const value = valueAtPath(input, issue.path);\n    if (value !== undefined) error.got = value;\n  }\n  return error;\n}\n\nasync function detectMultiSlide(body: string): Promise<{\n  multi: boolean;\n  firstSlideBody: string;\n}> {\n  // mdast-based — regex would false-positive on `---` inside fenced code blocks.\n  // Cost: one extra parse. Cheap; would be parsed again in `parse.ts` anyway.\n  const { fromMarkdown } = await import(\"mdast-util-from-markdown\");\n  const tree = fromMarkdown(body);\n  const hrIdx = tree.children.findIndex((n) => n.type === \"thematicBreak\");\n  if (hrIdx === -1) {\n    return { multi: false, firstSlideBody: body };\n  }\n  const firstHr = tree.children[hrIdx];\n  const offset = firstHr?.position?.start.offset;\n  if (typeof offset !== \"number\") {\n    return { multi: true, firstSlideBody: body };\n  }\n  return { multi: true, firstSlideBody: body.slice(0, offset) };\n}\n\n/**\n * Validate the markdown input. Returns errors structured for LLM self-correction.\n *\n * Async because frontmatter YAML parsing and mdast multi-slide detection both\n * use lazy-imported peer-deps (yaml + mdast-util-from-markdown).\n */\nexport async function validateSlide(markdown: string): Promise<ValidationResult> {\n  const errors: SlideValidationError[] = [];\n  const extracted = extractFrontmatter(markdown);\n\n  if (extracted.tooLarge) {\n    errors.push({\n      code: \"FRONTMATTER_TOO_LARGE\",\n      path: [],\n      message: `Raw frontmatter exceeds ${10_240} bytes.`,\n      got: extracted.rawFrontmatter?.length,\n    });\n    return { ok: false, errors };\n  }\n\n  let frontmatter: SlideFrontmatter = {};\n  if (extracted.rawFrontmatter !== null) {\n    let parsed: unknown;\n    try {\n      const yaml = await import(\"yaml\");\n      parsed = yaml.parse(extracted.rawFrontmatter);\n    } catch (e) {\n      errors.push({\n        code: \"INVALID_FRONTMATTER\",\n        path: [],\n        message: e instanceof Error ? e.message : \"YAML parse failed.\",\n        got: extracted.rawFrontmatter,\n      });\n      return { ok: false, errors };\n    }\n    if (parsed === null || parsed === undefined) {\n      // empty frontmatter — treat as {}\n      frontmatter = {};\n    } else if (typeof parsed !== \"object\" || Array.isArray(parsed)) {\n      errors.push({\n        code: \"INVALID_FRONTMATTER\",\n        path: [],\n        message: \"Frontmatter must be a YAML mapping (object).\",\n        got: parsed,\n      });\n      return { ok: false, errors };\n    } else {\n      const result = slideFrontmatter.safeParse(parsed);\n      if (!result.success) {\n        for (const issue of result.error.issues) {\n          errors.push(formatZodIssue(issue as unknown as ZodLikeIssue, parsed, []));\n        }\n        return { ok: false, errors };\n      }\n      frontmatter = result.data;\n    }\n  }\n\n  let body = extracted.body;\n\n  if (body.length > MAX_BODY) {\n    errors.push({\n      code: \"CONTENT_TOO_LARGE\",\n      path: [\"body\"],\n      message: `Body exceeds ${MAX_BODY} characters.`,\n      got: body.length,\n    });\n    return { ok: false, errors };\n  }\n\n  const multi = await detectMultiSlide(body);\n  if (multi.multi) {\n    body = multi.firstSlideBody;\n    errors.push({\n      code: \"MULTIPLE_SLIDES\",\n      path: [\"body\"],\n      message:\n        \"Input contains a top-level thematic break (---). <Slide> renders single-slide markdown only. Only the first slide was rendered.\",\n    });\n  }\n\n  return { ok: true, input: { frontmatter, body }, errors };\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/sanitize.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/sanitize.ts",
+      "content": "/**\n * Sanitize schema for slide body hast trees.\n *\n * ADR D8: `defaultSchema` from `hast-util-sanitize` is used WITHOUT extensions\n * in v0.1. The default schema:\n *   - Strips `<script>`, `<iframe>`, `<object>`, `<embed>`, `<form>`, `<input>`,\n *     `<style>`, `<link>` and other dangerous tags.\n *   - Keeps `clobberPrefix: \"user-content-\"` so user-supplied IDs cannot\n *     clobber DOM lookups.\n *   - Allows the standard CommonMark + GFM safe subset (h1-h6, p, ul, ol, li,\n *     blockquote, code, pre, a[href], img[src/alt], table family, em, strong,\n *     del, br, hr, etc.).\n *\n * A `looseSlideSanitizeSchema` (with `figure`/`figcaption`) is an explicit\n * opt-in for v0.2 — gated by security review.\n */\nimport type { Element, Root } from \"hast\";\nimport type { MergedSanitizeExtensions } from \"@/components/ui/slide/plugin\";\n\nlet cachedBuiltSchema: import(\"hast-util-sanitize\").Schema | undefined;\n\n/**\n * Tier 1 built-in extensions to the default sanitize schema. These cover the\n * tags emitted by built-in Slide features (alerts in `aside`, layout / header\n * / footer / paginate metadata attributes on the outer section wrapper). They\n * are NOT plugin-declared because they ship with the Slide primitive.\n *\n * Note: layout / header / footer / paginate are applied at the React component\n * level (outside the hast tree), so their attributes don't need sanitize rules.\n * Only `aside` (alerts) ends up in the hast.\n */\nconst TIER_1_TAG_NAMES: string[] = [\"aside\"];\nconst TIER_1_ATTRIBUTES: Record<string, string[]> = {\n  aside: [\"className\", \"data-theo-slide-alert-type\"],\n  \"*\": [\"className\"],\n};\n\n/**\n * Lazy accessor for the sanitize schema.\n *\n * Always merges `defaultSchema` with the Tier 1 baseline (aside + className).\n * When `extensions` is provided, plugin-declared tag names + attributes are\n * unioned on top (D17 / EC-3). Plugins NEVER bypass sanitize — they declare\n * what they need via `sanitizeSchemaExtension`.\n *\n * Implementation notes:\n *   - The baseline schema (default + Tier 1) is cached.\n *   - Plugin-merged schemas are NOT cached (depends on combination).\n */\nexport async function getSlideSanitizeSchema(\n  extensions?: MergedSanitizeExtensions,\n): Promise<import(\"hast-util-sanitize\").Schema> {\n  const baseline = await getBaselineSchema();\n  if (\n    !extensions ||\n    (extensions.tagNames.length === 0 && Object.keys(extensions.attributes).length === 0)\n  ) {\n    return baseline;\n  }\n  return mergeSchema(baseline, extensions);\n}\n\nasync function getBaselineSchema(): Promise<import(\"hast-util-sanitize\").Schema> {\n  if (cachedBuiltSchema) return cachedBuiltSchema;\n  const { defaultSchema } = await import(\"hast-util-sanitize\");\n  cachedBuiltSchema = mergeSchema(defaultSchema, {\n    tagNames: TIER_1_TAG_NAMES,\n    attributes: TIER_1_ATTRIBUTES,\n  });\n  return cachedBuiltSchema;\n}\n\nfunction mergeSchema(\n  base: import(\"hast-util-sanitize\").Schema,\n  extensions: MergedSanitizeExtensions,\n): import(\"hast-util-sanitize\").Schema {\n  // Merge tag names (deduplicated set).\n  const baseTagNames = (base.tagNames ?? []) as string[];\n  const tagSet = new Set<string>(baseTagNames);\n  for (const t of extensions.tagNames) tagSet.add(t);\n  // Merge attributes per tag.\n  const baseAttrs = (base.attributes ?? {}) as Record<string, unknown[]>;\n  const mergedAttrs: Record<string, unknown[]> = { ...baseAttrs };\n  for (const [tag, attrs] of Object.entries(extensions.attributes)) {\n    const baseline = (mergedAttrs[tag] ?? []) as unknown[];\n    const seen = new Set<string>();\n    const combined: unknown[] = [];\n    for (const a of baseline) {\n      const key = typeof a === \"string\" ? a : JSON.stringify(a);\n      if (!seen.has(key)) {\n        seen.add(key);\n        combined.push(a);\n      }\n    }\n    for (const a of attrs) {\n      if (!seen.has(a)) {\n        seen.add(a);\n        combined.push(a);\n      }\n    }\n    mergedAttrs[tag] = combined;\n  }\n  return {\n    ...base,\n    tagNames: Array.from(tagSet),\n    attributes: mergedAttrs,\n  } as import(\"hast-util-sanitize\").Schema;\n}\n\n/** Count elements by tagName in a hast tree. Used for BANNED_TAG detection (ADR D13). */\nexport function collectTagCounts(tree: Root | Element): Map<string, number> {\n  const counts = new Map<string, number>();\n  const walk = (node: Root | Element | { type: string; children?: unknown[] }): void => {\n    if (node.type === \"element\") {\n      const tag = (node as Element).tagName;\n      counts.set(tag, (counts.get(tag) ?? 0) + 1);\n    }\n    const children = (node as { children?: unknown[] }).children;\n    if (Array.isArray(children)) {\n      for (const child of children) {\n        if (child && typeof child === \"object\" && \"type\" in child) {\n          walk(child as Root | Element);\n        }\n      }\n    }\n  };\n  walk(tree);\n  return counts;\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/schema.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/schema.ts",
+      "content": "/**\n * Zod schema for the Slide YAML frontmatter (`SlideFrontmatter`) and the\n * composed `SlideInput` (frontmatter + body).\n *\n * Design (see RFC 0002 and the plan in\n * `.claude/knowledge-base/plans/slide-view-primitive-plan.md` §16.3 and ADRs D4 / D14):\n *\n * - **`.strict()`** on frontmatter — unknown keys produce `INVALID_FRONTMATTER`\n *   with a precise path, so an LLM can self-correct.\n * - Numeric values are `.finite()` to reject `NaN` / `Infinity`. (Currently no\n *   numeric directives ship; keep the helper for future fields.)\n * - String values capped to defensible sizes to reject DoS-shaped inputs.\n * - `body` capped to 50 KB (≈30 slides' worth of text) per the sanity rule.\n * - `theme` is the canonical enum of built-in themes. Custom themes are not\n *   registered via frontmatter in v0.1 — caller wraps `<Slide>` with their\n *   own CSS overrides.\n */\nimport { z } from \"zod\";\n\n/** Built-in slide themes. Adding a theme means landing a CSS file in `themes/`. */\nexport const slideTheme = z.enum([\"default\", \"violet-forge\"]);\nexport type SlideTheme = z.infer<typeof slideTheme>;\n\n/** Built-in slide layouts (rich-content plan T2.1). */\nexport const slideLayout = z.enum([\n  \"default\",\n  \"title\",\n  \"two-column\",\n  \"image-right\",\n  \"image-left\",\n  \"code-output\",\n  \"section\",\n]);\nexport type SlideLayout = z.infer<typeof slideLayout>;\n\nconst cssColor = z.string().max(64);\n// BCP-47 language tag — loose validation, just sanity to reject obvious junk.\nconst langTag = z\n  .string()\n  .regex(/^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$/, \"Expected BCP-47 language tag\")\n  .max(35);\n\n// EC-7 / rich-content T3.1 helpers.\nconst SAFE_URL_SCHEMES = [\"http://\", \"https://\"];\n\n/**\n * Sanitize a `backgroundImage` URL.\n *\n * Allowed: `http(s)://...` URLs (validated via `URL` constructor).\n * Rejected: `javascript:`, `vbscript:`, all `data:` URLs (EC-7 — perf + DoS).\n * Accepts a bare URL or a `url(...)` wrapper. Returns the unwrapped URL on\n * success, `null` on rejection.\n */\nexport function sanitizeBgUrl(input: string): string | null {\n  try {\n    const trimmed = input.trim();\n    const url = trimmed.startsWith(\"url(\")\n      ? trimmed.replace(/^url\\(\\s*['\"]?/, \"\").replace(/['\"]?\\s*\\)$/, \"\")\n      : trimmed;\n    const lower = url.toLowerCase();\n    if (lower.startsWith(\"javascript:\") || lower.startsWith(\"vbscript:\")) return null;\n    // EC-7: reject ALL data: URLs (including data:image/*) — slides inflate the\n    // markdown payload and shifts loading cost. Consumer should host images.\n    if (lower.startsWith(\"data:\")) return null;\n    if (!SAFE_URL_SCHEMES.some((s) => lower.startsWith(s))) return null;\n    new URL(url); // throws on malformed\n    return url;\n  } catch {\n    return null;\n  }\n}\n\n/** YAML frontmatter accepted by `<Slide>`. */\nexport const slideFrontmatter = z\n  .object({\n    theme: slideTheme.optional(),\n    /** Rich-content T2: built-in layout (CSS grid). */\n    layout: slideLayout.optional(),\n    /** Rich-content T3: background URL (sanitized: http(s) only). */\n    backgroundImage: z\n      .string()\n      .max(500_000)\n      .transform((v) => {\n        if (!v) return undefined;\n        const sanitized = sanitizeBgUrl(v);\n        return sanitized ?? undefined;\n      })\n      .optional(),\n    /** Rich-content T3: CSS gradient string (validated by prefix). */\n    backgroundGradient: z\n      .string()\n      .max(500)\n      .regex(\n        /^(linear|radial|conic)-gradient\\(/i,\n        \"Must start with linear-/radial-/conic-gradient(\",\n      )\n      .optional(),\n    /** Rich-content T5: header overlay text (plain, ≤ 200 chars). */\n    header: z.string().max(200).optional(),\n    /** Rich-content T5: footer overlay text (plain, ≤ 200 chars). */\n    footer: z.string().max(200).optional(),\n    /** Rich-content T5: pagination — `true` shows page number, `\"skip\"` hides. */\n    paginate: z.union([z.boolean(), z.literal(\"skip\"), z.literal(\"hold\")]).optional(),\n    lang: langTag.optional(),\n    color: cssColor.optional(),\n    backgroundColor: cssColor.optional(),\n  })\n  .strict();\nexport type SlideFrontmatter = z.infer<typeof slideFrontmatter>;\n\n/** Composed input: validated frontmatter object + raw markdown body string. */\nexport const slideInput = z.object({\n  frontmatter: slideFrontmatter,\n  body: z.string().max(50_000),\n});\nexport type SlideInput = z.infer<typeof slideInput>;\n\n/** Discrete validation-error codes — kept centralized so consumers can pattern-match safely. */\nexport type SlideValidationErrorCode =\n  | \"INVALID_FRONTMATTER\"\n  | \"FRONTMATTER_TOO_LARGE\"\n  | \"MULTIPLE_SLIDES\"\n  | \"CONTENT_TOO_LARGE\"\n  | \"BANNED_TAG\"\n  | \"BANNED_ATTRIBUTE\"\n  | \"INVALID_ASPECT_RATIO\"\n  // Rich-content plan (Tier 1 + Tier 2 plugins):\n  | \"PLUGIN_ERROR\" // D16: a plugin's mdast/hast transform threw — pipeline continued\n  | \"PLUGIN_PEER_DEP_MISSING\" // EC-2: dynamic import of a plugin's peer-dep failed\n  | \"MARPIT_BG_UNSAFE_URL\"; // D18/EC-5: Marpit ![bg](url) rejected by URL sanitizer\n\nexport interface SlideValidationError {\n  /** Path inside the input (frontmatter key, ['body'], or []). */\n  path: (string | number)[];\n  /** Human-readable explanation. */\n  message: string;\n  /** Discriminator for consumers. */\n  code: SlideValidationErrorCode;\n  /** Offending value when extractable from Zod's `received` or by walking the input. */\n  got?: unknown;\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/frontmatter.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/frontmatter.ts",
+      "content": "/**\n * Lightweight, dependency-free extractor that separates YAML frontmatter from\n * the markdown body.\n *\n * Strips a leading BOM (``) before matching the regex — common when\n * markdown is pasted from Word/Notion. See plan ADR D14 and edge-case EC-4.\n *\n * Returns `{ rawFrontmatter, body, tooLarge? }`:\n *   - `rawFrontmatter`: the YAML string between the two `---` delimiters, or\n *     `null` if no frontmatter is present.\n *   - `body`: the markdown after the closing `---\\n` (or the full input when\n *     no frontmatter).\n *   - `tooLarge`: `true` if `rawFrontmatter` exceeds `MAX_RAW_FRONTMATTER`\n *     bytes — the caller turns this into `FRONTMATTER_TOO_LARGE`.\n */\n\n/** Maximum size of the raw frontmatter string before YAML parsing. 10 KB cap. */\nexport const MAX_RAW_FRONTMATTER = 10_240;\n\nconst FRONTMATTER_RE = /^---\\r?\\n([\\s\\S]*?)\\r?\\n---\\r?\\n([\\s\\S]*)$/;\nconst BOM = \"\";\n\nexport interface ExtractFrontmatterResult {\n  rawFrontmatter: string | null;\n  body: string;\n  tooLarge?: boolean;\n}\n\nexport function extractFrontmatter(md: string): ExtractFrontmatterResult {\n  const normalized = md.startsWith(BOM) ? md.slice(1) : md;\n  const match = FRONTMATTER_RE.exec(normalized);\n  if (!match) {\n    return { rawFrontmatter: null, body: normalized };\n  }\n  const raw = match[1] ?? \"\";\n  const body = match[2] ?? \"\";\n  if (raw.length > MAX_RAW_FRONTMATTER) {\n    return { rawFrontmatter: raw, body, tooLarge: true };\n  }\n  return { rawFrontmatter: raw, body };\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/alerts.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/alerts.ts",
+      "content": "/**\n * GFM alerts post-processor — converts `> [!NOTE]` blockquotes into\n * `<aside class=\"theo-slide-alert\" data-theo-slide-alert-type=\"...\">` (ADR D3 of\n * the slide-rich-content plan).\n *\n * GitHub Flavored Markdown introduced this convention in 2023 for callouts.\n * `remark-gfm` (already in our dep tree) parses the blockquote but does NOT\n * distinguish alerts from regular blockquotes. We post-process the mdast tree\n * to detect the canonical marker and annotate with `hName` + `hProperties` so\n * `mdast-util-to-hast` emits the desired hast element.\n *\n * Five tag families are supported, mirroring GitHub:\n *   - NOTE      (info / blue)\n *   - TIP       (success / green)\n *   - IMPORTANT (purple)\n *   - WARNING   (yellow)\n *   - CAUTION   (red)\n *\n * Case-insensitive. Marker is stripped from the rendered text. Regular\n * blockquotes (without `[!TYPE]` prefix) are left untouched.\n */\nimport type { Blockquote, Paragraph, Root, Text } from \"mdast\";\n\n/** Canonical alert types — used by CSS via `data-theo-slide-alert-type=\"...\"`. */\nexport const ALERT_TYPES = [\"note\", \"tip\", \"important\", \"warning\", \"caution\"] as const;\nexport type AlertType = (typeof ALERT_TYPES)[number];\n\nconst ALERT_RE = /^\\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\\][ \\t]*(?:\\r?\\n|$)/i;\n\n/**\n * Walk a mdast tree and mutate any blockquote that opens with `[!TYPE]` into\n * an `<aside>` annotation. Mutation is in-place to keep the pipeline allocation\n * profile flat; the same tree is returned for chainability.\n */\nexport function detectAlerts(tree: Root): Root {\n  for (const node of tree.children) {\n    if (node.type !== \"blockquote\") continue;\n    transformIfAlert(node);\n  }\n  return tree;\n}\n\nfunction transformIfAlert(node: Blockquote): void {\n  const firstChild = node.children[0];\n  if (!firstChild || firstChild.type !== \"paragraph\") return;\n  const paragraph = firstChild as Paragraph;\n  const firstInline = paragraph.children[0];\n  if (!firstInline || firstInline.type !== \"text\") return;\n  const text = firstInline as Text;\n  const match = ALERT_RE.exec(text.value);\n  if (!match) return;\n\n  const matched = match[1];\n  if (!matched) return;\n  const type = matched.toLowerCase() as AlertType;\n\n  // Strip the marker from the rendered text.\n  text.value = text.value.replace(ALERT_RE, \"\");\n  // If the first inline became empty, drop it so the paragraph doesn't render\n  // an empty leading line.\n  if (text.value === \"\" && paragraph.children.length > 1) {\n    paragraph.children.shift();\n  }\n  // Annotate so mdast-util-to-hast emits <aside> with the data attribute.\n  node.data = {\n    ...node.data,\n    hName: \"aside\",\n    hProperties: {\n      ...((node.data as { hProperties?: Record<string, unknown> })?.hProperties ?? {}),\n      className: [\"theo-slide-alert\"],\n      \"data-theo-slide-alert-type\": type,\n    },\n  };\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/marpit-bg.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/marpit-bg.ts",
+      "content": "/**\n * Marpit-style `![bg](url)` background syntax detector.\n *\n * Marpit popularised the convention of declaring a slide background via a\n * standalone image whose alt-text starts with `bg`:\n *\n *     ![bg](https://example.com/photo.jpg)\n *     ![bg cover](url)   ![bg fit](url)   ![bg left](url)   ![bg right](url)\n *\n * LLMs trained on Marp output emit this naturally, so the slide primitive\n * adopts the same surface — but in a STRICTLY safe way:\n *\n * 1. Only triggers when the paragraph contains a SINGLE image (avoids\n *    collisions with inline images mixed with text).\n * 2. First-bg-wins (multiple `![bg]` directives in one slide → only the first\n *    is honoured; the others are also dropped from the tree to prevent\n *    duplicate rendering).\n * 3. The extracted result goes into `ParsedSlide.extractedBackground` (D18 /\n *    EC-5) and the Slide component prefers an explicit `frontmatter.backgroundImage`\n *    over the Marpit extraction.\n * 4. URL sanitization happens at the caller (`parseSlide`) via `sanitizeBgUrl`.\n */\nimport type { Image, Paragraph, Root } from \"mdast\";\n\nconst BG_ALT_RE = /^bg(?:\\s+(\\w+))?/i;\n\nconst VALID_MODIFIERS = new Set([\"cover\", \"fit\", \"left\", \"right\"]);\n\nexport interface ExtractedMarpitBackground {\n  url: string;\n  modifier?: \"cover\" | \"fit\" | \"left\" | \"right\";\n}\n\n/**\n * Walk the mdast tree, extract the first `![bg](url)` directive, drop ALL\n * matching paragraphs from the tree. Returns a new tree (children array\n * is filtered; node identities are preserved otherwise).\n */\nexport function extractMarpitBackgrounds(tree: Root): {\n  tree: Root;\n  background?: ExtractedMarpitBackground;\n} {\n  let background: ExtractedMarpitBackground | undefined;\n  const filteredChildren = tree.children.filter((node) => {\n    if (node.type !== \"paragraph\") return true;\n    const p = node as Paragraph;\n    // Single-child guard: paragraphs with mixed content (text + image) are\n    // kept as-is — only \"image-only\" paragraphs are candidates.\n    if (p.children.length !== 1) return true;\n    const child = p.children[0];\n    if (!child || child.type !== \"image\") return true;\n    const img = child as Image;\n    const match = BG_ALT_RE.exec(img.alt ?? \"\");\n    if (!match) return true;\n    // Capture once; drop subsequent bg paragraphs to avoid duplicate output.\n    if (!background) {\n      const modifierRaw = match[1]?.toLowerCase();\n      const modifier =\n        modifierRaw && VALID_MODIFIERS.has(modifierRaw)\n          ? (modifierRaw as \"cover\" | \"fit\" | \"left\" | \"right\")\n          : undefined;\n      background = {\n        url: img.url,\n        modifier,\n      };\n    }\n    return false; // drop this paragraph from the tree\n  });\n  return {\n    tree: { ...tree, children: filteredChildren },\n    background,\n  };\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/plugin.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/plugin.ts",
+      "content": "/**\n * Slide plugin contract — extension points for rich-content engines.\n *\n * Plugins are composable transformers applied during `parseSlide`. Each plugin\n * may inspect/mutate the mdast tree (before HTML conversion), the hast tree\n * (after HTML conversion, before sanitize), and override React component\n * renderers (after sanitize). They may also declare sanitize-schema extensions\n * so custom tags (e.g. Shiki spans, KaTeX MathML, Mermaid SVG) survive the\n * security barrier.\n *\n * Design rules (ADRs in `.claude/knowledge-base/plans/slide-rich-content-plan.md`):\n *   D1  — explicit `plugins` prop (no auto-detect).\n *   D2  — plugin shape: { name, mdastTransform?, hastTransform?, components? }.\n *   D13 — execution order: mdast → hast → sanitize (with merged extensions) → components.\n *   D16 — plugin error isolation: each plugin call is try/catch wrapped; errors\n *         are collected, not thrown.\n *   D17 — sanitize-schema merge is OBLIGATORY for plugins emitting non-default\n *         tags; without it, the sanitize step silently strips the content.\n *\n * Sanitize is the security barrier. Plugins NEVER bypass `hast-util-sanitize`.\n */\nimport type { Root as HastRoot } from \"hast\";\nimport type { Root as MdastRoot } from \"mdast\";\nimport type { FC } from \"react\";\nimport type { SlideValidationError } from \"@/components/ui/slide/schema\";\n\n/** Sanitize schema extension declared by a plugin. Merged with `defaultSchema` in `parseSlide`. */\nexport interface SlideSanitizeExtension {\n  /** Additional element tag names allowed past the sanitizer. */\n  tagNames?: string[];\n  /** Additional attribute allow-list keyed by tag name (or `\"*\"` for all tags). */\n  attributes?: Record<string, string[]>;\n}\n\n/** A composable transformer + component-override unit. */\nexport interface SlidePlugin {\n  /** Stable identifier used in PLUGIN_ERROR messages and dev logs. */\n  name: string;\n  /** Mutate the mdast tree before HTML conversion. Return value is forwarded. */\n  mdastTransform?: (tree: MdastRoot) => Promise<MdastRoot> | MdastRoot;\n  /** Mutate the hast tree after HTML conversion, before sanitize. */\n  hastTransform?: (tree: HastRoot) => Promise<HastRoot> | HastRoot;\n  /** React component overrides merged into the consumer's `components` map. */\n  // biome-ignore lint/suspicious/noExplicitAny: third-party component override map\n  components?: Record<string, FC<any>>;\n  /** Sanitize-schema extension. Required for plugins emitting non-default tags. */\n  sanitizeSchemaExtension?: SlideSanitizeExtension;\n}\n\n/** Merged sanitize-schema extensions from all plugins. */\nexport interface MergedSanitizeExtensions {\n  tagNames: string[];\n  attributes: Record<string, string[]>;\n}\n\n/** Composer over a plugin array. Hooks orchestrate transformation + error isolation. */\nexport interface PluginComposer {\n  /** Run all `mdastTransform` hooks in array order. Collects errors. */\n  runMdast(tree: MdastRoot, errors: SlideValidationError[]): Promise<MdastRoot>;\n  /** Run all `hastTransform` hooks in array order. Collects errors. */\n  runHast(tree: HastRoot, errors: SlideValidationError[]): Promise<HastRoot>;\n  /** Merge all plugin component overrides; later-plugin-wins on conflict. */\n  // biome-ignore lint/suspicious/noExplicitAny: third-party component override map\n  mergedComponents(): Record<string, FC<any>>;\n  /** Merge sanitize-schema extensions across all plugins (dedupes tag names). */\n  mergedSanitizeExtensions(): MergedSanitizeExtensions;\n}\n\n/**\n * Build a composer over an array of plugins.\n *\n * Order semantics:\n *   - mdast transforms run sequentially in array order.\n *   - hast transforms run sequentially in array order.\n *   - components merge: later plugin wins on conflict (Object.assign semantics).\n *   - sanitize-schema extensions: union of tag names; union of attributes by tag.\n *\n * Error semantics (D16):\n *   - Each plugin call is wrapped in try/catch.\n *   - On throw, an error of code `PLUGIN_ERROR` is pushed to `errors[]` and the\n *     pipeline continues with the **non-transformed** input from that plugin\n *     (i.e. subsequent plugins see the tree that failed plugin received).\n *   - The composer NEVER throws; `parseSlide` keeps its \"never throws on input\"\n *     contract (RFC 0002 D9).\n */\nexport function composePlugins(plugins: SlidePlugin[]): PluginComposer {\n  return {\n    async runMdast(tree, errors) {\n      let current = tree;\n      for (const p of plugins) {\n        if (!p.mdastTransform) continue;\n        const previous = current;\n        try {\n          const result = await p.mdastTransform(current);\n          if (!result || result.type !== \"root\") {\n            // Defensive: a buggy plugin may return a non-Root node. Reject and\n            // keep the previous tree so subsequent plugins see a valid input.\n            throw new Error(\"mdastTransform returned non-Root node\");\n          }\n          current = result;\n        } catch (e) {\n          current = previous;\n          errors.push(makePluginError(p.name, \"mdastTransform\", e));\n        }\n      }\n      return current;\n    },\n    async runHast(tree, errors) {\n      let current = tree;\n      for (const p of plugins) {\n        if (!p.hastTransform) continue;\n        const previous = current;\n        try {\n          const result = await p.hastTransform(current);\n          if (!result || result.type !== \"root\") {\n            throw new Error(\"hastTransform returned non-Root node\");\n          }\n          current = result;\n        } catch (e) {\n          current = previous;\n          errors.push(makePluginError(p.name, \"hastTransform\", e));\n        }\n      }\n      return current;\n    },\n    mergedComponents() {\n      // biome-ignore lint/suspicious/noExplicitAny: third-party component override map\n      const out: Record<string, FC<any>> = {};\n      for (const p of plugins) {\n        if (p.components) Object.assign(out, p.components);\n      }\n      return out;\n    },\n    mergedSanitizeExtensions() {\n      const tagNames = new Set<string>();\n      const attributes: Record<string, Set<string>> = {};\n      for (const p of plugins) {\n        const ext = p.sanitizeSchemaExtension;\n        if (!ext) continue;\n        if (ext.tagNames) {\n          for (const tag of ext.tagNames) tagNames.add(tag);\n        }\n        if (ext.attributes) {\n          for (const [tag, attrs] of Object.entries(ext.attributes)) {\n            if (!attributes[tag]) attributes[tag] = new Set();\n            for (const a of attrs) attributes[tag].add(a);\n          }\n        }\n      }\n      const mergedAttrs: Record<string, string[]> = {};\n      for (const [tag, set] of Object.entries(attributes)) {\n        mergedAttrs[tag] = Array.from(set);\n      }\n      return {\n        tagNames: Array.from(tagNames),\n        attributes: mergedAttrs,\n      };\n    },\n  };\n}\n\nfunction makePluginError(\n  name: string,\n  hook: \"mdastTransform\" | \"hastTransform\",\n  e: unknown,\n): SlideValidationError {\n  const msg = e instanceof Error ? e.message : String(e);\n  return {\n    code: \"PLUGIN_ERROR\",\n    path: [],\n    message: `Plugin '${name}' failed in ${hook}: ${msg}`,\n    got: name,\n  };\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/json-schema.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/json-schema.ts",
+      "content": "/**\n * JSON Schema for the Slide YAML frontmatter — derived from the Zod\n * `slideFrontmatter` schema via Zod 4's native `z.toJSONSchema()`.\n *\n * Purpose: enable LLM-driven generation pipelines (OpenAI structured outputs,\n * Anthropic tool use, function calling, JSON-mode constrained generation) to\n * produce frontmatter that is GUARANTEED to pass `validateSlide` without\n * round-tripping through human-written prompt engineering.\n *\n * Usage (Anthropic tool use):\n *\n *     import { slideFrontmatterJsonSchema } from \"@theokit/ui/slide\";\n *\n *     const tool = {\n *       name: \"render_slide\",\n *       description: \"Render a presentation slide.\",\n *       input_schema: {\n *         type: \"object\",\n *         properties: {\n *           frontmatter: slideFrontmatterJsonSchema,\n *           body: { type: \"string\", description: \"CommonMark + GFM markdown body\" },\n *         },\n *         required: [\"body\"],\n *       },\n *     };\n *\n * The output matches Zod's behaviour exactly — anything that passes the JSON\n * Schema validator passes Zod, and vice-versa.\n *\n * Companion guide: `docs/slide-llm-guide.md` — copy-paste system prompt that\n * documents every Tier 1 + Tier 2 feature with examples.\n */\nimport { z } from \"zod\";\nimport { slideFrontmatter } from \"@/components/ui/slide/schema\";\n\ninterface JsonSchemaProperties {\n  [key: string]: Record<string, unknown>;\n}\n\ninterface JsonSchemaWithProperties {\n  properties?: JsonSchemaProperties;\n  [key: string]: unknown;\n}\n\n/**\n * JSON Schema (Draft 2020-12) describing all accepted frontmatter fields:\n * `theme`, `layout`, `lang`, `color`, `backgroundColor`, `backgroundImage`,\n * `backgroundGradient`, `header`, `footer`, `paginate`.\n *\n * Note: `backgroundImage` uses a Zod `.transform()` (URL sanitization) which\n * cannot be represented in JSON Schema natively. We pass `unrepresentable: \"any\"`\n * to fall back to `{}` for transformed fields, then enrich `backgroundImage`\n * with manual metadata so LLMs still get useful constraints.\n *\n * Generated once at module load. Treat as immutable.\n */\nconst rawSchema = z.toJSONSchema(slideFrontmatter, {\n  unrepresentable: \"any\",\n}) as JsonSchemaWithProperties;\n\nif (rawSchema.properties) {\n  // Backgrounds carry hard constraints (http(s) only, ≤500_000 chars) that\n  // Zod erases through `.transform()`. Inline them here so the LLM tooling\n  // sees the same contract `sanitizeBgUrl` enforces at runtime.\n  rawSchema.properties.backgroundImage = {\n    type: \"string\",\n    format: \"uri\",\n    maxLength: 500_000,\n    pattern: \"^https?://\",\n    description:\n      \"Slide background image URL. Only http(s) schemes are accepted; data: URLs are rejected at runtime (use a hosted image).\",\n  };\n}\n\nexport const slideFrontmatterJsonSchema = rawSchema;\n"
+    },
+    {
+      "path": "components/primitives/slide/use-slide-fit.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/use-slide-fit.ts",
+      "content": "/**\n * Container-fit hook for the Slide primitive.\n *\n * Observes the host element via `ResizeObserver` and computes a CSS scale\n * factor that fits the fixed logical canvas (default 1280×720) inside it,\n * preserving aspect ratio. Clamped to `[minScale, maxScale]`.\n *\n * Algorithm: `scale = clamp(min(W / canvasW, H / canvasH), min, max)`.\n *\n * Adapted from Reveal.js `transformSlides` (see reference doc §4.5 / §14.2).\n *\n * Cleanup: disconnects the observer on unmount or when deps change.\n */\nimport { type RefObject, useEffect, useState } from \"react\";\n\nexport interface UseSlideFitOptions {\n  /** Lower clamp for scale. Default 0.1. */\n  minScale?: number;\n  /** Upper clamp for scale. Default 4. */\n  maxScale?: number;\n}\n\nexport function useSlideFit(\n  ref: RefObject<HTMLElement | null>,\n  canvasW: number,\n  canvasH: number,\n  opts: UseSlideFitOptions = {},\n): number {\n  const { minScale = 0.1, maxScale = 4 } = opts;\n  const [scale, setScale] = useState(1);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (typeof ResizeObserver === \"undefined\") {\n      // Test environments without ResizeObserver: do a one-shot measurement.\n      const { width, height } = el.getBoundingClientRect();\n      if (width > 0 && height > 0) {\n        const raw = Math.min(width / canvasW, height / canvasH);\n        setScale(Math.max(minScale, Math.min(raw, maxScale)));\n      }\n      return;\n    }\n    const update = (): void => {\n      const { width, height } = el.getBoundingClientRect();\n      if (width <= 0 || height <= 0) return;\n      const raw = Math.min(width / canvasW, height / canvasH);\n      const clamped = Math.max(minScale, Math.min(raw, maxScale));\n      if (Number.isFinite(clamped)) setScale(clamped);\n    };\n    update();\n    const ro = new ResizeObserver(update);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [ref, canvasW, canvasH, minScale, maxScale]);\n\n  return scale;\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/index.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/index.ts",
+      "content": "/**\n * Public surface of `@theokit/ui/slide`. Subpath-isolated engine: this bundle\n * is emitted separately from the barrel (see `tsup.config.ts`) and depends on\n * the markdown stack via optional peer-deps.\n */\nexport { Slide } from \"@/components/ui/slide/slide\";\nexport type {\n  SlideAspectRatio,\n  SlideProps,\n  SlideTheme,\n  SlideValidationError,\n  SlideValidationErrorCode,\n} from \"@/components/ui/slide/slide\";\nexport {\n  parseSlide,\n  parseBody,\n  mdastToHast,\n  sanitizeHast,\n  hastToReact,\n  type ParseSlideOptions,\n  type ParsedSlide,\n} from \"@/components/ui/slide/parse\";\nexport { validateSlide, type ValidationResult } from \"@/components/ui/slide/validate\";\nexport {\n  extractFrontmatter,\n  MAX_RAW_FRONTMATTER,\n  type ExtractFrontmatterResult,\n} from \"@/components/ui/slide/frontmatter\";\nexport {\n  slideFrontmatter,\n  slideInput,\n  slideTheme,\n  type SlideFrontmatter,\n  type SlideInput,\n} from \"@/components/ui/slide/schema\";\nexport { isSlideTheme, slideThemes } from \"@/components/ui/slide/themes/index\";\nexport { useSlideFit, type UseSlideFitOptions } from \"@/components/ui/slide/use-slide-fit\";\nexport { collectTagCounts, getSlideSanitizeSchema } from \"@/components/ui/slide/sanitize\";\nexport {\n  composePlugins,\n  type SlidePlugin,\n  type SlideSanitizeExtension,\n  type MergedSanitizeExtensions,\n  type PluginComposer,\n} from \"@/components/ui/slide/plugin\";\nexport { slideFrontmatterJsonSchema } from \"@/components/ui/slide/json-schema\";\n"
+    },
+    {
+      "path": "components/primitives/slide/themes/index.ts",
+      "type": "registry:ui",
+      "target": "components/ui/slide/themes/index.ts",
+      "content": "/**\n * Theme registry for the Slide primitive. Built-in themes that ship with the\n * `@theokit/ui/slide` subpath. Custom themes are NOT registered through this\n * module in v0.1 — consumers override CSS variables on `.theo-slide` directly.\n */\n\nexport const slideThemes = [\"default\", \"violet-forge\"] as const;\nexport type SlideTheme = (typeof slideThemes)[number];\n\n/** Returns true if `value` is a recognized built-in theme. */\nexport function isSlideTheme(value: unknown): value is SlideTheme {\n  return typeof value === \"string\" && (slideThemes as readonly string[]).includes(value);\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/themes/default.css",
+      "type": "registry:ui",
+      "target": "components/ui/slide/themes/default.css",
+      "content": "/*\n * Slide primitive — `default` theme.\n *\n * Inherit-first design (mirrors the Whiteboard SVG using `currentColor`):\n * the slide's foreground and background come from the parent. The consumer's\n * surface (Tailwind classes, `<ThemeProvider>`, dashboard chrome) decides\n * light/dark — the theme just provides typography + relative tints derived\n * from `currentColor` via `color-mix()`.\n *\n * Result: the slide automatically follows the host's color scheme without\n * needing a `colorScheme` prop or `prefers-color-scheme` media query.\n *\n * All selectors are scoped to `.theo-slide[data-theo-slide-theme=\"default\"]`\n * so themes coexist on the same page without bleed.\n */\n\n@import \"./layouts.css\";\n\n.theo-slide[data-theo-slide-theme=\"default\"] {\n  --theo-slide-canvas-width: 1280px;\n  --theo-slide-canvas-height: 720px;\n  --theo-slide-padding: 64px;\n  --theo-slide-font-base: 28px;\n  --theo-slide-font-family: var(\n    --vf-font-family-sans,\n    system-ui,\n    -apple-system,\n    \"Segoe UI\",\n    sans-serif\n  );\n  --theo-slide-font-mono: var(--vf-font-family-mono, ui-monospace, \"JetBrains Mono\", monospace);\n\n  /* Derived tints — relative to the inherited `currentColor`. They lighten or\n     darken automatically depending on whether the parent's color is dark\n     (light surface) or light (dark surface). */\n  --theo-slide-color-muted: color-mix(in srgb, currentColor 60%, transparent);\n  --theo-slide-color-tint-strong: color-mix(in srgb, currentColor 12%, transparent);\n  --theo-slide-color-tint-weak: color-mix(in srgb, currentColor 6%, transparent);\n  --theo-slide-color-border: color-mix(in srgb, currentColor 20%, transparent);\n\n  color: inherit;\n  background: transparent;\n  font-family: var(--theo-slide-font-family);\n  font-size: var(--theo-slide-font-base);\n  line-height: 1.5;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] h1,\n.theo-slide[data-theo-slide-theme=\"default\"] h2,\n.theo-slide[data-theo-slide-theme=\"default\"] h3,\n.theo-slide[data-theo-slide-theme=\"default\"] h4,\n.theo-slide[data-theo-slide-theme=\"default\"] h5,\n.theo-slide[data-theo-slide-theme=\"default\"] h6 {\n  color: inherit;\n  line-height: 1.2;\n  margin: 0 0 0.5em 0;\n  font-weight: 600;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] h1 {\n  font-size: 1.8em;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] h2 {\n  font-size: 1.4em;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] h3 {\n  font-size: 1.2em;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] h4 {\n  font-size: 1.05em;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] h5 {\n  font-size: 1em;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] h6 {\n  font-size: 0.9em;\n  color: var(--theo-slide-color-muted);\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] p {\n  margin: 0 0 0.75em 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] ul,\n.theo-slide[data-theo-slide-theme=\"default\"] ol {\n  margin: 0 0 0.75em 0;\n  padding-left: 1.5em;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] li {\n  margin: 0.25em 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] blockquote {\n  margin: 0 0 0.75em 0;\n  padding: 0.25em 0.75em;\n  border-left: 4px solid var(--theo-slide-color-border);\n  color: var(--theo-slide-color-muted);\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] a {\n  color: currentColor;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  font-weight: 600;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] code {\n  font-family: var(--theo-slide-font-mono);\n  font-size: 0.9em;\n  padding: 0.1em 0.4em;\n  border-radius: 4px;\n  background: var(--theo-slide-color-tint-strong);\n  color: inherit;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] pre {\n  font-family: var(--theo-slide-font-mono);\n  background: var(--theo-slide-color-tint-strong);\n  color: inherit;\n  padding: 0.75em 1em;\n  border-radius: 8px;\n  overflow: auto;\n  font-size: 0.85em;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] pre code {\n  padding: 0;\n  background: transparent;\n  font-size: inherit;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] hr {\n  border: none;\n  border-top: 1px solid var(--theo-slide-color-border);\n  margin: 1em 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] table {\n  border-collapse: collapse;\n  margin: 0 0 0.75em 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] th,\n.theo-slide[data-theo-slide-theme=\"default\"] td {\n  border: 1px solid var(--theo-slide-color-border);\n  padding: 0.4em 0.75em;\n  text-align: left;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] thead th {\n  background: var(--theo-slide-color-tint-weak);\n  font-weight: 600;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] tbody tr:nth-child(even) td {\n  background: var(--theo-slide-color-tint-weak);\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 6px;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] em {\n  font-style: italic;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] strong {\n  font-weight: 600;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] del {\n  text-decoration: line-through;\n  color: var(--theo-slide-color-muted);\n}\n.theo-slide[data-theo-slide-theme=\"default\"] kbd {\n  font-family: var(--theo-slide-font-mono);\n  font-size: 0.85em;\n  padding: 0.1em 0.4em;\n  border: 1px solid var(--theo-slide-color-border);\n  border-radius: 4px;\n  background: var(--theo-slide-color-tint-weak);\n}\n\n/* ─────────────────────────────────────────────────────────────────\n * GFM alerts — `> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`,\n *              `> [!WARNING]`, `> [!CAUTION]`\n * Pre-processed in mdast (alerts.ts) → <aside class=\"theo-slide-alert\"\n * data-theo-slide-alert-type=\"…\"> rich-content plan T1.2.\n * ───────────────────────────────────────────────────────────────── */\n.theo-slide[data-theo-slide-theme=\"default\"] aside.theo-slide-alert {\n  margin: 0 0 0.75em 0;\n  padding: 0.75em 1em;\n  border-left: 4px solid currentColor;\n  border-radius: 0.4em;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"default\"] aside.theo-slide-alert::before {\n  display: block;\n  margin-bottom: 0.35em;\n  font-weight: 600;\n  font-size: 0.9em;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] aside.theo-slide-alert > :first-child {\n  margin-top: 0;\n}\n.theo-slide[data-theo-slide-theme=\"default\"] aside.theo-slide-alert > :last-child {\n  margin-bottom: 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"note\"] {\n  border-color: #3b82f6;\n  background: color-mix(in srgb, #3b82f6 10%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"note\"]::before {\n  content: \"ⓘ Note\";\n  color: #3b82f6;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"tip\"] {\n  border-color: #10b981;\n  background: color-mix(in srgb, #10b981 10%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"tip\"]::before {\n  content: \"✓ Tip\";\n  color: #10b981;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"important\"] {\n  border-color: #a855f7;\n  background: color-mix(in srgb, #a855f7 10%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"important\"]::before {\n  content: \"! Important\";\n  color: #a855f7;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"warning\"] {\n  border-color: #f59e0b;\n  background: color-mix(in srgb, #f59e0b 10%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"warning\"]::before {\n  content: \"⚠ Warning\";\n  color: #f59e0b;\n}\n\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"caution\"] {\n  border-color: #ef4444;\n  background: color-mix(in srgb, #ef4444 10%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"default\"] aside[data-theo-slide-alert-type=\"caution\"]::before {\n  content: \"✗ Caution\";\n  color: #ef4444;\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/themes/violet-forge.css",
+      "type": "registry:ui",
+      "target": "components/ui/slide/themes/violet-forge.css",
+      "content": "/*\n * Slide primitive — `violet-forge` theme.\n *\n * Branded variant: same inherit-first foundation as the `default` theme, but\n * with a Violet Forge accent (links, code backgrounds, blockquote bar)\n * blended with `currentColor` via `color-mix()`. The brand hue stays\n * recognizable across light and dark surfaces because the accent is mixed\n * with the inherited foreground.\n */\n\n@import \"./layouts.css\";\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] {\n  --theo-slide-canvas-width: 1280px;\n  --theo-slide-canvas-height: 720px;\n  --theo-slide-padding: 64px;\n  --theo-slide-font-base: 28px;\n  --theo-slide-font-family: var(\n    --vf-font-family-sans,\n    system-ui,\n    -apple-system,\n    \"Segoe UI\",\n    sans-serif\n  );\n  --theo-slide-font-mono: var(--vf-font-family-mono, ui-monospace, \"JetBrains Mono\", monospace);\n\n  /* Violet accent — the brand hue. Used for relative mixing so it adapts\n     to light/dark surfaces (mixed with `currentColor`). */\n  --theo-slide-accent: #7c3aed;\n\n  /* Derived tints — relative to inherited `currentColor` so they auto-flip\n     when the parent surface flips. */\n  --theo-slide-color-muted: color-mix(in srgb, currentColor 60%, transparent);\n  --theo-slide-color-tint-strong: color-mix(in srgb, var(--theo-slide-accent) 15%, transparent);\n  --theo-slide-color-tint-weak: color-mix(in srgb, var(--theo-slide-accent) 7%, transparent);\n  --theo-slide-color-border: color-mix(in srgb, var(--theo-slide-accent) 30%, transparent);\n  --theo-slide-color-link: color-mix(in srgb, var(--theo-slide-accent) 70%, currentColor);\n  --theo-slide-color-blockquote-bar: color-mix(in srgb, var(--theo-slide-accent) 60%, currentColor);\n\n  color: inherit;\n  background: transparent;\n  font-family: var(--theo-slide-font-family);\n  font-size: var(--theo-slide-font-base);\n  line-height: 1.5;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h1,\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h2,\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h3,\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h4,\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h5,\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h6 {\n  color: inherit;\n  line-height: 1.2;\n  margin: 0 0 0.5em 0;\n  font-weight: 600;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h1 {\n  font-size: 1.8em;\n  letter-spacing: -0.02em;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h2 {\n  font-size: 1.4em;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h3 {\n  font-size: 1.2em;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h4 {\n  font-size: 1.05em;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h5 {\n  font-size: 1em;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] h6 {\n  font-size: 0.9em;\n  color: var(--theo-slide-color-muted);\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] p {\n  margin: 0 0 0.75em 0;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] ul,\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] ol {\n  margin: 0 0 0.75em 0;\n  padding-left: 1.5em;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] li {\n  margin: 0.25em 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] blockquote {\n  margin: 0 0 0.75em 0;\n  padding: 0.25em 0.75em;\n  border-left: 4px solid var(--theo-slide-color-blockquote-bar);\n  color: var(--theo-slide-color-muted);\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] a {\n  color: var(--theo-slide-color-link);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  font-weight: 600;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] code {\n  font-family: var(--theo-slide-font-mono);\n  font-size: 0.9em;\n  padding: 0.1em 0.4em;\n  border-radius: 4px;\n  background: var(--theo-slide-color-tint-strong);\n  color: inherit;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] pre {\n  font-family: var(--theo-slide-font-mono);\n  background: var(--theo-slide-color-tint-strong);\n  color: inherit;\n  padding: 0.75em 1em;\n  border-radius: 8px;\n  overflow: auto;\n  font-size: 0.85em;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] pre code {\n  padding: 0;\n  background: transparent;\n  font-size: inherit;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] hr {\n  border: none;\n  border-top: 1px solid var(--theo-slide-color-border);\n  margin: 1em 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] table {\n  border-collapse: collapse;\n  margin: 0 0 0.75em 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] th,\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] td {\n  border: 1px solid var(--theo-slide-color-border);\n  padding: 0.4em 0.75em;\n  text-align: left;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] thead th {\n  background: var(--theo-slide-color-tint-weak);\n  font-weight: 600;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] tbody tr:nth-child(even) td {\n  background: var(--theo-slide-color-tint-weak);\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 6px;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] em {\n  font-style: italic;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] strong {\n  font-weight: 600;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] del {\n  text-decoration: line-through;\n  color: var(--theo-slide-color-muted);\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] kbd {\n  font-family: var(--theo-slide-font-mono);\n  font-size: 0.85em;\n  padding: 0.1em 0.4em;\n  border: 1px solid var(--theo-slide-color-border);\n  border-radius: 4px;\n  background: var(--theo-slide-color-tint-weak);\n}\n\n/* ─────────────────────────────────────────────────────────────────\n * GFM alerts (rich-content T1.2) — Violet Forge palette.\n * Same structure as `default`; only the accent colors differ\n * so callouts feel native to the design system.\n * ───────────────────────────────────────────────────────────────── */\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside.theo-slide-alert {\n  margin: 0 0 0.75em 0;\n  padding: 0.75em 1em;\n  border-left: 4px solid currentColor;\n  border-radius: 0.4em;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside.theo-slide-alert::before {\n  display: block;\n  margin-bottom: 0.35em;\n  font-weight: 600;\n  font-size: 0.9em;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside.theo-slide-alert > :first-child {\n  margin-top: 0;\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside.theo-slide-alert > :last-child {\n  margin-bottom: 0;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside[data-theo-slide-alert-type=\"note\"] {\n  border-color: #6366f1;\n  background: color-mix(in srgb, #6366f1 12%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside[data-theo-slide-alert-type=\"note\"]::before {\n  content: \"ⓘ Note\";\n  color: #6366f1;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside[data-theo-slide-alert-type=\"tip\"] {\n  border-color: #22d3ee;\n  background: color-mix(in srgb, #22d3ee 12%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside[data-theo-slide-alert-type=\"tip\"]::before {\n  content: \"✓ Tip\";\n  color: #22d3ee;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside[data-theo-slide-alert-type=\"important\"] {\n  border-color: #c084fc;\n  background: color-mix(in srgb, #c084fc 12%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"]\n  aside[data-theo-slide-alert-type=\"important\"]::before {\n  content: \"★ Important\";\n  color: #c084fc;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside[data-theo-slide-alert-type=\"warning\"] {\n  border-color: #facc15;\n  background: color-mix(in srgb, #facc15 12%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"]\n  aside[data-theo-slide-alert-type=\"warning\"]::before {\n  content: \"⚠ Warning\";\n  color: #facc15;\n}\n\n.theo-slide[data-theo-slide-theme=\"violet-forge\"] aside[data-theo-slide-alert-type=\"caution\"] {\n  border-color: #f87171;\n  background: color-mix(in srgb, #f87171 12%, transparent);\n}\n.theo-slide[data-theo-slide-theme=\"violet-forge\"]\n  aside[data-theo-slide-alert-type=\"caution\"]::before {\n  content: \"✗ Caution\";\n  color: #f87171;\n}\n"
+    },
+    {
+      "path": "components/primitives/slide/themes/layouts.css",
+      "type": "registry:ui",
+      "target": "components/ui/slide/themes/layouts.css",
+      "content": "/*\n * Slide layouts (rich-content plan T2.2).\n *\n * Selectors are scoped by `[data-theo-slide-layout]` on the outer `<section>`.\n * Themes (`default`, `violet-forge`) @import this file so layouts work across\n * the design system without duplication.\n *\n * Each layout uses CSS grid for placement. `default` is a no-op so existing\n * slides remain pixel-identical. The 7 layouts cover the 80% case for tech\n * presentations: title hero, dual columns, image-prose, code-output, chapter\n * dividers. Custom layouts require consumer CSS overriding the data-attr\n * selector.\n */\n\n/* Default — vertical flow (no grid). Preserves existing slide rendering. */\n.theo-slide[data-theo-slide-layout=\"default\"] {\n  /* no-op */\n}\n\n/* Title — centered hero. Used for cover slides and section dividers. */\n.theo-slide[data-theo-slide-layout=\"title\"] {\n  display: grid;\n  place-items: center;\n  text-align: center;\n}\n.theo-slide[data-theo-slide-layout=\"title\"] h1 {\n  font-size: 2.8em;\n  letter-spacing: -0.02em;\n}\n.theo-slide[data-theo-slide-layout=\"title\"] h2 {\n  font-size: 1.6em;\n  font-weight: 500;\n  color: color-mix(in srgb, currentColor 70%, transparent);\n}\n\n/* Two-column — equal split. First child block goes left, rest stack right. */\n.theo-slide[data-theo-slide-layout=\"two-column\"] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 32px;\n  align-items: start;\n}\n.theo-slide[data-theo-slide-layout=\"two-column\"] > * {\n  min-width: 0;\n}\n\n/* Image-right — text left (1.5fr), image right (1fr). */\n.theo-slide[data-theo-slide-layout=\"image-right\"] {\n  display: grid;\n  grid-template-columns: 1.5fr 1fr;\n  gap: 32px;\n  align-items: center;\n}\n.theo-slide[data-theo-slide-layout=\"image-right\"] img {\n  grid-column: 2;\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n  justify-self: end;\n}\n\n/* Image-left — mirror of image-right. */\n.theo-slide[data-theo-slide-layout=\"image-left\"] {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 32px;\n  align-items: center;\n}\n.theo-slide[data-theo-slide-layout=\"image-left\"] img {\n  grid-column: 1;\n  grid-row: 1;\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n}\n\n/* Code-output — code block left (slightly wider), prose right. */\n.theo-slide[data-theo-slide-layout=\"code-output\"] {\n  display: grid;\n  grid-template-columns: 1.2fr 1fr;\n  gap: 24px;\n  align-items: start;\n}\n.theo-slide[data-theo-slide-layout=\"code-output\"] pre {\n  margin: 0;\n}\n\n/* Section — full-bleed chapter divider with tinted backdrop. */\n.theo-slide[data-theo-slide-layout=\"section\"] {\n  display: grid;\n  place-items: center;\n  text-align: center;\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n.theo-slide[data-theo-slide-layout=\"section\"] h1 {\n  font-size: 3.6em;\n  letter-spacing: -0.03em;\n  margin: 0;\n}\n.theo-slide[data-theo-slide-layout=\"section\"] p {\n  font-size: 1.1em;\n  color: color-mix(in srgb, currentColor 65%, transparent);\n}\n\n/* ─────────────────────────────────────────────────────────────────\n * Header / Footer / Pagination overlays (rich-content T5.1).\n * Plain text divs absolute-positioned in the canvas. They don't push\n * content; they sit ON TOP. Sized in slide units (28px base).\n * ───────────────────────────────────────────────────────────────── */\n.theo-slide .theo-slide-header {\n  position: absolute;\n  top: 16px;\n  left: 32px;\n  right: 32px;\n  font-size: 0.6em;\n  opacity: 0.7;\n  pointer-events: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.theo-slide .theo-slide-footer {\n  position: absolute;\n  bottom: 16px;\n  left: 32px;\n  right: 96px;\n  font-size: 0.6em;\n  opacity: 0.7;\n  text-align: center;\n  pointer-events: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.theo-slide .theo-slide-paginate {\n  position: absolute;\n  bottom: 16px;\n  right: 32px;\n  font-size: 0.55em;\n  opacity: 0.5;\n  font-variant-numeric: tabular-nums;\n  pointer-events: none;\n}\n"
+    }
+  ]
+}

package/registry/r/social-auth-row.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "social-auth-row",
+  "type": "registry:ui",
+  "title": "SocialAuthRow",
+  "description": "Row of OAuth provider buttons.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/social-auth-row/social-auth-row.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/social-auth-row.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface SocialProvider {\n  id: string;\n  label: ReactNode;\n  /** Icon component (e.g. brand-specific SVG). */\n  icon: IconComponent;\n}\n\ninterface SocialAuthRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  providers: SocialProvider[];\n  onSelect?: (id: string) => void;\n  /**\n   * Stack vertically instead of horizontally (single-column flow).\n   */\n  vertical?: boolean;\n}\n\n/**\n * SocialAuthRow — row of OAuth provider buttons.\n *\n * Stateless; caller wires the redirect on `onSelect`. Buttons share Theo button\n * styling but with provider icon prominently on the left.\n */\nconst SocialAuthRow = forwardRef<HTMLDivElement, SocialAuthRowProps>(\n  ({ className, providers, onSelect, vertical, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"grid gap-2\",\n        vertical ? \"grid-cols-1\" : `grid-cols-${Math.min(providers.length, 4)}`,\n        className,\n      )}\n      style={\n        !vertical\n          ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` }\n          : undefined\n      }\n      {...props}\n    >\n      {providers.map((p) => {\n        const Icon = p.icon;\n        return (\n          <button\n            key={p.id}\n            type=\"button\"\n            onClick={() => onSelect?.(p.id)}\n            className={cn(\n              \"inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card\",\n              \"px-4 font-medium font-sans text-body-sm text-foreground\",\n              \"transition-colors duration-base ease-out-soft\",\n              \"hover:bg-muted\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            )}\n          >\n            <Icon className=\"size-4\" aria-hidden=\"true\" />\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  ),\n);\nSocialAuthRow.displayName = \"SocialAuthRow\";\n\nexport { SocialAuthRow };\n"
+    }
+  ]
+}

package/registry/r/stat-tile.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stat-tile",
+  "type": "registry:ui",
+  "title": "StatTile",
+  "description": "Big-number stat tile primitive for dashboard summaries. Renders value + label + optional icon + optional delta (trend up/down/flat with TrendingUp/TrendingDown/Minus icons and success/destructive/muted color). Dual mode: with onClick renders as button with hover state + trailing ArrowUpRight chevron; without, renders as static div. Value uses font-display tabular-nums whitespace-nowrap.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/stat-tile/stat-tile.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/stat-tile.tsx",
+      "content": "import { ArrowUpRight, Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ElementType, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * StatTile — big number + label + optional delta + optional icon.\n *\n * Dual mode based on `onClick`:\n *   - With onClick → renders as `<button>` with hover state + trailing\n *     ArrowUpRight chevron (navigation affordance).\n *   - Without onClick → renders as static `<div>`.\n *\n * Delta trend drives icon + color: up=success/TrendingUp, down=destructive/\n * TrendingDown, flat=muted/Minus. Big value uses font-display + tabular-nums.\n *\n * @example\n *   <StatTile value=\"42\" label=\"Projects\" />\n *   <StatTile value=\"$1,234\" label=\"MRR\" icon={DollarSign}\n *             delta={{ value: \"+12%\", trend: \"up\" }} onClick={openBilling} />\n */\nexport interface StatTileProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"value\"> {\n  value: ReactNode;\n  label: ReactNode;\n  icon?: ElementType;\n  delta?: { value: ReactNode; trend: \"up\" | \"down\" | \"flat\" };\n}\n\nconst TREND: Record<\"up\" | \"down\" | \"flat\", { icon: ElementType; color: string }> = {\n  up: { icon: TrendingUp, color: \"text-success\" },\n  down: { icon: TrendingDown, color: \"text-destructive\" },\n  flat: { icon: Minus, color: \"text-muted-foreground\" },\n};\n\nconst StatTile = forwardRef<HTMLElement, StatTileProps>(\n  ({ className, value, label, icon: Icon, delta, onClick, children: _children, ...props }, ref) => {\n    const isInteractive = onClick !== undefined;\n    const TrendIcon = delta !== undefined ? TREND[delta.trend].icon : null;\n    const trendColor = delta !== undefined ? TREND[delta.trend].color : \"\";\n\n    const inner = (\n      <>\n        {(Icon !== undefined || isInteractive) && (\n          <div className=\"mb-3 flex items-center justify-between\">\n            {Icon !== undefined ? (\n              <div className=\"flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40\">\n                <Icon aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n              </div>\n            ) : (\n              <div />\n            )}\n            {isInteractive ? (\n              <ArrowUpRight\n                aria-hidden=\"true\"\n                className=\"size-3.5 text-muted-foreground transition-colors group-hover:text-foreground\"\n              />\n            ) : null}\n          </div>\n        )}\n        <div className=\"whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight\">\n          {value}\n        </div>\n        <div className=\"mt-1 font-sans text-body-sm text-muted-foreground\">{label}</div>\n        {delta !== undefined && TrendIcon !== null ? (\n          <div\n            className={cn(\"mt-2 inline-flex items-center gap-1 font-mono text-label\", trendColor)}\n          >\n            <TrendIcon aria-hidden=\"true\" className=\"size-3\" />\n            <span>{delta.value}</span>\n          </div>\n        ) : null}\n      </>\n    );\n\n    if (isInteractive) {\n      return (\n        <button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          onClick={onClick}\n          className={cn(\n            \"group block w-full rounded-xl border border-border/40 bg-card p-5 text-left\",\n            \"cursor-pointer transition-colors hover:border-primary/30\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            className,\n          )}\n          {...props}\n        >\n          {inner}\n        </button>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(\"rounded-xl border border-border/40 bg-card p-5\", className)}\n      >\n        {inner}\n      </div>\n    );\n  },\n);\nStatTile.displayName = \"StatTile\";\n\nexport { StatTile };\n"
+    }
+  ]
+}

package/registry/r/status-dot.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "status-dot",
+  "type": "registry:ui",
+  "title": "StatusDot",
+  "description": "Semantic status indicator (small colored circle + optional label). Five status kinds: live (success), building (warning, auto-pulses), failed (destructive), idle (muted), warning (warning, static). Three sizes (xs 6px / sm 8px default / md 10px). When neither label nor aria-label is provided, auto-applies aria-label=status and emits a dev warning.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/status-dot/status-dot.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/status-dot.tsx",
+      "content": "import { forwardRef, useEffect } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * StatusDot — semantic status indicator (colored circle + optional label).\n *\n * Five status kinds:\n *   - `live`     — deployed / verified / healthy (success)\n *   - `building` — in-progress / queued (warning, auto-pulses)\n *   - `failed`   — error / down / rejected (destructive)\n *   - `idle`     — pending / offline (muted)\n *   - `warning`  — degraded but functional (warning, static)\n *\n * Three sizes (xs 6px, sm 8px default, md 10px). `pulse` defaults to\n * `true` for `building` and `false` otherwise; passing `pulse` explicitly\n * overrides the auto behavior. When no visible `label` AND no `aria-label`\n * are provided, the component auto-applies `aria-label={status}` and\n * emits a dev-mode warning (a status communicated only by color is\n * invisible to screen readers).\n *\n * @example\n *   <StatusDot status=\"live\" label=\"Production\" />\n *   <StatusDot status=\"building\" />            // auto-pulses + auto-aria-label\n */\nexport type StatusKind = \"live\" | \"building\" | \"failed\" | \"idle\" | \"warning\";\n\nexport interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  status: StatusKind;\n  label?: ReactNode;\n  size?: \"xs\" | \"sm\" | \"md\";\n  pulse?: boolean;\n}\n\nconst DOT_COLOR: Record<StatusKind, string> = {\n  live: \"bg-success\",\n  building: \"bg-warning\",\n  failed: \"bg-destructive\",\n  idle: \"bg-muted-foreground/40\",\n  warning: \"bg-warning\",\n};\n\nconst LABEL_COLOR: Record<StatusKind, string> = {\n  live: \"text-success\",\n  building: \"text-warning\",\n  failed: \"text-destructive\",\n  idle: \"text-muted-foreground\",\n  warning: \"text-warning\",\n};\n\nconst SIZE: Record<NonNullable<StatusDotProps[\"size\"]>, string> = {\n  xs: \"size-1.5\",\n  sm: \"size-2\",\n  md: \"size-2.5\",\n};\n\nconst StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(\n  ({ className, status, label, size = \"sm\", pulse, \"aria-label\": ariaLabel, ...props }, ref) => {\n    const shouldPulse = pulse ?? status === \"building\";\n\n    const hasVisibleLabel = label !== undefined && label !== null;\n    const effectiveAriaLabel = ariaLabel ?? (hasVisibleLabel ? undefined : status);\n\n    // EC-6: dev warning when neither label nor aria-label is provided.\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\" && !hasVisibleLabel && ariaLabel === undefined) {\n        // biome-ignore lint/suspicious/noConsole: dev-only diagnostic for a11y misconfiguration.\n        console.warn(\n          `<StatusDot status=\"${status}\" />: no \\`label\\` or \\`aria-label\\` provided. Color-only status is invisible to screen readers. Falling back to aria-label=\"${status}\".`,\n        );\n      }\n    }, [hasVisibleLabel, ariaLabel, status]);\n\n    const dot = (\n      <span\n        aria-hidden={hasVisibleLabel ? \"true\" : undefined}\n        className={cn(\n          \"inline-block shrink-0 rounded-full\",\n          SIZE[size],\n          DOT_COLOR[status],\n          shouldPulse && \"animate-pulse\",\n        )}\n      />\n    );\n\n    if (!hasVisibleLabel) {\n      return (\n        <span\n          ref={ref}\n          // biome-ignore lint/a11y/useSemanticElements: StatusDot is a generic inline indicator; there is no HTML element with implicit role=\"status\" that is an inline span. The native <output> is block-level and form-bound, which doesn't fit this use case.\n          role=\"status\"\n          aria-label={effectiveAriaLabel}\n          className={cn(\"inline-flex items-center\", className)}\n          {...props}\n        >\n          {dot}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        ref={ref}\n        aria-label={effectiveAriaLabel}\n        className={cn(\n          \"inline-flex items-center gap-1.5 font-mono text-label\",\n          LABEL_COLOR[status],\n          className,\n        )}\n        {...props}\n      >\n        {dot}\n        <span>{label}</span>\n      </span>\n    );\n  },\n);\nStatusDot.displayName = \"StatusDot\";\n\nexport { StatusDot };\n"
+    }
+  ]
+}

package/registry/r/steps-rail.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "steps-rail",
+  "type": "registry:ui",
+  "title": "StepsRail",
+  "description": "Vertical numbered rail with connecting line.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/steps-rail/steps-rail.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/steps-rail.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface RailStep {\n  id: string | number;\n  label?: ReactNode;\n  /**\n   * Visual state: \"complete\", \"current\", \"pending\".\n   */\n  state?: \"complete\" | \"current\" | \"pending\";\n}\n\ninterface StepsRailProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  steps: RailStep[];\n  /**\n   * Optional label rendered at the top of the rail (e.g. \"STEPS\").\n   */\n  title?: ReactNode;\n}\n\n/**\n * StepsRail — vertical numbered rail with connecting line.\n *\n * Mirrors the file-organisation wiremock right rail: 5 numbered dots, current\n * highlighted, line connecting them.\n */\nconst StepsRail = forwardRef<HTMLElement, StepsRailProps>(\n  ({ className, steps, title, ...props }, ref) => (\n    <aside\n      ref={ref}\n      className={cn(\n        \"flex w-14 flex-col items-center gap-6 border-border/40 border-l py-6\",\n        className,\n      )}\n      aria-label=\"Task steps\"\n      {...props}\n    >\n      {title ? (\n        <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          {title}\n        </span>\n      ) : null}\n      <ol className=\"before:-translate-x-1/2 relative grid place-items-center gap-6 before:absolute before:top-3 before:bottom-3 before:left-1/2 before:w-px before:bg-border/60\">\n        {steps.map((step, idx) => {\n          const state = step.state ?? (idx === 0 ? \"current\" : \"pending\");\n          return (\n            <li key={step.id} className=\"relative z-10\">\n              <span\n                className={cn(\n                  \"grid size-7 place-items-center rounded-full border-2 font-bold font-mono text-code-sm\",\n                  state === \"complete\" && \"border-primary bg-primary text-primary-foreground\",\n                  state === \"current\" && \"border-foreground bg-foreground text-background\",\n                  state === \"pending\" && \"border-border bg-card text-muted-foreground\",\n                )}\n                aria-current={state === \"current\" ? \"step\" : undefined}\n              >\n                {step.label ?? idx + 1}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </aside>\n  ),\n);\nStepsRail.displayName = \"StepsRail\";\n\nexport { StepsRail };\n"
+    }
+  ]
+}

package/registry/r/sub-agent-dispatch.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sub-agent-dispatch",
+  "type": "registry:ui",
+  "title": "SubAgentDispatch",
+  "description": "Visualization for a Task() / sub-agent invocation.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/sub-agent-dispatch/sub-agent-dispatch.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/sub-agent-dispatch.tsx",
+      "content": "import { Bot, CornerDownRight, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type SubAgentState = \"spawning\" | \"running\" | \"completed\" | \"failed\" | \"cancelled\";\n\nexport interface SubAgentRun {\n  id: string;\n  /** Profile name (matches AgentProfile.name). */\n  agent: string;\n  /** Short task description given to the sub-agent. */\n  task: string;\n  state: SubAgentState;\n  /** Optional duration label. */\n  duration?: string;\n  /** Optional last status line (preview of the latest event). */\n  lastEvent?: string;\n  /** Optional result summary (one-liner). */\n  result?: ReactNode;\n}\n\ninterface SubAgentDispatchProps extends HTMLAttributes<HTMLElement> {\n  run: SubAgentRun;\n  /** When provided, renders a cancel button while the run is in flight. */\n  onCancel?: (id: string) => void;\n}\n\nconst STATE_CONFIG: Record<SubAgentState, { label: string; class: string }> = {\n  spawning: {\n    label: \"Spawning\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  running: { label: \"Running\", class: \"border-primary/40 bg-primary/15 text-primary\" },\n  completed: { label: \"Done\", class: \"border-success/40 bg-success/15 text-success\" },\n  failed: { label: \"Failed\", class: \"border-destructive/40 bg-destructive/15 text-destructive\" },\n  cancelled: { label: \"Cancelled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * SubAgentDispatch — visualization for a Task() / sub-agent invocation.\n *\n * Shows the agent name, the task summary, current state, an inline event\n * preview, and an optional result. Use inside the agent timeline to make\n * delegation visible.\n */\nconst SubAgentDispatch = forwardRef<HTMLElement, SubAgentDispatchProps>(\n  ({ className, run, onCancel, ...props }, ref) => {\n    const cfg = STATE_CONFIG[run.state];\n    const isLive = run.state === \"spawning\" || run.state === \"running\";\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid gap-2 rounded-lg border border-primary/30 border-l-2 border-l-primary bg-card px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <CornerDownRight className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <Bot className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <span className=\"font-medium font-mono text-code-sm text-foreground\">dispatch</span>\n            <span className=\"font-mono text-code-sm text-primary\">{run.agent}</span>\n            {run.duration ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                · {run.duration}\n              </span>\n            ) : null}\n          </div>\n          <span\n            className={cn(\n              \"inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {isLive ? <Loader2 className=\"size-3 animate-spin\" aria-hidden=\"true\" /> : null}\n            {cfg.label}\n          </span>\n        </header>\n\n        <p className=\"text-body-sm text-foreground\">\n          <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            task\n          </span>\n          {run.task}\n        </p>\n\n        {run.lastEvent ? (\n          <p className=\"truncate font-mono text-code-sm text-muted-foreground\">\n            <span className=\"text-muted-foreground/60\">›</span> {run.lastEvent}\n          </p>\n        ) : null}\n\n        {run.result ? (\n          <p className=\"rounded-md bg-muted/40 px-3 py-2 text-body-sm text-foreground\">\n            <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              result\n            </span>\n            {run.result}\n          </p>\n        ) : null}\n\n        {isLive && onCancel ? (\n          <footer className=\"flex justify-end\">\n            <button\n              type=\"button\"\n              onClick={() => onCancel(run.id)}\n              className=\"rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              Cancel\n            </button>\n          </footer>\n        ) : null}\n      </article>\n    );\n  },\n);\nSubAgentDispatch.displayName = \"SubAgentDispatch\";\n\nexport { SubAgentDispatch };\n"
+    }
+  ]
+}

package/registry/r/switch.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "title": "Switch",
+  "description": "Built on Radix Switch — accessible binary toggle with on / off states and disabled support.",
+  "dependencies": [
+    "@radix-ui/react-switch",
+    "class-variance-authority"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/switch/switch.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/switch.tsx",
+      "content": "import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Switch — built on Radix Switch. Used for binary toggles (autoaccept,\n * dark mode preview, feature flags).\n *\n * Off-state uses --muted, on-state uses --primary with a subtle glow shadow\n * to mark \"this is active\" in the violet brand language.\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 20×36 track from before this prop existed.\n */\nconst switchVariants = cva(\n  [\n    \"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent\",\n    \"transition-[background-color,box-shadow] duration-base ease-out-soft\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_0_8px_hsl(var(--primary)/0.35)]\",\n    \"data-[state=unchecked]:bg-muted\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-7\",\n        md: \"h-5 w-9\",\n        lg: \"h-6 w-11\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst thumbClassBySize: Record<NonNullable<VariantProps<typeof switchVariants>[\"size\"]>, string> = {\n  sm: \"size-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0.5\",\n  md: \"size-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5\",\n  lg: \"size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5\",\n};\n\ninterface SwitchProps\n  extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n    VariantProps<typeof switchVariants> {}\n\nconst Switch = forwardRef<ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(\n  ({ className, size, ...props }, ref) => (\n    <SwitchPrimitive.Root ref={ref} className={cn(switchVariants({ size }), className)} {...props}>\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full bg-card shadow-sm\",\n          \"transition-transform duration-base ease-out-soft\",\n          thumbClassBySize[size ?? \"md\"],\n        )}\n      />\n    </SwitchPrimitive.Root>\n  ),\n);\nSwitch.displayName = \"Switch\";\n\nexport { Switch, switchVariants };\n"
+    }
+  ]
+}

package/registry/r/system-prompt-editor.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "system-prompt-editor",
+  "type": "registry:ui",
+  "title": "SystemPromptEditor",
+  "description": "Surface the agent's system prompt with a clear",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/system-prompt-editor/system-prompt-editor.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/system-prompt-editor.tsx",
+      "content": "import { RotateCcw, Sparkles } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface SystemPromptEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Vendor / default system prompt (read-only). */\n  defaultPrompt: string;\n  /** Current override; pass empty string for \"use default\". */\n  override: string;\n  onOverrideChange: (next: string) => void;\n  /** Approximate token count for the active prompt. */\n  tokenEstimate?: number;\n  title?: ReactNode;\n}\n\n/**\n * SystemPromptEditor — surface the agent's system prompt with a clear\n * \"vendor default\" vs \"user override\" toggle.\n *\n * Behavior:\n *   - When override is empty, the textarea shows the default (greyed out,\n *     editable starts blank).\n *   - When user types, override takes effect.\n *   - \"Reset to default\" wipes the override.\n *\n * Critical for transparency: a user must be able to see and edit the prompt.\n */\nconst SystemPromptEditor = forwardRef<HTMLDivElement, SystemPromptEditorProps>(\n  (\n    {\n      className,\n      defaultPrompt,\n      override,\n      onOverrideChange,\n      tokenEstimate,\n      title = \"System prompt\",\n      ...props\n    },\n    ref,\n  ) => {\n    const usingOverride = override.length > 0;\n    const [showDefault, setShowDefault] = useState(false);\n\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        <header className=\"flex items-center justify-between gap-3 border-border/40 border-b px-4 py-3\">\n          <div className=\"flex items-center gap-2\">\n            <Sparkles className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            <span\n              className={cn(\n                \"inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-label uppercase tracking-wider\",\n                usingOverride\n                  ? \"border-primary/40 bg-primary/10 text-primary\"\n                  : \"border-border/40 bg-muted text-muted-foreground\",\n              )}\n            >\n              {usingOverride ? \"Override active\" : \"Vendor default\"}\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {tokenEstimate !== undefined ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                ~{tokenEstimate.toLocaleString()} tokens\n              </span>\n            ) : null}\n            <button\n              type=\"button\"\n              onClick={() => setShowDefault((v) => !v)}\n              className=\"rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              {showDefault ? \"Hide\" : \"Show\"} default\n            </button>\n            {usingOverride ? (\n              <button\n                type=\"button\"\n                onClick={() => onOverrideChange(\"\")}\n                className=\"inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                <RotateCcw className=\"size-3\" /> Reset\n              </button>\n            ) : null}\n          </div>\n        </header>\n\n        {showDefault ? (\n          <pre className=\"max-h-48 overflow-auto border-border/40 border-b bg-muted/40 px-4 py-3 font-mono text-code-sm text-muted-foreground\">\n            {defaultPrompt}\n          </pre>\n        ) : null}\n\n        <textarea\n          value={override}\n          onChange={(e) => onOverrideChange(e.target.value)}\n          placeholder={\n            usingOverride ? \"\" : \"Leave empty to use the vendor default. Type here to override.\"\n          }\n          rows={8}\n          className={cn(\n            \"w-full resize-y bg-transparent px-4 py-3 font-mono text-code-md text-foreground\",\n            \"placeholder:text-muted-foreground\",\n            \"focus:outline-none\",\n          )}\n        />\n      </section>\n    );\n  },\n);\nSystemPromptEditor.displayName = \"SystemPromptEditor\";\n\nexport { SystemPromptEditor };\n"
+    }
+  ]
+}

package/registry/r/table.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "title": "Table",
+  "description": "Semantic data-table primitive with sub-components (Table.Header, Table.Body, Table.Row, Table.Cell, Table.HeaderCell). Supports density (default | compact via Context), per-cell align (left | center | right), numeric cells (font-mono tabular-nums), and sortable header cells (onSort + sortDirection with ChevronUp/ChevronDown affordance + aria-sort).",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/table/table.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/table.tsx",
+      "content": "import { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Table — semantic data table primitive with sub-components.\n *\n * Composition:\n *   <Table density=\"default\">\n *     <Table.Header>\n *       <Table.Row>\n *         <Table.HeaderCell>Date</Table.HeaderCell>\n *         <Table.HeaderCell align=\"right\">Amount</Table.HeaderCell>\n *       </Table.Row>\n *     </Table.Header>\n *     <Table.Body>\n *       <Table.Row>\n *         <Table.Cell>2026-05-23</Table.Cell>\n *         <Table.Cell align=\"right\" numeric>$ 42.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Body>\n *   </Table>\n *\n * density propagates via Context so Cells pick up vertical padding without\n * prop drilling. Sub-components are attached as static properties on the\n * root (`Table.Header`, etc.) — single import surface.\n *\n * Sortable header: pass `onSort` + `sortDirection`. The HeaderCell renders\n * the sort affordance (ChevronUp/ChevronDown) and triggers the consumer\n * callback. `sortDirection` without `onSort` is a no-op (header stays\n * static); `sortDirection=\"none\"` with `onSort` shows a dimmed affordance.\n */\n\ntype TableDensity = \"default\" | \"compact\";\ntype AlignKind = \"left\" | \"center\" | \"right\";\ntype SortDirection = \"asc\" | \"desc\" | \"none\";\n\nconst TableDensityContext = createContext<TableDensity>(\"default\");\n\nconst alignClass: Record<AlignKind, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\",\n};\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  density?: TableDensity;\n}\n\nconst Root = forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = \"default\", children, ...props }, ref) => (\n    <TableDensityContext.Provider value={density}>\n      <table\n        ref={ref}\n        className={cn(\"w-full border-collapse font-sans text-body-sm\", className)}\n        {...props}\n      >\n        {children}\n      </table>\n    </TableDensityContext.Provider>\n  ),\n);\nRoot.displayName = \"Table\";\n\nconst Header = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <thead\n      ref={ref}\n      className={cn(\n        \"border-border/40 border-b text-label-caps text-muted-foreground uppercase tracking-wider\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nHeader.displayName = \"Table.Header\";\n\nconst Body = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tbody ref={ref} className={cn(\"text-foreground\", className)} {...props} />\n  ),\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn(\n        \"border-border/20 border-b transition-colors last:border-0 hover:bg-muted/40\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRow.displayName = \"Table.Row\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  align?: AlignKind;\n  numeric?: boolean;\n}\n\nconst Cell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = \"left\", numeric, children, ...props }, ref) => {\n    const density = useContext(TableDensityContext);\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          \"px-3\",\n          density === \"compact\" ? \"py-1.5\" : \"py-3\",\n          alignClass[align],\n          numeric && \"font-mono tabular-nums\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </td>\n    );\n  },\n);\nCell.displayName = \"Table.Cell\";\n\nexport interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  align?: AlignKind;\n  /** When provided, header becomes a sort trigger. */\n  onSort?: () => void;\n  /** Current sort state for this column. */\n  sortDirection?: SortDirection;\n}\n\nconst HeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  ({ className, align = \"left\", onSort, sortDirection = \"none\", children, ...props }, ref) => {\n    const sortAffordance =\n      onSort !== undefined ? (\n        <span className=\"ml-1 inline-flex flex-col\">\n          <ChevronUp\n            aria-hidden=\"true\"\n            className={cn(\"-mb-1 size-3\", sortDirection === \"asc\" ? \"opacity-100\" : \"opacity-30\")}\n          />\n          <ChevronDown\n            aria-hidden=\"true\"\n            className={cn(\"size-3\", sortDirection === \"desc\" ? \"opacity-100\" : \"opacity-30\")}\n          />\n        </span>\n      ) : null;\n\n    const ariaSort: ThHTMLAttributes<HTMLTableCellElement>[\"aria-sort\"] =\n      onSort === undefined\n        ? undefined\n        : sortDirection === \"asc\"\n          ? \"ascending\"\n          : sortDirection === \"desc\"\n            ? \"descending\"\n            : \"none\";\n\n    return (\n      <th\n        ref={ref}\n        scope=\"col\"\n        aria-sort={ariaSort}\n        className={cn(\n          \"px-3 py-2.5 font-medium\",\n          alignClass[align],\n          align === \"right\" && \"[&_button]:justify-end\",\n          className,\n        )}\n        {...props}\n      >\n        {onSort !== undefined ? (\n          <button\n            type=\"button\"\n            onClick={onSort}\n            className={cn(\n              \"inline-flex items-center gap-1\",\n              \"text-label-caps uppercase tracking-wider\",\n              \"transition-colors hover:text-foreground\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            {children}\n            {sortAffordance}\n          </button>\n        ) : (\n          children\n        )}\n      </th>\n    );\n  },\n);\nHeaderCell.displayName = \"Table.HeaderCell\";\n\ntype TableRoot = typeof Root & {\n  Header: typeof Header;\n  Body: typeof Body;\n  Row: typeof Row;\n  Cell: typeof Cell;\n  HeaderCell: typeof HeaderCell;\n};\n\nconst Table: TableRoot = Object.assign(Root, { Header, Body, Row, Cell, HeaderCell });\n\nexport { Table };\n"
+    }
+  ]
+}

package/registry/r/tabs.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "title": "Tabs",
+  "description": "Built on Radix Tabs with active-underline styling and focus-visible ring.",
+  "dependencies": [
+    "@radix-ui/react-tabs"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/tabs/tabs.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/tabs.tsx",
+      "content": "import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Tabs — built on Radix Tabs.\n *\n * Visual: underlined active tab in primary (violet), inactive in muted-foreground.\n * Used in project views (Overview / Deployments / Logs / Settings).\n */\n\nconst List = forwardRef<\n  ElementRef<typeof TabsPrimitive.List>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center border-border/40 border-b text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nList.displayName = \"Tabs.List\";\n\nconst Trigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"relative inline-flex h-10 items-center justify-center whitespace-nowrap px-4\",\n      \"font-medium font-sans text-body-sm text-muted-foreground\",\n      \"transition-colors duration-base ease-out-soft\",\n      \"hover:text-foreground\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      \"data-[state=active]:text-foreground\",\n      // Active underline using a pseudo-element via shadow\n      \"data-[state=active]:shadow-[inset_0_-2px_0_0_hsl(var(--primary))]\",\n      className,\n    )}\n    {...props}\n  />\n));\nTrigger.displayName = \"Tabs.Trigger\";\n\nconst Content = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    {...props}\n  />\n));\nContent.displayName = \"Tabs.Content\";\n\nconst Tabs = /*#__PURE__*/ Object.assign(TabsPrimitive.Root, {\n  List,\n  Trigger,\n  Content,\n});\n\nexport { Tabs };\n"
+    }
+  ]
+}