@hypen-space/web 0.2.0

package/dist/src/canvas/layout.js

@@ -0,0 +1,309 @@
+import {
+  measureText
+} from "./text.js";
+import {
+  parseSize,
+  parseSpacing
+} from "./utils.js";
+import"../../chunk-2s02mkzs.js";
+
+// 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 === "spacer") {
+    if (width === null)
+      width = availableAfterMargin.width;
+    if (height === null)
+      height = availableAfterMargin.height;
+  } else if (type === "divider" || type === "separator") {
+    const orientation = props.orientation || "horizontal";
+    const thickness = parseFloat(props.thickness) || 1;
+    if (orientation === "vertical") {
+      if (width === null)
+        width = thickness;
+      if (height === null)
+        height = availableAfterMargin.height;
+    } else {
+      if (width === null)
+        width = availableAfterMargin.width;
+      if (height === null)
+        height = thickness;
+    }
+  } 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);
+  }
+}
+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 justifyContent = props.justifyContent || "flex-start";
+  const alignItems = props.alignItems || "flex-start";
+  const gap = parseFloat(props.gap) || 0;
+  const isColumn = flexDirection === "column";
+  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;
+      }
+    }
+    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;
+        }
+        totalMainSize += extraSpace;
+      }
+    }
+    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);
+        }
+        totalMainSize -= shrinkSpace;
+      }
+    }
+    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;
+    }
+    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;
+    }
+  }
+}
+function layoutStackChildren(ctx, parent) {
+  const layout = parent.layout;
+  const props = parent.props;
+  const alignItems = props.alignItems || "flex-start";
+  const justifyContent = props.justifyContent || "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 (alignItems === "center") {
+      x = (availableWidth - childLayout.width) / 2;
+    } else if (alignItems === "flex-end") {
+      x = availableWidth - childLayout.width;
+    }
+    if (justifyContent === "center") {
+      y = (availableHeight - childLayout.height) / 2;
+    } else if (justifyContent === "flex-end") {
+      y = availableHeight - childLayout.height;
+    }
+    childLayout.x = layout.x + layout.contentX + x;
+    childLayout.y = layout.y + layout.contentY + y;
+  }
+}
+export {
+  computeLayout
+};
+
+export { computeLayout };
+
+//# debugId=DB33C4C61753CE7B64756E2164756E21

package/dist/src/canvas/layout.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/canvas/layout.ts"],
+  "sourcesContent": [
+    "/**\n * Layout Engine\n *\n * Flexbox-like layout system for positioning virtual nodes\n */\n\nimport type { VirtualNode, Layout, BoxSpacing } from \"./types.js\";\nimport { parseSpacing, parseSize } from \"./utils.js\";\nimport { measureText } from \"./text.js\";\n\n/**\n * Compute layout for a virtual node tree\n */\nexport function computeLayout(\n  ctx: CanvasRenderingContext2D,\n  node: VirtualNode,\n  availableWidth: number,\n  availableHeight: number,\n  x: number = 0,\n  y: number = 0\n): void {\n  // Parse props\n  const props = node.props;\n\n  // Support individual margins (marginTop, marginRight, etc.)\n  let margin = parseSpacing(props.margin || 0);\n  if (props.marginTop !== undefined) margin.top = parseFloat(props.marginTop) || 0;\n  if (props.marginRight !== undefined) margin.right = parseFloat(props.marginRight) || 0;\n  if (props.marginBottom !== undefined) margin.bottom = parseFloat(props.marginBottom) || 0;\n  if (props.marginLeft !== undefined) margin.left = parseFloat(props.marginLeft) || 0;\n\n  // Support individual padding (paddingTop, paddingRight, etc.)\n  let padding = parseSpacing(props.padding || 0);\n  if (props.paddingTop !== undefined) padding.top = parseFloat(props.paddingTop) || 0;\n  if (props.paddingRight !== undefined) padding.right = parseFloat(props.paddingRight) || 0;\n  if (props.paddingBottom !== undefined) padding.bottom = parseFloat(props.paddingBottom) || 0;\n  if (props.paddingLeft !== undefined) padding.left = parseFloat(props.paddingLeft) || 0;\n\n  const borderWidth = parseFloat(props.borderWidth) || 0;\n  const borderColor = props.borderColor || \"transparent\";\n  const borderRadius = parseFloat(props.borderRadius) || 0;\n\n  // Calculate available space after margin\n  const availableAfterMargin = {\n    width: availableWidth - margin.left - margin.right,\n    height: availableHeight - margin.top - margin.bottom,\n  };\n\n  // Determine size\n  let width = parseSize(props.width);\n  let height = parseSize(props.height);\n\n  // Default sizing for specific component types\n  const type = node.type.toLowerCase();\n\n  if (type === \"spacer\") {\n    // Spacer fills available space by default\n    if (width === null) width = availableAfterMargin.width;\n    if (height === null) height = availableAfterMargin.height;\n  } else if (type === \"divider\" || type === \"separator\") {\n    const orientation = props.orientation || \"horizontal\";\n    const thickness = parseFloat(props.thickness) || 1;\n\n    if (orientation === \"vertical\") {\n      if (width === null) width = thickness;\n      if (height === null) height = availableAfterMargin.height;\n    } else {\n      if (width === null) width = availableAfterMargin.width;\n      if (height === null) height = thickness;\n    }\n  } else if (type === \"checkbox\" || type === \"radio\") {\n    const size = parseFloat(props.size) || 20;\n    if (width === null) width = size;\n    if (height === null) height = size;\n  } else if (type === \"switch\" || type === \"toggle\") {\n    if (width === null) width = 44;\n    if (height === null) height = 24;\n  } else if (type === \"slider\") {\n    if (width === null) width = 200;\n    if (height === null) height = 20;\n  } else if (type === \"progress\" || type === \"progressbar\") {\n    if (width === null) width = 200;\n    if (height === null) height = 8;\n  } else if (type === \"spinner\" || type === \"loading\") {\n    const size = parseFloat(props.size) || 24;\n    if (width === null) width = size;\n    if (height === null) height = size;\n  } else if (type === \"badge\") {\n    if (width === null) width = 20;\n    if (height === null) height = 20;\n  } else if (type === \"avatar\") {\n    const size = parseFloat(props.size) || 40;\n    if (width === null) width = size;\n    if (height === null) height = size;\n  } else if (type === \"icon\") {\n    const size = parseFloat(props.size) || 24;\n    if (width === null) width = size;\n    if (height === null) height = size;\n  }\n\n  // Intrinsic sizing for text nodes\n  if (node.type === \"text\" && node.props[0]) {\n    const text = String(node.props[0] || \"\");\n    const fontSize = parseFloat(props.fontSize) || 16;\n    const fontWeight = props.fontWeight || \"normal\";\n    const fontFamily = props.fontFamily || \"system-ui, sans-serif\";\n    const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;\n\n    const maxWidth = width || availableAfterMargin.width - padding.left - padding.right;\n    const metrics = measureText(ctx, text, { fontSize, fontWeight, fontFamily, lineHeight }, maxWidth);\n\n    if (!width) width = metrics.width + padding.left + padding.right;\n    if (!height) height = metrics.height + padding.top + padding.bottom;\n  }\n\n  // Default to available size if not specified\n  if (width === null) width = availableAfterMargin.width;\n  if (height === null) height = availableAfterMargin.height;\n\n  // Apply constraints\n  const minWidth = parseSize(props.minWidth);\n  const maxWidth = parseSize(props.maxWidth);\n  const minHeight = parseSize(props.minHeight);\n  const maxHeight = parseSize(props.maxHeight);\n\n  if (minWidth !== null) width = Math.max(width, minWidth);\n  if (maxWidth !== null) width = Math.min(width, maxWidth);\n  if (minHeight !== null) height = Math.max(height, minHeight);\n  if (maxHeight !== null) height = Math.min(height, maxHeight);\n\n  // Create layout object\n  const layout: Layout = {\n    x: x + margin.left,\n    y: y + margin.top,\n    width,\n    height,\n    margin,\n    padding,\n    border: {\n      width: borderWidth,\n      color: borderColor,\n      radius: borderRadius,\n    },\n    contentX: padding.left + borderWidth,\n    contentY: padding.top + borderWidth,\n    contentWidth: width - padding.left - padding.right - borderWidth * 2,\n    contentHeight: height - padding.top - padding.bottom - borderWidth * 2,\n  };\n\n  node.layout = layout;\n\n  // Layout children if container\n  if (node.children.length > 0) {\n    layoutChildren(ctx, node);\n  }\n}\n\n/**\n * Layout children using flexbox-like rules\n */\nfunction layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): void {\n  const layout = parent.layout!;\n  const props = parent.props;\n\n  // Stack components overlay children on top of each other\n  if (parent.type.toLowerCase() === \"stack\") {\n    layoutStackChildren(ctx, parent);\n    return;\n  }\n\n  const flexDirection = props.flexDirection || (parent.type === \"column\" ? \"column\" : \"row\");\n  const justifyContent = props.justifyContent || \"flex-start\";\n  const alignItems = props.alignItems || \"flex-start\";\n  const gap = parseFloat(props.gap) || 0;\n\n  const isColumn = flexDirection === \"column\";\n  const availableWidth = layout.contentWidth;\n  const availableHeight = layout.contentHeight;\n\n  // First pass: compute intrinsic sizes and collect flex info\n  const childInfo: Array<{\n    width: number;\n    height: number;\n    flexGrow: number;\n    flexShrink: number;\n    flexBasis: number | null;\n  }> = [];\n  let totalMainSize = 0;\n  let totalFlexGrow = 0;\n  let totalFlexShrink = 0;\n\n  for (const child of parent.children) {\n    const flexGrow = parseFloat(child.props.flexGrow) || parseFloat(child.props.flex) || 0;\n    const flexShrink = parseFloat(child.props.flexShrink) || 1;\n    const flexBasis = parseSize(child.props.flexBasis);\n\n    // Compute child layout with available space\n    computeLayout(\n      ctx,\n      child,\n      availableWidth,\n      availableHeight,\n      0,\n      0\n    );\n\n    const childLayout = child.layout!;\n    let mainSize = isColumn ? childLayout.height : childLayout.width;\n\n    // Use flexBasis if specified\n    if (flexBasis !== null) {\n      mainSize = flexBasis;\n      if (isColumn) {\n        childLayout.height = flexBasis;\n      } else {\n        childLayout.width = flexBasis;\n      }\n    }\n\n    childInfo.push({\n      width: childLayout.width,\n      height: childLayout.height,\n      flexGrow,\n      flexShrink,\n      flexBasis,\n    });\n\n    totalMainSize += mainSize;\n    totalFlexGrow += flexGrow;\n    totalFlexShrink += flexShrink;\n  }\n\n  // Add gaps\n  const totalGap = gap * (parent.children.length - 1);\n  totalMainSize += totalGap;\n\n  // Apply flex grow/shrink\n  const availableMain = isColumn ? availableHeight : availableWidth;\n  let remainingSpace = availableMain - totalMainSize;\n\n  // Distribute remaining space to flex-grow children\n  if (remainingSpace > 0 && totalFlexGrow > 0) {\n    const spacePerFlex = remainingSpace / totalFlexGrow;\n\n    for (let i = 0; i < parent.children.length; i++) {\n      const info = childInfo[i];\n      if (info.flexGrow > 0) {\n        const extraSpace = spacePerFlex * info.flexGrow;\n        if (isColumn) {\n          info.height += extraSpace;\n        } else {\n          info.width += extraSpace;\n        }\n        totalMainSize += extraSpace;\n      }\n    }\n\n    remainingSpace = 0;\n  }\n\n  // Apply flex shrink if needed (content is too large)\n  if (remainingSpace < 0 && totalFlexShrink > 0) {\n    const shrinkPerFlex = Math.abs(remainingSpace) / totalFlexShrink;\n\n    for (let i = 0; i < parent.children.length; i++) {\n      const info = childInfo[i];\n      if (info.flexShrink > 0) {\n        const shrinkSpace = Math.min(\n          shrinkPerFlex * info.flexShrink,\n          isColumn ? info.height : info.width\n        );\n\n        if (isColumn) {\n          info.height = Math.max(0, info.height - shrinkSpace);\n        } else {\n          info.width = Math.max(0, info.width - shrinkSpace);\n        }\n\n        totalMainSize -= shrinkSpace;\n      }\n    }\n\n    remainingSpace = availableMain - totalMainSize;\n  }\n\n  // Calculate starting position based on justifyContent\n  let mainStart = 0;\n  let spacing = 0;\n\n  if (justifyContent === \"center\") {\n    mainStart = Math.max(0, remainingSpace / 2);\n  } else if (justifyContent === \"flex-end\") {\n    mainStart = Math.max(0, remainingSpace);\n  } else if (justifyContent === \"space-between\") {\n    spacing = remainingSpace / Math.max(1, parent.children.length - 1);\n  } else if (justifyContent === \"space-around\") {\n    spacing = remainingSpace / parent.children.length;\n    mainStart = spacing / 2;\n  }\n\n  // Position children\n  let currentMain = mainStart;\n\n  for (let i = 0; i < parent.children.length; i++) {\n    const child = parent.children[i];\n    const childLayout = child.layout!;\n    const info = childInfo[i];\n\n    // Update child layout with flex-adjusted size\n    childLayout.width = info.width;\n    childLayout.height = info.height;\n\n    // Calculate cross position based on alignItems\n    let crossStart = 0;\n    const availableCross = isColumn ? availableWidth : availableHeight;\n    const childCross = isColumn ? info.width : info.height;\n\n    if (alignItems === \"center\") {\n      crossStart = (availableCross - childCross) / 2;\n    } else if (alignItems === \"flex-end\") {\n      crossStart = availableCross - childCross;\n    }\n\n    // Update child position relative to parent content area\n    if (isColumn) {\n      childLayout.x = layout.x + layout.contentX + crossStart;\n      childLayout.y = layout.y + layout.contentY + currentMain;\n      currentMain += info.height + gap;\n    } else {\n      childLayout.x = layout.x + layout.contentX + currentMain;\n      childLayout.y = layout.y + layout.contentY + crossStart;\n      currentMain += info.width + gap;\n    }\n\n    if (justifyContent === \"space-between\" || justifyContent === \"space-around\") {\n      currentMain += spacing;\n    }\n  }\n}\n\n/**\n * Layout Stack children - overlays children on top of each other\n */\nfunction layoutStackChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): void {\n  const layout = parent.layout!;\n  const props = parent.props;\n\n  const alignItems = props.alignItems || \"flex-start\";\n  const justifyContent = props.justifyContent || \"flex-start\";\n\n  const availableWidth = layout.contentWidth;\n  const availableHeight = layout.contentHeight;\n\n  // Layout all children at the same position (stacked on top of each other)\n  for (const child of parent.children) {\n    // Compute child layout\n    computeLayout(\n      ctx,\n      child,\n      availableWidth,\n      availableHeight,\n      0,\n      0\n    );\n\n    const childLayout = child.layout!;\n\n    // Calculate position based on alignment\n    let x = 0;\n    let y = 0;\n\n    // Horizontal alignment\n    if (alignItems === \"center\") {\n      x = (availableWidth - childLayout.width) / 2;\n    } else if (alignItems === \"flex-end\") {\n      x = availableWidth - childLayout.width;\n    }\n\n    // Vertical alignment\n    if (justifyContent === \"center\") {\n      y = (availableHeight - childLayout.height) / 2;\n    } else if (justifyContent === \"flex-end\") {\n      y = availableHeight - childLayout.height;\n    }\n\n    // Update child position relative to parent content area\n    childLayout.x = layout.x + layout.contentX + x;\n    childLayout.y = layout.y + layout.contentY + y;\n  }\n}\n\n\n\n\n\n\n\n\n\n\n\n"
+  ],
+  "mappings": "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",
+  "debugId": "DB33C4C61753CE7B64756E2164756E21",
+  "names": []
+}