@particle-academy/react-fancy 3.0.0 → 3.1.0

package/dist/index.js

@@ -9202,11 +9202,11 @@ function computeTicks(min, max, count = 5) {
   }
   return ticks;
 }
-function niceNum(range2, round) {
+function niceNum(range2, round2) {
   const exponent = Math.floor(Math.log10(range2));
   const fraction = range2 / Math.pow(10, exponent);
   let niceFraction;
-  if (round) {
+  if (round2) {
     if (fraction < 1.5) niceFraction = 1;
     else if (fraction < 3) niceFraction = 2;
     else if (fraction < 7) niceFraction = 5;
@@ -11819,7 +11819,791 @@ TreeNavRoot.displayName = "TreeNav";
 var TreeNav = Object.assign(TreeNavRoot, {
   Node: TreeNode
 });
+var CONFIDENCE_TIERS = [
+  { min: 0.85, color: "#10b981", label: "high" },
+  { min: 0.6, color: "#f59e0b", label: "medium" },
+  { min: 0, color: "#ef4444", label: "low" }
+];
+function tier(c) {
+  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];
+}
+function ReasonTag({
+  value,
+  reason,
+  confidence = 1,
+  sources = [],
+  by,
+  theme = "dot",
+  pinned = false,
+  onFollowUp,
+  className
+}) {
+  const t = tier(confidence);
+  const trigger = theme === "chip" ? /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? ""}`,
+      style: { backgroundColor: t.color + "22", color: t.color },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-1.5 w-1.5 rounded-full",
+            style: { backgroundColor: t.color }
+          }
+        ),
+        value,
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] opacity-70", children: "?" })
+      ]
+    }
+  ) : theme === "underline" ? /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `cursor-help underline decoration-dotted underline-offset-2 ${className ?? ""}`,
+      style: { textDecorationColor: t.color },
+      children: [
+        value,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ml-0.5 font-mono text-[10px]",
+            style: { color: t.color },
+            children: "?"
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs("span", { className: `inline-flex cursor-help items-baseline gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium", children: value }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-block h-1.5 w-1.5 rounded-full align-middle",
+        style: { backgroundColor: t.color },
+        title: "reason available"
+      }
+    )
+  ] });
+  if (pinned) {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col items-start gap-0.5 align-top", children: [
+      trigger,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300",
+          style: { borderColor: t.color },
+          children: reason
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { hover: true, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { children: trigger }),
+    /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsxs("div", { className: "w-72 space-y-2 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "text-[10px] font-semibold uppercase tracking-wider",
+            style: { color: t.color },
+            children: [
+              t.label,
+              " confidence \xB7 ",
+              (confidence * 100).toFixed(0),
+              "%"
+            ]
+          }
+        ),
+        by && /* @__PURE__ */ jsxs("span", { className: "ml-auto font-mono text-[10px] text-zinc-400", children: [
+          "@",
+          by
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-snug text-zinc-700 dark:text-zinc-200", children: reason }),
+      sources.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-zinc-400", children: "sources" }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-0.5 space-y-0.5 text-[12px]", children: sources.map((s, i) => /* @__PURE__ */ jsx("li", { children: s.href ? /* @__PURE__ */ jsx("a", { className: "text-violet-600 hover:underline", href: s.href, children: s.label }) : /* @__PURE__ */ jsx("span", { className: "text-zinc-600 dark:text-zinc-300", children: s.label }) }, i)) })
+      ] }),
+      onFollowUp && /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsx(Action, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
+    ] }) })
+  ] });
+}
+function MoodMeter({
+  min,
+  max,
+  step,
+  value,
+  confidence,
+  onChange,
+  posted,
+  width = 320,
+  height = 220,
+  showGrid = true,
+  color = "#0ea5e9",
+  postedColor = "#a855f7",
+  prefix = "",
+  suffix = "",
+  formatValue,
+  className
+}) {
+  const ref = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const snapStep = step ?? (max - min) / 100;
+  const fmt = useCallback(
+    (v) => {
+      if (formatValue) return formatValue(v);
+      const num = snapStep < 1 ? v.toFixed(2) : Math.round(v).toString();
+      return `${prefix}${num}${suffix}`;
+    },
+    [formatValue, snapStep, prefix, suffix]
+  );
+  const set = useCallback(
+    (clientX, clientY) => {
+      const el = ref.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const x = clamp((clientX - rect.left) / rect.width, 0, 1);
+      const y = clamp((clientY - rect.top) / rect.height, 0, 1);
+      const raw = min + x * (max - min);
+      const snapped = round(raw, snapStep, min);
+      const c = clamp(1 - y, 0, 1);
+      onChange(snapped, Math.round(c * 100) / 100);
+    },
+    [min, max, snapStep, onChange]
+  );
+  const onPointerDown = (e) => {
+    e.target.setPointerCapture?.(e.pointerId);
+    setDragging(true);
+    set(e.clientX, e.clientY);
+  };
+  const onPointerMove = (e) => {
+    if (!dragging) return;
+    set(e.clientX, e.clientY);
+  };
+  const onPointerUp = () => setDragging(false);
+  const xPct = (value - min) / (max - min) * 100;
+  const yPct = (1 - confidence) * 100;
+  const haloR = 18 + (1 - confidence) * 70;
+  const pxPct = posted ? (posted.value - min) / (max - min) * 100 : 0;
+  const pyPct = posted ? (1 - posted.confidence) * 100 : 0;
+  const pHaloR = posted ? 16 + (1 - posted.confidence) * 60 : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      className: `relative cursor-crosshair touch-none select-none overflow-hidden rounded-md border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 ${className ?? ""}`,
+      style: { width, height },
+      children: [
+        showGrid && /* @__PURE__ */ jsxs("svg", { className: "pointer-events-none absolute inset-0 h-full w-full", "aria-hidden": true, children: [
+          [0.25, 0.5, 0.75].map((p, i) => /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: `${p * 100}%`,
+              x2: `${p * 100}%`,
+              y1: "0",
+              y2: "100%",
+              stroke: "#a1a1aa",
+              strokeOpacity: 0.18,
+              strokeDasharray: "3 4"
+            },
+            `v${i}`
+          )),
+          [0.25, 0.5, 0.75].map((p, i) => /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: "0",
+              x2: "100%",
+              y1: `${p * 100}%`,
+              y2: `${p * 100}%`,
+              stroke: "#a1a1aa",
+              strokeOpacity: 0.18,
+              strokeDasharray: "3 4"
+            },
+            `h${i}`
+          ))
+        ] }),
+        showGrid && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-1.5 top-1.5 text-[10px] uppercase tracking-wider text-zinc-400", children: "\u2191 sure" }),
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-1.5 left-1.5 text-[10px] uppercase tracking-wider text-zinc-400", children: "\u2193 unsure" }),
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute right-1.5 top-1.5 text-[10px] uppercase tracking-wider text-zinc-400", children: [
+            fmt(max),
+            " \u2192"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute bottom-1.5 right-1.5 text-[10px] uppercase tracking-wider text-zinc-400", children: [
+            "\u2190 ",
+            fmt(min)
+          ] })
+        ] }),
+        posted && /* @__PURE__ */ jsx(
+          Handle,
+          {
+            xPct: pxPct,
+            yPct: pyPct,
+            haloR: pHaloR,
+            color: postedColor,
+            dashed: true,
+            label: "agent"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            xPct,
+            yPct,
+            haloR,
+            color,
+            label: fmt(value)
+          }
+        )
+      ]
+    }
+  );
+}
+function Handle({
+  xPct,
+  yPct,
+  haloR,
+  color,
+  dashed = false,
+  label
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full",
+        style: {
+          left: `${xPct}%`,
+          top: `${yPct}%`,
+          width: haloR * 2,
+          height: haloR * 2,
+          background: color + (dashed ? "11" : "22"),
+          border: dashed ? `1px dashed ${color}` : "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white dark:ring-zinc-900",
+        style: {
+          left: `${xPct}%`,
+          top: `${yPct}%`,
+          width: 14,
+          height: 14,
+          background: color,
+          opacity: dashed ? 0.6 : 1
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute -translate-x-1/2 rounded px-1.5 py-0.5 font-mono text-[10px]",
+        style: {
+          left: `${xPct}%`,
+          top: `calc(${yPct}% + 14px)`,
+          color
+        },
+        children: label
+      }
+    )
+  ] });
+}
+function clamp(n, lo, hi) {
+  return Math.max(lo, Math.min(hi, n));
+}
+function round(n, step, min) {
+  if (step >= 1) return Math.round(n);
+  return Math.round((n - min) / step) * step + min;
+}
+var DEFAULT_MENTION_COLOR = {
+  agent: "#a855f7",
+  file: "#10b981",
+  person: "#3b82f6"
+};
+function PromptInput({
+  budgetTokens,
+  commands = [],
+  mentions = [],
+  showHint = true,
+  onSubmit,
+  placeholder = "Ask anything. Type / for commands, @ for mentions. \u2318/Ctrl+Enter to send.",
+  charsPerToken = 4,
+  mentionColor,
+  maxHeight = 280
+}) {
+  const [text, setText] = useState("");
+  const [attachments, setAttachments] = useState([]);
+  const [picker, setPicker] = useState(null);
+  const taRef = useRef(null);
+  const [dragOver, setDragOver] = useState(false);
+  const colors = mentionColor ?? DEFAULT_MENTION_COLOR;
+  const tokens = useMemo(
+    () => Math.ceil(text.length / Math.max(1, charsPerToken)),
+    [text, charsPerToken]
+  );
+  const ratio = Math.min(1, tokens / budgetTokens);
+  const meterColor = ratio < 0.6 ? "#10b981" : ratio < 0.85 ? "#f59e0b" : "#ef4444";
+  const filteredCmds = useMemo(
+    () => picker?.kind === "cmd" ? commands.filter(
+      (c) => c.name.slice(1).toLowerCase().startsWith(picker.query.toLowerCase())
+    ) : [],
+    [picker, commands]
+  );
+  const filteredMentions = useMemo(
+    () => picker?.kind === "mention" ? mentions.filter(
+      (m) => m.name.toLowerCase().includes(picker.query.toLowerCase())
+    ) : [],
+    [picker, mentions]
+  );
+  const items = picker?.kind === "cmd" ? filteredCmds : picker?.kind === "mention" ? filteredMentions : [];
+  useEffect(() => {
+    const ta = taRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = Math.min(maxHeight, ta.scrollHeight) + "px";
+  }, [text, maxHeight]);
+  const updateText = (next, caret) => {
+    setText(next);
+    let triggerIdx = -1;
+    let triggerKind = null;
+    for (let i = caret - 1; i >= 0; i--) {
+      const ch = next[i];
+      if (ch === "@") {
+        triggerKind = "mention";
+        triggerIdx = i;
+        break;
+      }
+      if (ch === "/" && (i === 0 || /\s/.test(next[i - 1] ?? ""))) {
+        triggerKind = "cmd";
+        triggerIdx = i;
+        break;
+      }
+      if (/\s/.test(ch)) break;
+    }
+    if (triggerKind !== null && triggerIdx >= 0) {
+      const query = next.slice(triggerIdx + 1, caret);
+      setPicker({ kind: triggerKind, start: triggerIdx, query, cursor: 0 });
+    } else {
+      setPicker(null);
+    }
+  };
+  const insertChoice = (i) => {
+    if (!picker || items.length === 0) return;
+    const choice = items[i] ?? items[0];
+    const insert = picker.kind === "cmd" ? choice.name + " " : `@${choice.id} `;
+    const before = text.slice(0, picker.start);
+    const after = text.slice(picker.start + 1 + picker.query.length);
+    const next = before + insert + after;
+    setText(next);
+    setPicker(null);
+    requestAnimationFrame(() => {
+      const ta = taRef.current;
+      if (!ta) return;
+      ta.focus();
+      const pos = before.length + insert.length;
+      ta.setSelectionRange(pos, pos);
+    });
+  };
+  const submit = () => {
+    if (!text.trim() && attachments.length === 0) return;
+    onSubmit(text, attachments);
+    setText("");
+    setAttachments([]);
+    setPicker(null);
+  };
+  const onKeyDown = (e) => {
+    if (picker) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setPicker(
+          (p) => p ? { ...p, cursor: Math.min(items.length - 1, p.cursor + 1) } : p
+        );
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setPicker((p) => p ? { ...p, cursor: Math.max(0, p.cursor - 1) } : p);
+        return;
+      }
+      if (e.key === "Enter" && !e.metaKey && !e.ctrlKey && items.length > 0) {
+        e.preventDefault();
+        insertChoice(picker.cursor);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setPicker(null);
+        return;
+      }
+    }
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      submit();
+    }
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    const files = Array.from(e.dataTransfer.files);
+    setAttachments((cur) => [
+      ...cur,
+      ...files.map((f) => ({
+        id: `${f.name}-${Date.now()}-${Math.random()}`,
+        name: f.name,
+        bytes: f.size
+      }))
+    ]);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDragOver(true);
+      },
+      onDragLeave: () => setDragOver(false),
+      onDrop,
+      className: `relative rounded-md border transition ${dragOver ? "border-violet-400 bg-violet-50/50 dark:border-violet-600 dark:bg-violet-950/30" : "border-zinc-200 dark:border-zinc-800"} bg-white dark:bg-zinc-900`,
+      children: [
+        attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 border-b border-zinc-200 px-3 py-2 dark:border-zinc-800", children: attachments.map((a) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-2 py-0.5 text-[11px] dark:bg-zinc-800",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "\u{1F4CE}" }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono", children: a.name }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: fmtSize(a.bytes) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setAttachments((cur) => cur.filter((x) => x.id !== a.id)),
+                  className: "opacity-50 hover:opacity-100",
+                  "aria-label": "Remove attachment",
+                  children: "\xD7"
+                }
+              )
+            ]
+          },
+          a.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: taRef,
+              value: text,
+              onChange: (e) => updateText(e.target.value, e.target.selectionStart),
+              onKeyDown,
+              placeholder,
+              spellCheck: false,
+              className: "block w-full resize-none bg-transparent px-3 py-2.5 text-[14px] leading-relaxed outline-none placeholder:text-zinc-400",
+              rows: 3
+            }
+          ),
+          picker && items.length > 0 && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full left-2 z-10 mb-1 w-72 overflow-hidden rounded-md border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900", children: [
+            /* @__PURE__ */ jsxs("div", { className: "border-b border-zinc-100 bg-zinc-50 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950", children: [
+              picker.kind === "cmd" ? "Commands" : "Mention",
+              " \xB7 ",
+              items.length
+            ] }),
+            /* @__PURE__ */ jsx("ul", { className: "max-h-56 overflow-y-auto", children: items.map((item, i) => {
+              const active = i === picker.cursor;
+              if (picker.kind === "cmd") {
+                const c = item;
+                return /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      insertChoice(i);
+                    },
+                    onMouseEnter: () => setPicker((p) => p ? { ...p, cursor: i } : p),
+                    className: `cursor-pointer px-2 py-1.5 text-[12px] ${active ? "bg-violet-100 dark:bg-violet-900/30" : "hover:bg-zinc-50 dark:hover:bg-zinc-800"}`,
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "font-mono font-medium text-violet-700 dark:text-violet-300", children: c.name }),
+                      /* @__PURE__ */ jsx("div", { className: "text-[11px] text-zinc-500", children: c.hint })
+                    ]
+                  },
+                  c.name
+                );
+              }
+              const m = item;
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    insertChoice(i);
+                  },
+                  onMouseEnter: () => setPicker((p) => p ? { ...p, cursor: i } : p),
+                  className: `flex cursor-pointer items-center gap-2 px-2 py-1.5 text-[12px] ${active ? "bg-violet-100 dark:bg-violet-900/30" : "hover:bg-zinc-50 dark:hover:bg-zinc-800"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "h-2 w-2 rounded-full",
+                        style: { backgroundColor: colors[m.kind] ?? "#71717a" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: m.name }),
+                    /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] uppercase tracking-wider text-zinc-400", children: m.kind })
+                  ]
+                },
+                m.id
+              );
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-200 bg-zinc-50/60 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/40", children: [
+          /* @__PURE__ */ jsx(Tooltip, { content: "Drop files here, or click", children: /* @__PURE__ */ jsx(
+            Action,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => {
+              },
+              children: "\u{1F4CE} attach"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-2 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-1.5 w-24 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full rounded-full transition-all",
+                style: { width: `${ratio * 100}%`, backgroundColor: meterColor }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-[11px]", style: { color: meterColor }, children: [
+              fmtTokens(tokens),
+              " / ",
+              fmtTokens(budgetTokens)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+            showHint && /* @__PURE__ */ jsxs("span", { className: "hidden text-[10px] text-zinc-500 sm:inline", children: [
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-zinc-300 bg-zinc-50 px-1 py-0.5 font-mono text-[9px] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300", children: "\u2318" }),
+              " ",
+              "+",
+              " ",
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-zinc-300 bg-zinc-50 px-1 py-0.5 font-mono text-[9px] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300", children: "Enter" }),
+              " ",
+              "to send"
+            ] }),
+            /* @__PURE__ */ jsx(Action, { color: "violet", size: "sm", onClick: submit, children: "send \u2192" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function fmtTokens(n) {
+  if (n < 1e3) return `${n}`;
+  return `${(n / 1e3).toFixed(1)}k`;
+}
+function fmtSize(b) {
+  if (b < 1024) return `${b} B`;
+  if (b < 1024 * 1024) return `${(b / 1024).toFixed(0)} KB`;
+  return `${(b / 1024 / 1024).toFixed(1)} MB`;
+}
+function MagicWand({
+  value,
+  onValueChange,
+  actions,
+  appearance = "floating",
+  autoHide = true,
+  rows = 6,
+  placeholder,
+  onAction
+}) {
+  const taRef = useRef(null);
+  const wandRef = useRef(null);
+  const [sel, setSel] = useState(null);
+  const [pos, setPos] = useState(null);
+  const [busy, setBusy] = useState(null);
+  const measureSelection = useCallback(() => {
+    const ta = taRef.current;
+    if (!ta) return;
+    const start = ta.selectionStart ?? 0;
+    const end = ta.selectionEnd ?? 0;
+    if (start === end) {
+      setSel(null);
+      setPos(null);
+      return;
+    }
+    const text = ta.value.slice(start, end);
+    setSel({ start, end, text });
+    const rect = caretRect(ta, start, end);
+    if (rect) setPos({ x: rect.x, y: rect.y });
+  }, []);
+  useEffect(() => {
+    if (!autoHide) return;
+    const onScroll = () => {
+      setSel(null);
+      setPos(null);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [autoHide]);
+  useEffect(() => {
+    if (!autoHide) return;
+    const onDocMouseDown = (e) => {
+      if (wandRef.current?.contains(e.target)) return;
+      if (taRef.current?.contains(e.target)) return;
+      setSel(null);
+      setPos(null);
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    return () => document.removeEventListener("mousedown", onDocMouseDown);
+  }, [autoHide]);
+  const handleAction = async (action) => {
+    if (!sel) return;
+    setBusy(action.id);
+    try {
+      const replacement = await action.run(sel.text, sel);
+      const next = value.slice(0, sel.start) + replacement + value.slice(sel.end);
+      onValueChange(next);
+      onAction?.(action, sel, replacement);
+    } finally {
+      setBusy(null);
+      setSel(null);
+      setPos(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ref: taRef,
+        value,
+        onValueChange,
+        onSelect: measureSelection,
+        onKeyUp: measureSelection,
+        onMouseUp: measureSelection,
+        rows,
+        placeholder
+      }
+    ),
+    sel && pos && /* @__PURE__ */ jsx(
+      Wand,
+      {
+        ref: wandRef,
+        pos,
+        actions,
+        appearance,
+        busy,
+        onAction: handleAction,
+        selectionLength: sel.text.length
+      }
+    )
+  ] });
+}
+function Wand({
+  ref,
+  pos,
+  actions,
+  appearance,
+  busy,
+  onAction,
+  selectionLength
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "absolute z-20 -translate-x-1/2 -translate-y-full",
+      style: { left: pos.x, top: pos.y - 6 },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-full border border-violet-300 bg-white px-1.5 py-1 shadow-lg ring-1 ring-violet-200 dark:border-violet-700 dark:bg-zinc-900 dark:ring-violet-900", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ml-1 mr-0.5 inline-flex items-center gap-1 text-[10px] font-medium text-violet-700 dark:text-violet-300", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2726" }),
+            appearance === "floating" && /* @__PURE__ */ jsxs(Badge, { color: "violet", children: [
+              selectionLength,
+              " chars"
+            ] })
+          ] }),
+          actions.map((a) => /* @__PURE__ */ jsxs(
+            Action,
+            {
+              size: "sm",
+              variant: "ghost",
+              onClick: () => onAction(a),
+              disabled: busy !== null,
+              title: a.hint,
+              children: [
+                busy === a.id ? "\u2026" : appearance === "pill" ? a.label[0] : a.label,
+                appearance === "floating" && a.tag && /* @__PURE__ */ jsx("span", { className: "ml-1 rounded-full bg-zinc-100 px-1 text-[9px] font-medium text-zinc-500 dark:bg-zinc-800", children: a.tag })
+              ]
+            },
+            a.id
+          ))
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-full -translate-x-1/2 -translate-y-px", children: /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rotate-45 border-b border-r border-violet-300 bg-white dark:border-violet-700 dark:bg-zinc-900" }) })
+      ]
+    }
+  );
+}
+function caretRect(ta, start, end) {
+  const div = document.createElement("div");
+  const style = getComputedStyle(ta);
+  const props = [
+    "boxSizing",
+    "width",
+    "height",
+    "overflowX",
+    "overflowY",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "fontStyle",
+    "fontVariant",
+    "fontWeight",
+    "fontStretch",
+    "fontSize",
+    "fontSizeAdjust",
+    "lineHeight",
+    "fontFamily",
+    "textAlign",
+    "textTransform",
+    "textIndent",
+    "letterSpacing",
+    "wordSpacing",
+    "tabSize"
+  ];
+  for (const p of props) div.style[p] = style[p];
+  div.style.position = "absolute";
+  div.style.top = "-9999px";
+  div.style.left = "-9999px";
+  div.style.whiteSpace = "pre-wrap";
+  div.style.wordWrap = "break-word";
+  const value = ta.value;
+  div.textContent = value.substring(0, start);
+  const startSpan = document.createElement("span");
+  startSpan.textContent = value.substring(start, end) || ".";
+  div.appendChild(startSpan);
+  document.body.appendChild(div);
+  const taRect = ta.getBoundingClientRect();
+  const parentRect = ta.offsetParent?.getBoundingClientRect() ?? taRect;
+  const spanRect = startSpan.getBoundingClientRect();
+  const divRect = div.getBoundingClientRect();
+  const offsetX = spanRect.left - divRect.left;
+  const offsetY = spanRect.top - divRect.top;
+  document.body.removeChild(div);
+  const x = taRect.left - parentRect.left + offsetX + spanRect.width / 2;
+  const y = taRect.top - parentRect.top + offsetY - ta.scrollTop;
+  return { x, y };
+}
 
-export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, Menu2 as Menu, MobileMenu, Modal, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, RadioGroup, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, MagicWand, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map