@particle-academy/react-fancy 5.49.1 → 5.51.0

package/CHANGELOG.md

@@ -11,6 +11,85 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.51.0] - 2026-10-20
+
+### Added
+
+- **`Chart.Sparkline` takes `min`**: the value the bottom edge stands for.
+  `min={0}` scales from zero, the way `Chart.Line` and `Chart.Bar` always do, so
+  a window where every point had activity no longer draws its quietest point on
+  the floor (and a flat busy series draws along the top, not the bottom). A value
+  below `min` extends the scale instead of being drawn outside the box.
+  **Nothing to do:** without `min` the scale still starts at the data's minimum.
+- **`MagicWand` takes `target`**, so it can act on a textarea, input or editor
+  the HOST renders. Pass a ref to a textarea / input as is, or for anything else
+  (a code editor, a contenteditable) an adapter:
+  `{ element, getSelection: () => ({ start, end }) | null, getSelectionRect? }`.
+  With `target`, MagicWand renders no textarea of its own, only the wand
+  (portalled, viewport-positioned). The write still goes through
+  `onValueChange`, and `value` must be the target's current value.
+  **Nothing to do** without `target`: the built-in textarea is unchanged.
+- `MagicWandTarget`, `MagicWandTargetAdapter`, `MagicWandRect` type exports.
+- Stable handles on the wand: `data-react-fancy-magic-wand` on the toolbar and
+  `data-react-fancy-magic-wand-action="<id>"` on each action.
+
+### Changed
+
+- **Paste pills preview in a `Popover`, not a `Tooltip`** (`Composer`,
+  `PromptInput` and `Input` with inline paste). It opens on hover AND on focus,
+  so a keyboard user gets the same preview; the image pill is now focusable
+  (`tabIndex=0`) for that. An image pill shows its thumbnail; if the image cannot
+  load (typically a CSP without `blob:` in `img-src`) it shows its label instead
+  of an empty box, and the `<img>` now carries the label as `alt`.
+  **If you relied on the tooltip:** the preview now sits in
+  `[data-react-fancy-popover]`, not `[data-react-fancy-tooltip]`, and has no
+  `role="tooltip"`; update any selector or test that looked for those. It looks
+  like a Popover (light panel, border) rather than the dark tooltip bubble;
+  `classNames.preview` still merges onto it, so restyle there. It stays open
+  while the pointer is over it and closes ~300ms after leaving, and Escape closes
+  it. `data-react-fancy-composer-paste-pill-preview` and `renderPastePreview` are
+  unchanged: that is already the slot for supplying your own preview content.
+
+### Fixed
+
+- **A closed `Drawer` unmounts even when no exit animation runs.** `useAnimation`
+  unmounted ONLY on `animationend`, so in an app that does not load Fancy's
+  stylesheet (and in jsdom) a closed panel stayed in the DOM forever. It now
+  measures the exit (`getAnimations()`, else the computed animation / transition
+  duration): nothing running unmounts at once, something running unmounts on its
+  own `animationend` or after its measured duration, whichever comes first. A
+  child's `animationend` bubbling up no longer ends the exit early. The same hook
+  drives **`Modal`, `Command`, `ContextMenu`, `Dropdown` and `MobileMenu`'s
+  flyout**, which had the same defect and get the same fix. **Nothing to do**; if
+  you worked around it (forcing a remount, a `key`, your own timeout), you can
+  remove the workaround.
+
+## [5.50.0] - 2026-10-19
+
+### Added
+
+- **`sanitizeHtml(html, options)` has an allowlist mode** (#35). Pass
+  `{ allowedTags, allowedAttributes, allowedSchemes, allowRelative }` and only
+  what is listed survives: unlisted tags are unwrapped (text kept), unlisted
+  attributes and URL schemes are removed, and comments go. `allowedAttributes`
+  is one list or a per-tag map with `"*"` for every tag, and `"data-*"`-style
+  prefixes. `allowedSchemes` defaults to `http:`, `https:`, `mailto:`;
+  `allowRelative` (default `false`) keeps same-site relative URLs and fragments
+  but never `//host`.
+  **An allowlist can only narrow.** Event handlers, `srcdoc`, `srcset`,
+  `javascript:` / `vbscript:` URLs and script-capable or foreign-content tags
+  (`script`, `style`, `iframe`, `object`, `embed`, `form`, `template`, `svg`,
+  `math`, ...) are removed even when listed. Without a DOM (SSR) allowlist mode
+  returns the input as escaped text rather than passing it through.
+- **`renderMarkdown(markdown, sanitize?)`**: the markdown `ContentRenderer`
+  renders, as a sanitised HTML string (blocklist by default, the allowlist when
+  given options), so a host no longer imports the markdown parser behind our
+  back. `ContentRenderer` now uses the same function, so the two cannot drift.
+- `SanitizeHtmlOptions` type export.
+
+**Nothing to do:** `sanitizeHtml(html)` with no options is unchanged, byte for
+byte.
+
 ## [5.49.1] - 2026-10-19
 
 ### Fixed

package/dist/button.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 require('./chunk-M5MUGSON.cjs');
-var chunk3XJKJQSY_cjs = require('./chunk-3XJKJQSY.cjs');
-require('./chunk-LRNWD26Z.cjs');
+var chunkFWA4PCW7_cjs = require('./chunk-FWA4PCW7.cjs');
+require('./chunk-X2FC7ODX.cjs');
 require('./chunk-XCZZVRBY.cjs');
 require('./chunk-QKFOJKVE.cjs');
 require('./chunk-ZU5Q77OT.cjs');
@@ -11,11 +11,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Action", {
   enumerable: true,
-  get: function () { return chunk3XJKJQSY_cjs.Action; }
+  get: function () { return chunkFWA4PCW7_cjs.Action; }
 });
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunk3XJKJQSY_cjs.Button; }
+  get: function () { return chunkFWA4PCW7_cjs.Button; }
 });
 //# sourceMappingURL=button.cjs.map
 //# sourceMappingURL=button.cjs.map

package/dist/button.js

@@ -1,6 +1,6 @@
 import './chunk-LQ4ICCN2.js';
-export { Action, Button } from './chunk-ZLYOMQ2J.js';
-import './chunk-QXYO76NZ.js';
+export { Action, Button } from './chunk-KODD54GT.js';
+import './chunk-6TBRBN7H.js';
 import './chunk-45BBNJQD.js';
 import './chunk-IVRYSSM7.js';
 import './chunk-MMW2JGKZ.js';

package/dist/chart.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunk7B3HK6TY_cjs = require('./chunk-7B3HK6TY.cjs');
+var chunkB6CQ4KK7_cjs = require('./chunk-B6CQ4KK7.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Chart", {
   enumerable: true,
-  get: function () { return chunk7B3HK6TY_cjs.Chart; }
+  get: function () { return chunkB6CQ4KK7_cjs.Chart; }
 });
 //# sourceMappingURL=chart.cjs.map
 //# sourceMappingURL=chart.cjs.map

package/dist/chart.d.cts

@@ -73,6 +73,14 @@ interface ChartSparklineProps {
     width?: number;
     height?: number;
     color?: string;
+    /**
+     * The value the bottom edge stands for. Default: the data's own minimum, so
+     * the line uses the full height. `min={0}` scales from zero, as `Chart.Line`
+     * and `Chart.Bar` always do, so a run of busy-but-quiet values does not sit on
+     * the floor. A value below `min` extends the scale rather than being drawn
+     * outside the box.
+     */
+    min?: number;
     className?: string;
 }
 interface ChartHorizontalBarProps {
@@ -111,7 +119,7 @@ declare namespace ChartPie {
     var displayName: string;
 }
 
-declare function ChartSparkline({ data, width, height, color, className, }: ChartSparklineProps): react.JSX.Element;
+declare function ChartSparkline({ data, width, height, color, min: floor, className, }: ChartSparklineProps): react.JSX.Element;
 declare namespace ChartSparkline {
     var displayName: string;
 }

package/dist/chart.d.ts

@@ -73,6 +73,14 @@ interface ChartSparklineProps {
     width?: number;
     height?: number;
     color?: string;
+    /**
+     * The value the bottom edge stands for. Default: the data's own minimum, so
+     * the line uses the full height. `min={0}` scales from zero, as `Chart.Line`
+     * and `Chart.Bar` always do, so a run of busy-but-quiet values does not sit on
+     * the floor. A value below `min` extends the scale rather than being drawn
+     * outside the box.
+     */
+    min?: number;
     className?: string;
 }
 interface ChartHorizontalBarProps {
@@ -111,7 +119,7 @@ declare namespace ChartPie {
     var displayName: string;
 }
 
-declare function ChartSparkline({ data, width, height, color, className, }: ChartSparklineProps): react.JSX.Element;
+declare function ChartSparkline({ data, width, height, color, min: floor, className, }: ChartSparklineProps): react.JSX.Element;
 declare namespace ChartSparkline {
     var displayName: string;
 }

package/dist/chart.js

@@ -1,4 +1,4 @@
-export { Chart } from './chunk-CK6LRROH.js';
+export { Chart } from './chunk-M5ACSJJ4.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=chart.js.map
 //# sourceMappingURL=chart.js.map

package/dist/{chunk-T5OCRKPD.cjs → chunk-23PAOCQQ.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3WGRVDQR_cjs = require('./chunk-3WGRVDQR.cjs');
+var chunkFQZE5N2N_cjs = require('./chunk-FQZE5N2N.cjs');
 var chunkJ2DI6RMR_cjs = require('./chunk-J2DI6RMR.cjs');
 var chunkNBZC6LOB_cjs = require('./chunk-NBZC6LOB.cjs');
 var chunk57FQGQJK_cjs = require('./chunk-57FQGQJK.cjs');
@@ -50,7 +50,7 @@ function DropdownItems({ children, className }) {
   }, [setOpen, setActiveIndex]);
   chunk57FQGQJK_cjs.useOutsideClick(outsideRef, close, open, anchorRef);
   chunkRXDRYWVD_cjs.useEscapeKey(close, open);
-  const { mounted, className: animClass, ref: animRef } = chunk3WGRVDQR_cjs.useAnimation({
+  const { mounted, className: animClass, ref: animRef } = chunkFQZE5N2N_cjs.useAnimation({
     open,
     enterClass: "fancy-scale-in",
     exitClass: "fancy-fade-out"
@@ -168,5 +168,5 @@ var Dropdown = Object.assign(DropdownRoot, {
 
 exports.Dropdown = Dropdown;
 exports.useDropdown = useDropdown;
-//# sourceMappingURL=chunk-T5OCRKPD.cjs.map
-//# sourceMappingURL=chunk-T5OCRKPD.cjs.map
+//# sourceMappingURL=chunk-23PAOCQQ.cjs.map
+//# sourceMappingURL=chunk-23PAOCQQ.cjs.map

package/dist/{chunk-T5OCRKPD.cjs.map → chunk-23PAOCQQ.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["createContext","useContext","jsx","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useAnimation","useEffect","Portal","cn","useState","useMemo"],"mappings":";;;;;;;;;;;AAGO,IAAM,eAAA,GAAkBA,oBAA2C,IAAI,CAAA;AAEvE,SAAS,WAAA,GAAoC;AAClD,EAAA,MAAM,GAAA,GAAMC,iBAAW,eAAe,CAAA;AACtC,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,OAAO,GAAA;AACT;ACVO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAS,EAAyB;AAClE,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,SAAA,KAAc,WAAA,EAAY;AAEjD,EAAA,uBACEC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,SAAA;AAAA,MACL,mCAAA,EAAkC,EAAA;AAAA,MAClC,SAAA,EAAU,aAAA;AAAA,MACV,OAAA,EAAS,MAAM,OAAA,CAAQ,CAAC,IAAI,CAAA;AAAA,MAC5B,eAAA,EAAe,IAAA;AAAA,MACf,eAAA,EAAc,MAAA;AAAA,MAEb;AAAA;AAAA,GACH;AAEJ;AAEA,eAAA,CAAgB,WAAA,GAAc,iBAAA;ACVvB,SAAS,aAAA,CAAc,EAAE,QAAA,EAAU,SAAA,EAAU,EAAuB;AACzE,EAAA,MAAM,EAAE,MAAM,OAAA,EAAS,SAAA,EAAW,aAAa,cAAA,EAAgB,SAAA,EAAW,MAAA,EAAO,GAC/E,WAAA,EAAY;AACd,EAAA,MAAM,WAAA,GAAcC,aAAuB,IAAI,CAAA;AAC/C,EAAA,MAAM,UAAA,GAAaA,aAAuB,IAAI,CAAA;AAE9C,EAAA,MAAM,QAAA,GAAWC,qCAAA,CAAoB,SAAA,EAAW,WAAA,EAAa;AAAA,IAC3D,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA,EAAS;AAAA,GACV,CAAA;AAED,EAAA,MAAM,KAAA,GAAQC,kBAAY,MAAM;AAC9B,IAAA,OAAA,CAAQ,KAAK,CAAA;AACb,IAAA,cAAA,CAAe,EAAE,CAAA;AAAA,EACnB,CAAA,EAAG,CAAC,OAAA,EAAS,cAAc,CAAC,CAAA;AAE5B,EAAAC,iCAAA,CAAgB,UAAA,EAAY,KAAA,EAAO,IAAA,EAAM,SAAS,CAAA;AAClD,EAAAC,8BAAA,CAAa,OAAO,IAAI,CAAA;AAExB,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,WAAW,GAAA,EAAK,OAAA,KAAYC,8BAAA,CAAa;AAAA,IACnE,IAAA;AAAA,IACA,UAAA,EAAY,gBAAA;AAAA,IACZ,SAAA,EAAW;AAAA,GACZ,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,WAAA,CAAY,OAAA,EAAS;AAEnC,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAAqB;AAC1C,MAAA,MAAM,KAAA,GAAQ,YAAY,OAAA,EAAS,gBAAA;AAAA,QACjC;AAAA,OACF;AACA,MAAA,IAAI,CAAC,OAAO,MAAA,EAAQ;AAEpB,MAAA,IAAI,CAAA,CAAE,QAAQ,WAAA,EAAa;AACzB,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,MAAM,OAAO,WAAA,GAAc,KAAA,CAAM,MAAA,GAAS,CAAA,GAAI,cAAc,CAAA,GAAI,CAAA;AAChE,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAA,KAAA,CAAM,IAAI,GAAG,KAAA,EAAM;AAAA,MACrB,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,SAAA,EAAW;AAC9B,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,MAAM,OAAO,WAAA,GAAc,CAAA,GAAI,WAAA,GAAc,CAAA,GAAI,MAAM,MAAA,GAAS,CAAA;AAChE,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAA,KAAA,CAAM,IAAI,GAAG,KAAA,EAAM;AAAA,MACrB;AAAA,IACF,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAClD,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,aAAa,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,IAAA,EAAM,WAAA,EAAa,cAAc,CAAC,CAAA;AAEtC,EAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AAErB,EAAA,uBACEP,cAAAA,CAACQ,wBAAA,EAAA,EACC,QAAA,kBAAAR,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,QAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AACrB,QAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AACtB,QAAC,QAAuD,OAAA,GAAU,IAAA;AAAA,MACpE,CAAA;AAAA,MACA,2BAAA,EAA0B,EAAA;AAAA,MAC1B,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAWS,oBAAA;AAAA,QACT,wHAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,OAAO,EAAE,IAAA,EAAM,SAAS,CAAA,EAAG,GAAA,EAAK,SAAS,CAAA,EAAE;AAAA,MAE1C;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;ACnFrB,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS,KAAA;AAAA,EACT;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,WAAA,EAAY;AAEhC,EAAA,uBACET,cAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,gCAAA,EAA+B,EAAA;AAAA,MAC/B,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,UAAA;AAAA,MACL,QAAA;AAAA,MACA,eAAA,EAAe,QAAA;AAAA,MACf,SAAA,EAAWS,oBAAA;AAAA,QACT,mFAAA;AAAA,QACA,SACI,sEAAA,GACA,2EAAA;AAAA,QACJ,QAAA,IAAY,+BAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACA,SAAS,MAAM;AACb,QAAA,IAAI,QAAA,EAAU;AACd,QAAA,OAAA,IAAU;AACV,QAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,MACf,CAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;ACpCpB,SAAS,iBAAA,CAAkB,EAAE,SAAA,EAAU,EAA2B;AACvE,EAAA,uBACET,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,qCAAA,EAAoC,EAAA;AAAA,MACpC,IAAA,EAAK,WAAA;AAAA,MACL,SAAA,EAAWS,oBAAA;AAAA,QACT,wCAAA;AAAA,QACA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;ACRhC,SAAS,YAAA,CAAa;AAAA,EACpB,QAAA;AAAA,EACA,SAAA,GAAY,cAAA;AAAA,EACZ,MAAA,GAAS;AACX,CAAA,EAAkB;AAChB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,EAAE,CAAA;AACjD,EAAA,MAAM,SAAA,GAAYT,aAAoB,IAAI,CAAA;AAE1C,EAAA,MAAM,GAAA,GAAMU,aAAA;AAAA,IACV,OAAO,EAAE,IAAA,EAAM,OAAA,EAAS,WAAW,WAAA,EAAa,cAAA,EAAgB,WAAW,MAAA,EAAO,CAAA;AAAA,IAClF,CAAC,IAAA,EAAM,SAAA,EAAW,WAAA,EAAa,WAAW,MAAM;AAAA,GAClD;AAEA,EAAA,uBACEX,cAAAA,CAAC,eAAA,CAAgB,UAAhB,EAAyB,KAAA,EAAO,KAAM,QAAA,EAAS,CAAA;AAEpD;AAEO,IAAM,QAAA,GAAW,MAAA,CAAO,MAAA,CAAO,YAAA,EAAc;AAAA,EAClD,OAAA,EAAS,eAAA;AAAA,EACT,KAAA,EAAO,aAAA;AAAA,EACP,IAAA,EAAM,YAAA;AAAA,EACN,SAAA,EAAW;AACb,CAAC","file":"chunk-T5OCRKPD.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      \"Dropdown compound components must be used within <Dropdown>\",\n    );\n  }\n  return ctx;\n}\n","import { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n  const { setOpen, open, anchorRef } = useDropdown();\n\n  return (\n    <span\n      ref={anchorRef as React.RefObject<HTMLSpanElement>}\n      data-react-fancy-dropdown-trigger=\"\"\n      className=\"inline-flex\"\n      onClick={() => setOpen(!open)}\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n    >\n      {children}\n    </span>\n  );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n  const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } =\n    useDropdown();\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const outsideRef = useRef<HTMLDivElement>(null);\n\n  const position = useFloatingPosition(anchorRef, floatingRef, {\n    placement,\n    offset,\n    enabled: open,\n  });\n\n  const close = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n  }, [setOpen, setActiveIndex]);\n\n  useOutsideClick(outsideRef, close, open, anchorRef);\n  useEscapeKey(close, open);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-scale-in\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  useEffect(() => {\n    if (!open || !floatingRef.current) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const items = floatingRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n      );\n      if (!items?.length) return;\n\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;\n        setActiveIndex(next);\n        items[next]?.focus();\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;\n        setActiveIndex(prev);\n        items[prev]?.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, activeIndex, setActiveIndex]);\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <div\n        ref={(node) => {\n          outsideRef.current = node;\n          floatingRef.current = node;\n          (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n        }}\n        data-react-fancy-dropdown=\"\"\n        role=\"menu\"\n        className={cn(\n          \"fixed z-50 min-w-[8rem] rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900\",\n          animClass,\n          className,\n        )}\n        style={{ left: position.x, top: position.y }}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n  children,\n  onClick,\n  disabled = false,\n  danger = false,\n  className,\n}: DropdownItemProps) {\n  const { setOpen } = useDropdown();\n\n  return (\n    <button\n      data-react-fancy-dropdown-item=\"\"\n      type=\"button\"\n      role=\"menuitem\"\n      disabled={disabled}\n      aria-disabled={disabled}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        danger\n          ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n          : \"text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      onClick={() => {\n        if (disabled) return;\n        onClick?.();\n        setOpen(false);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n  return (\n    <div\n      data-react-fancy-dropdown-separator=\"\"\n      role=\"separator\"\n      className={cn(\n        \"my-1 h-px bg-zinc-200 dark:bg-zinc-700\",\n        className,\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nfunction DropdownRoot({\n  children,\n  placement = \"bottom-start\",\n  offset = 4,\n}: DropdownProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const anchorRef = useRef<HTMLElement>(null);\n\n  const ctx = useMemo(\n    () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),\n    [open, anchorRef, activeIndex, placement, offset],\n  );\n\n  return (\n    <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n  );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Items: DropdownItems,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n});\n"]}
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["createContext","useContext","jsx","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useAnimation","useEffect","Portal","cn","useState","useMemo"],"mappings":"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","file":"chunk-23PAOCQQ.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) {\n    throw new Error(\n      \"Dropdown compound components must be used within <Dropdown>\",\n    );\n  }\n  return ctx;\n}\n","import { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n  const { setOpen, open, anchorRef } = useDropdown();\n\n  return (\n    <span\n      ref={anchorRef as React.RefObject<HTMLSpanElement>}\n      data-react-fancy-dropdown-trigger=\"\"\n      className=\"inline-flex\"\n      onClick={() => setOpen(!open)}\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n    >\n      {children}\n    </span>\n  );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n  const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } =\n    useDropdown();\n  const floatingRef = useRef<HTMLDivElement>(null);\n  const outsideRef = useRef<HTMLDivElement>(null);\n\n  const position = useFloatingPosition(anchorRef, floatingRef, {\n    placement,\n    offset,\n    enabled: open,\n  });\n\n  const close = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n  }, [setOpen, setActiveIndex]);\n\n  useOutsideClick(outsideRef, close, open, anchorRef);\n  useEscapeKey(close, open);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: \"fancy-scale-in\",\n    exitClass: \"fancy-fade-out\",\n  });\n\n  useEffect(() => {\n    if (!open || !floatingRef.current) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const items = floatingRef.current?.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n      );\n      if (!items?.length) return;\n\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;\n        setActiveIndex(next);\n        items[next]?.focus();\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;\n        setActiveIndex(prev);\n        items[prev]?.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, activeIndex, setActiveIndex]);\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <div\n        ref={(node) => {\n          outsideRef.current = node;\n          floatingRef.current = node;\n          (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n        }}\n        data-react-fancy-dropdown=\"\"\n        role=\"menu\"\n        className={cn(\n          \"fixed z-50 min-w-[8rem] rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900\",\n          animClass,\n          className,\n        )}\n        style={{ left: position.x, top: position.y }}\n      >\n        {children}\n      </div>\n    </Portal>\n  );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n  children,\n  onClick,\n  disabled = false,\n  danger = false,\n  className,\n}: DropdownItemProps) {\n  const { setOpen } = useDropdown();\n\n  return (\n    <button\n      data-react-fancy-dropdown-item=\"\"\n      type=\"button\"\n      role=\"menuitem\"\n      disabled={disabled}\n      aria-disabled={disabled}\n      className={cn(\n        \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n        danger\n          ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n          : \"text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      onClick={() => {\n        if (disabled) return;\n        onClick?.();\n        setOpen(false);\n      }}\n    >\n      {children}\n    </button>\n  );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n  return (\n    <div\n      data-react-fancy-dropdown-separator=\"\"\n      role=\"separator\"\n      className={cn(\n        \"my-1 h-px bg-zinc-200 dark:bg-zinc-700\",\n        className,\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nfunction DropdownRoot({\n  children,\n  placement = \"bottom-start\",\n  offset = 4,\n}: DropdownProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const anchorRef = useRef<HTMLElement>(null);\n\n  const ctx = useMemo(\n    () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),\n    [open, anchorRef, activeIndex, placement, offset],\n  );\n\n  return (\n    <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n  );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Items: DropdownItems,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n});\n"]}

package/dist/{chunk-GBGJWAXZ.cjs → chunk-25UPDBI6.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3WGRVDQR_cjs = require('./chunk-3WGRVDQR.cjs');
+var chunkFQZE5N2N_cjs = require('./chunk-FQZE5N2N.cjs');
 var chunkNBZC6LOB_cjs = require('./chunk-NBZC6LOB.cjs');
 var chunkRXDRYWVD_cjs = require('./chunk-RXDRYWVD.cjs');
 var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
@@ -25,7 +25,7 @@ function MobileMenuFlyout({
   className
 }) {
   const isLeft = side === "left";
-  const { mounted, className: animClass, ref } = chunk3WGRVDQR_cjs.useAnimation({
+  const { mounted, className: animClass, ref } = chunkFQZE5N2N_cjs.useAnimation({
     open,
     enterClass: isLeft ? "fancy-slide-in-left" : "fancy-slide-in-right",
     exitClass: isLeft ? "fancy-slide-out-left" : "fancy-slide-out-right"
@@ -175,5 +175,5 @@ var MobileMenu = {
 
 exports.MobileMenu = MobileMenu;
 exports.useMobileMenu = useMobileMenu;
-//# sourceMappingURL=chunk-GBGJWAXZ.cjs.map
-//# sourceMappingURL=chunk-GBGJWAXZ.cjs.map
+//# sourceMappingURL=chunk-25UPDBI6.cjs.map
+//# sourceMappingURL=chunk-25UPDBI6.cjs.map

package/dist/{chunk-GBGJWAXZ.cjs.map → chunk-25UPDBI6.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MobileMenu/MobileMenu.context.ts","../src/components/MobileMenu/MobileMenuFlyout.tsx","../src/components/MobileMenu/MobileMenuBottomBar.tsx","../src/components/MobileMenu/MobileMenuItem.tsx","../src/components/MobileMenu/MobileMenu.tsx"],"names":["createContext","useContext","useAnimation","useEscapeKey","useEffect","Portal","jsx","jsxs","cn","X"],"mappings":"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","file":"chunk-GBGJWAXZ.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MobileMenuContextValue } from \"./MobileMenu.types\";\n\nexport const MobileMenuContext = createContext<MobileMenuContextValue | null>(null);\n\nexport function useMobileMenu(): MobileMenuContextValue {\n  const ctx = useContext(MobileMenuContext);\n  if (!ctx) {\n    throw new Error(\"useMobileMenu must be used within a <MobileMenu> component\");\n  }\n  return ctx;\n}\n","import { useEffect } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useEscapeKey } from \"../../hooks\";\nimport { useAnimation } from \"../../hooks\";\nimport { Portal } from \"../Portal\";\nimport { MobileMenuContext } from \"./MobileMenu.context\";\nimport type { MobileMenuFlyoutProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuFlyout({\n  children,\n  open,\n  onClose,\n  side = \"left\",\n  title,\n  className,\n}: MobileMenuFlyoutProps) {\n  const isLeft = side === \"left\";\n\n  const { mounted, className: animClass, ref } = useAnimation({\n    open,\n    enterClass: isLeft ? \"fancy-slide-in-left\" : \"fancy-slide-in-right\",\n    exitClass: isLeft ? \"fancy-slide-out-left\" : \"fancy-slide-out-right\",\n  });\n\n  useEscapeKey(onClose, open);\n\n  // Lock body scroll\n  useEffect(() => {\n    if (open) {\n      const prev = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n      return () => {\n        document.body.style.overflow = prev;\n      };\n    }\n  }, [open]);\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <MobileMenuContext.Provider value={{ variant: \"flyout\" }}>\n        <div data-react-fancy-mobile-menu-flyout=\"\" className=\"fixed inset-0 z-50\">\n          {/* Backdrop */}\n          <div\n            className={cn(\n              \"absolute inset-0 bg-black/40 transition-opacity\",\n              open ? \"opacity-100\" : \"opacity-0\",\n            )}\n            onClick={onClose}\n          />\n\n          {/* Panel */}\n          <div\n            ref={ref as React.RefObject<HTMLDivElement>}\n            className={cn(\n              \"absolute top-0 flex h-full w-72 max-w-[80vw] flex-col bg-white shadow-xl dark:bg-zinc-900\",\n              isLeft ? \"left-0\" : \"right-0\",\n              animClass,\n              className,\n            )}\n          >\n            {/* Header */}\n            <div className=\"flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700\">\n              {title && (\n                <span className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n                  {title}\n                </span>\n              )}\n              {!title && <span />}\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"flex h-8 w-8 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300\"\n              >\n                <X className=\"h-4 w-4\" />\n              </button>\n            </div>\n\n            {/* Content */}\n            <div className=\"flex-1 overflow-y-auto p-2\">\n              {children}\n            </div>\n          </div>\n        </div>\n      </MobileMenuContext.Provider>\n    </Portal>\n  );\n}\n\nMobileMenuFlyout.displayName = \"MobileMenuFlyout\";\n","import { cn } from \"../../utils/cn\";\nimport { MobileMenuContext } from \"./MobileMenu.context\";\nimport type { MobileMenuBottomBarProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuBottomBar({ children, className }: MobileMenuBottomBarProps) {\n  return (\n    <MobileMenuContext.Provider value={{ variant: \"bottom-bar\" }}>\n      <nav\n        data-react-fancy-mobile-menu-bottom-bar=\"\"\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-40 flex items-stretch border-t border-zinc-200 bg-white/95 backdrop-blur-sm dark:border-zinc-700 dark:bg-zinc-900/95\",\n          \"pb-[env(safe-area-inset-bottom)]\",\n          className,\n        )}\n      >\n        {children}\n      </nav>\n    </MobileMenuContext.Provider>\n  );\n}\n\nMobileMenuBottomBar.displayName = \"MobileMenuBottomBar\";\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMobileMenu } from \"./MobileMenu.context\";\nimport type { MobileMenuItemProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuItem({\n  children,\n  href,\n  as: As,\n  icon,\n  active = false,\n  disabled = false,\n  badge,\n  onClick,\n  className,\n  ...rest\n}: MobileMenuItemProps) {\n  const { variant } = useMobileMenu();\n  const isBottomBar = variant === \"bottom-bar\";\n\n  // See NavigableProps: link mode engages on `href` OR `as`. Keeping `onClick`\n  // in link mode matters most here — a mobile item usually has to close the menu\n  // as well as navigate, and it was silently dropped.\n  const isLink = Boolean(href || As);\n  const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n  const tagProps = isLink\n    ? { ...(href ? { href } : {}), onClick }\n    : { type: \"button\" as const, onClick };\n\n  if (isBottomBar) {\n    return (\n      <Tag\n        {...tagProps}\n        {...rest}\n        data-react-fancy-mobile-menu-item=\"\"\n        data-active={active || undefined}\n        aria-current={active ? \"page\" : undefined}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          \"flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 text-xs font-medium transition-colors\",\n          \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset\",\n          active\n            ? \"text-blue-600 dark:text-blue-400\"\n            : \"text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n      >\n        {icon && <span className=\"flex h-5 w-5 items-center justify-center\">{icon}</span>}\n        <span className=\"truncate\">{children}</span>\n        {badge && <span className=\"absolute right-1 top-0.5\">{badge}</span>}\n      </Tag>\n    );\n  }\n\n  // Flyout variant — same as a vertical menu item\n  return (\n    <Tag\n      {...tagProps}\n      {...rest}\n      data-react-fancy-mobile-menu-item=\"\"\n      data-active={active || undefined}\n      aria-current={active ? \"page\" : undefined}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        \"flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n        active\n          ? \"bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100\"\n          : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n      <span className=\"flex-1 truncate text-left\">{children}</span>\n      {badge && <span className=\"shrink-0\">{badge}</span>}\n    </Tag>\n  );\n}\n\nMobileMenuItem.displayName = \"MobileMenuItem\";\n","import { MobileMenuFlyout } from \"./MobileMenuFlyout\";\nimport { MobileMenuBottomBar } from \"./MobileMenuBottomBar\";\nimport { MobileMenuItem } from \"./MobileMenuItem\";\n\nexport const MobileMenu = {\n  Flyout: MobileMenuFlyout,\n  BottomBar: MobileMenuBottomBar,\n  Item: MobileMenuItem,\n};\n"]}
+{"version":3,"sources":["../src/components/MobileMenu/MobileMenu.context.ts","../src/components/MobileMenu/MobileMenuFlyout.tsx","../src/components/MobileMenu/MobileMenuBottomBar.tsx","../src/components/MobileMenu/MobileMenuItem.tsx","../src/components/MobileMenu/MobileMenu.tsx"],"names":["createContext","useContext","useAnimation","useEscapeKey","useEffect","Portal","jsx","jsxs","cn","X"],"mappings":"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","file":"chunk-25UPDBI6.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MobileMenuContextValue } from \"./MobileMenu.types\";\n\nexport const MobileMenuContext = createContext<MobileMenuContextValue | null>(null);\n\nexport function useMobileMenu(): MobileMenuContextValue {\n  const ctx = useContext(MobileMenuContext);\n  if (!ctx) {\n    throw new Error(\"useMobileMenu must be used within a <MobileMenu> component\");\n  }\n  return ctx;\n}\n","import { useEffect } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useEscapeKey } from \"../../hooks\";\nimport { useAnimation } from \"../../hooks\";\nimport { Portal } from \"../Portal\";\nimport { MobileMenuContext } from \"./MobileMenu.context\";\nimport type { MobileMenuFlyoutProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuFlyout({\n  children,\n  open,\n  onClose,\n  side = \"left\",\n  title,\n  className,\n}: MobileMenuFlyoutProps) {\n  const isLeft = side === \"left\";\n\n  const { mounted, className: animClass, ref } = useAnimation({\n    open,\n    enterClass: isLeft ? \"fancy-slide-in-left\" : \"fancy-slide-in-right\",\n    exitClass: isLeft ? \"fancy-slide-out-left\" : \"fancy-slide-out-right\",\n  });\n\n  useEscapeKey(onClose, open);\n\n  // Lock body scroll\n  useEffect(() => {\n    if (open) {\n      const prev = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n      return () => {\n        document.body.style.overflow = prev;\n      };\n    }\n  }, [open]);\n\n  if (!mounted) return null;\n\n  return (\n    <Portal>\n      <MobileMenuContext.Provider value={{ variant: \"flyout\" }}>\n        <div data-react-fancy-mobile-menu-flyout=\"\" className=\"fixed inset-0 z-50\">\n          {/* Backdrop */}\n          <div\n            className={cn(\n              \"absolute inset-0 bg-black/40 transition-opacity\",\n              open ? \"opacity-100\" : \"opacity-0\",\n            )}\n            onClick={onClose}\n          />\n\n          {/* Panel */}\n          <div\n            ref={ref as React.RefObject<HTMLDivElement>}\n            className={cn(\n              \"absolute top-0 flex h-full w-72 max-w-[80vw] flex-col bg-white shadow-xl dark:bg-zinc-900\",\n              isLeft ? \"left-0\" : \"right-0\",\n              animClass,\n              className,\n            )}\n          >\n            {/* Header */}\n            <div className=\"flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700\">\n              {title && (\n                <span className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n                  {title}\n                </span>\n              )}\n              {!title && <span />}\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"flex h-8 w-8 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300\"\n              >\n                <X className=\"h-4 w-4\" />\n              </button>\n            </div>\n\n            {/* Content */}\n            <div className=\"flex-1 overflow-y-auto p-2\">\n              {children}\n            </div>\n          </div>\n        </div>\n      </MobileMenuContext.Provider>\n    </Portal>\n  );\n}\n\nMobileMenuFlyout.displayName = \"MobileMenuFlyout\";\n","import { cn } from \"../../utils/cn\";\nimport { MobileMenuContext } from \"./MobileMenu.context\";\nimport type { MobileMenuBottomBarProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuBottomBar({ children, className }: MobileMenuBottomBarProps) {\n  return (\n    <MobileMenuContext.Provider value={{ variant: \"bottom-bar\" }}>\n      <nav\n        data-react-fancy-mobile-menu-bottom-bar=\"\"\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-40 flex items-stretch border-t border-zinc-200 bg-white/95 backdrop-blur-sm dark:border-zinc-700 dark:bg-zinc-900/95\",\n          \"pb-[env(safe-area-inset-bottom)]\",\n          className,\n        )}\n      >\n        {children}\n      </nav>\n    </MobileMenuContext.Provider>\n  );\n}\n\nMobileMenuBottomBar.displayName = \"MobileMenuBottomBar\";\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMobileMenu } from \"./MobileMenu.context\";\nimport type { MobileMenuItemProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuItem({\n  children,\n  href,\n  as: As,\n  icon,\n  active = false,\n  disabled = false,\n  badge,\n  onClick,\n  className,\n  ...rest\n}: MobileMenuItemProps) {\n  const { variant } = useMobileMenu();\n  const isBottomBar = variant === \"bottom-bar\";\n\n  // See NavigableProps: link mode engages on `href` OR `as`. Keeping `onClick`\n  // in link mode matters most here — a mobile item usually has to close the menu\n  // as well as navigate, and it was silently dropped.\n  const isLink = Boolean(href || As);\n  const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n  const tagProps = isLink\n    ? { ...(href ? { href } : {}), onClick }\n    : { type: \"button\" as const, onClick };\n\n  if (isBottomBar) {\n    return (\n      <Tag\n        {...tagProps}\n        {...rest}\n        data-react-fancy-mobile-menu-item=\"\"\n        data-active={active || undefined}\n        aria-current={active ? \"page\" : undefined}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          \"flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 text-xs font-medium transition-colors\",\n          \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset\",\n          active\n            ? \"text-blue-600 dark:text-blue-400\"\n            : \"text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n      >\n        {icon && <span className=\"flex h-5 w-5 items-center justify-center\">{icon}</span>}\n        <span className=\"truncate\">{children}</span>\n        {badge && <span className=\"absolute right-1 top-0.5\">{badge}</span>}\n      </Tag>\n    );\n  }\n\n  // Flyout variant — same as a vertical menu item\n  return (\n    <Tag\n      {...tagProps}\n      {...rest}\n      data-react-fancy-mobile-menu-item=\"\"\n      data-active={active || undefined}\n      aria-current={active ? \"page\" : undefined}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        \"flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n        active\n          ? \"bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100\"\n          : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n      <span className=\"flex-1 truncate text-left\">{children}</span>\n      {badge && <span className=\"shrink-0\">{badge}</span>}\n    </Tag>\n  );\n}\n\nMobileMenuItem.displayName = \"MobileMenuItem\";\n","import { MobileMenuFlyout } from \"./MobileMenuFlyout\";\nimport { MobileMenuBottomBar } from \"./MobileMenuBottomBar\";\nimport { MobileMenuItem } from \"./MobileMenuItem\";\n\nexport const MobileMenu = {\n  Flyout: MobileMenuFlyout,\n  BottomBar: MobileMenuBottomBar,\n  Item: MobileMenuItem,\n};\n"]}

package/dist/chunk-3K2CEAI7.js

@@ -0,0 +1,78 @@
+import { useState, useRef, useEffect } from 'react';
+
+// src/hooks/use-animation.ts
+var FALLBACK_GRACE_MS = 50;
+function toMs(list) {
+  if (!list) return [0];
+  return list.split(",").map((part) => {
+    const v = part.trim();
+    const n = parseFloat(v);
+    if (Number.isNaN(n)) return 0;
+    return v.endsWith("ms") ? n : n * 1e3;
+  });
+}
+function longest(durations, delays) {
+  const d = toMs(durations);
+  const l = toMs(delays);
+  let max = 0;
+  for (let i = 0; i < Math.max(d.length, l.length); i++) {
+    max = Math.max(max, d[i % d.length] + l[i % l.length]);
+  }
+  return max;
+}
+function exitDuration(el) {
+  if (typeof el.getAnimations === "function" && el.getAnimations().length === 0) return 0;
+  if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return 0;
+  const style = window.getComputedStyle(el);
+  const name = style.animationName;
+  const animation = name && name !== "none" ? longest(style.animationDuration, style.animationDelay) : 0;
+  const transition = longest(style.transitionDuration, style.transitionDelay);
+  return Math.max(animation, transition);
+}
+function useAnimation({
+  open,
+  enterClass,
+  exitClass
+}) {
+  const [mounted, setMounted] = useState(open);
+  const [animClass, setAnimClass] = useState(open ? enterClass : "");
+  const ref = useRef(null);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      setAnimClass(enterClass);
+    } else if (mounted) {
+      setAnimClass(exitClass);
+    }
+  }, [open, enterClass, exitClass, mounted]);
+  const exiting = !open && mounted && animClass === exitClass;
+  useEffect(() => {
+    if (!exiting) return;
+    const finish = () => {
+      setMounted(false);
+      setAnimClass("");
+    };
+    const el = ref.current;
+    const wait = el ? exitDuration(el) : 0;
+    if (!el || wait <= 0) {
+      finish();
+      return;
+    }
+    const onEnd = (e) => {
+      if (e.target === el) finish();
+    };
+    el.addEventListener("animationend", onEnd);
+    el.addEventListener("transitionend", onEnd);
+    const timer = setTimeout(finish, wait + FALLBACK_GRACE_MS);
+    return () => {
+      el.removeEventListener("animationend", onEnd);
+      el.removeEventListener("transitionend", onEnd);
+      clearTimeout(timer);
+    };
+  }, [exiting]);
+  return { mounted, className: animClass, ref };
+}
+
+export { useAnimation };
+//# sourceMappingURL=chunk-3K2CEAI7.js.map
+//# sourceMappingURL=chunk-3K2CEAI7.js.map

package/dist/chunk-3K2CEAI7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-animation.ts"],"names":[],"mappings":"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","file":"chunk-3K2CEAI7.js","sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\ninterface UseAnimationOptions {\n  open: boolean;\n  enterClass: string;\n  exitClass: string;\n}\n\ninterface UseAnimationReturn {\n  mounted: boolean;\n  className: string;\n  ref: React.RefObject<HTMLElement | null>;\n}\n\n/** Slack on top of the measured exit, so the fallback never cuts a real animation short. */\nconst FALLBACK_GRACE_MS = 50;\n\n/** `\"0.2s, 150ms\"` -> `[200, 150]`. Unparseable entries count as 0. */\nfunction toMs(list: string | undefined): number[] {\n  if (!list) return [0];\n  return list.split(\",\").map((part) => {\n    const v = part.trim();\n    const n = parseFloat(v);\n    if (Number.isNaN(n)) return 0;\n    return v.endsWith(\"ms\") ? n : n * 1000;\n  });\n}\n\n/** The longest duration + delay pair, CSS-style (the shorter list repeats). */\nfunction longest(durations: string | undefined, delays: string | undefined): number {\n  const d = toMs(durations);\n  const l = toMs(delays);\n  let max = 0;\n  for (let i = 0; i < Math.max(d.length, l.length); i++) {\n    max = Math.max(max, d[i % d.length]! + l[i % l.length]!);\n  }\n  return max;\n}\n\n/**\n * How long the element's exit will take, in ms. 0 means nothing is running, so\n * there is no `animationend` to wait for.\n *\n * `getAnimations()` is asked first where it exists: it is the engine's own answer\n * and covers transitions too. Where it does not (jsdom, older engines) the\n * computed style is read instead — an `animation-name` of `none` (or none at all,\n * which is what an app without Fancy's stylesheet gets) means no animation.\n */\nfunction exitDuration(el: HTMLElement): number {\n  if (typeof el.getAnimations === \"function\" && el.getAnimations().length === 0) return 0;\n  if (typeof window === \"undefined\" || typeof window.getComputedStyle !== \"function\") return 0;\n\n  const style = window.getComputedStyle(el);\n  const name = style.animationName;\n  const animation =\n    name && name !== \"none\" ? longest(style.animationDuration, style.animationDelay) : 0;\n  const transition = longest(style.transitionDuration, style.transitionDelay);\n\n  return Math.max(animation, transition);\n}\n\n/**\n * Mount on open, play `exitClass` on close, then unmount.\n *\n * The unmount used to happen ONLY on `animationend`. With no animation running —\n * an app that does not load Fancy's stylesheet, jsdom, an `exitClass` that\n * resolves to nothing — the event never fires and the closed panel stayed in the\n * DOM forever. So the exit is measured: nothing running unmounts at once,\n * something running unmounts on its own `animationend` or after its measured\n * duration, whichever comes first.\n */\nexport function useAnimation({\n  open,\n  enterClass,\n  exitClass,\n}: UseAnimationOptions): UseAnimationReturn {\n  const [mounted, setMounted] = useState(open);\n  const [animClass, setAnimClass] = useState(open ? enterClass : \"\");\n  const ref = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      setMounted(true);\n      setAnimClass(enterClass);\n    } else if (mounted) {\n      setAnimClass(exitClass);\n    }\n  }, [open, enterClass, exitClass, mounted]);\n\n  // Runs once the exit class is on the element, so the measurement sees it.\n  const exiting = !open && mounted && animClass === exitClass;\n\n  useEffect(() => {\n    if (!exiting) return;\n\n    const finish = () => {\n      setMounted(false);\n      setAnimClass(\"\");\n    };\n\n    const el = ref.current;\n    const wait = el ? exitDuration(el) : 0;\n    if (!el || wait <= 0) {\n      finish();\n      return;\n    }\n\n    // Only the element's OWN animation: a child's `animationend` bubbles here\n    // too, and must not cut the exit short.\n    const onEnd = (e: Event) => {\n      if (e.target === el) finish();\n    };\n    el.addEventListener(\"animationend\", onEnd);\n    el.addEventListener(\"transitionend\", onEnd);\n    const timer = setTimeout(finish, wait + FALLBACK_GRACE_MS);\n\n    return () => {\n      el.removeEventListener(\"animationend\", onEnd);\n      el.removeEventListener(\"transitionend\", onEnd);\n      clearTimeout(timer);\n    };\n  }, [exiting]);\n\n  return { mounted, className: animClass, ref };\n}\n"]}

package/dist/{chunk-L637KPEA.js → chunk-4NBM3LXN.js}

@@ -1,4 +1,4 @@
-import { useInlinePaste, withSeparators, endsOf, InlinePasteEditor, PastedFilesInput } from './chunk-KYZNCVRD.js';
+import { useInlinePaste, withSeparators, endsOf, InlinePasteEditor, PastedFilesInput } from './chunk-FYKOLKQZ.js';
 import { useControllableState } from './chunk-EDYAXGUM.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { forwardRef, useRef, useMemo, useCallback } from 'react';
@@ -231,5 +231,5 @@ ${text}` : text);
 Composer.displayName = "Composer";
 
 export { Composer };
-//# sourceMappingURL=chunk-L637KPEA.js.map
-//# sourceMappingURL=chunk-L637KPEA.js.map
+//# sourceMappingURL=chunk-4NBM3LXN.js.map
+//# sourceMappingURL=chunk-4NBM3LXN.js.map

package/dist/{chunk-L637KPEA.js.map → chunk-4NBM3LXN.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["Composer","paste"],"mappings":"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","file":"chunk-L637KPEA.js","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport {\n  endsOf,\n  InlinePasteEditor,\n  PastedFilesInput,\n  useInlinePaste,\n  withSeparators,\n  type HeldPaste,\n  type InlinePasteEditorHandle,\n} from \"../PastePills\";\nimport type { ComposerProps } from \"./Composer.types\";\n\n/** Characters of a held paste shown at each end of the hover preview, unless `previewChars` says otherwise. */\nconst PREVIEW_CHARS = 20;\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      pastePlacement = \"above\",\n      pasteImages = false,\n      previewChars = PREVIEW_CHARS,\n      renderPastePreview,\n      classNames,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n      heldImages: controlledHeldImages,\n      onHeldImagesChange,\n      pasteFilesName,\n    },\n    ref,\n  ) {\n    const inline = pastePlacement === \"inline\";\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const editorRef = useRef<InlinePasteEditorHandle>(null);\n    /*\n     * The holding logic lives in `usePastePills`, wrapped by `useInlinePaste` for\n     * the inline placement — which `PromptInput` shares, so the two components\n     * cannot disagree about what a pill means. The rule that must not drift is\n     * the one below: a send with pills still closed carries the text.\n     */\n    const paste = useInlinePaste({\n      pasteThreshold,\n      pasteImages,\n      previewChars,\n      renderPastePreview,\n      classNames,\n      disabled,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n      heldImages: controlledHeldImages,\n      onHeldImagesChange,\n      editorRef,\n    });\n    const pills = paste.pills;\n    const heldPastes = paste.heldPastes;\n    const pastedFiles = useMemo(\n      () => (inline && pasteImages ? paste.imagesIn(value).map((i) => i.file) : []),\n      [inline, pasteImages, paste, value],\n    );\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    const handleInlineChange = useCallback(\n      (next: string) => {\n        setValue(next);\n        paste.prune(next);\n      },\n      [setValue, paste],\n    );\n\n    /** Everything the person believes they are sending, in the order they built it. */\n    const composeOutgoing = useCallback(() => {\n      if (inline) return paste.expand(value);\n\n      return [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join(\"\\n\\n\");\n    }, [inline, value, heldPastes, paste]);\n\n    const hasContent = value.trim().length > 0 || (!inline && heldPastes.length > 0);\n\n    const focusInput = useCallback(() => {\n      if (inline) editorRef.current?.focus();\n      else textareaRef.current?.focus();\n    }, [inline]);\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       * Above the input, held pastes go out in arrival order after what was typed,\n       * because people type the question BEFORE pasting the thing it is about.\n       * Inline, every pill goes out exactly where it sits.\n       */\n      const images = inline ? paste.imagesIn(value) : [];\n\n      onSubmit?.(composeOutgoing(), { images });\n      setValue(\"\");\n      paste.clear();\n      focusInput();\n    }, [hasContent, disabled, value, inline, paste, onSubmit, composeOutgoing, setValue, focusInput]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n    };\n\n    /** Above the input: click a pill to dump it in, APPENDED to what is already typed. */\n    const insertPaste = useCallback(\n      (held: 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(held.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        {!inline && 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={cn(\n                    \"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                    classNames?.pill,\n                    classNames?.textPill,\n                  )}\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={cn(\n                    \"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                    classNames?.remove,\n                  )}\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={cn(\n                    \"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                    classNames?.preview,\n                  )}\n                >\n                  {renderPastePreview?.({ kind: \"text\", paste }) ??\n                    endsOf(paste.text, previewChars)}\n                </span>\n              </span>\n            ))}\n          </div>\n        )}\n\n        {inline ? (\n          <>\n            <InlinePasteEditor\n              ref={editorRef}\n              value={value}\n              known={paste.known}\n              onChange={handleInlineChange}\n              onSubmit={handleSubmit}\n              onPaste={paste.decidePaste}\n              onHostsChange={paste.onHostsChange}\n              placeholder={placeholder}\n              disabled={disabled}\n              className={classNames?.input}\n            />\n            {paste.portals}\n            {pasteImages && pasteFilesName && (\n              <PastedFilesInput name={pasteFilesName} files={pastedFiles} />\n            )}\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={cn(\n              \"w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400\",\n              classNames?.input,\n            )}\n          />\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"]}
+{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["Composer","paste"],"mappings":"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","file":"chunk-4NBM3LXN.js","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport {\n  endsOf,\n  InlinePasteEditor,\n  PastedFilesInput,\n  useInlinePaste,\n  withSeparators,\n  type HeldPaste,\n  type InlinePasteEditorHandle,\n} from \"../PastePills\";\nimport type { ComposerProps } from \"./Composer.types\";\n\n/** Characters of a held paste shown at each end of the hover preview, unless `previewChars` says otherwise. */\nconst PREVIEW_CHARS = 20;\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      pastePlacement = \"above\",\n      pasteImages = false,\n      previewChars = PREVIEW_CHARS,\n      renderPastePreview,\n      classNames,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n      heldImages: controlledHeldImages,\n      onHeldImagesChange,\n      pasteFilesName,\n    },\n    ref,\n  ) {\n    const inline = pastePlacement === \"inline\";\n    const [value, setValue] = useControllableState(\n      controlledValue,\n      defaultValue,\n      onChange,\n    );\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const editorRef = useRef<InlinePasteEditorHandle>(null);\n    /*\n     * The holding logic lives in `usePastePills`, wrapped by `useInlinePaste` for\n     * the inline placement — which `PromptInput` shares, so the two components\n     * cannot disagree about what a pill means. The rule that must not drift is\n     * the one below: a send with pills still closed carries the text.\n     */\n    const paste = useInlinePaste({\n      pasteThreshold,\n      pasteImages,\n      previewChars,\n      renderPastePreview,\n      classNames,\n      disabled,\n      heldPastes: controlledHeldPastes,\n      onHeldPastesChange,\n      heldImages: controlledHeldImages,\n      onHeldImagesChange,\n      editorRef,\n    });\n    const pills = paste.pills;\n    const heldPastes = paste.heldPastes;\n    const pastedFiles = useMemo(\n      () => (inline && pasteImages ? paste.imagesIn(value).map((i) => i.file) : []),\n      [inline, pasteImages, paste, value],\n    );\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    const handleInlineChange = useCallback(\n      (next: string) => {\n        setValue(next);\n        paste.prune(next);\n      },\n      [setValue, paste],\n    );\n\n    /** Everything the person believes they are sending, in the order they built it. */\n    const composeOutgoing = useCallback(() => {\n      if (inline) return paste.expand(value);\n\n      return [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join(\"\\n\\n\");\n    }, [inline, value, heldPastes, paste]);\n\n    const hasContent = value.trim().length > 0 || (!inline && heldPastes.length > 0);\n\n    const focusInput = useCallback(() => {\n      if (inline) editorRef.current?.focus();\n      else textareaRef.current?.focus();\n    }, [inline]);\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       * Above the input, held pastes go out in arrival order after what was typed,\n       * because people type the question BEFORE pasting the thing it is about.\n       * Inline, every pill goes out exactly where it sits.\n       */\n      const images = inline ? paste.imagesIn(value) : [];\n\n      onSubmit?.(composeOutgoing(), { images });\n      setValue(\"\");\n      paste.clear();\n      focusInput();\n    }, [hasContent, disabled, value, inline, paste, onSubmit, composeOutgoing, setValue, focusInput]);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n    };\n\n    /** Above the input: click a pill to dump it in, APPENDED to what is already typed. */\n    const insertPaste = useCallback(\n      (held: 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(held.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        {!inline && 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={cn(\n                    \"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                    classNames?.pill,\n                    classNames?.textPill,\n                  )}\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={cn(\n                    \"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                    classNames?.remove,\n                  )}\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={cn(\n                    \"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                    classNames?.preview,\n                  )}\n                >\n                  {renderPastePreview?.({ kind: \"text\", paste }) ??\n                    endsOf(paste.text, previewChars)}\n                </span>\n              </span>\n            ))}\n          </div>\n        )}\n\n        {inline ? (\n          <>\n            <InlinePasteEditor\n              ref={editorRef}\n              value={value}\n              known={paste.known}\n              onChange={handleInlineChange}\n              onSubmit={handleSubmit}\n              onPaste={paste.decidePaste}\n              onHostsChange={paste.onHostsChange}\n              placeholder={placeholder}\n              disabled={disabled}\n              className={classNames?.input}\n            />\n            {paste.portals}\n            {pasteImages && pasteFilesName && (\n              <PastedFilesInput name={pasteFilesName} files={pastedFiles} />\n            )}\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={cn(\n              \"w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400\",\n              classNames?.input,\n            )}\n          />\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"]}