@pramen/cms-editor 0.0.45 → 0.0.47

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, useState, type DragEvent, type ReactNode } from "react";
 import type { Api } from "./api";
 import type { FieldDefinition, Media } from "./types";
 
@@ -14,12 +14,139 @@ 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 (
@@ -31,18 +158,41 @@ export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefin
   );
 }
 
-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 }: { def: FieldDefinition; value: unknown; onChange: (v: unknown) => void; api: Api; hideLabelAs?: string }) {
+  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 +204,26 @@ 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 "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 +234,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,33 +269,163 @@ 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>
   );
@@ -144,7 +434,7 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
 // 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 +449,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/routes/_layout.tsx

@@ -3,17 +3,24 @@
 // current path, so a deep link or refresh lands with the right tab lit.
 
 import { Outlet, useNavigate, useRoute } from "@buzola/router";
-import { Badge, Button, Card, MoonIcon, SunIcon, Text, Topbar } from "@podoba/react";
+import { Button, Card, MoonIcon, SunIcon, Text, Topbar } from "@podoba/react";
 import { useEffect, useState } from "react";
 import { useApp } from "../app-context";
 
 const THEME_KEY = "pramen.cms.theme";
 
 export default function RootLayout() {
-  const { cfg, isAdmin, collections, error, reconfigure } = useApp();
+  const { isAdmin, collections, error, reconfigure, confirmNavigation } = useApp();
   const navigate = useNavigate();
   const { pathname } = useRoute();
 
+  // Every chrome action here is a way OUT of the current screen, so it runs through that
+  // screen's unsaved-changes guard first (the page editor registers one; with no guard
+  // registered this is a pass-through). In-app navigation fires no `beforeunload`, so
+  // without this the topbar silently discards unsaved edits. The external `extraNav` links
+  // open in a new tab and leave nothing behind, so they stay unguarded.
+  const guarded = (go: () => void) => () => { if (confirmNavigation()) go(); };
+
   // Dark mode: podoba tokens flip under `[data-theme="dark"]` — no `dark:` prefixes.
   const [theme, setTheme] = useState(() => (typeof localStorage !== "undefined" ? localStorage.getItem(THEME_KEY) ?? "light" : "light"));
   useEffect(() => {
@@ -45,30 +52,39 @@ export default function RootLayout() {
     <div className="min-h-screen bg-surface text-fg">
       <Topbar className="sticky top-0 z-10 bg-surface px-7">
         <Topbar.Brand>
-          <span className="text-callout font-bold tracking-[0.01em] text-fg">pramen</span>
-          <span className="text-fg-subtle">· cms</span>
+          {/* The wordmark is the way back to the top of the admin, as it is on every
+              other site — a `button` (not an `<a>`) so the SPA router handles it. */}
+          <button
+            type="button"
+            onClick={guarded(() => navigate("home"))}
+            aria-label="pramen cms — home"
+            className="flex items-baseline gap-1 rounded-md px-1 py-0.5 transition-colors hover:bg-surface-muted"
+          >
+            <span className="text-callout font-bold tracking-[0.01em] text-fg">pramen</span>
+            <span className="text-fg-subtle">· cms</span>
+          </button>
         </Topbar.Brand>
         <Topbar.Nav aria-label="Primary">
           {hidePages ? null : (
-            <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={() => navigate("home")}>
+            <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={guarded(() => navigate("home"))}>
               Pages
             </Button>
           )}
           {collections.map((c) => (
-            <Button key={c.slug} variant="ghost" size="sm" className={tabCls(`col:${c.slug}`)} onPress={() => navigate("collection", { params: { slug: c.slug } })}>
+            <Button key={c.slug} variant="ghost" size="sm" className={tabCls(`col:${c.slug}`)} onPress={guarded(() => navigate("collection", { params: { slug: c.slug } }))}>
               {c.icon ? `${c.icon} ` : ""}
               {c.pluralLabel}
             </Button>
           ))}
-          <Button variant="ghost" size="sm" className={tabCls("media")} onPress={() => navigate("media")}>
+          <Button variant="ghost" size="sm" className={tabCls("media")} onPress={guarded(() => navigate("media"))}>
             Media
           </Button>
           {isAdmin ? (
-            <Button variant="ghost" size="sm" className={tabCls("users")} onPress={() => navigate("users")}>
+            <Button variant="ghost" size="sm" className={tabCls("users")} onPress={guarded(() => navigate("users"))}>
               Users
             </Button>
           ) : null}
-          <Button variant="ghost" size="sm" className={tabCls("settings")} onPress={() => navigate("settings")}>
+          <Button variant="ghost" size="sm" className={tabCls("settings")} onPress={guarded(() => navigate("settings"))}>
             Settings
           </Button>
           {extraNav.map((l) => (
@@ -87,7 +103,8 @@ export default function RootLayout() {
           ))}
         </Topbar.Nav>
         <Topbar.Actions>
-          <Badge color="grey" label={cfg.tenant} />
+          {/* The tenant is deployment configuration, not something an editor acts on —
+              it stays visible on the Settings page (Connection), not in the chrome. */}
           <Button
             variant="ghost"
             size="sm"
@@ -96,7 +113,7 @@ export default function RootLayout() {
           >
             {theme === "dark" ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
           </Button>
-          <Button variant="ghost" size="sm" onPress={reconfigure}>
+          <Button variant="ghost" size="sm" onPress={guarded(reconfigure)}>
             sign out
           </Button>
         </Topbar.Actions>

package/src/routes/page.tsx

@@ -13,7 +13,7 @@ export default createPage()
   .params({ pageId: "string", tab: "?string" })
   .route("/pages/:pageId")
   .render(function PageEditorRoute({ params }) {
-    const { api, setError } = useApp();
+    const { api, setError, setNavGuard } = useApp();
     const navigate = useNavigate();
     const [page, setPage] = useState<Page | null>(null);
     const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
@@ -57,6 +57,7 @@ export default createPage()
         onTab={setTab}
         onBack={() => navigate("home")}
         onChange={setPage}
+        registerGuard={setNavGuard}
       />
     );
   });

package/src/types.ts

@@ -11,6 +11,8 @@ export type FieldType =
   | "boolean"
   | "date"
   | "datetime"
+  /** A publication timestamp — rendered as publish-now / schedule / unpublish. */
+  | "publish"
   | "media"
   | "select"
   | "repeater"