@elucim/dsl 0.8.2 → 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,7 +1,7 @@
-import { easeOutBounce as ge, easeOutElastic as oe, 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 Re, cubicBezier as Pe, Presentation as Me, Scene as Te, 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 R } from "react/jsx-runtime";
-import X, { forwardRef as ut, useRef as ht, useImperativeHandle as ft, useSyncExternalStore as gt } from "react";
-import { renderToStaticMarkup as ot } from "react-dom/server";
+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,
   cos: Math.cos,
@@ -276,10 +276,10 @@ const G = {
   easeInOutExpo: be,
   easeInBack: ye,
   easeOutBack: me,
-  easeOutElastic: oe,
-  easeOutBounce: ge
+  easeOutElastic: ge,
+  easeOutBounce: oe
 };
-function g(e) {
+function o(e) {
   if (e !== void 0) {
     if (typeof e == "string") {
       const a = G[e];
@@ -290,13 +290,13 @@ function g(e) {
       return a;
     }
     if (e.type === "spring")
-      return Re({
+      return Pe({
         stiffness: e.stiffness,
         damping: e.damping,
         mass: e.mass
       });
     if (e.type === "cubicBezier")
-      return Pe(e.x1, e.y1, e.x2, e.y2);
+      return Re(e.x1, e.y1, e.x2, e.y2);
     throw new Error(`Unknown easing type: ${e.type}`);
   }
 }
@@ -442,13 +442,13 @@ function ne(e, a, t) {
       Ft(e, a, t);
       break;
     case "latex":
-      Rt(e, a, t);
+      Pt(e, a, t);
       break;
     case "barChart":
       jt(e, a, t);
       break;
     case "sequence":
-      Pt(e, a, t);
+      Rt(e, a, t);
       break;
     case "group":
       Lt(e, a, t);
@@ -460,10 +460,10 @@ function ne(e, a, t) {
     case "fadeOut":
     case "draw":
     case "write":
-      Mt(e, a, t);
+      Tt(e, a, t);
       break;
     case "transform":
-      Tt(e, a, t);
+      Mt(e, a, t);
       break;
     case "morph":
       Nt(e, a, t);
@@ -478,19 +478,19 @@ function ne(e, a, t) {
   }
 }
 function vt(e, a, t) {
-  h(e, "x1", a, t), h(e, "y1", a, t), h(e, "cx1", a, t), h(e, "cy1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), e.cx2 !== void 0 && P(e, "cx2", a, t), e.cy2 !== void 0 && P(e, "cy2", 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, "cx", a, t), h(e, "cy", a, t), F(e, "r", 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, "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 St(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), F(e, "width", a, t), F(e, "height", a, t), w(e, a, t);
+  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) => {
@@ -498,7 +498,7 @@ function $t(e, a, t) {
   }) : t.push({ path: `${a}.points`, message: 'Polygon requires a "points" array', severity: "error" }), w(e, a, t);
 }
 function Ot(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), typeof e.content != "string" && t.push({ path: `${a}.content`, message: 'Text requires a "content" string', severity: "error" }), w(e, a, t);
+  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);
@@ -535,24 +535,24 @@ function Ft(e, a, t) {
   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 Rt(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) {
-  h(e, "from", a, t), qt(e, "durationInFrames", a, t), p(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 Mt(e, a, t) {
-  b(e, "duration", a, t), M(e, a, t), p(e, a, t);
+function Rt(e, a, t) {
+  f(e, "from", a, t), qt(e, "durationInFrames", a, t), p(e, a, t);
 }
 function Tt(e, a, t) {
-  if (b(e, "duration", a, t), M(e, a, t), e.translate !== void 0) {
+  b(e, "duration", a, t), T(e, a, t), p(e, a, t);
+}
+function Mt(e, a, t) {
+  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" });
   }
@@ -571,29 +571,29 @@ function Tt(e, a, t) {
   p(e, a, t);
 }
 function Nt(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);
+  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), M(e, a, t), p(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), Dt(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), _t(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 ee = ["none", "circle", "ellipse"];
 function Dt(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) {
+  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 _t(e, a, t) {
-  P(e, "rotation", a, t), S(e, "rotationOrigin", a, t), S(e, "translate", a, t), P(e, "zIndex", a, t);
+  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" }), h(e, "x", a, t), h(e, "y", a, t), F(e, "width", a, t), F(e, "height", a, t), z(e, "preserveAspectRatio", a, t), e.borderRadius !== void 0 && (typeof e.borderRadius != "number" || e.borderRadius < 0) && t.push({ path: `${a}.borderRadius`, message: '"borderRadius" must be a number >= 0', severity: "error" }), e.clipShape !== void 0 && (ee.includes(e.clipShape) || t.push({
+  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: ${ee.join(", ")}`,
     severity: "error"
@@ -603,9 +603,9 @@ function Lt(e, a, t) {
   p(e, a, t), w(e, a, t);
 }
 function jt(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), F(e, "width", a, t), F(e, "height", a, t), Array.isArray(e.bars) || t.push({ path: `${a}.bars`, message: 'BarChart requires a "bars" array', severity: "error" }), w(e, a, t);
+  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,7 +632,7 @@ 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) {
@@ -652,7 +652,7 @@ function qt(e, a, t, r) {
 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) {
@@ -683,7 +683,7 @@ const ce = {
   success: { cssVar: "--elucim-success", fallback: "#34d399" },
   warning: { cssVar: "--elucim-warning", fallback: "#fbbf24" },
   error: { cssVar: "--elucim-error", fallback: "#f87171" }
-}, ga = Object.keys(ce);
+}, oa = Object.keys(ce);
 function u(e) {
   if (e === void 0) return;
   if (!e.startsWith("$")) return e;
@@ -727,7 +727,7 @@ function le(e, a) {
 function H(e, a) {
   const t = (a == null ? void 0 : a.frame) !== void 0, { width: r, height: i } = L(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Te,
+    Me,
     {
       width: r,
       height: i,
@@ -762,7 +762,7 @@ function ue(e, a) {
 function Gt(e) {
   const { width: a, height: t } = L(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Me,
+    Te,
     {
       width: a,
       height: t,
@@ -790,7 +790,7 @@ function v(e, a) {
         {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
-          easing: g(e.easing),
+          easing: o(e.easing),
           rotation: e.rotation,
           rotationOrigin: e.rotationOrigin,
           scale: e.scale,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -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(Ue, { 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(qe, { 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(Be, { 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(je, { 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(
         Le,
         {
           duration: e.duration,
-          easing: g(e.easing),
+          easing: o(e.easing),
           translate: e.translate,
           scale: e.scale,
           rotate: e.rotate,
@@ -1256,7 +1256,7 @@ function v(e, a) {
         Ve,
         {
           duration: e.duration,
-          easing: g(e.easing),
+          easing: o(e.easing),
           fromColor: u(e.fromColor),
           toColor: u(e.toColor),
           fromOpacity: e.fromOpacity,
@@ -1268,7 +1268,7 @@ function v(e, a) {
         a
       );
     case "stagger":
-      return /* @__PURE__ */ l(_e, { 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(De, { children: e.children.map((s, c) => v(s, c)) }, a);
     case "scene":
@@ -1279,7 +1279,7 @@ function v(e, a) {
       return null;
   }
 }
-const he = {
+const fe = {
   background: "#0a0a1e",
   title: "#e0e7ff",
   subtitle: "#94a3b8",
@@ -1317,7 +1317,7 @@ function Qt(e) {
     r !== void 0 && (a[`--elucim-${t}`] = r);
   return a;
 }
-function fe(e) {
+function he(e) {
   return {
     "--elucim-foreground": e.text,
     "--elucim-background": e.background,
@@ -1334,7 +1334,7 @@ function fe(e) {
     "--elucim-error": e.error
   };
 }
-const Xt = fe(he), Jt = fe(Kt);
+const Xt = he(fe), Jt = he(Kt);
 function Yt(e) {
   if (typeof window > "u" || typeof window.matchMedia != "function") return () => {
   };
@@ -1348,71 +1348,71 @@ function ea() {
   return !0;
 }
 function ta() {
-  return gt(Yt, Zt, ea);
+  return ot(Yt, Zt, ea);
 }
-const oa = ut(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, onError: c }, x) {
-  const m = ht(null), k = ta();
-  ft(x, () => ({
+const 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,11 +1420,11 @@ const oa = ut(function({ dsl: a, className: t, style: r, theme: i, colorScheme:
       }
     );
   }
-  const o = Qt(i);
+  const g = Qt(i);
   let d = {};
   n && (d = (n === "auto" ? k : n === "dark") ? Xt : Jt);
   const $ = s !== void 0 ? aa(s, a) : void 0, O = n ? n === "auto" ? k ? "dark" : "light" : n : void 0;
-  return /* @__PURE__ */ l("div", { className: t, style: { ...d, ...o, ...r }, "data-testid": "dsl-root", children: le(a.root, {
+  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
@@ -1451,7 +1451,7 @@ ${s.map((c) => `  ${c.path}: ${c.message}`).join(`
   const i = { ...e.root };
   t != null && t.width && (i.width = t.width), t != null && t.height && (i.height = t.height);
   const n = le(i, { frame: a });
-  return ot(n);
+  return gt(n);
 }
 function te(e) {
   let a;
@@ -1470,12 +1470,16 @@ async function ma(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";
-  o.startsWith("$") && (o = u(o) ?? "#ffffff"), o = te(o);
-  const d = `<rect width="${x}" height="${m}" fill="${o}"/>`;
+  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" ? ia(O, k, y) : na(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 ia(e, a, t) {
   const i = await (await fetch(e)).blob(), n = await createImageBitmap(i, { resizeWidth: a, resizeHeight: t }), s = new OffscreenCanvas(a, t);
@@ -1719,12 +1723,12 @@ class sa {
   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: [
@@ -1765,18 +1769,18 @@ class sa {
     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,
@@ -1786,8 +1790,8 @@ class sa {
           },
           {
             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,7 +1889,7 @@ class sa {
 }
 class ca {
   constructor(a, t, r) {
-    this._slides = [], this._title = a, this._theme = t ?? he, this._opts = {
+    this._slides = [], this._title = a, this._theme = t ?? fe, this._opts = {
       width: 900,
       height: 640,
       fps: 30,
@@ -1953,14 +1957,14 @@ function ya(e, a, t) {
   return new ca(e, a, t);
 }
 export {
-  oa as DslRenderer,
+  ga as DslRenderer,
   ca as PresentationBuilder,
   ce as SEMANTIC_TOKENS,
   sa as SlideBuilder,
-  ga as TOKEN_NAMES,
+  oa as TOKEN_NAMES,
   mt as compileExpression,
   yt as compileVectorExpression,
-  he as darkTheme,
+  fe as darkTheme,
   Kt as lightTheme,
   ya as presentation,
   v as renderElement,
@@ -1972,7 +1976,8 @@ export {
   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.2",
+  "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.2"
+    "@elucim/core": "0.8.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",