@mastra/playground-ui 56.0.0-alpha.12 → 56.0.0-alpha.13

package/dist/buttons-group-CaA7KAWf.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cva } from './index-Dubp6Qv4.js';
+import * as React from 'react';
+import { controlSizeClasses } from './primitives/control-size.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+import './buttons-group.css';const ButtonsGroupOrientationContext = React.createContext("horizontal");
+const ButtonsGroup = React.forwardRef(
+  ({ children, className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ButtonsGroupOrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        className: cn("flex w-fit items-stretch", orientation === "vertical" ? "flex-col" : "flex-row", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const ButtonsGroupSeparator = React.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);
+    const resolved = orientation ?? (parentOrientation === "vertical" ? "horizontal" : "vertical");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": resolved,
+        "data-slot": "buttons-group-separator",
+        className: cn("self-stretch bg-border", resolved === "vertical" ? "w-px" : "h-px", className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupSeparator.displayName = "ButtonsGroupSeparator";
+const buttonsGroupTextVariants = cva(
+  cn(
+    "inline-flex items-center justify-center border border-border bg-surface-panel text-foreground select-none",
+    "shrink-0 gap-[.75em] rounded-full px-[1em] whitespace-nowrap",
+    "[&>svg]:size-[1.1em] [&>svg]:opacity-50"
+  ),
+  {
+    variants: {
+      size: {
+        sm: controlSizeClasses.sm,
+        md: controlSizeClasses.md,
+        lg: controlSizeClasses.lg
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const ButtonsGroupText = React.forwardRef(
+  ({ className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "buttons-group-text",
+        className: cn(buttonsGroupTextVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
+export { ButtonsGroup as B, ButtonsGroupSeparator as a, ButtonsGroupText as b };
+//# sourceMappingURL=buttons-group-CaA7KAWf.js.map

package/dist/buttons-group-CaA7KAWf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-group-CaA7KAWf.js","sources":["../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import './buttons-group.css';\nimport { cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst ButtonsGroupOrientationContext = React.createContext<Orientation>('horizontal');\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n};\n\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', ...props }, ref) => {\n    return (\n      <ButtonsGroupOrientationContext.Provider value={orientation}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          className={cn('flex w-fit items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonsGroupOrientationContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\nexport type ButtonsGroupSeparatorProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n};\n\nexport const ButtonsGroupSeparator = React.forwardRef<HTMLDivElement, ButtonsGroupSeparatorProps>(\n  ({ className, orientation, ...props }, ref) => {\n    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);\n    // Separator runs perpendicular to the group flow by default.\n    const resolved = orientation ?? (parentOrientation === 'vertical' ? 'horizontal' : 'vertical');\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={resolved}\n        data-slot=\"buttons-group-separator\"\n        className={cn('self-stretch bg-border', resolved === 'vertical' ? 'w-px' : 'h-px', className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupSeparator.displayName = 'ButtonsGroupSeparator';\n\nconst buttonsGroupTextVariants = cva(\n  cn(\n    'inline-flex items-center justify-center border border-border bg-surface-panel text-foreground select-none',\n    'shrink-0 gap-[.75em] rounded-full px-[1em] whitespace-nowrap',\n    '[&>svg]:size-[1.1em] [&>svg]:opacity-50',\n  ),\n  {\n    variants: {\n      size: {\n        sm: controlSizeClasses.sm,\n        md: controlSizeClasses.md,\n        lg: controlSizeClasses.lg,\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, size = 'md', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"buttons-group-text\"\n        className={cn(buttonsGroupTextVariants({ size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,8BAAA,GAAiC,KAAA,CAAM,aAAA,CAA2B,YAAY,CAAA;AAM7E,MAAM,eAAe,KAAA,CAAM,UAAA;AAAA,EAChC,CAAC,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,YAAA,EAAc,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACtE,IAAA,uBACE,GAAA,CAAC,8BAAA,CAA+B,QAAA,EAA/B,EAAwC,OAAO,WAAA,EAC9C,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,eAAA;AAAA,QACV,kBAAA,EAAkB,WAAA;AAAA,QAClB,WAAW,EAAA,CAAG,0BAAA,EAA4B,gBAAgB,UAAA,GAAa,UAAA,GAAa,YAAY,SAAS,CAAA;AAAA,QACxG,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA;AAMpB,MAAM,wBAAwB,KAAA,CAAM,UAAA;AAAA,EACzC,CAAC,EAAE,SAAA,EAAW,aAAa,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC7C,IAAA,MAAM,iBAAA,GAAoB,KAAA,CAAM,UAAA,CAAW,8BAA8B,CAAA;AAEzE,IAAA,MAAM,QAAA,GAAW,WAAA,KAAgB,iBAAA,KAAsB,UAAA,GAAa,YAAA,GAAe,UAAA,CAAA;AACnF,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,WAAA;AAAA,QACL,kBAAA,EAAkB,QAAA;AAAA,QAClB,WAAA,EAAU,yBAAA;AAAA,QACV,WAAW,EAAA,CAAG,wBAAA,EAA0B,aAAa,UAAA,GAAa,MAAA,GAAS,QAAQ,SAAS,CAAA;AAAA,QAC3F,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,qBAAA,CAAsB,WAAA,GAAc,uBAAA;AAEpC,MAAM,wBAAA,GAA2B,GAAA;AAAA,EAC/B,EAAA;AAAA,IACE,2GAAA;AAAA,IACA,8DAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAI,kBAAA,CAAmB,EAAA;AAAA,QACvB,IAAI,kBAAA,CAAmB,EAAA;AAAA,QACvB,IAAI,kBAAA,CAAmB;AAAA;AACzB,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAMO,MAAM,mBAAmB,KAAA,CAAM,UAAA;AAAA,EACpC,CAAC,EAAE,SAAA,EAAW,IAAA,GAAO,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC7C,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,oBAAA;AAAA,QACV,WAAW,EAAA,CAAG,wBAAA,CAAyB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QAC1D,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;"}

package/dist/buttons-group.css

@@ -0,0 +1,135 @@
+/* ButtonsGroup seam. Plain CSS rather than `[&>*]` class strings: every rule keys off the
+ * same four negations, and Tailwind only emits a utility whose class string appears
+ * literally in the source — composing those selectors from constants silently emits
+ * nothing at all.
+ *
+ * `@layer utilities`, NOT `components`: layer order outranks specificity, and a segment's
+ * own look is plain utilities (`ghost` ships `border-transparent`, `icon-md` ships
+ * `rounded-full`). From a lower layer these rules would lose every one of those contests.
+ * Inside `utilities` the extra attribute selector wins them instead.
+ *
+ * A component stylesheet can load before the app's Tailwind entry, and the first sheet to
+ * name a layer fixes its rank. Restating the full order keeps preflight from winning over
+ * these rules whichever one lands first. */
+@layer properties, theme, base, components, utilities;
+
+/* A real segment. Everything a framework injects around the authored children is not one
+ * and takes no seam rule: Base UI's trailing `<input aria-hidden>` (Select), and the focus
+ * guards plus positioner anchor a Menu or Popover inserts while OPEN — a split button must
+ * not lose its seam the moment its menu opens. */
+@layer utilities {
+  [data-slot='buttons-group'] > input {
+    flex: 1;
+  }
+
+  /* Lift the hovered/focused segment so its ring paints over its neighbours instead of
+     under them. `:focus-visible`, not `:focus-within`: a mouse click leaves a plain
+     `:focus` on a button, which would keep that segment lifted until blur.
+     `:has(:focus-visible)` covers a nested focusable — the input inside an InputGroup. */
+  [data-slot='buttons-group'] > *:is(:hover, :focus-visible, :has(:focus-visible)) {
+    position: relative;
+    z-index: 10;
+  }
+
+  /* Every real segment paints the ring, transparent variants (`ghost`, `ghostLight`)
+     included: a group mixing a selected filled segment with unselected ghosts has to read
+     as one track, not half a capsule. `primary` and `destructive` are opaque and
+     borderless, and take a shadow divider below instead. */
+  [data-slot='buttons-group']
+    > :not(
+      [data-slot='buttons-group-separator'],
+      [aria-hidden='true'],
+      [data-base-ui-focus-guard],
+      [aria-owns],
+      [data-variant='primary'],
+      [data-variant='destructive']
+    ) {
+    border-color: var(--border);
+  }
+
+  /* A field trigger (`Combobox`/`Select` in their default variant) carries no border at all:
+     its edge is the raised material's inset rim, which paints all four sides at once. The
+     seam rules below can only halve a border, so that rim survives next to its neighbour's
+     edge and the seam reads as two lines. Inside a group the edges belong to the group, so
+     the material goes flat and the segment takes the same 1px border as every other one —
+     the border its focus state already moves (`focus-visible:border-border-focus`).
+     What has to go is only the rim: it paints all four sides, so it survives beside a
+     neighbour's edge and the seam reads as two lines. The rest of the shadow list must
+     stay, because `--surface-tint` is the layer a field expresses every state in — hover
+     washes to `fill-subtle`, open to `fill`. Dropping the list wholesale left both states
+     with nothing to paint on and handed them to the border instead: a rim flash on the one
+     control whose boundary is deliberately static. Keeping the tint inset alone repairs
+     hover and open together, and a grouped trigger reads like the same trigger standing
+     alone. The inset also clips to the padding box, so the wash cannot composite through
+     the translucent border and lighten it — which is the whole point. */
+  [data-slot='buttons-group'] > .shadow-raised {
+    box-shadow: inset 0 0 0 9999px var(--surface-tint);
+    border-width: 1px;
+  }
+
+  /* One border per seam, and no overlap. A border is a translucent alpha of the
+     foreground, so two 1px edges collapsed onto the same pixel (the `-ml-px` trick) stack
+     to double the alpha and out-read the ring around the group. The left segment owns the
+     seam with its right border; the segment after it drops its left edge entirely. */
+  [data-slot='buttons-group'][data-orientation='horizontal']
+    > :not([data-slot='buttons-group-separator'], [aria-hidden='true'], [data-base-ui-focus-guard], [aria-owns]):not(
+      :first-child
+    ) {
+    border-left-width: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  /* `:has(~ …)` rather than `:not(:last-child)`, for the injected children above. */
+  [data-slot='buttons-group'][data-orientation='horizontal']
+    > *:has(
+      ~ :not([data-slot='buttons-group-separator'], [aria-hidden='true'], [data-base-ui-focus-guard], [aria-owns])
+    ) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /* A borderless filled segment cannot own its seam, so it draws one inside its own box. */
+  [data-slot='buttons-group'][data-orientation='horizontal']
+    > :is([data-variant='primary'], [data-variant='destructive']):has(
+      ~ :not([data-slot='buttons-group-separator'], [aria-hidden='true'], [data-base-ui-focus-guard], [aria-owns])
+    ) {
+    box-shadow: inset -1px 0 0 0 var(--border);
+  }
+
+  /* Vertical mirrors it: the top segment owns the seam. The children are capsules, so the
+     outer ends are re-rounded to the container radius. */
+  [data-slot='buttons-group'][data-orientation='vertical']
+    > :not([data-slot='buttons-group-separator'], [aria-hidden='true'], [data-base-ui-focus-guard], [aria-owns]):not(
+      :first-child
+    ) {
+    border-top-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  [data-slot='buttons-group'][data-orientation='vertical']
+    > *:has(
+      ~ :not([data-slot='buttons-group-separator'], [aria-hidden='true'], [data-base-ui-focus-guard], [aria-owns])
+    ) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [data-slot='buttons-group'][data-orientation='vertical'] > :first-child {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
+
+  [data-slot='buttons-group'][data-orientation='vertical'] > :last-child {
+    border-bottom-left-radius: var(--radius-xl);
+    border-bottom-right-radius: var(--radius-xl);
+  }
+
+  [data-slot='buttons-group'][data-orientation='vertical']
+    > :is([data-variant='primary'], [data-variant='destructive']):has(
+      ~ :not([data-slot='buttons-group-separator'], [aria-hidden='true'], [data-base-ui-focus-guard], [aria-owns])
+    ) {
+    box-shadow: inset 0 -1px 0 0 var(--border);
+  }
+}

package/dist/chart-tooltip-84fl_3Wc.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { overlaySurfaceStyle } from './primitives/raised-surface.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+function ChartTooltip({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      className: cn(overlaySurfaceStyle, "rounded-md px-3 py-2 text-caption text-foreground", className),
+      ...props
+    }
+  );
+}
+
+export { ChartTooltip as C };
+//# sourceMappingURL=chart-tooltip-84fl_3Wc.js.map

package/dist/chart-tooltip-84fl_3Wc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip-84fl_3Wc.js","sources":["../src/ds/components/ChartTooltip/chart-tooltip.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport type ChartTooltipProps = ComponentPropsWithoutRef<'div'>;\n\n/**\n * The floating readout a chart shows on hover — scatter points, line series,\n * sankey nodes, lifeline markers.\n *\n * It is a raised surface, so it carries no border of its own: the rim lives in\n * the `shadow-overlay` utility. Call sites pass only what is genuinely local — positioning\n * and sizing — never background, border or shadow.\n */\nexport function ChartTooltip({ className, ...props }: ChartTooltipProps) {\n  return (\n    <div\n      data-slot=\"chart-tooltip\"\n      className={cn(overlaySurfaceStyle, 'rounded-md px-3 py-2 text-caption text-foreground', className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAeO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAsB;AACvE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAChG,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/chart-tooltip-DX6vs_Tc.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function ChartTooltip({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      className: utils_cn.cn(primitives_raisedSurface.overlaySurfaceStyle, "rounded-md px-3 py-2 text-caption text-foreground", className),
+      ...props
+    }
+  );
+}
+
+exports.ChartTooltip = ChartTooltip;
+//# sourceMappingURL=chart-tooltip-DX6vs_Tc.cjs.map

package/dist/chart-tooltip-DX6vs_Tc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip-DX6vs_Tc.cjs","sources":["../src/ds/components/ChartTooltip/chart-tooltip.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport type ChartTooltipProps = ComponentPropsWithoutRef<'div'>;\n\n/**\n * The floating readout a chart shows on hover — scatter points, line series,\n * sankey nodes, lifeline markers.\n *\n * It is a raised surface, so it carries no border of its own: the rim lives in\n * the `shadow-overlay` utility. Call sites pass only what is genuinely local — positioning\n * and sizing — never background, border or shadow.\n */\nexport function ChartTooltip({ className, ...props }: ChartTooltipProps) {\n  return (\n    <div\n      data-slot=\"chart-tooltip\"\n      className={cn(overlaySurfaceStyle, 'rounded-md px-3 py-2 text-caption text-foreground', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["jsx","cn","overlaySurfaceStyle"],"mappings":";;;;;;AAeO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAsB;AACvE,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAGC,4CAAA,EAAqB,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAChG,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/{chat-notification-D7J8goLv.js → chat-notification-DKNF9o7j.js}

@@ -1,32 +1,32 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronRight, Bell, ExternalLink } from 'lucide-react';
 import { u as useArriving } from './use-watched-CG9KoWl3.js';
-import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from './collapsible-LYtqJXDJ.js';
-import { T as Txt } from './Txt-vsOCKfz7.js';
-import { c as cn } from './cn-BmQQRqRs.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from './collapsible-B2uUy8w5.js';
+import { T as Txt } from './Txt-DTh3Pa_a.js';
+import { c as cn } from './cn-65Adrsfj.js';
 import { truncateString } from './utils/truncate-string.es.js';
 import { getNotificationNoticeVariant } from './domains/chat/messages/notification-signal-notice-variant.es.js';
-import { B as Badge } from './Badge-apYorT0C.js';
-import { N as Notice } from './Notice-BHq_w0In.js';
+import { B as Badge } from './Badge-TD55_qZJ.js';
+import { N as Notice } from './Notice-BF_RLqRI.js';
 
 function ChatEventDetail({ children }) {
   const arriving = useArriving();
-  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", font: "mono", className: cn("text-icon3 min-w-0 truncate", arriving), children });
+  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", font: "mono", className: cn("min-w-0 truncate", arriving), children });
 }
 function ChatEvent({ label, detail, icon, children, defaultOpen, ...props }) {
   const header = /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center gap-2 px-1.5 py-1", children: [
     /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 max-w-[55%] shrink-0 truncate", children: label }),
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", className: "max-w-[55%] shrink-0 truncate", children: label }),
     detail && /* @__PURE__ */ jsx(ChatEventDetail, { children: detail }),
     /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "min-w-2 flex-1" }),
-    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: children && /* @__PURE__ */ jsx("span", { className: "text-icon3 flex opacity-0 group-hover/event:opacity-100 group-focus-visible/event:opacity-100 group-data-[panel-open]/event:rotate-90 group-data-[panel-open]/event:opacity-100 motion-safe:transition motion-safe:duration-150", children: /* @__PURE__ */ jsx(ChevronRight, { size: 13 }) }) })
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: children && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground flex opacity-0 group-hover/event:opacity-100 group-focus-visible/event:opacity-100 group-data-[panel-open]/event:rotate-90 group-data-[panel-open]/event:opacity-100 motion-safe:transition motion-safe:duration-150", children: /* @__PURE__ */ jsx(ChevronRight, { size: 13 }) }) })
   ] });
   if (!children) {
     return /* @__PURE__ */ jsx("div", { className: "max-w-full min-w-0", role: "group", ...props, children: header });
   }
   return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, className: "max-w-full min-w-0", role: "group", ...props, children: [
-    /* @__PURE__ */ jsx(CollapsibleTrigger, { className: "group/event hover:bg-neutral6/5 w-full cursor-pointer rounded-md text-left motion-safe:transition-colors", children: header }),
-    /* @__PURE__ */ jsx(CollapsibleContent, { className: "max-w-full min-w-0", children: /* @__PURE__ */ jsx("div", { className: "before:bg-border1 relative ml-[14px] max-w-full min-w-0 py-1.5 pr-1 pl-4 before:absolute before:inset-y-0 before:left-0 before:w-px before:mask-b-from-[calc(100%-min(40%,80px))] before:content-['']", children }) })
+    /* @__PURE__ */ jsx(CollapsibleTrigger, { className: "group/event hover:bg-fill w-full cursor-pointer rounded-md text-left motion-safe:transition-colors", children: header }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { className: "max-w-full min-w-0", children: /* @__PURE__ */ jsx("div", { className: "before:bg-border relative ml-[14px] max-w-full min-w-0 py-1.5 pr-1 pl-4 before:absolute before:inset-y-0 before:left-0 before:w-px before:mask-b-from-[calc(100%-min(40%,80px))] before:content-['']", children }) })
   ] });
 }
 
@@ -80,7 +80,7 @@ function ChatNotification({
       "data-notification-state": state,
       "aria-label": `Notification: ${label}`,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", children: message }),
+        /* @__PURE__ */ jsx(Txt, { variant: "caption", children: message }),
         link && /* @__PURE__ */ jsx(NotificationLink, { link, message })
       ] })
     }
@@ -94,7 +94,7 @@ function NotificationLink({ link, message }) {
       target: "_blank",
       rel: "noreferrer",
       "aria-label": `Open notification target: ${message}`,
-      className: "text-icon3 hover:text-icon5 text-ui-xs flex w-fit items-center gap-1",
+      className: "text-muted-foreground hover:text-foreground text-meta flex w-fit items-center gap-1",
       children: [
         link.label,
         /* @__PURE__ */ jsx(ExternalLink, { size: 12, "aria-hidden": true })
@@ -104,4 +104,4 @@ function NotificationLink({ link, message }) {
 }
 
 export { ChatNotification as C, ChatEvent as a, chatEventPreview as c };
-//# sourceMappingURL=chat-notification-D7J8goLv.js.map
+//# sourceMappingURL=chat-notification-DKNF9o7j.js.map

package/dist/chat-notification-DKNF9o7j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-notification-DKNF9o7j.js","sources":["../src/ds/components/ai/chat-event/chat-event.tsx","../src/ds/components/ai/chat-event/chat-event-preview.ts","../src/ds/components/ai/chat-event/chat-notification.tsx"],"sourcesContent":["import { ChevronRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useArriving } from '@/ds/components/Arrival';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\ninterface ChatEventProps {\n  label: string;\n  detail?: string;\n  icon: ReactNode;\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  'aria-label': string;\n  'data-signal-kind'?: string;\n  'data-notification-state'?: string;\n  'data-skill-name'?: string;\n}\n\nfunction ChatEventDetail({ children }: { children: string }) {\n  const arriving = useArriving();\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"muted\" font=\"mono\" className={cn('min-w-0 truncate', arriving)}>\n      {children}\n    </Txt>\n  );\n}\n\nexport function ChatEvent({ label, detail, icon, children, defaultOpen, ...props }: ChatEventProps) {\n  const header = (\n    <span className=\"flex w-full min-w-0 items-center gap-2 px-1.5 py-1\">\n      <span className=\"flex size-4 shrink-0 items-center justify-center\">{icon}</span>\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-[55%] shrink-0 truncate\">\n        {label}\n      </Txt>\n      {detail && <ChatEventDetail>{detail}</ChatEventDetail>}\n      <span aria-hidden className=\"min-w-2 flex-1\" />\n      <span aria-hidden className=\"flex size-4 shrink-0 items-center justify-center\">\n        {children && (\n          <span className=\"text-muted-foreground flex opacity-0 group-hover/event:opacity-100 group-focus-visible/event:opacity-100 group-data-[panel-open]/event:rotate-90 group-data-[panel-open]/event:opacity-100 motion-safe:transition motion-safe:duration-150\">\n            <ChevronRight size={13} />\n          </span>\n        )}\n      </span>\n    </span>\n  );\n\n  if (!children) {\n    return (\n      <div className=\"max-w-full min-w-0\" role=\"group\" {...props}>\n        {header}\n      </div>\n    );\n  }\n\n  return (\n    <Collapsible defaultOpen={defaultOpen} className=\"max-w-full min-w-0\" role=\"group\" {...props}>\n      <CollapsibleTrigger className=\"group/event hover:bg-fill w-full cursor-pointer rounded-md text-left motion-safe:transition-colors\">\n        {header}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"max-w-full min-w-0\">\n        <div className=\"before:bg-border relative ml-[14px] max-w-full min-w-0 py-1.5 pr-1 pl-4 before:absolute before:inset-y-0 before:left-0 before:w-px before:mask-b-from-[calc(100%-min(40%,80px))] before:content-['']\">\n          {children}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n","import { truncateString } from '@/lib/truncate-string';\n\nexport function chatEventPreview(message: string): string {\n  return truncateString(message, 72);\n}\n","import { Bell, ExternalLink } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { ChatEvent } from './chat-event';\nimport { chatEventPreview } from './chat-event-preview';\nimport { getNotificationNoticeVariant } from './notification-variant';\nimport { Badge } from '@/ds/components/Badge';\nimport { Notice } from '@/ds/components/Notice';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface ChatNotificationProps {\n  label: string;\n  message: string;\n  variant?: 'row' | 'notice';\n  state?: string;\n  icon?: ReactNode;\n  priority?: string;\n  status?: string;\n  pending?: string;\n  link?: { href: string; label: string };\n  defaultOpen?: boolean;\n}\n\nexport function ChatNotification({\n  label,\n  message,\n  variant = 'row',\n  state = 'notification',\n  icon,\n  priority,\n  status,\n  pending,\n  link,\n  defaultOpen,\n}: ChatNotificationProps) {\n  if (variant === 'notice') {\n    const hasContent = Boolean(priority || status || pending || message || link);\n    return (\n      <Notice\n        variant={getNotificationNoticeVariant(priority)}\n        title={label}\n        icon={icon ?? <Bell />}\n        className=\"my-2 max-w-[80%]\"\n      >\n        {hasContent && (\n          <div className=\"flex flex-col gap-2\">\n            {(priority || status || pending) && (\n              <div className=\"flex flex-wrap items-center gap-2\">\n                {priority && <Badge size=\"xs\">{priority}</Badge>}\n                {status && <Badge size=\"xs\">{status}</Badge>}\n                {pending && <Badge size=\"xs\">{pending} pending</Badge>}\n              </div>\n            )}\n            {message && <Notice.Message className=\"break-words whitespace-pre-wrap\">{message}</Notice.Message>}\n            {link && <NotificationLink link={link} message={message} />}\n          </div>\n        )}\n      </Notice>\n    );\n  }\n\n  return (\n    <ChatEvent\n      label={label}\n      detail={chatEventPreview(message)}\n      icon={icon ?? <Bell size={13} className=\"text-warning1\" aria-hidden />}\n      defaultOpen={defaultOpen}\n      data-notification-state={state}\n      aria-label={`Notification: ${label}`}\n    >\n      <div className=\"flex flex-col gap-2\">\n        <Txt variant=\"caption\">{message}</Txt>\n        {link && <NotificationLink link={link} message={message} />}\n      </div>\n    </ChatEvent>\n  );\n}\n\nfunction NotificationLink({ link, message }: { link: NonNullable<ChatNotificationProps['link']>; message: string }) {\n  return (\n    <a\n      href={link.href}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      aria-label={`Open notification target: ${message}`}\n      className=\"text-muted-foreground hover:text-foreground text-meta flex w-fit items-center gap-1\"\n    >\n      {link.label}\n      <ExternalLink size={12} aria-hidden />\n    </a>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/{chat-notification-CkJAwiut.cjs → chat-notification-No7KdZVI.cjs}

@@ -3,32 +3,32 @@
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const useWatched = require('./use-watched-BixmYWp0.cjs');
-const collapsible = require('./collapsible-Ca7Zl4uS.cjs');
-const Txt = require('./Txt-Dy6h8r0i.cjs');
-const utils_cn = require('./cn-DqcFobIY.cjs');
+const collapsible = require('./collapsible-BvrI6XnN.cjs');
+const Txt = require('./Txt-B4-2nLaI.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
 const utils_truncateString = require('./utils/truncate-string.cjs.js');
 const domains_chat_messages_notificationSignalNoticeVariant = require('./domains/chat/messages/notification-signal-notice-variant.cjs.js');
-const Badge = require('./Badge-B9oOuqif.cjs');
-const Notice = require('./Notice-CafEiN9-.cjs');
+const Badge = require('./Badge-BEeYtjmv.cjs');
+const Notice = require('./Notice-DUb2QQqy.cjs');
 
 function ChatEventDetail({ children }) {
   const arriving = useWatched.useArriving();
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-xs", font: "mono", className: utils_cn.cn("text-icon3 min-w-0 truncate", arriving), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", font: "mono", className: utils_cn.cn("min-w-0 truncate", arriving), children });
 }
 function ChatEvent({ label, detail, icon, children, defaultOpen, ...props }) {
   const header = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center gap-2 px-1.5 py-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "ui-sm", className: "text-icon3 max-w-[55%] shrink-0 truncate", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", className: "max-w-[55%] shrink-0 truncate", children: label }),
     detail && /* @__PURE__ */ jsxRuntime.jsx(ChatEventDetail, { children: detail }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "min-w-2 flex-1" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3 flex opacity-0 group-hover/event:opacity-100 group-focus-visible/event:opacity-100 group-data-[panel-open]/event:rotate-90 group-data-[panel-open]/event:opacity-100 motion-safe:transition motion-safe:duration-150", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 13 }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground flex opacity-0 group-hover/event:opacity-100 group-focus-visible/event:opacity-100 group-data-[panel-open]/event:rotate-90 group-data-[panel-open]/event:opacity-100 motion-safe:transition motion-safe:duration-150", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 13 }) }) })
   ] });
   if (!children) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-full min-w-0", role: "group", ...props, children: header });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(collapsible.Collapsible, { defaultOpen, className: "max-w-full min-w-0", role: "group", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleTrigger, { className: "group/event hover:bg-neutral6/5 w-full cursor-pointer rounded-md text-left motion-safe:transition-colors", children: header }),
-    /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { className: "max-w-full min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "before:bg-border1 relative ml-[14px] max-w-full min-w-0 py-1.5 pr-1 pl-4 before:absolute before:inset-y-0 before:left-0 before:w-px before:mask-b-from-[calc(100%-min(40%,80px))] before:content-['']", children }) })
+    /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleTrigger, { className: "group/event hover:bg-fill w-full cursor-pointer rounded-md text-left motion-safe:transition-colors", children: header }),
+    /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { className: "max-w-full min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "before:bg-border relative ml-[14px] max-w-full min-w-0 py-1.5 pr-1 pl-4 before:absolute before:inset-y-0 before:left-0 before:w-px before:mask-b-from-[calc(100%-min(40%,80px))] before:content-['']", children }) })
   ] });
 }
 
@@ -82,7 +82,7 @@ function ChatNotification({
       "data-notification-state": state,
       "aria-label": `Notification: ${label}`,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "ui-sm", children: message }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", children: message }),
         link && /* @__PURE__ */ jsxRuntime.jsx(NotificationLink, { link, message })
       ] })
     }
@@ -96,7 +96,7 @@ function NotificationLink({ link, message }) {
       target: "_blank",
       rel: "noreferrer",
       "aria-label": `Open notification target: ${message}`,
-      className: "text-icon3 hover:text-icon5 text-ui-xs flex w-fit items-center gap-1",
+      className: "text-muted-foreground hover:text-foreground text-meta flex w-fit items-center gap-1",
       children: [
         link.label,
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 12, "aria-hidden": true })
@@ -108,4 +108,4 @@ function NotificationLink({ link, message }) {
 exports.ChatEvent = ChatEvent;
 exports.ChatNotification = ChatNotification;
 exports.chatEventPreview = chatEventPreview;
-//# sourceMappingURL=chat-notification-CkJAwiut.cjs.map
+//# sourceMappingURL=chat-notification-No7KdZVI.cjs.map

package/dist/chat-notification-No7KdZVI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-notification-No7KdZVI.cjs","sources":["../src/ds/components/ai/chat-event/chat-event.tsx","../src/ds/components/ai/chat-event/chat-event-preview.ts","../src/ds/components/ai/chat-event/chat-notification.tsx"],"sourcesContent":["import { ChevronRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useArriving } from '@/ds/components/Arrival';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\ninterface ChatEventProps {\n  label: string;\n  detail?: string;\n  icon: ReactNode;\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  'aria-label': string;\n  'data-signal-kind'?: string;\n  'data-notification-state'?: string;\n  'data-skill-name'?: string;\n}\n\nfunction ChatEventDetail({ children }: { children: string }) {\n  const arriving = useArriving();\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"muted\" font=\"mono\" className={cn('min-w-0 truncate', arriving)}>\n      {children}\n    </Txt>\n  );\n}\n\nexport function ChatEvent({ label, detail, icon, children, defaultOpen, ...props }: ChatEventProps) {\n  const header = (\n    <span className=\"flex w-full min-w-0 items-center gap-2 px-1.5 py-1\">\n      <span className=\"flex size-4 shrink-0 items-center justify-center\">{icon}</span>\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-[55%] shrink-0 truncate\">\n        {label}\n      </Txt>\n      {detail && <ChatEventDetail>{detail}</ChatEventDetail>}\n      <span aria-hidden className=\"min-w-2 flex-1\" />\n      <span aria-hidden className=\"flex size-4 shrink-0 items-center justify-center\">\n        {children && (\n          <span className=\"text-muted-foreground flex opacity-0 group-hover/event:opacity-100 group-focus-visible/event:opacity-100 group-data-[panel-open]/event:rotate-90 group-data-[panel-open]/event:opacity-100 motion-safe:transition motion-safe:duration-150\">\n            <ChevronRight size={13} />\n          </span>\n        )}\n      </span>\n    </span>\n  );\n\n  if (!children) {\n    return (\n      <div className=\"max-w-full min-w-0\" role=\"group\" {...props}>\n        {header}\n      </div>\n    );\n  }\n\n  return (\n    <Collapsible defaultOpen={defaultOpen} className=\"max-w-full min-w-0\" role=\"group\" {...props}>\n      <CollapsibleTrigger className=\"group/event hover:bg-fill w-full cursor-pointer rounded-md text-left motion-safe:transition-colors\">\n        {header}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"max-w-full min-w-0\">\n        <div className=\"before:bg-border relative ml-[14px] max-w-full min-w-0 py-1.5 pr-1 pl-4 before:absolute before:inset-y-0 before:left-0 before:w-px before:mask-b-from-[calc(100%-min(40%,80px))] before:content-['']\">\n          {children}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n","import { truncateString } from '@/lib/truncate-string';\n\nexport function chatEventPreview(message: string): string {\n  return truncateString(message, 72);\n}\n","import { Bell, ExternalLink } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { ChatEvent } from './chat-event';\nimport { chatEventPreview } from './chat-event-preview';\nimport { getNotificationNoticeVariant } from './notification-variant';\nimport { Badge } from '@/ds/components/Badge';\nimport { Notice } from '@/ds/components/Notice';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface ChatNotificationProps {\n  label: string;\n  message: string;\n  variant?: 'row' | 'notice';\n  state?: string;\n  icon?: ReactNode;\n  priority?: string;\n  status?: string;\n  pending?: string;\n  link?: { href: string; label: string };\n  defaultOpen?: boolean;\n}\n\nexport function ChatNotification({\n  label,\n  message,\n  variant = 'row',\n  state = 'notification',\n  icon,\n  priority,\n  status,\n  pending,\n  link,\n  defaultOpen,\n}: ChatNotificationProps) {\n  if (variant === 'notice') {\n    const hasContent = Boolean(priority || status || pending || message || link);\n    return (\n      <Notice\n        variant={getNotificationNoticeVariant(priority)}\n        title={label}\n        icon={icon ?? <Bell />}\n        className=\"my-2 max-w-[80%]\"\n      >\n        {hasContent && (\n          <div className=\"flex flex-col gap-2\">\n            {(priority || status || pending) && (\n              <div className=\"flex flex-wrap items-center gap-2\">\n                {priority && <Badge size=\"xs\">{priority}</Badge>}\n                {status && <Badge size=\"xs\">{status}</Badge>}\n                {pending && <Badge size=\"xs\">{pending} pending</Badge>}\n              </div>\n            )}\n            {message && <Notice.Message className=\"break-words whitespace-pre-wrap\">{message}</Notice.Message>}\n            {link && <NotificationLink link={link} message={message} />}\n          </div>\n        )}\n      </Notice>\n    );\n  }\n\n  return (\n    <ChatEvent\n      label={label}\n      detail={chatEventPreview(message)}\n      icon={icon ?? <Bell size={13} className=\"text-warning1\" aria-hidden />}\n      defaultOpen={defaultOpen}\n      data-notification-state={state}\n      aria-label={`Notification: ${label}`}\n    >\n      <div className=\"flex flex-col gap-2\">\n        <Txt variant=\"caption\">{message}</Txt>\n        {link && <NotificationLink link={link} message={message} />}\n      </div>\n    </ChatEvent>\n  );\n}\n\nfunction NotificationLink({ link, message }: { link: NonNullable<ChatNotificationProps['link']>; message: string }) {\n  return (\n    <a\n      href={link.href}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n      aria-label={`Open notification target: ${message}`}\n      className=\"text-muted-foreground hover:text-foreground text-meta flex w-fit items-center gap-1\"\n    >\n      {link.label}\n      <ExternalLink size={12} aria-hidden />\n    </a>\n  );\n}\n"],"names":["useArriving","jsx","Txt","cn","jsxs","ChevronRight","Collapsible","CollapsibleTrigger","CollapsibleContent","truncateString","Notice","getNotificationNoticeVariant","Bell","Badge","ExternalLink"],"mappings":"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"}

package/dist/{chat-signal-CvrzAwZU.cjs → chat-signal-B9ZJxqiZ.cjs}

@@ -2,25 +2,25 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const chatNotification = require('./chat-notification-CkJAwiut.cjs');
-const Txt = require('./Txt-Dy6h8r0i.cjs');
+const chatNotification = require('./chat-notification-No7KdZVI.cjs');
+const Txt = require('./Txt-B4-2nLaI.cjs');
 
 const rowIcons = {
   state: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, { size: 13, className: "text-purple-400", "aria-hidden": true }),
   reminder: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 13, className: "text-accent3", "aria-hidden": true }),
-  reactive: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 13, className: "text-icon3", "aria-hidden": true })
+  reactive: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 13, className: "text-muted-foreground", "aria-hidden": true })
 };
 function ChatSignal({ kind, label, message, mode, variant = "row", defaultOpen }) {
   if (variant === "card") {
     const Icon = kind === "state" ? lucideReact.Database : lucideReact.Radio;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border1 bg-surface2 text-foreground my-2 max-w-[80%] rounded-lg border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-icon3 mt-0.5 size-4 shrink-0", "aria-hidden": true }),
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border bg-background text-foreground my-2 max-w-[80%] rounded-lg border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-muted-foreground mt-0.5 size-4 shrink-0", "aria-hidden": true }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-sm leading-ui-sm text-foreground font-medium", children: label }),
-          mode && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border1 text-ui-sm text-muted-foreground inline-flex items-center rounded-full border px-1.5 py-0.5 leading-none", children: mode })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-column text-foreground", children: label }),
+          mode && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border text-caption text-muted-foreground inline-flex items-center rounded-full border px-1.5 py-0.5 leading-none", children: mode })
         ] }),
-        message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-sm leading-ui-md mt-2 break-words whitespace-pre-wrap", children: message })
+        message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-caption mt-2 break-words whitespace-pre-wrap", children: message })
       ] })
     ] }) });
   }
@@ -33,10 +33,10 @@ function ChatSignal({ kind, label, message, mode, variant = "row", defaultOpen }
       defaultOpen,
       "data-signal-kind": kind,
       "aria-label": `Signal: ${label}`,
-      children: message && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "ui-sm", className: "break-words whitespace-pre-wrap", children: message })
+      children: message && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", className: "break-words whitespace-pre-wrap", children: message })
     }
   );
 }
 
 exports.ChatSignal = ChatSignal;
-//# sourceMappingURL=chat-signal-CvrzAwZU.cjs.map
+//# sourceMappingURL=chat-signal-B9ZJxqiZ.cjs.map

package/dist/chat-signal-B9ZJxqiZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-signal-B9ZJxqiZ.cjs","sources":["../src/ds/components/ai/chat-event/chat-signal.tsx"],"sourcesContent":["import { Database, Info, Layers, Radio } from 'lucide-react';\nimport { ChatEvent } from './chat-event';\nimport { chatEventPreview } from './chat-event-preview';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface ChatSignalProps {\n  kind: 'state' | 'reactive' | 'reminder';\n  label: string;\n  message: string;\n  mode?: string;\n  variant?: 'row' | 'card';\n  defaultOpen?: boolean;\n}\n\nconst rowIcons = {\n  state: <Layers size={13} className=\"text-purple-400\" aria-hidden />,\n  reminder: <Info size={13} className=\"text-accent3\" aria-hidden />,\n  reactive: <Info size={13} className=\"text-muted-foreground\" aria-hidden />,\n};\n\nexport function ChatSignal({ kind, label, message, mode, variant = 'row', defaultOpen }: ChatSignalProps) {\n  if (variant === 'card') {\n    const Icon = kind === 'state' ? Database : Radio;\n    return (\n      <div className=\"border-border bg-background text-foreground my-2 max-w-[80%] rounded-lg border px-4 py-3\">\n        <div className=\"flex items-start gap-3\">\n          <Icon className=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden />\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <p className=\"text-column text-foreground\">{label}</p>\n              {mode && (\n                <span className=\"border-border text-caption text-muted-foreground inline-flex items-center rounded-full border px-1.5 py-0.5 leading-none\">\n                  {mode}\n                </span>\n              )}\n            </div>\n            {message && <p className=\"text-caption mt-2 break-words whitespace-pre-wrap\">{message}</p>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <ChatEvent\n      label={label}\n      detail={chatEventPreview(message)}\n      icon={rowIcons[kind]}\n      defaultOpen={defaultOpen}\n      data-signal-kind={kind}\n      aria-label={`Signal: ${label}`}\n    >\n      {message && (\n        <Txt variant=\"caption\" className=\"break-words whitespace-pre-wrap\">\n          {message}\n        </Txt>\n      )}\n    </ChatEvent>\n  );\n}\n"],"names":["Layers","Info","Database","Radio","jsxs","jsx","ChatEvent","chatEventPreview","Txt"],"mappings":";;;;;;;AAcA,MAAM,QAAA,GAAW;AAAA,EACf,KAAA,iCAAQA,kBAAA,EAAA,EAAO,IAAA,EAAM,IAAI,SAAA,EAAU,iBAAA,EAAkB,eAAW,IAAA,EAAC,CAAA;AAAA,EACjE,QAAA,iCAAWC,gBAAA,EAAA,EAAK,IAAA,EAAM,IAAI,SAAA,EAAU,cAAA,EAAe,eAAW,IAAA,EAAC,CAAA;AAAA,EAC/D,QAAA,iCAAWA,gBAAA,EAAA,EAAK,IAAA,EAAM,IAAI,SAAA,EAAU,uBAAA,EAAwB,eAAW,IAAA,EAAC;AAC1E,CAAA;AAEO,SAAS,UAAA,CAAW,EAAE,IAAA,EAAM,KAAA,EAAO,SAAS,IAAA,EAAM,OAAA,GAAU,KAAA,EAAO,WAAA,EAAY,EAAoB;AACxG,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,MAAM,IAAA,GAAO,IAAA,KAAS,OAAA,GAAUC,oBAAA,GAAWC,iBAAA;AAC3C,IAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,4FACb,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wBAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,8CAAA,EAA+C,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,sBAC3ED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UACjD,IAAA,oBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4HACb,QAAA,EAAA,IAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,OAAA,oBAAWA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qDAAqD,QAAA,EAAA,OAAA,EAAQ;AAAA,OAAA,EACxF;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEA,cAAA;AAAA,IAACC,0BAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA,EAAQC,kCAAiB,OAAO,CAAA;AAAA,MAChC,IAAA,EAAM,SAAS,IAAI,CAAA;AAAA,MACnB,WAAA;AAAA,MACA,kBAAA,EAAkB,IAAA;AAAA,MAClB,YAAA,EAAY,WAAW,KAAK,CAAA,CAAA;AAAA,MAE3B,qCACCF,cAAA,CAACG,OAAA,EAAA,EAAI,SAAQ,SAAA,EAAU,SAAA,EAAU,mCAC9B,QAAA,EAAA,OAAA,EACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/{chat-signal-zDrInrSG.js → chat-signal-B_O242yq.js}

@@ -1,24 +1,24 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Database, Radio, Info, Layers } from 'lucide-react';
-import { a as ChatEvent, c as chatEventPreview } from './chat-notification-D7J8goLv.js';
-import { T as Txt } from './Txt-vsOCKfz7.js';
+import { a as ChatEvent, c as chatEventPreview } from './chat-notification-DKNF9o7j.js';
+import { T as Txt } from './Txt-DTh3Pa_a.js';
 
 const rowIcons = {
   state: /* @__PURE__ */ jsx(Layers, { size: 13, className: "text-purple-400", "aria-hidden": true }),
   reminder: /* @__PURE__ */ jsx(Info, { size: 13, className: "text-accent3", "aria-hidden": true }),
-  reactive: /* @__PURE__ */ jsx(Info, { size: 13, className: "text-icon3", "aria-hidden": true })
+  reactive: /* @__PURE__ */ jsx(Info, { size: 13, className: "text-muted-foreground", "aria-hidden": true })
 };
 function ChatSignal({ kind, label, message, mode, variant = "row", defaultOpen }) {
   if (variant === "card") {
     const Icon = kind === "state" ? Database : Radio;
-    return /* @__PURE__ */ jsx("div", { className: "border-border1 bg-surface2 text-foreground my-2 max-w-[80%] rounded-lg border px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx(Icon, { className: "text-icon3 mt-0.5 size-4 shrink-0", "aria-hidden": true }),
+    return /* @__PURE__ */ jsx("div", { className: "border-border bg-background text-foreground my-2 max-w-[80%] rounded-lg border px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground mt-0.5 size-4 shrink-0", "aria-hidden": true }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-ui-sm leading-ui-sm text-foreground font-medium", children: label }),
-          mode && /* @__PURE__ */ jsx("span", { className: "border-border1 text-ui-sm text-muted-foreground inline-flex items-center rounded-full border px-1.5 py-0.5 leading-none", children: mode })
+          /* @__PURE__ */ jsx("p", { className: "text-column text-foreground", children: label }),
+          mode && /* @__PURE__ */ jsx("span", { className: "border-border text-caption text-muted-foreground inline-flex items-center rounded-full border px-1.5 py-0.5 leading-none", children: mode })
         ] }),
-        message && /* @__PURE__ */ jsx("p", { className: "text-ui-sm leading-ui-md mt-2 break-words whitespace-pre-wrap", children: message })
+        message && /* @__PURE__ */ jsx("p", { className: "text-caption mt-2 break-words whitespace-pre-wrap", children: message })
       ] })
     ] }) });
   }
@@ -31,10 +31,10 @@ function ChatSignal({ kind, label, message, mode, variant = "row", defaultOpen }
       defaultOpen,
       "data-signal-kind": kind,
       "aria-label": `Signal: ${label}`,
-      children: message && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "break-words whitespace-pre-wrap", children: message })
+      children: message && /* @__PURE__ */ jsx(Txt, { variant: "caption", className: "break-words whitespace-pre-wrap", children: message })
     }
   );
 }
 
 export { ChatSignal as C };
-//# sourceMappingURL=chat-signal-zDrInrSG.js.map
+//# sourceMappingURL=chat-signal-B_O242yq.js.map

package/dist/chat-signal-B_O242yq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-signal-B_O242yq.js","sources":["../src/ds/components/ai/chat-event/chat-signal.tsx"],"sourcesContent":["import { Database, Info, Layers, Radio } from 'lucide-react';\nimport { ChatEvent } from './chat-event';\nimport { chatEventPreview } from './chat-event-preview';\nimport { Txt } from '@/ds/components/Txt';\n\nexport interface ChatSignalProps {\n  kind: 'state' | 'reactive' | 'reminder';\n  label: string;\n  message: string;\n  mode?: string;\n  variant?: 'row' | 'card';\n  defaultOpen?: boolean;\n}\n\nconst rowIcons = {\n  state: <Layers size={13} className=\"text-purple-400\" aria-hidden />,\n  reminder: <Info size={13} className=\"text-accent3\" aria-hidden />,\n  reactive: <Info size={13} className=\"text-muted-foreground\" aria-hidden />,\n};\n\nexport function ChatSignal({ kind, label, message, mode, variant = 'row', defaultOpen }: ChatSignalProps) {\n  if (variant === 'card') {\n    const Icon = kind === 'state' ? Database : Radio;\n    return (\n      <div className=\"border-border bg-background text-foreground my-2 max-w-[80%] rounded-lg border px-4 py-3\">\n        <div className=\"flex items-start gap-3\">\n          <Icon className=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden />\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <p className=\"text-column text-foreground\">{label}</p>\n              {mode && (\n                <span className=\"border-border text-caption text-muted-foreground inline-flex items-center rounded-full border px-1.5 py-0.5 leading-none\">\n                  {mode}\n                </span>\n              )}\n            </div>\n            {message && <p className=\"text-caption mt-2 break-words whitespace-pre-wrap\">{message}</p>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <ChatEvent\n      label={label}\n      detail={chatEventPreview(message)}\n      icon={rowIcons[kind]}\n      defaultOpen={defaultOpen}\n      data-signal-kind={kind}\n      aria-label={`Signal: ${label}`}\n    >\n      {message && (\n        <Txt variant=\"caption\" className=\"break-words whitespace-pre-wrap\">\n          {message}\n        </Txt>\n      )}\n    </ChatEvent>\n  );\n}\n"],"names":[],"mappings":";;;;;AAcA,MAAM,QAAA,GAAW;AAAA,EACf,KAAA,sBAAQ,MAAA,EAAA,EAAO,IAAA,EAAM,IAAI,SAAA,EAAU,iBAAA,EAAkB,eAAW,IAAA,EAAC,CAAA;AAAA,EACjE,QAAA,sBAAW,IAAA,EAAA,EAAK,IAAA,EAAM,IAAI,SAAA,EAAU,cAAA,EAAe,eAAW,IAAA,EAAC,CAAA;AAAA,EAC/D,QAAA,sBAAW,IAAA,EAAA,EAAK,IAAA,EAAM,IAAI,SAAA,EAAU,uBAAA,EAAwB,eAAW,IAAA,EAAC;AAC1E,CAAA;AAEO,SAAS,UAAA,CAAW,EAAE,IAAA,EAAM,KAAA,EAAO,SAAS,IAAA,EAAM,OAAA,GAAU,KAAA,EAAO,WAAA,EAAY,EAAoB;AACxG,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,MAAM,IAAA,GAAO,IAAA,KAAS,OAAA,GAAU,QAAA,GAAW,KAAA;AAC3C,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAU,4FACb,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,8CAAA,EAA+C,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,sBAC3E,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UACjD,IAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4HACb,QAAA,EAAA,IAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,OAAA,oBAAW,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qDAAqD,QAAA,EAAA,OAAA,EAAQ;AAAA,OAAA,EACxF;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA,EAAQ,iBAAiB,OAAO,CAAA;AAAA,MAChC,IAAA,EAAM,SAAS,IAAI,CAAA;AAAA,MACnB,WAAA;AAAA,MACA,kBAAA,EAAkB,IAAA;AAAA,MAClB,YAAA,EAAY,WAAW,KAAK,CAAA,CAAA;AAAA,MAE3B,qCACC,GAAA,CAAC,GAAA,EAAA,EAAI,SAAQ,SAAA,EAAU,SAAA,EAAU,mCAC9B,QAAA,EAAA,OAAA,EACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}