@elucim/dsl 0.10.0 → 0.12.0

package/dist/index.js

@@ -1,8 +1,9 @@
-import { easeOutBounce as oe, easeOutElastic as ge, easeOutBack as me, easeInBack as ye, easeInOutExpo as be, easeOutExpo as xe, easeInExpo as de, easeInOutSine as ve, easeOutSine as we, easeInSine as ke, easeInOutQuart as Ie, easeOutQuart as Se, easeInQuart as $e, easeInOutCubic as Oe, easeOutCubic as Ce, easeInCubic as Ae, easeInOutQuad as ze, easeOutQuad as pe, easeInQuad as Ee, linear as Fe, spring as Pe, cubicBezier as Re, Presentation as Te, Scene as Me, Player as Ne, Slide as We, Parallel as De, Stagger as _e, Morph as Ve, Transform as Le, Write as je, Draw as Be, FadeOut as qe, FadeIn as Ue, BarChart as Ge, LaTeX as He, Graph as Ke, Matrix as Qe, Text as j, VectorField as Xe, Vector as Je, FunctionPlot as Ye, Axes as Ze, Image as et, Polygon as tt, Rect as at, Arrow as rt, Line as it, Circle as nt, BezierCurve as st, Group as ct, Sequence as lt } from "@elucim/core";
-import { jsx as l, jsxs as P } from "react/jsx-runtime";
-import X, { forwardRef as ut, useRef as ht, useImperativeHandle as ft, useSyncExternalStore as ot } from "react";
-import { renderToStaticMarkup as gt } from "react-dom/server";
-const U = {
+import { easeOutBounce as xe, easeOutElastic as de, easeOutBack as we, easeInBack as ve, easeInOutExpo as ke, easeOutExpo as Ie, easeInExpo as Se, easeInOutSine as $e, easeOutSine as Ce, easeInSine as Oe, easeInOutQuart as Ae, easeOutQuart as pe, easeInQuart as ze, easeInOutCubic as Ee, easeOutCubic as Re, easeInCubic as Te, easeInOutQuad as Fe, easeOutQuad as Pe, easeInQuad as Me, linear as _e, spring as De, cubicBezier as Ne, Presentation as We, resolveColor as u, Scene as Le, Player as Ve, Slide as Be, Parallel as je, Stagger as qe, Morph as Ue, Transform as He, Write as Ge, Draw as Ke, FadeOut as Qe, FadeIn as Xe, BarChart as Je, LaTeX as Ye, Graph as Ze, Matrix as et, Text as U, VectorField as tt, Vector as at, FunctionPlot as rt, Axes as it, Image as nt, Polygon as st, Rect as ct, Arrow as lt, Line as ut, Circle as ht, BezierCurve as ft, Group as gt, Sequence as ot, themeToVars as mt, DARK_THEME_VARS as yt, LIGHT_THEME_VARS as bt } from "@elucim/core";
+import { DARK_THEME as $a, DARK_THEME_VARS as Ca, LIGHT_THEME as Oa, LIGHT_THEME_VARS as Aa, SEMANTIC_TOKENS as pa, TOKEN_NAMES as za, resolveColor as Ea, themeToVars as Ra } from "@elucim/core";
+import { jsx as l, jsxs as E } from "react/jsx-runtime";
+import K, { forwardRef as xt, useRef as dt, useImperativeHandle as wt, useSyncExternalStore as vt } from "react";
+import { renderToStaticMarkup as kt } from "react-dom/server";
+const Q = {
   sin: Math.sin,
   cos: Math.cos,
   tan: Math.tan,
@@ -22,12 +23,12 @@ const U = {
   max: (...e) => Math.max(...e),
   sign: Math.sign,
   pow: Math.pow
-}, J = {
+}, ae = {
   PI: Math.PI,
   E: Math.E,
   TAU: Math.PI * 2
 };
-function K(e) {
+function Y(e) {
   const a = [];
   let t = 0;
   for (; t < e.length; ) {
@@ -90,7 +91,7 @@ function K(e) {
   }
   return a.push({ type: "EOF", value: "", pos: t }), a;
 }
-class Q {
+class Z {
   constructor(a) {
     this.pos = 0, this.tokens = a;
   }
@@ -168,14 +169,14 @@ class Q {
         if (this.peek().type !== "RPAREN")
           for (r.push(this.parseExpression()); this.peek().type === "COMMA"; )
             this.advance(), r.push(this.parseExpression());
-        if (this.expect("RPAREN"), !Object.prototype.hasOwnProperty.call(U, t))
+        if (this.expect("RPAREN"), !Object.prototype.hasOwnProperty.call(Q, t))
           throw new A(
-            `Unknown function '${t}'. Available: ${Object.keys(U).join(", ")}`,
+            `Unknown function '${t}'. Available: ${Object.keys(Q).join(", ")}`,
             a.pos
           );
         return { kind: "call", name: t, args: r };
       }
-      return Object.prototype.hasOwnProperty.call(J, t) ? { kind: "number", value: J[t] } : { kind: "variable", name: t };
+      return Object.prototype.hasOwnProperty.call(ae, t) ? { kind: "number", value: ae[t] } : { kind: "variable", name: t };
     }
     if (a.type === "LPAREN") {
       this.advance();
@@ -196,7 +197,7 @@ class Q {
     );
   }
 }
-function E(e, a) {
+function R(e, a) {
   switch (e.kind) {
     case "number":
       return e.value;
@@ -204,10 +205,10 @@ function E(e, a) {
       if (Object.prototype.hasOwnProperty.call(a, e.name)) return a[e.name];
       throw new A(`Unknown variable '${e.name}'`, 0);
     case "unary":
-      const t = E(e.operand, a);
+      const t = R(e.operand, a);
       return e.op === "-" ? -t : t;
     case "binary": {
-      const r = E(e.left, a), i = E(e.right, a);
+      const r = R(e.left, a), i = R(e.right, a);
       switch (e.op) {
         case "+":
           return r + i;
@@ -223,11 +224,11 @@ function E(e, a) {
       break;
     }
     case "call": {
-      const r = U[e.name], i = e.args.map((n) => E(n, a));
+      const r = Q[e.name], i = e.args.map((n) => R(n, a));
       return r(...i);
     }
     case "array":
-      return e.elements.map((r) => E(r, a));
+      return e.elements.map((r) => R(r, a));
   }
   throw new A("Invalid AST node", 0);
 }
@@ -236,82 +237,82 @@ class A extends Error {
     super(a), this.name = "ExpressionError", this.position = t;
   }
 }
-function mt(e) {
-  const a = K(e), t = new Q(a).parse();
-  return (r) => E(t, r);
+function It(e) {
+  const a = Y(e), t = new Z(a).parse();
+  return (r) => R(t, r);
 }
-function yt(e) {
-  const a = K(e), t = new Q(a).parse();
+function St(e) {
+  const a = Y(e), t = new Z(a).parse();
   if (t.kind !== "array" || t.elements.length !== 2)
     throw new A(
       'Vector expression must be an array of 2 elements, e.g. "[-y, x]"',
       0
     );
-  return (r) => E(t, r);
+  return (r) => R(t, r);
 }
-function ae(e) {
+function ce(e) {
   try {
-    const a = K(e);
-    return new Q(a).parse(), null;
+    const a = Y(e);
+    return new Z(a).parse(), null;
   } catch (a) {
     return a instanceof A ? `${a.message} (at position ${a.position})` : String(a);
   }
 }
-const G = {
-  linear: Fe,
-  easeInQuad: Ee,
-  easeOutQuad: pe,
-  easeInOutQuad: ze,
-  easeInCubic: Ae,
-  easeOutCubic: Ce,
-  easeInOutCubic: Oe,
-  easeInQuart: $e,
-  easeOutQuart: Se,
-  easeInOutQuart: Ie,
-  easeInSine: ke,
-  easeOutSine: we,
-  easeInOutSine: ve,
-  easeInExpo: de,
-  easeOutExpo: xe,
-  easeInOutExpo: be,
-  easeInBack: ye,
-  easeOutBack: me,
-  easeOutElastic: ge,
-  easeOutBounce: oe
+const X = {
+  linear: _e,
+  easeInQuad: Me,
+  easeOutQuad: Pe,
+  easeInOutQuad: Fe,
+  easeInCubic: Te,
+  easeOutCubic: Re,
+  easeInOutCubic: Ee,
+  easeInQuart: ze,
+  easeOutQuart: pe,
+  easeInOutQuart: Ae,
+  easeInSine: Oe,
+  easeOutSine: Ce,
+  easeInOutSine: $e,
+  easeInExpo: Se,
+  easeOutExpo: Ie,
+  easeInOutExpo: ke,
+  easeInBack: ve,
+  easeOutBack: we,
+  easeOutElastic: de,
+  easeOutBounce: xe
 };
-function o(e) {
+function f(e) {
   if (e !== void 0) {
     if (typeof e == "string") {
-      const a = G[e];
+      const a = X[e];
       if (!a) {
-        const t = Object.keys(G), r = t.find((n) => n.toLowerCase() === e.toLowerCase()), i = r ? ` Did you mean '${r}'?` : "";
+        const t = Object.keys(X), r = t.find((n) => n.toLowerCase() === e.toLowerCase()), i = r ? ` Did you mean '${r}'?` : "";
         throw new Error(`Unknown easing '${e}'.${i} Available: ${t.join(", ")}`);
       }
       return a;
     }
     if (e.type === "spring")
-      return Pe({
+      return De({
         stiffness: e.stiffness,
         damping: e.damping,
         mass: e.mass
       });
     if (e.type === "cubicBezier")
-      return Re(e.x1, e.y1, e.x2, e.y2);
+      return Ne(e.x1, e.y1, e.x2, e.y2);
     throw new Error(`Unknown easing type: ${e.type}`);
   }
 }
-const B = Object.keys(G);
-function re(e) {
+const H = Object.keys(X);
+function le(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((r) => r.severity === "error").length === 0, errors: a }) : (bt(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((r) => r.severity === "error").length === 0, errors: a }) : ($t(t.root, "root", a), {
     valid: a.filter((r) => r.severity === "error").length === 0,
     errors: a
   });
 }
-const Y = ["scene", "player", "presentation"], _ = ["card", "slide", "square"], q = [
+const re = ["scene", "player", "presentation"], V = ["card", "slide", "square"], G = [
   "sequence",
   "group",
   "bezierCurve",
@@ -340,196 +341,196 @@ const Y = ["scene", "player", "presentation"], _ = ["card", "slide", "square"],
   "parallel",
   "player",
   "scene"
-], Z = ["none", "fade", "slide-left", "slide-up", "zoom"];
-function bt(e, a, t) {
+], ie = ["none", "fade", "slide-left", "slide-up", "zoom"];
+function $t(e, a, t) {
   const r = e.type;
-  if (!Y.includes(r)) {
-    t.push({ path: `${a}.type`, message: `Root type must be one of: ${Y.join(", ")}. Got "${r}"`, severity: "error" });
+  if (!re.includes(r)) {
+    t.push({ path: `${a}.type`, message: `Root type must be one of: ${re.join(", ")}. Got "${r}"`, severity: "error" });
     return;
   }
-  r === "scene" || r === "player" ? ie(e, a, r, t) : r === "presentation" && xt(e, a, t);
+  r === "scene" || r === "player" ? ue(e, a, r, t) : r === "presentation" && Ct(e, a, t);
 }
-function ie(e, a, t, r) {
-  Bt(e, "durationInFrames", a, r), b(e, "width", a, r), b(e, "height", a, r), b(e, "fps", a, r), z(e, "background", a, r), e.preset !== void 0 && (typeof e.preset != "string" || !_.includes(e.preset)) && r.push({ path: `${a}.preset`, message: `preset must be one of: ${_.join(", ")}. Got "${e.preset}"`, severity: "error" }), t === "player" && (W(e, "controls", a, r), W(e, "loop", a, r), W(e, "autoPlay", a, r)), p(e, a, r);
+function ue(e, a, t, r) {
+  Jt(e, "durationInFrames", a, r), m(e, "width", a, r), m(e, "height", a, r), m(e, "fps", a, r), p(e, "background", a, r), e.preset !== void 0 && (typeof e.preset != "string" || !V.includes(e.preset)) && r.push({ path: `${a}.preset`, message: `preset must be one of: ${V.join(", ")}. Got "${e.preset}"`, severity: "error" }), t === "player" && (W(e, "controls", a, r), W(e, "loop", a, r), W(e, "autoPlay", a, r)), z(e, a, r);
 }
-function xt(e, a, t) {
-  if (b(e, "width", a, t), b(e, "height", a, t), z(e, "background", a, t), b(e, "transitionDuration", a, t), W(e, "showHud", a, t), W(e, "showNotes", a, t), e.preset !== void 0 && (typeof e.preset != "string" || !_.includes(e.preset)) && t.push({ path: `${a}.preset`, message: `preset must be one of: ${_.join(", ")}. Got "${e.preset}"`, severity: "error" }), e.transition !== void 0 && (Z.includes(e.transition) || t.push({
+function Ct(e, a, t) {
+  if (m(e, "width", a, t), m(e, "height", a, t), p(e, "background", a, t), m(e, "transitionDuration", a, t), W(e, "showHud", a, t), W(e, "showNotes", a, t), e.preset !== void 0 && (typeof e.preset != "string" || !V.includes(e.preset)) && t.push({ path: `${a}.preset`, message: `preset must be one of: ${V.join(", ")}. Got "${e.preset}"`, severity: "error" }), e.transition !== void 0 && (ie.includes(e.transition) || t.push({
     path: `${a}.transition`,
-    message: `Invalid transition "${e.transition}". Must be one of: ${Z.join(", ")}`,
+    message: `Invalid transition "${e.transition}". Must be one of: ${ie.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((r, i) => {
-    dt(r, `${a}.slides[${i}]`, t);
+    Ot(r, `${a}.slides[${i}]`, t);
   });
 }
-function dt(e, a, t) {
+function Ot(e, a, t) {
   if (!e || typeof e != "object") {
     t.push({ path: a, message: "Slide must be an object", severity: "error" });
     return;
   }
-  z(e, "title", a, t), z(e, "notes", a, t), z(e, "background", a, t), e.children !== void 0 && (Array.isArray(e.children) ? e.children.forEach((r, i) => {
-    ne(r, `${a}.children[${i}]`, t);
+  p(e, "title", a, t), p(e, "notes", a, t), p(e, "background", a, t), e.children !== void 0 && (Array.isArray(e.children) ? e.children.forEach((r, i) => {
+    he(r, `${a}.children[${i}]`, t);
   }) : t.push({ path: `${a}.children`, message: "Slide children must be an array", severity: "error" }));
 }
-function p(e, a, t) {
+function z(e, a, t) {
   if (!Array.isArray(e.children)) {
     t.push({ path: `${a}.children`, message: 'Expected "children" array', severity: "error" });
     return;
   }
   e.children.forEach((r, i) => {
-    ne(r, `${a}.children[${i}]`, t);
+    he(r, `${a}.children[${i}]`, t);
   });
 }
-function ne(e, a, t) {
+function he(e, a, t) {
   if (!e || typeof e != "object") {
     t.push({ path: a, message: "Element must be an object", severity: "error" });
     return;
   }
   const r = e.type;
-  if (!r || !q.includes(r)) {
-    const i = r ? se(r, q) : "";
+  if (!r || !G.includes(r)) {
+    const i = r ? fe(r, G) : "";
     t.push({
       path: `${a}.type`,
-      message: `Unknown element type "${r}".${i} Valid types: ${q.join(", ")}`,
+      message: `Unknown element type "${r}".${i} Valid types: ${G.join(", ")}`,
       severity: "error"
     });
     return;
   }
   switch (r) {
     case "bezierCurve":
-      vt(e, a, t);
+      At(e, a, t);
       break;
     case "circle":
-      wt(e, a, t);
+      pt(e, a, t);
       break;
     case "line":
-      kt(e, a, t);
+      zt(e, a, t);
       break;
     case "arrow":
-      It(e, a, t);
+      Et(e, a, t);
       break;
     case "rect":
-      St(e, a, t);
+      Rt(e, a, t);
       break;
     case "polygon":
-      $t(e, a, t);
+      Tt(e, a, t);
       break;
     case "text":
-      Ot(e, a, t);
+      Ft(e, a, t);
       break;
     case "image":
-      Vt(e, a, t);
+      Kt(e, a, t);
       break;
     case "axes":
-      Ct(e, a, t);
+      Pt(e, a, t);
       break;
     case "functionPlot":
-      At(e, a, t);
+      Mt(e, a, t);
       break;
     case "vector":
-      zt(e, a, t);
+      _t(e, a, t);
       break;
     case "vectorField":
-      pt(e, a, t);
+      Dt(e, a, t);
       break;
     case "matrix":
-      Et(e, a, t);
+      Nt(e, a, t);
       break;
     case "graph":
-      Ft(e, a, t);
+      Wt(e, a, t);
       break;
     case "latex":
-      Pt(e, a, t);
+      Lt(e, a, t);
       break;
     case "barChart":
-      jt(e, a, t);
+      Xt(e, a, t);
       break;
     case "sequence":
-      Rt(e, a, t);
+      Vt(e, a, t);
       break;
     case "group":
-      Lt(e, a, t);
+      Qt(e, a, t);
       break;
     case "parallel":
-      p(e, a, t);
+      z(e, a, t);
       break;
     case "fadeIn":
     case "fadeOut":
     case "draw":
     case "write":
-      Tt(e, a, t);
+      Bt(e, a, t);
       break;
     case "transform":
-      Mt(e, a, t);
+      jt(e, a, t);
       break;
     case "morph":
-      Nt(e, a, t);
+      qt(e, a, t);
       break;
     case "stagger":
-      Wt(e, a, t);
+      Ut(e, a, t);
       break;
     case "scene":
     case "player":
-      ie(e, a, r, t);
+      ue(e, a, r, t);
       break;
   }
 }
-function vt(e, a, t) {
-  h(e, "x1", a, t), h(e, "y1", a, t), h(e, "cx1", a, t), h(e, "cy1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), e.cx2 !== void 0 && R(e, "cx2", a, t), e.cy2 !== void 0 && R(e, "cy2", a, t), w(e, a, t);
+function At(e, a, t) {
+  h(e, "x1", a, t), h(e, "y1", a, t), h(e, "cx1", a, t), h(e, "cy1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), e.cx2 !== void 0 && P(e, "cx2", a, t), e.cy2 !== void 0 && P(e, "cy2", a, t), v(e, a, t);
 }
-function wt(e, a, t) {
-  h(e, "cx", a, t), h(e, "cy", a, t), F(e, "r", a, t), w(e, a, t);
+function pt(e, a, t) {
+  h(e, "cx", a, t), h(e, "cy", a, t), T(e, "r", a, t), v(e, a, t);
 }
-function kt(e, a, t) {
-  h(e, "x1", a, t), h(e, "y1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), w(e, a, t);
+function zt(e, a, t) {
+  h(e, "x1", a, t), h(e, "y1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), v(e, a, t);
 }
-function It(e, a, t) {
-  h(e, "x1", a, t), h(e, "y1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), w(e, a, t);
+function Et(e, a, t) {
+  h(e, "x1", a, t), h(e, "y1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), v(e, a, t);
 }
-function St(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), F(e, "width", a, t), F(e, "height", a, t), w(e, a, t);
+function Rt(e, a, t) {
+  h(e, "x", a, t), h(e, "y", a, t), T(e, "width", a, t), T(e, "height", a, t), v(e, a, t);
 }
-function $t(e, a, t) {
+function Tt(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((r, i) => {
     (!Array.isArray(r) || r.length !== 2 || typeof r[0] != "number" || typeof r[1] != "number") && t.push({ path: `${a}.points[${i}]`, message: "Each point must be [number, number]", severity: "error" });
-  }) : t.push({ path: `${a}.points`, message: 'Polygon requires a "points" array', severity: "error" }), w(e, a, t);
+  }) : t.push({ path: `${a}.points`, message: 'Polygon requires a "points" array', severity: "error" }), v(e, a, t);
 }
-function Ot(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), typeof e.content != "string" && t.push({ path: `${a}.content`, message: 'Text requires a "content" string', severity: "error" }), w(e, a, t);
+function Ft(e, a, t) {
+  h(e, "x", a, t), h(e, "y", a, t), typeof e.content != "string" && t.push({ path: `${a}.content`, message: 'Text requires a "content" string', severity: "error" }), v(e, a, t);
 }
-function Ct(e, a, t) {
-  S(e, "domain", a, t), S(e, "range", a, t), S(e, "origin", a, t), V(e, a, t);
+function Pt(e, a, t) {
+  I(e, "domain", a, t), I(e, "range", a, t), I(e, "origin", a, t), B(e, a, t);
 }
-function At(e, a, t) {
+function Mt(e, a, t) {
   if (typeof e.fn != "string")
     t.push({ path: `${a}.fn`, message: 'FunctionPlot requires a "fn" expression string', severity: "error" });
   else {
-    const r = ae(e.fn);
+    const r = ce(e.fn);
     r && t.push({ path: `${a}.fn`, message: `Invalid expression: ${r}`, severity: "error" });
   }
-  S(e, "domain", a, t), V(e, a, t);
+  I(e, "domain", a, t), B(e, a, t);
 }
-function zt(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" }), S(e, "from", a, t), V(e, a, t);
+function _t(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" }), I(e, "from", a, t), B(e, a, t);
 }
-function pt(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 r = ae(e.fn);
+    const r = ce(e.fn);
     r && t.push({ path: `${a}.fn`, message: `Invalid vector expression: ${r}`, severity: "error" });
   }
-  S(e, "domain", a, t), S(e, "range", a, t), V(e, a, t);
+  I(e, "domain", a, t), I(e, "range", a, t), B(e, a, t);
 }
-function Et(e, a, t) {
+function Nt(e, a, t) {
   Array.isArray(e.values) ? e.values.forEach((r, i) => {
     Array.isArray(r) || t.push({ path: `${a}.values[${i}]`, message: "Each matrix row must be an array", severity: "error" });
-  }) : t.push({ path: `${a}.values`, message: 'Matrix requires a "values" 2D array', severity: "error" }), w(e, a, t);
+  }) : t.push({ path: `${a}.values`, message: 'Matrix requires a "values" 2D array', severity: "error" }), v(e, a, t);
 }
-function Ft(e, a, t) {
+function Wt(e, a, t) {
   if (!Array.isArray(e.nodes))
     t.push({ path: `${a}.nodes`, message: 'Graph requires a "nodes" array', severity: "error" });
   else {
@@ -540,19 +541,19 @@ function Ft(e, a, t) {
       (typeof i.from != "string" || !r.has(i.from)) && t.push({ path: `${a}.edges[${n}].from`, message: `Edge "from" references unknown node "${i.from}"`, severity: "error" }), (typeof i.to != "string" || !r.has(i.to)) && t.push({ path: `${a}.edges[${n}].to`, message: `Edge "to" references unknown node "${i.to}"`, severity: "error" });
     });
   }
-  w(e, a, t);
+  v(e, a, t);
 }
-function Pt(e, a, t) {
-  typeof e.expression != "string" && t.push({ path: `${a}.expression`, message: 'LaTeX requires an "expression" string', severity: "error" }), h(e, "x", a, t), h(e, "y", a, t), w(e, a, t);
+function Lt(e, a, t) {
+  typeof e.expression != "string" && t.push({ path: `${a}.expression`, message: 'LaTeX requires an "expression" string', severity: "error" }), h(e, "x", a, t), h(e, "y", a, t), v(e, a, t);
 }
-function Rt(e, a, t) {
-  h(e, "from", a, t), qt(e, "durationInFrames", a, t), p(e, a, t);
+function Vt(e, a, t) {
+  h(e, "from", a, t), Yt(e, "durationInFrames", a, t), z(e, a, t);
 }
-function Tt(e, a, t) {
-  b(e, "duration", a, t), T(e, a, t), p(e, a, t);
+function Bt(e, a, t) {
+  m(e, "duration", a, t), M(e, a, t), z(e, a, t);
 }
-function Mt(e, a, t) {
-  if (b(e, "duration", a, t), T(e, a, t), e.translate !== void 0) {
+function jt(e, a, t) {
+  if (m(e, "duration", a, t), M(e, a, t), e.translate !== void 0) {
     const r = e.translate;
     (!r || typeof r != "object") && t.push({ path: `${a}.translate`, message: "translate must be { from: [x,y], to: [x,y] }", severity: "error" });
   }
@@ -568,51 +569,51 @@ function Mt(e, a, t) {
     const r = e.opacity;
     (!r || typeof r != "object" || typeof r.from != "number" || typeof r.to != "number") && t.push({ path: `${a}.opacity`, message: "opacity must be { from: number, to: number }", severity: "error" });
   }
-  p(e, a, t);
+  z(e, a, t);
 }
-function Nt(e, a, t) {
-  b(e, "duration", a, t), T(e, a, t), z(e, "fromColor", a, t), z(e, "toColor", a, t), p(e, a, t);
+function qt(e, a, t) {
+  m(e, "duration", a, t), M(e, a, t), p(e, "fromColor", a, t), p(e, "toColor", a, t), z(e, a, t);
 }
-function Wt(e, a, t) {
-  b(e, "staggerDelay", a, t), T(e, a, t), p(e, a, t);
+function Ut(e, a, t) {
+  m(e, "staggerDelay", a, t), M(e, a, t), z(e, a, t);
 }
-function w(e, a, t) {
-  b(e, "fadeIn", a, t), b(e, "fadeOut", a, t), b(e, "draw", a, t), T(e, a, t), Dt(e, a, t);
+function v(e, a, t) {
+  m(e, "fadeIn", a, t), m(e, "fadeOut", a, t), m(e, "draw", a, t), M(e, a, t), Ht(e, a, t);
 }
-function V(e, a, t) {
-  b(e, "fadeIn", a, t), b(e, "fadeOut", a, t), b(e, "draw", a, t), T(e, a, t), _t(e, a, t);
+function B(e, a, t) {
+  m(e, "fadeIn", a, t), m(e, "fadeOut", a, t), m(e, "draw", a, t), M(e, a, t), Gt(e, a, t);
 }
-const ee = ["none", "circle", "ellipse"];
-function Dt(e, a, t) {
-  if (R(e, "rotation", a, t), S(e, "rotationOrigin", a, t), S(e, "translate", a, t), R(e, "zIndex", a, t), e.scale !== void 0) {
+const ne = ["none", "circle", "ellipse"];
+function Ht(e, a, t) {
+  if (P(e, "rotation", a, t), I(e, "rotationOrigin", a, t), I(e, "translate", a, t), P(e, "zIndex", a, t), e.scale !== void 0) {
     const r = e.scale;
     typeof r == "number" || Array.isArray(r) && r.length === 2 && typeof r[0] == "number" && typeof r[1] == "number" || t.push({ path: `${a}.scale`, message: '"scale" must be a number or [number, number]', severity: "error" });
   }
 }
-function _t(e, a, t) {
-  R(e, "rotation", a, t), S(e, "rotationOrigin", a, t), S(e, "translate", a, t), R(e, "zIndex", a, t);
+function Gt(e, a, t) {
+  P(e, "rotation", a, t), I(e, "rotationOrigin", a, t), I(e, "translate", a, t), P(e, "zIndex", a, t);
 }
-function Vt(e, a, t) {
-  typeof e.src != "string" && t.push({ path: `${a}.src`, message: 'Image requires a "src" string', severity: "error" }), h(e, "x", a, t), h(e, "y", a, t), F(e, "width", a, t), F(e, "height", a, t), z(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 && (ee.includes(e.clipShape) || t.push({
+function Kt(e, a, t) {
+  typeof e.src != "string" && t.push({ path: `${a}.src`, message: 'Image requires a "src" string', severity: "error" }), h(e, "x", a, t), h(e, "y", a, t), T(e, "width", a, t), T(e, "height", a, t), p(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 && (ne.includes(e.clipShape) || t.push({
     path: `${a}.clipShape`,
-    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${ee.join(", ")}`,
+    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${ne.join(", ")}`,
     severity: "error"
-  })), w(e, a, t);
+  })), v(e, a, t);
 }
-function Lt(e, a, t) {
-  p(e, a, t), w(e, a, t);
+function Qt(e, a, t) {
+  z(e, a, t), v(e, a, t);
 }
-function jt(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), F(e, "width", a, t), F(e, "height", a, t), Array.isArray(e.bars) || t.push({ path: `${a}.bars`, message: 'BarChart requires a "bars" array', severity: "error" }), w(e, a, t);
+function Xt(e, a, t) {
+  h(e, "x", a, t), h(e, "y", a, t), T(e, "width", a, t), T(e, "height", a, t), Array.isArray(e.bars) || t.push({ path: `${a}.bars`, message: 'BarChart requires a "bars" array', severity: "error" }), v(e, a, t);
 }
-function T(e, a, t) {
+function M(e, a, t) {
   if (e.easing !== void 0) {
     if (typeof e.easing == "string") {
-      if (!B.includes(e.easing)) {
-        const r = se(e.easing, B);
+      if (!H.includes(e.easing)) {
+        const r = fe(e.easing, H);
         t.push({
           path: `${a}.easing`,
-          message: `Unknown easing "${e.easing}".${r} Available: ${B.join(", ")}`,
+          message: `Unknown easing "${e.easing}".${r} Available: ${H.join(", ")}`,
           severity: "error"
         });
       }
@@ -635,79 +636,57 @@ function T(e, a, t) {
 function h(e, a, t, r) {
   typeof e[a] != "number" && r.push({ path: `${t}.${a}`, message: `Required numeric field "${a}" is missing or not a number`, severity: "error" });
 }
-function F(e, a, t, r) {
+function T(e, a, t, r) {
   (typeof e[a] != "number" || e[a] <= 0) && r.push({ path: `${t}.${a}`, message: `"${a}" must be a positive number`, severity: "error" });
 }
-function Bt(e, a, t, r) {
+function Jt(e, a, t, r) {
   const i = e[a];
   (typeof i != "number" || i <= 0 || !Number.isInteger(i)) && r.push({ path: `${t}.${a}`, message: `"${a}" must be a positive integer`, severity: "error" });
 }
-function b(e, a, t, r) {
+function m(e, a, t, r) {
   e[a] !== void 0 && (typeof e[a] != "number" || e[a] <= 0) && r.push({ path: `${t}.${a}`, message: `"${a}" must be a positive number`, severity: "error" });
 }
-function qt(e, a, t, r) {
+function Yt(e, a, t, r) {
   const i = e[a];
   i !== void 0 && (typeof i != "number" || i <= 0 || !Number.isInteger(i)) && r.push({ path: `${t}.${a}`, message: `"${a}" must be a positive integer`, severity: "error" });
 }
-function z(e, a, t, r) {
+function p(e, a, t, r) {
   e[a] !== void 0 && typeof e[a] != "string" && r.push({ path: `${t}.${a}`, message: `"${a}" must be a string`, severity: "error" });
 }
-function R(e, a, t, r) {
+function P(e, a, t, r) {
   e[a] !== void 0 && typeof e[a] != "number" && r.push({ path: `${t}.${a}`, message: `"${a}" must be a number`, severity: "error" });
 }
 function W(e, a, t, r) {
   e[a] !== void 0 && typeof e[a] != "boolean" && r.push({ path: `${t}.${a}`, message: `"${a}" must be a boolean`, severity: "error" });
 }
-function S(e, a, t, r) {
+function I(e, a, t, r) {
   const i = e[a];
   i !== void 0 && (!Array.isArray(i) || i.length !== 2 || typeof i[0] != "number" || typeof i[1] != "number") && r.push({ path: `${t}.${a}`, message: `"${a}" must be [number, number]`, severity: "error" });
 }
-function se(e, a) {
+function fe(e, a) {
   const t = e.toLowerCase(), r = a.find((n) => n.toLowerCase() === t);
   if (r) return ` Did you mean '${r}'?`;
   const i = a.find((n) => n.toLowerCase().startsWith(t.slice(0, 4)));
   return i ? ` Did you mean '${i}'?` : "";
 }
-const ce = {
-  foreground: { cssVar: "--elucim-foreground", fallback: "#c8d6e5" },
-  background: { cssVar: "--elucim-background", fallback: "#0a0a1e" },
-  title: { cssVar: "--elucim-title", fallback: "#e0e7ff" },
-  subtitle: { cssVar: "--elucim-subtitle", fallback: "#94a3b8" },
-  accent: { cssVar: "--elucim-accent", fallback: "#4fc3f7" },
-  muted: { cssVar: "--elucim-muted", fallback: "#64748b" },
-  surface: { cssVar: "--elucim-surface", fallback: "#1e293b" },
-  border: { cssVar: "--elucim-border", fallback: "#334155" },
-  primary: { cssVar: "--elucim-primary", fallback: "#4fc3f7" },
-  secondary: { cssVar: "--elucim-secondary", fallback: "#a78bfa" },
-  tertiary: { cssVar: "--elucim-tertiary", fallback: "#f472b6" },
-  success: { cssVar: "--elucim-success", fallback: "#34d399" },
-  warning: { cssVar: "--elucim-warning", fallback: "#fbbf24" },
-  error: { cssVar: "--elucim-error", fallback: "#f87171" }
-}, oa = Object.keys(ce);
-function u(e) {
-  if (e === void 0) return;
-  if (!e.startsWith("$")) return e;
-  const a = e.slice(1), t = ce[a];
-  return t ? `var(${t.cssVar}, ${t.fallback})` : `var(--elucim-${a})`;
-}
-const Ut = {
+const Zt = {
   card: [640, 360],
   slide: [1280, 720],
   square: [600, 600]
 };
-function L(e, a, t) {
+function j(e, a, t) {
   if (!e) return { width: a, height: t };
-  const [r, i] = Ut[e];
+  const [r, i] = Zt[e];
   return { width: a ?? r, height: t ?? i };
 }
-function le(e, a) {
+function ge(e, a) {
   switch (e.type) {
     case "scene":
-      return H(e, a);
+      return J(e, a);
     case "player":
       if ((a == null ? void 0 : a.frame) !== void 0) {
-        const { width: t, height: r } = L(e.preset, e.width, e.height);
-        return H(
+        const { width: t, height: r } = j(e.preset, e.width, e.height);
+        return J(
           {
             width: t,
             height: r,
@@ -719,15 +698,15 @@ function le(e, a) {
           a
         );
       }
-      return ue(e, a);
+      return oe(e, a);
     case "presentation":
-      return Gt(e, a);
+      return ea(e, a);
   }
 }
-function H(e, a) {
-  const t = (a == null ? void 0 : a.frame) !== void 0, { width: r, height: i } = L(e.preset, e.width, e.height);
+function J(e, a) {
+  const t = (a == null ? void 0 : a.frame) !== void 0, { width: r, height: i } = j(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Me,
+    Le,
     {
       width: r,
       height: i,
@@ -735,15 +714,16 @@ function H(e, a) {
       durationInFrames: e.durationInFrames,
       background: u(e.background),
       colorScheme: a == null ? void 0 : a.colorScheme,
+      fitToContainer: a == null ? void 0 : a.fitToContainer,
       ...t ? { frame: a.frame, autoPlay: !1 } : {},
-      children: e.children.map((n, s) => v(n, s))
+      children: e.children.map((n, s) => w(n, s))
     }
   );
 }
-function ue(e, a) {
-  const { width: t, height: r } = L(e.preset, e.width, e.height);
+function oe(e, a) {
+  const { width: t, height: r } = j(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Ne,
+    Ve,
     {
       ref: a == null ? void 0 : a.playerRef,
       width: t,
@@ -751,18 +731,20 @@ function ue(e, a) {
       fps: e.fps,
       durationInFrames: e.durationInFrames,
       background: u(e.background),
-      controls: e.controls,
-      loop: e.loop,
-      autoPlay: e.autoPlay,
+      controls: (a == null ? void 0 : a.controls) ?? e.controls,
+      loop: (a == null ? void 0 : a.loop) ?? e.loop,
+      autoPlay: (a == null ? void 0 : a.autoPlay) ?? e.autoPlay,
+      onPlayStateChange: a == null ? void 0 : a.onPlayStateChange,
+      fitToContainer: a == null ? void 0 : a.fitToContainer,
       colorScheme: a == null ? void 0 : a.colorScheme,
-      children: e.children.map((i, n) => v(i, n))
+      children: e.children.map((i, n) => w(i, n))
     }
   );
 }
-function Gt(e, a) {
-  const { width: t, height: r } = L(e.preset, e.width, e.height);
+function ea(e, a) {
+  const { width: t, height: r } = j(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Te,
+    We,
     {
       width: t,
       height: r,
@@ -772,38 +754,38 @@ function Gt(e, a) {
       showHUD: e.showHud,
       showNotes: e.showNotes,
       colorScheme: a == null ? void 0 : a.colorScheme,
-      children: e.slides.map((i, n) => Ht(i, n))
+      children: e.slides.map((i, n) => ta(i, n))
     }
   );
 }
-function Ht(e, a) {
+function ta(e, a) {
   var t;
-  return /* @__PURE__ */ l(We, { title: e.title, notes: e.notes, background: u(e.background), children: (t = e.children) == null ? void 0 : t.map((r, i) => v(r, i)) }, a);
+  return /* @__PURE__ */ l(Be, { title: e.title, notes: e.notes, background: u(e.background), children: (t = e.children) == null ? void 0 : t.map((r, i) => w(r, i)) }, a);
 }
-function v(e, a) {
+function w(e, a) {
   var t, r, i, n;
   switch (e.type) {
     case "sequence":
-      return /* @__PURE__ */ l(lt, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(ot, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((s, c) => w(s, c)) }, a);
     case "group":
       return /* @__PURE__ */ l(
-        ct,
+        gt,
         {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
           translate: e.translate,
           zIndex: e.zIndex,
-          children: e.children.map((s, c) => v(s, c))
+          children: e.children.map((s, c) => w(s, c))
         },
         a
       );
     case "bezierCurve":
       return /* @__PURE__ */ l(
-        st,
+        ft,
         {
           x1: e.x1,
           y1: e.y1,
@@ -821,7 +803,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -832,7 +814,7 @@ function v(e, a) {
       );
     case "circle":
       return /* @__PURE__ */ l(
-        nt,
+        ht,
         {
           cx: e.cx,
           cy: e.cy,
@@ -844,7 +826,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -855,7 +837,7 @@ function v(e, a) {
       );
     case "line":
       return /* @__PURE__ */ l(
-        it,
+        ut,
         {
           x1: e.x1,
           y1: e.y1,
@@ -868,7 +850,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -879,7 +861,7 @@ function v(e, a) {
       );
     case "arrow":
       return /* @__PURE__ */ l(
-        rt,
+        lt,
         {
           x1: e.x1,
           y1: e.y1,
@@ -893,7 +875,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -904,7 +886,7 @@ function v(e, a) {
       );
     case "rect":
       return /* @__PURE__ */ l(
-        at,
+        ct,
         {
           x: e.x,
           y: e.y,
@@ -920,7 +902,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -931,7 +913,7 @@ function v(e, a) {
       );
     case "polygon":
       return /* @__PURE__ */ l(
-        tt,
+        st,
         {
           points: e.points,
           fill: u(e.fill),
@@ -942,7 +924,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -953,7 +935,7 @@ function v(e, a) {
       );
     case "text":
       return /* @__PURE__ */ l(
-        j,
+        U,
         {
           x: e.x,
           y: e.y,
@@ -966,7 +948,7 @@ function v(e, a) {
           opacity: e.opacity,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -978,7 +960,7 @@ function v(e, a) {
       );
     case "image":
       return /* @__PURE__ */ l(
-        et,
+        nt,
         {
           src: e.src,
           x: e.x,
@@ -991,7 +973,7 @@ function v(e, a) {
           opacity: e.opacity,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1002,7 +984,7 @@ function v(e, a) {
       );
     case "axes":
       return /* @__PURE__ */ l(
-        Ze,
+        it,
         {
           domain: e.domain,
           range: e.range,
@@ -1019,7 +1001,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1030,10 +1012,10 @@ function v(e, a) {
     case "functionPlot": {
       let s;
       try {
-        s = mt(e.fn);
+        s = It(e.fn);
       } catch {
         return /* @__PURE__ */ l(
-          j,
+          U,
           {
             x: ((t = e.origin) == null ? void 0 : t[0]) ?? 400,
             y: (((r = e.origin) == null ? void 0 : r[1]) ?? 300) - 20,
@@ -1046,7 +1028,7 @@ function v(e, a) {
         );
       }
       return /* @__PURE__ */ l(
-        Ye,
+        rt,
         {
           fn: (c) => s({ x: c }),
           domain: e.domain,
@@ -1057,7 +1039,7 @@ function v(e, a) {
           strokeWidth: e.strokeWidth,
           samples: e.samples,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           opacity: e.opacity,
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
@@ -1069,7 +1051,7 @@ function v(e, a) {
     }
     case "vector":
       return /* @__PURE__ */ l(
-        Je,
+        at,
         {
           from: e.from,
           to: e.to,
@@ -1085,7 +1067,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1096,10 +1078,10 @@ function v(e, a) {
     case "vectorField": {
       let s;
       try {
-        s = yt(e.fn);
+        s = St(e.fn);
       } catch {
         return /* @__PURE__ */ l(
-          j,
+          U,
           {
             x: ((i = e.origin) == null ? void 0 : i[0]) ?? 400,
             y: (((n = e.origin) == null ? void 0 : n[1]) ?? 300) - 20,
@@ -1112,9 +1094,9 @@ function v(e, a) {
         );
       }
       return /* @__PURE__ */ l(
-        Xe,
+        tt,
         {
-          fn: (c, x) => s({ x: c, y: x }),
+          fn: (c, y) => s({ x: c, y }),
           domain: e.domain,
           range: e.range,
           step: e.step,
@@ -1128,7 +1110,7 @@ function v(e, a) {
           maxLength: e.maxLength,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1139,7 +1121,7 @@ function v(e, a) {
     }
     case "matrix":
       return /* @__PURE__ */ l(
-        Qe,
+        et,
         {
           values: e.values,
           x: e.x,
@@ -1150,7 +1132,7 @@ function v(e, a) {
           fontSize: e.fontSize,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1161,7 +1143,7 @@ function v(e, a) {
       );
     case "graph":
       return /* @__PURE__ */ l(
-        Ke,
+        Ze,
         {
           nodes: e.nodes,
           edges: e.edges,
@@ -1173,7 +1155,7 @@ function v(e, a) {
           labelFontSize: e.labelFontSize,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1184,7 +1166,7 @@ function v(e, a) {
       );
     case "latex":
       return /* @__PURE__ */ l(
-        He,
+        Ye,
         {
           expression: e.expression,
           x: e.x,
@@ -1194,7 +1176,7 @@ function v(e, a) {
           align: e.align,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1205,7 +1187,7 @@ function v(e, a) {
       );
     case "barChart":
       return /* @__PURE__ */ l(
-        Ge,
+        Je,
         {
           bars: e.bars,
           x: e.x,
@@ -1221,7 +1203,7 @@ function v(e, a) {
           valueFormat: e.valueFormat,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: o(e.easing),
+          easing: f(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1231,189 +1213,159 @@ function v(e, a) {
         a
       );
     case "fadeIn":
-      return /* @__PURE__ */ l(Ue, { duration: e.duration, easing: o(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(Xe, { duration: e.duration, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "fadeOut":
-      return /* @__PURE__ */ l(qe, { duration: e.duration, totalFrames: e.totalFrames, easing: o(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(Qe, { duration: e.duration, totalFrames: e.totalFrames, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "draw":
-      return /* @__PURE__ */ l(Be, { duration: e.duration, pathLength: e.pathLength, easing: o(e.easing), children: v(e.children[0], 0) }, a);
+      return /* @__PURE__ */ l(Ke, { duration: e.duration, pathLength: e.pathLength, easing: f(e.easing), children: w(e.children[0], 0) }, a);
     case "write":
-      return /* @__PURE__ */ l(je, { duration: e.duration, easing: o(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(Ge, { duration: e.duration, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "transform":
       return /* @__PURE__ */ l(
-        Le,
+        He,
         {
           duration: e.duration,
-          easing: o(e.easing),
+          easing: f(e.easing),
           translate: e.translate,
           scale: e.scale,
           rotate: e.rotate,
           opacity: e.opacity,
-          children: e.children.map((s, c) => v(s, c))
+          children: e.children.map((s, c) => w(s, c))
         },
         a
       );
     case "morph":
       return /* @__PURE__ */ l(
-        Ve,
+        Ue,
         {
           duration: e.duration,
-          easing: o(e.easing),
+          easing: f(e.easing),
           fromColor: u(e.fromColor),
           toColor: u(e.toColor),
           fromOpacity: e.fromOpacity,
           toOpacity: e.toOpacity,
           fromScale: e.fromScale,
           toScale: e.toScale,
-          children: e.children.map((s, c) => v(s, c))
+          children: e.children.map((s, c) => w(s, c))
         },
         a
       );
     case "stagger":
-      return /* @__PURE__ */ l(_e, { staggerDelay: e.staggerDelay, easing: o(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(qe, { staggerDelay: e.staggerDelay, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "parallel":
-      return /* @__PURE__ */ l(De, { children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(je, { children: e.children.map((s, c) => w(s, c)) }, a);
     case "scene":
-      return /* @__PURE__ */ l(X.Fragment, { children: H(e) }, a);
+      return /* @__PURE__ */ l(K.Fragment, { children: J(e) }, a);
     case "player":
-      return /* @__PURE__ */ l(X.Fragment, { children: ue(e) }, a);
+      return /* @__PURE__ */ l(K.Fragment, { children: oe(e) }, a);
     default:
       return null;
   }
 }
-const he = {
-  background: "#0a0a1e",
-  title: "#e0e7ff",
-  subtitle: "#94a3b8",
-  primary: "#4fc3f7",
-  secondary: "#a78bfa",
-  tertiary: "#f472b6",
-  muted: "#64748b",
-  text: "#c8d6e5",
-  boxFill: "rgba(79,195,247,0.12)",
-  boxStroke: "#4fc3f7",
-  success: "#34d399",
-  warning: "#fbbf24",
-  error: "#f87171",
-  palette: ["#4fc3f7", "#a78bfa", "#f472b6", "#34d399", "#fbbf24", "#fb923c", "#6366f1", "#22d3ee"]
-}, Kt = {
-  background: "#f8fafc",
-  title: "#1e293b",
-  subtitle: "#64748b",
-  primary: "#2563eb",
-  secondary: "#7c3aed",
-  tertiary: "#db2777",
-  muted: "#94a3b8",
-  text: "#334155",
-  boxFill: "rgba(37,99,235,0.08)",
-  boxStroke: "#2563eb",
-  success: "#16a34a",
-  warning: "#d97706",
-  error: "#dc2626",
-  palette: ["#2563eb", "#7c3aed", "#db2777", "#16a34a", "#d97706", "#ea580c", "#4f46e5", "#0891b2"]
-};
-function Qt(e) {
-  if (!e) return {};
-  const a = {};
-  for (const [t, r] of Object.entries(e))
-    r !== void 0 && (a[`--elucim-${t}`] = r);
-  return a;
-}
-function fe(e) {
-  return {
-    "--elucim-foreground": e.text,
-    "--elucim-background": e.background,
-    "--elucim-title": e.title,
-    "--elucim-subtitle": e.subtitle,
-    "--elucim-accent": e.primary,
-    "--elucim-muted": e.muted,
-    "--elucim-surface": e.background,
-    "--elucim-primary": e.primary,
-    "--elucim-secondary": e.secondary,
-    "--elucim-tertiary": e.tertiary,
-    "--elucim-success": e.success,
-    "--elucim-warning": e.warning,
-    "--elucim-error": e.error
-  };
-}
-const Xt = fe(he), Jt = fe(Kt);
-function Yt(e) {
+function aa(e) {
   if (typeof window > "u" || typeof window.matchMedia != "function") return () => {
   };
   const a = window.matchMedia("(prefers-color-scheme: dark)");
   return a.addEventListener("change", e), () => a.removeEventListener("change", e);
 }
-function Zt() {
+function ra() {
   return typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
-function ea() {
+function ia() {
   return !0;
 }
-function ta() {
-  return ot(Yt, Zt, ea);
+function na() {
+  return vt(aa, ra, ia);
+}
+class sa extends K.Component {
+  constructor() {
+    super(...arguments), this.state = { error: null };
+  }
+  static getDerivedStateFromError(a) {
+    return { error: a };
+  }
+  componentDidCatch(a) {
+    var t, r;
+    (r = (t = this.props).onRenderError) == null || r.call(t, a);
+  }
+  render() {
+    return this.state.error ? this.props.fallback !== void 0 ? this.props.fallback : /* @__PURE__ */ E(
+      "div",
+      {
+        style: { color: "#ff6b6b", fontFamily: "monospace", padding: 16, fontSize: 13 },
+        "data-testid": "dsl-render-error",
+        children: [
+          /* @__PURE__ */ l("strong", { children: "Render Error:" }),
+          " ",
+          this.state.error.message
+        ]
+      }
+    ) : this.props.children;
+  }
 }
-const ga = ut(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, onError: c }, x) {
-  const m = ht(null), k = ta();
-  ft(x, () => ({
+const da = xt(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, controls: c, autoPlay: y, loop: d, fitToContainer: S, onPlayStateChange: b, onRenderError: g, fallback: x, onError: C }, O) {
+  const $ = dt(null), _ = na();
+  wt(O, () => ({
     getSvgElement: () => {
-      var f;
-      return ((f = m.current) == null ? void 0 : f.getSvgElement()) ?? null;
+      var o;
+      return ((o = $.current) == null ? void 0 : o.getSvgElement()) ?? null;
     },
-    seekToFrame: (f) => {
-      var C;
-      return (C = m.current) == null ? void 0 : C.seekToFrame(f);
+    seekToFrame: (o) => {
+      var F;
+      return (F = $.current) == null ? void 0 : F.seekToFrame(o);
     },
     getTotalFrames: () => {
-      var f;
-      return ((f = m.current) == null ? void 0 : f.getTotalFrames()) ?? 0;
+      var o;
+      return ((o = $.current) == null ? void 0 : o.getTotalFrames()) ?? 0;
     },
     play: () => {
-      var f;
-      return (f = m.current) == null ? void 0 : f.play();
+      var o;
+      return (o = $.current) == null ? void 0 : o.play();
     },
     pause: () => {
-      var f;
-      return (f = m.current) == null ? void 0 : f.pause();
+      var o;
+      return (o = $.current) == null ? void 0 : o.pause();
     },
     isPlaying: () => {
-      var f;
-      return ((f = m.current) == null ? void 0 : f.isPlaying()) ?? !1;
+      var o;
+      return ((o = $.current) == null ? void 0 : o.isPlaying()) ?? !1;
     }
   }));
-  const y = re(a);
-  if (!y.valid) {
-    const f = y.errors.filter((I) => I.severity === "error").map((I) => ({ path: I.path, message: I.message }));
-    c == null || c(f);
-    const C = /* @__PURE__ */ new Map();
-    for (const I of f) {
-      const M = I.path.split("."), N = M.length > 1 ? M.slice(0, -1).join(".") : I.path, D = C.get(N) ?? [];
-      D.push(I), C.set(N, D);
+  const ee = le(a);
+  if (!ee.valid) {
+    const o = ee.errors.filter((k) => k.severity === "error").map((k) => ({ path: k.path, message: k.message }));
+    C == null || C(o);
+    const F = /* @__PURE__ */ new Map();
+    for (const k of o) {
+      const D = k.path.split("."), N = D.length > 1 ? D.slice(0, -1).join(".") : k.path, L = F.get(N) ?? [];
+      L.push(k), F.set(N, L);
     }
-    return /* @__PURE__ */ P(
+    return /* @__PURE__ */ E(
       "div",
       {
         className: t,
         style: { color: "#ff6b6b", fontFamily: "monospace", padding: 16, fontSize: 13, ...r },
         "data-testid": "dsl-error",
         children: [
-          /* @__PURE__ */ P("strong", { children: [
+          /* @__PURE__ */ E("strong", { children: [
             "Elucim DSL Validation Errors (",
-            f.length,
+            o.length,
             "):"
           ] }),
-          [...C.entries()].map(([I, M]) => /* @__PURE__ */ P("details", { open: !0, style: { marginTop: 8 }, children: [
-            /* @__PURE__ */ P("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
-              I,
+          [...F.entries()].map(([k, D]) => /* @__PURE__ */ E("details", { open: !0, style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ E("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
+              k,
               " (",
-              M.length,
+              D.length,
               ")"
             ] }),
-            /* @__PURE__ */ l("ul", { style: { margin: "4px 0", paddingLeft: 20 }, children: M.map((N, D) => /* @__PURE__ */ P("li", { children: [
+            /* @__PURE__ */ l("ul", { style: { margin: "4px 0", paddingLeft: 20 }, children: D.map((N, L) => /* @__PURE__ */ E("li", { children: [
               /* @__PURE__ */ l("code", { style: { color: "#ffa07a" }, children: N.path }),
               ": ",
               N.message
-            ] }, D)) })
-          ] }, I)),
-          /* @__PURE__ */ P("details", { style: { marginTop: 12 }, children: [
+            ] }, L)) })
+          ] }, k)),
+          /* @__PURE__ */ E("details", { style: { marginTop: 12 }, children: [
             /* @__PURE__ */ l("summary", { style: { cursor: "pointer", opacity: 0.7 }, children: "Raw JSON" }),
             /* @__PURE__ */ l("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) })
           ] })
@@ -1421,17 +1373,22 @@ const ga = ut(function({ dsl: a, className: t, style: r, theme: i, colorScheme:
       }
     );
   }
-  const g = Qt(i);
-  let d = {};
-  n && (d = (n === "auto" ? k : n === "dark") ? Xt : Jt);
-  const $ = s !== void 0 ? aa(s, a) : void 0, O = n ? n === "auto" ? k ? "dark" : "light" : n : void 0;
-  return /* @__PURE__ */ l("div", { className: t, style: { ...d, ...g, ...r }, "data-testid": "dsl-root", children: le(a.root, {
-    frame: $ == null ? void 0 : $.frame,
-    playerRef: m,
-    colorScheme: O
-  }) });
+  const me = mt(i);
+  let te = {};
+  n && (te = (n === "auto" ? _ : n === "dark") ? yt : bt);
+  const q = s !== void 0 ? ca(s, a) : void 0, ye = n ? n === "auto" ? _ ? "dark" : "light" : n : void 0, be = ge(a.root, {
+    frame: q == null ? void 0 : q.frame,
+    playerRef: $,
+    colorScheme: ye,
+    controls: c,
+    autoPlay: y,
+    loop: d,
+    fitToContainer: S,
+    onPlayStateChange: b
+  });
+  return /* @__PURE__ */ l("div", { className: t, style: { ...te, ...me, ...r }, "data-testid": "dsl-root", children: /* @__PURE__ */ l(sa, { onRenderError: g, fallback: x, children: be }) });
 });
-function aa(e, a) {
+function ca(e, a) {
   if (e === "first") return { frame: 0 };
   if (e === "last") {
     const r = a.root.durationInFrames ?? 1;
@@ -1439,8 +1396,8 @@ function aa(e, a) {
   }
   return { frame: e };
 }
-function ra(e, a, t) {
-  const r = re(e);
+function la(e, a, t) {
+  const r = le(e);
   if (!r.valid) {
     const s = r.errors.filter((c) => c.severity === "error");
     throw new Error(
@@ -1451,59 +1408,59 @@ ${s.map((c) => `  ${c.path}: ${c.message}`).join(`
   }
   const i = { ...e.root };
   t != null && t.width && (i.width = t.width), t != null && t.height && (i.height = t.height);
-  const n = le(i, { frame: a });
-  return gt(n);
+  const n = ge(i, { frame: a });
+  return kt(n);
 }
-function te(e) {
+function se(e) {
   let a;
   do
     a = e, e = e.replace(/var\(--[a-z][\w-]*,\s*([^)]+)\)/gi, "$1");
   while (e !== a);
   return e = e.replace(/var\(--[a-z][\w-]*\)/gi, "none"), e = e.replace(/light-dark\([^,]+,\s*([^)]+)\)/gi, "$1"), e;
 }
-async function ma(e, a, t) {
-  const r = (t == null ? void 0 : t.scale) ?? 2, n = ra(e, a, {
+async function wa(e, a, t) {
+  const r = (t == null ? void 0 : t.scale) ?? 2, n = la(e, a, {
     width: t == null ? void 0 : t.width,
     height: t == null ? void 0 : t.height
   }).match(/<svg[\s\S]*<\/svg>/);
   if (!n)
     throw new Error("renderToSvgString did not produce an SVG element");
   let s = n[0];
-  const c = s.match(/viewBox="0 0 (\d+(?:\.\d+)?) (\d+(?:\.\d+)?)"/), x = (t == null ? void 0 : t.width) ?? (c ? parseFloat(c[1]) : 800), m = (t == null ? void 0 : t.height) ?? (c ? parseFloat(c[2]) : 600), k = Math.round(x * r), y = Math.round(m * r);
-  s = s.replace(/width="100%"/, `width="${k}"`).replace(/height="100%"/, `height="${y}"`), s.includes("xmlns=") || (s = s.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"')), s = s.replace(/style="[^"]*position:\s*absolute[^"]*"/, "");
+  const c = s.match(/viewBox="0 0 (\d+(?:\.\d+)?) (\d+(?:\.\d+)?)"/), y = (t == null ? void 0 : t.width) ?? (c ? parseFloat(c[1]) : 800), d = (t == null ? void 0 : t.height) ?? (c ? parseFloat(c[2]) : 600), S = Math.round(y * r), b = Math.round(d * r);
+  s = s.replace(/width="100%"/, `width="${S}"`).replace(/height="100%"/, `height="${b}"`), s.includes("xmlns=") || (s = s.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"')), s = s.replace(/style="[^"]*position:\s*absolute[^"]*"/, "");
   let g = e.root.background ?? "#ffffff";
-  g.startsWith("$") && (g = u(g) ?? "#ffffff"), g = te(g);
-  const d = `<rect width="${x}" height="${m}" fill="${g}"/>`;
-  s = s.replace(/>/, `>${d}`), s = te(s);
+  g.startsWith("$") && (g = u(g) ?? "#ffffff"), g = se(g);
+  const x = `<rect width="${y}" height="${d}" fill="${g}"/>`;
+  s = s.replace(/>/, `>${x}`), s = se(s);
   const O = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(s)))}`;
   if (typeof Image < "u" && typeof document < "u")
-    return na(O, k, y);
+    return ha(O, S, b);
   if (typeof OffscreenCanvas < "u")
-    return ia(O, k, y);
+    return ua(O, S, b);
   throw new Error("renderToPng requires Image+document (browser) or OffscreenCanvas (worker)");
 }
-async function ia(e, a, t) {
+async function ua(e, a, t) {
   const i = await (await fetch(e)).blob(), n = await createImageBitmap(i, { resizeWidth: a, resizeHeight: t }), s = new OffscreenCanvas(a, t);
   s.getContext("2d").drawImage(n, 0, 0, a, t), n.close();
-  const m = await (await s.convertToBlob({ type: "image/png" })).arrayBuffer();
-  return new Uint8Array(m);
+  const d = await (await s.convertToBlob({ type: "image/png" })).arrayBuffer();
+  return new Uint8Array(d);
 }
-function na(e, a, t) {
+function ha(e, a, t) {
   return new Promise((r, i) => {
     const n = new Image();
     n.onload = () => {
       const s = document.createElement("canvas");
       s.width = a, s.height = t, s.getContext("2d").drawImage(n, 0, 0, a, t), s.toBlob(
-        (x) => {
-          if (!x) return i(new Error("Failed to render PNG from SVG"));
-          x.arrayBuffer().then((m) => r(new Uint8Array(m)));
+        (y) => {
+          if (!y) return i(new Error("Failed to render PNG from SVG"));
+          y.arrayBuffer().then((d) => r(new Uint8Array(d)));
         },
         "image/png"
       );
     }, n.onerror = () => i(new Error("Failed to load SVG data URI for PNG render")), n.src = e;
   });
 }
-class sa {
+class fa {
   constructor(a, t = 30, r = 900, i = 640) {
     this.elements = [], this.cursor = 0, this.theme = a, this._fps = t, this._width = r, this._height = i;
   }
@@ -1597,7 +1554,7 @@ class sa {
         y: t.y,
         content: a,
         fontSize: t.fontSize ?? 14,
-        fill: t.color ?? this.theme.text,
+        fill: t.color ?? this.theme.foreground,
         textAnchor: t.anchor ?? "middle",
         fontWeight: t.fontWeight,
         fontFamily: t.fontFamily
@@ -1677,7 +1634,7 @@ class sa {
       width: t.width,
       height: t.height,
       barColor: t.barColor ?? this.theme.primary,
-      labelColor: t.labelColor ?? this.theme.text,
+      labelColor: t.labelColor ?? this.theme.foreground,
       labelFontSize: t.labelFontSize,
       maxValue: t.maxValue,
       valueFormat: t.valueFormat,
@@ -1695,7 +1652,7 @@ class sa {
       x: (t == null ? void 0 : t.x) ?? this.cx,
       y: (t == null ? void 0 : t.y) ?? 300,
       cellSize: (t == null ? void 0 : t.cellSize) ?? 50,
-      color: (t == null ? void 0 : t.color) ?? this.theme.text,
+      color: (t == null ? void 0 : t.color) ?? this.theme.foreground,
       bracketColor: (t == null ? void 0 : t.bracketColor) ?? this.theme.primary,
       fontSize: t == null ? void 0 : t.fontSize,
       fadeIn: r
@@ -1722,35 +1679,35 @@ class sa {
    * Returns the box positions for follow-up arrows, etc.
    */
   boxRow(a, t) {
-    const r = (t == null ? void 0 : t.boxWidth) ?? 80, i = (t == null ? void 0 : t.boxHeight) ?? 40, n = (t == null ? void 0 : t.gap) ?? 12, s = (t == null ? void 0 : t.y) ?? 250, c = a.length * r + (a.length - 1) * n, x = (this._width - c) / 2;
+    const r = (t == null ? void 0 : t.boxWidth) ?? 80, i = (t == null ? void 0 : t.boxHeight) ?? 40, n = (t == null ? void 0 : t.gap) ?? 12, s = (t == null ? void 0 : t.y) ?? 250, c = a.length * r + (a.length - 1) * n, y = (this._width - c) / 2;
     t == null || t.fadeIn;
-    const m = a.map((y, g) => {
-      const d = x + g * (r + n);
-      return { x: d, y: s, w: r, h: i, cx: d + r / 2, cy: s + i / 2 };
-    }), k = a.map((y, g) => {
-      var f, C;
-      const d = m[g], $ = ((f = t == null ? void 0 : t.colors) == null ? void 0 : f[g]) ?? this.theme.boxFill, O = ((C = t == null ? void 0 : t.strokeColors) == null ? void 0 : C[g]) ?? this.theme.boxStroke;
+    const d = a.map((b, g) => {
+      const x = y + g * (r + n);
+      return { x, y: s, w: r, h: i, cx: x + r / 2, cy: s + i / 2 };
+    }), S = a.map((b, g) => {
+      var $, _;
+      const x = d[g], C = (($ = t == null ? void 0 : t.colors) == null ? void 0 : $[g]) ?? this.theme.boxFill, O = ((_ = t == null ? void 0 : t.strokeColors) == null ? void 0 : _[g]) ?? this.theme.boxStroke;
       return {
         type: "group",
         children: [
           {
             type: "rect",
-            x: d.x,
-            y: d.y,
+            x: x.x,
+            y: x.y,
             width: r,
             height: i,
-            fill: $,
+            fill: C,
             stroke: O,
             strokeWidth: 1.5,
             rx: 6
           },
           {
             type: "text",
-            x: d.cx,
-            y: d.cy + 5,
-            content: y,
+            x: x.cx,
+            y: x.cy + 5,
+            content: b,
             fontSize: (t == null ? void 0 : t.fontSize) ?? 13,
-            fill: (t == null ? void 0 : t.textColor) ?? this.theme.text,
+            fill: (t == null ? void 0 : t.textColor) ?? this.theme.foreground,
             textAnchor: "middle",
             fontFamily: t == null ? void 0 : t.fontFamily
           }
@@ -1760,8 +1717,8 @@ class sa {
     return this.addAtCursor({
       type: "stagger",
       staggerDelay: 3,
-      children: k
-    }, 8 + a.length * 2), m;
+      children: S
+    }, 8 + a.length * 2), d;
   }
   /**
    * Render a vertical stack of labeled boxes.
@@ -1769,12 +1726,12 @@ class sa {
   boxColumn(a, t) {
     const r = (t == null ? void 0 : t.boxWidth) ?? 160, i = (t == null ? void 0 : t.boxHeight) ?? 36, n = (t == null ? void 0 : t.gap) ?? 8, s = (t == null ? void 0 : t.y) ?? 150, c = (t == null ? void 0 : t.x) ?? this.cx;
     t == null || t.fadeIn;
-    const x = a.map((k, y) => {
-      const g = s + y * (i + n);
+    const y = a.map((S, b) => {
+      const g = s + b * (i + n);
       return { x: c - r / 2, y: g, w: r, h: i, cx: c, cy: g + i / 2 };
-    }), m = a.map((k, y) => {
-      var $, O;
-      const g = x[y], d = (($ = t == null ? void 0 : t.colors) == null ? void 0 : $[y]) ?? this.theme.boxFill;
+    }), d = a.map((S, b) => {
+      var C, O;
+      const g = y[b], x = ((C = t == null ? void 0 : t.colors) == null ? void 0 : C[b]) ?? this.theme.boxFill;
       return {
         type: "group",
         children: [
@@ -1784,8 +1741,8 @@ class sa {
             y: g.y,
             width: r,
             height: i,
-            fill: d,
-            stroke: (O = t == null ? void 0 : t.colors) != null && O[y] ? t.colors[y] : this.theme.boxStroke,
+            fill: x,
+            stroke: (O = t == null ? void 0 : t.colors) != null && O[b] ? t.colors[b] : this.theme.boxStroke,
             strokeWidth: 1.5,
             rx: 6
           },
@@ -1793,9 +1750,9 @@ class sa {
             type: "text",
             x: g.cx,
             y: g.cy + 5,
-            content: k,
+            content: S,
             fontSize: (t == null ? void 0 : t.fontSize) ?? 13,
-            fill: (t == null ? void 0 : t.textColor) ?? this.theme.text,
+            fill: (t == null ? void 0 : t.textColor) ?? this.theme.foreground,
             textAnchor: "middle"
           }
         ]
@@ -1804,8 +1761,8 @@ class sa {
     return this.addAtCursor({
       type: "stagger",
       staggerDelay: 3,
-      children: m
-    }, 8 + a.length * 2), x;
+      children: d
+    }, 8 + a.length * 2), y;
   }
   /**
    * Draw arrows connecting sequential positions (e.g., output of boxRow/boxColumn).
@@ -1888,9 +1845,46 @@ class sa {
     return { elements: this.elements, durationInFrames: a };
   }
 }
-class ca {
+const ga = {
+  foreground: "#c8d6e5",
+  background: "#0a0a1e",
+  title: "#e0e7ff",
+  subtitle: "#94a3b8",
+  primary: "#4fc3f7",
+  secondary: "#a78bfa",
+  tertiary: "#f472b6",
+  muted: "#64748b",
+  surface: "#1e293b",
+  border: "#334155",
+  accent: "#4fc3f7",
+  success: "#34d399",
+  warning: "#fbbf24",
+  error: "#f87171",
+  boxFill: "rgba(79,195,247,0.12)",
+  boxStroke: "#4fc3f7",
+  palette: ["#4fc3f7", "#a78bfa", "#f472b6", "#34d399", "#fbbf24", "#fb923c", "#6366f1", "#22d3ee"]
+}, va = {
+  foreground: "#334155",
+  background: "#f8fafc",
+  title: "#1e293b",
+  subtitle: "#64748b",
+  primary: "#2563eb",
+  secondary: "#7c3aed",
+  tertiary: "#db2777",
+  muted: "#94a3b8",
+  surface: "#ffffff",
+  border: "#e2e8f0",
+  accent: "#2563eb",
+  success: "#16a34a",
+  warning: "#d97706",
+  error: "#dc2626",
+  boxFill: "rgba(37,99,235,0.08)",
+  boxStroke: "#2563eb",
+  palette: ["#2563eb", "#7c3aed", "#db2777", "#16a34a", "#d97706", "#ea580c", "#4f46e5", "#0891b2"]
+};
+class oa {
   constructor(a, t, r) {
-    this._slides = [], this._title = a, this._theme = t ?? he, this._opts = {
+    this._slides = [], this._title = a, this._theme = t ?? ga, this._opts = {
       width: 900,
       height: 640,
       fps: 30,
@@ -1908,7 +1902,7 @@ class ca {
   /** Build the final ElucimDocument */
   build() {
     const a = this._slides.map((r) => {
-      const i = new sa(
+      const i = new fa(
         this._theme,
         this._opts.fps,
         this._opts.width,
@@ -1954,31 +1948,36 @@ class ca {
     return JSON.stringify(this.build(), null, a ? 2 : void 0);
   }
 }
-function ya(e, a, t) {
-  return new ca(e, a, t);
+function ka(e, a, t) {
+  return new oa(e, a, t);
 }
 export {
-  ga as DslRenderer,
-  ca as PresentationBuilder,
-  ce as SEMANTIC_TOKENS,
-  sa as SlideBuilder,
-  oa as TOKEN_NAMES,
-  mt as compileExpression,
-  yt as compileVectorExpression,
-  he as darkTheme,
-  Kt as lightTheme,
-  ya as presentation,
-  v as renderElement,
-  ue as renderPlayer,
-  Gt as renderPresentation,
-  le as renderRoot,
-  H as renderScene,
-  Ht as renderSlide,
-  ma as renderToPng,
-  ra as renderToSvgString,
-  u as resolveColor,
-  o as resolveEasing,
-  te as stripCssFunctions,
-  re as validate,
-  ae as validateExpression
+  $a as DARK_THEME,
+  Ca as DARK_THEME_VARS,
+  da as DslRenderer,
+  Oa as LIGHT_THEME,
+  Aa as LIGHT_THEME_VARS,
+  oa as PresentationBuilder,
+  pa as SEMANTIC_TOKENS,
+  fa as SlideBuilder,
+  za as TOKEN_NAMES,
+  It as compileExpression,
+  St as compileVectorExpression,
+  ga as darkTheme,
+  va as lightTheme,
+  ka as presentation,
+  w as renderElement,
+  oe as renderPlayer,
+  ea as renderPresentation,
+  ge as renderRoot,
+  J as renderScene,
+  ta as renderSlide,
+  wa as renderToPng,
+  la as renderToSvgString,
+  Ea as resolveColor,
+  f as resolveEasing,
+  se as stripCssFunctions,
+  Ra as themeToVars,
+  le as validate,
+  ce as validateExpression
 };