webstudio 0.225.0 → 0.226.0

package/lib/cli.js

@@ -1822,19 +1822,14 @@ var ProjectMeta = z.object({
   faviconAssetId: z.string().optional(),
   code: z.string().optional()
 });
-var ProjectNewRedirectPath = PagePath.or(
-  z.string().refine((data) => {
-    if (data === "/") {
-      return true;
-    }
-    try {
-      new URL(data);
-      return true;
-    } catch {
-      return false;
-    }
-  }, "Must be a valid URL")
-);
+var ProjectNewRedirectPath = z.string().refine((data) => {
+  try {
+    new URL(data, "http://url.com");
+    return true;
+  } catch {
+    return false;
+  }
+}, "Must be a valid URL");
 var PageRedirect = z.object({
   old: OldPagePath,
   new: ProjectNewRedirectPath,
@@ -2539,7 +2534,7 @@ z.object({
 });
 var normalize_css_exports = {};
 __export(normalize_css_exports, {
-  a: () => a$9,
+  a: () => a$7,
   address: () => address$1,
   article: () => article$1,
   aside: () => aside$1,
@@ -2561,7 +2556,7 @@ __export(normalize_css_exports, {
   header: () => header$1,
   hr: () => hr$1,
   html: () => html,
-  i: () => i$a,
+  i: () => i$b,
   img: () => img$1,
   input: () => input$1,
   kbd: () => kbd,
@@ -2572,7 +2567,7 @@ __export(normalize_css_exports, {
   nav: () => nav$1,
   ol: () => ol$1,
   optgroup: () => optgroup,
-  p: () => p$8,
+  p: () => p$9,
   pre: () => pre,
   progress: () => progress,
   radio: () => radio$1,
@@ -2628,13 +2623,13 @@ var h3$1 = div$1;
 var h4$1 = div$1;
 var h5$1 = div$1;
 var h6$1 = div$1;
-var i$a = div$1;
+var i$b = div$1;
 var img$1 = div$1;
-var a$9 = div$1;
+var a$7 = div$1;
 var li$1 = div$1;
 var ul$1 = div$1;
 var ol$1 = div$1;
-var p$8 = div$1;
+var p$9 = div$1;
 var span$1 = div$1;
 var html = [
   { property: "display", value: { type: "keyword", value: "grid" } },
@@ -4968,7 +4963,7 @@ const o$H = {
   order: 4
 };
 const t$i = {};
-const e$x = {
+const e$u = {
   className: {
     required: false,
     control: "text",
@@ -4983,7 +4978,7 @@ const e$x = {
     type: "boolean"
   }
 };
-const a$8 = {
+const a$6 = {
   category: "general",
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
@@ -5007,13 +5002,13 @@ const a$8 = {
   },
   initialProps: ["class", "clientOnly", "executeScriptOnCanvas"],
   props: {
-    ...e$x,
+    ...e$u,
     clientOnly: {
-      ...e$x.clientOnly,
+      ...e$u.clientOnly,
       description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
     },
     executeScriptOnCanvas: {
-      ...e$x.executeScriptOnCanvas,
+      ...e$u.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!"
     },
@@ -5028,7 +5023,7 @@ const a$8 = {
 const t$h = {
   code: { required: true, control: "text", type: "string" }
 };
-const a$7 = {
+const a$5 = {
   icon: MarkdownEmbedIcon,
   contentModel: {
     category: "instance",
@@ -5095,13 +5090,13 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$9 = div;
+var i$a = div;
 var img = div;
-var a$6 = div;
+var a$4 = div;
 var li = div;
 var ul = div;
 var ol = div;
-var p$7 = div;
+var p$8 = div;
 var span = div;
 var body = [
   { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
@@ -5405,7 +5400,7 @@ var button = [
 ];
 var select = button;
 const o$G = {};
-const i$8 = {
+const i$9 = {
   presetStyle: { body },
   initialProps: ["id", "class"],
   props: o$G
@@ -5413,7 +5408,7 @@ const i$8 = {
 const t$g = {
   tag: { required: false, control: "text", type: "string" }
 };
-const g$2 = {
+const g$3 = {
   presetStyle: {
     div,
     address,
@@ -5452,7 +5447,7 @@ const g$2 = {
 const t$f = {
   tag: { required: false, control: "text", type: "string" }
 };
-const n$7 = {
+const n$6 = {
   icon: TextIcon,
   presetStyle: {
     div: [
@@ -5498,12 +5493,12 @@ const m$9 = {
   }
 };
 const o$F = {};
-const i$7 = {
-  presetStyle: { p: p$7 },
+const i$8 = {
+  presetStyle: { p: p$8 },
   initialProps: ["id", "class"],
   props: o$F
 };
-const e$w = {
+const e$t = {
   download: {
     required: false,
     control: "boolean",
@@ -5529,18 +5524,18 @@ const e$w = {
 };
 const t$d = {
   a: [
-    ...a$6,
+    ...a$4,
     {
       property: "display",
       value: { type: "keyword", value: "inline-block" }
     }
   ]
-}, p$6 = {
+}, p$7 = {
   presetStyle: t$d,
   states: [{ label: "Current page", selector: "[aria-current=page]" }],
   initialProps: ["id", "class", "href", "target", "prefetch", "download"],
   props: {
-    ...e$w,
+    ...e$t,
     href: {
       type: "string",
       control: "url",
@@ -5548,9 +5543,9 @@ const t$d = {
     }
   }
 };
-const a$5 = p$6;
+const a$3 = p$7;
 const o$E = {};
-const e$v = {
+const e$s = {
   label: "Text",
   icon: PaintBrushIcon,
   presetStyle: { span },
@@ -5558,16 +5553,16 @@ const e$v = {
   props: o$E
 };
 const o$D = {};
-const p$5 = {
+const p$6 = {
   label: "Bold Text",
   presetStyle: { b: b$5 },
   initialProps: ["id", "class"],
   props: o$D
 };
 const o$C = {};
-const e$u = {
+const e$r = {
   label: "Italic Text",
-  presetStyle: { i: i$9 },
+  presetStyle: { i: i$a },
   initialProps: ["id", "class"],
   props: o$C
 };
@@ -5586,13 +5581,13 @@ const s$4 = {
   props: o$z
 };
 const o$y = {};
-const e$t = {
+const e$q = {
   presetStyle: { button },
   initialProps: ["id", "class", "type", "aria-label"],
   props: o$y
 };
 const o$x = {};
-const p$4 = {
+const p$5 = {
   input: [
     ...input,
     {
@@ -5600,9 +5595,9 @@ const p$4 = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, l$4 = {
+}, l$5 = {
   label: "Text Input",
-  presetStyle: p$4,
+  presetStyle: p$5,
   initialProps: [
     "id",
     "class",
@@ -5615,7 +5610,7 @@ const p$4 = {
   ],
   props: o$x
 };
-const e$s = {
+const e$p = {
   state: {
     description: "Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully.",
     required: false,
@@ -5625,7 +5620,7 @@ const e$s = {
     options: ["initial", "success", "error"]
   }
 };
-const c$3 = {
+const c$4 = {
   label: "Webhook Form",
   icon: WebhookFormIcon,
   presetStyle: {
@@ -5637,7 +5632,7 @@ const c$3 = {
   ],
   initialProps: ["id", "class", "state", "action"],
   props: {
-    ...e$s,
+    ...e$p,
     action: {
       type: "resource",
       control: "resource",
@@ -5647,18 +5642,18 @@ const c$3 = {
   }
 };
 const o$w = {};
-const r$e = {
+const r$c = {
   form: [
     ...form,
     { property: "min-height", value: { type: "unit", unit: "px", value: 20 } }
   ]
-}, p$3 = {
+}, p$4 = {
   label: "Form",
-  presetStyle: r$e,
+  presetStyle: r$c,
   initialProps: ["id", "class", "action"],
   props: o$w
 };
-const e$r = {
+const e$o = {
   optimize: {
     description: "Optimize the image for enhanced performance.",
     required: false,
@@ -5690,7 +5685,7 @@ const o$v = {
       value: { type: "keyword", value: "auto" }
     }
   ]
-}, i$6 = {
+}, i$7 = {
   category: "media",
   description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
   presetStyle: o$v,
@@ -5706,7 +5701,7 @@ const o$v = {
     "optimize"
   ],
   props: {
-    ...e$r,
+    ...e$o,
     // Automatically generated props don't have the right control.
     src: {
       type: "string",
@@ -5717,7 +5712,7 @@ const o$v = {
   }
 };
 const o$u = {};
-const e$q = {
+const e$n = {
   blockquote: [
     {
       property: "margin-top",
@@ -5764,12 +5759,12 @@ const e$q = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, r$d = {
-  presetStyle: e$q,
+}, r$b = {
+  presetStyle: e$n,
   initialProps: ["id", "class", "cite"],
   props: o$u
 };
-const e$p = {
+const e$m = {
   ordered: {
     description: "Shows numbers instead of bullets when toggled. See the “List Style Type” property under the “List Item” section in the Style panel for more options.",
     required: false,
@@ -5809,13 +5804,13 @@ const t$c = {
       value: { type: "keyword", value: "40px" }
     }
   ]
-}, l$3 = {
+}, l$4 = {
   presetStyle: t$c,
   initialProps: ["id", "class", "ordered", "start", "reversed"],
-  props: e$p
+  props: e$m
 };
 const o$t = {};
-const p$2 = {
+const p$3 = {
   presetStyle: { li },
   initialProps: ["id", "class"],
   props: o$t
@@ -5854,7 +5849,7 @@ const o$r = {
   initialProps: ["id", "class"],
   props: o$s
 };
-const e$o = {
+const e$l = {
   code: { required: false, control: "text", type: "string" }
 };
 const o$q = {
@@ -5885,7 +5880,7 @@ const o$q = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, c$2 = {
+}, c$3 = {
   icon: BracesIcon,
   contentModel: {
     category: "instance",
@@ -5894,7 +5889,7 @@ const o$q = {
   presetStyle: o$q,
   initialProps: ["id", "class", "lang", "code"],
   props: {
-    ...e$o,
+    ...e$l,
     code: {
       required: true,
       control: "codetext",
@@ -5925,7 +5920,7 @@ const t$a = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, l$2 = {
+}, l$3 = {
   label: "Text Area",
   presetStyle: t$a,
   contentModel: {
@@ -5943,7 +5938,7 @@ const t$a = {
   ],
   props: o$n
 };
-const e$n = {
+const e$k = {
   value: {
     required: false,
     control: "text",
@@ -5951,7 +5946,7 @@ const e$n = {
     description: "Value of the form control"
   }
 };
-const r$c = {
+const r$a = {
   input: [
     ...radio,
     {
@@ -5962,11 +5957,11 @@ const r$c = {
 }, m$8 = {
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: r$c,
+  presetStyle: r$a,
   initialProps: ["id", "class", "name", "value", "required", "checked"],
-  props: e$n
+  props: e$k
 };
-const e$m = {
+const e$j = {
   value: {
     required: false,
     control: "text",
@@ -5986,9 +5981,9 @@ const t$9 = {
   icon: CheckboxCheckedIcon,
   presetStyle: t$9,
   initialProps: ["id", "class", "name", "value", "required", "checked"],
-  props: e$m
+  props: e$j
 };
-const e$l = {
+const e$i = {
   autopause: {
     description: "Whether to pause the current video when another Vimeo video on the same page starts to play. Set this value to false to permit simultaneous playback of all the videos on the page. This option has no effect if you've disabled cookies in your browser, either through browser settings or with an extension or plugin.",
     required: false,
@@ -6155,7 +6150,7 @@ To enable automatically generated closed captions instead, provide the value en-
     type: "string"
   }
 };
-const i$5 = [
+const i$6 = [
   "id",
   "className",
   "url",
@@ -6181,10 +6176,10 @@ const i$5 = [
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
   presetStyle: { div },
-  initialProps: i$5,
-  props: e$l
+  initialProps: i$6,
+  props: e$i
 };
-const e$k = {
+const e$h = {
   allowFullscreen: {
     description: "Whether to allow fullscreen mode.\nOriginal parameter: `fs`",
     required: false,
@@ -6349,7 +6344,7 @@ https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-
     type: "string"
   }
 };
-const n$6 = [
+const n$5 = [
   "id",
   "className",
   "url",
@@ -6385,10 +6380,10 @@ const n$6 = [
     descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
   },
   presetStyle: { div },
-  initialProps: n$6,
-  props: e$k
+  initialProps: n$5,
+  props: e$h
 };
-const e$j = {
+const e$g = {
   optimize: {
     description: "Optimize the image for enhanced performance.",
     required: false,
@@ -6397,17 +6392,17 @@ const e$j = {
   },
   quality: { required: false, control: "number", type: "number" }
 };
-const i$4 = {
-  ...i$6,
+const i$5 = {
+  ...i$7,
   category: "hidden",
   label: "Preview Image",
   contentModel: {
     category: "none",
     children: []
   },
-  initialProps: i$6.initialProps,
+  initialProps: i$7.initialProps,
   props: {
-    ...e$j,
+    ...e$g,
     // Automatically generated props don't have the right control.
     src: {
       type: "string",
@@ -6418,7 +6413,7 @@ const i$4 = {
   }
 };
 const o$m = {};
-const c$1 = {
+const c$2 = {
   category: "hidden",
   label: "Play Button",
   icon: ButtonElementIcon,
@@ -6431,7 +6426,7 @@ const c$1 = {
   props: o$m
 };
 const o$l = {};
-const c = {
+const c$1 = {
   icon: BoxIcon,
   category: "hidden",
   label: "Spinner",
@@ -6443,7 +6438,7 @@ const c = {
   initialProps: ["id", "class"],
   props: o$l
 };
-const e$i = {
+const e$f = {
   href: {
     required: false,
     control: "text",
@@ -6472,9 +6467,9 @@ const m$6 = {
   icon: XmlIcon,
   description: "XML Node",
   initialProps: ["tag"],
-  props: e$i
+  props: e$f
 };
-const e$h = {
+const e$e = {
   dateStyle: {
     required: false,
     control: "radio",
@@ -6490,15 +6485,15 @@ const e$h = {
     description: "Machine-readable value"
   }
 };
-const a$4 = {
+const a$2 = {
   category: "xml",
   description: "Converts machine-readable date and time to ISO format.",
   icon: CalendarIcon,
   order: 7,
   initialProps: ["datetime", "dateStyle"],
-  props: e$h
+  props: e$e
 };
-const e$g = {
+const e$d = {
   country: {
     required: false,
     control: "select",
@@ -6800,7 +6795,7 @@ const e$g = {
     options: ["full", "long", "medium", "short", "none"]
   }
 };
-const r$b = {
+const r$9 = {
   category: "localization",
   description: "Converts machine-readable date and time to a human-readable format.",
   contentModel: {
@@ -6811,7 +6806,7 @@ const r$b = {
     time
   },
   initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"],
-  props: e$g
+  props: e$d
 };
 const o$k = {};
 const o$j = {
@@ -6822,7 +6817,7 @@ const o$j = {
       value: { type: "keyword", value: "block" }
     }
   ]
-}, p$1 = {
+}, p$2 = {
   presetStyle: o$j,
   initialProps: [
     "id",
@@ -6836,7 +6831,7 @@ const o$j = {
   props: o$k
 };
 const o$i = {};
-const l$1 = {
+const l$2 = {
   option: [
     {
       property: "background-color",
@@ -6850,10 +6845,10 @@ const l$1 = {
       }
     }
   ]
-}, a$3 = {
+}, a$1 = {
   category: "hidden",
   description: "An item within a drop-down menu that users can select as their chosen value.",
-  presetStyle: l$1,
+  presetStyle: l$2,
   states: [
     // Applies when option is being activated (clicked)
     { selector: ":active", label: "Active" },
@@ -6868,7 +6863,7 @@ const l$1 = {
   props: o$i
 };
 const o$h = {};
-const r$a = {
+const r$8 = {
   icon: HeaderIcon,
   description: "Inserts children into the head of the document",
   contentModel: {
@@ -6888,7 +6883,7 @@ const t$8 = {
   props: o$g
 };
 const o$f = {};
-const e$f = {
+const e$c = {
   icon: WindowInfoIcon,
   contentModel: {
     category: "none",
@@ -6898,7 +6893,7 @@ const e$f = {
   props: o$f
 };
 const o$e = {};
-const r$9 = {
+const r$7 = {
   icon: WindowTitleIcon,
   contentModel: {
     category: "none",
@@ -6907,7 +6902,7 @@ const r$9 = {
   props: o$e
 };
 const o$d = {};
-const i$3 = {
+const i$4 = {
   icon: VideoIcon,
   contentModel: {
     category: "instance",
@@ -6948,217 +6943,68 @@ const i$3 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: r$d,
-  Body: i$8,
-  Bold: p$5,
-  Box: g$2,
-  Button: e$t,
+  Blockquote: r$b,
+  Body: i$9,
+  Bold: p$6,
+  Box: g$3,
+  Button: e$q,
   Checkbox: m$7,
-  CodeText: c$2,
-  Form: c$3,
+  CodeText: c$3,
+  Form: c$4,
   Fragment: t$i,
   HeadLink: t$8,
-  HeadMeta: e$f,
-  HeadSlot: r$a,
-  HeadTitle: r$9,
+  HeadMeta: e$c,
+  HeadSlot: r$8,
+  HeadTitle: r$7,
   Heading: m$9,
-  HtmlEmbed: a$8,
-  Image: i$6,
-  Input: l$4,
-  Italic: e$u,
+  HtmlEmbed: a$6,
+  Image: i$7,
+  Input: l$5,
+  Italic: e$r,
   Label: t$b,
-  Link: p$6,
-  List: l$3,
-  ListItem: p$2,
-  MarkdownEmbed: a$7,
-  Option: a$3,
-  Paragraph: i$7,
+  Link: p$7,
+  List: l$4,
+  ListItem: p$3,
+  MarkdownEmbed: a$5,
+  Option: a$1,
+  Paragraph: i$8,
   RadioButton: m$8,
-  RemixForm: p$3,
-  RichTextLink: a$5,
-  Select: p$1,
+  RemixForm: p$4,
+  RichTextLink: a$3,
+  Select: p$2,
   Separator: y$2,
   Slot: o$H,
-  Span: e$v,
+  Span: e$s,
   Subscript: s$4,
   Superscript: o$A,
-  Text: n$7,
-  Textarea: l$2,
-  Time: r$b,
-  Video: i$3,
+  Text: n$6,
+  Textarea: l$3,
+  Time: r$9,
+  Video: i$4,
   Vimeo: s$3,
-  VimeoPlayButton: c$1,
-  VimeoPreviewImage: i$4,
-  VimeoSpinner: c,
+  VimeoPlayButton: c$2,
+  VimeoPreviewImage: i$5,
+  VimeoSpinner: c$1,
   XmlNode: m$6,
-  XmlTime: a$4,
+  XmlTime: a$2,
   YouTube: s$2
 }, Symbol.toStringTag, { value: "Module" }));
-const n$5 = (t2) => new Proxy(
-  {},
-  {
-    get(o2, e2) {
-      return `${t2}${e2}`;
-    }
-  }
-), r$8 = n$5(
-  "@webstudio-is/sdk-components-animation:"
-);
-const a$2 = {
-  category: "animations",
-  description: "Animation Group component is designed to animate its children.",
-  icon: AnimationGroupIcon,
-  order: 0,
-  label: "Animation Group",
-  contentModel: {
-    category: "instance",
-    children: [
-      "instance",
-      r$8.AnimateText,
-      r$8.StaggerAnimation,
-      r$8.VideoAnimation
-    ]
-  },
-  initialProps: ["action"],
-  props: {
-    action: {
-      required: false,
-      control: "animationAction",
-      type: "animationAction",
-      description: "Animation Action"
-    }
-  }
-};
-const e$e = {
-  className: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Classes to which the element belongs"
-  },
-  easing: {
-    description: "Easing function applied within the sliding window.",
-    required: false,
-    control: "select",
-    type: "string",
-    defaultValue: "linear",
-    options: [
-      "linear",
-      "easeIn",
-      "easeInCubic",
-      "easeInQuart",
-      "easeOut",
-      "easeOutCubic",
-      "easeOutQuart",
-      "ease",
-      "easeInOutCubic",
-      "easeInOutQuart"
-    ]
-  },
-  slidingWindow: {
-    description: `Size of the sliding window for the animation:
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+const l$1 = (n2) => new Proxy({}, { get(w2, t2) {
+  return `${n2}${t2}`;
+} }), i$3 = l$1("@webstudio-is/sdk-components-animation:"), c = { category: "animations", description: "Animation Group component is designed to animate its children.", icon: AnimationGroupIcon, order: 0, label: "Animation Group", contentModel: { category: "instance", children: ["instance", i$3.AnimateText, i$3.StaggerAnimation, i$3.VideoAnimation] }, initialProps: ["action"], props: { action: { required: false, control: "animationAction", type: "animationAction", description: "Animation Action" } } }, d$2 = { className: { required: false, control: "text", type: "string", description: "Classes to which the element belongs" }, easing: { description: "Easing function applied within the sliding window.", required: false, control: "select", type: "string", defaultValue: "linear", options: ["linear", "easeIn", "easeInCubic", "easeInQuart", "easeOut", "easeOutCubic", "easeOutQuart", "ease", "easeInOutCubic", "easeInOutQuart"] }, slidingWindow: { description: `Size of the sliding window for the animation:
 - 0: Typewriter effect (no animation).
 - (0..1]: Animates one part of the text at a time.
-- (1..n]: Animates multiple parts of the text within the sliding window.`,
-    required: false,
-    control: "number",
-    type: "number",
-    defaultValue: 5
-  },
-  splitBy: {
-    description: "Defines how the text is split for animation (e.g., by character, space, or symbol).",
-    required: false,
-    control: "select",
-    type: "string",
-    defaultValue: "char",
-    options: ["char", "space", 'symbol "#"', 'symbol "~"']
-  }
-};
-const a$1 = {
-  category: "animations",
-  description: "Text animation allows you to split text by char or by word to animate it.",
-  icon: TextAnimationIcon,
-  order: 1,
-  label: "Text Animation",
-  contentModel: {
-    category: "none",
-    children: ["instance"]
-  },
-  presetStyle: { div },
-  initialProps: ["slidingWindow", "easing", "splitBy"],
-  props: e$e
-};
-const e$d = {
-  className: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Classes to which the element belongs"
-  },
-  easing: {
-    description: "Easing function applied within the sliding window.",
-    required: false,
-    control: "select",
-    type: "string",
-    defaultValue: "linear",
-    options: [
-      "linear",
-      "easeIn",
-      "easeInCubic",
-      "easeInQuart",
-      "easeOut",
-      "easeOutCubic",
-      "easeOutQuart",
-      "ease",
-      "easeInOutCubic",
-      "easeInOutQuart"
-    ]
-  },
-  slidingWindow: {
-    description: `Size of the sliding window for the animation:
+- (1..n]: Animates multiple parts of the text within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 5 }, splitBy: { description: "Defines how the text is split for animation (e.g., by character, space, or symbol).", required: false, control: "select", type: "string", defaultValue: "char", options: ["char", "space", 'symbol "#"', 'symbol "~"'] } }, p$1 = { category: "animations", description: "Text animation allows you to split text by char or by word to animate it.", icon: TextAnimationIcon, order: 1, label: "Text Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing", "splitBy"], props: d$2 }, m$5 = { className: { required: false, control: "text", type: "string", description: "Classes to which the element belongs" }, easing: { description: "Easing function applied within the sliding window.", required: false, control: "select", type: "string", defaultValue: "linear", options: ["linear", "easeIn", "easeInCubic", "easeInQuart", "easeOut", "easeOutCubic", "easeOutQuart", "ease", "easeInOutCubic", "easeInOutQuart"] }, slidingWindow: { description: `Size of the sliding window for the animation:
 - 0: Typewriter effect (no animation).
 - (0..1]: Animates one child at a time.
-- (1..n]: Animates multiple children within the sliding window.`,
-    required: false,
-    control: "number",
-    type: "number",
-    defaultValue: 1
-  }
-};
-const r$7 = {
-  category: "animations",
-  description: "Stagger animation allows you to animate children elements with a sliding window.",
-  icon: StaggerAnimationIcon,
-  order: 4,
-  label: "Stagger Animation",
-  contentModel: {
-    category: "none",
-    children: ["instance"]
-  },
-  presetStyle: { div },
-  initialProps: ["slidingWindow", "easing"],
-  props: e$d
-};
-const e$c = {
-  timeline: { required: false, control: "boolean", type: "boolean" }
-};
-const m$5 = {
-  icon: PlayIcon,
-  label: "Video Animation",
-  contentModel: {
-    category: "none",
-    children: ["instance"]
-  },
-  presetStyle: { div },
-  props: e$c,
-  initialProps: ["timeline"]
-};
+- (1..n]: Animates multiple children within the sliding window.`, required: false, control: "number", type: "number", defaultValue: 1 } }, u$1 = { category: "animations", description: "Stagger animation allows you to animate children elements with a sliding window.", icon: StaggerAnimationIcon, order: 4, label: "Stagger Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, initialProps: ["slidingWindow", "easing"], props: m$5 }, g$2 = { timeline: { required: false, control: "boolean", type: "boolean" } }, h$3 = { icon: PlayIcon, label: "Video Animation", contentModel: { category: "none", children: ["instance"] }, presetStyle: { div }, props: g$2, initialProps: ["timeline"] };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  AnimateChildren: a$2,
-  AnimateText: a$1,
-  StaggerAnimation: r$7,
-  VideoAnimation: m$5
+  AnimateChildren: c,
+  AnimateText: p$1,
+  StaggerAnimation: u$1,
+  VideoAnimation: h$3
 }, Symbol.toStringTag, { value: "Module" }));
 const r$6 = (t2) => new Proxy(
   {},
@@ -7307,7 +7153,7 @@ const S$1 = {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: { p: p$7 },
+  presetStyle: { p: p$8 },
   props: p
 }, H$1 = {
   icon: ButtonElementIcon,
@@ -9200,7 +9046,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.225.0";
+const version = "0.226.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.225.0",
+  "version": "0.226.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -70,16 +70,16 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
     "wrangler": "^3.63.2",
-    "@webstudio-is/css-engine": "0.225.0",
-    "@webstudio-is/http-client": "0.225.0",
-    "@webstudio-is/image": "0.225.0",
-    "@webstudio-is/react-sdk": "0.225.0",
-    "@webstudio-is/sdk": "0.225.0",
-    "@webstudio-is/sdk-components-animation": "0.225.0",
-    "@webstudio-is/sdk-components-react": "0.225.0",
-    "@webstudio-is/sdk-components-react-radix": "0.225.0",
-    "@webstudio-is/sdk-components-react-remix": "0.225.0",
-    "@webstudio-is/sdk-components-react-router": "0.225.0",
+    "@webstudio-is/http-client": "0.226.0",
+    "@webstudio-is/css-engine": "0.226.0",
+    "@webstudio-is/image": "0.226.0",
+    "@webstudio-is/react-sdk": "0.226.0",
+    "@webstudio-is/sdk-components-animation": "0.226.0",
+    "@webstudio-is/sdk": "0.226.0",
+    "@webstudio-is/sdk-components-react": "0.226.0",
+    "@webstudio-is/sdk-components-react-radix": "0.226.0",
+    "@webstudio-is/sdk-components-react-remix": "0.226.0",
+    "@webstudio-is/sdk-components-react-router": "0.226.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/defaults/app/route-templates/html.tsx

@@ -37,7 +37,7 @@ import {
   getRemixParams,
   contactEmail,
 } from "__SERVER__";
-import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
+import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
 
@@ -151,8 +151,8 @@ export const links: LinksFunction = () => {
   if (favIconAsset) {
     result.push({
       rel: "icon",
-      href: imageLoader({
-        src: `${assetBaseUrl}${favIconAsset}`,
+      href: constants.imageLoader({
+        src: `${constants.assetBaseUrl}${favIconAsset}`,
         // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
         width: 144,
         height: 144,
@@ -167,7 +167,7 @@ export const links: LinksFunction = () => {
   for (const asset of pageFontAssets) {
     result.push({
       rel: "preload",
-      href: `${assetBaseUrl}${asset}`,
+      href: `${constants.assetBaseUrl}${asset}`,
       as: "font",
       crossOrigin: "anonymous",
     });
@@ -176,7 +176,7 @@ export const links: LinksFunction = () => {
   for (const backgroundImageAsset of pageBackgroundImageAssets) {
     result.push({
       rel: "preload",
-      href: `${assetBaseUrl}${backgroundImageAsset}`,
+      href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
       as: "image",
     });
   }
@@ -271,8 +271,7 @@ const Outlet = () => {
   return (
     <ReactSdkContext.Provider
       value={{
-        imageLoader,
-        assetBaseUrl,
+        ...constants,
         resources,
         breakpoints,
         onError: console.error,
@@ -285,8 +284,8 @@ const Outlet = () => {
         pageMeta={pageMeta}
         host={host}
         siteName={siteName}
-        imageLoader={imageLoader}
-        assetBaseUrl={assetBaseUrl}
+        imageLoader={constants.imageLoader}
+        assetBaseUrl={constants.assetBaseUrl}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
       <PageSettingsCanonicalLink href={url} />

package/templates/defaults/package.json

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.16.5",
     "@remix-run/react": "2.16.5",
     "@remix-run/server-runtime": "2.16.5",
-    "@webstudio-is/image": "0.225.0",
-    "@webstudio-is/react-sdk": "0.225.0",
-    "@webstudio-is/sdk": "0.225.0",
-    "@webstudio-is/sdk-components-react": "0.225.0",
-    "@webstudio-is/sdk-components-animation": "0.225.0",
-    "@webstudio-is/sdk-components-react-radix": "0.225.0",
-    "@webstudio-is/sdk-components-react-remix": "0.225.0",
+    "@webstudio-is/image": "0.226.0",
+    "@webstudio-is/react-sdk": "0.226.0",
+    "@webstudio-is/sdk": "0.226.0",
+    "@webstudio-is/sdk-components-react": "0.226.0",
+    "@webstudio-is/sdk-components-animation": "0.226.0",
+    "@webstudio-is/sdk-components-react-radix": "0.226.0",
+    "@webstudio-is/sdk-components-react-remix": "0.226.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/react-router/app/route-templates/html.tsx

@@ -36,7 +36,7 @@ import {
   getRemixParams,
   contactEmail,
 } from "__SERVER__";
-import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
+import * as constants from "__CONSTANTS__";
 import css from "__CSS__?url";
 import { sitemap } from "__SITEMAP__";
 
@@ -150,8 +150,8 @@ export const links: LinksFunction = () => {
   if (favIconAsset) {
     result.push({
       rel: "icon",
-      href: imageLoader({
-        src: `${assetBaseUrl}${favIconAsset}`,
+      href: constants.imageLoader({
+        src: `${constants.assetBaseUrl}${favIconAsset}`,
         // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
         width: 144,
         height: 144,
@@ -166,7 +166,7 @@ export const links: LinksFunction = () => {
   for (const asset of pageFontAssets) {
     result.push({
       rel: "preload",
-      href: `${assetBaseUrl}${asset}`,
+      href: `${constants.assetBaseUrl}${asset}`,
       as: "font",
       crossOrigin: "anonymous",
     });
@@ -175,7 +175,7 @@ export const links: LinksFunction = () => {
   for (const backgroundImageAsset of pageBackgroundImageAssets) {
     result.push({
       rel: "preload",
-      href: `${assetBaseUrl}${backgroundImageAsset}`,
+      href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
       as: "image",
     });
   }
@@ -270,8 +270,7 @@ const Outlet = () => {
   return (
     <ReactSdkContext.Provider
       value={{
-        imageLoader,
-        assetBaseUrl,
+        ...constants,
         resources,
         breakpoints,
         onError: console.error,
@@ -284,8 +283,8 @@ const Outlet = () => {
         pageMeta={pageMeta}
         host={host}
         siteName={siteName}
-        imageLoader={imageLoader}
-        assetBaseUrl={assetBaseUrl}
+        imageLoader={constants.imageLoader}
+        assetBaseUrl={constants.assetBaseUrl}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
     </ReactSdkContext.Provider>

package/templates/react-router/package.json

@@ -10,13 +10,13 @@
   "dependencies": {
     "@react-router/dev": "^7.5.3",
     "@react-router/fs-routes": "^7.5.3",
-    "@webstudio-is/image": "0.225.0",
-    "@webstudio-is/react-sdk": "0.225.0",
-    "@webstudio-is/sdk": "0.225.0",
-    "@webstudio-is/sdk-components-animation": "0.225.0",
-    "@webstudio-is/sdk-components-react-radix": "0.225.0",
-    "@webstudio-is/sdk-components-react-router": "0.225.0",
-    "@webstudio-is/sdk-components-react": "0.225.0",
+    "@webstudio-is/image": "0.226.0",
+    "@webstudio-is/react-sdk": "0.226.0",
+    "@webstudio-is/sdk": "0.226.0",
+    "@webstudio-is/sdk-components-animation": "0.226.0",
+    "@webstudio-is/sdk-components-react-radix": "0.226.0",
+    "@webstudio-is/sdk-components-react-router": "0.226.0",
+    "@webstudio-is/sdk-components-react": "0.226.0",
     "isbot": "^5.1.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

package/templates/react-router-docker/app/constants.mjs

@@ -4,6 +4,19 @@
  */
 export const assetBaseUrl = "/assets/";
 
+/**
+ * URL.canParse(props.src)
+ * @type {(url: string) => boolean}
+ */
+const UrlCanParse = (url) => {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /**
  * @type {import("@webstudio-is/image").ImageLoader}
  */
@@ -12,7 +25,7 @@ export const imageLoader = (props) => {
     return props.src;
   }
   // handle absolute urls
-  const path = URL.canParse(props.src) ? `/${props.src}` : props.src;
+  const path = UrlCanParse(props.src) ? `/${props.src}` : props.src;
   // https://github.com/unjs/ipx?tab=readme-ov-file#modifiers
   return `/_image/w_${props.width},q_${props.quality}${path}`;
 };

package/templates/ssg/package.json

@@ -8,12 +8,12 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@webstudio-is/image": "0.225.0",
-    "@webstudio-is/react-sdk": "0.225.0",
-    "@webstudio-is/sdk": "0.225.0",
-    "@webstudio-is/sdk-components-react": "0.225.0",
-    "@webstudio-is/sdk-components-animation": "0.225.0",
-    "@webstudio-is/sdk-components-react-radix": "0.225.0",
+    "@webstudio-is/image": "0.226.0",
+    "@webstudio-is/react-sdk": "0.226.0",
+    "@webstudio-is/sdk": "0.226.0",
+    "@webstudio-is/sdk-components-react": "0.226.0",
+    "@webstudio-is/sdk-components-animation": "0.226.0",
+    "@webstudio-is/sdk-components-react-radix": "0.226.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vike": "^0.4.229"