themelia-react-ui 2.0.0 → 2.0.2

package/dist/components/features/rich-text-editor/partials/inline-reference-node.d.ts

@@ -0,0 +1,19 @@
+import * as TiptapReact from '@tiptap/react';
+/**
+ * Inline references (`@person`, `#booking`) as one atomic editor token.
+ *
+ * The serialized HTML is the mentions contract written by `buildMentionHtml`
+ * and read by `parseMentionsFromHtml`/`MentionContent`:
+ *
+ *   <span class="rsc-mention" data-ref-id="…" data-ref-kind="…" data-ref-tone="…"
+ *         contenteditable="false">@Label</span>
+ *
+ * Without this node the editor schema had no place for that span, so a picked
+ * mention collapsed into plain text. Inside the editor the token keeps the
+ * `.rsc-mention` hook, so mention-chip.css (the inline Badge utilities and
+ * shared tone tints) draws it exactly as it draws serialized chips; it is
+ * selectable as a unit, and Backspace/Delete remove it in one keystroke.
+ */
+export declare const inlineReferenceChipClassName = "rsc-mention inline-reference--chip";
+/** Created on first use, so the optional Tiptap runtime is only touched by the editor that needs it. */
+export declare function getInlineReferenceNode(): TiptapReact.Node;

package/dist/components/features/rich-text-editor/rich-text-editor.recipes.d.ts

@@ -2,6 +2,12 @@
 export declare const richTextEditorRecipes: {
     readonly source: string;
     readonly frame: "min-w-0 overflow-hidden border-input bg-background rounded-inner border";
-    readonly disabled: "opacity-70";
+    readonly disabled: "opacity-50";
+    readonly disabledControl: "disabled:opacity-100 aria-disabled:opacity-100";
     readonly content: "h-full [&_.ProseMirror]:h-full [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none";
+    readonly bodyMinHeight: {
+        readonly control: "min-h-control-sm";
+        readonly field: "min-h-textarea-sm";
+        readonly document: "min-h-48";
+    };
 };

package/dist/components/features/rich-text-editor/rich-text-editor.strings.d.ts

@@ -28,5 +28,19 @@ export interface RichTextEditorStrings {
         words: string;
         max: string;
     };
+    /** Image insertion, upload and description copy; `{{name}}` is the file name. */
+    images: {
+        insert: string;
+        uploading: string;
+        failed: string;
+        unsupported: string;
+        tooLarge: string;
+        cancel: string;
+        retry: string;
+        remove: string;
+        descriptionLabel: string;
+        descriptionHint: string;
+        removeImage: string;
+    };
 }
 export declare const defaultRichTextEditorStrings: RichTextEditorStrings;

package/dist/components/features/rich-text-editor/rich-text-editor.types.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, ReactNode } from 'react';
 import type * as TiptapReact from '@tiptap/react';
 import type { StringsProp } from '../../../lib/strings';
+import type { RichTextImageRendering } from '../../typography/rich-text';
 import type { RichTextEditorStrings } from './rich-text-editor.strings';
 export type TiptapEditor = NonNullable<ReturnType<typeof TiptapReact.useEditor>>;
 /**
@@ -52,9 +53,47 @@ export interface RichTextEditorToolbarItem {
     label: string;
     onClick: () => void;
     isActive?: () => boolean;
+    /**
+     * Whether the entry is an on/off toggle, announced with `aria-pressed`.
+     * Defaults to true when `isActive` is provided; set false for a command.
+     */
+    toggle?: boolean;
     /** Renders the entry as unselectable. */
     disabled?: boolean;
 }
+/** Where an uploaded image now lives, as the consumer's `upload` resolves it. */
+export interface RichTextImage {
+    /** Public URL of the stored image. Must pass the image policy: http(s), `blob:` or relative. */
+    src: string;
+    /** Text alternative. Defaults to the file name; the user can edit it in the editor. */
+    alt?: string;
+    /** Intrinsic width in CSS pixels, kept on the image to reserve its space. */
+    width?: number;
+    /** Intrinsic height in CSS pixels. */
+    height?: number;
+}
+export interface RichTextImageUploadContext {
+    /** Aborted when the user cancels or removes the pending image, or the editor unmounts. */
+    signal: AbortSignal;
+}
+/**
+ * Image support for `RichTextEditor` and read-only `RichText`. The consumer
+ * owns upload and storage; the editor owns insertion (toolbar, paste and drop),
+ * the uploading placeholder, error and retry, alt text and source policy.
+ * Create it with `useRichTextImages` so inline callbacks stay stable.
+ */
+export interface RichTextEditorImages extends RichTextImageRendering {
+    /** Stores a file and resolves where it now lives. A rejection shows the error state with Retry. */
+    upload: (file: File, context: RichTextImageUploadContext) => Promise<RichTextImage>;
+    /** Accepted MIME types, comma-separated. Default: `'image/png,image/jpeg,image/gif,image/webp'`. */
+    accept?: string;
+    /** Largest accepted file in bytes. Larger files are refused before upload. */
+    maxSize?: number;
+    /** Receives upload failures and refused files, for reporting. */
+    onError?: (error: unknown, file: File) => void;
+}
+/** Body floor roles for the rich text editor. */
+export type RichTextEditorBodyHeight = 'control' | 'field' | 'document';
 export interface RichTextEditorProps {
     /** Editor content as HTML. Controlled. */
     value: string;
@@ -64,7 +103,13 @@ export interface RichTextEditorProps {
     placeholder?: string;
     /** Tightens the toolbar and body for inline use. */
     compact?: boolean;
-    /** Smallest height the body may take. */
+    /**
+     * Body floor role: `control` (one small control line), `field` (a textarea, for
+     * composers and replies) or `document` (a short page). Defaults to `control`
+     * when `compact`, otherwise `document`; follows density. `minHeight` wins.
+     */
+    bodyHeight?: RichTextEditorBodyHeight;
+    /** Smallest height the body may take, as a CSS length. Overrides `bodyHeight`. */
     minHeight?: string;
     /** Height at which the body starts scrolling. */
     maxHeight?: string;
@@ -94,6 +139,12 @@ export interface RichTextEditorProps {
     onCaretChange?: () => void;
     /** Per-instance string overrides (deep-merged over `defaultRichTextEditorStrings`). */
     strings?: StringsProp<RichTextEditorStrings>;
+    /**
+     * Enables images: an Insert image toolbar control, pasted and dropped image
+     * files, an uploading placeholder with cancel, error and retry, and an image
+     * description field for the image at the caret. Omit to keep images out.
+     */
+    images?: RichTextEditorImages;
 }
 export interface ToolbarButtonConfig {
     /** Stable identity for this entry. */
@@ -106,6 +157,8 @@ export interface ToolbarButtonConfig {
     label: string;
     isActive: () => boolean;
     run: () => void;
+    /** An on/off format such as bold, announced with `aria-pressed`. Commands such as undo leave it unset. */
+    toggle?: boolean;
     /** Renders the entry as unselectable. */
     disabled?: boolean;
 }

package/dist/components/features/rich-text-editor/use-rich-text-images.d.ts

@@ -0,0 +1,18 @@
+import type { RichTextEditorImages } from './rich-text-editor.types';
+/**
+ * Image support for `RichTextEditor` and read-only `RichText` from one place.
+ * The consumer supplies `upload` (and optionally `renderImage`, such as a
+ * framework image component); the returned object is stable across renders
+ * while always calling the latest callbacks, so inline functions are fine.
+ *
+ *   const images = useRichTextImages({
+ *     upload: async (file, { signal }) => {
+ *       const stored = await api.uploadImage(file, { signal });
+ *       return { src: stored.url, width: stored.width, height: stored.height };
+ *     },
+ *     renderImage: (image) => <Image {...image} />,
+ *   });
+ *   <RichTextEditor value={html} onValueChange={setHtml} images={images} />
+ *   <RichText html={html} images={images} />
+ */
+export declare function useRichTextImages(options: RichTextEditorImages): RichTextEditorImages;

package/dist/components/features/sync/index.d.ts

@@ -1,3 +1,26 @@
-export { SyncRangeDialogForm } from './sync-range-dialog-form';
-export type { SyncRangeDialogFormProps, SyncRangeDialogFormSubmit, SyncRangeDialogFormValues, } from './sync.types';
-export { defaultSyncRangeDialogFormStrings, type SyncRangeDialogFormStrings, } from './sync.strings';
+/**
+ * Deprecated compatibility entrypoint.
+ *
+ * `SyncRangeDialogForm` was one application's integration-repair form: a sync
+ * window radio group, optional record-family checkboxes and a numeric `hours`
+ * payload. It carries no behaviour beyond the public choice controls, so new
+ * code composes them directly: `SchemaForm` from
+ * `themelia-react-ui/features/schema-form` with `radio-cards` and
+ * `checkbox-cards` fields, inside an `ActionDialog` when it needs a dialog.
+ * Existing callers keep working through 2.x.
+ */
+export { 
+/** @deprecated Use `SchemaForm` from `themelia-react-ui/features/schema-form` with a `radio-cards` field for the window and a `checkbox-cards` field for the options; map its values to your payload in `onSubmit`. */
+SyncRangeDialogForm, } from './sync-range-dialog-form';
+export type { 
+/** @deprecated Use `SchemaFormProps` from `themelia-react-ui/features/schema-form`. */
+SyncRangeDialogFormProps, 
+/** @deprecated Map `SchemaFormValues` to your own payload in `SchemaForm`'s `onSubmit`. */
+SyncRangeDialogFormSubmit, 
+/** @deprecated Use `SchemaFormValues` from `themelia-react-ui/features/schema-form`. */
+SyncRangeDialogFormValues, } from './sync.types';
+export { 
+/** @deprecated Supply labels and descriptions on the `SchemaForm` field definitions. */
+defaultSyncRangeDialogFormStrings, 
+/** @deprecated Supply labels and descriptions on the `SchemaForm` field definitions. */
+type SyncRangeDialogFormStrings, } from './sync.strings';

package/dist/components/features/table/data-table.d.ts

@@ -1,6 +1,6 @@
 export declare function useDataTableSize(): 'xs' | 'sm';
 import { type DataTableProps } from './table.types';
-export declare function DataTable<TData extends object, TValue = unknown>({ size, surface, headerTransparent, columns, data, columnGroups, rowActions, rowActionsMenuLabel, rowActionsDisplayMode, rowActionsBreakpoint, enableSorting, enableResizing, enableFiltering, filterColumn, filterPlaceholder, manualSorting, enableColumnVisibility, fullscreen: controlledFullscreen, defaultFullscreen, onFullscreenChange, showFullscreenToggle, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, pagination, pageQueryKey, onPageChange, onSortingChange, onColumnFiltersChange, onRowClick, onRowSelectionChange, stickyHeader, stickyToolbar, stickyFirstColumn, maxBodyHeight, fillAvailableHeight, emptyStateMessage, emptyStateAction, className, rowClassName, cellClassName, headerClassName, wrapperClassName, innerClassName, tableContainerClassName, getRowId, rowSelection: controlledRowSelection, sorting: controlledSorting, defaultSorting, columnVisibility: controlledColumnVisibility, defaultColumnVisibility, initialState, onColumnVisibilityChange, strings: stringsOverride, topbarContent, topbarEnd, topbarClassName, toolbarLabelVisibility, footerContent, selectionToolbar, bulkActions, selectionToolbarClassName, storageKey, }: DataTableProps<TData, TValue>): import("react").JSX.Element;
+export declare function DataTable<TData extends object, TValue = unknown>({ size, surface, headerTransparent, columns, data, columnGroups, rowActions, rowActionsMenuLabel, rowActionsDisplayMode, rowActionsBreakpoint, enableSorting, enableResizing, enableFiltering, filterColumn, filterPlaceholder, manualSorting, enableColumnVisibility, fullscreen: controlledFullscreen, defaultFullscreen, onFullscreenChange, showFullscreenToggle, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, pagination, pageQueryKey, onPageChange, onSortingChange, onColumnFiltersChange, onRowClick, onRowSelectionChange, stickyHeader, stickyToolbar, stickyFirstColumn, maxBodyHeight, fillAvailableHeight, emptyStateMessage, emptyStateAction, className, rowClassName, cellClassName, headerClassName, wrapperClassName, innerClassName, tableContainerClassName, getRowId, rowSelection: controlledRowSelection, sorting: controlledSorting, defaultSorting, columnVisibility: controlledColumnVisibility, defaultColumnVisibility, initialState, onColumnVisibilityChange, strings: stringsOverride, topbarContent, topbarEnd, topbarClassName, toolbarLabelVisibility, footerContent, selectionToolbar, bulkActions, selectionToolbarClassName, selectionToolbarPlacement, totalRowCount: totalRowCountProp, storageKey, }: DataTableProps<TData, TValue>): import("react").JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

package/dist/components/features/table/table-header.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type DataTableHeaderProps } from './table.types';
-export declare function DataTableHeader<TData>({ table, enableResizing, stickyHeader, headerClassName, cellClassName, stickyFirstColumn, columnGroups, headerTransparent, }: DataTableHeaderProps<TData>): React.JSX.Element;
+export declare function DataTableHeader<TData>({ table, enableResizing, stickyHeader, headerClassName, cellClassName, stickyFirstColumn, columnGroups, headerTransparent, strings, }: DataTableHeaderProps<TData>): React.JSX.Element;
 export declare namespace DataTableHeader {
     var displayName: string;
 }

package/dist/components/features/table/table.strings.d.ts

@@ -1,3 +1,57 @@
 import { type DataTableStrings, type DataTableStringsOverride } from './table.types';
-export declare const defaultDataTableStrings: DataTableStrings;
+export declare const defaultDataTableStrings: {
+    emptyState: {
+        message: string;
+        ariaLabel: string;
+    };
+    actions: {
+        triggerLabel: string;
+        srLabel: string;
+        menuLabel: string;
+    };
+    filter: {
+        searchPlaceholder: string;
+        columnsButton: string;
+    };
+    columnVisibility: {
+        title: string;
+        triggerLabel: string;
+        formatLabel: (columnId: string, currentLabel?: string | null) => string;
+    };
+    toolbar: {
+        scrollLeft: string;
+        scrollRight: string;
+        columns: string;
+        enterFullscreen: string;
+        exitFullscreen: string;
+    };
+    pagination: {
+        showing: string;
+        to: string;
+        of: string;
+        entries: string;
+        previous: string;
+        next: string;
+        previousLabel: string;
+        nextLabel: string;
+        morePages: string;
+        page: string;
+        rowsPerPage: string;
+        ariaLabel: string;
+    };
+    selection: {
+        summary: (selected: number, total: number) => string;
+        row: (index: number) => string;
+        selectAll: string;
+        clear: string;
+        label: string;
+    };
+    accessibility: {
+        scrollRegion: string;
+        fullscreenRegion: string;
+        sortColumn: (columnLabel: string) => string;
+        sortPriority: (direction: "asc" | "desc", priority: number, total: number) => string;
+        resizeColumn: (columnLabel: string) => string;
+    };
+};
 export declare const mergeDataTableStrings: (overrides?: DataTableStringsOverride) => DataTableStrings;

package/dist/components/features/table/table.types.d.ts

@@ -75,11 +75,20 @@ export interface DataTableStrings {
     /** Shown in place of the collection when it has no entries. */
     emptyState: {
         message: string;
+        /** Accessible name of the empty-result status. */
+        ariaLabel?: string;
     };
-    /** Overflow menu for the surface as a whole. */
+    /** Row actions column and its overflow menu. */
     actions: {
+        /** Header of the row actions column. */
         triggerLabel: string;
         srLabel: string;
+        /**
+         * Accessible name of each row's More actions trigger. Defaults to "More
+         * actions"; an override that sets only `triggerLabel` keeps naming the
+         * trigger with it, as before 2.0.1.
+         */
+        menuLabel?: string;
     };
     filter: {
         searchPlaceholder: string;
@@ -103,11 +112,19 @@ export interface DataTableStrings {
         row: (index: number) => string;
         selectAll: string;
         clear: string;
+        /** Accessible name of the selected-row action region. */
+        label?: string;
     };
     accessibility: {
         scrollRegion: string;
         /** Names the full-screen table for assistive technology. */
         fullscreenRegion: string;
+        /** Accessible name of a column's sorting control. Receives its header text or column ID. */
+        sortColumn?: (columnLabel: string) => string;
+        /** Describes each active multi-sort column's direction and precedence. */
+        sortPriority?: (direction: 'asc' | 'desc', priority: number, total: number) => string;
+        /** Accessible name of a column's resize handle. Receives its header text or column ID. */
+        resizeColumn?: (columnLabel: string) => string;
     };
 }
 export type DataTableStringsOverride = Partial<{
@@ -156,14 +173,16 @@ export interface DataTableSelectionToolbarContext<TData extends object> {
     table: Table<TData>;
     selectedRows: TData[];
     selectedRowCount: number;
+    /** `totalRowCount` when supplied, else `pagination.total`, else the rows in `data`. */
     totalRowCount: number;
     rowSelection: RowSelectionState;
     clearSelection: () => void;
 }
 /**
- * Visual density / typography scale of the entire table. Applied at the
- * `<table>` element so all cells inherit via CSS. Defaults to the provider's
- * canonical `md` scale; use `sm` for denser tables and `lg` for more room.
+ * Row density of the entire table. `sm`, `md` and `lg` select the base table's
+ * `compact`, `default` and `comfortable` row rhythm for every header and body
+ * cell. Defaults to the provider's canonical `md` scale; use `sm` for denser
+ * tables and `lg` for more room.
  */
 export type DataTableSize = ComponentScale;
 /**
@@ -302,15 +321,32 @@ export interface DataTableProps<TData extends object, TValue> {
     /** Content below the table body, above the pagination footer. */
     footerContent?: React.ReactNode;
     /**
-     * Custom selected-row toolbar. `undefined` renders the package default,
-     * `null` / `false` suppresses it, and a function receives the selected row
-     * context for a fully custom toolbar.
+     * Custom selected-row toolbar. `undefined` renders the package default, a
+     * `BatchActionBar` from `themelia-react-ui/base/batch-action-bar`; `null` /
+     * `false` suppresses it, and a node or a function receiving the selected row
+     * context replaces it while rows are selected.
      */
     selectionToolbar?: React.ReactNode | ((context: DataTableSelectionToolbarContext<TData>) => React.ReactNode);
-    /** Optional bulk action slot rendered in the package default selection toolbar. */
+    /**
+     * Bulk actions rendered in the default selection toolbar, before its Clear
+     * button. The toolbar only shows while rows are selected, so these actions
+     * need no disabled state for an empty selection.
+     */
     bulkActions?: React.ReactNode | ((context: DataTableSelectionToolbarContext<TData>) => React.ReactNode);
-    /** Merged onto the selection toolbar. */
+    /** Merged onto the default selection toolbar. */
     selectionToolbarClassName?: string;
+    /**
+     * Where the default selection toolbar sits. `floating` (default) docks it to
+     * the bottom centre of the viewport, so it stays reachable while a long table
+     * scrolls; `inline` keeps it in flow between the topbar and the table.
+     */
+    selectionToolbarPlacement?: 'floating' | 'inline';
+    /**
+     * Total rows in the whole result, for the selection summary ("3 of 1,250
+     * rows selected") and `DataTableSelectionToolbarContext.totalRowCount`.
+     * Defaults to `pagination.total`, else the rows in `data`.
+     */
+    totalRowCount?: number;
     /**
      * Row actions, as a static array or a factory receiving the row.
      *
@@ -346,7 +382,7 @@ export interface DataTableProps<TData extends object, TValue> {
      * goes through `onPageChange`.
      */
     pageQueryKey?: string;
-    /** Fired when a row is activated. Not called for clicks on controls inside the row. */
+    /** Fired on a row click or Enter/Space activation. Nested controls retain their own interaction. */
     onRowClick?: RowClickHandler<TData>;
     /** Fired with the next selection state. */
     onRowSelectionChange?: RowSelectionHandler;
@@ -439,7 +475,7 @@ export interface DataTableActionsProps<TData> {
     row: TData;
     /** static actions or a factory for per-row actions */
     actions: TableAction<TData>[] | ((row: TData) => TableAction<TData>[]);
-    /** Optional menu label (defaults to strings.actions.triggerLabel) */
+    /** Accessible name of the More actions trigger. Defaults to `strings.actions.menuLabel`. */
     menuLabel?: string;
     /** Display mode: always menu, always inline, or auto by breakpoint (default: 'menu' to preserve behavior) */
     displayMode?: 'menu' | 'inline' | 'auto';
@@ -485,5 +521,7 @@ export interface DataTableHeaderProps<TData> {
     columnGroups?: ColumnGroup[];
     /** Drops the muted header background. */
     headerTransparent?: boolean;
+    /** Overrides this header's accessible control names. */
+    strings?: DataTableStrings;
 }
 export {};

package/dist/components/features/theme-tweaker/theme-tweaker.types.d.ts

@@ -54,6 +54,11 @@ export interface AdminUIThemeSelectors {
     light: string;
     /** Selector receiving dark-mode variables. Defaults to `.dark`. */
     dark: string;
+    /** Optional selector list whose nearest .light/.dark boundary chooses mode.
+     * Generated by createScopedAdminUIThemeSelectors. When present, light/dark
+     * selectors remain available for compatibility; serialization uses this scope.
+     */
+    modeScope?: string;
 }
 export interface SerializeAdminUIThemeOptions {
     selectors?: AdminUIThemeSelectors;

package/dist/components/layout/page/index.d.ts

@@ -1,4 +1,4 @@
 export { Page } from './page';
 export { PageHeader } from './partials/page-header';
 export { PageActions } from './partials/page-actions';
-export { defaultPageActionsStrings, type PageHeaderAction, type PageHeaderProps, type PageHeaderSlots, type PageActionsProps, type PageActionsDisplay, type PageAction, type PageActionContext, type PageActionsStrings, type PageProps, type PageSlotProps, } from './page.types';
+export { defaultPageActionsStrings, type PageHeaderAction, type PageHeaderProps, type PageHeaderSlots, type PageHeaderTabs, type PageActionsProps, type PageActionsDisplay, type PageAction, type PageActionContext, type PageActionsStrings, type PageProps, type PageSlotProps, } from './page.types';

package/dist/components/layout/page/page.types.d.ts

@@ -11,6 +11,8 @@ import type { ContainerGutter, ContainerMaxWidth, ContainerProps } from '../cont
 import type { StringsProp } from '../../../lib/strings';
 import type { BadgeTone } from '../../base/badge';
 import type { ActionPresentation } from '../../../lib/action-presentation';
+import type { PageHeaderAction } from '../../base/navigation/page-header';
+import type { OverflowTabItem } from '../../base/navigation';
 export interface PageTitleBadge {
     /** Display label. */
     label: ReactNode;
@@ -18,39 +20,22 @@ export interface PageTitleBadge {
     tone?: BadgeTone;
     key?: Key;
 }
-/**
- * A page command described by its role. `primaryAction` and `secondaryActions`
- * choose the treatment, so a command carries no tone or button style.
- */
-export interface PageHeaderAction {
-    /** Stable key. Defaults to the command's position. */
-    id?: string;
-    /** Visible command text. */
-    label: ReactNode;
-    /** Runs the command. When both are set, `onClick` wins over `href`. */
-    onClick?: () => void;
-    /** Navigates through the header's `renderLink` instead of running a callback. */
-    href?: string;
-    target?: string;
-    rel?: string;
-    /** Marks the destination as leaving the app; forwarded to `renderLink`. */
-    external?: boolean;
-    /** Leading glyph. Pass a Lucide icon component. */
-    icon?: ComponentType<{
-        className?: string;
-    }>;
-    /** Shows the pending indicator and blocks activation. */
-    loading?: boolean;
-    /** Blocks activation while keeping the command visible. */
-    disabled?: boolean;
-    /** Set false to omit the command, for example without permission. */
-    visible?: boolean;
+export type { PageHeaderAction } from '../../base/navigation/page-header';
+/** Section tabs under a record's header. */
+export interface PageHeaderTabs {
+    /** Sections in order. `badge` shows a count chip beside the label. */
+    items: OverflowTabItem[];
+    /** Id of the active section. */
+    value?: string;
     /**
-     * Irreversible or harmful command. A destructive secondary command moves to
-     * the More actions menu; a destructive primary command keeps its place with
-     * the destructive treatment. Confirm it from the handler, e.g. ConfirmDialog.
+     * Fired with the id of the chosen section. Switch the content or route here;
+     * an item `href` renders a native link.
      */
-    destructive?: boolean;
+    onValueChange?: (id: string) => void;
+    /** Accessible name of the tab list. Default: `'Sections'`. */
+    label?: string;
+    /** Label of the trigger that holds tabs which do not fit. Default: `'More'`. */
+    moreLabel?: string;
 }
 export interface PageHeaderSlots {
     /** Replaces the leading back control entirely. */
@@ -89,18 +74,25 @@ export interface PageHeaderProps extends LayoutNavigationAdapter {
     /** Chips shown beside the page title. */
     titleBadges?: PageTitleBadge[];
     /**
-     * The page's one main command: a solid primary button at the trailing end,
-     * visible at every width.
+     * The page's one main command: a solid primary button after the secondary
+     * commands, visible at every width.
      */
     primaryAction?: PageHeaderAction;
     /**
      * Supporting commands in priority order. The first two render as outline
-     * buttons; the rest, and every destructive command, move into the More
-     * actions menu. Below `sm`, all secondary commands collapse into that menu.
+     * buttons before the primary command; the rest, and every destructive
+     * command, move into the More actions menu, which always closes the row.
+     * Below `sm`, all secondary commands collapse into that menu.
      */
     secondaryActions?: readonly PageHeaderAction[];
     /** Accessible name of the More actions menu trigger. */
     moreActionsLabel?: string;
+    /**
+     * Section tabs under the header, for a record split into sections such as
+     * documents and history. Tabs that do not fit move into a More menu, and
+     * the active tab stays visible.
+     */
+    tabs?: PageHeaderTabs;
     /**
      * Custom controls before the role-based commands, such as a period select.
      * Prefer `primaryAction` and `secondaryActions` for commands.
@@ -121,6 +113,7 @@ export interface PageActionContext {
     isInline: boolean;
     renderLink: LayoutLinkRenderer;
 }
+/** @deprecated Use PageHeaderAction with `primaryAction` and `secondaryActions`. */
 export interface PageAction extends ActionPresentation {
     id?: string;
     /** Display label. */
@@ -154,7 +147,11 @@ export interface PageActionsProps extends LayoutNavigationAdapter {
     actions?: PageAction[];
     /** How actions are presented — inline, menu, or responsive. */
     display?: PageActionsDisplay;
-    /** Inline action button scale. Defaults to `sm`; set `md` for normal page-header buttons. */
+    /**
+     * Inline action button scale, which the More actions square beside them
+     * matches. Defaults to `sm`; set `md` for normal page-header buttons. A
+     * menu-only ribbon follows the provider scale.
+     */
     size?: ButtonSize;
     /** Width at which responsive actions collapse into a menu. */
     breakpoint?: number;

package/dist/components/layout/page/partials/page-actions.d.ts

@@ -1,2 +1,3 @@
 import { type PageActionsProps } from '../page.types';
+/** @deprecated Pass page commands as `primaryAction` and `secondaryActions`; use ActionButtons for a toolbar row. */
 export declare function PageActions({ actions, display, size, breakpoint, maxInlineActions, renderLink, strings: stringsProp, className, inlineClassName, menuClassName, renderAction, }: PageActionsProps): import("react").JSX.Element | null;

package/dist/components/layout/page/partials/page-header.d.ts

@@ -1,2 +1,2 @@
 import type { PageHeaderProps } from '../page.types';
-export declare function PageHeader({ title, description, textGap, headingTag, titleIcon: TitleIcon, titleIconHref, onTitleIconClick, titleIconLabel, backHref, onBack, backLabel, titleBadges, primaryAction, secondaryActions, moreActionsLabel, actions, slots, renderLink, className, contentClassName, actionsClassName, titleClassName, titleIconClassName, descriptionClassName, }: PageHeaderProps): import("react").JSX.Element;
+export declare function PageHeader({ title, description, textGap, headingTag, titleIcon: TitleIcon, titleIconHref, onTitleIconClick, titleIconLabel, backHref, onBack, backLabel, titleBadges, primaryAction, secondaryActions, moreActionsLabel, tabs, actions, slots, renderLink, className, contentClassName, actionsClassName, titleClassName, titleIconClassName, descriptionClassName, }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/layout/settings/settings.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
+import { type PageHeaderAction } from '../../base/navigation/page-header/page-header-commands';
 import { type StringsProp } from '../../../lib/strings';
 import { type LayoutNavigationAdapter } from '../layout.types';
 export interface AsideNavShellStrings {
@@ -45,8 +46,21 @@ export interface AsideNavShellProps extends LayoutNavigationAdapter {
     children?: ReactNode;
     /** Content beside the main settings panel. */
     aside?: ReactNode;
-    /** Controls offered on the surface. */
+    /**
+     * Non-command controls beside the title, such as a scope select. They
+     * render before the role-based commands.
+     */
     actions?: ReactNode;
+    /** The page's one main command: a solid primary button, visible at every width. */
+    primaryAction?: PageHeaderAction;
+    /**
+     * Supporting commands in priority order, as in Page headers: the first two
+     * render as outline buttons before the primary command; the rest, and every
+     * destructive command, move into the More actions menu, which closes the row.
+     */
+    secondaryActions?: readonly PageHeaderAction[];
+    /** Accessible name of the More actions menu trigger. Default: `'More actions'`. */
+    moreActionsLabel?: string;
     /** Content below the body. */
     footer?: ReactNode;
     className?: string;
@@ -58,7 +72,7 @@ export interface AsideNavShellProps extends LayoutNavigationAdapter {
     strings?: StringsProp<AsideNavShellStrings>;
 }
 export type SettingsShellProps = AsideNavShellProps;
-export declare function AsideNavShell({ title, description, groups, currentId, currentPath, children, aside, actions, footer, className, navClassName, contentClassName, renderLink, strings: stringsProp, }: AsideNavShellProps): import("react").JSX.Element;
+export declare function AsideNavShell({ title, description, groups, currentId, currentPath, children, aside, actions, primaryAction, secondaryActions, moreActionsLabel, footer, className, navClassName, contentClassName, renderLink, strings: stringsProp, }: AsideNavShellProps): import("react").JSX.Element;
 export declare namespace AsideNavShell {
     var displayName: string;
 }

package/dist/components/layout/workspace/workspace.types.d.ts

@@ -2,6 +2,7 @@ import type { CSSProperties, HTMLAttributes, MouseEvent, ReactNode } from 'react
 import type { LayoutIconComponent, LayoutNavigationAdapter } from '../layout.types';
 import type { StringsProp } from '../../../lib/strings';
 import type { TextGap } from '../../base/structure';
+import type { PageHeaderAction } from '../../base/navigation/page-header';
 import type { WorkspaceLocaleStripStrings, WorkspaceNavStrings, WorkspaceRecordHeaderStrings } from './workspace.strings';
 export type WorkspaceContentWidth = 'default' | 'wide' | 'full';
 export interface WorkspaceLayoutStyle extends CSSProperties {
@@ -42,7 +43,7 @@ export interface WorkspaceRecordHeaderMetadataItem {
     /** Current value. Controlled. */
     value: ReactNode;
 }
-export interface WorkspaceRecordHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface WorkspaceRecordHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, LayoutNavigationAdapter {
     /** Title/supporting-copy rhythm. Defaults to dense. */
     textGap?: TextGap;
     /** Surface title. */
@@ -53,10 +54,26 @@ export interface WorkspaceRecordHeaderProps extends Omit<HTMLAttributes<HTMLDivE
     badges?: ReactNode;
     /** Label/value facts under the record title. */
     metadata?: WorkspaceRecordHeaderMetadataItem[];
-    /** Controls offered on the surface. */
+    /**
+     * Non-command controls, such as a locale or period select. They render
+     * before the role-based commands.
+     */
     actions?: ReactNode;
-    /** Lower-emphasis controls beside the primary action. */
-    secondaryActions?: ReactNode;
+    /**
+     * The record's one main command: a solid primary button after the secondary
+     * commands, visible at every width.
+     */
+    primaryAction?: PageHeaderAction;
+    /**
+     * Supporting commands in priority order, as in Page headers: the first two
+     * render as outline buttons before the primary command; the rest, and every
+     * destructive command, move into the More actions menu, which closes the
+     * row. Rendered elements are still accepted for existing headers; pass
+     * command objects instead.
+     */
+    secondaryActions?: ReactNode | readonly PageHeaderAction[];
+    /** Accessible name of the More actions menu trigger. Default: `'More actions'`. */
+    moreActionsLabel?: string;
     /** Current state, shown as a chip. */
     status?: ReactNode;
     /** Illustration or imagery beside the form. */