@pramen/cms-editor 0.0.53 → 0.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "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

@@ -132,7 +132,10 @@ export class Api {
   listBlockTypes = () => this.call<BlockType[]>("listBlockTypes");
   listContentTypes = () => this.call<ContentType[]>("listContentTypes");
   getContentType = (id: string) => this.call<ContentType | null>("getContentType", { id });
-  listPages = () => this.call<Page[]>("listPages");
+  /** 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);
   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

@@ -8,7 +8,7 @@ import { createContext, use, useCallback, useEffect, useMemo, useRef, useState }
 import { Api, clearConfig, isTokenExpired, loadConfig, saveConfig, type Config } from "./api";
 import { BRAND, SETUP_TITLE, type BrandConfig } from "./brand";
 import { readBackend, type BackendHost } from "./mount";
-import { DEFAULT_CAPABILITIES, type CmsCapabilities, type CollectionMeta, type JsonValue } from "./types";
+import { DEFAULT_CAPABILITIES, type CmsCapabilities, type CollectionMeta, type ContentType, type JsonValue } from "./types";
 
 declare global {
   interface Window {
@@ -27,7 +27,7 @@ declare global {
       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 }[];
+      extraNav?: { label: string; href: string; target?: "_blank" | "_self" }[];
       /** The wordmark in the topbar, on the Setup screen, and in the browser tab.
        *
        * This editor ships as a package an agency deploys FOR ITS CLIENT, so the default
@@ -72,6 +72,10 @@ interface AppContextValue {
   /** Collections registered on the server (from `listCollections`) — drives the nav + the
    * generic list/edit routes. Empty when the server registers none. */
   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[];
   /** 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. */
@@ -102,6 +106,7 @@ 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 [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
@@ -144,6 +149,9 @@ 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));
@@ -161,6 +169,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     me,
     isAdmin: (me?.roles ?? []).includes("admin"),
     collections,
+    contentTypes,
     cms,
     error,
     setError,

package/src/buzola.gen.ts

@@ -12,8 +12,9 @@ const Route3 = () => import('./routes/home').then(m => ({ default: m.default.com
 const Route4 = () => import('./routes/media').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
 const Route5 = () => import('./routes/page').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
 const Route6 = () => import('./routes/settings').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route7 = () => import('./routes/users').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route8 = () => import('./routes/_404').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route7 = () => import('./routes/type').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route8 = () => import('./routes/users').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route9 = () => import('./routes/_404').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
 
 // Module augmentation for type-safe page-centric routing
 declare module '@buzola/router' {
@@ -24,6 +25,7 @@ declare module '@buzola/router' {
     'media': {};
     'page': { pageId: string; tab?: string };
     'settings': {};
+    'type': { slug: string };
     'users': {};
   }
 }
@@ -36,6 +38,7 @@ export const pageRegistry: Record<string, string> = {
   'media': '/media',
   'page': '/pages/:pageId',
   'settings': '/settings',
+  'type': '/types/:slug',
   'users': '/users',
 };
 
@@ -80,15 +83,21 @@ const routeConfigs: RouteConfig[] = [
         preload: Route6,
       },
       {
-        path: '/users',
+        path: '/type',
+        matchPath: '/types/:slug',
         component: lazy(Route7),
         preload: Route7,
       },
       {
-        path: '/:__notFound+',
+        path: '/users',
         component: lazy(Route8),
         preload: Route8,
       },
+      {
+        path: '/:__notFound+',
+        component: lazy(Route9),
+        preload: Route9,
+      },
     ],
   },
 ];

package/src/components.tsx

@@ -108,13 +108,17 @@ const Dim = ({ children }: { children: ReactNode }) => <span className="text-fg-
 
 // --- pages list --------------------------------------------------------------
 
-export function PageList({ api, pages, blockTypes, onOpen, onCreated, onError }: { api: Api; pages: Page[]; blockTypes: BlockType[]; onOpen: (p: Page) => void; onCreated: () => void; onError: (s: string) => void }) {
+/** 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 }) {
   // From the SERVER (listCmsCapabilities), not a local flag — see `CmsCapabilities`.
   const { cms: { multilingual } } = useApp();
   const [creating, setCreating] = useState(false);
   return (
     <>
-      <Hero lead="Pages" em={pages.length === 0 ? "None yet" : pages.length === 1 ? "1 page total" : `${pages.length} pages total`}>
+      <Hero lead={type?.name ?? "Pages"} em={pages.length === 0 ? "None yet" : pages.length === 1 ? "1 entry total" : `${pages.length} entries total`}>
         <Cta text="Let's" em="create something">
           <Button className="shrink-0" onPress={() => setCreating(true)}>+ New page</Button>
         </Cta>
@@ -129,22 +133,26 @@ export function PageList({ api, pages, blockTypes, onOpen, onCreated, onError }:
               <Pill status={p.status}>{p.status}</Pill>
             </div>
           ))}
-          {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}
+          {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}
         </div>
       </div>
-      {creating ? <CreatePage api={api} onClose={() => setCreating(false)} onCreated={() => { setCreating(false); onCreated(); }} onError={onError} /> : null}
+      {creating ? <CreatePage api={api} type={type} onClose={() => setCreating(false)} onCreated={() => { setCreating(false); onCreated(); }} onError={onError} /> : null}
     </>
   );
 }
 
-function CreatePage({ api, onClose, onCreated, onError }: { api: Api; onClose: () => void; onCreated: () => void; onError: (s: string) => void }) {
+function CreatePage({ api, type, onClose, onCreated, onError }: { api: Api; type?: ContentType; onClose: () => void; onCreated: () => void; onError: (s: string) => void }) {
   const [cts, setCts] = useState<ContentType[]>([]);
-  const [typeId, setTypeId] = useState("");
+  const [typeId, setTypeId] = useState(type?.id ?? "");
   const [title, setTitle] = useState("");
   const [slug, setSlug] = useState("");
   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, onError]);
+  }, [api, type, onError]);
   const create = async () => {
     try {
       await api.call("createPage", { typeId, title, slug: slug || slugify(title) });
@@ -157,7 +165,7 @@ function CreatePage({ api, onClose, onCreated, onError }: { api: Api; onClose: (
     <Modal onClose={onClose}>
       <ModalTitle>Create a <Dim>new page</Dim> and define the essentials<Dim>.</Dim></ModalTitle>
       <div className="flex flex-col gap-4">
-        <div className="flex w-full flex-col gap-2">
+        <div className={`w-full flex-col gap-2 ${type ? "hidden" : "flex"}`}>
           <span className="text-sm font-medium text-fg">Content type</span>
           {/* Visible cards, not a dropdown: the type is an easy-to-miss choice, and picking the
               wrong one puts the entry under a different route. Cards make the selection deliberate. */}

package/src/mount.ts

@@ -17,7 +17,8 @@
 
 import type { BuzolaNavigateEvent, NavigationAdapter } from "@buzola/router";
 
-/** A mount path must be a chain of path segments rooted at the origin.
+/** A mount path must be a chain of non-empty path segments rooted at the origin, written
+ * only in characters that `URL.pathname` returns UNENCODED.
  *
  * Rooted, and required to say so: buzola prepends the base path to every href it builds, so
  * anything that is not already an absolute path resolves somewhere unintended. A leading
@@ -26,10 +27,14 @@ import type { BuzolaNavigateEvent, NavigationAdapter } from "@buzola/router";
  * mounted. `//cdn.example.com` is rejected for the same reason: protocol-relative, and the
  * natural product of `"/" + prefix` where the prefix already carried a slash.
  *
- * Segments only, too: a value carrying `?`, `#` or `\` is not a mount path, and each breaks
- * routing in its own silent way (a query swallows the rest of every href; a backslash
- * resolves off-site while looking local). */
-const MOUNT_PATH = /^\/[^/\\?#][^\\?#]*$/;
+ * The character set is not a style choice. Every comparison against a mount path in this
+ * file — and buzola's own `stripBasePath`, which we cannot change — is a raw `startsWith`
+ * against a `URL.pathname`, which is percent-ENCODED. Admit a character the parser encodes
+ * and the two sides can never match: a mount of `/správa` is compared against
+ * `/spr%C3%A1va/...` and EVERY in-prefix url reads as off-prefix. So the admitted set is
+ * derived from the parser rather than guessed — `"<>^`{}`, backslash, space and everything
+ * non-ASCII all encode, and are refused here. */
+const MOUNT_PATH = /^(?:\/[A-Za-z0-9!$%&'()*+,\-.:;=@[\]_|~]+)+$/;
 
 /**
  * Normalize the mount node's declared prefix to buzola's shape: `""` for the origin root,
@@ -43,12 +48,16 @@ const MOUNT_PATH = /^\/[^/\\?#][^\\?#]*$/;
  */
 export function resolveBasePath(raw?: string | null): string {
   const trimmed = (raw ?? "").trim();
-  if (trimmed === "" || trimmed === "/") return "";
-  if (!MOUNT_PATH.test(trimmed)) {
+  // Trailing slashes come off FIRST, so `MOUNT_PATH` only ever judges the canonical form
+  // and a value that is nothing but slashes collapses to the root rather than being warned
+  // about as malformed.
+  const canonical = trimmed.replace(/\/+$/, "");
+  if (canonical === "") return "";
+  if (!MOUNT_PATH.test(canonical)) {
     console.warn(`pramen/cms-editor: ignoring unusable mount path ${JSON.stringify(trimmed)} — mounting at the origin root.`);
     return "";
   }
-  return trimmed.replace(/\/+$/, "");
+  return canonical;
 }
 
 /** Read the prefix the shell stamped onto the mount node. */
@@ -86,13 +95,19 @@ export function scopeToBasePath(inner: NavigationAdapter, basePath: string): Nav
   // Keyed by the caller's handler so `removeEventListener` can find the wrapper it added;
   // without this the router's `start()` teardown would leave the listener attached.
   const wrappers = new Map<Handler, Handler>();
+  // Spread, not a hand-written list of the seven methods. Enumerating them forwards
+  // correctly today but only fails safe by luck: tsc catches a newly REQUIRED member of
+  // `NavigationAdapter`, while an OPTIONAL one is silently dropped — and the next planned
+  // buzola bump (past ^0.0.12, for `router.leaveApp`) is exactly where such a member would
+  // arrive. Overriding the two listener methods is the whole of what this wrapper does.
   return {
-    getCurrentURL: () => inner.getCurrentURL(),
-    navigate: (url, options) => inner.navigate(url, options),
-    back: () => inner.back(),
-    forward: () => inner.forward(),
-    getState: () => inner.getState(),
+    ...inner,
     addEventListener(type, handler) {
+      // Adding the same handler twice would attach two wrappers to the inner adapter while
+      // the map kept only the second, so the first could never be removed and would keep
+      // feeding a torn-down router. Nothing does this today (`Router.start()` mints a fresh
+      // closure per call), which is precisely why it should be closed while it is free.
+      if (wrappers.has(handler)) return;
       const wrapper: Handler = (event) => {
         // A malformed destination is not ours to claim.
         let pathname: string;
@@ -115,6 +130,51 @@ export function scopeToBasePath(inner: NavigationAdapter, basePath: string): Nav
   };
 }
 
+/**
+ * Whether a host-configured nav link may navigate the CURRENT tab.
+ *
+ * The default for `extraNav` is a new tab, because `_404.tsx` registers the catch-all
+ * `/:__notFound+`: an unmounted editor's router matches every same-origin path, so a
+ * same-tab click would land on the in-app 404 instead of the tool. `target: "_self"` asks
+ * for the co-hosted case, and is honoured only where it cannot strand the user.
+ *
+ * Lives here, not in the layout, for two reasons: these are the same containment rules
+ * `scopeToBasePath` enforces and they belong beside them, and a predicate that decides
+ * whether a click escapes the SPA has to be testable without a DOM. `documentUrl` is a
+ * PARAMETER rather than a read of `window.location` for the same reason — and because it
+ * is the one input that must not be guessed:
+ *
+ *   - Resolve against `location.origin` and a relative href like `"curate"` is judged as
+ *     `/curate` while the browser navigates to `<current dir>/curate`. Off-prefix by the
+ *     check, in-prefix in fact, so the link lands on the very 404 this exists to avoid.
+ *     `?tab=x` and `#top` are the same mistake with an even wider gap.
+ *   - So the caller passes the document URL the browser will itself resolve against.
+ */
+export function opensInSameTab(href: string, target: string | undefined, basePath: string, documentUrl: string): boolean {
+  if (target !== "_self") return false;
+  let url: URL;
+  let docOrigin: string;
+  try {
+    url = new URL(href, documentUrl);
+    docOrigin = new URL(documentUrl).origin;
+  } catch {
+    return false;
+  }
+  // `new URL` happily parses `javascript:` and `data:`, and their `pathname` is an opaque
+  // string that trivially fails any containment test — so without this they would take the
+  // same-tab branch and shed the `rel` that used to confine them. A url with no hierarchical
+  // path cannot be reasoned about as "inside or outside the mount"; the answer is no.
+  if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+  // Cross-origin ALWAYS escapes on its own — the catch-all can only claim same-origin paths
+  // — so it is safe in the same tab whether or not this editor is mounted. That makes an
+  // external tool the one configuration that works at the origin root, which is the opposite
+  // of what a bare `basePath` check concludes.
+  if (url.origin !== docOrigin) return true;
+  // Same origin: safe only where the router will not claim it. At the root `isWithinBasePath`
+  // is true for everything, so this correctly refuses every same-origin `_self` there.
+  return !isWithinBasePath(url.pathname, basePath);
+}
+
 /** The backend the shell declared: which Worker to call, and as which tenant.
  *
  * When present these are NOT read from (or written to) localStorage — the server knows

package/src/routes/_layout.tsx

@@ -2,24 +2,28 @@
 // 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 { Outlet, useNavigate, useRoute, useRouter } from "@buzola/router";
 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 { opensInSameTab } from "../mount";
 
 const THEME_KEY = "pramen.cms.theme";
 
 export default function RootLayout() {
-  const { isAdmin, collections, error, reconfigure, confirmNavigation } = useApp();
+  const { isAdmin, collections, contentTypes, 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.
+  // without this the topbar silently discards unsaved edits. An `extraNav` link that opens a
+  // NEW tab leaves this document alone and needs no guard; one honoured as `_self` is a real
+  // cross-document navigation, so it takes the guard too (below). `beforeunload` is not a
+  // fallback for it — only `PageEditor` registers one, so a dirty CollectionEditor form would
+  // otherwise be discarded with no prompt of any kind.
   const guarded = (go: () => void) => () => { if (confirmNavigation()) go(); };
 
   // Dark mode: podoba tokens flip under `[data-theme="dark"]` — no `dark:` prefixes.
@@ -31,9 +35,15 @@ export default function RootLayout() {
 
   // The active collection slug, if we're under /collections/:slug(/...).
   const collectionSlug = pathname.startsWith("/collections/") ? pathname.split("/")[2] : undefined;
+  // …and the active content type, under /types/:slug.
+  const typeSlug = pathname.startsWith("/types/") ? pathname.split("/")[2] : undefined;
 
-  // "Pages" stays lit while editing a page (/pages/:id) too.
+  // "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
+  // carries a page id and nothing else, so which type's tab to light isn't knowable here
+  // without fetching the page the editor is already fetching.
   const active = collectionSlug ? `col:${collectionSlug}`
+    : typeSlug ? `type:${typeSlug}`
     : pathname.startsWith("/pages") || pathname === "/" ? "pages"
     : pathname.startsWith("/media") ? "media"
     : pathname.startsWith("/users") ? "users"
@@ -47,6 +57,13 @@ export default function RootLayout() {
   // Collections-only deployments hide the block/page builder entirely.
   const hidePages = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.hidePages === true : false;
 
+  // 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
+  // against — the current document, not the origin. Empty when there is no `window`, which
+  // makes every href unparseable and so degrades to the safe new-tab default.
+  const basePath = useRouter().basePath;
+  const documentUrl = typeof window !== "undefined" ? window.location.href : "";
+
   return (
     // 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.
@@ -66,7 +83,25 @@ export default function RootLayout() {
           </button>
         </Topbar.Brand>
         <Topbar.Nav aria-label="Primary">
-          {hidePages ? null : (
+          {/* One tab per content type once a deployment declares more than one: a CMS holding
+              pages AND articles pooled them into a single "Pages" list where the only thing
+              distinguishing a landing page from a news item was the slug. A single type keeps
+              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) => (
+              <Button
+                key={t.slug}
+                variant="ghost"
+                size="sm"
+                className={tabCls(`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"))}>
               Pages
             </Button>
@@ -89,24 +124,21 @@ export default function RootLayout() {
             Settings
           </Button>
           {extraNav.map((l) => (
-            // Companion tools live OUTSIDE this SPA (a separate static page/worker route), so
-            // open them in a new tab. NOT a style choice, and `target: "_self"` alone would not
-            // fix it: `_404.tsx` registers the catch-all `/:__notFound+`, so buzola matches
-            // EVERY same-origin path and intercepts it — a same-tab click and `location.assign`
-            // both land on the in-app 404 (verified). Only a cross-origin url escapes on its own.
+            // Defaults to a new tab: a companion tool is normally a separate deployment, and
+            // `_404.tsx` registers the catch-all `/:__notFound+`, so the router matches every
+            // SAME-ORIGIN path — a same-tab click would land on the in-app 404 rather than the
+            // tool. `target: "_self"` asks for the co-hosted case, and is honoured only where
+            // the router provably will not claim the url (`opensInSameTab` in mount.ts):
+            //
+            //   - cross-origin: always, mounted or not. The catch-all cannot reach another
+            //     origin, so this is the ONE case that also works at the origin root.
+            //   - same-origin: only outside the mount prefix, where `scopeToBasePath` leaves
+            //     the navigation to the browser. At the root there is no outside, so never.
             //
-            // The supported same-tab route is `router.leaveApp(href)` (@buzola/router >= 0.0.16),
-            // which releases one navigation to the browser. This package still pins ^0.0.12, so
-            // adopting it is a version bump plus a `target` option on the config item.
-            <a
-              key={l.href}
-              href={l.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              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>
+            // Anything else degrades to the new tab rather than stranding the user on a 404.
+            // (When @buzola/router moves past ^0.0.12 here, `router.leaveApp(href)` releases
+            // one navigation to the browser and makes same-origin `_self` work unmounted too.)
+            <NavLink key={`${l.href}|${l.label}`} link={l} sameTab={opensInSameTab(l.href, l.target, basePath, documentUrl)} confirm={confirmNavigation} />
           ))}
         </Topbar.Nav>
         <Topbar.Actions>
@@ -136,3 +168,29 @@ export default function RootLayout() {
     </div>
   );
 }
+
+/** One host-configured link to a companion tool.
+ *
+ * `rel="noreferrer"` is on BOTH branches. `noopener` is genuinely moot in the same tab (no
+ * new browsing context is created, so there is no `window.opener` to sever) but `noreferrer`
+ * is not: without it a click from `/_pramen/admin/pages/<id>` hands that full url to the
+ * destination as `Referer`, and `_self` is honoured for cross-origin destinations.
+ *
+ * The key pairs href with label, because two entries may legitimately point at the same href
+ * and differ only in label or target — keyed on href alone React reconciles them together
+ * and the rendered label can end up on the other one's anchor.
+ */
+function NavLink({ link, sameTab, confirm }: { link: { label: string; href: string; target?: string }; sameTab: boolean; confirm: () => boolean }) {
+  return (
+    <a
+      href={link.href}
+      rel={sameTab ? "noreferrer" : "noopener noreferrer"}
+      // Only the same-tab case unloads this document, so only it consults the guard.
+      onClick={sameTab ? (e) => { if (!confirm()) e.preventDefault(); } : undefined}
+      {...(sameTab ? {} : { target: "_blank" })}
+      className="rounded-md px-2.5 py-1.5 text-small text-fg-muted transition-colors hover:bg-surface-muted hover:text-fg"
+    >
+      {link.label}
+    </a>
+  );
+}

package/src/routes/home.tsx

@@ -9,7 +9,7 @@ import type { BlockType, Page } from "../types";
 export default createPage()
   .route("/")
   .render(function Home() {
-    const { api, setError, collections } = useApp();
+    const { api, setError, collections, contentTypes } = useApp();
     const navigate = useNavigate();
     const [pages, setPages] = useState<Page[]>([]);
     const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
@@ -20,20 +20,28 @@ export default createPage()
     // deployment that never spread cmsSchema.
     const hidePages = typeof window !== "undefined" && window.PRAMEN_CMS_EDITOR?.hidePages === true;
     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;
 
     useEffect(() => {
       if (hidePages && firstCollection) navigate("collection", { params: { slug: firstCollection }, replace: true });
-    }, [hidePages, firstCollection, navigate]);
+      else if (splitByType && firstType) navigate("type", { params: { slug: firstType }, replace: true });
+    }, [hidePages, firstCollection, splitByType, firstType, navigate]);
 
     const refreshPages = () => api.listPages().then(setPages).catch((e) => setError(errMsg(e)));
     useEffect(() => {
-      if (hidePages) return;
+      if (hidePages || splitByType) return;
       refreshPages();
       api.listBlockTypes().then(setBlockTypes).catch((e) => setError(errMsg(e)));
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [api, hidePages]);
+    }, [api, hidePages, splitByType]);
 
     if (hidePages && firstCollection) return null;
+    if (splitByType) return null;
 
     return (
       <PageList

package/src/routes/type.tsx

@@ -0,0 +1,56 @@
+// One content type's page list (`/types/:slug`). The pooled list at `/` is what a
+// single-type deployment wants; the moment a deployment declares two (pages AND articles,
+// say) that list stops being a list of anything in particular — same column, same rows,
+// nothing to tell a landing page from a news item. This route is that list scoped to one
+// type, and `_layout` gives each type a tab pointing at it.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { Button } from "@podoba/react";
+import { useEffect, useState } from "react";
+import { useApp } from "../app-context";
+import { PageList, errMsg } from "../components";
+import type { BlockType, Page } from "../types";
+
+export default createPage()
+  .params({ slug: "string" })
+  .route("/types/:slug")
+  .render(function ContentTypeRoute({ params }) {
+    const { api, contentTypes, setError } = useApp();
+    const navigate = useNavigate();
+    const [pages, setPages] = useState<Page[]>([]);
+    const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
+    const type = contentTypes.find((t) => t.slug === params.slug);
+
+    // Filtered SERVER-side (`listPages` takes the slug), so this stays correct past the
+    // handler's 100-row cap — narrowing a pooled fetch here would quietly drop the tail.
+    // Keyed on the slug, not on `type`: the fetch must not wait on listContentTypes.
+    const refreshPages = () => api.listPages(params.slug).then(setPages).catch((e) => setError(errMsg(e)));
+    useEffect(() => {
+      refreshPages();
+      api.listBlockTypes().then(setBlockTypes).catch((e) => setError(errMsg(e)));
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [api, params.slug]);
+
+    // Content types load async; before they arrive (or for a bad slug) show a neutral state
+    // rather than an unlabelled list — mirrors the collection route.
+    if (!type) {
+      return (
+        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
+          <p className="text-fg-subtle">{contentTypes.length === 0 ? "Loading…" : `Unknown content type: ${params.slug}`}</p>
+          {contentTypes.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Back</Button> : null}
+        </div>
+      );
+    }
+
+    return (
+      <PageList
+        api={api}
+        pages={pages}
+        blockTypes={blockTypes}
+        type={type}
+        onOpen={(p) => navigate("page", { params: { pageId: p.id } })}
+        onCreated={refreshPages}
+        onError={setError}
+      />
+    );
+  });