@standhigher/puck-page-builder 0.12.8 → 0.12.9

package/dist/index.js

@@ -57,7 +57,7 @@ import {
   ViewIcon,
   XIcon
 } from "@shopify/polaris-icons";
-import { useRef, useState } from "react";
+import { useRef as useRef2, useState } from "react";
 
 // src/adapters/puck/demo-preview.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -114,6 +114,39 @@ function createDemoPuckConfig(onSelect) {
   };
 }
 
+// src/editor/shell/AdaptiveIframe.tsx
+import { useLayoutEffect, useRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function AdaptiveIframe({ document: document2, children }) {
+  const contentRef = useRef(null);
+  useLayoutEffect(() => {
+    const content = contentRef.current;
+    const frame = document2?.defaultView?.frameElement;
+    if (!content || !frame) return;
+    const previousHeight = frame.style.getPropertyValue("height");
+    const previousPriority = frame.style.getPropertyPriority("height");
+    let animationFrame;
+    const resize = () => {
+      if (animationFrame !== void 0) cancelAnimationFrame(animationFrame);
+      animationFrame = requestAnimationFrame(() => {
+        animationFrame = void 0;
+        const height = `${Math.ceil(content.getBoundingClientRect().height)}px`;
+        if (frame.style.height !== height) frame.style.height = height;
+      });
+    };
+    resize();
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(resize);
+    observer?.observe(content);
+    return () => {
+      observer?.disconnect();
+      if (animationFrame !== void 0) cancelAnimationFrame(animationFrame);
+      if (previousHeight) frame.style.setProperty("height", previousHeight, previousPriority);
+      else frame.style.removeProperty("height");
+    };
+  }, [document2]);
+  return /* @__PURE__ */ jsx2("div", { ref: contentRef, style: { display: "flow-root", height: "auto", minHeight: 0 }, children });
+}
+
 // src/editor/state/types.ts
 var initialBlocks = [
   {
@@ -158,7 +191,7 @@ var initialEditorState = {
 };
 
 // src/editor/shell/EditorShell.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var deviceLabels = {
   desktop: "Desktop",
   tablet: "Tablet",
@@ -180,12 +213,12 @@ function IconButton({
   disabled = false,
   pressed = false
 }) {
-  return /* @__PURE__ */ jsx2(Tooltip, { content: label, children: /* @__PURE__ */ jsx2(Button, { accessibilityLabel: label, icon, onClick, disabled, pressed, variant: "tertiary" }) });
+  return /* @__PURE__ */ jsx3(Tooltip, { content: label, children: /* @__PURE__ */ jsx3(Button, { accessibilityLabel: label, icon, onClick, disabled, pressed, variant: "tertiary" }) });
 }
 function EditorShell({ initialState, iframe = true }) {
   const [state, setState] = useState({ ...initialEditorState, ...initialState });
   const [undoDepth, setUndoDepth] = useState(0);
-  const nextBlockId = useRef(state.blocks.length);
+  const nextBlockId = useRef2(state.blocks.length);
   const selectedBlock = state.blocks.find((block) => block.id === state.selectedBlockId) ?? null;
   const update = (patch) => setState((current) => ({ ...current, ...patch }));
   const selectBlock = (id) => update({ selectedBlockId: id, saveState: "dirty" });
@@ -224,62 +257,62 @@ function EditorShell({ initialState, iframe = true }) {
     update({ saveState: "saving" });
     window.setTimeout(() => update({ saveState: "saved" }), 350);
   };
-  return /* @__PURE__ */ jsx2(Puck, { config: puckConfig, data: puckData, iframe: { enabled: iframe }, children: /* @__PURE__ */ jsx2(Puck.Layout, { children: /* @__PURE__ */ jsxs2("div", { className: "pb-shell", "data-testid": "editor-shell", "data-preview-mode": state.previewMode, children: [
-    /* @__PURE__ */ jsx2("header", { className: "pb-header", children: /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", gap: "300", wrap: false, children: [
+  return /* @__PURE__ */ jsx3(Puck, { config: puckConfig, data: puckData, iframe: { enabled: iframe }, overrides: { iframe: AdaptiveIframe }, children: /* @__PURE__ */ jsx3(Puck.Layout, { children: /* @__PURE__ */ jsxs2("div", { className: "pb-shell", "data-testid": "editor-shell", "data-preview-mode": state.previewMode, children: [
+    /* @__PURE__ */ jsx3("header", { className: "pb-header", children: /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", gap: "300", wrap: false, children: [
       /* @__PURE__ */ jsxs2(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [
-        /* @__PURE__ */ jsx2(IconButton, { label: "\u8FD4\u56DE\u9875\u9762\u5217\u8868", icon: ArrowLeftIcon }),
+        /* @__PURE__ */ jsx3(IconButton, { label: "\u8FD4\u56DE\u9875\u9762\u5217\u8868", icon: ArrowLeftIcon }),
         /* @__PURE__ */ jsxs2("div", { className: "pb-page-title", children: [
-          /* @__PURE__ */ jsx2(Text, { as: "h1", variant: "headingSm", children: "Tracking page" }),
-          /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "English (US)" })
+          /* @__PURE__ */ jsx3(Text, { as: "h1", variant: "headingSm", children: "Tracking page" }),
+          /* @__PURE__ */ jsx3(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "English (US)" })
         ] }),
-        /* @__PURE__ */ jsx2(Badge, { tone: state.saveState === "failed" || state.saveState === "conflict" ? "critical" : "info", children: saveLabels[state.saveState] })
+        /* @__PURE__ */ jsx3(Badge, { tone: state.saveState === "failed" || state.saveState === "conflict" ? "critical" : "info", children: saveLabels[state.saveState] })
       ] }),
       /* @__PURE__ */ jsxs2(InlineStack, { gap: "150", blockAlign: "center", wrap: false, children: [
-        /* @__PURE__ */ jsx2(IconButton, { label: "\u64A4\u9500", icon: UndoIcon, disabled: undoDepth === 0, onClick: () => setUndoDepth((depth) => Math.max(0, depth - 1)) }),
-        /* @__PURE__ */ jsx2(IconButton, { label: "\u6062\u590D", icon: RedoIcon, disabled: true }),
-        /* @__PURE__ */ jsx2(Button, { onClick: savePresentationState, children: "\u4FDD\u5B58\u8349\u7A3F" }),
-        /* @__PURE__ */ jsx2(Button, { onClick: () => update({ previewMode: "mock-preview" }), icon: ViewIcon, children: "\u9884\u89C8" }),
-        /* @__PURE__ */ jsx2(Button, { variant: "primary", disabled: true, children: "\u53D1\u5E03" })
+        /* @__PURE__ */ jsx3(IconButton, { label: "\u64A4\u9500", icon: UndoIcon, disabled: undoDepth === 0, onClick: () => setUndoDepth((depth) => Math.max(0, depth - 1)) }),
+        /* @__PURE__ */ jsx3(IconButton, { label: "\u6062\u590D", icon: RedoIcon, disabled: true }),
+        /* @__PURE__ */ jsx3(Button, { onClick: savePresentationState, children: "\u4FDD\u5B58\u8349\u7A3F" }),
+        /* @__PURE__ */ jsx3(Button, { onClick: () => update({ previewMode: "mock-preview" }), icon: ViewIcon, children: "\u9884\u89C8" }),
+        /* @__PURE__ */ jsx3(Button, { variant: "primary", disabled: true, children: "\u53D1\u5E03" })
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs2("div", { className: "pb-workspace", children: [
       /* @__PURE__ */ jsxs2("nav", { className: "pb-tool-rail", "aria-label": "\u7F16\u8F91\u5668\u5DE5\u5177", children: [
-        /* @__PURE__ */ jsx2(IconButton, { label: "\u533A\u5757", icon: LayoutSectionIcon, pressed: state.blockView === "blocks", onClick: () => update({ blockView: "blocks", isLeftRailOpen: true }) }),
-        /* @__PURE__ */ jsx2(IconButton, { label: "\u7ED3\u6784", icon: MenuIcon, pressed: state.blockView === "outline", onClick: () => update({ blockView: "outline", isLeftRailOpen: true }) })
+        /* @__PURE__ */ jsx3(IconButton, { label: "\u533A\u5757", icon: LayoutSectionIcon, pressed: state.blockView === "blocks", onClick: () => update({ blockView: "blocks", isLeftRailOpen: true }) }),
+        /* @__PURE__ */ jsx3(IconButton, { label: "\u7ED3\u6784", icon: MenuIcon, pressed: state.blockView === "outline", onClick: () => update({ blockView: "outline", isLeftRailOpen: true }) })
       ] }),
       /* @__PURE__ */ jsxs2("aside", { className: `pb-left-panel ${state.isLeftRailOpen ? "" : "pb-panel--closed"}`, "aria-label": "Block navigation", children: [
         /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", children: [
           /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsx2(Text, { as: "h2", variant: "headingSm", children: state.blockView === "blocks" ? "\u533A\u5757" : "\u7ED3\u6784" }),
-            /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: state.blockView === "blocks" ? "\u9875\u9762\u533A\u5757\u4E0E\u5FEB\u6377\u64CD\u4F5C" : "\u5F53\u524D\u9875\u9762\u5C42\u7EA7" })
+            /* @__PURE__ */ jsx3(Text, { as: "h2", variant: "headingSm", children: state.blockView === "blocks" ? "\u533A\u5757" : "\u7ED3\u6784" }),
+            /* @__PURE__ */ jsx3(Text, { as: "p", variant: "bodySm", tone: "subdued", children: state.blockView === "blocks" ? "\u9875\u9762\u533A\u5757\u4E0E\u5FEB\u6377\u64CD\u4F5C" : "\u5F53\u524D\u9875\u9762\u5C42\u7EA7" })
           ] }),
-          /* @__PURE__ */ jsx2(IconButton, { label: "\u6536\u8D77\u5DE6\u4FA7\u9762\u677F", icon: XIcon, onClick: () => update({ isLeftRailOpen: false }) })
+          /* @__PURE__ */ jsx3(IconButton, { label: "\u6536\u8D77\u5DE6\u4FA7\u9762\u677F", icon: XIcon, onClick: () => update({ isLeftRailOpen: false }) })
         ] }),
-        /* @__PURE__ */ jsx2(BlockList, { view: state.blockView, blocks: state.blocks, selectedBlockId: state.selectedBlockId, onSelect: selectBlock, onMove: moveBlock, onDuplicate: duplicateBlock, onDelete: deleteBlock }),
-        /* @__PURE__ */ jsx2(Button, { fullWidth: true, icon: PlusIcon, onClick: () => update({ isPickerOpen: true }), children: "\u6DFB\u52A0\u6A21\u5757" })
+        /* @__PURE__ */ jsx3(BlockList, { view: state.blockView, blocks: state.blocks, selectedBlockId: state.selectedBlockId, onSelect: selectBlock, onMove: moveBlock, onDuplicate: duplicateBlock, onDelete: deleteBlock }),
+        /* @__PURE__ */ jsx3(Button, { fullWidth: true, icon: PlusIcon, onClick: () => update({ isPickerOpen: true }), children: "\u6DFB\u52A0\u6A21\u5757" })
       ] }),
       /* @__PURE__ */ jsxs2("main", { className: "pb-canvas-area", children: [
-        /* @__PURE__ */ jsx2(CanvasToolbar, { device: state.device, zoom: state.zoom, onDevice: (device) => update({ device }), onZoom: (zoom) => update({ zoom }) }),
-        /* @__PURE__ */ jsx2("div", { className: "pb-canvas-stage", children: /* @__PURE__ */ jsx2("div", { className: `pb-canvas-frame pb-canvas-frame--${state.device} pb-canvas-frame--zoom-${state.zoom}`, "data-device": state.device, "data-zoom": state.zoom, children: /* @__PURE__ */ jsx2(Puck.Preview, {}) }) }),
+        /* @__PURE__ */ jsx3(CanvasToolbar, { device: state.device, zoom: state.zoom, onDevice: (device) => update({ device }), onZoom: (zoom) => update({ zoom }) }),
+        /* @__PURE__ */ jsx3("div", { className: "pb-canvas-stage", children: /* @__PURE__ */ jsx3("div", { className: `pb-canvas-frame pb-canvas-frame--${state.device} pb-canvas-frame--zoom-${state.zoom}`, "data-device": state.device, "data-zoom": state.zoom, children: /* @__PURE__ */ jsx3(Puck.Preview, {}) }) }),
         !state.isLeftRailOpen || !state.isRightPanelOpen ? /* @__PURE__ */ jsxs2("div", { className: "pb-collapsed-actions", children: [
-          !state.isLeftRailOpen ? /* @__PURE__ */ jsx2(Button, { onClick: () => update({ isLeftRailOpen: true }), children: "\u6253\u5F00\u533A\u5757\u9762\u677F" }) : null,
-          !state.isRightPanelOpen ? /* @__PURE__ */ jsx2(Button, { onClick: () => update({ isRightPanelOpen: true }), children: "\u6253\u5F00\u5C5E\u6027\u9762\u677F" }) : null
+          !state.isLeftRailOpen ? /* @__PURE__ */ jsx3(Button, { onClick: () => update({ isLeftRailOpen: true }), children: "\u6253\u5F00\u533A\u5757\u9762\u677F" }) : null,
+          !state.isRightPanelOpen ? /* @__PURE__ */ jsx3(Button, { onClick: () => update({ isRightPanelOpen: true }), children: "\u6253\u5F00\u5C5E\u6027\u9762\u677F" }) : null
         ] }) : null
       ] }),
       /* @__PURE__ */ jsxs2("aside", { className: `pb-right-panel ${state.isRightPanelOpen ? "" : "pb-panel--closed"}`, "aria-label": "Block properties", children: [
         /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", children: [
           /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsx2(Text, { as: "h2", variant: "headingSm", children: "\u5C5E\u6027" }),
-            /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: selectedBlock?.label ?? "\u672A\u9009\u62E9\u533A\u5757" })
+            /* @__PURE__ */ jsx3(Text, { as: "h2", variant: "headingSm", children: "\u5C5E\u6027" }),
+            /* @__PURE__ */ jsx3(Text, { as: "p", variant: "bodySm", tone: "subdued", children: selectedBlock?.label ?? "\u672A\u9009\u62E9\u533A\u5757" })
           ] }),
-          /* @__PURE__ */ jsx2(IconButton, { label: "\u6536\u8D77\u5C5E\u6027\u9762\u677F", icon: XIcon, onClick: () => update({ isRightPanelOpen: false }) })
+          /* @__PURE__ */ jsx3(IconButton, { label: "\u6536\u8D77\u5C5E\u6027\u9762\u677F", icon: XIcon, onClick: () => update({ isRightPanelOpen: false }) })
         ] }),
-        selectedBlock ? /* @__PURE__ */ jsx2(PropertyPanel, { block: selectedBlock, editorLocale: state.editorLocale, pageLocale: state.pageLocale, onEditorLocale: (editorLocale) => update({ editorLocale }), onPageLocale: (pageLocale) => update({ pageLocale }) }) : /* @__PURE__ */ jsx2(Text, { as: "p", tone: "subdued", children: "\u9009\u62E9\u4E00\u4E2A\u533A\u5757\u4EE5\u67E5\u770B\u5C5E\u6027\u3002" })
+        selectedBlock ? /* @__PURE__ */ jsx3(PropertyPanel, { block: selectedBlock, editorLocale: state.editorLocale, pageLocale: state.pageLocale, onEditorLocale: (editorLocale) => update({ editorLocale }), onPageLocale: (pageLocale) => update({ pageLocale }) }) : /* @__PURE__ */ jsx3(Text, { as: "p", tone: "subdued", children: "\u9009\u62E9\u4E00\u4E2A\u533A\u5757\u4EE5\u67E5\u770B\u5C5E\u6027\u3002" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx2(Modal, { instant: true, open: state.isPickerOpen, onClose: () => update({ isPickerOpen: false }), title: "\u6DFB\u52A0\u6A21\u5757", primaryAction: { content: "\u5173\u95ED", onAction: () => update({ isPickerOpen: false }) }, children: /* @__PURE__ */ jsx2(Modal.Section, { children: /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", children: [
-      /* @__PURE__ */ jsx2(Text, { as: "p", tone: "subdued", children: "\u672C\u7248\u4EC5\u64CD\u4F5C\u672C\u5730\u6F14\u793A\u533A\u5757\uFF0C\u4E0D\u4F1A\u5199\u5165\u9875\u9762\u6570\u636E\u6216\u8C03\u7528\u4E1A\u52A1\u63A5\u53E3\u3002" }),
-      /* @__PURE__ */ jsx2(InlineStack, { gap: "200", wrap: true, children: ["Hero", "TrackingForm", "Text"].map((type) => /* @__PURE__ */ jsx2(Button, { onClick: () => addBlock(type), children: type }, type)) })
+    /* @__PURE__ */ jsx3(Modal, { instant: true, open: state.isPickerOpen, onClose: () => update({ isPickerOpen: false }), title: "\u6DFB\u52A0\u6A21\u5757", primaryAction: { content: "\u5173\u95ED", onAction: () => update({ isPickerOpen: false }) }, children: /* @__PURE__ */ jsx3(Modal.Section, { children: /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", children: [
+      /* @__PURE__ */ jsx3(Text, { as: "p", tone: "subdued", children: "\u672C\u7248\u4EC5\u64CD\u4F5C\u672C\u5730\u6F14\u793A\u533A\u5757\uFF0C\u4E0D\u4F1A\u5199\u5165\u9875\u9762\u6570\u636E\u6216\u8C03\u7528\u4E1A\u52A1\u63A5\u53E3\u3002" }),
+      /* @__PURE__ */ jsx3(InlineStack, { gap: "200", wrap: true, children: ["Hero", "TrackingForm", "Text"].map((type) => /* @__PURE__ */ jsx3(Button, { onClick: () => addBlock(type), children: type }, type)) })
     ] }) }) })
   ] }) }) });
 }
@@ -292,24 +325,24 @@ function BlockList({
   onDuplicate,
   onDelete
 }) {
-  return /* @__PURE__ */ jsx2("div", { className: `pb-block-list pb-block-list--${view}`, "data-testid": `${view}-view`, children: blocks.map((block, index) => /* @__PURE__ */ jsxs2("article", { className: `pb-block-row ${block.id === selectedBlockId ? "pb-block-row--selected" : ""}`, children: [
-    /* @__PURE__ */ jsx2("span", { className: "pb-block-handle", "aria-label": `${block.label} \u62D6\u52A8\u6392\u5E8F`, children: /* @__PURE__ */ jsx2(DragHandleIcon, {}) }),
+  return /* @__PURE__ */ jsx3("div", { className: `pb-block-list pb-block-list--${view}`, "data-testid": `${view}-view`, children: blocks.map((block, index) => /* @__PURE__ */ jsxs2("article", { className: `pb-block-row ${block.id === selectedBlockId ? "pb-block-row--selected" : ""}`, children: [
+    /* @__PURE__ */ jsx3("span", { className: "pb-block-handle", "aria-label": `${block.label} \u62D6\u52A8\u6392\u5E8F`, children: /* @__PURE__ */ jsx3(DragHandleIcon, {}) }),
     /* @__PURE__ */ jsxs2("button", { type: "button", className: "pb-block-select", onClick: () => onSelect(block.id), "aria-pressed": block.id === selectedBlockId, children: [
-      /* @__PURE__ */ jsx2(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: block.label }),
-      view === "blocks" ? /* @__PURE__ */ jsx2(Text, { as: "span", variant: "bodySm", tone: "subdued", children: block.description }) : /* @__PURE__ */ jsx2(Text, { as: "span", variant: "bodySm", tone: "subdued", children: block.type })
+      /* @__PURE__ */ jsx3(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: block.label }),
+      view === "blocks" ? /* @__PURE__ */ jsx3(Text, { as: "span", variant: "bodySm", tone: "subdued", children: block.description }) : /* @__PURE__ */ jsx3(Text, { as: "span", variant: "bodySm", tone: "subdued", children: block.type })
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "pb-block-actions", "aria-label": `${block.label} \u64CD\u4F5C`, children: [
-      /* @__PURE__ */ jsx2(Button, { size: "slim", onClick: () => onMove(block.id, -1), disabled: index === 0, children: "\u4E0A\u79FB" }),
-      /* @__PURE__ */ jsx2(Button, { size: "slim", onClick: () => onMove(block.id, 1), disabled: index === blocks.length - 1, children: "\u4E0B\u79FB" }),
-      /* @__PURE__ */ jsx2(IconButton, { label: `\u590D\u5236 ${block.label}`, icon: DuplicateIcon, onClick: () => onDuplicate(block) }),
-      /* @__PURE__ */ jsx2(IconButton, { label: `\u5220\u9664 ${block.label}`, icon: DeleteIcon, onClick: () => onDelete(block) })
+      /* @__PURE__ */ jsx3(Button, { size: "slim", onClick: () => onMove(block.id, -1), disabled: index === 0, children: "\u4E0A\u79FB" }),
+      /* @__PURE__ */ jsx3(Button, { size: "slim", onClick: () => onMove(block.id, 1), disabled: index === blocks.length - 1, children: "\u4E0B\u79FB" }),
+      /* @__PURE__ */ jsx3(IconButton, { label: `\u590D\u5236 ${block.label}`, icon: DuplicateIcon, onClick: () => onDuplicate(block) }),
+      /* @__PURE__ */ jsx3(IconButton, { label: `\u5220\u9664 ${block.label}`, icon: DeleteIcon, onClick: () => onDelete(block) })
     ] })
   ] }, block.id)) });
 }
 function CanvasToolbar({ device, zoom, onDevice, onZoom }) {
-  return /* @__PURE__ */ jsx2("div", { className: "pb-canvas-toolbar", children: /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", wrap: true, children: [
-    /* @__PURE__ */ jsx2(ButtonGroup, { variant: "segmented", children: Object.keys(deviceLabels).map((item) => /* @__PURE__ */ jsx2(Button, { pressed: device === item, onClick: () => onDevice(item), children: deviceLabels[item] }, item)) }),
-    /* @__PURE__ */ jsx2(Select, { label: "\u7F29\u653E", labelHidden: true, value: zoom, options: [{ label: "Auto", value: "auto" }, { label: "50%", value: "50" }, { label: "70%", value: "70" }, { label: "100%", value: "100" }], onChange: (value) => onZoom(value) })
+  return /* @__PURE__ */ jsx3("div", { className: "pb-canvas-toolbar", children: /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", wrap: true, children: [
+    /* @__PURE__ */ jsx3(ButtonGroup, { variant: "segmented", children: Object.keys(deviceLabels).map((item) => /* @__PURE__ */ jsx3(Button, { pressed: device === item, onClick: () => onDevice(item), children: deviceLabels[item] }, item)) }),
+    /* @__PURE__ */ jsx3(Select, { label: "\u7F29\u653E", labelHidden: true, value: zoom, options: [{ label: "Auto", value: "auto" }, { label: "50%", value: "50" }, { label: "70%", value: "70" }, { label: "100%", value: "100" }], onChange: (value) => onZoom(value) })
   ] }) });
 }
 function PropertyPanel({
@@ -322,23 +355,23 @@ function PropertyPanel({
   const [tab, setTab] = useState(0);
   const tabs = ["\u5185\u5BB9", "\u6837\u5F0F", "\u9AD8\u7EA7"];
   return /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", "data-testid": "property-panel", children: [
-    /* @__PURE__ */ jsx2("div", { className: "pb-inspector-tabs", role: "tablist", "aria-label": "\u5C5E\u6027\u5206\u7C7B", children: tabs.map((label, index) => /* @__PURE__ */ jsx2("button", { type: "button", role: "tab", "aria-selected": tab === index, className: tab === index ? "pb-inspector-tab--selected" : "", onClick: () => setTab(index), children: label }, label)) }),
+    /* @__PURE__ */ jsx3("div", { className: "pb-inspector-tabs", role: "tablist", "aria-label": "\u5C5E\u6027\u5206\u7C7B", children: tabs.map((label, index) => /* @__PURE__ */ jsx3("button", { type: "button", role: "tab", "aria-selected": tab === index, className: tab === index ? "pb-inspector-tab--selected" : "", onClick: () => setTab(index), children: label }, label)) }),
     tab === 0 ? /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", children: [
-      /* @__PURE__ */ jsx2(Badge, { children: block.type }),
-      /* @__PURE__ */ jsx2(Text, { as: "p", variant: "headingSm", children: block.label }),
-      /* @__PURE__ */ jsx2(Divider, {}),
+      /* @__PURE__ */ jsx3(Badge, { children: block.type }),
+      /* @__PURE__ */ jsx3(Text, { as: "p", variant: "headingSm", children: block.label }),
+      /* @__PURE__ */ jsx3(Divider, {}),
       /* @__PURE__ */ jsxs2(Text, { as: "p", tone: "subdued", children: [
         "\u5F53\u524D\u9009\u4E2D\uFF1A",
         block.id
       ] }),
-      /* @__PURE__ */ jsx2(Text, { as: "p", children: block.description }),
-      /* @__PURE__ */ jsx2(Box, { padding: "300", background: "bg-surface-secondary", borderRadius: "200", children: /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u5B57\u6BB5\u7F16\u8F91\u5C06\u5728 PageDocument \u7248\u672C\u5B9E\u73B0\uFF1BV0.1.1 \u4EC5\u63D0\u4F9B\u771F\u5B9E\u9875\u9762\u9884\u89C8\u548C\u9009\u62E9\u53CD\u9988\u3002" }) })
+      /* @__PURE__ */ jsx3(Text, { as: "p", children: block.description }),
+      /* @__PURE__ */ jsx3(Box, { padding: "300", background: "bg-surface-secondary", borderRadius: "200", children: /* @__PURE__ */ jsx3(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u5B57\u6BB5\u7F16\u8F91\u5C06\u5728 PageDocument \u7248\u672C\u5B9E\u73B0\uFF1BV0.1.1 \u4EC5\u63D0\u4F9B\u771F\u5B9E\u9875\u9762\u9884\u89C8\u548C\u9009\u62E9\u53CD\u9988\u3002" }) })
     ] }) : null,
-    tab === 1 ? /* @__PURE__ */ jsx2(BlockStack, { gap: "300", children: /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u6837\u5F0F\u914D\u7F6E\u5C06\u7531 Block Field \u4E0E Theme Token \u63D0\u4F9B\u3002\u672C\u7248\u4FDD\u6301 Storefront \u9875\u9762\u6837\u5F0F\u4E0E\u7F16\u8F91\u5668 UI \u9694\u79BB\u3002" }) }) : null,
+    tab === 1 ? /* @__PURE__ */ jsx3(BlockStack, { gap: "300", children: /* @__PURE__ */ jsx3(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u6837\u5F0F\u914D\u7F6E\u5C06\u7531 Block Field \u4E0E Theme Token \u63D0\u4F9B\u3002\u672C\u7248\u4FDD\u6301 Storefront \u9875\u9762\u6837\u5F0F\u4E0E\u7F16\u8F91\u5668 UI \u9694\u79BB\u3002" }) }) : null,
     tab === 2 ? /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", children: [
-      /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u8BED\u8A00\u5165\u53E3\u5C5E\u4E8E Inspector\uFF0C\u907F\u514D\u5728\u4E3B\u5DE5\u5177\u680F\u91CD\u590D\u5360\u4F4D\u3002" }),
-      /* @__PURE__ */ jsx2(Select, { label: "Editor Language", options: [{ label: "\u4E2D\u6587", value: "zh-CN" }, { label: "English", value: "en-US" }], value: editorLocale, onChange: onEditorLocale }),
-      /* @__PURE__ */ jsx2(Select, { label: "Page Locale", options: [{ label: "English (US)", value: "en-US" }, { label: "\u4E2D\u6587", value: "zh-CN" }], value: pageLocale, onChange: onPageLocale })
+      /* @__PURE__ */ jsx3(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u8BED\u8A00\u5165\u53E3\u5C5E\u4E8E Inspector\uFF0C\u907F\u514D\u5728\u4E3B\u5DE5\u5177\u680F\u91CD\u590D\u5360\u4F4D\u3002" }),
+      /* @__PURE__ */ jsx3(Select, { label: "Editor Language", options: [{ label: "\u4E2D\u6587", value: "zh-CN" }, { label: "English", value: "en-US" }], value: editorLocale, onChange: onEditorLocale }),
+      /* @__PURE__ */ jsx3(Select, { label: "Page Locale", options: [{ label: "English (US)", value: "en-US" }, { label: "\u4E2D\u6587", value: "zh-CN" }], value: pageLocale, onChange: onPageLocale })
     ] }) : null
   ] });
 }
@@ -346,15 +379,15 @@ function PropertyPanel({
 // src/editor/shell/PageDocumentEditorShell.tsx
 import { Puck as Puck2, usePuck } from "@puckeditor/core";
 import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, Frame, InlineStack as InlineStack3, Select as Select2, Text as Text3, TextField, Toast } from "@shopify/polaris";
-import { DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, ProductIcon, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2, XIcon as XIcon2 } from "@shopify/polaris-icons";
-import { useCallback as useCallback2, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "react";
+import { DeleteIcon as DeleteIcon2, DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, ProductIcon, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2, XIcon as XIcon2 } from "@shopify/polaris-icons";
+import { useCallback as useCallback2, useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef6, useState as useState4 } from "react";
 
 // src/adapters/puck/use-canvas-editing.ts
 import { registerOverlayPortal } from "@puckeditor/core";
-import { useEffect, useRef as useRef2 } from "react";
+import { useEffect, useRef as useRef3 } from "react";
 var editingControlSelector = "input, textarea, select, button, a[href], [contenteditable]:not([contenteditable=false]), [role=textbox]";
 function useCanvasEditing(active) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   useEffect(() => {
     const root = ref.current;
     if (!active || !root) return;
@@ -374,10 +407,10 @@ function useCanvasEditing(active) {
 }
 
 // src/adapters/puck/canvas-extension-block.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function CanvasExtensionBlock({ active, blockId, children, label, onSelect }) {
   const editorRef = useCanvasEditing(active);
-  return /* @__PURE__ */ jsx3("div", { ref: editorRef, className: "pb-document-canvas__extension", "data-page-document-block-id": blockId, "aria-label": "Select " + label + " in canvas", role: "group", tabIndex: 0, onClick: onSelect, onKeyDown: (event) => {
+  return /* @__PURE__ */ jsx4("div", { ref: editorRef, className: "pb-document-canvas__extension", "data-page-document-block-id": blockId, "aria-label": "Select " + label + " in canvas", role: "group", tabIndex: 0, onClick: onSelect, onKeyDown: (event) => {
     if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       onSelect();
@@ -386,15 +419,15 @@ function CanvasExtensionBlock({ active, blockId, children, label, onSelect }) {
 }
 
 // src/adapters/puck/canvas-core-blocks.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function CanvasTextBlock({ id, content, editable, onSelect, onPropsChange }) {
   const ref = useCanvasEditing(editable);
-  return /* @__PURE__ */ jsx4("section", { ref, className: "pb-document-canvas__text", "data-page-document-block-id": id, "aria-label": "Select Text in canvas", role: "button", tabIndex: 0, onClick: () => onSelect(id), onKeyDown: (event) => {
+  return /* @__PURE__ */ jsx5("section", { ref, className: "pb-document-canvas__text", "data-page-document-block-id": id, "aria-label": "Select Text in canvas", role: "button", tabIndex: 0, onClick: () => onSelect(id), onKeyDown: (event) => {
     if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       onSelect(id);
     }
-  }, children: /* @__PURE__ */ jsx4("p", { contentEditable: editable, suppressContentEditableWarning: true, onInput: (event) => {
+  }, children: /* @__PURE__ */ jsx5("p", { contentEditable: editable, suppressContentEditableWarning: true, onInput: (event) => {
     if (editable) onPropsChange(id, { content: event.currentTarget.textContent ?? "" }, true);
   }, children: content }) });
 }
@@ -406,13 +439,13 @@ function CanvasImageBlock({ id, src, alt, editable, onSelect, onPropsChange }) {
       onSelect(id);
     }
   }, children: [
-    /* @__PURE__ */ jsx4("img", { src, alt }),
-    editable ? /* @__PURE__ */ jsx4("input", { "aria-label": "\u753B\u5E03\u56FE\u7247 URL", value: src, onChange: (event) => onPropsChange(id, { src: event.currentTarget.value }, true), onClick: (event) => event.stopPropagation() }) : null
+    /* @__PURE__ */ jsx5("img", { src, alt }),
+    editable ? /* @__PURE__ */ jsx5("input", { "aria-label": "\u753B\u5E03\u56FE\u7247 URL", value: src, onChange: (event) => onPropsChange(id, { src: event.currentTarget.value }, true), onClick: (event) => event.stopPropagation() }) : null
   ] });
 }
 
 // src/adapters/puck/page-document-config.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function withBlockPermissions(component, type, resolvePermissions) {
   if (!resolvePermissions) return component;
   return {
@@ -430,11 +463,11 @@ function withBlockPermissions(component, type, resolvePermissions) {
 function canvasFieldFallback({ block, props, registry, onPropsChange }) {
   const fields = Object.entries(block.fields);
   if (!fields.length) return null;
-  return /* @__PURE__ */ jsx5("div", { "aria-label": "Edit " + block.label + " values in canvas", onClick: (event) => event.stopPropagation(), style: { display: "grid", gap: 8, marginTop: 12, padding: 12, border: "1px dashed #94a3b8", borderRadius: 6, background: "#f8fafc" }, children: fields.map(([name, field]) => {
+  return /* @__PURE__ */ jsx6("div", { "aria-label": "Edit " + block.label + " values in canvas", onClick: (event) => event.stopPropagation(), style: { display: "grid", gap: 8, marginTop: 12, padding: 12, border: "1px dashed #94a3b8", borderRadius: 6, background: "#f8fafc" }, children: fields.map(([name, field]) => {
     const Field = registry?.getField(field.field)?.component;
     return Field ? /* @__PURE__ */ jsxs4("label", { style: { display: "grid", gap: 4, fontSize: 12, fontWeight: 600 }, children: [
       field.label ?? name,
-      /* @__PURE__ */ jsx5(Field, { value: props[name], onChange: (value) => onPropsChange({ [name]: value }) })
+      /* @__PURE__ */ jsx6(Field, { value: props[name], onChange: (value) => onPropsChange({ [name]: value }) })
     ] }, name) : null;
   }) });
 }
@@ -447,8 +480,8 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
         const id = typeof props.id === "string" ? props.id : `unknown-${block.type}`;
         const EditorRenderer = block.render.editor;
         const active = id === selectedBlockId;
-        return /* @__PURE__ */ jsx5(CanvasExtensionBlock, { active, blockId: id, label: block.label, onSelect: () => onSelect(id), children: EditorRenderer ? /* @__PURE__ */ jsx5(EditorRenderer, { ...props, blockId: id, selected: active, onPropsChange: (next) => onPropsChange(id, next) }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
-          /* @__PURE__ */ jsx5(BlockRenderer, { ...props }),
+        return /* @__PURE__ */ jsx6(CanvasExtensionBlock, { active, blockId: id, label: block.label, onSelect: () => onSelect(id), children: EditorRenderer ? /* @__PURE__ */ jsx6(EditorRenderer, { ...props, blockId: id, selected: active, onPropsChange: (next) => onPropsChange(id, next) }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6(BlockRenderer, { ...props }),
           active ? canvasFieldFallback({ block, props, registry, onPropsChange: (next) => onPropsChange(id, next) }) : null
         ] }) });
       }
@@ -461,7 +494,7 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
           const id = typeof props.id === "string" ? props.id : "unknown-text";
           const content = typeof props.content === "string" ? props.content : "";
           const editable = id === selectedBlockId;
-          return /* @__PURE__ */ jsx5(CanvasTextBlock, { id, content, editable, onSelect, onPropsChange });
+          return /* @__PURE__ */ jsx6(CanvasTextBlock, { id, content, editable, onSelect, onPropsChange });
         }
       }, "core.text", resolveBlockPermissions),
       Image: withBlockPermissions({
@@ -470,7 +503,7 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
           const src = typeof props.src === "string" ? props.src : "";
           const alt = typeof props.alt === "string" ? props.alt : "";
           const editable = id === selectedBlockId;
-          return /* @__PURE__ */ jsx5(CanvasImageBlock, { id, src, alt, editable, onSelect, onPropsChange });
+          return /* @__PURE__ */ jsx6(CanvasImageBlock, { id, src, alt, editable, onSelect, onPropsChange });
         }
       }, "core.image", resolveBlockPermissions),
       ...extensionComponents
@@ -519,7 +552,7 @@ function fromEngineData(data, base, registry) {
 }
 
 // src/editor/context/EditorContext.tsx
-import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useReducer, useRef as useRef3, useState as useState2 } from "react";
+import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useReducer, useRef as useRef4, useState as useState2 } from "react";
 
 // src/editor/policy.ts
 function operationEnabled(operation, policy, blockPolicy) {
@@ -579,7 +612,7 @@ function canApplyCanvasDocument(previous, next, getDefinition, policy) {
 }
 
 // src/editor/context/EditorContext.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function historyReducer(state, action) {
   if (action.type === "select") return { ...state, selectedBlockId: action.id };
   if (action.type === "device") return { ...state, device: action.device };
@@ -613,7 +646,7 @@ function defaultBlock(type, blocks, registry) {
 }
 function EditorProvider({ initialDocument, registry, policy, loadState = "ready", sessionState = "active", session, sessionMessage, leaveWarning = "You have unsaved changes.", onDocumentChange, children }) {
   const [history, dispatch] = useReducer(historyReducer, initialDocument, (document2) => ({ document: document2, selectedBlockId: document2.blocks[0]?.id ?? null, past: [], future: [], device: "desktop", savedDocument: document2 }));
-  const historyRef = useRef3(history);
+  const historyRef = useRef4(history);
   useEffect2(() => {
     historyRef.current = history;
   }, [history]);
@@ -799,7 +832,7 @@ function EditorProvider({ initialDocument, registry, policy, loadState = "ready"
       markSaved: (document2 = historyRef.current.document) => dispatch({ type: "saved", document: document2 })
     };
   }, [canvasSelectionRequest, confirmCanvasSelection, editable, history, isDirty, loadState, pendingDeleteBlock, pendingDeleteBlockId, policy, registry, replace, requestCanvasSelection, selectedBlock, session, sessionMessage, sessionState, updateBlockPresentation, updateBlockProps, updateFromCanvas]);
-  return /* @__PURE__ */ jsx6(EditorContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx7(EditorContext.Provider, { value, children });
 }
 function useEditorContext() {
   const context = useContext(EditorContext);
@@ -809,16 +842,16 @@ function useEditorContext() {
 
 // src/editor/components/PageStatusCard.tsx
 import { Badge as Badge2, InlineStack as InlineStack2, Text as Text2 } from "@shopify/polaris";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function PageStatusCard({ status, sessionState }) {
   const publicationTone = status.publicationStatus === "published" ? "success" : "attention";
   const sessionLabel = sessionState === "locked" ? `${status.editingBy ?? "\u5176\u4ED6\u4EBA"}\u6B63\u5728\u7F16\u8F91` : sessionState === "lost" ? "\u7F16\u8F91\u9501\u5DF2\u5931\u6548" : status.editingBy ? `${status.editingBy}\u6B63\u5728\u7F16\u8F91` : void 0;
   return /* @__PURE__ */ jsxs5("div", { className: "pb-page-status-card", "data-testid": "page-status-card", "data-publication-status": status.publicationStatus, "data-session-state": sessionState, children: [
     /* @__PURE__ */ jsxs5(InlineStack2, { gap: "150", blockAlign: "center", wrap: true, children: [
-      /* @__PURE__ */ jsx7(Badge2, { tone: publicationTone, children: status.publicationStatus === "published" ? "\u7EBF\u4E0A" : "\u672A\u53D1\u5E03" }),
-      status.draftLabel ? /* @__PURE__ */ jsx7(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: status.draftLabel }) : null,
-      status.publishedVersionLabel ? /* @__PURE__ */ jsx7(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: status.publishedVersionLabel }) : null,
-      sessionLabel ? /* @__PURE__ */ jsx7(Badge2, { tone: sessionState === "lost" ? "critical" : "attention", children: sessionLabel }) : null
+      /* @__PURE__ */ jsx8(Badge2, { tone: publicationTone, children: status.publicationStatus === "published" ? "\u7EBF\u4E0A" : "\u672A\u53D1\u5E03" }),
+      status.draftLabel ? /* @__PURE__ */ jsx8(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: status.draftLabel }) : null,
+      status.publishedVersionLabel ? /* @__PURE__ */ jsx8(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: status.publishedVersionLabel }) : null,
+      sessionLabel ? /* @__PURE__ */ jsx8(Badge2, { tone: sessionState === "lost" ? "critical" : "attention", children: sessionLabel }) : null
     ] }),
     status.lastSavedAt ? /* @__PURE__ */ jsxs5(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: [
       "\u6700\u540E\u4FDD\u5B58\uFF1A",
@@ -966,7 +999,7 @@ function createAdminI18n(locale) {
 }
 
 // src/editor/shell/CanvasLibraryDropTarget.tsx
-import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef5, useState as useState3 } from "react";
 
 // src/editor/shell/drop-position.ts
 function nearestBlockIdAtY(blocks, y) {
@@ -997,7 +1030,7 @@ function beforeIdAfterPlacement(blockIds, targetId, placement) {
 }
 
 // src/editor/shell/CanvasLibraryDropTarget.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function uniqueBlocks(blocks) {
   const seen = /* @__PURE__ */ new Set();
   return blocks.filter((block) => !seen.has(block.id) && seen.add(block.id));
@@ -1031,14 +1064,14 @@ function scrollElement(element, delta) {
   return true;
 }
 function CanvasLibraryDropTarget({ frameRef, blocks, label, onDrop, onCancel, adminLocale }) {
-  const targetRef = useRef4(null);
-  const latestPreview = useRef4(null);
-  const dragging = useRef4(false);
-  const completed = useRef4(false);
-  const pointerY = useRef4(0);
-  const animationFrame = useRef4(null);
-  const lastFrameTime = useRef4(null);
-  const callbacks = useRef4({ onDrop, onCancel });
+  const targetRef = useRef5(null);
+  const latestPreview = useRef5(null);
+  const dragging = useRef5(false);
+  const completed = useRef5(false);
+  const pointerY = useRef5(0);
+  const animationFrame = useRef5(null);
+  const lastFrameTime = useRef5(null);
+  const callbacks = useRef5({ onDrop, onCancel });
   useEffect3(() => {
     callbacks.current = { onDrop, onCancel };
   }, [onDrop, onCancel]);
@@ -1162,13 +1195,13 @@ function CanvasLibraryDropTarget({ frameRef, blocks, label, onDrop, onCancel, ad
   const style = { position: "absolute", inset: 0, zIndex: 2 };
   const markerLabel = english ? `Position ${position}` : `\u7B2C ${position} \u4E2A\u4F4D\u7F6E`;
   return /* @__PURE__ */ jsxs6("div", { ref: targetRef, className: "pb-canvas-drop-target", "data-testid": "canvas-drop-target", role: "region", "aria-label": english ? "Block drop area" : "\u533A\u5757\u6295\u653E\u533A", style, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [
-    /* @__PURE__ */ jsx8("span", { className: "pb-canvas-drop-target__hint", "aria-live": "polite", children: hint }),
-    preview ? /* @__PURE__ */ jsx8("span", { className: "pb-canvas-drop-marker", "aria-hidden": "true", style: { top: preview.markerTop, left: preview.markerLeft, width: preview.markerWidth }, children: /* @__PURE__ */ jsx8("span", { className: "pb-canvas-drop-marker__label", children: markerLabel }) }) : null
+    /* @__PURE__ */ jsx9("span", { className: "pb-canvas-drop-target__hint", "aria-live": "polite", children: hint }),
+    preview ? /* @__PURE__ */ jsx9("span", { className: "pb-canvas-drop-marker", "aria-hidden": "true", style: { top: preview.markerTop, left: preview.markerLeft, width: preview.markerWidth }, children: /* @__PURE__ */ jsx9("span", { className: "pb-canvas-drop-marker__label", children: markerLabel }) }) : null
   ] });
 }
 
 // src/editor/shell/PageDocumentEditorShell.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function scrollCanvasBlockIntoView(blockId, frame) {
   const selector = `[data-page-document-block-id="${CSS.escape(blockId)}"]`;
   const scroll = () => {
@@ -1191,6 +1224,13 @@ function blockTypeLabel(type, registry) {
 function validateDocumentBlocks(document2, registry) {
   return registry ? validatePageDocumentWithRegistry(document2, registry) : [];
 }
+function canvasZoomValue(zoom, autoZoom) {
+  return zoom === "auto" ? autoZoom : Number(zoom) / 100;
+}
+function CanvasNativeZoom({ zoom, frameRef, className, dataDevice, canvasThemeStyle, children }) {
+  const scale = canvasZoomValue(zoom, 1);
+  return /* @__PURE__ */ jsx10("div", { ref: frameRef, className, "data-device": dataDevice, "data-zoom": zoom, "data-puck-zoom": scale, style: { ...canvasThemeStyle, transform: `scale(${scale})`, transformOrigin: "top center" }, children });
+}
 function useEditorSession(adapter, pageId) {
   const [managed, setManaged] = useState4(() => adapter ? { state: "acquiring" } : { state: "active" });
   useEffect4(() => {
@@ -1238,12 +1278,12 @@ function PageDocumentEditorShell(props) {
   useEffect4(() => {
     onSessionStateChange?.(managedSession.state);
   }, [managedSession.state, onSessionStateChange]);
-  return /* @__PURE__ */ jsx9(EditorProvider, { initialDocument: props.initialDocument, registry: props.registry, policy: props.policy, loadState: props.loadState, sessionState: managedSession.state, session: managedSession.session, sessionMessage: managedSession.message, leaveWarning: createAdminI18n(props.adminLocale).t("leaveWarning"), onDocumentChange: props.onDocumentChange, children: /* @__PURE__ */ jsx9(PageDocumentEditor, { ...props }) });
+  return /* @__PURE__ */ jsx10(EditorProvider, { initialDocument: props.initialDocument, registry: props.registry, policy: props.policy, loadState: props.loadState, sessionState: managedSession.state, session: managedSession.session, sessionMessage: managedSession.message, leaveWarning: createAdminI18n(props.adminLocale).t("leaveWarning"), onDocumentChange: props.onDocumentChange, children: /* @__PURE__ */ jsx10(PageDocumentEditor, { ...props }) });
 }
-function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onPublish, draftPersistence, draftRevision: initialDraftRevision, autoSave = true, autoSaveDelayMs = 800, publishAction, assetPicker, inspectorSettings, productPicker, pageStatus, onBack, onHistory, onPreview, onAddToStore, deleteConfirmation, availableBlockTypes, appearanceControls = false }) {
+function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPublish, draftPersistence, draftRevision: initialDraftRevision, autoSave = true, autoSaveDelayMs = 800, publishAction, assetPicker, inspectorSettings, productPicker, pageStatus, onBack, onHistory, onPreview, onAddToStore, deleteConfirmation, availableBlockTypes, appearanceControls = false }) {
   const editor = useEditorContext();
-  const editorRef = useRef5(editor);
-  useLayoutEffect(() => {
+  const editorRef = useRef6(editor);
+  useLayoutEffect2(() => {
     editorRef.current = editor;
   }, [editor]);
   const [blockView, setBlockView] = useState4("blocks");
@@ -1251,9 +1291,9 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
   const [rightPanelOpen, setRightPanelOpen] = useState4(true);
   const [draggingLibraryType, setDraggingLibraryType] = useState4(null);
   const [draggingBlockId, setDraggingBlockId] = useState4(null);
-  const draggingBlockIdRef = useRef5(null);
+  const draggingBlockIdRef = useRef6(null);
   const [dropTarget, setDropTarget] = useState4(null);
-  const canvasFrameRef = useRef5(null);
+  const canvasFrameRef = useRef6(null);
   const [canvasMutationVersion, setCanvasMutationVersion] = useState4(0);
   const [canvasResetVersion, setCanvasResetVersion] = useState4(0);
   const [request, setRequest] = useState4("idle");
@@ -1341,8 +1381,8 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
       setRequest("idle");
     }
   };
-  if (editor.loadState !== "ready" && editor.loadState !== "success") return /* @__PURE__ */ jsx9(EditorStatus, { state: editor.loadState });
-  if (editor.sessionState !== "active") return /* @__PURE__ */ jsx9(EditorSessionStatus, { state: editor.sessionState, message: editor.sessionMessage });
+  if (editor.loadState !== "ready" && editor.loadState !== "success") return /* @__PURE__ */ jsx10(EditorStatus, { state: editor.loadState });
+  if (editor.sessionState !== "active") return /* @__PURE__ */ jsx10(EditorSessionStatus, { state: editor.sessionState, message: editor.sessionMessage });
   const allBlockTypes = ["core.text", "core.image", ...registry?.blocks.map((block) => block.type) ?? []];
   const blockTypes = availableBlockTypes ? allBlockTypes.filter((type) => availableBlockTypes.includes(type)) : allBlockTypes;
   const orderedBlockTypes = libraryTypesInDocumentOrder(blockTypes, editor.document.blocks);
@@ -1376,57 +1416,57 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
   };
   const dismissPublishedNotice = () => setNotice((current) => current === "published" ? null : current);
   return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(Puck2, { config, data: engineData, iframe: { enabled: iframe }, dnd: { behavior: "static" }, overrides: { actionBar: CanvasSelectionActionBar }, onChange: (data) => {
+    /* @__PURE__ */ jsx10(Puck2, { config, data: engineData, iframe: { enabled: iframe }, dnd: { behavior: "static" }, overrides: { iframe: AdaptiveIframe, actionBar: CanvasSelectionActionBar }, onChange: (data) => {
       if (!editor.updateFromCanvas(fromEngineData(data, editor.document, registry))) setCanvasResetVersion((version) => version + 1);
     }, children: /* @__PURE__ */ jsxs7(Puck2.Layout, { children: [
-      /* @__PURE__ */ jsx9(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion, canvasResetVersion, permissionsVersion: `${editor.isEditable}:${editor.document.blocks.map((block) => `${block.id}:${block.type}`).join("|")}` }),
+      /* @__PURE__ */ jsx10(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion, canvasResetVersion, permissionsVersion: `${editor.isEditable}:${editor.document.blocks.map((block) => `${block.id}:${block.type}`).join("|")}` }),
       /* @__PURE__ */ jsxs7("div", { className: "pb-shell pb-shell--v04", "data-testid": "page-document-editor", "data-page-id": editor.document.pageId, "data-dirty": editor.isDirty, "data-editor-state": editor.loadState, "data-editor-session-state": editor.sessionState, "data-save-state": resolvedSaveState, "data-left-panel": leftRailOpen ? "open" : "closed", "data-right-panel": rightPanelOpen ? "open" : "closed", children: [
-        /* @__PURE__ */ jsx9("header", { className: "pb-header", children: /* @__PURE__ */ jsxs7("div", { className: "pb-header-content", children: [
+        /* @__PURE__ */ jsx10("header", { className: "pb-header", children: /* @__PURE__ */ jsxs7("div", { className: "pb-header-content", children: [
           /* @__PURE__ */ jsxs7("div", { className: "pb-header-title-group", children: [
-            onBack ? /* @__PURE__ */ jsx9(Button2, { variant: "tertiary", onClick: requestBack, children: i18n.t("back") }) : null,
+            onBack ? /* @__PURE__ */ jsx10(Button2, { variant: "tertiary", onClick: requestBack, children: i18n.t("back") }) : null,
             /* @__PURE__ */ jsxs7("div", { className: "pb-page-title", children: [
-              /* @__PURE__ */ jsx9(Text3, { as: "h1", variant: "headingSm", children: editor.document.settings.seoTitle ?? editor.document.pageId }),
-              pageStatus ? /* @__PURE__ */ jsx9(PageStatusCard, { status: pageStatus, sessionState: editor.sessionState }) : null
+              /* @__PURE__ */ jsx10(Text3, { as: "h1", variant: "headingSm", children: editor.document.settings.seoTitle ?? editor.document.pageId }),
+              pageStatus ? /* @__PURE__ */ jsx10(PageStatusCard, { status: pageStatus, sessionState: editor.sessionState }) : null
             ] })
           ] }),
-          /* @__PURE__ */ jsx9("div", { className: "pb-header-controls", children: /* @__PURE__ */ jsxs7("div", { className: "pb-header-device-toolbar", children: [
-            /* @__PURE__ */ jsx9(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx9(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }),
-            /* @__PURE__ */ jsx9("div", { className: "pb-zoom-control", children: /* @__PURE__ */ jsx9(Select2, { label: i18n.t("zoom"), labelHidden: true, options: [{ label: i18n.t("zoomAuto"), value: "auto" }, { label: "50%", value: "50" }, { label: "70%", value: "70" }, { label: "100%", value: "100" }], value: zoom, onChange: (value) => setZoom(value) }) })
+          /* @__PURE__ */ jsx10("div", { className: "pb-header-controls", children: /* @__PURE__ */ jsxs7("div", { className: "pb-header-device-toolbar", children: [
+            /* @__PURE__ */ jsx10(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx10(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }),
+            /* @__PURE__ */ jsx10("div", { className: "pb-zoom-control", children: /* @__PURE__ */ jsx10(Select2, { label: i18n.t("zoom"), labelHidden: true, options: [{ label: i18n.t("zoomAuto"), value: "auto" }, { label: "50%", value: "50" }, { label: "70%", value: "70" }, { label: "100%", value: "100" }], value: zoom, onChange: (value) => setZoom(value) }) })
           ] }) }),
-          /* @__PURE__ */ jsx9("div", { className: "pb-header-actions", children: /* @__PURE__ */ jsxs7(InlineStack3, { gap: "150", blockAlign: "center", wrap: true, children: [
-            /* @__PURE__ */ jsx9(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
-            /* @__PURE__ */ jsx9(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo }),
-            resolvedSaveState === "saved" ? null : /* @__PURE__ */ jsx9(Badge3, { tone: saveBadgeTone, children: saveBadgeLabel }),
-            onHistory ? /* @__PURE__ */ jsx9("span", { "data-editor-history": "", children: /* @__PURE__ */ jsx9(Button2, { disabled: request !== "idle", onClick: () => onHistory({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("history") }) }) : null,
-            onPreview ? /* @__PURE__ */ jsx9(Button2, { disabled: request !== "idle" || !isOnline, onClick: () => void onPreview({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("preview") }) : null,
-            onAddToStore ? /* @__PURE__ */ jsx9(Button2, { disabled: request !== "idle" || pageStatus?.publicationStatus === "unpublished", onClick: () => void onAddToStore({ document: editor.document, session: editor.session }), children: i18n.t("addToStore") }) : null,
-            /* @__PURE__ */ jsx9(Button2, { variant: "primary", disabled: !publishAction && !onPublish || request !== "idle" || validationIssues.length > 0 || !isOnline, onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") })
+          /* @__PURE__ */ jsx10("div", { className: "pb-header-actions", children: /* @__PURE__ */ jsxs7(InlineStack3, { gap: "150", blockAlign: "center", wrap: true, children: [
+            /* @__PURE__ */ jsx10(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
+            /* @__PURE__ */ jsx10(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo }),
+            resolvedSaveState === "saved" ? null : /* @__PURE__ */ jsx10(Badge3, { tone: saveBadgeTone, children: saveBadgeLabel }),
+            onHistory ? /* @__PURE__ */ jsx10("span", { "data-editor-history": "", children: /* @__PURE__ */ jsx10(Button2, { disabled: request !== "idle", onClick: () => onHistory({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("history") }) }) : null,
+            onPreview ? /* @__PURE__ */ jsx10(Button2, { disabled: request !== "idle" || !isOnline, onClick: () => void onPreview({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("preview") }) : null,
+            onAddToStore ? /* @__PURE__ */ jsx10(Button2, { disabled: request !== "idle" || pageStatus?.publicationStatus === "unpublished", onClick: () => void onAddToStore({ document: editor.document, session: editor.session }), children: i18n.t("addToStore") }) : null,
+            /* @__PURE__ */ jsx10(Button2, { variant: "primary", disabled: !publishAction && !onPublish || request !== "idle" || validationIssues.length > 0 || !isOnline, onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") })
           ] }) })
         ] }) }),
-        editor.loadState === "success" ? /* @__PURE__ */ jsx9(Banner, { tone: "success", children: i18n.t("success") }) : null,
-        notice && notice !== "published" ? /* @__PURE__ */ jsx9("div", { className: `pb-editor-notice pb-editor-notice--${notice}`, "data-testid": "editor-notice", "data-notice": notice, children: /* @__PURE__ */ jsx9(Banner, { tone: "critical", children: i18n.t(notice) }) }) : null,
-        validationIssues.length > 0 ? /* @__PURE__ */ jsx9(Banner, { tone: "critical", title: "\u533A\u5757\u5C5E\u6027\u672A\u901A\u8FC7\u6821\u9A8C", children: /* @__PURE__ */ jsx9("ul", { children: validationIssues.map((issue) => /* @__PURE__ */ jsxs7("li", { children: [
+        editor.loadState === "success" ? /* @__PURE__ */ jsx10(Banner, { tone: "success", children: i18n.t("success") }) : null,
+        notice && notice !== "published" ? /* @__PURE__ */ jsx10("div", { className: `pb-editor-notice pb-editor-notice--${notice}`, "data-testid": "editor-notice", "data-notice": notice, children: /* @__PURE__ */ jsx10(Banner, { tone: "critical", children: i18n.t(notice) }) }) : null,
+        validationIssues.length > 0 ? /* @__PURE__ */ jsx10(Banner, { tone: "critical", title: "\u533A\u5757\u5C5E\u6027\u672A\u901A\u8FC7\u6821\u9A8C", children: /* @__PURE__ */ jsx10("ul", { children: validationIssues.map((issue) => /* @__PURE__ */ jsxs7("li", { children: [
           issue.path,
           ": ",
           issue.message
         ] }, `${issue.path}-${issue.message}`)) }) }) : null,
         /* @__PURE__ */ jsxs7("div", { className: `pb-workspace pb-workspace--document${leftRailOpen ? "" : " pb-workspace--left-closed"}${rightPanelOpen ? "" : " pb-workspace--right-closed"}`, "data-left-panel": leftRailOpen ? "open" : "closed", "data-right-panel": rightPanelOpen ? "open" : "closed", children: [
           /* @__PURE__ */ jsxs7("nav", { className: "pb-tool-rail", "aria-label": "\u7F16\u8F91\u5668\u5DE5\u5177", children: [
-            /* @__PURE__ */ jsx9(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks" && leftRailOpen, variant: "tertiary", onClick: () => {
+            /* @__PURE__ */ jsx10(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks" && leftRailOpen, variant: "tertiary", onClick: () => {
               setBlockView("blocks");
               setLeftRailOpen(true);
             } }),
-            /* @__PURE__ */ jsx9(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline" && leftRailOpen, variant: "tertiary", onClick: () => {
+            /* @__PURE__ */ jsx10(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline" && leftRailOpen, variant: "tertiary", onClick: () => {
               setBlockView("outline");
               setLeftRailOpen(true);
             } })
           ] }),
           /* @__PURE__ */ jsxs7("aside", { className: `pb-left-panel${leftRailOpen ? "" : " pb-panel--closed"}`, "aria-label": "PageDocument \u533A\u5757", children: [
-            /* @__PURE__ */ jsxs7(InlineStack3, { align: "space-between", blockAlign: "center", children: [
-              /* @__PURE__ */ jsx9(Text3, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }),
-              /* @__PURE__ */ jsx9(Button2, { accessibilityLabel: i18n.t("collapseLeft"), icon: XIcon2, variant: "tertiary", onClick: () => setLeftRailOpen(false) })
-            ] }),
-            blockView === "blocks" ? /* @__PURE__ */ jsx9("div", { className: "pb-block-list", "data-testid": "blocks-view", "aria-label": "\u533A\u5757\u7C7B\u578B\u5E93", role: "list", onDrop: cancelLibraryDrop, children: orderedBlockTypes.map((type) => {
+            /* @__PURE__ */ jsx10("div", { className: "pb-panel-header", children: /* @__PURE__ */ jsxs7(InlineStack3, { align: "space-between", blockAlign: "center", wrap: false, children: [
+              /* @__PURE__ */ jsx10(Text3, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }),
+              /* @__PURE__ */ jsx10(Button2, { accessibilityLabel: i18n.t("collapseLeft"), icon: XIcon2, variant: "tertiary", onClick: () => setLeftRailOpen(false) })
+            ] }) }),
+            blockView === "blocks" ? /* @__PURE__ */ jsx10("div", { className: "pb-block-list", "data-testid": "blocks-view", "aria-label": "\u533A\u5757\u7C7B\u578B\u5E93", role: "list", onDrop: cancelLibraryDrop, children: orderedBlockTypes.map((type) => {
               const instance = editor.document.blocks.find((item) => item.type === type);
               const canAdd = editor.canAddBlock(type);
               const canReorder = Boolean(instance && editor.canDragBlock(instance.id));
@@ -1434,11 +1474,17 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
               const selected = editor.selectedBlock?.type === type;
               const dropEdge = draggingBlockId && instance && dropTarget?.id === instance.id ? dropTarget.edge : void 0;
               const actionHint = canReorder && canAdd ? "\uFF0C\u62D6\u62FD\u6392\u5E8F\uFF0C\u6216\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0" : canReorder ? "\uFF0C\u62D6\u62FD\u6392\u5E8F" : canAdd ? "\uFF0C\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0" : "";
-              return /* @__PURE__ */ jsxs7("div", { className: `pb-document-block-row pb-document-block-row--library${selected ? " pb-document-block-row--selected" : ""}${draggingBlockId === instance?.id ? " pb-document-block-row--dragging" : ""}${dropEdge === "before" ? " pb-document-block-row--drop-before" : ""}${dropEdge === "after" ? " pb-document-block-row--drop-after" : ""}`, "data-block-type": type, "data-selected": selected, "data-drop-edge": dropEdge, role: "listitem", draggable, "aria-disabled": !draggable, "aria-label": `${blockTypeLabel(type, registry)}${actionHint}${selected ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onClick: () => {
+              const canDelete = Boolean(instance && editor.canDeleteBlock(instance.id));
+              const label = blockTypeLabel(type, registry);
+              return /* @__PURE__ */ jsxs7("div", { className: `pb-document-block-row pb-document-block-row--library${selected ? " pb-document-block-row--selected" : ""}${draggingBlockId === instance?.id ? " pb-document-block-row--dragging" : ""}${dropEdge === "before" ? " pb-document-block-row--drop-before" : ""}${dropEdge === "after" ? " pb-document-block-row--drop-after" : ""}`, "data-block-type": type, "data-selected": selected, "data-drop-edge": dropEdge, role: "listitem", draggable, "aria-disabled": !draggable, "aria-label": `${label}${actionHint}${selected ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onClick: () => {
                 if (!instance) return;
                 editor.requestCanvasSelection(instance.id);
                 scrollCanvasBlockIntoView(instance.id, canvasFrameRef.current);
               }, onDragStart: (event) => {
+                if (event.target.closest("button")) {
+                  event.preventDefault();
+                  return;
+                }
                 if (!draggable) {
                   event.preventDefault();
                   return;
@@ -1471,65 +1517,73 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
                 clearLibraryDrag();
               }, onDragEnd: clearLibraryDrag, children: [
                 /* @__PURE__ */ jsxs7("span", { className: "pb-library-block-title", children: [
-                  /* @__PURE__ */ jsx9(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
-                  /* @__PURE__ */ jsx9("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(DragHandleIcon2, {}) })
+                  /* @__PURE__ */ jsx10(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: label }),
+                  /* @__PURE__ */ jsxs7("span", { className: "pb-library-block-controls", children: [
+                    /* @__PURE__ */ jsx10("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx10(DragHandleIcon2, {}) }),
+                    /* @__PURE__ */ jsx10("span", { draggable: false, onClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onDragStart: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                    }, children: /* @__PURE__ */ jsx10(Button2, { icon: DeleteIcon2, variant: "tertiary", tone: canDelete ? "critical" : void 0, disabled: !canDelete, accessibilityLabel: `${i18n.t("remove")} ${label}`, onClick: () => {
+                      if (instance) editor.requestDeleteBlock(instance.id);
+                    } }) })
+                  ] })
                 ] }),
-                /* @__PURE__ */ jsx9(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: type })
+                /* @__PURE__ */ jsx10(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: type })
               ] }, type);
-            }) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx9(Text3, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx9("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs7("button", { type: "button", className: `pb-document-block-row pb-document-block-row--library ${block.id === editor.selectedBlockId ? "pb-document-block-row--selected" : ""}`, "aria-pressed": block.id === editor.selectedBlockId, onClick: () => {
+            }) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx10(Text3, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx10("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs7("button", { type: "button", className: `pb-document-block-row pb-document-block-row--library ${block.id === editor.selectedBlockId ? "pb-document-block-row--selected" : ""}`, "aria-pressed": block.id === editor.selectedBlockId, onClick: () => {
               editor.requestCanvasSelection(block.id);
               scrollCanvasBlockIntoView(block.id, canvasFrameRef.current);
             }, children: [
-              /* @__PURE__ */ jsx9(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockLabel(block, registry) }),
-              /* @__PURE__ */ jsx9(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
+              /* @__PURE__ */ jsx10(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockLabel(block, registry) }),
+              /* @__PURE__ */ jsx10(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
             ] }, block.id)) })
           ] }),
           /* @__PURE__ */ jsxs7("main", { className: "pb-canvas-area", children: [
-            /* @__PURE__ */ jsxs7("div", { className: "pb-canvas-stage", children: [
-              /* @__PURE__ */ jsx9("div", { ref: canvasFrameRef, className: `pb-canvas-frame pb-canvas-frame--${editor.device}${zoom === "auto" ? "" : ` pb-canvas-frame--zoom-${zoom}`}`, "data-device": editor.device, "data-zoom": zoom, style: canvasThemeStyle, children: /* @__PURE__ */ jsx9(Puck2.Preview, {}) }),
-              draggingLibraryType ? /* @__PURE__ */ jsx9(CanvasLibraryDropTarget, { frameRef: canvasFrameRef, blocks: editor.document.blocks.map((block) => ({ id: block.id, label: blockLabel(block, registry) })), label: blockTypeLabel(draggingLibraryType, registry), adminLocale, onDrop: (beforeId) => {
+            /* @__PURE__ */ jsx10("div", { className: "pb-canvas-stage", children: /* @__PURE__ */ jsxs7(CanvasNativeZoom, { frameRef: canvasFrameRef, className: `pb-canvas-frame pb-canvas-frame--${editor.device}${zoom === "auto" ? "" : ` pb-canvas-frame--zoom-${zoom}`}`, dataDevice: editor.device, canvasThemeStyle, zoom, children: [
+              /* @__PURE__ */ jsx10(Puck2.Preview, {}),
+              draggingLibraryType ? /* @__PURE__ */ jsx10(CanvasLibraryDropTarget, { frameRef: canvasFrameRef, blocks: editor.document.blocks.map((block) => ({ id: block.id, label: blockLabel(block, registry) })), label: blockTypeLabel(draggingLibraryType, registry), adminLocale, onDrop: (beforeId) => {
                 addFromLibrary(draggingLibraryType, beforeId);
                 setDraggingLibraryType(null);
               }, onCancel: () => setDraggingLibraryType(null) }) : null
-            ] }),
+            ] }) }),
             !leftRailOpen || !rightPanelOpen ? /* @__PURE__ */ jsxs7("div", { className: "pb-collapsed-actions", children: [
-              !leftRailOpen ? /* @__PURE__ */ jsx9(Button2, { onClick: () => setLeftRailOpen(true), children: i18n.t("expandLeft") }) : null,
-              !rightPanelOpen ? /* @__PURE__ */ jsx9(Button2, { onClick: () => setRightPanelOpen(true), children: i18n.t("expandRight") }) : null
+              !leftRailOpen ? /* @__PURE__ */ jsx10(Button2, { onClick: () => setLeftRailOpen(true), children: i18n.t("expandLeft") }) : null,
+              !rightPanelOpen ? /* @__PURE__ */ jsx10(Button2, { onClick: () => setRightPanelOpen(true), children: i18n.t("expandRight") }) : null
             ] }) : null
           ] }),
           /* @__PURE__ */ jsxs7("aside", { className: `pb-right-panel${rightPanelOpen ? "" : " pb-panel--closed"}`, "aria-label": "PageDocument \u5C5E\u6027", children: [
             /* @__PURE__ */ jsxs7(InlineStack3, { align: "space-between", blockAlign: "center", children: [
-              /* @__PURE__ */ jsx9(Text3, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
-              /* @__PURE__ */ jsx9(Button2, { accessibilityLabel: i18n.t("collapseRight"), icon: XIcon2, variant: "tertiary", onClick: () => setRightPanelOpen(false) })
+              /* @__PURE__ */ jsx10(Text3, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
+              /* @__PURE__ */ jsx10(Button2, { accessibilityLabel: i18n.t("collapseRight"), icon: XIcon2, variant: "tertiary", onClick: () => setRightPanelOpen(false) })
             ] }),
             editor.selectedBlock ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-              /* @__PURE__ */ jsx9(DocumentInspector, { settings: inspectorSettings?.[editor.selectedBlock.id] ?? inspectorSettings?.[editor.selectedBlock.type], pageId: editor.document.pageId, assetPicker, productPicker, i18n, block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, appearanceControls, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props), onPresentationChange: (presentation) => updateBlockPresentation(editor.selectedBlock.id, presentation) }, editor.selectedBlock.id),
-              /* @__PURE__ */ jsx9(InspectorActions, { block: editor.selectedBlock, canDuplicate: editor.actionState.canDuplicate, canDelete: editor.actionState.canDelete, canMove: editor.actionState.canReorder, canMoveUp: editor.document.blocks[0]?.id !== editor.selectedBlock.id, canMoveDown: editor.document.blocks.at(-1)?.id !== editor.selectedBlock.id, i18n, onDuplicate: () => editor.duplicateBlock(editor.selectedBlock.id), onDelete: () => editor.requestDeleteBlock(editor.selectedBlock.id), onMove: (direction) => editor.moveBlock(editor.selectedBlock.id, direction) })
-            ] }) : /* @__PURE__ */ jsx9(Text3, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
+              /* @__PURE__ */ jsx10(DocumentInspector, { settings: inspectorSettings?.[editor.selectedBlock.id] ?? inspectorSettings?.[editor.selectedBlock.type], pageId: editor.document.pageId, assetPicker, productPicker, i18n, block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, appearanceControls, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props), onPresentationChange: (presentation) => updateBlockPresentation(editor.selectedBlock.id, presentation) }, editor.selectedBlock.id),
+              /* @__PURE__ */ jsx10(InspectorActions, { block: editor.selectedBlock, canDuplicate: editor.actionState.canDuplicate, canDelete: editor.actionState.canDelete, canMove: editor.actionState.canReorder, canMoveUp: editor.document.blocks[0]?.id !== editor.selectedBlock.id, canMoveDown: editor.document.blocks.at(-1)?.id !== editor.selectedBlock.id, i18n, onDuplicate: () => editor.duplicateBlock(editor.selectedBlock.id), onDelete: () => editor.requestDeleteBlock(editor.selectedBlock.id), onMove: (direction) => editor.moveBlock(editor.selectedBlock.id, direction) })
+            ] }) : /* @__PURE__ */ jsx10(Text3, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
           ] })
         ] }),
-        editor.pendingDeleteBlock ? /* @__PURE__ */ jsx9(DeleteConfirmation, { block: editor.pendingDeleteBlock, config: deleteConfirmation, i18n, onCancel: editor.cancelDeleteBlock, onConfirm: editor.confirmDeleteBlock }) : null,
-        confirmBack ? /* @__PURE__ */ jsx9(LeaveConfirmation, { i18n, onCancel: () => setConfirmBack(false), onConfirm: () => {
+        editor.pendingDeleteBlock ? /* @__PURE__ */ jsx10(DeleteConfirmation, { block: editor.pendingDeleteBlock, config: deleteConfirmation, i18n, onCancel: editor.cancelDeleteBlock, onConfirm: editor.confirmDeleteBlock }) : null,
+        confirmBack ? /* @__PURE__ */ jsx10(LeaveConfirmation, { i18n, onCancel: () => setConfirmBack(false), onConfirm: () => {
           setConfirmBack(false);
           onBack?.();
         } }) : null
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx9("div", { className: "pb-toast-host", ...notice === "published" ? { "data-testid": "editor-notice", "data-notice": "published" } : {}, children: /* @__PURE__ */ jsx9(Frame, { children: notice === "published" ? /* @__PURE__ */ jsx9(Toast, { content: i18n.t("publishSuccessTitle"), onDismiss: dismissPublishedNotice }) : null }) })
+    /* @__PURE__ */ jsx10("div", { className: "pb-toast-host", ...notice === "published" ? { "data-testid": "editor-notice", "data-notice": "published" } : {}, children: /* @__PURE__ */ jsx10(Frame, { children: notice === "published" ? /* @__PURE__ */ jsx10(Toast, { content: i18n.t("publishSuccessTitle"), onDismiss: dismissPublishedNotice }) : null }) })
   ] });
 }
 function CanvasSelectionActionBar({ label, children, parentAction }) {
   void label;
   void children;
   void parentAction;
-  return /* @__PURE__ */ jsx9(Fragment2, {});
+  return /* @__PURE__ */ jsx10(Fragment2, {});
 }
 function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion, canvasResetVersion, permissionsVersion }) {
   const puck = usePuck();
-  const lastSelectedId = useRef5(null);
-  const lastSyncedData = useRef5(null);
-  const lastCanvasMutationVersion = useRef5(0);
-  const lastCanvasResetVersion = useRef5(0);
+  const lastSelectedId = useRef6(null);
+  const lastSyncedData = useRef6(null);
+  const lastCanvasMutationVersion = useRef6(0);
+  const lastCanvasResetVersion = useRef6(0);
   const serializedData = JSON.stringify(data);
   const refreshPermissions = puck.refreshPermissions;
   useEffect4(() => {
@@ -1565,28 +1619,28 @@ function EditorStatus({ state }) {
   const i18n = createAdminI18n();
   const tone = state === "error" ? "critical" : state === "disabled" ? "warning" : "info";
   const message = state === "loading" ? i18n.t("loading") : state === "empty" ? i18n.t("empty") : state === "error" ? i18n.t("error") : i18n.t("disabled");
-  return /* @__PURE__ */ jsx9("div", { className: "pb-editor-status", "data-testid": "page-document-editor-state", "data-editor-state": state, children: /* @__PURE__ */ jsx9(Banner, { tone, title: message, children: state === "disabled" ? i18n.t("disabled") : message }) });
+  return /* @__PURE__ */ jsx10("div", { className: "pb-editor-status", "data-testid": "page-document-editor-state", "data-editor-state": state, children: /* @__PURE__ */ jsx10(Banner, { tone, title: message, children: state === "disabled" ? i18n.t("disabled") : message }) });
 }
 function EditorSessionStatus({ state, message }) {
   const i18n = createAdminI18n();
   const tone = state === "locked" ? "warning" : state === "readonly" ? "info" : "critical";
   const title = state === "acquiring" ? i18n.t("acquiringLock") : state === "locked" ? i18n.t("locked") : state === "readonly" ? i18n.t("readonly") : i18n.t("lockLost");
-  return /* @__PURE__ */ jsx9("div", { className: "pb-editor-status", "data-testid": "page-document-editor-session-state", "data-editor-session-state": state, children: /* @__PURE__ */ jsx9(Banner, { tone, title, children: message ?? title }) });
+  return /* @__PURE__ */ jsx10("div", { className: "pb-editor-status", "data-testid": "page-document-editor-session-state", "data-editor-session-state": state, children: /* @__PURE__ */ jsx10(Banner, { tone, title, children: message ?? title }) });
 }
 function InspectorSection({ title, children, defaultOpen = true }) {
   return /* @__PURE__ */ jsxs7("details", { className: "pb-inspector-section", open: defaultOpen, children: [
     /* @__PURE__ */ jsxs7("summary", { children: [
-      /* @__PURE__ */ jsx9("span", { children: title }),
-      /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: "\u2304" })
+      /* @__PURE__ */ jsx10("span", { children: title }),
+      /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", children: "\u2304" })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "pb-inspector-section__body", children })
+    /* @__PURE__ */ jsx10("div", { className: "pb-inspector-section__body", children })
   ] });
 }
 function InspectorTextControl({ label, value, control, maxLength, disabled, onChange }) {
   const stringValue = typeof value === "string" ? value : "";
-  if (control === "color") return /* @__PURE__ */ jsx9("input", { "aria-label": label, type: "color", value: /^#[\da-f]{6}$/i.test(stringValue) ? stringValue : "#000000", disabled, onChange: (event) => onChange(event.currentTarget.value) });
+  if (control === "color") return /* @__PURE__ */ jsx10("input", { "aria-label": label, type: "color", value: /^#[\da-f]{6}$/i.test(stringValue) ? stringValue : "#000000", disabled, onChange: (event) => onChange(event.currentTarget.value) });
   const length = Array.from(stringValue).length;
-  const field = /* @__PURE__ */ jsx9(TextField, { label, labelHidden: true, value: stringValue, onChange: (next) => onChange(maxLength === void 0 ? next : Array.from(next).slice(0, maxLength).join("")), autoComplete: "off", disabled, multiline: control === "textarea" ? 4 : false, type: control === "url" ? "url" : "text", maxLength });
+  const field = /* @__PURE__ */ jsx10(TextField, { label, labelHidden: true, value: stringValue, onChange: (next) => onChange(maxLength === void 0 ? next : Array.from(next).slice(0, maxLength).join("")), autoComplete: "off", disabled, multiline: control === "textarea" ? 4 : false, type: control === "url" ? "url" : "text", maxLength });
   if (maxLength === void 0) return field;
   return /* @__PURE__ */ jsxs7("div", { className: "pb-inspector-field__limited", children: [
     field,
@@ -1600,7 +1654,7 @@ function InspectorTextControl({ label, value, control, maxLength, disabled, onCh
 function InspectorAssetControl({ value, disabled, picker, pageId, blockId, i18n, onChange }) {
   const [busy, setBusy] = useState4(false);
   const [error, setError] = useState4(null);
-  const active = useRef5(true);
+  const active = useRef6(true);
   useEffect4(() => {
     active.current = !disabled;
     return () => {
@@ -1609,9 +1663,9 @@ function InspectorAssetControl({ value, disabled, picker, pageId, blockId, i18n,
   }, [disabled]);
   const url = typeof value === "string" && validateFieldValue({ field: "", control: "asset" }, value).length === 0 ? value : "";
   return /* @__PURE__ */ jsxs7("div", { className: "pb-asset-picker", "data-testid": "asset-picker", children: [
-    url ? /* @__PURE__ */ jsx9("img", { src: url, alt: "", className: "pb-asset-picker__preview" }) : /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("emptyAsset") }),
-    url ? /* @__PURE__ */ jsx9(Button2, { fullWidth: true, variant: "tertiary", disabled: disabled || busy, onClick: () => onChange(""), children: i18n.t("removeAsset") }) : null,
-    /* @__PURE__ */ jsx9(Button2, { fullWidth: true, disabled: disabled || busy || !picker, onClick: () => void (async () => {
+    url ? /* @__PURE__ */ jsx10("img", { src: url, alt: "", className: "pb-asset-picker__preview" }) : /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("emptyAsset") }),
+    url ? /* @__PURE__ */ jsx10(Button2, { fullWidth: true, variant: "tertiary", disabled: disabled || busy, onClick: () => onChange(""), children: i18n.t("removeAsset") }) : null,
+    /* @__PURE__ */ jsx10(Button2, { fullWidth: true, disabled: disabled || busy || !picker, onClick: () => void (async () => {
       if (!picker) return;
       setBusy(true);
       setError(null);
@@ -1627,7 +1681,7 @@ function InspectorAssetControl({ value, disabled, picker, pageId, blockId, i18n,
         setBusy(false);
       }
     })(), children: busy ? i18n.t("selectingAsset") : i18n.t("selectAsset") }),
-    error ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
+    error ? /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
   ] });
 }
 function InspectorProductsControl({ value, disabled, picker, pageId, blockId, i18n, onChange }) {
@@ -1637,10 +1691,10 @@ function InspectorProductsControl({ value, disabled, picker, pageId, blockId, i1
   const preview = products.slice(0, 4);
   return /* @__PURE__ */ jsxs7("div", { className: "pb-product-picker", "data-testid": "product-picker", children: [
     /* @__PURE__ */ jsxs7("div", { className: "pb-product-picker__summary", children: [
-      preview.length ? /* @__PURE__ */ jsx9("span", { className: "pb-product-picker__thumbs", "aria-hidden": "true", children: preview.map((product, index) => /* @__PURE__ */ jsx9("span", { className: "pb-product-picker__thumb", style: { zIndex: preview.length - index }, children: product.imageUrl ? /* @__PURE__ */ jsx9("img", { src: product.imageUrl, alt: "" }) : /* @__PURE__ */ jsx9("span", { className: "pb-product-picker__thumb-fallback" }) }, product.id)) }) : null,
-      /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", children: products.length ? `${products.length} ${i18n.t("productCountSuffix")}` : i18n.t("emptyProducts") })
+      preview.length ? /* @__PURE__ */ jsx10("span", { className: "pb-product-picker__thumbs", "aria-hidden": "true", children: preview.map((product, index) => /* @__PURE__ */ jsx10("span", { className: "pb-product-picker__thumb", style: { zIndex: preview.length - index }, children: product.imageUrl ? /* @__PURE__ */ jsx10("img", { src: product.imageUrl, alt: "" }) : /* @__PURE__ */ jsx10("span", { className: "pb-product-picker__thumb-fallback" }) }, product.id)) }) : null,
+      /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", children: products.length ? `${products.length} ${i18n.t("productCountSuffix")}` : i18n.t("emptyProducts") })
     ] }),
-    /* @__PURE__ */ jsx9(Button2, { fullWidth: true, icon: ProductIcon, variant: "secondary", disabled: disabled || busy || !picker, onClick: () => void (async () => {
+    /* @__PURE__ */ jsx10(Button2, { fullWidth: true, icon: ProductIcon, variant: "secondary", disabled: disabled || busy || !picker, onClick: () => void (async () => {
       if (!picker) return;
       setBusy(true);
       setError(null);
@@ -1653,7 +1707,7 @@ function InspectorProductsControl({ value, disabled, picker, pageId, blockId, i1
         setBusy(false);
       }
     })(), children: busy ? i18n.t("selectingProducts") : i18n.t("selectProducts") }),
-    error ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
+    error ? /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
   ] });
 }
 function InspectorField({ name, field, value, registry, disabled, assetPicker, productPicker, pageId, blockId, i18n, onChange }) {
@@ -1662,41 +1716,41 @@ function InspectorField({ name, field, value, registry, disabled, assetPicker, p
   const Field = registry?.getField(field.field)?.component;
   return /* @__PURE__ */ jsxs7("div", { className: "pb-inspector-field", "data-control": field.control ?? "custom", children: [
     /* @__PURE__ */ jsxs7("div", { className: "pb-inspector-field__heading", children: [
-      /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", fontWeight: "semibold", children: label }),
-      field.description ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: field.description }) : null
+      /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", fontWeight: "semibold", children: label }),
+      field.description ? /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: field.description }) : null
     ] }),
-    field.control === "products" ? /* @__PURE__ */ jsx9(InspectorProductsControl, { value, disabled, picker: productPicker, pageId, blockId, i18n, onChange }) : field.control === "asset" ? /* @__PURE__ */ jsx9(InspectorAssetControl, { value, disabled, picker: assetPicker, pageId, blockId, i18n, onChange }) : field.control ? /* @__PURE__ */ jsx9(InspectorTextControl, { label, value, control: field.control, maxLength: field.validation?.maxLength, disabled, onChange: (next) => onChange(next) }) : Field ? /* @__PURE__ */ jsx9(Field, { value, onChange }) : null,
-    issues.map((issue) => /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "critical", children: issue.message }, issue.message))
+    field.control === "products" ? /* @__PURE__ */ jsx10(InspectorProductsControl, { value, disabled, picker: productPicker, pageId, blockId, i18n, onChange }) : field.control === "asset" ? /* @__PURE__ */ jsx10(InspectorAssetControl, { value, disabled, picker: assetPicker, pageId, blockId, i18n, onChange }) : field.control ? /* @__PURE__ */ jsx10(InspectorTextControl, { label, value, control: field.control, maxLength: field.validation?.maxLength, disabled, onChange: (next) => onChange(next) }) : Field ? /* @__PURE__ */ jsx10(Field, { value, onChange }) : null,
+    issues.map((issue) => /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", tone: "critical", children: issue.message }, issue.message))
   ] });
 }
 function InspectorActions({ block, canDuplicate, canDelete, canMove, canMoveUp, canMoveDown, i18n, onDuplicate, onDelete, onMove }) {
   return /* @__PURE__ */ jsxs7("div", { className: "pb-inspector-actions", "aria-label": `Actions for ${block.id}`, children: [
     /* @__PURE__ */ jsxs7(ButtonGroup2, { children: [
-      /* @__PURE__ */ jsx9(Button2, { disabled: !canMove || !canMoveUp, onClick: () => onMove(-1), children: i18n.t("moveUp") }),
-      /* @__PURE__ */ jsx9(Button2, { disabled: !canMove || !canMoveDown, onClick: () => onMove(1), children: i18n.t("moveDown") }),
-      /* @__PURE__ */ jsx9(Button2, { disabled: !canDuplicate, accessibilityLabel: canDuplicate ? i18n.t("duplicate") : i18n.t("duplicateUnavailable"), onClick: onDuplicate, children: i18n.t("duplicate") }),
-      /* @__PURE__ */ jsx9(Button2, { disabled: !canDelete, tone: "critical", onClick: onDelete, children: i18n.t("remove") })
+      /* @__PURE__ */ jsx10(Button2, { disabled: !canMove || !canMoveUp, onClick: () => onMove(-1), children: i18n.t("moveUp") }),
+      /* @__PURE__ */ jsx10(Button2, { disabled: !canMove || !canMoveDown, onClick: () => onMove(1), children: i18n.t("moveDown") }),
+      /* @__PURE__ */ jsx10(Button2, { disabled: !canDuplicate, accessibilityLabel: canDuplicate ? i18n.t("duplicate") : i18n.t("duplicateUnavailable"), onClick: onDuplicate, children: i18n.t("duplicate") }),
+      /* @__PURE__ */ jsx10(Button2, { disabled: !canDelete, tone: "critical", onClick: onDelete, children: i18n.t("remove") })
     ] }),
-    !canDuplicate ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("duplicateUnavailable") }) : null
+    !canDuplicate ? /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("duplicateUnavailable") }) : null
   ] });
 }
 function DeleteConfirmation({ block, config, i18n, onCancel, onConfirm }) {
-  return /* @__PURE__ */ jsx9("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-delete-confirmation-title", children: [
-    /* @__PURE__ */ jsx9(Text3, { as: "h2", variant: "headingMd", id: "pb-delete-confirmation-title", children: config?.title ?? i18n.t("confirmDeleteTitle") }),
-    /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodyMd", children: config?.message?.(block) ?? i18n.t("confirmDeleteMessage") }),
+  return /* @__PURE__ */ jsx10("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-delete-confirmation-title", children: [
+    /* @__PURE__ */ jsx10(Text3, { as: "h2", variant: "headingMd", id: "pb-delete-confirmation-title", children: config?.title ?? i18n.t("confirmDeleteTitle") }),
+    /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodyMd", children: config?.message?.(block) ?? i18n.t("confirmDeleteMessage") }),
     /* @__PURE__ */ jsxs7(ButtonGroup2, { children: [
-      /* @__PURE__ */ jsx9(Button2, { onClick: onCancel, children: config?.cancelLabel ?? i18n.t("cancel") }),
-      /* @__PURE__ */ jsx9(Button2, { tone: "critical", onClick: onConfirm, children: config?.confirmLabel ?? i18n.t("confirm") })
+      /* @__PURE__ */ jsx10(Button2, { onClick: onCancel, children: config?.cancelLabel ?? i18n.t("cancel") }),
+      /* @__PURE__ */ jsx10(Button2, { tone: "critical", onClick: onConfirm, children: config?.confirmLabel ?? i18n.t("confirm") })
     ] })
   ] }) });
 }
 function LeaveConfirmation({ i18n, onCancel, onConfirm }) {
-  return /* @__PURE__ */ jsx9("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-leave-confirmation-title", children: [
-    /* @__PURE__ */ jsx9(Text3, { as: "h2", variant: "headingMd", id: "pb-leave-confirmation-title", children: i18n.t("confirmLeaveTitle") }),
-    /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodyMd", children: i18n.t("leaveWarning") }),
+  return /* @__PURE__ */ jsx10("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-leave-confirmation-title", children: [
+    /* @__PURE__ */ jsx10(Text3, { as: "h2", variant: "headingMd", id: "pb-leave-confirmation-title", children: i18n.t("confirmLeaveTitle") }),
+    /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodyMd", children: i18n.t("leaveWarning") }),
     /* @__PURE__ */ jsxs7(ButtonGroup2, { children: [
-      /* @__PURE__ */ jsx9(Button2, { onClick: onCancel, children: i18n.t("cancel") }),
-      /* @__PURE__ */ jsx9(Button2, { tone: "critical", onClick: onConfirm, children: i18n.t("leave") })
+      /* @__PURE__ */ jsx10(Button2, { onClick: onCancel, children: i18n.t("cancel") }),
+      /* @__PURE__ */ jsx10(Button2, { tone: "critical", onClick: onConfirm, children: i18n.t("leave") })
     ] })
   ] }) });
 }
@@ -1720,18 +1774,18 @@ function DocumentInspector({ settings, pageId, assetPicker, productPicker, i18n,
   }, {}) : {};
   return /* @__PURE__ */ jsxs7("div", { className: "pb-inspector", "data-testid": "document-inspector", children: [
     /* @__PURE__ */ jsxs7("header", { className: "pb-inspector__header", children: [
-      /* @__PURE__ */ jsx9(Badge3, { children: block.type }),
+      /* @__PURE__ */ jsx10(Badge3, { children: block.type }),
       /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "headingSm", children: blockLabel(block, registry) }),
-        /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: definition?.category ?? "Core block" })
+        /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "headingSm", children: blockLabel(block, registry) }),
+        /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: definition?.category ?? "Core block" })
       ] })
     ] }),
-    block.type === "core.text" ? /* @__PURE__ */ jsx9(InspectorSection, { title: "Content", children: /* @__PURE__ */ jsx9(InspectorField, { name: "content", field: { field: "", label: "\u6587\u672C\u5185\u5BB9", control: "textarea", description: "\u652F\u6301\u8F83\u957F\u7684\u6B63\u6587\u5185\u5BB9\u3002" }, value: block.props.content, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (content) => onChange({ content }) }) }) : null,
+    block.type === "core.text" ? /* @__PURE__ */ jsx10(InspectorSection, { title: "Content", children: /* @__PURE__ */ jsx10(InspectorField, { name: "content", field: { field: "", label: "\u6587\u672C\u5185\u5BB9", control: "textarea", description: "\u652F\u6301\u8F83\u957F\u7684\u6B63\u6587\u5185\u5BB9\u3002" }, value: block.props.content, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (content) => onChange({ content }) }) }) : null,
     block.type === "core.image" ? /* @__PURE__ */ jsxs7(InspectorSection, { title: "Image", children: [
-      /* @__PURE__ */ jsx9(InspectorField, { name: "src", field: { field: "", label: "\u56FE\u7247 URL", control: "url", description: "\u4F7F\u7528 HTTPS \u56FE\u7247\u5730\u5740\u3002" }, value: block.props.src, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (src) => onChange({ src }) }),
-      /* @__PURE__ */ jsx9(InspectorField, { name: "alt", field: { field: "", label: "\u66FF\u4EE3\u6587\u672C", control: "text", description: "\u7528\u4E8E\u65E0\u969C\u788D\u9605\u8BFB\u548C\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u573A\u666F\u3002" }, value: block.props.alt, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (alt) => onChange({ alt }) }),
+      /* @__PURE__ */ jsx10(InspectorField, { name: "src", field: { field: "", label: "\u56FE\u7247 URL", control: "url", description: "\u4F7F\u7528 HTTPS \u56FE\u7247\u5730\u5740\u3002" }, value: block.props.src, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (src) => onChange({ src }) }),
+      /* @__PURE__ */ jsx10(InspectorField, { name: "alt", field: { field: "", label: "\u66FF\u4EE3\u6587\u672C", control: "text", description: "\u7528\u4E8E\u65E0\u969C\u788D\u9605\u8BFB\u548C\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u573A\u666F\u3002" }, value: block.props.alt, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (alt) => onChange({ alt }) }),
       assetPicker ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-        /* @__PURE__ */ jsx9(Button2, { disabled: disabled || selectingAsset, onClick: () => void (async () => {
+        /* @__PURE__ */ jsx10(Button2, { disabled: disabled || selectingAsset, onClick: () => void (async () => {
           setSelectingAsset(true);
           setAssetError(null);
           try {
@@ -1743,13 +1797,13 @@ function DocumentInspector({ settings, pageId, assetPicker, productPicker, i18n,
             setSelectingAsset(false);
           }
         })(), children: selectingAsset ? "\u6B63\u5728\u9009\u62E9\u7D20\u6750\u2026" : "\u9009\u62E9\u7D20\u6750" }),
-        assetError ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "critical", children: assetError }) : null
+        assetError ? /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodySm", tone: "critical", children: assetError }) : null
       ] }) : null
     ] }) : null,
-    Object.entries(groupedFields).map(([group, fields]) => /* @__PURE__ */ jsx9(InspectorSection, { title: group, defaultOpen: group !== "Advanced", children: fields.map(([name, field]) => /* @__PURE__ */ jsx9(InspectorField, { name, field, value: field.persist === false ? settings?.values[name] : block.props[name], registry, disabled: disabled || field.persist === false && (!settings || Boolean(settings.disabled)), assetPicker, productPicker, pageId, blockId: block.id, i18n, onChange: (value) => field.persist === false ? settings?.onChange(name, value) : onChange({ [name]: value }) }, name)) }, group)),
+    Object.entries(groupedFields).map(([group, fields]) => /* @__PURE__ */ jsx10(InspectorSection, { title: group, defaultOpen: group !== "Advanced", children: fields.map(([name, field]) => /* @__PURE__ */ jsx10(InspectorField, { name, field, value: field.persist === false ? settings?.values[name] : block.props[name], registry, disabled: disabled || field.persist === false && (!settings || Boolean(settings.disabled)), assetPicker, productPicker, pageId, blockId: block.id, i18n, onChange: (value) => field.persist === false ? settings?.onChange(name, value) : onChange({ [name]: value }) }, name)) }, group)),
     Object.values(definition?.fields ?? {}).some((field) => field.persist === false) ? settings?.footer : null,
-    appearanceControls && definition?.variants?.length ? /* @__PURE__ */ jsx9(InspectorSection, { title: "\u5916\u89C2", children: /* @__PURE__ */ jsx9(Select2, { label: "\u6837\u5F0F\u53D8\u4F53", options: definition.variants.map((variant) => ({ label: variant.label, value: variant.id })), value: block.variant, disabled, onChange: (variant) => onPresentationChange({ variant, style: block.style }) }) }) : null,
-    appearanceControls && definition ? /* @__PURE__ */ jsx9(InspectorSection, { title: "\u6837\u5F0F\u8986\u76D6", defaultOpen: false, children: appearanceTokens.map(([token, label]) => /* @__PURE__ */ jsx9(TextField, { label, value: block.style[token] ?? "", placeholder: "\u7EE7\u627F\u9875\u9762\u6216\u6A21\u677F\u8BBE\u7F6E", autoComplete: "off", disabled, onChange: (value) => {
+    appearanceControls && definition?.variants?.length ? /* @__PURE__ */ jsx10(InspectorSection, { title: "\u5916\u89C2", children: /* @__PURE__ */ jsx10(Select2, { label: "\u6837\u5F0F\u53D8\u4F53", options: definition.variants.map((variant) => ({ label: variant.label, value: variant.id })), value: block.variant, disabled, onChange: (variant) => onPresentationChange({ variant, style: block.style }) }) }) : null,
+    appearanceControls && definition ? /* @__PURE__ */ jsx10(InspectorSection, { title: "\u6837\u5F0F\u8986\u76D6", defaultOpen: false, children: appearanceTokens.map(([token, label]) => /* @__PURE__ */ jsx10(TextField, { label, value: block.style[token] ?? "", placeholder: "\u7EE7\u627F\u9875\u9762\u6216\u6A21\u677F\u8BBE\u7F6E", autoComplete: "off", disabled, onChange: (value) => {
       const style = { ...block.style };
       if (value.trim()) style[token] = value;
       else delete style[token];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/puck-page-builder",
-  "version": "0.12.8",
+  "version": "0.12.9",
   "description": "React PageDocument editor, extension registry, and web renderer for BestTrack page experiences.",
   "type": "module",
   "repository": {

package/src/styles.css

@@ -27,7 +27,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-zoom-control .Polaris-Select__Input { padding-top: 4px; padding-bottom: 4px; }
 .pb-page-status-card { display: grid; gap: 2px; margin-top: var(--builder-space-1); }
 .pb-page-status-card p { margin: 0; }
-.pb-workspace { display: grid; grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 320px); min-height: calc(100vh - 56px); }
+.pb-workspace { display: grid; grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr) minmax(260px, 320px); width: 100%; min-width: 0; min-height: calc(100vh - 56px); overflow-x: hidden; }
 .pb-workspace--left-closed:not(.pb-workspace--right-closed) { grid-template-columns: 64px minmax(0, 1fr) minmax(300px, 320px); }
 .pb-workspace--right-closed:not(.pb-workspace--left-closed) { grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr); }
 .pb-workspace--left-closed.pb-workspace--right-closed { grid-template-columns: 64px minmax(0, 1fr); }
@@ -35,6 +35,9 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-tool-rail .Polaris-Button { min-width: 44px; min-height: 44px; }
 .pb-left-panel, .pb-right-panel { display: flex; flex-direction: column; gap: var(--builder-space-4); min-width: 0; padding: var(--builder-space-4); overflow: auto; background: var(--builder-surface); }
 .pb-left-panel { border-right: 1px solid var(--builder-border); }
+.pb-panel-header { width: 100%; }
+.pb-panel-header .Polaris-InlineStack { width: 100%; }
+.pb-panel-header .Polaris-Button { min-width: 32px; min-height: 32px; }
 .pb-right-panel { border-left: 1px solid var(--builder-border); background: #f8fafc; }
 .pb-right-panel > h2 { margin: 0; color: #475569; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
 .pb-inspector { display: grid; gap: var(--builder-space-3); }
@@ -73,7 +76,10 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-asset-picker { display: grid; gap: 8px; }
 .pb-asset-picker__preview { display: block; width: 100%; aspect-ratio: 20 / 9; object-fit: fill; object-position: center; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
 .pb-inspector__hint { margin: 0; padding: 0 var(--builder-space-2); color: #64748b; font-size: 12px; line-height: 1.5; }
-.pb-inspector-actions { padding-top: var(--builder-space-2); border-top: 1px solid #e2e8f0; }
+.pb-inspector-actions { min-width: 0; padding-top: var(--builder-space-2); border-top: 1px solid #e2e8f0; }
+.pb-inspector-actions .Polaris-ButtonGroup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; gap: var(--builder-space-2); }
+.pb-inspector-actions .Polaris-ButtonGroup__Item { min-width: 0; margin: 0; }
+.pb-inspector-actions .Polaris-ButtonGroup__Item .Polaris-Button { width: 100%; justify-content: center; }
 .pb-delete-confirmation-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: var(--builder-space-4); background: rgb(15 23 42 / 42%); }
 .pb-delete-confirmation { display: grid; gap: var(--builder-space-4); width: min(100%, 420px); padding: var(--builder-space-5); border-radius: 12px; color: #0f172a; background: #fff; box-shadow: 0 20px 50px rgb(15 23 42 / 25%); }
 .pb-delete-confirmation h2, .pb-delete-confirmation p { margin: 0; }
@@ -90,9 +96,9 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-canvas-area { display: flex; flex-direction: column; gap: var(--builder-space-3); min-width: 0; min-height: 0; padding: var(--builder-space-4); overflow: auto; background: var(--builder-canvas-bg); }
 .pb-canvas-toolbar { padding: var(--builder-space-2); border: 1px solid var(--builder-border); border-radius: var(--builder-panel-radius); background: var(--builder-surface); }
 .pb-canvas-stage { position: relative; display: block; padding: 0; height: auto; }
-.pb-canvas-frame { --puck-color-line-placeholder: var(--builder-accent); --puck-line-placeholder-width: 3px; width: 100%; height: auto; margin: 0 auto; overflow: visible; border: 1px solid var(--builder-border); border-radius: var(--builder-canvas-radius); background: var(--builder-surface); box-shadow: var(--builder-canvas-shadow); transition: width 160ms ease, transform 160ms ease; }
-.pb-canvas-frame iframe { display: block; width: 100%; height: auto !important; min-height: 0 !important; border: 0; }
-.pb-canvas-frame [class*="PuckPreview"] { position: relative; height: auto !important; }
+.pb-canvas-frame { --puck-color-line-placeholder: var(--builder-accent); --puck-line-placeholder-width: 3px; width: 100%; height: auto; margin: 0 auto; overflow: visible; border: 1px solid var(--builder-border); border-radius: var(--builder-canvas-radius); background: var(--builder-surface); box-shadow: var(--builder-canvas-shadow); transform-origin: top center; transition: width 160ms ease, transform 160ms ease; }
+.pb-canvas-frame iframe { display: block; width: 100%; height: auto; min-height: 0; border: 0; }
+.pb-canvas-frame [class*="PuckPreview"]:not(iframe) { position: relative; height: auto !important; }
 .pb-canvas-frame [data-puck-component] { cursor: grab; }
 .pb-canvas-frame [data-puck-component]:active, .pb-canvas-frame [data-dnd-dragging] { cursor: grabbing; }
 .pb-canvas-frame [data-puck-disabled] { cursor: pointer; }
@@ -108,9 +114,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-canvas-frame--tablet { width: min(100%, 768px); }
 .pb-canvas-frame--mobile { width: min(100%, 390px); }
 .pb-canvas-frame--full { width: 100%; }
-.pb-canvas-frame--zoom-50 { zoom: 0.5; }
-.pb-canvas-frame--zoom-70 { zoom: 0.7; }
-.pb-canvas-frame--zoom-100 { zoom: 1; }
+.pb-canvas-frame--zoom-50, .pb-canvas-frame--zoom-70, .pb-canvas-frame--zoom-100 { transform-origin: top center; }
 .pb-canvas-overlay { position: absolute; top: var(--builder-space-2); left: 50%; display: flex; gap: var(--builder-space-2); padding: var(--builder-space-1) var(--builder-space-2); border: 2px solid var(--builder-accent); border-radius: var(--builder-control-radius); color: var(--builder-accent); background: var(--builder-surface); font-size: 12px; font-weight: 600; transform: translateX(-50%); box-shadow: var(--builder-canvas-shadow); pointer-events: none; }
 .pb-canvas-overlay span:last-child { color: var(--builder-text-muted); font-weight: 500; }
 .pb-collapsed-actions { display: flex; gap: var(--builder-space-2); }
@@ -124,7 +128,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-document-block span { font-size: 14px; font-weight: 600; }
 .pb-document-block small { grid-column: 2; color: var(--builder-text-muted); }
 .pb-document-block-row { display: flex; align-items: center; gap: var(--builder-space-2); padding: var(--builder-space-2); border: 1px solid transparent; border-radius: var(--builder-panel-radius); background: transparent; }
-.pb-document-block-row--library { width: 100%; flex-direction: column; align-items: flex-start; text-align: left; color: var(--builder-text); font: inherit; cursor: grab; }
+.pb-document-block-row--library { width: 100%; flex-direction: column; align-items: flex-start; padding-right: var(--builder-space-2); text-align: left; color: var(--builder-text); font: inherit; cursor: grab; }
 .pb-document-block-row--library:active { cursor: grabbing; }
 .pb-document-block-row--library[aria-disabled="true"] { cursor: default; }
 .pb-document-block-row--dragging { opacity: 0.55; }
@@ -132,8 +136,12 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-document-block-row--drop-after { box-shadow: inset 0 -3px 0 0 var(--builder-accent); }
 .pb-document-block-row--library[type="button"] { cursor: pointer; }
 .pb-library-block-title { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--builder-space-2); }
-.pb-library-block-drag-hint { display: inline-flex; color: var(--builder-text-muted); pointer-events: none; }
-.pb-library-block-drag-hint svg { width: 16px; height: 16px; }
+.pb-library-block-controls { display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto; margin-right: 0; }
+.pb-library-block-drag-hint { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--builder-text-muted); pointer-events: none; }
+.pb-library-block-drag-hint svg { width: 20px; height: 20px; }
+.pb-library-block-controls .Polaris-Button { min-width: 32px; min-height: 32px; padding: 0; }
+.pb-library-block-controls .Polaris-Button svg { width: 20px; height: 20px; }
+.pb-library-block-controls .Polaris-Button:disabled { color: var(--builder-text-muted); opacity: .55; }
 .pb-document-block-row:hover { background: var(--builder-surface-subtle); }
 .pb-document-block-row--selected { border-color: var(--builder-accent); background: var(--builder-accent-subtle); }
 .pb-editor-status { display: grid; place-items: center; box-sizing: border-box; width: 100%; min-height: 100dvh; padding: var(--builder-space-6); }