@constela/runtime 2.0.7 → 2.0.9

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,7 +974,6 @@ var GLOBAL_FUNCTIONS = {
   getRadarAxes: (labels, cx, cy, radius) => getRadarAxes(labels, cx, cy, radius),
   // Chart helpers - Utilities
   getChartBounds: (data, valueKey) => getChartBounds(data, valueKey),
-  getLinePoints: (data, valueKey, width, height, padding) => getLinePoints(data, valueKey, width, height, padding),
   generateTicks: (min, max, count) => generateTicks(min, max, count),
   // Chart helpers - Data aggregation
   binData: (data, valueKey, binCount) => binData(data, valueKey, binCount),
@@ -1592,26 +1591,6 @@ function getChartBounds(data, valueKey) {
     max: Math.max(...values)
   };
 }
-function getLinePoints(data, valueKey, width, height, padding) {
-  if (!Array.isArray(data) || data.length === 0) return void 0;
-  if (typeof valueKey !== "string") return void 0;
-  if (typeof width !== "number" || typeof height !== "number") return void 0;
-  if (width <= 0 || height <= 0) return void 0;
-  const pad = typeof padding === "number" ? padding : 40;
-  if (typeof padding !== "undefined" && typeof padding !== "number") return void 0;
-  const bounds = getChartBounds(data, valueKey);
-  if (!bounds) return void 0;
-  const { min, max } = bounds;
-  const chartWidth = width - pad * 2;
-  const chartHeight = height - pad * 2;
-  return data.map((item, idx) => {
-    const value = item[valueKey];
-    if (typeof value !== "number") return { x: 0, y: 0 };
-    const x2 = data.length === 1 ? pad : pad + idx / (data.length - 1) * chartWidth;
-    const y2 = min === max ? pad + chartHeight / 2 : pad + chartHeight - scaleValue(value, min, max, 0, chartHeight);
-    return { x: x2, y: y2 };
-  });
-}
 function generateTicks(min, max, count) {
   if (typeof min !== "number" || typeof max !== "number" || typeof count !== "number") {
     return [];
@@ -15192,7 +15171,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);
@@ -15247,7 +15226,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);
@@ -15268,7 +15247,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) {
@@ -15346,7 +15325,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();
@@ -15405,7 +15384,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") {
@@ -15497,7 +15477,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;
   });
@@ -15512,8 +15492,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";
@@ -15568,26 +15548,22 @@ function renderPortal(node, ctx) {
 }
 function createLocalStateStore(stateDefs, ctx) {
   const signals = {};
-  const evaluatedValues = {};
   for (const [name, def] of Object.entries(stateDefs)) {
     const initial = def.initial;
     let initialValue;
     if (initial && typeof initial === "object" && "expr" in initial) {
       const evalCtx = {
         state: ctx.state,
-        locals: {
-          ...ctx.locals,
-          ...evaluatedValues
-        }
+        locals: ctx.locals
       };
       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;
     }
     signals[name] = createSignal(initialValue);
-    evaluatedValues[name] = initialValue;
   }
   return {
     get(name) {
@@ -15704,7 +15680,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);
@@ -15918,26 +15896,22 @@ function createReactiveLocals2(baseLocals, itemSignal, indexSignal, itemName, in
 }
 function createLocalStateStore2(stateDefs, ctx) {
   const signals = {};
-  const evaluatedValues = {};
   for (const [name, def] of Object.entries(stateDefs)) {
     const initial = def.initial;
     let initialValue;
     if (initial && typeof initial === "object" && "expr" in initial) {
       const evalCtx = {
         state: ctx.state,
-        locals: {
-          ...ctx.locals,
-          ...evaluatedValues
-        }
+        locals: ctx.locals
       };
       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;
     }
     signals[name] = createSignal(initialValue);
-    evaluatedValues[name] = initialValue;
   }
   return {
     get(name) {
@@ -16038,7 +16012,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) {
@@ -16186,7 +16161,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);
         });
@@ -16256,7 +16232,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;
@@ -16289,7 +16266,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) {
@@ -16318,7 +16296,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);
     }
@@ -16359,7 +16338,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);
   });
@@ -16389,7 +16369,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";
   }
@@ -16411,7 +16392,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";
@@ -16436,7 +16418,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);
@@ -16477,7 +16460,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";
@@ -16503,7 +16487,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);
@@ -16543,7 +16528,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) {
@@ -16571,7 +16557,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);
@@ -16604,7 +16591,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") {
@@ -16634,7 +16622,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 = {
@@ -16696,7 +16685,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) {
@@ -16714,7 +16704,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") {
@@ -16786,7 +16777,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;
@@ -16818,7 +16810,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);
@@ -16851,7 +16844,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") {
@@ -16881,7 +16875,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.7",
+  "version": "2.0.9",
   "description": "Runtime DOM renderer for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,8 +18,8 @@
     "dompurify": "^3.3.1",
     "marked": "^17.0.1",
     "shiki": "^3.20.0",
-    "@constela/compiler": "0.15.10",
-    "@constela/core": "0.18.4"
+    "@constela/compiler": "0.15.12",
+    "@constela/core": "0.18.5"
   },
   "devDependencies": {
     "@types/dompurify": "^3.2.0",
@@ -29,10 +29,10 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^2.0.0",
-    "@constela/server": "14.0.5"
+    "@constela/server": "14.0.6"
   },
   "peerDependencies": {
-    "@constela/ai": "3.0.4"
+    "@constela/ai": "3.0.5"
   },
   "peerDependenciesMeta": {
     "@constela/ai": {