@standhigher/puck-page-builder 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -310,6 +310,13 @@ declare const messages: {
         readonly desktop: "桌面";
         readonly tablet: "平板";
         readonly mobile: "手机";
+        readonly collapseLeft: "收起左侧面板";
+        readonly collapseRight: "收起属性面板";
+        readonly expandLeft: "打开区块面板";
+        readonly expandRight: "打开属性面板";
+        readonly toggleSidebars: "侧栏显示";
+        readonly toggleLeftSidebar: "切换左侧面板";
+        readonly toggleRightSidebar: "切换属性面板";
     };
     readonly en: {
         readonly blocks: "Blocks";
@@ -358,13 +365,20 @@ declare const messages: {
         readonly desktop: "Desktop";
         readonly tablet: "Tablet";
         readonly mobile: "Mobile";
+        readonly collapseLeft: "Collapse blocks panel";
+        readonly collapseRight: "Collapse properties panel";
+        readonly expandLeft: "Open blocks panel";
+        readonly expandRight: "Open properties panel";
+        readonly toggleSidebars: "Sidebar visibility";
+        readonly toggleLeftSidebar: "Toggle left sidebar";
+        readonly toggleRightSidebar: "Toggle right sidebar";
     };
 };
 type AdminMessageKey = keyof typeof messages["zh-CN"];
 /** Minimal, dependency-free Admin copy catalog. Product locale remains PageDocument.settings.locale. */
 declare function createAdminI18n(locale?: string): {
     locale: AdminLocale;
-    t: (key: AdminMessageKey) => "Desktop" | "Tablet" | "Mobile" | "未保存变更" | "Outline" | "Preview" | "缩放" | "区块" | "结构" | "撤销" | "恢复" | "Delete" | "Duplicate" | "编辑锁已失效" | "属性" | "添加区块" | "复制" | "删除" | "确认删除区块？" | "删除后可使用撤销恢复。" | "取消" | "确认删除" | "上移" | "下移" | "正在加载编辑器…" | "页面还没有区块" | "编辑器无法加载" | "编辑器当前不可编辑" | "操作已完成" | "所有更改已保留在当前会话中" | "保存草稿" | "正在保存…" | "发布" | "正在发布…" | "保存草稿失败" | "重试保存" | "当前离线，恢复网络后将自动保存" | "发布失败" | "已发布" | "返回" | "离开编辑器？" | "离开" | "自动缩放" | "正式预览" | "添加到店铺" | "正在获取编辑锁…" | "该页面正在被编辑" | "页面为只读状态" | "你有未保存的更改。确定要离开吗？" | "选择一个区块以编辑。" | "桌面" | "平板" | "手机" | "Blocks" | "Properties" | "Add block" | "Undo" | "Redo" | "Delete this block?" | "You can restore it with Undo after deleting." | "Cancel" | "Delete block" | "Move up" | "Move down" | "Loading editor…" | "This page has no blocks" | "The editor could not load" | "The editor is currently read-only" | "Action completed" | "Unsaved changes" | "Changes are kept in this session" | "Save draft" | "Saving…" | "Publish" | "Publishing…" | "Could not save draft" | "Retry save" | "Offline — changes will save when connection returns" | "Could not publish" | "Published" | "Back" | "Leave the editor?" | "Leave" | "Zoom" | "Auto zoom" | "Add to store" | "Acquiring edit lock…" | "This page is being edited" | "The edit lock has expired" | "This page is read-only" | "You have unsaved changes. Are you sure you want to leave?" | "Select a block to edit it.";
+    t: (key: AdminMessageKey) => "Desktop" | "Tablet" | "Mobile" | "未保存变更" | "Outline" | "Preview" | "缩放" | "区块" | "结构" | "撤销" | "恢复" | "收起左侧面板" | "收起属性面板" | "Delete" | "Duplicate" | "编辑锁已失效" | "属性" | "添加区块" | "复制" | "删除" | "确认删除区块？" | "删除后可使用撤销恢复。" | "取消" | "确认删除" | "上移" | "下移" | "正在加载编辑器…" | "页面还没有区块" | "编辑器无法加载" | "编辑器当前不可编辑" | "操作已完成" | "所有更改已保留在当前会话中" | "保存草稿" | "正在保存…" | "发布" | "正在发布…" | "保存草稿失败" | "重试保存" | "当前离线，恢复网络后将自动保存" | "发布失败" | "已发布" | "返回" | "离开编辑器？" | "离开" | "自动缩放" | "正式预览" | "添加到店铺" | "正在获取编辑锁…" | "该页面正在被编辑" | "页面为只读状态" | "你有未保存的更改。确定要离开吗？" | "选择一个区块以编辑。" | "桌面" | "平板" | "手机" | "打开区块面板" | "打开属性面板" | "侧栏显示" | "切换左侧面板" | "切换属性面板" | "Blocks" | "Properties" | "Add block" | "Undo" | "Redo" | "Delete this block?" | "You can restore it with Undo after deleting." | "Cancel" | "Delete block" | "Move up" | "Move down" | "Loading editor…" | "This page has no blocks" | "The editor could not load" | "The editor is currently read-only" | "Action completed" | "Unsaved changes" | "Changes are kept in this session" | "Save draft" | "Saving…" | "Publish" | "Publishing…" | "Could not save draft" | "Retry save" | "Offline — changes will save when connection returns" | "Could not publish" | "Published" | "Back" | "Leave the editor?" | "Leave" | "Zoom" | "Auto zoom" | "Add to store" | "Acquiring edit lock…" | "This page is being edited" | "The edit lock has expired" | "This page is read-only" | "You have unsaved changes. Are you sure you want to leave?" | "Select a block to edit it." | "Collapse blocks panel" | "Collapse properties panel" | "Open blocks panel" | "Open properties panel" | "Sidebar visibility" | "Toggle left sidebar" | "Toggle right sidebar";
 };
 
 declare function toEngineData(document: PageDocument, registry?: ExtensionRegistry): Data;

package/dist/index.js

@@ -347,9 +347,9 @@ function PropertyPanel({
 }
 
 // src/editor/shell/PageDocumentEditorShell.tsx
-import { Puck as Puck2, usePuck } from "@puckeditor/core";
+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 } from "@shopify/polaris-icons";
+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
@@ -809,7 +809,14 @@ var messages = {
     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",
@@ -857,7 +864,14 @@ var messages = {
     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) {
@@ -885,6 +899,12 @@ 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) {
   return registry ? validatePageDocumentWithRegistry(document, registry) : [];
 }
@@ -937,9 +957,11 @@ function PageDocumentEditorShell(props) {
   }, [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, draftPersistence, draftRevision: initialDraftRevision, autoSave = true, autoSaveDelayMs = 800, publishAction, assetPicker, pageStatus, onBack, onPreview, onAddToStore, deleteConfirmation, availableBlockTypes, appearanceControls = false }) {
+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);
@@ -1069,7 +1091,7 @@ function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPu
     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, children: [
+    /* @__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,
@@ -1082,6 +1104,10 @@ function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPu
               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__ */ jsxs5("div", { className: "pb-header-device-toolbar", children: [
@@ -1105,13 +1131,22 @@ function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPu
         ": ",
         issue.message
       ] }, `${issue.path}-${issue.message}`)) }) }) : null,
-      /* @__PURE__ */ jsxs5("div", { className: "pb-workspace pb-workspace--document", children: [
+      /* @__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", variant: "tertiary", onClick: () => setBlockView("blocks") }),
-          /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline", variant: "tertiary", onClick: () => setBlockView("outline") })
+          /* @__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__ */ jsxs5("aside", { className: "pb-left-panel", "aria-label": "PageDocument \u533A\u5757", children: [
-          /* @__PURE__ */ jsx7(InlineStack3, { align: "space-between", blockAlign: "center", children: /* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }) }),
+        /* @__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();
@@ -1131,19 +1166,28 @@ function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPu
             /* @__PURE__ */ jsx7(Text3, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
           ] }, block.id)) })
         ] }),
-        /* @__PURE__ */ jsx7("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__ */ 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" })
+        /* @__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__ */ 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__ */ jsxs5("aside", { className: "pb-right-panel", "aria-label": "PageDocument \u5C5E\u6027", children: [
-          /* @__PURE__ */ jsx7(Text3, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
+        ] }),
+        /* @__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) })
@@ -1310,8 +1354,7 @@ function DocumentInspector({ pageId, assetPicker, block, registry, disabled, app
       if (value.trim()) style[token] = value;
       else delete style[token];
       onPresentationChange({ variant: block.variant, style });
-    } }, token)) }) : null,
-    definition ? /* @__PURE__ */ jsx7("p", { className: "pb-inspector__hint", children: "\u753B\u5E03\u4E2D\u5E26\u865A\u7EBF\u8FB9\u6846\u7684\u5185\u5BB9\u53EF\u76F4\u63A5\u7F16\u8F91\u3002" }) : null
+    } }, token)) }) : null
   ] });
 }
 export {

package/package.json

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

package/src/styles.css

@@ -5,17 +5,24 @@
 body { margin: 0; min-width: 320px; }
 button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--builder-accent); outline-offset: 2px; }
 .pb-shell { min-height: 100vh; color: var(--builder-text); background: var(--builder-canvas-bg); }
+.pb-shell [class*="PuckLayout-inner"] { height: auto !important; min-height: 100%; }
 .pb-header { position: sticky; top: 0; z-index: 20; min-height: 56px; padding: var(--builder-space-2) var(--builder-space-4); border-bottom: 1px solid var(--builder-border); background: var(--builder-surface); }
 .pb-header-content { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--builder-space-3); }
-.pb-header-title-group { display: flex; align-items: flex-start; gap: var(--builder-space-2); min-width: 0; }
+.pb-header-title-group { display: flex; align-items: center; gap: var(--builder-space-2); min-width: 0; }
 .pb-page-title { display: grid; gap: 0; min-width: 0; }
+.pb-header-sidebar-toggles { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
+.pb-header-sidebar-toggles [class*="IconButton"] { min-width: 28px; min-height: 28px; padding: 0; color: var(--builder-text); }
+.pb-header-sidebar-toggles svg { display: block; width: 28px; height: 28px; }
 .pb-page-title p { margin: 0; }
 .pb-header-device-toolbar { display: flex; align-items: center; justify-self: center; gap: var(--builder-space-2); }
 .pb-header-actions { justify-self: end; min-width: 0; }
 .pb-zoom-control { width: 112px; }
 .pb-page-status-card { display: grid; gap: 2px; margin-top: var(--builder-space-1); }
 .pb-page-status-card p { margin: 0; }
-.pb-workspace { display: grid; grid-template-columns: 64px minmax(260px, 300px) minmax(640px, 1fr) minmax(300px, 320px); min-height: calc(100vh - 56px); }
+.pb-workspace { display: grid; grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 320px); min-height: calc(100vh - 56px); }
+.pb-workspace--left-closed:not(.pb-workspace--right-closed) { grid-template-columns: 64px minmax(0, 1fr) minmax(300px, 320px); }
+.pb-workspace--right-closed:not(.pb-workspace--left-closed) { grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr); }
+.pb-workspace--left-closed.pb-workspace--right-closed { grid-template-columns: 64px minmax(0, 1fr); }
 .pb-tool-rail { display: flex; flex-direction: column; align-items: center; gap: var(--builder-space-2); padding: var(--builder-space-2); border-right: 1px solid var(--builder-border); background: var(--builder-surface-subtle); }
 .pb-tool-rail .Polaris-Button { min-width: 44px; min-height: 44px; }
 .pb-left-panel, .pb-right-panel { display: flex; flex-direction: column; gap: var(--builder-space-4); min-width: 0; padding: var(--builder-space-4); overflow: auto; background: var(--builder-surface); }
@@ -58,18 +65,20 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-block-select { display: flex; flex: 1; flex-direction: column; gap: var(--builder-space-1); min-width: 0; padding: var(--builder-space-1); border: 0; border-radius: var(--builder-control-radius); text-align: left; color: inherit; background: transparent; cursor: pointer; }
 .pb-block-actions { display: none; align-items: center; gap: var(--builder-space-1); }
 .pb-block-row:hover .pb-block-actions, .pb-block-row--selected .pb-block-actions, .pb-block-row:focus-within .pb-block-actions { display: flex; }
-.pb-canvas-area { display: flex; flex-direction: column; gap: var(--builder-space-3); min-width: 0; padding: var(--builder-space-4); overflow: auto; background: var(--builder-canvas-bg); }
+.pb-canvas-area { display: flex; flex-direction: column; gap: var(--builder-space-3); min-width: 0; min-height: 0; padding: var(--builder-space-4); overflow: auto; background: var(--builder-canvas-bg); }
 .pb-canvas-toolbar { padding: var(--builder-space-2); border: 1px solid var(--builder-border); border-radius: var(--builder-panel-radius); background: var(--builder-surface); }
-.pb-canvas-stage { position: relative; display: flex; justify-content: center; min-height: 38rem; padding: var(--builder-space-6); }
-.pb-canvas-frame { width: 100%; min-height: 38rem; margin: 0 auto; overflow: hidden; border: 1px solid var(--builder-border); border-radius: var(--builder-canvas-radius); background: var(--builder-surface); box-shadow: var(--builder-canvas-shadow); transition: width 160ms ease, transform 160ms ease; }
-.pb-canvas-drop-target { position: absolute; inset: var(--builder-space-6); z-index: 2; display: grid; place-items: center; border: 2px dashed var(--builder-accent); border-radius: var(--builder-canvas-radius); color: var(--builder-accent); background: color-mix(in srgb, var(--builder-accent-subtle) 88%, transparent); font-weight: 600; pointer-events: auto; }
+.pb-canvas-stage { position: relative; display: block; padding: 0; height: auto; }
+.pb-canvas-frame { width: 100%; height: auto; margin: 0 auto; overflow: visible; border: 1px solid var(--builder-border); border-radius: var(--builder-canvas-radius); background: var(--builder-surface); box-shadow: var(--builder-canvas-shadow); transition: width 160ms ease, transform 160ms ease; }
+.pb-canvas-frame iframe { display: block; width: 100%; height: auto !important; min-height: 0 !important; border: 0; }
+.pb-canvas-frame [class*="PuckPreview"] { position: relative; height: auto !important; }
+.pb-canvas-drop-target { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; min-height: 12rem; border: 2px dashed var(--builder-accent); border-radius: var(--builder-canvas-radius); color: var(--builder-accent); background: color-mix(in srgb, var(--builder-accent-subtle) 88%, transparent); font-weight: 600; pointer-events: auto; }
 .pb-canvas-frame--tablet { width: min(100%, 768px); }
 .pb-canvas-frame--mobile { width: min(100%, 390px); }
 .pb-canvas-frame--full { width: 100%; }
-.pb-canvas-frame--zoom-50 { transform: scale(.5); transform-origin: top center; margin-bottom: -19rem; }
-.pb-canvas-frame--zoom-70 { transform: scale(.7); transform-origin: top center; margin-bottom: -11rem; }
+.pb-canvas-frame--zoom-50 { transform: scale(.5); transform-origin: top center; }
+.pb-canvas-frame--zoom-70 { transform: scale(.7); transform-origin: top center; }
 .pb-canvas-frame--zoom-100 { transform: scale(1); }
-.pb-canvas-overlay { position: absolute; top: calc(var(--builder-space-6) + var(--builder-space-2)); left: 50%; display: flex; gap: var(--builder-space-2); padding: var(--builder-space-1) var(--builder-space-2); border: 2px solid var(--builder-accent); border-radius: var(--builder-control-radius); color: var(--builder-accent); background: var(--builder-surface); font-size: 12px; font-weight: 600; transform: translateX(-50%); box-shadow: var(--builder-canvas-shadow); pointer-events: none; }
+.pb-canvas-overlay { position: absolute; top: var(--builder-space-2); left: 50%; display: flex; gap: var(--builder-space-2); padding: var(--builder-space-1) var(--builder-space-2); border: 2px solid var(--builder-accent); border-radius: var(--builder-control-radius); color: var(--builder-accent); background: var(--builder-surface); font-size: 12px; font-weight: 600; transform: translateX(-50%); box-shadow: var(--builder-canvas-shadow); pointer-events: none; }
 .pb-canvas-overlay span:last-child { color: var(--builder-text-muted); font-weight: 500; }
 .pb-collapsed-actions { display: flex; gap: var(--builder-space-2); }
 .pb-inspector-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: var(--builder-space-1); border: 1px solid var(--builder-border); border-radius: var(--builder-control-radius); background: var(--builder-surface-subtle); }
@@ -94,7 +103,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-document-canvas__text, .pb-document-canvas__image { max-width: 760px; margin: 0 auto; padding: 48px; color: #1d2939; background: #fff; cursor: pointer; }
 .pb-document-canvas__text { font-size: clamp(32px, 4vw, 52px); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; }
 .pb-document-canvas__text p { margin: 0; }
-.pb-document-canvas__text p[contenteditable="true"] { outline: 1px dashed var(--builder-accent); outline-offset: 8px; cursor: text; }
+.pb-document-canvas__text p[contenteditable="true"] { /* outline: 1px dashed var(--builder-accent); outline-offset: 8px; */ cursor: text; }
 .pb-document-canvas__image { padding-top: 0; }
 .pb-document-canvas__image img { display: block; width: 100%; border-radius: 12px; }
 .pb-document-canvas__image input { width: 100%; margin-top: var(--builder-space-3); padding: var(--builder-space-2); border: 1px solid var(--builder-accent); border-radius: var(--builder-control-radius); color: var(--builder-text); background: var(--builder-surface); font: inherit; }
@@ -106,6 +115,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-web-renderer__image img { display: block; width: 100%; border-radius: 18px; }
 
 /* Storefront-only presentation rendered inside the Puck iframe. */
+#frame-root { height: auto !important; min-height: 0 !important; }
 .bt-storefront { min-height: 100%; padding: 48px clamp(24px, 7vw, 96px); color: #18212b; background: #fffdf9; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
 .bt-storefront__header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 32px; border-bottom: 1px solid #e6e1da; font-size: 14px; }
 .bt-storefront__brand { font-weight: 700; letter-spacing: .04em; }
@@ -120,6 +130,6 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .bt-storefront__form { display: flex; gap: 12px; margin-top: 24px; }
 .bt-storefront__form input { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid #b8c3cc; border-radius: 8px; font: inherit; }
 .bt-storefront__form button { padding: 13px 18px; border: 0; border-radius: 8px; color: white; background: #203e54; font: inherit; font-weight: 600; }
-@media (max-width: 1180px) { .pb-workspace { grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr); } .pb-right-panel { grid-column: 2 / -1; border-top: 1px solid var(--builder-border); border-left: 0; } }
+@media (max-width: 1180px) { .pb-workspace { grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr); } .pb-workspace--left-closed { grid-template-columns: 64px minmax(0, 1fr); } .pb-right-panel { grid-column: 2 / -1; border-top: 1px solid var(--builder-border); border-left: 0; } }
 @media (max-width: 1023px) { .pb-header { position: static; overflow: auto; } .pb-workspace { grid-template-columns: 64px minmax(0, 1fr); } .pb-left-panel, .pb-right-panel { grid-column: 2; border-left: 0; border-right: 0; border-bottom: 1px solid var(--builder-border); } .pb-canvas-area { grid-column: 2; } }
-@media (max-width: 640px) { .pb-header, .pb-canvas-area { padding: var(--builder-space-2); } .pb-header-content { min-width: 680px; } .pb-canvas-stage { padding: var(--builder-space-3) 0; } .pb-canvas-frame--tablet, .pb-canvas-frame--mobile { width: 100%; } .bt-storefront { padding: 28px 20px; } .bt-storefront__form { flex-direction: column; } }
+@media (max-width: 640px) { .pb-header, .pb-canvas-area { padding: var(--builder-space-2); } .pb-header-content { min-width: 680px; } .pb-canvas-stage { padding: 0; } .pb-canvas-frame--tablet, .pb-canvas-frame--mobile { width: 100%; } .bt-storefront { padding: 28px 20px; } .bt-storefront__form { flex-direction: column; } }