webstudio 0.208.0 → 0.209.0

package/lib/cli.js

@@ -837,6 +837,22 @@ var toValue = (styleValue, transformValue) => {
     }
     return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
   }
+  if (value.type === "shadow") {
+    let shadow = `${toValue(value.offsetX)} ${toValue(value.offsetY)}`;
+    if (value.blur) {
+      shadow += ` ${toValue(value.blur)}`;
+    }
+    if (value.spread) {
+      shadow += ` ${toValue(value.spread)}`;
+    }
+    if (value.color) {
+      shadow += ` ${toValue(value.color)}`;
+    }
+    if (value.position === "inset") {
+      shadow += ` inset`;
+    }
+    return shadow;
+  }
   if (value.type === "function") {
     if (value.hidden === true) {
       return "";
@@ -937,12 +953,23 @@ var TupleValue = z.object({
   value: z.array(TupleValueItem),
   hidden: z.boolean().optional()
 });
+var ShadowValue = z.object({
+  type: z.literal("shadow"),
+  hidden: z.boolean().optional(),
+  position: z.union([z.literal("inset"), z.literal("outset")]),
+  offsetX: z.union([UnitValue, VarValue]),
+  offsetY: z.union([UnitValue, VarValue]),
+  blur: z.union([UnitValue, VarValue]).optional(),
+  spread: z.union([UnitValue, VarValue]).optional(),
+  color: z.union([RgbValue, KeywordValue, VarValue]).optional()
+});
 var LayerValueItem = z.union([
   UnitValue,
   KeywordValue,
   UnparsedValue,
   ImageValue,
   TupleValue,
+  ShadowValue,
   RgbValue,
   InvalidValue,
   FunctionValue,
@@ -966,7 +993,8 @@ var StyleValue = z.union([
   GuaranteedInvalidValue,
   InvalidValue,
   UnsetValue,
-  VarValue
+  VarValue,
+  ShadowValue
 ]);
 var cssWideKeywords = /* @__PURE__ */ new Set([
   "initial",
@@ -1843,7 +1871,13 @@ var MatcherOperation = z.object({
 var Matcher = z.object({
   relation: MatcherRelation,
   component: MatcherOperation.optional(),
-  tag: MatcherOperation.optional()
+  tag: MatcherOperation.optional(),
+  text: z.literal(false).describe(
+    `
+      To disallow text editing on a container instance,
+      use: { relation: 'child', text: false }
+     `
+  ).optional()
 });
 var Matchers = z.union([Matcher, z.array(Matcher)]);
 var DataSourceId = z.string();
@@ -2567,7 +2601,6 @@ z.object({
   icon: z.string(),
   presetStyle: z.optional(z.record(z.string(), z.array(PresetStyleDecl))),
   states: z.optional(z.array(ComponentState)),
-  template: z.optional(WsEmbedTemplate),
   order: z.number().optional()
 });
 var html = [
@@ -3561,29 +3594,6 @@ var isAttributeNameSafe = (attributeName) => {
   illegalAttributeNameCache.set(attributeName, true);
   return false;
 };
-var namespaceEmbedTemplateComponents = (template, namespace, components) => {
-  return template.map((item) => {
-    if (item.type === "text") {
-      return item;
-    }
-    if (item.type === "expression") {
-      return item;
-    }
-    if (item.type === "instance") {
-      const prefix = components.has(item.component) ? `${namespace}:` : "";
-      return {
-        ...item,
-        component: `${prefix}${item.component}`,
-        children: namespaceEmbedTemplateComponents(
-          item.children,
-          namespace,
-          components
-        )
-      };
-    }
-    throw Error("Impossible case");
-  });
-};
 var namespaceMatcher = (namespace, matcher) => {
   var _a2, _b2, _c2, _d2;
   const newMatcher = structuredClone(matcher);
@@ -3619,13 +3629,6 @@ var namespaceMeta = (meta, namespace, components) => {
   if (newMeta.indexWithinAncestor) {
     newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor) ? `${namespace}:${newMeta.indexWithinAncestor}` : newMeta.indexWithinAncestor;
   }
-  if (newMeta.template) {
-    newMeta.template = namespaceEmbedTemplateComponents(
-      newMeta.template,
-      namespace,
-      components
-    );
-  }
   return newMeta;
 };
 var generateAction = ({
@@ -4125,7 +4128,7 @@ const e$5 = {
   icon: SlotComponentIcon,
   order: 5
 };
-const o$3 = {
+const o$5 = {
   type: "container",
   icon: ""
 };
@@ -4139,7 +4142,7 @@ const e$4 = {
     type: "boolean"
   }
 };
-const i$9 = {
+const i$7 = {
   div: [
     {
       property: "display",
@@ -4156,7 +4159,7 @@ const i$9 = {
   label: "HTML Embed",
   description: "Used to add HTML code to the page, such as an SVG or script.",
   icon: EmbedIcon,
-  presetStyle: i$9,
+  presetStyle: i$7,
   order: 2
 };
 ({
@@ -4234,7 +4237,7 @@ var h3 = div;
 var h4 = div;
 var h5 = div;
 var h6 = div;
-var i$8 = div;
+var i$6 = div;
 var img = div;
 var a$b = div;
 var li = div;
@@ -4688,7 +4691,7 @@ const p$c = {
 };
 const r$9 = {
   i: [
-    ...i$8,
+    ...i$6,
     {
       property: "font-style",
       value: { type: "keyword", value: "italic" }
@@ -4882,7 +4885,7 @@ const r$7 = {
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
   ]
-}, i$7 = {
+}, i$5 = {
   type: "container",
   placeholder: "Blockquote",
   icon: BlockquoteIcon,
@@ -5007,7 +5010,7 @@ const p$7 = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, i$6 = {
+}, i$4 = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
@@ -5025,7 +5028,7 @@ const a$1 = {
     ...label,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i$5 = {
+}, i$3 = {
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -5072,7 +5075,7 @@ const l$3 = {
     //{ selector: ":read-write", label: "Read Write" },
   ]
 };
-const i$4 = {
+const i$2 = {
   input: [
     ...radio,
     {
@@ -5088,7 +5091,7 @@ const i$4 = {
   type: "control",
   label: "Radio",
   icon: RadioCheckedIcon,
-  presetStyle: i$4,
+  presetStyle: i$2,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },
@@ -5140,19 +5143,19 @@ const r$5 = {
     component: { $nin: ["Button", "Link", "Heading"] }
   }
 };
-const i$3 = {
+const i$1 = {
   div
 }, c$2 = {
   type: "container",
   icon: YoutubeIcon,
   states: defaultStates,
-  presetStyle: i$3,
+  presetStyle: i$1,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
   }
 };
-const i$2 = {
+const i = {
   ...l$4,
   category: "hidden",
   label: "Preview Image",
@@ -5244,7 +5247,7 @@ const r$2 = {
     { selector: ":optional", label: "Optional" }
   ]
 };
-const o$2 = {
+const o$4 = {
   option: [
     {
       property: "background-color",
@@ -5267,7 +5270,7 @@ const o$2 = {
   type: "control",
   description: "An item within a drop-down menu that users can select as their chosen value.",
   icon: ItemIcon,
-  presetStyle: o$2,
+  presetStyle: o$4,
   states: [
     // Applies when option is being activated (clicked)
     { selector: ":active", label: "Active" },
@@ -5323,15 +5326,15 @@ const p$1 = {
 };
 const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  Blockquote: i$7,
+  Blockquote: i$5,
   Body: n$5,
   Bold: l$5,
   Box: v$3,
   Button: p$b,
   Checkbox: s$1,
-  CodeText: i$6,
+  CodeText: i$4,
   Form: n$3,
-  Fragment: o$3,
+  Fragment: o$5,
   HeadLink: p$3,
   HeadMeta: p$2,
   HeadSlot: r,
@@ -5341,7 +5344,7 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Image: l$4,
   Input: p$a,
   Italic: c$4,
-  Label: i$5,
+  Label: i$3,
   Link: l$6,
   List: d$3,
   ListItem: m$3,
@@ -5362,32 +5365,43 @@ const baseComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   Time: s,
   Vimeo: c$3,
   VimeoPlayButton: p$4,
-  VimeoPreviewImage: i$2,
+  VimeoPreviewImage: i,
   VimeoSpinner: m$2,
   XmlNode: e$1,
   XmlTime: a,
   YouTube: c$2
 }, Symbol.toStringTag, { value: "Module" }));
-const i$1 = {
+const o$3 = {
   category: "general",
   type: "container",
   description: "Animate Children",
   icon: SlotComponentIcon,
   order: 5,
-  label: "Animate Children"
+  label: "Animate Children",
+  constraints: {
+    relation: "child",
+    text: false
+  }
 };
-const i = {
+const o$2 = {
   category: "general",
   type: "container",
   description: "Animate Text",
   icon: TextIcon,
   order: 6,
-  label: "Animate Text"
+  label: "Animate Text",
+  constraints: [
+    { relation: "parent", component: { $eq: "AnimateChildren" } },
+    {
+      relation: "child",
+      text: false
+    }
+  ]
 };
 const animationComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  AnimateChildren: i$1,
-  AnimateText: i
+  AnimateChildren: o$3,
+  AnimateText: o$2
 }, Symbol.toStringTag, { value: "Module" }));
 const remixComponentMetas = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -7105,7 +7119,7 @@ const getDeploymentInstructions = (deployTarget) => {
   }
 };
 const name = "webstudio";
-const version = "0.208.0";
+const version = "0.209.0";
 const description = "Webstudio CLI";
 const author = "Webstudio <github@webstudio.is>";
 const homepage = "https://webstudio.is";
@@ -7150,7 +7164,7 @@ const dependencies = {
   "reserved-identifiers": "^1.0.0",
   tinyexec: "^0.3.2",
   yargs: "^17.7.2",
-  zod: "^3.22.4"
+  zod: "^3.24.2"
 };
 const devDependencies = {
   "@netlify/vite-plugin-react-router": "^1.0.0",
@@ -7167,11 +7181,11 @@ const devDependencies = {
   "@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/css-engine": "workspace:*",
   "@webstudio-is/sdk-components-animation": "workspace:*",
   "@webstudio-is/sdk-components-react": "workspace:*",
   "@webstudio-is/sdk-components-react-radix": "workspace:*",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.208.0",
+  "version": "0.209.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,7 +40,7 @@
     "reserved-identifiers": "^1.0.0",
     "tinyexec": "^0.3.2",
     "yargs": "^17.7.2",
-    "zod": "^3.22.4"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@netlify/vite-plugin-react-router": "^1.0.0",
@@ -68,16 +68,16 @@
     "vite": "^5.4.11",
     "vitest": "^3.0.8",
     "wrangler": "^3.63.2",
-    "@webstudio-is/http-client": "0.208.0",
-    "@webstudio-is/image": "0.208.0",
-    "@webstudio-is/react-sdk": "0.208.0",
-    "@webstudio-is/css-engine": "0.208.0",
-    "@webstudio-is/sdk": "0.208.0",
-    "@webstudio-is/sdk-components-animation": "0.208.0",
-    "@webstudio-is/sdk-components-react": "0.208.0",
-    "@webstudio-is/sdk-components-react-radix": "0.208.0",
-    "@webstudio-is/sdk-components-react-remix": "0.208.0",
-    "@webstudio-is/sdk-components-react-router": "0.208.0",
+    "@webstudio-is/css-engine": "0.209.0",
+    "@webstudio-is/http-client": "0.209.0",
+    "@webstudio-is/image": "0.209.0",
+    "@webstudio-is/react-sdk": "0.209.0",
+    "@webstudio-is/sdk-components-animation": "0.209.0",
+    "@webstudio-is/sdk": "0.209.0",
+    "@webstudio-is/sdk-components-react": "0.209.0",
+    "@webstudio-is/sdk-components-react-radix": "0.209.0",
+    "@webstudio-is/sdk-components-react-remix": "0.209.0",
+    "@webstudio-is/sdk-components-react-router": "0.209.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/defaults/package.json

@@ -11,13 +11,13 @@
     "@remix-run/node": "2.16.0",
     "@remix-run/react": "2.16.0",
     "@remix-run/server-runtime": "2.16.0",
-    "@webstudio-is/image": "0.208.0",
-    "@webstudio-is/react-sdk": "0.208.0",
-    "@webstudio-is/sdk": "0.208.0",
-    "@webstudio-is/sdk-components-react": "0.208.0",
-    "@webstudio-is/sdk-components-animation": "0.208.0",
-    "@webstudio-is/sdk-components-react-radix": "0.208.0",
-    "@webstudio-is/sdk-components-react-remix": "0.208.0",
+    "@webstudio-is/image": "0.209.0",
+    "@webstudio-is/react-sdk": "0.209.0",
+    "@webstudio-is/sdk": "0.209.0",
+    "@webstudio-is/sdk-components-react": "0.209.0",
+    "@webstudio-is/sdk-components-animation": "0.209.0",
+    "@webstudio-is/sdk-components-react-radix": "0.209.0",
+    "@webstudio-is/sdk-components-react-remix": "0.209.0",
     "isbot": "^5.1.23",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"

package/templates/react-router/package.json

@@ -10,13 +10,13 @@
   "dependencies": {
     "@react-router/dev": "^7.3.0",
     "@react-router/fs-routes": "^7.3.0",
-    "@webstudio-is/image": "0.208.0",
-    "@webstudio-is/react-sdk": "0.208.0",
-    "@webstudio-is/sdk": "0.208.0",
-    "@webstudio-is/sdk-components-animation": "0.208.0",
-    "@webstudio-is/sdk-components-react-radix": "0.208.0",
-    "@webstudio-is/sdk-components-react-router": "0.208.0",
-    "@webstudio-is/sdk-components-react": "0.208.0",
+    "@webstudio-is/image": "0.209.0",
+    "@webstudio-is/react-sdk": "0.209.0",
+    "@webstudio-is/sdk": "0.209.0",
+    "@webstudio-is/sdk-components-animation": "0.209.0",
+    "@webstudio-is/sdk-components-react-radix": "0.209.0",
+    "@webstudio-is/sdk-components-react-router": "0.209.0",
+    "@webstudio-is/sdk-components-react": "0.209.0",
     "isbot": "^5.1.23",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",

package/templates/saas-helpers/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "worktop": "0.8.0-next.18",
-    "zod": "^3.22.4"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "fast-glob": "^3.3.2"

package/templates/ssg/package.json

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