cms-renderer 0.5.2 → 0.6.0

package/dist/lib/block-toolbar.js

@@ -3,82 +3,101 @@
 
 // lib/block-toolbar.tsx
 import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { useLayoutEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function BlockToolbar({ blockId }) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
+function BlockToolbar({ blockId, style }) {
+  const toolbarRef = useRef(null);
+  useLayoutEffect(() => {
+    const el = toolbarRef.current;
+    if (!el) return;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const MAX_ATTEMPTS = 3;
+    for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
+      const rect = el.getBoundingClientRect();
+      const offRight = rect.right > vw;
+      const offLeft = rect.left < 0;
+      const offTop = rect.top < 0;
+      const offBottom = rect.bottom > vh;
+      if (!offRight && !offLeft && !offTop && !offBottom) break;
+      if (offRight) {
+        el.style.left = `${vw - rect.width}px`;
+        el.style.transform = "none";
+      } else if (offLeft) {
+        el.style.left = "0px";
+        el.style.transform = "none";
+      }
+      if (offTop) {
+        el.style.bottom = `${vh - rect.height}px`;
+      } else if (offBottom) {
+        el.style.bottom = "0px";
+      }
+    }
   }, []);
   const handleAction = (action) => {
-    if (window.parent && window.parent !== window) {
+    if (typeof window !== "undefined" && window.parent && window.parent !== window) {
       window.parent.postMessage({ type: "cms-block-action", action, blockId }, "*");
     }
   };
-  if (!mounted) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: "cms-block-toolbar", "data-cms-toolbar": "true", "data-block-id": blockId, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          title: "Move up",
-          "aria-label": "Move up",
-          "data-action": "move-up",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleAction("move-up");
-          },
-          children: /* @__PURE__ */ jsx(ChevronUp, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          title: "Move down",
-          "aria-label": "Move down",
-          "data-action": "move-down",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleAction("move-down");
-          },
-          children: /* @__PURE__ */ jsx(ChevronDown, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          title: "Add block",
-          "aria-label": "Add block",
-          "data-action": "add-block",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleAction("add-block");
-          },
-          children: /* @__PURE__ */ jsx(Plus, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "delete",
-          title: "Delete block",
-          "aria-label": "Delete block",
-          "data-action": "delete",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleAction("delete");
-          },
-          children: /* @__PURE__ */ jsx(Trash2, {})
-        }
-      )
-    ] }),
-    document.body
-  );
+  return /* @__PURE__ */ jsxs("div", { ref: toolbarRef, className: "cms-block-toolbar", "data-cms-toolbar": "true", style, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: "Move up",
+        "aria-label": "Move up",
+        "data-action": "move-up",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleAction("move-up");
+        },
+        children: /* @__PURE__ */ jsx(ChevronUp, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: "Move down",
+        "aria-label": "Move down",
+        "data-action": "move-down",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleAction("move-down");
+        },
+        children: /* @__PURE__ */ jsx(ChevronDown, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: "Add block",
+        "aria-label": "Add block",
+        "data-action": "add-block",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleAction("add-block");
+        },
+        children: /* @__PURE__ */ jsx(Plus, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "delete",
+        title: "Delete block",
+        "aria-label": "Delete block",
+        "data-action": "delete",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleAction("delete");
+        },
+        children: /* @__PURE__ */ jsx(Trash2, {})
+      }
+    )
+  ] });
 }
 export {
   BlockToolbar

package/dist/lib/block-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/block-toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, ChevronUp, Plus, Trash2 } from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\n/**\n * Block Toolbar Component\n *\n * Provides move up/down and delete controls for blocks in edit mode.\n * Portals to document.body so it never participates in the page layout.\n * Shown/positioned by the inline CMS script via data-block-id lookup.\n */\n\nexport function BlockToolbar({ blockId }: { blockId: string }) {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const handleAction = (action: string) => {\n    if (window.parent && window.parent !== window) {\n      window.parent.postMessage({ type: 'cms-block-action', action, blockId }, '*');\n    }\n  };\n\n  if (!mounted) return null;\n\n  return createPortal(\n    <div className=\"cms-block-toolbar\" data-cms-toolbar=\"true\" data-block-id={blockId}>\n      <button\n        type=\"button\"\n        title=\"Move up\"\n        aria-label=\"Move up\"\n        data-action=\"move-up\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-up');\n        }}\n      >\n        <ChevronUp />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Move down\"\n        aria-label=\"Move down\"\n        data-action=\"move-down\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-down');\n        }}\n      >\n        <ChevronDown />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Add block\"\n        aria-label=\"Add block\"\n        data-action=\"add-block\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('add-block');\n        }}\n      >\n        <Plus />\n      </button>\n      <button\n        type=\"button\"\n        className=\"delete\"\n        title=\"Delete block\"\n        aria-label=\"Delete block\"\n        data-action=\"delete\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('delete');\n        }}\n      >\n        <Trash2 />\n      </button>\n    </div>,\n    document.body\n  );\n}\n"],"mappings":";;;;AAEA,SAAS,aAAa,WAAW,MAAM,cAAc;AACrD,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AA0BzB,SAWI,KAXJ;AAhBG,SAAS,aAAa,EAAE,QAAQ,GAAwB;AAC7D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,CAAC,WAAmB;AACvC,QAAI,OAAO,UAAU,OAAO,WAAW,QAAQ;AAC7C,aAAO,OAAO,YAAY,EAAE,MAAM,oBAAoB,QAAQ,QAAQ,GAAG,GAAG;AAAA,IAC9E;AAAA,EACF;AAEA,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO;AAAA,IACL,qBAAC,SAAI,WAAU,qBAAoB,oBAAiB,QAAO,iBAAe,SACxE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAW;AAAA,UACX,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,SAAS;AAAA,UACxB;AAAA,UAEA,8BAAC,aAAU;AAAA;AAAA,MACb;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAW;AAAA,UACX,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,WAAW;AAAA,UAC1B;AAAA,UAEA,8BAAC,eAAY;AAAA;AAAA,MACf;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAW;AAAA,UACX,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,WAAW;AAAA,UAC1B;AAAA,UAEA,8BAAC,QAAK;AAAA;AAAA,MACR;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAM;AAAA,UACN,cAAW;AAAA,UACX,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,QAAQ;AAAA,UACvB;AAAA,UAEA,8BAAC,UAAO;AAAA;AAAA,MACV;AAAA,OACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../lib/block-toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, ChevronUp, Plus, Trash2 } from 'lucide-react';\nimport type React from 'react';\nimport { useLayoutEffect, useRef } from 'react';\n\n/**\n * Block Toolbar Component\n *\n * Provides move up/down and delete controls for blocks in edit mode.\n * This is a Client Component because it requires onClick handlers.\n */\n\nexport function BlockToolbar({ blockId, style }: { blockId: string; style?: React.CSSProperties }) {\n  const toolbarRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const el = toolbarRef.current;\n    if (!el) return;\n\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    const MAX_ATTEMPTS = 3;\n\n    for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {\n      const rect = el.getBoundingClientRect();\n\n      const offRight = rect.right > vw;\n      const offLeft = rect.left < 0;\n      const offTop = rect.top < 0;\n      const offBottom = rect.bottom > vh;\n\n      if (!offRight && !offLeft && !offTop && !offBottom) break;\n\n      // Horizontal: remove the centering transform and pin to the edge that's clipped\n      if (offRight) {\n        el.style.left = `${vw - rect.width}px`;\n        el.style.transform = 'none';\n      } else if (offLeft) {\n        el.style.left = '0px';\n        el.style.transform = 'none';\n      }\n\n      // Vertical: toolbar uses `bottom` (distance from viewport bottom), so\n      // top < 0 means bottom is too large — clamp it so top aligns to viewport edge\n      if (offTop) {\n        el.style.bottom = `${vh - rect.height}px`;\n      } else if (offBottom) {\n        el.style.bottom = '0px';\n      }\n    }\n  }, []);\n\n  const handleAction = (action: string) => {\n    if (typeof window !== 'undefined' && window.parent && window.parent !== window) {\n      window.parent.postMessage({ type: 'cms-block-action', action, blockId }, '*');\n    }\n  };\n\n  return (\n    <div ref={toolbarRef} className=\"cms-block-toolbar\" data-cms-toolbar=\"true\" style={style}>\n      <button\n        type=\"button\"\n        title=\"Move up\"\n        aria-label=\"Move up\"\n        data-action=\"move-up\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-up');\n        }}\n      >\n        <ChevronUp />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Move down\"\n        aria-label=\"Move down\"\n        data-action=\"move-down\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-down');\n        }}\n      >\n        <ChevronDown />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Add block\"\n        aria-label=\"Add block\"\n        data-action=\"add-block\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('add-block');\n        }}\n      >\n        <Plus />\n      </button>\n      <button\n        type=\"button\"\n        className=\"delete\"\n        title=\"Delete block\"\n        aria-label=\"Delete block\"\n        data-action=\"delete\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('delete');\n        }}\n      >\n        <Trash2 />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA,SAAS,aAAa,WAAW,MAAM,cAAc;AAErD,SAAS,iBAAiB,cAAc;AAwDpC,SAWI,KAXJ;AA/CG,SAAS,aAAa,EAAE,SAAS,MAAM,GAAqD;AACjG,QAAM,aAAa,OAAuB,IAAI;AAE9C,kBAAgB,MAAM;AACpB,UAAM,KAAK,WAAW;AACtB,QAAI,CAAC,GAAI;AAET,UAAM,KAAK,OAAO;AAClB,UAAM,KAAK,OAAO;AAClB,UAAM,eAAe;AAErB,aAAS,UAAU,GAAG,UAAU,cAAc,WAAW;AACvD,YAAM,OAAO,GAAG,sBAAsB;AAEtC,YAAM,WAAW,KAAK,QAAQ;AAC9B,YAAM,UAAU,KAAK,OAAO;AAC5B,YAAM,SAAS,KAAK,MAAM;AAC1B,YAAM,YAAY,KAAK,SAAS;AAEhC,UAAI,CAAC,YAAY,CAAC,WAAW,CAAC,UAAU,CAAC,UAAW;AAGpD,UAAI,UAAU;AACZ,WAAG,MAAM,OAAO,GAAG,KAAK,KAAK,KAAK;AAClC,WAAG,MAAM,YAAY;AAAA,MACvB,WAAW,SAAS;AAClB,WAAG,MAAM,OAAO;AAChB,WAAG,MAAM,YAAY;AAAA,MACvB;AAIA,UAAI,QAAQ;AACV,WAAG,MAAM,SAAS,GAAG,KAAK,KAAK,MAAM;AAAA,MACvC,WAAW,WAAW;AACpB,WAAG,MAAM,SAAS;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,CAAC,WAAmB;AACvC,QAAI,OAAO,WAAW,eAAe,OAAO,UAAU,OAAO,WAAW,QAAQ;AAC9E,aAAO,OAAO,YAAY,EAAE,MAAM,oBAAoB,QAAQ,QAAQ,GAAG,GAAG;AAAA,IAC9E;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,KAAK,YAAY,WAAU,qBAAoB,oBAAiB,QAAO,OAC1E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,uBAAa,SAAS;AAAA,QACxB;AAAA,QAEA,8BAAC,aAAU;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,uBAAa,WAAW;AAAA,QAC1B;AAAA,QAEA,8BAAC,eAAY;AAAA;AAAA,IACf;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,uBAAa,WAAW;AAAA,QAC1B;AAAA,QAEA,8BAAC,QAAK;AAAA;AAAA,IACR;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAM;AAAA,QACN,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,uBAAa,QAAQ;AAAA,QACvB;AAAA,QAEA,8BAAC,UAAO;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;","names":[]}

package/dist/lib/client-editable-block.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React$1 from 'react';
 
 interface ContentEntry {
     v: string;
@@ -9,19 +9,20 @@ interface ClientEditableBlockProps {
     blockType: string;
     contentEntries: ContentEntry[];
     children: React.ReactNode;
-    blockProps?: Record<string, string>;
 }
 /**
- * Client-side span injector for blocks whose components use React hooks
- * and therefore can't be walked server-side.
+ * Client-side block editable wrapper.
  *
- * Renders a hidden sentinel element, then locates the block's actual root DOM
- * element via nextElementSibling — no wrapper div is added to the tree.
+ * Renders a hidden sentinel span followed by the block's children (no wrapper div).
+ * On mount, finds the component's root element via nextElementSibling and:
+ * - Stamps data-cms-block, data-block-id, data-block-type directly on it
+ * - Injects data-cms-editable spans around matching text nodes
+ * - Portals the BlockToolbar into document.body with position:fixed so it is
+ *   never clipped by overflow:hidden or stacking contexts on the block itself
  *
- * Uses a MutationObserver to re-inject [data-cms-editable] spans after every
- * React commit (including state-driven re-renders like animations), so the
- * overlays survive React's reconciliation.
+ * Uses a MutationObserver to re-inject spans after every DOM mutation
+ * (e.g. animated state changes that swap visible elements).
  */
-declare function ClientEditableBlock({ blockId, blockType, contentEntries, children, blockProps, }: ClientEditableBlockProps): react.JSX.Element;
+declare function ClientEditableBlock({ blockId, blockType, contentEntries, children, }: ClientEditableBlockProps): React$1.JSX.Element;
 
 export { ClientEditableBlock };

package/dist/lib/client-editable-block.js

@@ -2,30 +2,230 @@
 "use client";
 
 // lib/client-editable-block.tsx
-import { useCallback, useLayoutEffect, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState } from "react";
+import { createPortal } from "react-dom";
+
+// lib/block-outline.tsx
+import { useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function BlockOutline({ blockRect }) {
+  const outlineRef = useRef(null);
+  useLayoutEffect(() => {
+    const el = outlineRef.current;
+    if (!el) return;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const offsets = [4, 0, -2];
+    for (const offset of offsets) {
+      const pad = offset + 2;
+      el.style.top = `${blockRect.top - pad}px`;
+      el.style.left = `${blockRect.left - pad}px`;
+      el.style.width = `${blockRect.width + pad * 2}px`;
+      el.style.height = `${blockRect.height + pad * 2}px`;
+      const rect = el.getBoundingClientRect();
+      if (rect.top >= 0 && rect.left >= 0 && rect.right <= vw && rect.bottom <= vh) break;
+    }
+  }, [blockRect]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: outlineRef,
+      "data-cms-outline": "true",
+      style: {
+        position: "fixed",
+        border: "2px solid #3b82f6",
+        borderRadius: "2px",
+        pointerEvents: "none",
+        zIndex: 99998,
+        boxSizing: "border-box"
+      }
+    }
+  );
+}
+
+// lib/block-toolbar.tsx
+import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function BlockToolbar({ blockId, style }) {
+  const toolbarRef = useRef2(null);
+  useLayoutEffect2(() => {
+    const el = toolbarRef.current;
+    if (!el) return;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const MAX_ATTEMPTS = 3;
+    for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
+      const rect = el.getBoundingClientRect();
+      const offRight = rect.right > vw;
+      const offLeft = rect.left < 0;
+      const offTop = rect.top < 0;
+      const offBottom = rect.bottom > vh;
+      if (!offRight && !offLeft && !offTop && !offBottom) break;
+      if (offRight) {
+        el.style.left = `${vw - rect.width}px`;
+        el.style.transform = "none";
+      } else if (offLeft) {
+        el.style.left = "0px";
+        el.style.transform = "none";
+      }
+      if (offTop) {
+        el.style.bottom = `${vh - rect.height}px`;
+      } else if (offBottom) {
+        el.style.bottom = "0px";
+      }
+    }
+  }, []);
+  const handleAction = (action) => {
+    if (typeof window !== "undefined" && window.parent && window.parent !== window) {
+      window.parent.postMessage({ type: "cms-block-action", action, blockId }, "*");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: toolbarRef, className: "cms-block-toolbar", "data-cms-toolbar": "true", style, children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        title: "Move up",
+        "aria-label": "Move up",
+        "data-action": "move-up",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleAction("move-up");
+        },
+        children: /* @__PURE__ */ jsx2(ChevronUp, {})
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        title: "Move down",
+        "aria-label": "Move down",
+        "data-action": "move-down",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleAction("move-down");
+        },
+        children: /* @__PURE__ */ jsx2(ChevronDown, {})
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        title: "Add block",
+        "aria-label": "Add block",
+        "data-action": "add-block",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleAction("add-block");
+        },
+        children: /* @__PURE__ */ jsx2(Plus, {})
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: "delete",
+        title: "Delete block",
+        "aria-label": "Delete block",
+        "data-action": "delete",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleAction("delete");
+        },
+        children: /* @__PURE__ */ jsx2(Trash2, {})
+      }
+    )
+  ] });
+}
+
+// lib/client-editable-block.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CMS_STYLES = `
+  [data-cms-editable] { cursor: pointer; border-radius: 2px; }
+  [data-cms-editable]:hover { outline: 2px solid #3b82f6; outline-offset: 2px; }
+  .cms-block-toolbar {
+    position: fixed;
+    display: flex; gap: 4px; background: #1f2937; border-radius: 6px; padding: 4px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    transition: opacity 0.15s ease; z-index: 99999;
+    pointer-events: auto;
+  }
+  .cms-block-toolbar button {
+    display: flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px; border: none; background: transparent;
+    color: #9ca3af; border-radius: 4px; cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+  .cms-block-toolbar button:hover { background: #374151; color: #fff; }
+  .cms-block-toolbar button.delete:hover { background: #dc2626; color: #fff; }
+  .cms-block-toolbar button:disabled { opacity: 0.4; cursor: not-allowed; }
+  .cms-block-toolbar button:disabled:hover { background: transparent; color: #9ca3af; }
+  .cms-block-toolbar svg { width: 16px; height: 16px; }
+`;
+var cmsGlobalInjected = false;
+function ensureCmsGlobals() {
+  if (cmsGlobalInjected) return;
+  cmsGlobalInjected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-cms", "");
+  style.textContent = CMS_STYLES;
+  document.head.appendChild(style);
+  if (!window.__cmsEditableInitialized) {
+    window.__cmsEditableInitialized = true;
+    document.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.closest(".cms-block-toolbar")) return;
+      const editable = target.closest("[data-cms-editable]");
+      if (editable) {
+        const msg = {
+          type: "cms-editable-click",
+          blockId: editable.getAttribute("data-block-id"),
+          blockType: editable.getAttribute("data-block-type"),
+          contentPath: editable.getAttribute("data-content-path")
+        };
+        if (window.parent && window.parent !== window) window.parent.postMessage(msg, "*");
+        return;
+      }
+      const block = target.closest("[data-cms-block]");
+      if (block) {
+        const msg = {
+          type: "cms-editable-click",
+          blockId: block.getAttribute("data-block-id"),
+          blockType: block.getAttribute("data-block-type"),
+          contentPath: null
+        };
+        if (window.parent && window.parent !== window) window.parent.postMessage(msg, "*");
+      }
+    });
+  }
+}
 function ClientEditableBlock({
   blockId,
   blockType,
   contentEntries,
-  children,
-  blockProps
+  children
 }) {
-  const sentinelRef = useRef(null);
-  const observerRef = useRef(null);
-  const isInjectingRef = useRef(false);
+  const sentinelRef = useRef3(null);
+  const observerRef = useRef3(null);
+  const isInjectingRef = useRef3(false);
+  const [toolbarStyle, setToolbarStyle] = useState(null);
+  const [outlineRect, setOutlineRect] = useState(null);
   const getBlockRoot = useCallback(() => {
     return sentinelRef.current?.nextElementSibling ?? null;
   }, []);
   const injectSpans = useCallback(() => {
     if (isInjectingRef.current) return;
-    const container = getBlockRoot();
-    if (!container) return;
+    const blockRoot = getBlockRoot();
+    if (!blockRoot) return;
     isInjectingRef.current = true;
     observerRef.current?.disconnect();
     try {
       const existing = Array.from(
-        container.querySelectorAll("span[data-cms-editable][data-content-path]")
+        blockRoot.querySelectorAll("span[data-cms-editable][data-content-path]")
       );
       for (const span of existing) {
         const parent = span.parentNode;
@@ -34,7 +234,7 @@ function ClientEditableBlock({
         parent.removeChild(span);
       }
       const used = /* @__PURE__ */ new Set();
-      const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);
+      const walker = document.createTreeWalker(blockRoot, NodeFilter.SHOW_TEXT, null);
       const textNodes = [];
       let n = walker.nextNode();
       while (n !== null) {
@@ -66,9 +266,9 @@ function ClientEditableBlock({
       }
     } finally {
       isInjectingRef.current = false;
-      const blockRoot = getBlockRoot();
-      if (blockRoot && observerRef.current) {
-        observerRef.current.observe(blockRoot, {
+      const root = getBlockRoot();
+      if (root && observerRef.current) {
+        observerRef.current.observe(root, {
           childList: true,
           subtree: true,
           characterData: true
@@ -76,31 +276,48 @@ function ClientEditableBlock({
       }
     }
   }, [blockId, blockType, contentEntries, getBlockRoot]);
-  useLayoutEffect(() => {
+  useLayoutEffect3(() => {
+    ensureCmsGlobals();
     const blockRoot = getBlockRoot();
-    if (blockRoot && blockProps) {
-      for (const [key, value] of Object.entries(blockProps)) {
-        blockRoot.setAttribute(key, value);
-      }
-    }
+    if (!blockRoot) return;
+    blockRoot.setAttribute("data-cms-block", "");
+    blockRoot.setAttribute("data-block-id", blockId);
+    blockRoot.setAttribute("data-block-type", blockType);
+    const showToolbar = () => {
+      const rect = blockRoot.getBoundingClientRect();
+      setToolbarStyle({
+        bottom: window.innerHeight - rect.bottom + 8,
+        left: rect.left + rect.width / 2,
+        transform: "translateX(-50%)"
+      });
+      setOutlineRect(rect);
+    };
+    const hideToolbar = () => {
+      setToolbarStyle(null);
+      setOutlineRect(null);
+    };
+    blockRoot.addEventListener("mouseenter", showToolbar);
+    blockRoot.addEventListener("mouseleave", hideToolbar);
     injectSpans();
     const observer = new MutationObserver(injectSpans);
     observerRef.current = observer;
-    if (blockRoot) {
-      observer.observe(blockRoot, {
-        childList: true,
-        subtree: true,
-        characterData: true
-      });
-    }
+    observer.observe(blockRoot, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
     return () => {
       observer.disconnect();
       observerRef.current = null;
+      blockRoot.removeEventListener("mouseenter", showToolbar);
+      blockRoot.removeEventListener("mouseleave", hideToolbar);
     };
-  }, [injectSpans, getBlockRoot, blockProps]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { ref: sentinelRef, style: { display: "none" }, "aria-hidden": "true" }),
-    children
+  }, [injectSpans, blockId, blockType, getBlockRoot]);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("span", { ref: sentinelRef, style: { display: "none" }, "aria-hidden": true }),
+    children,
+    outlineRect && createPortal(/* @__PURE__ */ jsx3(BlockOutline, { blockRect: outlineRect }), document.body),
+    toolbarStyle && createPortal(/* @__PURE__ */ jsx3(BlockToolbar, { blockId, style: toolbarStyle }), document.body)
   ] });
 }
 export {

package/dist/lib/client-editable-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/client-editable-block.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\ninterface ContentEntry {\n  v: string;\n  p: string;\n}\n\ninterface ClientEditableBlockProps {\n  blockId: string;\n  blockType: string;\n  contentEntries: ContentEntry[];\n  children: React.ReactNode;\n  blockProps?: Record<string, string>;\n}\n\n/**\n * Client-side span injector for blocks whose components use React hooks\n * and therefore can't be walked server-side.\n *\n * Renders a hidden sentinel element, then locates the block's actual root DOM\n * element via nextElementSibling — no wrapper div is added to the tree.\n *\n * Uses a MutationObserver to re-inject [data-cms-editable] spans after every\n * React commit (including state-driven re-renders like animations), so the\n * overlays survive React's reconciliation.\n */\nexport function ClientEditableBlock({\n  blockId,\n  blockType,\n  contentEntries,\n  children,\n  blockProps,\n}: ClientEditableBlockProps) {\n  const sentinelRef = useRef<HTMLSpanElement>(null);\n  const observerRef = useRef<MutationObserver | null>(null);\n  const isInjectingRef = useRef(false);\n\n  const getBlockRoot = useCallback((): Element | null => {\n    return sentinelRef.current?.nextElementSibling ?? null;\n  }, []);\n\n  const injectSpans = useCallback(() => {\n    if (isInjectingRef.current) return;\n    const container = getBlockRoot();\n    if (!container) return;\n\n    isInjectingRef.current = true;\n    // Disconnect observer while we mutate the DOM to avoid re-entrant calls.\n    observerRef.current?.disconnect();\n\n    try {\n      // Remove previously injected text-level spans, restoring the original text nodes.\n      const existing = Array.from(\n        container.querySelectorAll<HTMLElement>('span[data-cms-editable][data-content-path]')\n      );\n      for (const span of existing) {\n        const parent = span.parentNode;\n        if (!parent) continue;\n        while (span.firstChild) parent.insertBefore(span.firstChild, span);\n        parent.removeChild(span);\n      }\n\n      // Walk all visible text nodes and wrap the ones that match content values.\n      const used = new Set<string>();\n      const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);\n      const textNodes: Text[] = [];\n      let n = walker.nextNode();\n      while (n !== null) {\n        const textNode = n as Text;\n        if (\n          textNode.parentElement?.closest('.cms-block-toolbar') == null &&\n          textNode.nodeValue?.trim()\n        ) {\n          textNodes.push(textNode);\n        }\n        n = walker.nextNode();\n      }\n\n      for (const textNode of textNodes) {\n        // Never inject spans inside SVG — <span> is not valid SVG content\n        if (textNode.parentElement?.closest('svg') != null) continue;\n\n        const text = textNode.nodeValue;\n        if (!text) continue;\n        for (const entry of contentEntries) {\n          if (used.has(entry.p)) continue;\n          if (text.indexOf(entry.v) !== -1 && text.trim() === entry.v.trim()) {\n            used.add(entry.p);\n            const span = document.createElement('span');\n            // Inline style ensures layout-transparency before the stylesheet cascade applies\n            span.style.display = 'contents';\n            span.setAttribute('data-cms-editable', '');\n            span.setAttribute('data-block-id', blockId);\n            span.setAttribute('data-block-type', blockType);\n            span.setAttribute('data-content-path', entry.p);\n            textNode.parentNode?.insertBefore(span, textNode);\n            span.appendChild(textNode);\n            break;\n          }\n        }\n      }\n    } finally {\n      isInjectingRef.current = false;\n      // Reconnect after our mutations are done.\n      const blockRoot = getBlockRoot();\n      if (blockRoot && observerRef.current) {\n        observerRef.current.observe(blockRoot, {\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n      }\n    }\n  }, [blockId, blockType, contentEntries, getBlockRoot]);\n\n  useLayoutEffect(() => {\n    const blockRoot = getBlockRoot();\n\n    // Stamp block data attributes directly onto the component's root DOM element.\n    if (blockRoot && blockProps) {\n      for (const [key, value] of Object.entries(blockProps)) {\n        blockRoot.setAttribute(key, value);\n      }\n    }\n\n    // Initial injection after React's first commit.\n    injectSpans();\n\n    // Re-inject whenever the child component mutates the DOM\n    // (e.g. animated state changes that swap visible elements).\n    const observer = new MutationObserver(injectSpans);\n    observerRef.current = observer;\n\n    if (blockRoot) {\n      observer.observe(blockRoot, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n      observerRef.current = null;\n    };\n  }, [injectSpans, getBlockRoot, blockProps]);\n\n  return (\n    <>\n      {/* Sentinel: zero-size, invisible anchor used only to locate the block's root element via nextElementSibling */}\n      <span ref={sentinelRef} style={{ display: 'none' }} aria-hidden=\"true\" />\n      {children}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../lib/client-editable-block.tsx","../../lib/block-outline.tsx","../../lib/block-toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { BlockOutline } from './block-outline';\nimport { BlockToolbar } from './block-toolbar';\n\n// ---------------------------------------------------------------------------\n// Global styles + click-routing — injected once into <head> on first mount.\n// We do this programmatically because Next.js RSC marks body-level <style> and\n// <script> tags as inactive (they appear greyed-out in DevTools and are not\n// applied by the browser).\n// ---------------------------------------------------------------------------\n\nconst CMS_STYLES = `\n  [data-cms-editable] { cursor: pointer; border-radius: 2px; }\n  [data-cms-editable]:hover { outline: 2px solid #3b82f6; outline-offset: 2px; }\n  .cms-block-toolbar {\n    position: fixed;\n    display: flex; gap: 4px; background: #1f2937; border-radius: 6px; padding: 4px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n    transition: opacity 0.15s ease; z-index: 99999;\n    pointer-events: auto;\n  }\n  .cms-block-toolbar button {\n    display: flex; align-items: center; justify-content: center;\n    width: 28px; height: 28px; border: none; background: transparent;\n    color: #9ca3af; border-radius: 4px; cursor: pointer;\n    transition: background 0.15s ease, color 0.15s ease;\n  }\n  .cms-block-toolbar button:hover { background: #374151; color: #fff; }\n  .cms-block-toolbar button.delete:hover { background: #dc2626; color: #fff; }\n  .cms-block-toolbar button:disabled { opacity: 0.4; cursor: not-allowed; }\n  .cms-block-toolbar button:disabled:hover { background: transparent; color: #9ca3af; }\n  .cms-block-toolbar svg { width: 16px; height: 16px; }\n`;\n\nlet cmsGlobalInjected = false;\n\nfunction ensureCmsGlobals() {\n  if (cmsGlobalInjected) return;\n  cmsGlobalInjected = true;\n\n  const style = document.createElement('style');\n  style.setAttribute('data-cms', '');\n  style.textContent = CMS_STYLES;\n  document.head.appendChild(style);\n\n  if (!(window as Window & { __cmsEditableInitialized?: boolean }).__cmsEditableInitialized) {\n    (window as Window & { __cmsEditableInitialized?: boolean }).__cmsEditableInitialized = true;\n    document.addEventListener('click', (e) => {\n      const target = e.target as Element;\n      if (target.closest('.cms-block-toolbar')) return;\n\n      const editable = target.closest('[data-cms-editable]');\n      if (editable) {\n        const msg = {\n          type: 'cms-editable-click',\n          blockId: editable.getAttribute('data-block-id'),\n          blockType: editable.getAttribute('data-block-type'),\n          contentPath: editable.getAttribute('data-content-path'),\n        };\n        if (window.parent && window.parent !== window) window.parent.postMessage(msg, '*');\n        return;\n      }\n\n      const block = target.closest('[data-cms-block]');\n      if (block) {\n        const msg = {\n          type: 'cms-editable-click',\n          blockId: block.getAttribute('data-block-id'),\n          blockType: block.getAttribute('data-block-type'),\n          contentPath: null,\n        };\n        if (window.parent && window.parent !== window) window.parent.postMessage(msg, '*');\n      }\n    });\n  }\n}\n\ninterface ContentEntry {\n  v: string;\n  p: string;\n}\n\ninterface ClientEditableBlockProps {\n  blockId: string;\n  blockType: string;\n  contentEntries: ContentEntry[];\n  children: React.ReactNode;\n}\n\n/**\n * Client-side block editable wrapper.\n *\n * Renders a hidden sentinel span followed by the block's children (no wrapper div).\n * On mount, finds the component's root element via nextElementSibling and:\n * - Stamps data-cms-block, data-block-id, data-block-type directly on it\n * - Injects data-cms-editable spans around matching text nodes\n * - Portals the BlockToolbar into document.body with position:fixed so it is\n *   never clipped by overflow:hidden or stacking contexts on the block itself\n *\n * Uses a MutationObserver to re-inject spans after every DOM mutation\n * (e.g. animated state changes that swap visible elements).\n */\nexport function ClientEditableBlock({\n  blockId,\n  blockType,\n  contentEntries,\n  children,\n}: ClientEditableBlockProps) {\n  const sentinelRef = useRef<HTMLSpanElement>(null);\n  const observerRef = useRef<MutationObserver | null>(null);\n  const isInjectingRef = useRef(false);\n  const [toolbarStyle, setToolbarStyle] = useState<React.CSSProperties | null>(null);\n  const [outlineRect, setOutlineRect] = useState<DOMRect | null>(null);\n\n  const getBlockRoot = useCallback((): HTMLElement | null => {\n    return (sentinelRef.current?.nextElementSibling as HTMLElement) ?? null;\n  }, []);\n\n  const injectSpans = useCallback(() => {\n    if (isInjectingRef.current) return;\n    const blockRoot = getBlockRoot();\n    if (!blockRoot) return;\n\n    isInjectingRef.current = true;\n    // Disconnect observer while we mutate the DOM to avoid re-entrant calls.\n    observerRef.current?.disconnect();\n\n    try {\n      // Remove previously injected text-level spans, restoring the original text nodes.\n      const existing = Array.from(\n        blockRoot.querySelectorAll<HTMLElement>('span[data-cms-editable][data-content-path]')\n      );\n      for (const span of existing) {\n        const parent = span.parentNode;\n        if (!parent) continue;\n        while (span.firstChild) parent.insertBefore(span.firstChild, span);\n        parent.removeChild(span);\n      }\n\n      // Walk all visible text nodes and wrap the ones that match content values.\n      const used = new Set<string>();\n      const walker = document.createTreeWalker(blockRoot, NodeFilter.SHOW_TEXT, null);\n      const textNodes: Text[] = [];\n      let n = walker.nextNode();\n      while (n !== null) {\n        const textNode = n as Text;\n        if (\n          textNode.parentElement?.closest('.cms-block-toolbar') == null &&\n          textNode.nodeValue?.trim()\n        ) {\n          textNodes.push(textNode);\n        }\n        n = walker.nextNode();\n      }\n\n      for (const textNode of textNodes) {\n        // Never inject spans inside SVG — <span> is not valid SVG content\n        if (textNode.parentElement?.closest('svg') != null) continue;\n\n        const text = textNode.nodeValue;\n        if (!text) continue;\n        for (const entry of contentEntries) {\n          if (used.has(entry.p)) continue;\n          if (text.indexOf(entry.v) !== -1 && text.trim() === entry.v.trim()) {\n            used.add(entry.p);\n            const span = document.createElement('span');\n            // Inline style ensures layout-transparency before the stylesheet cascade applies\n            span.style.display = 'contents';\n            span.setAttribute('data-cms-editable', '');\n            span.setAttribute('data-block-id', blockId);\n            span.setAttribute('data-block-type', blockType);\n            span.setAttribute('data-content-path', entry.p);\n            textNode.parentNode?.insertBefore(span, textNode);\n            span.appendChild(textNode);\n            break;\n          }\n        }\n      }\n    } finally {\n      isInjectingRef.current = false;\n      // Reconnect after our mutations are done.\n      const root = getBlockRoot();\n      if (root && observerRef.current) {\n        observerRef.current.observe(root, {\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n      }\n    }\n  }, [blockId, blockType, contentEntries, getBlockRoot]);\n\n  useLayoutEffect(() => {\n    ensureCmsGlobals();\n\n    const blockRoot = getBlockRoot();\n    if (!blockRoot) return;\n\n    // Stamp CMS attributes directly on the component's root element.\n    blockRoot.setAttribute('data-cms-block', '');\n    blockRoot.setAttribute('data-block-id', blockId);\n    blockRoot.setAttribute('data-block-type', blockType);\n\n    // Toolbar: portal to document.body with position:fixed so it escapes\n    // any overflow:hidden or stacking context on the block or its ancestors.\n    const showToolbar = () => {\n      const rect = blockRoot.getBoundingClientRect();\n      setToolbarStyle({\n        bottom: window.innerHeight - rect.bottom + 8,\n        left: rect.left + rect.width / 2,\n        transform: 'translateX(-50%)',\n      });\n      setOutlineRect(rect);\n    };\n    const hideToolbar = () => {\n      setToolbarStyle(null);\n      setOutlineRect(null);\n    };\n\n    blockRoot.addEventListener('mouseenter', showToolbar);\n    blockRoot.addEventListener('mouseleave', hideToolbar);\n\n    // Initial span injection after React's first commit.\n    injectSpans();\n\n    // Re-inject whenever the child component mutates the DOM.\n    const observer = new MutationObserver(injectSpans);\n    observerRef.current = observer;\n    observer.observe(blockRoot, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n\n    return () => {\n      observer.disconnect();\n      observerRef.current = null;\n      blockRoot.removeEventListener('mouseenter', showToolbar);\n      blockRoot.removeEventListener('mouseleave', hideToolbar);\n    };\n  }, [injectSpans, blockId, blockType, getBlockRoot]);\n\n  return (\n    <>\n      <span ref={sentinelRef} style={{ display: 'none' }} aria-hidden />\n      {children}\n      {outlineRect && createPortal(<BlockOutline blockRect={outlineRect} />, document.body)}\n      {toolbarStyle &&\n        createPortal(<BlockToolbar blockId={blockId} style={toolbarStyle} />, document.body)}\n    </>\n  );\n}\n","'use client';\n\nimport { useLayoutEffect, useRef } from 'react';\n\n/**\n * Block Outline Component\n *\n * Renders a position:fixed border overlay around a hovered block.\n * Tries up to 3 offset values (4px → 0px → -2px inset) to keep every\n * edge of the border visible inside the viewport before giving up.\n */\nexport function BlockOutline({ blockRect }: { blockRect: DOMRect }) {\n  const outlineRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const el = outlineRef.current;\n    if (!el) return;\n\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n\n    // Attempt progressively smaller offsets until the border is fully visible.\n    // offset=4 → normal outline-offset feel\n    // offset=0 → border flush with block edge\n    // offset=-2 → border drawn inside the block (inset)\n    const offsets = [4, 0, -2];\n\n    for (const offset of offsets) {\n      const pad = offset + 2; // 2px border + offset\n      el.style.top = `${blockRect.top - pad}px`;\n      el.style.left = `${blockRect.left - pad}px`;\n      el.style.width = `${blockRect.width + pad * 2}px`;\n      el.style.height = `${blockRect.height + pad * 2}px`;\n\n      const rect = el.getBoundingClientRect();\n      if (rect.top >= 0 && rect.left >= 0 && rect.right <= vw && rect.bottom <= vh) break;\n    }\n  }, [blockRect]);\n\n  return (\n    <div\n      ref={outlineRef}\n      data-cms-outline=\"true\"\n      style={{\n        position: 'fixed',\n        border: '2px solid #3b82f6',\n        borderRadius: '2px',\n        pointerEvents: 'none',\n        zIndex: 99998,\n        boxSizing: 'border-box',\n      }}\n    />\n  );\n}\n","'use client';\n\nimport { ChevronDown, ChevronUp, Plus, Trash2 } from 'lucide-react';\nimport type React from 'react';\nimport { useLayoutEffect, useRef } from 'react';\n\n/**\n * Block Toolbar Component\n *\n * Provides move up/down and delete controls for blocks in edit mode.\n * This is a Client Component because it requires onClick handlers.\n */\n\nexport function BlockToolbar({ blockId, style }: { blockId: string; style?: React.CSSProperties }) {\n  const toolbarRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const el = toolbarRef.current;\n    if (!el) return;\n\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    const MAX_ATTEMPTS = 3;\n\n    for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {\n      const rect = el.getBoundingClientRect();\n\n      const offRight = rect.right > vw;\n      const offLeft = rect.left < 0;\n      const offTop = rect.top < 0;\n      const offBottom = rect.bottom > vh;\n\n      if (!offRight && !offLeft && !offTop && !offBottom) break;\n\n      // Horizontal: remove the centering transform and pin to the edge that's clipped\n      if (offRight) {\n        el.style.left = `${vw - rect.width}px`;\n        el.style.transform = 'none';\n      } else if (offLeft) {\n        el.style.left = '0px';\n        el.style.transform = 'none';\n      }\n\n      // Vertical: toolbar uses `bottom` (distance from viewport bottom), so\n      // top < 0 means bottom is too large — clamp it so top aligns to viewport edge\n      if (offTop) {\n        el.style.bottom = `${vh - rect.height}px`;\n      } else if (offBottom) {\n        el.style.bottom = '0px';\n      }\n    }\n  }, []);\n\n  const handleAction = (action: string) => {\n    if (typeof window !== 'undefined' && window.parent && window.parent !== window) {\n      window.parent.postMessage({ type: 'cms-block-action', action, blockId }, '*');\n    }\n  };\n\n  return (\n    <div ref={toolbarRef} className=\"cms-block-toolbar\" data-cms-toolbar=\"true\" style={style}>\n      <button\n        type=\"button\"\n        title=\"Move up\"\n        aria-label=\"Move up\"\n        data-action=\"move-up\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-up');\n        }}\n      >\n        <ChevronUp />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Move down\"\n        aria-label=\"Move down\"\n        data-action=\"move-down\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-down');\n        }}\n      >\n        <ChevronDown />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Add block\"\n        aria-label=\"Add block\"\n        data-action=\"add-block\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('add-block');\n        }}\n      >\n        <Plus />\n      </button>\n      <button\n        type=\"button\"\n        className=\"delete\"\n        title=\"Delete block\"\n        aria-label=\"Delete block\"\n        data-action=\"delete\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('delete');\n        }}\n      >\n        <Trash2 />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA,SAAS,aAAa,mBAAAA,kBAAiB,UAAAC,SAAQ,gBAAgB;AAC/D,SAAS,oBAAoB;;;ACD7B,SAAS,iBAAiB,cAAc;AAsCpC;AA7BG,SAAS,aAAa,EAAE,UAAU,GAA2B;AAClE,QAAM,aAAa,OAAuB,IAAI;AAE9C,kBAAgB,MAAM;AACpB,UAAM,KAAK,WAAW;AACtB,QAAI,CAAC,GAAI;AAET,UAAM,KAAK,OAAO;AAClB,UAAM,KAAK,OAAO;AAMlB,UAAM,UAAU,CAAC,GAAG,GAAG,EAAE;AAEzB,eAAW,UAAU,SAAS;AAC5B,YAAM,MAAM,SAAS;AACrB,SAAG,MAAM,MAAM,GAAG,UAAU,MAAM,GAAG;AACrC,SAAG,MAAM,OAAO,GAAG,UAAU,OAAO,GAAG;AACvC,SAAG,MAAM,QAAQ,GAAG,UAAU,QAAQ,MAAM,CAAC;AAC7C,SAAG,MAAM,SAAS,GAAG,UAAU,SAAS,MAAM,CAAC;AAE/C,YAAM,OAAO,GAAG,sBAAsB;AACtC,UAAI,KAAK,OAAO,KAAK,KAAK,QAAQ,KAAK,KAAK,SAAS,MAAM,KAAK,UAAU,GAAI;AAAA,IAChF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,oBAAiB;AAAA,MACjB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,WAAW;AAAA,MACb;AAAA;AAAA,EACF;AAEJ;;;ACnDA,SAAS,aAAa,WAAW,MAAM,cAAc;AAErD,SAAS,mBAAAC,kBAAiB,UAAAC,eAAc;AAwDpC,SAWI,OAAAC,MAXJ;AA/CG,SAAS,aAAa,EAAE,SAAS,MAAM,GAAqD;AACjG,QAAM,aAAaD,QAAuB,IAAI;AAE9C,EAAAD,iBAAgB,MAAM;AACpB,UAAM,KAAK,WAAW;AACtB,QAAI,CAAC,GAAI;AAET,UAAM,KAAK,OAAO;AAClB,UAAM,KAAK,OAAO;AAClB,UAAM,eAAe;AAErB,aAAS,UAAU,GAAG,UAAU,cAAc,WAAW;AACvD,YAAM,OAAO,GAAG,sBAAsB;AAEtC,YAAM,WAAW,KAAK,QAAQ;AAC9B,YAAM,UAAU,KAAK,OAAO;AAC5B,YAAM,SAAS,KAAK,MAAM;AAC1B,YAAM,YAAY,KAAK,SAAS;AAEhC,UAAI,CAAC,YAAY,CAAC,WAAW,CAAC,UAAU,CAAC,UAAW;AAGpD,UAAI,UAAU;AACZ,WAAG,MAAM,OAAO,GAAG,KAAK,KAAK,KAAK;AAClC,WAAG,MAAM,YAAY;AAAA,MACvB,WAAW,SAAS;AAClB,WAAG,MAAM,OAAO;AAChB,WAAG,MAAM,YAAY;AAAA,MACvB;AAIA,UAAI,QAAQ;AACV,WAAG,MAAM,SAAS,GAAG,KAAK,KAAK,MAAM;AAAA,MACvC,WAAW,WAAW;AACpB,WAAG,MAAM,SAAS;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,CAAC,WAAmB;AACvC,QAAI,OAAO,WAAW,eAAe,OAAO,UAAU,OAAO,WAAW,QAAQ;AAC9E,aAAO,OAAO,YAAY,EAAE,MAAM,oBAAoB,QAAQ,QAAQ,GAAG,GAAG;AAAA,IAC9E;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,KAAK,YAAY,WAAU,qBAAoB,oBAAiB,QAAO,OAC1E;AAAA,oBAAAE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,uBAAa,SAAS;AAAA,QACxB;AAAA,QAEA,0BAAAA,KAAC,aAAU;AAAA;AAAA,IACb;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,uBAAa,WAAW;AAAA,QAC1B;AAAA,QAEA,0BAAAA,KAAC,eAAY;AAAA;AAAA,IACf;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,uBAAa,WAAW;AAAA,QAC1B;AAAA,QAEA,0BAAAA,KAAC,QAAK;AAAA;AAAA,IACR;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAM;AAAA,QACN,cAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,uBAAa,QAAQ;AAAA,QACvB;AAAA,QAEA,0BAAAA,KAAC,UAAO;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;;;AFsII,mBACE,OAAAC,MADF,QAAAC,aAAA;AAxOJ,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBnB,IAAI,oBAAoB;AAExB,SAAS,mBAAmB;AAC1B,MAAI,kBAAmB;AACvB,sBAAoB;AAEpB,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,YAAY,EAAE;AACjC,QAAM,cAAc;AACpB,WAAS,KAAK,YAAY,KAAK;AAE/B,MAAI,CAAE,OAA2D,0BAA0B;AACzF,IAAC,OAA2D,2BAA2B;AACvF,aAAS,iBAAiB,SAAS,CAAC,MAAM;AACxC,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,QAAQ,oBAAoB,EAAG;AAE1C,YAAM,WAAW,OAAO,QAAQ,qBAAqB;AACrD,UAAI,UAAU;AACZ,cAAM,MAAM;AAAA,UACV,MAAM;AAAA,UACN,SAAS,SAAS,aAAa,eAAe;AAAA,UAC9C,WAAW,SAAS,aAAa,iBAAiB;AAAA,UAClD,aAAa,SAAS,aAAa,mBAAmB;AAAA,QACxD;AACA,YAAI,OAAO,UAAU,OAAO,WAAW,OAAQ,QAAO,OAAO,YAAY,KAAK,GAAG;AACjF;AAAA,MACF;AAEA,YAAM,QAAQ,OAAO,QAAQ,kBAAkB;AAC/C,UAAI,OAAO;AACT,cAAM,MAAM;AAAA,UACV,MAAM;AAAA,UACN,SAAS,MAAM,aAAa,eAAe;AAAA,UAC3C,WAAW,MAAM,aAAa,iBAAiB;AAAA,UAC/C,aAAa;AAAA,QACf;AACA,YAAI,OAAO,UAAU,OAAO,WAAW,OAAQ,QAAO,OAAO,YAAY,KAAK,GAAG;AAAA,MACnF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AA2BO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,cAAcC,QAAwB,IAAI;AAChD,QAAM,cAAcA,QAAgC,IAAI;AACxD,QAAM,iBAAiBA,QAAO,KAAK;AACnC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAqC,IAAI;AACjF,QAAM,CAAC,aAAa,cAAc,IAAI,SAAyB,IAAI;AAEnE,QAAM,eAAe,YAAY,MAA0B;AACzD,WAAQ,YAAY,SAAS,sBAAsC;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,eAAe,QAAS;AAC5B,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,mBAAe,UAAU;AAEzB,gBAAY,SAAS,WAAW;AAEhC,QAAI;AAEF,YAAM,WAAW,MAAM;AAAA,QACrB,UAAU,iBAA8B,4CAA4C;AAAA,MACtF;AACA,iBAAW,QAAQ,UAAU;AAC3B,cAAM,SAAS,KAAK;AACpB,YAAI,CAAC,OAAQ;AACb,eAAO,KAAK,WAAY,QAAO,aAAa,KAAK,YAAY,IAAI;AACjE,eAAO,YAAY,IAAI;AAAA,MACzB;AAGA,YAAM,OAAO,oBAAI,IAAY;AAC7B,YAAM,SAAS,SAAS,iBAAiB,WAAW,WAAW,WAAW,IAAI;AAC9E,YAAM,YAAoB,CAAC;AAC3B,UAAI,IAAI,OAAO,SAAS;AACxB,aAAO,MAAM,MAAM;AACjB,cAAM,WAAW;AACjB,YACE,SAAS,eAAe,QAAQ,oBAAoB,KAAK,QACzD,SAAS,WAAW,KAAK,GACzB;AACA,oBAAU,KAAK,QAAQ;AAAA,QACzB;AACA,YAAI,OAAO,SAAS;AAAA,MACtB;AAEA,iBAAW,YAAY,WAAW;AAEhC,YAAI,SAAS,eAAe,QAAQ,KAAK,KAAK,KAAM;AAEpD,cAAM,OAAO,SAAS;AACtB,YAAI,CAAC,KAAM;AACX,mBAAW,SAAS,gBAAgB;AAClC,cAAI,KAAK,IAAI,MAAM,CAAC,EAAG;AACvB,cAAI,KAAK,QAAQ,MAAM,CAAC,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,EAAE,KAAK,GAAG;AAClE,iBAAK,IAAI,MAAM,CAAC;AAChB,kBAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,iBAAK,MAAM,UAAU;AACrB,iBAAK,aAAa,qBAAqB,EAAE;AACzC,iBAAK,aAAa,iBAAiB,OAAO;AAC1C,iBAAK,aAAa,mBAAmB,SAAS;AAC9C,iBAAK,aAAa,qBAAqB,MAAM,CAAC;AAC9C,qBAAS,YAAY,aAAa,MAAM,QAAQ;AAChD,iBAAK,YAAY,QAAQ;AACzB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,UAAE;AACA,qBAAe,UAAU;AAEzB,YAAM,OAAO,aAAa;AAC1B,UAAI,QAAQ,YAAY,SAAS;AAC/B,oBAAY,QAAQ,QAAQ,MAAM;AAAA,UAChC,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,gBAAgB,YAAY,CAAC;AAErD,EAAAC,iBAAgB,MAAM;AACpB,qBAAiB;AAEjB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAGhB,cAAU,aAAa,kBAAkB,EAAE;AAC3C,cAAU,aAAa,iBAAiB,OAAO;AAC/C,cAAU,aAAa,mBAAmB,SAAS;AAInD,UAAM,cAAc,MAAM;AACxB,YAAM,OAAO,UAAU,sBAAsB;AAC7C,sBAAgB;AAAA,QACd,QAAQ,OAAO,cAAc,KAAK,SAAS;AAAA,QAC3C,MAAM,KAAK,OAAO,KAAK,QAAQ;AAAA,QAC/B,WAAW;AAAA,MACb,CAAC;AACD,qBAAe,IAAI;AAAA,IACrB;AACA,UAAM,cAAc,MAAM;AACxB,sBAAgB,IAAI;AACpB,qBAAe,IAAI;AAAA,IACrB;AAEA,cAAU,iBAAiB,cAAc,WAAW;AACpD,cAAU,iBAAiB,cAAc,WAAW;AAGpD,gBAAY;AAGZ,UAAM,WAAW,IAAI,iBAAiB,WAAW;AACjD,gBAAY,UAAU;AACtB,aAAS,QAAQ,WAAW;AAAA,MAC1B,WAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAe;AAAA,IACjB,CAAC;AAED,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,kBAAY,UAAU;AACtB,gBAAU,oBAAoB,cAAc,WAAW;AACvD,gBAAU,oBAAoB,cAAc,WAAW;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,WAAW,YAAY,CAAC;AAElD,SACE,gBAAAF,MAAA,YACE;AAAA,oBAAAD,KAAC,UAAK,KAAK,aAAa,OAAO,EAAE,SAAS,OAAO,GAAG,eAAW,MAAC;AAAA,IAC/D;AAAA,IACA,eAAe,aAAa,gBAAAA,KAAC,gBAAa,WAAW,aAAa,GAAI,SAAS,IAAI;AAAA,IACnF,gBACC,aAAa,gBAAAA,KAAC,gBAAa,SAAkB,OAAO,cAAc,GAAI,SAAS,IAAI;AAAA,KACvF;AAEJ;","names":["useLayoutEffect","useRef","useLayoutEffect","useRef","jsx","jsx","jsxs","useRef","useLayoutEffect"]}