themelia-react-ui 1.0.2 → 2.0.1

package/dist/components/features/products/partials/product-tone.d.ts

@@ -1,7 +1,17 @@
 import type { BadgeTone } from '../../../base/badge';
 import type { ProductTone } from '../products.types';
+/**
+ * Badge tone for a product row value. Only status tones carry colour; neutral
+ * and primary (reserved for the main command) render as neutral badges.
+ */
 export declare const PRODUCT_TONE_BADGE: Record<ProductTone, BadgeTone>;
-export declare const PRODUCT_TONE_SURFACE: Record<ProductTone, string>;
+/**
+ * Text colour for a figure whose tone states a status. Figures keep their width,
+ * so a flagged metric lines up with its plain siblings instead of growing a chip.
+ */
+export declare const PRODUCT_TONE_TEXT: Record<ProductTone, string | undefined>;
+/** Whether a tone states a status. Neutral and primary are presentation, not state. */
+export declare function isProductStatusTone(tone: ProductTone | undefined): tone is ProductTone;
 export declare function clampProductPercent(value: number): number;
 export declare function ProductToneDot({ tone }: {
     tone?: ProductTone;

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

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
+import type { CardProps } from '../../base/cards';
 import type { BadgeTone } from '../../base/badge';
 import type { ActionMenuAction } from '../../base/action-menu';
-import type { MetadataListItem } from '../../blocks/data-display/metadata';
+import type { MetadataListItem } from '../../base/metadata-list';
 import type { StringsProp } from '../../../lib/strings';
 import type { SemanticTone } from '../../../lib/component-vocabulary';
 import type { ProductContractOverviewStrings, ProductDetailsCardStrings, ProductOperationsCardStrings, ProductOptionActionMenuStrings, ProductOptionsMatrixStrings, ProductOptionsSummaryStrings, ProductOverviewStrings, ProductPoliciesCardStrings, ProductQuotePreviewCardStrings, ProductReadinessCardStrings, ProductStructureCardStrings, ProductVariantActionMenuStrings, ProductVariantBulkTableStrings, ProductVariantDetailsStrings, ProductVariantEditorStrings, ProductVariantsManagerStrings, ProductVariantsTableStrings } from './products.strings';
@@ -719,12 +720,19 @@ export interface ProductVariantsBulkTableProps {
     onDuplicateVariant?: (variant: ProductVariantRow) => void;
     /** Fired when a variant is removed. */
     onDeleteVariant?: (variant: ProductVariantRow) => void;
+    /** Fired with the selected variants from the bulk bar's edit command. */
     onBulkEdit?: (variants: ProductVariantRow[]) => void;
+    /** Fired with the selected variants from the bulk bar's apply command, ordered before delete. */
     onBulkApply?: (variants: ProductVariantRow[]) => void;
+    /** Fired with the selected variants from the bulk bar's delete command, always last. */
     onBulkDelete?: (variants: ProductVariantRow[]) => void;
     /** Replaces the per-variant action controls. */
     renderVariantActions?: (variant: ProductVariantRow, context: ProductVariantActionContext) => ReactNode;
-    /** Replaces the per-bulk action controls. */
+    /**
+     * Replaces the default bulk commands (edit, apply, delete) in the inline
+     * BatchActionBar, which shows only while variants are selected and keeps its
+     * own count and Clear. Returning `null` or `undefined` keeps the defaults.
+     */
     renderBulkActions?: (context: ProductVariantBulkActionContext) => ReactNode;
     /** Overflow menu for the surface as a whole. */
     actions?: ActionMenuAction[];
@@ -741,7 +749,7 @@ export interface ProductVariantsBulkTableProps {
     /** Overrides this surface’s own copy. */
     strings?: StringsProp<ProductVariantBulkTableStrings>;
 }
-export interface ProductVariantsManagerProps extends Pick<ProductOptionsMatrixProps, 'optionGroups' | 'collapsedOptionIds' | 'defaultCollapsedOptionIds' | 'onCollapsedOptionIdsChange' | 'editingOptionId' | 'defaultEditingOptionId' | 'onEditingOptionIdChange' | 'onCreateOption' | 'onEditOption' | 'onDeleteOption' | 'onAddValue' | 'onDeleteValue' | 'onOptionNameChange' | 'onValueLabelChange' | 'onDoneEditingOption' | 'onSaveEditingOption' | 'onCancelEditingOption' | 'onToggleUsedForVariants' | 'renderOptionActions' | 'renderValue'>, Pick<ProductVariantsBulkTableProps, 'variants' | 'groupByOptionId' | 'visibleColumns' | 'optionCombinationDisplay' | 'cellDisplay' | 'selectionMode' | 'renderOptionCombination' | 'renderCell' | 'selectedVariantIds' | 'defaultSelectedVariantIds' | 'onSelectedVariantIdsChange' | 'onVariantFieldChange' | 'onVariantFieldBlur' | 'onCreateVariant' | 'onGenerateVariants' | 'onSelectVariant' | 'onEditVariant' | 'onDuplicateVariant' | 'onDeleteVariant' | 'onBulkEdit' | 'onBulkApply' | 'onBulkDelete' | 'renderVariantActions' | 'renderBulkActions'> {
+export interface ProductVariantsManagerProps extends Pick<CardProps, 'surface' | 'padding' | 'headerDivider' | 'footerDivider'>, Pick<ProductOptionsMatrixProps, 'optionGroups' | 'collapsedOptionIds' | 'defaultCollapsedOptionIds' | 'onCollapsedOptionIdsChange' | 'editingOptionId' | 'defaultEditingOptionId' | 'onEditingOptionIdChange' | 'onCreateOption' | 'onEditOption' | 'onDeleteOption' | 'onAddValue' | 'onDeleteValue' | 'onOptionNameChange' | 'onValueLabelChange' | 'onDoneEditingOption' | 'onSaveEditingOption' | 'onCancelEditingOption' | 'onToggleUsedForVariants' | 'renderOptionActions' | 'renderValue'>, Pick<ProductVariantsBulkTableProps, 'variants' | 'groupByOptionId' | 'visibleColumns' | 'optionCombinationDisplay' | 'cellDisplay' | 'selectionMode' | 'renderOptionCombination' | 'renderCell' | 'selectedVariantIds' | 'defaultSelectedVariantIds' | 'onSelectedVariantIdsChange' | 'onVariantFieldChange' | 'onVariantFieldBlur' | 'onCreateVariant' | 'onGenerateVariants' | 'onSelectVariant' | 'onEditVariant' | 'onDuplicateVariant' | 'onDeleteVariant' | 'onBulkEdit' | 'onBulkApply' | 'onBulkDelete' | 'renderVariantActions' | 'renderBulkActions'> {
     /** Groups rows under the values of this option. `null` leaves the list flat. */
     groupByOptionId?: string | null;
     /** Option group used for grouping on first render. */

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

@@ -1,3 +1,3 @@
 export { ResourceActionBar, ResourceDetailsSection, ResourceEmptyState, ResourceHeader, ResourceIndexShell, ResourceShowShell, TabbedResourceShell, } from './resource';
-export type { ResourceActionBarProps, ResourceDetailsSectionProps, ResourceEmptyStateProps, ResourceHeaderProps, ResourceIndexShellProps, ResourceShellSlots, ResourceShowShellProps, TabbedResourceShellProps, } from './resource.types';
+export type { ResourceActionBarProps, ResourceDetailsSectionProps, ResourceEmptyStateProps, ResourceHeaderCommandProps, ResourceHeaderProps, ResourceIndexShellProps, ResourceShellSlots, ResourceShowShellProps, TabbedResourceShellProps, } from './resource.types';
 export { defaultResourceStrings, type ResourceStrings, } from './resource.strings';

package/dist/components/features/resource/resource.d.ts

@@ -1,5 +1,5 @@
 import type { ResourceActionBarProps, ResourceDetailsSectionProps, ResourceEmptyStateProps, ResourceHeaderProps, ResourceIndexShellProps, ResourceShowShellProps, TabbedResourceShellProps } from './resource.types';
-export declare function ResourceHeader({ title, description, eyebrow, media, avatarUrl, avatarAlt, avatarFallback, icon, iconTone, badges, metadata, actions, className, contentClassName, mediaClassName, }: ResourceHeaderProps): import("react").JSX.Element;
+export declare function ResourceHeader({ title, description, eyebrow, media, avatarUrl, avatarAlt, avatarFallback, icon, iconTone, badges, metadata, actions, primaryAction, secondaryActions, moreActionsLabel, renderLink, className, contentClassName, mediaClassName, }: ResourceHeaderProps): import("react").JSX.Element;
 export declare function ResourceActionBar({ children, leading, trailing, sticky, className }: ResourceActionBarProps): import("react").JSX.Element;
 export declare function ResourceEmptyState(props: ResourceEmptyStateProps): import("react").JSX.Element;
 export declare function ResourceIndexShell(props: ResourceIndexShellProps): import("react").JSX.Element;

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

@@ -1,8 +1,9 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { IconBadgeTone } from '../../base/display';
-import type { EmptyStateProps, MetadataListItem } from '../../blocks/data-display';
+import type { MetadataListItem } from '../../base/metadata-list';
+import type { EmptyStateProps } from '../../blocks/data-display';
 import type { ActionMenuAction } from '../../base/action-menu';
-import type { OverflowTabItem } from '../../base/navigation';
+import type { OverflowTabItem, PageHeaderAction, PageHeaderLinkRenderer } from '../../base/navigation';
 import type { StringsProp } from '../../../lib/strings';
 import type { CardSurface, ComponentScale } from '../../../lib/component-vocabulary';
 import type { ResourceStrings } from './resource.strings';
@@ -26,14 +27,37 @@ export interface ResourceShellSlots {
     /** Replaces the default error state. */
     error?: ReactNode;
 }
-export interface ResourceIndexShellProps {
+/**
+ * Role-based header commands, placed and styled exactly as in Page headers:
+ * outline secondary commands, the solid primary command, then the More actions
+ * menu.
+ */
+export interface ResourceHeaderCommandProps {
+    /** The resource's one main command: a solid primary button, visible at every width. */
+    primaryAction?: PageHeaderAction;
+    /**
+     * Supporting commands in priority order. The first two render as outline
+     * buttons before the primary command; the rest, and every destructive
+     * command, move into the More actions menu, which always closes the row.
+     */
+    secondaryActions?: readonly PageHeaderAction[];
+    /** Accessible name of the More actions menu trigger. Default: `'More actions'`. */
+    moreActionsLabel?: string;
+    /** Renders `href` commands as framework links. Defaults to a native anchor. */
+    renderLink?: PageHeaderLinkRenderer;
+}
+export interface ResourceIndexShellProps extends ResourceHeaderCommandProps {
     /** Primary workspace content. Replaced by loading, error, or empty state when active. */
     children?: ReactNode;
     /** Generated header title. Omit when supplying `slots.header`. */
     title?: ReactNode;
     /** Generated header description. */
     description?: ReactNode;
-    /** Generated header actions. */
+    /**
+     * Non-command controls in the generated header, such as a period select.
+     * They render before the role-based commands; pass commands as
+     * `primaryAction` and `secondaryActions`.
+     */
     actions?: ReactNode;
     /** Content between the header and primary workspace body. */
     toolbar?: ReactNode;
@@ -62,7 +86,7 @@ export interface ResourceShowShellProps extends ResourceIndexShellProps {
     /** Class name for `slots.aside`. */
     asideClassName?: string;
 }
-export interface ResourceHeaderProps {
+export interface ResourceHeaderProps extends ResourceHeaderCommandProps {
     /** Primary resource identity. */
     title: ReactNode;
     /** Supporting resource summary. */
@@ -87,7 +111,11 @@ export interface ResourceHeaderProps {
     badges?: ReactNode;
     /** Compact resource facts rendered below the description. */
     metadata?: ReactNode;
-    /** Primary and secondary header actions. */
+    /**
+     * Non-command controls, such as a period select. They render before the
+     * role-based commands; pass commands as `primaryAction` and
+     * `secondaryActions`.
+     */
     actions?: ReactNode;
     /** Class name for the page-header root. */
     className?: string;

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

@@ -1,5 +1,6 @@
 export { RichTextEditor } from './rich-text-editor';
 export { FormRichTextEditor, type FormRichTextEditorProps } from './form-rich-text-editor';
-export type { RichTextEditorProps, RichTextEditorHandle, RichTextEditorToolbarItem, RichTextCaretContext, ToolbarButtonConfig, } from './rich-text-editor.types';
+export type { RichTextEditorProps, RichTextEditorHandle, RichTextEditorToolbarItem, RichTextCaretContext, ToolbarButtonConfig, RichTextEditorImages, RichTextImage, RichTextImageUploadContext, } from './rich-text-editor.types';
+export { useRichTextImages } from './use-rich-text-images';
 export { defaultRichTextEditorStrings, type RichTextEditorStrings, } from './rich-text-editor.strings';
 export { RichTextEditorToolbar, type RichTextEditorToolbarProps, CountsFooterText, type CountsFooterTextProps, } from './partials';

package/dist/components/features/rich-text-editor/partials/image-nodes.d.ts

@@ -0,0 +1,13 @@
+import * as TiptapReact from '@tiptap/react';
+/**
+ * An inline image whose source passes the package image policy; any other
+ * `<img>` in loaded or pasted content is dropped. Serializes as a plain
+ * `<img src alt width height>`, matching the contenteditable engine.
+ */
+export declare function getImageNode(): TiptapReact.Node;
+/**
+ * The placeholder an image occupies while it uploads. It is never parsed from
+ * HTML and the editor strips it from its value; the editor renders the
+ * upload status into its node view.
+ */
+export declare function getImageUploadNode(): TiptapReact.Node;

package/dist/components/features/rich-text-editor/partials/image-uploads.d.ts

@@ -0,0 +1,66 @@
+import { type RefObject } from 'react';
+import type { RichTextEditorStrings } from '../rich-text-editor.strings';
+import type { RichTextEditorImages, RichTextEditorToolbarItem, RichTextImage } from '../rich-text-editor.types';
+export declare const DEFAULT_IMAGE_ACCEPT = "image/png,image/jpeg,image/gif,image/webp";
+/** Marks an upload placeholder in the editing surface; never part of the value. */
+export declare const UPLOAD_ATTRIBUTE = "data-rte-upload";
+/** The placeholder occupies a line of its own while its image uploads. */
+export declare const UPLOAD_PLACEHOLDER_CLASS = "rich-text-editor--upload my-space-xs flex min-h-control items-center rounded-inner border border-dashed border-input bg-muted/30 px-row-x py-row-y";
+/** Removes upload placeholders from serialized editor HTML. */
+export declare function stripUploadPlaceholders(html: string): string;
+export declare function acceptsImageFile(file: File, accept: string): boolean;
+/** A readable default description from the file name: `team-offsite_2026.jpg` → `team offsite 2026`. */
+export declare function altFromFileName(name: string): string;
+/** Image files carried by a paste or drop. */
+export declare function imageFilesFrom(data: DataTransfer | null | undefined): File[];
+/** How each editor engine puts placeholders and images into its document. */
+export interface ImageUploadAdapter {
+    /** Inserts an empty placeholder for `id` at the selection (or the drop point). */
+    insertPlaceholder: (id: string) => void;
+    /** Swaps the placeholder for the uploaded image and reports the change. */
+    resolvePlaceholder: (id: string, image: RichTextImage) => void;
+    /** Removes the placeholder and reports the change. */
+    removePlaceholder: (id: string) => void;
+    /** The placeholder's element, or null once the user has deleted it. */
+    findPlaceholder: (id: string) => HTMLElement | null;
+}
+export interface PendingImageUpload {
+    id: string;
+    name: string;
+    status: 'uploading' | 'error';
+}
+/**
+ * The engine-agnostic upload lifecycle: validate, insert a placeholder, call
+ * the consumer's `upload` with an abort signal, then swap in the image or keep
+ * the placeholder in its error state for Retry or Remove.
+ */
+export declare function useImageUploadQueue(images: RichTextEditorImages | undefined, adapterRef: RefObject<ImageUploadAdapter | null>, strings: RichTextEditorStrings['images']): {
+    uploads: PendingImageUpload[];
+    notice: string | null;
+    dismissNotice: () => void;
+    addFiles: (files: readonly File[]) => void;
+    retry: (id: string) => void;
+    remove: (id: string) => void;
+    prune: () => void;
+};
+export type ImageUploadQueue = ReturnType<typeof useImageUploadQueue>;
+/** Renders each pending upload's status into its placeholder in the editing surface. */
+export declare function ImageUploadPortals({ queue, adapterRef, strings }: {
+    queue: ImageUploadQueue;
+    adapterRef: RefObject<ImageUploadAdapter | null>;
+    strings: RichTextEditorStrings['images'];
+}): import("react").JSX.Element;
+/** The Insert image toolbar control and its hidden file input. */
+export declare function useImageInsertControl(images: RichTextEditorImages | undefined, strings: RichTextEditorStrings['images'], onFiles: (files: File[]) => void, beforeOpen?: () => void): {
+    item: RichTextEditorToolbarItem | null;
+    input: import("react").JSX.Element | null;
+};
+/** The description field for the image at the caret, and refused-file notices. */
+export declare function ImageDetailsBar({ alt, onAltChange, onRemove, notice, onDismissNotice, strings }: {
+    alt: string | null;
+    onAltChange: (alt: string) => void;
+    onRemove: () => void;
+    notice: string | null;
+    onDismissNotice: () => void;
+    strings: RichTextEditorStrings['images'];
+}): import("react").JSX.Element | null;

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,6 @@
 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 content: "h-full [&_.ProseMirror]:h-full [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none";
 };

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,45 @@ 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;
+}
 export interface RichTextEditorProps {
     /** Editor content as HTML. Controlled. */
     value: string;
@@ -94,6 +131,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 +149,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/partials/cell-renderers.d.ts

@@ -72,7 +72,7 @@ export interface DateCellProps {
     preset?: DateProps['preset'];
     /** date-fns locale override. Falls back to UIProvider dates. */
     locale?: DateProps['locale'];
-    /** Renders the icon. */
+    /** Renders the leading glyph. Off by default: a repeated calendar glyph on every row adds no information. */
     showIcon?: boolean;
     /** Leading glyph. */
     icon?: ComponentType<{

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

@@ -76,10 +76,17 @@ export interface DataTableStrings {
     emptyState: {
         message: 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;
@@ -156,6 +163,7 @@ 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;
@@ -302,15 +310,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.
      *
@@ -439,7 +464,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';

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 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,6 +20,23 @@ export interface PageTitleBadge {
     tone?: BadgeTone;
     key?: Key;
 }
+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;
+    /**
+     * Fired with the id of the chosen section. Switch the content or route here;
+     * an item `href` renders a native link.
+     */
+    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. */
     back?: ReactNode;
@@ -25,7 +44,7 @@ export interface PageHeaderSlots {
     beforeTitle?: ReactNode;
     /** Additional content after the description. */
     afterDescription?: ReactNode;
-    /** Replaces the trailing actions region. */
+    /** Replaces the trailing actions region, including role-based commands. */
     actions?: ReactNode;
 }
 export interface PageHeaderProps extends LayoutNavigationAdapter {
@@ -35,7 +54,7 @@ export interface PageHeaderProps extends LayoutNavigationAdapter {
     description?: ReactNode;
     /** Shared title/description rhythm. Defaults to dense for page copy. */
     textGap?: TextGap;
-    /** Semantic heading level for the title. Defaults to `h3` for nested app pages. */
+    /** Semantic heading level for the title. Defaults to `h1`, the route's main heading; use `h2` when the page sits inside another titled page. */
     headingTag?: HeadingTag;
     /** Optional decorative icon rendered before the title. Pass a Lucide icon component. */
     titleIcon?: ComponentType<{
@@ -54,7 +73,30 @@ export interface PageHeaderProps extends LayoutNavigationAdapter {
     backLabel?: string;
     /** Chips shown beside the page title. */
     titleBadges?: PageTitleBadge[];
-    /** Controls offered on the surface. */
+    /**
+     * 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 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.
+     */
     actions?: ReactNode;
     /** Replaces individual regions of the shell. */
     slots?: PageHeaderSlots;
@@ -71,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. */
@@ -104,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;