@standhigher/puck-page-builder 0.12.4 → 0.12.5

package/dist/index.d.ts

@@ -179,6 +179,8 @@ type EditorContextValue = {
     actionState: EditorActionState;
     canAddBlock(type: string): boolean;
     canDragBlock(id: string): boolean;
+    canDeleteBlock(id: string): boolean;
+    canDuplicateBlock(id: string): boolean;
     /** Request a canvas selection. The inspector changes only after Puck confirms it. */
     requestCanvasSelection(id: string): void;
     /** Called from the canvas/Puck selection event. */
@@ -299,6 +301,7 @@ declare const messages: {
         readonly undo: "撤销";
         readonly redo: "恢复";
         readonly duplicate: "复制";
+        readonly duplicateUnavailable: "此区块已达到允许数量上限，或复制操作已被禁用。";
         readonly remove: "删除";
         readonly confirmDeleteTitle: "确认删除区块？";
         readonly confirmDeleteMessage: "删除后可使用撤销恢复。";
@@ -363,6 +366,7 @@ declare const messages: {
         readonly undo: "Undo";
         readonly redo: "Redo";
         readonly duplicate: "Duplicate";
+        readonly duplicateUnavailable: "This block has reached its limit or duplication is disabled.";
         readonly remove: "Delete";
         readonly confirmDeleteTitle: "Delete this block?";
         readonly confirmDeleteMessage: "You can restore it with Undo after deleting.";
@@ -424,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" | "This block has reached its limit or duplication is disabled." | "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";
 };
 
 declare function toEngineData(document: PageDocument, registry?: ExtensionRegistry): Data;

package/dist/index.js

@@ -353,7 +353,7 @@ function PropertyPanel({
 import { Puck as Puck2, usePuck } from "@puckeditor/core";
 import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, Frame, InlineStack as InlineStack3, Select as Select2, Text as Text3, TextField, Toast } 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";
+import { useCallback as useCallback2, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState as useState3 } from "react";
 
 // src/adapters/puck/canvas-extension-block.tsx
 import { registerOverlayPortal } from "@puckeditor/core";
@@ -369,6 +369,20 @@ function CanvasExtensionBlock({ active, children, label, onSelect }) {
 
 // src/adapters/puck/page-document-config.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function withBlockPermissions(component, type, resolvePermissions) {
+  if (!resolvePermissions) return component;
+  return {
+    ...component,
+    // Keep actions hidden until the policy resolver has produced the current
+    // per-block result. This prevents a one-frame clickable action that may be
+    // rejected by the PageDocument policy after Puck emits onChange.
+    permissions: { drag: false, duplicate: false, delete: false, edit: false, insert: false },
+    resolvePermissions: (item) => {
+      const id = typeof item?.props?.id === "string" ? item.props.id : "";
+      return resolvePermissions({ id, type });
+    }
+  };
+}
 function canvasFieldFallback({ block, props, registry, onPropsChange }) {
   const fields = Object.entries(block.fields);
   if (!fields.length) return null;
@@ -380,11 +394,11 @@ function canvasFieldFallback({ block, props, registry, onPropsChange }) {
     ] }, name) : null;
   }) });
 }
-function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId, registry) {
+function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId, registry, resolveBlockPermissions) {
   const extensionComponents = Object.fromEntries((registry?.blocks ?? []).flatMap((block) => {
     const BlockRenderer = block.render.web;
     if (!BlockRenderer) return [];
-    return [[block.type, {
+    return [[block.type, withBlockPermissions({
       render: (props) => {
         const id = typeof props.id === "string" ? props.id : `unknown-${block.type}`;
         const EditorRenderer = block.render.editor;
@@ -394,11 +408,11 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
           active ? canvasFieldFallback({ block, props, registry, onPropsChange: (next) => onPropsChange(id, next) }) : null
         ] }) });
       }
-    }]];
+    }, block.type, resolveBlockPermissions)]];
   }));
   return {
     components: {
-      Text: {
+      Text: withBlockPermissions({
         render: (props) => {
           const id = typeof props.id === "string" ? props.id : "unknown-text";
           const content = typeof props.content === "string" ? props.content : "";
@@ -409,8 +423,8 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
             if (editable) onPropsChange(id, { content: event.currentTarget.textContent ?? "" }, true);
           }, children: content }) });
         }
-      },
-      Image: {
+      }, "core.text", resolveBlockPermissions),
+      Image: withBlockPermissions({
         render: (props) => {
           const id = typeof props.id === "string" ? props.id : "unknown-image";
           const src = typeof props.src === "string" ? props.src : "";
@@ -423,7 +437,7 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
             editable ? /* @__PURE__ */ jsx4("input", { "aria-label": "\u753B\u5E03\u56FE\u7247 URL", value: src, onChange: (event) => onPropsChange(id, { src: event.currentTarget.value }, true), onClick: (event) => event.stopPropagation() }) : null
           ] });
         }
-      },
+      }, "core.image", resolveBlockPermissions),
       ...extensionComponents
     }
   };
@@ -658,6 +672,14 @@ function EditorProvider({ initialDocument, registry, policy, loadState = "ready"
         const block = history.document.blocks.find((item) => item.id === id);
         return editable && canDragBlock(block, registry?.getBlock(block?.type ?? ""), policy);
       },
+      canDeleteBlock: (id) => {
+        const block = history.document.blocks.find((item) => item.id === id);
+        return editable && canDeleteBlock(block, history.document.blocks, registry?.getBlock(block?.type ?? ""), policy);
+      },
+      canDuplicateBlock: (id) => {
+        const block = history.document.blocks.find((item) => item.id === id);
+        return editable && canDuplicateBlock(block, history.document.blocks, registry?.getBlock(block?.type ?? ""), policy);
+      },
       requestCanvasSelection,
       confirmCanvasSelection,
       updateFromCanvas,
@@ -774,6 +796,7 @@ var messages = {
     undo: "\u64A4\u9500",
     redo: "\u6062\u590D",
     duplicate: "\u590D\u5236",
+    duplicateUnavailable: "\u6B64\u533A\u5757\u5DF2\u8FBE\u5230\u5141\u8BB8\u6570\u91CF\u4E0A\u9650\uFF0C\u6216\u590D\u5236\u64CD\u4F5C\u5DF2\u88AB\u7981\u7528\u3002",
     remove: "\u5220\u9664",
     confirmDeleteTitle: "\u786E\u8BA4\u5220\u9664\u533A\u5757\uFF1F",
     confirmDeleteMessage: "\u5220\u9664\u540E\u53EF\u4F7F\u7528\u64A4\u9500\u6062\u590D\u3002",
@@ -838,6 +861,7 @@ var messages = {
     undo: "Undo",
     redo: "Redo",
     duplicate: "Duplicate",
+    duplicateUnavailable: "This block has reached its limit or duplication is disabled.",
     remove: "Delete",
     confirmDeleteTitle: "Delete this block?",
     confirmDeleteMessage: "You can restore it with Undo after deleting.",
@@ -974,6 +998,10 @@ function PageDocumentEditorShell(props) {
 }
 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 editorRef = useRef4(editor);
+  useLayoutEffect(() => {
+    editorRef.current = editor;
+  }, [editor]);
   const [blockView, setBlockView] = useState3("blocks");
   const [leftRailOpen, setLeftRailOpen] = useState3(true);
   const [rightPanelOpen, setRightPanelOpen] = useState3(true);
@@ -1000,7 +1028,14 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
     if (preserveCanvasValue) setCanvasMutationVersion((version) => version + 1);
     updateBlockProps(id, props);
   }, [updateBlockProps]);
-  const config = useMemo2(() => createPageDocumentPuckConfig(confirmCanvasSelection, updateFromCanvasInput, selectedBlockId, registry), [confirmCanvasSelection, registry, selectedBlockId, updateFromCanvasInput]);
+  const resolveBlockPermissions = useCallback2(({ id, type }) => ({
+    duplicate: editorRef.current.canDuplicateBlock(id),
+    delete: editorRef.current.canDeleteBlock(id),
+    drag: editorRef.current.canDragBlock(id),
+    edit: editorRef.current.isEditable,
+    insert: editorRef.current.canAddBlock(type)
+  }), []);
+  const config = useMemo2(() => createPageDocumentPuckConfig(confirmCanvasSelection, updateFromCanvasInput, selectedBlockId, registry, resolveBlockPermissions), [confirmCanvasSelection, registry, resolveBlockPermissions, selectedBlockId, updateFromCanvasInput]);
   useEffect3(() => {
     const online = () => setIsOnline(true);
     const offline = () => setIsOnline(false);
@@ -1110,7 +1145,7 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
     /* @__PURE__ */ jsx7(Puck2, { config, data: engineData, iframe: { enabled: iframe }, onChange: (data) => {
       if (!editor.updateFromCanvas(fromEngineData(data, editor.document, registry))) setCanvasResetVersion((version) => version + 1);
     }, children: /* @__PURE__ */ jsxs5(Puck2.Layout, { children: [
-      /* @__PURE__ */ jsx7(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion, canvasResetVersion }),
+      /* @__PURE__ */ jsx7(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion, canvasResetVersion, permissionsVersion: `${editor.isEditable}:${editor.document.blocks.map((block) => `${block.id}:${block.type}`).join("|")}` }),
       /* @__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: [
@@ -1214,13 +1249,14 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
     /* @__PURE__ */ jsx7("div", { className: "pb-toast-host", ...notice === "published" ? { "data-testid": "editor-notice", "data-notice": "published" } : {}, children: /* @__PURE__ */ jsx7(Frame, { children: notice === "published" ? /* @__PURE__ */ jsx7(Toast, { content: i18n.t("publishSuccessTitle"), onDismiss: dismissPublishedNotice }) : null }) })
   ] });
 }
-function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion, canvasResetVersion }) {
+function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion, canvasResetVersion, permissionsVersion }) {
   const puck = usePuck();
   const lastSelectedId = useRef4(null);
   const lastSyncedData = useRef4(null);
   const lastCanvasMutationVersion = useRef4(0);
   const lastCanvasResetVersion = useRef4(0);
   const serializedData = JSON.stringify(data);
+  const refreshPermissions = puck.refreshPermissions;
   useEffect3(() => {
     const forceReset = canvasResetVersion > lastCanvasResetVersion.current;
     if (lastSyncedData.current === serializedData && !forceReset) return;
@@ -1232,6 +1268,9 @@ function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canva
     }
     puck.dispatch({ type: "setData", data });
   }, [canvasMutationVersion, canvasResetVersion, data, puck, serializedData]);
+  useEffect3(() => {
+    refreshPermissions?.({}, true);
+  }, [permissionsVersion, refreshPermissions]);
   useEffect3(() => {
     if (!requestedBlockId) return;
     const selector = puck.getSelectorForId(requestedBlockId);
@@ -1267,10 +1306,20 @@ function InspectorSection({ title, children, defaultOpen = true }) {
     /* @__PURE__ */ jsx7("div", { className: "pb-inspector-section__body", children })
   ] });
 }
-function InspectorTextControl({ label, value, control, disabled, onChange }) {
+function InspectorTextControl({ label, value, control, maxLength, disabled, onChange }) {
   const stringValue = typeof value === "string" ? value : "";
   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" });
+  const length = Array.from(stringValue).length;
+  const field = /* @__PURE__ */ jsx7(TextField, { label, labelHidden: true, value: stringValue, onChange: (next) => onChange(maxLength === void 0 ? next : Array.from(next).slice(0, maxLength).join("")), autoComplete: "off", disabled, multiline: control === "textarea" ? 4 : false, type: control === "url" ? "url" : "text", maxLength });
+  if (maxLength === void 0) return field;
+  return /* @__PURE__ */ jsxs5("div", { className: "pb-inspector-field__limited", children: [
+    field,
+    /* @__PURE__ */ jsxs5("span", { className: "pb-inspector-field__limit", "aria-label": `Limit ${maxLength}`, children: [
+      length,
+      "/",
+      maxLength
+    ] })
+  ] });
 }
 function InspectorAssetControl({ value, disabled, picker, pageId, blockId, i18n, onChange }) {
   const [busy, setBusy] = useState3(false);
@@ -1340,17 +1389,20 @@ function InspectorField({ name, field, value, registry, disabled, assetPicker, p
       /* @__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 === "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,
+    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, maxLength: field.validation?.maxLength, disabled, onChange: (next) => onChange(next) }) : Field ? /* @__PURE__ */ jsx7(Field, { value, onChange }) : null,
     issues.map((issue) => /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "critical", children: issue.message }, issue.message))
   ] });
 }
 function InspectorActions({ block, canDuplicate, canDelete, canMove, canMoveUp, canMoveDown, i18n, onDuplicate, onDelete, onMove }) {
-  return /* @__PURE__ */ jsx7("div", { className: "pb-inspector-actions", "aria-label": `Actions for ${block.id}`, children: /* @__PURE__ */ jsxs5(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx7(Button2, { disabled: !canMove || !canMoveUp, onClick: () => onMove(-1), children: i18n.t("moveUp") }),
-    /* @__PURE__ */ jsx7(Button2, { disabled: !canMove || !canMoveDown, onClick: () => onMove(1), children: i18n.t("moveDown") }),
-    /* @__PURE__ */ jsx7(Button2, { disabled: !canDuplicate, onClick: onDuplicate, children: i18n.t("duplicate") }),
-    /* @__PURE__ */ jsx7(Button2, { disabled: !canDelete, tone: "critical", onClick: onDelete, children: i18n.t("remove") })
-  ] }) });
+  return /* @__PURE__ */ jsxs5("div", { className: "pb-inspector-actions", "aria-label": `Actions for ${block.id}`, children: [
+    /* @__PURE__ */ jsxs5(ButtonGroup2, { children: [
+      /* @__PURE__ */ jsx7(Button2, { disabled: !canMove || !canMoveUp, onClick: () => onMove(-1), children: i18n.t("moveUp") }),
+      /* @__PURE__ */ jsx7(Button2, { disabled: !canMove || !canMoveDown, onClick: () => onMove(1), children: i18n.t("moveDown") }),
+      /* @__PURE__ */ jsx7(Button2, { disabled: !canDuplicate, accessibilityLabel: canDuplicate ? i18n.t("duplicate") : i18n.t("duplicateUnavailable"), onClick: onDuplicate, children: i18n.t("duplicate") }),
+      /* @__PURE__ */ jsx7(Button2, { disabled: !canDelete, tone: "critical", onClick: onDelete, children: i18n.t("remove") })
+    ] }),
+    !canDuplicate ? /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: i18n.t("duplicateUnavailable") }) : null
+  ] });
 }
 function DeleteConfirmation({ block, config, i18n, onCancel, onConfirm }) {
   return /* @__PURE__ */ jsx7("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs5("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-delete-confirmation-title", children: [

package/package.json

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

package/src/styles.css

@@ -48,6 +48,9 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-inspector-section:not([open]) > summary > span:last-child { transform: rotate(-90deg); }
 .pb-inspector-section__body { display: grid; gap: var(--builder-space-3); padding: 0 var(--builder-space-3) var(--builder-space-3); border-top: 1px solid #f1f5f9; }
 .pb-inspector-field { display: grid; gap: 6px; }
+.pb-inspector-field__limited { display: flex; align-items: center; gap: 8px; }
+.pb-inspector-field__limited > :first-child { flex: 1; min-width: 0; }
+.pb-inspector-field__limit { flex: 0 0 auto; color: #6d7175; font-size: 12px; font-variant-numeric: tabular-nums; }
 .pb-inspector-field__heading { display: grid; gap: 2px; }
 .pb-inspector-field__heading p { margin: 0; }
 .pb-inspector-field__heading p:first-child { color: #334155; font-size: 13px; }
@@ -68,7 +71,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .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-asset-picker__preview { display: block; width: 100%; aspect-ratio: 20 / 9; object-fit: fill; object-position: center; border: 1px solid #e2e8f0; border-radius: 8px; 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%); }