@saena-io/content 0.1.0

package/src/admin/collection-manager.tsx

@@ -0,0 +1,328 @@
+import { Page } from '@saena-io/ui/admin';
+import { Button } from '@saena-io/ui/components/button';
+import { Input } from '@saena-io/ui/components/input';
+import { RichTextDndProvider } from '@saena-io/ui/components/rich-text/rich-text-editor';
+import { useEffect, useId, useRef, useState } from 'react';
+import { type CollectionDef, getCollection } from '../define';
+import { fieldEmpty, slugify, softSlugify } from '../field';
+import { type CollectionItemDto, contentClient } from './client';
+import './editors'; // registers the built-in field-type editors (shared with the section form)
+import { FieldView } from './form-engine';
+import { GripVertical } from './icons';
+
+// @saena-io/content/admin — the collection MANAGER (ADR-0011): one screen per routed collection. Lists its entries
+// (drag-to-reorder, edit, delete) and edits one entry at a time with the same generated form the sections use.
+// Structure is code (the schema from ./define); this only manages the editable entries over the content API.
+
+/** A human label for an entry row — the first stringy title-ish field of the hydrated value, else the slug. */
+function entryTitle(value: unknown, slug: string): string {
+  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' && v.trim()) return v;
+    }
+  }
+  return slug || '(untitled)';
+}
+
+/** The manager for one collection: the entry list, or the single-entry editor when creating/editing. */
+function CollectionScreen({ collectionId }: { collectionId: string }) {
+  const def = getCollection(collectionId);
+  const [items, setItems] = useState<CollectionItemDto[] | null>(null);
+  // null = list view; { id } edits an entry; {} creates a new one.
+  const [editing, setEditing] = useState<{ id?: string } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = () => {
+    setError(null);
+    contentClient.collection
+      .list(collectionId)
+      .then(setItems)
+      .catch((e) => setError(String(e)));
+  };
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reload the list when the collection changes.
+  useEffect(refresh, [collectionId]);
+
+  if (!def) {
+    return (
+      <Page title="Collections" className="p-6">
+        <p className="text-destructive text-sm">Unknown collection: {collectionId}</p>
+      </Page>
+    );
+  }
+
+  if (editing) {
+    return (
+      <CollectionItemEditor
+        def={def}
+        id={editing.id}
+        onDone={() => {
+          setEditing(null);
+          refresh();
+        }}
+        onCancel={() => setEditing(null)}
+      />
+    );
+  }
+
+  return (
+    <Page title={def.label} className="gap-4 p-6">
+      <div className="flex items-center justify-between">
+        <p className="text-muted-foreground text-sm">
+          {items ? `${items.length} ${items.length === 1 ? 'entry' : 'entries'}` : 'Loading…'}
+        </p>
+        <Button size="sm" onClick={() => setEditing({})}>
+          + New entry
+        </Button>
+      </div>
+      {error ? <p className="text-destructive text-sm">{error}</p> : null}
+      {items ? (
+        <CollectionList
+          collectionId={collectionId}
+          items={items}
+          onChange={setItems}
+          onEdit={(id) => setEditing({ id })}
+          onError={setError}
+        />
+      ) : null}
+    </Page>
+  );
+}
+
+/** The reorderable entry list. Drag a row by its grip to reorder (persisted via `reorder`); per-row Edit +
+ *  Delete (with an inline confirm). Reorder is optimistic — the new order is sent, the list reverts on error. */
+function CollectionList({
+  collectionId,
+  items,
+  onChange,
+  onEdit,
+  onError,
+}: {
+  collectionId: string;
+  items: CollectionItemDto[];
+  onChange: (items: CollectionItemDto[]) => void;
+  onEdit: (id: string) => void;
+  onError: (msg: string) => void;
+}) {
+  const dragId = useRef<string | null>(null);
+  const [confirming, setConfirming] = useState<string | null>(null);
+
+  if (items.length === 0) {
+    return (
+      <p className="rounded-md border border-dashed p-6 text-center text-muted-foreground text-sm">
+        No entries yet. Use “New entry” to add one.
+      </p>
+    );
+  }
+
+  const move = (fromId: string, toId: string) => {
+    if (fromId === toId) return;
+    const from = items.findIndex((i) => i.id === fromId);
+    const to = items.findIndex((i) => i.id === toId);
+    if (from < 0 || to < 0) return;
+    const next = [...items];
+    const [moved] = next.splice(from, 1);
+    if (!moved) return;
+    next.splice(to, 0, moved);
+    const prev = items;
+    onChange(next); // optimistic
+    contentClient.collection
+      .reorder(
+        collectionId,
+        next.map((i) => i.id),
+      )
+      .catch((e) => {
+        onChange(prev); // revert
+        onError(String(e));
+      });
+  };
+
+  const remove = (id: string) => {
+    const prev = items;
+    onChange(items.filter((i) => i.id !== id));
+    setConfirming(null);
+    contentClient.collection.delete(collectionId, id).catch((e) => {
+      onChange(prev);
+      onError(String(e));
+    });
+  };
+
+  return (
+    <ul className="flex flex-col gap-1.5">
+      {items.map((item) => (
+        <li
+          key={item.id}
+          data-collection-row
+          onDragOver={(e) => {
+            if (dragId.current) e.preventDefault();
+          }}
+          onDrop={(e) => {
+            e.preventDefault();
+            if (dragId.current) move(dragId.current, item.id);
+            dragId.current = null;
+          }}
+          className="flex items-center gap-3 rounded-md border border-input bg-input/20 px-3 py-2 dark:bg-input/30"
+        >
+          <button
+            type="button"
+            aria-label="Drag to reorder"
+            draggable
+            onDragStart={() => {
+              dragId.current = item.id;
+            }}
+            onDragEnd={() => {
+              dragId.current = null;
+            }}
+            className="cursor-grab text-muted-foreground hover:text-foreground active:cursor-grabbing"
+          >
+            <GripVertical />
+          </button>
+          <div className="flex min-w-0 flex-1 flex-col">
+            <span className="truncate font-medium text-sm">
+              {entryTitle(item.value, item.slug)}
+            </span>
+            <span className="truncate font-mono text-muted-foreground text-xs">/{item.slug}</span>
+          </div>
+          {confirming === item.id ? (
+            <>
+              <span className="text-muted-foreground text-xs">Delete?</span>
+              <Button type="button" size="sm" variant="destructive" onClick={() => remove(item.id)}>
+                Confirm
+              </Button>
+              <Button type="button" size="sm" variant="ghost" onClick={() => setConfirming(null)}>
+                Cancel
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button type="button" size="sm" variant="outline" onClick={() => onEdit(item.id)}>
+                Edit
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                onClick={() => setConfirming(item.id)}
+              >
+                Delete
+              </Button>
+            </>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/** Create or edit one entry: a slug input (auto-derived from the configured field while untouched on create) +
+ *  the generated form for the collection's schema. */
+function CollectionItemEditor({
+  def,
+  id,
+  onDone,
+  onCancel,
+}: {
+  def: CollectionDef;
+  id?: string;
+  onDone: () => void;
+  onCancel: () => void;
+}) {
+  const isNew = id === undefined;
+  const [value, setValue] = useState<unknown>(() => (isNew ? fieldEmpty(def.schema) : undefined));
+  const [slug, setSlug] = useState('');
+  const [slugTouched, setSlugTouched] = useState(!isNew);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load an existing entry's editor value (storage shape, source text filled).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: load once per entry id.
+  useEffect(() => {
+    if (isNew) return;
+    let live = true;
+    contentClient.collection
+      .getForEdit(def.id, id)
+      .then((item) => {
+        if (!live || !item) return;
+        setValue(item.value);
+        setSlug(item.slug);
+      })
+      .catch((e) => live && setError(String(e)));
+    return () => {
+      live = false;
+    };
+  }, [def.id, id]);
+
+  // Auto-derive the slug from the configured source field until the user edits it (create only).
+  const fromField = def.slug?.from;
+  const source =
+    fromField && value && typeof value === 'object'
+      ? (value as Record<string, unknown>)[fromField]
+      : undefined;
+  useEffect(() => {
+    if (!slugTouched && typeof source === 'string') setSlug(slugify(source));
+  }, [source, slugTouched]);
+  const slugId = useId();
+
+  const save = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      await contentClient.collection.save({ collection: def.id, id, slug, value });
+      onDone();
+    } catch (e) {
+      setError(String(e));
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Page title={`${isNew ? 'New' : 'Edit'} ${def.label} entry`} className="min-h-0">
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+        <div className="flex flex-col gap-4 px-6 py-4">
+          <div className="flex max-w-md flex-col gap-1.5 text-sm">
+            <label htmlFor={slugId} className="font-medium text-foreground">
+              Slug (URL)
+            </label>
+            <Input
+              id={slugId}
+              value={slug}
+              placeholder="entry-slug"
+              onChange={(e) => {
+                setSlugTouched(true);
+                setSlug(softSlugify(e.target.value));
+              }}
+              onBlur={() => setSlug((s) => slugify(s))}
+            />
+          </div>
+          {value === undefined ? (
+            <p className="text-muted-foreground text-sm">Loading…</p>
+          ) : (
+            <RichTextDndProvider>
+              <FieldView
+                field={def.schema}
+                value={value}
+                onChange={setValue}
+                path={[]}
+                locale="source"
+              />
+            </RichTextDndProvider>
+          )}
+        </div>
+      </div>
+      <footer className="flex items-center justify-end gap-2 border-t px-6 py-3">
+        {error ? <span className="mr-auto text-destructive text-xs">{error}</span> : null}
+        <Button variant="outline" size="lg" onClick={onCancel} disabled={saving}>
+          Cancel
+        </Button>
+        <Button size="lg" onClick={save} disabled={saving || value === undefined}>
+          {saving ? 'Saving…' : 'Save'}
+        </Button>
+      </footer>
+    </Page>
+  );
+}
+
+/** The screen component a collection route mounts (used by buildContentAdmin). */
+export function CollectionManager({ collectionId }: { collectionId: string }) {
+  return <CollectionScreen collectionId={collectionId} />;
+}

package/src/admin/editors.tsx

@@ -0,0 +1,284 @@
+import { AssetInput } from '@saena-io/ui/components/asset-input';
+import { Button } from '@saena-io/ui/components/button';
+import { FocalPointPicker } from '@saena-io/ui/components/focal-point-picker';
+import { Input } from '@saena-io/ui/components/input';
+import { NativeSelect, NativeSelectOption } from '@saena-io/ui/components/native-select';
+import {
+  Plate,
+  PlateController,
+  RichTextContent,
+  RichTextToolbar,
+  createAiCommandExtension,
+  createAiCopilotExtension,
+  parseRichText,
+  serializeRichText,
+  useRichTextEditor,
+} from '@saena-io/ui/components/rich-text/rich-text-editor';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@saena-io/ui/components/sheet';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { type ImageValue, type LinkValue, slugify, softSlugify } from '../field';
+import { type AdminEditorProps, registerEditor } from './field-registry';
+
+// The built-in field-type editors. Each is the React half of a built-in (../field/builtins.ts) and registers
+// by the same id. Composite types (object/list/union) are rendered structurally by the form engine, not here.
+
+function TextEditor({ value, onChange, field }: AdminEditorProps<string>) {
+  return (
+    <Input
+      value={value ?? ''}
+      placeholder={field.label}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+}
+
+function SlugEditor({ value, onChange, field, siblings }: AdminEditorProps<string>) {
+  const from = (field.cfg as { from?: string } | undefined)?.from;
+  const source = from && siblings ? siblings[from] : undefined;
+  // Auto-derive from the source field until the user edits the slug. touched starts true if a slug already
+  // exists (never clobber a saved slug). Sync only when the source actually CHANGES (the ref makes this
+  // mount-safe + StrictMode-safe — opening a form never mutates/dirties the slug).
+  const [touched, setTouched] = useState(() => !!value);
+  const prevSource = useRef(source);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: syncs on source change; value/onChange are stable.
+  useEffect(() => {
+    if (prevSource.current === source) return;
+    prevSource.current = source;
+    if (!touched && typeof source === 'string') onChange(slugify(source));
+  }, [source, touched]);
+  return (
+    <Input
+      value={value ?? ''}
+      placeholder={field.label}
+      onChange={(e) => {
+        setTouched(true);
+        onChange(softSlugify(e.target.value)); // soft while typing so word boundaries stay typeable
+      }}
+      onBlur={() => {
+        const norm = slugify(value ?? '');
+        if (norm !== (value ?? '')) onChange(norm); // tidy on blur, only if it actually changes
+      }}
+    />
+  );
+}
+
+function RichtextEditor({ value, onChange, path }: AdminEditorProps<string>) {
+  // Initialise the Plate editor once from the loaded value; it owns its state thereafter and reports changes
+  // via onValueChange. The single RichTextDndProvider is mounted at the form root (see ./index.tsx).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: initial value captured once by design.
+  const initial = useMemo(() => parseRichText(value, { plainTextFallback: true }), []);
+  // The AI copilot (ADR-0010): ghost-text autocomplete wired to the shared 'ai' capability via the plugin
+  // dispatch. Degrades to no suggestion when no provider key is configured.
+  const aiCopilot = useMemo(() => createAiCopilotExtension(), []);
+  // The AI command menu (ADR-0010): space / mod+J / toolbar button → streaming generate + edit via the
+  // /api/ai/command route (the shared 'ai' capability, 'command' feature model).
+  const aiCommand = useMemo(() => createAiCommandExtension(), []);
+  const editor = useRichTextEditor({
+    id: `rt-${path.join('.')}`,
+    value: initial,
+    extensions: [aiCopilot, aiCommand],
+  });
+  // One bordered shell (toolbar + content) styled like the other inputs (Input: border-input + bg-input/20),
+  // with a focus ring driven by :focus-within so editing the contenteditable lights the whole field. The
+  // toolbar's own border-b is the internal divider; the content surface is borderless.
+  return (
+    <PlateController>
+      <div className="rounded-md border border-input bg-background transition-[color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30">
+        <RichTextToolbar
+          extensions={[aiCommand]}
+          className="rounded-t-[5px] border-input bg-input/20 dark:bg-input/30"
+        />
+        <Plate editor={editor} onValueChange={({ value: v }) => onChange(serializeRichText(v))}>
+          <RichTextContent placeholder="Write…" className="min-h-40 px-3 py-2" />
+        </Plate>
+      </div>
+    </PlateController>
+  );
+}
+
+function NumberEditor({ value, onChange }: AdminEditorProps<number>) {
+  return (
+    <Input
+      type="number"
+      value={Number.isFinite(value) ? value : 0}
+      onChange={(e) => onChange(e.target.value === '' ? 0 : Number(e.target.value))}
+    />
+  );
+}
+
+function BooleanEditor({ value, onChange, field }: AdminEditorProps<boolean>) {
+  return (
+    <label className="flex items-center gap-2 text-sm">
+      <input type="checkbox" checked={!!value} onChange={(e) => onChange(e.target.checked)} />
+      {field.label ? <span className="text-muted-foreground">{field.label}</span> : null}
+    </label>
+  );
+}
+
+function DateEditor({ value, onChange }: AdminEditorProps<string>) {
+  return <Input type="date" value={value ?? ''} onChange={(e) => onChange(e.target.value)} />;
+}
+
+function SelectEditor({ value, onChange, field }: AdminEditorProps<string>) {
+  const options = ((field.cfg as { options?: string[] } | undefined)?.options ?? []) as string[];
+  return (
+    <NativeSelect value={value ?? ''} onChange={(e) => onChange(e.target.value)}>
+      {options.map((o) => (
+        <NativeSelectOption key={o} value={o}>
+          {o}
+        </NativeSelectOption>
+      ))}
+    </NativeSelect>
+  );
+}
+
+function LinkEditor({ value, onChange, field }: AdminEditorProps<LinkValue>) {
+  const v = value ?? { href: '', label: '' };
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Input
+        className="flex-1"
+        value={v.label}
+        placeholder={field.label ? `${field.label} label` : 'Link label'}
+        onChange={(e) => onChange({ ...v, label: e.target.value })}
+      />
+      <Input
+        className="flex-1"
+        value={v.href}
+        placeholder="https://…"
+        onChange={(e) => onChange({ ...v, href: e.target.value })}
+      />
+    </div>
+  );
+}
+
+// The image field editor (ADR-0009): the inline control stays compact (thumbnail + Edit/Replace/Remove via
+// AssetInput); "Edit" opens a bottom Sheet — the same surface the translations editor uses — holding the large
+// focal-point picker + alt text, so framing/alt get full-width space without leaving the page.
+function ImageEditor({ value, onChange, field, inList }: AdminEditorProps<ImageValue>) {
+  const v = value ?? { ref: null, alt: '' };
+  const guideRatio = (field.cfg as { ratio?: number } | undefined)?.ratio;
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      {/* In a list, the row's ✕ removes the item, so suppress AssetInput's own Remove (no duplicate delete). */}
+      <AssetInput
+        value={v.ref}
+        showRemove={!inList}
+        onEdit={v.ref ? () => setOpen(true) : undefined}
+        onChange={(ref) => onChange({ ...v, ref })}
+      />
+      {v.ref ? (
+        <ImageEditSheet
+          open={open}
+          onOpenChange={setOpen}
+          value={v}
+          onChange={onChange}
+          guideRatio={guideRatio}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function ImageEditSheet({
+  open,
+  onOpenChange,
+  value,
+  onChange,
+  guideRatio,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: ImageValue;
+  onChange: (next: ImageValue) => void;
+  guideRatio?: number;
+}) {
+  const { ref, alt, hotspot } = value;
+  const altId = useId();
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="bottom"
+        showCloseButton={false}
+        className="flex max-h-[88svh] flex-col gap-0 p-0"
+      >
+        <SheetHeader className="flex-row items-center justify-between gap-2 space-y-0 border-b px-4 py-2.5">
+          <SheetTitle className="text-xs">Edit image</SheetTitle>
+          <SheetDescription className="sr-only">
+            Set the focal point and alt text. The focal point stays in frame when the image is
+            cropped to a layout's aspect ratio.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex flex-1 flex-col gap-6 overflow-auto p-4 md:flex-row md:gap-8">
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <span className="font-medium text-foreground text-xs">Focal point</span>
+            <span className="text-muted-foreground text-xs">
+              Drag the dot to the part that must stay in frame when the image is cropped (e.g. a
+              face). Defaults to the centre.
+            </span>
+            {ref ? (
+              <FocalPointPicker
+                src={ref.url}
+                alt={alt}
+                value={hotspot}
+                onChange={(h) => onChange({ ...value, hotspot: h })}
+                guideRatio={guideRatio}
+                className="mt-1"
+              />
+            ) : null}
+          </div>
+          <div className="flex w-full flex-col gap-4 md:max-w-xs">
+            <div className="flex flex-col gap-1.5 text-xs">
+              <label htmlFor={altId} className="font-medium text-foreground">
+                Alt text
+              </label>
+              <Input
+                id={altId}
+                value={alt}
+                placeholder="Describe the image"
+                onChange={(e) => onChange({ ...value, alt: e.target.value })}
+              />
+              <span className="text-muted-foreground">
+                Shown to screen readers and when the image fails to load.
+              </span>
+            </div>
+            {hotspot ? (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="self-start"
+                onClick={() => onChange({ ...value, hotspot: undefined })}
+              >
+                Reset focal point to centre
+              </Button>
+            ) : null}
+          </div>
+        </div>
+        <SheetFooter className="flex-row justify-end gap-2 border-t p-4">
+          <Button type="button" size="sm" onClick={() => onOpenChange(false)}>
+            Done
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+registerEditor('text', TextEditor);
+registerEditor('richtext', RichtextEditor);
+registerEditor('number', NumberEditor);
+registerEditor('boolean', BooleanEditor);
+registerEditor('date', DateEditor);
+registerEditor('select', SelectEditor);
+registerEditor('slug', SlugEditor);
+registerEditor('link', LinkEditor);
+registerEditor('image', ImageEditor);

package/src/admin/field-registry.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { FieldDecl, FieldPath } from '../field';
+
+// The React half of the field-type registry: a field-type id → its admin editor. Built-in editors register on
+// import (./editors); custom field types register their editor the same way. The form engine renders
+// `getEditor(id)` for every leaf field — so generated (built-in) and custom inputs are one mechanism.
+
+export interface AdminEditorProps<S = unknown> {
+  value: S;
+  onChange: (next: S) => void;
+  /** Editing locale (the main/source locale in v1). */
+  locale: string;
+  /** Structural path (for stable keys + unique editor ids). */
+  path: FieldPath;
+  field: FieldDecl;
+  /** The parent object's value — read sibling fields here (e.g. a slug deriving from a sibling `title`). */
+  siblings?: Record<string, unknown>;
+  /** True when this editor is a list item — the list row owns remove/reorder, so suppress an editor's own
+   *  removal affordance (e.g. the image editor hides its Remove to avoid a duplicate delete). */
+  inList?: boolean;
+}
+export type AdminEditor<S = unknown> = (props: AdminEditorProps<S>) => ReactNode;
+
+const editors = new Map<string, AdminEditor>();
+
+/** Register the admin editor for a field-type id (built-in or custom). */
+export function registerEditor<S>(id: string, editor: AdminEditor<S>): void {
+  editors.set(id, editor as AdminEditor);
+}
+
+export function getEditor(id: string): AdminEditor | undefined {
+  return editors.get(id);
+}