@nxgt/material 3.57.0 → 3.59.0

package/dist/lib/components/ui/fields/opening-hours/partials/dialog-actions.d.ts

@@ -0,0 +1,13 @@
+import { ButtonVariant } from '../../../actions/button/button.js';
+type DialogActionsProps = {
+    /** An existing range is edited: Remove shows when `onDelete` is given. */
+    isEdit: boolean;
+    onDelete?: () => void;
+    onCancel: () => void;
+    onSave: () => void;
+    disabled?: boolean;
+    cancelVariant: ButtonVariant;
+};
+/** The Remove, Cancel and Save buttons of the hours dialog. */
+export declare function DialogActions({ isEdit, onDelete, onCancel, onSave, disabled, cancelVariant, }: DialogActionsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/dialog-fields.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { OpeningHour } from '../models.js';
+type DialogFieldsProps = {
+    draft: OpeningHour;
+    setDraft: Dispatch<SetStateAction<OpeningHour>>;
+    days: {
+        label: string;
+        value: string;
+    }[];
+    disabled?: boolean;
+};
+/** The day, closed switch and opening / closing times of the hours dialog. */
+export declare function DialogFields({ draft, setDraft, days, disabled, }: DialogFieldsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/hours-actions.d.ts

@@ -0,0 +1,9 @@
+type HoursActionsProps = {
+    /** Given, "Add All Days" shows. */
+    onAddAll?: () => void;
+    onAdd?: () => void;
+    disabled?: boolean;
+};
+/** The "Add All Days" and "Add Opening Hours" buttons of the list header. */
+export declare function HoursActions({ onAddAll, onAdd, disabled }: HoursActionsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/hours-tile.d.ts

@@ -0,0 +1,11 @@
+import { OpeningHour } from '../models.js';
+type HoursTileProps = {
+    item: OpeningHour;
+    /** Given, the tile has an edit button. */
+    onEdit?: () => void;
+    disabled?: boolean;
+    editLabel: string;
+};
+/** One range of the read-only list: its day, and its hours or "Closed all day". */
+export declare function HoursTile({ item, onEdit, disabled, editLabel, }: HoursTileProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/week-rows.d.ts

@@ -0,0 +1,14 @@
+import { HoursEditorState } from '../use-hours-editor.js';
+import { HoursText } from '../use-hours-text.js';
+type WeekRowsProps = {
+    text: HoursText;
+    editor: HoursEditorState;
+    /** The week's day indexes in display order. */
+    order: number[];
+    /** A phone shows summary rows that open the sheet. */
+    phone: boolean;
+    disabled?: boolean;
+};
+/** The week as a list: a row for each day, or on a phone a summary row. */
+export declare function WeekRows({ text, editor, order, phone, disabled, }: WeekRowsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/use-hours-editor.d.ts

@@ -23,4 +23,5 @@ export declare function useHoursEditor({ value, onValueChange, text }: Options):
     setDay: (index: number, day: Day) => void;
     copy: (from: number, to: number[]) => void;
 };
+export type HoursEditorState = ReturnType<typeof useHoursEditor>;
 export {};

package/dist/lib/components/ui/fields/phone-field/phone-country-list.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+type PhoneCountryListProps = {
+    /** The selected country's ISO code. */
+    value: string;
+    searchRef: Ref<HTMLInputElement>;
+    onSelect: (iso: string) => void;
+};
+/** The searchable list of countries, a flag, a name and a dial code each. */
+export declare function PhoneCountryList({ value, searchRef, onSelect, }: PhoneCountryListProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/phone-field/phone-dial-button.d.ts

@@ -0,0 +1,10 @@
+import { PhoneCountry } from './countries.js';
+/**
+ * The country code pill: the flag, `+33` left to right and a small chevron
+ * that turns over while open. It is the `PopoverTrigger` itself, rendered
+ * inside the menu's `Popover`.
+ */
+export declare function PhoneDialButton({ country, disabled, }: {
+    country: PhoneCountry;
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/phone-field/phone-number-input.d.ts

@@ -0,0 +1,19 @@
+import { FocusEventHandler } from 'react';
+type PhoneNumberInputProps = {
+    id: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    /** The id of the help text, when there is one. */
+    describedBy?: string;
+    placeholder?: string;
+    /** The selected country's ISO code; its example is the default placeholder. */
+    iso: string;
+    draft: string;
+    onInput: (raw: string) => void;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+};
+/** The national-number input of a phone field, inside its field box. */
+export declare function PhoneNumberInput({ id, name, disabled, required, error, describedBy, placeholder, iso, draft, onInput, onBlur, }: PhoneNumberInputProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/phone-field/use-phone-value.d.ts

@@ -0,0 +1,17 @@
+type Options = {
+    value?: string | null;
+    defaultValue: string | null;
+    defaultCountry: string;
+    onChange?: (value: string | null) => void;
+};
+/**
+ * The country and the national digits a phone field shows, and the E.164
+ * number it emits, controlled or not.
+ */
+export declare function usePhoneValue({ value, defaultValue, defaultCountry, onChange, }: Options): {
+    iso: string;
+    draft: string;
+    input: (raw: string) => void;
+    selectCountry: (next: string) => void;
+};
+export {};

package/dist/lib/components/ui/fields/postal-address/postal-address-dialog-actions.d.ts

@@ -0,0 +1,14 @@
+import { ButtonVariant } from '../../actions/button/button.js';
+type PostalAddressDialogActionsProps = {
+    /** An existing address is edited: Remove shows when `onDelete` is given. */
+    isEdit: boolean;
+    onDelete?: () => void;
+    onCancel: () => void;
+    onSave: () => void;
+    canSave: boolean;
+    disabled?: boolean;
+    cancelVariant: ButtonVariant;
+};
+/** The Remove, Cancel and Save buttons of the address dialog. */
+export declare function PostalAddressDialogActions({ isEdit, onDelete, onCancel, onSave, canSave, disabled, cancelVariant, }: PostalAddressDialogActionsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/postal-address/postal-address-dialog-fields.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+import { PostalAddressFieldValue } from './models.js';
+type PostalAddressDialogFieldsProps = {
+    draft: PostalAddressFieldValue;
+    setDraft: Dispatch<SetStateAction<PostalAddressFieldValue>>;
+    disabled?: boolean;
+};
+/** The street, city, region, postal code and country inputs of the address dialog. */
+export declare function PostalAddressDialogFields({ draft, setDraft, disabled, }: PostalAddressDialogFieldsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/rating-field/rating-color.d.ts

@@ -0,0 +1,4 @@
+/** The tone of the filled stars. */
+export declare const ratingColor: (props?: ({
+    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/ui/fields/rating-field/rating-field.d.ts

@@ -1,8 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
-declare const ratingColor: (props?: ({
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+import { ratingColor } from './rating-color.js';
 export type RatingFieldProps = {
     label?: ReactNode;
     helperText?: ReactNode;
@@ -20,4 +18,3 @@ export type RatingFieldProps = {
     onChange?: (value: number) => void;
 } & VariantProps<typeof ratingColor>;
 export declare function RatingField({ label, helperText, error, required, disabled, readOnly, className, name, id, max, value, defaultValue, allowClear, color, onChange, }: RatingFieldProps): import("react").JSX.Element;
-export {};

package/dist/lib/components/ui/fields/rating-field/rating-star.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import { ratingColor } from './rating-color.js';
+type RatingStarProps = {
+    star: number;
+    max: number;
+    /** The star is the current rating. */
+    checked: boolean;
+    /** The star is lit: at or below the hovered or current rating. */
+    filled: boolean;
+    locked?: boolean;
+    disabled?: boolean;
+    /** The radio group's name. */
+    name: string;
+    color: VariantProps<typeof ratingColor>['color'];
+    onHover: (star: number | null) => void;
+    /** Rate `star`, or `0` to clear when the current star is clicked again. */
+    onRate: (value: number) => void;
+    allowClear: boolean;
+};
+/** One star: a radio input under a lit or unlit icon. */
+export declare function RatingStar({ star, max, checked, filled, locked, disabled, name, color, onHover, onRate, allowClear, }: RatingStarProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/rating-field/use-rating.d.ts

@@ -0,0 +1,16 @@
+type Options = {
+    value?: number;
+    defaultValue: number;
+    max: number;
+    locked?: boolean;
+    onChange?: (value: number) => void;
+};
+/** The rating a field holds, controlled or not, and the star under the pointer. */
+export declare function useRating({ value, defaultValue, max, locked, onChange, }: Options): {
+    current: number;
+    display: number;
+    stars: number[];
+    setHover: import('react').Dispatch<import('react').SetStateAction<number | null>>;
+    emit: (next: number) => void;
+};
+export {};

package/dist/lib/components/ui/fields/search-field/search-box.d.ts

@@ -0,0 +1,11 @@
+import { InputProps } from '../../primitives/input/input.js';
+import { useSearchValue } from './use-search-value.js';
+type SearchBoxProps = Omit<InputProps, 'type' | 'value' | 'defaultValue'> & {
+    search: ReturnType<typeof useSearchValue>;
+    error?: boolean;
+    loading: boolean;
+    shortcut?: string;
+};
+/** The field box of a search field: the lead icon, the input and its end. */
+export declare function SearchBox({ search, error, loading, shortcut, placeholder, disabled, ...props }: SearchBoxProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/search-field/use-search-value.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent, KeyboardEvent } from 'react';
+type Options = {
+    value?: string | number | readonly string[];
+    defaultValue?: string | number | readonly string[];
+    debounceMs: number;
+    onValueChange?: (value: string) => void;
+    onClear?: () => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+};
+/**
+ * The text of a search field, controlled or not, with `onValueChange`
+ * debounced; the handlers of its input (typing, Escape) and the clear action.
+ */
+export declare function useSearchValue({ value: valueProp, defaultValue, debounceMs, onValueChange, onClear, onChange, onKeyDown, }: Options): {
+    value: string;
+    clear: () => void;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+};
+export {};

package/dist/lib/components/ui/fields/slider/slider-control-row.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+/** The control between its `leading` and `trailing` content, and the help text under it. */
+export declare function SliderControlRow({ leading, trailing, helperText, helperId, error, children, }: {
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    helperText?: ReactNode;
+    helperId: string;
+    error?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/slider/slider-group-props.d.ts

@@ -0,0 +1,16 @@
+/** The id of a slider field's help text, from the id of its label. */
+export declare const sliderHelperId: (labelId: string) => string;
+/**
+ * A range is one value in two parts: the field is a group named by its
+ * Label and described by its helper text, so two range sliders are told
+ * apart and an error is heard. A single value needs no group.
+ */
+export declare function sliderGroupProps(hasLabel: boolean, values: number[], labelId: string, hasHelper: boolean): {
+    role?: undefined;
+    'aria-labelledby'?: undefined;
+    'aria-describedby'?: undefined;
+} | {
+    role: "group";
+    'aria-labelledby': string;
+    'aria-describedby': string | undefined;
+};

package/dist/lib/components/ui/fields/slider/slider-group.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+/**
+ * The root of a labelled slider field. A range is one value in two parts:
+ * the field is then a group named by its Label and described by its helper
+ * text, so two range sliders are told apart and an error is heard.
+ */
+export declare function SliderGroup({ labelId, hasLabel, hasHelper, values, className, children, }: {
+    labelId: string;
+    hasLabel: boolean;
+    hasHelper: boolean;
+    values: number[];
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/slider/slider-horizontal.d.ts

@@ -0,0 +1,3 @@
+import { SliderProps } from './slider.js';
+/** The labelled slider: its header, the control between `leading` and `trailing`, and the help text. */
+export declare function HorizontalSlider({ leading, trailing, label, helperText, error, required, ticks, showReadout, value, defaultValue, onValueChange, min, max, step, disabled, className, ref, orientation: _orientation, ...props }: SliderProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/slider/slider-vertical.d.ts

@@ -0,0 +1,3 @@
+import { SliderProps } from './slider.js';
+/** A vertical slider: the control alone, its root is the field's. */
+export declare function VerticalSlider({ label, error, required, value, defaultValue, onValueChange, min, max, step, orientation, disabled, className, ref, leading: _leading, trailing: _trailing, helperText: _helperText, ticks: _ticks, showReadout: _showReadout, ...props }: SliderProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/slider/slider.d.ts

@@ -10,7 +10,7 @@ export type SliderProps = {
     ticks?: boolean | number;
     showReadout?: boolean;
 } & Omit<ComponentProps<typeof SliderControl>, 'hiddenLabel' | 'labelId'>;
-export declare function Slider({ leading, trailing, label, helperText, error, required, ticks, showReadout, value, defaultValue, onValueChange, min, max, step, orientation, disabled, className, ref, ...props }: SliderProps): import("react").JSX.Element;
+export declare function Slider(props: SliderProps): import("react").JSX.Element;
 /**
  * The labelled `Slider` under `@nxgt/material-vue`'s name, so code reads the
  * same in both libraries. Same component, same props. The names may align

package/dist/lib/components/ui/fields/slider/use-slider-value.d.ts

@@ -0,0 +1,10 @@
+/** The values of a slider, controlled or not, and the change that updates them. */
+export declare function useSliderValue({ value, defaultValue, min, onValueChange, }: {
+    value?: number[];
+    defaultValue?: number[];
+    min: number;
+    onValueChange?: (value: number[]) => void;
+}): {
+    current: number[];
+    emit: (next: number[]) => void;
+};

package/dist/lib/components/ui/fields/textarea-field/textarea-footer.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+type TextareaFooterProps = {
+    helperText?: ReactNode;
+    helperId: string;
+    error?: boolean;
+    /** The character count shows. */
+    countVisible: boolean;
+    length: number;
+    maxLength?: number;
+    overLimit: boolean;
+};
+/** The help text and the character count under a textarea. */
+export declare function TextareaFooter({ helperText, helperId, error, countVisible, length, maxLength, overLimit, }: TextareaFooterProps): import("react").JSX.Element | null;
+export {};

package/dist/lib/components/ui/layout/app-shell/activity-chrome.d.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+import { AppSidebarProps } from './app-sidebar.js';
 /** Under a `backdrop`: the chrome's fill, from a token (activity-backdrop.css). */
 export declare const CHROME_FILL = "bg-(--nxgt-backdrop-fill-chrome)";
 /** The app bar: that fill, frosted (the blur is 0 when the user asks for less
@@ -22,3 +24,18 @@ export declare const RAIL_BLEED = "-mt-[max(0.5rem,env(safe-area-inset-top))] pt
 export declare function ActivityGutterMask({ hasBackdrop }: {
     hasBackdrop: boolean;
 }): import("react").JSX.Element;
+/**
+ * The rail's lane: the fill runs the whole height of the page (the sidebar
+ * itself is sticky and only as tall as the viewport), out to the frame's edges.
+ * Translucent under a `backdrop`: the fill is a token (activity-backdrop.css).
+ * Flat, on the page's own colour: no radius, no shadow.
+ */
+export declare function ActivityRail({ hasBackdrop, ...sidebar }: {
+    hasBackdrop: boolean;
+} & Pick<AppSidebarProps, 'items' | 'brand' | 'logo' | 'name' | 'linkComponent' | 'align'>): import("react").JSX.Element;
+/** The frame around the rail and the column, under the gutter mask (a page that scrolls itself needs one). */
+export declare function ActivityFrame({ contained, hasBackdrop, children, }: {
+    contained: boolean;
+    hasBackdrop: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/activity-content-header.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, ReactNode } from 'react';
+/**
+ * The header card of a screen: its title, subtitle and actions. Not shown
+ * when the screen brings its own `header` or hides it, and with the title in
+ * the app bar an empty card is not left behind.
+ */
+export declare function ActivityContentHeader({ title, titleAs: Title, subtitle, actions, custom, titleInBar, }: {
+    title?: ReactNode;
+    titleAs: ElementType;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    /** The screen brings its own `header`, or hides the header. */
+    custom: boolean;
+    titleInBar: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/app-header-menu.d.ts

@@ -0,0 +1,5 @@
+import { AppHeaderProps } from './app-header.js';
+/** The phone's navigation: the menu button and the `Sheet` that holds the sidebar. */
+export declare function AppHeaderMenu({ items, linkComponent, brand, logo, name, context, menuOpen, onMenuOpenChange, showMenuIcon, }: Pick<AppHeaderProps, 'items' | 'linkComponent' | 'brand' | 'logo' | 'name' | 'context' | 'menuOpen' | 'onMenuOpenChange'> & {
+    showMenuIcon: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/band-boxes.d.ts

@@ -0,0 +1,3 @@
+import { Box } from './keep-shapes-inside.js';
+/** The band's strips: a sticky one (the app bar) is measured where it rests, above the first strip that scrolls. */
+export declare function bandBoxes(column: Element, layer: Box): Box[];

package/dist/lib/components/ui/layout/app-shell/collect-content.d.ts

@@ -0,0 +1,24 @@
+import { Box } from './keep-shapes-inside.js';
+/** The scroll offset of what scrolls the content under the layer: the page, or the region in a contained shell. */
+export declare function offsetOf(region: Element | null, anchored: boolean): {
+    x: number;
+    y: number;
+};
+/** Whether the region scrolls by itself (a contained shell), not the page. */
+export declare function scrollsInside(region: Element): boolean;
+/**
+ * The boxes of the text (its glyph runs), the controls and the surfaces (cards, tables, lists: whole) of the region, in the content's own coordinates.
+ * Both walks stop at `MAX_CONTENT_BOXES`: text past it is not collected.
+ */
+export declare function collectOccupied(region: Element, anchored?: boolean): Box[];
+/**
+ * The occupied boxes of a region, split: the surfaces (cards, lists, tables)
+ * apart from the text, controls and marked blocks, and the bands inside the
+ * region (an `EntityHeader`, the content header), which only a control-like
+ * glyph keeps clear of whole.
+ */
+export declare function collectContent(region: Element, anchored?: boolean): {
+    solid: Box[];
+    surfaces: Box[];
+    bands: Box[];
+};

package/dist/lib/components/ui/layout/app-shell/keep-inside-checker.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Marks the scenes `data-checked`, and `data-settled` one frame later: the fade
+ * of a dropped glyph starts then, so a glyph the first pass drops is never seen,
+ * not even for the length of the fade. A new mark replaces the pending frame;
+ * `stop` cancels it.
+ */
+export declare function checker(scenes: () => Element[]): {
+    mark(): void;
+    stop(): void;
+};

package/dist/lib/components/ui/layout/app-shell/page-title-focus.d.ts

@@ -0,0 +1,32 @@
+/** The part of `document` {@link pageStartTarget} reads. */
+type FocusRoot = Pick<Document, 'getElementById' | 'querySelector'>;
+/**
+ * Where a new page's focus belongs, so a screen reader starts it at its name
+ * (WCAG 2.4.3): the page's title in the app bar, else the layout's content
+ * region. Never a bare `<main>`.
+ *
+ * `titleId` is the layout's title `id` (`PageTitleContext`): `null` when the
+ * layout's bar shows no title, the content region is then the target. Left
+ * `undefined` when the caller does not know the layout (the menu sheet, which
+ * may outlive the layout it was in): the first page title in the document.
+ */
+export declare function pageStartTarget(titleId?: string | null, root?: FocusRoot): HTMLElement | null;
+/**
+ * Moves the focus to {@link pageStartTarget}; whether it got there.
+ */
+export declare function focusPageStart(titleId?: string | null, root?: FocusRoot): boolean;
+/**
+ * {@link usePageTitleFocus} for a given title `id`: one function for the
+ * component's whole life, which reads the latest `id` when called, so an
+ * effect that depends on it does not run again when the title comes or goes.
+ */
+export declare function usePageStartFocus(titleId: string | undefined): () => void;
+/**
+ * A function that moves focus to the page's title in the app bar, or to the
+ * layout's content region when the page has none, so a screen reader starts
+ * a new page at its name (WCAG 2.4.3). Call it from a component rendered
+ * inside {@link ActivityLayout}, after a navigation, not on the first load.
+ * The function is the same on every render.
+ */
+export declare function usePageTitleFocus(): () => void;
+export {};

package/dist/lib/components/ui/layout/app-shell/page-title-scope.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { UIMatch } from 'react-router';
+/**
+ * A route's `handle.title`: the page's title in the app bar. A node, or a
+ * function of the matched route (its `params`, its loader `data`) returning
+ * one, as `handle.breadcrumb` is.
+ */
+export type PageTitle<Data = unknown> = ReactNode | ((match: UIMatch<Data>) => ReactNode);
+/**
+ * The shape of a route's `handle` the shell reads. `Data` types the match's
+ * loader data: `satisfies AppShellHandle<Invoice>`.
+ */
+export type AppShellHandle<Data = unknown> = {
+    breadcrumb?: (match: UIMatch<Data>) => ReactNode;
+    title?: PageTitle<Data>;
+    /**
+     * A node rendered right after the page's title in the app bar, outside its
+     * `h1` (a record's `Switcher`). A node, or a function of the matched route
+     * returning one, as `title` is. The deepest route declaring one wins; the
+     * `ActivityLayout` `titleAfter` prop wins over it. Ignored while the bar
+     * shows no page title.
+     */
+    titleAfter?: PageTitle<Data>;
+};
+/**
+ * The title of the deepest matched route that declares a `handle.title`, or
+ * `undefined`. Read from the matches, which the router has before it renders
+ * anything: the title is in the server HTML, with no client-side effect.
+ */
+export declare function resolvePageTitle(matches: UIMatch[]): ReactNode;
+/**
+ * The `handle.titleAfter` of the deepest matched route that declares one, or
+ * `undefined`: resolved like {@link resolvePageTitle}, from the matches.
+ */
+export declare function resolvePageTitleAfter(matches: UIMatch[]): ReactNode;
+/**
+ * The `id` of the page's title in the app bar, or `undefined` when the bar
+ * shows none. `ActivityContent` leaves its own large title out while it does
+ * (a page has one `h1`), `<main>` is labelled by it, and
+ * {@link usePageTitleFocus} focuses it.
+ */
+export declare const PageTitleContext: import('react').Context<string | undefined>;
+/** The layout's page title and the `id` its `h1` and `<main>`'s label share. */
+export declare function usePageTitleScope(titleAfter?: ReactNode, headerContext?: ReactNode): {
+    pageTitle: ReactNode;
+    titleId: string | undefined;
+    pageTitleAfter: ReactNode;
+    headerContext: ReactNode;
+};
+/** Whether a slot gives something to render (`false`, `null`, `''` do not). */
+export declare function hasNode(node: ReactNode): boolean;
+/** The title the matched routes give the app bar, for the layout. */
+export declare function usePageTitle(): ReactNode;

package/dist/lib/components/ui/layout/app-shell/page-title.d.ts

@@ -1,85 +1,6 @@
 import { ReactNode } from 'react';
-import { UIMatch } from 'react-router';
-/**
- * A route's `handle.title`: the page's title in the app bar. A node, or a
- * function of the matched route (its `params`, its loader `data`) returning
- * one, as `handle.breadcrumb` is.
- */
-export type PageTitle<Data = unknown> = ReactNode | ((match: UIMatch<Data>) => ReactNode);
-/**
- * The shape of a route's `handle` the shell reads. `Data` types the match's
- * loader data: `satisfies AppShellHandle<Invoice>`.
- */
-export type AppShellHandle<Data = unknown> = {
-    breadcrumb?: (match: UIMatch<Data>) => ReactNode;
-    title?: PageTitle<Data>;
-    /**
-     * A node rendered right after the page's title in the app bar, outside its
-     * `h1` (a record's `Switcher`). A node, or a function of the matched route
-     * returning one, as `title` is. The deepest route declaring one wins; the
-     * `ActivityLayout` `titleAfter` prop wins over it. Ignored while the bar
-     * shows no page title.
-     */
-    titleAfter?: PageTitle<Data>;
-};
-/**
- * The title of the deepest matched route that declares a `handle.title`, or
- * `undefined`. Read from the matches, which the router has before it renders
- * anything: the title is in the server HTML, with no client-side effect.
- */
-export declare function resolvePageTitle(matches: UIMatch[]): ReactNode;
-/**
- * The `handle.titleAfter` of the deepest matched route that declares one, or
- * `undefined`: resolved like {@link resolvePageTitle}, from the matches.
- */
-export declare function resolvePageTitleAfter(matches: UIMatch[]): ReactNode;
-/**
- * The `id` of the page's title in the app bar, or `undefined` when the bar
- * shows none. `ActivityContent` leaves its own large title out while it does
- * (a page has one `h1`), `<main>` is labelled by it, and
- * {@link usePageTitleFocus} focuses it.
- */
-export declare const PageTitleContext: import('react').Context<string | undefined>;
-/** The layout's page title and the `id` its `h1` and `<main>`'s label share. */
-export declare function usePageTitleScope(titleAfter?: ReactNode, headerContext?: ReactNode): {
-    pageTitle: ReactNode;
-    titleId: string | undefined;
-    pageTitleAfter: ReactNode;
-    headerContext: ReactNode;
-};
-/** The part of `document` {@link pageStartTarget} reads. */
-type FocusRoot = Pick<Document, 'getElementById' | 'querySelector'>;
-/**
- * Where a new page's focus belongs, so a screen reader starts it at its name
- * (WCAG 2.4.3): the page's title in the app bar, else the layout's content
- * region. Never a bare `<main>`.
- *
- * `titleId` is the layout's title `id` (`PageTitleContext`): `null` when the
- * layout's bar shows no title, the content region is then the target. Left
- * `undefined` when the caller does not know the layout (the menu sheet, which
- * may outlive the layout it was in): the first page title in the document.
- */
-export declare function pageStartTarget(titleId?: string | null, root?: FocusRoot): HTMLElement | null;
-/**
- * Moves the focus to {@link pageStartTarget}; whether it got there.
- */
-export declare function focusPageStart(titleId?: string | null, root?: FocusRoot): boolean;
-/**
- * {@link usePageTitleFocus} for a given title `id`: one function for the
- * component's whole life, which reads the latest `id` when called, so an
- * effect that depends on it does not run again when the title comes or goes.
- */
-export declare function usePageStartFocus(titleId: string | undefined): () => void;
-/**
- * A function that moves focus to the page's title in the app bar, or to the
- * layout's content region when the page has none, so a screen reader starts
- * a new page at its name (WCAG 2.4.3). Call it from a component rendered
- * inside {@link ActivityLayout}, after a navigation, not on the first load.
- * The function is the same on every render.
- */
-export declare function usePageTitleFocus(): () => void;
-/** The title the matched routes give the app bar, for the layout. */
-export declare function usePageTitle(): ReactNode;
+export { focusPageStart, pageStartTarget, usePageStartFocus, usePageTitleFocus, } from './page-title-focus.js';
+export { type AppShellHandle, type PageTitle, PageTitleContext, resolvePageTitle, resolvePageTitleAfter, usePageTitle, usePageTitleScope, } from './page-title-scope.js';
 /**
  * The page's one `h1`, in the app bar: truncated with an ellipsis when long,
  * and only then carrying a `title` with the full text (as the header's
@@ -94,4 +15,3 @@ export declare function PageHeading({ children, id, after, context, }: {
     /** The small muted context line (the tenant), last in the row, from `md` up. */
     context?: ReactNode;
 }): import("react").JSX.Element | null;
-export {};