@standhigher/puck-page-builder 0.9.0 → 0.11.0

package/dist/index.js

@@ -3,8 +3,14 @@ import {
   ExtensionRegistryError,
   TemplateRegistry,
   createExtensionRegistry,
-  createTemplateRegistry
-} from "./chunk-PUTYZI7B.js";
+  createTemplateRegistry,
+  maximumBlockInstances,
+  mergeBlockPolicies,
+  minimumBlockInstances,
+  validateBlockPolicy,
+  validateFieldValue,
+  validatePageDocumentWithRegistry
+} from "./chunk-PFCWXLWN.js";
 import {
   WebRenderer
 } from "./chunk-KYXIXIWK.js";
@@ -341,9 +347,9 @@ function PropertyPanel({
 }
 
 // src/editor/shell/PageDocumentEditorShell.tsx
-import { Puck as Puck2, usePuck } from "@puckeditor/core";
-import { Badge as Badge2, Banner, Button as Button2, ButtonGroup as ButtonGroup2, InlineStack as InlineStack2, Text as Text2, TextField } from "@shopify/polaris";
-import { DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2 } from "@shopify/polaris-icons";
+import { IconButton as IconButton2, Puck as Puck2, usePuck } from "@puckeditor/core";
+import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, InlineStack as InlineStack3, Select as Select2, Text as Text3, TextField } from "@shopify/polaris";
+import { DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2, XIcon as XIcon2 } from "@shopify/polaris-icons";
 import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
 
 // src/adapters/puck/canvas-extension-block.tsx
@@ -462,6 +468,65 @@ function fromEngineData(data, base, registry) {
 
 // src/editor/context/EditorContext.tsx
 import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useReducer, useRef as useRef3, useState as useState2 } from "react";
+
+// src/editor/policy.ts
+function operationEnabled(operation, policy, blockPolicy) {
+  const key = `allow${operation[0].toUpperCase()}${operation.slice(1)}`;
+  return policy?.operations?.[key] !== false && blockPolicy[key] !== false;
+}
+function resolvedBlockPolicy(type, definition, policy) {
+  return mergeBlockPolicies(definition?.policy, policy?.blocks?.[type]);
+}
+function blockCount(blocks, type) {
+  return blocks.filter((block) => block.type === type).length;
+}
+function canAddBlock(type, blocks, definition, policy) {
+  const blockPolicy = resolvedBlockPolicy(type, definition, policy);
+  return operationEnabled("add", policy, blockPolicy) && blockCount(blocks, type) < maximumBlockInstances(blockPolicy);
+}
+function canDeleteBlock(block, blocks, definition, policy) {
+  if (!block) return false;
+  const blockPolicy = resolvedBlockPolicy(block.type, definition, policy);
+  return operationEnabled("delete", policy, blockPolicy) && blockCount(blocks, block.type) > minimumBlockInstances(blockPolicy);
+}
+function canDuplicateBlock(block, blocks, definition, policy) {
+  if (!block) return false;
+  const blockPolicy = resolvedBlockPolicy(block.type, definition, policy);
+  return operationEnabled("duplicate", policy, blockPolicy) && canAddBlock(block.type, blocks, definition, policy);
+}
+function canDragBlock(block, definition, policy) {
+  if (!block) return false;
+  return operationEnabled("drag", policy, resolvedBlockPolicy(block.type, definition, policy));
+}
+function canApplyCanvasDocument(previous, next, getDefinition, policy) {
+  const previousById = new Map(previous.blocks.map((block) => [block.id, block]));
+  const nextById = new Map(next.blocks.map((block) => [block.id, block]));
+  for (const block of next.blocks) {
+    const previousBlock = previousById.get(block.id);
+    if (previousBlock && previousBlock.type !== block.type) return false;
+  }
+  for (const block of next.blocks) {
+    if (!previousById.has(block.id) && !canAddBlock(block.type, previous.blocks, getDefinition(block.type), policy)) return false;
+  }
+  for (const block of previous.blocks) {
+    if (!nextById.has(block.id) && !canDeleteBlock(block, previous.blocks, getDefinition(block.type), policy)) return false;
+  }
+  const types = new Set([...previous.blocks, ...next.blocks].map((block) => block.type));
+  for (const type of types) {
+    const definition = getDefinition(type);
+    const blockPolicy = resolvedBlockPolicy(type, definition, policy);
+    const nextCount = blockCount(next.blocks, type);
+    if (nextCount > maximumBlockInstances(blockPolicy) || nextCount < minimumBlockInstances(blockPolicy)) return false;
+  }
+  if (previous.blocks.length === next.blocks.length && previous.blocks.every((block) => nextById.has(block.id))) {
+    for (let index = 0; index < previous.blocks.length; index += 1) {
+      if (previous.blocks[index]?.id !== next.blocks[index]?.id && !canDragBlock(previous.blocks[index], getDefinition(previous.blocks[index].type), policy)) return false;
+    }
+  }
+  return true;
+}
+
+// src/editor/context/EditorContext.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function historyReducer(state, action) {
   if (action.type === "select") return { ...state, selectedBlockId: action.id };
@@ -476,7 +541,7 @@ function historyReducer(state, action) {
     if (!next) return state;
     return { ...state, ...next, past: [...state.past, { document: state.document, selectedBlockId: state.selectedBlockId }], future: state.future.slice(1) };
   }
-  if (action.type === "saved") return { ...state, savedDocument: state.document };
+  if (action.type === "saved") return { ...state, savedDocument: action.document };
   const current = { document: state.document, selectedBlockId: state.selectedBlockId };
   return { ...state, document: action.document, selectedBlockId: action.selectedBlockId, past: [...state.past, current], future: [] };
 }
@@ -494,15 +559,17 @@ function defaultBlock(type, blocks, registry) {
   if (!definition) throw new Error(`Unknown PageDocument block type: ${type}`);
   return { id: uniqueBlockId(type, blocks), type, version: definition.version, props: definition.defaultProps, variant: definition.defaultVariant ?? "default", style: {} };
 }
-function EditorProvider({ initialDocument, registry, loadState = "ready", leaveWarning = "You have unsaved changes.", onDocumentChange, children }) {
+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 historyRef = useRef3(history);
   useEffect2(() => {
     historyRef.current = history;
   }, [history]);
   const [canvasSelectionRequest, setCanvasSelectionRequest] = useState2(null);
-  const editable = loadState === "ready" || loadState === "success";
+  const [pendingDeleteBlockId, setPendingDeleteBlockId] = useState2(null);
+  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 requestCanvasSelection = useCallback((id) => {
     if (editable) setCanvasSelectionRequest(id);
@@ -513,15 +580,23 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
   }, []);
   const updateFromCanvas = useCallback((document) => {
     const current = historyRef.current;
-    if (!editable || JSON.stringify(document) === JSON.stringify(current.document)) return;
+    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);
-  }, [editable, replace]);
+    return true;
+  }, [editable, policy, registry, replace]);
   const updateBlockProps = useCallback((id, props) => {
     if (!editable) return;
     const current = historyRef.current;
     const blocks = current.document.blocks.map((block) => block.id === id ? { ...block, props: { ...block.props, ...props } } : block);
     replace({ ...current.document, blocks }, id);
   }, [editable, replace]);
+  const updateBlockPresentation = useCallback((id, presentation) => {
+    if (!editable) return;
+    const current = historyRef.current;
+    const blocks = current.document.blocks.map((block) => block.id === id ? { ...block, ...presentation } : block);
+    replace({ ...current.document, blocks }, id);
+  }, [editable, replace]);
   useEffect2(() => {
     onDocumentChange?.(history.document);
   }, [history.document, onDocumentChange]);
@@ -555,27 +630,37 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
     const actionState = {
       canUndo: editable && history.past.length > 0,
       canRedo: editable && history.future.length > 0,
-      canAdd: editable,
+      canAdd: editable && ["core.text", "core.image", ...registry?.blocks.map((block) => block.type) ?? []].some((type) => canAddBlock(type, history.document.blocks, registry?.getBlock(type), policy)),
       canEdit: editable && selectedBlock !== null,
-      canDelete: editable && selectedBlock !== null,
-      canDuplicate: editable && selectedBlock !== null,
-      canReorder: editable && history.document.blocks.length > 1
+      canDelete: editable && canDeleteBlock(selectedBlock, history.document.blocks, registry?.getBlock(selectedBlock?.type ?? ""), policy),
+      canDuplicate: editable && canDuplicateBlock(selectedBlock, history.document.blocks, registry?.getBlock(selectedBlock?.type ?? ""), policy),
+      canReorder: editable && history.document.blocks.length > 1 && canDragBlock(selectedBlock, registry?.getBlock(selectedBlock?.type ?? ""), policy)
     };
     return {
       document: history.document,
       selectedBlockId: history.selectedBlockId,
       selectedBlock,
+      pendingDeleteBlock,
       canvasSelectionRequest,
       device: history.device,
       loadState,
+      sessionState,
+      session,
+      sessionMessage,
+      isEditable: editable,
       isDirty,
       actionState,
+      canAddBlock: (type) => editable && canAddBlock(type, history.document.blocks, registry?.getBlock(type), policy),
+      canDragBlock: (id) => {
+        const block = history.document.blocks.find((item) => item.id === id);
+        return editable && canDragBlock(block, registry?.getBlock(block?.type ?? ""), policy);
+      },
       requestCanvasSelection,
       confirmCanvasSelection,
       updateFromCanvas,
       setDevice: (device) => dispatch({ type: "device", device }),
       addBlock: (type, beforeId) => {
-        if (!editable) return null;
+        if (!editable || !canAddBlock(type, history.document.blocks, registry?.getBlock(type), policy)) return null;
         const block = defaultBlock(type, history.document.blocks, registry);
         const blocks = [...history.document.blocks];
         const targetIndex = beforeId ? blocks.findIndex((item) => item.id === beforeId) : -1;
@@ -588,7 +673,7 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
         if (!editable) return;
         const index = history.document.blocks.findIndex((block2) => block2.id === id);
         const source = history.document.blocks[index];
-        if (!source) return;
+        if (!canDuplicateBlock(source, history.document.blocks, registry?.getBlock(source?.type ?? ""), policy)) return;
         const block = { ...source, id: uniqueBlockId(source.type, history.document.blocks), props: { ...source.props } };
         const blocks = [...history.document.blocks];
         blocks.splice(index + 1, 0, block);
@@ -597,7 +682,8 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
       deleteBlock: (id) => {
         if (!editable) return;
         const index = history.document.blocks.findIndex((block) => block.id === id);
-        if (index < 0) return;
+        const source = history.document.blocks[index];
+        if (!canDeleteBlock(source, history.document.blocks, registry?.getBlock(source?.type ?? ""), policy)) return;
         const blocks = history.document.blocks.filter((block) => block.id !== id);
         replace({ ...history.document, blocks }, blocks[index]?.id ?? blocks[index - 1]?.id ?? null);
       },
@@ -605,7 +691,7 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
         if (!editable) return;
         const from = history.document.blocks.findIndex((block) => block.id === id);
         const to = from + direction;
-        if (from < 0 || to < 0 || to >= history.document.blocks.length) return;
+        if (from < 0 || to < 0 || to >= history.document.blocks.length || !canDragBlock(history.document.blocks[from], registry?.getBlock(history.document.blocks[from]?.type ?? ""), policy)) return;
         const blocks = [...history.document.blocks];
         [blocks[from], blocks[to]] = [blocks[to], blocks[from]];
         replace({ ...history.document, blocks }, id);
@@ -615,21 +701,38 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
         const source = history.document.blocks.find((block) => block.id === id);
         const withoutSource = history.document.blocks.filter((block) => block.id !== id);
         const targetIndex = withoutSource.findIndex((block) => block.id === beforeId);
-        if (!source || targetIndex < 0) return;
+        if (!source || targetIndex < 0 || !canDragBlock(source, registry?.getBlock(source.type), policy)) return;
         const blocks = [...withoutSource];
         blocks.splice(targetIndex, 0, source);
         replace({ ...history.document, blocks }, id);
       },
       updateBlockProps,
+      updateBlockPresentation,
+      requestDeleteBlock: (id) => {
+        const block = history.document.blocks.find((item) => item.id === id);
+        if (editable && canDeleteBlock(block, history.document.blocks, registry?.getBlock(block?.type ?? ""), policy)) setPendingDeleteBlockId(id);
+      },
+      cancelDeleteBlock: () => setPendingDeleteBlockId(null),
+      confirmDeleteBlock: () => {
+        if (pendingDeleteBlockId) {
+          const id = pendingDeleteBlockId;
+          setPendingDeleteBlockId(null);
+          const index = history.document.blocks.findIndex((block) => block.id === id);
+          const source = history.document.blocks[index];
+          if (!canDeleteBlock(source, history.document.blocks, registry?.getBlock(source?.type ?? ""), policy)) return;
+          const blocks = history.document.blocks.filter((block) => block.id !== id);
+          replace({ ...history.document, blocks }, blocks[index]?.id ?? blocks[index - 1]?.id ?? null);
+        }
+      },
       undo: () => {
         if (editable) dispatch({ type: "undo" });
       },
       redo: () => {
         if (editable) dispatch({ type: "redo" });
       },
-      markSaved: () => dispatch({ type: "saved" })
+      markSaved: (document = historyRef.current.document) => dispatch({ type: "saved", document })
     };
-  }, [canvasSelectionRequest, confirmCanvasSelection, editable, history, isDirty, loadState, registry, replace, requestCanvasSelection, selectedBlock, updateBlockProps, updateFromCanvas]);
+  }, [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 });
 }
 function useEditorContext() {
@@ -638,6 +741,26 @@ function useEditorContext() {
   return context;
 }
 
+// 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";
+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
+    ] }),
+    status.lastSavedAt ? /* @__PURE__ */ jsxs4(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: [
+      "\u6700\u540E\u4FDD\u5B58\uFF1A",
+      status.lastSavedAt
+    ] }) : null
+  ] });
+}
+
 // src/editor/i18n/admin.ts
 var messages = {
   "zh-CN": {
@@ -649,6 +772,10 @@ var messages = {
     redo: "\u6062\u590D",
     duplicate: "\u590D\u5236",
     remove: "\u5220\u9664",
+    confirmDeleteTitle: "\u786E\u8BA4\u5220\u9664\u533A\u5757\uFF1F",
+    confirmDeleteMessage: "\u5220\u9664\u540E\u53EF\u4F7F\u7528\u64A4\u9500\u6062\u590D\u3002",
+    cancel: "\u53D6\u6D88",
+    confirm: "\u786E\u8BA4\u5220\u9664",
     moveUp: "\u4E0A\u79FB",
     moveDown: "\u4E0B\u79FB",
     loading: "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026",
@@ -663,13 +790,33 @@ var messages = {
     publish: "\u53D1\u5E03",
     publishing: "\u6B63\u5728\u53D1\u5E03\u2026",
     saveFailed: "\u4FDD\u5B58\u8349\u7A3F\u5931\u8D25",
+    retrySave: "\u91CD\u8BD5\u4FDD\u5B58",
+    offline: "\u5F53\u524D\u79BB\u7EBF\uFF0C\u6062\u590D\u7F51\u7EDC\u540E\u5C06\u81EA\u52A8\u4FDD\u5B58",
     publishFailed: "\u53D1\u5E03\u5931\u8D25",
     published: "\u5DF2\u53D1\u5E03",
+    back: "\u8FD4\u56DE",
+    confirmLeaveTitle: "\u79BB\u5F00\u7F16\u8F91\u5668\uFF1F",
+    leave: "\u79BB\u5F00",
+    zoom: "\u7F29\u653E",
+    zoomAuto: "\u81EA\u52A8\u7F29\u653E",
+    preview: "\u6B63\u5F0F\u9884\u89C8",
+    addToStore: "\u6DFB\u52A0\u5230\u5E97\u94FA",
+    acquiringLock: "\u6B63\u5728\u83B7\u53D6\u7F16\u8F91\u9501\u2026",
+    locked: "\u8BE5\u9875\u9762\u6B63\u5728\u88AB\u7F16\u8F91",
+    lockLost: "\u7F16\u8F91\u9501\u5DF2\u5931\u6548",
+    readonly: "\u9875\u9762\u4E3A\u53EA\u8BFB\u72B6\u6001",
     leaveWarning: "\u4F60\u6709\u672A\u4FDD\u5B58\u7684\u66F4\u6539\u3002\u786E\u5B9A\u8981\u79BB\u5F00\u5417\uFF1F",
     selectBlock: "\u9009\u62E9\u4E00\u4E2A\u533A\u5757\u4EE5\u7F16\u8F91\u3002",
     desktop: "\u684C\u9762",
     tablet: "\u5E73\u677F",
-    mobile: "\u624B\u673A"
+    mobile: "\u624B\u673A",
+    collapseLeft: "\u6536\u8D77\u5DE6\u4FA7\u9762\u677F",
+    collapseRight: "\u6536\u8D77\u5C5E\u6027\u9762\u677F",
+    expandLeft: "\u6253\u5F00\u533A\u5757\u9762\u677F",
+    expandRight: "\u6253\u5F00\u5C5E\u6027\u9762\u677F",
+    toggleSidebars: "\u4FA7\u680F\u663E\u793A",
+    toggleLeftSidebar: "\u5207\u6362\u5DE6\u4FA7\u9762\u677F",
+    toggleRightSidebar: "\u5207\u6362\u5C5E\u6027\u9762\u677F"
   },
   en: {
     blocks: "Blocks",
@@ -680,6 +827,10 @@ var messages = {
     redo: "Redo",
     duplicate: "Duplicate",
     remove: "Delete",
+    confirmDeleteTitle: "Delete this block?",
+    confirmDeleteMessage: "You can restore it with Undo after deleting.",
+    cancel: "Cancel",
+    confirm: "Delete block",
     moveUp: "Move up",
     moveDown: "Move down",
     loading: "Loading editor\u2026",
@@ -694,13 +845,33 @@ var messages = {
     publish: "Publish",
     publishing: "Publishing\u2026",
     saveFailed: "Could not save draft",
+    retrySave: "Retry save",
+    offline: "Offline \u2014 changes will save when connection returns",
     publishFailed: "Could not publish",
     published: "Published",
+    back: "Back",
+    confirmLeaveTitle: "Leave the editor?",
+    leave: "Leave",
+    zoom: "Zoom",
+    zoomAuto: "Auto zoom",
+    preview: "Preview",
+    addToStore: "Add to store",
+    acquiringLock: "Acquiring edit lock\u2026",
+    locked: "This page is being edited",
+    lockLost: "The edit lock has expired",
+    readonly: "This page is read-only",
     leaveWarning: "You have unsaved changes. Are you sure you want to leave?",
     selectBlock: "Select a block to edit it.",
     desktop: "Desktop",
     tablet: "Tablet",
-    mobile: "Mobile"
+    mobile: "Mobile",
+    collapseLeft: "Collapse blocks panel",
+    collapseRight: "Collapse properties panel",
+    expandLeft: "Open blocks panel",
+    expandRight: "Open properties panel",
+    toggleSidebars: "Sidebar visibility",
+    toggleLeftSidebar: "Toggle left sidebar",
+    toggleRightSidebar: "Toggle right sidebar"
   }
 };
 function createAdminI18n(locale) {
@@ -718,7 +889,7 @@ function blockIdAtRelativeY(ids, relativeY) {
 }
 
 // src/editor/shell/PageDocumentEditorShell.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var deviceLabels2 = { desktop: "desktop", tablet: "tablet", mobile: "mobile" };
 function blockLabel(block, registry) {
   return blockTypeLabel(block.type, registry);
@@ -728,40 +899,151 @@ function blockTypeLabel(type, registry) {
   if (type === "core.image") return "\u56FE\u7247";
   return registry?.getBlock(type)?.label ?? type;
 }
+function PuckPanelIcon({ side }) {
+  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx7("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsx7("path", { d: side === "left" ? "M9 3v18" : "M15 3v18" })
+  ] });
+}
 function validateDocumentBlocks(document, registry) {
-  if (!registry) return [];
-  return document.blocks.flatMap((block) => {
-    const definition = registry.getBlock(block.type);
-    if (!definition) return [];
-    const issues = [...definition.validate?.(block.props) ?? []];
-    if (definition.variants?.length && !definition.variants.some((variant) => variant.id === block.variant)) {
-      issues.push({ path: "variant", message: `Unsupported variant: ${block.variant}.` });
-    }
-    return issues.map((issue) => ({ ...issue, path: `${block.id}.${issue.path}` }));
-  });
+  return registry ? validatePageDocumentWithRegistry(document, registry) : [];
+}
+function useEditorSession(adapter, pageId) {
+  const [managed, setManaged] = useState3(() => adapter ? { state: "acquiring" } : { state: "active" });
+  useEffect3(() => {
+    let cancelled = false;
+    let session;
+    let heartbeatTimer;
+    const stopHeartbeat = () => {
+      if (heartbeatTimer) clearInterval(heartbeatTimer);
+      heartbeatTimer = void 0;
+    };
+    if (!adapter) return;
+    void adapter.acquire({ pageId }).then((result) => {
+      if (cancelled) return;
+      if (result.state !== "active") {
+        setManaged({ state: result.state, message: result.message ?? (result.state === "locked" && result.editorName ? `${result.editorName} \u6B63\u5728\u7F16\u8F91` : void 0) });
+        return;
+      }
+      session = result.session;
+      setManaged({ state: "active", session });
+      if (!adapter.heartbeat) return;
+      const heartbeat = () => {
+        if (typeof navigator !== "undefined" && !navigator.onLine) return;
+        void adapter.heartbeat?.({ pageId, session: result.session }).catch(() => {
+          if (!cancelled) {
+            stopHeartbeat();
+            setManaged({ state: "lost", message: "\u7F16\u8F91\u9501\u5DF2\u5931\u6548\uFF0C\u8BF7\u6062\u590D\u7F51\u7EDC\u540E\u91CD\u65B0\u8FDB\u5165\u7F16\u8F91\u5668\u3002" });
+          }
+        });
+      };
+      heartbeatTimer = setInterval(heartbeat, adapter.heartbeatIntervalMs ?? 3e4);
+    }).catch(() => {
+      if (!cancelled) setManaged({ state: "lost", message: "\u65E0\u6CD5\u83B7\u53D6\u7F16\u8F91\u9501\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002" });
+    });
+    return () => {
+      cancelled = true;
+      stopHeartbeat();
+      if (session) void adapter.release?.({ pageId, session });
+    };
+  }, [adapter, pageId]);
+  return managed;
 }
 function PageDocumentEditorShell(props) {
-  return /* @__PURE__ */ jsx6(EditorProvider, { initialDocument: props.initialDocument, registry: props.registry, loadState: props.loadState, leaveWarning: createAdminI18n(props.adminLocale).t("leaveWarning"), onDocumentChange: props.onDocumentChange, children: /* @__PURE__ */ jsx6(PageDocumentEditor, { ...props }) });
+  const { sessionAdapter, initialDocument, onSessionStateChange } = props;
+  const managedSession = useEditorSession(sessionAdapter, initialDocument.pageId);
+  useEffect3(() => {
+    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 }) });
 }
-function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPublish }) {
+function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onPublish, draftPersistence, draftRevision: initialDraftRevision, autoSave = true, autoSaveDelayMs = 800, publishAction, assetPicker, pageStatus, onBack, onPreview, onAddToStore, deleteConfirmation, availableBlockTypes, appearanceControls = false }) {
   const editor = useEditorContext();
   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 i18n = createAdminI18n(adminLocale);
   const engineData = useMemo2(() => toEngineData(editor.document, registry), [editor.document, registry]);
   const validationIssues = useMemo2(() => validateDocumentBlocks(editor.document, registry), [editor.document, registry]);
-  const { confirmCanvasSelection, selectedBlockId, updateBlockProps } = editor;
+  const { confirmCanvasSelection, selectedBlockId, updateBlockProps, updateBlockPresentation } = editor;
   const updateFromCanvasInput = useCallback2((id, props, preserveCanvasValue = false) => {
     if (preserveCanvasValue) setCanvasMutationVersion((version) => version + 1);
     updateBlockProps(id, props);
   }, [updateBlockProps]);
   const config = useMemo2(() => createPageDocumentPuckConfig(confirmCanvasSelection, updateFromCanvasInput, selectedBlockId, registry), [confirmCanvasSelection, registry, selectedBlockId, updateFromCanvasInput]);
-  if (editor.loadState !== "ready" && editor.loadState !== "success") return /* @__PURE__ */ jsx6(EditorStatus, { state: editor.loadState });
-  const blockTypes = ["core.text", "core.image", ...registry?.blocks.map((block) => block.type) ?? []];
+  useEffect3(() => {
+    const online = () => setIsOnline(true);
+    const offline = () => setIsOnline(false);
+    window.addEventListener("online", online);
+    window.addEventListener("offline", offline);
+    return () => {
+      window.removeEventListener("online", online);
+      window.removeEventListener("offline", offline);
+    };
+  }, []);
+  const resolvedSaveState = !isOnline && editor.isDirty ? "offline" : saveState === "offline" && editor.isDirty ? "dirty" : saveState === "saved" && editor.isDirty ? "dirty" : saveState;
+  const canPersistDraft = Boolean(draftPersistence || onSave);
+  const save = useCallback2(async () => {
+    if (!canPersistDraft || request !== "idle" || validationIssues.length > 0) return;
+    if (!isOnline) {
+      setSaveState("offline");
+      return;
+    }
+    const document = editor.document;
+    setRequest("saving");
+    setSaveState("saving");
+    setNotice(null);
+    try {
+      const result = draftPersistence ? await draftPersistence.saveDraft({ document, expectedRevision: draftRevision, session: editor.session }) : await onSave?.(document);
+      if (result?.revision !== void 0) setDraftRevision(result.revision);
+      editor.markSaved(document);
+      setSaveState("saved");
+    } catch {
+      setNotice("saveFailed");
+      setSaveState(typeof navigator !== "undefined" && !navigator.onLine ? "offline" : "failed");
+    } finally {
+      setRequest("idle");
+    }
+  }, [canPersistDraft, draftPersistence, draftRevision, editor, isOnline, onSave, request, validationIssues.length]);
+  useEffect3(() => {
+    if (!autoSave || !canPersistDraft || !editor.isDirty || resolvedSaveState !== "dirty" || !isOnline || request !== "idle" || validationIssues.length > 0 || editor.sessionState !== "active") return;
+    const timer = window.setTimeout(() => {
+      void save();
+    }, autoSaveDelayMs);
+    return () => window.clearTimeout(timer);
+  }, [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;
+    setRequest("publishing");
+    setNotice(null);
+    try {
+      if (publishAction) await publishAction.publish({ document, expectedRevision: draftRevision, session: editor.session, validationIssues });
+      else await onPublish?.(document);
+      editor.markSaved(document);
+      setSaveState("saved");
+      setNotice("published");
+    } catch {
+      setNotice("publishFailed");
+    } finally {
+      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 });
+  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);
@@ -797,120 +1079,147 @@ function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPu
     event.stopPropagation();
     setDraggingLibraryType(null);
   };
-  const save = async () => {
-    if (!onSave || request !== "idle" || validationIssues.length > 0) return;
-    setRequest("saving");
-    setNotice(null);
-    try {
-      await onSave(editor.document);
-      editor.markSaved();
-    } catch {
-      setNotice("saveFailed");
-    } finally {
-      setRequest("idle");
-    }
+  const saveBadgeTone = resolvedSaveState === "failed" ? "critical" : resolvedSaveState === "offline" || resolvedSaveState === "dirty" ? "attention" : "success";
+  const saveBadgeLabel = resolvedSaveState === "saving" ? i18n.t("saving") : resolvedSaveState === "failed" ? i18n.t("saveFailed") : resolvedSaveState === "offline" ? i18n.t("offline") : resolvedSaveState === "dirty" ? i18n.t("unsaved") : i18n.t("saved");
+  const saveButtonLabel = request === "saving" ? i18n.t("saving") : resolvedSaveState === "failed" ? i18n.t("retrySave") : i18n.t("save");
+  const requestBack = () => {
+    if (!onBack) return;
+    if (editor.isDirty || request === "saving") setConfirmBack(true);
+    else onBack();
   };
-  const publish = async () => {
-    if (!onPublish || request !== "idle" || validationIssues.length > 0) return;
-    setRequest("publishing");
-    setNotice(null);
-    try {
-      await onPublish(editor.document);
-      editor.markSaved();
-      setNotice("published");
-    } catch {
-      setNotice("publishFailed");
-    } finally {
-      setRequest("idle");
-    }
-  };
-  return /* @__PURE__ */ jsx6(Puck2, { config, data: engineData, iframe: { enabled: iframe }, onChange: (data) => editor.updateFromCanvas(fromEngineData(data, editor.document, registry)), children: /* @__PURE__ */ jsxs4(Puck2.Layout, { children: [
-    /* @__PURE__ */ jsx6(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion }),
-    /* @__PURE__ */ jsxs4("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, children: [
-      /* @__PURE__ */ jsx6("header", { className: "pb-header", children: /* @__PURE__ */ jsxs4(InlineStack2, { align: "space-between", blockAlign: "center", gap: "300", wrap: false, children: [
-        /* @__PURE__ */ jsxs4("div", { className: "pb-page-title", children: [
-          /* @__PURE__ */ jsx6(Text2, { as: "h1", variant: "headingSm", children: editor.document.settings.seoTitle ?? editor.document.pageId }),
-          /* @__PURE__ */ jsxs4(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: [
-            "PageDocument V",
-            editor.document.schemaVersion,
-            " \xB7 ",
-            editor.document.target
+  return /* @__PURE__ */ jsx7(Puck2, { config, data: engineData, iframe: { enabled: iframe }, 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 }),
+    /* @__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 }),
+            /* @__PURE__ */ jsxs5(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: [
+              "PageDocument V",
+              editor.document.schemaVersion,
+              " \xB7 ",
+              editor.document.target
+            ] }),
+            pageStatus ? /* @__PURE__ */ jsx7(PageStatusCard, { status: pageStatus, sessionState: editor.sessionState }) : null
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "pb-header-sidebar-toggles", role: "group", "aria-label": i18n.t("toggleSidebars"), "data-testid": "sidebar-toggles", children: [
+            /* @__PURE__ */ jsx7(IconButton2, { type: "button", title: i18n.t("toggleLeftSidebar"), onClick: () => setLeftRailOpen((open) => !open), children: /* @__PURE__ */ jsx7(PuckPanelIcon, { side: "left" }) }),
+            /* @__PURE__ */ jsx7(IconButton2, { type: "button", title: i18n.t("toggleRightSidebar"), onClick: () => setRightPanelOpen((open) => !open), children: /* @__PURE__ */ jsx7(PuckPanelIcon, { side: "right" }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs4(InlineStack2, { gap: "150", blockAlign: "center", wrap: false, children: [
-          /* @__PURE__ */ jsx6(Badge2, { tone: editor.isDirty ? "attention" : "success", children: editor.isDirty ? i18n.t("unsaved") : i18n.t("saved") }),
-          /* @__PURE__ */ jsx6(Button2, { disabled: !onSave || !editor.isDirty || request !== "idle" || validationIssues.length > 0, onClick: () => void save(), children: request === "saving" ? i18n.t("saving") : i18n.t("save") }),
-          /* @__PURE__ */ jsx6(Button2, { variant: "primary", disabled: !onPublish || request !== "idle" || validationIssues.length > 0, onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") }),
-          /* @__PURE__ */ jsx6(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
-          /* @__PURE__ */ jsx6(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo })
-        ] })
+        /* @__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__ */ jsx7("div", { className: "pb-header-actions", children: /* @__PURE__ */ jsxs5(InlineStack3, { gap: "150", blockAlign: "center", wrap: false, children: [
+          /* @__PURE__ */ jsx7(Badge3, { tone: saveBadgeTone, children: saveBadgeLabel }),
+          /* @__PURE__ */ jsx7(Button2, { disabled: !canPersistDraft || !editor.isDirty || request !== "idle" || validationIssues.length > 0 || !isOnline, onClick: () => void save(), children: saveButtonLabel }),
+          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__ */ 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 })
+        ] }) })
       ] }) }),
-      editor.loadState === "success" ? /* @__PURE__ */ jsx6(Banner, { tone: "success", children: i18n.t("success") }) : null,
-      notice ? /* @__PURE__ */ jsx6(Banner, { tone: notice === "published" ? "success" : "critical", children: i18n.t(notice) }) : null,
-      validationIssues.length > 0 ? /* @__PURE__ */ jsx6(Banner, { tone: "critical", title: "\u533A\u5757\u5C5E\u6027\u672A\u901A\u8FC7\u6821\u9A8C", children: /* @__PURE__ */ jsx6("ul", { children: validationIssues.map((issue) => /* @__PURE__ */ jsxs4("li", { children: [
+      editor.loadState === "success" ? /* @__PURE__ */ jsx7(Banner, { tone: "success", children: i18n.t("success") }) : null,
+      notice ? /* @__PURE__ */ jsx7(Banner, { tone: notice === "published" ? "success" : "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: [
         issue.path,
         ": ",
         issue.message
       ] }, `${issue.path}-${issue.message}`)) }) }) : null,
-      /* @__PURE__ */ jsxs4("div", { className: "pb-workspace pb-workspace--document", children: [
-        /* @__PURE__ */ jsxs4("nav", { className: "pb-tool-rail", "aria-label": "\u7F16\u8F91\u5668\u5DE5\u5177", children: [
-          /* @__PURE__ */ jsx6(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks", variant: "tertiary", onClick: () => setBlockView("blocks") }),
-          /* @__PURE__ */ jsx6(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline", variant: "tertiary", onClick: () => setBlockView("outline") })
+      /* @__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: () => {
+            setBlockView("blocks");
+            setLeftRailOpen(true);
+          } }),
+          /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline" && leftRailOpen, variant: "tertiary", onClick: () => {
+            setBlockView("outline");
+            setLeftRailOpen(true);
+          } })
         ] }),
-        /* @__PURE__ */ jsxs4("aside", { className: "pb-left-panel", "aria-label": "PageDocument \u533A\u5757", children: [
-          /* @__PURE__ */ jsx6(InlineStack2, { align: "space-between", blockAlign: "center", children: /* @__PURE__ */ jsx6(Text2, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }) }),
-          blockView === "blocks" ? /* @__PURE__ */ jsx6("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__ */ jsxs4("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.actionState.canAdd, "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) => {
+        /* @__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) })
+          ] }),
+          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) => {
+            if (!editor.canAddBlock(type)) {
+              event.preventDefault();
+              return;
+            }
             event.dataTransfer.setData("application/x-page-document-block", type);
             event.dataTransfer.effectAllowed = "copy";
             setDraggingLibraryType(type);
           }, onDragEnd: () => setDraggingLibraryType(null), children: [
-            /* @__PURE__ */ jsxs4("span", { className: "pb-library-block-title", children: [
-              /* @__PURE__ */ jsx6(Text2, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
-              /* @__PURE__ */ jsx6("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx6(DragHandleIcon2, {}) })
+            /* @__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__ */ jsx6(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: type })
-          ] }, type)) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx6(Text2, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx6("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs4("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__ */ jsx6(Text2, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockLabel(block, registry) }),
-            /* @__PURE__ */ jsx6(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
+            /* @__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 })
           ] }, block.id)) })
         ] }),
-        /* @__PURE__ */ jsxs4("main", { className: "pb-canvas-area", children: [
-          /* @__PURE__ */ jsx6("div", { className: "pb-canvas-toolbar", children: /* @__PURE__ */ jsx6(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx6(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }) }),
-          /* @__PURE__ */ jsxs4("div", { className: "pb-canvas-stage", children: [
-            /* @__PURE__ */ jsx6("div", { ref: canvasFrameRef, className: `pb-canvas-frame pb-canvas-frame--${editor.device}`, "data-device": editor.device, children: /* @__PURE__ */ jsx6(Puck2.Preview, {}) }),
-            draggingLibraryType ? /* @__PURE__ */ jsxs4("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: [
+        /* @__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, 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__ */ jsxs4("div", { className: "pb-canvas-overlay", "aria-label": `\u5DF2\u9009\u62E9 ${blockLabel(editor.selectedBlock, registry)}`, children: [
-              /* @__PURE__ */ jsx6("span", { children: blockLabel(editor.selectedBlock, registry) }),
-              /* @__PURE__ */ jsx6("span", { children: "Selected" })
+            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
-          ] })
+          ] }),
+          !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
+          ] }) : null
         ] }),
-        /* @__PURE__ */ jsxs4("aside", { className: "pb-right-panel", "aria-label": "PageDocument \u5C5E\u6027", children: [
-          /* @__PURE__ */ jsx6(Text2, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
-          editor.selectedBlock ? /* @__PURE__ */ jsx6(DocumentInspector, { block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props) }) : /* @__PURE__ */ jsx6(Text2, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
+        /* @__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) })
+          ] }),
+          editor.selectedBlock ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx7(DocumentInspector, { pageId: editor.document.pageId, assetPicker, block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, appearanceControls, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props), onPresentationChange: (presentation) => updateBlockPresentation(editor.selectedBlock.id, presentation) }),
+            /* @__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.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: () => {
+        setConfirmBack(false);
+        onBack?.();
+      } }) : null
     ] })
   ] }) });
 }
-function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion }) {
+function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion, canvasResetVersion }) {
   const puck = usePuck();
   const lastSelectedId = useRef4(null);
   const lastSyncedData = useRef4(null);
   const lastCanvasMutationVersion = useRef4(0);
+  const lastCanvasResetVersion = useRef4(0);
   const serializedData = JSON.stringify(data);
   useEffect3(() => {
-    if (lastSyncedData.current === serializedData) return;
+    const forceReset = canvasResetVersion > lastCanvasResetVersion.current;
+    if (lastSyncedData.current === serializedData && !forceReset) return;
     lastSyncedData.current = serializedData;
+    if (forceReset) lastCanvasResetVersion.current = canvasResetVersion;
     if (canvasMutationVersion > lastCanvasMutationVersion.current) {
       lastCanvasMutationVersion.current = canvasMutationVersion;
       return;
     }
     puck.dispatch({ type: "setData", data });
-  }, [canvasMutationVersion, data, puck, serializedData]);
+  }, [canvasMutationVersion, canvasResetVersion, data, puck, serializedData]);
   useEffect3(() => {
     if (!requestedBlockId) return;
     const selector = puck.getSelectorForId(requestedBlockId);
@@ -929,39 +1238,79 @@ 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__ */ jsx6("div", { className: "pb-editor-status", "data-testid": "page-document-editor-state", "data-editor-state": state, children: /* @__PURE__ */ jsx6(Banner, { tone, title: message, children: state === "disabled" ? i18n.t("disabled") : message }) });
+  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 }) });
+}
+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 }) });
 }
 function InspectorSection({ title, children, defaultOpen = true }) {
-  return /* @__PURE__ */ jsxs4("details", { className: "pb-inspector-section", open: defaultOpen, children: [
-    /* @__PURE__ */ jsxs4("summary", { children: [
-      /* @__PURE__ */ jsx6("span", { children: title }),
-      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u2304" })
+  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" })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "pb-inspector-section__body", children })
+    /* @__PURE__ */ jsx7("div", { className: "pb-inspector-section__body", children })
   ] });
 }
 function InspectorTextControl({ label, value, control, disabled, onChange }) {
   const stringValue = typeof value === "string" ? value : "";
-  return /* @__PURE__ */ jsx6(TextField, { label, labelHidden: true, value: stringValue, onChange, autoComplete: "off", disabled, multiline: control === "textarea" ? 4 : false, type: control === "url" ? "url" : "text" });
+  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) });
+  return /* @__PURE__ */ jsx7(TextField, { label, labelHidden: true, value: stringValue, onChange, autoComplete: "off", disabled, multiline: control === "textarea" ? 4 : false, type: control === "url" ? "url" : "text" });
 }
 function InspectorField({ name, field, value, registry, disabled, onChange }) {
   const label = field.label ?? name;
+  const issues = validateFieldValue(field, value);
   const Field = registry?.getField(field.field)?.component;
-  return /* @__PURE__ */ jsxs4("div", { className: "pb-inspector-field", "data-control": field.control ?? "custom", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "pb-inspector-field__heading", children: [
-      /* @__PURE__ */ jsx6(Text2, { as: "p", variant: "bodySm", fontWeight: "semibold", children: label }),
-      field.description ? /* @__PURE__ */ jsx6(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: field.description }) : null
+  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
     ] }),
-    field.control ? /* @__PURE__ */ jsx6(InspectorTextControl, { label, value, control: field.control, disabled, onChange: (next) => onChange(next) }) : Field ? /* @__PURE__ */ jsx6(Field, { value, onChange }) : null
+    field.control ? /* @__PURE__ */ jsx7(InspectorTextControl, { label, value, control: field.control, 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))
   ] });
 }
+function InspectorActions({ block, canDuplicate, canDelete, canMove, canMoveUp, canMoveDown, i18n, onDuplicate, onDelete, onMove }) {
+  return /* @__PURE__ */ jsx7("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, onClick: onDuplicate, children: i18n.t("duplicate") }),
+    /* @__PURE__ */ jsx7(Button2, { disabled: !canDelete, tone: "critical", onClick: onDelete, children: i18n.t("remove") })
+  ] }) });
+}
+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") })
+    ] })
+  ] }) });
+}
+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") })
+    ] })
+  ] }) });
+}
 function inspectorFieldConfig(name, field) {
   const key = name.toLowerCase();
   const group = /(?:href|url)/.test(key) ? "Links" : /(?:default|shipment|query|hide)/.test(key) ? "Tracking settings" : /(?:id|variant|theme)/.test(key) ? "Advanced" : "Content";
   const description = field.description ?? (field.control === "textarea" ? "\u9002\u5408\u8F83\u957F\u6216\u591A\u884C\u7684\u5C55\u793A\u6587\u6848\u3002" : field.control === "url" ? "\u4F7F\u7528\u7AD9\u5185\u76F8\u5BF9\u8DEF\u5F84\u6216 HTTPS \u5730\u5740\u3002" : key.includes("shipment") ? "\u591A\u4E2A\u5305\u88F9\u6807\u7B7E\u4F7F\u7528 | \u5206\u9694\u3002" : key.includes("default") ? "\u4EC5\u7528\u4E8E\u7F16\u8F91\u5668\u548C\u7A7A\u72B6\u6001\u9884\u89C8\u3002" : void 0);
   return { ...field, group: field.group ?? group, description };
 }
-function DocumentInspector({ block, registry, disabled, onChange }) {
+var appearanceTokens = [["color.primary", "\u4E3B\u8272"], ["color.surface", "\u8868\u9762\u8272"], ["radius", "\u5706\u89D2"], ["spacing", "\u95F4\u8DDD"]];
+function DocumentInspector({ pageId, assetPicker, block, registry, disabled, appearanceControls, onChange, onPresentationChange }) {
+  const [assetError, setAssetError] = useState3(null);
+  const [selectingAsset, setSelectingAsset] = useState3(false);
   const definition = registry?.getBlock(block.type);
   const groupedFields = definition ? Object.entries(definition.fields).reduce((groups, entry) => {
     const [name, field] = entry;
@@ -970,21 +1319,42 @@ function DocumentInspector({ block, registry, disabled, onChange }) {
     (groups[group] ??= []).push([name, configuredField]);
     return groups;
   }, {}) : {};
-  return /* @__PURE__ */ jsxs4("div", { className: "pb-inspector", "data-testid": "document-inspector", children: [
-    /* @__PURE__ */ jsxs4("header", { className: "pb-inspector__header", children: [
-      /* @__PURE__ */ jsx6(Badge2, { children: block.type }),
-      /* @__PURE__ */ jsxs4("div", { children: [
-        /* @__PURE__ */ jsx6(Text2, { as: "p", variant: "headingSm", children: blockLabel(block, registry) }),
-        /* @__PURE__ */ jsx6(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: definition?.category ?? "Core block" })
+  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" })
       ] })
     ] }),
-    block.type === "core.text" ? /* @__PURE__ */ jsx6(InspectorSection, { title: "Content", children: /* @__PURE__ */ jsx6(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, onChange: (content) => onChange({ content }) }) }) : null,
-    block.type === "core.image" ? /* @__PURE__ */ jsxs4(InspectorSection, { title: "Image", children: [
-      /* @__PURE__ */ jsx6(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, onChange: (src) => onChange({ src }) }),
-      /* @__PURE__ */ jsx6(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, onChange: (alt) => onChange({ alt }) })
+    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, 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, 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, onChange: (alt) => onChange({ alt }) }),
+      assetPicker ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx7(Button2, { disabled: disabled || selectingAsset, onClick: () => void (async () => {
+          setSelectingAsset(true);
+          setAssetError(null);
+          try {
+            const asset = await assetPicker.selectAsset({ pageId, blockId: block.id, current: { id: typeof block.props.assetId === "string" ? block.props.assetId : void 0, url: typeof block.props.src === "string" ? block.props.src : void 0, alt: typeof block.props.alt === "string" ? block.props.alt : void 0 } });
+            if (asset) onChange({ ...block.props, assetId: asset.id, src: asset.url, alt: asset.alt ?? (typeof block.props.alt === "string" ? block.props.alt : "") });
+          } catch {
+            setAssetError("\u65E0\u6CD5\u9009\u62E9\u7D20\u6750\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+          } finally {
+            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
+      ] }) : null
     ] }) : null,
-    Object.entries(groupedFields).map(([group, fields]) => /* @__PURE__ */ jsx6(InspectorSection, { title: group, defaultOpen: group !== "Advanced", children: fields.map(([name, field]) => /* @__PURE__ */ jsx6(InspectorField, { name, field, value: block.props[name], registry, disabled, onChange: (value) => onChange({ ...block.props, [name]: value }) }, name)) }, group)),
-    definition ? /* @__PURE__ */ jsx6("p", { className: "pb-inspector__hint", children: "\u753B\u5E03\u4E2D\u5E26\u865A\u7EBF\u8FB9\u6846\u7684\u5185\u5BB9\u53EF\u76F4\u63A5\u7F16\u8F91\u3002" }) : 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: block.props[name], registry, disabled, onChange: (value) => onChange({ ...block.props, [name]: value }) }, name)) }, group)),
+    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) => {
+      const style = { ...block.style };
+      if (value.trim()) style[token] = value;
+      else delete style[token];
+      onPresentationChange({ variant: block.variant, style });
+    } }, token)) }) : null
   ] });
 }
 export {
@@ -993,6 +1363,7 @@ export {
   ExtensionRegistry,
   ExtensionRegistryError,
   PageDocumentEditorShell,
+  PageStatusCard,
   TemplateRegistry,
   WebRenderer,
   createAdminI18n,
@@ -1000,12 +1371,18 @@ export {
   createPageDocument,
   createTemplateRegistry,
   fromEngineData,
+  maximumBlockInstances,
+  mergeBlockPolicies,
   mergeThemeTokens,
   migratePageDocument,
+  minimumBlockInstances,
   normalizeThemeTokens,
   systemThemeTokens,
   toEngineData,
   toThemeStyle,
   useEditorContext,
-  validatePageDocument
+  validateBlockPolicy,
+  validateFieldValue,
+  validatePageDocument,
+  validatePageDocumentWithRegistry
 };