@elucim/dsl 0.11.0 → 0.12.0

package/dist/index.js

@@ -1,8 +1,9 @@
-import { easeOutBounce as be, easeOutElastic as xe, easeOutBack as de, easeInBack as we, easeInOutExpo as ve, easeOutExpo as ke, easeInExpo as Ie, easeInOutSine as Se, easeOutSine as $e, easeInSine as Oe, easeInOutQuart as Ce, easeOutQuart as Ae, easeInQuart as ze, easeInOutCubic as pe, easeOutCubic as Ee, easeInCubic as Pe, easeInOutQuad as Fe, easeOutQuad as Re, easeInQuad as Te, linear as Me, spring as Ne, cubicBezier as We, Presentation as De, Scene as _e, Player as Ve, Slide as Le, Parallel as je, Stagger as Be, Morph as qe, Transform as Ue, Write as Ge, Draw as He, FadeOut as Ke, FadeIn as Qe, BarChart as Xe, LaTeX as Je, Graph as Ye, Matrix as Ze, Text as U, VectorField as et, Vector as tt, FunctionPlot as at, Axes as rt, Image as it, Polygon as nt, Rect as st, Arrow as ct, Line as lt, Circle as ut, BezierCurve as ht, Group as ft, Sequence as gt } from "@elucim/core";
-import { jsx as l, jsxs as F } from "react/jsx-runtime";
-import Z, { forwardRef as ot, useRef as mt, useImperativeHandle as yt, useSyncExternalStore as bt } from "react";
-import { renderToStaticMarkup as xt } from "react-dom/server";
-const K = {
+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 K = {
   max: (...e) => Math.max(...e),
   sign: Math.sign,
   pow: Math.pow
-}, ee = {
+}, ae = {
   PI: Math.PI,
   E: Math.E,
   TAU: Math.PI * 2
 };
-function J(e) {
+function Y(e) {
   const a = [];
   let t = 0;
   for (; t < e.length; ) {
@@ -85,12 +86,12 @@ function J(e) {
         a.push({ type: "COMMA", value: ",", pos: i });
         break;
       default:
-        throw new O(`Unexpected character '${r}'`, i);
+        throw new A(`Unexpected character '${r}'`, i);
     }
   }
   return a.push({ type: "EOF", value: "", pos: t }), a;
 }
-class Y {
+class Z {
   constructor(a) {
     this.pos = 0, this.tokens = a;
   }
@@ -104,7 +105,7 @@ class Y {
   expect(a) {
     const t = this.peek();
     if (t.type !== a)
-      throw new O(
+      throw new A(
         `Expected ${a} but got ${t.type} ('${t.value}')`,
         t.pos
       );
@@ -115,7 +116,7 @@ class Y {
     const a = this.parseExpression();
     if (this.peek().type !== "EOF") {
       const t = this.peek();
-      throw new O(
+      throw new A(
         `Unexpected token '${t.value}' after expression`,
         t.pos
       );
@@ -168,14 +169,14 @@ class Y {
         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(K, t))
-          throw new O(
-            `Unknown function '${t}'. Available: ${Object.keys(K).join(", ")}`,
+        if (this.expect("RPAREN"), !Object.prototype.hasOwnProperty.call(Q, t))
+          throw new A(
+            `Unknown function '${t}'. Available: ${Object.keys(Q).join(", ")}`,
             a.pos
           );
         return { kind: "call", name: t, args: r };
       }
-      return Object.prototype.hasOwnProperty.call(ee, t) ? { kind: "number", value: ee[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();
@@ -190,24 +191,24 @@ class Y {
           this.advance(), t.push(this.parseExpression());
       return this.expect("RBRACKET"), { kind: "array", elements: t };
     }
-    throw new O(
+    throw new A(
       `Unexpected token '${a.value}'`,
       a.pos
     );
   }
 }
-function p(e, a) {
+function R(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 O(`Unknown variable '${e.name}'`, 0);
+      throw new A(`Unknown variable '${e.name}'`, 0);
     case "unary":
-      const t = p(e.operand, a);
+      const t = R(e.operand, a);
       return e.op === "-" ? -t : t;
     case "binary": {
-      const r = p(e.left, a), i = p(e.right, a);
+      const r = R(e.left, a), i = R(e.right, a);
       switch (e.op) {
         case "+":
           return r + i;
@@ -223,95 +224,95 @@ function p(e, a) {
       break;
     }
     case "call": {
-      const r = K[e.name], i = e.args.map((n) => p(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) => p(r, a));
+      return e.elements.map((r) => R(r, a));
   }
-  throw new O("Invalid AST node", 0);
+  throw new A("Invalid AST node", 0);
 }
-class O extends Error {
+class A extends Error {
   constructor(a, t) {
     super(a), this.name = "ExpressionError", this.position = t;
   }
 }
-function dt(e) {
-  const a = J(e), t = new Y(a).parse();
-  return (r) => p(t, r);
+function It(e) {
+  const a = Y(e), t = new Z(a).parse();
+  return (r) => R(t, r);
 }
-function wt(e) {
-  const a = J(e), t = new Y(a).parse();
+function St(e) {
+  const a = Y(e), t = new Z(a).parse();
   if (t.kind !== "array" || t.elements.length !== 2)
-    throw new O(
+    throw new A(
       'Vector expression must be an array of 2 elements, e.g. "[-y, x]"',
       0
     );
-  return (r) => p(t, r);
+  return (r) => R(t, r);
 }
-function ne(e) {
+function ce(e) {
   try {
-    const a = J(e);
-    return new Y(a).parse(), null;
+    const a = Y(e);
+    return new Z(a).parse(), null;
   } catch (a) {
-    return a instanceof O ? `${a.message} (at position ${a.position})` : String(a);
+    return a instanceof A ? `${a.message} (at position ${a.position})` : String(a);
   }
 }
-const Q = {
-  linear: Me,
-  easeInQuad: Te,
-  easeOutQuad: Re,
+const X = {
+  linear: _e,
+  easeInQuad: Me,
+  easeOutQuad: Pe,
   easeInOutQuad: Fe,
-  easeInCubic: Pe,
-  easeOutCubic: Ee,
-  easeInOutCubic: pe,
+  easeInCubic: Te,
+  easeOutCubic: Re,
+  easeInOutCubic: Ee,
   easeInQuart: ze,
-  easeOutQuart: Ae,
-  easeInOutQuart: Ce,
+  easeOutQuart: pe,
+  easeInOutQuart: Ae,
   easeInSine: Oe,
-  easeOutSine: $e,
-  easeInOutSine: Se,
-  easeInExpo: Ie,
-  easeOutExpo: ke,
-  easeInOutExpo: ve,
-  easeInBack: we,
-  easeOutBack: de,
-  easeOutElastic: xe,
-  easeOutBounce: be
+  easeOutSine: Ce,
+  easeInOutSine: $e,
+  easeInExpo: Se,
+  easeOutExpo: Ie,
+  easeInOutExpo: ke,
+  easeInBack: ve,
+  easeOutBack: we,
+  easeOutElastic: de,
+  easeOutBounce: xe
 };
 function f(e) {
   if (e !== void 0) {
     if (typeof e == "string") {
-      const a = Q[e];
+      const a = X[e];
       if (!a) {
-        const t = Object.keys(Q), 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 Ne({
+      return De({
         stiffness: e.stiffness,
         damping: e.damping,
         mass: e.mass
       });
     if (e.type === "cubicBezier")
-      return We(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 G = Object.keys(Q);
-function se(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 }) : (vt(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 te = ["scene", "player", "presentation"], L = ["card", "slide", "square"], H = [
+const re = ["scene", "player", "presentation"], V = ["card", "slide", "square"], G = [
   "sequence",
   "group",
   "bezierCurve",
@@ -340,38 +341,38 @@ const te = ["scene", "player", "presentation"], L = ["card", "slide", "square"],
   "parallel",
   "player",
   "scene"
-], ae = ["none", "fade", "slide-left", "slide-up", "zoom"];
-function vt(e, a, t) {
+], ie = ["none", "fade", "slide-left", "slide-up", "zoom"];
+function $t(e, a, t) {
   const r = e.type;
-  if (!te.includes(r)) {
-    t.push({ path: `${a}.type`, message: `Root type must be one of: ${te.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" ? ce(e, a, r, t) : r === "presentation" && kt(e, a, t);
+  r === "scene" || r === "player" ? ue(e, a, r, t) : r === "presentation" && Ct(e, a, t);
 }
-function ce(e, a, t, r) {
-  Ht(e, "durationInFrames", a, r), b(e, "width", a, r), b(e, "height", a, r), b(e, "fps", a, r), A(e, "background", a, r), e.preset !== void 0 && (typeof e.preset != "string" || !L.includes(e.preset)) && r.push({ path: `${a}.preset`, message: `preset must be one of: ${L.join(", ")}. Got "${e.preset}"`, severity: "error" }), t === "player" && (D(e, "controls", a, r), D(e, "loop", a, r), D(e, "autoPlay", a, r)), z(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 kt(e, a, t) {
-  if (b(e, "width", a, t), b(e, "height", a, t), A(e, "background", a, t), b(e, "transitionDuration", a, t), D(e, "showHud", a, t), D(e, "showNotes", a, t), e.preset !== void 0 && (typeof e.preset != "string" || !L.includes(e.preset)) && t.push({ path: `${a}.preset`, message: `preset must be one of: ${L.join(", ")}. Got "${e.preset}"`, severity: "error" }), e.transition !== void 0 && (ae.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: ${ae.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) => {
-    It(r, `${a}.slides[${i}]`, t);
+    Ot(r, `${a}.slides[${i}]`, t);
   });
 }
-function It(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;
   }
-  A(e, "title", a, t), A(e, "notes", a, t), A(e, "background", a, t), e.children !== void 0 && (Array.isArray(e.children) ? e.children.forEach((r, i) => {
-    le(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 z(e, a, t) {
@@ -380,78 +381,78 @@ function z(e, a, t) {
     return;
   }
   e.children.forEach((r, i) => {
-    le(r, `${a}.children[${i}]`, t);
+    he(r, `${a}.children[${i}]`, t);
   });
 }
-function le(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 || !H.includes(r)) {
-    const i = r ? ue(r, H) : "";
+  if (!r || !G.includes(r)) {
+    const i = r ? fe(r, G) : "";
     t.push({
       path: `${a}.type`,
-      message: `Unknown element type "${r}".${i} Valid types: ${H.join(", ")}`,
+      message: `Unknown element type "${r}".${i} Valid types: ${G.join(", ")}`,
       severity: "error"
     });
     return;
   }
   switch (r) {
     case "bezierCurve":
-      St(e, a, t);
+      At(e, a, t);
       break;
     case "circle":
-      $t(e, a, t);
+      pt(e, a, t);
       break;
     case "line":
-      Ot(e, a, t);
+      zt(e, a, t);
       break;
     case "arrow":
-      Ct(e, a, t);
+      Et(e, a, t);
       break;
     case "rect":
-      At(e, a, t);
+      Rt(e, a, t);
       break;
     case "polygon":
-      zt(e, a, t);
+      Tt(e, a, t);
       break;
     case "text":
-      pt(e, a, t);
+      Ft(e, a, t);
       break;
     case "image":
-      qt(e, a, t);
+      Kt(e, a, t);
       break;
     case "axes":
-      Et(e, a, t);
+      Pt(e, a, t);
       break;
     case "functionPlot":
-      Pt(e, a, t);
+      Mt(e, a, t);
       break;
     case "vector":
-      Ft(e, a, t);
+      _t(e, a, t);
       break;
     case "vectorField":
-      Rt(e, a, t);
+      Dt(e, a, t);
       break;
     case "matrix":
-      Tt(e, a, t);
+      Nt(e, a, t);
       break;
     case "graph":
-      Mt(e, a, t);
+      Wt(e, a, t);
       break;
     case "latex":
-      Nt(e, a, t);
+      Lt(e, a, t);
       break;
     case "barChart":
-      Gt(e, a, t);
+      Xt(e, a, t);
       break;
     case "sequence":
-      Wt(e, a, t);
+      Vt(e, a, t);
       break;
     case "group":
-      Ut(e, a, t);
+      Qt(e, a, t);
       break;
     case "parallel":
       z(e, a, t);
@@ -460,76 +461,76 @@ function le(e, a, t) {
     case "fadeOut":
     case "draw":
     case "write":
-      Dt(e, a, t);
+      Bt(e, a, t);
       break;
     case "transform":
-      _t(e, a, t);
+      jt(e, a, t);
       break;
     case "morph":
-      Vt(e, a, t);
+      qt(e, a, t);
       break;
     case "stagger":
-      Lt(e, a, t);
+      Ut(e, a, t);
       break;
     case "scene":
     case "player":
-      ce(e, a, r, t);
+      ue(e, a, r, t);
       break;
   }
 }
-function St(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), v(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 $t(e, a, t) {
-  h(e, "cx", a, t), h(e, "cy", a, t), E(e, "r", a, t), v(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 Ot(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 Ct(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 At(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), E(e, "width", a, t), E(e, "height", a, t), v(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 zt(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" }), v(e, a, t);
 }
-function pt(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 Et(e, a, t) {
-  I(e, "domain", a, t), I(e, "range", a, t), I(e, "origin", a, t), j(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 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 = ne(e.fn);
+    const r = ce(e.fn);
     r && t.push({ path: `${a}.fn`, message: `Invalid expression: ${r}`, severity: "error" });
   }
-  I(e, "domain", a, t), j(e, a, t);
+  I(e, "domain", a, t), B(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" }), I(e, "from", a, t), j(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 Rt(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 = ne(e.fn);
+    const r = ce(e.fn);
     r && t.push({ path: `${a}.fn`, message: `Invalid vector expression: ${r}`, severity: "error" });
   }
-  I(e, "domain", a, t), I(e, "range", a, t), j(e, a, t);
+  I(e, "domain", a, t), I(e, "range", a, t), B(e, a, t);
 }
-function Tt(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" }), v(e, a, t);
 }
-function Mt(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 {
@@ -542,17 +543,17 @@ function Mt(e, a, t) {
   }
   v(e, a, t);
 }
-function Nt(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 Wt(e, a, t) {
-  h(e, "from", a, t), Kt(e, "durationInFrames", a, t), z(e, a, t);
+function Vt(e, a, t) {
+  h(e, "from", a, t), Yt(e, "durationInFrames", a, t), z(e, a, t);
 }
-function Dt(e, a, t) {
-  b(e, "duration", a, t), T(e, a, t), z(e, a, t);
+function Bt(e, a, t) {
+  m(e, "duration", a, t), M(e, a, t), z(e, a, t);
 }
-function _t(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" });
   }
@@ -570,49 +571,49 @@ function _t(e, a, t) {
   }
   z(e, a, t);
 }
-function Vt(e, a, t) {
-  b(e, "duration", a, t), T(e, a, t), A(e, "fromColor", a, t), A(e, "toColor", a, t), z(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 Lt(e, a, t) {
-  b(e, "staggerDelay", a, t), T(e, a, t), z(e, a, t);
+function Ut(e, a, t) {
+  m(e, "staggerDelay", a, t), M(e, a, t), z(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), jt(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 j(e, a, t) {
-  b(e, "fadeIn", a, t), b(e, "fadeOut", a, t), b(e, "draw", a, t), T(e, a, t), Bt(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 re = ["none", "circle", "ellipse"];
-function jt(e, a, t) {
-  if (R(e, "rotation", a, t), I(e, "rotationOrigin", a, t), I(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 Bt(e, a, t) {
-  R(e, "rotation", a, t), I(e, "rotationOrigin", a, t), I(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 qt(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), E(e, "width", a, t), E(e, "height", a, t), A(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 && (re.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: ${re.join(", ")}`,
+    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${ne.join(", ")}`,
     severity: "error"
   })), v(e, a, t);
 }
-function Ut(e, a, t) {
+function Qt(e, a, t) {
   z(e, a, t), v(e, a, t);
 }
-function Gt(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), E(e, "width", a, t), E(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 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 (!G.includes(e.easing)) {
-        const r = ue(e.easing, G);
+      if (!H.includes(e.easing)) {
+        const r = fe(e.easing, H);
         t.push({
           path: `${a}.easing`,
-          message: `Unknown easing "${e.easing}".${r} Available: ${G.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 E(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 Ht(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 Kt(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 A(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 D(e, a, t, r) {
+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 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 ue(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 he = {
-  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" }
-}, ba = Object.keys(he);
-function u(e) {
-  if (e === void 0) return;
-  if (!e.startsWith("$")) return e;
-  const a = e.slice(1), t = he[a];
-  return t ? `var(${t.cssVar}, ${t.fallback})` : `var(--elucim-${a})`;
-}
-const Qt = {
+const Zt = {
   card: [640, 360],
   slide: [1280, 720],
   square: [600, 600]
 };
-function B(e, a, t) {
+function j(e, a, t) {
   if (!e) return { width: a, height: t };
-  const [r, i] = Qt[e];
+  const [r, i] = Zt[e];
   return { width: a ?? r, height: t ?? i };
 }
-function fe(e, a) {
+function ge(e, a) {
   switch (e.type) {
     case "scene":
-      return X(e, a);
+      return J(e, a);
     case "player":
       if ((a == null ? void 0 : a.frame) !== void 0) {
-        const { width: t, height: r } = B(e.preset, e.width, e.height);
-        return X(
+        const { width: t, height: r } = j(e.preset, e.width, e.height);
+        return J(
           {
             width: t,
             height: r,
@@ -719,15 +698,15 @@ function fe(e, a) {
           a
         );
       }
-      return ge(e, a);
+      return oe(e, a);
     case "presentation":
-      return Xt(e, a);
+      return ea(e, a);
   }
 }
-function X(e, a) {
-  const t = (a == null ? void 0 : a.frame) !== void 0, { width: r, height: i } = B(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(
-    _e,
+    Le,
     {
       width: r,
       height: i,
@@ -735,13 +714,14 @@ function X(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) => w(n, s))
     }
   );
 }
-function ge(e, a) {
-  const { width: t, height: r } = B(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(
     Ve,
     {
@@ -755,15 +735,16 @@ function ge(e, a) {
       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) => w(i, n))
     }
   );
 }
-function Xt(e, a) {
-  const { width: t, height: r } = B(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(
-    De,
+    We,
     {
       width: t,
       height: r,
@@ -773,22 +754,22 @@ function Xt(e, a) {
       showHUD: e.showHud,
       showNotes: e.showNotes,
       colorScheme: a == null ? void 0 : a.colorScheme,
-      children: e.slides.map((i, n) => Jt(i, n))
+      children: e.slides.map((i, n) => ta(i, n))
     }
   );
 }
-function Jt(e, a) {
+function ta(e, a) {
   var t;
-  return /* @__PURE__ */ l(Le, { 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);
+  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 w(e, a) {
   var t, r, i, n;
   switch (e.type) {
     case "sequence":
-      return /* @__PURE__ */ l(gt, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((s, c) => w(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(
-        ft,
+        gt,
         {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
@@ -804,7 +785,7 @@ function w(e, a) {
       );
     case "bezierCurve":
       return /* @__PURE__ */ l(
-        ht,
+        ft,
         {
           x1: e.x1,
           y1: e.y1,
@@ -833,7 +814,7 @@ function w(e, a) {
       );
     case "circle":
       return /* @__PURE__ */ l(
-        ut,
+        ht,
         {
           cx: e.cx,
           cy: e.cy,
@@ -856,7 +837,7 @@ function w(e, a) {
       );
     case "line":
       return /* @__PURE__ */ l(
-        lt,
+        ut,
         {
           x1: e.x1,
           y1: e.y1,
@@ -880,7 +861,7 @@ function w(e, a) {
       );
     case "arrow":
       return /* @__PURE__ */ l(
-        ct,
+        lt,
         {
           x1: e.x1,
           y1: e.y1,
@@ -905,7 +886,7 @@ function w(e, a) {
       );
     case "rect":
       return /* @__PURE__ */ l(
-        st,
+        ct,
         {
           x: e.x,
           y: e.y,
@@ -932,7 +913,7 @@ function w(e, a) {
       );
     case "polygon":
       return /* @__PURE__ */ l(
-        nt,
+        st,
         {
           points: e.points,
           fill: u(e.fill),
@@ -979,7 +960,7 @@ function w(e, a) {
       );
     case "image":
       return /* @__PURE__ */ l(
-        it,
+        nt,
         {
           src: e.src,
           x: e.x,
@@ -1003,7 +984,7 @@ function w(e, a) {
       );
     case "axes":
       return /* @__PURE__ */ l(
-        rt,
+        it,
         {
           domain: e.domain,
           range: e.range,
@@ -1031,7 +1012,7 @@ function w(e, a) {
     case "functionPlot": {
       let s;
       try {
-        s = dt(e.fn);
+        s = It(e.fn);
       } catch {
         return /* @__PURE__ */ l(
           U,
@@ -1047,7 +1028,7 @@ function w(e, a) {
         );
       }
       return /* @__PURE__ */ l(
-        at,
+        rt,
         {
           fn: (c) => s({ x: c }),
           domain: e.domain,
@@ -1070,7 +1051,7 @@ function w(e, a) {
     }
     case "vector":
       return /* @__PURE__ */ l(
-        tt,
+        at,
         {
           from: e.from,
           to: e.to,
@@ -1097,7 +1078,7 @@ function w(e, a) {
     case "vectorField": {
       let s;
       try {
-        s = wt(e.fn);
+        s = St(e.fn);
       } catch {
         return /* @__PURE__ */ l(
           U,
@@ -1113,9 +1094,9 @@ function w(e, a) {
         );
       }
       return /* @__PURE__ */ l(
-        et,
+        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,
@@ -1140,7 +1121,7 @@ function w(e, a) {
     }
     case "matrix":
       return /* @__PURE__ */ l(
-        Ze,
+        et,
         {
           values: e.values,
           x: e.x,
@@ -1162,7 +1143,7 @@ function w(e, a) {
       );
     case "graph":
       return /* @__PURE__ */ l(
-        Ye,
+        Ze,
         {
           nodes: e.nodes,
           edges: e.edges,
@@ -1185,7 +1166,7 @@ function w(e, a) {
       );
     case "latex":
       return /* @__PURE__ */ l(
-        Je,
+        Ye,
         {
           expression: e.expression,
           x: e.x,
@@ -1206,7 +1187,7 @@ function w(e, a) {
       );
     case "barChart":
       return /* @__PURE__ */ l(
-        Xe,
+        Je,
         {
           bars: e.bars,
           x: e.x,
@@ -1232,16 +1213,16 @@ function w(e, a) {
         a
       );
     case "fadeIn":
-      return /* @__PURE__ */ l(Qe, { duration: e.duration, easing: f(e.easing), children: e.children.map((s, c) => w(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(Ke, { duration: e.duration, totalFrames: e.totalFrames, easing: f(e.easing), children: e.children.map((s, c) => w(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(He, { duration: e.duration, pathLength: e.pathLength, easing: f(e.easing), children: w(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(Ge, { duration: e.duration, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "transform":
       return /* @__PURE__ */ l(
-        Ue,
+        He,
         {
           duration: e.duration,
           easing: f(e.easing),
@@ -1255,7 +1236,7 @@ function w(e, a) {
       );
     case "morph":
       return /* @__PURE__ */ l(
-        qe,
+        Ue,
         {
           duration: e.duration,
           easing: f(e.easing),
@@ -1270,73 +1251,17 @@ function w(e, a) {
         a
       );
     case "stagger":
-      return /* @__PURE__ */ l(Be, { staggerDelay: e.staggerDelay, easing: f(e.easing), children: e.children.map((s, c) => w(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(je, { children: e.children.map((s, c) => w(s, c)) }, a);
     case "scene":
-      return /* @__PURE__ */ l(Z.Fragment, { children: X(e) }, a);
+      return /* @__PURE__ */ l(K.Fragment, { children: J(e) }, a);
     case "player":
-      return /* @__PURE__ */ l(Z.Fragment, { children: ge(e) }, a);
+      return /* @__PURE__ */ l(K.Fragment, { children: oe(e) }, a);
     default:
       return null;
   }
 }
-const oe = {
-  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"]
-}, Yt = {
-  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 Zt(e) {
-  if (!e) return {};
-  const a = {};
-  for (const [t, r] of Object.entries(e))
-    r !== void 0 && (a[`--elucim-${t}`] = r);
-  return a;
-}
-function me(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 ea = me(oe), ta = me(Yt);
 function aa(e) {
   if (typeof window > "u" || typeof window.matchMedia != "function") return () => {
   };
@@ -1350,71 +1275,97 @@ function ia() {
   return !0;
 }
 function na() {
-  return bt(aa, ra, ia);
+  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 xa = ot(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, controls: c, autoPlay: x, loop: d, onPlayStateChange: S, onError: y }, g) {
-  const m = mt(null), C = na();
-  yt(g, () => ({
+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 o;
-      return ((o = m.current) == null ? void 0 : o.getSvgElement()) ?? null;
+      return ((o = $.current) == null ? void 0 : o.getSvgElement()) ?? null;
     },
     seekToFrame: (o) => {
-      var P;
-      return (P = m.current) == null ? void 0 : P.seekToFrame(o);
+      var F;
+      return (F = $.current) == null ? void 0 : F.seekToFrame(o);
     },
     getTotalFrames: () => {
       var o;
-      return ((o = m.current) == null ? void 0 : o.getTotalFrames()) ?? 0;
+      return ((o = $.current) == null ? void 0 : o.getTotalFrames()) ?? 0;
     },
     play: () => {
       var o;
-      return (o = m.current) == null ? void 0 : o.play();
+      return (o = $.current) == null ? void 0 : o.play();
     },
     pause: () => {
       var o;
-      return (o = m.current) == null ? void 0 : o.pause();
+      return (o = $.current) == null ? void 0 : o.pause();
     },
     isPlaying: () => {
       var o;
-      return ((o = m.current) == null ? void 0 : o.isPlaying()) ?? !1;
+      return ((o = $.current) == null ? void 0 : o.isPlaying()) ?? !1;
     }
   }));
-  const $ = se(a);
-  if (!$.valid) {
-    const o = $.errors.filter((k) => k.severity === "error").map((k) => ({ path: k.path, message: k.message }));
-    y == null || y(o);
-    const P = /* @__PURE__ */ new Map();
+  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 N = k.path.split("."), W = N.length > 1 ? N.slice(0, -1).join(".") : k.path, V = P.get(W) ?? [];
-      V.push(k), P.set(W, V);
+      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__ */ F(
+    return /* @__PURE__ */ E(
       "div",
       {
         className: t,
         style: { color: "#ff6b6b", fontFamily: "monospace", padding: 16, fontSize: 13, ...r },
         "data-testid": "dsl-error",
         children: [
-          /* @__PURE__ */ F("strong", { children: [
+          /* @__PURE__ */ E("strong", { children: [
             "Elucim DSL Validation Errors (",
             o.length,
             "):"
           ] }),
-          [...P.entries()].map(([k, N]) => /* @__PURE__ */ F("details", { open: !0, style: { marginTop: 8 }, children: [
-            /* @__PURE__ */ F("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
+          [...F.entries()].map(([k, D]) => /* @__PURE__ */ E("details", { open: !0, style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ E("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
               k,
               " (",
-              N.length,
+              D.length,
               ")"
             ] }),
-            /* @__PURE__ */ l("ul", { style: { margin: "4px 0", paddingLeft: 20 }, children: N.map((W, V) => /* @__PURE__ */ F("li", { children: [
-              /* @__PURE__ */ l("code", { style: { color: "#ffa07a" }, children: W.path }),
+            /* @__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 }),
               ": ",
-              W.message
-            ] }, V)) })
+              N.message
+            ] }, L)) })
           ] }, k)),
-          /* @__PURE__ */ F("details", { style: { marginTop: 12 }, children: [
+          /* @__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) })
           ] })
@@ -1422,21 +1373,22 @@ const xa = ot(function({ dsl: a, className: t, style: r, theme: i, colorScheme:
       }
     );
   }
-  const _ = Zt(i);
-  let M = {};
-  n && (M = (n === "auto" ? C : n === "dark") ? ea : ta);
-  const q = s !== void 0 ? sa(s, a) : void 0, ye = n ? n === "auto" ? C ? "dark" : "light" : n : void 0;
-  return /* @__PURE__ */ l("div", { className: t, style: { ...M, ..._, ...r }, "data-testid": "dsl-root", children: fe(a.root, {
+  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: m,
+    playerRef: $,
     colorScheme: ye,
     controls: c,
-    autoPlay: x,
+    autoPlay: y,
     loop: d,
-    onPlayStateChange: S
-  }) });
+    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 sa(e, a) {
+function ca(e, a) {
   if (e === "first") return { frame: 0 };
   if (e === "last") {
     const r = a.root.durationInFrames ?? 1;
@@ -1444,8 +1396,8 @@ function sa(e, a) {
   }
   return { frame: e };
 }
-function ca(e, a, t) {
-  const r = se(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(
@@ -1456,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 = fe(i, { frame: a });
-  return xt(n);
+  const n = ge(i, { frame: a });
+  return kt(n);
 }
-function ie(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 da(e, a, t) {
-  const r = (t == null ? void 0 : t.scale) ?? 2, n = ca(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), d = (t == null ? void 0 : t.height) ?? (c ? parseFloat(c[2]) : 600), S = Math.round(x * r), y = Math.round(d * r);
-  s = s.replace(/width="100%"/, `width="${S}"`).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 = ie(g);
-  const m = `<rect width="${x}" height="${d}" fill="${g}"/>`;
-  s = s.replace(/>/, `>${m}`), s = ie(s);
-  const $ = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(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 ua($, S, y);
+    return ha(O, S, b);
   if (typeof OffscreenCanvas < "u")
-    return la($, S, y);
+    return ua(O, S, b);
   throw new Error("renderToPng requires Image+document (browser) or OffscreenCanvas (worker)");
 }
-async function la(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 d = await (await s.convertToBlob({ type: "image/png" })).arrayBuffer();
   return new Uint8Array(d);
 }
-function ua(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((d) => r(new Uint8Array(d)));
+        (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 ha {
+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;
   }
@@ -1602,7 +1554,7 @@ class ha {
         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
@@ -1682,7 +1634,7 @@ class ha {
       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,
@@ -1700,7 +1652,7 @@ class ha {
       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
@@ -1727,35 +1679,35 @@ class ha {
    * 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 d = a.map((y, g) => {
-      const m = x + g * (r + n);
-      return { x: m, y: s, w: r, h: i, cx: m + r / 2, cy: s + i / 2 };
-    }), S = a.map((y, g) => {
-      var _, M;
-      const m = d[g], C = ((_ = t == null ? void 0 : t.colors) == null ? void 0 : _[g]) ?? this.theme.boxFill, $ = ((M = t == null ? void 0 : t.strokeColors) == null ? void 0 : M[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: m.x,
-            y: m.y,
+            x: x.x,
+            y: x.y,
             width: r,
             height: i,
             fill: C,
-            stroke: $,
+            stroke: O,
             strokeWidth: 1.5,
             rx: 6
           },
           {
             type: "text",
-            x: m.cx,
-            y: m.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
           }
@@ -1774,12 +1726,12 @@ class ha {
   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((S, 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 };
-    }), d = a.map((S, y) => {
-      var C, $;
-      const g = x[y], m = ((C = t == null ? void 0 : t.colors) == null ? void 0 : C[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: [
@@ -1789,8 +1741,8 @@ class ha {
             y: g.y,
             width: r,
             height: i,
-            fill: m,
-            stroke: ($ = t == null ? void 0 : t.colors) != null && $[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
           },
@@ -1800,7 +1752,7 @@ class ha {
             y: g.cy + 5,
             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"
           }
         ]
@@ -1810,7 +1762,7 @@ class ha {
       type: "stagger",
       staggerDelay: 3,
       children: d
-    }, 8 + a.length * 2), x;
+    }, 8 + a.length * 2), y;
   }
   /**
    * Draw arrows connecting sequential positions (e.g., output of boxRow/boxColumn).
@@ -1893,9 +1845,46 @@ class ha {
     return { elements: this.elements, durationInFrames: a };
   }
 }
-class fa {
+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 ?? oe, this._opts = {
+    this._slides = [], this._title = a, this._theme = t ?? ga, this._opts = {
       width: 900,
       height: 640,
       fps: 30,
@@ -1913,7 +1902,7 @@ class fa {
   /** Build the final ElucimDocument */
   build() {
     const a = this._slides.map((r) => {
-      const i = new ha(
+      const i = new fa(
         this._theme,
         this._opts.fps,
         this._opts.width,
@@ -1959,31 +1948,36 @@ class fa {
     return JSON.stringify(this.build(), null, a ? 2 : void 0);
   }
 }
-function wa(e, a, t) {
-  return new fa(e, a, t);
+function ka(e, a, t) {
+  return new oa(e, a, t);
 }
 export {
-  xa as DslRenderer,
-  fa as PresentationBuilder,
-  he as SEMANTIC_TOKENS,
-  ha as SlideBuilder,
-  ba as TOKEN_NAMES,
-  dt as compileExpression,
-  wt as compileVectorExpression,
-  oe as darkTheme,
-  Yt as lightTheme,
-  wa as presentation,
+  $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,
-  ge as renderPlayer,
-  Xt as renderPresentation,
-  fe as renderRoot,
-  X as renderScene,
-  Jt as renderSlide,
-  da as renderToPng,
-  ca as renderToSvgString,
-  u as resolveColor,
+  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,
-  ie as stripCssFunctions,
-  se as validate,
-  ne as validateExpression
+  se as stripCssFunctions,
+  Ra as themeToVars,
+  le as validate,
+  ce as validateExpression
 };