@hypen-space/web 0.4.980 → 0.5.3

package/src/canvas/paint.ts

@@ -4,12 +4,18 @@
  * Drawing virtual nodes to canvas
  */
 
-import type { VirtualNode, PainterFunction } from "./types.js";
-import { renderText } from "./text.js";
+import type { VirtualNode, PainterFunction, Rectangle } from "./types.js";
+import { measureText, renderText } from "./text.js";
 import { ScrollManager, isScrollable } from "./scroll.js";
 import { getVisibleChildren, VIRTUALIZE_THRESHOLD } from "./virtualize.js";
 import type { SelectionManager } from "./selection.js";
-import { cssLengthToPx, resolveLineHeight } from "./utils.js";
+import type { TextEditController } from "./editing.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
@@ -20,6 +26,16 @@ export function setSelectionManager(mgr: SelectionManager | null): void {
   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: TextEditController | null = null;
+export function setTextEditor(editor: TextEditController | null): void {
+  activeTextEditor = editor;
+}
+
 /**
  * Custom painters registry
  */
@@ -33,23 +49,170 @@ export function registerPainter(type: string, painter: PainterFunction): void {
 }
 
 /**
- * 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.
  */
-export function paintNode(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
-  if (!node.visible || !node.layout) return;
+const charAdvanceCache = new Map<string, Map<string, number>>();
+const MAX_CHAR_ADVANCE_FONTS = 32;
 
-  ctx.save();
+/**
+ * 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(): void {
+  charAdvanceCache.clear();
+}
 
-  // Apply transforms
-  applyTransforms(ctx, node);
+function charAdvance(ctx: CanvasRenderingContext2D, font: string, ch: string): number {
+  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;
+}
 
-  // Apply opacity
-  if (node.opacity < 1) {
-    ctx.globalAlpha = node.opacity;
+/**
+ * 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: Record<string, any>): boolean {
+  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: any): number {
+  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: VirtualNode, cull: Rectangle): boolean {
+  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: CanvasRenderingContext2D,
+  node: VirtualNode,
+  cull?: Rectangle | null,
+): void {
+  if (!node.visible || !node.layout) return;
+  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();
@@ -57,7 +220,7 @@ export function paintNode(ctx: CanvasRenderingContext2D, node: VirtualNode): voi
   }
 
   // Default painting based on type
-  switch (node.type.toLowerCase()) {
+  switch (type) {
     case "column":
     case "row":
     case "stack":
@@ -70,6 +233,7 @@ export function paintNode(ctx: CanvasRenderingContext2D, node: VirtualNode): voi
       paintButton(ctx, node);
       break;
     case "input":
+    case "textarea":
       paintInput(ctx, node);
       break;
     case "image":
@@ -127,14 +291,26 @@ export function paintNode(ctx: CanvasRenderingContext2D, node: VirtualNode): voi
       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 as any)._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
@@ -158,14 +334,21 @@ export function paintNode(ctx: CanvasRenderingContext2D, node: VirtualNode): voi
   // 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: VirtualNode[] = [];
-  const overlayKids: VirtualNode[] = [];
+  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 as any)._scrollRestore) {
@@ -205,14 +388,9 @@ function paintContainer(ctx: CanvasRenderingContext2D, node: VirtualNode): void
   }
 
   // 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);
@@ -271,14 +449,13 @@ function paintText(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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;
@@ -305,14 +482,15 @@ function paintText(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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;
@@ -356,11 +534,18 @@ function paintText(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
       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);
     }
   }
 
@@ -384,7 +569,7 @@ function paintButton(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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;
@@ -403,16 +588,12 @@ function paintButton(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
     backgroundColor = props.hoverColor;
   } 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();
   }
@@ -433,6 +614,18 @@ function paintButton(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
     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);
@@ -450,7 +643,7 @@ function paintInput(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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";
@@ -465,24 +658,76 @@ function paintInput(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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";
 
-  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;
+  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) {
     renderText(
       ctx,
-      text,
-      layout.x + layout.contentX,
+      value || placeholder,
+      g.contentX,
       layout.y + layout.contentY,
-      layout.contentWidth,
+      // 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,
@@ -490,11 +735,34 @@ function paintInput(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
         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();
 }
 
 /**
@@ -658,8 +926,10 @@ function paintImage(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
       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);
@@ -725,14 +995,6 @@ function drawRoundedRect(
   radius: number
 ): void {
   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;
   }
@@ -783,6 +1045,62 @@ function applyShadow(ctx: CanvasRenderingContext2D, shadow: any): void {
   }
 }
 
+/**
+ * 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: Record<string, any>): string | undefined {
+  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<string, CanvasGradient | string>();
+const MAX_GRADIENT_CACHE_SIZE = 256;
+
+function resolveCanvasPaint(
+  ctx: CanvasRenderingContext2D,
+  paint: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+): CanvasGradient | string {
+  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:
@@ -803,7 +1121,7 @@ function parseGradient(
     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;
@@ -813,29 +1131,20 @@ function parseGradient(
       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")) {
@@ -843,7 +1152,7 @@ function parseGradient(
     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;
@@ -853,17 +1162,116 @@ function parseGradient(
     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 as CanvasRenderingContext2D & {
+      createConicGradient?: (startAngle: number, x: number, y: number) => CanvasGradient;
+    }).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: string): string[] {
+  const parts: string[] = [];
+  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: string): number | null {
+  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: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+): { x0: number; y0: number; x1: number; y1: number } {
+  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: string, fallbackStop: number): { color: string; stop: number } {
+  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: CanvasGradient, rawStops: string[]): void {
+  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: string): string | undefined {
+  const first = splitCssArgs(input)[0];
+  if (!first) return undefined;
+  return parseColorStop(first, 0).color;
+}
+
 /**
  * Apply CSS-like transforms to canvas context
  * Supports:
@@ -1157,7 +1565,7 @@ function paintSlider(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
 
   // 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;
   }
@@ -1212,7 +1620,7 @@ function paintProgress(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
     // 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;
     }
@@ -1277,19 +1685,15 @@ function paintCard(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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();
@@ -1333,8 +1737,8 @@ function paintBadge(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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"}`;
@@ -1369,8 +1773,8 @@ function paintAvatar(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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"}`;
@@ -1510,8 +1914,7 @@ function paintLink(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   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";
@@ -1641,6 +2044,3 @@ function drawStar(
 
 
 
-
-
-