@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/dist/views/ui/SelectableRow.js

@@ -0,0 +1,49 @@
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { forwardRef } from "@assistant-ui/tap/react-shim";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/views/ui/SelectableRow.tsx
+/**
+* A row in a master rail. The leading border + accent fill mark the current
+* selection; the whole row is the hit target. Content is free-form so a row can
+* be a single line or a small block (a transcript turn).
+*/
+const SelectableRow = forwardRef(function SelectableRow(t0, ref) {
+	const $ = c(10);
+	const { selected: t1, onSelect, className, dense: t2, children } = t0;
+	const selected = t1 === void 0 ? false : t1;
+	const dense = t2 === void 0 ? false : t2;
+	const t3 = selected || void 0;
+	const t4 = dense ? "py-0" : "py-1.5";
+	const t5 = selected ? "border-foreground bg-accent text-foreground" : "text-muted-foreground hover:bg-accent/40 border-transparent";
+	let t6;
+	if ($[0] !== className || $[1] !== t4 || $[2] !== t5) {
+		t6 = clsx("block w-full overflow-hidden border-s-2 px-3 text-left text-[12px] transition-colors", t4, t5, className);
+		$[0] = className;
+		$[1] = t4;
+		$[2] = t5;
+		$[3] = t6;
+	} else t6 = $[3];
+	let t7;
+	if ($[4] !== children || $[5] !== onSelect || $[6] !== ref || $[7] !== t3 || $[8] !== t6) {
+		t7 = /* @__PURE__ */ jsx("button", {
+			ref,
+			type: "button",
+			onClick: onSelect,
+			"aria-current": t3,
+			className: t6,
+			children
+		});
+		$[4] = children;
+		$[5] = onSelect;
+		$[6] = ref;
+		$[7] = t3;
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	return t7;
+});
+//#endregion
+export { SelectableRow };
+
+//# sourceMappingURL=SelectableRow.js.map

package/dist/views/ui/SelectableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableRow.js","names":["clsx","forwardRef","ReactNode","SelectableRow","HTMLButtonElement","selected","onSelect","className","dense","children","t0","ref","$","_c","t1","t2","undefined","t3","t4","t5","t6","t7"],"sources":["../../../src/views/ui/SelectableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type ReactNode } from \"react\";\n\n/**\n * A row in a master rail. The leading border + accent fill mark the current\n * selection; the whole row is the hit target. Content is free-form so a row can\n * be a single line or a small block (a transcript turn).\n */\nexport const SelectableRow = forwardRef<\n  HTMLButtonElement,\n  {\n    selected?: boolean;\n    onSelect?: (() => void) | undefined;\n    className?: string | undefined;\n    /** Fixed-height row for uniform rails. */\n    dense?: boolean;\n    children: ReactNode;\n  }\n>(function SelectableRow(\n  { selected = false, onSelect, className, dense = false, children },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={onSelect}\n      aria-current={selected || undefined}\n      className={clsx(\n        \"block w-full overflow-hidden border-s-2 px-3 text-left text-[12px] transition-colors\",\n        dense ? \"py-0\" : \"py-1.5\",\n        selected\n          ? \"border-foreground bg-accent text-foreground\"\n          : \"text-muted-foreground hover:bg-accent/40 border-transparent\",\n        className,\n      )}\n    >\n      {children}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;;;AAQA,MAAaG,gBAAgBF,WAU3B,SAAAE,cAAAO,IAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACA,MAAA,EAAAR,UAAAS,IAAAR,UAAAC,WAAAC,OAAAO,IAAAN,aAAAC;CAAE,MAAAL,WAAAS,OAAAE,KAAAA,IAAA,QAAAF;CAAuC,MAAAN,QAAAO,OAAAC,KAAAA,IAAA,QAAAD;CAQvB,MAAAE,KAAAZ,YAAAW,KAAAA;CAGZ,MAAAE,KAAAV,QAAA,SAAA;CACA,MAAAW,KAAAd,WAAA,gDAAA;CAEiE,IAAAe;CAAA,IAAAR,EAAA,OAAAL,aAAAK,EAAA,OAAAM,MAAAN,EAAA,OAAAO,IAAA;EALxDC,KAAApB,KACT,wFACAkB,IACAC,IAGAZ,SACF;EAACK,EAAA,KAAAL;EAAAK,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAH,YAAAG,EAAA,OAAAN,YAAAM,EAAA,OAAAD,OAAAC,EAAA,OAAAK,MAAAL,EAAA,OAAAQ,IAAA;EAZHC,KAAA,oBAAA,UAAA;GACOV;GACA,MAAA;GACIL,SAAAA;GACK,gBAAAW;GACH,WAAAG;GASVX;EACM,CAAA;EAAAG,EAAA,KAAAH;EAAAG,EAAA,KAAAN;EAAAM,EAAA,KAAAD;EAAAC,EAAA,KAAAK;EAAAL,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAfTS;AAeS,CAEZ"}

package/dist/views/ui/Sparkline.d.ts

@@ -0,0 +1,17 @@
+//#region src/views/ui/Sparkline.d.ts
+/**
+ * A monochrome trend line drawn as an SVG polyline. No axes, legend, or
+ * gridlines: it answers "is this metric rising, falling, or spiking" at a
+ * glance and nothing more. Renders nothing below 2 points; color comes from the
+ * surrounding text color (`currentColor`).
+ */
+declare const Sparkline: ({
+  values,
+  className
+}: {
+  values: readonly number[];
+  className?: string;
+}) => import("react").JSX.Element | null;
+//#endregion
+export { Sparkline };
+//# sourceMappingURL=Sparkline.d.ts.map

package/dist/views/ui/Sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.d.ts","names":[],"sources":["../../../src/views/ui/Sparkline.tsx"],"mappings":";;AAQA;;;;;cAAa,SAAA;EAAa,MAAA;EAAA;AAAA;EAIxB,MAAA;EACA,SAAA;AAAA,sBACD,GAAA,CAAA,OAAA"}

package/dist/views/ui/Sparkline.js

@@ -0,0 +1,96 @@
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/views/ui/Sparkline.tsx
+/**
+* A monochrome trend line drawn as an SVG polyline. No axes, legend, or
+* gridlines: it answers "is this metric rising, falling, or spiking" at a
+* glance and nothing more. Renders nothing below 2 points; color comes from the
+* surrounding text color (`currentColor`).
+*/
+const Sparkline = (t0) => {
+	const $ = c(22);
+	const { values, className } = t0;
+	if (values.length < 2) return null;
+	const max = Math.max(...values);
+	const min = Math.min(...values);
+	const range = max - min || 1;
+	const step = 100 / (values.length - 1);
+	let t1;
+	if ($[0] !== min || $[1] !== range || $[2] !== step) {
+		t1 = (value, index) => `${(index * step).toFixed(1)},${(24 - (value - min) / range * 24).toFixed(1)}`;
+		$[0] = min;
+		$[1] = range;
+		$[2] = step;
+		$[3] = t1;
+	} else t1 = $[3];
+	const point = t1;
+	let t2;
+	if ($[4] !== point || $[5] !== values) {
+		t2 = values.map(point).join(" ");
+		$[4] = point;
+		$[5] = values;
+		$[6] = t2;
+	} else t2 = $[6];
+	const points = t2;
+	const lastValue = values[values.length - 1];
+	let t3;
+	if ($[7] !== lastValue || $[8] !== point || $[9] !== values.length) {
+		t3 = point(lastValue, values.length - 1).split(",");
+		$[7] = lastValue;
+		$[8] = point;
+		$[9] = values.length;
+		$[10] = t3;
+	} else t3 = $[10];
+	const [lastX, lastY] = t3;
+	let t4;
+	if ($[11] !== className) {
+		t4 = clsx("text-muted-foreground", className);
+		$[11] = className;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== points) {
+		t5 = /* @__PURE__ */ jsx("polyline", {
+			points,
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinejoin: "round",
+			vectorEffect: "non-scaling-stroke"
+		});
+		$[13] = points;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== lastX || $[16] !== lastY) {
+		t6 = /* @__PURE__ */ jsx("circle", {
+			cx: lastX,
+			cy: lastY,
+			r: "2",
+			fill: "currentColor"
+		});
+		$[15] = lastX;
+		$[16] = lastY;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 100 24",
+			className: t4,
+			preserveAspectRatio: "none",
+			"aria-hidden": "true",
+			children: [t5, t6]
+		});
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t7;
+};
+//#endregion
+export { Sparkline };
+
+//# sourceMappingURL=Sparkline.js.map

package/dist/views/ui/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.js","names":["clsx","Sparkline","t0","$","_c","values","className","length","max","Math","min","range","step","t1","value","index","toFixed","point","t2","map","join","points","lastValue","t3","split","lastX","lastY","t4","t5","t6","t7"],"sources":["../../../src/views/ui/Sparkline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\n/**\n * A monochrome trend line drawn as an SVG polyline. No axes, legend, or\n * gridlines: it answers \"is this metric rising, falling, or spiking\" at a\n * glance and nothing more. Renders nothing below 2 points; color comes from the\n * surrounding text color (`currentColor`).\n */\nexport const Sparkline = ({\n  values,\n  className,\n}: {\n  values: readonly number[];\n  className?: string;\n}) => {\n  if (values.length < 2) return null;\n\n  const width = 100;\n  const height = 24;\n  const max = Math.max(...values);\n  const min = Math.min(...values);\n  const range = max - min || 1;\n  const step = width / (values.length - 1);\n\n  const point = (value: number, index: number) =>\n    `${(index * step).toFixed(1)},${(height - ((value - min) / range) * height).toFixed(1)}`;\n  const points = values.map(point).join(\" \");\n  const lastValue = values[values.length - 1]!;\n  const [lastX, lastY] = point(lastValue, values.length - 1).split(\",\");\n\n  return (\n    <svg\n      viewBox={`0 0 ${width} ${height}`}\n      className={clsx(\"text-muted-foreground\", className)}\n      preserveAspectRatio=\"none\"\n      aria-hidden=\"true\"\n    >\n      <polyline\n        points={points}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinejoin=\"round\"\n        vectorEffect=\"non-scaling-stroke\"\n      />\n      <circle cx={lastX} cy={lastY} r=\"2\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"mappings":";;;;;;;;;;AAQA,MAAaC,aAAYC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAC,QAAAC,cAAAJ;CAOxB,IAAIG,OAAME,SAAU,GAAC,OAAS;CAI9B,MAAAC,MAAYC,KAAID,IAAI,GAAIH,MAAM;CAC9B,MAAAK,MAAYD,KAAIC,IAAI,GAAIL,MAAM;CAC9B,MAAAM,QAAcH,MAAME,OAAN;CACd,MAAAE,OALc,OAKQP,OAAME,SAAU;CAAG,IAAAM;CAAA,IAAAV,EAAA,OAAAO,OAAAP,EAAA,OAAAQ,SAAAR,EAAA,OAAAS,MAAA;EAE3BC,MAAAC,OAAAC,UACZ,IAAIA,QAAQH,KAAAA,CAAII,QAAU,CAAC,EAAC,IAPf,MAO+BF,QAAQJ,OAAOC,QAP9C,GAAA,CAO6DK,QAAU,CAAC;EAAGb,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAD1F,MAAAc,QAAcJ;CAC6E,IAAAK;CAAA,IAAAf,EAAA,OAAAc,SAAAd,EAAA,OAAAE,QAAA;EAC5Ea,KAAAb,OAAMc,IAAKF,KAAK,CAAC,CAAAG,KAAM,GAAG;EAACjB,EAAA,KAAAc;EAAAd,EAAA,KAAAE;EAAAF,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAA1C,MAAAkB,SAAeH;CACf,MAAAI,YAAkBjB,OAAOA,OAAME,SAAU;CAAI,IAAAgB;CAAA,IAAApB,EAAA,OAAAmB,aAAAnB,EAAA,OAAAc,SAAAd,EAAA,OAAAE,OAAAE,QAAA;EACtBgB,KAAAN,MAAMK,WAAWjB,OAAME,SAAU,CAAC,CAAC,CAAAiB,MAAO,GAAG;EAACrB,EAAA,KAAAmB;EAAAnB,EAAA,KAAAc;EAAAd,EAAA,KAAAE,OAAAE;EAAAJ,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAArE,MAAA,CAAAsB,OAAAC,SAAuBH;CAA+C,IAAAI;CAAA,IAAAxB,EAAA,QAAAG,WAAA;EAKvDqB,KAAA3B,KAAK,yBAAyBM,SAAS;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAAkB,QAAA;EAInDO,KAAA,oBAAA,YAAA;GACUP;GACH,MAAA;GACE,QAAA;GACK,aAAA;GACG,gBAAA;GACF,cAAA;EAAoB,CAAA;EACjClB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAsB,SAAAtB,EAAA,QAAAuB,OAAA;EACFG,KAAA,oBAAA,UAAA;GAAYJ,IAAAA;GAAWC,IAAAA;GAAS,GAAA;GAAS,MAAA;EAAc,CAAA;EAAGvB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAuB;EAAAvB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAwB,MAAAxB,EAAA,QAAAyB,MAAAzB,EAAA,QAAA0B,IAAA;EAd5DC,KAAA,qBAAA,OAAA;GACW,SAAA;GACE,WAAAH;GACS,qBAAA;GACR,eAAA;aAJd,CAMEC,IAQAC,EACI;;EAAA1B,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OAfN2B;AAeM"}

package/dist/views/ui/SummaryItem.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+//#region src/views/ui/SummaryItem.d.ts
+/**
+ * A key/value row: label left, value right on one baseline. Flat (no box). Group
+ * a sequence in `SummaryList` for hairline dividers.
+ */
+declare const SummaryItem: ({
+  label,
+  value
+}: {
+  label: string;
+  value: ReactNode;
+}) => import("react").JSX.Element;
+/** Divided list of `SummaryItem` rows. Unboxed: dividers do the grouping. */
+declare const SummaryList: ({
+  children
+}: {
+  children: ReactNode;
+}) => import("react").JSX.Element;
+//#endregion
+export { SummaryItem, SummaryList };
+//# sourceMappingURL=SummaryItem.d.ts.map

package/dist/views/ui/SummaryItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryItem.d.ts","names":[],"sources":["../../../src/views/ui/SummaryItem.tsx"],"mappings":";;;;;AAMA;;cAAa,WAAA;EAAe,KAAA;EAAA;AAAA;EAI1B,KAAA;EACA,KAAA,EAAO,SAAA;AAAA,sBACR,GAAA,CAAA,OAAA;;cAUY,WAAA;EAAe;AAAA;EAAgB,QAAA,EAAU,SAAS;AAAA,sBAAE,GAAA,CAAA,OAAA"}

package/dist/views/ui/SummaryItem.js

@@ -0,0 +1,59 @@
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/views/ui/SummaryItem.tsx
+/**
+* A key/value row: label left, value right on one baseline. Flat (no box). Group
+* a sequence in `SummaryList` for hairline dividers.
+*/
+const SummaryItem = (t0) => {
+	const $ = c(7);
+	const { label, value } = t0;
+	let t1;
+	if ($[0] !== label) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground shrink-0",
+			children: label
+		});
+		$[0] = label;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== value) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: "text-foreground min-w-0 truncate text-right font-medium tabular-nums",
+			children: value
+		});
+		$[2] = value;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-7 items-baseline justify-between gap-2 py-1 text-[11px]",
+			children: [t1, t2]
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+/** Divided list of `SummaryItem` rows. Unboxed: dividers do the grouping. */
+const SummaryList = (t0) => {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "divide-border divide-y",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+//#endregion
+export { SummaryItem, SummaryList };
+
+//# sourceMappingURL=SummaryItem.js.map

package/dist/views/ui/SummaryItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryItem.js","names":["ReactNode","SummaryItem","t0","$","_c","label","value","t1","t2","t3","SummaryList","children"],"sources":["../../../src/views/ui/SummaryItem.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\n/**\n * A key/value row: label left, value right on one baseline. Flat (no box). Group\n * a sequence in `SummaryList` for hairline dividers.\n */\nexport const SummaryItem = ({\n  label,\n  value,\n}: {\n  label: string;\n  value: ReactNode;\n}) => (\n  <div className=\"flex min-h-7 items-baseline justify-between gap-2 py-1 text-[11px]\">\n    <span className=\"text-muted-foreground shrink-0\">{label}</span>\n    <span className=\"text-foreground min-w-0 truncate text-right font-medium tabular-nums\">\n      {value}\n    </span>\n  </div>\n);\n\n/** Divided list of `SummaryItem` rows. Unboxed: dividers do the grouping. */\nexport const SummaryList = ({ children }: { children: ReactNode }) => (\n  <div className=\"divide-border divide-y\">{children}</div>\n);\n"],"mappings":";;;;;;;AAMA,MAAaC,eAAcC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAC,MAAA,EAAAC,OAAAC,UAAAJ;CAM3B,IAAAK;CAAA,IAAAJ,EAAA,OAAAE,OAAA;EAEGE,KAAA,oBAAA,QAAA;GAAgB,WAAA;aAAkCF;EAAa,CAAA;EAAAF,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,OAAA;EAC/DE,KAAA,oBAAA,QAAA;GAAgB,WAAA;aACbF;EACI,CAAA;EAAAH,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAJTC,KAAA,qBAAA,OAAA;GAAe,WAAA;aAAf,CACEF,IACAC,EAGI;;EAAAL,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OALNM;AAKM;;AAIR,MAAaC,eAAcR,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAC,MAAA,EAAAO,aAAAT;CAAqC,IAAAK;CAAA,IAAAJ,EAAA,OAAAQ,UAAA;EAC/DJ,KAAA,oBAAA,OAAA;GAAe,WAAA;GAA0BI;EAAe,CAAA;EAAAR,EAAA,KAAAQ;EAAAR,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAAxDI;AAAwD"}

package/dist/views/ui/ToneBadge.d.ts

@@ -0,0 +1,18 @@
+import { BadgeTone } from "./badgeTone.js";
+import { ReactNode } from "react";
+
+//#region src/views/ui/ToneBadge.d.ts
+declare const ToneBadge: ({
+  tone,
+  size,
+  className,
+  children
+}: {
+  tone?: BadgeTone | undefined;
+  size?: "default" | "sm";
+  className?: string | undefined;
+  children: ReactNode;
+}) => import("react").JSX.Element;
+//#endregion
+export { ToneBadge };
+//# sourceMappingURL=ToneBadge.d.ts.map

package/dist/views/ui/ToneBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToneBadge.d.ts","names":[],"sources":["../../../src/views/ui/ToneBadge.tsx"],"mappings":";;;;cAKa,SAAA;EAAa,IAAA;EAAA,IAAA;EAAA,SAAA;EAAA;AAAA;EAMxB,IAAA,GAAO,SAAA;EACP,IAAA;EACA,SAAA;EACA,QAAA,EAAU,SAAA;AAAA,sBACX,GAAA,CAAA,OAAA"}

package/dist/views/ui/ToneBadge.js

@@ -0,0 +1,34 @@
+import { BADGE_BASE, BADGE_SM, BADGE_TONE } from "./badgeTone.js";
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/views/ui/ToneBadge.tsx
+const ToneBadge = (t0) => {
+	const $ = c(7);
+	const { tone, size: t1, className, children } = t0;
+	const t2 = (t1 === void 0 ? "default" : t1) === "sm" ? BADGE_SM : BADGE_BASE;
+	const t3 = BADGE_TONE[tone ?? "zinc"];
+	let t4;
+	if ($[0] !== className || $[1] !== t2 || $[2] !== t3) {
+		t4 = clsx(t2, t3, className);
+		$[0] = className;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== children || $[5] !== t4) {
+		t5 = /* @__PURE__ */ jsx("span", {
+			className: t4,
+			children
+		});
+		$[4] = children;
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	return t5;
+};
+//#endregion
+export { ToneBadge };
+
+//# sourceMappingURL=ToneBadge.js.map

package/dist/views/ui/ToneBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToneBadge.js","names":["clsx","ReactNode","BADGE_BASE","BADGE_SM","BADGE_TONE","BadgeTone","ToneBadge","t0","$","_c","tone","size","t1","className","children","undefined","t2","t3","t4","t5"],"sources":["../../../src/views/ui/ToneBadge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { BADGE_BASE, BADGE_SM, BADGE_TONE } from \"./badgeTone\";\nimport type { BadgeTone } from \"./badgeTone\";\n\nexport const ToneBadge = ({\n  tone,\n  size = \"default\",\n  className,\n  children,\n}: {\n  tone?: BadgeTone | undefined;\n  size?: \"default\" | \"sm\";\n  className?: string | undefined;\n  children: ReactNode;\n}) => (\n  <span\n    className={clsx(\n      size === \"sm\" ? BADGE_SM : BADGE_BASE,\n      BADGE_TONE[tone ?? \"zinc\"],\n      className,\n    )}\n  >\n    {children}\n  </span>\n);\n"],"mappings":";;;;;AAKA,MAAaM,aAAYC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAC,MAAA,EAAAC,MAAAC,MAAAC,IAAAC,WAAAC,aAAAP;CAapB,MAAAS,MAXJJ,OAAAG,KAAAA,IAAA,YAAAH,QAWa,OAATT,WAAAD;CACA,MAAAe,KAAAb,WAAWM,QAAA;CAAe,IAAAQ;CAAA,IAAAV,EAAA,OAAAK,aAAAL,EAAA,OAAAQ,MAAAR,EAAA,OAAAS,IAAA;EAFjBC,KAAAlB,KACTgB,IACAC,IACAJ,SACF;EAACL,EAAA,KAAAK;EAAAL,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAM,YAAAN,EAAA,OAAAU,IAAA;EALHC,KAAA,oBAAA,QAAA;GACa,WAAAD;GAMVJ;EACI,CAAA;EAAAN,EAAA,KAAAM;EAAAN,EAAA,KAAAU;EAAAV,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OARPW;AAQO"}

package/dist/views/ui/badgeTone.d.ts

@@ -0,0 +1,21 @@
+//#region src/views/ui/badgeTone.d.ts
+declare const BADGE_TONE: {
+  readonly blue: "border-blue-300 bg-blue-500/10 text-blue-700 dark:border-blue-500/40 dark:bg-blue-500/15 dark:text-blue-300";
+  readonly emerald: "border-emerald-300 bg-emerald-500/10 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/15 dark:text-emerald-300";
+  readonly amber: "border-amber-300 bg-amber-500/10 text-amber-700 dark:border-amber-500/40 dark:bg-amber-500/15 dark:text-amber-300";
+  readonly red: "border-red-300 bg-red-500/10 text-red-700 dark:border-red-500/40 dark:bg-red-500/15 dark:text-red-300";
+  readonly violet: "border-violet-300 bg-violet-500/10 text-violet-700 dark:border-violet-500/40 dark:bg-violet-500/15 dark:text-violet-300";
+  readonly zinc: "border-zinc-300 bg-zinc-500/10 text-zinc-600 dark:border-zinc-600 dark:bg-zinc-500/15 dark:text-zinc-300";
+};
+type BadgeTone = keyof typeof BADGE_TONE;
+/** Message and attachment lifecycle status to badge tone. */
+declare const STATUS_TONE: Record<string, BadgeTone>;
+/** MCP connection state to badge tone. */
+declare const CONNECTION_TONE: Record<string, BadgeTone>;
+declare const BADGE_BASE = "inline-flex items-center rounded-md border px-1.5 py-0.5 text-[11px] font-medium leading-none";
+declare const BADGE_SM = "inline-flex items-center rounded border px-1 py-px text-[9px] font-medium leading-none";
+/** Uniform width for short status labels in transcript rails (e.g. opt vs running). */
+declare const RAIL_STATUS_BADGE_CLASS = "min-w-[2.875rem] justify-center";
+//#endregion
+export { BADGE_BASE, BADGE_SM, BADGE_TONE, BadgeTone, CONNECTION_TONE, RAIL_STATUS_BADGE_CLASS, STATUS_TONE };
+//# sourceMappingURL=badgeTone.d.ts.map

package/dist/views/ui/badgeTone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badgeTone.d.ts","names":[],"sources":["../../../src/views/ui/badgeTone.ts"],"mappings":";cAAa,UAAA;EAAA;;;;;;;KAYD,SAAA,gBAAyB,UAAU;;cAGlC,WAAA,EAAa,MAAM,SAAS,SAAA;;cAQ5B,eAAA,EAAiB,MAAM,SAAS,SAAA;AAAA,cAShC,UAAA;AAAA,cAGA,QAAA;;cAIA,uBAAA"}

package/dist/views/ui/badgeTone.js

@@ -0,0 +1,33 @@
+//#region src/views/ui/badgeTone.ts
+const BADGE_TONE = {
+	blue: "border-blue-300 bg-blue-500/10 text-blue-700 dark:border-blue-500/40 dark:bg-blue-500/15 dark:text-blue-300",
+	emerald: "border-emerald-300 bg-emerald-500/10 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/15 dark:text-emerald-300",
+	amber: "border-amber-300 bg-amber-500/10 text-amber-700 dark:border-amber-500/40 dark:bg-amber-500/15 dark:text-amber-300",
+	red: "border-red-300 bg-red-500/10 text-red-700 dark:border-red-500/40 dark:bg-red-500/15 dark:text-red-300",
+	violet: "border-violet-300 bg-violet-500/10 text-violet-700 dark:border-violet-500/40 dark:bg-violet-500/15 dark:text-violet-300",
+	zinc: "border-zinc-300 bg-zinc-500/10 text-zinc-600 dark:border-zinc-600 dark:bg-zinc-500/15 dark:text-zinc-300"
+};
+/** Message and attachment lifecycle status to badge tone. */
+const STATUS_TONE = {
+	running: "blue",
+	"requires-action": "amber",
+	incomplete: "red",
+	complete: "emerald"
+};
+/** MCP connection state to badge tone. */
+const CONNECTION_TONE = {
+	connected: "emerald",
+	connecting: "blue",
+	authPending: "blue",
+	authRequired: "amber",
+	disconnected: "zinc",
+	error: "red"
+};
+const BADGE_BASE = "inline-flex items-center rounded-md border px-1.5 py-0.5 text-[11px] font-medium leading-none";
+const BADGE_SM = "inline-flex items-center rounded border px-1 py-px text-[9px] font-medium leading-none";
+/** Uniform width for short status labels in transcript rails (e.g. opt vs running). */
+const RAIL_STATUS_BADGE_CLASS = "min-w-[2.875rem] justify-center";
+//#endregion
+export { BADGE_BASE, BADGE_SM, BADGE_TONE, CONNECTION_TONE, RAIL_STATUS_BADGE_CLASS, STATUS_TONE };
+
+//# sourceMappingURL=badgeTone.js.map

package/dist/views/ui/badgeTone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badgeTone.js","names":["BADGE_TONE","blue","emerald","amber","red","violet","zinc","const","BadgeTone","STATUS_TONE","Record","running","incomplete","complete","CONNECTION_TONE","connected","connecting","authPending","authRequired","disconnected","error","BADGE_BASE","BADGE_SM","RAIL_STATUS_BADGE_CLASS"],"sources":["../../../src/views/ui/badgeTone.ts"],"sourcesContent":["export const BADGE_TONE = {\n  blue: \"border-blue-300 bg-blue-500/10 text-blue-700 dark:border-blue-500/40 dark:bg-blue-500/15 dark:text-blue-300\",\n  emerald:\n    \"border-emerald-300 bg-emerald-500/10 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/15 dark:text-emerald-300\",\n  amber:\n    \"border-amber-300 bg-amber-500/10 text-amber-700 dark:border-amber-500/40 dark:bg-amber-500/15 dark:text-amber-300\",\n  red: \"border-red-300 bg-red-500/10 text-red-700 dark:border-red-500/40 dark:bg-red-500/15 dark:text-red-300\",\n  violet:\n    \"border-violet-300 bg-violet-500/10 text-violet-700 dark:border-violet-500/40 dark:bg-violet-500/15 dark:text-violet-300\",\n  zinc: \"border-zinc-300 bg-zinc-500/10 text-zinc-600 dark:border-zinc-600 dark:bg-zinc-500/15 dark:text-zinc-300\",\n} as const;\n\nexport type BadgeTone = keyof typeof BADGE_TONE;\n\n/** Message and attachment lifecycle status to badge tone. */\nexport const STATUS_TONE: Record<string, BadgeTone> = {\n  running: \"blue\",\n  \"requires-action\": \"amber\",\n  incomplete: \"red\",\n  complete: \"emerald\",\n};\n\n/** MCP connection state to badge tone. */\nexport const CONNECTION_TONE: Record<string, BadgeTone> = {\n  connected: \"emerald\",\n  connecting: \"blue\",\n  authPending: \"blue\",\n  authRequired: \"amber\",\n  disconnected: \"zinc\",\n  error: \"red\",\n};\n\nexport const BADGE_BASE =\n  \"inline-flex items-center rounded-md border px-1.5 py-0.5 text-[11px] font-medium leading-none\";\n\nexport const BADGE_SM =\n  \"inline-flex items-center rounded border px-1 py-px text-[9px] font-medium leading-none\";\n\n/** Uniform width for short status labels in transcript rails (e.g. opt vs running). */\nexport const RAIL_STATUS_BADGE_CLASS = \"min-w-[2.875rem] justify-center\";\n"],"mappings":";AAAA,MAAaA,aAAa;CACxBC,MAAM;CACNC,SACE;CACFC,OACE;CACFC,KAAK;CACLC,QACE;CACFC,MAAM;AACR;;AAKA,MAAaG,cAAyC;CACpDE,SAAS;CACT,mBAAmB;CACnBC,YAAY;CACZC,UAAU;AACZ;;AAGA,MAAaC,kBAA6C;CACxDC,WAAW;CACXC,YAAY;CACZC,aAAa;CACbC,cAAc;CACdC,cAAc;CACdC,OAAO;AACT;AAEA,MAAaC,aACX;AAEF,MAAaC,WACX;;AAGF,MAAaC,0BAA0B"}

package/dist/views/ui/index.d.ts

@@ -0,0 +1,16 @@
+import { CenteredMessage } from "./CenteredMessage.js";
+import { Chip } from "./Chip.js";
+import { ControlButton } from "./ControlButton.js";
+import { CopyButton } from "./CopyButton.js";
+import { EmptyState } from "./EmptyState.js";
+import { InfoCard } from "./InfoCard.js";
+import { JSONTree } from "./JSONTree.js";
+import { PaneHeader, PaneHeaderStack } from "./PaneHeader.js";
+import { RailTime } from "./RailTime.js";
+import { SectionLabel } from "./SectionLabel.js";
+import { SelectableRow } from "./SelectableRow.js";
+import { Sparkline } from "./Sparkline.js";
+import { SummaryItem, SummaryList } from "./SummaryItem.js";
+import { BadgeTone, CONNECTION_TONE, RAIL_STATUS_BADGE_CLASS, STATUS_TONE } from "./badgeTone.js";
+import { ToneBadge } from "./ToneBadge.js";
+export { type BadgeTone, CONNECTION_TONE, CenteredMessage, Chip, ControlButton, CopyButton, EmptyState, InfoCard, JSONTree, PaneHeader, PaneHeaderStack, RAIL_STATUS_BADGE_CLASS, RailTime, STATUS_TONE, SectionLabel, SelectableRow, Sparkline, SummaryItem, SummaryList, ToneBadge };

package/dist/views/ui/index.js

@@ -0,0 +1,16 @@
+import { CONNECTION_TONE, RAIL_STATUS_BADGE_CLASS, STATUS_TONE } from "./badgeTone.js";
+import { CenteredMessage } from "./CenteredMessage.js";
+import { Chip } from "./Chip.js";
+import { ControlButton } from "./ControlButton.js";
+import { CopyButton } from "./CopyButton.js";
+import { EmptyState } from "./EmptyState.js";
+import { InfoCard } from "./InfoCard.js";
+import { JSONTree } from "./JSONTree.js";
+import { PaneHeader, PaneHeaderStack } from "./PaneHeader.js";
+import { RailTime } from "./RailTime.js";
+import { SectionLabel } from "./SectionLabel.js";
+import { SelectableRow } from "./SelectableRow.js";
+import { Sparkline } from "./Sparkline.js";
+import { SummaryItem, SummaryList } from "./SummaryItem.js";
+import { ToneBadge } from "./ToneBadge.js";
+export { CONNECTION_TONE, CenteredMessage, Chip, ControlButton, CopyButton, EmptyState, InfoCard, JSONTree, PaneHeader, PaneHeaderStack, RAIL_STATUS_BADGE_CLASS, RailTime, STATUS_TONE, SectionLabel, SelectableRow, Sparkline, SummaryItem, SummaryList, ToneBadge };

package/dist/views/ui/useCopyToClipboard.d.ts

@@ -0,0 +1,12 @@
+//#region src/views/ui/useCopyToClipboard.d.ts
+declare const useCopyToClipboard: ({
+  copiedDuration
+}?: {
+  copiedDuration?: number;
+}) => {
+  isCopied: boolean;
+  copy: (value: string) => void;
+};
+//#endregion
+export { useCopyToClipboard };
+//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/dist/views/ui/useCopyToClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.d.ts","names":[],"sources":["../../../src/views/ui/useCopyToClipboard.ts"],"mappings":";cAEa,kBAAA;EAAsB;AAAA;EAGjC,cAAA;AAAA"}

package/dist/views/ui/useCopyToClipboard.js

@@ -0,0 +1,44 @@
+import { c } from "@assistant-ui/tap/react-shim/compiler-runtime";
+import { useState } from "@assistant-ui/tap/react-shim";
+//#region src/views/ui/useCopyToClipboard.ts
+const useCopyToClipboard = (t0) => {
+	const $ = c(7);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { copiedDuration: t2 } = t1;
+	const copiedDuration = t2 === void 0 ? 2e3 : t2;
+	const [isCopied, setIsCopied] = useState(false);
+	let t3;
+	if ($[2] !== copiedDuration) {
+		t3 = (value) => {
+			if (!value || typeof navigator === "undefined" || !navigator.clipboard) return;
+			navigator.clipboard.writeText(value).then(() => {
+				setIsCopied(true);
+				window.setTimeout(() => setIsCopied(false), copiedDuration);
+			}, _temp);
+		};
+		$[2] = copiedDuration;
+		$[3] = t3;
+	} else t3 = $[3];
+	const copy = t3;
+	let t4;
+	if ($[4] !== copy || $[5] !== isCopied) {
+		t4 = {
+			isCopied,
+			copy
+		};
+		$[4] = copy;
+		$[5] = isCopied;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+};
+function _temp() {}
+//#endregion
+export { useCopyToClipboard };
+
+//# sourceMappingURL=useCopyToClipboard.js.map

package/dist/views/ui/useCopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.js","names":["useCallback","useState","useCopyToClipboard","t0","$","_c","t1","undefined","copiedDuration","t2","isCopied","setIsCopied","t3","value","navigator","clipboard","writeText","then","window","setTimeout","_temp","copy","t4"],"sources":["../../../src/views/ui/useCopyToClipboard.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport const useCopyToClipboard = ({\n  copiedDuration = 2000,\n}: {\n  copiedDuration?: number;\n} = {}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const copy = useCallback(\n    (value: string) => {\n      if (!value || typeof navigator === \"undefined\" || !navigator.clipboard) {\n        return;\n      }\n      navigator.clipboard.writeText(value).then(\n        () => {\n          setIsCopied(true);\n          window.setTimeout(() => setIsCopied(false), copiedDuration);\n        },\n        () => {},\n      );\n    },\n    [copiedDuration],\n  );\n\n  return { isCopied, copy };\n};\n"],"mappings":";;;AAEA,MAAaE,sBAAqBC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,IAAA;EAACG,KAAAH,OAAAI,KAAAA,IAAA,CAI9B,IAJ8BJ;EAI7BC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAJ6B,MAAA,EAAAI,gBAAAC,OAAAH;CACjC,MAAAE,iBAAAC,OAAAF,KAAAA,IAAA,MAAAE;CAIA,MAAA,CAAAC,UAAAC,eAAgCV,SAAS,KAAK;CAAE,IAAAW;CAAA,IAAAR,EAAA,OAAAI,gBAAA;EAG9CI,MAAAC,UAAA;GACE,IAAI,CAACA,SAAS,OAAOC,cAAc,eAA/B,CAA+CA,UAASC,WAAU;GAGtED,UAASC,UAAUC,UAAWH,KAAK,CAAC,CAAAI,WAClC;IACEN,YAAY,IAAI;IAChBO,OAAMC,iBAAkBR,YAAY,KAAK,GAAGH,cAAc;GAAC,GAE7DY,KACF;EAAC;EACFhB,EAAA,KAAAI;EAAAJ,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAZH,MAAAiB,OAAaT;CAcX,IAAAU;CAAA,IAAAlB,EAAA,OAAAiB,QAAAjB,EAAA,OAAAM,UAAA;EAEKY,KAAA;GAAAZ;GAAAW;EAAiB;EAACjB,EAAA,KAAAiB;EAAAjB,EAAA,KAAAM;EAAAN,EAAA,KAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OAAlBkB;AAAkB;AAvBO,SAAAF,QAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-devtools",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "React development tools for assistant-ui components",
   "keywords": [
     "assistant-ui",
@@ -27,6 +27,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
+    "clsx": "^2.1.1",
     "zod": "^4.4.3"
   },
   "peerDependencies": {
@@ -46,15 +47,17 @@
     }
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.3.1",
     "@types/node": "^25.9.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "tailwindcss": "^4.3.1",
     "vitest": "^4.1.8",
-    "@assistant-ui/react": "0.14.20",
-    "@assistant-ui/tap": "0.9.1",
-    "@assistant-ui/x-buildutils": "0.0.14"
+    "@assistant-ui/react": "0.14.23",
+    "@assistant-ui/tap": "0.9.2",
+    "@assistant-ui/x-buildutils": "0.0.15"
   },
   "publishConfig": {
     "access": "public",
@@ -70,7 +73,8 @@
     "url": "https://github.com/assistant-ui/assistant-ui/issues"
   },
   "scripts": {
-    "build": "aui-build",
+    "build:css": "node scripts/build-styles.mjs",
+    "build": "pnpm build:css && aui-build",
     "test": "vitest run"
   }
 }