@particle-academy/react-fancy 5.31.0 → 5.33.0

package/CHANGELOG.md

@@ -11,6 +11,100 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.33.0] - 2026-10-04
+
+### Fixed
+
+- **`FileUpload` with `multiple={false}` could never change its file.** Choosing
+  a second file kept the first and discarded the new one in silence, so a
+  single-file field was write-once; the only way out was removing the file or
+  remounting the component. Reported by the YouGene estate, who were working
+  around it with a `key` remount.
+
+  **What changed, precisely:** `multiple={false}` now REPLACES. `maxFiles` is
+  unchanged and still refuses the overflow. The two used to share one rule — a
+  cap of one, first-wins — on the reasoning that they must not disagree about
+  what a single-file upload means. They are different statements and are now
+  allowed to differ: `maxFiles={n}` is a quota (drop five files into a
+  three-file field and you keep three, not the last three), while
+  `multiple={false}` is a field shape whose analogue is a radio group, where
+  choosing again moves the selection.
+
+  **Dropping several files at once onto a single-file field still keeps the
+  FIRST**, exactly as before. Only the across-gestures case changed. If you
+  depended on the old write-once behaviour — which we do not think anyone could
+  have wanted — pass `maxFiles={1}` instead of `multiple={false}`.
+
+- **`FileUpload` ignored the same file being chosen twice.** The hidden
+  `<input type="file">` was never reset, and an input still holding a path fires
+  no `change` event when the user picks that same path again. So "remove it,
+  then choose it again" and "retry the import that just failed" were dead
+  gestures — the component was never asked, so it never rejected anything. The
+  input is now cleared after each change.
+
+
+## [5.32.0] - 2026-10-02
+
+### Added
+
+- **`usePastePills` — the paste-holding logic without a surface.**
+
+  ```ts
+  const pills = usePastePills({ threshold: 500, heldPastes, onHeldPastesChange });
+
+  function onPaste(e) {
+    if (pills.handlePaste(e)) return;   // it took the paste and called preventDefault
+    // ...your own handling
+  }
+  ```
+
+  Returns `heldPastes`, `handlePaste(event) => boolean`, `expand(id) => string | undefined`
+  (removes it and hands back the text for you to insert), `remove(id)` and `clear()`.
+
+  **It owns no DOM** — you render the pills. And `handlePaste` is **composable**: it
+  returns `true` only if it took the paste, having called `preventDefault()` itself,
+  and otherwise declines *without touching the event*, so a host whose own handler
+  already intercepts paste can ask "did you want this?" rather than hand over.
+
+  `HeldPaste` carries `id` and `text` and deliberately **no `length`** — it would be
+  `text.length` and nothing else, and a derived value stored beside its source is a
+  value that can disagree with it.
+
+  Exists because the estate that specified 5.31.0's `Composer` feature then
+  established that they cannot use `Composer` at all: their chat input is a
+  contenteditable rendering inline `[deal:42|Acme]` badges, which a textarea cannot
+  do. **`Composer` is now this hook's first caller** — one implementation rather than
+  two, because two copies of a rule drift and the copy nobody reads is the one that
+  rots.
+
+  **What you must DO: nothing.** `Composer`'s behaviour is unchanged and its tests
+  are the proof — all 15 from 5.31.0 pass untouched across the refactor.
+
+### Fixed
+
+- **`useControllableState` silently lost an update when two functional updates
+  batched.** It resolved `setValue(fn)` against the **render closure's** value and
+  handed React a pre-computed result, so two calls before a re-render both computed
+  from the same stale value and **the first was dropped**:
+
+  ```
+  setItems(c => [...c, "a"]);
+  setItems(c => [...c, "b"]);   // -> ["b"], not ["a", "b"]
+  ```
+
+  Most stateful components in this library use this hook, so the blast radius was
+  everything — but it only surfaces when a caller updates twice in one batch, which
+  is why it survived. No error, no warning: just less state than you asked for.
+
+  Found by a `usePastePills` test that held two pastes inside one `act()` and got
+  one. Four of the five new regression tests fail against the previous
+  implementation.
+
+  **What you must DO: nothing**, and one thing you may notice: **the setter is now
+  stable across renders.** It used to change identity on every update, which
+  invalidated any consumer `useCallback`/`useEffect` depending on it. If you were
+  relying on that churn to re-run an effect, you were relying on a bug.
+
 ## [5.31.0] - 2026-10-02
 
 ### Added

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Particle Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/accordion-panel.cjs

@@ -1,34 +1,34 @@
 'use strict';
 
-var chunkZTC3EQFZ_cjs = require('./chunk-ZTC3EQFZ.cjs');
-require('./chunk-OUOEQZHY.cjs');
+var chunkS5KUYX3Z_cjs = require('./chunk-S5KUYX3Z.cjs');
+require('./chunk-SNHU2AI4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "AccordionPanel", {
   enumerable: true,
-  get: function () { return chunkZTC3EQFZ_cjs.AccordionPanel; }
+  get: function () { return chunkS5KUYX3Z_cjs.AccordionPanel; }
 });
 Object.defineProperty(exports, "AccordionPanelContent", {
   enumerable: true,
-  get: function () { return chunkZTC3EQFZ_cjs.AccordionPanelContent; }
+  get: function () { return chunkS5KUYX3Z_cjs.AccordionPanelContent; }
 });
 Object.defineProperty(exports, "AccordionPanelSection", {
   enumerable: true,
-  get: function () { return chunkZTC3EQFZ_cjs.AccordionPanelSection; }
+  get: function () { return chunkS5KUYX3Z_cjs.AccordionPanelSection; }
 });
 Object.defineProperty(exports, "AccordionPanelTrigger", {
   enumerable: true,
-  get: function () { return chunkZTC3EQFZ_cjs.AccordionPanelTrigger; }
+  get: function () { return chunkS5KUYX3Z_cjs.AccordionPanelTrigger; }
 });
 Object.defineProperty(exports, "useAccordionPanel", {
   enumerable: true,
-  get: function () { return chunkZTC3EQFZ_cjs.useAccordionPanel; }
+  get: function () { return chunkS5KUYX3Z_cjs.useAccordionPanel; }
 });
 Object.defineProperty(exports, "useAccordionSection", {
   enumerable: true,
-  get: function () { return chunkZTC3EQFZ_cjs.useAccordionSection; }
+  get: function () { return chunkS5KUYX3Z_cjs.useAccordionSection; }
 });
 //# sourceMappingURL=accordion-panel.cjs.map
 //# sourceMappingURL=accordion-panel.cjs.map

package/dist/accordion-panel.js

@@ -1,5 +1,5 @@
-export { AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, useAccordionPanel, useAccordionSection } from './chunk-I3RPL3GE.js';
-import './chunk-6FQGMVF2.js';
+export { AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, useAccordionPanel, useAccordionSection } from './chunk-RUSRAKKA.js';
+import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=accordion-panel.js.map
 //# sourceMappingURL=accordion-panel.js.map

package/dist/autocomplete.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
-var chunkYTXBU6QC_cjs = require('./chunk-YTXBU6QC.cjs');
+var chunkQBNR5IVM_cjs = require('./chunk-QBNR5IVM.cjs');
 require('./chunk-J2DI6RMR.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
 require('./chunk-NBZC6LOB.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-RXDRYWVD.cjs');
-require('./chunk-OUOEQZHY.cjs');
+require('./chunk-SNHU2AI4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Autocomplete", {
   enumerable: true,
-  get: function () { return chunkYTXBU6QC_cjs.Autocomplete; }
+  get: function () { return chunkQBNR5IVM_cjs.Autocomplete; }
 });
 //# sourceMappingURL=autocomplete.cjs.map
 //# sourceMappingURL=autocomplete.cjs.map

package/dist/autocomplete.js

@@ -1,11 +1,11 @@
-export { Autocomplete } from './chunk-MIUSTEIV.js';
+export { Autocomplete } from './chunk-O2ZHORSC.js';
 import './chunk-MQ6VGG62.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';
 import './chunk-WHEXTDPV.js';
 import './chunk-RGANGU7X.js';
 import './chunk-JXE5XID6.js';
-import './chunk-6FQGMVF2.js';
+import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=autocomplete.js.map
 //# sourceMappingURL=autocomplete.js.map

package/dist/carousel.cjs

@@ -1,34 +1,34 @@
 'use strict';
 
-var chunk6SO2ZX3J_cjs = require('./chunk-6SO2ZX3J.cjs');
-require('./chunk-OUOEQZHY.cjs');
+var chunkDHIUMQLP_cjs = require('./chunk-DHIUMQLP.cjs');
+require('./chunk-SNHU2AI4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Carousel", {
   enumerable: true,
-  get: function () { return chunk6SO2ZX3J_cjs.Carousel; }
+  get: function () { return chunkDHIUMQLP_cjs.Carousel; }
 });
 Object.defineProperty(exports, "CarouselControls", {
   enumerable: true,
-  get: function () { return chunk6SO2ZX3J_cjs.CarouselControls; }
+  get: function () { return chunkDHIUMQLP_cjs.CarouselControls; }
 });
 Object.defineProperty(exports, "CarouselPanels", {
   enumerable: true,
-  get: function () { return chunk6SO2ZX3J_cjs.CarouselPanels; }
+  get: function () { return chunkDHIUMQLP_cjs.CarouselPanels; }
 });
 Object.defineProperty(exports, "CarouselSlide", {
   enumerable: true,
-  get: function () { return chunk6SO2ZX3J_cjs.CarouselSlide; }
+  get: function () { return chunkDHIUMQLP_cjs.CarouselSlide; }
 });
 Object.defineProperty(exports, "CarouselSteps", {
   enumerable: true,
-  get: function () { return chunk6SO2ZX3J_cjs.CarouselSteps; }
+  get: function () { return chunkDHIUMQLP_cjs.CarouselSteps; }
 });
 Object.defineProperty(exports, "useCarousel", {
   enumerable: true,
-  get: function () { return chunk6SO2ZX3J_cjs.useCarousel; }
+  get: function () { return chunkDHIUMQLP_cjs.useCarousel; }
 });
 //# sourceMappingURL=carousel.cjs.map
 //# sourceMappingURL=carousel.cjs.map

package/dist/carousel.js

@@ -1,5 +1,5 @@
-export { Carousel, CarouselControls, CarouselPanels, CarouselSlide, CarouselSteps, useCarousel } from './chunk-RFLPFQFF.js';
-import './chunk-6FQGMVF2.js';
+export { Carousel, CarouselControls, CarouselPanels, CarouselSlide, CarouselSteps, useCarousel } from './chunk-BMTTSBHF.js';
+import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=carousel.js.map
 //# sourceMappingURL=carousel.js.map

package/dist/checkbox-group.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
-var chunkJDRKYYXP_cjs = require('./chunk-JDRKYYXP.cjs');
+var chunkBZDXX6E3_cjs = require('./chunk-BZDXX6E3.cjs');
 require('./chunk-XKDW6B7X.cjs');
 require('./chunk-BBOIFV27.cjs');
 require('./chunk-YLGTDBB2.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
-require('./chunk-OUOEQZHY.cjs');
+require('./chunk-SNHU2AI4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
-  get: function () { return chunkJDRKYYXP_cjs.CheckboxGroup; }
+  get: function () { return chunkBZDXX6E3_cjs.CheckboxGroup; }
 });
 //# sourceMappingURL=checkbox-group.cjs.map
 //# sourceMappingURL=checkbox-group.cjs.map

package/dist/checkbox-group.js

@@ -1,10 +1,10 @@
-export { CheckboxGroup } from './chunk-JP4C3ROX.js';
+export { CheckboxGroup } from './chunk-FNJDMGJ3.js';
 import './chunk-KKWNKBKR.js';
 import './chunk-5MU6X3KO.js';
 import './chunk-GFYSELJF.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';
-import './chunk-6FQGMVF2.js';
+import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=checkbox-group.js.map
 //# sourceMappingURL=checkbox-group.js.map

package/dist/checkbox.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
-var chunkRKG2Q2HT_cjs = require('./chunk-RKG2Q2HT.cjs');
+var chunkU7PFHQBN_cjs = require('./chunk-U7PFHQBN.cjs');
 require('./chunk-YLGTDBB2.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
-require('./chunk-OUOEQZHY.cjs');
+require('./chunk-SNHU2AI4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
-  get: function () { return chunkRKG2Q2HT_cjs.Checkbox; }
+  get: function () { return chunkU7PFHQBN_cjs.Checkbox; }
 });
 //# sourceMappingURL=checkbox.cjs.map
 //# sourceMappingURL=checkbox.cjs.map

package/dist/checkbox.js

@@ -1,8 +1,8 @@
-export { Checkbox } from './chunk-H6F6ZWAG.js';
+export { Checkbox } from './chunk-4HRD4S25.js';
 import './chunk-GFYSELJF.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';
-import './chunk-6FQGMVF2.js';
+import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=checkbox.js.map
 //# sourceMappingURL=checkbox.js.map

package/dist/{chunk-7MSIREUY.cjs → chunk-23FTDEGR.cjs}

@@ -1,10 +1,50 @@
 'use strict';
 
-var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
 var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function usePastePills({
+  threshold,
+  heldPastes: controlledHeldPastes,
+  onHeldPastesChange
+} = {}) {
+  const [heldPastes, setHeldPastes] = chunkSNHU2AI4_cjs.useControllableState(
+    controlledHeldPastes,
+    [],
+    onHeldPastesChange
+  );
+  const nextId = react.useRef(0);
+  const handlePaste = react.useCallback(
+    (event) => {
+      if (!threshold || threshold <= 0) return false;
+      const text = event.clipboardData?.getData("text/plain") ?? "";
+      if (text.length < threshold) return false;
+      event.preventDefault();
+      nextId.current += 1;
+      const id = `paste-${nextId.current}`;
+      setHeldPastes((current) => [...current, { id, text }]);
+      return true;
+    },
+    [threshold, setHeldPastes]
+  );
+  const expand = react.useCallback(
+    (id) => {
+      const found = heldPastes.find((p) => p.id === id);
+      if (found === void 0) return void 0;
+      setHeldPastes((current) => current.filter((p) => p.id !== id));
+      return found.text;
+    },
+    [heldPastes, setHeldPastes]
+  );
+  const remove = react.useCallback(
+    (id) => setHeldPastes((current) => current.filter((p) => p.id !== id)),
+    [setHeldPastes]
+  );
+  const clear = react.useCallback(() => setHeldPastes([]), [setHeldPastes]);
+  return { heldPastes, handlePaste, expand, remove, clear };
+}
 var PREVIEW_CHARS = 20;
 function withSeparators(n) {
   return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
@@ -27,29 +67,23 @@ var Composer = react.forwardRef(
     heldPastes: controlledHeldPastes,
     onHeldPastesChange
   }, ref) {
-    const [value, setValue] = chunkOUOEQZHY_cjs.useControllableState(
+    const [value, setValue] = chunkSNHU2AI4_cjs.useControllableState(
       controlledValue,
       defaultValue,
       onChange
     );
-    const [heldPastes, setHeldPastes] = chunkOUOEQZHY_cjs.useControllableState(
-      controlledHeldPastes,
-      [],
+    const pills = usePastePills({
+      threshold: pasteThreshold,
+      heldPastes: controlledHeldPastes,
       onHeldPastesChange
-    );
+    });
+    const heldPastes = pills.heldPastes;
     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 }]);
+        pills.handlePaste(e);
       },
-      [pasteThreshold, setHeldPastes]
+      [pills]
     );
     const composeOutgoing = react.useCallback(
       () => [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join("\n\n"),
@@ -60,9 +94,9 @@ var Composer = react.forwardRef(
       if (!hasContent || disabled) return;
       onSubmit?.(composeOutgoing());
       setValue("");
-      setHeldPastes([]);
+      pills.clear();
       textareaRef.current?.focus();
-    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, setHeldPastes]);
+    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, pills]);
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -71,17 +105,14 @@ var Composer = react.forwardRef(
     };
     const insertPaste = react.useCallback(
       (paste) => {
+        const text = pills.expand(paste.id);
+        if (text === void 0) return;
         setValue((current) => current ? `${current}
 
-${paste.text}` : paste.text);
-        setHeldPastes((current) => current.filter((p) => p.id !== paste.id));
+${text}` : text);
         textareaRef.current?.focus();
       },
-      [setValue, setHeldPastes]
-    );
-    const discardPaste = react.useCallback(
-      (id) => setHeldPastes((current) => current.filter((p) => p.id !== id)),
-      [setHeldPastes]
+      [pills, setValue]
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -126,7 +157,7 @@ ${paste.text}` : paste.text);
                     {
                       type: "button",
                       "data-react-fancy-composer-paste-pill-remove": paste.id,
-                      onClick: () => discardPaste(paste.id),
+                      onClick: () => pills.remove(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",
@@ -182,5 +213,6 @@ ${paste.text}` : paste.text);
 Composer.displayName = "Composer";
 
 exports.Composer = Composer;
-//# sourceMappingURL=chunk-7MSIREUY.cjs.map
-//# sourceMappingURL=chunk-7MSIREUY.cjs.map
+exports.usePastePills = usePastePills;
+//# sourceMappingURL=chunk-23FTDEGR.cjs.map
+//# sourceMappingURL=chunk-23FTDEGR.cjs.map

package/dist/chunk-23FTDEGR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-paste-pills.ts","../src/components/Composer/Composer.tsx"],"names":["useControllableState","useRef","useCallback","forwardRef","Composer","jsxs","cn","jsx"],"mappings":"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","file":"chunk-23FTDEGR.cjs","sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { useControllableState } from \"./use-controllable-state\";\n\n/**\n * A paste held beside a composer rather than inserted into it.\n *\n * There is deliberately **no `length` field.** It would be `text.length` and\n * nothing else, and a derived value stored beside its source is a value that can\n * disagree with it — the two drift the moment anything edits one. Read\n * `paste.text.length`.\n */\nexport interface HeldPaste {\n  id: string;\n  text: string;\n}\n\n/**\n * The minimum of a clipboard event this hook touches.\n *\n * Structural rather than `React.ClipboardEvent` so a host can call it from a\n * native listener, a synthetic one, or a test double. React's own event satisfies\n * it.\n */\nexport interface PasteEventLike {\n  clipboardData?: { getData(type: string): string } | null;\n  preventDefault(): void;\n}\n\nexport interface UsePastePillsOptions {\n  /**\n   * Hold a paste of at least this many characters. Try 500 — about a long\n   * paragraph.\n   *\n   * **No default, on purpose.** Paste is a fundamental interaction, so holding one\n   * is something a host asks for rather than something it discovers. Omit this and\n   * `handlePaste` always returns `false` and touches nothing.\n   */\n  threshold?: number;\n  /** Own the list yourself. Omit to let the hook keep it. */\n  heldPastes?: HeldPaste[];\n  onHeldPastesChange?: (pastes: HeldPaste[]) => void;\n}\n\nexport interface UsePastePillsResult {\n  heldPastes: HeldPaste[];\n  /**\n   * Call this from your OWN paste handler. Returns `true` if it took the paste —\n   * in which case it has already called `preventDefault()` — and `false` if it\n   * declined, having touched nothing.\n   *\n   * Composable on purpose: a host whose handler already intercepts paste for its\n   * own reasons needs to ask \"did you want this?\" rather than hand over the event.\n   *\n   *     function onPaste(e) {\n   *       if (pills.handlePaste(e)) return;\n   *       // ...your own handling\n   *     }\n   */\n  handlePaste: (event: PasteEventLike) => boolean;\n  /**\n   * Removes the paste and returns its text, for the host to insert into its own\n   * surface. `undefined` if there is no such id.\n   *\n   * The hook cannot insert it — it owns no DOM and does not know what a host's\n   * surface is. That is the point.\n   */\n  expand: (id: string) => string | undefined;\n  /** Discard one without returning it. */\n  remove: (id: string) => void;\n  /** Empty the list, e.g. after a send. */\n  clear: () => void;\n}\n\n/**\n * Hold a large paste as state, so a composer can show it as a pill instead of\n * turning itself into a scrolling wall.\n *\n * ---------------------------------------------------------------------------\n * Why this is a hook and not just a feature of `Composer`\n * ---------------------------------------------------------------------------\n *\n * `Composer` shipped the behaviour in 5.31.0 and the MOIC estate, who specified it,\n * then established something I had missed: their chat input is a contenteditable\n * rendering inline `[deal:42|Acme]` badges, so they **cannot** adopt `Composer` (a\n * plain textarea) however much they want its behaviour. Their plan to delete their\n * own composer when ours landed could never have worked.\n *\n * So the logic lives here and **`Composer` is its first caller.** One\n * implementation rather than two, which matters more than the convenience: two\n * copies of a rule drift, and the copy nobody reads is the one that rots. The rule\n * that must not drift is the one in `Composer`'s own tests — a send with pills\n * still closed carries the text.\n *\n * It owns no DOM. The host renders the pills.\n *\n * ---------------------------------------------------------------------------\n * Who actually calls this (as of 5.32.0): `Composer`, and nothing else\n * ---------------------------------------------------------------------------\n *\n * The estate that specified it **withdrew before adopting it**, hours after it\n * shipped — their design moved the pill INTO the message as a `[paste:id|label]`\n * marker in the same grammar as their other object tags, which makes the message\n * itself the record of what is attached. A parallel `heldPastes` array would then be\n * a second place answering \"what am I sending?\", and the two would disagree the\n * moment someone backspaced a badge. Their reasoning was better than the spec.\n *\n * Recorded because a reader should not infer an extension point under active\n * external use. It is kept rather than withdrawn for two reasons that are about\n * cost, not optimism: it is published API on a 5.x package, so removing it needs a\n * major; and `Composer` calls it, so it is exercised by that component's tests on\n * every run and cannot rot unnoticed.\n *\n * **It gets no further surface without a real caller.** No extra options, no second\n * hook. An API with one hypothetical consumer is how a package accumulates surface\n * nobody uses.\n */\nexport function usePastePills({\n  threshold,\n  heldPastes: controlledHeldPastes,\n  onHeldPastesChange,\n}: UsePastePillsOptions = {}): UsePastePillsResult {\n  const [heldPastes, setHeldPastes] = useControllableState<HeldPaste[]>(\n    controlledHeldPastes,\n    [],\n    onHeldPastesChange,\n  );\n\n  /*\n   * A counter rather than `crypto.randomUUID()` or an index.\n   *\n   * An index is not an id — removing the first pill renumbers the rest, and a host\n   * keying its DOM on that remounts every pill and loses hover state. A counter in\n   * a ref is stable for the life of the component and needs no platform API that a\n   * server renderer might lack.\n   */\n  const nextId = useRef(0);\n\n  const handlePaste = useCallback(\n    (event: PasteEventLike): boolean => {\n      if (!threshold || threshold <= 0) return false;\n\n      const text = event.clipboardData?.getData(\"text/plain\") ?? \"\";\n\n      // Below the threshold, decline WITHOUT touching the event. A host calling\n      // this from inside its own handler has to be able to carry on as if the hook\n      // were not there.\n      if (text.length < threshold) return false;\n\n      event.preventDefault();\n      nextId.current += 1;\n      const id = `paste-${nextId.current}`;\n      setHeldPastes((current) => [...current, { id, text }]);\n\n      return true;\n    },\n    [threshold, setHeldPastes],\n  );\n\n  const expand = useCallback(\n    (id: string): string | undefined => {\n      const found = heldPastes.find((p) => p.id === id);\n\n      if (found === undefined) return undefined;\n\n      setHeldPastes((current) => current.filter((p) => p.id !== id));\n\n      return found.text;\n    },\n    [heldPastes, setHeldPastes],\n  );\n\n  const remove = useCallback(\n    (id: string) => setHeldPastes((current) => current.filter((p) => p.id !== id)),\n    [setHeldPastes],\n  );\n\n  const clear = useCallback(() => setHeldPastes([]), [setHeldPastes]);\n\n  return { heldPastes, handlePaste, expand, remove, clear };\n}\n","import { forwardRef, useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { usePastePills, type HeldPaste } from \"../../hooks/use-paste-pills\";\nimport type { ComposerProps } 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    /*\n     * The holding logic lives in `usePastePills` and this is its first caller.\n     *\n     * It moved out in 5.32.0 because the estate that specified the feature cannot\n     * use this component at all — their chat input is a contenteditable rendering\n     * inline tag badges, which a textarea cannot do. One implementation rather than\n     * two: two copies of a rule drift, and the copy nobody reads is the one that\n     * rots. The rule that must not drift is the one below — a send with pills still\n     * closed carries the text.\n     */\n    const pills = usePastePills({\n      threshold: pasteThreshold,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n    });\n    const heldPastes = pills.heldPastes;\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    const handlePaste = useCallback(\n      (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n        // Composable by design, so this reads as a question rather than a handover.\n        // Nothing else here wants the paste, so the answer is simply ignored.\n        pills.handlePaste(e);\n      },\n      [pills],\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      pills.clear();\n      textareaRef.current?.focus();\n    }, [hasContent, disabled, onSubmit, composeOutgoing, setValue, pills]);\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        // `expand` removes it and hands back the text; inserting is this\n        // component's job because the hook owns no DOM.\n        const text = pills.expand(paste.id);\n\n        if (text === undefined) return;\n\n        setValue((current) => (current ? `${current}\\n\\n${text}` : text));\n        textareaRef.current?.focus();\n      },\n      [pills, setValue],\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={() => pills.remove(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-TQFQUNV3.js → chunk-2KAJ4L7C.js}

@@ -1,4 +1,4 @@
-import { useControllableState } from './chunk-6FQGMVF2.js';
+import { useControllableState } from './chunk-EDYAXGUM.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { createContext, useState, useMemo, useRef, useCallback, useEffect, Fragment as Fragment$1, useContext } from 'react';
 import { Loader2, ChevronRight, Search, X, ArrowUp, ArrowDown, Pencil, CircleAlert, RotateCw, FolderPlus } from 'lucide-react';
@@ -1079,5 +1079,5 @@ var FileBrowser = Object.assign(FileBrowserRoot, {
 });
 
 export { FileBrowser, FileBrowserNewFolder, useFileBrowser, validateFolderName };
-//# sourceMappingURL=chunk-TQFQUNV3.js.map
-//# sourceMappingURL=chunk-TQFQUNV3.js.map
+//# sourceMappingURL=chunk-2KAJ4L7C.js.map
+//# sourceMappingURL=chunk-2KAJ4L7C.js.map