@apliteni/apliteni-ui 0.119.1 → 0.120.1

package/guidelines/button-labels.md

@@ -28,7 +28,7 @@
 
 **Rule:** Drop a button’s words only when its glyph is learned everywhere, its action is on the closed list, and its name reaches assistive technology and a hover title.
 
-**Except:** [Icon-only controls](https://ui.apli.tech/storybook/?path=/story/guidelines-iconography--iconography) is the list. The folded rail shows its names beside the glyphs, so they carry no title.
+**Except:** Icon-only controls on the Iconography page is the list. The folded rail shows its names beside the glyphs, so they carry no title.
 
 **Do:** Overflow is on that list; the funnel is not.
 

package/guidelines/density-and-accents.md

@@ -8,7 +8,7 @@
 
 **Why:** Stacking gives each label and value the full width of the block.
 
-**Do:** Stack Paid and In transit, as [Stat band tiles](https://ui.apli.tech/storybook/?path=/story/components-stat-band--gallery) do in a narrow panel.
+**Do:** Stack Paid and In transit, as Stat band tiles do in a narrow panel.
 
 **Don't:** Force the same figures side by side in that panel.
 
@@ -36,7 +36,7 @@
 
 **Don't:** Make both actions primary or colour every label and value with the accent.
 
-**Except:** Keep [Badge success, pending and danger](https://ui.apli.tech/storybook/?path=/story/components-badge-status--badges) for their named statuses; do not replace those signals with the accent.
+**Except:** Keep Badge success, pending and danger for their named statuses; do not replace those signals with the accent.
 
 ## Follow the consequence
 
@@ -50,4 +50,4 @@
 
 **Don't:** Give the source document the leading, wider pane, or let a control inside it hold the only accent on the screen while the saved values hold none.
 
-**Except:** Fade nothing to make a block quieter; a quieter block is smaller, later or uncoloured, never muted. See [Limit muted ink](https://ui.apli.tech/storybook/?path=/story/guidelines-labels-and-titles--page).
+**Except:** Fade nothing to make a block quieter; a quieter block is smaller, later or uncoloured, never muted.

package/guidelines/iconography.md

@@ -8,7 +8,7 @@
 
 **Why:** Without a legend, readers need labels for unfamiliar glyphs.
 
-**Except:** New entries require a decision and the three tests in [Earn a wordless button](https://ui.apli.tech/storybook/?path=/story/guidelines-button-labels--button-labels). Allowed: close, copy, overflow, expand, collapse and export. Theme toggles, sidebar toggles and collapsed-rail links have separate approval.
+**Except:** New entries require a decision and pass Earn a wordless button on Button labels. Allowed: close, copy, overflow, expand, collapse and export. Theme toggles, sidebar toggles and collapsed-rail links have separate approval.
 
 **Do:** Show an overflow menu without words; keep the Settings label.
 

package/package.json

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

package/react/dist/index.css

@@ -852,6 +852,13 @@
   pointer-events: auto;
 }
 
+/* src/ThemeToggle.css */
+.ui-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
 /* src/AppShell.css */
 .ui-react-app__bottom {
   display: none;
@@ -929,10 +936,3 @@
     display: none;
   }
 }
-
-/* src/ThemeToggle.css */
-.ui-theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-3);
-}

package/react/dist/index.js

@@ -79,7 +79,7 @@ var cx = (...a) => a.filter(Boolean).join(" ");
 var Button = forwardRef3(function Button2({
   variant = "secondary",
   size = "md",
-  icon: icon7,
+  icon: icon6,
   leading,
   iconRight,
   iconOnly,
@@ -143,7 +143,7 @@ var Button = forwardRef3(function Button2({
     className
   );
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
-  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon7;
+  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon6;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
   const Root = href === void 0 ? "button" : "a";
   return /* @__PURE__ */ jsxs3(
@@ -188,7 +188,7 @@ var Button = forwardRef3(function Button2({
         if (!blockKey(event)) onKeyUp?.(event);
       },
       children: [
-        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon7 && /* @__PURE__ */ jsx4(Icon, { name: icon7 }),
+        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon6 && /* @__PURE__ */ jsx4(Icon, { name: icon6 }),
         !iconOnly && renderedChildren != null && /* @__PURE__ */ jsx4("span", { className: "ui-btn__label-slot", children: /* @__PURE__ */ jsx4("span", { className: "ui-btn__label", ref: labelRef, children: renderedChildren }) }),
         iconRight && /* @__PURE__ */ jsx4(Icon, { name: iconRight }),
         busy && /* @__PURE__ */ jsxs3("span", { className: "ui-btn__dots", "aria-hidden": "true", children: [
@@ -258,9 +258,9 @@ function Card({ title, sub, level = 2, className, children }) {
 // src/primitives/Callout.tsx
 import { calloutIcons, icon as kitIcon } from "@apliteni/apliteni-ui";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function Callout({ variant, icon: icon7 = calloutIcons[variant ?? "neutral"], children, actions }) {
+function Callout({ variant, icon: icon6 = calloutIcons[variant ?? "neutral"], children, actions }) {
   return /* @__PURE__ */ jsxs5("div", { className: `ui-callout${variant && variant !== "neutral" ? ` ui-callout--${variant}` : ""}`, role: variant === "danger" ? "alert" : void 0, children: [
-    /* @__PURE__ */ jsx9("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon(icon7) } }),
+    /* @__PURE__ */ jsx9("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon(icon6) } }),
     /* @__PURE__ */ jsxs5("div", { className: "ui-callout__body", children: [
       children,
       actions != null && /* @__PURE__ */ jsx9("div", { className: "ui-toolbar ui-callout__actions", children: actions })
@@ -1566,12 +1566,12 @@ function Denied({
   title = "You don\u2019t have access",
   sub,
   need,
-  icon: icon7 = "lock",
+  icon: icon6 = "lock",
   className,
   children
 }) {
   return /* @__PURE__ */ jsxs14("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx18("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx18(Icon, { name: icon7 }) }),
+    /* @__PURE__ */ jsx18("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx18(Icon, { name: icon6 }) }),
     /* @__PURE__ */ jsx18("div", { className: "ui-denied__title", children: title }),
     sub && /* @__PURE__ */ jsx18("div", { className: "ui-denied__sub", children: sub }),
     need && /* @__PURE__ */ jsxs14("div", { className: "ui-denied__need", children: [
@@ -3518,7 +3518,7 @@ function Toast({ children }) {
 
 // src/AppShell.tsx
 import { useEffect as useEffect14, useId as useId11, useState as useState14 } from "react";
-import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
+import { paletteHotkey, prism, railCollapsed } from "@apliteni/apliteni-ui";
 
 // src/SidebarNav.tsx
 import { forwardRef as forwardRef8, useEffect as useEffect13, useId as useId10, useState as useState13 } from "react";
@@ -3617,8 +3617,79 @@ var SidebarNav = forwardRef8(function SidebarNav2({
   ] });
 });
 
+// src/ThemeToggle.tsx
+import { useSyncExternalStore } from "react";
+import { themeIcon } from "@apliteni/apliteni-ui";
+import { jsx as jsx34, jsxs as jsxs29 } 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')})()`;
+function storedTheme() {
+  try {
+    const value = localStorage.getItem(STORAGE_KEY);
+    return value === "dark" || value === "light" || value === "auto" ? value : null;
+  } catch {
+    return snapshot();
+  }
+}
+function snapshot() {
+  const choice = document.documentElement.getAttribute("data-theme-choice");
+  return choice === "dark" || choice === "light" ? choice : "auto";
+}
+function subscribe(notify) {
+  const root = document.documentElement;
+  const media = window.matchMedia?.("(prefers-color-scheme: light)");
+  const applyPreference = (choice) => {
+    root.setAttribute("data-theme-choice", choice);
+    root.setAttribute("data-theme", choice === "auto" ? media?.matches ? "light" : "dark" : choice);
+  };
+  const onSystem = () => {
+    if (snapshot() === "auto") applyPreference("auto");
+  };
+  const onChoice = () => notify();
+  const onStorage = (event) => {
+    if (event.key !== null && event.key !== STORAGE_KEY) return;
+    applyPreference(storedTheme() ?? "auto");
+  };
+  const observer = new MutationObserver(notify);
+  observer.observe(root, { attributes: true, attributeFilter: ["data-theme", "data-theme-choice"] });
+  applyPreference(root.hasAttribute("data-theme-choice") ? snapshot() : storedTheme() ?? "auto");
+  media?.addEventListener("change", onSystem);
+  window.addEventListener(CHOICE_EVENT, onChoice);
+  window.addEventListener("storage", onStorage);
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", onSystem);
+    window.removeEventListener(CHOICE_EVENT, onChoice);
+    window.removeEventListener("storage", onStorage);
+  };
+}
+function ThemeToggle({ labelled = false }) {
+  const theme = useSyncExternalStore(subscribe, snapshot, () => "auto");
+  const next = theme === "dark" ? "light" : theme === "light" ? "auto" : "dark";
+  const label = theme === "auto" ? "Auto" : theme === "light" ? "Light" : "Dark";
+  const name = `Theme: ${label}. Switch to ${next}.`;
+  const toggle = () => {
+    document.documentElement.setAttribute("data-theme-choice", next);
+    document.documentElement.setAttribute("data-theme", next === "auto" ? window.matchMedia?.("(prefers-color-scheme: light)").matches ? "light" : "dark" : next);
+    try {
+      localStorage.setItem(STORAGE_KEY, next);
+    } catch {
+    }
+    window.dispatchEvent(new Event(CHOICE_EVENT));
+  };
+  const button = /* @__PURE__ */ jsx34("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx34("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) });
+  return labelled ? /* @__PURE__ */ jsxs29("span", { className: "ui-theme-toggle", children: [
+    button,
+    /* @__PURE__ */ jsxs29("span", { children: [
+      label,
+      " theme"
+    ] })
+  ] }) : button;
+}
+
 // src/AppShell.tsx
-import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -3645,7 +3716,6 @@ function AppShell({
   const [collapsed, setCollapsed] = useState14(defaultCollapsed);
   const [search, setSearch] = useState14(false);
   const [more, setMore] = useState14(false);
-  const [theme, setTheme] = useState14("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];
   useEffect14(() => {
@@ -3655,14 +3725,6 @@ function AppShell({
     setMore(false);
     setSearch(false);
   }, [pathname]);
-  useEffect14(() => {
-    const root = document.documentElement;
-    const sync2 = () => setTheme(root.getAttribute("data-theme") === "light" ? "light" : "dark");
-    sync2();
-    const observer = new MutationObserver(sync2);
-    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
-    return () => observer.disconnect();
-  }, []);
   useEffect14(() => {
     const hotkey = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "k") return;
@@ -3693,15 +3755,15 @@ function AppShell({
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs29(Fragment12, { children: [
-        /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx34(Icon, { name: section.icon }) }),
-        /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: section.label }),
-        section.count != null && /* @__PURE__ */ jsx34("span", { className: "ui-nav__badge is-neutral", children: section.count })
+      children: /* @__PURE__ */ jsxs30(Fragment12, { children: [
+        /* @__PURE__ */ jsx35("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx35(Icon, { name: section.icon }) }),
+        /* @__PURE__ */ jsx35("span", { className: "ui-nav__label", children: section.label }),
+        section.count != null && /* @__PURE__ */ jsx35("span", { className: "ui-nav__badge is-neutral", children: section.count })
       ] })
     };
-    return /* @__PURE__ */ jsx34("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx34("a", { ...linkProps }) }, section.href);
+    return /* @__PURE__ */ jsx35("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx35("a", { ...linkProps }) }, section.href);
   });
-  const sidebar = (items, label) => /* @__PURE__ */ jsx34(
+  const sidebar = (items, label) => /* @__PURE__ */ jsx35(
     SidebarNav,
     {
       "aria-label": label,
@@ -3713,7 +3775,7 @@ function AppShell({
         const linkProps = { ...props, onClick: (event) => {
           if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
         } };
-        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx34("a", { ...linkProps });
+        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx35("a", { ...linkProps });
       }
     }
   );
@@ -3722,36 +3784,36 @@ function AppShell({
   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("");
-  const lockup = /* @__PURE__ */ jsxs29("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-    brand ?? /* @__PURE__ */ jsx34("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-    /* @__PURE__ */ jsx34("span", { children: word })
+  const lockup = /* @__PURE__ */ jsxs30("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+    brand ?? /* @__PURE__ */ jsx35("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+    /* @__PURE__ */ jsx35("span", { children: word })
   ] });
-  return /* @__PURE__ */ jsxs29("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    navigable && /* @__PURE__ */ jsxs29("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
-      /* @__PURE__ */ jsx34("div", { className: "ui-app__head", children: lockup }),
+  return /* @__PURE__ */ jsxs30("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    navigable && /* @__PURE__ */ jsxs30("div", { className: "ui-app__rail", role: "region", "aria-label": "Sidebar", children: [
+      /* @__PURE__ */ jsx35("div", { className: "ui-app__head", children: lockup }),
       sidebar(sections, "Sections"),
-      /* @__PURE__ */ jsx34("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx34("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
-        /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs29("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx34("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-          /* @__PURE__ */ jsx34("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
-          /* @__PURE__ */ jsx34("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
+      /* @__PURE__ */ jsx35("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx35("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs30("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx35("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs30("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx35("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx35("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
+          /* @__PURE__ */ jsx35("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
         ] }) }),
-        /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: foldLabel })
+        /* @__PURE__ */ jsx35("span", { className: "ui-nav__label", children: foldLabel })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs29("div", { className: "ui-app__well", children: [
-      /* @__PURE__ */ jsxs29("header", { className: "ui-app__bar", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs30("header", { className: "ui-app__bar", children: [
         !navigable && lockup,
-        /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
-          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx34(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-txt", children: searchLabel }),
-          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
-          /* @__PURE__ */ jsx34("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
+        /* @__PURE__ */ jsxs30("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+          /* @__PURE__ */ jsx35("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx35(Icon, { name: "search" }) }),
+          /* @__PURE__ */ jsx35("span", { className: "ui-app__search-txt", children: searchLabel }),
+          /* @__PURE__ */ jsx35("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
+          /* @__PURE__ */ jsx35("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
-        /* @__PURE__ */ jsx34("span", { className: "ui-app__bar-gap" }),
+        /* @__PURE__ */ jsx35("span", { className: "ui-app__bar-gap" }),
         bandControl,
-        /* @__PURE__ */ jsx34("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx34("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
-        /* @__PURE__ */ jsx34("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(ThemeToggle, {}),
+        /* @__PURE__ */ jsx35("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx35(
           Dropdown,
           {
             variant: "menu",
@@ -3760,27 +3822,27 @@ function AppShell({
             ariaLabel: `Signed in as ${account.name}, ${account.email}`,
             triggerClass: "ui-app__user-trigger",
             panelClass: "ui-app__user-panel",
-            triggerContent: /* @__PURE__ */ jsx34("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
-            header: /* @__PURE__ */ jsxs29("div", { className: "ui-dropdown__head", children: [
-              /* @__PURE__ */ jsx34("b", { children: account.name }),
-              /* @__PURE__ */ jsx34("span", { children: account.email })
+            triggerContent: /* @__PURE__ */ jsx35("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
+            header: /* @__PURE__ */ jsxs30("div", { className: "ui-dropdown__head", children: [
+              /* @__PURE__ */ jsx35("b", { children: account.name }),
+              /* @__PURE__ */ jsx35("span", { children: account.email })
             ] }),
             items: [{ label: "Sign out", icon: "logout", danger: true }],
             onSelect: onSignOut
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs29("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
-        back && /* @__PURE__ */ jsx34(BackLink, { ...back }),
-        /* @__PURE__ */ jsx34("h1", { children: title }),
-        lede && /* @__PURE__ */ jsx34("p", { className: "ui-app__sub", children: lede }),
-        actions && /* @__PURE__ */ jsx34("div", { className: "ui-react-app__actions", children: actions }),
-        /* @__PURE__ */ jsx34("div", { className: "ui-app__body", children })
+      /* @__PURE__ */ jsxs30("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+        back && /* @__PURE__ */ jsx35(BackLink, { ...back }),
+        /* @__PURE__ */ jsx35("h1", { children: title }),
+        lede && /* @__PURE__ */ jsx35("p", { className: "ui-app__sub", children: lede }),
+        actions && /* @__PURE__ */ jsx35("div", { className: "ui-react-app__actions", children: actions }),
+        /* @__PURE__ */ jsx35("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    navigable && /* @__PURE__ */ jsx34("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs29("ul", { className: "ui-nav__list", children: [
+    navigable && /* @__PURE__ */ jsx35("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs30("ul", { className: "ui-nav__list", children: [
       links(visible),
-      remaining.length > 0 && /* @__PURE__ */ jsx34("li", { children: /* @__PURE__ */ jsxs29(
+      remaining.length > 0 && /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsxs30(
         "button",
         {
           type: "button",
@@ -3789,110 +3851,39 @@ function AppShell({
           "aria-expanded": more,
           onClick: () => setMore(true),
           children: [
-            /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx34(Icon, { name: "moreHorizontal" }) }),
-            /* @__PURE__ */ jsx34("span", { className: "ui-nav__label", children: "More" })
+            /* @__PURE__ */ jsx35("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx35(Icon, { name: "moreHorizontal" }) }),
+            /* @__PURE__ */ jsx35("span", { className: "ui-nav__label", children: "More" })
           ]
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx34(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
-    /* @__PURE__ */ jsx34(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
+    /* @__PURE__ */ jsx35(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
+    /* @__PURE__ */ jsx35(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 jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs31 } 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" },
   "not-found": { title: "We can't find that page", sub: "Check the address or return to the home page.", icon: "folder" },
   "not-yet-built": { title: "This ships later", sub: "This screen is not available yet. Check back later.", icon: "clock" }
 };
-function EmptyState({ variant = "first-run", title, sub, icon: icon7, art, actions }) {
+function EmptyState({ variant = "first-run", title, sub, icon: icon6, art, actions }) {
   const preset = cases[variant];
   const heading = title ?? preset.title;
   const guidance = sub ?? preset.sub;
-  const glyph = icon7 ?? preset.icon;
-  return /* @__PURE__ */ jsxs30("div", { className: "ui-empty", children: [
-    art ? typeof art === "string" ? /* @__PURE__ */ jsx35("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx35("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx35("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
-    heading && /* @__PURE__ */ jsx35("div", { className: "ui-empty__title", children: heading }),
-    guidance && /* @__PURE__ */ jsx35("div", { className: "ui-empty__sub", children: guidance }),
-    actions && /* @__PURE__ */ jsx35("div", { className: "ui-empty__actions", children: actions })
+  const glyph = icon6 ?? preset.icon;
+  return /* @__PURE__ */ jsxs31("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx36("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx36("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx36("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx36("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx36("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx36("div", { className: "ui-empty__actions", children: actions })
   ] });
 }
 
-// src/ThemeToggle.tsx
-import { useSyncExternalStore } from "react";
-import { icon as icon6 } from "@apliteni/apliteni-ui";
-import { jsx as jsx36, jsxs as jsxs31 } 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')})()`;
-function storedTheme() {
-  try {
-    const value = localStorage.getItem(STORAGE_KEY);
-    return value === "dark" || value === "light" || value === "auto" ? value : null;
-  } catch {
-    return snapshot();
-  }
-}
-function snapshot() {
-  const choice = document.documentElement.getAttribute("data-theme-choice");
-  return choice === "dark" || choice === "light" ? choice : "auto";
-}
-function subscribe(notify) {
-  const root = document.documentElement;
-  const media = window.matchMedia?.("(prefers-color-scheme: light)");
-  const applyPreference = (choice) => {
-    root.setAttribute("data-theme-choice", choice);
-    root.setAttribute("data-theme", choice === "auto" ? media?.matches ? "light" : "dark" : choice);
-  };
-  const onSystem = () => {
-    if (snapshot() === "auto") applyPreference("auto");
-  };
-  const onChoice = () => notify();
-  const onStorage = (event) => {
-    if (event.key !== null && event.key !== STORAGE_KEY) return;
-    applyPreference(storedTheme() ?? "auto");
-  };
-  const observer = new MutationObserver(notify);
-  observer.observe(root, { attributes: true, attributeFilter: ["data-theme", "data-theme-choice"] });
-  applyPreference(root.hasAttribute("data-theme-choice") ? snapshot() : storedTheme() ?? "auto");
-  media?.addEventListener("change", onSystem);
-  window.addEventListener(CHOICE_EVENT, onChoice);
-  window.addEventListener("storage", onStorage);
-  return () => {
-    observer.disconnect();
-    media?.removeEventListener("change", onSystem);
-    window.removeEventListener(CHOICE_EVENT, onChoice);
-    window.removeEventListener("storage", onStorage);
-  };
-}
-function ThemeToggle({ labelled = false }) {
-  const theme = useSyncExternalStore(subscribe, snapshot, () => "auto");
-  const next = theme === "dark" ? "light" : theme === "light" ? "auto" : "dark";
-  const label = theme === "auto" ? "Auto" : theme === "light" ? "Light" : "Dark";
-  const name = `Theme: ${label}. Switch to ${next}.`;
-  const toggle = () => {
-    document.documentElement.setAttribute("data-theme-choice", next);
-    document.documentElement.setAttribute("data-theme", next === "auto" ? window.matchMedia?.("(prefers-color-scheme: light)").matches ? "light" : "dark" : next);
-    try {
-      localStorage.setItem(STORAGE_KEY, next);
-    } catch {
-    }
-    window.dispatchEvent(new Event(CHOICE_EVENT));
-  };
-  const button = /* @__PURE__ */ jsx36("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx36("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon6(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
-  return labelled ? /* @__PURE__ */ jsxs31("span", { className: "ui-theme-toggle", children: [
-    button,
-    /* @__PURE__ */ jsxs31("span", { children: [
-      label,
-      " theme"
-    ] })
-  ] }) : button;
-}
-
 // src/Success.tsx
 import { forwardRef as forwardRef9, useEffect as useEffect15, useRef as useRef19, useState as useState15 } from "react";
 import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";