@saena-io/create 0.1.0 → 0.2.0

package/template/base/src/components/ui/rich-text/list-node.tsx

@@ -0,0 +1,65 @@
+import { isOrderedList } from '@platejs/list';
+import { useTodoListElement, useTodoListElementState } from '@platejs/list/react';
+import { Checkbox } from '@saena-io/ui/components/checkbox';
+import { cn } from '@saena-io/ui/lib/utils';
+import { type PlateElementProps, type RenderNodeWrapper, useReadOnly } from 'platejs/react';
+import type { FC } from 'react';
+
+// Custom list rendering that adds a TODO variant. The base list plugin draws bullets/numbers via CSS
+// `list-style-type` on a <ul>/<ol><li>; CSS can't draw a checkbox, so todo items (listStyleType 'todo')
+// render a Checkbox marker + a strikethrough-when-checked <li> instead. Registered as ListPlugin's
+// render.belowNodes (see rich-text-editor.tsx) — for non-todo lists it falls back to the same ul/ol markup.
+
+type ListElement = PlateElementProps['element'] & {
+  listStart?: number;
+  listStyleType?: string;
+  checked?: boolean;
+};
+
+const TODO_CONFIG: Record<string, { Li: FC<PlateElementProps>; Marker: FC<PlateElementProps> }> = {
+  todo: { Li: TodoLi, Marker: TodoMarker },
+};
+
+export const BlockList: RenderNodeWrapper = (props) => {
+  if (!(props.element as ListElement).listStyleType) return;
+  return (childProps) => <List {...childProps} />;
+};
+
+function List(props: PlateElementProps) {
+  const element = props.element as ListElement;
+  const { Li, Marker } = TODO_CONFIG[element.listStyleType ?? ''] ?? {};
+  const ListTag = isOrderedList(props.element) ? 'ol' : 'ul';
+  return (
+    <ListTag
+      className="relative m-0 p-0"
+      style={{ listStyleType: element.listStyleType }}
+      start={element.listStart}
+    >
+      {Marker ? <Marker {...props} /> : null}
+      {Li ? <Li {...props} /> : <li>{props.children}</li>}
+    </ListTag>
+  );
+}
+
+function TodoMarker(props: PlateElementProps) {
+  const state = useTodoListElementState({ element: props.element });
+  const { checkboxProps } = useTodoListElement(state);
+  const readOnly = useReadOnly();
+  return (
+    <div contentEditable={false}>
+      <Checkbox
+        className={cn('-left-6 absolute top-0.5', readOnly && 'pointer-events-none')}
+        {...checkboxProps}
+      />
+    </div>
+  );
+}
+
+function TodoLi(props: PlateElementProps) {
+  const checked = (props.element as ListElement).checked;
+  return (
+    <li className={cn('list-none', checked && 'text-muted-foreground line-through')}>
+      {props.children}
+    </li>
+  );
+}

package/template/base/src/components/ui/rich-text/nodes.tsx

@@ -0,0 +1,44 @@
+import { PlateElement, type PlateElementProps } from 'platejs/react';
+
+// Node renderers for the rich-text editor, written on plain elements (no Radix) so they fit our
+// Base-UI design system. Styling is Tailwind; PlateElement applies the editor attributes + children.
+
+export function H1Element(props: PlateElementProps) {
+  return (
+    <PlateElement
+      as="h1"
+      className="mt-[1.6em] mb-1 pb-1 font-bold font-heading text-4xl"
+      {...props}
+    />
+  );
+}
+
+export function H2Element(props: PlateElementProps) {
+  return (
+    <PlateElement
+      as="h2"
+      className="mt-[1.4em] mb-1 pb-px font-heading font-semibold text-2xl tracking-tight"
+      {...props}
+    />
+  );
+}
+
+export function H3Element(props: PlateElementProps) {
+  return (
+    <PlateElement
+      as="h3"
+      className="mt-[1em] mb-1 pb-px font-heading font-semibold text-xl tracking-tight"
+      {...props}
+    />
+  );
+}
+
+export function BlockquoteElement(props: PlateElementProps) {
+  return (
+    <PlateElement
+      as="blockquote"
+      className="my-2 border-muted-foreground/30 border-l-2 pl-3 text-muted-foreground italic"
+      {...props}
+    />
+  );
+}

package/template/base/src/components/ui/rich-text/plugins.ts

@@ -0,0 +1,233 @@
+import {
+  BlockquoteRules,
+  BoldRules,
+  CodeRules,
+  HeadingRules,
+  ItalicRules,
+  MarkComboRules,
+  StrikethroughRules,
+  UnderlineRules,
+} from '@platejs/basic-nodes';
+import {
+  BlockquotePlugin,
+  BoldPlugin,
+  CodePlugin,
+  H1Plugin,
+  H2Plugin,
+  H3Plugin,
+  ItalicPlugin,
+  StrikethroughPlugin,
+  UnderlinePlugin,
+} from '@platejs/basic-nodes/react';
+import { TextAlignPlugin } from '@platejs/basic-styles/react';
+import { CodeBlockRules } from '@platejs/code-block';
+import { CodeBlockPlugin, CodeLinePlugin, CodeSyntaxPlugin } from '@platejs/code-block/react';
+import { DndPlugin } from '@platejs/dnd';
+import { DocxPlugin } from '@platejs/docx';
+import { IndentPlugin } from '@platejs/indent/react';
+import { JuicePlugin } from '@platejs/juice';
+import { LinkRules } from '@platejs/link';
+import { LinkPlugin } from '@platejs/link/react';
+import { BulletedListRules, OrderedListRules, TaskListRules } from '@platejs/list';
+import { ListPlugin } from '@platejs/list/react';
+import { MarkdownPlugin } from '@platejs/markdown';
+import { BlockSelectionPlugin } from '@platejs/selection/react';
+import {
+  TableCellHeaderPlugin,
+  TableCellPlugin,
+  TablePlugin,
+  TableRowPlugin,
+} from '@platejs/table/react';
+import { TogglePlugin } from '@platejs/toggle/react';
+import { common, createLowlight } from 'lowlight';
+import { ExitBreakPlugin, KEYS, TrailingBlockPlugin, type Value } from 'platejs';
+import { usePlateEditor } from 'platejs/react';
+import remarkGfm from 'remark-gfm';
+import { BlockDraggable } from './block-draggable';
+import { CodeBlockElement, CodeSyntaxLeaf } from './code-block-node';
+import { emptyRichValue } from './codec';
+import type { RichTextExtension } from './extension';
+import { LinkElement } from './link';
+import { BlockList } from './list-node';
+import { BlockquoteElement, H1Element, H2Element, H3Element } from './nodes';
+import {
+  TableCellElement,
+  TableCellHeaderElement,
+  TableElement,
+  TableRowElement,
+} from './table-node';
+import { ToggleElement } from './toggle-node';
+import { VariablePlugin } from './variable';
+
+// The editor's Plate plugin set + the editor factory. This module is the toolbar-free LEAF of the rich-text
+// dependency graph: it imports only node renderers and platejs, never the toolbar. That's what lets the
+// toolbar (and table-toolbar / import-export-toolbar) import the `RichTextEditor` type from here without a
+// cycle — the toolbar is mounted by RichTextContent (see rich-text-editor.tsx), not registered as a plugin.
+
+// Shared lowlight instance (highlight.js `common` language set) that powers code-block syntax highlighting.
+// Created once at module scope and handed to CodeBlockPlugin.options.lowlight; the plugin's decorate emits
+// `code_syntax` leaves carrying highlight.js class names that CodeSyntaxLeaf + globals.css (.saena-hljs) style.
+const lowlight = createLowlight(common);
+
+// The core rich-text capability set (§9, ADR-0005). This array IS the extension seam: future tool
+// plugins (media, AI/copilot, tables, …) append their Plate plugins here, and matching toolbar groups
+// to the toolbar. Built on our Base-UI primitives — not the Radix shadcn block.
+export const coreRichTextPlugins = [
+  // Inline marks. Each carries markdown autoformat input rules (**bold**, _italic_, `code`, ~~strike~~)
+  // plus the keyboard shortcuts the bare plugins miss — strikethrough mod+shift+x and code mod+e (bold /
+  // italic / underline already ship their own mod+b/i/u).
+  BoldPlugin.configure({
+    inputRules: [
+      BoldRules.markdown({ variant: '*' }),
+      BoldRules.markdown({ variant: '_' }),
+      MarkComboRules.markdown({ variant: 'boldItalic' }),
+      MarkComboRules.markdown({ variant: 'boldUnderline' }),
+      MarkComboRules.markdown({ variant: 'boldItalicUnderline' }),
+      MarkComboRules.markdown({ variant: 'italicUnderline' }),
+    ],
+  }),
+  ItalicPlugin.configure({
+    inputRules: [ItalicRules.markdown({ variant: '*' }), ItalicRules.markdown({ variant: '_' })],
+  }),
+  UnderlinePlugin.configure({ inputRules: [UnderlineRules.markdown()] }),
+  StrikethroughPlugin.configure({
+    inputRules: [StrikethroughRules.markdown()],
+    shortcuts: { toggle: { keys: 'mod+shift+x' } },
+  }),
+  CodePlugin.configure({
+    inputRules: [CodeRules.markdown()],
+    shortcuts: { toggle: { keys: 'mod+e' } },
+  }),
+  // Headings + quote. Markdown autoformat (`# `, `## `, `### `, `> `) and a reset-on-Enter rule so Enter
+  // in an empty heading drops back to a paragraph. .withComponent is folded into node.component because a
+  // plugin can't both .configure and .withComponent.
+  H1Plugin.configure({
+    inputRules: [HeadingRules.markdown()],
+    node: { component: H1Element },
+    rules: { break: { empty: 'reset' } },
+  }),
+  H2Plugin.configure({
+    inputRules: [HeadingRules.markdown()],
+    node: { component: H2Element },
+    rules: { break: { empty: 'reset' } },
+  }),
+  H3Plugin.configure({
+    inputRules: [HeadingRules.markdown()],
+    node: { component: H3Element },
+    rules: { break: { empty: 'reset' } },
+  }),
+  BlockquotePlugin.configure({
+    inputRules: [BlockquoteRules.markdown()],
+    node: { component: BlockquoteElement },
+  }),
+  // Multi-line code block (for larger snippets) — distinct from the inline `code` mark. Typing ``` or
+  // pasting a fenced block creates one. `lowlight` enables highlight.js syntax highlighting; the in-block
+  // language picker (CodeBlockElement) sets `element.lang`, which drives the decorate-based coloring.
+  CodeBlockPlugin.configure({
+    inputRules: [CodeBlockRules.markdown({ on: 'match' })],
+    node: { component: CodeBlockElement },
+    options: { lowlight, defaultLanguage: null },
+    shortcuts: { toggle: { keys: 'mod+alt+8' } },
+  }),
+  CodeLinePlugin,
+  CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),
+  // Block alignment — stores `align` on the block and injects it as the `textAlign` CSS style. Targets
+  // the block types we render (headings + paragraphs); driven by the toolbar's align dropdown.
+  TextAlignPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 'start',
+        nodeKey: 'align',
+        styleKey: 'textAlign',
+        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p],
+    },
+  }),
+  // Inline links — add/edit/remove via the toolbar's Link popover, plus autolink on paste/space/break and
+  // `[text](url)` markdown. LinkElement spreads getLinkAttributes for a real href.
+  LinkPlugin.configure({
+    inputRules: [
+      LinkRules.markdown(),
+      LinkRules.autolink({ variant: 'paste' }),
+      LinkRules.autolink({ variant: 'space' }),
+      LinkRules.autolink({ variant: 'break' }),
+    ],
+    render: { node: LinkElement },
+  }),
+  // Indented lists (bulleted / numbered) — ListPlugin builds on IndentPlugin's block indentation. Both
+  // target headings + quote + paragraph so those blocks can be indented / turned into list items, and the
+  // list gains markdown autoformat (`- `, `* `, `1. `, `1) `).
+  IndentPlugin.configure({
+    inject: { targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote] },
+    options: { offset: 24 },
+  }),
+  ListPlugin.configure({
+    inputRules: [
+      BulletedListRules.markdown({ variant: '-' }),
+      BulletedListRules.markdown({ variant: '*' }),
+      OrderedListRules.markdown({ variant: '.' }),
+      OrderedListRules.markdown({ variant: ')' }),
+      // `- [ ] ` / `- [x] ` autoformat into a to-do list item.
+      TaskListRules.markdown({ checked: false }),
+      TaskListRules.markdown({ checked: true }),
+    ],
+    inject: { targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote] },
+    // Override the default ul/ol marker render so to-do list items can draw a checkbox (CSS markers can't).
+    render: { belowNodes: BlockList },
+  }),
+  // Collapsible toggle blocks — a disclosure chevron (ToggleElement) that hides the blocks indented beneath
+  // it. Builds on IndentPlugin (registered above); the plugin tracks open/closed state per block id.
+  TogglePlugin.withComponent(ToggleElement),
+  // Block selection + drag, required by the table renderers: cell-selection overlays read from
+  // BlockSelectionPlugin and the row drag handle uses DndPlugin (needs a single react-dnd backend at the
+  // editor root — see RichTextDndProvider). Registered before the table so its transforms are available.
+  BlockSelectionPlugin,
+  // Per-block drag handle (grip on hover) — render.aboveNodes wraps every block with BlockDraggable.
+  DndPlugin.configure({ render: { aboveNodes: BlockDraggable } }),
+  // Tables — insert + edit a bordered grid with column/row resize, row drag, and cell selection.
+  TablePlugin.withComponent(TableElement),
+  TableRowPlugin.withComponent(TableRowElement),
+  TableCellPlugin.withComponent(TableCellElement),
+  TableCellHeaderPlugin.withComponent(TableCellHeaderElement),
+  // Editing-feel behavior: Cmd+Enter escapes a nested block (table cell / quote) to a sibling paragraph,
+  // and a trailing empty paragraph is always kept after a terminal block (table / quote) so the caret can
+  // exit to normal text at the end of the document.
+  ExitBreakPlugin.configure({
+    shortcuts: { insert: { keys: 'mod+enter' }, insertBefore: { keys: 'mod+shift+enter' } },
+  }),
+  TrailingBlockPlugin,
+  // Document interop: Markdown serialize/deserialize (GFM tables, strikethrough, autolinks) powers
+  // import/export and Markdown paste; DocxPlugin + JuicePlugin let content paste in cleanly from Word.
+  MarkdownPlugin.configure({ options: { remarkPlugins: [remarkGfm] } }),
+  DocxPlugin,
+  JuicePlugin,
+  // i18n variables render as inline badges and round-trip through the stored Slate JSON.
+  VariablePlugin,
+];
+
+/** Options for a rich-text editor instance. */
+export interface RichTextOptions {
+  /** Required when several editors share a PlateController (e.g. the source + target panes). */
+  id?: string;
+  value?: Value;
+  readOnly?: boolean;
+  /** Addons contributing Plate plugins + toolbar controls (media, text styles, AI, …). Read once when the
+   *  editor is constructed (like usePlateEditor's plugins) — to change the addon set, remount the editor via
+   *  a React key, not by mutating this array on a live instance. */
+  extensions?: RichTextExtension[];
+}
+
+/** Create a rich-text editor instance — the core capability set plus any extension plugins. */
+export function useRichTextEditor(opts: RichTextOptions) {
+  const extensionPlugins = (opts.extensions ?? []).flatMap((e) => e.platePlugins ?? []);
+  return usePlateEditor({
+    id: opts.id,
+    plugins: [...coreRichTextPlugins, ...extensionPlugins],
+    value: opts.value ?? emptyRichValue,
+    readOnly: opts.readOnly,
+  });
+}
+
+/** The concrete editor type (with the core plugins' transforms) — used to type toolbar handlers. */
+export type RichTextEditor = ReturnType<typeof useRichTextEditor>;

package/template/base/src/components/ui/rich-text/rich-text-editor.tsx

@@ -0,0 +1,82 @@
+import { cn } from '@saena-io/ui/lib/utils';
+import { PlateContent } from 'platejs/react';
+import type { ReactNode } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { coreRichTextPlugins, useRichTextEditor } from './plugins';
+import { FloatingRichTextToolbar } from './toolbar';
+
+// The rich-text editor's public surface. The Plate plugin set + editor factory live in the toolbar-free
+// leaf ./plugins (so the toolbar can import the RichTextEditor type without a dependency cycle); this module
+// composes them with the toolbar (FloatingRichTextToolbar, RichTextToolbar), the stored-value codec, and the
+// content/DnD surfaces, and re-exports everything a consumer or addon author needs from @saena-io/ui.
+
+export { variableNode, flattenRichText, extractPlaceholders } from './variable';
+export { RichTextToolbar } from './toolbar';
+export { coreRichTextPlugins, useRichTextEditor };
+export { createAiCopilotExtension } from './ai-copilot';
+export type { AiCopilotOptions } from './ai-copilot';
+export { createAiCommandExtension } from './ai-command';
+export type { AiCommandOptions } from './ai-command';
+export { GhostText } from './ghost-text';
+export { emptyRichValue, parseRichText, serializeRichText, richValueIsDirty } from './codec';
+export type { RichTextEditor, RichTextOptions } from './plugins';
+// Re-export the Plate surface consumers (and addon authors) need, so they go through @saena-io/ui (platejs
+// stays an implementation detail of the design system) rather than depending on platejs directly — the
+// dependency boundary that lets a feature package extend the editor without importing platejs (§13).
+export { Plate, PlateController } from 'platejs/react';
+export type { Value } from 'platejs';
+export type { AnyPlatePlugin } from 'platejs/react';
+export type { RichTextExtension, ToolbarItem, ToolbarSlot } from './extension';
+
+/**
+ * The editable content surface. Place inside a <Plate editor={…}>. Renders the floating selection toolbar
+ * alongside the editable — it mounts here (rather than as a core plugin) so the plugin set in ./plugins
+ * stays toolbar-free; being inside <Plate>, its hooks still bind to this concrete editor (safe under the
+ * dual-pane PlateController).
+ */
+export function RichTextContent({
+  placeholder,
+  className,
+  lang,
+}: {
+  placeholder?: string;
+  className?: string;
+  /** BCP-47 language tag set on the editable so the browser spellchecks against the right dictionary
+   *  (e.g. the translation pane gets the target locale, not the UI language). */
+  lang?: string;
+}) {
+  return (
+    <>
+      <PlateContent
+        placeholder={placeholder}
+        lang={lang}
+        className={cn(
+          // Borderless, document-style surface — the host centers it in a max-width column. Grows with
+          // content (no inner scroll) so the surrounding area provides a single scroll.
+          'min-h-32 w-full px-1 py-2 text-sm leading-relaxed outline-none',
+          '[&_p]:my-1.5',
+          // The first block keeps its element margin (headings carry a large top margin for section
+          // separation) — zero it so content doesn't start far down. Blocks are wrapped by the drag handle
+          // (.flow-root holds the real element), so reach through it.
+          '[&>:first-child_.flow-root>:first-child]:mt-0 [&>:first-child:not(:has(.flow-root))]:mt-0',
+          // Indent-list markers render `outside` by default; render them `inside` so bullets/numbers stay
+          // within the text column.
+          '[&_ul]:[list-style-position:inside] [&_ol]:[list-style-position:inside] [&_li]:my-0.5',
+          '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs',
+          className,
+        )}
+      />
+      <FloatingRichTextToolbar />
+    </>
+  );
+}
+
+/**
+ * A single react-dnd backend for the table row-drag handles. Wrap it ONCE around all Plate editors that
+ * share a PlateController (the source + target panes) — two HTML5Backends mounted on the same page throw,
+ * so we can't register the provider per-editor via DndPlugin's render.
+ */
+export function RichTextDndProvider({ children }: { children: ReactNode }) {
+  return <DndProvider backend={HTML5Backend}>{children}</DndProvider>;
+}

package/template/base/src/components/ui/rich-text/static.tsx

@@ -0,0 +1,117 @@
+import {
+  BaseBlockquotePlugin,
+  BaseBoldPlugin,
+  BaseCodePlugin,
+  BaseHeadingPlugin,
+  BaseItalicPlugin,
+  BaseStrikethroughPlugin,
+  BaseUnderlinePlugin,
+} from '@platejs/basic-nodes';
+import { BaseCodeBlockPlugin, BaseCodeLinePlugin } from '@platejs/code-block';
+import { BaseLinkPlugin } from '@platejs/link';
+import { cn } from '@saena-io/ui/lib/utils';
+import { KEYS, type Value, createSlatePlugin } from 'platejs';
+import {
+  PlateStatic,
+  SlateElement,
+  type SlateElementProps,
+  SlateLeaf,
+  type SlateLeafProps,
+  createStaticEditor,
+} from 'platejs/static';
+import { parseRichText } from './codec';
+import { VARIABLE_TYPE } from './variable-type';
+
+// The deferred ADR-0005 public-site renderer: render a stored rich `Value` to HTML with NO editor in the
+// bundle. It uses Plate's BASE (React-free) plugins for the node schema + static SlateElement/SlateLeaf
+// components — never the editor's `/react` plugins (those call Plate hooks and need a live <Plate>, which
+// is exactly what the public site must avoid). CMS public pages are the first consumer (Prose renders here).
+//
+// v1 covers the Prose node set (paragraphs [a built-in node], headings, quote, marks, link, code, the i18n
+// variable badge). Indent-based lists and tables get PlateStatic's defaults for now; their bespoke static
+// components are an additive follow-up — the base-kit architecture means adding them never forces a rewrite.
+
+// The i18n variable node, defined React-free so the static editor knows it's an inline void without pulling
+// the editor's VariablePlugin (which imports platejs/react).
+const baseVariablePlugin = createSlatePlugin({
+  key: VARIABLE_TYPE,
+  node: { type: VARIABLE_TYPE, isElement: true, isInline: true, isVoid: true },
+});
+
+const staticPlugins = [
+  BaseBoldPlugin,
+  BaseItalicPlugin,
+  BaseUnderlinePlugin,
+  BaseStrikethroughPlugin,
+  BaseCodePlugin,
+  BaseHeadingPlugin,
+  BaseBlockquotePlugin,
+  BaseLinkPlugin,
+  BaseCodeBlockPlugin,
+  BaseCodeLinePlugin,
+  baseVariablePlugin,
+];
+
+// `as` is the HTML tag the node renders to (SlateElement/SlateLeaf accept an intrinsic tag name); all our
+// node mappings below pass a plain tag string, so type it as such rather than the broad ElementType.
+type Tag = keyof HTMLElementTagNameMap;
+function El(as: Tag, className?: string) {
+  return (props: SlateElementProps) => <SlateElement as={as} className={className} {...props} />;
+}
+function Leaf(as: Tag, className?: string) {
+  return (props: SlateLeafProps) => <SlateLeaf as={as} className={className} {...props} />;
+}
+
+/** The i18n variable as a static inline badge (mirrors the editor's VariableElement, no selection state). */
+function VariableStatic(props: SlateElementProps) {
+  const name = (props.element as { name?: string }).name ?? '';
+  return (
+    <SlateElement as="span" {...props}>
+      <span className="mx-0.5 inline-flex select-none items-center rounded bg-primary px-1.5 py-px font-medium font-mono text-[0.8em] text-primary-foreground">
+        {name}
+      </span>
+      {props.children}
+    </SlateElement>
+  );
+}
+
+const staticComponents = {
+  [KEYS.p]: El('p', 'my-1.5 leading-relaxed'),
+  [KEYS.h1]: El('h1', 'mt-8 mb-3 font-bold text-3xl'),
+  [KEYS.h2]: El('h2', 'mt-6 mb-2 font-semibold text-2xl'),
+  [KEYS.h3]: El('h3', 'mt-4 mb-2 font-semibold text-xl'),
+  [KEYS.blockquote]: El('blockquote', 'my-3 border-muted-foreground/30 border-l-2 pl-4 italic'),
+  [KEYS.codeBlock]: El('pre', 'my-3 overflow-auto rounded bg-muted p-3 font-mono text-sm'),
+  [KEYS.codeLine]: El('div'),
+  [KEYS.a]: El('a', 'font-medium text-primary underline underline-offset-2'),
+  [VARIABLE_TYPE]: VariableStatic,
+  [KEYS.bold]: Leaf('strong'),
+  [KEYS.italic]: Leaf('em'),
+  [KEYS.underline]: Leaf('u'),
+  [KEYS.strikethrough]: Leaf('s'),
+  [KEYS.code]: Leaf('code', 'rounded bg-muted px-1 py-0.5 font-mono text-xs'),
+};
+
+/**
+ * Render a stored rich value for the public site — editor-free (ADR-0005). Safe in a Server Component.
+ *
+ * Accepts either an already-parsed `Value` or the raw stored string (serialized Slate JSON, the shape the
+ * codec persists); a string is parsed here with the plain-text fallback so a legacy plain row still renders.
+ */
+export function RichTextStatic({
+  value,
+  className,
+}: { value: Value | string; className?: string }) {
+  const doc = typeof value === 'string' ? parseRichText(value, { plainTextFallback: true }) : value;
+  const editor = createStaticEditor({
+    plugins: staticPlugins,
+    value: doc,
+    components: staticComponents,
+    // Disable Plate's NodeId plugin for the static render. By default it assigns each block a fresh
+    // `nanoid(10)` id during editor init (→ `data-block-id` / `data-slate-id`), which runs independently on
+    // the server and on the client, producing different ids and an SSR hydration mismatch. A read-only public
+    // render needs no node ids (no selection / DnD), so turning it off makes the markup deterministic.
+    nodeId: false,
+  });
+  return <PlateStatic editor={editor} className={cn('text-sm', className)} />;
+}