@standhigher/puck-page-builder 0.12.0 → 0.12.2

package/dist/{chunk-YXBTNYPR.js → chunk-RLKWR5JM.js}

@@ -72,7 +72,7 @@ function validateFieldValue(config, value) {
   if (control === "text" && /[\r\n]/.test(value)) issues.push({ path: "", message: "\u5FC5\u987B\u4E3A\u5355\u884C\u6587\u672C\u3002" });
   if (config.validation?.minLength !== void 0 && stringLength(value) < config.validation.minLength) issues.push({ path: "", message: `\u81F3\u5C11\u9700\u8981 ${config.validation.minLength} \u4E2A\u5B57\u7B26\u3002` });
   if (config.validation?.maxLength !== void 0 && stringLength(value) > config.validation.maxLength) issues.push({ path: "", message: `\u6700\u591A\u5141\u8BB8 ${config.validation.maxLength} \u4E2A\u5B57\u7B26\u3002` });
-  if (value && control === "url" && !isSafeUrl(value, config)) issues.push({ path: "", message: "\u5FC5\u987B\u662F\u7AD9\u5185\u76F8\u5BF9\u8DEF\u5F84\u6216\u5141\u8BB8\u7684 HTTP(S) URL\u3002" });
+  if (value && (control === "url" || control === "asset") && !isSafeUrl(value, config)) issues.push({ path: "", message: "\u5FC5\u987B\u662F\u7AD9\u5185\u76F8\u5BF9\u8DEF\u5F84\u6216\u5141\u8BB8\u7684 HTTP(S) URL\u3002" });
   if (value && control === "color" && !hexColor.test(value)) issues.push({ path: "", message: "\u5FC5\u987B\u662F\u5341\u516D\u8FDB\u5236\u989C\u8272\uFF0C\u4F8B\u5982 #005BD3\u3002" });
   return issues;
 }
@@ -327,11 +327,12 @@ function validateBlock(document, index, registry) {
   if (block.version !== definition.version) issues.push({ path: `${path}.version`, message: `\u533A\u5757\u7248\u672C\u5FC5\u987B\u4E3A ${definition.version}\u3002` });
   if (!supportsTarget(definition, document.target)) issues.push({ path, message: `\u533A\u5757\u4E0D\u652F\u6301 ${document.target} target\u3002` });
   if (definition.variants?.length && !definition.variants.some((variant) => variant.id === block.variant)) issues.push({ path: `${path}.variant`, message: `\u4E0D\u652F\u6301\u7684 variant\uFF1A${block.variant}\u3002` });
-  const allowedProps = /* @__PURE__ */ new Set([...Object.keys(definition.defaultProps), ...Object.keys(definition.fields)]);
+  const allowedProps = /* @__PURE__ */ new Set([...Object.keys(definition.defaultProps), ...Object.entries(definition.fields).filter(([, field]) => field.persist !== false).map(([name]) => name)]);
   for (const key of Object.keys(block.props)) {
     if (!allowedProps.has(key)) issues.push({ path: `${path}.props.${key}`, message: "\u4E0D\u5141\u8BB8\u4FDD\u5B58\u672A\u77E5\u5B57\u6BB5\u3002" });
   }
   for (const [name, field] of Object.entries(definition.fields)) {
+    if (field.persist === false) continue;
     for (const issue of validateFieldValue(field, block.props[name])) {
       issues.push({ ...issue, path: issue.path ? `${path}.props.${name}.${issue.path}` : `${path}.props.${name}` });
     }

package/dist/extensions.d.ts

@@ -1,5 +1,5 @@
-import { h as ExtensionRegistry, V as ValidationIssue, c as BlockPolicy, F as FieldConfig } from './registry-CXJdOya3.js';
-export { B as BlockDefinition, a as BlockEditorProps, b as BlockOperation, d as BlockVariantDefinition, D as DataSourceDefinition, E as EditorAction, e as EditorActionPosition, f as EditorOperationPolicy, g as ExtensionActionContext, i as ExtensionRegistryError, j as ExtensionRegistryErrorCode, k as ExtensionRegistryOptions, l as ExtensionTarget, m as FieldDefinition, n as FieldProps, o as FieldValidation, L as LifecycleHooks, P as PageBuilderExtension, R as RendererDefinition, T as TemplateDefinition, p as TemplateRegistry, q as TemplateSource, U as UISlotContribution, r as UISlotName, s as createExtensionRegistry, t as createTemplateRegistry } from './registry-CXJdOya3.js';
+import { h as ExtensionRegistry, V as ValidationIssue, c as BlockPolicy, F as FieldConfig } from './registry-BkqtMP-A.js';
+export { B as BlockDefinition, a as BlockEditorProps, b as BlockOperation, d as BlockVariantDefinition, D as DataSourceDefinition, E as EditorAction, e as EditorActionPosition, f as EditorOperationPolicy, g as ExtensionActionContext, i as ExtensionRegistryError, j as ExtensionRegistryErrorCode, k as ExtensionRegistryOptions, l as ExtensionTarget, m as FieldDefinition, n as FieldProps, o as FieldValidation, L as LifecycleHooks, P as PageBuilderExtension, R as RendererDefinition, T as TemplateDefinition, p as TemplateRegistry, q as TemplateSource, U as UISlotContribution, r as UISlotName, s as createExtensionRegistry, t as createTemplateRegistry } from './registry-BkqtMP-A.js';
 import { PageDocument, JsonValue } from './schema.js';
 import 'react';
 import './theme.js';

package/dist/extensions.js

@@ -13,7 +13,7 @@ import {
   validateBlockPolicy,
   validateFieldValue,
   validatePageDocumentWithRegistry
-} from "./chunk-YXBTNYPR.js";
+} from "./chunk-RLKWR5JM.js";
 export {
   ExtensionRegistry,
   ExtensionRegistryError,

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { f as EditorOperationPolicy, c as BlockPolicy, V as ValidationIssue, h as ExtensionRegistry } from './registry-CXJdOya3.js';
-export { B as BlockDefinition, a as BlockEditorProps, b as BlockOperation, d as BlockVariantDefinition, D as DataSourceDefinition, E as EditorAction, e as EditorActionPosition, g as ExtensionActionContext, i as ExtensionRegistryError, j as ExtensionRegistryErrorCode, k as ExtensionRegistryOptions, l as ExtensionTarget, F as FieldConfig, m as FieldDefinition, n as FieldProps, o as FieldValidation, L as LifecycleHooks, P as PageBuilderExtension, R as RendererDefinition, T as TemplateDefinition, p as TemplateRegistry, q as TemplateSource, U as UISlotContribution, r as UISlotName, s as createExtensionRegistry, t as createTemplateRegistry } from './registry-CXJdOya3.js';
+import { f as EditorOperationPolicy, c as BlockPolicy, V as ValidationIssue, h as ExtensionRegistry } from './registry-BkqtMP-A.js';
+export { B as BlockDefinition, a as BlockEditorProps, b as BlockOperation, d as BlockVariantDefinition, D as DataSourceDefinition, E as EditorAction, e as EditorActionPosition, g as ExtensionActionContext, i as ExtensionRegistryError, j as ExtensionRegistryErrorCode, k as ExtensionRegistryOptions, l as ExtensionTarget, F as FieldConfig, m as FieldDefinition, n as FieldProps, o as FieldValidation, L as LifecycleHooks, P as PageBuilderExtension, R as RendererDefinition, T as TemplateDefinition, p as TemplateRegistry, q as TemplateSource, U as UISlotContribution, r as UISlotName, s as createExtensionRegistry, t as createTemplateRegistry } from './registry-BkqtMP-A.js';
 import { PageDocument, BlockNode, JsonValue } from './schema.js';
 export { BlockStyleOverrides, DataBinding, PageDocumentIssue, PageDocumentMigration, PageDocumentSchemaVersion, PageSettings, RenderTarget, createPageDocument, migratePageDocument, validatePageDocument } from './schema.js';
 import { ProductReference } from './extensions.js';
@@ -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;
@@ -247,6 +247,13 @@ type PageDocumentEditorShellProps = {
     publishAction?: PublishAction;
     /** Host-owned picker/uploader for shop-scoped assets. */
     assetPicker?: AssetPickerAdapter;
+    /** External settings, keyed by block id (or block type for shared settings), outside document history and persistence. */
+    inspectorSettings?: Record<string, {
+        values: Record<string, JsonValue>;
+        disabled?: boolean;
+        onChange: (fieldName: string, value: JsonValue) => void;
+        footer?: ReactNode;
+    }>;
     /** Host-owned product picker. The shell only shows the selected snapshot and a button. */
     productPicker?: ProductPickerAdapter;
     /** Optional reusable page lifecycle summary. */
@@ -316,6 +323,9 @@ declare const messages: {
         readonly offline: "当前离线，恢复网络后将自动保存";
         readonly publishFailed: "发布失败";
         readonly published: "已发布";
+        readonly publishSuccessTitle: "发布成功";
+        readonly publishSuccessMessage: "页面已发布，消费者将看到当前版本。";
+        readonly publishSuccessClose: "完成";
         readonly back: "返回";
         readonly confirmLeaveTitle: "离开编辑器？";
         readonly leave: "离开";
@@ -341,6 +351,11 @@ declare const messages: {
         readonly selectProductsFailed: "无法选择商品，请重试。";
         readonly emptyProducts: "未选择商品";
         readonly productCountSuffix: "件商品";
+        readonly selectAsset: "选择图片";
+        readonly selectingAsset: "正在上传图片…";
+        readonly selectAssetFailed: "无法上传图片，请重试。";
+        readonly emptyAsset: "未设置图片";
+        readonly removeAsset: "移除图片";
     };
     readonly en: {
         readonly blocks: "Blocks";
@@ -374,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";
@@ -399,13 +417,18 @@ declare const messages: {
         readonly selectProductsFailed: "Could not select products. Try again.";
         readonly emptyProducts: "No products selected";
         readonly productCountSuffix: "products";
+        readonly selectAsset: "Select image";
+        readonly selectingAsset: "Uploading image…";
+        readonly selectAssetFailed: "Could not upload the image. Try again.";
+        readonly emptyAsset: "No image selected";
+        readonly removeAsset: "Remove image";
     };
 };
 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";
+    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

@@ -13,7 +13,7 @@ import {
   validateBlockPolicy,
   validateFieldValue,
   validatePageDocumentWithRegistry
-} from "./chunk-YXBTNYPR.js";
+} from "./chunk-RLKWR5JM.js";
 import {
   WebRenderer
 } from "./chunk-KYXIXIWK.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",
@@ -822,7 +825,12 @@ var messages = {
     selectingProducts: "\u6B63\u5728\u9009\u62E9\u5546\u54C1\u2026",
     selectProductsFailed: "\u65E0\u6CD5\u9009\u62E9\u5546\u54C1\uFF0C\u8BF7\u91CD\u8BD5\u3002",
     emptyProducts: "\u672A\u9009\u62E9\u5546\u54C1",
-    productCountSuffix: "\u4EF6\u5546\u54C1"
+    productCountSuffix: "\u4EF6\u5546\u54C1",
+    selectAsset: "\u9009\u62E9\u56FE\u7247",
+    selectingAsset: "\u6B63\u5728\u4E0A\u4F20\u56FE\u7247\u2026",
+    selectAssetFailed: "\u65E0\u6CD5\u4E0A\u4F20\u56FE\u7247\uFF0C\u8BF7\u91CD\u8BD5\u3002",
+    emptyAsset: "\u672A\u8BBE\u7F6E\u56FE\u7247",
+    removeAsset: "\u79FB\u9664\u56FE\u7247"
   },
   en: {
     blocks: "Blocks",
@@ -856,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",
@@ -880,7 +891,12 @@ var messages = {
     selectingProducts: "Selecting products\u2026",
     selectProductsFailed: "Could not select products. Try again.",
     emptyProducts: "No products selected",
-    productCountSuffix: "products"
+    productCountSuffix: "products",
+    selectAsset: "Select image",
+    selectingAsset: "Uploading image\u2026",
+    selectAssetFailed: "Could not upload the image. Try again.",
+    emptyAsset: "No image selected",
+    removeAsset: "Remove image"
   }
 };
 function createAdminI18n(locale) {
@@ -960,7 +976,7 @@ 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 = false, registry, adminLocale, onSave, onPublish, draftPersistence, draftRevision: initialDraftRevision, autoSave = true, autoSaveDelayMs = 800, publishAction, assetPicker, productPicker, pageStatus, onBack, onHistory, onPreview, onAddToStore, deleteConfirmation, availableBlockTypes, appearanceControls = false }) {
+function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onPublish, draftPersistence, draftRevision: initialDraftRevision, autoSave = true, autoSaveDelayMs = 800, publishAction, assetPicker, inspectorSettings, productPicker, pageStatus, onBack, onHistory, onPreview, onAddToStore, deleteConfirmation, availableBlockTypes, appearanceControls = false }) {
   const editor = useEditorContext();
   const [blockView, setBlockView] = useState3("blocks");
   const [leftRailOpen, setLeftRailOpen] = useState3(true);
@@ -978,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) => {
@@ -1006,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);
@@ -1020,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);
@@ -1084,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);
@@ -1114,18 +1133,17 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
           /* @__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,
-          /* @__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(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,
         ": ",
@@ -1168,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)
@@ -1189,11 +1207,12 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
             /* @__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, productPicker, i18n, block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, appearanceControls, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props), onPresentationChange: (presentation) => updateBlockPresentation(editor.selectedBlock.id, presentation) }),
+            /* @__PURE__ */ jsx7(DocumentInspector, { settings: inspectorSettings?.[editor.selectedBlock.id] ?? inspectorSettings?.[editor.selectedBlock.type], pageId: editor.document.pageId, assetPicker, productPicker, i18n, block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, appearanceControls, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props), onPresentationChange: (presentation) => updateBlockPresentation(editor.selectedBlock.id, presentation) }, editor.selectedBlock.id),
             /* @__PURE__ */ jsx7(InspectorActions, { block: editor.selectedBlock, canDuplicate: editor.actionState.canDuplicate, canDelete: editor.actionState.canDelete, canMove: editor.actionState.canReorder, canMoveUp: editor.document.blocks[0]?.id !== editor.selectedBlock.id, canMoveDown: editor.document.blocks.at(-1)?.id !== editor.selectedBlock.id, i18n, onDuplicate: () => editor.duplicateBlock(editor.selectedBlock.id), onDelete: () => editor.requestDeleteBlock(editor.selectedBlock.id), onMove: (direction) => editor.moveBlock(editor.selectedBlock.id, direction) })
           ] }) : /* @__PURE__ */ jsx7(Text3, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
         ] })
       ] }),
+      /* @__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);
@@ -1260,6 +1279,39 @@ function InspectorTextControl({ label, value, control, disabled, onChange }) {
   if (control === "color") return /* @__PURE__ */ jsx7("input", { "aria-label": label, type: "color", value: /^#[\da-f]{6}$/i.test(stringValue) ? stringValue : "#000000", disabled, onChange: (event) => onChange(event.currentTarget.value) });
   return /* @__PURE__ */ jsx7(TextField, { label, labelHidden: true, value: stringValue, onChange, autoComplete: "off", disabled, multiline: control === "textarea" ? 4 : false, type: control === "url" ? "url" : "text" });
 }
+function InspectorAssetControl({ value, disabled, picker, pageId, blockId, i18n, onChange }) {
+  const [busy, setBusy] = useState3(false);
+  const [error, setError] = useState3(null);
+  const active = useRef4(true);
+  useEffect3(() => {
+    active.current = !disabled;
+    return () => {
+      active.current = false;
+    };
+  }, [disabled]);
+  const url = typeof value === "string" && validateFieldValue({ field: "", control: "asset" }, value).length === 0 ? value : "";
+  return /* @__PURE__ */ jsxs5("div", { className: "pb-asset-picker", "data-testid": "asset-picker", children: [
+    url ? /* @__PURE__ */ jsx7("img", { src: url, alt: "", className: "pb-asset-picker__preview" }) : /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("emptyAsset") }),
+    url ? /* @__PURE__ */ jsx7(Button2, { fullWidth: true, variant: "tertiary", disabled: disabled || busy, onClick: () => onChange(""), children: i18n.t("removeAsset") }) : null,
+    /* @__PURE__ */ jsx7(Button2, { fullWidth: true, disabled: disabled || busy || !picker, onClick: () => void (async () => {
+      if (!picker) return;
+      setBusy(true);
+      setError(null);
+      try {
+        const asset = await picker.selectAsset({ pageId, blockId, current: { url } });
+        if (asset && active.current) {
+          if (validateFieldValue({ field: "", control: "asset", required: true }, asset.url).length) throw new Error("Invalid image URL");
+          onChange(asset.url);
+        }
+      } catch {
+        setError(i18n.t("selectAssetFailed"));
+      } finally {
+        setBusy(false);
+      }
+    })(), children: busy ? i18n.t("selectingAsset") : i18n.t("selectAsset") }),
+    error ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
+  ] });
+}
 function InspectorProductsControl({ value, disabled, picker, pageId, blockId, i18n, onChange }) {
   const products = parseProductReferences(value);
   const [busy, setBusy] = useState3(false);
@@ -1286,7 +1338,7 @@ function InspectorProductsControl({ value, disabled, picker, pageId, blockId, i1
     error ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: error }) : null
   ] });
 }
-function InspectorField({ name, field, value, registry, disabled, productPicker, pageId, blockId, i18n, onChange }) {
+function InspectorField({ name, field, value, registry, disabled, assetPicker, productPicker, pageId, blockId, i18n, onChange }) {
   const label = field.label ?? name;
   const issues = validateFieldValue(field, value);
   const Field = registry?.getField(field.field)?.component;
@@ -1295,7 +1347,7 @@ function InspectorField({ name, field, value, registry, disabled, productPicker,
       /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", fontWeight: "semibold", children: label }),
       field.description ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: field.description }) : null
     ] }),
-    field.control === "products" ? /* @__PURE__ */ jsx7(InspectorProductsControl, { value, disabled, picker: productPicker, pageId, blockId, i18n, onChange }) : field.control ? /* @__PURE__ */ jsx7(InspectorTextControl, { label, value, control: field.control, disabled, onChange: (next) => onChange(next) }) : Field ? /* @__PURE__ */ jsx7(Field, { value, onChange }) : null,
+    field.control === "products" ? /* @__PURE__ */ jsx7(InspectorProductsControl, { value, disabled, picker: productPicker, pageId, blockId, i18n, onChange }) : field.control === "asset" ? /* @__PURE__ */ jsx7(InspectorAssetControl, { value, disabled, picker: assetPicker, pageId, blockId, i18n, onChange }) : field.control ? /* @__PURE__ */ jsx7(InspectorTextControl, { label, value, control: field.control, disabled, onChange: (next) => onChange(next) }) : Field ? /* @__PURE__ */ jsx7(Field, { value, onChange }) : null,
     issues.map((issue) => /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: issue.message }, issue.message))
   ] });
 }
@@ -1334,7 +1386,7 @@ function inspectorFieldConfig(name, field) {
   return { ...field, group: field.group ?? group, description };
 }
 var appearanceTokens = [["color.primary", "\u4E3B\u8272"], ["color.surface", "\u8868\u9762\u8272"], ["radius", "\u5706\u89D2"], ["spacing", "\u95F4\u8DDD"]];
-function DocumentInspector({ pageId, assetPicker, productPicker, i18n, block, registry, disabled, appearanceControls, onChange, onPresentationChange }) {
+function DocumentInspector({ settings, pageId, assetPicker, productPicker, i18n, block, registry, disabled, appearanceControls, onChange, onPresentationChange }) {
   const [assetError, setAssetError] = useState3(null);
   const [selectingAsset, setSelectingAsset] = useState3(false);
   const definition = registry?.getBlock(block.type);
@@ -1373,7 +1425,8 @@ function DocumentInspector({ pageId, assetPicker, productPicker, i18n, block, re
         assetError ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: assetError }) : null
       ] }) : null
     ] }) : null,
-    Object.entries(groupedFields).map(([group, fields]) => /* @__PURE__ */ jsx7(InspectorSection, { title: group, defaultOpen: group !== "Advanced", children: fields.map(([name, field]) => /* @__PURE__ */ jsx7(InspectorField, { name, field, value: block.props[name], registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (value) => onChange({ ...block.props, [name]: value }) }, name)) }, group)),
+    Object.entries(groupedFields).map(([group, fields]) => /* @__PURE__ */ jsx7(InspectorSection, { title: group, defaultOpen: group !== "Advanced", children: fields.map(([name, field]) => /* @__PURE__ */ jsx7(InspectorField, { name, field, value: field.persist === false ? settings?.values[name] : block.props[name], registry, disabled: disabled || field.persist === false && (!settings || Boolean(settings.disabled)), assetPicker, productPicker, pageId, blockId: block.id, i18n, onChange: (value) => field.persist === false ? settings?.onChange(name, value) : onChange({ [name]: value }) }, name)) }, group)),
+    Object.values(definition?.fields ?? {}).some((field) => field.persist === false) ? settings?.footer : null,
     appearanceControls && definition?.variants?.length ? /* @__PURE__ */ jsx7(InspectorSection, { title: "\u5916\u89C2", children: /* @__PURE__ */ jsx7(Select2, { label: "\u6837\u5F0F\u53D8\u4F53", options: definition.variants.map((variant) => ({ label: variant.label, value: variant.id })), value: block.variant, disabled, onChange: (variant) => onPresentationChange({ variant, style: block.style }) }) }) : null,
     appearanceControls && definition ? /* @__PURE__ */ jsx7(InspectorSection, { title: "\u6837\u5F0F\u8986\u76D6", defaultOpen: false, children: appearanceTokens.map(([token, label]) => /* @__PURE__ */ jsx7(TextField, { label, value: block.style[token] ?? "", placeholder: "\u7EE7\u627F\u9875\u9762\u6216\u6A21\u677F\u8BBE\u7F6E", autoComplete: "off", disabled, onChange: (value) => {
       const style = { ...block.style };

package/dist/{registry-CXJdOya3.d.ts → registry-BkqtMP-A.d.ts}

@@ -42,9 +42,11 @@ type FieldConfig = {
     field: string;
     label?: string;
     /** Product-facing editor metadata. Custom field components remain supported. */
-    control?: "text" | "textarea" | "url" | "color" | "products";
+    control?: "text" | "textarea" | "url" | "color" | "products" | "asset";
     description?: string;
     group?: string;
+    /** Host-owned setting; never written to PageDocument props. */
+    persist?: boolean;
     /** Kept for compatibility; it participates in the built-in validation. */
     required?: boolean;
     validation?: FieldValidation;

package/dist/renderer.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { h as ExtensionRegistry } from './registry-CXJdOya3.js';
+import { h as ExtensionRegistry } from './registry-BkqtMP-A.js';
 import { PageDocument } from './schema.js';
 import './theme.js';
 

package/dist/runtime.d.ts

@@ -1,5 +1,5 @@
 export { WebRenderer, WebRendererProps } from './renderer.js';
-export { B as BlockDefinition, a as BlockEditorProps, b as BlockOperation, c as BlockPolicy, d as BlockVariantDefinition, D as DataSourceDefinition, E as EditorAction, e as EditorActionPosition, f as EditorOperationPolicy, g as ExtensionActionContext, h as ExtensionRegistry, i as ExtensionRegistryError, j as ExtensionRegistryErrorCode, k as ExtensionRegistryOptions, l as ExtensionTarget, F as FieldConfig, m as FieldDefinition, n as FieldProps, o as FieldValidation, L as LifecycleHooks, P as PageBuilderExtension, R as RendererDefinition, T as TemplateDefinition, p as TemplateRegistry, q as TemplateSource, U as UISlotContribution, r as UISlotName, V as ValidationIssue, s as createExtensionRegistry, t as createTemplateRegistry } from './registry-CXJdOya3.js';
+export { B as BlockDefinition, a as BlockEditorProps, b as BlockOperation, c as BlockPolicy, d as BlockVariantDefinition, D as DataSourceDefinition, E as EditorAction, e as EditorActionPosition, f as EditorOperationPolicy, g as ExtensionActionContext, h as ExtensionRegistry, i as ExtensionRegistryError, j as ExtensionRegistryErrorCode, k as ExtensionRegistryOptions, l as ExtensionTarget, F as FieldConfig, m as FieldDefinition, n as FieldProps, o as FieldValidation, L as LifecycleHooks, P as PageBuilderExtension, R as RendererDefinition, T as TemplateDefinition, p as TemplateRegistry, q as TemplateSource, U as UISlotContribution, r as UISlotName, V as ValidationIssue, s as createExtensionRegistry, t as createTemplateRegistry } from './registry-BkqtMP-A.js';
 export { ProductReference, isProductReference, maximumBlockInstances, mergeBlockPolicies, minimumBlockInstances, parseProductReferences, toProductReferenceJson, validateBlockPolicy, validateFieldValue, validatePageDocumentWithRegistry } from './extensions.js';
 export { BlockNode, BlockStyleOverrides, DataBinding, JsonPrimitive, JsonValue, PageDocument, PageDocumentIssue, PageDocumentMigration, PageDocumentSchemaVersion, PageDocumentValidation, PageSettings, RenderTarget, createPageDocument, migratePageDocument, validatePageDocument } from './schema.js';
 export { ThemeTokenName, ThemeTokenValidation, ThemeTokens, mergeThemeTokens, normalizeThemeTokens, systemThemeTokens, toThemeStyle } from './theme.js';

package/dist/runtime.js

@@ -13,7 +13,7 @@ import {
   validateBlockPolicy,
   validateFieldValue,
   validatePageDocumentWithRegistry
-} from "./chunk-YXBTNYPR.js";
+} from "./chunk-RLKWR5JM.js";
 import {
   WebRenderer
 } from "./chunk-KYXIXIWK.js";

package/package.json

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

package/src/styles.css

@@ -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; }
@@ -60,6 +61,8 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-product-picker__thumb:first-child { margin-left: 0; }
 .pb-product-picker__thumb img, .pb-product-picker__thumb-fallback { display: block; width: 100%; height: 100%; object-fit: cover; }
 .pb-product-picker__thumb-fallback { background: #cbd5e1; }
+.pb-asset-picker { display: grid; gap: 8px; }
+.pb-asset-picker__preview { display: block; width: 100%; max-height: 180px; object-fit: cover; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
 .pb-inspector__hint { margin: 0; padding: 0 var(--builder-space-2); color: #64748b; font-size: 12px; line-height: 1.5; }
 .pb-inspector-actions { padding-top: var(--builder-space-2); border-top: 1px solid #e2e8f0; }
 .pb-delete-confirmation-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: var(--builder-space-4); background: rgb(15 23 42 / 42%); }
@@ -110,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; }