@nxgt/material 3.79.1 → 3.81.0

package/dist/lib/components/ui/layout/navigation-drawer/partials/navigation-drawer-item.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent } from '../../app-shell/types.js';
+export type NavigationDrawerItemProps = {
+    /** Where the destination goes. */
+    href: string;
+    icon: IconProps['name'];
+    /** The visible label, already translated. */
+    children: ReactNode;
+    /** Whether this is the current destination. Unset: the location starts with `href`. */
+    active?: boolean;
+    /** `true` a dot, a number a count ("99+" past 99), a node as it is; ends the row and is read in the link's name. */
+    badge?: number | boolean | ReactNode;
+    /** Replaces the badge's text in the link's name, already translated. */
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/** One destination of the drawer: an icon and a label in a 56px row, `aria-current="page"` when active. */
+export declare function NavigationDrawerItem({ href, icon, children, active, badge, badgeLabel, linkComponent, className, }: NavigationDrawerItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-drawer/partials/navigation-drawer-modal.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { NavigationDrawerBaseProps } from '../navigation-drawer.js';
+export type NavigationDrawerModalProps = {
+    /** Open while true (controlled). Unset: the drawer manages itself, opened by `trigger`. */
+    open?: boolean;
+    /** Asked for every change: the trigger, Escape, the scrim, a followed link, a new location. */
+    onOpenChange?: (open: boolean) => void;
+    /** The element that opens the drawer, usually a menu `IconButton`. */
+    trigger?: ReactNode;
+};
+/**
+ * The modal drawer: the standard drawer in a `Sheet` from the start edge. It
+ * shares the app shell's menu sheet logic (`useNavigationSheet`): a followed
+ * link and a new location close it, and focus goes to the page or back to the
+ * trigger.
+ */
+export declare function NavigationDrawerModal({ open, onOpenChange, trigger, ...drawer }: NavigationDrawerBaseProps & NavigationDrawerModalProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-drawer/partials/navigation-drawer-section.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { AppShellLinkComponent, MenuItem } from '../../app-shell/types.js';
+export type NavigationDrawerSectionProps = {
+    /** The section's title, already translated; it names the group. */
+    headline?: ReactNode;
+    /** The section's entries. */
+    items?: MenuItem[];
+    /** The `url` of the current entry. Unset: the one of this section's `items` the location is in. */
+    current?: string;
+    linkComponent?: AppShellLinkComponent;
+    /** Hand-made entries (`NavigationDrawer.Item`), after those of `items`. */
+    children?: ReactNode;
+};
+/** A headline over a group of destinations, one `group` named by it. */
+export declare function NavigationDrawerSection({ headline, items, current, linkComponent, children, }: NavigationDrawerSectionProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-rail/index.d.ts

@@ -1 +1,4 @@
 export * from './navigation-rail.js';
+export * from './navigation-rail-panel.js';
+export type { NavigationRailItemProps } from './partials/navigation-rail-item.js';
+export type { RailExpandedOptions } from './use-rail-expanded.js';

package/dist/lib/components/ui/layout/navigation-rail/navigation-rail-panel.d.ts

@@ -0,0 +1,26 @@
+import { AppShellLinkComponent, MenuItem } from '../app-shell/types.js';
+import { RailExpandedOptions } from './use-rail-expanded.js';
+export type NavigationRailPanelProps = RailExpandedOptions & {
+    /** The same menu as the rail's: the panel lists the `children` of the top-level entry the location belongs to. */
+    items?: MenuItem[];
+    linkComponent?: AppShellLinkComponent;
+    /** The landmark's accessible name, already translated. Unset: named by the section's own label, which is also its heading. */
+    label?: string;
+    className?: string;
+};
+/**
+ * The second level of a two-level navigation (Material 3 Expressive): a panel
+ * beside the `NavigationRail` that lists the `children` of the top-level entry
+ * the location belongs to, under that entry's label, the current child marked
+ * with `aria-current="page"`. It is a named `nav`; a button folds it to a
+ * narrow strip and back (`aria-expanded`). It opens by default
+ * (`defaultExpanded`, `true`), or is controlled with `expanded`; with a
+ * `persistKey` the last choice is remembered in the browser, read after
+ * hydration. Nothing opens it on hover.
+ *
+ * On a section without `children` the panel hides itself with CSS (its markup
+ * stays), so the page does not change shape between routes. Only one level of
+ * `children` is listed. Needs a React Router context. `ActivityLayout`'s
+ * `navigation="two-level"` draws the rail and this panel together.
+ */
+export declare function NavigationRailPanel({ items, linkComponent, label, className, defaultExpanded, ...state }: NavigationRailPanelProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-rail/navigation-rail.classes.d.ts

@@ -0,0 +1,23 @@
+/** The key the expanded state is kept under, in the browser's local storage. */
+export declare const RAIL_STORAGE_PREFIX = "nxgt-rail:";
+/** The rail: 5rem collapsed, 15rem expanded; the width eases unless motion is reduced. */
+export declare const RAIL_ROOT = "group/rail flex h-full min-h-0 w-20 shrink-0 flex-col gap-3 overflow-hidden py-2 transition-[width] duration-(--nxgt-motion-effects-default-duration) ease-(--nxgt-motion-effects-default) data-expanded:w-60 motion-reduce:transition-none";
+/**
+ * One destination. Collapsed: the icon in its pill with the label under it;
+ * expanded: a row of 56px, the icon and the label inline, the whole row tinted
+ * when current. Targets are 48px or taller either way.
+ */
+export declare const RAIL_ITEM = "nxgt-plain-link group relative mx-1 flex min-h-12 flex-col items-center gap-1 rounded-2xl px-1 py-1 font-medium text-muted-foreground text-xs outline-none transition-colors data-active:font-semibold data-active:text-foreground focus-visible:outline-2 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight] group-data-expanded/rail:mx-3 group-data-expanded/rail:h-14 group-data-expanded/rail:flex-row group-data-expanded/rail:gap-3 group-data-expanded/rail:rounded-full group-data-expanded/rail:px-4 group-data-expanded/rail:text-sm group-data-expanded/rail:hover:bg-accent/60";
+/** The icon's pill (collapsed). */
+export declare const RAIL_GLYPH = "relative flex h-8 w-14 shrink-0 items-center justify-center rounded-full group-data-expanded/rail:h-6 group-data-expanded/rail:w-6 group-hover:bg-accent/60 group-data-expanded/rail:group-hover:bg-transparent";
+/** The pill behind the icon, collapsed: the bar's, which grows from the middle. */
+export declare const RAIL_PILL = "absolute inset-0 scale-x-50 rounded-full bg-sidebar-active opacity-0 transition-[opacity,transform] duration-(--nxgt-motion-effects-default-duration) ease-(--nxgt-motion-effects-default) group-data-active:scale-x-100 group-data-active:opacity-100 group-active:scale-x-110 motion-reduce:transition-none forced-colors:border forced-colors:border-[Highlight] group-data-expanded/rail:hidden";
+/** The tint behind the whole row, expanded. */
+export declare const RAIL_ROW = "absolute inset-0 scale-x-50 rounded-full bg-sidebar-active opacity-0 transition-[opacity,transform] duration-(--nxgt-motion-effects-default-duration) ease-(--nxgt-motion-effects-default) group-data-active:scale-x-100 group-data-active:opacity-100 group-active:scale-x-110 motion-reduce:transition-none forced-colors:border forced-colors:border-[Highlight] hidden group-data-expanded/rail:block";
+export declare const RAIL_LABEL = "line-clamp-2 min-w-0 break-words text-center group-data-expanded/rail:truncate group-data-expanded/rail:text-start";
+/** The key the section panel's open state is kept under, beside the rail's. */
+export declare const PANEL_STORAGE_PREFIX = "nxgt-panel:";
+/** The section panel: 14rem open, a narrow strip with its button when folded; the width eases unless motion is reduced. */
+export declare const PANEL_ROOT = "group/panel flex h-full min-h-0 w-56 shrink-0 flex-col gap-1 overflow-hidden border-border/60 border-s px-2 py-2 transition-[width] duration-(--nxgt-motion-effects-default-duration) ease-(--nxgt-motion-effects-default) data-collapsed:w-14 data-empty:hidden motion-reduce:transition-none";
+/** One child: a 48px row, tinted when current (the drawer's indicator). */
+export declare const PANEL_ITEM = "nxgt-plain-link group relative flex min-h-12 shrink-0 items-center gap-3 rounded-full px-4 font-medium text-muted-foreground text-sm outline-none transition-colors hover:bg-accent/60 data-active:font-semibold data-active:text-foreground focus-visible:outline-2 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight]";

package/dist/lib/components/ui/layout/navigation-rail/navigation-rail.d.ts

@@ -1 +1,42 @@
-export declare function NavigationRail(): import("react").JSX.Element;
+import { ReactNode } from 'react';
+import { AppShellLinkComponent, MenuItem } from '../app-shell/types.js';
+import { NavigationRailItem } from './partials/navigation-rail-item.js';
+import { RailExpandedOptions } from './use-rail-expanded.js';
+export type NavigationRailProps = RailExpandedOptions & {
+    /** The menu. Entries with `footer: true` sit at the rail's bottom. */
+    items?: MenuItem[];
+    /**
+     * The screen's primary action, above the destinations: a `Fab` (or any
+     * button), not a link. A function receives the state, to pass an extended
+     * `Fab` once the rail is wide.
+     */
+    fab?: ReactNode | ((state: {
+        expanded: boolean;
+    }) => ReactNode);
+    /** Whether the menu button that expands the rail shows. @default true */
+    toggle?: boolean;
+    linkComponent?: AppShellLinkComponent;
+    /** The landmark's accessible name, already translated. @default "Navigation" */
+    label?: string;
+    /** Hand-made entries, after those of `items`. */
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * The navigation rail (Material 3 Expressive): a `nav` of destinations
+ * stacked down the start edge, each an icon in an indicator pill with its
+ * label under it, an optional badge read in the link's name, a `fab` slot for
+ * the screen's primary action and a menu button that expands it into a wide
+ * rail with the labels inline. Targets are 48px or taller and
+ * `aria-current="page"` marks the current one.
+ *
+ * Without `items` or `children` it renders the empty `div` it always did.
+ * The expanded state is `defaultExpanded` (collapsed), or controlled with
+ * `expanded`; with a `persistKey` the last choice is remembered in the
+ * browser, read after hydration. Hide it at some sizes with a breakpoint class
+ * (`max-md:hidden`), as `ActivityLayout`'s `navigation="rail-expanded"` does.
+ */
+export declare function NavigationRail(props: NavigationRailProps): import("react").JSX.Element;
+export declare namespace NavigationRail {
+    var Item: typeof NavigationRailItem;
+}

package/dist/lib/components/ui/layout/navigation-rail/navigation-rail.utils.d.ts

@@ -0,0 +1,4 @@
+/** The saved expanded state under `persistKey`, or undefined when none is saved or the storage is unavailable. */
+export declare function readExpanded(persistKey: string, prefix?: string): boolean | undefined;
+/** Saves the expanded state under `persistKey`; a blocked storage is ignored. */
+export declare function writeExpanded(persistKey: string, expanded: boolean, prefix?: string): void;

package/dist/lib/components/ui/layout/navigation-rail/partials/navigation-rail-body.d.ts

@@ -0,0 +1,3 @@
+import { NavigationRailProps } from '../navigation-rail.js';
+/** The rail with entries: kept apart from `NavigationRail` so an empty one needs no router. */
+export declare function NavigationRailBody({ items, fab, toggle, linkComponent, label, children, className, ...state }: NavigationRailProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-rail/partials/navigation-rail-item.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent } from '../../app-shell/types.js';
+export type NavigationRailItemProps = {
+    /** Where the destination goes. */
+    href: string;
+    icon: IconProps['name'];
+    /** The visible label, already translated: under the icon, or beside it once expanded. */
+    children: ReactNode;
+    /** Whether this is the current destination. Unset: the location starts with `href`. */
+    active?: boolean;
+    /** `true` a dot, a number a count ("99+" past 99), a node as it is; read in the link's name. */
+    badge?: number | boolean | ReactNode;
+    /** Replaces the badge's text in the link's name, already translated. */
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/** One destination of the rail: an icon in its indicator pill, the label under it (beside it when expanded), `aria-current="page"` when active. */
+export declare function NavigationRailItem({ href, icon, children, active, badge, badgeLabel, linkComponent, className, }: NavigationRailItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-rail/partials/navigation-rail-panel-item.d.ts

@@ -0,0 +1,7 @@
+import { AppShellLinkComponent, MenuItem } from '../../app-shell/types.js';
+/** One child of the section panel: its label (and badge) in a pill row, `aria-current="page"` when current. */
+export declare function NavigationRailPanelItem({ item, current, linkComponent, }: {
+    item: MenuItem;
+    current: boolean;
+    linkComponent?: AppShellLinkComponent;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-rail/partials/navigation-rail-toggle.d.ts

@@ -0,0 +1,7 @@
+/** The rail's menu button: widens the rail to show the labels inline, and narrows it again. */
+export declare function NavigationRailToggle({ expanded, onToggle, controls, }: {
+    expanded: boolean;
+    onToggle: () => void;
+    /** The id of the element it widens (the rail). */
+    controls: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-rail/use-rail-expanded.d.ts

@@ -0,0 +1,13 @@
+export type RailExpandedOptions = {
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    persistKey?: string;
+};
+/**
+ * The rail's expanded state, controlled (`expanded`) or not. With a
+ * `persistKey` the saved value is read in an effect, after hydration, so a
+ * server render and the first client render agree on `defaultExpanded`.
+ * `prefix` is the storage key's prefix: the shell's sidebar keeps its own.
+ */
+export declare function useRailExpanded({ expanded, defaultExpanded, onExpandedChange, persistKey, }: RailExpandedOptions, prefix?: string): [boolean, (next: boolean) => void];

package/dist/lib/components/ui/layout/navigation-toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './navigation-toolbar.js';
+export type { NavigationToolbarItemProps } from './partials/navigation-toolbar-item.js';

package/dist/lib/components/ui/layout/navigation-toolbar/navigation-toolbar.classes.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The floating pill's sizes. They live in navigation-toolbar.css too (the
+ * item, `--tb-item`, and the gap above the bottom edge, `--nxgt-nav-toolbar-gap`);
+ * navigation-toolbar.classes.test.ts reads the stylesheet and checks that the
+ * values here are the ones it draws.
+ */
+/** An item's size: a 48px target at every pointer. */
+export declare const NAV_TOOLBAR_ITEM = "3rem";
+/** The pill's height: the item and the toolbar's 8px padding on each side. */
+export declare const NAV_TOOLBAR_HEIGHT = "4rem";
+/** The gap between the pill and the bottom edge (above the safe area). */
+export declare const NAV_TOOLBAR_GAP = "1rem";
+/** What the pill takes at the bottom, the gap and the safe-area inset included: `--nxgt-nav-bar` while it shows. */
+export declare const NAV_TOOLBAR_ROOM = "calc(5rem + env(safe-area-inset-bottom, 0px))";
+/**
+ * `--nxgt-nav-bar` for a first paint, before the pill measures itself, at the
+ * sizes it shows (whole literals, so Tailwind sees them). The keys are
+ * `phone tablet desktop` as 1/0, as in navigation.utils.
+ */
+export declare const NAV_TOOLBAR_VAR: Record<string, string>;

package/dist/lib/components/ui/layout/navigation-toolbar/navigation-toolbar.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { AppShellLinkComponent, MenuItem } from '../app-shell/types.js';
+import { NavigationToolbarItem } from './partials/navigation-toolbar-item.js';
+export type NavigationToolbarProps = {
+    /**
+     * The menu: the pill shows 3 to 5 destinations (`bar` and `priority` on a
+     * {@link MenuItem} choose them, as for the `NavigationBar`) and « More »
+     * lists the rest. Or pass {@link NavigationToolbar.Item}s as `children` to
+     * compose it by hand.
+     */
+    items?: MenuItem[];
+    /** Destinations on the pill, « More » included: 3 to 5. @default 5 */
+    max?: number;
+    linkComponent?: AppShellLinkComponent;
+    /** The landmark's accessible name, already translated. @default "Navigation" */
+    label?: string;
+    /**
+     * Whether the pill slides away while the page scrolls down and comes back
+     * on the way up. It reads the shell's scroll ({@link useShellScroll}):
+     * `ActivityLayout` provides it, and outside one nothing scrolls the pill
+     * away. While away it is `inert` (out of the tab order and the
+     * accessibility tree) and focus inside it moves to the content region, then
+     * returns. With reduced motion it snaps instead of sliding.
+     * @default false
+     */
+    hideOnScroll?: boolean;
+    /** Forces the pill away (`true`) or shown (`false`), whatever the scroll says. Unset: the scroll decides. */
+    hidden?: boolean;
+    /** Hand-made entries, after those of `items`. */
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * The floating navigation toolbar: a pill of navigation links over the content,
+ * at the bottom centre. A `nav` landmark (not `role="toolbar"`, which is for
+ * actions: use `Toolbar variant="floating"` for those) of round icon links, each
+ * named by a visually hidden label and a tooltip, `aria-current="page"` on the
+ * current one, 48px targets, and « More » for the entries it leaves out. It
+ * shares the floating `Toolbar`'s pill (its `--tb-*` tokens, shadow and slide
+ * away).
+ *
+ * It shows at every width: hide it with a breakpoint class, as
+ * `ActivityLayout`'s `navigation="floating"` does. While it shows it sets
+ * `--nxgt-nav-bar` on the document root (its height and the gap under it, also
+ * while it is slid away), so FabDock, toasts, the mini player and
+ * `StickyActionBar` keep clear of it.
+ */
+export declare function NavigationToolbar({ items, max, linkComponent, label, hideOnScroll, hidden, children, className, }: NavigationToolbarProps): import("react").JSX.Element;
+export declare namespace NavigationToolbar {
+    var Item: typeof NavigationToolbarItem;
+}

package/dist/lib/components/ui/layout/navigation-toolbar/partials/navigation-toolbar-item.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent } from '../../app-shell/types.js';
+export type NavigationToolbarItemProps = {
+    /** Where the destination goes. */
+    href: string;
+    icon: IconProps['name'];
+    /** The destination's name, already translated: its accessible name and its tooltip (the pill shows the icon alone). */
+    children: ReactNode;
+    /** Whether this is the current destination. Unset: the location starts with `href`. */
+    active?: boolean;
+    /** `true` a dot, a number a count ("99+" past 99), a node as it is; read in the link's name. */
+    badge?: number | boolean | ReactNode;
+    /** Replaces the badge's text in the link's name, already translated. */
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/** The icon, with the badge on its corner. The icon is decorative: the visually hidden label names the entry. */
+export declare function NavigationToolbarGlyph({ icon, badge, }: {
+    icon: IconProps['name'];
+    badge?: ReactNode;
+}): import("react").JSX.Element;
+/** One destination of the pill: a round link with the icon, named by a visually hidden label, `aria-current="page"` when current. */
+export declare function NavigationToolbarItem({ href, icon, children, active, badge, badgeLabel, linkComponent, className, }: NavigationToolbarItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/navigation-toolbar/partials/navigation-toolbar-more.d.ts

@@ -0,0 +1,3 @@
+import { NavigationBarMore } from '../../navigation-bar/internal.js';
+/** The bar's « More » sheet, opened from a round icon of the pill. */
+export declare function NavigationToolbarMore(props: Omit<Parameters<typeof NavigationBarMore>[0], 'trigger'>): import("react").JSX.Element;

package/dist/lib/components/ui/layout/pane-layout/internal.d.ts

@@ -0,0 +1,3 @@
+export { type PaneLayoutPaneWidth, usePaneLayout, } from './partials/pane-layout-context.js';
+export { PHONE_MAX } from './partials/use-pane-layout-state.js';
+export { usePaneNarrow } from './partials/use-pane-narrow.js';

package/dist/lib/components/ui/layout/pane-layout/pane-layout.d.ts

@@ -1,9 +1,10 @@
 import { ComponentProps } from 'react';
 import { PaneLayoutContent } from './partials/pane-layout-content.js';
-import { PaneSide } from './partials/pane-layout-context.js';
+import { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './partials/pane-layout-context.js';
 import { PaneLayoutPane } from './partials/pane-layout-pane.js';
 import { PaneLayoutTrigger } from './partials/pane-layout-trigger.js';
 export { PaneLayoutContent, type PaneLayoutContentProps, } from './partials/pane-layout-content.js';
+export type { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, } from './partials/pane-layout-context.js';
 export { usePaneLayout } from './partials/pane-layout-context.js';
 export { PaneLayoutPane, type PaneLayoutPaneProps, } from './partials/pane-layout-pane.js';
 export { PaneLayoutTrigger, type PaneLayoutTriggerProps, } from './partials/pane-layout-trigger.js';
@@ -12,8 +13,21 @@ export interface PaneLayoutProps extends ComponentProps<'div'> {
     onOpenChange?: (open: boolean) => void;
     defaultOpen?: boolean;
     paneSide?: PaneSide;
+    /**
+     * How the pane shows below 768px: `sheet` (side sheet), `bottom` (bottom
+     * sheet) or `stack` (under the main content, no overlay). Unset keeps the
+     * side sheet at 648px and narrower.
+     */
+    phone?: PaneLayoutPhone;
+    /**
+     * What 768px is measured on: the `viewport` (default) or `container`, the
+     * layout's own width, for a layout in a narrow region.
+     */
+    breakpoint?: PaneLayoutBreakpoint;
+    /** Width of the inline pane: `sm` 16rem, `md` 20rem (default), `lg` 24rem. */
+    paneWidth?: PaneLayoutPaneWidth;
 }
-export declare function PaneLayout({ children, className, open: controlledOpen, onOpenChange, defaultOpen, paneSide, ...props }: PaneLayoutProps): import("react").JSX.Element;
+export declare function PaneLayout({ children, className, open, onOpenChange, defaultOpen, paneSide, phone, breakpoint, paneWidth, ref, ...props }: PaneLayoutProps): import("react").JSX.Element;
 export declare namespace PaneLayout {
     var displayName: string;
     var Pane: typeof PaneLayoutPane;

package/dist/lib/components/ui/layout/pane-layout/partials/pane-layout-classes.d.ts

@@ -0,0 +1,7 @@
+import { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
+/** The flex direction of the row that holds the pane and the content. */
+export declare function paneRowClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneSide: PaneSide): string;
+/** The inline pane's size, and when it gives way to a sheet or a stack. */
+export declare function inlinePaneClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneWidth: PaneLayoutPaneWidth): string;
+/** The edge the pane shares with the content. */
+export declare function paneBorderClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneSide: PaneSide): "border-t md:border-t-0 md:border-r" | "border-t md:border-t-0 md:border-l" | "border-t @3xl:border-t-0 @3xl:border-r" | "border-t @3xl:border-t-0 @3xl:border-l" | "border-l" | "border-r";

package/dist/lib/components/ui/layout/pane-layout/partials/pane-layout-context.d.ts

@@ -1,11 +1,24 @@
 import { ReactNode } from 'react';
 export type PaneSide = 'left' | 'right';
+/**
+ * How the supporting pane shows below 768px: `sheet` is a side sheet, `bottom`
+ * a bottom sheet, `stack` sits under the main content. Unset keeps the
+ * historical side sheet at 648px and narrower.
+ */
+export type PaneLayoutPhone = 'sheet' | 'bottom' | 'stack';
+/** What the phone switch measures: the `viewport` (default) or the layout's own width. */
+export type PaneLayoutBreakpoint = 'viewport' | 'container';
+/** Width of the inline pane: `sm` 16rem, `md` 20rem (default), `lg` 24rem. */
+export type PaneLayoutPaneWidth = 'sm' | 'md' | 'lg';
 export interface PaneLayoutContextProps {
     open: boolean;
     setOpen: (open: boolean | ((prevOpen: boolean) => boolean)) => void;
     toggleOpen: () => void;
     paneSide: PaneSide;
     isMobile: boolean;
+    phone?: PaneLayoutPhone;
+    breakpoint: PaneLayoutBreakpoint;
+    paneWidth: PaneLayoutPaneWidth;
 }
 /** Children, or a function of the layout's state. */
 export type PaneLayoutChildren = ReactNode | ((state: PaneLayoutContextProps) => ReactNode);

package/dist/lib/components/ui/layout/pane-layout/partials/use-pane-layout-state.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { PaneLayoutBreakpoint, PaneLayoutContextProps, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
+export declare const PHONE_MAX = 768;
+interface Options {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen: boolean;
+    paneSide: PaneSide;
+    phone?: PaneLayoutPhone;
+    breakpoint: PaneLayoutBreakpoint;
+    paneWidth: PaneLayoutPaneWidth;
+    rootRef: RefObject<HTMLElement | null>;
+}
+/** The open state, controlled or not, and whether the layout is on a phone. */
+export declare function usePaneLayoutState(o: Options): PaneLayoutContextProps;
+export {};

package/dist/lib/components/ui/layout/pane-layout/partials/use-pane-narrow.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+/**
+ * Whether the element is narrower than `max` px, measured on the element itself.
+ * `false` on the server and on the first client render, so hydration matches.
+ */
+export declare function usePaneNarrow(ref: RefObject<HTMLElement | null>, enabled: boolean, max: number): boolean;

package/dist/lib/components/ui/layout/responsive-grid/index.d.ts

@@ -1,2 +1,5 @@
 export * from './responsive-grid.js';
-export type { ResponsiveGridGap, ResponsiveGridMinItem, } from './responsive-grid.utils.js';
+export type { ResponsiveGridFlow, ResponsiveGridGap, ResponsiveGridMinItem, } from './responsive-grid.utils.js';
+export type { ResponsiveGridItemProps } from './responsive-grid-item.js';
+export { ResponsiveGridItem } from './responsive-grid-item.js';
+export type { GridBreakpoint, GridRowSpan, GridSpan, ResponsiveValue, } from './responsive-grid-spans.js';

package/dist/lib/components/ui/layout/responsive-grid/responsive-grid-item.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import { GridRowSpan, GridSpan, ResponsiveValue } from './responsive-grid-spans.js';
+export type ResponsiveGridItemProps = ComponentProps<'div'> & {
+    /**
+     * Columns the tile covers: a number (1 to 6), `'full'`, or one per width,
+     * `{ base: 1, md: 2, xl: 3 }` (container widths 0, 768px and 1280px, each
+     * from its width up). A span wider than the grid's columns adds implicit
+     * columns: keep it within the count at that width. Ignored by
+     * `flow="masonry"`.
+     */
+    span?: ResponsiveValue<GridSpan>;
+    /** Rows the tile covers (1 to 4), or one per width. Ignored by `flow="masonry"`. */
+    rowSpan?: ResponsiveValue<GridRowSpan>;
+};
+/**
+ * ResponsiveGrid.Item - a tile that covers more than one column or row. A
+ * plain child needs no wrapper: use this only for a span.
+ */
+export declare function ResponsiveGridItem({ span, rowSpan, className, ...props }: ResponsiveGridItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/responsive-grid/responsive-grid-spans.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Tile spans for `ResponsiveGrid.Item` and `DashboardTile`. Breakpoints are
+ * container widths, like the grid's own columns: `md` is 48rem (768px) and
+ * `xl` 80rem (1280px), the Layouts breakpoints, as `@3xl` and `@7xl`. The
+ * classes are literals so Tailwind sees them.
+ */
+export type GridBreakpoint = 'base' | 'md' | 'xl';
+/** A value for every width, or one per breakpoint (`{ base: 1, md: 2, xl: 3 }`): each applies from its width up. */
+export type ResponsiveValue<T> = T | Partial<Record<GridBreakpoint, T>>;
+/** Columns a tile covers; `'full'` covers every column. */
+export type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 'full';
+/** Rows a tile covers. */
+export type GridRowSpan = 1 | 2 | 3 | 4;
+/** A plain value applies from the narrowest width: `{ base: value }`. */
+export declare function perBreakpoint<T>(value: ResponsiveValue<T> | undefined): Partial<Record<GridBreakpoint, T>>;
+/** The `col-span-*` classes of a (responsive) column span. */
+export declare const columnSpanClasses: (value?: ResponsiveValue<GridSpan>) => string[];
+/** The `row-span-*` classes of a (responsive) row span. */
+export declare const rowSpanClasses: (value?: ResponsiveValue<GridRowSpan>) => string[];

package/dist/lib/components/ui/layout/responsive-grid/responsive-grid.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from 'react';
-import { ResponsiveGridGap, ResponsiveGridMinItem } from './responsive-grid.utils.js';
+import { ResponsiveGridFlow, ResponsiveGridGap, ResponsiveGridMinItem } from './responsive-grid.utils.js';
+import { ResponsiveGridItem } from './responsive-grid-item.js';
 export type ResponsiveGridProps = ComponentProps<'div'> & {
     /**
      * Fill the row with tiles at least this wide: a preset (`xs` 10rem, `sm`
@@ -12,10 +13,31 @@ export type ResponsiveGridProps = ComponentProps<'div'> & {
     minItem?: ResponsiveGridMinItem | (string & {});
     /** The space between tiles: `sm` 0.5rem (default), `md` 1rem, `lg` 1.5rem. */
     gap?: ResponsiveGridGap;
+    /**
+     * `'masonry'` packs tiles of different heights in columns with no gaps
+     * (CSS multi-column; the column count follows `minItem` or the width, as
+     * above). Reading order caveat: tiles fill the first column top to bottom,
+     * then the next, so the Tab and screen-reader order runs down each column
+     * while the eye reads across: use it for browsing (galleries, notes), not
+     * for a sequence. `ResponsiveGrid.Item` spans are ignored. Default
+     * `'grid'`.
+     */
+    flow?: ResponsiveGridFlow;
+    /**
+     * Fill the holes a tile with a span leaves by moving later, smaller tiles
+     * up (`grid-auto-flow: dense`). The visual order then differs from the
+     * source (and Tab) order. Ignored by `flow="masonry"`.
+     */
+    dense?: boolean;
 };
 /**
  * ResponsiveGrid - tiles in a grid that follows its container's width: stepped
  * columns by default, or `auto-fill` columns by a minimum tile width with
  * `minItem`.
  */
-export declare function ResponsiveGrid({ minItem, gap, className, children, ...props }: ResponsiveGridProps): import("react").JSX.Element;
+declare function ResponsiveGridRoot({ minItem, gap, flow, dense, className, children, ...props }: ResponsiveGridProps): import("react").JSX.Element;
+/** `ResponsiveGrid.Item` spans columns and rows; `flow="masonry"` and `dense` change how tiles pack. */
+export declare const ResponsiveGrid: typeof ResponsiveGridRoot & {
+    Item: typeof ResponsiveGridItem;
+};
+export {};

package/dist/lib/components/ui/layout/responsive-grid/responsive-grid.utils.d.ts

@@ -18,3 +18,15 @@ export declare const STEPPED_CLASS = "grid @lg:grid-cols-2 @2xl:grid-cols-3  @4x
  * empty, so a few tiles never stretch across 1920px.
  */
 export declare const AUTO_FILL_CLASS = "grid grid-cols-[repeat(auto-fill,minmax(min(var(--rg-min),100%),1fr))]";
+/** How the tiles flow: rows of a grid (the default), or columns filled top to bottom (masonry). */
+export type ResponsiveGridFlow = 'grid' | 'masonry';
+/**
+ * Masonry is CSS multi-column, which every browser supports: tiles of any
+ * height pack in columns with no gaps. The column count follows the same
+ * rules as the grid (`STEPPED` by width, or a minimum width). A tile never
+ * splits across columns; the gap between tiles in a column is the tile's
+ * bottom margin, as `gap` only spaces the columns.
+ */
+export declare const MASONRY_STEPPED_CLASS = "block columns-1 @lg:columns-2 @2xl:columns-3 @4xl:columns-4 @6xl:columns-5";
+export declare const MASONRY_AUTO_FILL_CLASS = "block [column-width:var(--rg-min)]";
+export declare const MASONRY_GAP_CLASS: Record<ResponsiveGridGap, string>;

package/dist/lib/components/ui/layout/settings-layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './settings-layout.js';
+export type { SettingsLayoutProps, SettingsSection, } from './settings-layout.types.js';

package/dist/lib/components/ui/layout/settings-layout/partials/settings-link.d.ts

@@ -0,0 +1,7 @@
+import { LinkComponent } from '../../../primitives/link/link-component.js';
+/**
+ * A section's link: on a phone it adds a history entry, marked as the
+ * layout's so its Back button takes the browser's Back; beside the page it
+ * rewrites the current entry, so choosing sections does not pile history up.
+ */
+export declare const SettingsLink: LinkComponent;

package/dist/lib/components/ui/layout/settings-layout/partials/settings-list.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { SettingsSection } from '../settings-layout.types.js';
+type Props = {
+    sections: SettingsSection[];
+    title: ReactNode;
+    param: string;
+    viewParam: string;
+    search: boolean;
+};
+export declare function SettingsList({ sections, title, param, viewParam, search, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/layout/settings-layout/partials/settings-page.d.ts

@@ -0,0 +1,5 @@
+import { SettingsSection } from '../settings-layout.types.js';
+/** The selected section's page: its heading (where a phone's focus lands), its description, its content. */
+export declare function SettingsPage({ section }: {
+    section?: SettingsSection;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/layout/settings-layout/settings-layout.d.ts

@@ -0,0 +1,10 @@
+import { SettingsLayoutProps } from './settings-layout.types.js';
+/**
+ * The canonical settings layout: grouped sections in a list beside the
+ * selected section's page; on a phone the list, then the page (Back returns).
+ * The selection is the `?section=` search param, so it needs a router above.
+ */
+export declare function SettingsLayout({ sections, title, param, viewParam, search, breakpoint, listWidth, ...props }: SettingsLayoutProps): import("react").JSX.Element;
+export declare namespace SettingsLayout {
+    var displayName: string;
+}