@ubx/docs-ui 0.10.0 → 0.11.0

package/dist/Header.d.ts

@@ -8,13 +8,19 @@ export type SectionTab = {
     label: string;
     href: string;
 };
-export declare function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle, githubUrl, }: {
+export declare function Header({ nav, tabs, activeTab, sidebar, sidebarLabel, search, showThemeToggle, githubUrl, }: {
     nav: NavLink[];
     /** Omit entirely for a single-tier header, which is the provider site. */
     tabs?: SectionTab[];
     /** href of the active tab, matched by prefix so nested pages stay lit. */
     activeTab?: string;
-    mobileMenu?: React.ReactNode;
+    /**
+     * The section tree, when the page has one. Goes into the mobile
+     * drawer; the desktop rail is PageShell's, not the header's.
+     */
+    sidebar?: React.ReactNode;
+    /** Heading for the tree inside the drawer, in the site's own words. */
+    sidebarLabel?: string;
     /**
      * Search control, rendered to the left of the theme toggle.
      *

package/dist/Header.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { ThemeToggle } from "./ThemeToggle";
 import { MobileNav } from "./MobileNav";
-export function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle = true, githubUrl, }) {
-    return (_jsxs("header", { className: "border-b border-border bg-background", children: [_jsxs("div", { className: "relative mx-auto flex max-w-7xl items-center gap-3 px-6 py-4", children: [mobileMenu, _jsxs(Link, { href: "/", className: "flex shrink-0 items-center", children: [_jsx("img", { src: "/logo/logo.png", alt: "ubx", className: "logo-light h-6 w-auto" }), _jsx("img", { src: "/logo/logo-dark.png", alt: "ubx", className: "logo-dark h-6 w-auto" })] }), _jsx("div", { className: "flex-1" }), _jsx("nav", { className: "absolute left-1/2 hidden -translate-x-1/2 items-center gap-5 md:flex", children: nav.map((item) => {
+export function Header({ nav, tabs, activeTab, sidebar, sidebarLabel, search, showThemeToggle = true, githubUrl, }) {
+    return (_jsxs("header", { className: "border-b border-border bg-background", children: [_jsxs("div", { className: "relative mx-auto flex max-w-7xl items-center gap-3 px-6 py-4", children: [_jsx(Link, { href: "/", className: "flex shrink-0 items-center", children: _jsx("img", { src: "/logo/ubiquex.png", alt: "Ubiquex", className: "h-6 w-auto" }) }), _jsx("div", { className: "flex-1" }), _jsx("nav", { className: "absolute left-1/2 hidden -translate-x-1/2 items-center gap-5 md:flex", children: nav.map((item) => {
                             const className = item.current
                                 ? "text-sm text-primary"
                                 : "text-sm text-foreground-muted hover:text-primary";
                             return item.href.startsWith("/") ? (_jsx(Link, { href: item.href, className: className, children: item.label }, item.label)) : (_jsx("a", { href: item.href, className: className, children: item.label }, item.label));
-                        }) }), search ? _jsx("div", { className: "w-40 shrink-0 sm:w-56 lg:w-64", children: search }) : null, githubUrl ? (_jsxs("a", { href: githubUrl, className: "hidden shrink-0 items-center gap-2 rounded-full bg-primary px-4 py-[7px] text-sm text-primary-foreground transition-opacity hover:opacity-90 sm:flex", children: [_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" }) }), "Star us on GitHub"] })) : null, showThemeToggle ? _jsx(ThemeToggle, {}) : null, _jsx(MobileNav, { nav: nav, githubUrl: githubUrl })] }), tabs && tabs.length > 0 ? (_jsx("div", { className: "mx-auto max-w-7xl px-6", children: _jsx("nav", { className: "flex gap-6 overflow-x-auto", children: tabs.map((tab) => {
+                        }) }), search ? _jsx("div", { className: "w-40 shrink-0 sm:w-56 lg:w-64", children: search }) : null, githubUrl ? (_jsxs("a", { href: githubUrl, className: "hidden shrink-0 items-center gap-2 rounded-full bg-primary px-4 py-[7px] text-sm text-primary-foreground transition-opacity hover:opacity-90 sm:flex", children: [_jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" }) }), "Star us on GitHub"] })) : null, showThemeToggle ? (_jsx("div", { className: "hidden md:block", children: _jsx(ThemeToggle, {}) })) : null, _jsx(MobileNav, { nav: nav, githubUrl: githubUrl, sidebar: sidebar, sidebarLabel: sidebarLabel, showThemeToggle: showThemeToggle })] }), tabs && tabs.length > 0 ? (_jsx("div", { className: "mx-auto max-w-7xl px-6", children: _jsx("nav", { className: "flex gap-6 overflow-x-auto", children: tabs.map((tab) => {
                         // Prefix match, so /concepts/ledger keeps the Concepts tab
                         // lit rather than only the exact section index.
                         const active = activeTab === tab.href || activeTab?.startsWith(tab.href + "/");

package/dist/MobileNav.d.ts

@@ -1,5 +1,9 @@
 import type { NavLink } from "./Header";
-export declare function MobileNav({ nav, githubUrl }: {
+export declare function MobileNav({ nav, githubUrl, sidebar, sidebarLabel, showThemeToggle, }: {
     nav: NavLink[];
     githubUrl?: string;
+    /** The section tree, when the page has one. Rendered below the destinations. */
+    sidebar?: React.ReactNode;
+    sidebarLabel?: string;
+    showThemeToggle?: boolean;
 }): import("react").JSX.Element;

package/dist/MobileNav.js

@@ -1,19 +1,37 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from "next/link";
-import { useEffect, useState } from "react";
-// The header's destination nav is `hidden md:flex`, so below 768px it was
-// simply gone. Measured on all three sites: navDisplay "none", and the
-// only visible header link was the logo. There was no route to Install,
-// Documentation, Tutorials, Providers or Blog on a phone, anywhere.
+import { useEffect, useRef, useState } from "react";
+import { ThemeToggle } from "./ThemeToggle";
+// The one mobile navigation control on all three sites.
 //
-// Same two-state open/close as MobileSidebarToggle, and for the same
-// reason: closing flips `visible` immediately so the transition can play,
-// and the drawer only leaves the DOM once it has had time to finish.
+// It used to be two. The header's destination nav is `hidden md:flex`,
+// so below 768px it was gone, and this drawer was added to reach it.
+// But the docs sites ALSO rendered MobileSidebarToggle, a second burger
+// on the left opening a second drawer, for the section tree. A reader on
+// a phone met two hamburger buttons that looked identical, opened from
+// opposite edges, and each held half the navigation.
+//
+// So this component now holds both: destinations first, then the section
+// tree when the page has one. MobileSidebarToggle is gone rather than
+// kept alongside, because two implementations of one drawer is how the
+// two drifted in the first place.
+//
+// Opens DOWNWARD from below the header rather than in from an edge. A
+// side sheet reads as a separate surface that arrived over the page; a
+// panel dropping from the bar reads as the bar itself expanding, which
+// is what it is.
 const TRANSITION_MS = 200;
-export function MobileNav({ nav, githubUrl }) {
+export function MobileNav({ nav, githubUrl, sidebar, sidebarLabel, showThemeToggle = true, }) {
     const [mounted, setMounted] = useState(false);
     const [visible, setVisible] = useState(false);
+    // Where the header actually ends, measured rather than assumed. The
+    // header is one tier on the marketing site and two on the docs sites
+    // (destinations plus a section tab strip), and a hardcoded offset
+    // would drop the panel over the tab strip on exactly the sites that
+    // have one.
+    const [top, setTop] = useState(0);
+    const buttonRef = useRef(null);
     useEffect(() => {
         if (!mounted)
             return;
@@ -23,10 +41,23 @@ export function MobileNav({ nav, githubUrl }) {
             if (e.key === "Escape")
                 close();
         };
+        // Re-measure on resize: rotating a phone changes the header's
+        // height whenever anything in it wraps.
+        const onResize = () => {
+            const header = buttonRef.current?.closest("header");
+            if (header)
+                setTop(header.getBoundingClientRect().bottom);
+        };
         document.addEventListener("keydown", onKey);
-        return () => document.removeEventListener("keydown", onKey);
+        window.addEventListener("resize", onResize);
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            window.removeEventListener("resize", onResize);
+        };
     }, [mounted]);
     function open() {
+        const header = buttonRef.current?.closest("header");
+        setTop(header ? header.getBoundingClientRect().bottom : 0);
         setMounted(true);
         requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
     }
@@ -34,8 +65,9 @@ export function MobileNav({ nav, githubUrl }) {
         setVisible(false);
         setTimeout(() => setMounted(false), TRANSITION_MS);
     }
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: open, "aria-label": "Open navigation", "aria-expanded": mounted, className: "flex h-9 w-9 shrink-0 items-center justify-center rounded text-foreground-muted hover:bg-surface hover:text-primary md:hidden", children: _jsx("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) }), mounted && (_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", className: "fixed inset-0 z-50 md:hidden", children: [_jsx("button", { type: "button", "aria-label": "Close navigation", onClick: close, className: "absolute inset-0 bg-foreground/40 transition-opacity duration-200 motion-reduce:transition-none " +
-                            (visible ? "opacity-100" : "opacity-0") }), _jsxs("div", { className: "absolute inset-y-0 right-0 flex w-72 max-w-[85vw] flex-col gap-1 overflow-y-auto bg-background p-5 shadow-lg " +
-                            "transition-transform duration-200 ease-out motion-reduce:transition-none " +
-                            (visible ? "translate-x-0" : "translate-x-full"), children: [_jsx("button", { type: "button", onClick: close, "aria-label": "Close navigation", className: "mb-3 flex h-8 w-8 items-center justify-center self-end rounded text-foreground-muted hover:bg-surface hover:text-primary", children: _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) }), nav.map((item) => item.href.startsWith("/") ? (_jsx(Link, { href: item.href, onClick: close, className: item.current ? "py-2 text-primary" : "py-2 text-foreground-muted hover:text-primary", children: item.label }, item.label)) : (_jsx("a", { href: item.href, onClick: close, className: item.current ? "py-2 text-primary" : "py-2 text-foreground-muted hover:text-primary", children: item.label }, item.label))), githubUrl ? (_jsx("a", { href: githubUrl, className: "mt-3 rounded-full bg-primary px-4 py-2 text-center text-sm text-primary-foreground", children: "Star us on GitHub" })) : null] })] }))] }));
+    const linkClass = (current) => current ? "py-2 text-primary" : "py-2 text-foreground-muted hover:text-primary";
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: buttonRef, type: "button", onClick: mounted ? close : open, "aria-label": mounted ? "Close navigation" : "Open navigation", "aria-expanded": mounted, className: "flex h-9 w-9 shrink-0 items-center justify-center rounded text-foreground-muted hover:bg-surface hover:text-primary md:hidden", children: mounted ? (_jsx("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })) : (_jsx("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })) }), mounted && (_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "Navigation", className: "fixed inset-x-0 bottom-0 z-50 md:hidden", style: { top }, children: [_jsx("button", { type: "button", "aria-label": "Close navigation", onClick: close, className: "absolute inset-0 bg-foreground/40 transition-opacity duration-200 motion-reduce:transition-none " +
+                            (visible ? "opacity-100" : "opacity-0") }), _jsx("div", { className: "absolute inset-x-0 top-0 max-h-full overflow-hidden", children: _jsxs("div", { className: "flex max-h-[calc(100vh-8rem)] flex-col gap-1 overflow-y-auto border-b border-border bg-background px-6 pt-4 pb-6 shadow-lg " +
+                                "transition-transform duration-200 ease-out motion-reduce:transition-none " +
+                                (visible ? "translate-y-0" : "-translate-y-full"), children: [nav.map((item) => item.href.startsWith("/") ? (_jsx(Link, { href: item.href, onClick: close, className: linkClass(item.current), children: item.label }, item.label)) : (_jsx("a", { href: item.href, onClick: close, className: linkClass(item.current), children: item.label }, item.label))), sidebar ? (_jsxs("div", { className: "mt-4 border-t border-border pt-4", children: [sidebarLabel ? (_jsx("div", { className: "mb-2 text-xs tracking-wide text-foreground-muted uppercase", children: sidebarLabel })) : null, _jsx("div", { onClick: close, children: sidebar })] })) : null, githubUrl ? (_jsx("a", { href: githubUrl, className: "mt-4 rounded-full bg-primary px-4 py-2 text-center text-sm text-primary-foreground", children: "Star us on GitHub" })) : null, showThemeToggle ? (_jsxs("div", { className: "mt-4 flex items-center justify-between border-t border-border pt-4", children: [_jsx("span", { className: "text-sm text-foreground-muted", children: "Theme" }), _jsx(ThemeToggle, {})] })) : null] }) })] }))] }));
 }

package/dist/PageShell.d.ts

@@ -78,16 +78,23 @@ export type PageShellProps = {
 };
 export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, searchPlacement, intro, showThemeToggle, githubUrl, fullBleed, footer, children, }: PageShellProps): React.JSX.Element;
 /**
- * Sets data-theme from localStorage before paint.
+ * Sets data-theme before paint.
  *
  * Both sites carried this as a verbatim string constant in their own root
  * layout, which is duplication the package could not see. It has to be an
  * exported string rather than a component because it goes in <head> via
  * dangerouslySetInnerHTML and must run ahead of hydration: a React
  * component would run too late and the reader would see a flash of the
- * OS default before their stored choice applied.
+ * default before their stored choice applied.
  *
- * Absent or invalid storage leaves no attribute at all, which is exactly
- * "follow the OS".
+ * DARK IS THE DEFAULT, and absent storage now means dark rather than
+ * "follow the OS". The three sites are one product, and which one a
+ * reader saw first decided whether it was a dark product or a light one.
+ *
+ * "system" is still a real, selectable state; it is now an explicit
+ * stored choice rather than the absence of one. That distinction is why
+ * the key is written on every choice below rather than removed for
+ * system: with dark as the default, removing the key would mean dark,
+ * not system, and the option would silently do nothing.
  */
-export declare const THEME_INIT_SCRIPT = "(function () {\n  try {\n    var stored = window.localStorage.getItem(\"ubx-docs-theme\");\n    if (stored === \"light\" || stored === \"dark\") {\n      document.documentElement.setAttribute(\"data-theme\", stored);\n    }\n  } catch (e) {}\n})();";
+export declare const THEME_INIT_SCRIPT = "(function () {\n  var stored = null;\n  try {\n    stored = window.localStorage.getItem(\"ubx-docs-theme\");\n  } catch (e) {}\n  if (stored === \"light\" || stored === \"dark\") {\n    document.documentElement.setAttribute(\"data-theme\", stored);\n  } else if (stored !== \"system\") {\n    document.documentElement.setAttribute(\"data-theme\", \"dark\");\n  }\n})();";

package/dist/PageShell.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Header } from "./Header";
 import { Footer } from "./Footer";
 import { GlobalSearch } from "./GlobalSearch";
-import { MobileSidebarToggle } from "./MobileSidebarToggle";
 /** Compact, for sitting beside the theme toggle. */
 const HEADER_SEARCH_CLASS = "w-full rounded-full bg-field px-4 py-1.5 text-sm text-foreground outline-none " +
     "placeholder:text-foreground-muted focus:ring-2 focus:ring-primary/30";
@@ -12,29 +11,39 @@ const HERO_SEARCH_CLASS = "w-full rounded-full bg-field px-5 py-3 text-base text
 export function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel = "Navigation", searchPlaceholder, searchPlacement = "header", intro, showThemeToggle = true, githubUrl, fullBleed = false, footer, children, }) {
     const headerSearch = searchPlaceholder && searchPlacement === "header" ? (_jsx(GlobalSearch, { placeholder: searchPlaceholder, inputClassName: HEADER_SEARCH_CLASS })) : undefined;
     const heroSearch = searchPlaceholder && searchPlacement === "hero" ? (_jsx("div", { className: "mx-auto mt-8 max-w-xl", children: _jsx(GlobalSearch, { placeholder: searchPlaceholder, inputClassName: HERO_SEARCH_CLASS }) })) : null;
-    return (_jsxs(_Fragment, { children: [_jsx(Header, { nav: nav, tabs: tabs, activeTab: activeTab, search: headerSearch, showThemeToggle: showThemeToggle, githubUrl: githubUrl, mobileMenu: sidebar ? (_jsx(MobileSidebarToggle, { label: sidebarLabel, children: sidebar })) : undefined }), sidebar ? (
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { nav: nav, tabs: tabs, activeTab: activeTab, search: headerSearch, showThemeToggle: showThemeToggle, githubUrl: githubUrl, sidebar: sidebar, sidebarLabel: sidebarLabel }), sidebar ? (
             // No intro or hero search here on purpose: a page with a sidebar
             // is a content page, and a hero belongs to a landing page.
             _jsxs("div", { className: "mx-auto flex w-full max-w-7xl flex-1 gap-10 px-6 py-10", children: [_jsx("aside", { className: "hidden w-64 shrink-0 lg:block", children: sidebar }), _jsx("main", { className: "min-w-0 flex-1", children: children })] })) : fullBleed ? (_jsxs("main", { className: "flex-1", children: [intro, heroSearch, children] })) : (_jsxs("main", { className: "mx-auto w-full max-w-7xl flex-1 px-6 py-12", children: [intro, heroSearch, children] })), _jsx(Footer, { tagline: footer.tagline, links: footer.links })] }));
 }
 /**
- * Sets data-theme from localStorage before paint.
+ * Sets data-theme before paint.
  *
  * Both sites carried this as a verbatim string constant in their own root
  * layout, which is duplication the package could not see. It has to be an
  * exported string rather than a component because it goes in <head> via
  * dangerouslySetInnerHTML and must run ahead of hydration: a React
  * component would run too late and the reader would see a flash of the
- * OS default before their stored choice applied.
+ * default before their stored choice applied.
  *
- * Absent or invalid storage leaves no attribute at all, which is exactly
- * "follow the OS".
+ * DARK IS THE DEFAULT, and absent storage now means dark rather than
+ * "follow the OS". The three sites are one product, and which one a
+ * reader saw first decided whether it was a dark product or a light one.
+ *
+ * "system" is still a real, selectable state; it is now an explicit
+ * stored choice rather than the absence of one. That distinction is why
+ * the key is written on every choice below rather than removed for
+ * system: with dark as the default, removing the key would mean dark,
+ * not system, and the option would silently do nothing.
  */
 export const THEME_INIT_SCRIPT = `(function () {
+  var stored = null;
   try {
-    var stored = window.localStorage.getItem("ubx-docs-theme");
-    if (stored === "light" || stored === "dark") {
-      document.documentElement.setAttribute("data-theme", stored);
-    }
+    stored = window.localStorage.getItem("ubx-docs-theme");
   } catch (e) {}
+  if (stored === "light" || stored === "dark") {
+    document.documentElement.setAttribute("data-theme", stored);
+  } else if (stored !== "system") {
+    document.documentElement.setAttribute("data-theme", "dark");
+  }
 })();`;

package/dist/ThemeToggle.js

@@ -29,6 +29,7 @@ function subscribe(callback) {
         window.removeEventListener("ubx-theme-change", callback);
     };
 }
+const DEFAULT = "dark";
 function getSnapshot() {
     // Same real risk app/layout.tsx's own inline THEME_INIT_SCRIPT
     // already guards against for the identical read -- private
@@ -41,14 +42,18 @@ function getSnapshot() {
     // control.
     try {
         const stored = window.localStorage.getItem(STORAGE_KEY);
-        return stored === "light" || stored === "dark" ? stored : "system";
+        return stored === "light" || stored === "dark" || stored === "system" ? stored : DEFAULT;
     }
     catch {
-        return "system";
+        return DEFAULT;
     }
 }
 function getServerSnapshot() {
-    return "system";
+    // The server has no localStorage, and this is also the correct first
+    // client answer: THEME_INIT_SCRIPT has already put the real
+    // data-theme on the document by the time this renders, so only this
+    // control's own highlight can lag, never the page.
+    return DEFAULT;
 }
 function SystemIcon() {
     return (_jsxs("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "1.5", y: "2.5", width: "13", height: "8.5", rx: "1", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("path", { d: "M5.5 14h5M8 11v3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })] }));
@@ -68,15 +73,16 @@ const OPTIONS = [
 // always visible -- replaces the earlier single cycling button (whose
 // current state was legible only from its text label, distinct icons
 // were the whole point of this pass).
+//
+// Rendered in the desktop header and, below md, inside the mobile
+// drawer instead. Three icons plus a logo, a burger and a call to
+// action did not fit a phone-width bar.
 export function ThemeToggle() {
     const choice = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     function choose(next) {
         applyTheme(next);
         try {
-            if (next === "system")
-                window.localStorage.removeItem(STORAGE_KEY);
-            else
-                window.localStorage.setItem(STORAGE_KEY, next);
+            window.localStorage.setItem(STORAGE_KEY, next);
         }
         catch {
             // Storage blocked -- the choice still applies to this page via

package/dist/index.d.ts

@@ -7,7 +7,6 @@ export { GlobalSearch } from "./GlobalSearch";
 export type { SearchEntry } from "./GlobalSearch";
 export { ThemeToggle } from "./ThemeToggle";
 export { Footer } from "./Footer";
-export { MobileSidebarToggle } from "./MobileSidebarToggle";
 export { PageShell, THEME_INIT_SCRIPT } from "./PageShell";
 export type { PageShellProps } from "./PageShell";
 export { MobileNav } from "./MobileNav";

package/dist/index.js

@@ -3,7 +3,6 @@
 //
 // Extracted only after both consumers existed, deliberately. Three of
 // these interfaces had to change to be shareable at all, and one of
-// those was NOT predicted: MobileSidebarToggle imported ProviderSidebar
 // directly, which was found when the second site failed to build.
 // Extracting against a single call site would have carried that coupling
 // into this package unnoticed.
@@ -13,6 +12,5 @@ export { Header } from "./Header";
 export { GlobalSearch } from "./GlobalSearch";
 export { ThemeToggle } from "./ThemeToggle";
 export { Footer } from "./Footer";
-export { MobileSidebarToggle } from "./MobileSidebarToggle";
 export { PageShell, THEME_INIT_SCRIPT } from "./PageShell";
 export { MobileNav } from "./MobileNav";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ubx/docs-ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Shared UI for ubx documentation sites: the page shell, theme A, Shiki-backed CodeBlock, header, search, theme toggle.",
   "license": "Apache-2.0",
   "type": "module",

package/dist/MobileSidebarToggle.d.ts

@@ -1,8 +0,0 @@
-export declare function MobileSidebarToggle({ children, label, }: {
-    children: React.ReactNode;
-    /**
-     * What this drawer contains, in the consuming site's own vocabulary.
-     * Used as the drawer heading and as the basis for both aria-labels.
-     */
-    label: string;
-}): import("react").JSX.Element;

package/dist/MobileSidebarToggle.js

@@ -1,90 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { usePathname } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-// Opens from the header, since the desktop sidebar (ProviderSidebar's
-// own "hidden lg:block" rail) contributes nothing below that
-// breakpoint -- without this, a reader on mobile has no way to reach
-// a provider's service groups or resources at all once past the
-// provider home page. Renders the identical ProviderSidebar (same
-// fetch, same filter, same tree) inside a drawer rather than a
-// second, parallel mobile nav that could drift from the real one.
-//
-// Two-state open/close (mounted + visible, not a single boolean) so
-// the close transition has time to actually play: closing flips
-// `visible` off immediately (the CSS transition animates toward the
-// closed position) and only removes the drawer from the DOM once that
-// transition has had time to finish, rather than the element
-// vanishing the instant the tap registers.
-const TRANSITION_MS = 200;
-// UBI-247: takes the drawer contents as `children` rather than
-// constructing a ProviderSidebar itself. The provider site passes
-// <ProviderSidebar .../>, this site passes <DocSidebar .../>, and the
-// open/close/transition/route-change behaviour below is identical for
-// both.
-//
-// This comment used to claim that the `children` coupling "was the one
-// thing in this component that was not generic." That was wrong, and it
-// is left recorded here rather than quietly deleted because the way it
-// was wrong is the useful part. Three strings a few lines below still
-// said "Services" and "service navigation", which is AWS provider
-// vocabulary: the provider site's mobile drawer holds a provider's
-// service groups. The user docs site's drawer holds documentation
-// pages, so it announced the wrong thing to every mobile reader and to
-// every screen reader.
-//
-// It survived because the extraction was audited per component by
-// reading each one, and reading is exactly what does not catch a
-// plausible-sounding noun. It was found later by mechanically
-// extracting every user-visible string literal in the package and
-// asking of each one whether it could be true on both sites. `label` is
-// required for the same reason Footer's props are: a default here is a
-// silent claim about which site you are.
-export function MobileSidebarToggle({ children, label, }) {
-    const [mounted, setMounted] = useState(false);
-    const [visible, setVisible] = useState(false);
-    const closeTimer = useRef(null);
-    const pathname = usePathname();
-    const isFirstPathname = useRef(true);
-    function clearCloseTimer() {
-        if (closeTimer.current) {
-            clearTimeout(closeTimer.current);
-            closeTimer.current = null;
-        }
-    }
-    function open() {
-        clearCloseTimer();
-        setMounted(true);
-        // Mounts in the closed visual position first -- flipping to
-        // `visible` one frame later gives the browser an actual "from"
-        // state to transition out of, rather than painting already open.
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => setVisible(true));
-        });
-    }
-    function close() {
-        setVisible(false);
-        clearCloseTimer();
-        closeTimer.current = setTimeout(() => setMounted(false), TRANSITION_MS);
-    }
-    useEffect(() => clearCloseTimer, []);
-    // Explicit close-on-navigation rather than relying on this
-    // component happening to remount between routes -- Header sits
-    // directly in each page.tsx, not behind a shared layout boundary
-    // between different resource pages, so whether React actually tears
-    // this instance down on every navigation isn't guaranteed. Skips
-    // the very first render (mount already starts closed) so this only
-    // ever fires on a real route change.
-    useEffect(() => {
-        if (isFirstPathname.current) {
-            isFirstPathname.current = false;
-            return;
-        }
-        close();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pathname]);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: open, "aria-label": `Open ${label} navigation`, className: "flex h-9 w-9 shrink-0 items-center justify-center rounded text-foreground-muted hover:bg-surface hover:text-primary lg:hidden", children: _jsx("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) }), mounted && (_jsxs("div", { role: "dialog", "aria-modal": "true", className: "fixed inset-0 z-50 lg:hidden", children: [_jsx("button", { type: "button", "aria-label": `Close ${label} navigation`, onClick: close, className: "absolute inset-0 bg-foreground/40 transition-opacity duration-200 motion-reduce:transition-none " +
-                            (visible ? "opacity-100" : "opacity-0") }), _jsxs("div", { className: "absolute inset-y-0 left-0 flex w-80 max-w-[85vw] flex-col overflow-y-auto bg-background p-4 shadow-lg " +
-                            "transition-transform duration-200 ease-out motion-reduce:transition-none " +
-                            (visible ? "translate-x-0" : "-translate-x-full"), children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: label }), _jsx("button", { type: "button", onClick: close, "aria-label": `Close ${label} navigation`, className: "flex h-8 w-8 items-center justify-center rounded text-foreground-muted hover:bg-surface hover:text-primary", children: _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) })] }), children] })] }))] }));
-}