@pramen/cms-editor 0.0.46 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "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/components.tsx

@@ -5,7 +5,7 @@
 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";
@@ -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 {

package/src/fields.tsx

@@ -3,7 +3,7 @@
 
 import { Button, Heading, Input, ModalDialog, ModalOverlay, ModalSurface, Text, Textarea } from "@podoba/react";
 import { BlockEditor } from "@podoba/react/editor";
-import { useEffect, useState, 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";
 
@@ -14,35 +14,186 @@ const CONTROL = "h-10 w-full rounded-lg border border-border bg-surface-card px-
 function FieldShell({ label, children }: { label: ReactNode; children: ReactNode }) {
   return (
     <label className="flex w-full flex-col gap-2">
-      <span className="text-sm font-medium text-fg">{label}</span>
+      {/* No label element at all when there is no label — an empty one still occupies a
+          row and, with a required marker, showed a stray asterisk above the control. */}
+      {label === undefined ? null : <span className="text-sm font-medium text-fg">{label}</span>}
       {children}
     </label>
   );
 }
 
+/**
+ * `YYYY-MM-DDTHH:MM` in LOCAL time — what <input type="datetime-local"> shows and expects.
+ *
+ * It is only ever the DISPLAY format. The stored value is always a UTC ISO string,
+ * because the server decides "is this published yet?" by comparing against its own clock:
+ * storing an editor's wall-clock time made "Publish now" in UTC+2 look two hours in the
+ * future, so a row published this way stayed invisible until the clock caught up.
+ *
+ * Returns "" for anything Date can't parse — a legacy or hand-written column value must
+ * not reach the input as `NaN-NaN-NaNTNaN:NaN`, which the browser silently discards.
+ */
+function toLocalInput(value: string): string {
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/** A `datetime-local` string (local wall clock) -> the UTC ISO instant we store. */
+function fromLocalInput(local: string): string | null {
+  const at = new Date(local);
+  return Number.isNaN(at.getTime()) ? null : at.toISOString();
+}
+
+function formatWhen(value: string): string {
+  const at = new Date(value);
+  return Number.isNaN(at.getTime()) ? value : at.toLocaleString();
+}
+
+/**
+ * Re-render once the row crosses from "scheduled" to "published".
+ *
+ * `scheduled` is derived from the clock, so without this a form left open across the
+ * scheduled instant keeps claiming "Scheduled for 14:00" well after 14:00. The timeout is
+ * clamped to the 32-bit setTimeout ceiling — a longer delay overflows and fires
+ * immediately — and `tick` is a dependency so a clamped wait re-arms instead of giving up.
+ */
+function useTickAt(at: number | null): void {
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    if (at === null) return;
+    const ms = at - Date.now();
+    if (ms <= 0) return;
+    const timer = setTimeout(() => setTick((n) => n + 1), Math.min(ms + 1000, 2 ** 31 - 1));
+    return () => clearTimeout(timer);
+  }, [at, tick]);
+}
+
+/**
+ * The three states a `publish` field can be in, as the decision an editor is making:
+ * publish it now, publish it at a chosen time, or take it down.
+ *
+ * A bare datetime-local input made "publish this" mean "work out the current time and
+ * type it in", and "unpublish" mean "clear a text box" — neither of which reads as the
+ * action it is.
+ *
+ * NOTE for the caller: these are <button>s, so this must NOT be rendered inside a
+ * <label> — a <button> is labelable, and clicking the label text would forward a click
+ * to the first one (publishing the row).
+ */
+function PublishControl({ value, onChange }: { value: string; onChange: (v: string | null) => void }) {
+  const [scheduling, setScheduling] = useState(false);
+  // The picker's own text, kept separate from the stored instant. A `datetime-local`
+  // reports "" for ANY incomplete state, so deleting the year to retype it would
+  // otherwise read as "unpublish" — and the debounced autosave would take the row off
+  // the site mid-keystroke. Only an explicit Unpublish clears the stored value.
+  const [draft, setDraft] = useState("");
+  const published = Boolean(value);
+  const at = published ? new Date(value).getTime() : Number.NaN;
+  const scheduled = Number.isFinite(at) && at > Date.now();
+
+  useTickAt(scheduled ? at : null);
+
+  const status = !published
+    ? { text: "Not published", tone: "text-fg-muted" }
+    : scheduled
+      ? { text: `Scheduled for ${formatWhen(value)}`, tone: "text-accent-strong" }
+      : { text: `Published ${formatWhen(value)}`, tone: "text-fg" };
+
+  const toggleScheduler = () => {
+    setDraft(toLocalInput(value));
+    setScheduling((s) => !s);
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <span className={`text-sm ${status.tone}`}>{status.text}</span>
+      <div className="flex flex-wrap items-center gap-2">
+        {/* Also offered while SCHEDULED: taking a scheduled row live early otherwise meant
+            hand-typing the current time, the very thing this control exists to remove. */}
+        {!published || scheduled ? (
+          <Button size="sm" onPress={() => { setScheduling(false); onChange(new Date().toISOString()); }}>
+            Publish now
+          </Button>
+        ) : null}
+        <Button variant="secondary" size="sm" onPress={toggleScheduler}>
+          {scheduled ? "Change schedule" : published ? "Change time" : "Schedule…"}
+        </Button>
+        {published ? (
+          // Clearing the value is what takes the row off the site — the read policy is
+          // scoped to this field being set.
+          <Button variant="ghost" size="sm" className="text-danger" onPress={() => { setScheduling(false); onChange(null); }}>
+            Unpublish
+          </Button>
+        ) : null}
+      </div>
+      {scheduling ? (
+        <input
+          className={CONTROL}
+          type="datetime-local"
+          // Shown in the editor's own timezone; stored as UTC. Driven by `draft`, not
+          // `value`, so a half-typed date survives instead of snapping back.
+          value={draft}
+          autoFocus
+          onChange={(e) => {
+            setDraft(e.target.value);
+            const iso = e.target.value ? fromLocalInput(e.target.value) : null;
+            if (iso) onChange(iso);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
 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 });
   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>
   );
 }
 
-function FieldInput({ def, value, onChange, api }: { def: FieldDefinition; value: unknown; onChange: (v: unknown) => void; api: Api }) {
-  const label: ReactNode = (
+/**
+ * `hideLabelAs` renders the field with NO visible label, using the given string as its
+ * accessible name instead. The single-field repeater asks for this: the list already
+ * carries the name, so repeating it on every row is noise — but an unlabelled input is
+ * announced as a bare edit field, so the name has to go somewhere.
+ *
+ * It cannot be done by passing an empty label: `text`/`url`/`textarea` render through
+ * podoba's `Input`/`Textarea`, which emit `<Label>{label}</Label>` unconditionally — an
+ * empty label element still claims a flex row and its `gap-3`, and still wins the
+ * 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, siblings }: { def: FieldDefinition; value: unknown; onChange: (v: unknown) => void; api: Api; hideLabelAs?: string; siblings?: Record<string, unknown> }) {
+  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));
   switch (def.type) {
     case "text":
-    case "url":
-      return <Input label={label} value={(value as string) ?? ""} onChange={onChange} placeholder={def.type === "url" ? "https://…" : ""} />;
+    case "url": {
+      const placeholder = def.type === "url" ? "https://…" : "";
+      return hideLabelAs !== undefined ? (
+        <input className={CONTROL} type="text" aria-label={hideLabelAs} placeholder={placeholder} value={(value as string) ?? ""} onChange={(e) => onChange(e.target.value)} />
+      ) : (
+        <Input label={label} value={(value as string) ?? ""} onChange={onChange} placeholder={placeholder} />
+      );
+    }
     case "textarea":
-      return <Textarea label={label} value={typeof value === "string" ? value : value == null ? "" : JSON.stringify(value)} onChange={onChange} />;
+      return hideLabelAs !== undefined ? (
+        <textarea className={`${CONTROL} h-auto min-h-20 py-2.5`} aria-label={hideLabelAs} value={asText(value)} onChange={(e) => onChange(e.target.value)} />
+      ) : (
+        <Textarea label={label} value={asText(value)} onChange={onChange} />
+      );
     case "richtext":
       // A rich-text value is an HTML string (round-trips with the site's set:html
       // renderers). A legacy object value isn't editable here — fall back to raw text.
@@ -54,16 +205,36 @@ function FieldInput({ def, value, onChange, api }: { def: FieldDefinition; value
     case "number":
       return (
         <FieldShell label={label}>
-          <input className={CONTROL} type="number" value={value == null ? "" : String(value)} onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))} />
+          <input className={CONTROL} type="number" aria-label={hideLabelAs} value={value == null ? "" : String(value)} onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))} />
         </FieldShell>
       );
     case "date":
     case "datetime":
       return (
         <FieldShell label={label}>
-          <input className={CONTROL} type={def.type === "date" ? "date" : "datetime-local"} value={(value as string) ?? ""} onChange={(e) => onChange(e.target.value || null)} />
+          <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
+      // label text would then publish the row. Same reason the boolean case opts out.
+      return (
+        <div className="flex w-full flex-col gap-2">
+          <span className="text-sm font-medium text-fg">{label}</span>
+          <PublishControl value={typeof value === "string" ? value : ""} onChange={onChange as (v: string | null) => void} />
+        </div>
+      );
     case "boolean":
       return (
         <label className="flex items-center gap-2">
@@ -74,7 +245,7 @@ function FieldInput({ def, value, onChange, api }: { def: FieldDefinition; value
     case "select":
       return (
         <FieldShell label={label}>
-          <SelectField def={def} value={value as string | null} onChange={onChange} api={api} />
+          <SelectField def={def} value={value as string | null} onChange={onChange} api={api} ariaLabel={hideLabelAs} />
         </FieldShell>
       );
     case "media":
@@ -109,42 +280,272 @@ export function RichText({ value, onChange }: { value: string; onChange: (v: str
   return <BlockEditor value={value} onChange={onChange} minHeight={180} placeholder="Write, or press '/' for blocks…" />;
 }
 
+/**
+ * A repeater's items.
+ *
+ * Two shapes, because a list of one field and a list of six are different things to edit.
+ * A SINGLE-field repeater (bullet points) renders one row per item — handle, input,
+ * actions — with no card and no field label repeated down the page saying the same word.
+ * Anything wider keeps a card, with a header that summarises the item so eight slides are
+ * scannable without expanding each one.
+ *
+ * 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 }) {
   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.
+  const compact = fields.length === 1 && !["repeater", "group", "richtext", "media"].includes(fields[0].type);
+
+  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 add = () => onChange([...items, {}]);
   const del = (i: number) => onChange(items.filter((_, j) => j !== i));
-  const move = (i: number, d: number) => {
-    const j = i + d;
-    if (j < 0 || j >= items.length) return;
+  const moveTo = (from: number, to: number) => {
+    if (from === to || to < 0 || to >= items.length) return;
     const next = items.slice();
-    [next[i], next[j]] = [next[j], next[i]];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
     onChange(next);
   };
+  const move = (i: number, d: number) => moveTo(i, i + d);
+
+  const atMax = def.max != null && items.length >= def.max;
+  const atMin = def.min != null && items.length <= def.min;
+
+  /**
+   * The card header's summary: the item's first bit of human-readable text.
+   *
+   * Restricted to prose-ish field types on purpose. Taking the first non-empty STRING
+   * 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 readable = ["text", "textarea", "richtext", "select", "url"];
+    for (const f of fields) {
+      if (!readable.includes(f.type)) continue;
+      const v = it[f.name];
+      if (typeof v === "string" && v.trim()) return v.replace(/<[^>]+>/g, " ").trim().slice(0, 80);
+    }
+    return "";
+  };
+
+  const dropZone = (i: number) => ({
+    onDragOver: (e: DragEvent) => {
+      if (!drag) return;
+      e.preventDefault();
+      setDrag((d) => (d && d.over !== i ? { ...d, over: i } : d));
+    },
+    onDrop: (e: DragEvent) => {
+      if (!drag) return;
+      e.preventDefault();
+      moveTo(drag.from, i);
+      setDrag(null);
+    },
+  });
+
+  const handle = (i: number) => (
+    <span
+      draggable
+      onDragStart={(e) => {
+        e.dataTransfer.effectAllowed = "move";
+        // Firefox refuses to start a drag without a payload, but the payload must be
+        // EMPTY: a card-variant drop zone spans the item's rich-text body, and
+        // ProseMirror's own `drop` listener (on view.dom, so it runs before React's
+        // delegated one — preventDefault here can't stop it) pastes `text/plain` at the
+        // cursor. An empty slice leaves the doc equal and PM bails. Same reason the block
+        // canvas passes "" (components.tsx).
+        e.dataTransfer.setData("text/plain", "");
+        setDrag({ from: i, over: i });
+      }}
+      onDragEnd={() => setDrag(null)}
+      className="cursor-grab select-none px-1 text-fg-subtle transition-colors hover:text-fg active:cursor-grabbing"
+      title="Drag to reorder"
+      aria-hidden
+    >⠿</span>
+  );
+
+  const rowState = (i: number) =>
+    `${drag && drag.over === i && drag.from !== i ? "ring-2 ring-brand-green" : ""} ${drag && drag.from === i ? "opacity-40" : ""}`;
+
+  /**
+   * Row actions. Revealed on row hover, on keyboard focus anywhere in the row, and
+   * unconditionally where hover doesn't exist.
+   *
+   * `group/row` is NAMED on purpose: `BlockCard` is also a `group`, and an unnamed
+   * `group-hover:` matches ANY `.group` ancestor — hovering the block revealed every
+   * row's actions at once. And Tailwind v4 emits `hover:`/`group-hover:` under
+   * `@media (hover: hover)`, so on touch (where drag-and-drop doesn't work either)
+   * a hover-only affordance leaves no way at all to reorder or delete.
+   */
+  const ACTIONS_VISIBILITY =
+    "opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100 [@media(hover:none)]:opacity-100";
+
+  const actions = (i: number) => (
+    <div className="flex shrink-0 items-center">
+      <button type="button" className="px-1.5 text-fg-subtle hover:text-fg disabled:opacity-30" title="Move up" disabled={i === 0} onClick={() => move(i, -1)}>↑</button>
+      <button type="button" className="px-1.5 text-fg-subtle hover:text-fg disabled:opacity-30" title="Move down" disabled={i === items.length - 1} onClick={() => move(i, 1)}>↓</button>
+      <button type="button" className="px-1.5 text-fg-subtle hover:text-danger disabled:opacity-30" title="Remove" disabled={atMin} onClick={() => del(i)}>✕</button>
+    </div>
+  );
+
   return (
     <div className="flex flex-col gap-2">
       <span className="text-sm font-medium text-fg">{label}</span>
-      {items.map((it, i) => (
-        <div className="rounded-lg border border-border bg-surface-muted p-3.5" key={i}>
-          <div className="mb-2 flex justify-end gap-1">
-            <Button variant="ghost" size="sm" onPress={() => move(i, -1)}>↑</Button>
-            <Button variant="ghost" size="sm" onPress={() => move(i, 1)}>↓</Button>
-            <Button variant="ghost" size="sm" className="text-danger" onPress={() => del(i)}>✕</Button>
-          </div>
-          <FieldForm schema={def.fields ?? []} value={it} onChange={(v) => upd(i, v)} api={api} />
-        </div>
-      ))}
-      <Button variant="secondary" size="sm" className="self-start" onPress={add} isDisabled={def.max != null && items.length >= def.max}>
-        + add {def.label ?? def.name}
+
+      {items.length === 0 ? <span className="text-sm text-fg-muted">None yet.</span> : null}
+
+      <div className={`flex flex-col ${compact ? "gap-1" : "gap-2"}`}>
+        {items.map((it, i) =>
+          compact ? (
+            // One row: handle, input, actions.
+            <div key={i} className={`group/row flex items-center gap-1 rounded-lg px-1 py-0.5 transition-colors ${rowState(i)}`} {...dropZone(i)}>
+              {handle(i)}
+              <div className="min-w-0 flex-1">
+                {/* No visible label — it would repeat the list's own name down the page
+                    ("Bod", "Bod", "Bod"…) — but the input still needs an accessible one,
+                    and one that tells the rows apart. */}
+                <FieldInput
+                  def={fields[0]}
+                  hideLabelAs={`${def.label ?? def.name} ${i + 1}`}
+                  value={it[fields[0].name]}
+                  onChange={(v) => upd(i, { ...it, [fields[0].name]: v })}
+                  api={api}
+                />
+              </div>
+              <div className={ACTIONS_VISIBILITY}>{actions(i)}</div>
+            </div>
+          ) : (
+            <div key={i} className={`rounded-lg border border-border bg-surface-muted transition-colors ${rowState(i)}`} {...dropZone(i)}>
+              <div className="flex items-center gap-1 border-b border-border px-2 py-1.5">
+                {handle(i)}
+                <span className="text-caption text-fg-subtle">{i + 1}</span>
+                <span className="min-w-0 flex-1 truncate text-sm text-fg-muted">{summarise(it)}</span>
+                {actions(i)}
+              </div>
+              <div className="p-3.5">
+                <FieldForm schema={fields} value={it} onChange={(v) => upd(i, v)} api={api} />
+              </div>
+            </div>
+          ),
+        )}
+      </div>
+
+      {/* Named, not a bare "+ Add": a content type with several repeaters would otherwise
+          render several buttons with identical accessible names. */}
+      <Button variant="secondary" size="sm" className="self-start" onPress={add} isDisabled={atMax}>
+        + Add {def.label ?? def.name}
       </Button>
     </div>
   );
 }
 
+/**
+ * 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 }: { def: FieldDefinition; value: string | null; onChange: (v: unknown) => void; api: Api }) {
+function SelectField({ def, value, onChange, api, ariaLabel }: { def: FieldDefinition; value: string | null; onChange: (v: unknown) => void; api: Api; ariaLabel?: string }) {
   const [dyn, setDyn] = useState<{ value: string; label: string }[] | null>(null);
   const from = def.optionsFrom;
   useEffect(() => {
@@ -159,7 +560,7 @@ function SelectField({ def, value, onChange, api }: { def: FieldDefinition; valu
   const loading = Boolean(from) && dyn === null;
   const opts = from ? dyn ?? [] : (def.options ?? []).map((o) => ({ value: o, label: o }));
   return (
-    <select className={CONTROL} value={value ?? ""} onChange={(e) => onChange(e.target.value || null)}>
+    <select className={CONTROL} aria-label={ariaLabel} value={value ?? ""} onChange={(e) => onChange(e.target.value || null)}>
       <option value="">{loading ? "Načítám…" : "—"}</option>
       {opts.map((o) => (
         <option key={o.value} value={o.value}>{o.label}</option>

package/src/types.ts

@@ -11,6 +11,10 @@ export type FieldType =
   | "boolean"
   | "date"
   | "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"
@@ -30,6 +34,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 {