@hypen-space/web 0.4.980 → 0.5.3

package/dist/canvas/paint.js

@@ -3,10 +3,11 @@
  *
  * Drawing virtual nodes to canvas
  */
-import { renderText } from "./text.js";
+import { measureText, renderText } from "./text.js";
 import { ScrollManager, isScrollable } from "./scroll.js";
 import { getVisibleChildren, VIRTUALIZE_THRESHOLD } from "./virtualize.js";
-import { cssLengthToPx, resolveLineHeight } from "./utils.js";
+import { SELECTION_HIGHLIGHT_COLOR, offsetToCaretRect, rangeToRects, } from "./text-geometry.js";
+import { cssLengthToPx } from "./utils.js";
 /**
  * Module-level reference to the active SelectionManager so paintText
  * can render selection highlights. Set once from the renderer.
@@ -15,6 +16,15 @@ let activeSelectionManager = null;
 export function setSelectionManager(mgr) {
     activeSelectionManager = mgr;
 }
+/**
+ * Module-level reference to the active TextEditController so paintInput can
+ * render the edited value, selection highlight, composition underline, and
+ * blinking caret. Same late-binding pattern as the SelectionManager hook.
+ */
+let activeTextEditor = null;
+export function setTextEditor(editor) {
+    activeTextEditor = editor;
+}
 /**
  * Custom painters registry
  */
@@ -26,27 +36,156 @@ export function registerPainter(type, painter) {
     customPainters.set(type.toLowerCase(), painter);
 }
 /**
- * Paint a virtual node and its children
+ * Per-font character advance widths, used by the manual letter-spacing path
+ * so each glyph is shaped once per font instead of once per frame.
+ */
+const charAdvanceCache = new Map();
+const MAX_CHAR_ADVANCE_FONTS = 32;
+/**
+ * Clear cached per-character advances. Must be called when web fonts finish
+ * loading: the cache is keyed by CSS font string, which is identical before
+ * and after a webfont replaces its fallback, so advances measured against
+ * the fallback font would otherwise poison letter-spaced rendering
+ * permanently.
+ */
+export function clearCharAdvanceCache() {
+    charAdvanceCache.clear();
+}
+function charAdvance(ctx, font, ch) {
+    let perFont = charAdvanceCache.get(font);
+    if (!perFont) {
+        perFont = new Map();
+        charAdvanceCache.set(font, perFont);
+        evictMap(charAdvanceCache, MAX_CHAR_ADVANCE_FONTS);
+    }
+    let width = perFont.get(ch);
+    if (width === undefined) {
+        width = ctx.measureText(ch).width;
+        perFont.set(ch, width);
+    }
+    return width;
+}
+/**
+ * Component types whose painters set sticky canvas state (textAlign,
+ * textBaseline, lineCap, shadows, …) that must not leak to siblings — they
+ * need a scoping save/restore pair. Containers, text, and spacers (and
+ * every unknown type, which routes to paintContainer) only touch state each
+ * draw call re-sets before use, so they paint without one.
+ */
+const STATE_UNSAFE_TYPES = new Set([
+    "button",
+    "input",
+    "textarea",
+    "image",
+    "divider",
+    "separator",
+    "checkbox",
+    "radio",
+    "switch",
+    "toggle",
+    "slider",
+    "progress",
+    "progressbar",
+    "spinner",
+    "loading",
+    "card",
+    "badge",
+    "avatar",
+    "icon",
+    "link",
+]);
+/** Whether any transform-related prop is present on the node. */
+function hasTransformProps(props) {
+    return (props.transform !== undefined ||
+        props.translateX !== undefined ||
+        props.translateY !== undefined ||
+        props.rotate !== undefined ||
+        props.scale !== undefined ||
+        props.scaleX !== undefined ||
+        props.scaleY !== undefined ||
+        props.skew !== undefined ||
+        props.skewX !== undefined ||
+        props.skewY !== undefined);
+}
+/** Extra pixels a node's painting may reach beyond its layout box. */
+const CULL_SLACK = 8;
+/** How far a shadow can bleed outside the box it is attached to. */
+function shadowExtent(shadow) {
+    if (typeof shadow === "string") {
+        const parts = shadow.trim().split(/\s+/);
+        const ox = Math.abs(parseFloat(parts[0])) || 0;
+        const oy = Math.abs(parseFloat(parts[1])) || 0;
+        const blur = Math.abs(parseFloat(parts[2])) || 0;
+        return Math.max(ox, oy) + blur;
+    }
+    if (shadow && typeof shadow === "object") {
+        return (Math.max(Math.abs(shadow.offsetX || 0), Math.abs(shadow.offsetY || 0)) +
+            Math.abs(shadow.blur || 0));
+    }
+    return 0;
+}
+/**
+ * Whether the whole subtree rooted at `node` can be skipped when repainting
+ * only `cull`. Conservative: nodes with transforms or custom painters are
+ * never culled (they can draw anywhere), the box is expanded by shadow
+ * bleed + slack, and a node with children is only culled when it clips them.
+ */
+function canCullSubtree(node, cull) {
+    const layout = node.layout;
+    if (hasTransformProps(node.props))
+        return false;
+    if (customPainters.has(node.type.toLowerCase()))
+        return false;
+    const shadow = node.props.shadow || node.props.boxShadow || node.props.textShadow;
+    const margin = CULL_SLACK + (shadow ? shadowExtent(shadow) : 0);
+    if (layout.x - margin < cull.x + cull.width &&
+        layout.x + layout.width + margin > cull.x &&
+        layout.y - margin < cull.y + cull.height &&
+        layout.y + layout.height + margin > cull.y) {
+        return false;
+    }
+    if (node.children.length === 0)
+        return true;
+    const overflow = node.props.overflow;
+    return overflow === "hidden" || overflow === "scroll" || overflow === "auto";
+}
+/**
+ * Paint a virtual node and its children.
+ *
+ * `cull` (optional) is the dirty region being repainted — subtrees that
+ * provably cannot reach it are skipped entirely.
  */
-export function paintNode(ctx, node) {
+export function paintNode(ctx, node, cull) {
     if (!node.visible || !node.layout)
         return;
-    ctx.save();
-    // Apply transforms
-    applyTransforms(ctx, node);
-    // Apply opacity
-    if (node.opacity < 1) {
-        ctx.globalAlpha = node.opacity;
+    if (cull && canCullSubtree(node, cull))
+        return;
+    const type = node.type.toLowerCase();
+    const customPainter = customPainters.get(type);
+    const needsTransform = hasTransformProps(node.props);
+    const needsSave = customPainter !== undefined ||
+        needsTransform ||
+        node.opacity < 1 ||
+        STATE_UNSAFE_TYPES.has(type);
+    if (needsSave) {
+        ctx.save();
+        // Apply transforms
+        if (needsTransform) {
+            applyTransforms(ctx, node);
+        }
+        // Apply opacity
+        if (node.opacity < 1) {
+            ctx.globalAlpha = node.opacity;
+        }
     }
     // Check for custom painter
-    const customPainter = customPainters.get(node.type.toLowerCase());
     if (customPainter) {
         customPainter(ctx, node);
         ctx.restore();
         return;
     }
     // Default painting based on type
-    switch (node.type.toLowerCase()) {
+    switch (type) {
         case "column":
         case "row":
         case "stack":
@@ -59,6 +198,7 @@ export function paintNode(ctx, node) {
             paintButton(ctx, node);
             break;
         case "input":
+        case "textarea":
             paintInput(ctx, node);
             break;
         case "image":
@@ -115,13 +255,25 @@ export function paintNode(ctx, node) {
         default:
             paintContainer(ctx, node);
     }
-    ctx.restore();
+    if (needsSave) {
+        ctx.restore();
+    }
     // Apply scroll translation for scrollable containers
     const ss = node.scrollState;
+    let childCull = cull ?? null;
     if (ss && (ss.scrollX !== 0 || ss.scrollY !== 0)) {
         ctx.save();
         ctx.translate(-ss.scrollX, -ss.scrollY);
         node._scrollRestore = true;
+        // Children paint in scrolled space — shift the cull region to match.
+        if (childCull) {
+            childCull = {
+                x: childCull.x + ss.scrollX,
+                y: childCull.y + ss.scrollY,
+                width: childCull.width,
+                height: childCull.height,
+            };
+        }
     }
     // Paint children -- use windowed rendering for large scrollable lists
     const shouldVirtualize = isScrollable(node) &&
@@ -141,18 +293,21 @@ export function paintNode(ctx, node) {
     // tree (Story uses this for its close button) gets covered by the
     // following in-flow Image. Push absolute kids to the end so they land
     // on top — same effect as `z-index: auto` painting absolute after flow.
-    const flowKids = [];
-    const overlayKids = [];
+    let hasOverlays = false;
     for (const child of childrenToPaint) {
-        if (child.props.position === "absolute")
-            overlayKids.push(child);
-        else
-            flowKids.push(child);
+        if (child.props.position === "absolute") {
+            hasOverlays = true;
+            continue;
+        }
+        paintNode(ctx, child, childCull);
+    }
+    if (hasOverlays) {
+        for (const child of childrenToPaint) {
+            if (child.props.position === "absolute") {
+                paintNode(ctx, child, childCull);
+            }
+        }
     }
-    for (const child of flowKids)
-        paintNode(ctx, child);
-    for (const child of overlayKids)
-        paintNode(ctx, child);
     // Undo scroll translation before drawing scrollbars
     if (node._scrollRestore) {
         ctx.restore();
@@ -185,15 +340,9 @@ function paintContainer(ctx, node) {
         applyShadow(ctx, shadow);
     }
     // Draw background
-    const backgroundColor = props.backgroundColor || props.background;
-    if (backgroundColor) {
-        // Support for gradients
-        if (typeof backgroundColor === "string" && backgroundColor.includes("gradient")) {
-            ctx.fillStyle = parseGradient(ctx, backgroundColor, x, y, width, height);
-        }
-        else {
-            ctx.fillStyle = backgroundColor;
-        }
+    const background = resolveBackgroundPaint(props);
+    if (background) {
+        ctx.fillStyle = resolveCanvasPaint(ctx, background, x, y, width, height);
         if (radius > 0) {
             drawRoundedRect(ctx, x, y, width, height, radius);
             ctx.fill();
@@ -247,14 +396,13 @@ function paintText(ctx, node) {
     }
     const layout = node.layout;
     const props = node.props;
-    // `??` (not `||`) so a bound `0`, `false`, or `""` still renders.
-    let text = String(props[0] ?? props.text ?? "");
+    let text = String(props[0] || props.text || "");
     const color = props.color || "#000000";
     const fontSize = cssLengthToPx(props.fontSize) ?? 16;
     const fontWeight = props.fontWeight || "normal";
     const fontFamily = props.fontFamily || "system-ui, sans-serif";
     const textAlign = props.textAlign || "left";
-    const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.2;
+    const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
     const textDecoration = props.textDecoration || "none";
     const textTransform = props.textTransform || "none";
     const letterSpacing = cssLengthToPx(props.letterSpacing) ?? 0;
@@ -279,13 +427,14 @@ function paintText(ctx, node) {
     if (letterSpacing !== 0) {
         // Manual letter spacing
         ctx.fillStyle = color;
-        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        const font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        ctx.font = font;
         ctx.textAlign = "left";
         ctx.textBaseline = "top";
         let currentX = x;
         for (let i = 0; i < text.length; i++) {
             ctx.fillText(text[i], currentX, y);
-            currentX += ctx.measureText(text[i]).width;
+            currentX += charAdvance(ctx, font, text[i]);
             // Add letter spacing after each character except the last
             if (i < text.length - 1) {
                 currentX += letterSpacing;
@@ -315,11 +464,11 @@ function paintText(ctx, node) {
             verticalAlign: "top",
             lineHeight,
         }, maxLines, textOverflow);
-        // Text decoration (need to set font again for measurement)
+        // Text decoration — reuse the wrapped metrics renderText just resolved
+        // (cache hit) instead of re-shaping the raw, unwrapped string.
         if (textDecoration !== "none") {
-            ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-            const textWidth = ctx.measureText(text).width;
-            applyTextDecoration(ctx, textDecoration, color, x, y, textWidth, fontSize);
+            const metrics = measureText(ctx, text, { fontSize, fontWeight, fontFamily, lineHeight }, layout.contentWidth, maxLines, textOverflow);
+            applyTextDecoration(ctx, textDecoration, color, x, y, metrics.width, fontSize);
         }
     }
     // Reset shadow
@@ -340,7 +489,7 @@ function paintButton(ctx, node) {
     const y = layout.y;
     const width = layout.width;
     const height = layout.height;
-    const radius = layout.border.radius;
+    const radius = layout.border.radius || 4;
     // Apply shadow if specified
     const shadow = props.shadow || props.boxShadow;
     if (shadow) {
@@ -359,16 +508,11 @@ function paintButton(ctx, node) {
     else if (node.focused && props.focusColor !== undefined) {
         backgroundColor = props.focusColor;
     }
-    else if (props.backgroundColor !== undefined) {
-        backgroundColor = props.backgroundColor;
+    else {
+        backgroundColor = resolveBackgroundPaint(props);
     }
     if (backgroundColor !== undefined) {
-        if (typeof backgroundColor === "string" && backgroundColor.includes("gradient")) {
-            ctx.fillStyle = parseGradient(ctx, backgroundColor, x, y, width, height);
-        }
-        else {
-            ctx.fillStyle = backgroundColor;
-        }
+        ctx.fillStyle = resolveCanvasPaint(ctx, backgroundColor, x, y, width, height);
         drawRoundedRect(ctx, x, y, width, height, radius);
         ctx.fill();
     }
@@ -386,6 +530,17 @@ function paintButton(ctx, node) {
         drawRoundedRect(ctx, x, y, width, height, radius);
         ctx.stroke();
     }
+    // Keyboard focus ring. Focus lives on the node's (unrendered) mirror
+    // element in the canvas fallback content, so the UA can't draw a ring at
+    // the painted box — paint one so keyboard users can see where they are.
+    if (node.focused) {
+        ctx.save();
+        ctx.strokeStyle = props.focusRingColor || "#007bff";
+        ctx.lineWidth = 2;
+        drawRoundedRect(ctx, x - 2, y - 2, width + 4, height + 4, radius + 2);
+        ctx.stroke();
+        ctx.restore();
+    }
     // Paint children (typically Text)
     for (const child of node.children) {
         paintNode(ctx, child);
@@ -401,7 +556,7 @@ function paintInput(ctx, node) {
     const y = layout.y;
     const width = layout.width;
     const height = layout.height;
-    const radius = layout.border.radius;
+    const radius = layout.border.radius || 4;
     // Background
     ctx.fillStyle = props.backgroundColor || "#ffffff";
     drawRoundedRect(ctx, x, y, width, height, radius);
@@ -413,26 +568,82 @@ function paintInput(ctx, node) {
     ctx.lineWidth = borderWidth;
     drawRoundedRect(ctx, x, y, width, height, radius);
     ctx.stroke();
-    // Input value text
-    const value = props.value || "";
+    const isSingleLine = node.type.toLowerCase() === "input";
+    // While editing, the mirror element (via TextEditController) is the value
+    // source — paint stays ahead of the engine's SetProp echo.
+    const edit = activeTextEditor?.getStateFor(node) ?? null;
+    const value = edit ? edit.value : (props.value || "");
     const placeholder = props.placeholder || "";
     const text = value || placeholder;
     const textColor = value ? (props.color || "#000000") : "#999999";
+    const fontSize = cssLengthToPx(props.fontSize) ?? 16;
+    const fontWeight = props.fontWeight || "normal";
+    const fontFamily = props.fontFamily || "system-ui, sans-serif";
+    const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
+    if (!edit) {
+        if (text) {
+            renderText(ctx, text, layout.x + layout.contentX, layout.y + layout.contentY, layout.contentWidth, layout.contentHeight, {
+                color: textColor,
+                fontSize,
+                fontWeight,
+                fontFamily,
+                textAlign: "left",
+                verticalAlign: isSingleLine ? "middle" : "top",
+                lineHeight,
+            });
+        }
+        return;
+    }
+    // ---- Editing visuals: clip → selection highlight → text → composition
+    // ---- underline → caret. Geometry comes from the edit controller so
+    // ---- pointer mapping and painting share identical math (incl. scrollX).
+    ctx.save();
+    drawRoundedRect(ctx, x, y, width, height, radius);
+    ctx.clip();
+    const g = activeTextEditor.geometry(layout.x + layout.contentX - edit.scrollX, layout.y + layout.contentY);
+    // Selection highlight behind the text
+    if (edit.selStart !== edit.selEnd) {
+        const from = Math.min(edit.selStart, edit.selEnd);
+        const to = Math.max(edit.selStart, edit.selEnd);
+        ctx.fillStyle = SELECTION_HIGHLIGHT_COLOR;
+        for (const r of rangeToRects(ctx, g, from, to)) {
+            ctx.fillRect(r.x, r.y, r.width, r.height);
+        }
+    }
     if (text) {
-        const fontSize = cssLengthToPx(props.fontSize) ?? 16;
-        const fontWeight = props.fontWeight || "normal";
-        const fontFamily = props.fontFamily || "system-ui, sans-serif";
-        const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.2;
-        renderText(ctx, text, layout.x + layout.contentX, layout.y + layout.contentY, layout.contentWidth, layout.contentHeight, {
+        renderText(ctx, value || placeholder, g.contentX, layout.y + layout.contentY, 
+        // Single-line inputs never wrap — the clip + scrollX pan handle
+        // overflow. Textareas wrap at content width like static paint.
+        isSingleLine ? Number.POSITIVE_INFINITY : layout.contentWidth, layout.contentHeight, {
             color: textColor,
             fontSize,
             fontWeight,
             fontFamily,
             textAlign: "left",
-            verticalAlign: "middle",
+            verticalAlign: isSingleLine ? "middle" : "top",
             lineHeight,
         });
     }
+    // IME composition underline (dashed, under the composing range)
+    if (edit.compStart !== null && edit.compEnd !== null && edit.compEnd > edit.compStart) {
+        ctx.strokeStyle = props.color || "#000000";
+        ctx.lineWidth = 1;
+        ctx.setLineDash([2, 2]);
+        for (const r of rangeToRects(ctx, g, edit.compStart, edit.compEnd)) {
+            ctx.beginPath();
+            ctx.moveTo(r.x, r.y + r.height - 2);
+            ctx.lineTo(r.x + r.width, r.y + r.height - 2);
+            ctx.stroke();
+        }
+        ctx.setLineDash([]);
+    }
+    // Caret (hidden while a range is selected, blinks via the edit timer)
+    if (edit.caretVisible && edit.selStart === edit.selEnd) {
+        const caret = offsetToCaretRect(ctx, g, edit.selEnd);
+        ctx.fillStyle = props.color || "#000000";
+        ctx.fillRect(caret.x, caret.y + 1, 1.5, caret.height - 2);
+    }
+    ctx.restore();
 }
 /**
  * Image cache for canvas renderer
@@ -584,8 +795,10 @@ function paintImage(ctx, node) {
             imagePending.delete(src);
             imageFailCache.delete(src);
             evictMap(imageCache, MAX_IMAGE_CACHE_SIZE);
-            // Request a repaint so the loaded image is drawn
-            canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
+            // Request a repaint so the loaded image is drawn. `layout: true`
+            // because the decoded intrinsic size can change the image's box
+            // (see getImageNaturalAspect in layout.ts).
+            canvas.dispatchEvent(new CustomEvent("hypen:redraw", { detail: { layout: true } }));
         };
         img.onerror = () => {
             imageInFlight.delete(src);
@@ -636,14 +849,6 @@ function drawImageCover(ctx, img, dx, dy, dw, dh) {
  */
 function drawRoundedRect(ctx, x, y, width, height, radius) {
     if (radius <= 0 || width <= 0 || height <= 0) {
-        // beginPath is critical here — without it, this rect appends to the
-        // existing path and the next `ctx.fill()` re-fills every previously
-        // queued rect with the current fillStyle. That manifested as a
-        // calculator grid where every button painted in the last button's
-        // colour and only the last button's child text survived (each
-        // subsequent fill repainted over earlier children). Mirrors the
-        // beginPath() the rounded branch already does below.
-        ctx.beginPath();
         ctx.rect(x, y, width, height);
         return;
     }
@@ -690,6 +895,53 @@ function applyShadow(ctx, shadow) {
         ctx.shadowColor = shadow.color || "rgba(0,0,0,0.3)";
     }
 }
+/**
+ * Resolve DOM background applicator props into the CSS-like paint strings
+ * Canvas understands. DOM applicators map `.linearGradient("...")` to
+ * `background-image: linear-gradient(...)`; Canvas receives the original prop
+ * and must do the same translation before painting.
+ */
+function resolveBackgroundPaint(props) {
+    if (props.linearGradient !== undefined) {
+        return `linear-gradient(${props.linearGradient})`;
+    }
+    if (props.radialGradient !== undefined) {
+        return `radial-gradient(${props.radialGradient})`;
+    }
+    if (props.conicGradient !== undefined) {
+        return `conic-gradient(${props.conicGradient})`;
+    }
+    if (props.backgroundImage !== undefined) {
+        return String(props.backgroundImage);
+    }
+    if (props.backgroundColor !== undefined) {
+        return String(props.backgroundColor);
+    }
+    if (props.background !== undefined) {
+        return String(props.background);
+    }
+    return undefined;
+}
+/**
+ * Parsed gradients keyed by (source string, box geometry). CanvasGradient
+ * objects are not bound to a specific context, so identical fills across
+ * frames — the common case, since layout geometry is stable — skip the
+ * regex parse and createLinearGradient/createRadialGradient entirely.
+ */
+const gradientCache = new Map();
+const MAX_GRADIENT_CACHE_SIZE = 256;
+function resolveCanvasPaint(ctx, paint, x, y, width, height) {
+    if (!paint.includes("gradient("))
+        return paint;
+    const key = `${paint}|${x}|${y}|${width}|${height}`;
+    let resolved = gradientCache.get(key);
+    if (resolved === undefined) {
+        resolved = parseGradient(ctx, paint, x, y, width, height);
+        gradientCache.set(key, resolved);
+        evictMap(gradientCache, MAX_GRADIENT_CACHE_SIZE);
+    }
+    return resolved;
+}
 /**
  * Parse gradient string and create canvas gradient
  * Supports:
@@ -703,36 +955,25 @@ function parseGradient(ctx, gradientStr, x, y, width, height) {
         const match = gradientStr.match(/linear-gradient\((.*)\)/);
         if (!match)
             return gradientStr;
-        const parts = match[1].split(",").map((s) => s.trim());
+        const parts = splitCssArgs(match[1]);
         // Determine direction (default to bottom)
         let x0 = x, y0 = y, x1 = x, y1 = y + height;
         let colorStart = 0;
         if (parts[0].includes("deg") || parts[0].includes("to ")) {
             colorStart = 1;
             const direction = parts[0];
-            if (direction.includes("to right") || direction === "90deg") {
-                x1 = x + width;
-                y1 = y;
-            }
-            else if (direction.includes("to left") || direction === "270deg") {
-                x0 = x + width;
-                x1 = x;
-                y0 = y;
-                y1 = y;
-            }
-            else if (direction.includes("to top") || direction === "0deg") {
-                y0 = y + height;
-                y1 = y;
+            const angle = parseCssGradientAngle(direction);
+            if (angle !== null) {
+                const line = gradientLineForAngle(angle, x, y, width, height);
+                x0 = line.x0;
+                y0 = line.y0;
+                x1 = line.x1;
+                y1 = line.y1;
             }
-            // Default is "to bottom" which we already set
         }
         const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
         // Add color stops
-        const colors = parts.slice(colorStart);
-        colors.forEach((color, i) => {
-            const stop = i / (colors.length - 1);
-            gradient.addColorStop(stop, color.trim());
-        });
+        addColorStops(gradient, parts.slice(colorStart));
         return gradient;
     }
     else if (gradientStr.startsWith("radial-gradient")) {
@@ -740,21 +981,125 @@ function parseGradient(ctx, gradientStr, x, y, width, height) {
         const match = gradientStr.match(/radial-gradient\((.*)\)/);
         if (!match)
             return gradientStr;
-        const parts = match[1].split(",").map((s) => s.trim());
+        const parts = splitCssArgs(match[1]);
         // Create radial gradient from center
         const centerX = x + width / 2;
         const centerY = y + height / 2;
         const radius = Math.max(width, height) / 2;
         const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
         // Add color stops
-        parts.forEach((color, i) => {
-            const stop = i / (parts.length - 1);
-            gradient.addColorStop(stop, color.trim());
-        });
+        addColorStops(gradient, parts);
+        return gradient;
+    }
+    else if (gradientStr.startsWith("conic-gradient")) {
+        const match = gradientStr.match(/conic-gradient\((.*)\)/);
+        if (!match)
+            return gradientStr;
+        const createConicGradient = ctx.createConicGradient;
+        if (!createConicGradient)
+            return firstGradientColor(match[1]) ?? gradientStr;
+        const centerX = x + width / 2;
+        const centerY = y + height / 2;
+        const gradient = createConicGradient.call(ctx, 0, centerX, centerY);
+        addColorStops(gradient, splitCssArgs(match[1]));
         return gradient;
     }
     return gradientStr;
 }
+function splitCssArgs(input) {
+    const parts = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < input.length; i++) {
+        const ch = input[i];
+        if (ch === "(")
+            depth++;
+        else if (ch === ")")
+            depth = Math.max(0, depth - 1);
+        else if (ch === "," && depth === 0) {
+            const part = input.slice(start, i).trim();
+            if (part)
+                parts.push(part);
+            start = i + 1;
+        }
+    }
+    const tail = input.slice(start).trim();
+    if (tail)
+        parts.push(tail);
+    return parts;
+}
+function parseCssGradientAngle(direction) {
+    const trimmed = direction.trim().toLowerCase();
+    const deg = trimmed.match(/^(-?(?:\d+|\d*\.\d+))deg$/);
+    if (deg)
+        return Number(deg[1]);
+    if (!trimmed.startsWith("to "))
+        return null;
+    const words = new Set(trimmed.slice(3).split(/\s+/).filter(Boolean));
+    if (words.has("top") && words.has("right"))
+        return 45;
+    if (words.has("right") && words.has("bottom"))
+        return 135;
+    if (words.has("bottom") && words.has("left"))
+        return 225;
+    if (words.has("left") && words.has("top"))
+        return 315;
+    if (words.has("top"))
+        return 0;
+    if (words.has("right"))
+        return 90;
+    if (words.has("bottom"))
+        return 180;
+    if (words.has("left"))
+        return 270;
+    return null;
+}
+function gradientLineForAngle(cssDegrees, x, y, width, height) {
+    const radians = (cssDegrees * Math.PI) / 180;
+    const cx = x + width / 2;
+    const cy = y + height / 2;
+    const half = Math.sqrt(width * width + height * height) / 2;
+    const dx = Math.sin(radians) * half;
+    const dy = -Math.cos(radians) * half;
+    return {
+        x0: cx - dx,
+        y0: cy - dy,
+        x1: cx + dx,
+        y1: cy + dy,
+    };
+}
+function parseColorStop(raw, fallbackStop) {
+    const trimmed = raw.trim();
+    const match = trimmed.match(/^(.*\S)\s+(-?(?:\d+|\d*\.\d+)%)$/);
+    if (!match)
+        return { color: trimmed, stop: fallbackStop };
+    return {
+        color: match[1].trim(),
+        stop: Math.max(0, Math.min(1, parseFloat(match[2]) / 100)),
+    };
+}
+function addColorStops(gradient, rawStops) {
+    const stops = rawStops.filter(Boolean);
+    if (stops.length === 0)
+        return;
+    if (stops.length === 1) {
+        const parsed = parseColorStop(stops[0], 0);
+        gradient.addColorStop(0, parsed.color);
+        gradient.addColorStop(1, parsed.color);
+        return;
+    }
+    stops.forEach((raw, i) => {
+        const fallback = i / (stops.length - 1);
+        const { color, stop } = parseColorStop(raw, fallback);
+        gradient.addColorStop(stop, color);
+    });
+}
+function firstGradientColor(input) {
+    const first = splitCssArgs(input)[0];
+    if (!first)
+        return undefined;
+    return parseColorStop(first, 0).color;
+}
 /**
  * Apply CSS-like transforms to canvas context
  * Supports:
@@ -997,7 +1342,7 @@ function paintSlider(ctx, node) {
     const fillColor = props.fillColor || props.color || "#007bff";
     // Support gradient fills
     if (typeof fillColor === "string" && fillColor.includes("gradient")) {
-        ctx.fillStyle = parseGradient(ctx, fillColor, x, trackY, fillWidth, trackHeight);
+        ctx.fillStyle = resolveCanvasPaint(ctx, fillColor, x, trackY, fillWidth, trackHeight);
     }
     else {
         ctx.fillStyle = fillColor;
@@ -1043,7 +1388,7 @@ function paintProgress(ctx, node) {
         // Support gradient fills
         const fillColor = props.fillColor || props.color || "#007bff";
         if (typeof fillColor === "string" && fillColor.includes("gradient")) {
-            ctx.fillStyle = parseGradient(ctx, fillColor, x, y, fillWidth, height);
+            ctx.fillStyle = resolveCanvasPaint(ctx, fillColor, x, y, fillWidth, height);
         }
         else {
             ctx.fillStyle = fillColor;
@@ -1099,18 +1444,13 @@ function paintCard(ctx, node) {
     const y = layout.y;
     const width = layout.width;
     const height = layout.height;
-    const radius = layout.border.radius;
+    const radius = layout.border.radius || 8;
     // Default card shadow
     const shadow = props.shadow || props.boxShadow || "0 2 8 rgba(0,0,0,0.1)";
     applyShadow(ctx, shadow);
     // Background
-    const backgroundColor = props.backgroundColor || "#ffffff";
-    if (typeof backgroundColor === "string" && backgroundColor.includes("gradient")) {
-        ctx.fillStyle = parseGradient(ctx, backgroundColor, x, y, width, height);
-    }
-    else {
-        ctx.fillStyle = backgroundColor;
-    }
+    const backgroundColor = resolveBackgroundPaint(props) || "#ffffff";
+    ctx.fillStyle = resolveCanvasPaint(ctx, backgroundColor, x, y, width, height);
     drawRoundedRect(ctx, x, y, width, height, radius);
     ctx.fill();
     // Reset shadow
@@ -1146,8 +1486,8 @@ function paintBadge(ctx, node) {
     ctx.fillStyle = backgroundColor;
     drawRoundedRect(ctx, x, y, width, height, radius);
     ctx.fill();
-    // `??` so a literal `0`/`false`/`""` value still renders.
-    const text = String(props[0] ?? props.text ?? "");
+    // Text content
+    const text = String(props[0] || props.text || "");
     if (text) {
         ctx.fillStyle = props.color || "#ffffff";
         ctx.font = `${props.fontWeight || "bold"} ${props.fontSize || 10}px ${props.fontFamily || "sans-serif"}`;
@@ -1177,8 +1517,8 @@ function paintAvatar(ctx, node) {
     ctx.beginPath();
     ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
     ctx.fill();
-    // `??` so a literal `0`/`false`/`""` value still renders.
-    const text = String(props[0] ?? props.text ?? props.initials ?? "");
+    // Text initials if provided
+    const text = String(props[0] || props.text || props.initials || "");
     if (text) {
         ctx.fillStyle = props.color || "#ffffff";
         ctx.font = `${props.fontWeight || "bold"} ${props.fontSize || size / 2.5}px ${props.fontFamily || "sans-serif"}`;
@@ -1293,8 +1633,7 @@ function paintIcon(ctx, node) {
 function paintLink(ctx, node) {
     const layout = node.layout;
     const props = node.props;
-    // `??` so a literal `0`/`false`/`""` value still renders.
-    const text = String(props[0] ?? props.text ?? "");
+    const text = String(props[0] || props.text || "");
     const color = node.hovered ? (props.hoverColor || "#0056b3") : (props.color || "#007bff");
     const fontSize = cssLengthToPx(props.fontSize) ?? 16;
     const fontWeight = props.fontWeight || "normal";