@pramen/cms-editor 0.0.40 → 0.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {
@@ -20,17 +20,26 @@
   },
   "dependencies": {
     "@buzola/router": "^0.0.12",
-    "@podoba/react": "^0.0.3",
-    "@podoba/tokens": "^0.0.3",
-    "@podoba/tailwind": "^0.0.3",
+    "@podoba/react": "^0.0.32",
+    "@podoba/tokens": "^0.0.32",
+    "@podoba/tailwind": "^0.0.32",
+    "@tiptap/react": "^3.27.4",
+    "@tiptap/pm": "^3.27.4",
+    "@tiptap/starter-kit": "^3.27.4",
+    "@tiptap/extension-placeholder": "^3.27.4",
+    "@tiptap/extension-highlight": "^3.27.4",
+    "@tiptap/extension-task-list": "^3.27.4",
+    "@tiptap/extension-task-item": "^3.27.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@buzola/bun-plugin": "^0.0.12",
     "@buzola/codegen": "^0.0.12",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "tailwindcss": "^3.4.19"
+    "tailwindcss": "^4.0.0"
   }
 }

package/src/app-context.tsx

@@ -13,6 +13,10 @@ declare global {
     /** Runtime config set by the host's /config.js (see @pramen/cms-editor build). */
     PRAMEN_CMS_EDITOR?: {
       signInUrl?: string;
+      /** Hide the Pages tab for deployments that use collections only — no block/page
+       * building. The tab is otherwise always shown and lands on an empty list, which
+       * reads as "the CMS is broken" rather than "this site has no pages". */
+      hidePages?: boolean;
       /** Extra top-nav links to companion tools the host serves (e.g. a curation page).
        * Rendered as plain external `<a>` links after the built-in tabs. */
       extraNav?: { label: string; href: string }[];

package/src/app.css

@@ -1,3 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* Design system = podoba (Tailwind v4, CSS-first). Order matters: Tailwind first,
+ * then @podoba/tokens' CSS variables, then @podoba/tailwind's `@theme inline` that
+ * binds those vars to utilities (bg-surface, text-fg-muted, rounded-panel, …). */
+@import "tailwindcss";
+@import "@podoba/tokens/variables.css";
+@import "@podoba/tailwind";
+
+/* v4 auto-detects this app's sources, but node_modules is ignored by default —
+ * @podoba/react ships TS source with class strings the compiler must scan, so name
+ * it explicitly (paths are relative to this file). */
+@source "./**/*.{ts,tsx}";
+@source "../node_modules/@podoba/react/src/**/*.{ts,tsx}";

package/src/components.tsx

@@ -2,7 +2,7 @@
 // route modules under `routes/` are thin adapters: they pull `api`/`me`/`setError` from
 // the app context and wire URL params + navigation into these components.
 
-import { Button, Input, Textarea } from "@podoba/react";
+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";
@@ -33,7 +33,7 @@ function Hero({ lead, em, children }: { lead: string; em: string; children?: Rea
 function Cta({ text, em, children }: { text: string; em: string; children: ReactNode }) {
   return (
     <div className="flex min-w-[360px] items-center gap-4 rounded-full bg-brand-green py-3 pl-7 pr-3 max-[820px]:min-w-0">
-      <span className="text-lg text-[#0f3a25]">
+      <span className="text-callout text-fg-on-brand">
         {text} <span className="font-semibold">{em}</span>
       </span>
       {children}
@@ -46,32 +46,38 @@ function Section({ children }: { children: ReactNode }) {
 }
 
 function Pill({ status, children }: { status?: string; children: ReactNode }) {
+  // Token-only colors (no hardcoded hex) so status pills flip correctly under the
+  // podoba dark theme. `fg-on-brand` is the AA-safe ink on the fixed brand surfaces.
   const tone =
     status === "published" || status === "active"
-      ? "bg-brand-green text-[#0f3a25] border-transparent"
+      ? "bg-brand-green text-fg-on-brand border-transparent"
       : status === "in_review" || status === "review"
-        ? "bg-accent-yellow text-[#4a3512] border-transparent"
+        ? "bg-accent-yellow text-fg-on-brand border-transparent"
         : status === "rejected" || status === "archived" || status === "inactive"
           ? "border-danger text-danger bg-surface-card"
           : "border-border text-fg-muted bg-surface-card";
-  return <span className={`inline-block whitespace-nowrap rounded-full border px-2.5 py-0.5 text-[11px] font-medium ${tone}`}>{children}</span>;
+  return <span className={`inline-block whitespace-nowrap rounded-full border px-2.5 py-0.5 text-caption font-medium ${tone}`}>{children}</span>;
 }
 
+// Modal chrome on podoba's shared overlay: focus trap, Esc-to-close, backdrop
+// dismiss, the token blur-scrim and enter/exit animation — all for free. The caller
+// API (conditionally mounted + `onClose`) is preserved, so call sites don't change.
 function Modal({ onClose, wide, children }: { onClose: () => void; wide?: boolean; children: ReactNode }) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(20,15,5,0.28)] p-6" onClick={onClose}>
-      <div
-        className={`max-h-[86vh] w-full overflow-auto rounded-panel border border-border bg-surface-card px-9 py-8 shadow-[0_24px_60px_rgba(30,20,10,0.12)] ${wide ? "max-w-[680px]" : "max-w-[520px]"}`}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {children}
-      </div>
-    </div>
+    <ModalOverlay isOpen isDismissable onOpenChange={(open) => !open && onClose()}>
+      <ModalSurface className={`w-full px-9 py-8 ${wide ? "max-w-[680px]" : "max-w-[520px]"}`}>
+        <ModalDialog className="max-h-[86vh] overflow-auto outline-none">{children}</ModalDialog>
+      </ModalSurface>
+    </ModalOverlay>
   );
 }
 
 function ModalTitle({ children }: { children: ReactNode }) {
-  return <h2 className="mb-5 text-[28px] font-normal leading-[1.15] text-fg">{children}</h2>;
+  return (
+    <Heading level="1" className="mb-5 font-normal">
+      {children}
+    </Heading>
+  );
 }
 
 function KV({ children, className }: { children: ReactNode; className?: string }) {
@@ -79,12 +85,14 @@ function KV({ children, className }: { children: ReactNode; className?: string }
 }
 
 function Card({ children }: { children: ReactNode }) {
-  return <div className="overflow-auto rounded-panel border border-border bg-surface-card p-6">{children}</div>;
+  // rounded-lg is the unified podoba card radius (the 1.1rem soft-panel radius was retired).
+  return <div className="overflow-auto rounded-lg border border-border bg-surface-card p-6">{children}</div>;
 }
 
 function Banner({ ok, children }: { ok?: boolean; children: ReactNode }) {
+  // Token-only colors so the banner reads correctly in dark mode too.
   return (
-    <div className={`my-2 rounded-lg border px-3.5 py-2.5 text-[13px] ${ok ? "border-brand-green bg-brand-green/20 text-[#0f3a25]" : "border-danger bg-surface-card text-danger"}`}>{children}</div>
+    <div className={`my-2 rounded-lg border px-3.5 py-2.5 text-small ${ok ? "border-brand-green bg-brand-green/20 text-fg" : "border-danger bg-surface-card text-danger"}`}>{children}</div>
   );
 }
 
@@ -187,23 +195,45 @@ function cellText(v: unknown): string {
   return String(v);
 }
 
+/** Page size for collection lists. collectionList defaults to 100 server-side, so a
+ * request without an explicit limit silently truncates — and the header then reports the
+ * truncated count as if it were the total, which reads as "that is all there is". */
+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 [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
   const [loading, setLoading] = useState(true);
+
+  const load = useCallback(
+    (off: number) => {
+      setLoading(true);
+      return api
+        .call<Record<string, unknown>[]>("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.
+          setHasMore(r.length === COLLECTION_PAGE_SIZE);
+          setOffset(off + r.length);
+        })
+        .catch((e) => onError(errMsg(e)))
+        .finally(() => setLoading(false));
+    },
+    [api, def.slug, onError],
+  );
+
   useEffect(() => {
-    let live = true;
-    setLoading(true);
-    api.call<Record<string, unknown>[]>("collectionList", { collection: def.slug })
-      .then((r) => { if (live) setRows(r); })
-      .catch((e) => onError(errMsg(e)))
-      .finally(() => { if (live) setLoading(false); });
-    return () => { live = false; };
-  }, [api, def.slug, onError]);
+    setRows([]);
+    setOffset(0);
+    setHasMore(false);
+    void load(0);
+  }, [load]);
 
   const labelOf = (col: string) => def.fields.find((f) => f.name === col)?.label ?? col;
   return (
     <>
-      <Hero lead={def.pluralLabel} em={rows.length === 0 ? "None yet" : rows.length === 1 ? `1 ${def.label.toLowerCase()}` : `${rows.length} ${def.pluralLabel.toLowerCase()}`}>
+      <Hero lead={def.pluralLabel} em={rows.length === 0 ? "None yet" : rows.length === 1 ? `1 ${def.label.toLowerCase()}` : `${rows.length}${hasMore ? "+" : ""} ${def.pluralLabel.toLowerCase()}`}>
         <Cta text="Let's" em={`add a ${def.label.toLowerCase()}`}>
           <Button className="shrink-0" onPress={onNew}>+ New {def.label.toLowerCase()}</Button>
         </Cta>
@@ -225,6 +255,11 @@ export function CollectionList({ api, def, onOpen, onNew, onError }: { api: Api;
           {!loading && rows.length === 0 ? <p className="text-fg-subtle">No {def.pluralLabel.toLowerCase()} yet. Create one.</p> : null}
           {loading ? <p className="text-fg-subtle">Loading…</p> : null}
         </div>
+        {hasMore && !loading ? (
+          <div className="mt-3.5 text-center">
+            <Button variant="secondary" size="sm" onPress={() => void load(offset)}>Load more</Button>
+          </div>
+        ) : null}
       </div>
     </>
   );

package/src/fields.tsx

@@ -1,8 +1,9 @@
 // Schema-driven field forms: one input per FieldDefinition type, recursively composed for
 // group/repeater. Media fields open a picker (upload + choose from the library).
 
-import { Button, Input, Textarea } from "@podoba/react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+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 type { Api } from "./api";
 import type { FieldDefinition, Media } from "./types";
 
@@ -98,104 +99,14 @@ function FieldInput({ def, value, onChange, api }: { def: FieldDefinition; value
 }
 
 // --- rich text (WYSIWYG) --------------------------------------------------------------
-// A dependency-free contentEditable editor. Emits an HTML string, so it round-trips with
-// existing rich_text content and every set:html renderer — no value migration, no bundled
-// ProseMirror. TipTap is the upgrade path if tables/embeds are ever needed.
-
-const RT_TOOLS: Array<{ label: string; title: string; run: (exec: (c: string, a?: string) => void) => void }> = [
-  { label: "B", title: "Bold", run: (x) => x("bold") },
-  { label: "I", title: "Italic", run: (x) => x("italic") },
-  { label: "H2", title: "Heading", run: (x) => x("formatBlock", "H2") },
-  { label: "H3", title: "Subheading", run: (x) => x("formatBlock", "H3") },
-  { label: "¶", title: "Paragraph", run: (x) => x("formatBlock", "P") },
-  { label: "• List", title: "Bulleted list", run: (x) => x("insertUnorderedList") },
-  { label: "1. List", title: "Numbered list", run: (x) => x("insertOrderedList") },
-  { label: "Link", title: "Add link", run: (x) => {
-    const raw = window.prompt("Link URL (https://, mailto:, /path)", "https://");
-    if (!raw) return;
-    const url = safeLinkUrl(raw);
-    if (!url) { window.alert("Only http(s), mailto, tel, or relative (/, #) links are allowed."); return; }
-    x("createLink", url);
-  } },
-  { label: "Unlink", title: "Remove link", run: (x) => x("unlink") },
-  { label: "Clear", title: "Clear formatting", run: (x) => x("removeFormat") },
-];
-
-/** Allow-list for a link href: http(s), mailto, tel, or a relative/anchor path.
- * The prefix allow-list inherently rejects `javascript:`/`data:`/`vbscript:` (they
- * don't match), so a bare script URL never reaches execCommand. */
-function safeLinkUrl(raw: string): string | null {
-  const url = raw.trim();
-  return /^(https?:\/\/|mailto:|tel:|\/|#)/i.test(url) ? url : null;
-}
-
-/** NOTE: this is cosmetic paste-cleaning, NOT a security boundary. It cannot be relied
- * on for XSS defense — an editor-role caller can POST any `richtext` value straight to
- * the RPC handler, never touching this editor. Stored-XSS is prevented on the SERVER by
- * sanitizeRichText() in @pramen/cms on write (which also covers raw writes / imports).
- * Here we just tidy obviously-unwanted markup so the editor doesn't render junk. */
-function scrubHtml(html: string): string {
-  return html
-    .replace(/<\s*(script|style)[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, "")
-    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "")
-    .replace(/(href|src)\s*=\s*("javascript:[^"]*"|'javascript:[^']*')/gi, '$1="#"');
-}
+// The `richtext` field is podoba's Notion-style BlockEditor (Tiptap): `/` slash palette,
+// block conversion, inline bubble toolbar. Still an HTML string in/out, so it round-trips
+// with existing rich_text content + every set:html renderer — no value migration. The
+// server's sanitizeRichText() (@pramen/cms) remains the XSS boundary on write; ProseMirror
+// parses HTML to its schema on load, so scripts never survive into the editor either.
 
 export function RichText({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const last = useRef<string>("");
-
-  // Sync only EXTERNAL changes (e.g. switching blocks) into the DOM — never on our own
-  // keystrokes, or the caret jumps to the start on every character.
-  useEffect(() => {
-    const el = ref.current;
-    if (el && value !== last.current) {
-      // Scrub on load too — content may have entered the store via raw writes or imports,
-      // not just this editor. contentEditable requires innerHTML; scrubHtml strips
-      // scripts / inline handlers / javascript: URLs first.
-      el.innerHTML = scrubHtml(value || "");
-      last.current = value || "";
-    }
-  }, [value]);
-
-  const emit = () => {
-    const html = scrubHtml(ref.current?.innerHTML ?? "");
-    last.current = html;
-    onChange(html);
-  };
-  const exec = (command: string, arg?: string) => {
-    ref.current?.focus();
-    document.execCommand(command, false, arg);
-    emit();
-  };
-  // Paste as plain text — avoids importing Word/Docs style-junk into the HTML.
-  const onPaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    document.execCommand("insertText", false, e.clipboardData.getData("text/plain"));
-  };
-
-  return (
-    <div className="overflow-hidden rounded-lg border border-border bg-surface-card">
-      <div className="flex flex-wrap gap-0.5 border-b border-border bg-surface-muted px-2 py-1.5">
-        {RT_TOOLS.map((t) => (
-          // preventDefault on mousedown keeps the editor's selection while the button is clicked.
-          <button key={t.label} type="button" className="rounded border-0 bg-transparent px-2.5 py-0.5 text-xs text-fg-muted hover:bg-surface-card hover:text-fg" title={t.title} onMouseDown={(e) => e.preventDefault()} onClick={() => t.run(exec)}>
-            {t.label}
-          </button>
-        ))}
-      </div>
-      <div
-        ref={ref}
-        className="prose prose-sm min-h-[180px] max-w-none px-4 py-3.5 text-sm leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
-        contentEditable
-        suppressContentEditableWarning
-        data-placeholder="Write…"
-        onInput={emit}
-        onBlur={emit}
-        onPaste={onPaste}
-      />
-    </div>
-  );
+  return <BlockEditor value={value} onChange={onChange} minHeight={180} placeholder="Write, or press '/' for blocks…" />;
 }
 
 function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: Record<string, unknown>[]; onChange: (v: unknown[]) => void; api: Api; label: ReactNode }) {
@@ -310,26 +221,36 @@ export function MediaPicker({ api, onClose, onPick }: { api: Api; onClose: () =>
     }
   };
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(20,15,5,0.28)] p-6" onClick={onClose}>
-      <div className="max-h-[86vh] w-full max-w-[680px] overflow-auto rounded-panel border border-border bg-surface-card px-9 py-8 shadow-[0_24px_60px_rgba(30,20,10,0.12)]" onClick={(e) => e.stopPropagation()}>
-        <h2 className="mb-5 text-[28px] font-normal text-fg">Choose <span className="text-fg-subtle">a file</span> from the library</h2>
-        {err ? <div className="my-2 rounded-lg border border-danger bg-surface-card px-3.5 py-2.5 text-[13px] text-danger">{err}</div> : null}
-        <label className="mb-4 flex w-full flex-col gap-2">
-          <span className="text-sm font-medium text-fg">Upload a new file</span>
-          <input type="file" className="text-sm text-fg-muted" disabled={busy} onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])} />
-        </label>
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2.5">
-          {media.map((m) => (
-            <div key={m.id} className="cursor-pointer overflow-hidden rounded-lg border border-border bg-surface-card" onClick={() => onPick(m.id)}>
-              {(m.file.contentType ?? "").startsWith("image/") ? <img className="block h-[130px] w-full object-cover" src={api.resolve(`/media/${m.file.key}`)} alt="" /> : <div className="h-[130px] bg-surface-muted" />}
-              <div className="truncate px-2 py-1.5 text-[11px] text-fg-muted">{m.file.filename ?? m.id}</div>
-            </div>
-          ))}
-        </div>
-        <div className="mt-3 text-right">
-          <Button variant="ghost" onPress={onClose}>close</Button>
-        </div>
-      </div>
-    </div>
+    <ModalOverlay isOpen isDismissable onOpenChange={(open) => !open && onClose()}>
+      <ModalSurface className="w-full max-w-[680px] px-9 py-8">
+        <ModalDialog className="max-h-[86vh] overflow-auto outline-none">
+          <Heading level="1" className="mb-5 font-normal">
+            Choose <span className="text-fg-subtle">a file</span> from the library
+          </Heading>
+          {err ? (
+            <div className="my-2 rounded-lg border border-danger bg-surface-card px-3.5 py-2.5 text-small text-danger">{err}</div>
+          ) : null}
+          <label className="mb-4 flex w-full flex-col gap-2">
+            <Text size="small" weight="medium">
+              Upload a new file
+            </Text>
+            <input type="file" className="text-small text-fg-muted" disabled={busy} onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])} />
+          </label>
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2.5">
+            {media.map((m) => (
+              <div key={m.id} className="cursor-pointer overflow-hidden rounded-lg border border-border bg-surface-card" onClick={() => onPick(m.id)}>
+                {(m.file.contentType ?? "").startsWith("image/") ? <img className="block h-[130px] w-full object-cover" src={api.resolve(`/media/${m.file.key}`)} alt="" /> : <div className="h-[130px] bg-surface-muted" />}
+                <div className="truncate px-2 py-1.5 text-caption text-fg-muted">{m.file.filename ?? m.id}</div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-3 text-right">
+            <Button variant="ghost" onPress={onClose}>
+              close
+            </Button>
+          </div>
+        </ModalDialog>
+      </ModalSurface>
+    </ModalOverlay>
   );
 }

package/src/routes/_layout.tsx

@@ -1,16 +1,26 @@
-// Root layout: the persistent chrome (top bar + tab nav + global error banner) wrapped
-// around every route via <Outlet />. Tab highlighting is derived from the current path,
-// so a deep link or refresh lands with the right tab lit.
+// Root layout: the persistent chrome (podoba Topbar + tab nav + global error banner)
+// wrapped around every route via <Outlet />. Tab highlighting is derived from the
+// current path, so a deep link or refresh lands with the right tab lit.
 
 import { Outlet, useNavigate, useRoute } from "@buzola/router";
-import { Button } from "@podoba/react";
+import { Badge, 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 navigate = useNavigate();
   const { pathname } = useRoute();
 
+  // 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(() => {
+    document.documentElement.dataset.theme = theme === "dark" ? "dark" : "light";
+    localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
   // The active collection slug, if we're under /collections/:slug(/...).
   const collectionSlug = pathname.startsWith("/collections/") ? pathname.split("/")[2] : undefined;
 
@@ -22,31 +32,45 @@ export default function RootLayout() {
     : pathname.startsWith("/settings") ? "settings"
     : "";
 
-  const tabCls = (key: string) =>
-    active === key ? "bg-surface-muted text-fg" : "text-fg-muted";
+  const tabCls = (key: string) => (active === key ? "bg-surface-muted text-fg" : "text-fg-muted");
 
   // Host-configured links to companion tools (e.g. a curation page), from /config.js.
   const extraNav = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.extraNav ?? [] : [];
+  // Collections-only deployments hide the block/page builder entirely.
+  const hidePages = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.hidePages === true : false;
 
   return (
-    <>
-      <div className="sticky top-0 z-10 flex items-center gap-4 bg-surface px-7 py-4">
-        <span className="text-[15px] font-bold tracking-[0.01em] text-fg">
-          pramen <span className="font-normal text-fg-subtle">· cms</span>
-        </span>
-        <span className="flex-1" />
-        <nav className="flex items-center gap-0.5">
-          <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={() => navigate("home")}>Pages</Button>
+    // Page-level surface so the whole viewport (not just the topbar + cards) flips
+    // under `[data-theme="dark"]` — otherwise the body stays white in dark mode.
+    <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>
+        </Topbar.Brand>
+        <Topbar.Nav aria-label="Primary">
+          {hidePages ? null : (
+            <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={() => 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 } })}>
-              {c.icon ? `${c.icon} ` : ""}{c.pluralLabel}
+              {c.icon ? `${c.icon} ` : ""}
+              {c.pluralLabel}
             </Button>
           ))}
-          <Button variant="ghost" size="sm" className={tabCls("media")} onPress={() => navigate("media")}>Media</Button>
+          <Button variant="ghost" size="sm" className={tabCls("media")} onPress={() => navigate("media")}>
+            Media
+          </Button>
           {isAdmin ? (
-            <Button variant="ghost" size="sm" className={tabCls("users")} onPress={() => navigate("users")}>Users</Button>
+            <Button variant="ghost" size="sm" className={tabCls("users")} onPress={() => navigate("users")}>
+              Users
+            </Button>
           ) : null}
-          <Button variant="ghost" size="sm" className={tabCls("settings")} onPress={() => navigate("settings")}>Settings</Button>
+          <Button variant="ghost" size="sm" className={tabCls("settings")} onPress={() => navigate("settings")}>
+            Settings
+          </Button>
           {extraNav.map((l) => (
             // Companion tools live OUTSIDE this SPA (a separate static page/worker route), so
             // open them in a new tab. A same-tab click would be caught by the client router
@@ -56,19 +80,35 @@ export default function RootLayout() {
               href={l.href}
               target="_blank"
               rel="noopener noreferrer"
-              className="rounded-md px-2.5 py-1.5 text-sm text-fg-muted transition-colors hover:bg-surface-muted hover:text-fg"
+              className="rounded-md px-2.5 py-1.5 text-small text-fg-muted transition-colors hover:bg-surface-muted hover:text-fg"
             >
               {l.label}
             </a>
           ))}
-        </nav>
-        <span className="ml-3 text-fg-subtle">{cfg.tenant}</span>
-        <Button variant="ghost" size="sm" onPress={reconfigure}>sign out</Button>
-      </div>
+        </Topbar.Nav>
+        <Topbar.Actions>
+          <Badge color="grey" label={cfg.tenant} />
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+            onPress={() => setTheme(theme === "dark" ? "light" : "dark")}
+          >
+            {theme === "dark" ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
+          </Button>
+          <Button variant="ghost" size="sm" onPress={reconfigure}>
+            sign out
+          </Button>
+        </Topbar.Actions>
+      </Topbar>
       {error ? (
-        <div className="mx-7 mt-2 rounded-lg border border-danger bg-surface-card px-4 py-2.5 text-sm text-danger">{error}</div>
+        <Card variant="outlined" padding="none" className="mx-7 mt-2 border-danger px-4 py-2.5">
+          <Text size="small" className="text-danger">
+            {error}
+          </Text>
+        </Card>
       ) : null}
       <Outlet />
-    </>
+    </div>
   );
 }

package/src/routes/home.tsx

@@ -9,17 +9,31 @@ import type { BlockType, Page } from "../types";
 export default createPage()
   .route("/")
   .render(function Home() {
-    const { api, setError } = useApp();
+    const { api, setError, collections } = useApp();
     const navigate = useNavigate();
     const [pages, setPages] = useState<Page[]>([]);
     const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
 
+    // Collections-only deployment: `/` is the Pages list, so land on the first
+    // collection instead. Without this, hiding the tab still leaves the landing page
+    // showing an empty page list — and still fetching pages, which errors outright on a
+    // deployment that never spread cmsSchema.
+    const hidePages = typeof window !== "undefined" && window.PRAMEN_CMS_EDITOR?.hidePages === true;
+    const firstCollection = collections[0]?.slug;
+
+    useEffect(() => {
+      if (hidePages && firstCollection) navigate("collection", { params: { slug: firstCollection }, replace: true });
+    }, [hidePages, firstCollection, navigate]);
+
     const refreshPages = () => api.listPages().then(setPages).catch((e) => setError(errMsg(e)));
     useEffect(() => {
+      if (hidePages) return;
       refreshPages();
       api.listBlockTypes().then(setBlockTypes).catch((e) => setError(errMsg(e)));
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [api]);
+    }, [api, hidePages]);
+
+    if (hidePages && firstCollection) return null;
 
     return (
       <PageList