@hypen-space/web 0.4.956 → 0.5.2

package/src/canvas/paint.ts

@@ -205,14 +205,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);
@@ -383,7 +378,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;
@@ -402,16 +397,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();
   }
@@ -449,7 +440,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";
@@ -724,14 +715,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;
   }
@@ -782,6 +765,45 @@ 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;
+}
+
+function resolveCanvasPaint(
+  ctx: CanvasRenderingContext2D,
+  paint: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+): CanvasGradient | string {
+  return paint.includes("gradient(") ? parseGradient(ctx, paint, x, y, width, height) : paint;
+}
+
 /**
  * Parse gradient string and create canvas gradient
  * Supports:
@@ -802,7 +824,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;
@@ -812,29 +834,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")) {
@@ -842,7 +855,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;
@@ -852,17 +865,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:
@@ -1276,19 +1388,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();
@@ -1639,6 +1747,3 @@ function drawStar(
 
 
 
-
-
-

package/src/canvas/renderer.ts

@@ -35,6 +35,7 @@ import {
   refreshApplicator,
   parseApplicatorBase,
 } from "./props.js";
+import { applyVariants, invalidateVariantCache, deriveNodeComputed } from "./variants.js";
 
 const DEFAULT_OPTIONS: CanvasRendererOptions = {
   devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
@@ -73,10 +74,6 @@ export class CanvasRenderer implements Renderer {
   private rafId: number | null = null;
   private needsRedraw = false;
 
-  private resizeObserver: ResizeObserver | null = null;
-  private dprMediaQuery: MediaQueryList | null = null;
-  private dprChangeHandler: (() => void) | null = null;
-
   private frameCount = 0;
   private lastFrameTime = 0;
 
@@ -142,30 +139,6 @@ export class CanvasRenderer implements Renderer {
     // Eagerly initialise Taffy WASM for layout (non-blocking — fallback used until ready)
     initTaffyLayout();
 
-    // Observe size changes — without this, the canvas backing store stays
-    // pinned at construction-time dimensions while CSS stretches the
-    // display box, and content gets bitmap-stretched / hit-testing drifts.
-    if (typeof ResizeObserver !== "undefined") {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.setupHiDPI();
-        this.scheduleRedraw();
-      });
-      this.resizeObserver.observe(this.canvas);
-    }
-
-    // Track DPR changes (e.g. dragging window across monitors with
-    // different scaling). matchMedia fires once per crossing.
-    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-      const dpr = window.devicePixelRatio || 1;
-      this.dprMediaQuery = window.matchMedia(`(resolution: ${dpr}dppx)`);
-      this.dprChangeHandler = () => {
-        this.options.devicePixelRatio = window.devicePixelRatio || 1;
-        this.setupHiDPI();
-        this.scheduleRedraw();
-      };
-      this.dprMediaQuery.addEventListener("change", this.dprChangeHandler);
-    }
-
     // Don't schedule initial render - wait for patches
   }
 
@@ -176,18 +149,15 @@ export class CanvasRenderer implements Renderer {
     const dpr = this.options.devicePixelRatio || 1;
     const rect = this.canvas.getBoundingClientRect();
 
-    // Skip when the host is collapsed — a 0-pixel backing store throws
-    // in some 2D contexts and the next non-zero resize will reinitialise.
-    if (rect.width === 0 || rect.height === 0) return;
-
     this.canvas.width = rect.width * dpr;
     this.canvas.height = rect.height * dpr;
 
-    // Reset transform first — `scale()` is cumulative across calls, so on
-    // a resize the second call would compound (dpr²) and shrink content.
-    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
     this.ctx.scale(dpr, dpr);
 
+    // Update canvas display size
+    this.canvas.style.width = `${rect.width}px`;
+    this.canvas.style.height = `${rect.height}px`;
+
     // Sync dirty tracker with new canvas size
     if (this.dirtyTracker) {
       this.dirtyTracker.setCanvasSize(rect.width, rect.height);
@@ -325,6 +295,10 @@ export class CanvasRenderer implements Renderer {
 
     node.props[name] = value;
 
+    // A new key may introduce a variant marker (e.g. `padding@md.0`) — drop the
+    // cached variant-base set so the next frame rescans.
+    invalidateVariantCache(node);
+
     // If this is an applicator-namespaced key (e.g. `flex.0`, `onClick.to`),
     // rebuild the derived flat/aggregate entry under the base name so layout,
     // paint, and event dispatch see the updated value.
@@ -373,6 +347,8 @@ export class CanvasRenderer implements Renderer {
 
     delete node.props[name];
 
+    invalidateVariantCache(node);
+
     const base = parseApplicatorBase(name);
     if (base !== null) {
       refreshApplicator(node.props, base);
@@ -611,6 +587,20 @@ export class CanvasRenderer implements Renderer {
     }
   }
 
+  /**
+   * Re-derive cached computed fields that may have been overridden by variant
+   * resolution. `node.opacity` is read straight off `node.props.opacity` in
+   * paint, but it is cached on the node at create/setProp time — after a
+   * variant pass changes `props.opacity` (e.g. `opacity:disabled`), the cache
+   * must be refreshed or the paint would use the stale value.
+   */
+  private refreshComputedProps(node: VirtualNode): void {
+    deriveNodeComputed(node);
+    for (const child of node.children) {
+      this.refreshComputedProps(child);
+    }
+  }
+
   /**
    * Full canvas repaint (default behavior when dirty rects disabled)
    */
@@ -626,10 +616,17 @@ export class CanvasRenderer implements Renderer {
 
     // Layout and paint
     if (this.rootNode) {
+      // Resolve responsive + state variants against the current content width
+      // BEFORE layout so spacing/size winners feed the layout engine and
+      // colour/opacity winners feed paint.
+      const contentWidth = this.canvas.width / dpr;
+      applyVariants(this.rootNode, contentWidth);
+      this.refreshComputedProps(this.rootNode);
+
       computeLayout(
         this.ctx,
         this.rootNode,
-        this.canvas.width / dpr,
+        contentWidth,
         this.canvas.height / dpr
       );
 
@@ -649,10 +646,14 @@ export class CanvasRenderer implements Renderer {
   private renderWithDirtyRects(dpr: number): void {
     // Always run layout so nodes have up-to-date bounds
     if (this.rootNode) {
+      const contentWidth = this.canvas.width / dpr;
+      applyVariants(this.rootNode, contentWidth);
+      this.refreshComputedProps(this.rootNode);
+
       computeLayout(
         this.ctx,
         this.rootNode,
-        this.canvas.width / dpr,
+        contentWidth,
         this.canvas.height / dpr
       );
       ScrollManager.updateScrollBounds(this.rootNode);
@@ -764,15 +765,6 @@ export class CanvasRenderer implements Renderer {
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);
     }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    if (this.dprMediaQuery && this.dprChangeHandler) {
-      this.dprMediaQuery.removeEventListener("change", this.dprChangeHandler);
-      this.dprMediaQuery = null;
-      this.dprChangeHandler = null;
-    }
     this.eventManager.destroy();
     this.scrollManager.destroy();
     this.selectionManager.destroy();

package/src/canvas/types.ts

@@ -27,6 +27,20 @@ export interface VirtualNode {
 
   // Scroll state (managed by ScrollManager, not serialised)
   scrollState?: ScrollState;
+
+  // Pointer-pressed (active) state, tracked by the event manager from
+  // mousedown/mouseup so `:active` paint variants can resolve.
+  pressed?: boolean;
+
+  // --- Variant resolution bookkeeping (managed by applyVariants) ---
+  // Set of applicator base names that have at least one `@bp`/`:state` variant
+  // key on this node. Computed lazily; null means "not yet scanned", an empty
+  // set means "scanned, no variants".
+  variantBases?: Set<string> | null;
+  // Snapshot of the node's original (variant-free) base values, captured the
+  // first time a variant override is applied so each frame resolves from the
+  // un-overridden base instead of compounding overrides.
+  variantOriginals?: Record<string, unknown>;
 }
 
 export interface Layout {

package/src/canvas/utils.ts

@@ -12,42 +12,6 @@ import type { BoxSpacing, Rectangle, Point, VirtualNode } from "./types.js";
 // and treating `3.5rem` as 3.5px, collapsing whole layouts to 1/16 size.
 const ROOT_FONT_PX = 16;
 
-/**
- * Active layout viewport — used to resolve `vw` / `vh` correctly during a
- * layout pass. Set by `computeLayout` (layout.ts) at entry and cleared on
- * exit. Layout traversal is synchronous, so a single module-level slot is
- * sufficient and avoids threading a `viewport` parameter through every
- * `cssLengthToPx` call site (there are dozens).
- *
- * Falls back to `window.innerWidth` / `window.innerHeight` outside a layout
- * pass (e.g. for direct callers that resolve sizes ahead of layout). When
- * neither is available — e.g. headless tests — `vw`/`vh` degrade to the
- * pre-fix unitless-pixel behavior.
- */
-let currentViewport: { width: number; height: number } | null = null;
-
-export function setCurrentViewport(viewport: { width: number; height: number } | null): void {
-  currentViewport = viewport;
-}
-
-export function getCurrentViewport(): { width: number; height: number } | null {
-  return currentViewport;
-}
-
-function resolveViewportPx(unit: "vw" | "vh", n: number): number {
-  if (currentViewport) {
-    const dim = unit === "vw" ? currentViewport.width : currentViewport.height;
-    return (n / 100) * dim;
-  }
-  if (typeof window !== "undefined") {
-    const dim = unit === "vw" ? window.innerWidth : window.innerHeight;
-    if (Number.isFinite(dim) && dim > 0) return (n / 100) * dim;
-  }
-  // Last resort: treat as unitless px so the layout still gets a numeric
-  // value (matches pre-fix behavior in the no-viewport case).
-  return n;
-}
-
 /**
  * Parse a CSS length string (or number) into pixels.
  * Returns `null` for `"auto"` or unparseable input; returns `null` for `%`
@@ -69,8 +33,10 @@ export function cssLengthToPx(value: any): number | null {
     case "px": return n;
     case "rem":
     case "em": return n * ROOT_FONT_PX;
+    // We don't have a viewport reference here; treat vw/vh as unitless px
+    // fallback so the layout gets _some_ numeric value rather than zero.
     case "vw":
-    case "vh": return resolveViewportPx(unit, n);
+    case "vh": return n;
     // Typographic point — 1/72 inch at CSS reference density (96dpi).
     case "pt": return n * (96 / 72);
     // Density-independent (dp) and scale-independent (sp) logical pixels