@particle-academy/react-fancy 5.60.2 → 5.61.0

package/dist/editor.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { ReactNode, RefObject } from 'react';
 import { R as RenderExtension } from './extensions-6PVd3-vB.js';
 import { F as FieldMode } from './inputs.types-DzGcqcPf.js';
+import { F as FullScreenMode } from './use-full-screen-H2j6qXDB.js';
 import './types-DJI492iY.js';
 
 interface EditorAction {
@@ -23,6 +24,20 @@ interface EditorToolbarProps {
      * @default true
      */
     showSourceToggle?: boolean;
+    /**
+     * Append a full-screen toggle (Lucide `maximize-2` / `minimize-2`) at the
+     * right end of the default toolbar. Ignored when `children` are supplied —
+     * custom toolbars compose `<Editor.FullScreenToggle />` themselves.
+     * @default false
+     */
+    showFullScreenToggle?: boolean;
+}
+interface EditorFullScreenToggleProps {
+    className?: string;
+    /** Lucide name shown while NOT full screen. @default "maximize-2" */
+    enterIcon?: string;
+    /** Lucide name shown while full screen. @default "minimize-2" */
+    exitIcon?: string;
 }
 interface EditorContentProps {
     className?: string;
@@ -81,6 +96,24 @@ interface EditorProps {
     defaultShowSource?: boolean;
     /** Fired when the Source toggle (or an agent) flips source view on/off. */
     onShowSourceChange?: (showSource: boolean) => void;
+    /**
+     * Controlled full-screen flag. While `true` the editor covers the viewport,
+     * the toolbar stays at the top and the content fills the rest (a
+     * `<Editor.Content maxHeight>` cap is ignored). Escape, the toolbar toggle or
+     * the browser's own UI request `false` through `onFullScreenChange`.
+     */
+    fullScreen?: boolean;
+    /** Initial full-screen flag when uncontrolled. @default false */
+    defaultFullScreen?: boolean;
+    /** Fired when the toggle, Escape, an agent or the browser changes full screen. */
+    onFullScreenChange?: (fullScreen: boolean) => void;
+    /**
+     * `"overlay"` covers the viewport in place and always works, including in
+     * iframes and dialogs. `"native"` uses the browser Fullscreen API and falls
+     * back to the overlay when the browser refuses.
+     * @default "overlay"
+     */
+    fullScreenMode?: FullScreenMode;
     /**
      * Skip HTML sanitization of the initial value. By default the initial markdown/HTML
      * is sanitized to remove `<script>`, `<iframe>`, event handlers, and `javascript:`
@@ -91,7 +124,7 @@ interface EditorProps {
     unsafe?: boolean;
 }
 
-declare function EditorToolbar({ actions, onAction, children, className, showSourceToggle, }: EditorToolbarProps): react.JSX.Element;
+declare function EditorToolbar({ actions, onAction, children, className, showSourceToggle, showFullScreenToggle, }: EditorToolbarProps): react.JSX.Element;
 declare namespace EditorToolbar {
     var displayName: string;
 }
@@ -111,18 +144,30 @@ declare namespace EditorSourceToggle {
     var displayName: string;
 }
 
-declare function EditorContent({ className, maxHeight, sourceClassName }: EditorContentProps): react.JSX.Element;
+declare function EditorContent({ className, maxHeight: maxHeightProp, sourceClassName }: EditorContentProps): react.JSX.Element;
 declare namespace EditorContent {
     var displayName: string;
 }
 
-declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, valueFormat, lineSpacing, placeholder, mode: modeProp, extensions: instanceExtensions, unsafe, showSource: showSourceProp, defaultShowSource, onShowSourceChange, }: EditorProps): react.JSX.Element;
+/**
+ * Toolbar button that takes the editor full screen and back. The shared
+ * `FullScreen.Toggle`, styled for the editor toolbar and carrying the editor's
+ * own handle (`data-react-fancy-editor-fullscreen-toggle`) next to the shared
+ * one (`data-react-fancy-fullscreen-toggle`).
+ */
+declare function EditorFullScreenToggle({ className, enterIcon, exitIcon }: EditorFullScreenToggleProps): react.JSX.Element;
+declare namespace EditorFullScreenToggle {
+    var displayName: string;
+}
+
+declare function EditorRoot({ children, className, value: controlledValue, defaultValue, onChange, outputFormat, valueFormat, lineSpacing, placeholder, mode: modeProp, extensions: instanceExtensions, unsafe, showSource: showSourceProp, defaultShowSource, onShowSourceChange, fullScreen: fullScreenProp, defaultFullScreen, onFullScreenChange, fullScreenMode, }: EditorProps): react.JSX.Element;
 declare const Editor: typeof EditorRoot & {
     Toolbar: typeof EditorToolbar & {
         Separator: typeof EditorToolbarSeparator;
     };
     Content: typeof EditorContent;
     SourceToggle: typeof EditorSourceToggle;
+    FullScreenToggle: typeof EditorFullScreenToggle;
 };
 
 interface EditorContextValue {
@@ -139,6 +184,10 @@ interface EditorContextValue {
     showSource: boolean;
     /** Toggle/set the raw-source view. */
     setShowSource: (showSource: boolean) => void;
+    /** Whether the editor currently covers the viewport. */
+    fullScreen: boolean;
+    /** Enter/leave full screen. Goes through `onFullScreenChange` when controlled. */
+    setFullScreen: (fullScreen: boolean) => void;
     /** Initial HTML content to load into the editor on mount */
     _initialHtml: string;
     /** @internal Called by EditorContent on input events */
@@ -150,4 +199,4 @@ interface EditorContextValue {
 }
 declare function useEditor(): EditorContextValue;
 
-export { Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorSourceToggleProps, type EditorToolbarProps, useEditor };
+export { Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorFullScreenToggleProps, type EditorProps, type EditorSourceToggleProps, type EditorToolbarProps, useEditor };

package/dist/editor.js

@@ -1,15 +1,20 @@
-export { Editor, useEditor } from './chunk-VD3C7IA4.js';
+export { Editor, useEditor } from './chunk-CEZVKKYW.js';
 import './chunk-2BXMMVQS.js';
 import './chunk-CPY7NHXM.js';
+import './chunk-4JLFIPHZ.js';
+import './chunk-NE3BZV3F.js';
 import './chunk-L24LUSEE.js';
+import './chunk-TJ66S5K6.js';
 import './chunk-FBWUXSKH.js';
 import './chunk-5U2DZ7AV.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-NRXK42LO.js';
 import './chunk-MQ6VGG62.js';
+import './chunk-RBCMKPBX.js';
 import './chunk-RGANGU7X.js';
 import './chunk-JXE5XID6.js';
 import './chunk-6TBRBN7H.js';
+import './chunk-J3A4Z2P7.js';
 import './chunk-EDYAXGUM.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=editor.js.map

package/dist/full-screen.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var chunkQMCMRQ2G_cjs = require('./chunk-QMCMRQ2G.cjs');
+var chunkZPBCZPMD_cjs = require('./chunk-ZPBCZPMD.cjs');
+var chunkO4HZVZMY_cjs = require('./chunk-O4HZVZMY.cjs');
+require('./chunk-AIA5UNQ5.cjs');
+require('./chunk-TI7D4QDM.cjs');
+require('./chunk-MXWR3T3N.cjs');
+require('./chunk-SNHU2AI4.cjs');
+require('./chunk-ZU5Q77OT.cjs');
+
+
+
+Object.defineProperty(exports, "FullScreen", {
+  enumerable: true,
+  get: function () { return chunkQMCMRQ2G_cjs.FullScreen; }
+});
+Object.defineProperty(exports, "FullScreenContext", {
+  enumerable: true,
+  get: function () { return chunkZPBCZPMD_cjs.FullScreenContext; }
+});
+Object.defineProperty(exports, "FullScreenProvider", {
+  enumerable: true,
+  get: function () { return chunkZPBCZPMD_cjs.FullScreenProvider; }
+});
+Object.defineProperty(exports, "FullScreenToggle", {
+  enumerable: true,
+  get: function () { return chunkZPBCZPMD_cjs.FullScreenToggle; }
+});
+Object.defineProperty(exports, "useFullScreenContext", {
+  enumerable: true,
+  get: function () { return chunkZPBCZPMD_cjs.useFullScreenContext; }
+});
+Object.defineProperty(exports, "useFullScreen", {
+  enumerable: true,
+  get: function () { return chunkO4HZVZMY_cjs.useFullScreen; }
+});
+//# sourceMappingURL=full-screen.cjs.map
+//# sourceMappingURL=full-screen.cjs.map

package/dist/full-screen.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"full-screen.cjs"}

package/dist/full-screen.d.cts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { U as UseFullScreenOptions, c as UseFullScreenResult } from './use-full-screen-H2j6qXDB.cjs';
+export { F as FullScreenMode, a as FullScreenTargetProps, b as FullScreenToggleButtonProps, u as useFullScreen } from './use-full-screen-H2j6qXDB.cjs';
+
+interface FullScreenToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "children"> {
+    /** Lucide name shown while NOT full screen. @default "maximize-2" */
+    enterIcon?: string;
+    /** Lucide name shown while full screen. @default "minimize-2" */
+    exitIcon?: string;
+    /** Replace the icon entirely. Receives the current state. */
+    children?: ReactNode | ((fullScreen: boolean) => ReactNode);
+}
+/**
+ * The toggle for the nearest `<FullScreen>` / `<FullScreenProvider>`. Renders
+ * nothing outside one, so a shared toolbar can include it unconditionally.
+ */
+declare function FullScreenToggle({ enterIcon, exitIcon, children, className, ...rest }: FullScreenToggleProps): react.JSX.Element | null;
+declare namespace FullScreenToggle {
+    var displayName: string;
+}
+
+interface FullScreenProps extends UseFullScreenOptions, Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children?: ReactNode;
+}
+/**
+ * A box that can take over the viewport. Controlled with `fullScreen` +
+ * `onFullScreenChange`, or uncontrolled with `defaultFullScreen`; put a
+ * `<FullScreen.Toggle />` anywhere inside.
+ *
+ * Give it a background: while active it covers the page, and in `native` mode
+ * the browser paints black behind anything transparent.
+ */
+declare function FullScreenRoot({ children, fullScreen, defaultFullScreen, onFullScreenChange, mode, closeOnEscape, lockScroll, zIndex, labels, style, onKeyDown, ...rest }: FullScreenProps): react.JSX.Element;
+declare const FullScreen: typeof FullScreenRoot & {
+    Toggle: typeof FullScreenToggle;
+};
+
+declare const FullScreenContext: react.Context<UseFullScreenResult<HTMLElement> | null>;
+/** The nearest full-screen surface's state, or `null` outside one. */
+declare function useFullScreenContext(): UseFullScreenResult | null;
+interface FullScreenProviderProps {
+    /** What `useFullScreen()` returned for the surface. */
+    value: UseFullScreenResult<HTMLElement> | UseFullScreenResult<HTMLDivElement>;
+    children?: ReactNode;
+}
+/**
+ * For a surface that owns its root and calls `useFullScreen()` itself (Editor,
+ * DeckEditor, SheetWorkbook). Makes `<FullScreen.Toggle />` work anywhere inside
+ * and redirects descendant `<Portal>`s into the surface while it is active.
+ */
+declare function FullScreenProvider({ value, children }: FullScreenProviderProps): react.JSX.Element;
+
+export { FullScreen, FullScreenContext, type FullScreenProps, FullScreenProvider, type FullScreenProviderProps, FullScreenToggle, type FullScreenToggleProps, UseFullScreenOptions, UseFullScreenResult, useFullScreenContext };

package/dist/full-screen.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { U as UseFullScreenOptions, c as UseFullScreenResult } from './use-full-screen-H2j6qXDB.js';
+export { F as FullScreenMode, a as FullScreenTargetProps, b as FullScreenToggleButtonProps, u as useFullScreen } from './use-full-screen-H2j6qXDB.js';
+
+interface FullScreenToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "children"> {
+    /** Lucide name shown while NOT full screen. @default "maximize-2" */
+    enterIcon?: string;
+    /** Lucide name shown while full screen. @default "minimize-2" */
+    exitIcon?: string;
+    /** Replace the icon entirely. Receives the current state. */
+    children?: ReactNode | ((fullScreen: boolean) => ReactNode);
+}
+/**
+ * The toggle for the nearest `<FullScreen>` / `<FullScreenProvider>`. Renders
+ * nothing outside one, so a shared toolbar can include it unconditionally.
+ */
+declare function FullScreenToggle({ enterIcon, exitIcon, children, className, ...rest }: FullScreenToggleProps): react.JSX.Element | null;
+declare namespace FullScreenToggle {
+    var displayName: string;
+}
+
+interface FullScreenProps extends UseFullScreenOptions, Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children?: ReactNode;
+}
+/**
+ * A box that can take over the viewport. Controlled with `fullScreen` +
+ * `onFullScreenChange`, or uncontrolled with `defaultFullScreen`; put a
+ * `<FullScreen.Toggle />` anywhere inside.
+ *
+ * Give it a background: while active it covers the page, and in `native` mode
+ * the browser paints black behind anything transparent.
+ */
+declare function FullScreenRoot({ children, fullScreen, defaultFullScreen, onFullScreenChange, mode, closeOnEscape, lockScroll, zIndex, labels, style, onKeyDown, ...rest }: FullScreenProps): react.JSX.Element;
+declare const FullScreen: typeof FullScreenRoot & {
+    Toggle: typeof FullScreenToggle;
+};
+
+declare const FullScreenContext: react.Context<UseFullScreenResult<HTMLElement> | null>;
+/** The nearest full-screen surface's state, or `null` outside one. */
+declare function useFullScreenContext(): UseFullScreenResult | null;
+interface FullScreenProviderProps {
+    /** What `useFullScreen()` returned for the surface. */
+    value: UseFullScreenResult<HTMLElement> | UseFullScreenResult<HTMLDivElement>;
+    children?: ReactNode;
+}
+/**
+ * For a surface that owns its root and calls `useFullScreen()` itself (Editor,
+ * DeckEditor, SheetWorkbook). Makes `<FullScreen.Toggle />` work anywhere inside
+ * and redirects descendant `<Portal>`s into the surface while it is active.
+ */
+declare function FullScreenProvider({ value, children }: FullScreenProviderProps): react.JSX.Element;
+
+export { FullScreen, FullScreenContext, type FullScreenProps, FullScreenProvider, type FullScreenProviderProps, FullScreenToggle, type FullScreenToggleProps, UseFullScreenOptions, UseFullScreenResult, useFullScreenContext };

package/dist/full-screen.js

@@ -0,0 +1,10 @@
+export { FullScreen } from './chunk-UGXBTIV5.js';
+export { FullScreenContext, FullScreenProvider, FullScreenToggle, useFullScreenContext } from './chunk-4JLFIPHZ.js';
+export { useFullScreen } from './chunk-NE3BZV3F.js';
+import './chunk-TJ66S5K6.js';
+import './chunk-RBCMKPBX.js';
+import './chunk-J3A4Z2P7.js';
+import './chunk-EDYAXGUM.js';
+import './chunk-MMW2JGKZ.js';
+//# sourceMappingURL=full-screen.js.map
+//# sourceMappingURL=full-screen.js.map

package/dist/full-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"full-screen.js"}