@hypen-space/web 0.4.46 → 0.4.82

package/src/canvas/layout.ts

@@ -1,15 +1,634 @@
 /**
  * Layout Engine
  *
- * Flexbox-like layout system for positioning virtual nodes
+ * Uses Taffy (Rust/WASM) for spec-compliant CSS Flexbox, Grid, and Block
+ * layout. Falls back to a basic flexbox implementation in environments
+ * without WASM support (e.g. test runners).
  */
 
 import type { VirtualNode, Layout, BoxSpacing } from "./types.js";
 import { parseSpacing, parseSize } from "./utils.js";
 import { measureText } from "./text.js";
 
+// Taffy imports — loaded lazily to avoid hard failure when WASM unavailable
+let taffy: typeof import("taffy-layout") | null = null;
+let taffyReady = false;
+let taffyInitPromise: Promise<void> | null = null;
+
+/**
+ * Initialise the Taffy WASM module. Safe to call multiple times; only the
+ * first call actually loads WASM. Resolves immediately on subsequent calls.
+ */
+export async function initTaffyLayout(): Promise<boolean> {
+  if (taffyReady) return true;
+  if (taffyInitPromise) {
+    await taffyInitPromise;
+    return taffyReady;
+  }
+  taffyInitPromise = (async () => {
+    try {
+      taffy = await import("taffy-layout");
+      await taffy.loadTaffy();
+      taffyReady = true;
+    } catch {
+      taffy = null;
+      taffyReady = false;
+    }
+  })();
+  await taffyInitPromise;
+  return taffyReady;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers: map Hypen VirtualNode props → Taffy Style
+// ---------------------------------------------------------------------------
+
+/** Parse a Hypen prop value into a Taffy Dimension ("auto" | number | "N%") */
+function toDimension(value: any): "auto" | number | `${number}%` {
+  if (value === undefined || value === null || value === "auto") return "auto";
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    if (value.endsWith("%")) return value as `${number}%`;
+    const n = parseFloat(value);
+    return isNaN(n) ? "auto" : n;
+  }
+  return "auto";
+}
+
+function toLengthPct(value: any): number | `${number}%` {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    if (value.endsWith("%")) return value as `${number}%`;
+    const n = parseFloat(value);
+    return isNaN(n) ? 0 : n;
+  }
+  return 0;
+}
+
+function toLengthPctAuto(value: any): "auto" | number | `${number}%` {
+  if (value === "auto" || value === undefined || value === null) return "auto";
+  return toLengthPct(value) as any;
+}
+
 /**
- * Compute layout for a virtual node tree
+ * Build a Taffy Style from a VirtualNode's props. This centralises the
+ * mapping between Hypen's declarative property names and CSS-level concepts.
+ */
+function buildTaffyStyle(node: VirtualNode): InstanceType<typeof import("taffy-layout").Style> {
+  const T = taffy!;
+  const props = node.props;
+  const type = node.type.toLowerCase();
+
+  const style = new T.Style();
+
+  // --- Display / direction ---------------------------------------------------
+  const isColumn = type === "column" || props.flexDirection === "column";
+  const isGrid = type === "grid" || props.display === "grid";
+
+  if (isGrid) {
+    style.display = T.Display.Grid;
+
+    // --- Grid template tracks ------------------------------------------------
+    if (props.gridTemplateColumns) {
+      style.gridTemplateColumns = parseGridTemplate(props.gridTemplateColumns);
+    }
+    if (props.gridTemplateRows) {
+      style.gridTemplateRows = parseGridTemplate(props.gridTemplateRows);
+    }
+
+    // --- Grid auto flow ------------------------------------------------------
+    if (props.gridAutoFlow) {
+      style.gridAutoFlow = mapGridAutoFlow(T, props.gridAutoFlow);
+    }
+
+    // --- Grid auto tracks ----------------------------------------------------
+    if (props.gridAutoColumns) {
+      style.gridAutoColumns = parseTrackSizingList(props.gridAutoColumns);
+    }
+    if (props.gridAutoRows) {
+      style.gridAutoRows = parseTrackSizingList(props.gridAutoRows);
+    }
+
+    // --- Grid template areas -------------------------------------------------
+    if (props.gridTemplateAreas) {
+      style.gridTemplateAreas = parseGridTemplateAreas(props.gridTemplateAreas);
+    }
+  } else {
+    style.display = T.Display.Flex;
+  }
+
+  style.flexDirection = isColumn ? T.FlexDirection.Column : T.FlexDirection.Row;
+
+  // --- Grid child placement (applies regardless of parent display) ----------
+  if (props.gridColumn) {
+    style.gridColumn = parseGridLine(props.gridColumn);
+  }
+  if (props.gridRow) {
+    style.gridRow = parseGridLine(props.gridRow);
+  }
+  if (props.gridColumnStart !== undefined) {
+    style.gridColumnStart = parseGridPlacement(props.gridColumnStart);
+  }
+  if (props.gridColumnEnd !== undefined) {
+    style.gridColumnEnd = parseGridPlacement(props.gridColumnEnd);
+  }
+  if (props.gridRowStart !== undefined) {
+    style.gridRowStart = parseGridPlacement(props.gridRowStart);
+  }
+  if (props.gridRowEnd !== undefined) {
+    style.gridRowEnd = parseGridPlacement(props.gridRowEnd);
+  }
+
+  // --- Flex properties -------------------------------------------------------
+  style.flexGrow = parseFloat(props.flexGrow) || parseFloat(props.flex) || 0;
+  style.flexShrink = props.flexShrink !== undefined ? parseFloat(props.flexShrink) : 1;
+  if (props.flexBasis !== undefined) style.flexBasis = toDimension(props.flexBasis);
+
+  if (props.flexWrap === "wrap") style.flexWrap = T.FlexWrap.Wrap;
+  else if (props.flexWrap === "wrap-reverse") style.flexWrap = T.FlexWrap.WrapReverse;
+
+  // --- Alignment (Hypen uses verticalAlignment / horizontalAlignment) --------
+  const justifyRaw = isColumn
+    ? (props.verticalAlignment || props.justifyContent)
+    : (props.horizontalAlignment || props.justifyContent);
+  const alignRaw = isColumn
+    ? (props.horizontalAlignment || props.alignItems)
+    : (props.verticalAlignment || props.alignItems);
+
+  if (justifyRaw) style.justifyContent = mapJustify(T, justifyRaw);
+  if (alignRaw) style.alignItems = mapAlign(T, alignRaw);
+
+  // --- Size ------------------------------------------------------------------
+  const w = parseSize(props.width);
+  const h = parseSize(props.height);
+
+  // Component-type defaults
+  if (type === "app" || type === "spacer") {
+    style.size = {
+      width: w !== null ? w : "100%",
+      height: h !== null ? h : "100%",
+    };
+  } else if (type === "divider" || type === "separator") {
+    const orientation = props.orientation || "horizontal";
+    const thickness = parseFloat(props.thickness) || 1;
+    if (orientation === "vertical") {
+      style.size = { width: w ?? thickness, height: h !== null ? h : "100%" };
+    } else {
+      style.size = { width: w !== null ? w : "100%", height: h ?? thickness };
+    }
+  } else if (type === "checkbox" || type === "radio") {
+    const sz = parseFloat(props.size) || 20;
+    style.size = { width: w ?? sz, height: h ?? sz };
+  } else if (type === "switch" || type === "toggle") {
+    style.size = { width: w ?? 44, height: h ?? 24 };
+  } else if (type === "slider") {
+    style.size = { width: w ?? 200, height: h ?? 20 };
+  } else if (type === "progress" || type === "progressbar") {
+    style.size = { width: w ?? 200, height: h ?? 8 };
+  } else if (type === "spinner" || type === "loading") {
+    const sz = parseFloat(props.size) || 24;
+    style.size = { width: w ?? sz, height: h ?? sz };
+  } else if (type === "badge") {
+    style.size = { width: w ?? 20, height: h ?? 20 };
+  } else if (type === "avatar") {
+    const sz = parseFloat(props.size) || 40;
+    style.size = { width: w ?? sz, height: h ?? sz };
+  } else if (type === "icon") {
+    const sz = parseFloat(props.size) || 24;
+    style.size = { width: w ?? sz, height: h ?? sz };
+  } else {
+    style.size = { width: toDimension(props.width), height: toDimension(props.height) };
+  }
+
+  // --- Min / Max constraints -------------------------------------------------
+  if (props.minWidth !== undefined || props.minHeight !== undefined) {
+    style.minSize = {
+      width: toDimension(props.minWidth),
+      height: toDimension(props.minHeight),
+    };
+  }
+  if (props.maxWidth !== undefined || props.maxHeight !== undefined) {
+    style.maxSize = {
+      width: toDimension(props.maxWidth),
+      height: toDimension(props.maxHeight),
+    };
+  }
+
+  // --- Margin ----------------------------------------------------------------
+  const m = parseSpacing(props.margin || 0);
+  if (props.marginTop !== undefined) m.top = parseFloat(props.marginTop) || 0;
+  if (props.marginRight !== undefined) m.right = parseFloat(props.marginRight) || 0;
+  if (props.marginBottom !== undefined) m.bottom = parseFloat(props.marginBottom) || 0;
+  if (props.marginLeft !== undefined) m.left = parseFloat(props.marginLeft) || 0;
+  style.margin = { top: m.top, right: m.right, bottom: m.bottom, left: m.left };
+
+  // --- Padding ---------------------------------------------------------------
+  const p = parseSpacing(props.padding || 0);
+  if (props.paddingTop !== undefined) p.top = parseFloat(props.paddingTop) || 0;
+  if (props.paddingRight !== undefined) p.right = parseFloat(props.paddingRight) || 0;
+  if (props.paddingBottom !== undefined) p.bottom = parseFloat(props.paddingBottom) || 0;
+  if (props.paddingLeft !== undefined) p.left = parseFloat(props.paddingLeft) || 0;
+  style.padding = { top: p.top, right: p.right, bottom: p.bottom, left: p.left };
+
+  // --- Border ----------------------------------------------------------------
+  const bw = parseFloat(props.borderWidth) || 0;
+  if (bw > 0) {
+    style.border = { top: bw, right: bw, bottom: bw, left: bw };
+  }
+
+  // --- Gap -------------------------------------------------------------------
+  const gap = parseFloat(props.gap) || 0;
+  if (gap > 0) {
+    style.gap = { width: gap, height: gap };
+  }
+
+  // --- Position (absolute) ---------------------------------------------------
+  if (props.position === "absolute") {
+    style.position = T.Position.Absolute;
+    if (props.top !== undefined) style.top = toLengthPctAuto(props.top);
+    if (props.left !== undefined) style.left = toLengthPctAuto(props.left);
+    if (props.right !== undefined) style.right = toLengthPctAuto(props.right);
+    if (props.bottom !== undefined) style.bottom = toLengthPctAuto(props.bottom);
+  }
+
+  return style;
+}
+
+function mapJustify(T: typeof import("taffy-layout"), value: string) {
+  switch (value) {
+    case "center": return T.JustifyContent.Center;
+    case "flex-end": case "end": return T.JustifyContent.End;
+    case "space-between": return T.JustifyContent.SpaceBetween;
+    case "space-around": return T.JustifyContent.SpaceAround;
+    case "space-evenly": return T.JustifyContent.SpaceEvenly;
+    default: return T.JustifyContent.Start;
+  }
+}
+
+function mapAlign(T: typeof import("taffy-layout"), value: string) {
+  switch (value) {
+    case "center": return T.AlignItems.Center;
+    case "flex-end": case "end": return T.AlignItems.End;
+    case "stretch": return T.AlignItems.Stretch;
+    case "baseline": return T.AlignItems.Baseline;
+    default: return T.AlignItems.Start;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Grid helpers: parse Hypen prop values → Taffy grid types
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse a single track sizing value like "100", "auto", "1fr", "50%",
+ * "min-content", "max-content" into a TrackSizingFunction.
+ */
+function parseTrackSizing(value: string | number): { min: any; max: any } {
+  if (typeof value === "number") {
+    return { min: value, max: value };
+  }
+
+  const s = String(value).trim();
+  if (s === "auto") return { min: "auto", max: "auto" };
+  if (s === "min-content") return { min: "min-content", max: "min-content" };
+  if (s === "max-content") return { min: "max-content", max: "max-content" };
+
+  // Fractional units e.g. "1fr", "2.5fr"
+  if (s.endsWith("fr")) {
+    return { min: "auto", max: s as `${number}fr` };
+  }
+
+  // Percentage e.g. "50%"
+  if (s.endsWith("%")) {
+    return { min: s as `${number}%`, max: s as `${number}%` };
+  }
+
+  // Plain number in a string
+  const n = parseFloat(s);
+  if (!isNaN(n)) {
+    return { min: n, max: n };
+  }
+
+  return { min: "auto", max: "auto" };
+}
+
+/**
+ * Parse a grid-template-columns / grid-template-rows value.
+ * Accepts:
+ *   - An array of values: [100, "1fr", "auto"]
+ *   - A space-separated string: "100 1fr auto"
+ *   - A single value: "1fr"
+ */
+function parseGridTemplate(value: any): any[] {
+  if (Array.isArray(value)) {
+    return value.map(parseTrackSizing);
+  }
+  if (typeof value === "string") {
+    return value.split(/\s+/).filter(Boolean).map(parseTrackSizing);
+  }
+  if (typeof value === "number") {
+    return [parseTrackSizing(value)];
+  }
+  return [];
+}
+
+/**
+ * Parse grid-auto-columns / grid-auto-rows (TrackSizingFunction[]).
+ * Same format as template tracks but semantically for implicit tracks.
+ */
+function parseTrackSizingList(value: any): any[] {
+  return parseGridTemplate(value);
+}
+
+/** Map a gridAutoFlow string to Taffy's GridAutoFlow enum. */
+function mapGridAutoFlow(T: typeof import("taffy-layout"), value: string) {
+  switch (value) {
+    case "column": return T.GridAutoFlow.Column;
+    case "row-dense": case "dense": return T.GridAutoFlow.RowDense;
+    case "column-dense": return T.GridAutoFlow.ColumnDense;
+    default: return T.GridAutoFlow.Row;
+  }
+}
+
+/**
+ * Parse a single GridPlacement value.
+ * Accepts: "auto", a number (line index), or { span: N }.
+ */
+function parseGridPlacement(value: any): any {
+  if (value === "auto" || value === undefined || value === null) return "auto";
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed === "auto") return "auto";
+    // "span N"
+    const spanMatch = trimmed.match(/^span\s+(\d+)$/);
+    if (spanMatch) return { span: parseInt(spanMatch[1], 10) };
+    const n = parseInt(trimmed, 10);
+    if (!isNaN(n)) return n;
+    return "auto";
+  }
+  // Already an object like { span: 2 } or { line: 1, ident: "foo" }
+  if (typeof value === "object") return value;
+  return "auto";
+}
+
+/**
+ * Parse a grid-column / grid-row shorthand into a Line<GridPlacement>.
+ * Accepts:
+ *   - An object { start, end }
+ *   - A string "1 / 3" or "1 / span 2"
+ */
+function parseGridLine(value: any): { start: any; end: any } {
+  if (typeof value === "object" && value !== null && "start" in value) {
+    return {
+      start: parseGridPlacement(value.start),
+      end: parseGridPlacement(value.end),
+    };
+  }
+  if (typeof value === "string") {
+    const parts = value.split("/").map((s: string) => s.trim());
+    return {
+      start: parseGridPlacement(parts[0]),
+      end: parts.length > 1 ? parseGridPlacement(parts[1]) : "auto",
+    };
+  }
+  return { start: "auto", end: "auto" };
+}
+
+/**
+ * Parse grid-template-areas.
+ * Accepts an array of strings like ["header header", "sidebar main", "footer footer"].
+ * Each string is a row; each word is a cell name (or "." for empty).
+ * Returns an array of GridTemplateArea objects.
+ */
+function parseGridTemplateAreas(value: any): any[] {
+  if (!Array.isArray(value)) return [];
+
+  const rows: string[][] = value.map((row: string) =>
+    String(row).split(/\s+/).filter(Boolean)
+  );
+
+  if (rows.length === 0) return [];
+
+  // Collect unique area names (skip "." which means empty)
+  const areaNames = new Set<string>();
+  for (const row of rows) {
+    for (const cell of row) {
+      if (cell !== ".") areaNames.add(cell);
+    }
+  }
+
+  // For each area name, find its bounding rectangle
+  const areas: any[] = [];
+  for (const name of areaNames) {
+    let rowStart = Infinity, rowEnd = -1, colStart = Infinity, colEnd = -1;
+    for (let r = 0; r < rows.length; r++) {
+      for (let c = 0; c < rows[r].length; c++) {
+        if (rows[r][c] === name) {
+          rowStart = Math.min(rowStart, r + 1);
+          rowEnd = Math.max(rowEnd, r + 2); // end line is exclusive
+          colStart = Math.min(colStart, c + 1);
+          colEnd = Math.max(colEnd, c + 2);
+        }
+      }
+    }
+    if (rowEnd > 0) {
+      areas.push({ name, rowStart, rowEnd, columnStart: colStart, columnEnd: colEnd });
+    }
+  }
+
+  return areas;
+}
+
+// ---------------------------------------------------------------------------
+// Taffy-based layout
+// ---------------------------------------------------------------------------
+
+interface TextMeasureContext {
+  text: string;
+  fontSize: number;
+  fontWeight: string | number;
+  fontFamily: string;
+  lineHeight: number;
+  paddingH: number;
+  paddingV: number;
+}
+
+/**
+ * Build a TaffyTree mirroring the VirtualNode tree. Returns the root Taffy
+ * node id and a mapping from Taffy node ids → VirtualNodes.
+ */
+function buildTree(
+  tree: InstanceType<typeof import("taffy-layout").TaffyTree>,
+  node: VirtualNode,
+): bigint {
+  const T = taffy!;
+  const props = node.props;
+  const style = buildTaffyStyle(node);
+
+  // Text leaf nodes — create with measurement context
+  if (node.type === "text" && props[0] && node.children.length === 0) {
+    const text = String(props[0] || "");
+    const fontSize = parseFloat(props.fontSize) || 16;
+    const fontWeight = props.fontWeight || "normal";
+    const fontFamily = props.fontFamily || "system-ui, sans-serif";
+    const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
+
+    const p = parseSpacing(props.padding || 0);
+    if (props.paddingTop !== undefined) p.top = parseFloat(props.paddingTop) || 0;
+    if (props.paddingRight !== undefined) p.right = parseFloat(props.paddingRight) || 0;
+    if (props.paddingBottom !== undefined) p.bottom = parseFloat(props.paddingBottom) || 0;
+    if (props.paddingLeft !== undefined) p.left = parseFloat(props.paddingLeft) || 0;
+
+    const ctx: TextMeasureContext = {
+      text,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      lineHeight,
+      paddingH: p.left + p.right,
+      paddingV: p.top + p.bottom,
+    };
+
+    return tree.newLeafWithContext(style, ctx);
+  }
+
+  // Container nodes
+  const childIds: bigint[] = [];
+  for (const child of node.children) {
+    childIds.push(buildTree(tree, child));
+  }
+
+  return tree.newWithChildren(style, childIds);
+}
+
+/**
+ * Walk the TaffyTree in the same order as the VirtualNode tree and write
+ * computed layout data back to each VirtualNode.
+ *
+ * @param isRoot - true for the root node, where Taffy's x/y are 0 and
+ *                 margin must be added manually to match the expected
+ *                 absolute-position convention.
+ */
+function writeLayout(
+  tree: InstanceType<typeof import("taffy-layout").TaffyTree>,
+  taffyId: bigint,
+  node: VirtualNode,
+  parentX: number,
+  parentY: number,
+  isRoot: boolean = false,
+): void {
+  const tl = tree.getLayout(taffyId);
+
+  // Taffy positions children relative to parent's content area (margin
+  // included in x/y). For the root node there is no parent, so Taffy
+  // reports x=0/y=0 — we must add the margin ourselves.
+  const absX = parentX + tl.x + (isRoot ? tl.marginLeft : 0);
+  const absY = parentY + tl.y + (isRoot ? tl.marginTop : 0);
+
+  const borderColor = node.props.borderColor || "transparent";
+  const borderRadius = parseFloat(node.props.borderRadius) || 0;
+  // Taffy computes uniform border width per side; pick top as representative
+  const borderWidth = tl.borderTop;
+
+  const layout: Layout = {
+    x: absX,
+    y: absY,
+    width: tl.width,
+    height: tl.height,
+    margin: {
+      top: tl.marginTop,
+      right: tl.marginRight,
+      bottom: tl.marginBottom,
+      left: tl.marginLeft,
+    },
+    padding: {
+      top: tl.paddingTop,
+      right: tl.paddingRight,
+      bottom: tl.paddingBottom,
+      left: tl.paddingLeft,
+    },
+    border: {
+      width: borderWidth,
+      color: borderColor,
+      radius: borderRadius,
+    },
+    contentX: tl.paddingLeft + borderWidth,
+    contentY: tl.paddingTop + borderWidth,
+    contentWidth: tl.width - tl.paddingLeft - tl.paddingRight - borderWidth * 2,
+    contentHeight: tl.height - tl.paddingTop - tl.paddingBottom - borderWidth * 2,
+  };
+
+  node.layout = layout;
+
+  // Recurse children (same order as buildTree)
+  for (let i = 0; i < node.children.length; i++) {
+    const childTaffyId = tree.getChildAtIndex(taffyId, i);
+    writeLayout(tree, childTaffyId, node.children[i], absX, absY);
+  }
+}
+
+/**
+ * Compute layout for a virtual node tree using Taffy.
+ * Requires `initTaffyLayout()` to have been called and resolved.
+ */
+function computeLayoutTaffy(
+  ctx: CanvasRenderingContext2D,
+  node: VirtualNode,
+  availableWidth: number,
+  availableHeight: number,
+  x: number,
+  y: number,
+): void {
+  const T = taffy!;
+  const tree = new T.TaffyTree();
+
+  try {
+    const rootId = buildTree(tree, node);
+
+    // Compute layout with a measure function for text leaf nodes
+    tree.computeLayoutWithMeasure(
+      rootId,
+      { width: availableWidth, height: availableHeight },
+      (knownDimensions, availableSpace, _nodeId, context, _style) => {
+        const tctx = context as TextMeasureContext | undefined;
+        if (!tctx?.text) {
+          return { width: knownDimensions.width ?? 0, height: knownDimensions.height ?? 0 };
+        }
+
+        const maxWidth = typeof availableSpace.width === "number"
+          ? availableSpace.width - tctx.paddingH
+          : undefined;
+
+        const metrics = measureText(ctx, tctx.text, {
+          fontSize: tctx.fontSize,
+          fontWeight: tctx.fontWeight,
+          fontFamily: tctx.fontFamily,
+          lineHeight: tctx.lineHeight,
+        }, maxWidth);
+
+        return {
+          width: knownDimensions.width ?? (metrics.width + tctx.paddingH),
+          height: knownDimensions.height ?? (metrics.height + tctx.paddingV),
+        };
+      },
+    );
+
+    writeLayout(tree, rootId, node, x, y, /* isRoot */ true);
+  } finally {
+    tree.free();
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute layout for a virtual node tree.
+ *
+ * Uses Taffy (WASM) when available for spec-compliant CSS Flexbox/Grid/Block
+ * layout. Falls back to a basic JS flexbox implementation otherwise.
  */
 export function computeLayout(
   ctx: CanvasRenderingContext2D,
@@ -17,19 +636,35 @@ export function computeLayout(
   availableWidth: number,
   availableHeight: number,
   x: number = 0,
-  y: number = 0
+  y: number = 0,
+): void {
+  if (taffyReady && taffy) {
+    computeLayoutTaffy(ctx, node, availableWidth, availableHeight, x, y);
+  } else {
+    computeLayoutFallback(ctx, node, availableWidth, availableHeight, x, y);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Fallback: original JS flexbox implementation (used in tests / non-WASM)
+// ---------------------------------------------------------------------------
+
+function computeLayoutFallback(
+  ctx: CanvasRenderingContext2D,
+  node: VirtualNode,
+  availableWidth: number,
+  availableHeight: number,
+  x: number = 0,
+  y: number = 0,
 ): void {
-  // Parse props
   const props = node.props;
 
-  // Support individual margins (marginTop, marginRight, etc.)
   let margin = parseSpacing(props.margin || 0);
   if (props.marginTop !== undefined) margin.top = parseFloat(props.marginTop) || 0;
   if (props.marginRight !== undefined) margin.right = parseFloat(props.marginRight) || 0;
   if (props.marginBottom !== undefined) margin.bottom = parseFloat(props.marginBottom) || 0;
   if (props.marginLeft !== undefined) margin.left = parseFloat(props.marginLeft) || 0;
 
-  // Support individual padding (paddingTop, paddingRight, etc.)
   let padding = parseSpacing(props.padding || 0);
   if (props.paddingTop !== undefined) padding.top = parseFloat(props.paddingTop) || 0;
   if (props.paddingRight !== undefined) padding.right = parseFloat(props.paddingRight) || 0;
@@ -40,31 +675,25 @@ export function computeLayout(
   const borderColor = props.borderColor || "transparent";
   const borderRadius = parseFloat(props.borderRadius) || 0;
 
-  // Calculate available space after margin
   const availableAfterMargin = {
     width: availableWidth - margin.left - margin.right,
     height: availableHeight - margin.top - margin.bottom,
   };
 
-  // Determine size
   let width = parseSize(props.width);
   let height = parseSize(props.height);
 
-  // Default sizing for specific component types
   const type = node.type.toLowerCase();
 
   if (type === "app") {
-    // App fills the full available space by default
     if (width === null) width = availableAfterMargin.width;
     if (height === null) height = availableAfterMargin.height;
   } else if (type === "spacer") {
-    // Spacer fills available space by default
     if (width === null) width = availableAfterMargin.width;
     if (height === null) height = availableAfterMargin.height;
   } else if (type === "divider" || type === "separator") {
     const orientation = props.orientation || "horizontal";
     const thickness = parseFloat(props.thickness) || 1;
-
     if (orientation === "vertical") {
       if (width === null) width = thickness;
       if (height === null) height = availableAfterMargin.height;
@@ -102,7 +731,6 @@ export function computeLayout(
     if (height === null) height = size;
   }
 
-  // Intrinsic sizing for text nodes
   if (node.type === "text" && node.props[0]) {
     const text = String(node.props[0] || "");
     const fontSize = parseFloat(props.fontSize) || 16;
@@ -117,11 +745,9 @@ export function computeLayout(
     if (!height) height = metrics.height + padding.top + padding.bottom;
   }
 
-  // Default to available size if not specified
   if (width === null) width = availableAfterMargin.width;
   if (height === null) height = availableAfterMargin.height;
 
-  // Apply constraints
   const minWidth = parseSize(props.minWidth);
   const maxWidth = parseSize(props.maxWidth);
   const minHeight = parseSize(props.minHeight);
@@ -132,7 +758,6 @@ export function computeLayout(
   if (minHeight !== null) height = Math.max(height, minHeight);
   if (maxHeight !== null) height = Math.min(height, maxHeight);
 
-  // Create layout object
   const layout: Layout = {
     x: x + margin.left,
     y: y + margin.top,
@@ -153,29 +778,23 @@ export function computeLayout(
 
   node.layout = layout;
 
-  // Layout children if container
   if (node.children.length > 0) {
-    layoutChildren(ctx, node);
+    layoutChildrenFallback(ctx, node);
   }
 }
 
-/**
- * Layout children using flexbox-like rules
- */
-function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): void {
+function layoutChildrenFallback(ctx: CanvasRenderingContext2D, parent: VirtualNode): void {
   const layout = parent.layout!;
   const props = parent.props;
 
-  // Stack components overlay children on top of each other
   if (parent.type.toLowerCase() === "stack") {
-    layoutStackChildren(ctx, parent);
+    layoutStackChildrenFallback(ctx, parent);
     return;
   }
 
   const flexDirection = props.flexDirection || (parent.type === "column" ? "column" : "row");
   const isColumn = flexDirection === "column";
 
-  // Resolve verticalAlignment/horizontalAlignment to main/cross axis based on direction
   const justifyContent = isColumn
     ? (props.verticalAlignment || "flex-start")
     : (props.horizontalAlignment || "flex-start");
@@ -187,7 +806,6 @@ function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): voi
   const availableWidth = layout.contentWidth;
   const availableHeight = layout.contentHeight;
 
-  // First pass: compute intrinsic sizes and collect flex info
   const childInfo: Array<{
     width: number;
     height: number;
@@ -204,20 +822,11 @@ function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): voi
     const flexShrink = parseFloat(child.props.flexShrink) || 1;
     const flexBasis = parseSize(child.props.flexBasis);
 
-    // Compute child layout with available space
-    computeLayout(
-      ctx,
-      child,
-      availableWidth,
-      availableHeight,
-      0,
-      0
-    );
+    computeLayoutFallback(ctx, child, availableWidth, availableHeight, 0, 0);
 
     const childLayout = child.layout!;
     let mainSize = isColumn ? childLayout.height : childLayout.width;
 
-    // Use flexBasis if specified
     if (flexBasis !== null) {
       mainSize = flexBasis;
       if (isColumn) {
@@ -227,73 +836,49 @@ function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): voi
       }
     }
 
-    childInfo.push({
-      width: childLayout.width,
-      height: childLayout.height,
-      flexGrow,
-      flexShrink,
-      flexBasis,
-    });
-
+    childInfo.push({ width: childLayout.width, height: childLayout.height, flexGrow, flexShrink, flexBasis });
     totalMainSize += mainSize;
     totalFlexGrow += flexGrow;
     totalFlexShrink += flexShrink;
   }
 
-  // Add gaps
   const totalGap = gap * (parent.children.length - 1);
   totalMainSize += totalGap;
 
-  // Apply flex grow/shrink
   const availableMain = isColumn ? availableHeight : availableWidth;
   let remainingSpace = availableMain - totalMainSize;
 
-  // Distribute remaining space to flex-grow children
   if (remainingSpace > 0 && totalFlexGrow > 0) {
     const spacePerFlex = remainingSpace / totalFlexGrow;
-
     for (let i = 0; i < parent.children.length; i++) {
       const info = childInfo[i];
       if (info.flexGrow > 0) {
         const extraSpace = spacePerFlex * info.flexGrow;
-        if (isColumn) {
-          info.height += extraSpace;
-        } else {
-          info.width += extraSpace;
-        }
+        if (isColumn) info.height += extraSpace;
+        else info.width += extraSpace;
         totalMainSize += extraSpace;
       }
     }
-
     remainingSpace = 0;
   }
 
-  // Apply flex shrink if needed (content is too large)
   if (remainingSpace < 0 && totalFlexShrink > 0) {
     const shrinkPerFlex = Math.abs(remainingSpace) / totalFlexShrink;
-
     for (let i = 0; i < parent.children.length; i++) {
       const info = childInfo[i];
       if (info.flexShrink > 0) {
         const shrinkSpace = Math.min(
           shrinkPerFlex * info.flexShrink,
-          isColumn ? info.height : info.width
+          isColumn ? info.height : info.width,
         );
-
-        if (isColumn) {
-          info.height = Math.max(0, info.height - shrinkSpace);
-        } else {
-          info.width = Math.max(0, info.width - shrinkSpace);
-        }
-
+        if (isColumn) info.height = Math.max(0, info.height - shrinkSpace);
+        else info.width = Math.max(0, info.width - shrinkSpace);
         totalMainSize -= shrinkSpace;
       }
     }
-
     remainingSpace = availableMain - totalMainSize;
   }
 
-  // Calculate starting position based on justifyContent
   let mainStart = 0;
   let spacing = 0;
 
@@ -308,7 +893,6 @@ function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): voi
     mainStart = spacing / 2;
   }
 
-  // Position children
   let currentMain = mainStart;
 
   for (let i = 0; i < parent.children.length; i++) {
@@ -316,11 +900,9 @@ function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): voi
     const childLayout = child.layout!;
     const info = childInfo[i];
 
-    // Update child layout with flex-adjusted size
     childLayout.width = info.width;
     childLayout.height = info.height;
 
-    // Calculate cross position based on alignItems
     let crossStart = 0;
     const availableCross = isColumn ? availableWidth : availableHeight;
     const childCross = isColumn ? info.width : info.height;
@@ -331,7 +913,6 @@ function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): voi
       crossStart = availableCross - childCross;
     }
 
-    // Update child position relative to parent content area
     if (isColumn) {
       childLayout.x = layout.x + layout.contentX + crossStart;
       childLayout.y = layout.y + layout.contentY + currentMain;
@@ -348,65 +929,37 @@ function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): voi
   }
 }
 
-/**
- * Layout Stack children - overlays children on top of each other
- */
-function layoutStackChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): void {
+function layoutStackChildrenFallback(ctx: CanvasRenderingContext2D, parent: VirtualNode): void {
   const layout = parent.layout!;
   const props = parent.props;
 
-  // Stack uses horizontalAlignment/verticalAlignment directly
   const horizontalAlignment = props.horizontalAlignment || "flex-start";
   const verticalAlignment = props.verticalAlignment || "flex-start";
 
   const availableWidth = layout.contentWidth;
   const availableHeight = layout.contentHeight;
 
-  // Layout all children at the same position (stacked on top of each other)
   for (const child of parent.children) {
-    // Compute child layout
-    computeLayout(
-      ctx,
-      child,
-      availableWidth,
-      availableHeight,
-      0,
-      0
-    );
+    computeLayoutFallback(ctx, child, availableWidth, availableHeight, 0, 0);
 
     const childLayout = child.layout!;
 
-    // Calculate position based on alignment
     let x = 0;
     let y = 0;
 
-    // Horizontal alignment
     if (horizontalAlignment === "center") {
       x = (availableWidth - childLayout.width) / 2;
     } else if (horizontalAlignment === "flex-end") {
       x = availableWidth - childLayout.width;
     }
 
-    // Vertical alignment
     if (verticalAlignment === "center") {
       y = (availableHeight - childLayout.height) / 2;
     } else if (verticalAlignment === "flex-end") {
       y = availableHeight - childLayout.height;
     }
 
-    // Update child position relative to parent content area
     childLayout.x = layout.x + layout.contentX + x;
     childLayout.y = layout.y + layout.contentY + y;
   }
 }
-
-
-
-
-
-
-
-
-
-
-