@webstudio-is/sdk 0.0.0-5844e28 → 0.0.0-7cb4145

package/lib/index.js

@@ -1,3 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
 // src/schema/assets.ts
 import { z } from "zod";
 import { FontFormat, FontMeta } from "@webstudio-is/fonts";
@@ -57,7 +63,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,10 +94,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 / or a full URL e.g. https://website.org"
-).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(
@@ -104,6 +107,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
@@ -167,29 +178,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";
@@ -221,20 +214,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 +275,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
@@ -376,7 +556,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,236 +565,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",
-  "vercel-legacy",
   "netlify",
   "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: z14.literal("tag"),
+  type: z14.literal("string"),
+  defaultValue: z14.undefined().optional(),
+  options: z14.array(z14.string())
+});
+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 Resource2 = z14.object({
+  ...common,
+  control: z14.literal("resource"),
+  type: z14.literal("resource"),
+  defaultValue: z14.string().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 = z13.object({
+var Action = z14.object({
   ...common,
-  control: z13.literal("action"),
-  type: z13.literal("action"),
-  defaultValue: z13.undefined().optional()
+  control: z14.literal("action"),
+  type: z14.literal("action"),
+  defaultValue: z14.undefined().optional()
 });
-var TextContent = z13.object({
+var TextContent = z14.object({
   ...common,
-  control: z13.literal("textContent"),
-  type: z13.literal("string"),
-  defaultValue: z13.string().optional()
+  control: z14.literal("textContent"),
+  type: z14.literal("string"),
+  defaultValue: z14.string().optional()
 });
-var PropMeta = z13.union([
+var AnimationAction = z14.object({
+  ...common,
+  control: z14.literal("animationAction"),
+  type: z14.literal("animationAction"),
+  defaultValue: z14.undefined().optional()
+});
+var PropMeta = z14.union([
+  Tag,
   Number,
   Range,
   Text,
+  Resource2,
   Code,
   CodeText,
   Color,
@@ -630,109 +829,24 @@ 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";
-var WsComponentPropsMeta = z15.object({
-  props: z15.record(PropMeta),
-  // Props that will be always visible in properties panel.
-  initialProps: z15.array(z15.string()).optional()
+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 componentCategories = [
   "general",
   "typography",
   "media",
+  "animations",
   "data",
   "forms",
   "localization",
@@ -741,27 +855,29 @@ var componentCategories = [
   "hidden",
   "internal"
 ];
-var stateCategories = ["states", "component-states"];
 var ComponentState = z15.object({
-  category: z15.enum(stateCategories).optional(),
   selector: z15.string(),
   label: z15.string()
 });
-var defaultStates = [
-  { selector: ":hover", label: "Hover" },
-  { selector: ":active", label: "Active" },
-  { selector: ":focus", label: "Focus" },
-  { 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(),
+  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
@@ -769,13 +885,13 @@ var WsComponentMeta = z15.object({
   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))
-  ),
+  icon: z15.string().optional(),
+  presetStyle: z15.optional(z15.record(z15.string(), z15.array(PresetStyleDecl))),
   states: z15.optional(z15.array(ComponentState)),
-  template: z15.optional(WsEmbedTemplate),
-  order: z15.number().optional()
+  order: z15.number().optional(),
+  // properties and html attributes that will be always visible in properties panel
+  initialProps: z15.array(z15.string()).optional(),
+  props: z15.record(PropMeta).optional()
 });
 
 // src/core-metas.ts
@@ -788,67 +904,763 @@ import {
 } from "@webstudio-is/icons/svg";
 
 // src/__generated__/normalize.css.ts
+var normalize_css_exports = {};
+__export(normalize_css_exports, {
+  a: () => a,
+  address: () => address,
+  article: () => article,
+  aside: () => aside,
+  b: () => b,
+  body: () => body,
+  button: () => button,
+  checkbox: () => checkbox,
+  code: () => code,
+  div: () => div,
+  figure: () => figure,
+  footer: () => footer,
+  form: () => form,
+  h1: () => h1,
+  h2: () => h2,
+  h3: () => h3,
+  h4: () => h4,
+  h5: () => h5,
+  h6: () => h6,
+  header: () => header,
+  hr: () => hr,
+  html: () => html,
+  i: () => i,
+  img: () => img,
+  input: () => input,
+  kbd: () => kbd,
+  label: () => label,
+  legend: () => legend,
+  li: () => li,
+  main: () => main,
+  nav: () => nav,
+  ol: () => ol,
+  optgroup: () => optgroup,
+  p: () => p,
+  pre: () => pre,
+  progress: () => progress,
+  radio: () => radio,
+  samp: () => samp,
+  section: () => section,
+  select: () => select,
+  small: () => small,
+  span: () => span,
+  strong: () => strong,
+  sub: () => sub,
+  summary: () => summary,
+  sup: () => sup,
+  table: () => table,
+  textarea: () => textarea,
+  time: () => time,
+  ul: () => ul
+});
+var div = [
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "outline-width", value: { type: "unit", unit: "px", value: 1 } }
+];
+var address = div;
+var article = div;
+var aside = div;
+var figure = div;
+var footer = div;
+var header = div;
+var main = div;
+var nav = div;
+var section = div;
+var form = div;
+var label = div;
+var time = div;
+var h1 = div;
+var h2 = div;
+var h3 = div;
+var h4 = div;
+var h5 = div;
+var h6 = div;
+var i = div;
+var img = div;
+var a = div;
+var li = div;
+var ul = div;
+var ol = div;
+var p = div;
+var span = div;
 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" }
   }
 ];
+var body = [
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "-webkit-font-smoothing",
+    value: { type: "keyword", value: "antialiased" }
+  },
+  {
+    property: "-moz-osx-font-smoothing",
+    value: { type: "keyword", value: "grayscale" }
+  }
+];
+var hr = [
+  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "color", value: { type: "keyword", value: "inherit" } }
+];
+var b = [
+  {
+    property: "font-weight",
+    value: { type: "unit", unit: "number", value: 700 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var strong = b;
+var code = [
+  {
+    property: "font-family",
+    value: {
+      type: "fontFamily",
+      value: [
+        "ui-monospace",
+        "SFMono-Regular",
+        "Consolas",
+        "Liberation Mono",
+        "Menlo",
+        "monospace"
+      ]
+    }
+  },
+  { property: "font-size", value: { type: "unit", unit: "em", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var kbd = code;
+var samp = code;
+var pre = code;
+var small = [
+  { property: "font-size", value: { type: "unit", unit: "%", value: 80 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var sub = [
+  { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "position", value: { type: "keyword", value: "relative" } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "bottom", value: { type: "unit", unit: "em", value: -0.25 } }
+];
+var sup = [
+  { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "position", value: { type: "keyword", value: "relative" } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "top", value: { type: "unit", unit: "em", value: -0.5 } }
+];
+var table = [
+  {
+    property: "text-indent",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-top-color",
+    value: { type: "keyword", value: "inherit" }
+  },
+  {
+    property: "border-right-color",
+    value: { type: "keyword", value: "inherit" }
+  },
+  {
+    property: "border-bottom-color",
+    value: { type: "keyword", value: "inherit" }
+  },
+  {
+    property: "border-left-color",
+    value: { type: "keyword", value: "inherit" }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } }
+];
+var input = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "solid" } },
+  {
+    property: "border-right-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "solid" } }
+];
+var textarea = input;
+var optgroup = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var radio = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "none" } },
+  { property: "border-right-style", value: { type: "keyword", value: "none" } },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "none" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "none" } }
+];
+var checkbox = radio;
+var button = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
+  },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "solid" } },
+  {
+    property: "border-right-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "solid" }
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "solid" } },
+  { property: "text-transform", value: { type: "keyword", value: "none" } }
+];
+var select = button;
+var legend = [
+  {
+    property: "padding-top",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "padding-right",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "padding-bottom",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  {
+    property: "padding-left",
+    value: { type: "unit", unit: "number", value: 0 }
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var progress = [
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+var summary = [
+  { property: "display", value: { type: "keyword", value: "list-item" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-right-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 }
+  }
+];
+
+// src/runtime.ts
+var tagProperty = "data-ws-tag";
+
+// src/__generated__/tags.ts
+var tags = [
+  "div",
+  "span",
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "meter",
+  "nav",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "search",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+];
 
 // src/core-metas.ts
 var rootComponent = "ws:root";
 var rootMeta = {
-  type: "container",
   label: "Global Root",
   icon: SettingsIcon,
   presetStyle: {
     html
   }
 };
-var rootPropsMeta = {
-  props: {}
+var elementComponent = "ws:element";
+var elementMeta = {
+  label: "Element",
+  // convert [object Module] to [object Object] to enable structured cloning
+  presetStyle: { ...normalize_css_exports },
+  initialProps: [tagProperty, "id", "class"],
+  props: {
+    [tagProperty]: {
+      type: "string",
+      control: "tag",
+      required: true,
+      options: tags
+    }
+  }
 };
 var portalComponent = "Slot";
 var collectionComponent = "ws:collection";
 var collectionMeta = {
-  type: "container",
   label: "Collection",
-  icon: ListViewIcon
-};
-var collectionPropsMeta = {
+  icon: ListViewIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"]
+  },
+  initialProps: ["data"],
   props: {
     data: {
       required: true,
       control: "json",
       type: "json"
     }
-  },
-  initialProps: ["data"]
+  }
 };
 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"] }
-  }
-};
-var descendantPropsMeta = {
+  initialProps: ["selector"],
   props: {
     selector: {
       required: true,
@@ -873,55 +1685,35 @@ var descendantPropsMeta = {
         " hr"
       ]
     }
-  },
-  initialProps: ["selector"]
+  }
 };
 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 }
-    }
-  ]
-};
-var blockPropsMeta = {
-  props: {}
+  contentModel: {
+    category: "instance",
+    children: [blockTemplateComponent, "instance"]
+  }
 };
 var coreMetas = {
   [rootComponent]: rootMeta,
+  [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
   [blockTemplateComponent]: blockTemplateMeta
 };
-var corePropsMetas = {
-  [rootComponent]: rootPropsMeta,
-  [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";
@@ -968,6 +1760,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 {
@@ -975,6 +1812,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(),
@@ -1085,6 +1929,9 @@ var lintExpression = ({
   return diagnostics;
 };
 var isLiteralNode = (node) => {
+  if (node.type === "Identifier" && node.name === "undefined") {
+    return true;
+  }
   if (node.type === "Literal") {
     return true;
   }
@@ -1226,11 +2073,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__", "-");
@@ -1247,8 +2100,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);
@@ -1405,26 +2261,26 @@ var generateResources = ({
 `;
     generatedRequest += `    headers: [
 `;
-    for (const header of resource.headers) {
+    for (const header2 of resource.headers) {
       const value = generateExpression({
-        expression: header.value,
+        expression: header2.value,
         dataSources,
         usedDataSources,
         scope
       });
-      generatedRequest += `      { name: "${header.name}", value: ${value} },
+      generatedRequest += `      { name: "${header2.name}", value: ${value} },
 `;
     }
     generatedRequest += `    ],
 `;
     if (resource.body !== void 0 && resource.body.length > 0) {
-      const body = generateExpression({
+      const body2 = generateExpression({
         expression: resource.body,
         dataSources,
         usedDataSources,
         scope
       });
-      generatedRequest += `    body: ${body},
+      generatedRequest += `    body: ${body2},
 `;
     }
     generatedRequest += `  }
@@ -1440,12 +2296,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 = "";
@@ -1534,7 +2389,9 @@ var replaceFormActionsWithResources = ({
         name: "action",
         method: getMethod(method),
         url: JSON.stringify(action),
-        headers: []
+        headers: [
+          { name: "Content-Type", value: JSON.stringify("application/json") }
+        ]
       });
     }
   }
@@ -1642,7 +2499,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
 `;
@@ -1686,6 +2543,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,
@@ -1693,14 +2752,11 @@ export {
   Breakpoints,
   CompilerSettings,
   ComponentState,
+  ContentModel,
   DataSource,
   DataSourceVariableValue,
   DataSources,
   Deployment,
-  EmbedTemplateInstance,
-  EmbedTemplateProp,
-  EmbedTemplateStyleDecl,
-  EmbedTemplateVariable,
   ExpressionChild,
   Folder,
   FolderName,
@@ -1712,24 +2768,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,
@@ -1740,36 +2796,43 @@ export {
   TextChild,
   WebstudioFragment,
   WsComponentMeta,
-  WsEmbedTemplate,
+  addFontRules,
+  animationActionSchema,
+  animationKeyframeSchema,
   blockComponent,
   blockTemplateComponent,
   blockTemplateMeta,
   collectionComponent,
   componentCategories,
   coreMetas,
-  corePropsMetas,
+  createImageValueTransformer,
   createScope,
-  decodeDataSourceVariable,
-  decodeDataSourceVariable as decodeDataVariableId,
-  defaultStates,
+  decodeDataVariableId as decodeDataSourceVariable,
+  decodeDataVariableId,
   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,
@@ -1779,8 +2842,12 @@ export {
   parseComponentName,
   parseObjectExpression,
   portalComponent,
+  rangeUnitValueSchema,
   replaceFormActionsWithResources,
   rootComponent,
-  stateCategories,
-  transpileExpression
+  scrollAnimationSchema,
+  systemParameter,
+  tags,
+  transpileExpression,
+  viewAnimationSchema
 };