@usetheo/ui 0.12.0 → 0.13.1

package/registry/r/skill-editor.json

@@ -22,7 +22,7 @@
       "path": "components/composites/skill-editor/skill-editor.tsx",
       "type": "registry:block",
       "target": "components/blocks/skill-editor.tsx",
-      "content": "import { useState } from \"react\";\nimport type { FormEvent, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ALL_MODES, MODE_LABEL, type Mode } from \"@/types/mode\";\nimport { Button } from \"@/components/ui/button\";\nimport { FormField } from \"@/components/ui/form-field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Select } from \"@/components/ui/select\";\nimport type { Skill, SkillSource, SkillState } from \"@/components/ui/skill-card\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\n/**\n * SkillEditor — form for creating or editing a Skill.\n */\n\ntype SkillDraft = Omit<Skill, \"id\"> & {\n  id?: string;\n  instructions?: string;\n};\n\ninterface SkillEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onChange\"> {\n  initial?: Partial<Skill> & { instructions?: string };\n  onSave: (draft: SkillDraft) => void;\n  onCancel?: () => void;\n  onDelete?: () => void;\n}\n\nconst SOURCES: Array<{ id: SkillSource; label: string }> = [\n  { id: \"user\", label: \"User — defined by you\" },\n  { id: \"project\", label: \"Project — lives in this workspace\" },\n  { id: \"plugin\", label: \"Plugin — imported from a package\" },\n  { id: \"builtin\", label: \"Built-in — shipped with Theo\" },\n];\n\nexport function SkillEditor({\n  className,\n  initial,\n  onSave,\n  onCancel,\n  onDelete,\n  ...formProps\n}: SkillEditorProps) {\n  const [name, setName] = useState(initial?.name ?? \"\");\n  const [description, setDescription] = useState(\n    typeof initial?.description === \"string\" ? initial.description : \"\",\n  );\n  const [instructions, setInstructions] = useState(initial?.instructions ?? \"\");\n  const [source, setSource] = useState<SkillSource>(initial?.source ?? \"user\");\n  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(\", \") ?? \"\");\n  const [triggersRaw, setTriggersRaw] = useState(initial?.triggers?.join(\", \") ?? \"\");\n  const [enabled, setEnabled] = useState<SkillState>(initial?.state ?? \"enabled\");\n  const [modes, setModes] = useState<Mode[]>(initial?.modes ?? []);\n\n  // Note: state is only seeded once on mount. To reset the form when editing\n  // a different skill, use the React `key` pattern at the call site:\n  //   <SkillEditor key={skill.id} initial={skill} ... />\n  const toggleMode = (m: Mode) =>\n    setModes((prev) => (prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]));\n\n  const canSave = name.trim().length > 0;\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canSave) return;\n    onSave({\n      id: initial?.id,\n      name: name.trim(),\n      description: description.trim() || undefined,\n      instructions: instructions.trim() || undefined,\n      source,\n      state: enabled,\n      allowedTools: allowedToolsRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      triggers: triggersRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      modes: modes.length > 0 ? modes : undefined,\n    });\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\"flex h-full flex-col gap-4\", className)}\n      {...formProps}\n    >\n      <FormField>\n        <FormField.Label>Name</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={name}\n            onChange={(e) => setName(e.target.value)}\n            placeholder=\"diff-explainer\"\n            required\n          />\n        </FormField.Control>\n        <FormField.Hint>Kebab-case identifier the agent uses to invoke this skill.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Description</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={description}\n            onChange={(e) => setDescription(e.target.value)}\n            placeholder=\"Explain a diff in plain English.\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      <FormField className=\"flex-1\">\n        <FormField.Label>Instructions</FormField.Label>\n        <FormField.Control>\n          <Textarea\n            value={instructions}\n            onChange={(e) => setInstructions(e.target.value)}\n            rows={6}\n            placeholder=\"When invoked, read the diff via Read or Grep and produce a concise summary of intent + risk.\"\n            className=\"min-h-[10rem] flex-1 font-mono text-code-sm\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Sub-prompt loaded when the skill is invoked.</FormField.Hint>\n      </FormField>\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField>\n          <FormField.Label>Source</FormField.Label>\n          <FormField.Control>\n            <Select\n              value={source}\n              onValueChange={(v) => {\n                // Re-audit Issue 7: narrow Select string value against\n                // SOURCES.id before casting. Silent no-op for unknown.\n                const next = SOURCES.find((s) => s.id === v);\n                if (next) setSource(next.id);\n              }}\n            >\n              <Select.Trigger aria-label=\"Select skill source\">\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {SOURCES.map((s) => (\n                  <Select.Item key={s.id} value={s.id}>\n                    {s.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          </FormField.Control>\n        </FormField>\n        <FormField>\n          <FormField.Label>Allowed tools</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={allowedToolsRaw}\n              onChange={(e) => setAllowedToolsRaw(e.target.value)}\n              placeholder=\"Read, Grep, Bash\"\n            />\n          </FormField.Control>\n        </FormField>\n      </div>\n\n      <FormField>\n        <FormField.Label>Triggers</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={triggersRaw}\n            onChange={(e) => setTriggersRaw(e.target.value)}\n            placeholder=\"explain diff, summarize change\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Optional keywords / patterns for auto-discovery.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Active modes</FormField.Label>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {ALL_MODES.map((m) => {\n            const on = modes.includes(m);\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                onClick={() => toggleMode(m)}\n                aria-pressed={on}\n                className={cn(\n                  \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                  on\n                    ? \"border-primary bg-primary/15 text-primary\"\n                    : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {MODE_LABEL[m]}\n              </button>\n            );\n          })}\n        </div>\n        <FormField.Hint>\n          {modes.length === 0\n            ? \"Empty = global (available in every mode).\"\n            : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(\", \")}.`}\n        </FormField.Hint>\n      </FormField>\n\n      <div className=\"flex items-center gap-3\">\n        <Switch\n          checked={enabled === \"enabled\"}\n          onCheckedChange={(v) => setEnabled(v ? \"enabled\" : \"disabled\")}\n          aria-label=\"Enabled\"\n        />\n        <span className=\"text-body-sm text-muted-foreground\">\n          {enabled === \"enabled\"\n            ? \"Enabled — available to the agent.\"\n            : \"Disabled — kept but hidden from the agent.\"}\n        </span>\n      </div>\n\n      <footer className=\"flex items-center justify-between gap-2 border-border/40 border-t pt-4\">\n        <div>\n          {onDelete ? (\n            <Button type=\"button\" variant=\"ghost\" onClick={onDelete}>\n              Delete\n            </Button>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {onCancel ? (\n            <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n              Cancel\n            </Button>\n          ) : null}\n          <Button type=\"submit\" disabled={!canSave}>\n            {initial?.id ? \"Save changes\" : \"Create skill\"}\n          </Button>\n        </div>\n      </footer>\n    </form>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { FormEvent, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ALL_MODES, MODE_LABEL, type Mode } from \"@/types/mode\";\nimport { Button } from \"@/components/ui/button\";\nimport { FormField } from \"@/components/ui/form-field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Select } from \"@/components/ui/select\";\nimport type { Skill, SkillSource, SkillState } from \"@/components/ui/skill-card\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\n/**\n * SkillEditor — form for creating or editing a Skill.\n */\n\ntype SkillDraft = Omit<Skill, \"id\"> & {\n  id?: string;\n  instructions?: string;\n};\n\ninterface SkillEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onChange\"> {\n  initial?: Partial<Skill> & { instructions?: string };\n  onSave: (draft: SkillDraft) => void;\n  onCancel?: () => void;\n  onDelete?: () => void;\n}\n\nconst SOURCES: Array<{ id: SkillSource; label: string }> = [\n  { id: \"user\", label: \"User — defined by you\" },\n  { id: \"project\", label: \"Project — lives in this workspace\" },\n  { id: \"plugin\", label: \"Plugin — imported from a package\" },\n  { id: \"builtin\", label: \"Built-in — shipped with Theo\" },\n];\n\nexport function SkillEditor({\n  className,\n  initial,\n  onSave,\n  onCancel,\n  onDelete,\n  ...formProps\n}: SkillEditorProps) {\n  const [name, setName] = useState(initial?.name ?? \"\");\n  const [description, setDescription] = useState(\n    typeof initial?.description === \"string\" ? initial.description : \"\",\n  );\n  const [instructions, setInstructions] = useState(initial?.instructions ?? \"\");\n  const [source, setSource] = useState<SkillSource>(initial?.source ?? \"user\");\n  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(\", \") ?? \"\");\n  const [triggersRaw, setTriggersRaw] = useState(initial?.triggers?.join(\", \") ?? \"\");\n  const [enabled, setEnabled] = useState<SkillState>(initial?.state ?? \"enabled\");\n  const [modes, setModes] = useState<Mode[]>(initial?.modes ?? []);\n\n  // Note: state is only seeded once on mount. To reset the form when editing\n  // a different skill, use the React `key` pattern at the call site:\n  //   <SkillEditor key={skill.id} initial={skill} ... />\n  const toggleMode = (m: Mode) =>\n    setModes((prev) => (prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]));\n\n  const canSave = name.trim().length > 0;\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canSave) return;\n    onSave({\n      id: initial?.id,\n      name: name.trim(),\n      description: description.trim() || undefined,\n      instructions: instructions.trim() || undefined,\n      source,\n      state: enabled,\n      allowedTools: allowedToolsRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      triggers: triggersRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      modes: modes.length > 0 ? modes : undefined,\n    });\n  };\n\n  return (\n    <form\n      data-slot=\"skill-editor\"\n      onSubmit={handleSubmit}\n      className={cn(\"flex h-full flex-col gap-4\", className)}\n      {...formProps}\n    >\n      <FormField>\n        <FormField.Label>Name</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={name}\n            onChange={(e) => setName(e.target.value)}\n            placeholder=\"diff-explainer\"\n            required\n          />\n        </FormField.Control>\n        <FormField.Hint>Kebab-case identifier the agent uses to invoke this skill.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Description</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={description}\n            onChange={(e) => setDescription(e.target.value)}\n            placeholder=\"Explain a diff in plain English.\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      <FormField className=\"flex-1\">\n        <FormField.Label>Instructions</FormField.Label>\n        <FormField.Control>\n          <Textarea\n            value={instructions}\n            onChange={(e) => setInstructions(e.target.value)}\n            rows={6}\n            placeholder=\"When invoked, read the diff via Read or Grep and produce a concise summary of intent + risk.\"\n            className=\"min-h-[10rem] flex-1 font-mono text-code-sm\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Sub-prompt loaded when the skill is invoked.</FormField.Hint>\n      </FormField>\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField>\n          <FormField.Label>Source</FormField.Label>\n          <FormField.Control>\n            <Select\n              value={source}\n              onValueChange={(v) => {\n                // Re-audit Issue 7: narrow Select string value against\n                // SOURCES.id before casting. Silent no-op for unknown.\n                const next = SOURCES.find((s) => s.id === v);\n                if (next) setSource(next.id);\n              }}\n            >\n              <Select.Trigger aria-label=\"Select skill source\">\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {SOURCES.map((s) => (\n                  <Select.Item key={s.id} value={s.id}>\n                    {s.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          </FormField.Control>\n        </FormField>\n        <FormField>\n          <FormField.Label>Allowed tools</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={allowedToolsRaw}\n              onChange={(e) => setAllowedToolsRaw(e.target.value)}\n              placeholder=\"Read, Grep, Bash\"\n            />\n          </FormField.Control>\n        </FormField>\n      </div>\n\n      <FormField>\n        <FormField.Label>Triggers</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={triggersRaw}\n            onChange={(e) => setTriggersRaw(e.target.value)}\n            placeholder=\"explain diff, summarize change\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Optional keywords / patterns for auto-discovery.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Active modes</FormField.Label>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {ALL_MODES.map((m) => {\n            const on = modes.includes(m);\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                onClick={() => toggleMode(m)}\n                aria-pressed={on}\n                className={cn(\n                  \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                  on\n                    ? \"border-primary bg-primary/15 text-primary\"\n                    : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {MODE_LABEL[m]}\n              </button>\n            );\n          })}\n        </div>\n        <FormField.Hint>\n          {modes.length === 0\n            ? \"Empty = global (available in every mode).\"\n            : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(\", \")}.`}\n        </FormField.Hint>\n      </FormField>\n\n      <div className=\"flex items-center gap-3\">\n        <Switch\n          checked={enabled === \"enabled\"}\n          onCheckedChange={(v) => setEnabled(v ? \"enabled\" : \"disabled\")}\n          aria-label=\"Enabled\"\n        />\n        <span className=\"text-body-sm text-muted-foreground\">\n          {enabled === \"enabled\"\n            ? \"Enabled — available to the agent.\"\n            : \"Disabled — kept but hidden from the agent.\"}\n        </span>\n      </div>\n\n      <footer className=\"flex items-center justify-between gap-2 border-border/40 border-t pt-4\">\n        <div>\n          {onDelete ? (\n            <Button type=\"button\" variant=\"ghost\" onClick={onDelete}>\n              Delete\n            </Button>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {onCancel ? (\n            <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n              Cancel\n            </Button>\n          ) : null}\n          <Button type=\"submit\" disabled={!canSave}>\n            {initial?.id ? \"Save changes\" : \"Create skill\"}\n          </Button>\n        </div>\n      </footer>\n    </form>\n  );\n}\n"
     }
   ]
 }

package/registry/r/skills-list.json

@@ -17,7 +17,7 @@
       "path": "components/composites/skills-list/skills-list.tsx",
       "type": "registry:block",
       "target": "components/blocks/skills-list.tsx",
-      "content": "import { Search } from \"lucide-react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { type Skill, SkillCard, type SkillState } from \"@/components/ui/skill-card\";\n\ninterface SkillsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  skills: Skill[];\n  title?: ReactNode;\n  /** If true, shows a search input above the grid. */\n  searchable?: boolean;\n  onToggle?: (id: string, next: SkillState) => void;\n}\n\n/**\n * SkillsList — grid of SkillCards with optional search + source filter chips.\n * Pairs with claw-code's `claw skills` inventory but visual.\n */\nconst SkillsList = forwardRef<HTMLDivElement, SkillsListProps>(\n  ({ className, skills, title = \"Skills\", searchable = true, onToggle, ...props }, ref) => {\n    const [q, setQ] = useState(\"\");\n    const filtered = useMemo(() => {\n      if (!q.trim()) return skills;\n      const needle = q.toLowerCase();\n      return skills.filter((s) => {\n        const hay = [\n          s.name,\n          typeof s.description === \"string\" ? s.description : \"\",\n          ...(s.triggers ?? []),\n        ]\n          .join(\" \")\n          .toLowerCase();\n        return hay.includes(needle);\n      });\n    }, [skills, q]);\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"grid gap-3\", className)}\n        aria-label=\"Available skills\"\n        {...props}\n      >\n        {title || searchable ? (\n          <header className=\"flex flex-wrap items-center justify-between gap-3\">\n            {title ? (\n              <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            ) : (\n              <span />\n            )}\n            {searchable ? (\n              <div className=\"relative\">\n                <Search\n                  className=\"-translate-y-1/2 absolute top-1/2 left-2 size-3.5 text-muted-foreground\"\n                  aria-hidden=\"true\"\n                />\n                <input\n                  type=\"search\"\n                  value={q}\n                  onChange={(e) => setQ(e.target.value)}\n                  placeholder=\"Filter skills…\"\n                  aria-label=\"Filter skills\"\n                  className=\"h-8 w-56 rounded-md border border-input bg-card pr-2 pl-7 font-mono text-code-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                />\n              </div>\n            ) : null}\n          </header>\n        ) : null}\n        {filtered.length === 0 ? (\n          <p className=\"rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No skills match {q ? `\"${q}\"` : \"the current filter\"}.\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            {filtered.map((skill) => (\n              <SkillCard key={skill.id} skill={skill} {...(onToggle ? { onToggle } : {})} />\n            ))}\n          </div>\n        )}\n      </section>\n    );\n  },\n);\nSkillsList.displayName = \"SkillsList\";\n\nexport { SkillsList };\n"
+      "content": "\"use client\";\n\nimport { Search } from \"lucide-react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { type Skill, SkillCard, type SkillState } from \"@/components/ui/skill-card\";\n\ninterface SkillsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  skills: Skill[];\n  title?: ReactNode;\n  /** If true, shows a search input above the grid. */\n  searchable?: boolean;\n  onToggle?: (id: string, next: SkillState) => void;\n}\n\n/**\n * SkillsList — grid of SkillCards with optional search + source filter chips.\n * Pairs with claw-code's `claw skills` inventory but visual.\n */\nconst SkillsList = forwardRef<HTMLDivElement, SkillsListProps>(\n  ({ className, skills, title = \"Skills\", searchable = true, onToggle, ...props }, ref) => {\n    const [q, setQ] = useState(\"\");\n    const filtered = useMemo(() => {\n      if (!q.trim()) return skills;\n      const needle = q.toLowerCase();\n      return skills.filter((s) => {\n        const hay = [\n          s.name,\n          typeof s.description === \"string\" ? s.description : \"\",\n          ...(s.triggers ?? []),\n        ]\n          .join(\" \")\n          .toLowerCase();\n        return hay.includes(needle);\n      });\n    }, [skills, q]);\n\n    return (\n      <section\n        data-slot=\"skills-list\"\n        ref={ref}\n        className={cn(\"grid gap-3\", className)}\n        aria-label=\"Available skills\"\n        {...props}\n      >\n        {title || searchable ? (\n          <header className=\"flex flex-wrap items-center justify-between gap-3\">\n            {title ? (\n              <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            ) : (\n              <span />\n            )}\n            {searchable ? (\n              <div className=\"relative\">\n                <Search\n                  className=\"-translate-y-1/2 absolute top-1/2 left-2 size-3.5 text-muted-foreground\"\n                  aria-hidden=\"true\"\n                />\n                <input\n                  type=\"search\"\n                  value={q}\n                  onChange={(e) => setQ(e.target.value)}\n                  placeholder=\"Filter skills…\"\n                  aria-label=\"Filter skills\"\n                  className=\"h-8 w-56 rounded-md border border-input bg-card pr-2 pl-7 font-mono text-code-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                />\n              </div>\n            ) : null}\n          </header>\n        ) : null}\n        {filtered.length === 0 ? (\n          <p className=\"rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No skills match {q ? `\"${q}\"` : \"the current filter\"}.\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            {filtered.map((skill) => (\n              <SkillCard key={skill.id} skill={skill} {...(onToggle ? { onToggle } : {})} />\n            ))}\n          </div>\n        )}\n      </section>\n    );\n  },\n);\nSkillsList.displayName = \"SkillsList\";\n\nexport { SkillsList };\n"
     }
   ]
 }

package/registry/r/slide-deck.json

@@ -3,7 +3,7 @@
   "name": "slide-deck",
   "type": "registry:block",
   "title": "SlideDeck",
-  "description": "Composite engine that orchestrates N <Slide> primitives. Keyboard / touch / hash routing, thumbnails, presenter view, fullscreen, CSS transitions, Marpit-style fragments, PDF export. Subpath-isolated bundle in @usetheo/ui.",
+  "description": "Composite engine that orchestrates N <Slide> primitives. Keyboard / touch / hash routing, thumbnails, presenter view, fullscreen, CSS transitions, Marpit-style fragments, PDF export. Subpath-isolated bundle in @theokit/ui.",
   "dependencies": [
     "zod"
   ],
@@ -16,19 +16,19 @@
       "path": "components/composites/slide-deck/slide-deck.tsx",
       "type": "registry:block",
       "target": "components/blocks/slide-deck/slide-deck.tsx",
-      "content": "import {\n  type FC,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n/**\n * `<SlideDeck>` — composite engine orchestrating N `<Slide>` primitives.\n *\n * Subpath-isolated at `@usetheo/ui/slide-deck` (ADR D1). Imports `<Slide>` via\n * the public package path so consumer's installed peer-deps are reused.\n *\n * See RFC 0003 and the plan in\n * `.claude/knowledge-base/plans/slide-deck-composite-plan.md`.\n *\n * Two render modes:\n *   - DEFAULT layout: no children → renders canonical chrome (Slides + Controls\n *     + ProgressBar + SlideNumber + PresenterView + buttons).\n *   - HEADLESS: children provided → consumer composes own layout from\n *     `<SlideDeck.X>` sub-components and a shared DeckContext.\n *\n * SSR-safe: parses markdown only inside `useEffect`. Hash routing uses lazy\n * `initFromHash` (D17) to avoid hydration mismatch. Reducer clamps\n * `currentIndex` whenever `slides.length` changes (EC-4 reconciliation).\n */\nimport { Slide, type SlidePlugin } from \"@/components/ui/slide/index\";\nimport { DeckContext, type DeckContextValue, useDeckContext } from \"@/components/blocks/slide-deck/context\";\nimport { Controls } from \"@/components/blocks/slide-deck/controls\";\nimport { countFragmentsInMarkdown } from \"@/components/blocks/slide-deck/fragments\";\nimport { PresenterView } from \"@/components/blocks/slide-deck/presenter-view\";\nimport { printDeck } from \"@/components/blocks/slide-deck/print-styles\";\nimport { ProgressBar } from \"@/components/blocks/slide-deck/progress-bar\";\nimport type { SlideDeckInput, SlideDeckSlide, SlideDeckTransition } from \"@/components/blocks/slide-deck/schema\";\nimport { SlideNumber } from \"@/components/blocks/slide-deck/slide-number\";\nimport { splitDeck } from \"@/components/blocks/slide-deck/split-deck\";\nimport { Thumbnails } from \"@/components/blocks/slide-deck/thumbnails\";\nimport { readInitialHash, useDeckHashRouting } from \"@/components/blocks/slide-deck/use-deck-hash-routing\";\nimport { useDeckKeyboard } from \"@/components/blocks/slide-deck/use-deck-keyboard\";\nimport { useDeckState } from \"@/components/blocks/slide-deck/use-deck-state\";\nimport { useDeckSwipe } from \"@/components/blocks/slide-deck/use-deck-swipe\";\nimport { useFullscreen } from \"@/components/blocks/slide-deck/use-fullscreen\";\n\nimport \"./transitions.css\";\n\nexport interface SlideDeckProps {\n  /** Markdown string (auto-split) or pre-parsed slide array. */\n  slides: SlideDeckInput;\n  /** Initial slide index (0-based). Default 0. */\n  initialIndex?: number;\n  /** Transition preset. Default \"fade\". */\n  transition?: SlideDeckTransition;\n  /** Enable keyboard navigation. Default true. */\n  enableKeyboard?: boolean;\n  /** Enable touch/pointer swipe navigation. Default true. */\n  enableTouch?: boolean;\n  /** Enable hash routing (#/N). Default true. */\n  enableHashRouting?: boolean;\n  /** Optional unique deck id (auto-generated UUID if absent). */\n  deckId?: string;\n  /** Called after each navigation. */\n  onIndexChange?: (index: number, slide: SlideDeckSlide | undefined) => void;\n  /** Headless mode: render custom chrome using `<SlideDeck.X>` sub-components. */\n  children?: ReactNode;\n  /** Outer className for the deck root. */\n  className?: string;\n  /** Accessible label for the deck region. Defaults to \"Slide deck\". */\n  \"aria-label\"?: string;\n  /**\n   * Rich-content plugins relayed to every inner `<Slide>` (D15 / RFC 0004).\n   * Pass MEMOIZED arrays to avoid re-parses on every render.\n   */\n  plugins?: SlidePlugin[];\n}\n\nfunction generateDeckId(): string {\n  if (typeof crypto !== \"undefined\" && \"randomUUID\" in crypto) {\n    return crypto.randomUUID();\n  }\n  return `deck-${Math.random().toString(36).slice(2, 10)}`;\n}\n\nconst SlideDeckBase: FC<SlideDeckProps> = ({\n  slides: slidesInput,\n  initialIndex = 0,\n  transition = \"fade\",\n  enableKeyboard = true,\n  enableTouch = true,\n  enableHashRouting = true,\n  deckId: deckIdProp,\n  onIndexChange,\n  children,\n  className,\n  \"aria-label\": ariaLabel = \"Slide deck\",\n  plugins,\n}) => {\n  const generatedId = useId();\n  const deckId = deckIdProp ?? generatedId ?? generateDeckId();\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const [parsedSlides, setParsedSlides] = useState<SlideDeckSlide[]>(() => {\n    return Array.isArray(slidesInput) ? slidesInput : [];\n  });\n\n  // Async parse when string markdown is passed. Re-run when prop changes.\n  useEffect(() => {\n    if (Array.isArray(slidesInput)) {\n      setParsedSlides(slidesInput);\n      return;\n    }\n    let cancelled = false;\n    splitDeck(slidesInput).then(\n      (result) => {\n        if (!cancelled) setParsedSlides(result);\n      },\n      () => {\n        if (!cancelled) setParsedSlides([]);\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, [slidesInput]);\n\n  const [state, dispatch] = useDeckState({\n    initialIndex,\n    totalSlides: parsedSlides.length,\n    initFromHash: enableHashRouting ? readInitialHash : undefined,\n  });\n\n  // EC-4: reconcile when slides.length changes.\n  const previousLengthRef = useRef(0);\n  useEffect(() => {\n    const length = parsedSlides.length;\n    dispatch({ type: \"UPDATE_TOTAL_SLIDES\", total: length });\n    // First non-empty parse → honour `initialIndex` (or hash) which was clamped\n    // to 0 during initial mount when totalSlides was still 0.\n    if (previousLengthRef.current === 0 && length > 0) {\n      let target = initialIndex;\n      if (enableHashRouting) {\n        const hashIdx = readInitialHash();\n        if (typeof hashIdx === \"number\") target = hashIdx;\n      }\n      if (target > 0) {\n        dispatch({ type: \"JUMP_TO\", index: target });\n      }\n    }\n    previousLengthRef.current = length;\n  }, [parsedSlides.length, dispatch, initialIndex, enableHashRouting]);\n\n  // Update totalFragmentsInCurrent when slide content changes.\n  useEffect(() => {\n    const current = parsedSlides[state.currentIndex];\n    const count = current ? countFragmentsInMarkdown(current.markdown) : 0;\n    dispatch({ type: \"UPDATE_TOTAL_FRAGMENTS\", total: count });\n  }, [parsedSlides, state.currentIndex, dispatch]);\n\n  const fullscreen = useFullscreen(rootRef);\n\n  // Sync state.fullscreen with browser API. When user presses Esc on native UI.\n  useEffect(() => {\n    dispatch({ type: \"SET_FULLSCREEN\", value: fullscreen.isFullscreen });\n  }, [fullscreen.isFullscreen, dispatch]);\n\n  // EC-3 / D16: transition timeout fallback so rapid nav doesn't leave state stuck.\n  useEffect(() => {\n    if (state.transitionDirection === \"none\") return;\n    const t = setTimeout(() => dispatch({ type: \"TRANSITION_END\" }), 300);\n    return () => clearTimeout(t);\n  }, [state.transitionDirection, dispatch]);\n\n  const onPrint = useCallback(() => {\n    printDeck();\n  }, []);\n\n  useDeckKeyboard(dispatch, {\n    enabled: enableKeyboard,\n    totalSlides: parsedSlides.length,\n    onToggleFullscreen: fullscreen.toggle,\n    onPrint,\n  });\n\n  useDeckSwipe(rootRef, dispatch, { enabled: enableTouch });\n\n  useDeckHashRouting(dispatch, {\n    enabled: enableHashRouting,\n    totalSlides: parsedSlides.length,\n    currentIndex: state.currentIndex,\n  });\n\n  // Fire onIndexChange callback when currentIndex changes.\n  const lastIndexRef = useRef(state.currentIndex);\n  useEffect(() => {\n    if (lastIndexRef.current !== state.currentIndex) {\n      lastIndexRef.current = state.currentIndex;\n      onIndexChange?.(state.currentIndex, parsedSlides[state.currentIndex]);\n    }\n  }, [state.currentIndex, parsedSlides, onIndexChange]);\n\n  const contextValue: DeckContextValue = useMemo(\n    () => ({\n      state,\n      dispatch,\n      slides: parsedSlides,\n      transition,\n      deckId,\n      plugins,\n      toggleFullscreen: fullscreen.toggle,\n      print: onPrint,\n    }),\n    [state, dispatch, parsedSlides, transition, deckId, plugins, fullscreen.toggle, onPrint],\n  );\n\n  return (\n    <DeckContext.Provider value={contextValue}>\n      <div\n        ref={rootRef}\n        aria-roledescription=\"slide deck\"\n        aria-label={ariaLabel}\n        data-theo-slide-deck\n        data-theo-slide-deck-fullscreen={state.fullscreen ? \"true\" : undefined}\n        className={[\"theo-slide-deck\", className].filter(Boolean).join(\" \")}\n        style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}\n      >\n        {/* Live region for screen readers announcing slide changes. */}\n        {/* biome-ignore lint/a11y/useSemanticElements: ARIA live region needs explicit role for screen reader announcement; no native HTML equivalent for status updates from non-form, non-output content. */}\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          style={{\n            position: \"absolute\",\n            width: 1,\n            height: 1,\n            padding: 0,\n            margin: -1,\n            overflow: \"hidden\",\n            clip: \"rect(0,0,0,0)\",\n            whiteSpace: \"nowrap\",\n            border: 0,\n          }}\n        >\n          {parsedSlides.length > 0\n            ? `Slide ${state.currentIndex + 1} of ${parsedSlides.length}`\n            : \"Empty deck\"}\n        </div>\n        {children ?? <DefaultDeckLayout />}\n        {/* Hidden print container — visible only during @media print. */}\n        <PrintContainer slides={parsedSlides} plugins={plugins} />\n      </div>\n    </DeckContext.Provider>\n  );\n};\n\nconst SlidesView: FC<{ className?: string }> = ({ className }) => {\n  const { state, slides, transition, plugins } = useDeckContext();\n  const current = slides[state.currentIndex];\n  return (\n    <div\n      className={[\"theo-slide-deck-slide-frame\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-transition={transition}\n      data-theo-slide-deck-direction={state.transitionDirection}\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        minHeight: 0,\n        overflow: \"hidden\",\n      }}\n    >\n      {current ? (\n        <div\n          key={state.currentIndex}\n          data-theo-slide-deck-slide-state=\"incoming\"\n          style={{ position: \"absolute\", inset: 0 }}\n        >\n          <Slide\n            markdown={current.markdown}\n            plugins={plugins}\n            aria-label={`Slide ${state.currentIndex + 1}`}\n          />\n        </div>\n      ) : (\n        <div\n          data-theo-slide-deck-empty\n          style={{\n            display: \"grid\",\n            placeItems: \"center\",\n            height: \"100%\",\n            opacity: 0.6,\n            fontSize: 14,\n          }}\n        >\n          Empty deck\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst PresenterButton: FC<{ className?: string }> = ({ className }) => {\n  const { state, dispatch } = useDeckContext();\n  return (\n    <button\n      type=\"button\"\n      onClick={() => dispatch({ type: \"TOGGLE_PRESENTER\" })}\n      aria-pressed={state.presenterMode}\n      aria-label={state.presenterMode ? \"Close presenter view\" : \"Open presenter view\"}\n      className={[\"theo-slide-deck-presenter-button\", className].filter(Boolean).join(\" \")}\n    >\n      {state.presenterMode ? \"Close presenter\" : \"Presenter\"}\n    </button>\n  );\n};\n\nconst FullscreenButton: FC<{ className?: string }> = ({ className }) => {\n  const { state, toggleFullscreen } = useDeckContext();\n  return (\n    <button\n      type=\"button\"\n      onClick={() => void toggleFullscreen()}\n      aria-pressed={state.fullscreen}\n      aria-label={state.fullscreen ? \"Exit fullscreen\" : \"Enter fullscreen\"}\n      className={[\"theo-slide-deck-fullscreen-button\", className].filter(Boolean).join(\" \")}\n    >\n      {state.fullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\n    </button>\n  );\n};\n\nconst PrintButton: FC<{ className?: string }> = ({ className }) => {\n  const { print } = useDeckContext();\n  return (\n    <button\n      type=\"button\"\n      onClick={() => print()}\n      aria-label=\"Print or save deck as PDF\"\n      className={[\"theo-slide-deck-print-button\", className].filter(Boolean).join(\" \")}\n    >\n      Print\n    </button>\n  );\n};\n\nconst PrintContainer: FC<{ slides: SlideDeckSlide[]; plugins?: SlidePlugin[] }> = ({\n  slides,\n  plugins,\n}) => {\n  return (\n    <div\n      className=\"theo-slide-deck-print-container\"\n      aria-hidden=\"true\"\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        pointerEvents: \"none\",\n        visibility: \"hidden\",\n      }}\n    >\n      {slides.map((slide, index) => (\n        <div\n          key={`print-${slide.id ?? index}`}\n          className=\"theo-slide-deck-print-slide\"\n          style={{ width: 1280, height: 720 }}\n        >\n          <Slide\n            markdown={slide.markdown}\n            plugins={plugins}\n            aria-label={`Print slide ${index + 1}`}\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n\nconst DefaultDeckLayout: FC = () => {\n  return (\n    <div\n      className=\"theo-slide-deck-default-layout\"\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"1fr\",\n        gridTemplateRows: \"1fr auto\",\n        gap: 8,\n        height: \"100%\",\n      }}\n    >\n      <SlidesView />\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          gap: 8,\n          padding: \"4px 8px\",\n          flexWrap: \"wrap\",\n        }}\n      >\n        <Controls />\n        <ProgressBar />\n        <div style={{ display: \"flex\", gap: 4 }}>\n          <PresenterButton />\n          <FullscreenButton />\n          <PrintButton />\n        </div>\n      </div>\n      <SlideNumber />\n      <PresenterView />\n    </div>\n  );\n};\n\ntype SlideDeckComponent = FC<SlideDeckProps> & {\n  Slides: FC<{ className?: string }>;\n  Controls: typeof Controls;\n  ProgressBar: typeof ProgressBar;\n  SlideNumber: typeof SlideNumber;\n  Thumbnails: typeof Thumbnails;\n  PresenterView: typeof PresenterView;\n  PresenterButton: FC<{ className?: string }>;\n  FullscreenButton: FC<{ className?: string }>;\n  PrintButton: FC<{ className?: string }>;\n};\n\nconst SlideDeck = SlideDeckBase as SlideDeckComponent;\nSlideDeck.Slides = SlidesView;\nSlideDeck.Controls = Controls;\nSlideDeck.ProgressBar = ProgressBar;\nSlideDeck.SlideNumber = SlideNumber;\nSlideDeck.Thumbnails = Thumbnails;\nSlideDeck.PresenterView = PresenterView;\nSlideDeck.PresenterButton = PresenterButton;\nSlideDeck.FullscreenButton = FullscreenButton;\nSlideDeck.PrintButton = PrintButton;\n\nexport { SlideDeck };\n"
+      "content": "\"use client\";\n\nimport {\n  type FC,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n/**\n * `<SlideDeck>` — composite engine orchestrating N `<Slide>` primitives.\n *\n * Subpath-isolated at `@theokit/ui/slide-deck` (ADR D1). Imports `<Slide>` via\n * the public package path so consumer's installed peer-deps are reused.\n *\n * See RFC 0003 and the plan in\n * `.claude/knowledge-base/plans/slide-deck-composite-plan.md`.\n *\n * Two render modes:\n *   - DEFAULT layout: no children → renders canonical chrome (Slides + Controls\n *     + ProgressBar + SlideNumber + PresenterView + buttons).\n *   - HEADLESS: children provided → consumer composes own layout from\n *     `<SlideDeck.X>` sub-components and a shared DeckContext.\n *\n * SSR-safe: parses markdown only inside `useEffect`. Hash routing uses lazy\n * `initFromHash` (D17) to avoid hydration mismatch. Reducer clamps\n * `currentIndex` whenever `slides.length` changes (EC-4 reconciliation).\n */\nimport { Slide, type SlidePlugin } from \"@/components/ui/slide/index\";\nimport { DeckContext, type DeckContextValue, useDeckContext } from \"@/components/blocks/slide-deck/context\";\nimport { Controls } from \"@/components/blocks/slide-deck/controls\";\nimport { countFragmentsInMarkdown } from \"@/components/blocks/slide-deck/fragments\";\nimport { PresenterView } from \"@/components/blocks/slide-deck/presenter-view\";\nimport { printDeck } from \"@/components/blocks/slide-deck/print-styles\";\nimport { ProgressBar } from \"@/components/blocks/slide-deck/progress-bar\";\nimport type { SlideDeckInput, SlideDeckSlide, SlideDeckTransition } from \"@/components/blocks/slide-deck/schema\";\nimport { SlideNumber } from \"@/components/blocks/slide-deck/slide-number\";\nimport { splitDeck } from \"@/components/blocks/slide-deck/split-deck\";\nimport { Thumbnails } from \"@/components/blocks/slide-deck/thumbnails\";\nimport { readInitialHash, useDeckHashRouting } from \"@/components/blocks/slide-deck/use-deck-hash-routing\";\nimport { useDeckKeyboard } from \"@/components/blocks/slide-deck/use-deck-keyboard\";\nimport { useDeckState } from \"@/components/blocks/slide-deck/use-deck-state\";\nimport { useDeckSwipe } from \"@/components/blocks/slide-deck/use-deck-swipe\";\nimport { useFullscreen } from \"@/components/blocks/slide-deck/use-fullscreen\";\n\nimport \"./transitions.css\";\n\nexport interface SlideDeckProps {\n  /** Markdown string (auto-split) or pre-parsed slide array. */\n  slides: SlideDeckInput;\n  /** Initial slide index (0-based). Default 0. */\n  initialIndex?: number;\n  /** Transition preset. Default \"fade\". */\n  transition?: SlideDeckTransition;\n  /** Enable keyboard navigation. Default true. */\n  enableKeyboard?: boolean;\n  /** Enable touch/pointer swipe navigation. Default true. */\n  enableTouch?: boolean;\n  /** Enable hash routing (#/N). Default true. */\n  enableHashRouting?: boolean;\n  /** Optional unique deck id (auto-generated UUID if absent). */\n  deckId?: string;\n  /** Called after each navigation. */\n  onIndexChange?: (index: number, slide: SlideDeckSlide | undefined) => void;\n  /** Headless mode: render custom chrome using `<SlideDeck.X>` sub-components. */\n  children?: ReactNode;\n  /** Outer className for the deck root. */\n  className?: string;\n  /** Accessible label for the deck region. Defaults to \"Slide deck\". */\n  \"aria-label\"?: string;\n  /**\n   * Rich-content plugins relayed to every inner `<Slide>` (D15 / RFC 0004).\n   * Pass MEMOIZED arrays to avoid re-parses on every render.\n   */\n  plugins?: SlidePlugin[];\n}\n\nfunction generateDeckId(): string {\n  if (typeof crypto !== \"undefined\" && \"randomUUID\" in crypto) {\n    return crypto.randomUUID();\n  }\n  return `deck-${Math.random().toString(36).slice(2, 10)}`;\n}\n\nconst SlideDeckBase: FC<SlideDeckProps> = ({\n  slides: slidesInput,\n  initialIndex = 0,\n  transition = \"fade\",\n  enableKeyboard = true,\n  enableTouch = true,\n  enableHashRouting = true,\n  deckId: deckIdProp,\n  onIndexChange,\n  children,\n  className,\n  \"aria-label\": ariaLabel = \"Slide deck\",\n  plugins,\n}) => {\n  const generatedId = useId();\n  const deckId = deckIdProp ?? generatedId ?? generateDeckId();\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const [parsedSlides, setParsedSlides] = useState<SlideDeckSlide[]>(() => {\n    return Array.isArray(slidesInput) ? slidesInput : [];\n  });\n\n  // Async parse when string markdown is passed. Re-run when prop changes.\n  useEffect(() => {\n    if (Array.isArray(slidesInput)) {\n      setParsedSlides(slidesInput);\n      return;\n    }\n    let cancelled = false;\n    splitDeck(slidesInput).then(\n      (result) => {\n        if (!cancelled) setParsedSlides(result);\n      },\n      () => {\n        if (!cancelled) setParsedSlides([]);\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, [slidesInput]);\n\n  const [state, dispatch] = useDeckState({\n    initialIndex,\n    totalSlides: parsedSlides.length,\n    initFromHash: enableHashRouting ? readInitialHash : undefined,\n  });\n\n  // EC-4: reconcile when slides.length changes.\n  const previousLengthRef = useRef(0);\n  useEffect(() => {\n    const length = parsedSlides.length;\n    dispatch({ type: \"UPDATE_TOTAL_SLIDES\", total: length });\n    // First non-empty parse → honour `initialIndex` (or hash) which was clamped\n    // to 0 during initial mount when totalSlides was still 0.\n    if (previousLengthRef.current === 0 && length > 0) {\n      let target = initialIndex;\n      if (enableHashRouting) {\n        const hashIdx = readInitialHash();\n        if (typeof hashIdx === \"number\") target = hashIdx;\n      }\n      if (target > 0) {\n        dispatch({ type: \"JUMP_TO\", index: target });\n      }\n    }\n    previousLengthRef.current = length;\n  }, [parsedSlides.length, dispatch, initialIndex, enableHashRouting]);\n\n  // Update totalFragmentsInCurrent when slide content changes.\n  useEffect(() => {\n    const current = parsedSlides[state.currentIndex];\n    const count = current ? countFragmentsInMarkdown(current.markdown) : 0;\n    dispatch({ type: \"UPDATE_TOTAL_FRAGMENTS\", total: count });\n  }, [parsedSlides, state.currentIndex, dispatch]);\n\n  const fullscreen = useFullscreen(rootRef);\n\n  // Sync state.fullscreen with browser API. When user presses Esc on native UI.\n  useEffect(() => {\n    dispatch({ type: \"SET_FULLSCREEN\", value: fullscreen.isFullscreen });\n  }, [fullscreen.isFullscreen, dispatch]);\n\n  // EC-3 / D16: transition timeout fallback so rapid nav doesn't leave state stuck.\n  useEffect(() => {\n    if (state.transitionDirection === \"none\") return;\n    const t = setTimeout(() => dispatch({ type: \"TRANSITION_END\" }), 300);\n    return () => clearTimeout(t);\n  }, [state.transitionDirection, dispatch]);\n\n  const onPrint = useCallback(() => {\n    printDeck();\n  }, []);\n\n  useDeckKeyboard(dispatch, {\n    enabled: enableKeyboard,\n    totalSlides: parsedSlides.length,\n    onToggleFullscreen: fullscreen.toggle,\n    onPrint,\n  });\n\n  useDeckSwipe(rootRef, dispatch, { enabled: enableTouch });\n\n  useDeckHashRouting(dispatch, {\n    enabled: enableHashRouting,\n    totalSlides: parsedSlides.length,\n    currentIndex: state.currentIndex,\n  });\n\n  // Fire onIndexChange callback when currentIndex changes.\n  const lastIndexRef = useRef(state.currentIndex);\n  useEffect(() => {\n    if (lastIndexRef.current !== state.currentIndex) {\n      lastIndexRef.current = state.currentIndex;\n      onIndexChange?.(state.currentIndex, parsedSlides[state.currentIndex]);\n    }\n  }, [state.currentIndex, parsedSlides, onIndexChange]);\n\n  const contextValue: DeckContextValue = useMemo(\n    () => ({\n      state,\n      dispatch,\n      slides: parsedSlides,\n      transition,\n      deckId,\n      plugins,\n      toggleFullscreen: fullscreen.toggle,\n      print: onPrint,\n    }),\n    [state, dispatch, parsedSlides, transition, deckId, plugins, fullscreen.toggle, onPrint],\n  );\n\n  return (\n    <DeckContext.Provider data-slot=\"slide-deck-base\" value={contextValue}>\n      <div\n        ref={rootRef}\n        aria-roledescription=\"slide deck\"\n        aria-label={ariaLabel}\n        data-theo-slide-deck\n        data-theo-slide-deck-fullscreen={state.fullscreen ? \"true\" : undefined}\n        className={[\"theo-slide-deck\", className].filter(Boolean).join(\" \")}\n        style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}\n      >\n        {/* Live region for screen readers announcing slide changes. */}\n        {/* biome-ignore lint/a11y/useSemanticElements: ARIA live region needs explicit role for screen reader announcement; no native HTML equivalent for status updates from non-form, non-output content. */}\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          style={{\n            position: \"absolute\",\n            width: 1,\n            height: 1,\n            padding: 0,\n            margin: -1,\n            overflow: \"hidden\",\n            clip: \"rect(0,0,0,0)\",\n            whiteSpace: \"nowrap\",\n            border: 0,\n          }}\n        >\n          {parsedSlides.length > 0\n            ? `Slide ${state.currentIndex + 1} of ${parsedSlides.length}`\n            : \"Empty deck\"}\n        </div>\n        {children ?? <DefaultDeckLayout />}\n        {/* Hidden print container — visible only during @media print. */}\n        <PrintContainer slides={parsedSlides} plugins={plugins} />\n      </div>\n    </DeckContext.Provider>\n  );\n};\n\nconst SlidesView: FC<{ className?: string }> = ({ className }) => {\n  const { state, slides, transition, plugins } = useDeckContext();\n  const current = slides[state.currentIndex];\n  return (\n    <div\n      data-slot=\"slides-view\"\n      className={[\"theo-slide-deck-slide-frame\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-transition={transition}\n      data-theo-slide-deck-direction={state.transitionDirection}\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        minHeight: 0,\n        overflow: \"hidden\",\n      }}\n    >\n      {current ? (\n        <div\n          key={state.currentIndex}\n          data-theo-slide-deck-slide-state=\"incoming\"\n          style={{ position: \"absolute\", inset: 0 }}\n        >\n          <Slide\n            markdown={current.markdown}\n            plugins={plugins}\n            aria-label={`Slide ${state.currentIndex + 1}`}\n          />\n        </div>\n      ) : (\n        <div\n          data-theo-slide-deck-empty\n          style={{\n            display: \"grid\",\n            placeItems: \"center\",\n            height: \"100%\",\n            opacity: 0.6,\n            fontSize: 14,\n          }}\n        >\n          Empty deck\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst PresenterButton: FC<{ className?: string }> = ({ className }) => {\n  const { state, dispatch } = useDeckContext();\n  return (\n    <button\n      data-slot=\"presenter-button\"\n      type=\"button\"\n      onClick={() => dispatch({ type: \"TOGGLE_PRESENTER\" })}\n      aria-pressed={state.presenterMode}\n      aria-label={state.presenterMode ? \"Close presenter view\" : \"Open presenter view\"}\n      className={[\"theo-slide-deck-presenter-button\", className].filter(Boolean).join(\" \")}\n    >\n      {state.presenterMode ? \"Close presenter\" : \"Presenter\"}\n    </button>\n  );\n};\n\nconst FullscreenButton: FC<{ className?: string }> = ({ className }) => {\n  const { state, toggleFullscreen } = useDeckContext();\n  return (\n    <button\n      data-slot=\"fullscreen-button\"\n      type=\"button\"\n      onClick={() => void toggleFullscreen()}\n      aria-pressed={state.fullscreen}\n      aria-label={state.fullscreen ? \"Exit fullscreen\" : \"Enter fullscreen\"}\n      className={[\"theo-slide-deck-fullscreen-button\", className].filter(Boolean).join(\" \")}\n    >\n      {state.fullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\n    </button>\n  );\n};\n\nconst PrintButton: FC<{ className?: string }> = ({ className }) => {\n  const { print } = useDeckContext();\n  return (\n    <button\n      data-slot=\"print-button\"\n      type=\"button\"\n      onClick={() => print()}\n      aria-label=\"Print or save deck as PDF\"\n      className={[\"theo-slide-deck-print-button\", className].filter(Boolean).join(\" \")}\n    >\n      Print\n    </button>\n  );\n};\n\nconst PrintContainer: FC<{ slides: SlideDeckSlide[]; plugins?: SlidePlugin[] }> = ({\n  slides,\n  plugins,\n}) => {\n  return (\n    <div\n      data-slot=\"print-container\"\n      className=\"theo-slide-deck-print-container\"\n      aria-hidden=\"true\"\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        pointerEvents: \"none\",\n        visibility: \"hidden\",\n      }}\n    >\n      {slides.map((slide, index) => (\n        <div\n          key={`print-${slide.id ?? index}`}\n          className=\"theo-slide-deck-print-slide\"\n          style={{ width: 1280, height: 720 }}\n        >\n          <Slide\n            markdown={slide.markdown}\n            plugins={plugins}\n            aria-label={`Print slide ${index + 1}`}\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n\nconst DefaultDeckLayout: FC = () => {\n  return (\n    <div\n      data-slot=\"default-deck-layout\"\n      className=\"theo-slide-deck-default-layout\"\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"1fr\",\n        gridTemplateRows: \"1fr auto\",\n        gap: 8,\n        height: \"100%\",\n      }}\n    >\n      <SlidesView />\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          gap: 8,\n          padding: \"4px 8px\",\n          flexWrap: \"wrap\",\n        }}\n      >\n        <Controls />\n        <ProgressBar />\n        <div style={{ display: \"flex\", gap: 4 }}>\n          <PresenterButton />\n          <FullscreenButton />\n          <PrintButton />\n        </div>\n      </div>\n      <SlideNumber />\n      <PresenterView />\n    </div>\n  );\n};\n\ntype SlideDeckComponent = FC<SlideDeckProps> & {\n  Slides: FC<{ className?: string }>;\n  Controls: typeof Controls;\n  ProgressBar: typeof ProgressBar;\n  SlideNumber: typeof SlideNumber;\n  Thumbnails: typeof Thumbnails;\n  PresenterView: typeof PresenterView;\n  PresenterButton: FC<{ className?: string }>;\n  FullscreenButton: FC<{ className?: string }>;\n  PrintButton: FC<{ className?: string }>;\n};\n\nconst SlideDeck = SlideDeckBase as SlideDeckComponent;\nSlideDeck.Slides = SlidesView;\nSlideDeck.Controls = Controls;\nSlideDeck.ProgressBar = ProgressBar;\nSlideDeck.SlideNumber = SlideNumber;\nSlideDeck.Thumbnails = Thumbnails;\nSlideDeck.PresenterView = PresenterView;\nSlideDeck.PresenterButton = PresenterButton;\nSlideDeck.FullscreenButton = FullscreenButton;\nSlideDeck.PrintButton = PrintButton;\n\nexport { SlideDeck };\n"
     },
     {
       "path": "components/composites/slide-deck/context.tsx",
       "type": "registry:block",
       "target": "components/blocks/slide-deck/context.tsx",
-      "content": "/**\n * DeckContext — internal Context shared between `<SlideDeck>` and its\n * dot-namespace sub-components (`<SlideDeck.Controls>`, etc.). ADR D14.\n */\nimport { type Dispatch, createContext, useContext } from \"react\";\nimport type { SlidePlugin } from \"@/components/ui/slide/index\";\nimport type { SlideDeckSlide, SlideDeckTransition } from \"@/components/blocks/slide-deck/schema\";\nimport type { DeckAction, DeckState } from \"@/components/blocks/slide-deck/use-deck-state\";\n\nexport interface DeckContextValue {\n  state: DeckState;\n  dispatch: Dispatch<DeckAction>;\n  slides: SlideDeckSlide[];\n  transition: SlideDeckTransition;\n  deckId: string;\n  /** Rich-content plugins relayed to every inner `<Slide>` (D15). */\n  plugins?: SlidePlugin[];\n  /** Toggle browser fullscreen on the deck root. Safe to call when unsupported. */\n  toggleFullscreen: () => void | Promise<void>;\n  /** Trigger native print dialog with deck-specific @page CSS. */\n  print: () => void;\n}\n\nexport const DeckContext = createContext<DeckContextValue | null>(null);\n\nexport function useDeckContext(): DeckContextValue {\n  const ctx = useContext(DeckContext);\n  if (!ctx) {\n    throw new Error(\n      \"SlideDeck sub-components must be used inside <SlideDeck>. \" +\n        \"Wrap them in <SlideDeck slides={...}>.\",\n    );\n  }\n  return ctx;\n}\n"
+      "content": "\"use client\";\n\n/**\n * DeckContext — internal Context shared between `<SlideDeck>` and its\n * dot-namespace sub-components (`<SlideDeck.Controls>`, etc.). ADR D14.\n */\nimport { type Dispatch, createContext, useContext } from \"react\";\nimport type { SlidePlugin } from \"@/components/ui/slide/index\";\nimport type { SlideDeckSlide, SlideDeckTransition } from \"@/components/blocks/slide-deck/schema\";\nimport type { DeckAction, DeckState } from \"@/components/blocks/slide-deck/use-deck-state\";\n\nexport interface DeckContextValue {\n  state: DeckState;\n  dispatch: Dispatch<DeckAction>;\n  slides: SlideDeckSlide[];\n  transition: SlideDeckTransition;\n  deckId: string;\n  /** Rich-content plugins relayed to every inner `<Slide>` (D15). */\n  plugins?: SlidePlugin[];\n  /** Toggle browser fullscreen on the deck root. Safe to call when unsupported. */\n  toggleFullscreen: () => void | Promise<void>;\n  /** Trigger native print dialog with deck-specific @page CSS. */\n  print: () => void;\n}\n\nexport const DeckContext = createContext<DeckContextValue | null>(null);\n\nexport function useDeckContext(): DeckContextValue {\n  const ctx = useContext(DeckContext);\n  if (!ctx) {\n    throw new Error(\n      \"SlideDeck sub-components must be used inside <SlideDeck>. \" +\n        \"Wrap them in <SlideDeck slides={...}>.\",\n    );\n  }\n  return ctx;\n}\n"
     },
     {
       "path": "components/composites/slide-deck/controls.tsx",
       "type": "registry:block",
       "target": "components/blocks/slide-deck/controls.tsx",
-      "content": "/**\n * `<SlideDeck.Controls>` — prev/next buttons + slide indicator (\"3 / 12\").\n */\nimport type { FC } from \"react\";\nimport { useDeckContext } from \"@/components/blocks/slide-deck/context\";\n\nexport interface ControlsProps {\n  className?: string;\n}\n\nexport const Controls: FC<ControlsProps> = ({ className }) => {\n  const { state, dispatch } = useDeckContext();\n  const atStart = state.currentIndex <= 0;\n  const atEnd = state.currentIndex >= state.totalSlides - 1;\n  return (\n    <div\n      className={[\"theo-slide-deck-controls\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-controls\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 8,\n      }}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Previous slide\"\n        disabled={atStart}\n        onClick={() => dispatch({ type: \"PREV_SLIDE\" })}\n        className=\"theo-slide-deck-controls-prev\"\n      >\n        ←\n      </button>\n      <span\n        aria-live=\"polite\"\n        className=\"theo-slide-deck-controls-indicator\"\n        style={{ fontVariantNumeric: \"tabular-nums\", minWidth: 64, textAlign: \"center\" }}\n      >\n        {state.totalSlides === 0 ? \"0 / 0\" : `${state.currentIndex + 1} / ${state.totalSlides}`}\n      </span>\n      <button\n        type=\"button\"\n        aria-label=\"Next slide\"\n        disabled={atEnd}\n        onClick={() => dispatch({ type: \"NEXT_SLIDE\" })}\n        className=\"theo-slide-deck-controls-next\"\n      >\n        →\n      </button>\n    </div>\n  );\n};\n"
+      "content": "/**\n * `<SlideDeck.Controls>` — prev/next buttons + slide indicator (\"3 / 12\").\n */\nimport type { FC } from \"react\";\nimport { useDeckContext } from \"@/components/blocks/slide-deck/context\";\n\nexport interface ControlsProps {\n  className?: string;\n}\n\nexport const Controls: FC<ControlsProps> = ({ className }) => {\n  const { state, dispatch } = useDeckContext();\n  const atStart = state.currentIndex <= 0;\n  const atEnd = state.currentIndex >= state.totalSlides - 1;\n  return (\n    <div\n      data-slot=\"controls\"\n      className={[\"theo-slide-deck-controls\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-controls\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 8,\n      }}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Previous slide\"\n        disabled={atStart}\n        onClick={() => dispatch({ type: \"PREV_SLIDE\" })}\n        className=\"theo-slide-deck-controls-prev\"\n      >\n        ←\n      </button>\n      <span\n        aria-live=\"polite\"\n        className=\"theo-slide-deck-controls-indicator\"\n        style={{ fontVariantNumeric: \"tabular-nums\", minWidth: 64, textAlign: \"center\" }}\n      >\n        {state.totalSlides === 0 ? \"0 / 0\" : `${state.currentIndex + 1} / ${state.totalSlides}`}\n      </span>\n      <button\n        type=\"button\"\n        aria-label=\"Next slide\"\n        disabled={atEnd}\n        onClick={() => dispatch({ type: \"NEXT_SLIDE\" })}\n        className=\"theo-slide-deck-controls-next\"\n      >\n        →\n      </button>\n    </div>\n  );\n};\n"
     },
     {
       "path": "components/composites/slide-deck/fragments.ts",
@@ -46,7 +46,7 @@
       "path": "components/composites/slide-deck/presenter-view.tsx",
       "type": "registry:block",
       "target": "components/blocks/slide-deck/presenter-view.tsx",
-      "content": "/**\n * `<SlideDeck.PresenterView>` — inline split-screen panel.\n *\n * Pragmatic v0.4 scope: renders an in-page panel (current slide + next slide +\n * speaker notes + timer) when `state.presenterMode === true`. The separate\n * window via `window.open` + `BroadcastChannel` is deferred to v0.5 (consumer\n * demand will trigger the upgrade — D6 of the plan is reduced to inline panel).\n *\n * Toggling presenter mode is dispatched via hotkey (n/N/p/P, see useDeckKeyboard).\n */\nimport { type FC, useEffect, useRef, useState } from \"react\";\nimport { Slide } from \"@/components/ui/slide/index\";\nimport { useDeckContext } from \"@/components/blocks/slide-deck/context\";\n\nexport interface PresenterViewProps {\n  className?: string;\n}\n\nfunction formatElapsed(ms: number): string {\n  const s = Math.floor(ms / 1000);\n  const mm = Math.floor(s / 60)\n    .toString()\n    .padStart(2, \"0\");\n  const ss = (s % 60).toString().padStart(2, \"0\");\n  return `${mm}:${ss}`;\n}\n\nexport const PresenterView: FC<PresenterViewProps> = ({ className }) => {\n  const { state, slides } = useDeckContext();\n  const startedAt = useRef<number | null>(null);\n  const [elapsed, setElapsed] = useState(0);\n\n  // Initialize the timer when presenter mode first opens; reset when closed.\n  useEffect(() => {\n    if (state.presenterMode) {\n      if (startedAt.current === null) {\n        startedAt.current = Date.now();\n      }\n      const interval = window.setInterval(() => {\n        if (startedAt.current !== null) {\n          setElapsed(Date.now() - startedAt.current);\n        }\n      }, 1000);\n      return () => window.clearInterval(interval);\n    }\n    startedAt.current = null;\n    setElapsed(0);\n    return undefined;\n  }, [state.presenterMode]);\n\n  if (!state.presenterMode) return null;\n\n  const current = slides[state.currentIndex];\n  const next = slides[state.currentIndex + 1];\n  const notes = current?.notes;\n\n  return (\n    <aside\n      className={[\"theo-slide-deck-presenter\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-presenter\n      aria-label=\"Presenter view\"\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"1fr 1fr\",\n        gridTemplateRows: \"auto 1fr\",\n        gap: 16,\n        padding: 16,\n        background: \"color-mix(in srgb, currentColor 6%, transparent)\",\n        borderRadius: 8,\n      }}\n    >\n      <header\n        style={{\n          gridColumn: \"1 / -1\",\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n        }}\n      >\n        <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>Presenter view</h3>\n        <span\n          aria-label=\"Elapsed time\"\n          style={{ fontVariantNumeric: \"tabular-nums\", fontSize: 14 }}\n        >\n          {formatElapsed(elapsed)}\n        </span>\n      </header>\n      <section aria-label=\"Current slide preview\">\n        <h4 style={{ margin: \"0 0 8px\", fontSize: 12, opacity: 0.7 }}>Current</h4>\n        <div\n          style={{\n            aspectRatio: \"16 / 9\",\n            overflow: \"hidden\",\n            border: \"1px solid rgba(127,127,127,0.3)\",\n            borderRadius: 6,\n          }}\n        >\n          {current ? <Slide markdown={current.markdown} aria-label=\"Current slide\" /> : null}\n        </div>\n      </section>\n      <section aria-label=\"Next slide preview\">\n        <h4 style={{ margin: \"0 0 8px\", fontSize: 12, opacity: 0.7 }}>Next</h4>\n        <div\n          style={{\n            aspectRatio: \"16 / 9\",\n            overflow: \"hidden\",\n            border: \"1px solid rgba(127,127,127,0.3)\",\n            borderRadius: 6,\n            opacity: next ? 1 : 0.4,\n          }}\n        >\n          {next ? (\n            <Slide markdown={next.markdown} aria-label=\"Next slide\" />\n          ) : (\n            <div style={{ padding: 16, fontSize: 14, opacity: 0.6 }}>End of deck</div>\n          )}\n        </div>\n      </section>\n      {notes ? (\n        <section\n          aria-label=\"Speaker notes\"\n          style={{\n            gridColumn: \"1 / -1\",\n            background: \"color-mix(in srgb, currentColor 8%, transparent)\",\n            padding: 12,\n            borderRadius: 6,\n            fontSize: 14,\n            whiteSpace: \"pre-wrap\",\n          }}\n        >\n          <strong>Notes: </strong>\n          {notes}\n        </section>\n      ) : null}\n    </aside>\n  );\n};\n"
+      "content": "\"use client\";\n\n/**\n * `<SlideDeck.PresenterView>` — inline split-screen panel.\n *\n * Pragmatic v0.4 scope: renders an in-page panel (current slide + next slide +\n * speaker notes + timer) when `state.presenterMode === true`. The separate\n * window via `window.open` + `BroadcastChannel` is deferred to v0.5 (consumer\n * demand will trigger the upgrade — D6 of the plan is reduced to inline panel).\n *\n * Toggling presenter mode is dispatched via hotkey (n/N/p/P, see useDeckKeyboard).\n */\nimport { type FC, useEffect, useRef, useState } from \"react\";\nimport { Slide } from \"@/components/ui/slide/index\";\nimport { useDeckContext } from \"@/components/blocks/slide-deck/context\";\n\nexport interface PresenterViewProps {\n  className?: string;\n}\n\nfunction formatElapsed(ms: number): string {\n  const s = Math.floor(ms / 1000);\n  const mm = Math.floor(s / 60)\n    .toString()\n    .padStart(2, \"0\");\n  const ss = (s % 60).toString().padStart(2, \"0\");\n  return `${mm}:${ss}`;\n}\n\nexport const PresenterView: FC<PresenterViewProps> = ({ className }) => {\n  const { state, slides } = useDeckContext();\n  const startedAt = useRef<number | null>(null);\n  const [elapsed, setElapsed] = useState(0);\n\n  // Initialize the timer when presenter mode first opens; reset when closed.\n  useEffect(() => {\n    if (state.presenterMode) {\n      if (startedAt.current === null) {\n        startedAt.current = Date.now();\n      }\n      const interval = window.setInterval(() => {\n        if (startedAt.current !== null) {\n          setElapsed(Date.now() - startedAt.current);\n        }\n      }, 1000);\n      return () => window.clearInterval(interval);\n    }\n    startedAt.current = null;\n    setElapsed(0);\n    return undefined;\n  }, [state.presenterMode]);\n\n  if (!state.presenterMode) return null;\n\n  const current = slides[state.currentIndex];\n  const next = slides[state.currentIndex + 1];\n  const notes = current?.notes;\n\n  return (\n    <aside\n      className={[\"theo-slide-deck-presenter\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-presenter\n      aria-label=\"Presenter view\"\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"1fr 1fr\",\n        gridTemplateRows: \"auto 1fr\",\n        gap: 16,\n        padding: 16,\n        background: \"color-mix(in srgb, currentColor 6%, transparent)\",\n        borderRadius: 8,\n      }}\n    >\n      <header\n        style={{\n          gridColumn: \"1 / -1\",\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n        }}\n      >\n        <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>Presenter view</h3>\n        <span\n          aria-label=\"Elapsed time\"\n          style={{ fontVariantNumeric: \"tabular-nums\", fontSize: 14 }}\n        >\n          {formatElapsed(elapsed)}\n        </span>\n      </header>\n      <section aria-label=\"Current slide preview\">\n        <h4 style={{ margin: \"0 0 8px\", fontSize: 12, opacity: 0.7 }}>Current</h4>\n        <div\n          style={{\n            aspectRatio: \"16 / 9\",\n            overflow: \"hidden\",\n            border: \"1px solid rgba(127,127,127,0.3)\",\n            borderRadius: 6,\n          }}\n        >\n          {current ? <Slide markdown={current.markdown} aria-label=\"Current slide\" /> : null}\n        </div>\n      </section>\n      <section aria-label=\"Next slide preview\">\n        <h4 style={{ margin: \"0 0 8px\", fontSize: 12, opacity: 0.7 }}>Next</h4>\n        <div\n          style={{\n            aspectRatio: \"16 / 9\",\n            overflow: \"hidden\",\n            border: \"1px solid rgba(127,127,127,0.3)\",\n            borderRadius: 6,\n            opacity: next ? 1 : 0.4,\n          }}\n        >\n          {next ? (\n            <Slide markdown={next.markdown} aria-label=\"Next slide\" />\n          ) : (\n            <div style={{ padding: 16, fontSize: 14, opacity: 0.6 }}>End of deck</div>\n          )}\n        </div>\n      </section>\n      {notes ? (\n        <section\n          aria-label=\"Speaker notes\"\n          style={{\n            gridColumn: \"1 / -1\",\n            background: \"color-mix(in srgb, currentColor 8%, transparent)\",\n            padding: 12,\n            borderRadius: 6,\n            fontSize: 14,\n            whiteSpace: \"pre-wrap\",\n          }}\n        >\n          <strong>Notes: </strong>\n          {notes}\n        </section>\n      ) : null}\n    </aside>\n  );\n};\n"
     },
     {
       "path": "components/composites/slide-deck/print-styles.ts",
@@ -58,7 +58,7 @@
       "path": "components/composites/slide-deck/progress-bar.tsx",
       "type": "registry:block",
       "target": "components/blocks/slide-deck/progress-bar.tsx",
-      "content": "/**\n * `<SlideDeck.ProgressBar>` — horizontal HTML5 progress element.\n */\nimport type { FC } from \"react\";\nimport { useDeckContext } from \"@/components/blocks/slide-deck/context\";\n\nexport interface ProgressBarProps {\n  className?: string;\n}\n\nexport const ProgressBar: FC<ProgressBarProps> = ({ className }) => {\n  const { state } = useDeckContext();\n  // Edge case: totalSlides=0 → 0% safely.\n  const value = state.totalSlides === 0 ? 0 : state.currentIndex + 1;\n  const max = Math.max(1, state.totalSlides);\n  return (\n    <progress\n      className={[\"theo-slide-deck-progress\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-progress\n      value={value}\n      max={max}\n      aria-label=\"Slide progress\"\n    />\n  );\n};\n"
+      "content": "/**\n * `<SlideDeck.ProgressBar>` — horizontal HTML5 progress element.\n */\nimport type { FC } from \"react\";\nimport { useDeckContext } from \"@/components/blocks/slide-deck/context\";\n\nexport interface ProgressBarProps {\n  className?: string;\n}\n\nexport const ProgressBar: FC<ProgressBarProps> = ({ className }) => {\n  const { state } = useDeckContext();\n  // Edge case: totalSlides=0 → 0% safely.\n  const value = state.totalSlides === 0 ? 0 : state.currentIndex + 1;\n  const max = Math.max(1, state.totalSlides);\n  return (\n    <progress\n      data-slot=\"progress-bar\"\n      className={[\"theo-slide-deck-progress\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-progress\n      value={value}\n      max={max}\n      aria-label=\"Slide progress\"\n    />\n  );\n};\n"
     },
     {
       "path": "components/composites/slide-deck/schema.ts",
@@ -82,7 +82,7 @@
       "path": "components/composites/slide-deck/thumbnails.tsx",
       "type": "registry:block",
       "target": "components/blocks/slide-deck/thumbnails.tsx",
-      "content": "/**\n * `<SlideDeck.Thumbnails>` — sidebar with mini Slide instances.\n *\n * Performance strategy:\n *   - Each thumbnail renders the actual `<Slide>` inside a scaled wrapper (~0.18×).\n *   - IntersectionObserver lazy-loads thumbnails — off-screen ones show a\n *     placeholder skeleton instead of parsing the markdown.\n *   - EC-13: when IntersectionObserver is undefined (legacy env / SSR), falls\n *     back to eager render. Acceptable for decks ≤ 50 slides.\n *\n * Click handler dispatches JUMP_TO. Auto-scroll keeps current thumbnail visible.\n */\nimport { type FC, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Slide } from \"@/components/ui/slide/index\";\nimport { useDeckContext } from \"@/components/blocks/slide-deck/context\";\n\nexport interface ThumbnailsProps {\n  className?: string;\n  /** Scale of each thumbnail. Default 0.18. */\n  scale?: number;\n}\n\nconst CANVAS_W = 1280;\nconst CANVAS_H = 720;\n\ninterface ThumbnailItemProps {\n  markdown: string;\n  index: number;\n  isCurrent: boolean;\n  scale: number;\n  eager: boolean;\n  onSelect: (index: number) => void;\n  registerRef: (index: number, el: HTMLElement | null) => void;\n}\n\nconst ThumbnailItem: FC<ThumbnailItemProps> = ({\n  markdown,\n  index,\n  isCurrent,\n  scale,\n  eager,\n  onSelect,\n  registerRef,\n}) => {\n  const [revealed, setRevealed] = useState(eager);\n\n  const setRef = useCallback(\n    (el: HTMLElement | null) => {\n      registerRef(index, el);\n      if (eager) return;\n      if (!el) return;\n      if (typeof IntersectionObserver === \"undefined\") {\n        // EC-13 fallback: no IO, render eagerly.\n        setRevealed(true);\n        return;\n      }\n      const io = new IntersectionObserver(\n        (entries) => {\n          for (const entry of entries) {\n            if (entry.isIntersecting) {\n              setRevealed(true);\n              io.disconnect();\n              break;\n            }\n          }\n        },\n        { rootMargin: \"200px\" },\n      );\n      io.observe(el);\n    },\n    [index, eager, registerRef],\n  );\n\n  const w = Math.round(CANVAS_W * scale);\n  const h = Math.round(CANVAS_H * scale);\n  return (\n    <button\n      ref={setRef}\n      type=\"button\"\n      onClick={() => onSelect(index)}\n      data-theo-slide-deck-thumbnail\n      data-current={isCurrent || undefined}\n      aria-label={`Slide ${index + 1}`}\n      aria-current={isCurrent ? \"page\" : undefined}\n      className=\"theo-slide-deck-thumbnail\"\n      style={{\n        width: w,\n        height: h,\n        padding: 0,\n        border: isCurrent ? \"2px solid currentColor\" : \"1px solid rgba(127,127,127,0.3)\",\n        borderRadius: 6,\n        overflow: \"hidden\",\n        position: \"relative\",\n        cursor: \"pointer\",\n        flexShrink: 0,\n        background: \"transparent\",\n      }}\n    >\n      <div\n        style={{\n          width: CANVAS_W,\n          height: CANVAS_H,\n          transform: `scale(${scale})`,\n          transformOrigin: \"top left\",\n          pointerEvents: \"none\",\n        }}\n      >\n        {revealed ? (\n          <Slide markdown={markdown} aria-label={`Thumbnail ${index + 1}`} />\n        ) : (\n          <div\n            data-theo-slide-deck-thumbnail-placeholder\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              background: \"rgba(127,127,127,0.08)\",\n            }}\n          />\n        )}\n      </div>\n    </button>\n  );\n};\n\nexport const Thumbnails: FC<ThumbnailsProps> = ({ className, scale = 0.18 }) => {\n  const { state, dispatch, slides } = useDeckContext();\n  const refs = useRef<Map<number, HTMLElement>>(new Map());\n\n  const registerRef = useCallback((index: number, el: HTMLElement | null) => {\n    if (el) {\n      refs.current.set(index, el);\n    } else {\n      refs.current.delete(index);\n    }\n  }, []);\n\n  const onSelect = useCallback(\n    (index: number) => {\n      dispatch({ type: \"JUMP_TO\", index });\n    },\n    [dispatch],\n  );\n\n  // Auto-scroll current into view.\n  useEffect(() => {\n    const el = refs.current.get(state.currentIndex);\n    if (el && \"scrollIntoView\" in el) {\n      el.scrollIntoView({ behavior: \"smooth\", block: \"nearest\", inline: \"nearest\" });\n    }\n  }, [state.currentIndex]);\n\n  // EC-13: eager mode when IO is absent.\n  const eagerAll = useMemo(() => typeof IntersectionObserver === \"undefined\", []);\n\n  return (\n    <ul\n      className={[\"theo-slide-deck-thumbnails\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-thumbnails\n      aria-label=\"Slide thumbnails\"\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 8,\n        overflowY: \"auto\",\n        padding: 8,\n        listStyle: \"none\",\n        margin: 0,\n      }}\n    >\n      {slides.map((slide, index) => (\n        <li key={`${slide.id ?? index}-${index}`}>\n          <ThumbnailItem\n            markdown={slide.markdown}\n            index={index}\n            isCurrent={index === state.currentIndex}\n            scale={scale}\n            eager={eagerAll || index < 3 /* first 3 always eager for snappy first paint */}\n            onSelect={onSelect}\n            registerRef={registerRef}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n"
+      "content": "\"use client\";\n\n/**\n * `<SlideDeck.Thumbnails>` — sidebar with mini Slide instances.\n *\n * Performance strategy:\n *   - Each thumbnail renders the actual `<Slide>` inside a scaled wrapper (~0.18×).\n *   - IntersectionObserver lazy-loads thumbnails — off-screen ones show a\n *     placeholder skeleton instead of parsing the markdown.\n *   - EC-13: when IntersectionObserver is undefined (legacy env / SSR), falls\n *     back to eager render. Acceptable for decks ≤ 50 slides.\n *\n * Click handler dispatches JUMP_TO. Auto-scroll keeps current thumbnail visible.\n */\nimport { type FC, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Slide } from \"@/components/ui/slide/index\";\nimport { useDeckContext } from \"@/components/blocks/slide-deck/context\";\n\nexport interface ThumbnailsProps {\n  className?: string;\n  /** Scale of each thumbnail. Default 0.18. */\n  scale?: number;\n}\n\nconst CANVAS_W = 1280;\nconst CANVAS_H = 720;\n\ninterface ThumbnailItemProps {\n  markdown: string;\n  index: number;\n  isCurrent: boolean;\n  scale: number;\n  eager: boolean;\n  onSelect: (index: number) => void;\n  registerRef: (index: number, el: HTMLElement | null) => void;\n}\n\nconst ThumbnailItem: FC<ThumbnailItemProps> = ({\n  markdown,\n  index,\n  isCurrent,\n  scale,\n  eager,\n  onSelect,\n  registerRef,\n}) => {\n  const [revealed, setRevealed] = useState(eager);\n\n  const setRef = useCallback(\n    (el: HTMLElement | null) => {\n      registerRef(index, el);\n      if (eager) return;\n      if (!el) return;\n      if (typeof IntersectionObserver === \"undefined\") {\n        // EC-13 fallback: no IO, render eagerly.\n        setRevealed(true);\n        return;\n      }\n      const io = new IntersectionObserver(\n        (entries) => {\n          for (const entry of entries) {\n            if (entry.isIntersecting) {\n              setRevealed(true);\n              io.disconnect();\n              break;\n            }\n          }\n        },\n        { rootMargin: \"200px\" },\n      );\n      io.observe(el);\n    },\n    [index, eager, registerRef],\n  );\n\n  const w = Math.round(CANVAS_W * scale);\n  const h = Math.round(CANVAS_H * scale);\n  return (\n    <button\n      data-slot=\"thumbnail-item\"\n      ref={setRef}\n      type=\"button\"\n      onClick={() => onSelect(index)}\n      data-theo-slide-deck-thumbnail\n      data-current={isCurrent || undefined}\n      aria-label={`Slide ${index + 1}`}\n      aria-current={isCurrent ? \"page\" : undefined}\n      className=\"theo-slide-deck-thumbnail\"\n      style={{\n        width: w,\n        height: h,\n        padding: 0,\n        border: isCurrent ? \"2px solid currentColor\" : \"1px solid rgba(127,127,127,0.3)\",\n        borderRadius: 6,\n        overflow: \"hidden\",\n        position: \"relative\",\n        cursor: \"pointer\",\n        flexShrink: 0,\n        background: \"transparent\",\n      }}\n    >\n      <div\n        style={{\n          width: CANVAS_W,\n          height: CANVAS_H,\n          transform: `scale(${scale})`,\n          transformOrigin: \"top left\",\n          pointerEvents: \"none\",\n        }}\n      >\n        {revealed ? (\n          <Slide markdown={markdown} aria-label={`Thumbnail ${index + 1}`} />\n        ) : (\n          <div\n            data-theo-slide-deck-thumbnail-placeholder\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              background: \"rgba(127,127,127,0.08)\",\n            }}\n          />\n        )}\n      </div>\n    </button>\n  );\n};\n\nexport const Thumbnails: FC<ThumbnailsProps> = ({ className, scale = 0.18 }) => {\n  const { state, dispatch, slides } = useDeckContext();\n  const refs = useRef<Map<number, HTMLElement>>(new Map());\n\n  const registerRef = useCallback((index: number, el: HTMLElement | null) => {\n    if (el) {\n      refs.current.set(index, el);\n    } else {\n      refs.current.delete(index);\n    }\n  }, []);\n\n  const onSelect = useCallback(\n    (index: number) => {\n      dispatch({ type: \"JUMP_TO\", index });\n    },\n    [dispatch],\n  );\n\n  // Auto-scroll current into view.\n  useEffect(() => {\n    const el = refs.current.get(state.currentIndex);\n    if (el && \"scrollIntoView\" in el) {\n      el.scrollIntoView({ behavior: \"smooth\", block: \"nearest\", inline: \"nearest\" });\n    }\n  }, [state.currentIndex]);\n\n  // EC-13: eager mode when IO is absent.\n  const eagerAll = useMemo(() => typeof IntersectionObserver === \"undefined\", []);\n\n  return (\n    <ul\n      data-slot=\"thumbnails\"\n      className={[\"theo-slide-deck-thumbnails\", className].filter(Boolean).join(\" \")}\n      data-theo-slide-deck-thumbnails\n      aria-label=\"Slide thumbnails\"\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 8,\n        overflowY: \"auto\",\n        padding: 8,\n        listStyle: \"none\",\n        margin: 0,\n      }}\n    >\n      {slides.map((slide, index) => (\n        <li key={`${slide.id ?? index}-${index}`}>\n          <ThumbnailItem\n            markdown={slide.markdown}\n            index={index}\n            isCurrent={index === state.currentIndex}\n            scale={scale}\n            eager={eagerAll || index < 3 /* first 3 always eager for snappy first paint */}\n            onSelect={onSelect}\n            registerRef={registerRef}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n"
     },
     {
       "path": "components/composites/slide-deck/transitions.css",
@@ -124,7 +124,7 @@
       "path": "components/composites/slide-deck/index.ts",
       "type": "registry:block",
       "target": "components/blocks/slide-deck/index.ts",
-      "content": "/**\n * Public surface of `@usetheo/ui/slide-deck`. Subpath-isolated composite engine.\n */\nexport { SlideDeck } from \"@/components/blocks/slide-deck/slide-deck\";\nexport type { SlideDeckProps } from \"@/components/blocks/slide-deck/slide-deck\";\nexport {\n  slideDeckInput,\n  slideDeckSlide,\n  slideDeckTransition,\n  type SlideDeckInput,\n  type SlideDeckSlide,\n  type SlideDeckTransition,\n} from \"@/components/blocks/slide-deck/schema\";\nexport { splitDeck } from \"@/components/blocks/slide-deck/split-deck\";\nexport { extractNotes } from \"@/components/blocks/slide-deck/notes\";\nexport { countFragmentsInMarkdown } from \"@/components/blocks/slide-deck/fragments\";\nexport {\n  formatHash,\n  readHashIndex,\n  readInitialHash,\n  useDeckHashRouting,\n} from \"@/components/blocks/slide-deck/use-deck-hash-routing\";\nexport {\n  deckReducer,\n  useDeckState,\n  type DeckAction,\n  type DeckState,\n} from \"@/components/blocks/slide-deck/use-deck-state\";\nexport { useDeckKeyboard } from \"@/components/blocks/slide-deck/use-deck-keyboard\";\nexport { useDeckSwipe } from \"@/components/blocks/slide-deck/use-deck-swipe\";\nexport { useFullscreen } from \"@/components/blocks/slide-deck/use-fullscreen\";\nexport {\n  injectPrintStyles,\n  printDeck,\n  removePrintStyles,\n} from \"@/components/blocks/slide-deck/print-styles\";\nexport { Controls } from \"@/components/blocks/slide-deck/controls\";\nexport { ProgressBar } from \"@/components/blocks/slide-deck/progress-bar\";\nexport { SlideNumber } from \"@/components/blocks/slide-deck/slide-number\";\nexport { Thumbnails } from \"@/components/blocks/slide-deck/thumbnails\";\nexport { PresenterView } from \"@/components/blocks/slide-deck/presenter-view\";\nexport {\n  DeckContext,\n  useDeckContext,\n  type DeckContextValue,\n} from \"@/components/blocks/slide-deck/context\";\n"
+      "content": "/**\n * Public surface of `@theokit/ui/slide-deck`. Subpath-isolated composite engine.\n */\nexport { SlideDeck } from \"@/components/blocks/slide-deck/slide-deck\";\nexport type { SlideDeckProps } from \"@/components/blocks/slide-deck/slide-deck\";\nexport {\n  slideDeckInput,\n  slideDeckSlide,\n  slideDeckTransition,\n  type SlideDeckInput,\n  type SlideDeckSlide,\n  type SlideDeckTransition,\n} from \"@/components/blocks/slide-deck/schema\";\nexport { splitDeck } from \"@/components/blocks/slide-deck/split-deck\";\nexport { extractNotes } from \"@/components/blocks/slide-deck/notes\";\nexport { countFragmentsInMarkdown } from \"@/components/blocks/slide-deck/fragments\";\nexport {\n  formatHash,\n  readHashIndex,\n  readInitialHash,\n  useDeckHashRouting,\n} from \"@/components/blocks/slide-deck/use-deck-hash-routing\";\nexport {\n  deckReducer,\n  useDeckState,\n  type DeckAction,\n  type DeckState,\n} from \"@/components/blocks/slide-deck/use-deck-state\";\nexport { useDeckKeyboard } from \"@/components/blocks/slide-deck/use-deck-keyboard\";\nexport { useDeckSwipe } from \"@/components/blocks/slide-deck/use-deck-swipe\";\nexport { useFullscreen } from \"@/components/blocks/slide-deck/use-fullscreen\";\nexport {\n  injectPrintStyles,\n  printDeck,\n  removePrintStyles,\n} from \"@/components/blocks/slide-deck/print-styles\";\nexport { Controls } from \"@/components/blocks/slide-deck/controls\";\nexport { ProgressBar } from \"@/components/blocks/slide-deck/progress-bar\";\nexport { SlideNumber } from \"@/components/blocks/slide-deck/slide-number\";\nexport { Thumbnails } from \"@/components/blocks/slide-deck/thumbnails\";\nexport { PresenterView } from \"@/components/blocks/slide-deck/presenter-view\";\nexport {\n  DeckContext,\n  useDeckContext,\n  type DeckContextValue,\n} from \"@/components/blocks/slide-deck/context\";\n"
     }
   ]
 }

package/registry/r/slide-plugin-mermaid.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/slide/plugins/mermaid/index.tsx",
       "type": "registry:ui",
       "target": "components/ui/slide/plugins/mermaid/index.tsx",
-      "content": "import type { Element, Root as HastRoot } from \"hast\";\n/**\n * Slide rich-content plugin — Mermaid diagrams.\n *\n * Peer-dep: `mermaid` (optional, ~370 KB raw — lazy + opt-in mandatory).\n * Render is client-only because Mermaid measures DOM nodes during layout;\n * SSR / static render emits a labelled placeholder + source-code fallback.\n *\n * Pipeline contribution (D11 of the rich-content plan):\n *   - `hastTransform`: detect `<pre><code class=\"language-mermaid\">…</code></pre>`\n *     and replace with `<div class=\"theo-slide-mermaid-host\" data-theo-mermaid-source=\"…\">`.\n *   - `components.div`: when div has `data-theo-mermaid-source`, render the\n *     `<MermaidDiagram>` React component that lazy-imports `mermaid` and\n *     injects the SVG via `dangerouslySetInnerHTML` after `mermaid.render()`.\n *\n * EC-4: complete SVG tag + attribute allow-list (~30 tags) so the rendered SVG\n * survives sanitize. Critical: without these, sanitize strips the SVG entirely.\n *\n * EC-10: SSR placeholder is distinguishable from a render error. Error path\n * surfaces the Mermaid source code in a `<pre>` so consumers can debug + the\n * print path still shows the code (PDF cannot run dynamic Mermaid).\n */\nimport { type FC, useEffect, useState } from \"react\";\nimport type { SlidePlugin } from \"@/components/ui/slide/plugin\";\n\n// EC-4: comprehensive SVG tag list (mermaid 11.x output across diagram types).\nconst SVG_TAG_NAMES = [\n  \"div\",\n  // Custom element used to bridge into our React renderer (mapped via components).\n  \"theo-mermaid\",\n  // root + grouping\n  \"svg\",\n  \"g\",\n  \"defs\",\n  \"use\",\n  \"symbol\",\n  \"marker\",\n  \"pattern\",\n  \"mask\",\n  \"clipPath\",\n  // shapes\n  \"path\",\n  \"rect\",\n  \"circle\",\n  \"ellipse\",\n  \"line\",\n  \"polyline\",\n  \"polygon\",\n  // text\n  \"text\",\n  \"tspan\",\n  \"textPath\",\n  \"title\",\n  \"desc\",\n  // gradients + filters (used by some flowchart themes)\n  \"linearGradient\",\n  \"radialGradient\",\n  \"stop\",\n  \"filter\",\n  \"feGaussianBlur\",\n  \"feOffset\",\n  \"feColorMatrix\",\n  \"feComponentTransfer\",\n  \"feComposite\",\n  \"feMerge\",\n  \"feMergeNode\",\n  \"feFlood\",\n  // foreign content (HTML labels)\n  \"foreignObject\",\n  \"span\",\n  \"br\",\n];\n\nconst SVG_ATTRIBUTES: Record<string, string[]> = {\n  \"*\": [\n    \"id\",\n    \"className\",\n    \"style\",\n    \"transform\",\n    \"fill\",\n    \"stroke\",\n    \"strokeWidth\",\n    \"strokeDasharray\",\n    \"strokeLinecap\",\n    \"strokeLinejoin\",\n    \"opacity\",\n    \"fillOpacity\",\n    \"strokeOpacity\",\n    \"ariaLabel\",\n    \"ariaHidden\",\n    \"role\",\n  ],\n  svg: [\"xmlns\", \"viewBox\", \"width\", \"height\", \"preserveAspectRatio\", \"xmlnsXlink\", \"version\"],\n  path: [\"d\", \"markerEnd\", \"markerStart\", \"markerMid\"],\n  rect: [\"x\", \"y\", \"width\", \"height\", \"rx\", \"ry\"],\n  circle: [\"cx\", \"cy\", \"r\"],\n  ellipse: [\"cx\", \"cy\", \"rx\", \"ry\"],\n  line: [\"x1\", \"y1\", \"x2\", \"y2\"],\n  polyline: [\"points\"],\n  polygon: [\"points\"],\n  text: [\n    \"x\",\n    \"y\",\n    \"dx\",\n    \"dy\",\n    \"textAnchor\",\n    \"dominantBaseline\",\n    \"fontSize\",\n    \"fontFamily\",\n    \"fontWeight\",\n  ],\n  tspan: [\"x\", \"y\", \"dx\", \"dy\"],\n  textPath: [\"xlinkHref\", \"href\", \"startOffset\"],\n  marker: [\"markerUnits\", \"markerWidth\", \"markerHeight\", \"refX\", \"refY\", \"orient\", \"viewBox\"],\n  use: [\"xlinkHref\", \"href\", \"x\", \"y\", \"width\", \"height\"],\n  linearGradient: [\"x1\", \"y1\", \"x2\", \"y2\", \"gradientUnits\"],\n  radialGradient: [\"cx\", \"cy\", \"r\", \"fx\", \"fy\", \"gradientUnits\"],\n  stop: [\"offset\", \"stopColor\", \"stopOpacity\"],\n  foreignObject: [\"x\", \"y\", \"width\", \"height\"],\n  div: [\"data-state\", \"data-theo-mermaid-source\", \"className\"],\n  \"theo-mermaid\": [\"source\"],\n};\n\nexport interface MermaidPluginOptions {\n  /** Mermaid theme name. Defaults to `\"default\"`. */\n  theme?: \"default\" | \"forest\" | \"dark\" | \"neutral\" | \"base\";\n}\n\n/**\n * React component that renders Mermaid lazily on mount.\n *\n * SSR / pre-load: renders the source as `<pre>` + `role=\"img\"` for a11y.\n * Client: lazy-loads `mermaid`, calls `mermaid.render()`, then injects the\n *         resulting SVG via `dangerouslySetInnerHTML` so React owns the DOM\n *         subtree (avoids reconciliation crashes when state flips back to the\n *         placeholder — `ref.innerHTML` would mutate under React's feet).\n *\n * The Mermaid output is a TRUSTED string from the `mermaid` lib itself (not\n * user-controlled markup) — the user-supplied source is the DSL, not raw HTML.\n * Using dangerouslySetInnerHTML here is a controlled escape hatch.\n *\n * Peer-dep guard: if `import(\"mermaid\")` fails, falls back to the same\n * pre-formatted source view + an `aria-label` hint (EC-10).\n */\nexport const MermaidDiagram: FC<{ source: string; theme?: string }> = ({ source, theme }) => {\n  const [svg, setSvg] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    // Reset state when source/theme changes so the placeholder shows again\n    // while the new diagram renders.\n    setSvg(null);\n    setError(null);\n    (async () => {\n      try {\n        // biome-ignore lint/suspicious/noExplicitAny: mermaid default export untyped\n        const mermaid: any = (await import(\"mermaid\")).default;\n        if (cancelled) return;\n        mermaid.initialize({ startOnLoad: false, theme: theme ?? \"default\" });\n        const id = `theo-mmd-${Math.random().toString(36).slice(2, 10)}`;\n        const result = await mermaid.render(id, source);\n        if (!cancelled) {\n          setSvg(result.svg);\n        }\n      } catch (e) {\n        if (cancelled) return;\n        const msg = e instanceof Error ? e.message : String(e);\n        // Recognize the various module-resolution failure messages emitted by\n        // Node, Vite, Rollup, Webpack, Vitest, and browser dynamic-import.\n        const moduleNotFound =\n          msg.includes(\"Cannot find module\") ||\n          msg.includes(\"Could not resolve\") ||\n          msg.includes(\"Failed to fetch\") ||\n          msg.includes(\"Failed to resolve module\") ||\n          msg.includes(\"ERR_MODULE_NOT_FOUND\");\n        if (moduleNotFound) {\n          setError(\"Mermaid not installed. Run: pnpm add mermaid\");\n        } else {\n          setError(`Mermaid render failed: ${msg}`);\n        }\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [source, theme]);\n\n  if (error) {\n    return (\n      <div\n        data-theo-slide-mermaid\n        data-state=\"error\"\n        role=\"img\"\n        aria-label={error}\n        className=\"theo-slide-mermaid-host\"\n      >\n        <pre style={{ fontSize: \"0.8em\", opacity: 0.7, whiteSpace: \"pre-wrap\" }}>{source}</pre>\n      </div>\n    );\n  }\n  if (svg) {\n    // SVG is React-owned via dangerouslySetInnerHTML so the next state change\n    // (e.g. new `source` prop → back to placeholder) can unmount cleanly.\n    return (\n      <div\n        data-theo-slide-mermaid\n        data-state=\"ready\"\n        role=\"img\"\n        aria-label=\"Mermaid diagram\"\n        className=\"theo-slide-mermaid-host\"\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: mermaid.render() output is trusted (lib-generated SVG, not user markup)\n        dangerouslySetInnerHTML={{ __html: svg }}\n      />\n    );\n  }\n  return (\n    <div\n      data-theo-slide-mermaid\n      data-state=\"loading\"\n      role=\"img\"\n      aria-label=\"Mermaid diagram\"\n      className=\"theo-slide-mermaid-host\"\n    >\n      <pre style={{ fontSize: \"0.7em\", opacity: 0.4, whiteSpace: \"pre-wrap\" }}>{source}</pre>\n    </div>\n  );\n};\n\nexport function mermaidPlugin(opts: MermaidPluginOptions = {}): SlidePlugin {\n  return {\n    name: \"mermaid\",\n    sanitizeSchemaExtension: {\n      tagNames: SVG_TAG_NAMES,\n      attributes: SVG_ATTRIBUTES,\n    },\n    components: {\n      // The hastTransform below replaces mermaid <pre> with a `<div>` carrying\n      // `data-theo-mermaid-source`. We can't override `div` globally — instead,\n      // we use a custom tagName `theo-mermaid` that the React renderer maps.\n      \"theo-mermaid\": ((props: { source?: string }) => (\n        <MermaidDiagram source={props.source ?? \"\"} theme={opts.theme} />\n      )) as FC<unknown>,\n    },\n    async hastTransform(tree: HastRoot): Promise<HastRoot> {\n      // unist-util-visit is a peer-dep of the slide stack — should always be\n      // present. Guard anyway per EC-2.\n      // biome-ignore lint/suspicious/noExplicitAny: unist-util-visit untyped at runtime\n      let visit: any;\n      try {\n        visit = (await import(\"unist-util-visit\")).visit;\n      } catch (e) {\n        throw new Error(`[slide/plugins/mermaid] peer-dep 'unist-util-visit' missing: ${e}`);\n      }\n      visit(\n        tree,\n        \"element\",\n        (\n          node: Element,\n          _idx: number | undefined,\n          parent: { tagName?: string; type?: string; children?: unknown[] } | undefined,\n        ) => {\n          if (node.tagName !== \"code\") return;\n          const className = (node.properties?.className as string[] | undefined) ?? [];\n          if (!className.includes(\"language-mermaid\")) return;\n          if (!parent || parent.tagName !== \"pre\") return;\n          const codeNode = node.children?.[0];\n          const source = codeNode && codeNode.type === \"text\" ? codeNode.value : \"\";\n          // Replace the entire <pre> with our custom element. hast-util-to-jsx-runtime\n          // maps element tagName to a React component if found in `components` map.\n          Object.assign(parent, {\n            type: \"element\",\n            tagName: \"theo-mermaid\",\n            // Note: `source` is passed as a non-standard property; the React\n            // component picks it up. We avoid `data-*` attributes here so we\n            // don't have to whitelist them in sanitize.\n            properties: { source },\n            children: [],\n          });\n        },\n      );\n      return tree;\n    },\n  };\n}\n"
+      "content": "\"use client\";\n\nimport type { Element, Root as HastRoot } from \"hast\";\n/**\n * Slide rich-content plugin — Mermaid diagrams.\n *\n * Peer-dep: `mermaid` (optional, ~370 KB raw — lazy + opt-in mandatory).\n * Render is client-only because Mermaid measures DOM nodes during layout;\n * SSR / static render emits a labelled placeholder + source-code fallback.\n *\n * Pipeline contribution (D11 of the rich-content plan):\n *   - `hastTransform`: detect `<pre><code class=\"language-mermaid\">…</code></pre>`\n *     and replace with `<div class=\"theo-slide-mermaid-host\" data-theo-mermaid-source=\"…\">`.\n *   - `components.div`: when div has `data-theo-mermaid-source`, render the\n *     `<MermaidDiagram>` React component that lazy-imports `mermaid` and\n *     injects the SVG via `dangerouslySetInnerHTML` after `mermaid.render()`.\n *\n * EC-4: complete SVG tag + attribute allow-list (~30 tags) so the rendered SVG\n * survives sanitize. Critical: without these, sanitize strips the SVG entirely.\n *\n * EC-10: SSR placeholder is distinguishable from a render error. Error path\n * surfaces the Mermaid source code in a `<pre>` so consumers can debug + the\n * print path still shows the code (PDF cannot run dynamic Mermaid).\n */\nimport { type FC, useEffect, useState } from \"react\";\nimport type { SlidePlugin } from \"@/components/ui/slide/plugin\";\n\n// EC-4: comprehensive SVG tag list (mermaid 11.x output across diagram types).\nconst SVG_TAG_NAMES = [\n  \"div\",\n  // Custom element used to bridge into our React renderer (mapped via components).\n  \"theo-mermaid\",\n  // root + grouping\n  \"svg\",\n  \"g\",\n  \"defs\",\n  \"use\",\n  \"symbol\",\n  \"marker\",\n  \"pattern\",\n  \"mask\",\n  \"clipPath\",\n  // shapes\n  \"path\",\n  \"rect\",\n  \"circle\",\n  \"ellipse\",\n  \"line\",\n  \"polyline\",\n  \"polygon\",\n  // text\n  \"text\",\n  \"tspan\",\n  \"textPath\",\n  \"title\",\n  \"desc\",\n  // gradients + filters (used by some flowchart themes)\n  \"linearGradient\",\n  \"radialGradient\",\n  \"stop\",\n  \"filter\",\n  \"feGaussianBlur\",\n  \"feOffset\",\n  \"feColorMatrix\",\n  \"feComponentTransfer\",\n  \"feComposite\",\n  \"feMerge\",\n  \"feMergeNode\",\n  \"feFlood\",\n  // foreign content (HTML labels)\n  \"foreignObject\",\n  \"span\",\n  \"br\",\n];\n\nconst SVG_ATTRIBUTES: Record<string, string[]> = {\n  \"*\": [\n    \"id\",\n    \"className\",\n    \"style\",\n    \"transform\",\n    \"fill\",\n    \"stroke\",\n    \"strokeWidth\",\n    \"strokeDasharray\",\n    \"strokeLinecap\",\n    \"strokeLinejoin\",\n    \"opacity\",\n    \"fillOpacity\",\n    \"strokeOpacity\",\n    \"ariaLabel\",\n    \"ariaHidden\",\n    \"role\",\n  ],\n  svg: [\"xmlns\", \"viewBox\", \"width\", \"height\", \"preserveAspectRatio\", \"xmlnsXlink\", \"version\"],\n  path: [\"d\", \"markerEnd\", \"markerStart\", \"markerMid\"],\n  rect: [\"x\", \"y\", \"width\", \"height\", \"rx\", \"ry\"],\n  circle: [\"cx\", \"cy\", \"r\"],\n  ellipse: [\"cx\", \"cy\", \"rx\", \"ry\"],\n  line: [\"x1\", \"y1\", \"x2\", \"y2\"],\n  polyline: [\"points\"],\n  polygon: [\"points\"],\n  text: [\n    \"x\",\n    \"y\",\n    \"dx\",\n    \"dy\",\n    \"textAnchor\",\n    \"dominantBaseline\",\n    \"fontSize\",\n    \"fontFamily\",\n    \"fontWeight\",\n  ],\n  tspan: [\"x\", \"y\", \"dx\", \"dy\"],\n  textPath: [\"xlinkHref\", \"href\", \"startOffset\"],\n  marker: [\"markerUnits\", \"markerWidth\", \"markerHeight\", \"refX\", \"refY\", \"orient\", \"viewBox\"],\n  use: [\"xlinkHref\", \"href\", \"x\", \"y\", \"width\", \"height\"],\n  linearGradient: [\"x1\", \"y1\", \"x2\", \"y2\", \"gradientUnits\"],\n  radialGradient: [\"cx\", \"cy\", \"r\", \"fx\", \"fy\", \"gradientUnits\"],\n  stop: [\"offset\", \"stopColor\", \"stopOpacity\"],\n  foreignObject: [\"x\", \"y\", \"width\", \"height\"],\n  div: [\"data-state\", \"data-theo-mermaid-source\", \"className\"],\n  \"theo-mermaid\": [\"source\"],\n};\n\nexport interface MermaidPluginOptions {\n  /** Mermaid theme name. Defaults to `\"default\"`. */\n  theme?: \"default\" | \"forest\" | \"dark\" | \"neutral\" | \"base\";\n}\n\n/**\n * React component that renders Mermaid lazily on mount.\n *\n * SSR / pre-load: renders the source as `<pre>` + `role=\"img\"` for a11y.\n * Client: lazy-loads `mermaid`, calls `mermaid.render()`, then injects the\n *         resulting SVG via `dangerouslySetInnerHTML` so React owns the DOM\n *         subtree (avoids reconciliation crashes when state flips back to the\n *         placeholder — `ref.innerHTML` would mutate under React's feet).\n *\n * The Mermaid output is a TRUSTED string from the `mermaid` lib itself (not\n * user-controlled markup) — the user-supplied source is the DSL, not raw HTML.\n * Using dangerouslySetInnerHTML here is a controlled escape hatch.\n *\n * Peer-dep guard: if `import(\"mermaid\")` fails, falls back to the same\n * pre-formatted source view + an `aria-label` hint (EC-10).\n */\nexport const MermaidDiagram: FC<{ source: string; theme?: string }> = ({ source, theme }) => {\n  const [svg, setSvg] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    // Reset state when source/theme changes so the placeholder shows again\n    // while the new diagram renders.\n    setSvg(null);\n    setError(null);\n    (async () => {\n      try {\n        // biome-ignore lint/suspicious/noExplicitAny: mermaid default export untyped\n        const mermaid: any = (await import(\"mermaid\")).default;\n        if (cancelled) return;\n        mermaid.initialize({ startOnLoad: false, theme: theme ?? \"default\" });\n        const id = `theo-mmd-${Math.random().toString(36).slice(2, 10)}`;\n        const result = await mermaid.render(id, source);\n        if (!cancelled) {\n          setSvg(result.svg);\n        }\n      } catch (e) {\n        if (cancelled) return;\n        const msg = e instanceof Error ? e.message : String(e);\n        // Recognize the various module-resolution failure messages emitted by\n        // Node, Vite, Rollup, Webpack, Vitest, and browser dynamic-import.\n        const moduleNotFound =\n          msg.includes(\"Cannot find module\") ||\n          msg.includes(\"Could not resolve\") ||\n          msg.includes(\"Failed to fetch\") ||\n          msg.includes(\"Failed to resolve module\") ||\n          msg.includes(\"ERR_MODULE_NOT_FOUND\");\n        if (moduleNotFound) {\n          setError(\"Mermaid not installed. Run: pnpm add mermaid\");\n        } else {\n          setError(`Mermaid render failed: ${msg}`);\n        }\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [source, theme]);\n\n  if (error) {\n    return (\n      <div\n        data-slot=\"mermaid-diagram\"\n        data-theo-slide-mermaid\n        data-state=\"error\"\n        role=\"img\"\n        aria-label={error}\n        className=\"theo-slide-mermaid-host\"\n      >\n        <pre style={{ fontSize: \"0.8em\", opacity: 0.7, whiteSpace: \"pre-wrap\" }}>{source}</pre>\n      </div>\n    );\n  }\n  if (svg) {\n    // SVG is React-owned via dangerouslySetInnerHTML so the next state change\n    // (e.g. new `source` prop → back to placeholder) can unmount cleanly.\n    return (\n      <div\n        data-theo-slide-mermaid\n        data-state=\"ready\"\n        role=\"img\"\n        aria-label=\"Mermaid diagram\"\n        className=\"theo-slide-mermaid-host\"\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: mermaid.render() output is trusted (lib-generated SVG, not user markup)\n        dangerouslySetInnerHTML={{ __html: svg }}\n      />\n    );\n  }\n  return (\n    <div\n      data-theo-slide-mermaid\n      data-state=\"loading\"\n      role=\"img\"\n      aria-label=\"Mermaid diagram\"\n      className=\"theo-slide-mermaid-host\"\n    >\n      <pre style={{ fontSize: \"0.7em\", opacity: 0.4, whiteSpace: \"pre-wrap\" }}>{source}</pre>\n    </div>\n  );\n};\n\nexport function mermaidPlugin(opts: MermaidPluginOptions = {}): SlidePlugin {\n  return {\n    name: \"mermaid\",\n    sanitizeSchemaExtension: {\n      tagNames: SVG_TAG_NAMES,\n      attributes: SVG_ATTRIBUTES,\n    },\n    components: {\n      // The hastTransform below replaces mermaid <pre> with a `<div>` carrying\n      // `data-theo-mermaid-source`. We can't override `div` globally — instead,\n      // we use a custom tagName `theo-mermaid` that the React renderer maps.\n      \"theo-mermaid\": ((props: { source?: string }) => (\n        <MermaidDiagram source={props.source ?? \"\"} theme={opts.theme} />\n      )) as FC<unknown>,\n    },\n    async hastTransform(tree: HastRoot): Promise<HastRoot> {\n      // unist-util-visit is a peer-dep of the slide stack — should always be\n      // present. Guard anyway per EC-2.\n      // biome-ignore lint/suspicious/noExplicitAny: unist-util-visit untyped at runtime\n      let visit: any;\n      try {\n        visit = (await import(\"unist-util-visit\")).visit;\n      } catch (e) {\n        throw new Error(`[slide/plugins/mermaid] peer-dep 'unist-util-visit' missing: ${e}`);\n      }\n      visit(\n        tree,\n        \"element\",\n        (\n          node: Element,\n          _idx: number | undefined,\n          parent: { tagName?: string; type?: string; children?: unknown[] } | undefined,\n        ) => {\n          if (node.tagName !== \"code\") return;\n          const className = (node.properties?.className as string[] | undefined) ?? [];\n          if (!className.includes(\"language-mermaid\")) return;\n          if (!parent || parent.tagName !== \"pre\") return;\n          const codeNode = node.children?.[0];\n          const source = codeNode && codeNode.type === \"text\" ? codeNode.value : \"\";\n          // Replace the entire <pre> with our custom element. hast-util-to-jsx-runtime\n          // maps element tagName to a React component if found in `components` map.\n          Object.assign(parent, {\n            type: \"element\",\n            tagName: \"theo-mermaid\",\n            // Note: `source` is passed as a non-standard property; the React\n            // component picks it up. We avoid `data-*` attributes here so we\n            // don't have to whitelist them in sanitize.\n            properties: { source },\n            children: [],\n          });\n        },\n      );\n      return tree;\n    },\n  };\n}\n"
     }
   ]
 }

package/registry/r/slide-plugin-shiki.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/slide/plugins/shiki/index.ts",
       "type": "registry:ui",
       "target": "components/ui/slide/plugins/shiki/index.ts",
-      "content": "/**\n * Slide rich-content plugin — Shiki syntax highlighting.\n *\n * Lazy + opt-in (ADR D9, D13 of the rich-content plan). Peer-dep `shiki` is\n * declared optional in `package.json`; the plugin guards every dynamic import\n * so a missing peer-dep is reported (D16) rather than crashing the slide.\n *\n * Pipeline contribution:\n *   - `hastTransform`: walks `<pre><code class=\"language-XXX\">` nodes, replaces\n *     them with the pre-rendered `<pre><code>` tree emitted by Shiki.\n *   - `sanitizeSchemaExtension`: allows `<span>` with `style` and `class`\n *     (Shiki emits inline styles for tokens).\n *\n * Performance:\n *   - Highlighter is created lazily on first use and cached.\n *   - Grammars listed in `langs` are pre-loaded once; unknown langs pass-through\n *     as plain `<pre><code>` (defaultSchema allows that).\n *\n * @example\n *   import { shikiPlugin } from \"@usetheo/ui/slide/plugins/shiki\";\n *   import \"shiki\";  // installed as peer-dep\n *   <Slide markdown={md} plugins={[shikiPlugin({ langs: [\"ts\",\"python\"] })]} />\n */\nimport type { Element, Root as HastRoot } from \"hast\";\nimport type { SlidePlugin } from \"@/components/ui/slide/plugin\";\n\nexport interface ShikiPluginOptions {\n  /** Dual-theme map — light/dark Shiki theme names. Defaults to `github-light` / `github-dark`. */\n  themes?: { light: string; dark: string };\n  /** Languages to pre-load. Unknown languages pass-through. Defaults to a tech-stack baseline. */\n  langs?: string[];\n}\n\nconst DEFAULT_LANGS = [\n  \"ts\",\n  \"tsx\",\n  \"js\",\n  \"jsx\",\n  \"python\",\n  \"go\",\n  \"rust\",\n  \"java\",\n  \"json\",\n  \"yaml\",\n  \"bash\",\n  \"shell\",\n  \"html\",\n  \"css\",\n  \"sql\",\n  \"markdown\",\n];\n\nexport function shikiPlugin(opts: ShikiPluginOptions = {}): SlidePlugin {\n  const themes = opts.themes ?? { light: \"github-light\", dark: \"github-dark\" };\n  const langs = opts.langs ?? DEFAULT_LANGS;\n  // biome-ignore lint/suspicious/noExplicitAny: shiki has no exported type for `Highlighter` at the top level\n  let highlighter: any = null;\n  let peerDepMissing = false;\n\n  // biome-ignore lint/suspicious/noExplicitAny: shiki Highlighter is untyped here\n  async function getHighlighter(): Promise<any> {\n    if (highlighter) return highlighter;\n    if (peerDepMissing) return null;\n    try {\n      const shiki = await import(\"shiki\");\n      highlighter = await shiki.createHighlighter({\n        themes: [themes.light, themes.dark],\n        langs,\n      });\n      return highlighter;\n    } catch (e) {\n      peerDepMissing = true;\n      // Surface via D16 path (composePlugins catches → PLUGIN_ERROR).\n      throw new Error(\n        `[slide/plugins/shiki] peer-dep 'shiki' not installed or failed to load. Run: pnpm add shiki. Original: ${e instanceof Error ? e.message : String(e)}`,\n      );\n    }\n  }\n\n  return {\n    name: \"shiki\",\n    sanitizeSchemaExtension: {\n      tagNames: [\"span\", \"pre\", \"code\"],\n      // Shiki emits inline `style` and `class` on tokens; \"*\" applies to every tag.\n      attributes: {\n        \"*\": [\"style\", \"className\"],\n        pre: [\"style\", \"className\", \"tabIndex\"],\n        code: [\"style\", \"className\"],\n        span: [\"style\", \"className\"],\n      },\n    },\n    async hastTransform(tree: HastRoot): Promise<HastRoot> {\n      const hl = await getHighlighter();\n      if (!hl) return tree; // peer-dep missing AND we've already reported it once\n      const { visit } = await import(\"unist-util-visit\");\n      const { fromHtml } = await import(\"hast-util-from-html\");\n      // Walk: find <code class=\"language-XXX\">, replace its parent <pre> subtree\n      // with the highlighted output (which is also a <pre><code>...</code></pre>).\n      // biome-ignore lint/suspicious/noExplicitAny: hast unist-util-visit untyped here\n      visit(tree, \"element\", (node: Element, _idx: number | undefined, parent: any) => {\n        if (node.tagName !== \"code\") return;\n        const className = (node.properties?.className as string[] | undefined) ?? [];\n        const langClass = className.find((c) => c.startsWith(\"language-\"));\n        if (!langClass) return;\n        const lang = langClass.replace(\"language-\", \"\");\n        if (!langs.includes(lang)) return;\n        const first = node.children?.[0];\n        const codeText = first && first.type === \"text\" ? first.value : \"\";\n        let html: string;\n        try {\n          html = hl.codeToHtml(codeText, { lang, themes });\n        } catch {\n          // Shiki failed on this snippet (e.g. malformed input). Leave the plain\n          // <pre><code> in place — the consumer still gets readable text.\n          return;\n        }\n        const newTree = fromHtml(html, { fragment: true });\n        const top = newTree.children[0];\n        if (parent?.tagName === \"pre\" && parent.children?.length === 1 && top) {\n          Object.assign(parent, top);\n        }\n      });\n      return tree;\n    },\n  };\n}\n"
+      "content": "/**\n * Slide rich-content plugin — Shiki syntax highlighting.\n *\n * Lazy + opt-in (ADR D9, D13 of the rich-content plan). Peer-dep `shiki` is\n * declared optional in `package.json`; the plugin guards every dynamic import\n * so a missing peer-dep is reported (D16) rather than crashing the slide.\n *\n * Pipeline contribution:\n *   - `hastTransform`: walks `<pre><code class=\"language-XXX\">` nodes, replaces\n *     them with the pre-rendered `<pre><code>` tree emitted by Shiki.\n *   - `sanitizeSchemaExtension`: allows `<span>` with `style` and `class`\n *     (Shiki emits inline styles for tokens).\n *\n * Performance:\n *   - Highlighter is created lazily on first use and cached.\n *   - Grammars listed in `langs` are pre-loaded once; unknown langs pass-through\n *     as plain `<pre><code>` (defaultSchema allows that).\n *\n * @example\n *   import { shikiPlugin } from \"@theokit/ui/slide/plugins/shiki\";\n *   import \"shiki\";  // installed as peer-dep\n *   <Slide markdown={md} plugins={[shikiPlugin({ langs: [\"ts\",\"python\"] })]} />\n */\nimport type { Element, Root as HastRoot } from \"hast\";\nimport type { SlidePlugin } from \"@/components/ui/slide/plugin\";\n\nexport interface ShikiPluginOptions {\n  /** Dual-theme map — light/dark Shiki theme names. Defaults to `github-light` / `github-dark`. */\n  themes?: { light: string; dark: string };\n  /** Languages to pre-load. Unknown languages pass-through. Defaults to a tech-stack baseline. */\n  langs?: string[];\n}\n\nconst DEFAULT_LANGS = [\n  \"ts\",\n  \"tsx\",\n  \"js\",\n  \"jsx\",\n  \"python\",\n  \"go\",\n  \"rust\",\n  \"java\",\n  \"json\",\n  \"yaml\",\n  \"bash\",\n  \"shell\",\n  \"html\",\n  \"css\",\n  \"sql\",\n  \"markdown\",\n];\n\nexport function shikiPlugin(opts: ShikiPluginOptions = {}): SlidePlugin {\n  const themes = opts.themes ?? { light: \"github-light\", dark: \"github-dark\" };\n  const langs = opts.langs ?? DEFAULT_LANGS;\n  // biome-ignore lint/suspicious/noExplicitAny: shiki has no exported type for `Highlighter` at the top level\n  let highlighter: any = null;\n  let peerDepMissing = false;\n\n  // biome-ignore lint/suspicious/noExplicitAny: shiki Highlighter is untyped here\n  async function getHighlighter(): Promise<any> {\n    if (highlighter) return highlighter;\n    if (peerDepMissing) return null;\n    try {\n      const shiki = await import(\"shiki\");\n      highlighter = await shiki.createHighlighter({\n        themes: [themes.light, themes.dark],\n        langs,\n      });\n      return highlighter;\n    } catch (e) {\n      peerDepMissing = true;\n      // Surface via D16 path (composePlugins catches → PLUGIN_ERROR).\n      throw new Error(\n        `[slide/plugins/shiki] peer-dep 'shiki' not installed or failed to load. Run: pnpm add shiki. Original: ${e instanceof Error ? e.message : String(e)}`,\n      );\n    }\n  }\n\n  return {\n    name: \"shiki\",\n    sanitizeSchemaExtension: {\n      tagNames: [\"span\", \"pre\", \"code\"],\n      // Shiki emits inline `style` and `class` on tokens; \"*\" applies to every tag.\n      attributes: {\n        \"*\": [\"style\", \"className\"],\n        pre: [\"style\", \"className\", \"tabIndex\"],\n        code: [\"style\", \"className\"],\n        span: [\"style\", \"className\"],\n      },\n    },\n    async hastTransform(tree: HastRoot): Promise<HastRoot> {\n      const hl = await getHighlighter();\n      if (!hl) return tree; // peer-dep missing AND we've already reported it once\n      const { visit } = await import(\"unist-util-visit\");\n      const { fromHtml } = await import(\"hast-util-from-html\");\n      // Walk: find <code class=\"language-XXX\">, replace its parent <pre> subtree\n      // with the highlighted output (which is also a <pre><code>...</code></pre>).\n      // biome-ignore lint/suspicious/noExplicitAny: hast unist-util-visit untyped here\n      visit(tree, \"element\", (node: Element, _idx: number | undefined, parent: any) => {\n        if (node.tagName !== \"code\") return;\n        const className = (node.properties?.className as string[] | undefined) ?? [];\n        const langClass = className.find((c) => c.startsWith(\"language-\"));\n        if (!langClass) return;\n        const lang = langClass.replace(\"language-\", \"\");\n        if (!langs.includes(lang)) return;\n        const first = node.children?.[0];\n        const codeText = first && first.type === \"text\" ? first.value : \"\";\n        let html: string;\n        try {\n          html = hl.codeToHtml(codeText, { lang, themes });\n        } catch {\n          // Shiki failed on this snippet (e.g. malformed input). Leave the plain\n          // <pre><code> in place — the consumer still gets readable text.\n          return;\n        }\n        const newTree = fromHtml(html, { fragment: true });\n        const top = newTree.children[0];\n        if (parent?.tagName === \"pre\" && parent.children?.length === 1 && top) {\n          Object.assign(parent, top);\n        }\n      });\n      return tree;\n    },\n  };\n}\n"
     }
   ]
 }

package/registry/r/slide.json

@@ -3,7 +3,7 @@
   "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 @usetheo/ui.",
+  "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",
@@ -27,7 +27,7 @@
       "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 * `@usetheo/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"
+      "content": "\"use client\";\n\nimport {\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      data-slot=\"slide\"\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",
@@ -81,7 +81,7 @@
       "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 \"@usetheo/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"
+      "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",
@@ -93,13 +93,13 @@
       "path": "components/primitives/slide/index.ts",
       "type": "registry:ui",
       "target": "components/ui/slide/index.ts",
-      "content": "/**\n * Public surface of `@usetheo/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"
+      "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 * `@usetheo/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"
+      "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",
@@ -111,7 +111,7 @@
       "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"
+      "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: #a855f7;\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",