@standhigher/puck-page-builder 0.1.0 → 0.7.2

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 { ThemeTokens } from './theme.js';
 
 type ExtensionTarget = RenderTarget | "all";
 type EditorActionPosition = "left" | "center" | "right";
@@ -26,9 +27,16 @@ interface BlockDefinition<P = Record<string, unknown>> {
     defaultProps: P;
     fields: Record<string, FieldConfig>;
     render: Partial<Record<RenderTarget, ComponentType<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 +73,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 +119,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 +127,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 +144,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 +166,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 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, 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";
@@ -399,7 +407,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 +424,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 } : {}
     }];
@@ -452,11 +462,11 @@ 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 }));
@@ -889,7 +899,7 @@ function DocumentInspector({ block, registry, disabled, onChange }) {
     ] }) : 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;
+      return Field ? /* @__PURE__ */ jsx5(Field, { value: block.props[name], onChange: (value) => onChange({ ...block.props, [name]: value }) }, name) : null;
     }) : null
   ] });
 }
@@ -899,13 +909,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, 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.7.2",
   "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/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
-};