@elucim/dsl 0.8.0 → 0.8.1

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 X, { forwardRef as lt, useRef as ut, useImperativeHandle as ht, useSyncExternalStore as ft } from "react";
+import J, { forwardRef as lt, useRef as ut, useImperativeHandle as ht, useSyncExternalStore as ft } 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
-}, J = {
+}, Y = {
   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(J, t) ? { kind: "number", value: J[t] } : { kind: "variable", name: t };
+      return Object.prototype.hasOwnProperty.call(Y, t) ? { kind: "number", value: Y[t] } : { kind: "variable", name: t };
     }
     if (a.type === "LPAREN") {
       this.advance();
@@ -249,7 +249,7 @@ function mt(e) {
     );
   return (r) => E(t, r);
 }
-function te(e) {
+function ae(e) {
   try {
     const a = K(e);
     return new Q(a).parse(), null;
@@ -301,7 +301,7 @@ function g(e) {
   }
 }
 const B = Object.keys(G);
-function ae(e) {
+function re(e) {
   const a = [];
   if (!e || typeof e != "object")
     return a.push({ path: "", message: "Document must be an object", severity: "error" }), { valid: !1, errors: a };
@@ -311,7 +311,7 @@ function ae(e) {
     errors: a
   });
 }
-const Y = ["scene", "player", "presentation"], _ = ["card", "slide", "square"], q = [
+const Z = ["scene", "player", "presentation"], _ = ["card", "slide", "square"], q = [
   "sequence",
   "group",
   "bezierCurve",
@@ -340,22 +340,22 @@ const Y = ["scene", "player", "presentation"], _ = ["card", "slide", "square"],
   "parallel",
   "player",
   "scene"
-], Z = ["none", "fade", "slide-left", "slide-up", "zoom"];
+], ee = ["none", "fade", "slide-left", "slide-up", "zoom"];
 function yt(e, a, t) {
   const r = e.type;
-  if (!Y.includes(r)) {
-    t.push({ path: `${a}.type`, message: `Root type must be one of: ${Y.join(", ")}. Got "${r}"`, severity: "error" });
+  if (!Z.includes(r)) {
+    t.push({ path: `${a}.type`, message: `Root type must be one of: ${Z.join(", ")}. Got "${r}"`, severity: "error" });
     return;
   }
-  r === "scene" || r === "player" ? re(e, a, r, t) : r === "presentation" && bt(e, a, t);
+  r === "scene" || r === "player" ? ie(e, a, r, t) : r === "presentation" && bt(e, a, t);
 }
-function re(e, a, t, r) {
+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);
 }
 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 && (Z.includes(e.transition) || t.push({
+  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({
     path: `${a}.transition`,
-    message: `Invalid transition "${e.transition}". Must be one of: ${Z.join(", ")}`,
+    message: `Invalid transition "${e.transition}". Must be one of: ${ee.join(", ")}`,
     severity: "error"
   })), !Array.isArray(e.slides)) {
     t.push({ path: `${a}.slides`, message: 'Presentation must have a "slides" array', severity: "error" });
@@ -371,7 +371,7 @@ function xt(e, a, t) {
     return;
   }
   z(e, "title", a, t), z(e, "notes", a, t), z(e, "background", a, t), e.children !== void 0 && (Array.isArray(e.children) ? e.children.forEach((r, i) => {
-    ie(r, `${a}.children[${i}]`, t);
+    ne(r, `${a}.children[${i}]`, t);
   }) : t.push({ path: `${a}.children`, message: "Slide children must be an array", severity: "error" }));
 }
 function p(e, a, t) {
@@ -380,17 +380,17 @@ function p(e, a, t) {
     return;
   }
   e.children.forEach((r, i) => {
-    ie(r, `${a}.children[${i}]`, t);
+    ne(r, `${a}.children[${i}]`, t);
   });
 }
-function ie(e, a, t) {
+function ne(e, a, t) {
   if (!e || typeof e != "object") {
     t.push({ path: a, message: "Element must be an object", severity: "error" });
     return;
   }
   const r = e.type;
   if (!r || !q.includes(r)) {
-    const i = r ? ne(r, q) : "";
+    const i = r ? se(r, q) : "";
     t.push({
       path: `${a}.type`,
       message: `Unknown element type "${r}".${i} Valid types: ${q.join(", ")}`,
@@ -473,7 +473,7 @@ function ie(e, a, t) {
       break;
     case "scene":
     case "player":
-      re(e, a, r, t);
+      ie(e, a, r, t);
       break;
   }
 }
@@ -507,7 +507,7 @@ function Ct(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 = te(e.fn);
+    const r = ae(e.fn);
     r && t.push({ path: `${a}.fn`, message: `Invalid expression: ${r}`, severity: "error" });
   }
   S(e, "domain", a, t), V(e, a, t);
@@ -519,7 +519,7 @@ function zt(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 = te(e.fn);
+    const r = ae(e.fn);
     r && t.push({ path: `${a}.fn`, message: `Invalid vector expression: ${r}`, severity: "error" });
   }
   S(e, "domain", a, t), S(e, "range", a, t), V(e, a, t);
@@ -582,7 +582,7 @@ function w(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);
 }
-const ee = ["none", "circle", "ellipse"];
+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 r = e.scale;
@@ -593,9 +593,9 @@ 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 && (ee.includes(e.clipShape) || t.push({
+  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({
     path: `${a}.clipShape`,
-    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${ee.join(", ")}`,
+    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${te.join(", ")}`,
     severity: "error"
   })), w(e, a, t);
 }
@@ -609,7 +609,7 @@ function M(e, a, t) {
   if (e.easing !== void 0) {
     if (typeof e.easing == "string") {
       if (!B.includes(e.easing)) {
-        const r = ne(e.easing, B);
+        const r = se(e.easing, B);
         t.push({
           path: `${a}.easing`,
           message: `Unknown easing "${e.easing}".${r} Available: ${B.join(", ")}`,
@@ -662,13 +662,13 @@ function S(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 ne(e, a) {
+function se(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 se = {
+const X = {
   foreground: { cssVar: "--elucim-foreground", fallback: "#c8d6e5" },
   background: { cssVar: "--elucim-background", fallback: "#0a0a1e" },
   title: { cssVar: "--elucim-title", fallback: "#e0e7ff" },
@@ -683,11 +683,11 @@ const se = {
   success: { cssVar: "--elucim-success", fallback: "#34d399" },
   warning: { cssVar: "--elucim-warning", fallback: "#fbbf24" },
   error: { cssVar: "--elucim-error", fallback: "#f87171" }
-}, fa = Object.keys(se);
+}, fa = Object.keys(X);
 function u(e) {
   if (e === void 0) return;
   if (!e.startsWith("$")) return e;
-  const a = e.slice(1), t = se[a];
+  const a = e.slice(1), t = X[a];
   return t ? `var(${t.cssVar}, ${t.fallback})` : `var(--elucim-${a})`;
 }
 const qt = {
@@ -1272,9 +1272,9 @@ function v(e, a) {
     case "parallel":
       return /* @__PURE__ */ l(We, { children: e.children.map((s, c) => v(s, c)) }, a);
     case "scene":
-      return /* @__PURE__ */ l(X.Fragment, { children: H(e) }, a);
+      return /* @__PURE__ */ l(J.Fragment, { children: H(e) }, a);
     case "player":
-      return /* @__PURE__ */ l(X.Fragment, { children: le(e) }, a);
+      return /* @__PURE__ */ l(J.Fragment, { children: le(e) }, a);
     default:
       return null;
   }
@@ -1351,34 +1351,34 @@ function ea() {
   return ft(Jt, Yt, Zt);
 }
 const ga = lt(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, onError: c }, x) {
-  const o = ut(null), k = ea();
+  const m = ut(null), k = ea();
   ht(x, () => ({
     getSvgElement: () => {
       var f;
-      return ((f = o.current) == null ? void 0 : f.getSvgElement()) ?? null;
+      return ((f = m.current) == null ? void 0 : f.getSvgElement()) ?? null;
     },
     seekToFrame: (f) => {
       var C;
-      return (C = o.current) == null ? void 0 : C.seekToFrame(f);
+      return (C = m.current) == null ? void 0 : C.seekToFrame(f);
     },
     getTotalFrames: () => {
       var f;
-      return ((f = o.current) == null ? void 0 : f.getTotalFrames()) ?? 0;
+      return ((f = m.current) == null ? void 0 : f.getTotalFrames()) ?? 0;
     },
     play: () => {
       var f;
-      return (f = o.current) == null ? void 0 : f.play();
+      return (f = m.current) == null ? void 0 : f.play();
     },
     pause: () => {
       var f;
-      return (f = o.current) == null ? void 0 : f.pause();
+      return (f = m.current) == null ? void 0 : f.pause();
     },
     isPlaying: () => {
       var f;
-      return ((f = o.current) == null ? void 0 : f.isPlaying()) ?? !1;
+      return ((f = m.current) == null ? void 0 : f.isPlaying()) ?? !1;
     }
   }));
-  const y = ae(a);
+  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);
@@ -1420,13 +1420,13 @@ const ga = lt(function({ dsl: a, className: t, style: r, theme: i, colorScheme:
       }
     );
   }
-  const m = Kt(i);
+  const o = Kt(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, ...m, ...r }, "data-testid": "dsl-root", children: ce(a.root, {
+  return /* @__PURE__ */ l("div", { className: t, style: { ...d, ...o, ...r }, "data-testid": "dsl-root", children: ce(a.root, {
     frame: $ == null ? void 0 : $.frame,
-    playerRef: o,
+    playerRef: m,
     colorScheme: O
   }) });
 });
@@ -1439,7 +1439,7 @@ function ta(e, a) {
   return { frame: e };
 }
 function aa(e, a, t) {
-  const r = ae(e);
+  const r = re(e);
   if (!r.valid) {
     const s = r.errors.filter((c) => c.severity === "error");
     throw new Error(
@@ -1461,18 +1461,29 @@ async function oa(e, a, t) {
   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), o = (t == null ? void 0 : t.height) ?? (c ? parseFloat(c[2]) : 600), k = Math.round(x * r), y = Math.round(o * r);
+  const c = s.match(/viewBox="0 0 (\d+(?:\.\d+)?) (\d+(?:\.\d+)?)"/), x = (t == null ? void 0 : t.width) ?? (c ? parseFloat(c[1]) : 800), m = (t == null ? void 0 : t.height) ?? (c ? parseFloat(c[2]) : 600), k = Math.round(x * r), y = Math.round(m * r);
   s = s.replace(/width="100%"/, `width="${k}"`).replace(/height="100%"/, `height="${y}"`), s.includes("xmlns=") || (s = s.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"')), s = s.replace(/style="[^"]*position:\s*absolute[^"]*"/, "");
-  const m = e.root.background ?? "#ffffff", d = `<rect width="${x}" height="${o}" fill="${m}"/>`;
-  s = s.replace(/>/, `>${d}`);
+  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"
+  );
   const O = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(s)))}`;
   return typeof OffscreenCanvas < "u" ? ra(O, k, y) : ia(O, k, y);
 }
 async function ra(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 o = await (await s.convertToBlob({ type: "image/png" })).arrayBuffer();
-  return new Uint8Array(o);
+  const m = await (await s.convertToBlob({ type: "image/png" })).arrayBuffer();
+  return new Uint8Array(m);
 }
 function ia(e, a, t) {
   return new Promise((r, i) => {
@@ -1482,7 +1493,7 @@ function ia(e, a, t) {
       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((o) => r(new Uint8Array(o)));
+          x.arrayBuffer().then((m) => r(new Uint8Array(m)));
         },
         "image/png"
       );
@@ -1710,12 +1721,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 o = a.map((y, m) => {
-      const d = x + m * (r + n);
+    const m = a.map((y, o) => {
+      const d = x + o * (r + n);
       return { x: d, y: s, w: r, h: i, cx: d + r / 2, cy: s + i / 2 };
-    }), k = a.map((y, m) => {
+    }), k = a.map((y, o) => {
       var f, C;
-      const d = o[m], $ = ((f = t == null ? void 0 : t.colors) == null ? void 0 : f[m]) ?? this.theme.boxFill, O = ((C = t == null ? void 0 : t.strokeColors) == null ? void 0 : C[m]) ?? this.theme.boxStroke;
+      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;
       return {
         type: "group",
         children: [
@@ -1747,7 +1758,7 @@ class na {
       type: "stagger",
       staggerDelay: 3,
       children: k
-    }, 8 + a.length * 2), o;
+    }, 8 + a.length * 2), m;
   }
   /**
    * Render a vertical stack of labeled boxes.
@@ -1756,18 +1767,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 m = s + y * (i + n);
-      return { x: c - r / 2, y: m, w: r, h: i, cx: c, cy: m + i / 2 };
-    }), o = 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 };
+    }), m = a.map((k, y) => {
       var $, O;
-      const m = x[y], d = (($ = t == null ? void 0 : t.colors) == null ? void 0 : $[y]) ?? this.theme.boxFill;
+      const o = x[y], d = (($ = t == null ? void 0 : t.colors) == null ? void 0 : $[y]) ?? this.theme.boxFill;
       return {
         type: "group",
         children: [
           {
             type: "rect",
-            x: m.x,
-            y: m.y,
+            x: o.x,
+            y: o.y,
             width: r,
             height: i,
             fill: d,
@@ -1777,8 +1788,8 @@ class na {
           },
           {
             type: "text",
-            x: m.cx,
-            y: m.cy + 5,
+            x: o.cx,
+            y: o.cy + 5,
             content: k,
             fontSize: (t == null ? void 0 : t.fontSize) ?? 13,
             fill: (t == null ? void 0 : t.textColor) ?? this.theme.text,
@@ -1790,7 +1801,7 @@ class na {
     return this.addAtCursor({
       type: "stagger",
       staggerDelay: 3,
-      children: o
+      children: m
     }, 8 + a.length * 2), x;
   }
   /**
@@ -1946,7 +1957,7 @@ function ma(e, a, t) {
 export {
   ga as DslRenderer,
   sa as PresentationBuilder,
-  se as SEMANTIC_TOKENS,
+  X as SEMANTIC_TOKENS,
   na as SlideBuilder,
   fa as TOKEN_NAMES,
   ot as compileExpression,
@@ -1964,6 +1975,6 @@ export {
   aa as renderToSvgString,
   u as resolveColor,
   g as resolveEasing,
-  ae as validate,
-  te as validateExpression
+  re as validate,
+  ae as validateExpression
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elucim/dsl",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "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.0"
+    "@elucim/core": "0.8.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",