@elucim/dsl 0.8.1 → 0.8.3

package/dist/index.d.ts

@@ -931,6 +931,14 @@ export declare interface StaggerNode {
     children: ElementNode[];
 }
 
+/**
+ * Strip all CSS functions that are invalid in standalone SVGs loaded via Image:
+ * - var(--x, fallback) → fallback (iterative for nested vars)
+ * - var(--x) with no fallback → 'none'
+ * - light-dark(light, dark) → dark value (elucim defaults to dark theme)
+ */
+export declare function stripCssFunctions(s: string): string;
+
 export declare interface TextNode {
     type: 'text';
     id?: string;

package/dist/index.js

@@ -1,6 +1,6 @@
-import { easeOutBounce as fe, easeOutElastic as ge, easeOutBack as oe, easeInBack as me, easeInOutExpo as ye, easeOutExpo as be, easeInExpo as xe, easeInOutSine as de, easeOutSine as ve, easeInSine as we, easeInOutQuart as ke, easeOutQuart as Ie, easeInQuart as Se, easeInOutCubic as $e, easeOutCubic as Oe, easeInCubic as Ce, easeInOutQuad as Ae, easeOutQuad as ze, easeInQuad as pe, linear as Ee, spring as Fe, cubicBezier as Re, Presentation as Pe, Scene as Me, Player as Te, Slide as Ne, Parallel as We, Stagger as De, Morph as _e, Transform as Ve, Write as Le, Draw as je, FadeOut as Be, FadeIn as qe, BarChart as Ue, LaTeX as Ge, Graph as He, Matrix as Ke, Text as j, VectorField as Qe, Vector as Xe, FunctionPlot as Je, Axes as Ye, Image as Ze, Polygon as et, Rect as tt, Arrow as at, Line as rt, Circle as it, BezierCurve as nt, Group as st, Sequence as ct } from "@elucim/core";
-import { jsx as l, jsxs as R } from "react/jsx-runtime";
-import J, { forwardRef as lt, useRef as ut, useImperativeHandle as ht, useSyncExternalStore as ft } from "react";
+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 ft, useImperativeHandle as ht, useSyncExternalStore as ot } from "react";
 import { renderToStaticMarkup as gt } from "react-dom/server";
 const U = {
   sin: Math.sin,
@@ -22,7 +22,7 @@ const U = {
   max: (...e) => Math.max(...e),
   sign: Math.sign,
   pow: Math.pow
-}, Y = {
+}, J = {
   PI: Math.PI,
   E: Math.E,
   TAU: Math.PI * 2
@@ -175,7 +175,7 @@ class Q {
           );
         return { kind: "call", name: t, args: r };
       }
-      return Object.prototype.hasOwnProperty.call(Y, t) ? { kind: "number", value: Y[t] } : { kind: "variable", name: t };
+      return Object.prototype.hasOwnProperty.call(J, t) ? { kind: "number", value: J[t] } : { kind: "variable", name: t };
     }
     if (a.type === "LPAREN") {
       this.advance();
@@ -236,11 +236,11 @@ class A extends Error {
     super(a), this.name = "ExpressionError", this.position = t;
   }
 }
-function ot(e) {
+function mt(e) {
   const a = K(e), t = new Q(a).parse();
   return (r) => E(t, r);
 }
-function mt(e) {
+function yt(e) {
   const a = K(e), t = new Q(a).parse();
   if (t.kind !== "array" || t.elements.length !== 2)
     throw new A(
@@ -258,28 +258,28 @@ function ae(e) {
   }
 }
 const G = {
-  linear: Ee,
-  easeInQuad: pe,
-  easeOutQuad: ze,
-  easeInOutQuad: Ae,
-  easeInCubic: Ce,
-  easeOutCubic: Oe,
-  easeInOutCubic: $e,
-  easeInQuart: Se,
-  easeOutQuart: Ie,
-  easeInOutQuart: ke,
-  easeInSine: we,
-  easeOutSine: ve,
-  easeInOutSine: de,
-  easeInExpo: xe,
-  easeOutExpo: be,
-  easeInOutExpo: ye,
-  easeInBack: me,
-  easeOutBack: oe,
+  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: fe
+  easeOutBounce: oe
 };
-function g(e) {
+function o(e) {
   if (e !== void 0) {
     if (typeof e == "string") {
       const a = G[e];
@@ -290,7 +290,7 @@ function g(e) {
       return a;
     }
     if (e.type === "spring")
-      return Fe({
+      return Pe({
         stiffness: e.stiffness,
         damping: e.damping,
         mass: e.mass
@@ -306,12 +306,12 @@ function re(e) {
   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 }) : (yt(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 }) : (bt(t.root, "root", a), {
     valid: a.filter((r) => r.severity === "error").length === 0,
     errors: a
   });
 }
-const Z = ["scene", "player", "presentation"], _ = ["card", "slide", "square"], q = [
+const Y = ["scene", "player", "presentation"], _ = ["card", "slide", "square"], q = [
   "sequence",
   "group",
   "bezierCurve",
@@ -340,32 +340,32 @@ const Z = ["scene", "player", "presentation"], _ = ["card", "slide", "square"],
   "parallel",
   "player",
   "scene"
-], ee = ["none", "fade", "slide-left", "slide-up", "zoom"];
-function yt(e, a, t) {
+], Z = ["none", "fade", "slide-left", "slide-up", "zoom"];
+function bt(e, a, t) {
   const r = e.type;
-  if (!Z.includes(r)) {
-    t.push({ path: `${a}.type`, message: `Root type must be one of: ${Z.join(", ")}. Got "${r}"`, severity: "error" });
+  if (!Y.includes(r)) {
+    t.push({ path: `${a}.type`, message: `Root type must be one of: ${Y.join(", ")}. Got "${r}"`, severity: "error" });
     return;
   }
-  r === "scene" || r === "player" ? ie(e, a, r, t) : r === "presentation" && bt(e, a, t);
+  r === "scene" || r === "player" ? ie(e, a, r, t) : r === "presentation" && xt(e, a, t);
 }
 function ie(e, a, t, r) {
-  jt(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);
+  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 bt(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 && (ee.includes(e.transition) || t.push({
+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({
     path: `${a}.transition`,
-    message: `Invalid transition "${e.transition}". Must be one of: ${ee.join(", ")}`,
+    message: `Invalid transition "${e.transition}". Must be one of: ${Z.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) => {
-    xt(r, `${a}.slides[${i}]`, t);
+    dt(r, `${a}.slides[${i}]`, t);
   });
 }
-function xt(e, a, t) {
+function dt(e, a, t) {
   if (!e || typeof e != "object") {
     t.push({ path: a, message: "Slide must be an object", severity: "error" });
     return;
@@ -400,58 +400,58 @@ function ne(e, a, t) {
   }
   switch (r) {
     case "bezierCurve":
-      dt(e, a, t);
+      vt(e, a, t);
       break;
     case "circle":
-      vt(e, a, t);
+      wt(e, a, t);
       break;
     case "line":
-      wt(e, a, t);
+      kt(e, a, t);
       break;
     case "arrow":
-      kt(e, a, t);
+      It(e, a, t);
       break;
     case "rect":
-      It(e, a, t);
+      St(e, a, t);
       break;
     case "polygon":
-      St(e, a, t);
+      $t(e, a, t);
       break;
     case "text":
-      $t(e, a, t);
+      Ot(e, a, t);
       break;
     case "image":
-      _t(e, a, t);
+      Vt(e, a, t);
       break;
     case "axes":
-      Ot(e, a, t);
+      Ct(e, a, t);
       break;
     case "functionPlot":
-      Ct(e, a, t);
+      At(e, a, t);
       break;
     case "vector":
-      At(e, a, t);
+      zt(e, a, t);
       break;
     case "vectorField":
-      zt(e, a, t);
+      pt(e, a, t);
       break;
     case "matrix":
-      pt(e, a, t);
+      Et(e, a, t);
       break;
     case "graph":
-      Et(e, a, t);
+      Ft(e, a, t);
       break;
     case "latex":
-      Ft(e, a, t);
+      Pt(e, a, t);
       break;
     case "barChart":
-      Lt(e, a, t);
+      jt(e, a, t);
       break;
     case "sequence":
       Rt(e, a, t);
       break;
     case "group":
-      Vt(e, a, t);
+      Lt(e, a, t);
       break;
     case "parallel":
       p(e, a, t);
@@ -460,16 +460,16 @@ function ne(e, a, t) {
     case "fadeOut":
     case "draw":
     case "write":
-      Pt(e, a, t);
+      Tt(e, a, t);
       break;
     case "transform":
       Mt(e, a, t);
       break;
     case "morph":
-      Tt(e, a, t);
+      Nt(e, a, t);
       break;
     case "stagger":
-      Nt(e, a, t);
+      Wt(e, a, t);
       break;
     case "scene":
     case "player":
@@ -477,33 +477,33 @@ function ne(e, a, t) {
       break;
   }
 }
-function dt(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), w(e, a, t);
-}
 function vt(e, a, t) {
-  h(e, "cx", a, t), h(e, "cy", a, t), F(e, "r", a, t), w(e, a, t);
+  f(e, "x1", a, t), f(e, "y1", a, t), f(e, "cx1", a, t), f(e, "cy1", a, t), f(e, "x2", a, t), f(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 wt(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);
+  f(e, "cx", a, t), f(e, "cy", a, t), F(e, "r", a, t), w(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);
+  f(e, "x1", a, t), f(e, "y1", a, t), f(e, "x2", a, t), f(e, "y2", a, t), w(e, a, t);
 }
 function It(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);
+  f(e, "x1", a, t), f(e, "y1", a, t), f(e, "x2", a, t), f(e, "y2", a, t), w(e, a, t);
 }
 function St(e, a, t) {
+  f(e, "x", a, t), f(e, "y", a, t), F(e, "width", a, t), F(e, "height", a, t), w(e, a, t);
+}
+function $t(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);
 }
-function $t(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 Ot(e, a, t) {
-  S(e, "domain", a, t), S(e, "range", a, t), S(e, "origin", a, t), V(e, a, t);
+  f(e, "x", a, t), f(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 Ct(e, a, t) {
+  S(e, "domain", a, t), S(e, "range", a, t), S(e, "origin", a, t), V(e, a, t);
+}
+function At(e, a, t) {
   if (typeof e.fn != "string")
     t.push({ path: `${a}.fn`, message: 'FunctionPlot requires a "fn" expression string', severity: "error" });
   else {
@@ -512,10 +512,10 @@ function Ct(e, a, t) {
   }
   S(e, "domain", a, t), V(e, a, t);
 }
-function At(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 zt(e, a, t) {
+function pt(e, a, t) {
   if (typeof e.fn != "string")
     t.push({ path: `${a}.fn`, message: 'VectorField requires a "fn" expression string', severity: "error" });
   else {
@@ -524,35 +524,35 @@ function zt(e, a, t) {
   }
   S(e, "domain", a, t), S(e, "range", a, t), V(e, a, t);
 }
-function pt(e, a, t) {
+function Et(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);
 }
-function Et(e, a, t) {
+function Ft(e, a, t) {
   if (!Array.isArray(e.nodes))
     t.push({ path: `${a}.nodes`, message: 'Graph requires a "nodes" array', severity: "error" });
   else {
     const r = /* @__PURE__ */ new Set();
     e.nodes.forEach((i, n) => {
-      typeof i.id != "string" ? t.push({ path: `${a}.nodes[${n}].id`, message: 'Graph node requires a string "id"', severity: "error" }) : (r.has(i.id) && t.push({ path: `${a}.nodes[${n}].id`, message: `Duplicate node id "${i.id}"`, severity: "error" }), r.add(i.id)), h(i, "x", `${a}.nodes[${n}]`, t), h(i, "y", `${a}.nodes[${n}]`, t);
+      typeof i.id != "string" ? t.push({ path: `${a}.nodes[${n}].id`, message: 'Graph node requires a string "id"', severity: "error" }) : (r.has(i.id) && t.push({ path: `${a}.nodes[${n}].id`, message: `Duplicate node id "${i.id}"`, severity: "error" }), r.add(i.id)), f(i, "x", `${a}.nodes[${n}]`, t), f(i, "y", `${a}.nodes[${n}]`, t);
     }), Array.isArray(e.edges) && e.edges.forEach((i, n) => {
       (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);
 }
-function Ft(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 Pt(e, a, t) {
+  typeof e.expression != "string" && t.push({ path: `${a}.expression`, message: 'LaTeX requires an "expression" string', severity: "error" }), f(e, "x", a, t), f(e, "y", a, t), w(e, a, t);
 }
 function Rt(e, a, t) {
-  h(e, "from", a, t), Bt(e, "durationInFrames", a, t), p(e, a, t);
+  f(e, "from", a, t), qt(e, "durationInFrames", a, t), p(e, a, t);
 }
-function Pt(e, a, t) {
-  b(e, "duration", a, t), M(e, a, t), p(e, a, t);
+function Tt(e, a, t) {
+  b(e, "duration", a, t), T(e, a, t), p(e, a, t);
 }
 function Mt(e, a, t) {
-  if (b(e, "duration", a, t), M(e, a, t), e.translate !== void 0) {
+  if (b(e, "duration", a, t), T(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,42 +570,42 @@ function Mt(e, a, t) {
   }
   p(e, a, t);
 }
-function Tt(e, a, t) {
-  b(e, "duration", a, t), M(e, a, t), z(e, "fromColor", a, t), z(e, "toColor", a, t), p(e, a, t);
-}
 function Nt(e, a, t) {
-  b(e, "staggerDelay", a, t), M(e, a, t), p(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 Wt(e, a, t) {
+  b(e, "staggerDelay", a, t), T(e, a, t), p(e, a, t);
 }
 function w(e, a, t) {
-  b(e, "fadeIn", a, t), b(e, "fadeOut", a, t), b(e, "draw", a, t), M(e, a, t), Wt(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) {
-  b(e, "fadeIn", a, t), b(e, "fadeOut", a, t), b(e, "draw", a, t), M(e, a, t), Dt(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);
 }
-const te = ["none", "circle", "ellipse"];
-function Wt(e, a, t) {
-  if (P(e, "rotation", a, t), S(e, "rotationOrigin", a, t), S(e, "translate", a, t), P(e, "zIndex", a, t), e.scale !== void 0) {
+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 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 Dt(e, a, t) {
-  P(e, "rotation", a, t), S(e, "rotationOrigin", a, t), S(e, "translate", a, t), P(e, "zIndex", a, t);
-}
 function _t(e, a, t) {
-  typeof e.src != "string" && t.push({ path: `${a}.src`, message: 'Image requires a "src" string', severity: "error" }), 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 && (te.includes(e.clipShape) || t.push({
+  R(e, "rotation", a, t), S(e, "rotationOrigin", a, t), S(e, "translate", a, t), R(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" }), f(e, "x", a, t), f(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({
     path: `${a}.clipShape`,
-    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${te.join(", ")}`,
+    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${ee.join(", ")}`,
     severity: "error"
   })), w(e, a, t);
 }
-function Vt(e, a, t) {
+function Lt(e, a, t) {
   p(e, a, t), w(e, a, t);
 }
-function Lt(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 jt(e, a, t) {
+  f(e, "x", a, t), f(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 M(e, a, t) {
+function T(e, a, t) {
   if (e.easing !== void 0) {
     if (typeof e.easing == "string") {
       if (!B.includes(e.easing)) {
@@ -632,27 +632,27 @@ function M(e, a, t) {
     t.push({ path: `${a}.easing`, message: 'Easing must be a string name or { type: "spring"|"cubicBezier", ... }', severity: "error" });
   }
 }
-function h(e, a, t, r) {
+function f(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) {
   (typeof e[a] != "number" || e[a] <= 0) && r.push({ path: `${t}.${a}`, message: `"${a}" must be a positive number`, severity: "error" });
 }
-function jt(e, a, t, r) {
+function Bt(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) {
   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 Bt(e, a, t, r) {
+function qt(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) {
   e[a] !== void 0 && typeof e[a] != "string" && r.push({ path: `${t}.${a}`, message: `"${a}" must be a string`, severity: "error" });
 }
-function P(e, a, t, r) {
+function R(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) {
@@ -668,7 +668,7 @@ function se(e, a) {
   const i = a.find((n) => n.toLowerCase().startsWith(t.slice(0, 4)));
   return i ? ` Did you mean '${i}'?` : "";
 }
-const X = {
+const ce = {
   foreground: { cssVar: "--elucim-foreground", fallback: "#c8d6e5" },
   background: { cssVar: "--elucim-background", fallback: "#0a0a1e" },
   title: { cssVar: "--elucim-title", fallback: "#e0e7ff" },
@@ -683,24 +683,24 @@ const X = {
   success: { cssVar: "--elucim-success", fallback: "#34d399" },
   warning: { cssVar: "--elucim-warning", fallback: "#fbbf24" },
   error: { cssVar: "--elucim-error", fallback: "#f87171" }
-}, fa = Object.keys(X);
+}, oa = Object.keys(ce);
 function u(e) {
   if (e === void 0) return;
   if (!e.startsWith("$")) return e;
-  const a = e.slice(1), t = X[a];
+  const a = e.slice(1), t = ce[a];
   return t ? `var(${t.cssVar}, ${t.fallback})` : `var(--elucim-${a})`;
 }
-const qt = {
+const Ut = {
   card: [640, 360],
   slide: [1280, 720],
   square: [600, 600]
 };
 function L(e, a, t) {
   if (!e) return { width: a, height: t };
-  const [r, i] = qt[e];
+  const [r, i] = Ut[e];
   return { width: a ?? r, height: t ?? i };
 }
-function ce(e, a) {
+function le(e, a) {
   switch (e.type) {
     case "scene":
       return H(e, a);
@@ -719,9 +719,9 @@ function ce(e, a) {
           a
         );
       }
-      return le(e, a);
+      return ue(e, a);
     case "presentation":
-      return Ut(e);
+      return Gt(e);
   }
 }
 function H(e, a) {
@@ -740,10 +740,10 @@ function H(e, a) {
     }
   );
 }
-function le(e, a) {
+function ue(e, a) {
   const { width: t, height: r } = L(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Te,
+    Ne,
     {
       ref: a == null ? void 0 : a.playerRef,
       width: t,
@@ -759,10 +759,10 @@ function le(e, a) {
     }
   );
 }
-function Ut(e) {
+function Gt(e) {
   const { width: a, height: t } = L(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Pe,
+    Te,
     {
       width: a,
       height: t,
@@ -771,26 +771,26 @@ function Ut(e) {
       transitionDuration: e.transitionDuration,
       showHUD: e.showHud,
       showNotes: e.showNotes,
-      children: e.slides.map((r, i) => Gt(r, i))
+      children: e.slides.map((r, i) => Ht(r, i))
     }
   );
 }
-function Gt(e, a) {
+function Ht(e, a) {
   var t;
-  return /* @__PURE__ */ l(Ne, { 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(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);
 }
 function v(e, a) {
   var t, r, i, n;
   switch (e.type) {
     case "sequence":
-      return /* @__PURE__ */ l(ct, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(lt, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((s, c) => v(s, c)) }, a);
     case "group":
       return /* @__PURE__ */ l(
-        st,
+        ct,
         {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -802,7 +802,7 @@ function v(e, a) {
       );
     case "bezierCurve":
       return /* @__PURE__ */ l(
-        nt,
+        st,
         {
           x1: e.x1,
           y1: e.y1,
@@ -820,7 +820,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -831,7 +831,7 @@ function v(e, a) {
       );
     case "circle":
       return /* @__PURE__ */ l(
-        it,
+        nt,
         {
           cx: e.cx,
           cy: e.cy,
@@ -843,7 +843,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -854,7 +854,7 @@ function v(e, a) {
       );
     case "line":
       return /* @__PURE__ */ l(
-        rt,
+        it,
         {
           x1: e.x1,
           y1: e.y1,
@@ -867,7 +867,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -878,7 +878,7 @@ function v(e, a) {
       );
     case "arrow":
       return /* @__PURE__ */ l(
-        at,
+        rt,
         {
           x1: e.x1,
           y1: e.y1,
@@ -892,7 +892,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -903,7 +903,7 @@ function v(e, a) {
       );
     case "rect":
       return /* @__PURE__ */ l(
-        tt,
+        at,
         {
           x: e.x,
           y: e.y,
@@ -919,7 +919,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -930,7 +930,7 @@ function v(e, a) {
       );
     case "polygon":
       return /* @__PURE__ */ l(
-        et,
+        tt,
         {
           points: e.points,
           fill: u(e.fill),
@@ -941,7 +941,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -965,7 +965,7 @@ function v(e, a) {
           opacity: e.opacity,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -977,7 +977,7 @@ function v(e, a) {
       );
     case "image":
       return /* @__PURE__ */ l(
-        Ze,
+        et,
         {
           src: e.src,
           x: e.x,
@@ -990,7 +990,7 @@ function v(e, a) {
           opacity: e.opacity,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1001,7 +1001,7 @@ function v(e, a) {
       );
     case "axes":
       return /* @__PURE__ */ l(
-        Ye,
+        Ze,
         {
           domain: e.domain,
           range: e.range,
@@ -1018,7 +1018,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1029,7 +1029,7 @@ function v(e, a) {
     case "functionPlot": {
       let s;
       try {
-        s = ot(e.fn);
+        s = mt(e.fn);
       } catch {
         return /* @__PURE__ */ l(
           j,
@@ -1045,7 +1045,7 @@ function v(e, a) {
         );
       }
       return /* @__PURE__ */ l(
-        Je,
+        Ye,
         {
           fn: (c) => s({ x: c }),
           domain: e.domain,
@@ -1056,7 +1056,7 @@ function v(e, a) {
           strokeWidth: e.strokeWidth,
           samples: e.samples,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           opacity: e.opacity,
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
@@ -1068,7 +1068,7 @@ function v(e, a) {
     }
     case "vector":
       return /* @__PURE__ */ l(
-        Xe,
+        Je,
         {
           from: e.from,
           to: e.to,
@@ -1084,7 +1084,7 @@ function v(e, a) {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
           draw: e.draw,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1095,7 +1095,7 @@ function v(e, a) {
     case "vectorField": {
       let s;
       try {
-        s = mt(e.fn);
+        s = yt(e.fn);
       } catch {
         return /* @__PURE__ */ l(
           j,
@@ -1111,7 +1111,7 @@ function v(e, a) {
         );
       }
       return /* @__PURE__ */ l(
-        Qe,
+        Xe,
         {
           fn: (c, x) => s({ x: c, y: x }),
           domain: e.domain,
@@ -1127,7 +1127,7 @@ function v(e, a) {
           maxLength: e.maxLength,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           translate: e.translate,
@@ -1138,7 +1138,7 @@ function v(e, a) {
     }
     case "matrix":
       return /* @__PURE__ */ l(
-        Ke,
+        Qe,
         {
           values: e.values,
           x: e.x,
@@ -1149,7 +1149,7 @@ function v(e, a) {
           fontSize: e.fontSize,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1160,7 +1160,7 @@ function v(e, a) {
       );
     case "graph":
       return /* @__PURE__ */ l(
-        He,
+        Ke,
         {
           nodes: e.nodes,
           edges: e.edges,
@@ -1172,7 +1172,7 @@ function v(e, a) {
           labelFontSize: e.labelFontSize,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1183,7 +1183,7 @@ function v(e, a) {
       );
     case "latex":
       return /* @__PURE__ */ l(
-        Ge,
+        He,
         {
           expression: e.expression,
           x: e.x,
@@ -1193,7 +1193,7 @@ function v(e, a) {
           align: e.align,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1204,7 +1204,7 @@ function v(e, a) {
       );
     case "barChart":
       return /* @__PURE__ */ l(
-        Ue,
+        Ge,
         {
           bars: e.bars,
           x: e.x,
@@ -1220,7 +1220,7 @@ function v(e, a) {
           valueFormat: e.valueFormat,
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -1230,19 +1230,19 @@ function v(e, a) {
         a
       );
     case "fadeIn":
-      return /* @__PURE__ */ l(qe, { duration: e.duration, easing: g(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(Ue, { duration: e.duration, easing: o(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
     case "fadeOut":
-      return /* @__PURE__ */ l(Be, { duration: e.duration, totalFrames: e.totalFrames, easing: g(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(qe, { duration: e.duration, totalFrames: e.totalFrames, easing: o(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
     case "draw":
-      return /* @__PURE__ */ l(je, { duration: e.duration, pathLength: e.pathLength, easing: g(e.easing), children: v(e.children[0], 0) }, a);
+      return /* @__PURE__ */ l(Be, { duration: e.duration, pathLength: e.pathLength, easing: o(e.easing), children: v(e.children[0], 0) }, a);
     case "write":
-      return /* @__PURE__ */ l(Le, { duration: e.duration, easing: g(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(je, { duration: e.duration, easing: o(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
     case "transform":
       return /* @__PURE__ */ l(
-        Ve,
+        Le,
         {
           duration: e.duration,
-          easing: g(e.easing),
+          easing: o(e.easing),
           translate: e.translate,
           scale: e.scale,
           rotate: e.rotate,
@@ -1253,10 +1253,10 @@ function v(e, a) {
       );
     case "morph":
       return /* @__PURE__ */ l(
-        _e,
+        Ve,
         {
           duration: e.duration,
-          easing: g(e.easing),
+          easing: o(e.easing),
           fromColor: u(e.fromColor),
           toColor: u(e.toColor),
           fromOpacity: e.fromOpacity,
@@ -1268,18 +1268,18 @@ function v(e, a) {
         a
       );
     case "stagger":
-      return /* @__PURE__ */ l(De, { staggerDelay: e.staggerDelay, easing: g(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(_e, { staggerDelay: e.staggerDelay, easing: o(e.easing), children: e.children.map((s, c) => v(s, c)) }, a);
     case "parallel":
-      return /* @__PURE__ */ l(We, { children: e.children.map((s, c) => v(s, c)) }, a);
+      return /* @__PURE__ */ l(De, { children: e.children.map((s, c) => v(s, c)) }, a);
     case "scene":
-      return /* @__PURE__ */ l(J.Fragment, { children: H(e) }, a);
+      return /* @__PURE__ */ l(X.Fragment, { children: H(e) }, a);
     case "player":
-      return /* @__PURE__ */ l(J.Fragment, { children: le(e) }, a);
+      return /* @__PURE__ */ l(X.Fragment, { children: ue(e) }, a);
     default:
       return null;
   }
 }
-const ue = {
+const fe = {
   background: "#0a0a1e",
   title: "#e0e7ff",
   subtitle: "#94a3b8",
@@ -1294,7 +1294,7 @@ const ue = {
   warning: "#fbbf24",
   error: "#f87171",
   palette: ["#4fc3f7", "#a78bfa", "#f472b6", "#34d399", "#fbbf24", "#fb923c", "#6366f1", "#22d3ee"]
-}, Ht = {
+}, Kt = {
   background: "#f8fafc",
   title: "#1e293b",
   subtitle: "#64748b",
@@ -1310,7 +1310,7 @@ const ue = {
   error: "#dc2626",
   palette: ["#2563eb", "#7c3aed", "#db2777", "#16a34a", "#d97706", "#ea580c", "#4f46e5", "#0891b2"]
 };
-function Kt(e) {
+function Qt(e) {
   if (!e) return {};
   const a = {};
   for (const [t, r] of Object.entries(e))
@@ -1334,85 +1334,85 @@ function he(e) {
     "--elucim-error": e.error
   };
 }
-const Qt = he(ue), Xt = he(Ht);
-function Jt(e) {
+const Xt = he(fe), Jt = he(Kt);
+function Yt(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 Yt() {
+function Zt() {
   return typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
-function Zt() {
+function ea() {
   return !0;
 }
-function ea() {
-  return ft(Jt, Yt, Zt);
+function ta() {
+  return ot(Yt, Zt, ea);
 }
-const ga = lt(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, onError: c }, x) {
-  const m = ut(null), k = ea();
+const ga = ut(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, onError: c }, x) {
+  const m = ft(null), k = ta();
   ht(x, () => ({
     getSvgElement: () => {
-      var f;
-      return ((f = m.current) == null ? void 0 : f.getSvgElement()) ?? null;
+      var h;
+      return ((h = m.current) == null ? void 0 : h.getSvgElement()) ?? null;
     },
-    seekToFrame: (f) => {
+    seekToFrame: (h) => {
       var C;
-      return (C = m.current) == null ? void 0 : C.seekToFrame(f);
+      return (C = m.current) == null ? void 0 : C.seekToFrame(h);
     },
     getTotalFrames: () => {
-      var f;
-      return ((f = m.current) == null ? void 0 : f.getTotalFrames()) ?? 0;
+      var h;
+      return ((h = m.current) == null ? void 0 : h.getTotalFrames()) ?? 0;
     },
     play: () => {
-      var f;
-      return (f = m.current) == null ? void 0 : f.play();
+      var h;
+      return (h = m.current) == null ? void 0 : h.play();
     },
     pause: () => {
-      var f;
-      return (f = m.current) == null ? void 0 : f.pause();
+      var h;
+      return (h = m.current) == null ? void 0 : h.pause();
     },
     isPlaying: () => {
-      var f;
-      return ((f = m.current) == null ? void 0 : f.isPlaying()) ?? !1;
+      var h;
+      return ((h = m.current) == null ? void 0 : h.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 h = y.errors.filter((I) => I.severity === "error").map((I) => ({ path: I.path, message: I.message }));
+    c == null || c(h);
     const C = /* @__PURE__ */ new Map();
-    for (const I of f) {
-      const T = I.path.split("."), N = T.length > 1 ? T.slice(0, -1).join(".") : I.path, D = C.get(N) ?? [];
+    for (const I of h) {
+      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);
     }
-    return /* @__PURE__ */ R(
+    return /* @__PURE__ */ P(
       "div",
       {
         className: t,
         style: { color: "#ff6b6b", fontFamily: "monospace", padding: 16, fontSize: 13, ...r },
         "data-testid": "dsl-error",
         children: [
-          /* @__PURE__ */ R("strong", { children: [
+          /* @__PURE__ */ P("strong", { children: [
             "Elucim DSL Validation Errors (",
-            f.length,
+            h.length,
             "):"
           ] }),
-          [...C.entries()].map(([I, T]) => /* @__PURE__ */ R("details", { open: !0, style: { marginTop: 8 }, children: [
-            /* @__PURE__ */ R("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
+          [...C.entries()].map(([I, M]) => /* @__PURE__ */ P("details", { open: !0, style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ P("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
               I,
               " (",
-              T.length,
+              M.length,
               ")"
             ] }),
-            /* @__PURE__ */ l("ul", { style: { margin: "4px 0", paddingLeft: 20 }, children: T.map((N, D) => /* @__PURE__ */ R("li", { children: [
+            /* @__PURE__ */ l("ul", { style: { margin: "4px 0", paddingLeft: 20 }, children: M.map((N, D) => /* @__PURE__ */ P("li", { children: [
               /* @__PURE__ */ l("code", { style: { color: "#ffa07a" }, children: N.path }),
               ": ",
               N.message
             ] }, D)) })
           ] }, I)),
-          /* @__PURE__ */ R("details", { style: { marginTop: 12 }, children: [
+          /* @__PURE__ */ P("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) })
           ] })
@@ -1420,17 +1420,17 @@ const ga = lt(function({ dsl: a, className: t, style: r, theme: i, colorScheme:
       }
     );
   }
-  const o = Kt(i);
+  const g = Qt(i);
   let d = {};
-  n && (d = (n === "auto" ? k : n === "dark") ? Qt : Xt);
-  const $ = s !== void 0 ? ta(s, a) : void 0, O = n ? n === "auto" ? k ? "dark" : "light" : n : void 0;
-  return /* @__PURE__ */ l("div", { className: t, style: { ...d, ...o, ...r }, "data-testid": "dsl-root", children: ce(a.root, {
+  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
   }) });
 });
-function ta(e, a) {
+function aa(e, a) {
   if (e === "first") return { frame: 0 };
   if (e === "last") {
     const r = a.root.durationInFrames ?? 1;
@@ -1438,7 +1438,7 @@ function ta(e, a) {
   }
   return { frame: e };
 }
-function aa(e, a, t) {
+function ra(e, a, t) {
   const r = re(e);
   if (!r.valid) {
     const s = r.errors.filter((c) => c.severity === "error");
@@ -1450,11 +1450,18 @@ ${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 = ce(i, { frame: a });
+  const n = le(i, { frame: a });
   return gt(n);
 }
-async function oa(e, a, t) {
-  const r = (t == null ? void 0 : t.scale) ?? 2, n = aa(e, a, {
+function te(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, {
     width: t == null ? void 0 : t.width,
     height: t == null ? void 0 : t.height
   }).match(/<svg[\s\S]*<\/svg>/);
@@ -1463,29 +1470,24 @@ async function oa(e, a, t) {
   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[^"]*"/, "");
-  let o = e.root.background ?? "#ffffff";
-  if (o.startsWith("$")) {
-    const f = X[o.slice(1)];
-    o = (f == null ? void 0 : f.fallback) ?? "#ffffff";
-  }
-  const d = `<rect width="${x}" height="${m}" fill="${o}"/>`;
-  s = s.replace(/>/, `>${d}`), s = s.replace(
-    /var\(--elucim-[\w-]+,\s*(#[0-9a-fA-F]{3,8})\)/g,
-    "$1"
-  ), s = s.replace(
-    /var\(--elucim-[\w-]+\)/g,
-    "none"
-  );
+  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);
   const O = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(s)))}`;
-  return typeof OffscreenCanvas < "u" ? ra(O, k, y) : ia(O, k, y);
+  if (typeof Image < "u" && typeof document < "u")
+    return na(O, k, y);
+  if (typeof OffscreenCanvas < "u")
+    return ia(O, k, y);
+  throw new Error("renderToPng requires Image+document (browser) or OffscreenCanvas (worker)");
 }
-async function ra(e, a, t) {
+async function ia(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);
 }
-function ia(e, a, t) {
+function na(e, a, t) {
   return new Promise((r, i) => {
     const n = new Image();
     n.onload = () => {
@@ -1500,7 +1502,7 @@ function ia(e, a, t) {
     }, n.onerror = () => i(new Error("Failed to load SVG data URI for PNG render")), n.src = e;
   });
 }
-class na {
+class sa {
   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;
   }
@@ -1721,12 +1723,12 @@ class na {
   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;
     t == null || t.fadeIn;
-    const m = a.map((y, o) => {
-      const d = x + o * (r + n);
+    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, o) => {
-      var f, C;
-      const d = m[o], $ = ((f = t == null ? void 0 : t.colors) == null ? void 0 : f[o]) ?? this.theme.boxFill, O = ((C = t == null ? void 0 : t.strokeColors) == null ? void 0 : C[o]) ?? this.theme.boxStroke;
+    }), k = a.map((y, g) => {
+      var h, C;
+      const d = m[g], $ = ((h = t == null ? void 0 : t.colors) == null ? void 0 : h[g]) ?? this.theme.boxFill, O = ((C = t == null ? void 0 : t.strokeColors) == null ? void 0 : C[g]) ?? this.theme.boxStroke;
       return {
         type: "group",
         children: [
@@ -1767,18 +1769,18 @@ class na {
     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 o = s + y * (i + n);
-      return { x: c - r / 2, y: o, w: r, h: i, cx: c, cy: o + i / 2 };
+      const g = s + y * (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 o = x[y], d = (($ = t == null ? void 0 : t.colors) == null ? void 0 : $[y]) ?? this.theme.boxFill;
+      const g = x[y], d = (($ = t == null ? void 0 : t.colors) == null ? void 0 : $[y]) ?? this.theme.boxFill;
       return {
         type: "group",
         children: [
           {
             type: "rect",
-            x: o.x,
-            y: o.y,
+            x: g.x,
+            y: g.y,
             width: r,
             height: i,
             fill: d,
@@ -1788,8 +1790,8 @@ class na {
           },
           {
             type: "text",
-            x: o.cx,
-            y: o.cy + 5,
+            x: g.cx,
+            y: g.cy + 5,
             content: k,
             fontSize: (t == null ? void 0 : t.fontSize) ?? 13,
             fill: (t == null ? void 0 : t.textColor) ?? this.theme.text,
@@ -1885,9 +1887,9 @@ class na {
     return { elements: this.elements, durationInFrames: a };
   }
 }
-class sa {
+class ca {
   constructor(a, t, r) {
-    this._slides = [], this._title = a, this._theme = t ?? ue, this._opts = {
+    this._slides = [], this._title = a, this._theme = t ?? fe, this._opts = {
       width: 900,
       height: 640,
       fps: 30,
@@ -1905,7 +1907,7 @@ class sa {
   /** Build the final ElucimDocument */
   build() {
     const a = this._slides.map((r) => {
-      const i = new na(
+      const i = new sa(
         this._theme,
         this._opts.fps,
         this._opts.width,
@@ -1951,30 +1953,31 @@ class sa {
     return JSON.stringify(this.build(), null, a ? 2 : void 0);
   }
 }
-function ma(e, a, t) {
-  return new sa(e, a, t);
+function ya(e, a, t) {
+  return new ca(e, a, t);
 }
 export {
   ga as DslRenderer,
-  sa as PresentationBuilder,
-  X as SEMANTIC_TOKENS,
-  na as SlideBuilder,
-  fa as TOKEN_NAMES,
-  ot as compileExpression,
-  mt as compileVectorExpression,
-  ue as darkTheme,
-  Ht as lightTheme,
-  ma as presentation,
+  ca as PresentationBuilder,
+  ce as SEMANTIC_TOKENS,
+  sa as SlideBuilder,
+  oa as TOKEN_NAMES,
+  mt as compileExpression,
+  yt as compileVectorExpression,
+  fe as darkTheme,
+  Kt as lightTheme,
+  ya as presentation,
   v as renderElement,
-  le as renderPlayer,
-  Ut as renderPresentation,
-  ce as renderRoot,
+  ue as renderPlayer,
+  Gt as renderPresentation,
+  le as renderRoot,
   H as renderScene,
-  Gt as renderSlide,
-  oa as renderToPng,
-  aa as renderToSvgString,
+  Ht as renderSlide,
+  ma as renderToPng,
+  ra as renderToSvgString,
   u as resolveColor,
-  g as resolveEasing,
+  o as resolveEasing,
+  te as stripCssFunctions,
   re as validate,
   ae as validateExpression
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elucim/dsl",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "JSON/YAML DSL for declarative Elucim animations — define visualizations without writing React code",
   "type": "module",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@elucim/core": "0.8.1"
+    "@elucim/core": "0.8.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",