payload-better-editor 1.0.0

package/dist/hooks/usePreviewHandleDrag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePreviewHandleDrag.ts"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { clampViewport } from '../internal/limits'\n\nexport type UsePreviewHandleDragOptions = {\n  resizable: boolean\n  viewportWidth?: number | null\n  onResize?: (next: number) => void\n}\n\nexport type UsePreviewHandleDragReturn = {\n  isResizing: boolean\n  onHandleMouseDown: (side: 'left' | 'right') => (e: React.MouseEvent) => void\n}\n\nexport const usePreviewHandleDrag = ({\n  resizable,\n  viewportWidth,\n  onResize,\n}: UsePreviewHandleDragOptions): UsePreviewHandleDragReturn => {\n  const [isResizing, setIsResizing] = useState(false)\n\n  // Track in-flight drag so unmount mid-drag can release body styles + listeners.\n  const dragCleanupRef = useRef<(() => void) | null>(null)\n  const isMountedRef = useRef(true)\n  useEffect(() => {\n    isMountedRef.current = true\n    return () => {\n      isMountedRef.current = false\n      dragCleanupRef.current?.()\n    }\n  }, [])\n\n  const onHandleMouseDown = useCallback(\n    (side: 'left' | 'right') => (e: React.MouseEvent) => {\n      if (!resizable || !onResize || !viewportWidth) return\n      e.preventDefault()\n      const startX = e.clientX\n      const startWidth = viewportWidth\n      // Iframe is centered; dragging either edge by N px symmetrically grows\n      // the width by 2N. Right handle: positive delta increases width.\n      const dir = side === 'right' ? 2 : -2\n      setIsResizing(true)\n      const onMove = (ev: MouseEvent) => {\n        onResize(clampViewport(startWidth + (ev.clientX - startX) * dir))\n      }\n      const cleanup = () => {\n        window.removeEventListener('mousemove', onMove)\n        window.removeEventListener('mouseup', onUp)\n        document.body.style.cursor = ''\n        document.body.style.userSelect = ''\n        if (isMountedRef.current) setIsResizing(false)\n        dragCleanupRef.current = null\n      }\n      const onUp = () => cleanup()\n      dragCleanupRef.current = cleanup\n      document.body.style.cursor = 'ew-resize'\n      document.body.style.userSelect = 'none'\n      window.addEventListener('mousemove', onMove)\n      window.addEventListener('mouseup', onUp)\n    },\n    [resizable, onResize, viewportWidth],\n  )\n\n  return { isResizing, onHandleMouseDown }\n}\n"],"names":["React","useCallback","useEffect","useRef","useState","clampViewport","usePreviewHandleDrag","resizable","viewportWidth","onResize","isResizing","setIsResizing","dragCleanupRef","isMountedRef","current","onHandleMouseDown","side","e","preventDefault","startX","clientX","startWidth","dir","onMove","ev","cleanup","window","removeEventListener","onUp","document","body","style","cursor","userSelect","addEventListener"],"mappings":"AAAA;AAEA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AACvE,SAASC,aAAa,QAAQ,qBAAoB;AAalD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACoB;IAC5B,MAAM,CAACC,YAAYC,cAAc,GAAGP,SAAS;IAE7C,gFAAgF;IAChF,MAAMQ,iBAAiBT,OAA4B;IACnD,MAAMU,eAAeV,OAAO;IAC5BD,UAAU;QACRW,aAAaC,OAAO,GAAG;QACvB,OAAO;YACLD,aAAaC,OAAO,GAAG;YACvBF,eAAeE,OAAO;QACxB;IACF,GAAG,EAAE;IAEL,MAAMC,oBAAoBd,YACxB,CAACe,OAA2B,CAACC;YAC3B,IAAI,CAACV,aAAa,CAACE,YAAY,CAACD,eAAe;YAC/CS,EAAEC,cAAc;YAChB,MAAMC,SAASF,EAAEG,OAAO;YACxB,MAAMC,aAAab;YACnB,uEAAuE;YACvE,iEAAiE;YACjE,MAAMc,MAAMN,SAAS,UAAU,IAAI,CAAC;YACpCL,cAAc;YACd,MAAMY,SAAS,CAACC;gBACdf,SAASJ,cAAcgB,aAAa,AAACG,CAAAA,GAAGJ,OAAO,GAAGD,MAAK,IAAKG;YAC9D;YACA,MAAMG,UAAU;gBACdC,OAAOC,mBAAmB,CAAC,aAAaJ;gBACxCG,OAAOC,mBAAmB,CAAC,WAAWC;gBACtCC,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;gBAC7BH,SAASC,IAAI,CAACC,KAAK,CAACE,UAAU,GAAG;gBACjC,IAAIpB,aAAaC,OAAO,EAAEH,cAAc;gBACxCC,eAAeE,OAAO,GAAG;YAC3B;YACA,MAAMc,OAAO,IAAMH;YACnBb,eAAeE,OAAO,GAAGW;YACzBI,SAASC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG;YAC7BH,SAASC,IAAI,CAACC,KAAK,CAACE,UAAU,GAAG;YACjCP,OAAOQ,gBAAgB,CAAC,aAAaX;YACrCG,OAAOQ,gBAAgB,CAAC,WAAWN;QACrC,GACA;QAACrB;QAAWE;QAAUD;KAAc;IAGtC,OAAO;QAAEE;QAAYK;IAAkB;AACzC,EAAC"}

package/dist/hooks/usePreviewSelectionSync.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+import { HoverToolbarController } from '../preview/HoverToolbarController';
+export type UsePreviewSelectionSyncArgs = {
+    iframeRef: RefObject<HTMLIFrameElement | null>;
+    controllerRef: RefObject<HoverToolbarController | null>;
+    selectedBlockPath: string | null;
+    interactMode: boolean;
+    previewURL: string | undefined;
+};
+/**
+ * Bridges three iframe-side concerns to admin state: live-preview document
+ * events, the interact-mode body attribute, and selection sync between the
+ * sidebar and the in-iframe hover toolbar.
+ */
+export declare const usePreviewSelectionSync: ({ iframeRef, controllerRef, selectedBlockPath, interactMode, previewURL, }: UsePreviewSelectionSyncArgs) => void;

package/dist/hooks/usePreviewSelectionSync.js

@@ -0,0 +1,80 @@
+'use client';
+import { useEffect, useMemo } from 'react';
+import { useAllFormFields, useDocumentEvents, useDocumentInfo } from '@payloadcms/ui';
+import { INTERACT_BODY_ATTR } from '../preview/hover-css';
+import { getSameOriginDocument } from '../internal/iframe';
+import { useEditorHistory } from '../state/useEditorHistory';
+/**
+ * Bridges three iframe-side concerns to admin state: live-preview document
+ * events, the interact-mode body attribute, and selection sync between the
+ * sidebar and the in-iframe hover toolbar.
+ */ export const usePreviewSelectionSync = ({ iframeRef, controllerRef, selectedBlockPath, interactMode, previewURL })=>{
+    const { mostRecentUpdate } = useDocumentEvents();
+    const { id } = useDocumentInfo();
+    const previewOrigin = useMemo(()=>{
+        if (!previewURL) return null;
+        try {
+            return new URL(previewURL, window.location.origin).origin;
+        } catch  {
+            return null;
+        }
+    }, [
+        previewURL
+    ]);
+    useEffect(()=>{
+        if (!mostRecentUpdate || !previewOrigin) return;
+        if (id != null && mostRecentUpdate.id !== id) return;
+        iframeRef.current?.contentWindow?.postMessage({
+            type: 'payload-document-event'
+        }, previewOrigin);
+    }, [
+        iframeRef,
+        mostRecentUpdate,
+        id,
+        previewOrigin
+    ]);
+    const [allFields] = useAllFormFields();
+    const selectedBlockId = useMemo(()=>{
+        if (!selectedBlockPath) return null;
+        const v = allFields[`${selectedBlockPath}.id`]?.value;
+        return typeof v === 'string' ? v : null;
+    }, [
+        allFields,
+        selectedBlockPath
+    ]);
+    // Toggle the iframe body attribute that gates hover/active CSS + clicks.
+    useEffect(()=>{
+        const iframe = iframeRef.current;
+        if (!iframe) return;
+        const doc = getSameOriginDocument(iframe);
+        if (!doc) return;
+        if (interactMode) doc.body.setAttribute(INTERACT_BODY_ATTR, '');
+        else doc.body.removeAttribute(INTERACT_BODY_ATTR);
+    }, [
+        iframeRef,
+        interactMode
+    ]);
+    const { mutationToken } = useEditorHistory();
+    useEffect(()=>{
+        const controller = controllerRef.current;
+        if (!controller) return;
+        if (!selectedBlockId || interactMode) {
+            controller.deselect();
+            return;
+        }
+        // Defer one frame so the iframe DOM has settled after a mutation.
+        const view = iframeRef.current?.contentWindow;
+        const raf = view?.requestAnimationFrame(()=>controller.select(selectedBlockId));
+        return ()=>{
+            if (raf !== undefined) view?.cancelAnimationFrame(raf);
+        };
+    }, [
+        iframeRef,
+        controllerRef,
+        selectedBlockId,
+        mutationToken,
+        interactMode
+    ]);
+};
+
+//# sourceMappingURL=usePreviewSelectionSync.js.map

package/dist/hooks/usePreviewSelectionSync.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePreviewSelectionSync.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useMemo, type RefObject } from 'react'\nimport { useAllFormFields, useDocumentEvents, useDocumentInfo } from '@payloadcms/ui'\nimport { HoverToolbarController } from '../preview/HoverToolbarController'\nimport { INTERACT_BODY_ATTR } from '../preview/hover-css'\nimport { getSameOriginDocument } from '../internal/iframe'\nimport { useEditorHistory } from '../state/useEditorHistory'\n\nexport type UsePreviewSelectionSyncArgs = {\n  iframeRef: RefObject<HTMLIFrameElement | null>\n  controllerRef: RefObject<HoverToolbarController | null>\n  selectedBlockPath: string | null\n  interactMode: boolean\n  previewURL: string | undefined\n}\n\n/**\n * Bridges three iframe-side concerns to admin state: live-preview document\n * events, the interact-mode body attribute, and selection sync between the\n * sidebar and the in-iframe hover toolbar.\n */\nexport const usePreviewSelectionSync = ({\n  iframeRef,\n  controllerRef,\n  selectedBlockPath,\n  interactMode,\n  previewURL,\n}: UsePreviewSelectionSyncArgs): void => {\n  const { mostRecentUpdate } = useDocumentEvents()\n  const { id } = useDocumentInfo()\n\n  const previewOrigin = useMemo(() => {\n    if (!previewURL) return null\n    try {\n      return new URL(previewURL, window.location.origin).origin\n    } catch {\n      return null\n    }\n  }, [previewURL])\n\n  useEffect(() => {\n    if (!mostRecentUpdate || !previewOrigin) return\n    if (id != null && mostRecentUpdate.id !== id) return\n    iframeRef.current?.contentWindow?.postMessage(\n      { type: 'payload-document-event' },\n      previewOrigin,\n    )\n  }, [iframeRef, mostRecentUpdate, id, previewOrigin])\n\n  const [allFields] = useAllFormFields()\n  const selectedBlockId = useMemo<string | null>(() => {\n    if (!selectedBlockPath) return null\n    const v = allFields[`${selectedBlockPath}.id`]?.value\n    return typeof v === 'string' ? v : null\n  }, [allFields, selectedBlockPath])\n\n  // Toggle the iframe body attribute that gates hover/active CSS + clicks.\n  useEffect(() => {\n    const iframe = iframeRef.current\n    if (!iframe) return\n    const doc = getSameOriginDocument(iframe)\n    if (!doc) return\n    if (interactMode) doc.body.setAttribute(INTERACT_BODY_ATTR, '')\n    else doc.body.removeAttribute(INTERACT_BODY_ATTR)\n  }, [iframeRef, interactMode])\n\n  const { mutationToken } = useEditorHistory()\n  useEffect(() => {\n    const controller = controllerRef.current\n    if (!controller) return\n    if (!selectedBlockId || interactMode) {\n      controller.deselect()\n      return\n    }\n    // Defer one frame so the iframe DOM has settled after a mutation.\n    const view = iframeRef.current?.contentWindow\n    const raf = view?.requestAnimationFrame(() => controller.select(selectedBlockId))\n    return () => {\n      if (raf !== undefined) view?.cancelAnimationFrame(raf)\n    }\n  }, [iframeRef, controllerRef, selectedBlockId, mutationToken, interactMode])\n}\n"],"names":["useEffect","useMemo","useAllFormFields","useDocumentEvents","useDocumentInfo","INTERACT_BODY_ATTR","getSameOriginDocument","useEditorHistory","usePreviewSelectionSync","iframeRef","controllerRef","selectedBlockPath","interactMode","previewURL","mostRecentUpdate","id","previewOrigin","URL","window","location","origin","current","contentWindow","postMessage","type","allFields","selectedBlockId","v","value","iframe","doc","body","setAttribute","removeAttribute","mutationToken","controller","deselect","view","raf","requestAnimationFrame","select","undefined","cancelAnimationFrame"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,QAAwB,QAAO;AAC1D,SAASC,gBAAgB,EAAEC,iBAAiB,EAAEC,eAAe,QAAQ,iBAAgB;AAErF,SAASC,kBAAkB,QAAQ,uBAAsB;AACzD,SAASC,qBAAqB,QAAQ,qBAAoB;AAC1D,SAASC,gBAAgB,QAAQ,4BAA2B;AAU5D;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CAAC,EACtCC,SAAS,EACTC,aAAa,EACbC,iBAAiB,EACjBC,YAAY,EACZC,UAAU,EACkB;IAC5B,MAAM,EAAEC,gBAAgB,EAAE,GAAGX;IAC7B,MAAM,EAAEY,EAAE,EAAE,GAAGX;IAEf,MAAMY,gBAAgBf,QAAQ;QAC5B,IAAI,CAACY,YAAY,OAAO;QACxB,IAAI;YACF,OAAO,IAAII,IAAIJ,YAAYK,OAAOC,QAAQ,CAACC,MAAM,EAAEA,MAAM;QAC3D,EAAE,OAAM;YACN,OAAO;QACT;IACF,GAAG;QAACP;KAAW;IAEfb,UAAU;QACR,IAAI,CAACc,oBAAoB,CAACE,eAAe;QACzC,IAAID,MAAM,QAAQD,iBAAiBC,EAAE,KAAKA,IAAI;QAC9CN,UAAUY,OAAO,EAAEC,eAAeC,YAChC;YAAEC,MAAM;QAAyB,GACjCR;IAEJ,GAAG;QAACP;QAAWK;QAAkBC;QAAIC;KAAc;IAEnD,MAAM,CAACS,UAAU,GAAGvB;IACpB,MAAMwB,kBAAkBzB,QAAuB;QAC7C,IAAI,CAACU,mBAAmB,OAAO;QAC/B,MAAMgB,IAAIF,SAAS,CAAC,GAAGd,kBAAkB,GAAG,CAAC,CAAC,EAAEiB;QAChD,OAAO,OAAOD,MAAM,WAAWA,IAAI;IACrC,GAAG;QAACF;QAAWd;KAAkB;IAEjC,yEAAyE;IACzEX,UAAU;QACR,MAAM6B,SAASpB,UAAUY,OAAO;QAChC,IAAI,CAACQ,QAAQ;QACb,MAAMC,MAAMxB,sBAAsBuB;QAClC,IAAI,CAACC,KAAK;QACV,IAAIlB,cAAckB,IAAIC,IAAI,CAACC,YAAY,CAAC3B,oBAAoB;aACvDyB,IAAIC,IAAI,CAACE,eAAe,CAAC5B;IAChC,GAAG;QAACI;QAAWG;KAAa;IAE5B,MAAM,EAAEsB,aAAa,EAAE,GAAG3B;IAC1BP,UAAU;QACR,MAAMmC,aAAazB,cAAcW,OAAO;QACxC,IAAI,CAACc,YAAY;QACjB,IAAI,CAACT,mBAAmBd,cAAc;YACpCuB,WAAWC,QAAQ;YACnB;QACF;QACA,kEAAkE;QAClE,MAAMC,OAAO5B,UAAUY,OAAO,EAAEC;QAChC,MAAMgB,MAAMD,MAAME,sBAAsB,IAAMJ,WAAWK,MAAM,CAACd;QAChE,OAAO;YACL,IAAIY,QAAQG,WAAWJ,MAAMK,qBAAqBJ;QACpD;IACF,GAAG;QAAC7B;QAAWC;QAAegB;QAAiBQ;QAAetB;KAAa;AAC7E,EAAC"}

package/dist/hooks/usePreviewSettingsSync.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+import { HoverToolbarController } from '../preview/HoverToolbarController';
+import type { BlockActionMessage } from '../preview/protocol';
+import type { PreviewBindingSettings } from './usePreviewBinding';
+export type UsePreviewSettingsSyncArgs = {
+    iframeRef: RefObject<HTMLIFrameElement | null>;
+    controllerRef: RefObject<HoverToolbarController | null>;
+    isBoundRef: RefObject<boolean>;
+    settings: PreviewBindingSettings;
+    onBlockAction: (id: string, action: BlockActionMessage['action']) => void;
+};
+/**
+ * Pushes setting changes (hover colors, toolbar visibility/position) into
+ * the iframe without recreating the controller — that would lose the
+ * current selection.
+ */
+export declare const usePreviewSettingsSync: ({ iframeRef, controllerRef, isBoundRef, settings, onBlockAction, }: UsePreviewSettingsSyncArgs) => void;

package/dist/hooks/usePreviewSettingsSync.js

@@ -0,0 +1,55 @@
+'use client';
+import { useEffect } from 'react';
+import { HoverToolbarController } from '../preview/HoverToolbarController';
+import { ACTIVE_CLASS, ACTIVE_SELECTOR } from '../internal/dom';
+import { TOOLBAR_ID, setHoverVars } from '../preview/hover-css';
+import { getSameOriginDocument } from '../internal/iframe';
+/**
+ * Pushes setting changes (hover colors, toolbar visibility/position) into
+ * the iframe without recreating the controller — that would lose the
+ * current selection.
+ */ export const usePreviewSettingsSync = ({ iframeRef, controllerRef, isBoundRef, settings, onBlockAction })=>{
+    const { hoverColorTopLevel, hoverColorNested, hoverOutlineWidth, showHoverToolbar, hoverToolbarPosition } = settings;
+    useEffect(()=>{
+        if (!isBoundRef.current) return;
+        const iframe = iframeRef.current;
+        if (!iframe) return;
+        const doc = getSameOriginDocument(iframe);
+        if (!doc) return;
+        setHoverVars(doc, {
+            topColor: hoverColorTopLevel,
+            nestedColor: hoverColorNested,
+            outlineWidth: hoverOutlineWidth
+        });
+        if (showHoverToolbar) {
+            const next = {
+                position: hoverToolbarPosition,
+                outlineWidth: hoverOutlineWidth,
+                onAction: onBlockAction
+            };
+            if (controllerRef.current) {
+                controllerRef.current.update(next);
+            } else {
+                controllerRef.current = new HoverToolbarController(doc, next);
+            }
+        } else if (controllerRef.current) {
+            controllerRef.current.destroy();
+            controllerRef.current = null;
+            // Defensive: drop residue if styles outlived a previous controller.
+            doc.getElementById(TOOLBAR_ID)?.remove();
+            doc.querySelectorAll(ACTIVE_SELECTOR).forEach((el)=>el.classList.remove(ACTIVE_CLASS));
+        }
+    }, [
+        iframeRef,
+        controllerRef,
+        isBoundRef,
+        hoverColorTopLevel,
+        hoverColorNested,
+        hoverOutlineWidth,
+        showHoverToolbar,
+        hoverToolbarPosition,
+        onBlockAction
+    ]);
+};
+
+//# sourceMappingURL=usePreviewSettingsSync.js.map

package/dist/hooks/usePreviewSettingsSync.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePreviewSettingsSync.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, type RefObject } from 'react'\nimport { HoverToolbarController, type HoverToolbarOptions } from '../preview/HoverToolbarController'\nimport { ACTIVE_CLASS, ACTIVE_SELECTOR } from '../internal/dom'\nimport { TOOLBAR_ID, setHoverVars } from '../preview/hover-css'\nimport type { BlockActionMessage } from '../preview/protocol'\nimport { getSameOriginDocument } from '../internal/iframe'\nimport type { PreviewBindingSettings } from './usePreviewBinding'\n\nexport type UsePreviewSettingsSyncArgs = {\n  iframeRef: RefObject<HTMLIFrameElement | null>\n  controllerRef: RefObject<HoverToolbarController | null>\n  isBoundRef: RefObject<boolean>\n  settings: PreviewBindingSettings\n  onBlockAction: (id: string, action: BlockActionMessage['action']) => void\n}\n\n/**\n * Pushes setting changes (hover colors, toolbar visibility/position) into\n * the iframe without recreating the controller — that would lose the\n * current selection.\n */\nexport const usePreviewSettingsSync = ({\n  iframeRef,\n  controllerRef,\n  isBoundRef,\n  settings,\n  onBlockAction,\n}: UsePreviewSettingsSyncArgs): void => {\n  const {\n    hoverColorTopLevel,\n    hoverColorNested,\n    hoverOutlineWidth,\n    showHoverToolbar,\n    hoverToolbarPosition,\n  } = settings\n\n  useEffect(() => {\n    if (!isBoundRef.current) return\n    const iframe = iframeRef.current\n    if (!iframe) return\n    const doc = getSameOriginDocument(iframe)\n    if (!doc) return\n\n    setHoverVars(doc, {\n      topColor: hoverColorTopLevel,\n      nestedColor: hoverColorNested,\n      outlineWidth: hoverOutlineWidth,\n    })\n\n    if (showHoverToolbar) {\n      const next: HoverToolbarOptions = {\n        position: hoverToolbarPosition,\n        outlineWidth: hoverOutlineWidth,\n        onAction: onBlockAction,\n      }\n      if (controllerRef.current) {\n        controllerRef.current.update(next)\n      } else {\n        controllerRef.current = new HoverToolbarController(doc, next)\n      }\n    } else if (controllerRef.current) {\n      controllerRef.current.destroy()\n      controllerRef.current = null\n      // Defensive: drop residue if styles outlived a previous controller.\n      doc.getElementById(TOOLBAR_ID)?.remove()\n      doc.querySelectorAll(ACTIVE_SELECTOR).forEach((el) => el.classList.remove(ACTIVE_CLASS))\n    }\n  }, [\n    iframeRef,\n    controllerRef,\n    isBoundRef,\n    hoverColorTopLevel,\n    hoverColorNested,\n    hoverOutlineWidth,\n    showHoverToolbar,\n    hoverToolbarPosition,\n    onBlockAction,\n  ])\n}\n"],"names":["useEffect","HoverToolbarController","ACTIVE_CLASS","ACTIVE_SELECTOR","TOOLBAR_ID","setHoverVars","getSameOriginDocument","usePreviewSettingsSync","iframeRef","controllerRef","isBoundRef","settings","onBlockAction","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","current","iframe","doc","topColor","nestedColor","outlineWidth","next","position","onAction","update","destroy","getElementById","remove","querySelectorAll","forEach","el","classList"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAwB,QAAO;AACjD,SAASC,sBAAsB,QAAkC,oCAAmC;AACpG,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAiB;AAC/D,SAASC,UAAU,EAAEC,YAAY,QAAQ,uBAAsB;AAE/D,SAASC,qBAAqB,QAAQ,qBAAoB;AAW1D;;;;CAIC,GACD,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,QAAQ,EACRC,aAAa,EACc;IAC3B,MAAM,EACJC,kBAAkB,EAClBC,gBAAgB,EAChBC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACrB,GAAGN;IAEJX,UAAU;QACR,IAAI,CAACU,WAAWQ,OAAO,EAAE;QACzB,MAAMC,SAASX,UAAUU,OAAO;QAChC,IAAI,CAACC,QAAQ;QACb,MAAMC,MAAMd,sBAAsBa;QAClC,IAAI,CAACC,KAAK;QAEVf,aAAae,KAAK;YAChBC,UAAUR;YACVS,aAAaR;YACbS,cAAcR;QAChB;QAEA,IAAIC,kBAAkB;YACpB,MAAMQ,OAA4B;gBAChCC,UAAUR;gBACVM,cAAcR;gBACdW,UAAUd;YACZ;YACA,IAAIH,cAAcS,OAAO,EAAE;gBACzBT,cAAcS,OAAO,CAACS,MAAM,CAACH;YAC/B,OAAO;gBACLf,cAAcS,OAAO,GAAG,IAAIjB,uBAAuBmB,KAAKI;YAC1D;QACF,OAAO,IAAIf,cAAcS,OAAO,EAAE;YAChCT,cAAcS,OAAO,CAACU,OAAO;YAC7BnB,cAAcS,OAAO,GAAG;YACxB,oEAAoE;YACpEE,IAAIS,cAAc,CAACzB,aAAa0B;YAChCV,IAAIW,gBAAgB,CAAC5B,iBAAiB6B,OAAO,CAAC,CAACC,KAAOA,GAAGC,SAAS,CAACJ,MAAM,CAAC5B;QAC5E;IACF,GAAG;QACDM;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;QACAL;KACD;AACH,EAAC"}

package/dist/hooks/useSidebarResize.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type UseSidebarResizeReturn = {
+    sidebarWidth: number;
+    isResizing: boolean;
+    onResizeStart: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onResizeKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+};
+export declare const useSidebarResize: (sidebarPosition: "left" | "right") => UseSidebarResizeReturn;

package/dist/hooks/useSidebarResize.js

@@ -0,0 +1,101 @@
+'use client';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { DEFAULT_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH, SIDEBAR_KEYBOARD_STEP_PX, SIDEBAR_KEYBOARD_STEP_LARGE_PX, STORAGE_DEBOUNCE_MS } from '../internal/constants';
+import { useBetterEditorConfig } from '../providers/BetterEditorConfigProvider';
+import { readNumber, writeString } from '../internal/storage';
+const clampSidebar = (n)=>Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, n));
+export const useSidebarResize = (sidebarPosition)=>{
+    const { storageKeys } = useBetterEditorConfig();
+    const [sidebarWidth, setSidebarWidth] = useState(()=>readNumber(storageKeys.sidebarWidth, DEFAULT_SIDEBAR_WIDTH, clampSidebar));
+    const [isResizing, setIsResizing] = useState(false);
+    const widthRef = useRef(sidebarWidth);
+    widthRef.current = sidebarWidth;
+    const positionRef = useRef(sidebarPosition);
+    positionRef.current = sidebarPosition;
+    const dragCleanupRef = useRef(null);
+    const writeTimerRef = useRef(null);
+    // Debounce storage writes — drag fires 60×/s while keyboard nudges fire
+    // per keystroke. Either way we only want the final value persisted.
+    const hydratedRef = useRef(false);
+    useEffect(()=>{
+        if (!hydratedRef.current) {
+            hydratedRef.current = true;
+            return;
+        }
+        if (writeTimerRef.current) clearTimeout(writeTimerRef.current);
+        writeTimerRef.current = setTimeout(()=>{
+            writeString(storageKeys.sidebarWidth, String(sidebarWidth));
+            writeTimerRef.current = null;
+        }, STORAGE_DEBOUNCE_MS);
+        return ()=>{
+            if (writeTimerRef.current) clearTimeout(writeTimerRef.current);
+        };
+    }, [
+        sidebarWidth,
+        storageKeys.sidebarWidth
+    ]);
+    // Release listeners + body styles + flush pending storage write on unmount.
+    useEffect(()=>()=>{
+            dragCleanupRef.current?.();
+            if (writeTimerRef.current) {
+                clearTimeout(writeTimerRef.current);
+                writeString(storageKeys.sidebarWidth, String(widthRef.current));
+            }
+        }, [
+        storageKeys.sidebarWidth
+    ]);
+    const onResizeStart = useCallback((e)=>{
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = widthRef.current;
+        const direction = positionRef.current === 'right' ? -1 : 1;
+        setIsResizing(true);
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        const onMove = (ev)=>{
+            setSidebarWidth(clampSidebar(startWidth + (ev.clientX - startX) * direction));
+        };
+        const cleanup = ()=>{
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', cleanup);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            setIsResizing(false);
+            dragCleanupRef.current = null;
+        };
+        dragCleanupRef.current = cleanup;
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', cleanup);
+    }, []);
+    // Arrow keys nudge the handle for keyboard users (WCAG 2.1 separator
+    // semantics). Direction matches the mouse drag — Right when the sidebar
+    // sits on the right grows the sidebar inward.
+    const onResizeKeyDown = useCallback((e)=>{
+        const direction = positionRef.current === 'right' ? -1 : 1;
+        let delta = 0;
+        if (e.key === 'ArrowLeft') delta = -SIDEBAR_KEYBOARD_STEP_PX * direction;
+        else if (e.key === 'ArrowRight') delta = SIDEBAR_KEYBOARD_STEP_PX * direction;
+        else if (e.key === 'PageUp') delta = -SIDEBAR_KEYBOARD_STEP_LARGE_PX * direction;
+        else if (e.key === 'PageDown') delta = SIDEBAR_KEYBOARD_STEP_LARGE_PX * direction;
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            setSidebarWidth(MIN_SIDEBAR_WIDTH);
+            return;
+        } else if (e.key === 'End') {
+            e.preventDefault();
+            setSidebarWidth(MAX_SIDEBAR_WIDTH);
+            return;
+        }
+        if (delta === 0) return;
+        e.preventDefault();
+        setSidebarWidth((w)=>clampSidebar(w + delta));
+    }, []);
+    return {
+        sidebarWidth,
+        isResizing,
+        onResizeStart,
+        onResizeKeyDown
+    };
+};
+
+//# sourceMappingURL=useSidebarResize.js.map

package/dist/hooks/useSidebarResize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useSidebarResize.ts"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport {\n  DEFAULT_SIDEBAR_WIDTH,\n  MAX_SIDEBAR_WIDTH,\n  MIN_SIDEBAR_WIDTH,\n  SIDEBAR_KEYBOARD_STEP_PX,\n  SIDEBAR_KEYBOARD_STEP_LARGE_PX,\n  STORAGE_DEBOUNCE_MS,\n} from '../internal/constants'\nimport { useBetterEditorConfig } from '../providers/BetterEditorConfigProvider'\nimport { readNumber, writeString } from '../internal/storage'\n\nconst clampSidebar = (n: number): number =>\n  Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, n))\n\nexport type UseSidebarResizeReturn = {\n  sidebarWidth: number\n  isResizing: boolean\n  onResizeStart: (e: React.MouseEvent<HTMLDivElement>) => void\n  onResizeKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void\n}\n\nexport const useSidebarResize = (\n  sidebarPosition: 'left' | 'right',\n): UseSidebarResizeReturn => {\n  const { storageKeys } = useBetterEditorConfig()\n  const [sidebarWidth, setSidebarWidth] = useState<number>(() =>\n    readNumber(storageKeys.sidebarWidth, DEFAULT_SIDEBAR_WIDTH, clampSidebar),\n  )\n  const [isResizing, setIsResizing] = useState(false)\n\n  const widthRef = useRef(sidebarWidth)\n  widthRef.current = sidebarWidth\n\n  const positionRef = useRef(sidebarPosition)\n  positionRef.current = sidebarPosition\n\n  const dragCleanupRef = useRef<(() => void) | null>(null)\n  const writeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  // Debounce storage writes — drag fires 60×/s while keyboard nudges fire\n  // per keystroke. Either way we only want the final value persisted.\n  const hydratedRef = useRef(false)\n  useEffect(() => {\n    if (!hydratedRef.current) {\n      hydratedRef.current = true\n      return\n    }\n    if (writeTimerRef.current) clearTimeout(writeTimerRef.current)\n    writeTimerRef.current = setTimeout(() => {\n      writeString(storageKeys.sidebarWidth, String(sidebarWidth))\n      writeTimerRef.current = null\n    }, STORAGE_DEBOUNCE_MS)\n    return () => {\n      if (writeTimerRef.current) clearTimeout(writeTimerRef.current)\n    }\n  }, [sidebarWidth, storageKeys.sidebarWidth])\n\n  // Release listeners + body styles + flush pending storage write on unmount.\n  useEffect(\n    () => () => {\n      dragCleanupRef.current?.()\n      if (writeTimerRef.current) {\n        clearTimeout(writeTimerRef.current)\n        writeString(storageKeys.sidebarWidth, String(widthRef.current))\n      }\n    },\n    [storageKeys.sidebarWidth],\n  )\n\n  const onResizeStart = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    e.preventDefault()\n    const startX = e.clientX\n    const startWidth = widthRef.current\n    const direction = positionRef.current === 'right' ? -1 : 1\n\n    setIsResizing(true)\n    document.body.style.cursor = 'col-resize'\n    document.body.style.userSelect = 'none'\n\n    const onMove = (ev: MouseEvent) => {\n      setSidebarWidth(clampSidebar(startWidth + (ev.clientX - startX) * direction))\n    }\n    const cleanup = () => {\n      window.removeEventListener('mousemove', onMove)\n      window.removeEventListener('mouseup', cleanup)\n      document.body.style.cursor = ''\n      document.body.style.userSelect = ''\n      setIsResizing(false)\n      dragCleanupRef.current = null\n    }\n    dragCleanupRef.current = cleanup\n    window.addEventListener('mousemove', onMove)\n    window.addEventListener('mouseup', cleanup)\n  }, [])\n\n  // Arrow keys nudge the handle for keyboard users (WCAG 2.1 separator\n  // semantics). Direction matches the mouse drag — Right when the sidebar\n  // sits on the right grows the sidebar inward.\n  const onResizeKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    const direction = positionRef.current === 'right' ? -1 : 1\n    let delta = 0\n    if (e.key === 'ArrowLeft') delta = -SIDEBAR_KEYBOARD_STEP_PX * direction\n    else if (e.key === 'ArrowRight') delta = SIDEBAR_KEYBOARD_STEP_PX * direction\n    else if (e.key === 'PageUp') delta = -SIDEBAR_KEYBOARD_STEP_LARGE_PX * direction\n    else if (e.key === 'PageDown') delta = SIDEBAR_KEYBOARD_STEP_LARGE_PX * direction\n    else if (e.key === 'Home') {\n      e.preventDefault()\n      setSidebarWidth(MIN_SIDEBAR_WIDTH)\n      return\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      setSidebarWidth(MAX_SIDEBAR_WIDTH)\n      return\n    }\n    if (delta === 0) return\n    e.preventDefault()\n    setSidebarWidth((w) => clampSidebar(w + delta))\n  }, [])\n\n  return { sidebarWidth, isResizing, onResizeStart, onResizeKeyDown }\n}\n"],"names":["React","useCallback","useEffect","useRef","useState","DEFAULT_SIDEBAR_WIDTH","MAX_SIDEBAR_WIDTH","MIN_SIDEBAR_WIDTH","SIDEBAR_KEYBOARD_STEP_PX","SIDEBAR_KEYBOARD_STEP_LARGE_PX","STORAGE_DEBOUNCE_MS","useBetterEditorConfig","readNumber","writeString","clampSidebar","n","Math","min","max","useSidebarResize","sidebarPosition","storageKeys","sidebarWidth","setSidebarWidth","isResizing","setIsResizing","widthRef","current","positionRef","dragCleanupRef","writeTimerRef","hydratedRef","clearTimeout","setTimeout","String","onResizeStart","e","preventDefault","startX","clientX","startWidth","direction","document","body","style","cursor","userSelect","onMove","ev","cleanup","window","removeEventListener","addEventListener","onResizeKeyDown","delta","key","w"],"mappings":"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"}

package/dist/hooks/useViewportState.d.ts

@@ -0,0 +1,10 @@
+import type { Viewport } from '../admin/ViewportToggle';
+import type { BetterEditorSettings } from '../state/useBetterEditorSettings';
+export type UseViewportStateReturn = {
+    viewport: Viewport;
+    setViewport: React.Dispatch<React.SetStateAction<Viewport>>;
+    responsiveWidth: number;
+    setResponsiveWidth: React.Dispatch<React.SetStateAction<number>>;
+    viewportWidth: number | null;
+};
+export declare const useViewportState: (settings: BetterEditorSettings) => UseViewportStateReturn;

package/dist/hooks/useViewportState.js

@@ -0,0 +1,44 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { clampViewport } from '../internal/limits';
+import { DEFAULT_RESPONSIVE_WIDTH } from '../internal/constants';
+import { useBetterEditorConfig } from '../providers/BetterEditorConfigProvider';
+import { readNumber, writeString } from '../internal/storage';
+const resolveWidth = (viewport, settings, responsiveWidth)=>{
+    switch(viewport){
+        case 'tablet':
+            return settings.tabletWidth;
+        case 'mobile':
+            return settings.mobileWidth;
+        case 'responsive':
+            return responsiveWidth;
+        case 'desktop':
+            return null;
+    }
+};
+export const useViewportState = (settings)=>{
+    const { storageKeys } = useBetterEditorConfig();
+    const [viewport, setViewport] = useState('desktop');
+    const [responsiveWidth, setResponsiveWidth] = useState(()=>readNumber(storageKeys.responsiveWidth, DEFAULT_RESPONSIVE_WIDTH, clampViewport));
+    // Skip persisting the value we just hydrated from storage.
+    const hydratedRef = useRef(false);
+    useEffect(()=>{
+        if (!hydratedRef.current) {
+            hydratedRef.current = true;
+            return;
+        }
+        writeString(storageKeys.responsiveWidth, String(responsiveWidth));
+    }, [
+        responsiveWidth,
+        storageKeys.responsiveWidth
+    ]);
+    return {
+        viewport,
+        setViewport,
+        responsiveWidth,
+        setResponsiveWidth,
+        viewportWidth: resolveWidth(viewport, settings, responsiveWidth)
+    };
+};
+
+//# sourceMappingURL=useViewportState.js.map

package/dist/hooks/useViewportState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useViewportState.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport type { Viewport } from '../admin/ViewportToggle'\nimport type { BetterEditorSettings } from '../state/useBetterEditorSettings'\nimport { clampViewport } from '../internal/limits'\nimport { DEFAULT_RESPONSIVE_WIDTH } from '../internal/constants'\nimport { useBetterEditorConfig } from '../providers/BetterEditorConfigProvider'\nimport { readNumber, writeString } from '../internal/storage'\n\nexport type UseViewportStateReturn = {\n  viewport: Viewport\n  setViewport: React.Dispatch<React.SetStateAction<Viewport>>\n  responsiveWidth: number\n  setResponsiveWidth: React.Dispatch<React.SetStateAction<number>>\n  viewportWidth: number | null\n}\n\nconst resolveWidth = (\n  viewport: Viewport,\n  settings: BetterEditorSettings,\n  responsiveWidth: number,\n): number | null => {\n  switch (viewport) {\n    case 'tablet':\n      return settings.tabletWidth\n    case 'mobile':\n      return settings.mobileWidth\n    case 'responsive':\n      return responsiveWidth\n    case 'desktop':\n      return null\n  }\n}\n\nexport const useViewportState = (settings: BetterEditorSettings): UseViewportStateReturn => {\n  const { storageKeys } = useBetterEditorConfig()\n  const [viewport, setViewport] = useState<Viewport>('desktop')\n  const [responsiveWidth, setResponsiveWidth] = useState<number>(() =>\n    readNumber(storageKeys.responsiveWidth, DEFAULT_RESPONSIVE_WIDTH, clampViewport),\n  )\n\n  // Skip persisting the value we just hydrated from storage.\n  const hydratedRef = useRef(false)\n  useEffect(() => {\n    if (!hydratedRef.current) {\n      hydratedRef.current = true\n      return\n    }\n    writeString(storageKeys.responsiveWidth, String(responsiveWidth))\n  }, [responsiveWidth, storageKeys.responsiveWidth])\n\n  return {\n    viewport,\n    setViewport,\n    responsiveWidth,\n    setResponsiveWidth,\n    viewportWidth: resolveWidth(viewport, settings, responsiveWidth),\n  }\n}\n"],"names":["useEffect","useRef","useState","clampViewport","DEFAULT_RESPONSIVE_WIDTH","useBetterEditorConfig","readNumber","writeString","resolveWidth","viewport","settings","responsiveWidth","tabletWidth","mobileWidth","useViewportState","storageKeys","setViewport","setResponsiveWidth","hydratedRef","current","String","viewportWidth"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAGnD,SAASC,aAAa,QAAQ,qBAAoB;AAClD,SAASC,wBAAwB,QAAQ,wBAAuB;AAChE,SAASC,qBAAqB,QAAQ,0CAAyC;AAC/E,SAASC,UAAU,EAAEC,WAAW,QAAQ,sBAAqB;AAU7D,MAAMC,eAAe,CACnBC,UACAC,UACAC;IAEA,OAAQF;QACN,KAAK;YACH,OAAOC,SAASE,WAAW;QAC7B,KAAK;YACH,OAAOF,SAASG,WAAW;QAC7B,KAAK;YACH,OAAOF;QACT,KAAK;YACH,OAAO;IACX;AACF;AAEA,OAAO,MAAMG,mBAAmB,CAACJ;IAC/B,MAAM,EAAEK,WAAW,EAAE,GAAGV;IACxB,MAAM,CAACI,UAAUO,YAAY,GAAGd,SAAmB;IACnD,MAAM,CAACS,iBAAiBM,mBAAmB,GAAGf,SAAiB,IAC7DI,WAAWS,YAAYJ,eAAe,EAAEP,0BAA0BD;IAGpE,2DAA2D;IAC3D,MAAMe,cAAcjB,OAAO;IAC3BD,UAAU;QACR,IAAI,CAACkB,YAAYC,OAAO,EAAE;YACxBD,YAAYC,OAAO,GAAG;YACtB;QACF;QACAZ,YAAYQ,YAAYJ,eAAe,EAAES,OAAOT;IAClD,GAAG;QAACA;QAAiBI,YAAYJ,eAAe;KAAC;IAEjD,OAAO;QACLF;QACAO;QACAL;QACAM;QACAI,eAAeb,aAAaC,UAAUC,UAAUC;IAClD;AACF,EAAC"}

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import type { Config } from 'payload';
+import type { BetterEditorConfig } from './types';
+export type { BetterEditorConfig };
+export type { BetterEditorSettings, HoverToolbarPosition } from './state/useBetterEditorSettings';
+export type { SidebarPosition } from './internal/constants';
+export { BETTER_EDITOR_SETTINGS_SLUG } from './global';
+/** Plugin signature — handy for typing plugin lists in consumer code. */
+export type BetterEditorPlugin = (config: Config) => Config;
+export { VERSION } from './version';
+/**
+ * Payload CMS plugin factory for the Better Editor overlay. Adds an
+ * "Open Better Editor" toggle to the configured collections / globals
+ * and registers a `BetterEditorSettings` global with editor-wide options.
+ *
+ * @example
+ *   import { betterEditor } from 'payload-better-editor'
+ *
+ *   export default buildConfig({
+ *     plugins: [betterEditor({ collections: ['pages'] })],
+ *     // ...
+ *   })
+ *
+ * @see {@link BetterEditorConfig} for all options.
+ */
+export declare const betterEditor: (pluginOptions?: BetterEditorConfig) => BetterEditorPlugin;

package/dist/index.js

@@ -0,0 +1,104 @@
+import { BETTER_EDITOR_SETTINGS_BANNER_FIELD, betterEditorSettingsGlobal } from './global';
+export { BETTER_EDITOR_SETTINGS_SLUG } from './global';
+export { VERSION } from './version';
+const DEFAULT_BLOCKS_FIELD = 'layout';
+const TOGGLE_COMPONENT_PATH = 'payload-better-editor/client#LiveEditorToggle';
+const isDev = process.env.NODE_ENV !== 'production';
+const hasBlocksField = (fields, name)=>Array.isArray(fields) && fields.some((f)=>'name' in f && f.name === name);
+const withToggleInjected = (entity, slot, clientProps)=>{
+    const admin = {
+        ...entity.admin ?? {}
+    };
+    const components = {
+        ...admin.components ?? {}
+    };
+    const target = {
+        ...components[slot] ?? {}
+    };
+    const before = target.beforeDocumentControls ?? [];
+    return {
+        ...entity,
+        admin: {
+            ...admin,
+            components: {
+                ...components,
+                [slot]: {
+                    ...target,
+                    beforeDocumentControls: [
+                        ...before,
+                        {
+                            path: TOGGLE_COMPONENT_PATH,
+                            clientProps
+                        }
+                    ]
+                }
+            }
+        }
+    };
+};
+const warnMissingBlocksField = (kind, slug, blocksField)=>{
+    console.warn(`[better-editor] ${kind} "${slug}" has no top-level field named "${blocksField}" — the sidebar Blocks tab will be empty. Set \`blocksField\` to the actual blocks field name.`);
+};
+/**
+ * Payload CMS plugin factory for the Better Editor overlay. Adds an
+ * "Open Better Editor" toggle to the configured collections / globals
+ * and registers a `BetterEditorSettings` global with editor-wide options.
+ *
+ * @example
+ *   import { betterEditor } from 'payload-better-editor'
+ *
+ *   export default buildConfig({
+ *     plugins: [betterEditor({ collections: ['pages'] })],
+ *     // ...
+ *   })
+ *
+ * @see {@link BetterEditorConfig} for all options.
+ */ export const betterEditor = (pluginOptions)=>(config)=>{
+        if (pluginOptions?.disabled) return config;
+        const collectionSlugs = new Set(pluginOptions?.collections ?? []);
+        const globalSlugs = new Set(pluginOptions?.globals ?? []);
+        const blocksField = pluginOptions?.blocksField || DEFAULT_BLOCKS_FIELD;
+        const clientProps = {
+            blocksField,
+            adminPortalSelector: pluginOptions?.adminPortalSelector,
+            storageNamespace: pluginOptions?.storageNamespace
+        };
+        const showBanner = pluginOptions?.showSettingsBanner !== false;
+        const settingsGlobal = showBanner ? betterEditorSettingsGlobal : {
+            ...betterEditorSettingsGlobal,
+            fields: betterEditorSettingsGlobal.fields.filter((f)=>!('name' in f && f.name === BETTER_EDITOR_SETTINGS_BANNER_FIELD))
+        };
+        const existingGlobals = config.globals ?? [];
+        const hasSettingsGlobal = existingGlobals.some((g)=>g.slug === settingsGlobal.slug);
+        config.globals = hasSettingsGlobal ? existingGlobals : [
+            ...existingGlobals,
+            settingsGlobal
+        ];
+        if (collectionSlugs.size === 0 && globalSlugs.size === 0) {
+            if (isDev) {
+                console.warn('[better-editor] plugin loaded with empty `collections` and `globals` — toggle button will not appear anywhere. Pass `collections: ["pages"]` (or similar) to BetterEditorConfig.');
+            }
+            return config;
+        }
+        if (collectionSlugs.size > 0 && config.collections) {
+            config.collections = config.collections.map((collection)=>{
+                if (!collectionSlugs.has(collection.slug)) return collection;
+                if (isDev && !hasBlocksField(collection.fields, blocksField)) {
+                    warnMissingBlocksField('collection', collection.slug, blocksField);
+                }
+                return withToggleInjected(collection, 'edit', clientProps);
+            });
+        }
+        if (globalSlugs.size > 0) {
+            config.globals = (config.globals ?? []).map((global)=>{
+                if (!globalSlugs.has(global.slug)) return global;
+                if (isDev && !hasBlocksField(global.fields, blocksField)) {
+                    warnMissingBlocksField('global', global.slug, blocksField);
+                }
+                return withToggleInjected(global, 'elements', clientProps);
+            });
+        }
+        return config;
+    };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { CollectionConfig, Config, Field, GlobalConfig } from 'payload'\nimport type { BetterEditorConfig } from './types'\nimport { BETTER_EDITOR_SETTINGS_BANNER_FIELD, betterEditorSettingsGlobal } from './global'\n\nexport type { BetterEditorConfig }\nexport type { BetterEditorSettings, HoverToolbarPosition } from './state/useBetterEditorSettings'\nexport type { SidebarPosition } from './internal/constants'\nexport { BETTER_EDITOR_SETTINGS_SLUG } from './global'\n\n/** Plugin signature — handy for typing plugin lists in consumer code. */\nexport type BetterEditorPlugin = (config: Config) => Config\n\nexport { VERSION } from './version'\n\nconst DEFAULT_BLOCKS_FIELD = 'layout'\nconst TOGGLE_COMPONENT_PATH = 'payload-better-editor/client#LiveEditorToggle'\nconst isDev = process.env.NODE_ENV !== 'production'\n\nconst hasBlocksField = (fields: Field[] | undefined, name: string): boolean =>\n  Array.isArray(fields) && fields.some((f) => 'name' in f && f.name === name)\n\ntype ToggleSlot = 'edit' | 'elements'\n\ntype ToggleClientProps = {\n  blocksField: string\n  adminPortalSelector?: string\n  storageNamespace?: string\n}\n\nconst withToggleInjected = <T extends CollectionConfig | GlobalConfig>(\n  entity: T,\n  slot: ToggleSlot,\n  clientProps: ToggleClientProps,\n): T => {\n  const admin = { ...(entity.admin ?? {}) } as NonNullable<T['admin']>\n  const components = { ...(admin.components ?? {}) } as Record<string, unknown>\n  const target = { ...((components[slot] as Record<string, unknown>) ?? {}) }\n  const before = (target.beforeDocumentControls as unknown[]) ?? []\n  return {\n    ...entity,\n    admin: {\n      ...admin,\n      components: {\n        ...components,\n        [slot]: {\n          ...target,\n          beforeDocumentControls: [\n            ...before,\n            { path: TOGGLE_COMPONENT_PATH, clientProps },\n          ],\n        },\n      },\n    },\n  }\n}\n\nconst warnMissingBlocksField = (kind: 'collection' | 'global', slug: string, blocksField: string) => {\n\n  console.warn(\n    `[better-editor] ${kind} \"${slug}\" has no top-level field named \"${blocksField}\" — the sidebar Blocks tab will be empty. Set \\`blocksField\\` to the actual blocks field name.`,\n  )\n}\n\n/**\n * Payload CMS plugin factory for the Better Editor overlay. Adds an\n * \"Open Better Editor\" toggle to the configured collections / globals\n * and registers a `BetterEditorSettings` global with editor-wide options.\n *\n * @example\n *   import { betterEditor } from 'payload-better-editor'\n *\n *   export default buildConfig({\n *     plugins: [betterEditor({ collections: ['pages'] })],\n *     // ...\n *   })\n *\n * @see {@link BetterEditorConfig} for all options.\n */\nexport const betterEditor =\n  (pluginOptions?: BetterEditorConfig): BetterEditorPlugin =>\n  (config: Config): Config => {\n    if (pluginOptions?.disabled) return config\n\n    const collectionSlugs = new Set(pluginOptions?.collections ?? [])\n    const globalSlugs = new Set(pluginOptions?.globals ?? [])\n    const blocksField = pluginOptions?.blocksField || DEFAULT_BLOCKS_FIELD\n    const clientProps: ToggleClientProps = {\n      blocksField,\n      adminPortalSelector: pluginOptions?.adminPortalSelector,\n      storageNamespace: pluginOptions?.storageNamespace,\n    }\n\n    const showBanner = pluginOptions?.showSettingsBanner !== false\n    const settingsGlobal: GlobalConfig = showBanner\n      ? betterEditorSettingsGlobal\n      : {\n          ...betterEditorSettingsGlobal,\n          fields: betterEditorSettingsGlobal.fields.filter(\n            (f) => !('name' in f && f.name === BETTER_EDITOR_SETTINGS_BANNER_FIELD),\n          ),\n        }\n\n    const existingGlobals = config.globals ?? []\n    const hasSettingsGlobal = existingGlobals.some((g) => g.slug === settingsGlobal.slug)\n    config.globals = hasSettingsGlobal\n      ? existingGlobals\n      : [...existingGlobals, settingsGlobal]\n\n    if (collectionSlugs.size === 0 && globalSlugs.size === 0) {\n      if (isDev) {\n\n        console.warn(\n          '[better-editor] plugin loaded with empty `collections` and `globals` — toggle button will not appear anywhere. Pass `collections: [\"pages\"]` (or similar) to BetterEditorConfig.',\n        )\n      }\n      return config\n    }\n\n    if (collectionSlugs.size > 0 && config.collections) {\n      config.collections = config.collections.map((collection) => {\n        if (!collectionSlugs.has(collection.slug)) return collection\n        if (isDev && !hasBlocksField(collection.fields, blocksField)) {\n          warnMissingBlocksField('collection', collection.slug, blocksField)\n        }\n        return withToggleInjected(collection, 'edit', clientProps)\n      })\n    }\n\n    if (globalSlugs.size > 0) {\n      config.globals = (config.globals ?? []).map((global) => {\n        if (!globalSlugs.has(global.slug)) return global\n        if (isDev && !hasBlocksField(global.fields, blocksField)) {\n          warnMissingBlocksField('global', global.slug, blocksField)\n        }\n        return withToggleInjected(global, 'elements', clientProps)\n      })\n    }\n\n    return config\n  }\n"],"names":["BETTER_EDITOR_SETTINGS_BANNER_FIELD","betterEditorSettingsGlobal","BETTER_EDITOR_SETTINGS_SLUG","VERSION","DEFAULT_BLOCKS_FIELD","TOGGLE_COMPONENT_PATH","isDev","process","env","NODE_ENV","hasBlocksField","fields","name","Array","isArray","some","f","withToggleInjected","entity","slot","clientProps","admin","components","target","before","beforeDocumentControls","path","warnMissingBlocksField","kind","slug","blocksField","console","warn","betterEditor","pluginOptions","config","disabled","collectionSlugs","Set","collections","globalSlugs","globals","adminPortalSelector","storageNamespace","showBanner","showSettingsBanner","settingsGlobal","filter","existingGlobals","hasSettingsGlobal","g","size","map","collection","has","global"],"mappings":"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"}

package/dist/internal/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const SIDEBAR_POSITIONS: readonly ["left", "right"];
+export type SidebarPosition = (typeof SIDEBAR_POSITIONS)[number];
+export declare const HOVER_TOOLBAR_POSITIONS: readonly ["top-right", "top-left", "bottom-right", "bottom-left"];
+export type HoverToolbarPosition = (typeof HOVER_TOOLBAR_POSITIONS)[number];
+export declare const DEFAULT_BETTER_EDITOR_SETTINGS: {
+    readonly sidebarPosition: SidebarPosition;
+    readonly forceFullWidthFields: true;
+    readonly tabletWidth: 800;
+    readonly mobileWidth: 400;
+    readonly hoverColorTopLevel: "#3b82f6";
+    readonly hoverColorNested: "#f59e0b";
+    readonly hoverOutlineWidth: 2;
+    readonly showHoverToolbar: true;
+    readonly hoverToolbarPosition: HoverToolbarPosition;
+};
+export declare const DEFAULT_SIDEBAR_WIDTH = 400;
+export declare const MIN_SIDEBAR_WIDTH = 250;
+export declare const MAX_SIDEBAR_WIDTH = 800;
+export declare const DEFAULT_RESPONSIVE_WIDTH = 1024;
+export declare const SIDEBAR_KEYBOARD_STEP_PX = 16;
+export declare const SIDEBAR_KEYBOARD_STEP_LARGE_PX = 64;
+export declare const STORAGE_DEBOUNCE_MS = 250;

package/dist/internal/constants.js

@@ -0,0 +1,38 @@
+export const SIDEBAR_POSITIONS = [
+    'left',
+    'right'
+];
+export const HOVER_TOOLBAR_POSITIONS = [
+    'top-right',
+    'top-left',
+    'bottom-right',
+    'bottom-left'
+];
+export const DEFAULT_BETTER_EDITOR_SETTINGS = {
+    sidebarPosition: 'right',
+    forceFullWidthFields: true,
+    tabletWidth: 800,
+    mobileWidth: 400,
+    hoverColorTopLevel: '#3b82f6',
+    hoverColorNested: '#f59e0b',
+    hoverOutlineWidth: 2,
+    showHoverToolbar: true,
+    hoverToolbarPosition: 'top-right'
+};
+// Sidebar dimensions (px). Used by the runtime resize hook + the settings
+// global's input limits.
+export const DEFAULT_SIDEBAR_WIDTH = 400;
+export const MIN_SIDEBAR_WIDTH = 250;
+export const MAX_SIDEBAR_WIDTH = 800;
+// Responsive viewport mode default width (px). Initial value when the user
+// switches into "responsive" before they drag the handles.
+export const DEFAULT_RESPONSIVE_WIDTH = 1024;
+// Sidebar resize-handle keyboard nudges (px per keystroke).
+export const SIDEBAR_KEYBOARD_STEP_PX = 16;
+export const SIDEBAR_KEYBOARD_STEP_LARGE_PX = 64;
+// Debounce window for persisting transient UI state to localStorage.
+// Drags fire 60×/s and keyboard nudges fire per keystroke; we only want
+// the final value written.
+export const STORAGE_DEBOUNCE_MS = 250;
+
+//# sourceMappingURL=constants.js.map

package/dist/internal/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/constants.ts"],"sourcesContent":["export const SIDEBAR_POSITIONS = ['left', 'right'] as const\nexport type SidebarPosition = (typeof SIDEBAR_POSITIONS)[number]\n\nexport const HOVER_TOOLBAR_POSITIONS = [\n  'top-right',\n  'top-left',\n  'bottom-right',\n  'bottom-left',\n] as const\nexport type HoverToolbarPosition = (typeof HOVER_TOOLBAR_POSITIONS)[number]\n\nexport const DEFAULT_BETTER_EDITOR_SETTINGS = {\n  sidebarPosition: 'right' as SidebarPosition,\n  forceFullWidthFields: true,\n  tabletWidth: 800,\n  mobileWidth: 400,\n  hoverColorTopLevel: '#3b82f6',\n  hoverColorNested: '#f59e0b',\n  hoverOutlineWidth: 2,\n  showHoverToolbar: true,\n  hoverToolbarPosition: 'top-right' as HoverToolbarPosition,\n} as const\n\n// Sidebar dimensions (px). Used by the runtime resize hook + the settings\n// global's input limits.\nexport const DEFAULT_SIDEBAR_WIDTH = 400\nexport const MIN_SIDEBAR_WIDTH = 250\nexport const MAX_SIDEBAR_WIDTH = 800\n\n// Responsive viewport mode default width (px). Initial value when the user\n// switches into \"responsive\" before they drag the handles.\nexport const DEFAULT_RESPONSIVE_WIDTH = 1024\n\n// Sidebar resize-handle keyboard nudges (px per keystroke).\nexport const SIDEBAR_KEYBOARD_STEP_PX = 16\nexport const SIDEBAR_KEYBOARD_STEP_LARGE_PX = 64\n\n// Debounce window for persisting transient UI state to localStorage.\n// Drags fire 60×/s and keyboard nudges fire per keystroke; we only want\n// the final value written.\nexport const STORAGE_DEBOUNCE_MS = 250\n"],"names":["SIDEBAR_POSITIONS","HOVER_TOOLBAR_POSITIONS","DEFAULT_BETTER_EDITOR_SETTINGS","sidebarPosition","forceFullWidthFields","tabletWidth","mobileWidth","hoverColorTopLevel","hoverColorNested","hoverOutlineWidth","showHoverToolbar","hoverToolbarPosition","DEFAULT_SIDEBAR_WIDTH","MIN_SIDEBAR_WIDTH","MAX_SIDEBAR_WIDTH","DEFAULT_RESPONSIVE_WIDTH","SIDEBAR_KEYBOARD_STEP_PX","SIDEBAR_KEYBOARD_STEP_LARGE_PX","STORAGE_DEBOUNCE_MS"],"mappings":"AAAA,OAAO,MAAMA,oBAAoB;IAAC;IAAQ;CAAQ,CAAS;AAG3D,OAAO,MAAMC,0BAA0B;IACrC;IACA;IACA;IACA;CACD,CAAS;AAGV,OAAO,MAAMC,iCAAiC;IAC5CC,iBAAiB;IACjBC,sBAAsB;IACtBC,aAAa;IACbC,aAAa;IACbC,oBAAoB;IACpBC,kBAAkB;IAClBC,mBAAmB;IACnBC,kBAAkB;IAClBC,sBAAsB;AACxB,EAAU;AAEV,0EAA0E;AAC1E,yBAAyB;AACzB,OAAO,MAAMC,wBAAwB,IAAG;AACxC,OAAO,MAAMC,oBAAoB,IAAG;AACpC,OAAO,MAAMC,oBAAoB,IAAG;AAEpC,2EAA2E;AAC3E,2DAA2D;AAC3D,OAAO,MAAMC,2BAA2B,KAAI;AAE5C,4DAA4D;AAC5D,OAAO,MAAMC,2BAA2B,GAAE;AAC1C,OAAO,MAAMC,iCAAiC,GAAE;AAEhD,qEAAqE;AACrE,wEAAwE;AACxE,2BAA2B;AAC3B,OAAO,MAAMC,sBAAsB,IAAG"}

package/dist/internal/dom.d.ts

@@ -0,0 +1,4 @@
+export declare const BLOCK_ID_ATTR = "data-better-editor-id";
+export declare const BLOCK_ID_SELECTOR = "[data-better-editor-id]";
+export declare const ACTIVE_CLASS = "better-editor-active";
+export declare const ACTIVE_SELECTOR = ".better-editor-active";