payload-better-editor 1.0.0

package/dist/hooks/useBlockActionMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useBlockActionMessages.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useMemo, useState } from 'react'\nimport { useAllFormFields, useForm } from '@payloadcms/ui'\nimport { listenForParentInbound } from '../internal/postmessage'\nimport { splitFieldPath } from '../internal/path'\nimport type { FormState } from 'payload'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useLatestRef } from './useLatestRef'\n\nconst ID_SUFFIX = '.id'\n\nconst buildIdIndex = (fields: FormState): Map<string, string> => {\n  const map = new Map<string, string>()\n  for (const key of Object.keys(fields)) {\n    if (!key.endsWith(ID_SUFFIX)) continue\n    const value = fields[key]?.value\n    if (typeof value === 'string' && value.length > 0) {\n      map.set(value, key.slice(0, -ID_SUFFIX.length))\n    }\n  }\n  return map\n}\n\nexport type UseBlockActionMessagesArgs = {\n  selectedBlockPath: string | null\n  setSelectedBlockPath: (path: string | null) => void\n}\n\nexport type UseBlockActionMessagesReturn = {\n  addBelowRequestId: number\n}\n\nexport const useBlockActionMessages = ({\n  setSelectedBlockPath,\n}: UseBlockActionMessagesArgs): UseBlockActionMessagesReturn => {\n  const [addBelowRequestId, setAddBelowRequestId] = useState<number>(0)\n\n  const [allFields] = useAllFormFields()\n  const idIndex = useMemo(() => buildIdIndex(allFields as FormState), [allFields])\n  const { dispatchFields } = useForm()\n  const history = useEditorHistory()\n\n  // Refs let the postMessage listener stay bound across renders without\n  // missing the latest form state, dispatcher, or history commit.\n  const allFieldsRef = useLatestRef(allFields)\n  const idIndexRef = useLatestRef(idIndex)\n  const dispatchFieldsRef = useLatestRef(dispatchFields)\n  const historyRef = useLatestRef(history)\n  const setSelectedBlockPathRef = useLatestRef(setSelectedBlockPath)\n\n  // Bind the postMessage listener exactly once. All four state inputs flow\n  // through stable refs (above), so a re-bind is never needed.\n  useEffect(\n    () =>\n      listenForParentInbound((data) => {\n        const fields = allFieldsRef.current as FormState\n        const path = idIndexRef.current.get(data.id) ?? null\n        if (!path) return\n\n        const select = setSelectedBlockPathRef.current\n        const dispatch = dispatchFieldsRef.current\n        const { commit } = historyRef.current\n\n        if (data.type === 'focus-block') {\n          select(path)\n          return\n        }\n\n        if (data.action === 'add') {\n          // Monotonic counter — BlockSettingsTab compares the latest id against\n          // its lastHandledRequestRef. Date.now() risked collisions on\n          // double-clicks landing in the same millisecond.\n          select(path)\n          setAddBelowRequestId((id) => id + 1)\n          return\n        }\n\n        const split = splitFieldPath(path)\n        if (!split) return\n        const { parent: parentPath, index: rowIndex } = split\n        const rows = fields[parentPath]?.rows\n        const rowCount = Array.isArray(rows) ? rows.length : 0\n        if (rowIndex < 0 || rowIndex >= rowCount) return\n\n        switch (data.action) {\n          case 'move-up':\n            if (rowIndex === 0) return\n            commit(() =>\n              dispatch({\n                type: 'MOVE_ROW',\n                path: parentPath,\n                moveFromIndex: rowIndex,\n                moveToIndex: rowIndex - 1,\n              }),\n            )\n            select(`${parentPath}.${rowIndex - 1}`)\n            break\n          case 'move-down':\n            if (rowIndex >= rowCount - 1) return\n            commit(() =>\n              dispatch({\n                type: 'MOVE_ROW',\n                path: parentPath,\n                moveFromIndex: rowIndex,\n                moveToIndex: rowIndex + 1,\n              }),\n            )\n            select(`${parentPath}.${rowIndex + 1}`)\n            break\n          case 'duplicate':\n            commit(() => dispatch({ type: 'DUPLICATE_ROW', path: parentPath, rowIndex }))\n            select(`${parentPath}.${rowIndex + 1}`)\n            break\n          case 'delete':\n            commit(() => dispatch({ type: 'REMOVE_ROW', path: parentPath, rowIndex }))\n            select(null)\n            break\n        }\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs are stable\n    [],\n  )\n\n  return { addBelowRequestId }\n}\n"],"names":["useEffect","useMemo","useState","useAllFormFields","useForm","listenForParentInbound","splitFieldPath","useEditorHistory","useLatestRef","ID_SUFFIX","buildIdIndex","fields","map","Map","key","Object","keys","endsWith","value","length","set","slice","useBlockActionMessages","setSelectedBlockPath","addBelowRequestId","setAddBelowRequestId","allFields","idIndex","dispatchFields","history","allFieldsRef","idIndexRef","dispatchFieldsRef","historyRef","setSelectedBlockPathRef","data","current","path","get","id","select","dispatch","commit","type","action","split","parent","parentPath","index","rowIndex","rows","rowCount","Array","isArray","moveFromIndex","moveToIndex"],"mappings":"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"}

package/dist/hooks/useDocConfig.d.ts

@@ -0,0 +1,6 @@
+import type { ClientField } from 'payload';
+export type UseDocConfigReturn = {
+    fields: ClientField[] | undefined;
+    slug: string;
+};
+export declare const useDocConfig: () => UseDocConfigReturn;

package/dist/hooks/useDocConfig.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMemo } from 'react';
+import { useDocumentInfo } from '@payloadcms/ui';
+export const useDocConfig = ()=>{
+    const { docConfig } = useDocumentInfo();
+    return useMemo(()=>{
+        const fields = docConfig && 'fields' in docConfig ? docConfig.fields : undefined;
+        const slug = docConfig && 'slug' in docConfig ? docConfig.slug : '';
+        return {
+            fields,
+            slug
+        };
+    }, [
+        docConfig
+    ]);
+};
+
+//# sourceMappingURL=useDocConfig.js.map

package/dist/hooks/useDocConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useDocConfig.ts"],"sourcesContent":["'use client'\n\nimport { useMemo } from 'react'\nimport type { ClientField } from 'payload'\nimport { useDocumentInfo } from '@payloadcms/ui'\n\nexport type UseDocConfigReturn = {\n  fields: ClientField[] | undefined\n  slug: string\n}\n\nexport const useDocConfig = (): UseDocConfigReturn => {\n  const { docConfig } = useDocumentInfo()\n  return useMemo(() => {\n    const fields =\n      docConfig && 'fields' in docConfig ? (docConfig.fields as ClientField[]) : undefined\n    const slug = docConfig && 'slug' in docConfig ? docConfig.slug : ''\n    return { fields, slug }\n  }, [docConfig])\n}\n"],"names":["useMemo","useDocumentInfo","useDocConfig","docConfig","fields","undefined","slug"],"mappings":"AAAA;AAEA,SAASA,OAAO,QAAQ,QAAO;AAE/B,SAASC,eAAe,QAAQ,iBAAgB;AAOhD,OAAO,MAAMC,eAAe;IAC1B,MAAM,EAAEC,SAAS,EAAE,GAAGF;IACtB,OAAOD,QAAQ;QACb,MAAMI,SACJD,aAAa,YAAYA,YAAaA,UAAUC,MAAM,GAAqBC;QAC7E,MAAMC,OAAOH,aAAa,UAAUA,YAAYA,UAAUG,IAAI,GAAG;QACjE,OAAO;YAAEF;YAAQE;QAAK;IACxB,GAAG;QAACH;KAAU;AAChB,EAAC"}

package/dist/hooks/useFocusTrap.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare const useFocusTrap: (ref: RefObject<HTMLElement | null>, active?: boolean) => void;

package/dist/hooks/useFocusTrap.js

@@ -0,0 +1,84 @@
+'use client';
+import { useEffect } from 'react';
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])'
+].join(',');
+const isVisible = (el)=>{
+    if (el.hidden) return false;
+    const rects = el.getClientRects();
+    return rects.length > 0;
+};
+const getFocusable = (root)=>{
+    const nodes = root.querySelectorAll(FOCUSABLE_SELECTOR);
+    const out = [];
+    for (const n of nodes)if (isVisible(n)) out.push(n);
+    return out;
+};
+export const useFocusTrap = (ref, active = true)=>{
+    useEffect(()=>{
+        if (!active) return;
+        const root = ref.current;
+        if (!root) return;
+        const previouslyFocused = document.activeElement ?? null;
+        // Initial focus: prefer first interactive child; fall back to root itself
+        // so keyboard users land inside the dialog.
+        const focusables = getFocusable(root);
+        if (focusables.length > 0) {
+            focusables[0].focus();
+        } else {
+            if (!root.hasAttribute('tabindex')) root.setAttribute('tabindex', '-1');
+            root.focus();
+        }
+        const onKey = (e)=>{
+            if (e.key !== 'Tab') return;
+            const items = getFocusable(root);
+            if (items.length === 0) {
+                e.preventDefault();
+                root.focus();
+                return;
+            }
+            const first = items[0];
+            const last = items[items.length - 1];
+            const activeEl = document.activeElement;
+            // If focus has escaped the trap entirely, pull it back to a safe edge.
+            if (!activeEl || !root.contains(activeEl)) {
+                e.preventDefault();
+                (e.shiftKey ? last : first).focus();
+                return;
+            }
+            if (e.shiftKey && activeEl === first) {
+                e.preventDefault();
+                last.focus();
+            } else if (!e.shiftKey && activeEl === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener('keydown', onKey, true);
+        return ()=>{
+            document.removeEventListener('keydown', onKey, true);
+            // Best-effort restore — the original element may have been removed
+            // from the DOM while the overlay was open.
+            if (previouslyFocused && previouslyFocused.isConnected) {
+                try {
+                    previouslyFocused.focus();
+                } catch  {
+                /* element no longer focusable */ }
+            }
+        };
+    }, [
+        ref,
+        active
+    ]);
+};
+
+//# sourceMappingURL=useFocusTrap.js.map

package/dist/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, type RefObject } from 'react'\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  'audio[controls]',\n  'video[controls]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n].join(',')\n\nconst isVisible = (el: HTMLElement): boolean => {\n  if (el.hidden) return false\n  const rects = el.getClientRects()\n  return rects.length > 0\n}\n\nconst getFocusable = (root: HTMLElement): HTMLElement[] => {\n  const nodes = root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)\n  const out: HTMLElement[] = []\n  for (const n of nodes) if (isVisible(n)) out.push(n)\n  return out\n}\n\nexport const useFocusTrap = (\n  ref: RefObject<HTMLElement | null>,\n  active: boolean = true,\n): void => {\n  useEffect(() => {\n    if (!active) return\n    const root = ref.current\n    if (!root) return\n\n    const previouslyFocused = (document.activeElement as HTMLElement | null) ?? null\n\n    // Initial focus: prefer first interactive child; fall back to root itself\n    // so keyboard users land inside the dialog.\n    const focusables = getFocusable(root)\n    if (focusables.length > 0) {\n      focusables[0].focus()\n    } else {\n      if (!root.hasAttribute('tabindex')) root.setAttribute('tabindex', '-1')\n      root.focus()\n    }\n\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return\n      const items = getFocusable(root)\n      if (items.length === 0) {\n        e.preventDefault()\n        root.focus()\n        return\n      }\n      const first = items[0]\n      const last = items[items.length - 1]\n      const activeEl = document.activeElement as HTMLElement | null\n      // If focus has escaped the trap entirely, pull it back to a safe edge.\n      if (!activeEl || !root.contains(activeEl)) {\n        e.preventDefault()\n        ;(e.shiftKey ? last : first).focus()\n        return\n      }\n      if (e.shiftKey && activeEl === first) {\n        e.preventDefault()\n        last.focus()\n      } else if (!e.shiftKey && activeEl === last) {\n        e.preventDefault()\n        first.focus()\n      }\n    }\n\n    document.addEventListener('keydown', onKey, true)\n    return () => {\n      document.removeEventListener('keydown', onKey, true)\n      // Best-effort restore — the original element may have been removed\n      // from the DOM while the overlay was open.\n      if (previouslyFocused && previouslyFocused.isConnected) {\n        try {\n          previouslyFocused.focus()\n        } catch {\n          /* element no longer focusable */\n        }\n      }\n    }\n  }, [ref, active])\n}\n"],"names":["useEffect","FOCUSABLE_SELECTOR","join","isVisible","el","hidden","rects","getClientRects","length","getFocusable","root","nodes","querySelectorAll","out","n","push","useFocusTrap","ref","active","current","previouslyFocused","document","activeElement","focusables","focus","hasAttribute","setAttribute","onKey","e","key","items","preventDefault","first","last","activeEl","contains","shiftKey","addEventListener","removeEventListener","isConnected"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAwB,QAAO;AAEjD,MAAMC,qBAAqB;IACzB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAEP,MAAMC,YAAY,CAACC;IACjB,IAAIA,GAAGC,MAAM,EAAE,OAAO;IACtB,MAAMC,QAAQF,GAAGG,cAAc;IAC/B,OAAOD,MAAME,MAAM,GAAG;AACxB;AAEA,MAAMC,eAAe,CAACC;IACpB,MAAMC,QAAQD,KAAKE,gBAAgB,CAAcX;IACjD,MAAMY,MAAqB,EAAE;IAC7B,KAAK,MAAMC,KAAKH,MAAO,IAAIR,UAAUW,IAAID,IAAIE,IAAI,CAACD;IAClD,OAAOD;AACT;AAEA,OAAO,MAAMG,eAAe,CAC1BC,KACAC,SAAkB,IAAI;IAEtBlB,UAAU;QACR,IAAI,CAACkB,QAAQ;QACb,MAAMR,OAAOO,IAAIE,OAAO;QACxB,IAAI,CAACT,MAAM;QAEX,MAAMU,oBAAoB,AAACC,SAASC,aAAa,IAA2B;QAE5E,0EAA0E;QAC1E,4CAA4C;QAC5C,MAAMC,aAAad,aAAaC;QAChC,IAAIa,WAAWf,MAAM,GAAG,GAAG;YACzBe,UAAU,CAAC,EAAE,CAACC,KAAK;QACrB,OAAO;YACL,IAAI,CAACd,KAAKe,YAAY,CAAC,aAAaf,KAAKgB,YAAY,CAAC,YAAY;YAClEhB,KAAKc,KAAK;QACZ;QAEA,MAAMG,QAAQ,CAACC;YACb,IAAIA,EAAEC,GAAG,KAAK,OAAO;YACrB,MAAMC,QAAQrB,aAAaC;YAC3B,IAAIoB,MAAMtB,MAAM,KAAK,GAAG;gBACtBoB,EAAEG,cAAc;gBAChBrB,KAAKc,KAAK;gBACV;YACF;YACA,MAAMQ,QAAQF,KAAK,CAAC,EAAE;YACtB,MAAMG,OAAOH,KAAK,CAACA,MAAMtB,MAAM,GAAG,EAAE;YACpC,MAAM0B,WAAWb,SAASC,aAAa;YACvC,uEAAuE;YACvE,IAAI,CAACY,YAAY,CAACxB,KAAKyB,QAAQ,CAACD,WAAW;gBACzCN,EAAEG,cAAc;gBACdH,CAAAA,EAAEQ,QAAQ,GAAGH,OAAOD,KAAI,EAAGR,KAAK;gBAClC;YACF;YACA,IAAII,EAAEQ,QAAQ,IAAIF,aAAaF,OAAO;gBACpCJ,EAAEG,cAAc;gBAChBE,KAAKT,KAAK;YACZ,OAAO,IAAI,CAACI,EAAEQ,QAAQ,IAAIF,aAAaD,MAAM;gBAC3CL,EAAEG,cAAc;gBAChBC,MAAMR,KAAK;YACb;QACF;QAEAH,SAASgB,gBAAgB,CAAC,WAAWV,OAAO;QAC5C,OAAO;YACLN,SAASiB,mBAAmB,CAAC,WAAWX,OAAO;YAC/C,mEAAmE;YACnE,2CAA2C;YAC3C,IAAIP,qBAAqBA,kBAAkBmB,WAAW,EAAE;gBACtD,IAAI;oBACFnB,kBAAkBI,KAAK;gBACzB,EAAE,OAAM;gBACN,+BAA+B,GACjC;YACF;QACF;IACF,GAAG;QAACP;QAAKC;KAAO;AAClB,EAAC"}

package/dist/hooks/useFullscreenOverlay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useFullscreenOverlay: (isFullscreen: boolean, onExitFullscreen: () => void) => React.RefObject<HTMLDivElement | null>;

package/dist/hooks/useFullscreenOverlay.js

@@ -0,0 +1,30 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+export const useFullscreenOverlay = (isFullscreen, onExitFullscreen)=>{
+    const overlayRef = useRef(null);
+    // Mutable ref so the fullscreenchange listener can call the latest handler
+    // without re-binding when the consumer recreates its callback.
+    const onExitRef = useRef(onExitFullscreen);
+    onExitRef.current = onExitFullscreen;
+    useEffect(()=>{
+        const root = overlayRef.current;
+        if (!root) return;
+        if (isFullscreen && !document.fullscreenElement) {
+            // Some browsers reject requestFullscreen outside a user gesture.
+            root.requestFullscreen?.().catch(()=>{});
+        } else if (!isFullscreen && document.fullscreenElement === root) {
+            document.exitFullscreen?.().catch(()=>{});
+        }
+        if (!isFullscreen) return;
+        const onFsChange = ()=>{
+            if (!document.fullscreenElement) onExitRef.current();
+        };
+        document.addEventListener('fullscreenchange', onFsChange);
+        return ()=>document.removeEventListener('fullscreenchange', onFsChange);
+    }, [
+        isFullscreen
+    ]);
+    return overlayRef;
+};
+
+//# sourceMappingURL=useFullscreenOverlay.js.map

package/dist/hooks/useFullscreenOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useFullscreenOverlay.ts"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef } from 'react'\n\nexport const useFullscreenOverlay = (\n  isFullscreen: boolean,\n  onExitFullscreen: () => void,\n): React.RefObject<HTMLDivElement | null> => {\n  const overlayRef = useRef<HTMLDivElement | null>(null)\n\n  // Mutable ref so the fullscreenchange listener can call the latest handler\n  // without re-binding when the consumer recreates its callback.\n  const onExitRef = useRef(onExitFullscreen)\n  onExitRef.current = onExitFullscreen\n\n  useEffect(() => {\n    const root = overlayRef.current\n    if (!root) return\n\n    if (isFullscreen && !document.fullscreenElement) {\n      // Some browsers reject requestFullscreen outside a user gesture.\n      root.requestFullscreen?.().catch(() => {})\n    } else if (!isFullscreen && document.fullscreenElement === root) {\n      document.exitFullscreen?.().catch(() => {})\n    }\n\n    if (!isFullscreen) return\n\n    const onFsChange = () => {\n      if (!document.fullscreenElement) onExitRef.current()\n    }\n    document.addEventListener('fullscreenchange', onFsChange)\n    return () => document.removeEventListener('fullscreenchange', onFsChange)\n  }, [isFullscreen])\n\n  return overlayRef\n}\n"],"names":["React","useEffect","useRef","useFullscreenOverlay","isFullscreen","onExitFullscreen","overlayRef","onExitRef","current","root","document","fullscreenElement","requestFullscreen","catch","exitFullscreen","onFsChange","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,OAAOA,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,OAAO,MAAMC,uBAAuB,CAClCC,cACAC;IAEA,MAAMC,aAAaJ,OAA8B;IAEjD,2EAA2E;IAC3E,+DAA+D;IAC/D,MAAMK,YAAYL,OAAOG;IACzBE,UAAUC,OAAO,GAAGH;IAEpBJ,UAAU;QACR,MAAMQ,OAAOH,WAAWE,OAAO;QAC/B,IAAI,CAACC,MAAM;QAEX,IAAIL,gBAAgB,CAACM,SAASC,iBAAiB,EAAE;YAC/C,iEAAiE;YACjEF,KAAKG,iBAAiB,KAAKC,MAAM,KAAO;QAC1C,OAAO,IAAI,CAACT,gBAAgBM,SAASC,iBAAiB,KAAKF,MAAM;YAC/DC,SAASI,cAAc,KAAKD,MAAM,KAAO;QAC3C;QAEA,IAAI,CAACT,cAAc;QAEnB,MAAMW,aAAa;YACjB,IAAI,CAACL,SAASC,iBAAiB,EAAEJ,UAAUC,OAAO;QACpD;QACAE,SAASM,gBAAgB,CAAC,oBAAoBD;QAC9C,OAAO,IAAML,SAASO,mBAAmB,CAAC,oBAAoBF;IAChE,GAAG;QAACX;KAAa;IAEjB,OAAOE;AACT,EAAC"}

package/dist/hooks/useIframeResizeObserver.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare const useIframeResizeObserver: (iframeRef: RefObject<HTMLIFrameElement | null>, onIframeWidthChange?: (width: number) => void) => void;

package/dist/hooks/useIframeResizeObserver.js

@@ -0,0 +1,20 @@
+'use client';
+import { useEffect } from 'react';
+export const useIframeResizeObserver = (iframeRef, onIframeWidthChange)=>{
+    useEffect(()=>{
+        const iframe = iframeRef.current;
+        if (!iframe || !onIframeWidthChange || typeof ResizeObserver === 'undefined') return;
+        onIframeWidthChange(iframe.clientWidth);
+        const ro = new ResizeObserver((entries)=>{
+            const w = entries[0]?.contentRect?.width;
+            if (typeof w === 'number') onIframeWidthChange(Math.round(w));
+        });
+        ro.observe(iframe);
+        return ()=>ro.disconnect();
+    }, [
+        iframeRef,
+        onIframeWidthChange
+    ]);
+};
+
+//# sourceMappingURL=useIframeResizeObserver.js.map

package/dist/hooks/useIframeResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useIframeResizeObserver.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, type RefObject } from 'react'\n\nexport const useIframeResizeObserver = (\n  iframeRef: RefObject<HTMLIFrameElement | null>,\n  onIframeWidthChange?: (width: number) => void,\n): void => {\n  useEffect(() => {\n    const iframe = iframeRef.current\n    if (!iframe || !onIframeWidthChange || typeof ResizeObserver === 'undefined') return\n    onIframeWidthChange(iframe.clientWidth)\n    const ro = new ResizeObserver((entries) => {\n      const w = entries[0]?.contentRect?.width\n      if (typeof w === 'number') onIframeWidthChange(Math.round(w))\n    })\n    ro.observe(iframe)\n    return () => ro.disconnect()\n  }, [iframeRef, onIframeWidthChange])\n}\n"],"names":["useEffect","useIframeResizeObserver","iframeRef","onIframeWidthChange","iframe","current","ResizeObserver","clientWidth","ro","entries","w","contentRect","width","Math","round","observe","disconnect"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAwB,QAAO;AAEjD,OAAO,MAAMC,0BAA0B,CACrCC,WACAC;IAEAH,UAAU;QACR,MAAMI,SAASF,UAAUG,OAAO;QAChC,IAAI,CAACD,UAAU,CAACD,uBAAuB,OAAOG,mBAAmB,aAAa;QAC9EH,oBAAoBC,OAAOG,WAAW;QACtC,MAAMC,KAAK,IAAIF,eAAe,CAACG;YAC7B,MAAMC,IAAID,OAAO,CAAC,EAAE,EAAEE,aAAaC;YACnC,IAAI,OAAOF,MAAM,UAAUP,oBAAoBU,KAAKC,KAAK,CAACJ;QAC5D;QACAF,GAAGO,OAAO,CAACX;QACX,OAAO,IAAMI,GAAGQ,UAAU;IAC5B,GAAG;QAACd;QAAWC;KAAoB;AACrC,EAAC"}

package/dist/hooks/useLatestRef.d.ts

@@ -0,0 +1,6 @@
+import { type MutableRefObject } from 'react';
+/**
+ * Mirror a value into a ref so long-lived listeners / effects can read the
+ * latest value without re-binding.
+ */
+export declare const useLatestRef: <T>(value: T) => MutableRefObject<T>;

package/dist/hooks/useLatestRef.js

@@ -0,0 +1,12 @@
+'use client';
+import { useRef } from 'react';
+/**
+ * Mirror a value into a ref so long-lived listeners / effects can read the
+ * latest value without re-binding.
+ */ export const useLatestRef = (value)=>{
+    const ref = useRef(value);
+    ref.current = value;
+    return ref;
+};
+
+//# sourceMappingURL=useLatestRef.js.map

package/dist/hooks/useLatestRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useLatestRef.ts"],"sourcesContent":["'use client'\n\nimport { useRef, type MutableRefObject } from 'react'\n\n/**\n * Mirror a value into a ref so long-lived listeners / effects can read the\n * latest value without re-binding.\n */\nexport const useLatestRef = <T>(value: T): MutableRefObject<T> => {\n  const ref = useRef(value)\n  ref.current = value\n  return ref\n}\n"],"names":["useRef","useLatestRef","value","ref","current"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAA+B,QAAO;AAErD;;;CAGC,GACD,OAAO,MAAMC,eAAe,CAAIC;IAC9B,MAAMC,MAAMH,OAAOE;IACnBC,IAAIC,OAAO,GAAGF;IACd,OAAOC;AACT,EAAC"}

package/dist/hooks/useMainWrapperPortal.d.ts

@@ -0,0 +1 @@
+export declare const useMainWrapperPortal: (enabled: boolean, adminPortalSelector?: string) => HTMLElement | null;

package/dist/hooks/useMainWrapperPortal.js

@@ -0,0 +1,64 @@
+'use client';
+import { useEffect, useState } from 'react';
+const DEFAULT_ADMIN_WRAPPER_SELECTOR = 'main[class*="collection-edit"] [class*="__main-wrapper"], main[class*="global-edit"] [class*="__main-wrapper"]';
+// WeakSet so multiple plugin instances on the same origin each get their
+// own warning instead of falling silent after the first one fires.
+const warnedDocs = new WeakSet();
+const resolveMountNode = (selector)=>{
+    if (typeof document === 'undefined') return null;
+    const target = document.querySelector(selector);
+    if (target) return target;
+    if (process.env.NODE_ENV !== 'production' && !warnedDocs.has(document)) {
+        warnedDocs.add(document);
+        console.warn(`[better-editor] No element matched "${selector}" — the Payload admin DOM may have changed. Falling back to <main> / <body>. You can override the selector via BetterEditorConfig.adminPortalSelector.`);
+    }
+    return document.querySelector('main') ?? document.body ?? null;
+};
+export const useMainWrapperPortal = (enabled, adminPortalSelector)=>{
+    const [mountNode, setMountNode] = useState(null);
+    useEffect(()=>{
+        if (!enabled || typeof document === 'undefined') return;
+        const main = resolveMountNode(adminPortalSelector ?? DEFAULT_ADMIN_WRAPPER_SELECTOR);
+        if (!main) return;
+        const html = document.documentElement;
+        const body = document.body;
+        const prev = {
+            position: main.style.position,
+            overflow: main.style.overflow,
+            height: main.style.height,
+            htmlOverflow: html.style.overflow,
+            bodyOverflow: body.style.overflow
+        };
+        if (!main.style.position) main.style.position = 'relative';
+        main.style.overflow = 'hidden';
+        // Lock outer page scroll so wheel events from iframe/sidebar don't
+        // also scroll the admin shell underneath.
+        html.style.overflow = 'hidden';
+        body.style.overflow = 'hidden';
+        // Without this clamp the wrapper grows with the underlying form
+        // (~thousands of pixels) and the iframe + sidebar never get their
+        // own scroll containers.
+        const updateHeight = ()=>{
+            const top = main.getBoundingClientRect().top;
+            main.style.height = `${Math.max(0, window.innerHeight - top)}px`;
+        };
+        updateHeight();
+        window.addEventListener('resize', updateHeight);
+        setMountNode(main);
+        return ()=>{
+            window.removeEventListener('resize', updateHeight);
+            main.style.position = prev.position;
+            main.style.overflow = prev.overflow;
+            main.style.height = prev.height;
+            html.style.overflow = prev.htmlOverflow;
+            body.style.overflow = prev.bodyOverflow;
+            setMountNode(null);
+        };
+    }, [
+        enabled,
+        adminPortalSelector
+    ]);
+    return mountNode;
+};
+
+//# sourceMappingURL=useMainWrapperPortal.js.map

package/dist/hooks/useMainWrapperPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useMainWrapperPortal.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\n\nconst DEFAULT_ADMIN_WRAPPER_SELECTOR =\n  'main[class*=\"collection-edit\"] [class*=\"__main-wrapper\"], main[class*=\"global-edit\"] [class*=\"__main-wrapper\"]'\n\n// WeakSet so multiple plugin instances on the same origin each get their\n// own warning instead of falling silent after the first one fires.\nconst warnedDocs = new WeakSet<Document>()\n\nconst resolveMountNode = (selector: string): HTMLElement | null => {\n  if (typeof document === 'undefined') return null\n  const target = document.querySelector<HTMLElement>(selector)\n  if (target) return target\n\n  if (process.env.NODE_ENV !== 'production' && !warnedDocs.has(document)) {\n    warnedDocs.add(document)\n\n    console.warn(\n      `[better-editor] No element matched \"${selector}\" — the Payload admin DOM may have changed. Falling back to <main> / <body>. You can override the selector via BetterEditorConfig.adminPortalSelector.`,\n    )\n  }\n\n  return document.querySelector<HTMLElement>('main') ?? document.body ?? null\n}\n\nexport const useMainWrapperPortal = (\n  enabled: boolean,\n  adminPortalSelector?: string,\n): HTMLElement | null => {\n  const [mountNode, setMountNode] = useState<HTMLElement | null>(null)\n\n  useEffect(() => {\n    if (!enabled || typeof document === 'undefined') return\n\n    const main = resolveMountNode(adminPortalSelector ?? DEFAULT_ADMIN_WRAPPER_SELECTOR)\n    if (!main) return\n\n    const html = document.documentElement\n    const body = document.body\n\n    const prev = {\n      position: main.style.position,\n      overflow: main.style.overflow,\n      height: main.style.height,\n      htmlOverflow: html.style.overflow,\n      bodyOverflow: body.style.overflow,\n    }\n\n    if (!main.style.position) main.style.position = 'relative'\n    main.style.overflow = 'hidden'\n\n    // Lock outer page scroll so wheel events from iframe/sidebar don't\n    // also scroll the admin shell underneath.\n    html.style.overflow = 'hidden'\n    body.style.overflow = 'hidden'\n\n    // Without this clamp the wrapper grows with the underlying form\n    // (~thousands of pixels) and the iframe + sidebar never get their\n    // own scroll containers.\n    const updateHeight = () => {\n      const top = main.getBoundingClientRect().top\n      main.style.height = `${Math.max(0, window.innerHeight - top)}px`\n    }\n    updateHeight()\n    window.addEventListener('resize', updateHeight)\n\n    setMountNode(main)\n\n    return () => {\n      window.removeEventListener('resize', updateHeight)\n      main.style.position = prev.position\n      main.style.overflow = prev.overflow\n      main.style.height = prev.height\n      html.style.overflow = prev.htmlOverflow\n      body.style.overflow = prev.bodyOverflow\n      setMountNode(null)\n    }\n  }, [enabled, adminPortalSelector])\n\n  return mountNode\n}\n"],"names":["useEffect","useState","DEFAULT_ADMIN_WRAPPER_SELECTOR","warnedDocs","WeakSet","resolveMountNode","selector","document","target","querySelector","process","env","NODE_ENV","has","add","console","warn","body","useMainWrapperPortal","enabled","adminPortalSelector","mountNode","setMountNode","main","html","documentElement","prev","position","style","overflow","height","htmlOverflow","bodyOverflow","updateHeight","top","getBoundingClientRect","Math","max","window","innerHeight","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAE3C,MAAMC,iCACJ;AAEF,yEAAyE;AACzE,mEAAmE;AACnE,MAAMC,aAAa,IAAIC;AAEvB,MAAMC,mBAAmB,CAACC;IACxB,IAAI,OAAOC,aAAa,aAAa,OAAO;IAC5C,MAAMC,SAASD,SAASE,aAAa,CAAcH;IACnD,IAAIE,QAAQ,OAAOA;IAEnB,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAACT,WAAWU,GAAG,CAACN,WAAW;QACtEJ,WAAWW,GAAG,CAACP;QAEfQ,QAAQC,IAAI,CACV,CAAC,oCAAoC,EAAEV,SAAS,sJAAsJ,CAAC;IAE3M;IAEA,OAAOC,SAASE,aAAa,CAAc,WAAWF,SAASU,IAAI,IAAI;AACzE;AAEA,OAAO,MAAMC,uBAAuB,CAClCC,SACAC;IAEA,MAAM,CAACC,WAAWC,aAAa,GAAGrB,SAA6B;IAE/DD,UAAU;QACR,IAAI,CAACmB,WAAW,OAAOZ,aAAa,aAAa;QAEjD,MAAMgB,OAAOlB,iBAAiBe,uBAAuBlB;QACrD,IAAI,CAACqB,MAAM;QAEX,MAAMC,OAAOjB,SAASkB,eAAe;QACrC,MAAMR,OAAOV,SAASU,IAAI;QAE1B,MAAMS,OAAO;YACXC,UAAUJ,KAAKK,KAAK,CAACD,QAAQ;YAC7BE,UAAUN,KAAKK,KAAK,CAACC,QAAQ;YAC7BC,QAAQP,KAAKK,KAAK,CAACE,MAAM;YACzBC,cAAcP,KAAKI,KAAK,CAACC,QAAQ;YACjCG,cAAcf,KAAKW,KAAK,CAACC,QAAQ;QACnC;QAEA,IAAI,CAACN,KAAKK,KAAK,CAACD,QAAQ,EAAEJ,KAAKK,KAAK,CAACD,QAAQ,GAAG;QAChDJ,KAAKK,KAAK,CAACC,QAAQ,GAAG;QAEtB,mEAAmE;QACnE,0CAA0C;QAC1CL,KAAKI,KAAK,CAACC,QAAQ,GAAG;QACtBZ,KAAKW,KAAK,CAACC,QAAQ,GAAG;QAEtB,gEAAgE;QAChE,kEAAkE;QAClE,yBAAyB;QACzB,MAAMI,eAAe;YACnB,MAAMC,MAAMX,KAAKY,qBAAqB,GAAGD,GAAG;YAC5CX,KAAKK,KAAK,CAACE,MAAM,GAAG,GAAGM,KAAKC,GAAG,CAAC,GAAGC,OAAOC,WAAW,GAAGL,KAAK,EAAE,CAAC;QAClE;QACAD;QACAK,OAAOE,gBAAgB,CAAC,UAAUP;QAElCX,aAAaC;QAEb,OAAO;YACLe,OAAOG,mBAAmB,CAAC,UAAUR;YACrCV,KAAKK,KAAK,CAACD,QAAQ,GAAGD,KAAKC,QAAQ;YACnCJ,KAAKK,KAAK,CAACC,QAAQ,GAAGH,KAAKG,QAAQ;YACnCN,KAAKK,KAAK,CAACE,MAAM,GAAGJ,KAAKI,MAAM;YAC/BN,KAAKI,KAAK,CAACC,QAAQ,GAAGH,KAAKK,YAAY;YACvCd,KAAKW,KAAK,CAACC,QAAQ,GAAGH,KAAKM,YAAY;YACvCV,aAAa;QACf;IACF,GAAG;QAACH;QAASC;KAAoB;IAEjC,OAAOC;AACT,EAAC"}

package/dist/hooks/useOverlayKeyboard.d.ts

@@ -0,0 +1,6 @@
+import { useEditorHistory } from '../state/useEditorHistory';
+export type UseOverlayKeyboardArgs = {
+    onClose: () => void;
+    history: ReturnType<typeof useEditorHistory>;
+};
+export declare const useOverlayKeyboard: ({ onClose, history }: UseOverlayKeyboardArgs) => void;

package/dist/hooks/useOverlayKeyboard.js

@@ -0,0 +1,43 @@
+'use client';
+import { useEffect } from 'react';
+import { useLatestRef } from './useLatestRef';
+const EDITABLE_TAGS = new Set([
+    'INPUT',
+    'TEXTAREA',
+    'SELECT'
+]);
+// Don't hijack Escape away from text inputs / native dropdowns / rich text
+// editors — users expect it to clear/blur the field first.
+const isEditableTarget = (el)=>!!el && (EDITABLE_TAGS.has(el.tagName) || el.isContentEditable === true);
+export const useOverlayKeyboard = ({ onClose, history })=>{
+    const handlersRef = useLatestRef({
+        onClose,
+        history
+    });
+    useEffect(()=>{
+        const onKey = (e)=>{
+            if (e.key === 'Escape') {
+                if (isEditableTarget(document.activeElement)) return;
+                handlersRef.current.onClose();
+                return;
+            }
+            if (!(e.metaKey || e.ctrlKey)) return;
+            const k = e.key.toLowerCase();
+            if (k === 'z') {
+                e.preventDefault();
+                const { history: h } = handlersRef.current;
+                if (e.shiftKey) h.redo();
+                else h.undo();
+            } else if (k === 'y') {
+                e.preventDefault();
+                handlersRef.current.history.redo();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return ()=>window.removeEventListener('keydown', onKey);
+    }, [
+        handlersRef
+    ]);
+};
+
+//# sourceMappingURL=useOverlayKeyboard.js.map

package/dist/hooks/useOverlayKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useOverlayKeyboard.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\nimport { useEditorHistory } from '../state/useEditorHistory'\nimport { useLatestRef } from './useLatestRef'\n\nexport type UseOverlayKeyboardArgs = {\n  onClose: () => void\n  history: ReturnType<typeof useEditorHistory>\n}\n\nconst EDITABLE_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT'])\n\n// Don't hijack Escape away from text inputs / native dropdowns / rich text\n// editors — users expect it to clear/blur the field first.\nconst isEditableTarget = (el: Element | null): boolean =>\n  !!el && (EDITABLE_TAGS.has(el.tagName) || (el as HTMLElement).isContentEditable === true)\n\nexport const useOverlayKeyboard = ({ onClose, history }: UseOverlayKeyboardArgs): void => {\n  const handlersRef = useLatestRef({ onClose, history })\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        if (isEditableTarget(document.activeElement)) return\n        handlersRef.current.onClose()\n        return\n      }\n      if (!(e.metaKey || e.ctrlKey)) return\n      const k = e.key.toLowerCase()\n      if (k === 'z') {\n        e.preventDefault()\n        const { history: h } = handlersRef.current\n        if (e.shiftKey) h.redo()\n        else h.undo()\n      } else if (k === 'y') {\n        e.preventDefault()\n        handlersRef.current.history.redo()\n      }\n    }\n    window.addEventListener('keydown', onKey)\n    return () => window.removeEventListener('keydown', onKey)\n  }, [handlersRef])\n}\n"],"names":["useEffect","useLatestRef","EDITABLE_TAGS","Set","isEditableTarget","el","has","tagName","isContentEditable","useOverlayKeyboard","onClose","history","handlersRef","onKey","e","key","document","activeElement","current","metaKey","ctrlKey","k","toLowerCase","preventDefault","h","shiftKey","redo","undo","window","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAO;AAEjC,SAASC,YAAY,QAAQ,iBAAgB;AAO7C,MAAMC,gBAAgB,IAAIC,IAAI;IAAC;IAAS;IAAY;CAAS;AAE7D,2EAA2E;AAC3E,2DAA2D;AAC3D,MAAMC,mBAAmB,CAACC,KACxB,CAAC,CAACA,MAAOH,CAAAA,cAAcI,GAAG,CAACD,GAAGE,OAAO,KAAK,AAACF,GAAmBG,iBAAiB,KAAK,IAAG;AAEzF,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,OAAO,EAAEC,OAAO,EAA0B;IAC7E,MAAMC,cAAcX,aAAa;QAAES;QAASC;IAAQ;IAEpDX,UAAU;QACR,MAAMa,QAAQ,CAACC;YACb,IAAIA,EAAEC,GAAG,KAAK,UAAU;gBACtB,IAAIX,iBAAiBY,SAASC,aAAa,GAAG;gBAC9CL,YAAYM,OAAO,CAACR,OAAO;gBAC3B;YACF;YACA,IAAI,CAAEI,CAAAA,EAAEK,OAAO,IAAIL,EAAEM,OAAO,AAAD,GAAI;YAC/B,MAAMC,IAAIP,EAAEC,GAAG,CAACO,WAAW;YAC3B,IAAID,MAAM,KAAK;gBACbP,EAAES,cAAc;gBAChB,MAAM,EAAEZ,SAASa,CAAC,EAAE,GAAGZ,YAAYM,OAAO;gBAC1C,IAAIJ,EAAEW,QAAQ,EAAED,EAAEE,IAAI;qBACjBF,EAAEG,IAAI;YACb,OAAO,IAAIN,MAAM,KAAK;gBACpBP,EAAES,cAAc;gBAChBX,YAAYM,OAAO,CAACP,OAAO,CAACe,IAAI;YAClC;QACF;QACAE,OAAOC,gBAAgB,CAAC,WAAWhB;QACnC,OAAO,IAAMe,OAAOE,mBAAmB,CAAC,WAAWjB;IACrD,GAAG;QAACD;KAAY;AAClB,EAAC"}

package/dist/hooks/usePreviewBinding.d.ts

@@ -0,0 +1,28 @@
+import { type RefObject } from 'react';
+import { HoverToolbarController } from '../preview/HoverToolbarController';
+import type { BlockActionMessage } from '../preview/protocol';
+export type PreviewBindingSettings = {
+    hoverColorTopLevel: string;
+    hoverColorNested: string;
+    hoverOutlineWidth: number;
+    showHoverToolbar: boolean;
+    hoverToolbarPosition: import('../internal/constants').HoverToolbarPosition;
+};
+export type UsePreviewBindingArgs = {
+    iframeRef: RefObject<HTMLIFrameElement | null>;
+    settings: PreviewBindingSettings;
+    interactModeRef: RefObject<boolean>;
+    onFocusBlock: (id: string) => void;
+    onBlockAction: (id: string, action: BlockActionMessage['action']) => void;
+    onLoadingChange: (loading: boolean) => void;
+};
+export type UsePreviewBindingReturn = {
+    controllerRef: RefObject<HoverToolbarController | null>;
+    isBoundRef: RefObject<boolean>;
+};
+/**
+ * Owns the iframe load → install styles + click handler + hover toolbar
+ * lifecycle. Idempotent: tears down previous bindings before installing
+ * new ones, and unbinds on unmount.
+ */
+export declare const usePreviewBinding: ({ iframeRef, settings, interactModeRef, onFocusBlock, onBlockAction, onLoadingChange, }: UsePreviewBindingArgs) => UsePreviewBindingReturn;

package/dist/hooks/usePreviewBinding.js

@@ -0,0 +1,108 @@
+'use client';
+import { useCallback, useEffect, useRef } from 'react';
+import { HoverToolbarController } from '../preview/HoverToolbarController';
+import { installClickToFocus } from '../preview/installClickToFocus';
+import { installHoverStyles } from '../preview/installHoverStyles';
+import { BLOCK_ID_SELECTOR } from '../internal/dom';
+import { getSameOriginDocument } from '../internal/iframe';
+import { useLatestRef } from './useLatestRef';
+/**
+ * Owns the iframe load → install styles + click handler + hover toolbar
+ * lifecycle. Idempotent: tears down previous bindings before installing
+ * new ones, and unbinds on unmount.
+ */ export const usePreviewBinding = ({ iframeRef, settings, interactModeRef, onFocusBlock, onBlockAction, onLoadingChange })=>{
+    const teardownRef = useRef(null);
+    const controllerRef = useRef(null);
+    const isBoundRef = useRef(false);
+    // One-shot flags so dev-only console warnings don't repeat on every
+    // iframe re-load during a single editor session.
+    const warnedMissingBlocksRef = useRef(false);
+    const warnedCrossOriginRef = useRef(false);
+    const settingsRef = useLatestRef(settings);
+    const onFocusBlockRef = useLatestRef(onFocusBlock);
+    const onBlockActionRef = useLatestRef(onBlockAction);
+    const onLoadingChangeRef = useLatestRef(onLoadingChange);
+    const bindToDocument = useCallback((doc)=>{
+        teardownRef.current?.();
+        controllerRef.current?.destroy();
+        controllerRef.current = null;
+        const s = settingsRef.current;
+        const removeStyles = installHoverStyles(doc, {
+            topColor: s.hoverColorTopLevel,
+            nestedColor: s.hoverColorNested,
+            outlineWidth: s.hoverOutlineWidth
+        });
+        const removeClick = installClickToFocus(doc, (id)=>onFocusBlockRef.current(id), {
+            isEnabled: ()=>!interactModeRef.current
+        });
+        if (s.showHoverToolbar) {
+            controllerRef.current = new HoverToolbarController(doc, {
+                position: s.hoverToolbarPosition,
+                outlineWidth: s.hoverOutlineWidth,
+                onAction: (id, action)=>onBlockActionRef.current(id, action)
+            });
+        }
+        // Dev-only sanity check: zero [data-better-editor-id] elements means
+        // the consumer forgot to spread getBlockProps() on their block wrappers
+        // (or the page just has no blocks yet — both look identical from here).
+        // Warn at most once per editor session to avoid console spam.
+        if (process.env.NODE_ENV !== 'production' && !warnedMissingBlocksRef.current) {
+            const blockCount = doc.querySelectorAll(BLOCK_ID_SELECTOR).length;
+            if (blockCount === 0) {
+                warnedMissingBlocksRef.current = true;
+                console.warn("[better-editor] no [data-better-editor-id] elements found in the preview iframe — if your page has blocks, wrap them with `getBlockProps(block)` from 'payload-better-editor/client' so click-to-edit works.");
+            }
+        }
+        isBoundRef.current = true;
+        teardownRef.current = ()=>{
+            removeStyles();
+            removeClick();
+            controllerRef.current?.destroy();
+            controllerRef.current = null;
+            isBoundRef.current = false;
+        };
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps -- refs are stable
+    []);
+    // Bind once on mount; teardown on unmount. All inputs flow through
+    // stable refs, so the load listener doesn't need to re-attach.
+    useEffect(()=>{
+        const iframe = iframeRef.current;
+        if (!iframe) return;
+        const onLoad = ()=>{
+            const doc = getSameOriginDocument(iframe);
+            if (!doc) {
+                onLoadingChangeRef.current(false);
+                if (process.env.NODE_ENV !== 'production' && !warnedCrossOriginRef.current) {
+                    warnedCrossOriginRef.current = true;
+                    console.warn('[better-editor] preview iframe is cross-origin — click-to-edit, hover styles, and the in-iframe toolbar are disabled. Serve your preview URL from the same origin as the Payload admin.');
+                }
+                return;
+            }
+            // Fresh iframes report readyState='complete' on their initial
+            // `about:blank` document before `src` has navigated. Skip and wait
+            // for the real `load` event so we don't bind to an empty body.
+            const href = doc.location.href;
+            if (!href || href === 'about:blank') return;
+            onLoadingChangeRef.current(false);
+            bindToDocument(doc);
+        };
+        if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
+            onLoad();
+        }
+        iframe.addEventListener('load', onLoad);
+        return ()=>{
+            iframe.removeEventListener('load', onLoad);
+            teardownRef.current?.();
+            teardownRef.current = null;
+            controllerRef.current?.destroy();
+            controllerRef.current = null;
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs are stable
+    }, []);
+    return {
+        controllerRef,
+        isBoundRef
+    };
+};
+
+//# sourceMappingURL=usePreviewBinding.js.map

package/dist/hooks/usePreviewBinding.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePreviewBinding.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useRef, type RefObject } from 'react'\nimport { HoverToolbarController } from '../preview/HoverToolbarController'\nimport { installClickToFocus } from '../preview/installClickToFocus'\nimport { installHoverStyles } from '../preview/installHoverStyles'\nimport type { BlockActionMessage } from '../preview/protocol'\nimport { BLOCK_ID_SELECTOR } from '../internal/dom'\nimport { getSameOriginDocument } from '../internal/iframe'\nimport { useLatestRef } from './useLatestRef'\n\nexport type PreviewBindingSettings = {\n  hoverColorTopLevel: string\n  hoverColorNested: string\n  hoverOutlineWidth: number\n  showHoverToolbar: boolean\n  hoverToolbarPosition: import('../internal/constants').HoverToolbarPosition\n}\n\nexport type UsePreviewBindingArgs = {\n  iframeRef: RefObject<HTMLIFrameElement | null>\n  settings: PreviewBindingSettings\n  interactModeRef: RefObject<boolean>\n  onFocusBlock: (id: string) => void\n  onBlockAction: (id: string, action: BlockActionMessage['action']) => void\n  onLoadingChange: (loading: boolean) => void\n}\n\nexport type UsePreviewBindingReturn = {\n  controllerRef: RefObject<HoverToolbarController | null>\n  isBoundRef: RefObject<boolean>\n}\n\n/**\n * Owns the iframe load → install styles + click handler + hover toolbar\n * lifecycle. Idempotent: tears down previous bindings before installing\n * new ones, and unbinds on unmount.\n */\nexport const usePreviewBinding = ({\n  iframeRef,\n  settings,\n  interactModeRef,\n  onFocusBlock,\n  onBlockAction,\n  onLoadingChange,\n}: UsePreviewBindingArgs): UsePreviewBindingReturn => {\n  const teardownRef = useRef<(() => void) | null>(null)\n  const controllerRef = useRef<HoverToolbarController | null>(null)\n  const isBoundRef = useRef(false)\n  // One-shot flags so dev-only console warnings don't repeat on every\n  // iframe re-load during a single editor session.\n  const warnedMissingBlocksRef = useRef(false)\n  const warnedCrossOriginRef = useRef(false)\n  const settingsRef = useLatestRef(settings)\n  const onFocusBlockRef = useLatestRef(onFocusBlock)\n  const onBlockActionRef = useLatestRef(onBlockAction)\n  const onLoadingChangeRef = useLatestRef(onLoadingChange)\n\n  const bindToDocument = useCallback(\n    (doc: Document) => {\n      teardownRef.current?.()\n      controllerRef.current?.destroy()\n      controllerRef.current = null\n\n      const s = settingsRef.current\n\n      const removeStyles = installHoverStyles(doc, {\n        topColor: s.hoverColorTopLevel,\n        nestedColor: s.hoverColorNested,\n        outlineWidth: s.hoverOutlineWidth,\n      })\n      const removeClick = installClickToFocus(doc, (id) => onFocusBlockRef.current(id), {\n        isEnabled: () => !interactModeRef.current,\n      })\n\n      if (s.showHoverToolbar) {\n        controllerRef.current = new HoverToolbarController(doc, {\n          position: s.hoverToolbarPosition,\n          outlineWidth: s.hoverOutlineWidth,\n          onAction: (id, action) => onBlockActionRef.current(id, action),\n        })\n      }\n\n      // Dev-only sanity check: zero [data-better-editor-id] elements means\n      // the consumer forgot to spread getBlockProps() on their block wrappers\n      // (or the page just has no blocks yet — both look identical from here).\n      // Warn at most once per editor session to avoid console spam.\n      if (process.env.NODE_ENV !== 'production' && !warnedMissingBlocksRef.current) {\n        const blockCount = doc.querySelectorAll(BLOCK_ID_SELECTOR).length\n        if (blockCount === 0) {\n          warnedMissingBlocksRef.current = true\n          console.warn(\n            \"[better-editor] no [data-better-editor-id] elements found in the preview iframe — if your page has blocks, wrap them with `getBlockProps(block)` from 'payload-better-editor/client' so click-to-edit works.\",\n          )\n        }\n      }\n\n      isBoundRef.current = true\n      teardownRef.current = () => {\n        removeStyles()\n        removeClick()\n        controllerRef.current?.destroy()\n        controllerRef.current = null\n        isBoundRef.current = false\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs are stable\n    [],\n  )\n\n  // Bind once on mount; teardown on unmount. All inputs flow through\n  // stable refs, so the load listener doesn't need to re-attach.\n  useEffect(() => {\n    const iframe = iframeRef.current\n    if (!iframe) return\n\n    const onLoad = () => {\n      const doc = getSameOriginDocument(iframe)\n      if (!doc) {\n        onLoadingChangeRef.current(false)\n        if (process.env.NODE_ENV !== 'production' && !warnedCrossOriginRef.current) {\n          warnedCrossOriginRef.current = true\n          console.warn(\n            '[better-editor] preview iframe is cross-origin — click-to-edit, hover styles, and the in-iframe toolbar are disabled. Serve your preview URL from the same origin as the Payload admin.',\n          )\n        }\n        return\n      }\n      // Fresh iframes report readyState='complete' on their initial\n      // `about:blank` document before `src` has navigated. Skip and wait\n      // for the real `load` event so we don't bind to an empty body.\n      const href = doc.location.href\n      if (!href || href === 'about:blank') return\n      onLoadingChangeRef.current(false)\n      bindToDocument(doc)\n    }\n\n    if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {\n      onLoad()\n    }\n    iframe.addEventListener('load', onLoad)\n\n    return () => {\n      iframe.removeEventListener('load', onLoad)\n      teardownRef.current?.()\n      teardownRef.current = null\n      controllerRef.current?.destroy()\n      controllerRef.current = null\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs are stable\n  }, [])\n\n  return { controllerRef, isBoundRef }\n}\n"],"names":["useCallback","useEffect","useRef","HoverToolbarController","installClickToFocus","installHoverStyles","BLOCK_ID_SELECTOR","getSameOriginDocument","useLatestRef","usePreviewBinding","iframeRef","settings","interactModeRef","onFocusBlock","onBlockAction","onLoadingChange","teardownRef","controllerRef","isBoundRef","warnedMissingBlocksRef","warnedCrossOriginRef","settingsRef","onFocusBlockRef","onBlockActionRef","onLoadingChangeRef","bindToDocument","doc","current","destroy","s","removeStyles","topColor","hoverColorTopLevel","nestedColor","hoverColorNested","outlineWidth","hoverOutlineWidth","removeClick","id","isEnabled","showHoverToolbar","position","hoverToolbarPosition","onAction","action","process","env","NODE_ENV","blockCount","querySelectorAll","length","console","warn","iframe","onLoad","href","location","contentDocument","readyState","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAwB,QAAO;AACtE,SAASC,sBAAsB,QAAQ,oCAAmC;AAC1E,SAASC,mBAAmB,QAAQ,iCAAgC;AACpE,SAASC,kBAAkB,QAAQ,gCAA+B;AAElE,SAASC,iBAAiB,QAAQ,kBAAiB;AACnD,SAASC,qBAAqB,QAAQ,qBAAoB;AAC1D,SAASC,YAAY,QAAQ,iBAAgB;AAwB7C;;;;CAIC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,eAAe,EACfC,YAAY,EACZC,aAAa,EACbC,eAAe,EACO;IACtB,MAAMC,cAAcd,OAA4B;IAChD,MAAMe,gBAAgBf,OAAsC;IAC5D,MAAMgB,aAAahB,OAAO;IAC1B,oEAAoE;IACpE,iDAAiD;IACjD,MAAMiB,yBAAyBjB,OAAO;IACtC,MAAMkB,uBAAuBlB,OAAO;IACpC,MAAMmB,cAAcb,aAAaG;IACjC,MAAMW,kBAAkBd,aAAaK;IACrC,MAAMU,mBAAmBf,aAAaM;IACtC,MAAMU,qBAAqBhB,aAAaO;IAExC,MAAMU,iBAAiBzB,YACrB,CAAC0B;QACCV,YAAYW,OAAO;QACnBV,cAAcU,OAAO,EAAEC;QACvBX,cAAcU,OAAO,GAAG;QAExB,MAAME,IAAIR,YAAYM,OAAO;QAE7B,MAAMG,eAAezB,mBAAmBqB,KAAK;YAC3CK,UAAUF,EAAEG,kBAAkB;YAC9BC,aAAaJ,EAAEK,gBAAgB;YAC/BC,cAAcN,EAAEO,iBAAiB;QACnC;QACA,MAAMC,cAAcjC,oBAAoBsB,KAAK,CAACY,KAAOhB,gBAAgBK,OAAO,CAACW,KAAK;YAChFC,WAAW,IAAM,CAAC3B,gBAAgBe,OAAO;QAC3C;QAEA,IAAIE,EAAEW,gBAAgB,EAAE;YACtBvB,cAAcU,OAAO,GAAG,IAAIxB,uBAAuBuB,KAAK;gBACtDe,UAAUZ,EAAEa,oBAAoB;gBAChCP,cAAcN,EAAEO,iBAAiB;gBACjCO,UAAU,CAACL,IAAIM,SAAWrB,iBAAiBI,OAAO,CAACW,IAAIM;YACzD;QACF;QAEA,qEAAqE;QACrE,wEAAwE;QACxE,wEAAwE;QACxE,8DAA8D;QAC9D,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAAC5B,uBAAuBQ,OAAO,EAAE;YAC5E,MAAMqB,aAAatB,IAAIuB,gBAAgB,CAAC3C,mBAAmB4C,MAAM;YACjE,IAAIF,eAAe,GAAG;gBACpB7B,uBAAuBQ,OAAO,GAAG;gBACjCwB,QAAQC,IAAI,CACV;YAEJ;QACF;QAEAlC,WAAWS,OAAO,GAAG;QACrBX,YAAYW,OAAO,GAAG;YACpBG;YACAO;YACApB,cAAcU,OAAO,EAAEC;YACvBX,cAAcU,OAAO,GAAG;YACxBT,WAAWS,OAAO,GAAG;QACvB;IACF,GACA,0EAA0E;IAC1E,EAAE;IAGJ,mEAAmE;IACnE,+DAA+D;IAC/D1B,UAAU;QACR,MAAMoD,SAAS3C,UAAUiB,OAAO;QAChC,IAAI,CAAC0B,QAAQ;QAEb,MAAMC,SAAS;YACb,MAAM5B,MAAMnB,sBAAsB8C;YAClC,IAAI,CAAC3B,KAAK;gBACRF,mBAAmBG,OAAO,CAAC;gBAC3B,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgB,CAAC3B,qBAAqBO,OAAO,EAAE;oBAC1EP,qBAAqBO,OAAO,GAAG;oBAC/BwB,QAAQC,IAAI,CACV;gBAEJ;gBACA;YACF;YACA,8DAA8D;YAC9D,mEAAmE;YACnE,+DAA+D;YAC/D,MAAMG,OAAO7B,IAAI8B,QAAQ,CAACD,IAAI;YAC9B,IAAI,CAACA,QAAQA,SAAS,eAAe;YACrC/B,mBAAmBG,OAAO,CAAC;YAC3BF,eAAeC;QACjB;QAEA,IAAI2B,OAAOI,eAAe,IAAIJ,OAAOI,eAAe,CAACC,UAAU,KAAK,YAAY;YAC9EJ;QACF;QACAD,OAAOM,gBAAgB,CAAC,QAAQL;QAEhC,OAAO;YACLD,OAAOO,mBAAmB,CAAC,QAAQN;YACnCtC,YAAYW,OAAO;YACnBX,YAAYW,OAAO,GAAG;YACtBV,cAAcU,OAAO,EAAEC;YACvBX,cAAcU,OAAO,GAAG;QAC1B;IACA,0EAA0E;IAC5E,GAAG,EAAE;IAEL,OAAO;QAAEV;QAAeC;IAAW;AACrC,EAAC"}

package/dist/hooks/usePreviewHandleDrag.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type UsePreviewHandleDragOptions = {
+    resizable: boolean;
+    viewportWidth?: number | null;
+    onResize?: (next: number) => void;
+};
+export type UsePreviewHandleDragReturn = {
+    isResizing: boolean;
+    onHandleMouseDown: (side: 'left' | 'right') => (e: React.MouseEvent) => void;
+};
+export declare const usePreviewHandleDrag: ({ resizable, viewportWidth, onResize, }: UsePreviewHandleDragOptions) => UsePreviewHandleDragReturn;

package/dist/hooks/usePreviewHandleDrag.js

@@ -0,0 +1,53 @@
+'use client';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { clampViewport } from '../internal/limits';
+export const usePreviewHandleDrag = ({ resizable, viewportWidth, onResize })=>{
+    const [isResizing, setIsResizing] = useState(false);
+    // Track in-flight drag so unmount mid-drag can release body styles + listeners.
+    const dragCleanupRef = useRef(null);
+    const isMountedRef = useRef(true);
+    useEffect(()=>{
+        isMountedRef.current = true;
+        return ()=>{
+            isMountedRef.current = false;
+            dragCleanupRef.current?.();
+        };
+    }, []);
+    const onHandleMouseDown = useCallback((side)=>(e)=>{
+            if (!resizable || !onResize || !viewportWidth) return;
+            e.preventDefault();
+            const startX = e.clientX;
+            const startWidth = viewportWidth;
+            // Iframe is centered; dragging either edge by N px symmetrically grows
+            // the width by 2N. Right handle: positive delta increases width.
+            const dir = side === 'right' ? 2 : -2;
+            setIsResizing(true);
+            const onMove = (ev)=>{
+                onResize(clampViewport(startWidth + (ev.clientX - startX) * dir));
+            };
+            const cleanup = ()=>{
+                window.removeEventListener('mousemove', onMove);
+                window.removeEventListener('mouseup', onUp);
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+                if (isMountedRef.current) setIsResizing(false);
+                dragCleanupRef.current = null;
+            };
+            const onUp = ()=>cleanup();
+            dragCleanupRef.current = cleanup;
+            document.body.style.cursor = 'ew-resize';
+            document.body.style.userSelect = 'none';
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+        }, [
+        resizable,
+        onResize,
+        viewportWidth
+    ]);
+    return {
+        isResizing,
+        onHandleMouseDown
+    };
+};
+
+//# sourceMappingURL=usePreviewHandleDrag.js.map