@ai-matrx/content-ir-react 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.24.0 — 2026-10-06
+
+`KindActionButton` joins the kind kit: the one-click door from a kind component to a host Action.
+
+- `KindActionButton` / `KindActionButtonProps` in `/kind-kit`. Wraps the component's `runAction(key, input)`
+  prop: busy state with no double fire, an optional inline `confirm` (one-sentence consequence + confirm
+  button, never `window.confirm`), a one-line inline error (<=60 chars, full text in `title`) on
+  `{ok:false}`, `onDone(result)` on ok, `compact` icon-only mode.
+
+### Consumer action
+
+- Stored code imports it as `@/components/kind-kit/KindActionButton`: add that path to the host's stored
+  scope (`"@/components/kind-kit/KindActionButton": kindKit`) and to the gate lists (code-runtime >= 0.3.0).
+
+## 0.23.1 — 2026-10-06
+
+- `KindKitCopyProps` is `MatrxCopyMenuProps` from `@ai-matrx/alchemy/react/workspace` (ALC-16); adds the
+  `@ai-matrx/alchemy` dependency.
+- Consumer action: none.
+
 ## 0.23.0 — 2026-10-06
 
 The kind kit moves into the package (Applets AP-5): `@ai-matrx/content-ir-react/kind-kit`.

package/dist/kind-kit.cjs

@@ -35,6 +35,7 @@ __export(kind_kit_exports, {
   DefaultReadEmpty: () => DefaultReadEmpty,
   DefaultReadStaleNotice: () => DefaultReadStaleNotice,
   KeywordChip: () => KeywordChip,
+  KindActionButton: () => KindActionButton,
   KindHeaderBar: () => KindHeaderBar,
   KindPanel: () => KindPanel,
   KindPanelGrid: () => KindPanelGrid,
@@ -700,10 +701,129 @@ function KindHeaderBar({
   );
 }
 
-// kind-kit/StreamingSkeleton.tsx
+// kind-kit/KindActionButton.tsx
 var React8 = __toESM(require("react"), 1);
 var import_design_system6 = require("@ai-matrx/design-system");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var ERROR_MAX = 60;
+function KindActionButton({
+  runAction,
+  action,
+  input,
+  label,
+  icon,
+  busyLabel,
+  confirm,
+  onDone,
+  onError,
+  variant = "outline",
+  compact = false,
+  disabled = false,
+  className
+}) {
+  const [busy, setBusy] = React8.useState(false);
+  const [asking, setAsking] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const inFlight = React8.useRef(false);
+  const mounted = React8.useRef(true);
+  const errorTimer = React8.useRef(null);
+  React8.useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      if (errorTimer.current) clearTimeout(errorTimer.current);
+    };
+  }, []);
+  const run = React8.useCallback(async () => {
+    if (inFlight.current) return;
+    inFlight.current = true;
+    setAsking(false);
+    setError(null);
+    setBusy(true);
+    try {
+      const payload = typeof input === "function" ? input() : input;
+      const res = await runAction(action, payload);
+      if (res && res.ok) {
+        onDone?.(res.result);
+      } else {
+        const message = res && "error" in res && res.error || "Action failed";
+        if (mounted.current) {
+          setError(message);
+          if (errorTimer.current) clearTimeout(errorTimer.current);
+          errorTimer.current = setTimeout(() => {
+            if (mounted.current) setError(null);
+          }, 8e3);
+        }
+        onError?.(message);
+      }
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Action failed";
+      if (mounted.current) setError(message);
+      onError?.(message);
+    } finally {
+      inFlight.current = false;
+      if (mounted.current) setBusy(false);
+    }
+  }, [action, input, onDone, onError, runAction]);
+  const onClick = () => {
+    if (busy || disabled || inFlight.current) return;
+    if (confirm) setAsking(true);
+    else void run();
+  };
+  if (asking && !busy) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "span",
+      {
+        role: "group",
+        "aria-label": label,
+        className: (0, import_design_system6.cn)(
+          "inline-flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border border-border bg-card px-2 py-1 text-xs",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-foreground", children: confirm }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Button, { type: "button", size: "xs", variant: variant === "outline" ? "default" : variant, onClick: () => void run(), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Button, { type: "button", size: "xs", variant: "ghost", onClick: () => setAsking(false), children: "Cancel" })
+        ]
+      }
+    );
+  }
+  const shownLabel = busy ? busyLabel ?? label : label;
+  const glyph = busy ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loader2, { className: "h-4 w-4 animate-spin" }) : renderKindKitIcon(icon, "h-4 w-4");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: (0, import_design_system6.cn)("inline-flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_design_system6.Button,
+      {
+        type: "button",
+        variant,
+        size: compact ? "icon-sm" : "sm",
+        disabled: disabled || busy,
+        "aria-busy": busy || void 0,
+        "aria-label": compact ? shownLabel : void 0,
+        title: compact ? label : void 0,
+        onClick,
+        children: [
+          glyph,
+          !compact && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: shownLabel })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        role: "alert",
+        title: error,
+        className: "min-w-0 text-xs text-destructive",
+        children: error.length > ERROR_MAX ? `${error.slice(0, ERROR_MAX - 1)}\u2026` : error
+      }
+    )
+  ] });
+}
+
+// kind-kit/StreamingSkeleton.tsx
+var React9 = __toESM(require("react"), 1);
+var import_design_system7 = require("@ai-matrx/design-system");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function StreamingSkeleton({
   layout = "list",
   rows = 3,
@@ -714,72 +834,72 @@ function StreamingSkeleton({
 }) {
   const n = Math.max(1, rows);
   const cols = Math.max(1, columns ?? (layout === "cards" ? 2 : 3));
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       role: "status",
       "aria-busy": "true",
       "aria-label": label,
-      className: (0, import_design_system6.cn)("space-y-2", className),
+      className: (0, import_design_system7.cn)("space-y-2", className),
       children: [
-        header && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-4 w-4 rounded" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-4 w-40" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "ml-auto h-6 w-16" })
+        header && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-4 w-4 rounded" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-4 w-40" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "ml-auto h-6 w-16" })
         ] }),
-        layout === "list" && Array.from({ length: n }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 rounded-md border border-border px-2 py-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-4 w-4 rounded" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: (0, import_design_system6.cn)("h-3.5", i % 3 === 0 ? "w-2/3" : i % 3 === 1 ? "w-1/2" : "w-3/4") })
+        layout === "list" && Array.from({ length: n }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 rounded-md border border-border px-2 py-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-4 w-4 rounded" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: (0, import_design_system7.cn)("h-3.5", i % 3 === 0 ? "w-2/3" : i % 3 === 1 ? "w-1/2" : "w-3/4") })
         ] }, i)),
-        layout === "cards" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        layout === "cards" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
             className: "grid gap-3",
             style: { gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, 240px), 1fr))` },
-            children: Array.from({ length: Math.max(n, cols) }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-2 rounded-lg border border-border p-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-3.5 w-1/2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-3 w-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-5 w-16 rounded-full" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-5 w-24 rounded-full" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-5 w-12 rounded-full" })
+            children: Array.from({ length: Math.max(n, cols) }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-2 rounded-lg border border-border p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-3.5 w-1/2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-3 w-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-5 w-16 rounded-full" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-5 w-24 rounded-full" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-5 w-12 rounded-full" })
               ] })
             ] }, i))
           }
         ),
-        layout === "table" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "overflow-hidden rounded-md border border-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        layout === "table" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "overflow-hidden rounded-md border border-border", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "grid gap-2 border-b border-border bg-muted/40 px-2 py-1.5",
               style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
-              children: Array.from({ length: cols }).map((_, c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: "h-3 w-2/3" }, c))
+              children: Array.from({ length: cols }).map((_, c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: "h-3 w-2/3" }, c))
             }
           ),
-          Array.from({ length: n }).map((_, r) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Array.from({ length: n }).map((_, r) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "grid gap-2 px-2 py-2",
               style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
-              children: Array.from({ length: cols }).map((_2, c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_design_system6.Skeleton, { className: (0, import_design_system6.cn)("h-3", c === 0 ? "w-3/4" : "w-1/2") }, c))
+              children: Array.from({ length: cols }).map((_2, c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_design_system7.Skeleton, { className: (0, import_design_system7.cn)("h-3", c === 0 ? "w-3/4" : "w-1/2") }, c))
             },
             r
           ))
         ] }),
-        layout === "text" && Array.from({ length: n }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_design_system6.Skeleton,
+        layout === "text" && Array.from({ length: n }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_design_system7.Skeleton,
           {
-            className: (0, import_design_system6.cn)("h-3", i === n - 1 ? "w-2/5" : i % 2 === 0 ? "w-full" : "w-11/12")
+            className: (0, import_design_system7.cn)("h-3", i === n - 1 ? "w-2/5" : i % 2 === 0 ? "w-full" : "w-11/12")
           },
           i
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: label })
       ]
     }
   );
 }
 function useStreamingValue(value, fallback) {
-  const [last, setLast] = React8.useState({
+  const [last, setLast] = React9.useState({
     value: fallback,
     arrived: false
   });
@@ -799,9 +919,9 @@ function streamText(value, fallback = "") {
 }
 
 // kind-kit/TagList.tsx
-var React9 = __toESM(require("react"), 1);
-var import_design_system7 = require("@ai-matrx/design-system");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var React10 = __toESM(require("react"), 1);
+var import_design_system8 = require("@ai-matrx/design-system");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var TONE = {
   default: "border-border bg-background text-foreground",
   primary: "border-primary/40 bg-primary/5 text-foreground",
@@ -820,9 +940,9 @@ function KeywordChip({
   size = "sm",
   className
 }) {
-  const [editing, setEditing] = React9.useState(false);
-  const [draft, setDraft] = React9.useState(label);
-  const inputRef = React9.useRef(null);
+  const [editing, setEditing] = React10.useState(false);
+  const [draft, setDraft] = React10.useState(label);
+  const inputRef = React10.useRef(null);
   const selectable = !!onSelect && !disabled;
   const editable = !!onEdit && !disabled;
   const startEdit = () => {
@@ -843,10 +963,10 @@ function KeywordChip({
   const pad = size === "md" ? "px-2.5 py-1 text-sm" : "px-2 py-0.5 text-xs";
   const inputText = size === "md" ? "text-[16px] sm:text-sm" : "text-[16px] sm:text-xs";
   const ctl = size === "md" ? "h-4 w-4" : "h-3.5 w-3.5";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "span",
     {
-      className: (0, import_design_system7.cn)(
+      className: (0, import_design_system8.cn)(
         // max-w-full + min-w-0 + break-words: the text wraps INSIDE the chip.
         "inline-flex max-w-full min-w-0 items-center gap-1 rounded-full border leading-snug",
         pad,
@@ -855,7 +975,7 @@ function KeywordChip({
         className
       ),
       children: [
-        selectable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        selectable && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -863,19 +983,19 @@ function KeywordChip({
             "aria-checked": selected,
             "aria-label": `${selected ? "Deselect" : "Select"} ${label}`,
             onClick: () => onSelect?.(!selected),
-            className: (0, import_design_system7.cn)(
+            className: (0, import_design_system8.cn)(
               "flex shrink-0 items-center justify-center rounded-sm border",
               size === "md" ? "h-4 w-4" : "h-3.5 w-3.5",
               selected ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground/50 bg-background"
             ),
-            children: selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Check, { className: "h-2.5 w-2.5" })
+            children: selected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Check, { className: "h-2.5 w-2.5" })
           }
         ),
         renderKindKitIcon(
           icon,
-          (0, import_design_system7.cn)("shrink-0 text-muted-foreground", ctl)
+          (0, import_design_system8.cn)("shrink-0 text-muted-foreground", ctl)
         ),
-        editing ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        editing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
             ref: inputRef,
@@ -893,9 +1013,9 @@ function KeywordChip({
             },
             "aria-label": `Edit ${label}`,
             size: Math.max(4, draft.length + 1),
-            className: (0, import_design_system7.cn)("min-w-0 bg-transparent outline-none", inputText)
+            className: (0, import_design_system8.cn)("min-w-0 bg-transparent outline-none", inputText)
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             className: "min-w-0 whitespace-normal break-words text-left",
@@ -903,18 +1023,18 @@ function KeywordChip({
             children: label
           }
         ),
-        meta !== void 0 && meta !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: meta }),
-        editable && !editing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        meta !== void 0 && meta !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: meta }),
+        editable && !editing && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
             "aria-label": `Edit ${label}`,
             onClick: startEdit,
             className: "shrink-0 rounded-full text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Pencil, { className: (0, import_design_system7.cn)("h-3 w-3", size === "md" && "h-3.5 w-3.5") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Pencil, { className: (0, import_design_system8.cn)("h-3 w-3", size === "md" && "h-3.5 w-3.5") })
           }
         ),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -922,7 +1042,7 @@ function KeywordChip({
             disabled,
             onClick: onRemove,
             className: "-mr-0.5 shrink-0 rounded-full text-muted-foreground hover:text-destructive disabled:pointer-events-none",
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(X, { className: ctl })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(X, { className: ctl })
           }
         )
       ]
@@ -948,8 +1068,8 @@ function TagList({
   className
 }) {
   const { ReadEmpty, ReadStaleNotice } = getKindKitHost();
-  const [adding, setAdding] = React9.useState(false);
-  const [draft, setDraft] = React9.useState("");
+  const [adding, setAdding] = React10.useState(false);
+  const [draft, setDraft] = React10.useState("");
   const inputText = size === "md" ? "text-[16px] sm:text-sm" : "text-[16px] sm:text-xs";
   const selectedSet = new Set(selected ?? []);
   const commitAdd = () => {
@@ -958,16 +1078,16 @@ function TagList({
     setDraft("");
     setAdding(false);
   };
-  if (items.length === 0 && read && read.status !== "ready") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ReadEmpty, { read });
+  if (items.length === 0 && read && read.status !== "ready") return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ReadEmpty, { read });
   if (items.length === 0 && !onAdd) {
-    return emptyState !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_design_system7.cn)("text-xs text-muted-foreground", className), children: emptyState }) : null;
+    return emptyState !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_design_system8.cn)("text-xs text-muted-foreground", className), children: emptyState }) : null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_design_system7.cn)("flex flex-wrap items-center gap-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ReadStaleNotice, { read, className: "w-full" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_design_system8.cn)("flex flex-wrap items-center gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ReadStaleNotice, { read, className: "w-full" }),
     items.map((raw, index) => {
       const item = normalize(raw);
       const key = item.key ?? item.label;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         KeywordChip,
         {
           label: item.label,
@@ -983,15 +1103,15 @@ function TagList({
         `${key}-${index}`
       );
     }),
-    items.length === 0 && emptyState !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs text-muted-foreground", children: emptyState }),
-    onAdd && !disabled && (adding ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    items.length === 0 && emptyState !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-muted-foreground", children: emptyState }),
+    onAdd && !disabled && (adding ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
-        className: (0, import_design_system7.cn)(
+        className: (0, import_design_system8.cn)(
           "inline-flex items-center gap-1 rounded-full border border-dashed border-primary/60 bg-background",
           size === "md" ? "px-2.5 py-1 text-sm" : "px-2 py-0.5 text-xs"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
           {
             autoFocus: true,
@@ -1011,21 +1131,21 @@ function TagList({
             },
             "aria-label": addPlaceholder,
             size: Math.max(6, draft.length + 1),
-            className: (0, import_design_system7.cn)("min-w-0 bg-transparent outline-none placeholder:text-muted-foreground", inputText)
+            className: (0, import_design_system8.cn)("min-w-0 bg-transparent outline-none placeholder:text-muted-foreground", inputText)
           }
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "button",
       {
         type: "button",
         onClick: () => setAdding(true),
-        className: (0, import_design_system7.cn)(
+        className: (0, import_design_system8.cn)(
           "inline-flex items-center gap-1 rounded-full border border-dashed border-border text-muted-foreground hover:border-primary/60 hover:text-foreground",
           size === "md" ? "px-2.5 py-1 text-sm" : "px-2 py-0.5 text-xs"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Plus, { className: "h-3 w-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Plus, { className: "h-3 w-3" }),
           addPlaceholder.replace(/…$/, "")
         ]
       }