@pramen/cms-editor 0.0.56 → 0.0.57

package/package.json

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

package/src/api.ts

@@ -37,6 +37,10 @@ export function isTokenExpired(token: string): boolean {
 
 const LS = "pramen.cmsEditor";
 
+/** The columns the page LIST renders — id (to open the row), title, slug, locale, status.
+ * `typeId` rides along so a caller can tell which type a row belongs to without a join. */
+export const PAGE_LIST_COLUMNS = ["id", "typeId", "title", "slug", "locale", "status"] as const;
+
 /**
  * The session for this page load.
  *
@@ -132,10 +136,19 @@ export class Api {
   listBlockTypes = () => this.call<BlockType[]>("listBlockTypes");
   listContentTypes = () => this.call<ContentType[]>("listContentTypes");
   getContentType = (id: string) => this.call<ContentType | null>("getContentType", { id });
-  /** All pages, or just one content type's (by SLUG). The server does the filtering — see
-   * `listPages` in @pramen/cms; it caps at 100 rows, so narrowing client-side would drop the
-   * tail of every type on a busy deployment. */
-  listPages = (contentType?: string) => this.call<Page[]>("listPages", contentType ? { contentType } : undefined);
+  /** All pages, or just one content type's (by SLUG), one page of them at a time. The server
+   * does the filtering AND the paging — see `listPages` in @pramen/cms; it caps its result,
+   * so narrowing or counting client-side would be narrowing an already-truncated list.
+   *
+   * `PAGE_LIST_COLUMNS` is the projection the list screen actually renders. The full page row
+   * carries every SEO column, the schedule stamps and the whole `fields` bag; asking for all
+   * of it to draw five columns is the D1-over-RPC shape that made lists hang (GitHub #22).
+   * The editor fetches a whole page by id (`getPageById`) when it needs the wide row. */
+  listPages = (opts: { contentType?: string; limit?: number; offset?: number } = {}) =>
+    this.call<Page[]>("listPages", { ...opts, select: [...PAGE_LIST_COLUMNS] });
+  /** One page, wide, by id — what the page editor opens. Resolving an id against `listPages`
+   * instead can miss: that list is capped, and the editor lists one content type per tab. */
+  getPageById = (pageId: string) => this.call<Page | null>("getPageById", { pageId });
   getPagePreview = (slug: string, locale?: string) => this.call<AssembledPage>("getPage", { slug, locale, preview: true });
   listPageAudit = (pageId: string) => this.call<AuditEntry[]>("listPageAudit", { pageId });
 

package/src/app-context.tsx

@@ -95,8 +95,21 @@ interface AppContextValue {
   collections: CollectionMeta[];
   /** Content types registered on the server (from `listContentTypes`). More than one ⇒ each
    * gets its own nav tab and its own list route, instead of one pooled "Pages" list where a
-   * page and an article sit in the same column with nothing to tell them apart. */
-  contentTypes: ContentType[];
+   * page and an article sit in the same column with nothing to tell them apart.
+   *
+   * `null` means NOT ANSWERED YET, which is a different thing from "this deployment has
+   * none" and has to be told apart from it: the whole nav shape is decided by the count, so
+   * an empty array standing in for "still loading" makes every screen paint the single-type
+   * layout first and correct itself a round trip later. It also swallowed failure — a 5xx,
+   * or a session whose role cannot call `listContentTypes` — into the same value, leaving a
+   * type route showing "Loading…" over data it already had, forever. */
+  contentTypes: ContentType[] | null;
+  /** The `listContentTypes` call FAILED (as opposed to answering with none). Screens that
+   * cannot render without it say so and offer `refreshContentTypes` rather than pretending
+   * to still be loading. */
+  contentTypesFailed: boolean;
+  /** Retry `listContentTypes` — wired to the retry button on those screens. */
+  refreshContentTypes: () => void;
   /** What the SERVER says this deployment supports (from `listCmsCapabilities`) — today,
    * its declared locales. The editor renders its i18n surface off this rather than a local
    * flag, so the UI and the data can never disagree about whether the site is multilingual. */
@@ -127,7 +140,10 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
   const [cfg, setCfg] = useState<Config>(() => loadConfig(BACKEND));
   const [me, setMe] = useState<Me | null>(null);
   const [collections, setCollections] = useState<CollectionMeta[]>([]);
-  const [contentTypes, setContentTypes] = useState<ContentType[]>([]);
+  const [contentTypes, setContentTypes] = useState<ContentType[] | null>(null);
+  const [contentTypesFailed, setContentTypesFailed] = useState(false);
+  const [contentTypesNonce, setContentTypesNonce] = useState(0);
+  const refreshContentTypes = useCallback(() => setContentTypesNonce((n) => n + 1), []);
   const [cms, setCms] = useState<CmsCapabilities>(DEFAULT_CAPABILITIES);
   const [error, setError] = useState("");
   // A usable session = somewhere to call + a token that is NOT expired. An expired token
@@ -185,14 +201,31 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     // Collections drive the nav + list/edit routes. An app that registers none (or an older
     // server without the handler) just leaves the nav as-is — a failure is non-fatal.
     api.call<CollectionMeta[]>("listCollections").then(setCollections).catch(() => setCollections([]));
-    // Drives the per-type nav + list routes. A failure leaves it empty, which falls back to
-    // the single pooled "Pages" tab — the layout before types had tabs of their own.
-    api.listContentTypes().then(setContentTypes).catch(() => setContentTypes([]));
     // A server older than this handler leaves the monolingual default, which is the safe
-    // way round: the i18n surface stays hidden rather than half-rendered.
-    api.call<CmsCapabilities>("listCmsCapabilities").then(setCms).catch(() => setCms(DEFAULT_CAPABILITIES));
+    // way round: the i18n surface stays hidden rather than half-rendered. Merged OVER the
+    // defaults, not substituted for them, so a capability the server does not know about
+    // reads as its (closed) default rather than `undefined`.
+    api
+      .call<Partial<CmsCapabilities>>("listCmsCapabilities")
+      .then((r) => setCms({ ...DEFAULT_CAPABILITIES, ...r }))
+      .catch(() => setCms(DEFAULT_CAPABILITIES));
   }, [api, authValid]);
 
+  // Drives the per-type nav + list routes. A failure falls back to the single pooled "Pages"
+  // tab — the layout before types had tabs of their own — but is RECORDED, so a screen that
+  // genuinely cannot render without the list (the per-type route) can say the call failed and
+  // offer a retry instead of claiming to still be loading. Its own effect so that retry
+  // re-runs THIS call and not `me`/`listCollections`/the capability probe alongside it.
+  useEffect(() => {
+    if (!authValid) return;
+    let live = true;
+    api
+      .listContentTypes()
+      .then((r) => { if (live) { setContentTypes(r); setContentTypesFailed(false); } })
+      .catch(() => { if (live) { setContentTypes([]); setContentTypesFailed(true); } });
+    return () => { live = false; };
+  }, [api, authValid, contentTypesNonce]);
+
   if (!authValid) {
     // Configured external sign-in → hand off (the boot effect above navigates). Otherwise
     // fall back to the built-in Setup screen (paste a JWT).
@@ -206,6 +239,8 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     isAdmin: (me?.roles ?? []).includes("admin"),
     collections,
     contentTypes,
+    contentTypesFailed,
+    refreshContentTypes,
     cms,
     error,
     setError,

package/src/components.tsx

@@ -9,7 +9,7 @@ import { CONTROL, FieldForm, formatWhen, fromLocalInput, slugify, toLocalInput }
 import type { Config } from "./api";
 import { useApp, type Me } from "./app-context";
 import { isRichTextDoc, richTextToPlainText } from "./rich-text";
-import type { AssembledPage, AuditEntry, BlockType, CollectionMeta, ContentType, FieldDefinition, FieldValue, FieldValues, Media, Page, RegionDefinition, RenderedBlock } from "./types";
+import type { AssembledPage, AuditEntry, BlockType, CmsCapabilities, CollectionMeta, ContentType, FieldDefinition, FieldValue, 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"];
@@ -21,6 +21,31 @@ export function visibleTabs(multilingual: boolean): InspectorTab[] {
   return multilingual ? INSPECTOR_TABS : INSPECTOR_TABS.filter((t) => t !== "i18n");
 }
 
+/** Collections-only deployments hide the block/page builder entirely. Read in one place so
+ * the nav, the landing redirect and the per-type route cannot disagree about it — a deep
+ * link to `/types/:slug` used to render the very builder this flag exists to hide. */
+export function pagesHidden(): boolean {
+  return typeof window !== "undefined" && window.PRAMEN_CMS_EDITOR?.hidePages === true;
+}
+
+/**
+ * Does this deployment get one tab and one list PER CONTENT TYPE?
+ *
+ * ONE definition, used by the tab bar, the landing redirect and the page editor's back
+ * target — the same reason `visibleTabs` exists. Three places re-deriving the whole nav
+ * shape is three places that can disagree about which screen `/` is.
+ *
+ * - `null` content types mean NOT ANSWERED YET, and answer `false` without committing: the
+ *   pooled list is what a single-type deployment keeps, so painting it before the count
+ *   arrives is a flash of the exact screen the split exists to retire.
+ * - `pagesByType` is the SERVER's declaration that `listPages` understands `contentType`
+ *   (see `CmsCapabilities`). Without it the split fails open: N tabs, each showing every
+ *   type's pages under a heading naming one.
+ */
+export function splitsByType(contentTypes: ContentType[] | null, cms: CmsCapabilities, hidePages = pagesHidden()): boolean {
+  return !hidePages && cms.pagesByType && contentTypes !== null && contentTypes.length > 1;
+}
+
 // --- presentational primitives (podoba tokens; replaces styles.ts classes) ---
 
 const ROW = "flex items-center gap-3 rounded-[14px] border border-transparent bg-surface-card px-[18px] py-3.5";
@@ -106,19 +131,88 @@ function Banner({ ok, children }: { ok?: boolean; children: ReactNode }) {
 
 const Dim = ({ children }: { children: ReactNode }) => <span className="text-fg-subtle">{children}</span>;
 
+/** A one-line neutral panel with an optional way out — the loading / not-found / unknown-slug
+ * state every route needs before (or instead of) its real screen. Four routes had it written
+ * out verbatim; the copies had already drifted on which of them offered a way back. */
+export function Notice({ children, action }: { children: ReactNode; action?: ReactNode }) {
+  return (
+    <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
+      <p className="text-fg-subtle">{children}</p>
+      {action}
+    </div>
+  );
+}
+
 // --- pages list --------------------------------------------------------------
 
-/** The page list. `type` scopes it to one content type — the list is already filtered by the
- * caller, this is what makes the SCREEN say so: the heading is the type's name and the create
- * modal opens on that type instead of asking again. Omitted ⇒ the pooled list over every type,
- * which is what a single-type deployment should keep seeing. */
-export function PageList({ api, pages, blockTypes, type, onOpen, onCreated, onError }: { api: Api; pages: Page[]; blockTypes: BlockType[]; type?: ContentType; onOpen: (p: Page) => void; onCreated: () => void; onError: (s: string) => void }) {
+/** Page size for the page list. `listPages` caps 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". Same reason, same answer, as
+ * `COLLECTION_PAGE_SIZE` below. */
+const PAGE_LIST_SIZE = 50;
+
+/** The page list, loading its own rows. `type` scopes it to one content type: the fetch asks
+ * the SERVER for that type (narrowing a capped list here would drop the tail of every type),
+ * the heading is the type's name, and the create modal opens on that type instead of asking
+ * again. Omitted ⇒ the pooled list over every type, which is what a single-type deployment
+ * should keep seeing — byte for byte, including the wording.
+ *
+ * It owns the fetching (like `CollectionList`) rather than taking rows as a prop, because
+ * the two things that go wrong when a route owns them both go wrong invisibly: rows left
+ * standing from the previous type while the heading has already flipped to the new one, and
+ * a count that is really the server's cap. */
+export function PageList({ api, type, onOpen, onError }: { api: Api; type?: ContentType; onOpen: (p: Page) => void; onError: (s: string) => void }) {
   // From the SERVER (listCmsCapabilities), not a local flag — see `CmsCapabilities`.
   const { cms: { multilingual } } = useApp();
+  const [pages, setPages] = useState<Page[]>([]);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
   const [creating, setCreating] = useState(false);
+  const contentType = type?.slug;
+
+  const load = useCallback(
+    (off: number) => {
+      setLoading(true);
+      return api
+        .listPages({ contentType, limit: PAGE_LIST_SIZE, offset: off })
+        .then((r) => {
+          setPages((prev) => (off === 0 ? r : [...prev, ...r]));
+          // A full page means there is probably more; a short one is definitely the end.
+          setHasMore(r.length === PAGE_LIST_SIZE);
+          setOffset(off + r.length);
+        })
+        .catch((e) => onError(errMsg(e)))
+        .finally(() => setLoading(false));
+    },
+    [api, contentType, onError],
+  );
+
+  // Clearing first is the point: buzola renders the same component instance across a
+  // params-only change (`/types/a` → `/types/b`), so without this the previous type's rows
+  // sit under the new type's heading until the fetch lands — and permanently if it fails.
+  useEffect(() => {
+    setPages([]);
+    setOffset(0);
+    setHasMore(false);
+    void load(0);
+  }, [load]);
+
+  // Only for the empty state's hint, and it is a GLOBAL list — keyed on `api` alone so
+  // switching type tabs doesn't refetch it.
+  useEffect(() => {
+    api.listBlockTypes().then(setBlockTypes).catch((e) => onError(errMsg(e)));
+  }, [api, onError]);
+
+  // "pages", not "entries": these are pages of a content type, and a single-type deployment
+  // must read exactly as it did before types had tabs. `type.name` is a label a host writes
+  // (often plural, it labels the tab), so it heads the screen and is never bent into a noun
+  // phrase — "+ New Articles" is what guessing at grammar produces.
+  const count = pages.length === 0 ? "None yet" : pages.length === 1 ? "1 page total" : `${pages.length}${hasMore ? "+" : ""} pages total`;
   return (
     <>
-      <Hero lead={type?.name ?? "Pages"} em={pages.length === 0 ? "None yet" : pages.length === 1 ? "1 entry total" : `${pages.length} entries total`}>
+      <Hero lead={type?.name ?? "Pages"} em={loading && pages.length === 0 ? "Loading…" : count}>
         <Cta text="Let's" em="create something">
           <Button className="shrink-0" onPress={() => setCreating(true)}>+ New page</Button>
         </Cta>
@@ -133,26 +227,37 @@ export function PageList({ api, pages, blockTypes, type, onOpen, onCreated, onEr
               <Pill status={p.status}>{p.status}</Pill>
             </div>
           ))}
-          {pages.length === 0 ? <p className="text-fg-subtle">No entries yet. {blockTypes.length === 0 ? "Define block types + a content type first (via the API/admin)." : "Create one."}</p> : null}
+          {!loading && pages.length === 0 ? <p className="text-fg-subtle">No pages yet. {blockTypes.length === 0 ? "Define block types + a content type first (via the API/admin)." : "Create one."}</p> : null}
         </div>
+        {hasMore ? (
+          <div className="mt-4 flex justify-center">
+            <Button variant="ghost" onPress={() => void load(offset)} isDisabled={loading}>{loading ? "Loading…" : "Load more"}</Button>
+          </div>
+        ) : null}
       </div>
-      {creating ? <CreatePage api={api} type={type} onClose={() => setCreating(false)} onCreated={() => { setCreating(false); onCreated(); }} onError={onError} /> : null}
+      {creating ? <CreatePage api={api} type={type} onClose={() => setCreating(false)} onCreated={() => { setCreating(false); void load(0); }} onError={onError} /> : null}
     </>
   );
 }
 
 function CreatePage({ api, type, onClose, onCreated, onError }: { api: Api; type?: ContentType; onClose: () => void; onCreated: () => void; onError: (s: string) => void }) {
-  const [cts, setCts] = useState<ContentType[]>([]);
+  // The app context already holds this list — a second fetch per modal open is a second
+  // cache of one list in one tree, with its own error policy.
+  const { contentTypes } = useApp();
+  const cts = contentTypes ?? [];
   const [typeId, setTypeId] = useState(type?.id ?? "");
   const [title, setTitle] = useState("");
   const [slug, setSlug] = useState("");
+  // Re-sync, not seed-once. On a type-scoped list the type is decided by the screen you are
+  // on — and that screen can change UNDER an open modal: history navigation isn't blocked by
+  // the overlay the way a topbar click is, and buzola keeps this component instance across
+  // it. Seeded once, the modal kept filing the new screen's page under the old screen's type,
+  // with the picker hidden so nothing on screen said so and `createPage` trusting the id.
   useEffect(() => {
-    // On a type-scoped list the type is already decided by the screen you are on, so don't
-    // ask — and don't fetch the other types just to render a picker that must not move the
-    // entry out from under that screen.
-    if (type) return;
-    api.listContentTypes().then((r) => { setCts(r); if (r[0]) setTypeId(r[0].id); }).catch((e) => onError(errMsg(e)));
-  }, [api, type, onError]);
+    if (type) { setTypeId(type.id); return; }
+    const list = contentTypes ?? [];
+    setTypeId((cur) => (cur && list.some((c) => c.id === cur) ? cur : list[0]?.id ?? ""));
+  }, [type, contentTypes]);
   const create = async () => {
     try {
       await api.call("createPage", { typeId, title, slug: slug || slugify(title) });
@@ -163,7 +268,13 @@ function CreatePage({ api, type, onClose, onCreated, onError }: { api: Api; type
   };
   return (
     <Modal onClose={onClose}>
-      <ModalTitle>Create a <Dim>new page</Dim> and define the essentials<Dim>.</Dim></ModalTitle>
+      {/* Name the type when the picker is hidden. Otherwise the whole modal says "page" and
+          nothing on it says WHICH type the page is being filed under — on a per-type list
+          that is the one fact the screen is supposed to be carrying. */}
+      <ModalTitle>
+        Create a <Dim>new page</Dim>
+        {type ? <> in <Dim>{type.name}</Dim></> : null} and define the essentials<Dim>.</Dim>
+      </ModalTitle>
       <div className="flex flex-col gap-4">
         <div className={`w-full flex-col gap-2 ${type ? "hidden" : "flex"}`}>
           <span className="text-sm font-medium text-fg">Content type</span>

package/src/routes/_layout.tsx

@@ -7,12 +7,35 @@ import { Button, Card, MoonIcon, SunIcon, Text, Topbar } from "@podoba/react";
 import { useEffect, useState } from "react";
 import { useApp } from "../app-context";
 import { BRAND } from "../brand";
+import { pagesHidden, splitsByType } from "../components";
 import { opensInSameTab } from "../mount";
 
 const THEME_KEY = "pramen.cms.theme";
 
+/**
+ * The slug segment under `prefix`, DECODED.
+ *
+ * `useRoute().pathname` comes off a `URL`, so it is percent-encoded; the slugs it is compared
+ * against are the raw values the server stored. buzola encodes when it builds an href and
+ * decodes into `params` when it matches, so routing is unaffected — only this comparison was,
+ * and a content type called `články` navigated correctly to a tab bar with nothing lit.
+ *
+ * A malformed sequence (`%zz`) throws in `decodeURIComponent`; that cannot match any slug
+ * either way, so it degrades to no highlight rather than tearing down the chrome.
+ */
+export function segmentAt(pathname: string, prefix: string): string | undefined {
+  if (!pathname.startsWith(prefix)) return undefined;
+  const raw = pathname.slice(prefix.length).split("/")[0];
+  if (!raw) return undefined;
+  try {
+    return decodeURIComponent(raw);
+  } catch {
+    return raw;
+  }
+}
+
 export default function RootLayout() {
-  const { isAdmin, collections, contentTypes, error, reconfigure, confirmNavigation } = useApp();
+  const { isAdmin, collections, contentTypes, cms, error, reconfigure, confirmNavigation } = useApp();
   const navigate = useNavigate();
   const { pathname } = useRoute();
 
@@ -34,9 +57,9 @@ export default function RootLayout() {
   }, [theme]);
 
   // The active collection slug, if we're under /collections/:slug(/...).
-  const collectionSlug = pathname.startsWith("/collections/") ? pathname.split("/")[2] : undefined;
+  const collectionSlug = segmentAt(pathname, "/collections/");
   // …and the active content type, under /types/:slug.
-  const typeSlug = pathname.startsWith("/types/") ? pathname.split("/")[2] : undefined;
+  const typeSlug = segmentAt(pathname, "/types/");
 
   // "Pages" stays lit while editing a page (/pages/:id) too — but only on a deployment that
   // still HAS a pooled Pages tab. Split by type, the page editor lights nothing: the route
@@ -50,12 +73,20 @@ export default function RootLayout() {
     : pathname.startsWith("/settings") ? "settings"
     : "";
 
-  const tabCls = (key: string) => (active === key ? "bg-surface-muted text-fg" : "text-fg-muted");
+  // `aria-current` alongside the class: split by type the nav is N mutually-exclusive tabs
+  // whose only "you are here" cue is a background tint, which is invisible to a screen reader
+  // and marginal for anyone who cannot see the tint.
+  const tabProps = (key: string) => ({
+    className: active === key ? "bg-surface-muted text-fg" : "text-fg-muted",
+    ...(active === key ? { "aria-current": "page" as const } : {}),
+  });
 
   // 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;
+  const hidePages = pagesHidden();
+  // Same rule as the landing redirect and the page editor's back target — see `splitsByType`.
+  const splitByType = splitsByType(contentTypes, cms, hidePages);
 
   // See the extraNav comment below. The rules live in `mount.ts` beside the containment they
   // depend on; what this supplies is the URL the BROWSER will resolve a relative href
@@ -89,38 +120,38 @@ export default function RootLayout() {
               the plain "Pages" tab — there is nothing there to separate, and splitting it
               would put the deployment's own type name where a generic label reads better.
               The label is the type's `name`, so a host that wants a plural tab writes one. */}
-          {hidePages ? null : contentTypes.length > 1 ? (
-            contentTypes.map((t) => (
+          {hidePages ? null : splitByType ? (
+            (contentTypes ?? []).map((t) => (
               <Button
                 key={t.slug}
                 variant="ghost"
                 size="sm"
-                className={tabCls(`type:${t.slug}`)}
+                {...tabProps(`type:${t.slug}`)}
                 onPress={guarded(() => navigate("type", { params: { slug: t.slug } }))}
               >
                 {t.name}
               </Button>
             ))
           ) : (
-            <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={guarded(() => navigate("home"))}>
+            <Button variant="ghost" size="sm" {...tabProps("pages")} onPress={guarded(() => navigate("home"))}>
               Pages
             </Button>
           )}
           {collections.map((c) => (
-            <Button key={c.slug} variant="ghost" size="sm" className={tabCls(`col:${c.slug}`)} onPress={guarded(() => navigate("collection", { params: { slug: c.slug } }))}>
+            <Button key={c.slug} variant="ghost" size="sm" {...tabProps(`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={guarded(() => navigate("media"))}>
+          <Button variant="ghost" size="sm" {...tabProps("media")} onPress={guarded(() => navigate("media"))}>
             Media
           </Button>
           {isAdmin ? (
-            <Button variant="ghost" size="sm" className={tabCls("users")} onPress={guarded(() => navigate("users"))}>
+            <Button variant="ghost" size="sm" {...tabProps("users")} onPress={guarded(() => navigate("users"))}>
               Users
             </Button>
           ) : null}
-          <Button variant="ghost" size="sm" className={tabCls("settings")} onPress={guarded(() => navigate("settings"))}>
+          <Button variant="ghost" size="sm" {...tabProps("settings")} onPress={guarded(() => navigate("settings"))}>
             Settings
           </Button>
           {extraNav.map((l) => (

package/src/routes/collection-item.tsx

@@ -5,7 +5,7 @@
 import { createPage, useNavigate } from "@buzola/router";
 import { Button } from "@podoba/react";
 import { useApp } from "../app-context";
-import { CollectionEditor } from "../components";
+import { CollectionEditor, Notice } from "../components";
 
 export default createPage()
   .params({ slug: "string", id: "string" })
@@ -18,10 +18,9 @@ export default createPage()
 
     if (!def) {
       return (
-        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
-          <p className="text-fg-subtle">{collections.length === 0 ? "Loading…" : `Unknown collection: ${params.slug}`}</p>
-          {collections.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Pages</Button> : null}
-        </div>
+        <Notice action={collections.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Pages</Button> : undefined}>
+          {collections.length === 0 ? "Loading…" : `Unknown collection: ${params.slug}`}
+        </Notice>
       );
     }
     return (

package/src/routes/collection.tsx

@@ -5,7 +5,7 @@
 import { createPage, useNavigate } from "@buzola/router";
 import { Button } from "@podoba/react";
 import { useApp } from "../app-context";
-import { CollectionList } from "../components";
+import { CollectionList, Notice } from "../components";
 
 export default createPage()
   .params({ slug: "string" })
@@ -18,10 +18,9 @@ export default createPage()
     if (!def) {
       // Collections load async; before they arrive (or for a bad slug) show a neutral state.
       return (
-        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
-          <p className="text-fg-subtle">{collections.length === 0 ? "Loading…" : `Unknown collection: ${params.slug}`}</p>
-          {collections.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Pages</Button> : null}
-        </div>
+        <Notice action={collections.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Pages</Button> : undefined}>
+          {collections.length === 0 ? "Loading…" : `Unknown collection: ${params.slug}`}
+        </Notice>
       );
     }
     return (

package/src/routes/home.tsx

@@ -1,56 +1,55 @@
 // Home route (`/`): the page list. Opening a page navigates to /pages/:pageId.
 
 import { createPage, useNavigate } from "@buzola/router";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useApp } from "../app-context";
-import { PageList, errMsg } from "../components";
-import type { BlockType, Page } from "../types";
+import { PageList, pagesHidden, splitsByType } from "../components";
 
 export default createPage()
   .route("/")
   .render(function Home() {
-    const { api, setError, collections, contentTypes } = useApp();
+    const { api, setError, collections, contentTypes, cms } = 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 hidePages = pagesHidden();
     const firstCollection = collections[0]?.slug;
     // With more than one content type each gets its own tab and its own list (`/types/:slug`),
     // so the pooled list here has no tab of its own to be reached from and would just be a
     // fourth way to see the same rows. Land on the first type instead. One type (or none, on a
     // server too old to answer) keeps the pooled list — that IS the whole CMS there.
-    const splitByType = !hidePages && contentTypes.length > 1;
-    const firstType = contentTypes[0]?.slug;
+    const splitByType = splitsByType(contentTypes, cms, hidePages);
+    // A content type must have a non-empty slug (the server refuses one), but this is data
+    // from a server this build does not control, and an empty slug builds `/types/` — a path
+    // the router drops the empty segment from, so it matches nothing. Skip such a type rather
+    // than redirect into a route that cannot match.
+    const firstType = (contentTypes ?? []).find((t) => t.slug !== "")?.slug;
+    // ONE condition for the redirect and for the bail below. Gated differently, a split
+    // deployment whose first type has no usable slug redirected nowhere and rendered nothing:
+    // a permanently blank `/`, which the wordmark leads straight back to.
+    const toType = splitByType && firstType !== undefined ? firstType : undefined;
 
     useEffect(() => {
       if (hidePages && firstCollection) navigate("collection", { params: { slug: firstCollection }, replace: true });
-      else if (splitByType && firstType) navigate("type", { params: { slug: firstType }, replace: true });
-    }, [hidePages, firstCollection, splitByType, firstType, navigate]);
+      else if (toType !== undefined) navigate("type", { params: { slug: toType }, replace: true });
+    }, [hidePages, firstCollection, toType, navigate]);
 
-    const refreshPages = () => api.listPages().then(setPages).catch((e) => setError(errMsg(e)));
-    useEffect(() => {
-      if (hidePages || splitByType) return;
-      refreshPages();
-      api.listBlockTypes().then(setBlockTypes).catch((e) => setError(errMsg(e)));
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [api, hidePages, splitByType]);
-
-    if (hidePages && firstCollection) return null;
-    if (splitByType) return null;
+    // `hidePages` means this deployment has no block/page builder at all, so `/` never falls
+    // through to the page list here — fetching pages is exactly what the flag says not to do
+    // (on a deployment that never spread `cmsSchema` it errors outright). It hands off to the
+    // first collection, or says so when there is none to hand off to.
+    // (Nothing rendered when there is no collection either: `collections` is empty both while
+    // it loads and when a deployment registers none, so any message here would be wrong half
+    // the time. The layout's chrome is still on screen — the tabs are the way out.)
+    if (hidePages) return null;
+    if (toType !== undefined) return null;
+    // Not answered yet ≠ "this deployment has one type". Rendering the pooled list before
+    // `listContentTypes` lands paints — and fetches — the very screen the split exists to
+    // retire, then redirects away from it a round trip later.
+    if (contentTypes === null) return null;
 
-    return (
-      <PageList
-        api={api}
-        pages={pages}
-        blockTypes={blockTypes}
-        onOpen={(p) => navigate("page", { params: { pageId: p.id } })}
-        onCreated={refreshPages}
-        onError={setError}
-      />
-    );
+    return <PageList api={api} onOpen={(p) => navigate("page", { params: { pageId: p.id } })} onError={setError} />;
   });