@particle-academy/react-fancy 5.30.0 → 5.31.0

package/dist/chunk-7MSIREUY.cjs

@@ -0,0 +1,186 @@
+'use strict';
+
+var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var PREVIEW_CHARS = 20;
+function withSeparators(n) {
+  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+function endsOf(text) {
+  if (text.length <= PREVIEW_CHARS * 2) return text;
+  return `${text.slice(0, PREVIEW_CHARS)} \u2026 ${text.slice(-PREVIEW_CHARS)}`;
+}
+var Composer = react.forwardRef(
+  function Composer2({
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    onSubmit,
+    placeholder = "Type a message...",
+    actions,
+    disabled = false,
+    className,
+    pasteThreshold,
+    heldPastes: controlledHeldPastes,
+    onHeldPastesChange
+  }, ref) {
+    const [value, setValue] = chunkOUOEQZHY_cjs.useControllableState(
+      controlledValue,
+      defaultValue,
+      onChange
+    );
+    const [heldPastes, setHeldPastes] = chunkOUOEQZHY_cjs.useControllableState(
+      controlledHeldPastes,
+      [],
+      onHeldPastesChange
+    );
+    const textareaRef = react.useRef(null);
+    const nextId = react.useRef(0);
+    const handlePaste = react.useCallback(
+      (e) => {
+        if (!pasteThreshold || pasteThreshold <= 0) return;
+        const text = e.clipboardData?.getData("text/plain") ?? "";
+        if (text.length < pasteThreshold) return;
+        e.preventDefault();
+        nextId.current += 1;
+        const id = `paste-${nextId.current}`;
+        setHeldPastes((current) => [...current, { id, text }]);
+      },
+      [pasteThreshold, setHeldPastes]
+    );
+    const composeOutgoing = react.useCallback(
+      () => [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join("\n\n"),
+      [value, heldPastes]
+    );
+    const hasContent = value.trim().length > 0 || heldPastes.length > 0;
+    const handleSubmit = react.useCallback(() => {
+      if (!hasContent || disabled) return;
+      onSubmit?.(composeOutgoing());
+      setValue("");
+      setHeldPastes([]);
+      textareaRef.current?.focus();
+    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, setHeldPastes]);
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    const insertPaste = react.useCallback(
+      (paste) => {
+        setValue((current) => current ? `${current}
+
+${paste.text}` : paste.text);
+        setHeldPastes((current) => current.filter((p) => p.id !== paste.id));
+        textareaRef.current?.focus();
+      },
+      [setValue, setHeldPastes]
+    );
+    const discardPaste = react.useCallback(
+      (id) => setHeldPastes((current) => current.filter((p) => p.id !== id)),
+      [setHeldPastes]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-react-fancy-composer": "",
+        ref,
+        className: chunkZU5Q77OT_cjs.cn(
+          "rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          heldPastes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-react-fancy-composer-paste-pills": "",
+              className: "flex flex-wrap gap-1.5 px-3 pt-3",
+              children: heldPastes.map((paste) => (
+                // `group` + `group-hover` rather than hover state: the preview is
+                // presentation, and a useState for it would be one more thing an
+                // agent could desynchronise.
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group relative inline-flex", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-composer-paste-pill": paste.id,
+                      onClick: () => insertPaste(paste),
+                      disabled,
+                      "aria-label": `Insert this pasted text, ${withSeparators(paste.text.length)} characters`,
+                      "aria-describedby": `${paste.id}-preview`,
+                      className: "inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700",
+                      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                        "Pasted text \xB7 ",
+                        withSeparators(paste.text.length),
+                        " characters"
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-composer-paste-pill-remove": paste.id,
+                      onClick: () => discardPaste(paste.id),
+                      disabled,
+                      "aria-label": "Discard this pasted text",
+                      className: "absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100",
+                      children: "\xD7"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      id: `${paste.id}-preview`,
+                      "data-react-fancy-composer-paste-pill-preview": paste.id,
+                      role: "tooltip",
+                      className: "pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900",
+                      children: endsOf(paste.text)
+                    }
+                  )
+                ] }, paste.id)
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              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 || !hasContent,
+                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-7MSIREUY.cjs.map
+//# sourceMappingURL=chunk-7MSIREUY.cjs.map

package/dist/chunk-7MSIREUY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["forwardRef","Composer","useControllableState","useRef","useCallback","jsxs","cn","jsx"],"mappings":"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","file":"chunk-7MSIREUY.cjs","sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { ComposerProps, HeldPaste } from \"./Composer.types\";\n\n/** Characters of a held paste shown at each end of the hover preview. */\nconst PREVIEW_CHARS = 20;\n\n/**\n * Thousands separators, written out rather than left to `toLocaleString()`.\n *\n * The number exists so someone can size the paste at a glance, and `2,036` sizes\n * faster than `2036`. It is not left to the runtime locale because the label beside\n * it (\"Pasted text\") is not localised either, so a locale-formatted number next to\n * an English noun would be half a translation.\n */\nfunction withSeparators(n: number): string {\n  return String(n).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}\n\n/** First and last N characters, middle elided. The ends say WHICH paste this is. */\nfunction endsOf(text: string): string {\n  if (text.length <= PREVIEW_CHARS * 2) return text;\n\n  return `${text.slice(0, PREVIEW_CHARS)} … ${text.slice(-PREVIEW_CHARS)}`;\n}\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      pasteThreshold,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n    },\n    ref,\n  ) {\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const [heldPastes, setHeldPastes] = useControllableState<HeldPaste[]>(\n      controlledHeldPastes,\n      [],\n      onHeldPastesChange,\n    );\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nextId = useRef(0);\n\n    /*\n     * A large paste is held, not inserted.\n     *\n     * Requested by a consumer who had built and proven it against their own\n     * composer: paste a transcript and the input becomes a scrolling wall, so the\n     * message you were half way through writing is above the fold and the only way\n     * to see what you are about to send is to scroll your own input.\n     */\n    const handlePaste = useCallback(\n      (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n        if (!pasteThreshold || pasteThreshold <= 0) return;\n\n        const text = e.clipboardData?.getData(\"text/plain\") ?? \"\";\n\n        // Below the threshold, do NOTHING — not even look busy. This is the common\n        // case and the easiest thing to regress.\n        if (text.length < pasteThreshold) return;\n\n        e.preventDefault();\n        nextId.current += 1;\n        const id = `paste-${nextId.current}`;\n        setHeldPastes((current) => [...current, { id, text }]);\n      },\n      [pasteThreshold, setHeldPastes],\n    );\n\n    /** Everything the person believes they are sending, in the order they built it. */\n    const composeOutgoing = useCallback(\n      () => [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join(\"\\n\\n\"),\n      [value, heldPastes],\n    );\n\n    const hasContent = value.trim().length > 0 || heldPastes.length > 0;\n\n    const handleSubmit = useCallback(() => {\n      if (!hasContent || disabled) return;\n\n      /*\n       * THE DANGEROUS STATE, and the reason this feature needed a spec rather than\n       * a guess. A pill reads as \"your paste is attached\" — so a send that drops it\n       * means asking a question about a document without the document, and nobody\n       * can tell: the sender believes it went, the receiver sees a question about\n       * nothing.\n       *\n       * Held pastes go out in arrival order, after what was typed, because people\n       * type the question BEFORE pasting the thing it is about.\n       */\n      onSubmit?.(composeOutgoing());\n      setValue(\"\");\n      setHeldPastes([]);\n      textareaRef.current?.focus();\n    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, setHeldPastes]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n    };\n\n    /** Click a pill: dump it into the input, APPENDED to what is already typed. */\n    const insertPaste = useCallback(\n      (paste: HeldPaste) => {\n        setValue((current) => (current ? `${current}\\n\\n${paste.text}` : paste.text));\n        setHeldPastes((current) => current.filter((p) => p.id !== paste.id));\n        textareaRef.current?.focus();\n      },\n      [setValue, setHeldPastes],\n    );\n\n    /** Discard without inserting. Without this the only way out is in-then-delete. */\n    const discardPaste = useCallback(\n      (id: string) => setHeldPastes((current) => current.filter((p) => p.id !== id)),\n      [setHeldPastes],\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        {heldPastes.length > 0 && (\n          <div\n            data-react-fancy-composer-paste-pills=\"\"\n            className=\"flex flex-wrap gap-1.5 px-3 pt-3\"\n          >\n            {heldPastes.map((paste) => (\n              // `group` + `group-hover` rather than hover state: the preview is\n              // presentation, and a useState for it would be one more thing an\n              // agent could desynchronise.\n              <span key={paste.id} className=\"group relative inline-flex\">\n                <button\n                  type=\"button\"\n                  data-react-fancy-composer-paste-pill={paste.id}\n                  onClick={() => insertPaste(paste)}\n                  disabled={disabled}\n                  // No `title`. A native tooltip plus the hover preview below\n                  // renders TWO tooltips on the same hover, at different delays.\n                  // The label says what clicking does; the preview says what the\n                  // text is, and it is linked rather than merely adjacent so a\n                  // screen reader reaches it too.\n                  aria-label={`Insert this pasted text, ${withSeparators(paste.text.length)} characters`}\n                  aria-describedby={`${paste.id}-preview`}\n                  // `pr-7` leaves room for the absolutely-positioned × that sits\n                  // over this button's right edge. With a smaller right padding the\n                  // × lands on top of the label.\n                  className=\"inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700\"\n                >\n                  <span>\n                    Pasted text · {withSeparators(paste.text.length)} characters\n                  </span>\n                </button>\n\n                <button\n                  type=\"button\"\n                  data-react-fancy-composer-paste-pill-remove={paste.id}\n                  onClick={() => discardPaste(paste.id)}\n                  disabled={disabled}\n                  aria-label=\"Discard this pasted text\"\n                  className=\"absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100\"\n                >\n                  ×\n                </button>\n\n                <span\n                  id={`${paste.id}-preview`}\n                  data-react-fancy-composer-paste-pill-preview={paste.id}\n                  role=\"tooltip\"\n                  className=\"pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900\"\n                >\n                  {endsOf(paste.text)}\n                </span>\n              </span>\n            ))}\n          </div>\n        )}\n\n        <textarea\n          ref={textareaRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\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 || !hasContent}\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-NH5XJ6VD.js

@@ -0,0 +1,184 @@
+import { useControllableState } from './chunk-6FQGMVF2.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { forwardRef, useRef, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PREVIEW_CHARS = 20;
+function withSeparators(n) {
+  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+function endsOf(text) {
+  if (text.length <= PREVIEW_CHARS * 2) return text;
+  return `${text.slice(0, PREVIEW_CHARS)} \u2026 ${text.slice(-PREVIEW_CHARS)}`;
+}
+var Composer = forwardRef(
+  function Composer2({
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    onSubmit,
+    placeholder = "Type a message...",
+    actions,
+    disabled = false,
+    className,
+    pasteThreshold,
+    heldPastes: controlledHeldPastes,
+    onHeldPastesChange
+  }, ref) {
+    const [value, setValue] = useControllableState(
+      controlledValue,
+      defaultValue,
+      onChange
+    );
+    const [heldPastes, setHeldPastes] = useControllableState(
+      controlledHeldPastes,
+      [],
+      onHeldPastesChange
+    );
+    const textareaRef = useRef(null);
+    const nextId = useRef(0);
+    const handlePaste = useCallback(
+      (e) => {
+        if (!pasteThreshold || pasteThreshold <= 0) return;
+        const text = e.clipboardData?.getData("text/plain") ?? "";
+        if (text.length < pasteThreshold) return;
+        e.preventDefault();
+        nextId.current += 1;
+        const id = `paste-${nextId.current}`;
+        setHeldPastes((current) => [...current, { id, text }]);
+      },
+      [pasteThreshold, setHeldPastes]
+    );
+    const composeOutgoing = useCallback(
+      () => [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join("\n\n"),
+      [value, heldPastes]
+    );
+    const hasContent = value.trim().length > 0 || heldPastes.length > 0;
+    const handleSubmit = useCallback(() => {
+      if (!hasContent || disabled) return;
+      onSubmit?.(composeOutgoing());
+      setValue("");
+      setHeldPastes([]);
+      textareaRef.current?.focus();
+    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, setHeldPastes]);
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    const insertPaste = useCallback(
+      (paste) => {
+        setValue((current) => current ? `${current}
+
+${paste.text}` : paste.text);
+        setHeldPastes((current) => current.filter((p) => p.id !== paste.id));
+        textareaRef.current?.focus();
+      },
+      [setValue, setHeldPastes]
+    );
+    const discardPaste = useCallback(
+      (id) => setHeldPastes((current) => current.filter((p) => p.id !== id)),
+      [setHeldPastes]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-composer": "",
+        ref,
+        className: cn(
+          "rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          heldPastes.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-react-fancy-composer-paste-pills": "",
+              className: "flex flex-wrap gap-1.5 px-3 pt-3",
+              children: heldPastes.map((paste) => (
+                // `group` + `group-hover` rather than hover state: the preview is
+                // presentation, and a useState for it would be one more thing an
+                // agent could desynchronise.
+                /* @__PURE__ */ jsxs("span", { className: "group relative inline-flex", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-composer-paste-pill": paste.id,
+                      onClick: () => insertPaste(paste),
+                      disabled,
+                      "aria-label": `Insert this pasted text, ${withSeparators(paste.text.length)} characters`,
+                      "aria-describedby": `${paste.id}-preview`,
+                      className: "inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700",
+                      children: /* @__PURE__ */ jsxs("span", { children: [
+                        "Pasted text \xB7 ",
+                        withSeparators(paste.text.length),
+                        " characters"
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-composer-paste-pill-remove": paste.id,
+                      onClick: () => discardPaste(paste.id),
+                      disabled,
+                      "aria-label": "Discard this pasted text",
+                      className: "absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100",
+                      children: "\xD7"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      id: `${paste.id}-preview`,
+                      "data-react-fancy-composer-paste-pill-preview": paste.id,
+                      role: "tooltip",
+                      className: "pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900",
+                      children: endsOf(paste.text)
+                    }
+                  )
+                ] }, paste.id)
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              placeholder,
+              disabled,
+              rows: 3,
+              className: "w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: disabled || !hasContent,
+                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";
+
+export { Composer };
+//# sourceMappingURL=chunk-NH5XJ6VD.js.map
+//# sourceMappingURL=chunk-NH5XJ6VD.js.map

package/dist/chunk-NH5XJ6VD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["Composer"],"mappings":"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","file":"chunk-NH5XJ6VD.js","sourcesContent":["import { forwardRef, useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport type { ComposerProps, HeldPaste } from \"./Composer.types\";\n\n/** Characters of a held paste shown at each end of the hover preview. */\nconst PREVIEW_CHARS = 20;\n\n/**\n * Thousands separators, written out rather than left to `toLocaleString()`.\n *\n * The number exists so someone can size the paste at a glance, and `2,036` sizes\n * faster than `2036`. It is not left to the runtime locale because the label beside\n * it (\"Pasted text\") is not localised either, so a locale-formatted number next to\n * an English noun would be half a translation.\n */\nfunction withSeparators(n: number): string {\n  return String(n).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}\n\n/** First and last N characters, middle elided. The ends say WHICH paste this is. */\nfunction endsOf(text: string): string {\n  if (text.length <= PREVIEW_CHARS * 2) return text;\n\n  return `${text.slice(0, PREVIEW_CHARS)} … ${text.slice(-PREVIEW_CHARS)}`;\n}\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      pasteThreshold,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n    },\n    ref,\n  ) {\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const [heldPastes, setHeldPastes] = useControllableState<HeldPaste[]>(\n      controlledHeldPastes,\n      [],\n      onHeldPastesChange,\n    );\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const nextId = useRef(0);\n\n    /*\n     * A large paste is held, not inserted.\n     *\n     * Requested by a consumer who had built and proven it against their own\n     * composer: paste a transcript and the input becomes a scrolling wall, so the\n     * message you were half way through writing is above the fold and the only way\n     * to see what you are about to send is to scroll your own input.\n     */\n    const handlePaste = useCallback(\n      (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n        if (!pasteThreshold || pasteThreshold <= 0) return;\n\n        const text = e.clipboardData?.getData(\"text/plain\") ?? \"\";\n\n        // Below the threshold, do NOTHING — not even look busy. This is the common\n        // case and the easiest thing to regress.\n        if (text.length < pasteThreshold) return;\n\n        e.preventDefault();\n        nextId.current += 1;\n        const id = `paste-${nextId.current}`;\n        setHeldPastes((current) => [...current, { id, text }]);\n      },\n      [pasteThreshold, setHeldPastes],\n    );\n\n    /** Everything the person believes they are sending, in the order they built it. */\n    const composeOutgoing = useCallback(\n      () => [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join(\"\\n\\n\"),\n      [value, heldPastes],\n    );\n\n    const hasContent = value.trim().length > 0 || heldPastes.length > 0;\n\n    const handleSubmit = useCallback(() => {\n      if (!hasContent || disabled) return;\n\n      /*\n       * THE DANGEROUS STATE, and the reason this feature needed a spec rather than\n       * a guess. A pill reads as \"your paste is attached\" — so a send that drops it\n       * means asking a question about a document without the document, and nobody\n       * can tell: the sender believes it went, the receiver sees a question about\n       * nothing.\n       *\n       * Held pastes go out in arrival order, after what was typed, because people\n       * type the question BEFORE pasting the thing it is about.\n       */\n      onSubmit?.(composeOutgoing());\n      setValue(\"\");\n      setHeldPastes([]);\n      textareaRef.current?.focus();\n    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, setHeldPastes]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n    };\n\n    /** Click a pill: dump it into the input, APPENDED to what is already typed. */\n    const insertPaste = useCallback(\n      (paste: HeldPaste) => {\n        setValue((current) => (current ? `${current}\\n\\n${paste.text}` : paste.text));\n        setHeldPastes((current) => current.filter((p) => p.id !== paste.id));\n        textareaRef.current?.focus();\n      },\n      [setValue, setHeldPastes],\n    );\n\n    /** Discard without inserting. Without this the only way out is in-then-delete. */\n    const discardPaste = useCallback(\n      (id: string) => setHeldPastes((current) => current.filter((p) => p.id !== id)),\n      [setHeldPastes],\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        {heldPastes.length > 0 && (\n          <div\n            data-react-fancy-composer-paste-pills=\"\"\n            className=\"flex flex-wrap gap-1.5 px-3 pt-3\"\n          >\n            {heldPastes.map((paste) => (\n              // `group` + `group-hover` rather than hover state: the preview is\n              // presentation, and a useState for it would be one more thing an\n              // agent could desynchronise.\n              <span key={paste.id} className=\"group relative inline-flex\">\n                <button\n                  type=\"button\"\n                  data-react-fancy-composer-paste-pill={paste.id}\n                  onClick={() => insertPaste(paste)}\n                  disabled={disabled}\n                  // No `title`. A native tooltip plus the hover preview below\n                  // renders TWO tooltips on the same hover, at different delays.\n                  // The label says what clicking does; the preview says what the\n                  // text is, and it is linked rather than merely adjacent so a\n                  // screen reader reaches it too.\n                  aria-label={`Insert this pasted text, ${withSeparators(paste.text.length)} characters`}\n                  aria-describedby={`${paste.id}-preview`}\n                  // `pr-7` leaves room for the absolutely-positioned × that sits\n                  // over this button's right edge. With a smaller right padding the\n                  // × lands on top of the label.\n                  className=\"inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700\"\n                >\n                  <span>\n                    Pasted text · {withSeparators(paste.text.length)} characters\n                  </span>\n                </button>\n\n                <button\n                  type=\"button\"\n                  data-react-fancy-composer-paste-pill-remove={paste.id}\n                  onClick={() => discardPaste(paste.id)}\n                  disabled={disabled}\n                  aria-label=\"Discard this pasted text\"\n                  className=\"absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100\"\n                >\n                  ×\n                </button>\n\n                <span\n                  id={`${paste.id}-preview`}\n                  data-react-fancy-composer-paste-pill-preview={paste.id}\n                  role=\"tooltip\"\n                  className=\"pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900\"\n                >\n                  {endsOf(paste.text)}\n                </span>\n              </span>\n            ))}\n          </div>\n        )}\n\n        <textarea\n          ref={textareaRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\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 || !hasContent}\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/composer.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkOGEE23SP_cjs = require('./chunk-OGEE23SP.cjs');
+var chunk7MSIREUY_cjs = require('./chunk-7MSIREUY.cjs');
 require('./chunk-OUOEQZHY.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
@@ -8,7 +8,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
-  get: function () { return chunkOGEE23SP_cjs.Composer; }
+  get: function () { return chunk7MSIREUY_cjs.Composer; }
 });
 //# sourceMappingURL=composer.cjs.map
 //# sourceMappingURL=composer.cjs.map

package/dist/composer.d.cts

@@ -1,6 +1,16 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
+/**
+ * A paste held beside the composer rather than inserted into it.
+ *
+ * `text` is the whole thing. The pill shows a count and the two ends; nothing
+ * truncates the content itself, because the point is to send it.
+ */
+interface HeldPaste {
+    id: string;
+    text: string;
+}
 interface ComposerProps {
     value?: string;
     defaultValue?: string;
@@ -10,8 +20,31 @@ interface ComposerProps {
     actions?: ReactNode;
     disabled?: boolean;
     className?: string;
+    /**
+     * Hold a paste of at least this many characters beside the composer as a pill,
+     * instead of inserting it. Try 500 — about a long paragraph.
+     *
+     * **Omit it and paste behaves exactly as it always has.** Opt-in on purpose:
+     * paste is a fundamental interaction and this library is past 1.0, so a minor
+     * release must not quietly change what pasting does for every consumer. There is
+     * no default threshold for the same reason.
+     *
+     * Below the threshold nothing changes at all — no prevented event, no pill, no
+     * ceremony for an address or a name.
+     */
+    pasteThreshold?: number;
+    /**
+     * The held pastes, if you want to own them.
+     *
+     * Controllable rather than internal because the component contract forbids
+     * internal-only state for anything an agent might need to read or write — an
+     * agent driving this surface has to be able to see that a paste is attached, and
+     * to attach one itself.
+     */
+    heldPastes?: HeldPaste[];
+    onHeldPastesChange?: (pastes: HeldPaste[]) => void;
 }
 
 declare const Composer: react.ForwardRefExoticComponent<ComposerProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Composer, type ComposerProps };
+export { Composer, type ComposerProps, type HeldPaste };

package/dist/composer.d.ts

@@ -1,6 +1,16 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
+/**
+ * A paste held beside the composer rather than inserted into it.
+ *
+ * `text` is the whole thing. The pill shows a count and the two ends; nothing
+ * truncates the content itself, because the point is to send it.
+ */
+interface HeldPaste {
+    id: string;
+    text: string;
+}
 interface ComposerProps {
     value?: string;
     defaultValue?: string;
@@ -10,8 +20,31 @@ interface ComposerProps {
     actions?: ReactNode;
     disabled?: boolean;
     className?: string;
+    /**
+     * Hold a paste of at least this many characters beside the composer as a pill,
+     * instead of inserting it. Try 500 — about a long paragraph.
+     *
+     * **Omit it and paste behaves exactly as it always has.** Opt-in on purpose:
+     * paste is a fundamental interaction and this library is past 1.0, so a minor
+     * release must not quietly change what pasting does for every consumer. There is
+     * no default threshold for the same reason.
+     *
+     * Below the threshold nothing changes at all — no prevented event, no pill, no
+     * ceremony for an address or a name.
+     */
+    pasteThreshold?: number;
+    /**
+     * The held pastes, if you want to own them.
+     *
+     * Controllable rather than internal because the component contract forbids
+     * internal-only state for anything an agent might need to read or write — an
+     * agent driving this surface has to be able to see that a paste is attached, and
+     * to attach one itself.
+     */
+    heldPastes?: HeldPaste[];
+    onHeldPastesChange?: (pastes: HeldPaste[]) => void;
 }
 
 declare const Composer: react.ForwardRefExoticComponent<ComposerProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Composer, type ComposerProps };
+export { Composer, type ComposerProps, type HeldPaste };

package/dist/composer.js

@@ -1,4 +1,4 @@
-export { Composer } from './chunk-VVL5LMLW.js';
+export { Composer } from './chunk-NH5XJ6VD.js';
 import './chunk-6FQGMVF2.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=composer.js.map

package/dist/index.cjs

@@ -85,7 +85,7 @@ var chunkJM2H642B_cjs = require('./chunk-JM2H642B.cjs');
 var chunkTZHK3LEW_cjs = require('./chunk-TZHK3LEW.cjs');
 var chunkTXTRTTG7_cjs = require('./chunk-TXTRTTG7.cjs');
 var chunk3WGRVDQR_cjs = require('./chunk-3WGRVDQR.cjs');
-var chunkOGEE23SP_cjs = require('./chunk-OGEE23SP.cjs');
+var chunk7MSIREUY_cjs = require('./chunk-7MSIREUY.cjs');
 var chunkFQSSVOVQ_cjs = require('./chunk-FQSSVOVQ.cjs');
 require('./chunk-S3TRSECD.cjs');
 var chunkND5D7GJB_cjs = require('./chunk-ND5D7GJB.cjs');
@@ -595,7 +595,7 @@ Object.defineProperty(exports, "useAnimation", {
 });
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
-  get: function () { return chunkOGEE23SP_cjs.Composer; }
+  get: function () { return chunk7MSIREUY_cjs.Composer; }
 });
 Object.defineProperty(exports, "Container", {
   enumerable: true,

package/dist/index.d.cts

@@ -64,7 +64,7 @@ export { OtpInput, OtpInputProps } from './otp-input.cjs';
 export { FileUpload, FileUploadContextValue, FileUploadDropzoneProps, FileUploadListProps, FileUploadProps, useFileUpload } from './file-upload.cjs';
 export { TimePicker, TimePickerProps } from './time-picker.cjs';
 export { Calendar, CalendarMode, CalendarProps, DateRange } from './calendar.cjs';
-export { Composer, ComposerProps } from './composer.cjs';
+export { Composer, ComposerProps, HeldPaste } from './composer.cjs';
 export { Chart, ChartAreaProps, ChartBarData, ChartBarProps, ChartCommonProps, ChartDonutData, ChartDonutProps, ChartHorizontalBarProps, ChartLineProps, ChartPieData, ChartPieProps, ChartSeries, ChartSparklineProps, ChartStackedBarProps } from './chart.cjs';
 export { Editor, EditorAction, EditorContentProps, EditorContextValue, EditorProps, EditorSourceToggleProps, EditorToolbarProps, useEditor } from './editor.cjs';
 export { CodeView, CodeViewProps } from './code-view.cjs';

package/dist/index.d.ts

@@ -64,7 +64,7 @@ export { OtpInput, OtpInputProps } from './otp-input.js';
 export { FileUpload, FileUploadContextValue, FileUploadDropzoneProps, FileUploadListProps, FileUploadProps, useFileUpload } from './file-upload.js';
 export { TimePicker, TimePickerProps } from './time-picker.js';
 export { Calendar, CalendarMode, CalendarProps, DateRange } from './calendar.js';
-export { Composer, ComposerProps } from './composer.js';
+export { Composer, ComposerProps, HeldPaste } from './composer.js';
 export { Chart, ChartAreaProps, ChartBarData, ChartBarProps, ChartCommonProps, ChartDonutData, ChartDonutProps, ChartHorizontalBarProps, ChartLineProps, ChartPieData, ChartPieProps, ChartSeries, ChartSparklineProps, ChartStackedBarProps } from './chart.js';
 export { Editor, EditorAction, EditorContentProps, EditorContextValue, EditorProps, EditorSourceToggleProps, EditorToolbarProps, useEditor } from './editor.js';
 export { CodeView, CodeViewProps } from './code-view.js';

package/dist/index.js

@@ -83,7 +83,7 @@ export { ColorPicker } from './chunk-6PF5ENWM.js';
 export { Command, useCommand } from './chunk-YCV43A7D.js';
 export { useFocusTrap } from './chunk-5U2DZ7AV.js';
 export { useAnimation } from './chunk-CHADHN6M.js';
-export { Composer } from './chunk-VVL5LMLW.js';
+export { Composer } from './chunk-NH5XJ6VD.js';
 export { Container } from './chunk-VKMPVFQK.js';
 import './chunk-AUTW5O4W.js';
 export { ContentRenderer, registerExtension, registerExtensions } from './chunk-25ZOOUFG.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "5.30.0",
+  "version": "5.31.0",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",
@@ -928,7 +928,8 @@
   "files": [
     "dist",
     "docs",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build": "node --max-old-space-size=8192 ./node_modules/tsup/dist/cli-default.js",
@@ -979,7 +980,9 @@
     "**/*.css"
   ],
   "overrides": {
-    "esbuild": "^0.28.1"
+    "esbuild": "^0.28.1",
+    "brace-expansion": "^5.0.12",
+    "undici": "^7.29.1"
   },
   "engines": {
     "node": ">=22"