@webstudio-is/sdk 0.0.0-c1d6247 → 0.0.0-ca00e2a

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(),
@@ -88,7 +88,7 @@ var HomePage = z2.object({
   ...commonPageFields,
   path: HomePagePath
 });
-var PagePath = z2.string().refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine((path) => path === "" || path.startsWith("/"), "Must start with a /").refine((path) => path.endsWith("/") === false, "Can't end with a /").refine((path) => path.includes("//") === false, "Can't contain repeating /").refine(
+var DefaultPagePage = z2.string().refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine((path) => path.endsWith("/") === false, "Can't end with a /").refine((path) => path.includes("//") === false, "Can't contain repeating /").refine(
   (path) => /^[-_a-z0-9*:?\\/.]*$/.test(path),
   "Only a-z, 0-9, -, _, /, :, ?, . and * are allowed"
 ).refine(
@@ -101,6 +101,14 @@ var PagePath = z2.string().refine((path) => path !== "", "Can't be empty").refin
   (path) => path !== "/build" && path.startsWith("/build/") === false,
   "/build prefix is reserved for the system"
 );
+var PagePath = DefaultPagePage.refine(
+  (path) => path === "" || path.startsWith("/"),
+  "Must start with a / or a full URL e.g. https://website.org"
+);
+var OldPagePath = DefaultPagePage.refine(
+  (path) => path === "" || path.startsWith("/"),
+  "Must start with a / and it must be full path e.g. /project/id"
+);
 var Page = z2.object({
   ...commonPageFields,
   path: PagePath
@@ -164,29 +172,11 @@ var Instance = z3.object({
   type: z3.literal("instance"),
   id: InstanceId,
   component: z3.string(),
+  tag: z3.string().optional(),
   label: z3.string().optional(),
   children: z3.array(InstanceChild)
 });
 var Instances = z3.map(InstanceId, Instance);
-var MatcherRelation = z3.union([
-  z3.literal("ancestor"),
-  z3.literal("parent"),
-  z3.literal("self"),
-  z3.literal("child"),
-  z3.literal("descendant")
-]);
-var MatcherOperation = z3.object({
-  $eq: z3.string().optional(),
-  $neq: z3.string().optional(),
-  $in: z3.array(z3.string()).optional(),
-  $nin: z3.array(z3.string()).optional()
-});
-var Matcher = z3.object({
-  relation: MatcherRelation,
-  component: MatcherOperation.optional(),
-  tag: MatcherOperation.optional()
-});
-var Matchers = z3.union([Matcher, z3.array(Matcher)]);
 
 // src/schema/data-sources.ts
 import { z as z4 } from "zod";
@@ -218,20 +208,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()
   })
@@ -274,98 +269,280 @@ 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()
+  }),
+  z6.object({
+    type: z6.literal("var"),
+    value: z6.string()
+  })
+]);
+var TIME_UNITS = ["ms", "s"];
+var timeUnitSchema = literalUnion(TIME_UNITS);
+var durationUnitValueSchema = z6.union([
+  z6.object({
+    type: z6.literal("unit"),
+    value: z6.number(),
+    unit: timeUnitSchema
+  }),
+  z6.object({
+    type: z6.literal("var"),
+    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
+  duration: durationUnitValueSchema.optional()
+});
+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(),
+  enabled: z6.array(z6.tuple([z6.string().describe("breakpointId"), z6.boolean()])).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
@@ -373,7 +550,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 },
@@ -382,237 +559,255 @@ 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().describe("Whether the style is from the Advanced panel")
 });
 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",
-  "netlify-functions",
-  "netlify-edge-functions",
   "ssg",
   "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 Tag = z14.object({
   ...common,
-  control: z13.literal("number"),
-  type: z13.literal("number"),
-  defaultValue: z13.number().optional()
+  control: z14.literal("tag"),
+  type: z14.literal("string"),
+  defaultValue: z14.undefined().optional(),
+  options: z14.array(z14.string())
 });
-var Range = z13.object({
+var Number = z14.object({
   ...common,
-  control: z13.literal("range"),
-  type: z13.literal("number"),
-  defaultValue: z13.number().optional()
+  control: z14.literal("number"),
+  type: z14.literal("number"),
+  defaultValue: z14.number().optional()
 });
-var Text = z13.object({
+var Range = z14.object({
   ...common,
-  control: z13.literal("text"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional(),
+  control: z14.literal("range"),
+  type: z14.literal("number"),
+  defaultValue: z14.number().optional()
+});
+var Text = z14.object({
+  ...common,
+  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 Resource2 = 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("resource"),
+  type: z14.literal("resource"),
+  defaultValue: z14.string().optional()
 });
-var CodeText = z13.object({
+var Code = z14.object({
   ...common,
-  control: z13.literal("codetext"),
-  type: z13.literal("string"),
-  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 Color = z13.object({
+var CodeText = z14.object({
   ...common,
-  control: z13.literal("color"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional()
+  control: z14.literal("codetext"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional()
 });
-var Boolean = z13.object({
+var Color = z14.object({
   ...common,
-  control: z13.literal("boolean"),
-  type: z13.literal("boolean"),
-  defaultValue: z13.boolean().optional()
+  control: z14.literal("color"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional()
 });
-var Radio = z13.object({
+var Boolean = z14.object({
   ...common,
-  control: z13.literal("radio"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional(),
-  options: z13.array(z13.string())
+  control: z14.literal("boolean"),
+  type: z14.literal("boolean"),
+  defaultValue: z14.boolean().optional()
 });
-var InlineRadio = z13.object({
+var Radio = z14.object({
   ...common,
-  control: z13.literal("inline-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 Select = z13.object({
+var InlineRadio = z14.object({
   ...common,
-  control: z13.literal("select"),
-  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 Check = z13.object({
+var Select = 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("select"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional(),
+  options: z14.array(z14.string())
 });
-var InlineCheck = z13.object({
+var Check = 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("check"),
+  type: z14.literal("string[]"),
+  defaultValue: z14.array(z14.string()).optional(),
+  options: z14.array(z14.string())
 });
-var MultiSelect = z13.object({
+var InlineCheck = 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("inline-check"),
+  type: z14.literal("string[]"),
+  defaultValue: z14.array(z14.string()).optional(),
+  options: z14.array(z14.string())
 });
-var File = z13.object({
+var MultiSelect = z14.object({
   ...common,
-  control: z13.literal("file"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional(),
+  control: z14.literal("multi-select"),
+  type: z14.literal("string[]"),
+  defaultValue: z14.array(z14.string()).optional(),
+  options: z14.array(z14.string())
+});
+var File = z14.object({
+  ...common,
+  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([
+  Tag,
   Number,
   Range,
   Text,
+  Resource2,
   Code,
   CodeText,
   Color,
@@ -628,100 +823,19 @@ 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()
-});
-var EmbedTemplateExpression = z14.object({
-  type: z14.literal("expression"),
-  value: z14.string()
-});
-var EmbedTemplateVariable = z14.object({
-  alias: z14.optional(z14.string()),
-  initialValue: z14.unknown()
-});
-var EmbedTemplateProp = z14.union([
-  z14.object({
-    type: z14.literal("number"),
-    name: z14.string(),
-    value: z14.number()
-  }),
-  z14.object({
-    type: z14.literal("string"),
-    name: z14.string(),
-    value: z14.string()
-  }),
-  z14.object({
-    type: z14.literal("boolean"),
-    name: z14.string(),
-    value: z14.boolean()
-  }),
-  z14.object({
-    type: z14.literal("string[]"),
-    name: z14.string(),
-    value: z14.array(z14.string())
-  }),
-  z14.object({
-    type: z14.literal("json"),
-    name: z14.string(),
-    value: z14.unknown()
-  }),
-  z14.object({
-    type: z14.literal("expression"),
-    name: z14.string(),
-    code: z14.string()
-  }),
-  z14.object({
-    type: z14.literal("parameter"),
-    name: z14.string(),
-    variableName: z14.string(),
-    variableAlias: z14.optional(z14.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()
-      })
-    )
-  })
-]);
-var EmbedTemplateStyleDeclRaw = z14.object({
-  // State selector, e.g. :hover
-  state: z14.optional(z14.string()),
-  property: z14.string(),
-  value: StyleValue2
-});
-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)),
-    children: WsEmbedTemplate
-  })
-);
-var WsEmbedTemplate = z14.lazy(
-  () => z14.array(
-    z14.union([EmbedTemplateInstance, EmbedTemplateText, EmbedTemplateExpression])
-  )
-);
-
 // src/schema/component-meta.ts
 import { z as z15 } from "zod";
+import { StyleValue as StyleValue3 } from "@webstudio-is/css-engine";
+var PresetStyleDecl = z15.object({
+  // State selector, e.g. :hover
+  state: z15.optional(z15.string()),
+  property: z15.string(),
+  value: StyleValue3
+});
 var WsComponentPropsMeta = z15.object({
   props: z15.record(PropMeta),
   // Props that will be always visible in properties panel.
@@ -731,6 +845,7 @@ var componentCategories = [
   "general",
   "typography",
   "media",
+  "animations",
   "data",
   "forms",
   "localization",
@@ -752,14 +867,30 @@ var defaultStates = [
   { selector: ":focus-visible", label: "Focus Visible" },
   { selector: ":focus-within", label: "Focus Within" }
 ];
+var ComponentContent = z15.string();
+var ContentModel = z15.object({
+  /*
+   * instance - accepted by any parent with "instance" in children categories
+   * none - accepted by parents with this component name in children categories
+   */
+  category: z15.union([z15.literal("instance"), z15.literal("none")]),
+  /**
+   * enforce direct children of category or components
+   */
+  children: z15.array(ComponentContent),
+  /**
+   * enforce descendants of category or components
+   */
+  descendants: z15.array(ComponentContent).optional()
+});
 var WsComponentMeta = z15.object({
   category: z15.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"]),
-  constraints: Matchers.optional(),
+  /**
+   * a property used as textual placeholder when no content specified while in builder
+   * also signals to not insert components inside unless dropped explicitly
+   */
+  placeholder: z15.string().optional(),
+  contentModel: ContentModel.optional(),
   // when this field is specified component receives
   // prop with index of same components withiin specified ancestor
   // important to automatically enumerate collections without
@@ -768,11 +899,8 @@ var WsComponentMeta = z15.object({
   label: z15.optional(z15.string()),
   description: z15.string().optional(),
   icon: z15.string(),
-  presetStyle: z15.optional(
-    z15.record(z15.string(), z15.array(EmbedTemplateStyleDecl))
-  ),
+  presetStyle: z15.optional(z15.record(z15.string(), z15.array(PresetStyleDecl))),
   states: z15.optional(z15.array(ComponentState)),
-  template: z15.optional(WsEmbedTemplate),
   order: z15.number().optional()
 });
 
@@ -782,24 +910,25 @@ import {
   ListViewIcon,
   PaintBrushIcon,
   SettingsIcon,
-  AddTemplateInstanceIcon
+  AddTemplateInstanceIcon,
+  HtmlElementIcon
 } from "@webstudio-is/icons/svg";
 
 // src/__generated__/normalize.css.ts
 var html = [
   { property: "display", value: { type: "keyword", value: "grid" } },
-  { property: "minHeight", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "min-height", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "fontFamily",
+    property: "font-family",
     value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
   },
-  { property: "fontSize", value: { type: "unit", unit: "px", value: 16 } },
+  { property: "font-size", value: { type: "unit", unit: "px", value: 16 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.2 }
   },
   {
-    property: "whiteSpaceCollapse",
+    property: "white-space-collapse",
     value: { type: "keyword", value: "preserve" }
   }
 ];
@@ -807,7 +936,6 @@ var html = [
 // src/core-metas.ts
 var rootComponent = "ws:root";
 var rootMeta = {
-  type: "container",
   label: "Global Root",
   icon: SettingsIcon,
   presetStyle: {
@@ -817,12 +945,23 @@ var rootMeta = {
 var rootPropsMeta = {
   props: {}
 };
+var elementComponent = "ws:element";
+var elementMeta = {
+  label: "Element",
+  icon: HtmlElementIcon
+};
+var elementPropsMeta = {
+  props: {}
+};
 var portalComponent = "Slot";
 var collectionComponent = "ws:collection";
 var collectionMeta = {
-  type: "container",
   label: "Collection",
-  icon: ListViewIcon
+  icon: ListViewIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"]
+  }
 };
 var collectionPropsMeta = {
   props: {
@@ -836,15 +975,14 @@ var collectionPropsMeta = {
 };
 var descendantComponent = "ws:descendant";
 var descendantMeta = {
-  type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
+  contentModel: {
+    category: "none",
+    children: []
+  },
   // @todo infer possible presets
-  presetStyle: {},
-  constraints: {
-    relation: "parent",
-    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
-  }
+  presetStyle: {}
 };
 var descendantPropsMeta = {
   props: {
@@ -877,36 +1015,29 @@ var descendantPropsMeta = {
 var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
-  type: "container",
   icon: AddTemplateInstanceIcon,
-  constraints: {
-    relation: "parent",
-    component: { $eq: blockComponent }
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
 };
 var blockTemplatePropsMeta = {
   props: {}
 };
 var blockMeta = {
-  type: "container",
   label: "Content Block",
   icon: ContentBlockIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $nin: [collectionComponent, blockComponent] }
-    },
-    {
-      relation: "child",
-      component: { $eq: blockTemplateComponent }
-    }
-  ]
+  contentModel: {
+    category: "instance",
+    children: [blockTemplateComponent, "instance"]
+  }
 };
 var blockPropsMeta = {
   props: {}
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
@@ -914,12 +1045,14 @@ var coreMetas = {
 };
 var corePropsMetas = {
   [rootComponent]: rootPropsMeta,
+  [elementComponent]: elementPropsMeta,
   [collectionComponent]: collectionPropsMeta,
   [descendantComponent]: descendantPropsMeta,
   [blockComponent]: blockPropsMeta,
   [blockTemplateComponent]: blockTemplatePropsMeta
 };
-var isCoreComponent = (component) => component === rootComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
+var isCoreComponent = (component) => component === rootComponent || component === elementComponent || component === collectionComponent || component === descendantComponent || component === blockComponent || component === blockTemplateComponent;
+var isComponentDetachable = (component) => component !== rootComponent && component !== blockTemplateComponent && component !== descendantComponent;
 
 // src/instances-utils.ts
 var ROOT_INSTANCE_ID = ":root";
@@ -966,6 +1099,51 @@ var parseComponentName = (componentName) => {
   }
   return [namespace, name];
 };
+var getIndexesWithinAncestors = (metas, instances, rootIds) => {
+  const ancestors = /* @__PURE__ */ new Set();
+  for (const meta of metas.values()) {
+    if (meta.indexWithinAncestor !== void 0) {
+      ancestors.add(meta.indexWithinAncestor);
+    }
+  }
+  const indexes = /* @__PURE__ */ new Map();
+  const traverseInstances2 = (instances2, instanceId, latestIndexes2 = /* @__PURE__ */ new Map()) => {
+    const instance = instances2.get(instanceId);
+    if (instance === void 0) {
+      return;
+    }
+    const meta = metas.get(instance.component);
+    if (ancestors.has(instance.component)) {
+      latestIndexes2 = new Map(latestIndexes2);
+      latestIndexes2.set(instance.component, /* @__PURE__ */ new Map());
+    }
+    if (instance.component === blockTemplateComponent) {
+      latestIndexes2 = new Map(latestIndexes2);
+      for (const key of latestIndexes2.keys()) {
+        latestIndexes2.set(key, /* @__PURE__ */ new Map());
+      }
+    }
+    if (meta?.indexWithinAncestor !== void 0) {
+      const ancestorIndexes = latestIndexes2.get(meta.indexWithinAncestor);
+      if (ancestorIndexes) {
+        let index = ancestorIndexes.get(instance.component) ?? -1;
+        index += 1;
+        ancestorIndexes.set(instance.component, index);
+        indexes.set(instance.id, index);
+      }
+    }
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        traverseInstances2(instances2, child.value, latestIndexes2);
+      }
+    }
+  };
+  const latestIndexes = /* @__PURE__ */ new Map();
+  for (const instanceId of rootIds) {
+    traverseInstances2(instances, instanceId, latestIndexes);
+  }
+  return indexes;
+};
 
 // src/expression.ts
 import {
@@ -973,6 +1151,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(),
@@ -1083,6 +1268,9 @@ var lintExpression = ({
   return diagnostics;
 };
 var isLiteralNode = (node) => {
+  if (node.type === "Identifier" && node.name === "undefined") {
+    return true;
+  }
   if (node.type === "Literal") {
     return true;
   }
@@ -1224,11 +1412,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__", "-");
@@ -1245,8 +1439,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);
@@ -1438,12 +1635,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 = "";
@@ -1532,7 +1728,9 @@ var replaceFormActionsWithResources = ({
         name: "action",
         method: getMethod(method),
         url: JSON.stringify(action),
-        headers: []
+        headers: [
+          { name: "Content-Type", value: JSON.stringify("application/json") }
+        ]
       });
     }
   }
@@ -1640,7 +1838,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
 `;
@@ -1684,6 +1882,208 @@ 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, "-");
+  const tagsByComponent = /* @__PURE__ */ new Map();
+  tagsByComponent.set(rootComponent, /* @__PURE__ */ new Set(["html"]));
+  const tagByInstanceId = /* @__PURE__ */ new Map();
+  for (const prop of props.values()) {
+    if (prop.type === "string" && prop.name === "tag") {
+      tagByInstanceId.set(prop.instanceId, prop.value);
+    }
+  }
+  for (const instance of instances.values()) {
+    const propTag = tagByInstanceId.get(instance.id);
+    const meta = componentMetas.get(instance.component);
+    const metaTag = Object.keys(meta?.presetStyle ?? {}).at(0);
+    let componentTags = tagsByComponent.get(instance.component);
+    if (componentTags === void 0) {
+      componentTags = /* @__PURE__ */ new Set();
+      tagsByComponent.set(instance.component, componentTags);
+    }
+    const tag = instance.tag ?? propTag ?? metaTag;
+    if (tag) {
+      componentTags.add(tag);
+    }
+  }
+  for (const [component, meta] of componentMetas) {
+    const componentTags = tagsByComponent.get(component);
+    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) {
+      if (!componentTags?.has(tag)) {
+        continue;
+      }
+      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,
@@ -1691,14 +2091,11 @@ export {
   Breakpoints,
   CompilerSettings,
   ComponentState,
+  ContentModel,
   DataSource,
   DataSourceVariableValue,
   DataSources,
   Deployment,
-  EmbedTemplateInstance,
-  EmbedTemplateProp,
-  EmbedTemplateStyleDecl,
-  EmbedTemplateVariable,
   ExpressionChild,
   Folder,
   FolderName,
@@ -1710,24 +2107,24 @@ export {
   Instance,
   InstanceChild,
   Instances,
-  Matcher,
-  MatcherOperation,
-  MatcherRelation,
-  Matchers,
+  OldPagePath,
   PageName,
   PagePath,
   PageRedirect,
   PageTitle,
   Pages,
+  PresetStyleDecl,
   ProjectNewRedirectPath,
   Prop,
   PropMeta,
   Props,
+  RANGE_UNITS,
   ROOT_FOLDER_ID,
   ROOT_INSTANCE_ID,
   Resource,
   ResourceRequest,
   Resources,
+  SYSTEM_VARIABLE_ID,
   StyleDecl,
   StyleSource,
   StyleSourceSelection,
@@ -1738,7 +2135,9 @@ export {
   TextChild,
   WebstudioFragment,
   WsComponentMeta,
-  WsEmbedTemplate,
+  addFontRules,
+  animationActionSchema,
+  animationKeyframeSchema,
   blockComponent,
   blockTemplateComponent,
   blockTemplateMeta,
@@ -1746,28 +2145,35 @@ export {
   componentCategories,
   coreMetas,
   corePropsMetas,
+  createImageValueTransformer,
   createScope,
-  decodeDataSourceVariable,
-  decodeDataSourceVariable as decodeDataVariableId,
+  decodeDataVariableId as decodeDataSourceVariable,
+  decodeDataVariableId,
   defaultStates,
   descendantComponent,
   documentTypes,
-  encodeDataSourceVariable,
-  encodeDataSourceVariable as encodeDataVariableId,
+  durationUnitValueSchema,
+  elementComponent,
+  encodeDataVariableId as encodeDataSourceVariable,
+  encodeDataVariableId,
   executeExpression,
   findPageByIdOrPath,
   findParentFolderByChildId,
   findTreeInstanceIds,
   findTreeInstanceIdsExcludingSlotDescendants,
+  generateCss,
   generateExpression,
   generateObjectExpression,
   generatePageMeta,
   generateResources,
   getExpressionIdentifiers,
+  getIndexesWithinAncestors,
   getPagePath,
   getStaticSiteMapXml,
   getStyleDeclKey,
   initialBreakpoints,
+  insetUnitValueSchema,
+  isComponentDetachable,
   isCoreComponent,
   isLiteralExpression,
   isPathnamePattern,
@@ -1777,8 +2183,12 @@ export {
   parseComponentName,
   parseObjectExpression,
   portalComponent,
+  rangeUnitValueSchema,
   replaceFormActionsWithResources,
   rootComponent,
+  scrollAnimationSchema,
   stateCategories,
-  transpileExpression
+  systemParameter,
+  transpileExpression,
+  viewAnimationSchema
 };