@standhigher/puck-page-builder 0.11.0 → 0.12.0

package/README.md

@@ -65,7 +65,7 @@ const notice = {
 />
 ```
 
-Built-in field controls are `text` (single line), `textarea` (multi-line), `url`, and `color`. Their validation runs in the editor before save or publish; custom fields may continue using a block's `validate` function. `validateFieldValue` is exported from `/extensions` when a host needs the same validation outside the editor.
+Built-in field controls are `text` (single line), `textarea` (multi-line), `url`, `color`, and `products`. `products` only renders the selected snapshot and a host picker button; Shopify search stays in the host `productPicker` adapter. Their validation runs in the editor before save or publish; custom fields may continue using a block's `validate` function. `validateFieldValue` is exported from `/extensions` when a host needs the same validation outside the editor.
 
 Theme values remain deliberately token-based: template theme → page theme → variant theme → block style. A block resets an inherited token by setting its local token explicitly (for example `{ radius: "0" }`), so no incompatible persisted style-reset shape is needed.
 

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

@@ -1,3 +1,46 @@
+// src/core/extensions/product-reference.ts
+function isHttpUrl(value) {
+  try {
+    const url = new URL(value);
+    return (url.protocol === "https:" || url.protocol === "http:") && !url.username && !url.password;
+  } catch {
+    return false;
+  }
+}
+function isProductReference(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const candidate = value;
+  if (typeof candidate.id !== "string" || !candidate.id.trim()) return false;
+  if (candidate.title !== void 0 && typeof candidate.title !== "string") return false;
+  if (candidate.handle !== void 0 && typeof candidate.handle !== "string") return false;
+  if (candidate.imageUrl !== void 0 && (typeof candidate.imageUrl !== "string" || !isHttpUrl(candidate.imageUrl))) return false;
+  return true;
+}
+function parseProductReferences(value) {
+  if (!Array.isArray(value)) return [];
+  const products = [];
+  for (const item of value) {
+    if (!item || typeof item !== "object" || Array.isArray(item)) continue;
+    const candidate = item;
+    if (typeof candidate.id !== "string" || !candidate.id.trim()) continue;
+    products.push({
+      id: candidate.id.trim(),
+      ...typeof candidate.title === "string" && candidate.title.trim() ? { title: candidate.title.trim() } : {},
+      ...typeof candidate.handle === "string" && candidate.handle.trim() ? { handle: candidate.handle.trim() } : {},
+      ...typeof candidate.imageUrl === "string" && isHttpUrl(candidate.imageUrl) ? { imageUrl: candidate.imageUrl } : {}
+    });
+  }
+  return products;
+}
+function toProductReferenceJson(product) {
+  return {
+    id: product.id,
+    ...product.title ? { title: product.title } : {},
+    ...product.handle ? { handle: product.handle } : {},
+    ...product.imageUrl ? { imageUrl: product.imageUrl } : {}
+  };
+}
+
 // src/core/extensions/validation.ts
 var hexColor = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
 function stringLength(value) {
@@ -19,6 +62,10 @@ function validateFieldValue(config, value) {
   const control = config.control;
   if (!control && !config.required && !config.validation) return [];
   if (value === void 0 && !config.required) return [];
+  if (control === "products") {
+    if (!Array.isArray(value)) return [{ path: "", message: "\u5FC5\u987B\u662F\u5546\u54C1\u5217\u8868\u3002" }];
+    return value.flatMap((item, index) => isProductReference(item) ? [] : [{ path: String(index), message: "\u5FC5\u987B\u5305\u542B\u7A33\u5B9A\u7684\u5546\u54C1 ID\u3002" }]);
+  }
   if (typeof value !== "string") return [{ path: "", message: "\u5FC5\u987B\u662F\u5B57\u7B26\u4E32\u3002" }];
   const issues = [];
   if (config.required && value.trim().length === 0) issues.push({ path: "", message: "\u6B64\u5B57\u6BB5\u4E3A\u5FC5\u586B\u9879\u3002" });
@@ -314,6 +361,9 @@ function validatePageDocumentWithRegistry(document, registry) {
 }
 
 export {
+  isProductReference,
+  parseProductReferences,
+  toProductReferenceJson,
   validateFieldValue,
   validateBlockPolicy,
   mergeBlockPolicies,

package/dist/extensions.d.ts

@@ -1,6 +1,6 @@
-import { h as ExtensionRegistry, V as ValidationIssue, c as BlockPolicy, F as FieldConfig } from './registry-eNtkEC6o.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-eNtkEC6o.js';
-import { PageDocument } from './schema.js';
+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 { PageDocument, JsonValue } from './schema.js';
 import 'react';
 import './theme.js';
 
@@ -12,6 +12,20 @@ import './theme.js';
  */
 declare function validatePageDocumentWithRegistry(document: PageDocument, registry: ExtensionRegistry): ValidationIssue[];
 
+/**
+ * JSON-only product snapshot persisted in PageDocument props.
+ * Hosts may add a stable id plus display fields; never store tokens or prices as secrets.
+ */
+type ProductReference = {
+    id: string;
+    title?: string;
+    imageUrl?: string;
+    handle?: string;
+};
+declare function isProductReference(value: unknown): value is ProductReference;
+declare function parseProductReferences(value: unknown): ProductReference[];
+declare function toProductReferenceJson(product: ProductReference): JsonValue;
+
 /** Validates the portable built-in controls without relying on browser-only APIs. */
 declare function validateFieldValue(config: FieldConfig, value: unknown): ValidationIssue[];
 /** Returns a diagnostic for an invalid declaration, or `null` when it is usable. */
@@ -20,4 +34,4 @@ declare function mergeBlockPolicies(...policies: Array<BlockPolicy | undefined>)
 declare function minimumBlockInstances(policy: BlockPolicy | undefined): number;
 declare function maximumBlockInstances(policy: BlockPolicy | undefined): number;
 
-export { BlockPolicy, ExtensionRegistry, FieldConfig, ValidationIssue, maximumBlockInstances, mergeBlockPolicies, minimumBlockInstances, validateBlockPolicy, validateFieldValue, validatePageDocumentWithRegistry };
+export { BlockPolicy, ExtensionRegistry, FieldConfig, type ProductReference, ValidationIssue, isProductReference, maximumBlockInstances, mergeBlockPolicies, minimumBlockInstances, parseProductReferences, toProductReferenceJson, validateBlockPolicy, validateFieldValue, validatePageDocumentWithRegistry };

package/dist/extensions.js

@@ -4,22 +4,28 @@ import {
   TemplateRegistry,
   createExtensionRegistry,
   createTemplateRegistry,
+  isProductReference,
   maximumBlockInstances,
   mergeBlockPolicies,
   minimumBlockInstances,
+  parseProductReferences,
+  toProductReferenceJson,
   validateBlockPolicy,
   validateFieldValue,
   validatePageDocumentWithRegistry
-} from "./chunk-PFCWXLWN.js";
+} from "./chunk-YXBTNYPR.js";
 export {
   ExtensionRegistry,
   ExtensionRegistryError,
   TemplateRegistry,
   createExtensionRegistry,
   createTemplateRegistry,
+  isProductReference,
   maximumBlockInstances,
   mergeBlockPolicies,
   minimumBlockInstances,
+  parseProductReferences,
+  toProductReferenceJson,
   validateBlockPolicy,
   validateFieldValue,
   validatePageDocumentWithRegistry

package/dist/index.d.ts

@@ -1,13 +1,14 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { f as EditorOperationPolicy, c as BlockPolicy, V as ValidationIssue, h as ExtensionRegistry } from './registry-eNtkEC6o.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-eNtkEC6o.js';
+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 { 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';
+export { isProductReference, maximumBlockInstances, mergeBlockPolicies, minimumBlockInstances, parseProductReferences, toProductReferenceJson, validateBlockPolicy, validateFieldValue, validatePageDocumentWithRegistry } from './extensions.js';
 export { ThemeTokenName, ThemeTokens, mergeThemeTokens, normalizeThemeTokens, systemThemeTokens, toThemeStyle } from './theme.js';
 import { Data } from '@puckeditor/core';
 export { WebRenderer, WebRendererProps } from './renderer.js';
-export { maximumBlockInstances, mergeBlockPolicies, minimumBlockInstances, validateBlockPolicy, validateFieldValue, validatePageDocumentWithRegistry } from './extensions.js';
 
 type BlockView = "blocks" | "outline";
 type Device = "desktop" | "tablet" | "mobile" | "full";
@@ -129,6 +130,19 @@ type AssetPickerAdapter = {
         current?: Partial<AssetReference>;
     }): Promise<AssetReference | null>;
 };
+/**
+ * Opens a host-owned product picker. Search, Shopify App Bridge, and
+ * authorization stay in the host; this package only displays the snapshot
+ * and forwards the button click.
+ */
+type ProductPickerAdapter = {
+    selectProducts(input: {
+        pageId: string;
+        blockId: string;
+        current: readonly ProductReference[];
+        multiple?: boolean;
+    }): Promise<readonly ProductReference[] | null>;
+};
 type PagePublicationStatus = "unpublished" | "published";
 /** Presentational data for the reusable page state card. */
 type PageStatus = {
@@ -233,9 +247,16 @@ type PageDocumentEditorShellProps = {
     publishAction?: PublishAction;
     /** Host-owned picker/uploader for shop-scoped assets. */
     assetPicker?: AssetPickerAdapter;
+    /** Host-owned product picker. The shell only shows the selected snapshot and a button. */
+    productPicker?: ProductPickerAdapter;
     /** Optional reusable page lifecycle summary. */
     pageStatus?: PageStatus;
     onBack?: () => void;
+    onHistory?: (input: {
+        document: PageDocument;
+        draftRevision?: number;
+        session?: EditorSession;
+    }) => void;
     onPreview?: (input: {
         document: PageDocument;
         draftRevision?: number;
@@ -286,6 +307,7 @@ declare const messages: {
         readonly unsaved: "未保存变更";
         readonly saved: "所有更改已保留在当前会话中";
         readonly save: "保存草稿";
+        readonly history: "历史记录";
         readonly saving: "正在保存…";
         readonly publish: "发布";
         readonly publishing: "正在发布…";
@@ -314,9 +336,11 @@ declare const messages: {
         readonly collapseRight: "收起属性面板";
         readonly expandLeft: "打开区块面板";
         readonly expandRight: "打开属性面板";
-        readonly toggleSidebars: "侧栏显示";
-        readonly toggleLeftSidebar: "切换左侧面板";
-        readonly toggleRightSidebar: "切换属性面板";
+        readonly selectProducts: "从 Shopify 选择商品";
+        readonly selectingProducts: "正在选择商品…";
+        readonly selectProductsFailed: "无法选择商品，请重试。";
+        readonly emptyProducts: "未选择商品";
+        readonly productCountSuffix: "件商品";
     };
     readonly en: {
         readonly blocks: "Blocks";
@@ -341,6 +365,7 @@ declare const messages: {
         readonly unsaved: "Unsaved changes";
         readonly saved: "Changes are kept in this session";
         readonly save: "Save draft";
+        readonly history: "History";
         readonly saving: "Saving…";
         readonly publish: "Publish";
         readonly publishing: "Publishing…";
@@ -369,19 +394,21 @@ declare const messages: {
         readonly collapseRight: "Collapse properties panel";
         readonly expandLeft: "Open blocks panel";
         readonly expandRight: "Open properties panel";
-        readonly toggleSidebars: "Sidebar visibility";
-        readonly toggleLeftSidebar: "Toggle left sidebar";
-        readonly toggleRightSidebar: "Toggle right sidebar";
+        readonly selectProducts: "Select from Shopify";
+        readonly selectingProducts: "Selecting products…";
+        readonly selectProductsFailed: "Could not select products. Try again.";
+        readonly emptyProducts: "No products selected";
+        readonly productCountSuffix: "products";
     };
 };
 type AdminMessageKey = keyof typeof messages["zh-CN"];
 /** Minimal, dependency-free Admin copy catalog. Product locale remains PageDocument.settings.locale. */
 declare function createAdminI18n(locale?: string): {
     locale: AdminLocale;
-    t: (key: AdminMessageKey) => "Desktop" | "Tablet" | "Mobile" | "未保存变更" | "Outline" | "Preview" | "缩放" | "区块" | "结构" | "撤销" | "恢复" | "收起左侧面板" | "收起属性面板" | "Delete" | "Duplicate" | "编辑锁已失效" | "属性" | "添加区块" | "复制" | "删除" | "确认删除区块？" | "删除后可使用撤销恢复。" | "取消" | "确认删除" | "上移" | "下移" | "正在加载编辑器…" | "页面还没有区块" | "编辑器无法加载" | "编辑器当前不可编辑" | "操作已完成" | "所有更改已保留在当前会话中" | "保存草稿" | "正在保存…" | "发布" | "正在发布…" | "保存草稿失败" | "重试保存" | "当前离线，恢复网络后将自动保存" | "发布失败" | "已发布" | "返回" | "离开编辑器？" | "离开" | "自动缩放" | "正式预览" | "添加到店铺" | "正在获取编辑锁…" | "该页面正在被编辑" | "页面为只读状态" | "你有未保存的更改。确定要离开吗？" | "选择一个区块以编辑。" | "桌面" | "平板" | "手机" | "打开区块面板" | "打开属性面板" | "侧栏显示" | "切换左侧面板" | "切换属性面板" | "Blocks" | "Properties" | "Add block" | "Undo" | "Redo" | "Delete this block?" | "You can restore it with Undo after deleting." | "Cancel" | "Delete block" | "Move up" | "Move down" | "Loading editor…" | "This page has no blocks" | "The editor could not load" | "The editor is currently read-only" | "Action completed" | "Unsaved changes" | "Changes are kept in this session" | "Save draft" | "Saving…" | "Publish" | "Publishing…" | "Could not save draft" | "Retry save" | "Offline — changes will save when connection returns" | "Could not publish" | "Published" | "Back" | "Leave the editor?" | "Leave" | "Zoom" | "Auto zoom" | "Add to store" | "Acquiring edit lock…" | "This page is being edited" | "The edit lock has expired" | "This page is read-only" | "You have unsaved changes. Are you sure you want to leave?" | "Select a block to edit it." | "Collapse blocks panel" | "Collapse properties panel" | "Open blocks panel" | "Open properties panel" | "Sidebar visibility" | "Toggle left sidebar" | "Toggle right sidebar";
+    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";
 };
 
 declare function toEngineData(document: PageDocument, registry?: ExtensionRegistry): Data;
 declare function fromEngineData(data: Data, base: PageDocument, registry?: ExtensionRegistry): PageDocument;
 
-export { type AdminLocale, type AdminMessageKey, type AssetPickerAdapter, type AssetReference, type AssetStatus, BlockNode, BlockPolicy, type DeleteConfirmationConfig, type DemoBlock, type Device, type DraftPersistenceAdapter, type DraftSaveInput, type DraftSaveResult, type EditorActionState, type EditorLoadState, EditorOperationPolicy, EditorProvider, type EditorSession, type EditorSessionAcquireResult, type EditorSessionAdapter, type EditorSessionState, EditorShell, type EditorShellProps, type EditorState, ExtensionRegistry, JsonValue, PageDocument, type PageDocumentEditorPolicy, PageDocumentEditorShell, type PageDocumentEditorShellProps, type PagePublicationStatus, type PageStatus, PageStatusCard, type PageStatusCardProps, type PreviewMode, type PublishAction, type PublishActionInput, type PublishActionResult, type PublishState, type SaveState, ValidationIssue, type Zoom, createAdminI18n, fromEngineData, toEngineData, useEditorContext };
+export { type AdminLocale, type AdminMessageKey, type AssetPickerAdapter, type AssetReference, type AssetStatus, BlockNode, BlockPolicy, type DeleteConfirmationConfig, type DemoBlock, type Device, type DraftPersistenceAdapter, type DraftSaveInput, type DraftSaveResult, type EditorActionState, type EditorLoadState, EditorOperationPolicy, EditorProvider, type EditorSession, type EditorSessionAcquireResult, type EditorSessionAdapter, type EditorSessionState, EditorShell, type EditorShellProps, type EditorState, ExtensionRegistry, JsonValue, PageDocument, type PageDocumentEditorPolicy, PageDocumentEditorShell, type PageDocumentEditorShellProps, type PagePublicationStatus, type PageStatus, PageStatusCard, type PageStatusCardProps, type PreviewMode, type ProductPickerAdapter, ProductReference, type PublishAction, type PublishActionInput, type PublishActionResult, type PublishState, type SaveState, ValidationIssue, type Zoom, createAdminI18n, fromEngineData, toEngineData, useEditorContext };

package/dist/index.js

@@ -4,13 +4,16 @@ import {
   TemplateRegistry,
   createExtensionRegistry,
   createTemplateRegistry,
+  isProductReference,
   maximumBlockInstances,
   mergeBlockPolicies,
   minimumBlockInstances,
+  parseProductReferences,
+  toProductReferenceJson,
   validateBlockPolicy,
   validateFieldValue,
   validatePageDocumentWithRegistry
-} from "./chunk-PFCWXLWN.js";
+} from "./chunk-YXBTNYPR.js";
 import {
   WebRenderer
 } from "./chunk-KYXIXIWK.js";
@@ -347,9 +350,9 @@ function PropertyPanel({
 }
 
 // src/editor/shell/PageDocumentEditorShell.tsx
-import { IconButton as IconButton2, Puck as Puck2, usePuck } from "@puckeditor/core";
+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 { DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2, XIcon as XIcon2 } from "@shopify/polaris-icons";
+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";
 
 // src/adapters/puck/canvas-extension-block.tsx
@@ -786,6 +789,7 @@ var messages = {
     unsaved: "\u672A\u4FDD\u5B58\u53D8\u66F4",
     saved: "\u6240\u6709\u66F4\u6539\u5DF2\u4FDD\u7559\u5728\u5F53\u524D\u4F1A\u8BDD\u4E2D",
     save: "\u4FDD\u5B58\u8349\u7A3F",
+    history: "\u5386\u53F2\u8BB0\u5F55",
     saving: "\u6B63\u5728\u4FDD\u5B58\u2026",
     publish: "\u53D1\u5E03",
     publishing: "\u6B63\u5728\u53D1\u5E03\u2026",
@@ -814,9 +818,11 @@ var messages = {
     collapseRight: "\u6536\u8D77\u5C5E\u6027\u9762\u677F",
     expandLeft: "\u6253\u5F00\u533A\u5757\u9762\u677F",
     expandRight: "\u6253\u5F00\u5C5E\u6027\u9762\u677F",
-    toggleSidebars: "\u4FA7\u680F\u663E\u793A",
-    toggleLeftSidebar: "\u5207\u6362\u5DE6\u4FA7\u9762\u677F",
-    toggleRightSidebar: "\u5207\u6362\u5C5E\u6027\u9762\u677F"
+    selectProducts: "\u4ECE Shopify \u9009\u62E9\u5546\u54C1",
+    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"
   },
   en: {
     blocks: "Blocks",
@@ -841,6 +847,7 @@ var messages = {
     unsaved: "Unsaved changes",
     saved: "Changes are kept in this session",
     save: "Save draft",
+    history: "History",
     saving: "Saving\u2026",
     publish: "Publish",
     publishing: "Publishing\u2026",
@@ -869,9 +876,11 @@ var messages = {
     collapseRight: "Collapse properties panel",
     expandLeft: "Open blocks panel",
     expandRight: "Open properties panel",
-    toggleSidebars: "Sidebar visibility",
-    toggleLeftSidebar: "Toggle left sidebar",
-    toggleRightSidebar: "Toggle right sidebar"
+    selectProducts: "Select from Shopify",
+    selectingProducts: "Selecting products\u2026",
+    selectProductsFailed: "Could not select products. Try again.",
+    emptyProducts: "No products selected",
+    productCountSuffix: "products"
   }
 };
 function createAdminI18n(locale) {
@@ -899,12 +908,6 @@ function blockTypeLabel(type, registry) {
   if (type === "core.image") return "\u56FE\u7247";
   return registry?.getBlock(type)?.label ?? type;
 }
-function PuckPanelIcon({ side }) {
-  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [
-    /* @__PURE__ */ jsx7("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-    /* @__PURE__ */ jsx7("path", { d: side === "left" ? "M9 3v18" : "M15 3v18" })
-  ] });
-}
 function validateDocumentBlocks(document, registry) {
   return registry ? validatePageDocumentWithRegistry(document, registry) : [];
 }
@@ -957,7 +960,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, pageStatus, onBack, onPreview, onAddToStore, deleteConfirmation, availableBlockTypes, appearanceControls = false }) {
+function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onPublish, draftPersistence, draftRevision: initialDraftRevision, autoSave = true, autoSaveDelayMs = 800, publishAction, assetPicker, productPicker, pageStatus, onBack, onHistory, onPreview, onAddToStore, deleteConfirmation, availableBlockTypes, appearanceControls = false }) {
   const editor = useEditorContext();
   const [blockView, setBlockView] = useState3("blocks");
   const [leftRailOpen, setLeftRailOpen] = useState3(true);
@@ -1104,18 +1107,15 @@ function PageDocumentEditor({ iframe = false, registry, adminLocale, onSave, onP
               editor.document.target
             ] }),
             pageStatus ? /* @__PURE__ */ jsx7(PageStatusCard, { status: pageStatus, sessionState: editor.sessionState }) : null
-          ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "pb-header-sidebar-toggles", role: "group", "aria-label": i18n.t("toggleSidebars"), "data-testid": "sidebar-toggles", children: [
-            /* @__PURE__ */ jsx7(IconButton2, { type: "button", title: i18n.t("toggleLeftSidebar"), onClick: () => setLeftRailOpen((open) => !open), children: /* @__PURE__ */ jsx7(PuckPanelIcon, { side: "left" }) }),
-            /* @__PURE__ */ jsx7(IconButton2, { type: "button", title: i18n.t("toggleRightSidebar"), onClick: () => setRightPanelOpen((open) => !open), children: /* @__PURE__ */ jsx7(PuckPanelIcon, { side: "right" }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "pb-header-device-toolbar", children: [
+        /* @__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: false, children: [
+        ] }) }),
+        /* @__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,
@@ -1189,7 +1189,7 @@ 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, 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, { 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(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") })
         ] })
@@ -1260,7 +1260,33 @@ 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 InspectorField({ name, field, value, registry, disabled, onChange }) {
+function InspectorProductsControl({ value, disabled, picker, pageId, blockId, i18n, onChange }) {
+  const products = parseProductReferences(value);
+  const [busy, setBusy] = useState3(false);
+  const [error, setError] = useState3(null);
+  const preview = products.slice(0, 4);
+  return /* @__PURE__ */ jsxs5("div", { className: "pb-product-picker", "data-testid": "product-picker", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "pb-product-picker__summary", children: [
+      preview.length ? /* @__PURE__ */ jsx7("span", { className: "pb-product-picker__thumbs", "aria-hidden": "true", children: preview.map((product, index) => /* @__PURE__ */ jsx7("span", { className: "pb-product-picker__thumb", style: { zIndex: preview.length - index }, children: product.imageUrl ? /* @__PURE__ */ jsx7("img", { src: product.imageUrl, alt: "" }) : /* @__PURE__ */ jsx7("span", { className: "pb-product-picker__thumb-fallback" }) }, product.id)) }) : null,
+      /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", children: products.length ? `${products.length} ${i18n.t("productCountSuffix")}` : i18n.t("emptyProducts") })
+    ] }),
+    /* @__PURE__ */ jsx7(Button2, { fullWidth: true, icon: ProductIcon, variant: "secondary", disabled: disabled || busy || !picker, onClick: () => void (async () => {
+      if (!picker) return;
+      setBusy(true);
+      setError(null);
+      try {
+        const next = await picker.selectProducts({ pageId, blockId, current: products, multiple: true });
+        if (next) onChange(parseProductReferences(next).map(toProductReferenceJson));
+      } catch {
+        setError(i18n.t("selectProductsFailed"));
+      } finally {
+        setBusy(false);
+      }
+    })(), children: busy ? i18n.t("selectingProducts") : i18n.t("selectProducts") }),
+    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 }) {
   const label = field.label ?? name;
   const issues = validateFieldValue(field, value);
   const Field = registry?.getField(field.field)?.component;
@@ -1269,7 +1295,7 @@ function InspectorField({ name, field, value, registry, disabled, onChange }) {
       /* @__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 ? /* @__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 ? /* @__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))
   ] });
 }
@@ -1308,7 +1334,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, block, registry, disabled, appearanceControls, onChange, onPresentationChange }) {
+function DocumentInspector({ 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);
@@ -1327,10 +1353,10 @@ function DocumentInspector({ pageId, assetPicker, block, registry, disabled, app
         /* @__PURE__ */ jsx7(Text3, { as: "p", variant: "bodySm", tone: "subdued", children: definition?.category ?? "Core block" })
       ] })
     ] }),
-    block.type === "core.text" ? /* @__PURE__ */ jsx7(InspectorSection, { title: "Content", children: /* @__PURE__ */ jsx7(InspectorField, { name: "content", field: { field: "", label: "\u6587\u672C\u5185\u5BB9", control: "textarea", description: "\u652F\u6301\u8F83\u957F\u7684\u6B63\u6587\u5185\u5BB9\u3002" }, value: block.props.content, registry, disabled, onChange: (content) => onChange({ content }) }) }) : null,
+    block.type === "core.text" ? /* @__PURE__ */ jsx7(InspectorSection, { title: "Content", children: /* @__PURE__ */ jsx7(InspectorField, { name: "content", field: { field: "", label: "\u6587\u672C\u5185\u5BB9", control: "textarea", description: "\u652F\u6301\u8F83\u957F\u7684\u6B63\u6587\u5185\u5BB9\u3002" }, value: block.props.content, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (content) => onChange({ content }) }) }) : null,
     block.type === "core.image" ? /* @__PURE__ */ jsxs5(InspectorSection, { title: "Image", children: [
-      /* @__PURE__ */ jsx7(InspectorField, { name: "src", field: { field: "", label: "\u56FE\u7247 URL", control: "url", description: "\u4F7F\u7528 HTTPS \u56FE\u7247\u5730\u5740\u3002" }, value: block.props.src, registry, disabled, onChange: (src) => onChange({ src }) }),
-      /* @__PURE__ */ jsx7(InspectorField, { name: "alt", field: { field: "", label: "\u66FF\u4EE3\u6587\u672C", control: "text", description: "\u7528\u4E8E\u65E0\u969C\u788D\u9605\u8BFB\u548C\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u573A\u666F\u3002" }, value: block.props.alt, registry, disabled, onChange: (alt) => onChange({ alt }) }),
+      /* @__PURE__ */ jsx7(InspectorField, { name: "src", field: { field: "", label: "\u56FE\u7247 URL", control: "url", description: "\u4F7F\u7528 HTTPS \u56FE\u7247\u5730\u5740\u3002" }, value: block.props.src, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (src) => onChange({ src }) }),
+      /* @__PURE__ */ jsx7(InspectorField, { name: "alt", field: { field: "", label: "\u66FF\u4EE3\u6587\u672C", control: "text", description: "\u7528\u4E8E\u65E0\u969C\u788D\u9605\u8BFB\u548C\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u573A\u666F\u3002" }, value: block.props.alt, registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (alt) => onChange({ alt }) }),
       assetPicker ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
         /* @__PURE__ */ jsx7(Button2, { disabled: disabled || selectingAsset, onClick: () => void (async () => {
           setSelectingAsset(true);
@@ -1347,7 +1373,7 @@ function DocumentInspector({ pageId, assetPicker, block, registry, disabled, app
         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, 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: block.props[name], registry, disabled, productPicker, pageId, blockId: block.id, i18n, onChange: (value) => onChange({ ...block.props, [name]: value }) }, name)) }, group)),
     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 };
@@ -1371,14 +1397,17 @@ export {
   createPageDocument,
   createTemplateRegistry,
   fromEngineData,
+  isProductReference,
   maximumBlockInstances,
   mergeBlockPolicies,
   mergeThemeTokens,
   migratePageDocument,
   minimumBlockInstances,
   normalizeThemeTokens,
+  parseProductReferences,
   systemThemeTokens,
   toEngineData,
+  toProductReferenceJson,
   toThemeStyle,
   useEditorContext,
   validateBlockPolicy,

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

@@ -42,7 +42,7 @@ type FieldConfig = {
     field: string;
     label?: string;
     /** Product-facing editor metadata. Custom field components remain supported. */
-    control?: "text" | "textarea" | "url" | "color";
+    control?: "text" | "textarea" | "url" | "color" | "products";
     description?: string;
     group?: string;
     /** Kept for compatibility; it participates in the built-in validation. */

package/dist/renderer.d.ts

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

package/dist/runtime.d.ts

@@ -1,6 +1,6 @@
 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-eNtkEC6o.js';
-export { maximumBlockInstances, mergeBlockPolicies, minimumBlockInstances, validateBlockPolicy, validateFieldValue, validatePageDocumentWithRegistry } from './extensions.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 { 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';
 import 'react';

package/dist/runtime.js

@@ -4,13 +4,16 @@ import {
   TemplateRegistry,
   createExtensionRegistry,
   createTemplateRegistry,
+  isProductReference,
   maximumBlockInstances,
   mergeBlockPolicies,
   minimumBlockInstances,
+  parseProductReferences,
+  toProductReferenceJson,
   validateBlockPolicy,
   validateFieldValue,
   validatePageDocumentWithRegistry
-} from "./chunk-PFCWXLWN.js";
+} from "./chunk-YXBTNYPR.js";
 import {
   WebRenderer
 } from "./chunk-KYXIXIWK.js";
@@ -33,13 +36,16 @@ export {
   createExtensionRegistry,
   createPageDocument,
   createTemplateRegistry,
+  isProductReference,
   maximumBlockInstances,
   mergeBlockPolicies,
   mergeThemeTokens,
   migratePageDocument,
   minimumBlockInstances,
   normalizeThemeTokens,
+  parseProductReferences,
   systemThemeTokens,
+  toProductReferenceJson,
   toThemeStyle,
   validateBlockPolicy,
   validateFieldValue,

package/package.json

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

package/src/styles.css

@@ -7,16 +7,18 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-shell { min-height: 100vh; color: var(--builder-text); background: var(--builder-canvas-bg); }
 .pb-shell [class*="PuckLayout-inner"] { height: auto !important; min-height: 100%; }
 .pb-header { position: sticky; top: 0; z-index: 20; min-height: 56px; padding: var(--builder-space-2) var(--builder-space-4); border-bottom: 1px solid var(--builder-border); background: var(--builder-surface); }
-.pb-header-content { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--builder-space-3); }
-.pb-header-title-group { display: flex; align-items: center; gap: var(--builder-space-2); min-width: 0; }
+.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 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-header-sidebar-toggles { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
-.pb-header-sidebar-toggles [class*="IconButton"] { min-width: 28px; min-height: 28px; padding: 0; color: var(--builder-text); }
-.pb-header-sidebar-toggles svg { display: block; width: 28px; height: 28px; }
+.pb-page-title h1, .pb-page-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pb-page-title p { margin: 0; }
-.pb-header-device-toolbar { display: flex; align-items: center; justify-self: center; gap: var(--builder-space-2); }
-.pb-header-actions { justify-self: end; min-width: 0; }
-.pb-zoom-control { width: 112px; }
+.pb-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; }
 .pb-page-status-card { display: grid; gap: 2px; margin-top: var(--builder-space-1); }
 .pb-page-status-card p { margin: 0; }
 .pb-workspace { display: grid; grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 320px); min-height: calc(100vh - 56px); }
@@ -50,6 +52,14 @@ 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-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; }
+.pb-product-picker__thumbs { display: flex; align-items: center; }
+.pb-product-picker__thumb { display: inline-flex; width: 32px; height: 32px; margin-left: -8px; overflow: hidden; border: 2px solid #fff; border-radius: 8px; background: #e2e8f0; box-shadow: 0 0 0 1px #e2e8f0; }
+.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-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%); }
@@ -98,7 +108,8 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-library-block-drag-hint svg { width: 16px; height: 16px; }
 .pb-document-block-row:hover { background: var(--builder-surface-subtle); }
 .pb-document-block-row--selected { border-color: var(--builder-accent); background: var(--builder-accent-subtle); }
-.pb-editor-status { display: grid; place-items: center; min-height: min(50vh, 420px); padding: var(--builder-space-6); }
+.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-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; }
@@ -131,5 +142,5 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .bt-storefront__form input { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid #b8c3cc; border-radius: 8px; font: inherit; }
 .bt-storefront__form button { padding: 13px 18px; border: 0; border-radius: 8px; color: white; background: #203e54; font: inherit; font-weight: 600; }
 @media (max-width: 1180px) { .pb-workspace { grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr); } .pb-workspace--left-closed { grid-template-columns: 64px minmax(0, 1fr); } .pb-right-panel { grid-column: 2 / -1; border-top: 1px solid var(--builder-border); border-left: 0; } }
-@media (max-width: 1023px) { .pb-header { position: static; overflow: auto; } .pb-workspace { grid-template-columns: 64px minmax(0, 1fr); } .pb-left-panel, .pb-right-panel { grid-column: 2; border-left: 0; border-right: 0; border-bottom: 1px solid var(--builder-border); } .pb-canvas-area { grid-column: 2; } }
-@media (max-width: 640px) { .pb-header, .pb-canvas-area { padding: var(--builder-space-2); } .pb-header-content { min-width: 680px; } .pb-canvas-stage { padding: 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: 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: 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; } }