@hypen-space/web 0.4.46 → 0.4.82

package/dist/canvas/layout.js

@@ -1,17 +1,595 @@
 /**
  * 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 { parseSpacing, parseSize } from "./utils.js";
 import { measureText } from "./text.js";
+// Taffy imports — loaded lazily to avoid hard failure when WASM unavailable
+let taffy = null;
+let taffyReady = false;
+let taffyInitPromise = null;
 /**
- * Compute layout for a virtual node tree
+ * 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() {
+    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) {
+    if (value === undefined || value === null || value === "auto")
+        return "auto";
+    if (typeof value === "number")
+        return value;
+    if (typeof value === "string") {
+        if (value.endsWith("%"))
+            return value;
+        const n = parseFloat(value);
+        return isNaN(n) ? "auto" : n;
+    }
+    return "auto";
+}
+function toLengthPct(value) {
+    if (typeof value === "number")
+        return value;
+    if (typeof value === "string") {
+        if (value.endsWith("%"))
+            return value;
+        const n = parseFloat(value);
+        return isNaN(n) ? 0 : n;
+    }
+    return 0;
+}
+function toLengthPctAuto(value) {
+    if (value === "auto" || value === undefined || value === null)
+        return "auto";
+    return toLengthPct(value);
+}
+/**
+ * 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) {
+    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, value) {
+    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, value) {
+    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) {
+    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 };
+    }
+    // Percentage e.g. "50%"
+    if (s.endsWith("%")) {
+        return { min: s, max: s };
+    }
+    // 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) {
+    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) {
+    return parseGridTemplate(value);
+}
+/** Map a gridAutoFlow string to Taffy's GridAutoFlow enum. */
+function mapGridAutoFlow(T, value) {
+    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) {
+    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) {
+    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) => 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) {
+    if (!Array.isArray(value))
+        return [];
+    const rows = value.map((row) => String(row).split(/\s+/).filter(Boolean));
+    if (rows.length === 0)
+        return [];
+    // Collect unique area names (skip "." which means empty)
+    const areaNames = new Set();
+    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 = [];
+    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;
+}
+/**
+ * Build a TaffyTree mirroring the VirtualNode tree. Returns the root Taffy
+ * node id and a mapping from Taffy node ids → VirtualNodes.
+ */
+function buildTree(tree, node) {
+    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 = {
+            text,
+            fontSize,
+            fontWeight,
+            fontFamily,
+            lineHeight,
+            paddingH: p.left + p.right,
+            paddingV: p.top + p.bottom,
+        };
+        return tree.newLeafWithContext(style, ctx);
+    }
+    // Container nodes
+    const childIds = [];
+    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, taffyId, node, parentX, parentY, isRoot = false) {
+    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 = {
+        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, node, availableWidth, availableHeight, x, y) {
+    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;
+            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, node, availableWidth, availableHeight, x = 0, y = 0) {
-    // Parse props
+    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, node, availableWidth, availableHeight, x = 0, y = 0) {
     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;
@@ -21,7 +599,6 @@ export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0,
         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;
@@ -34,25 +611,20 @@ export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0,
     const borderWidth = parseFloat(props.borderWidth) || 0;
     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)
@@ -126,7 +698,6 @@ export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0,
         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;
@@ -140,12 +711,10 @@ export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0,
         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);
@@ -158,7 +727,6 @@ export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0,
         height = Math.max(height, minHeight);
     if (maxHeight !== null)
         height = Math.min(height, maxHeight);
-    // Create layout object
     const layout = {
         x: x + margin.left,
         y: y + margin.top,
@@ -177,25 +745,19 @@ export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0,
         contentHeight: height - padding.top - padding.bottom - borderWidth * 2,
     };
     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, parent) {
+function layoutChildrenFallback(ctx, parent) {
     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");
@@ -205,7 +767,6 @@ function layoutChildren(ctx, parent) {
     const gap = parseFloat(props.gap) || 0;
     const availableWidth = layout.contentWidth;
     const availableHeight = layout.contentHeight;
-    // First pass: compute intrinsic sizes and collect flex info
     const childInfo = [];
     let totalMainSize = 0;
     let totalFlexGrow = 0;
@@ -214,11 +775,9 @@ function layoutChildren(ctx, parent) {
         const flexGrow = parseFloat(child.props.flexGrow) || parseFloat(child.props.flex) || 0;
         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) {
@@ -228,60 +787,45 @@ function layoutChildren(ctx, parent) {
                 childLayout.width = flexBasis;
             }
         }
-        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) {
+                if (isColumn)
                     info.height += extraSpace;
-                }
-                else {
+                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);
-                if (isColumn) {
+                if (isColumn)
                     info.height = Math.max(0, info.height - shrinkSpace);
-                }
-                else {
+                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;
     if (justifyContent === "center") {
@@ -297,16 +841,13 @@ function layoutChildren(ctx, parent) {
         spacing = remainingSpace / parent.children.length;
         mainStart = spacing / 2;
     }
-    // Position children
     let currentMain = mainStart;
     for (let i = 0; i < parent.children.length; i++) {
         const child = parent.children[i];
         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;
@@ -316,7 +857,6 @@ function layoutChildren(ctx, parent) {
         else if (alignItems === "flex-end") {
             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;
@@ -332,40 +872,30 @@ function layoutChildren(ctx, parent) {
         }
     }
 }
-/**
- * Layout Stack children - overlays children on top of each other
- */
-function layoutStackChildren(ctx, parent) {
+function layoutStackChildrenFallback(ctx, parent) {
     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;
     }