@saena-io/content 0.1.0

package/src/admin/form-engine.tsx

@@ -0,0 +1,394 @@
+import { Button } from '@saena-io/ui/components/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@saena-io/ui/components/collapsible';
+import { NativeSelect, NativeSelectOption } from '@saena-io/ui/components/native-select';
+import { cn } from '@saena-io/ui/lib/utils';
+import { type DragEvent, useEffect, useRef, useState } from 'react';
+import { type FieldDecl, type FieldPath, fieldType } from '../field';
+import { getEditor } from './field-registry';
+import { Chevron, GripVertical } from './icons';
+
+// The recursive form generator (ADR-0008): one renderer turns any field schema into editing UI. object →
+// labelled children (respecting `visible`), list → item editors with add/remove/reorder, union → a discriminant
+// picker + the active variant's fields, leaf → the registered editor (built-in or custom — one mechanism).
+// Value is a single immutable tree held by the section editor; every onChange rebuilds along the path.
+
+interface ViewProps {
+  field: FieldDecl;
+  value: unknown;
+  onChange: (next: unknown) => void;
+  path: FieldPath;
+  locale: string;
+  /** The parent object's value — leaf editors read sibling fields from it (e.g. slug-from-title). */
+  siblings?: Record<string, unknown>;
+  /** True when this editor is a list item's value — its row already provides remove/reorder, so a leaf editor
+   *  (e.g. image) should suppress its own removal affordance to avoid a duplicate delete. */
+  inList?: boolean;
+}
+
+/** A stable id for a new list item (no dots — it becomes an i18n key segment). */
+function newId(): string {
+  const uuid = globalThis.crypto?.randomUUID?.();
+  return (uuid ?? `id-${Date.now()}-${Math.floor(Math.random() * 1e6)}`).replace(
+    /[^a-zA-Z0-9]/g,
+    '',
+  );
+}
+
+function ObjectView({ field, value, onChange, path, locale }: ViewProps) {
+  const cfg = field.cfg as { children: Record<string, FieldDecl>; group?: boolean };
+  const obj = (value ?? {}) as Record<string, unknown>;
+  // A `group` object renders boxed (muted bg, rounded) to show its fields belong together — lighter than a
+  // card, and only opt-in (the section root + plain objects stay flat). Children pass `obj` as siblings so
+  // leaf editors can read each other (e.g. slug-from-title).
+  return (
+    <div className={cn('flex flex-col gap-3', cfg.group && 'rounded-md bg-muted/40 p-3')}>
+      {Object.entries(cfg.children).map(([k, child]) => {
+        if (child.visible && !child.visible(obj)) return null;
+        return (
+          // A div (not a label): a child may be a composite (object/list/union), not a single control.
+          <div key={k} className="flex flex-col gap-1 text-sm">
+            <span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+              {child.label ?? k}
+            </span>
+            <FieldView
+              field={child}
+              value={obj[k]}
+              path={[...path, k]}
+              locale={locale}
+              siblings={obj}
+              onChange={(v) => onChange({ ...obj, [k]: v })}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+interface ListItem {
+  _id: string;
+  value: unknown;
+}
+
+/** A card title must be plain text. Blank out anything that looks like a serialized rich-text document (the
+ *  stored Slate JSON) so a richtext field used as a title degrades to "(empty)" rather than leaking raw JSON. */
+function plainTitle(s: string): string {
+  const t = s.trim();
+  return t.startsWith('[{') || t.startsWith('{"') ? '' : t;
+}
+
+/** The label shown on a collapsed item: the schema's `itemTitle(value)`, else a heuristic (a string item is
+ *  its own title; an object's title/name/label field), else '' (rendered as "(empty)"). */
+function itemTitleOf(cfg: { itemTitle?: (value: unknown) => string }, value: unknown): string {
+  if (cfg.itemTitle) {
+    try {
+      const t = cfg.itemTitle(value);
+      return typeof t === 'string' ? plainTitle(t) : '';
+    } catch {
+      return '';
+    }
+  }
+  if (typeof value === 'string') return plainTitle(value);
+  if (value && typeof value === 'object') {
+    for (const k of ['title', 'name', 'label', 'heading']) {
+      const v = (value as Record<string, unknown>)[k];
+      if (typeof v === 'string' && plainTitle(v)) return plainTitle(v);
+    }
+  }
+  return '';
+}
+
+/** The insertion indicator while dragging — a primary line at the top or bottom edge of the hovered item
+ *  (mirrors the rich-text editor's block drop line). The item wrapper is `relative`. */
+function DropLine({ pos }: { pos: 'top' | 'bottom' }) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-x-0 z-10 h-0.5 bg-primary/60',
+        pos === 'top' ? '-top-px' : '-bottom-px',
+      )}
+    />
+  );
+}
+
+function ListView({ field, value, onChange, path, locale }: ViewProps) {
+  const cfg = field.cfg as { item: FieldDecl; itemTitle?: (value: unknown) => string };
+  const item = cfg.item;
+  // Composite items (object/union/list) get a collapsible card with a title; scalar items (text/number/…)
+  // get a compact draggable row — collapsing a single input would be pointless.
+  const composite = fieldType(item.type).kind !== 'leaf';
+  const items = ((value ?? { items: [] }) as { items: ListItem[] }).items ?? [];
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [drop, setDrop] = useState<{ index: number; pos: 'top' | 'bottom' } | null>(null);
+  // Polite live region — keyboard reorder + removal are otherwise silent for screen-reader users.
+  const [announce, setAnnounce] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const focusAfterRemove = useRef<number | null>(null);
+
+  // After a remove unmounts the keyed row, move focus to the nearest remaining grip (or "+ Add" if empty)
+  // so keyboard users don't get dumped to the top of the page.
+  useEffect(() => {
+    if (focusAfterRemove.current === null) return;
+    const idx = focusAfterRemove.current;
+    focusAfterRemove.current = null;
+    const grips = containerRef.current?.querySelectorAll<HTMLButtonElement>(
+      '[data-list-item] button[draggable="true"]',
+    );
+    if (grips?.length) grips[Math.min(idx, grips.length - 1)]?.focus();
+    else containerRef.current?.querySelector<HTMLButtonElement>('button')?.focus();
+  });
+
+  const setItems = (next: ListItem[]) => onChange({ items: next });
+  const add = () => setItems([...items, { _id: newId(), value: fieldType(item.type).empty(item) }]);
+  const removeAt = (i: number) => {
+    setItems(items.filter((_, j) => j !== i));
+    setAnnounce(`Removed item ${i + 1}`);
+    focusAfterRemove.current = i;
+  };
+  const updateAt = (i: number, v: unknown) =>
+    setItems(items.map((x, j) => (j === i ? { ...x, value: v } : x)));
+  const move = (from: number, to: number) => {
+    if (from === to || to < 0 || to >= items.length) return;
+    const copy = [...items];
+    const [moved] = copy.splice(from, 1);
+    if (!moved) return;
+    copy.splice(to, 0, moved);
+    setItems(copy);
+    setAnnounce(`Moved to position ${to + 1} of ${items.length}`);
+  };
+
+  // Split top/bottom by the item's HEADER row (not the whole card) so the indicator tracks the cursor even
+  // when a card is expanded and tall.
+  const posFromEvent = (e: DragEvent<HTMLElement>): 'top' | 'bottom' => {
+    const header = e.currentTarget.querySelector('[data-list-header]') ?? e.currentTarget;
+    const r = header.getBoundingClientRect();
+    return e.clientY < r.top + r.height / 2 ? 'top' : 'bottom';
+  };
+  // Drop-target props for an item wrapper. Active only mid-reorder (dragIndex set), so they never interfere
+  // with editing an open card.
+  const targetProps = (i: number) => ({
+    'data-list-item': '',
+    onDragOver: (e: DragEvent<HTMLElement>) => {
+      if (dragIndex === null) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move'; // reorder, not copy — keeps the cursor badge correct
+      setDrop({ index: i, pos: posFromEvent(e) });
+    },
+    onDrop: (e: DragEvent<HTMLElement>) => {
+      if (dragIndex === null) return;
+      e.preventDefault();
+      const pos = posFromEvent(e);
+      let to = pos === 'bottom' ? i + 1 : i;
+      if (dragIndex < to) to -= 1; // the dragged item leaves first, shifting later indices down
+      move(dragIndex, to);
+      setDragIndex(null);
+      setDrop(null);
+    },
+  });
+
+  const grip = (i: number) => (
+    <button
+      type="button"
+      draggable
+      title="Reorder"
+      aria-label={`Reorder item ${i + 1} of ${items.length} — drag, or use the arrow keys`}
+      aria-keyshortcuts="ArrowUp ArrowDown"
+      className="flex h-7 w-5 shrink-0 cursor-grab items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground active:cursor-grabbing"
+      onDragStart={(e) => {
+        setDragIndex(i);
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', String(i)); // required for Firefox to start the drag
+        const card = e.currentTarget.closest('[data-list-item]');
+        if (card instanceof HTMLElement) e.dataTransfer.setDragImage(card, 16, 16);
+      }}
+      onDragEnd={() => {
+        setDragIndex(null);
+        setDrop(null);
+      }}
+      onKeyDown={(e) => {
+        // Keyboard reordering (drag-and-drop is mouse-only); announce boundaries so it never feels stuck.
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (i === 0) setAnnounce('Already at the top');
+          else move(i, i - 1);
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          if (i === items.length - 1) setAnnounce('Already at the bottom');
+          else move(i, i + 1);
+        }
+      }}
+    >
+      <GripVertical />
+    </button>
+  );
+
+  const remove = (i: number) => (
+    <Button
+      size="sm"
+      variant="ghost"
+      className="shrink-0"
+      onClick={() => removeAt(i)}
+      title="Remove"
+      aria-label={`Remove item ${i + 1}`}
+    >
+      ✕
+    </Button>
+  );
+
+  return (
+    <div ref={containerRef} className="flex flex-col gap-2">
+      <div aria-live="polite" className="sr-only">
+        {announce}
+      </div>
+      {items.map((it, i) => {
+        const dragging = dragIndex === i;
+        const lines = (
+          <>
+            {drop?.index === i && drop.pos === 'top' ? <DropLine pos="top" /> : null}
+            {drop?.index === i && drop.pos === 'bottom' ? <DropLine pos="bottom" /> : null}
+          </>
+        );
+        const body = (
+          <FieldView
+            field={item}
+            value={it.value}
+            path={[...path, it._id]}
+            locale={locale}
+            inList={!composite}
+            onChange={(v) => updateAt(i, v)}
+          />
+        );
+
+        if (composite) {
+          const title = itemTitleOf(cfg, it.value);
+          return (
+            <Collapsible
+              key={it._id}
+              {...targetProps(i)}
+              render={
+                <div
+                  className={cn(
+                    'relative overflow-hidden rounded-lg bg-card text-card-foreground ring-1 ring-foreground/10 transition-opacity',
+                    dragging && 'opacity-50',
+                  )}
+                />
+              }
+            >
+              {lines}
+              <div data-list-header className="flex items-center gap-1 pr-1">
+                {grip(i)}
+                <CollapsibleTrigger className="group flex min-w-0 flex-1 items-center gap-2 py-2 text-left">
+                  <span className="shrink-0 text-muted-foreground text-xs tabular-nums">
+                    #{i + 1}
+                  </span>
+                  <span
+                    className={cn(
+                      'min-w-0 truncate text-sm',
+                      !title && 'text-muted-foreground italic',
+                    )}
+                  >
+                    {title || '(empty)'}
+                  </span>
+                  <Chevron className="ml-auto" />
+                </CollapsibleTrigger>
+                {remove(i)}
+              </div>
+              <CollapsibleContent>
+                <div className="border-t px-3 py-3">{body}</div>
+              </CollapsibleContent>
+            </Collapsible>
+          );
+        }
+
+        // Scalar item — a compact draggable row (no collapse; the input is the whole value).
+        return (
+          <div
+            key={it._id}
+            {...targetProps(i)}
+            className={cn(
+              'relative flex items-start gap-1 transition-opacity',
+              dragging && 'opacity-50',
+            )}
+          >
+            {lines}
+            {grip(i)}
+            <div className="min-w-0 flex-1">{body}</div>
+            {remove(i)}
+          </div>
+        );
+      })}
+      <Button size="sm" variant="secondary" onClick={add}>
+        + Add
+      </Button>
+    </div>
+  );
+}
+
+function UnionView({ field, value, onChange, path, locale }: ViewProps) {
+  const { discriminant, variants } = field.cfg as {
+    discriminant: string;
+    variants: Record<string, FieldDecl>;
+  };
+  const obj = (value ?? {}) as Record<string, unknown>;
+  const keys = Object.keys(variants);
+  const current = obj[discriminant];
+  const vid = typeof current === 'string' && variants[current] ? current : keys[0];
+  const variantDecl = vid ? variants[vid] : undefined;
+  const switchVariant = (next: string) => {
+    const v = variants[next];
+    onChange({
+      [discriminant]: next,
+      ...(v ? (fieldType(v.type).empty(v) as Record<string, unknown>) : {}),
+    });
+  };
+  return (
+    <div className="flex flex-col gap-3">
+      <NativeSelect value={vid ?? ''} onChange={(e) => switchVariant(e.target.value)}>
+        {keys.map((k) => (
+          <NativeSelectOption key={k} value={k}>
+            {variants[k]?.label ?? k}
+          </NativeSelectOption>
+        ))}
+      </NativeSelect>
+      {variantDecl ? (
+        <ObjectView
+          field={variantDecl}
+          value={obj}
+          onChange={onChange}
+          path={path}
+          locale={locale}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/** Render any field schema node into editing UI. */
+export function FieldView(props: ViewProps) {
+  const kind = fieldType(props.field.type).kind;
+  if (kind === 'object') return <ObjectView {...props} />;
+  if (kind === 'list') return <ListView {...props} />;
+  if (kind === 'union') return <UnionView {...props} />;
+  const Editor = getEditor(props.field.type);
+  if (!Editor) {
+    return (
+      <div className="text-destructive text-xs">No editor for field type: {props.field.type}</div>
+    );
+  }
+  return (
+    <Editor
+      value={props.value}
+      onChange={props.onChange}
+      path={props.path}
+      locale={props.locale}
+      field={props.field}
+      siblings={props.siblings}
+      inList={props.inList}
+    />
+  );
+}

package/src/admin/icons.tsx

@@ -0,0 +1,45 @@
+import { cn } from '@saena-io/ui/lib/utils';
+
+// Small inline SVG icons for the admin form chrome (no icon-pack dependency in @saena-io/content — the React-free
+// core stays light; @saena-io/ui owns hugeicons). Kept here so the section panel and the form engine share them.
+
+/** A chevron that rotates when its collapsible trigger is expanded — place inside a `group` trigger that
+ *  carries `aria-expanded` (base-ui CollapsibleTrigger). */
+export function Chevron({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={cn(
+        'size-4 shrink-0 transition-transform group-aria-expanded:rotate-180',
+        className,
+      )}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+/** A six-dot vertical grip — the drag handle, mirroring the rich-text editor's block handle. */
+export function GripVertical({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      className={cn('size-4 shrink-0', className)}
+    >
+      <circle cx="9" cy="6" r="1.6" />
+      <circle cx="15" cy="6" r="1.6" />
+      <circle cx="9" cy="12" r="1.6" />
+      <circle cx="15" cy="12" r="1.6" />
+      <circle cx="9" cy="18" r="1.6" />
+      <circle cx="15" cy="18" r="1.6" />
+    </svg>
+  );
+}