webstudio 0.217.0 → 0.219.0

package/lib/cli.js

@@ -15,10 +15,10 @@ import { hideBin } from "yargs/helpers";
 import { join, dirname, normalize, basename, relative } from "node:path";
 import envPaths from "env-paths";
 import { z } from "zod";
-import { access, constants, writeFile, mkdir, readFile, rm, rename, readdir, cp } from "node:fs/promises";
-import { text, isCancel, cancel, log, spinner, confirm, select as select$1 } from "@clack/prompts";
+import { access, constants, writeFile, mkdir, readFile, rm, readdir, cp, rename } from "node:fs/promises";
+import { text, isCancel, cancel, log, spinner, confirm, select as select$2 } from "@clack/prompts";
 import pc from "picocolors";
-import { createWriteStream, existsSync } from "node:fs";
+import { existsSync, createWriteStream } from "node:fs";
 import { pipeline } from "node:stream/promises";
 import { pathToFileURL, fileURLToPath } from "node:url";
 import pLimit from "p-limit";
@@ -105,6 +105,11 @@ const INTERNAL_TEMPLATES = [
     value: "cloudflare",
     label: "Cloudflare",
     expand: ["defaults", "cloudflare"]
+  },
+  {
+    value: "cloudflare-new",
+    label: "Cloudflare (new)",
+    expand: ["react-router", "react-router-cloudflare"]
   }
 ];
 const isFileExists = async (filePath) => {
@@ -1656,7 +1661,6 @@ var FormTextFieldIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" vie
 var FormIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.184 5.5h.731a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.085a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099ZM13.184 10.5h.732a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75H2.084a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h11.099Z"/><path fill="currentColor" d="M6.613 14.5h.222a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-5.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H6.613Z"/></svg>`;
 var HeaderIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2ZM4 4h8"/></svg>`;
 var HeadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 8h8M4 13.333V2.667M12 13.333V2.667"/></svg>`;
-var HtmlElementIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.556 2H3.444C2.647 2 2 2.647 2 3.444v10.112C2 14.353 2.647 15 3.444 15h10.112c.797 0 1.444-.647 1.444-1.444V3.444C15 2.647 14.353 2 13.556 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M10.5 10 12 8.5 10.5 7M6 7 4.5 8.5 6 10m3.188-4.5-1.876 6"/></svg>`;
 var ImageIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 7.333a1.333 1.333 0 1 0 0-2.666 1.333 1.333 0 0 0 0 2.666ZM14 10l-2.057-2.057a1.333 1.333 0 0 0-1.886 0L4 14"/></svg>`;
 var ItemIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2 6h.007M5.333 10H14M5.333 6H14"/></svg>`;
 var LabelIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 2H3.333C2.597 2 2 2.597 2 3.333v9.334C2 13.403 2.597 14 3.333 14h9.334c.736 0 1.333-.597 1.333-1.333V3.333C14 2.597 13.403 2 12.667 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.476 11.074V4.926m0 6.148h3.77v-.615m-3.77.615h-.722m.722-6.148h.632m-.632 0h-.722"/></svg>`;
@@ -1696,6 +1700,11 @@ var WindowInfoIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBo
 var WindowTitleIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.667 4H3.333C2.597 4 2 4.497 2 5.111v7.778C2 13.503 2.597 14 3.333 14h9.334c.736 0 1.333-.498 1.333-1.111V5.11C14 4.497 13.403 4 12.667 4ZM4 2h8"/></svg>`;
 var XmlIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.163 9.02v-4L8.83 1.686h-5.5A1.333 1.333 0 0 0 1.997 3.02v6"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.164 2.186v1.667a1.333 1.333 0 0 0 1.333 1.333h2.667M1.997 11.314l3 3M4.997 11.314l-3 3M6.997 14.314v-3l1.5 1.523 1.5-1.523v3M12.163 11.314v3h1.84"/></svg>`;
 var YoutubeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 16 16" width="100%" height="100%" style="display: block;"><path d="M.892 11.528a18.047 18.047 0 0 1 0-7.482A1.496 1.496 0 0 1 1.94 3a37.082 37.082 0 0 1 12.12 0 1.497 1.497 0 0 1 1.048 1.047 18.046 18.046 0 0 1 0 7.482 1.497 1.497 0 0 1-1.048 1.048 37.077 37.077 0 0 1-12.12 0 1.497 1.497 0 0 1-1.048-1.048Z"/><path d="m6.5 10.3 4-2.4-4-2.4v4.8Z"/></svg>`;
+var __defProp2 = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp2(target, name2, { get: all[name2], enumerable: true });
+};
 var AssetId = z.string();
 var baseAsset = {
   id: AssetId,
@@ -2506,57 +2515,641 @@ var defaultStates = [
   { selector: ":focus-visible", label: "Focus Visible" },
   { selector: ":focus-within", label: "Focus Within" }
 ];
-var ComponentContent = z.string();
-var ContentModel = z.object({
-  /*
-   * instance - accepted by any parent with "instance" in children categories
-   * none - accepted by parents with this component name in children categories
-   */
-  category: z.union([z.literal("instance"), z.literal("none")]),
-  /**
-   * enforce direct children of category or components
-   */
-  children: z.array(ComponentContent),
-  /**
-   * enforce descendants of category or components
-   */
-  descendants: z.array(ComponentContent).optional()
-});
-z.object({
-  category: z.enum(componentCategories).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: z.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
-  // naming every item manually
-  indexWithinAncestor: z.optional(z.string()),
-  label: z.optional(z.string()),
-  description: z.string().optional(),
-  icon: z.string(),
-  presetStyle: z.optional(z.record(z.string(), z.array(PresetStyleDecl))),
-  states: z.optional(z.array(ComponentState)),
-  order: z.number().optional()
-});
-var html = [
-  { property: "display", value: { type: "keyword", value: "grid" } },
-  { property: "min-height", value: { type: "unit", unit: "%", value: 100 } },
+var ComponentContent = z.string();
+var ContentModel = z.object({
+  /*
+   * instance - accepted by any parent with "instance" in children categories
+   * none - accepted by parents with this component name in children categories
+   */
+  category: z.union([z.literal("instance"), z.literal("none")]),
+  /**
+   * enforce direct children of category or components
+   */
+  children: z.array(ComponentContent),
+  /**
+   * enforce descendants of category or components
+   */
+  descendants: z.array(ComponentContent).optional()
+});
+z.object({
+  category: z.enum(componentCategories).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: z.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
+  // naming every item manually
+  indexWithinAncestor: z.optional(z.string()),
+  label: z.optional(z.string()),
+  description: z.string().optional(),
+  icon: z.string(),
+  presetStyle: z.optional(z.record(z.string(), z.array(PresetStyleDecl))),
+  states: z.optional(z.array(ComponentState)),
+  order: z.number().optional()
+});
+var normalize_css_exports = {};
+__export(normalize_css_exports, {
+  a: () => a$b,
+  address: () => address$1,
+  article: () => article$1,
+  aside: () => aside$1,
+  b: () => b$8,
+  body: () => body$1,
+  button: () => button$1,
+  checkbox: () => checkbox$1,
+  code: () => code$1,
+  div: () => div$1,
+  figure: () => figure$1,
+  footer: () => footer$1,
+  form: () => form$1,
+  h1: () => h1$1,
+  h2: () => h2$1,
+  h3: () => h3$1,
+  h4: () => h4$1,
+  h5: () => h5$1,
+  h6: () => h6$1,
+  header: () => header$1,
+  hr: () => hr$1,
+  html: () => html,
+  i: () => i$8,
+  img: () => img$1,
+  input: () => input$1,
+  kbd: () => kbd,
+  label: () => label$1,
+  legend: () => legend,
+  li: () => li$1,
+  main: () => main$2,
+  nav: () => nav$1,
+  ol: () => ol$1,
+  optgroup: () => optgroup,
+  p: () => p$b,
+  pre: () => pre,
+  progress: () => progress,
+  radio: () => radio$1,
+  samp: () => samp,
+  section: () => section$1,
+  select: () => select$1,
+  small: () => small,
+  span: () => span$1,
+  strong: () => strong,
+  sub: () => sub$1,
+  summary: () => summary,
+  sup: () => sup$1,
+  table: () => table,
+  textarea: () => textarea$1,
+  time: () => time$1,
+  ul: () => ul$1
+});
+var div$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 }
+  },
+  { property: "outline-width", value: { type: "unit", unit: "px", value: 1 } }
+];
+var address$1 = div$1;
+var article$1 = div$1;
+var aside$1 = div$1;
+var figure$1 = div$1;
+var footer$1 = div$1;
+var header$1 = div$1;
+var main$2 = div$1;
+var nav$1 = div$1;
+var section$1 = div$1;
+var form$1 = div$1;
+var label$1 = div$1;
+var time$1 = div$1;
+var h1$1 = div$1;
+var h2$1 = div$1;
+var h3$1 = div$1;
+var h4$1 = div$1;
+var h5$1 = div$1;
+var h6$1 = div$1;
+var i$8 = div$1;
+var img$1 = div$1;
+var a$b = div$1;
+var li$1 = div$1;
+var ul$1 = div$1;
+var ol$1 = div$1;
+var p$b = div$1;
+var span$1 = div$1;
+var html = [
+  { property: "display", value: { type: "keyword", value: "grid" } },
+  { property: "min-height", value: { type: "unit", unit: "%", value: 100 } },
+  {
+    property: "font-family",
+    value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
+  },
+  { property: "font-size", value: { type: "unit", unit: "px", value: 16 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.2 }
+  },
+  {
+    property: "white-space-collapse",
+    value: { type: "keyword", value: "preserve" }
+  }
+];
+var body$1 = [
+  { 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 hr$1 = [
+  { property: "height", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "color", value: { type: "keyword", value: "inherit" } },
+  { 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 b$8 = [
+  {
+    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$8;
+var code$1 = [
+  {
+    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$1;
+var samp = code$1;
+var pre = code$1;
+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$1 = [
+  { 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$1 = [
+  { 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$1 = [
+  { 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$1 = input$1;
+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$1 = [
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "font-family",
-    value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] }
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 1.15 }
   },
-  { property: "font-size", value: { type: "unit", unit: "px", value: 16 } },
+  { 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$1 = radio$1;
+var button$1 = [
+  { 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.2 }
+    value: { type: "unit", unit: "number", value: 1.15 }
   },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
   {
-    property: "white-space-collapse",
-    value: { type: "keyword", value: "preserve" }
+    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$1 = button$1;
+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 }
   }
 ];
 var rootComponent = "ws:root";
@@ -2570,7 +3163,9 @@ var rootMeta = {
 var elementComponent = "ws:element";
 var elementMeta = {
   label: "Element",
-  icon: HtmlElementIcon
+  icon: BoxIcon,
+  // convert [object Module] to [object Object] to enable structured cloning
+  presetStyle: { ...normalize_css_exports }
 };
 var collectionComponent = "ws:collection";
 var collectionMeta = {
@@ -3489,16 +4084,6 @@ var normalizeProps = ({
         type: "string",
         value: `${assetBaseUrl}${asset.name}`
       });
-      if (source === "canvas") {
-        newProps.push({
-          id: `${prop.instanceId}-${asset.id}-assetId`,
-          name: "$webstudio$canvasOnly$assetId",
-          required: false,
-          instanceId: prop.instanceId,
-          type: "string",
-          value: asset.id
-        });
-      }
       continue;
     }
     if (prop.type === "page") {
@@ -3560,501 +4145,55 @@ var isAttributeNameSafe = (attributeName) => {
   return false;
 };
 var standardAttributesToReactProps = {
-  // HTML
-  accept: "accept",
-  acceptcharset: "acceptCharset",
   "accept-charset": "acceptCharset",
   accesskey: "accessKey",
-  action: "action",
   allowfullscreen: "allowFullScreen",
-  alt: "alt",
-  as: "as",
-  async: "async",
   autocapitalize: "autoCapitalize",
   autocomplete: "autoComplete",
   autocorrect: "autoCorrect",
   autofocus: "autoFocus",
   autoplay: "autoPlay",
-  autosave: "autoSave",
-  capture: "capture",
-  cellpadding: "cellPadding",
-  cellspacing: "cellSpacing",
-  challenge: "challenge",
   charset: "charSet",
-  checked: "checked",
-  children: "children",
-  cite: "cite",
   class: "className",
-  classid: "classID",
-  classname: "className",
-  cols: "cols",
   colspan: "colSpan",
-  content: "content",
   contenteditable: "contentEditable",
-  contextmenu: "contextMenu",
-  controls: "controls",
-  controlslist: "controlsList",
-  coords: "coords",
   crossorigin: "crossOrigin",
-  dangerouslysetinnerhtml: "dangerouslySetInnerHTML",
-  data: "data",
   datetime: "dateTime",
-  default: "default",
-  defaultchecked: "defaultChecked",
-  defaultvalue: "defaultValue",
-  defer: "defer",
-  dir: "dir",
-  disabled: "disabled",
-  disablepictureinpicture: "disablePictureInPicture",
-  disableremoteplayback: "disableRemotePlayback",
-  download: "download",
-  draggable: "draggable",
   enctype: "encType",
   enterkeyhint: "enterKeyHint",
   fetchpriority: "fetchPriority",
   for: "htmlFor",
-  form: "form",
   formmethod: "formMethod",
   formaction: "formAction",
   formenctype: "formEncType",
   formnovalidate: "formNoValidate",
   formtarget: "formTarget",
-  frameborder: "frameBorder",
-  headers: "headers",
-  height: "height",
-  hidden: "hidden",
-  high: "high",
-  href: "href",
   hreflang: "hrefLang",
-  htmlfor: "htmlFor",
-  httpequiv: "httpEquiv",
   "http-equiv": "httpEquiv",
-  icon: "icon",
-  id: "id",
   imagesizes: "imageSizes",
   imagesrcset: "imageSrcSet",
-  inert: "inert",
-  innerhtml: "innerHTML",
   inputmode: "inputMode",
-  integrity: "integrity",
-  is: "is",
   itemid: "itemID",
   itemprop: "itemProp",
   itemref: "itemRef",
   itemscope: "itemScope",
   itemtype: "itemType",
-  keyparams: "keyParams",
-  keytype: "keyType",
-  kind: "kind",
-  label: "label",
-  lang: "lang",
-  list: "list",
-  loop: "loop",
-  low: "low",
-  manifest: "manifest",
-  marginwidth: "marginWidth",
-  marginheight: "marginHeight",
-  max: "max",
   maxlength: "maxLength",
-  media: "media",
-  mediagroup: "mediaGroup",
-  method: "method",
-  min: "min",
   minlength: "minLength",
-  multiple: "multiple",
-  muted: "muted",
-  name: "name",
   nomodule: "noModule",
-  nonce: "nonce",
   novalidate: "noValidate",
-  open: "open",
-  optimum: "optimum",
-  pattern: "pattern",
-  placeholder: "placeholder",
   playsinline: "playsInline",
-  poster: "poster",
-  preload: "preload",
-  profile: "profile",
-  radiogroup: "radioGroup",
   readonly: "readOnly",
   referrerpolicy: "referrerPolicy",
-  rel: "rel",
-  required: "required",
-  reversed: "reversed",
-  role: "role",
-  rows: "rows",
   rowspan: "rowSpan",
-  sandbox: "sandbox",
-  scope: "scope",
-  scoped: "scoped",
-  scrolling: "scrolling",
-  seamless: "seamless",
-  selected: "selected",
-  shape: "shape",
-  size: "size",
-  sizes: "sizes",
-  span: "span",
   spellcheck: "spellCheck",
-  src: "src",
   srcdoc: "srcDoc",
   srclang: "srcLang",
   srcset: "srcSet",
-  start: "start",
-  step: "step",
-  style: "style",
-  summary: "summary",
   tabindex: "tabIndex",
-  target: "target",
-  title: "title",
-  type: "type",
   usemap: "useMap",
-  value: "value",
-  width: "width",
-  wmode: "wmode",
-  wrap: "wrap",
-  // SVG
-  about: "about",
-  accentheight: "accentHeight",
-  "accent-height": "accentHeight",
-  accumulate: "accumulate",
-  additive: "additive",
-  alignmentbaseline: "alignmentBaseline",
-  "alignment-baseline": "alignmentBaseline",
-  allowreorder: "allowReorder",
-  alphabetic: "alphabetic",
-  amplitude: "amplitude",
-  arabicform: "arabicForm",
-  "arabic-form": "arabicForm",
-  ascent: "ascent",
-  attributename: "attributeName",
-  attributetype: "attributeType",
-  autoreverse: "autoReverse",
-  azimuth: "azimuth",
-  basefrequency: "baseFrequency",
-  baselineshift: "baselineShift",
-  "baseline-shift": "baselineShift",
-  baseprofile: "baseProfile",
-  bbox: "bbox",
-  begin: "begin",
-  bias: "bias",
-  by: "by",
-  calcmode: "calcMode",
-  capheight: "capHeight",
-  "cap-height": "capHeight",
-  clip: "clip",
-  clippath: "clipPath",
-  "clip-path": "clipPath",
-  clippathunits: "clipPathUnits",
-  cliprule: "clipRule",
-  "clip-rule": "clipRule",
-  color: "color",
-  colorinterpolation: "colorInterpolation",
-  "color-interpolation": "colorInterpolation",
-  colorinterpolationfilters: "colorInterpolationFilters",
-  "color-interpolation-filters": "colorInterpolationFilters",
-  colorprofile: "colorProfile",
-  "color-profile": "colorProfile",
-  colorrendering: "colorRendering",
-  "color-rendering": "colorRendering",
-  contentscripttype: "contentScriptType",
-  contentstyletype: "contentStyleType",
-  cursor: "cursor",
-  cx: "cx",
-  cy: "cy",
-  d: "d",
-  datatype: "datatype",
-  decelerate: "decelerate",
-  descent: "descent",
-  diffuseconstant: "diffuseConstant",
-  direction: "direction",
-  display: "display",
-  divisor: "divisor",
-  dominantbaseline: "dominantBaseline",
-  "dominant-baseline": "dominantBaseline",
-  dur: "dur",
-  dx: "dx",
-  dy: "dy",
-  edgemode: "edgeMode",
-  elevation: "elevation",
-  enablebackground: "enableBackground",
-  "enable-background": "enableBackground",
-  end: "end",
-  exponent: "exponent",
-  externalresourcesrequired: "externalResourcesRequired",
-  fill: "fill",
-  fillopacity: "fillOpacity",
-  "fill-opacity": "fillOpacity",
-  fillrule: "fillRule",
-  "fill-rule": "fillRule",
-  filter: "filter",
-  filterres: "filterRes",
-  filterunits: "filterUnits",
-  floodopacity: "floodOpacity",
-  "flood-opacity": "floodOpacity",
-  floodcolor: "floodColor",
-  "flood-color": "floodColor",
-  focusable: "focusable",
-  fontfamily: "fontFamily",
-  "font-family": "fontFamily",
-  fontsize: "fontSize",
-  "font-size": "fontSize",
-  fontsizeadjust: "fontSizeAdjust",
-  "font-size-adjust": "fontSizeAdjust",
-  fontstretch: "fontStretch",
-  "font-stretch": "fontStretch",
-  fontstyle: "fontStyle",
-  "font-style": "fontStyle",
-  fontvariant: "fontVariant",
-  "font-variant": "fontVariant",
-  fontweight: "fontWeight",
-  "font-weight": "fontWeight",
-  format: "format",
-  from: "from",
-  fx: "fx",
-  fy: "fy",
-  g1: "g1",
-  g2: "g2",
-  glyphname: "glyphName",
-  "glyph-name": "glyphName",
-  glyphorientationhorizontal: "glyphOrientationHorizontal",
-  "glyph-orientation-horizontal": "glyphOrientationHorizontal",
-  glyphorientationvertical: "glyphOrientationVertical",
-  "glyph-orientation-vertical": "glyphOrientationVertical",
-  glyphref: "glyphRef",
-  gradienttransform: "gradientTransform",
-  gradientunits: "gradientUnits",
-  hanging: "hanging",
-  horizadvx: "horizAdvX",
-  "horiz-adv-x": "horizAdvX",
-  horizoriginx: "horizOriginX",
-  "horiz-origin-x": "horizOriginX",
-  ideographic: "ideographic",
-  imagerendering: "imageRendering",
-  "image-rendering": "imageRendering",
-  in2: "in2",
-  in: "in",
-  inlist: "inlist",
-  intercept: "intercept",
-  k1: "k1",
-  k2: "k2",
-  k3: "k3",
-  k4: "k4",
-  k: "k",
-  kernelmatrix: "kernelMatrix",
-  kernelunitlength: "kernelUnitLength",
-  kerning: "kerning",
-  keypoints: "keyPoints",
-  keysplines: "keySplines",
-  keytimes: "keyTimes",
-  lengthadjust: "lengthAdjust",
-  letterspacing: "letterSpacing",
-  "letter-spacing": "letterSpacing",
-  lightingcolor: "lightingColor",
-  "lighting-color": "lightingColor",
-  limitingconeangle: "limitingConeAngle",
-  local: "local",
-  markerend: "markerEnd",
-  "marker-end": "markerEnd",
-  markerheight: "markerHeight",
-  markermid: "markerMid",
-  "marker-mid": "markerMid",
-  markerstart: "markerStart",
-  "marker-start": "markerStart",
-  markerunits: "markerUnits",
-  markerwidth: "markerWidth",
-  mask: "mask",
-  maskcontentunits: "maskContentUnits",
-  maskunits: "maskUnits",
-  mathematical: "mathematical",
-  mode: "mode",
-  numoctaves: "numOctaves",
-  offset: "offset",
-  opacity: "opacity",
-  operator: "operator",
-  order: "order",
-  orient: "orient",
-  orientation: "orientation",
-  origin: "origin",
-  overflow: "overflow",
-  overlineposition: "overlinePosition",
-  "overline-position": "overlinePosition",
-  overlinethickness: "overlineThickness",
-  "overline-thickness": "overlineThickness",
-  paintorder: "paintOrder",
-  "paint-order": "paintOrder",
-  panose1: "panose1",
-  "panose-1": "panose1",
-  pathlength: "pathLength",
-  patterncontentunits: "patternContentUnits",
-  patterntransform: "patternTransform",
-  patternunits: "patternUnits",
-  pointerevents: "pointerEvents",
-  "pointer-events": "pointerEvents",
-  points: "points",
-  pointsatx: "pointsAtX",
-  pointsaty: "pointsAtY",
-  pointsatz: "pointsAtZ",
-  popover: "popover",
   popovertarget: "popoverTarget",
   popovertargetaction: "popoverTargetAction",
-  prefix: "prefix",
-  preservealpha: "preserveAlpha",
-  preserveaspectratio: "preserveAspectRatio",
-  primitiveunits: "primitiveUnits",
-  property: "property",
-  r: "r",
-  radius: "radius",
-  refx: "refX",
-  refy: "refY",
-  renderingintent: "renderingIntent",
-  "rendering-intent": "renderingIntent",
-  repeatcount: "repeatCount",
-  repeatdur: "repeatDur",
-  requiredextensions: "requiredExtensions",
-  requiredfeatures: "requiredFeatures",
-  resource: "resource",
-  restart: "restart",
-  result: "result",
-  results: "results",
-  rotate: "rotate",
-  rx: "rx",
-  ry: "ry",
-  scale: "scale",
-  security: "security",
-  seed: "seed",
-  shaperendering: "shapeRendering",
-  "shape-rendering": "shapeRendering",
-  slope: "slope",
-  spacing: "spacing",
-  specularconstant: "specularConstant",
-  specularexponent: "specularExponent",
-  speed: "speed",
-  spreadmethod: "spreadMethod",
-  startoffset: "startOffset",
-  stddeviation: "stdDeviation",
-  stemh: "stemh",
-  stemv: "stemv",
-  stitchtiles: "stitchTiles",
-  stopcolor: "stopColor",
-  "stop-color": "stopColor",
-  stopopacity: "stopOpacity",
-  "stop-opacity": "stopOpacity",
-  strikethroughposition: "strikethroughPosition",
-  "strikethrough-position": "strikethroughPosition",
-  strikethroughthickness: "strikethroughThickness",
-  "strikethrough-thickness": "strikethroughThickness",
-  string: "string",
-  stroke: "stroke",
-  strokedasharray: "strokeDasharray",
-  "stroke-dasharray": "strokeDasharray",
-  strokedashoffset: "strokeDashoffset",
-  "stroke-dashoffset": "strokeDashoffset",
-  strokelinecap: "strokeLinecap",
-  "stroke-linecap": "strokeLinecap",
-  strokelinejoin: "strokeLinejoin",
-  "stroke-linejoin": "strokeLinejoin",
-  strokemiterlimit: "strokeMiterlimit",
-  "stroke-miterlimit": "strokeMiterlimit",
-  strokewidth: "strokeWidth",
-  "stroke-width": "strokeWidth",
-  strokeopacity: "strokeOpacity",
-  "stroke-opacity": "strokeOpacity",
-  suppresscontenteditablewarning: "suppressContentEditableWarning",
-  suppresshydrationwarning: "suppressHydrationWarning",
-  surfacescale: "surfaceScale",
-  systemlanguage: "systemLanguage",
-  tablevalues: "tableValues",
-  targetx: "targetX",
-  targety: "targetY",
-  textanchor: "textAnchor",
-  "text-anchor": "textAnchor",
-  textdecoration: "textDecoration",
-  "text-decoration": "textDecoration",
-  textlength: "textLength",
-  textrendering: "textRendering",
-  "text-rendering": "textRendering",
-  to: "to",
-  transform: "transform",
-  transformorigin: "transformOrigin",
-  "transform-origin": "transformOrigin",
-  typeof: "typeof",
-  u1: "u1",
-  u2: "u2",
-  underlineposition: "underlinePosition",
-  "underline-position": "underlinePosition",
-  underlinethickness: "underlineThickness",
-  "underline-thickness": "underlineThickness",
-  unicode: "unicode",
-  unicodebidi: "unicodeBidi",
-  "unicode-bidi": "unicodeBidi",
-  unicoderange: "unicodeRange",
-  "unicode-range": "unicodeRange",
-  unitsperem: "unitsPerEm",
-  "units-per-em": "unitsPerEm",
-  unselectable: "unselectable",
-  valphabetic: "vAlphabetic",
-  "v-alphabetic": "vAlphabetic",
-  values: "values",
-  vectoreffect: "vectorEffect",
-  "vector-effect": "vectorEffect",
-  version: "version",
-  vertadvy: "vertAdvY",
-  "vert-adv-y": "vertAdvY",
-  vertoriginx: "vertOriginX",
-  "vert-origin-x": "vertOriginX",
-  vertoriginy: "vertOriginY",
-  "vert-origin-y": "vertOriginY",
-  vhanging: "vHanging",
-  "v-hanging": "vHanging",
-  videographic: "vIdeographic",
-  "v-ideographic": "vIdeographic",
-  viewbox: "viewBox",
-  viewtarget: "viewTarget",
-  visibility: "visibility",
-  vmathematical: "vMathematical",
-  "v-mathematical": "vMathematical",
-  vocab: "vocab",
-  widths: "widths",
-  wordspacing: "wordSpacing",
-  "word-spacing": "wordSpacing",
-  writingmode: "writingMode",
-  "writing-mode": "writingMode",
-  x1: "x1",
-  x2: "x2",
-  x: "x",
-  xchannelselector: "xChannelSelector",
-  xheight: "xHeight",
-  "x-height": "xHeight",
-  xlinkactuate: "xlinkActuate",
-  "xlink:actuate": "xlinkActuate",
-  xlinkarcrole: "xlinkArcrole",
-  "xlink:arcrole": "xlinkArcrole",
-  xlinkhref: "xlinkHref",
-  "xlink:href": "xlinkHref",
-  xlinkrole: "xlinkRole",
-  "xlink:role": "xlinkRole",
-  xlinkshow: "xlinkShow",
-  "xlink:show": "xlinkShow",
-  xlinktitle: "xlinkTitle",
-  "xlink:title": "xlinkTitle",
-  xlinktype: "xlinkType",
-  "xlink:type": "xlinkType",
-  xmlbase: "xmlBase",
-  "xml:base": "xmlBase",
-  xmllang: "xmlLang",
-  "xml:lang": "xmlLang",
-  xmlns: "xmlns",
-  "xml:space": "xmlSpace",
-  xmlnsxlink: "xmlnsXlink",
-  "xmlns:xlink": "xmlnsXlink",
-  xmlspace: "xmlSpace",
-  y1: "y1",
-  y2: "y2",
-  y: "y",
-  ychannelselector: "yChannelSelector",
-  z: "z",
-  zoomandpan: "zoomAndPan",
-  // added by us
   dirname: "dirName"
 };
 var generateAction = ({
@@ -4148,6 +4287,7 @@ var generatePropValue = ({
 var generateJsxElement = ({
   context = "jsx",
   scope,
+  metas,
   instance,
   props,
   dataSources,
@@ -4156,9 +4296,11 @@ var generateJsxElement = ({
   children,
   classesMap
 }) => {
+  var _a2;
   if (instance.component === descendantComponent) {
     return "";
   }
+  const hasTags = Object.keys(((_a2 = metas.get(instance.component)) == null ? void 0 : _a2.presetStyle) ?? {}).length > 0;
   let generatedProps = "";
   const index = indexesWithinAncestors.get(instance.id);
   if (index !== void 0) {
@@ -4187,7 +4329,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
       continue;
     }
     let name2 = prop.name;
-    if (instance.component === elementComponent) {
+    if (instance.component === elementComponent || hasTags) {
       name2 = standardAttributesToReactProps[prop.name] ?? prop.name;
     }
     if (prop.name === showAttribute) {
@@ -4300,6 +4442,7 @@ ${name2}={${propValue}}`;
 };
 var generateJsxChildren = ({
   scope,
+  metas,
   children,
   instances,
   props,
@@ -4340,6 +4483,7 @@ var generateJsxChildren = ({
       generatedChildren += generateJsxElement({
         context: "jsx",
         scope,
+        metas,
         instance,
         props,
         dataSources,
@@ -4349,6 +4493,7 @@ var generateJsxChildren = ({
         children: generateJsxChildren({
           classesMap,
           scope,
+          metas,
           children: instance.children,
           instances,
           props,
@@ -4384,6 +4529,7 @@ var generateWebstudioComponent = ({
     generatedJsx = generateJsxElement({
       context: "expression",
       scope,
+      metas,
       instance,
       props,
       dataSources,
@@ -4392,6 +4538,7 @@ var generateWebstudioComponent = ({
       classesMap,
       children: generateJsxChildren({
         scope,
+        metas,
         children: instance.children,
         instances,
         props,
@@ -4577,9 +4724,7 @@ const o$2 = {
   icon: ""
 };
 const e$2 = {
-  className: { required: false, control: "text", type: "string" },
   clientOnly: { required: false, control: "boolean", type: "boolean" },
-  code: { required: true, control: "text", type: "string" },
   executeScriptOnCanvas: {
     required: false,
     control: "boolean",
@@ -4611,24 +4756,13 @@ const r$b = {
 };
 ({
   props: {
-    ...e$2,
     clientOnly: {
-      ...e$2.clientOnly,
-      description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
+      ...e$2.clientOnly
     },
     executeScriptOnCanvas: {
-      ...e$2.executeScriptOnCanvas,
-      label: "Run scripts on canvas",
-      description: "Dangerously allow script execution on canvas without switching to preview mode. This only affects build mode, but may result in unwanted side effects inside builder!"
-    },
-    code: {
-      required: true,
-      control: "code",
-      language: "html",
-      type: "string"
+      ...e$2.executeScriptOnCanvas
     }
-  },
-  initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
+  }
 });
 const a$a = {
   icon: MarkdownEmbedIcon,
@@ -4687,13 +4821,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$8 = div;
+var i$7 = div;
 var img = div;
 var a$9 = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$9 = div;
+var p$a = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -5066,13 +5200,13 @@ const d$6 = {
     h6
   }
 };
-const p$8 = {
-  p: p$9
+const p$9 = {
+  p: p$a
 }, c$5 = {
   placeholder: "Paragraph",
   icon: TextAlignLeftIcon,
   states: defaultStates,
-  presetStyle: p$8
+  presetStyle: p$9
 };
 const a$7 = {
   a: [
@@ -5099,7 +5233,7 @@ const a$7 = {
     }
   ]
 };
-const p$7 = n$6;
+const p$8 = n$6;
 const e$1 = {
   span
 }, n$5 = {
@@ -5116,9 +5250,9 @@ const s$5 = {
   states: defaultStates,
   presetStyle: s$5
 };
-const i$7 = {
+const i$6 = {
   i: [
-    ...i$8,
+    ...i$7,
     {
       property: "font-style",
       value: { type: "keyword", value: "italic" }
@@ -5128,7 +5262,7 @@ const i$7 = {
   label: "Italic Text",
   icon: TextItalicIcon,
   states: defaultStates,
-  presetStyle: i$7
+  presetStyle: i$6
 };
 const s$4 = {
   sup
@@ -5138,13 +5272,13 @@ const s$4 = {
   states: defaultStates,
   presetStyle: s$4
 };
-const p$6 = {
+const p$7 = {
   sub
 }, c$3 = {
   label: "Subscript Text",
   icon: SubscriptIcon,
   states: defaultStates,
-  presetStyle: p$6
+  presetStyle: p$7
 };
 const l$4 = {
   button
@@ -5288,7 +5422,7 @@ const r$9 = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, i$6 = {
+}, i$5 = {
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
@@ -5338,7 +5472,7 @@ const a$4 = {
     li
   }
 };
-const p$5 = {
+const p$6 = {
   hr: [
     ...hr,
     {
@@ -5371,10 +5505,10 @@ const p$5 = {
   description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
   icon: MinusIcon,
   states: defaultStates,
-  presetStyle: p$5,
+  presetStyle: p$6,
   order: 3
 };
-const p$4 = {
+const p$5 = {
   code: [
     ...code,
     {
@@ -5402,7 +5536,7 @@ const p$4 = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, i$5 = {
+}, i$4 = {
   category: "general",
   description: "Use this component when you want to display code as text on the page.",
   icon: BracesIcon,
@@ -5411,7 +5545,7 @@ const p$4 = {
     children: []
   },
   states: defaultStates,
-  presetStyle: p$4,
+  presetStyle: p$5,
   order: 5
 };
 const r$8 = {
@@ -5419,7 +5553,7 @@ const r$8 = {
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i$4 = {
+}, i$3 = {
   label: "Input Label",
   icon: LabelIcon,
   states: defaultStates,
@@ -5518,7 +5652,7 @@ const m$2 = {
     div
   }
 };
-const p$3 = {
+const p$4 = {
   icon: YoutubeIcon,
   states: defaultStates,
   contentModel: {
@@ -5530,7 +5664,7 @@ const p$3 = {
     div
   }
 };
-const p$2 = {
+const p$3 = {
   ...l$3,
   category: "hidden",
   label: "Preview Image",
@@ -5565,7 +5699,7 @@ const s$1 = {
     div
   }
 };
-const i$3 = {
+const i$2 = {
   category: "xml",
   order: 6,
   icon: XmlIcon,
@@ -5644,14 +5778,14 @@ const r$4 = {
     children: ["HeadLink", "HeadMeta", "HeadTitle"]
   }
 };
-const p$1 = {
+const p$2 = {
   icon: ResourceIcon,
   contentModel: {
     category: "none",
     children: []
   }
 };
-const p = {
+const p$1 = {
   icon: WindowInfoIcon,
   contentModel: {
     category: "none",
@@ -5665,7 +5799,7 @@ const r$3 = {
     children: ["text"]
   }
 };
-const i$2 = {
+const i$1 = {
   icon: VideoIcon,
   contentModel: {
     category: "instance",
@@ -5682,17 +5816,17 @@ const i$2 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: i$6,
+  Blockquote: i$5,
   Body: n$8,
   Bold: l$5,
   Box: v$3,
   Button: m$3,
   Checkbox: d$4,
-  CodeText: i$5,
+  CodeText: i$4,
   Form: c$1,
   Fragment: o$2,
-  HeadLink: p$1,
-  HeadMeta: p,
+  HeadLink: p$2,
+  HeadMeta: p$1,
   HeadSlot: r$4,
   HeadTitle: r$3,
   Heading: d$6,
@@ -5700,7 +5834,7 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Image: l$3,
   Input: c$2,
   Italic: m$4,
-  Label: i$4,
+  Label: i$3,
   Link: n$6,
   List: d$5,
   ListItem: a$4,
@@ -5709,7 +5843,7 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Paragraph: c$5,
   RadioButton: s$2,
   RemixForm: n$4,
-  RichTextLink: p$7,
+  RichTextLink: p$8,
   Select: c,
   Separator: n$3,
   Slot: e$3,
@@ -5719,14 +5853,14 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Text: n$7,
   Textarea: n$2,
   Time: s,
-  Video: i$2,
+  Video: i$1,
   Vimeo: m$2,
   VimeoPlayButton: m$1,
-  VimeoPreviewImage: p$2,
+  VimeoPreviewImage: p$3,
   VimeoSpinner: s$1,
-  XmlNode: i$3,
+  XmlNode: i$2,
   XmlTime: a$2,
-  YouTube: p$3
+  YouTube: p$4
 }, Symbol.toStringTag, { value: "Module" }));
 const n$1 = (t) => new Proxy(
   {},
@@ -5782,12 +5916,15 @@ const r$1 = {
     div
   }
 };
-const i$1 = {
+const p = {
   icon: PlayIcon,
   label: "Video Animation",
   contentModel: {
     category: "none",
     children: ["instance"]
+  },
+  presetStyle: {
+    div
   }
 };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -5795,7 +5932,7 @@ const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Ob
   AnimateChildren: a$1,
   AnimateText: a,
   StaggerAnimation: r$1,
-  VideoAnimation: i$1
+  VideoAnimation: p
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -5803,7 +5940,7 @@ const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   Form: c$1,
   Link: n$6,
   RemixForm: n$4,
-  RichTextLink: p$7
+  RichTextLink: p$8
 }, Symbol.toStringTag, { value: "Module" }));
 const r = (t) => new Proxy(
   {},
@@ -5922,7 +6059,7 @@ const O = {
     children: ["instance", "rich-text"]
   },
   presetStyle: {
-    p: p$9
+    p: p$a
   }
 }, R = {
   icon: ButtonElementIcon,
@@ -6530,7 +6667,7 @@ const reactRouterComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
   Form: c$1,
   Link: n$6,
   RemixForm: n$4,
-  RichTextLink: p$7
+  RichTextLink: p$8
 }, Symbol.toStringTag, { value: "Module" }));
 const createFramework$1 = async () => {
   const routeTemplatesDir = join("app", "route-templates");
@@ -7297,7 +7434,7 @@ const initFlow = async (options) => {
     await link({ link: shareLink });
     if (!options.template.length) {
       projectTemplate = exitIfCancelled(
-        await select$1({
+        await select$2({
           message: "Where would you like to deploy your project?",
           options: PROJECT_TEMPLATES
         })
@@ -7312,7 +7449,7 @@ const initFlow = async (options) => {
   }
   if (!options.template.length && projectTemplate === void 0) {
     projectTemplate = exitIfCancelled(
-      await select$1({
+      await select$2({
         message: "Where would you like to deploy your project?",
         options: PROJECT_TEMPLATES
       })
@@ -7357,91 +7494,19 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.217.0";
+const version = "0.219.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
 const type = "module";
-const bin = {
-  "webstudio-cli": "./bin.js",
-  webstudio: "./bin.js"
-};
-const imports = {
-  "#cli": {
-    webstudio: "./src/cli.ts",
-    "default": "./lib/cli.js"
-  }
-};
-const files = [
-  "lib/*",
-  "templates/*",
-  "bin.js",
-  "!*.{test,stories}.*"
-];
-const scripts = {
-  typecheck: "tsc",
-  build: "rm -rf lib && vite build",
-  test: "vitest run"
-};
+const bin = { "webstudio-cli": "./bin.js", "webstudio": "./bin.js" };
+const imports = { "#cli": { "webstudio": "./src/cli.ts", "default": "./lib/cli.js" } };
+const files = ["lib/*", "templates/*", "bin.js", "!*.{test,stories}.*"];
+const scripts = { "typecheck": "tsc", "build": "rm -rf lib && vite build", "test": "vitest run" };
 const license = "AGPL-3.0-or-later";
-const engines = {
-  node: ">=20.12"
-};
-const dependencies = {
-  "@clack/prompts": "^0.10.0",
-  "@emotion/hash": "^0.9.2",
-  acorn: "^8.14.1",
-  "acorn-walk": "^8.3.4",
-  "change-case": "^5.4.4",
-  deepmerge: "^4.3.1",
-  "env-paths": "^3.0.0",
-  nanoid: "^5.1.5",
-  "p-limit": "^6.2.0",
-  parse5: "7.2.1",
-  picocolors: "^1.1.1",
-  "reserved-identifiers": "^1.0.0",
-  tinyexec: "^0.3.2",
-  yargs: "^17.7.2",
-  zod: "^3.24.2"
-};
-const devDependencies = {
-  "@netlify/vite-plugin-react-router": "^1.0.1",
-  "@react-router/dev": "^7.5.0",
-  "@react-router/fs-routes": "^7.5.0",
-  "@remix-run/cloudflare": "^2.16.4",
-  "@remix-run/cloudflare-pages": "^2.16.4",
-  "@remix-run/dev": "^2.16.4",
-  "@remix-run/node": "^2.16.4",
-  "@remix-run/react": "^2.16.4",
-  "@remix-run/server-runtime": "^2.16.4",
-  "@types/react": "^18.2.70",
-  "@types/react-dom": "^18.2.25",
-  "@types/yargs": "^17.0.33",
-  "@vercel/react-router": "^1.1.0",
-  "@vitejs/plugin-react": "^4.3.4",
-  "@webstudio-is/css-engine": "workspace:*",
-  "@webstudio-is/http-client": "workspace:*",
-  "@webstudio-is/image": "workspace:*",
-  "@webstudio-is/react-sdk": "workspace:*",
-  "@webstudio-is/sdk": "workspace:*",
-  "@webstudio-is/sdk-components-animation": "workspace:*",
-  "@webstudio-is/sdk-components-react": "workspace:*",
-  "@webstudio-is/sdk-components-react-radix": "workspace:*",
-  "@webstudio-is/sdk-components-react-remix": "workspace:*",
-  "@webstudio-is/sdk-components-react-router": "workspace:*",
-  "@webstudio-is/tsconfig": "workspace:*",
-  h3: "^1.15.1",
-  ipx: "^3.0.3",
-  prettier: "3.5.3",
-  react: "18.3.0-canary-14898b6a9-20240318",
-  "react-dom": "18.3.0-canary-14898b6a9-20240318",
-  "react-router": "^7.5.0",
-  "ts-expect": "^1.3.0",
-  vike: "^0.4.228",
-  vite: "^5.4.11",
-  vitest: "^3.0.8",
-  wrangler: "^3.63.2"
-};
+const engines = { "node": ">=20.12" };
+const dependencies = { "@clack/prompts": "^0.10.0", "@emotion/hash": "^0.9.2", "acorn": "^8.14.1", "acorn-walk": "^8.3.4", "change-case": "^5.4.4", "deepmerge": "^4.3.1", "env-paths": "^3.0.0", "nanoid": "^5.1.5", "p-limit": "^6.2.0", "parse5": "7.3.0", "picocolors": "^1.1.1", "reserved-identifiers": "^1.0.0", "tinyexec": "^0.3.2", "yargs": "^17.7.2", "zod": "^3.24.2" };
+const devDependencies = { "@cloudflare/vite-plugin": "^1.1.0", "@netlify/vite-plugin-react-router": "^1.0.1", "@react-router/dev": "^7.5.3", "@react-router/fs-routes": "^7.5.3", "@remix-run/cloudflare": "^2.16.5", "@remix-run/cloudflare-pages": "^2.16.5", "@remix-run/dev": "^2.16.5", "@remix-run/node": "^2.16.5", "@remix-run/react": "^2.16.5", "@remix-run/server-runtime": "^2.16.5", "@types/react": "^18.2.70", "@types/react-dom": "^18.2.25", "@types/yargs": "^17.0.33", "@vercel/react-router": "^1.1.0", "@vitejs/plugin-react": "^4.4.1", "@webstudio-is/css-engine": "workspace:*", "@webstudio-is/http-client": "workspace:*", "@webstudio-is/image": "workspace:*", "@webstudio-is/react-sdk": "workspace:*", "@webstudio-is/sdk": "workspace:*", "@webstudio-is/sdk-components-animation": "workspace:*", "@webstudio-is/sdk-components-react": "workspace:*", "@webstudio-is/sdk-components-react-radix": "workspace:*", "@webstudio-is/sdk-components-react-remix": "workspace:*", "@webstudio-is/sdk-components-react-router": "workspace:*", "@webstudio-is/tsconfig": "workspace:*", "h3": "^1.15.1", "ipx": "^3.0.3", "isbot": "^5.1.25", "prettier": "3.5.3", "react": "18.3.0-canary-14898b6a9-20240318", "react-dom": "18.3.0-canary-14898b6a9-20240318", "react-router": "^7.5.3", "ts-expect": "^1.3.0", "vike": "^0.4.229", "vite": "^6.3.4", "vitest": "^3.1.2", "wrangler": "^3.63.2" };
 const packageJson = {
   name,
   version,