@cboxdk/cbox-ui 0.10.0 → 0.10.2

package/README.md

@@ -278,16 +278,39 @@ type Shell = {
     page?: { title; route? };                       // "On this page" and the chat's page intent
     nav: { areas: NavArea[]; activeArea; activePage? };
     context: { levels: ContextLevel[]; switchUrl };  // 1–3 levels, organization first
-    palette: { searchUrl?; gotoUrl?; actions: PaletteAction[] };
+    palette: { searchUrl?; gotoUrl?; actions: PaletteAction[]; placeholder? };
     help: { enabled; topic?; sessionUrl?; scriptUrl?; portalUrl?; updatesUrl?; searchUrl?; articlesUrl? };
     notifications: { enabled: false } | { enabled: true; unread; url };
     apps: { catalogUrl; productsUrl? };
-    account: { profileUrl; switchAccountUrl; signOutUrl; signOutMethod?; languages?; formats?; signedInWith? };
+    account?: { profileUrl?; switchAccountUrl?; signOutUrl?; signOutMethod?; languages?; formats?; signedInWith? };
     banner?: { kind: 'sandbox' | 'impersonation' | 'notice'; text; action? };
     preferences: { theme; locale; railPinned; helpOpen; subnavCollapsed?; regionalFormat?; timeZone? };
 };
 ```
 
+```ts
+type NavArea = { key; label; url; icon?; pages?: NavPage[] };
+type NavPage = {
+    key; label; url; icon?;
+    locked?: boolean;   // not in the plan: a lock and "(locked)", `url` leads to the upgrade prompt
+    count?: number;     // a badge (open drafts); hidden at 0
+    group?: string;     // a heading in the subnav and the phone nav ("Organization", "Project")
+};
+```
+
+Pages of one `group` show together under its heading, in the order each group first appears.
+Locked pages still show in the palette's Pages, marked "Locked". Every nav link (and the
+banner action) also accepts `href` in place of `url`, the name laravel-console-kit 0.2.2 sends.
+`palette.placeholder` replaces "Search or ask…" in the palette's field (the header button keeps
+"Search or ask…").
+
+`account` and each of its URLs are optional: the account menu leaves out a row it has no URL
+for, and without `account` it holds only the preferences (laravel-console-kit's
+`->account()` builds it).
+
+The shell's first focusable element is a "Skip to content" link, hidden until focused. It
+moves focus to `<main id={mainId}>` (default `main-content`).
+
 `ContextLevel.settingsUrl` is a URL template on the wire: `{id}` is replaced with the row's id
 (`/orgs/{id}/settings`). Nav and action icons are Lucide names (`"rocket"`, `"server"`); pass
 `icons` to `CboxShell` for others.

package/dist/index.d.ts

@@ -294,22 +294,45 @@ declare const SHELL_ICONS: Readonly<Record<string, ShellIcon>>;
  */
 /** The product key (URL standard §1). Unknown keys are allowed so a new app needs no release here. */
 type AppKey = 'id' | 'billing' | 'telemetry' | 'work' | 'brain' | 'infra' | 'engage' | 'assistant' | 'sites' | 'stache' | 'status' | 'tax' | 'signals' | 'domains' | (string & {});
+/**
+ * A labelled link. `href` is the same URL under the name laravel-console-kit 0.2 sends; the
+ * shell reads `url` first, then `href`.
+ */
 type Link = {
     label: string;
     url: string;
+    href?: string;
 };
-/** One page inside an area. `icon` is a Lucide icon name (`"git-branch"`), resolved by the shell. */
+/**
+ * One page inside an area. `icon` is a Lucide icon name (`"git-branch"`), resolved by the shell.
+ * `href` is the same URL under the name laravel-console-kit 0.2 sends; the shell reads `url`
+ * first, then `href`.
+ */
 type NavPage = {
     key: string;
     label: string;
     url: string;
+    href?: string;
     icon?: string;
+    /**
+     * The page is not part of the organization's plan: it shows with a lock and an accessible
+     * "(locked)", and `url` leads to the upgrade prompt.
+     */
+    locked?: boolean;
+    /** A badge, such as open drafts. Not shown when 0 or absent. */
+    count?: number;
+    /**
+     * A heading inside the area's subnav (Settings → "Organization", "Project"). Pages of one
+     * group show together under it, in the order each group first appears.
+     */
+    group?: string;
 };
 /** One area in the rail. The subnav shows its pages when it has more than one. */
 type NavArea = {
     key: string;
     label: string;
     url: string;
+    href?: string;
     icon?: string;
     pages?: NavPage[];
 };
@@ -411,12 +434,15 @@ type ShellOption = {
     code: string;
     label: string;
 };
-/** What the account menu (§10) links to. */
+/**
+ * What the account menu (§10) links to. A row whose URL is absent is not shown (laravel-console-kit
+ * leaves out what the app has no route for).
+ */
 type ShellAccount = {
     /** Profile and security, in Cbox ID. */
-    profileUrl: string;
-    switchAccountUrl: string;
-    signOutUrl: string;
+    profileUrl?: string;
+    switchAccountUrl?: string;
+    signOutUrl?: string;
     /** Default `post`. */
     signOutMethod?: 'get' | 'post';
     /** Languages the app is translated into. */
@@ -461,6 +487,8 @@ type Shell = {
         /** `GET ?q=` → level 2/3 combinations across organizations (§6.1.4). */
         gotoUrl?: string;
         actions: PaletteAction[];
+        /** The palette search field's placeholder, e.g. "Search customers, invoices… or pages". Default "Search or ask…". */
+        placeholder?: string;
     };
     help: ShellHelp;
     notifications: ShellNotifications;
@@ -470,7 +498,8 @@ type Shell = {
         /** "All products ↗". Default https://cbox.dk. */
         productsUrl?: string;
     };
-    account: ShellAccount;
+    /** The account menu's links. Absent (laravel-console-kit 0.2.2): the menu has only the preferences. */
+    account?: ShellAccount;
     banner?: ShellBanner;
     preferences: ShellPreferences;
 };
@@ -534,7 +563,7 @@ type CboxShellProps = {
     helpStore?: HelpStore;
     /** Where the Cbox wordmark is served. Default `/brand`. */
     brandAssetBase?: string;
-    /** `id` of the `<main>` landmark for a skip link. Default `main-content`. */
+    /** `id` of the `<main>` landmark, which the shell's "Skip to content" link targets. Default `main-content`. */
     mainId?: string;
 };
 /**

package/dist/index.js

@@ -350,7 +350,8 @@ function Avatar({ size = 30 }) {
 }
 function AccountMenu({ inline = false, onDone }) {
   const { shell, t, preferences, setPreference, navigate } = useShell();
-  const { account, person } = shell;
+  const { person } = shell;
+  const account = shell.account ?? {};
   const [view, setView] = useState("main");
   const menu = useRef(null);
   const tab = inline ? 0 : -1;
@@ -396,7 +397,7 @@ function AccountMenu({ inline = false, onDone }) {
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "cbx-list", role: "none", children: [
-      /* @__PURE__ */ jsxs("a", { role: "menuitem", tabIndex: tab, className: "cbx-row cbx-row-action", href: account.profileUrl, onClick: onDone, children: [
+      account.profileUrl !== void 0 && /* @__PURE__ */ jsxs("a", { role: "menuitem", tabIndex: tab, className: "cbx-row cbx-row-action", href: account.profileUrl, onClick: onDone, children: [
         /* @__PURE__ */ jsx(UserRound, { size: 16, strokeWidth: 1.8, "aria-hidden": true }),
         /* @__PURE__ */ jsx("span", { className: "cbx-row-name", children: t("Profile and security") }),
         /* @__PURE__ */ jsx(ArrowUpRight, { className: "cbx-row-trail", size: 14, strokeWidth: 1.8, "aria-hidden": true })
@@ -439,12 +440,12 @@ function AccountMenu({ inline = false, onDone }) {
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "cbx-list cbx-list-foot", role: "none", children: [
-      /* @__PURE__ */ jsxs("a", { role: "menuitem", tabIndex: tab, className: "cbx-row cbx-row-action", href: account.switchAccountUrl, onClick: onDone, children: [
+    (account.switchAccountUrl !== void 0 || account.signOutUrl !== void 0) && /* @__PURE__ */ jsxs("div", { className: "cbx-list cbx-list-foot", role: "none", children: [
+      account.switchAccountUrl !== void 0 && /* @__PURE__ */ jsxs("a", { role: "menuitem", tabIndex: tab, className: "cbx-row cbx-row-action", href: account.switchAccountUrl, onClick: onDone, children: [
         /* @__PURE__ */ jsx(Users, { size: 16, strokeWidth: 1.8, "aria-hidden": true }),
         /* @__PURE__ */ jsx("span", { className: "cbx-row-name", children: t("Switch account") })
       ] }),
-      /* @__PURE__ */ jsxs("button", { role: "menuitem", tabIndex: tab, type: "button", className: "cbx-row cbx-row-action", onClick: () => {
+      account.signOutUrl !== void 0 && /* @__PURE__ */ jsxs("button", { role: "menuitem", tabIndex: tab, type: "button", className: "cbx-row cbx-row-action", onClick: () => {
         onDone?.();
         navigate(account.signOutUrl, { method: account.signOutMethod ?? "post" });
       }, children: [
@@ -1799,6 +1800,40 @@ function resolveIcon(name, extra = {}) {
   if (name === void 0) return Circle;
   return extra[name] ?? SHELL_ICONS[name] ?? Circle;
 }
+function navUrl(entry) {
+  return entry.url ?? entry.href ?? "#";
+}
+function groupPages(pages) {
+  const runs = /* @__PURE__ */ new Map();
+  for (const page of pages) {
+    const key = page.group === void 0 || page.group === "" ? "" : `g:${page.group}`;
+    const run = runs.get(key) ?? { group: key === "" ? void 0 : page.group, pages: [] };
+    run.pages.push(page);
+    runs.set(key, run);
+  }
+  return Array.from(runs.values());
+}
+function NavPageMarks({ page }) {
+  const { t } = useShell();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    page.locked === true && /* @__PURE__ */ jsxs("span", { className: "cbx-nav-lock", title: t("Not in your plan"), children: [
+      /* @__PURE__ */ jsx(Lock, { size: 13, strokeWidth: 1.9, "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { className: "cbx-sr-only", children: t("(locked)") })
+    ] }),
+    page.locked !== true && page.count !== void 0 && page.count > 0 && /* @__PURE__ */ jsx("span", { className: "cbx-nav-count", children: page.count > 999 ? "999+" : page.count })
+  ] });
+}
+function NavPageList({ pages, renderPage }) {
+  const id = useId();
+  const runs = groupPages(pages);
+  if (runs.every((run) => run.group === void 0)) return /* @__PURE__ */ jsx(Fragment, { children: pages.map(renderPage) });
+  return /* @__PURE__ */ jsx(Fragment, { children: runs.map(
+    (run, index) => run.group === void 0 ? /* @__PURE__ */ jsx("div", { className: "cbx-nav-run", children: run.pages.map(renderPage) }, `run-${index}`) : /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${id}-${index}`, className: "cbx-nav-run", children: [
+      /* @__PURE__ */ jsx("div", { id: `${id}-${index}`, className: "cbx-nav-group", children: run.group }),
+      run.pages.map(renderPage)
+    ] }, `run-${index}`)
+  ) });
+}
 function Sheet({ label, side, onClose, children, head }) {
   const { t } = useShell();
   const panel = useRef(null);
@@ -1861,14 +1896,23 @@ function NavSheet({ onClose }) {
       const Icon = resolveIcon(area.icon, icons);
       const activeArea = area.key === shell.nav.activeArea;
       return /* @__PURE__ */ jsxs("div", { className: "cbx-sheet-area", children: [
-        /* @__PURE__ */ jsxs(Link, { href: area.url, className: `cbx-row cbx-row-action ${activeArea ? (area.pages ?? []).length > 1 ? "is-open" : "is-current" : ""}`, "aria-current": activeArea && (area.pages ?? []).length <= 1 ? "page" : void 0, onClick: onClose, children: [
+        /* @__PURE__ */ jsxs(Link, { href: navUrl(area), className: `cbx-row cbx-row-action ${activeArea ? (area.pages ?? []).length > 1 ? "is-open" : "is-current" : ""}`, "aria-current": activeArea && (area.pages ?? []).length <= 1 ? "page" : void 0, onClick: onClose, children: [
           /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.8, "aria-hidden": true }),
           /* @__PURE__ */ jsx("span", { className: "cbx-row-name", children: area.label })
         ] }),
-        (area.pages ?? []).length > 1 && /* @__PURE__ */ jsx("div", { className: "cbx-sheet-pages", children: (area.pages ?? []).map((page) => {
-          const on = activeArea && page.key === shell.nav.activePage;
-          return /* @__PURE__ */ jsx(Link, { href: page.url, className: `cbx-row cbx-row-action ${on ? "is-current" : ""}`, "aria-current": on ? "page" : void 0, onClick: onClose, children: /* @__PURE__ */ jsx("span", { className: "cbx-row-name", children: page.label }) }, page.key);
-        }) })
+        (area.pages ?? []).length > 1 && /* @__PURE__ */ jsx("div", { className: "cbx-sheet-pages", children: /* @__PURE__ */ jsx(
+          NavPageList,
+          {
+            pages: area.pages ?? [],
+            renderPage: (page) => {
+              const on = activeArea && page.key === shell.nav.activePage;
+              return /* @__PURE__ */ jsxs(Link, { href: navUrl(page), className: `cbx-row cbx-row-action ${on ? "is-current" : ""} ${page.locked === true ? "is-locked" : ""}`, "aria-current": on ? "page" : void 0, "data-locked": page.locked === true ? "true" : void 0, onClick: onClose, children: [
+                /* @__PURE__ */ jsx("span", { className: "cbx-row-name", children: page.label }),
+                /* @__PURE__ */ jsx(NavPageMarks, { page })
+              ] }, page.key);
+            }
+          }
+        ) })
       ] }, area.key);
     }) }),
     /* @__PURE__ */ jsxs("div", { className: "cbx-list cbx-list-foot", children: [
@@ -1936,13 +1980,16 @@ function matchScore(text, query2) {
   }
   return score;
 }
-function localPages(shell, query2, open) {
+function localPages(shell, query2, open, lockedLabel) {
   const entries = [];
   for (const area of shell.nav.areas) {
-    entries.push({ id: `area:${area.key}`, title: area.label, url: area.url, icon: area.icon });
+    const areaUrl = navUrl(area);
+    entries.push({ id: `area:${area.key}`, title: area.label, url: areaUrl, icon: area.icon });
     for (const page of area.pages ?? []) {
-      if (page.url === area.url) continue;
-      entries.push({ id: `page:${area.key}:${page.key}`, title: page.label, subtitle: area.label, url: page.url, icon: page.icon ?? area.icon });
+      const url = navUrl(page);
+      if (url === areaUrl) continue;
+      const subtitle = page.locked === true ? `${area.label} \xB7 ${lockedLabel}` : area.label;
+      entries.push({ id: `page:${area.key}:${page.key}`, title: page.label, subtitle, url, icon: page.locked === true ? "lock" : page.icon ?? area.icon });
     }
   }
   return entries.map((entry) => ({ entry, score: matchScore(`${entry.title} ${entry.subtitle ?? ""}`, query2) })).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).map(({ entry }) => {
@@ -1950,8 +1997,13 @@ function localPages(shell, query2, open) {
     return { id: entry.id, title: entry.title, subtitle: entry.subtitle, href: entry.url, icon: /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.8, "aria-hidden": true }), run: (newTab) => open(entry.url, newTab) };
   });
 }
-function rows(body) {
-  const data = Array.isArray(body) ? body : typeof body === "object" && body !== null ? body.data : null;
+function rows(body, group) {
+  let data = Array.isArray(body) ? body : typeof body === "object" && body !== null ? body.data : null;
+  if (data === void 0 && group !== void 0 && typeof body === "object" && body !== null) {
+    const groups = body.groups;
+    const match = Array.isArray(groups) ? groups.find((g) => typeof g === "object" && g !== null && g.key === group) : void 0;
+    data = match?.items;
+  }
   return Array.isArray(data) ? data.filter((row) => typeof row === "object" && row !== null) : [];
 }
 function CommandPalette({ onClose }) {
@@ -1959,6 +2011,7 @@ function CommandPalette({ onClose }) {
   const [input, setInput] = useState("");
   const [query2, setQuery] = useState("");
   const [groups, setGroups] = useState({});
+  const [groupsFor, setGroupsFor] = useState("");
   const [expanded, setExpanded] = useState(null);
   const [activeKey, setActiveKey] = useState(null);
   const field = useRef(null);
@@ -1985,14 +2038,15 @@ function CommandPalette({ onClose }) {
     const q2 = query2.trim();
     const controller = new AbortController();
     const run = (key, load) => {
-      setGroups((current) => ({ ...current, [key]: { status: "loading", items: current[key]?.items ?? [] } }));
+      setGroups((current2) => ({ ...current2, [key]: { status: "loading", items: current2[key]?.items ?? [] } }));
       load().then((items) => {
-        if (!controller.signal.aborted) setGroups((current) => ({ ...current, [key]: { status: "ready", items } }));
+        if (!controller.signal.aborted) setGroups((current2) => ({ ...current2, [key]: { status: "ready", items } }));
       }).catch(() => {
-        if (!controller.signal.aborted) setGroups((current) => ({ ...current, [key]: { status: "error", items: [] } }));
+        if (!controller.signal.aborted) setGroups((current2) => ({ ...current2, [key]: { status: "error", items: [] } }));
       });
     };
     const signal = controller.signal;
+    setGroupsFor(q2);
     if (q2 === "") {
       setGroups({});
       return () => controller.abort();
@@ -2000,7 +2054,7 @@ function CommandPalette({ onClose }) {
     if (shell.palette.searchUrl !== void 0) {
       run(
         "records",
-        async () => rows(await requestJson(withQuery(shell.palette.searchUrl, { q: q2 }), { signal })).flatMap((row) => {
+        async () => rows(await requestJson(withQuery(shell.palette.searchUrl, { q: q2, group: "records" }), { signal }), "records").flatMap((row) => {
           const url = safeUrl(row.url);
           if (typeof row.title !== "string" || url === void 0) return [];
           return [{ id: `record:${String(row.id ?? url)}`, title: row.title, subtitle: typeof row.subtitle === "string" ? row.subtitle : void 0, href: url, icon: /* @__PURE__ */ jsx(FileText, { size: 16, strokeWidth: 1.8, "aria-hidden": true }), run: (newTab) => open(url, newTab) }];
@@ -2010,7 +2064,19 @@ function CommandPalette({ onClose }) {
     const organization = shell.context.levels[0];
     run("goto", async () => {
       const loads = [];
-      if (organization !== void 0) {
+      const kitGoto = shell.palette.gotoUrl === void 0 && shell.palette.searchUrl !== void 0;
+      if (kitGoto) {
+        loads.push(
+          requestJson(withQuery(shell.palette.searchUrl, { q: q2, group: "goto" }), { signal }).then(
+            (body) => rows(body, "goto").flatMap((row) => {
+              const url = safeUrl(row.url);
+              if (typeof row.title !== "string" || url === void 0) return [];
+              return [{ id: `goto:${String(row.id ?? url)}`, title: row.title, subtitle: typeof row.subtitle === "string" ? row.subtitle : void 0, href: url, icon: /* @__PURE__ */ jsx(Building2, { size: 16, strokeWidth: 1.8, "aria-hidden": true }), run: (newTab) => open(url, newTab) }];
+            })
+          )
+        );
+      }
+      if (organization !== void 0 && !kitGoto) {
         loads.push(
           requestJson(withQuery(organization.listUrl, { q: q2, limit: "5" }), { signal }).then(
             (body) => rows(body).flatMap((row) => {
@@ -2069,7 +2135,7 @@ function CommandPalette({ onClose }) {
     return () => controller.abort();
   }, [query2, shell]);
   const q = input.trim();
-  const pages = useMemo(() => localPages(shell, q, open), [shell, q]);
+  const pages = useMemo(() => localPages(shell, q, open, t("Locked")), [shell, q, t]);
   const actions = useMemo(
     () => shell.palette.actions.filter((action) => matchScore(`${action.label} ${(action.keywords ?? []).join(" ")}`, q) > 0).map((action) => {
       const Icon = action.icon !== void 0 ? resolveIcon(action.icon) : Zap;
@@ -2117,8 +2183,14 @@ function CommandPalette({ onClose }) {
     return { ...section, start, count: items.length + (more ? 1 : 0) };
   });
   const keyOf = (option) => option.kind === "item" ? `${option.group}:${option.item.id}` : `all:${option.group}`;
-  const found = activeKey === null ? -1 : options.findIndex((option) => keyOf(option) === activeKey);
-  const active = found >= 0 ? found : 0;
+  const debounced = q === query2.trim() && groupsFor === q;
+  const current = (group) => group === "pages" || group === "actions" || debounced && sections.find((section) => section.key === group)?.state.status === "ready";
+  const busy = !debounced || sections.some((section) => section.state.status === "loading");
+  const firstResult = options.find((option) => option.group !== "ask" && current(option.group));
+  const autoKey = firstResult !== void 0 ? keyOf(firstResult) : !busy && options[0] !== void 0 ? keyOf(options[0]) : null;
+  const indexOf = (key) => key === null ? -1 : options.findIndex((option) => keyOf(option) === key);
+  const found = indexOf(activeKey);
+  const active = found >= 0 ? found : indexOf(autoKey);
   const setActive = (next) => {
     const index = typeof next === "function" ? next(active) : next;
     const option = options[index];
@@ -2127,10 +2199,9 @@ function CommandPalette({ onClose }) {
   useEffect(() => {
     setActiveKey(null);
   }, [q]);
-  const firstKey = options[0] === void 0 ? null : keyOf(options[0]);
   useEffect(() => {
-    if (activeKey === null && firstKey !== null) setActiveKey(firstKey);
-  }, [activeKey, firstKey]);
+    if (activeKey === null && autoKey !== null) setActiveKey(autoKey);
+  }, [activeKey, autoKey]);
   useEffect(() => {
     revealInList(`${id}-${active}`);
   }, [active, id]);
@@ -2178,8 +2249,8 @@ function CommandPalette({ onClose }) {
           "aria-controls": `${id}-list`,
           "aria-activedescendant": activeOption !== void 0 ? `${id}-${active}` : void 0,
           "aria-autocomplete": "list",
-          "aria-label": t("Search or ask\u2026"),
-          placeholder: t("Search or ask\u2026"),
+          "aria-label": shell.palette.placeholder ?? t("Search or ask\u2026"),
+          placeholder: shell.palette.placeholder ?? t("Search or ask\u2026"),
           value: input,
           onChange: (event) => setInput(event.target.value),
           autoComplete: "off",
@@ -2358,16 +2429,31 @@ function CboxShell({ shell, children, navigate = defaultNavigate, LinkComponent
   const helpOpen = useHelpState(store, (state) => helpVisible(state, docked));
   const banner = shell.banner !== void 0 && (shell.banner.kind !== "sandbox" || testData) ? shell.banner : void 0;
   return /* @__PURE__ */ jsx(ShellContext.Provider, { value: api, children: /* @__PURE__ */ jsxs("div", { className: "cbx-shell", "data-help-open": helpOpen, children: [
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "cbx-skip-link",
+        href: `#${mainId}`,
+        onClick: (event) => {
+          const main = document.getElementById(mainId);
+          if (main === null) return;
+          event.preventDefault();
+          main.focus();
+          main.scrollIntoView?.({ block: "start" });
+        },
+        children: t("Skip to content")
+      }
+    ),
     /* @__PURE__ */ jsx(Rail, { brandAssetBase }),
     /* @__PURE__ */ jsxs("div", { className: "cbx-shell-column", children: [
       /* @__PURE__ */ jsx(Header, { mobile }),
       banner !== void 0 && /* @__PURE__ */ jsxs("div", { className: `cbx-banner cbx-banner-${banner.kind}`, role: "status", children: [
         /* @__PURE__ */ jsx("span", { className: "cbx-banner-text", children: banner.text }),
-        banner.action !== void 0 && /* @__PURE__ */ jsx(LinkComponent, { href: banner.action.url, className: "cbx-banner-action", children: banner.action.label })
+        banner.action !== void 0 && /* @__PURE__ */ jsx(LinkComponent, { href: navUrl(banner.action), className: "cbx-banner-action", children: banner.action.label })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "cbx-shell-body", children: [
         /* @__PURE__ */ jsx(Subnav, {}),
-        /* @__PURE__ */ jsx("main", { id: mainId, className: "cbx-shell-main canvas-gradient", children })
+        /* @__PURE__ */ jsx("main", { id: mainId, tabIndex: -1, className: "cbx-shell-main canvas-gradient", children })
       ] })
     ] }),
     /* @__PURE__ */ jsx(HelpColumn, { docked }),
@@ -2424,7 +2510,7 @@ function Rail({ brandAssetBase }) {
           /* @__PURE__ */ jsx("nav", { className: "cbx-rail-nav", "aria-label": name, children: shell.nav.areas.map((area) => {
             const Icon = resolveIcon(area.icon, icons);
             const active = area.key === shell.nav.activeArea;
-            return /* @__PURE__ */ jsxs(Link, { href: area.url, className: `cbx-rail-link ${active ? "is-active" : ""}`, "aria-current": active ? "page" : void 0, title: open ? void 0 : area.label, "aria-label": area.label, children: [
+            return /* @__PURE__ */ jsxs(Link, { href: navUrl(area), className: `cbx-rail-link ${active ? "is-active" : ""}`, "aria-current": active ? "page" : void 0, title: open ? void 0 : area.label, "aria-label": area.label, children: [
               /* @__PURE__ */ jsx(Icon, { size: 18, strokeWidth: 1.7, "aria-hidden": true }),
               /* @__PURE__ */ jsx("span", { className: "cbx-rail-label", children: area.label })
             ] }, area.key);
@@ -2471,10 +2557,19 @@ function Subnav() {
       /* @__PURE__ */ jsx("strong", { className: "cbx-truncate", children: area.label }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "cbx-icon-button", onClick: () => setPreference("subnavCollapsed", true), "aria-label": t("Collapse {area}", { area: area.label }), title: "\u2318.", children: /* @__PURE__ */ jsx(PanelLeftClose, { size: 16, strokeWidth: 1.8, "aria-hidden": true }) })
     ] }),
-    /* @__PURE__ */ jsx("nav", { "aria-label": area.label, className: "cbx-subnav-list", children: pages.map((page) => {
-      const active = page.key === shell.nav.activePage;
-      return /* @__PURE__ */ jsx(Link, { href: page.url, className: `cbx-subnav-link ${active ? "is-active" : ""}`, "aria-current": active ? "page" : void 0, children: /* @__PURE__ */ jsx("span", { className: "cbx-truncate", title: page.label, children: page.label }) }, page.key);
-    }) })
+    /* @__PURE__ */ jsx("nav", { "aria-label": area.label, className: "cbx-subnav-list", children: /* @__PURE__ */ jsx(
+      NavPageList,
+      {
+        pages,
+        renderPage: (page) => {
+          const active = page.key === shell.nav.activePage;
+          return /* @__PURE__ */ jsxs(Link, { href: navUrl(page), className: `cbx-subnav-link ${active ? "is-active" : ""} ${page.locked === true ? "is-locked" : ""}`, "aria-current": active ? "page" : void 0, "data-locked": page.locked === true ? "true" : void 0, children: [
+            /* @__PURE__ */ jsx("span", { className: "cbx-truncate", title: page.label, children: page.label }),
+            /* @__PURE__ */ jsx(NavPageMarks, { page })
+          ] }, page.key);
+        }
+      }
+    ) })
   ] });
 }
 function Header({ mobile }) {