@kubuild/schema 0.7.0 → 0.8.1

package/dist/index.cjs

@@ -34,6 +34,11 @@ __export(index_exports, {
   ArtboardSchema: () => ArtboardSchema,
   ArtboardTypeSchema: () => ArtboardTypeSchema,
   AssetReferenceSchema: () => AssetReferenceSchema,
+  BREAKPOINTS: () => BREAKPOINTS,
+  BREAKPOINT_MEDIA_QUERIES: () => BREAKPOINT_MEDIA_QUERIES,
+  BREAKPOINT_ORDER: () => BREAKPOINT_ORDER,
+  BUILTIN_COMPONENT_TYPES: () => BUILTIN_COMPONENT_TYPES,
+  CANONICAL_TEXT_PROPS: () => CANONICAL_TEXT_PROPS,
   CURRENT_PROJECT_SCHEMA_VERSION: () => CURRENT_PROJECT_SCHEMA_VERSION,
   CURRENT_SCHEMA_VERSION: () => CURRENT_SCHEMA_VERSION,
   CloseModalStepPayloadSchema: () => CloseModalStepPayloadSchema,
@@ -80,10 +85,16 @@ __export(index_exports, {
   StyleDefinitionSchema: () => StyleDefinitionSchema,
   StyleValueSchema: () => StyleValueSchema,
   TEMPLATE_RECORD_JSON_SCHEMA_V1: () => TEMPLATE_RECORD_JSON_SCHEMA_V1,
+  THEME_TOKEN_CSS_PREFIX: () => THEME_TOKEN_CSS_PREFIX,
+  THEME_TOKEN_GROUPS: () => THEME_TOKEN_GROUPS,
   TRACKING_RELAY_PROTOCOL_VERSION: () => TRACKING_RELAY_PROTOCOL_VERSION,
   TemplatePackageRefSchema: () => TemplatePackageRefSchema,
   TemplateRecordSchema: () => TemplateRecordSchema,
   TemplateRequirementsSchema: () => TemplateRequirementsSchema,
+  ThemeSchema: () => ThemeSchema,
+  ThemeTokenKeySchema: () => ThemeTokenKeySchema,
+  ThemeTokenMapSchema: () => ThemeTokenMapSchema,
+  ThemeTokenValueSchema: () => ThemeTokenValueSchema,
   TikTokTrackingProviderConfigSchema: () => TikTokTrackingProviderConfigSchema,
   TikTokTrackingSecretsSchema: () => TikTokTrackingSecretsSchema,
   ToggleModalStepPayloadSchema: () => ToggleModalStepPayloadSchema,
@@ -101,8 +112,11 @@ __export(index_exports, {
   ValidationRuleTypeSchema: () => ValidationRuleTypeSchema,
   VariableBindingSchema: () => VariableBindingSchema,
   collectNodeIds: () => collectNodeIds,
+  findDeprecatedPropAliases: () => findDeprecatedPropAliases,
   generateDeterministicNodeId: () => generateDeterministicNodeId,
   getActionPipelineJsonSchema: () => getActionPipelineJsonSchema,
+  getBreakpointForWidth: () => getBreakpointForWidth,
+  getCanonicalTextPropRule: () => getCanonicalTextPropRule,
   getFormConfigJsonSchema: () => getFormConfigJsonSchema,
   getFormFieldBindingJsonSchema: () => getFormFieldBindingJsonSchema,
   getManifestJsonSchema: () => getManifestJsonSchema,
@@ -120,15 +134,19 @@ __export(index_exports, {
   isAnimationConfig: () => isAnimationConfig,
   isArtboardReferenceNode: () => isArtboardReferenceNode,
   isAssetReference: () => isAssetReference,
+  isBuiltinComponentType: () => isBuiltinComponentType,
   isConditionOperator: () => isConditionOperator,
   isFormConfig: () => isFormConfig,
   isFormFieldBinding: () => isFormFieldBinding,
   isManifest: () => isManifest,
   isProjectDocument: () => isProjectDocument,
   isSafeActionUrl: () => isSafeActionUrl,
+  isSafeThemeTokenKey: () => isSafeThemeTokenKey,
+  isSafeThemeTokenValue: () => isSafeThemeTokenValue,
   isSafeThumbnail: () => isSafeThumbnail,
   isSafeThumbnailUrl: () => isSafeThumbnailUrl,
   isTemplateRecord: () => isTemplateRecord,
+  isTheme: () => isTheme,
   isTrackEventStepPayload: () => isTrackEventStepPayload,
   isTrackingConfig: () => isTrackingConfig,
   isTrackingRelayRequest: () => isTrackingRelayRequest,
@@ -137,6 +155,8 @@ __export(index_exports, {
   isValidationRuleType: () => isValidationRuleType,
   isVariableBinding: () => isVariableBinding,
   looksLikeProjectDocument: () => looksLikeProjectDocument,
+  mergeThemes: () => mergeThemes,
+  parseThemeTokenRef: () => parseThemeTokenRef,
   sanitizeActionPayload: () => sanitizeActionPayload,
   sanitizeActionPipeline: () => sanitizeActionPipeline,
   sanitizeActionStep: () => sanitizeActionStep,
@@ -144,13 +164,16 @@ __export(index_exports, {
   sanitizeActionUrl: () => sanitizeActionUrl,
   sanitizeActionValue: () => sanitizeActionValue,
   starterPageFixture: () => starterPageFixture,
+  themeToCssVariables: () => themeToCssVariables,
+  themeTokenCssVarName: () => themeTokenCssVarName,
+  themeTokenRef: () => themeTokenRef,
   validateActionStepPayload: () => validateActionStepPayload,
   validateNodeIdUniqueness: () => validateNodeIdUniqueness
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/document.ts
-var import_zod4 = require("zod");
+var import_zod5 = require("zod");
 
 // src/actions.ts
 var import_zod2 = require("zod");
@@ -361,7 +384,9 @@ var ActionTriggerTypeSchema = import_zod2.z.enum([
   "change",
   "blur",
   "focus",
-  "load"
+  "load",
+  // Fired once by time-bound components (e.g. `countdown`) when they reach zero.
+  "expire"
 ]);
 var ActionTriggerSchema = ActionTriggerTypeSchema;
 var ActionStepTypeSchema = import_zod2.z.enum([
@@ -415,7 +440,11 @@ var ApiRequestStepPayloadSchema = import_zod2.z.object({
   method: import_zod2.z.enum(["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"]).default("GET"),
   headers: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.string()).optional(),
   queryParams: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.union([import_zod2.z.string(), import_zod2.z.number(), import_zod2.z.boolean()])).optional(),
-  body: import_zod2.z.union([import_zod2.z.string(), import_zod2.z.record(import_zod2.z.string(), import_zod2.z.unknown()), import_zod2.z.array(import_zod2.z.unknown())]).optional(),
+  /**
+   * Request body. Omitted inside a form `submit` pipeline → the form's values are sent;
+   * `null` → explicitly no body.
+   */
+  body: import_zod2.z.union([import_zod2.z.string(), import_zod2.z.record(import_zod2.z.string(), import_zod2.z.unknown()), import_zod2.z.array(import_zod2.z.unknown())]).nullable().optional(),
   bodyFormat: import_zod2.z.enum(["json", "form-data", "formData", "urlencoded", "url-encoded", "raw", "text"]).optional(),
   bodyType: import_zod2.z.enum(["json", "form-data", "formData", "urlencoded", "url-encoded", "raw", "text"]).optional(),
   timeout: import_zod2.z.number().positive("Timeout must be greater than 0 ms").optional(),
@@ -681,58 +710,158 @@ function isFormConfig(value) {
   return FormConfigSchema.safeParse(value).success;
 }
 
+// src/theme.ts
+var import_zod4 = require("zod");
+var THEME_TOKEN_GROUPS = ["colors", "fonts", "radii", "spacing"];
+var THEME_TOKEN_CSS_PREFIX = Object.freeze({
+  colors: "--kb-color-",
+  fonts: "--kb-font-",
+  radii: "--kb-radius-",
+  spacing: "--kb-space-"
+});
+var THEME_TOKEN_KEY_PATTERN = /^[a-zA-Z0-9][a-zA-Z0-9_-]{0,63}$/;
+var DANGEROUS_THEME_VALUE_PATTERN = /javascript:|expression\(|@import|<script|vbscript:|data:text\/html|url\s*\(/i;
+var FORBIDDEN_THEME_VALUE_CHARS = /[;{}<>\\]/;
+var MAX_THEME_VALUE_LENGTH = 512;
+function isSafeThemeTokenKey(key) {
+  return typeof key === "string" && THEME_TOKEN_KEY_PATTERN.test(key);
+}
+function isSafeThemeTokenValue(value) {
+  if (typeof value === "number") return Number.isFinite(value);
+  if (typeof value !== "string") return false;
+  if (value.trim().length === 0 || value.length > MAX_THEME_VALUE_LENGTH) return false;
+  if (FORBIDDEN_THEME_VALUE_CHARS.test(value)) return false;
+  if (DANGEROUS_THEME_VALUE_PATTERN.test(value)) return false;
+  return true;
+}
+var ThemeTokenKeySchema = import_zod4.z.string().refine(isSafeThemeTokenKey, {
+  message: 'Theme token key must be 1-64 characters of letters, digits, "-" or "_" (starting with a letter or digit)'
+});
+var ThemeTokenValueSchema = import_zod4.z.union([
+  import_zod4.z.string().refine((value) => isSafeThemeTokenValue(value), {
+    message: "Theme token value contains a disallowed or unsafe pattern"
+  }),
+  import_zod4.z.number().refine((value) => Number.isFinite(value), { message: "Theme token value must be finite" })
+]);
+var ThemeTokenMapSchema = import_zod4.z.record(ThemeTokenKeySchema, ThemeTokenValueSchema);
+var ThemeSchema = import_zod4.z.object({
+  colors: ThemeTokenMapSchema.optional(),
+  fonts: ThemeTokenMapSchema.optional(),
+  radii: ThemeTokenMapSchema.optional(),
+  spacing: ThemeTokenMapSchema.optional()
+});
+function themeTokenCssVarName(group, key) {
+  if (!isSafeThemeTokenKey(key)) return null;
+  return `${THEME_TOKEN_CSS_PREFIX[group]}${key}`;
+}
+function themeTokenRef(group, key) {
+  const name = themeTokenCssVarName(group, key);
+  if (!name) {
+    throw new Error(`Invalid theme token key "${key}"`);
+  }
+  return `var(${name})`;
+}
+var TOKEN_REF_PATTERN = /^var\(\s*--kb-(color|font|radius|space)-([a-zA-Z0-9][a-zA-Z0-9_-]*)\s*(?:,[^)]*)?\)$/;
+var PREFIX_TO_GROUP = {
+  color: "colors",
+  font: "fonts",
+  radius: "radii",
+  space: "spacing"
+};
+function parseThemeTokenRef(value) {
+  if (typeof value !== "string") return null;
+  const match = TOKEN_REF_PATTERN.exec(value.trim());
+  if (!match) return null;
+  return { group: PREFIX_TO_GROUP[match[1]], key: match[2] };
+}
+function mergeThemes(...layers) {
+  const merged = {};
+  for (const layer of layers) {
+    if (!layer || typeof layer !== "object") continue;
+    for (const group of THEME_TOKEN_GROUPS) {
+      const tokens = layer[group];
+      if (!tokens || typeof tokens !== "object") continue;
+      for (const [key, value] of Object.entries(tokens)) {
+        if (!isSafeThemeTokenKey(key) || !isSafeThemeTokenValue(value)) continue;
+        merged[group] = { ...merged[group] ?? {}, [key]: value };
+      }
+    }
+  }
+  return merged;
+}
+function themeToCssVariables(theme) {
+  const entries = [];
+  if (!theme || typeof theme !== "object") return entries;
+  for (const group of THEME_TOKEN_GROUPS) {
+    const tokens = theme[group];
+    if (!tokens || typeof tokens !== "object") continue;
+    for (const [key, value] of Object.entries(tokens)) {
+      const name = themeTokenCssVarName(group, key);
+      if (!name || !isSafeThemeTokenValue(value)) continue;
+      entries.push([
+        name,
+        typeof value === "number" && (group === "radii" || group === "spacing") ? `${value}px` : String(value)
+      ]);
+    }
+  }
+  return entries;
+}
+function isTheme(value) {
+  return ThemeSchema.safeParse(value).success;
+}
+
 // src/document.ts
 var SCHEMA_NAME = "stora.page";
-var CURRENT_SCHEMA_VERSION = "1.1.0";
-var AssetReferenceSchema = import_zod4.z.object({
-  type: import_zod4.z.literal("asset"),
-  assetId: import_zod4.z.string().min(1, "Asset ID cannot be empty"),
-  filename: import_zod4.z.string().optional(),
-  mimeType: import_zod4.z.string().optional(),
-  fallbackUrl: import_zod4.z.string().url().optional()
+var CURRENT_SCHEMA_VERSION = "1.2.0";
+var AssetReferenceSchema = import_zod5.z.object({
+  type: import_zod5.z.literal("asset"),
+  assetId: import_zod5.z.string().min(1, "Asset ID cannot be empty"),
+  filename: import_zod5.z.string().optional(),
+  mimeType: import_zod5.z.string().optional(),
+  fallbackUrl: import_zod5.z.string().url().optional()
 });
-var VariableBindingSchema = import_zod4.z.object({
-  type: import_zod4.z.literal("variable"),
-  key: import_zod4.z.string().min(1, "Variable key cannot be empty"),
-  fallback: import_zod4.z.unknown().optional()
+var VariableBindingSchema = import_zod5.z.object({
+  type: import_zod5.z.literal("variable"),
+  key: import_zod5.z.string().min(1, "Variable key cannot be empty"),
+  fallback: import_zod5.z.unknown().optional()
 });
-var ActionBindingSchema = import_zod4.z.object({
-  type: import_zod4.z.string().min(1, "Action type cannot be empty"),
-  payload: import_zod4.z.record(import_zod4.z.string(), import_zod4.z.unknown()).optional()
+var ActionBindingSchema = import_zod5.z.object({
+  type: import_zod5.z.string().min(1, "Action type cannot be empty"),
+  payload: import_zod5.z.record(import_zod5.z.string(), import_zod5.z.unknown()).optional()
 });
 var DANGEROUS_STYLE_VALUE_PATTERN = /javascript:|expression\(|@import|<script|vbscript:|data:text\/html/i;
-var StyleValueSchema = import_zod4.z.union([
-  import_zod4.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
+var StyleValueSchema = import_zod5.z.union([
+  import_zod5.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
     message: "Style value contains a disallowed or unsafe pattern"
   }),
-  import_zod4.z.number(),
-  import_zod4.z.boolean(),
-  import_zod4.z.null(),
-  import_zod4.z.undefined()
+  import_zod5.z.number(),
+  import_zod5.z.boolean(),
+  import_zod5.z.null(),
+  import_zod5.z.undefined()
 ]);
-var StyleDefinitionSchema = import_zod4.z.record(import_zod4.z.string(), StyleValueSchema);
-var PseudoStateStylesSchema = import_zod4.z.record(import_zod4.z.string(), StyleDefinitionSchema);
-var ResponsiveStylesSchema = import_zod4.z.object({
+var StyleDefinitionSchema = import_zod5.z.record(import_zod5.z.string(), StyleValueSchema);
+var PseudoStateStylesSchema = import_zod5.z.record(import_zod5.z.string(), StyleDefinitionSchema);
+var ResponsiveStylesSchema = import_zod5.z.object({
   base: StyleDefinitionSchema.optional(),
   desktop: StyleDefinitionSchema.optional(),
   tablet: StyleDefinitionSchema.optional(),
   mobile: StyleDefinitionSchema.optional(),
   states: PseudoStateStylesSchema.optional()
 }).passthrough().default({});
-var AnimationConfigSchema = import_zod4.z.object({
-  type: import_zod4.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
+var AnimationConfigSchema = import_zod5.z.object({
+  type: import_zod5.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
     message: "Animation type contains a disallowed or unsafe pattern"
   }).optional().default("none"),
-  duration: import_zod4.z.number().min(0, "Duration must be non-negative").optional().default(600),
-  delay: import_zod4.z.number().min(0, "Delay must be non-negative").optional().default(0),
-  easing: import_zod4.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
+  duration: import_zod5.z.number().min(0, "Duration must be non-negative").optional().default(600),
+  delay: import_zod5.z.number().min(0, "Delay must be non-negative").optional().default(0),
+  easing: import_zod5.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
     message: "Animation easing contains a disallowed or unsafe pattern"
   }).optional().default("ease-out"),
-  once: import_zod4.z.boolean().optional().default(true),
-  hoverEffect: import_zod4.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
+  once: import_zod5.z.boolean().optional().default(true),
+  hoverEffect: import_zod5.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
     message: "Hover effect contains a disallowed or unsafe pattern"
   }).optional().default("none"),
-  loopEffect: import_zod4.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
+  loopEffect: import_zod5.z.string().refine((value) => !DANGEROUS_STYLE_VALUE_PATTERN.test(value), {
     message: "Loop effect contains a disallowed or unsafe pattern"
   }).optional().default("none")
 });
@@ -745,16 +874,16 @@ var DEFAULT_ANIMATION_CONFIG = {
   hoverEffect: "none",
   loopEffect: "none"
 };
-var NodeSchema = import_zod4.z.lazy(
-  () => import_zod4.z.object({
-    id: import_zod4.z.string().min(1, "Node ID must be a non-empty string"),
-    type: import_zod4.z.string().min(1, "Node type must be a non-empty string"),
-    props: import_zod4.z.record(import_zod4.z.string(), import_zod4.z.unknown()).optional().default({}),
+var NodeSchema = import_zod5.z.lazy(
+  () => import_zod5.z.object({
+    id: import_zod5.z.string().min(1, "Node ID must be a non-empty string"),
+    type: import_zod5.z.string().min(1, "Node type must be a non-empty string"),
+    props: import_zod5.z.record(import_zod5.z.string(), import_zod5.z.unknown()).optional().default({}),
     styles: ResponsiveStylesSchema.optional().default({}),
     animation: AnimationConfigSchema.optional(),
-    actions: import_zod4.z.array(ActionPipelineSchema).optional(),
+    actions: import_zod5.z.array(ActionPipelineSchema).optional(),
     formConfig: FormConfigSchema.optional(),
-    children: import_zod4.z.array(NodeSchema).optional().default([])
+    children: import_zod5.z.array(NodeSchema).optional().default([])
   })
 );
 var RootPageNodeSchema = NodeSchema.refine(
@@ -764,64 +893,65 @@ var RootPageNodeSchema = NodeSchema.refine(
     path: ["type"]
   }
 );
-var DocumentMetadataSchema = import_zod4.z.object({
-  title: import_zod4.z.string().min(1, "Title is required").default("Untitled Page"),
-  description: import_zod4.z.string().optional().default(""),
-  author: import_zod4.z.string().optional().default(""),
-  createdAt: import_zod4.z.string().optional(),
-  updatedAt: import_zod4.z.string().optional(),
-  tags: import_zod4.z.array(import_zod4.z.string()).optional().default([]),
-  category: import_zod4.z.string().optional().default("general"),
-  version: import_zod4.z.string().optional().default("1.0.0"),
-  custom: import_zod4.z.record(import_zod4.z.string(), import_zod4.z.unknown()).optional(),
+var DocumentMetadataSchema = import_zod5.z.object({
+  title: import_zod5.z.string().min(1, "Title is required").default("Untitled Page"),
+  description: import_zod5.z.string().optional().default(""),
+  author: import_zod5.z.string().optional().default(""),
+  createdAt: import_zod5.z.string().optional(),
+  updatedAt: import_zod5.z.string().optional(),
+  tags: import_zod5.z.array(import_zod5.z.string()).optional().default([]),
+  category: import_zod5.z.string().optional().default("general"),
+  version: import_zod5.z.string().optional().default("1.0.0"),
+  custom: import_zod5.z.record(import_zod5.z.string(), import_zod5.z.unknown()).optional(),
   tracking: TrackingConfigSchema.optional()
 });
-var PageDocumentSchema = import_zod4.z.object({
-  schema: import_zod4.z.literal(SCHEMA_NAME),
-  version: import_zod4.z.string().min(1, "Schema version is required").default(CURRENT_SCHEMA_VERSION),
+var PageDocumentSchema = import_zod5.z.object({
+  schema: import_zod5.z.literal(SCHEMA_NAME),
+  version: import_zod5.z.string().min(1, "Schema version is required").default(CURRENT_SCHEMA_VERSION),
   metadata: DocumentMetadataSchema.optional(),
   tracking: TrackingConfigSchema.optional(),
+  theme: ThemeSchema.optional(),
   document: RootPageNodeSchema
 });
 var PROJECT_SCHEMA_NAME = "stora.project";
 var CURRENT_PROJECT_SCHEMA_VERSION = "1.0.0";
 var ARTBOARD_REFERENCE_NODE_TYPE = "artboard-reference";
-var ArtboardTypeSchema = import_zod4.z.enum(["page", "component"]);
-var ArtboardSchema = import_zod4.z.object({
-  id: import_zod4.z.string().min(1, "Artboard ID is required"),
-  name: import_zod4.z.string().min(1, "Artboard name is required"),
+var ArtboardTypeSchema = import_zod5.z.enum(["page", "component"]);
+var ArtboardSchema = import_zod5.z.object({
+  id: import_zod5.z.string().min(1, "Artboard ID is required"),
+  name: import_zod5.z.string().min(1, "Artboard name is required"),
   artboardType: ArtboardTypeSchema,
   /** Route for page artboards (e.g. "/about"). */
-  slug: import_zod4.z.string().optional(),
+  slug: import_zod5.z.string().optional(),
   /**
    * For component artboards: the id that `open_modal` / `close_modal` actions target.
    * Mirrors the detached node's own `props.modalId` so ModalManager keeps working unchanged.
    */
-  triggerId: import_zod4.z.string().optional(),
+  triggerId: import_zod5.z.string().optional(),
   /**
    * Viewport/breakpoint this artboard is currently authored at. Declared inline
    * (rather than imported) because viewport is otherwise an editor/renderer concept.
    */
-  viewport: import_zod4.z.enum(["desktop", "tablet", "mobile"]).optional(),
+  viewport: import_zod5.z.enum(["desktop", "tablet", "mobile"]).optional(),
   /** Persisted artboard width in px, matching the canvas ViewportResizer's `width`. */
-  width: import_zod4.z.number().positive().optional(),
+  width: import_zod5.z.number().positive().optional(),
   /**
    * Free position on the builder's infinite canvas, in unscaled canvas px. Absent means
    * "not placed yet" — the canvas then falls back to laying the artboard out in a row.
    */
-  position: import_zod4.z.object({
-    x: import_zod4.z.number(),
-    y: import_zod4.z.number()
+  position: import_zod5.z.object({
+    x: import_zod5.z.number(),
+    y: import_zod5.z.number()
   }).optional(),
   document: PageDocumentSchema
 });
-var ProjectDocumentSchema = import_zod4.z.object({
-  schema: import_zod4.z.literal(PROJECT_SCHEMA_NAME),
-  version: import_zod4.z.string().min(1, "Schema version is required").default(CURRENT_PROJECT_SCHEMA_VERSION),
+var ProjectDocumentSchema = import_zod5.z.object({
+  schema: import_zod5.z.literal(PROJECT_SCHEMA_NAME),
+  version: import_zod5.z.string().min(1, "Schema version is required").default(CURRENT_PROJECT_SCHEMA_VERSION),
   metadata: DocumentMetadataSchema.optional(),
   tracking: TrackingConfigSchema.optional(),
-  artboards: import_zod4.z.array(ArtboardSchema).min(1, "A project needs at least one artboard"),
-  activeArtboardId: import_zod4.z.string().optional()
+  artboards: import_zod5.z.array(ArtboardSchema).min(1, "A project needs at least one artboard"),
+  activeArtboardId: import_zod5.z.string().optional()
 });
 function isAssetReference(value) {
   return AssetReferenceSchema.safeParse(value).success;
@@ -876,31 +1006,58 @@ function validateNodeIdUniqueness(node) {
   };
 }
 
+// src/breakpoints.ts
+var BREAKPOINTS = Object.freeze({
+  mobile: Object.freeze({ minWidth: 0, maxWidth: 767 }),
+  tablet: Object.freeze({ minWidth: 768, maxWidth: 1023 }),
+  desktop: Object.freeze({ minWidth: 1024, maxWidth: null })
+});
+var BREAKPOINT_ORDER = Object.freeze([
+  "desktop",
+  "tablet",
+  "mobile"
+]);
+function formatMaxWidth(maxWidth) {
+  return `${maxWidth + 0.98}px`;
+}
+var BREAKPOINT_MEDIA_QUERIES = Object.freeze({
+  desktop: `(min-width: ${BREAKPOINTS.desktop.minWidth}px)`,
+  tablet: `(min-width: ${BREAKPOINTS.tablet.minWidth}px) and (max-width: ${formatMaxWidth(
+    BREAKPOINTS.tablet.maxWidth
+  )})`,
+  mobile: `(max-width: ${formatMaxWidth(BREAKPOINTS.mobile.maxWidth)})`
+});
+function getBreakpointForWidth(width) {
+  if (width < BREAKPOINTS.tablet.minWidth) return "mobile";
+  if (width < BREAKPOINTS.desktop.minWidth) return "tablet";
+  return "desktop";
+}
+
 // src/manifest.ts
-var import_zod5 = require("zod");
-var ManifestAssetItemSchema = import_zod5.z.object({
-  id: import_zod5.z.string().min(1, "Asset ID cannot be empty"),
-  path: import_zod5.z.string().min(1, "Asset archive path cannot be empty"),
-  mimeType: import_zod5.z.string().min(1, "MIME type cannot be empty"),
-  size: import_zod5.z.number().nonnegative("Asset size must be non-negative"),
-  checksum: import_zod5.z.string().optional()
+var import_zod6 = require("zod");
+var ManifestAssetItemSchema = import_zod6.z.object({
+  id: import_zod6.z.string().min(1, "Asset ID cannot be empty"),
+  path: import_zod6.z.string().min(1, "Asset archive path cannot be empty"),
+  mimeType: import_zod6.z.string().min(1, "MIME type cannot be empty"),
+  size: import_zod6.z.number().nonnegative("Asset size must be non-negative"),
+  checksum: import_zod6.z.string().optional()
 });
-var ManifestSchema = import_zod5.z.object({
-  schema: import_zod5.z.literal(SCHEMA_NAME).default(SCHEMA_NAME),
-  schemaVersion: import_zod5.z.string().min(1, "Schema version cannot be empty").default("1.0.0"),
-  packageVersion: import_zod5.z.string().min(1, "Package version cannot be empty").default("1.0.0"),
-  builderCompatibility: import_zod5.z.string().default(">=0.1.0"),
-  requiredComponents: import_zod5.z.array(import_zod5.z.string()).default([]),
-  requiredCapabilities: import_zod5.z.array(import_zod5.z.string()).default([]),
-  assets: import_zod5.z.array(ManifestAssetItemSchema).default([]),
-  createdAt: import_zod5.z.string().optional()
+var ManifestSchema = import_zod6.z.object({
+  schema: import_zod6.z.literal(SCHEMA_NAME).default(SCHEMA_NAME),
+  schemaVersion: import_zod6.z.string().min(1, "Schema version cannot be empty").default("1.0.0"),
+  packageVersion: import_zod6.z.string().min(1, "Package version cannot be empty").default("1.0.0"),
+  builderCompatibility: import_zod6.z.string().default(">=0.1.0"),
+  requiredComponents: import_zod6.z.array(import_zod6.z.string()).default([]),
+  requiredCapabilities: import_zod6.z.array(import_zod6.z.string()).default([]),
+  assets: import_zod6.z.array(ManifestAssetItemSchema).default([]),
+  createdAt: import_zod6.z.string().optional()
 });
 function isManifest(value) {
   return ManifestSchema.safeParse(value).success;
 }
 
 // src/template.ts
-var import_zod6 = require("zod");
+var import_zod7 = require("zod");
 var DANGEROUS_URI_PATTERN = /^(javascript:|vbscript:|data:(?!image\/))|<script/i;
 function isSafeThumbnailUrl(url) {
   if (!url || typeof url !== "string") return false;
@@ -909,49 +1066,49 @@ function isSafeThumbnailUrl(url) {
   if (DANGEROUS_URI_PATTERN.test(trimmed)) return false;
   return true;
 }
-var SafeThumbnailUrlSchema = import_zod6.z.string().min(1, "Thumbnail URL cannot be empty").refine(
+var SafeThumbnailUrlSchema = import_zod7.z.string().min(1, "Thumbnail URL cannot be empty").refine(
   (url) => isSafeThumbnailUrl(url),
   { message: "Thumbnail URL contains an unsafe protocol or payload" }
 );
-var SafeThumbnailObjectSchema = import_zod6.z.object({
+var SafeThumbnailObjectSchema = import_zod7.z.object({
   url: SafeThumbnailUrlSchema,
-  alt: import_zod6.z.string().optional(),
-  width: import_zod6.z.number().positive().optional(),
-  height: import_zod6.z.number().positive().optional()
+  alt: import_zod7.z.string().optional(),
+  width: import_zod7.z.number().positive().optional(),
+  height: import_zod7.z.number().positive().optional()
 });
-var SafeThumbnailSchema = import_zod6.z.union([
+var SafeThumbnailSchema = import_zod7.z.union([
   AssetReferenceSchema,
   SafeThumbnailObjectSchema,
   SafeThumbnailUrlSchema
 ]);
-var TemplatePackageRefSchema = import_zod6.z.object({
-  path: import_zod6.z.string().optional(),
+var TemplatePackageRefSchema = import_zod7.z.object({
+  path: import_zod7.z.string().optional(),
   url: SafeThumbnailUrlSchema.optional(),
-  checksum: import_zod6.z.string().optional(),
-  format: import_zod6.z.enum(["stora", "json"]).default("stora")
+  checksum: import_zod7.z.string().optional(),
+  format: import_zod7.z.enum(["stora", "json"]).default("stora")
 });
-var TemplateRequirementsSchema = import_zod6.z.object({
-  requiredComponents: import_zod6.z.array(import_zod6.z.string()).default([]),
-  requiredCapabilities: import_zod6.z.array(import_zod6.z.string()).default([])
+var TemplateRequirementsSchema = import_zod7.z.object({
+  requiredComponents: import_zod7.z.array(import_zod7.z.string()).default([]),
+  requiredCapabilities: import_zod7.z.array(import_zod7.z.string()).default([])
 });
-var TemplateRecordSchema = import_zod6.z.object({
-  id: import_zod6.z.string().min(1, "Template ID must be a non-empty string"),
-  name: import_zod6.z.string().min(1, "Template name must be a non-empty string"),
-  description: import_zod6.z.string().optional().default(""),
-  category: import_zod6.z.string().optional().default("general"),
-  tags: import_zod6.z.array(import_zod6.z.string()).optional().default([]),
+var TemplateRecordSchema = import_zod7.z.object({
+  id: import_zod7.z.string().min(1, "Template ID must be a non-empty string"),
+  name: import_zod7.z.string().min(1, "Template name must be a non-empty string"),
+  description: import_zod7.z.string().optional().default(""),
+  category: import_zod7.z.string().optional().default("general"),
+  tags: import_zod7.z.array(import_zod7.z.string()).optional().default([]),
   thumbnail: SafeThumbnailSchema.optional(),
-  author: import_zod6.z.string().optional().default(""),
-  version: import_zod6.z.string().optional().default("1.0.0"),
+  author: import_zod7.z.string().optional().default(""),
+  version: import_zod7.z.string().optional().default("1.0.0"),
   document: PageDocumentSchema.optional(),
   packageReference: TemplatePackageRefSchema.optional(),
   requirements: TemplateRequirementsSchema.default({
     requiredComponents: [],
     requiredCapabilities: []
   }),
-  createdAt: import_zod6.z.string().optional(),
-  updatedAt: import_zod6.z.string().optional(),
-  custom: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.unknown()).optional()
+  createdAt: import_zod7.z.string().optional(),
+  updatedAt: import_zod7.z.string().optional(),
+  custom: import_zod7.z.record(import_zod7.z.string(), import_zod7.z.unknown()).optional()
 });
 function isTemplateRecord(value) {
   return TemplateRecordSchema.safeParse(value).success;
@@ -963,7 +1120,7 @@ function isSafeThumbnail(value) {
 // src/fixtures/starter-page.json
 var starter_page_default = {
   schema: "stora.page",
-  version: "1.1.0",
+  version: "1.2.0",
   metadata: {
     title: "Welcome to KUBUILD",
     description: "A starter template built with KUBUILD portable web builder",
@@ -1044,7 +1201,8 @@ var starter_page_default = {
                 id: "hero-text",
                 type: "text",
                 props: {
-                  content: "KUBUILD is an open, portable web page builder engine designed for modern web applications."
+                  as: "p",
+                  text: "KUBUILD is an open, portable web page builder engine designed for modern web applications."
                 },
                 styles: {
                   base: {
@@ -1085,14 +1243,24 @@ var starter_page_default = {
                 id: "hero-button",
                 type: "button",
                 props: {
-                  label: "Get Started",
-                  action: {
-                    type: "navigate",
-                    payload: {
-                      url: "/docs"
-                    }
-                  }
+                  label: "Get Started"
                 },
+                actions: [
+                  {
+                    id: "hero-button-click",
+                    trigger: "click",
+                    enabled: true,
+                    steps: [
+                      {
+                        id: "hero-button-navigate",
+                        type: "navigate",
+                        payload: {
+                          url: "/docs"
+                        }
+                      }
+                    ]
+                  }
+                ],
                 styles: {
                   base: {
                     backgroundColor: "#2563eb",
@@ -1122,7 +1290,7 @@ var starter_page_default = {
 var starterPageFixture = starter_page_default;
 
 // src/json-schema.ts
-var import_zod7 = require("zod");
+var import_zod8 = require("zod");
 var PAGE_DOCUMENT_JSON_SCHEMA_V1 = {
   $schema: "http://json-schema.org/draft-07/schema#",
   $id: "https://schema.stora.page/v1/page.json",
@@ -1141,7 +1309,7 @@ var PAGE_DOCUMENT_JSON_SCHEMA_V1 = {
       type: "string",
       pattern: "^\\d+(\\.\\d+)*$",
       description: "Schema version of the document",
-      default: "1.1.0"
+      default: "1.2.0"
     },
     metadata: {
       $ref: "#/definitions/documentMetadata"
@@ -1151,9 +1319,33 @@ var PAGE_DOCUMENT_JSON_SCHEMA_V1 = {
     },
     tracking: {
       $ref: "#/definitions/trackingConfig"
+    },
+    theme: {
+      $ref: "#/definitions/theme"
     }
   },
   definitions: {
+    themeTokenMap: {
+      type: "object",
+      propertyNames: { pattern: "^[a-zA-Z0-9][a-zA-Z0-9_-]{0,63}$" },
+      additionalProperties: {
+        type: ["string", "number"],
+        maxLength: 512,
+        pattern: "^[^;{}<>\\\\]*$"
+      },
+      description: "Design tokens keyed by name. Values must not contain ; { } < > or backslashes."
+    },
+    theme: {
+      type: "object",
+      description: "Document design tokens, emitted as CSS custom properties (--kb-color-*, --kb-font-*, --kb-radius-*, --kb-space-*) and referenced from styles as var(--kb-color-<key>).",
+      properties: {
+        colors: { $ref: "#/definitions/themeTokenMap" },
+        fonts: { $ref: "#/definitions/themeTokenMap" },
+        radii: { $ref: "#/definitions/themeTokenMap" },
+        spacing: { $ref: "#/definitions/themeTokenMap" }
+      },
+      additionalProperties: false
+    },
     trackingConfig: {
       type: "object",
       description: "Tracking configuration. Contains only public ids, flags and opaque credential ids \u2014 secrets are host-owned.",
@@ -1414,7 +1606,7 @@ var PAGE_DOCUMENT_JSON_SCHEMA_V1 = {
         },
         trigger: {
           type: "string",
-          enum: ["click", "submit", "change", "blur", "focus", "load"]
+          enum: ["click", "submit", "change", "blur", "focus", "load", "expire"]
         },
         label: { type: "string" },
         debounceMs: { type: "number", minimum: 0 },
@@ -1835,7 +2027,7 @@ var ACTION_PIPELINE_JSON_SCHEMA_V1 = {
     },
     trigger: {
       type: "string",
-      enum: ["click", "submit", "change", "blur", "focus", "load"],
+      enum: ["click", "submit", "change", "blur", "focus", "load", "expire"],
       description: "DOM or component event that triggers the action pipeline"
     },
     label: {
@@ -2054,7 +2246,7 @@ function getFormFieldBindingJsonSchema() {
 }
 function toDraft7(schema, id, title, io) {
   return {
-    ...import_zod7.z.toJSONSchema(schema, { target: "draft-7", io }),
+    ...import_zod8.z.toJSONSchema(schema, { target: "draft-7", io }),
     $id: id,
     title
   };
@@ -2082,7 +2274,7 @@ function getTrackingRelayResponseJsonSchema() {
 }
 function getTrackingProviderSecretsJsonSchema() {
   trackingProviderSecretsJsonSchema ??= toDraft7(
-    import_zod7.z.object({
+    import_zod8.z.object({
       meta: MetaTrackingSecretsSchema.optional(),
       google: GoogleTrackingSecretsSchema.optional(),
       tiktok: TikTokTrackingSecretsSchema.optional(),
@@ -2094,6 +2286,102 @@ function getTrackingProviderSecretsJsonSchema() {
   );
   return trackingProviderSecretsJsonSchema;
 }
+
+// src/builtin-components.ts
+var BUILTIN_COMPONENT_TYPES = [
+  // layout
+  "page",
+  "section",
+  "container",
+  "columns",
+  "flex",
+  "grid",
+  // typography
+  "heading",
+  "text",
+  "paragraph",
+  "link",
+  "blockquote",
+  "badge",
+  "code-block",
+  // media
+  "image",
+  "video",
+  "icon",
+  "html-embed",
+  // form
+  "button",
+  "button-submit",
+  "form",
+  "input",
+  "textarea",
+  "select",
+  "checkbox",
+  "switch",
+  "radio-group",
+  "radio",
+  "radio-item",
+  "file-upload",
+  // data
+  "collection",
+  "list",
+  "list-item",
+  "table",
+  "table-row",
+  "table-cell",
+  // interactive
+  "modal",
+  "drawer",
+  "collapsible",
+  // conversion (Epic 60)
+  "countdown",
+  "accordion",
+  "accordion-item",
+  "tabs",
+  "tab-panel",
+  "carousel",
+  "rating",
+  "divider",
+  "spacer"
+];
+function isBuiltinComponentType(type) {
+  return typeof type === "string" && BUILTIN_COMPONENT_TYPES.includes(type);
+}
+
+// src/canonical-props.ts
+var CANONICAL_TEXT_PROPS = Object.freeze({
+  heading: { canonical: "text", aliases: ["content"], legacyReadOrder: ["text", "content"] },
+  text: { canonical: "text", aliases: ["content"], legacyReadOrder: ["text", "content"] },
+  paragraph: { canonical: "text", aliases: ["content"], legacyReadOrder: ["text", "content"] },
+  link: {
+    canonical: "text",
+    aliases: ["label", "content"],
+    legacyReadOrder: ["text", "label", "content"]
+  },
+  badge: { canonical: "text", aliases: ["label"], legacyReadOrder: ["text", "label"] },
+  blockquote: { canonical: "text", aliases: ["quote"], legacyReadOrder: ["quote", "text"] },
+  button: {
+    canonical: "label",
+    aliases: ["text", "content"],
+    legacyReadOrder: ["label", "text", "content"]
+  }
+});
+function getCanonicalTextPropRule(componentType) {
+  return Object.prototype.hasOwnProperty.call(CANONICAL_TEXT_PROPS, componentType) ? CANONICAL_TEXT_PROPS[componentType] : void 0;
+}
+function findDeprecatedPropAliases(componentType, props) {
+  const rule = getCanonicalTextPropRule(componentType);
+  if (!rule || !props) return [];
+  const canonicalPresent = props[rule.canonical] !== void 0;
+  let aliasInEffect = canonicalPresent;
+  const usages = [];
+  for (const alias of rule.aliases) {
+    if (props[alias] === void 0) continue;
+    usages.push({ propName: alias, canonicalName: rule.canonical, inEffect: !aliasInEffect });
+    aliasInEffect = true;
+  }
+  return usages;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACTION_PIPELINE_JSON_SCHEMA_V1,
@@ -2110,6 +2398,11 @@ function getTrackingProviderSecretsJsonSchema() {
   ArtboardSchema,
   ArtboardTypeSchema,
   AssetReferenceSchema,
+  BREAKPOINTS,
+  BREAKPOINT_MEDIA_QUERIES,
+  BREAKPOINT_ORDER,
+  BUILTIN_COMPONENT_TYPES,
+  CANONICAL_TEXT_PROPS,
   CURRENT_PROJECT_SCHEMA_VERSION,
   CURRENT_SCHEMA_VERSION,
   CloseModalStepPayloadSchema,
@@ -2156,10 +2449,16 @@ function getTrackingProviderSecretsJsonSchema() {
   StyleDefinitionSchema,
   StyleValueSchema,
   TEMPLATE_RECORD_JSON_SCHEMA_V1,
+  THEME_TOKEN_CSS_PREFIX,
+  THEME_TOKEN_GROUPS,
   TRACKING_RELAY_PROTOCOL_VERSION,
   TemplatePackageRefSchema,
   TemplateRecordSchema,
   TemplateRequirementsSchema,
+  ThemeSchema,
+  ThemeTokenKeySchema,
+  ThemeTokenMapSchema,
+  ThemeTokenValueSchema,
   TikTokTrackingProviderConfigSchema,
   TikTokTrackingSecretsSchema,
   ToggleModalStepPayloadSchema,
@@ -2177,8 +2476,11 @@ function getTrackingProviderSecretsJsonSchema() {
   ValidationRuleTypeSchema,
   VariableBindingSchema,
   collectNodeIds,
+  findDeprecatedPropAliases,
   generateDeterministicNodeId,
   getActionPipelineJsonSchema,
+  getBreakpointForWidth,
+  getCanonicalTextPropRule,
   getFormConfigJsonSchema,
   getFormFieldBindingJsonSchema,
   getManifestJsonSchema,
@@ -2196,15 +2498,19 @@ function getTrackingProviderSecretsJsonSchema() {
   isAnimationConfig,
   isArtboardReferenceNode,
   isAssetReference,
+  isBuiltinComponentType,
   isConditionOperator,
   isFormConfig,
   isFormFieldBinding,
   isManifest,
   isProjectDocument,
   isSafeActionUrl,
+  isSafeThemeTokenKey,
+  isSafeThemeTokenValue,
   isSafeThumbnail,
   isSafeThumbnailUrl,
   isTemplateRecord,
+  isTheme,
   isTrackEventStepPayload,
   isTrackingConfig,
   isTrackingRelayRequest,
@@ -2213,6 +2519,8 @@ function getTrackingProviderSecretsJsonSchema() {
   isValidationRuleType,
   isVariableBinding,
   looksLikeProjectDocument,
+  mergeThemes,
+  parseThemeTokenRef,
   sanitizeActionPayload,
   sanitizeActionPipeline,
   sanitizeActionStep,
@@ -2220,6 +2528,9 @@ function getTrackingProviderSecretsJsonSchema() {
   sanitizeActionUrl,
   sanitizeActionValue,
   starterPageFixture,
+  themeToCssVariables,
+  themeTokenCssVarName,
+  themeTokenRef,
   validateActionStepPayload,
   validateNodeIdUniqueness
 });