@standhigher/puck-page-builder 0.1.0 → 0.8.0

package/dist/chunk-KYXIXIWK.js

@@ -0,0 +1,25 @@
+import {
+  mergeThemeTokens,
+  toThemeStyle
+} from "./chunk-YK2AUHF6.js";
+
+// src/renderer/web/WebRenderer.tsx
+import { jsx } from "react/jsx-runtime";
+function WebRenderer({ document, className, registry }) {
+  const template = document.templateId ? registry?.getTemplate(document.templateId) : void 0;
+  const pageTheme = mergeThemeTokens(template?.theme, document.theme);
+  return /* @__PURE__ */ jsx("main", { className: className ?? "pb-web-renderer", "data-page-id": document.pageId, lang: document.settings.locale, style: toThemeStyle(pageTheme), children: document.blocks.map((block) => {
+    const definition = registry?.getBlock(block.type);
+    const variant = definition?.variants?.find((item) => item.id === block.variant);
+    const style = toThemeStyle(mergeThemeTokens(template?.theme, document.theme, variant?.theme, block.style));
+    if (block.type === "core.text") return /* @__PURE__ */ jsx("section", { "data-block-id": block.id, "data-block-variant": block.variant, style, className: "pb-web-renderer__text", children: /* @__PURE__ */ jsx("p", { children: typeof block.props.content === "string" ? block.props.content : "" }) }, block.id);
+    if (block.type === "core.image") return /* @__PURE__ */ jsx("figure", { "data-block-id": block.id, "data-block-variant": block.variant, style, className: "pb-web-renderer__image", children: /* @__PURE__ */ jsx("img", { src: typeof block.props.src === "string" ? block.props.src : "", alt: typeof block.props.alt === "string" ? block.props.alt : "" }) }, block.id);
+    const BlockRenderer = definition?.render.web;
+    if (BlockRenderer) return /* @__PURE__ */ jsx("section", { "data-block-id": block.id, "data-block-variant": block.variant, style, children: /* @__PURE__ */ jsx(BlockRenderer, { ...block.props }) }, block.id);
+    return null;
+  }) });
+}
+
+export {
+  WebRenderer
+};

package/dist/{chunk-G2LNCKYO.js → chunk-OBN4DMOR.js}

@@ -1,6 +1,10 @@
+import {
+  normalizeThemeTokens
+} from "./chunk-YK2AUHF6.js";
+
 // src/core/schema/page-document.ts
-var pageDocumentKeys = /* @__PURE__ */ new Set(["schemaVersion", "pageId", "target", "templateId", "root", "blocks", "settings"]);
-var blockKeys = /* @__PURE__ */ new Set(["id", "type", "version", "props", "slots", "binding"]);
+var pageDocumentKeys = /* @__PURE__ */ new Set(["schemaVersion", "pageId", "target", "templateId", "templateVersion", "theme", "root", "blocks", "settings"]);
+var blockKeys = /* @__PURE__ */ new Set(["id", "type", "version", "props", "variant", "style", "slots", "binding"]);
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -9,6 +13,10 @@ function isJsonValue(value) {
   if (Array.isArray(value)) return value.every(isJsonValue);
   return isRecord(value) && Object.values(value).every(isJsonValue);
 }
+function themeTokensOrEmpty(value) {
+  const result = normalizeThemeTokens(value);
+  return result.success ? result.data : {};
+}
 function normalizeBlock(value, path, issues) {
   if (!isRecord(value)) {
     issues.push({ path, message: "\u5FC5\u987B\u662F\u5BF9\u8C61" });
@@ -19,6 +27,8 @@ function normalizeBlock(value, path, issues) {
   if (typeof value.type !== "string" || !value.type) issues.push({ path: `${path}.type`, message: "\u5FC5\u987B\u662F\u975E\u7A7A\u5B57\u7B26\u4E32" });
   if (typeof value.version !== "number" || !Number.isInteger(value.version) || value.version < 1) issues.push({ path: `${path}.version`, message: "\u5FC5\u987B\u662F\u5927\u4E8E 0 \u7684\u6574\u6570" });
   if (!isRecord(value.props) || !Object.values(value.props).every(isJsonValue)) issues.push({ path: `${path}.props`, message: "\u5FC5\u987B\u662F JSON \u5BF9\u8C61" });
+  if (typeof value.variant !== "string" || !value.variant) issues.push({ path: `${path}.variant`, message: "\u5FC5\u987B\u662F\u975E\u7A7A\u5B57\u7B26\u4E32" });
+  if (!normalizeThemeTokens(value.style).success) issues.push({ path: `${path}.style`, message: "\u5FC5\u987B\u662F\u53D7\u63A7 Theme Token \u5BF9\u8C61" });
   if (value.binding !== void 0 && (!isRecord(value.binding) || typeof value.binding.source !== "string" || value.binding.params !== void 0 && (!isRecord(value.binding.params) || !Object.values(value.binding.params).every(isJsonValue)))) issues.push({ path: `${path}.binding`, message: "\u5FC5\u987B\u5305\u542B source\uFF0C\u4E14 params \u5FC5\u987B\u662F JSON \u5BF9\u8C61" });
   if (issues.some((issue) => issue.path.startsWith(path))) return null;
   const slots = normalizeSlots(value.slots, `${path}.slots`, issues);
@@ -28,6 +38,8 @@ function normalizeBlock(value, path, issues) {
     type: value.type,
     version: value.version,
     props: value.props,
+    variant: value.variant,
+    style: themeTokensOrEmpty(value.style),
     ...slots ? { slots } : {},
     ...value.binding ? { binding: value.binding } : {}
   };
@@ -53,9 +65,10 @@ function createPageDocument(input) {
     schemaVersion: 1,
     pageId: input.pageId,
     target: input.target ?? "web",
-    ...input.templateId ? { templateId: input.templateId } : {},
+    ...input.templateId ? { templateId: input.templateId, templateVersion: input.templateVersion ?? 1 } : {},
+    theme: themeTokensOrEmpty(input.theme),
     root: input.root ?? {},
-    blocks: input.blocks ?? [],
+    blocks: (input.blocks ?? []).map((block) => ({ ...block, variant: block.variant ?? "default", style: themeTokensOrEmpty(block.style) })),
     settings: { locale: input.settings?.locale ?? "en", ...input.settings?.seoTitle ? { seoTitle: input.settings.seoTitle } : {} }
   };
 }
@@ -67,6 +80,10 @@ function validatePageDocument(value) {
   if (typeof value.pageId !== "string" || !value.pageId) issues.push({ path: "$.pageId", message: "\u5FC5\u987B\u662F\u975E\u7A7A\u5B57\u7B26\u4E32" });
   if (value.target !== "web" && value.target !== "email") issues.push({ path: "$.target", message: "\u5FC5\u987B\u662F web \u6216 email" });
   if (value.templateId !== void 0 && typeof value.templateId !== "string") issues.push({ path: "$.templateId", message: "\u5FC5\u987B\u662F\u5B57\u7B26\u4E32" });
+  if (value.templateVersion !== void 0 && (typeof value.templateVersion !== "number" || !Number.isInteger(value.templateVersion) || value.templateVersion < 1)) issues.push({ path: "$.templateVersion", message: "\u5FC5\u987B\u662F\u5927\u4E8E 0 \u7684\u6574\u6570" });
+  if (typeof value.templateId === "string" && value.templateVersion === void 0) issues.push({ path: "$.templateVersion", message: "\u4F7F\u7528\u6A21\u677F\u65F6\u5FC5\u987B\u4FDD\u5B58\u6A21\u677F\u7248\u672C" });
+  if (value.templateId === void 0 && value.templateVersion !== void 0) issues.push({ path: "$.templateVersion", message: "\u672A\u4F7F\u7528\u6A21\u677F\u65F6\u4E0D\u5F97\u4FDD\u5B58\u6A21\u677F\u7248\u672C" });
+  if (!normalizeThemeTokens(value.theme).success) issues.push({ path: "$.theme", message: "\u5FC5\u987B\u662F\u53D7\u63A7 Theme Token \u5BF9\u8C61" });
   if (!isRecord(value.root) || !Object.values(value.root).every(isJsonValue)) issues.push({ path: "$.root", message: "\u5FC5\u987B\u662F JSON \u5BF9\u8C61" });
   if (!isRecord(value.settings) || typeof value.settings.locale !== "string") issues.push({ path: "$.settings.locale", message: "\u5FC5\u987B\u662F\u5B57\u7B26\u4E32" });
   if (!Array.isArray(value.blocks)) issues.push({ path: "$.blocks", message: "\u5FC5\u987B\u662F\u6570\u7EC4" });
@@ -83,6 +100,8 @@ function validatePageDocument(value) {
       pageId: value.pageId,
       target: value.target,
       ...typeof value.templateId === "string" ? { templateId: value.templateId } : {},
+      ...typeof value.templateVersion === "number" ? { templateVersion: value.templateVersion } : {},
+      theme: themeTokensOrEmpty(value.theme),
       root: value.root,
       blocks,
       settings: value.settings
@@ -90,14 +109,8 @@ function validatePageDocument(value) {
   };
 }
 function migratePageDocument(value) {
-  if (!isRecord(value)) {
-    const validation2 = validatePageDocument(value);
-    return validation2.success ? { ...validation2, migrated: false } : validation2;
-  }
-  const migrated = value.schemaVersion === void 0;
-  const candidate = migrated ? { ...value, schemaVersion: 1 } : value;
-  const validation = validatePageDocument(candidate);
-  return validation.success ? { ...validation, migrated } : validation;
+  const validation = validatePageDocument(value);
+  return validation.success ? { ...validation, migrated: false } : validation;
 }
 
 export {

package/dist/{chunk-RGB53WE6.js → chunk-PUTYZI7B.js}

@@ -56,8 +56,31 @@ function resolveOrder(extensions, disabled) {
   for (const extension of [...active].sort(compareByOrder)) visit(extension);
   return sorted;
 }
+var TemplateRegistry = class _TemplateRegistry {
+  constructor(templateMap) {
+    this.templateMap = templateMap;
+  }
+  templateMap;
+  get templates() {
+    return Object.freeze([...this.templateMap.values()]);
+  }
+  get(id) {
+    return this.templateMap.get(id);
+  }
+  static create(templates, blocks) {
+    const blockTypes = new Set(blocks.map((block) => block.type));
+    for (const template of templates) {
+      if (template.source !== "built-in" && template.source !== "marketplace" && template.source !== "custom") throw new ExtensionRegistryError("invalid-identifier", `Template ${template.id} \u5FC5\u987B\u58F0\u660E built-in\u3001marketplace \u6216 custom \u6765\u6E90`);
+      if (template.target !== "web" && template.target !== "email") throw new ExtensionRegistryError("invalid-target", `Template ${template.id} \u5FC5\u987B\u58F0\u660E web \u6216 email target`);
+      for (const type of template.requiredBlocks ?? []) {
+        if (!blockTypes.has(type)) throw new ExtensionRegistryError("missing-template-dependency", `Template ${template.id} \u7F3A\u5C11\u5DF2\u6CE8\u518C\u533A\u5757\uFF1A${type}`);
+      }
+    }
+    return Object.freeze(new _TemplateRegistry(new Map(templates.map((template) => [template.id, template]))));
+  }
+};
 var ExtensionRegistry = class _ExtensionRegistry {
-  constructor(extensions, blockMap, fieldMap, actionMap, rendererMap, dataSourceMap, templateMap, slotMap, hooks) {
+  constructor(extensions, blockMap, fieldMap, actionMap, rendererMap, dataSourceMap, templateMap, templateRegistry, slotMap, hooks) {
     this.extensions = extensions;
     this.blockMap = blockMap;
     this.fieldMap = fieldMap;
@@ -65,6 +88,7 @@ var ExtensionRegistry = class _ExtensionRegistry {
     this.rendererMap = rendererMap;
     this.dataSourceMap = dataSourceMap;
     this.templateMap = templateMap;
+    this.templateRegistry = templateRegistry;
     this.slotMap = slotMap;
     this.hooks = hooks;
   }
@@ -75,6 +99,7 @@ var ExtensionRegistry = class _ExtensionRegistry {
   rendererMap;
   dataSourceMap;
   templateMap;
+  templateRegistry;
   slotMap;
   hooks;
   get blocks() {
@@ -93,7 +118,7 @@ var ExtensionRegistry = class _ExtensionRegistry {
     return Object.freeze([...this.dataSourceMap.values()]);
   }
   get templates() {
-    return Object.freeze([...this.templateMap.values()]);
+    return this.templateRegistry.templates;
   }
   getBlock(type) {
     return this.blockMap.get(type);
@@ -111,7 +136,7 @@ var ExtensionRegistry = class _ExtensionRegistry {
     return this.dataSourceMap.get(key);
   }
   getTemplate(id) {
-    return this.templateMap.get(id);
+    return this.templateRegistry.get(id);
   }
   getSlot(slot) {
     return this.slotMap.get(slot) ?? [];
@@ -154,6 +179,7 @@ var ExtensionRegistry = class _ExtensionRegistry {
         slots.set(slot.slot, current);
       }
     }
+    const templateRegistry = TemplateRegistry.create(templateItems.map((template) => templates.get(template.id)), blockItems);
     const sortedSlots = /* @__PURE__ */ new Map();
     for (const [slot, contributions] of slots) sortedSlots.set(slot, Object.freeze([...contributions].sort(compareByOrder)));
     return Object.freeze(new _ExtensionRegistry(
@@ -164,6 +190,7 @@ var ExtensionRegistry = class _ExtensionRegistry {
       renderers,
       dataSources,
       templates,
+      templateRegistry,
       sortedSlots,
       Object.freeze(resolved.flatMap((extension) => extension.hooks ? [extension.hooks] : []))
     ));
@@ -172,9 +199,15 @@ var ExtensionRegistry = class _ExtensionRegistry {
 function createExtensionRegistry(extensions, options) {
   return ExtensionRegistry.create(extensions, options);
 }
+function createTemplateRegistry(templates, blocks = []) {
+  const registered = templates.map((template) => Object.freeze({ ...template, extension: "standalone" }));
+  return TemplateRegistry.create(registered, blocks);
+}
 
 export {
   ExtensionRegistryError,
+  TemplateRegistry,
   ExtensionRegistry,
-  createExtensionRegistry
+  createExtensionRegistry,
+  createTemplateRegistry
 };

package/dist/chunk-YK2AUHF6.js

@@ -0,0 +1,38 @@
+// src/core/theme/index.ts
+var systemThemeTokens = Object.freeze({
+  "color.background": "#ffffff",
+  "color.surface": "#ffffff",
+  "color.text": "#202223",
+  "color.muted": "#6d7175",
+  "color.primary": "#005bd3",
+  "color.border": "#d2d5d8",
+  "font.family": "system-ui, sans-serif",
+  "font.size": "16px",
+  radius: "8px",
+  spacing: "16px"
+});
+var themeTokenNames = new Set(Object.keys(systemThemeTokens));
+var unsafeCssValue = /[{};]|url\s*\(|expression\s*\(|@import/i;
+function normalizeThemeTokens(value) {
+  if (value === void 0) return { success: true, data: {} };
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return { success: false };
+  const tokens = {};
+  for (const [name, tokenValue] of Object.entries(value)) {
+    if (!themeTokenNames.has(name) || typeof tokenValue !== "string" || !tokenValue || unsafeCssValue.test(tokenValue)) return { success: false };
+    tokens[name] = tokenValue;
+  }
+  return { success: true, data: tokens };
+}
+function mergeThemeTokens(...layers) {
+  return Object.freeze(Object.assign({}, systemThemeTokens, ...layers));
+}
+function toThemeStyle(tokens) {
+  return Object.fromEntries(Object.entries(tokens).map(([name, value]) => [`--pb-${name.replaceAll(".", "-")}`, value]));
+}
+
+export {
+  systemThemeTokens,
+  normalizeThemeTokens,
+  mergeThemeTokens,
+  toThemeStyle
+};

package/dist/extensions.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, ReactNode } from 'react';
-import { RenderTarget, PageDocument } from './schema.js';
+import { RenderTarget, JsonValue, PageDocument } from './schema.js';
+import { ThemeTokens } from './theme.js';
 
 type ExtensionTarget = RenderTarget | "all";
 type EditorActionPosition = "left" | "center" | "right";
@@ -11,12 +12,26 @@ type ValidationIssue = {
 type FieldConfig = {
     field: string;
     label?: string;
+    /** Product-facing editor metadata. Custom field components remain supported. */
+    control?: "text" | "textarea" | "url";
+    description?: string;
+    group?: string;
     required?: boolean;
 };
 type FieldProps<T = unknown> = {
     value: T;
     onChange(value: T): void;
 };
+/**
+ * Props available only to an extension's editor-canvas renderer.
+ * They are separate from Web rendering so editor interaction cannot invoke a
+ * host Runtime or become persisted operational data.
+ */
+type BlockEditorProps<P = Record<string, unknown>> = P & {
+    blockId: string;
+    selected: boolean;
+    onPropsChange(props: Record<string, JsonValue>): void;
+};
 interface BlockDefinition<P = Record<string, unknown>> {
     type: string;
     version: number;
@@ -25,10 +40,20 @@ interface BlockDefinition<P = Record<string, unknown>> {
     targets: ExtensionTarget[];
     defaultProps: P;
     fields: Record<string, FieldConfig>;
-    render: Partial<Record<RenderTarget, ComponentType<P>>>;
+    render: Partial<Record<RenderTarget, ComponentType<P>>> & {
+        /** Optional edit-mode renderer. WebRenderer never uses this surface. */
+        editor?: ComponentType<BlockEditorProps<P>>;
+    };
+    defaultVariant?: string;
+    variants?: BlockVariantDefinition[];
     dataSources?: string[];
     validate?: (props: P) => ValidationIssue[];
 }
+interface BlockVariantDefinition {
+    id: string;
+    label: string;
+    theme?: ThemeTokens;
+}
 interface FieldDefinition<T = unknown> {
     type: string;
     component: ComponentType<FieldProps<T>>;
@@ -65,13 +90,18 @@ interface DataSourceDefinition<P = any, R = unknown> {
     live: (params: P) => Promise<R>;
     validateParams?: (params: P) => ValidationIssue[];
 }
+type TemplateSource = "built-in" | "marketplace" | "custom";
 interface TemplateDefinition {
     id: string;
     version: number;
     name: string;
     target: RenderTarget;
+    source: TemplateSource;
     thumbnail?: string;
     create(): PageDocument;
+    /** Block types that must be registered before this template can be used. */
+    requiredBlocks?: string[];
+    theme?: ThemeTokens;
 }
 interface LifecycleHooks {
     onChange?(document: PageDocument): void;
@@ -106,7 +136,7 @@ type ExtensionRegistryOptions = {
     disabled?: string[];
 };
 
-type ExtensionRegistryErrorCode = "duplicate-extension" | "duplicate-definition" | "invalid-identifier" | "invalid-target" | "missing-dependency" | "dependency-cycle";
+type ExtensionRegistryErrorCode = "duplicate-extension" | "duplicate-definition" | "invalid-identifier" | "invalid-target" | "missing-dependency" | "missing-template-dependency" | "dependency-cycle";
 declare class ExtensionRegistryError extends Error {
     readonly code: ExtensionRegistryErrorCode;
     constructor(code: ExtensionRegistryErrorCode, message: string);
@@ -114,6 +144,14 @@ declare class ExtensionRegistryError extends Error {
 type Registered<T> = T & {
     extension: string;
 };
+/** Immutable template view with explicit source and block dependency validation. */
+declare class TemplateRegistry {
+    private readonly templateMap;
+    private constructor();
+    get templates(): readonly Registered<TemplateDefinition>[];
+    get(id: string): Registered<TemplateDefinition> | undefined;
+    static create(templates: readonly Registered<TemplateDefinition>[], blocks: readonly BlockDefinition[]): TemplateRegistry;
+}
 /** Immutable compiled view of all enabled extensions. */
 declare class ExtensionRegistry {
     readonly extensions: readonly PageBuilderExtension[];
@@ -123,6 +161,7 @@ declare class ExtensionRegistry {
     private readonly rendererMap;
     private readonly dataSourceMap;
     private readonly templateMap;
+    readonly templateRegistry: TemplateRegistry;
     private readonly slotMap;
     private readonly hooks;
     private constructor();
@@ -144,5 +183,6 @@ declare class ExtensionRegistry {
     static create(extensions: PageBuilderExtension[], options?: ExtensionRegistryOptions): ExtensionRegistry;
 }
 declare function createExtensionRegistry(extensions: PageBuilderExtension[], options?: ExtensionRegistryOptions): ExtensionRegistry;
+declare function createTemplateRegistry(templates: TemplateDefinition[], blocks?: BlockDefinition[]): TemplateRegistry;
 
-export { type BlockDefinition, type DataSourceDefinition, type EditorAction, type EditorActionPosition, type ExtensionActionContext, ExtensionRegistry, ExtensionRegistryError, type ExtensionRegistryErrorCode, type ExtensionRegistryOptions, type ExtensionTarget, type FieldConfig, type FieldDefinition, type FieldProps, type LifecycleHooks, type PageBuilderExtension, type RendererDefinition, type TemplateDefinition, type UISlotContribution, type UISlotName, type ValidationIssue, createExtensionRegistry };
+export { type BlockDefinition, type BlockEditorProps, type BlockVariantDefinition, type DataSourceDefinition, type EditorAction, type EditorActionPosition, type ExtensionActionContext, ExtensionRegistry, ExtensionRegistryError, type ExtensionRegistryErrorCode, type ExtensionRegistryOptions, type ExtensionTarget, type FieldConfig, type FieldDefinition, type FieldProps, type LifecycleHooks, type PageBuilderExtension, type RendererDefinition, type TemplateDefinition, TemplateRegistry, type TemplateSource, type UISlotContribution, type UISlotName, type ValidationIssue, createExtensionRegistry, createTemplateRegistry };

package/dist/extensions.js

@@ -1,10 +1,14 @@
 import {
   ExtensionRegistry,
   ExtensionRegistryError,
-  createExtensionRegistry
-} from "./chunk-RGB53WE6.js";
+  TemplateRegistry,
+  createExtensionRegistry,
+  createTemplateRegistry
+} from "./chunk-PUTYZI7B.js";
 export {
   ExtensionRegistry,
   ExtensionRegistryError,
-  createExtensionRegistry
+  TemplateRegistry,
+  createExtensionRegistry,
+  createTemplateRegistry
 };

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { ExtensionRegistry } from './extensions.js';
-export { BlockDefinition, DataSourceDefinition, EditorAction, EditorActionPosition, ExtensionActionContext, ExtensionRegistryError, ExtensionRegistryErrorCode, ExtensionRegistryOptions, ExtensionTarget, FieldConfig, FieldDefinition, FieldProps, LifecycleHooks, PageBuilderExtension, RendererDefinition, TemplateDefinition, UISlotContribution, UISlotName, ValidationIssue, createExtensionRegistry } from './extensions.js';
+export { BlockDefinition, BlockEditorProps, BlockVariantDefinition, DataSourceDefinition, EditorAction, EditorActionPosition, ExtensionActionContext, ExtensionRegistryError, ExtensionRegistryErrorCode, ExtensionRegistryOptions, ExtensionTarget, FieldConfig, FieldDefinition, FieldProps, LifecycleHooks, PageBuilderExtension, RendererDefinition, TemplateDefinition, TemplateRegistry, TemplateSource, UISlotContribution, UISlotName, ValidationIssue, createExtensionRegistry, createTemplateRegistry } from './extensions.js';
 import { PageDocument, BlockNode, JsonValue } from './schema.js';
-export { DataBinding, PageDocumentIssue, PageDocumentMigration, PageSettings, RenderTarget, createPageDocument, migratePageDocument, validatePageDocument } from './schema.js';
+export { BlockStyleOverrides, DataBinding, PageDocumentIssue, PageDocumentMigration, PageDocumentSchemaVersion, PageSettings, RenderTarget, createPageDocument, migratePageDocument, validatePageDocument } from './schema.js';
+export { ThemeTokenName, ThemeTokens, mergeThemeTokens, normalizeThemeTokens, systemThemeTokens, toThemeStyle } from './theme.js';
 import { Data } from '@puckeditor/core';
 export { WebRenderer, WebRendererProps } from './renderer.js';
 

package/dist/index.js

@@ -1,16 +1,24 @@
 import {
   ExtensionRegistry,
   ExtensionRegistryError,
-  createExtensionRegistry
-} from "./chunk-RGB53WE6.js";
+  TemplateRegistry,
+  createExtensionRegistry,
+  createTemplateRegistry
+} from "./chunk-PUTYZI7B.js";
 import {
   WebRenderer
-} from "./chunk-72MFV6J7.js";
+} from "./chunk-KYXIXIWK.js";
 import {
   createPageDocument,
   migratePageDocument,
   validatePageDocument
-} from "./chunk-G2LNCKYO.js";
+} from "./chunk-OBN4DMOR.js";
+import {
+  mergeThemeTokens,
+  normalizeThemeTokens,
+  systemThemeTokens,
+  toThemeStyle
+} from "./chunk-YK2AUHF6.js";
 
 // src/editor/shell/EditorShell.tsx
 import { Puck } from "@puckeditor/core";
@@ -334,12 +342,35 @@ function PropertyPanel({
 
 // src/editor/shell/PageDocumentEditorShell.tsx
 import { Puck as Puck2, usePuck } from "@puckeditor/core";
-import { Badge as Badge2, Banner, BlockStack as BlockStack2, Button as Button2, ButtonGroup as ButtonGroup2, InlineStack as InlineStack2, Text as Text2, TextField } from "@shopify/polaris";
+import { Badge as Badge2, Banner, Button as Button2, ButtonGroup as ButtonGroup2, InlineStack as InlineStack2, Text as Text2, TextField } from "@shopify/polaris";
 import { DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2 } from "@shopify/polaris-icons";
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+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
+import { registerOverlayPortal } from "@puckeditor/core";
+import { useEffect, useRef as useRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function CanvasExtensionBlock({ active, children, label, onSelect }) {
+  const editorRef = useRef2(null);
+  useEffect(() => active ? registerOverlayPortal(editorRef.current, { disableDrag: true }) : void 0, [active]);
+  return /* @__PURE__ */ jsx3("div", { ref: editorRef, className: "pb-document-canvas__extension", "aria-label": "Select " + label + " in canvas", role: "group", tabIndex: 0, onClick: onSelect, onKeyDown: (event) => {
+    if (event.key === "Enter" || event.key === " ") onSelect();
+  }, children });
+}
 
 // src/adapters/puck/page-document-config.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function canvasFieldFallback({ block, props, registry, onPropsChange }) {
+  const fields = Object.entries(block.fields);
+  if (!fields.length) return null;
+  return /* @__PURE__ */ jsx4("div", { "aria-label": "Edit " + block.label + " values in canvas", onClick: (event) => event.stopPropagation(), style: { display: "grid", gap: 8, marginTop: 12, padding: 12, border: "1px dashed #94a3b8", borderRadius: 6, background: "#f8fafc" }, children: fields.map(([name, field]) => {
+    const Field = registry?.getField(field.field)?.component;
+    return Field ? /* @__PURE__ */ jsxs3("label", { style: { display: "grid", gap: 4, fontSize: 12, fontWeight: 600 }, children: [
+      field.label ?? name,
+      /* @__PURE__ */ jsx4(Field, { value: props[name], onChange: (value) => onPropsChange({ [name]: value }) })
+    ] }, name) : null;
+  }) });
+}
 function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId, registry) {
   const extensionComponents = Object.fromEntries((registry?.blocks ?? []).flatMap((block) => {
     const BlockRenderer = block.render.web;
@@ -347,9 +378,12 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
     return [[block.type, {
       render: (props) => {
         const id = typeof props.id === "string" ? props.id : `unknown-${block.type}`;
-        return /* @__PURE__ */ jsx3("section", { className: "pb-document-canvas__extension", "aria-label": `Select ${block.label} in canvas`, role: "button", tabIndex: 0, onClick: () => onSelect(id), onKeyDown: (event) => {
-          if (event.key === "Enter" || event.key === " ") onSelect(id);
-        }, children: /* @__PURE__ */ jsx3(BlockRenderer, { ...props }) });
+        const EditorRenderer = block.render.editor;
+        const active = id === selectedBlockId;
+        return /* @__PURE__ */ jsx4(CanvasExtensionBlock, { active, label: block.label, onSelect: () => onSelect(id), children: EditorRenderer ? /* @__PURE__ */ jsx4(EditorRenderer, { ...props, blockId: id, selected: active, onPropsChange: (next) => onPropsChange(id, next) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4(BlockRenderer, { ...props }),
+          active ? canvasFieldFallback({ block, props, registry, onPropsChange: (next) => onPropsChange(id, next) }) : null
+        ] }) });
       }
     }]];
   }));
@@ -360,10 +394,10 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
           const id = typeof props.id === "string" ? props.id : "unknown-text";
           const content = typeof props.content === "string" ? props.content : "";
           const editable = id === selectedBlockId;
-          return /* @__PURE__ */ jsx3("section", { className: "pb-document-canvas__text", "data-page-document-block-id": id, "aria-label": "Select Text in canvas", role: "button", tabIndex: 0, onClick: () => onSelect(id), onKeyDown: (event) => {
+          return /* @__PURE__ */ jsx4("section", { className: "pb-document-canvas__text", "data-page-document-block-id": id, "aria-label": "Select Text in canvas", role: "button", tabIndex: 0, onClick: () => onSelect(id), onKeyDown: (event) => {
             if (event.key === "Enter" || event.key === " ") onSelect(id);
-          }, children: /* @__PURE__ */ jsx3("p", { contentEditable: editable, suppressContentEditableWarning: true, onInput: (event) => {
-            if (editable) onPropsChange(id, { content: event.currentTarget.textContent ?? "" });
+          }, children: /* @__PURE__ */ jsx4("p", { contentEditable: editable, suppressContentEditableWarning: true, onInput: (event) => {
+            if (editable) onPropsChange(id, { content: event.currentTarget.textContent ?? "" }, true);
           }, children: content }) });
         }
       },
@@ -376,8 +410,8 @@ function createPageDocumentPuckConfig(onSelect, onPropsChange, selectedBlockId,
           return /* @__PURE__ */ jsxs3("figure", { className: "pb-document-canvas__image", "data-page-document-block-id": id, "aria-label": "Select Image in canvas", role: "button", tabIndex: 0, onClick: () => onSelect(id), onKeyDown: (event) => {
             if (event.key === "Enter" || event.key === " ") onSelect(id);
           }, children: [
-            /* @__PURE__ */ jsx3("img", { src, alt }),
-            editable ? /* @__PURE__ */ jsx3("input", { "aria-label": "\u753B\u5E03\u56FE\u7247 URL", value: src, onChange: (event) => onPropsChange(id, { src: event.currentTarget.value }), onClick: (event) => event.stopPropagation() }) : null
+            /* @__PURE__ */ jsx4("img", { src, alt }),
+            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
           ] });
         }
       },
@@ -399,7 +433,7 @@ function toEngineBlock(block, registry) {
 }
 function toEngineData(document, registry) {
   return {
-    root: { ...document.root },
+    root: { props: { ...document.root } },
     content: document.blocks.map((block) => toEngineBlock(block, registry))
   };
 }
@@ -416,6 +450,8 @@ function fromEngineData(data, base, registry) {
       type,
       version: previous?.version ?? 1,
       props,
+      variant: previous?.variant ?? registry?.getBlock(type)?.defaultVariant ?? "default",
+      style: previous?.style ?? {},
       ...previous?.slots ? { slots: previous.slots } : {},
       ...previous?.binding ? { binding: previous.binding } : {}
     }];
@@ -425,8 +461,8 @@ function fromEngineData(data, base, registry) {
 }
 
 // src/editor/context/EditorContext.tsx
-import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef as useRef2, useState as useState2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useReducer, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function historyReducer(state, action) {
   if (action.type === "select") return { ...state, selectedBlockId: action.id };
   if (action.type === "device") return { ...state, device: action.device };
@@ -452,16 +488,16 @@ function uniqueBlockId(type, blocks) {
   return `${prefix}-${index}`;
 }
 function defaultBlock(type, blocks, registry) {
-  if (type === "core.text") return { id: uniqueBlockId(type, blocks), type, version: 1, props: { content: "New text block" } };
-  if (type === "core.image") return { id: uniqueBlockId(type, blocks), type, version: 1, props: { src: "https://images.unsplash.com/photo-1580674684081-7617fbf3d745?auto=format&fit=crop&w=1200&q=80", alt: "" } };
+  if (type === "core.text") return { id: uniqueBlockId(type, blocks), type, version: 1, props: { content: "New text block" }, variant: "default", style: {} };
+  if (type === "core.image") return { id: uniqueBlockId(type, blocks), type, version: 1, props: { src: "https://images.unsplash.com/photo-1580674684081-7617fbf3d745?auto=format&fit=crop&w=1200&q=80", alt: "" }, variant: "default", style: {} };
   const definition = registry?.getBlock(type);
   if (!definition) throw new Error(`Unknown PageDocument block type: ${type}`);
-  return { id: uniqueBlockId(type, blocks), type, version: definition.version, props: definition.defaultProps };
+  return { id: uniqueBlockId(type, blocks), type, version: definition.version, props: definition.defaultProps, variant: definition.defaultVariant ?? "default", style: {} };
 }
 function EditorProvider({ initialDocument, registry, loadState = "ready", leaveWarning = "You have unsaved changes.", onDocumentChange, children }) {
   const [history, dispatch] = useReducer(historyReducer, initialDocument, (document) => ({ document, selectedBlockId: document.blocks[0]?.id ?? null, past: [], future: [], device: "desktop", savedDocument: document }));
-  const historyRef = useRef2(history);
-  useEffect(() => {
+  const historyRef = useRef3(history);
+  useEffect2(() => {
     historyRef.current = history;
   }, [history]);
   const [canvasSelectionRequest, setCanvasSelectionRequest] = useState2(null);
@@ -486,11 +522,11 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
     const blocks = current.document.blocks.map((block) => block.id === id ? { ...block, props: { ...block.props, ...props } } : block);
     replace({ ...current.document, blocks }, id);
   }, [editable, replace]);
-  useEffect(() => {
+  useEffect2(() => {
     onDocumentChange?.(history.document);
   }, [history.document, onDocumentChange]);
   const isDirty = JSON.stringify(history.document) !== JSON.stringify(history.savedDocument);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isDirty || typeof window === "undefined") return;
     const confirmLeave = (event) => {
       event.preventDefault();
@@ -499,7 +535,7 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
     window.addEventListener("beforeunload", confirmLeave);
     return () => window.removeEventListener("beforeunload", confirmLeave);
   }, [isDirty, leaveWarning]);
-  useEffect(() => {
+  useEffect2(() => {
     if (typeof window === "undefined") return;
     const keydown = (event) => {
       const target = event.target;
@@ -594,7 +630,7 @@ function EditorProvider({ initialDocument, registry, loadState = "ready", leaveW
       markSaved: () => dispatch({ type: "saved" })
     };
   }, [canvasSelectionRequest, confirmCanvasSelection, editable, history, isDirty, loadState, registry, replace, requestCanvasSelection, selectedBlock, updateBlockProps, updateFromCanvas]);
-  return /* @__PURE__ */ jsx4(EditorContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx5(EditorContext.Provider, { value, children });
 }
 function useEditorContext() {
   const context = useContext(EditorContext);
@@ -682,7 +718,7 @@ function blockIdAtRelativeY(ids, relativeY) {
 }
 
 // src/editor/shell/PageDocumentEditorShell.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var deviceLabels2 = { desktop: "desktop", tablet: "tablet", mobile: "mobile" };
 function blockLabel(block, registry) {
   return blockTypeLabel(block.type, registry);
@@ -693,25 +729,25 @@ function blockTypeLabel(type, registry) {
   return registry?.getBlock(type)?.label ?? type;
 }
 function PageDocumentEditorShell(props) {
-  return /* @__PURE__ */ jsx5(EditorProvider, { initialDocument: props.initialDocument, registry: props.registry, loadState: props.loadState, leaveWarning: createAdminI18n(props.adminLocale).t("leaveWarning"), onDocumentChange: props.onDocumentChange, children: /* @__PURE__ */ jsx5(PageDocumentEditor, { ...props }) });
+  return /* @__PURE__ */ jsx6(EditorProvider, { initialDocument: props.initialDocument, registry: props.registry, loadState: props.loadState, leaveWarning: createAdminI18n(props.adminLocale).t("leaveWarning"), onDocumentChange: props.onDocumentChange, children: /* @__PURE__ */ jsx6(PageDocumentEditor, { ...props }) });
 }
 function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPublish }) {
   const editor = useEditorContext();
   const [blockView, setBlockView] = useState3("blocks");
   const [draggingLibraryType, setDraggingLibraryType] = useState3(null);
-  const canvasFrameRef = useRef3(null);
+  const canvasFrameRef = useRef4(null);
   const [canvasMutationVersion, setCanvasMutationVersion] = useState3(0);
   const [request, setRequest] = useState3("idle");
   const [notice, setNotice] = useState3(null);
   const i18n = createAdminI18n(adminLocale);
   const engineData = useMemo2(() => toEngineData(editor.document, registry), [editor.document, registry]);
   const { confirmCanvasSelection, selectedBlockId, updateBlockProps } = editor;
-  const updateFromCanvasInput = useCallback2((id, props) => {
-    setCanvasMutationVersion((version) => version + 1);
+  const updateFromCanvasInput = useCallback2((id, props, preserveCanvasValue = false) => {
+    if (preserveCanvasValue) setCanvasMutationVersion((version) => version + 1);
     updateBlockProps(id, props);
   }, [updateBlockProps]);
   const config = useMemo2(() => createPageDocumentPuckConfig(confirmCanvasSelection, updateFromCanvasInput, selectedBlockId, registry), [confirmCanvasSelection, registry, selectedBlockId, updateFromCanvasInput]);
-  if (editor.loadState !== "ready" && editor.loadState !== "success") return /* @__PURE__ */ jsx5(EditorStatus, { state: editor.loadState });
+  if (editor.loadState !== "ready" && editor.loadState !== "success") return /* @__PURE__ */ jsx6(EditorStatus, { state: editor.loadState });
   const blockTypes = ["core.text", "core.image", ...registry?.blocks.map((block) => block.type) ?? []];
   const addFromLibrary = (type, beforeId) => {
     const id = editor.addBlock(type, beforeId);
@@ -775,12 +811,12 @@ function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPu
       setRequest("idle");
     }
   };
-  return /* @__PURE__ */ jsx5(Puck2, { config, data: engineData, iframe: { enabled: iframe }, onChange: (data) => editor.updateFromCanvas(fromEngineData(data, editor.document, registry)), children: /* @__PURE__ */ jsxs4(Puck2.Layout, { children: [
-    /* @__PURE__ */ jsx5(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion }),
+  return /* @__PURE__ */ jsx6(Puck2, { config, data: engineData, iframe: { enabled: iframe }, onChange: (data) => editor.updateFromCanvas(fromEngineData(data, editor.document, registry)), children: /* @__PURE__ */ jsxs4(Puck2.Layout, { children: [
+    /* @__PURE__ */ jsx6(CanvasSelectionBridge, { data: engineData, requestedBlockId: editor.canvasSelectionRequest, onCanvasSelected: confirmCanvasSelection, canvasMutationVersion }),
     /* @__PURE__ */ jsxs4("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, children: [
-      /* @__PURE__ */ jsx5("header", { className: "pb-header", children: /* @__PURE__ */ jsxs4(InlineStack2, { align: "space-between", blockAlign: "center", gap: "300", wrap: false, children: [
+      /* @__PURE__ */ jsx6("header", { className: "pb-header", children: /* @__PURE__ */ jsxs4(InlineStack2, { align: "space-between", blockAlign: "center", gap: "300", wrap: false, children: [
         /* @__PURE__ */ jsxs4("div", { className: "pb-page-title", children: [
-          /* @__PURE__ */ jsx5(Text2, { as: "h1", variant: "headingSm", children: editor.document.settings.seoTitle ?? editor.document.pageId }),
+          /* @__PURE__ */ jsx6(Text2, { as: "h1", variant: "headingSm", children: editor.document.settings.seoTitle ?? editor.document.pageId }),
           /* @__PURE__ */ jsxs4(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: [
             "PageDocument V",
             editor.document.schemaVersion,
@@ -789,54 +825,54 @@ function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPu
           ] })
         ] }),
         /* @__PURE__ */ jsxs4(InlineStack2, { gap: "150", blockAlign: "center", wrap: false, children: [
-          /* @__PURE__ */ jsx5(Badge2, { tone: editor.isDirty ? "attention" : "success", children: editor.isDirty ? i18n.t("unsaved") : i18n.t("saved") }),
-          /* @__PURE__ */ jsx5(Button2, { disabled: !onSave || !editor.isDirty || request !== "idle", onClick: () => void save(), children: request === "saving" ? i18n.t("saving") : i18n.t("save") }),
-          /* @__PURE__ */ jsx5(Button2, { variant: "primary", disabled: !onPublish || request !== "idle", onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") }),
-          /* @__PURE__ */ jsx5(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
-          /* @__PURE__ */ jsx5(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo })
+          /* @__PURE__ */ jsx6(Badge2, { tone: editor.isDirty ? "attention" : "success", children: editor.isDirty ? i18n.t("unsaved") : i18n.t("saved") }),
+          /* @__PURE__ */ jsx6(Button2, { disabled: !onSave || !editor.isDirty || request !== "idle", onClick: () => void save(), children: request === "saving" ? i18n.t("saving") : i18n.t("save") }),
+          /* @__PURE__ */ jsx6(Button2, { variant: "primary", disabled: !onPublish || request !== "idle", onClick: () => void publish(), children: request === "publishing" ? i18n.t("publishing") : i18n.t("publish") }),
+          /* @__PURE__ */ jsx6(Button2, { accessibilityLabel: i18n.t("undo"), icon: UndoIcon2, variant: "tertiary", disabled: !editor.actionState.canUndo, onClick: editor.undo }),
+          /* @__PURE__ */ jsx6(Button2, { accessibilityLabel: i18n.t("redo"), icon: RedoIcon2, variant: "tertiary", disabled: !editor.actionState.canRedo, onClick: editor.redo })
         ] })
       ] }) }),
-      editor.loadState === "success" ? /* @__PURE__ */ jsx5(Banner, { tone: "success", children: i18n.t("success") }) : null,
-      notice ? /* @__PURE__ */ jsx5(Banner, { tone: notice === "published" ? "success" : "critical", children: i18n.t(notice) }) : null,
+      editor.loadState === "success" ? /* @__PURE__ */ jsx6(Banner, { tone: "success", children: i18n.t("success") }) : null,
+      notice ? /* @__PURE__ */ jsx6(Banner, { tone: notice === "published" ? "success" : "critical", children: i18n.t(notice) }) : null,
       /* @__PURE__ */ jsxs4("div", { className: "pb-workspace pb-workspace--document", children: [
         /* @__PURE__ */ jsxs4("nav", { className: "pb-tool-rail", "aria-label": "\u7F16\u8F91\u5668\u5DE5\u5177", children: [
-          /* @__PURE__ */ jsx5(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks", variant: "tertiary", onClick: () => setBlockView("blocks") }),
-          /* @__PURE__ */ jsx5(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline", variant: "tertiary", onClick: () => setBlockView("outline") })
+          /* @__PURE__ */ jsx6(Button2, { accessibilityLabel: i18n.t("blocks"), icon: LayoutSectionIcon2, pressed: blockView === "blocks", variant: "tertiary", onClick: () => setBlockView("blocks") }),
+          /* @__PURE__ */ jsx6(Button2, { accessibilityLabel: i18n.t("outline"), icon: MenuIcon2, pressed: blockView === "outline", variant: "tertiary", onClick: () => setBlockView("outline") })
         ] }),
         /* @__PURE__ */ jsxs4("aside", { className: "pb-left-panel", "aria-label": "PageDocument \u533A\u5757", children: [
-          /* @__PURE__ */ jsx5(InlineStack2, { align: "space-between", blockAlign: "center", children: /* @__PURE__ */ jsx5(Text2, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }) }),
-          blockView === "blocks" ? /* @__PURE__ */ jsx5("div", { className: "pb-block-list", "data-testid": "blocks-view", "aria-label": "\u533A\u5757\u7C7B\u578B\u5E93", role: "list", onDrop: cancelLibraryDrop, children: blockTypes.map((type) => /* @__PURE__ */ jsxs4("div", { className: `pb-document-block-row pb-document-block-row--library ${editor.selectedBlock?.type === type ? "pb-document-block-row--selected" : ""}`, "data-block-type": type, "data-selected": editor.selectedBlock?.type === type, role: "listitem", draggable: editor.actionState.canAdd, "aria-label": `${blockTypeLabel(type, registry)}\uFF0C\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0${editor.selectedBlock?.type === type ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onDragStart: (event) => {
+          /* @__PURE__ */ jsx6(InlineStack2, { align: "space-between", blockAlign: "center", children: /* @__PURE__ */ jsx6(Text2, { as: "h2", variant: "headingSm", children: blockView === "blocks" ? i18n.t("blocks") : i18n.t("outline") }) }),
+          blockView === "blocks" ? /* @__PURE__ */ jsx6("div", { className: "pb-block-list", "data-testid": "blocks-view", "aria-label": "\u533A\u5757\u7C7B\u578B\u5E93", role: "list", onDrop: cancelLibraryDrop, children: blockTypes.map((type) => /* @__PURE__ */ jsxs4("div", { className: `pb-document-block-row pb-document-block-row--library ${editor.selectedBlock?.type === type ? "pb-document-block-row--selected" : ""}`, "data-block-type": type, "data-selected": editor.selectedBlock?.type === type, role: "listitem", draggable: editor.actionState.canAdd, "aria-label": `${blockTypeLabel(type, registry)}\uFF0C\u62D6\u62FD\u81F3\u753B\u5E03\u4EE5\u6DFB\u52A0${editor.selectedBlock?.type === type ? "\uFF0C\u5F53\u524D\u9009\u4E2D\u7C7B\u578B" : ""}`, onDragStart: (event) => {
             event.dataTransfer.setData("application/x-page-document-block", type);
             event.dataTransfer.effectAllowed = "copy";
             setDraggingLibraryType(type);
           }, onDragEnd: () => setDraggingLibraryType(null), children: [
             /* @__PURE__ */ jsxs4("span", { className: "pb-library-block-title", children: [
-              /* @__PURE__ */ jsx5(Text2, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
-              /* @__PURE__ */ jsx5("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(DragHandleIcon2, {}) })
+              /* @__PURE__ */ jsx6(Text2, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockTypeLabel(type, registry) }),
+              /* @__PURE__ */ jsx6("span", { className: "pb-library-block-drag-hint", "aria-hidden": "true", children: /* @__PURE__ */ jsx6(DragHandleIcon2, {}) })
             ] }),
-            /* @__PURE__ */ jsx5(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: type })
-          ] }, type)) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx5(Text2, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx5("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs4("button", { type: "button", className: `pb-document-block-row pb-document-block-row--library ${block.id === editor.selectedBlockId ? "pb-document-block-row--selected" : ""}`, "aria-pressed": block.id === editor.selectedBlockId, onClick: () => editor.requestCanvasSelection(block.id), children: [
-            /* @__PURE__ */ jsx5(Text2, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockLabel(block, registry) }),
-            /* @__PURE__ */ jsx5(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
+            /* @__PURE__ */ jsx6(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: type })
+          ] }, type)) }) : editor.document.blocks.length === 0 ? /* @__PURE__ */ jsx6(Text2, { as: "p", tone: "subdued", children: i18n.t("empty") }) : /* @__PURE__ */ jsx6("div", { className: "pb-block-list", "data-testid": "outline-view", children: editor.document.blocks.map((block) => /* @__PURE__ */ jsxs4("button", { type: "button", className: `pb-document-block-row pb-document-block-row--library ${block.id === editor.selectedBlockId ? "pb-document-block-row--selected" : ""}`, "aria-pressed": block.id === editor.selectedBlockId, onClick: () => editor.requestCanvasSelection(block.id), children: [
+            /* @__PURE__ */ jsx6(Text2, { as: "span", variant: "bodySm", fontWeight: "semibold", children: blockLabel(block, registry) }),
+            /* @__PURE__ */ jsx6(Text2, { as: "span", variant: "bodySm", tone: "subdued", children: block.id })
           ] }, block.id)) })
         ] }),
         /* @__PURE__ */ jsxs4("main", { className: "pb-canvas-area", children: [
-          /* @__PURE__ */ jsx5("div", { className: "pb-canvas-toolbar", children: /* @__PURE__ */ jsx5(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx5(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }) }),
+          /* @__PURE__ */ jsx6("div", { className: "pb-canvas-toolbar", children: /* @__PURE__ */ jsx6(ButtonGroup2, { variant: "segmented", children: Object.keys(deviceLabels2).map((device) => /* @__PURE__ */ jsx6(Button2, { pressed: editor.device === device, onClick: () => editor.setDevice(device), children: i18n.t(deviceLabels2[device]) }, device)) }) }),
           /* @__PURE__ */ jsxs4("div", { className: "pb-canvas-stage", children: [
-            /* @__PURE__ */ jsx5("div", { ref: canvasFrameRef, className: `pb-canvas-frame pb-canvas-frame--${editor.device}`, "data-device": editor.device, children: /* @__PURE__ */ jsx5(Puck2.Preview, {}) }),
+            /* @__PURE__ */ jsx6("div", { ref: canvasFrameRef, className: `pb-canvas-frame pb-canvas-frame--${editor.device}`, "data-device": editor.device, children: /* @__PURE__ */ jsx6(Puck2.Preview, {}) }),
             draggingLibraryType ? /* @__PURE__ */ jsxs4("div", { className: "pb-canvas-drop-target", "data-testid": "canvas-drop-target", role: "region", "aria-label": "\u533A\u5757\u6295\u653E\u533A", onDragOver: (event) => event.preventDefault(), onDrop: dropFromLibrary, children: [
               "\u677E\u5F00\u4EE5\u6DFB\u52A0 ",
               blockTypeLabel(draggingLibraryType, registry)
             ] }) : null,
             editor.selectedBlock ? /* @__PURE__ */ jsxs4("div", { className: "pb-canvas-overlay", "aria-label": `\u5DF2\u9009\u62E9 ${blockLabel(editor.selectedBlock, registry)}`, children: [
-              /* @__PURE__ */ jsx5("span", { children: blockLabel(editor.selectedBlock, registry) }),
-              /* @__PURE__ */ jsx5("span", { children: "Selected" })
+              /* @__PURE__ */ jsx6("span", { children: blockLabel(editor.selectedBlock, registry) }),
+              /* @__PURE__ */ jsx6("span", { children: "Selected" })
             ] }) : null
           ] })
         ] }),
         /* @__PURE__ */ jsxs4("aside", { className: "pb-right-panel", "aria-label": "PageDocument \u5C5E\u6027", children: [
-          /* @__PURE__ */ jsx5(Text2, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
-          editor.selectedBlock ? /* @__PURE__ */ jsx5(DocumentInspector, { block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props) }) : /* @__PURE__ */ jsx5(Text2, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
+          /* @__PURE__ */ jsx6(Text2, { as: "h2", variant: "headingSm", children: i18n.t("properties") }),
+          editor.selectedBlock ? /* @__PURE__ */ jsx6(DocumentInspector, { block: editor.selectedBlock, registry, disabled: !editor.actionState.canEdit, onChange: (props) => editor.updateBlockProps(editor.selectedBlock.id, props) }) : /* @__PURE__ */ jsx6(Text2, { as: "p", tone: "subdued", children: i18n.t("selectBlock") })
         ] })
       ] })
     ] })
@@ -844,11 +880,11 @@ function PageDocumentEditor({ iframe = true, registry, adminLocale, onSave, onPu
 }
 function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canvasMutationVersion }) {
   const puck = usePuck();
-  const lastSelectedId = useRef3(null);
-  const lastSyncedData = useRef3(null);
-  const lastCanvasMutationVersion = useRef3(0);
+  const lastSelectedId = useRef4(null);
+  const lastSyncedData = useRef4(null);
+  const lastCanvasMutationVersion = useRef4(0);
   const serializedData = JSON.stringify(data);
-  useEffect2(() => {
+  useEffect3(() => {
     if (lastSyncedData.current === serializedData) return;
     lastSyncedData.current = serializedData;
     if (canvasMutationVersion > lastCanvasMutationVersion.current) {
@@ -857,13 +893,13 @@ function CanvasSelectionBridge({ data, requestedBlockId, onCanvasSelected, canva
     }
     puck.dispatch({ type: "setData", data });
   }, [canvasMutationVersion, data, puck, serializedData]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!requestedBlockId) return;
     const selector = puck.getSelectorForId(requestedBlockId);
     if (selector) puck.dispatch({ type: "setUi", ui: { itemSelector: selector } });
   }, [puck, requestedBlockId]);
   const selectedId = typeof puck.selectedItem?.props.id === "string" ? puck.selectedItem.props.id : null;
-  useEffect2(() => {
+  useEffect3(() => {
     if (selectedId && lastSelectedId.current !== selectedId) {
       lastSelectedId.current = selectedId;
       onCanvasSelected(selectedId);
@@ -875,22 +911,62 @@ function EditorStatus({ state }) {
   const i18n = createAdminI18n();
   const tone = state === "error" ? "critical" : state === "disabled" ? "warning" : "info";
   const message = state === "loading" ? i18n.t("loading") : state === "empty" ? i18n.t("empty") : state === "error" ? i18n.t("error") : i18n.t("disabled");
-  return /* @__PURE__ */ jsx5("div", { className: "pb-editor-status", "data-testid": "page-document-editor-state", "data-editor-state": state, children: /* @__PURE__ */ jsx5(Banner, { tone, title: message, children: state === "disabled" ? i18n.t("disabled") : message }) });
+  return /* @__PURE__ */ jsx6("div", { className: "pb-editor-status", "data-testid": "page-document-editor-state", "data-editor-state": state, children: /* @__PURE__ */ jsx6(Banner, { tone, title: message, children: state === "disabled" ? i18n.t("disabled") : message }) });
+}
+function InspectorSection({ title, children, defaultOpen = true }) {
+  return /* @__PURE__ */ jsxs4("details", { className: "pb-inspector-section", open: defaultOpen, children: [
+    /* @__PURE__ */ jsxs4("summary", { children: [
+      /* @__PURE__ */ jsx6("span", { children: title }),
+      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u2304" })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "pb-inspector-section__body", children })
+  ] });
+}
+function InspectorTextControl({ label, value, control, disabled, onChange }) {
+  const stringValue = typeof value === "string" ? value : "";
+  return /* @__PURE__ */ jsx6(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 }) {
+  const label = field.label ?? name;
+  const Field = registry?.getField(field.field)?.component;
+  return /* @__PURE__ */ jsxs4("div", { className: "pb-inspector-field", "data-control": field.control ?? "custom", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "pb-inspector-field__heading", children: [
+      /* @__PURE__ */ jsx6(Text2, { as: "p", variant: "bodySm", fontWeight: "semibold", children: label }),
+      field.description ? /* @__PURE__ */ jsx6(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: field.description }) : null
+    ] }),
+    field.control ? /* @__PURE__ */ jsx6(InspectorTextControl, { label, value, control: field.control, disabled, onChange: (next) => onChange(next) }) : Field ? /* @__PURE__ */ jsx6(Field, { value, onChange }) : null
+  ] });
+}
+function inspectorFieldConfig(name, field) {
+  const key = name.toLowerCase();
+  const group = /(?:href|url)/.test(key) ? "Links" : /(?:default|shipment|query|hide)/.test(key) ? "Tracking settings" : /(?:id|variant|theme)/.test(key) ? "Advanced" : "Content";
+  const description = field.description ?? (field.control === "textarea" ? "\u9002\u5408\u8F83\u957F\u6216\u591A\u884C\u7684\u5C55\u793A\u6587\u6848\u3002" : field.control === "url" ? "\u4F7F\u7528\u7AD9\u5185\u76F8\u5BF9\u8DEF\u5F84\u6216 HTTPS \u5730\u5740\u3002" : key.includes("shipment") ? "\u591A\u4E2A\u5305\u88F9\u6807\u7B7E\u4F7F\u7528 | \u5206\u9694\u3002" : key.includes("default") ? "\u4EC5\u7528\u4E8E\u7F16\u8F91\u5668\u548C\u7A7A\u72B6\u6001\u9884\u89C8\u3002" : void 0);
+  return { ...field, group: field.group ?? group, description };
 }
 function DocumentInspector({ block, registry, disabled, onChange }) {
   const definition = registry?.getBlock(block.type);
-  return /* @__PURE__ */ jsxs4(BlockStack2, { gap: "300", "data-testid": "document-inspector", children: [
-    /* @__PURE__ */ jsx5(Badge2, { children: block.type }),
-    /* @__PURE__ */ jsx5(Text2, { as: "p", variant: "headingSm", children: blockLabel(block, registry) }),
-    block.type === "core.text" ? /* @__PURE__ */ jsx5(TextField, { label: "\u6587\u672C\u5185\u5BB9", value: typeof block.props.content === "string" ? block.props.content : "", onChange: (content) => onChange({ content }), autoComplete: "off", multiline: 4, disabled }) : null,
-    block.type === "core.image" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx5(TextField, { label: "\u56FE\u7247 URL", value: typeof block.props.src === "string" ? block.props.src : "", onChange: (src) => onChange({ src }), autoComplete: "off", disabled }),
-      /* @__PURE__ */ jsx5(TextField, { label: "\u66FF\u4EE3\u6587\u672C", value: typeof block.props.alt === "string" ? block.props.alt : "", onChange: (alt) => onChange({ alt }), autoComplete: "off", disabled })
+  const groupedFields = definition ? Object.entries(definition.fields).reduce((groups, entry) => {
+    const [name, field] = entry;
+    const configuredField = inspectorFieldConfig(name, field);
+    const group = configuredField.group ?? "Content";
+    (groups[group] ??= []).push([name, configuredField]);
+    return groups;
+  }, {}) : {};
+  return /* @__PURE__ */ jsxs4("div", { className: "pb-inspector", "data-testid": "document-inspector", children: [
+    /* @__PURE__ */ jsxs4("header", { className: "pb-inspector__header", children: [
+      /* @__PURE__ */ jsx6(Badge2, { children: block.type }),
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx6(Text2, { as: "p", variant: "headingSm", children: blockLabel(block, registry) }),
+        /* @__PURE__ */ jsx6(Text2, { as: "p", variant: "bodySm", tone: "subdued", children: definition?.category ?? "Core block" })
+      ] })
+    ] }),
+    block.type === "core.text" ? /* @__PURE__ */ jsx6(InspectorSection, { title: "Content", children: /* @__PURE__ */ jsx6(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.image" ? /* @__PURE__ */ jsxs4(InspectorSection, { title: "Image", children: [
+      /* @__PURE__ */ jsx6(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__ */ jsx6(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 }) })
     ] }) : null,
-    definition ? Object.entries(definition.fields).map(([name, field]) => {
-      const Field = registry?.getField(field.field)?.component;
-      return Field ? /* @__PURE__ */ jsx5(Field, { value: block.props[name], onChange: (value) => onChange({ [name]: value }) }, name) : null;
-    }) : null
+    Object.entries(groupedFields).map(([group, fields]) => /* @__PURE__ */ jsx6(InspectorSection, { title: group, defaultOpen: group !== "Advanced", children: fields.map(([name, field]) => /* @__PURE__ */ jsx6(InspectorField, { name, field, value: block.props[name], registry, disabled, onChange: (value) => onChange({ ...block.props, [name]: value }) }, name)) }, group)),
+    definition ? /* @__PURE__ */ jsx6("p", { className: "pb-inspector__hint", children: "\u753B\u5E03\u4E2D\u5E26\u865A\u7EBF\u8FB9\u6846\u7684\u5185\u5BB9\u53EF\u76F4\u63A5\u7F16\u8F91\u3002" }) : null
   ] });
 }
 export {
@@ -899,13 +975,19 @@ export {
   ExtensionRegistry,
   ExtensionRegistryError,
   PageDocumentEditorShell,
+  TemplateRegistry,
   WebRenderer,
   createAdminI18n,
   createExtensionRegistry,
   createPageDocument,
+  createTemplateRegistry,
   fromEngineData,
+  mergeThemeTokens,
   migratePageDocument,
+  normalizeThemeTokens,
+  systemThemeTokens,
   toEngineData,
+  toThemeStyle,
   useEditorContext,
   validatePageDocument
 };

package/dist/renderer.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ExtensionRegistry } from './extensions.js';
 import { PageDocument } from './schema.js';
+import './theme.js';
 
 type WebRendererProps = {
     document: PageDocument;

package/dist/renderer.js

@@ -1,6 +1,7 @@
 import {
   WebRenderer
-} from "./chunk-72MFV6J7.js";
+} from "./chunk-KYXIXIWK.js";
+import "./chunk-YK2AUHF6.js";
 export {
   WebRenderer
 };

package/dist/runtime.d.ts

@@ -0,0 +1,5 @@
+export { WebRenderer, WebRendererProps } from './renderer.js';
+export { BlockDefinition, BlockEditorProps, BlockVariantDefinition, DataSourceDefinition, EditorAction, EditorActionPosition, ExtensionActionContext, ExtensionRegistry, ExtensionRegistryError, ExtensionRegistryErrorCode, ExtensionRegistryOptions, ExtensionTarget, FieldConfig, FieldDefinition, FieldProps, LifecycleHooks, PageBuilderExtension, RendererDefinition, TemplateDefinition, TemplateRegistry, TemplateSource, UISlotContribution, UISlotName, ValidationIssue, createExtensionRegistry, createTemplateRegistry } 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

@@ -0,0 +1,36 @@
+import {
+  ExtensionRegistry,
+  ExtensionRegistryError,
+  TemplateRegistry,
+  createExtensionRegistry,
+  createTemplateRegistry
+} from "./chunk-PUTYZI7B.js";
+import {
+  WebRenderer
+} from "./chunk-KYXIXIWK.js";
+import {
+  createPageDocument,
+  migratePageDocument,
+  validatePageDocument
+} from "./chunk-OBN4DMOR.js";
+import {
+  mergeThemeTokens,
+  normalizeThemeTokens,
+  systemThemeTokens,
+  toThemeStyle
+} from "./chunk-YK2AUHF6.js";
+export {
+  ExtensionRegistry,
+  ExtensionRegistryError,
+  TemplateRegistry,
+  WebRenderer,
+  createExtensionRegistry,
+  createPageDocument,
+  createTemplateRegistry,
+  mergeThemeTokens,
+  migratePageDocument,
+  normalizeThemeTokens,
+  systemThemeTokens,
+  toThemeStyle,
+  validatePageDocument
+};

package/dist/schema.d.ts

@@ -1,8 +1,11 @@
+import { ThemeTokens } from './theme.js';
+
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonValue[] | {
     [key: string]: JsonValue;
 };
 type RenderTarget = "web" | "email";
+type PageDocumentSchemaVersion = 1;
 type PageSettings = {
     locale: string;
     seoTitle?: string;
@@ -11,19 +14,25 @@ type DataBinding = {
     source: string;
     params?: Record<string, JsonValue>;
 };
+/** Token-only block styling. Arbitrary CSS properties are deliberately not persisted. */
+type BlockStyleOverrides = ThemeTokens;
 type BlockNode = {
     id: string;
     type: string;
     version: number;
     props: Record<string, JsonValue>;
+    variant: string;
+    style: BlockStyleOverrides;
     slots?: Record<string, BlockNode[]>;
     binding?: DataBinding;
 };
 type PageDocument = {
-    schemaVersion: 1;
+    schemaVersion: PageDocumentSchemaVersion;
     pageId: string;
     target: RenderTarget;
     templateId?: string;
+    templateVersion?: number;
+    theme: ThemeTokens;
     root: Record<string, JsonValue>;
     blocks: BlockNode[];
     settings: PageSettings;
@@ -47,13 +56,13 @@ type PageDocumentMigration = {
     success: false;
     issues: PageDocumentIssue[];
 };
-declare function createPageDocument(input: Partial<PageDocument> & Pick<PageDocument, "pageId">): PageDocument;
+declare function createPageDocument(input: Omit<Partial<PageDocument>, "schemaVersion" | "blocks" | "theme"> & {
+    pageId: string;
+    blocks?: Array<Omit<BlockNode, "variant" | "style"> & Partial<Pick<BlockNode, "variant" | "style">>>;
+    theme?: ThemeTokens;
+}): PageDocument;
 declare function validatePageDocument(value: unknown): PageDocumentValidation;
-/**
- * Accept the pre-versioned shape produced by the early Demo and normalize it
- * to the first persisted PageDocument schema. Future schema migrations belong
- * here so storage callers have one validation boundary.
- */
+/** V0.6.1 starts from this schema; no pre-integration document compatibility is needed. */
 declare function migratePageDocument(value: unknown): PageDocumentMigration;
 
-export { type BlockNode, type DataBinding, type JsonPrimitive, type JsonValue, type PageDocument, type PageDocumentIssue, type PageDocumentMigration, type PageDocumentValidation, type PageSettings, type RenderTarget, createPageDocument, migratePageDocument, validatePageDocument };
+export { type BlockNode, type BlockStyleOverrides, type DataBinding, type JsonPrimitive, type JsonValue, type PageDocument, type PageDocumentIssue, type PageDocumentMigration, type PageDocumentSchemaVersion, type PageDocumentValidation, type PageSettings, type RenderTarget, createPageDocument, migratePageDocument, validatePageDocument };

package/dist/schema.js

@@ -2,7 +2,8 @@ import {
   createPageDocument,
   migratePageDocument,
   validatePageDocument
-} from "./chunk-G2LNCKYO.js";
+} from "./chunk-OBN4DMOR.js";
+import "./chunk-YK2AUHF6.js";
 export {
   createPageDocument,
   migratePageDocument,

package/dist/theme.d.ts

@@ -0,0 +1,14 @@
+type ThemeTokenName = "color.background" | "color.surface" | "color.text" | "color.muted" | "color.primary" | "color.border" | "font.family" | "font.size" | "radius" | "spacing";
+type ThemeTokens = Partial<Record<ThemeTokenName, string>>;
+type ThemeTokenValidation = {
+    success: true;
+    data: ThemeTokens;
+} | {
+    success: false;
+};
+declare const systemThemeTokens: Readonly<Required<ThemeTokens>>;
+declare function normalizeThemeTokens(value: unknown): ThemeTokenValidation;
+declare function mergeThemeTokens(...layers: Array<ThemeTokens | undefined>): Required<ThemeTokens>;
+declare function toThemeStyle(tokens: ThemeTokens): Record<string, string>;
+
+export { type ThemeTokenName, type ThemeTokenValidation, type ThemeTokens, mergeThemeTokens, normalizeThemeTokens, systemThemeTokens, toThemeStyle };

package/dist/theme.js

@@ -0,0 +1,12 @@
+import {
+  mergeThemeTokens,
+  normalizeThemeTokens,
+  systemThemeTokens,
+  toThemeStyle
+} from "./chunk-YK2AUHF6.js";
+export {
+  mergeThemeTokens,
+  normalizeThemeTokens,
+  systemThemeTokens,
+  toThemeStyle
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/puck-page-builder",
-  "version": "0.1.0",
+  "version": "0.8.0",
   "description": "React PageDocument editor, extension registry, and web renderer for BestTrack page experiences.",
   "type": "module",
   "repository": {
@@ -40,6 +40,14 @@
       "types": "./dist/schema.d.ts",
       "import": "./dist/schema.js"
     },
+    "./runtime": {
+      "types": "./dist/runtime.d.ts",
+      "import": "./dist/runtime.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
     "./styles.css": "./src/styles.css"
   },
   "publishConfig": {
@@ -62,7 +70,7 @@
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/renderer.ts src/extensions.ts src/schema.ts --format esm --dts --clean",
+    "build": "tsup src/index.ts src/renderer.ts src/runtime.ts src/extensions.ts src/schema.ts src/theme.ts --format esm --dts --clean && node scripts/assert-runtime-boundary.mjs",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/styles.css

@@ -13,7 +13,30 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-tool-rail .Polaris-Button { min-width: 44px; min-height: 44px; }
 .pb-left-panel, .pb-right-panel { display: flex; flex-direction: column; gap: var(--builder-space-4); min-width: 0; padding: var(--builder-space-4); overflow: auto; background: var(--builder-surface); }
 .pb-left-panel { border-right: 1px solid var(--builder-border); }
-.pb-right-panel { border-left: 1px solid var(--builder-border); }
+.pb-right-panel { border-left: 1px solid var(--builder-border); background: #f8fafc; }
+.pb-right-panel > h2 { margin: 0; color: #475569; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
+.pb-inspector { display: grid; gap: var(--builder-space-3); }
+.pb-inspector__header { display: grid; gap: var(--builder-space-2); padding: var(--builder-space-3); border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 4%); }
+.pb-inspector__header .Polaris-Badge { width: fit-content; max-width: 100%; overflow: hidden; color: #1d4ed8; background: #eff6ff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.pb-inspector__header p { margin: 0; }
+.pb-inspector-section { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 3%); }
+.pb-inspector-section > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--builder-space-3); color: #0f172a; font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
+.pb-inspector-section > summary::-webkit-details-marker { display: none; }
+.pb-inspector-section > summary > span:last-child { color: #64748b; font-size: 16px; transition: transform 140ms ease; }
+.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__heading { display: grid; gap: 2px; }
+.pb-inspector-field__heading p { margin: 0; }
+.pb-inspector-field__heading p:first-child { color: #334155; font-size: 13px; }
+.pb-inspector-field__heading p:last-child { color: #64748b; font-size: 12px; line-height: 1.45; }
+.pb-inspector-field input, .pb-inspector-field textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; outline: 0; color: #0f172a; background: #fff; font: inherit; font-size: 14px; line-height: 1.4; transition: border-color 140ms ease, box-shadow 140ms ease; }
+.pb-inspector-field textarea { min-height: 96px; resize: vertical; }
+.pb-inspector-field input[type="url"] { color: #334155; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.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__hint { margin: 0; padding: 0 var(--builder-space-2); color: #64748b; font-size: 12px; line-height: 1.5; }
 .pb-panel--closed { display: none; }
 .pb-block-list { display: flex; flex: 1; flex-direction: column; gap: var(--builder-space-2); min-height: 0; }
 .pb-block-row { display: flex; align-items: center; gap: var(--builder-space-2); padding: var(--builder-space-2); border: 1px solid transparent; border-radius: var(--builder-panel-radius); background: transparent; transition: background-color 120ms ease, border-color 120ms ease; }

package/dist/chunk-72MFV6J7.js

@@ -1,15 +0,0 @@
-// src/renderer/web/WebRenderer.tsx
-import { jsx } from "react/jsx-runtime";
-function WebRenderer({ document, className, registry }) {
-  return /* @__PURE__ */ jsx("main", { className: className ?? "pb-web-renderer", "data-page-id": document.pageId, lang: document.settings.locale, children: document.blocks.map((block) => {
-    if (block.type === "core.text") return /* @__PURE__ */ jsx("section", { "data-block-id": block.id, className: "pb-web-renderer__text", children: /* @__PURE__ */ jsx("p", { children: typeof block.props.content === "string" ? block.props.content : "" }) }, block.id);
-    if (block.type === "core.image") return /* @__PURE__ */ jsx("figure", { "data-block-id": block.id, className: "pb-web-renderer__image", children: /* @__PURE__ */ jsx("img", { src: typeof block.props.src === "string" ? block.props.src : "", alt: typeof block.props.alt === "string" ? block.props.alt : "" }) }, block.id);
-    const BlockRenderer = registry?.getBlock(block.type)?.render.web;
-    if (BlockRenderer) return /* @__PURE__ */ jsx("section", { "data-block-id": block.id, children: /* @__PURE__ */ jsx(BlockRenderer, { ...block.props }) }, block.id);
-    return null;
-  }) });
-}
-
-export {
-  WebRenderer
-};