@standhigher/puck-page-builder 0.1.0

package/dist/index.js

@@ -0,0 +1,911 @@
+import {
+  ExtensionRegistry,
+  ExtensionRegistryError,
+  createExtensionRegistry
+} from "./chunk-RGB53WE6.js";
+import {
+  WebRenderer
+} from "./chunk-72MFV6J7.js";
+import {
+  createPageDocument,
+  migratePageDocument,
+  validatePageDocument
+} from "./chunk-G2LNCKYO.js";
+
+// src/editor/shell/EditorShell.tsx
+import { Puck } from "@puckeditor/core";
+import {
+  Badge,
+  BlockStack,
+  Box,
+  Button,
+  ButtonGroup,
+  Divider,
+  InlineStack,
+  Modal,
+  Select,
+  Text,
+  Tooltip
+} from "@shopify/polaris";
+import {
+  ArrowLeftIcon,
+  DeleteIcon,
+  DragHandleIcon,
+  DuplicateIcon,
+  LayoutSectionIcon,
+  MenuIcon,
+  PlusIcon,
+  RedoIcon,
+  UndoIcon,
+  ViewIcon,
+  XIcon
+} from "@shopify/polaris-icons";
+import { useRef, useState } from "react";
+
+// src/adapters/puck/demo-preview.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function toDemoPuckData(blocks) {
+  return {
+    root: {},
+    content: blocks.map((block) => ({
+      type: block.type,
+      props: { id: block.id, title: block.title, body: block.body }
+    }))
+  };
+}
+function createDemoPuckConfig(onSelect) {
+  const renderBlock = (kind) => (props) => {
+    const id = typeof props.id === "string" ? props.id : "unknown-block";
+    const title = typeof props.title === "string" ? props.title : "Untitled block";
+    const body = typeof props.body === "string" ? props.body : "";
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": `Select ${kind} in canvas`,
+        className: `bt-storefront__section bt-storefront__section--${kind.toLowerCase()}`,
+        "data-block-id": id,
+        onClick: () => onSelect(id),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") onSelect(id);
+        },
+        role: "button",
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "bt-storefront__eyebrow", children: kind }),
+          kind === "Hero" ? /* @__PURE__ */ jsx("h1", { children: title }) : /* @__PURE__ */ jsx("h2", { children: title }),
+          /* @__PURE__ */ jsx("p", { children: body }),
+          kind === "TrackingForm" ? /* @__PURE__ */ jsx("div", { className: "bt-storefront__tracking", children: /* @__PURE__ */ jsxs("div", { className: "bt-storefront__form", children: [
+            /* @__PURE__ */ jsx("input", { "aria-label": "Tracking number", placeholder: "Enter tracking number" }),
+            /* @__PURE__ */ jsx("button", { type: "button", children: "Track order" })
+          ] }) }) : null
+        ]
+      }
+    );
+  };
+  return {
+    components: {
+      Hero: { render: (props) => /* @__PURE__ */ jsxs("div", { className: "bt-storefront", children: [
+        /* @__PURE__ */ jsxs("header", { className: "bt-storefront__header", children: [
+          /* @__PURE__ */ jsx("span", { className: "bt-storefront__brand", children: "BESTTRACK" }),
+          /* @__PURE__ */ jsx("span", { className: "bt-storefront__link", children: "Help center" })
+        ] }),
+        renderBlock("Hero")(props)
+      ] }) },
+      TrackingForm: { render: renderBlock("TrackingForm") },
+      Text: { render: renderBlock("Text") }
+    }
+  };
+}
+
+// src/editor/state/types.ts
+var initialBlocks = [
+  {
+    id: "hero-1",
+    type: "Hero",
+    label: "\u6B22\u8FCE\u533A\u5757",
+    description: "\u9875\u9762\u6807\u9898\u4E0E\u8BF4\u660E",
+    title: "Track every order with confidence",
+    body: "A local V0.1 preview block rendered by Puck."
+  },
+  {
+    id: "tracking-form-1",
+    type: "TrackingForm",
+    label: "\u7269\u6D41\u67E5\u8BE2",
+    description: "\u67E5\u8BE2\u8868\u5355\u5360\u4F4D",
+    title: "Where is my order?",
+    body: "Enter a tracking number to view its progress."
+  },
+  {
+    id: "text-1",
+    type: "Text",
+    label: "\u5E2E\u52A9\u6587\u672C",
+    description: "\u5BCC\u6587\u672C\u5185\u5BB9\u5360\u4F4D",
+    title: "Need help?",
+    body: "Contact the store for order and delivery questions."
+  }
+];
+var initialEditorState = {
+  blocks: initialBlocks,
+  selectedBlockId: initialBlocks[0].id,
+  blockView: "blocks",
+  device: "desktop",
+  zoom: "auto",
+  saveState: "saved",
+  previewMode: "editor",
+  publishState: "draft",
+  editorLocale: "zh-CN",
+  pageLocale: "en-US",
+  isPickerOpen: false,
+  isLeftRailOpen: true,
+  isRightPanelOpen: true
+};
+
+// src/editor/shell/EditorShell.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var deviceLabels = {
+  desktop: "Desktop",
+  tablet: "Tablet",
+  mobile: "Mobile",
+  full: "Full"
+};
+var saveLabels = {
+  clean: "\u65E0\u672A\u4FDD\u5B58\u53D8\u66F4",
+  dirty: "\u672A\u4FDD\u5B58\u53D8\u66F4",
+  saving: "\u4FDD\u5B58\u4E2D",
+  saved: "\u5DF2\u4FDD\u5B58",
+  failed: "\u4FDD\u5B58\u5931\u8D25",
+  conflict: "\u5185\u5BB9\u51B2\u7A81"
+};
+function IconButton({
+  label,
+  icon,
+  onClick,
+  disabled = false,
+  pressed = false
+}) {
+  return /* @__PURE__ */ jsx2(Tooltip, { content: label, children: /* @__PURE__ */ jsx2(Button, { accessibilityLabel: label, icon, onClick, disabled, pressed, variant: "tertiary" }) });
+}
+function EditorShell({ initialState, iframe = true }) {
+  const [state, setState] = useState({ ...initialEditorState, ...initialState });
+  const [undoDepth, setUndoDepth] = useState(0);
+  const nextBlockId = useRef(state.blocks.length);
+  const selectedBlock = state.blocks.find((block) => block.id === state.selectedBlockId) ?? null;
+  const update = (patch) => setState((current) => ({ ...current, ...patch }));
+  const selectBlock = (id) => update({ selectedBlockId: id, saveState: "dirty" });
+  const puckConfig = createDemoPuckConfig(selectBlock);
+  const puckData = toDemoPuckData(state.blocks);
+  const addBlock = (type) => {
+    const next = {
+      Hero: { label: "\u6B22\u8FCE\u533A\u5757", description: "\u9875\u9762\u6807\u9898\u4E0E\u8BF4\u660E", title: "A new welcome", body: "Local demo content." },
+      TrackingForm: { label: "\u7269\u6D41\u67E5\u8BE2", description: "\u67E5\u8BE2\u8868\u5355\u5360\u4F4D", title: "Track an order", body: "Use a tracking number." },
+      Text: { label: "\u5E2E\u52A9\u6587\u672C", description: "\u5BCC\u6587\u672C\u5185\u5BB9\u5360\u4F4D", title: "Helpful information", body: "Local demo content." }
+    }[type];
+    const id = `${type.toLowerCase()}-${nextBlockId.current++}`;
+    update({ blocks: [...state.blocks, { id, type, ...next }], selectedBlockId: id, saveState: "dirty", isPickerOpen: false });
+  };
+  const duplicateBlock = (block) => {
+    const id = `${block.type.toLowerCase()}-${nextBlockId.current++}`;
+    const duplicate = { ...block, id, label: `${block.label} \u526F\u672C` };
+    const index = state.blocks.findIndex((item) => item.id === block.id);
+    const blocks = [...state.blocks];
+    blocks.splice(index + 1, 0, duplicate);
+    update({ blocks, selectedBlockId: id, saveState: "dirty" });
+  };
+  const deleteBlock = (block) => {
+    const blocks = state.blocks.filter((item) => item.id !== block.id);
+    update({ blocks, selectedBlockId: blocks[0]?.id ?? null, saveState: "dirty" });
+  };
+  const moveBlock = (id, direction) => {
+    const from = state.blocks.findIndex((block) => block.id === id);
+    const to = from + direction;
+    if (to < 0 || to >= state.blocks.length) return;
+    const blocks = [...state.blocks];
+    [blocks[from], blocks[to]] = [blocks[to], blocks[from]];
+    update({ blocks, saveState: "dirty" });
+  };
+  const savePresentationState = () => {
+    update({ saveState: "saving" });
+    window.setTimeout(() => update({ saveState: "saved" }), 350);
+  };
+  return /* @__PURE__ */ jsx2(Puck, { config: puckConfig, data: puckData, iframe: { enabled: iframe }, children: /* @__PURE__ */ jsx2(Puck.Layout, { children: /* @__PURE__ */ jsxs2("div", { className: "pb-shell", "data-testid": "editor-shell", "data-preview-mode": state.previewMode, children: [
+    /* @__PURE__ */ jsx2("header", { className: "pb-header", children: /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", gap: "300", wrap: false, children: [
+      /* @__PURE__ */ jsxs2(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [
+        /* @__PURE__ */ jsx2(IconButton, { label: "\u8FD4\u56DE\u9875\u9762\u5217\u8868", icon: ArrowLeftIcon }),
+        /* @__PURE__ */ jsxs2("div", { className: "pb-page-title", children: [
+          /* @__PURE__ */ jsx2(Text, { as: "h1", variant: "headingSm", children: "Tracking page" }),
+          /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "English (US)" })
+        ] }),
+        /* @__PURE__ */ jsx2(Badge, { tone: state.saveState === "failed" || state.saveState === "conflict" ? "critical" : "info", children: saveLabels[state.saveState] })
+      ] }),
+      /* @__PURE__ */ jsxs2(InlineStack, { gap: "150", blockAlign: "center", wrap: false, children: [
+        /* @__PURE__ */ jsx2(IconButton, { label: "\u64A4\u9500", icon: UndoIcon, disabled: undoDepth === 0, onClick: () => setUndoDepth((depth) => Math.max(0, depth - 1)) }),
+        /* @__PURE__ */ jsx2(IconButton, { label: "\u6062\u590D", icon: RedoIcon, disabled: true }),
+        /* @__PURE__ */ jsx2(Button, { onClick: savePresentationState, children: "\u4FDD\u5B58\u8349\u7A3F" }),
+        /* @__PURE__ */ jsx2(Button, { onClick: () => update({ previewMode: "mock-preview" }), icon: ViewIcon, children: "\u9884\u89C8" }),
+        /* @__PURE__ */ jsx2(Button, { variant: "primary", disabled: true, children: "\u53D1\u5E03" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "pb-workspace", children: [
+      /* @__PURE__ */ jsxs2("nav", { className: "pb-tool-rail", "aria-label": "\u7F16\u8F91\u5668\u5DE5\u5177", children: [
+        /* @__PURE__ */ jsx2(IconButton, { label: "\u533A\u5757", icon: LayoutSectionIcon, pressed: state.blockView === "blocks", onClick: () => update({ blockView: "blocks", isLeftRailOpen: true }) }),
+        /* @__PURE__ */ jsx2(IconButton, { label: "\u7ED3\u6784", icon: MenuIcon, pressed: state.blockView === "outline", onClick: () => update({ blockView: "outline", isLeftRailOpen: true }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("aside", { className: `pb-left-panel ${state.isLeftRailOpen ? "" : "pb-panel--closed"}`, "aria-label": "Block navigation", children: [
+        /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(Text, { as: "h2", variant: "headingSm", children: state.blockView === "blocks" ? "\u533A\u5757" : "\u7ED3\u6784" }),
+            /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: state.blockView === "blocks" ? "\u9875\u9762\u533A\u5757\u4E0E\u5FEB\u6377\u64CD\u4F5C" : "\u5F53\u524D\u9875\u9762\u5C42\u7EA7" })
+          ] }),
+          /* @__PURE__ */ jsx2(IconButton, { label: "\u6536\u8D77\u5DE6\u4FA7\u9762\u677F", icon: XIcon, onClick: () => update({ isLeftRailOpen: false }) })
+        ] }),
+        /* @__PURE__ */ jsx2(BlockList, { view: state.blockView, blocks: state.blocks, selectedBlockId: state.selectedBlockId, onSelect: selectBlock, onMove: moveBlock, onDuplicate: duplicateBlock, onDelete: deleteBlock }),
+        /* @__PURE__ */ jsx2(Button, { fullWidth: true, icon: PlusIcon, onClick: () => update({ isPickerOpen: true }), children: "\u6DFB\u52A0\u6A21\u5757" })
+      ] }),
+      /* @__PURE__ */ 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
+        ] }),
+        !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
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs2("aside", { className: `pb-right-panel ${state.isRightPanelOpen ? "" : "pb-panel--closed"}`, "aria-label": "Block properties", children: [
+        /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(Text, { as: "h2", variant: "headingSm", children: "\u5C5E\u6027" }),
+            /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: selectedBlock?.label ?? "\u672A\u9009\u62E9\u533A\u5757" })
+          ] }),
+          /* @__PURE__ */ jsx2(IconButton, { label: "\u6536\u8D77\u5C5E\u6027\u9762\u677F", icon: XIcon, onClick: () => update({ isRightPanelOpen: false }) })
+        ] }),
+        selectedBlock ? /* @__PURE__ */ jsx2(PropertyPanel, { block: selectedBlock, editorLocale: state.editorLocale, pageLocale: state.pageLocale, onEditorLocale: (editorLocale) => update({ editorLocale }), onPageLocale: (pageLocale) => update({ pageLocale }) }) : /* @__PURE__ */ jsx2(Text, { as: "p", tone: "subdued", children: "\u9009\u62E9\u4E00\u4E2A\u533A\u5757\u4EE5\u67E5\u770B\u5C5E\u6027\u3002" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(Modal, { instant: true, open: state.isPickerOpen, onClose: () => update({ isPickerOpen: false }), title: "\u6DFB\u52A0\u6A21\u5757", primaryAction: { content: "\u5173\u95ED", onAction: () => update({ isPickerOpen: false }) }, children: /* @__PURE__ */ jsx2(Modal.Section, { children: /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", children: [
+      /* @__PURE__ */ jsx2(Text, { as: "p", tone: "subdued", children: "\u672C\u7248\u4EC5\u64CD\u4F5C\u672C\u5730\u6F14\u793A\u533A\u5757\uFF0C\u4E0D\u4F1A\u5199\u5165\u9875\u9762\u6570\u636E\u6216\u8C03\u7528\u4E1A\u52A1\u63A5\u53E3\u3002" }),
+      /* @__PURE__ */ jsx2(InlineStack, { gap: "200", wrap: true, children: ["Hero", "TrackingForm", "Text"].map((type) => /* @__PURE__ */ jsx2(Button, { onClick: () => addBlock(type), children: type }, type)) })
+    ] }) }) })
+  ] }) }) });
+}
+function BlockList({
+  view,
+  blocks,
+  selectedBlockId,
+  onSelect,
+  onMove,
+  onDuplicate,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: `pb-block-list pb-block-list--${view}`, "data-testid": `${view}-view`, children: blocks.map((block, index) => /* @__PURE__ */ jsxs2("article", { className: `pb-block-row ${block.id === selectedBlockId ? "pb-block-row--selected" : ""}`, children: [
+    /* @__PURE__ */ jsx2("span", { className: "pb-block-handle", "aria-label": `${block.label} \u62D6\u52A8\u6392\u5E8F`, children: /* @__PURE__ */ jsx2(DragHandleIcon, {}) }),
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "pb-block-select", onClick: () => onSelect(block.id), "aria-pressed": block.id === selectedBlockId, children: [
+      /* @__PURE__ */ jsx2(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: block.label }),
+      view === "blocks" ? /* @__PURE__ */ jsx2(Text, { as: "span", variant: "bodySm", tone: "subdued", children: block.description }) : /* @__PURE__ */ jsx2(Text, { as: "span", variant: "bodySm", tone: "subdued", children: block.type })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "pb-block-actions", "aria-label": `${block.label} \u64CD\u4F5C`, children: [
+      /* @__PURE__ */ jsx2(Button, { size: "slim", onClick: () => onMove(block.id, -1), disabled: index === 0, children: "\u4E0A\u79FB" }),
+      /* @__PURE__ */ jsx2(Button, { size: "slim", onClick: () => onMove(block.id, 1), disabled: index === blocks.length - 1, children: "\u4E0B\u79FB" }),
+      /* @__PURE__ */ jsx2(IconButton, { label: `\u590D\u5236 ${block.label}`, icon: DuplicateIcon, onClick: () => onDuplicate(block) }),
+      /* @__PURE__ */ jsx2(IconButton, { label: `\u5220\u9664 ${block.label}`, icon: DeleteIcon, onClick: () => onDelete(block) })
+    ] })
+  ] }, block.id)) });
+}
+function CanvasToolbar({ device, zoom, onDevice, onZoom }) {
+  return /* @__PURE__ */ jsx2("div", { className: "pb-canvas-toolbar", children: /* @__PURE__ */ jsxs2(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", wrap: true, children: [
+    /* @__PURE__ */ jsx2(ButtonGroup, { variant: "segmented", children: Object.keys(deviceLabels).map((item) => /* @__PURE__ */ jsx2(Button, { pressed: device === item, onClick: () => onDevice(item), children: deviceLabels[item] }, item)) }),
+    /* @__PURE__ */ jsx2(Select, { label: "\u7F29\u653E", labelHidden: true, value: zoom, options: [{ label: "Auto", value: "auto" }, { label: "50%", value: "50" }, { label: "70%", value: "70" }, { label: "100%", value: "100" }], onChange: (value) => onZoom(value) })
+  ] }) });
+}
+function PropertyPanel({
+  block,
+  editorLocale,
+  pageLocale,
+  onEditorLocale,
+  onPageLocale
+}) {
+  const [tab, setTab] = useState(0);
+  const tabs = ["\u5185\u5BB9", "\u6837\u5F0F", "\u9AD8\u7EA7"];
+  return /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", "data-testid": "property-panel", children: [
+    /* @__PURE__ */ jsx2("div", { className: "pb-inspector-tabs", role: "tablist", "aria-label": "\u5C5E\u6027\u5206\u7C7B", children: tabs.map((label, index) => /* @__PURE__ */ jsx2("button", { type: "button", role: "tab", "aria-selected": tab === index, className: tab === index ? "pb-inspector-tab--selected" : "", onClick: () => setTab(index), children: label }, label)) }),
+    tab === 0 ? /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", children: [
+      /* @__PURE__ */ jsx2(Badge, { children: block.type }),
+      /* @__PURE__ */ jsx2(Text, { as: "p", variant: "headingSm", children: block.label }),
+      /* @__PURE__ */ jsx2(Divider, {}),
+      /* @__PURE__ */ jsxs2(Text, { as: "p", tone: "subdued", children: [
+        "\u5F53\u524D\u9009\u4E2D\uFF1A",
+        block.id
+      ] }),
+      /* @__PURE__ */ jsx2(Text, { as: "p", children: block.description }),
+      /* @__PURE__ */ jsx2(Box, { padding: "300", background: "bg-surface-secondary", borderRadius: "200", children: /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u5B57\u6BB5\u7F16\u8F91\u5C06\u5728 PageDocument \u7248\u672C\u5B9E\u73B0\uFF1BV0.1.1 \u4EC5\u63D0\u4F9B\u771F\u5B9E\u9875\u9762\u9884\u89C8\u548C\u9009\u62E9\u53CD\u9988\u3002" }) })
+    ] }) : null,
+    tab === 1 ? /* @__PURE__ */ jsx2(BlockStack, { gap: "300", children: /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u6837\u5F0F\u914D\u7F6E\u5C06\u7531 Block Field \u4E0E Theme Token \u63D0\u4F9B\u3002\u672C\u7248\u4FDD\u6301 Storefront \u9875\u9762\u6837\u5F0F\u4E0E\u7F16\u8F91\u5668 UI \u9694\u79BB\u3002" }) }) : null,
+    tab === 2 ? /* @__PURE__ */ jsxs2(BlockStack, { gap: "300", children: [
+      /* @__PURE__ */ jsx2(Text, { as: "p", variant: "bodySm", tone: "subdued", children: "\u8BED\u8A00\u5165\u53E3\u5C5E\u4E8E Inspector\uFF0C\u907F\u514D\u5728\u4E3B\u5DE5\u5177\u680F\u91CD\u590D\u5360\u4F4D\u3002" }),
+      /* @__PURE__ */ jsx2(Select, { label: "Editor Language", options: [{ label: "\u4E2D\u6587", value: "zh-CN" }, { label: "English", value: "en-US" }], value: editorLocale, onChange: onEditorLocale }),
+      /* @__PURE__ */ jsx2(Select, { label: "Page Locale", options: [{ label: "English (US)", value: "en-US" }, { label: "\u4E2D\u6587", value: "zh-CN" }], value: pageLocale, onChange: onPageLocale })
+    ] }) : null
+  ] });
+}
+
+// src/editor/shell/PageDocumentEditorShell.tsx
+import { Puck as Puck2, usePuck } from "@puckeditor/core";
+import { Badge as Badge2, Banner, BlockStack as BlockStack2, 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 { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+
+// src/adapters/puck/page-document-config.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId, registry) {
+  const extensionComponents = Object.fromEntries((registry?.blocks ?? []).flatMap((block) => {
+    const BlockRenderer = block.render.web;
+    if (!BlockRenderer) return [];
+    return [[block.type, {
+      render: (props) => {
+        const id = typeof props.id === "string" ? props.id : `unknown-${block.type}`;
+        return /* @__PURE__ */ jsx3("section", { className: "pb-document-canvas__extension", "aria-label": `Select ${block.label} in canvas`, role: "button", tabIndex: 0, onClick: () => onSelect(id), onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") onSelect(id);
+        }, children: /* @__PURE__ */ jsx3(BlockRenderer, { ...props }) });
+      }
+    }]];
+  }));
+  return {
+    components: {
+      Text: {
+        render: (props) => {
+          const id = typeof props.id === "string" ? props.id : "unknown-text";
+          const content = typeof props.content === "string" ? props.content : "";
+          const editable = id === selectedBlockId;
+          return /* @__PURE__ */ jsx3("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__ */ jsx3("p", { contentEditable: editable, suppressContentEditableWarning: true, onInput: (event) => {
+            if (editable) onPropsChange(id, { content: event.currentTarget.textContent ?? "" });
+          }, children: content }) });
+        }
+      },
+      Image: {
+        render: (props) => {
+          const id = typeof props.id === "string" ? props.id : "unknown-image";
+          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__ */ jsx3("img", { src, alt }),
+            editable ? /* @__PURE__ */ jsx3("input", { "aria-label": "\u753B\u5E03\u56FE\u7247 URL", value: src, onChange: (event) => onPropsChange(id, { src: event.currentTarget.value }), onClick: (event) => event.stopPropagation() }) : null
+          ] });
+        }
+      },
+      ...extensionComponents
+    }
+  };
+}
+
+// src/adapters/puck/page-document.ts
+var documentToPuckType = {
+  "core.text": "Text",
+  "core.image": "Image"
+};
+var puckToDocumentType = Object.fromEntries(Object.entries(documentToPuckType).map(([documentType, puckType]) => [puckType, documentType]));
+function toEngineBlock(block, registry) {
+  const type = documentToPuckType[block.type] ?? (registry?.getBlock(block.type) ? block.type : void 0);
+  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) {
+  return {
+    root: { ...document.root },
+    content: document.blocks.map((block) => toEngineBlock(block, registry))
+  };
+}
+function fromEngineData(data, base, registry) {
+  const previousBlocks = new Map(base.blocks.map((block) => [block.id, block]));
+  const blocks = data.content.flatMap((item) => {
+    const type = puckToDocumentType[item.type] ?? (registry?.getBlock(item.type) ? item.type : void 0);
+    const id = typeof item.props.id === "string" ? item.props.id : null;
+    if (!type || !id) return [];
+    const previous = previousBlocks.get(id);
+    const props = Object.fromEntries(Object.entries(item.props).filter(([key]) => key !== "id"));
+    return [{
+      id,
+      type,
+      version: previous?.version ?? 1,
+      props,
+      ...previous?.slots ? { slots: previous.slots } : {},
+      ...previous?.binding ? { binding: previous.binding } : {}
+    }];
+  });
+  const root = typeof data.root === "object" && data.root !== null && "props" in data.root ? data.root.props : data.root;
+  return createPageDocument({ ...base, root, blocks });
+}
+
+// src/editor/context/EditorContext.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx4 } 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 };
+  if (action.type === "undo") {
+    const previous = state.past.at(-1);
+    if (!previous) return state;
+    return { ...state, ...previous, past: state.past.slice(0, -1), future: [{ document: state.document, selectedBlockId: state.selectedBlockId }, ...state.future] };
+  }
+  if (action.type === "redo") {
+    const next = state.future[0];
+    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 };
+  const current = { document: state.document, selectedBlockId: state.selectedBlockId };
+  return { ...state, document: action.document, selectedBlockId: action.selectedBlockId, past: [...state.past, current], future: [] };
+}
+var EditorContext = createContext(null);
+function uniqueBlockId(type, blocks) {
+  const prefix = type.replace(/[^a-z0-9]+/gi, "-").replace(/^-|-$/g, "") || "block";
+  let index = blocks.length + 1;
+  while (blocks.some((block) => block.id === `${prefix}-${index}`)) index += 1;
+  return `${prefix}-${index}`;
+}
+function defaultBlock(type, blocks, registry) {
+  if (type === "core.text") return { id: uniqueBlockId(type, blocks), type, version: 1, props: { content: "New text block" } };
+  if (type === "core.image") return { id: uniqueBlockId(type, blocks), type, version: 1, props: { src: "https://images.unsplash.com/photo-1580674684081-7617fbf3d745?auto=format&fit=crop&w=1200&q=80", alt: "" } };
+  const definition = registry?.getBlock(type);
+  if (!definition) throw new Error(`Unknown PageDocument block type: ${type}`);
+  return { id: uniqueBlockId(type, blocks), type, version: definition.version, props: definition.defaultProps };
+}
+function EditorProvider({ initialDocument, registry, loadState = "ready", 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 = useRef2(history);
+  useEffect(() => {
+    historyRef.current = history;
+  }, [history]);
+  const [canvasSelectionRequest, setCanvasSelectionRequest] = useState2(null);
+  const editable = loadState === "ready" || loadState === "success";
+  const selectedBlock = history.document.blocks.find((block) => block.id === history.selectedBlockId) ?? null;
+  const replace = useCallback((document, selectedBlockId) => dispatch({ type: "replace", document, selectedBlockId }), []);
+  const requestCanvasSelection = useCallback((id) => {
+    if (editable) setCanvasSelectionRequest(id);
+  }, [editable]);
+  const confirmCanvasSelection = useCallback((id) => {
+    setCanvasSelectionRequest(null);
+    dispatch({ type: "select", id });
+  }, []);
+  const updateFromCanvas = useCallback((document) => {
+    const current = historyRef.current;
+    if (!editable || JSON.stringify(document) === JSON.stringify(current.document)) return;
+    replace(document, current.selectedBlockId);
+  }, [editable, 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]);
+  useEffect(() => {
+    onDocumentChange?.(history.document);
+  }, [history.document, onDocumentChange]);
+  const isDirty = JSON.stringify(history.document) !== JSON.stringify(history.savedDocument);
+  useEffect(() => {
+    if (!isDirty || typeof window === "undefined") return;
+    const confirmLeave = (event) => {
+      event.preventDefault();
+      event.returnValue = leaveWarning;
+    };
+    window.addEventListener("beforeunload", confirmLeave);
+    return () => window.removeEventListener("beforeunload", confirmLeave);
+  }, [isDirty, leaveWarning]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const keydown = (event) => {
+      const target = event.target;
+      if (target?.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target?.tagName ?? "")) return;
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "z") {
+        event.preventDefault();
+        dispatch({ type: event.shiftKey ? "redo" : "undo" });
+      } else if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "y") {
+        event.preventDefault();
+        dispatch({ type: "redo" });
+      }
+    };
+    window.addEventListener("keydown", keydown);
+    return () => window.removeEventListener("keydown", keydown);
+  }, []);
+  const value = useMemo(() => {
+    const actionState = {
+      canUndo: editable && history.past.length > 0,
+      canRedo: editable && history.future.length > 0,
+      canAdd: editable,
+      canEdit: editable && selectedBlock !== null,
+      canDelete: editable && selectedBlock !== null,
+      canDuplicate: editable && selectedBlock !== null,
+      canReorder: editable && history.document.blocks.length > 1
+    };
+    return {
+      document: history.document,
+      selectedBlockId: history.selectedBlockId,
+      selectedBlock,
+      canvasSelectionRequest,
+      device: history.device,
+      loadState,
+      isDirty,
+      actionState,
+      requestCanvasSelection,
+      confirmCanvasSelection,
+      updateFromCanvas,
+      setDevice: (device) => dispatch({ type: "device", device }),
+      addBlock: (type, beforeId) => {
+        if (!editable) 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;
+        if (targetIndex < 0) blocks.push(block);
+        else blocks.splice(targetIndex, 0, block);
+        replace({ ...history.document, blocks }, block.id);
+        return block.id;
+      },
+      duplicateBlock: (id) => {
+        if (!editable) return;
+        const index = history.document.blocks.findIndex((block2) => block2.id === id);
+        const source = history.document.blocks[index];
+        if (!source) 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);
+        replace({ ...history.document, blocks }, block.id);
+      },
+      deleteBlock: (id) => {
+        if (!editable) return;
+        const index = history.document.blocks.findIndex((block) => block.id === id);
+        if (index < 0) return;
+        const blocks = history.document.blocks.filter((block) => block.id !== id);
+        replace({ ...history.document, blocks }, blocks[index]?.id ?? blocks[index - 1]?.id ?? null);
+      },
+      moveBlock: (id, direction) => {
+        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;
+        const blocks = [...history.document.blocks];
+        [blocks[from], blocks[to]] = [blocks[to], blocks[from]];
+        replace({ ...history.document, blocks }, id);
+      },
+      reorderBlock: (id, beforeId) => {
+        if (!editable || id === beforeId) return;
+        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;
+        const blocks = [...withoutSource];
+        blocks.splice(targetIndex, 0, source);
+        replace({ ...history.document, blocks }, id);
+      },
+      updateBlockProps,
+      undo: () => {
+        if (editable) dispatch({ type: "undo" });
+      },
+      redo: () => {
+        if (editable) dispatch({ type: "redo" });
+      },
+      markSaved: () => dispatch({ type: "saved" })
+    };
+  }, [canvasSelectionRequest, confirmCanvasSelection, editable, history, isDirty, loadState, registry, replace, requestCanvasSelection, selectedBlock, updateBlockProps, updateFromCanvas]);
+  return /* @__PURE__ */ jsx4(EditorContext.Provider, { value, children });
+}
+function useEditorContext() {
+  const context = useContext(EditorContext);
+  if (!context) throw new Error("useEditorContext must be used within EditorProvider");
+  return context;
+}
+
+// src/editor/i18n/admin.ts
+var messages = {
+  "zh-CN": {
+    blocks: "\u533A\u5757",
+    outline: "\u7ED3\u6784",
+    properties: "\u5C5E\u6027",
+    addBlock: "\u6DFB\u52A0\u533A\u5757",
+    undo: "\u64A4\u9500",
+    redo: "\u6062\u590D",
+    duplicate: "\u590D\u5236",
+    remove: "\u5220\u9664",
+    moveUp: "\u4E0A\u79FB",
+    moveDown: "\u4E0B\u79FB",
+    loading: "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026",
+    empty: "\u9875\u9762\u8FD8\u6CA1\u6709\u533A\u5757",
+    error: "\u7F16\u8F91\u5668\u65E0\u6CD5\u52A0\u8F7D",
+    disabled: "\u7F16\u8F91\u5668\u5F53\u524D\u4E0D\u53EF\u7F16\u8F91",
+    success: "\u64CD\u4F5C\u5DF2\u5B8C\u6210",
+    unsaved: "\u672A\u4FDD\u5B58\u53D8\u66F4",
+    saved: "\u6240\u6709\u66F4\u6539\u5DF2\u4FDD\u7559\u5728\u5F53\u524D\u4F1A\u8BDD\u4E2D",
+    save: "\u4FDD\u5B58\u8349\u7A3F",
+    saving: "\u6B63\u5728\u4FDD\u5B58\u2026",
+    publish: "\u53D1\u5E03",
+    publishing: "\u6B63\u5728\u53D1\u5E03\u2026",
+    saveFailed: "\u4FDD\u5B58\u8349\u7A3F\u5931\u8D25",
+    publishFailed: "\u53D1\u5E03\u5931\u8D25",
+    published: "\u5DF2\u53D1\u5E03",
+    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"
+  },
+  en: {
+    blocks: "Blocks",
+    outline: "Outline",
+    properties: "Properties",
+    addBlock: "Add block",
+    undo: "Undo",
+    redo: "Redo",
+    duplicate: "Duplicate",
+    remove: "Delete",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    loading: "Loading editor\u2026",
+    empty: "This page has no blocks",
+    error: "The editor could not load",
+    disabled: "The editor is currently read-only",
+    success: "Action completed",
+    unsaved: "Unsaved changes",
+    saved: "Changes are kept in this session",
+    save: "Save draft",
+    saving: "Saving\u2026",
+    publish: "Publish",
+    publishing: "Publishing\u2026",
+    saveFailed: "Could not save draft",
+    publishFailed: "Could not publish",
+    published: "Published",
+    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"
+  }
+};
+function createAdminI18n(locale) {
+  const resolvedLocale = locale === "en" || locale === "en-US" ? "en" : "zh-CN";
+  return { locale: resolvedLocale, t: (key) => messages[resolvedLocale][key] };
+}
+
+// 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/PageDocumentEditorShell.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var deviceLabels2 = { desktop: "desktop", tablet: "tablet", mobile: "mobile" };
+function blockLabel(block, registry) {
+  return blockTypeLabel(block.type, registry);
+}
+function blockTypeLabel(type, registry) {
+  if (type === "core.text") return "\u6587\u672C";
+  if (type === "core.image") return "\u56FE\u7247";
+  return registry?.getBlock(type)?.label ?? type;
+}
+function PageDocumentEditorShell(props) {
+  return /* @__PURE__ */ jsx5(EditorProvider, { initialDocument: props.initialDocument, registry: props.registry, loadState: props.loadState, leaveWarning: createAdminI18n(props.adminLocale).t("leaveWarning"), onDocumentChange: props.onDocumentChange, children: /* @__PURE__ */ jsx5(PageDocumentEditor, { ...props }) });
+}
+function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPublish }) {
+  const editor = useEditorContext();
+  const [blockView, setBlockView] = useState3("blocks");
+  const [draggingLibraryType, setDraggingLibraryType] = useState3(null);
+  const canvasFrameRef = useRef3(null);
+  const [canvasMutationVersion, setCanvasMutationVersion] = useState3(0);
+  const [request, setRequest] = useState3("idle");
+  const [notice, setNotice] = useState3(null);
+  const i18n = createAdminI18n(adminLocale);
+  const engineData = useMemo2(() => toEngineData(editor.document, registry), [editor.document, registry]);
+  const { confirmCanvasSelection, selectedBlockId, updateBlockProps } = editor;
+  const updateFromCanvasInput = useCallback2((id, props) => {
+    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__ */ jsx5(EditorStatus, { state: editor.loadState });
+  const blockTypes = ["core.text", "core.image", ...registry?.blocks.map((block) => block.type) ?? []];
+  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();
+    setDraggingLibraryType(null);
+  };
+  const save = async () => {
+    if (!onSave || request !== "idle") return;
+    setRequest("saving");
+    setNotice(null);
+    try {
+      await onSave(editor.document);
+      editor.markSaved();
+    } catch {
+      setNotice("saveFailed");
+    } finally {
+      setRequest("idle");
+    }
+  };
+  const publish = async () => {
+    if (!onPublish || request !== "idle") return;
+    setRequest("publishing");
+    setNotice(null);
+    try {
+      await onPublish(editor.document);
+      editor.markSaved();
+      setNotice("published");
+    } catch {
+      setNotice("publishFailed");
+    } finally {
+      setRequest("idle");
+    }
+  };
+  return /* @__PURE__ */ jsx5(Puck2, { config, data: engineData, iframe: { enabled: iframe }, onChange: (data) => editor.updateFromCanvas(fromEngineData(data, editor.document, registry)), children: /* @__PURE__ */ jsxs4(Puck2.Layout, { children: [
+    /* @__PURE__ */ jsx5(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__ */ jsx5("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__ */ jsx5(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
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4(InlineStack2, { gap: "150", blockAlign: "center", wrap: false, children: [
+          /* @__PURE__ */ jsx5(Badge2, { tone: editor.isDirty ? "attention" : "success", children: editor.isDirty ? i18n.t("unsaved") : i18n.t("saved") }),
+          /* @__PURE__ */ jsx5(Button2, { disabled: !onSave || !editor.isDirty || request !== "idle", onClick: () => void save(), children: request === "saving" ? i18n.t("saving") : i18n.t("save") }),
+          /* @__PURE__ */ jsx5(Button2, { variant: "primary", disabled: !onPublish || request !== "idle", onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") }),
+          /* @__PURE__ */ jsx5(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
+          /* @__PURE__ */ jsx5(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo })
+        ] })
+      ] }) }),
+      editor.loadState === "success" ? /* @__PURE__ */ jsx5(Banner, { tone: "success", children: i18n.t("success") }) : null,
+      notice ? /* @__PURE__ */ jsx5(Banner, { tone: notice === "published" ? "success" : "critical", children: i18n.t(notice) }) : 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__ */ jsx5(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks", variant: "tertiary", onClick: () => setBlockView("blocks") }),
+          /* @__PURE__ */ jsx5(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline", variant: "tertiary", onClick: () => setBlockView("outline") })
+        ] }),
+        /* @__PURE__ */ jsxs4("aside", { className: "pb-left-panel", "aria-label": "PageDocument \u533A\u5757", children: [
+          /* @__PURE__ */ jsx5(InlineStack2, { align: "space-between", blockAlign: "center", children: /* @__PURE__ */ jsx5(Text2, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }) }),
+          blockView === "blocks" ? /* @__PURE__ */ jsx5("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) => {
+            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__ */ jsx5(Text2, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
+              /* @__PURE__ */ jsx5("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(DragHandleIcon2, {}) })
+            ] }),
+            /* @__PURE__ */ jsx5(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: type })
+          ] }, type)) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx5(Text2, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx5("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__ */ jsx5(Text2, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockLabel(block, registry) }),
+            /* @__PURE__ */ jsx5(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
+          ] }, block.id)) })
+        ] }),
+        /* @__PURE__ */ jsxs4("main", { className: "pb-canvas-area", children: [
+          /* @__PURE__ */ jsx5("div", { className: "pb-canvas-toolbar", children: /* @__PURE__ */ jsx5(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx5(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }) }),
+          /* @__PURE__ */ jsxs4("div", { className: "pb-canvas-stage", children: [
+            /* @__PURE__ */ jsx5("div", { ref: canvasFrameRef, className: `pb-canvas-frame pb-canvas-frame--${editor.device}`, "data-device": editor.device, children: /* @__PURE__ */ jsx5(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: [
+              "\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__ */ jsx5("span", { children: blockLabel(editor.selectedBlock, registry) }),
+              /* @__PURE__ */ jsx5("span", { children: "Selected" })
+            ] }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("aside", { className: "pb-right-panel", "aria-label": "PageDocument \u5C5E\u6027", children: [
+          /* @__PURE__ */ jsx5(Text2, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
+          editor.selectedBlock ? /* @__PURE__ */ jsx5(DocumentInspector, { block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props) }) : /* @__PURE__ */ jsx5(Text2, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion }) {
+  const puck = usePuck();
+  const lastSelectedId = useRef3(null);
+  const lastSyncedData = useRef3(null);
+  const lastCanvasMutationVersion = useRef3(0);
+  const serializedData = JSON.stringify(data);
+  useEffect2(() => {
+    if (lastSyncedData.current === serializedData) return;
+    lastSyncedData.current = serializedData;
+    if (canvasMutationVersion > lastCanvasMutationVersion.current) {
+      lastCanvasMutationVersion.current = canvasMutationVersion;
+      return;
+    }
+    puck.dispatch({ type: "setData", data });
+  }, [canvasMutationVersion, data, puck, serializedData]);
+  useEffect2(() => {
+    if (!requestedBlockId) return;
+    const selector = puck.getSelectorForId(requestedBlockId);
+    if (selector) puck.dispatch({ type: "setUi", ui: { itemSelector: selector } });
+  }, [puck, requestedBlockId]);
+  const selectedId = typeof puck.selectedItem?.props.id === "string" ? puck.selectedItem.props.id : null;
+  useEffect2(() => {
+    if (selectedId && lastSelectedId.current !== selectedId) {
+      lastSelectedId.current = selectedId;
+      onCanvasSelected(selectedId);
+    }
+  }, [onCanvasSelected, selectedId]);
+  return null;
+}
+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__ */ jsx5("div", { className: "pb-editor-status", "data-testid": "page-document-editor-state", "data-editor-state": state, children: /* @__PURE__ */ jsx5(Banner, { tone, title: message, children: state === "disabled" ? i18n.t("disabled") : message }) });
+}
+function DocumentInspector({ block, registry, disabled, onChange }) {
+  const definition = registry?.getBlock(block.type);
+  return /* @__PURE__ */ jsxs4(BlockStack2, { gap: "300", "data-testid": "document-inspector", children: [
+    /* @__PURE__ */ jsx5(Badge2, { children: block.type }),
+    /* @__PURE__ */ jsx5(Text2, { as: "p", variant: "headingSm", children: blockLabel(block, registry) }),
+    block.type === "core.text" ? /* @__PURE__ */ jsx5(TextField, { label: "\u6587\u672C\u5185\u5BB9", value: typeof block.props.content === "string" ? block.props.content : "", onChange: (content) => onChange({ content }), autoComplete: "off", multiline: 4, disabled }) : null,
+    block.type === "core.image" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx5(TextField, { label: "\u56FE\u7247 URL", value: typeof block.props.src === "string" ? block.props.src : "", onChange: (src) => onChange({ src }), autoComplete: "off", disabled }),
+      /* @__PURE__ */ jsx5(TextField, { label: "\u66FF\u4EE3\u6587\u672C", value: typeof block.props.alt === "string" ? block.props.alt : "", onChange: (alt) => onChange({ alt }), autoComplete: "off", disabled })
+    ] }) : null,
+    definition ? Object.entries(definition.fields).map(([name, field]) => {
+      const Field = registry?.getField(field.field)?.component;
+      return Field ? /* @__PURE__ */ jsx5(Field, { value: block.props[name], onChange: (value) => onChange({ [name]: value }) }, name) : null;
+    }) : null
+  ] });
+}
+export {
+  EditorProvider,
+  EditorShell,
+  ExtensionRegistry,
+  ExtensionRegistryError,
+  PageDocumentEditorShell,
+  WebRenderer,
+  createAdminI18n,
+  createExtensionRegistry,
+  createPageDocument,
+  fromEngineData,
+  migratePageDocument,
+  toEngineData,
+  useEditorContext,
+  validatePageDocument
+};