@webstudio-is/sdk 0.204.0 → 0.205.0

package/lib/index.js

@@ -57,7 +57,7 @@ var commonPageFields = {
   title: PageTitle,
   history: z2.optional(z2.array(z2.string())),
   rootInstanceId: z2.string(),
-  systemDataSourceId: z2.string(),
+  systemDataSourceId: z2.string().optional(),
   meta: z2.object({
     description: z2.string().optional(),
     title: z2.string().optional(),
@@ -221,20 +221,25 @@ var DataSource = z4.union([
   z4.object({
     type: z4.literal("variable"),
     id: DataSourceId,
-    scopeInstanceId: z4.string(),
+    // The instance should always be specified for variables,
+    // however, there was a bug in the embed template
+    // which produced variables without an instance
+    // and these variables will fail validation
+    // if we make it required
+    scopeInstanceId: z4.string().optional(),
     name: z4.string(),
     value: DataSourceVariableValue
   }),
   z4.object({
     type: z4.literal("parameter"),
     id: DataSourceId,
-    scopeInstanceId: z4.string(),
+    scopeInstanceId: z4.string().optional(),
     name: z4.string()
   }),
   z4.object({
     type: z4.literal("resource"),
     id: DataSourceId,
-    scopeInstanceId: z4.string(),
+    scopeInstanceId: z4.string().optional(),
     name: z4.string(),
     resourceId: z4.string()
   })
@@ -277,98 +282,261 @@ var ResourceRequest = z5.object({
 var Resources = z5.map(ResourceId, Resource);
 
 // src/schema/props.ts
+import { z as z7 } from "zod";
+
+// src/schema/animation-schema.ts
+import { StyleValue } from "@webstudio-is/css-engine";
 import { z as z6 } from "zod";
-var PropId = z6.string();
+var literalUnion = (arr) => z6.union(
+  arr.map((val) => z6.literal(val))
+);
+var RANGE_UNITS = [
+  "%",
+  "px",
+  "cm",
+  "mm",
+  "q",
+  "in",
+  "pt",
+  "pc",
+  "em",
+  "rem",
+  "ex",
+  "rex",
+  "cap",
+  "rcap",
+  "ch",
+  "rch",
+  "lh",
+  "rlh",
+  "vw",
+  "svw",
+  "lvw",
+  "dvw",
+  "vh",
+  "svh",
+  "lvh",
+  "dvh",
+  "vi",
+  "svi",
+  "lvi",
+  "dvi",
+  "vb",
+  "svb",
+  "lvb",
+  "dvb",
+  "vmin",
+  "svmin",
+  "lvmin",
+  "dvmin",
+  "vmax",
+  "svmax",
+  "lvmax",
+  "dvmax"
+];
+var rangeUnitSchema = literalUnion(RANGE_UNITS);
+var rangeUnitValueSchema = z6.union([
+  z6.object({
+    type: z6.literal("unit"),
+    value: z6.number(),
+    unit: rangeUnitSchema
+  }),
+  z6.object({
+    type: z6.literal("unparsed"),
+    value: z6.string()
+  })
+]);
+var insetUnitValueSchema = z6.union([
+  rangeUnitValueSchema,
+  z6.object({
+    type: z6.literal("keyword"),
+    value: z6.literal("auto")
+  })
+]);
+var keyframeStylesSchema = z6.record(StyleValue);
+var animationKeyframeSchema = z6.object({
+  offset: z6.number().optional(),
+  styles: keyframeStylesSchema
+});
+var keyframeEffectOptionsSchema = z6.object({
+  easing: z6.string().optional(),
+  fill: z6.union([
+    z6.literal("none"),
+    z6.literal("forwards"),
+    z6.literal("backwards"),
+    z6.literal("both")
+  ]).optional()
+  // FillMode
+});
+var scrollNamedRangeSchema = z6.union([
+  z6.literal("start"),
+  z6.literal("end")
+]);
+var scrollRangeValueSchema = z6.tuple([
+  scrollNamedRangeSchema,
+  rangeUnitValueSchema
+]);
+var scrollRangeOptionsSchema = z6.object({
+  rangeStart: scrollRangeValueSchema.optional(),
+  rangeEnd: scrollRangeValueSchema.optional()
+});
+var animationAxisSchema = z6.union([
+  z6.literal("block"),
+  z6.literal("inline"),
+  z6.literal("x"),
+  z6.literal("y")
+]);
+var viewNamedRangeSchema = z6.union([
+  z6.literal("contain"),
+  z6.literal("cover"),
+  z6.literal("entry"),
+  z6.literal("exit"),
+  z6.literal("entry-crossing"),
+  z6.literal("exit-crossing")
+]);
+var viewRangeValueSchema = z6.tuple([
+  viewNamedRangeSchema,
+  rangeUnitValueSchema
+]);
+var viewRangeOptionsSchema = z6.object({
+  rangeStart: viewRangeValueSchema.optional(),
+  rangeEnd: viewRangeValueSchema.optional()
+});
+var baseAnimation = z6.object({
+  name: z6.string().optional(),
+  description: z6.string().optional(),
+  keyframes: z6.array(animationKeyframeSchema)
+});
+var scrollAnimationSchema = baseAnimation.merge(
+  z6.object({
+    timing: keyframeEffectOptionsSchema.merge(scrollRangeOptionsSchema)
+  })
+);
+var scrollActionSchema = z6.object({
+  type: z6.literal("scroll"),
+  source: z6.union([z6.literal("closest"), z6.literal("nearest"), z6.literal("root")]).optional(),
+  axis: animationAxisSchema.optional(),
+  animations: z6.array(scrollAnimationSchema),
+  isPinned: z6.boolean().optional(),
+  debug: z6.boolean().optional()
+});
+var viewAnimationSchema = baseAnimation.merge(
+  z6.object({
+    timing: keyframeEffectOptionsSchema.merge(viewRangeOptionsSchema)
+  })
+);
+var viewActionSchema = z6.object({
+  type: z6.literal("view"),
+  subject: z6.string().optional(),
+  axis: animationAxisSchema.optional(),
+  animations: z6.array(viewAnimationSchema),
+  insetStart: insetUnitValueSchema.optional(),
+  insetEnd: insetUnitValueSchema.optional(),
+  isPinned: z6.boolean().optional(),
+  debug: z6.boolean().optional()
+});
+var animationActionSchema = z6.discriminatedUnion("type", [
+  scrollActionSchema,
+  viewActionSchema
+]);
+
+// src/schema/props.ts
+var PropId = z7.string();
 var baseProp = {
   id: PropId,
-  instanceId: z6.string(),
-  name: z6.string(),
-  required: z6.optional(z6.boolean())
+  instanceId: z7.string(),
+  name: z7.string(),
+  required: z7.optional(z7.boolean())
 };
-var Prop = z6.union([
-  z6.object({
+var Prop = z7.union([
+  z7.object({
     ...baseProp,
-    type: z6.literal("number"),
-    value: z6.number()
+    type: z7.literal("number"),
+    value: z7.number()
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("string"),
-    value: z6.string()
+    type: z7.literal("string"),
+    value: z7.string()
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("boolean"),
-    value: z6.boolean()
+    type: z7.literal("boolean"),
+    value: z7.boolean()
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("json"),
-    value: z6.unknown()
+    type: z7.literal("json"),
+    value: z7.unknown()
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("asset"),
-    value: z6.string()
+    type: z7.literal("asset"),
+    value: z7.string()
     // asset id
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("page"),
-    value: z6.union([
-      z6.string(),
+    type: z7.literal("page"),
+    value: z7.union([
+      z7.string(),
       // page id
-      z6.object({
-        pageId: z6.string(),
-        instanceId: z6.string()
+      z7.object({
+        pageId: z7.string(),
+        instanceId: z7.string()
       })
     ])
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("string[]"),
-    value: z6.array(z6.string())
+    type: z7.literal("string[]"),
+    value: z7.array(z7.string())
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("parameter"),
+    type: z7.literal("parameter"),
     // data source id
-    value: z6.string()
+    value: z7.string()
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("resource"),
+    type: z7.literal("resource"),
     // resource id
-    value: z6.string()
+    value: z7.string()
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("expression"),
+    type: z7.literal("expression"),
     // expression code
-    value: z6.string()
+    value: z7.string()
   }),
-  z6.object({
+  z7.object({
     ...baseProp,
-    type: z6.literal("action"),
-    value: z6.array(
-      z6.object({
-        type: z6.literal("execute"),
-        args: z6.array(z6.string()),
-        code: z6.string()
+    type: z7.literal("action"),
+    value: z7.array(
+      z7.object({
+        type: z7.literal("execute"),
+        args: z7.array(z7.string()),
+        code: z7.string()
       })
     )
+  }),
+  z7.object({
+    ...baseProp,
+    type: z7.literal("animationAction"),
+    value: animationActionSchema
   })
 ]);
-var Props = z6.map(PropId, Prop);
+var Props = z7.map(PropId, Prop);
 
 // src/schema/breakpoints.ts
-import { z as z7 } from "zod";
-var BreakpointId = z7.string();
-var Breakpoint = z7.object({
+import { z as z8 } from "zod";
+var BreakpointId = z8.string();
+var Breakpoint = z8.object({
   id: BreakpointId,
-  label: z7.string(),
-  minWidth: z7.number().optional(),
-  maxWidth: z7.number().optional()
+  label: z8.string(),
+  minWidth: z8.number().optional(),
+  maxWidth: z8.number().optional()
 }).refine(({ minWidth, maxWidth }) => {
   return (
     // Either min or max width have to be defined
@@ -376,7 +544,7 @@ var Breakpoint = z7.object({
     minWidth === void 0 && maxWidth === void 0
   );
 }, "Either minWidth or maxWidth should be defined");
-var Breakpoints = z7.map(BreakpointId, Breakpoint);
+var Breakpoints = z8.map(BreakpointId, Breakpoint);
 var initialBreakpoints = [
   { id: "placeholder", label: "Base" },
   { id: "placeholder", label: "Tablet", maxWidth: 991 },
@@ -385,52 +553,51 @@ var initialBreakpoints = [
 ];
 
 // src/schema/style-sources.ts
-import { z as z8 } from "zod";
-var StyleSourceId = z8.string();
-var StyleSourceToken = z8.object({
-  type: z8.literal("token"),
+import { z as z9 } from "zod";
+var StyleSourceId = z9.string();
+var StyleSourceToken = z9.object({
+  type: z9.literal("token"),
   id: StyleSourceId,
-  name: z8.string()
+  name: z9.string()
 });
-var StyleSourceLocal = z8.object({
-  type: z8.literal("local"),
+var StyleSourceLocal = z9.object({
+  type: z9.literal("local"),
   id: StyleSourceId
 });
-var StyleSource = z8.union([StyleSourceToken, StyleSourceLocal]);
-var StyleSources = z8.map(StyleSourceId, StyleSource);
+var StyleSource = z9.union([StyleSourceToken, StyleSourceLocal]);
+var StyleSources = z9.map(StyleSourceId, StyleSource);
 
 // src/schema/style-source-selections.ts
-import { z as z9 } from "zod";
-var InstanceId2 = z9.string();
-var StyleSourceId2 = z9.string();
-var StyleSourceSelection = z9.object({
+import { z as z10 } from "zod";
+var InstanceId2 = z10.string();
+var StyleSourceId2 = z10.string();
+var StyleSourceSelection = z10.object({
   instanceId: InstanceId2,
-  values: z9.array(StyleSourceId2)
+  values: z10.array(StyleSourceId2)
 });
-var StyleSourceSelections = z9.map(InstanceId2, StyleSourceSelection);
+var StyleSourceSelections = z10.map(InstanceId2, StyleSourceSelection);
 
 // src/schema/styles.ts
-import { z as z10 } from "zod";
-import { StyleValue } from "@webstudio-is/css-engine";
-var StyleDeclRaw = z10.object({
-  styleSourceId: z10.string(),
-  breakpointId: z10.string(),
-  state: z10.optional(z10.string()),
+import { z as z11 } from "zod";
+import { StyleValue as StyleValue2 } from "@webstudio-is/css-engine";
+var StyleDeclRaw = z11.object({
+  styleSourceId: z11.string(),
+  breakpointId: z11.string(),
+  state: z11.optional(z11.string()),
   // @todo can't figure out how to make property to be enum
-  property: z10.string(),
-  value: StyleValue,
-  listed: z10.boolean().optional()
+  property: z11.string(),
+  value: StyleValue2,
+  listed: z11.boolean().optional()
 });
 var StyleDecl = StyleDeclRaw;
 var getStyleDeclKey = (styleDecl) => {
   return `${styleDecl.styleSourceId}:${styleDecl.breakpointId}:${styleDecl.property}:${styleDecl.state ?? ""}`;
 };
-var Styles = z10.map(z10.string(), StyleDecl);
+var Styles = z11.map(z11.string(), StyleDecl);
 
 // src/schema/deployment.ts
-import { z as z11 } from "zod";
-var Templates = z11.enum([
-  "vanilla",
+import { z as z12 } from "zod";
+var Templates = z12.enum([
   "docker",
   "vercel",
   "netlify",
@@ -438,179 +605,185 @@ var Templates = z11.enum([
   "ssg-netlify",
   "ssg-vercel"
 ]);
-var Deployment = z11.union([
-  z11.object({
-    destination: z11.literal("static"),
-    name: z11.string(),
-    assetsDomain: z11.string(),
+var Deployment = z12.union([
+  z12.object({
+    destination: z12.literal("static"),
+    name: z12.string(),
+    assetsDomain: z12.string(),
     // Must be validated very strictly
-    templates: z11.array(Templates)
+    templates: z12.array(Templates)
   }),
-  z11.object({
-    destination: z11.literal("saas").optional(),
-    domains: z11.array(z11.string()),
-    assetsDomain: z11.string().optional(),
+  z12.object({
+    destination: z12.literal("saas").optional(),
+    domains: z12.array(z12.string()),
+    assetsDomain: z12.string().optional(),
     /**
      * @deprecated This field is deprecated, use `domains` instead.
      */
-    projectDomain: z11.string().optional(),
-    excludeWstdDomainFromSearch: z11.boolean().optional()
+    projectDomain: z12.string().optional(),
+    excludeWstdDomainFromSearch: z12.boolean().optional()
   })
 ]);
 
 // src/schema/webstudio.ts
-import { z as z12 } from "zod";
-var WebstudioFragment = z12.object({
-  children: z12.array(InstanceChild),
-  instances: z12.array(Instance),
-  assets: z12.array(Asset),
-  dataSources: z12.array(DataSource),
-  resources: z12.array(Resource),
-  props: z12.array(Prop),
-  breakpoints: z12.array(Breakpoint),
-  styleSourceSelections: z12.array(StyleSourceSelection),
-  styleSources: z12.array(StyleSource),
-  styles: z12.array(StyleDecl)
+import { z as z13 } from "zod";
+var WebstudioFragment = z13.object({
+  children: z13.array(InstanceChild),
+  instances: z13.array(Instance),
+  assets: z13.array(Asset),
+  dataSources: z13.array(DataSource),
+  resources: z13.array(Resource),
+  props: z13.array(Prop),
+  breakpoints: z13.array(Breakpoint),
+  styleSourceSelections: z13.array(StyleSourceSelection),
+  styleSources: z13.array(StyleSource),
+  styles: z13.array(StyleDecl)
 });
 
 // src/schema/prop-meta.ts
-import { z as z13 } from "zod";
+import { z as z14 } from "zod";
 var common = {
-  label: z13.string().optional(),
-  description: z13.string().optional(),
-  required: z13.boolean()
+  label: z14.string().optional(),
+  description: z14.string().optional(),
+  required: z14.boolean()
 };
-var Number = z13.object({
+var Number = z14.object({
   ...common,
-  control: z13.literal("number"),
-  type: z13.literal("number"),
-  defaultValue: z13.number().optional()
+  control: z14.literal("number"),
+  type: z14.literal("number"),
+  defaultValue: z14.number().optional()
 });
-var Range = z13.object({
+var Range = z14.object({
   ...common,
-  control: z13.literal("range"),
-  type: z13.literal("number"),
-  defaultValue: z13.number().optional()
+  control: z14.literal("range"),
+  type: z14.literal("number"),
+  defaultValue: z14.number().optional()
 });
-var Text = z13.object({
+var Text = z14.object({
   ...common,
-  control: z13.literal("text"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional(),
+  control: z14.literal("text"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional(),
   /**
    * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
    * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
    */
-  rows: z13.number().optional()
+  rows: z14.number().optional()
 });
-var Code = z13.object({
+var Code = z14.object({
   ...common,
-  control: z13.literal("code"),
-  type: z13.literal("string"),
-  language: z13.union([z13.literal("html"), z13.literal("markdown")]),
-  defaultValue: z13.string().optional()
+  control: z14.literal("code"),
+  type: z14.literal("string"),
+  language: z14.union([z14.literal("html"), z14.literal("markdown")]),
+  defaultValue: z14.string().optional()
 });
-var CodeText = z13.object({
+var CodeText = z14.object({
   ...common,
-  control: z13.literal("codetext"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional()
+  control: z14.literal("codetext"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional()
 });
-var Color = z13.object({
+var Color = z14.object({
   ...common,
-  control: z13.literal("color"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional()
+  control: z14.literal("color"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional()
 });
-var Boolean = z13.object({
+var Boolean = z14.object({
   ...common,
-  control: z13.literal("boolean"),
-  type: z13.literal("boolean"),
-  defaultValue: z13.boolean().optional()
+  control: z14.literal("boolean"),
+  type: z14.literal("boolean"),
+  defaultValue: z14.boolean().optional()
 });
-var Radio = z13.object({
+var Radio = z14.object({
   ...common,
-  control: z13.literal("radio"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional(),
-  options: z13.array(z13.string())
+  control: z14.literal("radio"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional(),
+  options: z14.array(z14.string())
 });
-var InlineRadio = z13.object({
+var InlineRadio = z14.object({
   ...common,
-  control: z13.literal("inline-radio"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional(),
-  options: z13.array(z13.string())
+  control: z14.literal("inline-radio"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional(),
+  options: z14.array(z14.string())
 });
-var Select = z13.object({
+var Select = z14.object({
   ...common,
-  control: z13.literal("select"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional(),
-  options: z13.array(z13.string())
+  control: z14.literal("select"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional(),
+  options: z14.array(z14.string())
 });
-var Check = z13.object({
+var Check = z14.object({
   ...common,
-  control: z13.literal("check"),
-  type: z13.literal("string[]"),
-  defaultValue: z13.array(z13.string()).optional(),
-  options: z13.array(z13.string())
+  control: z14.literal("check"),
+  type: z14.literal("string[]"),
+  defaultValue: z14.array(z14.string()).optional(),
+  options: z14.array(z14.string())
 });
-var InlineCheck = z13.object({
+var InlineCheck = z14.object({
   ...common,
-  control: z13.literal("inline-check"),
-  type: z13.literal("string[]"),
-  defaultValue: z13.array(z13.string()).optional(),
-  options: z13.array(z13.string())
+  control: z14.literal("inline-check"),
+  type: z14.literal("string[]"),
+  defaultValue: z14.array(z14.string()).optional(),
+  options: z14.array(z14.string())
 });
-var MultiSelect = z13.object({
+var MultiSelect = z14.object({
   ...common,
-  control: z13.literal("multi-select"),
-  type: z13.literal("string[]"),
-  defaultValue: z13.array(z13.string()).optional(),
-  options: z13.array(z13.string())
+  control: z14.literal("multi-select"),
+  type: z14.literal("string[]"),
+  defaultValue: z14.array(z14.string()).optional(),
+  options: z14.array(z14.string())
 });
-var File = z13.object({
+var File = z14.object({
   ...common,
-  control: z13.literal("file"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional(),
+  control: z14.literal("file"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional(),
   /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept */
-  accept: z13.string().optional()
+  accept: z14.string().optional()
 });
-var Url = z13.object({
+var Url = z14.object({
   ...common,
-  control: z13.literal("url"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional()
+  control: z14.literal("url"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional()
 });
-var Json = z13.object({
+var Json = z14.object({
   ...common,
-  control: z13.literal("json"),
-  type: z13.literal("json"),
-  defaultValue: z13.unknown().optional()
+  control: z14.literal("json"),
+  type: z14.literal("json"),
+  defaultValue: z14.unknown().optional()
 });
-var Date = z13.object({
+var Date = z14.object({
   ...common,
-  control: z13.literal("date"),
+  control: z14.literal("date"),
   // @todo not sure what type should be here
   // (we don't support Date yet, added for completeness)
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional()
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional()
+});
+var Action = z14.object({
+  ...common,
+  control: z14.literal("action"),
+  type: z14.literal("action"),
+  defaultValue: z14.undefined().optional()
 });
-var Action = z13.object({
+var TextContent = z14.object({
   ...common,
-  control: z13.literal("action"),
-  type: z13.literal("action"),
-  defaultValue: z13.undefined().optional()
+  control: z14.literal("textContent"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional()
 });
-var TextContent = z13.object({
+var AnimationAction = z14.object({
   ...common,
-  control: z13.literal("textContent"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional()
+  control: z14.literal("animationAction"),
+  type: z14.literal("animationAction"),
+  defaultValue: z14.undefined().optional()
 });
-var PropMeta = z13.union([
+var PropMeta = z14.union([
   Number,
   Range,
   Text,
@@ -629,104 +802,105 @@ var PropMeta = z13.union([
   Json,
   Date,
   Action,
-  TextContent
+  TextContent,
+  AnimationAction
 ]);
 
 // src/schema/embed-template.ts
-import { z as z14 } from "zod";
-import { StyleValue as StyleValue2 } from "@webstudio-is/css-engine";
-var EmbedTemplateText = z14.object({
-  type: z14.literal("text"),
-  value: z14.string(),
-  placeholder: z14.boolean().optional()
+import { z as z15 } from "zod";
+import { StyleValue as StyleValue3 } from "@webstudio-is/css-engine";
+var EmbedTemplateText = z15.object({
+  type: z15.literal("text"),
+  value: z15.string(),
+  placeholder: z15.boolean().optional()
 });
-var EmbedTemplateExpression = z14.object({
-  type: z14.literal("expression"),
-  value: z14.string()
+var EmbedTemplateExpression = z15.object({
+  type: z15.literal("expression"),
+  value: z15.string()
 });
-var EmbedTemplateVariable = z14.object({
-  alias: z14.optional(z14.string()),
-  initialValue: z14.unknown()
+var EmbedTemplateVariable = z15.object({
+  alias: z15.optional(z15.string()),
+  initialValue: z15.unknown()
 });
-var EmbedTemplateProp = z14.union([
-  z14.object({
-    type: z14.literal("number"),
-    name: z14.string(),
-    value: z14.number()
+var EmbedTemplateProp = z15.union([
+  z15.object({
+    type: z15.literal("number"),
+    name: z15.string(),
+    value: z15.number()
   }),
-  z14.object({
-    type: z14.literal("string"),
-    name: z14.string(),
-    value: z14.string()
+  z15.object({
+    type: z15.literal("string"),
+    name: z15.string(),
+    value: z15.string()
   }),
-  z14.object({
-    type: z14.literal("boolean"),
-    name: z14.string(),
-    value: z14.boolean()
+  z15.object({
+    type: z15.literal("boolean"),
+    name: z15.string(),
+    value: z15.boolean()
   }),
-  z14.object({
-    type: z14.literal("string[]"),
-    name: z14.string(),
-    value: z14.array(z14.string())
+  z15.object({
+    type: z15.literal("string[]"),
+    name: z15.string(),
+    value: z15.array(z15.string())
   }),
-  z14.object({
-    type: z14.literal("json"),
-    name: z14.string(),
-    value: z14.unknown()
+  z15.object({
+    type: z15.literal("json"),
+    name: z15.string(),
+    value: z15.unknown()
   }),
-  z14.object({
-    type: z14.literal("expression"),
-    name: z14.string(),
-    code: z14.string()
+  z15.object({
+    type: z15.literal("expression"),
+    name: z15.string(),
+    code: z15.string()
   }),
-  z14.object({
-    type: z14.literal("parameter"),
-    name: z14.string(),
-    variableName: z14.string(),
-    variableAlias: z14.optional(z14.string())
+  z15.object({
+    type: z15.literal("parameter"),
+    name: z15.string(),
+    variableName: z15.string(),
+    variableAlias: z15.optional(z15.string())
   }),
-  z14.object({
-    type: z14.literal("action"),
-    name: z14.string(),
-    value: z14.array(
-      z14.object({
-        type: z14.literal("execute"),
-        args: z14.optional(z14.array(z14.string())),
-        code: z14.string()
+  z15.object({
+    type: z15.literal("action"),
+    name: z15.string(),
+    value: z15.array(
+      z15.object({
+        type: z15.literal("execute"),
+        args: z15.optional(z15.array(z15.string())),
+        code: z15.string()
       })
     )
   })
 ]);
-var EmbedTemplateStyleDeclRaw = z14.object({
+var EmbedTemplateStyleDeclRaw = z15.object({
   // State selector, e.g. :hover
-  state: z14.optional(z14.string()),
-  property: z14.string(),
-  value: StyleValue2
+  state: z15.optional(z15.string()),
+  property: z15.string(),
+  value: StyleValue3
 });
 var EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
-var EmbedTemplateInstance = z14.lazy(
-  () => z14.object({
-    type: z14.literal("instance"),
-    component: z14.string(),
-    label: z14.optional(z14.string()),
-    variables: z14.optional(z14.record(z14.string(), EmbedTemplateVariable)),
-    props: z14.optional(z14.array(EmbedTemplateProp)),
-    styles: z14.optional(z14.array(EmbedTemplateStyleDecl)),
+var EmbedTemplateInstance = z15.lazy(
+  () => z15.object({
+    type: z15.literal("instance"),
+    component: z15.string(),
+    label: z15.optional(z15.string()),
+    variables: z15.optional(z15.record(z15.string(), EmbedTemplateVariable)),
+    props: z15.optional(z15.array(EmbedTemplateProp)),
+    styles: z15.optional(z15.array(EmbedTemplateStyleDecl)),
     children: WsEmbedTemplate
   })
 );
-var WsEmbedTemplate = z14.lazy(
-  () => z14.array(
-    z14.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
+var WsEmbedTemplate = z15.lazy(
+  () => z15.array(
+    z15.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
   )
 );
 
 // src/schema/component-meta.ts
-import { z as z15 } from "zod";
-var WsComponentPropsMeta = z15.object({
-  props: z15.record(PropMeta),
+import { z as z16 } from "zod";
+var WsComponentPropsMeta = z16.object({
+  props: z16.record(PropMeta),
   // Props that will be always visible in properties panel.
-  initialProps: z15.array(z15.string()).optional()
+  initialProps: z16.array(z16.string()).optional()
 });
 var componentCategories = [
   "general",
@@ -741,10 +915,10 @@ var componentCategories = [
   "internal"
 ];
 var stateCategories = ["states", "component-states"];
-var ComponentState = z15.object({
-  category: z15.enum(stateCategories).optional(),
-  selector: z15.string(),
-  label: z15.string()
+var ComponentState = z16.object({
+  category: z16.enum(stateCategories).optional(),
+  selector: z16.string(),
+  label: z16.string()
 });
 var defaultStates = [
   { selector: ":hover", label: "Hover" },
@@ -753,28 +927,33 @@ var defaultStates = [
   { selector: ":focus-visible", label: "Focus Visible" },
   { selector: ":focus-within", label: "Focus Within" }
 ];
-var WsComponentMeta = z15.object({
-  category: z15.enum(componentCategories).optional(),
+var WsComponentMeta = z16.object({
+  category: z16.enum(componentCategories).optional(),
   // container - can accept other components with dnd or be edited as text
   // control - usually form controls like inputs, without children
   // embed - images, videos or other embeddable components, without children
   // rich-text-child - formatted text fragment, not listed in components list
-  type: z15.enum(["container", "control", "embed", "rich-text-child"]),
+  type: z16.enum(["container", "control", "embed", "rich-text-child"]),
+  /**
+   * a property used as textual placeholder when no content specified while in builder
+   * also signals to not insert components inside unless dropped explicitly
+   */
+  placeholder: z16.string().optional(),
   constraints: Matchers.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
   // important to automatically enumerate collections without
   // naming every item manually
-  indexWithinAncestor: z15.optional(z15.string()),
-  label: z15.optional(z15.string()),
-  description: z15.string().optional(),
-  icon: z15.string(),
-  presetStyle: z15.optional(
-    z15.record(z15.string(), z15.array(EmbedTemplateStyleDecl))
+  indexWithinAncestor: z16.optional(z16.string()),
+  label: z16.optional(z16.string()),
+  description: z16.string().optional(),
+  icon: z16.string(),
+  presetStyle: z16.optional(
+    z16.record(z16.string(), z16.array(EmbedTemplateStyleDecl))
   ),
-  states: z15.optional(z15.array(ComponentState)),
-  template: z15.optional(WsEmbedTemplate),
-  order: z15.number().optional()
+  states: z16.optional(z16.array(ComponentState)),
+  template: z16.optional(WsEmbedTemplate),
+  order: z16.number().optional()
 });
 
 // src/core-metas.ts
@@ -974,6 +1153,13 @@ import {
   parseExpressionAt
 } from "acorn";
 import { simple } from "acorn-walk";
+var SYSTEM_VARIABLE_ID = ":system";
+var systemParameter = {
+  id: SYSTEM_VARIABLE_ID,
+  scopeInstanceId: ROOT_INSTANCE_ID,
+  type: "parameter",
+  name: "system"
+};
 var lintExpression = ({
   expression,
   availableVariables = /* @__PURE__ */ new Set(),
@@ -1225,11 +1411,17 @@ var generateObjectExpression = (map) => {
   return generated;
 };
 var dataSourceVariablePrefix = "$ws$dataSource$";
-var encodeDataSourceVariable = (id) => {
+var encodeDataVariableId = (id) => {
+  if (id === SYSTEM_VARIABLE_ID) {
+    return "$ws$system";
+  }
   const encoded = id.replaceAll("-", "__DASH__");
   return `${dataSourceVariablePrefix}${encoded}`;
 };
-var decodeDataSourceVariable = (name) => {
+var decodeDataVariableId = (name) => {
+  if (name === "$ws$system") {
+    return SYSTEM_VARIABLE_ID;
+  }
   if (name.startsWith(dataSourceVariablePrefix)) {
     const encoded = name.slice(dataSourceVariablePrefix.length);
     return encoded.replaceAll("__DASH__", "-");
@@ -1246,8 +1438,11 @@ var generateExpression = ({
     expression,
     executable: true,
     replaceVariable: (identifier) => {
-      const depId = decodeDataSourceVariable(identifier);
-      const dep = depId ? dataSources.get(depId) : void 0;
+      const depId = decodeDataVariableId(identifier);
+      let dep = depId ? dataSources.get(depId) : void 0;
+      if (depId === SYSTEM_VARIABLE_ID) {
+        dep = systemParameter;
+      }
       if (dep) {
         usedDataSources?.set(dep.id, dep);
         return scope.getName(dep.id, dep.name);
@@ -1439,12 +1634,11 @@ var generateResources = ({
 `;
     }
     if (dataSource.type === "parameter") {
-      if (dataSource.id !== page.systemDataSourceId) {
-        continue;
-      }
-      const name = scope.getName(dataSource.id, dataSource.name);
-      generatedVariables += `  const ${name} = _props.system
+      if (dataSource.id === page.systemDataSourceId || dataSource.id === SYSTEM_VARIABLE_ID) {
+        const name = scope.getName(dataSource.id, dataSource.name);
+        generatedVariables += `  const ${name} = _props.system
 `;
+      }
     }
   }
   let generated = "";
@@ -1641,7 +1835,7 @@ var generatePageMeta = ({
       continue;
     }
     if (dataSource.type === "parameter") {
-      if (dataSource.id === page.systemDataSourceId) {
+      if (dataSource.id === page.systemDataSourceId || dataSource.id === SYSTEM_VARIABLE_ID) {
         const valueName = localScope.getName(dataSource.id, dataSource.name);
         generated += `  let ${valueName} = system
 `;
@@ -1685,6 +1879,182 @@ var generatePageMeta = ({
 `;
   return generated;
 };
+
+// src/css.ts
+import { kebabCase } from "change-case";
+import {
+  createRegularStyleSheet,
+  generateAtomic
+} from "@webstudio-is/css-engine";
+import { getFontFaces } from "@webstudio-is/fonts";
+var addFontRules = ({
+  sheet,
+  assets,
+  assetBaseUrl
+}) => {
+  const fontAssets = [];
+  for (const asset of assets.values()) {
+    if (asset.type === "font") {
+      fontAssets.push(asset);
+    }
+  }
+  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
+  for (const fontFace of fontFaces) {
+    sheet.addFontFaceRule(fontFace);
+  }
+};
+var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
+  if (styleValue.type === "image" && styleValue.value.type === "asset") {
+    const asset = assets.get(styleValue.value.value);
+    if (asset === void 0) {
+      return { type: "keyword", value: "none" };
+    }
+    const url = `${assetBaseUrl}${asset.name}`;
+    return {
+      type: "image",
+      value: {
+        type: "url",
+        url
+      },
+      hidden: styleValue.hidden
+    };
+  }
+};
+var normalizeClassName = (name) => kebabCase(name);
+var generateCss = ({
+  assets,
+  instances,
+  props,
+  breakpoints,
+  styles,
+  styleSourceSelections,
+  componentMetas,
+  assetBaseUrl,
+  atomic
+}) => {
+  const fontSheet = createRegularStyleSheet({ name: "ssr" });
+  const presetSheet = createRegularStyleSheet({ name: "ssr" });
+  const userSheet = createRegularStyleSheet({ name: "ssr" });
+  addFontRules({ sheet: fontSheet, assets, assetBaseUrl });
+  presetSheet.addMediaRule("presets");
+  const presetClasses = /* @__PURE__ */ new Map();
+  const scope = createScope([], normalizeClassName, "-");
+  for (const [component, meta] of componentMetas) {
+    const [_namespace, componentName] = parseComponentName(component);
+    const className = `w-${scope.getName(component, meta.label ?? componentName)}`;
+    const presetStyle = Object.entries(meta.presetStyle ?? {});
+    if (presetStyle.length > 0) {
+      presetClasses.set(component, className);
+    }
+    for (const [tag, styles2] of presetStyle) {
+      const selector = component === rootComponent ? ":root" : `${tag}.${className}`;
+      const rule = presetSheet.addNestingRule(selector);
+      for (const declaration of styles2) {
+        rule.setDeclaration({
+          breakpoint: "presets",
+          selector: declaration.state ?? "",
+          property: declaration.property,
+          value: declaration.value
+        });
+      }
+    }
+  }
+  for (const breakpoint of breakpoints.values()) {
+    userSheet.addMediaRule(breakpoint.id, breakpoint);
+  }
+  const imageValueTransformer = createImageValueTransformer(assets, {
+    assetBaseUrl
+  });
+  userSheet.setTransformer(imageValueTransformer);
+  for (const styleDecl of styles.values()) {
+    const rule = userSheet.addMixinRule(styleDecl.styleSourceId);
+    rule.setDeclaration({
+      breakpoint: styleDecl.breakpointId,
+      selector: styleDecl.state ?? "",
+      property: styleDecl.property,
+      value: styleDecl.value
+    });
+  }
+  const classes = /* @__PURE__ */ new Map();
+  const parentIdByInstanceId = /* @__PURE__ */ new Map();
+  for (const instance of instances.values()) {
+    const presetClass = presetClasses.get(instance.component);
+    if (presetClass) {
+      classes.set(instance.id, [presetClass]);
+    }
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        parentIdByInstanceId.set(child.value, instance.id);
+      }
+    }
+  }
+  const descendantSelectorByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.name === "selector" && prop.type === "string") {
+      descendantSelectorByInstanceId.set(prop.instanceId, prop.value);
+    }
+  }
+  const instanceByRule = /* @__PURE__ */ new Map();
+  for (const selection of styleSourceSelections.values()) {
+    let { instanceId } = selection;
+    const { values } = selection;
+    if (instanceId === ROOT_INSTANCE_ID) {
+      const rule2 = userSheet.addNestingRule(`:root`);
+      rule2.applyMixins(values);
+      continue;
+    }
+    let descendantSuffix = "";
+    const instance = instances.get(instanceId);
+    if (instance === void 0) {
+      continue;
+    }
+    if (instance.component === descendantComponent) {
+      const parentId = parentIdByInstanceId.get(instanceId);
+      const descendantSelector = descendantSelectorByInstanceId.get(instanceId);
+      if (parentId && descendantSelector) {
+        descendantSuffix = descendantSelector;
+        instanceId = parentId;
+      }
+    }
+    const meta = componentMetas.get(instance.component);
+    const [_namespace, shortName] = parseComponentName(instance.component);
+    const baseName = instance.label ?? meta?.label ?? shortName;
+    const className = `w-${scope.getName(instanceId, baseName)}`;
+    if (atomic === false) {
+      let classList = classes.get(instanceId);
+      if (classList === void 0) {
+        classList = [];
+        classes.set(instanceId, classList);
+      }
+      classList.push(className);
+    }
+    const rule = userSheet.addNestingRule(`.${className}`, descendantSuffix);
+    rule.applyMixins(values);
+    instanceByRule.set(rule, instanceId);
+  }
+  const fontCss = fontSheet.cssText;
+  const presetCss = presetSheet.cssText.replaceAll(
+    "@media all ",
+    "@layer presets "
+  );
+  if (atomic) {
+    const { cssText } = generateAtomic(userSheet, {
+      getKey: (rule) => instanceByRule.get(rule),
+      transformValue: imageValueTransformer,
+      classes
+    });
+    return {
+      cssText: `${fontCss}${presetCss}
+${cssText}`,
+      classes
+    };
+  }
+  return {
+    cssText: `${fontCss}${presetCss}
+${userSheet.cssText}`,
+    classes
+  };
+};
 export {
   Asset,
   Assets,
@@ -1724,11 +2094,13 @@ export {
   Prop,
   PropMeta,
   Props,
+  RANGE_UNITS,
   ROOT_FOLDER_ID,
   ROOT_INSTANCE_ID,
   Resource,
   ResourceRequest,
   Resources,
+  SYSTEM_VARIABLE_ID,
   StyleDecl,
   StyleSource,
   StyleSourceSelection,
@@ -1740,6 +2112,9 @@ export {
   WebstudioFragment,
   WsComponentMeta,
   WsEmbedTemplate,
+  addFontRules,
+  animationActionSchema,
+  animationKeyframeSchema,
   blockComponent,
   blockTemplateComponent,
   blockTemplateMeta,
@@ -1747,19 +2122,21 @@ export {
   componentCategories,
   coreMetas,
   corePropsMetas,
+  createImageValueTransformer,
   createScope,
-  decodeDataSourceVariable,
-  decodeDataSourceVariable as decodeDataVariableId,
+  decodeDataVariableId as decodeDataSourceVariable,
+  decodeDataVariableId,
   defaultStates,
   descendantComponent,
   documentTypes,
-  encodeDataSourceVariable,
-  encodeDataSourceVariable as encodeDataVariableId,
+  encodeDataVariableId as encodeDataSourceVariable,
+  encodeDataVariableId,
   executeExpression,
   findPageByIdOrPath,
   findParentFolderByChildId,
   findTreeInstanceIds,
   findTreeInstanceIdsExcludingSlotDescendants,
+  generateCss,
   generateExpression,
   generateObjectExpression,
   generatePageMeta,
@@ -1769,6 +2146,7 @@ export {
   getStaticSiteMapXml,
   getStyleDeclKey,
   initialBreakpoints,
+  insetUnitValueSchema,
   isCoreComponent,
   isLiteralExpression,
   isPathnamePattern,
@@ -1778,8 +2156,12 @@ export {
   parseComponentName,
   parseObjectExpression,
   portalComponent,
+  rangeUnitValueSchema,
   replaceFormActionsWithResources,
   rootComponent,
+  scrollAnimationSchema,
   stateCategories,
-  transpileExpression
+  systemParameter,
+  transpileExpression,
+  viewAnimationSchema
 };