@almadar/ui 5.156.0 → 5.157.0

package/dist/avl/index.cjs

@@ -15511,6 +15511,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -15719,7 +15721,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -32845,6 +32847,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -32899,11 +32904,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -32974,8 +32979,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -32998,23 +33003,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -33129,6 +33147,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -33148,6 +33168,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,

package/dist/avl/index.js

@@ -15435,6 +15435,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -15643,7 +15645,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -32769,6 +32771,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -32823,11 +32828,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -32898,8 +32903,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -32922,23 +32927,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -33053,6 +33071,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -33072,6 +33092,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,

package/dist/components/index.cjs

@@ -8689,6 +8689,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -8897,7 +8899,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -25510,6 +25512,7 @@ function currentValue(decl, override) {
 function TextLikeControl({
   field,
   numeric,
+  secret,
   value,
   onCommit
 }) {
@@ -25527,7 +25530,7 @@ function TextLikeControl({
   return /* @__PURE__ */ jsxRuntime.jsx(
     exports.Input,
     {
-      inputType: numeric ? "number" : "text",
+      inputType: secret ? "password" : numeric ? "number" : "text",
       value: draft,
       onChange: (e) => setDraft(e.target.value),
       onBlur: commit,
@@ -25588,6 +25591,8 @@ function FieldControl({
     );
   } else if (decl.type === "number") {
     control = /* @__PURE__ */ jsxRuntime.jsx(TextLikeControl, { field: name, numeric: true, value, onCommit: onChange });
+  } else if (core.isSecretConfigType(decl.type)) {
+    control = /* @__PURE__ */ jsxRuntime.jsx(TextLikeControl, { field: name, numeric: false, secret: true, value, onCommit: onChange });
   } else if (decl.type === "string") {
     control = /* @__PURE__ */ jsxRuntime.jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
   } else if (decl.type === "node") {
@@ -25627,7 +25632,7 @@ var init_PropertyInspector = __esm({
     init_JsonTreeEditor();
     init_NodeSlotEditor();
     TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
-    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset", "Asset"]);
+    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset", "Asset", "secret"]);
     exports.PropertyInspector = ({
       config,
       values,
@@ -31615,6 +31620,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -31669,11 +31677,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -31744,8 +31752,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -31768,23 +31776,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -31899,6 +31920,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -31918,6 +31941,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,

package/dist/components/index.d.cts

@@ -6118,6 +6118,12 @@ interface MathCanvasProps {
     showAxes?: boolean;
     showGrid?: boolean;
     gridStep?: number;
+    /** Canvas fill color; `var(--token, fallback)` strings resolve against the active theme. Default transparent. */
+    backgroundColor?: string;
+    /** Grid line color; resolves theme tokens (default `var(--color-border, #9ca3af)`). */
+    gridColor?: string;
+    /** Axis line color; resolves theme tokens (default `var(--color-muted-foreground, #374151)`). */
+    axisColor?: string;
     /** Draw numeric labels on grid lines (default false). */
     showTickLabels?: boolean;
     /** Draw each curve's `label` at its last in-range sample (default false). */

package/dist/components/index.d.ts

@@ -6118,6 +6118,12 @@ interface MathCanvasProps {
     showAxes?: boolean;
     showGrid?: boolean;
     gridStep?: number;
+    /** Canvas fill color; `var(--token, fallback)` strings resolve against the active theme. Default transparent. */
+    backgroundColor?: string;
+    /** Grid line color; resolves theme tokens (default `var(--color-border, #9ca3af)`). */
+    gridColor?: string;
+    /** Axis line color; resolves theme tokens (default `var(--color-muted-foreground, #374151)`). */
+    axisColor?: string;
     /** Draw numeric labels on grid lines (default false). */
     showTickLabels?: boolean;
     /** Draw each curve's `label` at its last in-range sample (default false). */

package/dist/components/index.js

@@ -12,7 +12,7 @@ import { useTranslate } from '@almadar/ui/hooks';
 import { useUISlots, useTheme } from '@almadar/ui/context';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
 import { createContextFromBindings, interpolateValue } from '@almadar/runtime';
-import { mergeEntityFrame, isFileValue, isInlineTrait, isRenderBindingMarker, ANIMATION_NAMES } from '@almadar/core';
+import { mergeEntityFrame, isFileValue, isInlineTrait, isSecretConfigType, isRenderBindingMarker, ANIMATION_NAMES } from '@almadar/core';
 import { createPortal } from 'react-dom';
 import { wrapCallbackForEvent } from '@almadar/runtime/ui';
 import { Link, Outlet, useLocation } from 'react-router-dom';
@@ -8614,6 +8614,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -8822,7 +8824,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -25435,6 +25437,7 @@ function currentValue(decl, override) {
 function TextLikeControl({
   field,
   numeric,
+  secret,
   value,
   onCommit
 }) {
@@ -25452,7 +25455,7 @@ function TextLikeControl({
   return /* @__PURE__ */ jsx(
     Input,
     {
-      inputType: numeric ? "number" : "text",
+      inputType: secret ? "password" : numeric ? "number" : "text",
       value: draft,
       onChange: (e) => setDraft(e.target.value),
       onBlur: commit,
@@ -25513,6 +25516,8 @@ function FieldControl({
     );
   } else if (decl.type === "number") {
     control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: true, value, onCommit: onChange });
+  } else if (isSecretConfigType(decl.type)) {
+    control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: false, secret: true, value, onCommit: onChange });
   } else if (decl.type === "string") {
     control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
   } else if (decl.type === "node") {
@@ -25552,7 +25557,7 @@ var init_PropertyInspector = __esm({
     init_JsonTreeEditor();
     init_NodeSlotEditor();
     TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
-    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset", "Asset"]);
+    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset", "Asset", "secret"]);
     PropertyInspector = ({
       config,
       values,
@@ -31540,6 +31545,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -31594,11 +31602,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -31669,8 +31677,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -31693,23 +31701,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -31824,6 +31845,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -31843,6 +31866,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,

package/dist/providers/index.cjs

@@ -12036,6 +12036,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -12244,7 +12246,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -30580,6 +30582,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -30634,11 +30639,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -30709,8 +30714,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -30733,23 +30738,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -30864,6 +30882,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -30883,6 +30903,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,

package/dist/providers/index.js

@@ -11962,6 +11962,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -12170,7 +12172,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -30506,6 +30508,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -30560,11 +30565,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -30635,8 +30640,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -30659,23 +30664,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -30790,6 +30808,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -30809,6 +30829,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,

package/dist/runtime/index.cjs

@@ -12103,6 +12103,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -12311,7 +12313,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -30069,6 +30071,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -30123,11 +30128,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -30198,8 +30203,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -30222,23 +30227,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -30353,6 +30371,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -30372,6 +30392,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,

package/dist/runtime/index.js

@@ -12029,6 +12029,8 @@ function drawShape(ctx, shape, width, height, allShapes) {
     case "path": {
       if (!shape.path) break;
       const p = new Path2D(shape.path);
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
       if (fill) {
         ctx.fillStyle = fill;
         ctx.fill(p);
@@ -12237,7 +12239,7 @@ var init_LearningCanvas = __esm({
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
         if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
+          ctx.fillStyle = resolveColor2(backgroundColor, ctx, backgroundColor);
           ctx.fillRect(0, 0, width, height);
         }
         for (const shape of derivedShapes) {
@@ -29995,6 +29997,9 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      backgroundColor,
+      gridColor = "var(--color-border, #9ca3af)",
+      axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
       showCurveLabels = false,
       curves = [],
@@ -30049,11 +30054,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: gridColor, opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -30124,8 +30129,8 @@ var init_MathCanvas = __esm({
           });
         }
         if (showAxes) {
-          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
-          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: axisColor, lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: axisColor, lineWidth: 2 });
         }
         for (const guide of guides) {
           const color = guide.color ?? "#9ca3af";
@@ -30148,23 +30153,36 @@ var init_MathCanvas = __esm({
         }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let d = "";
+          let penDown = false;
           let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
-            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
-            out.push({
-              type: "line",
-              x1: mapX(a.x),
-              y1: mapY(a.y),
-              x2: mapX(b.x),
-              y2: mapY(b.y),
-              color: curve.color ?? "#2563eb",
-              lineWidth: 2,
-              dash: curve.dash
-            });
-            lastInRange = b;
-          }
+            if (a.x < xMin && b.x < xMin || a.x > xMax && b.x > xMax) {
+              penDown = false;
+              continue;
+            }
+            const clip = (p, q, xLim) => {
+              const t = q.x === p.x ? 0 : (xLim - p.x) / (q.x - p.x);
+              return { x: xLim, y: p.y + t * (q.y - p.y) };
+            };
+            const ca = a.x < xMin ? clip(a, b, xMin) : a.x > xMax ? clip(a, b, xMax) : a;
+            const cb = b.x < xMin ? clip(a, b, xMin) : b.x > xMax ? clip(a, b, xMax) : b;
+            const pax = mapX(ca.x);
+            const pay = mapY(ca.y);
+            d += `${penDown ? "L" : "M"} ${pax} ${pay} L ${mapX(cb.x)} ${mapY(cb.y)} `;
+            penDown = true;
+            if (b.x >= xMin && b.x <= xMax) lastInRange = b;
+          }
+          if (!d) continue;
+          out.push({
+            type: "path",
+            path: d,
+            color: curve.color ?? "#2563eb",
+            lineWidth: 2,
+            dash: curve.dash
+          });
           if (showCurveLabels && curve.label && lastInRange) {
             out.push({
               type: "text",
@@ -30279,6 +30297,8 @@ var init_MathCanvas = __esm({
         showAxes,
         showGrid,
         gridStep,
+        gridColor,
+        axisColor,
         showTickLabels,
         showCurveLabels,
         curves,
@@ -30298,6 +30318,7 @@ var init_MathCanvas = __esm({
           {
             width,
             height,
+            backgroundColor,
             shapes: derivedShapes,
             readouts,
             traces,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.156.0",
+  "version": "5.157.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.66.0",
+    "@almadar/core": "^10.67.0",
     "@almadar/evaluator": "^2.41.0",
     "@almadar/logger": "^1.11.0",
-    "@almadar/runtime": "^6.57.0",
-    "@almadar/std": "^16.182.0",
+    "@almadar/runtime": "^6.58.0",
+    "@almadar/std": "^16.183.0",
     "@almadar/syntax": "^1.15.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",