@particle-academy/react-fancy 5.11.0 → 5.13.1

package/dist/chunk-RNHIDZLE.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var fancyFileCommons = require('@particle-academy/fancy-file-commons');
+var jsxRuntime = require('react/jsx-runtime');
+
+function subscribeDark(callback) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", callback);
+  const observer = new MutationObserver(callback);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+  return () => {
+    mq.removeEventListener("change", callback);
+    observer.disconnect();
+  };
+}
+function darkSnapshot() {
+  return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useIsDark() {
+  return react.useSyncExternalStore(subscribeDark, darkSnapshot, () => false);
+}
+var TEXT_METRICS = "m-0 p-3 font-mono text-xs leading-relaxed";
+function CodeView({
+  value,
+  onChange,
+  language = "plaintext",
+  readOnly = false,
+  placeholder,
+  minHeight = 120,
+  maxHeight,
+  className
+}) {
+  const textareaRef = react.useRef(null);
+  const isDark = useIsDark();
+  const colors = isDark ? fancyFileCommons.DARK_COLORS : fancyFileCommons.LIGHT_COLORS;
+  const highlighted = react.useMemo(() => {
+    const tokens = language === "html" ? fancyFileCommons.tokenizeHtml(value) : [];
+    return fancyFileCommons.highlightCode(value, tokens, colors);
+  }, [value, language, colors]);
+  react.useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+  const editable = !readOnly && !!onChange;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-code-view": "",
+      className: chunk3Z6ALUWP_cjs.cn("relative overflow-auto", className),
+      style: { backgroundColor: colors.background, color: colors.foreground, minHeight, maxHeight },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "pre",
+          {
+            "aria-hidden": "true",
+            className: chunk3Z6ALUWP_cjs.cn("pointer-events-none absolute inset-0 overflow-hidden border-none", TEXT_METRICS),
+            style: { whiteSpace: "pre-wrap", overflowWrap: "break-word" },
+            children: /* @__PURE__ */ jsxRuntime.jsx("code", { dangerouslySetInnerHTML: { __html: highlighted + "\n" } })
+          }
+        ),
+        placeholder && value.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk3Z6ALUWP_cjs.cn("pointer-events-none absolute left-0 top-0 opacity-40", TEXT_METRICS), children: placeholder }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            "data-react-fancy-code-view-input": "",
+            value,
+            onChange: editable ? (e) => onChange(e.target.value) : void 0,
+            readOnly: !editable,
+            spellCheck: false,
+            autoComplete: "off",
+            autoCorrect: "off",
+            autoCapitalize: "off",
+            "aria-label": placeholder,
+            className: chunk3Z6ALUWP_cjs.cn(
+              "relative block w-full resize-none border-none bg-transparent text-transparent outline-none",
+              TEXT_METRICS
+            ),
+            style: {
+              caretColor: colors.cursorColor,
+              overflow: "hidden",
+              whiteSpace: "pre-wrap",
+              overflowWrap: "break-word",
+              minHeight
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+CodeView.displayName = "CodeView";
+
+exports.CodeView = CodeView;
+//# sourceMappingURL=chunk-RNHIDZLE.cjs.map
+//# sourceMappingURL=chunk-RNHIDZLE.cjs.map

package/dist/chunk-RNHIDZLE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CodeView/CodeView.tsx"],"names":["useSyncExternalStore","useRef","DARK_COLORS","LIGHT_COLORS","useMemo","tokenizeHtml","highlightCode","useEffect","jsx","cn","jsxs"],"mappings":"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","file":"chunk-RNHIDZLE.cjs","sourcesContent":["import { useEffect, useMemo, useRef, useSyncExternalStore } from \"react\";\nimport {\n  highlightCode,\n  tokenizeHtml,\n  LIGHT_COLORS,\n  DARK_COLORS,\n  type ThemeColors,\n} from \"@particle-academy/fancy-file-commons\";\nimport { cn } from \"../../utils/cn\";\nimport type { CodeViewProps } from \"./CodeView.types\";\n\n// ── Dark-mode detection ────────────────────────────────────────────────────\n// The highlight palette is baked in as inline colors, so we resolve light/dark\n// ourselves. Follow BOTH signals so we match whatever drives the surrounding\n// `dark:` Tailwind variants: the `.dark` class (class strategy) OR the\n// prefers-color-scheme media query (media strategy).\n\nfunction subscribeDark(callback: () => void): () => void {\n  const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n  mq.addEventListener(\"change\", callback);\n  const observer = new MutationObserver(callback);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\"],\n  });\n  return () => {\n    mq.removeEventListener(\"change\", callback);\n    observer.disconnect();\n  };\n}\n\nfunction darkSnapshot(): boolean {\n  return (\n    document.documentElement.classList.contains(\"dark\") ||\n    window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n  );\n}\n\nfunction useIsDark(): boolean {\n  return useSyncExternalStore(subscribeDark, darkSnapshot, () => false);\n}\n\n// Shared text metrics — the overlay and the textarea MUST match exactly (font,\n// size, line-height, padding, wrapping) so the highlighted glyphs sit under the\n// caret. Keep this string identical on both layers.\nconst TEXT_METRICS = \"m-0 p-3 font-mono text-xs leading-relaxed\";\n\n/**\n * A lightweight, syntax-highlighted source view built on the pure highlight\n * primitives in `@particle-academy/fancy-file-commons` — a highlight overlay\n * with a transparent, auto-growing textarea on top; the container scrolls both\n * together. Fills its parent's height (`h-full`) and grows with content down to\n * `minHeight`. Only HTML is highlighted; other languages render as plain text.\n */\nexport function CodeView({\n  value,\n  onChange,\n  language = \"plaintext\",\n  readOnly = false,\n  placeholder,\n  minHeight = 120,\n  maxHeight,\n  className,\n}: CodeViewProps) {\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n  const isDark = useIsDark();\n  const colors: ThemeColors = isDark ? DARK_COLORS : LIGHT_COLORS;\n\n  const highlighted = useMemo(() => {\n    const tokens = language === \"html\" ? tokenizeHtml(value) : [];\n    return highlightCode(value, tokens, colors);\n  }, [value, language, colors]);\n\n  // Grow the textarea to its content height so it never scrolls internally —\n  // the outer container owns scrolling and moves overlay + textarea in lockstep.\n  useEffect(() => {\n    const el = textareaRef.current;\n    if (!el) return;\n    el.style.height = \"auto\";\n    el.style.height = `${el.scrollHeight}px`;\n  }, [value]);\n\n  const editable = !readOnly && !!onChange;\n\n  return (\n    <div\n      data-react-fancy-code-view=\"\"\n      // No baked-in height: the consumer picks the fill mechanism — `flex-1`\n      // inside a flex column (the Editor source body), or `h-full` when the\n      // parent has a definite height. A hard-coded `h-full` here collapses to\n      // content height under a flex-computed (indefinite) parent.\n      className={cn(\"relative overflow-auto\", className)}\n      style={{ backgroundColor: colors.background, color: colors.foreground, minHeight, maxHeight }}\n    >\n      <div className=\"relative min-h-full\">\n        {/* Highlight overlay */}\n        <pre\n          aria-hidden=\"true\"\n          className={cn(\"pointer-events-none absolute inset-0 overflow-hidden border-none\", TEXT_METRICS)}\n          style={{ whiteSpace: \"pre-wrap\", overflowWrap: \"break-word\" }}\n        >\n          <code dangerouslySetInnerHTML={{ __html: highlighted + \"\\n\" }} />\n        </pre>\n\n        {/* Placeholder */}\n        {placeholder && value.length === 0 && (\n          <div className={cn(\"pointer-events-none absolute left-0 top-0 opacity-40\", TEXT_METRICS)}>\n            {placeholder}\n          </div>\n        )}\n\n        {/* Transparent input layer (caret + selection visible, glyphs from overlay) */}\n        <textarea\n          ref={textareaRef}\n          data-react-fancy-code-view-input=\"\"\n          value={value}\n          onChange={editable ? (e) => onChange!(e.target.value) : undefined}\n          readOnly={!editable}\n          spellCheck={false}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoCapitalize=\"off\"\n          aria-label={placeholder}\n          className={cn(\n            \"relative block w-full resize-none border-none bg-transparent text-transparent outline-none\",\n            TEXT_METRICS,\n          )}\n          style={{\n            caretColor: colors.cursorColor,\n            overflow: \"hidden\",\n            whiteSpace: \"pre-wrap\",\n            overflowWrap: \"break-word\",\n            minHeight,\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n\nCodeView.displayName = \"CodeView\";\n"]}

package/dist/chunk-RNPFSVFN.js

@@ -0,0 +1,24 @@
+import { useId as useId$1, useRef, useState, useCallback } from 'react';
+
+// src/hooks/use-id.ts
+function useId(prefix) {
+  const id = useId$1();
+  return prefix ? `${prefix}-${id}` : id;
+}
+function useNodeRegistry() {
+  const rectsRef = useRef(/* @__PURE__ */ new Map());
+  const [version, setVersion] = useState(0);
+  const registerNode = useCallback((id, rect) => {
+    rectsRef.current.set(id, rect);
+    setVersion((v) => v + 1);
+  }, []);
+  const unregisterNode = useCallback((id) => {
+    rectsRef.current.delete(id);
+    setVersion((v) => v + 1);
+  }, []);
+  return { registerNode, unregisterNode, nodeRects: rectsRef.current, version };
+}
+
+export { useId, useNodeRegistry };
+//# sourceMappingURL=chunk-RNPFSVFN.js.map
+//# sourceMappingURL=chunk-RNPFSVFN.js.map

package/dist/chunk-RNPFSVFN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-id.ts","../src/hooks/use-node-registry.ts"],"names":["useReactId"],"mappings":";;;AAEO,SAAS,MAAM,MAAA,EAAyB;AAC7C,EAAA,MAAM,KAAKA,OAAA,EAAW;AACtB,EAAA,OAAO,MAAA,GAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA,GAAK,EAAA;AACtC;ACWO,SAAS,eAAA,GAAyC;AACvD,EAAA,MAAM,QAAA,GAAW,MAAA,iBAAO,IAAI,GAAA,EAAuB,CAAA;AACnD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,CAAC,CAAA;AAExC,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,CAAC,EAAA,EAAY,IAAA,KAAmB;AAC/D,IAAA,QAAA,CAAS,OAAA,CAAQ,GAAA,CAAI,EAAA,EAAI,IAAI,CAAA;AAC7B,IAAA,UAAA,CAAW,CAAC,CAAA,KAAM,CAAA,GAAI,CAAC,CAAA;AAAA,EACzB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,CAAC,EAAA,KAAe;AACjD,IAAA,QAAA,CAAS,OAAA,CAAQ,OAAO,EAAE,CAAA;AAC1B,IAAA,UAAA,CAAW,CAAC,CAAA,KAAM,CAAA,GAAI,CAAC,CAAA;AAAA,EACzB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,YAAA,EAAc,cAAA,EAAgB,SAAA,EAAW,QAAA,CAAS,SAAS,OAAA,EAAQ;AAC9E","file":"chunk-RNPFSVFN.js","sourcesContent":["import { useId as useReactId } from \"react\";\n\nexport function useId(prefix?: string): string {\n  const id = useReactId();\n  return prefix ? `${prefix}-${id}` : id;\n}\n","import { useCallback, useRef, useState } from \"react\";\n\nexport interface NodeRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface UseNodeRegistryReturn {\n  registerNode: (id: string, rect: NodeRect) => void;\n  unregisterNode: (id: string) => void;\n  nodeRects: Map<string, NodeRect>;\n  version: number;\n}\n\nexport function useNodeRegistry(): UseNodeRegistryReturn {\n  const rectsRef = useRef(new Map<string, NodeRect>());\n  const [version, setVersion] = useState(0);\n\n  const registerNode = useCallback((id: string, rect: NodeRect) => {\n    rectsRef.current.set(id, rect);\n    setVersion((v) => v + 1);\n  }, []);\n\n  const unregisterNode = useCallback((id: string) => {\n    rectsRef.current.delete(id);\n    setVersion((v) => v + 1);\n  }, []);\n\n  return { registerNode, unregisterNode, nodeRects: rectsRef.current, version };\n}\n"]}

package/dist/chunk-RR7BWUVP.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Separator = react.forwardRef(
+  ({ orientation = "horizontal", label, className }, ref) => {
+    if (orientation === "vertical") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "vertical",
+          "data-react-fancy-separator": "",
+          className: chunk3Z6ALUWP_cjs.cn(
+            "inline-block h-full border-l border-zinc-200 dark:border-zinc-700",
+            className
+          )
+        }
+      );
+    }
+    if (label) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "data-react-fancy-separator": "",
+          className: chunk3Z6ALUWP_cjs.cn("flex items-center gap-3", className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "flex-1 border-zinc-200 dark:border-zinc-700" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "flex-1 border-zinc-200 dark:border-zinc-700" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "hr",
+      {
+        ref,
+        role: "separator",
+        "data-react-fancy-separator": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "border-zinc-200 dark:border-zinc-700",
+          className
+        )
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+
+exports.Separator = Separator;
+//# sourceMappingURL=chunk-RR7BWUVP.cjs.map
+//# sourceMappingURL=chunk-RR7BWUVP.cjs.map

package/dist/chunk-RR7BWUVP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Separator/Separator.tsx"],"names":["forwardRef","jsx","cn","jsxs"],"mappings":";;;;;;AAIO,IAAM,SAAA,GAAYA,gBAAA;AAAA,EACvB,CAAC,EAAE,WAAA,GAAc,cAAc,KAAA,EAAO,SAAA,IAAa,GAAA,KAAQ;AACzD,IAAA,IAAI,gBAAgB,UAAA,EAAY;AAC9B,MAAA,uBACEC,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAA,EAAK,WAAA;AAAA,UACL,kBAAA,EAAiB,UAAA;AAAA,UACjB,4BAAA,EAA2B,EAAA;AAAA,UAC3B,SAAA,EAAWC,oBAAA;AAAA,YACT,mEAAA;AAAA,YACA;AAAA;AACF;AAAA,OACF;AAAA,IAEJ;AAEA,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,uBACEC,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAA,EAAK,WAAA;AAAA,UACL,4BAAA,EAA2B,EAAA;AAAA,UAC3B,SAAA,EAAWD,oBAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA;AAAA,UAElD,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAAC,IAAA,EAAA,EAAG,WAAU,6CAAA,EAA8C,CAAA;AAAA,4BAC5DA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0CAAA,EACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,4BACAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6CAAA,EAA8C;AAAA;AAAA;AAAA,OAC9D;AAAA,IAEJ;AAEA,IAAA,uBACEA,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,WAAA;AAAA,QACL,4BAAA,EAA2B,EAAA;AAAA,QAC3B,SAAA,EAAWC,oBAAA;AAAA,UACT,sCAAA;AAAA,UACA;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-RR7BWUVP.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { SeparatorProps } from \"./Separator.types\";\n\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(\n  ({ orientation = \"horizontal\", label, className }, ref) => {\n    if (orientation === \"vertical\") {\n      return (\n        <div\n          ref={ref}\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          data-react-fancy-separator=\"\"\n          className={cn(\n            \"inline-block h-full border-l border-zinc-200 dark:border-zinc-700\",\n            className,\n          )}\n        />\n      );\n    }\n\n    if (label) {\n      return (\n        <div\n          ref={ref}\n          role=\"separator\"\n          data-react-fancy-separator=\"\"\n          className={cn(\"flex items-center gap-3\", className)}\n        >\n          <hr className=\"flex-1 border-zinc-200 dark:border-zinc-700\" />\n          <span className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n            {label}\n          </span>\n          <hr className=\"flex-1 border-zinc-200 dark:border-zinc-700\" />\n        </div>\n      );\n    }\n\n    return (\n      <hr\n        ref={ref as React.Ref<HTMLHRElement>}\n        role=\"separator\"\n        data-react-fancy-separator=\"\"\n        className={cn(\n          \"border-zinc-200 dark:border-zinc-700\",\n          className,\n        )}\n      />\n    );\n  },\n);\n\nSeparator.displayName = \"Separator\";\n"]}

package/dist/chunk-RXDRYWVD.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var react = require('react');
+
+// src/hooks/use-escape-key.ts
+function useEscapeKey(handler, enabled = true) {
+  react.useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      if (event.key === "Escape") {
+        handler();
+      }
+    };
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, [handler, enabled]);
+}
+
+exports.useEscapeKey = useEscapeKey;
+//# sourceMappingURL=chunk-RXDRYWVD.cjs.map
+//# sourceMappingURL=chunk-RXDRYWVD.cjs.map

package/dist/chunk-RXDRYWVD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-escape-key.ts"],"names":["useEffect"],"mappings":";;;;;AAEO,SAAS,YAAA,CACd,OAAA,EACA,OAAA,GAAmB,IAAA,EACb;AACN,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AACzC,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,OAAA,EAAQ;AAAA,MACV;AAAA,IACF,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,QAAQ,CAAA;AAC7C,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,QAAQ,CAAA;AAAA,EAC/D,CAAA,EAAG,CAAC,OAAA,EAAS,OAAO,CAAC,CAAA;AACvB","file":"chunk-RXDRYWVD.cjs","sourcesContent":["import { useEffect } from \"react\";\n\nexport function useEscapeKey(\n  handler: () => void,\n  enabled: boolean = true,\n): void {\n  useEffect(() => {\n    if (!enabled) return;\n\n    const listener = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handler();\n      }\n    };\n\n    document.addEventListener(\"keydown\", listener);\n    return () => document.removeEventListener(\"keydown\", listener);\n  }, [handler, enabled]);\n}\n"]}

package/dist/chunk-S3TRSECD.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=chunk-S3TRSECD.cjs.map
+//# sourceMappingURL=chunk-S3TRSECD.cjs.map

package/dist/chunk-S3TRSECD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-S3TRSECD.cjs"}

package/dist/chunk-SCPHSBBU.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Composer = react.forwardRef(
+  function Composer2({
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    onSubmit,
+    placeholder = "Type a message...",
+    actions,
+    disabled = false,
+    className
+  }, ref) {
+    const [value, setValue] = chunkOUOEQZHY_cjs.useControllableState(
+      controlledValue,
+      defaultValue,
+      onChange
+    );
+    const textareaRef = react.useRef(null);
+    const handleSubmit = react.useCallback(() => {
+      if (!value.trim() || disabled) return;
+      onSubmit?.(value);
+      setValue("");
+      textareaRef.current?.focus();
+    }, [value, disabled, onSubmit, setValue]);
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-react-fancy-composer": "",
+        ref,
+        className: chunk3Z6ALUWP_cjs.cn(
+          "rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              rows: 3,
+              className: "w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: actions }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: disabled || !value.trim(),
+                className: "rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100",
+                children: "Send"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Composer.displayName = "Composer";
+
+exports.Composer = Composer;
+//# sourceMappingURL=chunk-SCPHSBBU.cjs.map
+//# sourceMappingURL=chunk-SCPHSBBU.cjs.map

package/dist/chunk-SCPHSBBU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["forwardRef","Composer","useControllableState","useRef","useCallback","jsxs","cn","jsx"],"mappings":";;;;;;;AAKO,IAAM,QAAA,GAAWA,gBAAA;AAAA,EACtB,SAASC,SAAAA,CACP;AAAA,IACE,KAAA,EAAO,eAAA;AAAA,IACP,YAAA,GAAe,EAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,GAAc,mBAAA;AAAA,IACd,OAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,sCAAA;AAAA,MACxB,eAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,WAAA,GAAcC,aAA4B,IAAI,CAAA;AAEpD,IAAA,MAAM,YAAA,GAAeC,kBAAY,MAAM;AACrC,MAAA,IAAI,CAAC,KAAA,CAAM,IAAA,EAAK,IAAK,QAAA,EAAU;AAC/B,MAAA,QAAA,GAAW,KAAK,CAAA;AAChB,MAAA,QAAA,CAAS,EAAE,CAAA;AACX,MAAA,WAAA,CAAY,SAAS,KAAA,EAAM;AAAA,IAC7B,GAAG,CAAC,KAAA,EAAO,QAAA,EAAU,QAAA,EAAU,QAAQ,CAAC,CAAA;AAExC,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAAgD;AACrE,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAC,EAAE,QAAA,EAAU;AACpC,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,EAAa;AAAA,MACf;AAAA,IACF,CAAA;AAEA,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,2BAAA,EAA0B,EAAA;AAAA,QAC1B,GAAA;AAAA,QACA,SAAA,EAAWC,oBAAA;AAAA,UACT,kFAAA;AAAA,UACA,QAAA,IAAY,YAAA;AAAA,UACZ;AAAA,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,WAAA;AAAA,cACL,KAAA;AAAA,cACA,UAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cACxC,SAAA,EAAW,aAAA;AAAA,cACX,WAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA,EAAM,CAAA;AAAA,cACN,SAAA,EAAU;AAAA;AAAA,WACZ;AAAA,0BACAF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2FAAA,EACb,QAAA,EAAA;AAAA,4BAAAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,4BAClDA,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,YAAA;AAAA,gBACT,QAAA,EAAU,QAAA,IAAY,CAAC,KAAA,CAAM,IAAA,EAAK;AAAA,gBAClC,SAAA,EAAU,mLAAA;AAAA,gBACX,QAAA,EAAA;AAAA;AAAA;AAED,WAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-SCPHSBBU.cjs","sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { ComposerProps } from \"./Composer.types\";\n\nexport const Composer = forwardRef<HTMLDivElement, ComposerProps>(\n  function Composer(\n    {\n      value: controlledValue,\n      defaultValue = \"\",\n      onChange,\n      onSubmit,\n      placeholder = \"Type a message...\",\n      actions,\n      disabled = false,\n      className,\n    },\n    ref,\n  ) {\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    const handleSubmit = useCallback(() => {\n      if (!value.trim() || disabled) return;\n      onSubmit?.(value);\n      setValue(\"\");\n      textareaRef.current?.focus();\n    }, [value, disabled, onSubmit, setValue]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n    };\n\n    return (\n      <div\n        data-react-fancy-composer=\"\"\n        ref={ref}\n        className={cn(\n          \"rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <textarea\n          ref={textareaRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          disabled={disabled}\n          rows={3}\n          className=\"w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400\"\n        />\n        <div className=\"flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800\">\n          <div className=\"flex items-center gap-1\">{actions}</div>\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={disabled || !value.trim()}\n            className=\"rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100\"\n          >\n            Send\n          </button>\n        </div>\n      </div>\n    );\n  },\n);\n\nComposer.displayName = \"Composer\";\n"]}

package/dist/chunk-SKI33QNW.js

@@ -0,0 +1,133 @@
+import { useInlineEdit } from './chunk-OL53XYHF.js';
+import { useFieldMode } from './chunk-NRXK42LO.js';
+import { useControllableState } from './chunk-6FQGMVF2.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef, useCallback } from 'react';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function pad(n) {
+  return n.toString().padStart(2, "0");
+}
+function parseTime(val) {
+  const [h, m] = val.split(":").map(Number);
+  return { hours: h || 0, minutes: m || 0 };
+}
+var TimePicker = forwardRef(
+  function TimePicker2({
+    value: controlledValue,
+    defaultValue = "12:00",
+    onChange,
+    format = "12h",
+    minuteStep = 1,
+    disabled = false,
+    className,
+    mode
+  }, ref) {
+    const [value, setValue] = useControllableState(
+      controlledValue,
+      defaultValue,
+      onChange
+    );
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    const { hours: h24, minutes } = parseTime(value);
+    const isPM = h24 >= 12;
+    const displayHour = format === "12h" ? h24 % 12 || 12 : h24;
+    const updateTime = useCallback(
+      (hours, mins) => {
+        setValue(`${pad(hours)}:${pad(mins)}`);
+      },
+      [setValue]
+    );
+    const changeHour = useCallback(
+      (delta) => {
+        const newHour = (h24 + delta + 24) % 24;
+        updateTime(newHour, minutes);
+      },
+      [h24, minutes, updateTime]
+    );
+    const changeMinute = useCallback(
+      (delta) => {
+        const newMin = (minutes + delta + 60) % 60;
+        updateTime(h24, newMin);
+      },
+      [h24, minutes, updateTime]
+    );
+    const toggleAmPm = useCallback(() => {
+      updateTime((h24 + 12) % 24, minutes);
+    }, [h24, minutes, updateTime]);
+    if (!showControl) {
+      const formatted = format === "12h" ? `${pad(displayHour)}:${pad(minutes)} ${isPM ? "PM" : "AM"}` : `${pad(displayHour)}:${pad(minutes)}`;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-react-fancy-time-picker": "",
+          "data-mode": "view",
+          ref,
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
+          className: cn(
+            "text-sm font-medium tabular-nums text-zinc-900 dark:text-zinc-100",
+            interactive && "cursor-pointer rounded-md outline-none transition-colors hover:bg-zinc-100 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-zinc-800",
+            className
+          ),
+          children: formatted
+        }
+      );
+    }
+    const spinBtnClass = "flex h-7 w-full items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300 disabled:opacity-50";
+    const displayClass = "flex h-10 w-12 items-center justify-center text-lg font-medium tabular-nums";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-time-picker": "",
+        ref,
+        onBlur: (e) => {
+          if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+        },
+        className: cn(
+          "inline-flex items-center gap-1 rounded-lg border border-zinc-200 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", autoFocus: interactive, onClick: () => changeHour(1), disabled, className: spinBtnClass, "aria-label": "Increase hour", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14 }) }),
+            /* @__PURE__ */ jsx("div", { className: displayClass, children: pad(displayHour) }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => changeHour(-1), disabled, className: spinBtnClass, "aria-label": "Decrease hour", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-lg text-zinc-400", children: ":" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => changeMinute(minuteStep), disabled, className: spinBtnClass, "aria-label": "Increase minute", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14 }) }),
+            /* @__PURE__ */ jsx("div", { className: displayClass, children: pad(minutes) }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => changeMinute(-minuteStep), disabled, className: spinBtnClass, "aria-label": "Decrease minute", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) })
+          ] }),
+          format === "12h" && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: toggleAmPm,
+              disabled,
+              className: "ml-1 rounded-lg bg-zinc-100 px-2 py-1 text-sm font-medium transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700",
+              children: isPM ? "PM" : "AM"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TimePicker.displayName = "TimePicker";
+
+export { TimePicker };
+//# sourceMappingURL=chunk-SKI33QNW.js.map
+//# sourceMappingURL=chunk-SKI33QNW.js.map

package/dist/chunk-SKI33QNW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TimePicker/TimePicker.tsx"],"names":["TimePicker"],"mappings":"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","file":"chunk-SKI33QNW.js","sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { ChevronUp, ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { TimePickerProps } from \"./TimePicker.types\";\n\nfunction pad(n: number): string {\n  return n.toString().padStart(2, \"0\");\n}\n\nfunction parseTime(val: string): { hours: number; minutes: number } {\n  const [h, m] = val.split(\":\").map(Number);\n  return { hours: h || 0, minutes: m || 0 };\n}\n\nexport const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value: controlledValue,\n      defaultValue = \"12:00\",\n      onChange,\n      format = \"12h\",\n      minuteStep = 1,\n      disabled = false,\n      className,\n      mode,\n    },\n    ref,\n  ) {\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n    const { hours: h24, minutes } = parseTime(value);\n    const isPM = h24 >= 12;\n    const displayHour = format === \"12h\" ? (h24 % 12 || 12) : h24;\n\n    // These four MUST stay above the view-mode early return below.\n    //\n    // They used to sit after it, which meant view mode ran three hooks and edit\n    // mode ran seven. Clicking \"Click to edit\" flipped `showControl` and React\n    // hit a different hook count on the very next render — the classic\n    // desync, which surfaces as a crash from inside React naming none of this\n    // code. Nothing caught it because no test ever crossed the boundary.\n    const updateTime = useCallback(\n      (hours: number, mins: number) => {\n        setValue(`${pad(hours)}:${pad(mins)}`);\n      },\n      [setValue],\n    );\n\n    const changeHour = useCallback(\n      (delta: number) => {\n        const newHour = (h24 + delta + 24) % 24;\n        updateTime(newHour, minutes);\n      },\n      [h24, minutes, updateTime],\n    );\n\n    const changeMinute = useCallback(\n      (delta: number) => {\n        const newMin = (minutes + delta + 60) % 60;\n        updateTime(h24, newMin);\n      },\n      [h24, minutes, updateTime],\n    );\n\n    const toggleAmPm = useCallback(() => {\n      updateTime((h24 + 12) % 24, minutes);\n    }, [h24, minutes, updateTime]);\n\n    if (!showControl) {\n      const formatted =\n        format === \"12h\"\n          ? `${pad(displayHour)}:${pad(minutes)} ${isPM ? \"PM\" : \"AM\"}`\n          : `${pad(displayHour)}:${pad(minutes)}`;\n      return (\n        <div\n          data-react-fancy-time-picker=\"\"\n          data-mode=\"view\"\n          ref={ref}\n          role={interactive ? \"button\" : undefined}\n          tabIndex={interactive ? 0 : undefined}\n          title={interactive ? \"Click to edit\" : undefined}\n          onClick={interactive ? enterEdit : undefined}\n          onKeyDown={\n            interactive\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    enterEdit();\n                  }\n                }\n              : undefined\n          }\n          className={cn(\n            \"text-sm font-medium tabular-nums text-zinc-900 dark:text-zinc-100\",\n            interactive &&\n              \"cursor-pointer rounded-md outline-none transition-colors hover:bg-zinc-100 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-zinc-800\",\n            className,\n          )}\n        >\n          {formatted}\n        </div>\n      );\n    }\n\n    const spinBtnClass =\n      \"flex h-7 w-full items-center justify-center rounded text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300 disabled:opacity-50\";\n    const displayClass =\n      \"flex h-10 w-12 items-center justify-center text-lg font-medium tabular-nums\";\n\n    return (\n      <div\n        data-react-fancy-time-picker=\"\"\n        ref={ref}\n        onBlur={(e) => {\n          if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n        }}\n        className={cn(\n          \"inline-flex items-center gap-1 rounded-lg border border-zinc-200 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        {/* Hour column */}\n        <div className=\"flex flex-col items-center\">\n          <button type=\"button\" autoFocus={interactive} onClick={() => changeHour(1)} disabled={disabled} className={spinBtnClass} aria-label=\"Increase hour\">\n            <ChevronUp size={14} />\n          </button>\n          <div className={displayClass}>{pad(displayHour)}</div>\n          <button type=\"button\" onClick={() => changeHour(-1)} disabled={disabled} className={spinBtnClass} aria-label=\"Decrease hour\">\n            <ChevronDown size={14} />\n          </button>\n        </div>\n\n        <span className=\"text-lg text-zinc-400\">:</span>\n\n        {/* Minute column */}\n        <div className=\"flex flex-col items-center\">\n          <button type=\"button\" onClick={() => changeMinute(minuteStep)} disabled={disabled} className={spinBtnClass} aria-label=\"Increase minute\">\n            <ChevronUp size={14} />\n          </button>\n          <div className={displayClass}>{pad(minutes)}</div>\n          <button type=\"button\" onClick={() => changeMinute(-minuteStep)} disabled={disabled} className={spinBtnClass} aria-label=\"Decrease minute\">\n            <ChevronDown size={14} />\n          </button>\n        </div>\n\n        {/* AM/PM toggle */}\n        {format === \"12h\" && (\n          <button\n            type=\"button\"\n            onClick={toggleAmPm}\n            disabled={disabled}\n            className=\"ml-1 rounded-lg bg-zinc-100 px-2 py-1 text-sm font-medium transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700\"\n          >\n            {isPM ? \"PM\" : \"AM\"}\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n\nTimePicker.displayName = \"TimePicker\";\n"]}

package/dist/chunk-T6IXZZBQ.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+var chunkJXIBUIEY_cjs = require('./chunk-JXIBUIEY.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ChatDrawer({
+  tabs,
+  activeTabId,
+  onTabChange,
+  open = true,
+  onToggle,
+  children,
+  minBodyHeight = 140,
+  className
+}) {
+  const handleToggle = react.useCallback(() => {
+    onToggle?.(!open);
+  }, [onToggle, open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: tabs.map((tab, i) => {
+        const active = tab.id === activeTabId;
+        const number = tab.number === null ? null : tab.number ?? i + 1;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onTabChange(tab.id),
+            className: [
+              "group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[12px] font-medium transition",
+              active ? "border-violet-500 bg-violet-500 text-white" : "border-zinc-200 bg-transparent text-zinc-700 hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800"
+            ].join(" "),
+            "aria-pressed": active,
+            children: [
+              number !== null && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: [
+                    "inline-flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-semibold",
+                    active ? "bg-white/20 text-white" : "bg-zinc-200 text-zinc-600 group-hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-300"
+                  ].join(" "),
+                  children: number
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[180px]", children: tab.label })
+            ]
+          },
+          tab.id
+        );
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleToggle,
+          "aria-label": open ? "Collapse drawer" : "Expand drawer",
+          "aria-expanded": open,
+          className: "ml-auto inline-flex h-6 w-6 items-center justify-center rounded-full text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            chunkJXIBUIEY_cjs.Icon,
+            {
+              name: open ? "chevron-down" : "chevron-up",
+              className: "h-3.5 w-3.5"
+            }
+          )
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "px-2.5 pb-2.5",
+        style: { minHeight: minBodyHeight },
+        children
+      }
+    )
+  ] });
+}
+
+exports.ChatDrawer = ChatDrawer;
+//# sourceMappingURL=chunk-T6IXZZBQ.cjs.map
+//# sourceMappingURL=chunk-T6IXZZBQ.cjs.map

package/dist/chunk-T6IXZZBQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ChatDrawer/ChatDrawer.tsx"],"names":["useCallback","jsxs","jsx","Icon"],"mappings":";;;;;;AA+DO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA,GAAgB,GAAA;AAAA,EAChB;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,YAAA,GAAeA,kBAAY,MAAM;AACrC,IAAA,QAAA,GAAW,CAAC,IAAI,CAAA;AAAA,EAClB,CAAA,EAAG,CAAC,QAAA,EAAU,IAAI,CAAC,CAAA;AAEnB,EAAA,uBACEC,eAAA,CAAC,SAAI,SAAA,EACH,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uCAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,SAAI,SAAA,EAAU,qCAAA,EACZ,eAAK,GAAA,CAAI,CAAC,KAAK,CAAA,KAAM;AACpB,QAAA,MAAM,MAAA,GAAS,IAAI,EAAA,KAAO,WAAA;AAC1B,QAAA,MAAM,SAAS,GAAA,CAAI,MAAA,KAAW,OAAO,IAAA,GAAO,GAAA,CAAI,UAAU,CAAA,GAAI,CAAA;AAC9D,QAAA,uBACED,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,WAAA,CAAY,GAAA,CAAI,EAAE,CAAA;AAAA,YACjC,SAAA,EAAW;AAAA,cACT,2GAAA;AAAA,cACA,SACI,4CAAA,GACA;AAAA,aACN,CAAE,KAAK,GAAG,CAAA;AAAA,YACV,cAAA,EAAc,MAAA;AAAA,YAEb,QAAA,EAAA;AAAA,cAAA,MAAA,KAAW,IAAA,oBACVC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW;AAAA,oBACT,wFAAA;AAAA,oBACA,SACI,wBAAA,GACA;AAAA,mBACN,CAAE,KAAK,GAAG,CAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,8BAEFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAA0B,cAAI,KAAA,EAAM;AAAA;AAAA,WAAA;AAAA,UAvB/C,GAAA,CAAI;AAAA,SAwBX;AAAA,MAEJ,CAAC,CAAA,EACH,CAAA;AAAA,sBACAA,cAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAS,YAAA;AAAA,UACT,YAAA,EAAY,OAAO,iBAAA,GAAoB,eAAA;AAAA,UACvC,eAAA,EAAe,IAAA;AAAA,UACf,SAAA,EAAU,qLAAA;AAAA,UAEV,QAAA,kBAAAA,cAAA;AAAA,YAACC,sBAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,OAAO,cAAA,GAAiB,YAAA;AAAA,cAC9B,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AACF,KAAA,EACF,CAAA;AAAA,IAEC,IAAA,oBACCD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,eAAA;AAAA,QACV,KAAA,EAAO,EAAE,SAAA,EAAW,aAAA,EAAc;AAAA,QAEjC;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ","file":"chunk-T6IXZZBQ.cjs","sourcesContent":["import { type ReactNode, useCallback } from \"react\";\nimport { Icon } from \"../Icon\";\n\n/**\n * ChatDrawer — tabbed, collapsible panel that sits *above* a `PromptInput`\n * (via the input's `aboveInput` slot) so the drawer and composer share one\n * rounded shell. Each tab gets a numbered chip and a content panel; only\n * one panel renders at a time.\n *\n *   <PromptInput\n *     aboveInput={\n *       <ChatDrawer\n *         tabs={[\n *           { id: \"files\",   label: \"Files\" },\n *           { id: \"tools\",   label: \"Chat Tools\" },\n *           { id: \"prompts\", label: \"Chat Prompts\" },\n *           { id: \"deal\",    label: \"IBM Analytics Platform\" },\n *         ]}\n *         activeTabId={tab}\n *         onTabChange={setTab}\n *         open={open}\n *         onToggle={setOpen}\n *       >\n *         {tab === \"tools\" && <ToolsGrid />}\n *         {tab === \"deal\"  && <DealCard />}\n *       </ChatDrawer>\n *     }\n *     budgetTokens={200_000}\n *     onSubmit={(text) => send(text)}\n *   />\n *\n * The drawer is purely presentational and slot-driven — you decide what\n * each tab shows. Tab order in the numbered chips is the order you pass.\n */\n\nexport type ChatDrawerTab = {\n  /** Stable id — used as the React key and as `activeTabId`. */\n  id: string;\n  /** Human label rendered on the chip. */\n  label: string;\n  /**\n   * Optional override for the numbered prefix (defaults to position +1).\n   * Set to `null` to hide the number entirely (e.g. for a context-specific\n   * tab like the deal one in the screenshots).\n   */\n  number?: number | null;\n};\n\nexport interface ChatDrawerProps {\n  tabs: ChatDrawerTab[];\n  activeTabId: string;\n  onTabChange: (id: string) => void;\n  /** Body open/closed. Default true. */\n  open?: boolean;\n  /** Called when the chevron is clicked. */\n  onToggle?: (open: boolean) => void;\n  /** Body content for the active tab. */\n  children?: ReactNode;\n  /** Min height of the body when open, in px. Default 140. */\n  minBodyHeight?: number;\n  className?: string;\n}\n\nexport function ChatDrawer({\n  tabs,\n  activeTabId,\n  onTabChange,\n  open = true,\n  onToggle,\n  children,\n  minBodyHeight = 140,\n  className,\n}: ChatDrawerProps) {\n  const handleToggle = useCallback(() => {\n    onToggle?.(!open);\n  }, [onToggle, open]);\n\n  return (\n    <div className={className}>\n      <div className=\"flex items-center gap-1.5 px-2.5 py-2\">\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          {tabs.map((tab, i) => {\n            const active = tab.id === activeTabId;\n            const number = tab.number === null ? null : tab.number ?? i + 1;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                onClick={() => onTabChange(tab.id)}\n                className={[\n                  \"group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[12px] font-medium transition\",\n                  active\n                    ? \"border-violet-500 bg-violet-500 text-white\"\n                    : \"border-zinc-200 bg-transparent text-zinc-700 hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800\",\n                ].join(\" \")}\n                aria-pressed={active}\n              >\n                {number !== null && (\n                  <span\n                    className={[\n                      \"inline-flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-semibold\",\n                      active\n                        ? \"bg-white/20 text-white\"\n                        : \"bg-zinc-200 text-zinc-600 group-hover:bg-zinc-300 dark:bg-zinc-700 dark:text-zinc-300\",\n                    ].join(\" \")}\n                  >\n                    {number}\n                  </span>\n                )}\n                <span className=\"truncate max-w-[180px]\">{tab.label}</span>\n              </button>\n            );\n          })}\n        </div>\n        <button\n          type=\"button\"\n          onClick={handleToggle}\n          aria-label={open ? \"Collapse drawer\" : \"Expand drawer\"}\n          aria-expanded={open}\n          className=\"ml-auto inline-flex h-6 w-6 items-center justify-center rounded-full text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200\"\n        >\n          <Icon\n            name={open ? \"chevron-down\" : \"chevron-up\"}\n            className=\"h-3.5 w-3.5\"\n          />\n        </button>\n      </div>\n\n      {open && (\n        <div\n          className=\"px-2.5 pb-2.5\"\n          style={{ minHeight: minBodyHeight }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}