@particle-academy/react-fancy 5.60.2 → 5.61.0

package/dist/paste-pills.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunk5JK2VDWY_cjs = require('./chunk-5JK2VDWY.cjs');
-require('./chunk-UZG6LO4Z.cjs');
+var chunkTYTENEJQ_cjs = require('./chunk-TYTENEJQ.cjs');
+require('./chunk-FU6K7XXZ.cjs');
 require('./chunk-J2DI6RMR.cjs');
-require('./chunk-NBZC6LOB.cjs');
+require('./chunk-MKHYENKR.cjs');
+require('./chunk-TI7D4QDM.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-RXDRYWVD.cjs');
 require('./chunk-SNHU2AI4.cjs');
@@ -13,55 +14,55 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "HOST_ATTR", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.HOST_ATTR; }
+  get: function () { return chunkTYTENEJQ_cjs.HOST_ATTR; }
 });
 Object.defineProperty(exports, "InlinePasteEditor", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.InlinePasteEditor; }
+  get: function () { return chunkTYTENEJQ_cjs.InlinePasteEditor; }
 });
 Object.defineProperty(exports, "InlinePill", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.InlinePill; }
+  get: function () { return chunkTYTENEJQ_cjs.InlinePill; }
 });
 Object.defineProperty(exports, "PILL_MARK", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.PILL_MARK; }
+  get: function () { return chunkTYTENEJQ_cjs.PILL_MARK; }
 });
 Object.defineProperty(exports, "PastedFilesInput", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.PastedFilesInput; }
+  get: function () { return chunkTYTENEJQ_cjs.PastedFilesInput; }
 });
 Object.defineProperty(exports, "endsOf", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.endsOf; }
+  get: function () { return chunkTYTENEJQ_cjs.endsOf; }
 });
 Object.defineProperty(exports, "expandMarkers", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.expandMarkers; }
+  get: function () { return chunkTYTENEJQ_cjs.expandMarkers; }
 });
 Object.defineProperty(exports, "markedIds", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.markedIds; }
+  get: function () { return chunkTYTENEJQ_cjs.markedIds; }
 });
 Object.defineProperty(exports, "pasteMarker", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.pasteMarker; }
+  get: function () { return chunkTYTENEJQ_cjs.pasteMarker; }
 });
 Object.defineProperty(exports, "segmentValue", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.segmentValue; }
+  get: function () { return chunkTYTENEJQ_cjs.segmentValue; }
 });
 Object.defineProperty(exports, "useInlinePaste", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.useInlinePaste; }
+  get: function () { return chunkTYTENEJQ_cjs.useInlinePaste; }
 });
 Object.defineProperty(exports, "usePastePills", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.usePastePills; }
+  get: function () { return chunkTYTENEJQ_cjs.usePastePills; }
 });
 Object.defineProperty(exports, "withSeparators", {
   enumerable: true,
-  get: function () { return chunk5JK2VDWY_cjs.withSeparators; }
+  get: function () { return chunkTYTENEJQ_cjs.withSeparators; }
 });
 //# sourceMappingURL=paste-pills.cjs.map
 //# sourceMappingURL=paste-pills.cjs.map

package/dist/paste-pills.js

@@ -1,7 +1,8 @@
-export { HOST_ATTR, InlinePasteEditor, InlinePill, PILL_MARK, PastedFilesInput, endsOf, expandMarkers, markedIds, pasteMarker, segmentValue, useInlinePaste, usePastePills, withSeparators } from './chunk-M6XBF2ZS.js';
-import './chunk-XYOT75HH.js';
+export { HOST_ATTR, InlinePasteEditor, InlinePill, PILL_MARK, PastedFilesInput, endsOf, expandMarkers, markedIds, pasteMarker, segmentValue, useInlinePaste, usePastePills, withSeparators } from './chunk-UJZJBHMH.js';
+import './chunk-NORVXHRU.js';
 import './chunk-MQ6VGG62.js';
-import './chunk-WHEXTDPV.js';
+import './chunk-5VMILVWD.js';
+import './chunk-RBCMKPBX.js';
 import './chunk-RGANGU7X.js';
 import './chunk-JXE5XID6.js';
 import './chunk-EDYAXGUM.js';

package/dist/popover.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
-var chunkUZG6LO4Z_cjs = require('./chunk-UZG6LO4Z.cjs');
+var chunkFU6K7XXZ_cjs = require('./chunk-FU6K7XXZ.cjs');
 require('./chunk-J2DI6RMR.cjs');
-require('./chunk-NBZC6LOB.cjs');
+require('./chunk-MKHYENKR.cjs');
+require('./chunk-TI7D4QDM.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-RXDRYWVD.cjs');
 require('./chunk-ZU5Q77OT.cjs');
@@ -11,11 +12,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
-  get: function () { return chunkUZG6LO4Z_cjs.Popover; }
+  get: function () { return chunkFU6K7XXZ_cjs.Popover; }
 });
 Object.defineProperty(exports, "usePopover", {
   enumerable: true,
-  get: function () { return chunkUZG6LO4Z_cjs.usePopover; }
+  get: function () { return chunkFU6K7XXZ_cjs.usePopover; }
 });
 //# sourceMappingURL=popover.cjs.map
 //# sourceMappingURL=popover.cjs.map

package/dist/popover.js

@@ -1,6 +1,7 @@
-export { Popover, usePopover } from './chunk-XYOT75HH.js';
+export { Popover, usePopover } from './chunk-NORVXHRU.js';
 import './chunk-MQ6VGG62.js';
-import './chunk-WHEXTDPV.js';
+import './chunk-5VMILVWD.js';
+import './chunk-RBCMKPBX.js';
 import './chunk-RGANGU7X.js';
 import './chunk-JXE5XID6.js';
 import './chunk-MMW2JGKZ.js';

package/dist/portal.cjs

@@ -1,12 +1,17 @@
 'use strict';
 
-var chunkNBZC6LOB_cjs = require('./chunk-NBZC6LOB.cjs');
+require('./chunk-MKHYENKR.cjs');
+var chunkTI7D4QDM_cjs = require('./chunk-TI7D4QDM.cjs');
 
 
 
 Object.defineProperty(exports, "Portal", {
   enumerable: true,
-  get: function () { return chunkNBZC6LOB_cjs.Portal; }
+  get: function () { return chunkTI7D4QDM_cjs.Portal; }
+});
+Object.defineProperty(exports, "PortalContainerContext", {
+  enumerable: true,
+  get: function () { return chunkTI7D4QDM_cjs.PortalContainerContext; }
 });
 //# sourceMappingURL=portal.cjs.map
 //# sourceMappingURL=portal.cjs.map

package/dist/portal.d.cts

@@ -1,10 +1,21 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
+/**
+ * Where a `<Portal>` without an explicit `container` renders. `null` means
+ * `document.body`, which is what every Portal did before this existed.
+ *
+ * A full-screen surface provides its own element here while it is active. In the
+ * browser's Fullscreen API only the full-screen element's subtree is painted, so
+ * a menu, tooltip or dialog portalled to `<body>` from inside a full-screen
+ * editor would open invisibly. Redirecting keeps every react-fancy overlay a
+ * descendant of the surface without the components inside knowing.
+ */
+declare const PortalContainerContext: react.Context<HTMLElement | null>;
 interface PortalProps {
     children: ReactNode;
     container?: HTMLElement;
 }
 declare function Portal({ children, container }: PortalProps): react.ReactPortal | null;
 
-export { Portal, type PortalProps };
+export { Portal, PortalContainerContext, type PortalProps };

package/dist/portal.d.ts

@@ -1,10 +1,21 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
+/**
+ * Where a `<Portal>` without an explicit `container` renders. `null` means
+ * `document.body`, which is what every Portal did before this existed.
+ *
+ * A full-screen surface provides its own element here while it is active. In the
+ * browser's Fullscreen API only the full-screen element's subtree is painted, so
+ * a menu, tooltip or dialog portalled to `<body>` from inside a full-screen
+ * editor would open invisibly. Redirecting keeps every react-fancy overlay a
+ * descendant of the surface without the components inside knowing.
+ */
+declare const PortalContainerContext: react.Context<HTMLElement | null>;
 interface PortalProps {
     children: ReactNode;
     container?: HTMLElement;
 }
 declare function Portal({ children, container }: PortalProps): react.ReactPortal | null;
 
-export { Portal, type PortalProps };
+export { Portal, PortalContainerContext, type PortalProps };

package/dist/portal.js

@@ -1,3 +1,4 @@
-export { Portal } from './chunk-WHEXTDPV.js';
+import './chunk-5VMILVWD.js';
+export { Portal, PortalContainerContext } from './chunk-RBCMKPBX.js';
 //# sourceMappingURL=portal.js.map
 //# sourceMappingURL=portal.js.map

package/dist/prompt-input.cjs

@@ -1,13 +1,14 @@
 'use strict';
 
-var chunk7R7HENZG_cjs = require('./chunk-7R7HENZG.cjs');
-require('./chunk-BJKKW77L.cjs');
+var chunkHRYM76ZE_cjs = require('./chunk-HRYM76ZE.cjs');
+require('./chunk-QXMQVLRQ.cjs');
 require('./chunk-I27K6NLX.cjs');
 require('./chunk-AIA5UNQ5.cjs');
-require('./chunk-5JK2VDWY.cjs');
-require('./chunk-UZG6LO4Z.cjs');
+require('./chunk-TYTENEJQ.cjs');
+require('./chunk-FU6K7XXZ.cjs');
 require('./chunk-J2DI6RMR.cjs');
-require('./chunk-NBZC6LOB.cjs');
+require('./chunk-MKHYENKR.cjs');
+require('./chunk-TI7D4QDM.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-RXDRYWVD.cjs');
 require('./chunk-M5MUGSON.cjs');
@@ -22,7 +23,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "PromptInput", {
   enumerable: true,
-  get: function () { return chunk7R7HENZG_cjs.PromptInput; }
+  get: function () { return chunkHRYM76ZE_cjs.PromptInput; }
 });
 //# sourceMappingURL=prompt-input.cjs.map
 //# sourceMappingURL=prompt-input.cjs.map

package/dist/prompt-input.js

@@ -1,11 +1,12 @@
-export { PromptInput } from './chunk-KQYOIPHQ.js';
-import './chunk-TGBLDJ72.js';
+export { PromptInput } from './chunk-N7KUGFRG.js';
+import './chunk-4FJWHVC7.js';
 import './chunk-SV5BW3IA.js';
 import './chunk-TJ66S5K6.js';
-import './chunk-M6XBF2ZS.js';
-import './chunk-XYOT75HH.js';
+import './chunk-UJZJBHMH.js';
+import './chunk-NORVXHRU.js';
 import './chunk-MQ6VGG62.js';
-import './chunk-WHEXTDPV.js';
+import './chunk-5VMILVWD.js';
+import './chunk-RBCMKPBX.js';
 import './chunk-RGANGU7X.js';
 import './chunk-JXE5XID6.js';
 import './chunk-LQ4ICCN2.js';

package/dist/reason-tag.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkLVE6ERRS_cjs = require('./chunk-LVE6ERRS.cjs');
-require('./chunk-UZG6LO4Z.cjs');
+var chunkRRMQGTVB_cjs = require('./chunk-RRMQGTVB.cjs');
+require('./chunk-FU6K7XXZ.cjs');
 require('./chunk-J2DI6RMR.cjs');
-require('./chunk-NBZC6LOB.cjs');
+require('./chunk-MKHYENKR.cjs');
+require('./chunk-TI7D4QDM.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-RXDRYWVD.cjs');
 require('./chunk-M5MUGSON.cjs');
@@ -17,7 +18,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "ReasonTag", {
   enumerable: true,
-  get: function () { return chunkLVE6ERRS_cjs.ReasonTag; }
+  get: function () { return chunkRRMQGTVB_cjs.ReasonTag; }
 });
 //# sourceMappingURL=reason-tag.cjs.map
 //# sourceMappingURL=reason-tag.cjs.map

package/dist/reason-tag.js

@@ -1,7 +1,8 @@
-export { ReasonTag } from './chunk-4FZOH7BJ.js';
-import './chunk-XYOT75HH.js';
+export { ReasonTag } from './chunk-74MEJWMH.js';
+import './chunk-NORVXHRU.js';
 import './chunk-MQ6VGG62.js';
-import './chunk-WHEXTDPV.js';
+import './chunk-5VMILVWD.js';
+import './chunk-RBCMKPBX.js';
 import './chunk-RGANGU7X.js';
 import './chunk-JXE5XID6.js';
 import './chunk-LQ4ICCN2.js';

package/dist/select.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 require('./chunk-HXLSEBAL.cjs');
-var chunkGLGUQGAQ_cjs = require('./chunk-GLGUQGAQ.cjs');
+var chunkM6MGQI6G_cjs = require('./chunk-M6MGQI6G.cjs');
 require('./chunk-MRZXTL46.cjs');
 require('./chunk-P53432AK.cjs');
 require('./chunk-QF7CD4JH.cjs');
@@ -9,7 +9,8 @@ require('./chunk-O3F6DYWR.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
 require('./chunk-J2DI6RMR.cjs');
-require('./chunk-NBZC6LOB.cjs');
+require('./chunk-MKHYENKR.cjs');
+require('./chunk-TI7D4QDM.cjs');
 require('./chunk-57FQGQJK.cjs');
 require('./chunk-RXDRYWVD.cjs');
 require('./chunk-ZU5Q77OT.cjs');
@@ -18,7 +19,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkGLGUQGAQ_cjs.Select; }
+  get: function () { return chunkM6MGQI6G_cjs.Select; }
 });
 //# sourceMappingURL=select.cjs.map
 //# sourceMappingURL=select.cjs.map

package/dist/select.js

@@ -1,5 +1,5 @@
 import './chunk-GNHQVPZP.js';
-export { Select } from './chunk-T45LBTXH.js';
+export { Select } from './chunk-ULG4OA2T.js';
 import './chunk-KXYMMNNV.js';
 import './chunk-WX5XYDVN.js';
 import './chunk-5WQ6FPSP.js';
@@ -7,7 +7,8 @@ import './chunk-USWQAMI3.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';
 import './chunk-MQ6VGG62.js';
-import './chunk-WHEXTDPV.js';
+import './chunk-5VMILVWD.js';
+import './chunk-RBCMKPBX.js';
 import './chunk-RGANGU7X.js';
 import './chunk-JXE5XID6.js';
 import './chunk-MMW2JGKZ.js';

package/dist/sidebar.cjs

@@ -3,6 +3,7 @@
 var chunkEZA6GWZL_cjs = require('./chunk-EZA6GWZL.cjs');
 require('./chunk-A2JUTNE6.cjs');
 require('./chunk-T6YELZPJ.cjs');
+require('./chunk-O4HZVZMY.cjs');
 require('./chunk-TXTRTTG7.cjs');
 require('./chunk-FQZE5N2N.cjs');
 require('./chunk-J2DI6RMR.cjs');

package/dist/sidebar.js

@@ -1,6 +1,7 @@
 export { Sidebar, useSidebar } from './chunk-YJHP5FVA.js';
 import './chunk-2BXMMVQS.js';
 import './chunk-CPY7NHXM.js';
+import './chunk-NE3BZV3F.js';
 import './chunk-5U2DZ7AV.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-MQ6VGG62.js';

package/dist/toast.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-var chunk5ZNOLPIJ_cjs = require('./chunk-5ZNOLPIJ.cjs');
-require('./chunk-NBZC6LOB.cjs');
+var chunkH2YRZYKK_cjs = require('./chunk-H2YRZYKK.cjs');
+require('./chunk-MKHYENKR.cjs');
+require('./chunk-TI7D4QDM.cjs');
 require('./chunk-VBWRH4UW.cjs');
 require('./chunk-MOU6O324.cjs');
 require('./chunk-SNHU2AI4.cjs');
@@ -11,11 +12,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Toast", {
   enumerable: true,
-  get: function () { return chunk5ZNOLPIJ_cjs.Toast; }
+  get: function () { return chunkH2YRZYKK_cjs.Toast; }
 });
 Object.defineProperty(exports, "useToast", {
   enumerable: true,
-  get: function () { return chunk5ZNOLPIJ_cjs.useToast; }
+  get: function () { return chunkH2YRZYKK_cjs.useToast; }
 });
 //# sourceMappingURL=toast.cjs.map
 //# sourceMappingURL=toast.cjs.map

package/dist/toast.js

@@ -1,5 +1,6 @@
-export { Toast, useToast } from './chunk-UIE5FP3A.js';
-import './chunk-WHEXTDPV.js';
+export { Toast, useToast } from './chunk-BQFPC5FL.js';
+import './chunk-5VMILVWD.js';
+import './chunk-RBCMKPBX.js';
 import './chunk-IQ4KQJAO.js';
 import './chunk-6FCQD2KQ.js';
 import './chunk-EDYAXGUM.js';

package/dist/tooltip.cjs

@@ -1,16 +1,17 @@
 'use strict';
 
-var chunkBJKKW77L_cjs = require('./chunk-BJKKW77L.cjs');
+var chunkQXMQVLRQ_cjs = require('./chunk-QXMQVLRQ.cjs');
 require('./chunk-I27K6NLX.cjs');
 require('./chunk-J2DI6RMR.cjs');
-require('./chunk-NBZC6LOB.cjs');
+require('./chunk-MKHYENKR.cjs');
+require('./chunk-TI7D4QDM.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunkBJKKW77L_cjs.Tooltip; }
+  get: function () { return chunkQXMQVLRQ_cjs.Tooltip; }
 });
 //# sourceMappingURL=tooltip.cjs.map
 //# sourceMappingURL=tooltip.cjs.map

package/dist/tooltip.js

@@ -1,7 +1,8 @@
-export { Tooltip } from './chunk-TGBLDJ72.js';
+export { Tooltip } from './chunk-4FJWHVC7.js';
 import './chunk-SV5BW3IA.js';
 import './chunk-MQ6VGG62.js';
-import './chunk-WHEXTDPV.js';
+import './chunk-5VMILVWD.js';
+import './chunk-RBCMKPBX.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=tooltip.js.map
 //# sourceMappingURL=tooltip.js.map

package/dist/use-full-screen-H2j6qXDB.d.cts

@@ -0,0 +1,85 @@
+import { RefObject, CSSProperties, KeyboardEvent } from 'react';
+
+/**
+ * How a surface goes full screen.
+ *
+ * - `"overlay"` (default): the element itself becomes `position: fixed` over the
+ *   viewport, in place. It always works: inside an iframe without
+ *   `allow="fullscreen"`, inside a dialog, without a user gesture. Nothing is
+ *   reparented, so an editor keeps its caret, undo stack and DOM.
+ * - `"native"`: the browser Fullscreen API (`element.requestFullscreen()`),
+ *   which hides the browser chrome too. The overlay is applied first and stays
+ *   if the request is rejected or the API is missing, so the user gets full
+ *   screen either way; `activeMode` reports which one took.
+ */
+type FullScreenMode = "overlay" | "native";
+interface UseFullScreenOptions {
+    /** Controlled flag. Pair with `onFullScreenChange`. */
+    fullScreen?: boolean;
+    /** Initial flag when uncontrolled. @default false */
+    defaultFullScreen?: boolean;
+    /**
+     * Fired with the requested state — from the toggle, Escape, an agent calling
+     * `setFullScreen`, or the user leaving the browser's own full screen.
+     */
+    onFullScreenChange?: (fullScreen: boolean) => void;
+    /** @default "overlay" */
+    mode?: FullScreenMode;
+    /** Leave full screen on Escape. @default true */
+    closeOnEscape?: boolean;
+    /** Stop the page behind from scrolling while active. @default true */
+    lockScroll?: boolean;
+    /** Stacking order of the overlay. Matches `Modal`. @default 50 */
+    zIndex?: number;
+    /** Accessible names for the toggle. */
+    labels?: {
+        enter?: string;
+        exit?: string;
+    };
+}
+interface FullScreenTargetProps<T extends HTMLElement> {
+    ref: RefObject<T | null>;
+    "data-fullscreen": "true" | "false";
+    "data-fullscreen-mode"?: FullScreenMode;
+    style?: CSSProperties;
+    onKeyDown: (event: KeyboardEvent<T>) => void;
+}
+interface FullScreenToggleProps {
+    type: "button";
+    onClick: () => void;
+    "aria-pressed": boolean;
+    "aria-label": string;
+    title: string;
+    "data-react-fancy-fullscreen-toggle": "";
+    "data-fullscreen": "true" | "false";
+}
+interface UseFullScreenResult<T extends HTMLElement = HTMLElement> {
+    fullScreen: boolean;
+    setFullScreen: (fullScreen: boolean) => void;
+    toggle: () => void;
+    /** The mechanism in effect while active; `null` when not full screen. */
+    activeMode: FullScreenMode | null;
+    /** Attach to the element that goes full screen. Also inside `targetProps`. */
+    ref: RefObject<T | null>;
+    /**
+     * Spread onto the surface's root. Carries the ref, the `data-fullscreen`
+     * handle, the overlay style and the Escape/Tab handler. Merge your own
+     * `style` / `onKeyDown` if the root has them.
+     */
+    targetProps: FullScreenTargetProps<T>;
+    /** Spread onto a `<button>` to make it the toggle. */
+    toggleProps: FullScreenToggleProps;
+    /**
+     * The element to portal into while active, else `null`. Provide it through
+     * `PortalContainerContext` so menus opened inside stay visible.
+     */
+    portalContainer: HTMLElement | null;
+}
+/**
+ * A controlled full-screen state for any surface: Editor today, DeckEditor and
+ * SheetWorkbook next. Render-time output is pure (no `window`/`document`), so it
+ * server-renders; everything that touches the DOM runs in effects.
+ */
+declare function useFullScreen<T extends HTMLElement = HTMLElement>(options?: UseFullScreenOptions): UseFullScreenResult<T>;
+
+export { type FullScreenMode as F, type UseFullScreenOptions as U, type FullScreenTargetProps as a, type FullScreenToggleProps as b, type UseFullScreenResult as c, useFullScreen as u };

package/dist/use-full-screen-H2j6qXDB.d.ts

@@ -0,0 +1,85 @@
+import { RefObject, CSSProperties, KeyboardEvent } from 'react';
+
+/**
+ * How a surface goes full screen.
+ *
+ * - `"overlay"` (default): the element itself becomes `position: fixed` over the
+ *   viewport, in place. It always works: inside an iframe without
+ *   `allow="fullscreen"`, inside a dialog, without a user gesture. Nothing is
+ *   reparented, so an editor keeps its caret, undo stack and DOM.
+ * - `"native"`: the browser Fullscreen API (`element.requestFullscreen()`),
+ *   which hides the browser chrome too. The overlay is applied first and stays
+ *   if the request is rejected or the API is missing, so the user gets full
+ *   screen either way; `activeMode` reports which one took.
+ */
+type FullScreenMode = "overlay" | "native";
+interface UseFullScreenOptions {
+    /** Controlled flag. Pair with `onFullScreenChange`. */
+    fullScreen?: boolean;
+    /** Initial flag when uncontrolled. @default false */
+    defaultFullScreen?: boolean;
+    /**
+     * Fired with the requested state — from the toggle, Escape, an agent calling
+     * `setFullScreen`, or the user leaving the browser's own full screen.
+     */
+    onFullScreenChange?: (fullScreen: boolean) => void;
+    /** @default "overlay" */
+    mode?: FullScreenMode;
+    /** Leave full screen on Escape. @default true */
+    closeOnEscape?: boolean;
+    /** Stop the page behind from scrolling while active. @default true */
+    lockScroll?: boolean;
+    /** Stacking order of the overlay. Matches `Modal`. @default 50 */
+    zIndex?: number;
+    /** Accessible names for the toggle. */
+    labels?: {
+        enter?: string;
+        exit?: string;
+    };
+}
+interface FullScreenTargetProps<T extends HTMLElement> {
+    ref: RefObject<T | null>;
+    "data-fullscreen": "true" | "false";
+    "data-fullscreen-mode"?: FullScreenMode;
+    style?: CSSProperties;
+    onKeyDown: (event: KeyboardEvent<T>) => void;
+}
+interface FullScreenToggleProps {
+    type: "button";
+    onClick: () => void;
+    "aria-pressed": boolean;
+    "aria-label": string;
+    title: string;
+    "data-react-fancy-fullscreen-toggle": "";
+    "data-fullscreen": "true" | "false";
+}
+interface UseFullScreenResult<T extends HTMLElement = HTMLElement> {
+    fullScreen: boolean;
+    setFullScreen: (fullScreen: boolean) => void;
+    toggle: () => void;
+    /** The mechanism in effect while active; `null` when not full screen. */
+    activeMode: FullScreenMode | null;
+    /** Attach to the element that goes full screen. Also inside `targetProps`. */
+    ref: RefObject<T | null>;
+    /**
+     * Spread onto the surface's root. Carries the ref, the `data-fullscreen`
+     * handle, the overlay style and the Escape/Tab handler. Merge your own
+     * `style` / `onKeyDown` if the root has them.
+     */
+    targetProps: FullScreenTargetProps<T>;
+    /** Spread onto a `<button>` to make it the toggle. */
+    toggleProps: FullScreenToggleProps;
+    /**
+     * The element to portal into while active, else `null`. Provide it through
+     * `PortalContainerContext` so menus opened inside stay visible.
+     */
+    portalContainer: HTMLElement | null;
+}
+/**
+ * A controlled full-screen state for any surface: Editor today, DeckEditor and
+ * SheetWorkbook next. Render-time output is pure (no `window`/`document`), so it
+ * server-renders; everything that touches the DOM runs in effects.
+ */
+declare function useFullScreen<T extends HTMLElement = HTMLElement>(options?: UseFullScreenOptions): UseFullScreenResult<T>;
+
+export { type FullScreenMode as F, type UseFullScreenOptions as U, type FullScreenTargetProps as a, type FullScreenToggleProps as b, type UseFullScreenResult as c, useFullScreen as u };

package/docs/Editor.md

@@ -33,6 +33,10 @@ import { Editor } from "@particle-academy/react-fancy";
 | showSource | `boolean` | - | Controlled source-view flag. When `true`, the content area shows the raw `value` (in `outputFormat`) in an editable `<textarea>` |
 | defaultShowSource | `boolean` | `false` | Initial source-view flag when uncontrolled |
 | onShowSourceChange | `(showSource: boolean) => void` | - | Fired when the Source toggle (or an agent) flips source view on/off |
+| fullScreen | `boolean` | - | Controlled full-screen flag. While `true` the editor covers the viewport, the toolbar stays on top and the content fills the rest |
+| defaultFullScreen | `boolean` | `false` | Initial full-screen flag when uncontrolled |
+| onFullScreenChange | `(fullScreen: boolean) => void` | - | Fired by the toggle, Escape, an agent, or the user leaving the browser's full screen |
+| fullScreenMode | `"overlay" \| "native"` | `"overlay"` | `overlay` covers the viewport in place and always works; `native` uses the browser Fullscreen API and falls back to the overlay. See [FullScreen](./FullScreen.md) |
 | className | `string` | - | Additional CSS classes |
 
 ### Editor.Toolbar
@@ -43,6 +47,7 @@ import { Editor } from "@particle-academy/react-fancy";
 | onAction | `(command: string) => void` | - | Custom action handler |
 | children | `ReactNode` | - | Custom toolbar content |
 | showSourceToggle | `boolean` | `true` | Append a Source toggle to the default toolbar. Ignored when `children` are supplied — custom toolbars compose their own `<Editor.SourceToggle />` |
+| showFullScreenToggle | `boolean` | `false` | Append a full-screen toggle (Lucide `maximize-2` / `minimize-2`) at the right end of the default toolbar. Ignored when `children` are supplied — use `<Editor.FullScreenToggle />` |
 | className | `string` | - | Additional CSS classes |
 
 #### EditorAction
@@ -70,6 +75,25 @@ A toolbar button that reveals the raw HTML/Markdown behind the editor. It is app
 | activeTitle | `string` | `"Rich text"` | Accessible title in source mode (click → rich text) |
 | className | `string` | - | Additional CSS classes |
 
+### Editor.FullScreenToggle
+
+Toolbar button that takes the editor full screen and back. Carries `data-react-fancy-editor-fullscreen-toggle` and the shared `data-react-fancy-fullscreen-toggle`, `aria-pressed` and an `aria-label` of "Enter full screen" / "Exit full screen".
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| enterIcon | `string` | `"maximize-2"` | Lucide name shown while not full screen |
+| exitIcon | `string` | `"minimize-2"` | Lucide name shown while full screen |
+| className | `string` | - | Additional CSS classes |
+
+```tsx
+<Editor defaultValue={doc} onFullScreenChange={(on) => console.log(on)}>
+  <Editor.Toolbar showFullScreenToggle />
+  <Editor.Content maxHeight={240} />
+</Editor>
+```
+
+While full screen the root has `data-fullscreen="true"`, `maxHeight` is ignored so the content fills the screen, and Escape leaves. The editor is not remounted, so the caret, undo history and text survive the round trip.
+
 ### Editor.Content
 
 | Prop | Type | Default | Description |