@elucim/dsl 0.2.0 → 0.3.0

package/README.md

@@ -126,6 +126,8 @@ Every document has this structure:
 | `rect` | `x`, `y`, `width`, `height` | Rectangle |
 | `polygon` | `points` (array of [x,y]) | Polygon/polyline |
 | `text` | `x`, `y`, `content` | Text element |
+| `image` | `src`, `x`, `y`, `width`, `height` | Embed external images (PNG, SVG, etc.) |
+| `barChart` | `bars` | Animated bar chart with labels and colors |
 
 #### Math Visualizations
 | Type | Required Props | Description |
@@ -154,7 +156,7 @@ Every document has this structure:
 | Type | Key Props | Description |
 |------|----------|-------------|
 | `sequence` | `from`, `durationInFrames` | Time-offset wrapper |
-| `group` | `children` | Logical grouping |
+| `group` | `children` | Logical grouping with shared transforms (rotation, scale, translate) and zIndex sorting of children |
 
 ### Inline Animation Props
 
@@ -164,6 +166,15 @@ All primitives support these optional animation props directly:
 - `draw?: number` — Progressive stroke draw over N frames
 - `easing?: string | { type, ... }` — Easing function
 
+### Spatial Transform Props
+
+All primitives and groups support these optional spatial transform props:
+- `rotation?: number` — Rotate element in degrees
+- `rotationOrigin?: [number, number]` — Center of rotation [cx, cy]
+- `scale?: number` — Uniform scale factor
+- `translate?: [number, number]` — Offset [dx, dy]
+- `zIndex?: number` — Stacking order (higher renders on top)
+
 ### Easing
 
 **Named easings:** `linear`, `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeInSine`, `easeOutSine`, `easeInOutSine`, `easeInExpo`, `easeOutExpo`, `easeInOutExpo`, `easeInBack`, `easeOutBack`, `easeOutElastic`, `easeOutBounce`

package/dist/index.d.ts

@@ -80,6 +80,33 @@ export declare interface BarChartNode {
     zIndex?: number;
 }
 
+export declare interface BezierCurveNode {
+    type: 'bezierCurve';
+    id?: string;
+    x1: number;
+    y1: number;
+    cx1: number;
+    cy1: number;
+    cx2?: number;
+    cy2?: number;
+    x2: number;
+    y2: number;
+    stroke?: string;
+    strokeWidth?: number;
+    fill?: string;
+    strokeDasharray?: string;
+    opacity?: number;
+    fadeIn?: number;
+    fadeOut?: number;
+    draw?: number;
+    easing?: EasingSpec;
+    rotation?: number;
+    rotationOrigin?: [number, number];
+    scale?: number | [number, number];
+    translate?: [number, number];
+    zIndex?: number;
+}
+
 export declare interface CircleNode {
     type: 'circle';
     id?: string;
@@ -154,7 +181,7 @@ declare type EasingName = 'linear' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQu
 
 export declare type EasingSpec = EasingName | SpringEasing | CubicBezierEasing;
 
-export declare type ElementNode = SequenceNode | GroupNode | CircleNode | LineNode | ArrowNode | RectNode | PolygonNode | TextNode | ImageNode | AxesNode | FunctionPlotNode | VectorNode | VectorFieldNode | MatrixNode | GraphNode | LaTeXNode | BarChartNode | FadeInNode | FadeOutNode | DrawNode | WriteNode | TransformNode | MorphNode | StaggerNode | ParallelNode | PlayerNode | SceneNode;
+export declare type ElementNode = SequenceNode | GroupNode | BezierCurveNode | CircleNode | LineNode | ArrowNode | RectNode | PolygonNode | TextNode | ImageNode | AxesNode | FunctionPlotNode | VectorNode | VectorFieldNode | MatrixNode | GraphNode | LaTeXNode | BarChartNode | FadeInNode | FadeOutNode | DrawNode | WriteNode | TransformNode | MorphNode | StaggerNode | ParallelNode | PlayerNode | SceneNode;
 
 export declare interface ElucimDocument {
     /** JSON Schema URL for editor autocomplete */
@@ -252,7 +279,7 @@ export declare interface GroupNode {
     zIndex?: number;
 }
 
-declare interface ImageNode {
+export declare interface ImageNode {
     type: 'image';
     id?: string;
     src: string;

package/dist/index.js

@@ -1,7 +1,7 @@
-import { easeOutBounce as J, easeOutElastic as Z, easeOutBack as ee, easeInBack as te, easeInOutExpo as ae, easeOutExpo as ie, easeInExpo as re, easeInOutSine as ne, easeOutSine as se, easeInSine as ce, easeInOutQuart as le, easeOutQuart as ue, easeInQuart as he, easeInOutCubic as fe, easeOutCubic as ge, easeInCubic as oe, easeInOutQuad as ye, easeOutQuad as me, easeInQuad as be, linear as xe, spring as ve, cubicBezier as de, Presentation as we, Player as ke, Scene as Ie, Slide as $e, Parallel as Se, Stagger as Oe, Morph as Ae, Transform as Ce, Write as ze, Draw as Ee, FadeOut as Fe, FadeIn as Pe, BarChart as Re, LaTeX as pe, Graph as Ne, Matrix as Me, VectorField as We, Vector as _e, FunctionPlot as De, Axes as Te, Image as Le, Text as je, Polygon as qe, Rect as Be, Arrow as Ue, Line as Ve, Circle as He, Group as Ge, Sequence as Qe } from "@elucim/core";
+import { easeOutBounce as J, easeOutElastic as Z, easeOutBack as ee, easeInBack as te, easeInOutExpo as ae, easeOutExpo as ie, easeInExpo as re, easeInOutSine as ne, easeOutSine as se, easeInSine as ce, easeInOutQuart as le, easeOutQuart as ue, easeInQuart as he, easeInOutCubic as fe, easeOutCubic as ge, easeInCubic as ye, easeInOutQuad as oe, easeOutQuad as me, easeInQuad as be, linear as xe, spring as ve, cubicBezier as we, Presentation as de, Player as ke, Scene as Ie, Slide as $e, Parallel as Se, Stagger as Oe, Morph as Ce, Transform as Ae, Write as ze, Draw as Ee, FadeOut as Fe, FadeIn as Pe, BarChart as Re, LaTeX as Ne, Graph as We, Matrix as Me, VectorField as _e, Vector as De, FunctionPlot as pe, Axes as Te, Image as Le, Text as je, Polygon as qe, Rect as Be, Arrow as Ue, Line as Ve, Circle as He, BezierCurve as Ge, Group as Qe, Sequence as Ke } from "@elucim/core";
 import { jsxs as L, jsx as s } from "react/jsx-runtime";
 import j from "react";
-const N = {
+const W = {
   sin: Math.sin,
   cos: Math.cos,
   tan: Math.tan,
@@ -26,7 +26,7 @@ const N = {
   E: Math.E,
   TAU: Math.PI * 2
 };
-function W(e) {
+function _(e) {
   const a = [];
   let t = 0;
   for (; t < e.length; ) {
@@ -89,7 +89,7 @@ function W(e) {
   }
   return a.push({ type: "EOF", value: "", pos: t }), a;
 }
-class _ {
+class D {
   constructor(a) {
     this.pos = 0, this.tokens = a;
   }
@@ -167,9 +167,9 @@ class _ {
         if (this.peek().type !== "RPAREN")
           for (i.push(this.parseExpression()); this.peek().type === "COMMA"; )
             this.advance(), i.push(this.parseExpression());
-        if (this.expect("RPAREN"), !Object.prototype.hasOwnProperty.call(N, t))
+        if (this.expect("RPAREN"), !Object.prototype.hasOwnProperty.call(W, t))
           throw new x(
-            `Unknown function '${t}'. Available: ${Object.keys(N).join(", ")}`,
+            `Unknown function '${t}'. Available: ${Object.keys(W).join(", ")}`,
             a.pos
           );
         return { kind: "call", name: t, args: i };
@@ -195,7 +195,7 @@ class _ {
     );
   }
 }
-function w(e, a) {
+function d(e, a) {
   switch (e.kind) {
     case "number":
       return e.value;
@@ -203,10 +203,10 @@ function w(e, a) {
       if (Object.prototype.hasOwnProperty.call(a, e.name)) return a[e.name];
       throw new x(`Unknown variable '${e.name}'`, 0);
     case "unary":
-      const t = w(e.operand, a);
+      const t = d(e.operand, a);
       return e.op === "-" ? -t : t;
     case "binary": {
-      const i = w(e.left, a), r = w(e.right, a);
+      const i = d(e.left, a), r = d(e.right, a);
       switch (e.op) {
         case "+":
           return i + r;
@@ -222,11 +222,11 @@ function w(e, a) {
       break;
     }
     case "call": {
-      const i = N[e.name], r = e.args.map((n) => w(n, a));
+      const i = W[e.name], r = e.args.map((n) => d(n, a));
       return i(...r);
     }
     case "array":
-      return e.elements.map((i) => w(i, a));
+      return e.elements.map((i) => d(i, a));
   }
   throw new x("Invalid AST node", 0);
 }
@@ -235,23 +235,23 @@ class x extends Error {
     super(a), this.name = "ExpressionError", this.position = t;
   }
 }
-function Ke(e) {
-  const a = W(e), t = new _(a).parse();
-  return (i) => w(t, i);
-}
 function Xe(e) {
-  const a = W(e), t = new _(a).parse();
+  const a = _(e), t = new D(a).parse();
+  return (i) => d(t, i);
+}
+function Ye(e) {
+  const a = _(e), t = new D(a).parse();
   if (t.kind !== "array" || t.elements.length !== 2)
     throw new x(
       'Vector expression must be an array of 2 elements, e.g. "[-y, x]"',
       0
     );
-  return (i) => w(t, i);
+  return (i) => d(t, i);
 }
 function H(e) {
   try {
-    const a = W(e);
-    return new _(a).parse(), null;
+    const a = _(e);
+    return new D(a).parse(), null;
   } catch (a) {
     return a instanceof x ? `${a.message} (at position ${a.position})` : String(a);
   }
@@ -260,8 +260,8 @@ const M = {
   linear: xe,
   easeInQuad: be,
   easeOutQuad: me,
-  easeInOutQuad: ye,
-  easeInCubic: oe,
+  easeInOutQuad: oe,
+  easeInCubic: ye,
   easeOutCubic: ge,
   easeInOutCubic: fe,
   easeInQuart: he,
@@ -278,7 +278,7 @@ const M = {
   easeOutElastic: Z,
   easeOutBounce: J
 };
-function c(e) {
+function l(e) {
   if (e !== void 0) {
     if (typeof e == "string") {
       const a = M[e];
@@ -295,24 +295,25 @@ function c(e) {
         mass: e.mass
       });
     if (e.type === "cubicBezier")
-      return de(e.x1, e.y1, e.x2, e.y2);
+      return we(e.x1, e.y1, e.x2, e.y2);
     throw new Error(`Unknown easing type: ${e.type}`);
   }
 }
 const R = Object.keys(M);
-function Ye(e) {
+function Je(e) {
   const a = [];
   if (!e || typeof e != "object")
     return a.push({ path: "", message: "Document must be an object", severity: "error" }), { valid: !1, errors: a };
   const t = e;
-  return t.version !== "1.0" && a.push({ path: "version", message: `Expected version "1.0", got "${t.version}"`, severity: "error" }), !t.root || typeof t.root != "object" ? (a.push({ path: "root", message: 'Missing or invalid "root" node', severity: "error" }), { valid: a.filter((i) => i.severity === "error").length === 0, errors: a }) : (Je(t.root, "root", a), {
+  return t.version !== "1.0" && a.push({ path: "version", message: `Expected version "1.0", got "${t.version}"`, severity: "error" }), !t.root || typeof t.root != "object" ? (a.push({ path: "root", message: 'Missing or invalid "root" node', severity: "error" }), { valid: a.filter((i) => i.severity === "error").length === 0, errors: a }) : (Ze(t.root, "root", a), {
     valid: a.filter((i) => i.severity === "error").length === 0,
     errors: a
   });
 }
-const B = ["scene", "player", "presentation"], p = [
+const B = ["scene", "player", "presentation"], N = [
   "sequence",
   "group",
+  "bezierCurve",
   "circle",
   "line",
   "arrow",
@@ -339,19 +340,19 @@ const B = ["scene", "player", "presentation"], p = [
   "player",
   "scene"
 ], U = ["none", "fade", "slide-left", "slide-up", "zoom"];
-function Je(e, a, t) {
+function Ze(e, a, t) {
   const i = e.type;
   if (!B.includes(i)) {
     t.push({ path: `${a}.type`, message: `Root type must be one of: ${B.join(", ")}. Got "${i}"`, severity: "error" });
     return;
   }
-  i === "scene" || i === "player" ? G(e, a, i, t) : i === "presentation" && Ze(e, a, t);
+  i === "scene" || i === "player" ? G(e, a, i, t) : i === "presentation" && et(e, a, t);
 }
 function G(e, a, t, i) {
-  St(e, "durationInFrames", a, i), h(e, "width", a, i), h(e, "height", a, i), h(e, "fps", a, i), v(e, "background", a, i), t === "player" && (S(e, "controls", a, i), S(e, "loop", a, i), S(e, "autoPlay", a, i)), d(e, a, i);
+  Ct(e, "durationInFrames", a, i), h(e, "width", a, i), h(e, "height", a, i), h(e, "fps", a, i), v(e, "background", a, i), t === "player" && (O(e, "controls", a, i), O(e, "loop", a, i), O(e, "autoPlay", a, i)), w(e, a, i);
 }
-function Ze(e, a, t) {
-  if (h(e, "width", a, t), h(e, "height", a, t), v(e, "background", a, t), h(e, "transitionDuration", a, t), S(e, "showHud", a, t), S(e, "showNotes", a, t), e.transition !== void 0 && (U.includes(e.transition) || t.push({
+function et(e, a, t) {
+  if (h(e, "width", a, t), h(e, "height", a, t), v(e, "background", a, t), h(e, "transitionDuration", a, t), O(e, "showHud", a, t), O(e, "showNotes", a, t), e.transition !== void 0 && (U.includes(e.transition) || t.push({
     path: `${a}.transition`,
     message: `Invalid transition "${e.transition}". Must be one of: ${U.join(", ")}`,
     severity: "error"
@@ -360,10 +361,10 @@ function Ze(e, a, t) {
     return;
   }
   e.slides.length === 0 && t.push({ path: `${a}.slides`, message: "Presentation must have at least one slide", severity: "warning" }), e.slides.forEach((i, r) => {
-    et(i, `${a}.slides[${r}]`, t);
+    tt(i, `${a}.slides[${r}]`, t);
   });
 }
-function et(e, a, t) {
+function tt(e, a, t) {
   if (!e || typeof e != "object") {
     t.push({ path: a, message: "Slide must be an object", severity: "error" });
     return;
@@ -372,7 +373,7 @@ function et(e, a, t) {
     Q(i, `${a}.children[${r}]`, t);
   }) : t.push({ path: `${a}.children`, message: "Slide children must be an array", severity: "error" }));
 }
-function d(e, a, t) {
+function w(e, a, t) {
   if (!Array.isArray(e.children)) {
     t.push({ path: `${a}.children`, message: 'Expected "children" array', severity: "error" });
     return;
@@ -387,84 +388,87 @@ function Q(e, a, t) {
     return;
   }
   const i = e.type;
-  if (!i || !p.includes(i)) {
-    const r = i ? K(i, p) : "";
+  if (!i || !N.includes(i)) {
+    const r = i ? K(i, N) : "";
     t.push({
       path: `${a}.type`,
-      message: `Unknown element type "${i}".${r} Valid types: ${p.join(", ")}`,
+      message: `Unknown element type "${i}".${r} Valid types: ${N.join(", ")}`,
       severity: "error"
     });
     return;
   }
   switch (i) {
+    case "bezierCurve":
+      at(e, a, t);
+      break;
     case "circle":
-      tt(e, a, t);
+      it(e, a, t);
       break;
     case "line":
-      at(e, a, t);
+      rt(e, a, t);
       break;
     case "arrow":
-      it(e, a, t);
+      nt(e, a, t);
       break;
     case "rect":
-      rt(e, a, t);
+      st(e, a, t);
       break;
     case "polygon":
-      nt(e, a, t);
+      ct(e, a, t);
       break;
     case "text":
-      st(e, a, t);
+      lt(e, a, t);
       break;
     case "image":
-      kt(e, a, t);
+      $t(e, a, t);
       break;
     case "axes":
-      ct(e, a, t);
+      ut(e, a, t);
       break;
     case "functionPlot":
-      lt(e, a, t);
+      ht(e, a, t);
       break;
     case "vector":
-      ut(e, a, t);
+      ft(e, a, t);
       break;
     case "vectorField":
-      ht(e, a, t);
+      gt(e, a, t);
       break;
     case "matrix":
-      ft(e, a, t);
+      yt(e, a, t);
       break;
     case "graph":
-      gt(e, a, t);
+      ot(e, a, t);
       break;
     case "latex":
-      ot(e, a, t);
+      mt(e, a, t);
       break;
     case "barChart":
-      $t(e, a, t);
+      Ot(e, a, t);
       break;
     case "sequence":
-      yt(e, a, t);
+      bt(e, a, t);
       break;
     case "group":
-      It(e, a, t);
+      St(e, a, t);
       break;
     case "parallel":
-      d(e, a, t);
+      w(e, a, t);
       break;
     case "fadeIn":
     case "fadeOut":
     case "draw":
     case "write":
-      mt(e, a, t);
+      xt(e, a, t);
       break;
     case "transform":
-      bt(e, a, t);
+      vt(e, a, t);
       break;
     case "morph":
-      xt(e, a, t);
+      wt(e, a, t);
       break;
     case "stagger":
-      vt(e, a, t);
+      dt(e, a, t);
       break;
     case "scene":
     case "player":
@@ -472,79 +476,82 @@ function Q(e, a, t) {
       break;
   }
 }
-function tt(e, a, t) {
-  l(e, "cx", a, t), l(e, "cy", a, t), k(e, "r", a, t), o(e, a, t);
-}
 function at(e, a, t) {
-  l(e, "x1", a, t), l(e, "y1", a, t), l(e, "x2", a, t), l(e, "y2", a, t), o(e, a, t);
+  c(e, "x1", a, t), c(e, "y1", a, t), c(e, "cx1", a, t), c(e, "cy1", a, t), c(e, "x2", a, t), c(e, "y2", a, t), e.cx2 !== void 0 && $(e, "cx2", a, t), e.cy2 !== void 0 && $(e, "cy2", a, t), y(e, a, t);
 }
 function it(e, a, t) {
-  l(e, "x1", a, t), l(e, "y1", a, t), l(e, "x2", a, t), l(e, "y2", a, t), o(e, a, t);
+  c(e, "cx", a, t), c(e, "cy", a, t), k(e, "r", a, t), y(e, a, t);
 }
 function rt(e, a, t) {
-  l(e, "x", a, t), l(e, "y", a, t), k(e, "width", a, t), k(e, "height", a, t), o(e, a, t);
+  c(e, "x1", a, t), c(e, "y1", a, t), c(e, "x2", a, t), c(e, "y2", a, t), y(e, a, t);
 }
 function nt(e, a, t) {
-  Array.isArray(e.points) ? e.points.length < 3 ? t.push({ path: `${a}.points`, message: "Polygon requires at least 3 points", severity: "error" }) : e.points.forEach((i, r) => {
-    (!Array.isArray(i) || i.length !== 2 || typeof i[0] != "number" || typeof i[1] != "number") && t.push({ path: `${a}.points[${r}]`, message: "Each point must be [number, number]", severity: "error" });
-  }) : t.push({ path: `${a}.points`, message: 'Polygon requires a "points" array', severity: "error" }), o(e, a, t);
+  c(e, "x1", a, t), c(e, "y1", a, t), c(e, "x2", a, t), c(e, "y2", a, t), y(e, a, t);
 }
 function st(e, a, t) {
-  l(e, "x", a, t), l(e, "y", a, t), typeof e.content != "string" && t.push({ path: `${a}.content`, message: 'Text requires a "content" string', severity: "error" }), o(e, a, t);
+  c(e, "x", a, t), c(e, "y", a, t), k(e, "width", a, t), k(e, "height", a, t), y(e, a, t);
 }
 function ct(e, a, t) {
-  y(e, "domain", a, t), y(e, "range", a, t), y(e, "origin", a, t), P(e, a, t);
+  Array.isArray(e.points) ? e.points.length < 3 ? t.push({ path: `${a}.points`, message: "Polygon requires at least 3 points", severity: "error" }) : e.points.forEach((i, r) => {
+    (!Array.isArray(i) || i.length !== 2 || typeof i[0] != "number" || typeof i[1] != "number") && t.push({ path: `${a}.points[${r}]`, message: "Each point must be [number, number]", severity: "error" });
+  }) : t.push({ path: `${a}.points`, message: 'Polygon requires a "points" array', severity: "error" }), y(e, a, t);
 }
 function lt(e, a, t) {
+  c(e, "x", a, t), c(e, "y", a, t), typeof e.content != "string" && t.push({ path: `${a}.content`, message: 'Text requires a "content" string', severity: "error" }), y(e, a, t);
+}
+function ut(e, a, t) {
+  o(e, "domain", a, t), o(e, "range", a, t), o(e, "origin", a, t), P(e, a, t);
+}
+function ht(e, a, t) {
   if (typeof e.fn != "string")
     t.push({ path: `${a}.fn`, message: 'FunctionPlot requires a "fn" expression string', severity: "error" });
   else {
     const i = H(e.fn);
     i && t.push({ path: `${a}.fn`, message: `Invalid expression: ${i}`, severity: "error" });
   }
-  y(e, "domain", a, t), P(e, a, t);
+  o(e, "domain", a, t), P(e, a, t);
 }
-function ut(e, a, t) {
-  (!Array.isArray(e.to) || e.to.length !== 2) && t.push({ path: `${a}.to`, message: 'Vector requires a "to" array of [number, number]', severity: "error" }), y(e, "from", a, t), P(e, a, t);
+function ft(e, a, t) {
+  (!Array.isArray(e.to) || e.to.length !== 2) && t.push({ path: `${a}.to`, message: 'Vector requires a "to" array of [number, number]', severity: "error" }), o(e, "from", a, t), P(e, a, t);
 }
-function ht(e, a, t) {
+function gt(e, a, t) {
   if (typeof e.fn != "string")
     t.push({ path: `${a}.fn`, message: 'VectorField requires a "fn" expression string', severity: "error" });
   else {
     const i = H(e.fn);
     i && t.push({ path: `${a}.fn`, message: `Invalid vector expression: ${i}`, severity: "error" });
   }
-  y(e, "domain", a, t), y(e, "range", a, t), P(e, a, t);
+  o(e, "domain", a, t), o(e, "range", a, t), P(e, a, t);
 }
-function ft(e, a, t) {
+function yt(e, a, t) {
   Array.isArray(e.values) ? e.values.forEach((i, r) => {
     Array.isArray(i) || t.push({ path: `${a}.values[${r}]`, message: "Each matrix row must be an array", severity: "error" });
-  }) : t.push({ path: `${a}.values`, message: 'Matrix requires a "values" 2D array', severity: "error" }), o(e, a, t);
+  }) : t.push({ path: `${a}.values`, message: 'Matrix requires a "values" 2D array', severity: "error" }), y(e, a, t);
 }
-function gt(e, a, t) {
+function ot(e, a, t) {
   if (!Array.isArray(e.nodes))
     t.push({ path: `${a}.nodes`, message: 'Graph requires a "nodes" array', severity: "error" });
   else {
     const i = /* @__PURE__ */ new Set();
     e.nodes.forEach((r, n) => {
-      typeof r.id != "string" ? t.push({ path: `${a}.nodes[${n}].id`, message: 'Graph node requires a string "id"', severity: "error" }) : (i.has(r.id) && t.push({ path: `${a}.nodes[${n}].id`, message: `Duplicate node id "${r.id}"`, severity: "error" }), i.add(r.id)), l(r, "x", `${a}.nodes[${n}]`, t), l(r, "y", `${a}.nodes[${n}]`, t);
+      typeof r.id != "string" ? t.push({ path: `${a}.nodes[${n}].id`, message: 'Graph node requires a string "id"', severity: "error" }) : (i.has(r.id) && t.push({ path: `${a}.nodes[${n}].id`, message: `Duplicate node id "${r.id}"`, severity: "error" }), i.add(r.id)), c(r, "x", `${a}.nodes[${n}]`, t), c(r, "y", `${a}.nodes[${n}]`, t);
     }), Array.isArray(e.edges) && e.edges.forEach((r, n) => {
       (typeof r.from != "string" || !i.has(r.from)) && t.push({ path: `${a}.edges[${n}].from`, message: `Edge "from" references unknown node "${r.from}"`, severity: "error" }), (typeof r.to != "string" || !i.has(r.to)) && t.push({ path: `${a}.edges[${n}].to`, message: `Edge "to" references unknown node "${r.to}"`, severity: "error" });
     });
   }
-  o(e, a, t);
-}
-function ot(e, a, t) {
-  typeof e.expression != "string" && t.push({ path: `${a}.expression`, message: 'LaTeX requires an "expression" string', severity: "error" }), l(e, "x", a, t), l(e, "y", a, t), o(e, a, t);
-}
-function yt(e, a, t) {
-  l(e, "from", a, t), Ot(e, "durationInFrames", a, t), d(e, a, t);
+  y(e, a, t);
 }
 function mt(e, a, t) {
-  h(e, "duration", a, t), $(e, a, t), d(e, a, t);
+  typeof e.expression != "string" && t.push({ path: `${a}.expression`, message: 'LaTeX requires an "expression" string', severity: "error" }), c(e, "x", a, t), c(e, "y", a, t), y(e, a, t);
 }
 function bt(e, a, t) {
-  if (h(e, "duration", a, t), $(e, a, t), e.translate !== void 0) {
+  c(e, "from", a, t), At(e, "durationInFrames", a, t), w(e, a, t);
+}
+function xt(e, a, t) {
+  h(e, "duration", a, t), S(e, a, t), w(e, a, t);
+}
+function vt(e, a, t) {
+  if (h(e, "duration", a, t), S(e, a, t), e.translate !== void 0) {
     const i = e.translate;
     (!i || typeof i != "object") && t.push({ path: `${a}.translate`, message: "translate must be { from: [x,y], to: [x,y] }", severity: "error" });
   }
@@ -560,44 +567,44 @@ function bt(e, a, t) {
     const i = e.opacity;
     (!i || typeof i != "object" || typeof i.from != "number" || typeof i.to != "number") && t.push({ path: `${a}.opacity`, message: "opacity must be { from: number, to: number }", severity: "error" });
   }
-  d(e, a, t);
+  w(e, a, t);
 }
-function xt(e, a, t) {
-  h(e, "duration", a, t), $(e, a, t), v(e, "fromColor", a, t), v(e, "toColor", a, t), d(e, a, t);
+function wt(e, a, t) {
+  h(e, "duration", a, t), S(e, a, t), v(e, "fromColor", a, t), v(e, "toColor", a, t), w(e, a, t);
 }
-function vt(e, a, t) {
-  h(e, "staggerDelay", a, t), $(e, a, t), d(e, a, t);
+function dt(e, a, t) {
+  h(e, "staggerDelay", a, t), S(e, a, t), w(e, a, t);
 }
-function o(e, a, t) {
-  h(e, "fadeIn", a, t), h(e, "fadeOut", a, t), h(e, "draw", a, t), $(e, a, t), dt(e, a, t);
+function y(e, a, t) {
+  h(e, "fadeIn", a, t), h(e, "fadeOut", a, t), h(e, "draw", a, t), S(e, a, t), kt(e, a, t);
 }
 function P(e, a, t) {
-  h(e, "fadeIn", a, t), h(e, "fadeOut", a, t), h(e, "draw", a, t), $(e, a, t), wt(e, a, t);
+  h(e, "fadeIn", a, t), h(e, "fadeOut", a, t), h(e, "draw", a, t), S(e, a, t), It(e, a, t);
 }
 const V = ["none", "circle", "ellipse"];
-function dt(e, a, t) {
-  if (F(e, "rotation", a, t), y(e, "rotationOrigin", a, t), y(e, "translate", a, t), F(e, "zIndex", a, t), e.scale !== void 0) {
+function kt(e, a, t) {
+  if ($(e, "rotation", a, t), o(e, "rotationOrigin", a, t), o(e, "translate", a, t), $(e, "zIndex", a, t), e.scale !== void 0) {
     const i = e.scale;
     typeof i == "number" || Array.isArray(i) && i.length === 2 && typeof i[0] == "number" && typeof i[1] == "number" || t.push({ path: `${a}.scale`, message: '"scale" must be a number or [number, number]', severity: "error" });
   }
 }
-function wt(e, a, t) {
-  F(e, "rotation", a, t), y(e, "rotationOrigin", a, t), y(e, "translate", a, t), F(e, "zIndex", a, t);
+function It(e, a, t) {
+  $(e, "rotation", a, t), o(e, "rotationOrigin", a, t), o(e, "translate", a, t), $(e, "zIndex", a, t);
 }
-function kt(e, a, t) {
-  typeof e.src != "string" && t.push({ path: `${a}.src`, message: 'Image requires a "src" string', severity: "error" }), l(e, "x", a, t), l(e, "y", a, t), k(e, "width", a, t), k(e, "height", a, t), v(e, "preserveAspectRatio", a, t), e.borderRadius !== void 0 && (typeof e.borderRadius != "number" || e.borderRadius < 0) && t.push({ path: `${a}.borderRadius`, message: '"borderRadius" must be a number >= 0', severity: "error" }), e.clipShape !== void 0 && (V.includes(e.clipShape) || t.push({
+function $t(e, a, t) {
+  typeof e.src != "string" && t.push({ path: `${a}.src`, message: 'Image requires a "src" string', severity: "error" }), c(e, "x", a, t), c(e, "y", a, t), k(e, "width", a, t), k(e, "height", a, t), v(e, "preserveAspectRatio", a, t), e.borderRadius !== void 0 && (typeof e.borderRadius != "number" || e.borderRadius < 0) && t.push({ path: `${a}.borderRadius`, message: '"borderRadius" must be a number >= 0', severity: "error" }), e.clipShape !== void 0 && (V.includes(e.clipShape) || t.push({
     path: `${a}.clipShape`,
     message: `Invalid clipShape "${e.clipShape}". Must be one of: ${V.join(", ")}`,
     severity: "error"
-  })), o(e, a, t);
+  })), y(e, a, t);
 }
-function It(e, a, t) {
-  d(e, a, t), o(e, a, t);
+function St(e, a, t) {
+  w(e, a, t), y(e, a, t);
 }
-function $t(e, a, t) {
-  l(e, "x", a, t), l(e, "y", a, t), k(e, "width", a, t), k(e, "height", a, t), Array.isArray(e.bars) || t.push({ path: `${a}.bars`, message: 'BarChart requires a "bars" array', severity: "error" }), o(e, a, t);
+function Ot(e, a, t) {
+  c(e, "x", a, t), c(e, "y", a, t), k(e, "width", a, t), k(e, "height", a, t), Array.isArray(e.bars) || t.push({ path: `${a}.bars`, message: 'BarChart requires a "bars" array', severity: "error" }), y(e, a, t);
 }
-function $(e, a, t) {
+function S(e, a, t) {
   if (e.easing !== void 0) {
     if (typeof e.easing == "string") {
       if (!R.includes(e.easing)) {
@@ -624,33 +631,33 @@ function $(e, a, t) {
     t.push({ path: `${a}.easing`, message: 'Easing must be a string name or { type: "spring"|"cubicBezier", ... }', severity: "error" });
   }
 }
-function l(e, a, t, i) {
+function c(e, a, t, i) {
   typeof e[a] != "number" && i.push({ path: `${t}.${a}`, message: `Required numeric field "${a}" is missing or not a number`, severity: "error" });
 }
 function k(e, a, t, i) {
   (typeof e[a] != "number" || e[a] <= 0) && i.push({ path: `${t}.${a}`, message: `"${a}" must be a positive number`, severity: "error" });
 }
-function St(e, a, t, i) {
+function Ct(e, a, t, i) {
   const r = e[a];
   (typeof r != "number" || r <= 0 || !Number.isInteger(r)) && i.push({ path: `${t}.${a}`, message: `"${a}" must be a positive integer`, severity: "error" });
 }
 function h(e, a, t, i) {
   e[a] !== void 0 && (typeof e[a] != "number" || e[a] <= 0) && i.push({ path: `${t}.${a}`, message: `"${a}" must be a positive number`, severity: "error" });
 }
-function Ot(e, a, t, i) {
+function At(e, a, t, i) {
   const r = e[a];
   r !== void 0 && (typeof r != "number" || r <= 0 || !Number.isInteger(r)) && i.push({ path: `${t}.${a}`, message: `"${a}" must be a positive integer`, severity: "error" });
 }
 function v(e, a, t, i) {
   e[a] !== void 0 && typeof e[a] != "string" && i.push({ path: `${t}.${a}`, message: `"${a}" must be a string`, severity: "error" });
 }
-function F(e, a, t, i) {
+function $(e, a, t, i) {
   e[a] !== void 0 && typeof e[a] != "number" && i.push({ path: `${t}.${a}`, message: `"${a}" must be a number`, severity: "error" });
 }
-function S(e, a, t, i) {
+function O(e, a, t, i) {
   e[a] !== void 0 && typeof e[a] != "boolean" && i.push({ path: `${t}.${a}`, message: `"${a}" must be a boolean`, severity: "error" });
 }
-function y(e, a, t, i) {
+function o(e, a, t, i) {
   const r = e[a];
   r !== void 0 && (!Array.isArray(r) || r.length !== 2 || typeof r[0] != "number" || typeof r[1] != "number") && i.push({ path: `${t}.${a}`, message: `"${a}" must be [number, number]`, severity: "error" });
 }
@@ -660,9 +667,9 @@ function K(e, a) {
   const r = a.find((n) => n.toLowerCase().startsWith(t.slice(0, 4)));
   return r ? ` Did you mean '${r}'?` : "";
 }
-function Mt({ dsl: e, className: a, style: t }) {
-  const i = Ye(e);
-  return i.valid ? /* @__PURE__ */ s("div", { className: a, style: t, "data-testid": "dsl-root", children: At(e.root) }) : /* @__PURE__ */ L(
+function Dt({ dsl: e, className: a, style: t }) {
+  const i = Je(e);
+  return i.valid ? /* @__PURE__ */ s("div", { className: a, style: t, "data-testid": "dsl-root", children: zt(e.root) }) : /* @__PURE__ */ L(
     "div",
     {
       className: a,
@@ -679,14 +686,14 @@ function Mt({ dsl: e, className: a, style: t }) {
     }
   );
 }
-function At(e) {
+function zt(e) {
   switch (e.type) {
     case "scene":
       return X(e);
     case "player":
       return Y(e);
     case "presentation":
-      return Ct(e);
+      return Et(e);
   }
 }
 function X(e) {
@@ -718,9 +725,9 @@ function Y(e) {
     }
   );
 }
-function Ct(e) {
+function Et(e) {
   return /* @__PURE__ */ s(
-    we,
+    de,
     {
       width: e.width,
       height: e.height,
@@ -729,25 +736,25 @@ function Ct(e) {
       transitionDuration: e.transitionDuration,
       showHUD: e.showHud,
       showNotes: e.showNotes,
-      children: e.slides.map((a, t) => zt(a, t))
+      children: e.slides.map((a, t) => Ft(a, t))
     }
   );
 }
-function zt(e, a) {
+function Ft(e, a) {
   var t;
   return /* @__PURE__ */ s($e, { title: e.title, notes: e.notes, background: e.background, children: (t = e.children) == null ? void 0 : t.map((i, r) => g(i, r)) }, a);
 }
 function g(e, a) {
   switch (e.type) {
     case "sequence":
-      return /* @__PURE__ */ s(Qe, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(Ke, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((t, i) => g(t, i)) }, a);
     case "group":
       return /* @__PURE__ */ s(
-        Ge,
+        Qe,
         {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -757,6 +764,35 @@ function g(e, a) {
         },
         a
       );
+    case "bezierCurve":
+      return /* @__PURE__ */ s(
+        Ge,
+        {
+          x1: e.x1,
+          y1: e.y1,
+          cx1: e.cx1,
+          cy1: e.cy1,
+          cx2: e.cx2,
+          cy2: e.cy2,
+          x2: e.x2,
+          y2: e.y2,
+          stroke: e.stroke,
+          strokeWidth: e.strokeWidth,
+          fill: e.fill,
+          strokeDasharray: e.strokeDasharray,
+          opacity: e.opacity,
+          fadeIn: e.fadeIn,
+          fadeOut: e.fadeOut,
+          draw: e.draw,
+          easing: l(e.easing),
+          rotation: e.rotation,
+          rotationOrigin: e.rotationOrigin,
+          scale: e.scale,
+          translate: e.translate,
+          zIndex: e.zIndex
+        },
+        a
+      );
     case "circle":
       return /* @__PURE__ */ s(
         He,
@@ -771,7 +807,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -795,7 +831,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -820,7 +856,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -847,7 +883,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -869,7 +905,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -893,7 +929,7 @@ function g(e, a) {
           opacity: e.opacity,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -918,7 +954,7 @@ function g(e, a) {
           opacity: e.opacity,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -946,7 +982,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -955,9 +991,9 @@ function g(e, a) {
         a
       );
     case "functionPlot": {
-      const t = Ke(e.fn);
+      const t = Xe(e.fn);
       return /* @__PURE__ */ s(
-        De,
+        pe,
         {
           fn: (i) => t({ x: i }),
           domain: e.domain,
@@ -968,7 +1004,7 @@ function g(e, a) {
           strokeWidth: e.strokeWidth,
           samples: e.samples,
           draw: e.draw,
-          easing: c(e.easing),
+          easing: l(e.easing),
           opacity: e.opacity,
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
@@ -980,7 +1016,7 @@ function g(e, a) {
     }
     case "vector":
       return /* @__PURE__ */ s(
-        _e,
+        De,
         {
           from: e.from,
           to: e.to,
@@ -996,7 +1032,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1005,9 +1041,9 @@ function g(e, a) {
         a
       );
     case "vectorField": {
-      const t = Xe(e.fn);
+      const t = Ye(e.fn);
       return /* @__PURE__ */ s(
-        We,
+        _e,
         {
           fn: (i, r) => t({ x: i, y: r }),
           domain: e.domain,
@@ -1023,7 +1059,7 @@ function g(e, a) {
           maxLength: e.maxLength,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1045,7 +1081,7 @@ function g(e, a) {
           fontSize: e.fontSize,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1056,7 +1092,7 @@ function g(e, a) {
       );
     case "graph":
       return /* @__PURE__ */ s(
-        Ne,
+        We,
         {
           nodes: e.nodes,
           edges: e.edges,
@@ -1068,7 +1104,7 @@ function g(e, a) {
           labelFontSize: e.labelFontSize,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1079,7 +1115,7 @@ function g(e, a) {
       );
     case "latex":
       return /* @__PURE__ */ s(
-        pe,
+        Ne,
         {
           expression: e.expression,
           x: e.x,
@@ -1089,7 +1125,7 @@ function g(e, a) {
           align: e.align,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1116,7 +1152,7 @@ function g(e, a) {
           valueFormat: e.valueFormat,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: c(e.easing),
+          easing: l(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1126,19 +1162,19 @@ function g(e, a) {
         a
       );
     case "fadeIn":
-      return /* @__PURE__ */ s(Pe, { duration: e.duration, easing: c(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(Pe, { duration: e.duration, easing: l(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
     case "fadeOut":
-      return /* @__PURE__ */ s(Fe, { duration: e.duration, totalFrames: e.totalFrames, easing: c(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(Fe, { duration: e.duration, totalFrames: e.totalFrames, easing: l(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
     case "draw":
-      return /* @__PURE__ */ s(Ee, { duration: e.duration, pathLength: e.pathLength, easing: c(e.easing), children: g(e.children[0], 0) }, a);
+      return /* @__PURE__ */ s(Ee, { duration: e.duration, pathLength: e.pathLength, easing: l(e.easing), children: g(e.children[0], 0) }, a);
     case "write":
-      return /* @__PURE__ */ s(ze, { duration: e.duration, easing: c(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(ze, { duration: e.duration, easing: l(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
     case "transform":
       return /* @__PURE__ */ s(
-        Ce,
+        Ae,
         {
           duration: e.duration,
-          easing: c(e.easing),
+          easing: l(e.easing),
           translate: e.translate,
           scale: e.scale,
           rotate: e.rotate,
@@ -1149,10 +1185,10 @@ function g(e, a) {
       );
     case "morph":
       return /* @__PURE__ */ s(
-        Ae,
+        Ce,
         {
           duration: e.duration,
-          easing: c(e.easing),
+          easing: l(e.easing),
           fromColor: e.fromColor,
           toColor: e.toColor,
           fromOpacity: e.fromOpacity,
@@ -1164,7 +1200,7 @@ function g(e, a) {
         a
       );
     case "stagger":
-      return /* @__PURE__ */ s(Oe, { staggerDelay: e.staggerDelay, easing: c(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(Oe, { staggerDelay: e.staggerDelay, easing: l(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
     case "parallel":
       return /* @__PURE__ */ s(Se, { children: e.children.map((t, i) => g(t, i)) }, a);
     case "scene":
@@ -1175,7 +1211,7 @@ function g(e, a) {
       return null;
   }
 }
-class Et {
+class Pt {
   constructor(a, t = 30, i = 900, r = 640) {
     this.elements = [], this.cursor = 0, this.theme = a, this._fps = t, this._width = i, this._height = r;
   }
@@ -1394,14 +1430,14 @@ class Et {
    * Returns the box positions for follow-up arrows, etc.
    */
   boxRow(a, t) {
-    const i = (t == null ? void 0 : t.boxWidth) ?? 80, r = (t == null ? void 0 : t.boxHeight) ?? 40, n = (t == null ? void 0 : t.gap) ?? 12, u = (t == null ? void 0 : t.y) ?? 250, I = a.length * i + (a.length - 1) * n, O = (this._width - I) / 2;
+    const i = (t == null ? void 0 : t.boxWidth) ?? 80, r = (t == null ? void 0 : t.boxHeight) ?? 40, n = (t == null ? void 0 : t.gap) ?? 12, u = (t == null ? void 0 : t.y) ?? 250, I = a.length * i + (a.length - 1) * n, C = (this._width - I) / 2;
     t == null || t.fadeIn;
     const A = a.map((b, f) => {
-      const m = O + f * (i + n);
+      const m = C + f * (i + n);
       return { x: m, y: u, w: i, h: r, cx: m + i / 2, cy: u + r / 2 };
-    }), C = a.map((b, f) => {
-      var D, T;
-      const m = A[f], z = ((D = t == null ? void 0 : t.colors) == null ? void 0 : D[f]) ?? this.theme.boxFill, E = ((T = t == null ? void 0 : t.strokeColors) == null ? void 0 : T[f]) ?? this.theme.boxStroke;
+    }), z = a.map((b, f) => {
+      var p, T;
+      const m = A[f], E = ((p = t == null ? void 0 : t.colors) == null ? void 0 : p[f]) ?? this.theme.boxFill, F = ((T = t == null ? void 0 : t.strokeColors) == null ? void 0 : T[f]) ?? this.theme.boxStroke;
       return {
         type: "group",
         children: [
@@ -1411,8 +1447,8 @@ class Et {
             y: m.y,
             width: i,
             height: r,
-            fill: z,
-            stroke: E,
+            fill: E,
+            stroke: F,
             strokeWidth: 1.5,
             rx: 6
           },
@@ -1432,7 +1468,7 @@ class Et {
     return this.addAtCursor({
       type: "stagger",
       staggerDelay: 3,
-      children: C
+      children: z
     }, 8 + a.length * 2), A;
   }
   /**
@@ -1441,12 +1477,12 @@ class Et {
   boxColumn(a, t) {
     const i = (t == null ? void 0 : t.boxWidth) ?? 160, r = (t == null ? void 0 : t.boxHeight) ?? 36, n = (t == null ? void 0 : t.gap) ?? 8, u = (t == null ? void 0 : t.y) ?? 150, I = (t == null ? void 0 : t.x) ?? this.cx;
     t == null || t.fadeIn;
-    const O = a.map((C, b) => {
+    const C = a.map((z, b) => {
       const f = u + b * (r + n);
       return { x: I - i / 2, y: f, w: i, h: r, cx: I, cy: f + r / 2 };
-    }), A = a.map((C, b) => {
-      var z, E;
-      const f = O[b], m = ((z = t == null ? void 0 : t.colors) == null ? void 0 : z[b]) ?? this.theme.boxFill;
+    }), A = a.map((z, b) => {
+      var E, F;
+      const f = C[b], m = ((E = t == null ? void 0 : t.colors) == null ? void 0 : E[b]) ?? this.theme.boxFill;
       return {
         type: "group",
         children: [
@@ -1457,7 +1493,7 @@ class Et {
             width: i,
             height: r,
             fill: m,
-            stroke: (E = t == null ? void 0 : t.colors) != null && E[b] ? t.colors[b] : this.theme.boxStroke,
+            stroke: (F = t == null ? void 0 : t.colors) != null && F[b] ? t.colors[b] : this.theme.boxStroke,
             strokeWidth: 1.5,
             rx: 6
           },
@@ -1465,7 +1501,7 @@ class Et {
             type: "text",
             x: f.cx,
             y: f.cy + 5,
-            content: C,
+            content: z,
             fontSize: (t == null ? void 0 : t.fontSize) ?? 13,
             fill: (t == null ? void 0 : t.textColor) ?? this.theme.text,
             textAnchor: "middle"
@@ -1477,7 +1513,7 @@ class Et {
       type: "stagger",
       staggerDelay: 3,
       children: A
-    }, 8 + a.length * 2), O;
+    }, 8 + a.length * 2), C;
   }
   /**
    * Draw arrows connecting sequential positions (e.g., output of boxRow/boxColumn).
@@ -1560,7 +1596,7 @@ class Et {
     return { elements: this.elements, durationInFrames: a };
   }
 }
-const Ft = {
+const Rt = {
   background: "#0a0a1e",
   title: "#e0e7ff",
   subtitle: "#94a3b8",
@@ -1575,7 +1611,7 @@ const Ft = {
   warning: "#fbbf24",
   error: "#f87171",
   palette: ["#4fc3f7", "#a78bfa", "#f472b6", "#34d399", "#fbbf24", "#fb923c", "#6366f1", "#22d3ee"]
-}, Wt = {
+}, pt = {
   background: "#f8fafc",
   title: "#1e293b",
   subtitle: "#64748b",
@@ -1591,9 +1627,9 @@ const Ft = {
   error: "#dc2626",
   palette: ["#2563eb", "#7c3aed", "#db2777", "#16a34a", "#d97706", "#ea580c", "#4f46e5", "#0891b2"]
 };
-class Pt {
+class Nt {
   constructor(a, t, i) {
-    this._slides = [], this._title = a, this._theme = t ?? Ft, this._opts = {
+    this._slides = [], this._title = a, this._theme = t ?? Rt, this._opts = {
       width: 900,
       height: 640,
       fps: 30,
@@ -1611,7 +1647,7 @@ class Pt {
   /** Build the final ElucimDocument */
   build() {
     const a = this._slides.map((i) => {
-      const r = new Et(
+      const r = new Pt(
         this._theme,
         this._opts.fps,
         this._opts.width,
@@ -1657,19 +1693,19 @@ class Pt {
     return JSON.stringify(this.build(), null, a ? 2 : void 0);
   }
 }
-function _t(e, a, t) {
-  return new Pt(e, a, t);
+function Tt(e, a, t) {
+  return new Nt(e, a, t);
 }
 export {
-  Mt as DslRenderer,
-  Pt as PresentationBuilder,
-  Et as SlideBuilder,
-  Ke as compileExpression,
-  Xe as compileVectorExpression,
-  Ft as darkTheme,
-  Wt as lightTheme,
-  _t as presentation,
-  c as resolveEasing,
-  Ye as validate,
+  Dt as DslRenderer,
+  Nt as PresentationBuilder,
+  Pt as SlideBuilder,
+  Xe as compileExpression,
+  Ye as compileVectorExpression,
+  Rt as darkTheme,
+  pt as lightTheme,
+  Tt as presentation,
+  l as resolveEasing,
+  Je as validate,
   H as validateExpression
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elucim/dsl",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "JSON/YAML DSL for declarative Elucim animations — define visualizations without writing React code",
   "type": "module",
   "license": "MIT",
@@ -19,6 +19,9 @@
     "yaml",
     "visualization",
     "elucim",
+    "image",
+    "group",
+    "transforms",
     "declarative"
   ],
   "publishConfig": {
@@ -42,7 +45,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@elucim/core": "0.2.0"
+    "@elucim/core": "0.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",