@sequenceholdings/atlas-ui 0.1.5 → 0.3.1

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import { JSX } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { QueryKey } from '@tanstack/react-query';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import * as RechartsPrimitive from 'recharts';
@@ -40,39 +41,39 @@ import { UseMutationResult } from '@tanstack/react-query';
 import { VariantProps } from 'class-variance-authority';
 
 export declare const AGENT_TINTS: {
-    readonly teal: {
-        readonly bg: "bg-teal-50 dark:bg-teal-500/10";
-        readonly fg: "text-teal-700 dark:text-teal-300";
+    readonly 'identity-1': {
+        readonly bg: "bg-identity-1";
+        readonly fg: "text-identity-1-text";
     };
-    readonly violet: {
-        readonly bg: "bg-violet-50 dark:bg-violet-500/10";
-        readonly fg: "text-violet-700 dark:text-violet-300";
+    readonly 'identity-2': {
+        readonly bg: "bg-identity-2";
+        readonly fg: "text-identity-2-text";
     };
-    readonly amber: {
-        readonly bg: "bg-amber-50 dark:bg-amber-500/10";
-        readonly fg: "text-amber-700 dark:text-amber-300";
+    readonly 'identity-3': {
+        readonly bg: "bg-identity-3";
+        readonly fg: "text-identity-3-text";
     };
-    readonly rose: {
-        readonly bg: "bg-rose-50 dark:bg-rose-500/10";
-        readonly fg: "text-rose-700 dark:text-rose-300";
+    readonly 'identity-4': {
+        readonly bg: "bg-identity-4";
+        readonly fg: "text-identity-4-text";
     };
-    readonly sky: {
-        readonly bg: "bg-sky-50 dark:bg-sky-500/10";
-        readonly fg: "text-sky-700 dark:text-sky-300";
+    readonly 'identity-5': {
+        readonly bg: "bg-identity-5";
+        readonly fg: "text-identity-5-text";
     };
-    readonly emerald: {
-        readonly bg: "bg-emerald-50 dark:bg-emerald-500/10";
-        readonly fg: "text-emerald-700 dark:text-emerald-300";
+    readonly 'identity-6': {
+        readonly bg: "bg-identity-6";
+        readonly fg: "text-identity-6-text";
     };
-    readonly orange: {
-        readonly bg: "bg-orange-50 dark:bg-orange-500/10";
-        readonly fg: "text-orange-700 dark:text-orange-300";
+    readonly 'identity-7': {
+        readonly bg: "bg-identity-7";
+        readonly fg: "text-identity-7-text";
     };
-    readonly indigo: {
-        readonly bg: "bg-indigo-50 dark:bg-indigo-500/10";
-        readonly fg: "text-indigo-700 dark:text-indigo-300";
+    readonly 'identity-8': {
+        readonly bg: "bg-identity-8";
+        readonly fg: "text-identity-8-text";
     };
-    readonly graphite: {
+    readonly neutral: {
         readonly bg: "bg-muted";
         readonly fg: "text-foreground";
     };
@@ -406,7 +407,7 @@ export declare function ChartLegendContent({ className, hideIcon, payload, verti
 
 export declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 
-export declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: {
+export declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, footer, }: {
     active?: boolean;
     payload?: TooltipPayloadItem[];
     className?: string;
@@ -420,16 +421,22 @@ export declare function ChartTooltipContent({ active, payload, className, indica
     color?: string;
     nameKey?: string;
     labelKey?: string;
+    footer?: (visible: TooltipPayloadItem[]) => React_2.ReactNode;
 }): JSX.Element | null;
 
 /**
  * Checkbox — matches shadcn's canonical 16×16 design:
  *
  *   - `size-4` (16px)
- *   - `rounded-xs` (4px, `--radius-xs`) — a square with softened corners,
- *     NOT a circle. Atlas's scale shifted `--radius-sm` up to 8px, which
- *     would render a 16px checkbox as a 50% pill. `--radius-xs` closes
- *     the gap at the tight end specifically for cases like this.
+ *   - `rounded-badge` (4px) — a square with softened corners, NOT a
+ *     circle. This is chosen for its VALUE, not its name: a checkbox is
+ *     not a label about something, but `badge` is the only radius role
+ *     that stays 4px in both flag states, and 4px is the only step that
+ *     keeps a 16px box reading as a square. `rounded-control` would make
+ *     it a full circle — that is a radio button, not a checkbox — and
+ *     `rounded-surface-nested` (8px) would render it as a 50% pill.
+ *     Kept off the legacy `rounded-xs` so it survives the DES-324
+ *     deletion of the legacy scale (DES-379).
  *   - Neutral `border-input` when unchecked; flips to `border-primary`
  *     when checked/indeterminate so the outline blends with the fill.
  *   - No drop shadow — consistent with the rest of Atlas's form
@@ -472,9 +479,9 @@ export declare interface CheckboxOption<T extends string> {
 
 declare const CHIP_TONES: {
     readonly default: "border-border bg-accent text-muted-foreground";
-    readonly danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-500/30 dark:bg-red-500/15 dark:text-red-300";
-    readonly warning: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/15 dark:text-amber-300";
-    readonly success: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-300";
+    readonly danger: "border-danger/30 bg-danger-tint text-danger-text";
+    readonly warning: "border-warning/30 bg-warning-tint text-warning-text";
+    readonly success: "border-success/30 bg-success-tint text-success-text";
 };
 
 export declare const ChoiceCard: React_2.ForwardRefExoticComponent<ChoiceCardProps & React_2.RefAttributes<HTMLLabelElement>>;
@@ -792,7 +799,7 @@ export declare function DashboardShell({ title, range, actions, children, classN
  * >
  *   <KpiTileGrid columns={4}>…</KpiTileGrid>
  *   <ChartCard />
- *   <ProDataTable … />
+ *   <Table … />
  * </DashboardShell>
  * ```
  *
@@ -815,19 +822,6 @@ declare interface DashboardShellProps {
     bodyClassName?: string;
 }
 
-export declare function DataTable<T>({ columns, data, pageSize, defaultSort, emptyMessage, onRowClick, rowClassName, className, }: DataTableProps<T>): JSX.Element;
-
-declare interface DataTableProps<T> {
-    columns: ColumnDef<T, unknown>[];
-    data: T[];
-    pageSize?: number;
-    defaultSort?: SortingState;
-    emptyMessage?: string;
-    onRowClick?: (row: T) => void;
-    rowClassName?: (row: Row<T>) => string | undefined;
-    className?: string;
-}
-
 /**
  * Date picker working in `Date | null` (or `DateRange | null` in `mode="range"`).
  * Radix popover + react-day-picker calendar + free-text parsing + presets.
@@ -1312,6 +1306,10 @@ export declare function EditorTopBarStatusBadge({ tone, label, }: {
 
 /**
  * Consistent empty-state placeholder for tables and content areas.
+ *
+ * For a full-route / full-panel "instead of content" screen (404, access
+ * denied, page error), use {@link PageState} from `./page-state` instead —
+ * this component is the small inline placeholder, not the page template.
  */
 export declare function EmptyState({ icon, message, detail, className }: EmptyStateProps): JSX.Element;
 
@@ -1326,10 +1324,9 @@ export declare interface EmptyStateProps {
  * The canonical inline failure banner — one treatment for "this panel could not
  * load", used across apps so a failure reads the same everywhere.
  *
- * The red hue is fixed on purpose: it carries meaning, not theme. What it does
- * carry is a dark pair — the `-50`/`-200`/`-700` triplet is tuned for a white
- * surface and goes near-illegible on a dark one, so `.dark` lifts the fill to a
- * translucent step and lightens the ink. Light is byte-identical.
+ * Status roles (`danger-tint` / `danger-text` / `danger`) carry the hue and
+ * flip under dark mode — no hand-rolled `dark:` pairs needed here. Distinct
+ * from {@link PageState}, which is the full-surface utility layout.
  */
 export declare function ErrorState({ message, className }: ErrorStateProps): JSX.Element;
 
@@ -1522,7 +1519,7 @@ export declare function FilterPill({ label, options, selected, onChange }: Filte
  * grab-bag of visual treatments:
  *
  *   - Height:        h-9 (36px)
- *   - Radius:        rounded-sm (8px, `--radius-sm`)
+ *   - Radius:        `rounded-control` — operable and one line tall
  *   - Border/bg:     `border bg-card` — `--input` border, raised surface,
  *                    same palette as Select/Input. NOT `background`: that is
  *                    the PAGE role (ds-neutral-50 under v2, not white), which
@@ -1744,24 +1741,6 @@ export declare const HoverCardContent: React_2.ForwardRefExoticComponent<Omit<Ho
 
 export declare const HoverCardTrigger: React_2.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React_2.RefAttributes<HTMLAnchorElement>>;
 
-/**
- * Click-to-edit date cell. Shows a custom (or default) display until clicked,
- * then a native date input that commits on change/blur. The closed display is a
- * render prop so callers can style it (e.g. a due-date heat pill).
- */
-export declare function InlineDateCell({ value, onCommit, renderDisplay, placeholder, title, className, }: InlineDateCellProps): JSX.Element;
-
-export declare interface InlineDateCellProps {
-    /** ISO date string (YYYY-MM-DD) or null. */
-    value: string | null;
-    onCommit: (value: string | null) => void | Promise<void>;
-    /** Closed-state display for the value; defaults to the raw date or a dash. */
-    renderDisplay?: (value: string | null) => ReactNode;
-    placeholder?: string;
-    title?: string;
-    className?: string;
-}
-
 /**
  * Click-to-edit text cell. Reads as plain text until clicked, then becomes a
  * borderless auto-growing textarea that commits on blur / Enter (⌘/Ctrl+Enter
@@ -1870,32 +1849,6 @@ declare type KpiTone = 'neutral' | 'warn' | 'info';
 
 export declare const Label: React_2.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React_2.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ClassProp | undefined) => string> & LabelOwnProps & React_2.RefAttributes<HTMLLabelElement>>;
 
-export declare function LabeledSelect({ label, icon, value, options, onChange, ariaLabel, prefixHiddenValues, className, }: LabeledSelectProps): JSX.Element;
-
-export declare interface LabeledSelectOption {
-    value: string;
-    label: string;
-}
-
-export declare interface LabeledSelectProps {
-    /** Muted prefix shown before the value, e.g. `"Group by"` / `"Sorted by"`. */
-    label: string;
-    /** Leading glyph (kept small + muted by the pill). */
-    icon?: React_2.ReactNode;
-    value: string;
-    options: LabeledSelectOption[];
-    onChange: (value: string) => void;
-    /** Accessible name for the trigger. Defaults to `label`. */
-    ariaLabel?: string;
-    /**
-     * Values for which the muted prefix is hidden — the pill shows just the
-     * value. Use for "off"/"none" states where the prefix reads awkwardly
-     * (e.g. `'none'` → "No grouping", not "Group by No grouping").
-     */
-    prefixHiddenValues?: readonly string[];
-    className?: string;
-}
-
 declare interface LabelOwnProps {
     /**
      * When true, appends a red `*` marker after the label text. Prefer this
@@ -2019,7 +1972,7 @@ declare interface MultiSelectListProps extends MultiSelectCoreProps {
  *   - Command (cmdk) for the searchable list and keyboard nav.
  *   - Checkbox (Radix) for per-row selection state.
  *
- * Visual contract for the trigger mirrors `SelectTrigger` (h-9, rounded-sm,
+ * Visual contract for the trigger mirrors `SelectTrigger` (h-9, rounded-field,
  * border + bg-field) so a toolbar of MultiSelect + Input + Select reads
  * as one coherent control row. Active state stacks up to `maxStackedIcons`
  * selected-row icons (with a generic silhouette for icon-less rows) and
@@ -2111,25 +2064,30 @@ export declare interface OptimisticResourceContext<TData> {
 }
 
 /**
- * A small, reusable inline picker: the current value renders as a clickable
- * badge/dot that opens a popover of the actual options (each shown with its own
- * swatch + a check on the active one). A nicer, on-brand replacement for a
- * native <select> for short, visual enum fields like status and health.
+ * Overlay scope (DES-368) — how far an overlay's scrim and panel reach.
+ *
+ *   "viewport" — covers the whole shell, chrome included. A modal is a
+ *     platform-level interruption: it blocks everything, so it dims
+ *     everything. This is Dialog / AlertDialog, and it is why they stay
+ *     `fixed`.
+ *
+ *   "surface" — covers only the app it belongs to. A slide-out panel is
+ *     an extension of the current app, not an interruption of the
+ *     platform, so it must not black out the sidebar and header. This is
+ *     Sheet's default.
+ *
+ * Surface scope is plain `absolute` — it bounds itself against the nearest
+ * positioned ancestor, which is each app's own root (`.atlas-shell-routes`
+ * for most apps, `#chat-container` in Chat). No portal retargeting and no
+ * app-surface context: overlays already portal in-tree at the app layout
+ * root, so the app box is the containing block on offer.
+ *
+ * The attribute is stamped into the DOM as well as driving the classes.
+ * It is the seam other layers key off — chat.css rebinds surface-scoped
+ * overlays, and the artifact sandbox bridge reads it to decide whether a
+ * scrim should elevate to the host shell.
  */
-export declare function OptionPicker<T extends string>({ value, options, onChange, children, ariaLabel, align, triggerClassName, contentClassName, }: OptionPickerProps<T>): JSX.Element;
-
-export declare interface OptionPickerProps<T extends string> {
-    value: T;
-    options: PickerOption<T>[];
-    onChange: (value: T) => void;
-    /** Closed-state trigger content (the badge / dot shown in the row). */
-    children: ReactNode;
-    ariaLabel?: string;
-    align?: 'start' | 'center' | 'end';
-    /** Extra classes for the trigger button (e.g. padding around a small dot). */
-    triggerClassName?: string;
-    contentClassName?: string;
-}
+declare type OverlayScope = "viewport" | "surface";
 
 export declare function PageSkeleton({ variant, className }: PageSkeletonProps): JSX.Element;
 
@@ -2140,6 +2098,28 @@ export declare interface PageSkeletonProps {
 
 export declare type PageSkeletonVariant = 'default' | 'list' | 'detail' | 'dashboard';
 
+export declare function PageState({ icon, tone, title, description, actions, details, detailsLabel, size, className, align, }: PageStateProps): JSX.Element;
+
+export declare interface PageStateProps {
+    /** Tabler (or other) icon element — never an emoji. The template owns the medallion. */
+    icon: ReactNode;
+    tone?: PageStateTone;
+    title: string;
+    description?: ReactNode;
+    /** Shared `Button`s (primary + optional secondary). */
+    actions?: ReactNode;
+    /** Optional disclosure body (stack trace / error digest). Uses Collapsible + Button — never a native `<button>`. */
+    details?: ReactNode;
+    detailsLabel?: string;
+    size?: PageStateSize;
+    className?: string;
+    align?: 'start' | 'center';
+}
+
+export declare type PageStateSize = NonNullable<VariantProps<typeof sizeShell>['size']>;
+
+export declare type PageStateTone = NonNullable<VariantProps<typeof toneMedallion>['tone']>;
+
 export declare function pctChange(current: number, previous: number): number | null;
 
 export declare function PercentCell({ value, dangerBelow, className, }: {
@@ -2148,14 +2128,6 @@ export declare function PercentCell({ value, dangerBelow, className, }: {
     className?: string;
 }): JSX.Element;
 
-export declare interface PickerOption<T extends string> {
-    value: T;
-    /** Optional text label; omit when the swatch already reads as the option. */
-    label?: string;
-    /** The option's visual — a colored badge, dot, etc. */
-    swatch: ReactNode;
-}
-
 export declare const Popover: React_2.FC<PopoverPrimitive.PopoverProps>;
 
 export declare const PopoverAnchor: React_2.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -2181,8 +2153,9 @@ export declare type ProColumnDef<T> = ColumnDef<T, unknown> & {
 };
 
 /**
- * ProDataTable — opinionated extension of the shadcn table for dashboard-style
- * lists. Layered on top of `DataTable` so apps can opt into richer chrome:
+ * Table — opinionated data table for dashboard-style lists (DES-267 canonical).
+ * Formerly `ProDataTable`; that name remains as a temporary alias (DES-262).
+ * Layered on the shadcn `TablePrimitive` parts for richer chrome:
  *   - toolbar slot (search + filters + extras) above the header row
  *   - uppercase, compact header cells with sort arrows (stateful)
  *   - sticky-left columns for "name" identity (horizontal-scroll safe)
@@ -2354,8 +2327,6 @@ declare interface ProColumnMetaSticky extends ProColumnMetaBase {
     grow?: never;
 }
 
-export declare function ProDataTable<T>({ columns, data, selectable, getRowId, selectedRowIds, onSelectionChange, enableRowSelection, rowActions, getRowLabel, searchable, filters, toolbar, actions, footer, pageSize, disablePagination, resizableColumns, columnSizingStorageKey, defaultSort, manualPagination, rowCount, pageIndex, onPageChange, manualSorting, sorting: controlledSorting, onSortingChange, manualFiltering, columnFilters: controlledColumnFilters, onColumnFiltersChange, loading, emptyMessage, onRowClick, rowHref, rowClassName, minWidth, height, bordered, variant, ariaLabel, className, }: ProDataTableProps<T>): JSX.Element;
-
 /**
  * Native segmented filter for the toolbar (e.g. All / Groups / People). The
  * table renders the pills; the caller owns the active value and the actual
@@ -2563,6 +2534,11 @@ declare interface ProDataTableProps<T> {
     variant?: 'table' | 'list';
     /** Shown when the table is selected in a multi-table shell (optional). */
     ariaLabel?: string;
+    /**
+     * Layout only (`h-auto`, `flex-none`, width). Card fill (`bg-card`) and
+     * toolbar/header chrome colors/sizes are owned by the component — do not
+     * pass `bg-*` here expecting it to restyle the table surface.
+     */
     className?: string;
 }
 
@@ -2637,24 +2613,32 @@ declare interface ProgressBarProps {
 }
 
 /**
- * A quiet live/refresh indicator: a small green dot (muted when paused) that
- * pulses subtly while a refresh is in flight, doubling as a manual-refresh
- * button. Deliberately text-free — the freshness detail lives in the tooltip so
- * the UI doesn't churn a ticking label.
+ * Radio group — sibling of `checkbox.tsx`, sized + tokened to match.
+ *
+ *   - 16×16 (`size-4`) so the controls align next to the same line-height
+ *     body text the existing Checkbox does.
+ *   - `rounded-full` (radios are circles).
+ *   - `border-input` when unchecked; flips to `border-primary` when checked
+ *     so the outline blends with the fill, same pattern as `checkbox.tsx`.
+ *   - Inner dot is a `RadioGroupPrimitive.Indicator` filled `bg-primary`,
+ *     sized to leave a 3px gap to the outer ring — the canonical shadcn
+ *     radio look.
+ *   - No drop shadow; matches Input/Select/Button/Checkbox primitives.
+ *
+ * Usage:
+ *
+ *   <RadioGroup value={selected} onValueChange={setSelected}>
+ *     <RadioGroupItem value="a" id="a" />
+ *     <Label htmlFor="a">Option A</Label>
+ *     ...
+ *   </RadioGroup>
+ *
+ * Each item must have a stable `value` — that's what Radix uses for the
+ * controlled group state.
  */
-export declare function RefreshIndicator({ onRefresh, isFetching, isPaused, updatedAt, className, }: RefreshIndicatorProps): JSX.Element;
+export declare const RadioGroup: React_2.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare interface RefreshIndicatorProps {
-    /** Manually trigger a refresh. */
-    onRefresh: () => void;
-    /** A background refresh is in flight — shows a subtle pulse. */
-    isFetching?: boolean;
-    /** Auto-refresh is paused (e.g. while editing) — shows a muted dot. */
-    isPaused?: boolean;
-    /** Last successful refresh time (ms epoch) — surfaced in the tooltip only. */
-    updatedAt?: number;
-    className?: string;
-}
+export declare const RadioGroupItem: React_2.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare function RelativeTimeCell({ primary, secondary, className, }: {
     primary: React_2.ReactNode;
@@ -2831,6 +2815,20 @@ export declare const SheetContent: React_2.ForwardRefExoticComponent<SheetConten
 
 declare interface SheetContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     hideCloseButton?: boolean;
+    /**
+     * How far the panel and its scrim reach. Defaults to `"surface"` — a
+     * slide-out belongs to the app that opened it and should leave the
+     * shell's sidebar and header reachable and undimmed.
+     *
+     * Use `"viewport"` only for a panel that genuinely speaks for the
+     * platform rather than the current app (a shell-level nav drawer, say).
+     * If you are reaching for it to escape a clipping ancestor, fix the
+     * ancestor instead — covering the whole shell to dodge `overflow:hidden`
+     * is the bug DES-368 was filed about.
+     */
+    scope?: OverlayScope;
+    /** Classes for the scrim, mirroring `DialogContent`'s `overlayClassName`. */
+    overlayClassName?: string;
 }
 
 export declare const SheetDescription: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
@@ -2845,7 +2843,9 @@ export declare const SheetHeader: {
     displayName: string;
 };
 
-export declare const SheetOverlay: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+export declare const SheetOverlay: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    scope?: OverlayScope;
+} & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare function SheetPortal({ container, ...props }: React_2.ComponentProps<typeof DialogPrimitive.Portal>): JSX.Element;
 
@@ -2854,6 +2854,7 @@ export declare const SheetTitle: React_2.ForwardRefExoticComponent<Omit<DialogPr
 export declare const SheetTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 declare const sheetVariants: (props?: ({
+    scope?: "surface" | "viewport" | null | undefined;
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & ClassProp) | undefined) => string;
 
@@ -2905,6 +2906,10 @@ declare interface SingleSelectListProps {
     searchable?: boolean;
 }
 
+declare const sizeShell: (props?: ({
+    size?: "page" | "panel" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;
 
 export declare function SkeletonBlock({ className, style }: {
@@ -2944,64 +2949,64 @@ export declare const spinnerVariants: (props?: ({
 
 export declare const STATUS_TONES: {
     readonly healthy: {
-        readonly bg: "bg-emerald-50 dark:bg-emerald-500/15";
-        readonly fg: "text-emerald-700 dark:text-emerald-300";
-        readonly dot: "bg-emerald-500";
+        readonly bg: "bg-success-tint";
+        readonly fg: "text-success-text";
+        readonly dot: "bg-success";
     };
     readonly active: {
-        readonly bg: "bg-emerald-50 dark:bg-emerald-500/15";
-        readonly fg: "text-emerald-700 dark:text-emerald-300";
-        readonly dot: "bg-emerald-500";
+        readonly bg: "bg-success-tint";
+        readonly fg: "text-success-text";
+        readonly dot: "bg-success";
     };
     readonly completed: {
-        readonly bg: "bg-emerald-50 dark:bg-emerald-500/15";
-        readonly fg: "text-emerald-700 dark:text-emerald-300";
-        readonly dot: "bg-emerald-500";
+        readonly bg: "bg-success-tint";
+        readonly fg: "text-success-text";
+        readonly dot: "bg-success";
     };
     readonly success: {
-        readonly bg: "bg-emerald-50 dark:bg-emerald-500/15";
-        readonly fg: "text-emerald-700 dark:text-emerald-300";
-        readonly dot: "bg-emerald-500";
+        readonly bg: "bg-success-tint";
+        readonly fg: "text-success-text";
+        readonly dot: "bg-success";
     };
     readonly running: {
-        readonly bg: "bg-sky-50 dark:bg-sky-500/15";
-        readonly fg: "text-sky-700 dark:text-sky-300";
-        readonly dot: "bg-sky-500";
+        readonly bg: "bg-info-tint";
+        readonly fg: "text-info-text";
+        readonly dot: "bg-info";
     };
     readonly info: {
-        readonly bg: "bg-sky-50 dark:bg-sky-500/15";
-        readonly fg: "text-sky-700 dark:text-sky-300";
-        readonly dot: "bg-sky-500";
+        readonly bg: "bg-info-tint";
+        readonly fg: "text-info-text";
+        readonly dot: "bg-info";
     };
     readonly queued: {
-        readonly bg: "bg-sky-50 dark:bg-sky-500/15";
-        readonly fg: "text-sky-700 dark:text-sky-300";
-        readonly dot: "bg-sky-500";
+        readonly bg: "bg-info-tint";
+        readonly fg: "text-info-text";
+        readonly dot: "bg-info";
     };
     readonly drift: {
-        readonly bg: "bg-amber-50 dark:bg-amber-500/15";
-        readonly fg: "text-amber-700 dark:text-amber-300";
-        readonly dot: "bg-amber-500";
+        readonly bg: "bg-warning-tint";
+        readonly fg: "text-warning-text";
+        readonly dot: "bg-warning";
     };
     readonly warn: {
-        readonly bg: "bg-amber-50 dark:bg-amber-500/15";
-        readonly fg: "text-amber-700 dark:text-amber-300";
-        readonly dot: "bg-amber-500";
+        readonly bg: "bg-warning-tint";
+        readonly fg: "text-warning-text";
+        readonly dot: "bg-warning";
     };
     readonly failing: {
-        readonly bg: "bg-rose-50 dark:bg-rose-500/15";
-        readonly fg: "text-rose-700 dark:text-rose-300";
-        readonly dot: "bg-rose-500";
+        readonly bg: "bg-danger-tint";
+        readonly fg: "text-danger-text";
+        readonly dot: "bg-danger";
     };
     readonly failed: {
-        readonly bg: "bg-rose-50 dark:bg-rose-500/15";
-        readonly fg: "text-rose-700 dark:text-rose-300";
-        readonly dot: "bg-rose-500";
+        readonly bg: "bg-danger-tint";
+        readonly fg: "text-danger-text";
+        readonly dot: "bg-danger";
     };
     readonly error: {
-        readonly bg: "bg-rose-50 dark:bg-rose-500/15";
-        readonly fg: "text-rose-700 dark:text-rose-300";
-        readonly dot: "bg-rose-500";
+        readonly bg: "bg-danger-tint";
+        readonly fg: "text-danger-text";
+        readonly dot: "bg-danger";
     };
     readonly paused: {
         readonly bg: "bg-muted";
@@ -3044,7 +3049,10 @@ export declare type StatusTone = keyof typeof STATUS_TONES;
  */
 export declare const Switch: React_2.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
-export declare const Table: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableElement> & React_2.RefAttributes<HTMLTableElement>>;
+declare function Table<T>({ columns, data, selectable, getRowId, selectedRowIds, onSelectionChange, enableRowSelection, rowActions, getRowLabel, searchable, filters, toolbar, actions, footer, pageSize, disablePagination, resizableColumns, columnSizingStorageKey, defaultSort, manualPagination, rowCount, pageIndex, onPageChange, manualSorting, sorting: controlledSorting, onSortingChange, manualFiltering, columnFilters: controlledColumnFilters, onColumnFiltersChange, loading, emptyMessage, onRowClick, rowHref, rowClassName, minWidth, height, bordered, variant, ariaLabel, className, }: ProDataTableProps<T>): JSX.Element;
+export { Table as DataTable }
+export { Table as ProDataTable }
+export { Table }
 
 export declare const TableBody: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
 
@@ -3058,6 +3066,17 @@ export declare const TableHead: React_2.ForwardRefExoticComponent<React_2.ThHTML
 
 export declare const TableHeader: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
 
+export declare const TablePrimitive: {
+    Root: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableElement> & React_2.RefAttributes<HTMLTableElement>>;
+    Header: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
+    Body: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
+    Footer: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
+    Head: React_2.ForwardRefExoticComponent<React_2.ThHTMLAttributes<HTMLTableCellElement> & React_2.RefAttributes<HTMLTableCellElement>>;
+    Row: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableRowElement> & React_2.RefAttributes<HTMLTableRowElement>>;
+    Cell: React_2.ForwardRefExoticComponent<React_2.TdHTMLAttributes<HTMLTableCellElement> & React_2.RefAttributes<HTMLTableCellElement>>;
+    Caption: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableCaptionElement> & React_2.RefAttributes<HTMLTableCaptionElement>>;
+};
+
 export declare const TableRow: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableRowElement> & React_2.RefAttributes<HTMLTableRowElement>>;
 
 export declare const Tabs: React_2.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -3590,7 +3609,7 @@ export { toast }
  *      the same without re-specifying options at the call site.
  *   2. Binds Sonner's internal classes to Atlas design tokens via
  *      `toastOptions.classNames` — `bg-card`, `border-border`,
- *      `shadow-popover`, `rounded-md`, and the `--destructive` /
+ *      `shadow-popover`, `rounded-surface`, and the `--destructive` /
  *      `--primary` / `--muted` pairs. Matches Dialog / Popover /
  *      DropdownMenu so all floating UI reads as one visual family.
  *   3. Uses `richColors` for the semantic variants
@@ -3644,6 +3663,21 @@ export declare const toggleVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+/**
+ * Full-surface utility layout for "instead of content" screens — 404, access
+ * denied, page error, empty route. Distinct from {@link EmptyState} in
+ * `loading-state.tsx`, which is the small inline placeholder for tables and
+ * section panels. Reach for `PageState` when the whole content area (or a
+ * bounded panel) is the message; reach for `EmptyState` when a table/list
+ * inside an otherwise-loaded page has no rows.
+ *
+ * Tone → status-role mapping lives **once** here. Call sites pass a Tabler
+ * glyph via `icon` and never write medallion colors themselves.
+ */
+declare const toneMedallion: (props?: ({
+    tone?: "neutral" | "warning" | "danger" | "restricted" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const Tooltip: React_2.FC<TooltipPrimitive.TooltipProps>;
 
 /**
@@ -4055,10 +4089,3 @@ export declare interface UserChipUser {
 declare type YearBias = 'past' | 'future';
 
 export { }
-
-
-declare module 'chart.js' {
-    interface TooltipPositionerMap {
-        cursor: TooltipPositionerFunction<ChartType>;
-    }
-}