@nanisoft/prism-ui 0.10.1 → 0.13.0

package/dist/blocks/settings-panel-01/settings-panel.js

@@ -1,14 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { Button } from '../../components/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card';
-import { Field, FieldDescription, FieldGroup, FieldLabel, } from '../../components/ui/field';
-import { Input } from '../../components/ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select';
-import { Separator } from '../../components/ui/separator';
-import { Switch } from '../../components/ui/switch';
-import { Textarea } from '../../components/ui/textarea';
+import { Button } from '../../components/ui/button.js';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/ui/card.js';
+import { Field, FieldDescription, FieldGroup, FieldLabel, } from '../../components/ui/field.js';
+import { Input } from '../../components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select.js';
+import { Separator } from '../../components/ui/separator.js';
+import { Switch } from '../../components/ui/switch.js';
+import { childLevel } from '../../components/ui/section.js';
+import { Textarea } from '../../components/ui/textarea.js';
 function SettingsField({ field }) {
     if (field.kind === 'switch') {
         return (_jsxs(Field, { className: "flex-row items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(FieldLabel, { htmlFor: field.id, children: field.label }), field.description ? (_jsx(FieldDescription, { children: field.description })) : null] }), _jsx(Switch, { id: field.id, checked: field.checked, defaultChecked: field.defaultChecked, onCheckedChange: field.onCheckedChange, disabled: field.disabled })] }));
@@ -31,8 +32,12 @@ function SettingsField({ field }) {
  * block renders the card, the groups and the footer; it owns no values and no
  * copy, so a consumer wires it to whatever form state or mutation they use.
  */
-export function SettingsPanel01({ title, description, sections, submitLabel, onSubmit, secondaryAction, footer, }) {
+export function SettingsPanel01({ title, description, sections, submitLabel, onSubmit, secondaryAction, footer, headingLevel = 'h2', }) {
+    // The panel title is the one heading the panel renders, and a group inside it is
+    // one step below, so the whole outline moves together when the panel does.
+    const Title = headingLevel;
+    const GroupTitle = childLevel(headingLevel);
     const hasFooter = Boolean(submitLabel || secondaryAction || footer);
-    return (_jsx("form", { onSubmit: onSubmit, className: "w-full", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: title }), description ? _jsx(CardDescription, { children: description }) : null] }), _jsx(CardContent, { className: "flex flex-col", children: sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Separator, { className: "my-6" }) : null, _jsxs("section", { className: "flex flex-col gap-4", "aria-labelledby": `${section.id}-heading`, children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h3", { id: `${section.id}-heading`, className: "text-lg font-semibold tracking-tight", children: section.title }), section.description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: section.description })) : null] }), _jsx(FieldGroup, { children: section.fields.map((field) => (_jsx(SettingsField, { field: field }, field.id))) })] })] }, section.id))) }), hasFooter ? (_jsxs(CardFooter, { className: "justify-end gap-2", children: [footer, secondaryAction ? (_jsx(Button, { type: "button", variant: "outline", onClick: secondaryAction.onClick, children: secondaryAction.label })) : null, submitLabel ? _jsx(Button, { type: "submit", children: submitLabel }) : null] })) : null] }) }));
+    return (_jsx("form", { onSubmit: onSubmit, className: "w-full", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx(Title, { children: title }) }), description ? _jsx(CardDescription, { children: description }) : null] }), _jsx(CardContent, { className: "flex flex-col", children: sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Separator, { className: "my-6" }) : null, _jsxs("section", { className: "flex flex-col gap-4", "aria-labelledby": `${section.id}-heading`, children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(GroupTitle, { id: `${section.id}-heading`, className: "text-lg font-semibold tracking-tight", children: section.title }), section.description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: section.description })) : null] }), _jsx(FieldGroup, { children: section.fields.map((field) => (_jsx(SettingsField, { field: field }, field.id))) })] })] }, section.id))) }), hasFooter ? (_jsxs(CardFooter, { className: "justify-end gap-2", children: [footer, secondaryAction ? (_jsx(Button, { type: "button", variant: "outline", onClick: secondaryAction.onClick, children: secondaryAction.label })) : null, submitLabel ? _jsx(Button, { type: "submit", children: submitLabel }) : null] })) : null] }) }));
 }
 export default SettingsPanel01;

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

@@ -1,3 +1,3 @@
-export { SiteFooter, default } from './site-footer';
-export type { SiteFooterProps, SiteFooterColumn, SiteFooterLink, SiteFooterSocial } from './site-footer';
+export { SiteFooter, default } from './site-footer.js';
+export type { SiteFooterProps, SiteFooterColumn, SiteFooterLink, SiteFooterSocial } from './site-footer.js';
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type ProductMarkProps } from '../../components/ui/product-mark';
+import { type ProductMarkProps } from '../../components/ui/product-mark.js';
 /**
  * One destination in a footer column.
  *

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.

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.

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] }));
+}