react-os-shell 4.15.0 → 4.20.0

package/dist/index-C5c6FA0c.d.ts

@@ -0,0 +1,1931 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, LabelHTMLAttributes, ElementType, CSSProperties, RefObject } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+/**
+ * `sm`/`md` are the desktop scale. The `touch-*` rungs are for a finger on
+ * glass — a till, a warehouse tablet — and are a SEPARATE ladder on purpose:
+ * a till's idea of "medium" is 56px, and naming it `md` would have made the
+ * same word mean two sizes depending on which app you were reading.
+ *
+ * Nothing picks a touch size automatically. An app that wants them asks for
+ * them, so a desktop portal cannot grow finger-sized buttons by accident.
+ */
+type ButtonSize = 'sm' | 'md' | 'touch' | 'touch-lg' | 'touch-xl';
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Show a spinner and disable the button while an action is in flight. */
+    loading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    /** Stretch to the full width of the container. */
+    block?: boolean;
+    className?: string;
+    /**
+     * Why this button is disabled, rendered as text BESIDE it — never as a
+     * `title` tooltip. A tooltip needs a hover, a touchscreen has no hover, and a
+     * cashier facing a dead button with no explanation calls a manager.
+     *
+     * Only rendered while the button is actually disabled (or loading); ignored
+     * otherwise, so it is safe to pass unconditionally. Note it changes the
+     * rendered shape: the button gains a wrapper element, which matters to a
+     * parent `flex gap-*` row or a `:first-child` selector.
+     */
+    disabledReason?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Shared form-control styling — the single source of truth for the kit's
+ * text-input look. Promoted out of SearchableSelect so every form control
+ * (Input, Textarea, Select, SearchableSelect) renders identically and picks
+ * up the same `[data-theme="dark"]` input remaps from styles.css.
+ *
+ * Keep this in the documented Tailwind vocabulary (see .design-sync/conventions.md)
+ * so the classes survive both the dark-mode allow-list and the design-sync
+ * compiled stylesheet.
+ */
+/** `md` is the desktop control; `touch` is a finger on glass. See ButtonSize
+ *  for why the touch scale is a separate ladder rather than a bigger `lg`. */
+type InputSize = 'md' | 'touch';
+declare const INPUT_SIZES: Record<InputSize, string>;
+/** Base look for a text-bearing form control. Native <input>/<select>/<textarea>
+ *  also receive dark styling for free via the global rule in styles.css. */
+declare const INPUT_BASE: string;
+/** Compose the input classes for a control. Omitting `size` yields exactly
+ *  `INPUT_BASE`, so every existing caller is unaffected. */
+declare function inputClasses(opts?: {
+    invalid?: boolean;
+    size?: InputSize;
+    className?: string;
+}): string;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size'> {
+    /** Error state — red border + ring. */
+    invalid?: boolean;
+    /** Icon rendered inside the field's left edge (e.g. a search glyph). */
+    leftIcon?: ReactNode;
+    /** Content pinned to the field's right edge (e.g. a unit, a small action). */
+    rightAdornment?: ReactNode;
+    /**
+     * `touch` gives a 56px field for a finger. Defaults to the desktop size.
+     *
+     * This shadows the native `size` attribute (a character count), which is
+     * omitted above rather than left to collide — the width of a `w-full` field
+     * has never come from that attribute here, so nothing loses a capability it
+     * was using. Set `style`/`className` for width instead.
+     */
+    size?: InputSize;
+    className?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
+    /** Error state — red border + ring. */
+    invalid?: boolean;
+    /** Grow the field to fit its content instead of scrolling. */
+    autoGrow?: boolean;
+    className?: string;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'value' | 'className'> {
+    value: string;
+    onChange: (value: string) => void;
+    options: SelectOption[];
+    /** Shown as a disabled first option when no value is selected. */
+    placeholder?: string;
+    invalid?: boolean;
+    className?: string;
+}
+/**
+ * Raw native `<select>` styled to match the kit's inputs. This is the original
+ * Select — kept as the mobile rendering and exported for callers that need a
+ * real `HTMLSelectElement` (form posts, native attribute spread, focus).
+ */
+declare const NativeSelect: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+/** Smart Select: native `<select>` on touch, custom listbox on desktop. */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'checked' | 'className'> {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'checked' | 'className'> {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface FormFieldProps {
+    label?: ReactNode;
+    /** id of the control, for label-for wiring. */
+    htmlFor?: string;
+    /** id for the `<label>` element itself, so a non-labelable control (e.g. a
+     *  `role="group"` wrapper) can name itself via `aria-labelledby`. */
+    labelId?: string;
+    /** Greyed helper text below the control. */
+    hint?: ReactNode;
+    /** Red error text below the control — overrides `hint` when present. */
+    error?: ReactNode;
+    /** Append a red asterisk to the label. */
+    required?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+declare function FormField({ label, htmlFor, labelId, hint, error, required, className, children, }: FormFieldProps): react_jsx_runtime.JSX.Element;
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Append a red asterisk. */
+    required?: boolean;
+}
+declare function Label({ required, children, className, ...rest }: LabelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Internal helpers shared by the media-upload primitives (`MediaUploadField`
+ * single slot + `MediaUploadGrid` gallery) so the filename derivation, the
+ * image-vs-video test, and the upload glyph / spinner live in one place (DRY /
+ * SSoT). Not part of the public API except `mediaFileName`, which the field
+ * re-exports.
+ */
+/**
+ * Derive a human filename from a media URL: drop the query string, strip a
+ * 32-hex upload prefix, and URL-decode.
+ *
+ *   "/media/uploads/9f3…a1_My Clip.mp4?v=2"  →  "My Clip.mp4"
+ *
+ * `data:` URLs have no path, so they are named from their media type instead
+ * — see `dataUrlName`.
+ */
+declare function mediaFileName(url: string): string;
+
+interface MediaUploadFieldProps {
+    /** The current media URL. Empty string (or null/undefined) = the CTA state. */
+    value?: string | null;
+    /** Controlled channel — the newly-chosen URL, or `''` when cleared (Remove). */
+    onChange: (url: string) => void;
+    /**
+     * Open the consumer's library/upload picker. Fires on click and on drop; the
+     * dropped File (if any) is passed so the consumer can seed an immediate
+     * upload. The consumer resolves the selection back through `onChange`.
+     * Omit to fall back to a hidden native `<input type=file>` that emits an
+     * object-URL (demos, staged-then-submit forms).
+     */
+    onPick?: (droppedFile?: File) => void;
+    /** Label rendered above the control. */
+    label?: ReactNode;
+    /** Greyed helper line below the control. */
+    hint?: ReactNode;
+    /** Red error line — overrides `hint`. */
+    error?: ReactNode;
+    /** Append a red asterisk to the label. */
+    required?: boolean;
+    className?: string;
+    /**
+     * Native `accept` string. Drives the preview kind (image vs video), the
+     * fallback file dialog, and the default empty-state copy. Default `image/*`.
+     */
+    accept?: string;
+    /** `object-fit` for the preview. Default `cover`; use `contain` for logos/SVG. */
+    fit?: 'cover' | 'contain';
+    /** Preview / dropzone height in px (applied via inline style). Default 112. */
+    height?: number;
+    /** Dim prompt line, e.g. "Upload a background video". Default derived from `accept`. */
+    placeholder?: ReactNode;
+    /** The link-style CTA line. Default "Choose from library or upload". */
+    cta?: ReactNode;
+    /** Small kind hint under the CTA, e.g. "PNG · JPG · WEBP". */
+    acceptHint?: ReactNode;
+    /** Overlay the derived filename on the preview. Default true. */
+    showFilename?: boolean;
+    /** Show the Replace button when filled. Default true. */
+    allowReplace?: boolean;
+    /** Show the Remove button when filled. Default true. */
+    allowRemove?: boolean;
+    /** Relabel Replace, e.g. "Change". Default "Replace". */
+    replaceLabel?: ReactNode;
+    /** Relabel Remove, e.g. "Clear". Default "Remove". */
+    removeLabel?: ReactNode;
+    /** Busy: disable controls and show a spinner while the caller's upload runs. */
+    busy?: boolean;
+    /** Busy label. Default "Uploading…". */
+    busyLabel?: ReactNode;
+    /** Fully disable the control (no click, no drop, no actions). */
+    disabled?: boolean;
+}
+
+declare function MediaUploadField({ value, onChange, onPick, label, hint, error, required, className, accept, fit, height, placeholder, cta, acceptHint, showFilename, allowReplace, allowRemove, replaceLabel, removeLabel, busy, busyLabel, disabled, }: MediaUploadFieldProps): react_jsx_runtime.JSX.Element;
+
+interface MediaUploadGridItem {
+    /** Stable key — used for React keys, remove, and reorder. */
+    id: string;
+    /** Preview URL. */
+    url: string;
+    /** `image` | `video`. Inferred from the URL when omitted. */
+    kind?: 'image' | 'video';
+    /** Optional label overlaid on the thumbnail (filename, dimensions, …). */
+    caption?: ReactNode;
+    /** Force the "cover" badge on this item (else `showCover` badges the first). */
+    cover?: boolean;
+}
+interface MediaUploadGridProps {
+    /** The gallery contents, in display order. */
+    items: MediaUploadGridItem[];
+    /**
+     * Open the consumer's library/upload flow. Fires on click of the Add tile /
+     * empty dropzone and on a file drop onto the zone (the dropped File is passed
+     * so the consumer can seed an immediate upload). Without it the gallery is
+     * read-only for additions (no Add tile, no drop).
+     */
+    onPick?: (droppedFile?: File) => void;
+    /** Remove one item. The per-thumb ✕ shows only when this is provided. */
+    onRemove?: (id: string) => void;
+    /**
+     * Reorder within the grid. Enables drag-to-reorder when provided; called with
+     * the source and target indices on drop.
+     */
+    onReorder?: (fromIndex: number, toIndex: number) => void;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    className?: string;
+    /** Native accept string — drives preview kind, the drop filter, and the copy. Default `image/*`. */
+    accept?: string;
+    /** `object-fit` for the thumbnails. Default `cover`. */
+    fit?: 'cover' | 'contain';
+    /** Thumbnail (and Add tile) square size in px. Default 96. */
+    thumbSize?: number;
+    /** Dim prompt line on the empty dropzone. Default derived from `accept`. */
+    placeholder?: ReactNode;
+    /** The link CTA on the empty dropzone. Default "Choose from library or upload". */
+    cta?: ReactNode;
+    /** Small kind hint under the CTA, e.g. "PNG · JPG · WEBP". */
+    acceptHint?: ReactNode;
+    /** Badge the first item (or the one with `cover`) as the gallery cover. Default false. */
+    showCover?: boolean;
+    /** Cover badge text. Default "Cover". */
+    coverLabel?: ReactNode;
+    /** Busy: dim the zone and show a spinner while the caller's upload runs. */
+    busy?: boolean;
+    /** Busy label. Default "Uploading…". */
+    busyLabel?: ReactNode;
+    /** Disable all interaction. */
+    disabled?: boolean;
+    /** View only — thumbnails without Add / remove / reorder affordances. */
+    readOnly?: boolean;
+}
+declare function MediaUploadGrid({ items, onPick, onRemove, onReorder, label, hint, error, required, className, accept, fit, thumbSize, placeholder, cta, acceptHint, showCover, coverLabel, busy, busyLabel, disabled, readOnly, }: MediaUploadGridProps): react_jsx_runtime.JSX.Element;
+
+interface DateRangePickerProps {
+    /** Start of the range as `YYYY-MM-DD`, or '' when unset. */
+    from: string;
+    /** End of the range as `YYYY-MM-DD`, or '' when unset. */
+    to: string;
+    /** Called with the applied range. Both values are '' when cleared. */
+    onChange: (from: string, to: string) => void;
+    /**
+     * Render a `YYYY-MM-DD` for display. Defaults to `DD/MM/YYYY`; portals pass
+     * their own so the picker agrees with every other date on screen.
+     */
+    formatDisplay?: (iso: string) => string;
+    /**
+     * Offer the Clear affordances. Pass `false` where a range is REQUIRED — an
+     * accounting report seeded with a period has nothing sensible to show for an
+     * empty one, so it should not offer to empty it.
+     */
+    clearable?: boolean;
+    /** Trigger text when no range is set. */
+    placeholder?: string;
+}
+/**
+ * Serialise a Date to `YYYY-MM-DD`, reading its LOCAL calendar fields.
+ *
+ * This must not go through `toISOString()`. Every Date this component builds is
+ * constructed at local midnight — calendar cells, the preset boundaries, and
+ * `new Date()` — and local midnight always falls in the *previous* UTC day for
+ * any positive UTC offset. Serialising through UTC would shift the whole picker
+ * back one day for every user east of Greenwich.
+ */
+declare function toISODate(d: Date): string;
+declare function DateRangePicker({ from, to, onChange, formatDisplay, clearable, placeholder, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+
+interface NumericKeypadProps {
+    value: string;
+    onChange: (next: string) => void;
+    /** Renders a full-width Enter key below the pad when provided. */
+    onEnter?: () => void;
+    /** Label for that key — name the action ("Tender", "Add"), not "Enter". */
+    enterLabel?: ReactNode;
+    enterDisabled?: boolean;
+    className?: string;
+}
+declare function NumericKeypad({ value, onChange, onEnter, enterLabel, enterDisabled, className, }: NumericKeypadProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * The rules for typing a decimal amount on an on-screen keypad — pure string
+ * functions, no React and no DOM.
+ *
+ * Split out for the same reason as `selectNav.ts`: these are the rules people
+ * actually get wrong, and they are far easier to pin exhaustively as functions
+ * than by rendering a keypad and firing clicks at it.
+ *
+ * A STRING, not a number, all the way through. `'1.'` and `'1.0'` are states a
+ * user passes through while typing and neither survives a round trip through a
+ * float — `'1.'` would become `1` and erase the decimal point the moment it was
+ * pressed. The caller converts once, at the end, when it has a whole amount.
+ */
+/** Digits after the point. Two, because these are money amounts. */
+declare const MAX_FRACTION_DIGITS = 2;
+/**
+ * Apply one keypress. `key` is a digit `'0'`-`'9'` or `'.'`.
+ * Returns the value unchanged when the press is not allowed, so a caller can
+ * always assign the result — an ignored key is a no-op, never an error.
+ */
+declare function appendKey(value: string, key: string): string;
+/** Remove the last character. Empty stays empty rather than underflowing. */
+declare function backspace(value: string): string;
+
+type TileSize = 'md' | 'lg';
+interface TileButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title'> {
+    /** Primary line — the thing being chosen. */
+    title: ReactNode;
+    /** Secondary line: a price, a count, a reason it is unavailable. */
+    subtitle?: ReactNode;
+    size?: TileSize;
+    /** Draw as chosen. Uses a ring rather than a fill so the label stays legible. */
+    selected?: boolean;
+    className?: string;
+}
+declare const TileButton: react.ForwardRefExoticComponent<TileButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SegmentedSize = 'sm' | 'md' | 'touch';
+interface SegmentedOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface SegmentedProps<T extends string = string> {
+    value: T;
+    onChange: (value: T) => void;
+    options: SegmentedOption<T>[];
+    /** Present as a real radio group under this field name. See the docstring. */
+    name?: string;
+    size?: SegmentedSize;
+    /** Stretch to fill the container, each option an equal share. */
+    block?: boolean;
+    /** Accessible name for the group. */
+    label?: string;
+    className?: string;
+}
+declare function Segmented<T extends string = string>({ value, onChange, options, name, size, block, label, className, }: SegmentedProps<T>): react_jsx_runtime.JSX.Element;
+
+type SwitchSize = 'sm' | 'md' | 'touch';
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: SwitchSize;
+    /** Text beside the control. Clicking it toggles, as a label should. */
+    label?: ReactNode;
+    /** A line under the label for what the setting actually does. */
+    hint?: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare function Switch({ checked, onChange, disabled, size, label, hint, id, className, }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface InputNumberProps {
+    value: number | null;
+    onChange: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    /** Decimal places enforced on blur. */
+    precision?: number;
+    step?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    placeholder?: string;
+    size?: InputSize;
+    /** Inside the field's edges — a currency mark, a unit. */
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    id?: string;
+    name?: string;
+    className?: string;
+    onBlur?: () => void;
+}
+declare const InputNumber: react.ForwardRefExoticComponent<InputNumberProps & react.RefAttributes<HTMLInputElement>>;
+
+interface FilePickerProps {
+    files: File[];
+    onChange: (files: File[]) => void;
+    /** `accept` for the native picker, e.g. "image/*,.pdf". */
+    accept?: string;
+    multiple?: boolean;
+    /** Rejected above this, with the reason shown. */
+    maxSizeBytes?: number;
+    /** Rejected beyond this many files total. */
+    maxFiles?: number;
+    disabled?: boolean;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    className?: string;
+}
+declare function FilePicker({ files, onChange, accept, multiple, maxSizeBytes, maxFiles, disabled, label, hint, error, className, }: FilePickerProps): react_jsx_runtime.JSX.Element;
+
+interface SearchableOption {
+    value: string;
+    label: string;
+    /** Optional secondary text rendered greyed-out on the right of the
+     *  option (e.g. an order date next to a proforma number). */
+    sublabel?: string;
+}
+interface SearchableSelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: SearchableOption[];
+    /** Placeholder shown when no value is selected and the field is empty. */
+    placeholder?: string;
+    /** Fallback placeholder text when no `placeholder` is provided and
+     *  nothing is selected. Clearing the selection is done via the hover
+     *  "×" on the input itself. */
+    emptyOptionLabel?: string;
+    /** Extra Tailwind classes appended to the input (error rings, custom
+     *  widths…). The base form-input styling is built in. */
+    className?: string;
+    disabled?: boolean;
+    /** Optional id for label-for wiring. */
+    id?: string;
+    /** When true, the user can submit a value that isn't in `options` —
+     *  pressing Enter or clicking outside with non-empty search text
+     *  fires `onChange` with the typed string. The trigger then displays
+     *  that free-text value as-is. Default false: only listed options
+     *  can be picked, typing only filters. */
+    allowFreeText?: boolean;
+    /** Optional notifier fired whenever the user-typed search text changes
+     *  (including resets to ''). Lets a parent debounce the value and feed
+     *  a server-side query, so this component can still front a list that
+     *  is too large to load up-front. */
+    onSearchChange?: (text: string) => void;
+    /** Optional content rendered inside the trigger's right edge — to the
+     *  left of the clear button — when the dropdown is closed. Use for
+     *  compact status pills that should read alongside the selected label.
+     *  Hidden while the user is typing so the search text stays legible. */
+    rightAdornment?: ReactNode;
+}
+declare function SearchableSelect({ value, onChange, options, placeholder, emptyOptionLabel, className, disabled, id, allowFreeText, onSearchChange, rightAdornment, }: SearchableSelectProps): react_jsx_runtime.JSX.Element;
+
+/** How much room the card gives its contents. `md` is the desktop default;
+ *  `lg` suits a touch layout, where the same density reads as cramped. */
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+interface CardProps {
+    children: ReactNode;
+    /** Title row above the body, divided by a hairline. */
+    header?: ReactNode;
+    /** Row below the body, divided by a hairline. */
+    footer?: ReactNode;
+    /** Apply default padding to the body. Default true; set false to fill edge-to-edge. */
+    padded?: boolean;
+    /**
+     * Padding scale. Takes precedence over `padded`, which remains supported and
+     * is now the two-value shorthand for it (`true` → `md`, `false` → `none`).
+     */
+    padding?: CardPadding;
+    className?: string;
+}
+declare function Card({ children, header, footer, padded, padding, className }: CardProps): react_jsx_runtime.JSX.Element;
+interface StatCardProps {
+    label: ReactNode;
+    value: ReactNode;
+    icon?: ReactNode;
+    /** Trend pill, e.g. `{ value: '12%', direction: 'up' }`. */
+    delta?: {
+        value: ReactNode;
+        direction: 'up' | 'down' | 'flat';
+    };
+    className?: string;
+}
+declare function StatCard({ label, value, icon, delta, className }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+type TextTone = 'default' | 'secondary' | 'tertiary' | 'disabled' | 'danger' | 'success' | 'warning' | 'link' | 'inherit';
+type TextSize = 'xs' | 'sm' | 'md' | 'lg';
+type TextWeight = 'normal' | 'medium' | 'semibold';
+interface TextProps {
+    children?: ReactNode;
+    tone?: TextTone;
+    size?: TextSize;
+    weight?: TextWeight;
+    /** Single-line ellipsis. Sets `title` so the full string stays readable. */
+    truncate?: boolean;
+    /** Render as something other than a span — `label`, `div`, `p`. */
+    as?: ElementType;
+    className?: string;
+    htmlFor?: string;
+    title?: string;
+}
+declare function Text({ children, tone, size, weight, truncate, as: Tag, className, ...rest }: TextProps): react_jsx_runtime.JSX.Element;
+type TitleLevel = 1 | 2 | 3 | 4 | 5;
+interface TitleProps {
+    children?: ReactNode;
+    /** Heading level — drives BOTH the tag and the size, so the document
+     *  outline and the visual hierarchy cannot drift apart. */
+    level?: TitleLevel;
+    tone?: TextTone;
+    className?: string;
+}
+declare function Title({ children, level, tone, className }: TitleProps): react_jsx_runtime.JSX.Element;
+interface ParagraphProps {
+    children?: ReactNode;
+    tone?: TextTone;
+    size?: TextSize;
+    className?: string;
+}
+/** Body copy. Carries its own bottom margin so stacked paragraphs breathe;
+ *  the last one's margin is removed rather than left to collapse. */
+declare function Paragraph({ children, tone, size, className }: ParagraphProps): react_jsx_runtime.JSX.Element;
+
+type Gap = 0 | 1 | 2 | 3 | 4 | 6 | 8;
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type Justify = 'start' | 'center' | 'end' | 'between' | 'around';
+interface StackProps {
+    children?: ReactNode;
+    gap?: Gap;
+    align?: Align;
+    justify?: Justify;
+    className?: string;
+}
+/** Vertical flow. */
+declare function Stack({ children, gap, align, justify, className }: StackProps): react_jsx_runtime.JSX.Element;
+interface InlineProps extends StackProps {
+    /** Wrap onto a second line rather than overflowing. Default true — an
+     *  unwrapped row is how a toolbar quietly breaks a narrow screen. */
+    wrap?: boolean;
+}
+/** Horizontal flow. Defaults to vertically centred, which is what a row of
+ *  mixed-height controls almost always wants. */
+declare function Inline({ children, gap, align, justify, wrap, className }: InlineProps): react_jsx_runtime.JSX.Element;
+type GridCols = 1 | 2 | 3 | 4 | 6 | 12;
+interface GridProps {
+    children?: ReactNode;
+    /** Columns at the narrowest width, and optionally from `sm`/`lg` up. */
+    cols?: GridCols;
+    smCols?: GridCols;
+    lgCols?: GridCols;
+    gap?: Gap;
+    className?: string;
+}
+declare function Grid({ children, cols, smCols, lgCols, gap, className }: GridProps): react_jsx_runtime.JSX.Element;
+
+type DividerSpacing = 'sm' | 'md' | 'lg';
+interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    /** Label set into the rule. Horizontal only. */
+    children?: ReactNode;
+    align?: 'left' | 'center' | 'right';
+    spacing?: DividerSpacing;
+    className?: string;
+}
+declare function Divider({ orientation, children, align, spacing, className, }: DividerProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonVariant = 'text' | 'rect' | 'circle';
+interface SkeletonProps {
+    variant?: SkeletonVariant;
+    /** CSS length. Defaults to full width for text/rect, and to `height` for a circle. */
+    width?: number | string;
+    height?: number | string;
+    /** For `text`: how many lines. The last is short, the way real prose ends. */
+    lines?: number;
+    className?: string;
+}
+declare function Skeleton({ variant, width, height, lines, className }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+type DescriptionColumns = 1 | 2 | 3;
+interface DescriptionItem {
+    label: ReactNode;
+    value: ReactNode;
+    /** Occupy the full row — for an address or a note among short fields. */
+    span?: boolean;
+    key?: string;
+}
+interface DescriptionListProps {
+    items: DescriptionItem[];
+    /** A count, or per-breakpoint counts. `{ base: 1, sm: 2, lg: 3 }`. */
+    columns?: DescriptionColumns | {
+        base?: DescriptionColumns;
+        sm?: DescriptionColumns;
+        lg?: DescriptionColumns;
+    };
+    /** Hairline-separated rows in a bordered panel. */
+    bordered?: boolean;
+    size?: 'sm' | 'md';
+    title?: ReactNode;
+    className?: string;
+}
+declare function DescriptionList({ items, columns, bordered, size, title, className, }: DescriptionListProps): react_jsx_runtime.JSX.Element;
+
+type ResultStatus = 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500';
+interface ResultProps {
+    status?: ResultStatus;
+    title?: ReactNode;
+    subTitle?: ReactNode;
+    /** Actions — usually one primary route out. Always give the user one. */
+    extra?: ReactNode;
+    /** Replace the status glyph entirely. */
+    icon?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+declare function Result({ status, title, subTitle, extra, icon, children, className, }: ResultProps): react_jsx_runtime.JSX.Element;
+
+type CountBadgeTone = 'danger' | 'neutral' | 'accent';
+interface CountBadgeProps {
+    count?: number;
+    /** Cap the display: 100 with `max={99}` shows "99+". */
+    max?: number;
+    /** A plain dot with no number — "something changed" without a quantity. */
+    dot?: boolean;
+    tone?: CountBadgeTone;
+    /** Render at zero. Off by default. */
+    showZero?: boolean;
+    /** The thing being badged. Without one the badge renders inline on its own. */
+    children?: ReactNode;
+    className?: string;
+}
+declare function CountBadge({ count, max, dot, tone, showZero, children, className, }: CountBadgeProps): react_jsx_runtime.JSX.Element | null;
+
+type StatisticSize = 'sm' | 'md' | 'lg';
+type StatisticTone = 'default' | 'success' | 'danger' | 'muted';
+interface StatisticProps {
+    title?: ReactNode;
+    value: ReactNode;
+    /** Fixed decimal places. Applied only to a numeric `value`. */
+    precision?: number;
+    /** Sits before/after the figure at a smaller size — a currency mark, a unit. */
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    tone?: StatisticTone;
+    size?: StatisticSize;
+    className?: string;
+}
+declare function Statistic({ title, value, precision, prefix, suffix, tone, size, className, }: StatisticProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+interface AvatarProps {
+    src?: string;
+    /** Used for the initials fallback and the image alt text. */
+    name?: string;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    className?: string;
+}
+declare function Avatar({ src, name, size, status, className }: AvatarProps): react_jsx_runtime.JSX.Element;
+interface AvatarGroupProps {
+    children: ReactNode;
+    /** Show at most this many avatars; the rest collapse into a +N chip. */
+    max?: number;
+    /** Size of the children — used for the overlap + overflow-chip geometry.
+     *  Give the child Avatars this same size. */
+    size?: AvatarSize;
+    className?: string;
+}
+declare function AvatarGroup({ children, max, size, className }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+type BannerTone = 'info' | 'success' | 'warning' | 'danger';
+/**
+ * How loudly the banner speaks.
+ *
+ * `subtle` (the default, and what every existing caller renders) is a tinted
+ * panel that sits politely in a form. `solid` is a saturated full-contrast bar
+ * for a condition the user must not miss and cannot work around — a till that
+ * has lost the server and cannot take payment. The subtle version of that
+ * message is a bug: a cashier who misses it takes money for a sale that will
+ * not complete.
+ */
+type BannerEmphasis = 'subtle' | 'solid';
+interface BannerProps {
+    tone?: BannerTone;
+    emphasis?: BannerEmphasis;
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Override the default tone icon. */
+    icon?: ReactNode;
+    /** When provided, renders a dismiss × that calls this. */
+    onDismiss?: () => void;
+    /**
+     * Pin to the top of the scroll container while its content scrolls past.
+     *
+     * `position: sticky`, so the banner still occupies layout — it pushes the
+     * page down rather than covering the first row of it, which is what a
+     * blocking notice needs. Defeated by any ancestor with `overflow: hidden`.
+     */
+    sticky?: boolean;
+    className?: string;
+}
+declare function Banner({ tone, emphasis, title, children, icon, onDismiss, sticky, className, }: BannerProps): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    items: TabItem[];
+    value: string;
+    onChange: (id: string) => void;
+    variant?: 'underline' | 'pill';
+    className?: string;
+}
+declare function Tabs({ items, value, onChange, variant, className }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    defaultOpenIds?: string[];
+    /** Controlled open set — when provided, the component stops tracking its own. */
+    openIds?: string[];
+    onOpenChange?: (ids: string[]) => void;
+    allowMultiple?: boolean;
+    className?: string;
+}
+declare function Accordion({ items, defaultOpenIds, openIds, onOpenChange, allowMultiple, className, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps {
+    content: ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Hover delay before showing, in ms. */
+    delay?: number;
+    children: ReactNode;
+}
+declare function Tooltip({ content, side, delay, children }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface ColoredBadgeProps {
+    /** Tailwind classes for the badge color, e.g. `bg-green-100 text-green-800`.
+     *  Keep a per-app palette map rather than hardcoding colors at call sites. */
+    colorClass: string;
+    children: ReactNode;
+    /** `xs` = 10px (dense list cells), `sm` = 12px / px-2 (default), `md` =
+     *  12px / px-2.5 (matches StatusBadge). */
+    size?: 'xs' | 'sm' | 'md';
+    /** Capitalize each word — useful for raw status strings like `in_progress`
+     *  (rendered as `In Progress`). Default false. */
+    capitalize?: boolean;
+}
+/**
+ * ColoredBadge — a small rounded-full pill whose colors are supplied as a
+ * Tailwind class string. Generic counterpart to StatusBadge (which maps status
+ * strings to semantic groups); use this when the caller already knows the color.
+ */
+declare function ColoredBadge({ colorClass, children, size, capitalize }: ColoredBadgeProps): react_jsx_runtime.JSX.Element;
+
+type SemanticGroup = 'success' | 'active' | 'queued' | 'info' | 'pending' | 'warning' | 'danger' | 'draft' | 'neutral';
+declare function StatusBadgeProvider({ groups, children, }: {
+    groups: Record<string, SemanticGroup>;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+interface StatusBadgeProps {
+    status: string;
+}
+declare function StatusBadge({ status }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    /** Bold heading, e.g. "No invoices yet". */
+    title?: string;
+    /** Muted primary line. Defaults to "Nothing here yet." when neither
+     *  `title` nor `message` is given. */
+    message?: string;
+    /** Secondary muted line. (`hint` is an accepted alias.) */
+    description?: string;
+    /** @deprecated alias for `description`. */
+    hint?: string;
+    /** Frame around the content: `dashed` (default), `card` (bordered surface),
+     *  or `none`. */
+    variant?: 'dashed' | 'card' | 'none';
+    /** @deprecated set `variant="none"` instead. */
+    frameless?: boolean;
+    /** Show the placeholder icon. Defaults to true (false for `variant="card"`). */
+    icon?: boolean;
+    /** Action(s) rendered under the text. */
+    children?: ReactNode;
+}
+/**
+ * EmptyState — placeholder for empty lists/panes. Supersedes the per-portal
+ * copies: accepts both the `title`/`description` and `message`/`hint`/`frameless`
+ * prop shapes, with a single unified look.
+ */
+declare function EmptyState({ title, message, description, hint, variant, frameless, icon, children, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface PageHeaderProps {
+    title: string;
+    /** Muted line under the title. (`subtitle` is an accepted alias.) */
+    description?: string;
+    /** @deprecated alias for `description`. */
+    subtitle?: string;
+    /** Right-aligned actions. (`children` is also accepted.) */
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * PageHeader — a page/section title with an optional muted description and a
+ * right-aligned actions slot. Accepts both the `description`/`actions` and the
+ * `subtitle`/`children` prop shapes the portals previously used locally.
+ */
+declare function PageHeader({ title, description, subtitle, actions, children }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface LoadingSpinnerProps {
+    /** Ring diameter: `sm` = 20px, `md` = 32px (default), `lg` = 48px. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Wrapper padding utility (default `py-12`). Pass `''` to remove. */
+    padding?: string;
+    /**
+     * Caption under the ring, e.g. "Signing in…". Naming what is happening beats
+     * a bare ring on a full-screen wait, where there is nothing else on the page
+     * to infer it from. Adds `role="status"` so it is announced.
+     */
+    label?: ReactNode;
+    /** Extra classes on the centering wrapper. */
+    className?: string;
+}
+/**
+ * LoadingSpinner — a centered animated ring for pending/loading regions.
+ * (Distinct from the shell's internal "Loading…" text used inside data grids.)
+ */
+declare function LoadingSpinner({ size, padding, label, className }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Severity — the health subset of the shell's status vocabulary.
+ *
+ * The shell already speaks `success | warning | danger` everywhere status has a
+ * colour (`StatusBadge`'s `SemanticGroup`, `Banner`'s `BannerTone`,
+ * `ConfirmDialog`'s `variant`). Health surfaces reuse those three words rather
+ * than introducing an ok/warn/crit dialect that would mean the same thing in a
+ * different language — a consumer mapping one to the other is a bug waiting to
+ * happen. The type is deliberately narrower than `SemanticGroup`: an alarm
+ * marker has exactly three things to say.
+ *
+ * "No severity" is expressed as the ABSENCE of a tone (`undefined`/`null`), not
+ * as a fourth member. Two different facts collapse into it — no reading at all,
+ * and a reading with nothing to judge it against — and both must render as
+ * "unknown" rather than borrowing the calm green of a measured healthy value.
+ * See `MetricBar`, which keeps them apart.
+ *
+ * A severity usually arrives from a backend rollup, so it crosses a JSON
+ * boundary where the compiler cannot follow it. `resolveSeverity` is what the
+ * components call: a token the shell does not recognise renders a LOUD unknown
+ * marker and logs, it never renders nothing. An alarm surface that silently
+ * stops alarming is the one failure these components exist to prevent, so it is
+ * also the one failure they must not have themselves.
+ */
+/** Health tone. Same three words the rest of the shell uses for status colour. */
+type SeverityTone = 'success' | 'warning' | 'danger';
+/** True when `value` is one of the three tones. Exported so a consumer can
+ *  validate a rollup at the fetch boundary — where a bad token can still be
+ *  reported against its payload — rather than discovering it as a wrong pixel. */
+declare function isSeverityTone(value: unknown): value is SeverityTone;
+/**
+ * Severity of `value` against its bounds, or `null` when nothing can be said.
+ *
+ * Both bounds are INCLUSIVE (`>=`): a disk at exactly its `crit` number is
+ * `danger`. Either bound may be omitted — a metric with only a `crit` still
+ * judges — but with neither the answer is `null`, never `success`: no threshold
+ * is hardcoded here, not even as a fallback, so with nothing to measure against
+ * there is no verdict to report.
+ *
+ * A non-finite bound counts as omitted, not as a bound that nothing exceeds.
+ * `NaN >= NaN` is false, so an unguarded `warn={NaN}` would have quietly
+ * returned `success` — a verdict invented out of a missing threshold.
+ */
+declare function severityOf(value: number | null | undefined, warn?: number | null, crit?: number | null): SeverityTone | null;
+
+interface MetricBarProps {
+    /** Row label — `CPU`, `Memory`, `Disk`. Rendered in a fixed-width column so
+     *  a stack of rows aligns. */
+    label?: ReactNode;
+    /** The measured value. `null` / `undefined` means NO READING — rendered as
+     *  unknown, never as 0. */
+    value: number | null | undefined;
+    /** Value mapped to a full bar. Default 100. Must be a positive finite number:
+     *  it is the divisor, so `0`, a negative or `NaN` is not a scale. Given one,
+     *  the row prints the value but draws no proportional bar and no ticks —
+     *  there is nothing truthful to draw them against. */
+    max?: number;
+    /** Warning bound, in the same unit as `value`. Inclusive (`>=`). */
+    warn?: number | null;
+    /** Critical bound, in the same unit as `value`. Inclusive (`>=`). */
+    crit?: number | null;
+    /** Forces the tone when the caller judges severity itself (e.g. a rollup
+     *  served by the backend). Overrides `warn`/`crit` for colour; the ticks
+     *  still render wherever `warn`/`crit` say. */
+    severity?: SeverityTone;
+    /** Trailing secondary text — `10.9 / 16 GiB`, `4 vCPU`. Hidden when there is
+     *  no reading, where the row has something more important to say. */
+    detail?: ReactNode;
+    /** Formats the printed value. Default: one decimal plus `%` on the default
+     *  0–100 scale, the bare number on any other `max` (a custom scale is not a
+     *  percentage, and printing one would be a lie). */
+    formatValue?: (value: number) => string;
+    /** Wording for "no reading". Default `no data`. */
+    emptyLabel?: string;
+    /** `sm` (default) — the compact row that stacks three to a card.
+     *  `md` — bigger value type for a standalone stat. Neither draws a frame;
+     *  wrap in a `Card` (or your own) if you want one. */
+    size?: 'sm' | 'md';
+    /** Accessible name for the meter. Defaults to `label` when it's a string. */
+    ariaLabel?: string;
+    className?: string;
+}
+declare function MetricBar({ label, value, max, warn, crit, severity, detail, formatValue, emptyLabel, size, ariaLabel, className, }: MetricBarProps): react_jsx_runtime.JSX.Element;
+
+/** Visual category for a milestone. Drives shape + colour so the user can
+ *  tell different milestone types apart at a glance. */
+type MilestoneKind = 'default' | 'dfm' | 'shipment' | 'testing' | 'completion';
+/** A single point on the timeline. Generic, product-agnostic: the consuming
+ *  app maps its domain records to this shape in a thin wrapper. */
+interface Milestone {
+    /** Stable key — used for React keys and the active-dot lookup. */
+    key: string;
+    /** Short label rendered above the dot when active / hovered. */
+    label: string;
+    /** ISO date string (`YYYY-MM-DD`) for the milestone. Null / undefined =
+     *  "not reached yet"; renders as a faded outline dot at the *expected*
+     *  position (between its neighbours) instead of a real coordinate. */
+    date: string | null | undefined;
+    /** Optional second line for the hover tooltip. */
+    detail?: string;
+    /** Optional click handler so the caller can open a related entity. */
+    onClick?: () => void;
+    /** Optional visual category — defaults to `'default'` (blue circle). */
+    kind?: MilestoneKind;
+    /** Optional phase grouping — milestones sharing the same `phase` value
+     *  render with a bracket below the bar showing they happened in parallel
+     *  (e.g. two concurrent QA steps). Lookup the human-readable name from
+     *  `MilestoneTimelineProps.phaseLabels`. */
+    phase?: string;
+}
+interface MilestoneTimelineProps {
+    /** Title rendered above the bar — e.g. "Mould Development Timeline". */
+    title: string;
+    /** Ordered milestones from earliest expected to latest expected. The order
+     *  controls the fallback position for milestones with no date yet. */
+    milestones: Milestone[];
+    /** Optional sub-title to the right of the title (e.g. lead-time summary).
+     *  When omitted, an auto lead-time summary is computed from the dates. */
+    summary?: string;
+    /** Optional explicit right edge — when provided, the bar always ends here
+     *  rather than padding to today. Used when the axis should stop at a known
+     *  final milestone and not run on past it. */
+    endDate?: string | null;
+    /** Maps `Milestone.phase` keys to the human-readable phase label that
+     *  appears under the bracket — e.g. `{ qa: 'QA & Sample' }`. Phases
+     *  without an entry fall back to the phase key itself. */
+    phaseLabels?: Record<string, string>;
+}
+/**
+ * Static date-axis bar showing a sequence of milestones along a single line.
+ *
+ * - No scrubber / playback / interpolation — milestones don't move.
+ * - "Not reached yet" milestones (no date) render as outline dots wedged at
+ *   their expected position so the user can see what's still pending.
+ * - First / last milestones render as inline edge labels; middle ones stagger
+ *   above/below the bar so adjacent labels never collide.
+ * - Milestones sharing a `phase` (2+ members) get a bracket marking parallel
+ *   work. The filled portion of the bar never runs past today.
+ *
+ * Product-agnostic: it takes generic `Milestone` data as props. Map your
+ * domain records to the `Milestone` shape in a thin wrapper at the call site.
+ */
+declare function MilestoneTimeline({ title, milestones, summary, endDate, phaseLabels }: MilestoneTimelineProps): react_jsx_runtime.JSX.Element;
+
+/** Default item shape — overridable via the accessor props for any other shape. */
+interface ContainerFillItem {
+    quantity?: number | null;
+    actual_qty?: number | null;
+    _isNew?: boolean;
+}
+interface ContainerFillChartProps<T = ContainerFillItem> {
+    /** Line items to chart. Each contributes `qty * getVolume(item)` to the total. */
+    items: T[];
+    /**
+     * Per-unit volume (m³) for an item. The lifted app concern — return 0 when
+     * unknown. Total volume per item is `quantity * getVolume(item)`.
+     */
+    getVolume: (item: T) => number;
+    /**
+     * Single-bar quantity source when no actuals are present:
+     *  - 'instruction' (default): use the instruction quantity.
+     *  - 'actual':                use the actual quantity (falling back to instruction).
+     *
+     * When actuals exist on at least one item the chart auto-switches to dual-bar
+     * mode regardless of `qtyField` — instruction (blue) and loaded (green) are
+     * layered into the same bar so both are visible at once.
+     */
+    qtyField?: 'instruction' | 'actual';
+    /** Show the "new items" indicator next to the row count. */
+    showNewIndicator?: boolean;
+    /** Instruction quantity accessor. Defaults to `item.quantity`. */
+    getInstructionQty?: (item: T) => number | null | undefined;
+    /** Actual/loaded quantity accessor. Defaults to `item.actual_qty`. */
+    getActualQty?: (item: T) => number | null | undefined;
+    /**
+     * Whether an item should count as charted at all. Defaults to "has a non-empty
+     * key" — i.e. items whose volume source identifies a real part. By default
+     * every item is charted; supply this to drop placeholder/empty rows.
+     */
+    isFilled?: (item: T) => boolean;
+    /** Whether an item is newly added (drives `showNewIndicator`). Defaults to `item._isNew`. */
+    isNew?: (item: T) => boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Container-fill chart for shipping loading lists. Presentational only — pass
+ * `getVolume` to inject per-unit volumes; the chart owns the container math and
+ * the instruction-vs-loaded dual-bar rendering.
+ */
+declare function ContainerFillChart<T = ContainerFillItem>({ items, getVolume, qtyField, showNewIndicator, getInstructionQty, getActualQty, isFilled, isNew, className, style, }: ContainerFillChartProps<T>): react_jsx_runtime.JSX.Element | null;
+
+interface MarkdownProps {
+    children: string;
+    className?: string;
+}
+declare function Markdown({ children, className }: MarkdownProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * One help article. Generic shape — the consuming portal maps its own
+ * help-doc records onto this before passing them in.
+ */
+interface HelpCenterDoc {
+    id: string;
+    slug: string;
+    title: string;
+    body: string;
+    /** Grouping key (e.g. `'getting_started'`). */
+    category: string;
+    /** Group header text (e.g. "Getting Started"). */
+    category_label: string;
+    /** When `false`, a "Draft" badge is shown. Omit for always-published docs. */
+    is_published?: boolean;
+}
+interface HelpCenterProps {
+    docs: HelpCenterDoc[];
+    loading?: boolean;
+    /**
+     * Category keys in display order. Categories not listed fall to the end in
+     * first-seen order. Without it, groups follow first-seen order.
+     */
+    categoryOrder?: string[];
+    /** Show the New/Edit affordances (consumer gates this on write permission). */
+    canEdit?: boolean;
+    onNew?: () => void;
+    onEdit?: (doc: HelpCenterDoc) => void;
+    /** Custom body renderer; defaults to preformatted text. */
+    renderBody?: (doc: HelpCenterDoc) => ReactNode;
+    emptyMessage?: string;
+}
+/**
+ * In-app help / documentation viewer. Two panes: a searchable, collapsible
+ * category tree on the left, the selected article's body on the right.
+ *
+ * Presentational only — it holds no API or permission knowledge. The consumer
+ * fetches its own help docs, maps them to `HelpCenterDoc`, and (for editors)
+ * wires `canEdit` + `onNew`/`onEdit` to its own create/edit UI.
+ *
+ * Search is client-side: a case-insensitive substring match over title, body
+ * and category label. While searching, matching groups auto-expand.
+ */
+declare function HelpCenter({ docs, loading, categoryOrder, canEdit, onNew, onEdit, renderBody, emptyMessage, }: HelpCenterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Two-pane layout with a drag-to-resize sidebar (left or right).
+ *
+ * Renders flush (`h-full w-full`) — pair it with a `flushBody` window so the
+ * sidebar runs from just under the title bar to the very bottom with no
+ * surrounding padding. The user can drag the sidebar's inner edge to resize
+ * it; pass `storageKey` to persist that width across reopens, or double-click
+ * the handle to reset to `defaultWidth`. Set `side="right"` to put the sidebar
+ * on the right (e.g. a detail-panel layout).
+ *
+ * @example
+ * <SidebarLayout sidebar={<MyNav />} storageKey="todo.sidebarWidth">
+ *   <MyContent />
+ * </SidebarLayout>
+ */
+interface SidebarLayoutProps {
+    /** Content of the left sidebar pane. When `sidebarTop`/`sidebarBottom` are
+     *  set this is the scrolling middle region (the filter nav); otherwise it is
+     *  the whole pane. */
+    sidebar: ReactNode;
+    /** Optional node pinned at the TOP of the sidebar, above `sidebar`, in a
+     *  padded non-scrolling region (e.g. a primary "New X" `SidebarActionButton`).
+     *  The list-window convention: primary create action lives here. */
+    sidebarTop?: ReactNode;
+    /** Optional node pinned at the BOTTOM of the sidebar, below `sidebar`, in a
+     *  padded, top-bordered non-scrolling region (e.g. an "Export CSV" button).
+     *  The middle `sidebar` grows to fill, so this stays flush to the bottom. */
+    sidebarBottom?: ReactNode;
+    /** Content of the main pane (opposite the sidebar). */
+    children: ReactNode;
+    /** Which side the sidebar sits on. Default `'left'`. When `'right'`, the
+     *  sidebar renders on the right with the resize handle on its left edge. */
+    side?: 'left' | 'right';
+    /** localStorage key to persist the sidebar width across reopens. When set,
+     *  the last dragged width is restored on mount. Omit for session-only width. */
+    storageKey?: string;
+    /** Initial sidebar width in px (used when nothing is persisted). Default 256. */
+    defaultWidth?: number;
+    /** Minimum sidebar width in px. Default 180. */
+    minWidth?: number;
+    /** Maximum sidebar width in px. Default 480. */
+    maxWidth?: number;
+    /** Extra classes for the outer flex row. */
+    className?: string;
+    /** Classes for the sidebar pane (background, border, …). The pane is a flex
+     *  column that scrolls its own overflow. Defaults to a light-grey,
+     *  right-bordered sidebar. */
+    sidebarClassName?: string;
+    /** Classes for the main content pane. Defaults to a white background. */
+    contentClassName?: string;
+}
+declare function SidebarLayout({ sidebar, sidebarTop, sidebarBottom, children, side, storageKey, defaultWidth, minWidth, maxWidth, className, sidebarClassName, contentClassName, }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Full-width action button for the `SidebarLayout` `sidebarTop` / `sidebarBottom`
+ * slots — the standard list-window pattern of a primary "New X" button pinned
+ * at the top and a secondary action (e.g. "Export CSV") pinned at the bottom.
+ *
+ * `variant="primary"` is the solid-blue create button; `"secondary"` is the
+ * white outline button. Pass `hotkey` (e.g. `ALT_SHIFT_N`) to render the small
+ * keyboard-hint chip the shell's `useNewHotkey` binds.
+ *
+ * @example
+ * <SidebarLayout
+ *   sidebarTop={<SidebarActionButton hotkey={ALT_SHIFT_N} onClick={onNew}>New Invoice</SidebarActionButton>}
+ *   sidebar={<StatusNav />}
+ * >…</SidebarLayout>
+ */
+interface SidebarActionButtonProps {
+    children: ReactNode;
+    onClick?: () => void;
+    /** Solid-blue create button (`'primary'`, default) or white outline (`'secondary'`). */
+    variant?: 'primary' | 'secondary';
+    /** Keyboard-hint label rendered as a trailing chip, e.g. `ALT_SHIFT_N`. */
+    hotkey?: string;
+    disabled?: boolean;
+    type?: 'button' | 'submit';
+    title?: string;
+    /** Extra classes appended after the variant styles (escape hatch). */
+    className?: string;
+}
+declare function SidebarActionButton({ children, onClick, variant, hotkey, disabled, type, title, className, }: SidebarActionButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Presentational building blocks for SidebarLayout filter sidebars (status
+ * buckets, categories, …) — the same item + group-label markup every list
+ * window renders. Data wiring (count fetching) stays in the consuming app.
+ */
+declare function SidebarGroupLabel({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarNavItem({ label, count, active, onClick, severity }: {
+    label: string;
+    count?: number;
+    active: boolean;
+    onClick: () => void;
+    /**
+     * Optional health marker — a small dot before the label, in the shell's
+     * status vocabulary (`success | warning | danger`). For sidebars that double
+     * as an alarm surface: a problem several levels down inside a section stays
+     * visible on the always-on nav item that leads to it, without the operator
+     * having to open anything.
+     *
+     * Roll the tone up in the consuming app (worst-of its children) — the item
+     * renders a severity, it never computes one. Omitting it is not a claim of
+     * health, it is no claim at all, and renders exactly as an item did before
+     * this prop existed.
+     *
+     * A tone that arrives from a backend rollup has not been near the compiler,
+     * so an unrecognised token (`'crit'`, `'critical'`, a stale enum) renders a
+     * visible "unknown severity" marker and logs — never nothing. This item is
+     * often the ONLY place a deep alarm surfaces; a marker that quietly vanishes
+     * on a bad token would turn the safety feature into the outage.
+     */
+    severity?: SeverityTone;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Generic top navigation bar. A horizontal row of tab-style links with an
+ * optional brand on the left and free-form actions on the right. Self-contained
+ * and styled with the shell's Tailwind utilities, so it themes for free.
+ *
+ * Controlled: pass `activeKey` and handle `onSelect`. The active item gets an
+ * accent underline. Items can carry an `icon`, a `badge` (e.g. a count) and be
+ * `disabled`.
+ */
+interface TopNavItem {
+    /** Stable key — what `onSelect` receives and `activeKey` matches. */
+    key: string;
+    label: ReactNode;
+    /** Optional leading icon (typically a 4×4 svg). */
+    icon?: ReactNode;
+    /** Optional trailing badge — a count, dot, "New", etc. */
+    badge?: ReactNode;
+    disabled?: boolean;
+}
+interface TopNavProps {
+    items: TopNavItem[];
+    /** Key of the active item — it gets the accent underline. */
+    activeKey?: string;
+    onSelect?: (key: string) => void;
+    /** Left slot — logo / product title. */
+    brand?: ReactNode;
+    /** Right slot — actions (buttons, search, avatar…). Pinned to the far right. */
+    actions?: ReactNode;
+    className?: string;
+}
+declare function TopNav({ items, activeKey, onSelect, brand, actions, className }: TopNavProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Generic breadcrumb trail. Self-contained and styled with the same Tailwind
+ * utilities the shell already ships, so consumers get it for free.
+ *
+ * Pass an ordered list of `items` from root → current. Every crumb except the
+ * last renders as a button when it has an `onClick`; the last crumb is treated
+ * as the current location — rendered inert with `aria-current="page"`. When the
+ * trail is long, set `maxItems` to collapse the middle into an ellipsis
+ * (`first … last-n` ), keeping the first and the tail visible.
+ */
+interface BreadcrumbItem {
+    /** Visible label. */
+    label: ReactNode;
+    /** Optional leading icon (typically a 3.5×3.5 svg). */
+    icon?: ReactNode;
+    /** Navigate to this crumb. Omitted on the current (last) crumb. */
+    onClick?: () => void;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    /** Node rendered between crumbs. Defaults to a chevron. */
+    separator?: ReactNode;
+    /** Collapse the middle to an ellipsis when there are more than this many
+     *  crumbs. `0` (default) never collapses. */
+    maxItems?: number;
+    className?: string;
+}
+declare function Breadcrumbs({ items, separator, maxItems, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Unified popup menu component — used for all context menus, dropdowns, and flyouts.
+ * Reads --menu-density CSS variable: 'tight', 'normal' (default), or 'large'.
+ */
+interface PopupMenuProps {
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+    onClose?: () => void;
+    minWidth?: number;
+    /** Render into document.body instead of in place. Required when the menu
+     *  is opened from INSIDE a window: the window panel is a transformed /
+     *  backdrop-filtered `overflow-hidden` container, which both re-anchors
+     *  `position: fixed` descendants to itself and clips them — a menu
+     *  positioned at viewport coordinates ends up offset or invisible.
+     *  Portaling restores true viewport positioning. */
+    portal?: boolean;
+}
+/** Container for a popup menu — auto-clamps to stay within viewport */
+declare function PopupMenu({ children, style, className, onClose, minWidth, portal }: PopupMenuProps): react_jsx_runtime.JSX.Element;
+/** A clickable menu item */
+declare function PopupMenuItem({ onClick, children, className, danger, disabled }: {
+    onClick?: () => void;
+    children: ReactNode;
+    className?: string;
+    danger?: boolean;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+/** A divider line between menu items */
+declare function PopupMenuDivider(): react_jsx_runtime.JSX.Element;
+/** A section header label */
+declare function PopupMenuLabel({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Two presentations:
+ *
+ * 1. toast.success / error / info — brief operation feedback, top-center,
+ *    auto-dismiss (success/error ~3s, info ~4.5s). The everyday "what just
+ *    happened" feedback — most messages want this.
+ * 2. toast.notify — system notification, top-right card, stays 10s, dismissible.
+ *    For an alert worth lingering on; reach for it deliberately, not by default.
+ *
+ * (Historically `toast.info` rendered the top-right notification card; it now
+ * renders a brief toast — that persistent card moved to `toast.notify`.)
+ */
+type ToastPlacement = 'top' | 'bottom';
+interface ToastOptions {
+    /** Milliseconds before auto-dismiss. Ignored when `sticky`. */
+    duration?: number;
+    /**
+     * Stay until dismissed. For a message the user must actually act on — the
+     * kind that must not scroll past while they are looking at a customer.
+     * Implies tap-to-dismiss is the only way out, which it already is.
+     */
+    sticky?: boolean;
+    /**
+     * `bottom` centres toasts along the bottom edge. On a till the top of the
+     * screen is the cart total and the bottom is nearest the hand.
+     */
+    placement?: ToastPlacement;
+    /**
+     * Drop a message identical to one already showing, and RESTART its timer
+     * rather than stacking a second copy. A failing poll otherwise writes the
+     * same sentence a dozen times. The restart matters: the user asked twice, so
+     * the message should persist, not expire on the first one's schedule.
+     */
+    dedupe?: boolean;
+}
+declare const toast: {
+    success: (message: string, opts?: ToastOptions) => void;
+    error: (message: string, opts?: ToastOptions) => void;
+    info: (message: string, opts?: ToastOptions) => void;
+    notify: (message: string, opts?: {
+        duration?: number;
+    }) => void;
+    /**
+     * Set defaults for every subsequent toast. Call once at app startup; later
+     * calls replace the whole object rather than merging, so a consumer sets its
+     * policy in one place. Per-call options still take precedence.
+     */
+    configure: (next: ToastOptions) => void;
+};
+
+type DialogSize = 'sm' | 'md' | 'lg';
+interface DialogProps {
+    open: boolean;
+    /** Called for Escape, a backdrop click, and the close control. */
+    onClose: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Action row, right-aligned below the body. */
+    footer?: ReactNode;
+    /**
+     * Escape and backdrop clicks do nothing — the only way out is an action in
+     * the footer. For a state the user must actually resolve rather than dismiss,
+     * such as a sale whose outcome is unknown. Use it sparingly: a dialog that
+     * cannot be dismissed is a dead end if its actions ever fail to render.
+     */
+    blocking?: boolean;
+    size?: DialogSize;
+    /**
+     * Element to focus on open. Defaults to the first focusable thing in the
+     * dialog — which for a destructive confirm should be Cancel, not the button
+     * that does the irreversible thing.
+     */
+    initialFocus?: RefObject<HTMLElement | null>;
+    className?: string;
+}
+declare function Dialog({ open, onClose, title, children, footer, blocking, size, initialFocus, className, }: DialogProps): react_jsx_runtime.JSX.Element | null;
+
+type DrawerSide = 'right' | 'left' | 'bottom';
+type DrawerSize = 'sm' | 'md' | 'lg';
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    side?: DrawerSide;
+    size?: DrawerSize;
+    title?: ReactNode;
+    /** Action row pinned to the bottom edge, outside the scrolling body. */
+    footer?: ReactNode;
+    children?: ReactNode;
+    /** Escape and the scrim do nothing. See Dialog's note before reaching for it. */
+    blocking?: boolean;
+    initialFocus?: RefObject<HTMLElement | null>;
+    className?: string;
+}
+declare function Drawer({ open, onClose, side, size, title, footer, children, blocking, initialFocus, className, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Focus containment and scroll locking for a modal surface — the two things
+ * Headless UI was doing for `ConfirmDialog` before it was rewritten to import
+ * nothing.
+ *
+ * Both are small, and both are the kind of small that is wrong in a way nobody
+ * notices until someone navigates by keyboard: focus tabbing out of a dialog
+ * onto the page behind it reads as the dialog having closed, and a page that
+ * scrolls under a fixed overlay loses the user's place when it reopens.
+ */
+
+/**
+ * While `active`, keep Tab inside `ref`, move focus in on open, and restore it
+ * to wherever it came from on close.
+ *
+ * Restoring matters more than trapping: a dialog opened from a button in a
+ * toolbar should hand focus back to that button, or a keyboard user is dumped
+ * at the top of the document and has to find their place again.
+ */
+declare function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean, initialFocus?: RefObject<HTMLElement | null>): void;
+declare function useScrollLock(active: boolean): void;
+
+interface ConfirmOptions {
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: 'danger' | 'warning' | 'info';
+}
+type ConfirmFn = (options: ConfirmOptions | string) => Promise<boolean>;
+declare const useConfirm: () => ConfirmFn;
+declare const confirm: (opts: ConfirmOptions | string) => Promise<boolean>;
+interface DestructiveConfirmOptions {
+    title?: string;
+    message: string;
+    /**
+     * Require typing this word (case-sensitive) before the action is enabled —
+     * for something genuinely irreversible at scale, like dropping a tenant.
+     *
+     * OPTIONAL since 4.18.0. Omit it for a plain two-button destructive confirm.
+     * Type-to-confirm assumes a keyboard, and a touch device that has none (a
+     * till, a warehouse scanner) cannot satisfy it at all — the dialog becomes an
+     * unanswerable question. Ask for a word when the cost of a mis-tap is high
+     * enough to justify making the user work; not by default.
+     */
+    confirmWord?: string;
+    /** Label for the action button when there is no `confirmWord`. */
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: 'danger' | 'warning';
+}
+declare const confirmDestructive: (opts: DestructiveConfirmOptions) => Promise<boolean>;
+interface PromptOptions {
+    title?: string;
+    message?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    allowEmpty?: boolean;
+}
+declare const prompt: (opts: PromptOptions | string) => Promise<string | null>;
+declare function ConfirmProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+interface GridColumn {
+    key: string;
+    title: string;
+    width?: number;
+    readOnly?: boolean;
+    align?: 'left' | 'right' | 'center';
+}
+type CellStyle = {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    fontSize?: 'sm' | 'base' | 'lg' | 'xl';
+};
+interface EditableGridProps {
+    columns: GridColumn[];
+    data: string[][];
+    onChange: (data: string[][]) => void;
+    onColumnsChange?: (columns: GridColumn[]) => void;
+    /** Fixed row count — disables add/delete rows */
+    fixedRows?: boolean;
+    minRows?: number;
+    maxHeight?: string;
+    /** Per-cell text styling, keyed by `${row}:${col}`. */
+    cellStyles?: Record<string, CellStyle>;
+    /** Notifies the parent when the focused/edited cell changes. */
+    onFocusChange?: (pos: {
+        row: number;
+        col: number;
+    } | null) => void;
+    /** Notifies the parent when the selection rectangle changes. */
+    onSelectionChange?: (sel: {
+        anchor: {
+            row: number;
+            col: number;
+        };
+        end: {
+            row: number;
+            col: number;
+        };
+    } | null) => void;
+}
+/**
+ * Lightweight editable grid with spreadsheet-like features:
+ * - Click + drag to select a range of cells
+ * - Ctrl+C / Cmd+C to copy selection as tab-delimited text
+ * - Multi-cell paste from spreadsheets (Ctrl+V)
+ * - Tab/Enter/Arrow keyboard navigation
+ */
+declare function EditableGrid({ columns, data, onChange, onColumnsChange, fixedRows, minRows, maxHeight, cellStyles, onFocusChange, onSelectionChange }: EditableGridProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Generic, drag-and-drop Kanban board. Self-contained (native HTML5 DnD, no
+ * library) and styled with the same Tailwind utilities + `grid-scroll` class the
+ * shell already ships, so consumers get it for free.
+ *
+ * Group items into columns with `columnOf`, render each card with `renderCard`.
+ * Cards can be dragged **between** columns (to change which column they belong
+ * to) and **within** a column (to reorder / prioritise). On drop, `onMove(id,
+ * toColumn, toIndex)` fires — `toIndex` is the target position within `toColumn`
+ * measured against that column's cards *excluding* the dragged one, so the
+ * consumer can persist an order (e.g. midpoint between neighbours) that every
+ * user then sees. Sort each column by that order via `sortInColumn`.
+ *
+ * Affordance: a blue **drop-line** shows exactly where the card will land
+ * (between two cards, in either the source or a different column), and the
+ * target column highlights. The dragged card dims. The insertion point tracks
+ * `dragenter` (once per card crossed) so the line stays stable rather than
+ * flickering. Pass `onAddItem` to give each column a "+ Add item" button at its
+ * foot, revealed on column hover / keyboard focus.
+ *
+ * With no items the board is replaced by `emptyState` — right when the items
+ * are the whole story, wrong when the columns are (a pipeline the user just
+ * configured has a shape worth showing, and a board with no drop target can't
+ * take its first card). Pass `showColumnsWhenEmpty` for that case and the
+ * normal layout draws with every column on its `columnEmptyText` placeholder.
+ */
+interface KanbanColumn {
+    /** Stable column key — what `columnOf` returns and `onMove` receives. */
+    value: string;
+    label: string;
+    /** Tailwind text + bg classes for the column header. */
+    accent?: string;
+    /** Tailwind bg class for the header dot. */
+    dot?: string;
+}
+interface KanbanProps<T> {
+    items: T[];
+    columns: KanbanColumn[];
+    columnOf: (item: T) => string;
+    getId: (item: T) => string;
+    /**
+     * Fired on drop. `toColumn` is the destination column's `value`; `toIndex` is
+     * the target position within that column measured against its cards
+     * **excluding** the dragged card (0 = top). A same-column drop that wouldn't
+     * change the order is not reported.
+     */
+    onMove: (id: string, toColumn: string, toIndex: number) => void;
+    /** Inner card content — the card chrome (border, padding, hover) is provided. */
+    renderCard: (item: T) => ReactNode;
+    onCardClick?: (item: T) => void;
+    /** Comparator for ordering within a column — sort by the persisted order field. */
+    sortInColumn?: (a: T, b: T) => number;
+    isLoading?: boolean;
+    loadingText?: string;
+    /** Shown INSTEAD of the board when there are no items at all. */
+    emptyState?: ReactNode;
+    /**
+     * Draw the board — headers, empty columns, drop targets — even with no items,
+     * instead of replacing it with `emptyState`. Opt in when the columns are
+     * themselves the information (a configurable pipeline the user just defined)
+     * or when an empty board still needs somewhere to drop a card into. Default
+     * `false` keeps the `emptyState` behaviour every existing caller relies on.
+     */
+    showColumnsWhenEmpty?: boolean;
+    /** Placeholder text inside an empty column. */
+    columnEmptyText?: string;
+    /**
+     * When provided, each column gets a "+ Add item" button at its foot, revealed
+     * on column hover or keyboard focus, that fires with the column's `value`.
+     */
+    onAddItem?: (toColumn: string) => void;
+    /** Label for the per-column add button. */
+    addItemText?: string;
+}
+declare function Kanban<T>({ items, columns, columnOf, getId, onMove, renderCard, onCardClick, sortInColumn, isLoading, loadingText, emptyState, showColumnsWhenEmpty, columnEmptyText, onAddItem, addItemText, }: KanbanProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pagination — a numbered page control for classic paginated tables/lists, with
+ * prev/next and optional first/last edges and ellipsis gaps. Controlled: the
+ * consumer owns `page` and updates it in `onPageChange`. Complements ListFooter
+ * (which shows counts/selection for infinite-scroll lists).
+ */
+interface PaginationProps {
+    /** Current page, 1-based. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** How many page numbers to show on each side of the current page. */
+    siblingCount?: number;
+    /** Show first/last («/») buttons. */
+    showEdges?: boolean;
+    className?: string;
+}
+declare function Pagination({ page, pageCount, onPageChange, siblingCount, showEdges, className, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+interface PaginatedResponse<T> {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: T[];
+}
+interface ColumnDef {
+    key: string;
+    label: string;
+    defaultWidth?: number;
+    minWidth?: number;
+    defaultHidden?: boolean;
+    /** Optional rich header node (e.g. icon-only column). Falls back to label. */
+    headerNode?: React.ReactNode;
+    /** Optional override for the field used to sort against. */
+    sortField?: string;
+}
+interface SortState {
+    field: string;
+    direction: 'asc' | 'desc';
+}
+
+interface DataTableColumn<T> {
+    key: string;
+    title: ReactNode;
+    /** Read this field when there is no `render`. */
+    dataIndex?: keyof T & string;
+    render?: (row: T, index: number) => ReactNode;
+    align?: 'left' | 'right' | 'center';
+    /** Px. Also feeds the table's minimum width — see `minWidth`. */
+    width?: number;
+    /** Single-line with an ellipsis. */
+    ellipsis?: boolean;
+    /**
+     * Pin to the left edge while the table scrolls horizontally. Only useful
+     * with `minWidth` set, and only worth it for the columns that identify the
+     * row — a part number, a name.
+     */
+    fixed?: 'left';
+    /**
+     * Offer a sort control. The FIELD sent to the server is `sortField ?? key`,
+     * which is what lets a column named `no` sort by `part_number` without the
+     * caller mapping names at the call site.
+     */
+    sortable?: boolean;
+    sortField?: string;
+    headerClassName?: string;
+}
+interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    /** Stable identity per row. A string names a field; a function computes it. */
+    rowKey: (keyof T & string) | ((row: T, index: number) => string);
+    /** Current sort, or null. Controlled — this component never sorts `data`. */
+    sort?: SortState | null;
+    onSortChange?: (sort: SortState | null) => void;
+    /** Server pagination. Omit entirely for an unpaginated or infinite list. */
+    pagination?: {
+        page: number;
+        pageCount: number;
+        onPageChange: (page: number) => void;
+    };
+    loading?: boolean;
+    bordered?: boolean;
+    size?: 'sm' | 'md';
+    /**
+     * Minimum table width in px. Below it the table scrolls horizontally instead
+     * of crushing columns. Usually the sum of the columns' widths.
+     */
+    minWidth?: number;
+    rowClassName?: (row: T, index: number) => string;
+    onRow?: (row: T, index: number) => {
+        onClick?: () => void;
+        className?: string;
+    };
+    emptyText?: ReactNode;
+    /** Rendered under the rows — an infinite-scroll sentinel, a totals strip. */
+    footer?: ReactNode;
+    className?: string;
+}
+declare function DataTable<T>({ columns, data, rowKey, sort, onSortChange, pagination, loading, bordered, size, minWidth, rowClassName, onRow, emptyText, footer, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ListFooterProps {
+    selectedCount: number;
+    loadedCount: number;
+    totalCount?: number;
+    label: string;
+    isFetchingMore?: boolean;
+    extra?: ReactNode;
+}
+/**
+ * Standardized footer for `EntityList`. Shows:
+ *   "[X selected — ] Y records"
+ *   "Y of Z records · Loading more..."
+ *   "All N records loaded"
+ */
+declare function ListFooter({ selectedCount, loadedCount, totalCount, label, isFetchingMore, extra, }: ListFooterProps): react_jsx_runtime.JSX.Element;
+
+interface ListLoadErrorProps {
+    /** Bold heading. Defaults to "Couldn't load this list". */
+    title?: string;
+    /** Muted explanatory line. Defaults to a generic connection/retry message. */
+    message?: string;
+    /** When provided, renders a "Try again" button that calls it (wire the
+     *  data source's `refetch`). Omit for a static, non-retryable error. */
+    onRetry?: () => void;
+    /** Frame around the content, mirroring {@link EmptyState}: `dashed`
+     *  (default), `card` (bordered surface), or `none`. */
+    variant?: 'dashed' | 'card' | 'none';
+}
+/**
+ * ListLoadError — the error counterpart to `EmptyState` for data lists. Shown
+ * when a list's fetch fails (5xx, auth expiry, network) so an outage reads as
+ * an error with a retry affordance instead of a misleading "nothing here"
+ * empty state. Visual language mirrors `EmptyState`, tinted for error.
+ */
+declare function ListLoadError({ title, message, onRetry, variant, }: ListLoadErrorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shared chart types. The charts are dependency-free inline SVG/CSS — color
+ * defaults to `currentColor` so a parent `text-*` class themes them, and
+ * geometry comes from numeric props (not Tailwind classes), so they sidestep
+ * the design-sync compiled-CSS / arbitrary-value constraints entirely.
+ */
+
+interface SparklineProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    /** Line color. Defaults to `currentColor`. */
+    stroke?: string;
+    /** Area fill under the line. Omit for a bare line. */
+    fill?: string;
+    strokeWidth?: number;
+    showDots?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+interface BarChartProps {
+    data: number[];
+    /** Optional labels under each bar. */
+    labels?: string[];
+    height?: number;
+    /** Bar color. Defaults to `currentColor`. */
+    color?: string;
+    /** Per-bar color overrides. */
+    colors?: string[];
+    /** Value mapped to a full-height bar. Defaults to the max of `data`. */
+    max?: number;
+    /** Gap between bars, in px. */
+    gap?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+interface DonutSegment {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface DonutChartProps {
+    segments: DonutSegment[];
+    size?: number;
+    thickness?: number;
+    /** Rendered in the hole, e.g. a total. */
+    centerLabel?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare function Sparkline({ data, width, height, stroke, fill, strokeWidth, showDots, className, style, }: SparklineProps): react_jsx_runtime.JSX.Element | null;
+
+declare function BarChart({ data, labels, height, color, colors, max, gap, className, style, }: BarChartProps): react_jsx_runtime.JSX.Element | null;
+
+declare function DonutChart({ segments, size, thickness, centerLabel, className, style }: DonutChartProps): react_jsx_runtime.JSX.Element;
+
+declare function DashboardTemplate(): react_jsx_runtime.JSX.Element;
+
+declare function DataTablePage(): react_jsx_runtime.JSX.Element;
+
+declare function FormLayoutPage(): react_jsx_runtime.JSX.Element;
+
+declare function CheckoutTemplate(): react_jsx_runtime.JSX.Element;
+
+declare function EmailTemplate(): react_jsx_runtime.JSX.Element;
+
+declare function ChatTemplate(): react_jsx_runtime.JSX.Element;
+
+declare function GalleryTemplate(): react_jsx_runtime.JSX.Element;
+
+interface AuthScreenProps {
+    mode?: 'login' | 'register' | 'forgot';
+}
+declare function AuthScreen({ mode }: AuthScreenProps): react_jsx_runtime.JSX.Element;
+
+interface ErrorPageProps {
+    code?: 403 | 404 | 500;
+}
+declare function ErrorPage({ code }: ErrorPageProps): react_jsx_runtime.JSX.Element;
+
+type Theme = 'system' | 'light' | 'dark' | 'pink' | 'green' | 'grey' | 'blue';
+/** Resolve a stored theme to the attribute value <html> actually carries
+ *  ('system' follows the OS dark-mode media query). */
+declare function resolveTheme(theme: string | null | undefined): string;
+/**
+ * Imperatively apply a theme/accent/custom-color prefs snapshot to <html>.
+ *
+ * useTheme() already reconciles these from prefs, but it does so via effects
+ * that only fire once prefs actually changes — and a backend-backed prefs
+ * adapter (the admin/supplier portals PATCH /auth/me/ and refetch) can take
+ * seconds to settle, leaving the repaint stalled the whole time. The shell's
+ * <Customization> calls this on every theme/accent/color click so the switch
+ * lands on the same frame, then persists through save() in the background.
+ */
+declare function applyThemePrefs(p: {
+    theme?: string | null;
+    accent_color?: string | null;
+    custom_bg_color?: string | null;
+    custom_title_color?: string | null;
+    custom_window_color?: string | null;
+    custom_button_color?: string | null;
+}): void;
+declare function useTheme(): {
+    theme: Theme;
+    resolved: "dark" | "blue" | "green" | "grey" | "pink" | "light";
+};
+
+interface ShellPrefsAdapter {
+    /** The current prefs object. The shell reads its known keys directly off
+     *  this; consumer-private keys are ignored. */
+    prefs: Record<string, any>;
+    /** Patch a subset of prefs. The shell calls this with shallow diffs. */
+    save: (patch: Record<string, any>) => Promise<void> | void;
+}
+declare function ShellPrefsProvider({ value, children, }: {
+    value: ShellPrefsAdapter;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/** Default localStorage-backed adapter — useful when the consumer doesn't
+ *  ship a backend. Pass the result into <ShellPrefsProvider value={…}>.
+ *
+ *  `defaults` are merged behind whatever's already stored, so they only
+ *  apply for keys the user hasn't set yet. Useful for opting out of bundled
+ *  features (e.g. `{ show_desktop_version: false }`). */
+declare function useLocalStoragePrefs(storageKey?: string, defaults?: Record<string, any>): ShellPrefsAdapter;
+/** Returns the active prefs adapter. When no provider is mounted, returns a
+ *  no-op adapter that reads as empty and silently drops saves — components
+ *  still render, but persistence is a no-op. */
+declare function useShellPrefs(): ShellPrefsAdapter;
+
+/** Frosted glass style — shared across all menus, popups, and glass UI elements.
+ * Reads --menu-opacity CSS variable set by the theme system, and adapts the
+ * base tint to dark mode so menus don't stay light-cream when text is light. */
+declare function glassStyle(opacity?: number): CSSProperties;
+/** Glass divider border color */
+declare const GLASS_DIVIDER = "border-white/20";
+/** Glass input/search bar background — declared in styles.css so it can adapt
+ *  to dark mode (a flat `bg-white/15` reads as a too-bright tile on the dark
+ *  glass gradient). */
+declare const GLASS_INPUT_BG = "glass-input-bg";
+
+/**
+ * Format a date string (YYYY-MM-DD or ISO timestamp) for display.
+ * Returns '—' for null/empty values.
+ */
+declare function formatDate(value: string | null | undefined): string;
+
+declare function useClickOutside(ref: RefObject<HTMLElement | null>, onClose: () => void): void;
+
+declare function useIsMobile(): boolean;
+
+declare const isMac: boolean;
+/** Platform-aware modifier symbols */
+declare const MOD: string;
+declare const ALT: string;
+declare const SHIFT = "\u21E7";
+declare const ENTER = "\u23CE";
+/** Common shortcut labels */
+declare const CMD_ENTER: string;
+declare const CMD_S: string;
+declare const CMD_K: string;
+declare const CMD_DOT: string;
+declare const CMD_A: string;
+declare const ALT_SHIFT_D: string;
+declare const ALT_SHIFT_E: string;
+declare const ALT_SHIFT_N: string;
+
+/** Package version, injected by tsup at build time. Stays as an empty
+ *  string when the source is consumed without a build (e.g. tests). */
+declare const VERSION: string;
+
+export { type CountBadgeTone as $, ALT as A, Banner as B, type ColumnDef as C, type ButtonVariant as D, CMD_A as E, CMD_DOT as F, CMD_ENTER as G, CMD_K as H, CMD_S as I, Card as J, type CardPadding as K, type CardProps as L, type CellStyle as M, ChatTemplate as N, Checkbox as O, type PaginatedResponse as P, type CheckboxProps as Q, CheckoutTemplate as R, type SortState as S, ColoredBadge as T, type ColoredBadgeProps as U, ConfirmProvider as V, ContainerFillChart as W, type ContainerFillChartProps as X, type ContainerFillItem as Y, CountBadge as Z, type CountBadgeProps as _, ALT_SHIFT_D as a, ListFooter as a$, DashboardTemplate as a0, DataTable as a1, type DataTableColumn as a2, DataTablePage as a3, type DataTableProps as a4, DateRangePicker as a5, type DateRangePickerProps as a6, type DescriptionColumns as a7, type DescriptionItem as a8, DescriptionList as a9, FormLayoutPage as aA, GLASS_DIVIDER as aB, GLASS_INPUT_BG as aC, GalleryTemplate as aD, type Gap as aE, Grid as aF, type GridCols as aG, type GridColumn as aH, type GridProps as aI, HelpCenter as aJ, type HelpCenterDoc as aK, type HelpCenterProps as aL, INPUT_BASE as aM, INPUT_SIZES as aN, Inline as aO, type InlineProps as aP, Input as aQ, InputNumber as aR, type InputNumberProps as aS, type InputProps as aT, type InputSize as aU, type Justify as aV, Kanban as aW, type KanbanColumn as aX, type KanbanProps as aY, Label as aZ, type LabelProps as a_, type DescriptionListProps as aa, Dialog as ab, type DialogProps as ac, type DialogSize as ad, Divider as ae, type DividerProps as af, type DividerSpacing as ag, DonutChart as ah, type DonutChartProps as ai, type DonutSegment as aj, Drawer as ak, type DrawerProps as al, type DrawerSide as am, type DrawerSize as an, ENTER as ao, EditableGrid as ap, type EditableGridProps as aq, EmailTemplate as ar, EmptyState as as, type EmptyStateProps as at, ErrorPage as au, type ErrorPageProps as av, FilePicker as aw, type FilePickerProps as ax, FormField as ay, type FormFieldProps as az, ALT_SHIFT_E as b, Stack as b$, ListLoadError as b0, type ListLoadErrorProps as b1, LoadingSpinner as b2, type LoadingSpinnerProps as b3, MAX_FRACTION_DIGITS as b4, MOD as b5, Markdown as b6, type MarkdownProps as b7, MediaUploadField as b8, type MediaUploadFieldProps as b9, type ResultStatus as bA, SHIFT as bB, type SearchableOption as bC, SearchableSelect as bD, type SearchableSelectProps as bE, Segmented as bF, type SegmentedOption as bG, type SegmentedProps as bH, type SegmentedSize as bI, Select as bJ, type SelectOption as bK, type SelectProps as bL, type SemanticGroup as bM, type SeverityTone as bN, type ShellPrefsAdapter as bO, ShellPrefsProvider as bP, SidebarActionButton as bQ, type SidebarActionButtonProps as bR, SidebarGroupLabel as bS, SidebarLayout as bT, type SidebarLayoutProps as bU, SidebarNavItem as bV, Skeleton as bW, type SkeletonProps as bX, type SkeletonVariant as bY, Sparkline as bZ, type SparklineProps as b_, MediaUploadGrid as ba, type MediaUploadGridItem as bb, type MediaUploadGridProps as bc, MetricBar as bd, type MetricBarProps as be, type Milestone as bf, type MilestoneKind as bg, MilestoneTimeline as bh, type MilestoneTimelineProps as bi, NativeSelect as bj, NumericKeypad as bk, type NumericKeypadProps as bl, PageHeader as bm, type PageHeaderProps as bn, Pagination as bo, type PaginationProps as bp, Paragraph as bq, type ParagraphProps as br, PopupMenu as bs, PopupMenuDivider as bt, PopupMenuItem as bu, PopupMenuLabel as bv, Radio as bw, type RadioProps as bx, Result as by, type ResultProps as bz, ALT_SHIFT_N as c, type StackProps as c0, StatCard as c1, type StatCardProps as c2, Statistic as c3, type StatisticProps as c4, type StatisticSize as c5, type StatisticTone as c6, StatusBadge as c7, StatusBadgeProvider as c8, Switch as c9, VERSION as cA, appendKey as cB, applyThemePrefs as cC, backspace as cD, confirm as cE, confirmDestructive as cF, formatDate as cG, glassStyle as cH, inputClasses as cI, isMac as cJ, isSeverityTone as cK, mediaFileName as cL, prompt as cM, resolveTheme as cN, severityOf as cO, toISODate as cP, toast as cQ, useClickOutside as cR, useConfirm as cS, useFocusTrap as cT, useIsMobile as cU, useLocalStoragePrefs as cV, useScrollLock as cW, useShellPrefs as cX, useTheme as cY, type SwitchProps as ca, type SwitchSize as cb, type TabItem as cc, Tabs as cd, type TabsProps as ce, Text as cf, type TextProps as cg, type TextSize as ch, type TextTone as ci, type TextWeight as cj, Textarea as ck, type TextareaProps as cl, type Theme as cm, TileButton as cn, type TileButtonProps as co, type TileSize as cp, Title as cq, type TitleLevel as cr, type TitleProps as cs, type ToastOptions as ct, type ToastPlacement as cu, Tooltip as cv, type TooltipProps as cw, TopNav as cx, type TopNavItem as cy, type TopNavProps as cz, Accordion as d, type AccordionItem as e, type AccordionProps as f, type Align as g, AuthScreen as h, type AuthScreenProps as i, Avatar as j, AvatarGroup as k, type AvatarGroupProps as l, type AvatarProps as m, type AvatarSize as n, type AvatarStatus as o, type BannerEmphasis as p, type BannerProps as q, type BannerTone as r, BarChart as s, type BarChartProps as t, type BreadcrumbItem as u, Breadcrumbs as v, type BreadcrumbsProps as w, Button as x, type ButtonProps as y, type ButtonSize as z };