@burtson-labs/ui 0.5.1 → 0.7.0

package/dist/components/message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","names":[],"sources":["../../src/components/message.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport type MessageRole = 'user' | 'assistant' | 'system';\n\nexport interface MessageProps extends React.ComponentProps<'div'> {\n  /** Who wrote it. (Not `role`, which is the ARIA attribute.) */\n  from: MessageRole;\n  /** Avatar or agent mark beside assistant messages. */\n  avatar?: React.ReactNode;\n  /** Sender name shown above the message, e.g. the agent's name. */\n  name?: React.ReactNode;\n  /** Timestamp or status text. */\n  meta?: React.ReactNode;\n  /** Actions such as copy and retry, shown on hover and focus. */\n  actions?: React.ReactNode;\n}\n\n/**\n * One turn in a conversation. User turns sit on the right in a quiet bubble,\n * assistant turns read full width with an optional avatar, and system notes\n * are centred and small.\n */\nfunction Message({\n  from,\n  avatar,\n  name,\n  meta,\n  actions,\n  children,\n  className,\n  ...props\n}: MessageProps) {\n  if (from === 'system') {\n    return (\n      <div\n        data-slot=\"message\"\n        data-role=\"system\"\n        className={cn('mx-auto max-w-prose text-center text-xs text-muted-foreground', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n  const user = from === 'user';\n  return (\n    <div\n      data-slot=\"message\"\n      data-role={from}\n      className={cn(\n        'group/message flex animate-in gap-3',\n        user ? 'justify-end' : 'justify-start',\n        className,\n      )}\n      {...props}\n    >\n      {!user && avatar && (\n        <div className=\"mt-0.5 grid size-7 shrink-0 place-items-center overflow-hidden rounded-md border border-brand/15 bg-brand-soft text-brand [&_svg]:size-4\">\n          {avatar}\n        </div>\n      )}\n      <div\n        className={cn('grid min-w-0 gap-1.5', user ? 'max-w-[85%] justify-items-end' : 'flex-1')}\n      >\n        {(name || meta) && (\n          <div className=\"flex items-baseline gap-2 text-xs\">\n            {name && <span className=\"font-semibold text-foreground\">{name}</span>}\n            {meta && <span className=\"text-muted-foreground\">{meta}</span>}\n          </div>\n        )}\n        <div\n          data-slot=\"message-body\"\n          className={cn(\n            'min-w-0 text-sm leading-6',\n            user && 'rounded-lg rounded-tr-xs bg-secondary px-3.5 py-2 text-secondary-foreground',\n          )}\n        >\n          {children}\n        </div>\n        {actions && (\n          <div className=\"flex gap-1 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 max-md:opacity-100\">\n            {actions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport { Message };\n"],"mappings":";;;;;;;;;AAwBA,SAAS,QAAQ,EACf,MACA,QACA,MACA,MACA,SACA,UACA,WACA,GAAG,SACY;CACf,IAAI,SAAS,UACX,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAU;EACV,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;EAEH;CACE,CAAA;CAGT,MAAM,OAAO,SAAS;CACtB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,uCACA,OAAO,gBAAgB,iBACvB,SACF;EACA,GAAI;EARN,UAAA,CAUG,CAAC,QAAQ,UACR,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;EACE,CAAA,GAEP,qBAAC,OAAD;GACE,WAAW,GAAG,wBAAwB,OAAO,kCAAkC,QAAQ;GADzF,UAAA;KAGI,QAAQ,SACR,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,QAAQ,oBAAC,QAAD;MAAM,WAAU;MAAiC,UAAA;KAAW,CAAA,GACpE,QAAQ,oBAAC,QAAD;MAAM,WAAU;MAAyB,UAAA;KAAW,CAAA,CAC1D;;IAEP,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,GACT,6BACA,QAAQ,6EACV;KAEC;IACE,CAAA;IACJ,WACC,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA;GAEJ;EACF,CAAA,CAAA;;AAET"}

package/dist/components/reasoning.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface ReasoningProps extends React.ComponentProps<'div'> {
+    /** True while the model is still thinking. */
+    streaming?: boolean;
+    durationMs?: number;
+    defaultOpen?: boolean;
+}
+/** A model's reasoning, collapsed to one line ("Thought for 3s") unless opened. */
+declare function Reasoning({ streaming, durationMs, defaultOpen, children, className, ...props }: ReasoningProps): React.JSX.Element;
+/** Three pulsing dots while a reply is on its way. Still under reduced motion. */
+declare function StreamingIndicator({ className, label, ...props }: React.ComponentProps<'span'> & {
+    label?: string;
+}): React.JSX.Element;
+export { Reasoning, StreamingIndicator };

package/dist/components/reasoning.js

@@ -0,0 +1,61 @@
+import { cn } from "../lib/utils.js";
+import { Collapsible } from "radix-ui";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChevronRight from "@burtson-labs/icons/react/chevron-right";
+import Lightbulb from "@burtson-labs/icons/react/lightbulb";
+//#region src/components/reasoning.tsx
+/** A model's reasoning, collapsed to one line ("Thought for 3s") unless opened. */
+function Reasoning({ streaming = false, durationMs, defaultOpen = false, children, className, ...props }) {
+	const label = streaming ? "Thinking…" : durationMs !== void 0 ? `Thought for ${Math.max(1, Math.round(durationMs / 1e3))}s` : "Reasoning";
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		defaultOpen,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "reasoning",
+			className: cn("grid gap-1.5", className),
+			...props,
+			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				className: "group/reasoning inline-flex w-fit items-center gap-1.5 rounded-sm text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20",
+				children: [
+					/* @__PURE__ */ jsx(Lightbulb, {
+						className: cn("size-3.5", streaming && "animate-pulse"),
+						"aria-hidden": true
+					}),
+					label,
+					/* @__PURE__ */ jsx(ChevronRight, {
+						"aria-hidden": true,
+						className: "size-3.5 transition-transform group-data-[state=open]/reasoning:rotate-90"
+					})
+				]
+			}), /* @__PURE__ */ jsx(Collapsible.Content, {
+				className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "border-l-2 border-border-strong pl-3 text-[13px] leading-6 text-muted-foreground",
+					children
+				})
+			})]
+		})
+	});
+}
+/** Three pulsing dots while a reply is on its way. Still under reduced motion. */
+function StreamingIndicator({ className, label = "Assistant is typing", ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "streaming-indicator",
+		role: "status",
+		"aria-label": label,
+		className: cn("inline-flex h-5 items-center gap-1", className),
+		...props,
+		children: [
+			0,
+			150,
+			300
+		].map((delay) => /* @__PURE__ */ jsx("span", {
+			className: "size-1.5 animate-bounce rounded-full bg-muted-foreground motion-reduce:animate-none",
+			style: { animationDelay: `${delay}ms` }
+		}, delay))
+	});
+}
+//#endregion
+export { Reasoning, StreamingIndicator };
+
+//# sourceMappingURL=reasoning.js.map

package/dist/components/reasoning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reasoning.js","names":["CollapsiblePrimitive"],"sources":["../../src/components/reasoning.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport Lightbulb from '@burtson-labs/icons/react/lightbulb';\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface ReasoningProps extends React.ComponentProps<'div'> {\n  /** True while the model is still thinking. */\n  streaming?: boolean;\n  durationMs?: number;\n  defaultOpen?: boolean;\n}\n\n/** A model's reasoning, collapsed to one line (\"Thought for 3s\") unless opened. */\nfunction Reasoning({\n  streaming = false,\n  durationMs,\n  defaultOpen = false,\n  children,\n  className,\n  ...props\n}: ReasoningProps) {\n  const label = streaming\n    ? 'Thinking…'\n    : durationMs !== undefined\n      ? `Thought for ${Math.max(1, Math.round(durationMs / 1000))}s`\n      : 'Reasoning';\n  return (\n    <CollapsiblePrimitive.Root defaultOpen={defaultOpen}>\n      <div data-slot=\"reasoning\" className={cn('grid gap-1.5', className)} {...props}>\n        <CollapsiblePrimitive.Trigger className=\"group/reasoning inline-flex w-fit items-center gap-1.5 rounded-sm text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\">\n          <Lightbulb className={cn('size-3.5', streaming && 'animate-pulse')} aria-hidden />\n          {label}\n          <ChevronRight\n            aria-hidden\n            className=\"size-3.5 transition-transform group-data-[state=open]/reasoning:rotate-90\"\n          />\n        </CollapsiblePrimitive.Trigger>\n        <CollapsiblePrimitive.Content className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n          <div className=\"border-l-2 border-border-strong pl-3 text-[13px] leading-6 text-muted-foreground\">\n            {children}\n          </div>\n        </CollapsiblePrimitive.Content>\n      </div>\n    </CollapsiblePrimitive.Root>\n  );\n}\n\n/** Three pulsing dots while a reply is on its way. Still under reduced motion. */\nfunction StreamingIndicator({\n  className,\n  label = 'Assistant is typing',\n  ...props\n}: React.ComponentProps<'span'> & { label?: string }) {\n  return (\n    <span\n      data-slot=\"streaming-indicator\"\n      role=\"status\"\n      aria-label={label}\n      className={cn('inline-flex h-5 items-center gap-1', className)}\n      {...props}\n    >\n      {[0, 150, 300].map((delay) => (\n        <span\n          key={delay}\n          className=\"size-1.5 animate-bounce rounded-full bg-muted-foreground motion-reduce:animate-none\"\n          style={{ animationDelay: `${delay}ms` }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport { Reasoning, StreamingIndicator };\n"],"mappings":";;;;;;;;AAeA,SAAS,UAAU,EACjB,YAAY,OACZ,YACA,cAAc,OACd,UACA,WACA,GAAG,SACc;CACjB,MAAM,QAAQ,YACV,cACA,eAAe,KAAA,IACb,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,aAAa,GAAI,CAAC,EAAE,KAC1D;CACN,OACE,oBAACA,YAAqB,MAAtB;EAAwC;EACtC,UAAA,qBAAC,OAAD;GAAK,aAAU;GAAY,WAAW,GAAG,gBAAgB,SAAS;GAAG,GAAI;GAAzE,UAAA,CACE,qBAACA,YAAqB,SAAtB;IAA8B,WAAU;IAAxC,UAAA;KACE,oBAAC,WAAD;MAAW,WAAW,GAAG,YAAY,aAAa,eAAe;MAAG,eAAA;KAAa,CAAA;KAChF;KACD,oBAAC,cAAD;MACE,eAAA;MACA,WAAU;KACX,CAAA;IAC2B;GAC9B,CAAA,GAAA,oBAACA,YAAqB,SAAtB;IAA8B,WAAU;IACtC,UAAA,oBAAC,OAAD;KAAK,WAAU;KACZ;IACE,CAAA;GACuB,CAAA,CAC3B;;CACoB,CAAA;AAE/B;;AAGA,SAAS,mBAAmB,EAC1B,WACA,QAAQ,uBACR,GAAG,SACiD;CACpD,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;EAEH,UAAA;GAAC;GAAG;GAAK;EAAG,CAAC,CAAC,KAAK,UAClB,oBAAC,QAAD;GAEE,WAAU;GACV,OAAO,EAAE,gBAAgB,GAAG,MAAM,IAAI;EACvC,GAHM,KAGN,CACF;CACG,CAAA;AAEV"}

package/dist/components/secret-input.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface SecretInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {
+    /** What is hidden, for the toggle's name ("Show API key"). */
+    revealLabel?: string;
+}
+/**
+ * Password-style input with a show/hide toggle, in monospace so keys and
+ * tokens read cleanly. The toggle is hidden while the field is disabled.
+ */
+declare function SecretInput({ className, revealLabel, disabled, ...props }: SecretInputProps): React.JSX.Element;
+export { SecretInput };

package/dist/components/secret-input.js

@@ -0,0 +1,40 @@
+import { cn } from "../lib/utils.js";
+import { Input } from "./input.js";
+import { IconButton } from "./icon-button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Eye from "@burtson-labs/icons/react/eye";
+import EyeOff from "@burtson-labs/icons/react/eye-off";
+//#region src/components/secret-input.tsx
+/**
+* Password-style input with a show/hide toggle, in monospace so keys and
+* tokens read cleanly. The toggle is hidden while the field is disabled.
+*/
+function SecretInput({ className, revealLabel = "value", disabled, ...props }) {
+	const [revealed, setRevealed] = React.useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "secret-input",
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Input, {
+			type: revealed && !disabled ? "text" : "password",
+			autoComplete: "off",
+			spellCheck: false,
+			disabled,
+			className: cn("pr-10 font-mono", className),
+			...props
+		}), !disabled && /* @__PURE__ */ jsx(IconButton, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			label: revealed ? `Hide ${revealLabel}` : `Show ${revealLabel}`,
+			"aria-pressed": revealed,
+			className: "absolute top-1/2 right-1 -translate-y-1/2",
+			onClick: () => setRevealed((r) => !r),
+			children: revealed ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": true })
+		})]
+	});
+}
+//#endregion
+export { SecretInput };
+
+//# sourceMappingURL=secret-input.js.map

package/dist/components/secret-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secret-input.js","names":[],"sources":["../../src/components/secret-input.tsx"],"sourcesContent":["import Eye from '@burtson-labs/icons/react/eye';\nimport EyeOff from '@burtson-labs/icons/react/eye-off';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { IconButton } from './icon-button';\nimport { Input } from './input';\n\nexport interface SecretInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {\n  /** What is hidden, for the toggle's name (\"Show API key\"). */\n  revealLabel?: string;\n}\n\n/**\n * Password-style input with a show/hide toggle, in monospace so keys and\n * tokens read cleanly. The toggle is hidden while the field is disabled.\n */\nfunction SecretInput({ className, revealLabel = 'value', disabled, ...props }: SecretInputProps) {\n  const [revealed, setRevealed] = React.useState(false);\n  return (\n    <div data-slot=\"secret-input\" className=\"relative\">\n      <Input\n        type={revealed && !disabled ? 'text' : 'password'}\n        autoComplete=\"off\"\n        spellCheck={false}\n        disabled={disabled}\n        className={cn('pr-10 font-mono', className)}\n        {...props}\n      />\n      {!disabled && (\n        <IconButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          label={revealed ? `Hide ${revealLabel}` : `Show ${revealLabel}`}\n          aria-pressed={revealed}\n          className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n          onClick={() => setRevealed((r) => !r)}\n        >\n          {revealed ? <EyeOff aria-hidden /> : <Eye aria-hidden />}\n        </IconButton>\n      )}\n    </div>\n  );\n}\n\nexport { SecretInput };\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAS,YAAY,EAAE,WAAW,cAAc,SAAS,UAAU,GAAG,SAA2B;CAC/F,MAAM,CAAC,UAAU,eAAe,MAAM,SAAS,KAAK;CACpD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAe,WAAU;EAAxC,UAAA,CACE,oBAAC,OAAD;GACE,MAAM,YAAY,CAAC,WAAW,SAAS;GACvC,cAAa;GACb,YAAY;GACF;GACV,WAAW,GAAG,mBAAmB,SAAS;GAC1C,GAAI;EACL,CAAA,GACA,CAAC,YACA,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,OAAO,WAAW,QAAQ,gBAAgB,QAAQ;GAClD,gBAAc;GACd,WAAU;GACV,eAAe,aAAa,MAAM,CAAC,CAAC;GAEnC,UAAA,WAAW,oBAAC,QAAD,EAAQ,eAAA,KAAa,CAAA,IAAI,oBAAC,KAAD,EAAK,eAAA,KAAa,CAAA;EAC7C,CAAA,CAEX;;AAET"}

package/dist/components/slider.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface SliderProps extends Omit<React.ComponentProps<'input'>, 'type' | 'value' | 'onChange'> {
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+/**
+ * A single-value range slider on the native input, so keyboard, touch and
+ * screen readers work without extra code. Pass `aria-valuetext` when the raw
+ * number isn't meaningful ("45% change").
+ */
+declare function Slider({ className, value, onValueChange, min, max, step, style, ...props }: SliderProps): React.JSX.Element;
+export { Slider };

package/dist/components/slider.js

@@ -0,0 +1,31 @@
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/slider.tsx
+/**
+* A single-value range slider on the native input, so keyboard, touch and
+* screen readers work without extra code. Pass `aria-valuetext` when the raw
+* number isn't meaningful ("45% change").
+*/
+function Slider({ className, value, onValueChange, min = 0, max = 100, step = 1, style, ...props }) {
+	const percent = max > min ? (value - min) / (max - min) * 100 : 0;
+	return /* @__PURE__ */ jsx("input", {
+		type: "range",
+		"data-slot": "slider",
+		min,
+		max,
+		step,
+		value,
+		onChange: (event) => onValueChange(Number(event.target.value)),
+		style: {
+			...style,
+			["--bl-slider-fill"]: `${percent}%`
+		},
+		className: cn("h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60", "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full", "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-muted)_var(--bl-slider-fill))]", "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted", "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background", "focus-visible:[&::-webkit-slider-thumb]:ring-[3px] focus-visible:[&::-webkit-slider-thumb]:ring-ring/30", "focus-visible:[&::-moz-range-thumb]:ring-[3px] focus-visible:[&::-moz-range-thumb]:ring-ring/30", className),
+		...props
+	});
+}
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/components/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface SliderProps extends Omit<\n  React.ComponentProps<'input'>,\n  'type' | 'value' | 'onChange'\n> {\n  value: number;\n  onValueChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n}\n\n/**\n * A single-value range slider on the native input, so keyboard, touch and\n * screen readers work without extra code. Pass `aria-valuetext` when the raw\n * number isn't meaningful (\"45% change\").\n */\nfunction Slider({\n  className,\n  value,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  style,\n  ...props\n}: SliderProps) {\n  const percent = max > min ? ((value - min) / (max - min)) * 100 : 0;\n  return (\n    <input\n      type=\"range\"\n      data-slot=\"slider\"\n      min={min}\n      max={max}\n      step={step}\n      value={value}\n      onChange={(event) => onValueChange(Number(event.target.value))}\n      style={{ ...style, ['--bl-slider-fill' as string]: `${percent}%` }}\n      className={cn(\n        'h-5 w-full min-w-0 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-60',\n        // Track: brand up to the thumb, muted after it.\n        '[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full',\n        '[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--color-brand)_var(--bl-slider-fill),var(--color-muted)_var(--bl-slider-fill))]',\n        '[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted',\n        '[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-brand',\n        '[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm',\n        '[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-brand [&::-moz-range-thumb]:bg-background',\n        'focus-visible:[&::-webkit-slider-thumb]:ring-[3px] focus-visible:[&::-webkit-slider-thumb]:ring-ring/30',\n        'focus-visible:[&::-moz-range-thumb]:ring-[3px] focus-visible:[&::-moz-range-thumb]:ring-ring/30',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Slider };\n"],"mappings":";;;;;;;;;AAoBA,SAAS,OAAO,EACd,WACA,OACA,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,OACA,GAAG,SACW;CACd,MAAM,UAAU,MAAM,OAAQ,QAAQ,QAAQ,MAAM,OAAQ,MAAM;CAClE,OACE,oBAAC,SAAD;EACE,MAAK;EACL,aAAU;EACL;EACA;EACC;EACC;EACP,WAAW,UAAU,cAAc,OAAO,MAAM,OAAO,KAAK,CAAC;EAC7D,OAAO;GAAE,GAAG;IAAQ,qBAA+B,GAAG,QAAQ;EAAG;EACjE,WAAW,GACT,iIAEA,4FACA,uJACA,iGACA,0GACA,+SACA,yKACA,2GACA,mGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/toaster.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+/**
+ * Imperative toasts: call `toast({ title, description, variant })` from
+ * anywhere (event handlers, data hooks) and one mounted `<Toaster />` renders
+ * them on the Toast primitives. Mount the Toaster once near the root.
+ */
+export type ToastVariant = 'default' | 'success' | 'destructive';
+export interface ToastOptions {
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    /** Milliseconds before it closes (Radix pauses on hover and focus). */
+    duration?: number;
+}
+/** Show a brief notice. Returns a function that closes it early. */
+declare function toast(options: ToastOptions | string): () => void;
+declare function Toaster({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export { toast, Toaster };

package/dist/components/toaster.js

@@ -0,0 +1,61 @@
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./toast.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toaster.tsx
+var records = [];
+var nextId = 1;
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((listener) => listener());
+function close(id) {
+	records = records.map((r) => r.id === id ? {
+		...r,
+		open: false
+	} : r);
+	emit();
+	setTimeout(() => {
+		records = records.filter((r) => r.id !== id);
+		emit();
+	}, 400);
+}
+/** Show a brief notice. Returns a function that closes it early. */
+function toast(options) {
+	const opts = typeof options === "string" ? { title: options } : options;
+	const id = nextId++;
+	records = [...records.slice(-3), {
+		...opts,
+		id,
+		open: true
+	}];
+	emit();
+	return () => close(id);
+}
+var subscribe = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+var snapshot = () => records;
+function Toaster({ className }) {
+	const list = React.useSyncExternalStore(subscribe, snapshot, snapshot);
+	return /* @__PURE__ */ jsxs(ToastProvider, {
+		swipeDirection: "right",
+		children: [list.map((r) => /* @__PURE__ */ jsxs(Toast, {
+			open: r.open,
+			variant: r.variant,
+			duration: r.duration ?? (r.variant === "destructive" ? 8e3 : 4e3),
+			onOpenChange: (open) => {
+				if (!open) close(r.id);
+			},
+			children: [
+				/* @__PURE__ */ jsx(ToastTitle, { children: r.title }),
+				r.description && /* @__PURE__ */ jsx(ToastDescription, { children: r.description }),
+				/* @__PURE__ */ jsx(ToastClose, {})
+			]
+		}, r.id)), /* @__PURE__ */ jsx(ToastViewport, { className })]
+	});
+}
+//#endregion
+export { Toaster, toast };
+
+//# sourceMappingURL=toaster.js.map

package/dist/components/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.js","names":[],"sources":["../../src/components/toaster.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from './toast';\n\n/**\n * Imperative toasts: call `toast({ title, description, variant })` from\n * anywhere (event handlers, data hooks) and one mounted `<Toaster />` renders\n * them on the Toast primitives. Mount the Toaster once near the root.\n */\nexport type ToastVariant = 'default' | 'success' | 'destructive';\n\nexport interface ToastOptions {\n  title: string;\n  description?: string;\n  variant?: ToastVariant;\n  /** Milliseconds before it closes (Radix pauses on hover and focus). */\n  duration?: number;\n}\n\ninterface ToastRecord extends ToastOptions {\n  id: number;\n  open: boolean;\n}\n\nlet records: ToastRecord[] = [];\nlet nextId = 1;\nconst listeners = new Set<() => void>();\nconst emit = () => listeners.forEach((listener) => listener());\n\nfunction close(id: number) {\n  records = records.map((r) => (r.id === id ? { ...r, open: false } : r));\n  emit();\n  // Leave time for the exit animation before dropping the record.\n  setTimeout(() => {\n    records = records.filter((r) => r.id !== id);\n    emit();\n  }, 400);\n}\n\n/** Show a brief notice. Returns a function that closes it early. */\nfunction toast(options: ToastOptions | string): () => void {\n  const opts = typeof options === 'string' ? { title: options } : options;\n  const id = nextId++;\n  // Keep the stack short: the oldest go first.\n  records = [...records.slice(-3), { ...opts, id, open: true }];\n  emit();\n  return () => close(id);\n}\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\nconst snapshot = () => records;\n\nfunction Toaster({ className }: { className?: string }) {\n  const list = React.useSyncExternalStore(subscribe, snapshot, snapshot);\n  return (\n    <ToastProvider swipeDirection=\"right\">\n      {list.map((r) => (\n        <Toast\n          key={r.id}\n          open={r.open}\n          variant={r.variant}\n          duration={r.duration ?? (r.variant === 'destructive' ? 8000 : 4000)}\n          onOpenChange={(open) => {\n            if (!open) close(r.id);\n          }}\n        >\n          <ToastTitle>{r.title}</ToastTitle>\n          {r.description && <ToastDescription>{r.description}</ToastDescription>}\n          <ToastClose />\n        </Toast>\n      ))}\n      <ToastViewport className={className} />\n    </ToastProvider>\n  );\n}\n\nexport { toast, Toaster };\n"],"mappings":";;;;AA+BA,IAAI,UAAyB,CAAC;AAC9B,IAAI,SAAS;AACb,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAM,aAAa,UAAU,SAAS,aAAa,SAAS,CAAC;AAE7D,SAAS,MAAM,IAAY;CACzB,UAAU,QAAQ,KAAK,MAAO,EAAE,OAAO,KAAK;EAAE,GAAG;EAAG,MAAM;CAAM,IAAI,CAAE;CACtE,KAAK;CAEL,iBAAiB;EACf,UAAU,QAAQ,QAAQ,MAAM,EAAE,OAAO,EAAE;EAC3C,KAAK;CACP,GAAG,GAAG;AACR;;AAGA,SAAS,MAAM,SAA4C;CACzD,MAAM,OAAO,OAAO,YAAY,WAAW,EAAE,OAAO,QAAQ,IAAI;CAChE,MAAM,KAAK;CAEX,UAAU,CAAC,GAAG,QAAQ,MAAM,EAAE,GAAG;EAAE,GAAG;EAAM;EAAI,MAAM;CAAK,CAAC;CAC5D,KAAK;CACL,aAAa,MAAM,EAAE;AACvB;AAEA,IAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF;AACA,IAAM,iBAAiB;AAEvB,SAAS,QAAQ,EAAE,aAAqC;CACtD,MAAM,OAAO,MAAM,qBAAqB,WAAW,UAAU,QAAQ;CACrE,OACE,qBAAC,eAAD;EAAe,gBAAe;EAA9B,UAAA,CACG,KAAK,KAAK,MACT,qBAAC,OAAD;GAEE,MAAM,EAAE;GACR,SAAS,EAAE;GACX,UAAU,EAAE,aAAa,EAAE,YAAY,gBAAgB,MAAO;GAC9D,eAAe,SAAS;IACtB,IAAI,CAAC,MAAM,MAAM,EAAE,EAAE;GACvB;GAPF,UAAA;IASE,oBAAC,YAAD,EAAA,UAAa,EAAE,MAAkB,CAAA;IAChC,EAAE,eAAe,oBAAC,kBAAD,EAAA,UAAmB,EAAE,YAA8B,CAAA;IACrE,oBAAC,YAAD,CAAa,CAAA;GACR;EAXA,GAAA,EAAE,EAWF,CACR,GACD,oBAAC,eAAD,EAA0B,UAAY,CAAA,CACzB;;AAEnB"}

package/dist/components/tool-call.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';
+export interface ToolCallProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    /** The tool's name, e.g. `get_load`. */
+    name: string;
+    status: ToolCallStatus;
+    /** Arguments the agent passed; shown as formatted JSON. */
+    args?: unknown;
+    /** What the tool returned; shown as formatted JSON. */
+    result?: unknown;
+    /** Error message when the call failed. */
+    error?: string;
+    durationMs?: number;
+    defaultOpen?: boolean;
+}
+/** A tool call an agent made: name, live status, and collapsible arguments and result. */
+declare function ToolCall({ name, status, args, result, error, durationMs, defaultOpen, className, ...props }: ToolCallProps): React.JSX.Element;
+export interface ToolApprovalProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    name: string;
+    /** What will happen, in plain words, e.g. "Approve L-1042 and send it to Gravitate". */
+    description: React.ReactNode;
+    args?: unknown;
+    /** `pending` shows the buttons; the others record the decision. */
+    state?: 'pending' | 'approved' | 'denied';
+    onApprove?: () => void;
+    onDeny?: () => void;
+    approveLabel?: string;
+    denyLabel?: string;
+}
+/** A gate before an agent runs a tool with side effects: the person approves or denies it. */
+declare function ToolApproval({ name, description, args, state, onApprove, onDeny, approveLabel, denyLabel, className, ...props }: ToolApprovalProps): React.JSX.Element;
+export { ToolApproval, ToolCall };

package/dist/components/tool-call.js

@@ -0,0 +1,152 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { StatusDot } from "./status.js";
+import { Collapsible } from "radix-ui";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChevronRight from "@burtson-labs/icons/react/chevron-right";
+import Wrench from "@burtson-labs/icons/react/wrench";
+//#region src/components/tool-call.tsx
+var statusText = {
+	pending: "Queued",
+	running: "Running",
+	success: "Done",
+	error: "Failed"
+};
+var statusDot = {
+	pending: "neutral",
+	running: "brand",
+	success: "success",
+	error: "danger"
+};
+var json = (v) => typeof v === "string" ? v : JSON.stringify(v, null, 2);
+/** A tool call an agent made: name, live status, and collapsible arguments and result. */
+function ToolCall({ name, status, args, result, error, durationMs, defaultOpen = false, className, ...props }) {
+	const hasDetail = args !== void 0 || result !== void 0 || Boolean(error);
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		defaultOpen,
+		disabled: !hasDetail,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "tool-call",
+			"data-status": status,
+			className: cn("animate-in overflow-hidden rounded-md border bg-surface text-[13px]", status === "error" && "border-destructive/30", className),
+			...props,
+			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				className: "group/tool flex h-9 w-full items-center gap-2 px-3 text-left outline-none hover:bg-muted/60 focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-default disabled:hover:bg-transparent",
+				children: [
+					/* @__PURE__ */ jsx(Wrench, {
+						className: "size-3.5 shrink-0 text-muted-foreground",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate font-mono text-[12.5px]",
+						children: name
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+						children: [
+							/* @__PURE__ */ jsx(StatusDot, {
+								status: statusDot[status],
+								pulse: status === "running"
+							}),
+							statusText[status],
+							durationMs !== void 0 && status !== "running" && /* @__PURE__ */ jsxs("span", {
+								className: "tabular-nums",
+								children: [
+									"· ",
+									(durationMs / 1e3).toFixed(1),
+									"s"
+								]
+							})
+						]
+					}),
+					hasDetail && /* @__PURE__ */ jsx(ChevronRight, {
+						"aria-hidden": true,
+						className: "size-3.5 text-muted-foreground transition-transform group-data-[state=open]/tool:rotate-90"
+					})
+				]
+			}), /* @__PURE__ */ jsx(Collapsible.Content, {
+				className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "grid gap-2 border-t p-3",
+					children: [args !== void 0 && /* @__PURE__ */ jsxs("section", {
+						className: "grid gap-1",
+						children: [/* @__PURE__ */ jsx("h4", {
+							className: "text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase",
+							children: "Arguments"
+						}), /* @__PURE__ */ jsx("pre", {
+							className: "overflow-x-auto rounded-sm bg-muted/60 p-2 font-mono text-[12px] leading-5",
+							children: json(args)
+						})]
+					}), error ? /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-xs font-medium text-destructive",
+						children: error
+					}) : result !== void 0 && /* @__PURE__ */ jsxs("section", {
+						className: "grid gap-1",
+						children: [/* @__PURE__ */ jsx("h4", {
+							className: "text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase",
+							children: "Result"
+						}), /* @__PURE__ */ jsx("pre", {
+							className: "max-h-64 overflow-auto rounded-sm bg-muted/60 p-2 font-mono text-[12px] leading-5",
+							children: json(result)
+						})]
+					})]
+				})
+			})]
+		})
+	});
+}
+/** A gate before an agent runs a tool with side effects: the person approves or denies it. */
+function ToolApproval({ name, description, args, state = "pending", onApprove, onDeny, approveLabel = "Approve", denyLabel = "Deny", className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tool-approval",
+		"data-state": state,
+		className: cn("grid animate-in gap-3 rounded-md border p-3 text-[13px]", state === "pending" ? "border-warning/40 bg-warning/5" : "bg-surface", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Wrench, {
+						className: "size-3.5 text-muted-foreground",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-[12.5px]",
+						children: name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "ml-auto text-xs text-muted-foreground",
+						children: state === "pending" ? "Needs your approval" : state === "approved" ? "Approved" : "Denied"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				children: description
+			}),
+			args !== void 0 && /* @__PURE__ */ jsx("pre", {
+				className: "overflow-x-auto rounded-sm bg-muted/60 p-2 font-mono text-[12px] leading-5",
+				children: json(args)
+			}),
+			state === "pending" && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "outline",
+					onClick: onDeny,
+					children: denyLabel
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onClick: onApprove,
+					children: approveLabel
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { ToolApproval, ToolCall };
+
+//# sourceMappingURL=tool-call.js.map

package/dist/components/tool-call.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-call.js","names":["CollapsiblePrimitive"],"sources":["../../src/components/tool-call.tsx"],"sourcesContent":["import ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport Wrench from '@burtson-labs/icons/react/wrench';\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\nimport { StatusDot } from './status';\n\nexport type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';\n\nconst statusText: Record<ToolCallStatus, string> = {\n  pending: 'Queued',\n  running: 'Running',\n  success: 'Done',\n  error: 'Failed',\n};\nconst statusDot = {\n  pending: 'neutral',\n  running: 'brand',\n  success: 'success',\n  error: 'danger',\n} as const;\n\nconst json = (v: unknown) => (typeof v === 'string' ? v : JSON.stringify(v, null, 2));\n\nexport interface ToolCallProps extends Omit<React.ComponentProps<'div'>, 'title'> {\n  /** The tool's name, e.g. `get_load`. */\n  name: string;\n  status: ToolCallStatus;\n  /** Arguments the agent passed; shown as formatted JSON. */\n  args?: unknown;\n  /** What the tool returned; shown as formatted JSON. */\n  result?: unknown;\n  /** Error message when the call failed. */\n  error?: string;\n  durationMs?: number;\n  defaultOpen?: boolean;\n}\n\n/** A tool call an agent made: name, live status, and collapsible arguments and result. */\nfunction ToolCall({\n  name,\n  status,\n  args,\n  result,\n  error,\n  durationMs,\n  defaultOpen = false,\n  className,\n  ...props\n}: ToolCallProps) {\n  const hasDetail = args !== undefined || result !== undefined || Boolean(error);\n  return (\n    <CollapsiblePrimitive.Root defaultOpen={defaultOpen} disabled={!hasDetail}>\n      <div\n        data-slot=\"tool-call\"\n        data-status={status}\n        className={cn(\n          'animate-in overflow-hidden rounded-md border bg-surface text-[13px]',\n          status === 'error' && 'border-destructive/30',\n          className,\n        )}\n        {...props}\n      >\n        <CollapsiblePrimitive.Trigger className=\"group/tool flex h-9 w-full items-center gap-2 px-3 text-left outline-none hover:bg-muted/60 focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-default disabled:hover:bg-transparent\">\n          <Wrench className=\"size-3.5 shrink-0 text-muted-foreground\" aria-hidden />\n          <span className=\"min-w-0 flex-1 truncate font-mono text-[12.5px]\">{name}</span>\n          <span className=\"inline-flex items-center gap-1.5 text-xs text-muted-foreground\">\n            <StatusDot status={statusDot[status]} pulse={status === 'running'} />\n            {statusText[status]}\n            {durationMs !== undefined && status !== 'running' && (\n              <span className=\"tabular-nums\">· {(durationMs / 1000).toFixed(1)}s</span>\n            )}\n          </span>\n          {hasDetail && (\n            <ChevronRight\n              aria-hidden\n              className=\"size-3.5 text-muted-foreground transition-transform group-data-[state=open]/tool:rotate-90\"\n            />\n          )}\n        </CollapsiblePrimitive.Trigger>\n        <CollapsiblePrimitive.Content className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n          <div className=\"grid gap-2 border-t p-3\">\n            {args !== undefined && (\n              <section className=\"grid gap-1\">\n                <h4 className=\"text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase\">\n                  Arguments\n                </h4>\n                <pre className=\"overflow-x-auto rounded-sm bg-muted/60 p-2 font-mono text-[12px] leading-5\">\n                  {json(args)}\n                </pre>\n              </section>\n            )}\n            {error ? (\n              <p role=\"alert\" className=\"text-xs font-medium text-destructive\">\n                {error}\n              </p>\n            ) : (\n              result !== undefined && (\n                <section className=\"grid gap-1\">\n                  <h4 className=\"text-[11px] font-semibold tracking-[0.06em] text-muted-foreground uppercase\">\n                    Result\n                  </h4>\n                  <pre className=\"max-h-64 overflow-auto rounded-sm bg-muted/60 p-2 font-mono text-[12px] leading-5\">\n                    {json(result)}\n                  </pre>\n                </section>\n              )\n            )}\n          </div>\n        </CollapsiblePrimitive.Content>\n      </div>\n    </CollapsiblePrimitive.Root>\n  );\n}\n\nexport interface ToolApprovalProps extends Omit<React.ComponentProps<'div'>, 'title'> {\n  name: string;\n  /** What will happen, in plain words, e.g. \"Approve L-1042 and send it to Gravitate\". */\n  description: React.ReactNode;\n  args?: unknown;\n  /** `pending` shows the buttons; the others record the decision. */\n  state?: 'pending' | 'approved' | 'denied';\n  onApprove?: () => void;\n  onDeny?: () => void;\n  approveLabel?: string;\n  denyLabel?: string;\n}\n\n/** A gate before an agent runs a tool with side effects: the person approves or denies it. */\nfunction ToolApproval({\n  name,\n  description,\n  args,\n  state = 'pending',\n  onApprove,\n  onDeny,\n  approveLabel = 'Approve',\n  denyLabel = 'Deny',\n  className,\n  ...props\n}: ToolApprovalProps) {\n  return (\n    <div\n      data-slot=\"tool-approval\"\n      data-state={state}\n      className={cn(\n        'grid animate-in gap-3 rounded-md border p-3 text-[13px]',\n        state === 'pending' ? 'border-warning/40 bg-warning/5' : 'bg-surface',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2\">\n        <Wrench className=\"size-3.5 text-muted-foreground\" aria-hidden />\n        <span className=\"font-mono text-[12.5px]\">{name}</span>\n        <span className=\"ml-auto text-xs text-muted-foreground\">\n          {state === 'pending'\n            ? 'Needs your approval'\n            : state === 'approved'\n              ? 'Approved'\n              : 'Denied'}\n        </span>\n      </div>\n      <p className=\"text-sm\">{description}</p>\n      {args !== undefined && (\n        <pre className=\"overflow-x-auto rounded-sm bg-muted/60 p-2 font-mono text-[12px] leading-5\">\n          {json(args)}\n        </pre>\n      )}\n      {state === 'pending' && (\n        <div className=\"flex justify-end gap-2\">\n          <Button size=\"sm\" variant=\"outline\" onClick={onDeny}>\n            {denyLabel}\n          </Button>\n          <Button size=\"sm\" onClick={onApprove}>\n            {approveLabel}\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { ToolApproval, ToolCall };\n"],"mappings":";;;;;;;;;AAYA,IAAM,aAA6C;CACjD,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AACA,IAAM,YAAY;CAChB,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,IAAM,QAAQ,MAAgB,OAAO,MAAM,WAAW,IAAI,KAAK,UAAU,GAAG,MAAM,CAAC;;AAiBnF,SAAS,SAAS,EAChB,MACA,QACA,MACA,QACA,OACA,YACA,cAAc,OACd,WACA,GAAG,SACa;CAChB,MAAM,YAAY,SAAS,KAAA,KAAa,WAAW,KAAA,KAAa,QAAQ,KAAK;CAC7E,OACE,oBAACA,YAAqB,MAAtB;EAAwC;EAAa,UAAU,CAAC;EAC9D,UAAA,qBAAC,OAAD;GACE,aAAU;GACV,eAAa;GACb,WAAW,GACT,uEACA,WAAW,WAAW,yBACtB,SACF;GACA,GAAI;GARN,UAAA,CAUE,qBAACA,YAAqB,SAAtB;IAA8B,WAAU;IAAxC,UAAA;KACE,oBAAC,QAAD;MAAQ,WAAU;MAA0C,eAAA;KAAa,CAAA;KACzE,oBAAC,QAAD;MAAM,WAAU;MAAmD,UAAA;KAAW,CAAA;KAC9E,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACE,oBAAC,WAAD;QAAW,QAAQ,UAAU;QAAS,OAAO,WAAW;OAAY,CAAA;OACnE,WAAW;OACX,eAAe,KAAA,KAAa,WAAW,aACtC,qBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA;SAA+B;UAAI,aAAa,IAAA,CAAM,QAAQ,CAAC;SAAE;QAAO;;MAEtE;;KACL,aACC,oBAAC,cAAD;MACE,eAAA;MACA,WAAU;KACX,CAAA;IAEyB;GAC9B,CAAA,GAAA,oBAACA,YAAqB,SAAtB;IAA8B,WAAU;IACtC,UAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,SAAS,KAAA,KACR,qBAAC,WAAD;MAAS,WAAU;MAAnB,UAAA,CACE,oBAAC,MAAD;OAAI,WAAU;OAA8E,UAAA;MAExF,CAAA,GACJ,oBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,KAAK,IAAI;MACP,CAAA,CACE;KAEV,CAAA,GAAA,QACC,oBAAC,KAAD;MAAG,MAAK;MAAQ,WAAU;MACvB,UAAA;KACA,CAAA,IAEH,WAAW,KAAA,KACT,qBAAC,WAAD;MAAS,WAAU;MAAnB,UAAA,CACE,oBAAC,MAAD;OAAI,WAAU;OAA8E,UAAA;MAExF,CAAA,GACJ,oBAAC,OAAD;OAAK,WAAU;OACZ,UAAA,KAAK,MAAM;MACT,CAAA,CACE;KAGV,CAAA,CAAA;;GACuB,CAAA,CAC3B;;CACoB,CAAA;AAE/B;;AAgBA,SAAS,aAAa,EACpB,MACA,aACA,MACA,QAAQ,WACR,WACA,QACA,eAAe,WACf,YAAY,QACZ,WACA,GAAG,SACiB;CACpB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,2DACA,UAAU,YAAY,mCAAmC,cACzD,SACF;EACA,GAAI;EARN,UAAA;GAUE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MAAQ,WAAU;MAAiC,eAAA;KAAa,CAAA;KAChE,oBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA;KAAW,CAAA;KACtD,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,UAAU,YACP,wBACA,UAAU,aACR,aACA;KACF,CAAA;IACH;;GACL,oBAAC,KAAD;IAAG,WAAU;IAAW,UAAA;GAAe,CAAA;GACtC,SAAS,KAAA,KACR,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,KAAK,IAAI;GACP,CAAA;GAEN,UAAU,aACT,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAQ,MAAK;KAAK,SAAQ;KAAU,SAAS;KAC1C,UAAA;IACK,CAAA,GACR,oBAAC,QAAD;KAAQ,MAAK;KAAK,SAAS;KACxB,UAAA;IACK,CAAA,CACL;;EAEJ;;AAET"}

package/dist/index.d.ts

@@ -13,6 +13,9 @@ export * from './components/checkbox';
 export * from './components/collapsible';
 export * from './components/combobox';
 export * from './components/command';
+export * from './components/composer';
+export * from './components/conversation';
+export * from './components/copy-button';
 export * from './components/dialog';
 export * from './components/dropdown-menu';
 export * from './components/empty-state';
@@ -21,17 +24,22 @@ export * from './components/icon-button';
 export * from './components/input';
 export * from './components/kbd';
 export * from './components/label';
+export * from './components/markdown';
+export * from './components/message';
 export * from './components/navigation-menu';
 export * from './components/page-header';
 export * from './components/pagination';
 export * from './components/popover';
 export * from './components/progress';
 export * from './components/radio-group';
+export * from './components/reasoning';
 export * from './components/scroll-area';
+export * from './components/secret-input';
 export * from './components/select';
 export * from './components/separator';
 export * from './components/sheet';
 export * from './components/skeleton';
+export * from './components/slider';
 export * from './components/spinner';
 export * from './components/stat-card';
 export * from './components/status';
@@ -41,5 +49,7 @@ export * from './components/table';
 export * from './components/tabs';
 export * from './components/textarea';
 export * from './components/toast';
+export * from './components/toaster';
+export * from './components/tool-call';
 export * from './components/toolbar';
 export * from './components/tooltip';

package/dist/index.js

@@ -17,22 +17,32 @@ import { Input, fieldClasses } from "./components/input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, surfaceClasses } from "./components/popover.js";
 import { Spinner } from "./components/spinner.js";
 import { Combobox } from "./components/combobox.js";
+import { Composer, Suggestions } from "./components/composer.js";
+import { Conversation } from "./components/conversation.js";
+import { IconButton } from "./components/icon-button.js";
+import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants } from "./components/toast.js";
+import { Toaster, toast } from "./components/toaster.js";
+import { CopyButton } from "./components/copy-button.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/dropdown-menu.js";
 import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "./components/empty-state.js";
 import { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel } from "./components/field.js";
-import { IconButton } from "./components/icon-button.js";
 import { Kbd, KbdGroup } from "./components/kbd.js";
 import { Label } from "./components/label.js";
+import { CodeBlock, Markdown, parseMarkdown } from "./components/markdown.js";
+import { Message } from "./components/message.js";
 import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./components/navigation-menu.js";
 import { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle } from "./components/page-header.js";
 import { Pagination, paginationRange } from "./components/pagination.js";
 import { Progress } from "./components/progress.js";
 import { RadioGroup, RadioGroupItem } from "./components/radio-group.js";
+import { Reasoning, StreamingIndicator } from "./components/reasoning.js";
 import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
+import { SecretInput } from "./components/secret-input.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
 import { Separator } from "./components/separator.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/sheet.js";
 import { Skeleton } from "./components/skeleton.js";
+import { Slider } from "./components/slider.js";
 import { StatCard } from "./components/stat-card.js";
 import { Status, StatusDot, statusDotVariants } from "./components/status.js";
 import { Steps } from "./components/steps.js";
@@ -40,7 +50,7 @@ import { Switch } from "./components/switch.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs.js";
 import { Textarea } from "./components/textarea.js";
-import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants } from "./components/toast.js";
+import { ToolApproval, ToolCall } from "./components/tool-call.js";
 import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer } from "./components/toolbar.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel, IconButton, Input, Kbd, KbdGroup, Label, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, StatCard, Status, StatusDot, Steps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, brand, buttonVariants, cardVariants, cn, dark, fieldClasses, fontMono, fontSans, light, motion, navigationMenuTriggerStyle, paginationRange, radius, shadow, statusDotVariants, surfaceClasses, toastVariants, tokens };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, Conversation, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel, IconButton, Input, Kbd, KbdGroup, Label, Markdown, Message, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ScrollArea, ScrollBar, SecretInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatCard, Status, StatusDot, Steps, StreamingIndicator, Suggestions, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, ToolApproval, ToolCall, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, brand, buttonVariants, cardVariants, cn, dark, fieldClasses, fontMono, fontSans, light, motion, navigationMenuTriggerStyle, paginationRange, parseMarkdown, radius, shadow, statusDotVariants, surfaceClasses, toast, toastVariants, tokens };