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

package/dist/kind-kit.js

@@ -0,0 +1,1011 @@
+"use client";
+
+// kind-kit/SortableList.tsx
+import * as React3 from "react";
+
+// kind-kit/icons.tsx
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function make(name, children) {
+  const Icon = ({ className }) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children
+    }
+  );
+  Icon.displayName = name;
+  return Icon;
+}
+var Loader2 = make("Loader2", /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }));
+var MoreHorizontal = make(
+  "MoreHorizontal",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+);
+var ChevronDown = make("ChevronDown", /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }));
+var ChevronUp = make("ChevronUp", /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }));
+var GripVertical = make(
+  "GripVertical",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "5", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "19", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "5", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "19", r: "1" })
+  ] })
+);
+var X = make(
+  "X",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+  ] })
+);
+var Check = make("Check", /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }));
+var Pencil = make(
+  "Pencil",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
+    /* @__PURE__ */ jsx("path", { d: "m15 5 4 4" })
+  ] })
+);
+var Plus = make(
+  "Plus",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+  ] })
+);
+
+// kind-kit/SortableList.tsx
+import { cn } from "@ai-matrx/design-system";
+
+// kind-kit/kind-kit-host.tsx
+import * as React2 from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var KEY = /* @__PURE__ */ Symbol.for("ai-matrx.content-ir-react.kind-kit-host");
+function resolveText(human, json) {
+  if (typeof human === "function") return human();
+  if (typeof human === "string") return human;
+  if (json !== void 0) return JSON.stringify(typeof json === "function" ? json() : json, null, 2);
+  return "";
+}
+function DefaultCopyButtons({ label, human, json, size, className }) {
+  const [state, setState] = React2.useState("idle");
+  const onClick = async () => {
+    try {
+      await navigator.clipboard.writeText(resolveText(human, json));
+      setState("copied");
+    } catch {
+      setState("failed");
+    }
+    setTimeout(() => setState("idle"), 1500);
+  };
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: `Copy ${label}`,
+      "aria-label": `Copy ${label}`,
+      className: className ?? `inline-flex items-center rounded-md border border-border px-2 text-xs text-foreground hover:bg-muted ${size === "icon" ? "h-7" : "h-8"}`,
+      children: state === "copied" ? "Copied" : state === "failed" ? "Copy failed" : "Copy"
+    }
+  );
+}
+function RetryButton({ onRetry }) {
+  if (!onRetry) return null;
+  return /* @__PURE__ */ jsx2("button", { type: "button", onClick: onRetry, className: "ml-2 underline underline-offset-2", children: "Try again" });
+}
+function DefaultReadEmpty({ read, loading, children }) {
+  const status = read?.status ?? "ready";
+  const what = read?.what ?? "this list";
+  if (status === "loading") return /* @__PURE__ */ jsx2(Fragment2, { children: loading ?? /* @__PURE__ */ jsx2("div", { role: "status", className: "text-xs text-muted-foreground", children: `Loading ${what}\u2026` }) });
+  if (status === "error") {
+    return /* @__PURE__ */ jsxs2("div", { role: "alert", className: "text-xs text-destructive", children: [
+      `Could not load ${what}.`,
+      /* @__PURE__ */ jsx2(RetryButton, { onRetry: read?.onRetry })
+    ] });
+  }
+  return /* @__PURE__ */ jsx2(Fragment2, { children: children ?? null });
+}
+function DefaultReadStaleNotice({ read, className }) {
+  if (read?.status !== "error") return null;
+  return /* @__PURE__ */ jsxs2("div", { role: "alert", className: `text-xs text-muted-foreground ${className ?? ""}`, children: [
+    `Showing earlier ${read.what ?? "results"}; the latest refresh failed.`,
+    /* @__PURE__ */ jsx2(RetryButton, { onRetry: read.onRetry })
+  ] });
+}
+var DEFAULTS = {
+  CopyButtons: DefaultCopyButtons,
+  ReadEmpty: DefaultReadEmpty,
+  ReadStaleNotice: DefaultReadStaleNotice
+};
+function setKindKitHost(host) {
+  globalThis[KEY] = { ...globalThis[KEY], ...host };
+}
+function getKindKitHost() {
+  return { ...DEFAULTS, ...globalThis[KEY] };
+}
+function resetKindKitHost() {
+  delete globalThis[KEY];
+}
+
+// kind-kit/SortableList.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function defaultKey(item, index) {
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (item && typeof item === "object") {
+    const rec = item;
+    if (typeof rec.id === "string" || typeof rec.id === "number")
+      return String(rec.id);
+    if (typeof rec.key === "string") return rec.key;
+  }
+  return String(index);
+}
+function defaultRender(item) {
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (item && typeof item === "object") {
+    const rec = item;
+    for (const k of ["label", "title", "name", "text"]) {
+      if (typeof rec[k] === "string") return rec[k];
+    }
+    return JSON.stringify(item);
+  }
+  return String(item);
+}
+function moveItem(items, from, to) {
+  const next = items.slice();
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return next;
+}
+function SortableList({
+  items,
+  getKey = defaultKey,
+  onReorder,
+  renderItem,
+  onRemove,
+  disabled = false,
+  hideArrows = false,
+  emptyState,
+  read,
+  className,
+  itemClassName,
+  ariaLabel
+}) {
+  const { ReadEmpty, ReadStaleNotice } = getKindKitHost();
+  const [drag, setDrag] = React3.useState(null);
+  const [armed, setArmed] = React3.useState(null);
+  const listRef = React3.useRef(null);
+  const rowRefs = React3.useRef([]);
+  const canInteract = !disabled;
+  const handleDragStart = (index) => (e) => {
+    if (!canInteract || armed !== index) {
+      e.preventDefault();
+      return;
+    }
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(index));
+    const listTop = listRef.current?.getBoundingClientRect().top ?? 0;
+    const rects = rowRefs.current.slice(0, items.length).map((el) => {
+      const r = el ? el.getBoundingClientRect() : new DOMRect();
+      return { top: r.top - listTop, bottom: r.bottom - listTop, height: r.height };
+    });
+    setDrag({ from: index, over: index, rects });
+  };
+  const handleDragOver = (e) => {
+    if (!drag) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    const listTop = listRef.current?.getBoundingClientRect().top ?? 0;
+    const y = e.clientY - listTop;
+    let over = drag.rects.length - 1;
+    for (let i = 0; i < drag.rects.length; i++) {
+      const r = drag.rects[i];
+      if (r && y < r.bottom) {
+        over = i;
+        break;
+      }
+    }
+    if (over !== drag.over) setDrag({ ...drag, over });
+  };
+  const finish = () => {
+    setDrag(null);
+    setArmed(null);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    if (drag && drag.from !== drag.over) {
+      onReorder(moveItem(items, drag.from, drag.over));
+    }
+    finish();
+  };
+  const move = (from, to) => {
+    if (to < 0 || to >= items.length || from === to) return;
+    onReorder(moveItem(items, from, to));
+  };
+  const translateFor = (index) => {
+    if (!drag) return 0;
+    const { from, over, rects } = drag;
+    if (from === over) return 0;
+    const dragged = rects[from];
+    if (!dragged) return 0;
+    const neighbour = rects[from + 1] ?? rects[from - 1];
+    const gap = neighbour ? Math.max(
+      0,
+      from + 1 < rects.length ? neighbour.top - dragged.bottom : dragged.top - neighbour.bottom
+    ) : 0;
+    const slot = dragged.height + gap;
+    if (index === from) {
+      const target = rects[over];
+      if (!target) return 0;
+      return over > from ? target.bottom - dragged.bottom : target.top - dragged.top;
+    }
+    if (from < over && index > from && index <= over) return -slot;
+    if (over < from && index >= over && index < from) return slot;
+    return 0;
+  };
+  if (items.length === 0) {
+    if (read && read.status !== "ready") return /* @__PURE__ */ jsx3(ReadEmpty, { read });
+    return emptyState !== void 0 ? /* @__PURE__ */ jsx3("div", { className: cn("text-xs text-muted-foreground", className), children: emptyState }) : null;
+  }
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3(ReadStaleNotice, { read, className: "mb-1.5" }),
+    /* @__PURE__ */ jsx3(
+      "ul",
+      {
+        role: "list",
+        "aria-label": ariaLabel,
+        ref: listRef,
+        className: cn("flex flex-col gap-1.5", className),
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: items.map((item, index) => {
+          const key = getKey(item, index);
+          const isDragging = drag?.from === index;
+          const translate = translateFor(index);
+          return /* @__PURE__ */ jsxs3(
+            "li",
+            {
+              ref: (el) => {
+                rowRefs.current[index] = el;
+              },
+              draggable: canInteract && armed === index,
+              onDragStart: handleDragStart(index),
+              onDragEnd: finish,
+              style: {
+                transform: translate ? `translate3d(0, ${translate}px, 0)` : void 0
+              },
+              className: cn(
+                "flex items-center gap-1.5 rounded-md border px-2 py-1.5 text-sm text-foreground",
+                "transition-transform duration-150 ease-out will-change-transform",
+                isDragging ? "border-dashed border-primary/60 bg-primary/5 shadow-inner" : "border-border bg-card",
+                itemClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Drag to reorder",
+                    disabled: !canInteract,
+                    onPointerDown: () => canInteract && setArmed(index),
+                    onPointerUp: () => !drag && setArmed(null),
+                    className: cn(
+                      "flex h-7 w-6 shrink-0 touch-none items-center justify-center rounded text-muted-foreground",
+                      canInteract ? "cursor-grab hover:bg-muted hover:text-foreground active:cursor-grabbing" : "opacity-40"
+                    ),
+                    children: /* @__PURE__ */ jsx3(GripVertical, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: cn(
+                      "min-w-0 flex-1 break-words",
+                      isDragging && "opacity-40"
+                    ),
+                    children: renderItem ? renderItem(item, { index, isDragging }) : defaultRender(item)
+                  }
+                ),
+                (!hideArrows || onRemove) && /*
+                 * Controls sit IN FLOW at the row's end — never floating.
+                 *
+                 * A cluster that costs no layout width must, by construction,
+                 * land on top of something when it appears, and it wins every
+                 * click there because it is the layer above. Rows here carry the
+                 * host component's own trailing controls (copy, edit, menus), so
+                 * a floating cluster covered live buttons on every consumer:
+                 * measured on `artisan_demo_reading_list`, it sat on "Copy for
+                 * AI" and "Edit book". The kit cannot know what a row draws in
+                 * its corner, so it takes its own width instead of borrowing the
+                 * row's. Ruled 2026-08-30: overlap is never worth the density.
+                 */
+                /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    className: cn(
+                      "flex shrink-0 items-center gap-px self-start",
+                      isDragging && "opacity-40"
+                    ),
+                    children: [
+                      !hideArrows && /* Chevrons stack so the pair costs one 20px column, not two. */
+                      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center pointer-coarse:flex-row", children: [
+                        /* @__PURE__ */ jsx3(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Move up",
+                            disabled: !canInteract || index === 0,
+                            onClick: () => move(index, index - 1),
+                            className: "flex h-3.5 w-5 items-center justify-center rounded-sm text-muted-foreground/70 hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30 pointer-coarse:h-7 pointer-coarse:w-7",
+                            children: /* @__PURE__ */ jsx3(ChevronUp, { className: "h-3 w-3" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Move down",
+                            disabled: !canInteract || index === items.length - 1,
+                            onClick: () => move(index, index + 1),
+                            className: "flex h-3.5 w-5 items-center justify-center rounded-sm text-muted-foreground/70 hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30 pointer-coarse:h-7 pointer-coarse:w-7",
+                            children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-3 w-3" })
+                          }
+                        )
+                      ] }),
+                      onRemove && /* @__PURE__ */ jsx3(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Remove",
+                          disabled: !canInteract,
+                          onClick: () => onRemove(item, index),
+                          className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground/70 hover:bg-muted hover:text-destructive disabled:pointer-events-none disabled:opacity-30 pointer-coarse:h-7 pointer-coarse:w-7",
+                          children: /* @__PURE__ */ jsx3(X, { className: "h-3.5 w-3.5" })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            },
+            key
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// kind-kit/KindPanelGrid.tsx
+import "react";
+import { cn as cn2 } from "@ai-matrx/design-system";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var GAP_PX = { sm: 8, md: 12, lg: 16 };
+var GAP_CLASS = { sm: "gap-2", md: "gap-3", lg: "gap-4" };
+function KindPanelGrid({
+  children,
+  minColumnWidth = 280,
+  maxColumns,
+  gap = "md",
+  fill = "auto-fit",
+  className
+}) {
+  const min = `min(100%, ${minColumnWidth}px)`;
+  const track = maxColumns && maxColumns > 0 ? `max(${min}, calc((100% - ${GAP_PX[gap] * (maxColumns - 1)}px) / ${maxColumns}))` : min;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn2("grid items-stretch", GAP_CLASS[gap], className),
+      style: { gridTemplateColumns: `repeat(${fill}, minmax(${track}, 1fr))` },
+      children
+    }
+  );
+}
+
+// kind-kit/KindPanel.tsx
+import * as React6 from "react";
+import {
+  Button,
+  cn as cn4,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@ai-matrx/design-system";
+
+// kind-kit/icon-slot.tsx
+import * as React5 from "react";
+import { cn as cn3 } from "@ai-matrx/design-system";
+function resolveIconType(icon) {
+  if (typeof icon === "function") return icon;
+  if (typeof icon !== "object" || icon === null) return null;
+  const candidate = icon;
+  if (typeof candidate.$$typeof === "symbol") {
+    return icon;
+  }
+  if ("default" in candidate && candidate.default !== icon) {
+    return resolveIconType(candidate.default);
+  }
+  return null;
+}
+function renderKindKitIcon(icon, className) {
+  if (!icon) return null;
+  if (React5.isValidElement(icon)) {
+    return React5.cloneElement(icon, {
+      className: cn3(className, icon.props.className)
+    });
+  }
+  const Icon = resolveIconType(icon);
+  return Icon ? React5.createElement(Icon, { className }) : null;
+}
+
+// kind-kit/KindPanel.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function KindPanel({
+  title,
+  icon,
+  count,
+  badge,
+  streaming = false,
+  actions,
+  menuItems,
+  subline,
+  children,
+  footer,
+  variant = "card",
+  dense = false,
+  className,
+  bodyClassName
+}) {
+  const px = dense ? "px-2.5" : "px-3";
+  const menu = menuItems && menuItems.length > 0 ? menuItems : null;
+  return /* @__PURE__ */ jsxs4(
+    "section",
+    {
+      className: cn4(
+        "flex h-full min-h-0 min-w-0 flex-col",
+        variant === "card" && "rounded-lg border border-border bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "header",
+          {
+            className: cn4(
+              "flex items-start gap-2",
+              px,
+              dense ? "pt-2" : "pt-3",
+              variant === "bare" && "px-0"
+            ),
+            children: [
+              renderKindKitIcon(icon, "mt-0.5 h-3.5 w-3.5 shrink-0 text-primary"),
+              /* @__PURE__ */ jsx5("h3", { className: "min-w-0 flex-1 text-xs font-semibold uppercase leading-5 tracking-wide text-foreground break-words", children: title }),
+              count !== void 0 && /* @__PURE__ */ jsx5("span", { className: "mt-0.5 shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] tabular-nums text-muted-foreground", children: count }),
+              badge !== void 0 && /* @__PURE__ */ jsx5("span", { className: "mt-0.5 shrink-0", children: badge }),
+              streaming && /* @__PURE__ */ jsx5(
+                Loader2,
+                {
+                  "aria-label": "Still arriving",
+                  className: "mt-1 h-3 w-3 shrink-0 animate-spin text-muted-foreground"
+                }
+              ),
+              actions && /* @__PURE__ */ jsx5("div", { className: "flex shrink-0 items-center gap-1", children: actions }),
+              menu && /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx5(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    "aria-label": "More actions",
+                    className: "-mr-1 -mt-1 h-7 w-7 shrink-0 text-muted-foreground",
+                    children: /* @__PURE__ */ jsx5(MoreHorizontal, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx5(DropdownMenuContent, { align: "end", className: "min-w-44", children: menu.map((item, i) => /* @__PURE__ */ jsxs4(React6.Fragment, { children: [
+                  item.separatorBefore && i > 0 && /* @__PURE__ */ jsx5(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsxs4(
+                    DropdownMenuItem,
+                    {
+                      disabled: item.disabled ?? false,
+                      onSelect: () => item.onSelect(),
+                      className: cn4(
+                        "text-xs",
+                        item.destructive && "text-destructive focus:text-destructive"
+                      ),
+                      children: [
+                        item.icon && /* @__PURE__ */ jsx5(item.icon, { className: "mr-2 h-3.5 w-3.5" }),
+                        item.label
+                      ]
+                    }
+                  )
+                ] }, `${i}-${item.label}`)) })
+              ] })
+            ]
+          }
+        ),
+        subline !== void 0 && subline !== null && subline !== "" && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn4(
+              "pt-1 text-xs leading-snug text-muted-foreground break-words",
+              px,
+              variant === "bare" && "px-0"
+            ),
+            children: subline
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn4(
+              "min-w-0 flex-1",
+              px,
+              dense ? "py-1.5" : "py-2",
+              variant === "bare" && "px-0",
+              bodyClassName
+            ),
+            children
+          }
+        ),
+        footer !== void 0 && footer !== null && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn4(
+              "mt-auto border-t border-border",
+              px,
+              dense ? "py-1.5" : "py-2",
+              variant === "bare" && "px-0"
+            ),
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+}
+
+// kind-kit/KindHeaderBar.tsx
+import "react";
+import { cn as cn5 } from "@ai-matrx/design-system";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function KindHeaderBar({
+  title,
+  icon,
+  subtitle,
+  stats,
+  streaming = false,
+  streamingLabel = "Streaming",
+  copy,
+  actions,
+  size = "sm",
+  className
+}) {
+  const { CopyButtons } = getKindKitHost();
+  const titleCls = size === "md" ? "text-base" : "text-sm";
+  const iconCls = size === "md" ? "h-5 w-5" : "h-4 w-4";
+  const iconNode = renderKindKitIcon(
+    icon,
+    cn5("mt-0.5 shrink-0 text-primary", iconCls)
+  );
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn5("flex flex-wrap items-center gap-x-3 gap-y-1.5", className),
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 basis-48 items-start gap-2", children: [
+          iconNode,
+          /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: cn5(
+                  "font-semibold leading-tight text-foreground break-words",
+                  titleCls
+                ),
+                children: title
+              }
+            ),
+            subtitle !== void 0 && subtitle !== null && subtitle !== "" && /* @__PURE__ */ jsx6("div", { className: "mt-0.5 text-xs leading-snug text-muted-foreground break-words", children: subtitle })
+          ] })
+        ] }),
+        stats && stats.length > 0 && /* @__PURE__ */ jsx6("dl", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: stats.map((s, i) => /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            title: s.title,
+            className: "flex items-baseline gap-1 text-xs",
+            children: [
+              renderKindKitIcon(
+                s.icon,
+                "h-3 w-3 self-center text-muted-foreground"
+              ),
+              /* @__PURE__ */ jsx6("dd", { className: "font-semibold tabular-nums text-foreground", children: s.value }),
+              /* @__PURE__ */ jsx6("dt", { className: "text-muted-foreground", children: s.label })
+            ]
+          },
+          `${i}-${s.label}`
+        )) }),
+        streaming && /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx6(Loader2, { className: "h-3 w-3 animate-spin" }),
+          streamingLabel
+        ] }),
+        (actions || copy) && /* @__PURE__ */ jsxs5("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
+          actions,
+          copy && /* @__PURE__ */ jsx6(CopyButtons, { ...copy, size: size === "md" ? "sm" : "icon" })
+        ] })
+      ]
+    }
+  );
+}
+
+// kind-kit/StreamingSkeleton.tsx
+import * as React8 from "react";
+import { cn as cn6, Skeleton } from "@ai-matrx/design-system";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function StreamingSkeleton({
+  layout = "list",
+  rows = 3,
+  columns,
+  header = true,
+  label = "Loading",
+  className
+}) {
+  const n = Math.max(1, rows);
+  const cols = Math.max(1, columns ?? (layout === "cards" ? 2 : 3));
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": label,
+      className: cn6("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" })
+        ] }),
+        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") })
+        ] }, i)),
+        layout === "cards" && /* @__PURE__ */ jsx7(
+          "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" })
+              ] })
+            ] }, i))
+          }
+        ),
+        layout === "table" && /* @__PURE__ */ jsxs6("div", { className: "overflow-hidden rounded-md border border-border", children: [
+          /* @__PURE__ */ jsx7(
+            "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))
+            }
+          ),
+          Array.from({ length: n }).map((_, r) => /* @__PURE__ */ jsx7(
+            "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))
+            },
+            r
+          ))
+        ] }),
+        layout === "text" && Array.from({ length: n }).map((_, i) => /* @__PURE__ */ jsx7(
+          Skeleton,
+          {
+            className: cn6("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 })
+      ]
+    }
+  );
+}
+function useStreamingValue(value, fallback) {
+  const [last, setLast] = React8.useState({
+    value: fallback,
+    arrived: false
+  });
+  const defined = value !== null && value !== void 0;
+  if (defined && (!last.arrived || !Object.is(value, last.value))) {
+    const next = { value, arrived: true };
+    setLast(next);
+    return next;
+  }
+  return last;
+}
+function streamList(value) {
+  return Array.isArray(value) ? value : [];
+}
+function streamText(value, fallback = "") {
+  return typeof value === "string" && value.length > 0 ? 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";
+var TONE = {
+  default: "border-border bg-background text-foreground",
+  primary: "border-primary/40 bg-primary/5 text-foreground",
+  muted: "border-border bg-muted text-muted-foreground"
+};
+function KeywordChip({
+  label,
+  meta,
+  icon,
+  selected = false,
+  onSelect,
+  onRemove,
+  onEdit,
+  disabled = false,
+  tone = "default",
+  size = "sm",
+  className
+}) {
+  const [editing, setEditing] = React9.useState(false);
+  const [draft, setDraft] = React9.useState(label);
+  const inputRef = React9.useRef(null);
+  const selectable = !!onSelect && !disabled;
+  const editable = !!onEdit && !disabled;
+  const startEdit = () => {
+    if (!editable) return;
+    setDraft(label);
+    setEditing(true);
+    requestAnimationFrame(() => inputRef.current?.select());
+  };
+  const commit = () => {
+    setEditing(false);
+    const next = draft.trim();
+    if (next && next !== label) onEdit?.(next);
+  };
+  const cancel = () => {
+    setEditing(false);
+    setDraft(label);
+  };
+  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(
+    "span",
+    {
+      className: cn7(
+        // 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,
+        selected ? "border-primary bg-primary/10 text-foreground" : TONE[tone],
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        selectable && /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            role: "checkbox",
+            "aria-checked": selected,
+            "aria-label": `${selected ? "Deselect" : "Select"} ${label}`,
+            onClick: () => onSelect?.(!selected),
+            className: cn7(
+              "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" })
+          }
+        ),
+        renderKindKitIcon(
+          icon,
+          cn7("shrink-0 text-muted-foreground", ctl)
+        ),
+        editing ? /* @__PURE__ */ jsx8(
+          "input",
+          {
+            ref: inputRef,
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: commit,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                cancel();
+              }
+            },
+            "aria-label": `Edit ${label}`,
+            size: Math.max(4, draft.length + 1),
+            className: cn7("min-w-0 bg-transparent outline-none", inputText)
+          }
+        ) : /* @__PURE__ */ jsx8(
+          "span",
+          {
+            className: "min-w-0 whitespace-normal break-words text-left",
+            onDoubleClick: startEdit,
+            children: label
+          }
+        ),
+        meta !== void 0 && meta !== null && /* @__PURE__ */ jsx8("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: meta }),
+        editable && !editing && /* @__PURE__ */ jsx8(
+          "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") })
+          }
+        ),
+        onRemove && /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${label}`,
+            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 })
+          }
+        )
+      ]
+    }
+  );
+}
+function normalize(item) {
+  return typeof item === "string" ? { label: item } : item;
+}
+function TagList({
+  items,
+  selected,
+  onToggle,
+  onRemove,
+  onEdit,
+  onAdd,
+  addPlaceholder = "Add\u2026",
+  emptyState,
+  read,
+  tone,
+  size = "sm",
+  disabled = false,
+  className
+}) {
+  const { ReadEmpty, ReadStaleNotice } = getKindKitHost();
+  const [adding, setAdding] = React9.useState(false);
+  const [draft, setDraft] = React9.useState("");
+  const inputText = size === "md" ? "text-[16px] sm:text-sm" : "text-[16px] sm:text-xs";
+  const selectedSet = new Set(selected ?? []);
+  const commitAdd = () => {
+    const next = draft.trim();
+    if (next) onAdd?.(next);
+    setDraft("");
+    setAdding(false);
+  };
+  if (items.length === 0 && read && read.status !== "ready") return /* @__PURE__ */ jsx8(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 /* @__PURE__ */ jsxs7("div", { className: cn7("flex flex-wrap items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsx8(ReadStaleNotice, { read, className: "w-full" }),
+    items.map((raw, index) => {
+      const item = normalize(raw);
+      const key = item.key ?? item.label;
+      return /* @__PURE__ */ jsx8(
+        KeywordChip,
+        {
+          label: item.label,
+          meta: item.meta,
+          tone,
+          size,
+          disabled: disabled || item.disabled,
+          selected: selectedSet.has(key),
+          onSelect: onToggle ? (next) => onToggle(key, next) : void 0,
+          onRemove: onRemove ? () => onRemove(key, index) : void 0,
+          onEdit: onEdit ? (next) => onEdit(key, index, next) : void 0
+        },
+        `${key}-${index}`
+      );
+    }),
+    items.length === 0 && emptyState !== void 0 && /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: emptyState }),
+    onAdd && !disabled && (adding ? /* @__PURE__ */ jsx8(
+      "span",
+      {
+        className: cn7(
+          "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(
+          "input",
+          {
+            autoFocus: true,
+            value: draft,
+            placeholder: addPlaceholder,
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: commitAdd,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitAdd();
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                setDraft("");
+                setAdding(false);
+              }
+            },
+            "aria-label": addPlaceholder,
+            size: Math.max(6, draft.length + 1),
+            className: cn7("min-w-0 bg-transparent outline-none placeholder:text-muted-foreground", inputText)
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        onClick: () => setAdding(true),
+        className: cn7(
+          "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" }),
+          addPlaceholder.replace(/…$/, "")
+        ]
+      }
+    ))
+  ] });
+}
+export {
+  DefaultCopyButtons,
+  DefaultReadEmpty,
+  DefaultReadStaleNotice,
+  KeywordChip,
+  KindHeaderBar,
+  KindPanel,
+  KindPanelGrid,
+  SortableList,
+  StreamingSkeleton,
+  TagList,
+  getKindKitHost,
+  renderKindKitIcon,
+  resetKindKitHost,
+  setKindKitHost,
+  streamList,
+  streamText,
+  useStreamingValue
+};
+//# sourceMappingURL=kind-kit.js.map