payload-better-editor 1.0.0

package/dist/internal/dom.js

@@ -0,0 +1,6 @@
+export const BLOCK_ID_ATTR = 'data-better-editor-id';
+export const BLOCK_ID_SELECTOR = `[${BLOCK_ID_ATTR}]`;
+export const ACTIVE_CLASS = 'better-editor-active';
+export const ACTIVE_SELECTOR = `.${ACTIVE_CLASS}`;
+
+//# sourceMappingURL=dom.js.map

package/dist/internal/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/dom.ts"],"sourcesContent":["export const BLOCK_ID_ATTR = 'data-better-editor-id'\nexport const BLOCK_ID_SELECTOR = `[${BLOCK_ID_ATTR}]`\nexport const ACTIVE_CLASS = 'better-editor-active'\nexport const ACTIVE_SELECTOR = `.${ACTIVE_CLASS}`\n"],"names":["BLOCK_ID_ATTR","BLOCK_ID_SELECTOR","ACTIVE_CLASS","ACTIVE_SELECTOR"],"mappings":"AAAA,OAAO,MAAMA,gBAAgB,wBAAuB;AACpD,OAAO,MAAMC,oBAAoB,CAAC,CAAC,EAAED,cAAc,CAAC,CAAC,CAAA;AACrD,OAAO,MAAME,eAAe,uBAAsB;AAClD,OAAO,MAAMC,kBAAkB,CAAC,CAAC,EAAED,cAAc,CAAA"}

package/dist/internal/iframe.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Reads `iframe.contentDocument` defensively. Throws cross-origin —
+ * returning `null` lets callers bail out without try/catch boilerplate.
+ */
+export declare const getSameOriginDocument: (iframe: HTMLIFrameElement) => Document | null;

package/dist/internal/iframe.js

@@ -0,0 +1,12 @@
+/**
+ * Reads `iframe.contentDocument` defensively. Throws cross-origin —
+ * returning `null` lets callers bail out without try/catch boilerplate.
+ */ export const getSameOriginDocument = (iframe)=>{
+    try {
+        return iframe.contentDocument;
+    } catch  {
+        return null;
+    }
+};
+
+//# sourceMappingURL=iframe.js.map

package/dist/internal/iframe.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/iframe.ts"],"sourcesContent":["/**\n * Reads `iframe.contentDocument` defensively. Throws cross-origin —\n * returning `null` lets callers bail out without try/catch boilerplate.\n */\nexport const getSameOriginDocument = (iframe: HTMLIFrameElement): Document | null => {\n  try {\n    return iframe.contentDocument\n  } catch {\n    return null\n  }\n}\n"],"names":["getSameOriginDocument","iframe","contentDocument"],"mappings":"AAAA;;;CAGC,GACD,OAAO,MAAMA,wBAAwB,CAACC;IACpC,IAAI;QACF,OAAOA,OAAOC,eAAe;IAC/B,EAAE,OAAM;QACN,OAAO;IACT;AACF,EAAC"}

package/dist/internal/limits.d.ts

@@ -0,0 +1,9 @@
+export declare const VIEWPORT_MIN = 240;
+export declare const VIEWPORT_MAX = 2400;
+export declare const clampViewport: (n: number) => number;
+export declare const TABLET_WIDTH_MIN = 320;
+export declare const TABLET_WIDTH_MAX = 1600;
+export declare const MOBILE_WIDTH_MIN = 240;
+export declare const MOBILE_WIDTH_MAX = 800;
+export declare const HOVER_OUTLINE_MIN = 1;
+export declare const HOVER_OUTLINE_MAX = 5;

package/dist/internal/limits.js

@@ -0,0 +1,11 @@
+export const VIEWPORT_MIN = 240;
+export const VIEWPORT_MAX = 2400;
+export const clampViewport = (n)=>Math.min(VIEWPORT_MAX, Math.max(VIEWPORT_MIN, n));
+export const TABLET_WIDTH_MIN = 320;
+export const TABLET_WIDTH_MAX = 1600;
+export const MOBILE_WIDTH_MIN = 240;
+export const MOBILE_WIDTH_MAX = 800;
+export const HOVER_OUTLINE_MIN = 1;
+export const HOVER_OUTLINE_MAX = 5;
+
+//# sourceMappingURL=limits.js.map

package/dist/internal/limits.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/limits.ts"],"sourcesContent":["export const VIEWPORT_MIN = 240\nexport const VIEWPORT_MAX = 2400\n\nexport const clampViewport = (n: number): number =>\n  Math.min(VIEWPORT_MAX, Math.max(VIEWPORT_MIN, n))\n\nexport const TABLET_WIDTH_MIN = 320\nexport const TABLET_WIDTH_MAX = 1600\nexport const MOBILE_WIDTH_MIN = 240\nexport const MOBILE_WIDTH_MAX = 800\nexport const HOVER_OUTLINE_MIN = 1\nexport const HOVER_OUTLINE_MAX = 5\n"],"names":["VIEWPORT_MIN","VIEWPORT_MAX","clampViewport","n","Math","min","max","TABLET_WIDTH_MIN","TABLET_WIDTH_MAX","MOBILE_WIDTH_MIN","MOBILE_WIDTH_MAX","HOVER_OUTLINE_MIN","HOVER_OUTLINE_MAX"],"mappings":"AAAA,OAAO,MAAMA,eAAe,IAAG;AAC/B,OAAO,MAAMC,eAAe,KAAI;AAEhC,OAAO,MAAMC,gBAAgB,CAACC,IAC5BC,KAAKC,GAAG,CAACJ,cAAcG,KAAKE,GAAG,CAACN,cAAcG,IAAG;AAEnD,OAAO,MAAMI,mBAAmB,IAAG;AACnC,OAAO,MAAMC,mBAAmB,KAAI;AACpC,OAAO,MAAMC,mBAAmB,IAAG;AACnC,OAAO,MAAMC,mBAAmB,IAAG;AACnC,OAAO,MAAMC,oBAAoB,EAAC;AAClC,OAAO,MAAMC,oBAAoB,EAAC"}

package/dist/internal/path.d.ts

@@ -0,0 +1,5 @@
+export type SplitFieldPath = {
+    parent: string;
+    index: number;
+} | null;
+export declare const splitFieldPath: (path: string) => SplitFieldPath;

package/dist/internal/path.js

@@ -0,0 +1,12 @@
+export const splitFieldPath = (path)=>{
+    const lastDot = path.lastIndexOf('.');
+    if (lastDot < 0) return null;
+    const tail = path.slice(lastDot + 1);
+    if (!/^\d+$/.test(tail)) return null;
+    return {
+        parent: path.slice(0, lastDot),
+        index: Number(tail)
+    };
+};
+
+//# sourceMappingURL=path.js.map

package/dist/internal/path.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/path.ts"],"sourcesContent":["export type SplitFieldPath = { parent: string; index: number } | null\n\nexport const splitFieldPath = (path: string): SplitFieldPath => {\n  const lastDot = path.lastIndexOf('.')\n  if (lastDot < 0) return null\n  const tail = path.slice(lastDot + 1)\n  if (!/^\\d+$/.test(tail)) return null\n  return { parent: path.slice(0, lastDot), index: Number(tail) }\n}\n"],"names":["splitFieldPath","path","lastDot","lastIndexOf","tail","slice","test","parent","index","Number"],"mappings":"AAEA,OAAO,MAAMA,iBAAiB,CAACC;IAC7B,MAAMC,UAAUD,KAAKE,WAAW,CAAC;IACjC,IAAID,UAAU,GAAG,OAAO;IACxB,MAAME,OAAOH,KAAKI,KAAK,CAACH,UAAU;IAClC,IAAI,CAAC,QAAQI,IAAI,CAACF,OAAO,OAAO;IAChC,OAAO;QAAEG,QAAQN,KAAKI,KAAK,CAAC,GAAGH;QAAUM,OAAOC,OAAOL;IAAM;AAC/D,EAAC"}

package/dist/internal/postmessage.d.ts

@@ -0,0 +1,3 @@
+import type { ParentInboundMessage } from '../preview/protocol';
+export declare const postToParent: (message: ParentInboundMessage) => void;
+export declare const listenForParentInbound: (handler: (msg: ParentInboundMessage) => void) => (() => void);

package/dist/internal/postmessage.js

@@ -0,0 +1,21 @@
+import { isParentInboundMessage } from '../preview/protocol';
+// Same-origin only: parent and iframe live under one Payload host. Any
+// message from a different origin is dropped before reaching `handler`.
+export const postToParent = (message)=>{
+    window.parent.postMessage(message, window.location.origin);
+};
+// Click + hover handlers are installed on the iframe document but their
+// closures run in the parent JS context, so postToParent is effectively a
+// same-window self-post (window.parent === window when the admin is
+// top-level). The origin + shape checks below are the actual gate.
+export const listenForParentInbound = (handler)=>{
+    const onMessage = (e)=>{
+        if (e.origin !== window.location.origin) return;
+        if (!isParentInboundMessage(e.data)) return;
+        handler(e.data);
+    };
+    window.addEventListener('message', onMessage);
+    return ()=>window.removeEventListener('message', onMessage);
+};
+
+//# sourceMappingURL=postmessage.js.map

package/dist/internal/postmessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/postmessage.ts"],"sourcesContent":["import type { ParentInboundMessage } from '../preview/protocol'\nimport { isParentInboundMessage } from '../preview/protocol'\n\n// Same-origin only: parent and iframe live under one Payload host. Any\n// message from a different origin is dropped before reaching `handler`.\nexport const postToParent = (message: ParentInboundMessage): void => {\n  window.parent.postMessage(message, window.location.origin)\n}\n\n// Click + hover handlers are installed on the iframe document but their\n// closures run in the parent JS context, so postToParent is effectively a\n// same-window self-post (window.parent === window when the admin is\n// top-level). The origin + shape checks below are the actual gate.\nexport const listenForParentInbound = (\n  handler: (msg: ParentInboundMessage) => void,\n): (() => void) => {\n  const onMessage = (e: MessageEvent) => {\n    if (e.origin !== window.location.origin) return\n    if (!isParentInboundMessage(e.data)) return\n    handler(e.data)\n  }\n  window.addEventListener('message', onMessage)\n  return () => window.removeEventListener('message', onMessage)\n}\n"],"names":["isParentInboundMessage","postToParent","message","window","parent","postMessage","location","origin","listenForParentInbound","handler","onMessage","e","data","addEventListener","removeEventListener"],"mappings":"AACA,SAASA,sBAAsB,QAAQ,sBAAqB;AAE5D,uEAAuE;AACvE,wEAAwE;AACxE,OAAO,MAAMC,eAAe,CAACC;IAC3BC,OAAOC,MAAM,CAACC,WAAW,CAACH,SAASC,OAAOG,QAAQ,CAACC,MAAM;AAC3D,EAAC;AAED,wEAAwE;AACxE,0EAA0E;AAC1E,oEAAoE;AACpE,mEAAmE;AACnE,OAAO,MAAMC,yBAAyB,CACpCC;IAEA,MAAMC,YAAY,CAACC;QACjB,IAAIA,EAAEJ,MAAM,KAAKJ,OAAOG,QAAQ,CAACC,MAAM,EAAE;QACzC,IAAI,CAACP,uBAAuBW,EAAEC,IAAI,GAAG;QACrCH,QAAQE,EAAEC,IAAI;IAChB;IACAT,OAAOU,gBAAgB,CAAC,WAAWH;IACnC,OAAO,IAAMP,OAAOW,mBAAmB,CAAC,WAAWJ;AACrD,EAAC"}

package/dist/internal/storage-keys.d.ts

@@ -0,0 +1,8 @@
+export declare const DEFAULT_STORAGE_NAMESPACE = "better-editor";
+export type StorageKeys = {
+    sidebarWidth: string;
+    responsiveWidth: string;
+    togglePreference: (collectionSlug?: string, globalSlug?: string) => string;
+};
+export declare const buildStorageKeys: (namespace?: string) => StorageKeys;
+export declare const DEFAULT_STORAGE_KEYS: StorageKeys;

package/dist/internal/storage-keys.js

@@ -0,0 +1,9 @@
+export const DEFAULT_STORAGE_NAMESPACE = 'better-editor';
+export const buildStorageKeys = (namespace = DEFAULT_STORAGE_NAMESPACE)=>({
+        sidebarWidth: `${namespace}:sidebar-width`,
+        responsiveWidth: `${namespace}:responsive-width`,
+        togglePreference: (collectionSlug, globalSlug)=>`${namespace}:${collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug ?? 'unknown'}`}`
+    });
+export const DEFAULT_STORAGE_KEYS = buildStorageKeys();
+
+//# sourceMappingURL=storage-keys.js.map

package/dist/internal/storage-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/storage-keys.ts"],"sourcesContent":["export const DEFAULT_STORAGE_NAMESPACE = 'better-editor'\n\nexport type StorageKeys = {\n  sidebarWidth: string\n  responsiveWidth: string\n  togglePreference: (collectionSlug?: string, globalSlug?: string) => string\n}\n\nexport const buildStorageKeys = (namespace: string = DEFAULT_STORAGE_NAMESPACE): StorageKeys => ({\n  sidebarWidth: `${namespace}:sidebar-width`,\n  responsiveWidth: `${namespace}:responsive-width`,\n  togglePreference: (collectionSlug, globalSlug) =>\n    `${namespace}:${collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug ?? 'unknown'}`}`,\n})\n\nexport const DEFAULT_STORAGE_KEYS = buildStorageKeys()\n"],"names":["DEFAULT_STORAGE_NAMESPACE","buildStorageKeys","namespace","sidebarWidth","responsiveWidth","togglePreference","collectionSlug","globalSlug","DEFAULT_STORAGE_KEYS"],"mappings":"AAAA,OAAO,MAAMA,4BAA4B,gBAAe;AAQxD,OAAO,MAAMC,mBAAmB,CAACC,YAAoBF,yBAAyB,GAAmB,CAAA;QAC/FG,cAAc,GAAGD,UAAU,cAAc,CAAC;QAC1CE,iBAAiB,GAAGF,UAAU,iBAAiB,CAAC;QAChDG,kBAAkB,CAACC,gBAAgBC,aACjC,GAAGL,UAAU,CAAC,EAAEI,iBAAiB,CAAC,WAAW,EAAEA,gBAAgB,GAAG,CAAC,OAAO,EAAEC,cAAc,WAAW,EAAE;IAC3G,CAAA,EAAE;AAEF,OAAO,MAAMC,uBAAuBP,mBAAkB"}

package/dist/internal/storage.d.ts

@@ -0,0 +1,2 @@
+export declare const readNumber: (key: string, fallback: number, clamp?: (n: number) => number) => number;
+export declare const writeString: (key: string, value: string) => void;

package/dist/internal/storage.js

@@ -0,0 +1,20 @@
+export const readNumber = (key, fallback, clamp)=>{
+    if (typeof window === 'undefined') return fallback;
+    try {
+        const raw = window.localStorage.getItem(key);
+        const parsed = raw == null ? NaN : Number(raw);
+        if (!Number.isFinite(parsed)) return fallback;
+        return clamp ? clamp(parsed) : parsed;
+    } catch  {
+        return fallback;
+    }
+};
+export const writeString = (key, value)=>{
+    if (typeof window === 'undefined') return;
+    try {
+        window.localStorage.setItem(key, value);
+    } catch  {
+    /* storage unavailable / quota exceeded */ }
+};
+
+//# sourceMappingURL=storage.js.map

package/dist/internal/storage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/storage.ts"],"sourcesContent":["export const readNumber = (key: string, fallback: number, clamp?: (n: number) => number): number => {\n  if (typeof window === 'undefined') return fallback\n  try {\n    const raw = window.localStorage.getItem(key)\n    const parsed = raw == null ? NaN : Number(raw)\n    if (!Number.isFinite(parsed)) return fallback\n    return clamp ? clamp(parsed) : parsed\n  } catch {\n    return fallback\n  }\n}\n\nexport const writeString = (key: string, value: string): void => {\n  if (typeof window === 'undefined') return\n  try {\n    window.localStorage.setItem(key, value)\n  } catch {\n    /* storage unavailable / quota exceeded */\n  }\n}\n"],"names":["readNumber","key","fallback","clamp","window","raw","localStorage","getItem","parsed","NaN","Number","isFinite","writeString","value","setItem"],"mappings":"AAAA,OAAO,MAAMA,aAAa,CAACC,KAAaC,UAAkBC;IACxD,IAAI,OAAOC,WAAW,aAAa,OAAOF;IAC1C,IAAI;QACF,MAAMG,MAAMD,OAAOE,YAAY,CAACC,OAAO,CAACN;QACxC,MAAMO,SAASH,OAAO,OAAOI,MAAMC,OAAOL;QAC1C,IAAI,CAACK,OAAOC,QAAQ,CAACH,SAAS,OAAON;QACrC,OAAOC,QAAQA,MAAMK,UAAUA;IACjC,EAAE,OAAM;QACN,OAAON;IACT;AACF,EAAC;AAED,OAAO,MAAMU,cAAc,CAACX,KAAaY;IACvC,IAAI,OAAOT,WAAW,aAAa;IACnC,IAAI;QACFA,OAAOE,YAAY,CAACQ,OAAO,CAACb,KAAKY;IACnC,EAAE,OAAM;IACN,wCAAwC,GAC1C;AACF,EAAC"}

package/dist/preview/HoverToolbar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { BlockActionMessage } from './protocol';
+type Action = BlockActionMessage['action'];
+export type HoverToolbarProps = {
+    onAction: (action: Action) => void;
+};
+export declare const HoverToolbar: React.FC<HoverToolbarProps>;
+export {};

package/dist/preview/HoverToolbar.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronDown, ChevronUp, CopyIcon, PlusIcon, TrashIcon } from '../admin/icons';
+const BUTTONS = [
+    {
+        action: 'move-up',
+        Icon: ChevronUp,
+        label: 'Move up'
+    },
+    {
+        action: 'move-down',
+        Icon: ChevronDown,
+        label: 'Move down'
+    },
+    {
+        action: 'duplicate',
+        Icon: CopyIcon,
+        label: 'Duplicate'
+    },
+    {
+        action: 'add',
+        Icon: PlusIcon,
+        label: 'Add block below'
+    },
+    {
+        action: 'delete',
+        Icon: TrashIcon,
+        label: 'Delete'
+    }
+];
+export const HoverToolbar = ({ onAction })=>/*#__PURE__*/ _jsx(_Fragment, {
+        children: BUTTONS.map(({ action, Icon, label })=>/*#__PURE__*/ _jsx("button", {
+                type: "button",
+                "aria-label": label,
+                title: label,
+                "data-action": action,
+                onClick: (e)=>{
+                    e.stopPropagation();
+                    onAction(action);
+                },
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    size: 14
+                })
+            }, action))
+    });
+
+//# sourceMappingURL=HoverToolbar.js.map

package/dist/preview/HoverToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/preview/HoverToolbar.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { ChevronDown, ChevronUp, CopyIcon, PlusIcon, TrashIcon } from '../admin/icons'\nimport type { BlockActionMessage } from './protocol'\n\ntype Action = BlockActionMessage['action']\n\nconst BUTTONS: ReadonlyArray<{\n  action: Action\n  Icon: React.ComponentType<{ size?: number }>\n  label: string\n}> = [\n  { action: 'move-up', Icon: ChevronUp, label: 'Move up' },\n  { action: 'move-down', Icon: ChevronDown, label: 'Move down' },\n  { action: 'duplicate', Icon: CopyIcon, label: 'Duplicate' },\n  { action: 'add', Icon: PlusIcon, label: 'Add block below' },\n  { action: 'delete', Icon: TrashIcon, label: 'Delete' },\n]\n\nexport type HoverToolbarProps = {\n  onAction: (action: Action) => void\n}\n\nexport const HoverToolbar: React.FC<HoverToolbarProps> = ({ onAction }) => (\n  <>\n    {BUTTONS.map(({ action, Icon, label }) => (\n      <button\n        key={action}\n        type=\"button\"\n        aria-label={label}\n        title={label}\n        data-action={action}\n        onClick={(e) => {\n          e.stopPropagation()\n          onAction(action)\n        }}\n      >\n        <Icon size={14} />\n      </button>\n    ))}\n  </>\n)\n"],"names":["React","ChevronDown","ChevronUp","CopyIcon","PlusIcon","TrashIcon","BUTTONS","action","Icon","label","HoverToolbar","onAction","map","button","type","aria-label","title","data-action","onClick","e","stopPropagation","size"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AACzB,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,iBAAgB;AAKtF,MAAMC,UAID;IACH;QAAEC,QAAQ;QAAWC,MAAMN;QAAWO,OAAO;IAAU;IACvD;QAAEF,QAAQ;QAAaC,MAAMP;QAAaQ,OAAO;IAAY;IAC7D;QAAEF,QAAQ;QAAaC,MAAML;QAAUM,OAAO;IAAY;IAC1D;QAAEF,QAAQ;QAAOC,MAAMJ;QAAUK,OAAO;IAAkB;IAC1D;QAAEF,QAAQ;QAAUC,MAAMH;QAAWI,OAAO;IAAS;CACtD;AAMD,OAAO,MAAMC,eAA4C,CAAC,EAAEC,QAAQ,EAAE,iBACpE;kBACGL,QAAQM,GAAG,CAAC,CAAC,EAAEL,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,iBACnC,KAACI;gBAECC,MAAK;gBACLC,cAAYN;gBACZO,OAAOP;gBACPQ,eAAaV;gBACbW,SAAS,CAACC;oBACRA,EAAEC,eAAe;oBACjBT,SAASJ;gBACX;0BAEA,cAAA,KAACC;oBAAKa,MAAM;;eAVPd;OAcZ"}

package/dist/preview/HoverToolbarController.d.ts

@@ -0,0 +1,31 @@
+import type { HoverToolbarPosition } from '../internal/constants';
+import type { BlockActionMessage } from './protocol';
+export type HoverToolbarOptions = {
+    position: HoverToolbarPosition;
+    outlineWidth: number;
+    onAction: (id: string, action: BlockActionMessage['action']) => void;
+};
+export declare class HoverToolbarController {
+    private readonly doc;
+    private opts;
+    private readonly toolbar;
+    private readonly root;
+    private destroyed;
+    private currentBlockId;
+    private currentBlockEl;
+    private activeChain;
+    private positionRaf;
+    private observerRaf;
+    private readonly onScroll;
+    private readonly observer;
+    constructor(doc: Document, opts: HoverToolbarOptions);
+    private scheduleReselect;
+    update(opts: HoverToolbarOptions): void;
+    select(id: string): void;
+    deselect(): void;
+    destroy(): void;
+    private scheduleReposition;
+    private positionToolbar;
+    private clearActive;
+    private markActiveChain;
+}

package/dist/preview/HoverToolbarController.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { ACTIVE_CLASS, BLOCK_ID_ATTR, BLOCK_ID_SELECTOR } from '../internal/dom';
+import { TOOLBAR_ID } from './hover-css';
+import { HoverToolbar } from './HoverToolbar';
+import { calculateToolbarPosition } from './toolbar-position';
+const FALLBACK_TB_WIDTH = 120;
+const FALLBACK_TB_HEIGHT = 32;
+export class HoverToolbarController {
+    doc;
+    opts;
+    toolbar;
+    root;
+    destroyed = false;
+    currentBlockId = null;
+    currentBlockEl = null;
+    activeChain = [];
+    positionRaf = 0;
+    observerRaf = 0;
+    onScroll;
+    observer;
+    constructor(doc, opts){
+        this.doc = doc;
+        this.opts = opts;
+        doc.getElementById(TOOLBAR_ID)?.remove();
+        const toolbar = doc.createElement('div');
+        toolbar.id = TOOLBAR_ID;
+        doc.body.appendChild(toolbar);
+        this.toolbar = toolbar;
+        this.root = createRoot(toolbar);
+        this.root.render(React.createElement(HoverToolbar, {
+            onAction: (action)=>{
+                if (this.currentBlockId) this.opts.onAction(this.currentBlockId, action);
+            }
+        }));
+        this.onScroll = ()=>this.scheduleReposition();
+        doc.defaultView?.addEventListener('scroll', this.onScroll, true);
+        this.observer = new MutationObserver(()=>{
+            if (this.destroyed || !this.currentBlockId) return;
+            // Coalesce mutation bursts into a single re-select on the next paint.
+            // Re-using positionRaf avoids the previous two-tier RAF pyramid.
+            this.scheduleReselect();
+        });
+        this.observer.observe(doc.body, {
+            childList: true,
+            subtree: true
+        });
+    }
+    scheduleReselect() {
+        const view = this.doc.defaultView;
+        if (!view || this.observerRaf) return;
+        this.observerRaf = view.requestAnimationFrame(()=>{
+            this.observerRaf = 0;
+            if (this.destroyed || !this.currentBlockId) return;
+            this.select(this.currentBlockId);
+        });
+    }
+    update(opts) {
+        this.opts = opts;
+        if (this.currentBlockEl) this.scheduleReposition();
+    }
+    select(id) {
+        if (this.destroyed) return;
+        const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/["\\]/g, '\\$&');
+        const el = this.doc.querySelector(`[${BLOCK_ID_ATTR}="${escaped}"]`);
+        if (!el) {
+            // Block not in DOM (yet) — keep id but hide the toolbar; a later
+            // select(id) call after the iframe re-render will resolve it.
+            this.currentBlockId = id;
+            this.currentBlockEl = null;
+            this.clearActive();
+            this.toolbar.classList.remove('is-visible');
+            return;
+        }
+        this.currentBlockId = id;
+        this.currentBlockEl = el;
+        this.markActiveChain(el);
+        const isNested = this.activeChain.length > 1;
+        this.toolbar.dataset.nested = isNested ? '1' : '0';
+        this.toolbar.classList.add('is-visible');
+        this.scheduleReposition();
+    }
+    deselect() {
+        if (this.destroyed) return;
+        if (!this.currentBlockId) return;
+        this.clearActive();
+        this.currentBlockId = null;
+        this.currentBlockEl = null;
+        this.toolbar.classList.remove('is-visible');
+    }
+    destroy() {
+        if (this.destroyed) return;
+        this.destroyed = true;
+        this.observer.disconnect();
+        const view = this.doc.defaultView;
+        view?.removeEventListener('scroll', this.onScroll, true);
+        if (this.positionRaf) view?.cancelAnimationFrame(this.positionRaf);
+        if (this.observerRaf) view?.cancelAnimationFrame(this.observerRaf);
+        this.positionRaf = 0;
+        this.observerRaf = 0;
+        this.clearActive();
+        this.currentBlockId = null;
+        this.currentBlockEl = null;
+        // Defer unmount — React 19 throws if it lands synchronously mid-render of
+        // another tree; StrictMode also double-invokes us, so only remove the
+        // toolbar node if we still own it.
+        const { root, toolbar } = this;
+        queueMicrotask(()=>{
+            try {
+                root.unmount();
+            } catch  {}
+            if (toolbar.isConnected) toolbar.remove();
+        });
+    }
+    scheduleReposition() {
+        const view = this.doc.defaultView;
+        if (!view) {
+            this.positionToolbar();
+            return;
+        }
+        if (this.positionRaf) view.cancelAnimationFrame(this.positionRaf);
+        this.positionRaf = view.requestAnimationFrame(()=>{
+            this.positionRaf = 0;
+            this.positionToolbar();
+        });
+    }
+    positionToolbar() {
+        const el = this.currentBlockEl;
+        if (!el || !el.isConnected) return;
+        const view = this.doc.defaultView;
+        if (!view) return;
+        const { top, left } = calculateToolbarPosition(el.getBoundingClientRect(), {
+            width: this.toolbar.offsetWidth || FALLBACK_TB_WIDTH,
+            height: this.toolbar.offsetHeight || FALLBACK_TB_HEIGHT
+        }, {
+            scrollX: view.scrollX,
+            scrollY: view.scrollY
+        }, this.opts.position, this.opts.outlineWidth);
+        const { style } = this.toolbar;
+        style.top = `${top}px`;
+        style.left = `${left}px`;
+        style.right = 'auto';
+    }
+    // Only clears the chain we marked, avoiding a full-document scan.
+    clearActive() {
+        for (const node of this.activeChain)node.classList.remove(ACTIVE_CLASS);
+        this.activeChain = [];
+    }
+    markActiveChain(el) {
+        this.clearActive();
+        const chain = [];
+        for(let cur = el; cur; cur = cur.parentElement?.closest(BLOCK_ID_SELECTOR) ?? null){
+            cur.classList.add(ACTIVE_CLASS);
+            chain.push(cur);
+        }
+        this.activeChain = chain;
+    }
+}
+
+//# sourceMappingURL=HoverToolbarController.js.map

package/dist/preview/HoverToolbarController.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/preview/HoverToolbarController.ts"],"sourcesContent":["import React from 'react'\nimport { createRoot, type Root } from 'react-dom/client'\nimport type { HoverToolbarPosition } from '../internal/constants'\nimport { ACTIVE_CLASS, BLOCK_ID_ATTR, BLOCK_ID_SELECTOR } from '../internal/dom'\nimport type { BlockActionMessage } from './protocol'\nimport { TOOLBAR_ID } from './hover-css'\nimport { HoverToolbar } from './HoverToolbar'\nimport { calculateToolbarPosition } from './toolbar-position'\n\nexport type HoverToolbarOptions = {\n  position: HoverToolbarPosition\n  outlineWidth: number\n  onAction: (id: string, action: BlockActionMessage['action']) => void\n}\n\nconst FALLBACK_TB_WIDTH = 120\nconst FALLBACK_TB_HEIGHT = 32\n\nexport class HoverToolbarController {\n  private readonly doc: Document\n  private opts: HoverToolbarOptions\n  private readonly toolbar: HTMLDivElement\n  private readonly root: Root\n  private destroyed = false\n  private currentBlockId: string | null = null\n  private currentBlockEl: HTMLElement | null = null\n  private activeChain: HTMLElement[] = []\n  private positionRaf = 0\n  private observerRaf = 0\n  private readonly onScroll: () => void\n  private readonly observer: MutationObserver\n\n  constructor(doc: Document, opts: HoverToolbarOptions) {\n    this.doc = doc\n    this.opts = opts\n\n    doc.getElementById(TOOLBAR_ID)?.remove()\n    const toolbar = doc.createElement('div')\n    toolbar.id = TOOLBAR_ID\n    doc.body.appendChild(toolbar)\n    this.toolbar = toolbar\n\n    this.root = createRoot(toolbar)\n    this.root.render(\n      React.createElement(HoverToolbar, {\n        onAction: (action) => {\n          if (this.currentBlockId) this.opts.onAction(this.currentBlockId, action)\n        },\n      }),\n    )\n\n    this.onScroll = () => this.scheduleReposition()\n    doc.defaultView?.addEventListener('scroll', this.onScroll, true)\n\n    this.observer = new MutationObserver(() => {\n      if (this.destroyed || !this.currentBlockId) return\n      // Coalesce mutation bursts into a single re-select on the next paint.\n      // Re-using positionRaf avoids the previous two-tier RAF pyramid.\n      this.scheduleReselect()\n    })\n    this.observer.observe(doc.body, { childList: true, subtree: true })\n  }\n\n  private scheduleReselect(): void {\n    const view = this.doc.defaultView\n    if (!view || this.observerRaf) return\n    this.observerRaf = view.requestAnimationFrame(() => {\n      this.observerRaf = 0\n      if (this.destroyed || !this.currentBlockId) return\n      this.select(this.currentBlockId)\n    })\n  }\n\n  update(opts: HoverToolbarOptions): void {\n    this.opts = opts\n    if (this.currentBlockEl) this.scheduleReposition()\n  }\n\n  select(id: string): void {\n    if (this.destroyed) return\n    const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/[\"\\\\]/g, '\\\\$&')\n    const el = this.doc.querySelector<HTMLElement>(`[${BLOCK_ID_ATTR}=\"${escaped}\"]`)\n    if (!el) {\n      // Block not in DOM (yet) — keep id but hide the toolbar; a later\n      // select(id) call after the iframe re-render will resolve it.\n      this.currentBlockId = id\n      this.currentBlockEl = null\n      this.clearActive()\n      this.toolbar.classList.remove('is-visible')\n      return\n    }\n    this.currentBlockId = id\n    this.currentBlockEl = el\n    this.markActiveChain(el)\n    const isNested = this.activeChain.length > 1\n    this.toolbar.dataset.nested = isNested ? '1' : '0'\n    this.toolbar.classList.add('is-visible')\n    this.scheduleReposition()\n  }\n\n  deselect(): void {\n    if (this.destroyed) return\n    if (!this.currentBlockId) return\n    this.clearActive()\n    this.currentBlockId = null\n    this.currentBlockEl = null\n    this.toolbar.classList.remove('is-visible')\n  }\n\n  destroy(): void {\n    if (this.destroyed) return\n    this.destroyed = true\n    this.observer.disconnect()\n    const view = this.doc.defaultView\n    view?.removeEventListener('scroll', this.onScroll, true)\n    if (this.positionRaf) view?.cancelAnimationFrame(this.positionRaf)\n    if (this.observerRaf) view?.cancelAnimationFrame(this.observerRaf)\n    this.positionRaf = 0\n    this.observerRaf = 0\n    this.clearActive()\n    this.currentBlockId = null\n    this.currentBlockEl = null\n    // Defer unmount — React 19 throws if it lands synchronously mid-render of\n    // another tree; StrictMode also double-invokes us, so only remove the\n    // toolbar node if we still own it.\n    const { root, toolbar } = this\n    queueMicrotask(() => {\n      try { root.unmount() } catch { /* already unmounted */ }\n      if (toolbar.isConnected) toolbar.remove()\n    })\n  }\n\n  private scheduleReposition(): void {\n    const view = this.doc.defaultView\n    if (!view) {\n      this.positionToolbar()\n      return\n    }\n    if (this.positionRaf) view.cancelAnimationFrame(this.positionRaf)\n    this.positionRaf = view.requestAnimationFrame(() => {\n      this.positionRaf = 0\n      this.positionToolbar()\n    })\n  }\n\n  private positionToolbar(): void {\n    const el = this.currentBlockEl\n    if (!el || !el.isConnected) return\n    const view = this.doc.defaultView\n    if (!view) return\n    const { top, left } = calculateToolbarPosition(\n      el.getBoundingClientRect(),\n      {\n        width: this.toolbar.offsetWidth || FALLBACK_TB_WIDTH,\n        height: this.toolbar.offsetHeight || FALLBACK_TB_HEIGHT,\n      },\n      { scrollX: view.scrollX, scrollY: view.scrollY },\n      this.opts.position,\n      this.opts.outlineWidth,\n    )\n    const { style } = this.toolbar\n    style.top = `${top}px`\n    style.left = `${left}px`\n    style.right = 'auto'\n  }\n\n  // Only clears the chain we marked, avoiding a full-document scan.\n  private clearActive(): void {\n    for (const node of this.activeChain) node.classList.remove(ACTIVE_CLASS)\n    this.activeChain = []\n  }\n\n  private markActiveChain(el: HTMLElement): void {\n    this.clearActive()\n    const chain: HTMLElement[] = []\n    for (\n      let cur: HTMLElement | null = el;\n      cur;\n      cur = cur.parentElement?.closest<HTMLElement>(BLOCK_ID_SELECTOR) ?? null\n    ) {\n      cur.classList.add(ACTIVE_CLASS)\n      chain.push(cur)\n    }\n    this.activeChain = chain\n  }\n}\n"],"names":["React","createRoot","ACTIVE_CLASS","BLOCK_ID_ATTR","BLOCK_ID_SELECTOR","TOOLBAR_ID","HoverToolbar","calculateToolbarPosition","FALLBACK_TB_WIDTH","FALLBACK_TB_HEIGHT","HoverToolbarController","doc","opts","toolbar","root","destroyed","currentBlockId","currentBlockEl","activeChain","positionRaf","observerRaf","onScroll","observer","constructor","getElementById","remove","createElement","id","body","appendChild","render","onAction","action","scheduleReposition","defaultView","addEventListener","MutationObserver","scheduleReselect","observe","childList","subtree","view","requestAnimationFrame","select","update","escaped","CSS","escape","replace","el","querySelector","clearActive","classList","markActiveChain","isNested","length","dataset","nested","add","deselect","destroy","disconnect","removeEventListener","cancelAnimationFrame","queueMicrotask","unmount","isConnected","positionToolbar","top","left","getBoundingClientRect","width","offsetWidth","height","offsetHeight","scrollX","scrollY","position","outlineWidth","style","right","node","chain","cur","parentElement","closest","push"],"mappings":"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"}

package/dist/preview/hover-css.d.ts

@@ -0,0 +1,11 @@
+export declare const HOVER_STYLE_ID = "better-editor-hover-style";
+export declare const TOOLBAR_ID = "better-editor-block-toolbar";
+export declare const INTERACT_BODY_ATTR = "data-bee-interact";
+export declare const HOVER_CSS = "\n  body:not([data-bee-interact]) [data-better-editor-id] { cursor: pointer; }\n  body:not([data-bee-interact]) [data-better-editor-id]:hover,\n  body:not([data-bee-interact]) [data-better-editor-id].better-editor-active {\n    outline: var(--bee-outline-width) solid var(--bee-top);\n    outline-offset: calc(-1 * var(--bee-outline-width) - 1px);\n    background-color: color-mix(in srgb, var(--bee-top) 10%, transparent);\n  }\n  body:not([data-bee-interact]) [data-better-editor-id] [data-better-editor-id]:hover,\n  body:not([data-bee-interact]) [data-better-editor-id] [data-better-editor-id].better-editor-active {\n    outline-color: var(--bee-nested);\n    background-color: color-mix(in srgb, var(--bee-nested) 10%, transparent);\n  }\n  body[data-bee-interact] #better-editor-block-toolbar { display: none; }\n\n  #better-editor-block-toolbar {\n    position: absolute;\n    z-index: var(--better-editor-z-toolbar, 2147483647);\n    display: none;\n    gap: 2px;\n    padding: 3px;\n    border-radius: 4px;\n    background: var(--bee-top);\n    color: #fff;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n    font-family: system-ui, sans-serif;\n  }\n  #better-editor-block-toolbar[data-nested=\"1\"] { background: var(--bee-nested); }\n  #better-editor-block-toolbar.is-visible { display: inline-flex; }\n  #better-editor-block-toolbar button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    border: 0;\n    border-radius: 3px;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n  }\n  #better-editor-block-toolbar button:hover { background: rgba(255, 255, 255, 0.18); }\n  #better-editor-block-toolbar button[data-action=\"delete\"]:hover { background: rgba(0, 0, 0, 0.25); }\n";
+export type HoverVars = {
+    topColor: string;
+    nestedColor: string;
+    outlineWidth: number;
+};
+export declare const setHoverVars: (doc: Document, vars: HoverVars) => void;
+export declare const clearHoverVars: (doc: Document) => void;

package/dist/preview/hover-css.js

@@ -0,0 +1,94 @@
+import { ACTIVE_CLASS, BLOCK_ID_ATTR } from '../internal/dom';
+export const HOVER_STYLE_ID = 'better-editor-hover-style';
+export const TOOLBAR_ID = 'better-editor-block-toolbar';
+// Set on doc.body to disable hover affordances + click-to-focus while
+// the user wants to interact with the consumer page (forms, accordions,
+// links). All hover/active rules below are gated on its absence.
+export const INTERACT_BODY_ATTR = 'data-bee-interact';
+const VAR_TOP = '--bee-top';
+const VAR_NESTED = '--bee-nested';
+const VAR_OUTLINE_WIDTH = '--bee-outline-width';
+export const HOVER_CSS = `
+  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] { cursor: pointer; }
+  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}]:hover,
+  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}].${ACTIVE_CLASS} {
+    outline: var(${VAR_OUTLINE_WIDTH}) solid var(${VAR_TOP});
+    outline-offset: calc(-1 * var(${VAR_OUTLINE_WIDTH}) - 1px);
+    background-color: color-mix(in srgb, var(${VAR_TOP}) 10%, transparent);
+  }
+  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] [${BLOCK_ID_ATTR}]:hover,
+  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] [${BLOCK_ID_ATTR}].${ACTIVE_CLASS} {
+    outline-color: var(${VAR_NESTED});
+    background-color: color-mix(in srgb, var(${VAR_NESTED}) 10%, transparent);
+  }
+  body[${INTERACT_BODY_ATTR}] #${TOOLBAR_ID} { display: none; }
+
+  #${TOOLBAR_ID} {
+    position: absolute;
+    z-index: var(--better-editor-z-toolbar, 2147483647);
+    display: none;
+    gap: 2px;
+    padding: 3px;
+    border-radius: 4px;
+    background: var(${VAR_TOP});
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+    font-family: system-ui, sans-serif;
+  }
+  #${TOOLBAR_ID}[data-nested="1"] { background: var(${VAR_NESTED}); }
+  #${TOOLBAR_ID}.is-visible { display: inline-flex; }
+  #${TOOLBAR_ID} button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: 0;
+    border-radius: 3px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+  #${TOOLBAR_ID} button:hover { background: rgba(255, 255, 255, 0.18); }
+  #${TOOLBAR_ID} button[data-action="delete"]:hover { background: rgba(0, 0, 0, 0.25); }
+`;
+// Restrictive on purpose: these values are written verbatim into a CSS
+// custom property on the preview iframe, so anything that survives the
+// regex still lands inside `outline:` / `background-color:`. The regex
+// rejects newlines and unmatched parens so an injected value can't escape
+// into a separate declaration.
+const COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|rgba?\([^()\n\r]*\))$/i;
+const isValidColor = (v)=>typeof v === 'string' && COLOR_RE.test(v.trim());
+const isValidOutline = (v)=>typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 50;
+const warnInvalid = (kind, value)=>{
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn(`[better-editor] ignoring invalid ${kind}:`, value);
+    }
+};
+export const setHoverVars = (doc, vars)=>{
+    const root = doc.documentElement;
+    if (isValidColor(vars.topColor)) {
+        root.style.setProperty(VAR_TOP, vars.topColor);
+    } else {
+        warnInvalid('topColor', vars.topColor);
+    }
+    if (isValidColor(vars.nestedColor)) {
+        root.style.setProperty(VAR_NESTED, vars.nestedColor);
+    } else {
+        warnInvalid('nestedColor', vars.nestedColor);
+    }
+    if (isValidOutline(vars.outlineWidth)) {
+        root.style.setProperty(VAR_OUTLINE_WIDTH, `${vars.outlineWidth}px`);
+    } else {
+        warnInvalid('outlineWidth', vars.outlineWidth);
+    }
+};
+export const clearHoverVars = (doc)=>{
+    const root = doc.documentElement;
+    root.style.removeProperty(VAR_TOP);
+    root.style.removeProperty(VAR_NESTED);
+    root.style.removeProperty(VAR_OUTLINE_WIDTH);
+};
+
+//# sourceMappingURL=hover-css.js.map

package/dist/preview/hover-css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/preview/hover-css.ts"],"sourcesContent":["import { ACTIVE_CLASS, BLOCK_ID_ATTR } from '../internal/dom'\n\nexport const HOVER_STYLE_ID = 'better-editor-hover-style'\nexport const TOOLBAR_ID = 'better-editor-block-toolbar'\n// Set on doc.body to disable hover affordances + click-to-focus while\n// the user wants to interact with the consumer page (forms, accordions,\n// links). All hover/active rules below are gated on its absence.\nexport const INTERACT_BODY_ATTR = 'data-bee-interact'\n\nconst VAR_TOP = '--bee-top'\nconst VAR_NESTED = '--bee-nested'\nconst VAR_OUTLINE_WIDTH = '--bee-outline-width'\n\nexport const HOVER_CSS = `\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] { cursor: pointer; }\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}]:hover,\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}].${ACTIVE_CLASS} {\n    outline: var(${VAR_OUTLINE_WIDTH}) solid var(${VAR_TOP});\n    outline-offset: calc(-1 * var(${VAR_OUTLINE_WIDTH}) - 1px);\n    background-color: color-mix(in srgb, var(${VAR_TOP}) 10%, transparent);\n  }\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] [${BLOCK_ID_ATTR}]:hover,\n  body:not([${INTERACT_BODY_ATTR}]) [${BLOCK_ID_ATTR}] [${BLOCK_ID_ATTR}].${ACTIVE_CLASS} {\n    outline-color: var(${VAR_NESTED});\n    background-color: color-mix(in srgb, var(${VAR_NESTED}) 10%, transparent);\n  }\n  body[${INTERACT_BODY_ATTR}] #${TOOLBAR_ID} { display: none; }\n\n  #${TOOLBAR_ID} {\n    position: absolute;\n    z-index: var(--better-editor-z-toolbar, 2147483647);\n    display: none;\n    gap: 2px;\n    padding: 3px;\n    border-radius: 4px;\n    background: var(${VAR_TOP});\n    color: #fff;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n    font-family: system-ui, sans-serif;\n  }\n  #${TOOLBAR_ID}[data-nested=\"1\"] { background: var(${VAR_NESTED}); }\n  #${TOOLBAR_ID}.is-visible { display: inline-flex; }\n  #${TOOLBAR_ID} button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 26px;\n    height: 26px;\n    padding: 0;\n    border: 0;\n    border-radius: 3px;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n  }\n  #${TOOLBAR_ID} button:hover { background: rgba(255, 255, 255, 0.18); }\n  #${TOOLBAR_ID} button[data-action=\"delete\"]:hover { background: rgba(0, 0, 0, 0.25); }\n`\n\nexport type HoverVars = {\n  topColor: string\n  nestedColor: string\n  outlineWidth: number\n}\n\n// Restrictive on purpose: these values are written verbatim into a CSS\n// custom property on the preview iframe, so anything that survives the\n// regex still lands inside `outline:` / `background-color:`. The regex\n// rejects newlines and unmatched parens so an injected value can't escape\n// into a separate declaration.\nconst COLOR_RE = /^(?:#[0-9a-fA-F]{3,8}|rgba?\\([^()\\n\\r]*\\))$/i\n\nconst isValidColor = (v: unknown): v is string =>\n  typeof v === 'string' && COLOR_RE.test(v.trim())\n\nconst isValidOutline = (v: unknown): v is number =>\n  typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 50\n\nconst warnInvalid = (kind: string, value: unknown): void => {\n  if (process.env.NODE_ENV !== 'production') {\n    console.warn(`[better-editor] ignoring invalid ${kind}:`, value)\n  }\n}\n\nexport const setHoverVars = (doc: Document, vars: HoverVars): void => {\n  const root = doc.documentElement\n  if (isValidColor(vars.topColor)) {\n    root.style.setProperty(VAR_TOP, vars.topColor)\n  } else {\n    warnInvalid('topColor', vars.topColor)\n  }\n  if (isValidColor(vars.nestedColor)) {\n    root.style.setProperty(VAR_NESTED, vars.nestedColor)\n  } else {\n    warnInvalid('nestedColor', vars.nestedColor)\n  }\n  if (isValidOutline(vars.outlineWidth)) {\n    root.style.setProperty(VAR_OUTLINE_WIDTH, `${vars.outlineWidth}px`)\n  } else {\n    warnInvalid('outlineWidth', vars.outlineWidth)\n  }\n}\n\nexport const clearHoverVars = (doc: Document): void => {\n  const root = doc.documentElement\n  root.style.removeProperty(VAR_TOP)\n  root.style.removeProperty(VAR_NESTED)\n  root.style.removeProperty(VAR_OUTLINE_WIDTH)\n}\n"],"names":["ACTIVE_CLASS","BLOCK_ID_ATTR","HOVER_STYLE_ID","TOOLBAR_ID","INTERACT_BODY_ATTR","VAR_TOP","VAR_NESTED","VAR_OUTLINE_WIDTH","HOVER_CSS","COLOR_RE","isValidColor","v","test","trim","isValidOutline","Number","isFinite","warnInvalid","kind","value","process","env","NODE_ENV","console","warn","setHoverVars","doc","vars","root","documentElement","topColor","style","setProperty","nestedColor","outlineWidth","clearHoverVars","removeProperty"],"mappings":"AAAA,SAASA,YAAY,EAAEC,aAAa,QAAQ,kBAAiB;AAE7D,OAAO,MAAMC,iBAAiB,4BAA2B;AACzD,OAAO,MAAMC,aAAa,8BAA6B;AACvD,sEAAsE;AACtE,wEAAwE;AACxE,iEAAiE;AACjE,OAAO,MAAMC,qBAAqB,oBAAmB;AAErD,MAAMC,UAAU;AAChB,MAAMC,aAAa;AACnB,MAAMC,oBAAoB;AAE1B,OAAO,MAAMC,YAAY,CAAC;YACd,EAAEJ,mBAAmB,IAAI,EAAEH,cAAc;YACzC,EAAEG,mBAAmB,IAAI,EAAEH,cAAc;YACzC,EAAEG,mBAAmB,IAAI,EAAEH,cAAc,EAAE,EAAED,aAAa;iBACrD,EAAEO,kBAAkB,YAAY,EAAEF,QAAQ;kCACzB,EAAEE,kBAAkB;6CACT,EAAEF,QAAQ;;YAE3C,EAAED,mBAAmB,IAAI,EAAEH,cAAc,GAAG,EAAEA,cAAc;YAC5D,EAAEG,mBAAmB,IAAI,EAAEH,cAAc,GAAG,EAAEA,cAAc,EAAE,EAAED,aAAa;uBAClE,EAAEM,WAAW;6CACS,EAAEA,WAAW;;OAEnD,EAAEF,mBAAmB,GAAG,EAAED,WAAW;;GAEzC,EAAEA,WAAW;;;;;;;oBAOI,EAAEE,QAAQ;;;;;GAK3B,EAAEF,WAAW,oCAAoC,EAAEG,WAAW;GAC9D,EAAEH,WAAW;GACb,EAAEA,WAAW;;;;;;;;;;;;;GAab,EAAEA,WAAW;GACb,EAAEA,WAAW;AAChB,CAAC,CAAA;AAQD,uEAAuE;AACvE,uEAAuE;AACvE,uEAAuE;AACvE,0EAA0E;AAC1E,+BAA+B;AAC/B,MAAMM,WAAW;AAEjB,MAAMC,eAAe,CAACC,IACpB,OAAOA,MAAM,YAAYF,SAASG,IAAI,CAACD,EAAEE,IAAI;AAE/C,MAAMC,iBAAiB,CAACH,IACtB,OAAOA,MAAM,YAAYI,OAAOC,QAAQ,CAACL,MAAMA,KAAK,KAAKA,KAAK;AAEhE,MAAMM,cAAc,CAACC,MAAcC;IACjC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzCC,QAAQC,IAAI,CAAC,CAAC,iCAAiC,EAAEN,KAAK,CAAC,CAAC,EAAEC;IAC5D;AACF;AAEA,OAAO,MAAMM,eAAe,CAACC,KAAeC;IAC1C,MAAMC,OAAOF,IAAIG,eAAe;IAChC,IAAInB,aAAaiB,KAAKG,QAAQ,GAAG;QAC/BF,KAAKG,KAAK,CAACC,WAAW,CAAC3B,SAASsB,KAAKG,QAAQ;IAC/C,OAAO;QACLb,YAAY,YAAYU,KAAKG,QAAQ;IACvC;IACA,IAAIpB,aAAaiB,KAAKM,WAAW,GAAG;QAClCL,KAAKG,KAAK,CAACC,WAAW,CAAC1B,YAAYqB,KAAKM,WAAW;IACrD,OAAO;QACLhB,YAAY,eAAeU,KAAKM,WAAW;IAC7C;IACA,IAAInB,eAAea,KAAKO,YAAY,GAAG;QACrCN,KAAKG,KAAK,CAACC,WAAW,CAACzB,mBAAmB,GAAGoB,KAAKO,YAAY,CAAC,EAAE,CAAC;IACpE,OAAO;QACLjB,YAAY,gBAAgBU,KAAKO,YAAY;IAC/C;AACF,EAAC;AAED,OAAO,MAAMC,iBAAiB,CAACT;IAC7B,MAAME,OAAOF,IAAIG,eAAe;IAChCD,KAAKG,KAAK,CAACK,cAAc,CAAC/B;IAC1BuB,KAAKG,KAAK,CAACK,cAAc,CAAC9B;IAC1BsB,KAAKG,KAAK,CAACK,cAAc,CAAC7B;AAC5B,EAAC"}

package/dist/preview/installClickToFocus.d.ts

@@ -0,0 +1,6 @@
+export type InstallClickToFocusOptions = {
+    /** Returning false from this gate lets the click propagate to the
+     * consumer page (interact mode) instead of selecting the block. */
+    isEnabled?: () => boolean;
+};
+export declare const installClickToFocus: (doc: Document, onFocus: (id: string) => void, options?: InstallClickToFocusOptions) => (() => void);

package/dist/preview/installClickToFocus.js

@@ -0,0 +1,21 @@
+import { BLOCK_ID_ATTR, BLOCK_ID_SELECTOR } from '../internal/dom';
+export const installClickToFocus = (doc, onFocus, options = {})=>{
+    const onClick = (e)=>{
+        if (options.isEnabled && !options.isEnabled()) return;
+        // Cross-realm-safe element check — `instanceof` is realm-local.
+        const target = e.target;
+        if (!target || typeof target.closest !== 'function') return;
+        const idEl = target.closest(BLOCK_ID_SELECTOR);
+        if (!idEl) return;
+        const id = idEl.getAttribute(BLOCK_ID_ATTR);
+        if (!id) return;
+        // Swallow so consumer-side links/buttons don't fire while the editor is open.
+        e.preventDefault();
+        e.stopPropagation();
+        onFocus(id);
+    };
+    doc.addEventListener('click', onClick, true);
+    return ()=>doc.removeEventListener('click', onClick, true);
+};
+
+//# sourceMappingURL=installClickToFocus.js.map

package/dist/preview/installClickToFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/preview/installClickToFocus.ts"],"sourcesContent":["import { BLOCK_ID_ATTR, BLOCK_ID_SELECTOR } from '../internal/dom'\n\nexport type InstallClickToFocusOptions = {\n  /** Returning false from this gate lets the click propagate to the\n   * consumer page (interact mode) instead of selecting the block. */\n  isEnabled?: () => boolean\n}\n\nexport const installClickToFocus = (\n  doc: Document,\n  onFocus: (id: string) => void,\n  options: InstallClickToFocusOptions = {},\n): (() => void) => {\n  const onClick = (e: MouseEvent) => {\n    if (options.isEnabled && !options.isEnabled()) return\n    // Cross-realm-safe element check — `instanceof` is realm-local.\n    const target = e.target as Element | null\n    if (!target || typeof target.closest !== 'function') return\n    const idEl = target.closest<HTMLElement>(BLOCK_ID_SELECTOR)\n    if (!idEl) return\n    const id = idEl.getAttribute(BLOCK_ID_ATTR)\n    if (!id) return\n    // Swallow so consumer-side links/buttons don't fire while the editor is open.\n    e.preventDefault()\n    e.stopPropagation()\n    onFocus(id)\n  }\n  doc.addEventListener('click', onClick, true)\n  return () => doc.removeEventListener('click', onClick, true)\n}\n"],"names":["BLOCK_ID_ATTR","BLOCK_ID_SELECTOR","installClickToFocus","doc","onFocus","options","onClick","e","isEnabled","target","closest","idEl","id","getAttribute","preventDefault","stopPropagation","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,aAAa,EAAEC,iBAAiB,QAAQ,kBAAiB;AAQlE,OAAO,MAAMC,sBAAsB,CACjCC,KACAC,SACAC,UAAsC,CAAC,CAAC;IAExC,MAAMC,UAAU,CAACC;QACf,IAAIF,QAAQG,SAAS,IAAI,CAACH,QAAQG,SAAS,IAAI;QAC/C,gEAAgE;QAChE,MAAMC,SAASF,EAAEE,MAAM;QACvB,IAAI,CAACA,UAAU,OAAOA,OAAOC,OAAO,KAAK,YAAY;QACrD,MAAMC,OAAOF,OAAOC,OAAO,CAAcT;QACzC,IAAI,CAACU,MAAM;QACX,MAAMC,KAAKD,KAAKE,YAAY,CAACb;QAC7B,IAAI,CAACY,IAAI;QACT,8EAA8E;QAC9EL,EAAEO,cAAc;QAChBP,EAAEQ,eAAe;QACjBX,QAAQQ;IACV;IACAT,IAAIa,gBAAgB,CAAC,SAASV,SAAS;IACvC,OAAO,IAAMH,IAAIc,mBAAmB,CAAC,SAASX,SAAS;AACzD,EAAC"}