@constela/runtime 2.0.8 → 2.0.10

package/dist/index.d.ts

@@ -509,6 +509,7 @@ interface RenderContext {
         query: Record<string, string>;
         path: string;
     };
+    styles?: Record<string, StylePreset>;
 }
 declare function render(node: CompiledNode, ctx: RenderContext): Node;
 

package/dist/index.js

@@ -974,6 +974,7 @@ var GLOBAL_FUNCTIONS = {
   getRadarAxes: (labels, cx, cy, radius) => getRadarAxes(labels, cx, cy, radius),
   // Chart helpers - Utilities
   getChartBounds: (data, valueKey) => getChartBounds(data, valueKey),
+  scaleChartY: (value, boundsMin, boundsMax, height, paddingTop, paddingBottom) => scaleChartY(value, boundsMin, boundsMax, height, paddingTop, paddingBottom),
   generateTicks: (min, max, count) => generateTicks(min, max, count),
   // Chart helpers - Data aggregation
   binData: (data, valueKey, binCount) => binData(data, valueKey, binCount),
@@ -1330,6 +1331,20 @@ function scaleValue(value, domainMin, domainMax, rangeMin, rangeMax) {
   const normalized = (value - domainMin) / (domainMax - domainMin);
   return rangeMin + normalized * (rangeMax - rangeMin);
 }
+function scaleChartY(value, boundsMin, boundsMax, height, paddingTop, paddingBottom) {
+  if (typeof value !== "number" || typeof boundsMin !== "number" || typeof boundsMax !== "number" || typeof height !== "number" || typeof paddingTop !== "number" || typeof paddingBottom !== "number") {
+    return void 0;
+  }
+  const drawableHeight = height - paddingTop - paddingBottom;
+  if (drawableHeight <= 0) {
+    return paddingTop;
+  }
+  if (boundsMax === boundsMin) {
+    return paddingTop + drawableHeight / 2;
+  }
+  const normalized = (value - boundsMin) / (boundsMax - boundsMin);
+  return paddingTop + drawableHeight * (1 - normalized);
+}
 function getBarDimensions(data, index, width, height, gap, orientation) {
   if (!Array.isArray(data) || data.length === 0) {
     return void 0;
@@ -15171,7 +15186,7 @@ function renderElement(node, ctx) {
         }
       } else {
         const cleanup = createEffect(() => {
-          const value = evaluate(propValue, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route } });
+          const value = evaluate(propValue, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route }, ...ctx.styles && { styles: ctx.styles } });
           applyProp(el, propName, value, useSvgNamespace);
         });
         ctx.cleanups?.push(cleanup);
@@ -15226,7 +15241,7 @@ function applyProp(el, propName, value, isSvg = false) {
 function renderText(node, ctx) {
   const textNode = document.createTextNode("");
   const cleanup = createEffect(() => {
-    const value = evaluate(node.value, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route } });
+    const value = evaluate(node.value, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route }, ...ctx.styles && { styles: ctx.styles } });
     textNode.textContent = formatValue(value);
   });
   ctx.cleanups?.push(cleanup);
@@ -15247,7 +15262,7 @@ function renderIf(node, ctx) {
   let currentBranch = "none";
   let branchCleanups = [];
   const effectCleanup = createEffect(() => {
-    const condition = evaluate(node.condition, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route } });
+    const condition = evaluate(node.condition, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route }, ...ctx.styles && { styles: ctx.styles } });
     const shouldShowThen = Boolean(condition);
     const newBranch = shouldShowThen ? "then" : node.else ? "else" : "none";
     if (newBranch !== currentBranch) {
@@ -15325,7 +15340,7 @@ function renderEach(node, ctx) {
   let currentNodes = [];
   let itemCleanups = [];
   const effectCleanup = createEffect(() => {
-    const items = evaluate(node.items, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route } });
+    const items = evaluate(node.items, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route }, ...ctx.styles && { styles: ctx.styles } });
     if (!hasKey || !node.key) {
       for (const cleanup of itemCleanups) {
         cleanup();
@@ -15384,7 +15399,8 @@ function renderEach(node, ctx) {
           locals: tempLocals,
           ...ctx.refs && { refs: ctx.refs },
           ...ctx.imports && { imports: ctx.imports },
-          ...ctx.route && { route: ctx.route }
+          ...ctx.route && { route: ctx.route },
+          ...ctx.styles && { styles: ctx.styles }
         });
         if (seenKeys.has(keyValue)) {
           if (typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production") {
@@ -15476,7 +15492,7 @@ function renderMarkdown(node, ctx) {
   const container = document.createElement("div");
   container.className = "constela-markdown";
   const cleanup = createEffect(() => {
-    const content = evaluate(node.content, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route } });
+    const content = evaluate(node.content, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route }, ...ctx.styles && { styles: ctx.styles } });
     const html6 = parseMarkdown(String(content ?? ""));
     container.innerHTML = html6;
   });
@@ -15491,8 +15507,8 @@ function renderCode(node, ctx) {
   container.appendChild(pre);
   pre.appendChild(codeEl);
   const cleanup = createEffect(() => {
-    const language = String(evaluate(node.language, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route } }) ?? "plaintext");
-    const content = String(evaluate(node.content, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route } }) ?? "");
+    const language = String(evaluate(node.language, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route }, ...ctx.styles && { styles: ctx.styles } }) ?? "plaintext");
+    const content = String(evaluate(node.content, { state: ctx.state, locals: ctx.locals, ...ctx.refs && { refs: ctx.refs }, ...ctx.imports && { imports: ctx.imports }, ...ctx.route && { route: ctx.route }, ...ctx.styles && { styles: ctx.styles } }) ?? "");
     codeEl.className = `language-${language || "plaintext"}`;
     codeEl.dataset["language"] = language || "plaintext";
     container.dataset["language"] = language || "plaintext";
@@ -15557,6 +15573,7 @@ function createLocalStateStore(stateDefs, ctx) {
       };
       if (ctx.route) evalCtx.route = ctx.route;
       if (ctx.imports) evalCtx.imports = ctx.imports;
+      if (ctx.styles) evalCtx.styles = ctx.styles;
       initialValue = evaluate(initial, evalCtx);
     } else {
       initialValue = initial;
@@ -15678,7 +15695,9 @@ function createApp(program, mount) {
     actions,
     locals: {},
     cleanups,
-    refs
+    refs,
+    ...program.importData && { imports: program.importData },
+    ...program.styles && { styles: program.styles }
   };
   const rootNode = render(program.view, ctx);
   mount.appendChild(rootNode);
@@ -15902,6 +15921,7 @@ function createLocalStateStore2(stateDefs, ctx) {
       };
       if (ctx.route) evalCtx.route = ctx.route;
       if (ctx.imports) evalCtx.imports = ctx.imports;
+      if (ctx.styles) evalCtx.styles = ctx.styles;
       initialValue = evaluate(initial, evalCtx);
     } else {
       initialValue = initial;
@@ -16007,7 +16027,8 @@ function hydrateApp(options) {
     cleanups,
     refs,
     ...program.importData && { imports: program.importData },
-    ...route && { route }
+    ...route && { route },
+    ...program.styles && { styles: program.styles }
   };
   const firstChild = container.firstElementChild;
   if (firstChild) {
@@ -16155,7 +16176,8 @@ function hydrateElement(node, el, ctx) {
             state: ctx.state,
             locals: ctx.locals,
             ...ctx.imports && { imports: ctx.imports },
-            ...ctx.route && { route: ctx.route }
+            ...ctx.route && { route: ctx.route },
+            ...ctx.styles && { styles: ctx.styles }
           });
           applyProp2(el, propName, value);
         });
@@ -16225,7 +16247,8 @@ function hydrateChildren(children, parent, ctx) {
         state: ctx.state,
         locals: ctx.locals,
         ...ctx.imports && { imports: ctx.imports },
-        ...ctx.route && { route: ctx.route }
+        ...ctx.route && { route: ctx.route },
+        ...ctx.styles && { styles: ctx.styles }
       });
       const clientBranch = Boolean(clientCondition) ? "then" : ifNode.else ? "else" : "none";
       const ssrInfo = ifMarkerIndex < ifMarkers.length ? ifMarkers[ifMarkerIndex] : null;
@@ -16258,7 +16281,8 @@ function hydrateChildren(children, parent, ctx) {
         state: ctx.state,
         locals: ctx.locals,
         ...ctx.imports && { imports: ctx.imports },
-        ...ctx.route && { route: ctx.route }
+        ...ctx.route && { route: ctx.route },
+        ...ctx.styles && { styles: ctx.styles }
       });
       const itemCount = Array.isArray(items) ? items.length : 0;
       if (itemCount > 0) {
@@ -16287,7 +16311,8 @@ function hydrateTextGroup(nodes, textNode, ctx) {
         state: ctx.state,
         locals: ctx.locals,
         ...ctx.imports && { imports: ctx.imports },
-        ...ctx.route && { route: ctx.route }
+        ...ctx.route && { route: ctx.route },
+        ...ctx.styles && { styles: ctx.styles }
       });
       combinedText += formatValue2(value);
     }
@@ -16328,7 +16353,8 @@ function hydrateText(node, textNode, ctx) {
       state: ctx.state,
       locals: ctx.locals,
       ...ctx.imports && { imports: ctx.imports },
-      ...ctx.route && { route: ctx.route }
+      ...ctx.route && { route: ctx.route },
+      ...ctx.styles && { styles: ctx.styles }
     });
     textNode.textContent = formatValue2(value);
   });
@@ -16358,7 +16384,8 @@ function hydrateIf(node, initialDomNode, ctx, branchInfo) {
       state: ctx.state,
       locals: ctx.locals,
       ...ctx.imports && { imports: ctx.imports },
-      ...ctx.route && { route: ctx.route }
+      ...ctx.route && { route: ctx.route },
+      ...ctx.styles && { styles: ctx.styles }
     });
     currentBranch = Boolean(initialCondition) ? "then" : node.else ? "else" : "none";
   }
@@ -16380,7 +16407,8 @@ function hydrateIf(node, initialDomNode, ctx, branchInfo) {
       state: ctx.state,
       locals: ctx.locals,
       ...ctx.imports && { imports: ctx.imports },
-      ...ctx.route && { route: ctx.route }
+      ...ctx.route && { route: ctx.route },
+      ...ctx.styles && { styles: ctx.styles }
     });
     const shouldShowThen = Boolean(condition);
     const newBranch = shouldShowThen ? "then" : node.else ? "else" : "none";
@@ -16405,7 +16433,8 @@ function hydrateIf(node, initialDomNode, ctx, branchInfo) {
         actions: ctx.actions,
         locals: ctx.locals,
         cleanups: localCleanups,
-        ...ctx.imports && { imports: ctx.imports }
+        ...ctx.imports && { imports: ctx.imports },
+        ...ctx.styles && { styles: ctx.styles }
       };
       if (newBranch === "then") {
         currentNode = render(node.then, branchCtx);
@@ -16446,7 +16475,8 @@ function hydrateIfWithoutDom(node, parent, nextSibling, ctx, branchInfo) {
       state: ctx.state,
       locals: ctx.locals,
       ...ctx.imports && { imports: ctx.imports },
-      ...ctx.route && { route: ctx.route }
+      ...ctx.route && { route: ctx.route },
+      ...ctx.styles && { styles: ctx.styles }
     });
     const shouldShowThen = Boolean(condition);
     const newBranch = shouldShowThen ? "then" : node.else ? "else" : "none";
@@ -16472,7 +16502,8 @@ function hydrateIfWithoutDom(node, parent, nextSibling, ctx, branchInfo) {
         locals: ctx.locals,
         cleanups: localCleanups,
         ...ctx.imports && { imports: ctx.imports },
-        ...ctx.route && { route: ctx.route }
+        ...ctx.route && { route: ctx.route },
+        ...ctx.styles && { styles: ctx.styles }
       };
       if (newBranch === "then") {
         currentNode = render(node.then, branchCtx);
@@ -16512,7 +16543,8 @@ function hydrateEachEmpty(node, parent, insertBefore, ctx) {
       state: ctx.state,
       locals: ctx.locals,
       ...ctx.imports && { imports: ctx.imports },
-      ...ctx.route && { route: ctx.route }
+      ...ctx.route && { route: ctx.route },
+      ...ctx.styles && { styles: ctx.styles }
     });
     if (!hasKey || !node.key) {
       for (const cleanup of itemCleanups) {
@@ -16540,7 +16572,8 @@ function hydrateEachEmpty(node, parent, insertBefore, ctx) {
             actions: ctx.actions,
             locals: itemLocals,
             cleanups: localCleanups,
-            ...ctx.imports && { imports: ctx.imports }
+            ...ctx.imports && { imports: ctx.imports },
+            ...ctx.styles && { styles: ctx.styles }
           };
           const itemNode = render(node.body, itemCtx);
           currentNodes.push(itemNode);
@@ -16573,7 +16606,8 @@ function hydrateEachEmpty(node, parent, insertBefore, ctx) {
           state: ctx.state,
           locals: tempLocals,
           ...ctx.imports && { imports: ctx.imports },
-          ...ctx.route && { route: ctx.route }
+          ...ctx.route && { route: ctx.route },
+          ...ctx.styles && { styles: ctx.styles }
         });
         if (seenKeys.has(keyValue)) {
           if (typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production") {
@@ -16603,7 +16637,8 @@ function hydrateEachEmpty(node, parent, insertBefore, ctx) {
             actions: ctx.actions,
             locals: reactiveLocals,
             cleanups: localCleanups,
-            ...ctx.imports && { imports: ctx.imports }
+            ...ctx.imports && { imports: ctx.imports },
+            ...ctx.styles && { styles: ctx.styles }
           };
           const itemNode = render(node.body, itemCtx);
           const newState = {
@@ -16665,7 +16700,8 @@ function hydrateEach(node, firstItemDomNode, ctx) {
     state: ctx.state,
     locals: ctx.locals,
     ...ctx.imports && { imports: ctx.imports },
-    ...ctx.route && { route: ctx.route }
+    ...ctx.route && { route: ctx.route },
+    ...ctx.styles && { styles: ctx.styles }
   });
   let isFirstRun = true;
   if (Array.isArray(initialItems) && initialItems.length > 0) {
@@ -16683,7 +16719,8 @@ function hydrateEach(node, firstItemDomNode, ctx) {
           state: ctx.state,
           locals: tempLocals,
           ...ctx.imports && { imports: ctx.imports },
-          ...ctx.route && { route: ctx.route }
+          ...ctx.route && { route: ctx.route },
+          ...ctx.styles && { styles: ctx.styles }
         });
         if (seenKeys.has(keyValue)) {
           if (typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production") {
@@ -16755,7 +16792,8 @@ function hydrateEach(node, firstItemDomNode, ctx) {
       state: ctx.state,
       locals: ctx.locals,
       ...ctx.imports && { imports: ctx.imports },
-      ...ctx.route && { route: ctx.route }
+      ...ctx.route && { route: ctx.route },
+      ...ctx.styles && { styles: ctx.styles }
     });
     if (isFirstRun) {
       isFirstRun = false;
@@ -16787,7 +16825,8 @@ function hydrateEach(node, firstItemDomNode, ctx) {
             actions: ctx.actions,
             locals: itemLocals,
             cleanups: localCleanups,
-            ...ctx.imports && { imports: ctx.imports }
+            ...ctx.imports && { imports: ctx.imports },
+            ...ctx.styles && { styles: ctx.styles }
           };
           const itemNode = render(node.body, itemCtx);
           currentNodes.push(itemNode);
@@ -16820,7 +16859,8 @@ function hydrateEach(node, firstItemDomNode, ctx) {
           state: ctx.state,
           locals: tempLocals,
           ...ctx.imports && { imports: ctx.imports },
-          ...ctx.route && { route: ctx.route }
+          ...ctx.route && { route: ctx.route },
+          ...ctx.styles && { styles: ctx.styles }
         });
         if (seenKeys.has(keyValue)) {
           if (typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production") {
@@ -16850,7 +16890,8 @@ function hydrateEach(node, firstItemDomNode, ctx) {
             actions: ctx.actions,
             locals: reactiveLocals,
             cleanups: localCleanups,
-            ...ctx.imports && { imports: ctx.imports }
+            ...ctx.imports && { imports: ctx.imports },
+            ...ctx.styles && { styles: ctx.styles }
           };
           const itemNode = render(node.body, itemCtx);
           const newState = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "Runtime DOM renderer for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,7 +18,7 @@
     "dompurify": "^3.3.1",
     "marked": "^17.0.1",
     "shiki": "^3.20.0",
-    "@constela/compiler": "0.15.11",
+    "@constela/compiler": "0.15.12",
     "@constela/core": "0.18.5"
   },
   "devDependencies": {