@nxgt/material 3.79.1 → 3.81.0

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

@@ -0,0 +1,50 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ResponsiveGridGap } from '../responsive-grid/responsive-grid.utils.js';
+import { GridRowSpan, GridSpan, ResponsiveValue } from '../responsive-grid/responsive-grid-spans.js';
+import { DashboardColumns } from './dashboard-grid.utils.js';
+export type DashboardGridProps = Omit<ComponentProps<'div'>, 'children'> & {
+    /** `DashboardTile`s, written directly here (not inside a fragment or a wrapper): each one's `id` places it in the order. */
+    children: ReactNode;
+    /**
+     * The tiles' ids in display order (controlled). A tile `order` does not
+     * list goes after the listed ones, in the order it is written; an id with
+     * no tile is ignored. The app stores it (a user's saved layout) and
+     * passes it back from `onOrderChange`.
+     */
+    order?: string[];
+    /** The initial order when `order` is not controlled. Default: the order the tiles are written in. */
+    defaultOrder?: string[];
+    /** Called with the whole new order after a drop, a keyboard move or a move button. */
+    onOrderChange?: (order: string[]) => void;
+    /** Edit mode (controlled): tiles show a handle and can be reordered. */
+    editing?: boolean;
+    /** Edit mode at first, when `editing` is not controlled. */
+    defaultEditing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    /** The "Edit layout" / "Done" button above the grid. `false` hides it, for an app that toggles `editing` itself. Default `true`. */
+    editButton?: boolean;
+    /**
+     * Columns by container width: `{ base: 1, md: 2, xl: 4 }`, the default
+     * (`md` is 768px, `xl` 1280px). A tile's span is held to the columns of
+     * its width.
+     */
+    columns?: DashboardColumns;
+    /** The space between tiles: `sm` 0.5rem, `md` 1rem (default), `lg` 1.5rem. */
+    gap?: ResponsiveGridGap;
+    /** Fill the holes a wide tile leaves by moving later, smaller tiles up. The visual order then differs from the tab order. */
+    dense?: boolean;
+};
+export type DashboardTileProps = Omit<ComponentProps<'div'>, 'title' | 'id'> & {
+    /** Names the tile in the order (`order` lists these ids). Unique in the grid. */
+    id: string;
+    /** A heading at the top of the tile (an `h3`), also its accessible name and the name of its handle. */
+    title?: ReactNode;
+    /** Columns the tile covers: a number, `'full'`, or one per width. Held to the grid's columns. */
+    span?: ResponsiveValue<GridSpan>;
+    /** Rows the tile covers (1 to 4), or one per width. */
+    rowSpan?: ResponsiveValue<GridRowSpan>;
+    /** Draws no card (border, background, padding) of its own: for a child that is a card already (`StatCard`, `Card`). */
+    plain?: boolean;
+    /** Names the tile for its handle and the announcements when `title` is not text. */
+    label?: string;
+};

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

@@ -0,0 +1,70 @@
+import { GridSpan, ResponsiveValue } from '../responsive-grid/responsive-grid-spans.js';
+/** How many columns the grid has at each container width (`md` 768px, `xl` 1280px). */
+export type DashboardColumns = {
+    base?: 1 | 2;
+    md?: 1 | 2 | 3 | 4 | 5 | 6;
+    xl?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+export declare const DEFAULT_COLUMNS: Required<DashboardColumns>;
+/** The grid's columns; literal classes so Tailwind sees them. */
+export declare const COLUMNS_CLASS: {
+    readonly base: {
+        readonly 1: "grid-cols-1";
+        readonly 2: "grid-cols-2";
+    };
+    readonly md: {
+        readonly 1: "@3xl:grid-cols-1";
+        readonly 2: "@3xl:grid-cols-2";
+        readonly 3: "@3xl:grid-cols-3";
+        readonly 4: "@3xl:grid-cols-4";
+        readonly 5: "@3xl:grid-cols-5";
+        readonly 6: "@3xl:grid-cols-6";
+    };
+    readonly xl: {
+        readonly 1: "@7xl:grid-cols-1";
+        readonly 2: "@7xl:grid-cols-2";
+        readonly 3: "@7xl:grid-cols-3";
+        readonly 4: "@7xl:grid-cols-4";
+        readonly 5: "@7xl:grid-cols-5";
+        readonly 6: "@7xl:grid-cols-6";
+    };
+};
+export type ReorderDirection = 'earlier' | 'later' | 'first' | 'last';
+/**
+ * The displayed order: the ids of `order` that are still tiles, then the
+ * tiles `order` does not know yet (a new tile), in the order they were
+ * written. A repeated id counts once.
+ */
+export declare function resolveOrder(order: readonly string[], ids: readonly string[]): string[];
+/** Moves one id to a position (clamped); the same array when nothing moves. */
+export declare function moveTo(order: string[], id: string, to: number): string[];
+/** Moves one id a step earlier or later, or to the first or last place. */
+export declare function moveTile(order: string[], id: string, direction: ReorderDirection): string[];
+export type TileKeyCommand = {
+    type: 'grab';
+} | {
+    type: 'move';
+    direction: ReorderDirection;
+} | {
+    type: 'drop';
+} | {
+    type: 'cancel';
+};
+/**
+ * A tile handle's keys. Space or Enter picks the tile up; then the arrows
+ * move it (left and up go earlier, right and down later; in a right-to-left
+ * page left goes later), Home and End send it first or last, Space, Enter or
+ * Tab drops it, Escape puts it back.
+ */
+export declare function tileKeyCommand(key: string, grabbed: boolean, rtl?: boolean): TileKeyCommand | null;
+/**
+ * A span held to the columns of its width, so a tile never adds implicit
+ * columns: `span: 3` in a two-column width covers two.
+ */
+export declare function clampSpan(span: ResponsiveValue<GridSpan> | undefined, columns: Required<DashboardColumns>): ResponsiveValue<GridSpan> | undefined;
+/** What a tile is called to a screen reader: `label`, a text `title`, else its `id`. */
+export declare const tileLabel: (props: {
+    id: string;
+    label?: string;
+    title?: unknown;
+}) => string;

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

@@ -0,0 +1,7 @@
+import { DashboardTileProps } from './dashboard-grid.types.js';
+/**
+ * DashboardTile - one tile of a `DashboardGrid`: a card with an optional
+ * title, covering `span` columns and `rowSpan` rows. In edit mode it shows a
+ * handle to move it. Outside a grid it is a plain card.
+ */
+export declare function DashboardTile({ id, title, span, rowSpan, plain, label, className, children, ...props }: DashboardTileProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export * from './dashboard-grid.js';
+export type { DashboardGridProps, DashboardTileProps, } from './dashboard-grid.types.js';
+export type { DashboardColumns } from './dashboard-grid.utils.js';
+export * from './dashboard-tile.js';

package/dist/lib/components/ui/layout/dashboard-grid/partials/dashboard-announcer.d.ts

@@ -0,0 +1,6 @@
+import { DashboardState } from '../dashboard-grid.state.js';
+/** Says where a tile went, for screen readers (WCAG 4.1.3). */
+export declare function DashboardAnnouncer({ note, labels, }: {
+    note: DashboardState['note'];
+    labels: Record<string, string>;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/dashboard-grid/partials/dashboard-edit-bar.d.ts

@@ -0,0 +1,11 @@
+import { DashboardGridContextValue } from '../dashboard-grid-context.js';
+/**
+ * The strip a tile shows in edit mode: its handle (drag with a pointer, or
+ * Space then arrows), and below 768px, in the narrow layout, the
+ * "earlier" and "later" buttons.
+ */
+export declare function DashboardEditBar({ grid, id, label, }: {
+    grid: DashboardGridContextValue;
+    id: string;
+    label: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/dashboard-grid/partials/dashboard-move-buttons.d.ts

@@ -0,0 +1,9 @@
+import { DashboardGridContextValue } from '../dashboard-grid-context.js';
+/** Earlier / later buttons for the narrow layout, where tiles stack: hidden from 768px. */
+export declare function DashboardMoveButtons({ grid, id, label, first, last, }: {
+    grid: DashboardGridContextValue;
+    id: string;
+    label: string;
+    first: boolean;
+    last: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/dashboard-grid/partials/dashboard-toolbar.d.ts

@@ -0,0 +1,7 @@
+/** The button that turns edit mode on and off, and the keys' hint it describes. */
+export declare function DashboardToolbar({ editing, onEditingChange, hintId, showButton, }: {
+    editing: boolean;
+    onEditingChange: (editing: boolean) => void;
+    hintId: string;
+    showButton: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { DashboardGridProps } from './dashboard-grid.types.js';
+import { DashboardGridContextValue } from './dashboard-grid-context.js';
+/**
+ * The grid's state: the order and the edit mode (each controlled or not), the
+ * tile picked up with the keyboard, and the note for the live region.
+ */
+export declare function useDashboardGrid(props: DashboardGridProps): {
+    context: DashboardGridContextValue;
+    editing: boolean;
+    setEditing: (next: boolean) => void;
+    order: string[];
+    elements: Map<string, import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>>;
+    labels: Record<string, string>;
+    note: {
+        kind: import('./dashboard-grid.state.js').DashboardNoteKind;
+        id: string;
+        order: string[];
+        seq: number;
+    } | null;
+    onDragEnd: ({ active, over }: import('@dnd-kit/core').DragEndEvent) => void;
+};

package/dist/lib/components/ui/layout/dashboard-grid/use-dashboard-moves.d.ts

@@ -0,0 +1,22 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { Dispatch } from 'react';
+import { DashboardAction, DashboardState } from './dashboard-grid.state.js';
+import { ReorderDirection } from './dashboard-grid.utils.js';
+import { DashboardFocusTarget } from './dashboard-grid-context.js';
+/**
+ * What changes the order: a step, a pick-up and drop, a cancel, a pointer
+ * drop. It also remembers which control of the moved tile takes the focus
+ * back (a tile that moves in the DOM can lose it).
+ */
+export declare function useDashboardMoves({ order, setOrder, state, dispatch, }: {
+    order: string[];
+    setOrder: (next: string[]) => void;
+    state: DashboardState;
+    dispatch: Dispatch<DashboardAction>;
+}): {
+    move: (id: string, direction: ReorderDirection, target: DashboardFocusTarget) => void;
+    drop: () => void;
+    onHandleKey: (id: string, key: string, rtl: boolean) => boolean;
+    onDragEnd: ({ active, over }: DragEndEvent) => void;
+    takeFocus: (id: string) => DashboardFocusTarget | null;
+};

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

@@ -13,6 +13,7 @@ export declare function useDocContext(): {
     actions: ReactNode;
     searchable: boolean;
     linkComponent: import('./types.js').DocLinkComponent | undefined;
+    frame: import('./use-doc.js').DocChrome;
     chrome: import('./types.js').DocChromeState;
     chromeActions: {
         setSidebarOpen: (payload: boolean) => void;
@@ -40,6 +41,7 @@ export declare function useOptionalDocContext(): {
     actions: ReactNode;
     searchable: boolean;
     linkComponent: import('./types.js').DocLinkComponent | undefined;
+    frame: import('./use-doc.js').DocChrome;
     chrome: import('./types.js').DocChromeState;
     chromeActions: {
         setSidebarOpen: (payload: boolean) => void;

package/dist/lib/components/ui/layout/doc/doc.d.ts

@@ -7,5 +7,10 @@ export type DocProps = UseDocOptions & {
 /**
  * Documentation site shell. Layout is CSS-first, matching the usual docs
  * breakpoints: one column below `md`, sidebar from `md`, TOC rail from `xl`.
+ *
+ * `chrome="embedded"` draws it inside `ActivityLayout` instead of over the whole
+ * viewport: no top bar of its own (the shell's header stays), the nav and the
+ * outline stick under that header and scroll with the shell, and a bottom
+ * navigation bar or floating toolbar is cleared.
  */
 export declare function Doc({ children, className, ...options }: DocProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/doc/index.d.ts

@@ -33,5 +33,5 @@ export { DocToc } from './partials/doc-toc.js';
 export type { DocTopbarProps } from './partials/doc-topbar.js';
 export { DocTopbar } from './partials/doc-topbar.js';
 export type { DocChromeState, DocLinkComponent, DocLinkProps, DocNavItem, DocPagerLink, DocSearchHit, DocTocItem, } from './types.js';
-export type { DocModel, UseDocOptions } from './use-doc.js';
+export type { DocChrome, DocModel, UseDocOptions } from './use-doc.js';
 export { useDoc } from './use-doc.js';

package/dist/lib/components/ui/layout/doc/partials/doc-embedded-bar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The row an embedded {@link Doc} keeps of its top bar: the phone's trigger for
+ * the page tree (a sheet, named apart from the shell's own "Menu"), the search
+ * and the `actions`. It is not a bar of its own: no fill below `md`, where it
+ * sticks under the shell's header.
+ */
+export declare function DocEmbeddedBar({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/doc/partials/doc-embedded.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Where an embedded Doc's nav and outline stick: under the shell's header, as
+ * `ActivityContent`'s aside does (`--ac-top` and `--ac-max` are set on the
+ * Doc's root, and the shell's scroll box or the window decides their value).
+ */
+export declare const EMBEDDED_STICK = "top-(--ac-top) h-(--ac-max) sm:top-(--ac-top) sm:h-(--ac-max)";
+/** The sheet's list clears a bottom bar and the home indicator. */
+export declare const EMBEDDED_SHEET_PAD = "pb-[calc(1rem+max(var(--nxgt-bottom-chrome, calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))),env(safe-area-inset-bottom)))]";

package/dist/lib/components/ui/layout/doc/use-doc.d.ts

@@ -1,6 +1,13 @@
 import { ReactNode } from 'react';
 import { DocLinkComponent, DocNavItem, DocPagerLink, DocTocItem } from './types.js';
+export type DocChrome = 'standalone' | 'embedded';
 export type UseDocOptions = {
+    /**
+     * `'standalone'` (default) owns the viewport: its top bar and full-height
+     * frame. `'embedded'` is drawn inside the app shell (`ActivityLayout`): no top
+     * bar, and the nav and outline stick under the shell's header.
+     */
+    chrome?: DocChrome;
     items: DocNavItem[];
     pathname: string;
     toc?: DocTocItem[];
@@ -13,7 +20,7 @@ export type UseDocOptions = {
     next?: DocPagerLink | null;
     defaultCollapsedIds?: string[];
 };
-export declare function useDoc({ items, pathname, toc, brand, actions, searchable, onNavigate, linkComponent, previous, next, defaultCollapsedIds, }: UseDocOptions): {
+export declare function useDoc({ chrome: frame, items, pathname, toc, brand, actions, searchable, onNavigate, linkComponent, previous, next, defaultCollapsedIds, }: UseDocOptions): {
     items: DocNavItem[];
     pathname: string;
     toc: DocTocItem[];
@@ -21,6 +28,7 @@ export declare function useDoc({ items, pathname, toc, brand, actions, searchabl
     actions: ReactNode;
     searchable: boolean;
     linkComponent: DocLinkComponent | undefined;
+    frame: DocChrome;
     chrome: import('./types.js').DocChromeState;
     chromeActions: {
         setSidebarOpen: (payload: boolean) => void;

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

@@ -0,0 +1,14 @@
+import { EditorLayoutProps } from './editor-layout.types.js';
+import { EditorLayoutPropertiesTrigger, EditorLayoutStartTrigger } from './partials/editor-layout-triggers.js';
+/**
+ * The editor page: a toolbar, a canvas that scrolls on its own, a properties
+ * panel at the end and an optional panel at the start. Built on `PaneLayout`
+ * (container breakpoint at 768px): the properties are a bottom sheet below it.
+ * The pane comes after the canvas in the source, so Tab reaches the canvas first.
+ */
+export declare function EditorLayout({ children, toolbar, start, properties, ground, propertiesWidth, propertiesOpen, defaultPropertiesOpen, onPropertiesOpenChange, toolbarLabel, startLabel, propertiesLabel, canvasLabel, className, ref, ...props }: EditorLayoutProps): import("react").JSX.Element;
+export declare namespace EditorLayout {
+    var displayName: string;
+    var PropertiesTrigger: typeof EditorLayoutPropertiesTrigger;
+    var StartTrigger: typeof EditorLayoutStartTrigger;
+}

package/dist/lib/components/ui/layout/editor-layout/editor-layout.types.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps, ReactNode } from 'react';
+import { PaneLayoutPaneWidth } from '../pane-layout/internal.js';
+/** What the canvas sits on: the page `plain`, the tinted page `ground`, or a `neutral` grey. */
+export type EditorLayoutGround = 'plain' | 'tinted' | 'neutral';
+export interface EditorLayoutProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** The canvas: it scrolls on its own, in both directions. */
+    children: ReactNode;
+    /**
+     * The bar above the canvas. It stays in view while the canvas scrolls. Put
+     * `EditorLayout.PropertiesTrigger` (and `StartTrigger`) in it.
+     */
+    toolbar?: ReactNode;
+    /** The panel at the start (layers, outline): inline from 1280px, a side sheet below. */
+    start?: ReactNode;
+    /** The properties panel at the end: inline from 768px, a bottom sheet below. */
+    properties?: ReactNode;
+    /** What the canvas sits on. */
+    ground?: EditorLayoutGround;
+    /** Width of the inline properties panel: `sm` 16rem, `md` 20rem (default), `lg` 24rem. */
+    propertiesWidth?: PaneLayoutPaneWidth;
+    /** Whether the inline properties panel is shown. Below 768px the sheet starts closed. */
+    propertiesOpen?: boolean;
+    defaultPropertiesOpen?: boolean;
+    /** Called when the inline panel opens or closes (not for the phone sheet). */
+    onPropertiesOpenChange?: (open: boolean) => void;
+    /** Names of the regions; `material.editor-layout.*` by default. */
+    toolbarLabel?: string;
+    startLabel?: string;
+    propertiesLabel?: string;
+    canvasLabel?: string;
+}

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

@@ -0,0 +1,4 @@
+export * from './editor-layout.js';
+export type { EditorLayoutGround, EditorLayoutProps, } from './editor-layout.types.js';
+export { useEditorLayout } from './partials/editor-layout-context.js';
+export type { EditorLayoutTriggerProps } from './partials/editor-layout-triggers.js';

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { EditorLayoutGround } from '../editor-layout.types.js';
+import { useEditorLayoutNames } from './use-editor-layout-names.js';
+/** The toolbar above a row of the optional start panel and the canvas. */
+export declare function EditorLayoutBody({ toolbar, start, ground, names, children, }: {
+    toolbar: ReactNode;
+    start: ReactNode;
+    ground: EditorLayoutGround;
+    names: ReturnType<typeof useEditorLayoutNames>;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/editor-layout/partials/editor-layout-canvas.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { EditorLayoutGround } from '../editor-layout.types.js';
+/** The canvas: a region that scrolls on its own, so the keyboard can reach it. */
+export declare function EditorLayoutCanvas({ ground, label, children, }: {
+    ground: EditorLayoutGround;
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+export interface EditorLayoutContextProps {
+    hasStart: boolean;
+    hasProperties: boolean;
+    /** Whether the start panel is a sheet now (the layout is narrower than 1280px). */
+    startSheet: boolean;
+    startOpen: boolean;
+    setStartOpen: (open: boolean) => void;
+    startLabel: string;
+}
+export declare const EditorLayoutContext: import('react').Context<EditorLayoutContextProps | undefined>;
+/** The start panel's state; for the properties panel use `usePaneLayout`. */
+export declare function useEditorLayout(): EditorLayoutContextProps;

package/dist/lib/components/ui/layout/editor-layout/partials/editor-layout-start.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+/**
+ * The start panel: inline from 1280px (hidden by CSS before hydrating), a side
+ * sheet below, opened by `EditorLayout.StartTrigger`.
+ */
+export declare function EditorLayoutStart({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/editor-layout/partials/editor-layout-triggers.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../../../actions/button/button.js';
+export type EditorLayoutTriggerProps = Omit<ButtonProps, 'children'> & {
+    /** The label; its default is the panel's name. Below 768px only the icon shows. */
+    children?: ReactNode;
+};
+/** Opens the properties: a bottom sheet on a phone, the inline panel otherwise. */
+export declare function EditorLayoutPropertiesTrigger({ children, onClick, className, ...props }: EditorLayoutTriggerProps): import("react").JSX.Element | null;
+/** Opens the start panel as a side sheet; hidden once the panel is inline (1280px). */
+export declare function EditorLayoutStartTrigger({ children, onClick, className, ...props }: EditorLayoutTriggerProps): import("react").JSX.Element | null;

package/dist/lib/components/ui/layout/editor-layout/partials/use-editor-layout-names.d.ts

@@ -0,0 +1,8 @@
+import { EditorLayoutProps } from '../editor-layout.types.js';
+/** The names of the four regions: the app's, else `material.editor-layout.*`. */
+export declare function useEditorLayoutNames(p: Pick<EditorLayoutProps, 'toolbarLabel' | 'startLabel' | 'propertiesLabel' | 'canvasLabel'>): {
+    toolbar: string;
+    start: string;
+    properties: string;
+    canvas: string;
+};

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

@@ -0,0 +1,21 @@
+interface Options {
+    hasStart: boolean;
+    open?: boolean;
+    defaultOpen: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * The properties panel has two open states: the inline panel's (open by
+ * default, the app's to control) and the phone sheet's (closed by default, so
+ * a phone never loads with a sheet over the canvas). Both widths are read on
+ * the layout itself, after hydrating; the server renders the desktop markup.
+ */
+export declare function useEditorLayoutState(o: Options): {
+    rootRef: import('react').RefObject<HTMLDivElement | null>;
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    startSheet: boolean;
+    startOpen: boolean;
+    setStartOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+};
+export {};

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

@@ -1,13 +1,20 @@
 export * from './account-menu/index.js';
 export * from './app-bar/index.js';
+export * from './app-search/index.js';
 export * from './app-shell/index.js';
 export * from './auth-card/index.js';
 export * from './background/index.js';
 export * from './breadcrumb/index.js';
+export * from './dashboard-grid/index.js';
 export * from './doc/index.js';
+export * from './editor-layout/index.js';
 export * from './hero/index.js';
+export * from './landing/index.js';
 export * from './list-details-layout/index.js';
+export * from './navigation-bar/index.js';
+export * from './navigation-drawer/index.js';
 export * from './navigation-rail/index.js';
+export * from './navigation-toolbar/index.js';
 export * from './pager/index.js';
 export * from './pane-layout/index.js';
 export * from './record-page/index.js';
@@ -15,6 +22,7 @@ export * from './resizable/index.js';
 export * from './responsive-grid/index.js';
 export * from './section-columns/index.js';
 export * from './see-also/index.js';
+export * from './settings-layout/index.js';
 export * from './sidebar/index.js';
 export * from './skip-link/index.js';
 export * from './stepper/index.js';
@@ -22,3 +30,4 @@ export * from './steps/index.js';
 export * from './sticky-action-bar/index.js';
 export * from './thread-layout/index.js';
 export * from './toc/index.js';
+export * from './top-nav/index.js';

package/dist/lib/components/ui/layout/landing/index.d.ts

@@ -0,0 +1,6 @@
+export * from './landing-layout.js';
+export type { LandingLayoutProps } from './landing-layout.types.js';
+export * from './landing-section.js';
+export type { LandingSectionAlign, LandingSectionProps, LandingSectionTone, LandingSectionWidth, } from './landing-section.types.js';
+export * from './site-footer.js';
+export type { SiteFooterGroup, SiteFooterLink, SiteFooterProps, } from './site-footer.types.js';

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

@@ -0,0 +1,15 @@
+import { LandingLayoutProps } from './landing-layout.types.js';
+/**
+ * The frame of a public marketing or landing page, outside the app shell: a
+ * top bar (the brand, the `TopNav` links from 768px or a drawer below, and
+ * your actions), a `main` holding the hero then the sections, and the footer.
+ * Sections are `LandingSection`s, the footer a `SiteFooter`. The bar sticks
+ * unless `stickyHeader={false}`; in dark the bar and the footer take the card
+ * surface, one tone above the page.
+ *
+ * Needs a React Router context, like `TopNav`.
+ */
+export declare function LandingLayout({ items, linkComponent, logo, name, brand, brandHref, actions, hero, footer, stickyHeader, navigationLabel, className, children, ...props }: LandingLayoutProps): import("react").JSX.Element;
+export declare namespace LandingLayout {
+    var displayName: string;
+}

package/dist/lib/components/ui/layout/landing/landing-layout.types.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps, ReactNode } from 'react';
+import { AppLogo, AppShellLinkComponent, MenuItem } from '../app-shell/types.js';
+export type LandingLayoutProps = {
+    /** The destinations of the top bar (the top level only); on a phone the same links open in a drawer. */
+    items?: MenuItem[];
+    linkComponent?: AppShellLinkComponent;
+    /** The brand's logo (an image URL, `{ src, alt }` or a node); with `name`, both show. */
+    logo?: AppLogo;
+    /** The brand's name; also the brand link's accessible name. */
+    name?: string;
+    /** Replaces the logo and name. It is placed in a link to `brandHref` and rendered twice (in the bar and at the top of the phone's drawer): give it an accessible name, and keep it free of ids and state. */
+    brand?: ReactNode;
+    /** Where the brand links to. @default "/" */
+    brandHref?: string;
+    /** The end of the top bar: a sign-in link, a primary button, a theme toggle. Shown at every width. */
+    actions?: ReactNode;
+    /** The first band, usually `<LandingSection variant="hero">`. */
+    hero?: ReactNode;
+    /** A `SiteFooter`. */
+    footer?: ReactNode;
+    /** Keeps the top bar in view while the page scrolls. @default true */
+    stickyHeader?: boolean;
+    /** The top bar's navigation name, already translated. @default "Navigation" */
+    navigationLabel?: string;
+    /** The sections, in order: `LandingSection`s. */
+    children?: ReactNode;
+} & Omit<ComponentProps<'div'>, 'children'>;

package/dist/lib/components/ui/layout/landing/landing-section.d.ts

@@ -0,0 +1,12 @@
+import { LandingSectionProps } from './landing-section.types.js';
+/**
+ * One band of a landing page: an intro (eyebrow, title, description, actions)
+ * over its content, on a surface from the theme's tokens, the content centred
+ * at the chosen width. A `section` named by its title (a region); without a
+ * title it is a plain band. `variant="hero"` draws the first band, with the
+ * page's `h1`.
+ */
+export declare function LandingSection({ eyebrow, title, description, actions, tone, width, align, variant, media, className, children, ...props }: LandingSectionProps): import("react").JSX.Element;
+export declare namespace LandingSection {
+    var displayName: string;
+}

package/dist/lib/components/ui/layout/landing/landing-section.types.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps, ReactNode } from 'react';
+/** The band's surface: the page, a calm tint, the page ground or the primary container. */
+export type LandingSectionTone = 'background' | 'muted' | 'ground' | 'primary';
+/** The content's width: `narrow` 48rem, `medium` 64rem, `default` 80rem, `full` the whole band. */
+export type LandingSectionWidth = 'narrow' | 'medium' | 'default' | 'full';
+export type LandingSectionAlign = 'start' | 'center';
+export type LandingSectionProps = {
+    /** A short line above the title. */
+    eyebrow?: ReactNode;
+    /** The section's heading; it names the region. */
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Buttons or links under the description. */
+    actions?: ReactNode;
+    /**
+     * A visual beside the intro from `lg` (an illustration, a product card),
+     * under it on a phone and a tablet. Meant for a hero; decorative content
+     * should be `aria-hidden`.
+     */
+    media?: ReactNode;
+    /** The surface of the band. @default "background" */
+    tone?: LandingSectionTone;
+    /** @default "default" */
+    width?: LandingSectionWidth;
+    /** Where the intro sits. @default "start" */
+    align?: LandingSectionAlign;
+    /**
+     * `hero` is the first band of the page: its title is the page's `h1`, set
+     * larger, with more room around. @default "section" (an `h2`)
+     */
+    variant?: 'section' | 'hero';
+} & Omit<ComponentProps<'section'>, 'title'>;

package/dist/lib/components/ui/layout/landing/landing.classes.d.ts

@@ -0,0 +1,20 @@
+import { LandingSectionAlign, LandingSectionTone, LandingSectionWidth } from './landing-section.types.js';
+/** The page's column: header, sections and footer share its edges. */
+export declare const LANDING_GUTTER = "px-4 sm:px-6 lg:px-8";
+/** The widths a section's content takes, centred. */
+export declare const LANDING_WIDTH: Record<LandingSectionWidth, string>;
+/**
+ * The band's surface, from the existing tokens. The primary container is the
+ * theme's tonal primary; its text stays `foreground` so the contrast holds in
+ * every theme, light and dark.
+ */
+export declare const LANDING_TONE: Record<LandingSectionTone, string>;
+/** The copy under a title: muted on a calm surface, near-foreground on the tinted one. */
+export declare const LANDING_DESCRIPTION: Record<LandingSectionTone, string>;
+export declare const LANDING_ALIGN: Record<LandingSectionAlign, string>;
+/**
+ * The header and footer chrome. Light: the page's own surface (the footer a
+ * calm tint of it). Dark: the card surface, one tone above the page.
+ */
+export declare const LANDING_HEADER_SURFACE = "border-b border-border/60 bg-background/90 backdrop-blur-md dark:bg-card/90";
+export declare const LANDING_FOOTER_SURFACE = "border-t border-border/60 bg-muted/40 dark:bg-card";

package/dist/lib/components/ui/layout/landing/partials/landing-header.d.ts

@@ -0,0 +1,11 @@
+import { LandingLayoutProps } from '../landing-layout.types.js';
+type LandingHeaderProps = Pick<LandingLayoutProps, 'items' | 'linkComponent' | 'logo' | 'name' | 'brand' | 'brandHref' | 'actions' | 'navigationLabel'> & {
+    sticky: boolean;
+};
+/**
+ * The top bar of a landing page: the brand, the `TopNav` from 768px (a drawer
+ * opened by a menu button below it) and the actions. Which of the two shows is
+ * decided by breakpoint classes, so the server and the browser draw the same.
+ */
+export declare function LandingHeader({ items, linkComponent, logo, name, brand, brandHref, actions, navigationLabel, sticky, }: LandingHeaderProps): import("react").JSX.Element;
+export {};