@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/blocks/site-footer/site-footer.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
-import { type ProductMarkProps } from '../../components/ui/product-mark';
+import { type ProductMarkProps } from '../../components/ui/product-mark.js';
+import { type HeadingLevel } from '../../components/ui/section.js';
 /**
  * One destination in a footer column.
  *
@@ -90,6 +91,17 @@ export type SiteFooterProps = {
      * Block that held a year would be a Block that went stale.
      */
     legal?: ReactNode;
+    /**
+     * Heading level for the footer's column headings. @defaultValue 'h2'
+     *
+     * A prop for the reason every Block's is: the surrounding document decides where
+     * this lands in the outline, not the Block. Four of the five NaniSoft sites put
+     * the footer at the root of their layout, where a column heading at level two is
+     * the top of that part of the document; the fifth composes the same Block as the
+     * last region of a settings page, where the same fixed level made every column a
+     * sibling of the heading that section already had.
+     */
+    headingLevel?: HeadingLevel;
     /**
      * Layout only, exactly as on every Component. Changing a Prism-owned visual
      * property from here is prohibited.
@@ -120,6 +132,11 @@ export type SiteFooterProps = {
  * title. A reader who navigates by landmark can therefore reach "Documentation"
  * rather than arriving at one anonymous list of links.
  *
+ * The level of those headings is the caller's rather than fixed, for the reason
+ * every Block's is. This footer is composed by four products at the root of their
+ * layouts and by one inside a page, and a fixed level answers only the first of
+ * those.
+ *
  * The social links open in a new browsing context by default, because a link that
  * leaves the site and comes back is a reader who has lost the page they were on.
  * That default is a decision this Block makes, and `newTab={false}` on one link
@@ -130,6 +147,6 @@ export type SiteFooterProps = {
  * imports no router: a consumer renders it from a server file and the links are
  * plain anchors the consumer's own router can intercept.
  */
-export declare function SiteFooter({ product, columns, social, legal, className, }: SiteFooterProps): import("react").JSX.Element;
+export declare function SiteFooter({ product, columns, social, legal, headingLevel, className, }: SiteFooterProps): import("react").JSX.Element;
 export default SiteFooter;
 //# sourceMappingURL=site-footer.d.ts.map

package/dist/blocks/site-footer/site-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-footer.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-footer/site-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAGrF;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;CACjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,eAAe,+BA8DjB;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"site-footer.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-footer/site-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AACrF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAG/D;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;CACjC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;OAKG;IACH,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,EACL,YAAmB,EACnB,SAAS,GACV,EAAE,eAAe,+BA+DjB;AAED,eAAe,UAAU,CAAA"}

package/dist/blocks/site-footer/site-footer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ProductMark } from '../../components/ui/product-mark';
-import { cn } from '../../lib/utils';
+import { ProductMark } from '../../components/ui/product-mark.js';
+import { cn } from '../../lib/utils.js';
 /**
  * The footer of a product site: a brand lockup, grouped destinations, the links
  * that leave the site, and an optional slot for the legal line.
@@ -25,6 +25,11 @@ import { cn } from '../../lib/utils';
  * title. A reader who navigates by landmark can therefore reach "Documentation"
  * rather than arriving at one anonymous list of links.
  *
+ * The level of those headings is the caller's rather than fixed, for the reason
+ * every Block's is. This footer is composed by four products at the root of their
+ * layouts and by one inside a page, and a fixed level answers only the first of
+ * those.
+ *
  * The social links open in a new browsing context by default, because a link that
  * leaves the site and comes back is a reader who has lost the page they were on.
  * That default is a decision this Block makes, and `newTab={false}` on one link
@@ -35,7 +40,8 @@ import { cn } from '../../lib/utils';
  * imports no router: a consumer renders it from a server file and the links are
  * plain anchors the consumer's own router can intercept.
  */
-export function SiteFooter({ product, columns, social, legal, className, }) {
-    return (_jsx("footer", { "data-slot": "site-footer", className: cn('border-border bg-background w-full border-t', className), children: _jsxs("div", { className: "mx-auto flex w-full max-w-6xl flex-col gap-10 px-6 py-12 lg:px-8", children: [_jsxs("div", { className: "flex flex-col gap-10 md:flex-row md:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "lg" }), social && social.length > 0 ? (_jsx("ul", { className: "flex flex-wrap items-center gap-4", children: social.map((link) => (_jsx("li", { children: _jsxs("a", { href: link.href, rel: link.newTab === false ? undefined : 'noopener noreferrer', target: link.newTab === false ? undefined : '_blank', className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-2 rounded-sm text-sm font-medium transition-colors duration-fast ease-out", children: [link.icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex items-center", children: link.icon })) : null, link.label] }) }, link.href))) })) : null] }), columns && columns.length > 0 ? (_jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-sm font-semibold", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, rel: link.newTab ? 'noopener noreferrer' : undefined, target: link.newTab ? '_blank' : undefined, className: "text-muted-foreground hover:text-foreground rounded-sm text-sm transition-colors duration-fast ease-out", children: link.label }) }, link.href))) })] }, column.title))) })) : null] }), legal ? _jsx("div", { className: "text-muted-foreground text-sm", children: legal }) : null] }) }));
+export function SiteFooter({ product, columns, social, legal, headingLevel = 'h2', className, }) {
+    const ColumnTitle = headingLevel;
+    return (_jsx("footer", { "data-slot": "site-footer", className: cn('border-border bg-background w-full border-t', className), children: _jsxs("div", { className: "mx-auto flex w-full max-w-page flex-col gap-10 px-6 py-12 lg:px-8", children: [_jsxs("div", { className: "flex flex-col gap-10 md:flex-row md:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "lg" }), social && social.length > 0 ? (_jsx("ul", { className: "flex flex-wrap items-center gap-4", children: social.map((link) => (_jsx("li", { children: _jsxs("a", { href: link.href, rel: link.newTab === false ? undefined : 'noopener noreferrer', target: link.newTab === false ? undefined : '_blank', className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-2 rounded-sm text-sm font-medium transition-colors duration-fast ease-out", children: [link.icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex items-center", children: link.icon })) : null, link.label] }) }, link.href))) })) : null] }), columns && columns.length > 0 ? (_jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: columns.map((column) => (_jsxs("nav", { "aria-label": column.title, className: "flex flex-col gap-3", children: [_jsx(ColumnTitle, { className: "text-sm font-semibold", children: column.title }), _jsx("ul", { className: "flex flex-col gap-2", children: column.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, rel: link.newTab ? 'noopener noreferrer' : undefined, target: link.newTab ? '_blank' : undefined, className: "text-muted-foreground hover:text-foreground rounded-sm text-sm transition-colors duration-fast ease-out", children: link.label }) }, link.href))) })] }, column.title))) })) : null] }), legal ? _jsx("div", { className: "text-muted-foreground text-sm", children: legal }) : null] }) }));
 }
 export default SiteFooter;

package/dist/blocks/site-header/index.d.ts

@@ -1,3 +1,3 @@
-export { SiteHeader, default } from './site-header';
-export type { SiteHeaderProps, SiteHeaderLink } from './site-header';
+export { SiteHeader, default } from './site-header.js';
+export type { SiteHeaderProps, SiteHeaderLink } from './site-header.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/site-header/index.js

@@ -1 +1 @@
-export { SiteHeader, default } from './site-header';
+export { SiteHeader, default } from './site-header.js';

package/dist/blocks/site-header/site-header.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import { type SwitcherProduct } from '../../components/ui/product-switcher';
-import { type ProductMarkProps } from '../../components/ui/product-mark';
+import { type SwitcherProduct } from '../../components/ui/product-switcher.js';
+import { type ProductMarkProps } from '../../components/ui/product-mark.js';
 /**
  * One destination in the header's own navigation.
  *

package/dist/blocks/site-header/site-header.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ProductSwitcher, } from '../../components/ui/product-switcher';
-import { ProductMark } from '../../components/ui/product-mark';
-import { cn } from '../../lib/utils';
+import { ProductSwitcher, } from '../../components/ui/product-switcher.js';
+import { ProductMark } from '../../components/ui/product-mark.js';
+import { cn } from '../../lib/utils.js';
 /**
  * The header of a product site: a brand lockup, an optional product switcher, the
  * site's own navigation and an optional slot for application controls.
@@ -41,6 +41,6 @@ import { cn } from '../../lib/utils';
  * mechanism the whole system uses.
  */
 export function SiteHeader({ product, products, nav, navLabel, productsLabel, actions, sticky = false, className, }) {
-    return (_jsx("header", { "data-slot": "site-header", className: cn('border-border bg-background w-full border-b', sticky && 'sticky top-0 z-30', className), children: _jsxs("div", { className: "mx-auto flex w-full max-w-6xl flex-wrap items-center gap-x-6 gap-y-3 px-6 py-3 lg:px-8", children: [_jsx("a", { href: "/", className: "flex shrink-0 items-center rounded-sm", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "md" }) }), products && products.length > 0 ? (_jsx(ProductSwitcher, { products: products, currentId: product.id, size: "sm", label: productsLabel ?? navLabel })) : null, nav && nav.length > 0 ? (_jsx("nav", { "aria-label": navLabel, className: "flex flex-wrap items-center gap-x-5 gap-y-2", children: nav.map((link) => (_jsx("a", { href: link.href, "aria-current": link.current ? 'page' : undefined, rel: link.newTab ? 'noopener noreferrer' : undefined, target: link.newTab ? '_blank' : undefined, className: "text-muted-foreground hover:text-foreground rounded-sm text-sm font-medium transition-colors duration-fast ease-out", children: link.label }, link.href))) })) : null, actions ? (_jsx("div", { className: "ms-auto flex items-center gap-3", children: actions })) : null] }) }));
+    return (_jsx("header", { "data-slot": "site-header", className: cn('border-border bg-background w-full border-b', sticky && 'sticky top-0 z-30', className), children: _jsxs("div", { className: "mx-auto flex w-full max-w-page flex-wrap items-center gap-x-6 gap-y-3 px-6 py-3 lg:px-8", children: [_jsx("a", { href: "/", className: "flex shrink-0 items-center rounded-sm", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "md" }) }), products && products.length > 0 ? (_jsx(ProductSwitcher, { products: products, currentId: product.id, size: "sm", label: productsLabel ?? navLabel })) : null, nav && nav.length > 0 ? (_jsx("nav", { "aria-label": navLabel, className: "flex flex-wrap items-center gap-x-5 gap-y-2", children: nav.map((link) => (_jsx("a", { href: link.href, "aria-current": link.current ? 'page' : undefined, rel: link.newTab ? 'noopener noreferrer' : undefined, target: link.newTab ? '_blank' : undefined, className: "text-muted-foreground hover:text-foreground rounded-sm text-sm font-medium transition-colors duration-fast ease-out", children: link.label }, link.href))) })) : null, actions ? (_jsx("div", { className: "ms-auto flex items-center gap-3", children: actions })) : null] }) }));
 }
 export default SiteHeader;

package/dist/blocks/site-navbar/index.d.ts

@@ -0,0 +1,3 @@
+export { SiteNavbar, default } from './site-navbar.js';
+export type { SiteNavbarProps, SiteNavLink, SiteNavSearch, SiteNavTheme, SiteNavMode, SiteNavMobileLabels, } from './site-navbar.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/site-navbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACnD,YAAY,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,YAAY,EACZ,WAAW,EACX,mBAAmB,GACpB,MAAM,eAAe,CAAA"}

package/dist/blocks/site-navbar/index.js

@@ -0,0 +1 @@
+export { SiteNavbar, default } from './site-navbar.js';

package/dist/blocks/site-navbar/mobile-nav.d.ts

@@ -0,0 +1,48 @@
+import type { ProductMarkProps } from '../../components/ui/product-mark.js';
+/** One destination in the mobile panel, which is the site's own navigation. */
+export type MobileNavLink = {
+    /** The text of the link. */
+    label: string;
+    /** Where the link goes. */
+    href: string;
+    /** Marks this link as the page the reader is on. */
+    current?: boolean;
+};
+/** The props the mobile navigation takes. */
+export type MobileNavProps = {
+    /** The product this navigation belongs to, drawn as the mark above the list. */
+    product: Pick<ProductMarkProps, 'id' | 'name' | 'pack'>;
+    /** Every destination, in the order a reader should meet them. */
+    links: readonly MobileNavLink[];
+    /** The accessible name of the panel, which is also the trigger's name. */
+    label: string;
+    /** The word on the trigger while the panel is closed. */
+    openLabel: string;
+    /** The word on the trigger while the panel is open. */
+    closeLabel: string;
+};
+/**
+ * The navigation for viewports below the row's own threshold.
+ *
+ * **It carries every destination, not a subset.** From the narrowest phone up to
+ * the width the horizontal row is authored for, this panel is the only way to reach
+ * a section of the site, so a link the row shows at `lg` and the panel omits at
+ * 640 is a route a reader on a small laptop cannot find at all. Both render the one
+ * array, so a destination added to one is in the other by construction rather than
+ * by remembering twice.
+ *
+ * **It is a Sheet rather than a disclosure panel of the navbar's own, and the
+ * difference is the overlay.** A panel that is a child of the bar sits over the
+ * page with the bar still visible and nothing above the rest of the document, so
+ * scrolling the page behind it moves content the reader thought was dismissed. A
+ * sheet owns a modal surface: the rest of the page is not reachable, Escape closes
+ * it, and focus is held inside it and handed back to the trigger on the way out.
+ * That is the behaviour a full-width menu over a long page needs, and it is the
+ * behaviour Prism's own navigation had to hand-write.
+ *
+ * The links are full width with a 44 pixel minimum height, because below the row's
+ * threshold this is a touch target and not a line of text, and the coarse-pointer
+ * floor in the design system asks for exactly that.
+ */
+export declare function MobileNav({ product, links, label, openLabel, closeLabel, }: MobileNavProps): import("react").JSX.Element;
+//# sourceMappingURL=mobile-nav.d.ts.map

package/dist/blocks/site-navbar/mobile-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-nav.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/mobile-nav.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAExE,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,6CAA6C;AAC7C,MAAM,MAAM,cAAc,GAAG;IAC3B,gFAAgF;IAChF,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAA;IACvD,iEAAiE;IACjE,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;IAC/B,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAA;IACjB,uDAAuD;IACvD,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE,cAAc,+BAsChB"}

package/dist/blocks/site-navbar/mobile-nav.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Menu, X } from 'lucide-react';
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '../../components/ui/sheet.js';
+import { ProductMark } from '../../components/ui/product-mark.js';
+/**
+ * The navigation for viewports below the row's own threshold.
+ *
+ * **It carries every destination, not a subset.** From the narrowest phone up to
+ * the width the horizontal row is authored for, this panel is the only way to reach
+ * a section of the site, so a link the row shows at `lg` and the panel omits at
+ * 640 is a route a reader on a small laptop cannot find at all. Both render the one
+ * array, so a destination added to one is in the other by construction rather than
+ * by remembering twice.
+ *
+ * **It is a Sheet rather than a disclosure panel of the navbar's own, and the
+ * difference is the overlay.** A panel that is a child of the bar sits over the
+ * page with the bar still visible and nothing above the rest of the document, so
+ * scrolling the page behind it moves content the reader thought was dismissed. A
+ * sheet owns a modal surface: the rest of the page is not reachable, Escape closes
+ * it, and focus is held inside it and handed back to the trigger on the way out.
+ * That is the behaviour a full-width menu over a long page needs, and it is the
+ * behaviour Prism's own navigation had to hand-write.
+ *
+ * The links are full width with a 44 pixel minimum height, because below the row's
+ * threshold this is a touch target and not a line of text, and the coarse-pointer
+ * floor in the design system asks for exactly that.
+ */
+export function MobileNav({ product, links, label, openLabel, closeLabel, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsx(SheetTrigger, { "data-slot": "site-navbar-mobile-trigger", "aria-label": open ? closeLabel : openLabel, className: "border-border bg-card text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex size-11 shrink-0 items-center justify-center rounded-full border transition-colors focus-visible:ring-[3px] focus-visible:outline-none lg:hidden", children: open ? _jsx(X, { "aria-hidden": true, className: "size-5" }) : _jsx(Menu, { "aria-hidden": true, className: "size-5" }) }), _jsxs(SheetContent, { side: "right", className: "w-80", children: [_jsx(SheetTitle, { className: "sr-only", children: label }), _jsxs("nav", { "aria-label": label, className: "flex flex-col gap-1", children: [_jsx("div", { className: "mb-4 flex items-center", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: "md" }) }), links.map((link) => (_jsx("a", { href: link.href, "aria-current": link.current ? 'page' : undefined, onClick: () => setOpen(false), className: link.current
+                                    ? 'bg-accent text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex min-h-11 items-center rounded-lg px-3 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none'
+                                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex min-h-11 items-center rounded-lg px-3 text-sm font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none', children: link.label }, link.href)))] })] })] }));
+}

package/dist/blocks/site-navbar/mode-toggle.d.ts

@@ -0,0 +1,39 @@
+/** The props the mode toggle takes. */
+export type ModeToggleProps = {
+    /** The accessible name of the control while the page is in light mode. */
+    lightLabel: string;
+    /** The accessible name of the control while the page is in dark mode. */
+    darkLabel: string;
+};
+/**
+ * The light and dark control.
+ *
+ * One button rather than a menu, because the choice has two members and a menu is
+ * the shape a set of six belongs in. The icon states the mode the page is in and
+ * the name states the mode the button will move it to, which is the pairing that
+ * makes the control readable at a glance and unambiguous to a screen reader: a
+ * button labelled "dark mode" that is currently showing a sun is a control whose
+ * label and its state have to be reconciled before it can be used.
+ *
+ * **It reads the mode from the provider rather than from the document.** The class
+ * on `<html>` is the mode, so this could read `document.documentElement.classList`
+ * and would then hold a value the theme itself owns in two places. The provider is
+ * the single writer of that class, and a control that wrote it directly would be a
+ * second writer of a state every other part of the page reads.
+ *
+ * `aria-pressed` is on the control, and it is worth stating why a toggle rather than
+ * a pair of buttons: the button's accessible name changes with the mode, and a
+ * changing name on a pressed control is the combination that leaves a screen reader
+ * announcing "dark mode, pressed" for a page that is in light mode. The name
+ * describes the destination and the pressed state describes the current mode, so the
+ * two never contradict each other because neither claims to be the other.
+ *
+ * **The two labels are keyed to the mode they are shown in, not to the mode they
+ * name.** `lightLabel` is what the control is called while the page is in light
+ * mode, which is the word that sends a reader to dark mode. Reading them the other
+ * way round is the mistake this control shipped with and the test that found it:
+ * a page in light mode announced "Switch to light mode", which is a control that
+ * claims to do the thing the page is already doing.
+ */
+export declare function ModeToggle({ lightLabel, darkLabel }: ModeToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=mode-toggle.d.ts.map

package/dist/blocks/site-navbar/mode-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-toggle.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/mode-toggle.tsx"],"names":[],"mappings":"AAMA,uCAAuC;AACvC,MAAM,MAAM,eAAe,GAAG;IAC5B,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,eAAe,+BAgBpE"}

package/dist/blocks/site-navbar/mode-toggle.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Moon, Sun } from 'lucide-react';
+import { usePrismTheme } from '../../provider/provider.js';
+/**
+ * The light and dark control.
+ *
+ * One button rather than a menu, because the choice has two members and a menu is
+ * the shape a set of six belongs in. The icon states the mode the page is in and
+ * the name states the mode the button will move it to, which is the pairing that
+ * makes the control readable at a glance and unambiguous to a screen reader: a
+ * button labelled "dark mode" that is currently showing a sun is a control whose
+ * label and its state have to be reconciled before it can be used.
+ *
+ * **It reads the mode from the provider rather than from the document.** The class
+ * on `<html>` is the mode, so this could read `document.documentElement.classList`
+ * and would then hold a value the theme itself owns in two places. The provider is
+ * the single writer of that class, and a control that wrote it directly would be a
+ * second writer of a state every other part of the page reads.
+ *
+ * `aria-pressed` is on the control, and it is worth stating why a toggle rather than
+ * a pair of buttons: the button's accessible name changes with the mode, and a
+ * changing name on a pressed control is the combination that leaves a screen reader
+ * announcing "dark mode, pressed" for a page that is in light mode. The name
+ * describes the destination and the pressed state describes the current mode, so the
+ * two never contradict each other because neither claims to be the other.
+ *
+ * **The two labels are keyed to the mode they are shown in, not to the mode they
+ * name.** `lightLabel` is what the control is called while the page is in light
+ * mode, which is the word that sends a reader to dark mode. Reading them the other
+ * way round is the mistake this control shipped with and the test that found it:
+ * a page in light mode announced "Switch to light mode", which is a control that
+ * claims to do the thing the page is already doing.
+ */
+export function ModeToggle({ lightLabel, darkLabel }) {
+    const { mode, toggleMode } = usePrismTheme();
+    const dark = mode === 'dark';
+    return (_jsx("button", { type: "button", "data-slot": "site-navbar-mode-toggle", onClick: toggleMode, "aria-label": dark ? darkLabel : lightLabel, "aria-pressed": dark, className: "border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex size-11 shrink-0 items-center justify-center rounded-full border transition-colors focus-visible:ring-[3px] focus-visible:outline-none", children: dark ? _jsx(Sun, { "aria-hidden": true, className: "size-4" }) : _jsx(Moon, { "aria-hidden": true, className: "size-4" }) }));
+}

package/dist/blocks/site-navbar/navbar-controls.d.ts

@@ -0,0 +1,79 @@
+import type { Mode, PackId } from '../../theming/index.js';
+import type { SearchDialogMessages } from '../../components/ui/search-dialog.js';
+import { type ThemePack } from './theme-menu.js';
+import type { SwitcherProduct } from '../../components/ui/product-switcher.js';
+import type { MobileNavLink } from './mobile-nav.js';
+/** What the control cluster was told to render. Every field is optional. */
+export type NavbarControlsProps = {
+    /** The product whose mark heads the mobile panel. */
+    product: {
+        id: string;
+        name: string;
+        pack?: PackId | null;
+    };
+    /** The site's own destinations, for the panel below the row's threshold. */
+    nav: readonly MobileNavLink[];
+    /** The accessible name of the panel and of its trigger. */
+    navLabel: string;
+    /** The set of sites, or nothing for a site that is the only one. */
+    sites?: readonly SwitcherProduct[];
+    /** The `id` of the site the reader is on. */
+    currentSiteId?: string;
+    /** The accessible name of the sites menu. */
+    sitesLabel?: string;
+    /** Where the search index is served from, or nothing for no search. */
+    search?: {
+        indexUrl: string;
+        label: string;
+        hint?: string;
+        messages: SearchDialogMessages;
+    };
+    /** The packs the chooser offers, or nothing for no chooser. */
+    theme?: {
+        label: string;
+        packs?: readonly ThemePack[];
+    };
+    /** The two names of the light and dark control, or nothing for no toggle. */
+    mode?: {
+        lightLabel: string;
+        darkLabel: string;
+    };
+    /** The two names of the mobile trigger. */
+    mobileLabels: {
+        open: string;
+        close: string;
+    };
+    /** The pack a reader with no stored choice gets. */
+    defaultPack: PackId;
+    /** The mode a reader with no stored choice gets. */
+    defaultMode: Mode;
+    /** A slot for controls the consumer owns, after the ones above. */
+    actions?: React.ReactNode;
+};
+/**
+ * The bar's controls, and the only client boundary in the navbar.
+ *
+ * Everything interactive in a site header is application state: what a reader has
+ * chosen, what is open, what a search found. None of it is a fact the bar can be
+ * told, so none of it can live in a server Component, and the boundary is drawn
+ * here rather than around the whole bar so that the brand lockup and the
+ * navigation stay server rendered. That is the arrangement that lets a site keep
+ * the rest of its page free of client JavaScript, which is the property three of
+ * the five NaniSoft sites are built around.
+ *
+ * **The provider is mounted here and not in the site's root layout, and that is
+ * deliberate.** A provider in the layout would wrap every page and every provider
+ * is context, so a page that never renders a control would still ship it. Mounted
+ * around five buttons, it ships with the buttons and stops there. It is also the
+ * only writer of the two attributes the boot script reads, so a choice made here
+ * is a choice the next page load resolves to the same theme.
+ *
+ * **The order is fixed and it is a reading order, not a preference.** Search first
+ * because it is the only control that answers a question the reader arrived with;
+ * then the two menus, which are choices about where to be rather than about what to
+ * do; then the mode, which is the choice that persists across every site in the
+ * family; then the mobile trigger, which is last because it is the only one that
+ * appears at the narrow end of the range and appears alone there.
+ */
+export declare function NavbarControls(props: NavbarControlsProps): import("react").JSX.Element | null;
+//# sourceMappingURL=navbar-controls.d.ts.map

package/dist/blocks/site-navbar/navbar-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-controls.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/navbar-controls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AAI7E,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAIjD,4EAA4E;AAC5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,qDAAqD;IACrD,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAA;IAC3D,4EAA4E;IAC5E,GAAG,EAAE,SAAS,aAAa,EAAE,CAAA;IAC7B,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAA;IAChB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,MAAM,CAAA;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,oBAAoB,CAAA;KAC/B,CAAA;IACD,+DAA+D;IAC/D,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;KAAE,CAAA;IACvD,6EAA6E;IAC7E,IAAI,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,2CAA2C;IAC3C,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAA;IACnB,oDAAoD;IACpD,WAAW,EAAE,IAAI,CAAA;IACjB,mEAAmE;IACnE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sCAsDxD"}

package/dist/blocks/site-navbar/navbar-controls.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModeToggle } from './mode-toggle.js';
+import { SearchEntry } from './search-entry.js';
+import { SitesMenu } from './sites-menu.js';
+import { ThemeMenu } from './theme-menu.js';
+import { MobileNav } from './mobile-nav.js';
+import { PrismProvider } from '../../provider/provider.js';
+/**
+ * The bar's controls, and the only client boundary in the navbar.
+ *
+ * Everything interactive in a site header is application state: what a reader has
+ * chosen, what is open, what a search found. None of it is a fact the bar can be
+ * told, so none of it can live in a server Component, and the boundary is drawn
+ * here rather than around the whole bar so that the brand lockup and the
+ * navigation stay server rendered. That is the arrangement that lets a site keep
+ * the rest of its page free of client JavaScript, which is the property three of
+ * the five NaniSoft sites are built around.
+ *
+ * **The provider is mounted here and not in the site's root layout, and that is
+ * deliberate.** A provider in the layout would wrap every page and every provider
+ * is context, so a page that never renders a control would still ship it. Mounted
+ * around five buttons, it ships with the buttons and stops there. It is also the
+ * only writer of the two attributes the boot script reads, so a choice made here
+ * is a choice the next page load resolves to the same theme.
+ *
+ * **The order is fixed and it is a reading order, not a preference.** Search first
+ * because it is the only control that answers a question the reader arrived with;
+ * then the two menus, which are choices about where to be rather than about what to
+ * do; then the mode, which is the choice that persists across every site in the
+ * family; then the mobile trigger, which is last because it is the only one that
+ * appears at the narrow end of the range and appears alone there.
+ */
+export function NavbarControls(props) {
+    const { product, nav, navLabel, sites, currentSiteId, sitesLabel, search, theme, mode, mobileLabels, defaultPack, defaultMode, actions, } = props;
+    const hasThemeControls = Boolean(theme) || Boolean(mode);
+    if (!search && !sites && !hasThemeControls && !actions && nav.length === 0)
+        return null;
+    return (_jsx(PrismProvider, { defaultPack: defaultPack, defaultMode: defaultMode, children: _jsxs("div", { className: "ms-auto flex items-center gap-2", children: [search ? (_jsx(SearchEntry, { indexUrl: search.indexUrl, label: search.label, hint: search.hint, messages: search.messages })) : null, sites && sites.length > 0 && sitesLabel ? (_jsx(SitesMenu, { sites: sites, currentId: currentSiteId, label: sitesLabel })) : null, theme ? _jsx(ThemeMenu, { label: theme.label, packs: theme.packs }) : null, mode ? _jsx(ModeToggle, { lightLabel: mode.lightLabel, darkLabel: mode.darkLabel }) : null, actions, nav.length > 0 ? (_jsx(MobileNav, { product: product, links: nav, label: navLabel, openLabel: mobileLabels.open, closeLabel: mobileLabels.close })) : null] }) }));
+}

package/dist/blocks/site-navbar/search-entry.d.ts

@@ -0,0 +1,29 @@
+import type { SearchDialogProps } from '../../components/ui/search-dialog.js';
+/** The props the search entry takes. It is the dialog's props without its close. */
+export type SearchEntryProps = Omit<SearchDialogProps, 'onClose'>;
+/**
+ * The search trigger, and the dialog it opens.
+ *
+ * **The dialog is loaded on the first activation, so neither the dialog nor the
+ * index is part of any page's first paint.** The index is the largest single asset
+ * on a documentation site, and a statically imported dialog is in the module graph
+ * of every page whether or not the reader ever searches. The trigger is a plain
+ * button and the cost of reaching it is one click.
+ *
+ * **The shortcut is Command-K on Apple platforms and Control-K everywhere else,
+ * and it matches rather than replaces.** The listener calls `preventDefault` so the
+ * browser's own find behaviour does not also fire, and it toggles so pressing it
+ * twice leaves the reader where they started. It is registered on the document
+ * rather than on the button, because a shortcut scoped to a control only works once
+ * that control has focus, and the point of a shortcut is to save the reader from
+ * having to find the control first.
+ *
+ * **It is icon-only at every width.** The control is not a destination, so its word
+ * is the first thing that goes when the bar runs out of room, and the row it sits in
+ * is measured rather than assumed: a labelled search control is 55 pixels wider than
+ * an icon in the same slot, and on a site whose navigation is nine Sections that is
+ * the difference between fitting at the authored breakpoint and folding the brand
+ * onto two lines. The accessible name is what replaces the word.
+ */
+export declare function SearchEntry(props: SearchEntryProps): import("react").JSX.Element;
+//# sourceMappingURL=search-entry.d.ts.map

package/dist/blocks/site-navbar/search-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-entry.d.ts","sourceRoot":"","sources":["../../../src/blocks/site-navbar/search-entry.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAA;AAe1E,oFAAoF;AACpF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAA;AAEjE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAwClD"}

package/dist/blocks/site-navbar/search-entry.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect, useState } from 'react';
+import { Search } from 'lucide-react';
+/**
+ * The dialog, loaded on the first activation.
+ *
+ * Declared at module scope so the import is shared by every search entry on a page
+ * rather than re-issued per call, which is what makes a second search on the same
+ * page instant. `lazy` is React's own rather than a framework's, because this
+ * package imports no framework and has to stay installable in a bundler that is
+ * not the one its own site uses.
+ */
+const SearchDialog = lazy(() => import('../../components/ui/search-dialog.js').then((module) => ({ default: module.SearchDialog })));
+/**
+ * The search trigger, and the dialog it opens.
+ *
+ * **The dialog is loaded on the first activation, so neither the dialog nor the
+ * index is part of any page's first paint.** The index is the largest single asset
+ * on a documentation site, and a statically imported dialog is in the module graph
+ * of every page whether or not the reader ever searches. The trigger is a plain
+ * button and the cost of reaching it is one click.
+ *
+ * **The shortcut is Command-K on Apple platforms and Control-K everywhere else,
+ * and it matches rather than replaces.** The listener calls `preventDefault` so the
+ * browser's own find behaviour does not also fire, and it toggles so pressing it
+ * twice leaves the reader where they started. It is registered on the document
+ * rather than on the button, because a shortcut scoped to a control only works once
+ * that control has focus, and the point of a shortcut is to save the reader from
+ * having to find the control first.
+ *
+ * **It is icon-only at every width.** The control is not a destination, so its word
+ * is the first thing that goes when the bar runs out of room, and the row it sits in
+ * is measured rather than assumed: a labelled search control is 55 pixels wider than
+ * an icon in the same slot, and on a site whose navigation is nine Sections that is
+ * the difference between fitting at the authored breakpoint and folding the brand
+ * onto two lines. The accessible name is what replaces the word.
+ */
+export function SearchEntry(props) {
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+                event.preventDefault();
+                setOpen((value) => !value);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-slot": "site-navbar-search-trigger", onClick: () => setOpen(true), "aria-label": props.label, "aria-haspopup": "dialog", "aria-expanded": open, className: "border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring flex size-11 shrink-0 items-center justify-center rounded-full border transition-colors focus-visible:ring-[3px] focus-visible:outline-none", children: _jsx(Search, { "aria-hidden": true, className: "size-4" }) }), open ? (_jsx(Suspense, { fallback: null, children: _jsx(SearchDialog, { ...props, onClose: () => setOpen(false) }) })) : null] }));
+}