@pramen/cms-editor 0.0.59 → 0.0.61

package/src/nav.ts

@@ -0,0 +1,134 @@
+// The primary nav, as data.
+//
+// It used to be a fixed sequence written out in JSX: Pages, collections, Media, Users,
+// Settings, then `extraNav`. That order was the whole reason a project-specific section
+// could not be part of the admin — `extraNav` renders dead LAST and (by default, and for
+// good reason) opens a new tab, so anything not backed by a `collection()` was structurally
+// the final item and structurally a different app.
+//
+// So the nav is built as a list of entries carrying an ORDER, and sorted. `NAV_ORDER` gives
+// the built-ins positions spaced 100 apart, a collection declares `navOrder` server-side,
+// and a host `extraNav` link may declare one too — which is what lets a section sit between
+// Pages and Media instead of after Settings.
+//
+// Split out of `_layout.tsx` so the ordering rule is testable without a DOM: the layout
+// turns entries into buttons, this decides what they are and what order they come in.
+
+import type { BuzolaPageMap } from "@buzola/router";
+import { NAV_ORDER, type AdminPageMeta, type CmsCapabilities, type CollectionMeta, type ContentType } from "./types";
+
+/** A buzola page id. Typed off the generated page map, so a nav entry naming a route that
+ * does not exist is a compile error rather than a tab that navigates nowhere. */
+export type NavPage = keyof BuzolaPageMap;
+
+/** A host-configured link to a companion tool. */
+export interface ExtraNavLink {
+  label: string;
+  href: string;
+  target?: "_blank" | "_self";
+  /** Where it sits — see {@link NAV_ORDER}. Defaults to `NAV_ORDER.extra` (last), which is
+   * where every `extraNav` link rendered before this existed. */
+  order?: number;
+}
+
+/** One entry in the primary nav.
+ *
+ * `kind` is what the layout switches on to render it; everything else here is the data it
+ * needs. Keeping the ROUTE out of this module is deliberate — `page`/`params` name a
+ * buzola page, and the layout is where navigation (and the unsaved-changes guard it runs
+ * through) belongs. */
+export type NavEntry =
+  | { kind: "route"; key: string; order: number; label: string; page: NavPage; params?: Record<string, string> }
+  | { kind: "link"; key: string; order: number; link: ExtraNavLink };
+
+/** What the nav is built from. All of it is already in the app context; passing it in keeps
+ * this a pure function of the session's facts. */
+export interface NavInput {
+  collections: CollectionMeta[];
+  /** Block Kit pages this caller may open — already role-filtered by the server. */
+  adminPages: AdminPageMeta[];
+  contentTypes: ContentType[] | null;
+  cms: CmsCapabilities;
+  /** Deployment hides the block/page builder entirely (`hidePages`). */
+  hidePages: boolean;
+  /** One tab per content type rather than a single pooled "Pages" tab. */
+  splitByType: boolean;
+  isAdmin: boolean;
+  extraNav: ExtraNavLink[];
+}
+
+/**
+ * Build the primary nav, in order.
+ *
+ * The sort is STABLE (`Array.prototype.sort` is, per spec, since ES2019), which is what
+ * carries the two groupings that have no numeric expression: content-type tabs stay in the
+ * server's order among themselves, and so do collections that share a `navOrder`. Ties are
+ * therefore declaration order, which is the only answer a host can predict.
+ */
+export function buildNav(input: NavInput): NavEntry[] {
+  const { collections, adminPages, contentTypes, cms, hidePages, splitByType, isAdmin, extraNav } = input;
+  const entries: NavEntry[] = [];
+
+  if (!hidePages) {
+    if (splitByType) {
+      // One tab per content type: a CMS holding pages AND articles pooled them into a
+      // single list where the only thing telling a landing page from a news item was the
+      // slug. The label is the type's own `name`, so a host that wants a plural tab writes
+      // one.
+      for (const t of contentTypes ?? []) {
+        entries.push({ kind: "route", key: `type:${t.slug}`, order: NAV_ORDER.pages, label: t.name, page: "type", params: { slug: t.slug } });
+      }
+    } else {
+      entries.push({ kind: "route", key: "pages", order: NAV_ORDER.pages, label: "Pages", page: "home" });
+    }
+  }
+
+  for (const c of collections) {
+    entries.push({
+      kind: "route",
+      key: `col:${c.slug}`,
+      order: c.navOrder ?? NAV_ORDER.collections,
+      label: `${c.icon ? `${c.icon} ` : ""}${c.pluralLabel}`,
+      page: "collection",
+      params: { slug: c.slug },
+    });
+  }
+
+  entries.push({ kind: "route", key: "media", order: NAV_ORDER.media, label: "Media", page: "media" });
+
+  if (cms.siteFurniture) {
+    entries.push({ kind: "route", key: "menus", order: NAV_ORDER.menus, label: "Menus", page: "menus" });
+    // Taxonomies classify PAGES — `cms_page_terms` links a term to a page and to nothing
+    // else — so a collections-only deployment has nothing to classify and the section would
+    // be a vocabulary editor with no subject.
+    if (!hidePages) entries.push({ kind: "route", key: "taxonomies", order: NAV_ORDER.taxonomies, label: "Taxonomies", page: "taxonomies" });
+    entries.push({ kind: "route", key: "widgets", order: NAV_ORDER.widgets, label: "Widgets", page: "widgets" });
+    entries.push({ kind: "route", key: "redirects", order: NAV_ORDER.redirects, label: "Redirects", page: "redirects" });
+  }
+
+  // A project's own screens, INSIDE the chrome and at a position they choose. This is the
+  // whole difference from `extraNav`, which renders after Settings and opens a new tab — so
+  // the odd 10% of a client site was a separate deployment that looked nothing like the
+  // admin it hung off.
+  for (const p of adminPages) {
+    entries.push({ kind: "route", key: `app:${p.slug}`, order: p.navOrder ?? NAV_ORDER.adminPages, label: `${p.icon ? `${p.icon} ` : ""}${p.label}`, page: "admin-page", params: { slug: p.slug } });
+  }
+
+  // Authoring the SCHEMA, not content — so it is gated on `canEdit` (every handler behind
+  // it is editor-only) and hidden where there is no block/page builder to define types for.
+  if (!hidePages && cms.canEdit) {
+    entries.push({ kind: "route", key: "types", order: NAV_ORDER.types, label: "Types", page: "schema" });
+  }
+
+  if (isAdmin) entries.push({ kind: "route", key: "users", order: NAV_ORDER.users, label: "Users", page: "users" });
+  entries.push({ kind: "route", key: "settings", order: NAV_ORDER.settings, label: "Settings", page: "settings" });
+
+  for (const link of extraNav) {
+    // Keyed on href AND label: two entries may legitimately point at the same href and
+    // differ only in label or target, and keyed on href alone React reconciles them
+    // together — the rendered label can end up on the other one's anchor.
+    entries.push({ kind: "link", key: `extra:${link.href}|${link.label}`, order: link.order ?? NAV_ORDER.extra, link });
+  }
+
+  return entries.sort((a, b) => a.order - b.order);
+}

package/src/routes/_layout.tsx

@@ -9,6 +9,7 @@ import { useApp } from "../app-context";
 import { BRAND } from "../brand";
 import { pagesHidden, splitsByType } from "../components";
 import { opensInSameTab } from "../mount";
+import { buildNav, type ExtraNavLink } from "../nav";
 
 const THEME_KEY = "pramen.cms.theme";
 
@@ -35,7 +36,7 @@ export function segmentAt(pathname: string, prefix: string): string | undefined
 }
 
 export default function RootLayout() {
-  const { isAdmin, collections, contentTypes, cms, error, reconfigure, confirmNavigation } = useApp();
+  const { isAdmin, collections, adminPages, contentTypes, cms, error, reconfigure, confirmNavigation } = useApp();
   const navigate = useNavigate();
   const { pathname } = useRoute();
 
@@ -60,6 +61,8 @@ export default function RootLayout() {
   const collectionSlug = segmentAt(pathname, "/collections/");
   // …and the active content type, under /types/:slug.
   const typeSlug = segmentAt(pathname, "/types/");
+  // …and the active Block Kit page, under /apps/:slug.
+  const appSlug = segmentAt(pathname, "/apps/");
 
   // "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
@@ -67,8 +70,16 @@ export default function RootLayout() {
   // without fetching the page the editor is already fetching.
   const active = collectionSlug ? `col:${collectionSlug}`
     : typeSlug ? `type:${typeSlug}`
+    : appSlug ? `app:${appSlug}`
     : pathname.startsWith("/pages") || pathname === "/" ? "pages"
     : pathname.startsWith("/media") ? "media"
+    // `/schema` rather than `/types`, because `/types/:slug` is already one content type's
+    // PAGE LIST — a different thing entirely, and the tab keyed `type:<slug>` above.
+    : pathname.startsWith("/schema") ? "types"
+    : pathname.startsWith("/menus") ? "menus"
+    : pathname.startsWith("/taxonomies") ? "taxonomies"
+    : pathname.startsWith("/widgets") ? "widgets"
+    : pathname.startsWith("/redirects") ? "redirects"
     : pathname.startsWith("/users") ? "users"
     : pathname.startsWith("/settings") ? "settings"
     : "";
@@ -82,11 +93,12 @@ export default function RootLayout() {
   });
 
   // Host-configured links to companion tools (e.g. a curation page), from /config.js.
-  const extraNav = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.extraNav ?? [] : [];
+  const extraNav: ExtraNavLink[] = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.extraNav ?? [] : [];
   // Collections-only deployments hide the block/page builder entirely.
   const hidePages = pagesHidden();
   // Same rule as the landing redirect and the page editor's back target — see `splitsByType`.
   const splitByType = splitsByType(contentTypes, cms, hidePages);
+  const nav = buildNav({ collections, adminPages, contentTypes, cms, hidePages, splitByType, isAdmin, extraNav });
 
   // 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
@@ -114,63 +126,33 @@ export default function RootLayout() {
           </button>
         </Topbar.Brand>
         <Topbar.Nav aria-label="Primary">
-          {/* 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 : splitByType ? (
-            (contentTypes ?? []).map((t) => (
+          {/* Order comes from `buildNav`, not from the sequence written here — see nav.ts.
+              A section can therefore sit BETWEEN two built-ins (a collection declaring
+              `navOrder`, a host link declaring `order`) rather than only after Settings,
+              which is what made a project-specific section structurally a bolted-on second
+              app. Rendering stays here because navigation belongs to the layout: every
+              route entry goes through the unsaved-changes guard, and an `extraNav` link
+              that leaves the document takes the same guard. */}
+          {nav.map((entry) =>
+            entry.kind === "route" ? (
               <Button
-                key={t.slug}
+                key={entry.key}
                 variant="ghost"
                 size="sm"
-                {...tabProps(`type:${t.slug}`)}
-                onPress={guarded(() => navigate("type", { params: { slug: t.slug } }))}
+                {...tabProps(entry.key)}
+                onPress={guarded(() => navigate(entry.page as never, entry.params ? ({ params: entry.params } as never) : undefined as never))}
               >
-                {t.name}
+                {entry.label}
               </Button>
-            ))
-          ) : (
-            <Button variant="ghost" size="sm" {...tabProps("pages")} onPress={guarded(() => navigate("home"))}>
-              Pages
-            </Button>
+            ) : (
+              <NavLink
+                key={entry.key}
+                link={entry.link}
+                sameTab={opensInSameTab(entry.link.href, entry.link.target, basePath, documentUrl)}
+                confirm={confirmNavigation}
+              />
+            ),
           )}
-          {collections.map((c) => (
-            <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" {...tabProps("media")} onPress={guarded(() => navigate("media"))}>
-            Media
-          </Button>
-          {isAdmin ? (
-            <Button variant="ghost" size="sm" {...tabProps("users")} onPress={guarded(() => navigate("users"))}>
-              Users
-            </Button>
-          ) : null}
-          <Button variant="ghost" size="sm" {...tabProps("settings")} onPress={guarded(() => navigate("settings"))}>
-            Settings
-          </Button>
-          {extraNav.map((l) => (
-            // 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.
-            //
-            // 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>
           {/* The tenant is deployment configuration, not something an editor acts on —
@@ -211,7 +193,7 @@ export default function RootLayout() {
  * 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 }) {
+function NavLink({ link, sameTab, confirm }: { link: ExtraNavLink; sameTab: boolean; confirm: () => boolean }) {
   return (
     <a
       href={link.href}

package/src/routes/admin-page.tsx

@@ -0,0 +1,36 @@
+// A custom admin page (`/apps/:slug`) — Block Kit, rendered inside the editor's own chrome.
+//
+// Routed BY THE EDITOR, which is the point: an `extraNav` link has to open a new tab,
+// because `_404.tsx` registers the catch-all `/:__notFound+` and a same-tab click on an
+// unmounted editor lands on the in-app 404. A registered page has a real route, so it is
+// part of the admin rather than a link out of it.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { AdminPageView } from "../blockkit";
+import { Notice } from "../components";
+import { Button } from "@podoba/react";
+
+export default createPage()
+  .params({ slug: "string" })
+  .route("/apps/:slug")
+  .render(function AdminPageRoute({ params }) {
+    const { api, adminPages, setError } = useApp();
+    const navigate = useNavigate();
+    const def = adminPages.find((p) => p.slug === params.slug);
+
+    // `listAdminPages` is role-FILTERED server-side, so an absent slug means either "still
+    // loading" or "not yours / not registered" — and the two are told apart by whether the
+    // list has arrived at all, exactly as the collection route does it.
+    if (!def) {
+      return (
+        <Notice action={adminPages.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Pages</Button> : undefined}>
+          {adminPages.length === 0 ? "Loading…" : `Unknown page: ${params.slug}`}
+        </Notice>
+      );
+    }
+    // Keyed on the slug so switching between two pages REMOUNTS the view: buzola renders the
+    // same component instance across a params-only change, and the blocks, the form values
+    // and any toast all belong to one page.
+    return <AdminPageView api={api} key={def.slug} slug={def.slug} label={def.label} onError={setError} />;
+  });

package/src/routes/block-type.tsx

@@ -0,0 +1,29 @@
+// One block type's builder (`/schema/blocks/:slug`); `new` creates one.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { BlockTypeEditor } from "../schema-builder";
+
+export default createPage()
+  .params({ slug: "string" })
+  .route("/schema/blocks/:slug")
+  .render(function BlockTypeRoute({ params }) {
+    const { api, cms, setError } = useApp();
+    const navigate = useNavigate();
+    if (!cms.canEdit) return <Notice>Authoring types needs an editor role.</Notice>;
+    return (
+      <BlockTypeEditor
+        api={api}
+        codeDefinedTypes={cms.codeDefinedTypes}
+        // Keyed on the slug so switching between two types REMOUNTS the form: buzola renders
+        // the same component instance across a params-only change, and the draft state
+        // belongs to one type.
+        key={params.slug}
+        slug={params.slug}
+        onSaved={(slug) => navigate("block-type", { params: { slug } })}
+        onBack={() => navigate("schema")}
+        onError={setError}
+      />
+    );
+  });

package/src/routes/content-type.tsx

@@ -0,0 +1,32 @@
+// One content type's builder (`/schema/content/:slug`); `new` creates one.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { ContentTypeEditor } from "../schema-builder";
+
+export default createPage()
+  .params({ slug: "string" })
+  .route("/schema/content/:slug")
+  .render(function ContentTypeBuilderRoute({ params }) {
+    const { api, cms, setError, refreshContentTypes } = useApp();
+    const navigate = useNavigate();
+    if (!cms.canEdit) return <Notice>Authoring types needs an editor role.</Notice>;
+    return (
+      <ContentTypeEditor
+        api={api}
+        codeDefinedTypes={cms.codeDefinedTypes}
+        key={params.slug}
+        slug={params.slug}
+        onSaved={(slug) => {
+          // The nav's per-type tabs come from `listContentTypes`, which the app context
+          // fetched once at boot — without this a type created here has no tab until the
+          // next full reload, which reads as "it didn't save".
+          refreshContentTypes();
+          navigate("content-type", { params: { slug } });
+        }}
+        onBack={() => navigate("schema")}
+        onError={setError}
+      />
+    );
+  });

package/src/routes/menu.tsx

@@ -0,0 +1,30 @@
+// One menu's tree editor (`/menus/:name`).
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { MenuEditor } from "../furniture";
+
+export default createPage()
+  .params({ name: "string" })
+  .route("/menus/:name")
+  .render(function MenuRoute({ params }) {
+    const { api, cms, collections, setError } = useApp();
+    const navigate = useNavigate();
+    // The nav hides these on a server without the handlers, but a BOOKMARK does not —
+    // without this the screen mounts fully interactive and every call 404s. The
+    // `/schema` routes already gated on their own capability; these did not.
+    if (!cms.siteFurniture) return <Notice>This deployment's CMS does not provide site furniture.</Notice>;
+    return (
+      <MenuEditor
+        api={api}
+        key={params.name}
+        name={params.name}
+        canEdit={cms.canEdit}
+        collections={collections}
+        onBack={() => navigate("menus")}
+        onDeleted={() => navigate("menus")}
+        onError={setError}
+      />
+    );
+  });

package/src/routes/menus.tsx

@@ -0,0 +1,18 @@
+// The menus list (`/menus`).
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { MenusView } from "../furniture";
+
+export default createPage()
+  .route("/menus")
+  .render(function MenusRoute() {
+    const { api, cms, setError } = useApp();
+    const navigate = useNavigate();
+    // The nav hides these on a server without the handlers, but a BOOKMARK does not —
+    // without this the screen mounts fully interactive and every call 404s. The
+    // `/schema` routes already gated on their own capability; these did not.
+    if (!cms.siteFurniture) return <Notice>This deployment's CMS does not provide site furniture.</Notice>;
+    return <MenusView api={api} canEdit={cms.canEdit} onOpen={(name) => navigate("menu", { params: { name } })} onError={setError} />;
+  });

package/src/routes/page.tsx

@@ -52,7 +52,7 @@ export default createPage()
     // match. Rendering one tab under another tab's address means a refresh, a Back, or a
     // shared link all disagree with what is on screen; `setTab` already replaces without
     // adding a history entry, so reconciling costs nothing.
-    const shown = visibleTabs(cms.multilingual);
+    const shown = visibleTabs(cms.multilingual, cms.siteFurniture);
     const tab: InspectorTab = shown.includes(params.tab as InspectorTab) ? (params.tab as InspectorTab) : "settings";
     const setTab = (t: InspectorTab) => navigate("page", { params: { pageId: params.pageId, tab: t }, replace: true });
     useEffect(() => {

package/src/routes/redirects.tsx

@@ -0,0 +1,17 @@
+// Redirects (`/redirects`) — one screen, because a redirect is a row.
+
+import { createPage } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { RedirectsView } from "../furniture";
+
+export default createPage()
+  .route("/redirects")
+  .render(function RedirectsRoute() {
+    const { api, cms, setError } = useApp();
+    // The nav hides these on a server without the handlers, but a BOOKMARK does not —
+    // without this the screen mounts fully interactive and every call 404s. The
+    // `/schema` routes already gated on their own capability; these did not.
+    if (!cms.siteFurniture) return <Notice>This deployment's CMS does not provide site furniture.</Notice>;
+    return <RedirectsView api={api} canEdit={cms.canEdit} onError={setError} />;
+  });

package/src/routes/schema.tsx

@@ -0,0 +1,34 @@
+// The types overview (`/schema`) — block types and content types, and the way into their
+// builders.
+//
+// `/schema`, not `/types`: `/types/:slug` is already ONE content type's page list (the tab
+// bar's per-type route), and a parent path meaning something entirely different from its
+// children is the kind of collision that reads as a bug forever after. The nav label stays
+// "Types", because that is what an editor is looking for.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { TypesOverview } from "../schema-builder";
+
+export default createPage()
+  .route("/schema")
+  .render(function SchemaRoute() {
+    const { api, cms, setError } = useApp();
+    const navigate = useNavigate();
+
+    // Every handler behind this screen is editor-gated, so a reviewer-only session would
+    // get a builder where each save 403s. The nav hides the tab for the same reason; this
+    // is the deep-link half of it.
+    if (!cms.canEdit) return <Notice>Authoring types needs an editor role.</Notice>;
+
+    return (
+      <TypesOverview
+        api={api}
+        codeDefinedTypes={cms.codeDefinedTypes}
+        onOpenBlockType={(slug) => navigate("block-type", { params: { slug } })}
+        onOpenContentType={(slug) => navigate("content-type", { params: { slug } })}
+        onError={setError}
+      />
+    );
+  });

package/src/routes/taxonomies.tsx

@@ -0,0 +1,18 @@
+// The vocabularies list (`/taxonomies`).
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { TaxonomiesView } from "../furniture";
+
+export default createPage()
+  .route("/taxonomies")
+  .render(function TaxonomiesRoute() {
+    const { api, cms, setError } = useApp();
+    const navigate = useNavigate();
+    // The nav hides these on a server without the handlers, but a BOOKMARK does not —
+    // without this the screen mounts fully interactive and every call 404s. The
+    // `/schema` routes already gated on their own capability; these did not.
+    if (!cms.siteFurniture) return <Notice>This deployment's CMS does not provide site furniture.</Notice>;
+    return <TaxonomiesView api={api} canEdit={cms.canEdit} onOpen={(slug) => navigate("taxonomy", { params: { slug } })} onError={setError} />;
+  });

package/src/routes/taxonomy.tsx

@@ -0,0 +1,29 @@
+// One vocabulary's terms (`/taxonomies/:slug`).
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { TaxonomyEditor } from "../furniture";
+
+export default createPage()
+  .params({ slug: "string" })
+  .route("/taxonomies/:slug")
+  .render(function TaxonomyRoute({ params }) {
+    const { api, cms, setError } = useApp();
+    const navigate = useNavigate();
+    // The nav hides these on a server without the handlers, but a BOOKMARK does not —
+    // without this the screen mounts fully interactive and every call 404s. The
+    // `/schema` routes already gated on their own capability; these did not.
+    if (!cms.siteFurniture) return <Notice>This deployment's CMS does not provide site furniture.</Notice>;
+    return (
+      <TaxonomyEditor
+        api={api}
+        key={params.slug}
+        slug={params.slug}
+        canEdit={cms.canEdit}
+        onBack={() => navigate("taxonomies")}
+        onDeleted={() => navigate("taxonomies")}
+        onError={setError}
+      />
+    );
+  });

package/src/routes/widget-area.tsx

@@ -0,0 +1,29 @@
+// One widget area's contents (`/widgets/:name`).
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { WidgetAreaEditor } from "../furniture";
+
+export default createPage()
+  .params({ name: "string" })
+  .route("/widgets/:name")
+  .render(function WidgetAreaRoute({ params }) {
+    const { api, cms, setError } = useApp();
+    const navigate = useNavigate();
+    // The nav hides these on a server without the handlers, but a BOOKMARK does not —
+    // without this the screen mounts fully interactive and every call 404s. The
+    // `/schema` routes already gated on their own capability; these did not.
+    if (!cms.siteFurniture) return <Notice>This deployment's CMS does not provide site furniture.</Notice>;
+    return (
+      <WidgetAreaEditor
+        api={api}
+        key={params.name}
+        name={params.name}
+        canEdit={cms.canEdit}
+        onBack={() => navigate("widgets")}
+        onDeleted={() => navigate("widgets")}
+        onError={setError}
+      />
+    );
+  });

package/src/routes/widgets.tsx

@@ -0,0 +1,18 @@
+// The widget-areas list (`/widgets`).
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useApp } from "../app-context";
+import { Notice } from "../components";
+import { WidgetAreasView } from "../furniture";
+
+export default createPage()
+  .route("/widgets")
+  .render(function WidgetsRoute() {
+    const { api, cms, setError } = useApp();
+    const navigate = useNavigate();
+    // The nav hides these on a server without the handlers, but a BOOKMARK does not —
+    // without this the screen mounts fully interactive and every call 404s. The
+    // `/schema` routes already gated on their own capability; these did not.
+    if (!cms.siteFurniture) return <Notice>This deployment's CMS does not provide site furniture.</Notice>;
+    return <WidgetAreasView api={api} canEdit={cms.canEdit} onOpen={(name) => navigate("widget-area", { params: { name } })} onError={setError} />;
+  });