@pibbl/core 0.0.2 → 0.0.3-alpha.109.1

package/dist/lib/layout/grid.js

@@ -1,4 +1,9 @@
-import { preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
+import { withAllocationCheckpoint } from "./allocation-checkpoint.js";
+import { contentBoxStyle } from "./box-sizing.js";
+import { canvasMeasurementService } from "./canvas-measurement.js";
+import { nativeLayout, LayoutRegion, mountedLayoutRegion, recordWasmAllocationPass, recordWasmAllocationItem, recordWasmAllocationCacheHit } from "./wasm/region.js";
+import { prepareKnownLayoutDescendants, registerKnownLayoutPreflight, claimPreparedLayoutPlan, stagePreparedLayoutPlan, preparePlacedKnownLayout } from "./prepared-root.js";
+import { getStyleMeasurementMode, preparedStyleValue, preparedStyleQuery } from "../style/responsive.js";
 import { definePrimitive } from "../define-primitive.js";
 import { clonePibblElement } from "../element/create-element.js";
 import { getChildPrimitiveReceiverToken } from "../element/metadata.js";
@@ -7,9 +12,9 @@ import { layoutDiagnostic } from "../style/diagnostics.js";
 import {
   wireStructuralEvents
 } from "../components/structural-events.js";
-import { normalizeEdges } from "../style/normalize.js";
-import { resolveLength } from "../style/resolve-length.js";
-import { setPreNormalizedStyle } from "../style/resolve-dispatch.js";
+import { normalizeBoxInsets, hasPercentageBoxPadding, resolveAllocatedInsets } from "./box-insets.js";
+import { isFitContent, resolveScalarSizingLength } from "../style/sizing-length.js";
+import { setPreNormalizedStyle, registerOpaqueStyleProperties } from "../style/resolve-dispatch.js";
 import {
   childWithUsedSize,
   prepareDirectChildStyle,
@@ -19,13 +24,28 @@ import {
   resolveContainerBox,
   resolveDirectChildBox
 } from "./absolute.js";
-import { pushLayoutBox } from "./context.js";
+import { getLayoutDirection, pushLayoutBox, resolvePositionedContainingBox } from "./context.js";
 import { recordLayoutEvaluation } from "./diagnostics.js";
 import { assertSupportedChildPosition } from "./positioning-diagnostics.js";
-import { measureElement } from "./measure.js";
+import { measureElement, measureIntrinsicElement } from "./measure.js";
+import { resolveAbsoluteFlexPlacement } from "./flex.js";
+import { GRID_V2_TRACK_STRIDE } from "./grid-kernel.js";
+const unsupportedProperties = ["gridColumnEnd", "gridRowEnd", "gridArea", "order"];
+function minmax(options) {
+  return Object.freeze({ kind: "minmax", min: options.min, max: options.max });
+}
+function repeatTracks(tracks, options) {
+  return Object.freeze({ kind: "repeat", count: options.count, tracks: Object.freeze([...tracks]) });
+}
+function autoFillTracks(...tracks) {
+  return Object.freeze({ kind: "repeat", count: "auto-fill", tracks: Object.freeze([...tracks]) });
+}
+function autoFitTracks(...tracks) {
+  return Object.freeze({ kind: "repeat", count: "auto-fit", tracks: Object.freeze([...tracks]) });
+}
+const GRID_CONTAINING_BOX_STYLE = /* @__PURE__ */ Symbol("pibbl.grid-containing-box-style");
 function renderGrid(props, style, ctx) {
   wireStructuralEvents(props);
-  const children = prepareLayoutChildren(props.children, "Grid");
   recordLayoutEvaluation();
   const content = style.box.contentBox;
   ctx.translate(content.x, content.y);
@@ -35,141 +55,192 @@ function renderGrid(props, style, ctx) {
     width: content.width,
     height: content.height
   });
-  const releaseLayout = pushLayoutBox(localContent);
+  const releaseLayout = pushLayoutBox(localContent, {
+    logicalOffset: content,
+    containingBlock: resolvePositionedContainingBox(
+      style[GRID_CONTAINING_BOX_STYLE],
+      localContent,
+      "Grid"
+    )
+  });
   GLOBAL_STATE.componentRefs.onAfterRender = releaseLayout;
-  const service = {
-    measureText(value, font) {
-      ctx.save();
-      try {
-        ctx.font = font;
-        return ctx.measureText(value);
-      } finally {
-        ctx.restore();
-      }
-    }
-  };
-  const placements = resolveGridPlacements(
+  const prepared = nativeLayout ? claimPreparedLayoutPlan(GLOBAL_STATE.componentRefs.element, localContent) : void 0;
+  const children = prepared?.children ?? prepareLayoutChildren(props.children, "Grid");
+  const service = canvasMeasurementService(ctx);
+  const nativeRegion = prepared?.region ?? (nativeLayout ? mountedLayoutRegion() : void 0);
+  if (nativeLayout && !nativeRegion) throw new Error("Experimental Grid requires its mounted native region.");
+  const placements = prepared?.placements ?? withAllocationCheckpoint(nativeRegion, { children, content: localContent, settings: style, onHit: recordWasmAllocationCacheHit, calculate: () => resolveGridPlacements(
     localContent,
     children,
     style,
     {
       service,
       measureElement: (element, constraints) => measureElement(element, constraints, service)
-    }
-  );
+    },
+    nativeRegion
+  ) });
   let index = 0;
   return placeDirectChildren(
     children,
     localContent,
-    () => placements[index++],
+    (_child, occurrence) => {
+      const placement = placements[index++];
+      if (nativeLayout && !prepared) preparePlacedKnownLayout(placement.element, occurrence);
+      return placement;
+    },
     style.overflow
   );
 }
 const Grid = definePrimitive(renderGrid, {
   childInput: "structural",
-  resolveStyle: (style, context) => ({
-    box: resolveContainerBox(style, context, "Grid", "grid"),
-    overflow: style.overflow ?? "visible",
-    ...normalizeGridOptions(style, context.allocation)
-  }),
-  measure: (input) => measureGrid(input)
+  resolveStyle: (style, context) => {
+    if (nativeLayout && hasPercentageBoxPadding(style)) {
+      style = resolveAllocatedInsets(style, {
+        width: context.percentageBasis.width,
+        context: { ...context, component: "Grid", algorithm: "grid" }
+      });
+    }
+    return {
+      box: resolveContainerBox(style, context, "Grid", "grid"),
+      [GRID_CONTAINING_BOX_STYLE]: style,
+      overflow: style.overflow ?? "visible",
+      ...normalizeGridOptions(style, context.allocation)
+    };
+  },
+  measure: (input) => measureGrid(input),
+  measureIntrinsic: (input) => measureGridIntrinsic(input)
+});
+registerOpaqueStyleProperties(Grid, [
+  "columns",
+  "rows",
+  "autoColumn",
+  "autoRow",
+  "gridAutoColumns",
+  "gridAutoRows"
+]);
+if (nativeLayout) registerKnownLayoutPreflight(Grid, (element, style, content, receiver, slot) => {
+  const previous = GLOBAL_STATE.primitiveReceiverToken;
+  GLOBAL_STATE.primitiveReceiverToken = receiver;
+  const releaseLayout = pushLayoutBox(content, {
+    containingBlock: resolvePositionedContainingBox(
+      style,
+      content,
+      "Grid"
+    )
+  });
+  try {
+    const children = prepareLayoutChildren(element.props.children, "Grid");
+    const options = normalizeGridOptions(style, content);
+    const ctx = GLOBAL_STATE.renderContext;
+    if (!ctx) throw new Error("Known Grid preparation requires a Canvas measurement context.");
+    const service = canvasMeasurementService(ctx);
+    const region = slot.acquire();
+    const placements = withAllocationCheckpoint(region, { children, content, settings: options, onHit: recordWasmAllocationCacheHit, calculate: () => resolveGridPlacements(content, children, options, { service, measureElement: (child, constraints) => measureElement(child, constraints, service) }, region) });
+    const plan = { region, content, children, placements };
+    prepareKnownLayoutDescendants(plan, slot);
+    stagePreparedLayoutPlan(slot, plan);
+  } finally {
+    releaseLayout();
+    GLOBAL_STATE.primitiveReceiverToken = previous;
+  }
 });
 function layoutGrid(container, children, style, measurement) {
   const prepared = materializeLayoutChildren(children, "Grid");
   const options = normalizeGridOptions(style, container);
-  return resolveGridPlacements(container, prepared, options, measurement).map((placement) => placement.box);
+  const region = nativeLayout ? new LayoutRegion() : void 0;
+  try {
+    return resolveGridPlacements(container, prepared, options, measurement, region).map((placement) => placement.box);
+  } finally {
+    region?.dispose();
+  }
 }
-function resolveGridPlacements(container, children, options, measurement) {
+function resolveGridPlacements(container, children, options, measurement, nativeRegion, assignedCells) {
+  if (nativeRegion) recordWasmAllocationPass();
   assertFiniteContainer(container);
-  const columns = resolveParsedGridTracks(
-    options.columns,
+  const cells = assignedCells ?? (nativeRegion ? prepareGridCells(children, container) : prepareExplicitGridCells(children, container, options.columns.length, options.rows.length));
+  const flowCells = cells.filter((cell) => cell.normalized.position !== "absolute");
+  if (nativeRegion && !assignedCells) {
+    const assigned = nativeRegion.gridV2Region().assign(flowCells, options.columns.length, options.rows.length, gridFlowCode(options.gridAutoFlow)).cells;
+    for (let index = 0; index < flowCells.length; index++) {
+      flowCells[index].columnStart = assigned[index].columnStart;
+      flowCells[index].rowStart = assigned[index].rowStart;
+    }
+  }
+  let expandedColumns = appendImplicitTracks(options.columns, options.autoColumn, maxGridExtent(flowCells, "column"));
+  let expandedRows = appendImplicitTracks(options.rows, options.autoRow, maxGridExtent(flowCells, "row"));
+  if (nativeRegion && options.autoFitColumns) expandedColumns = collapseParsedAutoFit(expandedColumns, flowCells, "column");
+  if (nativeRegion && options.autoFitRows) expandedRows = collapseParsedAutoFit(expandedRows, flowCells, "row");
+  let columns = nativeRegion ? resolveNativeGridTracks(nativeRegion, expandedColumns, container.width, options.columnGap, "columns", container) : resolveParsedGridTracks(
+    expandedColumns,
     container.width,
     options.columnGap,
     "columns",
     container
   );
-  const rows = resolveParsedGridTracks(
-    options.rows,
+  if (nativeRegion) {
+    nativeRegion.applyGridV2Contributions(
+      gatherGridIntrinsicContributions(expandedColumns, cells, measurement, container, "columns"),
+      options.columnGap,
+      0
+    );
+    columns = nativeRegion.snapshotGridV2Tracks(0);
+  }
+  let rows = nativeRegion ? resolveNativeGridTracks(nativeRegion, expandedRows, container.height, options.rowGap, "rows", container) : resolveParsedGridTracks(
+    expandedRows,
     container.height,
     options.rowGap,
     "rows",
     container
   );
+  if (nativeRegion) {
+    nativeRegion.applyGridV2Contributions(
+      gatherGridIntrinsicContributions(
+        expandedRows,
+        cells,
+        measurement,
+        container,
+        "rows",
+        columns,
+        options.columnGap
+      ),
+      options.rowGap,
+      1
+    );
+    rows = nativeRegion.snapshotGridV2Tracks(1);
+  }
+  if (!nativeRegion && options.autoFitColumns) columns = collapseAutoFitTracks(columns, cells, "column");
+  if (!nativeRegion && options.autoFitRows) rows = collapseAutoFitTracks(rows, cells, "row");
+  const nativeItems = cells;
+  const nativeBoxes = nativeRegion ? nativeRegion.placeGridV2Cells(flowCells, gridFlowCode(options.gridAutoFlow), options.columnGap, options.rowGap) : void 0;
   const placements = [];
+  let flowIndex = 0;
   for (const child of children) {
-    const receiverToken = getChildPrimitiveReceiverToken(
-      GLOBAL_STATE.renderTransaction,
-      GLOBAL_STATE.primitiveReceiverToken,
-      placements.length
-    );
-    const prepared = prepareDirectChildStyle(child, receiverToken, container);
-    const normalized = preparedStyleValue(prepared);
-    assertSupportedChildPosition("Grid", child, normalized);
-    rejectUnsupportedItemFields(child, normalized, container);
-    const columnStart = placementInteger(
-      normalized.gridColumnStart,
-      "gridColumnStart",
-      child,
-      container,
-      true
-    );
-    const rowStart = placementInteger(
-      normalized.gridRowStart,
-      "gridRowStart",
-      child,
-      container,
-      true
-    );
-    const columnSpan = placementInteger(
-      normalized.gridColumnSpan ?? 1,
-      "gridColumnSpan",
-      child,
-      container,
-      false
-    );
-    const rowSpan = placementInteger(
-      normalized.gridRowSpan ?? 1,
-      "gridRowSpan",
-      child,
-      container,
-      false
-    );
-    validateStart(
-      columnStart,
-      columns.length,
-      "gridColumnStart",
-      child,
-      container
-    );
-    validateStart(
-      rowStart,
-      rows.length,
-      "gridRowStart",
-      child,
-      container
-    );
-    validateSpan(
-      columnStart,
-      columnSpan,
-      columns.length,
-      "gridColumnSpan",
-      child,
-      container
-    );
-    validateSpan(
-      rowStart,
-      rowSpan,
-      rows.length,
-      "gridRowSpan",
-      child,
-      container
-    );
-    const area = {
+    const item = nativeItems[placements.length];
+    const { prepared, receiverToken, columnStart, columnSpan, rowStart, rowSpan } = item;
+    let normalized = item.normalized;
+    if (normalized.position === "absolute") {
+      const needsNaturalMeasurement = normalized.width === void 0 || normalized.width === "auto" || normalized.height === void 0 || normalized.height === "auto";
+      const absolute = resolveAbsoluteFlexPlacement(container, child, normalized, receiverToken, preparedStyleQuery(prepared), container, {
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        justifyContent: "flex-start",
+        alignItems: options.alignItems === "start" ? "flex-start" : options.alignItems === "end" ? "flex-end" : options.alignItems,
+        layoutDirection: options.layoutDirection
+      }, needsNaturalMeasurement ? measurement : void 0);
+      placements.push({ usedWidth: absolute.usedWidth, usedHeight: absolute.usedHeight, box: absolute.box, element: absolute.element });
+      continue;
+    }
+    const nativeBox = nativeBoxes?.[flowIndex++];
+    const area = nativeBox ? { x: container.x + nativeBox.x, y: container.y + nativeBox.y, width: nativeBox.width, height: nativeBox.height } : {
       x: container.x + trackOffset(columns, columnStart - 1, options.columnGap),
       y: container.y + trackOffset(rows, rowStart - 1, options.rowGap),
       width: trackSpan(columns, columnStart - 1, columnSpan, options.columnGap),
       height: trackSpan(rows, rowStart - 1, rowSpan, options.rowGap)
     };
+    if (nativeLayout && GLOBAL_STATE.currentPibblInstance && getStyleMeasurementMode() === void 0 && hasPercentageBoxPadding(normalized)) {
+      normalized = resolveAllocatedInsets(normalized, { width: area.width, context: childContext(child, area) });
+    }
+    if (normalized.boxSizing !== void 0) normalized = contentBoxStyle(normalized, { width: area.width, height: area.height, context: childContext(child, area) });
     const widthAuto = normalized.width === void 0 || normalized.width === "auto";
     const heightAuto = normalized.height === void 0 || normalized.height === "auto";
     const justify = itemAlignment(
@@ -212,17 +283,13 @@ function resolveGridPlacements(container, children, options, measurement) {
         );
       }
     }
-    const padding = normalizeEdges(
-      normalized.padding,
-      "padding",
-      childContext(child, container)
-    );
+    const padding = normalizeBoxInsets(normalized, childContext(child, container));
     const usedStyle = {
       ...normalized,
       width: widthAuto ? justify === "stretch" ? Math.max(0, area.width - padding.left - padding.right) : measured.status === "measured" ? measured.size.width : 0 : normalized.width,
       height: heightAuto ? align === "stretch" ? Math.max(0, area.height - padding.top - padding.bottom) : measured.status === "measured" ? measured.size.height : 0 : normalized.height
     };
-    const resolved = resolveDirectChildBox(area, child, "grid", usedStyle);
+    const resolved = resolveDirectChildBox(area, child, "grid", usedStyle, measurement.service, receiverToken);
     const border = resolved.borderBox;
     const box = {
       x: area.x + alignmentOffset(area.width, border.width, justify),
@@ -231,6 +298,8 @@ function resolveGridPlacements(container, children, options, measurement) {
       height: border.height
     };
     placements.push({
+      usedWidth: resolved.contentBox.width,
+      usedHeight: resolved.contentBox.height,
       box,
       element: childWithUsedSize(
         child,
@@ -251,9 +320,253 @@ function resolveGridTracks(tracks, bound, gap, axis) {
     width: axis === "columns" ? bound : 0,
     height: axis === "rows" ? bound : 0
   };
-  const parsed = parseGridTracks(tracks, axis, container);
+  const parsed = parseGridTracks(tracks, axis, container, gap);
   return resolveParsedGridTracks(parsed, bound, gap, axis, container);
 }
+function assignGridCells(children, container, columns, rows, options) {
+  const cells = prepareGridCells(children, container);
+  const flow = cells.filter((cell) => cell.normalized.position !== "absolute");
+  const region = new LayoutRegion();
+  try {
+    const assigned = region.gridV2Region().assign(flow, columns, rows, gridFlowCode(options.gridAutoFlow)).cells;
+    for (let index = 0; index < flow.length; index++) {
+      flow[index].columnStart = assigned[index].columnStart;
+      flow[index].rowStart = assigned[index].rowStart;
+    }
+    return cells;
+  } finally {
+    region.dispose();
+  }
+}
+function prepareExplicitGridCells(children, container, columns, rows) {
+  const cells = prepareGridCells(children, container);
+  for (let index = 0; index < cells.length; index++) {
+    const cell = cells[index];
+    assertSupportedChildPosition("Grid", cell.child, cell.normalized);
+    cell.columnStart = placementInteger(cell.normalized.gridColumnStart, "gridColumnStart", cell.child, container, true);
+    cell.rowStart = placementInteger(cell.normalized.gridRowStart, "gridRowStart", cell.child, container, true);
+    if (cell.columnStart > columns) throw childDiagnostic(cell.child, "gridColumnStart", cell.columnStart, container, `must reference one of the explicit ${columns} columns`);
+    if (cell.rowStart > rows) throw childDiagnostic(cell.child, "gridRowStart", cell.rowStart, container, `must reference one of the explicit ${rows} rows`);
+    if (cell.columnStart + cell.columnSpan - 1 > columns) throw childDiagnostic(cell.child, "gridColumnSpan", cell.columnSpan, container, `start ${cell.columnStart} plus span ${cell.columnSpan} must remain inside the explicit column tracks`);
+    if (cell.rowStart + cell.rowSpan - 1 > rows) throw childDiagnostic(cell.child, "gridRowSpan", cell.rowSpan, container, `start ${cell.rowStart} plus span ${cell.rowSpan} must remain inside the explicit row tracks`);
+  }
+  return cells;
+}
+function prepareGridCells(children, container) {
+  const result = [];
+  for (let index = 0; index < children.length; index++) {
+    recordWasmAllocationItem();
+    const child = children[index];
+    const receiverToken = getChildPrimitiveReceiverToken(GLOBAL_STATE.renderTransaction, GLOBAL_STATE.primitiveReceiverToken, index);
+    const prepared = prepareDirectChildStyle(child, receiverToken, container);
+    const normalized = preparedStyleValue(prepared);
+    if (normalized.position !== "absolute") assertSupportedChildPosition("Grid", child, normalized);
+    rejectUnsupportedItemFields(child, normalized, container);
+    const columnSpan = placementInteger(normalized.gridColumnSpan ?? 1, "gridColumnSpan", child, container, false);
+    const rowSpan = placementInteger(normalized.gridRowSpan ?? 1, "gridRowSpan", child, container, false);
+    const columnStart = normalized.gridColumnStart === void 0 ? 0 : placementInteger(normalized.gridColumnStart, "gridColumnStart", child, container, false);
+    const rowStart = normalized.gridRowStart === void 0 ? 0 : placementInteger(normalized.gridRowStart, "gridRowStart", child, container, false);
+    result.push({ child, prepared, normalized, receiverToken, columnStart, columnSpan, rowStart, rowSpan });
+  }
+  return result;
+}
+function maxGridExtent(cells, axis) {
+  let extent = 0;
+  for (let index = 0; index < cells.length; index++) {
+    const cell = cells[index];
+    extent = Math.max(extent, axis === "column" ? cell.columnStart + cell.columnSpan - 1 : cell.rowStart + cell.rowSpan - 1);
+  }
+  return extent;
+}
+function collapseAutoFitTracks(tracks, cells, axis) {
+  const out = tracks.slice();
+  for (let index = 0; index < out.length; index++) {
+    let used = false;
+    for (let cellIndex = 0; cellIndex < cells.length; cellIndex++) {
+      const cell = cells[cellIndex];
+      const start = axis === "column" ? cell.columnStart : cell.rowStart, span = axis === "column" ? cell.columnSpan : cell.rowSpan;
+      if (start <= index + 1 && index + 1 < start + span) {
+        used = true;
+        break;
+      }
+    }
+    if (!used) out[index] = 0;
+  }
+  return out;
+}
+function containsAutoFit(tracks) {
+  for (const track of tracks) if (typeof track === "object" && track !== null && "kind" in track && track.kind === "repeat" && (track.count === "auto-fit" || containsAutoFit(track.tracks))) return true;
+  return false;
+}
+function collapseParsedAutoFit(tracks, cells, axis) {
+  const occupied = new Int32Array(tracks.length + 1);
+  for (const cell of cells) {
+    const start = (axis === "column" ? cell.columnStart : cell.rowStart) - 1;
+    const span = axis === "column" ? cell.columnSpan : cell.rowSpan;
+    occupied[start]++;
+    occupied[start + span]--;
+  }
+  const offsets = new Uint32Array(tracks.length + 1), kept = [];
+  let count = 0;
+  for (let index = 0; index < tracks.length; index++) {
+    count += occupied[index];
+    if (!tracks[index].autoFit || count > 0) kept.push(tracks[index]);
+    offsets[index + 1] = kept.length;
+  }
+  for (const cell of cells) {
+    if (axis === "column") cell.columnStart = offsets[cell.columnStart - 1] + 1;
+    else cell.rowStart = offsets[cell.rowStart - 1] + 1;
+  }
+  return kept;
+}
+function appendImplicitTracks(explicit, automatic, extent) {
+  if (extent <= explicit.length) return explicit;
+  const tracks = explicit.slice();
+  while (tracks.length < extent) tracks.push(automatic);
+  return tracks;
+}
+function gatherGridIntrinsicContributions(tracks, cells, measurement, container, axis, selectedColumns, columnGap = 0) {
+  const records = [];
+  for (let index = 0; index < cells.length; index++) {
+    const cell = cells[index];
+    if (cell.normalized.position === "absolute") continue;
+    const start = axis === "columns" ? cell.columnStart : cell.rowStart;
+    const span = axis === "columns" ? cell.columnSpan : cell.rowSpan;
+    if (start < 1 || start + span - 1 > tracks.length) continue;
+    let needed = false;
+    for (let track = start - 1; track < start - 1 + span; track++) {
+      if (trackNeedsIntrinsic(tracks[track])) needed = true;
+    }
+    if (!needed) continue;
+    if (axis === "rows") {
+      if (!selectedColumns) throw new Error("Grid row contributions require resolved column tracks.");
+      const width = trackSpan(selectedColumns, cell.columnStart - 1, cell.columnSpan, columnGap);
+      const height = measureGridCellAtSelectedWidth(cell, width, measurement, container);
+      records.push(start, span, height, height);
+      continue;
+    }
+    const contributionChild = clonePibblElement(cell.child);
+    setPreNormalizedStyle(contributionChild, cell.normalized, cell.child, cell.receiverToken, preparedStyleQuery(cell.prepared));
+    const result = measureIntrinsicElement(
+      contributionChild,
+      {
+        minWidth: 0,
+        maxWidth: container.width,
+        minHeight: 0,
+        maxHeight: container.height
+      },
+      measurement.service
+    );
+    if (result.status !== "measured") {
+      throw childDiagnostic(
+        cell.child,
+        "measureIntrinsic",
+        "unsupported",
+        container,
+        `intrinsic grid track contribution requires a declared intrinsic measurement: ${result.reason}`
+      );
+    }
+    records.push(start, span, result.minContent.width, result.maxContent.width);
+  }
+  return records;
+}
+function measureGridCellAtSelectedWidth(cell, width, measurement, container) {
+  const area = { x: 0, y: 0, width, height: container.height };
+  let normalized = cell.normalized;
+  if (nativeLayout && GLOBAL_STATE.currentPibblInstance && getStyleMeasurementMode() === void 0 && hasPercentageBoxPadding(normalized)) {
+    normalized = resolveAllocatedInsets(normalized, {
+      width,
+      context: childContext(cell.child, area)
+    });
+  }
+  if (normalized.boxSizing !== void 0) {
+    normalized = contentBoxStyle(normalized, {
+      width,
+      height: container.height,
+      context: childContext(cell.child, area)
+    });
+  }
+  const child = clonePibblElement(cell.child);
+  setPreNormalizedStyle(
+    child,
+    normalized,
+    cell.child,
+    cell.receiverToken,
+    preparedStyleQuery(cell.prepared)
+  );
+  const result = measurement.measureElement(child, {
+    minWidth: width,
+    maxWidth: width,
+    minHeight: 0,
+    maxHeight: container.height
+  });
+  if (result.status !== "measured") {
+    throw childDiagnostic(
+      cell.child,
+      "height",
+      "auto",
+      container,
+      `selected Grid column width requires measurement: ${result.reason}`
+    );
+  }
+  return result.size.height;
+}
+function trackNeedsIntrinsic(track) {
+  return track.kind === "intrinsic" || track.kind === "minmax" && (trackNeedsIntrinsic(track.min) || trackNeedsIntrinsic(track.max));
+}
+function resolveNativeGridTracks(region, tracks, bound, gap, axis, container) {
+  try {
+    return region.resolveGridV2Tracks(gridTrackRecords(tracks, bound), { bound, gap, axis: axis === "columns" ? 0 : 1 });
+  } catch (error) {
+    if (error instanceof RangeError) throw trackDiagnostic(tracks, axis, container);
+    throw error;
+  }
+}
+function gridTrackRecords(tracks, bound) {
+  const records = new Array(tracks.length * GRID_V2_TRACK_STRIDE).fill(0);
+  for (let index = 0; index < tracks.length; index++) {
+    const track = tracks[index], offset = index * GRID_V2_TRACK_STRIDE;
+    if (track.kind === "fixed") {
+      records[offset] = 0;
+      records[offset + 1] = track.value;
+    } else if (track.kind === "percentage") {
+      records[offset] = 1;
+      records[offset + 1] = track.factor;
+    } else if (track.kind === "fraction") {
+      records[offset] = 2;
+      records[offset + 1] = track.factor;
+    } else if (track.kind === "intrinsic") {
+      writeGridBreadth(records, offset, track, bound);
+    } else {
+      records[offset] = 6;
+      writeGridBreadth(records, offset + 2, track.min, bound);
+      writeGridBreadth(records, offset + 4, track.max, bound);
+    }
+  }
+  return records;
+}
+function writeGridBreadth(records, offset, track, bound) {
+  if (track.kind === "fixed") {
+    records[offset] = 0;
+    records[offset + 1] = track.value;
+  } else if (track.kind === "percentage") {
+    records[offset] = 1;
+    records[offset + 1] = track.factor;
+  } else if (track.kind === "fraction") {
+    records[offset] = 2;
+    records[offset + 1] = track.factor;
+  } else if (track.kind === "minmax") writeGridBreadth(records, offset, track.min, bound);
+  else if (track.value === "min-content") records[offset] = 3;
+  else if (track.value === "max-content") records[offset] = 4;
+  else if (track.value === "auto") records[offset] = 5;
+  else if (isFitContent(track.value)) {
+    records[offset] = 7;
+    records[offset + 1] = typeof track.value.limit === "number" ? track.value.limit : bound * Number.parseFloat(track.value.limit) / 100;
+  }
+}
+function gridFlowCode(flow) {
+  return flow === "row" ? 0 : flow === "column" ? 1 : flow === "row dense" ? 2 : 3;
+}
 function resolveParsedGridTracks(tracks, bound, gap, axis, container) {
   if (!Number.isFinite(bound) || bound < 0) {
     throw optionDiagnostic(
@@ -276,8 +589,16 @@ function resolveParsedGridTracks(tracks, bound, gap, axis, container) {
       if (!Number.isFinite(size)) throw trackDiagnostic(track, axis, container);
       resolved[index] = size;
       allocated += size;
-    } else {
+    } else if (track.kind === "fraction") {
       fractions.push({ index, factor: track.factor });
+    } else if (track.kind === "minmax") {
+      const min = resolvedTrackMinimum(track.min, bound, axis, container);
+      const max = resolvedTrackMaximum(track.max, bound, axis, container);
+      if (max < min) throw trackDiagnostic(track, axis, container);
+      resolved[index] = min;
+      allocated += min;
+    } else {
+      resolved[index] = 0;
     }
   }
   const totalFr = fractions.reduce((total, track) => total + track.factor, 0);
@@ -292,7 +613,7 @@ function resolveParsedGridTracks(tracks, bound, gap, axis, container) {
   }
   return resolved;
 }
-function parseGridTracks(tracks, axis, container) {
+function parseGridTracks(tracks, axis, container, gap = 0) {
   if (!Array.isArray(tracks) || tracks.length === 0) {
     throw optionDiagnostic(
       axis === "columns" ? "gridTemplateColumns" : "gridTemplateRows",
@@ -301,16 +622,52 @@ function parseGridTracks(tracks, axis, container) {
       `requires a nonempty explicit ${axis} list`
     );
   }
-  return tracks.map((track) => {
+  if (!nativeLayout) for (let index = 0; index < tracks.length; index++) {
+    const track = tracks[index];
+    if (typeof track === "object" || track === "auto" || track === "min-content" || track === "max-content") throw trackDiagnostic(track, axis, container);
+  }
+  let autoRepeatIndex = -1;
+  for (let index = 0; index < tracks.length; index++) {
+    const track = tracks[index];
+    if (!isAutoRepeatTrack(track)) continue;
+    if (autoRepeatIndex !== -1) throw trackDiagnostic(tracks, axis, container);
+    autoRepeatIndex = index;
+  }
+  const autoRepeatCount = autoRepeatIndex === -1 ? void 0 : resolveAutoRepeatCount(
+    tracks,
+    autoRepeatIndex,
+    axis,
+    container,
+    gap
+  );
+  const expanded = [];
+  const autoFit = autoRepeatIndex !== -1 && tracks[autoRepeatIndex].count === "auto-fit" ? /* @__PURE__ */ new Set() : void 0;
+  for (let index = 0; index < tracks.length; index++) {
+    expandGridTrack(
+      tracks[index],
+      axis,
+      container,
+      expanded,
+      index === autoRepeatIndex ? autoRepeatCount : void 0,
+      autoFit
+    );
+  }
+  if (!expanded.length) throw trackDiagnostic(tracks, axis, container);
+  const parsed = expanded.map((track) => {
     if (typeof track === "number") {
       if (!Number.isFinite(track) || track < 0) {
         throw trackDiagnostic(track, axis, container);
       }
       return Object.freeze({ kind: "fixed", value: track });
     }
-    if (typeof track !== "string") {
-      throw trackDiagnostic(track, axis, container);
+    if (isFitContent(track)) return Object.freeze({ kind: "intrinsic", value: track });
+    if (typeof track === "object" && track !== null && "kind" in track && track.kind === "minmax") {
+      const min = parseSingleGridTrack(track.min, axis, container);
+      const max = parseSingleGridTrack(track.max, axis, container);
+      return Object.freeze({ kind: "minmax", min, max });
     }
+    if (typeof track !== "string") throw trackDiagnostic(track, axis, container);
+    if (track === "auto" || track === "min-content" || track === "max-content") return Object.freeze({ kind: "intrinsic", value: track });
     const match = /^(?:\d+(?:\.\d+)?|\.\d+)(%|fr)$/.exec(track);
     if (!match) throw trackDiagnostic(track, axis, container);
     const factor = Number.parseFloat(track);
@@ -319,6 +676,94 @@ function parseGridTracks(tracks, axis, container) {
     }
     return Object.freeze(match[1] === "%" ? { kind: "percentage", factor } : { kind: "fraction", factor });
   });
+  return autoFit ? parsed.map((track, index) => autoFit.has(index) ? Object.freeze({ ...track, autoFit: true }) : track) : parsed;
+}
+function parseSingleGridTrack(track, axis, container) {
+  const parsed = parseGridTracks([track], axis, container);
+  return parsed[0];
+}
+function expandGridTrack(track, axis, container, into, resolvedAutoRepeatCount, autoFit, inheritedAutoFit = false) {
+  if (typeof track === "object" && track !== null && "kind" in track && track.kind === "repeat") {
+    if (!Array.isArray(track.tracks) || !track.tracks.length) throw trackDiagnostic(track, axis, container);
+    let count = track.count;
+    if (count === "auto-fill" || count === "auto-fit") {
+      if (resolvedAutoRepeatCount === void 0) throw trackDiagnostic(track, axis, container);
+      count = resolvedAutoRepeatCount;
+    }
+    if (!Number.isInteger(count) || count < 0) throw trackDiagnostic(track, axis, container);
+    for (let repeat = 0; repeat < count; repeat++) for (let index = 0; index < track.tracks.length; index++) expandGridTrack(track.tracks[index], axis, container, into, void 0, autoFit, inheritedAutoFit || track.count === "auto-fit");
+    return;
+  }
+  if (inheritedAutoFit) autoFit?.add(into.length);
+  into.push(track);
+}
+function isAutoRepeatTrack(track) {
+  return typeof track === "object" && track !== null && "kind" in track && track.kind === "repeat" && (track.count === "auto-fill" || track.count === "auto-fit");
+}
+function resolveAutoRepeatCount(tracks, autoRepeatIndex, axis, container, gap) {
+  const autoRepeat = tracks[autoRepeatIndex];
+  const repeated = trackListMetrics(autoRepeat.tracks, axis, container);
+  let fixedBreadth = 0;
+  let fixedCount = 0;
+  for (let index = 0; index < tracks.length; index++) {
+    if (index === autoRepeatIndex) continue;
+    const metrics = trackMetrics(tracks[index], axis, container);
+    fixedBreadth += metrics.breadth;
+    fixedCount += metrics.count;
+  }
+  const bound = axis === "columns" ? container.width : container.height;
+  const available = bound - fixedBreadth - (fixedCount - 1) * gap;
+  const repeatedBreadth = repeated.breadth + repeated.count * gap;
+  return Math.max(1, Math.floor(available / Math.max(1, repeatedBreadth)));
+}
+function trackListMetrics(tracks, axis, container) {
+  let breadth = 0;
+  let count = 0;
+  for (let index = 0; index < tracks.length; index++) {
+    const metrics = trackMetrics(tracks[index], axis, container);
+    breadth += metrics.breadth;
+    count += metrics.count;
+  }
+  return { breadth, count };
+}
+function trackMetrics(track, axis, container) {
+  if (typeof track === "object" && track !== null && "kind" in track && track.kind === "repeat") {
+    if (!Array.isArray(track.tracks) || !track.tracks.length || typeof track.count !== "number" || !Number.isInteger(track.count) || track.count < 0) {
+      throw trackDiagnostic(track, axis, container);
+    }
+    let breadth = 0;
+    let count = 0;
+    for (let index = 0; index < track.tracks.length; index++) {
+      const metrics = trackMetrics(track.tracks[index], axis, container);
+      breadth += metrics.breadth * track.count;
+      count += metrics.count * track.count;
+    }
+    return { breadth, count };
+  }
+  return {
+    breadth: minimumRepeatBreadth([track], axis, container),
+    count: 1
+  };
+}
+function minimumRepeatBreadth(tracks, axis, container) {
+  let size = 0;
+  for (let index = 0; index < tracks.length; index++) {
+    const parsed = parseSingleGridTrack(tracks[index], axis, container);
+    size += resolvedTrackMinimum(parsed, axis === "columns" ? container.width : container.height, axis, container);
+  }
+  return size;
+}
+function resolvedTrackMinimum(track, bound, axis, container) {
+  if (track.kind === "fixed") return track.value;
+  if (track.kind === "percentage") return bound * track.factor / 100;
+  if (track.kind === "minmax") return resolvedTrackMinimum(track.min, bound, axis, container);
+  return 0;
+}
+function resolvedTrackMaximum(track, bound, axis, container) {
+  if (track.kind === "fixed") return track.value;
+  if (track.kind === "percentage") return bound * track.factor / 100;
+  if (track.kind === "fraction" || track.kind === "intrinsic") return Number.POSITIVE_INFINITY;
+  return resolvedTrackMaximum(track.max, bound, axis, container);
 }
 function measureGrid(input) {
   prepareLayoutChildren(input.props.children, "Grid");
@@ -331,48 +776,205 @@ function measureGrid(input) {
   const options = normalizeGridOptions(input.style, diagnosticBox);
   const widthDefinite = input.style.width !== void 0 && input.style.width !== "auto";
   const heightDefinite = input.style.height !== void 0 && input.style.height !== "auto";
-  if (!widthDefinite) {
-    const unsupported = intrinsicTrackReason(
-      options.columns,
-      "columns"
+  if (widthDefinite && !heightDefinite) {
+    const width2 = measuredLength(
+      input.style.width,
+      input.constraints.maxWidth,
+      "width",
+      input.constraints
     );
-    if (unsupported) return { status: "unsupported", reason: unsupported };
-  }
-  if (!heightDefinite) {
-    const unsupported = intrinsicTrackReason(options.rows, "rows");
-    if (unsupported) return { status: "unsupported", reason: unsupported };
+    const selected = measureGridRowsAtSelectedWidth(
+      input.props.children,
+      input.style,
+      input.service,
+      (element, constraints) => input.measureElement(element, constraints),
+      input.constraints,
+      width2
+    );
+    if (selected.status === "unsupported") return selected;
+    return { status: "measured", size: { width: width2, height: selected.height } };
   }
+  const intrinsic = !widthDefinite && !fixedIntrinsicAxis(options.columns) || !heightDefinite && !fixedIntrinsicAxis(options.rows) ? measureGridIntrinsic({
+    props: input.props,
+    style: input.style,
+    constraints: {
+      width: { kind: "bounded", min: input.constraints.minWidth, max: input.constraints.maxWidth },
+      height: { kind: "bounded", min: input.constraints.minHeight, max: input.constraints.maxHeight }
+    },
+    service: input.service
+  }) : void 0;
+  if (intrinsic?.status === "unsupported") return intrinsic;
   const width = widthDefinite ? measuredLength(
     input.style.width,
     input.constraints.maxWidth,
     "width",
     input.constraints
-  ) : intrinsicTrackSize(
-    options.columns,
-    options.columnGap,
-    "columns"
-  );
+  ) : fixedIntrinsicAxis(options.columns) ? intrinsicTrackSize(options.columns, options.columnGap) : intrinsic.maxContent.width;
   const height = heightDefinite ? measuredLength(
     input.style.height,
     input.constraints.maxHeight,
     "height",
     input.constraints
-  ) : intrinsicTrackSize(options.rows, options.rowGap, "rows");
+  ) : fixedIntrinsicAxis(options.rows) ? intrinsicTrackSize(options.rows, options.rowGap) : intrinsic.maxContent.height;
   return { status: "measured", size: { width, height } };
 }
-function intrinsicTrackSize(tracks, gap, axis) {
-  const size = tracks.reduce((total, track) => total + (track.kind === "fixed" ? track.value : 0), 0) + Math.max(0, tracks.length - 1) * gap;
-  if (!Number.isFinite(size))
-    throw trackDiagnostic(tracks, axis, { x: 0, y: 0, width: 0, height: 0 });
-  return size;
+function measureGridRowsAtSelectedWidth(childInput, style, service, measure, constraints, width) {
+  if (!Number.isFinite(width) || width < 0 || !Number.isFinite(constraints.maxHeight)) {
+    return { status: "unsupported", reason: "Grid selected-width row measurement requires finite owner constraints" };
+  }
+  const allocatedHeight = typeof style.height === "number" ? measuredLength(style.height, constraints.maxHeight, "height", constraints) : void 0;
+  const container = { x: 0, y: 0, width, height: allocatedHeight ?? constraints.maxHeight };
+  const options = normalizeGridOptions(style, container);
+  if (allocatedHeight === void 0 && (style.gridTemplateRows.some(isAutoRepeatTrack) || options.rows.some(trackNeedsAllocatedAxis))) {
+    return { status: "unsupported", reason: "Grid intrinsic row measurement is allocation-dependent" };
+  }
+  const children = materializeLayoutChildren(childInput, "Grid");
+  const dependentImplicitRows = allocatedHeight === void 0 && (trackNeedsAllocatedAxis(options.autoRow) || style.gridAutoRows !== void 0 && isAutoRepeatTrack(style.gridAutoRows));
+  const canSumRows = fixedIntrinsicAxis(options.rows) && !options.autoFitRows;
+  let assignedCells;
+  if (dependentImplicitRows || canSumRows) {
+    assignedCells = assignGridCells(children, container, options.columns.length, options.rows.length, options);
+    const extent = maxGridExtent(assignedCells.filter((cell) => cell.normalized.position !== "absolute"), "row");
+    if (dependentImplicitRows && extent > options.rows.length) {
+      return { status: "unsupported", reason: "Grid intrinsic implicit-row measurement is allocation-dependent" };
+    }
+    const rows = appendImplicitTracks(options.rows, options.autoRow, extent);
+    if (canSumRows && fixedIntrinsicAxis(rows)) {
+      return { status: "measured", height: intrinsicTrackSize(rows, options.rowGap) };
+    }
+  }
+  const region = new LayoutRegion();
+  try {
+    resolveGridPlacements(container, children, options, { service, measureElement: measure }, region, assignedCells);
+    const rows = region.snapshotGridV2Tracks(1);
+    let height = Math.max(0, rows.length - 1) * options.rowGap;
+    for (let index = 0; index < rows.length; index++) height += rows[index];
+    return { status: "measured", height };
+  } finally {
+    region.dispose();
+  }
+}
+function trackNeedsAllocatedAxis(track) {
+  if (track.kind === "percentage" || track.kind === "fraction") return true;
+  if (track.kind === "minmax") return trackNeedsAllocatedAxis(track.min) || trackNeedsAllocatedAxis(track.max);
+  return track.kind === "intrinsic" && isFitContent(track.value) && typeof track.value.limit === "string";
+}
+function fixedIntrinsicAxis(tracks) {
+  return tracks.every((track) => track.kind === "fixed");
+}
+function intrinsicTrackSize(tracks, gap) {
+  return tracks.reduce((total, track) => total + (track.kind === "fixed" ? track.value : 0), Math.max(0, tracks.length - 1) * gap);
+}
+function measureGridIntrinsic(input) {
+  const selected = intrinsicGridSelectedWidth(input);
+  if (selected !== void 0) {
+    const rows2 = measureGridRowsAtSelectedWidth(
+      input.props.children,
+      input.style,
+      input.service,
+      (element, constraints) => measureElement(element, constraints, input.service),
+      selected.constraints,
+      selected.width
+    );
+    if (rows2.status === "unsupported") return rows2;
+    return {
+      status: "measured",
+      minContent: { width: selected.width, height: rows2.height },
+      maxContent: { width: selected.width, height: rows2.height }
+    };
+  }
+  if (containsFractionTrack(input.style.gridTemplateColumns) || containsFractionTrack(input.style.gridTemplateRows)) {
+    return { status: "unsupported", reason: "Grid fractional intrinsic measurement is allocation-dependent" };
+  }
+  const width = input.constraints.width.kind === "bounded" ? input.constraints.width.max : Number.POSITIVE_INFINITY;
+  const height = input.constraints.height.kind === "bounded" ? input.constraints.height.max : Number.POSITIVE_INFINITY;
+  if (!Number.isFinite(width) || !Number.isFinite(height)) {
+    return { status: "unsupported", reason: "Grid intrinsic measurement requires finite owner constraints" };
+  }
+  const container = { x: 0, y: 0, width, height };
+  const options = normalizeGridOptions(input.style, container);
+  if (options.columns.some((track) => track.kind === "percentage") || options.rows.some((track) => track.kind === "percentage")) {
+    return { status: "unsupported", reason: "Grid percentage intrinsic measurement is allocation-dependent" };
+  }
+  const children = materializeLayoutChildren(input.props.children, "Grid");
+  const cells = assignGridCells(children, container, options.columns.length, options.rows.length, options);
+  const columns = intrinsicGridAxis(appendImplicitTracks(options.columns, options.autoColumn, maxGridExtent(cells.filter((cell) => cell.normalized.position !== "absolute"), "column")), cells, "columns", options.columnGap, container, input.service);
+  if (columns.status === "unsupported") return columns;
+  const rows = intrinsicGridAxis(appendImplicitTracks(options.rows, options.autoRow, maxGridExtent(cells.filter((cell) => cell.normalized.position !== "absolute"), "row")), cells, "rows", options.rowGap, container, input.service);
+  if (rows.status === "unsupported") return rows;
+  return {
+    status: "measured",
+    minContent: { width: columns.min, height: rows.min },
+    maxContent: { width: columns.max, height: rows.max }
+  };
+}
+function intrinsicGridSelectedWidth(input) {
+  const widthConstraint = input.constraints.width;
+  const heightConstraint = input.constraints.height;
+  if (input.style.width === void 0 || input.style.width === "auto" || widthConstraint.kind !== "bounded" || heightConstraint.kind !== "bounded") {
+    return void 0;
+  }
+  const constraints = {
+    minWidth: widthConstraint.min,
+    maxWidth: widthConstraint.max,
+    minHeight: heightConstraint.min,
+    maxHeight: heightConstraint.max
+  };
+  const width = resolveScalarSizingLength(input.style.width, widthConstraint.max, "width", {
+    component: "Grid",
+    algorithm: "intrinsic measurement",
+    constraints
+  });
+  return width === void 0 || width < 0 ? void 0 : { width, constraints };
+}
+function containsFractionTrack(tracks) {
+  for (const track of tracks) {
+    if (typeof track === "string" && track.endsWith("fr")) return true;
+    if (typeof track === "object" && track !== null && "kind" in track) {
+      if (track.kind === "minmax" && (typeof track.min === "string" && track.min.endsWith("fr") || typeof track.max === "string" && track.max.endsWith("fr"))) return true;
+      if (track.kind === "repeat" && containsFractionTrack(track.tracks)) return true;
+    }
+  }
+  return false;
 }
-function intrinsicTrackReason(tracks, axis) {
-  if (tracks.every((track) => track.kind === "fixed")) return void 0;
-  const kind = tracks.some((track) => track.kind === "fraction") ? "fractional" : "percentage";
-  return `Grid ${kind} intrinsic measurement for ${axis} is unsupported because it is allocation-dependent`;
+function intrinsicGridAxis(tracks, cells, axis, gap, container, service) {
+  const minimum = new Array(tracks.length).fill(0);
+  const maximum = new Array(tracks.length).fill(0);
+  for (let index = 0; index < tracks.length; index++) {
+    const track = tracks[index];
+    if (track.kind === "fixed") minimum[index] = maximum[index] = track.value;
+    else if (track.kind === "fraction") return { status: "unsupported", reason: `Grid fractional intrinsic measurement for ${axis} is allocation-dependent` };
+    else if (track.kind === "minmax" && track.max.kind === "fraction") return { status: "unsupported", reason: `Grid fractional intrinsic measurement for ${axis} is allocation-dependent` };
+  }
+  for (const cell of cells) {
+    if (cell.normalized.position === "absolute") continue;
+    const start = axis === "columns" ? cell.columnStart : cell.rowStart;
+    const span = axis === "columns" ? cell.columnSpan : cell.rowSpan;
+    if (start < 1 || start + span - 1 > tracks.length) continue;
+    const measured = measureIntrinsicElement(cell.child, { minWidth: 0, maxWidth: container.width, minHeight: 0, maxHeight: container.height }, service);
+    if (measured.status === "unsupported") return measured;
+    const min = axis === "columns" ? measured.minContent.width : measured.minContent.height;
+    const max = axis === "columns" ? measured.maxContent.width : measured.maxContent.height;
+    let fixed = Math.max(0, span - 1) * gap;
+    const eligible = [];
+    for (let index = start - 1; index < start - 1 + span; index++) {
+      if (trackNeedsIntrinsic(tracks[index])) eligible.push(index);
+      else fixed += minimum[index];
+    }
+    if (eligible.length) {
+      const minimumContribution = Math.max(0, min - fixed) / eligible.length;
+      const maximumContribution = Math.max(0, max - fixed) / eligible.length;
+      for (const index of eligible) {
+        minimum[index] = Math.max(minimum[index], minimumContribution);
+        maximum[index] = Math.max(maximum[index], maximumContribution);
+      }
+    }
+  }
+  const gaps = Math.max(0, tracks.length - 1) * gap;
+  return { status: "measured", min: minimum.reduce((total, value) => total + value, gaps), max: maximum.reduce((total, value) => total + value, gaps) };
 }
 function measuredLength(value, reference, property, constraints) {
-  const resolved = resolveLength(value, reference, property, {
+  const resolved = resolveScalarSizingLength(value, reference, property, {
     component: "Grid",
     algorithm: "measurement",
     constraints
@@ -417,21 +1019,32 @@ function normalizeGridOptions(style, container) {
     container
   );
   const gap = nonnegativeOption(style.gap ?? 0, "gap", container);
+  const rowGap = nonnegativeOption(style.rowGap ?? gap, "rowGap", container);
+  const columnGap = nonnegativeOption(
+    style.columnGap ?? gap,
+    "columnGap",
+    container
+  );
+  if (!nativeLayout && (style.gridAutoFlow !== void 0 || style.gridAutoColumns !== void 0 || style.gridAutoRows !== void 0)) throw optionDiagnostic("gridAutoFlow", style.gridAutoFlow, container, "requires the native layout engine");
+  const gridAutoFlow = style.gridAutoFlow ?? "row";
   return {
+    gridAutoFlow,
     columns: parseGridTracks(
       style.gridTemplateColumns,
       "columns",
-      container
+      container,
+      columnGap
     ),
-    rows: parseGridTracks(style.gridTemplateRows, "rows", container),
+    rows: parseGridTracks(style.gridTemplateRows, "rows", container, rowGap),
+    autoColumn: nativeLayout ? parseGridTracks([style.gridAutoColumns ?? "auto"], "columns", container)[0] : { kind: "fixed", value: 0 },
+    autoRow: nativeLayout ? parseGridTracks([style.gridAutoRows ?? "auto"], "rows", container)[0] : { kind: "fixed", value: 0 },
+    autoFitColumns: containsAutoFit(style.gridTemplateColumns),
+    autoFitRows: containsAutoFit(style.gridTemplateRows),
+    layoutDirection: getLayoutDirection(),
     justifyItems,
     alignItems,
-    rowGap: nonnegativeOption(style.rowGap ?? gap, "rowGap", container),
-    columnGap: nonnegativeOption(
-      style.columnGap ?? gap,
-      "columnGap",
-      container
-    )
+    rowGap,
+    columnGap
   };
 }
 function containerAlignment(value, property, container) {
@@ -477,28 +1090,6 @@ function placementInteger(value, property, child, container, required) {
   }
   return value;
 }
-function validateSpan(start, span, trackCount, property, child, container) {
-  if (start - 1 + span > trackCount) {
-    throw childDiagnostic(
-      child,
-      property,
-      span,
-      container,
-      `grid area start ${start} plus span ${span} exceeds the explicit ${trackCount}-track list`
-    );
-  }
-}
-function validateStart(start, trackCount, property, child, container) {
-  if (start > trackCount) {
-    throw childDiagnostic(
-      child,
-      property,
-      start,
-      container,
-      `must reference the explicit ${trackCount}-track list`
-    );
-  }
-}
 function trackOffset(tracks, index, gap) {
   return tracks.slice(0, index).reduce((total, size) => total + size, 0) + index * gap;
 }
@@ -534,7 +1125,8 @@ function assertFiniteContainer(container) {
   }
 }
 function rejectUnsupportedItemFields(child, style, container) {
-  for (const property of ["gridColumnEnd", "gridRowEnd", "gridArea", "order"]) {
+  for (let propertyIndex = 0; propertyIndex < unsupportedProperties.length; propertyIndex++) {
+    const property = unsupportedProperties[propertyIndex];
     if (style[property] !== void 0) {
       throw childDiagnostic(
         child,
@@ -591,7 +1183,11 @@ function constraintsFor(container) {
 }
 export {
   Grid,
+  autoFillTracks,
+  autoFitTracks,
   layoutGrid,
+  minmax,
+  repeatTracks,
   resolveGridTracks
 };
 //# sourceMappingURL=grid.js.map