@standhigher/puck-page-builder 0.12.5 → 0.12.6

package/dist/index.js

@@ -260,13 +260,7 @@ function EditorShell({ initialState, iframe = true }) {
       ] }),
       /* @__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__ */ jsxs2("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, {}) }),
-          selectedBlock ? /* @__PURE__ */ jsxs2("div", { className: "pb-canvas-overlay", "aria-label": `\u5DF2\u9009\u62E9 ${selectedBlock.label}`, children: [
-            /* @__PURE__ */ jsx2("span", { children: selectedBlock.label }),
-            /* @__PURE__ */ jsx2("span", { children: "Selected" })
-          ] }) : null
-        ] }),
+        /* @__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, {}) }) }),
         !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
@@ -353,22 +347,72 @@ function PropertyPanel({
 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 useEffect3, useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "react";
 
-// src/adapters/puck/canvas-extension-block.tsx
+// src/adapters/puck/use-canvas-editing.ts
 import { registerOverlayPortal } from "@puckeditor/core";
 import { useEffect, useRef as useRef2 } from "react";
+var editingControlSelector = "input, textarea, select, button, a[href], [contenteditable]:not([contenteditable=false]), [role=textbox]";
+function useCanvasEditing(active) {
+  const ref = useRef2(null);
+  useEffect(() => {
+    const root = ref.current;
+    if (!active || !root) return;
+    const cleanupPortal = registerOverlayPortal(root, { disableDragOnFocus: false });
+    const protectEditingControl = (event) => {
+      const target = event.target;
+      const control = typeof target?.closest === "function" ? target.closest(editingControlSelector) : null;
+      if (control && root.contains(control)) event.stopPropagation();
+    };
+    root.addEventListener("pointerdown", protectEditingControl, { capture: true });
+    return () => {
+      root.removeEventListener("pointerdown", protectEditingControl, { capture: true });
+      cleanupPortal?.();
+    };
+  }, [active]);
+  return ref;
+}
+
+// src/adapters/puck/canvas-extension-block.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-function CanvasExtensionBlock({ active, children, label, onSelect }) {
-  const editorRef = useRef2(null);
-  useEffect(() => active ? registerOverlayPortal(editorRef.current, { disableDrag: true }) : void 0, [active]);
-  return /* @__PURE__ */ jsx3("div", { ref: editorRef, className: "pb-document-canvas__extension", "aria-label": "Select " + label + " in canvas", role: "group", tabIndex: 0, onClick: onSelect, onKeyDown: (event) => {
-    if (event.key === "Enter" || event.key === " ") onSelect();
+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) => {
+    if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onSelect();
+    }
   }, children });
 }
 
+// src/adapters/puck/canvas-core-blocks.tsx
+import { jsx as jsx4, 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) => {
+    if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onSelect(id);
+    }
+  }, children: /* @__PURE__ */ jsx4("p", { contentEditable: editable, suppressContentEditableWarning: true, onInput: (event) => {
+    if (editable) onPropsChange(id, { content: event.currentTarget.textContent ?? "" }, true);
+  }, children: content }) });
+}
+function CanvasImageBlock({ id, src, alt, editable, onSelect, onPropsChange }) {
+  const ref = useCanvasEditing(editable);
+  return /* @__PURE__ */ jsxs3("figure", { ref, className: "pb-document-canvas__image", "data-page-document-block-id": id, "aria-label": "Select Image 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("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
+  ] });
+}
+
 // src/adapters/puck/page-document-config.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function withBlockPermissions(component, type, resolvePermissions) {
   if (!resolvePermissions) return component;
   return {
@@ -386,11 +430,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__ */ jsx4("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__ */ 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]) => {
     const Field = registry?.getField(field.field)?.component;
-    return Field ? /* @__PURE__ */ jsxs3("label", { style: { display: "grid", gap: 4, fontSize: 12, fontWeight: 600 }, children: [
+    return Field ? /* @__PURE__ */ jsxs4("label", { style: { display: "grid", gap: 4, fontSize: 12, fontWeight: 600 }, children: [
       field.label ?? name,
-      /* @__PURE__ */ jsx4(Field, { value: props[name], onChange: (value) => onPropsChange({ [name]: value }) })
+      /* @__PURE__ */ jsx5(Field, { value: props[name], onChange: (value) => onPropsChange({ [name]: value }) })
     ] }, name) : null;
   }) });
 }
@@ -403,8 +447,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__ */ jsx4(CanvasExtensionBlock, { active, label: block.label, onSelect: () => onSelect(id), children: EditorRenderer ? /* @__PURE__ */ jsx4(EditorRenderer, { ...props, blockId: id, selected: active, onPropsChange: (next) => onPropsChange(id, next) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx4(BlockRenderer, { ...props }),
+        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 }),
           active ? canvasFieldFallback({ block, props, registry, onPropsChange: (next) => onPropsChange(id, next) }) : null
         ] }) });
       }
@@ -417,11 +461,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__ */ jsx4("section", { 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.key === "Enter" || event.key === " ") onSelect(id);
-          }, children: /* @__PURE__ */ jsx4("p", { contentEditable: editable, suppressContentEditableWarning: true, onInput: (event) => {
-            if (editable) onPropsChange(id, { content: event.currentTarget.textContent ?? "" }, true);
-          }, children: content }) });
+          return /* @__PURE__ */ jsx5(CanvasTextBlock, { id, content, editable, onSelect, onPropsChange });
         }
       }, "core.text", resolveBlockPermissions),
       Image: withBlockPermissions({
@@ -430,12 +470,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__ */ jsxs3("figure", { className: "pb-document-canvas__image", "data-page-document-block-id": id, "aria-label": "Select Image in canvas", role: "button", tabIndex: 0, onClick: () => onSelect(id), onKeyDown: (event) => {
-            if (event.key === "Enter" || event.key === " ") 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
-          ] });
+          return /* @__PURE__ */ jsx5(CanvasImageBlock, { id, src, alt, editable, onSelect, onPropsChange });
         }
       }, "core.image", resolveBlockPermissions),
       ...extensionComponents
@@ -454,10 +489,10 @@ function toEngineBlock(block, registry) {
   if (!type) throw new Error(`V0.2 \u4E0D\u652F\u6301\u8F6C\u6362\u533A\u5757\u7C7B\u578B\uFF1A${block.type}`);
   return { type, props: { id: block.id, ...block.props } };
 }
-function toEngineData(document, registry) {
+function toEngineData(document2, registry) {
   return {
-    root: { props: { ...document.root } },
-    content: document.blocks.map((block) => toEngineBlock(block, registry))
+    root: { props: { ...document2.root } },
+    content: document2.blocks.map((block) => toEngineBlock(block, registry))
   };
 }
 function fromEngineData(data, base, registry) {
@@ -544,7 +579,7 @@ function canApplyCanvasDocument(previous, next, getDefinition, policy) {
 }
 
 // src/editor/context/EditorContext.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } 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 };
@@ -577,7 +612,7 @@ function defaultBlock(type, blocks, registry) {
   return { id: uniqueBlockId(type, blocks), type, version: definition.version, props: definition.defaultProps, variant: definition.defaultVariant ?? "default", style: {} };
 }
 function EditorProvider({ initialDocument, registry, policy, loadState = "ready", sessionState = "active", session, sessionMessage, leaveWarning = "You have unsaved changes.", onDocumentChange, children }) {
-  const [history, dispatch] = useReducer(historyReducer, initialDocument, (document) => ({ document, selectedBlockId: document.blocks[0]?.id ?? null, past: [], future: [], device: "desktop", savedDocument: document }));
+  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);
   useEffect2(() => {
     historyRef.current = history;
@@ -587,7 +622,7 @@ function EditorProvider({ initialDocument, registry, policy, loadState = "ready"
   const editable = (loadState === "ready" || loadState === "success") && sessionState === "active";
   const selectedBlock = history.document.blocks.find((block) => block.id === history.selectedBlockId) ?? null;
   const pendingDeleteBlock = history.document.blocks.find((block) => block.id === pendingDeleteBlockId) ?? null;
-  const replace = useCallback((document, selectedBlockId) => dispatch({ type: "replace", document, selectedBlockId }), []);
+  const replace = useCallback((document2, selectedBlockId) => dispatch({ type: "replace", document: document2, selectedBlockId }), []);
   const requestCanvasSelection = useCallback((id) => {
     if (editable) setCanvasSelectionRequest(id);
   }, [editable]);
@@ -595,11 +630,11 @@ function EditorProvider({ initialDocument, registry, policy, loadState = "ready"
     setCanvasSelectionRequest(null);
     dispatch({ type: "select", id });
   }, []);
-  const updateFromCanvas = useCallback((document) => {
+  const updateFromCanvas = useCallback((document2) => {
     const current = historyRef.current;
-    if (!editable || JSON.stringify(document) === JSON.stringify(current.document)) return false;
-    if (!canApplyCanvasDocument(current.document, document, (type) => registry?.getBlock(type), policy)) return false;
-    replace(document, current.selectedBlockId);
+    if (!editable || JSON.stringify(document2) === JSON.stringify(current.document)) return false;
+    if (!canApplyCanvasDocument(current.document, document2, (type) => registry?.getBlock(type), policy)) return false;
+    replace(document2, current.selectedBlockId);
     return true;
   }, [editable, policy, registry, replace]);
   const updateBlockProps = useCallback((id, props) => {
@@ -755,10 +790,10 @@ function EditorProvider({ initialDocument, registry, policy, loadState = "ready"
       redo: () => {
         if (editable) dispatch({ type: "redo" });
       },
-      markSaved: (document = historyRef.current.document) => dispatch({ type: "saved", document })
+      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__ */ jsx5(EditorContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx6(EditorContext.Provider, { value, children });
 }
 function useEditorContext() {
   const context = useContext(EditorContext);
@@ -768,18 +803,18 @@ function useEditorContext() {
 
 // src/editor/components/PageStatusCard.tsx
 import { Badge as Badge2, InlineStack as InlineStack2, Text as Text2 } from "@shopify/polaris";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, 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__ */ jsxs4("div", { className: "pb-page-status-card", "data-testid": "page-status-card", "data-publication-status": status.publicationStatus, "data-session-state": sessionState, children: [
-    /* @__PURE__ */ jsxs4(InlineStack2, { gap: "150", blockAlign: "center", wrap: true, children: [
-      /* @__PURE__ */ jsx6(Badge2, { tone: publicationTone, children: status.publicationStatus === "published" ? "\u7EBF\u4E0A" : "\u672A\u53D1\u5E03" }),
-      status.draftLabel ? /* @__PURE__ */ jsx6(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: status.draftLabel }) : null,
-      status.publishedVersionLabel ? /* @__PURE__ */ jsx6(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: status.publishedVersionLabel }) : null,
-      sessionLabel ? /* @__PURE__ */ jsx6(Badge2, { tone: sessionState === "lost" ? "critical" : "attention", children: sessionLabel }) : null
+  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
     ] }),
-    status.lastSavedAt ? /* @__PURE__ */ jsxs4(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: [
+    status.lastSavedAt ? /* @__PURE__ */ jsxs5(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: [
       "\u6700\u540E\u4FDD\u5B58\uFF1A",
       status.lastSavedAt
     ] }) : null
@@ -924,17 +959,197 @@ function createAdminI18n(locale) {
   return { locale: resolvedLocale, t: (key) => messages[resolvedLocale][key] };
 }
 
+// src/editor/shell/CanvasLibraryDropTarget.tsx
+import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+
 // src/editor/shell/drop-position.ts
 function nearestBlockIdAtY(blocks, y) {
   return blocks.find((block) => y < block.top + block.height / 2)?.id;
 }
-function blockIdAtRelativeY(ids, relativeY) {
-  const index = Math.min(ids.length, Math.max(0, Math.round(relativeY * ids.length)));
-  return ids[index];
+
+// src/editor/shell/CanvasLibraryDropTarget.tsx
+import { jsx as jsx8, 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));
+}
+function scrollableAncestors(start) {
+  const result = [];
+  let node = start;
+  while (node) {
+    const style = window.getComputedStyle(node);
+    if (["auto", "scroll", "overlay"].includes(style.overflowY) && node.scrollHeight > node.clientHeight) result.push(node);
+    node = node.parentElement;
+  }
+  return result;
+}
+function scrollDelta(pointerY, rect, elapsedMs) {
+  const top = Math.max(0, rect.top);
+  const bottom = Math.min(window.innerHeight, rect.bottom);
+  const height = bottom - top;
+  if (height <= 0 || pointerY < top || pointerY > bottom) return 0;
+  const edge = Math.min(96, Math.max(36, height * 0.24));
+  const speed = 900;
+  if (pointerY < top + edge) return -speed * Math.min(1, (top + edge - pointerY) / edge) * elapsedMs / 1e3;
+  if (pointerY > bottom - edge) return speed * Math.min(1, (pointerY - (bottom - edge)) / edge) * elapsedMs / 1e3;
+  return 0;
+}
+function scrollElement(element, delta) {
+  const canScroll = delta < 0 ? element.scrollTop > 0 : element.scrollTop < element.scrollHeight - element.clientHeight;
+  if (!delta || !canScroll) return false;
+  if (typeof element.scrollBy === "function") element.scrollBy({ top: delta, behavior: "auto" });
+  else element.scrollTop += 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 });
+  useEffect3(() => {
+    callbacks.current = { onDrop, onCancel };
+  }, [onDrop, onCancel]);
+  const orderedBlocks = uniqueBlocks(blocks);
+  const [preview, setPreview] = useState3(null);
+  const english = adminLocale?.toLowerCase().startsWith("en") ?? false;
+  const stopAutoScroll = () => {
+    if (animationFrame.current !== null) window.cancelAnimationFrame(animationFrame.current);
+    animationFrame.current = null;
+    lastFrameTime.current = null;
+  };
+  const clear = (cancel) => {
+    stopAutoScroll();
+    dragging.current = false;
+    latestPreview.current = null;
+    setPreview(null);
+    if (cancel) {
+      completed.current = true;
+      callbacks.current.onCancel();
+    }
+  };
+  const calculatePreview = (clientY) => {
+    const target = targetRef.current;
+    const frame = frameRef.current;
+    if (!target || !frame) return null;
+    const targetRect = target.getBoundingClientRect();
+    const frameRect = frame.getBoundingClientRect();
+    const iframe = frame.querySelector("iframe");
+    const iframeDocument = iframe?.contentDocument;
+    const root = iframeDocument ?? frame;
+    const allowed = new Set(orderedBlocks.map((block) => block.id));
+    const byId = /* @__PURE__ */ new Map();
+    const iframeRect = iframeDocument ? iframe?.getBoundingClientRect() : void 0;
+    const scaleY = iframe && iframeRect && iframeRect.height > 0 && iframe.clientHeight > 0 ? iframeRect.height / iframe.clientHeight : 1;
+    const elements = Array.from(root.querySelectorAll("[data-page-document-block-id], [data-puck-dnd]"));
+    for (const element of elements) {
+      const id = element.dataset.pageDocumentBlockId ?? element.dataset.puckDnd;
+      if (!id || !allowed.has(id) || byId.has(id) || element.closest('[aria-hidden="true"], [class*="DragOverlay"]')) continue;
+      const rect = element.getBoundingClientRect();
+      byId.set(id, { id, top: iframeRect ? iframeRect.top + rect.top * scaleY : rect.top, height: iframeRect ? rect.height * scaleY : rect.height });
+    }
+    const candidates = orderedBlocks.flatMap((block) => byId.get(block.id) ?? []);
+    const beforeId = nearestBlockIdAtY(candidates, clientY);
+    const markerCandidate = beforeId ? candidates.find((candidate) => candidate.id === beforeId) : candidates.at(-1);
+    const markerViewportTop = markerCandidate ? beforeId ? markerCandidate.top : markerCandidate.top + markerCandidate.height : Math.min(frameRect.bottom, Math.max(frameRect.top, clientY));
+    return { beforeId, markerTop: Math.max(0, markerViewportTop - targetRect.top), markerLeft: Math.max(0, frameRect.left - targetRect.left), markerWidth: frameRect.width };
+  };
+  const updatePreview = (clientY) => {
+    pointerY.current = clientY;
+    const next = calculatePreview(clientY);
+    const previous = latestPreview.current;
+    latestPreview.current = next;
+    if (previous?.beforeId !== next?.beforeId || previous?.markerTop !== next?.markerTop || previous?.markerLeft !== next?.markerLeft || previous?.markerWidth !== next?.markerWidth) setPreview(next);
+  };
+  const autoScroll = (timestamp) => {
+    if (!dragging.current) return;
+    const elapsedMs = Math.min(64, Math.max(0, timestamp - (lastFrameTime.current ?? timestamp)));
+    lastFrameTime.current = timestamp;
+    const stage = targetRef.current?.parentElement;
+    if (stage) {
+      let scrolled = false;
+      for (const ancestor of scrollableAncestors(stage)) {
+        const delta = scrollDelta(pointerY.current, ancestor.getBoundingClientRect(), elapsedMs);
+        if (scrollElement(ancestor, delta)) {
+          scrolled = true;
+          break;
+        }
+      }
+      const documentScroller = document.scrollingElement;
+      if (!scrolled && documentScroller) {
+        const viewport = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+        scrollElement(documentScroller, scrollDelta(pointerY.current, viewport, elapsedMs));
+      }
+      updatePreview(pointerY.current);
+    }
+    animationFrame.current = window.requestAnimationFrame(autoScroll);
+  };
+  const startAutoScroll = () => {
+    if (animationFrame.current === null) animationFrame.current = window.requestAnimationFrame(autoScroll);
+  };
+  useEffect3(() => {
+    const cancelOutside = (event) => {
+      if (event.type === "drop" && targetRef.current?.contains(event.target)) return;
+      if (!completed.current) clear(true);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" && !completed.current) clear(true);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("dragend", cancelOutside, true);
+    document.addEventListener("drop", cancelOutside, true);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("dragend", cancelOutside, true);
+      document.removeEventListener("drop", cancelOutside, true);
+      stopAutoScroll();
+    };
+  }, []);
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = "copy";
+    completed.current = false;
+    dragging.current = true;
+    updatePreview(event.clientY);
+    startAutoScroll();
+  };
+  const handleDragLeave = (event) => {
+    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) clear(false);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const next = latestPreview.current ?? calculatePreview(event.clientY);
+    completed.current = true;
+    clear(false);
+    callbacks.current.onDrop(next?.beforeId);
+  };
+  const position = preview?.beforeId ? orderedBlocks.findIndex((block) => block.id === preview.beforeId) + 1 : orderedBlocks.length + 1;
+  const hint = english ? `Release to add ${label}${preview ? ` \xB7 position ${position}` : ""}` : `\u677E\u5F00\u4EE5\u6DFB\u52A0 ${label}${preview ? ` \xB7 \u7B2C ${position} \u4E2A\u4F4D\u7F6E` : ""}`;
+  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
+  ] });
 }
 
 // src/editor/shell/PageDocumentEditorShell.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function scrollCanvasBlockIntoView(blockId, frame) {
+  const selector = `[data-page-document-block-id="${CSS.escape(blockId)}"]`;
+  const scroll = () => {
+    const iframe = frame?.querySelector("iframe");
+    const element = iframe?.contentDocument?.querySelector(selector) ?? document.querySelector(selector);
+    element?.scrollIntoView({ block: "start", inline: "nearest" });
+  };
+  if (typeof requestAnimationFrame === "function") requestAnimationFrame(scroll);
+  else scroll();
+}
 var deviceLabels2 = { desktop: "desktop", tablet: "tablet", mobile: "mobile" };
 function blockLabel(block, registry) {
   return blockTypeLabel(block.type, registry);
@@ -944,12 +1159,12 @@ function blockTypeLabel(type, registry) {
   if (type === "core.image") return "\u56FE\u7247";
   return registry?.getBlock(type)?.label ?? type;
 }
-function validateDocumentBlocks(document, registry) {
-  return registry ? validatePageDocumentWithRegistry(document, registry) : [];
+function validateDocumentBlocks(document2, registry) {
+  return registry ? validatePageDocumentWithRegistry(document2, registry) : [];
 }
 function useEditorSession(adapter, pageId) {
-  const [managed, setManaged] = useState3(() => adapter ? { state: "acquiring" } : { state: "active" });
-  useEffect3(() => {
+  const [managed, setManaged] = useState4(() => adapter ? { state: "acquiring" } : { state: "active" });
+  useEffect4(() => {
     let cancelled = false;
     let session;
     let heartbeatTimer;
@@ -991,31 +1206,31 @@ function useEditorSession(adapter, pageId) {
 function PageDocumentEditorShell(props) {
   const { sessionAdapter, initialDocument, onSessionStateChange } = props;
   const managedSession = useEditorSession(sessionAdapter, initialDocument.pageId);
-  useEffect3(() => {
+  useEffect4(() => {
     onSessionStateChange?.(managedSession.state);
   }, [managedSession.state, onSessionStateChange]);
-  return /* @__PURE__ */ jsx7(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__ */ jsx7(PageDocumentEditor, { ...props }) });
+  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 }) });
 }
 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 }) {
   const editor = useEditorContext();
-  const editorRef = useRef4(editor);
+  const editorRef = useRef5(editor);
   useLayoutEffect(() => {
     editorRef.current = editor;
   }, [editor]);
-  const [blockView, setBlockView] = useState3("blocks");
-  const [leftRailOpen, setLeftRailOpen] = useState3(true);
-  const [rightPanelOpen, setRightPanelOpen] = useState3(true);
-  const [draggingLibraryType, setDraggingLibraryType] = useState3(null);
-  const canvasFrameRef = useRef4(null);
-  const [canvasMutationVersion, setCanvasMutationVersion] = useState3(0);
-  const [canvasResetVersion, setCanvasResetVersion] = useState3(0);
-  const [request, setRequest] = useState3("idle");
-  const [notice, setNotice] = useState3(null);
-  const [draftRevision, setDraftRevision] = useState3(initialDraftRevision);
-  const [isOnline, setIsOnline] = useState3(() => typeof navigator === "undefined" || navigator.onLine);
-  const [saveState, setSaveState] = useState3("saved");
-  const [zoom, setZoom] = useState3("auto");
-  const [confirmBack, setConfirmBack] = useState3(false);
+  const [blockView, setBlockView] = useState4("blocks");
+  const [leftRailOpen, setLeftRailOpen] = useState4(true);
+  const [rightPanelOpen, setRightPanelOpen] = useState4(true);
+  const [draggingLibraryType, setDraggingLibraryType] = useState4(null);
+  const canvasFrameRef = useRef5(null);
+  const [canvasMutationVersion, setCanvasMutationVersion] = useState4(0);
+  const [canvasResetVersion, setCanvasResetVersion] = useState4(0);
+  const [request, setRequest] = useState4("idle");
+  const [notice, setNotice] = useState4(null);
+  const [draftRevision, setDraftRevision] = useState4(initialDraftRevision);
+  const [isOnline, setIsOnline] = useState4(() => typeof navigator === "undefined" || navigator.onLine);
+  const [saveState, setSaveState] = useState4("saved");
+  const [zoom, setZoom] = useState4("auto");
+  const [confirmBack, setConfirmBack] = useState4(false);
   const i18n = createAdminI18n(adminLocale);
   const engineData = useMemo2(() => toEngineData(editor.document, registry), [editor.document, registry]);
   const canvasThemeStyle = useMemo2(() => {
@@ -1036,7 +1251,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
     insert: editorRef.current.canAddBlock(type)
   }), []);
   const config = useMemo2(() => createPageDocumentPuckConfig(confirmCanvasSelection, updateFromCanvasInput, selectedBlockId, registry, resolveBlockPermissions), [confirmCanvasSelection, registry, resolveBlockPermissions, selectedBlockId, updateFromCanvasInput]);
-  useEffect3(() => {
+  useEffect4(() => {
     const online = () => setIsOnline(true);
     const offline = () => setIsOnline(false);
     window.addEventListener("online", online);
@@ -1054,14 +1269,14 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
       setSaveState("offline");
       return;
     }
-    const document = editor.document;
+    const document2 = editor.document;
     setRequest("saving");
     setSaveState("saving");
     setNotice(null);
     try {
-      const result = draftPersistence ? await draftPersistence.saveDraft({ document, expectedRevision: draftRevision, session: editor.session }) : await onSave?.(document);
+      const result = draftPersistence ? await draftPersistence.saveDraft({ document: document2, expectedRevision: draftRevision, session: editor.session }) : await onSave?.(document2);
       if (result?.revision !== void 0) setDraftRevision(result.revision);
-      editor.markSaved(document);
+      editor.markSaved(document2);
       setSaveState("saved");
     } catch {
       setNotice("saveFailed");
@@ -1070,7 +1285,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
       setRequest("idle");
     }
   }, [canPersistDraft, draftPersistence, draftRevision, editor, isOnline, onSave, request, validationIssues.length]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!autoSave || !canPersistDraft || !editor.isDirty || resolvedSaveState !== "dirty" && resolvedSaveState !== "failed" || !isOnline || request !== "idle" || validationIssues.length > 0 || editor.sessionState !== "active") return;
     const timer = window.setTimeout(() => {
       void save();
@@ -1079,13 +1294,13 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
   }, [autoSave, autoSaveDelayMs, canPersistDraft, editor.isDirty, editor.sessionState, isOnline, request, resolvedSaveState, save, validationIssues.length]);
   const publish = async () => {
     if (!publishAction && !onPublish || request !== "idle" || validationIssues.length > 0 || !isOnline) return;
-    const document = editor.document;
+    const document2 = editor.document;
     setRequest("publishing");
     setNotice(null);
     try {
-      if (publishAction) await publishAction.publish({ document, expectedRevision: draftRevision, session: editor.session, validationIssues });
-      else await onPublish?.(document);
-      editor.markSaved(document);
+      if (publishAction) await publishAction.publish({ document: document2, expectedRevision: draftRevision, session: editor.session, validationIssues });
+      else await onPublish?.(document2);
+      editor.markSaved(document2);
       setSaveState("saved");
       setNotice("published");
     } catch {
@@ -1094,40 +1309,14 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
       setRequest("idle");
     }
   };
-  if (editor.loadState !== "ready" && editor.loadState !== "success") return /* @__PURE__ */ jsx7(EditorStatus, { state: editor.loadState });
-  if (editor.sessionState !== "active") return /* @__PURE__ */ jsx7(EditorSessionStatus, { state: editor.sessionState, message: editor.sessionMessage });
+  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 });
   const allBlockTypes = ["core.text", "core.image", ...registry?.blocks.map((block) => block.type) ?? []];
   const blockTypes = availableBlockTypes ? allBlockTypes.filter((type) => availableBlockTypes.includes(type)) : allBlockTypes;
   const addFromLibrary = (type, beforeId) => {
     const id = editor.addBlock(type, beforeId);
     if (id) editor.requestCanvasSelection(id);
   };
-  const getDropBeforeId = (clientY) => {
-    const frame = canvasFrameRef.current;
-    if (!frame) return void 0;
-    const iframe2 = frame.querySelector("iframe");
-    const root = iframe2?.contentDocument ?? frame;
-    const offsetTop = iframe2?.getBoundingClientRect().top ?? 0;
-    const elements = Array.from(root.querySelectorAll("[data-page-document-block-id]"));
-    const puckElements = elements.length > 0 ? elements : Array.from(root.querySelectorAll("[data-puck-dnd]"));
-    const blockElements = puckElements.length > 0 ? puckElements : Array.from(window.document.querySelectorAll("[data-page-document-block-id], [data-puck-dnd]"));
-    const candidates = blockElements.map((element) => ({
-      id: element.dataset.pageDocumentBlockId ?? element.dataset.puckDnd,
-      top: element.getBoundingClientRect().top,
-      height: element.getBoundingClientRect().height
-    })).filter((item) => typeof item.id === "string");
-    const nearestId = nearestBlockIdAtY(candidates, clientY - offsetTop);
-    if (nearestId || candidates.length > 0) return nearestId;
-    const rect = frame.getBoundingClientRect();
-    if (rect.height <= 0) return void 0;
-    return blockIdAtRelativeY(editor.document.blocks.map((block) => block.id), (clientY - rect.top) / rect.height);
-  };
-  const dropFromLibrary = (event) => {
-    event.preventDefault();
-    const type = event.dataTransfer.getData("application/x-page-document-block") || draggingLibraryType;
-    if (type && blockTypes.includes(type)) addFromLibrary(type, getDropBeforeId(event.clientY));
-    setDraggingLibraryType(null);
-  };
   const cancelLibraryDrop = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -1141,58 +1330,63 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
     else onBack();
   };
   const dismissPublishedNotice = () => setNotice((current) => current === "published" ? null : current);
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(Puck2, { config, data: engineData, iframe: { enabled: iframe }, onChange: (data) => {
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(Puck2, { config, data: engineData, iframe: { enabled: iframe }, dnd: { behavior: "static" }, overrides: { actionBar: CanvasSelectionActionBar }, onChange: (data) => {
       if (!editor.updateFromCanvas(fromEngineData(data, editor.document, registry))) setCanvasResetVersion((version) => version + 1);
-    }, children: /* @__PURE__ */ jsxs5(Puck2.Layout, { children: [
-      /* @__PURE__ */ jsx7(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion, canvasResetVersion, permissionsVersion: `${editor.isEditable}:${editor.document.blocks.map((block) => `${block.id}:${block.type}`).join("|")}` }),
-      /* @__PURE__ */ jsxs5("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__ */ jsx7("header", { className: "pb-header", children: /* @__PURE__ */ jsxs5("div", { className: "pb-header-content", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "pb-header-title-group", children: [
-            onBack ? /* @__PURE__ */ jsx7(Button2, { variant: "tertiary", onClick: requestBack, children: i18n.t("back") }) : null,
-            /* @__PURE__ */ jsxs5("div", { className: "pb-page-title", children: [
-              /* @__PURE__ */ jsx7(Text3, { as: "h1", variant: "headingSm", children: editor.document.settings.seoTitle ?? editor.document.pageId }),
-              pageStatus ? /* @__PURE__ */ jsx7(PageStatusCard, { status: pageStatus, sessionState: editor.sessionState }) : null
+    }, 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__ */ 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__ */ jsxs7("div", { className: "pb-header-title-group", children: [
+            onBack ? /* @__PURE__ */ jsx9(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__ */ jsx7("div", { className: "pb-header-controls", children: /* @__PURE__ */ jsxs5("div", { className: "pb-header-device-toolbar", children: [
-            /* @__PURE__ */ jsx7(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx7(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }),
-            /* @__PURE__ */ jsx7("div", { className: "pb-zoom-control", children: /* @__PURE__ */ jsx7(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-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__ */ jsx7("div", { className: "pb-header-actions", children: /* @__PURE__ */ jsxs5(InlineStack3, { gap: "150", blockAlign: "center", wrap: true, children: [
-            /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
-            /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo }),
-            resolvedSaveState === "saved" ? null : /* @__PURE__ */ jsx7(Badge3, { tone: saveBadgeTone, children: saveBadgeLabel }),
-            onHistory ? /* @__PURE__ */ jsx7("span", { "data-editor-history": "", children: /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle", onClick: () => onHistory({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("history") }) }) : null,
-            onPreview ? /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle" || !isOnline, onClick: () => void onPreview({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("preview") }) : null,
-            onAddToStore ? /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle" || pageStatus?.publicationStatus === "unpublished", onClick: () => void onAddToStore({ document: editor.document, session: editor.session }), children: i18n.t("addToStore") }) : null,
-            /* @__PURE__ */ jsx7(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__ */ 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") })
           ] }) })
         ] }) }),
-        editor.loadState === "success" ? /* @__PURE__ */ jsx7(Banner, { tone: "success", children: i18n.t("success") }) : null,
-        notice && notice !== "published" ? /* @__PURE__ */ jsx7("div", { className: `pb-editor-notice pb-editor-notice--${notice}`, "data-testid": "editor-notice", "data-notice": notice, children: /* @__PURE__ */ jsx7(Banner, { tone: "critical", children: i18n.t(notice) }) }) : null,
-        validationIssues.length > 0 ? /* @__PURE__ */ jsx7(Banner, { tone: "critical", title: "\u533A\u5757\u5C5E\u6027\u672A\u901A\u8FC7\u6821\u9A8C", children: /* @__PURE__ */ jsx7("ul", { children: validationIssues.map((issue) => /* @__PURE__ */ jsxs5("li", { children: [
+        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: [
           issue.path,
           ": ",
           issue.message
         ] }, `${issue.path}-${issue.message}`)) }) }) : null,
-        /* @__PURE__ */ jsxs5("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__ */ jsxs5("nav", { className: "pb-tool-rail", "aria-label": "\u7F16\u8F91\u5668\u5DE5\u5177", children: [
-            /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks" && leftRailOpen, variant: "tertiary", onClick: () => {
+        /* @__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: () => {
               setBlockView("blocks");
               setLeftRailOpen(true);
             } }),
-            /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline" && leftRailOpen, variant: "tertiary", onClick: () => {
+            /* @__PURE__ */ jsx9(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline" && leftRailOpen, variant: "tertiary", onClick: () => {
               setBlockView("outline");
               setLeftRailOpen(true);
             } })
           ] }),
-          /* @__PURE__ */ jsxs5("aside", { className: `pb-left-panel${leftRailOpen ? "" : " pb-panel--closed"}`, "aria-label": "PageDocument \u533A\u5757", children: [
-            /* @__PURE__ */ jsxs5(InlineStack3, { align: "space-between", blockAlign: "center", children: [
-              /* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }),
-              /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("collapseLeft"), icon: XIcon2, variant: "tertiary", onClick: () => setLeftRailOpen(false) })
+          /* @__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__ */ jsx7("div", { className: "pb-block-list", "data-testid": "blocks-view", "aria-label": "\u533A\u5757\u7C7B\u578B\u5E93", role: "list", onDrop: cancelLibraryDrop, children: blockTypes.map((type) => /* @__PURE__ */ jsxs5("div", { className: `pb-document-block-row pb-document-block-row--library ${editor.selectedBlock?.type === type ? "pb-document-block-row--selected" : ""}`, "data-block-type": type, "data-selected": editor.selectedBlock?.type === type, role: "listitem", draggable: editor.canAddBlock(type), "aria-disabled": !editor.canAddBlock(type), "aria-label": `${blockTypeLabel(type, registry)}\uFF0C\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0${editor.selectedBlock?.type === type ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onDragStart: (event) => {
+            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: blockTypes.map((type) => /* @__PURE__ */ jsxs7("div", { className: `pb-document-block-row pb-document-block-row--library ${editor.selectedBlock?.type === type ? "pb-document-block-row--selected" : ""}`, "data-block-type": type, "data-selected": editor.selectedBlock?.type === type, role: "listitem", draggable: editor.canAddBlock(type), "aria-disabled": !editor.canAddBlock(type), "aria-label": `${blockTypeLabel(type, registry)}\uFF0C\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0${editor.selectedBlock?.type === type ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onClick: () => {
+              const block = editor.document.blocks.find((item) => item.type === type);
+              if (!block) return;
+              editor.requestCanvasSelection(block.id);
+              scrollCanvasBlockIntoView(block.id, canvasFrameRef.current);
+            }, onDragStart: (event) => {
               if (!editor.canAddBlock(type)) {
                 event.preventDefault();
                 return;
@@ -1201,63 +1395,68 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
               event.dataTransfer.effectAllowed = "copy";
               setDraggingLibraryType(type);
             }, onDragEnd: () => setDraggingLibraryType(null), children: [
-              /* @__PURE__ */ jsxs5("span", { className: "pb-library-block-title", children: [
-                /* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
-                /* @__PURE__ */ jsx7("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx7(DragHandleIcon2, {}) })
+              /* @__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__ */ jsx7(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: type })
-            ] }, type)) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx7(Text3, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx7("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs5("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), children: [
-              /* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockLabel(block, registry) }),
-              /* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
+              /* @__PURE__ */ jsx9(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.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 })
             ] }, block.id)) })
           ] }),
-          /* @__PURE__ */ jsxs5("main", { className: "pb-canvas-area", children: [
-            /* @__PURE__ */ jsxs5("div", { className: "pb-canvas-stage", children: [
-              /* @__PURE__ */ jsx7("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__ */ jsx7(Puck2.Preview, {}) }),
-              draggingLibraryType ? /* @__PURE__ */ jsxs5("div", { className: "pb-canvas-drop-target", "data-testid": "canvas-drop-target", role: "region", "aria-label": "\u533A\u5757\u6295\u653E\u533A", onDragOver: (event) => event.preventDefault(), onDrop: dropFromLibrary, children: [
-                "\u677E\u5F00\u4EE5\u6DFB\u52A0 ",
-                blockTypeLabel(draggingLibraryType, registry)
-              ] }) : null,
-              editor.selectedBlock ? /* @__PURE__ */ jsxs5("div", { className: "pb-canvas-overlay", "aria-label": `\u5DF2\u9009\u62E9 ${blockLabel(editor.selectedBlock, registry)}`, children: [
-                /* @__PURE__ */ jsx7("span", { children: blockLabel(editor.selectedBlock, registry) }),
-                /* @__PURE__ */ jsx7("span", { children: "Selected" })
-              ] }) : null
+          /* @__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) => {
+                addFromLibrary(draggingLibraryType, beforeId);
+                setDraggingLibraryType(null);
+              }, onCancel: () => setDraggingLibraryType(null) }) : null
             ] }),
-            !leftRailOpen || !rightPanelOpen ? /* @__PURE__ */ jsxs5("div", { className: "pb-collapsed-actions", children: [
-              !leftRailOpen ? /* @__PURE__ */ jsx7(Button2, { onClick: () => setLeftRailOpen(true), children: i18n.t("expandLeft") }) : null,
-              !rightPanelOpen ? /* @__PURE__ */ jsx7(Button2, { onClick: () => setRightPanelOpen(true), children: i18n.t("expandRight") }) : 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
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsxs5("aside", { className: `pb-right-panel${rightPanelOpen ? "" : " pb-panel--closed"}`, "aria-label": "PageDocument \u5C5E\u6027", children: [
-            /* @__PURE__ */ jsxs5(InlineStack3, { align: "space-between", blockAlign: "center", children: [
-              /* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
-              /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("collapseRight"), icon: XIcon2, variant: "tertiary", onClick: () => setRightPanelOpen(false) })
+          /* @__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) })
             ] }),
-            editor.selectedBlock ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-              /* @__PURE__ */ jsx7(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__ */ jsx7(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__ */ jsx7(Text3, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
+            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") })
           ] })
         ] }),
-        editor.pendingDeleteBlock ? /* @__PURE__ */ jsx7(DeleteConfirmation, { block: editor.pendingDeleteBlock, config: deleteConfirmation, i18n, onCancel: editor.cancelDeleteBlock, onConfirm: editor.confirmDeleteBlock }) : null,
-        confirmBack ? /* @__PURE__ */ jsx7(LeaveConfirmation, { i18n, onCancel: () => setConfirmBack(false), onConfirm: () => {
+        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: () => {
           setConfirmBack(false);
           onBack?.();
         } }) : null
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx7("div", { className: "pb-toast-host", ...notice === "published" ? { "data-testid": "editor-notice", "data-notice": "published" } : {}, children: /* @__PURE__ */ jsx7(Frame, { children: notice === "published" ? /* @__PURE__ */ jsx7(Toast, { content: i18n.t("publishSuccessTitle"), onDismiss: dismissPublishedNotice }) : 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 }) })
   ] });
 }
+function CanvasSelectionActionBar({ label, children, parentAction }) {
+  void label;
+  void children;
+  void parentAction;
+  return /* @__PURE__ */ jsx9(Fragment2, {});
+}
 function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion, canvasResetVersion, permissionsVersion }) {
   const puck = usePuck();
-  const lastSelectedId = useRef4(null);
-  const lastSyncedData = useRef4(null);
-  const lastCanvasMutationVersion = useRef4(0);
-  const lastCanvasResetVersion = useRef4(0);
+  const lastSelectedId = useRef5(null);
+  const lastSyncedData = useRef5(null);
+  const lastCanvasMutationVersion = useRef5(0);
+  const lastCanvasResetVersion = useRef5(0);
   const serializedData = JSON.stringify(data);
   const refreshPermissions = puck.refreshPermissions;
-  useEffect3(() => {
+  useEffect4(() => {
     const forceReset = canvasResetVersion > lastCanvasResetVersion.current;
     if (lastSyncedData.current === serializedData && !forceReset) return;
     lastSyncedData.current = serializedData;
@@ -1268,16 +1467,17 @@ function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canva
     }
     puck.dispatch({ type: "setData", data });
   }, [canvasMutationVersion, canvasResetVersion, data, puck, serializedData]);
-  useEffect3(() => {
+  useEffect4(() => {
     refreshPermissions?.({}, true);
   }, [permissionsVersion, refreshPermissions]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!requestedBlockId) return;
     const selector = puck.getSelectorForId(requestedBlockId);
     if (selector) puck.dispatch({ type: "setUi", ui: { itemSelector: selector } });
+    scrollCanvasBlockIntoView(requestedBlockId);
   }, [puck, requestedBlockId]);
   const selectedId = typeof puck.selectedItem?.props.id === "string" ? puck.selectedItem.props.id : null;
-  useEffect3(() => {
+  useEffect4(() => {
     if (selectedId && lastSelectedId.current !== selectedId) {
       lastSelectedId.current = selectedId;
       onCanvasSelected(selectedId);
@@ -1289,32 +1489,32 @@ 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__ */ jsx7("div", { className: "pb-editor-status", "data-testid": "page-document-editor-state", "data-editor-state": state, children: /* @__PURE__ */ jsx7(Banner, { tone, title: message, children: state === "disabled" ? i18n.t("disabled") : message }) });
+  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 }) });
 }
 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__ */ jsx7("div", { className: "pb-editor-status", "data-testid": "page-document-editor-session-state", "data-editor-session-state": state, children: /* @__PURE__ */ jsx7(Banner, { tone, title, children: message ?? title }) });
+  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 }) });
 }
 function InspectorSection({ title, children, defaultOpen = true }) {
-  return /* @__PURE__ */ jsxs5("details", { className: "pb-inspector-section", open: defaultOpen, children: [
-    /* @__PURE__ */ jsxs5("summary", { children: [
-      /* @__PURE__ */ jsx7("span", { children: title }),
-      /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2304" })
+  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__ */ jsx7("div", { className: "pb-inspector-section__body", children })
+    /* @__PURE__ */ jsx9("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__ */ jsx7("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__ */ jsx9("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__ */ jsx7(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__ */ 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 });
   if (maxLength === void 0) return field;
-  return /* @__PURE__ */ jsxs5("div", { className: "pb-inspector-field__limited", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "pb-inspector-field__limited", children: [
     field,
-    /* @__PURE__ */ jsxs5("span", { className: "pb-inspector-field__limit", "aria-label": `Limit ${maxLength}`, children: [
+    /* @__PURE__ */ jsxs7("span", { className: "pb-inspector-field__limit", "aria-label": `Limit ${maxLength}`, children: [
       length,
       "/",
       maxLength
@@ -1322,20 +1522,20 @@ function InspectorTextControl({ label, value, control, maxLength, disabled, onCh
   ] });
 }
 function InspectorAssetControl({ value, disabled, picker, pageId, blockId, i18n, onChange }) {
-  const [busy, setBusy] = useState3(false);
-  const [error, setError] = useState3(null);
-  const active = useRef4(true);
-  useEffect3(() => {
+  const [busy, setBusy] = useState4(false);
+  const [error, setError] = useState4(null);
+  const active = useRef5(true);
+  useEffect4(() => {
     active.current = !disabled;
     return () => {
       active.current = false;
     };
   }, [disabled]);
   const url = typeof value === "string" && validateFieldValue({ field: "", control: "asset" }, value).length === 0 ? value : "";
-  return /* @__PURE__ */ jsxs5("div", { className: "pb-asset-picker", "data-testid": "asset-picker", children: [
-    url ? /* @__PURE__ */ jsx7("img", { src: url, alt: "", className: "pb-asset-picker__preview" }) : /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("emptyAsset") }),
-    url ? /* @__PURE__ */ jsx7(Button2, { fullWidth: true, variant: "tertiary", disabled: disabled || busy, onClick: () => onChange(""), children: i18n.t("removeAsset") }) : null,
-    /* @__PURE__ */ jsx7(Button2, { fullWidth: true, disabled: disabled || busy || !picker, onClick: () => void (async () => {
+  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 () => {
       if (!picker) return;
       setBusy(true);
       setError(null);
@@ -1351,20 +1551,20 @@ function InspectorAssetControl({ value, disabled, picker, pageId, blockId, i18n,
         setBusy(false);
       }
     })(), children: busy ? i18n.t("selectingAsset") : i18n.t("selectAsset") }),
-    error ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
+    error ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
   ] });
 }
 function InspectorProductsControl({ value, disabled, picker, pageId, blockId, i18n, onChange }) {
   const products = parseProductReferences(value);
-  const [busy, setBusy] = useState3(false);
-  const [error, setError] = useState3(null);
+  const [busy, setBusy] = useState4(false);
+  const [error, setError] = useState4(null);
   const preview = products.slice(0, 4);
-  return /* @__PURE__ */ jsxs5("div", { className: "pb-product-picker", "data-testid": "product-picker", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "pb-product-picker__summary", children: [
-      preview.length ? /* @__PURE__ */ jsx7("span", { className: "pb-product-picker__thumbs", "aria-hidden": "true", children: preview.map((product, index) => /* @__PURE__ */ jsx7("span", { className: "pb-product-picker__thumb", style: { zIndex: preview.length - index }, children: product.imageUrl ? /* @__PURE__ */ jsx7("img", { src: product.imageUrl, alt: "" }) : /* @__PURE__ */ jsx7("span", { className: "pb-product-picker__thumb-fallback" }) }, product.id)) }) : null,
-      /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", children: products.length ? `${products.length} ${i18n.t("productCountSuffix")}` : i18n.t("emptyProducts") })
+  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") })
     ] }),
-    /* @__PURE__ */ jsx7(Button2, { fullWidth: true, icon: ProductIcon, variant: "secondary", disabled: disabled || busy || !picker, onClick: () => void (async () => {
+    /* @__PURE__ */ jsx9(Button2, { fullWidth: true, icon: ProductIcon, variant: "secondary", disabled: disabled || busy || !picker, onClick: () => void (async () => {
       if (!picker) return;
       setBusy(true);
       setError(null);
@@ -1377,50 +1577,50 @@ function InspectorProductsControl({ value, disabled, picker, pageId, blockId, i1
         setBusy(false);
       }
     })(), children: busy ? i18n.t("selectingProducts") : i18n.t("selectProducts") }),
-    error ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
+    error ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
   ] });
 }
 function InspectorField({ name, field, value, registry, disabled, assetPicker, productPicker, pageId, blockId, i18n, onChange }) {
   const label = field.label ?? name;
   const issues = validateFieldValue(field, value);
   const Field = registry?.getField(field.field)?.component;
-  return /* @__PURE__ */ jsxs5("div", { className: "pb-inspector-field", "data-control": field.control ?? "custom", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "pb-inspector-field__heading", children: [
-      /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", fontWeight: "semibold", children: label }),
-      field.description ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: field.description }) : null
+  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
     ] }),
-    field.control === "products" ? /* @__PURE__ */ jsx7(InspectorProductsControl, { value, disabled, picker: productPicker, pageId, blockId, i18n, onChange }) : field.control === "asset" ? /* @__PURE__ */ jsx7(InspectorAssetControl, { value, disabled, picker: assetPicker, pageId, blockId, i18n, onChange }) : field.control ? /* @__PURE__ */ jsx7(InspectorTextControl, { label, value, control: field.control, maxLength: field.validation?.maxLength, disabled, onChange: (next) => onChange(next) }) : Field ? /* @__PURE__ */ jsx7(Field, { value, onChange }) : null,
-    issues.map((issue) => /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: issue.message }, issue.message))
+    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))
   ] });
 }
 function InspectorActions({ block, canDuplicate, canDelete, canMove, canMoveUp, canMoveDown, i18n, onDuplicate, onDelete, onMove }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "pb-inspector-actions", "aria-label": `Actions for ${block.id}`, children: [
-    /* @__PURE__ */ jsxs5(ButtonGroup2, { children: [
-      /* @__PURE__ */ jsx7(Button2, { disabled: !canMove || !canMoveUp, onClick: () => onMove(-1), children: i18n.t("moveUp") }),
-      /* @__PURE__ */ jsx7(Button2, { disabled: !canMove || !canMoveDown, onClick: () => onMove(1), children: i18n.t("moveDown") }),
-      /* @__PURE__ */ jsx7(Button2, { disabled: !canDuplicate, accessibilityLabel: canDuplicate ? i18n.t("duplicate") : i18n.t("duplicateUnavailable"), onClick: onDuplicate, children: i18n.t("duplicate") }),
-      /* @__PURE__ */ jsx7(Button2, { disabled: !canDelete, tone: "critical", onClick: onDelete, children: i18n.t("remove") })
+  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") })
     ] }),
-    !canDuplicate ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("duplicateUnavailable") }) : null
+    !canDuplicate ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("duplicateUnavailable") }) : null
   ] });
 }
 function DeleteConfirmation({ block, config, i18n, onCancel, onConfirm }) {
-  return /* @__PURE__ */ jsx7("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs5("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-delete-confirmation-title", children: [
-    /* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingMd", id: "pb-delete-confirmation-title", children: config?.title ?? i18n.t("confirmDeleteTitle") }),
-    /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodyMd", children: config?.message?.(block) ?? i18n.t("confirmDeleteMessage") }),
-    /* @__PURE__ */ jsxs5(ButtonGroup2, { children: [
-      /* @__PURE__ */ jsx7(Button2, { onClick: onCancel, children: config?.cancelLabel ?? i18n.t("cancel") }),
-      /* @__PURE__ */ jsx7(Button2, { tone: "critical", onClick: onConfirm, children: config?.confirmLabel ?? i18n.t("confirm") })
+  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") }),
+    /* @__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") })
     ] })
   ] }) });
 }
 function LeaveConfirmation({ i18n, onCancel, onConfirm }) {
-  return /* @__PURE__ */ jsx7("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs5("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-leave-confirmation-title", children: [
-    /* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingMd", id: "pb-leave-confirmation-title", children: i18n.t("confirmLeaveTitle") }),
-    /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodyMd", children: i18n.t("leaveWarning") }),
-    /* @__PURE__ */ jsxs5(ButtonGroup2, { children: [
-      /* @__PURE__ */ jsx7(Button2, { onClick: onCancel, children: i18n.t("cancel") }),
-      /* @__PURE__ */ jsx7(Button2, { tone: "critical", onClick: onConfirm, children: i18n.t("leave") })
+  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") }),
+    /* @__PURE__ */ jsxs7(ButtonGroup2, { children: [
+      /* @__PURE__ */ jsx9(Button2, { onClick: onCancel, children: i18n.t("cancel") }),
+      /* @__PURE__ */ jsx9(Button2, { tone: "critical", onClick: onConfirm, children: i18n.t("leave") })
     ] })
   ] }) });
 }
@@ -1432,8 +1632,8 @@ function inspectorFieldConfig(name, field) {
 }
 var appearanceTokens = [["color.primary", "\u4E3B\u8272"], ["color.surface", "\u8868\u9762\u8272"], ["radius", "\u5706\u89D2"], ["spacing", "\u95F4\u8DDD"]];
 function DocumentInspector({ settings, pageId, assetPicker, productPicker, i18n, block, registry, disabled, appearanceControls, onChange, onPresentationChange }) {
-  const [assetError, setAssetError] = useState3(null);
-  const [selectingAsset, setSelectingAsset] = useState3(false);
+  const [assetError, setAssetError] = useState4(null);
+  const [selectingAsset, setSelectingAsset] = useState4(false);
   const definition = registry?.getBlock(block.type);
   const groupedFields = definition ? Object.entries(definition.fields).reduce((groups, entry) => {
     const [name, field] = entry;
@@ -1442,20 +1642,20 @@ function DocumentInspector({ settings, pageId, assetPicker, productPicker, i18n,
     (groups[group] ??= []).push([name, configuredField]);
     return groups;
   }, {}) : {};
-  return /* @__PURE__ */ jsxs5("div", { className: "pb-inspector", "data-testid": "document-inspector", children: [
-    /* @__PURE__ */ jsxs5("header", { className: "pb-inspector__header", children: [
-      /* @__PURE__ */ jsx7(Badge3, { children: block.type }),
-      /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "headingSm", children: blockLabel(block, registry) }),
-        /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: definition?.category ?? "Core block" })
+  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__ */ 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" })
       ] })
     ] }),
-    block.type === "core.text" ? /* @__PURE__ */ jsx7(InspectorSection, { title: "Content", children: /* @__PURE__ */ jsx7(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__ */ jsxs5(InspectorSection, { title: "Image", children: [
-      /* @__PURE__ */ jsx7(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__ */ jsx7(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__ */ jsxs5(Fragment2, { children: [
-        /* @__PURE__ */ jsx7(Button2, { disabled: disabled || selectingAsset, onClick: () => void (async () => {
+    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.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 }) }),
+      assetPicker ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(Button2, { disabled: disabled || selectingAsset, onClick: () => void (async () => {
           setSelectingAsset(true);
           setAssetError(null);
           try {
@@ -1467,13 +1667,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__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: assetError }) : null
+        assetError ? /* @__PURE__ */ jsx9(Text3, { as: "p", variant: "bodySm", tone: "critical", children: assetError }) : null
       ] }) : null
     ] }) : null,
-    Object.entries(groupedFields).map(([group, fields]) => /* @__PURE__ */ jsx7(InspectorSection, { title: group, defaultOpen: group !== "Advanced", children: fields.map(([name, field]) => /* @__PURE__ */ jsx7(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__ */ 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.values(definition?.fields ?? {}).some((field) => field.persist === false) ? settings?.footer : null,
-    appearanceControls && definition?.variants?.length ? /* @__PURE__ */ jsx7(InspectorSection, { title: "\u5916\u89C2", children: /* @__PURE__ */ jsx7(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__ */ jsx7(InspectorSection, { title: "\u6837\u5F0F\u8986\u76D6", defaultOpen: false, children: appearanceTokens.map(([token, label]) => /* @__PURE__ */ jsx7(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__ */ 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) => {
       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.5",
+  "version": "0.12.6",
   "description": "React PageDocument editor, extension registry, and web renderer for BestTrack page experiences.",
   "type": "module",
   "repository": {

package/src/styles.css

@@ -90,16 +90,27 @@ 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 { 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 { --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-drop-target { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; min-height: 12rem; border: 2px dashed var(--builder-accent); border-radius: var(--builder-canvas-radius); color: var(--builder-accent); background: color-mix(in srgb, var(--builder-accent-subtle) 88%, transparent); font-weight: 600; pointer-events: auto; }
+.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; }
+.pb-canvas-frame [data-puck-component] [contenteditable="true"], .pb-canvas-frame [data-puck-component] input, .pb-canvas-frame [data-puck-component] textarea { cursor: text; }
+.pb-canvas-drop-target { position: absolute; inset: 0; z-index: 2; display: grid; place-items: start center; min-height: 12rem; border: 0; border-radius: var(--builder-canvas-radius); color: var(--builder-accent); background: transparent; font-weight: 600; pointer-events: auto; }
+.pb-canvas-drop-target__hint { position: sticky; top: var(--builder-space-3); z-index: 1; margin-top: var(--builder-space-3); padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--builder-accent) 28%, transparent); border-radius: 999px; color: var(--builder-accent); background: color-mix(in srgb, var(--builder-surface) 92%, var(--builder-accent-subtle)); box-shadow: 0 4px 12px rgb(15 23 42 / 10%); font-size: 12px; line-height: 1.2; pointer-events: none; }
+.pb-canvas-drop-target:has(.pb-canvas-drop-marker) > .pb-canvas-drop-target__hint { opacity: 0; }
+.pb-canvas-drop-marker { position: absolute; z-index: 2; height: 3px; min-height: 3px; border-radius: 999px; background: var(--builder-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--builder-accent) 16%, transparent), 0 2px 8px color-mix(in srgb, var(--builder-accent) 38%, transparent); transform: translateY(-50%); pointer-events: none; }
+.pb-canvas-drop-marker::before, .pb-canvas-drop-marker::after { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--builder-accent); box-shadow: 0 1px 4px color-mix(in srgb, var(--builder-accent) 38%, transparent); content: ""; transform: translateY(-50%); }
+.pb-canvas-drop-marker::before { left: -2px; }
+.pb-canvas-drop-marker::after { right: -2px; }
+.pb-canvas-drop-marker__label { position: absolute; top: -8px; left: 50%; padding: 3px 8px; border-radius: 999px; color: var(--builder-accent); background: var(--builder-surface); box-shadow: 0 2px 8px rgb(15 23 42 / 12%); font-size: 11px; line-height: 1.2; white-space: nowrap; transform: translate(-50%, -100%); pointer-events: none; }
 .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 { transform: scale(.5); transform-origin: top center; }
-.pb-canvas-frame--zoom-70 { transform: scale(.7); transform-origin: top center; }
-.pb-canvas-frame--zoom-100 { transform: scale(1); }
+.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-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); }
@@ -115,6 +126,8 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .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:active { cursor: grabbing; }
+.pb-document-block-row--library[aria-disabled="true"] { cursor: default; }
+.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; }
@@ -128,13 +141,14 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-toast-host .Polaris-Frame { min-height: 0; width: 0; height: 0; overflow: visible; background: transparent; }
 .pb-toast-host .Polaris-Frame__Skip,
 .pb-toast-host .Polaris-Frame__Main { display: none; }
-.pb-document-canvas__text, .pb-document-canvas__image { max-width: 760px; margin: 0 auto; padding: 48px; color: #1d2939; background: #fff; cursor: pointer; }
+.pb-document-canvas__text, .pb-document-canvas__image { max-width: 760px; margin: 0 auto; padding: 48px; color: #1d2939; background: #fff; cursor: grab; }
+.pb-document-canvas__extension { cursor: grab; }
 .pb-document-canvas__text { font-size: clamp(32px, 4vw, 52px); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; }
 .pb-document-canvas__text p { margin: 0; }
 .pb-document-canvas__text p[contenteditable="true"] { /* outline: 1px dashed var(--builder-accent); outline-offset: 8px; */ cursor: text; }
 .pb-document-canvas__image { padding-top: 0; }
 .pb-document-canvas__image img { display: block; width: 100%; border-radius: 12px; }
-.pb-document-canvas__image input { width: 100%; margin-top: var(--builder-space-3); padding: var(--builder-space-2); border: 1px solid var(--builder-accent); border-radius: var(--builder-control-radius); color: var(--builder-text); background: var(--builder-surface); font: inherit; }
+.pb-document-canvas__image input { width: 100%; margin-top: var(--builder-space-3); padding: var(--builder-space-2); border: 1px solid var(--builder-accent); border-radius: var(--builder-control-radius); color: var(--builder-text); background: var(--builder-surface); font: inherit; cursor: text; }
 .pb-document-export { max-height: 420px; padding: var(--builder-space-3); overflow: auto; border-radius: var(--builder-control-radius); color: var(--builder-text); background: var(--builder-surface-subtle); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
 .pb-web-renderer { min-height: 100vh; padding: 72px clamp(24px, 10vw, 180px); color: #1d2939; background: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
 .pb-web-renderer__text { max-width: 760px; margin: 0 auto 40px; font-size: clamp(32px, 5vw, 64px); font-weight: 650; line-height: 1.08; letter-spacing: -.04em; }