@trinityui/design-system 2.11.0 → 2.13.0

package/dist/foundation.js

@@ -0,0 +1,3704 @@
+import { jsxs as V, jsx as b } from "react/jsx-runtime";
+import * as g from "react";
+import Ve, { createContext as fr, useContext as ze, useMemo as pr, createElement as mr, useRef as br, useEffect as hr, forwardRef as yr } from "react";
+import { Link as xr, InputBase as Fr, IconButton as vr, Button as je, Alert as wr, Box as Sr } from "@mui/material";
+import { styled as G, alpha as Ue, decomposeColor as $e, hslToRgb as Cr } from "@mui/material/styles";
+import { u as Er, R as Ye, a as Ar, w as kr } from "./accessibility.js";
+import { u as Rr, a as zr } from "./hooks.js";
+import $r from "@mui/utils/useEnhancedEffect";
+import Hr from "@mui/utils/useForkRef";
+import { u as Or } from "./focus-on-replace.js";
+import Dr from "@mui/utils/useControlled";
+import K from "@mui/utils/useEventCallback";
+import Tr from "@mui/material/Unstable_TrapFocus";
+const Ir = /^#(?:([0-9a-f]{3,4})|([0-9a-f]{6})|([0-9a-f]{8}))$/i, Mr = /^rgba?\(\s*([^)]+)\)$/i, Br = /^hsla?\(\s*([^)]+)\)$/i;
+function Nr(e) {
+  const t = Ir.exec(e);
+  if (!t) return null;
+  let o = t[1] ?? t[2] ?? t[3];
+  return o.length <= 4 && (o = o.split("").map((n) => n + n).join("")), [0, 2, 4].map((n) => parseInt(o.slice(n, n + 2), 16));
+}
+function A(e, t) {
+  const o = Math.min(1, Math.max(0, t)), n = e.trim(), i = Nr(n);
+  if (i) return `rgba(${i.join(", ")}, ${o})`;
+  const s = Mr.exec(n);
+  if (s) {
+    const c = s[1].split(",").map((d) => d.trim());
+    if (c.length >= 3) return `rgba(${c.slice(0, 3).join(", ")}, ${o})`;
+  }
+  const a = Br.exec(n);
+  if (a) {
+    const c = a[1].split(",").map((d) => d.trim());
+    if (c.length >= 3) return `hsla(${c.slice(0, 3).join(", ")}, ${o})`;
+  }
+  return `color-mix(in srgb, ${n} ${Math.round(o * 1e3) / 10}%, transparent)`;
+}
+const r = {
+  // Color Primitives
+  colors: {
+    // Blues & Purples
+    navy: {
+      50: "#E8E8F0",
+      100: "#C5C6D9",
+      200: "#9FA1C0",
+      300: "#7879A7",
+      400: "#5B5C94",
+      500: "#3E3F81",
+      600: "#383979",
+      700: "#30316E",
+      800: "#282964",
+      900: "#050742"
+      // Primary Navy
+    },
+    purple: {
+      50: "#F3EAFA",
+      100: "#E1CBF2",
+      200: "#CDA8EA",
+      300: "#B985E1",
+      400: "#A96ADA",
+      500: "#9950D3",
+      600: "#8D49CE",
+      700: "#7841C9",
+      // Primary Purple
+      800: "#6939B5",
+      900: "#4E2A97"
+    },
+    indigo: {
+      50: "#EDE7FD",
+      100: "#D2C3FA",
+      200: "#B49CF6",
+      300: "#9574F2",
+      400: "#7E57F0",
+      500: "#6739ED",
+      600: "#5F33EB",
+      700: "#542CE8",
+      800: "#4A24E5",
+      900: "#3816A0",
+      // Deep Indigo
+      electric: "#6B12ED"
+      // Electric Indigo - vibrant accent
+    },
+    // Warm Colors
+    coral: {
+      50: "#FFEFEE",
+      100: "#FFD7D4",
+      200: "#FFBCB7",
+      300: "#FFA19A",
+      400: "#FF8D85",
+      500: "#FF796F",
+      600: "#FF7167",
+      700: "#FF665C",
+      800: "#FF6150",
+      // Primary Coral
+      900: "#FF5241"
+    },
+    // Cool Colors
+    azure: {
+      50: "#E5F5FC",
+      100: "#BEE5F7",
+      200: "#93D4F2",
+      300: "#67C3ED",
+      400: "#47B6E9",
+      500: "#27AAE1",
+      // Primary Azure
+      600: "#239DDD",
+      700: "#1D8DD8",
+      800: "#177ED3",
+      900: "#0E62CA"
+    },
+    // Neutrals
+    gray: {
+      0: "#FFFFFF",
+      50: "#FAFAFA",
+      100: "#F4F4F5",
+      200: "#E5E7EB",
+      300: "#D4D4D8",
+      400: "#9CA3AF",
+      500: "#6B7280",
+      600: "#374151",
+      700: "#27272A",
+      800: "#18181B",
+      900: "#09090B"
+    }
+  },
+  // Spacing Scale (in pixels, use for padding, margin, gaps)
+  spacing: {
+    0: 0,
+    0.5: 2,
+    // Half step for fine-grained control
+    1: 4,
+    1.5: 6,
+    // Half step for fine-grained control
+    2: 8,
+    2.5: 10,
+    // Half step for fine-grained control
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    12: 48,
+    14: 56,
+    16: 64,
+    20: 80,
+    24: 96,
+    32: 128
+  },
+  // Typography Scale
+  fontSize: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem",
+    // 36px
+    "5xl": "3rem",
+    // 48px
+    "6xl": "3.75rem"
+    // 60px
+  },
+  fontWeight: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800
+  },
+  lineHeight: {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2
+  },
+  letterSpacing: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em"
+  },
+  /**
+   * Border Radius Scale
+   * 
+   * Designed for consistent nesting using: Outer = Inner + Padding
+   * 
+   * Common nesting patterns:
+   * - Button (sm:6px) inside Card (md:8px) with 8px padding: 6 + 8 = 12 (use lg for container) 
+   * - Card (md:8px) inside Modal (lg:12px) with 16px padding: 8 + 16 = 24 (use 3xl for modal)
+   * - Input (sm:6px) inside Panel (md:8px) with 8px padding: 6 + 8 = 12 (use lg for panel)
+   * 
+   * Usage by element type:
+   * - xs (4px): Small badges, icon containers, status dots with corners
+   * - sm (6px): Buttons, inputs, chips, tags, small interactive elements
+   * - md (8px): Cards, list items, small panels, menu items
+   * - lg (12px): Large cards, dialogs, dropdown menus, panels
+   * - xl (16px): Modals, popovers, large containers
+   * - 2xl (20px): Very large modals with nested content
+   * - 3xl (24px): Maximum nesting scenarios
+   * - full (9999px): Pills, avatars, fully rounded elements
+   */
+  borderRadius: {
+    none: 0,
+    xs: 4,
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    "2xl": 20,
+    "3xl": 24,
+    full: 9999
+  },
+  // Border Width
+  borderWidth: {
+    0: 0,
+    1: 1,
+    2: 2,
+    4: 4,
+    8: 8
+  },
+  // Shadows
+  shadows: {
+    none: "none",
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
+  },
+  // Z-Index Scale
+  zIndex: {
+    auto: "auto",
+    0: 0,
+    10: 10,
+    20: 20,
+    30: 30,
+    40: 40,
+    50: 50,
+    dropdown: 1e3,
+    sticky: 1020,
+    fixed: 1030,
+    modalBackdrop: 1040,
+    modal: 1050,
+    popover: 1060,
+    tooltip: 1070
+  },
+  // Transitions
+  duration: {
+    fastest: "50ms",
+    faster: "100ms",
+    fast: "150ms",
+    normal: "200ms",
+    slow: "300ms",
+    slower: "400ms",
+    slowest: "500ms"
+  },
+  easing: {
+    linear: "linear",
+    in: "cubic-bezier(0.4, 0, 1, 1)",
+    out: "cubic-bezier(0, 0, 0.2, 1)",
+    inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+    smooth: "cubic-bezier(0.45, 0, 0.55, 1)",
+    // Smooth, natural feel
+    bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    // Slight overshoot
+    elastic: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
+    // Elastic spring
+    expoOut: "cubic-bezier(0.16, 1, 0.3, 1)"
+    // Fast start, soft settle (E-13)
+  },
+  // Opacity
+  opacity: {
+    0: 0,
+    5: 0.05,
+    10: 0.1,
+    20: 0.2,
+    25: 0.25,
+    30: 0.3,
+    40: 0.4,
+    50: 0.5,
+    60: 0.6,
+    70: 0.7,
+    75: 0.75,
+    80: 0.8,
+    90: 0.9,
+    95: 0.95,
+    100: 1
+  },
+  // Breakpoints
+  breakpoints: {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+  }
+}, L = "#DA1E28", T = "#15803D", se = "#0F62FE", Ge = [
+  r.colors.gray[0],
+  // on indigo[600], 6.64:1
+  r.colors.gray[0],
+  // on purple[600], 5.28:1
+  r.colors.gray[900],
+  // on coral[600], 7.39:1
+  r.colors.gray[900],
+  // on azure[600], 6.57:1
+  r.colors.gray[0],
+  // on navy[700], 11.73:1
+  r.colors.gray[0],
+  // on indigo[500], 6.20:1
+  r.colors.gray[0],
+  // on purple[500], 4.72:1
+  r.colors.gray[900]
+  // on coral[500], 7.78:1
+], Wr = "#E0E0E0", ae = "#008A7E", Lr = "#A66600", _r = "#C13E7C", Pr = "#2F8E0F", Vr = "#00859C", l = {
+  colors: {
+    // Brand
+    brand: {
+      primary: r.colors.navy[900],
+      secondary: r.colors.purple[700],
+      tertiary: r.colors.indigo[900],
+      accent: r.colors.coral[800]
+    },
+    // Text
+    text: {
+      primary: r.colors.gray[900],
+      secondary: r.colors.gray[500],
+      tertiary: r.colors.gray[400],
+      // gray[500] gives 4.83:1 on white (WCAG AA). Prior gray[300] was 1.9:1 and failed AA.
+      disabled: r.colors.gray[500],
+      inverse: r.colors.gray[0],
+      brand: r.colors.navy[900],
+      // Brand-color tokens updated to WCAG AA values per BRAND_COLOR_CONTRAST_PROPOSAL (Option A).
+      // link: azure[500] (#27AAE1, ~2.5:1) -> azure[900] (#0E62CA, ~5.9:1)
+      link: r.colors.azure[900],
+      linkHover: r.colors.azure[700],
+      error: L,
+      // success: #16A34A (3.3:1) -> #15803D (4.6:1)
+      success: T,
+      // warning: #D97706 (2.6:1) -> #B45309 (4.8:1)
+      warning: "#B45309"
+    },
+    // Backgrounds
+    background: {
+      primary: r.colors.gray[0],
+      secondary: r.colors.gray[50],
+      tertiary: r.colors.gray[100],
+      inverse: r.colors.gray[800],
+      brand: r.colors.navy[900],
+      brandSubtle: r.colors.navy[50],
+      accent: r.colors.coral[800],
+      accentSubtle: r.colors.coral[50]
+    },
+    // Surface colors for elevated/sunken elements
+    surface: {
+      elevated: r.colors.gray[0],
+      // Cards, modals, popovers
+      sunken: r.colors.gray[100],
+      // Inputs, code blocks, wells
+      // A neutral fill under an icon, such as a user avatar's fallback (ADR-03-R9, E-49+): MUI
+      // grey[300], the value UserAvatar uses today. @since 2.13.0
+      neutralFill: Wr,
+      overlay: "rgba(0, 0, 0, 0.5)",
+      // Modal/dialog backdrops
+      // Status surface colors (subtle backgrounds)
+      success: "#F0FDF4",
+      // Success state backgrounds
+      error: "#FEF2F2",
+      // Error state backgrounds
+      warning: "#FFFBEB",
+      // Warning state backgrounds
+      info: r.colors.azure[50]
+      // Info state backgrounds
+    },
+    // Borders. `strong` is the only WCAG 1.4.11-compliant tier (3:1 UI). `subtle` is decorative only.
+    border: {
+      default: r.colors.gray[300],
+      subtle: r.colors.gray[200],
+      strong: r.colors.gray[500],
+      focus: r.colors.purple[700],
+      error: L,
+      success: "#16A34A"
+    },
+    // Interactive States
+    interactive: {
+      default: r.colors.navy[900],
+      hover: r.colors.coral[800],
+      active: r.colors.indigo[900],
+      disabled: r.colors.gray[300],
+      focus: r.colors.purple[700]
+    },
+    // Focus ring styles (accessibility)
+    focus: {
+      ring: r.colors.navy[900],
+      // Focus outline color
+      ringOffset: r.colors.gray[0]
+      // Gap color between element and ring
+    },
+    // Selection styles
+    selection: {
+      background: r.colors.azure[100],
+      text: r.colors.gray[900]
+    },
+    // Status/Feedback - Used for alerts, toasts, form validation
+    status: {
+      error: {
+        text: L,
+        background: "#FEF2F2",
+        border: "#FECACA"
+      },
+      warning: {
+        // text updated to #B45309 for WCAG AA (was #D97706, 2.6:1)
+        text: "#B45309",
+        background: "#FFFBEB",
+        border: "#FDE68A"
+      },
+      success: {
+        // text updated to #15803D for WCAG AA (was #16A34A, 3.3:1)
+        text: T,
+        background: "#F0FDF4",
+        border: "#BBF7D0"
+      },
+      info: {
+        // text updated to azure[900] for WCAG AA (was azure[500], ~2.5:1)
+        text: r.colors.azure[900],
+        background: r.colors.azure[50],
+        border: r.colors.azure[200]
+      }
+    },
+    // Content on a solid fill of status.<x>.text (ADR-03-R7, C-OD-6 A): MUI's
+    // palette.<x>.contrastText. White is 5.00:1 on error, 5.02:1 on warning, 5.01:1 on
+    // success and 5.80:1 on info.
+    onStatus: {
+      error: r.colors.gray[0],
+      warning: r.colors.gray[0],
+      success: r.colors.gray[0],
+      info: r.colors.gray[0]
+    },
+    // Favorite (ADR-03-R10, E-03 section 9): the pinned/favorite star. A reference to
+    // status.warning.text (semanticRoleReferences): the CSS emits var(--trinity-status-warning-text)
+    // and an override of the status role reaches it. 5.02:1 on paper, 4.81:1 on default, 4.56:1
+    // on sunken (3:1 needed).
+    favorite: "#B45309",
+    /**
+     * Status Indicator Colors
+     * Semantic colors for StatusIndicator components (dots, badges, chips)
+     * These are intentionally distinct from status.* which are for alerts/toasts
+     * @intentional-color - Status indicators require specific colors for visual distinction
+     */
+    indicator: {
+      // High severity - Red/Critical
+      // The prior coral fill was 2.97:1 with white. The semantic error red is
+      // 4.83:1 both as a fill under white and as on-surface status text.
+      error: { fg: r.colors.gray[0], bg: L },
+      critical: { fg: "#FFFFFF", bg: "#DA1E28" },
+      failed: { fg: r.colors.gray[0], bg: L },
+      rejected: { fg: r.colors.gray[0], bg: L },
+      // Medium severity - Orange/Yellow  
+      warning: { fg: "#000000", bg: "#F1C21B", outline: "#8E6A00" },
+      caution: { fg: "#000000", bg: "#FF832B", outline: "#BA4E00" },
+      pending: { fg: "#000000", bg: "#F1C21B", outline: "#8E6A00" },
+      inProgress: { fg: "#FFFFFF", bg: r.colors.navy[900] },
+      running: { fg: "#FFFFFF", bg: r.colors.navy[900] },
+      // Low severity - Green/Success
+      // The prior green was 3.35:1 with white. Reuse the approved semantic
+      // success text color, which provides 5.02:1 in both directions.
+      success: { fg: r.colors.gray[0], bg: T },
+      complete: { fg: r.colors.gray[0], bg: T },
+      approved: { fg: r.colors.gray[0], bg: T },
+      active: { fg: r.colors.gray[0], bg: T },
+      enabled: { fg: r.colors.gray[0], bg: T },
+      // Informational - Blue
+      info: { fg: "#FFFFFF", bg: "#0043CE" },
+      new: { fg: "#FFFFFF", bg: "#0043CE" },
+      updated: { fg: "#FFFFFF", bg: "#0043CE" },
+      // Neutral - Gray
+      neutral: { fg: "#FFFFFF", bg: "#6F6F6F" },
+      draft: { fg: "#FFFFFF", bg: "#6F6F6F" },
+      inactive: { fg: "#FFFFFF", bg: "#6F6F6F" },
+      disabled: { fg: "#FFFFFF", bg: "#6F6F6F" },
+      cancelled: { fg: "#FFFFFF", bg: "#6F6F6F" },
+      unknown: { fg: "#FFFFFF", bg: "#6F6F6F" },
+      // Special
+      beta: { fg: "#FFFFFF", bg: "#8A3FFC" },
+      experimental: { fg: "#FFFFFF", bg: "#8A3FFC" }
+    },
+    chart: {
+      // Fixed order. A ninth series must use another encoding or an "Other"
+      // aggregate; consumers must not cycle categorical colors.
+      categorical: {
+        1: r.colors.purple[700],
+        2: r.colors.coral[900],
+        3: ae,
+        4: Lr,
+        5: r.colors.azure[900],
+        6: _r,
+        7: Pr,
+        8: Vr
+      },
+      sequential: {
+        1: r.colors.indigo[300],
+        2: r.colors.indigo[400],
+        3: r.colors.indigo[500],
+        4: r.colors.indigo[600],
+        5: r.colors.indigo[800],
+        6: r.colors.indigo[900]
+      },
+      diverging: {
+        negative: r.colors.coral[900],
+        neutral: r.colors.gray[500],
+        positive: ae
+      },
+      grid: r.colors.gray[200],
+      axis: r.colors.gray[400]
+    },
+    // AI roles (ADR-03-R15, Step 5 record section 13). primary, primaryFill,
+    // typingIndicator and accent are references (semanticRoleReferences): the
+    // CSS emits var(--trinity-brand-*). surface, border and badgeBackground
+    // derive from brand.secondary; resolveTrinityTokens recomputes them when
+    // brand.secondary is overridden. Values equal the legacy aiTokens colors.
+    ai: {
+      primary: r.colors.purple[700],
+      primaryFill: r.colors.purple[700],
+      onPrimaryFill: r.colors.gray[0],
+      accent: r.colors.coral[800],
+      surface: /* @__PURE__ */ A(r.colors.purple[700], 0.05),
+      surfaceHover: r.colors.indigo[50],
+      surfaceEmphasis: r.colors.indigo[50],
+      surfaceEmphasisHover: r.colors.indigo[100],
+      border: /* @__PURE__ */ A(r.colors.purple[700], 0.2),
+      badgeBackground: /* @__PURE__ */ A(r.colors.purple[700], 0.15),
+      typingIndicator: r.colors.purple[700],
+      focusRing: r.colors.indigo[50],
+      presence: {
+        blue: r.colors.azure[500],
+        violet: r.colors.indigo[500],
+        purple: r.colors.purple[700],
+        coral: r.colors.coral[800],
+        base: r.colors.navy[900]
+      },
+      // AIAvatar's brand gradient (owner decision 2026-10-08): coral 800 to purple 700, the
+      // legacy aiTokens.gradient.primary. Light references brand.accent and brand.secondary.
+      avatarFill: {
+        start: r.colors.coral[800],
+        end: r.colors.purple[700]
+      },
+      // AI progress (owner mockups 2026-10-08): the teal of the completed phase dots and the
+      // confidence bar. The validated chart teal: 4.25:1 on the paper, 3.95:1 on the AI surface.
+      progress: ae,
+      // AIChatWelcome's canvas wash (owner concepts 2026-10-08): white to faint lavender and
+      // pink toward the bottom right, through gradient.canvas.
+      canvasFill: {
+        start: r.colors.purple[50],
+        end: r.colors.coral[50]
+      }
+    },
+    // Avatar color palette - Used for avatar backgrounds and badges
+    avatar: {
+      /**
+       * Solid avatar fills. Not every entry carries white text: render the initials or icon in
+       * the aligned `foregrounds` entry (ADR-03-R9, E-49+). Measured with WCAG relative luminance,
+       * the same in light and dark mode:
+       *
+       * | # | Fill | White | gray[900] | Text |
+       * |---|---|---|---|---|
+       * | 0 | indigo[600] #5F33EB | 6.64:1 | 2.99:1 | white |
+       * | 1 | purple[600] #8D49CE | 5.28:1 | 3.76:1 | white |
+       * | 2 | coral[600] #FF7167 | 2.68:1 | 7.39:1 | gray[900] |
+       * | 3 | azure[600] #239DDD | 3.02:1 | 6.57:1 | gray[900] |
+       * | 4 | navy[700] #30316E | 11.73:1 | 1.69:1 | white |
+       * | 5 | indigo[500] #6739ED | 6.20:1 | 3.20:1 | white |
+       * | 6 | purple[500] #9950D3 | 4.72:1 | 4.20:1 | white |
+       * | 7 | coral[500] #FF796F | 2.55:1 | 7.78:1 | gray[900] |
+       *
+       * The values are unchanged (a token value change is major). A later value change for the
+       * three light fills is a v3.0 candidate.
+       */
+      backgrounds: [
+        r.colors.indigo[600],
+        // Deep indigo
+        r.colors.purple[600],
+        // Purple
+        r.colors.coral[600],
+        // Coral/red-orange
+        r.colors.azure[600],
+        // Azure/teal
+        r.colors.navy[700],
+        // Navy
+        r.colors.indigo[500],
+        // Medium indigo
+        r.colors.purple[500],
+        // Medium purple
+        r.colors.coral[500]
+        // Medium coral
+      ],
+      /**
+       * The text or icon colour for each `backgrounds` entry, index for index (ADR-03-R9): every
+       * pair is 4.72:1 or more. Pick a pair by one index, never a background alone.
+       *
+       * @since 2.13.0
+       */
+      foregrounds: Ge,
+      // Online/activity indicator
+      online: "#44b700",
+      offline: r.colors.gray[400],
+      busy: r.colors.coral[600],
+      away: "#FFA726"
+    },
+    // Gradient definitions - Reusable across components
+    gradients: {
+      // Brand gradients
+      primary: `linear-gradient(135deg, ${r.colors.indigo[600]} 0%, ${r.colors.purple[600]} 100%)`,
+      secondary: `linear-gradient(135deg, ${r.colors.coral[500]} 0%, ${r.colors.coral[700]} 100%)`,
+      accent: `linear-gradient(135deg, ${r.colors.azure[400]} 0%, ${r.colors.azure[600]} 100%)`,
+      // Avatar-specific gradients
+      avatarPrimary: `linear-gradient(135deg, ${r.colors.indigo[500]} 0%, ${r.colors.purple[600]} 100%)`,
+      avatarWarm: `linear-gradient(135deg, ${r.colors.coral[400]} 0%, ${r.colors.coral[600]} 100%)`,
+      avatarCool: `linear-gradient(135deg, ${r.colors.azure[400]} 0%, ${r.colors.indigo[500]} 100%)`,
+      // Dark overlay for text readability
+      darkOverlay: "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%)"
+    }
+  },
+  typography: {
+    // Display styles
+    display: {
+      large: {
+        fontSize: r.fontSize["5xl"],
+        fontWeight: r.fontWeight.bold,
+        lineHeight: r.lineHeight.tight,
+        letterSpacing: r.letterSpacing.tight
+      },
+      medium: {
+        fontSize: r.fontSize["4xl"],
+        fontWeight: r.fontWeight.bold,
+        lineHeight: r.lineHeight.tight,
+        letterSpacing: r.letterSpacing.tight
+      },
+      small: {
+        fontSize: r.fontSize["3xl"],
+        fontWeight: r.fontWeight.semibold,
+        lineHeight: r.lineHeight.snug,
+        letterSpacing: r.letterSpacing.normal
+      }
+    },
+    // Heading styles
+    heading: {
+      h1: {
+        fontSize: r.fontSize["3xl"],
+        fontWeight: r.fontWeight.bold,
+        lineHeight: r.lineHeight.tight
+      },
+      h2: {
+        fontSize: r.fontSize["2xl"],
+        fontWeight: r.fontWeight.semibold,
+        lineHeight: r.lineHeight.snug
+      },
+      h3: {
+        fontSize: r.fontSize.xl,
+        fontWeight: r.fontWeight.semibold,
+        lineHeight: r.lineHeight.snug
+      },
+      h4: {
+        fontSize: r.fontSize.lg,
+        fontWeight: r.fontWeight.semibold,
+        lineHeight: r.lineHeight.normal
+      },
+      h5: {
+        fontSize: r.fontSize.base,
+        fontWeight: r.fontWeight.semibold,
+        lineHeight: r.lineHeight.normal
+      },
+      h6: {
+        fontSize: r.fontSize.sm,
+        fontWeight: r.fontWeight.semibold,
+        lineHeight: r.lineHeight.normal
+      }
+    },
+    // Body styles
+    body: {
+      large: {
+        fontSize: r.fontSize.lg,
+        fontWeight: r.fontWeight.regular,
+        lineHeight: r.lineHeight.relaxed
+      },
+      medium: {
+        fontSize: r.fontSize.base,
+        fontWeight: r.fontWeight.regular,
+        lineHeight: r.lineHeight.normal
+      },
+      small: {
+        fontSize: r.fontSize.sm,
+        fontWeight: r.fontWeight.regular,
+        lineHeight: r.lineHeight.normal
+      }
+    },
+    // Label styles
+    label: {
+      large: {
+        fontSize: r.fontSize.base,
+        fontWeight: r.fontWeight.medium,
+        lineHeight: r.lineHeight.tight
+      },
+      medium: {
+        fontSize: r.fontSize.sm,
+        fontWeight: r.fontWeight.medium,
+        lineHeight: r.lineHeight.tight
+      },
+      small: {
+        fontSize: r.fontSize.xs,
+        fontWeight: r.fontWeight.medium,
+        lineHeight: r.lineHeight.tight
+      }
+    },
+    // === Micro Typography (Phase A Addition) ===
+    // For inline UI elements, badges, status indicators where xs is too large
+    micro: {
+      /** 10px - Absolute minimum for brief status text */
+      xs: {
+        fontSize: "0.625rem",
+        // 10px - smallest readable
+        fontWeight: r.fontWeight.medium,
+        lineHeight: r.lineHeight.tight,
+        letterSpacing: r.letterSpacing.wide
+        // Improve readability at small sizes
+      },
+      /** 11px - Primary micro size for badges, counters */
+      sm: {
+        fontSize: "0.6875rem",
+        // 11px
+        fontWeight: r.fontWeight.medium,
+        lineHeight: r.lineHeight.tight,
+        letterSpacing: r.letterSpacing.normal
+      }
+    },
+    // === Dense Typography (Phase D.1 Addition) ===
+    // Intent-based tokens for compact UI elements
+    dense: {
+      /** Badge counts, status dots - 10px */
+      badge: "0.625rem",
+      /** Metadata, timestamps, dense tables - 12px */
+      text: "0.75rem"
+    },
+    // === Data Typography (Phase A Addition) ===
+    // For tabular data, code snippets, and numeric displays
+    data: {
+      /** Monospace styling for numeric values in tables */
+      numeric: {
+        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace',
+        fontWeight: r.fontWeight.regular,
+        fontFeatureSettings: '"tnum" 1'
+        // Tabular numbers for alignment
+      },
+      /** Code/technical content styling */
+      code: {
+        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace',
+        fontSize: r.fontSize.sm,
+        fontWeight: r.fontWeight.regular,
+        lineHeight: r.lineHeight.relaxed
+      }
+    }
+  },
+  spacing: {
+    // Component-specific spacing
+    component: {
+      paddingXs: r.spacing[1],
+      paddingSm: r.spacing[2],
+      paddingMd: r.spacing[4],
+      paddingLg: r.spacing[6],
+      paddingXl: r.spacing[8],
+      gapXs: r.spacing[1],
+      gapSm: r.spacing[2],
+      gapMd: r.spacing[4],
+      gapLg: r.spacing[6]
+    },
+    // Layout spacing
+    layout: {
+      pagePadding: r.spacing[6],
+      sectionGap: r.spacing[12],
+      containerMaxWidth: 1280,
+      headerHeight: 64,
+      sidebarWidthExpanded: 200,
+      sidebarWidthCollapsed: 56,
+      aiPanelWidth: 420,
+      gutter: r.spacing[6],
+      // 24px
+      contentPadding: 64,
+      // E-19: container widths for container queries (JavaScript-only, no CSS variable)
+      containerQuery: {
+        narrow: 320,
+        compact: 360,
+        regular: 600
+      }
+    }
+  },
+  borders: {
+    /**
+     * Semantic border radius assignments
+     * Based on component size and nesting requirements:
+     * - Outer radius = Inner radius + Padding
+     */
+    radius: {
+      // === Component-specific tokens (backwards compatible) ===
+      /** Buttons use full pill shape */
+      button: r.borderRadius.full,
+      /** Inputs use sm (6px) for 32-40px height elements */
+      input: r.borderRadius.sm,
+      /** Cards use lg (12px) for visible rounding */
+      card: r.borderRadius.lg,
+      /** Modals use lg (12px) - allows nested cards with md */
+      modal: r.borderRadius.lg,
+      /** Large modals use xl (16px) for complex nested content */
+      modalLarge: r.borderRadius.xl,
+      /** Badges use sm (6px) for subtle pill */
+      badge: r.borderRadius.sm,
+      /** Avatars use full for circular shape */
+      avatar: r.borderRadius.full,
+      /** Chips/tags use sm (6px) */
+      chip: r.borderRadius.sm,
+      /** Menu items use sm (6px) */
+      menuItem: r.borderRadius.sm,
+      /** Dropdown/popover menus use lg (12px) - corrected to match actual usage */
+      menu: r.borderRadius.lg,
+      /** Tooltips use md (8px) */
+      tooltip: r.borderRadius.md,
+      /** Small icon containers use xs (4px) */
+      iconContainer: r.borderRadius.xs,
+      // === Intent-based shape vocabulary (Phase A Addition) ===
+      /** Sharp edges - 0px */
+      none: 0,
+      /** Minimal softening - 4px */
+      subtle: r.borderRadius.xs,
+      /** Noticeable curves - 6px */
+      soft: r.borderRadius.sm,
+      /** Prominent curves - 8px */
+      rounded: r.borderRadius.md,
+      /** Maximum curvature - 9999px */
+      pill: r.borderRadius.full,
+      /** Perfect circle - 50% */
+      circle: "50%",
+      // === Additional component contexts (Phase A Addition) ===
+      /** Skeleton loaders - 4px */
+      skeleton: r.borderRadius.xs,
+      /** Table cells - 0px for data density */
+      tableCell: 0
+    },
+    /**
+     * Pre-formatted px strings for MUI sx prop
+     * Use these when MUI would interpret numbers as spacing multipliers
+     */
+    radiusPx: {
+      none: "0px",
+      xs: `${r.borderRadius.xs}px`,
+      sm: `${r.borderRadius.sm}px`,
+      md: `${r.borderRadius.md}px`,
+      lg: `${r.borderRadius.lg}px`,
+      xl: `${r.borderRadius.xl}px`,
+      "2xl": `${r.borderRadius["2xl"]}px`,
+      "3xl": `${r.borderRadius["3xl"]}px`,
+      full: `${r.borderRadius.full}px`
+    },
+    width: {
+      default: r.borderWidth[1],
+      focus: r.borderWidth[2],
+      thick: r.borderWidth[4]
+    }
+  },
+  shadows: {
+    card: r.shadows.md,
+    dropdown: r.shadows.lg,
+    modal: r.shadows["2xl"],
+    button: r.shadows.sm,
+    input: r.shadows.none,
+    inputFocus: r.shadows.base
+  },
+  motion: {
+    duration: {
+      instant: r.duration.fastest,
+      fast: r.duration.fast,
+      normal: r.duration.normal,
+      slow: r.duration.slow,
+      slower: r.duration.slower
+    },
+    easing: {
+      default: r.easing.inOut,
+      enter: r.easing.out,
+      exit: r.easing.in,
+      emphasized: r.easing.expoOut,
+      overshoot: r.easing.bounce
+    },
+    // E-13: looping cycles and stagger delays (docs/TOKEN_USAGE_RULES.md, "Motion")
+    loop: {
+      spin: "800ms",
+      typing: "1200ms",
+      shimmer: "1500ms",
+      pulse: "2000ms"
+    },
+    stagger: {
+      tight: r.duration.fastest,
+      normal: r.duration.faster
+    }
+  },
+  // ============================================
+  // SEMANTIC EFFECTS (Phase A Addition)
+  // Intent-based opacity, shadow, and state effects
+  // ============================================
+  effects: {
+    /**
+     * Overlay effects for interaction states and backdrops
+     */
+    overlay: {
+      /** Modal/drawer backdrop - 50% black */
+      scrim: "rgba(0, 0, 0, 0.5)",
+      /** Standard hover - 8% black */
+      hover: "rgba(0, 0, 0, 0.08)",
+      /** Subtle hover for dense UI - 4% black */
+      hoverSubtle: "rgba(0, 0, 0, 0.04)",
+      /** Pressed/active - 12% black */
+      pressed: "rgba(0, 0, 0, 0.12)",
+      /** Selected row/item - 8% black */
+      selected: "rgba(0, 0, 0, 0.08)",
+      /** Disabled overlay - 38% black */
+      disabled: "rgba(0, 0, 0, 0.38)"
+    },
+    /**
+     * White text/icon opacity for dark backgrounds
+     * Based on Material Design text emphasis levels
+     */
+    onDark: {
+      /** High emphasis - 87% white */
+      primary: "rgba(255, 255, 255, 0.87)",
+      /** Medium emphasis - 70% white */
+      secondary: "rgba(255, 255, 255, 0.7)",
+      /** Low emphasis - 50% white */
+      tertiary: "rgba(255, 255, 255, 0.5)",
+      /** Borders/dividers - 12% white */
+      subtle: "rgba(255, 255, 255, 0.12)",
+      /** Background overlays on dark surfaces - 10% white */
+      tint: "rgba(255, 255, 255, 0.1)",
+      /** Visible dividers on dark backgrounds - 24% white */
+      divider: "rgba(255, 255, 255, 0.24)",
+      /** High-visibility text/icons on dark - 80% white */
+      emphasis: "rgba(255, 255, 255, 0.8)",
+      /** Maximum contrast - avoids pure white - 95% white */
+      contrast: "rgba(255, 255, 255, 0.95)",
+      /** Interactive hover background on dark surfaces - 15% white */
+      hover: "rgba(255, 255, 255, 0.15)",
+      /** Pressed/active button background on dark - 90% white */
+      strongEmphasis: "rgba(255, 255, 255, 0.9)"
+    },
+    /**
+     * Shadow effects for elevation hierarchy
+     * Replaces hardcoded rgba shadows
+     */
+    shadow: {
+      /** Resting card elevation */
+      surface: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+      /** Hovered/focused elevation */
+      raised: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+      /** Dropdown/popover/nav menus */
+      floating: "0 4px 20px rgba(0, 0, 0, 0.15)",
+      /** Modal dialogs */
+      dialog: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+      /** Pressed/inset appearance */
+      inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)"
+    },
+    /**
+     * Focus ring effects for accessibility
+     */
+    focus: {
+      /** Standard focus ring - purple brand */
+      ring: "0 0 0 3px rgba(120, 65, 201, 0.25)",
+      /** Focus on dark backgrounds */
+      ringOnDark: "0 0 0 3px rgba(255, 255, 255, 0.3)",
+      /** Emphasized focus for primary actions */
+      glow: "0 0 0 3px rgba(120, 65, 201, 0.4)"
+    },
+    /**
+     * State indicator effects (subtle fills and emphasis borders)
+     */
+    state: {
+      /** Error background - 5% red */
+      errorSubtle: "rgba(218, 30, 40, 0.05)",
+      /** Error border - 30% red */
+      errorEmphasis: "rgba(218, 30, 40, 0.3)",
+      /** Warning background - 10% yellow */
+      warningSubtle: "rgba(241, 194, 27, 0.1)",
+      /** Warning border - 40% yellow */
+      warningEmphasis: "rgba(241, 194, 27, 0.4)",
+      /** Success background - 5% green */
+      successSubtle: "rgba(36, 161, 72, 0.05)",
+      /** Success border - 30% green */
+      successEmphasis: "rgba(36, 161, 72, 0.3)",
+      /** Info background - 5% blue */
+      infoSubtle: "rgba(0, 67, 206, 0.05)",
+      /** Info border - 30% blue */
+      infoEmphasis: "rgba(0, 67, 206, 0.3)"
+    }
+  },
+  // ============================================
+  // ICON SIZE SCALE (Phase A Addition)
+  // Intent-based icon sizing
+  // ============================================
+  iconSize: {
+    /** Within text flow - 14px */
+    inline: 14,
+    /** Standard controls (buttons, inputs) - 16px */
+    control: 16,
+    /** Navigation and toolbar - 20px */
+    navigation: 20,
+    /** Visual anchor (empty states) - 24px */
+    prominent: 24,
+    /** Hero sections - 28px */
+    hero: 28,
+    /** Maximum impact - 36px */
+    display: 36
+  },
+  // ============================================
+  // INTENT-BASED SPACING (Phase A Addition)
+  // ============================================
+  inline: {
+    /** Minimum internal space - 4px */
+    tight: r.spacing[1],
+    /** Dense but readable - 8px */
+    compact: r.spacing[2],
+    /** Balanced density - 12px */
+    snug: r.spacing[3],
+    /** Standard breathing room - 16px */
+    comfortable: r.spacing[4],
+    /** Generous without excess - 20px */
+    relaxed: r.spacing[5],
+    /** Maximum breathing room - 24px */
+    spacious: r.spacing[6]
+  },
+  stack: {
+    /** Minimum vertical space - 4px */
+    tight: r.spacing[1],
+    /** Dense but readable - 8px */
+    compact: r.spacing[2],
+    /** Balanced density - 12px */
+    snug: r.spacing[3],
+    /** Standard vertical space - 16px */
+    comfortable: r.spacing[4],
+    /** Generous without excess - 20px */
+    relaxed: r.spacing[5],
+    /** Maximum vertical space - 24px */
+    spacious: r.spacing[6],
+    // Legacy aliases for backwards compatibility
+    /** @deprecated Use tight instead */
+    related: r.spacing[1],
+    /** @deprecated Use compact instead */
+    grouped: r.spacing[2],
+    /** @deprecated Use comfortable instead */
+    separated: r.spacing[4],
+    /** @deprecated Use spacious instead */
+    distinct: r.spacing[8]
+  },
+  density: {
+    /** Maximum info density */
+    compact: {
+      rowHeight: 36,
+      cellPadding: 6,
+      gap: 4
+    },
+    /** Balanced readability/density */
+    standard: {
+      rowHeight: 48,
+      cellPadding: 12,
+      gap: 8
+    },
+    /** Prioritize readability */
+    comfortable: {
+      rowHeight: 64,
+      cellPadding: 16,
+      gap: 12
+    }
+  }
+}, j = {
+  primary: {
+    main: r.colors.navy[900],
+    // #050742 - Deep Navy
+    light: r.colors.purple[700],
+    // #7841C9 - Light Violet/Purple
+    dark: r.colors.indigo[900]
+    // #3816A0 - Deep Indigo
+  },
+  secondary: {
+    main: r.colors.coral[800],
+    // #FF6150 - Coral
+    light: r.colors.azure[500],
+    // #27AAE1 - Azure
+    dark: r.colors.indigo.electric
+    // #6B12ED - Electric Indigo
+  },
+  neutral: {
+    white: r.colors.gray[0],
+    // #FFFFFF
+    lightGray: r.colors.gray[50],
+    // #FAFAFA - alias: gray50
+    gray50: r.colors.gray[50],
+    // #FAFAFA
+    gray100: r.colors.gray[200],
+    // #E5E7EB - NOTE: Misnamed, actually gray200
+    gray200: r.colors.gray[200],
+    // #E5E7EB
+    gray300: r.colors.gray[300],
+    // #D4D4D8
+    gray400: r.colors.gray[400],
+    // #9CA3AF
+    gray500: r.colors.gray[500],
+    // #6B7280
+    gray600: r.colors.gray[600],
+    // #374151
+    gray700: r.colors.gray[700],
+    // #27272A
+    gray800: r.colors.gray[800],
+    // #18181B
+    gray900: r.colors.gray[900],
+    // #09090B
+    /**
+     * @deprecated Not the dark theme's page colour. Use `theme.palette.background.default`
+     * (or `palette.trinity.surface`). Removed in v3.0.
+     */
+    darkBg: r.colors.gray[800],
+    // #18181B - alias
+    /**
+     * @deprecated Not the dark theme's paper colour. Use `theme.palette.background.paper`
+     * (or `palette.trinity.surface.elevated`). Removed in v3.0.
+     */
+    darkPaper: r.colors.gray[700]
+    // #27272A - alias
+  }
+}, jr = {
+  button: {
+    // Sizing
+    height: {
+      small: 32,
+      medium: 40,
+      large: 48
+    },
+    padding: {
+      small: { x: 16, y: 8 },
+      medium: { x: 20, y: 10 },
+      large: { x: 24, y: 12 }
+    },
+    fontSize: {
+      small: r.fontSize.sm,
+      medium: r.fontSize.base,
+      large: r.fontSize.lg
+    },
+    borderRadius: r.borderRadius.full,
+    // Colors by variant. Each interactive state owns both sides of its pair;
+    // hover and active can match simultaneously in CSS.
+    primary: {
+      background: l.colors.brand.primary,
+      backgroundHover: l.colors.brand.accent,
+      backgroundActive: r.colors.navy[800],
+      text: l.colors.text.inverse,
+      textHover: l.colors.brand.primary,
+      textActive: l.colors.text.inverse
+    },
+    secondary: {
+      background: l.colors.brand.tertiary,
+      backgroundHover: l.colors.brand.accent,
+      backgroundActive: r.colors.indigo[700],
+      text: l.colors.text.inverse,
+      textHover: l.colors.brand.primary,
+      textActive: l.colors.text.inverse
+    },
+    outlined: {
+      background: "transparent",
+      backgroundHover: l.colors.brand.accent,
+      backgroundActive: r.colors.navy[800],
+      border: l.colors.brand.primary,
+      text: l.colors.brand.primary,
+      textHover: l.colors.brand.primary,
+      textActive: l.colors.text.inverse
+    },
+    // On-brand buttons, for navy brand surfaces (bg-brand, nav header and sidebar), where the
+    // navy primary button disappears (owner decision 2026-10-10). The navy chrome stays navy in
+    // dark mode, so these have no dark values. Ratios on navy 900 (#050742): rest 18.83:1,
+    // hover 6.34:1, pressed 11.16:1, disabled label 4.68:1 (filled) and 5.12:1 (outlined), focus
+    // outline 18.83:1. The pressed fill is navy 100, the darker shade of the white fill, as the
+    // primary family presses to navy 800.
+    onBrand: {
+      background: r.colors.gray[0],
+      backgroundHover: l.colors.brand.accent,
+      backgroundActive: r.colors.navy[100],
+      text: l.colors.brand.primary,
+      textHover: l.colors.brand.primary,
+      textActive: l.colors.brand.primary,
+      backgroundDisabled: l.effects.onDark.subtle,
+      textDisabled: l.effects.onDark.tertiary,
+      focusOutline: r.colors.gray[0]
+    },
+    onBrandOutlined: {
+      background: "transparent",
+      backgroundHover: l.colors.brand.accent,
+      backgroundActive: r.colors.navy[100],
+      border: r.colors.gray[0],
+      borderHover: l.colors.brand.accent,
+      borderActive: r.colors.navy[100],
+      text: r.colors.gray[0],
+      textHover: l.colors.brand.primary,
+      textActive: l.colors.brand.primary,
+      backgroundDisabled: "transparent",
+      textDisabled: l.effects.onDark.tertiary,
+      borderDisabled: l.effects.onDark.divider,
+      focusOutline: r.colors.gray[0]
+    }
+  },
+  input: {
+    height: {
+      small: 36,
+      medium: 44,
+      large: 52
+    },
+    padding: {
+      small: { x: 12, y: 8 },
+      medium: { x: 14, y: 10 },
+      large: { x: 16, y: 12 }
+    },
+    fontSize: {
+      small: r.fontSize.sm,
+      medium: r.fontSize.base,
+      large: r.fontSize.lg
+    },
+    borderRadius: r.borderRadius.sm,
+    // 6px for 36-52px height inputs
+    borderColor: {
+      default: l.colors.border.default,
+      hover: l.colors.border.strong,
+      focus: l.colors.border.focus,
+      error: l.colors.border.error
+    },
+    background: {
+      default: l.colors.surface.elevated,
+      disabled: l.colors.background.tertiary
+    }
+  },
+  card: {
+    padding: {
+      small: r.spacing[4],
+      medium: r.spacing[6],
+      large: r.spacing[8]
+    },
+    borderRadius: r.borderRadius.lg,
+    // 12px for cards - inner elements use sm:6px or md:8px
+    shadow: l.shadows.card,
+    background: l.colors.surface.elevated,
+    border: l.colors.border.subtle
+  },
+  avatar: {
+    size: {
+      xs: 24,
+      sm: 32,
+      md: 40,
+      lg: 48,
+      xl: 64,
+      "2xl": 96
+    },
+    borderRadius: r.borderRadius.full,
+    fontSize: {
+      xs: r.fontSize.xs,
+      sm: r.fontSize.xs,
+      md: r.fontSize.sm,
+      lg: r.fontSize.base,
+      xl: r.fontSize.xl,
+      "2xl": r.fontSize["2xl"]
+    }
+  },
+  badge: {
+    padding: { x: 8, y: 2 },
+    borderRadius: r.borderRadius.full,
+    fontSize: r.fontSize.xs,
+    fontWeight: r.fontWeight.medium
+  },
+  chip: {
+    height: {
+      small: 24,
+      medium: 32
+    },
+    padding: {
+      small: { x: 8, y: 4 },
+      medium: { x: 12, y: 6 }
+    },
+    borderRadius: r.borderRadius.sm,
+    // 6px for 24-32px height chips
+    fontSize: {
+      small: r.fontSize.xs,
+      medium: r.fontSize.sm
+    }
+  },
+  tooltip: {
+    padding: { x: 12, y: 8 },
+    borderRadius: r.borderRadius.sm,
+    // 6px for small tooltip elements
+    fontSize: r.fontSize.sm,
+    background: l.colors.background.inverse,
+    text: l.colors.text.inverse
+  },
+  modal: {
+    padding: r.spacing[6],
+    borderRadius: r.borderRadius.xl,
+    // 16px - allows nested cards with lg:12px
+    shadow: l.shadows.modal,
+    background: l.colors.surface.elevated,
+    backdropOpacity: r.opacity[50],
+    width: {
+      small: 400,
+      medium: 560,
+      large: 720,
+      fullWidth: "90vw"
+    }
+  },
+  switch: {
+    width: {
+      small: 36,
+      medium: 48
+    },
+    height: {
+      small: 20,
+      medium: 28
+    },
+    thumb: {
+      small: 16,
+      medium: 24
+    },
+    track: {
+      off: r.colors.gray[200],
+      on: l.colors.brand.primary,
+      border: r.colors.gray[300]
+    }
+  },
+  navigation: {
+    header: {
+      height: 64,
+      background: l.colors.brand.primary,
+      text: l.colors.text.inverse
+    },
+    sidebar: {
+      width: 240,
+      collapsedWidth: 64,
+      background: l.colors.brand.primary
+    },
+    item: {
+      height: 44,
+      padding: { x: 16, y: 12 },
+      borderRadius: r.borderRadius.md
+      // 8px for 44px height nav items
+    },
+    footer: {
+      height: 40,
+      padding: { x: 24, y: 8 },
+      light: {
+        background: l.colors.background.tertiary,
+        text: l.colors.text.secondary,
+        divider: l.colors.border.default,
+        linkHover: l.colors.brand.secondary
+      },
+      dark: {
+        background: l.colors.background.brand,
+        text: l.effects.onDark.secondary,
+        divider: l.effects.onDark.divider,
+        linkHover: l.effects.onDark.contrast
+      }
+    }
+  }
+}, Ze = {
+  /** Most important actions/content - demands immediate attention */
+  primary: {
+    prominence: 5,
+    usage: ["Primary CTAs", "Critical alerts", "Page titles", "Current navigation"],
+    minContrast: 7
+    // WCAG AAA for normal text
+  },
+  /** Important but not critical - strong visual presence */
+  secondary: {
+    prominence: 4,
+    usage: ["Secondary buttons", "Section headings", "Key information", "Active states"],
+    minContrast: 4.5
+    // WCAG AA for normal text
+  },
+  /** Supportive content - visible but not competing */
+  tertiary: {
+    prominence: 3,
+    usage: ["Body text", "Form labels", "Navigation items", "Card content"],
+    minContrast: 4.5
+    // WCAG AA
+  },
+  /** Background/supporting information */
+  muted: {
+    prominence: 2,
+    usage: ["Helper text", "Timestamps", "Metadata", "Placeholders"],
+    minContrast: 3
+    // Acceptable for large text
+  },
+  /** Non-interactive or unavailable */
+  disabled: {
+    prominence: 1,
+    usage: ["Disabled controls", "Inactive states", "Read-only fields"],
+    minContrast: 2.5
+    // Minimum perceivable
+  }
+}, ve = {
+  // Display - Hero content, marketing headlines
+  display: {
+    level: 1,
+    scale: {
+      large: { size: "3rem", weight: 700, lineHeight: 1.1, tracking: "-0.02em" },
+      medium: { size: "2.25rem", weight: 700, lineHeight: 1.15, tracking: "-0.01em" },
+      small: { size: "1.875rem", weight: 600, lineHeight: 1.2, tracking: "0" }
+    }
+  },
+  // Headings - Page and section structure
+  heading: {
+    level: 2,
+    scale: {
+      h1: { size: "1.875rem", weight: 700, lineHeight: 1.25 },
+      h2: { size: "1.5rem", weight: 600, lineHeight: 1.3 },
+      h3: { size: "1.25rem", weight: 600, lineHeight: 1.35 },
+      h4: { size: "1.125rem", weight: 600, lineHeight: 1.4 },
+      h5: { size: "1rem", weight: 600, lineHeight: 1.45 },
+      h6: { size: "0.875rem", weight: 600, lineHeight: 1.5 }
+    }
+  },
+  // Body - Main content
+  body: {
+    level: 3,
+    scale: {
+      large: { size: "1.125rem", weight: 400, lineHeight: 1.6 },
+      medium: { size: "1rem", weight: 400, lineHeight: 1.5 },
+      small: { size: "0.875rem", weight: 400, lineHeight: 1.5 }
+    }
+  },
+  // Labels - Form and UI labels
+  label: {
+    level: 4,
+    scale: {
+      large: { size: "1rem", weight: 500, lineHeight: 1.25 },
+      medium: { size: "0.875rem", weight: 500, lineHeight: 1.25 },
+      small: { size: "0.75rem", weight: 500, lineHeight: 1.25 }
+    }
+  },
+  // Caption - Supporting/metadata
+  caption: {
+    level: 5,
+    scale: {
+      default: { size: "0.75rem", weight: 400, lineHeight: 1.4 },
+      emphasis: { size: "0.75rem", weight: 500, lineHeight: 1.4 }
+    }
+  },
+  // Overline - Category/type indicators
+  overline: {
+    level: 6,
+    scale: {
+      default: { size: "0.625rem", weight: 600, lineHeight: 1.5, tracking: "0.1em", transform: "uppercase" }
+    }
+  }
+}, ne = {
+  /** Ground level - page background, sunken areas */
+  ground: {
+    level: 0,
+    zIndex: 0,
+    shadow: "none",
+    description: "Page backgrounds, wells, sunken inputs"
+  },
+  /** Resting - default content surfaces */
+  resting: {
+    level: 1,
+    zIndex: 1,
+    shadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    description: "Cards, panels at rest"
+  },
+  /** Raised - interactive/hover states */
+  raised: {
+    level: 2,
+    zIndex: 10,
+    shadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    description: "Hovered cards, active buttons"
+  },
+  /** Floating - dropdowns, menus */
+  floating: {
+    level: 3,
+    zIndex: 1e3,
+    shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    description: "Dropdown menus, popovers"
+  },
+  /** Sticky - headers, navigation */
+  sticky: {
+    level: 4,
+    zIndex: 1020,
+    shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    description: "Sticky headers, fixed navigation"
+  },
+  /** Overlay - backdrop for modals */
+  overlay: {
+    level: 5,
+    zIndex: 1040,
+    shadow: "none",
+    description: "Modal/dialog backdrops"
+  },
+  /** Dialog - modals, alerts */
+  dialog: {
+    level: 6,
+    zIndex: 1050,
+    shadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    description: "Modal dialogs, alerts"
+  },
+  /** Popover - tooltips, notifications */
+  popover: {
+    level: 7,
+    zIndex: 1060,
+    shadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    description: "Popovers, floating panels"
+  },
+  /** Tooltip - highest priority overlays */
+  tooltip: {
+    level: 8,
+    zIndex: 1070,
+    shadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    description: "Tooltips, critical notifications"
+  }
+}, q = {
+  /** Scale ratio for size progression */
+  ratio: 1.25,
+  // Major third
+  /** Size scale multipliers */
+  sizes: {
+    "3xs": 0.512,
+    // ratio^-3
+    "2xs": 0.64,
+    // ratio^-2
+    xs: 0.8,
+    // ratio^-1
+    sm: 1,
+    // base
+    md: 1.25,
+    // ratio^1
+    lg: 1.563,
+    // ratio^2
+    xl: 1.953,
+    // ratio^3
+    "2xl": 2.441,
+    // ratio^4
+    "3xl": 3.052
+    // ratio^5
+  },
+  /** Icon sizes following the scale */
+  icons: {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+    "2xl": 40
+  },
+  /** Touch target minimums (accessibility) */
+  touchTargets: {
+    minimum: 44,
+    // WCAG 2.2 SC 2.5.5 Target Size (Enhanced, AAA)
+    comfortable: 48,
+    spacious: 56,
+    /**
+     * The program-wide floor for every pointer target: 24 by 24 CSS pixels, WCAG 2.2 SC 2.5.8
+     * Target Size (Minimum, AA), ratified by DN-12 (2026-10-05). Compact controls reach it
+     * through the shared hit-area recipe (C-40+), which grows the hit area to this size
+     * without changing the visual size. CSS: `--trinity-touch-target-floor`.
+     */
+    floor: 24
+  }
+}, Ke = {
+  /** High contrast - primary actions, critical info */
+  high: {
+    foreground: r.colors.navy[900],
+    background: r.colors.gray[0],
+    ratio: 12.5
+    // Well above AAA
+  },
+  /** Medium contrast - body content */
+  medium: {
+    foreground: r.colors.gray[700],
+    background: r.colors.gray[0],
+    ratio: 7.5
+    // Above AAA
+  },
+  /** Low contrast - secondary/muted content */
+  low: {
+    foreground: r.colors.gray[500],
+    background: r.colors.gray[0],
+    ratio: 4.5
+    // AA compliant
+  },
+  /** Subtle - disabled/decorative */
+  subtle: {
+    foreground: r.colors.gray[400],
+    background: r.colors.gray[0],
+    ratio: 3
+    // Minimum perceivable
+  }
+}, Xe = {
+  /** Default resting state */
+  default: {
+    opacity: 1,
+    transform: "none",
+    transition: "all 150ms ease-out"
+  },
+  /** Mouse hovering over element */
+  hover: {
+    opacity: 1,
+    transform: "translateY(-1px)",
+    transition: "all 150ms ease-out"
+  },
+  /** Element being pressed */
+  active: {
+    opacity: 0.9,
+    transform: "translateY(0) scale(0.98)",
+    transition: "all 50ms ease-out"
+  },
+  /** Keyboard focused */
+  focus: {
+    outline: `2px solid ${r.colors.navy[900]}`,
+    outlineOffset: "2px",
+    transition: "outline-offset 100ms ease-out"
+  },
+  /** Element is disabled */
+  disabled: {
+    opacity: 0.5,
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  }
+}, E = {
+  /** Micro spacing - between related elements */
+  micro: {
+    1: 4,
+    // Tightest
+    2: 8
+    // Very tight
+  },
+  /** Component spacing - within components */
+  component: {
+    3: 12,
+    // Compact
+    4: 16,
+    // Default
+    5: 20
+    // Comfortable
+  },
+  /** Section spacing - between sections */
+  section: {
+    6: 24,
+    // Tight sections
+    8: 32,
+    // Default sections
+    10: 40
+    // Spacious sections
+  },
+  /** Layout spacing - page-level */
+  layout: {
+    12: 48,
+    // Section gaps
+    16: 64,
+    // Major sections
+    24: 96,
+    // Page sections
+    32: 128
+    // Hero/major breaks
+  }
+};
+function ro(e) {
+  const t = ne[e];
+  return {
+    zIndex: t.zIndex,
+    boxShadow: t.shadow
+  };
+}
+function to(e, t) {
+  const n = ve[e].scale[t];
+  return n || null;
+}
+function _(e, t = "light") {
+  return (t === "light" ? {
+    primary: r.colors.navy[900],
+    secondary: r.colors.gray[700],
+    tertiary: r.colors.gray[600],
+    muted: r.colors.gray[500],
+    disabled: r.colors.gray[400]
+  } : {
+    primary: r.colors.gray[50],
+    secondary: r.colors.gray[200],
+    tertiary: r.colors.gray[300],
+    muted: r.colors.gray[400],
+    disabled: r.colors.gray[500]
+  })[e];
+}
+function Ur(e, t) {
+  return E[e][t] ?? null;
+}
+const R = {
+  none: "none",
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)",
+  base: "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.07)",
+  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1)",
+  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.3)"
+}, ue = {
+  scale: R,
+  semantic: {
+    card: R.md,
+    dropdown: R.lg,
+    modal: R["2xl"],
+    button: R.sm,
+    input: R.none,
+    inputFocus: R.base
+  },
+  glow: {
+    primary: `0 0 20px ${r.colors.purple[500]}40`,
+    accent: `0 0 20px ${r.colors.coral[500]}40`,
+    info: `0 0 20px ${r.colors.azure[500]}40`
+  }
+}, Yr = "#14B8A6", ge = /* @__PURE__ */ A(r.colors.purple[400], 0.45), Qe = {
+  overlay: {
+    scrim: "rgba(0, 0, 0, 0.7)",
+    hover: "rgba(255, 255, 255, 0.08)",
+    hoverSubtle: "rgba(255, 255, 255, 0.04)",
+    pressed: "rgba(255, 255, 255, 0.12)",
+    selected: "rgba(255, 255, 255, 0.10)",
+    disabled: "rgba(0, 0, 0, 0.5)"
+  },
+  shadow: {
+    surface: R.base,
+    raised: R.md,
+    floating: R.lg,
+    dialog: R["2xl"],
+    inset: R.inner
+  },
+  focus: {
+    // A box-shadow like the light ring (same 3px spread), in the dark focus color. Without it the
+    // static stylesheet's dark blocks declared --trinity-focus-ring as the bare colour
+    // colors.focus.ring, so `box-shadow: var(--trinity-focus-ring)` was invalid in dark mode.
+    ring: `0 0 0 3px ${ge}`,
+    glow: `0 0 0 3px ${ge}`
+  },
+  state: {
+    errorSubtle: "rgba(248, 113, 113, 0.15)",
+    errorEmphasis: "rgba(248, 113, 113, 0.4)",
+    warningSubtle: "rgba(253, 230, 138, 0.15)",
+    warningEmphasis: "rgba(253, 230, 138, 0.4)",
+    successSubtle: "rgba(74, 222, 128, 0.15)",
+    successEmphasis: "rgba(74, 222, 128, 0.4)",
+    infoSubtle: "rgba(125, 211, 252, 0.15)",
+    infoEmphasis: "rgba(125, 211, 252, 0.4)"
+  }
+}, Gr = {
+  colors: {
+    text: {
+      // Improved contrast ratios for dark mode (WCAG AA+ compliant)
+      primary: "#F9FAFB",
+      // Gray 50 - 15.8:1 contrast on gray[800]
+      secondary: "#D1D5DB",
+      // Gray 300 - 10.2:1 contrast
+      tertiary: "#9CA3AF",
+      // Gray 400 - 6.1:1 contrast
+      disabled: "#6B7280",
+      // Gray 500 - 3.9:1 contrast (meets large text AA)
+      inverse: "#18181B",
+      // Near-black text on the light inverse surface
+      brand: "#C5C6D9",
+      // Navy 100 remains visibly branded on dark
+      link: "#47B6E9",
+      // Azure 400 - 8.1:1 on the dark page
+      linkHover: "#7ACBF0",
+      // Azure hover - 10.4:1
+      error: "#FCA5A5",
+      success: "#86EFAC",
+      warning: "#FDE68A"
+    },
+    background: {
+      // Refined dark backgrounds with better elevation differentiation
+      primary: "#121214",
+      // Darker base for better contrast
+      secondary: "#1C1C1F",
+      // Slightly elevated
+      tertiary: "#262629",
+      // More elevated surfaces
+      inverse: "#F9FAFB",
+      // Light inverted panel in a dark application
+      brandSubtle: "#1A1B30",
+      // Navy-tinted dark wash
+      accentSubtle: "#2A1512"
+      // Coral-tinted dark wash
+    },
+    border: {
+      // Improved border visibility in dark mode
+      default: "#3F3F46",
+      // Gray 600 - visible but subtle
+      subtle: "#27272A",
+      // Gray 700 - very subtle dividers
+      strong: "#52525B",
+      // Gray 500 - emphasis borders
+      focus: "#A96ADA",
+      // 5.1:1 against the dark page
+      error: "#F87171",
+      // 6.8:1
+      success: "#4ADE80"
+      // 10.7:1
+    },
+    // Interactive state overrides for dark mode
+    interactive: {
+      default: r.colors.purple[400],
+      hover: r.colors.coral[400],
+      // Lighter coral for dark mode
+      active: r.colors.indigo[400],
+      disabled: r.colors.gray[600],
+      focus: r.colors.purple[400]
+    },
+    // Status color overrides for dark mode (improved contrast)
+    status: {
+      error: {
+        text: "#FCA5A5",
+        // Red 300 - good contrast
+        background: "#1F1315",
+        // Very dark red - elevated feel
+        border: "#991B1B"
+        // Red 800 - visible border
+      },
+      warning: {
+        text: "#FDE68A",
+        // Amber 200 - excellent contrast
+        background: "#1A1607",
+        // Very dark amber
+        border: "#92400E"
+        // Amber 800
+      },
+      success: {
+        text: "#86EFAC",
+        // Green 300
+        background: "#0A1A10",
+        // Very dark green
+        border: "#166534"
+        // Green 800
+      },
+      info: {
+        text: "#7DD3FC",
+        // Sky 300
+        background: "#0C1929",
+        // Very dark blue
+        border: "#075985"
+        // Sky 800
+      }
+    },
+    // Content on a solid fill of the dark status.<x>.text (ADR-03-R7): gray 900 is 10.48:1 on
+    // error, 15.97:1 on warning, 14.16:1 on success and 11.93:1 on info.
+    onStatus: {
+      error: r.colors.gray[900],
+      warning: r.colors.gray[900],
+      success: r.colors.gray[900],
+      info: r.colors.gray[900]
+    },
+    // Favorite (ADR-03-R10): a reference to the dark status.warning.text
+    // (darkSemanticRoleReferences): 15.02:1 on the page, 13.65:1 on the paper, 12.11:1 on #262629.
+    favorite: "#FDE68A",
+    indicator: {
+      inProgress: {
+        bg: r.colors.indigo[400]
+      },
+      running: {
+        bg: r.colors.indigo[400]
+      },
+      // The light info fill #0043CE is 1.93-2.40:1 on the dark surfaces (ADR-03-R8, E-43+).
+      info: { bg: se },
+      new: { bg: se },
+      updated: { bg: se }
+    },
+    chart: {
+      grid: r.colors.gray[700],
+      axis: r.colors.gray[500]
+    },
+    // Dark AI roles (Step 5 record section 13): primary purple 300 (6.07:1 on
+    // the paper), primaryFill purple 600 (white 5.28:1, 3.21:1 on the paper).
+    ai: {
+      primary: r.colors.purple[300],
+      primaryFill: r.colors.purple[600],
+      onPrimaryFill: r.colors.gray[0],
+      accent: r.colors.coral[400],
+      surface: /* @__PURE__ */ A(r.colors.purple[700], 0.15),
+      surfaceHover: /* @__PURE__ */ A(r.colors.purple[300], 0.16),
+      surfaceEmphasis: /* @__PURE__ */ A(r.colors.purple[700], 0.25),
+      surfaceEmphasisHover: /* @__PURE__ */ A(r.colors.purple[700], 0.35),
+      border: /* @__PURE__ */ A(r.colors.purple[700], 0.3),
+      badgeBackground: /* @__PURE__ */ A(r.colors.purple[700], 0.25),
+      typingIndicator: r.colors.coral[800],
+      focusRing: ge,
+      presence: {
+        blue: r.colors.azure[400],
+        violet: r.colors.indigo[300],
+        purple: r.colors.purple[300],
+        coral: r.colors.coral[400],
+        base: r.colors.gray[900]
+      },
+      // The same stops as light (owner decision 2026-10-08): the dark accent and primaryFill
+      // (coral 400, purple 600) leave the white icon at 2.5-2.9:1, coral 800 to purple 700 at
+      // 3.35:1 or more where the icon sits (WCAG 1.4.11, 3:1).
+      avatarFill: {
+        start: r.colors.coral[800],
+        end: r.colors.purple[700]
+      },
+      // The dark AI progress teal (owner mockups 2026-10-08): the mockups' own teal, which is
+      // 2.5:1 on a light paper but 6.82:1 on the dark paper.
+      progress: Yr,
+      // The canvas wash as faint tints over the dark paper, so the canvas stays dark (text.primary
+      // and text.secondary keep their contrast on it).
+      canvasFill: {
+        start: /* @__PURE__ */ A(r.colors.purple[700], 0.16),
+        end: /* @__PURE__ */ A(r.colors.coral[800], 0.1)
+      }
+    },
+    surface: {
+      elevated: "#1C1C1F",
+      sunken: "#0C0C0E",
+      // gray[600]: the light icon is 9.37:1 on it (ADR-03-R9); grey[300] was 1.20:1.
+      neutralFill: r.colors.gray[600],
+      overlay: "rgba(0, 0, 0, 0.7)",
+      success: "#0A1A10",
+      error: "#1F1315",
+      warning: "#1A1607",
+      info: "#0C1929"
+    },
+    avatar: { foregrounds: Ge },
+    focus: {
+      ring: "#A96ADA",
+      ringOffset: "#121214"
+    },
+    selection: {
+      background: "#2A5D8F",
+      text: "#F9FAFB"
+    },
+    switch: {
+      track: {
+        off: r.colors.gray[500],
+        on: r.colors.indigo[400],
+        border: r.colors.gray[500]
+      }
+    },
+    button: {
+      primary: {
+        background: r.colors.indigo[400]
+      },
+      secondary: {
+        background: r.colors.purple[600]
+      },
+      outlined: {
+        border: r.colors.purple[400],
+        text: r.colors.purple[400]
+      }
+    }
+  },
+  shadows: ue,
+  effects: Qe
+}, oo = {
+  ...ue.scale,
+  glow: ue.glow
+}, no = Qe, Zr = {
+  // Default Trinity brand
+  trinity: {
+    name: "Trinity",
+    primary: {
+      main: r.colors.navy[900],
+      light: r.colors.purple[700],
+      dark: r.colors.indigo[900],
+      contrast: "#FFFFFF"
+    },
+    secondary: {
+      main: r.colors.coral[800],
+      light: r.colors.coral[500],
+      dark: r.colors.coral[900],
+      contrast: "#FFFFFF"
+    },
+    accent: r.colors.azure[500]
+  },
+  // Professional/Corporate variant
+  corporate: {
+    name: "Corporate",
+    primary: {
+      main: "#1E3A5F",
+      // Deep blue
+      light: "#2E5A8F",
+      dark: "#0F1D30",
+      contrast: "#FFFFFF"
+    },
+    secondary: {
+      main: "#0891B2",
+      // Cyan
+      light: "#22D3EE",
+      dark: "#0E7490",
+      contrast: "#FFFFFF"
+    },
+    accent: "#F59E0B"
+    // Amber
+  },
+  // Modern/Tech variant
+  tech: {
+    name: "Tech",
+    primary: {
+      main: "#6366F1",
+      // Indigo
+      light: "#818CF8",
+      dark: "#4338CA",
+      contrast: "#FFFFFF"
+    },
+    secondary: {
+      main: "#EC4899",
+      // Pink
+      light: "#F472B6",
+      dark: "#DB2777",
+      contrast: "#FFFFFF"
+    },
+    accent: "#10B981"
+    // Emerald
+  },
+  // Nature/Organic variant
+  nature: {
+    name: "Nature",
+    primary: {
+      main: "#059669",
+      // Emerald
+      light: "#34D399",
+      dark: "#047857",
+      contrast: "#FFFFFF"
+    },
+    secondary: {
+      main: "#D97706",
+      // Amber
+      light: "#FBBF24",
+      dark: "#B45309",
+      contrast: "#FFFFFF"
+    },
+    accent: "#0EA5E9"
+    // Sky
+  },
+  // Dark/Sleek variant
+  midnight: {
+    name: "Midnight",
+    primary: {
+      main: "#1F2937",
+      // Gray 800
+      light: "#4B5563",
+      dark: "#111827",
+      contrast: "#FFFFFF"
+    },
+    secondary: {
+      main: "#8B5CF6",
+      // Violet
+      light: "#A78BFA",
+      dark: "#7C3AED",
+      contrast: "#FFFFFF"
+    },
+    accent: "#F43F5E"
+    // Rose
+  }
+};
+function io(e) {
+  const t = Zr[e];
+  return t ? {
+    ...l,
+    colors: {
+      ...l.colors,
+      brand: {
+        primary: t.primary.main,
+        secondary: t.secondary.main,
+        tertiary: t.primary.dark,
+        accent: t.accent
+      },
+      interactive: {
+        ...l.colors.interactive,
+        default: t.primary.main,
+        hover: t.secondary.main,
+        active: t.primary.dark,
+        focus: t.primary.light
+      }
+    }
+  } : l;
+}
+const Kr = {
+  /** Attention/importance levels */
+  attention: Ze,
+  /** Typography scale and weights */
+  typography: ve,
+  /** Z-axis elevation system */
+  elevation: ne,
+  /** Size scaling system */
+  scale: q,
+  /** Contrast levels */
+  contrast: Ke,
+  /** Interactive states */
+  interactive: Xe,
+  /** Spacing rhythm */
+  spacing: E
+}, qe = {
+  base: r,
+  semantic: l,
+  component: jr,
+  darkMode: Gr,
+  hierarchy: Kr
+}, so = ({
+  height: e = 28,
+  className: t
+}) => {
+  const n = e * 4.018867924528302, i = Ve.useId(), s = `trinity-logo-gradient-${i}`, a = `trinity-logo-clip-${i}`;
+  return /* @__PURE__ */ V(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: n,
+      height: e,
+      viewBox: "0 0 213 53",
+      fill: "none",
+      className: t,
+      "aria-label": "Trinity",
+      role: "img",
+      children: [
+        /* @__PURE__ */ V("g", { clipPath: `url(#${a})`, children: [
+          /* @__PURE__ */ b(
+            "path",
+            {
+              d: "M212.525 18.8744C212.304 19.023 212.157 19.1716 211.936 19.3944C208.844 23.8516 205.826 28.3087 202.735 32.7659C202.44 33.2116 202.367 33.6573 202.367 34.1773C202.367 37.0744 202.367 40.0459 202.367 43.0173H199.496V42.0516C199.496 39.4516 199.496 36.8516 199.496 34.2516C199.496 33.6573 199.349 33.1373 198.981 32.6173C196.036 28.2344 193.018 23.8516 190 19.4687C189.853 19.2459 189.706 18.9487 189.411 18.5773C190.515 18.5773 191.472 18.503 192.503 18.5773C192.724 18.5773 193.018 18.8744 193.165 19.1716C195.521 22.663 197.95 26.2287 200.306 29.7201L200.968 30.6859L204.575 25.3373C205.974 23.2573 207.372 21.1773 208.771 19.0973C208.992 18.7259 209.433 18.4287 209.949 18.503C210.832 18.503 211.642 18.4287 212.525 18.4287V18.8744Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ b(
+            "path",
+            {
+              d: "M134.645 38.0401V18.6515H137.295V43.0172C136.706 43.0915 136.117 43.0915 135.528 43.0172C135.16 42.9429 134.865 42.7201 134.645 42.4229C129.86 36.3315 125.075 30.2401 120.364 24.1486C120.143 23.9258 119.996 23.6286 119.628 23.2572V43.0172H116.904V18.5772C117.714 18.5029 118.45 18.5029 119.26 18.5772C119.481 18.5772 119.775 18.9486 119.996 19.1715C124.707 25.1143 129.345 31.0572 134.056 37.0743L134.645 38.0401Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ b(
+            "path",
+            {
+              d: "M84.0006 33.1371L91.4353 43.0171C90.2575 43.0171 89.3006 43.0914 88.27 43.0171C87.9756 43.0171 87.6811 42.6457 87.5339 42.4228C85.4728 39.6742 83.4853 36.9999 81.4978 34.2514C81.2034 33.8057 80.7617 33.5828 80.2464 33.6571C78.2589 33.7314 76.2714 33.6571 74.1367 33.6571V43.0171H71.4131V18.7257C71.4867 18.6514 71.4867 18.6514 71.5603 18.6514C75.3881 18.6514 79.1423 18.6514 82.97 18.7257C83.8534 18.7999 84.8103 18.9485 85.62 19.2457C88.8589 20.2857 90.552 22.7371 90.552 26.0057C90.552 29.2742 88.7853 31.5771 85.62 32.6914C85.1048 32.8399 84.5895 32.9142 84.0006 33.1371ZM74.0631 31.2057C77.302 31.0571 80.4673 31.0571 83.6325 30.7599C85.3992 30.6114 86.945 29.3485 87.3867 27.5657C88.3436 24.5199 86.6506 21.8457 83.2645 21.3999C81.0561 21.2514 78.8478 21.1771 76.6395 21.1771C75.7561 21.1771 74.8728 21.1771 73.9895 21.1771L74.0631 31.2057Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ b(
+            "path",
+            {
+              d: "M2.43945 24.0742C3.47001 23.7771 4.50035 24.2228 5.01562 25.1143C5.23639 25.5599 5.38343 26.0797 5.45703 26.5996V49.7021C5.45703 51.3364 4.50053 52.3769 3.02832 52.377C1.5561 52.377 0.599609 51.3364 0.599609 49.7021V26.5254C0.525999 25.4111 1.33531 24.3714 2.43945 24.0742ZM11.7881 8.40039C12.745 7.50903 14.2905 7.58314 15.1738 8.54883C15.4682 8.84595 15.6155 9.2175 15.7627 9.58887C15.8363 9.96021 15.9102 10.3318 15.9102 10.7031V41.7539C15.9102 43.5368 15.1001 44.5771 13.6279 44.6514C12.0821 44.7257 11.0518 43.611 11.0518 41.8281V28.8281L10.9775 26.1543V10.6289C10.9039 9.81176 11.1992 8.99468 11.7881 8.40039ZM23.2715 0.525391C24.302 0.22826 25.3324 0.674007 25.8477 1.56543C26.0684 2.01105 26.2154 2.53089 26.2891 3.05078V26.1543C26.2889 27.7883 25.3324 28.8281 23.8604 28.8281C22.3883 28.8281 21.4318 27.7883 21.4316 26.1543V2.97656C21.3581 1.86233 22.1674 0.822521 23.2715 0.525391Z",
+              fill: `url(#${s})`
+            }
+          ),
+          /* @__PURE__ */ b(
+            "path",
+            {
+              d: "M50.4341 21.2513H42.3369V18.7256H61.3286V21.2513H53.2314V43.017H50.3605V21.2513H50.4341Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ b(
+            "path",
+            {
+              d: "M181.24 18.6514V21.1771H173.217V42.9428H170.419V21.2514H162.322V18.7257H181.24V18.6514Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ b("path", { d: "M152.679 42.9428H150.029V18.6514H152.679V42.9428Z", fill: "white" }),
+          /* @__PURE__ */ b("path", { d: "M104.17 42.9427H101.446V18.7256H104.17V42.9427Z", fill: "white" })
+        ] }),
+        /* @__PURE__ */ V("defs", { children: [
+          /* @__PURE__ */ V(
+            "linearGradient",
+            {
+              id: s,
+              x1: "0.594727",
+              y1: "52.3768",
+              x2: "26.2904",
+              y2: "0.434374",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ b("stop", { stopColor: "#FF6150" }),
+                /* @__PURE__ */ b("stop", { offset: "1", stopColor: "#6B12ED" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ b("clipPath", { id: a, children: /* @__PURE__ */ b("rect", { width: "212", height: "52", fill: "white", transform: "translate(0.525391 0.451172)" }) })
+        ] })
+      ]
+    }
+  );
+}, ao = ({
+  height: e = 28,
+  className: t
+}) => {
+  const n = e * 1, i = `trinity-icon-gradient-${Ve.useId()}`;
+  return /* @__PURE__ */ V(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: n,
+      height: e,
+      viewBox: "0 0 160 160",
+      fill: "none",
+      className: t,
+      "aria-label": "Trinity",
+      role: "img",
+      children: [
+        /* @__PURE__ */ b("defs", { children: /* @__PURE__ */ V(
+          "linearGradient",
+          {
+            id: i,
+            x1: "44",
+            y1: "5.2",
+            x2: "117.8",
+            y2: "154.5",
+            gradientTransform: "translate(0 162) scale(1 -1)",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ b("stop", { offset: "0", stopColor: "#FF6150" }),
+              /* @__PURE__ */ b("stop", { offset: "1", stopColor: "#6B12ED" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ b(
+          "path",
+          {
+            d: "M49.3,75.5c3-.9,5.9.4,7.4,3,.6,1.3,1.1,2.8,1.3,4.3v66.4c0,4.7-2.7,7.7-7,7.7-4.2,0-7-3-7-7.7v-66.6c-.2-3.2,2.1-6.2,5.3-7ZM76.1,30.4c2.7-2.6,7.2-2.3,9.7.4.8.9,1.3,1.9,1.7,3,.2,1.1.4,2.1.4,3.2v89.2c0,5.1-2.3,8.1-6.6,8.3-4.4.2-7.4-3-7.4-8.1v-37.4l-.2-7.7v-44.6c-.2-2.3.6-4.7,2.3-6.4ZM109.1,7.8c3-.9,5.9.4,7.4,3,.6,1.3,1.1,2.8,1.3,4.3v66.4c0,4.7-2.7,7.7-7,7.7s-7-3-7-7.7V14.8c-.2-3.2,2.1-6.2,5.3-7Z",
+            fill: `url(#${i})`
+          }
+        )
+      ]
+    }
+  );
+}, co = /* @__PURE__ */ G("div")(({ theme: e, focused: t }) => ({
+  position: "relative",
+  borderRadius: `${l.borders.radius.menu}px`,
+  // 12px
+  backgroundColor: t === "true" ? e.palette.common.white : l.effects.onDark.subtle,
+  // 12% white
+  "&:hover": {
+    backgroundColor: t === "true" ? e.palette.common.white : l.effects.onDark.hover
+  },
+  marginRight: e.spacing(2),
+  marginLeft: e.spacing(2),
+  width: "100%",
+  maxWidth: 400,
+  transition: e.transitions.create(["background-color"]),
+  [e.breakpoints.up("sm")]: {
+    marginLeft: e.spacing(3),
+    width: "auto",
+    minWidth: 300
+  }
+})), lo = /* @__PURE__ */ G("div")(({ theme: e, focused: t }) => ({
+  padding: e.spacing(0, 2),
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: t === "true" ? j.primary.main : Ue(e.palette.common.white, 0.5)
+})), uo = /* @__PURE__ */ G(Fr)(({ theme: e, focused: t }) => ({
+  color: t === "true" ? j.primary.main : "inherit",
+  width: "100%",
+  "& .MuiInputBase-input": {
+    padding: e.spacing(1, 4, 1, 0),
+    paddingLeft: `calc(1em + ${e.spacing(4)})`,
+    transition: e.transitions.create("width"),
+    width: "100%",
+    fontSize: l.typography.body.small.fontSize,
+    // 14px
+    "&::placeholder": {
+      color: t === "true" ? j.neutral.gray500 : Ue(e.palette.common.white, 0.5),
+      opacity: 1
+    }
+  }
+})), go = /* @__PURE__ */ G(vr)(({ show: e }) => ({
+  position: "absolute",
+  right: l.inline.tight,
+  // 4px
+  top: "50%",
+  transform: "translateY(-50%)",
+  padding: l.inline.tight,
+  // 4px
+  opacity: e === "true" ? 1 : 0,
+  pointerEvents: e === "true" ? "auto" : "none",
+  color: j.neutral.gray500,
+  "&:hover": {
+    backgroundColor: "action.hover"
+    // Theme-aware hover
+  }
+})), fo = /* @__PURE__ */ G(xr)(({ theme: e }) => ({
+  position: "absolute",
+  left: e.spacing(1),
+  top: e.spacing(1),
+  zIndex: e.zIndex.tooltip,
+  backgroundColor: e.palette.common.white,
+  color: j.primary.main,
+  padding: e.spacing(1, 2),
+  fontSize: l.typography.body.small.fontSize,
+  fontWeight: l.typography.body.small.fontWeight,
+  borderRadius: `${l.borders.radius.menu}px`,
+  textDecoration: "none",
+  // Visually hide by translating off-screen unless focused.
+  transform: "translateY(-200%)",
+  transition: e.transitions.create("transform"),
+  "&:focus, &:focus-visible": {
+    transform: "translateY(0)",
+    outline: `2px solid ${j.primary.main}`,
+    outlineOffset: 2
+  }
+})), po = /* @__PURE__ */ G(je)(({ theme: e }) => ({
+  backgroundColor: l.effects.onDark.subtle,
+  // 12% white
+  color: e.palette.common.white,
+  borderRadius: `${l.borders.radius.menu}px`,
+  // 12px
+  padding: `${l.density.compact.cellPadding}px ${l.density.standard.cellPadding}px`,
+  // 6px 12px
+  textTransform: "none",
+  fontSize: l.typography.body.small.fontSize,
+  // 14px
+  fontWeight: l.typography.body.small.fontWeight,
+  // 400
+  minWidth: 180,
+  justifyContent: "space-between",
+  "&:hover": {
+    backgroundColor: l.effects.onDark.hover
+  }
+})), Xr = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i, Qr = /^(rgba?|hsla?)\(/i;
+function qr(e) {
+  return e.every((t) => Number.isFinite(t));
+}
+function ce(e) {
+  if (typeof e != "string") return null;
+  const t = e.trim();
+  if (!Xr.test(t) && !Qr.test(t)) return null;
+  try {
+    let o = $e(t);
+    if ((o.type === "hsl" || o.type === "hsla") && (o = $e(Cr(t))), o.type !== "rgb" && o.type !== "rgba") return null;
+    const [n, i, s, a = 1] = o.values;
+    return o.values.length < 3 || o.values.length > 4 || !qr([n, i, s, a]) || [n, i, s].some((c) => c < 0 || c > 255) || a < 0 || a > 1 ? null : { r: n, g: i, b: s, a };
+  } catch {
+    return null;
+  }
+}
+function le(e, t) {
+  const o = e.a;
+  return o >= 1 ? { ...e, a: 1 } : {
+    r: e.r * o + t.r * (1 - o),
+    g: e.g * o + t.g * (1 - o),
+    b: e.b * o + t.b * (1 - o),
+    a: 1
+  };
+}
+function de(e) {
+  const t = e / 255;
+  return t <= 0.03928 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
+}
+function He({ r: e, g: t, b: o }) {
+  return 0.2126 * de(e) + 0.7152 * de(t) + 0.0722 * de(o);
+}
+function Jr(e, t) {
+  const o = He(e), n = He(t);
+  return (Math.max(o, n) + 0.05) / (Math.min(o, n) + 0.05);
+}
+const Oe = { r: 255, g: 255, b: 255, a: 1 }, De = /* @__PURE__ */ new Set();
+function et(e) {
+  process.env.NODE_ENV !== "production" && (De.has(e) || (De.add(e), console.warn(
+    `[Trinity] Cannot read the color "${e}" for a contrast check. Use hex, rgb(a) or hsl(a); the ratio is NaN.`
+  )));
+}
+function mo(e, t, o = {}) {
+  const n = ce(e), i = ce(t), s = o.over === void 0 ? Oe : ce(o.over);
+  for (const [d, u] of [
+    [e, n],
+    [t, i],
+    [o.over ?? "", s]
+  ])
+    if (!u)
+      return et(d), Number.NaN;
+  const a = le(i, le(s, Oe)), c = le(n, a);
+  return Jr(c, a);
+}
+const Je = [
+  ["card.background", "surface.elevated"],
+  ["card.border", "border.subtle"],
+  ["input.background.default", "surface.elevated"],
+  ["input.background.disabled", "background.tertiary"],
+  ["input.borderColor.default", "border.default"],
+  ["input.borderColor.hover", "border.strong"],
+  ["input.borderColor.focus", "border.focus"],
+  ["input.borderColor.error", "border.error"],
+  ["tooltip.background", "background.inverse"],
+  ["tooltip.text", "text.inverse"],
+  ["modal.background", "surface.elevated"]
+];
+function te(e) {
+  return e.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function rt(e) {
+  return e.split(".").map(te).join("-");
+}
+function tt(e, t) {
+  return `--trinity-component-${rt(e)}`;
+}
+function U(e, t) {
+  const [o, ...n] = e.split(".");
+  o === "background" || te(o);
+  const i = "--trinity-semantic-", s = [
+    te(o),
+    ...n.map(te)
+  ];
+  return `${i}${s.join("-")}`;
+}
+function ot(e, t, o) {
+  for (const [n, i] of t) {
+    const s = e.get(n), a = e.get(i);
+    if (s === void 0 || a === void 0) {
+      if (o.onMissing === "throw")
+        throw new Error(`${o.context}missing color reference endpoint: ${n} -> ${i}`);
+      continue;
+    }
+    if (s !== a) {
+      if (o.onMismatch === "throw")
+        throw new Error(
+          `${o.context}color reference changes light output: ${n} (${s}) != ${i} (${a})`
+        );
+      continue;
+    }
+    e.set(n, `var(${i})`);
+  }
+}
+function bo(e) {
+  return Je.map(([t, o]) => [
+    tt(t),
+    U(o)
+  ]);
+}
+const ie = [
+  ["confidence.high", "status.success"],
+  ["confidence.medium", "status.info"],
+  ["confidence.low", "status.warning"],
+  ["verification.verified", "status.success"],
+  // Golden shares the success colors; its glyph (`award`) tells it apart.
+  ["verification.golden", "status.success"],
+  ["verification.pending", "status.info"],
+  ["verification.flagged", "status.warning"],
+  ["verification.rejected", "status.error"],
+  // AI roles (E-03, ADR-03-R15, ADR-03-R11). Light values only: the dark AI
+  // roles are their own values, emitted in the dark blocks.
+  ["ai.primary", "brand.secondary"],
+  ["ai.primaryFill", "brand.secondary"],
+  ["ai.typingIndicator", "brand.secondary"],
+  ["ai.accent", "brand.accent"],
+  ["ai.presence.purple", "brand.secondary"],
+  ["ai.presence.coral", "brand.accent"],
+  ["ai.avatarFill.start", "brand.accent"],
+  ["ai.avatarFill.end", "brand.secondary"],
+  // Favorite (ADR-03-R10, H-12): the pinned/favorite star of ThreadHistorySidebar. The dark
+  // reference is in darkSemanticRoleReferences.
+  ["favorite", "status.warning.text"]
+], fe = [
+  // Favorite (ADR-03-R10): the dark star references the dark warning text.
+  ["favorite", "status.warning.text"]
+];
+function ho(e) {
+  const t = pe(fe);
+  if (t) throw new Error(`Dark role reference cycle: ${t.join(" -> ")}`);
+  return fe.map(([o, n]) => [
+    U(o),
+    U(n)
+  ]);
+}
+const nt = [
+  ["ai.surface", "brand.secondary", 0.05],
+  ["ai.border", "brand.secondary", 0.2],
+  ["ai.badgeBackground", "brand.secondary", 0.15]
+], it = ["confidence", "verification"];
+function er(e, t) {
+  return t.split(".").reduce((o, n) => o && typeof o == "object" ? o[n] : void 0, e);
+}
+function rr(e, t = ie) {
+  const o = [];
+  for (const [n, i] of t) {
+    const s = er(e, i);
+    if (typeof s == "string") o.push([n, i]);
+    else if (s && typeof s == "object")
+      for (const [a, c] of Object.entries(s))
+        typeof c == "string" && o.push([`${n}.${a}`, `${i}.${a}`]);
+    else
+      throw new Error(`Semantic role reference ${n} -> ${i}: the source does not exist`);
+  }
+  return o;
+}
+function pe(e) {
+  const t = /* @__PURE__ */ new Map();
+  for (const [s, a] of e)
+    t.set(s, [...t.get(s) ?? [], a]);
+  const o = /* @__PURE__ */ new Map(), n = [], i = (s) => {
+    if (o.get(s) === "done") return null;
+    if (o.get(s) === "visiting") return [...n.slice(n.indexOf(s)), s];
+    o.set(s, "visiting"), n.push(s);
+    for (const a of t.get(s) ?? []) {
+      const c = i(a);
+      if (c) return c;
+    }
+    return n.pop(), o.set(s, "done"), null;
+  };
+  for (const s of t.keys()) {
+    const a = i(s);
+    if (a) return a;
+  }
+  return null;
+}
+function yo(e) {
+  var n;
+  const t = {}, o = ie.filter(
+    ([i]) => it.includes(i.split(".")[0])
+  );
+  for (const [i, s] of rr(e, o)) {
+    const [a, c, d] = i.split(".");
+    if (d === void 0) continue;
+    const u = er(e, s);
+    ((n = t[a] ?? (t[a] = {}))[c] ?? (n[c] = {}))[d] = u;
+  }
+  return t;
+}
+function xo(e, t) {
+  const o = rr(e), n = pe(ie) ?? pe(o);
+  if (n) throw new Error(`Semantic role reference cycle: ${n.join(" -> ")}`);
+  return o.map(([i, s]) => [
+    U(i),
+    U(s)
+  ]);
+}
+function Fo(e, t, o) {
+  const n = [], i = [];
+  for (const [s, a] of t) {
+    if (!e.has(a))
+      throw new Error(`${o.context}missing semantic role reference source: ${s} -> ${a}`);
+    if (e.has(s) && !n.includes(s)) {
+      i.push([s, a]);
+      continue;
+    }
+    if (n.includes(s))
+      throw new Error(`${o.context}semantic role reference emits ${s} twice`);
+    e.set(s, `var(${a})`), n.push(s);
+  }
+  return ot(e, i, { ...o, onMissing: "throw" }), n;
+}
+const st = {
+  error: ["error", "critical", "failed", "rejected"],
+  warning: ["warning", "caution", "pending"],
+  success: ["success", "complete", "approved", "active", "enabled"],
+  info: ["info", "new", "updated"],
+  neutral: ["neutral", "draft", "inactive", "disabled", "cancelled", "unknown"],
+  progress: ["inProgress", "running"],
+  beta: ["beta", "experimental"]
+};
+function vo(e, t = {}, o) {
+  const n = {};
+  for (const [i, s] of Object.entries(st))
+    for (const a of s) {
+      const c = { ...e[a], ...t[a] }, d = c.outline;
+      n[a] = {
+        fill: c.bg,
+        onFill: c.fg,
+        ...d === void 0 ? {} : { outline: d },
+        onSurface: o ? o[i] : d ?? c.bg
+      };
+    }
+  return n;
+}
+function Te(e) {
+  return Array.from(e.matchAll(/var\((--[\w-]+)/g), (t) => t[1]);
+}
+function wo(e, t, o) {
+  const n = /* @__PURE__ */ new Map(), i = (s, a) => {
+    if (o.has(s)) return !0;
+    const c = n.get(s);
+    if (c !== void 0) return c;
+    if (a.has(s)) throw new Error(`custom-property reference cycle at ${s}`);
+    const d = new Set(a).add(s), u = Te(t.get(s) ?? "").some((m) => i(m, d));
+    return n.set(s, u), u;
+  };
+  return e.filter((s) => {
+    const a = t.get(s) ?? "";
+    return a.includes("var(") && Te(a).some((c) => i(c, /* @__PURE__ */ new Set([s])));
+  });
+}
+function at({ accent: e, primaryFill: t, surface: o, avatarFill: n, canvasFill: i }) {
+  return {
+    primary: `linear-gradient(180deg, ${e} 0%, ${t} 100%)`,
+    horizontal: `linear-gradient(90deg, ${e} 0%, ${t} 100%)`,
+    diagonal: `linear-gradient(135deg, ${e} 0%, ${t} 100%)`,
+    subtle: `linear-gradient(180deg, transparent 0%, ${o} 100%)`,
+    text: `linear-gradient(180deg, ${e} 0%, ${t} 100%)`,
+    border: `linear-gradient(180deg, ${e}, ${t})`,
+    avatar: `linear-gradient(180deg, ${n.start} 0%, ${n.end} 100%)`,
+    brandDiagonal: `linear-gradient(135deg, ${n.start} 0%, ${n.end} 100%)`,
+    canvas: `linear-gradient(135deg, transparent 0%, ${i.start} 60%, ${i.end} 100%)`
+  };
+}
+function So(e) {
+  const t = (n) => U(`ai.${n}`), o = at({
+    accent: `var(${t("accent")})`,
+    primaryFill: `var(${t("primaryFill")})`,
+    surface: `var(${t("surface")})`,
+    avatarFill: { start: `var(${t("avatarFill.start")})`, end: `var(${t("avatarFill.end")})` },
+    canvasFill: { start: `var(${t("canvasFill.start")})`, end: `var(${t("canvasFill.end")})` }
+  });
+  return Object.entries(o).map(([n, i]) => [t(`gradient.${n}`), i]);
+}
+const Co = {
+  containerType: "inline-size",
+  width: "100%",
+  containIntrinsicInlineSize: `${l.spacing.layout.containerQuery.narrow}px`
+};
+function ct(e, t) {
+  return e.trinityTokens?.semantic.spacing.layout.containerQuery?.[t] ?? l.spacing.layout.containerQuery[t];
+}
+function Eo(e, t, o) {
+  const n = ct(e, t);
+  return o ? e.containerQueries(o).down(n) : e.containerQueries.down(n);
+}
+const me = (e, t, o) => typeof e == "number" && Number.isInteger(e) && e >= t && e <= o;
+function be(e, t, o, n) {
+  const i = Math.round(Number(e));
+  return Number.isFinite(i) ? Math.min(o, Math.max(t, i)) : n;
+}
+function Ao(e) {
+  if (me(e, 2, 6)) return `h${e}`;
+  if (process.env.NODE_ENV !== "production")
+    throw new RangeError(`[trinity] headingLevel must be 2, 3, 4, 5 or 6; got ${String(e)}. Level 1 is reserved for the page title.`);
+  return `h${be(e, 2, 6, 2)}`;
+}
+function ko(e, t = 0) {
+  if (!me(e, 1, 6) || !me(t, 0, 5)) {
+    if (process.env.NODE_ENV !== "production")
+      throw new RangeError(`[trinity] heading level must be 1-6 and headingOffset 0-5; got level ${String(e)}, offset ${String(t)}.`);
+    return `h${Math.min(6, be(e, 1, 6, 1) + be(t, 0, 5, 0))}`;
+  }
+  return `h${Math.min(6, e + t)}`;
+}
+function Ie(e) {
+  return e != null && typeof e != "boolean";
+}
+function tr(...e) {
+  const t = [];
+  for (const o of e)
+    if (Array.isArray(o))
+      for (const n of o) Ie(n) && t.push(n);
+    else Ie(o) && t.push(o);
+  return t;
+}
+const lt = ["role", "aria-live", "aria-busy", "aria-relevant", "aria-atomic", "aria-modal"], dt = /* @__PURE__ */ new Set(lt);
+function he(...e) {
+  const t = [];
+  for (const o of e) {
+    const n = typeof o == "string" ? [o] : Array.isArray(o) ? o : [];
+    for (const i of n)
+      if (i)
+        for (const s of i.split(/\s+/))
+          s && !t.includes(s) && t.push(s);
+  }
+  return t.length > 0 ? t.join(" ") : void 0;
+}
+function or(e) {
+  return dt.has(e);
+}
+const Me = /* @__PURE__ */ new Set();
+function nr(e, t, o) {
+  if (process.env.NODE_ENV === "production" || t.length === 0 || Me.has(e)) return;
+  Me.add(e);
+  const n = o ? `slotProps.${o}` : "its root", i = t.map((s) => `"${s}"`).join(", ");
+  console.warn(
+    `[trinity] ${e}: ${i} on ${n} is owned by the component and was ignored. The component sets its own role and live-region attributes (ADR-04). Use the documented props instead.`
+  );
+}
+function Ro(e) {
+  const { rest: t, owned: o, id: n, describedBy: i, labelledBy: s, componentName: a } = e, c = g.useId(), d = t ?? {}, u = {}, m = [];
+  for (const [w, S] of Object.entries(d)) {
+    if (or(w)) {
+      S !== void 0 && m.push(w);
+      continue;
+    }
+    u[w] = S;
+  }
+  for (const [w, S] of Object.entries(o ?? {}))
+    S !== void 0 && (u[w] = S);
+  u.id = n || typeof d.id == "string" && d.id || c;
+  const F = he(i, d["aria-describedby"]), y = he(s, d["aria-labelledby"]);
+  F ? u["aria-describedby"] = F : delete u["aria-describedby"], y ? u["aria-labelledby"] = y : delete u["aria-labelledby"];
+  const v = m.join(" ");
+  return g.useEffect(() => {
+    v && nr(a, v.split(" "));
+  }, [a, v]), u;
+}
+const ut = /^on[A-Z]/;
+function gt(e, t) {
+  return [e, t].filter((n) => typeof n == "string" && n).join(" ") || void 0;
+}
+function zo(e, t, o = {}) {
+  const n = e ?? {}, i = { ...n }, s = [];
+  for (const [a, c] of Object.entries(t ?? {}))
+    if (c !== void 0)
+      if (or(a))
+        s.push(a);
+      else if (a === "className")
+        i.className = gt(n.className, c);
+      else if (a === "sx")
+        i.sx = tr(n.sx, c);
+      else if (a === "style")
+        i.style = { ...n.style, ...c };
+      else if (a === "aria-describedby" || a === "aria-labelledby")
+        i[a] = he(n[a], c);
+      else if (ut.test(a) && typeof c == "function" && typeof n[a] == "function") {
+        const d = n[a], u = c;
+        i[a] = (...m) => {
+          d(...m), u(...m);
+        };
+      } else
+        i[a] = c;
+  return s.length > 0 && nr(o.componentName ?? "A Trinity component", s, o.slotName), i;
+}
+const ft = /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:cap|ch|cm|dvh|dvw|em|ex|ic|in|lh|mm|pc|pt|px|Q|rem|rlh|svh|svw|vmax|vmin|vh|vw|%)$/, pt = /^(?:calc|clamp|max|min|var)\(.+\)$/, mt = /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:ms|s)$/;
+function H(e, t, o) {
+  const n = o ? ` for ${o}` : "";
+  throw new TypeError(
+    `Invalid ${e} token${n}: ${JSON.stringify(t)}`
+  );
+}
+function ee(e, t, o) {
+  (typeof e != "number" || !Number.isFinite(e)) && H(t, e, o);
+}
+function $o(e, t, o) {
+  switch (t) {
+    case "dimension":
+      return typeof e == "number" ? (Number.isFinite(e) || H(t, e, o), `${e}px`) : typeof e == "string" && (e === "0" || ft.test(e) || pt.test(e)) ? e : H(t, e, o);
+    case "duration":
+      return typeof e == "string" && mt.test(e) ? e : H(t, e, o);
+    case "fontWeight":
+      return ee(e, t, o), !Number.isInteger(e) || e < 1 || e > 1e3 ? H(t, e, o) : String(e);
+    case "lineHeight":
+      return ee(e, t, o), e < 0 ? H(t, e, o) : String(e);
+    case "opacity":
+      return ee(e, t, o), e < 0 || e > 1 ? H(t, e, o) : String(e);
+    case "zIndex":
+      return e === "auto" ? e : (ee(e, t, o), Number.isInteger(e) ? String(e) : H(t, e, o));
+    case "raw":
+      return typeof e == "string" ? e : typeof e == "number" && Number.isFinite(e) ? String(e) : Array.isArray(e) && e.every(
+        (n) => typeof n == "string" || typeof n == "number" && Number.isFinite(n)
+      ) ? e.join(",") : H(t, e, o);
+  }
+}
+const Ho = (e) => e[0] === "easing" ? "raw" : "duration", bt = {
+  "badge.fontWeight": "fontWeight",
+  "modal.backdropOpacity": "opacity"
+}, Oo = (e, t) => bt[e.join(".")] ?? (typeof t == "number" ? "dimension" : "raw");
+function Do(e) {
+  return `--trinity-${e.map((o) => String(o).replace(/([A-Z])/g, "-$1").toLowerCase()).join("-").replace(/[^a-z0-9-]+/g, "-").replace(/-{2,}/g, "-").replace(/^-|-$/g, "")}`;
+}
+const ht = /^\s*(-?(?:\d+(?:\.\d+)?|\.\d+))(ms|s)\s*$/;
+function oe(e, t) {
+  const o = t ? ` for ${t}` : "";
+  if (typeof e == "number") {
+    if (!Number.isFinite(e)) throw new TypeError(`Not a finite duration${o}: ${e}`);
+    return e;
+  }
+  const n = ht.exec(e);
+  if (!n) throw new TypeError(`Not a CSS time${o}: ${JSON.stringify(e)}`);
+  const i = Number(n[1]);
+  return n[2] === "s" ? Math.round(i * 1e3) : i;
+}
+const yt = {
+  layout: ["containerQuery"]
+};
+function To(e) {
+  const t = { ...e };
+  for (const [o, n] of Object.entries(yt)) {
+    const i = t[o];
+    if (i && typeof i == "object") {
+      const s = { ...i };
+      for (const a of n) delete s[a];
+      t[o] = s;
+    }
+  }
+  return t;
+}
+function xt(e) {
+  return oe(e);
+}
+function Io(e) {
+  return Er() ? 0 : xt(e);
+}
+function Mo(e) {
+  return { [Ye]: e };
+}
+const Ft = "trinity-essential-motion", Be = "0.01ms";
+function Bo(e) {
+  return {
+    duration: {
+      shortest: oe(e.duration.fast, "motion.duration.fast"),
+      shorter: oe(e.duration.normal, "motion.duration.normal"),
+      standard: oe(e.duration.slow, "motion.duration.slow")
+    },
+    easing: {
+      easeInOut: e.easing.default,
+      easeOut: e.easing.enter,
+      easeIn: e.easing.exit
+    }
+  };
+}
+function No() {
+  const e = `:not(.${Ft})`;
+  return {
+    [Ye]: {
+      [`*${e}, *${e}::before, *${e}::after`]: {
+        animationDuration: `${Be} !important`,
+        animationIterationCount: "1 !important",
+        transitionDuration: `${Be} !important`,
+        scrollBehavior: "auto !important"
+      }
+    }
+  };
+}
+const vt = q.touchTargets.floor, Wo = {
+  position: "relative",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    inset: `min(0px, calc((100% - ${vt}px) / 2))`
+  }
+}, ye = (e) => typeof e == "object" && e !== null && Object.getPrototypeOf(e) === Object.prototype;
+function ir(e, t) {
+  if (t == null) return e;
+  const o = { ...e };
+  for (const [n, i] of Object.entries(t)) {
+    if (i === void 0) continue;
+    const s = o[n];
+    o[n] = ye(i) && ye(s) ? ir(s, i) : i;
+  }
+  return o;
+}
+function wt(e) {
+  return JSON.stringify(e, (t, o) => typeof o == "function" ? `fn:${String(o)}` : ye(o) ? Object.fromEntries(Object.keys(o).sort().map((n) => [n, o[n]])) : o);
+}
+const St = 3;
+function Ct(e, t) {
+  const o = br({
+    seen: !1,
+    value: void 0,
+    hash: "",
+    streak: 0,
+    warned: !1
+  });
+  hr(() => {
+    if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
+    const n = o.current;
+    if (n.seen && t === n.value) {
+      n.streak = 0;
+      return;
+    }
+    const i = wt(t);
+    n.streak = n.seen && i === n.hash ? n.streak + 1 : 0, n.seen = !0, n.value = t, n.hash = i, n.streak > St && !n.warned && (n.warned = !0, console.warn(
+      `[trinity] ${e} got a new object with the same content on ${n.streak} renders in a row. Hoist it out of the component or wrap it in useMemo, so the context does not re-render its consumers.`
+    ));
+  });
+}
+function Lo(e, t, o = {}) {
+  const n = o.providerName ?? `StringsProvider(${e})`, i = fr(t);
+  i.displayName = `StringsContext(${e})`;
+  function s({ strings: c, children: d }) {
+    const u = ze(i), m = pr(() => ir(u, c), [u, c]);
+    return Ct(`${n}: the \`strings\` prop`, c), mr(i.Provider, { value: m }, d);
+  }
+  s.displayName = `StringsProvider(${e})`;
+  function a() {
+    return ze(i);
+  }
+  return { namespace: e, defaults: t, Context: i, StringsProvider: s, useStrings: a };
+}
+function _o(e, t) {
+  const o = /* @__PURE__ */ new Map();
+  return e.map((n) => {
+    const i = t(n), s = (o.get(i) ?? 0) + 1;
+    return o.set(i, s), JSON.stringify([i, s]);
+  });
+}
+const Po = /* @__PURE__ */ yr(function({ dir: t = "auto", style: o, ...n }, i) {
+  return /* @__PURE__ */ b("span", { ref: i, ...n, dir: t, style: { ...o, unicodeBidi: "isolate" } });
+});
+function Et(e) {
+  const t = globalThis.reportError;
+  typeof t == "function" ? t(e) : queueMicrotask(() => {
+    throw e;
+  });
+}
+function Vo(e = {}) {
+  const { messages: t, onCopied: o, onCopyError: n, feedbackDuration: i = 2e3 } = e, s = g.useRef(null), a = g.useRef(o);
+  g.useEffect(() => {
+    a.current = o;
+  });
+  const c = Rr({
+    successDuration: i,
+    onError: (x) => {
+      s.current = x;
+    }
+  }), { copy: d, reset: u } = c, m = zr(
+    async (x) => {
+      if (s.current = null, !await d(x))
+        throw s.current ?? new Error("Clipboard write failed");
+      try {
+        a.current?.(x);
+      } catch (I) {
+        Et(I);
+      }
+    },
+    { onError: n, announce: { success: t?.success, error: t?.error } }
+  ), { run: F, reset: y, status: v } = m;
+  g.useEffect(() => {
+    if (v !== "error") return;
+    const x = setTimeout(y, i);
+    return () => clearTimeout(x);
+  }, [v, i, y]);
+  const w = g.useCallback(() => {
+    y(), u();
+  }, [y, u]);
+  let S = "idle";
+  return v === "pending" ? S = "pending" : v === "error" ? S = "error" : c.copied && (S = "copied"), { copy: F, status: S, reset: w };
+}
+const sr = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  '[role="button"]',
+  '[role="link"]',
+  '[role="checkbox"]',
+  '[role="switch"]',
+  '[role="menuitem"]',
+  '[role="tab"]',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]'
+], jo = sr.join(", "), At = sr.map((e) => `& ${e}`).join(", "), Uo = {
+  position: "relative"
+}, Yo = {
+  position: "absolute",
+  inset: 0,
+  zIndex: 0,
+  borderRadius: "inherit",
+  "&.Mui-focusVisible, &:focus-visible": {
+    outlineOffset: -l.borders.width.focus
+  }
+}, Go = {
+  position: "relative",
+  zIndex: 1,
+  pointerEvents: "none",
+  [At]: {
+    pointerEvents: "auto"
+  }
+}, xe = { overflowX: !1, overflowY: !1 };
+function kt(e, t) {
+  return e ? {
+    overflowX: t !== "y" && e.scrollWidth > e.clientWidth,
+    overflowY: t !== "x" && e.scrollHeight > e.clientHeight
+  } : xe;
+}
+function Zo(e, t = {}) {
+  const { axis: o = "both" } = t, [n, i] = g.useState(xe), s = g.useRef(xe), a = g.useCallback(() => {
+    const c = kt(e.current, o), d = s.current;
+    (c.overflowX !== d.overflowX || c.overflowY !== d.overflowY) && (s.current = c, i(c));
+  }, [e, o]);
+  return $r(() => {
+    a();
+  }), g.useEffect(() => {
+    const c = e.current;
+    if (!c) return;
+    let d = null;
+    typeof ResizeObserver < "u" && (d = new ResizeObserver(() => a()), d.observe(c));
+    const u = () => a();
+    return window.addEventListener("resize", u), () => {
+      d?.disconnect(), window.removeEventListener("resize", u);
+    };
+  }, [e, a]), n;
+}
+const Rt = {
+  flexWrap: "wrap",
+  "& .MuiAlert-message": { flex: "1 1 12rem", minWidth: 0, overflowWrap: "anywhere" },
+  "& .MuiAlert-action": { marginInlineStart: "auto" }
+};
+function Ne(e) {
+  const t = e.activeElement;
+  return t === null || t === e.body || t === e.documentElement;
+}
+const Ko = /* @__PURE__ */ g.forwardRef(function({ message: t, error: o, focusFallbackRef: n, onRetry: i, retryLabel: s, sx: a, "aria-labelledby": c, ...d }, u) {
+  const m = Ar(), F = g.useId(), y = g.useRef(null), v = Hr(u, y), w = g.useRef(null), S = g.useRef(null), x = g.useRef(!1), I = g.useRef(n);
+  I.current = n;
+  const { focusAfterCommit: $ } = Or({
+    target: () => n?.current ?? null,
+    fallbackRef: y
+  });
+  return g.useEffect(() => {
+    const f = w.current?.textContent?.replace(/\s+/g, " ").trim() ?? "";
+    !f || f === S.current || (S.current = f, m(f, "assertive"));
+  }), g.useEffect(() => {
+    const f = y.current;
+    f && Ne(f.ownerDocument) && f.focus();
+  }, []), g.useLayoutEffect(
+    () => () => {
+      if (!x.current) return;
+      const f = y.current?.ownerDocument ?? (typeof document > "u" ? void 0 : document);
+      queueMicrotask(() => {
+        const M = I.current?.current;
+        f && M?.isConnected && Ne(f) && M.focus();
+      });
+    },
+    []
+  ), g.useEffect(() => {
+    process.env.NODE_ENV !== "production" && i && !s && kr("AsyncOutcomeAlert.retryLabel", "AsyncOutcomeAlert: `onRetry` needs `retryLabel` (the button text); the retry button is not shown without it.");
+  }, [i, s]), /* @__PURE__ */ b(
+    wr,
+    {
+      ...d,
+      ref: v,
+      severity: "error",
+      role: "group",
+      "aria-labelledby": c ?? F,
+      tabIndex: -1,
+      onFocus: (f) => {
+        x.current = !0, d.onFocus?.(f);
+      },
+      onBlur: (f) => {
+        f.currentTarget.contains(f.relatedTarget) || (x.current = !1), d.onBlur?.(f);
+      },
+      action: i && s ? /* @__PURE__ */ b(je, { color: "inherit", size: "small", onClick: () => {
+        $(), i?.();
+      }, children: s }) : void 0,
+      sx: tr(Rt, a),
+      children: /* @__PURE__ */ b(Sr, { id: F, ref: w, children: t })
+    }
+  );
+});
+function Xo(e, t) {
+  return e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((o) => (Array.from(o)[0] ?? "").toUpperCase()).join("");
+}
+function zt(e) {
+  return e.direction === "rtl";
+}
+function $t(e) {
+  return zt(e) ? -1 : 1;
+}
+function Qo(e, t) {
+  const o = -8 * $t(e);
+  return `translateX(${o === 0 ? 0 : o}px)`;
+}
+const Ht = 10, Ot = 50;
+function Dt(e, t, o, n) {
+  const i = t === "horizontal";
+  return e === "ArrowLeft" || e === "ArrowRight" ? i ? e === (o ? "ArrowLeft" : "ArrowRight") ? 1 : -1 : n ? e === "ArrowRight" ? 1 : -1 : 0 : (e === "ArrowUp" || e === "ArrowDown") && (!i || n) ? e === "ArrowDown" ? 1 : -1 : 0;
+}
+function qo(e, t) {
+  const {
+    shiftKey: o = !1,
+    orientation: n,
+    growDirection: i,
+    isRtl: s,
+    current: a,
+    min: c,
+    max: d,
+    step: u = Ht,
+    largeStep: m = Ot,
+    crossAxisKeys: F = !1
+  } = t;
+  if (e === "Home") return c;
+  if (e === "End") return d;
+  const y = Dt(e, n, s, F);
+  if (y === 0) return null;
+  const v = i === "forward" ? y : -y, w = a + v * (o ? m : u);
+  return Math.max(c, Math.min(d, w));
+}
+const Tt = (e) => e;
+function Jo(e) {
+  const {
+    initialSize: t,
+    size: o,
+    onSizeChange: n,
+    name: i = "useResizable",
+    stateName: s = "size",
+    disabled: a = !1,
+    axis: c,
+    direction: d = "forward",
+    clamp: u = Tt,
+    onResize: m,
+    onResizeStart: F,
+    onResizeEnd: y,
+    lockBodyCursor: v = !0,
+    dragCursor: w = c === "x" ? "col-resize" : "row-resize"
+  } = e, [S] = g.useState(
+    () => typeof t == "function" ? t() : t
+  ), [x, I] = Dr({
+    controlled: o,
+    default: S,
+    name: i,
+    state: s
+  }), [$, Z] = g.useState(!1), f = g.useRef(0), M = g.useRef(0), O = K((p) => u(p)), we = K((p) => m?.(p)), J = K(() => F?.()), Se = K((p) => y?.(p)), B = K((p, k) => {
+    I(p), n?.(p, k);
+  }), cr = g.useCallback(
+    (p, k = "set") => B(p, k),
+    [B]
+  ), lr = g.useCallback(
+    (p, k = "set") => B(O(p), k),
+    [B, O]
+  );
+  a && $ && Z(!1);
+  const dr = g.useCallback(
+    (p) => {
+      a || (p.preventDefault(), f.current = c === "x" ? p.clientX : p.clientY, M.current = O(x), Z(!0), J());
+    },
+    [c, x, a, O, J]
+  ), ur = g.useCallback(
+    (p) => {
+      if (a) return;
+      const k = p.touches[0];
+      k && (f.current = c === "x" ? k.clientX : k.clientY, M.current = O(x), Z(!0), J());
+    },
+    [c, x, a, O, J]
+  );
+  g.useEffect(() => {
+    if (!$) return;
+    const p = (D) => {
+      const W = D - f.current, gr = d === "reverse" ? -W : W, Re = O(M.current + gr);
+      B(Re, "drag"), we(Re);
+    }, k = (D) => {
+      p(c === "x" ? D.clientX : D.clientY);
+    }, Ee = (D) => {
+      const W = D.touches[0];
+      W && (D.preventDefault(), p(c === "x" ? W.clientX : W.clientY));
+    }, N = () => {
+      Z(!1);
+    };
+    document.addEventListener("mousemove", k), document.addEventListener("mouseup", N), document.addEventListener("touchmove", Ee, { passive: !1 }), document.addEventListener("touchend", N), document.addEventListener("touchcancel", N);
+    let Ae = "", ke = "";
+    return v && (Ae = document.body.style.cursor, ke = document.body.style.userSelect, document.body.style.cursor = w, document.body.style.userSelect = "none"), () => {
+      document.removeEventListener("mousemove", k), document.removeEventListener("mouseup", N), document.removeEventListener("touchmove", Ee), document.removeEventListener("touchend", N), document.removeEventListener("touchcancel", N), v && (document.body.style.cursor = Ae, document.body.style.userSelect = ke);
+    };
+  }, [
+    $,
+    c,
+    d,
+    v,
+    w,
+    O,
+    B,
+    we
+  ]);
+  const Ce = g.useRef(!1);
+  return g.useEffect(() => {
+    Ce.current && !$ && Se(x), Ce.current = $;
+  }, [$, x, Se]), {
+    size: x,
+    isResizing: $,
+    onMouseDown: dr,
+    onTouchStart: ur,
+    setSize: cr,
+    setSizeClamped: lr
+  };
+}
+const en = Tr, It = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable="false"])',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function rn(e) {
+  if (!e) return null;
+  for (const t of Array.from(e.querySelectorAll(It)))
+    if (t.tabIndex >= 0 && !t.closest('[inert], [aria-hidden="true"]')) return t;
+  return null;
+}
+function C(e) {
+  const t = ne[e], o = {
+    zIndex: t.zIndex,
+    boxShadow: t.shadow
+  };
+  return t.level > 0 && (o.position = "relative"), o;
+}
+const tn = {
+  /** For sunken/recessed areas like code blocks, wells */
+  sunken: () => C("ground"),
+  /** For standard cards at rest */
+  card: () => C("resting"),
+  /** For hovered/focused cards */
+  cardHover: () => C("raised"),
+  /** For dropdown menus */
+  dropdown: () => C("floating"),
+  /** For sticky headers */
+  header: () => C("sticky"),
+  /** For modal backdrops */
+  backdrop: () => C("overlay"),
+  /** For modal dialogs */
+  modal: () => C("dialog"),
+  /** For popovers */
+  popover: () => C("popover"),
+  /** For tooltips */
+  tooltip: () => C("tooltip")
+};
+function h(e, t) {
+  const n = ve[e].scale[t];
+  if (!n) return null;
+  const i = {
+    fontSize: n.size,
+    fontWeight: n.weight,
+    lineHeight: n.lineHeight
+  };
+  return "tracking" in n && (i.letterSpacing = n.tracking), "transform" in n && (i.textTransform = n.transform), i;
+}
+const Mt = {
+  // Display typography
+  heroTitle: () => h("display", "large"),
+  pageTitle: () => h("display", "medium"),
+  sectionTitle: () => h("display", "small"),
+  // Heading typography
+  h1: () => h("heading", "h1"),
+  h2: () => h("heading", "h2"),
+  h3: () => h("heading", "h3"),
+  h4: () => h("heading", "h4"),
+  h5: () => h("heading", "h5"),
+  h6: () => h("heading", "h6"),
+  // Body typography
+  bodyLarge: () => h("body", "large"),
+  body: () => h("body", "medium"),
+  bodySmall: () => h("body", "small"),
+  // Label typography
+  labelLarge: () => h("label", "large"),
+  label: () => h("label", "medium"),
+  labelSmall: () => h("label", "small"),
+  // Caption & overline
+  caption: () => h("caption", "default"),
+  captionEmphasis: () => h("caption", "emphasis"),
+  overline: () => h("overline", "default")
+};
+function Bt(e, t = "light") {
+  const o = _(e, t);
+  return Ze[e], e === "disabled" ? { color: o, opacity: 0.6 } : { color: o };
+}
+const on = {
+  /** Primary importance - CTAs, titles, critical info */
+  primary: (e = "light") => ({
+    color: _("primary", e),
+    fontWeight: 600
+  }),
+  /** Secondary importance - section headers, key info */
+  secondary: (e = "light") => ({
+    color: _("secondary", e),
+    fontWeight: 500
+  }),
+  /** Tertiary - body text, regular content */
+  tertiary: (e = "light") => ({
+    color: _("tertiary", e),
+    fontWeight: 400
+  }),
+  /** Muted - helper text, metadata */
+  muted: (e = "light") => ({
+    color: _("muted", e),
+    fontWeight: 400
+  }),
+  /** Disabled - unavailable items */
+  disabled: (e = "light") => ({
+    color: _("disabled", e),
+    fontWeight: 400,
+    opacity: 0.6,
+    cursor: "not-allowed"
+  })
+};
+function Nt(e, t) {
+  return Ur(e, t);
+}
+const z = {
+  // Micro spacing (1-2)
+  inline: E.micro[1],
+  // 4px - tight inline elements
+  inlineRelaxed: E.micro[2],
+  // 8px - comfortable inline
+  // Component spacing (3-5)
+  componentTight: E.component[3],
+  // 12px
+  component: E.component[4],
+  // 16px
+  componentRelaxed: E.component[5],
+  // 20px
+  // Section spacing (6-10)
+  sectionTight: E.section[6],
+  // 24px
+  section: E.section[8],
+  // 32px
+  sectionRelaxed: E.section[10],
+  // 40px
+  // Layout spacing (12-32)
+  layoutTight: E.layout[12],
+  // 48px
+  layout: E.layout[16],
+  // 64px
+  layoutRelaxed: E.layout[24],
+  // 96px
+  layoutHero: E.layout[32]
+  // 128px
+};
+function nn(e, t) {
+  return Math.round(e * q.sizes[t]);
+}
+function sn(e) {
+  return q.icons[e];
+}
+function an(e, t = "minimum") {
+  const o = q.touchTargets[t];
+  return Math.max(e, o);
+}
+function cn(e) {
+  const t = Xe[e], o = {};
+  return "transition" in t && (o.transition = t.transition), "opacity" in t && t.opacity !== 1 && (o.opacity = t.opacity), "transform" in t && t.transform !== "none" && (o.transform = t.transform), "outline" in t && (o.outline = t.outline, o.outlineOffset = t.outlineOffset), "cursor" in t && (o.cursor = t.cursor), "pointerEvents" in t && (o.pointerEvents = t.pointerEvents), o;
+}
+function We(e) {
+  return {
+    outline: `2px solid ${e || r.colors.navy[900]}`,
+    outlineOffset: "2px"
+  };
+}
+const ln = {
+  /** Subtle lift effect */
+  lift: {
+    transition: "transform 150ms ease-out, box-shadow 150ms ease-out",
+    "&:hover": {
+      transform: "translateY(-2px)",
+      boxShadow: ne.raised.shadow
+    }
+  },
+  /** Scale effect */
+  scale: {
+    transition: "transform 150ms ease-out",
+    "&:hover": {
+      transform: "scale(1.02)"
+    }
+  },
+  /** Highlight effect */
+  highlight: {
+    transition: "background-color 150ms ease-out",
+    "&:hover": {
+      backgroundColor: "rgba(0, 0, 0, 0.04)"
+    }
+  }
+};
+function dn(e) {
+  return Ke[e];
+}
+function un(e, t = "AA", o = !1) {
+  return t === "AAA" ? o ? e >= 4.5 : e >= 7 : o ? e >= 3 : e >= 4.5;
+}
+function gn(e) {
+  const t = {};
+  if (e.elevation && Object.assign(t, C(e.elevation)), e.attention && Object.assign(t, Bt(e.attention)), e.typography) {
+    const o = h(
+      e.typography.category,
+      e.typography.variant
+    );
+    o && Object.assign(t, o);
+  }
+  if (e.spacing) {
+    const o = Nt(e.spacing.category, e.spacing.size);
+    o && (t.gap = o);
+  }
+  return t;
+}
+const fn = {
+  /** Card with hover effect */
+  interactiveCard: () => ({
+    ...C("resting"),
+    borderRadius: 12,
+    transition: "transform 150ms ease-out, box-shadow 150ms ease-out",
+    cursor: "pointer",
+    "&:hover": {
+      ...C("raised"),
+      transform: "translateY(-2px)"
+    },
+    "&:focus-visible": We()
+  }),
+  /** Modal dialog */
+  modal: () => ({
+    ...C("dialog"),
+    borderRadius: 16,
+    padding: z.section
+  }),
+  /** Dropdown menu */
+  dropdown: () => ({
+    ...C("floating"),
+    borderRadius: 8,
+    padding: z.inline
+  }),
+  /** Tooltip */
+  tooltip: () => ({
+    ...C("tooltip"),
+    borderRadius: 6,
+    padding: `${z.inline}px ${z.inlineRelaxed}px`
+  }),
+  /** Primary button */
+  primaryButton: () => ({
+    ...Mt.label(),
+    padding: `${z.inlineRelaxed}px ${z.component}px`,
+    borderRadius: 9999,
+    fontWeight: 600,
+    transition: "all 150ms ease-out",
+    "&:hover": {
+      transform: "translateY(-1px)"
+    },
+    "&:active": {
+      transform: "scale(0.98)"
+    },
+    "&:focus-visible": We()
+  }),
+  /** Section container */
+  section: () => ({
+    paddingTop: z.section,
+    paddingBottom: z.section,
+    display: "flex",
+    flexDirection: "column",
+    gap: z.componentRelaxed
+  }),
+  /** Page container */
+  page: () => ({
+    maxWidth: 1280,
+    margin: "0 auto",
+    padding: z.section,
+    display: "flex",
+    flexDirection: "column",
+    gap: z.layout
+  })
+}, pn = {
+  foundations: "Layer 1: Raw design primitives (colors, spacing, typography scales)",
+  tokens: "Layer 2: Semantic mappings of foundations to use cases",
+  components: "Layer 3: UI component specifications",
+  hierarchy: "Layer 4: Visual hierarchy rules for consistent importance",
+  patterns: "Layer 5: Composed solutions for common UI tasks"
+}, Wt = {
+  "darkMode.colors.indicator.inProgress": ["fg", "bg", "outline"],
+  "darkMode.colors.indicator.running": ["fg", "bg", "outline"],
+  // E-43+: the dark info family sets only its fill; every catalog entry may add an outline.
+  "darkMode.colors.indicator.info": ["fg", "bg", "outline"],
+  "darkMode.colors.indicator.new": ["fg", "bg", "outline"],
+  "darkMode.colors.indicator.updated": ["fg", "bg", "outline"],
+  ...Object.fromEntries(
+    Object.keys(qe.semantic.colors.indicator ?? {}).map((e) => [
+      `semantic.colors.indicator.${e}`,
+      ["outline"]
+    ])
+  )
+}, Le = /* @__PURE__ */ new Set();
+function X(e) {
+  return e === null ? "null" : Array.isArray(e) ? "an array" : Y(e) ? "a group" : `a ${typeof e}`;
+}
+function P(e, t, o) {
+  if (process.env.NODE_ENV === "production") return;
+  const n = `${e}:${t}`;
+  Le.has(n) || (Le.add(n), console.warn(`[Trinity] Token override "${t}": ${o}`));
+}
+function Y(e) {
+  if (e === null || typeof e != "object") return !1;
+  const t = Object.getPrototypeOf(e);
+  return t === Object.prototype || t === null;
+}
+function ar(e, t, o) {
+  let n;
+  for (const i of Object.keys(t)) {
+    const s = o ? `${o}.${i}` : i, a = t[i], c = Object.prototype.hasOwnProperty.call(e, i), d = c ? e[i] : void 0;
+    if (a === void 0) {
+      P("undefined", s, "explicit undefined is ignored; omit the key to keep the default");
+      continue;
+    }
+    let u;
+    if (d === void 0)
+      !c && !Wt[o]?.includes(i) && P("unknown", s, "not a key of the token set; the value is kept but nothing reads it"), u = a;
+    else if (Y(d)) {
+      if (!Y(a)) {
+        P("type", s, `expected a group, got ${X(a)}; the override is ignored`);
+        continue;
+      }
+      u = ar(d, a, s);
+    } else if (Array.isArray(d)) {
+      if (!Array.isArray(a)) {
+        P("type", s, `expected an array, got ${X(a)}; the override is ignored`);
+        continue;
+      }
+      u = a;
+    } else if (typeof a != typeof d) {
+      P("type", s, `expected ${X(d)}, got ${X(a)}; the override is ignored`);
+      continue;
+    } else
+      u = a;
+    u !== d && (n ?? (n = { ...e }), n[i] = u);
+  }
+  return n ?? e;
+}
+function Lt(e, t) {
+  return t == null ? e : Y(t) ? ar(e, t, "") : (P("type", "(root)", `expected a token group, got ${X(t)}; the overrides are ignored`), e);
+}
+function _e(e, t) {
+  let o = e;
+  for (const n of t) {
+    if (!Y(o) || !Object.prototype.hasOwnProperty.call(o, n)) return !1;
+    o = o[n];
+  }
+  return o !== void 0;
+}
+function re(e, t) {
+  let o = e;
+  for (const n of t) {
+    if (!Y(o)) return;
+    o = o[n];
+  }
+  return o;
+}
+function Fe(e, t, o) {
+  const [n, ...i] = t, s = e, a = i.length === 0 ? o : Fe(s[n], i, o);
+  return a === s[n] ? e : { ...s, [n]: a };
+}
+const Q = (e) => ["semantic", "colors", ...e.split(".")], Pe = (e) => ["darkMode", "colors", ...e.split(".")];
+function _t() {
+  return [
+    ...Je.map(
+      ([e, t]) => [["component", ...e.split(".")], Q(t)]
+    ),
+    ...ie.map(([e, t]) => [Q(e), Q(t)]),
+    ...fe.map(([e, t]) => [Pe(e), Pe(t)])
+  ];
+}
+function mn(e) {
+  const t = qe;
+  if (e == null || e === t) return t;
+  let o = Lt(t, e);
+  if (o === t) return t;
+  for (const [n, i] of _t()) {
+    if (_e(e, n)) continue;
+    const s = re(o, i), a = re(o, n);
+    typeof s != "string" || typeof a != "string" || s !== a && (o = Fe(o, n, s));
+  }
+  for (const [n, i, s] of nt) {
+    const a = Q(n);
+    if (_e(e, a)) continue;
+    const c = re(o, Q(i)), d = re(o, a);
+    if (typeof c != "string" || typeof d != "string") continue;
+    const u = A(c, s);
+    u !== d && (o = Fe(o, a, u));
+  }
+  return o;
+}
+function Pt(e) {
+  const t = e.contentBoxSize, o = Array.isArray(t) ? t[0] : t;
+  return o && typeof o.inlineSize == "number" ? o.inlineSize : e.contentRect.width;
+}
+function bn(e = {}) {
+  const { enabled: t = !0 } = e, [o, n] = g.useState(null), [i, s] = g.useState(null);
+  return g.useEffect(() => {
+    if (!t || !o || typeof ResizeObserver > "u") return;
+    const c = new ResizeObserver((d) => {
+      const u = d[d.length - 1];
+      if (!u) return;
+      const m = Pt(u);
+      s((F) => F && F.node === o && F.size === m ? F : { node: o, size: m });
+    });
+    return c.observe(o), () => c.disconnect();
+  }, [t, o]), [t && typeof ResizeObserver < "u" && o && i?.node === o ? i.size : null, n];
+}
+export {
+  oo as $,
+  vt as A,
+  Po as B,
+  _o as C,
+  Vo as D,
+  xt as E,
+  Eo as F,
+  Co as G,
+  Zo as H,
+  Yo as I,
+  Go as J,
+  Uo as K,
+  ko as L,
+  he as M,
+  fo as N,
+  Ko as O,
+  Xo as P,
+  or as Q,
+  nr as R,
+  A as S,
+  ao as T,
+  Qo as U,
+  zt as V,
+  Jo as W,
+  qo as X,
+  jo as Y,
+  qe as Z,
+  mn as _,
+  co as a,
+  no as a0,
+  ve as a1,
+  Bo as a2,
+  To as a3,
+  ot as a4,
+  bo as a5,
+  Fo as a6,
+  xo as a7,
+  So as a8,
+  ho as a9,
+  C as aA,
+  We as aB,
+  sn as aC,
+  cn as aD,
+  nn as aE,
+  Nt as aF,
+  h as aG,
+  ln as aH,
+  un as aI,
+  z as aJ,
+  Mt as aK,
+  tn as aL,
+  fn as aM,
+  Zr as aN,
+  io as aO,
+  wo as aa,
+  No as ab,
+  $o as ac,
+  Do as ad,
+  Ho as ae,
+  Oo as af,
+  Ze as ag,
+  Ke as ah,
+  ne as ai,
+  _ as aj,
+  ro as ak,
+  Ur as al,
+  to as am,
+  Kr as an,
+  Xe as ao,
+  q as ap,
+  E as aq,
+  en as ar,
+  rn as as,
+  bn as at,
+  gn as au,
+  pn as av,
+  on as aw,
+  an as ax,
+  Bt as ay,
+  dn as az,
+  j as b,
+  lo as c,
+  uo as d,
+  go as e,
+  po as f,
+  jr as g,
+  so as h,
+  r as i,
+  Gr as j,
+  at as k,
+  st as l,
+  vo as m,
+  mo as n,
+  zo as o,
+  Ao as p,
+  ct as q,
+  yo as r,
+  l as s,
+  tr as t,
+  Io as u,
+  ir as v,
+  Lo as w,
+  Ro as x,
+  Wo as y,
+  Mo as z
+};