@pramen/cms-editor 0.0.47 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {

package/src/api.ts

@@ -2,6 +2,7 @@
 // same transport shape as @pramen/admin's api.ts. Config is persisted in localStorage.
 
 import type { AssembledPage, AuditEntry, BlockType, ContentType, Media, Page } from "./types";
+import type { RpcInput } from "./types";
 
 export interface Config {
   baseUrl: string;
@@ -72,20 +73,21 @@ export class Api {
   }
 
   /** Call a CMS RPC handler. Throws ApiError on a non-`ok` envelope. */
-  async call<T = unknown>(name: string, input?: unknown): Promise<T> {
+  async call<T = unknown>(name: string, input?: RpcInput): Promise<T> {
     // Expired token: hand off to sign-in instead of firing a request that will 403 into an
     // error banner. The returned promise never settles — navigation is already underway.
     if (this.onExpired && this.cfg.token && isTokenExpired(this.cfg.token)) {
       this.onExpired();
       return new Promise<T>(() => {});
     }
+    const headers = new Headers({
+      "content-type": "application/json",
+      "x-pramen-tenant": this.cfg.tenant || "main",
+    });
+    if (this.cfg.token) headers.set("authorization", `Bearer ${this.cfg.token}`);
     const res = await fetch(`${this.base()}/rpc/${name}`, {
       method: "POST",
-      headers: {
-        "content-type": "application/json",
-        "x-pramen-tenant": this.cfg.tenant || "main",
-        ...(this.cfg.token ? { authorization: `Bearer ${this.cfg.token}` } : {}),
-      },
+      headers,
       body: JSON.stringify(input ?? {}),
     });
     let body: { ok?: boolean; result?: unknown; error?: string; code?: string };

package/src/app-context.tsx

@@ -6,7 +6,7 @@
 import { Button, Input } from "@podoba/react";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Api, clearConfig, isTokenExpired, loadConfig, saveConfig, type Config } from "./api";
-import type { CollectionMeta } from "./types";
+import type { CollectionMeta, JsonValue } from "./types";
 
 declare global {
   interface Window {
@@ -42,7 +42,7 @@ function redirectToSignIn(): void {
 export interface Me {
   userId?: string;
   roles?: string[];
-  [k: string]: unknown;
+  [k: string]: JsonValue | undefined;
 }
 
 interface AppContextValue {

package/src/components.tsx

@@ -5,10 +5,10 @@
 import { Button, Heading, Input, ModalDialog, ModalOverlay, ModalSurface, Textarea } from "@podoba/react";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { Api, ApiError } from "./api";
-import { FieldForm } from "./fields";
+import { FieldForm, slugify } from "./fields";
 import type { Config } from "./api";
 import type { Me } from "./app-context";
-import type { AssembledPage, AuditEntry, BlockType, CollectionMeta, ContentType, FieldDefinition, Media, Page, RegionDefinition, RenderedBlock } from "./types";
+import type { AssembledPage, AuditEntry, BlockType, CollectionMeta, ContentType, FieldDefinition, FieldValues, Media, Page, RegionDefinition, RenderedBlock } from "./types";
 
 export type InspectorTab = "settings" | "seo" | "workflow" | "i18n" | "audit";
 export const INSPECTOR_TABS: InspectorTab[] = ["settings", "seo", "workflow", "i18n", "audit"];
@@ -201,7 +201,7 @@ function cellText(v: unknown): string {
 const COLLECTION_PAGE_SIZE = 50;
 
 export function CollectionList({ api, def, onOpen, onNew, onError }: { api: Api; def: CollectionMeta; onOpen: (id: string) => void; onNew: () => void; onError: (s: string) => void }) {
-  const [rows, setRows] = useState<Record<string, unknown>[]>([]);
+  const [rows, setRows] = useState<FieldValues[]>([]);
   const [offset, setOffset] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -210,7 +210,7 @@ export function CollectionList({ api, def, onOpen, onNew, onError }: { api: Api;
     (off: number) => {
       setLoading(true);
       return api
-        .call<Record<string, unknown>[]>("collectionList", { collection: def.slug, limit: COLLECTION_PAGE_SIZE, offset: off })
+        .call<FieldValues[]>("collectionList", { collection: def.slug, limit: COLLECTION_PAGE_SIZE, offset: off })
         .then((r) => {
           setRows((prev) => (off === 0 ? r : [...prev, ...r]));
           // A full page means there is probably more; a short one is definitely the end.
@@ -267,7 +267,7 @@ export function CollectionList({ api, def, onOpen, onNew, onError }: { api: Api;
 
 export function CollectionEditor({ api, def, id, onSaved, onDeleted, onBack, onError }: { api: Api; def: CollectionMeta; id: string | null; onSaved: () => void; onDeleted: () => void; onBack: () => void; onError: (s: string) => void }) {
   const isNew = id === null;
-  const [values, setValues] = useState<Record<string, unknown>>({});
+  const [values, setValues] = useState<FieldValues>({});
   const [loading, setLoading] = useState(!isNew);
   const [missing, setMissing] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -278,7 +278,7 @@ export function CollectionEditor({ api, def, id, onSaved, onDeleted, onBack, onE
     let live = true;
     setLoading(true);
     setMissing(false);
-    api.call<Record<string, unknown> | null>("collectionGet", { collection: def.slug, id })
+    api.call<FieldValues | null>("collectionGet", { collection: def.slug, id })
       .then((row) => { if (!live) return; if (row) setValues(row); else setMissing(true); })
       .catch((e) => onError(errMsg(e)))
       .finally(() => { if (live) setLoading(false); });
@@ -296,7 +296,7 @@ export function CollectionEditor({ api, def, id, onSaved, onDeleted, onBack, onE
       } else {
         // Editing: stay on the form. Reflect the persisted row the update echoes back (server
         // defaults / normalization applied) and flash a confirmation instead of navigating.
-        const updated = await api.call<Record<string, unknown>>("collectionUpdate", { collection: def.slug, id, values });
+        const updated = await api.call<FieldValues>("collectionUpdate", { collection: def.slug, id, values });
         if (updated) setValues(updated);
         setOk(true);
         setTimeout(() => setOk(false), 1200);
@@ -427,7 +427,7 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
     });
     try {
       const { block, placement } = await api.call<{
-        block: { id: string; title?: string | null; fields?: Record<string, unknown> | null };
+        block: { id: string; title?: string | null; fields?: FieldValues | null };
         placement: { id: string; isShared?: boolean | number };
       }>("addBlock", { pageId: page.id, blockTypeSlug: slug, region, fields: {} });
       const rb: RenderedBlock = {
@@ -470,7 +470,7 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
 
   // Patch a block's raw fields into local state after an inline save — keeps the collapsed
   // preview fresh without a full reload (which would remount every editor + lose caret/focus).
-  const patchBlockFields = useCallback((placementId: string, fields: Record<string, unknown>) => {
+  const patchBlockFields = useCallback((placementId: string, fields: FieldValues) => {
     setAssembled((prev) => {
       if (!prev) return prev;
       const next: Record<string, RenderedBlock[]> = {};
@@ -539,7 +539,7 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
             not in the inspector. For a content type with no regions (a fixed layout, all
             of it page fields) this is the entire editor; the canvas is never empty. */}
         {pageSchema.length ? (
-          <PageFields api={api} page={page} schema={pageSchema} initialFields={(assembled?.page.fields as Record<string, unknown>) ?? {}} onDirtyChange={reportDirty} onError={setErr} />
+          <PageFields api={api} page={page} schema={pageSchema} initialFields={(assembled?.page.fields as FieldValues) ?? {}} onDirtyChange={reportDirty} onError={setErr} />
         ) : null}
         {regions.map((r) => {
           const blocks = assembled?.regions[r.name] ?? [];
@@ -611,7 +611,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
   isLast: boolean;
   onMove: (dir: number) => void;
   onRemove: () => void;
-  onPatch: (placementId: string, fields: Record<string, unknown>) => void;
+  onPatch: (placementId: string, fields: FieldValues) => void;
   onDirtyChange: (placementId: string, dirty: boolean) => void;
   onError: (s: string) => void;
   dragging: boolean;
@@ -621,7 +621,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
   onDropBlock: () => void;
   onDragEndBlock: () => void;
 }) {
-  const [fields, setFields] = useState<Record<string, unknown> | null>(null);
+  const [fields, setFields] = useState<FieldValues | null>(null);
   const [collapsed, setCollapsed] = useState(false);
   const [saveState, setSaveState] = useState<"idle" | "saving" | "saved">("idle");
   const saved = useRef<string>(""); // JSON of the last-persisted fields — the dirty baseline
@@ -635,7 +635,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
   useEffect(() => {
     if (block.pending) { setFields({}); saved.current = "{}"; return; }
     let alive = true;
-    api.call<{ fields?: Record<string, unknown> }>("getBlock", { blockId }).then((b) => {
+    api.call<{ fields?: FieldValues }>("getBlock", { blockId }).then((b) => {
       if (!alive) return;
       const f = b?.fields ?? {};
       setFields(f);
@@ -680,7 +680,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
     return () => clearTimeout(t);
   }, [fields, block.pending]);
 
-  const change = (next: Record<string, unknown>) => setFields(next);
+  const change = (next: FieldValues) => setFields(next);
 
   // Report dirty state up (for the editor's leave/unload guard); clear it on unmount so a
   // removed block never leaves a stale "unsaved" flag behind.
@@ -891,8 +891,8 @@ function PageMeta({ api, page, onSaved, onError }: { api: Api; page: Page; onSav
 }
 
 /** The page's own FIELDS — its content. Rendered in the canvas, at full width. */
-function PageFields({ api, page, schema, initialFields, onDirtyChange, onError }: { api: Api; page: Page; schema: FieldDefinition[]; initialFields: Record<string, unknown>; onDirtyChange: (id: string, dirty: boolean) => void; onError: (s: string) => void }) {
-  const [fields, setFields] = useState<Record<string, unknown>>(initialFields);
+function PageFields({ api, page, schema, initialFields, onDirtyChange, onError }: { api: Api; page: Page; schema: FieldDefinition[]; initialFields: FieldValues; onDirtyChange: (id: string, dirty: boolean) => void; onError: (s: string) => void }) {
+  const [fields, setFields] = useState<FieldValues>(initialFields);
   const [ok, setOk] = useState(false);
   const [busy, setBusy] = useState(false);
 
@@ -1467,9 +1467,6 @@ export function errMsg(e: unknown): string {
   if (e instanceof ApiError) return e.message;
   return e instanceof Error ? e.message : String(e);
 }
-function slugify(s: string): string {
-  return s.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-}
 /** Strip HTML tags + decode the few entities the WYSIWYG emits, for a clean text preview —
  * so a collapsed rich_text block reads "Test Toakdopwad" instead of "<b>Test</b>&nbsp;…". */
 function plainText(html: string): string {
@@ -1483,7 +1480,7 @@ function plainText(html: string): string {
     .trim();
 }
 /** One-line preview for a collapsed block: the first non-empty string field, tags stripped. */
-function blockPreview(fields: Record<string, unknown>): string {
+function blockPreview(fields: FieldValues): string {
   const first = Object.values(fields).find((v) => typeof v === "string" && v.trim());
   if (typeof first !== "string") return "";
   const text = plainText(first);

package/src/fields.tsx

@@ -3,9 +3,9 @@
 
 import { Button, Heading, Input, ModalDialog, ModalOverlay, ModalSurface, Text, Textarea } from "@podoba/react";
 import { BlockEditor } from "@podoba/react/editor";
-import { useEffect, useState, type DragEvent, type ReactNode } from "react";
+import { useEffect, useRef, useState, type DragEvent, type ReactNode } from "react";
 import type { Api } from "./api";
-import type { FieldDefinition, Media } from "./types";
+import type { FieldDefinition, FieldValue, FieldValues, Media } from "./types";
 
 // Tokenized bare control (podoba's filled-field skin) for the native inputs that
 // don't map cleanly onto a podoba primitive (number/date/select/file).
@@ -147,12 +147,13 @@ function PublishControl({ value, onChange }: { value: string; onChange: (v: stri
   );
 }
 
-export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefinition[]; value: Record<string, unknown>; onChange: (v: Record<string, unknown>) => void; api: Api }) {
-  const set = (name: string, v: unknown) => onChange({ ...value, [name]: v });
+export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefinition[]; value: FieldValues; onChange: (v: FieldValues) => void; api: Api }) {
+  const set = (name: string, v: FieldValue) => onChange({ ...value, [name]: v });
   return (
     <div className="flex flex-col gap-4">
       {schema.map((def) => (
-        <FieldInput key={def.name} def={def} value={value[def.name]} onChange={(v) => set(def.name, v)} api={api} />
+        // `siblings` is only read by field types that derive from another field (slug).
+        <FieldInput key={def.name} def={def} value={value[def.name]} onChange={(v) => set(def.name, v)} api={api} siblings={value} />
       ))}
     </div>
   );
@@ -170,13 +171,13 @@ export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefin
  * accessible-name computation via `aria-labelledby`. Those three go through the bare
  * `CONTROL` skin instead, the same way `number`/`date` already do.
  */
-function FieldInput({ def, value, onChange, api, hideLabelAs }: { def: FieldDefinition; value: unknown; onChange: (v: unknown) => void; api: Api; hideLabelAs?: string }) {
+function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def: FieldDefinition; value: FieldValue; onChange: (v: FieldValue) => void; api: Api; hideLabelAs?: string; siblings?: FieldValues }) {
   const label: ReactNode = hideLabelAs !== undefined ? undefined : (
     <>
       {def.label ?? def.name} {def.required ? <span className="text-danger">*</span> : null}
     </>
   );
-  const asText = (v: unknown) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
+  const asText = (v: FieldValue) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
   switch (def.type) {
     case "text":
     case "url": {
@@ -214,6 +215,16 @@ function FieldInput({ def, value, onChange, api, hideLabelAs }: { def: FieldDefi
           <input className={CONTROL} type={def.type === "date" ? "date" : "datetime-local"} aria-label={hideLabelAs} value={(value as string) ?? ""} onChange={(e) => onChange(e.target.value || null)} />
         </FieldShell>
       );
+    case "slug":
+      return (
+        <SlugField
+          def={def}
+          label={label}
+          value={typeof value === "string" ? value : ""}
+          source={typeof siblings?.[def.from ?? ""] === "string" ? (siblings[def.from ?? ""] as string) : ""}
+          onChange={onChange as (v: string) => void}
+        />
+      );
     case "publish":
       // Deliberately NOT FieldShell: it wraps children in a <label>, whose implicit
       // control would be PublishControl's first <button> ("Publish now") — clicking the
@@ -247,12 +258,12 @@ function FieldInput({ def, value, onChange, api, hideLabelAs }: { def: FieldDefi
       return (
         <FieldShell label={label}>
           <div className="rounded-lg border border-border bg-surface-muted p-3.5">
-            <FieldForm schema={def.fields ?? []} value={(value as Record<string, unknown>) ?? {}} onChange={onChange as (v: Record<string, unknown>) => void} api={api} />
+            <FieldForm schema={def.fields ?? []} value={(value as FieldValues) ?? {}} onChange={onChange as (v: FieldValues) => void} api={api} />
           </div>
         </FieldShell>
       );
     case "repeater":
-      return <Repeater def={def} value={(value as Record<string, unknown>[]) ?? []} onChange={onChange as (v: unknown[]) => void} api={api} label={label} />;
+      return <Repeater def={def} value={(value as FieldValues[]) ?? []} onChange={onChange as (v: FieldValues[]) => void} api={api} label={label} />;
     default:
       return null;
   }
@@ -281,7 +292,7 @@ export function RichText({ value, onChange }: { value: string; onChange: (v: str
  * Reordering is drag-and-drop from the ⠿ handle, mirroring the block canvas. ↑/↓ stay,
  * because dragging is unavailable to keyboard users and awkward on touch.
  */
-function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: Record<string, unknown>[]; onChange: (v: unknown[]) => void; api: Api; label: ReactNode }) {
+function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: FieldValues[]; onChange: (v: FieldValues[]) => void; api: Api; label: ReactNode }) {
   const items = Array.isArray(value) ? value : [];
   const fields = def.fields ?? [];
   // One field, and not itself a tall control — the case where the card is pure overhead.
@@ -289,7 +300,7 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
 
   const [drag, setDrag] = useState<{ from: number; over: number } | null>(null);
 
-  const upd = (i: number, v: Record<string, unknown>) => onChange(items.map((it, j) => (j === i ? v : it)));
+  const upd = (i: number, v: FieldValues) => onChange(items.map((it, j) => (j === i ? v : it)));
   const add = () => onChange([...items, {}]);
   const del = (i: number) => onChange(items.filter((_, j) => j !== i));
   const moveTo = (from: number, to: number) => {
@@ -311,7 +322,7 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
    * instead titled every slide with the uuid of its image, which is worse than no summary
    * at all — the point is to tell two rows apart at a glance.
    */
-  const summarise = (it: Record<string, unknown>): string => {
+  const summarise = (it: FieldValues): string => {
     const readable = ["text", "textarea", "richtext", "select", "url"];
     for (const f of fields) {
       if (!readable.includes(f.type)) continue;
@@ -431,10 +442,110 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
   );
 }
 
+/**
+ * Turn a title into a URL segment.
+ *
+ * Diacritics are decomposed and their marks dropped, so Czech text transliterates the way
+ * a reader expects — "Vrátnice výrobního závodu" becomes "vratnice-vyrobniho-zavodu"
+ * rather than losing the accented letters entirely.
+ */
+export function slugify(input: string): string {
+  // Trailing trim AFTER the length cap — slicing a hyphen-terminated prefix out of a long
+  // title would otherwise leave the slug ending in "-".
+  return slugifyInput(input).replace(/-+$/, "");
+}
+
+/**
+ * Per-keystroke normalization: everything `slugify` does EXCEPT the trailing-hyphen trim.
+ *
+ * The input is controlled, so anything this strips can never be typed at all — trimming the
+ * trailing "-" here would make a separator unenterable (type "my-", `slugify` hands back
+ * "my", the value prop never changes, React restores the DOM). The full `slugify` runs on
+ * blur instead, once the word is finished.
+ */
+function slugifyInput(input: string): string {
+  return input
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, "-")
+    .replace(/-{2,}/g, "-")
+    .replace(/^-+/, "")
+    .slice(0, 80);
+}
+
+/**
+ * A slug that follows another field while it is untouched.
+ *
+ * It deliberately stops following the moment the value differs from what it last derived
+ * — which includes every row that already has a slug. Renaming a published project must
+ * not silently change its URL and break every link to it; "Generate from …" is there for
+ * when that IS what you want.
+ */
+function SlugField({ def, label, value, source, onChange }: { def: FieldDefinition; label: ReactNode; value: string; source: string; onChange: (v: string) => void }) {
+  // What this control last wrote. While the field still holds it, the field is "untouched"
+  // and free to follow; anything else means a human typed it.
+  const derived = useRef<string | null>(null);
+  // Whether a human has edited this field. Once true it stays true for the session —
+  // emptying the field is an edit, not an invitation to start following again.
+  const touched = useRef(false);
+  // The source we last saw. Seeded on the first run so merely OPENING a row never derives:
+  // a row saved before this field existed has a filled title and an empty slug, and an
+  // onChange there marks the block dirty and autosaves something nobody asked for. Only a
+  // real change to the source field derives; "Generate from …" covers the rest.
+  const lastSource = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!def.from) return;
+    const prev = lastSource.current;
+    lastSource.current = source;
+    if (prev === null || prev === source || !source) return;
+    if (touched.current) return;
+    // Follow only an empty field or one still holding our own last derivation — an existing
+    // slug is a live URL, and renaming its page must not break every link to it.
+    if (value !== "" && value !== derived.current) return;
+    const next = slugify(source);
+    if (next === value) return;
+    derived.current = next;
+    onChange(next);
+  }, [source, value, def.from, onChange]);
+
+  const suggestion = source ? slugify(source) : "";
+  const canGenerate = Boolean(suggestion) && suggestion !== value;
+
+  return (
+    <FieldShell label={label}>
+      <input
+        className={CONTROL}
+        value={value}
+        onChange={(e) => {
+          touched.current = true; // typed by hand — stop following from here on
+          derived.current = null;
+          onChange(slugifyInput(e.target.value));
+        }}
+        onBlur={() => {
+          const clean = slugify(value);
+          if (clean !== value) onChange(clean);
+        }}
+        placeholder={suggestion}
+      />
+      {canGenerate ? (
+        <button
+          type="button"
+          className="self-start text-caption text-fg-subtle underline hover:text-fg"
+          onClick={() => { derived.current = suggestion; touched.current = false; onChange(suggestion); }}
+        >
+          Generate from {def.from}: {suggestion}
+        </button>
+      ) : null}
+    </FieldShell>
+  );
+}
+
 // A `select` field. Static `options` render as-is; when `optionsFrom` is set, the options are
 // fetched once from that query handler (returns `{ value, label }[]`) — e.g. a live list of
 // campaigns — so the editor never has to hardcode or copy identifiers by hand.
-function SelectField({ def, value, onChange, api, ariaLabel }: { def: FieldDefinition; value: string | null; onChange: (v: unknown) => void; api: Api; ariaLabel?: string }) {
+function SelectField({ def, value, onChange, api, ariaLabel }: { def: FieldDefinition; value: string | null; onChange: (v: FieldValue) => void; api: Api; ariaLabel?: string }) {
   const [dyn, setDyn] = useState<{ value: string; label: string }[] | null>(null);
   const from = def.optionsFrom;
   useEffect(() => {

package/src/types.ts

@@ -2,6 +2,24 @@
 // @pramen/cms) so the editor stays a self-contained browser app with no server-package
 // dependency — it speaks to the CMS purely over HTTP.
 
+/** Any JSON value — the wire form of everything the CMS stores. */
+export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
+
+/** One authored field value. Mirrors `FieldValue` in @pramen/cms: a `"media"` field
+ * arrives resolved to a `Media`, and `group`/`repeater` fields nest further bags. */
+export type FieldValue = JsonValue | Media | FieldValues | FieldValue[];
+
+/** A block / collection / page `fields` bag — field name -> authored value. */
+export interface FieldValues {
+  [field: string]: FieldValue;
+}
+
+/** The JSON body of an editor RPC call: an object of values, any of which may be
+ * omitted (an absent key is simply not sent). */
+export interface RpcInput {
+  [key: string]: FieldValue | undefined;
+}
+
 export type FieldType =
   | "text"
   | "textarea"
@@ -13,6 +31,8 @@ export type FieldType =
   | "datetime"
   /** A publication timestamp — rendered as publish-now / schedule / unpublish. */
   | "publish"
+  /** A URL segment, derived from the field named by `from` while it is untouched. */
+  | "slug"
   | "media"
   | "select"
   | "repeater"
@@ -23,7 +43,7 @@ export interface FieldDefinition {
   label?: string;
   type: FieldType;
   required?: boolean;
-  default?: unknown;
+  default?: FieldValue;
   fields?: FieldDefinition[];
   min?: number;
   max?: number;
@@ -32,6 +52,8 @@ export interface FieldDefinition {
    * return `{ value, label }[]`. Lets a select offer live data (e.g. existing campaigns)
    * instead of a static list. Takes precedence over `options`. */
   optionsFrom?: string;
+  /** For `slug`: the sibling field this one is derived from (e.g. `"title"`). */
+  from?: string;
 }
 
 export interface RegionDefinition {
@@ -43,7 +65,7 @@ export interface RegionDefinition {
 export interface DefaultBlockDefinition {
   region: string;
   blockTypeSlug: string;
-  fields?: Record<string, unknown>;
+  fields?: FieldValues;
 }
 
 export interface BlockType {
@@ -90,7 +112,7 @@ export interface Page {
   slug: string;
   status: string;
   locale: string;
-  fields?: Record<string, unknown> | null; // content-type-level structured data (fieldsSchema)
+  fields?: FieldValues | null; // content-type-level structured data (fieldsSchema)
   translationGroupId?: string | null;
   metaTitle?: string | null;
   metaDescription?: string | null;
@@ -118,13 +140,13 @@ export interface RenderedBlock {
   block_id: string; // block instance id (edit)
   block_type: string;
   title: string | null;
-  fields: Record<string, unknown>;
+  fields: FieldValues;
   is_shared: boolean;
   pending?: boolean; // optimistic placeholder — not yet persisted (temp ids, no getBlock)
 }
 
 export interface AssembledPage {
-  page: Page & { translations?: { locale: string; slug: string }[]; seo?: Record<string, unknown> };
+  page: Page & { translations?: { locale: string; slug: string }[]; seo?: FieldValues };
   regions: Record<string, RenderedBlock[]>;
 }