noreflow 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1572 @@
+'use strict';
+
+// src/defaults.ts
+var DEFAULTS = {
+  display: "flex",
+  position: "static",
+  flexDirection: "row",
+  flexWrap: "nowrap",
+  justifyContent: "flex-start",
+  alignItems: "stretch",
+  alignSelf: "auto",
+  alignContent: "stretch",
+  justifyItems: "stretch",
+  justifySelf: "auto",
+  gridTemplateColumns: [],
+  gridTemplateRows: [],
+  gridAutoColumns: "auto",
+  gridAutoRows: "auto",
+  gridAutoFlow: "row",
+  gridColumnStart: "auto",
+  gridColumnEnd: "auto",
+  gridRowStart: "auto",
+  gridRowEnd: "auto",
+  flexGrow: 0,
+  flexShrink: 1,
+  flexBasis: "auto",
+  width: "auto",
+  height: "auto",
+  minWidth: 0,
+  minHeight: 0,
+  maxWidth: Infinity,
+  maxHeight: Infinity,
+  top: "auto",
+  right: "auto",
+  bottom: "auto",
+  left: "auto",
+  zIndex: 0,
+  aspectRatio: void 0,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  borderTop: 0,
+  borderRight: 0,
+  borderBottom: 0,
+  borderLeft: 0,
+  rowGap: 0,
+  columnGap: 0,
+  boxSizing: "content-box"
+};
+function resolveStyle(style) {
+  if (!style) return { ...DEFAULTS };
+  return {
+    display: style.display ?? DEFAULTS.display,
+    position: style.position ?? DEFAULTS.position,
+    flexDirection: style.flexDirection ?? DEFAULTS.flexDirection,
+    flexWrap: style.flexWrap ?? DEFAULTS.flexWrap,
+    justifyContent: style.justifyContent ?? DEFAULTS.justifyContent,
+    alignItems: style.alignItems ?? DEFAULTS.alignItems,
+    alignSelf: style.alignSelf ?? DEFAULTS.alignSelf,
+    alignContent: style.alignContent ?? DEFAULTS.alignContent,
+    justifyItems: style.justifyItems ?? DEFAULTS.justifyItems,
+    justifySelf: style.justifySelf ?? DEFAULTS.justifySelf,
+    gridTemplateColumns: style.gridTemplateColumns ?? DEFAULTS.gridTemplateColumns,
+    gridTemplateRows: style.gridTemplateRows ?? DEFAULTS.gridTemplateRows,
+    gridAutoColumns: style.gridAutoColumns ?? DEFAULTS.gridAutoColumns,
+    gridAutoRows: style.gridAutoRows ?? DEFAULTS.gridAutoRows,
+    gridAutoFlow: style.gridAutoFlow ?? DEFAULTS.gridAutoFlow,
+    gridColumnStart: style.gridColumnStart ?? DEFAULTS.gridColumnStart,
+    gridColumnEnd: style.gridColumnEnd ?? DEFAULTS.gridColumnEnd,
+    gridRowStart: style.gridRowStart ?? DEFAULTS.gridRowStart,
+    gridRowEnd: style.gridRowEnd ?? DEFAULTS.gridRowEnd,
+    flexGrow: style.flexGrow ?? DEFAULTS.flexGrow,
+    flexShrink: style.flexShrink ?? DEFAULTS.flexShrink,
+    flexBasis: style.flexBasis ?? DEFAULTS.flexBasis,
+    width: style.width ?? DEFAULTS.width,
+    height: style.height ?? DEFAULTS.height,
+    minWidth: style.minWidth ?? DEFAULTS.minWidth,
+    minHeight: style.minHeight ?? DEFAULTS.minHeight,
+    maxWidth: style.maxWidth ?? DEFAULTS.maxWidth,
+    maxHeight: style.maxHeight ?? DEFAULTS.maxHeight,
+    top: style.top ?? DEFAULTS.top,
+    right: style.right ?? DEFAULTS.right,
+    bottom: style.bottom ?? DEFAULTS.bottom,
+    left: style.left ?? DEFAULTS.left,
+    zIndex: style.zIndex ?? DEFAULTS.zIndex,
+    aspectRatio: style.aspectRatio ?? DEFAULTS.aspectRatio,
+    paddingTop: style.paddingTop ?? style.padding ?? DEFAULTS.paddingTop,
+    paddingRight: style.paddingRight ?? style.padding ?? DEFAULTS.paddingRight,
+    paddingBottom: style.paddingBottom ?? style.padding ?? DEFAULTS.paddingBottom,
+    paddingLeft: style.paddingLeft ?? style.padding ?? DEFAULTS.paddingLeft,
+    marginTop: style.marginTop ?? style.margin ?? DEFAULTS.marginTop,
+    marginRight: style.marginRight ?? style.margin ?? DEFAULTS.marginRight,
+    marginBottom: style.marginBottom ?? style.margin ?? DEFAULTS.marginBottom,
+    marginLeft: style.marginLeft ?? style.margin ?? DEFAULTS.marginLeft,
+    borderTop: style.borderTop ?? style.border ?? DEFAULTS.borderTop,
+    borderRight: style.borderRight ?? style.border ?? DEFAULTS.borderRight,
+    borderBottom: style.borderBottom ?? style.border ?? DEFAULTS.borderBottom,
+    borderLeft: style.borderLeft ?? style.border ?? DEFAULTS.borderLeft,
+    rowGap: style.rowGap ?? style.gap ?? DEFAULTS.rowGap,
+    columnGap: style.columnGap ?? style.gap ?? DEFAULTS.columnGap,
+    boxSizing: style.boxSizing ?? DEFAULTS.boxSizing
+  };
+}
+
+// src/boxModel.ts
+function parsePercent(value) {
+  if (value.endsWith("%")) {
+    const n = Number(value.slice(0, -1));
+    return Number.isFinite(n) ? n : null;
+  }
+  return null;
+}
+function resolveSize(value, referenceSize) {
+  if (value === "auto") return null;
+  if (typeof value === "number") return value;
+  const pct = parsePercent(value);
+  if (pct !== null) {
+    if (!isFinite(referenceSize)) return 0;
+    return pct / 100 * referenceSize;
+  }
+  return null;
+}
+function resolveDimension(value, referenceSize) {
+  if (typeof value === "number") return value;
+  const pct = parsePercent(value);
+  if (pct !== null) {
+    if (!isFinite(referenceSize)) return 0;
+    return pct / 100 * referenceSize;
+  }
+  return 0;
+}
+function resolveMargin(value, referenceSize) {
+  if (value === "auto") return null;
+  if (typeof value === "number") return value;
+  const pct = parsePercent(value);
+  if (pct !== null) return pct / 100 * referenceSize;
+  return 0;
+}
+function resolveInset(value, referenceSize) {
+  if (value === "auto") return null;
+  if (typeof value === "number") return value;
+  const pct = parsePercent(value);
+  if (pct !== null) return pct / 100 * referenceSize;
+  return null;
+}
+function resolvePadding(style) {
+  return {
+    top: style.paddingTop,
+    right: style.paddingRight,
+    bottom: style.paddingBottom,
+    left: style.paddingLeft
+  };
+}
+function resolveBorder(style) {
+  return {
+    top: style.borderTop,
+    right: style.borderRight,
+    bottom: style.borderBottom,
+    left: style.borderLeft
+  };
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function horizontalInset(padding, border) {
+  return padding.left + padding.right + border.left + border.right;
+}
+function verticalInset(padding, border) {
+  return padding.top + padding.bottom + border.top + border.bottom;
+}
+
+// src/gridLayout.ts
+function parseTrackSize(size) {
+  if (size === "auto") return { type: "auto", value: 0 };
+  if (typeof size === "number") return { type: "px", value: size };
+  const str = size;
+  if (str.endsWith("fr")) {
+    const n = Number(str.slice(0, -2));
+    return { type: "fr", value: Number.isFinite(n) ? n : 0 };
+  }
+  if (str.endsWith("%")) {
+    const n = Number(str.slice(0, -1));
+    return { type: "percent", value: Number.isFinite(n) ? n : 0 };
+  }
+  return { type: "auto", value: 0 };
+}
+function resolveGridLine(value) {
+  if (value === "auto") return null;
+  return value;
+}
+function placeItems(items, explicitCols, explicitRows, autoFlow) {
+  let maxCol = explicitCols;
+  let maxRow = explicitRows;
+  for (const item of items) {
+    const cs = resolveGridLine(item.style.gridColumnStart);
+    const ce = resolveGridLine(item.style.gridColumnEnd);
+    const rs = resolveGridLine(item.style.gridRowStart);
+    const re = resolveGridLine(item.style.gridRowEnd);
+    if (cs !== null) item.colStart = cs - 1;
+    if (ce !== null) item.colEnd = ce - 1;
+    if (rs !== null) item.rowStart = rs - 1;
+    if (re !== null) item.rowEnd = re - 1;
+    if (cs !== null && ce === null) item.colEnd = item.colStart + 1;
+    if (rs !== null && re === null) item.rowEnd = item.rowStart + 1;
+    if (cs === null && ce !== null) item.colStart = item.colEnd - 1;
+    if (rs === null && re !== null) item.rowStart = item.rowEnd - 1;
+    if (item.colEnd > maxCol) maxCol = item.colEnd;
+    if (item.rowEnd > maxRow) maxRow = item.rowEnd;
+  }
+  const isOccupied = (grid2, row2, col2) => grid2.has(`${row2},${col2}`);
+  const markOccupied = (grid2, item) => {
+    for (let r = item.rowStart; r < item.rowEnd; r++) {
+      for (let c = item.colStart; c < item.colEnd; c++) {
+        grid2.add(`${r},${c}`);
+      }
+    }
+  };
+  const occupiedCells = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if (item.colStart >= 0 && item.rowStart >= 0) {
+      markOccupied(occupiedCells, item);
+    }
+  }
+  let autoRow = 0;
+  let autoCol = 0;
+  for (const item of items) {
+    const needsColPlacement = item.colStart < 0;
+    const needsRowPlacement = item.rowStart < 0;
+    if (!needsColPlacement && !needsRowPlacement) continue;
+    const spanCols = needsColPlacement ? 1 : item.colEnd - item.colStart;
+    const spanRows = needsRowPlacement ? 1 : item.rowEnd - item.rowStart;
+    if (autoFlow === "row") {
+      let placed = false;
+      for (let r = needsRowPlacement ? autoRow : item.rowStart; !placed; r++) {
+        const startCol = r === autoRow && needsColPlacement ? autoCol : 0;
+        for (let c = needsColPlacement ? startCol : item.colStart; c <= maxCol - spanCols; c++) {
+          let fits = true;
+          for (let dr = 0; dr < spanRows && fits; dr++) {
+            for (let dc = 0; dc < spanCols && fits; dc++) {
+              if (isOccupied(occupiedCells, r + dr, c + dc)) fits = false;
+            }
+          }
+          if (fits) {
+            if (needsColPlacement) {
+              item.colStart = c;
+              item.colEnd = c + spanCols;
+            }
+            if (needsRowPlacement) {
+              item.rowStart = r;
+              item.rowEnd = r + spanRows;
+            }
+            markOccupied(occupiedCells, item);
+            autoRow = r;
+            autoCol = item.colEnd;
+            if (autoCol >= maxCol) {
+              autoRow++;
+              autoCol = 0;
+            }
+            placed = true;
+            break;
+          }
+        }
+        if (!placed) {
+          if (r >= maxRow) maxRow = r + 1;
+          autoCol = 0;
+        }
+      }
+    } else {
+      let placed = false;
+      for (let c = needsColPlacement ? autoCol : item.colStart; !placed; c++) {
+        const startRow = c === autoCol && needsRowPlacement ? autoRow : 0;
+        for (let r = needsRowPlacement ? startRow : item.rowStart; r <= maxRow - spanRows; r++) {
+          let fits = true;
+          for (let dr = 0; dr < spanRows && fits; dr++) {
+            for (let dc = 0; dc < spanCols && fits; dc++) {
+              if (isOccupied(occupiedCells, r + dr, c + dc)) fits = false;
+            }
+          }
+          if (fits) {
+            if (needsRowPlacement) {
+              item.rowStart = r;
+              item.rowEnd = r + spanRows;
+            }
+            if (needsColPlacement) {
+              item.colStart = c;
+              item.colEnd = c + spanCols;
+            }
+            markOccupied(occupiedCells, item);
+            autoCol = c;
+            autoRow = item.rowEnd;
+            if (autoRow >= maxRow) {
+              autoCol++;
+              autoRow = 0;
+            }
+            placed = true;
+            break;
+          }
+        }
+        if (!placed) {
+          if (c >= maxCol) maxCol = c + 1;
+          autoRow = 0;
+        }
+      }
+    }
+    if (item.colEnd > maxCol) maxCol = item.colEnd;
+    if (item.rowEnd > maxRow) maxRow = item.rowEnd;
+  }
+  return { totalCols: maxCol, totalRows: maxRow };
+}
+function resolveTrackSizes(tracks, availableSize, gap, items, axis, layoutFn) {
+  const sizes = new Array(tracks.length).fill(0);
+  const totalGap = gap * Math.max(0, tracks.length - 1);
+  let remainingSpace = availableSize - totalGap;
+  const frTracks = [];
+  let totalFr = 0;
+  for (let i = 0; i < tracks.length; i++) {
+    const t = tracks[i];
+    if (t.type === "px") {
+      sizes[i] = t.value;
+      remainingSpace -= t.value;
+    } else if (t.type === "percent") {
+      sizes[i] = t.value / 100 * availableSize;
+      remainingSpace -= sizes[i];
+    } else if (t.type === "fr") {
+      frTracks.push(i);
+      totalFr += t.value;
+    } else {
+      let maxContent = 0;
+      for (const item of items) {
+        const start = axis === "col" ? item.colStart : item.rowStart;
+        const end = axis === "col" ? item.colEnd : item.rowEnd;
+        if (start === i && end === i + 1) {
+          const childStyle = item.style;
+          const childPadding = resolvePadding(childStyle);
+          const childBorder = resolveBorder(childStyle);
+          if (axis === "col") {
+            const resolved = resolveSize(childStyle.width, availableSize);
+            if (resolved !== null) {
+              let w = resolved;
+              if (childStyle.boxSizing === "border-box") {
+                w = Math.max(0, w - horizontalInset(childPadding, childBorder));
+              }
+              maxContent = Math.max(maxContent, w + horizontalInset(childPadding, childBorder));
+            } else if (item.node.measure) {
+              const measured = item.node.measure(Infinity, Infinity);
+              maxContent = Math.max(maxContent, measured.width + horizontalInset(childPadding, childBorder));
+            } else if ((item.node.children ?? []).length > 0) {
+              const childLayout = layoutFn(item.node, Infinity, Infinity);
+              maxContent = Math.max(maxContent, childLayout.width);
+            }
+          } else {
+            const resolved = resolveSize(childStyle.height, availableSize);
+            if (resolved !== null) {
+              let h2 = resolved;
+              if (childStyle.boxSizing === "border-box") {
+                h2 = Math.max(0, h2 - verticalInset(childPadding, childBorder));
+              }
+              maxContent = Math.max(maxContent, h2 + verticalInset(childPadding, childBorder));
+            } else if (item.node.measure) {
+              const measured = item.node.measure(Infinity, Infinity);
+              maxContent = Math.max(maxContent, measured.height + verticalInset(childPadding, childBorder));
+            } else if ((item.node.children ?? []).length > 0) {
+              const childLayout = layoutFn(item.node, Infinity, Infinity);
+              maxContent = Math.max(maxContent, childLayout.height);
+            }
+          }
+        }
+      }
+      sizes[i] = maxContent;
+      remainingSpace -= maxContent;
+    }
+  }
+  if (frTracks.length > 0 && totalFr > 0) {
+    const frSpace = Math.max(0, remainingSpace);
+    for (const idx of frTracks) {
+      sizes[idx] = tracks[idx].value / totalFr * frSpace;
+    }
+  }
+  return sizes;
+}
+function resolveJustifySelf(justifySelf, parentJustifyItems) {
+  return justifySelf === "auto" ? parentJustifyItems : justifySelf;
+}
+function resolveAlignSelf(alignSelf, parentAlignItems) {
+  return alignSelf === "auto" ? parentAlignItems : alignSelf;
+}
+function layoutGrid(node, availableWidth, availableHeight, layoutNodeFn) {
+  const style = resolveStyle(node.style);
+  const padding = resolvePadding(style);
+  const border = resolveBorder(style);
+  const hInset = horizontalInset(padding, border);
+  const vInset = verticalInset(padding, border);
+  let containerWidth = resolveSize(style.width, availableWidth);
+  let containerHeight = resolveSize(style.height, availableHeight);
+  if (style.boxSizing === "border-box") {
+    if (containerWidth !== null) containerWidth = Math.max(0, containerWidth - hInset);
+    if (containerHeight !== null) containerHeight = Math.max(0, containerHeight - vInset);
+  }
+  const contentWidth = containerWidth ?? Math.max(0, availableWidth - hInset);
+  const contentHeight = containerHeight ?? Math.max(0, availableHeight - vInset);
+  const containerMinW = resolveDimension(style.minWidth, availableWidth);
+  const containerMaxW = resolveDimension(style.maxWidth, availableWidth);
+  const containerMinH = resolveDimension(style.minHeight, availableHeight);
+  const containerMaxH = resolveDimension(style.maxHeight, availableHeight);
+  const children = node.children ?? [];
+  const absoluteChildren = [];
+  const flowEntries = [];
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const childStyle = resolveStyle(child.style);
+    const entry = { index: i, child, style: childStyle };
+    if (childStyle.position === "absolute") {
+      absoluteChildren.push(entry);
+    } else if (childStyle.display !== "none") {
+      flowEntries.push(entry);
+    }
+  }
+  const gridItems = flowEntries.map((e) => ({
+    node: e.child,
+    style: e.style,
+    originalIndex: e.index,
+    colStart: -1,
+    colEnd: -1,
+    rowStart: -1,
+    rowEnd: -1
+  }));
+  const colTemplates = style.gridTemplateColumns.map(parseTrackSize);
+  const rowTemplates = style.gridTemplateRows.map(parseTrackSize);
+  const autoColTrack = parseTrackSize(style.gridAutoColumns);
+  const autoRowTrack = parseTrackSize(style.gridAutoRows);
+  const explicitCols = colTemplates.length;
+  const explicitRows = rowTemplates.length;
+  const { totalCols, totalRows } = placeItems(
+    gridItems,
+    Math.max(explicitCols, 1),
+    Math.max(explicitRows, 1),
+    style.gridAutoFlow
+  );
+  const allColTracks = [];
+  for (let i = 0; i < totalCols; i++) {
+    allColTracks.push(i < explicitCols ? colTemplates[i] : autoColTrack);
+  }
+  const allRowTracks = [];
+  for (let i = 0; i < totalRows; i++) {
+    allRowTracks.push(i < explicitRows ? rowTemplates[i] : autoRowTrack);
+  }
+  const colSizes = resolveTrackSizes(
+    allColTracks,
+    contentWidth,
+    style.columnGap,
+    gridItems,
+    "col",
+    layoutNodeFn
+  );
+  const rowSizes = resolveTrackSizes(
+    allRowTracks,
+    contentHeight,
+    style.rowGap,
+    gridItems,
+    "row",
+    layoutNodeFn
+  );
+  const colPositions = new Array(totalCols);
+  let pos = 0;
+  for (let i = 0; i < totalCols; i++) {
+    colPositions[i] = pos;
+    pos += colSizes[i] + (i < totalCols - 1 ? style.columnGap : 0);
+  }
+  const rowPositions = new Array(totalRows);
+  pos = 0;
+  for (let i = 0; i < totalRows; i++) {
+    rowPositions[i] = pos;
+    pos += rowSizes[i] + (i < totalRows - 1 ? style.rowGap : 0);
+  }
+  const tracksWidth = totalCols > 0 ? colPositions[totalCols - 1] + colSizes[totalCols - 1] : 0;
+  const tracksHeight = totalRows > 0 ? rowPositions[totalRows - 1] + rowSizes[totalRows - 1] : 0;
+  let finalWidth;
+  if (containerWidth !== null) {
+    finalWidth = containerWidth + hInset;
+  } else {
+    finalWidth = clamp(tracksWidth + hInset, containerMinW, containerMaxW);
+  }
+  let finalHeight;
+  if (containerHeight !== null) {
+    finalHeight = containerHeight + vInset;
+  } else {
+    finalHeight = clamp(tracksHeight + vInset, containerMinH, containerMaxH);
+  }
+  const usableWidth = finalWidth - hInset;
+  const usableHeight = finalHeight - vInset;
+  const justifyOffset = computeContentAlignment(
+    style.justifyContent,
+    tracksWidth,
+    usableWidth
+  );
+  const alignOffset = computeContentAlignment(
+    style.alignContent,
+    tracksHeight,
+    usableHeight
+  );
+  const childLayoutMap = /* @__PURE__ */ new Map();
+  for (const item of gridItems) {
+    let areaX = colPositions[item.colStart] + justifyOffset;
+    let areaY = rowPositions[item.rowStart] + alignOffset;
+    let areaW = 0;
+    for (let c = item.colStart; c < item.colEnd; c++) {
+      areaW += colSizes[c];
+      if (c > item.colStart) areaW += style.columnGap;
+    }
+    let areaH = 0;
+    for (let r = item.rowStart; r < item.rowEnd; r++) {
+      areaH += rowSizes[r];
+      if (r > item.rowStart) areaH += style.rowGap;
+    }
+    const childPadding = resolvePadding(item.style);
+    const childBorder = resolveBorder(item.style);
+    const childHInset = horizontalInset(childPadding, childBorder);
+    const childVInset = verticalInset(childPadding, childBorder);
+    let itemW = resolveSize(item.style.width, contentWidth);
+    let itemH = resolveSize(item.style.height, contentHeight);
+    if (item.style.boxSizing === "border-box") {
+      if (itemW !== null) itemW = Math.max(0, itemW - childHInset);
+      if (itemH !== null) itemH = Math.max(0, itemH - childVInset);
+    }
+    if (item.style.aspectRatio !== void 0) {
+      if (itemW !== null && itemH === null) {
+        itemH = itemW / item.style.aspectRatio;
+      } else if (itemH !== null && itemW === null) {
+        itemW = itemH * item.style.aspectRatio;
+      }
+    }
+    const effectiveJustify = resolveJustifySelf(item.style.justifySelf, style.justifyItems);
+    const effectiveAlign = resolveAlignSelf(item.style.alignSelf, style.alignItems);
+    if (itemW === null) {
+      if (effectiveJustify === "stretch") {
+        itemW = Math.max(0, areaW - childHInset);
+      } else if (item.node.measure) {
+        const measured = item.node.measure(areaW, areaH);
+        itemW = measured.width;
+      } else if ((item.node.children ?? []).length > 0) {
+        const childLayout = layoutNodeFn(item.node, areaW, areaH);
+        itemW = Math.max(0, childLayout.width - childHInset);
+      } else {
+        itemW = Math.max(0, areaW - childHInset);
+      }
+    }
+    if (itemH === null) {
+      if (effectiveAlign === "stretch") {
+        itemH = Math.max(0, areaH - childVInset);
+      } else if (item.node.measure) {
+        const measured = item.node.measure(itemW + childHInset, areaH);
+        itemH = measured.height;
+      } else if ((item.node.children ?? []).length > 0) {
+        const childLayout = layoutNodeFn(item.node, itemW + childHInset, areaH);
+        itemH = Math.max(0, childLayout.height - childVInset);
+      } else {
+        itemH = Math.max(0, areaH - childVInset);
+      }
+    }
+    const minW = resolveDimension(item.style.minWidth, contentWidth);
+    const maxW = resolveDimension(item.style.maxWidth, contentWidth);
+    const minH = resolveDimension(item.style.minHeight, contentHeight);
+    const maxH = resolveDimension(item.style.maxHeight, contentHeight);
+    itemW = clamp(itemW, minW, maxW);
+    itemH = clamp(itemH, minH, maxH);
+    const outerW = itemW + childHInset;
+    const outerH = itemH + childVInset;
+    let itemX = padding.left + border.left + areaX;
+    let itemY = padding.top + border.top + areaY;
+    switch (effectiveJustify) {
+      case "start":
+        break;
+      case "end":
+        itemX += areaW - outerW;
+        break;
+      case "center":
+        itemX += (areaW - outerW) / 2;
+        break;
+    }
+    switch (effectiveAlign) {
+      case "flex-start":
+        break;
+      case "flex-end":
+        itemY += areaH - outerH;
+        break;
+      case "center":
+        itemY += (areaH - outerH) / 2;
+        break;
+    }
+    if (item.style.position === "relative") {
+      const insetTop = resolveInset(item.style.top, finalHeight);
+      const insetLeft = resolveInset(item.style.left, finalWidth);
+      const insetBottom = resolveInset(item.style.bottom, finalHeight);
+      const insetRight = resolveInset(item.style.right, finalWidth);
+      if (insetLeft !== null) itemX += insetLeft;
+      else if (insetRight !== null) itemX -= insetRight;
+      if (insetTop !== null) itemY += insetTop;
+      else if (insetBottom !== null) itemY -= insetBottom;
+    }
+    let itemChildLayouts = [];
+    if ((item.node.children ?? []).length > 0) {
+      const sizedNode = {
+        ...item.node,
+        style: {
+          ...item.node.style,
+          width: outerW,
+          height: outerH,
+          boxSizing: "border-box"
+        }
+      };
+      const innerLayout = layoutNodeFn(sizedNode, outerW, outerH);
+      itemChildLayouts = innerLayout.children;
+    }
+    childLayoutMap.set(item.originalIndex, {
+      x: itemX,
+      y: itemY,
+      width: outerW,
+      height: outerH,
+      children: itemChildLayouts
+    });
+  }
+  const cbWidth = finalWidth - border.left - border.right;
+  const cbHeight = finalHeight - border.top - border.bottom;
+  for (const { index, child, style: absStyle } of absoluteChildren) {
+    if (absStyle.display === "none") {
+      childLayoutMap.set(index, { x: 0, y: 0, width: 0, height: 0, children: [] });
+      continue;
+    }
+    const absPadding = resolvePadding(absStyle);
+    const absBorder = resolveBorder(absStyle);
+    const absHInset = horizontalInset(absPadding, absBorder);
+    const absVInset = verticalInset(absPadding, absBorder);
+    const insetTop = resolveInset(absStyle.top, cbHeight);
+    const insetRight = resolveInset(absStyle.right, cbWidth);
+    const insetBottom = resolveInset(absStyle.bottom, cbHeight);
+    const insetLeft = resolveInset(absStyle.left, cbWidth);
+    let absW = resolveSize(absStyle.width, cbWidth);
+    let absH = resolveSize(absStyle.height, cbHeight);
+    if (absStyle.boxSizing === "border-box") {
+      if (absW !== null) absW = Math.max(0, absW - absHInset);
+      if (absH !== null) absH = Math.max(0, absH - absVInset);
+    }
+    if (absW === null && insetLeft !== null && insetRight !== null) {
+      absW = Math.max(0, cbWidth - insetLeft - insetRight - absHInset);
+    }
+    if (absH === null && insetTop !== null && insetBottom !== null) {
+      absH = Math.max(0, cbHeight - insetTop - insetBottom - absVInset);
+    }
+    if (absStyle.aspectRatio !== void 0) {
+      if (absW !== null && absH === null) absH = absW / absStyle.aspectRatio;
+      else if (absH !== null && absW === null) absW = absH * absStyle.aspectRatio;
+    }
+    if (absW === null || absH === null) {
+      if (child.measure) {
+        const measured = child.measure(absW ?? cbWidth, absH ?? cbHeight);
+        if (absW === null) absW = measured.width;
+        if (absH === null) absH = measured.height;
+      } else if ((child.children ?? []).length > 0) {
+        const intrinsic = layoutNodeFn(child, absW !== null ? absW + absHInset : cbWidth, absH !== null ? absH + absVInset : cbHeight);
+        if (absW === null) absW = Math.max(0, intrinsic.width - absHInset);
+        if (absH === null) absH = Math.max(0, intrinsic.height - absVInset);
+      } else {
+        if (absW === null) absW = 0;
+        if (absH === null) absH = 0;
+      }
+    }
+    const absMinW = resolveDimension(absStyle.minWidth, cbWidth);
+    const absMaxW = resolveDimension(absStyle.maxWidth, cbWidth);
+    const absMinH = resolveDimension(absStyle.minHeight, cbHeight);
+    const absMaxH = resolveDimension(absStyle.maxHeight, cbHeight);
+    absW = clamp(absW, absMinW, absMaxW);
+    absH = clamp(absH, absMinH, absMaxH);
+    const absOuterW = absW + absHInset;
+    const absOuterH = absH + absVInset;
+    let absX = insetLeft !== null ? border.left + insetLeft : insetRight !== null ? border.left + cbWidth - insetRight - absOuterW : border.left;
+    let absY = insetTop !== null ? border.top + insetTop : insetBottom !== null ? border.top + cbHeight - insetBottom - absOuterH : border.top;
+    let absChildLayouts = [];
+    if ((child.children ?? []).length > 0) {
+      const innerLayout = layoutNodeFn(child, absOuterW, absOuterH);
+      absChildLayouts = innerLayout.children;
+    }
+    childLayoutMap.set(index, {
+      x: absX,
+      y: absY,
+      width: absOuterW,
+      height: absOuterH,
+      children: absChildLayouts
+    });
+  }
+  for (let i = 0; i < children.length; i++) {
+    if (!childLayoutMap.has(i)) {
+      const childStyle = resolveStyle(children[i].style);
+      if (childStyle.display === "none" && childStyle.position !== "absolute") {
+        childLayoutMap.set(i, { x: 0, y: 0, width: 0, height: 0, children: [] });
+      }
+    }
+  }
+  const childLayouts = [];
+  for (let i = 0; i < children.length; i++) {
+    const layout = childLayoutMap.get(i);
+    if (layout) childLayouts.push(layout);
+  }
+  return {
+    x: 0,
+    y: 0,
+    width: finalWidth,
+    height: finalHeight,
+    children: childLayouts
+  };
+}
+function computeContentAlignment(alignment, tracksSize, containerSize) {
+  const freeSpace = Math.max(0, containerSize - tracksSize);
+  switch (alignment) {
+    case "flex-start":
+    case "stretch":
+      return 0;
+    case "flex-end":
+      return freeSpace;
+    case "center":
+      return freeSpace / 2;
+    case "space-between":
+    case "space-around":
+    case "space-evenly":
+      return 0;
+  }
+}
+
+// src/layout.ts
+function isRow(direction) {
+  return direction === "row" || direction === "row-reverse";
+}
+function mainAxisIsHorizontal(direction) {
+  return isRow(direction);
+}
+var layoutCache = null;
+function computeLayout(node, availableWidth = Infinity, availableHeight = Infinity) {
+  layoutCache = /* @__PURE__ */ new Map();
+  const result = layoutNode(node, availableWidth, availableHeight);
+  layoutCache = null;
+  return result;
+}
+function layoutNode(node, availableWidth, availableHeight, definiteWidth, definiteHeight) {
+  if (layoutCache) {
+    const nodeCache = layoutCache.get(node);
+    if (nodeCache) {
+      const key = `${availableWidth},${availableHeight},${definiteWidth ?? ""},${definiteHeight ?? ""}`;
+      const cached = nodeCache.get(key);
+      if (cached) return cached;
+    }
+  }
+  const style = resolveStyle(node.style);
+  if (style.display === "none") {
+    return { x: 0, y: 0, width: 0, height: 0, children: [] };
+  }
+  if (style.display === "grid") {
+    const gridResult = layoutGrid(node, availableWidth, availableHeight, layoutNode);
+    if (layoutCache) {
+      let nodeCache = layoutCache.get(node);
+      if (!nodeCache) {
+        nodeCache = /* @__PURE__ */ new Map();
+        layoutCache.set(node, nodeCache);
+      }
+      const key = `${availableWidth},${availableHeight},${definiteWidth ?? ""},${definiteHeight ?? ""}`;
+      nodeCache.set(key, gridResult);
+    }
+    return gridResult;
+  }
+  const padding = resolvePadding(style);
+  const border = resolveBorder(style);
+  const hInset = horizontalInset(padding, border);
+  const vInset = verticalInset(padding, border);
+  let containerWidth = resolveSize(style.width, availableWidth);
+  let containerHeight = resolveSize(style.height, availableHeight);
+  if (containerWidth === null && definiteWidth !== void 0) {
+    containerWidth = Math.max(0, definiteWidth - hInset);
+  }
+  if (containerHeight === null && definiteHeight !== void 0) {
+    containerHeight = Math.max(0, definiteHeight - vInset);
+  }
+  if (style.boxSizing === "border-box") {
+    if (containerWidth !== null) containerWidth = Math.max(0, containerWidth - hInset);
+    if (containerHeight !== null) containerHeight = Math.max(0, containerHeight - vInset);
+  }
+  const horizontal = mainAxisIsHorizontal(style.flexDirection);
+  const mainSize = horizontal ? containerWidth : containerHeight;
+  const crossSize = horizontal ? containerHeight : containerWidth;
+  const availableMainForItems = mainSize ?? (horizontal ? availableWidth - hInset : availableHeight - vInset);
+  const availableCrossForItems = crossSize ?? (horizontal ? availableHeight - vInset : availableWidth - hInset);
+  const containerMinW = resolveDimension(style.minWidth, availableWidth);
+  const containerMaxW = resolveDimension(style.maxWidth, availableWidth);
+  const containerMinH = resolveDimension(style.minHeight, availableHeight);
+  const containerMaxH = resolveDimension(style.maxHeight, availableHeight);
+  const children = node.children ?? [];
+  const absoluteChildren = [];
+  const flowChildren = [];
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const childStyle = resolveStyle(child.style);
+    const entry = { index: i, child, style: childStyle };
+    if (childStyle.position === "absolute") {
+      absoluteChildren.push(entry);
+    } else {
+      flowChildren.push(entry);
+    }
+  }
+  const items = flowChildren.map(({ child, style: childStyle }) => {
+    const childPadding = resolvePadding(childStyle);
+    const childBorder = resolveBorder(childStyle);
+    return {
+      node: child,
+      style: childStyle,
+      padding: childPadding,
+      border: childBorder,
+      marginTop: resolveMargin(childStyle.marginTop, horizontal ? availableCrossForItems : availableMainForItems),
+      marginRight: resolveMargin(childStyle.marginRight, horizontal ? availableMainForItems : availableCrossForItems),
+      marginBottom: resolveMargin(childStyle.marginBottom, horizontal ? availableCrossForItems : availableMainForItems),
+      marginLeft: resolveMargin(childStyle.marginLeft, horizontal ? availableMainForItems : availableCrossForItems),
+      flexBaseSize: 0,
+      hypotheticalMainSize: 0,
+      targetMainSize: 0,
+      usedMainSize: 0,
+      hypotheticalCrossSize: 0,
+      usedCrossSize: 0,
+      minMainSize: horizontal ? resolveDimension(childStyle.minWidth, availableMainForItems) : resolveDimension(childStyle.minHeight, availableMainForItems),
+      maxMainSize: horizontal ? resolveDimension(childStyle.maxWidth, availableMainForItems) : resolveDimension(childStyle.maxHeight, availableMainForItems),
+      minCrossSize: horizontal ? resolveDimension(childStyle.minHeight, availableCrossForItems) : resolveDimension(childStyle.minWidth, availableCrossForItems),
+      maxCrossSize: horizontal ? resolveDimension(childStyle.maxHeight, availableCrossForItems) : resolveDimension(childStyle.maxWidth, availableCrossForItems),
+      mainPos: 0,
+      crossPos: 0,
+      frozen: false,
+      measure: child.measure,
+      children: child.children ?? []
+    };
+  });
+  const hiddenFlowIndices = [];
+  const visibleItems = [];
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].style.display === "none") {
+      hiddenFlowIndices.push(flowChildren[i].index);
+    } else {
+      visibleItems.push(items[i]);
+    }
+  }
+  for (const item of visibleItems) {
+    const childHInset = horizontalInset(item.padding, item.border);
+    const childVInset = verticalInset(item.padding, item.border);
+    const mainInset = horizontal ? childHInset : childVInset;
+    let baseSize;
+    if (item.style.flexBasis !== "auto") {
+      baseSize = item.style.flexBasis;
+      if (item.style.boxSizing === "border-box") {
+        baseSize = Math.max(0, baseSize - mainInset);
+      }
+    } else {
+      const mainSizeValue = horizontal ? item.style.width : item.style.height;
+      const resolved = resolveSize(mainSizeValue, availableMainForItems);
+      if (resolved !== null) {
+        baseSize = resolved;
+        if (item.style.boxSizing === "border-box") {
+          baseSize = Math.max(0, baseSize - mainInset);
+        }
+      } else if (item.style.aspectRatio !== void 0) {
+        const crossSizeValue = horizontal ? item.style.height : item.style.width;
+        const crossInset = horizontal ? childVInset : childHInset;
+        const resolvedCross = resolveSize(crossSizeValue, availableCrossForItems);
+        if (resolvedCross !== null) {
+          let cs = resolvedCross;
+          if (item.style.boxSizing === "border-box") {
+            cs = Math.max(0, cs - crossInset);
+          }
+          baseSize = horizontal ? cs * item.style.aspectRatio : cs / item.style.aspectRatio;
+        } else {
+          baseSize = 0;
+        }
+      } else if (item.measure) {
+        const measured = item.measure(
+          horizontal ? availableMainForItems : availableCrossForItems,
+          horizontal ? availableCrossForItems : availableMainForItems
+        );
+        baseSize = horizontal ? measured.width : measured.height;
+      } else if (item.children.length > 0 && item.style.display === "flex") {
+        const childLayout = layoutNode(
+          item.node,
+          horizontal ? Infinity : availableCrossForItems + childHInset,
+          horizontal ? availableCrossForItems + childVInset : Infinity
+        );
+        baseSize = horizontal ? Math.max(0, childLayout.width - childHInset) : Math.max(0, childLayout.height - childVInset);
+      } else {
+        baseSize = 0;
+      }
+    }
+    item.flexBaseSize = baseSize;
+    item.hypotheticalMainSize = Math.max(
+      0,
+      clamp(baseSize, item.minMainSize, item.maxMainSize)
+    );
+  }
+  const lines = [];
+  const mainGap = horizontal ? style.columnGap : style.rowGap;
+  const crossGap = horizontal ? style.rowGap : style.columnGap;
+  if (style.flexWrap === "nowrap" || visibleItems.length === 0) {
+    lines.push({ items: visibleItems, crossSize: 0, crossOffset: 0 });
+  } else {
+    let currentLine = [];
+    let lineMainSize = 0;
+    for (const item of visibleItems) {
+      const outerHypo = item.hypotheticalMainSize + outerMainAll(item, horizontal);
+      const gapSize = currentLine.length > 0 ? mainGap : 0;
+      if (currentLine.length > 0 && lineMainSize + gapSize + outerHypo > availableMainForItems) {
+        lines.push({ items: currentLine, crossSize: 0, crossOffset: 0 });
+        currentLine = [item];
+        lineMainSize = outerHypo;
+      } else {
+        currentLine.push(item);
+        lineMainSize += gapSize + outerHypo;
+      }
+    }
+    if (currentLine.length > 0) {
+      lines.push({ items: currentLine, crossSize: 0, crossOffset: 0 });
+    }
+  }
+  if (style.flexWrap === "wrap-reverse") {
+    lines.reverse();
+  }
+  for (const line of lines) {
+    resolveFlexibleLengths(line.items, availableMainForItems, mainGap, horizontal);
+  }
+  for (const line of lines) {
+    for (const item of line.items) {
+      const childHInset = horizontalInset(item.padding, item.border);
+      const childVInset = verticalInset(item.padding, item.border);
+      const crossInset = horizontal ? childVInset : childHInset;
+      const crossSizeValue = horizontal ? item.style.height : item.style.width;
+      const resolvedCross = resolveSize(crossSizeValue, availableCrossForItems);
+      if (resolvedCross !== null) {
+        let cs = resolvedCross;
+        if (item.style.boxSizing === "border-box") {
+          cs = Math.max(0, cs - crossInset);
+        }
+        item.hypotheticalCrossSize = cs;
+      } else if (item.style.aspectRatio !== void 0) {
+        item.hypotheticalCrossSize = horizontal ? item.usedMainSize / item.style.aspectRatio : item.usedMainSize * item.style.aspectRatio;
+      } else if (item.measure) {
+        const measured = item.measure(
+          horizontal ? item.usedMainSize : availableCrossForItems,
+          horizontal ? availableCrossForItems : item.usedMainSize
+        );
+        item.hypotheticalCrossSize = horizontal ? measured.height : measured.width;
+      } else if (item.children.length > 0 && item.style.display === "flex") {
+        const childLayout = layoutNode(
+          item.node,
+          horizontal ? item.usedMainSize + childHInset : availableCrossForItems + childHInset,
+          horizontal ? availableCrossForItems + childVInset : item.usedMainSize + childVInset
+        );
+        item.hypotheticalCrossSize = horizontal ? Math.max(0, childLayout.height - childVInset) : Math.max(0, childLayout.width - childHInset);
+      } else {
+        item.hypotheticalCrossSize = 0;
+      }
+      item.hypotheticalCrossSize = Math.max(
+        0,
+        clamp(item.hypotheticalCrossSize, item.minCrossSize, item.maxCrossSize)
+      );
+    }
+  }
+  const isSingleLine = style.flexWrap === "nowrap";
+  if (isSingleLine && crossSize !== null) {
+    lines[0].crossSize = crossSize;
+  } else {
+    for (const line of lines) {
+      let maxCross = 0;
+      for (const item of line.items) {
+        const outerCross = item.hypotheticalCrossSize + outerCrossAll(item, horizontal);
+        if (outerCross > maxCross) maxCross = outerCross;
+      }
+      line.crossSize = maxCross;
+    }
+    if (isSingleLine && lines[0]) {
+      const minCross = horizontal ? Math.max(0, containerMinH - vInset) : Math.max(0, containerMinW - hInset);
+      const maxCross = horizontal ? Math.max(0, containerMaxH - vInset) : Math.max(0, containerMaxW - hInset);
+      lines[0].crossSize = clamp(lines[0].crossSize, minCross, maxCross);
+    }
+  }
+  for (const line of lines) {
+    for (const item of line.items) {
+      const effectiveAlign = resolveAlignSelf2(item.style.alignSelf, style.alignItems);
+      if (effectiveAlign === "stretch" && item.style.aspectRatio === void 0 && (horizontal ? item.style.height : item.style.width) === "auto" && item.marginTop !== null && item.marginBottom !== null && (horizontal ? item.marginTop : item.marginLeft) !== null && (horizontal ? item.marginBottom : item.marginRight) !== null) {
+        const crossMargin = outerCrossMargin(item, horizontal);
+        const crossInset = horizontal ? verticalInset(item.padding, item.border) : horizontalInset(item.padding, item.border);
+        item.usedCrossSize = clamp(
+          line.crossSize - crossMargin - crossInset,
+          item.minCrossSize,
+          item.maxCrossSize
+        );
+      } else {
+        item.usedCrossSize = item.hypotheticalCrossSize;
+      }
+    }
+  }
+  for (const line of lines) {
+    alignMainAxis(line.items, availableMainForItems, style.justifyContent, mainGap, horizontal);
+  }
+  for (const line of lines) {
+    for (const item of line.items) {
+      const effectiveAlign = resolveAlignSelf2(item.style.alignSelf, style.alignItems);
+      const outerCross = item.usedCrossSize + outerCrossAll(item, horizontal);
+      const freeSpace = line.crossSize - outerCross;
+      const crossStartMarginAuto = horizontal ? item.marginTop === null : item.marginLeft === null;
+      const crossEndMarginAuto = horizontal ? item.marginBottom === null : item.marginRight === null;
+      if (crossStartMarginAuto || crossEndMarginAuto) {
+        if (crossStartMarginAuto && crossEndMarginAuto) {
+          const half = Math.max(0, freeSpace) / 2;
+          if (horizontal) {
+            item.marginTop = half;
+            item.marginBottom = half;
+          } else {
+            item.marginLeft = half;
+            item.marginRight = half;
+          }
+        } else if (crossStartMarginAuto) {
+          if (horizontal) item.marginTop = Math.max(0, freeSpace);
+          else item.marginLeft = Math.max(0, freeSpace);
+        } else {
+          if (horizontal) item.marginBottom = Math.max(0, freeSpace);
+          else item.marginRight = Math.max(0, freeSpace);
+        }
+        item.crossPos = crossStartMarginValue(item, horizontal);
+      } else {
+        const crossStartM = crossStartMarginValue(item, horizontal);
+        switch (effectiveAlign) {
+          case "flex-start":
+            item.crossPos = crossStartM;
+            break;
+          case "flex-end": {
+            const ci = horizontal ? verticalInset(item.padding, item.border) : horizontalInset(item.padding, item.border);
+            item.crossPos = line.crossSize - item.usedCrossSize - ci - crossEndMarginValue(item, horizontal);
+            break;
+          }
+          case "center": {
+            item.crossPos = crossStartM + freeSpace / 2;
+            break;
+          }
+          case "stretch":
+            item.crossPos = crossStartM;
+            break;
+        }
+      }
+    }
+  }
+  let totalCrossSize;
+  if (crossSize !== null) {
+    totalCrossSize = crossSize;
+  } else {
+    totalCrossSize = 0;
+    for (let i = 0; i < lines.length; i++) {
+      totalCrossSize += lines[i].crossSize;
+      if (i < lines.length - 1) totalCrossSize += crossGap;
+    }
+    const minCross = horizontal ? Math.max(0, containerMinH - vInset) : Math.max(0, containerMinW - hInset);
+    const maxCross = horizontal ? Math.max(0, containerMaxH - vInset) : Math.max(0, containerMaxW - hInset);
+    totalCrossSize = clamp(totalCrossSize, minCross, maxCross);
+  }
+  alignCrossLines(lines, totalCrossSize, style.alignContent, crossGap);
+  let usedMainSize;
+  if (mainSize !== null) {
+    usedMainSize = mainSize;
+  } else {
+    usedMainSize = 0;
+    for (const line of lines) {
+      let lineSize = 0;
+      for (let i = 0; i < line.items.length; i++) {
+        const it = line.items[i];
+        lineSize += it.usedMainSize + outerMainAll(it, horizontal);
+        if (i < line.items.length - 1) lineSize += mainGap;
+      }
+      if (lineSize > usedMainSize) usedMainSize = lineSize;
+    }
+  }
+  const contentWidth = horizontal ? usedMainSize : totalCrossSize;
+  const contentHeight = horizontal ? totalCrossSize : usedMainSize;
+  let finalWidth;
+  let finalHeight;
+  if (containerWidth !== null) {
+    finalWidth = containerWidth + hInset;
+  } else {
+    finalWidth = clamp(contentWidth + hInset, containerMinW, containerMaxW);
+  }
+  if (containerHeight !== null) {
+    finalHeight = containerHeight + vInset;
+  } else {
+    finalHeight = clamp(contentHeight + vInset, containerMinH, containerMaxH);
+  }
+  const childLayoutMap = /* @__PURE__ */ new Map();
+  const itemToOriginalIndex = /* @__PURE__ */ new Map();
+  for (let i = 0; i < items.length; i++) {
+    itemToOriginalIndex.set(items[i], flowChildren[i].index);
+  }
+  for (const line of lines) {
+    for (const item of line.items) {
+      const mainOffset = horizontal ? padding.left + border.left : padding.top + border.top;
+      const crossOffset = horizontal ? padding.top + border.top : padding.left + border.left;
+      let itemX = horizontal ? mainOffset + item.mainPos : crossOffset + line.crossOffset + item.crossPos;
+      let itemY = horizontal ? crossOffset + line.crossOffset + item.crossPos : mainOffset + item.mainPos;
+      const itemW = horizontal ? item.usedMainSize : item.usedCrossSize;
+      const itemH = horizontal ? item.usedCrossSize : item.usedMainSize;
+      const itemOuterW = itemW + horizontalInset(item.padding, item.border);
+      const itemOuterH = itemH + verticalInset(item.padding, item.border);
+      if (item.style.position === "relative") {
+        const insetTop = resolveInset(item.style.top, finalHeight);
+        const insetLeft = resolveInset(item.style.left, finalWidth);
+        const insetBottom = resolveInset(item.style.bottom, finalHeight);
+        const insetRight = resolveInset(item.style.right, finalWidth);
+        if (insetLeft !== null) {
+          itemX += insetLeft;
+        } else if (insetRight !== null) {
+          itemX -= insetRight;
+        }
+        if (insetTop !== null) {
+          itemY += insetTop;
+        } else if (insetBottom !== null) {
+          itemY -= insetBottom;
+        }
+      }
+      let itemChildLayouts = [];
+      if (item.children.length > 0 && item.style.display === "flex") {
+        const innerLayout = layoutNode(item.node, itemOuterW, itemOuterH, itemOuterW, itemOuterH);
+        itemChildLayouts = innerLayout.children;
+      }
+      const originalIndex = itemToOriginalIndex.get(item);
+      childLayoutMap.set(originalIndex, {
+        x: itemX,
+        y: itemY,
+        width: itemOuterW,
+        height: itemOuterH,
+        children: itemChildLayouts
+      });
+    }
+  }
+  const cbWidth = finalWidth - border.left - border.right;
+  const cbHeight = finalHeight - border.top - border.bottom;
+  for (const { index, child, style: absStyle } of absoluteChildren) {
+    if (absStyle.display === "none") {
+      childLayoutMap.set(index, { x: 0, y: 0, width: 0, height: 0, children: [] });
+      continue;
+    }
+    const absPadding = resolvePadding(absStyle);
+    const absBorder = resolveBorder(absStyle);
+    const absHInset = horizontalInset(absPadding, absBorder);
+    const absVInset = verticalInset(absPadding, absBorder);
+    const insetTop = resolveInset(absStyle.top, cbHeight);
+    const insetRight = resolveInset(absStyle.right, cbWidth);
+    const insetBottom = resolveInset(absStyle.bottom, cbHeight);
+    const insetLeft = resolveInset(absStyle.left, cbWidth);
+    let absW = resolveSize(absStyle.width, cbWidth);
+    let absH = resolveSize(absStyle.height, cbHeight);
+    if (absStyle.boxSizing === "border-box") {
+      if (absW !== null) absW = Math.max(0, absW - absHInset);
+      if (absH !== null) absH = Math.max(0, absH - absVInset);
+    }
+    if (absW === null && insetLeft !== null && insetRight !== null) {
+      absW = Math.max(0, cbWidth - insetLeft - insetRight - absHInset);
+    }
+    if (absH === null && insetTop !== null && insetBottom !== null) {
+      absH = Math.max(0, cbHeight - insetTop - insetBottom - absVInset);
+    }
+    if (absStyle.aspectRatio !== void 0) {
+      if (absW !== null && absH === null) {
+        absH = absW / absStyle.aspectRatio;
+      } else if (absH !== null && absW === null) {
+        absW = absH * absStyle.aspectRatio;
+      }
+    }
+    if (absW === null || absH === null) {
+      if (child.measure) {
+        const measured = child.measure(absW ?? cbWidth, absH ?? cbHeight);
+        if (absW === null) absW = measured.width;
+        if (absH === null) absH = measured.height;
+      } else if ((child.children ?? []).length > 0 && absStyle.display === "flex") {
+        const intrinsic = layoutNode(
+          child,
+          absW !== null ? absW + absHInset : cbWidth,
+          absH !== null ? absH + absVInset : cbHeight
+        );
+        if (absW === null) absW = Math.max(0, intrinsic.width - absHInset);
+        if (absH === null) absH = Math.max(0, intrinsic.height - absVInset);
+      } else {
+        if (absW === null) absW = 0;
+        if (absH === null) absH = 0;
+      }
+    }
+    const absMinW = resolveDimension(absStyle.minWidth, cbWidth);
+    const absMaxW = resolveDimension(absStyle.maxWidth, cbWidth);
+    const absMinH = resolveDimension(absStyle.minHeight, cbHeight);
+    const absMaxH = resolveDimension(absStyle.maxHeight, cbHeight);
+    absW = clamp(absW, absMinW, absMaxW);
+    absH = clamp(absH, absMinH, absMaxH);
+    const absOuterW = absW + absHInset;
+    const absOuterH = absH + absVInset;
+    let absX;
+    if (insetLeft !== null) {
+      absX = border.left + insetLeft;
+    } else if (insetRight !== null) {
+      absX = border.left + cbWidth - insetRight - absOuterW;
+    } else {
+      absX = border.left;
+    }
+    let absY;
+    if (insetTop !== null) {
+      absY = border.top + insetTop;
+    } else if (insetBottom !== null) {
+      absY = border.top + cbHeight - insetBottom - absOuterH;
+    } else {
+      absY = border.top;
+    }
+    let absChildLayouts = [];
+    if ((child.children ?? []).length > 0 && absStyle.display === "flex") {
+      const innerLayout = layoutNode(child, absOuterW, absOuterH);
+      absChildLayouts = innerLayout.children;
+    }
+    childLayoutMap.set(index, {
+      x: absX,
+      y: absY,
+      width: absOuterW,
+      height: absOuterH,
+      children: absChildLayouts
+    });
+  }
+  for (const hiddenIdx of hiddenFlowIndices) {
+    childLayoutMap.set(hiddenIdx, { x: 0, y: 0, width: 0, height: 0, children: [] });
+  }
+  const childLayouts = [];
+  for (let i = 0; i < children.length; i++) {
+    const layout = childLayoutMap.get(i);
+    if (layout) childLayouts.push(layout);
+  }
+  const result = {
+    x: 0,
+    y: 0,
+    width: finalWidth,
+    height: finalHeight,
+    children: childLayouts
+  };
+  if (layoutCache) {
+    let nodeCache = layoutCache.get(node);
+    if (!nodeCache) {
+      nodeCache = /* @__PURE__ */ new Map();
+      layoutCache.set(node, nodeCache);
+    }
+    nodeCache.set(`${availableWidth},${availableHeight},${definiteWidth ?? ""},${definiteHeight ?? ""}`, result);
+  }
+  return result;
+}
+function resolveFlexibleLengths(items, availableMain, gap, horizontal) {
+  if (items.length === 0) return;
+  if (!isFinite(availableMain)) {
+    for (const item of items) {
+      item.usedMainSize = Math.max(0, item.hypotheticalMainSize);
+    }
+    return;
+  }
+  const totalGap = gap * (items.length - 1);
+  for (const item of items) {
+    item.targetMainSize = item.flexBaseSize;
+    item.frozen = false;
+  }
+  let usedByHypothetical = totalGap;
+  for (const item of items) {
+    usedByHypothetical += item.hypotheticalMainSize + outerMainAll(item, horizontal);
+  }
+  const growing = usedByHypothetical < availableMain;
+  for (const item of items) {
+    const factor = growing ? item.style.flexGrow : item.style.flexShrink;
+    if (factor === 0) {
+      item.targetMainSize = item.hypotheticalMainSize;
+      item.frozen = true;
+    } else if (growing && item.flexBaseSize > item.hypotheticalMainSize) {
+      item.targetMainSize = item.hypotheticalMainSize;
+      item.frozen = true;
+    } else if (!growing && item.flexBaseSize < item.hypotheticalMainSize) {
+      item.targetMainSize = item.hypotheticalMainSize;
+      item.frozen = true;
+    }
+  }
+  let initialFreeSpace = availableMain - totalGap;
+  for (const item of items) {
+    if (item.frozen) {
+      initialFreeSpace -= item.targetMainSize + outerMainAll(item, horizontal);
+    } else {
+      initialFreeSpace -= item.flexBaseSize + outerMainAll(item, horizontal);
+    }
+  }
+  for (let iteration = 0; iteration < 100; iteration++) {
+    const unfrozen = items.filter((i) => !i.frozen);
+    if (unfrozen.length === 0) break;
+    let remainingFreeSpace = availableMain - totalGap;
+    for (const item of items) {
+      if (item.frozen) {
+        remainingFreeSpace -= item.targetMainSize + outerMainAll(item, horizontal);
+      } else {
+        remainingFreeSpace -= item.flexBaseSize + outerMainAll(item, horizontal);
+      }
+    }
+    let sumFlexFactors = 0;
+    for (const item of unfrozen) {
+      sumFlexFactors += growing ? item.style.flexGrow : item.style.flexShrink;
+    }
+    if (sumFlexFactors < 1 && sumFlexFactors > 0) {
+      const scaled = initialFreeSpace * sumFlexFactors;
+      if (Math.abs(scaled) < Math.abs(remainingFreeSpace)) {
+        remainingFreeSpace = scaled;
+      }
+    }
+    if (remainingFreeSpace !== 0) {
+      if (growing) {
+        let totalGrowth = 0;
+        for (const item of unfrozen) totalGrowth += item.style.flexGrow;
+        if (totalGrowth > 0) {
+          for (const item of unfrozen) {
+            const ratio = item.style.flexGrow / totalGrowth;
+            item.targetMainSize = item.flexBaseSize + remainingFreeSpace * ratio;
+          }
+        }
+      } else {
+        let totalScaledShrink = 0;
+        for (const item of unfrozen) {
+          totalScaledShrink += item.style.flexShrink * item.flexBaseSize;
+        }
+        if (totalScaledShrink > 0) {
+          for (const item of unfrozen) {
+            const scaledFactor = item.style.flexShrink * item.flexBaseSize;
+            const ratio = scaledFactor / totalScaledShrink;
+            item.targetMainSize = item.flexBaseSize - Math.abs(remainingFreeSpace) * ratio;
+          }
+        }
+      }
+    }
+    let totalViolation = 0;
+    const violations = [];
+    for (const item of unfrozen) {
+      const clamped = Math.max(0, clamp(item.targetMainSize, item.minMainSize, item.maxMainSize));
+      const violation = clamped - item.targetMainSize;
+      totalViolation += violation;
+      if (violation > 0) {
+        violations.push({ item, type: "min" });
+      } else if (violation < 0) {
+        violations.push({ item, type: "max" });
+      } else {
+        violations.push({ item, type: "none" });
+      }
+      item.targetMainSize = clamped;
+    }
+    if (totalViolation === 0) {
+      for (const item of unfrozen) item.frozen = true;
+    } else if (totalViolation > 0) {
+      for (const { item, type } of violations) {
+        if (type === "min") item.frozen = true;
+      }
+    } else {
+      for (const { item, type } of violations) {
+        if (type === "max") item.frozen = true;
+      }
+    }
+  }
+  for (const item of items) {
+    item.usedMainSize = Math.max(0, item.targetMainSize);
+  }
+}
+function alignMainAxis(items, availableMain, justifyContent, gap, horizontal) {
+  if (items.length === 0) return;
+  const totalGap = gap * (items.length - 1);
+  let autoMarginCount = 0;
+  for (const item of items) {
+    if (horizontal) {
+      if (item.marginLeft === null) autoMarginCount++;
+      if (item.marginRight === null) autoMarginCount++;
+    } else {
+      if (item.marginTop === null) autoMarginCount++;
+      if (item.marginBottom === null) autoMarginCount++;
+    }
+  }
+  let usedSpace = totalGap;
+  for (const item of items) {
+    usedSpace += item.usedMainSize + outerMainAll(item, horizontal);
+  }
+  const freeSpace = availableMain - usedSpace;
+  if (autoMarginCount > 0 && freeSpace > 0) {
+    const perAutoMargin = freeSpace / autoMarginCount;
+    for (const item of items) {
+      if (horizontal) {
+        if (item.marginLeft === null) item.marginLeft = perAutoMargin;
+        if (item.marginRight === null) item.marginRight = perAutoMargin;
+      } else {
+        if (item.marginTop === null) item.marginTop = perAutoMargin;
+        if (item.marginBottom === null) item.marginBottom = perAutoMargin;
+      }
+    }
+    let pos2 = 0;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const mainInset = horizontal ? horizontalInset(item.padding, item.border) : verticalInset(item.padding, item.border);
+      pos2 += mainStartMarginValue(item, horizontal);
+      item.mainPos = pos2;
+      pos2 += item.usedMainSize + mainInset + mainEndMarginValue(item, horizontal);
+      if (i < items.length - 1) pos2 += gap;
+    }
+    return;
+  }
+  for (const item of items) {
+    if (horizontal) {
+      if (item.marginLeft === null) item.marginLeft = 0;
+      if (item.marginRight === null) item.marginRight = 0;
+    } else {
+      if (item.marginTop === null) item.marginTop = 0;
+      if (item.marginBottom === null) item.marginBottom = 0;
+    }
+  }
+  usedSpace = totalGap;
+  for (const item of items) {
+    usedSpace += item.usedMainSize + outerMainAll(item, horizontal);
+  }
+  const actualFreeSpace = Math.max(0, availableMain - usedSpace);
+  let startOffset = 0;
+  let betweenSpace = gap;
+  switch (justifyContent) {
+    case "flex-start":
+      startOffset = 0;
+      betweenSpace = gap;
+      break;
+    case "flex-end":
+      startOffset = actualFreeSpace;
+      betweenSpace = gap;
+      break;
+    case "center":
+      startOffset = actualFreeSpace / 2;
+      betweenSpace = gap;
+      break;
+    case "space-between":
+      startOffset = 0;
+      betweenSpace = items.length > 1 ? gap + actualFreeSpace / (items.length - 1) : gap;
+      break;
+    case "space-around": {
+      const perItem = actualFreeSpace / items.length;
+      startOffset = perItem / 2;
+      betweenSpace = gap + perItem;
+      break;
+    }
+    case "space-evenly": {
+      const perSlot = actualFreeSpace / (items.length + 1);
+      startOffset = perSlot;
+      betweenSpace = gap + perSlot;
+      break;
+    }
+  }
+  let pos = startOffset;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const mainInset = horizontal ? horizontalInset(item.padding, item.border) : verticalInset(item.padding, item.border);
+    pos += mainStartMarginValue(item, horizontal);
+    item.mainPos = pos;
+    pos += item.usedMainSize + mainInset + mainEndMarginValue(item, horizontal);
+    if (i < items.length - 1) pos += betweenSpace;
+  }
+}
+function alignCrossLines(lines, totalCrossSize, alignContent, crossGap) {
+  if (lines.length === 0) return;
+  const totalLinesCross = lines.reduce((sum, l) => sum + l.crossSize, 0) + crossGap * (lines.length - 1);
+  const freeSpace = Math.max(0, totalCrossSize - totalLinesCross);
+  let offset = 0;
+  let betweenSpace = crossGap;
+  switch (alignContent) {
+    case "flex-start":
+      offset = 0;
+      betweenSpace = crossGap;
+      break;
+    case "flex-end":
+      offset = freeSpace;
+      betweenSpace = crossGap;
+      break;
+    case "center":
+      offset = freeSpace / 2;
+      betweenSpace = crossGap;
+      break;
+    case "stretch":
+      offset = 0;
+      betweenSpace = crossGap;
+      if (lines.length > 0) {
+        const extra = freeSpace / lines.length;
+        for (const line of lines) {
+          line.crossSize += extra;
+        }
+      }
+      break;
+    case "space-between":
+      offset = 0;
+      betweenSpace = lines.length > 1 ? crossGap + freeSpace / (lines.length - 1) : crossGap;
+      break;
+    case "space-around": {
+      const perLine = freeSpace / lines.length;
+      offset = perLine / 2;
+      betweenSpace = crossGap + perLine;
+      break;
+    }
+  }
+  let pos = offset;
+  for (const line of lines) {
+    line.crossOffset = pos;
+    pos += line.crossSize + betweenSpace;
+  }
+}
+function resolveAlignSelf2(alignSelf, parentAlignItems) {
+  return alignSelf === "auto" ? parentAlignItems : alignSelf;
+}
+function outerMainMargin(item, horizontal) {
+  if (horizontal) {
+    return (item.marginLeft ?? 0) + (item.marginRight ?? 0);
+  }
+  return (item.marginTop ?? 0) + (item.marginBottom ?? 0);
+}
+function outerMainAll(item, horizontal) {
+  const margin = outerMainMargin(item, horizontal);
+  const inset = horizontal ? horizontalInset(item.padding, item.border) : verticalInset(item.padding, item.border);
+  return margin + inset;
+}
+function outerCrossMargin(item, horizontal) {
+  if (horizontal) {
+    return (item.marginTop ?? 0) + (item.marginBottom ?? 0);
+  }
+  return (item.marginLeft ?? 0) + (item.marginRight ?? 0);
+}
+function outerCrossAll(item, horizontal) {
+  const margin = outerCrossMargin(item, horizontal);
+  const inset = horizontal ? verticalInset(item.padding, item.border) : horizontalInset(item.padding, item.border);
+  return margin + inset;
+}
+function mainStartMarginValue(item, horizontal) {
+  return (horizontal ? item.marginLeft : item.marginTop) ?? 0;
+}
+function mainEndMarginValue(item, horizontal) {
+  return (horizontal ? item.marginRight : item.marginBottom) ?? 0;
+}
+function crossStartMarginValue(item, horizontal) {
+  return (horizontal ? item.marginTop : item.marginLeft) ?? 0;
+}
+function crossEndMarginValue(item, horizontal) {
+  return (horizontal ? item.marginBottom : item.marginRight) ?? 0;
+}
+
+// src/helpers.ts
+function h(style, ...children) {
+  return children.length > 0 ? { style, children } : { style };
+}
+function row(style, ...children) {
+  return h({ flexDirection: "row", ...style }, ...children);
+}
+function col(style, ...children) {
+  return h({ flexDirection: "column", ...style }, ...children);
+}
+function grid(style, ...children) {
+  return h({ display: "grid", ...style }, ...children);
+}
+
+exports.col = col;
+exports.computeLayout = computeLayout;
+exports.grid = grid;
+exports.h = h;
+exports.row = row;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map