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

package/dist/kind-kit.js

@@ -657,10 +657,129 @@ function KindHeaderBar({
   );
 }
 
-// kind-kit/StreamingSkeleton.tsx
+// kind-kit/KindActionButton.tsx
 import * as React8 from "react";
-import { cn as cn6, Skeleton } from "@ai-matrx/design-system";
+import { Button as Button2, cn as cn6 } from "@ai-matrx/design-system";
 import { jsx as jsx7, jsxs as jsxs6 } from "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__ */ jsxs6(
+      "span",
+      {
+        role: "group",
+        "aria-label": label,
+        className: cn6(
+          "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__ */ jsx7("span", { className: "text-foreground", children: confirm }),
+          /* @__PURE__ */ jsx7(Button2, { type: "button", size: "xs", variant: variant === "outline" ? "default" : variant, onClick: () => void run(), children: label }),
+          /* @__PURE__ */ jsx7(Button2, { type: "button", size: "xs", variant: "ghost", onClick: () => setAsking(false), children: "Cancel" })
+        ]
+      }
+    );
+  }
+  const shownLabel = busy ? busyLabel ?? label : label;
+  const glyph = busy ? /* @__PURE__ */ jsx7(Loader2, { className: "h-4 w-4 animate-spin" }) : renderKindKitIcon(icon, "h-4 w-4");
+  return /* @__PURE__ */ jsxs6("span", { className: cn6("inline-flex min-w-0 items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs6(
+      Button2,
+      {
+        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__ */ jsx7("span", { children: shownLabel })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx7(
+      "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
+import * as React9 from "react";
+import { cn as cn7, Skeleton } from "@ai-matrx/design-system";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function StreamingSkeleton({
   layout = "list",
   rows = 3,
@@ -671,72 +790,72 @@ function StreamingSkeleton({
 }) {
   const n = Math.max(1, rows);
   const cols = Math.max(1, columns ?? (layout === "cards" ? 2 : 3));
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       role: "status",
       "aria-busy": "true",
       "aria-label": label,
-      className: cn6("space-y-2", className),
+      className: cn7("space-y-2", className),
       children: [
-        header && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-4 rounded" }),
-          /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-40" }),
-          /* @__PURE__ */ jsx7(Skeleton, { className: "ml-auto h-6 w-16" })
+        header && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx8(Skeleton, { className: "h-4 w-4 rounded" }),
+          /* @__PURE__ */ jsx8(Skeleton, { className: "h-4 w-40" }),
+          /* @__PURE__ */ jsx8(Skeleton, { className: "ml-auto h-6 w-16" })
         ] }),
-        layout === "list" && Array.from({ length: n }).map((_, i) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 rounded-md border border-border px-2 py-2", children: [
-          /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-4 rounded" }),
-          /* @__PURE__ */ jsx7(Skeleton, { className: cn6("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__ */ jsxs7("div", { className: "flex items-center gap-2 rounded-md border border-border px-2 py-2", children: [
+          /* @__PURE__ */ jsx8(Skeleton, { className: "h-4 w-4 rounded" }),
+          /* @__PURE__ */ jsx8(Skeleton, { className: cn7("h-3.5", i % 3 === 0 ? "w-2/3" : i % 3 === 1 ? "w-1/2" : "w-3/4") })
         ] }, i)),
-        layout === "cards" && /* @__PURE__ */ jsx7(
+        layout === "cards" && /* @__PURE__ */ jsx8(
           "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__ */ jsxs6("div", { className: "space-y-2 rounded-lg border border-border p-3", children: [
-              /* @__PURE__ */ jsx7(Skeleton, { className: "h-3.5 w-1/2" }),
-              /* @__PURE__ */ jsx7(Skeleton, { className: "h-3 w-full" }),
-              /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-1.5 pt-1", children: [
-                /* @__PURE__ */ jsx7(Skeleton, { className: "h-5 w-16 rounded-full" }),
-                /* @__PURE__ */ jsx7(Skeleton, { className: "h-5 w-24 rounded-full" }),
-                /* @__PURE__ */ jsx7(Skeleton, { className: "h-5 w-12 rounded-full" })
+            children: Array.from({ length: Math.max(n, cols) }).map((_, i) => /* @__PURE__ */ jsxs7("div", { className: "space-y-2 rounded-lg border border-border p-3", children: [
+              /* @__PURE__ */ jsx8(Skeleton, { className: "h-3.5 w-1/2" }),
+              /* @__PURE__ */ jsx8(Skeleton, { className: "h-3 w-full" }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap gap-1.5 pt-1", children: [
+                /* @__PURE__ */ jsx8(Skeleton, { className: "h-5 w-16 rounded-full" }),
+                /* @__PURE__ */ jsx8(Skeleton, { className: "h-5 w-24 rounded-full" }),
+                /* @__PURE__ */ jsx8(Skeleton, { className: "h-5 w-12 rounded-full" })
               ] })
             ] }, i))
           }
         ),
-        layout === "table" && /* @__PURE__ */ jsxs6("div", { className: "overflow-hidden rounded-md border border-border", children: [
-          /* @__PURE__ */ jsx7(
+        layout === "table" && /* @__PURE__ */ jsxs7("div", { className: "overflow-hidden rounded-md border border-border", children: [
+          /* @__PURE__ */ jsx8(
             "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__ */ jsx7(Skeleton, { className: "h-3 w-2/3" }, c))
+              children: Array.from({ length: cols }).map((_, c) => /* @__PURE__ */ jsx8(Skeleton, { className: "h-3 w-2/3" }, c))
             }
           ),
-          Array.from({ length: n }).map((_, r) => /* @__PURE__ */ jsx7(
+          Array.from({ length: n }).map((_, r) => /* @__PURE__ */ jsx8(
             "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__ */ jsx7(Skeleton, { className: cn6("h-3", c === 0 ? "w-3/4" : "w-1/2") }, c))
+              children: Array.from({ length: cols }).map((_2, c) => /* @__PURE__ */ jsx8(Skeleton, { className: cn7("h-3", c === 0 ? "w-3/4" : "w-1/2") }, c))
             },
             r
           ))
         ] }),
-        layout === "text" && Array.from({ length: n }).map((_, i) => /* @__PURE__ */ jsx7(
+        layout === "text" && Array.from({ length: n }).map((_, i) => /* @__PURE__ */ jsx8(
           Skeleton,
           {
-            className: cn6("h-3", i === n - 1 ? "w-2/5" : i % 2 === 0 ? "w-full" : "w-11/12")
+            className: cn7("h-3", i === n - 1 ? "w-2/5" : i % 2 === 0 ? "w-full" : "w-11/12")
           },
           i
         )),
-        /* @__PURE__ */ jsx7("span", { className: "sr-only", children: label })
+        /* @__PURE__ */ jsx8("span", { className: "sr-only", children: label })
       ]
     }
   );
 }
 function useStreamingValue(value, fallback) {
-  const [last, setLast] = React8.useState({
+  const [last, setLast] = React9.useState({
     value: fallback,
     arrived: false
   });
@@ -756,9 +875,9 @@ function streamText(value, fallback = "") {
 }
 
 // kind-kit/TagList.tsx
-import * as React9 from "react";
-import { cn as cn7 } from "@ai-matrx/design-system";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { cn as cn8 } from "@ai-matrx/design-system";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var TONE = {
   default: "border-border bg-background text-foreground",
   primary: "border-primary/40 bg-primary/5 text-foreground",
@@ -777,9 +896,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 = () => {
@@ -800,10 +919,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__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "span",
     {
-      className: cn7(
+      className: cn8(
         // 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,
@@ -812,7 +931,7 @@ function KeywordChip({
         className
       ),
       children: [
-        selectable && /* @__PURE__ */ jsx8(
+        selectable && /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -820,19 +939,19 @@ function KeywordChip({
             "aria-checked": selected,
             "aria-label": `${selected ? "Deselect" : "Select"} ${label}`,
             onClick: () => onSelect?.(!selected),
-            className: cn7(
+            className: cn8(
               "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__ */ jsx8(Check, { className: "h-2.5 w-2.5" })
+            children: selected && /* @__PURE__ */ jsx9(Check, { className: "h-2.5 w-2.5" })
           }
         ),
         renderKindKitIcon(
           icon,
-          cn7("shrink-0 text-muted-foreground", ctl)
+          cn8("shrink-0 text-muted-foreground", ctl)
         ),
-        editing ? /* @__PURE__ */ jsx8(
+        editing ? /* @__PURE__ */ jsx9(
           "input",
           {
             ref: inputRef,
@@ -850,9 +969,9 @@ function KeywordChip({
             },
             "aria-label": `Edit ${label}`,
             size: Math.max(4, draft.length + 1),
-            className: cn7("min-w-0 bg-transparent outline-none", inputText)
+            className: cn8("min-w-0 bg-transparent outline-none", inputText)
           }
-        ) : /* @__PURE__ */ jsx8(
+        ) : /* @__PURE__ */ jsx9(
           "span",
           {
             className: "min-w-0 whitespace-normal break-words text-left",
@@ -860,18 +979,18 @@ function KeywordChip({
             children: label
           }
         ),
-        meta !== void 0 && meta !== null && /* @__PURE__ */ jsx8("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: meta }),
-        editable && !editing && /* @__PURE__ */ jsx8(
+        meta !== void 0 && meta !== null && /* @__PURE__ */ jsx9("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: meta }),
+        editable && !editing && /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
             "aria-label": `Edit ${label}`,
             onClick: startEdit,
             className: "shrink-0 rounded-full text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx8(Pencil, { className: cn7("h-3 w-3", size === "md" && "h-3.5 w-3.5") })
+            children: /* @__PURE__ */ jsx9(Pencil, { className: cn8("h-3 w-3", size === "md" && "h-3.5 w-3.5") })
           }
         ),
-        onRemove && /* @__PURE__ */ jsx8(
+        onRemove && /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -879,7 +998,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__ */ jsx8(X, { className: ctl })
+            children: /* @__PURE__ */ jsx9(X, { className: ctl })
           }
         )
       ]
@@ -905,8 +1024,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 = () => {
@@ -915,16 +1034,16 @@ function TagList({
     setDraft("");
     setAdding(false);
   };
-  if (items.length === 0 && read && read.status !== "ready") return /* @__PURE__ */ jsx8(ReadEmpty, { read });
+  if (items.length === 0 && read && read.status !== "ready") return /* @__PURE__ */ jsx9(ReadEmpty, { read });
   if (items.length === 0 && !onAdd) {
-    return emptyState !== void 0 ? /* @__PURE__ */ jsx8("div", { className: cn7("text-xs text-muted-foreground", className), children: emptyState }) : null;
+    return emptyState !== void 0 ? /* @__PURE__ */ jsx9("div", { className: cn8("text-xs text-muted-foreground", className), children: emptyState }) : null;
   }
-  return /* @__PURE__ */ jsxs7("div", { className: cn7("flex flex-wrap items-center gap-1.5", className), children: [
-    /* @__PURE__ */ jsx8(ReadStaleNotice, { read, className: "w-full" }),
+  return /* @__PURE__ */ jsxs8("div", { className: cn8("flex flex-wrap items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsx9(ReadStaleNotice, { read, className: "w-full" }),
     items.map((raw, index) => {
       const item = normalize(raw);
       const key = item.key ?? item.label;
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         KeywordChip,
         {
           label: item.label,
@@ -940,15 +1059,15 @@ function TagList({
         `${key}-${index}`
       );
     }),
-    items.length === 0 && emptyState !== void 0 && /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: emptyState }),
-    onAdd && !disabled && (adding ? /* @__PURE__ */ jsx8(
+    items.length === 0 && emptyState !== void 0 && /* @__PURE__ */ jsx9("span", { className: "text-xs text-muted-foreground", children: emptyState }),
+    onAdd && !disabled && (adding ? /* @__PURE__ */ jsx9(
       "span",
       {
-        className: cn7(
+        className: cn8(
           "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__ */ jsx8(
+        children: /* @__PURE__ */ jsx9(
           "input",
           {
             autoFocus: true,
@@ -968,21 +1087,21 @@ function TagList({
             },
             "aria-label": addPlaceholder,
             size: Math.max(6, draft.length + 1),
-            className: cn7("min-w-0 bg-transparent outline-none placeholder:text-muted-foreground", inputText)
+            className: cn8("min-w-0 bg-transparent outline-none placeholder:text-muted-foreground", inputText)
           }
         )
       }
-    ) : /* @__PURE__ */ jsxs7(
+    ) : /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
         onClick: () => setAdding(true),
-        className: cn7(
+        className: cn8(
           "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__ */ jsx8(Plus, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx9(Plus, { className: "h-3 w-3" }),
           addPlaceholder.replace(/…$/, "")
         ]
       }
@@ -994,6 +1113,7 @@ export {
   DefaultReadEmpty,
   DefaultReadStaleNotice,
   KeywordChip,
+  KindActionButton,
   KindHeaderBar,
   KindPanel,
   KindPanelGrid,