@apliteni/apliteni-ui 0.61.2 → 0.62.0

package/README.md

@@ -220,6 +220,12 @@ react/                   # React components — private workspace, built to reac
   dist/                  #   tsup output; shipped as …/react and …/react/css
 ```
 
+`SidebarNav` renders flat items or captioned sections with one level of nested
+disclosure, counts, disabled and danger rows, an artwork slot, and a footer slot. Its
+`renderLink(item, linkProps)` hook supports router links; spread the supplied props
+to retain names, children and current-page semantics. `collapsed` changes only
+presentation, keeping nested links reachable and named.
+
 ## Contribute
 
 Use Node 20 or newer. Install [jq](https://jqlang.github.io/jq/), then run `npm ci` at

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.d.ts

@@ -659,7 +659,57 @@ type TooltipProps = {
 };
 declare function Tooltip({ text, children }: TooltipProps): react.JSX.Element;
 
+type SidebarNavBadge = string | number | {
+    text: string | number;
+    tone?: 'neutral' | 'accent' | 'live' | 'danger';
+};
+/** A row that goes somewhere. A group takes these as its children. */
+type SidebarNavLeaf = {
+    id: string;
+    label: string;
+    href?: string;
+    target?: string;
+    icon?: string;
+    leading?: ReactNode;
+    badge?: SidebarNavBadge;
+    disabled?: boolean;
+    danger?: boolean;
+};
+/**
+ * One level of nesting, the depth `sidebarNav()` renders: its `sideGroup()` maps
+ * children through `sideLeaf()`, which has no group branch. A child's own `items`
+ * are dropped here too, so the two halves render the same tree.
+ */
+type SidebarNavItem = SidebarNavLeaf & {
+    items?: SidebarNavLeaf[];
+    defaultOpen?: boolean;
+};
+type SidebarNavSection = {
+    label?: string;
+    items: SidebarNavItem[];
+};
+type SidebarNavProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
+    items?: SidebarNavItem[];
+    sections?: SidebarNavSection[];
+    active?: string;
+    activeIs?: 'page' | 'section';
+    collapsed?: boolean;
+    footer?: ReactNode;
+    /** Spread all link props onto the router link to retain its name and current state. */
+    renderLink?: (item: SidebarNavItem, props: ComponentPropsWithoutRef<'a'>) => ReactNode;
+};
+declare const SidebarNav: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
+    items?: SidebarNavItem[];
+    sections?: SidebarNavSection[];
+    active?: string;
+    activeIs?: "page" | "section";
+    collapsed?: boolean;
+    footer?: ReactNode;
+    /** Spread all link props onto the router link to retain its name and current state. */
+    renderLink?: (item: SidebarNavItem, props: ComponentPropsWithoutRef<"a">) => ReactNode;
+} & react.RefAttributes<HTMLElement>>;
+
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -2452,9 +2452,108 @@ function Toast({ children }) {
 }
 
 // src/AppShell.tsx
-import { useEffect as useEffect12, useId as useId11, useState as useState11 } from "react";
+import { useEffect as useEffect13, useId as useId12, useState as useState12 } from "react";
 import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
+
+// src/SidebarNav.tsx
+import { forwardRef as forwardRef5, useEffect as useEffect12, useId as useId11, useState as useState11 } from "react";
+import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
 import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
+function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
+  const uid = useId11();
+  const group = !sub && !!item.items?.length;
+  const childActive = group && item.items.some((child) => child.id === active);
+  const [expanded, setExpanded] = useState11();
+  const open = expanded ?? item.defaultOpen ?? childActive;
+  const [entering, setEntering] = useState11(false);
+  useEffect12(() => {
+    if (!entering) return;
+    const timer = setTimeout(() => setEntering(false), ENTRANCE_FALLBACK_MS);
+    return () => clearTimeout(timer);
+  }, [entering]);
+  const count = badgeText(item.badge);
+  const name = `${item.label}${count == null || count === "" ? "" : ` ${count}`}`;
+  const isActive = !group && item.id === active;
+  const className = [
+    "ui-nav__item",
+    sub && "ui-nav__item--sub",
+    group && "ui-nav__toggle",
+    isActive && "is-active",
+    childActive && "is-current",
+    item.disabled && "is-disabled",
+    item.danger && "is-danger"
+  ].filter(Boolean).join(" ");
+  const children = /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    (item.leading ?? item.icon) && /* @__PURE__ */ jsx28("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx28(Icon, { name: item.icon }) }),
+    /* @__PURE__ */ jsx28("span", { className: "ui-nav__label", children: item.label }),
+    count != null && count !== "" && /* @__PURE__ */ jsx28("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
+    group && /* @__PURE__ */ jsx28("span", { className: "ui-nav__caret", "aria-hidden": "true" })
+  ] });
+  const common = { className, "aria-label": name, title: collapsed ? name : void 0, children };
+  if (group) return /* @__PURE__ */ jsxs23("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
+    /* @__PURE__ */ jsx28(
+      "button",
+      {
+        ...common,
+        type: "button",
+        disabled: item.disabled,
+        "aria-expanded": open,
+        "aria-controls": uid,
+        onClick: () => {
+          setExpanded(!open);
+          setEntering(!open);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx28("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx28(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
+  ] });
+  if (item.disabled) return /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28("span", { ...common, role: "link", "aria-disabled": "true" }) });
+  const props = {
+    ...common,
+    href: item.href ?? `#${item.id}`,
+    target: item.target,
+    "aria-current": isActive ? activeIs === "section" ? "true" : "page" : void 0
+  };
+  return /* @__PURE__ */ jsx28("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx28("a", { ...props }) });
+}
+function Section({ section, ...props }) {
+  const uid = useId11();
+  return /* @__PURE__ */ jsxs23("div", { className: "ui-nav__section", children: [
+    section.label && /* @__PURE__ */ jsx28("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
+    /* @__PURE__ */ jsx28("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx28(Row, { item, ...props }, item.id)) })
+  ] });
+}
+var SidebarNav = forwardRef5(function SidebarNav2({
+  items = [],
+  sections,
+  active,
+  activeIs = "page",
+  collapsed = false,
+  footer,
+  renderLink,
+  className,
+  "aria-label": label = "Sidebar",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs23("nav", { ...rest, ref, "aria-label": label, className: ["ui-nav", "ui-nav--side", collapsed && "is-collapsed", className].filter(Boolean).join(" "), children: [
+    (sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */ jsx28(
+      Section,
+      {
+        section,
+        active,
+        activeIs,
+        collapsed,
+        renderLink
+      },
+      index
+    )),
+    footer && /* @__PURE__ */ jsx28("div", { className: "ui-nav__foot", children: footer })
+  ] });
+});
+
+// src/AppShell.tsx
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -2475,21 +2574,21 @@ function AppShell({
   palette,
   renderLink
 }) {
-  const uid = useId11();
-  const [collapsed, setCollapsed] = useState11(defaultCollapsed);
-  const [search, setSearch] = useState11(false);
-  const [more, setMore] = useState11(false);
-  const [theme, setTheme] = useState11("dark");
+  const uid = useId12();
+  const [collapsed, setCollapsed] = useState12(defaultCollapsed);
+  const [search, setSearch] = useState12(false);
+  const [more, setMore] = useState12(false);
+  const [theme, setTheme] = useState12("dark");
   const current = path(pathname);
   const active = sections.filter((section) => current === path(section.href) || path(section.href) !== "/" && current.startsWith(`${path(section.href)}/`)).sort((a, b) => path(b.href).length - path(a.href).length)[0];
-  useEffect12(() => {
+  useEffect13(() => {
     setCollapsed(railCollapsed() ?? defaultCollapsed);
   }, [defaultCollapsed]);
-  useEffect12(() => {
+  useEffect13(() => {
     setMore(false);
     setSearch(false);
   }, [pathname]);
-  useEffect12(() => {
+  useEffect13(() => {
     const root = document.documentElement;
     const sync2 = () => setTheme(root.getAttribute("data-theme") === "light" ? "light" : "dark");
     sync2();
@@ -2497,7 +2596,7 @@ function AppShell({
     observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
     return () => observer.disconnect();
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     const hotkey = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
       const target = event.target;
@@ -2520,49 +2619,68 @@ function AppShell({
     const linkProps = {
       href: section.href,
       className: `ui-nav__item${section === active ? " is-active" : ""}`,
-      "aria-current": section === active ? "page" : void 0,
+      // guidelines/going-back.md, section-lit: the same row, so the same reading as
+      // the rail's. "page" here would announce the list as the page the reader is on.
+      "aria-current": section === active ? back ? "true" : "page" : void 0,
       "aria-label": `${section.label}${section.count == null ? "" : ` ${section.count}`}`,
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs23(Fragment7, { children: [
-        /* @__PURE__ */ jsx28("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx28(Icon, { name: section.icon }) }),
-        /* @__PURE__ */ jsx28("span", { className: "ui-nav__label", children: section.label }),
-        section.count != null && /* @__PURE__ */ jsx28("span", { className: "ui-nav__badge", children: section.count })
+      children: /* @__PURE__ */ jsxs24(Fragment8, { children: [
+        /* @__PURE__ */ jsx29("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx29(Icon, { name: section.icon }) }),
+        /* @__PURE__ */ jsx29("span", { className: "ui-nav__label", children: section.label }),
+        section.count != null && /* @__PURE__ */ jsx29("span", { className: "ui-nav__badge is-neutral", children: section.count })
       ] })
     };
-    return /* @__PURE__ */ jsx28("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx28("a", { ...linkProps }) }, section.href);
+    return /* @__PURE__ */ jsx29("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx29("a", { ...linkProps }) }, section.href);
   });
+  const sidebar = (items, label) => /* @__PURE__ */ jsx29(
+    SidebarNav,
+    {
+      "aria-label": label,
+      items: items.map((section) => ({ ...section, id: section.href, badge: section.count })),
+      active: active?.href,
+      activeIs: back ? "section" : "page",
+      renderLink: (item, props) => {
+        const section = items.find((section2) => section2.href === item.id);
+        const linkProps = { ...props, onClick: (event) => {
+          if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
+        } };
+        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx29("a", { ...linkProps });
+      }
+    }
+  );
   const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
   const visible = sections.length > 4 ? sections.slice(0, 3) : sections;
   const remaining = sections.slice(visible.length);
   const initials = account.name.trim().split(/\s+/).map((part) => part[0]).slice(0, 2).join("");
-  return /* @__PURE__ */ jsxs23("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    /* @__PURE__ */ jsxs23("div", { className: "ui-app__rail", children: [
-      /* @__PURE__ */ jsx28("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs23("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-        brand ?? /* @__PURE__ */ jsx28("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-        /* @__PURE__ */ jsx28("span", { children: word })
+  return /* @__PURE__ */ jsxs24("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    /* @__PURE__ */ jsxs24("div", { className: "ui-app__rail", children: [
+      /* @__PURE__ */ jsx29("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs24("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+        brand ?? /* @__PURE__ */ jsx29("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+        /* @__PURE__ */ jsx29("span", { children: word })
       ] }) }),
-      /* @__PURE__ */ jsx28("nav", { className: "ui-nav ui-nav--side", "aria-label": "Sections", children: /* @__PURE__ */ jsx28("ul", { className: "ui-nav__list", children: links(sections) }) }),
-      /* @__PURE__ */ jsx28("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx28("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs23("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
-        /* @__PURE__ */ jsx28("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs23("svg", { className: "ui-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx28("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-          /* @__PURE__ */ jsx28("path", { className: "ui-app__fold-seam", d: "M9 3v18" })
+      sidebar(sections, "Sections"),
+      /* @__PURE__ */ jsx29("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx29("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs24("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx29("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs24("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx29("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx29("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
+          /* @__PURE__ */ jsx29("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
         ] }) }),
-        /* @__PURE__ */ jsx28("span", { className: "ui-nav__label", children: foldLabel })
+        /* @__PURE__ */ jsx29("span", { className: "ui-nav__label", children: foldLabel })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs23("div", { className: "ui-app__well", children: [
-      /* @__PURE__ */ jsxs23("header", { className: "ui-app__bar", children: [
-        /* @__PURE__ */ jsxs23("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
-          /* @__PURE__ */ jsx28("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx28(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx28("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
-          /* @__PURE__ */ jsx28("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
+    /* @__PURE__ */ jsxs24("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs24("header", { className: "ui-app__bar", children: [
+        /* @__PURE__ */ jsxs24("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+          /* @__PURE__ */ jsx29("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx29(Icon, { name: "search" }) }),
+          /* @__PURE__ */ jsx29("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
+          /* @__PURE__ */ jsx29("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
-        /* @__PURE__ */ jsx28("span", { className: "ui-app__bar-gap" }),
+        /* @__PURE__ */ jsx29("span", { className: "ui-app__bar-gap" }),
         bandControl,
-        /* @__PURE__ */ jsx28("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx28("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
-        /* @__PURE__ */ jsx28("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx29("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
+        /* @__PURE__ */ jsx29("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx29(
           Dropdown,
           {
             variant: "menu",
@@ -2571,27 +2689,27 @@ function AppShell({
             ariaLabel: `Signed in as ${account.name}, ${account.email}`,
             triggerClass: "ui-app__user-trigger",
             panelClass: "ui-app__user-panel",
-            triggerContent: /* @__PURE__ */ jsx28("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
-            header: /* @__PURE__ */ jsxs23("div", { className: "ui-dropdown__head", children: [
-              /* @__PURE__ */ jsx28("b", { children: account.name }),
-              /* @__PURE__ */ jsx28("span", { children: account.email })
+            triggerContent: /* @__PURE__ */ jsx29("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
+            header: /* @__PURE__ */ jsxs24("div", { className: "ui-dropdown__head", children: [
+              /* @__PURE__ */ jsx29("b", { children: account.name }),
+              /* @__PURE__ */ jsx29("span", { children: account.email })
             ] }),
             items: [{ label: "Sign out", icon: "logout", danger: true }],
             onSelect: onSignOut
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs23("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
-        back && /* @__PURE__ */ jsx28(BackLink, { ...back }),
-        /* @__PURE__ */ jsx28("h1", { children: title }),
-        lede && /* @__PURE__ */ jsx28("p", { className: "ui-app__sub", children: lede }),
-        actions && /* @__PURE__ */ jsx28("div", { className: "ui-react-app__actions", children: actions }),
-        /* @__PURE__ */ jsx28("div", { className: "ui-app__body", children })
+      /* @__PURE__ */ jsxs24("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+        back && /* @__PURE__ */ jsx29(BackLink, { ...back }),
+        /* @__PURE__ */ jsx29("h1", { children: title }),
+        lede && /* @__PURE__ */ jsx29("p", { className: "ui-app__sub", children: lede }),
+        actions && /* @__PURE__ */ jsx29("div", { className: "ui-react-app__actions", children: actions }),
+        /* @__PURE__ */ jsx29("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    /* @__PURE__ */ jsx28("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs23("ul", { className: "ui-nav__list", children: [
+    /* @__PURE__ */ jsx29("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs24("ul", { className: "ui-nav__list", children: [
       links(visible),
-      remaining.length > 0 && /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsxs23(
+      remaining.length > 0 && /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsxs24(
         "button",
         {
           type: "button",
@@ -2600,20 +2718,20 @@ function AppShell({
           "aria-expanded": more,
           onClick: () => setMore(true),
           children: [
-            /* @__PURE__ */ jsx28("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx28(Icon, { name: "moreHorizontal" }) }),
-            /* @__PURE__ */ jsx28("span", { className: "ui-nav__label", children: "More" })
+            /* @__PURE__ */ jsx29("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx29(Icon, { name: "moreHorizontal" }) }),
+            /* @__PURE__ */ jsx29("span", { className: "ui-nav__label", children: "More" })
           ]
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx28(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: /* @__PURE__ */ jsx28("nav", { className: "ui-nav ui-nav--side", "aria-label": "More sections", children: /* @__PURE__ */ jsx28("ul", { className: "ui-nav__list", children: links(remaining) }) }) }),
-    /* @__PURE__ */ jsx28(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
+    /* @__PURE__ */ jsx29(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
+    /* @__PURE__ */ jsx29(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
   ] });
 }
 
 // src/EmptyState.tsx
 import { icon as kitIcon2, illo } from "@apliteni/apliteni-ui";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var cases = {
   "first-run": { title: "Nothing needs you yet", sub: "New items will appear here when they need your attention.", icon: "check" },
   "no-matches": { title: "No results in this view", sub: "Try another search or clear your filters.", icon: "search" },
@@ -2625,18 +2743,18 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon6, art, actio
   const heading = title ?? preset.title;
   const guidance = sub ?? preset.sub;
   const glyph = icon6 ?? preset.icon;
-  return /* @__PURE__ */ jsxs24("div", { className: "ui-empty", children: [
-    art ? typeof art === "string" ? /* @__PURE__ */ jsx29("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx29("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx29("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
-    heading && /* @__PURE__ */ jsx29("div", { className: "ui-empty__title", children: heading }),
-    guidance && /* @__PURE__ */ jsx29("div", { className: "ui-empty__sub", children: guidance }),
-    actions && /* @__PURE__ */ jsx29("div", { className: "ui-empty__actions", children: actions })
+  return /* @__PURE__ */ jsxs25("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx30("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx30("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx30("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx30("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx30("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx30("div", { className: "ui-empty__actions", children: actions })
   ] });
 }
 
 // src/ThemeToggle.tsx
 import { useSyncExternalStore } from "react";
 import { icon as icon5 } from "@apliteni/apliteni-ui";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var STORAGE_KEY = "apliteni-strategy-theme";
 var CHOICE_EVENT = "apliteni-theme-choice";
 var THEME_INIT_SCRIPT = `(()=>{let t;try{t=localStorage.getItem('apliteni-strategy-theme')}catch{}document.documentElement.setAttribute('data-theme',t==='dark'||t==='light'?t:window.matchMedia?.('(prefers-color-scheme: light)').matches?'light':'dark')})()`;
@@ -2694,10 +2812,10 @@ function ThemeToggle({ labelled = false }) {
     }
     window.dispatchEvent(new Event(CHOICE_EVENT));
   };
-  const button = /* @__PURE__ */ jsx30("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx30("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon5(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
-  return labelled ? /* @__PURE__ */ jsxs25("span", { className: "ui-theme-toggle", children: [
+  const button = /* @__PURE__ */ jsx31("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx31("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon5(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
+  return labelled ? /* @__PURE__ */ jsxs26("span", { className: "ui-theme-toggle", children: [
     button,
-    /* @__PURE__ */ jsxs25("span", { children: [
+    /* @__PURE__ */ jsxs26("span", { children: [
       label,
       " theme"
     ] })
@@ -2738,6 +2856,7 @@ export {
   RowIdentity,
   Segmented,
   SelectField,
+  SidebarNav,
   Skeleton,
   SkeletonTable,
   Snippet,

package/src/components/shell.js

@@ -135,12 +135,17 @@ export function railCollapsed(cookies) {
 // The name says what the press will do, and aria-expanded says what the rail is.
 const railName = (collapsed) => (collapsed ? 'Expand sidebar' : 'Collapse sidebar');
 
-// A frame that holds still and a seam that crosses it. Only the two nodes are
-// written here — a seam that travels has to be a child a stylesheet can reach —
-// and they are spliced into icon()'s own wrapper rather than a copy of it.
-// why: docs/specification.md#the-page-shell
+// Lucide `panel-left-close`, unmodified: a frame, the seam at 9, and a chevron
+// pointing the way the press moves the rail's edge. The folded rail mirrors the
+// chevron about 15 in layout.css, which lands it exactly on Lucide
+// `panel-left-open` — so both states are a shipped glyph and neither is drawn by
+// hand. The seam does not move: it IS the rail, and the compartment it cuts off
+// stays on the side the rail is on. Only the nodes are written here — a child a
+// stylesheet can reach — and they are spliced into icon()'s own wrapper rather
+// than a copy of it. why: docs/specification.md#the-page-shell
 const MARK = '<rect x="3" y="3" width="18" height="18" rx="2"/>'
-  + '<path class="ui-app__fold-seam" d="M9 3v18"/>';
+  + '<path class="ui-app__fold-seam" d="M9 3v18"/>'
+  + '<path class="ui-app__fold-arrow" d="m16 15-3-3 3-3"/>';
 const railMark = () => icon('').replace('></svg>', `>${MARK}</svg>`);
 
 // The rail's own skin, outside the <nav>: folding the rail is not a place to go.

package/src/styles/layout.css

@@ -106,13 +106,14 @@
 /* Which row is current is structural here, not chromatic: the resting glyphs
    step down so the current one is the brightest whatever --accent is doing, and
    the bar beside it carries the hue. A 3x17px bar on a 45x44 tile was the
-   smallest of three weak signals doing the most work, so it grows with the row. */
+   smallest of three weak signals doing the most work, so it grows with the row.
+   The current glyph's own ink is nav.css's rule now, not a copy here: since #429
+   EVERY rail reads it that way, so the rail's copy was the same sentence in a
+   second file. What is left here is the rail's own resting step. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1456 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1491 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
-.ui-app__rail .ui-nav__item.is-active .ui-nav__ic svg,
-.ui-app__rail .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: currentColor; } /* motion: still — the glyph brightens with its row, whose own highlight already transitions */
 .ui-app__rail .ui-nav__item.is-active::before { width: 3px; height: 62%; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
@@ -224,12 +225,27 @@
 .ui-app .ui-app__fold { color: var(--text); }
 .ui-app .ui-app__fold:hover,
 .ui-app .ui-app__fold:focus-visible { color: var(--strong); }
-/* The width's own clock, not the words', so the mark and the closing edge arrive
-   together; no `!important`, so the reduced-motion net still takes it. 6 is not a
-   number: shell.js draws the frame 3..21 and the seam at 9, and 6 mirrors it about
-   the centre. why: docs/specification.md#the-page-shell */
-.ui-app__fold .ui-app__fold-seam { transition: transform var(--dur-med) var(--ease); }
-.ui-app.is-collapsed .ui-app__fold .ui-app__fold-seam { transform: translateX(6px); }
+/* The seam holds at 9 at both widths, because it is the rail: the compartment it
+   cuts off is the narrow one, on the side the rail is on. What travels is the
+   chevron, and it says what the press will do rather than repeating the state —
+   the same thing the control's own accessible name says. shell.js draws it at
+   13..16, Lucide `panel-left-close`; mirrored about 15, the centre of the
+   compartment it stands in, it lands at 14..17, which is Lucide
+   `panel-left-open`. So the two states are two Lucide glyphs and the CSS between
+   them is one reflection, not a hand-drawn position. `transform-origin` is
+   written out because a scale, unlike the translate this replaces, is read from
+   wherever the origin is — left to the initial 0 0 it would fold the mark
+   through the viewBox's left edge.
+
+   The width's own clock, not the words', so the mark and the closing edge arrive
+   together; no `!important`, so the reduced-motion net still takes it.
+   why: docs/specification.md#the-page-shell */
+.ui-app__fold .ui-app__fold-arrow {
+  transform-box: view-box;
+  transform-origin: 15px 12px;
+  transition: transform var(--dur-med) var(--ease);
+}
+.ui-app.is-collapsed .ui-app__fold .ui-app__fold-arrow { transform: scaleX(-1); }
 
 /* -- The collapsed rail --------------------------------------------------- */
 /* Each rule here has its twin in the 720px block below; nothing lays a row out
@@ -257,6 +273,16 @@
 :where(.ui-app:not(.ui-app--topbar).is-collapsed) .ui-app__brand { opacity: 0; visibility: hidden; pointer-events: none; }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0; }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
+/* The current row is ONE plate on the glyph column. Same rules as nav.css writes
+   for a standalone folded rail, and for the same reasons: the bar stands in the
+   row's own left padding, which on the strip is the rail's edge; the hairline is
+   drawn on a row that keeps the open column, so its right edge is off the strip;
+   and --ui-nav-strip is twice the glyph's centre, so a box that wide at the row's
+   edge is centred on the glyph. why: docs/specification.md#the-page-shell */
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active { isolation: isolate; background: none; }
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active::before { left: 0; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:hover:not(:focus-visible) { outline: none; }
 /* The label IS the chip. `fixed` is the fallback placement, out of the rail's own
    clip; the @supports branch below pins it to the row and is the only one that
    survives a scroll. The toggle's selector is unscoped, because it is wordless at
@@ -452,6 +478,10 @@
   .ui-app__brand span { opacity: 0; pointer-events: none; }
   .ui-app__rail .ui-nav__sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0; }
   .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
+  .ui-app__rail .ui-nav__item.is-active { isolation: isolate; background: none; }
+  .ui-app__rail .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
+  .ui-app__rail .ui-nav__item.is-active::before { left: 0; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
+  .ui-app__rail .ui-nav__item:hover:not(:focus-visible) { outline: none; }
   /* The one line of this block that is deliberately NOT the reader's fold: a finger
      is the only pointer this width has, so a row and the account block are held to
      44px. Neither floor can spread to the press, where growing the box is the one

package/src/styles/nav.css

@@ -93,8 +93,12 @@
 
 .ui-nav__ic { display: inline-flex; flex: none; }
 .ui-nav__ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; opacity: 0.72; }
+/* The glyph brightens with its row and takes the row's ink, not the accent. One
+   accent signal per row: that is the marker above, which is the only thing on a
+   rail that means "here". A glyph in --accent beside it is the same sentence
+   said twice, and beside an accent counter it was said three times. See #429. */
 .ui-nav__item.is-active .ui-nav__ic svg,
-.ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: var(--accent); } /* motion: still — the glyph brightens with its row, whose own highlight already transitions */
+.ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: currentColor; } /* motion: still — the glyph brightens with its row, whose own highlight already transitions */
 .ui-nav__label {
   flex: 1 1 auto; min-width: 0;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -146,16 +150,14 @@
 .ui-nav__badge.is-live { background: var(--chip-success-fill); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--chip-success-ink); }
 .ui-nav__badge.is-danger { background: var(--glow-pink); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ color: var(--pink); }
 .ui-nav__item.is-active .ui-nav__badge.is-neutral { background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); }
-/* Same shape, one row up: on an active row the accent counter takes the row's
-   OWN surface instead of laying its wash over it. An active row is already
-   painted --surface, so an opaque counter avoids stacking tinted fills. Every
-   figure here is measured against the tokens this kit now ships. The accent on
-   that pair falls under WCAG AA in four of the eight theme x accent cells —
-   4.08 in dark Nebula, where the flat surface reads 4.92 — and no alpha reaches
-   it, the largest that clears being 0.06 in dark Nebula and 0.02 in light
-   Emerald. So the accent wash is painted on a base surface, never a raised one.
-   See #157 and docs/specification.md#colour-and-contrast. */
-.ui-nav__item.is-active .ui-nav__badge.is-accent { background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--accent); }
+/* Same shape, one row up: on the current row the accent counter drops both the
+   wash and the accent and reads as the neutral one beside it. The row already
+   carries the one accent signal it is allowed — the marker — and the count is a
+   number, not a second answer to "where am I". It also retires the pair #157
+   recorded: accent ink on --surface fell under WCAG AA in four of the eight
+   theme x accent cells (4.08 in dark Nebula), and no alpha cleared it. Nothing
+   now paints that pair. See #429 and docs/specification.md#colour-and-contrast. */
+.ui-nav__item.is-active .ui-nav__badge.is-accent { background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); }
 
 /* Collapsible group */
 .ui-nav__group { display: flex; flex-direction: column; }
@@ -248,6 +250,43 @@
 }
 .ui-nav--side.is-collapsed .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
 
+/* The current row on a folded rail: ONE plate on the glyph column, and nothing
+   else. The open rail's marker is a 3px bar standing in the row's own left
+   padding; on the strip that padding is the rail's edge, so the bar reads as a
+   tick on the rail rather than a mark on a row — and a nested row puts it
+   --space-3 further out again, outside the rail altogether. The hairline cannot
+   close either: a row keeps the open column and the rail clips it, so its right
+   edge is drawn off the strip.
+
+   The plate is the strip. --ui-nav-strip is twice a row's own glyph centre, so a
+   box that wide standing at the row's edge is centred on the glyph, and the mark
+   lands where the reader is already looking. --surface-3 is the kit's quiet
+   non-text fill — a step off the rail in both themes, carrying a glyph and never
+   a word. The references mark current the same way and with no hue at all:
+   Cloudflare's docs rail paints a flat plate, and lessly-ui's rail is "a plate and
+   the weight step, no hue". Here the glyph's own step from 0.66 to full ink is the
+   second half of that pair. See #429.
+
+   `isolation` is what puts the plate behind the glyph: a positioned ::before paints
+   over its row's content, and a negative z-index with no stacking context of its
+   own would drop it behind the rail instead. */
+.ui-nav--side.is-collapsed .ui-nav__item.is-active { isolation: isolate; background: none; }
+/* At rest only — box-shadow carries the hairline AND the focus ring (WCAG 2.4.7). */
+.ui-nav--side.is-collapsed .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
+.ui-nav--side.is-collapsed .ui-nav__item.is-active::before {
+  left: 0;
+  width: var(--ui-nav-strip);
+  height: 100%;
+  border-radius: 10px;
+  background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  z-index: -1;
+}
+/* Hover's hairline is an outline on a row that keeps the open column, so on the
+   strip it too is drawn with no right edge. A folded rail answers a pointer with
+   the row's own ink and the name beside it, which is the whole readout at this
+   width. At rest only, so the focus ring is left standing. */
+.ui-nav--side.is-collapsed .ui-nav__item:hover:not(:focus-visible) { outline: none; }
+
 /* -- Horizontal tabs ----------------------------------------------------- */
 .ui-nav--tabs {
   display: flex;