@elucim/dsl 0.13.1 → 0.14.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 
 export declare interface ArrowNode {
     type: 'arrow';
@@ -225,6 +226,12 @@ export declare interface DslRendererProps {
         path: string;
         message: string;
     }>) => void;
+    /**
+     * Image resolver for consumer-managed assets.
+     * When provided, `<Image>` elements with a `ref` field call this function
+     * to obtain a renderable URL instead of using `src` directly.
+     */
+    imageResolver?: ImageResolverFn;
 }
 
 export declare interface DslRendererRef {
@@ -398,7 +405,12 @@ export declare interface GroupNode {
 export declare interface ImageNode {
     type: 'image';
     id?: string;
-    src: string;
+    /** Image URL or data URI. Used directly, or as fallback when ref is set. */
+    src?: string;
+    /** Opaque consumer reference resolved via ImageResolverProvider at render time. */
+    ref?: string;
+    /** Human-readable label for the image (shown in editor inspector). */
+    displayName?: string;
     x: number;
     y: number;
     width: number;
@@ -417,6 +429,45 @@ export declare interface ImageNode {
     zIndex?: number;
 }
 
+/**
+ * A function that resolves an opaque image reference to a renderable URL.
+ *
+ * - Return a `string` for synchronous resolution (CDN rewrites, path prefixing).
+ * - Return a `Promise<string>` for async resolution (auth tokens, signed URLs).
+ *
+ * @example
+ * ```ts
+ * // Sync: prefix a CDN base URL
+ * const resolver: ImageResolverFn = (ref) => `https://cdn.example.com/${ref}`;
+ *
+ * // Async: fetch a signed URL from an API
+ * const resolver: ImageResolverFn = async (ref) => {
+ *   const res = await fetch(`/api/assets/${ref}/url`);
+ *   return res.text();
+ * };
+ * ```
+ */
+export declare type ImageResolverFn = (ref: string) => string | Promise<string>;
+
+/**
+ * Provides an image resolver to all Elucim components below.
+ *
+ * When present, `<Image>` elements with a `ref` prop will call this resolver
+ * to obtain a renderable URL instead of using `src` directly.
+ *
+ * Works with `DslRenderer`, `ElucimEditor`, or any custom composition.
+ *
+ * @example
+ * ```tsx
+ * <ImageResolverProvider resolver={(ref) => `https://cdn.acme.com/${ref}`}>
+ *   <DslRenderer dsl={doc} />
+ * </ImageResolverProvider>
+ * ```
+ */
+export declare function ImageResolverProvider({ resolver, children, }: default_2.PropsWithChildren<{
+    resolver: ImageResolverFn;
+}>): JSX_2.Element;
+
 export declare interface LaTeXNode {
     type: 'latex';
     id?: string;
@@ -1087,6 +1138,12 @@ export declare interface TransformNode {
 
 declare type TransitionType = 'none' | 'fade' | 'slide-left' | 'slide-up' | 'zoom';
 
+/**
+ * Returns the image resolver if an `ImageResolverProvider` is present,
+ * or `undefined` otherwise.
+ */
+export declare function useImageResolver(): ImageResolverFn | undefined;
+
 export declare function validate(doc: unknown): ValidationResult;
 
 /**

package/dist/index.js

@@ -1,8 +1,8 @@
-import { easeOutBounce as xe, easeOutElastic as de, easeOutBack as we, easeInBack as ve, easeInOutExpo as ke, easeOutExpo as Ie, easeInExpo as Se, easeInOutSine as $e, easeOutSine as Ce, easeInSine as Oe, easeInOutQuart as Ae, easeOutQuart as pe, easeInQuart as ze, easeInOutCubic as Ee, easeOutCubic as Re, easeInCubic as Te, easeInOutQuad as Fe, easeOutQuad as Pe, easeInQuad as Me, linear as _e, spring as De, cubicBezier as Ne, Presentation as We, resolveColor as u, Scene as Le, Player as Ve, Slide as Be, Parallel as je, Stagger as qe, Morph as Ue, Transform as He, Write as Ge, Draw as Ke, FadeOut as Qe, FadeIn as Xe, BarChart as Je, LaTeX as Ye, Graph as Ze, Matrix as et, Text as U, VectorField as tt, Vector as at, FunctionPlot as rt, Axes as it, Image as nt, Polygon as st, Rect as ct, Arrow as lt, Line as ut, Circle as ht, BezierCurve as ft, Group as gt, Sequence as ot, themeToVars as mt, DARK_THEME_VARS as yt, LIGHT_THEME_VARS as bt } from "@elucim/core";
-import { DARK_THEME as $a, DARK_THEME_VARS as Ca, LIGHT_THEME as Oa, LIGHT_THEME_VARS as Aa, SEMANTIC_TOKENS as pa, TOKEN_NAMES as za, resolveColor as Ea, themeToVars as Ra } from "@elucim/core";
+import { easeOutBounce as we, easeOutElastic as ve, easeOutBack as ke, easeInBack as Ie, easeInOutExpo as Se, easeOutExpo as $e, easeInExpo as Ce, easeInOutSine as Oe, easeOutSine as Ae, easeInSine as pe, easeInOutQuart as ze, easeOutQuart as Ee, easeInQuart as Re, easeInOutCubic as Pe, easeOutCubic as Te, easeInCubic as Fe, easeInOutQuad as Me, easeOutQuad as _e, easeInQuad as De, linear as Ne, spring as We, cubicBezier as Le, Presentation as Ve, resolveColor as u, Scene as Be, Player as je, Slide as qe, Parallel as Ue, Stagger as He, Morph as Ge, Transform as Ke, Write as Qe, Draw as Xe, FadeOut as Je, FadeIn as Ye, BarChart as Ze, LaTeX as et, Graph as tt, Matrix as at, Text as U, VectorField as rt, Vector as it, FunctionPlot as nt, Axes as st, Image as ct, Polygon as lt, Rect as ut, Arrow as ht, Line as ft, Circle as ot, BezierCurve as gt, Group as mt, Sequence as yt, themeToVars as bt, ImageResolverProvider as xt, DARK_THEME_VARS as dt, LIGHT_THEME_VARS as wt } from "@elucim/core";
+import { DARK_THEME as Aa, DARK_THEME_VARS as pa, ImageResolverProvider as za, LIGHT_THEME as Ea, LIGHT_THEME_VARS as Ra, SEMANTIC_TOKENS as Pa, TOKEN_NAMES as Ta, resolveColor as Fa, themeToVars as Ma, useImageResolver as _a } from "@elucim/core";
 import { jsx as l, jsxs as E } from "react/jsx-runtime";
-import K, { forwardRef as xt, useRef as dt, useImperativeHandle as wt, useSyncExternalStore as vt } from "react";
-import { renderToStaticMarkup as kt } from "react-dom/server";
+import K, { forwardRef as vt, useRef as kt, useImperativeHandle as It, useSyncExternalStore as St } from "react";
+import { renderToStaticMarkup as $t } from "react-dom/server";
 const Q = {
   sin: Math.sin,
   cos: Math.cos,
@@ -23,7 +23,7 @@ const Q = {
   max: (...e) => Math.max(...e),
   sign: Math.sign,
   pow: Math.pow
-}, ae = {
+}, ie = {
   PI: Math.PI,
   E: Math.E,
   TAU: Math.PI * 2
@@ -176,7 +176,7 @@ class Z {
           );
         return { kind: "call", name: t, args: r };
       }
-      return Object.prototype.hasOwnProperty.call(ae, t) ? { kind: "number", value: ae[t] } : { kind: "variable", name: t };
+      return Object.prototype.hasOwnProperty.call(ie, t) ? { kind: "number", value: ie[t] } : { kind: "variable", name: t };
     }
     if (a.type === "LPAREN") {
       this.advance();
@@ -237,11 +237,11 @@ class A extends Error {
     super(a), this.name = "ExpressionError", this.position = t;
   }
 }
-function It(e) {
+function Ct(e) {
   const a = Y(e), t = new Z(a).parse();
   return (r) => R(t, r);
 }
-function St(e) {
+function Ot(e) {
   const a = Y(e), t = new Z(a).parse();
   if (t.kind !== "array" || t.elements.length !== 2)
     throw new A(
@@ -250,7 +250,7 @@ function St(e) {
     );
   return (r) => R(t, r);
 }
-function ce(e) {
+function ue(e) {
   try {
     const a = Y(e);
     return new Z(a).parse(), null;
@@ -259,26 +259,26 @@ function ce(e) {
   }
 }
 const X = {
-  linear: _e,
-  easeInQuad: Me,
-  easeOutQuad: Pe,
-  easeInOutQuad: Fe,
-  easeInCubic: Te,
-  easeOutCubic: Re,
-  easeInOutCubic: Ee,
-  easeInQuart: ze,
-  easeOutQuart: pe,
-  easeInOutQuart: Ae,
-  easeInSine: Oe,
-  easeOutSine: Ce,
-  easeInOutSine: $e,
-  easeInExpo: Se,
-  easeOutExpo: Ie,
-  easeInOutExpo: ke,
-  easeInBack: ve,
-  easeOutBack: we,
-  easeOutElastic: de,
-  easeOutBounce: xe
+  linear: Ne,
+  easeInQuad: De,
+  easeOutQuad: _e,
+  easeInOutQuad: Me,
+  easeInCubic: Fe,
+  easeOutCubic: Te,
+  easeInOutCubic: Pe,
+  easeInQuart: Re,
+  easeOutQuart: Ee,
+  easeInOutQuart: ze,
+  easeInSine: pe,
+  easeOutSine: Ae,
+  easeInOutSine: Oe,
+  easeInExpo: Ce,
+  easeOutExpo: $e,
+  easeInOutExpo: Se,
+  easeInBack: Ie,
+  easeOutBack: ke,
+  easeOutElastic: ve,
+  easeOutBounce: we
 };
 function f(e) {
   if (e !== void 0) {
@@ -291,28 +291,28 @@ function f(e) {
       return a;
     }
     if (e.type === "spring")
-      return De({
+      return We({
         stiffness: e.stiffness,
         damping: e.damping,
         mass: e.mass
       });
     if (e.type === "cubicBezier")
-      return Ne(e.x1, e.y1, e.x2, e.y2);
+      return Le(e.x1, e.y1, e.x2, e.y2);
     throw new Error(`Unknown easing type: ${e.type}`);
   }
 }
 const H = Object.keys(X);
-function le(e) {
+function he(e) {
   const a = [];
   if (!e || typeof e != "object")
     return a.push({ path: "", message: "Document must be an object", severity: "error" }), { valid: !1, errors: a };
   const t = e;
-  return t.version !== "1.0" && a.push({ path: "version", message: `Expected version "1.0", got "${t.version}"`, severity: "error" }), !t.root || typeof t.root != "object" ? (a.push({ path: "root", message: 'Missing or invalid "root" node', severity: "error" }), { valid: a.filter((r) => r.severity === "error").length === 0, errors: a }) : ($t(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 }) : (At(t.root, "root", a), {
     valid: a.filter((r) => r.severity === "error").length === 0,
     errors: a
   });
 }
-const re = ["scene", "player", "presentation"], V = ["card", "slide", "square"], G = [
+const ne = ["scene", "player", "presentation"], V = ["card", "slide", "square"], G = [
   "sequence",
   "group",
   "bezierCurve",
@@ -341,38 +341,38 @@ const re = ["scene", "player", "presentation"], V = ["card", "slide", "square"],
   "parallel",
   "player",
   "scene"
-], ie = ["none", "fade", "slide-left", "slide-up", "zoom"];
-function $t(e, a, t) {
+], se = ["none", "fade", "slide-left", "slide-up", "zoom"];
+function At(e, a, t) {
   const r = e.type;
-  if (!re.includes(r)) {
-    t.push({ path: `${a}.type`, message: `Root type must be one of: ${re.join(", ")}. Got "${r}"`, severity: "error" });
+  if (!ne.includes(r)) {
+    t.push({ path: `${a}.type`, message: `Root type must be one of: ${ne.join(", ")}. Got "${r}"`, severity: "error" });
     return;
   }
-  r === "scene" || r === "player" ? ue(e, a, r, t) : r === "presentation" && Ct(e, a, t);
+  r === "scene" || r === "player" ? fe(e, a, r, t) : r === "presentation" && pt(e, a, t);
 }
-function ue(e, a, t, r) {
-  Jt(e, "durationInFrames", a, r), m(e, "width", a, r), m(e, "height", a, r), m(e, "fps", a, r), p(e, "background", a, r), e.preset !== void 0 && (typeof e.preset != "string" || !V.includes(e.preset)) && r.push({ path: `${a}.preset`, message: `preset must be one of: ${V.join(", ")}. Got "${e.preset}"`, severity: "error" }), t === "player" && (W(e, "controls", a, r), W(e, "loop", a, r), W(e, "autoPlay", a, r)), z(e, a, r);
+function fe(e, a, t, r) {
+  ea(e, "durationInFrames", a, r), m(e, "width", a, r), m(e, "height", a, r), m(e, "fps", a, r), p(e, "background", a, r), e.preset !== void 0 && (typeof e.preset != "string" || !V.includes(e.preset)) && r.push({ path: `${a}.preset`, message: `preset must be one of: ${V.join(", ")}. Got "${e.preset}"`, severity: "error" }), t === "player" && (N(e, "controls", a, r), N(e, "loop", a, r), N(e, "autoPlay", a, r)), z(e, a, r);
 }
-function Ct(e, a, t) {
-  if (m(e, "width", a, t), m(e, "height", a, t), p(e, "background", a, t), m(e, "transitionDuration", a, t), W(e, "showHud", a, t), W(e, "showNotes", a, t), e.preset !== void 0 && (typeof e.preset != "string" || !V.includes(e.preset)) && t.push({ path: `${a}.preset`, message: `preset must be one of: ${V.join(", ")}. Got "${e.preset}"`, severity: "error" }), e.transition !== void 0 && (ie.includes(e.transition) || t.push({
+function pt(e, a, t) {
+  if (m(e, "width", a, t), m(e, "height", a, t), p(e, "background", a, t), m(e, "transitionDuration", a, t), N(e, "showHud", a, t), N(e, "showNotes", a, t), e.preset !== void 0 && (typeof e.preset != "string" || !V.includes(e.preset)) && t.push({ path: `${a}.preset`, message: `preset must be one of: ${V.join(", ")}. Got "${e.preset}"`, severity: "error" }), e.transition !== void 0 && (se.includes(e.transition) || t.push({
     path: `${a}.transition`,
-    message: `Invalid transition "${e.transition}". Must be one of: ${ie.join(", ")}`,
+    message: `Invalid transition "${e.transition}". Must be one of: ${se.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) => {
-    Ot(r, `${a}.slides[${i}]`, t);
+    zt(r, `${a}.slides[${i}]`, t);
   });
 }
-function Ot(e, a, t) {
+function zt(e, a, t) {
   if (!e || typeof e != "object") {
     t.push({ path: a, message: "Slide must be an object", severity: "error" });
     return;
   }
   p(e, "title", a, t), p(e, "notes", a, t), p(e, "background", a, t), e.children !== void 0 && (Array.isArray(e.children) ? e.children.forEach((r, i) => {
-    he(r, `${a}.children[${i}]`, t);
+    oe(r, `${a}.children[${i}]`, t);
   }) : t.push({ path: `${a}.children`, message: "Slide children must be an array", severity: "error" }));
 }
 function z(e, a, t) {
@@ -381,17 +381,17 @@ function z(e, a, t) {
     return;
   }
   e.children.forEach((r, i) => {
-    he(r, `${a}.children[${i}]`, t);
+    oe(r, `${a}.children[${i}]`, t);
   });
 }
-function he(e, a, t) {
+function oe(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 || !G.includes(r)) {
-    const i = r ? fe(r, G) : "";
+    const i = r ? ge(r, G) : "";
     t.push({
       path: `${a}.type`,
       message: `Unknown element type "${r}".${i} Valid types: ${G.join(", ")}`,
@@ -401,58 +401,58 @@ function he(e, a, t) {
   }
   switch (r) {
     case "bezierCurve":
-      At(e, a, t);
+      Et(e, a, t);
       break;
     case "circle":
-      pt(e, a, t);
+      Rt(e, a, t);
       break;
     case "line":
-      zt(e, a, t);
+      Pt(e, a, t);
       break;
     case "arrow":
-      Et(e, a, t);
+      Tt(e, a, t);
       break;
     case "rect":
-      Rt(e, a, t);
+      Ft(e, a, t);
       break;
     case "polygon":
-      Tt(e, a, t);
+      Mt(e, a, t);
       break;
     case "text":
-      Ft(e, a, t);
+      _t(e, a, t);
       break;
     case "image":
-      Kt(e, a, t);
+      Jt(e, a, t);
       break;
     case "axes":
-      Pt(e, a, t);
+      Dt(e, a, t);
       break;
     case "functionPlot":
-      Mt(e, a, t);
+      Nt(e, a, t);
       break;
     case "vector":
-      _t(e, a, t);
+      Wt(e, a, t);
       break;
     case "vectorField":
-      Dt(e, a, t);
+      Lt(e, a, t);
       break;
     case "matrix":
-      Nt(e, a, t);
+      Vt(e, a, t);
       break;
     case "graph":
-      Wt(e, a, t);
+      Bt(e, a, t);
       break;
     case "latex":
-      Lt(e, a, t);
+      jt(e, a, t);
       break;
     case "barChart":
-      Xt(e, a, t);
+      Zt(e, a, t);
       break;
     case "sequence":
-      Vt(e, a, t);
+      qt(e, a, t);
       break;
     case "group":
-      Qt(e, a, t);
+      Yt(e, a, t);
       break;
     case "parallel":
       z(e, a, t);
@@ -461,76 +461,76 @@ function he(e, a, t) {
     case "fadeOut":
     case "draw":
     case "write":
-      Bt(e, a, t);
+      Ut(e, a, t);
       break;
     case "transform":
-      jt(e, a, t);
+      Ht(e, a, t);
       break;
     case "morph":
-      qt(e, a, t);
+      Gt(e, a, t);
       break;
     case "stagger":
-      Ut(e, a, t);
+      Kt(e, a, t);
       break;
     case "scene":
     case "player":
-      ue(e, a, r, t);
+      fe(e, a, r, t);
       break;
   }
 }
-function At(e, a, t) {
-  h(e, "x1", a, t), h(e, "y1", a, t), h(e, "cx1", a, t), h(e, "cy1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), e.cx2 !== void 0 && P(e, "cx2", a, t), e.cy2 !== void 0 && P(e, "cy2", a, t), v(e, a, t);
+function Et(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 && F(e, "cx2", a, t), e.cy2 !== void 0 && F(e, "cy2", a, t), v(e, a, t);
 }
-function pt(e, a, t) {
-  h(e, "cx", a, t), h(e, "cy", a, t), T(e, "r", a, t), v(e, a, t);
+function Rt(e, a, t) {
+  h(e, "cx", a, t), h(e, "cy", a, t), P(e, "r", a, t), v(e, a, t);
 }
-function zt(e, a, t) {
+function Pt(e, a, t) {
   h(e, "x1", a, t), h(e, "y1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), v(e, a, t);
 }
-function Et(e, a, t) {
+function Tt(e, a, t) {
   h(e, "x1", a, t), h(e, "y1", a, t), h(e, "x2", a, t), h(e, "y2", a, t), v(e, a, t);
 }
-function Rt(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), T(e, "width", a, t), T(e, "height", a, t), v(e, a, t);
+function Ft(e, a, t) {
+  h(e, "x", a, t), h(e, "y", a, t), P(e, "width", a, t), P(e, "height", a, t), v(e, a, t);
 }
-function Tt(e, a, t) {
+function Mt(e, a, t) {
   Array.isArray(e.points) ? e.points.length < 3 ? t.push({ path: `${a}.points`, message: "Polygon requires at least 3 points", severity: "error" }) : e.points.forEach((r, i) => {
     (!Array.isArray(r) || r.length !== 2 || typeof r[0] != "number" || typeof r[1] != "number") && t.push({ path: `${a}.points[${i}]`, message: "Each point must be [number, number]", severity: "error" });
   }) : t.push({ path: `${a}.points`, message: 'Polygon requires a "points" array', severity: "error" }), v(e, a, t);
 }
-function Ft(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" }), v(e, a, t);
 }
-function Pt(e, a, t) {
+function Dt(e, a, t) {
   I(e, "domain", a, t), I(e, "range", a, t), I(e, "origin", a, t), B(e, a, t);
 }
-function Mt(e, a, t) {
+function Nt(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 = ce(e.fn);
+    const r = ue(e.fn);
     r && t.push({ path: `${a}.fn`, message: `Invalid expression: ${r}`, severity: "error" });
   }
   I(e, "domain", a, t), B(e, a, t);
 }
-function _t(e, a, t) {
+function Wt(e, a, t) {
   (!Array.isArray(e.to) || e.to.length !== 2) && t.push({ path: `${a}.to`, message: 'Vector requires a "to" array of [number, number]', severity: "error" }), I(e, "from", a, t), B(e, a, t);
 }
-function Dt(e, a, t) {
+function Lt(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 = ce(e.fn);
+    const r = ue(e.fn);
     r && t.push({ path: `${a}.fn`, message: `Invalid vector expression: ${r}`, severity: "error" });
   }
   I(e, "domain", a, t), I(e, "range", a, t), B(e, a, t);
 }
-function Nt(e, a, t) {
+function Vt(e, a, t) {
   Array.isArray(e.values) ? e.values.forEach((r, i) => {
     Array.isArray(r) || t.push({ path: `${a}.values[${i}]`, message: "Each matrix row must be an array", severity: "error" });
   }) : t.push({ path: `${a}.values`, message: 'Matrix requires a "values" 2D array', severity: "error" }), v(e, a, t);
 }
-function Wt(e, a, t) {
+function Bt(e, a, t) {
   if (!Array.isArray(e.nodes))
     t.push({ path: `${a}.nodes`, message: 'Graph requires a "nodes" array', severity: "error" });
   else {
@@ -543,16 +543,16 @@ function Wt(e, a, t) {
   }
   v(e, a, t);
 }
-function Lt(e, a, t) {
+function jt(e, a, t) {
   typeof e.expression != "string" && t.push({ path: `${a}.expression`, message: 'LaTeX requires an "expression" string', severity: "error" }), h(e, "x", a, t), h(e, "y", a, t), v(e, a, t);
 }
-function Vt(e, a, t) {
-  h(e, "from", a, t), Yt(e, "durationInFrames", a, t), z(e, a, t);
+function qt(e, a, t) {
+  h(e, "from", a, t), ta(e, "durationInFrames", a, t), z(e, a, t);
 }
-function Bt(e, a, t) {
+function Ut(e, a, t) {
   m(e, "duration", a, t), M(e, a, t), z(e, a, t);
 }
-function jt(e, a, t) {
+function Ht(e, a, t) {
   if (m(e, "duration", a, t), M(e, a, t), e.translate !== void 0) {
     const r = e.translate;
     (!r || typeof r != "object") && t.push({ path: `${a}.translate`, message: "translate must be { from: [x,y], to: [x,y] }", severity: "error" });
@@ -571,46 +571,47 @@ function jt(e, a, t) {
   }
   z(e, a, t);
 }
-function qt(e, a, t) {
+function Gt(e, a, t) {
   m(e, "duration", a, t), M(e, a, t), p(e, "fromColor", a, t), p(e, "toColor", a, t), z(e, a, t);
 }
-function Ut(e, a, t) {
+function Kt(e, a, t) {
   m(e, "staggerDelay", a, t), M(e, a, t), z(e, a, t);
 }
 function v(e, a, t) {
-  m(e, "fadeIn", a, t), m(e, "fadeOut", a, t), m(e, "draw", a, t), M(e, a, t), Ht(e, a, t);
+  m(e, "fadeIn", a, t), m(e, "fadeOut", a, t), m(e, "draw", a, t), M(e, a, t), Qt(e, a, t);
 }
 function B(e, a, t) {
-  m(e, "fadeIn", a, t), m(e, "fadeOut", a, t), m(e, "draw", a, t), M(e, a, t), Gt(e, a, t);
+  m(e, "fadeIn", a, t), m(e, "fadeOut", a, t), m(e, "draw", a, t), M(e, a, t), Xt(e, a, t);
 }
-const ne = ["none", "circle", "ellipse"];
-function Ht(e, a, t) {
-  if (P(e, "rotation", a, t), I(e, "rotationOrigin", a, t), I(e, "translate", a, t), P(e, "zIndex", a, t), e.scale !== void 0) {
+const ce = ["none", "circle", "ellipse"];
+function Qt(e, a, t) {
+  if (F(e, "rotation", a, t), I(e, "rotationOrigin", a, t), I(e, "translate", a, t), F(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 Gt(e, a, t) {
-  P(e, "rotation", a, t), I(e, "rotationOrigin", a, t), I(e, "translate", a, t), P(e, "zIndex", a, t);
+function Xt(e, a, t) {
+  F(e, "rotation", a, t), I(e, "rotationOrigin", a, t), I(e, "translate", a, t), F(e, "zIndex", a, t);
 }
-function Kt(e, a, t) {
-  typeof e.src != "string" && t.push({ path: `${a}.src`, message: 'Image requires a "src" string', severity: "error" }), h(e, "x", a, t), h(e, "y", a, t), T(e, "width", a, t), T(e, "height", a, t), p(e, "preserveAspectRatio", a, t), e.borderRadius !== void 0 && (typeof e.borderRadius != "number" || e.borderRadius < 0) && t.push({ path: `${a}.borderRadius`, message: '"borderRadius" must be a number >= 0', severity: "error" }), e.clipShape !== void 0 && (ne.includes(e.clipShape) || t.push({
+function Jt(e, a, t) {
+  const r = typeof e.src == "string", i = typeof e.ref == "string";
+  !r && !i && t.push({ path: `${a}.src`, message: 'Image requires a "src" or "ref" string', severity: "error" }), h(e, "x", a, t), h(e, "y", a, t), P(e, "width", a, t), P(e, "height", a, t), p(e, "preserveAspectRatio", a, t), e.borderRadius !== void 0 && (typeof e.borderRadius != "number" || e.borderRadius < 0) && t.push({ path: `${a}.borderRadius`, message: '"borderRadius" must be a number >= 0', severity: "error" }), e.clipShape !== void 0 && (ce.includes(e.clipShape) || t.push({
     path: `${a}.clipShape`,
-    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${ne.join(", ")}`,
+    message: `Invalid clipShape "${e.clipShape}". Must be one of: ${ce.join(", ")}`,
     severity: "error"
   })), v(e, a, t);
 }
-function Qt(e, a, t) {
+function Yt(e, a, t) {
   z(e, a, t), v(e, a, t);
 }
-function Xt(e, a, t) {
-  h(e, "x", a, t), h(e, "y", a, t), T(e, "width", a, t), T(e, "height", a, t), Array.isArray(e.bars) || t.push({ path: `${a}.bars`, message: 'BarChart requires a "bars" array', severity: "error" }), v(e, a, t);
+function Zt(e, a, t) {
+  h(e, "x", a, t), h(e, "y", a, t), P(e, "width", a, t), P(e, "height", a, t), Array.isArray(e.bars) || t.push({ path: `${a}.bars`, message: 'BarChart requires a "bars" array', severity: "error" }), v(e, a, t);
 }
 function M(e, a, t) {
   if (e.easing !== void 0) {
     if (typeof e.easing == "string") {
       if (!H.includes(e.easing)) {
-        const r = fe(e.easing, H);
+        const r = ge(e.easing, H);
         t.push({
           path: `${a}.easing`,
           message: `Unknown easing "${e.easing}".${r} Available: ${H.join(", ")}`,
@@ -636,50 +637,50 @@ function M(e, a, t) {
 function h(e, a, t, r) {
   typeof e[a] != "number" && r.push({ path: `${t}.${a}`, message: `Required numeric field "${a}" is missing or not a number`, severity: "error" });
 }
-function T(e, a, t, r) {
+function P(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 ea(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 m(e, a, t, r) {
   e[a] !== void 0 && (typeof e[a] != "number" || e[a] <= 0) && r.push({ path: `${t}.${a}`, message: `"${a}" must be a positive number`, severity: "error" });
 }
-function Yt(e, a, t, r) {
+function ta(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 p(e, a, t, r) {
   e[a] !== void 0 && typeof e[a] != "string" && r.push({ path: `${t}.${a}`, message: `"${a}" must be a string`, severity: "error" });
 }
-function P(e, a, t, r) {
+function F(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) {
+function N(e, a, t, r) {
   e[a] !== void 0 && typeof e[a] != "boolean" && r.push({ path: `${t}.${a}`, message: `"${a}" must be a boolean`, severity: "error" });
 }
 function I(e, a, t, r) {
   const i = e[a];
   i !== void 0 && (!Array.isArray(i) || i.length !== 2 || typeof i[0] != "number" || typeof i[1] != "number") && r.push({ path: `${t}.${a}`, message: `"${a}" must be [number, number]`, severity: "error" });
 }
-function fe(e, a) {
+function ge(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 Zt = {
+const aa = {
   card: [640, 360],
   slide: [1280, 720],
   square: [600, 600]
 };
 function j(e, a, t) {
   if (!e) return { width: a, height: t };
-  const [r, i] = Zt[e];
+  const [r, i] = aa[e];
   return { width: a ?? r, height: t ?? i };
 }
-function ge(e, a) {
+function me(e, a) {
   switch (e.type) {
     case "scene":
       return J(e, a);
@@ -698,15 +699,15 @@ function ge(e, a) {
           a
         );
       }
-      return oe(e, a);
+      return ye(e, a);
     case "presentation":
-      return ea(e, a);
+      return ra(e, a);
   }
 }
 function J(e, a) {
   const t = (a == null ? void 0 : a.frame) !== void 0, { width: r, height: i } = j(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Le,
+    Be,
     {
       width: r,
       height: i,
@@ -720,10 +721,10 @@ function J(e, a) {
     }
   );
 }
-function oe(e, a) {
+function ye(e, a) {
   const { width: t, height: r } = j(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    Ve,
+    je,
     {
       ref: a == null ? void 0 : a.playerRef,
       width: t,
@@ -741,10 +742,10 @@ function oe(e, a) {
     }
   );
 }
-function ea(e, a) {
+function ra(e, a) {
   const { width: t, height: r } = j(e.preset, e.width, e.height);
   return /* @__PURE__ */ l(
-    We,
+    Ve,
     {
       width: t,
       height: r,
@@ -754,22 +755,22 @@ function ea(e, a) {
       showHUD: e.showHud,
       showNotes: e.showNotes,
       colorScheme: a == null ? void 0 : a.colorScheme,
-      children: e.slides.map((i, n) => ta(i, n))
+      children: e.slides.map((i, n) => ia(i, n))
     }
   );
 }
-function ta(e, a) {
+function ia(e, a) {
   var t;
-  return /* @__PURE__ */ l(Be, { title: e.title, notes: e.notes, background: u(e.background), children: (t = e.children) == null ? void 0 : t.map((r, i) => w(r, i)) }, a);
+  return /* @__PURE__ */ l(qe, { title: e.title, notes: e.notes, background: u(e.background), children: (t = e.children) == null ? void 0 : t.map((r, i) => w(r, i)) }, a);
 }
 function w(e, a) {
   var t, r, i, n;
   switch (e.type) {
     case "sequence":
-      return /* @__PURE__ */ l(ot, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((s, c) => w(s, c)) }, a);
+      return /* @__PURE__ */ l(yt, { from: e.from, durationInFrames: e.durationInFrames, name: e.name, children: e.children.map((s, c) => w(s, c)) }, a);
     case "group":
       return /* @__PURE__ */ l(
-        gt,
+        mt,
         {
           fadeIn: e.fadeIn,
           fadeOut: e.fadeOut,
@@ -785,7 +786,7 @@ function w(e, a) {
       );
     case "bezierCurve":
       return /* @__PURE__ */ l(
-        ft,
+        gt,
         {
           x1: e.x1,
           y1: e.y1,
@@ -814,7 +815,7 @@ function w(e, a) {
       );
     case "circle":
       return /* @__PURE__ */ l(
-        ht,
+        ot,
         {
           cx: e.cx,
           cy: e.cy,
@@ -837,7 +838,7 @@ function w(e, a) {
       );
     case "line":
       return /* @__PURE__ */ l(
-        ut,
+        ft,
         {
           x1: e.x1,
           y1: e.y1,
@@ -861,7 +862,7 @@ function w(e, a) {
       );
     case "arrow":
       return /* @__PURE__ */ l(
-        lt,
+        ht,
         {
           x1: e.x1,
           y1: e.y1,
@@ -886,7 +887,7 @@ function w(e, a) {
       );
     case "rect":
       return /* @__PURE__ */ l(
-        ct,
+        ut,
         {
           x: e.x,
           y: e.y,
@@ -913,7 +914,7 @@ function w(e, a) {
       );
     case "polygon":
       return /* @__PURE__ */ l(
-        st,
+        lt,
         {
           points: e.points,
           fill: u(e.fill),
@@ -960,9 +961,10 @@ function w(e, a) {
       );
     case "image":
       return /* @__PURE__ */ l(
-        nt,
+        ct,
         {
           src: e.src,
+          imageRef: e.ref,
           x: e.x,
           y: e.y,
           width: e.width,
@@ -984,7 +986,7 @@ function w(e, a) {
       );
     case "axes":
       return /* @__PURE__ */ l(
-        it,
+        st,
         {
           domain: e.domain,
           range: e.range,
@@ -1012,7 +1014,7 @@ function w(e, a) {
     case "functionPlot": {
       let s;
       try {
-        s = It(e.fn);
+        s = Ct(e.fn);
       } catch {
         return /* @__PURE__ */ l(
           U,
@@ -1028,7 +1030,7 @@ function w(e, a) {
         );
       }
       return /* @__PURE__ */ l(
-        rt,
+        nt,
         {
           fn: (c) => s({ x: c }),
           domain: e.domain,
@@ -1051,7 +1053,7 @@ function w(e, a) {
     }
     case "vector":
       return /* @__PURE__ */ l(
-        at,
+        it,
         {
           from: e.from,
           to: e.to,
@@ -1078,7 +1080,7 @@ function w(e, a) {
     case "vectorField": {
       let s;
       try {
-        s = St(e.fn);
+        s = Ot(e.fn);
       } catch {
         return /* @__PURE__ */ l(
           U,
@@ -1094,7 +1096,7 @@ function w(e, a) {
         );
       }
       return /* @__PURE__ */ l(
-        tt,
+        rt,
         {
           fn: (c, y) => s({ x: c, y }),
           domain: e.domain,
@@ -1121,7 +1123,7 @@ function w(e, a) {
     }
     case "matrix":
       return /* @__PURE__ */ l(
-        et,
+        at,
         {
           values: e.values,
           x: e.x,
@@ -1143,7 +1145,7 @@ function w(e, a) {
       );
     case "graph":
       return /* @__PURE__ */ l(
-        Ze,
+        tt,
         {
           nodes: e.nodes,
           edges: e.edges,
@@ -1166,7 +1168,7 @@ function w(e, a) {
       );
     case "latex":
       return /* @__PURE__ */ l(
-        Ye,
+        et,
         {
           expression: e.expression,
           x: e.x,
@@ -1187,7 +1189,7 @@ function w(e, a) {
       );
     case "barChart":
       return /* @__PURE__ */ l(
-        Je,
+        Ze,
         {
           bars: e.bars,
           x: e.x,
@@ -1213,16 +1215,16 @@ function w(e, a) {
         a
       );
     case "fadeIn":
-      return /* @__PURE__ */ l(Xe, { duration: e.duration, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
+      return /* @__PURE__ */ l(Ye, { duration: e.duration, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "fadeOut":
-      return /* @__PURE__ */ l(Qe, { duration: e.duration, totalFrames: e.totalFrames, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
+      return /* @__PURE__ */ l(Je, { duration: e.duration, totalFrames: e.totalFrames, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "draw":
-      return /* @__PURE__ */ l(Ke, { duration: e.duration, pathLength: e.pathLength, easing: f(e.easing), children: w(e.children[0], 0) }, a);
+      return /* @__PURE__ */ l(Xe, { duration: e.duration, pathLength: e.pathLength, easing: f(e.easing), children: w(e.children[0], 0) }, a);
     case "write":
-      return /* @__PURE__ */ l(Ge, { duration: e.duration, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
+      return /* @__PURE__ */ l(Qe, { duration: e.duration, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "transform":
       return /* @__PURE__ */ l(
-        He,
+        Ke,
         {
           duration: e.duration,
           easing: f(e.easing),
@@ -1236,7 +1238,7 @@ function w(e, a) {
       );
     case "morph":
       return /* @__PURE__ */ l(
-        Ue,
+        Ge,
         {
           duration: e.duration,
           easing: f(e.easing),
@@ -1251,33 +1253,33 @@ function w(e, a) {
         a
       );
     case "stagger":
-      return /* @__PURE__ */ l(qe, { staggerDelay: e.staggerDelay, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
+      return /* @__PURE__ */ l(He, { staggerDelay: e.staggerDelay, easing: f(e.easing), children: e.children.map((s, c) => w(s, c)) }, a);
     case "parallel":
-      return /* @__PURE__ */ l(je, { children: e.children.map((s, c) => w(s, c)) }, a);
+      return /* @__PURE__ */ l(Ue, { children: e.children.map((s, c) => w(s, c)) }, a);
     case "scene":
       return /* @__PURE__ */ l(K.Fragment, { children: J(e) }, a);
     case "player":
-      return /* @__PURE__ */ l(K.Fragment, { children: oe(e) }, a);
+      return /* @__PURE__ */ l(K.Fragment, { children: ye(e) }, a);
     default:
       return null;
   }
 }
-function aa(e) {
+function na(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 ra() {
+function sa() {
   return typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
-function ia() {
+function ca() {
   return !0;
 }
-function na() {
-  return vt(aa, ra, ia);
+function la() {
+  return St(na, sa, ca);
 }
-class sa extends K.Component {
+class ua extends K.Component {
   constructor() {
     super(...arguments), this.state = { error: null };
   }
@@ -1303,42 +1305,42 @@ class sa extends K.Component {
     ) : this.props.children;
   }
 }
-const da = xt(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, controls: c, autoPlay: y, loop: d, fitToContainer: S, onPlayStateChange: b, onRenderError: g, fallback: x, onError: C }, O) {
-  const $ = dt(null), _ = na();
-  wt(O, () => ({
+const ka = vt(function({ dsl: a, className: t, style: r, theme: i, colorScheme: n, poster: s, controls: c, autoPlay: y, loop: d, fitToContainer: S, onPlayStateChange: b, onRenderError: o, fallback: x, onError: O, imageResolver: $ }, W) {
+  const C = kt(null), ee = la();
+  It(W, () => ({
     getSvgElement: () => {
-      var o;
-      return ((o = $.current) == null ? void 0 : o.getSvgElement()) ?? null;
+      var g;
+      return ((g = C.current) == null ? void 0 : g.getSvgElement()) ?? null;
     },
-    seekToFrame: (o) => {
-      var F;
-      return (F = $.current) == null ? void 0 : F.seekToFrame(o);
+    seekToFrame: (g) => {
+      var T;
+      return (T = C.current) == null ? void 0 : T.seekToFrame(g);
     },
     getTotalFrames: () => {
-      var o;
-      return ((o = $.current) == null ? void 0 : o.getTotalFrames()) ?? 0;
+      var g;
+      return ((g = C.current) == null ? void 0 : g.getTotalFrames()) ?? 0;
     },
     play: () => {
-      var o;
-      return (o = $.current) == null ? void 0 : o.play();
+      var g;
+      return (g = C.current) == null ? void 0 : g.play();
     },
     pause: () => {
-      var o;
-      return (o = $.current) == null ? void 0 : o.pause();
+      var g;
+      return (g = C.current) == null ? void 0 : g.pause();
     },
     isPlaying: () => {
-      var o;
-      return ((o = $.current) == null ? void 0 : o.isPlaying()) ?? !1;
+      var g;
+      return ((g = C.current) == null ? void 0 : g.isPlaying()) ?? !1;
     }
   }));
-  const ee = le(a);
-  if (!ee.valid) {
-    const o = ee.errors.filter((k) => k.severity === "error").map((k) => ({ path: k.path, message: k.message }));
-    C == null || C(o);
-    const F = /* @__PURE__ */ new Map();
-    for (const k of o) {
-      const D = k.path.split("."), N = D.length > 1 ? D.slice(0, -1).join(".") : k.path, L = F.get(N) ?? [];
-      L.push(k), F.set(N, L);
+  const te = he(a);
+  if (!te.valid) {
+    const g = te.errors.filter((k) => k.severity === "error").map((k) => ({ path: k.path, message: k.message }));
+    O == null || O(g);
+    const T = /* @__PURE__ */ new Map();
+    for (const k of g) {
+      const _ = k.path.split("."), D = _.length > 1 ? _.slice(0, -1).join(".") : k.path, L = T.get(D) ?? [];
+      L.push(k), T.set(D, L);
     }
     return /* @__PURE__ */ E(
       "div",
@@ -1349,20 +1351,20 @@ const da = xt(function({ dsl: a, className: t, style: r, theme: i, colorScheme:
         children: [
           /* @__PURE__ */ E("strong", { children: [
             "Elucim DSL Validation Errors (",
-            o.length,
+            g.length,
             "):"
           ] }),
-          [...F.entries()].map(([k, D]) => /* @__PURE__ */ E("details", { open: !0, style: { marginTop: 8 }, children: [
+          [...T.entries()].map(([k, _]) => /* @__PURE__ */ E("details", { open: !0, style: { marginTop: 8 }, children: [
             /* @__PURE__ */ E("summary", { style: { cursor: "pointer", fontWeight: "bold" }, children: [
               k,
               " (",
-              D.length,
+              _.length,
               ")"
             ] }),
-            /* @__PURE__ */ l("ul", { style: { margin: "4px 0", paddingLeft: 20 }, children: D.map((N, L) => /* @__PURE__ */ E("li", { children: [
-              /* @__PURE__ */ l("code", { style: { color: "var(--elucim-warning, #ffa07a)" }, children: N.path }),
+            /* @__PURE__ */ l("ul", { style: { margin: "4px 0", paddingLeft: 20 }, children: _.map((D, L) => /* @__PURE__ */ E("li", { children: [
+              /* @__PURE__ */ l("code", { style: { color: "var(--elucim-warning, #ffa07a)" }, children: D.path }),
               ": ",
-              N.message
+              D.message
             ] }, L)) })
           ] }, k)),
           /* @__PURE__ */ E("details", { style: { marginTop: 12 }, children: [
@@ -1373,22 +1375,22 @@ const da = xt(function({ dsl: a, className: t, style: r, theme: i, colorScheme:
       }
     );
   }
-  const me = mt(i);
-  let te = {};
-  n && (te = (n === "auto" ? _ : n === "dark") ? yt : bt);
-  const q = s !== void 0 ? ca(s, a) : void 0, ye = n ? n === "auto" ? _ ? "dark" : "light" : n : void 0, be = ge(a.root, {
+  const be = bt(i);
+  let ae = {};
+  n && (ae = (n === "auto" ? ee : n === "dark") ? dt : wt);
+  const q = s !== void 0 ? ha(s, a) : void 0, xe = n ? n === "auto" ? ee ? "dark" : "light" : n : void 0, de = me(a.root, {
     frame: q == null ? void 0 : q.frame,
-    playerRef: $,
-    colorScheme: ye,
+    playerRef: C,
+    colorScheme: xe,
     controls: c,
     autoPlay: y,
     loop: d,
     fitToContainer: S,
     onPlayStateChange: b
-  });
-  return /* @__PURE__ */ l("div", { className: t, style: { ...te, ...me, ...r }, "data-testid": "dsl-root", children: /* @__PURE__ */ l(sa, { onRenderError: g, fallback: x, children: be }) });
+  }), re = /* @__PURE__ */ l("div", { className: t, style: { ...ae, ...be, ...r }, "data-testid": "dsl-root", children: /* @__PURE__ */ l(ua, { onRenderError: o, fallback: x, children: de }) });
+  return $ ? /* @__PURE__ */ l(xt, { resolver: $, children: re }) : re;
 });
-function ca(e, a) {
+function ha(e, a) {
   if (e === "first") return { frame: 0 };
   if (e === "last") {
     const r = a.root.durationInFrames ?? 1;
@@ -1396,8 +1398,8 @@ function ca(e, a) {
   }
   return { frame: e };
 }
-function la(e, a, t) {
-  const r = le(e);
+function fa(e, a, t) {
+  const r = he(e);
   if (!r.valid) {
     const s = r.errors.filter((c) => c.severity === "error");
     throw new Error(
@@ -1408,18 +1410,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 = ge(i, { frame: a });
-  return kt(n);
+  const n = me(i, { frame: a });
+  return $t(n);
 }
-function se(e) {
+function le(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 wa(e, a, t) {
-  const r = (t == null ? void 0 : t.scale) ?? 2, n = la(e, a, {
+async function Ia(e, a, t) {
+  const r = (t == null ? void 0 : t.scale) ?? 2, n = fa(e, a, {
     width: t == null ? void 0 : t.width,
     height: t == null ? void 0 : t.height
   }).match(/<svg[\s\S]*<\/svg>/);
@@ -1428,24 +1430,24 @@ async function wa(e, a, t) {
   let s = n[0];
   const c = s.match(/viewBox="0 0 (\d+(?:\.\d+)?) (\d+(?:\.\d+)?)"/), y = (t == null ? void 0 : t.width) ?? (c ? parseFloat(c[1]) : 800), d = (t == null ? void 0 : t.height) ?? (c ? parseFloat(c[2]) : 600), S = Math.round(y * r), b = Math.round(d * r);
   s = s.replace(/width="100%"/, `width="${S}"`).replace(/height="100%"/, `height="${b}"`), s.includes("xmlns=") || (s = s.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"')), s = s.replace(/style="[^"]*position:\s*absolute[^"]*"/, "");
-  let g = e.root.background ?? "#ffffff";
-  g.startsWith("$") && (g = u(g) ?? "#ffffff"), g = se(g);
-  const x = `<rect width="${y}" height="${d}" fill="${g}"/>`;
-  s = s.replace(/>/, `>${x}`), s = se(s);
-  const O = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(s)))}`;
+  let o = e.root.background ?? "#ffffff";
+  o.startsWith("$") && (o = u(o) ?? "#ffffff"), o = le(o);
+  const x = `<rect width="${y}" height="${d}" fill="${o}"/>`;
+  s = s.replace(/>/, `>${x}`), s = le(s);
+  const $ = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(s)))}`;
   if (typeof Image < "u" && typeof document < "u")
-    return ha(O, S, b);
+    return ga($, S, b);
   if (typeof OffscreenCanvas < "u")
-    return ua(O, S, b);
+    return oa($, S, b);
   throw new Error("renderToPng requires Image+document (browser) or OffscreenCanvas (worker)");
 }
-async function ua(e, a, t) {
+async function oa(e, a, t) {
   const i = await (await fetch(e)).blob(), n = await createImageBitmap(i, { resizeWidth: a, resizeHeight: t }), s = new OffscreenCanvas(a, t);
   s.getContext("2d").drawImage(n, 0, 0, a, t), n.close();
   const d = await (await s.convertToBlob({ type: "image/png" })).arrayBuffer();
   return new Uint8Array(d);
 }
-function ha(e, a, t) {
+function ga(e, a, t) {
   return new Promise((r, i) => {
     const n = new Image();
     n.onload = () => {
@@ -1460,7 +1462,7 @@ function ha(e, a, t) {
     }, n.onerror = () => i(new Error("Failed to load SVG data URI for PNG render")), n.src = e;
   });
 }
-class fa {
+class ma {
   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;
   }
@@ -1681,12 +1683,12 @@ class fa {
   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, y = (this._width - c) / 2;
     t == null || t.fadeIn;
-    const d = a.map((b, g) => {
-      const x = y + g * (r + n);
+    const d = a.map((b, o) => {
+      const x = y + o * (r + n);
       return { x, y: s, w: r, h: i, cx: x + r / 2, cy: s + i / 2 };
-    }), S = a.map((b, g) => {
-      var $, _;
-      const x = d[g], C = (($ = t == null ? void 0 : t.colors) == null ? void 0 : $[g]) ?? this.theme.boxFill, O = ((_ = t == null ? void 0 : t.strokeColors) == null ? void 0 : _[g]) ?? this.theme.boxStroke;
+    }), S = a.map((b, o) => {
+      var W, C;
+      const x = d[o], O = ((W = t == null ? void 0 : t.colors) == null ? void 0 : W[o]) ?? this.theme.boxFill, $ = ((C = t == null ? void 0 : t.strokeColors) == null ? void 0 : C[o]) ?? this.theme.boxStroke;
       return {
         type: "group",
         children: [
@@ -1696,8 +1698,8 @@ class fa {
             y: x.y,
             width: r,
             height: i,
-            fill: C,
-            stroke: O,
+            fill: O,
+            stroke: $,
             strokeWidth: 1.5,
             rx: 6
           },
@@ -1727,29 +1729,29 @@ class fa {
     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 y = a.map((S, b) => {
-      const g = s + b * (i + n);
-      return { x: c - r / 2, y: g, w: r, h: i, cx: c, cy: g + i / 2 };
+      const o = s + b * (i + n);
+      return { x: c - r / 2, y: o, w: r, h: i, cx: c, cy: o + i / 2 };
     }), d = a.map((S, b) => {
-      var C, O;
-      const g = y[b], x = ((C = t == null ? void 0 : t.colors) == null ? void 0 : C[b]) ?? this.theme.boxFill;
+      var O, $;
+      const o = y[b], x = ((O = t == null ? void 0 : t.colors) == null ? void 0 : O[b]) ?? this.theme.boxFill;
       return {
         type: "group",
         children: [
           {
             type: "rect",
-            x: g.x,
-            y: g.y,
+            x: o.x,
+            y: o.y,
             width: r,
             height: i,
             fill: x,
-            stroke: (O = t == null ? void 0 : t.colors) != null && O[b] ? t.colors[b] : this.theme.boxStroke,
+            stroke: ($ = t == null ? void 0 : t.colors) != null && $[b] ? t.colors[b] : this.theme.boxStroke,
             strokeWidth: 1.5,
             rx: 6
           },
           {
             type: "text",
-            x: g.cx,
-            y: g.cy + 5,
+            x: o.cx,
+            y: o.cy + 5,
             content: S,
             fontSize: (t == null ? void 0 : t.fontSize) ?? 13,
             fill: (t == null ? void 0 : t.textColor) ?? this.theme.foreground,
@@ -1845,7 +1847,7 @@ class fa {
     return { elements: this.elements, durationInFrames: a };
   }
 }
-const ga = {
+const ya = {
   foreground: "#c8d6e5",
   background: "#0a0a1e",
   title: "#e0e7ff",
@@ -1863,7 +1865,7 @@ const ga = {
   boxFill: "rgba(79,195,247,0.12)",
   boxStroke: "#4fc3f7",
   palette: ["#4fc3f7", "#a78bfa", "#f472b6", "#34d399", "#fbbf24", "#fb923c", "#6366f1", "#22d3ee"]
-}, va = {
+}, Sa = {
   foreground: "#334155",
   background: "#f8fafc",
   title: "#1e293b",
@@ -1882,9 +1884,9 @@ const ga = {
   boxStroke: "#2563eb",
   palette: ["#2563eb", "#7c3aed", "#db2777", "#16a34a", "#d97706", "#ea580c", "#4f46e5", "#0891b2"]
 };
-class oa {
+class ba {
   constructor(a, t, r) {
-    this._slides = [], this._title = a, this._theme = t ?? ga, this._opts = {
+    this._slides = [], this._title = a, this._theme = t ?? ya, this._opts = {
       width: 900,
       height: 640,
       fps: 30,
@@ -1902,7 +1904,7 @@ class oa {
   /** Build the final ElucimDocument */
   build() {
     const a = this._slides.map((r) => {
-      const i = new fa(
+      const i = new ma(
         this._theme,
         this._opts.fps,
         this._opts.width,
@@ -1948,36 +1950,38 @@ class oa {
     return JSON.stringify(this.build(), null, a ? 2 : void 0);
   }
 }
-function ka(e, a, t) {
-  return new oa(e, a, t);
+function $a(e, a, t) {
+  return new ba(e, a, t);
 }
 export {
-  $a as DARK_THEME,
-  Ca as DARK_THEME_VARS,
-  da as DslRenderer,
-  Oa as LIGHT_THEME,
-  Aa as LIGHT_THEME_VARS,
-  oa as PresentationBuilder,
-  pa as SEMANTIC_TOKENS,
-  fa as SlideBuilder,
-  za as TOKEN_NAMES,
-  It as compileExpression,
-  St as compileVectorExpression,
-  ga as darkTheme,
-  va as lightTheme,
-  ka as presentation,
+  Aa as DARK_THEME,
+  pa as DARK_THEME_VARS,
+  ka as DslRenderer,
+  za as ImageResolverProvider,
+  Ea as LIGHT_THEME,
+  Ra as LIGHT_THEME_VARS,
+  ba as PresentationBuilder,
+  Pa as SEMANTIC_TOKENS,
+  ma as SlideBuilder,
+  Ta as TOKEN_NAMES,
+  Ct as compileExpression,
+  Ot as compileVectorExpression,
+  ya as darkTheme,
+  Sa as lightTheme,
+  $a as presentation,
   w as renderElement,
-  oe as renderPlayer,
-  ea as renderPresentation,
-  ge as renderRoot,
+  ye as renderPlayer,
+  ra as renderPresentation,
+  me as renderRoot,
   J as renderScene,
-  ta as renderSlide,
-  wa as renderToPng,
-  la as renderToSvgString,
-  Ea as resolveColor,
+  ia as renderSlide,
+  Ia as renderToPng,
+  fa as renderToSvgString,
+  Fa as resolveColor,
   f as resolveEasing,
-  se as stripCssFunctions,
-  Ra as themeToVars,
-  le as validate,
-  ce as validateExpression
+  le as stripCssFunctions,
+  Ma as themeToVars,
+  _a as useImageResolver,
+  he as validate,
+  ue as validateExpression
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elucim/dsl",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "JSON/YAML DSL for declarative Elucim animations — define visualizations without writing React code",
   "type": "module",
   "license": "MIT",
@@ -58,7 +58,7 @@
     "vite": "^5.4.0",
     "vite-plugin-dts": "^4.0.0",
     "vitest": "^2.0.0",
-    "@elucim/core": "0.13.1"
+    "@elucim/core": "0.14.0"
   },
   "scripts": {
     "dev": "vite build --watch",