@swiftbrowser/web 0.5.6 → 0.6.0

package/src/layout/engine.ts

@@ -158,8 +158,6 @@ const NAV_BAR_HEIGHT = 44;
 const NAV_BAR_INLINE_BOTTOM = 10;
 // iOS 26: the large title's row is 62 (52 before).
 const LARGE_TITLE_HEIGHT = 62;
-/** Chevron glyph plus its gap, in px. */
-const SHEET_TOP_GAP = 10;
 const SHEET_GRABBER_ROW = 20;
 const SHEET_GRABBER: Size = { width: 36, height: 5 };
 const SHEET_GRABBER_TOP = 8;
@@ -233,8 +231,15 @@ const PROGRESS_VALUE_GAP = 6;
 const GAUGE_DEFAULT_WIDTH = 100;
 /** A circular gauge's side (`accessoryCircular` / `accessoryCircularCapacity`). */
 const GAUGE_RING_SIZE = 58;
-/** The square inside the ring its label is proposed, as a fraction of the side. */
-const GAUGE_RING_INNER = 0.62;
+/**
+ * iOS 26 (Examples/Fidelity's `spacing` screen): what a circular gauge
+ * proposes the view in its middle, in a 24pt semibold font (Backyard Birds'
+ * water drop is a 24pt symbol there); an `accessoryCircular` gauge's label
+ * sits in the gap at the bottom of its arc, in the box below.
+ */
+const GAUGE_RING_CENTER: Size = { width: 40.67, height: 29 };
+const GAUGE_RING_FONT = { size: 24, weight: 'semibold' };
+const GAUGE_ARC_LABEL: Size = { width: 36, height: 17.67 };
 const GRID_ITEM_DEFAULT_MIN = 10;
 // Phase 6 (docs/phase6/chrome.md).
 const PICKER_INLINE_ROW_HEIGHT = 44;
@@ -295,6 +300,14 @@ const SEARCH_BOTTOM_HEIGHT = 48;
 const SEARCH_BOTTOM_MARGIN = 28;
 const SEARCH_BOTTOM_MARGIN_INSET = 8;
 const SEARCH_FIELD_DEFAULT_WIDTH = 200;
+// iOS 26 (measured in the Simulator, Backyard Birds): in a tab view the
+// search field sits under the title instead, a 44-tall capsule 16 from the
+// sides, 1 below the title row (y 166 under a large title), the content 15
+// below it: a 60 row.
+const SEARCH_TOP_HEIGHT = 44;
+const SEARCH_TOP_ABOVE = 1;
+const SEARCH_TOP_BELOW = 15;
+const SEARCH_TOP_ROW = SEARCH_TOP_ABOVE + SEARCH_TOP_HEIGHT + SEARCH_TOP_BELOW;
 const IMAGE_SCALES: Readonly<Record<string, number>> = { small: 0.8, medium: 1, large: 1.25 };
 // Phase 7 (docs/ops-protocol.md, "NavigationSplitView").
 const NAVSPLIT_SIDEBAR_WIDTH = 320;
@@ -459,6 +472,22 @@ function layoutPriorityOf(node: LayoutNode): number {
   return 0;
 }
 
+/**
+ * A flexible frame's length on one axis, as SwiftUI resolves it: a minimum
+ * raises the child's length (up to the proposal) to at least `min`, and a
+ * maximum takes the proposal (or the child's length, if longer) up to `max`.
+ * So `.frame(minWidth: 25)` around a narrow badge is 25 wide, not the width
+ * it was offered, while `.frame(maxWidth: .infinity)` fills the proposal. A
+ * nil proposal is the child's own length.
+ */
+function flexibleFrameLength(proposed: number | null, child: number, min: number | null, max: number | null): number {
+  const offered = proposed ?? child;
+  let length = child;
+  if (min !== null) length = Math.max(min, Math.min(length, offered));
+  if (max !== null) length = Math.min(max, Math.max(length, offered));
+  return length;
+}
+
 /** The element under a chain of `styled` wrappers. */
 function unwrapStyled(node: LayoutNode): LayoutNode {
   let current = node;
@@ -468,6 +497,31 @@ function unwrapStyled(node: LayoutNode): LayoutNode {
   return current;
 }
 
+/** Root kinds laid out over the whole screen: their bars reach into the safe areas. */
+const SCREEN_ROOT_KINDS = new Set(['navstack', 'tabview', 'navsplit', 'inspector', 'alert']);
+
+/**
+ * A root that fills the screen: one of `SCREEN_ROOT_KINDS`, also when an
+ * app's root modifiers wrap it in modifiers that leave its size alone or in
+ * a one-child `ZStack` (Backyard Birds' shop modifier wraps its `TabView`
+ * so); on iOS its bars reach the screen's edges all the same.
+ */
+function fillsScreen(node: LayoutNode): boolean {
+  let current = node;
+  for (;;) {
+    if (SCREEN_ROOT_KINDS.has(current.kind)) return true;
+    if (current.children.length !== 1) return false;
+    if (current.kind === 'styled') {
+      const style = styleOf(current);
+      const sized = ['frame', 'containerRelativeFrame', 'padding', 'aspectRatio', 'fixedSize'].some((key) => style[key] !== undefined && style[key] !== null);
+      if (sized) return false;
+    } else if (current.kind !== 'zstack') {
+      return false;
+    }
+    current = current.children[0] as LayoutNode;
+  }
+}
+
 /** A `{x, y}` pair of finite numbers. */
 function readPoint(value: unknown): { x: number; y: number } | null {
   const o = obj(value);
@@ -512,13 +566,13 @@ function readFlexSize(value: unknown): Size | null {
 }
 
 /** A custom layout's `{min, ideal, max}` sizes from its props. */
-function readLayoutSizes(value: unknown): { min: Size; ideal: Size; max: Size } | null {
+function readLayoutSizes(value: unknown): { min: Size; ideal: Size; max: Size; atWidth: Size | null } | null {
   const o = obj(value);
   if (!o) return null;
   const min = readFlexSize(o['min']);
   const ideal = readFlexSize(o['ideal']);
   const max = readFlexSize(o['max']);
-  return min && ideal && max ? { min, ideal, max } : null;
+  return min && ideal && max ? { min, ideal, max, atWidth: readFlexSize(o['atWidth']) } : null;
 }
 
 /** A `{width, height}` pair of finite, non-negative numbers. */
@@ -690,6 +744,28 @@ function rowHintsOf(node: LayoutNode): RowHints {
   return hints;
 }
 
+/**
+ * `.listRowBackground(_:)`: the ShapeStyle a list row's cell is painted with
+ * instead of the card's (`Color.clear` lets the list's background show), read
+ * through the row's `styled` chain and wrappers as `rowHintsOf` reads the
+ * other hints; undefined when the row has none.
+ */
+export function listRowBackgroundOf(node: LayoutNode): unknown {
+  let current: LayoutNode | undefined = node;
+  while (current) {
+    if (current.kind === 'styled') {
+      const background = styleOf(current)['listRowBackground'];
+      if (background !== undefined && background !== null) return background;
+      current = current.children.length === 1 ? current.children[0] : undefined;
+    } else if ((current.kind === 'navlink' && current.children.length === 1) || (ROW_WRAPPERS.has(current.kind) && current.children.length >= 1)) {
+      current = current.children[0];
+    } else {
+      return undefined;
+    }
+  }
+  return undefined;
+}
+
 /** Phase 8 wrappers whose first child is the row content they stand for. */
 const ROW_WRAPPERS: ReadonlySet<string> = new Set(['listrow', 'swipeactions', 'contextmenu', 'gesture', 'tapgesture', 'draggable', 'dropdestination']);
 
@@ -896,6 +972,8 @@ interface StackPlan {
   size: Size;
   childSizes: Size[];
   childProposals: Proposal[];
+  /** The space after each child but the last (see `stackGaps`). */
+  gaps: number[];
 }
 
 interface StyledPlan {
@@ -1064,7 +1142,7 @@ interface GaugePlan {
   /** A ProgressView's label context (the gauge's own font, not the caption). */
   labelOwnCtx?: Context;
   /** A circular gauge: the view in the middle of the ring (the current value label, else the label) and its size. */
-  ring?: { center: LayoutNode | null; centerSize: Size };
+  ring?: { center: LayoutNode | null; centerSize: Size; ctx: Context; arcLabel: LayoutNode | null };
 }
 
 /** Phase 7: one `chartitem` child of a chart, measured at its ideal size. */
@@ -1122,7 +1200,8 @@ export class LayoutPass {
    * `nested`: a scroll view deeper in the screen's content that touches the
    * bar (`scrollEdgeGrowth`), rather than the screen's own content.
    */
-  private readonly scrollInsets = new WeakMap<LayoutNode, { bar: number; largeTitle: Rect | null; nested?: boolean }>();
+  /** A scroll view under its screen's bar: the bar, the large title that scrolls with it and a search row under the title (`search`). */
+  private readonly scrollInsets = new WeakMap<LayoutNode, { bar: number; largeTitle: Rect | null; search?: number; nested?: boolean }>();
 
   private readonly memo = new Map<LayoutNode, Map<string, unknown>>();
   private readonly implicit = new Map<LayoutNode, LayoutNode>();
@@ -1167,13 +1246,7 @@ export class LayoutPass {
     const { screen, safeArea } = this.env;
     const ctx = this.rootContext;
     for (const root of roots) {
-      if (
-        root.kind === 'navstack' ||
-        root.kind === 'tabview' ||
-        root.kind === 'navsplit' ||
-        root.kind === 'inspector' ||
-        root.kind === 'alert'
-      ) {
+      if (fillsScreen(root)) {
         // These ignore the safe areas: the tab bar and navigation bars
         // extend into them and the content is inset instead (a `navsplit`
         // hands the horizontal insets to its columns, see `placeNavSplit`;
@@ -1787,14 +1860,16 @@ export class LayoutPass {
     const detents = node.props['detents'];
     const first = Array.isArray(detents) ? str(detents[0]) : null;
     const { screen, safeArea } = this.env;
-    if (first === 'medium') return Math.min(SHEET_MEDIUM_HEIGHT, screen.height - safeArea.top - SHEET_TOP_GAP);
+    // iOS 26: a `large` sheet's top is the safe area's (measured in the
+    // iOS 26 simulator); earlier versions left 10 more above it.
+    const large = screen.height - safeArea.top;
+    if (first === 'medium') return Math.min(SHEET_MEDIUM_HEIGHT, large);
     // `.height(h)` / `.fraction(f)` detents, at most as tall as `large`.
-    const large = screen.height - safeArea.top - SHEET_TOP_GAP;
     if (first?.startsWith('height:')) return Math.min(large, Number(first.slice(7)) || large);
     if (first?.startsWith('fraction:')) return Math.min(large, screen.height * (Number(first.slice(9)) || 1));
     // Phase 8: `full` (`.fullScreenCover`) covers the whole screen.
     if (first === 'full') return screen.height;
-    return screen.height - safeArea.top - SHEET_TOP_GAP;
+    return large;
   }
 
   /** Phase 8: a sheet whose first detent is `full` has no grabber row. */
@@ -1961,11 +2036,69 @@ export class LayoutPass {
 
   private stackPlan(node: LayoutNode, ctx: Context, p: Proposal, axis: Axis): StackPlan {
     return this.plan(node, p, () => {
-      const spacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
-      return this.layoutStack(node.children, this.childContext(node, ctx), p, axis, spacing);
+      const cctx = this.childContext(node, ctx);
+      return this.layoutStack(node.children, cctx, p, axis, this.stackGaps(node, cctx, axis));
     });
   }
 
+  /**
+   * The space between a stack's children: its `spacing`, else the system's.
+   * A horizontal stack's default is 8; in a vertical one iOS 26 spaces text
+   * by its font (measured in the simulator, Examples/Fidelity's `spacing`
+   * screen; `textEdge` finds text at an edge). Between two texts the gap is
+   * the lower font's leading less its line height, plus a pixel (about 2 for
+   * the text styles); a view above text sits 0.409em − 1.24 above its line
+   * (caption 3.67, body 5.71, largeTitle 12.67); text above a view is
+   * 0.6em + 1.13 above it (caption 8.33, body 11.33); other views are 8 apart.
+   */
+  private stackGaps(node: LayoutNode, cctx: Context, axis: Axis): number[] {
+    const n = node.children.length;
+    if (n < 2) return [];
+    const spacing = num(node.props['spacing']);
+    if (spacing !== null || axis === 'horizontal') return new Array<number>(n - 1).fill(spacing ?? DEFAULT_SPACING);
+    const gaps: number[] = [];
+    for (let i = 0; i < n - 1; i++) {
+      const above = this.textEdge(node.children[i] as LayoutNode, cctx, 'bottom');
+      const below = this.textEdge(node.children[i + 1] as LayoutNode, cctx, 'top');
+      let gap = DEFAULT_SPACING;
+      if (above && below) gap = below.leading - below.lineHeight + 1 / 3;
+      else if (below) gap = 0.409 * below.size - 1.24;
+      else if (above) gap = 0.6 * above.size + 1.13;
+      gaps.push(Math.max(0, Math.round(gap * 3) / 3));
+    }
+    return gaps;
+  }
+
+  /**
+   * The font of the text at a view's top or bottom edge, for the default
+   * spacing of a vertical stack: a `text`, through modifiers that leave its
+   * box alone (not a frame or padding), decorations (their content) and
+   * vertical stacks (their first or last child). Null for any other view.
+   */
+  private textEdge(node: LayoutNode, ctx: Context, edge: 'top' | 'bottom', depth = 0): ResolvedFont | null {
+    if (depth > 32) return null;
+    switch (node.kind) {
+      case 'text':
+        return ctx.font;
+      case 'styled': {
+        const style = styleOf(node);
+        const boxed = ['frame', 'padding', 'containerRelativeFrame', 'aspectRatio', 'position', 'offset'].some((key) => style[key] !== undefined && style[key] !== null);
+        const child = node.children[0];
+        return !boxed && node.children.length === 1 && child ? this.textEdge(child, this.childContext(node, ctx), edge, depth + 1) : null;
+      }
+      case 'decorated': {
+        const content = node.children[0];
+        return content ? this.textEdge(content, this.childContext(node, ctx), edge, depth + 1) : null;
+      }
+      case 'vstack': {
+        const child = edge === 'top' ? node.children[0] : node.children[node.children.length - 1];
+        return child && !isSpacer(child) ? this.textEdge(child, this.childContext(node, ctx), edge, depth + 1) : null;
+      }
+      default:
+        return null;
+    }
+  }
+
   /**
    * SwiftUI's stack algorithm. With an axis proposal, every child's minimum
    * and maximum along the axis (proposals 0 and Infinity, cross fixed) give
@@ -2007,13 +2140,13 @@ export class LayoutPass {
     cctx: Context,
     p: Proposal,
     axis: Axis,
-    spacing: number,
+    gaps: number[],
   ): StackPlan {
     const n = children.length;
-    if (n === 0) return { size: ZERO, childSizes: [], childProposals: [] };
+    if (n === 0) return { size: ZERO, childSizes: [], childProposals: [], gaps };
     const along = axis === 'horizontal' ? p.width : p.height;
     const cross = axis === 'horizontal' ? p.height : p.width;
-    const totalSpacing = spacing * (n - 1);
+    const totalSpacing = gaps.reduce((sum, gap) => sum + gap, 0);
     const childSizes: Size[] = new Array<Size>(n);
     const childProposals: Proposal[] = new Array<Proposal>(n);
 
@@ -2110,7 +2243,7 @@ export class LayoutPass {
     }
     const size: Size =
       axis === 'horizontal' ? { width: total, height: crossSize } : { width: crossSize, height: total };
-    return { size, childSizes, childProposals };
+    return { size, childSizes, childProposals, gaps };
   }
 
   private placeStack(
@@ -2119,7 +2252,6 @@ export class LayoutPass {
     plan: StackPlan,
     axis: Axis,
     alignment: string,
-    spacing: number,
     x: number,
     y: number,
     size: Size,
@@ -2150,7 +2282,7 @@ export class LayoutPass {
         : line - (guides[i] ?? crossOf(childSize, axis) * crossAnchor);
       if (axis === 'horizontal') this.place(child, cctx, proposal, x + cursor, y + crossOffset);
       else this.place(child, cctx, proposal, x + crossOffset, y + cursor);
-      cursor += axisOf(childSize, axis) + spacing;
+      cursor += axisOf(childSize, axis) + (plan.gaps[i] ?? 0);
     }
   }
 
@@ -2261,10 +2393,10 @@ export class LayoutPass {
       if (frame) {
         if (frame.width !== null) width = frame.width;
         else if (frame.minWidth !== null || frame.maxWidth !== null)
-          width = clamp(p.width === null ? padded.width : p.width, frame.minWidth, frame.maxWidth);
+          width = flexibleFrameLength(p.width, padded.width, frame.minWidth, frame.maxWidth);
         if (frame.height !== null) height = frame.height;
         else if (frame.minHeight !== null || frame.maxHeight !== null)
-          height = clamp(p.height === null ? padded.height : p.height, frame.minHeight, frame.maxHeight);
+          height = flexibleFrameLength(p.height, padded.height, frame.minHeight, frame.maxHeight);
         // A flexible frame proposes its own resolved size to the child (so
         // `Rectangle().frame(minHeight: 100)` fills 100, as in SwiftUI). Only
         // when a nil-proposed axis was clamped up to a minimum does the child
@@ -2656,9 +2788,8 @@ export class LayoutPass {
         }
         const axis: Axis = node.kind === 'vstack' ? 'vertical' : 'horizontal';
         const plan = this.stackPlan(node, ctx, p, axis);
-        const spacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
         const alignment = str(node.props['alignment']) ?? 'center';
-        this.placeStack(node.children, cctx, plan, axis, alignment, spacing, x, y, size);
+        this.placeStack(node.children, cctx, plan, axis, alignment, x, y, size);
         return;
       }
       case 'zstack': {
@@ -2799,12 +2930,25 @@ export class LayoutPass {
         const inset = axes.vertical ? this.scrollInsets.get(node) : undefined;
         const content: Rect = {
           x: x + dx,
-          y: y + dy + (inset ? inset.bar + (inset.largeTitle?.height ?? 0) : 0),
+          y: y + dy + (inset ? inset.bar + (inset.largeTitle?.height ?? 0) + (inset.search ?? 0) : 0),
           width: plan.contentSize.width,
           height: plan.contentSize.height,
         };
         const covered = this.coveredBottom(ctx, x, y, size);
         const scrollChrome: Record<string, Rect> = { content };
+        // `.scrollClipDisabled()`: a horizontal scroll view draws its content
+        // past its sides, as far as the screen's (an ancestor that clips, a
+        // sheet's card, still does). Its frame reaches them; the content stays
+        // where it is and `viewport` keeps the rect the scroll view laid out in,
+        // which the page scrolls and snaps against.
+        if (node.props['clipDisabled'] === true && axes.horizontal && !axes.vertical) {
+          const left = Math.max(0, x);
+          const right = Math.max(0, this.env.screen.width - (x + size.width));
+          if (left > 0 || right > 0) {
+            scrollChrome['viewport'] = { x, y, width: size.width, height: size.height };
+            this.setFrame(node, x - left, y, { width: size.width + left + right, height: size.height });
+          }
+        }
         if (covered) scrollChrome['bottomInset'] = covered;
         if (inset) scrollChrome['topInset'] = { x, y, width: size.width, height: inset.bar };
         if (inset?.largeTitle) scrollChrome['largeTitle'] = inset.largeTitle;
@@ -2892,7 +3036,10 @@ export class LayoutPass {
           const proposal: Proposal = { width: size.width, height: size.height };
           const decorationSize = this.measure(decoration, cctx, proposal);
           const alignment = str(node.props['alignment']) ?? 'center';
-          const { dx, dy } = alignChild(size, decorationSize, alignment, decoration);
+          // A decoration in an `if` aligns by its edges, its guides unused (as on iOS 26).
+          const { dx, dy } = node.props['conditional'] === true
+            ? alignIn(size, decorationSize, alignment)
+            : alignChild(size, decorationSize, alignment, decoration);
           this.place(decoration, cctx, proposal, x + dx, y + dy);
         }
         return;
@@ -3009,7 +3156,7 @@ export class LayoutPass {
     if (scrollInset) listChrome['topInset'] = { x, y, width: plan.size.width, height: scrollInset.bar };
     if (scrollInset?.largeTitle) listChrome['largeTitle'] = scrollInset.largeTitle;
     if (Object.keys(listChrome).length > 0) this.setChrome(node, listChrome);
-    const inset = scrollInset ? scrollInset.bar + (scrollInset.largeTitle?.height ?? 0) : 0;
+    const inset = scrollInset ? scrollInset.bar + (scrollInset.largeTitle?.height ?? 0) + (scrollInset.search ?? 0) : 0;
     if (node.id >= 0) this.contentSizes.set(node.id, { width: plan.contentSize.width, height: plan.contentSize.height + inset });
     y += inset;
     const offset = (r: Rect): Rect => ({ x: x + r.x, y: y + r.y, width: r.width, height: r.height });
@@ -3117,8 +3264,12 @@ export class LayoutPass {
     const bottomBarHeight = bottomToolbars.some((t) => !isSpacer(t))
       ? Math.min(size.height, BOTTOM_GLASS_HEIGHT + searchMargin)
       : 0;
-    const searchBottom = parts.search ? SEARCH_BOTTOM_HEIGHT + searchMargin : 0;
-    const contentTop = barHeight + largeHeight;
+    // In a tab view (a tab bar covers the bottom) the field goes under the
+    // title, as iOS 26 places it; elsewhere it floats at the bottom.
+    const searchOnTop = parts.search !== null && cctx.bottomBar > 0;
+    const searchRow = searchOnTop ? SEARCH_TOP_ROW : 0;
+    const searchBottom = parts.search && !searchOnTop ? SEARCH_BOTTOM_HEIGHT + searchMargin : 0;
+    const contentTop = barHeight + largeHeight + searchRow;
     const content: Rect = {
       x,
       y: y + contentTop,
@@ -3135,10 +3286,13 @@ export class LayoutPass {
     if (parts.search) {
       chrome['searchField'] = {
         x: x + SEARCH_FIELD_MARGIN_H,
-        y: y + size.height - searchBottom,
+        y: searchOnTop ? y + barHeight + largeHeight + SEARCH_TOP_ABOVE : y + size.height - searchBottom,
         width: Math.max(0, size.width - 2 * SEARCH_FIELD_MARGIN_H),
-        height: SEARCH_BOTTOM_HEIGHT,
+        height: searchOnTop ? SEARCH_TOP_HEIGHT : SEARCH_BOTTOM_HEIGHT,
       };
+      // The page draws a field under the title as the bar's (a gray capsule)
+      // and moves it with the content when that scrolls under the bar.
+      if (searchOnTop) chrome['searchTop'] = chrome['searchField'];
     }
     if (bottomBarHeight > 0) {
       chrome['bottomBar'] = { x, y: y + size.height - bottomBarHeight, width: size.width, height: bottomBarHeight };
@@ -3400,6 +3554,7 @@ export class LayoutPass {
       this.scrollInsets.set(scroller, {
         bar: barHeight,
         largeTitle: titleScrolls ? (chrome['largeTitle'] as Rect) : null,
+        search: searchRow,
       });
       this.place(child, contentCtx, { width: content.width, height: content.height + top + bottomCover }, content.x, y);
       return;
@@ -4189,6 +4344,10 @@ export class LayoutPass {
       // answered size made an enclosing custom layout see this one as rigid
       // at a stale size, and the two then traded answers forever.
       const sizes = readLayoutSizes(node.props['sizes']);
+      // At the answered width with no height (a grid or stack measuring the
+      // row it places in): Swift's answer for exactly that.
+      const answered = readProposal(node.props['proposal']);
+      if (sizes?.atWidth && p.height === null && p.width !== null && answered?.width != null && Math.abs(p.width - answered.width) < 0.01) return sizes.atWidth;
       const axis = (proposed: number | null, answered: number, dim: 'width' | 'height'): number => {
         if (sizes) {
           if (proposed === null) return sizes.ideal[dim];
@@ -4424,7 +4583,8 @@ export class LayoutPass {
    * and the gaps between items) equally, flexible ones clamped to [min, max];
    * an adaptive item then fits as many columns as its share allows,
    * n = max(1, floor((W' + s) / (min + s))), each (W' − (n−1)·s) / n wide,
-   * clamped. With no width the flexible columns take the cells' largest ideal
+   * at most its maximum (its minimum only counts the columns: one column of
+   * a minimum wider than the share is the share, as in SwiftUI). With no width the flexible columns take the cells' largest ideal
    * width and an adaptive item is one column. Cells fill rows left to right.
    */
   /**
@@ -4480,7 +4640,7 @@ export class LayoutPass {
           const s = item.spacing;
           const unit = item.minimum + s;
           const n = unit > 0 ? Math.max(1, Math.floor((adaptiveShare + s) / unit + EPSILON)) : 1;
-          const width = clamp((adaptiveShare - (n - 1) * s) / n, item.minimum, item.maximum);
+          const width = clamp((adaptiveShare - (n - 1) * s) / n, null, item.maximum);
           widths[i] = new Array<number>(n).fill(width);
         });
       }
@@ -4533,9 +4693,14 @@ export class LayoutPass {
       for (const cell of row.cells) {
         const column = plan.columns[cell.column] as LazyColumnPlan;
         const box: Size = horizontal ? { width: row.height, height: column.width } : { width: column.width, height: row.height };
-        const { dx, dy } = alignIn(box, cell.size, column.alignment ?? gridAlignment);
-        if (horizontal) this.place(cell.node, cctx, { width: null, height: column.width }, x + row.y + dx, y + column.x + dy);
-        else this.place(cell.node, cctx, { width: column.width, height: null }, x + column.x + dx, y + row.y + dy);
+        // Measured without a main-axis size, a cell is placed proposing its
+        // row's (as on iOS: Backyard Birds' cards, a `ZStack` of artwork and
+        // a `VStack` with a `Spacer`, stretch that stack to the artwork's
+        // height, so the header sits at the card's top).
+        const size = this.measure(cell.node, cctx, box);
+        const { dx, dy } = alignIn(box, size, column.alignment ?? gridAlignment);
+        if (horizontal) this.place(cell.node, cctx, box, x + row.y + dx, y + column.x + dy);
+        else this.place(cell.node, cctx, box, x + column.x + dx, y + row.y + dy);
       }
     }
   }
@@ -4549,7 +4714,9 @@ export class LayoutPass {
    * optional label row (label leading, current value label trailing, both in
    * the `caption` text style) with a 4px gap. A circular gauge is a 58-point
    * square, whatever the proposal, with the current value label (else the
-   * label) centered in the ring, proposed the square inside it.
+   * label) centered in the ring, proposed `GAUGE_RING_CENTER` in a 24pt
+   * semibold font; an `accessoryCircular` gauge with both labels puts the
+   * label in the gap at the bottom of its arc.
    */
   private gaugePlan(node: LayoutNode, ctx: Context, p: Proposal): GaugePlan {
     return this.plan(node, p, () => {
@@ -4562,9 +4729,15 @@ export class LayoutPass {
       const style = str(node.props['style']);
       if (style === 'accessoryCircular' || style === 'accessoryCircularCapacity') {
         const center = current ?? label;
-        const inner = Math.floor(GAUGE_RING_SIZE * GAUGE_RING_INNER);
-        const centerSize = center ? this.measure(center, labelCtx, { width: inner, height: inner }) : ZERO;
-        return { size: square(GAUGE_RING_SIZE), label, current, labelSize: ZERO, currentSize: ZERO, labelRow: 0, labelCtx, ring: { center, centerSize } };
+        const ringCtx: Context = { ...cctx, font: resolveFont(GAUGE_RING_FONT, ctx.font, this.env) };
+        const centerSize = center ? this.measure(center, ringCtx, GAUGE_RING_CENTER) : ZERO;
+        // With both labels an `accessoryCircular` gauge shows the label too, under the value.
+        const arcLabel = style === 'accessoryCircular' && current && label ? label : null;
+        const arcLabelSize = arcLabel ? this.measure(arcLabel, labelCtx, GAUGE_ARC_LABEL) : ZERO;
+        return {
+          size: square(GAUGE_RING_SIZE), label, current, labelSize: arcLabelSize, currentSize: ZERO, labelRow: 0, labelCtx,
+          ring: { center, centerSize, ctx: ringCtx, arcLabel },
+        };
       }
       const proposal: Proposal = { width, height: null };
       if (style === 'progress') {
@@ -4587,14 +4760,18 @@ export class LayoutPass {
   private placeGauge(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
     const plan = this.gaugePlan(node, ctx, p);
     if (plan.ring) {
-      const { center, centerSize } = plan.ring;
-      const inner = Math.floor(GAUGE_RING_SIZE * GAUGE_RING_INNER);
+      const { center, centerSize, ctx: ringCtx, arcLabel } = plan.ring;
       if (center) {
         const { dx, dy } = alignIn(size, centerSize, 'center');
-        this.place(center, plan.labelCtx, { width: inner, height: inner }, x + dx, y + dy);
+        this.place(center, ringCtx, GAUGE_RING_CENTER, x + dx, y + dy);
+      }
+      if (arcLabel) {
+        // Centered in the arc's gap, on the gauge's bottom edge.
+        const labelSize = plan.labelSize;
+        this.place(arcLabel, plan.labelCtx, GAUGE_ARC_LABEL, x + (size.width - labelSize.width) / 2, y + size.height - labelSize.height);
       }
-      // The other label is not shown (SwiftUI shows one in the middle).
-      for (const other of [plan.label, plan.current]) if (other && other !== center) this.hide(other, node);
+      // A capacity gauge shows one label, in the middle.
+      for (const other of [plan.label, plan.current]) if (other && other !== center && other !== arcLabel) this.hide(other, node);
       this.setChrome(node, { ring: { x, y, width: size.width, height: size.height } });
       return;
     }

package/src/layout/index.ts

@@ -65,7 +65,7 @@ export type {
   RichTextLayout,
   TextMeasurer,
 } from './types';
-export { layoutTree, LayoutPass, type Context as LayoutContext } from './engine';
+export { layoutTree, LayoutPass, listRowBackgroundOf, type Context as LayoutContext } from './engine';
 export {
   defaultFont,
   resolveFont,