@webstudio-is/sdk-components-animation 0.216.0 → 0.217.0

package/lib/animate-children.ws.js

@@ -1,16 +1,21 @@
-import { AnimationGroupIcon as i } from "@webstudio-is/icons/svg";
-const o = {
+import { AnimationGroupIcon as n } from "@webstudio-is/icons/svg";
+import { animation as i } from "./shared/meta.js";
+const a = {
   category: "animations",
-  type: "container",
   description: "Animation Group component is designed to animate its children.",
-  icon: i,
-  order: 5,
+  icon: n,
+  order: 0,
   label: "Animation Group",
-  constraints: {
-    relation: "child",
-    text: !1
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      i.AnimateText,
+      i.StaggerAnimation,
+      i.VideoAnimation
+    ]
   }
-}, t = {
+}, e = {
   props: {
     action: {
       required: !1,
@@ -22,6 +27,6 @@ const o = {
   initialProps: ["action"]
 };
 export {
-  o as meta,
-  t as propsMeta
+  a as meta,
+  e as propsMeta
 };

package/lib/animate-text.ws.js

@@ -1,29 +1,24 @@
-import { TextAnimationIcon as t } from "@webstudio-is/icons/svg";
-import { animation as o } from "./shared/meta.js";
+import { TextAnimationIcon as o } from "@webstudio-is/icons/svg";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/animate-text.props.js";
-import { div as n } from "@webstudio-is/sdk/normalize.css";
-const p = {
+const a = {
   category: "animations",
-  type: "container",
   description: "Text animation allows you to split text by char or by word to animate it.",
-  icon: t,
-  order: 6,
+  icon: o,
+  order: 1,
   label: "Text Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: o.AnimateChildren } },
-    {
-      relation: "child",
-      text: !1
-    }
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
   presetStyle: {
-    div: n
+    div: t
   }
 }, s = {
   props: i,
   initialProps: ["slidingWindow", "easing", "splitBy"]
 };
 export {
-  p as meta,
+  a as meta,
   s as propsMeta
 };

package/lib/stagger-animation.ws.js

@@ -1,29 +1,24 @@
 import { StaggerAnimationIcon as i } from "@webstudio-is/icons/svg";
-import { animation as t } from "./shared/meta.js";
-import { props as n } from "./__generated__/stagger-animation.props.js";
 import { div as o } from "@webstudio-is/sdk/normalize.css";
-const s = {
+import { props as n } from "./__generated__/stagger-animation.props.js";
+const r = {
   category: "animations",
-  type: "container",
   description: "Stagger animation allows you to animate children elements with a sliding window.",
   icon: i,
-  order: 6,
+  order: 4,
   label: "Stagger Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: t.AnimateChildren } },
-    {
-      relation: "child",
-      text: !1
-    }
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
   presetStyle: {
     div: o
   }
-}, l = {
+}, s = {
   props: n,
   initialProps: ["slidingWindow", "easing"]
 };
 export {
-  s as meta,
-  l as propsMeta
+  r as meta,
+  s as propsMeta
 };

package/lib/video-animation.template.js

@@ -1,13 +1,11 @@
 import { jsx as o } from "react/jsx-runtime";
 import { $ as i } from "@webstudio-is/template";
-import { YoutubeIcon as t } from "@webstudio-is/icons/svg";
-import { animation as r } from "./shared/proxy.js";
-const p = {
+import { animation as t } from "./shared/proxy.js";
+const a = {
   category: "animations",
   description: "Video Animation",
   order: 2,
-  icon: t,
-  template: /* @__PURE__ */ o(r.VideoAnimation, { children: /* @__PURE__ */ o(
+  template: /* @__PURE__ */ o(t.VideoAnimation, { children: /* @__PURE__ */ o(
     i.Video,
     {
       preload: "auto",
@@ -19,5 +17,5 @@ const p = {
   ) })
 };
 export {
-  p as meta
+  a as meta
 };

package/lib/video-animation.ws.js

@@ -1,22 +1,17 @@
-import { Youtube1cIcon as o } from "@webstudio-is/icons/svg";
-import { animation as t } from "./shared/meta.js";
-import { props as i } from "./__generated__/video-animation.props.js";
-const a = {
-  type: "container",
+import { PlayIcon as o } from "@webstudio-is/icons/svg";
+import { props as n } from "./__generated__/video-animation.props.js";
+const i = {
   icon: o,
   label: "Video Animation",
-  constraints: [
-    { relation: "parent", component: { $eq: t.AnimateChildren } },
-    {
-      relation: "child",
-      text: !1
-    }
-  ]
-}, m = {
-  props: i,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  }
+}, r = {
+  props: n,
   initialProps: ["timeline"]
 };
 export {
-  a as meta,
-  m as propsMeta
+  i as meta,
+  r as propsMeta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-animation",
-  "version": "0.216.0",
+  "version": "0.217.0",
   "description": "Webstudio components for animation",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -49,10 +49,10 @@
     "nanostores": "^0.11.3",
     "react-error-boundary": "^5.0.0",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-engine": "0.216.0",
-    "@webstudio-is/icons": "0.216.0",
-    "@webstudio-is/sdk": "0.216.0",
-    "@webstudio-is/react-sdk": "0.216.0"
+    "@webstudio-is/css-engine": "0.217.0",
+    "@webstudio-is/icons": "0.217.0",
+    "@webstudio-is/react-sdk": "0.217.0",
+    "@webstudio-is/sdk": "0.217.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
@@ -66,12 +66,12 @@
     "vitest": "^3.0.8",
     "zod": "^3.24.2",
     "@webstudio-is/css-data": "0.0.0",
+    "@webstudio-is/sdk-cli": "^0.94.0",
     "@webstudio-is/design-system": "0.0.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/sdk-components-react": "0.216.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.216.0"
+    "@webstudio-is/sdk-components-react": "0.217.0",
+    "@webstudio-is/template": "0.217.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",