@particle-academy/react-fancy 5.50.0 → 5.51.1

package/dist/index.d.cts

@@ -91,7 +91,7 @@ export { ReasonTag, ReasonTagProps, ReasonTagSource, ReasonTagTheme } from './re
 export { MoodMeter, MoodMeterProps } from './mood-meter.cjs';
 export { ChatDrawer, ChatDrawerProps, ChatDrawerTab } from './chat-drawer.cjs';
 export { ControlledAdapterHandle, InputTag, InputTagAdapter, InputTagAdapterState, InputTagProps, InputTagTrigger, InputTagTriggers, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter } from './input-tag.cjs';
-export { MagicWand, MagicWandAction, MagicWandAppearance, MagicWandProps, MagicWandSelection } from './magic-wand.cjs';
+export { MagicWand, MagicWandAction, MagicWandAppearance, MagicWandProps, MagicWandRect, MagicWandSelection, MagicWandTarget, MagicWandTargetAdapter } from './magic-wand.cjs';
 export { ImageViewer } from './image-viewer.cjs';
 export { I as ImageViewerProps, a as ImageViewerViewport } from './ImageViewer.types-CtqaA6KV.cjs';
 export { VideoViewer } from './video-viewer.cjs';
@@ -270,6 +270,16 @@ interface UseAnimationReturn {
     className: string;
     ref: React.RefObject<HTMLElement | null>;
 }
+/**
+ * Mount on open, play `exitClass` on close, then unmount.
+ *
+ * The unmount used to happen ONLY on `animationend`. With no animation running —
+ * an app that does not load Fancy's stylesheet, jsdom, an `exitClass` that
+ * resolves to nothing — the event never fires and the closed panel stayed in the
+ * DOM forever. So the exit is measured: nothing running unmounts at once,
+ * something running unmounts on its own `animationend` or after its measured
+ * duration, whichever comes first.
+ */
 declare function useAnimation({ open, enterClass, exitClass, }: UseAnimationOptions): UseAnimationReturn;
 
 declare function useId(prefix?: string): string;

package/dist/index.d.ts

@@ -91,7 +91,7 @@ export { ReasonTag, ReasonTagProps, ReasonTagSource, ReasonTagTheme } from './re
 export { MoodMeter, MoodMeterProps } from './mood-meter.js';
 export { ChatDrawer, ChatDrawerProps, ChatDrawerTab } from './chat-drawer.js';
 export { ControlledAdapterHandle, InputTag, InputTagAdapter, InputTagAdapterState, InputTagProps, InputTagTrigger, InputTagTriggers, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter } from './input-tag.js';
-export { MagicWand, MagicWandAction, MagicWandAppearance, MagicWandProps, MagicWandSelection } from './magic-wand.js';
+export { MagicWand, MagicWandAction, MagicWandAppearance, MagicWandProps, MagicWandRect, MagicWandSelection, MagicWandTarget, MagicWandTargetAdapter } from './magic-wand.js';
 export { ImageViewer } from './image-viewer.js';
 export { I as ImageViewerProps, a as ImageViewerViewport } from './ImageViewer.types-BDTxBYEN.js';
 export { VideoViewer } from './video-viewer.js';
@@ -270,6 +270,16 @@ interface UseAnimationReturn {
     className: string;
     ref: React.RefObject<HTMLElement | null>;
 }
+/**
+ * Mount on open, play `exitClass` on close, then unmount.
+ *
+ * The unmount used to happen ONLY on `animationend`. With no animation running —
+ * an app that does not load Fancy's stylesheet, jsdom, an `exitClass` that
+ * resolves to nothing — the event never fires and the closed panel stayed in the
+ * DOM forever. So the exit is measured: nothing running unmounts at once,
+ * something running unmounts on its own `animationend` or after its measured
+ * duration, whichever comes first.
+ */
 declare function useAnimation({ open, enterClass, exitClass, }: UseAnimationOptions): UseAnimationReturn;
 
 declare function useId(prefix?: string): string;

package/dist/index.js

@@ -18,7 +18,7 @@ import './chunk-TMR56BBE.js';
 export { TimeGrid } from './chunk-7CN7IHES.js';
 export { TimePicker } from './chunk-OTCLBINT.js';
 export { Timeline } from './chunk-7JDVCQXD.js';
-export { Toast, useToast } from './chunk-3AQLEMH7.js';
+export { Toast, useToast } from './chunk-AOFDFBRV.js';
 export { ReasonTag } from './chunk-UDEEPMQ4.js';
 export { Section } from './chunk-SLJD25VV.js';
 export { Separator } from './chunk-ZLWCZV7R.js';
@@ -28,27 +28,27 @@ export { Stat, StatBand } from './chunk-OFHO5SXA.js';
 export { StatList } from './chunk-ZKFFHIEW.js';
 export { StickyNote } from './chunk-CCG2L5EH.js';
 export { Pillbox } from './chunk-FSRPZYZZ.js';
-export { Popover, usePopover } from './chunk-6KXAFP2T.js';
 export { Profile } from './chunk-KQQA7JBC.js';
 export { Progress } from './chunk-P7PKK5BO.js';
-export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel } from './chunk-XBC3M4BL.js';
+export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel } from './chunk-MGE5KOVA.js';
+export { Tooltip } from './chunk-CF5KRDN4.js';
 export { PullQuote } from './chunk-NDUEPDNS.js';
 export { QrCode, encodeQr, selectMode } from './chunk-RLE5WYY6.js';
-export { MobileMenu, useMobileMenu } from './chunk-P7F32HIH.js';
-export { Modal, useModal } from './chunk-NYDR2VSA.js';
+export { MobileMenu, useMobileMenu } from './chunk-N6OZZAOT.js';
+export { Modal, useModal } from './chunk-TNYWQ6EQ.js';
 export { MoodMeter } from './chunk-32AJIHBZ.js';
 export { Navbar, useNavbar } from './chunk-IWXP2YUP.js';
 export { OtpInput } from './chunk-XDJSFGXW.js';
 export { Pagination } from './chunk-YF2EHBTV.js';
 export { InputTag, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter } from './chunk-Q7O5TLVU.js';
-export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-7MJ7VEKE.js';
-export { Input } from './chunk-EEWRLFTI.js';
+export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-IAUJKZAQ.js';
+export { Input } from './chunk-XB6YHUKW.js';
 export { Select } from './chunk-IECPLOSZ.js';
 export { Switch } from './chunk-NBAHXZHJ.js';
 export { DatePicker } from './chunk-OC75GWX5.js';
 export { Kanban, useKanban } from './chunk-O6E2WC3J.js';
 export { Kbd } from './chunk-TJJ63UJV.js';
-export { MagicWand } from './chunk-FU6R6BZ4.js';
+export { MagicWand } from './chunk-GAB2QXHH.js';
 export { Textarea } from './chunk-DEFGT75G.js';
 import './chunk-PWEZCMIY.js';
 export { DisplayValue } from './chunk-KKWNKBKR.js';
@@ -67,9 +67,9 @@ export { ImageViewer } from './chunk-ASS6EWNI.js';
 export { FauxClient } from './chunk-XZUGREDI.js';
 export { IndexList } from './chunk-UKUNWGL5.js';
 import './chunk-AUTW5O4W.js';
-export { ContextMenu, useContextMenu } from './chunk-SWBF2BXA.js';
-export { Drawer, useDrawer } from './chunk-VFIVF5YO.js';
-export { Dropdown, useDropdown } from './chunk-YQJWD53X.js';
+export { ContextMenu, useContextMenu } from './chunk-TT3K5D6J.js';
+export { Drawer, useDrawer } from './chunk-PHDIQ4VC.js';
+export { Dropdown, useDropdown } from './chunk-ENYHLZ2X.js';
 export { Editor, useEditor } from './chunk-PCTZNK2Z.js';
 export { THEME_STORAGE_KEY, getThemePreference, initTheme, resolveTheme, setThemePreference, subscribeTheme, useId, useNodeRegistry, useTheme } from './chunk-FWCREAIT.js';
 export { usePanZoom } from './chunk-CPY7NHXM.js';
@@ -78,18 +78,18 @@ export { Emoji } from './chunk-YTMQ2K64.js';
 export { EmojiSelect } from './chunk-VYHZEQIG.js';
 export { Eyebrow } from './chunk-Y4UPKJN5.js';
 export { Carousel, useCarousel } from './chunk-BMTTSBHF.js';
-export { Chart } from './chunk-CK6LRROH.js';
+export { Chart } from './chunk-M5ACSJJ4.js';
 export { ChatDrawer } from './chunk-ZI7JP3TN.js';
 import './chunk-TJ66S5K6.js';
 export { CodeView } from './chunk-FBWUXSKH.js';
 import './chunk-J324MF75.js';
 export { ColorPicker } from './chunk-F2GAZZVS.js';
-export { Command, useCommand } from './chunk-D354R6T6.js';
+export { Command, useCommand } from './chunk-ZY4CVNNZ.js';
 export { useFocusTrap } from './chunk-5U2DZ7AV.js';
-export { useAnimation } from './chunk-CHADHN6M.js';
-export { Composer } from './chunk-L637KPEA.js';
-export { InlinePasteEditor, PastedFilesInput, pasteMarker, useInlinePaste, usePastePills } from './chunk-KYZNCVRD.js';
-export { Tooltip } from './chunk-CF5KRDN4.js';
+export { useAnimation } from './chunk-3K2CEAI7.js';
+export { Composer } from './chunk-4NBM3LXN.js';
+export { InlinePasteEditor, PastedFilesInput, pasteMarker, useInlinePaste, usePastePills } from './chunk-FYKOLKQZ.js';
+export { Popover, usePopover } from './chunk-6KXAFP2T.js';
 export { Container } from './chunk-VKMPVFQK.js';
 export { Avatar } from './chunk-CRR3AMJ4.js';
 import './chunk-IQ4KQJAO.js';

package/dist/input.cjs

@@ -1,17 +1,19 @@
 'use strict';
 
 require('./chunk-QGPMVFZJ.cjs');
-var chunk2QIGXSSZ_cjs = require('./chunk-2QIGXSSZ.cjs');
+var chunk7ZDJPHLJ_cjs = require('./chunk-7ZDJPHLJ.cjs');
 require('./chunk-7EZBMGEE.cjs');
 require('./chunk-XKDW6B7X.cjs');
 require('./chunk-BBOIFV27.cjs');
 require('./chunk-YLGTDBB2.cjs');
-require('./chunk-MSRYJETY.cjs');
-require('./chunk-X7H75WVP.cjs');
+require('./chunk-R3UG6PVX.cjs');
+require('./chunk-WKNVZUWZ.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
 require('./chunk-J2DI6RMR.cjs');
 require('./chunk-NBZC6LOB.cjs');
+require('./chunk-57FQGQJK.cjs');
+require('./chunk-RXDRYWVD.cjs');
 require('./chunk-SNHU2AI4.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
@@ -19,7 +21,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Input", {
   enumerable: true,
-  get: function () { return chunk2QIGXSSZ_cjs.Input; }
+  get: function () { return chunk7ZDJPHLJ_cjs.Input; }
 });
 //# sourceMappingURL=input.cjs.map
 //# sourceMappingURL=input.cjs.map

package/dist/input.js

@@ -1,15 +1,17 @@
 import './chunk-SHDSKHCC.js';
-export { Input } from './chunk-EEWRLFTI.js';
+export { Input } from './chunk-XB6YHUKW.js';
 import './chunk-PWEZCMIY.js';
 import './chunk-KKWNKBKR.js';
 import './chunk-5MU6X3KO.js';
 import './chunk-GFYSELJF.js';
-import './chunk-KYZNCVRD.js';
-import './chunk-CF5KRDN4.js';
+import './chunk-FYKOLKQZ.js';
+import './chunk-6KXAFP2T.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';
 import './chunk-MQ6VGG62.js';
 import './chunk-WHEXTDPV.js';
+import './chunk-RGANGU7X.js';
+import './chunk-JXE5XID6.js';
 import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=input.js.map

package/dist/inputs.cjs

@@ -12,7 +12,7 @@ var chunk6MDZQIMZ_cjs = require('./chunk-6MDZQIMZ.cjs');
 var chunkU7PFHQBN_cjs = require('./chunk-U7PFHQBN.cjs');
 var chunkBZDXX6E3_cjs = require('./chunk-BZDXX6E3.cjs');
 require('./chunk-URTLYNZI.cjs');
-var chunk2QIGXSSZ_cjs = require('./chunk-2QIGXSSZ.cjs');
+var chunk7ZDJPHLJ_cjs = require('./chunk-7ZDJPHLJ.cjs');
 var chunkAR3JOPGT_cjs = require('./chunk-AR3JOPGT.cjs');
 var chunkY52NXM73_cjs = require('./chunk-Y52NXM73.cjs');
 var chunkBZZDHDMK_cjs = require('./chunk-BZZDHDMK.cjs');
@@ -21,8 +21,8 @@ require('./chunk-7EZBMGEE.cjs');
 var chunkXKDW6B7X_cjs = require('./chunk-XKDW6B7X.cjs');
 var chunkBBOIFV27_cjs = require('./chunk-BBOIFV27.cjs');
 require('./chunk-YLGTDBB2.cjs');
-require('./chunk-MSRYJETY.cjs');
-require('./chunk-X7H75WVP.cjs');
+require('./chunk-R3UG6PVX.cjs');
+require('./chunk-WKNVZUWZ.cjs');
 var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
 var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
 require('./chunk-J2DI6RMR.cjs');
@@ -64,7 +64,7 @@ Object.defineProperty(exports, "CheckboxGroup", {
 });
 Object.defineProperty(exports, "Input", {
   enumerable: true,
-  get: function () { return chunk2QIGXSSZ_cjs.Input; }
+  get: function () { return chunk7ZDJPHLJ_cjs.Input; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,

package/dist/inputs.js

@@ -10,7 +10,7 @@ export { Form, FormProvider } from './chunk-PQWQ5K6J.js';
 export { Checkbox } from './chunk-4HRD4S25.js';
 export { CheckboxGroup } from './chunk-FNJDMGJ3.js';
 import './chunk-V4EARA4F.js';
-export { Input } from './chunk-EEWRLFTI.js';
+export { Input } from './chunk-XB6YHUKW.js';
 export { Select } from './chunk-IECPLOSZ.js';
 export { Switch } from './chunk-NBAHXZHJ.js';
 export { DatePicker } from './chunk-OC75GWX5.js';
@@ -19,8 +19,8 @@ import './chunk-PWEZCMIY.js';
 export { DisplayValue } from './chunk-KKWNKBKR.js';
 export { Field } from './chunk-5MU6X3KO.js';
 import './chunk-GFYSELJF.js';
-import './chunk-KYZNCVRD.js';
-import './chunk-CF5KRDN4.js';
+import './chunk-FYKOLKQZ.js';
+import './chunk-6KXAFP2T.js';
 export { useInlineEdit } from './chunk-OL53XYHF.js';
 export { FieldModeContext, useFieldMode } from './chunk-NRXK42LO.js';
 import './chunk-MQ6VGG62.js';

package/dist/json-editor.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkVWBKFQQN_cjs = require('./chunk-VWBKFQQN.cjs');
-require('./chunk-2QIGXSSZ.cjs');
+var chunkATANWEXA_cjs = require('./chunk-ATANWEXA.cjs');
+require('./chunk-7ZDJPHLJ.cjs');
 require('./chunk-AR3JOPGT.cjs');
 require('./chunk-Y52NXM73.cjs');
 require('./chunk-BZZDHDMK.cjs');
@@ -11,8 +11,8 @@ require('./chunk-XKDW6B7X.cjs');
 require('./chunk-BBOIFV27.cjs');
 require('./chunk-YLGTDBB2.cjs');
 require('./chunk-BVRPDMB7.cjs');
-require('./chunk-MSRYJETY.cjs');
-require('./chunk-X7H75WVP.cjs');
+require('./chunk-R3UG6PVX.cjs');
+require('./chunk-WKNVZUWZ.cjs');
 require('./chunk-MOU6O324.cjs');
 require('./chunk-FWA4PCW7.cjs');
 require('./chunk-X2FC7ODX.cjs');
@@ -33,47 +33,47 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "JsonEditor", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.JsonEditor; }
+  get: function () { return chunkATANWEXA_cjs.JsonEditor; }
 });
 Object.defineProperty(exports, "applyJsonEdit", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.applyJsonEdit; }
+  get: function () { return chunkATANWEXA_cjs.applyJsonEdit; }
 });
 Object.defineProperty(exports, "describeEdit", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.describeEdit; }
+  get: function () { return chunkATANWEXA_cjs.describeEdit; }
 });
 Object.defineProperty(exports, "findJsonConflicts", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.findJsonConflicts; }
+  get: function () { return chunkATANWEXA_cjs.findJsonConflicts; }
 });
 Object.defineProperty(exports, "getAtPath", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.getAtPath; }
+  get: function () { return chunkATANWEXA_cjs.getAtPath; }
 });
 Object.defineProperty(exports, "inferType", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.inferType; }
+  get: function () { return chunkATANWEXA_cjs.inferType; }
 });
 Object.defineProperty(exports, "parseKeyMap", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.parseKeyMap; }
+  get: function () { return chunkATANWEXA_cjs.parseKeyMap; }
 });
 Object.defineProperty(exports, "parsePath", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.parsePath; }
+  get: function () { return chunkATANWEXA_cjs.parsePath; }
 });
 Object.defineProperty(exports, "pathToString", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.pathToString; }
+  get: function () { return chunkATANWEXA_cjs.pathToString; }
 });
 Object.defineProperty(exports, "resolveKeyRule", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.resolveKeyRule; }
+  get: function () { return chunkATANWEXA_cjs.resolveKeyRule; }
 });
 Object.defineProperty(exports, "typeMatches", {
   enumerable: true,
-  get: function () { return chunkVWBKFQQN_cjs.typeMatches; }
+  get: function () { return chunkATANWEXA_cjs.typeMatches; }
 });
 //# sourceMappingURL=json-editor.cjs.map
 //# sourceMappingURL=json-editor.cjs.map

package/dist/json-editor.js

@@ -1,5 +1,5 @@
-export { JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-7MJ7VEKE.js';
-import './chunk-EEWRLFTI.js';
+export { JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-IAUJKZAQ.js';
+import './chunk-XB6YHUKW.js';
 import './chunk-IECPLOSZ.js';
 import './chunk-NBAHXZHJ.js';
 import './chunk-OC75GWX5.js';
@@ -9,8 +9,8 @@ import './chunk-KKWNKBKR.js';
 import './chunk-5MU6X3KO.js';
 import './chunk-GFYSELJF.js';
 import './chunk-F2GAZZVS.js';
-import './chunk-KYZNCVRD.js';
-import './chunk-CF5KRDN4.js';
+import './chunk-FYKOLKQZ.js';
+import './chunk-6KXAFP2T.js';
 import './chunk-6FCQD2KQ.js';
 import './chunk-KODD54GT.js';
 import './chunk-6TBRBN7H.js';

package/dist/magic-wand.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkNAQJF3G6_cjs = require('./chunk-NAQJF3G6.cjs');
+var chunkSAPOYAGN_cjs = require('./chunk-SAPOYAGN.cjs');
 require('./chunk-V6VFSX6V.cjs');
 require('./chunk-7EZBMGEE.cjs');
 require('./chunk-XKDW6B7X.cjs');
@@ -15,13 +15,14 @@ require('./chunk-XCZZVRBY.cjs');
 require('./chunk-QKFOJKVE.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
+require('./chunk-NBZC6LOB.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "MagicWand", {
   enumerable: true,
-  get: function () { return chunkNAQJF3G6_cjs.MagicWand; }
+  get: function () { return chunkSAPOYAGN_cjs.MagicWand; }
 });
 //# sourceMappingURL=magic-wand.cjs.map
 //# sourceMappingURL=magic-wand.cjs.map

package/dist/magic-wand.d.cts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { RefObject } from 'react';
 
 /**
  * MagicWand — selection-anchored floating toolbar for text inputs.
@@ -18,6 +19,12 @@ import * as react from 'react';
  *     ]}
  *   />
  *
+ * Pass `target` to act on a textarea, input or editor the HOST renders instead:
+ * MagicWand then renders no textarea of its own, only the floating wand.
+ *
+ *   <textarea ref={ref} value={body} onChange={(e) => setBody(e.target.value)} />
+ *   <MagicWand target={ref} value={body} onValueChange={setBody} actions={…} />
+ *
  * Two appearances: `"floating"` (default — full labels) and `"pill"`
  * (icon-only, compact). Auto-hides on click-away or scroll by default.
  */
@@ -39,24 +46,62 @@ type MagicWandAction = {
     run: (selection: string, range: MagicWandSelection) => Promise<string> | string;
 };
 type MagicWandAppearance = "pill" | "floating";
+/** A viewport rectangle, the shape `getBoundingClientRect()` returns. */
+type MagicWandRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * How MagicWand reads a selection out of an editor it does not own — a code
+ * editor, a contenteditable, anything that is not a plain textarea.
+ *
+ * Read-only on purpose. The write goes through `onValueChange`, like every other
+ * edit, so the host's `value` stays the one source of truth and the editor is
+ * updated the way it always is: from that value.
+ */
+interface MagicWandTargetAdapter {
+    /**
+     * The editor's element. MagicWand listens on it for `mouseup` / `keyup` /
+     * `select` to know the selection may have changed, and treats a click inside
+     * it as "not away" for `autoHide`.
+     */
+    element: RefObject<HTMLElement | null> | HTMLElement | null;
+    /** The selection as offsets into `value`. `null` or `start === end` hides the wand. */
+    getSelection: () => {
+        start: number;
+        end: number;
+    } | null;
+    /** Where the selection is on screen. Default: the top-centre of `element`. */
+    getSelectionRect?: () => MagicWandRect | null;
+}
+/** A host-owned textarea / input by ref, or an adapter for anything else. */
+type MagicWandTarget = RefObject<HTMLTextAreaElement | HTMLInputElement | null> | MagicWandTargetAdapter;
 interface MagicWandProps {
-    /** Controlled textarea value. */
+    /** Controlled value — of the built-in textarea, or of `target`. */
     value: string;
-    /** Called on every edit. */
+    /** Called on every edit, and with the result of an action. */
     onValueChange: (v: string) => void;
     /** Action list. */
     actions: MagicWandAction[];
+    /**
+     * Act on a textarea / input / editor the host renders, instead of rendering
+     * one. A ref to a textarea or input works as is; anything else takes a
+     * `MagicWandTargetAdapter`. `value` must still be the target's current value.
+     */
+    target?: MagicWandTarget;
     /** Visual treatment. Defaults to "floating". */
     appearance?: MagicWandAppearance;
     /** Auto-hide the wand on click-away or scroll. Defaults to true. */
     autoHide?: boolean;
-    /** Textarea rows. */
+    /** Textarea rows (built-in textarea only). */
     rows?: number;
-    /** Placeholder. */
+    /** Placeholder (built-in textarea only). */
     placeholder?: string;
     /** Called after an action runs successfully. */
     onAction?: (action: MagicWandAction, selection: MagicWandSelection, replacement: string) => void;
 }
-declare function MagicWand({ value, onValueChange, actions, appearance, autoHide, rows, placeholder, onAction, }: MagicWandProps): react.JSX.Element;
+declare function MagicWand({ value, onValueChange, actions, target, appearance, autoHide, rows, placeholder, onAction, }: MagicWandProps): react.JSX.Element | null;
 
-export { MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection };
+export { MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandRect, type MagicWandSelection, type MagicWandTarget, type MagicWandTargetAdapter };

package/dist/magic-wand.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { RefObject } from 'react';
 
 /**
  * MagicWand — selection-anchored floating toolbar for text inputs.
@@ -18,6 +19,12 @@ import * as react from 'react';
  *     ]}
  *   />
  *
+ * Pass `target` to act on a textarea, input or editor the HOST renders instead:
+ * MagicWand then renders no textarea of its own, only the floating wand.
+ *
+ *   <textarea ref={ref} value={body} onChange={(e) => setBody(e.target.value)} />
+ *   <MagicWand target={ref} value={body} onValueChange={setBody} actions={…} />
+ *
  * Two appearances: `"floating"` (default — full labels) and `"pill"`
  * (icon-only, compact). Auto-hides on click-away or scroll by default.
  */
@@ -39,24 +46,62 @@ type MagicWandAction = {
     run: (selection: string, range: MagicWandSelection) => Promise<string> | string;
 };
 type MagicWandAppearance = "pill" | "floating";
+/** A viewport rectangle, the shape `getBoundingClientRect()` returns. */
+type MagicWandRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * How MagicWand reads a selection out of an editor it does not own — a code
+ * editor, a contenteditable, anything that is not a plain textarea.
+ *
+ * Read-only on purpose. The write goes through `onValueChange`, like every other
+ * edit, so the host's `value` stays the one source of truth and the editor is
+ * updated the way it always is: from that value.
+ */
+interface MagicWandTargetAdapter {
+    /**
+     * The editor's element. MagicWand listens on it for `mouseup` / `keyup` /
+     * `select` to know the selection may have changed, and treats a click inside
+     * it as "not away" for `autoHide`.
+     */
+    element: RefObject<HTMLElement | null> | HTMLElement | null;
+    /** The selection as offsets into `value`. `null` or `start === end` hides the wand. */
+    getSelection: () => {
+        start: number;
+        end: number;
+    } | null;
+    /** Where the selection is on screen. Default: the top-centre of `element`. */
+    getSelectionRect?: () => MagicWandRect | null;
+}
+/** A host-owned textarea / input by ref, or an adapter for anything else. */
+type MagicWandTarget = RefObject<HTMLTextAreaElement | HTMLInputElement | null> | MagicWandTargetAdapter;
 interface MagicWandProps {
-    /** Controlled textarea value. */
+    /** Controlled value — of the built-in textarea, or of `target`. */
     value: string;
-    /** Called on every edit. */
+    /** Called on every edit, and with the result of an action. */
     onValueChange: (v: string) => void;
     /** Action list. */
     actions: MagicWandAction[];
+    /**
+     * Act on a textarea / input / editor the host renders, instead of rendering
+     * one. A ref to a textarea or input works as is; anything else takes a
+     * `MagicWandTargetAdapter`. `value` must still be the target's current value.
+     */
+    target?: MagicWandTarget;
     /** Visual treatment. Defaults to "floating". */
     appearance?: MagicWandAppearance;
     /** Auto-hide the wand on click-away or scroll. Defaults to true. */
     autoHide?: boolean;
-    /** Textarea rows. */
+    /** Textarea rows (built-in textarea only). */
     rows?: number;
-    /** Placeholder. */
+    /** Placeholder (built-in textarea only). */
     placeholder?: string;
     /** Called after an action runs successfully. */
     onAction?: (action: MagicWandAction, selection: MagicWandSelection, replacement: string) => void;
 }
-declare function MagicWand({ value, onValueChange, actions, appearance, autoHide, rows, placeholder, onAction, }: MagicWandProps): react.JSX.Element;
+declare function MagicWand({ value, onValueChange, actions, target, appearance, autoHide, rows, placeholder, onAction, }: MagicWandProps): react.JSX.Element | null;
 
-export { MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection };
+export { MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandRect, type MagicWandSelection, type MagicWandTarget, type MagicWandTargetAdapter };

package/dist/magic-wand.js

@@ -1,4 +1,4 @@
-export { MagicWand } from './chunk-FU6R6BZ4.js';
+export { MagicWand } from './chunk-GAB2QXHH.js';
 import './chunk-DEFGT75G.js';
 import './chunk-PWEZCMIY.js';
 import './chunk-KKWNKBKR.js';
@@ -13,6 +13,7 @@ import './chunk-45BBNJQD.js';
 import './chunk-IVRYSSM7.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';
+import './chunk-WHEXTDPV.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=magic-wand.js.map
 //# sourceMappingURL=magic-wand.js.map

package/dist/mobile-menu.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkGBGJWAXZ_cjs = require('./chunk-GBGJWAXZ.cjs');
+var chunk25UPDBI6_cjs = require('./chunk-25UPDBI6.cjs');
 require('./chunk-HPNIEYSJ.cjs');
 require('./chunk-T6YELZPJ.cjs');
 require('./chunk-TXTRTTG7.cjs');
-require('./chunk-3WGRVDQR.cjs');
+require('./chunk-FQZE5N2N.cjs');
 require('./chunk-J2DI6RMR.cjs');
 require('./chunk-NBZC6LOB.cjs');
 require('./chunk-57FQGQJK.cjs');
@@ -16,11 +16,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "MobileMenu", {
   enumerable: true,
-  get: function () { return chunkGBGJWAXZ_cjs.MobileMenu; }
+  get: function () { return chunk25UPDBI6_cjs.MobileMenu; }
 });
 Object.defineProperty(exports, "useMobileMenu", {
   enumerable: true,
-  get: function () { return chunkGBGJWAXZ_cjs.useMobileMenu; }
+  get: function () { return chunk25UPDBI6_cjs.useMobileMenu; }
 });
 //# sourceMappingURL=mobile-menu.cjs.map
 //# sourceMappingURL=mobile-menu.cjs.map

package/dist/mobile-menu.js

@@ -1,8 +1,8 @@
-export { MobileMenu, useMobileMenu } from './chunk-P7F32HIH.js';
+export { MobileMenu, useMobileMenu } from './chunk-N6OZZAOT.js';
 import './chunk-FWCREAIT.js';
 import './chunk-CPY7NHXM.js';
 import './chunk-5U2DZ7AV.js';
-import './chunk-CHADHN6M.js';
+import './chunk-3K2CEAI7.js';
 import './chunk-MQ6VGG62.js';
 import './chunk-WHEXTDPV.js';
 import './chunk-RGANGU7X.js';

package/dist/modal.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkTXCAIL5X_cjs = require('./chunk-TXCAIL5X.cjs');
+var chunkHKRB2Z6R_cjs = require('./chunk-HKRB2Z6R.cjs');
 require('./chunk-TXTRTTG7.cjs');
-require('./chunk-3WGRVDQR.cjs');
+require('./chunk-FQZE5N2N.cjs');
 require('./chunk-NBZC6LOB.cjs');
 require('./chunk-RXDRYWVD.cjs');
 require('./chunk-ZU5Q77OT.cjs');
@@ -11,11 +11,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
-  get: function () { return chunkTXCAIL5X_cjs.Modal; }
+  get: function () { return chunkHKRB2Z6R_cjs.Modal; }
 });
 Object.defineProperty(exports, "useModal", {
   enumerable: true,
-  get: function () { return chunkTXCAIL5X_cjs.useModal; }
+  get: function () { return chunkHKRB2Z6R_cjs.useModal; }
 });
 //# sourceMappingURL=modal.cjs.map
 //# sourceMappingURL=modal.cjs.map

package/dist/modal.js

@@ -1,6 +1,6 @@
-export { Modal, useModal } from './chunk-NYDR2VSA.js';
+export { Modal, useModal } from './chunk-TNYWQ6EQ.js';
 import './chunk-5U2DZ7AV.js';
-import './chunk-CHADHN6M.js';
+import './chunk-3K2CEAI7.js';
 import './chunk-WHEXTDPV.js';
 import './chunk-JXE5XID6.js';
 import './chunk-MMW2JGKZ.js';