@theokit/ui 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -7,6 +7,68 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.14.0] - 2026-06-03
+
+**Minor (additive — full backward-compat preserved via legacy helpers).**
+
+Community best practices alignment cohort. Migrates `@theokit/ui` from HSL split to OKLCH as the canonical color format, introduces status semantic tokens, two new composites (StatusIndicator + MetricCard), a lint rule banning literal Tailwind color classes in components, `prefers-color-scheme` auto-detect, forced-colors (Windows High Contrast Mode) support, and a Playwright visual regression baseline. All 6 ADRs (0004-0009), full migration guide, and 5 new test files shipped. WCAG AA preserved across 10 themes × 2 modes. `classic-paper` rebalanced to visibly warm cream (per Vintage Paper + Anthropic Claude UI references) for reduced vision fatigue on long agent sessions.
+
+See [docs/migration/hsl-to-oklch.md](docs/migration/hsl-to-oklch.md) for the full upgrade guide.
+
+### Added — Community Best Practices Alignment (2026-06-03)
+
+- **Status semantic token group** (ADR-0007). New `ColorScale` keys
+  `--status-online`, `--status-offline`, `--status-degraded`, `--status-info`
+  plus foreground companions — 8 keys × 11 themes. Separates operational state
+  (gateway alive/dead/slow/info) from action-result (success/destructive/warning/info).
+- **`StatusIndicator` composite** consuming the status group. API:
+  `<StatusIndicator status="online" label="Connected" pulse?>`.
+- **`MetricCard` composite** for dashboard tiles. API:
+  `<MetricCard title value delta={{value,trend}} hint? icon? invertTrend? />`.
+  `invertTrend` flips trend semantics for cost/churn/latency metrics (EC-17).
+- **`respectSystemMode` prop** on `<ThemeProvider>` (default `true`, ADR-0009).
+  Reads `(prefers-color-scheme: dark)` on hydration and subscribes to OS changes.
+  User-driven `setMode()` overrides the system signal. `matchMedia` listener
+  cleanup on unmount (EC-12).
+- **`forced-colors` media query** in `tokens.css` (ADR-0008). Maps semantic
+  tokens to system colors (Canvas, CanvasText, Highlight, ...) for Windows
+  High Contrast Mode. WCAG 2.2 SC 1.4.1/1.4.3.
+- **Container query sizes** (`--container-3xs` through `--container-7xl`)
+  declared in `tokens-v4.css` for Tailwind v4 `@container` variants.
+- **Algorithmic tonal derivations** for `--primary-deep`, `--primary-glow`,
+  `--accent-deep` via OKLCH relative-color syntax with `max()`/`min()`
+  anti-overflow clamps (ADR-0006, EC-7).
+- **Lint rule scanner** `scripts/lib/literal-color-scanner.ts` blocks literal
+  Tailwind color classes in `src/components/**/*.tsx`. Wired into
+  `pnpm quality:structure` (ADR-0004). 14 unit tests.
+- **Valibot theme schema** `src/themes/schema.ts` (D5 revised — Valibot
+  ~1.5KB gzipped vs Zod ~12KB).
+- **OKLCH `color-value-pattern.ts`** extracted from `theme-provider.tsx`.
+  Accepts plain OKLCH, relative-color syntax (EC-5), HSL split, hex, var().
+
+### Changed — Community Best Practices Alignment (2026-06-03)
+
+- **All 11 built-in themes migrated from HSL split to OKLCH** (ADR-0005).
+  638 values converted via `scripts/migrate-themes-to-oklch.ts`. Round-trip
+  delta ~0.001 L per value (visually equivalent, < 0.5% pixel diff).
+  Legacy HSL split format still accepted by the runtime validator.
+- **`tokens-v4.css` aliases** drop `hsl()` wrapper —
+  `--color-primary: var(--primary)` direct.
+- **`tokens.css` shadows + texture utilities** use
+  `color-mix(in oklch, var(--x) N%, transparent)` for alpha composition.
+- **`hex()` and `rgb()` helpers** now return `oklch(L C H)` strings (T2.6).
+- **`gateway-status-indicator`, `run-status-pill`, `update-banner`,
+  `stability-bundle-viewer`** swept of 12 literal Tailwind color classes
+  → semantic tokens. Closes hidden theme-switching bug.
+- **`primary-deep` / `primary-glow` / `accent-deep`** are now `optional`
+  in `ColorScale`. CSS auto-derives via `oklch(from ...)` when omitted.
+- **`validateThemeContrast`** accepts both HSL split and OKLCH input.
+
+### Deprecated — Community Best Practices Alignment
+
+- **`hexToHsl(input)`** and **`rgbToHslLegacy(r, g, b)`** — use `hex()` /
+  `rgb()` (OKLCH output) instead. Removal scheduled for next major.
+
 ## [0.13.0] - 2026-05-29
 
 **Minor (additive only — zero breaking changes).**

package/README.md

@@ -13,8 +13,8 @@ A React component library built for AI agent surfaces and cloud dashboards. **10
 <!-- BEGIN:counts -->
 [![license](https://img.shields.io/badge/license-Apache--2.0-7C3AED?style=flat-square)](./LICENSE)
 [![react](https://img.shields.io/badge/react-18+-7C3AED?style=flat-square&logo=react&logoColor=white)](https://react.dev)
-[![tests](https://img.shields.io/badge/tests-1384%20passing-success?style=flat-square)](#quality-gates)
-[![components](https://img.shields.io/badge/components-147-7C3AED?style=flat-square)](#component-catalog)
+[![tests](https://img.shields.io/badge/tests-1466%20passing-success?style=flat-square)](#quality-gates)
+[![components](https://img.shields.io/badge/components-149-7C3AED?style=flat-square)](#component-catalog)
 [![shadcn](https://img.shields.io/badge/shadcn-compatible-000?style=flat-square)](https://ui.shadcn.com/docs/registry)
 <!-- END:counts -->
 
@@ -143,7 +143,7 @@ The skill lives at [`skills/theo-ui/`](./skills/theo-ui/) and is installable via
 ## Component catalog
 
 <!-- BEGIN:component-catalog-intro -->
-**147 components**, organized by mechanical rule: a *primitive* imports no other `@theokit/ui` component; a *composite* does.
+**149 components**, organized by mechanical rule: a *primitive* imports no other `@theokit/ui` component; a *composite* does.
 <!-- END:component-catalog-intro -->
 
 <details>
@@ -178,12 +178,12 @@ The skill lives at [`skills/theo-ui/`](./skills/theo-ui/) and is installable via
 <details>
 <summary>
 <!-- BEGIN:composites-count -->
-**Composites** (48) — assembled flows
+**Composites** (50) — assembled flows
 <!-- END:composites-count -->
 </summary>
 
 <!-- BEGIN:composites -->
-`AccountMenu` · `AgentComposer` · `AgentEditor` · `AgentStream` · `AgentTimeline` · `ApprovalCard` · `ChatComposer` · `ChatMessage` · `ChatMessageAction` · `ChatMessageActions` · `ChatMessageBranch` · `ChatMessageBranchContent` · `ChatMessageBranchNext` · `ChatMessageBranchPage` · `ChatMessageBranchPrevious` · `ChatMessageBranchSelector` · `ChatMessageContent` · `ChatMessageResponse` · `ChatMessageRoot` · `ChatMessageToolbar` · `CodeBlock` · `CommandPalette` · `ConfirmDialog` · `CronJobsList` · `DataPart` · `DataTable` · `DeploymentRow` · `DomainConfig` · `EnvVarEditor` · `FilePart` · `MCPServerList` · `PageShell` · `PermissionModal` · `PreviewEnvCard` · `PreviewPanel` · `ProjectCard` · `ReasoningPart` · `RollbackUI` · `RuleEditor` · `SkillEditor` · `SkillsList` · `SourceDocumentPart` · `SourceUrlPart` · `StabilityBundleViewer` · `TaskHeader` · `TextPart` · `ToolCallPart` · `UsageMeter`
+`AccountMenu` · `AgentComposer` · `AgentEditor` · `AgentStream` · `AgentTimeline` · `ApprovalCard` · `ChatComposer` · `ChatMessage` · `ChatMessageAction` · `ChatMessageActions` · `ChatMessageBranch` · `ChatMessageBranchContent` · `ChatMessageBranchNext` · `ChatMessageBranchPage` · `ChatMessageBranchPrevious` · `ChatMessageBranchSelector` · `ChatMessageContent` · `ChatMessageResponse` · `ChatMessageRoot` · `ChatMessageToolbar` · `CodeBlock` · `CommandPalette` · `ConfirmDialog` · `CronJobsList` · `DataPart` · `DataTable` · `DeploymentRow` · `DomainConfig` · `EnvVarEditor` · `FilePart` · `MCPServerList` · `MetricCard` · `PageShell` · `PermissionModal` · `PreviewEnvCard` · `PreviewPanel` · `ProjectCard` · `ReasoningPart` · `RollbackUI` · `RuleEditor` · `SkillEditor` · `SkillsList` · `SourceDocumentPart` · `SourceUrlPart` · `StabilityBundleViewer` · `StatusIndicator` · `TaskHeader` · `TextPart` · `ToolCallPart` · `UsageMeter`
 <!-- END:composites -->
 
 </details>

package/dist/chunk-DMVWZWU5.js

@@ -0,0 +1,62 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DOT_COLOR = {
+  online: "bg-status-online",
+  offline: "bg-status-offline",
+  degraded: "bg-status-degraded",
+  info: "bg-status-info"
+};
+var LABEL_COLOR = {
+  online: "text-foreground",
+  offline: "text-foreground",
+  degraded: "text-foreground",
+  info: "text-foreground"
+};
+var ARIA_LABEL = {
+  online: "Online",
+  offline: "Offline",
+  degraded: "Degraded",
+  info: "Information"
+};
+var SIZE_DOT = {
+  sm: "size-2",
+  md: "size-2.5"
+};
+var StatusIndicator = forwardRef(
+  ({ status, label, size = "sm", pulse = false, className, "aria-label": ariaLabel, ...rest }, ref) => {
+    const accessibleLabel = label ?? ariaLabel ?? ARIA_LABEL[status];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        role: "img",
+        "aria-label": accessibleLabel,
+        className: cn("inline-flex items-center gap-2 font-medium text-xs", className),
+        "data-status": status,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-block rounded-full",
+                SIZE_DOT[size],
+                DOT_COLOR[status],
+                pulse && "animate-pulse"
+              ),
+              "aria-hidden": true
+            }
+          ),
+          label !== void 0 && /* @__PURE__ */ jsx("span", { className: LABEL_COLOR[status], children: label })
+        ]
+      }
+    );
+  }
+);
+StatusIndicator.displayName = "StatusIndicator";
+
+export { StatusIndicator };
+//# sourceMappingURL=chunk-DMVWZWU5.js.map
+//# sourceMappingURL=chunk-DMVWZWU5.js.map

package/dist/chunk-DMVWZWU5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/status-indicator/status-indicator.tsx"],"names":[],"mappings":";;;;AAoCA,IAAM,SAAA,GAAiD;AAAA,EACrD,MAAA,EAAQ,kBAAA;AAAA,EACR,OAAA,EAAS,mBAAA;AAAA,EACT,QAAA,EAAU,oBAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,WAAA,GAAmD;AAAA,EACvD,MAAA,EAAQ,iBAAA;AAAA,EACR,OAAA,EAAS,iBAAA;AAAA,EACT,QAAA,EAAU,iBAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,UAAA,GAAkD;AAAA,EACtD,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,QAAA,EAAU,UAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,QAAA,GAAgD;AAAA,EACpD,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,IAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,CACE,EAAE,MAAA,EAAQ,KAAA,EAAO,OAAO,IAAA,EAAM,KAAA,GAAQ,KAAA,EAAO,SAAA,EAAW,YAAA,EAAc,SAAA,EAAW,GAAG,IAAA,IACpF,GAAA,KACG;AACH,IAAA,MAAM,eAAA,GAAkB,KAAA,IAAS,SAAA,IAAa,UAAA,CAAW,MAAM,CAAA;AAC/D,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,KAAA;AAAA,QACL,YAAA,EAAY,eAAA;AAAA,QACZ,SAAA,EAAW,EAAA,CAAG,oDAAA,EAAsD,SAAS,CAAA;AAAA,QAC7E,aAAA,EAAa,MAAA;AAAA,QACZ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,2BAAA;AAAA,gBACA,SAAS,IAAI,CAAA;AAAA,gBACb,UAAU,MAAM,CAAA;AAAA,gBAChB,KAAA,IAAS;AAAA,eACX;AAAA,cACA,aAAA,EAAW;AAAA;AAAA,WACb;AAAA,UACC,KAAA,KAAU,0BAAa,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,WAAA,CAAY,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KACvE;AAAA,EAEJ;AACF;AACA,eAAA,CAAgB,WAAA,GAAc,iBAAA","file":"chunk-DMVWZWU5.js","sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * StatusIndicator — semantic operational-state indicator (composite).\n *\n * Consumes the `--status-online` / `--status-offline` / `--status-degraded`\n * / `--status-info` token group (ADR-0007). Statuses describe component\n * liveness (alive/dead/slow/info-flag), distinct from action-result\n * semantics (success/destructive/warning/info — see `StatusDot` primitive).\n *\n * Hierarchy invariant (T4.1): this composite consumes primitives via\n * Tailwind tokens (`bg-status-*`), never imports another composite. The\n * `StatusDot` primitive remains as a separate, more generic API.\n *\n * @example\n *   <StatusIndicator status=\"online\" />\n *   <StatusIndicator status=\"degraded\" label=\"Slow\" />\n *   <StatusIndicator status=\"offline\" label=\"Disconnected\" size=\"md\" />\n */\n\nexport type StatusIndicatorKind = \"online\" | \"offline\" | \"degraded\" | \"info\";\nexport type StatusIndicatorSize = \"sm\" | \"md\";\n\nexport interface StatusIndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Operational state to convey. Maps to `--status-{kind}`. */\n  status: StatusIndicatorKind;\n  /** Optional inline label to the right of the dot. */\n  label?: string;\n  /** Size of the dot. Default `sm` (8px). */\n  size?: StatusIndicatorSize;\n  /** When true, pulses the dot to draw attention (e.g., live state). */\n  pulse?: boolean;\n}\n\nconst DOT_COLOR: Record<StatusIndicatorKind, string> = {\n  online: \"bg-status-online\",\n  offline: \"bg-status-offline\",\n  degraded: \"bg-status-degraded\",\n  info: \"bg-status-info\",\n};\n\nconst LABEL_COLOR: Record<StatusIndicatorKind, string> = {\n  online: \"text-foreground\",\n  offline: \"text-foreground\",\n  degraded: \"text-foreground\",\n  info: \"text-foreground\",\n};\n\nconst ARIA_LABEL: Record<StatusIndicatorKind, string> = {\n  online: \"Online\",\n  offline: \"Offline\",\n  degraded: \"Degraded\",\n  info: \"Information\",\n};\n\nconst SIZE_DOT: Record<StatusIndicatorSize, string> = {\n  sm: \"size-2\",\n  md: \"size-2.5\",\n};\n\nexport const StatusIndicator = forwardRef<HTMLSpanElement, StatusIndicatorProps>(\n  (\n    { status, label, size = \"sm\", pulse = false, className, \"aria-label\": ariaLabel, ...rest },\n    ref,\n  ) => {\n    const accessibleLabel = label ?? ariaLabel ?? ARIA_LABEL[status];\n    return (\n      <span\n        ref={ref}\n        role=\"img\"\n        aria-label={accessibleLabel}\n        className={cn(\"inline-flex items-center gap-2 font-medium text-xs\", className)}\n        data-status={status}\n        {...rest}\n      >\n        <span\n          className={cn(\n            \"inline-block rounded-full\",\n            SIZE_DOT[size],\n            DOT_COLOR[status],\n            pulse && \"animate-pulse\",\n          )}\n          aria-hidden\n        />\n        {label !== undefined && <span className={LABEL_COLOR[status]}>{label}</span>}\n      </span>\n    );\n  },\n);\nStatusIndicator.displayName = \"StatusIndicator\";\n"]}

package/dist/{chunk-M6JIC5PU.js → chunk-ETMMPUFO.js}

@@ -22,7 +22,7 @@ var UpdateBanner = forwardRef(
         "aria-live": "polite",
         className: cn(
           "flex items-center justify-between gap-3 border-b px-4 py-2 text-sm",
-          severity === "warn" ? "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300" : "border-primary/40 bg-primary/10 text-primary",
+          severity === "warn" ? "border-warning/40 bg-warning/10 text-warning" : "border-primary/40 bg-primary/10 text-primary",
           className
         ),
         "data-testid": dataTestId ?? "update-banner",
@@ -77,5 +77,5 @@ var UpdateBanner = forwardRef(
 UpdateBanner.displayName = "UpdateBanner";
 
 export { UpdateBanner };
-//# sourceMappingURL=chunk-M6JIC5PU.js.map
-//# sourceMappingURL=chunk-M6JIC5PU.js.map
+//# sourceMappingURL=chunk-ETMMPUFO.js.map
+//# sourceMappingURL=chunk-ETMMPUFO.js.map

package/dist/{chunk-M6JIC5PU.js.map → chunk-ETMMPUFO.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/update-banner/update-banner.tsx"],"names":[],"mappings":";;;;;AAqBO,IAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,MAAA;AAAA,IACX,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,oEAAA;AAAA,UACA,QAAA,KAAa,SACT,wEAAA,GACA,8CAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,eAAa,UAAA,IAAc,eAAA;AAAA,QAC3B,eAAA,EAAe,QAAA;AAAA,QACd,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,QAAA,EAAS,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,iCAC7C,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,cAAA,oBAAA;AAAA,8BACc,IAAA,CAAC,QAAA,EAAA,EAAO,aAAA,EAAY,sBAAA,EAAuB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAE;AAAA,eAAA,EAAc,CAAA;AAAA,cAAU,GAAA;AAAA,cAAI,WAAA;AAAA,8BAClF,IAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,uBAAA,EAAwB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAE;AAAA,eAAA,EAAe,CAAA;AAAA,cAAO;AAAA,aAAA,EAC7E;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,QAAA;AAAA,gBACT,SAAA,EAAU,oFAAA;AAAA,gBACV,aAAA,EAAY,6BAAA;AAAA,gBACb,QAAA,EAAA;AAAA;AAAA,aAED;AAAA,YACC,cAAc,MAAA,oBACb,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAU,oCAAA;AAAA,gBACV,YAAA,EAAW,uBAAA;AAAA,gBACX,aAAA,EAAY,uBAAA;AAAA,gBAEZ,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC;AAAA;AAAA;AACpC,WAAA,EAEJ;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-M6JIC5PU.js","sourcesContent":["import { ArrowUpCircle, X } from \"lucide-react\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * UpdateBanner — top-of-app alert when a newer version is available.\n *\n * Controlled. Dismiss persistence (localStorage/cookie/etc) is the consumer's\n * responsibility (per EC-16 DOCUMENT). Component just fires `onDismiss`.\n */\n\nexport interface UpdateBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  currentVersion: string;\n  latestVersion: string;\n  onUpdate: () => void;\n  onDismiss?: () => void;\n  severity?: \"info\" | \"warn\";\n  \"data-testid\"?: string;\n}\n\nexport const UpdateBanner = forwardRef<HTMLDivElement, UpdateBannerProps>(\n  (\n    {\n      currentVersion,\n      latestVersion,\n      onUpdate,\n      onDismiss,\n      severity = \"info\",\n      className,\n      \"data-testid\": dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        aria-live=\"polite\"\n        className={cn(\n          \"flex items-center justify-between gap-3 border-b px-4 py-2 text-sm\",\n          severity === \"warn\"\n            ? \"border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300\"\n            : \"border-primary/40 bg-primary/10 text-primary\",\n          className,\n        )}\n        data-testid={dataTestId ?? \"update-banner\"}\n        data-severity={severity}\n        {...rest}\n      >\n        <div className=\"flex items-center gap-2\">\n          <ArrowUpCircle className=\"size-4\" aria-hidden />\n          <span>\n            Update available: <strong data-testid=\"update-banner-latest\">v{latestVersion}</strong>{\" \"}\n            (running <span data-testid=\"update-banner-current\">v{currentVersion}</span>).\n          </span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={onUpdate}\n            className=\"rounded-md border border-current px-2 py-1 font-medium text-xs hover:bg-current/10\"\n            data-testid=\"update-banner-update-button\"\n          >\n            Update now\n          </button>\n          {onDismiss !== undefined && (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className=\"rounded-md p-1 hover:bg-current/10\"\n              aria-label=\"Dismiss update banner\"\n              data-testid=\"update-banner-dismiss\"\n            >\n              <X className=\"size-4\" aria-hidden />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nUpdateBanner.displayName = \"UpdateBanner\";\n"]}
+{"version":3,"sources":["../src/components/primitives/update-banner/update-banner.tsx"],"names":[],"mappings":";;;;;AAqBO,IAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,MAAA;AAAA,IACX,SAAA;AAAA,IACA,aAAA,EAAe,UAAA;AAAA,IACf,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,oEAAA;AAAA,UACA,QAAA,KAAa,SACT,8CAAA,GACA,8CAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,eAAa,UAAA,IAAc,eAAA;AAAA,QAC3B,eAAA,EAAe,QAAA;AAAA,QACd,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,QAAA,EAAS,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,iCAC7C,MAAA,EAAA,EAAK,QAAA,EAAA;AAAA,cAAA,oBAAA;AAAA,8BACc,IAAA,CAAC,QAAA,EAAA,EAAO,aAAA,EAAY,sBAAA,EAAuB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAE;AAAA,eAAA,EAAc,CAAA;AAAA,cAAU,GAAA;AAAA,cAAI,WAAA;AAAA,8BAClF,IAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,uBAAA,EAAwB,QAAA,EAAA;AAAA,gBAAA,GAAA;AAAA,gBAAE;AAAA,eAAA,EAAe,CAAA;AAAA,cAAO;AAAA,aAAA,EAC7E;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,QAAA;AAAA,gBACT,SAAA,EAAU,oFAAA;AAAA,gBACV,aAAA,EAAY,6BAAA;AAAA,gBACb,QAAA,EAAA;AAAA;AAAA,aAED;AAAA,YACC,cAAc,MAAA,oBACb,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAU,oCAAA;AAAA,gBACV,YAAA,EAAW,uBAAA;AAAA,gBACX,aAAA,EAAY,uBAAA;AAAA,gBAEZ,QAAA,kBAAA,GAAA,CAAC,CAAA,EAAA,EAAE,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC;AAAA;AAAA;AACpC,WAAA,EAEJ;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-ETMMPUFO.js","sourcesContent":["import { ArrowUpCircle, X } from \"lucide-react\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * UpdateBanner — top-of-app alert when a newer version is available.\n *\n * Controlled. Dismiss persistence (localStorage/cookie/etc) is the consumer's\n * responsibility (per EC-16 DOCUMENT). Component just fires `onDismiss`.\n */\n\nexport interface UpdateBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  currentVersion: string;\n  latestVersion: string;\n  onUpdate: () => void;\n  onDismiss?: () => void;\n  severity?: \"info\" | \"warn\";\n  \"data-testid\"?: string;\n}\n\nexport const UpdateBanner = forwardRef<HTMLDivElement, UpdateBannerProps>(\n  (\n    {\n      currentVersion,\n      latestVersion,\n      onUpdate,\n      onDismiss,\n      severity = \"info\",\n      className,\n      \"data-testid\": dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        aria-live=\"polite\"\n        className={cn(\n          \"flex items-center justify-between gap-3 border-b px-4 py-2 text-sm\",\n          severity === \"warn\"\n            ? \"border-warning/40 bg-warning/10 text-warning\"\n            : \"border-primary/40 bg-primary/10 text-primary\",\n          className,\n        )}\n        data-testid={dataTestId ?? \"update-banner\"}\n        data-severity={severity}\n        {...rest}\n      >\n        <div className=\"flex items-center gap-2\">\n          <ArrowUpCircle className=\"size-4\" aria-hidden />\n          <span>\n            Update available: <strong data-testid=\"update-banner-latest\">v{latestVersion}</strong>{\" \"}\n            (running <span data-testid=\"update-banner-current\">v{currentVersion}</span>).\n          </span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={onUpdate}\n            className=\"rounded-md border border-current px-2 py-1 font-medium text-xs hover:bg-current/10\"\n            data-testid=\"update-banner-update-button\"\n          >\n            Update now\n          </button>\n          {onDismiss !== undefined && (\n            <button\n              type=\"button\"\n              onClick={onDismiss}\n              className=\"rounded-md p-1 hover:bg-current/10\"\n              aria-label=\"Dismiss update banner\"\n              data-testid=\"update-banner-dismiss\"\n            >\n              <X className=\"size-4\" aria-hidden />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nUpdateBanner.displayName = \"UpdateBanner\";\n"]}

package/dist/{chunk-VT7VSYH5.js → chunk-KE773ODY.js}

@@ -18,7 +18,7 @@ var STATUS_META = {
   finished: {
     icon: CheckCircle2,
     label: "Done",
-    className: "border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+    className: "border-success/40 bg-success/10 text-success"
   },
   error: {
     icon: AlertCircle,
@@ -33,7 +33,7 @@ var STATUS_META = {
   interrupted: {
     icon: PauseCircle,
     label: "Interrupted",
-    className: "border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400"
+    className: "border-warning/40 bg-warning/10 text-warning"
   }
 };
 var RunStatusPill = forwardRef(
@@ -69,5 +69,5 @@ var RunStatusPill = forwardRef(
 RunStatusPill.displayName = "RunStatusPill";
 
 export { RunStatusPill };
-//# sourceMappingURL=chunk-VT7VSYH5.js.map
-//# sourceMappingURL=chunk-VT7VSYH5.js.map
+//# sourceMappingURL=chunk-KE773ODY.js.map
+//# sourceMappingURL=chunk-KE773ODY.js.map

package/dist/{chunk-VT7VSYH5.js.map → chunk-KE773ODY.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/run-status-pill/run-status-pill.tsx"],"names":[],"mappings":";;;;;AAwCA,IAAM,WAAA,GAA6C;AAAA,EACjD,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO,QAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,WAAA,EAAa;AAAA,IACX,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO,aAAA;AAAA,IACP,SAAA,EAAW,8CAAA;AAAA,IACX,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,YAAA;AAAA,IACN,KAAA,EAAO,MAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,WAAA;AAAA,IACN,KAAA,EAAO,OAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO,WAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,WAAA,EAAa;AAAA,IACX,IAAA,EAAM,WAAA;AAAA,IACN,KAAA,EAAO,aAAA;AAAA,IACP,SAAA,EAAW;AAAA;AAEf,CAAA;AAEO,IAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CAAC,EAAE,MAAA,EAAQ,MAAA,EAAQ,SAAA,EAAW,eAAe,UAAA,EAAY,GAAG,IAAA,EAAK,EAAG,GAAA,KAAQ;AAC1E,IAAA,MAAM,IAAA,GAAO,YAAY,MAAM,CAAA;AAC/B,IAAA,MAAM,OAAO,IAAA,CAAK,IAAA;AAClB,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QAEA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,sFAAA;AAAA,UACA,IAAA,CAAK,SAAA;AAAA,UACL;AAAA,SACF;AAAA,QACA,eAAa,UAAA,IAAc,iBAAA;AAAA,QAC3B,aAAA,EAAa,MAAA;AAAA,QACZ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAW,EAAA,CAAG,QAAA,EAAU,KAAK,IAAA,IAAQ,cAAc,CAAA,EAAG,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,0BACxE,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,UACjB,MAAA,KAAW,MAAA,IAAa,MAAA,CAAO,MAAA,GAAS,CAAA,yBACtC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB,aAAA,EAAY,mBAAA,EACjD,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,YACA;AAAA,WAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AACA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-VT7VSYH5.js","sourcesContent":["import {\n  AlertCircle,\n  CheckCircle2,\n  Clock,\n  Loader2,\n  type LucideIcon,\n  PauseCircle,\n  XCircle,\n} from \"lucide-react\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * RunStatusPill — compact status indicator for Run/Task lifecycle states.\n * Mirrors OpenClaw's `Run status: In progress | Done | Interrupted` pill.\n * Closed enum mirrors SDK `Task` state (D362).\n */\n\nexport type RunStatus =\n  | \"queued\"\n  | \"in_progress\"\n  | \"finished\"\n  | \"error\"\n  | \"cancelled\"\n  | \"interrupted\";\n\nexport interface RunStatusPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"title\"> {\n  status: RunStatus;\n  detail?: string;\n  \"data-testid\"?: string;\n}\n\ninterface StatusMeta {\n  icon: LucideIcon;\n  label: string;\n  className: string;\n  spin?: boolean;\n}\n\nconst STATUS_META: Record<RunStatus, StatusMeta> = {\n  queued: {\n    icon: Clock,\n    label: \"Queued\",\n    className: \"border-border bg-muted text-muted-foreground\",\n  },\n  in_progress: {\n    icon: Loader2,\n    label: \"In progress\",\n    className: \"border-primary/40 bg-primary/10 text-primary\",\n    spin: true,\n  },\n  finished: {\n    icon: CheckCircle2,\n    label: \"Done\",\n    className: \"border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\",\n  },\n  error: {\n    icon: AlertCircle,\n    label: \"Error\",\n    className: \"border-destructive/40 bg-destructive/10 text-destructive\",\n  },\n  cancelled: {\n    icon: XCircle,\n    label: \"Cancelled\",\n    className: \"border-border bg-muted text-muted-foreground\",\n  },\n  interrupted: {\n    icon: PauseCircle,\n    label: \"Interrupted\",\n    className: \"border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400\",\n  },\n};\n\nexport const RunStatusPill = forwardRef<HTMLSpanElement, RunStatusPillProps>(\n  ({ status, detail, className, \"data-testid\": dataTestId, ...rest }, ref) => {\n    const meta = STATUS_META[status];\n    const Icon = meta.icon;\n    return (\n      <span\n        ref={ref}\n        // biome-ignore lint/a11y/useSemanticElements: inline status badge — <span role=\"status\"> keeps it phrasing-content compatible inside chat headers and table cells, where the implicit <output> placement would break layout\n        role=\"status\"\n        aria-live=\"polite\"\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 font-medium text-xs\",\n          meta.className,\n          className,\n        )}\n        data-testid={dataTestId ?? \"run-status-pill\"}\n        data-status={status}\n        {...rest}\n      >\n        <Icon className={cn(\"size-3\", meta.spin && \"animate-spin\")} aria-hidden />\n        <span>{meta.label}</span>\n        {detail !== undefined && detail.length > 0 && (\n          <span className=\"text-muted-foreground\" data-testid=\"run-status-detail\">\n            {\" · \"}\n            {detail}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\nRunStatusPill.displayName = \"RunStatusPill\";\n"]}
+{"version":3,"sources":["../src/components/primitives/run-status-pill/run-status-pill.tsx"],"names":[],"mappings":";;;;;AAwCA,IAAM,WAAA,GAA6C;AAAA,EACjD,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO,QAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,WAAA,EAAa;AAAA,IACX,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO,aAAA;AAAA,IACP,SAAA,EAAW,8CAAA;AAAA,IACX,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,YAAA;AAAA,IACN,KAAA,EAAO,MAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,WAAA;AAAA,IACN,KAAA,EAAO,OAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO,WAAA;AAAA,IACP,SAAA,EAAW;AAAA,GACb;AAAA,EACA,WAAA,EAAa;AAAA,IACX,IAAA,EAAM,WAAA;AAAA,IACN,KAAA,EAAO,aAAA;AAAA,IACP,SAAA,EAAW;AAAA;AAEf,CAAA;AAEO,IAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CAAC,EAAE,MAAA,EAAQ,MAAA,EAAQ,SAAA,EAAW,eAAe,UAAA,EAAY,GAAG,IAAA,EAAK,EAAG,GAAA,KAAQ;AAC1E,IAAA,MAAM,IAAA,GAAO,YAAY,MAAM,CAAA;AAC/B,IAAA,MAAM,OAAO,IAAA,CAAK,IAAA;AAClB,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QAEA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,sFAAA;AAAA,UACA,IAAA,CAAK,SAAA;AAAA,UACL;AAAA,SACF;AAAA,QACA,eAAa,UAAA,IAAc,iBAAA;AAAA,QAC3B,aAAA,EAAa,MAAA;AAAA,QACZ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAW,EAAA,CAAG,QAAA,EAAU,KAAK,IAAA,IAAQ,cAAc,CAAA,EAAG,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,0BACxE,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,UACjB,MAAA,KAAW,MAAA,IAAa,MAAA,CAAO,MAAA,GAAS,CAAA,yBACtC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB,aAAA,EAAY,mBAAA,EACjD,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,YACA;AAAA,WAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AACA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-KE773ODY.js","sourcesContent":["import {\n  AlertCircle,\n  CheckCircle2,\n  Clock,\n  Loader2,\n  type LucideIcon,\n  PauseCircle,\n  XCircle,\n} from \"lucide-react\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * RunStatusPill — compact status indicator for Run/Task lifecycle states.\n * Mirrors OpenClaw's `Run status: In progress | Done | Interrupted` pill.\n * Closed enum mirrors SDK `Task` state (D362).\n */\n\nexport type RunStatus =\n  | \"queued\"\n  | \"in_progress\"\n  | \"finished\"\n  | \"error\"\n  | \"cancelled\"\n  | \"interrupted\";\n\nexport interface RunStatusPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"title\"> {\n  status: RunStatus;\n  detail?: string;\n  \"data-testid\"?: string;\n}\n\ninterface StatusMeta {\n  icon: LucideIcon;\n  label: string;\n  className: string;\n  spin?: boolean;\n}\n\nconst STATUS_META: Record<RunStatus, StatusMeta> = {\n  queued: {\n    icon: Clock,\n    label: \"Queued\",\n    className: \"border-border bg-muted text-muted-foreground\",\n  },\n  in_progress: {\n    icon: Loader2,\n    label: \"In progress\",\n    className: \"border-primary/40 bg-primary/10 text-primary\",\n    spin: true,\n  },\n  finished: {\n    icon: CheckCircle2,\n    label: \"Done\",\n    className: \"border-success/40 bg-success/10 text-success\",\n  },\n  error: {\n    icon: AlertCircle,\n    label: \"Error\",\n    className: \"border-destructive/40 bg-destructive/10 text-destructive\",\n  },\n  cancelled: {\n    icon: XCircle,\n    label: \"Cancelled\",\n    className: \"border-border bg-muted text-muted-foreground\",\n  },\n  interrupted: {\n    icon: PauseCircle,\n    label: \"Interrupted\",\n    className: \"border-warning/40 bg-warning/10 text-warning\",\n  },\n};\n\nexport const RunStatusPill = forwardRef<HTMLSpanElement, RunStatusPillProps>(\n  ({ status, detail, className, \"data-testid\": dataTestId, ...rest }, ref) => {\n    const meta = STATUS_META[status];\n    const Icon = meta.icon;\n    return (\n      <span\n        ref={ref}\n        // biome-ignore lint/a11y/useSemanticElements: inline status badge — <span role=\"status\"> keeps it phrasing-content compatible inside chat headers and table cells, where the implicit <output> placement would break layout\n        role=\"status\"\n        aria-live=\"polite\"\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 font-medium text-xs\",\n          meta.className,\n          className,\n        )}\n        data-testid={dataTestId ?? \"run-status-pill\"}\n        data-status={status}\n        {...rest}\n      >\n        <Icon className={cn(\"size-3\", meta.spin && \"animate-spin\")} aria-hidden />\n        <span>{meta.label}</span>\n        {detail !== undefined && detail.length > 0 && (\n          <span className=\"text-muted-foreground\" data-testid=\"run-status-detail\">\n            {\" · \"}\n            {detail}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\nRunStatusPill.displayName = \"RunStatusPill\";\n"]}

package/dist/{chunk-BYZ6OFH4.js → chunk-KPYORAP6.js}

@@ -4,22 +4,22 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var STATUS_META = {
   online: {
-    dot: "bg-emerald-500",
+    dot: "bg-status-online",
     label: "Online",
     aria: "Gateway online"
   },
   offline: {
-    dot: "bg-red-500",
+    dot: "bg-status-offline",
     label: "Offline",
     aria: "Gateway offline"
   },
   degraded: {
-    dot: "bg-amber-500",
+    dot: "bg-status-degraded",
     label: "Degraded",
     aria: "Gateway degraded"
   },
   reconnecting: {
-    dot: "bg-blue-500",
+    dot: "bg-status-info",
     label: "Reconnecting\u2026",
     aria: "Gateway reconnecting"
   }
@@ -69,5 +69,5 @@ var GatewayStatusIndicator = forwardRef(
 GatewayStatusIndicator.displayName = "GatewayStatusIndicator";
 
 export { GatewayStatusIndicator };
-//# sourceMappingURL=chunk-BYZ6OFH4.js.map
-//# sourceMappingURL=chunk-BYZ6OFH4.js.map
+//# sourceMappingURL=chunk-KPYORAP6.js.map
+//# sourceMappingURL=chunk-KPYORAP6.js.map

package/dist/chunk-KPYORAP6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/gateway-status-indicator/gateway-status-indicator.tsx"],"names":[],"mappings":";;;;AAyBA,IAAM,WAAA,GAAmF;AAAA,EACvF,MAAA,EAAQ;AAAA,IACN,GAAA,EAAK,kBAAA;AAAA,IACL,KAAA,EAAO,QAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,OAAA,EAAS;AAAA,IACP,GAAA,EAAK,mBAAA;AAAA,IACL,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,GAAA,EAAK,oBAAA;AAAA,IACL,KAAA,EAAO,UAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA,EAAK,gBAAA;AAAA,IACL,KAAA,EAAO,oBAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEV,CAAA;AAEA,SAAS,cAAc,EAAA,EAAuC;AAC5D,EAAA,IAAI,EAAA,KAAO,QAAW,OAAO,IAAA;AAC7B,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,EAAE,CAAA,IAAK,EAAA,GAAK,GAAG,OAAO,IAAA;AAC3C,EAAA,IAAI,EAAA,GAAK,GAAG,OAAO,MAAA;AACnB,EAAA,IAAI,KAAK,GAAA,EAAM,OAAO,GAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,EAAA,CAAA;AACvC,EAAA,OAAO,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA,CAAA;AAClC;AAEO,IAAM,sBAAA,GAAyB,UAAA;AAAA,EACpC,CACE,EAAE,MAAA,EAAQ,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,SAAA,EAAW,aAAA,EAAe,UAAA,EAAY,GAAG,IAAA,EAAK,EACxF,GAAA,KACG;AACH,IAAA,MAAM,IAAA,GAAO,YAAY,MAAM,CAAA;AAC/B,IAAA,MAAM,OAAA,GAAU,cAAc,SAAS,CAAA;AACvC,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,KAAA;AAAA,QACL,cAAY,IAAA,CAAK,IAAA;AAAA,QACjB,SAAA,EAAW,EAAA,CAAG,oDAAA,EAAsD,SAAS,CAAA;AAAA,QAC7E,eAAa,UAAA,IAAc,0BAAA;AAAA,QAC3B,aAAA,EAAa,MAAA;AAAA,QACZ,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,kCAAA;AAAA,gBACA,IAAA,CAAK,GAAA;AAAA,gBACL,WAAW,cAAA,IAAkB;AAAA,eAC/B;AAAA,cACA,aAAA,EAAW;AAAA;AAAA,WACb;AAAA,UACC,OAAA,KAAY,SAAA,oBACX,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,iBAAA,EACb,QAAA,EAAA;AAAA,YAAA,IAAA,CAAK,KAAA;AAAA,YACL,OAAA,KAAY,wBACX,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,4BAAA,EAA6B,aAAA,EAAY,mBACtD,QAAA,EAAA,OAAA,EACH;AAAA,WAAA,EAEJ;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AACA,sBAAA,CAAuB,WAAA,GAAc,wBAAA","file":"chunk-KPYORAP6.js","sourcesContent":["import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * GatewayStatusIndicator — live connection-status dot for a gateway/server.\n *\n * Variants:\n *   - compact  : colored dot only (sidebar footer use)\n *   - labeled  : dot + label + optional latency text\n *\n * `reconnecting` state animates with `animate-pulse` and respects\n * `prefers-reduced-motion` automatically (Tailwind defaults).\n */\n\nexport type GatewayStatus = \"online\" | \"offline\" | \"degraded\" | \"reconnecting\";\n\nexport interface GatewayStatusIndicatorProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"title\"> {\n  status: GatewayStatus;\n  latencyMs?: number;\n  variant?: \"compact\" | \"labeled\";\n  \"data-testid\"?: string;\n}\n\nconst STATUS_META: Record<GatewayStatus, { dot: string; label: string; aria: string }> = {\n  online: {\n    dot: \"bg-status-online\",\n    label: \"Online\",\n    aria: \"Gateway online\",\n  },\n  offline: {\n    dot: \"bg-status-offline\",\n    label: \"Offline\",\n    aria: \"Gateway offline\",\n  },\n  degraded: {\n    dot: \"bg-status-degraded\",\n    label: \"Degraded\",\n    aria: \"Gateway degraded\",\n  },\n  reconnecting: {\n    dot: \"bg-status-info\",\n    label: \"Reconnecting…\",\n    aria: \"Gateway reconnecting\",\n  },\n};\n\nfunction formatLatency(ms: number | undefined): string | null {\n  if (ms === undefined) return null;\n  if (!Number.isFinite(ms) || ms < 0) return null;\n  if (ms < 1) return \"<1ms\";\n  if (ms < 1000) return `${Math.round(ms)}ms`;\n  return `${(ms / 1000).toFixed(1)}s`;\n}\n\nexport const GatewayStatusIndicator = forwardRef<HTMLSpanElement, GatewayStatusIndicatorProps>(\n  (\n    { status, latencyMs, variant = \"labeled\", className, \"data-testid\": dataTestId, ...rest },\n    ref,\n  ) => {\n    const meta = STATUS_META[status];\n    const latency = formatLatency(latencyMs);\n    return (\n      <span\n        ref={ref}\n        role=\"img\"\n        aria-label={meta.aria}\n        className={cn(\"inline-flex items-center gap-2 font-medium text-xs\", className)}\n        data-testid={dataTestId ?? \"gateway-status-indicator\"}\n        data-status={status}\n        {...rest}\n      >\n        <span\n          className={cn(\n            \"inline-block size-2 rounded-full\",\n            meta.dot,\n            status === \"reconnecting\" && \"animate-pulse\",\n          )}\n          aria-hidden\n        />\n        {variant === \"labeled\" && (\n          <span className=\"text-foreground\">\n            {meta.label}\n            {latency !== null && (\n              <span className=\"ml-1 text-muted-foreground\" data-testid=\"gateway-latency\">\n                {latency}\n              </span>\n            )}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\nGatewayStatusIndicator.displayName = \"GatewayStatusIndicator\";\n"]}

package/dist/chunk-UCGROAS4.js

@@ -0,0 +1,61 @@
+import { Card } from './chunk-K45OO62F.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function trendColor(trend, invert) {
+  if (trend === "neutral") return "text-muted-foreground";
+  const isPositive = invert ? trend === "down" : trend === "up";
+  return isPositive ? "text-success" : "text-destructive";
+}
+function TrendIcon({ trend, className }) {
+  if (trend === "up") return /* @__PURE__ */ jsx(TrendingUp, { className: cn("size-3.5", className), "aria-hidden": true });
+  if (trend === "down") return /* @__PURE__ */ jsx(TrendingDown, { className: cn("size-3.5", className), "aria-hidden": true });
+  return /* @__PURE__ */ jsx(Minus, { className: cn("size-3.5", className), "aria-hidden": true });
+}
+var MetricCard = forwardRef(
+  ({ title, value, delta, hint, icon, invertTrend = false, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        className: cn(
+          "@container/metric-card flex w-full flex-col gap-2 p-4",
+          className
+        ),
+        "data-testid": "metric-card",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: title }),
+            icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: icon })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "font-semibold @sm/metric-card:text-3xl text-2xl text-foreground tracking-tight", children: value }),
+          (delta !== void 0 || hint !== void 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+            delta !== void 0 && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-1 font-medium",
+                  trendColor(delta.trend, invertTrend)
+                ),
+                "data-trend": delta.trend,
+                children: [
+                  /* @__PURE__ */ jsx(TrendIcon, { trend: delta.trend }),
+                  delta.value
+                ]
+              }
+            ),
+            hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: hint })
+          ] })
+        ]
+      }
+    );
+  }
+);
+MetricCard.displayName = "MetricCard";
+
+export { MetricCard };
+//# sourceMappingURL=chunk-UCGROAS4.js.map
+//# sourceMappingURL=chunk-UCGROAS4.js.map

package/dist/chunk-UCGROAS4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/metric-card/metric-card.tsx"],"names":[],"mappings":";;;;;;AAsDA,SAAS,UAAA,CAAW,OAAwB,MAAA,EAAyB;AACnE,EAAA,IAAI,KAAA,KAAU,WAAW,OAAO,uBAAA;AAChC,EAAA,MAAM,UAAA,GAAa,MAAA,GAAS,KAAA,KAAU,MAAA,GAAS,KAAA,KAAU,IAAA;AACzD,EAAA,OAAO,aAAa,cAAA,GAAiB,kBAAA;AACvC;AAEA,SAAS,SAAA,CAAU,EAAE,KAAA,EAAO,SAAA,EAAU,EAAmD;AACvF,EAAA,IAAI,KAAA,KAAU,IAAA,EAAM,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,SAAS,CAAA,EAAG,aAAA,EAAW,IAAA,EAAC,CAAA;AACzF,EAAA,IAAI,KAAA,KAAU,MAAA,EAAQ,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,SAAS,CAAA,EAAG,aAAA,EAAW,IAAA,EAAC,CAAA;AAC7F,EAAA,uBAAO,GAAA,CAAC,SAAM,SAAA,EAAW,EAAA,CAAG,YAAY,SAAS,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAClE;AAEO,IAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,WAAA,GAAc,KAAA,EAAO,SAAA,EAAW,GAAG,IAAA,IAAQ,GAAA,KAAQ;AACrF,IAAA,uBACE,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QAQA,SAAA,EAAW,EAAA;AAAA,UACT,uDAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,aAAA,EAAY,aAAA;AAAA,QACX,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mEAAA,EACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,YACC,IAAA,KAAS,0BACR,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uBAAA,EAAwB,aAAA,EAAW,MAChD,QAAA,EAAA,IAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,0BAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAAA,CACE,UAAU,MAAA,IAAa,IAAA,KAAS,2BAChC,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACZ,QAAA,EAAA;AAAA,YAAA,KAAA,KAAU,MAAA,oBACT,IAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,4CAAA;AAAA,kBACA,UAAA,CAAW,KAAA,CAAM,KAAA,EAAO,WAAW;AAAA,iBACrC;AAAA,gBACA,cAAY,KAAA,CAAM,KAAA;AAAA,gBAElB,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,KAAA,CAAM,KAAA,EAAO,CAAA;AAAA,kBAC9B,KAAA,CAAM;AAAA;AAAA;AAAA,aACT;AAAA,YAED,SAAS,MAAA,oBAAa,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAyB,QAAA,EAAA,IAAA,EAAK;AAAA,WAAA,EACvE;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-UCGROAS4.js","sourcesContent":["import { Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\nimport { Card } from \"../../primitives/card/index.js\";\n\n/**\n * MetricCard — dashboard metric tile (composite).\n *\n * Pattern recurrente \"Card + CardHeader + value + delta + trend icon\" promoted\n * to a first-class composite per ADR-0007 community-best-practices plan.\n *\n * Trend → token mapping (default `invertTrend=false`):\n *   up    → text-success     (positive growth)\n *   down  → text-destructive (negative growth)\n *   neutral → text-muted-foreground\n *\n * EC-17 absorbed: pass `invertTrend` for metrics where \"up is bad\" (cost,\n * churn, latency). The mapping inverts cleanly:\n *   up    → text-destructive (cost growing = bad)\n *   down  → text-success     (cost dropping = good)\n *\n * @example\n *   <MetricCard title=\"Revenue\" value=\"$12,345\" delta={{ value: \"+12%\", trend: \"up\" }} />\n *   <MetricCard title=\"Monthly Cost\" value=\"$3,200\" delta={{ value: \"+18%\", trend: \"up\" }} invertTrend />\n */\n\nexport type MetricCardTrend = \"up\" | \"down\" | \"neutral\";\n\nexport interface MetricCardDelta {\n  /** Display text (e.g., `\"+12%\"`, `\"-3.4 pp\"`, `\"unchanged\"`). */\n  value: string;\n  /** Trend direction — drives icon and color (subject to `invertTrend`). */\n  trend: MetricCardTrend;\n}\n\nexport interface MetricCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Metric label (e.g., \"Revenue\", \"Active Users\"). */\n  title: string;\n  /** Headline value (e.g., \"$12,345\", \"1,234\"). */\n  value: ReactNode;\n  /** Optional delta with trend direction. */\n  delta?: MetricCardDelta;\n  /** Optional subtle context line below the value (e.g., \"vs last month\"). */\n  hint?: ReactNode;\n  /** Optional icon rendered top-right (e.g., `<DollarSign />`). */\n  icon?: ReactNode;\n  /**\n   * EC-17: invert default trend semantics. Use for Cost / Churn / Latency\n   * metrics where \"up\" is bad. Default `false` (Revenue / Users / Conversions).\n   */\n  invertTrend?: boolean;\n}\n\nfunction trendColor(trend: MetricCardTrend, invert: boolean): string {\n  if (trend === \"neutral\") return \"text-muted-foreground\";\n  const isPositive = invert ? trend === \"down\" : trend === \"up\";\n  return isPositive ? \"text-success\" : \"text-destructive\";\n}\n\nfunction TrendIcon({ trend, className }: { trend: MetricCardTrend; className?: string }) {\n  if (trend === \"up\") return <TrendingUp className={cn(\"size-3.5\", className)} aria-hidden />;\n  if (trend === \"down\") return <TrendingDown className={cn(\"size-3.5\", className)} aria-hidden />;\n  return <Minus className={cn(\"size-3.5\", className)} aria-hidden />;\n}\n\nexport const MetricCard = forwardRef<HTMLDivElement, MetricCardProps>(\n  ({ title, value, delta, hint, icon, invertTrend = false, className, ...rest }, ref) => {\n    return (\n      <Card\n        ref={ref}\n        // T5.5: `@container/metric-card` makes the tile responsive to its PARENT\n        // width, not the viewport. Consumers can drop multiple cards into any\n        // grid and child elements scale via `@sm:`, `@md:`, `@lg:` variants.\n        // `w-full` is the right default for a tile: consumers always wrap in a\n        // grid/flex parent (grid-cols-N, flex). Without it, the flex-col card\n        // collapses to min-content (~150px) when used in isolation — a real\n        // regression observed in the docs site preview pane.\n        className={cn(\n          \"@container/metric-card flex w-full flex-col gap-2 p-4\",\n          className,\n        )}\n        data-testid=\"metric-card\"\n        {...rest}\n      >\n        <div className=\"flex items-start justify-between gap-3\">\n          <span className=\"font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n            {title}\n          </span>\n          {icon !== undefined && (\n            <span className=\"text-muted-foreground\" aria-hidden>\n              {icon}\n            </span>\n          )}\n        </div>\n        {/* Value scales 2xl → 3xl when the card container exceeds 18rem. */}\n        <div className=\"font-semibold @sm/metric-card:text-3xl text-2xl text-foreground tracking-tight\">\n          {value}\n        </div>\n        {(delta !== undefined || hint !== undefined) && (\n          <div className=\"flex items-center gap-2 text-xs\">\n            {delta !== undefined && (\n              <span\n                className={cn(\n                  \"inline-flex items-center gap-1 font-medium\",\n                  trendColor(delta.trend, invertTrend),\n                )}\n                data-trend={delta.trend}\n              >\n                <TrendIcon trend={delta.trend} />\n                {delta.value}\n              </span>\n            )}\n            {hint !== undefined && <span className=\"text-muted-foreground\">{hint}</span>}\n          </div>\n        )}\n      </Card>\n    );\n  },\n);\nMetricCard.displayName = \"MetricCard\";\n"]}

package/dist/{chunk-LKRNUSKZ.js → chunk-W6KORCLX.js}

@@ -11,12 +11,12 @@ var SEVERITY_META = {
   },
   error: {
     icon: AlertTriangle,
-    className: "text-amber-600 dark:text-amber-400",
+    className: "text-warning",
     label: "Error"
   },
   warn: {
     icon: Info,
-    className: "text-blue-600 dark:text-blue-400",
+    className: "text-info",
     label: "Warning"
   }
 };
@@ -145,5 +145,5 @@ var StabilityBundleViewer = forwardRef(
 StabilityBundleViewer.displayName = "StabilityBundleViewer";
 
 export { StabilityBundleViewer };
-//# sourceMappingURL=chunk-LKRNUSKZ.js.map
-//# sourceMappingURL=chunk-LKRNUSKZ.js.map
+//# sourceMappingURL=chunk-W6KORCLX.js.map
+//# sourceMappingURL=chunk-W6KORCLX.js.map

package/dist/chunk-W6KORCLX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/stability-bundle-viewer/stability-bundle-viewer.tsx"],"names":[],"mappings":";;;;;AAgCA,IAAM,aAAA,GAGF;AAAA,EACF,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,YAAA;AAAA,IACN,SAAA,EAAW,kBAAA;AAAA,IACX,KAAA,EAAO;AAAA,GACT;AAAA,EACA,KAAA,EAAO;AAAA,IACL,IAAA,EAAM,aAAA;AAAA,IACN,SAAA,EAAW,cAAA;AAAA,IACX,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,IAAA;AAAA,IACN,SAAA,EAAW,WAAA;AAAA,IACX,KAAA,EAAO;AAAA;AAEX,CAAA;AASA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA,GAAc,IAAA;AAAA,EACd;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,WAAW,CAAA;AAC5C,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,SAAA,EAAU,8BAAA,EAA+B,eAAa,MAAA,EAC7D,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,SAAS,MAAM,OAAA,CAAQ,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,QAChC,SAAA,EAAU,oGAAA;AAAA,QACV,eAAA,EAAe,IAAA;AAAA,QACf,aAAA,EAAa,GAAG,MAAM,CAAA,OAAA,CAAA;AAAA,QAEtB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,8BACZ,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAE,QAAA,EAAA,IAAA,GAAO,WAAM,QAAA,EAAI;AAAA;AAAA;AAAA,KACtC;AAAA,IACC,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAoC,QAAA,EAAS;AAAA,GAAA,EACvE,CAAA;AAEJ;AAEO,IAAM,qBAAA,GAAwB,UAAA;AAAA,EACnC,CAAC,EAAE,MAAA,EAAQ,MAAA,EAAQ,WAAW,aAAA,EAAe,UAAA,IAAc,GAAA,KAAQ;AACjE,IAAA,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,CAAO,QAAQ,KAAK,aAAA,CAAc,KAAA;AAC7D,IAAA,MAAM,OAAO,IAAA,CAAK,IAAA;AAClB,IAAA,MAAM,UAAA,GAAa,OAAO,GAAA,KAAQ,MAAA,GAAY,OAAO,OAAA,CAAQ,MAAA,CAAO,GAAG,CAAA,GAAI,EAAC;AAC5E,IAAA,MAAM,aAAA,GAAgB,OAAO,MAAA,KAAW,MAAA,GAAY,OAAO,OAAA,CAAQ,MAAA,CAAO,MAAM,CAAA,GAAI,EAAC;AACrF,IAAA,MAAM,eAAA,GAAkB,OAAO,QAAA,KAAa,MAAA,GAAY,OAAO,OAAA,CAAQ,MAAA,CAAO,QAAQ,CAAA,GAAI,EAAC;AAE3F,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,QAC9C,eAAa,UAAA,IAAc,yBAAA;AAAA,QAE3B,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,iEAAA,EAChB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAW,EAAA,CAAG,QAAA,EAAU,KAAK,SAAS,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,4BAC3D,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,QAAA,EACb,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACb,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,IAAA,CAAK,SAAS,CAAA;AAAA,oBACrD,aAAA,EAAY,oBAAA;AAAA,oBAEX,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,iBACR;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,+BAAA;AAAA,oBACV,UAAU,MAAA,CAAO,SAAA;AAAA,oBACjB,aAAA,EAAY,qBAAA;AAAA,oBAEX,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA;AACV,eAAA,EACF,CAAA;AAAA,kCACC,GAAA,EAAA,EAAE,SAAA,EAAU,gBAAe,aAAA,EAAY,mBAAA,EACrC,iBAAO,OAAA,EACV;AAAA,aAAA,EACF,CAAA;AAAA,YACC,WAAW,MAAA,oBACV,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,MAAA;AAAA,gBACT,SAAA,EAAU,kEAAA;AAAA,gBACV,aAAA,EAAY,gBAAA;AAAA,gBACb,QAAA,EAAA;AAAA;AAAA;AAED,WAAA,EAEJ,CAAA;AAAA,UAEC,MAAA,CAAO,UAAU,MAAA,oBAChB,IAAA,CAAC,sBAAmB,KAAA,EAAM,OAAA,EAAQ,QAAO,yBAAA,EACvC,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,mBAAA,EACX,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,QAAA,EAAA,MAAA,CAAO,KAAA,CAAM,IAAA,EAAK,CAAA;AAAA,cAAS,IAAA;AAAA,cAAG,OAAO,KAAA,CAAM;AAAA,aAAA,EACtD,CAAA;AAAA,YACC,MAAA,CAAO,MAAM,KAAA,KAAU,MAAA,IAAa,OAAO,KAAA,CAAM,KAAA,CAAM,SAAS,CAAA,oBAC/D,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAU,sDAAA;AAAA,gBACV,aAAA,EAAY,iBAAA;AAAA,gBAEX,iBAAO,KAAA,CAAM;AAAA;AAAA;AAChB,WAAA,EAEJ,CAAA;AAAA,UAGD,UAAA,CAAW,SAAS,CAAA,oBACnB,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,CAAA,aAAA,EAAgB,UAAA,CAAW,MAAM,CAAA,CAAA,CAAA;AAAA,cACxC,MAAA,EAAO,uBAAA;AAAA,cACP,WAAA,EAAa,KAAA;AAAA,cAEb,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,gBAAA,EACf,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,uBAAA,EACf,QAAA,kBAAA,IAAA,CAAC,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,WAAA,EAAY,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,kCAC7B,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,WAAA,EAAY,QAAA,EAAA,OAAA,EAAK;AAAA,iBAAA,EACjC,CAAA,EACF,CAAA;AAAA,gCACA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,UAAA,CAAW,GAAA,CAAI,CAAC,CAAC,CAAA,EAAG,CAAC,CAAA,qBACpB,IAAA,CAAC,IAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EACpB,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAA,CAAA,EAAE,CAAA;AAAA,kCACvC,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAA,CAAA,EAAE;AAAA,iBAAA,EAAA,EAF3B,CAGT,CACD,CAAA,EACH;AAAA,eAAA,EACF;AAAA;AAAA,WACF;AAAA,UAGD,aAAA,CAAc,SAAS,CAAA,oBACtB,GAAA,CAAC,sBAAmB,KAAA,EAAM,QAAA,EAAS,MAAA,EAAO,0BAAA,EAA2B,WAAA,EAAa,KAAA,EAChF,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDACZ,QAAA,EAAA,IAAA,CAAK,SAAA,CAAU,OAAO,MAAA,EAAQ,IAAA,EAAM,CAAC,CAAA,EACxC,CAAA,EACF,CAAA;AAAA,UAGD,eAAA,CAAgB,SAAS,CAAA,oBACxB,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,UAAA;AAAA,cACN,MAAA,EAAO,4BAAA;AAAA,cACP,WAAA,EAAa,KAAA;AAAA,cAEb,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iDAAA,EACZ,QAAA,EAAA,IAAA,CAAK,UAAU,MAAA,CAAO,QAAA,EAAU,IAAA,EAAM,CAAC,CAAA,EAC1C;AAAA;AAAA;AACF;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AACA,qBAAA,CAAsB,WAAA,GAAc,uBAAA","file":"chunk-W6KORCLX.js","sourcesContent":["import { AlertOctagon, AlertTriangle, Info, type LucideIcon } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\n\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * StabilityBundleViewer — inspector for a stability-bundle JSON produced by a\n * server crash. Sections (error, env, config, metadata) collapse independently.\n *\n * EC-9: handles bundles missing optional sections gracefully. Renderer DOES\n * NOT redact env values — bundle writer is expected to redact at emit-time.\n */\n\nexport type StabilitySeverity = \"fatal\" | \"error\" | \"warn\";\n\nexport interface StabilityBundle {\n  timestamp: string;\n  severity: StabilitySeverity;\n  summary: string;\n  error?: { name: string; message: string; stack?: string };\n  env?: Record<string, string>;\n  config?: Record<string, unknown>;\n  metadata?: Record<string, unknown>;\n}\n\nexport interface StabilityBundleViewerProps {\n  bundle: StabilityBundle;\n  onCopy?: () => void;\n  className?: string;\n  \"data-testid\"?: string;\n}\n\nconst SEVERITY_META: Record<\n  StabilitySeverity,\n  { icon: LucideIcon; className: string; label: string }\n> = {\n  fatal: {\n    icon: AlertOctagon,\n    className: \"text-destructive\",\n    label: \"Fatal\",\n  },\n  error: {\n    icon: AlertTriangle,\n    className: \"text-warning\",\n    label: \"Error\",\n  },\n  warn: {\n    icon: Info,\n    className: \"text-info\",\n    label: \"Warning\",\n  },\n};\n\ninterface CollapsibleSectionProps {\n  title: string;\n  testId: string;\n  defaultOpen?: boolean;\n  children: React.ReactNode;\n}\n\nfunction CollapsibleSection({\n  title,\n  testId,\n  defaultOpen = true,\n  children,\n}: CollapsibleSectionProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  return (\n    <section className=\"rounded border border-border\" data-testid={testId}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex w-full items-center justify-between px-3 py-2 text-left font-medium text-sm hover:bg-muted/30\"\n        aria-expanded={open}\n        data-testid={`${testId}-toggle`}\n      >\n        <span>{title}</span>\n        <span aria-hidden>{open ? \"▾\" : \"▸\"}</span>\n      </button>\n      {open && <div className=\"border-border border-t px-3 py-2\">{children}</div>}\n    </section>\n  );\n}\n\nexport const StabilityBundleViewer = forwardRef<HTMLDivElement, StabilityBundleViewerProps>(\n  ({ bundle, onCopy, className, \"data-testid\": dataTestId }, ref) => {\n    const meta = SEVERITY_META[bundle.severity] ?? SEVERITY_META.error;\n    const Icon = meta.icon;\n    const envEntries = bundle.env !== undefined ? Object.entries(bundle.env) : [];\n    const configEntries = bundle.config !== undefined ? Object.entries(bundle.config) : [];\n    const metadataEntries = bundle.metadata !== undefined ? Object.entries(bundle.metadata) : [];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col gap-3\", className)}\n        data-testid={dataTestId ?? \"stability-bundle-viewer\"}\n      >\n        <header className=\"flex items-start gap-3 rounded border border-border bg-card p-3\">\n          <Icon className={cn(\"size-5\", meta.className)} aria-hidden />\n          <div className=\"flex-1\">\n            <div className=\"flex items-baseline gap-2\">\n              <span\n                className={cn(\"font-semibold text-sm\", meta.className)}\n                data-testid=\"stability-severity\"\n              >\n                {meta.label}\n              </span>\n              <time\n                className=\"text-muted-foreground text-xs\"\n                dateTime={bundle.timestamp}\n                data-testid=\"stability-timestamp\"\n              >\n                {bundle.timestamp}\n              </time>\n            </div>\n            <p className=\"mt-1 text-sm\" data-testid=\"stability-summary\">\n              {bundle.summary}\n            </p>\n          </div>\n          {onCopy !== undefined && (\n            <button\n              type=\"button\"\n              onClick={onCopy}\n              className=\"rounded border border-border px-2 py-1 text-xs hover:bg-muted/30\"\n              data-testid=\"stability-copy\"\n            >\n              Copy\n            </button>\n          )}\n        </header>\n\n        {bundle.error !== undefined && (\n          <CollapsibleSection title=\"Error\" testId=\"stability-section-error\">\n            <p className=\"font-mono text-sm\">\n              <strong>{bundle.error.name}</strong>: {bundle.error.message}\n            </p>\n            {bundle.error.stack !== undefined && bundle.error.stack.length > 0 && (\n              <pre\n                className=\"mt-2 overflow-x-auto rounded bg-muted/30 p-2 text-xs\"\n                data-testid=\"stability-stack\"\n              >\n                {bundle.error.stack}\n              </pre>\n            )}\n          </CollapsibleSection>\n        )}\n\n        {envEntries.length > 0 && (\n          <CollapsibleSection\n            title={`Environment (${envEntries.length})`}\n            testId=\"stability-section-env\"\n            defaultOpen={false}\n          >\n            <table className=\"w-full text-xs\">\n              <thead className=\"text-muted-foreground\">\n                <tr>\n                  <th className=\"text-left\">Key</th>\n                  <th className=\"text-left\">Value</th>\n                </tr>\n              </thead>\n              <tbody>\n                {envEntries.map(([k, v]) => (\n                  <tr key={k} className=\"border-border/40 border-t\">\n                    <td className=\"py-1 pr-2 font-mono\">{k}</td>\n                    <td className=\"py-1 font-mono\">{v}</td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </CollapsibleSection>\n        )}\n\n        {configEntries.length > 0 && (\n          <CollapsibleSection title=\"Config\" testId=\"stability-section-config\" defaultOpen={false}>\n            <pre className=\"overflow-x-auto rounded bg-muted/30 p-2 text-xs\">\n              {JSON.stringify(bundle.config, null, 2)}\n            </pre>\n          </CollapsibleSection>\n        )}\n\n        {metadataEntries.length > 0 && (\n          <CollapsibleSection\n            title=\"Metadata\"\n            testId=\"stability-section-metadata\"\n            defaultOpen={false}\n          >\n            <pre className=\"overflow-x-auto rounded bg-muted/30 p-2 text-xs\">\n              {JSON.stringify(bundle.metadata, null, 2)}\n            </pre>\n          </CollapsibleSection>\n        )}\n      </div>\n    );\n  },\n);\nStabilityBundleViewer.displayName = \"StabilityBundleViewer\";\n"]}