@dashforge/tw 1.0.0 → 1.1.1

package/dist/index.esm.js

@@ -1,18 +1,19 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useMemo, forwardRef, useContext, useId, useRef, useEffect, useCallback, useState, Fragment, createContext, Children, isValidElement, cloneElement, useLayoutEffect } from 'react';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useMemo, forwardRef, useContext, useState, useEffect, useId, useRef, useCallback, Fragment, createContext, memo, Children, isValidElement, cloneElement, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
+import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { useRbacOptional, resolveAccessState } from '@dashforge/rbac';
 import { tv } from 'tailwind-variants';
 export { tv } from 'tailwind-variants';
-import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
 import { useDashFieldMeta } from '@dashforge/forms';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import { useCalendar, resolveCalendarKey, formatLongDate, parseISODate, formatTime, generateTimeOptions, timeStringToMinutes, getTodayISODate, useDateRange } from '@dashforge/calendar-core';
 import * as RadixPopover from '@radix-ui/react-popover';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import * as RadixAccordion from '@radix-ui/react-accordion';
@@ -132,6 +133,190 @@ function _object_without_properties_loose(source, excluded) {
     ]);
 }
 
+/**
+ * Tailwind-variants recipe for `<Spinner>`.
+ *
+ * Axes:
+ *   - `size`      — 5 steps (xs/sm/md/lg/xl) → w/h spacing tokens
+ *   - `thickness` — 3 steps (thin/md/thick) → SVG stroke-width
+ *   - `color`     — 7 intents (or omitted → `currentColor`)
+ *
+ * The stroke + fill of the SVG paths are governed by
+ * `stroke="currentColor"` (set inline in Spinner.tsx), so the root
+ * `text-*` class drives the color. When `color` is omitted, no
+ * `text-*` class is emitted at all — `currentColor` resolves to
+ * whatever the parent's text color is.
+ */ const spinnerVariants = tv({
+    base: 'inline-block animate-spin motion-reduce:animate-none',
+    variants: {
+        size: {
+            xs: 'w-3 h-3',
+            sm: 'w-4 h-4',
+            md: 'w-5 h-5',
+            lg: 'w-6 h-6',
+            xl: 'w-8 h-8'
+        },
+        /**
+         * Color → text-{color}-600 (mid-tone, readable on most surfaces).
+         * Note: text-{color}-600 acts on currentColor inside the SVG via
+         * `stroke="currentColor"`. Neutral uses `text-neutral-600` which
+         * auto-inverts via the dashforgePreset CSS-var swap (no `dark:`
+         * needed). Color rows do NOT carry `dark:` either — the chosen
+         * 600 step works in both modes for the spinner's specific use
+         * (small element, brief visibility).
+         */ color: {
+            neutral: 'text-neutral-600',
+            primary: 'text-primary-600',
+            secondary: 'text-secondary-600',
+            success: 'text-success-600',
+            warning: 'text-warning-600',
+            danger: 'text-danger-600',
+            info: 'text-info-600'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+/**
+ * SVG stroke-width per thickness step. Picked to read well at every
+ * size — thin (1.5px) is the minimum readable; thick (3px) saturates
+ * the available radius at sizes xs/sm.
+ */ const SPINNER_STROKE_WIDTH = {
+    thin: 1.5,
+    md: 2.25,
+    thick: 3
+};
+/**
+ * The track ring renders at this opacity of `currentColor`. 0.2 is
+ * the sweet spot — visible enough to anchor the eye, faint enough
+ * to read as background.
+ */ const SPINNER_TRACK_OPACITY = 0.2;
+/** Re-export the color name list so playground demos can iterate. */ const SPINNER_COLORS = [
+    'neutral',
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info'
+];
+
+/**
+ * `<Spinner>` — rotating-arc loading indicator.
+ *
+ * Visual: a partial-arc SVG rotating via Tailwind's `animate-spin`
+ * (pure CSS, GPU-accelerated). Optional `withTrack` renders a faint
+ * ghost ring (20% opacity of currentColor) behind the arc — the
+ * standard "premium spinner" pattern used by Stripe / Vercel / Linear.
+ *
+ * Color resolution:
+ *   - `color="primary"` (or any 7 intent) → `text-{color}-600` class
+ *     → SVG `stroke="currentColor"` picks it up
+ *   - `color` omitted → no `text-*` class emitted → SVG inherits
+ *     parent's text color via `currentColor`. **This is the right
+ *     default for nested usage** (inside Button, Alert, Card).
+ *
+ * A11y:
+ *   - `role="status"` on the wrapper
+ *   - `aria-live="polite"` so SR queues the announcement
+ *   - visually-hidden text label inside (`'Loading'` default)
+ *   - `animate-spin` is gated on `motion-reduce` (WCAG 2.3.3)
+ *
+ * Delay (anti-flash):
+ *   - `delay={150}` mounts as `null` for the first 150ms, then swaps
+ *     to the actual SVG. Quick operations that finish before 150ms
+ *     never render the spinner — eliminates the "flash" UX bug.
+ *
+ * @example
+ * ```tsx
+ * // 1. Inside a Button — inherits text color
+ * <button><Spinner size="sm" /> Saving...</button>
+ *
+ * // 2. Standalone with explicit color
+ * <Spinner color="primary" size="lg" label="Loading dashboard data" />
+ *
+ * // 3. Anti-flash on quick submits
+ * <Spinner visibleWhen={() => isSubmitting} delay={150} />
+ *
+ * // 4. With track for busy backgrounds
+ * <Spinner color="primary" withTrack size="xl" />
+ * ```
+ */ const Spinner = /*#__PURE__*/ forwardRef(function Spinner(props, ref) {
+    const { size = 'md', color, thickness = 'md', withTrack = false, label = 'Loading', delay = 0, visibleWhen, sx, className } = props;
+    // Bridge — engine-reactive visibility. Hook called unconditionally
+    // (rules-of-hooks). Outside a `<DashForm>`, predicate evaluated as
+    // a plain closure.
+    const bridge = useContext(DashFormContext);
+    const isBridgeVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    // Anti-flash delay — render `null` for the first `delay` ms after
+    // the spinner becomes visible. Skipping the timer entirely when
+    // delay=0 keeps the synchronous render path for the common case.
+    const [delayElapsed, setDelayElapsed] = useState(delay <= 0);
+    useEffect(()=>{
+        if (delay <= 0) {
+            setDelayElapsed(true);
+            return;
+        }
+        setDelayElapsed(false);
+        const handle = setTimeout(()=>setDelayElapsed(true), delay);
+        return ()=>clearTimeout(handle);
+    }, [
+        delay
+    ]);
+    if (!isBridgeVisible || !delayElapsed) return null;
+    const classes = cn(spinnerVariants({
+        size,
+        color
+    }), sx, className);
+    const strokeWidth = SPINNER_STROKE_WIDTH[thickness];
+    // Decorative mode — when label is explicitly empty (""), suppress
+    // role="status" and the visually-hidden label entirely. Used when
+    // the Spinner is embedded inside another component that already
+    // announces its loading state via `aria-busy` (e.g., Button) — the
+    // inner spinner is then purely visual chrome.
+    const isDecorative = label === '';
+    return jsxs("span", {
+        ref: ref,
+        className: classes,
+        role: isDecorative ? undefined : 'status',
+        "aria-live": isDecorative ? undefined : 'polite',
+        "aria-hidden": isDecorative ? true : undefined,
+        children: [
+            jsxs("svg", {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                "aria-hidden": "true",
+                width: "100%",
+                height: "100%",
+                children: [
+                    withTrack && jsx("circle", {
+                        cx: "12",
+                        cy: "12",
+                        r: "9",
+                        stroke: "currentColor",
+                        strokeWidth: strokeWidth,
+                        strokeOpacity: SPINNER_TRACK_OPACITY,
+                        fill: "none"
+                    }),
+                    jsx("path", {
+                        d: "M21 12a9 9 0 0 0-9-9",
+                        stroke: "currentColor",
+                        strokeWidth: strokeWidth,
+                        strokeLinecap: "round",
+                        fill: "none"
+                    })
+                ]
+            }),
+            !isDecorative && jsx("span", {
+                className: "absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]",
+                children: label
+            })
+        ]
+    });
+});
+Spinner.displayName = 'Spinner';
+
 /**
  * Tailwind-variants recipe for `<Button>`.
  *
@@ -308,36 +493,13 @@ function _object_without_properties_loose(source, excluded) {
 });
 
 /**
- * Inline spinner shown when `loading` is true. Kept inline (≈10 lines
- * of SVG) so the package adds no icon-library dependency.
+ * Map Button size to Spinner size. Button has 3 sizes (sm/md/lg);
+ * Spinner has 5 (xs/sm/md/lg/xl). Picking the closest match keeps
+ * the spinner visually proportional to the button label.
  *
  * @internal
- */ function LoadingSpinner({ size }) {
-    const dim = size === 'sm' ? 14 : size === 'lg' ? 20 : 16;
-    return jsxs("svg", {
-        "aria-hidden": "true",
-        width: dim,
-        height: dim,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        className: "animate-spin",
-        children: [
-            jsx("circle", {
-                cx: "12",
-                cy: "12",
-                r: "9",
-                stroke: "currentColor",
-                strokeWidth: "2.5",
-                strokeOpacity: "0.25"
-            }),
-            jsx("path", {
-                d: "M21 12a9 9 0 0 0-9-9",
-                stroke: "currentColor",
-                strokeWidth: "2.5",
-                strokeLinecap: "round"
-            })
-        ]
-    });
+ */ function buttonSizeToSpinnerSize(size) {
+    return size === 'sm' ? 'xs' : size === 'lg' ? 'md' : 'sm';
 }
 /**
  * Dashforge TW Button — action component with RBAC support.
@@ -381,8 +543,9 @@ function _object_without_properties_loose(source, excluded) {
  * ```
  */ const Button = /*#__PURE__*/ forwardRef(function Button(props, ref) {
     var _rest_type;
-    const { access, disabled, variant, color, size, fullWidth, loading, asChild, sx, children } = props, rest = _object_without_properties_loose(props, [
+    const { access, visibleWhen, disabled, variant, color, size, fullWidth, loading, asChild, sx, children } = props, rest = _object_without_properties_loose(props, [
         "access",
+        "visibleWhen",
         "disabled",
         "variant",
         "color",
@@ -393,10 +556,17 @@ function _object_without_properties_loose(source, excluded) {
         "sx",
         "children"
     ]);
-    // RBAC always called unconditionally (rules-of-hooks compliance).
+    // Bridge — both hooks called unconditionally (rules-of-hooks).
+    // Inside a `<DashForm>`, `useEngineVisibility` subscribes to engine
+    // state and re-evaluates the predicate on changes; outside a form,
+    // the predicate is called with `null` engine (consumer captures
+    // external state in the closure).
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
     const accessState = useAccessState(access);
-    // Early return for hidden state.
-    if (!accessState.visible) return null;
+    // Early return for hidden state — either RBAC denies visibility or
+    // the engine-reactive predicate returned false.
+    if (!isVisible || !accessState.visible) return null;
     // Effective disabled = explicit OR RBAC-disabled OR RBAC-readonly OR loading.
     // Buttons do not support a true readonly state — RBAC readonly is mapped
     // to disabled (matches the MUI-side semantics in @dashforge/ui).
@@ -435,8 +605,11 @@ function _object_without_properties_loose(source, excluded) {
         className: classes
     }, rest, {
         children: [
-            loading && jsx(LoadingSpinner, {
-                size: size != null ? size : 'md'
+            loading && jsx(Spinner, {
+                size: buttonSizeToSpinnerSize(size != null ? size : 'md'),
+                thickness: "thick",
+                withTrack: true,
+                label: ""
             }),
             children
         ]
@@ -2502,7 +2675,7 @@ function _object_without_properties_loose(source, excluded) {
             'rounded-md border bg-neutral-50 border-neutral-300 shadow-lg',
             'min-w-[var(--trigger-width)]'
         ],
-        listBox: 'outline-none py-1',
+        listBox: 'outline-none py-1 list-none pl-0 m-0',
         listItem: [
             'cursor-pointer select-none px-3 py-2 text-sm text-neutral-900',
             'outline-none',
@@ -5425,7 +5598,7 @@ function formatRange(range, locale) {
             'flex items-center gap-2 px-3 h-14 shrink-0',
             'border-b border-neutral-200 text-neutral-900 font-semibold'
         ],
-        list: 'flex flex-col gap-0.5 p-2 flex-1 overflow-y-auto',
+        list: 'flex flex-col gap-0.5 p-2 flex-1 overflow-y-auto list-none m-0',
         item: 'list-none',
         itemLink: [
             'flex items-center gap-2 px-2 py-2 rounded-md',
@@ -5458,7 +5631,7 @@ function formatRange(range, locale) {
             'outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
             'transition-colors w-full'
         ],
-        groupChildren: 'flex flex-col gap-0.5 pl-6',
+        groupChildren: 'flex flex-col gap-0.5 pl-6 list-none m-0',
         footer: [
             'border-t border-neutral-200 p-3 shrink-0',
             'flex items-center gap-2'
@@ -6357,13 +6530,22 @@ const ConfirmContext = /*#__PURE__*/ createContext(null);
 /**
  * Tailwind-variants recipe for `<Snackbar>` (stacked toast surface).
  *
+ * **Sprint 4.4 refactor (1.1.0):** the severity color block has been
+ * REMOVED from this recipe. The 3×4 (variant × severity) color matrix
+ * now lives in `_shared/severity/severityVariants` and is consumed by
+ * Snackbar AND Alert (and any future Banner). This recipe owns layout
+ * + spacing + transitions only — the surface / border / icon colors
+ * are merged in at render time via `cn()`.
+ *
  * Slots:
  *   - `container`   — fixed-position outer stack
- *   - `item`        — single snackbar surface
- *   - `icon`        — leading severity icon
+ *   - `item`        — single snackbar surface (layout only; severity
+ *                     colors injected at render via `getSeverityClasses`)
+ *   - `icon`        — leading severity icon (layout only; tone class
+ *                     injected at render)
  *   - `message`     — main text
  *   - `action`      — optional action button
- *   - `closeButton` — trailing `×` button
+ *   - `closeButton` — trailing close `×` button
  */ const snackbarVariants = tv({
     slots: {
         container: [
@@ -6374,28 +6556,33 @@ const ConfirmContext = /*#__PURE__*/ createContext(null);
             'pointer-events-auto',
             'flex items-start gap-3 px-4 py-3 w-full',
             'rounded-lg border shadow-lg',
-            'text-sm bg-neutral-50 text-neutral-900',
-            // Subtle enter transition — opacity + translate, kept short so a
-            // burst of snackbars feels snappy. Gated on motion-reduce
+            'text-sm',
+            // Subtle enter transition — opacity-only, kept short so a burst
+            // of snackbars feels snappy. Gated on motion-reduce
             // (WCAG 2.3.3) — users who request reduced motion see snackbars
-            // pop in instantly without the slide animation.
-            'transition-all duration-200 motion-reduce:transition-none motion-reduce:duration-0',
+            // pop in instantly without the fade.
+            'transition-opacity duration-200 motion-reduce:transition-none motion-reduce:duration-0',
             'data-[state=entered]:opacity-100 data-[state=exited]:opacity-0'
         ],
-        icon: 'shrink-0 mt-0.5 w-5 h-5 inline-flex items-center justify-center',
+        icon: 'shrink-0 mt-0.5 inline-flex items-center justify-center',
         message: 'flex-1 min-w-0 leading-relaxed',
         action: [
             'shrink-0 inline-flex items-center justify-center px-2 h-7',
             'rounded-md text-xs font-medium',
-            'text-primary-700 hover:bg-primary-100',
-            'outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
-            'transition-colors'
+            // Action button uses currentColor + a soft hover tint so it
+            // adapts to whatever (variant, severity) surface it's on. The
+            // hover tint relies on a 10% opacity overlay of the current
+            // foreground — works in both light and dark severity surfaces.
+            'opacity-90 hover:opacity-100 hover:bg-current/10',
+            'outline-none focus-visible:ring-2 focus-visible:ring-current',
+            'transition-opacity'
         ],
         closeButton: [
             'shrink-0 inline-flex items-center justify-center w-6 h-6',
-            'rounded-md text-neutral-500 hover:bg-neutral-200 hover:text-neutral-900',
-            'outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
-            'transition-colors'
+            'rounded-md',
+            'opacity-70 hover:opacity-100',
+            'outline-none focus-visible:ring-2 focus-visible:ring-current',
+            'transition-opacity'
         ]
     },
     variants: {
@@ -6418,32 +6605,208 @@ const ConfirmContext = /*#__PURE__*/ createContext(null);
             'bottom-right': {
                 container: 'bottom-0 right-0 items-end'
             }
-        },
-        severity: {
-            info: {
-                item: 'border-primary-200',
-                icon: 'text-primary-600'
-            },
-            success: {
-                item: 'border-success-200',
-                icon: 'text-success-600'
-            },
-            warning: {
-                item: 'border-warning-200',
-                icon: 'text-warning-600'
-            },
-            danger: {
-                item: 'border-danger-200',
-                icon: 'text-danger-600'
-            }
         }
     },
     defaultVariants: {
-        position: 'bottom-right',
-        severity: 'info'
+        position: 'bottom-right'
     }
 });
 
+/**
+ * The 3×4 severity color matrix.
+ *
+ * Every class is a Tailwind utility that resolves through
+ * `dashforgePreset()` to a CSS variable on the host — patchable at
+ * runtime via `patchTheme({ <severity>: { …scale } })` without
+ * recompiling. **Zero hardcoded hex values, zero `dark:` variants**:
+ * the dashforge preset auto-inverts the neutral surface ladder via CSS
+ * variable swap; the severity scales themselves do NOT auto-invert
+ * (they read the same scale in light + dark, which is the desired
+ * behaviour for semantic colors).
+ *
+ * The matrix is indexed `[variant][severity]` so a consumer-facing
+ * `<Alert variant="filled" severity="warning">` resolves with a single
+ * lookup.
+ */ const SEVERITY_MATRIX = {
+    standard: {
+        info: {
+            surface: 'bg-info-50 text-info-900',
+            border: 'border-info-100',
+            icon: 'text-info-600'
+        },
+        success: {
+            surface: 'bg-success-50 text-success-900',
+            border: 'border-success-100',
+            icon: 'text-success-600'
+        },
+        warning: {
+            surface: 'bg-warning-50 text-warning-900',
+            border: 'border-warning-100',
+            icon: 'text-warning-600'
+        },
+        danger: {
+            surface: 'bg-danger-50 text-danger-900',
+            border: 'border-danger-100',
+            icon: 'text-danger-600'
+        }
+    },
+    filled: {
+        info: {
+            surface: 'bg-info-600 text-info-50',
+            border: 'border-info-700',
+            icon: 'text-info-50'
+        },
+        success: {
+            surface: 'bg-success-600 text-success-50',
+            border: 'border-success-700',
+            icon: 'text-success-50'
+        },
+        warning: {
+            surface: 'bg-warning-600 text-warning-50',
+            border: 'border-warning-700',
+            icon: 'text-warning-50'
+        },
+        danger: {
+            surface: 'bg-danger-600 text-danger-50',
+            border: 'border-danger-700',
+            icon: 'text-danger-50'
+        }
+    },
+    outlined: {
+        info: {
+            surface: 'bg-transparent text-info-700',
+            border: 'border-info-300',
+            icon: 'text-info-600'
+        },
+        success: {
+            surface: 'bg-transparent text-success-700',
+            border: 'border-success-300',
+            icon: 'text-success-600'
+        },
+        warning: {
+            surface: 'bg-transparent text-warning-700',
+            border: 'border-warning-300',
+            icon: 'text-warning-600'
+        },
+        danger: {
+            surface: 'bg-transparent text-danger-700',
+            border: 'border-danger-300',
+            icon: 'text-danger-600'
+        }
+    }
+};
+/**
+ * Resolve the Tailwind classes for one (variant, severity) pair.
+ *
+ * @example
+ * const { surface, border, icon } = getSeverityClasses('standard', 'warning');
+ * // surface: 'bg-warning-50 text-warning-900'
+ * // border:  'border-warning-100'
+ * // icon:    'text-warning-600'
+ */ function getSeverityClasses(variant, severity) {
+    return SEVERITY_MATRIX[variant][severity];
+}
+/**
+ * ARIA role for a severity. Follows the W3C WAI-ARIA spec:
+ * - `alert` for assertive states (warning / danger) — interrupts the
+ *   screen-reader announcement queue.
+ * - `status` for polite states (info / success) — queued behind other
+ *   announcements.
+ *
+ * Consumers can override via an explicit `role` prop.
+ */ function getSeverityRole(severity) {
+    return severity === 'warning' || severity === 'danger' ? 'alert' : 'status';
+}
+
+const BASE_PROPS = {
+    width: '1.25em',
+    height: '1.25em',
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.5,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': 'true'
+};
+function InfoIcon(props) {
+    return jsxs("svg", _extends({}, BASE_PROPS, props, {
+        children: [
+            jsx("circle", {
+                cx: "10",
+                cy: "10",
+                r: "8.25"
+            }),
+            jsx("path", {
+                d: "M10 6.5h.01M10 9.5v4"
+            })
+        ]
+    }));
+}
+function SuccessIcon(props) {
+    return jsxs("svg", _extends({}, BASE_PROPS, props, {
+        children: [
+            jsx("circle", {
+                cx: "10",
+                cy: "10",
+                r: "8.25"
+            }),
+            jsx("path", {
+                d: "m6.5 10 2.5 2.5 4.5-5"
+            })
+        ]
+    }));
+}
+function WarningIcon(props) {
+    return jsxs("svg", _extends({}, BASE_PROPS, props, {
+        children: [
+            jsx("path", {
+                d: "M10 2.5 18 17H2L10 2.5Z"
+            }),
+            jsx("path", {
+                d: "M10 8v3.5M10 14.5h.01"
+            })
+        ]
+    }));
+}
+function DangerIcon(props) {
+    return jsxs("svg", _extends({}, BASE_PROPS, props, {
+        children: [
+            jsx("circle", {
+                cx: "10",
+                cy: "10",
+                r: "8.25"
+            }),
+            jsx("path", {
+                d: "m7 7 6 6M13 7l-6 6"
+            })
+        ]
+    }));
+}
+/**
+ * Map of severity → default Icon component. Used by Alert (and
+ * eventually Snackbar / Banner / etc.) to render the per-severity
+ * default when the consumer doesn't pass a custom `icon` prop and
+ * doesn't opt-out with `icon={false}`.
+ */ const SEVERITY_DEFAULT_ICON = {
+    info: InfoIcon,
+    success: SuccessIcon,
+    warning: WarningIcon,
+    danger: DangerIcon
+};
+/**
+ * Convenience helper — render the default icon for a severity as a
+ * `ReactNode`, ready to inject into a JSX slot.
+ *
+ * @example
+ * <span className={severityClasses.icon}>
+ *   {getDefaultSeverityIcon('warning')}
+ * </span>
+ */ function getDefaultSeverityIcon(severity) {
+    const Icon = SEVERITY_DEFAULT_ICON[severity];
+    return jsx(Icon, {});
+}
+
 const SnackbarContext = /*#__PURE__*/ createContext(null);
 /**
  * `useSnackbar()` — returns `{ enqueue, dismiss, dismissAll }`.
@@ -6457,17 +6820,6 @@ const SnackbarContext = /*#__PURE__*/ createContext(null);
     }
     return ctx;
 }
-/**
- * Unicode glyphs for severities — keeps the bundle small (no icon dep)
- * and stays accessible because consumers pass their own message text.
- * The glyph is `aria-hidden`; the screen reader announces the message
- * via the live region.
- */ const SEVERITY_GLYPH = {
-    info: 'ⓘ',
-    success: '✓',
-    warning: '⚠',
-    danger: '✕'
-};
 /**
  * Dashforge TW Snackbar provider — transient, stacked toast notifications.
  *
@@ -6630,23 +6982,31 @@ const SnackbarContext = /*#__PURE__*/ createContext(null);
                 "aria-live": "polite",
                 "aria-atomic": "false",
                 children: visible.map((rec)=>{
-                    var _ref, _rec_severity, _ref1, _rec_showClose;
+                    var _ref, _rec_severity, _ref1, _rec_variant, _ref2, _rec_showClose;
                     var _slotProps_item, _slotProps_icon, _slotProps_message, _slotProps_action, _slotProps_closeButton;
                     const sev = (_ref = (_rec_severity = rec.severity) != null ? _rec_severity : defaults == null ? void 0 : defaults.severity) != null ? _ref : 'info';
-                    const showClose = (_ref1 = (_rec_showClose = rec.showClose) != null ? _rec_showClose : defaults == null ? void 0 : defaults.showClose) != null ? _ref1 : true;
+                    const variant = (_ref1 = (_rec_variant = rec.variant) != null ? _rec_variant : defaults == null ? void 0 : defaults.variant) != null ? _ref1 : 'standard';
+                    const showClose = (_ref2 = (_rec_showClose = rec.showClose) != null ? _rec_showClose : defaults == null ? void 0 : defaults.showClose) != null ? _ref2 : true;
                     const itemClasses = snackbarVariants({
-                        position,
-                        severity: sev
+                        position
                     });
+                    // Severity color classes — sourced from the shared 3×4 matrix
+                    // (`_shared/severity/`), same as Alert. Keeps the two
+                    // components visually in lockstep.
+                    const severityClasses = getSeverityClasses(variant, sev);
+                    // Icon resolution — same tristate as Alert:
+                    //   undefined → default per-severity SVG (shared with Alert)
+                    //   ReactNode → consumer's icon
+                    //   false     → no icon
+                    const renderedIcon = rec.icon === false ? null : rec.icon !== undefined ? rec.icon : getDefaultSeverityIcon(sev);
                     return jsxs("div", {
                         "data-state": "entered",
                         "data-tick": rec.tick,
-                        className: cn(itemClasses.item(), slotProps == null ? void 0 : (_slotProps_item = slotProps.item) == null ? void 0 : _slotProps_item.className),
+                        className: cn(itemClasses.item(), severityClasses.surface, severityClasses.border, slotProps == null ? void 0 : (_slotProps_item = slotProps.item) == null ? void 0 : _slotProps_item.className),
                         children: [
-                            jsx("span", {
-                                "aria-hidden": "true",
-                                className: cn(itemClasses.icon(), slotProps == null ? void 0 : (_slotProps_icon = slotProps.icon) == null ? void 0 : _slotProps_icon.className),
-                                children: SEVERITY_GLYPH[sev]
+                            renderedIcon !== null && jsx("span", {
+                                className: cn(itemClasses.icon(), severityClasses.icon, slotProps == null ? void 0 : (_slotProps_icon = slotProps.icon) == null ? void 0 : _slotProps_icon.className),
+                                children: renderedIcon
                             }),
                             jsx("div", {
                                 className: cn(itemClasses.message(), slotProps == null ? void 0 : (_slotProps_message = slotProps.message) == null ? void 0 : _slotProps_message.className),
@@ -6667,7 +7027,20 @@ const SnackbarContext = /*#__PURE__*/ createContext(null);
                                 "aria-label": "Dismiss notification",
                                 onClick: ()=>dismiss(rec.id),
                                 className: cn(itemClasses.closeButton(), slotProps == null ? void 0 : (_slotProps_closeButton = slotProps.closeButton) == null ? void 0 : _slotProps_closeButton.className),
-                                children: "\u00D7"
+                                children: jsx("svg", {
+                                    width: "1em",
+                                    height: "1em",
+                                    viewBox: "0 0 20 20",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: 1.5,
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    "aria-hidden": "true",
+                                    children: jsx("path", {
+                                        d: "m6 6 8 8M14 6l-8 8"
+                                    })
+                                })
                             })
                         ]
                     }, rec.id);
@@ -6678,277 +7051,1446 @@ const SnackbarContext = /*#__PURE__*/ createContext(null);
 }
 
 /**
- * `typographyVariants` — the full type scale for the @dashforge/tw library.
+ * Tailwind-variants recipe for `<Alert>`.
  *
- * Mirrors the MUI Typography variant set (h1–h6 · subtitle1/2 · body1/2 ·
- * caption · overline) so the mental model carries over for developers
- * moving between the two ecosystems. Each variant baseline maps to a
- * Tailwind utility chain that resolves through the @dashforge/tw-tokens
- * scale (so the visual stays in sync with the rest of the system when the
- * token theme is patched).
+ * Slots:
+ *   - `root`         — outer surface, severity + variant color classes
+ *                      come from `_shared/severity/severityVariants`
+ *                      (NOT baked into this recipe, to keep the matrix
+ *                      shared across Alert / Snackbar / future Banner)
+ *   - `icon`         — leading severity icon container
+ *   - `titleSlot`    — `<AlertTitle>` rendered as the first content row
+ *   - `content`      — body text container
+ *   - `action`       — trailing action / close button container
+ *   - `closeButton`  — built-in close `×` (when `onClose` is defined)
+ *
+ * The severity color classes are merged at render time via `cn()` in
+ * `Alert.tsx` — see the call sites of `getSeverityClasses(variant,
+ * severity)`. This recipe owns layout + spacing + typography only.
+ */ const alertVariants = tv({
+    slots: {
+        root: [
+            'relative flex items-start gap-3',
+            'px-4 py-3',
+            'rounded-lg border',
+            'text-sm',
+            // Smooth visibility transition (opacity only) — matches the
+            // Snackbar entry timing, gated on motion-reduce per WCAG 2.3.3.
+            'transition-opacity duration-150 motion-reduce:transition-none motion-reduce:duration-0'
+        ],
+        icon: [
+            'shrink-0 mt-0.5',
+            'inline-flex items-center justify-center'
+        ],
+        titleSlot: [
+            'block font-medium leading-snug mb-1'
+        ],
+        content: [
+            'flex-1 min-w-0',
+            'leading-relaxed'
+        ],
+        action: [
+            'shrink-0 inline-flex items-center',
+            'ml-auto'
+        ],
+        closeButton: [
+            'shrink-0 inline-flex items-center justify-center w-6 h-6',
+            'rounded-md',
+            'opacity-70 hover:opacity-100',
+            'outline-none focus-visible:ring-2 focus-visible:ring-current',
+            'transition-opacity'
+        ]
+    },
+    variants: {
+        /**
+         * Layout density. Defaults to comfortable spacing; `compact`
+         * tightens the vertical padding for inline contexts (form
+         * validation summary at the top of a tight modal, etc.).
+         */ density: {
+            comfortable: {
+                root: 'px-4 py-3'
+            },
+            compact: {
+                root: 'px-3 py-2 text-[13px]'
+            }
+        }
+    },
+    defaultVariants: {
+        density: 'comfortable'
+    }
+});
+
+/**
+ * `<AlertTitle>` — optional title block, rendered as the first child
+ * of `<Alert>`. Pattern mirrors MUI exactly (sub-component, not a
+ * prop), so the JSX shape ports 1:1 from `@mui/material`.
  *
- * Variant axes are intentionally ORTHOGONAL — `variant` chooses the type
- * scale, `weight` overrides the variant's default weight (useful for "h2
- * but lighter"), `color` picks the intent, `align` picks the axis. They
- * never collide, so consumers can mix them freely.
+ * @example
+ * <Alert severity="warning">
+ *   <AlertTitle>Subscription expires soon</AlertTitle>
+ *   Renew before 2026-06-20 to keep access.
+ * </Alert>
+ */ function AlertTitle({ children, className }) {
+    const { titleSlot } = alertVariants();
+    return jsx("div", {
+        className: cn(titleSlot(), className),
+        children: children
+    });
+}
+/**
+ * `<Alert>` — inline persistent status surface.
  *
- * Two boolean flags (`truncate`, `noWrap`) encode the most common one-line
- * patterns; `gutterBottom` adds the conventional bottom margin used when a
- * heading precedes a paragraph block (mirror of MUI's same flag).
- */ const typographyVariants = tv({
-    base: 'text-inherit',
-    variants: {
-        /*
-         * `variant` is the type-scale axis.
-         *
-         * The default font-weight is baked into each variant (headings come
-         * with semibold/bold by default). Consumers override per-instance via
-         * the `weight` axis below — when set, `weight` wins because it's
-         * declared later in the cn() chain and tailwind-merge resolves the
-         * last `font-*` to win.
-         */ variant: {
-            h1: 'text-5xl font-bold leading-[1.05] tracking-[-0.025em]',
-            h2: 'text-4xl font-bold leading-[1.1] tracking-[-0.022em]',
-            h3: 'text-3xl font-semibold leading-[1.15] tracking-[-0.02em]',
-            h4: 'text-2xl font-semibold leading-snug tracking-[-0.015em]',
-            h5: 'text-xl font-semibold leading-snug',
-            h6: 'text-lg font-semibold leading-normal',
-            subtitle1: 'text-base font-medium leading-relaxed',
-            subtitle2: 'text-sm font-medium leading-relaxed',
-            body1: 'text-base font-normal leading-relaxed',
-            body2: 'text-sm font-normal leading-relaxed',
-            caption: 'text-xs font-normal leading-normal',
-            overline: 'text-xs font-semibold uppercase tracking-[0.12em] leading-normal'
-        },
-        /*
-         * `color` is the intent axis. Pairs with the @dashforge/tw-theme
-         * reactive colour vars so the choice survives theme patches and dark
-         * mode flips. `inherit` is the escape hatch — used inside a Box that
-         * has set its own color (e.g. `<Box variant="solid" color="primary">`
-         * paints white text).
-         */ color: {
-            // `inherit` is the explicit escape hatch — use it on a
-            // `<Typography>` inside a coloured surface (e.g.
-            // `<Box variant="solid" color="primary">` paints white text)
-            // so the text picks up the surface colour. It is NO LONGER the
-            // default: a bare `<Typography>` would otherwise inherit the
-            // consuming app's arbitrary root colour (often OS-`prefers-
-            // color-scheme` driven), which diverges from the Dashforge
-            // `data-dash-tw-theme` mode and breaks colour consistency in
-            // dark mode. The default is now `neutral` — see `defaultVariants`.
-            inherit: 'text-inherit',
-            primary: 'text-primary-700 dark:text-primary-400',
-            secondary: 'text-secondary-700 dark:text-secondary-400',
-            success: 'text-success-700 dark:text-success-400',
-            warning: 'text-warning-700 dark:text-warning-400',
-            danger: 'text-danger-700 dark:text-danger-400',
-            info: 'text-info-700 dark:text-info-400',
-            // Neutral palette auto-inverts via the dashforgePreset() CSS-var
-            // swap — no `dark:` variants. `text-neutral-900` resolves to
-            // dark text in light mode and light text in dark mode; same
-            // applies to `text-neutral-600` (muted).
-            neutral: 'text-neutral-900',
-            muted: 'text-neutral-600'
-        },
-        /*
-         * `weight` overrides the variant's default weight. When unset, the
-         * variant's own weight wins. When set, this axis appears LATER in the
-         * cn() chain so tailwind-merge resolves to this value.
-         */ weight: {
-            normal: 'font-normal',
-            medium: 'font-medium',
-            semibold: 'font-semibold',
-            bold: 'font-bold',
-            extrabold: 'font-extrabold'
-        },
-        align: {
-            left: 'text-left',
-            center: 'text-center',
-            right: 'text-right',
-            justify: 'text-justify'
-        },
-        /*
-         * `truncate` collapses to a one-line ellipsis. `noWrap` is the looser
-         * sibling — keeps the text on one line but lets it overflow without
-         * the `…`. Mutually-exclusive intent-wise; if both are passed,
-         * `truncate` wins (later in the cn() chain).
-         */ truncate: {
-            true: 'truncate'
-        },
-        noWrap: {
-            true: 'whitespace-nowrap'
-        },
-        /*
-         * `gutterBottom` adds the conventional bottom margin used when a
-         * heading precedes a paragraph block. Mirror of MUI's same prop —
-         * familiar to developers crossing from the MUI side.
-         */ gutterBottom: {
-            true: 'mb-3'
-        }
-    },
-    defaultVariants: {
-        variant: 'body1',
-        // `neutral` (not `inherit`): a bare `<Typography>` emits
-        // `text-neutral-900`, which auto-inverts via the dashforgePreset()
-        // CSS-var swap and follows the Dashforge mode. Pass
-        // `color="inherit"` explicitly inside a coloured surface.
-        color: 'neutral',
-        align: 'left'
-    }
-});
+ * **API**: full MUI Alert parity (`severity`, `variant`, `icon`,
+ * `onClose`, `action`, `role`, `<AlertTitle>` sub-component). One
+ * deliberate divergence: `severity="danger"` instead of MUI's
+ * `severity="error"` — aligned to the `danger.*` token palette.
+ *
+ * **Bridge integration** (Dashforge extras):
+ *   - `visibleWhen` — engine-reactive predicate (re-evaluated on
+ *     every engine state change when mounted inside a `<DashForm>`)
+ *   - `access` — RBAC gating via `@dashforge/rbac`
+ *
+ * **Token-driven**: every color class flows from `dashforgePreset()`
+ * via CSS variables. No hardcoded hex, no `dark:` variants. The
+ * 3×4 color matrix lives in `_shared/severity/severityVariants.ts`
+ * and is shared with the refactored `<Snackbar>` (and future Banner).
+ *
+ * **A11y**: `role="alert"` for assertive severities (warning, danger)
+ * and `role="status"` for polite ones (info, success). Override via
+ * the `role` prop. The icon is `aria-hidden` — the message text is
+ * the semantic carrier.
+ *
+ * @example
+ * // Default — soft tinted surface, default icon
+ * <Alert severity="info">New feature: export to CSV is now in beta.</Alert>
+ *
+ * // With title (sub-component) + close button
+ * <Alert severity="warning" onClose={dismiss}>
+ *   <AlertTitle>Subscription expires soon</AlertTitle>
+ *   Your Pro plan ends in 3 days.
+ * </Alert>
+ *
+ * // Custom icon
+ * import { Bell } from 'lucide-react';
+ * <Alert severity="info" icon={<Bell size={20} />}>3 new notifications</Alert>
+ *
+ * // No icon — colored surface alone carries the severity
+ * <Alert severity="success" icon={false}>Saved 2 minutes ago.</Alert>
+ *
+ * // Custom action — CTA replaces the auto-close button
+ * <Alert severity="warning" action={<button onClick={renew}>Renew</button>}>
+ *   Trial expires in 3 days.
+ * </Alert>
+ *
+ * // Filled variant — for high-priority callouts
+ * <Alert severity="danger" variant="filled">
+ *   Couldn't save — 3 fields below contain validation errors.
+ * </Alert>
+ */ function Alert({ severity, variant = 'standard', children, icon: iconProp, onClose, closeText = 'Close', action, role: roleProp, visibleWhen, access, sx, className, slotProps }) {
+    var _slotProps_root, _slotProps_icon, _slotProps_content, _slotProps_action, _slotProps_closeButton;
+    // Bridge — both hooks safely return defaults outside a DashForm /
+    // RbacProvider, matching the TextField pattern.
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    if (!isVisible || !accessState.visible) return null;
+    const v = alertVariants();
+    const severityClasses = getSeverityClasses(variant, severity);
+    const role = roleProp != null ? roleProp : getSeverityRole(severity);
+    // Icon resolution:
+    // - false → no icon
+    // - undefined → default per severity (lib's inline SVG)
+    // - ReactNode → consumer's custom icon
+    const renderedIcon = iconProp === false ? null : iconProp !== undefined ? iconProp : getDefaultSeverityIcon(severity);
+    return jsxs("div", _extends({
+        role: role,
+        className: cn(v.root(), severityClasses.surface, severityClasses.border, sx, className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className)
+    }, slotProps == null ? void 0 : slotProps.root, {
+        children: [
+            renderedIcon !== null && jsx("span", _extends({
+                className: cn(v.icon(), severityClasses.icon, slotProps == null ? void 0 : (_slotProps_icon = slotProps.icon) == null ? void 0 : _slotProps_icon.className)
+            }, slotProps == null ? void 0 : slotProps.icon, {
+                children: renderedIcon
+            })),
+            jsx("div", _extends({
+                className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className)
+            }, slotProps == null ? void 0 : slotProps.content, {
+                children: children
+            })),
+            action ? jsx("div", _extends({
+                className: cn(v.action(), slotProps == null ? void 0 : (_slotProps_action = slotProps.action) == null ? void 0 : _slotProps_action.className)
+            }, slotProps == null ? void 0 : slotProps.action, {
+                children: action
+            })) : onClose ? jsx("button", _extends({
+                type: "button",
+                "aria-label": closeText,
+                onClick: onClose,
+                className: cn(v.closeButton(), slotProps == null ? void 0 : (_slotProps_closeButton = slotProps.closeButton) == null ? void 0 : _slotProps_closeButton.className)
+            }, slotProps == null ? void 0 : slotProps.closeButton, {
+                children: jsx("svg", {
+                    width: "1em",
+                    height: "1em",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: jsx("path", {
+                        d: "m6 6 8 8M14 6l-8 8"
+                    })
+                })
+            })) : null
+        ]
+    }));
+}
+
+const ICON_BUTTON_SIZE_OVERRIDES = {
+    sm: 'w-8 px-0',
+    md: 'w-10 px-0',
+    lg: 'w-12 px-0'
+};
+/** Always-applied layout primitives — not token-driven (geometric CSS). */ const ICON_BUTTON_BASE = 'aspect-square inline-flex items-center justify-center';
 
 /**
- * Default HTML tag per variant. Headings get their semantic level (h1→h1
- * etc.); subtitle/body get `<p>` (block, paragraph semantics);
- * caption/overline get `<span>` (inline, no implicit block break).
+ * Map IconButton size to Spinner size. Same mapping as Button —
+ * Spinner has 5 steps, the parent has 3.
  *
- * Override per-instance via the `as` prop — useful when the semantic
- * heading level should differ from the visual scale (e.g. a hero
- * rendered as `<h2>` but visually styled `h1`).
- */ const VARIANT_TO_TAG = {
-    h1: 'h1',
-    h2: 'h2',
-    h3: 'h3',
-    h4: 'h4',
-    h5: 'h5',
-    h6: 'h6',
-    subtitle1: 'p',
-    subtitle2: 'p',
-    body1: 'p',
-    body2: 'p',
-    caption: 'span',
-    overline: 'span'
-};
+ * @internal
+ */ function iconButtonSizeToSpinnerSize(size) {
+    return size === 'sm' ? 'xs' : size === 'lg' ? 'md' : 'sm';
+}
 /**
- * `<Typography>` — semantic typed text, the foundation of every readable
- * surface in @dashforge/tw.
+ * Dashforge TW IconButton — square, icon-only action button.
  *
- * Why this exists:
- *   Tailwind ships a typographic scale (`text-xl`, `font-bold`,
- *   `leading-relaxed`) but leaves the SEMANTIC HTML tag and the
- *   intent-coloured palette to the consumer. That's fine for one-off
- *   marketing surfaces, but at app scale it means every `<h2>` and every
- *   body paragraph re-derives its own utility chain — and they drift.
+ * Reuses `buttonVariants` 1:1 (same `variant` / `color` / `size` /
+ * `loading` axes) so every `<Button>` style maps to the equivalent
+ * `<IconButton>` with zero code duplication. The ONLY additions are:
  *
- *   Typography moves that decision into a typed prop set: the visual
- *   scale, the intent colour, the alignment, the truncation all live in
- *   `tailwind-variants` and resolve to the same utility chain everywhere
- *   in the app. The default HTML tag is inferred from `variant` so the
- *   semantic layer follows the visual layer; `as` and `asChild` are the
- *   two escape hatches when you need something else.
+ *   - `ICON_BUTTON_SIZE_OVERRIDES` — forces `w-N + px-0` so the button
+ *     is square at every size token
+ *   - `ICON_BUTTON_BASE` — `aspect-square inline-flex items-center
+ *     justify-center` for layout
  *
- * Layering:
- *   • Sits BENEATH every component that renders text — `<Button>`'s
- *     label, `<TextField>`'s helper text, MDX prose in our own docs.
- *   • Composes ON TOP of `@dashforge/tw-tokens` colour scales (so
- *     `color="primary"` paints `text-primary-700` in light, `-400` in dark,
- *     reactive to `setMode()`).
- *   • Polymorphic via Radix Slot — pairs cleanly with router `<Link>`,
- *     `<button>`, or `<a>` without injecting an extra wrapper element.
+ * Both additions are token-driven (spacing) or layout-primitive
+ * (geometry) — no hardcoded hex, no `dark:` variants.
  *
- * Polymorphism rules — `as` vs `asChild`:
- *   • `as` swaps the rendered tag (we still render the element ourselves).
- *   • `asChild` removes our element entirely — the single React child
- *     becomes the rendered tag, with our className/ref merged onto it.
- *     This is the Radix Slot pattern; use when you need a router Link
- *     to style as a heading.
- *   When BOTH are passed, `asChild` wins. We considered making this a
- *   compile-time error via discriminated unions, but the API surface
- *   already has 8 axes and adding one more dimension to the props type
- *   would inflate IntelliSense suggestions for marginal benefit. The
- *   runtime preference is documented; the test asserts it.
- */ const Typography = /*#__PURE__*/ forwardRef(function Typography(props, ref) {
-    var _ref;
-    const { variant = 'body1', color, weight, align, truncate, noWrap, gutterBottom, as, asChild = false, sx, children } = props, rest = _object_without_properties_loose(props, [
+ * **`aria-label` is REQUIRED** at the type level — icon-only buttons
+ * are invisible to assistive tech without an explicit accessible
+ * name. The TypeScript compiler enforces this rather than relying on
+ * runtime warnings.
+ *
+ * RBAC integration mirrors `<Button>`: `access` with
+ * `onUnauthorized: 'hide' | 'disable' | 'readonly'`. No `visibleWhen`
+ * (mirror Button — buttons should disable, not hide, on
+ * state-driven unavailability; permission-driven hiding is `access`).
+ *
+ * @example
+ * ```tsx
+ * import { Trash2 } from 'lucide-react';
+ *
+ * <IconButton aria-label="Delete row" color="danger" onClick={onDelete}>
+ *   <Trash2 size={20} />
+ * </IconButton>
+ *
+ * // Polymorphism via Radix Slot
+ * <IconButton asChild aria-label="Open settings" variant="ghost">
+ *   <Link to="/settings"><SettingsIcon size={20} /></Link>
+ * </IconButton>
+ *
+ * // RBAC-gated
+ * <IconButton
+ *   aria-label="Publish article"
+ *   variant="solid"
+ *   color="primary"
+ *   access={{ resource: 'article', action: 'publish', onUnauthorized: 'disable' }}
+ * >
+ *   <PublishIcon size={20} />
+ * </IconButton>
+ *
+ * // Loading swap
+ * <IconButton aria-label="Save" loading={isSaving}>
+ *   <SaveIcon size={20} />
+ * </IconButton>
+ * ```
+ */ const IconButton = /*#__PURE__*/ forwardRef(function IconButton(props, ref) {
+    var _rest_type;
+    const { access, visibleWhen, disabled, variant, color, size = 'md', loading, asChild, sx, className, children } = props, rest = _object_without_properties_loose(props, [
+        "access",
+        "visibleWhen",
+        "disabled",
         "variant",
         "color",
-        "weight",
-        "align",
-        "truncate",
-        "noWrap",
-        "gutterBottom",
-        "as",
+        "size",
+        "loading",
         "asChild",
         "sx",
+        "className",
         "children"
     ]);
-    const classes = cn(typographyVariants({
+    // Bridge — both hooks called unconditionally (rules-of-hooks).
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    if (!isVisible || !accessState.visible) return null;
+    // Effective disabled = explicit OR RBAC.disabled OR RBAC.readonly OR loading.
+    // Mirrors `<Button>` exactly — IconButton has no true read-only
+    // state, so RBAC readonly maps to disabled (same as MUI side).
+    const effectiveDisabled = Boolean(disabled) || accessState.disabled || accessState.readonly || Boolean(loading);
+    const classes = cn(buttonVariants({
         variant,
         color,
-        weight,
-        align,
-        truncate,
-        noWrap,
-        gutterBottom
-    }), sx);
-    // asChild wins over `as` when both are passed (see component header).
+        size,
+        loading
+    }), ICON_BUTTON_SIZE_OVERRIDES[size], ICON_BUTTON_BASE, sx, className);
+    // `aria-busy` while loading — distinguishes "wait for action to
+    // finish" from "you can't do this" in screen-reader announcements.
+    const ariaBusy = loading ? true : undefined;
     if (asChild) {
-        return jsx(Slot, _extends({
+        return jsx(Slot, {
             ref: ref,
-            className: classes
-        }, rest, {
+            className: classes,
+            "data-disabled": effectiveDisabled || undefined,
+            "aria-disabled": effectiveDisabled || undefined,
+            "aria-busy": ariaBusy,
             children: children
-        }));
+        });
     }
-    // Resolve the rendered tag: explicit `as` > variant default > fallback.
-    const Tag = (_ref = as != null ? as : VARIANT_TO_TAG[variant]) != null ? _ref : 'span';
-    return jsx(Tag, _extends({
+    return jsx("button", _extends({
         ref: ref,
+        type: (_rest_type = rest.type) != null ? _rest_type : 'button',
+        disabled: effectiveDisabled,
+        "aria-busy": ariaBusy,
         className: classes
     }, rest, {
-        children: children
+        children: loading ? jsx(Spinner, {
+            size: iconButtonSizeToSpinnerSize(size),
+            thickness: "thick",
+            withTrack: true,
+            label: ""
+        }) : children
     }));
 });
-Typography.displayName = 'Typography';
 
 /**
- * `boxVariants` — the surface primitive for @dashforge/tw.
- *
- * Architectural choice (planned with the user — F9 deep dive):
- *
- *   Box replaces FOUR overlapping concepts from MUI in one component:
- *     • Box        (typed div)
- *     • Paper      (surface with elevation)
- *     • Card       (Paper specialisation)
- *     • Surface    (Joy UI's outlined / soft / solid / plain variants)
- *
- *   The reason for the consolidation: in MUI you have to compose two or
- *   three of these to express even basic intent ("an outlined card with
- *   warning tone"). Here, one `<Box variant="outlined" color="warning">`
- *   says exactly that.
- *
- * Variant taxonomy (5 axes, intentionally non-overlapping with Stack/Grid):
+ * Tailwind-variants recipe for the Menu family.
  *
- *   • plain     — bare div + padding + radius. The escape hatch.
- *   • outlined  — 1px border + subtle bg tint. The "card lite".
- *   • elevated  — bg surface + shadow scale (0-5). The "floating panel".
- *   • soft      — semi-transparent intent bg + intent text. The "callout".
- *   • solid     — solid intent bg + contrasting text. The "CTA banner".
+ * The whole menu family is styled here in one TV instance so the
+ * compound rules (item color × selected × danger, etc.) live in
+ * one source of truth.
  *
- *   `color` applies to outlined/soft/solid (each gets the 7 intent
- *   variants). `elevated` is color-agnostic (always neutral surface +
- *   shadow scale). `plain` is everything-agnostic.
+ * Slots:
+ *   - `content`   — floating panel (DropdownMenu.Content)
+ *   - `item`      — clickable row (DropdownMenu.Item)
+ *   - `itemIcon`  — leading icon container
+ *   - `itemLabel` — text content slot
+ *   - `itemEnd`   — trailing slot (shortcut hint, chevron, …)
+ *   - `label`     — non-interactive heading (DropdownMenu.Label)
+ *   - `separator` — divider (DropdownMenu.Separator)
+ *   - `skeleton`  — placeholder item (visual only, no Radix slot)
+ */ const menuVariants = tv({
+    slots: {
+        content: [
+            'z-50 min-w-[180px] py-1.5',
+            // Surface elevation: `bg-white` is hardcoded (does NOT
+            // auto-invert via the dashforgePreset CSS-var swap), so we
+            // pair it with `dark:bg-neutral-100` (target #171717 — one
+            // elevation tier above page surface in dark mode). This is
+            // Category B of THEME-AUDIT.md — must stay on the same
+            // string literal so the whitelist regex matches.
+            'rounded-md border border-neutral-200 bg-white dark:bg-neutral-100 shadow-lg',
+            // Smooth fade-in via Radix's data-state attributes. Motion-
+            // reduce gated.
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'motion-reduce:animate-none motion-reduce:transition-none',
+            // List reset (defensive — same defensive pattern as
+            // Autocomplete listbox after the listbox-bullets fix in 1.0.1).
+            'list-none pl-0 m-0'
+        ],
+        item: [
+            'group relative flex cursor-pointer select-none items-center gap-2',
+            'px-3 py-1.5 mx-1 my-0.5',
+            'rounded-md text-sm text-neutral-900',
+            'outline-none',
+            // Radix sets data-highlighted when the item is keyboard-focused
+            // OR hovered. We anchor the active visual state to that single
+            // attribute so keyboard + mouse interactions look identical.
+            'data-[highlighted]:bg-neutral-100',
+            // Disabled (Radix sets data-disabled).
+            'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none',
+            'transition-colors duration-100',
+            'motion-reduce:transition-none'
+        ],
+        itemIcon: 'shrink-0 inline-flex items-center justify-center w-4 h-4',
+        itemLabel: 'flex-1 truncate',
+        itemEnd: 'shrink-0 ml-3 inline-flex items-center text-xs text-neutral-500',
+        label: [
+            'px-3 py-1 mx-1 mt-1 text-xs font-medium uppercase tracking-wide',
+            'text-neutral-500'
+        ],
+        separator: 'h-px my-1 mx-1 bg-neutral-200',
+        skeleton: [
+            'flex items-center gap-2 px-3 py-1.5 mx-1 my-0.5',
+            'animate-pulse motion-reduce:animate-none'
+        ]
+    },
+    variants: {
+        /**
+         * Item color intent. `'danger'` highlights destructive actions
+         * (Delete, Sign out) with red bg on hover. Both bg and text
+         * shift to the danger palette when the item is highlighted.
+         */ color: {
+            default: {},
+            danger: {
+                item: [
+                    'text-danger-700',
+                    // Hover + keyboard focus → red soft bg + saturated text.
+                    'data-[highlighted]:bg-danger-50 data-[highlighted]:text-danger-800',
+                    // Dark mode: bg-danger-50 doesn't auto-invert (color
+                    // palettes don't), so we add the explicit dark variant.
+                    // The `text-danger-700` base also gets a dark counterpart
+                    // for readability on the dark surface.
+                    'dark:text-danger-300',
+                    'dark:data-[highlighted]:bg-danger-950 dark:data-[highlighted]:text-danger-200'
+                ],
+                itemIcon: 'text-danger-600 dark:text-danger-400'
+            }
+        },
+        /**
+         * Visual `selected` hint — adds a faint primary bg + the
+         * leading edge gets a primary accent. Pure visual; v1 has no
+         * controlled selection state machine.
+         */ selected: {
+            true: {
+                item: [
+                    'bg-primary-50 text-primary-900',
+                    'dark:bg-primary-950 dark:text-primary-100'
+                ],
+                itemIcon: 'text-primary-600 dark:text-primary-400'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'default'
+    }
+});
+/**
+ * Resolve a `MenuPlacement` enum to Radix `side` + `align` props.
+ * Single source of truth so Menu.tsx doesn't need a switch statement.
+ */ function placementToRadix(placement) {
+    // The format is `<side>` or `<side>-<align>`. Center is the default
+    // when no `-start` / `-end` suffix is present.
+    const [side, alignSuffix] = placement.split('-');
+    return {
+        side,
+        align: alignSuffix != null ? alignSuffix : 'center'
+    };
+}
+
+const MenuContext = /*#__PURE__*/ createContext({
+    closeOnItemClick: true
+});
+// ─── Menu (Root provider) ────────────────────────────────────────
+/**
+ * `<Menu>` — top-level provider that wraps Radix `DropdownMenu.Root`.
  *
- * Spacing axes (p/px/py/m/mx/my): mapped explicitly to the 11 token
- * steps from @dashforge/tw-tokens (0, 0.5, 1, 2, 3, 4, 6, 8, 12, 16, 24).
- * Tailwind JIT requires literal class strings — building them dynamically
- * with template literals would purge them. The verbosity below is the
- * cost of keeping the bundle CSS-pure and rebuild-free.
+ * Compound API:
+ * ```tsx
+ * <Menu>
+ *   <MenuTrigger>
+ *     <IconButton aria-label="Actions"><MoreIcon /></IconButton>
+ *   </MenuTrigger>
+ *   <MenuContent>
+ *     <MenuLabel>Actions</MenuLabel>
+ *     <MenuItem onClick={onEdit}>Edit</MenuItem>
+ *     <MenuSeparator />
+ *     <MenuItem color="danger" onClick={onDelete}>Delete</MenuItem>
+ *   </MenuContent>
+ * </Menu>
+ * ```
  *
- * What this does NOT do (deliberate, see component docs):
- *   • No display / flex / grid props      → use Stack or Grid
- *   • No position / overflow / z-index    → use `sx`
- *   • No animation / transition           → use `sx`
+ * Built on `@radix-ui/react-dropdown-menu` (purpose-built menu
+ * primitive with full WAI-ARIA menu pattern + keyboard nav
+ * + type-ahead + portal mount).
  *
- * The "Box is not flex" rule is the spine of the layout layer. Without
- * it, every `<div>` in an app gravitates back to Box and the surface
- * vs layout distinction collapses — exactly the failure mode this
- * primitive exists to prevent.
- */ const boxVariants = tv({
-    base: 'block',
-    variants: {
-        /*
-         * Surface variant. Compound with `color` for outlined / soft / solid;
+ * Sub-menus and controlled selection mode are deliberately out of
+ * scope for v1 (Sprint 4.4) — composable via Radix primitives if
+ * needed via explicit sub-component opt-in (future).
+ */ function Menu({ children, open, defaultOpen, onOpenChange, closeOnItemClick = true, modal = false }) {
+    return jsx(MenuContext.Provider, {
+        value: {
+            closeOnItemClick
+        },
+        children: jsx(RadixMenu.Root, {
+            open: open,
+            defaultOpen: defaultOpen,
+            onOpenChange: onOpenChange,
+            modal: modal,
+            children: children
+        })
+    });
+}
+// ─── MenuTrigger ─────────────────────────────────────────────────
+/**
+ * `<MenuTrigger>` — the element that opens the menu.
+ *
+ * Always renders the immediate child via Radix Slot (`asChild`) — the
+ * child receives the click handler + `aria-haspopup="menu"` +
+ * `aria-expanded` reactive to open state. Pass any interactive
+ * component as the child (`<IconButton>`, `<Button>`, `<Avatar>`,
+ * custom).
+ */ function MenuTrigger({ children }) {
+    return jsx(RadixMenu.Trigger, {
+        asChild: true,
+        children: children
+    });
+}
+// ─── MenuContent ─────────────────────────────────────────────────
+/**
+ * `<MenuContent>` — the floating panel.
+ *
+ * Lazy-mounted via Radix Portal — zero DOM cost when the menu is
+ * closed (one of the perf properties we inherit from Radix +
+ * Atlaskit-style menus).
+ *
+ * Placement / sideOffset are read from the parent `<Menu>` via
+ * Radix context — we re-pull the `<Menu>` props via the
+ * `MenuContext` here.
+ *
+ * NB: placement is read from PARENT MENU PROPS, not from
+ * `<MenuContent>` directly — keeps the floating-positioning API on
+ * the provider where it belongs.
+ */ const MenuContent = /*#__PURE__*/ forwardRef(function MenuContent(props, ref) {
+    const { children, minWidth, className, sx } = props;
+    const v = menuVariants();
+    // NB: we don't read `placement` from MenuContext (Radix Root
+    // doesn't surface those props to descendants). Instead, the
+    // consumer passes them on `<Menu>` and they're forwarded into
+    // `<MenuContent>` via context-style props — to keep the API
+    // simple, we DON'T expose placement on MenuContent itself; the
+    // user sets it on Menu. We achieve this by reading the MenuProps
+    // off the Radix-internal context… actually, simpler: we just
+    // accept the default `bottom-start` from Radix and let the
+    // consumer pass `side`/`align` via MenuContent if they want fine
+    // control. For now, hardcode the most common defaults; Sprint
+    // 4.4-bis can lift this if real demand emerges.
+    const { side, align } = placementToRadix('bottom-start');
+    return jsx(RadixMenu.Portal, {
+        children: jsx(RadixMenu.Content, {
+            ref: ref,
+            side: side,
+            align: align,
+            sideOffset: 6,
+            style: minWidth !== undefined ? {
+                minWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth
+            } : undefined,
+            className: cn(v.content(), sx, className),
+            children: children
+        })
+    });
+});
+MenuContent.displayName = 'MenuContent';
+// ─── MenuItem ────────────────────────────────────────────────────
+/**
+ * `<MenuItem>` — clickable row inside the menu.
+ *
+ * Memoized via `React.memo` for performance — re-renders only when
+ * its own props change, not when sibling items mutate. Pattern
+ * inspired by Atlaskit's `ButtonItem` optimization (one of the
+ * reasons Atlaskit menus stay responsive on large item lists).
+ *
+ * Bridge integration:
+ *   - `access` — hides / disables the item per RBAC
+ *   - `visibleWhen` — engine-reactive predicate
+ *
+ * Both gates fold into the visible/disabled state; when the
+ * predicate returns `false` OR `access` denies visibility, the
+ * item renders `null` (does NOT occupy a row in the menu, vs
+ * disabled which renders dimmed-but-present).
+ */ function MenuItemImpl(props) {
+    const { children, onClick, icon, endIcon, disabled: disabledProp, selected, color = 'default', access, visibleWhen, className, sx } = props;
+    const { closeOnItemClick } = useContext(MenuContext);
+    // Bridge hooks — always called (rules-of-hooks).
+    const bridge = useContext(DashFormContext);
+    const isBridgeVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    if (!isBridgeVisible || !accessState.visible) return null;
+    const isDisabled = Boolean(disabledProp) || accessState.disabled || accessState.readonly;
+    const v = menuVariants({
+        color,
+        selected
+    });
+    return jsxs(RadixMenu.Item, {
+        disabled: isDisabled,
+        onSelect: (e)=>{
+            if (isDisabled) return;
+            // Suppress default close behaviour when the parent <Menu>
+            // explicitly opted out (filter / multi-select pattern).
+            if (!closeOnItemClick) e.preventDefault();
+            onClick == null ? void 0 : onClick();
+        },
+        className: cn(v.item(), sx, className),
+        children: [
+            icon != null && jsx("span", {
+                className: v.itemIcon(),
+                children: icon
+            }),
+            jsx("span", {
+                className: v.itemLabel(),
+                children: children
+            }),
+            endIcon != null && jsx("span", {
+                className: v.itemEnd(),
+                children: endIcon
+            })
+        ]
+    });
+}
+const MenuItem = /*#__PURE__*/ memo(MenuItemImpl);
+MenuItem.displayName = 'MenuItem';
+// ─── MenuLabel ───────────────────────────────────────────────────
+/**
+ * `<MenuLabel>` — non-interactive group heading.
+ *
+ * Renders via Radix `DropdownMenu.Label` which carries the right
+ * ARIA semantics (`role="presentation"` — not announced as a
+ * `menuitem` by screen readers).
+ */ function MenuLabel({ children, className }) {
+    const v = menuVariants();
+    return jsx(RadixMenu.Label, {
+        className: cn(v.label(), className),
+        children: children
+    });
+}
+// ─── MenuSeparator ───────────────────────────────────────────────
+/**
+ * `<MenuSeparator>` — horizontal divider between items.
+ *
+ * Renders via Radix `DropdownMenu.Separator` — semantically correct
+ * `role="separator"` for screen readers navigating the menu.
+ */ function MenuSeparator({ className }) {
+    const v = menuVariants();
+    return jsx(RadixMenu.Separator, {
+        className: cn(v.separator(), className)
+    });
+}
+// ─── MenuSkeleton ────────────────────────────────────────────────
+/**
+ * `<MenuSkeleton>` — Atlaskit-style loading state.
+ *
+ * Renders `count` placeholder rows (default 3) inside the menu while
+ * real items are being fetched. Each row matches the geometry of a
+ * real `<MenuItem>` (height, padding, icon slot) so the layout
+ * doesn't jump when the real data arrives.
+ *
+ * `withHeading=true` adds a skeleton heading at the top, mimicking a
+ * `<MenuLabel>` — useful when the real menu starts with a section
+ * label.
+ *
+ * Pure visual — no animation overhead beyond Tailwind's
+ * `animate-pulse` (motion-reduce-safe).
+ *
+ * @example
+ * ```tsx
+ * <MenuContent>
+ *   {isLoading ? (
+ *     <MenuSkeleton count={5} withHeading />
+ *   ) : (
+ *     items.map((it) => <MenuItem key={it.id}>{it.label}</MenuItem>)
+ *   )}
+ * </MenuContent>
+ * ```
+ */ function MenuSkeleton({ count = 3, withHeading = false, className }) {
+    const v = menuVariants();
+    return jsxs("div", {
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn('animate-pulse motion-reduce:animate-none', className),
+        children: [
+            withHeading && jsx("div", {
+                className: cn(v.label(), 'pointer-events-none'),
+                children: jsx("span", {
+                    className: "inline-block h-2.5 w-16 rounded-sm bg-neutral-200"
+                })
+            }),
+            Array.from({
+                length: count
+            }).map((_, i)=>jsx(SkeletonRow, {}, i))
+        ]
+    });
+}
+/**
+ * One skeleton row — matches the dimensions of a real `<MenuItem>`
+ * (icon slot + label slot). Internal — not exported.
+ *
+ * @internal
+ */ function SkeletonRow() {
+    return jsxs("div", {
+        className: "flex items-center gap-2 px-3 py-1.5 mx-1 my-0.5",
+        children: [
+            jsx("span", {
+                className: "inline-block h-4 w-4 shrink-0 rounded-sm bg-neutral-200"
+            }),
+            jsx("span", {
+                className: "inline-block h-3 flex-1 rounded-sm bg-neutral-200"
+            })
+        ]
+    });
+}
+
+/**
+ * Tailwind-variants recipe for `<Badge>`.
+ *
+ * Slot layout:
+ *   - `root`  — outer span (relative-positioned wrapper around the
+ *               anchor). `inline-flex` so the wrapper shrinks to fit
+ *               the anchor element.
+ *   - `badge` — the floating absolute-positioned pill / dot. Two
+ *               variants (`dot=true` → tiny circle, `dot=false` →
+ *               pill with min-width to fit content).
+ *
+ * Color axis emits the `badge` background + text classes. The 7
+ * intents map to:
+ *   - solid bg: `bg-{intent}-500` (vivid, attention-grabbing for
+ *     notifications — different from Chip which uses 600 for solid
+ *     because chip surface is larger; small badge needs the brighter
+ *     mid-tone)
+ *   - text: `text-white` for primary/secondary/success/warning/danger/
+ *     info; `text-neutral-50` for neutral (auto-inverts via CSS-var
+ *     swap, no `dark:` needed)
+ *
+ * Placement axis emits absolute-position + translate utilities:
+ *   - top-right (default): `top-0 right-0 -translate-y-1/2 translate-x-1/2`
+ *   - top-left:    `top-0 left-0 -translate-y-1/2 -translate-x-1/2`
+ *   - bottom-right: `bottom-0 right-0 translate-y-1/2 translate-x-1/2`
+ *   - bottom-left:  `bottom-0 left-0 translate-y-1/2 -translate-x-1/2`
+ *
+ * Overlap axis adds an extra inset for circular anchors so the
+ * badge sits along the round edge instead of the bounding box corner.
+ */ const badgeVariants = tv({
+    slots: {
+        root: 'relative inline-flex shrink-0',
+        badge: [
+            // Absolute positioning is owned by the placement compound rules.
+            'absolute z-10',
+            // Layout / typography — pill defaults; dot mode overrides
+            // dimensions below.
+            'inline-flex items-center justify-center',
+            'rounded-full',
+            'text-[10px] font-medium leading-none',
+            'pointer-events-none select-none',
+            // Smooth show/hide for `invisible` toggle (consumer-side
+            // animation hook). Gated on motion-reduce per WCAG 2.3.3.
+            'transition-transform duration-150 motion-reduce:transition-none motion-reduce:duration-0'
+        ]
+    },
+    variants: {
+        /**
+         * `dot=true` → tiny circle (8px), no content. The badge slot
+         * collapses to a fixed-size circle without the pill min-width.
+         */ dot: {
+            true: {
+                badge: 'w-2 h-2 p-0'
+            },
+            false: {
+                // Content pill — 16px tall, padded inline, min-width so
+                // single-digit counts still read centered.
+                badge: 'min-w-4 h-4 px-1'
+            }
+        },
+        /** Whether the floating badge is hidden via `display: none`. */ invisible: {
+            true: {
+                badge: 'hidden'
+            }
+        },
+        /** Halo ring for visual separation from the anchor surface. */ withRing: {
+            true: {
+                // ring-neutral-50 auto-inverts via dashforgePreset CSS var
+                // swap (no `dark:` needed for the neutral palette).
+                badge: 'ring-2 ring-neutral-50'
+            }
+        },
+        /** 7 intents — drives the badge background + text colour. */ color: {
+            neutral: {
+                // Both classes on the neutral palette — auto-invert via CSS
+                // var swap. No `dark:` variants needed.
+                badge: 'bg-neutral-700 text-neutral-50'
+            },
+            primary: {
+                badge: 'bg-primary-500 text-white'
+            },
+            secondary: {
+                badge: 'bg-secondary-500 text-white'
+            },
+            success: {
+                badge: 'bg-success-500 text-white'
+            },
+            warning: {
+                badge: 'bg-warning-500 text-white'
+            },
+            danger: {
+                badge: 'bg-danger-500 text-white'
+            },
+            info: {
+                badge: 'bg-info-500 text-white'
+            }
+        },
+        placement: {
+            'top-right': {
+                badge: 'top-0 right-0 -translate-y-1/2 translate-x-1/2'
+            },
+            'top-left': {
+                badge: 'top-0 left-0 -translate-y-1/2 -translate-x-1/2'
+            },
+            'bottom-right': {
+                badge: 'bottom-0 right-0 translate-y-1/2 translate-x-1/2'
+            },
+            'bottom-left': {
+                badge: 'bottom-0 left-0 translate-y-1/2 -translate-x-1/2'
+            }
+        },
+        /**
+         * `overlap='circular'` adds an inward inset so the badge sits
+         * along the circular anchor edge instead of the bounding-box
+         * corner. The 14% offset is empirically tuned to match the
+         * standard avatar / round-button geometry (matches MUI's value).
+         */ overlap: {
+            rectangular: {},
+            circular: {}
+        }
+    },
+    compoundVariants: [
+        // ─── overlap='circular' × placement — additional inset ─────────
+        // The inward shift is in addition to the placement translate,
+        // achieved via an extra `-{translate-corner}` adjustment.
+        {
+            overlap: 'circular',
+            placement: 'top-right',
+            class: {
+                badge: 'top-[14%] right-[14%] translate-x-1/2 -translate-y-1/2'
+            }
+        },
+        {
+            overlap: 'circular',
+            placement: 'top-left',
+            class: {
+                badge: 'top-[14%] left-[14%] -translate-x-1/2 -translate-y-1/2'
+            }
+        },
+        {
+            overlap: 'circular',
+            placement: 'bottom-right',
+            class: {
+                badge: 'bottom-[14%] right-[14%] translate-x-1/2 translate-y-1/2'
+            }
+        },
+        {
+            overlap: 'circular',
+            placement: 'bottom-left',
+            class: {
+                badge: 'bottom-[14%] left-[14%] -translate-x-1/2 translate-y-1/2'
+            }
+        }
+    ],
+    defaultVariants: {
+        dot: false,
+        invisible: false,
+        withRing: true,
+        color: 'danger',
+        placement: 'top-right',
+        overlap: 'rectangular'
+    }
+});
+
+/**
+ * Resolve the displayed badge content based on `content`, `max`, and
+ * `showZero` props.
+ *
+ * Returns `null` when nothing should render (omitted content + no dot,
+ * or `content=0` without `showZero`). Otherwise returns the string
+ * to display (formatted overflow for numbers above `max`).
+ *
+ * @internal
+ */ function resolveDisplayContent(content, max, showZero, dot) {
+    // Dot mode — content is irrelevant, badge always shows (unless
+    // gated by visibleWhen / access / invisible higher up).
+    if (dot) return '';
+    // No content + no dot → nothing to render.
+    if (content === undefined || content === null) return null;
+    // Numeric content — apply max overflow + showZero gate.
+    if (typeof content === 'number') {
+        if (content === 0 && !showZero) return null;
+        if (max >= 0 && content > max) return `${max}+`;
+        return String(content);
+    }
+    // String content — render verbatim. Empty string → hide
+    // (counts as "no content" — consumer should pass `dot` for plain dot).
+    return content === '' ? null : content;
+}
+/**
+ * `<Badge>` — anchored indicator overlaying an anchor element.
+ *
+ * Common patterns:
+ *   - Notification count on a bell IconButton
+ *   - Presence dot on an Avatar
+ *   - "NEW" label on a Card or feature tile
+ *   - Unsaved-changes indicator on a save button
+ *
+ * For inline standalone pills (status labels, tags, removable
+ * chips), use `<Chip>` instead — Chip and Badge are complementary
+ * primitives. Chip is interactive (`onClick`, `onDelete`,
+ * `selected`); Badge is passive overlay.
+ *
+ * Bridge integration (Sprint 4.4):
+ *   - `access` — hide the badge for unauthorized subjects (anchor
+ *     stays visible; wrap anchor in a separate Box `access` to gate
+ *     it too)
+ *   - `visibleWhen` — engine-reactive predicate
+ *
+ * The wrapped anchor element ALWAYS renders; only the floating
+ * badge dot/count is gated by `access`, `visibleWhen`, `invisible`,
+ * and content-resolution logic.
+ *
+ * @example
+ * ```tsx
+ * // Notification count on bell
+ * <Badge content={unreadCount}>
+ *   <IconButton aria-label="Notifications" variant="ghost">
+ *     <BellIcon />
+ *   </IconButton>
+ * </Badge>
+ *
+ * // Presence dot on avatar
+ * <Badge dot color="success" overlap="circular">
+ *   <Avatar name="Maya Rodriguez" />
+ * </Badge>
+ *
+ * // Overflow
+ * <Badge content={1284} max={999}>
+ *   <IconButton aria-label="Messages"><MailIcon /></IconButton>
+ * </Badge>
+ *
+ * // RBAC-gated
+ * <Badge
+ *   content={adminQueueCount}
+ *   access={{ resource: 'admin', action: 'read', onUnauthorized: 'hide' }}
+ * >
+ *   <IconButton aria-label="Admin queue"><SettingsIcon /></IconButton>
+ * </Badge>
+ *
+ * // Engine-reactive
+ * <Badge
+ *   dot color="warning"
+ *   visibleWhen={(engine) => !!engine.getNode('unsavedChanges')?.value}
+ * >
+ *   <IconButton aria-label="Save"><SaveIcon /></IconButton>
+ * </Badge>
+ * ```
+ */ const Badge = /*#__PURE__*/ forwardRef(function Badge(props, ref) {
+    var _slotProps_root, _slotProps_badge;
+    const { children, content, dot = false, max = 99, showZero = false, invisible = false, color = 'danger', placement = 'top-right', overlap = 'rectangular', withRing = true, access, visibleWhen, sx, className, slotProps } = props;
+    // Bridge — both hooks called unconditionally (rules-of-hooks).
+    const bridge = useContext(DashFormContext);
+    const isBridgeVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    // Resolve the actual content to render (string or null = hide).
+    // Computed regardless of access/visibleWhen so we can keep the
+    // hook order stable; the final "render or not" check folds them in.
+    const displayContent = resolveDisplayContent(content, max, showZero, dot);
+    // The wrapped anchor ALWAYS renders. Only the floating badge is
+    // gated. This is the right contract — gating the anchor too would
+    // belong to a Box `access` wrapper one level up.
+    const shouldRenderBadge = isBridgeVisible && accessState.visible && displayContent !== null;
+    const v = badgeVariants({
+        dot,
+        invisible,
+        withRing,
+        color,
+        placement,
+        overlap
+    });
+    return jsxs("span", {
+        ref: ref,
+        className: cn(v.root(), sx, className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            children,
+            shouldRenderBadge && jsx("span", {
+                className: cn(v.badge(), slotProps == null ? void 0 : (_slotProps_badge = slotProps.badge) == null ? void 0 : _slotProps_badge.className),
+                "aria-hidden": "true",
+                children: displayContent
+            })
+        ]
+    });
+});
+Badge.displayName = 'Badge';
+
+/**
+ * Tailwind-variants recipe for `<Avatar>`.
+ *
+ * Axes:
+ *   - `size`   — 5 steps (xs/sm/md/lg/xl), maps to w/h spacing tokens
+ *                + matching text-size for the initials inside.
+ *   - `radius` — 7 steps (none/sm/md/lg/xl/2xl/full), same scale as
+ *                `<Box rounded>`. `shape` prop in the component maps
+ *                semantically: circle → full, rounded → lg, square → none.
+ *   - `color`  — 7 intents. Drives the FALLBACK bg+text only (image
+ *                surface is independent of color).
+ *
+ * The `color` × `tone` combo is resolved at render time in
+ * `Avatar.tsx` via compound lookup — see the SOFT_TINT and TONE
+ * tables there. We do NOT expand the matrix exhaustively in this TV
+ * recipe (it would be 7 colors × 10 tones × 5 sizes = 350 rules; the
+ * runtime resolver keeps the recipe slim).
+ */ const avatarVariants = tv({
+    slots: {
+        /** Outer wrapper — sets dimensions + radius + ring + alignment. */ root: [
+            'relative inline-flex items-center justify-center shrink-0',
+            'overflow-hidden align-middle',
+            'select-none',
+            // The font weight + leading are baked into root so initials slot
+            // inherits them without an extra class layer.
+            'font-medium leading-none'
+        ],
+        /** `<img>` slot — fills the root, object-cover for crop-to-square. */ img: 'block w-full h-full object-cover',
+        /** Initials text slot. */ initials: 'uppercase tracking-tight',
+        /** Generic user icon SVG fallback. */ icon: 'w-1/2 h-1/2 opacity-80'
+    },
+    variants: {
+        size: {
+            xs: {
+                root: 'w-5 h-5 text-[10px]',
+                initials: ''
+            },
+            sm: {
+                root: 'w-7 h-7 text-xs',
+                initials: ''
+            },
+            md: {
+                root: 'w-9 h-9 text-sm',
+                initials: ''
+            },
+            lg: {
+                root: 'w-12 h-12 text-base',
+                initials: ''
+            },
+            xl: {
+                root: 'w-16 h-16 text-xl',
+                initials: ''
+            }
+        },
+        radius: {
+            none: {
+                root: 'rounded-none'
+            },
+            sm: {
+                root: 'rounded-sm'
+            },
+            md: {
+                root: 'rounded-md'
+            },
+            lg: {
+                root: 'rounded-lg'
+            },
+            xl: {
+                root: 'rounded-xl'
+            },
+            '2xl': {
+                root: 'rounded-2xl'
+            },
+            full: {
+                root: 'rounded-full'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        radius: 'full'
+    }
+});
+/**
+ * Default "soft" fallback treatment per intent — what you get when
+ * `tone` is omitted. Light tinted bg + dark text for legibility.
+ * Neutral row uses no `dark:` because the dashforgePreset() CSS-var
+ * swap auto-inverts neutral; color rows keep `dark:` for the
+ * intentional palette shift (palette colors don't auto-invert).
+ */ const AVATAR_SOFT_FALLBACK = {
+    neutral: 'bg-neutral-100 text-neutral-900',
+    primary: 'bg-primary-100 text-primary-900 dark:bg-primary-950 dark:text-primary-100',
+    secondary: 'bg-secondary-100 text-secondary-900 dark:bg-secondary-950 dark:text-secondary-100',
+    success: 'bg-success-100 text-success-900 dark:bg-success-950 dark:text-success-100',
+    warning: 'bg-warning-100 text-warning-900 dark:bg-warning-950 dark:text-warning-100',
+    danger: 'bg-danger-100 text-danger-900 dark:bg-danger-950 dark:text-danger-100',
+    info: 'bg-info-100 text-info-900 dark:bg-info-950 dark:text-info-100'
+};
+/**
+ * Specific-tone resolver — when the consumer sets `tone={500}` (or
+ * any other value), this lookup builds the matching bg + text class.
+ *
+ * Text color logic:
+ *   - tones 50-400  → dark text (uses the 900 step)
+ *   - tones 500-900 → light text (uses the 50 step)
+ *
+ * Tailwind JIT requires literal class strings, so we enumerate them
+ * explicitly here. The bundle cost is ~70 lines, acceptable for the
+ * type-safety win of letting consumers pick any palette shade.
+ */ const AVATAR_TONE_FALLBACK = {
+    neutral: {
+        50: 'bg-neutral-50 text-neutral-900',
+        100: 'bg-neutral-100 text-neutral-900',
+        200: 'bg-neutral-200 text-neutral-900',
+        300: 'bg-neutral-300 text-neutral-900',
+        400: 'bg-neutral-400 text-neutral-900',
+        500: 'bg-neutral-500 text-neutral-50',
+        600: 'bg-neutral-600 text-neutral-50',
+        700: 'bg-neutral-700 text-neutral-50',
+        800: 'bg-neutral-800 text-neutral-50',
+        900: 'bg-neutral-900 text-neutral-50'
+    },
+    primary: {
+        50: 'bg-primary-50 text-primary-900',
+        100: 'bg-primary-100 text-primary-900',
+        200: 'bg-primary-200 text-primary-900',
+        300: 'bg-primary-300 text-primary-900',
+        400: 'bg-primary-400 text-primary-900',
+        500: 'bg-primary-500 text-primary-50',
+        600: 'bg-primary-600 text-primary-50',
+        700: 'bg-primary-700 text-primary-50',
+        800: 'bg-primary-800 text-primary-50',
+        900: 'bg-primary-900 text-primary-50'
+    },
+    secondary: {
+        50: 'bg-secondary-50 text-secondary-900',
+        100: 'bg-secondary-100 text-secondary-900',
+        200: 'bg-secondary-200 text-secondary-900',
+        300: 'bg-secondary-300 text-secondary-900',
+        400: 'bg-secondary-400 text-secondary-900',
+        500: 'bg-secondary-500 text-secondary-50',
+        600: 'bg-secondary-600 text-secondary-50',
+        700: 'bg-secondary-700 text-secondary-50',
+        800: 'bg-secondary-800 text-secondary-50',
+        900: 'bg-secondary-900 text-secondary-50'
+    },
+    success: {
+        50: 'bg-success-50 text-success-900',
+        100: 'bg-success-100 text-success-900',
+        200: 'bg-success-200 text-success-900',
+        300: 'bg-success-300 text-success-900',
+        400: 'bg-success-400 text-success-900',
+        500: 'bg-success-500 text-success-50',
+        600: 'bg-success-600 text-success-50',
+        700: 'bg-success-700 text-success-50',
+        800: 'bg-success-800 text-success-50',
+        900: 'bg-success-900 text-success-50'
+    },
+    warning: {
+        50: 'bg-warning-50 text-warning-900',
+        100: 'bg-warning-100 text-warning-900',
+        200: 'bg-warning-200 text-warning-900',
+        300: 'bg-warning-300 text-warning-900',
+        400: 'bg-warning-400 text-warning-900',
+        500: 'bg-warning-500 text-warning-50',
+        600: 'bg-warning-600 text-warning-50',
+        700: 'bg-warning-700 text-warning-50',
+        800: 'bg-warning-800 text-warning-50',
+        900: 'bg-warning-900 text-warning-50'
+    },
+    danger: {
+        50: 'bg-danger-50 text-danger-900',
+        100: 'bg-danger-100 text-danger-900',
+        200: 'bg-danger-200 text-danger-900',
+        300: 'bg-danger-300 text-danger-900',
+        400: 'bg-danger-400 text-danger-900',
+        500: 'bg-danger-500 text-danger-50',
+        600: 'bg-danger-600 text-danger-50',
+        700: 'bg-danger-700 text-danger-50',
+        800: 'bg-danger-800 text-danger-50',
+        900: 'bg-danger-900 text-danger-50'
+    },
+    info: {
+        50: 'bg-info-50 text-info-900',
+        100: 'bg-info-100 text-info-900',
+        200: 'bg-info-200 text-info-900',
+        300: 'bg-info-300 text-info-900',
+        400: 'bg-info-400 text-info-900',
+        500: 'bg-info-500 text-info-50',
+        600: 'bg-info-600 text-info-50',
+        700: 'bg-info-700 text-info-50',
+        800: 'bg-info-800 text-info-50',
+        900: 'bg-info-900 text-info-50'
+    }
+};
+
+/**
+ * Generic user icon — inline SVG fallback when no `src` and no
+ * `name` are provided. Stroke uses `currentColor` so it inherits the
+ * resolved fallback text color. Same convention as Calendar +
+ * Autocomplete + Alert icons (no icon-library dep).
+ *
+ * @internal
+ */ function DefaultUserIcon() {
+    return jsxs("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.75,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+            jsx("circle", {
+                cx: "12",
+                cy: "8",
+                r: "3.75"
+            }),
+            jsx("path", {
+                d: "M4.5 20a7.5 7.5 0 0 1 15 0"
+            })
+        ]
+    });
+}
+/**
+ * Map the semantic `shape` shortcut to a Box-style `radius` token.
+ * Used only when `radius` is NOT explicitly passed (explicit wins).
+ *
+ * @internal
+ */ function shapeToRadius(shape) {
+    switch(shape){
+        case 'circle':
+            return 'full';
+        case 'rounded':
+            return 'lg';
+        case 'square':
+            return 'none';
+    }
+}
+/**
+ * Extract initials from a name string. Strategy:
+ *   - Split by whitespace, filter empty.
+ *   - Take the first letter of the first 2 tokens, uppercased.
+ *   - "Maya Rodriguez" → "MR"
+ *   - "Cher" → "C"
+ *   - "  multiple   spaces  " → "MS" (if 2+ words after trim)
+ *   - "" → "" (empty string — caller falls back to icon)
+ *
+ * @internal
+ */ function initialsFromName(name) {
+    var _ref;
+    var _tokens_;
+    if (!name) return '';
+    const tokens = name.trim().split(/\s+/).filter(Boolean);
+    if (tokens.length === 0) return '';
+    return (tokens[0][0] + ((_ref = (_tokens_ = tokens[1]) == null ? void 0 : _tokens_[0]) != null ? _ref : '')).toUpperCase();
+}
+/**
+ * `<Avatar>` — image / initials / icon visual identity.
+ *
+ * Fallback chain (top to bottom — first match wins):
+ *   1. `src` set + image loads OK    → render `<img>`
+ *   2. `src` set + image fails       → render initials from `name`
+ *   3. `src` absent + `name` set     → render initials from `name`
+ *   4. `fallbackIcon` set            → render that ReactNode
+ *   5. Nothing                        → render generic user SVG
+ *
+ * Color resolution (only for fallback content, image surface is
+ * independent):
+ *   - `color="primary"` only           → soft default (bg-100, text-900)
+ *   - `color="primary" tone={500}`     → bg-primary-500 + text-primary-50
+ *   - Outside the palette              → use `sx`
+ *
+ * No `access` / `visibleWhen` — Avatar is display-only by category.
+ * For visibility gating, wrap in `<Box>` (which has both since
+ * Sprint 4.4).
+ */ const Avatar = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
+    var _ref, _ref1;
+    var _AVATAR_TONE_FALLBACK_color;
+    const { src, alt, imgProps, name, shape = 'circle', radius, size = 'md', color = 'neutral', tone, fallbackIcon, sx, className } = props;
+    // Track image-load failures so we can fall through to initials/icon
+    // dynamically. `imgLoaded` distinguishes between "still loading"
+    // (don't show fallback yet — would flash) and "loaded successfully"
+    // (don't paint a fallback color underneath, which would peek through
+    // transparent PNGs).
+    const [imgFailed, setImgFailed] = useState(false);
+    // Resolve final radius: explicit `radius` prop wins over `shape`.
+    const finalRadius = radius != null ? radius : shapeToRadius(shape);
+    // Compute base classes from the TV recipe.
+    const v = avatarVariants({
+        size,
+        radius: finalRadius
+    });
+    // Fallback color resolution. `tone` (when set) drives the specific
+    // shade; otherwise the soft-default lookup is used.
+    const fallbackTone = tone !== undefined ? (_ref = (_AVATAR_TONE_FALLBACK_color = AVATAR_TONE_FALLBACK[color]) == null ? void 0 : _AVATAR_TONE_FALLBACK_color[tone]) != null ? _ref : AVATAR_SOFT_FALLBACK[color] : AVATAR_SOFT_FALLBACK[color];
+    // Image is "successful" when src is set AND the load hasn't failed.
+    const showImage = !!src && !imgFailed;
+    const initials = initialsFromName(name);
+    // The root carries the fallback color ONLY when we're showing the
+    // fallback content. Painting it underneath a successful image is
+    // wrong if the image has transparency.
+    const fallbackBgClasses = !showImage ? fallbackTone : '';
+    const rootClasses = cn(v.root(), fallbackBgClasses, sx, className);
+    // Pick which fallback to render — priority: initials > custom icon > generic SVG.
+    const fallbackContent = initials ? jsx("span", {
+        className: v.initials(),
+        children: initials
+    }) : fallbackIcon ? jsx("span", {
+        className: "inline-flex items-center justify-center w-full h-full",
+        children: fallbackIcon
+    }) : jsx("span", {
+        className: v.icon() + ' inline-flex items-center justify-center',
+        children: jsx(DefaultUserIcon, {})
+    });
+    return jsx("span", {
+        ref: ref,
+        className: rootClasses,
+        role: "img",
+        "aria-label": (_ref1 = alt != null ? alt : name) != null ? _ref1 : undefined,
+        children: showImage ? // Inner img is DECORATIVE (alt="") — the parent span carries
+        // the accessible name via role="img" + aria-label. This avoids
+        // a duplicate role="img" announcement and matches MUI's a11y
+        // pattern.
+        jsx("img", _extends({
+            src: src,
+            alt: "",
+            onError: ()=>setImgFailed(true)
+        }, imgProps, {
+            className: cn(v.img(), imgProps == null ? void 0 : imgProps.className)
+        })) : fallbackContent
+    });
+});
+Avatar.displayName = 'Avatar';
+// ─── AvatarGroup ─────────────────────────────────────────────────
+/**
+ * Horizontal spacing tokens for the group overlap. Negative margin
+ * pulls each child onto the previous, simulating the "stack of
+ * avatars" pattern. Tokens map to spacing scale.
+ *
+ * @internal
+ */ const GROUP_SPACING = {
+    xs: '-space-x-1',
+    sm: '-space-x-2',
+    md: '-space-x-3'
+};
+/**
+ * `<AvatarGroup>` — thin horizontal wrapper for overlapping avatars.
+ *
+ * Slices children to `max - 1` visible items and renders a trailing
+ * "+N" overflow indicator with the remaining count (when more than
+ * `max` children are passed).
+ *
+ * Each child Avatar inherits the group's `size` unless it explicitly
+ * overrides. When `withRing` is `true` (default), each visible
+ * Avatar gets a `ring-2 ring-white` halo so overlapping borders
+ * stay visually separated.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3}>
+ *   <Avatar name="Maya Rodriguez" color="primary" />
+ *   <Avatar name="John Doe" color="success" />
+ *   <Avatar name="Sara Chen" color="warning" />
+ *   <Avatar name="Lila Park" color="info" />
+ *   <Avatar name="Eve Kim" color="danger" />
+ * </AvatarGroup>
+ * // Renders: MR, JD, SC + a "+2" overflow chip
+ * ```
+ */ const AvatarGroup = /*#__PURE__*/ forwardRef(function AvatarGroup(props, ref) {
+    const { children, max = 4, size = 'md', spacing = 'sm', withRing = true, className, sx } = props;
+    const allChildren = Children.toArray(children).filter(isValidElement);
+    const total = allChildren.length;
+    const visibleCount = Math.min(total, max);
+    const overflow = Math.max(0, total - visibleCount);
+    // Decorate each visible child with size (if not overridden by the
+    // child) and optional ring halo. cloneElement is the standard
+    // React pattern for prop-injection across a children array.
+    const visible = allChildren.slice(0, visibleCount).map((child, idx)=>{
+        var _childProps_size;
+        const childProps = child.props;
+        const inheritedSize = (_childProps_size = childProps.size) != null ? _childProps_size : size;
+        const ringClass = withRing ? 'ring-2 ring-neutral-50' : '';
+        const mergedSx = cn(ringClass, childProps.sx, childProps.className);
+        return /*#__PURE__*/ cloneElement(child, {
+            key: idx,
+            size: inheritedSize,
+            sx: mergedSx
+        });
+    });
+    return jsxs("div", {
+        ref: ref,
+        className: cn('inline-flex items-center', GROUP_SPACING[spacing], sx, className),
+        children: [
+            visible,
+            overflow > 0 && jsx(Avatar, {
+                // The overflow indicator IS an avatar (same dimensions /
+                // radius), but with a +N text fallback rather than initials.
+                // We pass an empty `name` and a custom `fallbackIcon` that
+                // renders the count.
+                size: size,
+                color: "neutral",
+                sx: cn(withRing && 'ring-2 ring-neutral-50'),
+                fallbackIcon: jsxs("span", {
+                    className: "text-xs font-medium",
+                    children: [
+                        "+",
+                        overflow
+                    ]
+                })
+            })
+        ]
+    });
+});
+AvatarGroup.displayName = 'AvatarGroup';
+
+/**
+ * `boxVariants` — the surface primitive for @dashforge/tw.
+ *
+ * Architectural choice (planned with the user — F9 deep dive):
+ *
+ *   Box replaces FOUR overlapping concepts from MUI in one component:
+ *     • Box        (typed div)
+ *     • Paper      (surface with elevation)
+ *     • Card       (Paper specialisation)
+ *     • Surface    (Joy UI's outlined / soft / solid / plain variants)
+ *
+ *   The reason for the consolidation: in MUI you have to compose two or
+ *   three of these to express even basic intent ("an outlined card with
+ *   warning tone"). Here, one `<Box variant="outlined" color="warning">`
+ *   says exactly that.
+ *
+ * Variant taxonomy (5 axes, intentionally non-overlapping with Stack/Grid):
+ *
+ *   • plain     — bare div + padding + radius. The escape hatch.
+ *   • outlined  — 1px border + subtle bg tint. The "card lite".
+ *   • elevated  — bg surface + shadow scale (0-5). The "floating panel".
+ *   • soft      — semi-transparent intent bg + intent text. The "callout".
+ *   • solid     — solid intent bg + contrasting text. The "CTA banner".
+ *
+ *   `color` applies to outlined/soft/solid (each gets the 7 intent
+ *   variants). `elevated` is color-agnostic (always neutral surface +
+ *   shadow scale). `plain` is everything-agnostic.
+ *
+ * Spacing axes (p/px/py/m/mx/my): mapped explicitly to the 11 token
+ * steps from @dashforge/tw-tokens (0, 0.5, 1, 2, 3, 4, 6, 8, 12, 16, 24).
+ * Tailwind JIT requires literal class strings — building them dynamically
+ * with template literals would purge them. The verbosity below is the
+ * cost of keeping the bundle CSS-pure and rebuild-free.
+ *
+ * What this does NOT do (deliberate, see component docs):
+ *   • No display / flex / grid props      → use Stack or Grid
+ *   • No position / overflow / z-index    → use `sx`
+ *   • No animation / transition           → use `sx`
+ *
+ * The "Box is not flex" rule is the spine of the layout layer. Without
+ * it, every `<div>` in an app gravitates back to Box and the surface
+ * vs layout distinction collapses — exactly the failure mode this
+ * primitive exists to prevent.
+ */ const boxVariants = tv({
+    base: 'block',
+    variants: {
+        /*
+         * Surface variant. Compound with `color` for outlined / soft / solid;
          * standalone for plain / elevated.
          */ variant: {
             plain: '',
@@ -6961,337 +8503,1337 @@ Typography.displayName = 'Typography';
             // in dark mode — overpowering elevation).
             elevated: 'bg-white dark:bg-neutral-100',
             soft: '',
-            solid: ''
+            solid: ''
+        },
+        /*
+         * Intent color. Only meaningful when variant is outlined / soft /
+         * solid (resolved via compoundVariants below). For plain / elevated
+         * this axis is ignored at the visual level — but kept in the type
+         * so the prop is always available without conditional typing.
+         */ color: {
+            primary: '',
+            secondary: '',
+            success: '',
+            warning: '',
+            danger: '',
+            info: '',
+            neutral: ''
+        },
+        /*
+         * Shadow scale — relevant for `variant='elevated'`. We keep elevation
+         * as a separate axis (not folded into `variant`) so consumers can
+         * dial it up/down without changing the variant. Default `0` = no
+         * shadow (consistent with MUI's elevation=0).
+         */ elevation: {
+            0: 'shadow-none',
+            1: 'shadow-sm',
+            2: 'shadow',
+            3: 'shadow-md',
+            4: 'shadow-lg',
+            5: 'shadow-xl'
+        },
+        rounded: {
+            none: 'rounded-none',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            '2xl': 'rounded-2xl',
+            full: 'rounded-full'
+        },
+        /*
+         * Spacing — six axes (p/px/py/m/mx/my), 11 token steps each.
+         * Literals enumerated explicitly so Tailwind's JIT scanner finds
+         * every class. Token steps mirror @dashforge/tw-tokens spacing scale.
+         */ p: {
+            0: 'p-0',
+            '0.5': 'p-0.5',
+            1: 'p-1',
+            2: 'p-2',
+            3: 'p-3',
+            4: 'p-4',
+            6: 'p-6',
+            8: 'p-8',
+            12: 'p-12',
+            16: 'p-16',
+            24: 'p-24'
+        },
+        px: {
+            0: 'px-0',
+            '0.5': 'px-0.5',
+            1: 'px-1',
+            2: 'px-2',
+            3: 'px-3',
+            4: 'px-4',
+            6: 'px-6',
+            8: 'px-8',
+            12: 'px-12',
+            16: 'px-16',
+            24: 'px-24'
+        },
+        py: {
+            0: 'py-0',
+            '0.5': 'py-0.5',
+            1: 'py-1',
+            2: 'py-2',
+            3: 'py-3',
+            4: 'py-4',
+            6: 'py-6',
+            8: 'py-8',
+            12: 'py-12',
+            16: 'py-16',
+            24: 'py-24'
+        },
+        m: {
+            0: 'm-0',
+            '0.5': 'm-0.5',
+            1: 'm-1',
+            2: 'm-2',
+            3: 'm-3',
+            4: 'm-4',
+            6: 'm-6',
+            8: 'm-8',
+            12: 'm-12',
+            16: 'm-16',
+            24: 'm-24'
+        },
+        mx: {
+            0: 'mx-0',
+            '0.5': 'mx-0.5',
+            1: 'mx-1',
+            2: 'mx-2',
+            3: 'mx-3',
+            4: 'mx-4',
+            6: 'mx-6',
+            8: 'mx-8',
+            12: 'mx-12',
+            16: 'mx-16',
+            24: 'mx-24'
+        },
+        my: {
+            0: 'my-0',
+            '0.5': 'my-0.5',
+            1: 'my-1',
+            2: 'my-2',
+            3: 'my-3',
+            4: 'my-4',
+            6: 'my-6',
+            8: 'my-8',
+            12: 'my-12',
+            16: 'my-16',
+            24: 'my-24'
+        },
+        fullWidth: {
+            true: 'w-full'
+        },
+        fullHeight: {
+            true: 'h-full'
+        }
+    },
+    /*
+     * Compound variants — where surface × color get their actual visual.
+     * Twenty-one entries: 7 (outlined) + 7 (soft) + 7 (solid).
+     * `plain` and `elevated` don't appear here (no color contribution).
+     *
+     * Dark-mode pair is baked in: light-mode picks the 50-300 steps,
+     * dark-mode picks the 800-950 steps — both reactive to setMode()
+     * via the @dashforge/tw-theme CSS variables.
+     */ compoundVariants: [
+        // ─── outlined × color ─────────────────────────────────────────────
+        {
+            variant: 'outlined',
+            color: 'primary',
+            class: 'border-primary-300 bg-primary-50/40 dark:border-primary-800 dark:bg-primary-950/30'
+        },
+        {
+            variant: 'outlined',
+            color: 'secondary',
+            class: 'border-secondary-300 bg-secondary-50/40 dark:border-secondary-800 dark:bg-secondary-950/30'
+        },
+        {
+            variant: 'outlined',
+            color: 'success',
+            class: 'border-success-300 bg-success-50/40 dark:border-success-800 dark:bg-success-950/30'
+        },
+        {
+            variant: 'outlined',
+            color: 'warning',
+            class: 'border-warning-300 bg-warning-50/40 dark:border-warning-800 dark:bg-warning-950/30'
+        },
+        {
+            variant: 'outlined',
+            color: 'danger',
+            class: 'border-danger-300 bg-danger-50/40 dark:border-danger-800 dark:bg-danger-950/30'
+        },
+        {
+            variant: 'outlined',
+            color: 'info',
+            class: 'border-info-300 bg-info-50/40 dark:border-info-800 dark:bg-info-950/30'
+        },
+        {
+            variant: 'outlined',
+            color: 'neutral',
+            // border-neutral-200 auto-inverts via CSS var swap (no `dark:`
+            // needed). bg-white is hardcoded — `dark:bg-neutral-100` keeps
+            // elevation tier above page surface in dark mode (NOT
+            // `dark:bg-neutral-900` which renders near-white).
+            class: 'border-neutral-200 bg-white dark:bg-neutral-100'
+        },
+        // ─── soft × color ─────────────────────────────────────────────────
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: 'bg-primary-100 text-primary-900 dark:bg-primary-950/50 dark:text-primary-100'
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: 'bg-secondary-100 text-secondary-900 dark:bg-secondary-950/50 dark:text-secondary-100'
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: 'bg-success-100 text-success-900 dark:bg-success-950/50 dark:text-success-100'
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: 'bg-warning-100 text-warning-900 dark:bg-warning-950/50 dark:text-warning-100'
+        },
+        {
+            variant: 'soft',
+            color: 'danger',
+            class: 'bg-danger-100 text-danger-900 dark:bg-danger-950/50 dark:text-danger-100'
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: 'bg-info-100 text-info-900 dark:bg-info-950/50 dark:text-info-100'
+        },
+        {
+            variant: 'soft',
+            color: 'neutral',
+            // Both neutral classes auto-invert via the dashforgePreset() CSS
+            // var swap — no `dark:` variants needed.
+            class: 'bg-neutral-100 text-neutral-900'
+        },
+        // ─── solid × color ────────────────────────────────────────────────
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: 'bg-primary-600 text-white dark:bg-primary-500'
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: 'bg-secondary-600 text-white dark:bg-secondary-500'
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: 'bg-success-600 text-white dark:bg-success-500'
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: 'bg-warning-500 text-white dark:bg-warning-600'
+        },
+        {
+            variant: 'solid',
+            color: 'danger',
+            class: 'bg-danger-600 text-white dark:bg-danger-500'
+        },
+        {
+            variant: 'solid',
+            color: 'info',
+            class: 'bg-info-600 text-white dark:bg-info-500'
+        },
+        {
+            variant: 'solid',
+            color: 'neutral',
+            // Solid neutral is the high-emphasis "always-foreground accent"
+            // variant. Both classes auto-invert: dark surface + light text
+            // in light mode (`#171717` / `#fafafa`) flips to light surface +
+            // dark text in dark mode (`#f5f5f5` / `#0a0a0a`). The
+            // accent inverts WITH the page surface — consistent with the
+            // identity rule. Previously used `text-white` (no auto-invert)
+            // which forced double-inversion to keep readable.
+            class: 'bg-neutral-900 text-neutral-50'
+        }
+    ],
+    defaultVariants: {
+        variant: 'plain',
+        color: 'neutral',
+        elevation: 0,
+        rounded: 'none'
+    }
+});
+
+/**
+ * `<Box>` — the surface primitive of @dashforge/tw.
+ *
+ * What it IS:
+ *   A polymorphic container with typed surface variants (plain /
+ *   outlined / elevated / soft / solid) × 7 intent colours, plus
+ *   spacing / sizing / rounded / elevation as enumerated token-scale
+ *   props. Replaces MUI's Box + Paper + Card + Surface in one component.
+ *
+ * What it is NOT (deliberate, enforced by the prop set):
+ *   • Not a flex container         → use <Stack>
+ *   • Not a grid container         → use <Grid>
+ *   • Not a paragraph              → use <Typography>
+ *   • Not a button                 → use <Button>
+ *
+ * The "Box is not flex" rule is the spine of the layout layer. Without
+ * it, every `<div>` in an app gravitates back to Box and the surface
+ * vs layout distinction collapses. Box's job is the SURFACE around
+ * content; Stack/Grid's job is the ARRANGEMENT of content. Two
+ * primitives, two responsibilities.
+ *
+ * When BOTH `as` and `asChild` are passed, `asChild` wins. Same rule
+ * as Typography — documented to avoid the dimension-bloat of a
+ * discriminated union over an 11-axis props type.
+ *
+ * Layering:
+ *   • Sits BENEATH every visual chrome — every card, every panel,
+ *     every section background.
+ *   • Composes ON TOP of @dashforge/tw-tokens (color + spacing + radius
+ *     + shadow scales) via the dashforgePreset CSS variables.
+ *   • Pairs with Typography for text content, Stack/Grid for layout
+ *     children inside it.
+ */ const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
+    const { variant, color, elevation, rounded, p, px, py, m, mx, my, fullWidth, fullHeight, as, asChild = false, sx, visibleWhen, access, children } = props, rest = _object_without_properties_loose(props, [
+        "variant",
+        "color",
+        "elevation",
+        "rounded",
+        "p",
+        "px",
+        "py",
+        "m",
+        "mx",
+        "my",
+        "fullWidth",
+        "fullHeight",
+        "as",
+        "asChild",
+        "sx",
+        "visibleWhen",
+        "access",
+        "children"
+    ]);
+    // Bridge — hooks called unconditionally (rules-of-hooks).
+    // `useEngineVisibility` subscribes to engine state inside a
+    // `<DashForm>` and re-evaluates the predicate reactively; outside
+    // a form, it evaluates the predicate as a plain closure.
+    // `useAccessState` consults the @dashforge/rbac policy engine.
+    // Both default to no-op when the corresponding prop is omitted.
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    // Early return — predicate false OR RBAC denies visibility.
+    if (!isVisible || !accessState.visible) return null;
+    const classes = cn(boxVariants({
+        variant,
+        color,
+        elevation,
+        rounded,
+        p,
+        px,
+        py,
+        m,
+        mx,
+        my,
+        fullWidth,
+        fullHeight
+    }), // RBAC-disabled / readonly surfaces dim visually + carry
+    // semantic ARIA attributes (assigned below) so descendants and
+    // assistive tech can react.
+    accessState.disabled && 'opacity-60', accessState.readonly && 'opacity-80', sx);
+    const ariaProps = {
+        'aria-disabled': accessState.disabled || undefined,
+        'aria-readonly': accessState.readonly || undefined,
+        'data-disabled': accessState.disabled || undefined,
+        'data-readonly': accessState.readonly || undefined
+    };
+    if (asChild) {
+        return jsx(Slot, _extends({
+            ref: ref,
+            className: classes
+        }, ariaProps, rest, {
+            children: children
+        }));
+    }
+    const Tag = as != null ? as : 'div';
+    return jsx(Tag, _extends({
+        ref: ref,
+        className: classes
+    }, ariaProps, rest, {
+        children: children
+    }));
+});
+Box.displayName = 'Box';
+
+/**
+ * `<Card>` — opinionated surface preset over `<Box>`.
+ *
+ * Thin alias that pre-fills card-shaped Box defaults (`outlined`,
+ * `rounded='lg'`, `elevation=1`, no padding). Reads as `<Card>` in
+ * consumer code while reusing every Box affordance: surface variants,
+ * 7 intent colors, spacing scale, polymorphism, and the bridge
+ * integration (`access` + `visibleWhen`) retrofitted to Box in 1.1.0.
+ *
+ * Restricted variant axis: only `'outlined' | 'elevated' | 'plain'`.
+ * `'soft'` and `'solid'` are deliberately excluded — they belong to
+ * Box (as `<Alert>`-shaped callouts) and to banners, not to cards.
+ *
+ * @example
+ * ```tsx
+ * // Most common — outlined card with content padding via CardContent
+ * <Card>
+ *   <CardContent>
+ *     <Typography variant="h3">Title</Typography>
+ *     <Typography variant="body">Body</Typography>
+ *   </CardContent>
+ * </Card>
+ *
+ * // Elevated, clickable, gated by RBAC (inherits access from Box)
+ * <Card
+ *   variant="elevated"
+ *   elevation={2}
+ *   access={{ resource: 'billing', action: 'read', onUnauthorized: 'hide' }}
+ * >
+ *   <CardActionArea onClick={openBilling}>
+ *     <CardContent>
+ *       <Typography variant="h3">Revenue</Typography>
+ *     </CardContent>
+ *   </CardActionArea>
+ * </Card>
+ * ```
+ */ const Card = /*#__PURE__*/ forwardRef(function Card(props, ref) {
+    const { variant = 'outlined', rounded = 'lg', elevation = 1, p = 0, children } = props, rest = _object_without_properties_loose(props, [
+        "variant",
+        "rounded",
+        "elevation",
+        "p",
+        "children"
+    ]);
+    return jsx(Box, _extends({
+        ref: ref,
+        variant: variant,
+        rounded: rounded,
+        elevation: elevation,
+        p: p
+    }, rest, {
+        children: children
+    }));
+});
+Card.displayName = 'Card';
+/**
+ * `<CardContent>` — padded inner section of a Card.
+ *
+ * Semantic alias for an inner `<Box p={4}>`. The default padding step
+ * (4) maps to `--df-tw-spacing-4` (1rem) via the dashforgePreset,
+ * matching common card-content paddings across MUI / shadcn / Chakra.
+ * Override `p` to dial up/down per the spacing token scale.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardContent p={6}>  {/* bigger inner padding *}/}
+ *     <Typography variant="h3">Spacious card</Typography>
+ *   </CardContent>
+ * </Card>
+ * ```
+ */ function CardContent({ p = 4, children, className, sx }) {
+    return jsx(Box, {
+        p: p,
+        sx: cn(className, sx),
+        children: children
+    });
+}
+CardContent.displayName = 'CardContent';
+/**
+ * `<CardActionArea>` — clickable wrapper for Card content.
+ *
+ * Adds focus ring + hover tint + Radix Slot polymorphism. Renders as
+ * `<button type="button">` by default, or as the immediate child via
+ * `asChild` (typical pattern: wrap a router `<Link>`).
+ *
+ * Bridge integration is local — CardActionArea is an action trigger
+ * (not a surface), so it carries `access` + `visibleWhen` directly
+ * (rather than relying on the wrapping Card's props). This lets the
+ * consumer differentiate "the card is visible but not clickable" from
+ * "the card is not visible at all".
+ *
+ * @example
+ * ```tsx
+ * // Card-as-CTA
+ * <Card>
+ *   <CardActionArea onClick={navigate}>
+ *     <CardContent>
+ *       <Typography variant="h3">Open dashboard</Typography>
+ *       <Typography variant="body">Hover to see the focus ring.</Typography>
+ *     </CardContent>
+ *   </CardActionArea>
+ * </Card>
+ *
+ * // Polymorphic — wrap a router Link
+ * <Card>
+ *   <CardActionArea asChild>
+ *     <Link to="/billing">
+ *       <CardContent>
+ *         <Typography variant="h3">Billing</Typography>
+ *       </CardContent>
+ *     </Link>
+ *   </CardActionArea>
+ * </Card>
+ *
+ * // Selectable card (filter / option pattern)
+ * <CardActionArea
+ *   selected={selected === 'monthly'}
+ *   onClick={() => setSelected('monthly')}
+ * >
+ *   <CardContent>Monthly plan</CardContent>
+ * </CardActionArea>
+ * ```
+ */ const CardActionArea = /*#__PURE__*/ forwardRef(function CardActionArea(props, ref) {
+    const { children, asChild, selected, access, visibleWhen, disabled, sx, className, onClick } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "asChild",
+        "selected",
+        "access",
+        "visibleWhen",
+        "disabled",
+        "sx",
+        "className",
+        "onClick"
+    ]);
+    // Bridge — both hooks called unconditionally (rules-of-hooks).
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    if (!isVisible || !accessState.visible) return null;
+    const isDisabled = Boolean(disabled) || accessState.disabled || accessState.readonly;
+    // The action area must SPAN the parent Card so the entire surface
+    // is clickable. Includes focus ring, hover, and a subtle pressed
+    // tint via `data-pressed`. Token-driven via dashforgePreset.
+    const classes = cn('block w-full text-left', 'outline-none rounded-[inherit]', 'transition-colors', // Hover — gentle bg tint on top of the card surface. Uses
+    // currentColor with 5% alpha so it composes with any Card
+    // variant/color without hardcoding.
+    'hover:bg-current/5', // Focus ring — keyboard-navigable, primary tone, inset slightly
+    // so it traces the card's inherited radius.
+    'focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1', // Selected — adds a primary tone ring + soft tint so the card
+    // visually reads as "active option" without changing the parent
+    // Card's variant.
+    selected && 'ring-2 ring-primary-500 ring-offset-1 bg-primary-50/60 dark:bg-primary-950/40', // Disabled — dims content and suppresses clicks.
+    isDisabled && 'opacity-50 cursor-not-allowed pointer-events-none', sx, className);
+    const handleClick = (e)=>{
+        if (isDisabled) return;
+        onClick == null ? void 0 : onClick(e);
+    };
+    if (asChild) {
+        return jsx(Slot, {
+            ref: ref,
+            className: classes,
+            "data-disabled": isDisabled || undefined,
+            "aria-disabled": isDisabled || undefined,
+            "aria-pressed": selected ? true : undefined,
+            onClick: handleClick,
+            children: children
+        });
+    }
+    return jsx("button", _extends({
+        ref: ref,
+        type: "button",
+        className: classes,
+        disabled: isDisabled,
+        "aria-pressed": selected ? true : undefined,
+        onClick: handleClick
+    }, rest, {
+        children: children
+    }));
+});
+CardActionArea.displayName = 'CardActionArea';
+
+/**
+ * Tailwind-variants recipe for `<Chip>` — promoted from the internal
+ * `Table/cells/RenderChip` (Sprint 4.4). The visual treatment is
+ * preserved byte-identical: the same 3 × 7 compound matrix
+ * (variant × color) emitted by RenderChip is now the single source
+ * of truth, consumed by both the public `<Chip>` and (via thin
+ * wrapper) the legacy `RenderChip` internal.
+ *
+ * Slots (only `root` slot used by the public Chip; sub-slots
+ * surfaced via separate inline classes in `Chip.tsx`):
+ *   - `root` — outer chip surface
+ *
+ * Variants axis (3 × 7, plus orthogonal `size`):
+ *   - `color`: 7 intents (`neutral / primary / secondary / success /
+ *     warning / danger / info`)
+ *   - `variant`: `soft` (default) / `solid` / `outline`
+ *   - `size`: `sm` (default) / `md`
+ *
+ * Token-driven: every Tailwind utility resolves through
+ * `dashforgePreset()` → CSS variables. No hardcoded hex.
+ *
+ * `dark:` variants on color palettes (lines 49-77 of legacy
+ * RenderChip, preserved here) are INTENTIONAL — color palettes do not
+ * auto-invert via the CSS-var swap (only the `neutral` palette does),
+ * so the `dark:` shift is a deliberate design choice (darker bg +
+ * lighter text in dark mode for visual cohesion). `dark:` on the
+ * `neutral` row is AVOIDED — that would double-invert.
+ */ const chipVariants = tv({
+    base: [
+        'inline-flex items-center gap-1 rounded-full font-medium',
+        'whitespace-nowrap',
+        // Smooth transitions for clickable / selected state changes.
+        'transition-colors',
+        'motion-reduce:transition-none'
+    ],
+    variants: {
+        color: {
+            neutral: '',
+            primary: '',
+            secondary: '',
+            success: '',
+            warning: '',
+            danger: '',
+            info: ''
+        },
+        variant: {
+            soft: '',
+            solid: '',
+            outline: ''
+        },
+        size: {
+            sm: 'h-5 px-2 text-xs',
+            md: 'h-6 px-2.5 text-xs'
+        },
+        /**
+         * Clickable state — adds focus ring + hover transition. Applied
+         * when the chip renders as `<button>` (i.e. `onClick` or
+         * explicit `clickable` is set).
+         */ clickable: {
+            true: [
+                'cursor-pointer select-none',
+                'outline-none focus-visible:ring-2 focus-visible:ring-offset-1'
+            ]
+        },
+        /**
+         * Selected state — used on filter chips to indicate active
+         * selection. Visually shifts the chip to a heavier emphasis
+         * (one step up the elevation ladder of its current variant).
+         * Compound rules below apply the actual shift per (variant, color)
+         * cell.
+         */ selected: {
+            true: 'ring-2 ring-offset-1'
+        },
+        /** Disabled state for clickable chips. */ disabled: {
+            true: 'opacity-50 cursor-not-allowed pointer-events-none'
+        }
+    },
+    compoundVariants: [
+        // ─── soft × color ──────────────────────────────────────────────
+        // Subtle bg + readable text. Neutral row uses NO `dark:` (auto-
+        // inverts via the dashforgePreset CSS-var swap). Color rows KEEP
+        // `dark:` (color palettes don't auto-invert).
+        {
+            variant: 'soft',
+            color: 'neutral',
+            class: 'bg-neutral-100 text-neutral-700'
+        },
+        {
+            variant: 'soft',
+            color: 'primary',
+            class: 'bg-primary-100 dark:bg-primary-950 text-primary-700 dark:text-primary-300'
+        },
+        {
+            variant: 'soft',
+            color: 'secondary',
+            class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300'
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: 'bg-success-100 dark:bg-success-950 text-success-700 dark:text-success-300'
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: 'bg-warning-100 dark:bg-warning-950 text-warning-700 dark:text-warning-300'
+        },
+        {
+            variant: 'soft',
+            color: 'danger',
+            class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300'
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300'
+        },
+        // ─── solid × color ─────────────────────────────────────────────
+        // Full bg + contrasting text. Solid neutral uses neutral-700/50
+        // (both on neutral palette → auto-invert together).
+        // `text-white` is deliberately NOT used: white does not auto-invert,
+        // which would flip the contrast in dark mode for the neutral row.
+        {
+            variant: 'solid',
+            color: 'neutral',
+            class: 'bg-neutral-700 text-neutral-50'
         },
-        /*
-         * Intent color. Only meaningful when variant is outlined / soft /
-         * solid (resolved via compoundVariants below). For plain / elevated
-         * this axis is ignored at the visual level — but kept in the type
-         * so the prop is always available without conditional typing.
-         */ color: {
-            primary: '',
-            secondary: '',
-            success: '',
-            warning: '',
-            danger: '',
-            info: '',
-            neutral: ''
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: 'bg-primary-500 text-white'
         },
-        /*
-         * Shadow scale — relevant for `variant='elevated'`. We keep elevation
-         * as a separate axis (not folded into `variant`) so consumers can
-         * dial it up/down without changing the variant. Default `0` = no
-         * shadow (consistent with MUI's elevation=0).
-         */ elevation: {
-            0: 'shadow-none',
-            1: 'shadow-sm',
-            2: 'shadow',
-            3: 'shadow-md',
-            4: 'shadow-lg',
-            5: 'shadow-xl'
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: 'bg-secondary-500 text-white'
         },
-        rounded: {
-            none: 'rounded-none',
-            sm: 'rounded-sm',
-            md: 'rounded-md',
-            lg: 'rounded-lg',
-            xl: 'rounded-xl',
-            '2xl': 'rounded-2xl',
-            full: 'rounded-full'
+        {
+            variant: 'solid',
+            color: 'success',
+            class: 'bg-success-500 text-white'
         },
-        /*
-         * Spacing — six axes (p/px/py/m/mx/my), 11 token steps each.
-         * Literals enumerated explicitly so Tailwind's JIT scanner finds
-         * every class. Token steps mirror @dashforge/tw-tokens spacing scale.
-         */ p: {
-            0: 'p-0',
-            '0.5': 'p-0.5',
-            1: 'p-1',
-            2: 'p-2',
-            3: 'p-3',
-            4: 'p-4',
-            6: 'p-6',
-            8: 'p-8',
-            12: 'p-12',
-            16: 'p-16',
-            24: 'p-24'
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: 'bg-warning-500 text-white'
         },
-        px: {
-            0: 'px-0',
-            '0.5': 'px-0.5',
-            1: 'px-1',
-            2: 'px-2',
-            3: 'px-3',
-            4: 'px-4',
-            6: 'px-6',
-            8: 'px-8',
-            12: 'px-12',
-            16: 'px-16',
-            24: 'px-24'
+        {
+            variant: 'solid',
+            color: 'danger',
+            class: 'bg-danger-500 text-white'
         },
-        py: {
-            0: 'py-0',
-            '0.5': 'py-0.5',
-            1: 'py-1',
-            2: 'py-2',
-            3: 'py-3',
-            4: 'py-4',
-            6: 'py-6',
-            8: 'py-8',
-            12: 'py-12',
-            16: 'py-16',
-            24: 'py-24'
+        {
+            variant: 'solid',
+            color: 'info',
+            class: 'bg-info-500 text-white'
         },
-        m: {
-            0: 'm-0',
-            '0.5': 'm-0.5',
-            1: 'm-1',
-            2: 'm-2',
-            3: 'm-3',
-            4: 'm-4',
-            6: 'm-6',
-            8: 'm-8',
-            12: 'm-12',
-            16: 'm-16',
-            24: 'm-24'
+        // ─── outline × color ───────────────────────────────────────────
+        // Border + colored text. Outline neutral: both auto-invert via
+        // CSS-var swap. Color rows: `dark:text-*-300` for legibility in
+        // dark mode on a transparent background.
+        {
+            variant: 'outline',
+            color: 'neutral',
+            class: 'border border-neutral-300 text-neutral-700'
         },
-        mx: {
-            0: 'mx-0',
-            '0.5': 'mx-0.5',
-            1: 'mx-1',
-            2: 'mx-2',
-            3: 'mx-3',
-            4: 'mx-4',
-            6: 'mx-6',
-            8: 'mx-8',
-            12: 'mx-12',
-            16: 'mx-16',
-            24: 'mx-24'
+        {
+            variant: 'outline',
+            color: 'primary',
+            class: 'border border-primary-500 text-primary-700 dark:text-primary-300'
         },
-        my: {
-            0: 'my-0',
-            '0.5': 'my-0.5',
-            1: 'my-1',
-            2: 'my-2',
-            3: 'my-3',
-            4: 'my-4',
-            6: 'my-6',
-            8: 'my-8',
-            12: 'my-12',
-            16: 'my-16',
-            24: 'my-24'
+        {
+            variant: 'outline',
+            color: 'secondary',
+            class: 'border border-secondary-500 text-secondary-700 dark:text-secondary-300'
         },
-        fullWidth: {
-            true: 'w-full'
+        {
+            variant: 'outline',
+            color: 'success',
+            class: 'border border-success-500 text-success-700 dark:text-success-300'
         },
-        fullHeight: {
-            true: 'h-full'
-        }
-    },
-    /*
-     * Compound variants — where surface × color get their actual visual.
-     * Twenty-one entries: 7 (outlined) + 7 (soft) + 7 (solid).
-     * `plain` and `elevated` don't appear here (no color contribution).
-     *
-     * Dark-mode pair is baked in: light-mode picks the 50-300 steps,
-     * dark-mode picks the 800-950 steps — both reactive to setMode()
-     * via the @dashforge/tw-theme CSS variables.
-     */ compoundVariants: [
-        // ─── outlined × color ─────────────────────────────────────────────
         {
-            variant: 'outlined',
+            variant: 'outline',
+            color: 'warning',
+            class: 'border border-warning-500 text-warning-700 dark:text-warning-300'
+        },
+        {
+            variant: 'outline',
+            color: 'danger',
+            class: 'border border-danger-500 text-danger-700 dark:text-danger-300'
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: 'border border-info-500 text-info-700 dark:text-info-300'
+        },
+        // ─── clickable × color hover (subtle bg shift) ─────────────────
+        // Hover state on clickable chips. Each (variant, color) hover
+        // emits a one-tier deeper bg tint, working across both modes via
+        // the same auto-invert logic as the base compound.
+        {
+            clickable: true,
+            variant: 'soft',
+            color: 'neutral',
+            class: 'hover:bg-neutral-200'
+        },
+        {
+            clickable: true,
+            variant: 'soft',
             color: 'primary',
-            class: 'border-primary-300 bg-primary-50/40 dark:border-primary-800 dark:bg-primary-950/30'
+            class: 'hover:bg-primary-200 dark:hover:bg-primary-900'
         },
         {
-            variant: 'outlined',
+            clickable: true,
+            variant: 'soft',
             color: 'secondary',
-            class: 'border-secondary-300 bg-secondary-50/40 dark:border-secondary-800 dark:bg-secondary-950/30'
+            class: 'hover:bg-secondary-200 dark:hover:bg-secondary-900'
         },
         {
-            variant: 'outlined',
+            clickable: true,
+            variant: 'soft',
             color: 'success',
-            class: 'border-success-300 bg-success-50/40 dark:border-success-800 dark:bg-success-950/30'
+            class: 'hover:bg-success-200 dark:hover:bg-success-900'
         },
         {
-            variant: 'outlined',
+            clickable: true,
+            variant: 'soft',
             color: 'warning',
-            class: 'border-warning-300 bg-warning-50/40 dark:border-warning-800 dark:bg-warning-950/30'
+            class: 'hover:bg-warning-200 dark:hover:bg-warning-900'
+        },
+        {
+            clickable: true,
+            variant: 'soft',
+            color: 'danger',
+            class: 'hover:bg-danger-200 dark:hover:bg-danger-900'
+        },
+        {
+            clickable: true,
+            variant: 'soft',
+            color: 'info',
+            class: 'hover:bg-info-200 dark:hover:bg-info-900'
+        },
+        // Solid hover → one tone darker
+        {
+            clickable: true,
+            variant: 'solid',
+            color: 'neutral',
+            class: 'hover:bg-neutral-800'
+        },
+        {
+            clickable: true,
+            variant: 'solid',
+            color: 'primary',
+            class: 'hover:bg-primary-600'
+        },
+        {
+            clickable: true,
+            variant: 'solid',
+            color: 'secondary',
+            class: 'hover:bg-secondary-600'
+        },
+        {
+            clickable: true,
+            variant: 'solid',
+            color: 'success',
+            class: 'hover:bg-success-600'
+        },
+        {
+            clickable: true,
+            variant: 'solid',
+            color: 'warning',
+            class: 'hover:bg-warning-600'
+        },
+        {
+            clickable: true,
+            variant: 'solid',
+            color: 'danger',
+            class: 'hover:bg-danger-600'
+        },
+        {
+            clickable: true,
+            variant: 'solid',
+            color: 'info',
+            class: 'hover:bg-info-600'
+        },
+        // Outline hover → tinted bg appears (transparent → light tint)
+        {
+            clickable: true,
+            variant: 'outline',
+            color: 'neutral',
+            class: 'hover:bg-neutral-100'
+        },
+        {
+            clickable: true,
+            variant: 'outline',
+            color: 'primary',
+            class: 'hover:bg-primary-50 dark:hover:bg-primary-950'
+        },
+        {
+            clickable: true,
+            variant: 'outline',
+            color: 'secondary',
+            class: 'hover:bg-secondary-50 dark:hover:bg-secondary-950'
+        },
+        {
+            clickable: true,
+            variant: 'outline',
+            color: 'success',
+            class: 'hover:bg-success-50 dark:hover:bg-success-950'
+        },
+        {
+            clickable: true,
+            variant: 'outline',
+            color: 'warning',
+            class: 'hover:bg-warning-50 dark:hover:bg-warning-950'
         },
         {
-            variant: 'outlined',
+            clickable: true,
+            variant: 'outline',
             color: 'danger',
-            class: 'border-danger-300 bg-danger-50/40 dark:border-danger-800 dark:bg-danger-950/30'
+            class: 'hover:bg-danger-50 dark:hover:bg-danger-950'
         },
         {
-            variant: 'outlined',
+            clickable: true,
+            variant: 'outline',
             color: 'info',
-            class: 'border-info-300 bg-info-50/40 dark:border-info-800 dark:bg-info-950/30'
+            class: 'hover:bg-info-50 dark:hover:bg-info-950'
         },
+        // ─── selected × color (focus ring tone) ────────────────────────
+        // When selected, the ring color matches the chip's intent.
         {
-            variant: 'outlined',
+            selected: true,
             color: 'neutral',
-            // border-neutral-200 auto-inverts via CSS var swap (no `dark:`
-            // needed). bg-white is hardcoded — `dark:bg-neutral-100` keeps
-            // elevation tier above page surface in dark mode (NOT
-            // `dark:bg-neutral-900` which renders near-white).
-            class: 'border-neutral-200 bg-white dark:bg-neutral-100'
+            class: 'ring-neutral-400'
         },
-        // ─── soft × color ─────────────────────────────────────────────────
         {
-            variant: 'soft',
+            selected: true,
             color: 'primary',
-            class: 'bg-primary-100 text-primary-900 dark:bg-primary-950/50 dark:text-primary-100'
+            class: 'ring-primary-500'
         },
         {
-            variant: 'soft',
+            selected: true,
             color: 'secondary',
-            class: 'bg-secondary-100 text-secondary-900 dark:bg-secondary-950/50 dark:text-secondary-100'
+            class: 'ring-secondary-500'
         },
         {
-            variant: 'soft',
+            selected: true,
             color: 'success',
-            class: 'bg-success-100 text-success-900 dark:bg-success-950/50 dark:text-success-100'
+            class: 'ring-success-500'
         },
         {
-            variant: 'soft',
+            selected: true,
             color: 'warning',
-            class: 'bg-warning-100 text-warning-900 dark:bg-warning-950/50 dark:text-warning-100'
+            class: 'ring-warning-500'
         },
         {
-            variant: 'soft',
+            selected: true,
             color: 'danger',
-            class: 'bg-danger-100 text-danger-900 dark:bg-danger-950/50 dark:text-danger-100'
+            class: 'ring-danger-500'
         },
         {
-            variant: 'soft',
+            selected: true,
             color: 'info',
-            class: 'bg-info-100 text-info-900 dark:bg-info-950/50 dark:text-info-100'
+            class: 'ring-info-500'
         },
+        // ─── clickable × color (focus ring tone) ───────────────────────
+        // Tab-focused ring tone matches the chip color (same intent as
+        // selected but only when keyboard-focused, via focus-visible).
         {
-            variant: 'soft',
+            clickable: true,
             color: 'neutral',
-            // Both neutral classes auto-invert via the dashforgePreset() CSS
-            // var swap — no `dark:` variants needed.
-            class: 'bg-neutral-100 text-neutral-900'
+            class: 'focus-visible:ring-neutral-400'
         },
-        // ─── solid × color ────────────────────────────────────────────────
         {
-            variant: 'solid',
+            clickable: true,
             color: 'primary',
-            class: 'bg-primary-600 text-white dark:bg-primary-500'
+            class: 'focus-visible:ring-primary-500'
         },
         {
-            variant: 'solid',
+            clickable: true,
             color: 'secondary',
-            class: 'bg-secondary-600 text-white dark:bg-secondary-500'
+            class: 'focus-visible:ring-secondary-500'
         },
         {
-            variant: 'solid',
+            clickable: true,
             color: 'success',
-            class: 'bg-success-600 text-white dark:bg-success-500'
+            class: 'focus-visible:ring-success-500'
         },
         {
-            variant: 'solid',
+            clickable: true,
             color: 'warning',
-            class: 'bg-warning-500 text-white dark:bg-warning-600'
+            class: 'focus-visible:ring-warning-500'
         },
         {
-            variant: 'solid',
+            clickable: true,
             color: 'danger',
-            class: 'bg-danger-600 text-white dark:bg-danger-500'
+            class: 'focus-visible:ring-danger-500'
         },
         {
-            variant: 'solid',
+            clickable: true,
             color: 'info',
-            class: 'bg-info-600 text-white dark:bg-info-500'
-        },
-        {
-            variant: 'solid',
-            color: 'neutral',
-            // Solid neutral is the high-emphasis "always-foreground accent"
-            // variant. Both classes auto-invert: dark surface + light text
-            // in light mode (`#171717` / `#fafafa`) flips to light surface +
-            // dark text in dark mode (`#f5f5f5` / `#0a0a0a`). The
-            // accent inverts WITH the page surface — consistent with the
-            // identity rule. Previously used `text-white` (no auto-invert)
-            // which forced double-inversion to keep readable.
-            class: 'bg-neutral-900 text-neutral-50'
+            class: 'focus-visible:ring-info-500'
         }
     ],
     defaultVariants: {
-        variant: 'plain',
         color: 'neutral',
-        elevation: 0,
-        rounded: 'none'
+        variant: 'soft',
+        size: 'sm'
+    }
+});
+
+/**
+ * Default delete-button glyph — inline stroke SVG. Inherits the
+ * chip's text colour via `currentColor`. No icon-library dep.
+ *
+ * @internal
+ */ function DefaultDeleteIcon() {
+    return jsx("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.75,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "m4 4 6 6M10 4l-6 6"
+        })
+    });
+}
+/**
+ * Dashforge TW Chip — status / filter / tag pill.
+ *
+ * Promoted from the internal `Table/cells/RenderChip` (Sprint 4.4):
+ * preserves the 3 × 7 variant × color matrix byte-identical and adds
+ * the public API (label, icon, avatar, clickable, onClick, onDelete,
+ * selected, access).
+ *
+ * **Rendering modes** (chosen at runtime from props):
+ *   - **Static** (default) → `<span>`. Pure display.
+ *   - **Clickable** (`clickable` true OR `onClick` provided) →
+ *     `<button type="button">` with focus ring + hover state.
+ *   - **Deletable** (`onDelete` provided) → root + trailing `<button>`
+ *     for the delete glyph. Static or clickable root depending on
+ *     whether `onClick` is also set.
+ *
+ * **Variant axis** is `soft | solid | outline` (Dashforge chip
+ * vocabulary, default `'soft'`). Distinct from Button's
+ * (`solid | outline | ghost | link`) and Alert's
+ * (`standard | filled | outlined`) by design — see CHANGELOG.
+ *
+ * **A11y**:
+ *   - Static chip → no role (it's a `<span>`).
+ *   - Clickable chip → native `<button>` semantics.
+ *   - `selected` → `aria-pressed="true"` (so it announces as a toggle
+ *     button in pressed state).
+ *   - Delete button → its own `<button>` with `aria-label`
+ *     (defaults to `'Remove'`).
+ *
+ * @example
+ * ```tsx
+ * // Static status chip
+ * <Chip label="Active" color="success" />
+ *
+ * // With icon
+ * import { CheckIcon } from 'lucide-react';
+ * <Chip label="Verified" color="success" icon={<CheckIcon size={14} />} />
+ *
+ * // Filter chip (clickable + toggle via selected)
+ * <Chip
+ *   label="Last 7 days"
+ *   color="primary"
+ *   clickable
+ *   selected={range === '7d'}
+ *   onClick={() => setRange('7d')}
+ * />
+ *
+ * // Removable tag
+ * <Chip
+ *   label="design-system"
+ *   color="info"
+ *   variant="outline"
+ *   onDelete={() => removeTag('design-system')}
+ * />
+ *
+ * // RBAC-gated admin chip
+ * <Chip
+ *   label="Admin"
+ *   color="danger"
+ *   variant="solid"
+ *   access={{ resource: 'role', action: 'read', onUnauthorized: 'hide' }}
+ * />
+ * ```
+ */ const Chip = /*#__PURE__*/ forwardRef(function Chip(props, ref) {
+    const { label, icon, avatar, variant, color, size, clickable: clickableProp, onClick, onDelete, deleteIcon, deleteLabel = 'Remove', selected, disabled: disabledProp, visibleWhen, access, sx, className } = props;
+    // Bridge — both hooks called unconditionally (rules-of-hooks).
+    // Inside a `<DashForm>`, `useEngineVisibility` subscribes to engine
+    // state and re-evaluates the predicate on changes; outside a form,
+    // the predicate is called with `null` engine (consumer captures
+    // external state in the closure).
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const accessState = useAccessState(access);
+    if (!isVisible || !accessState.visible) return null;
+    // Effective interactivity / disabled — mirrors Button semantics.
+    const isClickable = Boolean(clickableProp != null ? clickableProp : onClick);
+    const isDisabled = Boolean(disabledProp) || accessState.disabled || accessState.readonly;
+    const classes = cn(chipVariants({
+        color,
+        variant,
+        size,
+        clickable: isClickable || undefined,
+        selected: selected || undefined,
+        disabled: isDisabled || undefined
+    }), sx, className);
+    // ─── Inner content — leading slot + label + delete ────────────
+    // Avatar wins over icon when both provided (MUI parity).
+    // Label is rendered as a direct text node (no wrapping span) so
+    // the chip DOM stays minimal and consumers that target the root
+    // via `getByText(label)` continue working. The root's
+    // `inline-flex items-center` provides vertical alignment with
+    // any leading / trailing slots.
+    const leading = avatar != null ? avatar : icon;
+    const innerContent = jsxs(Fragment$1, {
+        children: [
+            leading != null && jsx("span", {
+                className: "-ml-0.5 inline-flex items-center shrink-0",
+                children: leading
+            }),
+            label,
+            onDelete != null && jsx("button", {
+                type: "button",
+                "aria-label": deleteLabel,
+                onClick: (e)=>{
+                    // Stop propagation so the chip's own onClick doesn't fire
+                    // when the user clicks the × — MUI matches this behaviour.
+                    e.stopPropagation();
+                    if (!isDisabled) onDelete(e);
+                },
+                disabled: isDisabled,
+                className: cn('ml-0.5 -mr-1 inline-flex items-center justify-center', 'h-4 w-4 rounded-full opacity-70 hover:opacity-100', 'outline-none focus-visible:ring-2 focus-visible:ring-current', 'transition-opacity'),
+                children: deleteIcon != null ? deleteIcon : jsx(DefaultDeleteIcon, {})
+            })
+        ]
+    });
+    // ─── Interactive root (clickable) ─────────────────────────────
+    if (isClickable) {
+        return jsx("button", {
+            ref: ref,
+            type: "button",
+            className: classes,
+            disabled: isDisabled,
+            "aria-pressed": selected ? true : undefined,
+            onClick: (e)=>{
+                if (isDisabled) return;
+                onClick == null ? void 0 : onClick(e);
+            },
+            onKeyDown: (e)=>{
+            },
+            children: innerContent
+        });
+    }
+    // ─── Static root (display only) ───────────────────────────────
+    return jsx("span", {
+        ref: ref,
+        className: classes,
+        "aria-disabled": isDisabled || undefined,
+        children: innerContent
+    });
+});
+
+/**
+ * `typographyVariants` — the full type scale for the @dashforge/tw library.
+ *
+ * Mirrors the MUI Typography variant set (h1–h6 · subtitle1/2 · body1/2 ·
+ * caption · overline) so the mental model carries over for developers
+ * moving between the two ecosystems. Each variant baseline maps to a
+ * Tailwind utility chain that resolves through the @dashforge/tw-tokens
+ * scale (so the visual stays in sync with the rest of the system when the
+ * token theme is patched).
+ *
+ * Variant axes are intentionally ORTHOGONAL — `variant` chooses the type
+ * scale, `weight` overrides the variant's default weight (useful for "h2
+ * but lighter"), `color` picks the intent, `align` picks the axis. They
+ * never collide, so consumers can mix them freely.
+ *
+ * Two boolean flags (`truncate`, `noWrap`) encode the most common one-line
+ * patterns; `gutterBottom` adds the conventional bottom margin used when a
+ * heading precedes a paragraph block (mirror of MUI's same flag).
+ */ const typographyVariants = tv({
+    base: 'text-inherit',
+    variants: {
+        /*
+         * `variant` is the type-scale axis.
+         *
+         * The default font-weight is baked into each variant (headings come
+         * with semibold/bold by default). Consumers override per-instance via
+         * the `weight` axis below — when set, `weight` wins because it's
+         * declared later in the cn() chain and tailwind-merge resolves the
+         * last `font-*` to win.
+         */ variant: {
+            h1: 'text-5xl font-bold leading-[1.05] tracking-[-0.025em]',
+            h2: 'text-4xl font-bold leading-[1.1] tracking-[-0.022em]',
+            h3: 'text-3xl font-semibold leading-[1.15] tracking-[-0.02em]',
+            h4: 'text-2xl font-semibold leading-snug tracking-[-0.015em]',
+            h5: 'text-xl font-semibold leading-snug',
+            h6: 'text-lg font-semibold leading-normal',
+            subtitle1: 'text-base font-medium leading-relaxed',
+            subtitle2: 'text-sm font-medium leading-relaxed',
+            body1: 'text-base font-normal leading-relaxed',
+            body2: 'text-sm font-normal leading-relaxed',
+            caption: 'text-xs font-normal leading-normal',
+            overline: 'text-xs font-semibold uppercase tracking-[0.12em] leading-normal'
+        },
+        /*
+         * `color` is the intent axis. Pairs with the @dashforge/tw-theme
+         * reactive colour vars so the choice survives theme patches and dark
+         * mode flips. `inherit` is the escape hatch — used inside a Box that
+         * has set its own color (e.g. `<Box variant="solid" color="primary">`
+         * paints white text).
+         */ color: {
+            // `inherit` is the explicit escape hatch — use it on a
+            // `<Typography>` inside a coloured surface (e.g.
+            // `<Box variant="solid" color="primary">` paints white text)
+            // so the text picks up the surface colour. It is NO LONGER the
+            // default: a bare `<Typography>` would otherwise inherit the
+            // consuming app's arbitrary root colour (often OS-`prefers-
+            // color-scheme` driven), which diverges from the Dashforge
+            // `data-dash-tw-theme` mode and breaks colour consistency in
+            // dark mode. The default is now `neutral` — see `defaultVariants`.
+            inherit: 'text-inherit',
+            primary: 'text-primary-700 dark:text-primary-400',
+            secondary: 'text-secondary-700 dark:text-secondary-400',
+            success: 'text-success-700 dark:text-success-400',
+            warning: 'text-warning-700 dark:text-warning-400',
+            danger: 'text-danger-700 dark:text-danger-400',
+            info: 'text-info-700 dark:text-info-400',
+            // Neutral palette auto-inverts via the dashforgePreset() CSS-var
+            // swap — no `dark:` variants. `text-neutral-900` resolves to
+            // dark text in light mode and light text in dark mode; same
+            // applies to `text-neutral-600` (muted).
+            neutral: 'text-neutral-900',
+            muted: 'text-neutral-600'
+        },
+        /*
+         * `weight` overrides the variant's default weight. When unset, the
+         * variant's own weight wins. When set, this axis appears LATER in the
+         * cn() chain so tailwind-merge resolves to this value.
+         */ weight: {
+            normal: 'font-normal',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold',
+            extrabold: 'font-extrabold'
+        },
+        align: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right',
+            justify: 'text-justify'
+        },
+        /*
+         * `truncate` collapses to a one-line ellipsis. `noWrap` is the looser
+         * sibling — keeps the text on one line but lets it overflow without
+         * the `…`. Mutually-exclusive intent-wise; if both are passed,
+         * `truncate` wins (later in the cn() chain).
+         */ truncate: {
+            true: 'truncate'
+        },
+        noWrap: {
+            true: 'whitespace-nowrap'
+        },
+        /*
+         * `gutterBottom` adds the conventional bottom margin used when a
+         * heading precedes a paragraph block. Mirror of MUI's same prop —
+         * familiar to developers crossing from the MUI side.
+         */ gutterBottom: {
+            true: 'mb-3'
+        }
+    },
+    defaultVariants: {
+        variant: 'body1',
+        // `neutral` (not `inherit`): a bare `<Typography>` emits
+        // `text-neutral-900`, which auto-inverts via the dashforgePreset()
+        // CSS-var swap and follows the Dashforge mode. Pass
+        // `color="inherit"` explicitly inside a coloured surface.
+        color: 'neutral',
+        align: 'left'
     }
 });
 
 /**
- * `<Box>` — the surface primitive of @dashforge/tw.
- *
- * What it IS:
- *   A polymorphic container with typed surface variants (plain /
- *   outlined / elevated / soft / solid) × 7 intent colours, plus
- *   spacing / sizing / rounded / elevation as enumerated token-scale
- *   props. Replaces MUI's Box + Paper + Card + Surface in one component.
- *
- * What it is NOT (deliberate, enforced by the prop set):
- *   • Not a flex container         → use <Stack>
- *   • Not a grid container         → use <Grid>
- *   • Not a paragraph              → use <Typography>
- *   • Not a button                 → use <Button>
+ * Default HTML tag per variant. Headings get their semantic level (h1→h1
+ * etc.); subtitle/body get `<p>` (block, paragraph semantics);
+ * caption/overline get `<span>` (inline, no implicit block break).
+ *
+ * Override per-instance via the `as` prop — useful when the semantic
+ * heading level should differ from the visual scale (e.g. a hero
+ * rendered as `<h2>` but visually styled `h1`).
+ */ const VARIANT_TO_TAG = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    subtitle1: 'p',
+    subtitle2: 'p',
+    body1: 'p',
+    body2: 'p',
+    caption: 'span',
+    overline: 'span'
+};
+/**
+ * `<Typography>` — semantic typed text, the foundation of every readable
+ * surface in @dashforge/tw.
  *
- * The "Box is not flex" rule is the spine of the layout layer. Without
- * it, every `<div>` in an app gravitates back to Box and the surface
- * vs layout distinction collapses. Box's job is the SURFACE around
- * content; Stack/Grid's job is the ARRANGEMENT of content. Two
- * primitives, two responsibilities.
+ * Why this exists:
+ *   Tailwind ships a typographic scale (`text-xl`, `font-bold`,
+ *   `leading-relaxed`) but leaves the SEMANTIC HTML tag and the
+ *   intent-coloured palette to the consumer. That's fine for one-off
+ *   marketing surfaces, but at app scale it means every `<h2>` and every
+ *   body paragraph re-derives its own utility chain — and they drift.
  *
- * When BOTH `as` and `asChild` are passed, `asChild` wins. Same rule
- * as Typography — documented to avoid the dimension-bloat of a
- * discriminated union over an 11-axis props type.
+ *   Typography moves that decision into a typed prop set: the visual
+ *   scale, the intent colour, the alignment, the truncation all live in
+ *   `tailwind-variants` and resolve to the same utility chain everywhere
+ *   in the app. The default HTML tag is inferred from `variant` so the
+ *   semantic layer follows the visual layer; `as` and `asChild` are the
+ *   two escape hatches when you need something else.
  *
  * Layering:
- *   • Sits BENEATH every visual chrome — every card, every panel,
- *     every section background.
- *   • Composes ON TOP of @dashforge/tw-tokens (color + spacing + radius
- *     + shadow scales) via the dashforgePreset CSS variables.
- *   • Pairs with Typography for text content, Stack/Grid for layout
- *     children inside it.
- */ const Box = /*#__PURE__*/ forwardRef(function Box(props, ref) {
-    const { variant, color, elevation, rounded, p, px, py, m, mx, my, fullWidth, fullHeight, as, asChild = false, sx, children } = props, rest = _object_without_properties_loose(props, [
+ *   • Sits BENEATH every component that renders text — `<Button>`'s
+ *     label, `<TextField>`'s helper text, MDX prose in our own docs.
+ *   • Composes ON TOP of `@dashforge/tw-tokens` colour scales (so
+ *     `color="primary"` paints `text-primary-700` in light, `-400` in dark,
+ *     reactive to `setMode()`).
+ *   • Polymorphic via Radix Slot — pairs cleanly with router `<Link>`,
+ *     `<button>`, or `<a>` without injecting an extra wrapper element.
+ *
+ * Polymorphism rules — `as` vs `asChild`:
+ *   • `as` swaps the rendered tag (we still render the element ourselves).
+ *   • `asChild` removes our element entirely — the single React child
+ *     becomes the rendered tag, with our className/ref merged onto it.
+ *     This is the Radix Slot pattern; use when you need a router Link
+ *     to style as a heading.
+ *   When BOTH are passed, `asChild` wins. We considered making this a
+ *   compile-time error via discriminated unions, but the API surface
+ *   already has 8 axes and adding one more dimension to the props type
+ *   would inflate IntelliSense suggestions for marginal benefit. The
+ *   runtime preference is documented; the test asserts it.
+ */ const Typography = /*#__PURE__*/ forwardRef(function Typography(props, ref) {
+    var _ref;
+    const { variant = 'body1', color, weight, align, truncate, noWrap, gutterBottom, as, asChild = false, sx, children } = props, rest = _object_without_properties_loose(props, [
         "variant",
         "color",
-        "elevation",
-        "rounded",
-        "p",
-        "px",
-        "py",
-        "m",
-        "mx",
-        "my",
-        "fullWidth",
-        "fullHeight",
+        "weight",
+        "align",
+        "truncate",
+        "noWrap",
+        "gutterBottom",
         "as",
         "asChild",
         "sx",
         "children"
     ]);
-    const classes = cn(boxVariants({
+    const classes = cn(typographyVariants({
         variant,
         color,
-        elevation,
-        rounded,
-        p,
-        px,
-        py,
-        m,
-        mx,
-        my,
-        fullWidth,
-        fullHeight
+        weight,
+        align,
+        truncate,
+        noWrap,
+        gutterBottom
     }), sx);
+    // asChild wins over `as` when both are passed (see component header).
     if (asChild) {
         return jsx(Slot, _extends({
             ref: ref,
@@ -7300,7 +9842,8 @@ Typography.displayName = 'Typography';
             children: children
         }));
     }
-    const Tag = as != null ? as : 'div';
+    // Resolve the rendered tag: explicit `as` > variant default > fallback.
+    const Tag = (_ref = as != null ? as : VARIANT_TO_TAG[variant]) != null ? _ref : 'span';
     return jsx(Tag, _extends({
         ref: ref,
         className: classes
@@ -7308,7 +9851,7 @@ Typography.displayName = 'Typography';
         children: children
     }));
 });
-Box.displayName = 'Box';
+Typography.displayName = 'Typography';
 
 /**
  * `stackVariants` — flex container 1D, the layout primitive of @dashforge/tw.
@@ -8996,7 +11539,7 @@ const accordionVariants = tv({
         // surface; the border gives the separation). `hover:bg-neutral-100`
         // is the one-tier elevation that works in both modes.
         summary: 'text-neutral-600',
-        list: 'inline-flex items-center gap-1',
+        list: 'inline-flex items-center gap-1 list-none pl-0 m-0',
         pageButton: [
             'inline-flex items-center justify-center rounded-md',
             'border border-neutral-300',
@@ -10775,178 +13318,14 @@ function SearchIcon$1(props) {
     });
 }
 
-/**
- * Internal mini-chip used by the cell renderer library. Not exported
- * from `@dashforge/tw` as a standalone component (per Sprint 4.1
- * scope decision — a standalone `<Chip>` may ship in Sprint 5 if
- * demand emerges).
- *
- * Variants:
- *  - `color`: 7 intents (neutral / primary / success / warning /
- *    danger / info / secondary)
- *  - `variant`: `soft` (default) / `solid` / `outline`
- *  - `size`: `sm` / `md`
- */ const chipVariants = tv({
-    base: [
-        'inline-flex items-center gap-1 rounded-full font-medium',
-        'whitespace-nowrap'
-    ],
-    variants: {
-        color: {
-            neutral: '',
-            primary: '',
-            success: '',
-            warning: '',
-            danger: '',
-            info: '',
-            secondary: ''
-        },
-        variant: {
-            soft: '',
-            solid: '',
-            outline: ''
-        },
-        size: {
-            sm: 'h-5 px-2 text-xs',
-            md: 'h-6 px-2.5 text-xs'
-        }
-    },
-    compoundVariants: [
-        // soft = subtle bg + dark text.
-        // Neutral row uses NO `dark:` variants — the dashforgePreset()
-        // CSS-var swap auto-inverts the neutral palette already.
-        // Color rows below KEEP `dark:` variants because color palettes
-        // don't auto-invert: the `dark:` shift is an intentional design
-        // choice (darker bg + lighter text in dark mode for visual cohesion).
-        {
-            variant: 'soft',
-            color: 'neutral',
-            class: 'bg-neutral-100 text-neutral-700'
-        },
-        {
-            variant: 'soft',
-            color: 'primary',
-            class: 'bg-primary-100 dark:bg-primary-950 text-primary-700 dark:text-primary-300'
-        },
-        {
-            variant: 'soft',
-            color: 'success',
-            class: 'bg-success-100 dark:bg-success-950 text-success-700 dark:text-success-300'
-        },
-        {
-            variant: 'soft',
-            color: 'warning',
-            class: 'bg-warning-100 dark:bg-warning-950 text-warning-700 dark:text-warning-300'
-        },
-        {
-            variant: 'soft',
-            color: 'danger',
-            class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300'
-        },
-        {
-            variant: 'soft',
-            color: 'info',
-            class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300'
-        },
-        {
-            variant: 'soft',
-            color: 'secondary',
-            class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300'
-        },
-        // solid = full bg + contrasting text.
-        // solid neutral: both `bg-neutral-700` and `text-neutral-50` sit
-        // on the neutral palette, so they auto-invert together via the
-        // CSS-var swap — bg/text contrast is preserved in BOTH modes.
-        // (`text-white` is deliberately NOT used here: white does not
-        // auto-invert, which would flip the contrast in dark mode.)
-        {
-            variant: 'solid',
-            color: 'neutral',
-            class: 'bg-neutral-700 text-neutral-50'
-        },
-        {
-            variant: 'solid',
-            color: 'primary',
-            class: 'bg-primary-500 text-white'
-        },
-        {
-            variant: 'solid',
-            color: 'success',
-            class: 'bg-success-500 text-white'
-        },
-        {
-            variant: 'solid',
-            color: 'warning',
-            class: 'bg-warning-500 text-white'
-        },
-        {
-            variant: 'solid',
-            color: 'danger',
-            class: 'bg-danger-500 text-white'
-        },
-        {
-            variant: 'solid',
-            color: 'info',
-            class: 'bg-info-500 text-white'
-        },
-        {
-            variant: 'solid',
-            color: 'secondary',
-            class: 'bg-secondary-500 text-white'
-        },
-        // outline = border + colored text
-        // outline neutral: both border + text auto-invert via CSS-var swap.
-        {
-            variant: 'outline',
-            color: 'neutral',
-            class: 'border border-neutral-300 text-neutral-700'
-        },
-        {
-            variant: 'outline',
-            color: 'primary',
-            class: 'border border-primary-500 text-primary-700 dark:text-primary-300'
-        },
-        {
-            variant: 'outline',
-            color: 'success',
-            class: 'border border-success-500 text-success-700 dark:text-success-300'
-        },
-        {
-            variant: 'outline',
-            color: 'warning',
-            class: 'border border-warning-500 text-warning-700 dark:text-warning-300'
-        },
-        {
-            variant: 'outline',
-            color: 'danger',
-            class: 'border border-danger-500 text-danger-700 dark:text-danger-300'
-        },
-        {
-            variant: 'outline',
-            color: 'info',
-            class: 'border border-info-500 text-info-700 dark:text-info-300'
-        },
-        {
-            variant: 'outline',
-            color: 'secondary',
-            class: 'border border-secondary-500 text-secondary-700 dark:text-secondary-300'
-        }
-    ],
-    defaultVariants: {
-        color: 'neutral',
-        variant: 'soft',
-        size: 'sm'
-    }
-});
 function RenderChip(props) {
     const { children, color, variant, size, className } = props;
-    return jsx("span", {
-        className: cn(chipVariants({
-            color,
-            variant,
-            size
-        }), className),
-        children: children
+    return jsx(Chip, {
+        label: children,
+        color: color,
+        variant: variant,
+        size: size,
+        className: className
     });
 }
 
@@ -10992,7 +13371,7 @@ function RenderChip(props) {
         side: "bottom",
         align: "end",
         content: jsx("ul", {
-            className: "flex flex-col gap-0.5 min-w-[140px]",
+            className: "flex flex-col gap-0.5 min-w-[140px] list-none pl-0 m-0",
             role: "menu",
             children: visibleActions.map((action, idx)=>jsx(RowActionMenuItem, {
                     action: action,
@@ -11812,7 +14191,7 @@ function ColumnVisibilityTrigger(props) {
                     ]
                 }),
                 jsx("ul", {
-                    className: "flex flex-col gap-0.5 max-h-72 overflow-auto",
+                    className: "flex flex-col gap-0.5 max-h-72 overflow-auto list-none pl-0 m-0",
                     children: hideableCols.map((col)=>{
                         const field = col.field;
                         const hidden = hiddenColumns.includes(field);
@@ -12904,6 +15283,6 @@ function SearchIcon(props) {
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '0.11.0-beta';
+ */ const VERSION = '1.1.1';
 
-export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Calendar, Checkbox, ConfirmDialogProvider, Container, DataGrid, DatePicker, DateRangePicker, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, Skeleton, SnackbarProvider, Stack, Switch, Table, Tabs, TextField, Textarea, TimePicker, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, calendarDayVariants, calendarVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, datePickerVariants, dateRangeDayVariants, dateRangePickerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, getNestedValue, gridVariants, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, timePickerVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };
+export { AVATAR_SOFT_FALLBACK, AVATAR_TONE_FALLBACK, Accordion, Alert, AlertTitle, AppShell, AspectRatio, Autocomplete, Avatar, AvatarGroup, Badge, Box, Breadcrumbs, Button, Calendar, Card, CardActionArea, CardContent, Checkbox, Chip, ConfirmDialogProvider, Container, DataGrid, DatePicker, DateRangePicker, DateTimePicker, Dialog, Divider, Grid, ICON_BUTTON_BASE, ICON_BUTTON_SIZE_OVERRIDES, IconButton, LeftNav, Menu, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuSkeleton, MenuTrigger, NumberField, OTPField, Pagination, Popover, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, SPINNER_COLORS, SPINNER_STROKE_WIDTH, SPINNER_TRACK_OPACITY, Skeleton, SnackbarProvider, Spinner, Stack, Switch, Table, Tabs, TextField, Textarea, TimePicker, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, alertVariants, appShellVariants, autocompleteVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbsVariants, buttonVariants, calendarDayVariants, calendarVariants, checkboxVariants, chipVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, datePickerVariants, dateRangeDayVariants, dateRangePickerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, getNestedValue, gridVariants, leftNavVariants, menuVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, spinnerVariants, stackVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, timePickerVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };