@standhigher/puck-page-builder 0.12.1 → 0.12.2

package/dist/index.d.ts

@@ -238,7 +238,7 @@ type PageDocumentEditorShellProps = {
     /** Host-owned single-editor lock. Without this adapter the package stays backwards-compatible and editable. */
     sessionAdapter?: EditorSessionAdapter;
     onSessionStateChange?: (state: EditorSessionState) => void;
-    /** Host-owned draft persistence shared by the manual-save and 800ms autosave paths. */
+    /** Host-owned draft persistence used by the 800ms autosave path. */
     draftPersistence?: DraftPersistenceAdapter;
     draftRevision?: number;
     autoSave?: boolean;
@@ -323,6 +323,9 @@ declare const messages: {
         readonly offline: "当前离线，恢复网络后将自动保存";
         readonly publishFailed: "发布失败";
         readonly published: "已发布";
+        readonly publishSuccessTitle: "发布成功";
+        readonly publishSuccessMessage: "页面已发布，消费者将看到当前版本。";
+        readonly publishSuccessClose: "完成";
         readonly back: "返回";
         readonly confirmLeaveTitle: "离开编辑器？";
         readonly leave: "离开";
@@ -386,6 +389,9 @@ declare const messages: {
         readonly offline: "Offline — changes will save when connection returns";
         readonly publishFailed: "Could not publish";
         readonly published: "Published";
+        readonly publishSuccessTitle: "Published";
+        readonly publishSuccessMessage: "This page is live. Shoppers will see the current version.";
+        readonly publishSuccessClose: "Done";
         readonly back: "Back";
         readonly confirmLeaveTitle: "Leave the editor?";
         readonly leave: "Leave";
@@ -422,7 +428,7 @@ 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" | "products" | "编辑锁已失效" | "属性" | "添加区块" | "复制" | "删除" | "确认删除区块？" | "删除后可使用撤销恢复。" | "取消" | "确认删除" | "上移" | "下移" | "正在加载编辑器…" | "页面还没有区块" | "编辑器无法加载" | "编辑器当前不可编辑" | "操作已完成" | "所有更改已保留在当前会话中" | "保存草稿" | "历史记录" | "正在保存…" | "发布" | "正在发布…" | "保存草稿失败" | "重试保存" | "当前离线，恢复网络后将自动保存" | "发布失败" | "已发布" | "返回" | "离开编辑器？" | "离开" | "自动缩放" | "正式预览" | "添加到店铺" | "正在获取编辑锁…" | "该页面正在被编辑" | "页面为只读状态" | "你有未保存的更改。确定要离开吗？" | "选择一个区块以编辑。" | "桌面" | "平板" | "手机" | "打开区块面板" | "打开属性面板" | "从 Shopify 选择商品" | "正在选择商品…" | "无法选择商品，请重试。" | "未选择商品" | "件商品" | "选择图片" | "正在上传图片…" | "无法上传图片，请重试。" | "未设置图片" | "移除图片" | "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" | "History" | "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" | "Select from Shopify" | "Selecting products…" | "Could not select products. Try again." | "No products selected" | "Select image" | "Uploading image…" | "Could not upload the image. Try again." | "No image selected" | "Remove image";
+    t: (key: AdminMessageKey) => "Desktop" | "Tablet" | "Mobile" | "未保存变更" | "Outline" | "Preview" | "缩放" | "区块" | "结构" | "撤销" | "恢复" | "收起左侧面板" | "收起属性面板" | "Delete" | "Duplicate" | "products" | "编辑锁已失效" | "属性" | "添加区块" | "复制" | "删除" | "确认删除区块？" | "删除后可使用撤销恢复。" | "取消" | "确认删除" | "上移" | "下移" | "正在加载编辑器…" | "页面还没有区块" | "编辑器无法加载" | "编辑器当前不可编辑" | "操作已完成" | "所有更改已保留在当前会话中" | "保存草稿" | "历史记录" | "正在保存…" | "发布" | "正在发布…" | "保存草稿失败" | "重试保存" | "当前离线，恢复网络后将自动保存" | "发布失败" | "已发布" | "发布成功" | "页面已发布，消费者将看到当前版本。" | "完成" | "返回" | "离开编辑器？" | "离开" | "自动缩放" | "正式预览" | "添加到店铺" | "正在获取编辑锁…" | "该页面正在被编辑" | "页面为只读状态" | "你有未保存的更改。确定要离开吗？" | "选择一个区块以编辑。" | "桌面" | "平板" | "手机" | "打开区块面板" | "打开属性面板" | "从 Shopify 选择商品" | "正在选择商品…" | "无法选择商品，请重试。" | "未选择商品" | "件商品" | "选择图片" | "正在上传图片…" | "无法上传图片，请重试。" | "未设置图片" | "移除图片" | "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" | "History" | "Saving…" | "Publish" | "Publishing…" | "Could not save draft" | "Retry save" | "Offline — changes will save when connection returns" | "Could not publish" | "Published" | "This page is live. Shoppers will see the current version." | "Done" | "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" | "Select from Shopify" | "Selecting products…" | "Could not select products. Try again." | "No products selected" | "Select image" | "Uploading image…" | "Could not upload the image. Try again." | "No image selected" | "Remove image";
 };
 
 declare function toEngineData(document: PageDocument, registry?: ExtensionRegistry): Data;

package/dist/index.js

@@ -351,7 +351,7 @@ function PropertyPanel({
 
 // src/editor/shell/PageDocumentEditorShell.tsx
 import { Puck as Puck2, usePuck } from "@puckeditor/core";
-import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, InlineStack as InlineStack3, Select as Select2, Text as Text3, TextField } from "@shopify/polaris";
+import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, InlineStack as InlineStack3, Modal as Modal2, Select as Select2, Text as Text3, TextField } from "@shopify/polaris";
 import { DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, ProductIcon, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2, XIcon as XIcon2 } from "@shopify/polaris-icons";
 import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
 
@@ -798,6 +798,9 @@ var messages = {
     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",
+    publishSuccessTitle: "\u53D1\u5E03\u6210\u529F",
+    publishSuccessMessage: "\u9875\u9762\u5DF2\u53D1\u5E03\uFF0C\u6D88\u8D39\u8005\u5C06\u770B\u5230\u5F53\u524D\u7248\u672C\u3002",
+    publishSuccessClose: "\u5B8C\u6210",
     back: "\u8FD4\u56DE",
     confirmLeaveTitle: "\u79BB\u5F00\u7F16\u8F91\u5668\uFF1F",
     leave: "\u79BB\u5F00",
@@ -861,6 +864,9 @@ var messages = {
     offline: "Offline \u2014 changes will save when connection returns",
     publishFailed: "Could not publish",
     published: "Published",
+    publishSuccessTitle: "Published",
+    publishSuccessMessage: "This page is live. Shoppers will see the current version.",
+    publishSuccessClose: "Done",
     back: "Back",
     confirmLeaveTitle: "Leave the editor?",
     leave: "Leave",
@@ -988,6 +994,10 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
   const [confirmBack, setConfirmBack] = useState3(false);
   const i18n = createAdminI18n(adminLocale);
   const engineData = useMemo2(() => toEngineData(editor.document, registry), [editor.document, registry]);
+  const canvasThemeStyle = useMemo2(() => {
+    const template = editor.document.templateId ? registry?.getTemplate(editor.document.templateId) : void 0;
+    return toThemeStyle(mergeThemeTokens(template?.theme, editor.document.theme));
+  }, [editor.document, registry]);
   const validationIssues = useMemo2(() => validateDocumentBlocks(editor.document, registry), [editor.document, registry]);
   const { confirmCanvasSelection, selectedBlockId, updateBlockProps, updateBlockPresentation } = editor;
   const updateFromCanvasInput = useCallback2((id, props, preserveCanvasValue = false) => {
@@ -1016,7 +1026,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
     const document = editor.document;
     setRequest("saving");
     setSaveState("saving");
-    setNotice(null);
+    setNotice((current) => current === "published" ? current : 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);
@@ -1030,7 +1040,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
     }
   }, [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;
+    if (!autoSave || !canPersistDraft || !editor.isDirty || resolvedSaveState !== "dirty" && resolvedSaveState !== "failed" || !isOnline || request !== "idle" || validationIssues.length > 0 || editor.sessionState !== "active") return;
     const timer = window.setTimeout(() => {
       void save();
     }, autoSaveDelayMs);
@@ -1094,7 +1104,6 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
   };
   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);
@@ -1119,25 +1128,22 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
             pageStatus ? /* @__PURE__ */ jsx7(PageStatusCard, { status: pageStatus, sessionState: editor.sessionState }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "pb-header-controls", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "pb-header-device-toolbar", children: [
-            /* @__PURE__ */ jsx7(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx7(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }),
-            /* @__PURE__ */ jsx7("div", { className: "pb-zoom-control", children: /* @__PURE__ */ jsx7(Select2, { label: i18n.t("zoom"), labelHidden: true, options: [{ label: i18n.t("zoomAuto"), value: "auto" }, { label: "50%", value: "50" }, { label: "70%", value: "70" }, { label: "100%", value: "100" }], value: zoom, onChange: (value) => setZoom(value) }) })
-          ] }),
-          /* @__PURE__ */ jsx7("div", { className: "pb-header-actions", children: /* @__PURE__ */ jsxs5(InlineStack3, { gap: "150", blockAlign: "center", wrap: true, children: [
-            /* @__PURE__ */ jsx7(Badge3, { tone: saveBadgeTone, children: saveBadgeLabel }),
-            onHistory ? /* @__PURE__ */ jsx7("span", { "data-editor-history": "", children: /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle", onClick: () => onHistory({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("history") }) }) : null,
-            /* @__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 })
-          ] }) })
-        ] })
+        /* @__PURE__ */ jsx7("div", { className: "pb-header-controls", children: /* @__PURE__ */ jsxs5("div", { className: "pb-header-device-toolbar", children: [
+          /* @__PURE__ */ jsx7(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx7(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }),
+          /* @__PURE__ */ jsx7("div", { className: "pb-zoom-control", children: /* @__PURE__ */ jsx7(Select2, { label: i18n.t("zoom"), labelHidden: true, options: [{ label: i18n.t("zoomAuto"), value: "auto" }, { label: "50%", value: "50" }, { label: "70%", value: "70" }, { label: "100%", value: "100" }], value: zoom, onChange: (value) => setZoom(value) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx7("div", { className: "pb-header-actions", children: /* @__PURE__ */ jsxs5(InlineStack3, { gap: "150", blockAlign: "center", wrap: true, children: [
+          /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
+          /* @__PURE__ */ jsx7(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo }),
+          /* @__PURE__ */ jsx7(Badge3, { tone: saveBadgeTone, children: saveBadgeLabel }),
+          onHistory ? /* @__PURE__ */ jsx7("span", { "data-editor-history": "", children: /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle", onClick: () => onHistory({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("history") }) }) : null,
+          onPreview ? /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle" || !isOnline, onClick: () => void onPreview({ document: editor.document, draftRevision, session: editor.session }), children: i18n.t("preview") }) : null,
+          onAddToStore ? /* @__PURE__ */ jsx7(Button2, { disabled: request !== "idle" || pageStatus?.publicationStatus === "unpublished", onClick: () => void onAddToStore({ document: editor.document, session: editor.session }), children: i18n.t("addToStore") }) : null,
+          /* @__PURE__ */ jsx7(Button2, { variant: "primary", disabled: !publishAction && !onPublish || request !== "idle" || validationIssues.length > 0 || !isOnline, onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") })
+        ] }) })
       ] }) }),
       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,
+      notice && notice !== "published" ? /* @__PURE__ */ jsx7("div", { className: `pb-editor-notice pb-editor-notice--${notice}`, "data-testid": "editor-notice", "data-notice": notice, children: /* @__PURE__ */ jsx7(Banner, { tone: "critical", children: i18n.t(notice) }) }) : null,
       validationIssues.length > 0 ? /* @__PURE__ */ jsx7(Banner, { tone: "critical", title: "\u533A\u5757\u5C5E\u6027\u672A\u901A\u8FC7\u6821\u9A8C", children: /* @__PURE__ */ jsx7("ul", { children: validationIssues.map((issue) => /* @__PURE__ */ jsxs5("li", { children: [
         issue.path,
         ": ",
@@ -1180,7 +1186,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
         ] }),
         /* @__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, {}) }),
+            /* @__PURE__ */ jsx7("div", { ref: canvasFrameRef, className: `pb-canvas-frame pb-canvas-frame--${editor.device}${zoom === "auto" ? "" : ` pb-canvas-frame--zoom-${zoom}`}`, "data-device": editor.device, "data-zoom": zoom, style: canvasThemeStyle, children: /* @__PURE__ */ jsx7(Puck2.Preview, {}) }),
             draggingLibraryType ? /* @__PURE__ */ jsxs5("div", { className: "pb-canvas-drop-target", "data-testid": "canvas-drop-target", role: "region", "aria-label": "\u533A\u5757\u6295\u653E\u533A", onDragOver: (event) => event.preventDefault(), onDrop: dropFromLibrary, children: [
               "\u677E\u5F00\u4EE5\u6DFB\u52A0 ",
               blockTypeLabel(draggingLibraryType, registry)
@@ -1206,6 +1212,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
           ] }) : /* @__PURE__ */ jsx7(Text3, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
         ] })
       ] }),
+      /* @__PURE__ */ jsx7(Modal2, { instant: true, open: notice === "published", onClose: () => setNotice(null), title: i18n.t("publishSuccessTitle"), primaryAction: { content: i18n.t("publishSuccessClose"), onAction: () => setNotice(null) }, children: /* @__PURE__ */ jsx7(Modal2.Section, { children: /* @__PURE__ */ jsx7("div", { className: "pb-publish-success", "data-testid": "editor-notice", "data-notice": "published", children: /* @__PURE__ */ jsx7(Text3, { as: "p", children: i18n.t("publishSuccessMessage") }) }) }) }),
       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);

package/package.json

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

package/src/styles.css

@@ -8,14 +8,14 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .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: flex; flex-wrap: wrap; align-items: center; gap: var(--builder-space-2) var(--builder-space-3); }
-.pb-header-title-group { display: flex; flex: 1 1 12rem; align-items: center; gap: var(--builder-space-2); min-width: 0; }
+.pb-header-title-group { display: flex; flex: 1 1 0; align-items: center; gap: var(--builder-space-2); min-width: 0; }
 .pb-header-sidebar-toggles, [class*="PuckHeader-toggle"] { display: none !important; }
 .pb-page-title { display: grid; gap: 0; min-width: 0; }
 .pb-page-title h1, .pb-page-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pb-page-title p { margin: 0; }
-.pb-header-controls { display: flex; flex: 2 1 28rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--builder-space-2) var(--builder-space-3); min-width: 0; }
-.pb-header-device-toolbar { display: flex; flex: 0 1 auto; align-items: center; gap: var(--builder-space-2); min-width: 0; }
-.pb-header-actions { display: flex; flex: 1 1 16rem; justify-content: flex-end; min-width: 0; }
+.pb-header-controls { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; }
+.pb-header-device-toolbar { display: flex; align-items: center; gap: var(--builder-space-2); }
+.pb-header-actions { display: flex; flex: 1 1 0; justify-content: flex-end; min-width: 0; }
 .pb-header-actions .Polaris-InlineStack { flex-wrap: wrap; justify-content: flex-end; }
 .pb-header-actions .Polaris-Badge { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pb-zoom-control { width: 112px; flex: 0 0 auto; }
@@ -52,6 +52,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-inspector-field input:hover, .pb-inspector-field textarea:hover { border-color: #94a3b8; }
 .pb-inspector-field input:focus, .pb-inspector-field textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); }
 .pb-inspector-field input:disabled, .pb-inspector-field textarea:disabled { color: #94a3b8; background: #f8fafc; cursor: not-allowed; }
+.pb-inspector-field input[type="color"] { width: 52px; padding: 4px; cursor: pointer; }
 .pb-product-picker { display: grid; gap: 8px; }
 .pb-product-picker__summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
 .pb-product-picker__summary p { margin: 0; color: #334155; }
@@ -112,7 +113,12 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-document-block-row--selected { border-color: var(--builder-accent); background: var(--builder-accent-subtle); }
 .pb-editor-status { display: grid; place-items: center; box-sizing: border-box; width: 100%; min-height: 100dvh; padding: var(--builder-space-6); }
 .pb-editor-status > * { width: min(100%, 28rem); justify-self: center; }
-.pb-shell--v04 > .Polaris-Banner { margin: var(--builder-space-3) var(--builder-space-4) 0; }
+.pb-shell--v04 > .Polaris-Banner,
+.pb-editor-notice { margin: var(--builder-space-3) var(--builder-space-4) 0; }
+body:has([data-notice="published"]) .Polaris-Modal-Dialog__Modal {
+  width: 620px;
+  max-width: min(620px, calc(100vw - 32px));
+}
 .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; }
@@ -145,4 +151,4 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .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-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; } .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-title-group, .pb-header-controls, .pb-header-actions { flex-basis: 100%; } .pb-header-controls, .pb-header-actions { justify-content: flex-start; } .pb-header-actions .Polaris-InlineStack { justify-content: flex-start; } .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; } }
+@media (max-width: 640px) { .pb-header, .pb-canvas-area { padding: var(--builder-space-2); } .pb-header-title-group, .pb-header-controls, .pb-header-actions { flex: 1 1 100%; } .pb-header-controls, .pb-header-actions { justify-content: flex-start; } .pb-header-actions .Polaris-InlineStack { justify-content: flex-start; } .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; } }