@elucim/dsl 0.3.0 → 0.4.1

package/dist/index.js

@@ -1,7 +1,8 @@
-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 W = {
+import { easeOutBounce as ae, easeOutElastic as ie, easeOutBack as re, easeInBack as ne, easeInOutExpo as se, easeOutExpo as ce, easeInExpo as le, easeInOutSine as ue, easeOutSine as he, easeInSine as fe, easeInOutQuart as ge, easeOutQuart as ye, easeInQuart as oe, easeInOutCubic as me, easeOutCubic as be, easeInCubic as xe, easeInOutQuad as ve, easeOutQuad as de, easeInQuad as we, linear as ke, spring as Ie, cubicBezier as Se, Presentation as $e, Scene as Oe, Player as Ae, Slide as Ce, Parallel as ze, Stagger as pe, Morph as Ee, Transform as Fe, Write as Pe, Draw as Re, FadeOut as Te, FadeIn as Me, BarChart as Ne, LaTeX as We, Graph as _e, Matrix as De, VectorField as Le, Vector as je, FunctionPlot as qe, Axes as Be, Image as Ve, Text as Ue, Polygon as He, Rect as Ge, Arrow as Qe, Line as Ke, Circle as Xe, BezierCurve as Je, Group as Ye, Sequence as Ze } from "@elucim/core";
+import { jsx as s, jsxs as E } from "react/jsx-runtime";
+import V, { forwardRef as et, useRef as tt, useImperativeHandle as at } from "react";
+import { renderToStaticMarkup as it } from "react-dom/server";
+const D = {
   sin: Math.sin,
   cos: Math.cos,
   tan: Math.tan,
@@ -21,12 +22,12 @@ const W = {
   max: (...e) => Math.max(...e),
   sign: Math.sign,
   pow: Math.pow
-}, q = {
+}, U = {
   PI: Math.PI,
   E: Math.E,
   TAU: Math.PI * 2
 };
-function _(e) {
+function q(e) {
   const a = [];
   let t = 0;
   for (; t < e.length; ) {
@@ -84,12 +85,12 @@ function _(e) {
         a.push({ type: "COMMA", value: ",", pos: r });
         break;
       default:
-        throw new x(`Unexpected character '${i}'`, r);
+        throw new k(`Unexpected character '${i}'`, r);
     }
   }
   return a.push({ type: "EOF", value: "", pos: t }), a;
 }
-class D {
+class B {
   constructor(a) {
     this.pos = 0, this.tokens = a;
   }
@@ -103,7 +104,7 @@ class D {
   expect(a) {
     const t = this.peek();
     if (t.type !== a)
-      throw new x(
+      throw new k(
         `Expected ${a} but got ${t.type} ('${t.value}')`,
         t.pos
       );
@@ -114,7 +115,7 @@ class D {
     const a = this.parseExpression();
     if (this.peek().type !== "EOF") {
       const t = this.peek();
-      throw new x(
+      throw new k(
         `Unexpected token '${t.value}' after expression`,
         t.pos
       );
@@ -167,14 +168,14 @@ class D {
         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(W, t))
-          throw new x(
-            `Unknown function '${t}'. Available: ${Object.keys(W).join(", ")}`,
+        if (this.expect("RPAREN"), !Object.prototype.hasOwnProperty.call(D, t))
+          throw new k(
+            `Unknown function '${t}'. Available: ${Object.keys(D).join(", ")}`,
             a.pos
           );
         return { kind: "call", name: t, args: i };
       }
-      return Object.prototype.hasOwnProperty.call(q, t) ? { kind: "number", value: q[t] } : { kind: "variable", name: t };
+      return Object.prototype.hasOwnProperty.call(U, t) ? { kind: "number", value: U[t] } : { kind: "variable", name: t };
     }
     if (a.type === "LPAREN") {
       this.advance();
@@ -189,24 +190,24 @@ class D {
           this.advance(), t.push(this.parseExpression());
       return this.expect("RBRACKET"), { kind: "array", elements: t };
     }
-    throw new x(
+    throw new k(
       `Unexpected token '${a.value}'`,
       a.pos
     );
   }
 }
-function d(e, a) {
+function C(e, a) {
   switch (e.kind) {
     case "number":
       return e.value;
     case "variable":
       if (Object.prototype.hasOwnProperty.call(a, e.name)) return a[e.name];
-      throw new x(`Unknown variable '${e.name}'`, 0);
+      throw new k(`Unknown variable '${e.name}'`, 0);
     case "unary":
-      const t = d(e.operand, a);
+      const t = C(e.operand, a);
       return e.op === "-" ? -t : t;
     case "binary": {
-      const i = d(e.left, a), r = d(e.right, a);
+      const i = C(e.left, a), r = C(e.right, a);
       switch (e.op) {
         case "+":
           return i + r;
@@ -222,95 +223,95 @@ function d(e, a) {
       break;
     }
     case "call": {
-      const i = W[e.name], r = e.args.map((n) => d(n, a));
+      const i = D[e.name], r = e.args.map((n) => C(n, a));
       return i(...r);
     }
     case "array":
-      return e.elements.map((i) => d(i, a));
+      return e.elements.map((i) => C(i, a));
   }
-  throw new x("Invalid AST node", 0);
+  throw new k("Invalid AST node", 0);
 }
-class x extends Error {
+class k extends Error {
   constructor(a, t) {
     super(a), this.name = "ExpressionError", this.position = t;
   }
 }
-function Xe(e) {
-  const a = _(e), t = new D(a).parse();
-  return (i) => d(t, i);
+function rt(e) {
+  const a = q(e), t = new B(a).parse();
+  return (i) => C(t, i);
 }
-function Ye(e) {
-  const a = _(e), t = new D(a).parse();
+function nt(e) {
+  const a = q(e), t = new B(a).parse();
   if (t.kind !== "array" || t.elements.length !== 2)
-    throw new x(
+    throw new k(
       'Vector expression must be an array of 2 elements, e.g. "[-y, x]"',
       0
     );
-  return (i) => d(t, i);
+  return (i) => C(t, i);
 }
-function H(e) {
+function K(e) {
   try {
-    const a = _(e);
-    return new D(a).parse(), null;
+    const a = q(e);
+    return new B(a).parse(), null;
   } catch (a) {
-    return a instanceof x ? `${a.message} (at position ${a.position})` : String(a);
-  }
-}
-const M = {
-  linear: xe,
-  easeInQuad: be,
-  easeOutQuad: me,
-  easeInOutQuad: oe,
-  easeInCubic: ye,
-  easeOutCubic: ge,
-  easeInOutCubic: fe,
-  easeInQuart: he,
-  easeOutQuart: ue,
-  easeInOutQuart: le,
-  easeInSine: ce,
-  easeOutSine: se,
-  easeInOutSine: ne,
-  easeInExpo: re,
-  easeOutExpo: ie,
-  easeInOutExpo: ae,
-  easeInBack: te,
-  easeOutBack: ee,
-  easeOutElastic: Z,
-  easeOutBounce: J
+    return a instanceof k ? `${a.message} (at position ${a.position})` : String(a);
+  }
+}
+const L = {
+  linear: ke,
+  easeInQuad: we,
+  easeOutQuad: de,
+  easeInOutQuad: ve,
+  easeInCubic: xe,
+  easeOutCubic: be,
+  easeInOutCubic: me,
+  easeInQuart: oe,
+  easeOutQuart: ye,
+  easeInOutQuart: ge,
+  easeInSine: fe,
+  easeOutSine: he,
+  easeInOutSine: ue,
+  easeInExpo: le,
+  easeOutExpo: ce,
+  easeInOutExpo: se,
+  easeInBack: ne,
+  easeOutBack: re,
+  easeOutElastic: ie,
+  easeOutBounce: ae
 };
-function l(e) {
+function h(e) {
   if (e !== void 0) {
     if (typeof e == "string") {
-      const a = M[e];
+      const a = L[e];
       if (!a) {
-        const t = Object.keys(M), i = t.find((n) => n.toLowerCase() === e.toLowerCase()), r = i ? ` Did you mean '${i}'?` : "";
+        const t = Object.keys(L), i = t.find((n) => n.toLowerCase() === e.toLowerCase()), r = i ? ` Did you mean '${i}'?` : "";
         throw new Error(`Unknown easing '${e}'.${r} Available: ${t.join(", ")}`);
       }
       return a;
     }
     if (e.type === "spring")
-      return ve({
+      return Ie({
         stiffness: e.stiffness,
         damping: e.damping,
         mass: e.mass
       });
     if (e.type === "cubicBezier")
-      return we(e.x1, e.y1, e.x2, e.y2);
+      return Se(e.x1, e.y1, e.x2, e.y2);
     throw new Error(`Unknown easing type: ${e.type}`);
   }
 }
-const R = Object.keys(M);
-function Je(e) {
+const W = Object.keys(L);
+function X(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 }) : (Ze(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 }) : (st(t.root, "root", a), {
     valid: a.filter((i) => i.severity === "error").length === 0,
     errors: a
   });
 }
-const B = ["scene", "player", "presentation"], N = [
+const H = ["scene", "player", "presentation"], T = ["card", "slide", "square"], _ = [
   "sequence",
   "group",
   "bezierCurve",
@@ -339,219 +340,219 @@ const B = ["scene", "player", "presentation"], N = [
   "parallel",
   "player",
   "scene"
-], U = ["none", "fade", "slide-left", "slide-up", "zoom"];
-function Ze(e, a, t) {
+], G = ["none", "fade", "slide-left", "slide-up", "zoom"];
+function st(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" });
+  if (!H.includes(i)) {
+    t.push({ path: `${a}.type`, message: `Root type must be one of: ${H.join(", ")}. Got "${i}"`, severity: "error" });
     return;
   }
-  i === "scene" || i === "player" ? G(e, a, i, t) : i === "presentation" && et(e, a, t);
+  i === "scene" || i === "player" ? J(e, a, i, t) : i === "presentation" && ct(e, a, t);
 }
-function G(e, a, t, 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 J(e, a, t, i) {
+  Rt(e, "durationInFrames", a, i), y(e, "width", a, i), y(e, "height", a, i), y(e, "fps", a, i), S(e, "background", a, i), e.preset !== void 0 && (typeof e.preset != "string" || !T.includes(e.preset)) && i.push({ path: `${a}.preset`, message: `preset must be one of: ${T.join(", ")}. Got "${e.preset}"`, severity: "error" }), t === "player" && (R(e, "controls", a, i), R(e, "loop", a, i), R(e, "autoPlay", a, i)), $(e, a, i);
 }
-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({
+function ct(e, a, t) {
+  if (y(e, "width", a, t), y(e, "height", a, t), S(e, "background", a, t), y(e, "transitionDuration", a, t), R(e, "showHud", a, t), R(e, "showNotes", a, t), e.preset !== void 0 && (typeof e.preset != "string" || !T.includes(e.preset)) && t.push({ path: `${a}.preset`, message: `preset must be one of: ${T.join(", ")}. Got "${e.preset}"`, severity: "error" }), e.transition !== void 0 && (G.includes(e.transition) || t.push({
     path: `${a}.transition`,
-    message: `Invalid transition "${e.transition}". Must be one of: ${U.join(", ")}`,
+    message: `Invalid transition "${e.transition}". Must be one of: ${G.join(", ")}`,
     severity: "error"
   })), !Array.isArray(e.slides)) {
     t.push({ path: `${a}.slides`, message: 'Presentation must have a "slides" array', severity: "error" });
     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) => {
-    tt(i, `${a}.slides[${r}]`, t);
+    lt(i, `${a}.slides[${r}]`, t);
   });
 }
-function tt(e, a, t) {
+function lt(e, a, t) {
   if (!e || typeof e != "object") {
     t.push({ path: a, message: "Slide must be an object", severity: "error" });
     return;
   }
-  v(e, "title", a, t), v(e, "notes", a, t), v(e, "background", a, t), e.children !== void 0 && (Array.isArray(e.children) ? e.children.forEach((i, r) => {
-    Q(i, `${a}.children[${r}]`, t);
+  S(e, "title", a, t), S(e, "notes", a, t), S(e, "background", a, t), e.children !== void 0 && (Array.isArray(e.children) ? e.children.forEach((i, r) => {
+    Y(i, `${a}.children[${r}]`, t);
   }) : t.push({ path: `${a}.children`, message: "Slide children must be an array", severity: "error" }));
 }
-function w(e, a, t) {
+function $(e, a, t) {
   if (!Array.isArray(e.children)) {
     t.push({ path: `${a}.children`, message: 'Expected "children" array', severity: "error" });
     return;
   }
   e.children.forEach((i, r) => {
-    Q(i, `${a}.children[${r}]`, t);
+    Y(i, `${a}.children[${r}]`, t);
   });
 }
-function Q(e, a, t) {
+function Y(e, a, t) {
   if (!e || typeof e != "object") {
     t.push({ path: a, message: "Element must be an object", severity: "error" });
     return;
   }
   const i = e.type;
-  if (!i || !N.includes(i)) {
-    const r = i ? K(i, N) : "";
+  if (!i || !_.includes(i)) {
+    const r = i ? Z(i, _) : "";
     t.push({
       path: `${a}.type`,
-      message: `Unknown element type "${i}".${r} Valid types: ${N.join(", ")}`,
+      message: `Unknown element type "${i}".${r} Valid types: ${_.join(", ")}`,
       severity: "error"
     });
     return;
   }
   switch (i) {
     case "bezierCurve":
-      at(e, a, t);
+      ut(e, a, t);
       break;
     case "circle":
-      it(e, a, t);
+      ht(e, a, t);
       break;
     case "line":
-      rt(e, a, t);
+      ft(e, a, t);
       break;
     case "arrow":
-      nt(e, a, t);
+      gt(e, a, t);
       break;
     case "rect":
-      st(e, a, t);
+      yt(e, a, t);
       break;
     case "polygon":
-      ct(e, a, t);
+      ot(e, a, t);
       break;
     case "text":
-      lt(e, a, t);
+      mt(e, a, t);
       break;
     case "image":
-      $t(e, a, t);
+      Et(e, a, t);
       break;
     case "axes":
-      ut(e, a, t);
+      bt(e, a, t);
       break;
     case "functionPlot":
-      ht(e, a, t);
+      xt(e, a, t);
       break;
     case "vector":
-      ft(e, a, t);
+      vt(e, a, t);
       break;
     case "vectorField":
-      gt(e, a, t);
+      dt(e, a, t);
       break;
     case "matrix":
-      yt(e, a, t);
+      wt(e, a, t);
       break;
     case "graph":
-      ot(e, a, t);
+      kt(e, a, t);
       break;
     case "latex":
-      mt(e, a, t);
+      It(e, a, t);
       break;
     case "barChart":
-      Ot(e, a, t);
+      Pt(e, a, t);
       break;
     case "sequence":
-      bt(e, a, t);
+      St(e, a, t);
       break;
     case "group":
-      St(e, a, t);
+      Ft(e, a, t);
       break;
     case "parallel":
-      w(e, a, t);
+      $(e, a, t);
       break;
     case "fadeIn":
     case "fadeOut":
     case "draw":
     case "write":
-      xt(e, a, t);
+      $t(e, a, t);
       break;
     case "transform":
-      vt(e, a, t);
+      Ot(e, a, t);
       break;
     case "morph":
-      wt(e, a, t);
+      At(e, a, t);
       break;
     case "stagger":
-      dt(e, a, t);
+      Ct(e, a, t);
       break;
     case "scene":
     case "player":
-      G(e, a, i, t);
+      J(e, a, i, t);
       break;
   }
 }
-function at(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 ut(e, a, t) {
+  l(e, "x1", a, t), l(e, "y1", a, t), l(e, "cx1", a, t), l(e, "cy1", a, t), l(e, "x2", a, t), l(e, "y2", a, t), e.cx2 !== void 0 && F(e, "cx2", a, t), e.cy2 !== void 0 && F(e, "cy2", a, t), x(e, a, t);
 }
-function it(e, a, t) {
-  c(e, "cx", a, t), c(e, "cy", a, t), k(e, "r", a, t), y(e, a, t);
+function ht(e, a, t) {
+  l(e, "cx", a, t), l(e, "cy", a, t), z(e, "r", a, t), x(e, a, t);
 }
-function rt(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 ft(e, a, t) {
+  l(e, "x1", a, t), l(e, "y1", a, t), l(e, "x2", a, t), l(e, "y2", a, t), x(e, a, t);
 }
-function nt(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 gt(e, a, t) {
+  l(e, "x1", a, t), l(e, "y1", a, t), l(e, "x2", a, t), l(e, "y2", a, t), x(e, a, t);
 }
-function st(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 yt(e, a, t) {
+  l(e, "x", a, t), l(e, "y", a, t), z(e, "width", a, t), z(e, "height", a, t), x(e, a, t);
 }
-function ct(e, a, t) {
+function ot(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);
+  }) : t.push({ path: `${a}.points`, message: 'Polygon requires a "points" array', severity: "error" }), x(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 mt(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" }), x(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 bt(e, a, t) {
+  d(e, "domain", a, t), d(e, "range", a, t), d(e, "origin", a, t), M(e, a, t);
 }
-function ht(e, a, t) {
+function xt(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);
+    const i = K(e.fn);
     i && t.push({ path: `${a}.fn`, message: `Invalid expression: ${i}`, severity: "error" });
   }
-  o(e, "domain", a, t), P(e, a, t);
+  d(e, "domain", a, t), M(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 vt(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" }), d(e, "from", a, t), M(e, a, t);
 }
-function gt(e, a, t) {
+function dt(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);
+    const i = K(e.fn);
     i && t.push({ path: `${a}.fn`, message: `Invalid vector expression: ${i}`, severity: "error" });
   }
-  o(e, "domain", a, t), o(e, "range", a, t), P(e, a, t);
+  d(e, "domain", a, t), d(e, "range", a, t), M(e, a, t);
 }
-function yt(e, a, t) {
+function wt(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" }), y(e, a, t);
+  }) : t.push({ path: `${a}.values`, message: 'Matrix requires a "values" 2D array', severity: "error" }), x(e, a, t);
 }
-function ot(e, a, t) {
+function kt(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)), c(r, "x", `${a}.nodes[${n}]`, t), c(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)), l(r, "x", `${a}.nodes[${n}]`, t), l(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" });
     });
   }
-  y(e, a, t);
+  x(e, a, t);
 }
-function mt(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 It(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), x(e, a, t);
 }
-function bt(e, a, t) {
-  c(e, "from", a, t), At(e, "durationInFrames", a, t), w(e, a, t);
+function St(e, a, t) {
+  l(e, "from", a, t), Tt(e, "durationInFrames", a, t), $(e, a, t);
 }
-function xt(e, a, t) {
-  h(e, "duration", a, t), S(e, a, t), w(e, a, t);
+function $t(e, a, t) {
+  y(e, "duration", a, t), P(e, a, t), $(e, a, t);
 }
-function vt(e, a, t) {
-  if (h(e, "duration", a, t), S(e, a, t), e.translate !== void 0) {
+function Ot(e, a, t) {
+  if (y(e, "duration", a, t), P(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" });
   }
@@ -567,51 +568,51 @@ function vt(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" });
   }
-  w(e, a, t);
+  $(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 At(e, a, t) {
+  y(e, "duration", a, t), P(e, a, t), S(e, "fromColor", a, t), S(e, "toColor", a, t), $(e, a, t);
 }
-function dt(e, a, t) {
-  h(e, "staggerDelay", a, t), S(e, a, t), w(e, a, t);
+function Ct(e, a, t) {
+  y(e, "staggerDelay", a, t), P(e, a, t), $(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 x(e, a, t) {
+  y(e, "fadeIn", a, t), y(e, "fadeOut", a, t), y(e, "draw", a, t), P(e, a, t), zt(e, a, t);
 }
-function P(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);
+function M(e, a, t) {
+  y(e, "fadeIn", a, t), y(e, "fadeOut", a, t), y(e, "draw", a, t), P(e, a, t), pt(e, a, t);
 }
-const V = ["none", "circle", "ellipse"];
-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 Q = ["none", "circle", "ellipse"];
+function zt(e, a, t) {
+  if (F(e, "rotation", a, t), d(e, "rotationOrigin", a, t), d(e, "translate", a, t), F(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 It(e, a, t) {
-  $(e, "rotation", a, t), o(e, "rotationOrigin", a, t), o(e, "translate", a, t), $(e, "zIndex", a, t);
+function pt(e, a, t) {
+  F(e, "rotation", a, t), d(e, "rotationOrigin", a, t), d(e, "translate", a, t), F(e, "zIndex", a, t);
 }
-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({
+function Et(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), z(e, "width", a, t), z(e, "height", a, t), S(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 && (Q.includes(e.clipShape) || t.push({
     path: `${a}.clipShape`,
-    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${V.join(", ")}`,
+    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${Q.join(", ")}`,
     severity: "error"
-  })), y(e, a, t);
+  })), x(e, a, t);
 }
-function St(e, a, t) {
-  w(e, a, t), y(e, a, t);
+function Ft(e, a, t) {
+  $(e, a, t), x(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 Pt(e, a, t) {
+  l(e, "x", a, t), l(e, "y", a, t), z(e, "width", a, t), z(e, "height", a, t), Array.isArray(e.bars) || t.push({ path: `${a}.bars`, message: 'BarChart requires a "bars" array', severity: "error" }), x(e, a, t);
 }
-function S(e, a, t) {
+function P(e, a, t) {
   if (e.easing !== void 0) {
     if (typeof e.easing == "string") {
-      if (!R.includes(e.easing)) {
-        const i = K(e.easing, R);
+      if (!W.includes(e.easing)) {
+        const i = Z(e.easing, W);
         t.push({
           path: `${a}.easing`,
-          message: `Unknown easing "${e.easing}".${i} Available: ${R.join(", ")}`,
+          message: `Unknown easing "${e.easing}".${i} Available: ${W.join(", ")}`,
           severity: "error"
         });
       }
@@ -631,142 +632,152 @@ function S(e, a, t) {
     t.push({ path: `${a}.easing`, message: 'Easing must be a string name or { type: "spring"|"cubicBezier", ... }', severity: "error" });
   }
 }
-function c(e, a, t, i) {
+function l(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) {
+function z(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 Ct(e, a, t, i) {
+function Rt(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) {
+function y(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 At(e, a, t, i) {
+function Tt(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) {
+function S(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 $(e, a, t, i) {
+function F(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 O(e, a, t, i) {
+function R(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 o(e, a, t, i) {
+function d(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" });
 }
-function K(e, a) {
+function Z(e, a) {
   const t = e.toLowerCase(), i = a.find((n) => n.toLowerCase() === t);
   if (i) return ` Did you mean '${i}'?`;
   const r = a.find((n) => n.toLowerCase().startsWith(t.slice(0, 4)));
   return r ? ` Did you mean '${r}'?` : "";
 }
-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,
-      style: { color: "#ff6b6b", fontFamily: "monospace", padding: 16, ...t },
-      "data-testid": "dsl-error",
-      children: [
-        /* @__PURE__ */ s("strong", { children: "Elucim DSL Validation Errors:" }),
-        /* @__PURE__ */ s("ul", { children: i.errors.filter((r) => r.severity === "error").map((r, n) => /* @__PURE__ */ L("li", { children: [
-          r.path,
-          ": ",
-          r.message
-        ] }, n)) })
-      ]
-    }
-  );
+const Mt = {
+  card: [640, 360],
+  slide: [1280, 720],
+  square: [600, 600]
+};
+function N(e, a, t) {
+  if (!e) return { width: a, height: t };
+  const [i, r] = Mt[e];
+  return { width: a ?? i, height: t ?? r };
 }
-function zt(e) {
+function ee(e, a) {
   switch (e.type) {
     case "scene":
-      return X(e);
+      return j(e, a);
     case "player":
-      return Y(e);
+      if ((a == null ? void 0 : a.frame) !== void 0) {
+        const { width: t, height: i } = N(e.preset, e.width, e.height);
+        return j(
+          {
+            width: t,
+            height: i,
+            fps: e.fps,
+            durationInFrames: e.durationInFrames,
+            background: e.background,
+            children: e.children
+          },
+          a
+        );
+      }
+      return te(e, a);
     case "presentation":
-      return Et(e);
+      return Nt(e);
   }
 }
-function X(e) {
+function j(e, a) {
+  const t = (a == null ? void 0 : a.frame) !== void 0, { width: i, height: r } = N(e.preset, e.width, e.height);
   return /* @__PURE__ */ s(
-    Ie,
+    Oe,
     {
-      width: e.width,
-      height: e.height,
+      width: i,
+      height: r,
       fps: e.fps,
       durationInFrames: e.durationInFrames,
       background: e.background,
-      children: e.children.map((a, t) => g(a, t))
+      ...t ? { frame: a.frame, autoPlay: !1 } : {},
+      children: e.children.map((n, u) => b(n, u))
     }
   );
 }
-function Y(e) {
+function te(e, a) {
+  const { width: t, height: i } = N(e.preset, e.width, e.height);
   return /* @__PURE__ */ s(
-    ke,
+    Ae,
     {
-      width: e.width,
-      height: e.height,
+      ref: a == null ? void 0 : a.playerRef,
+      width: t,
+      height: i,
       fps: e.fps,
       durationInFrames: e.durationInFrames,
       background: e.background,
       controls: e.controls,
       loop: e.loop,
       autoPlay: e.autoPlay,
-      children: e.children.map((a, t) => g(a, t))
+      children: e.children.map((r, n) => b(r, n))
     }
   );
 }
-function Et(e) {
+function Nt(e) {
+  const { width: a, height: t } = N(e.preset, e.width, e.height);
   return /* @__PURE__ */ s(
-    de,
+    $e,
     {
-      width: e.width,
-      height: e.height,
+      width: a,
+      height: t,
       background: e.background,
       transition: e.transition,
       transitionDuration: e.transitionDuration,
       showHUD: e.showHud,
       showNotes: e.showNotes,
-      children: e.slides.map((a, t) => Ft(a, t))
+      children: e.slides.map((i, r) => Wt(i, r))
     }
   );
 }
-function Ft(e, a) {
+function Wt(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);
+  return /* @__PURE__ */ s(Ce, { title: e.title, notes: e.notes, background: e.background, children: (t = e.children) == null ? void 0 : t.map((i, r) => b(i, r)) }, a);
 }
-function g(e, a) {
+function b(e, a) {
   switch (e.type) {
     case "sequence":
-      return /* @__PURE__ */ s(Ke, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(Ze, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((t, i) => b(t, i)) }, a);
     case "group":
       return /* @__PURE__ */ s(
-        Qe,
+        Ye,
         {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
           translate: e.translate,
           zIndex: e.zIndex,
-          children: e.children.map((t, i) => g(t, i))
+          children: e.children.map((t, i) => b(t, i))
         },
         a
       );
     case "bezierCurve":
       return /* @__PURE__ */ s(
-        Ge,
+        Je,
         {
           x1: e.x1,
           y1: e.y1,
@@ -784,7 +795,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -795,7 +806,7 @@ function g(e, a) {
       );
     case "circle":
       return /* @__PURE__ */ s(
-        He,
+        Xe,
         {
           cx: e.cx,
           cy: e.cy,
@@ -807,7 +818,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -818,7 +829,7 @@ function g(e, a) {
       );
     case "line":
       return /* @__PURE__ */ s(
-        Ve,
+        Ke,
         {
           x1: e.x1,
           y1: e.y1,
@@ -831,7 +842,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -842,7 +853,7 @@ function g(e, a) {
       );
     case "arrow":
       return /* @__PURE__ */ s(
-        Ue,
+        Qe,
         {
           x1: e.x1,
           y1: e.y1,
@@ -856,7 +867,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -867,7 +878,7 @@ function g(e, a) {
       );
     case "rect":
       return /* @__PURE__ */ s(
-        Be,
+        Ge,
         {
           x: e.x,
           y: e.y,
@@ -883,7 +894,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -894,7 +905,7 @@ function g(e, a) {
       );
     case "polygon":
       return /* @__PURE__ */ s(
-        qe,
+        He,
         {
           points: e.points,
           fill: e.fill,
@@ -905,7 +916,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -916,7 +927,7 @@ function g(e, a) {
       );
     case "text":
       return /* @__PURE__ */ s(
-        je,
+        Ue,
         {
           x: e.x,
           y: e.y,
@@ -929,7 +940,7 @@ function g(e, a) {
           opacity: e.opacity,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -941,7 +952,7 @@ function g(e, a) {
       );
     case "image":
       return /* @__PURE__ */ s(
-        Le,
+        Ve,
         {
           src: e.src,
           x: e.x,
@@ -954,7 +965,7 @@ function g(e, a) {
           opacity: e.opacity,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -965,7 +976,7 @@ function g(e, a) {
       );
     case "axes":
       return /* @__PURE__ */ s(
-        Te,
+        Be,
         {
           domain: e.domain,
           range: e.range,
@@ -982,7 +993,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -991,9 +1002,9 @@ function g(e, a) {
         a
       );
     case "functionPlot": {
-      const t = Xe(e.fn);
+      const t = rt(e.fn);
       return /* @__PURE__ */ s(
-        pe,
+        qe,
         {
           fn: (i) => t({ x: i }),
           domain: e.domain,
@@ -1004,7 +1015,7 @@ function g(e, a) {
           strokeWidth: e.strokeWidth,
           samples: e.samples,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           opacity: e.opacity,
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
@@ -1016,7 +1027,7 @@ function g(e, a) {
     }
     case "vector":
       return /* @__PURE__ */ s(
-        De,
+        je,
         {
           from: e.from,
           to: e.to,
@@ -1032,7 +1043,7 @@ function g(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1041,9 +1052,9 @@ function g(e, a) {
         a
       );
     case "vectorField": {
-      const t = Ye(e.fn);
+      const t = nt(e.fn);
       return /* @__PURE__ */ s(
-        _e,
+        Le,
         {
           fn: (i, r) => t({ x: i, y: r }),
           domain: e.domain,
@@ -1059,7 +1070,7 @@ function g(e, a) {
           maxLength: e.maxLength,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1070,7 +1081,7 @@ function g(e, a) {
     }
     case "matrix":
       return /* @__PURE__ */ s(
-        Me,
+        De,
         {
           values: e.values,
           x: e.x,
@@ -1081,7 +1092,7 @@ function g(e, a) {
           fontSize: e.fontSize,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1092,7 +1103,7 @@ function g(e, a) {
       );
     case "graph":
       return /* @__PURE__ */ s(
-        We,
+        _e,
         {
           nodes: e.nodes,
           edges: e.edges,
@@ -1104,7 +1115,7 @@ function g(e, a) {
           labelFontSize: e.labelFontSize,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1115,7 +1126,7 @@ function g(e, a) {
       );
     case "latex":
       return /* @__PURE__ */ s(
-        Ne,
+        We,
         {
           expression: e.expression,
           x: e.x,
@@ -1125,7 +1136,7 @@ function g(e, a) {
           align: e.align,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1136,7 +1147,7 @@ function g(e, a) {
       );
     case "barChart":
       return /* @__PURE__ */ s(
-        Re,
+        Ne,
         {
           bars: e.bars,
           x: e.x,
@@ -1152,7 +1163,7 @@ function g(e, a) {
           valueFormat: e.valueFormat,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: l(e.easing),
+          easing: h(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1162,56 +1173,162 @@ function g(e, a) {
         a
       );
     case "fadeIn":
-      return /* @__PURE__ */ s(Pe, { duration: e.duration, easing: l(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(Me, { duration: e.duration, easing: h(e.easing), children: e.children.map((t, i) => b(t, i)) }, a);
     case "fadeOut":
-      return /* @__PURE__ */ s(Fe, { duration: e.duration, totalFrames: e.totalFrames, easing: l(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(Te, { duration: e.duration, totalFrames: e.totalFrames, easing: h(e.easing), children: e.children.map((t, i) => b(t, i)) }, a);
     case "draw":
-      return /* @__PURE__ */ s(Ee, { duration: e.duration, pathLength: e.pathLength, easing: l(e.easing), children: g(e.children[0], 0) }, a);
+      return /* @__PURE__ */ s(Re, { duration: e.duration, pathLength: e.pathLength, easing: h(e.easing), children: b(e.children[0], 0) }, a);
     case "write":
-      return /* @__PURE__ */ s(ze, { duration: e.duration, easing: l(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(Pe, { duration: e.duration, easing: h(e.easing), children: e.children.map((t, i) => b(t, i)) }, a);
     case "transform":
       return /* @__PURE__ */ s(
-        Ae,
+        Fe,
         {
           duration: e.duration,
-          easing: l(e.easing),
+          easing: h(e.easing),
           translate: e.translate,
           scale: e.scale,
           rotate: e.rotate,
           opacity: e.opacity,
-          children: e.children.map((t, i) => g(t, i))
+          children: e.children.map((t, i) => b(t, i))
         },
         a
       );
     case "morph":
       return /* @__PURE__ */ s(
-        Ce,
+        Ee,
         {
           duration: e.duration,
-          easing: l(e.easing),
+          easing: h(e.easing),
           fromColor: e.fromColor,
           toColor: e.toColor,
           fromOpacity: e.fromOpacity,
           toOpacity: e.toOpacity,
           fromScale: e.fromScale,
           toScale: e.toScale,
-          children: e.children.map((t, i) => g(t, i))
+          children: e.children.map((t, i) => b(t, i))
         },
         a
       );
     case "stagger":
-      return /* @__PURE__ */ s(Oe, { staggerDelay: e.staggerDelay, easing: l(e.easing), children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(pe, { staggerDelay: e.staggerDelay, easing: h(e.easing), children: e.children.map((t, i) => b(t, i)) }, a);
     case "parallel":
-      return /* @__PURE__ */ s(Se, { children: e.children.map((t, i) => g(t, i)) }, a);
+      return /* @__PURE__ */ s(ze, { children: e.children.map((t, i) => b(t, i)) }, a);
     case "scene":
-      return /* @__PURE__ */ s(j.Fragment, { children: X(e) }, a);
+      return /* @__PURE__ */ s(V.Fragment, { children: j(e) }, a);
     case "player":
-      return /* @__PURE__ */ s(j.Fragment, { children: Y(e) }, a);
+      return /* @__PURE__ */ s(V.Fragment, { children: te(e) }, a);
     default:
       return null;
   }
 }
-class Pt {
+function _t(e) {
+  if (!e) return {};
+  const a = {};
+  for (const [t, i] of Object.entries(e))
+    i !== void 0 && (a[`--elucim-${t}`] = i);
+  return a;
+}
+const Gt = et(function({ dsl: a, className: t, style: i, theme: r, poster: n, onError: u }, o) {
+  const v = tt(null);
+  at(o, () => ({
+    getSvgElement: () => {
+      var c;
+      return ((c = v.current) == null ? void 0 : c.getSvgElement()) ?? null;
+    },
+    seekToFrame: (c) => {
+      var f;
+      return (f = v.current) == null ? void 0 : f.seekToFrame(c);
+    },
+    getTotalFrames: () => {
+      var c;
+      return ((c = v.current) == null ? void 0 : c.getTotalFrames()) ?? 0;
+    },
+    play: () => {
+      var c;
+      return (c = v.current) == null ? void 0 : c.play();
+    },
+    pause: () => {
+      var c;
+      return (c = v.current) == null ? void 0 : c.pause();
+    },
+    isPlaying: () => {
+      var c;
+      return ((c = v.current) == null ? void 0 : c.isPlaying()) ?? !1;
+    }
+  }));
+  const O = X(a);
+  if (!O.valid) {
+    const c = O.errors.filter((g) => g.severity === "error").map((g) => ({ path: g.path, message: g.message }));
+    u == null || u(c);
+    const f = /* @__PURE__ */ new Map();
+    for (const g of c) {
+      const w = g.path.split("."), I = w.length > 1 ? w.slice(0, -1).join(".") : g.path, A = f.get(I) ?? [];
+      A.push(g), f.set(I, A);
+    }
+    return /* @__PURE__ */ E(
+      "div",
+      {
+        className: t,
+        style: { color: "#ff6b6b", fontFamily: "monospace", padding: 16, fontSize: 13, ...i },
+        "data-testid": "dsl-error",
+        children: [
+          /* @__PURE__ */ E("strong", { children: [
+            "Elucim DSL Validation Errors (",
+            c.length,
+            "):"
+          ] }),
+          [...f.entries()].map(([g, w]) => /* @__PURE__ */ E("details", { open: !0, style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ E("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
+              g,
+              " (",
+              w.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ s("ul", { style: { margin: "4px 0", paddingLeft: 20 }, children: w.map((I, A) => /* @__PURE__ */ E("li", { children: [
+              /* @__PURE__ */ s("code", { style: { color: "#ffa07a" }, children: I.path }),
+              ": ",
+              I.message
+            ] }, A)) })
+          ] }, g)),
+          /* @__PURE__ */ E("details", { style: { marginTop: 12 }, children: [
+            /* @__PURE__ */ s("summary", { style: { cursor: "pointer", opacity: 0.7 }, children: "Raw JSON" }),
+            /* @__PURE__ */ s("pre", { style: { fontSize: 11, maxHeight: 300, overflow: "auto", marginTop: 4, padding: 8, background: "rgba(0,0,0,0.3)", borderRadius: 4 }, children: JSON.stringify(a, null, 2) })
+          ] })
+        ]
+      }
+    );
+  }
+  const p = _t(r), m = n !== void 0 ? Dt(n, a) : void 0;
+  return /* @__PURE__ */ s("div", { className: t, style: { ...p, ...i }, "data-testid": "dsl-root", children: ee(a.root, {
+    frame: m == null ? void 0 : m.frame,
+    playerRef: v
+  }) });
+});
+function Dt(e, a) {
+  if (e === "first") return { frame: 0 };
+  if (e === "last") {
+    const i = a.root.durationInFrames ?? 1;
+    return { frame: Math.max(0, i - 1) };
+  }
+  return { frame: e };
+}
+function Qt(e, a, t) {
+  const i = X(e);
+  if (!i.valid) {
+    const u = i.errors.filter((o) => o.severity === "error");
+    throw new Error(
+      `DSL validation failed:
+${u.map((o) => `  ${o.path}: ${o.message}`).join(`
+`)}`
+    );
+  }
+  const r = { ...e.root };
+  t != null && t.width && (r.width = t.width), t != null && t.height && (r.height = t.height);
+  const n = ee(r, { frame: a });
+  return it(n);
+}
+class Lt {
   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;
   }
@@ -1314,7 +1431,7 @@ class Pt {
   }
   /** Add an arrow */
   arrow(a, t, i, r, n) {
-    const u = (n == null ? void 0 : n.fadeIn) ?? 12, I = {
+    const u = (n == null ? void 0 : n.fadeIn) ?? 12, o = {
       type: "arrow",
       x1: a,
       y1: t,
@@ -1326,7 +1443,7 @@ class Pt {
       strokeDasharray: n != null && n.dashed ? "6 3" : void 0,
       fadeIn: u
     };
-    return this.addAtCursor(I, (n == null ? void 0 : n.advance) ?? 3);
+    return this.addAtCursor(o, (n == null ? void 0 : n.advance) ?? 3);
   }
   /** Add a line */
   line(a, t, i, r, n) {
@@ -1430,33 +1547,33 @@ class Pt {
    * 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, C = (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, o = a.length * i + (a.length - 1) * n, v = (this._width - o) / 2;
     t == null || t.fadeIn;
-    const A = a.map((b, f) => {
-      const m = C + f * (i + n);
-      return { x: m, y: u, w: i, h: r, cx: m + i / 2, cy: u + r / 2 };
-    }), 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;
+    const O = a.map((m, c) => {
+      const f = v + c * (i + n);
+      return { x: f, y: u, w: i, h: r, cx: f + i / 2, cy: u + r / 2 };
+    }), p = a.map((m, c) => {
+      var I, A;
+      const f = O[c], g = ((I = t == null ? void 0 : t.colors) == null ? void 0 : I[c]) ?? this.theme.boxFill, w = ((A = t == null ? void 0 : t.strokeColors) == null ? void 0 : A[c]) ?? this.theme.boxStroke;
       return {
         type: "group",
         children: [
           {
             type: "rect",
-            x: m.x,
-            y: m.y,
+            x: f.x,
+            y: f.y,
             width: i,
             height: r,
-            fill: E,
-            stroke: F,
+            fill: g,
+            stroke: w,
             strokeWidth: 1.5,
             rx: 6
           },
           {
             type: "text",
-            x: m.cx,
-            y: m.cy + 5,
-            content: b,
+            x: f.cx,
+            y: f.cy + 5,
+            content: m,
             fontSize: (t == null ? void 0 : t.fontSize) ?? 13,
             fill: (t == null ? void 0 : t.textColor) ?? this.theme.text,
             textAnchor: "middle",
@@ -1468,40 +1585,40 @@ class Pt {
     return this.addAtCursor({
       type: "stagger",
       staggerDelay: 3,
-      children: z
-    }, 8 + a.length * 2), A;
+      children: p
+    }, 8 + a.length * 2), O;
   }
   /**
    * Render a vertical stack of labeled boxes.
    */
   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;
+    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, o = (t == null ? void 0 : t.x) ?? this.cx;
     t == null || t.fadeIn;
-    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((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;
+    const v = a.map((p, m) => {
+      const c = u + m * (r + n);
+      return { x: o - i / 2, y: c, w: i, h: r, cx: o, cy: c + r / 2 };
+    }), O = a.map((p, m) => {
+      var g, w;
+      const c = v[m], f = ((g = t == null ? void 0 : t.colors) == null ? void 0 : g[m]) ?? this.theme.boxFill;
       return {
         type: "group",
         children: [
           {
             type: "rect",
-            x: f.x,
-            y: f.y,
+            x: c.x,
+            y: c.y,
             width: i,
             height: r,
-            fill: m,
-            stroke: (F = t == null ? void 0 : t.colors) != null && F[b] ? t.colors[b] : this.theme.boxStroke,
+            fill: f,
+            stroke: (w = t == null ? void 0 : t.colors) != null && w[m] ? t.colors[m] : this.theme.boxStroke,
             strokeWidth: 1.5,
             rx: 6
           },
           {
             type: "text",
-            x: f.cx,
-            y: f.cy + 5,
-            content: z,
+            x: c.cx,
+            y: c.cy + 5,
+            content: p,
             fontSize: (t == null ? void 0 : t.fontSize) ?? 13,
             fill: (t == null ? void 0 : t.textColor) ?? this.theme.text,
             textAnchor: "middle"
@@ -1512,8 +1629,8 @@ class Pt {
     return this.addAtCursor({
       type: "stagger",
       staggerDelay: 3,
-      children: A
-    }, 8 + a.length * 2), C;
+      children: O
+    }, 8 + a.length * 2), v;
   }
   /**
    * Draw arrows connecting sequential positions (e.g., output of boxRow/boxColumn).
@@ -1596,7 +1713,7 @@ class Pt {
     return { elements: this.elements, durationInFrames: a };
   }
 }
-const Rt = {
+const jt = {
   background: "#0a0a1e",
   title: "#e0e7ff",
   subtitle: "#94a3b8",
@@ -1611,7 +1728,7 @@ const Rt = {
   warning: "#fbbf24",
   error: "#f87171",
   palette: ["#4fc3f7", "#a78bfa", "#f472b6", "#34d399", "#fbbf24", "#fb923c", "#6366f1", "#22d3ee"]
-}, pt = {
+}, Kt = {
   background: "#f8fafc",
   title: "#1e293b",
   subtitle: "#64748b",
@@ -1627,9 +1744,9 @@ const Rt = {
   error: "#dc2626",
   palette: ["#2563eb", "#7c3aed", "#db2777", "#16a34a", "#d97706", "#ea580c", "#4f46e5", "#0891b2"]
 };
-class Nt {
+class qt {
   constructor(a, t, i) {
-    this._slides = [], this._title = a, this._theme = t ?? Rt, this._opts = {
+    this._slides = [], this._title = a, this._theme = t ?? jt, this._opts = {
       width: 900,
       height: 640,
       fps: 30,
@@ -1647,7 +1764,7 @@ class Nt {
   /** Build the final ElucimDocument */
   build() {
     const a = this._slides.map((i) => {
-      const r = new Pt(
+      const r = new Lt(
         this._theme,
         this._opts.fps,
         this._opts.width,
@@ -1693,19 +1810,26 @@ class Nt {
     return JSON.stringify(this.build(), null, a ? 2 : void 0);
   }
 }
-function Tt(e, a, t) {
-  return new Nt(e, a, t);
+function Xt(e, a, t) {
+  return new qt(e, a, t);
 }
 export {
-  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
+  Gt as DslRenderer,
+  qt as PresentationBuilder,
+  Lt as SlideBuilder,
+  rt as compileExpression,
+  nt as compileVectorExpression,
+  jt as darkTheme,
+  Kt as lightTheme,
+  Xt as presentation,
+  b as renderElement,
+  te as renderPlayer,
+  Nt as renderPresentation,
+  ee as renderRoot,
+  j as renderScene,
+  Wt as renderSlide,
+  Qt as renderToSvgString,
+  h as resolveEasing,
+  X as validate,
+  K as validateExpression
 };