@hypen-space/web 0.4.36 → 0.4.38

package/dist/canvas/layout.js

@@ -1,571 +1,373 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-
-// src/canvas/utils.ts
-function parseSpacing(value) {
-  if (typeof value === "number") {
-    return { top: value, right: value, bottom: value, left: value };
-  }
-  if (typeof value === "string") {
-    const parts = value.split(/\s+/).map((v) => parseFloat(v) || 0);
-    if (parts.length === 1) {
-      return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };
+/**
+ * Layout Engine
+ *
+ * Flexbox-like layout system for positioning virtual nodes
+ */
+import { parseSpacing, parseSize } from "./utils.js";
+import { measureText } from "./text.js";
+/**
+ * Compute layout for a virtual node tree
+ */
+export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0, y = 0) {
+    // 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;
+    if (props.paddingBottom !== undefined)
+        padding.bottom = parseFloat(props.paddingBottom) || 0;
+    if (props.paddingLeft !== undefined)
+        padding.left = parseFloat(props.paddingLeft) || 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;
     }
-    if (parts.length === 2) {
-      return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };
+    else if (type === "spacer") {
+        // Spacer fills available space by default
+        if (width === null)
+            width = availableAfterMargin.width;
+        if (height === null)
+            height = availableAfterMargin.height;
     }
-    if (parts.length === 4) {
-      return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
+    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;
+        }
+        else {
+            if (width === null)
+                width = availableAfterMargin.width;
+            if (height === null)
+                height = thickness;
+        }
     }
-  }
-  if (typeof value === "object" && value !== null) {
-    return {
-      top: parseFloat(value.top) || 0,
-      right: parseFloat(value.right) || 0,
-      bottom: parseFloat(value.bottom) || 0,
-      left: parseFloat(value.left) || 0
-    };
-  }
-  return { top: 0, right: 0, bottom: 0, left: 0 };
-}
-function parseSize(value) {
-  if (typeof value === "number")
-    return value;
-  if (typeof value === "string") {
-    if (value === "auto")
-      return null;
-    const num = parseFloat(value);
-    return isNaN(num) ? null : num;
-  }
-  return null;
-}
-function isPointInRect(point, rect) {
-  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
-}
-function isPointInRoundedRect(point, rect, radius) {
-  const { x, y, width, height } = rect;
-  if (!isPointInRect(point, rect))
-    return false;
-  if (radius <= 0)
-    return true;
-  const px = point.x;
-  const py = point.y;
-  if (px < x + radius && py < y + radius) {
-    return Math.pow(px - (x + radius), 2) + Math.pow(py - (y + radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px > x + width - radius && py < y + radius) {
-    return Math.pow(px - (x + width - radius), 2) + Math.pow(py - (y + radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px < x + radius && py > y + height - radius) {
-    return Math.pow(px - (x + radius), 2) + Math.pow(py - (y + height - radius), 2) <= Math.pow(radius, 2);
-  }
-  if (px > x + width - radius && py > y + height - radius) {
-    return Math.pow(px - (x + width - radius), 2) + Math.pow(py - (y + height - radius), 2) <= Math.pow(radius, 2);
-  }
-  return true;
-}
-function mergeRects(rects) {
-  if (rects.length === 0)
-    return null;
-  if (rects.length === 1)
-    return rects[0];
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const rect of rects) {
-    minX = Math.min(minX, rect.x);
-    minY = Math.min(minY, rect.y);
-    maxX = Math.max(maxX, rect.x + rect.width);
-    maxY = Math.max(maxY, rect.y + rect.height);
-  }
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY
-  };
-}
-function createFontString(fontSize, fontWeight, fontFamily) {
-  return `${fontWeight} ${fontSize}px ${fontFamily}`;
-}
-function walkTree(node, callback) {
-  callback(node);
-  for (const child of node.children) {
-    walkTree(child, callback);
-  }
-}
-function findNodeById(root, id) {
-  if (root.id === id)
-    return root;
-  for (const child of root.children) {
-    const found = findNodeById(child, id);
-    if (found)
-      return found;
-  }
-  return null;
-}
-function getAbsoluteBounds(node) {
-  if (!node.layout)
-    return null;
-  let x = node.layout.x;
-  let y = node.layout.y;
-  let current = node.parent;
-  while (current && current.layout) {
-    x += current.layout.contentX;
-    y += current.layout.contentY;
-    current = current.parent;
-  }
-  return {
-    x,
-    y,
-    width: node.layout.width,
-    height: node.layout.height
-  };
-}
-
-// src/canvas/text.ts
-import { frameworkLoggers } from "@hypen-space/core/logger";
-var log = frameworkLoggers.canvas;
-var textMetricsCache = new Map;
-function getCacheKey(text, fontStyle, maxWidth) {
-  return `${text}|${fontStyle.fontSize}|${fontStyle.fontWeight}|${fontStyle.fontFamily}|${maxWidth || "auto"}`;
-}
-function measureText(ctx, text, fontStyle, maxWidth) {
-  const cacheKey = getCacheKey(text, fontStyle, maxWidth);
-  const cached = textMetricsCache.get(cacheKey);
-  if (cached)
-    return cached;
-  const font = createFontString(fontStyle.fontSize, fontStyle.fontWeight, fontStyle.fontFamily);
-  ctx.save();
-  ctx.font = font;
-  const lineHeight = fontStyle.lineHeight || fontStyle.fontSize * 1.2;
-  if (!maxWidth) {
-    const metrics = ctx.measureText(text);
-    const result2 = {
-      width: metrics.width,
-      height: lineHeight,
-      lines: [text],
-      lineHeight
-    };
-    ctx.restore();
-    textMetricsCache.set(cacheKey, result2);
-    return result2;
-  }
-  const lines = wrapText(ctx, text, maxWidth);
-  const width = Math.max(...lines.map((line) => ctx.measureText(line).width));
-  const height = lines.length * lineHeight;
-  const result = {
-    width,
-    height,
-    lines,
-    lineHeight
-  };
-  ctx.restore();
-  textMetricsCache.set(cacheKey, result);
-  return result;
-}
-function wrapText(ctx, text, maxWidth) {
-  const lines = [];
-  const paragraphs = text.split(`
-`);
-  for (const paragraph of paragraphs) {
-    const words = paragraph.split(" ");
-    let currentLine = "";
-    for (const word of words) {
-      const testLine = currentLine ? `${currentLine} ${word}` : word;
-      const metrics = ctx.measureText(testLine);
-      if (metrics.width > maxWidth && currentLine) {
-        lines.push(currentLine);
-        currentLine = word;
-      } else {
-        currentLine = testLine;
-      }
+    else if (type === "checkbox" || type === "radio") {
+        const size = parseFloat(props.size) || 20;
+        if (width === null)
+            width = size;
+        if (height === null)
+            height = size;
     }
-    if (currentLine) {
-      lines.push(currentLine);
+    else if (type === "switch" || type === "toggle") {
+        if (width === null)
+            width = 44;
+        if (height === null)
+            height = 24;
     }
-  }
-  return lines.length > 0 ? lines : [""];
-}
-function renderText(ctx, text, x, y, width, height, style) {
-  const font = createFontString(style.fontSize, style.fontWeight, style.fontFamily);
-  ctx.save();
-  ctx.font = font;
-  ctx.fillStyle = style.color;
-  ctx.textBaseline = "top";
-  const metrics = measureText(ctx, text, style, width);
-  let startY = y;
-  if (style.verticalAlign === "middle") {
-    startY = y + (height - metrics.height) / 2;
-  } else if (style.verticalAlign === "bottom") {
-    startY = y + height - metrics.height;
-  }
-  for (let i = 0;i < metrics.lines.length; i++) {
-    const line = metrics.lines[i];
-    const lineY = startY + i * metrics.lineHeight;
-    let lineX = x;
-    if (style.textAlign === "center") {
-      const lineWidth = ctx.measureText(line).width;
-      lineX = x + (width - lineWidth) / 2;
-    } else if (style.textAlign === "right") {
-      const lineWidth = ctx.measureText(line).width;
-      lineX = x + width - lineWidth;
+    else if (type === "slider") {
+        if (width === null)
+            width = 200;
+        if (height === null)
+            height = 20;
     }
-    ctx.fillText(line, lineX, lineY);
-  }
-  ctx.restore();
-}
-function clearTextCache() {
-  textMetricsCache.clear();
-}
-async function loadFont(fontFamily, fontWeight = "normal") {
-  if (!("fonts" in document))
-    return;
-  const font = `${fontWeight} 16px ${fontFamily}`;
-  try {
-    await document.fonts.load(font);
-  } catch (error) {
-    log.warn(`Failed to load font: ${font}`, error);
-  }
-}
-
-// src/canvas/layout.ts
-function computeLayout(ctx, node, availableWidth, availableHeight, x = 0, y = 0) {
-  const props = node.props;
-  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;
-  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;
-  if (props.paddingBottom !== undefined)
-    padding.bottom = parseFloat(props.paddingBottom) || 0;
-  if (props.paddingLeft !== undefined)
-    padding.left = parseFloat(props.paddingLeft) || 0;
-  const borderWidth = parseFloat(props.borderWidth) || 0;
-  const borderColor = props.borderColor || "transparent";
-  const borderRadius = parseFloat(props.borderRadius) || 0;
-  const availableAfterMargin = {
-    width: availableWidth - margin.left - margin.right,
-    height: availableHeight - margin.top - margin.bottom
-  };
-  let width = parseSize(props.width);
-  let height = parseSize(props.height);
-  const type = node.type.toLowerCase();
-  if (type === "app") {
-    if (width === null)
-      width = availableAfterMargin.width;
-    if (height === null)
-      height = availableAfterMargin.height;
-  } else if (type === "spacer") {
+    else if (type === "progress" || type === "progressbar") {
+        if (width === null)
+            width = 200;
+        if (height === null)
+            height = 8;
+    }
+    else if (type === "spinner" || type === "loading") {
+        const size = parseFloat(props.size) || 24;
+        if (width === null)
+            width = size;
+        if (height === null)
+            height = size;
+    }
+    else if (type === "badge") {
+        if (width === null)
+            width = 20;
+        if (height === null)
+            height = 20;
+    }
+    else if (type === "avatar") {
+        const size = parseFloat(props.size) || 40;
+        if (width === null)
+            width = size;
+        if (height === null)
+            height = size;
+    }
+    else if (type === "icon") {
+        const size = parseFloat(props.size) || 24;
+        if (width === null)
+            width = size;
+        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;
+        const fontWeight = props.fontWeight || "normal";
+        const fontFamily = props.fontFamily || "system-ui, sans-serif";
+        const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
+        const maxWidth = width || availableAfterMargin.width - padding.left - padding.right;
+        const metrics = measureText(ctx, text, { fontSize, fontWeight, fontFamily, lineHeight }, maxWidth);
+        if (!width)
+            width = metrics.width + padding.left + padding.right;
+        if (!height)
+            height = metrics.height + padding.top + padding.bottom;
+    }
+    // Default to available size if not specified
     if (width === null)
-      width = availableAfterMargin.width;
+        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;
-    } else {
-      if (width === null)
-        width = availableAfterMargin.width;
-      if (height === null)
-        height = thickness;
+    // Apply constraints
+    const minWidth = parseSize(props.minWidth);
+    const maxWidth = parseSize(props.maxWidth);
+    const minHeight = parseSize(props.minHeight);
+    const maxHeight = parseSize(props.maxHeight);
+    if (minWidth !== null)
+        width = Math.max(width, minWidth);
+    if (maxWidth !== null)
+        width = Math.min(width, maxWidth);
+    if (minHeight !== null)
+        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,
+        width,
+        height,
+        margin,
+        padding,
+        border: {
+            width: borderWidth,
+            color: borderColor,
+            radius: borderRadius,
+        },
+        contentX: padding.left + borderWidth,
+        contentY: padding.top + borderWidth,
+        contentWidth: width - padding.left - padding.right - borderWidth * 2,
+        contentHeight: height - padding.top - padding.bottom - borderWidth * 2,
+    };
+    node.layout = layout;
+    // Layout children if container
+    if (node.children.length > 0) {
+        layoutChildren(ctx, node);
     }
-  } else if (type === "checkbox" || type === "radio") {
-    const size = parseFloat(props.size) || 20;
-    if (width === null)
-      width = size;
-    if (height === null)
-      height = size;
-  } else if (type === "switch" || type === "toggle") {
-    if (width === null)
-      width = 44;
-    if (height === null)
-      height = 24;
-  } else if (type === "slider") {
-    if (width === null)
-      width = 200;
-    if (height === null)
-      height = 20;
-  } else if (type === "progress" || type === "progressbar") {
-    if (width === null)
-      width = 200;
-    if (height === null)
-      height = 8;
-  } else if (type === "spinner" || type === "loading") {
-    const size = parseFloat(props.size) || 24;
-    if (width === null)
-      width = size;
-    if (height === null)
-      height = size;
-  } else if (type === "badge") {
-    if (width === null)
-      width = 20;
-    if (height === null)
-      height = 20;
-  } else if (type === "avatar") {
-    const size = parseFloat(props.size) || 40;
-    if (width === null)
-      width = size;
-    if (height === null)
-      height = size;
-  } else if (type === "icon") {
-    const size = parseFloat(props.size) || 24;
-    if (width === null)
-      width = size;
-    if (height === null)
-      height = size;
-  }
-  if (node.type === "text" && node.props[0]) {
-    const text = String(node.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 maxWidth2 = width || availableAfterMargin.width - padding.left - padding.right;
-    const metrics = measureText(ctx, text, { fontSize, fontWeight, fontFamily, lineHeight }, maxWidth2);
-    if (!width)
-      width = metrics.width + padding.left + padding.right;
-    if (!height)
-      height = metrics.height + padding.top + padding.bottom;
-  }
-  if (width === null)
-    width = availableAfterMargin.width;
-  if (height === null)
-    height = availableAfterMargin.height;
-  const minWidth = parseSize(props.minWidth);
-  const maxWidth = parseSize(props.maxWidth);
-  const minHeight = parseSize(props.minHeight);
-  const maxHeight = parseSize(props.maxHeight);
-  if (minWidth !== null)
-    width = Math.max(width, minWidth);
-  if (maxWidth !== null)
-    width = Math.min(width, maxWidth);
-  if (minHeight !== null)
-    height = Math.max(height, minHeight);
-  if (maxHeight !== null)
-    height = Math.min(height, maxHeight);
-  const layout = {
-    x: x + margin.left,
-    y: y + margin.top,
-    width,
-    height,
-    margin,
-    padding,
-    border: {
-      width: borderWidth,
-      color: borderColor,
-      radius: borderRadius
-    },
-    contentX: padding.left + borderWidth,
-    contentY: padding.top + borderWidth,
-    contentWidth: width - padding.left - padding.right - borderWidth * 2,
-    contentHeight: height - padding.top - padding.bottom - borderWidth * 2
-  };
-  node.layout = layout;
-  if (node.children.length > 0) {
-    layoutChildren(ctx, node);
-  }
 }
+/**
+ * Layout children using flexbox-like rules
+ */
 function layoutChildren(ctx, parent) {
-  const layout = parent.layout;
-  const props = parent.props;
-  if (parent.type.toLowerCase() === "stack") {
-    layoutStackChildren(ctx, parent);
-    return;
-  }
-  const flexDirection = props.flexDirection || (parent.type === "column" ? "column" : "row");
-  const isColumn = flexDirection === "column";
-  const justifyContent = isColumn ? props.verticalAlignment || "flex-start" : props.horizontalAlignment || "flex-start";
-  const alignItems = isColumn ? props.horizontalAlignment || "flex-start" : props.verticalAlignment || "flex-start";
-  const gap = parseFloat(props.gap) || 0;
-  const availableWidth = layout.contentWidth;
-  const availableHeight = layout.contentHeight;
-  const childInfo = [];
-  let totalMainSize = 0;
-  let totalFlexGrow = 0;
-  let totalFlexShrink = 0;
-  for (const child of parent.children) {
-    const flexGrow = parseFloat(child.props.flexGrow) || parseFloat(child.props.flex) || 0;
-    const flexShrink = parseFloat(child.props.flexShrink) || 1;
-    const flexBasis = parseSize(child.props.flexBasis);
-    computeLayout(ctx, child, availableWidth, availableHeight, 0, 0);
-    const childLayout = child.layout;
-    let mainSize = isColumn ? childLayout.height : childLayout.width;
-    if (flexBasis !== null) {
-      mainSize = flexBasis;
-      if (isColumn) {
-        childLayout.height = flexBasis;
-      } else {
-        childLayout.width = flexBasis;
-      }
+    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);
+        return;
     }
-    childInfo.push({
-      width: childLayout.width,
-      height: childLayout.height,
-      flexGrow,
-      flexShrink,
-      flexBasis
-    });
-    totalMainSize += mainSize;
-    totalFlexGrow += flexGrow;
-    totalFlexShrink += flexShrink;
-  }
-  const totalGap = gap * (parent.children.length - 1);
-  totalMainSize += totalGap;
-  const availableMain = isColumn ? availableHeight : availableWidth;
-  let remainingSpace = availableMain - totalMainSize;
-  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;
+    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");
+    const alignItems = isColumn
+        ? (props.horizontalAlignment || "flex-start")
+        : (props.verticalAlignment || "flex-start");
+    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;
+    let totalFlexShrink = 0;
+    for (const child of parent.children) {
+        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);
+        const childLayout = child.layout;
+        let mainSize = isColumn ? childLayout.height : childLayout.width;
+        // Use flexBasis if specified
+        if (flexBasis !== null) {
+            mainSize = flexBasis;
+            if (isColumn) {
+                childLayout.height = flexBasis;
+            }
+            else {
+                childLayout.width = flexBasis;
+            }
         }
-        totalMainSize += extraSpace;
-      }
+        childInfo.push({
+            width: childLayout.width,
+            height: childLayout.height,
+            flexGrow,
+            flexShrink,
+            flexBasis,
+        });
+        totalMainSize += mainSize;
+        totalFlexGrow += flexGrow;
+        totalFlexShrink += flexShrink;
     }
-    remainingSpace = 0;
-  }
-  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) {
-          info.height = Math.max(0, info.height - shrinkSpace);
-        } else {
-          info.width = Math.max(0, info.width - shrinkSpace);
+    // 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;
+                }
+                totalMainSize += extraSpace;
+            }
         }
-        totalMainSize -= shrinkSpace;
-      }
+        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) {
+                    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;
+    if (justifyContent === "center") {
+        mainStart = Math.max(0, remainingSpace / 2);
     }
-    remainingSpace = availableMain - totalMainSize;
-  }
-  let mainStart = 0;
-  let spacing = 0;
-  if (justifyContent === "center") {
-    mainStart = Math.max(0, remainingSpace / 2);
-  } else if (justifyContent === "flex-end") {
-    mainStart = Math.max(0, remainingSpace);
-  } else if (justifyContent === "space-between") {
-    spacing = remainingSpace / Math.max(1, parent.children.length - 1);
-  } else if (justifyContent === "space-around") {
-    spacing = remainingSpace / parent.children.length;
-    mainStart = spacing / 2;
-  }
-  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];
-    childLayout.width = info.width;
-    childLayout.height = info.height;
-    let crossStart = 0;
-    const availableCross = isColumn ? availableWidth : availableHeight;
-    const childCross = isColumn ? info.width : info.height;
-    if (alignItems === "center") {
-      crossStart = (availableCross - childCross) / 2;
-    } else if (alignItems === "flex-end") {
-      crossStart = availableCross - childCross;
+    else if (justifyContent === "flex-end") {
+        mainStart = Math.max(0, remainingSpace);
     }
-    if (isColumn) {
-      childLayout.x = layout.x + layout.contentX + crossStart;
-      childLayout.y = layout.y + layout.contentY + currentMain;
-      currentMain += info.height + gap;
-    } else {
-      childLayout.x = layout.x + layout.contentX + currentMain;
-      childLayout.y = layout.y + layout.contentY + crossStart;
-      currentMain += info.width + gap;
+    else if (justifyContent === "space-between") {
+        spacing = remainingSpace / Math.max(1, parent.children.length - 1);
     }
-    if (justifyContent === "space-between" || justifyContent === "space-around") {
-      currentMain += spacing;
+    else if (justifyContent === "space-around") {
+        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;
+        if (alignItems === "center") {
+            crossStart = (availableCross - childCross) / 2;
+        }
+        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;
+            currentMain += info.height + gap;
+        }
+        else {
+            childLayout.x = layout.x + layout.contentX + currentMain;
+            childLayout.y = layout.y + layout.contentY + crossStart;
+            currentMain += info.width + gap;
+        }
+        if (justifyContent === "space-between" || justifyContent === "space-around") {
+            currentMain += spacing;
+        }
     }
-  }
 }
+/**
+ * Layout Stack children - overlays children on top of each other
+ */
 function layoutStackChildren(ctx, parent) {
-  const layout = parent.layout;
-  const props = parent.props;
-  const horizontalAlignment = props.horizontalAlignment || "flex-start";
-  const verticalAlignment = props.verticalAlignment || "flex-start";
-  const availableWidth = layout.contentWidth;
-  const availableHeight = layout.contentHeight;
-  for (const child of parent.children) {
-    computeLayout(ctx, child, availableWidth, availableHeight, 0, 0);
-    const childLayout = child.layout;
-    let x = 0;
-    let y = 0;
-    if (horizontalAlignment === "center") {
-      x = (availableWidth - childLayout.width) / 2;
-    } else if (horizontalAlignment === "flex-end") {
-      x = availableWidth - childLayout.width;
-    }
-    if (verticalAlignment === "center") {
-      y = (availableHeight - childLayout.height) / 2;
-    } else if (verticalAlignment === "flex-end") {
-      y = availableHeight - childLayout.height;
+    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);
+        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;
     }
-    childLayout.x = layout.x + layout.contentX + x;
-    childLayout.y = layout.y + layout.contentY + y;
-  }
 }
-export {
-  computeLayout
-};
-
-//# debugId=107090D4899BFD6E64756E2164756E21
+//# sourceMappingURL=layout.js.map