@swiftbrowser/web 0.1.0 → 0.2.0

package/src/layout/chart.ts

@@ -14,6 +14,8 @@ export const CHART_DEFAULT_WIDTH = 300;
 export const CHART_DEFAULT_HEIGHT = 200;
 /** Gap between an axis label and the plot edge (the ticks sit inside it). */
 export const CHART_AXIS_PAD = 6;
+/** How far a leading-anchored x label (a date's) starts after its tick. */
+export const CHART_LEADING_LABEL_OFFSET = 2;
 export const CHART_TICK_LENGTH = 4;
 /** Legend glyph: a `symbolSize`-px symbol, or an 18 × 3 line when the item has no symbol. */
 export const CHART_LEGEND_GLYPH = 10;
@@ -32,8 +34,11 @@ export type ChartItemPosition = 'top' | 'bottom' | 'leading' | 'trailing' | 'ove
 
 export interface ChartAxisInput {
   position: ChartAxisPosition;
-  /** Text labels: unit position and measured width (height is `labelHeight`). */
-  labels: { at: number; width: number }[];
+  /**
+   * Text labels: unit position and measured width (height is `labelHeight`);
+   * `leading`: an x label starts at its tick (a date's) instead of centering on it.
+   */
+  labels: { at: number; width: number; leading?: boolean }[];
   /** Line height of the axis font. */
   labelHeight: number;
   /** View labels (`xLabel` / `yLabel` children) at their ideal size. */
@@ -186,7 +191,8 @@ export function layoutChart(input: ChartLayoutInput): ChartGeometry {
     const top = (h: number) => (xTop ? plot.y - CHART_AXIS_PAD - h : plot.y + plot.height + CHART_AXIS_PAD);
     for (const label of xAxis.labels) {
       const h = xAxis.labelHeight;
-      const x = clampTo(mapX(plot, label.at) - label.width / 2, label.width, 0, width);
+      const start = label.leading ? mapX(plot, label.at) + CHART_LEADING_LABEL_OFFSET : mapX(plot, label.at) - label.width / 2;
+      const x = clampTo(start, label.width, 0, width);
       xLabels.push({ x, y: top(h), width: label.width, height: h });
     }
     for (const view of xAxis.views) {

package/src/layout/engine.ts

@@ -20,8 +20,9 @@
  */
 
 import { FONT_FAMILIES, defaultFont, makeFont, resolveFont, textStyleSize } from './typography';
-import { wrapText } from './text';
+import { wrapRuns, wrapText, type TextRunInput } from './text';
 import { formatPickerDate, formatPickerTime, sliderFraction } from './controls';
+import { videoSize } from './video';
 import {
   CHART_LEGEND_GAP,
   CHART_LEGEND_GLYPH,
@@ -83,6 +84,11 @@ export interface Context {
    * the screen at the root, a scroll view's viewport inside one.
    */
   container: Size;
+  /**
+   * The lower bound of the enclosing `.lineLimit(2...4)` range (`lineLimitMin`):
+   * a vertical text field is at least this many lines tall. Absent for 1.
+   */
+  minLines?: number;
 }
 
 // Constants from the spec.
@@ -100,6 +106,8 @@ const TOGGLE_GAP = 8;
 const TEXTFIELD_DEFAULT_WIDTH = 200;
 const TEXTFIELD_HEIGHT_ROUNDED = 34;
 const TEXTFIELD_HEIGHT_PLAIN = 22;
+/** A vertical `roundedBorder` field's text inset: 7 + the 1px border across, (34 - 22) / 2 down. */
+const TEXTFIELD_ROUNDED_INSET = { horizontal: 8, vertical: 6 };
 const NAV_BAR_HEIGHT = 44;
 const LARGE_TITLE_HEIGHT = 52;
 /** Chevron glyph plus its gap, in px. */
@@ -132,6 +140,10 @@ const PICKER_MENU_GAP = 12;
 const GAUGE_BAR_HEIGHT = 4;
 const GAUGE_LABEL_GAP = 4;
 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;
 const GRID_ITEM_DEFAULT_MIN = 10;
 // Phase 6 (docs/phase6/chrome.md).
 const PICKER_INLINE_ROW_HEIGHT = 44;
@@ -457,6 +469,8 @@ interface RowHints {
   badge: string | null;
   /** `.listRowInsets(_:)`, or null for the defaults. */
   insets: EdgeInsets | null;
+  /** `.listRowSeparator(.hidden, edges:)`: the edges whose separator the row hides. */
+  separatorHidden: { top: boolean; bottom: boolean } | null;
 }
 
 /**
@@ -464,7 +478,7 @@ interface RowHints {
  * outermost wins, like `layoutPriority`): `badge` and `listRowInsets`.
  */
 function rowHintsOf(node: LayoutNode): RowHints {
-  const hints: RowHints = { badge: null, insets: null };
+  const hints: RowHints = { badge: null, insets: null, separatorHidden: null };
   let current: LayoutNode | undefined = node;
   // `NavigationLink(value:) { OrderRow().badge(n) }`: the hints sit on the
   // link's label, which is the row's content. Phase 8 wrappers (`listrow`,
@@ -477,6 +491,11 @@ function rowHintsOf(node: LayoutNode): RowHints {
         if (badge !== null && badge.length > 0) hints.badge = badge;
       }
       if (hints.insets === null) hints.insets = readInsets(style['listRowInsets']);
+      const separator = style['listRowSeparator'];
+      if (hints.separatorHidden === null && typeof separator === 'object' && separator !== null) {
+        const edges = separator as Record<string, unknown>;
+        hints.separatorHidden = { top: edges['top'] === true, bottom: edges['bottom'] === true };
+      }
       current = current.children.length === 1 ? current.children[0] : undefined;
     } else if (current.kind === 'navlink' && current.children.length === 1) {
       current = current.children[0];
@@ -581,6 +600,49 @@ function alignIn(container: Size, child: Size, alignment: string): { dx: number;
   };
 }
 
+/** The guide names a pair of anchors aligns by: `leading`/`center`/`trailing` and `top`/`center`/`bottom`. */
+function guideNames([ax, ay]: [number, number]): [string, string] {
+  return [ax === 0 ? 'leading' : ax === 1 ? 'trailing' : 'center', ay === 0 ? 'top' : ay === 1 ? 'bottom' : 'center'];
+}
+
+/**
+ * The guide `name` on `axis` a view moved with `.alignmentGuide`, as
+ * `[a, b, c]` (the guide is `a + b·width + c·height`): set on the view or on
+ * a `styled` wrapper inside it (the modifiers between change nothing here).
+ */
+export function explicitGuide(node: LayoutNode, axis: 'horizontal' | 'vertical', name: string): [number, number, number] | null {
+  let current: LayoutNode | undefined = node;
+  for (let depth = 0; current && current.kind === 'styled' && depth < 32; depth++) {
+    const guide = (current.props['style'] as { alignmentGuide?: { axis?: string; name?: string; value?: unknown } } | undefined)?.alignmentGuide;
+    if (guide && guide.axis === axis && guide.name === name && Array.isArray(guide.value) && guide.value.length === 3) {
+      const [a, b, c] = guide.value.map((v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0)) as [number, number, number];
+      return [a, b, c];
+    }
+    current = current.children.length === 1 ? current.children[0] : undefined;
+  }
+  return null;
+}
+
+function guideValue([a, b, c]: [number, number, number], size: Size): number {
+  return a + b * size.width + c * size.height;
+}
+
+/**
+ * `alignIn` for a child that may have moved its guides (`.alignmentGuide`):
+ * on an axis where it did, its guide meets the container's guide for the
+ * same alignment (0, the middle or the end); elsewhere it aligns as before.
+ */
+function alignChild(container: Size, child: Size, alignment: string, node: LayoutNode): { dx: number; dy: number } {
+  const anchors = alignmentAnchors(alignment);
+  const [horizontal, vertical] = guideNames(anchors);
+  const offsets = alignIn(container, child, alignment);
+  const gx = explicitGuide(node, 'horizontal', horizontal);
+  const gy = explicitGuide(node, 'vertical', vertical);
+  if (gx && Number.isFinite(container.width)) offsets.dx = container.width * anchors[0] - guideValue(gx, child);
+  if (gy && Number.isFinite(container.height)) offsets.dy = container.height * anchors[1] - guideValue(gy, child);
+  return offsets;
+}
+
 function safeOffset(container: number, child: number, anchor: number): number {
   if (!Number.isFinite(container) || !Number.isFinite(child)) return 0;
   return (container - child) * anchor;
@@ -682,6 +744,17 @@ interface ListRowPlan {
   badge: { rect: Rect; layout: TextLayout } | null;
   /** Phase 8 edit mode: the `listrow` the row is and its 44px leading control rect (relative to the list origin). */
   edit: { listRow: LayoutNode; control: Rect } | null;
+  /** `.listRowSeparator(.hidden)`: the row's separator edges left out. */
+  separatorHidden?: { top: boolean; bottom: boolean } | null;
+}
+
+/** A section's view header or footer (`sectionheader` / `sectionfooter`) as the list places it. */
+interface ListSupplementPlan {
+  node: LayoutNode;
+  ctx: Context;
+  proposal: Proposal;
+  /** Relative to the list origin at scroll 0. */
+  rect: Rect;
 }
 
 interface ListGroupPlan {
@@ -689,6 +762,8 @@ interface ListGroupPlan {
   frame: Rect;
   header: { rect: Rect; layout: TextLayout } | null;
   footer: { rect: Rect; layout: TextLayout } | null;
+  headerView: ListSupplementPlan | null;
+  footerView: ListSupplementPlan | null;
   card: Rect;
   rows: ListRowPlan[];
 }
@@ -769,6 +844,8 @@ interface GaugePlan {
   /** Height of the label row (0 without labels). */
   labelRow: number;
   labelCtx: 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 };
 }
 
 /** Phase 7: one `chartitem` child of a chart, measured at its ideal size. */
@@ -1030,7 +1107,11 @@ export class LayoutPass {
         if (font !== ctx.font) next = { ...next, font };
         if ('lineLimit' in style) {
           const limit = num(style['lineLimit']);
+          const min = num(style['lineLimitMin']);
           next = { ...next, lineLimit: limit !== null && limit >= 1 ? Math.floor(limit) : null };
+          // A new limit replaces the whole range, lower bound included.
+          if (min !== null && min > 1) next.minLines = Math.floor(min);
+          else delete next.minLines;
         }
         const alignment = str(style['multilineTextAlignment']);
         if (alignment === 'leading' || alignment === 'center' || alignment === 'trailing') {
@@ -1120,6 +1201,9 @@ export class LayoutPass {
         return this.measureImage(node, ctx, p);
       case 'spacer':
         return this.measureSpacer(node, ctx, p);
+      case 'lazyspacer':
+        // Lazy rows not built yet: no space (the page builds them as it nears).
+        return ZERO;
       case 'divider':
         if (ctx.stackAxis === 'horizontal') return { width: 1, height: finite(p.height) ? p.height : 0 };
         return { width: finite(p.width) ? p.width : 0, height: 1 };
@@ -1136,6 +1220,7 @@ export class LayoutPass {
       case 'toggle':
         return this.measureToggle(node, ctx, p);
       case 'textfield': {
+        if (node.props['axis'] === 'vertical') return this.measureMultilineField(node, ctx, p);
         const style = str(node.props['style']);
         return {
           width: finite(p.width) ? p.width : TEXTFIELD_DEFAULT_WIDTH,
@@ -1144,7 +1229,11 @@ export class LayoutPass {
       }
       case 'color':
       case 'shape':
+      case 'canvas':
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
+      case 'video':
+        // Fills the proposal; an open axis follows the video's aspect ratio.
+        return videoSize(node.props, p);
       case 'scrollview':
         return this.scrollPlan(node, ctx, p).size;
       case 'list':
@@ -1230,8 +1319,26 @@ export class LayoutPass {
     }
   }
 
+  /**
+   * A vertical `textfield`: the proposed width (200 when unconstrained) and
+   * as many lines as its text (or, empty, its placeholder) wraps to in the
+   * context font, between the range's `minLines` and `lineLimit`.
+   */
+  private measureMultilineField(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const inset = str(node.props['style']) === 'roundedBorder' ? TEXTFIELD_ROUNDED_INSET : { horizontal: 0, vertical: 0 };
+    const width = finite(p.width) ? p.width : TEXTFIELD_DEFAULT_WIDTH;
+    const text = str(node.props['text']) || str(node.props['placeholder']) || '';
+    const wrapped = wrapText(text, ctx.font, Math.max(1, width - 2 * inset.horizontal), null, this.measurer);
+    const min = Math.max(1, ctx.minLines ?? 1);
+    const max = Math.max(min, ctx.lineLimit ?? Infinity);
+    const lines = Math.min(Math.max(wrapped.lines.length, min), max);
+    return { width, height: lines * ctx.font.lineHeight + 2 * inset.vertical };
+  }
+
   private textPlan(node: LayoutNode, ctx: Context, p: Proposal): TextPlan {
     return this.plan(node, p, () => {
+      const runs = node.props['runs'];
+      if (Array.isArray(runs)) return this.richTextPlan(runs, ctx, p);
       const text = str(node.props['text']) ?? '';
       const wrapped = wrapText(text, ctx.font, p.width, ctx.lineLimit, this.measurer);
       return {
@@ -1246,6 +1353,47 @@ export class LayoutPass {
     });
   }
 
+  /**
+   * Rich text: each run's font (the text's font, changed by the run's), its
+   * kerning, and an inline image's size; wrapped as one paragraph flow.
+   */
+  private richTextPlan(runs: unknown[], ctx: Context, p: Proposal): TextPlan {
+    const inputs: TextRunInput[] = runs.map((value) => {
+      const run = obj(value) ?? {};
+      let font = resolveFont(run['font'], ctx.font, this.env);
+      if (run['italic'] === true) font = { ...font, css: `italic ${font.css}` };
+      const kerning = num(run['kerning']) ?? 0;
+      const image = obj(run['image']);
+      if (image) return { image: this.inlineImageSize(image, font), font, kerning };
+      return { text: str(run['text']) ?? '', font, kerning };
+    });
+    const wrapped = wrapRuns(inputs, ctx.font, p.width, ctx.lineLimit, this.measurer);
+    const lines = wrapped.lines.map((line) => line.map((fragment) => fragment.text ?? '\uFFFC').join(''));
+    return {
+      size: { width: wrapped.width, height: wrapped.heights.reduce((total, height) => total + height, 0) },
+      layout: {
+        font: ctx.font,
+        lines,
+        alignment: ctx.textAlignment,
+        truncated: wrapped.truncated,
+        rich: { lines: wrapped.lines, heights: wrapped.heights, fonts: inputs.map((input) => input.font) },
+      },
+    };
+  }
+
+  /** An image in a text: a bitmap or remote image at its size, a symbol a square of the line height. */
+  private inlineImageSize(props: Record<string, unknown>, font: ResolvedFont): Size {
+    if (typeof props['url'] === 'string' || typeof props['bitmap'] === 'object') {
+      return { width: num(props['width']) ?? 0, height: num(props['height']) ?? 0 };
+    }
+    const name = str(props['name']);
+    if (name === null) return square(font.lineHeight);
+    const asset = this.env.assets?.images[name];
+    if (!asset) return square(UNKNOWN_IMAGE_SIDE);
+    if (asset.kind === 'symbol') return square(font.lineHeight);
+    return { width: num(asset.width) ?? 0, height: num(asset.height) ?? 0 };
+  }
+
   private measureSpacer(node: LayoutNode, ctx: Context, p: Proposal): Size {
     const min = num(node.props['minLength']);
     if (ctx.stackAxis === null) {
@@ -1326,6 +1474,10 @@ export class LayoutPass {
     const first = Array.isArray(detents) ? str(detents[0]) : null;
     const { screen, safeArea } = this.env;
     if (first === 'medium') return screen.height / 2;
+    // `.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;
@@ -1582,12 +1734,27 @@ export class LayoutPass {
     const anchors = alignmentAnchors(alignment);
     const crossAnchor = axis === 'horizontal' ? anchors[1] : anchors[0];
     const crossSize = crossOf(size, axis);
+    // `.alignmentGuide`: the children's guides for the stack's alignment
+    // line up. A child's guide is its explicit one, else the default (none,
+    // half or all of its cross size); the line is the stack's own guide, or
+    // further along when a guide reaches past it (the children move with it).
+    const guideAxis = axis === 'horizontal' ? 'vertical' : 'horizontal';
+    const guideName = guideNames(anchors)[axis === 'horizontal' ? 1 : 0];
+    const guides = children.map((child, i) => {
+      const explicit = explicitGuide(child, guideAxis, guideName);
+      return explicit ? guideValue(explicit, plan.childSizes[i] as Size) : null;
+    });
+    const line = guides.some((g) => g !== null) && Number.isFinite(crossSize)
+      ? Math.max(crossSize * crossAnchor, ...guides.filter((g): g is number => g !== null))
+      : null;
     let cursor = 0;
     for (let i = 0; i < children.length; i++) {
       const child = children[i] as LayoutNode;
       const childSize = plan.childSizes[i] as Size;
       const proposal = plan.childProposals[i] as Proposal;
-      const crossOffset = safeOffset(crossSize, crossOf(childSize, axis), crossAnchor);
+      const crossOffset = line === null
+        ? safeOffset(crossSize, crossOf(childSize, axis), crossAnchor)
+        : 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;
@@ -1606,6 +1773,13 @@ export class LayoutPass {
    * fixed 44×44 so the placeholder is visible.
    */
   private measureImage(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    if (typeof node.props['url'] === 'string' || typeof node.props['bitmap'] === 'object') {
+      // Phase 13: a remote image carries its own point size, as does a bitmap.
+      const width = num(node.props['width']) ?? 0;
+      const height = num(node.props['height']) ?? 0;
+      if (node.props['resizable'] !== true) return { width, height };
+      return { width: p.width ?? width, height: p.height ?? height };
+    }
     const name = str(node.props['name']);
     if (name === null) return square(ctx.font.lineHeight * ctx.imageScale);
     const asset = this.env.assets?.images[name];
@@ -1815,6 +1989,8 @@ export class LayoutPass {
       // sections are full width. `plain` also drops the top/bottom gaps and
       // the space between sections.
       const listStyle = str(node.props['style']) ?? 'insetGrouped';
+      // `.environment(\.defaultMinListRowHeight, _)`; 44 by default.
+      const minRowHeight = num(node.props['minRowHeight']) ?? LIST_ROW_MIN_HEIGHT;
       const inset = listStyle === 'insetGrouped' ? LIST_INSET : 0;
       const plain = listStyle === 'plain';
       const listTop = plain ? 0 : LIST_TOP;
@@ -1834,17 +2010,30 @@ export class LayoutPass {
       // its content shifts right by as much.
       const editing = node.props['editing'] === true;
 
-      // Group consecutive plain rows into an implicit section.
-      const groupsSource: { section: LayoutNode | null; rows: LayoutNode[] }[] = [];
+      // Group consecutive plain rows into an implicit section. A section's
+      // view header and footer are not rows.
+      type GroupSource = { section: LayoutNode | null; rows: LayoutNode[]; headerView: LayoutNode | null; footerView: LayoutNode | null };
+      const groupsSource: GroupSource[] = [];
       for (const child of node.children) {
         if (child.kind === 'section') {
-          groupsSource.push({ section: child, rows: child.children });
+          const rows = child.children.filter((row) => row.kind !== 'sectionheader' && row.kind !== 'sectionfooter');
+          const headerView = child.children.find((row) => row.kind === 'sectionheader') ?? null;
+          const footerView = child.children.find((row) => row.kind === 'sectionfooter') ?? null;
+          groupsSource.push({ section: child, rows, headerView, footerView });
         } else {
           const last = groupsSource[groupsSource.length - 1];
           if (last && last.section === null) last.rows.push(child);
-          else groupsSource.push({ section: null, rows: [child] });
+          else groupsSource.push({ section: null, rows: [child], headerView: null, footerView: null });
         }
       }
+      // View headers and footers: the content width, the footnote font.
+      const supplementCtx: Context = { ...rowCtx, listRow: false, stackAxis: null, font: headerFont };
+      const supplement = (view: LayoutNode | null, y: number): ListSupplementPlan | null => {
+        if (!view) return null;
+        const proposal: Proposal = { width: contentWidth, height: null };
+        const size = this.measure(view, supplementCtx, proposal);
+        return { node: view, ctx: supplementCtx, proposal, rect: { x: contentX, y, width: size.width, height: size.height } };
+      };
 
       const groups: ListGroupPlan[] = [];
       let y = listTop;
@@ -1856,11 +2045,13 @@ export class LayoutPass {
         };
       };
       for (let g = 0; g < groupsSource.length; g++) {
-        const source = groupsSource[g] as { section: LayoutNode | null; rows: LayoutNode[] };
+        const source = groupsSource[g] as GroupSource;
         if (g > 0) y += sectionGap;
         const top = y;
         let header: ListGroupPlan['header'] = null;
         let footer: ListGroupPlan['footer'] = null;
+        const headerView = supplement(source.headerView, y);
+        if (headerView && headerView.rect.height > 0) y += headerView.rect.height + LIST_HEADER_GAP;
         const headerText = source.section ? str(source.section.props['header']) : null;
         const footerText = source.section ? str(source.section.props['footer']) : null;
         if (headerText !== null && headerText.length > 0) {
@@ -1871,6 +2062,12 @@ export class LayoutPass {
         const cardTop = y;
         const rows: ListRowPlan[] = [];
         for (const rowNode of source.rows) {
+          if (rowNode.kind === 'lazyspacer') {
+            // Lazy rows not built yet: a row of no height, without a cell.
+            const rect: Rect = { x: cardX, y, width: cardWidth, height: 0 };
+            rows.push({ node: rowNode, proposal: { width: cardWidth, height: 0 }, contentSize: ZERO, row: rect, content: rect, badge: null, edit: null });
+            continue;
+          }
           // A picker already reports its row height (44 for a menu, 44 per
           // option inline); other rows get the 11px vertical padding. Phase 6
           // `listRowInsets` replaces all four insets; a `badge` reserves its
@@ -1891,7 +2088,7 @@ export class LayoutPass {
           const rowContentWidth = Math.max(0, cardWidth - insets.leading - insets.trailing - badgeReserve - editShift);
           const proposal: Proposal = { width: rowContentWidth, height: null };
           const contentSize = this.measure(rowNode, rowCtx, proposal);
-          const rowHeight = Math.max(LIST_ROW_MIN_HEIGHT, contentSize.height + insets.top + insets.bottom);
+          const rowHeight = Math.max(minRowHeight, contentSize.height + insets.top + insets.bottom);
           const row: Rect = { x: cardX, y, width: cardWidth, height: rowHeight };
           rows.push({
             node: rowNode,
@@ -1912,6 +2109,7 @@ export class LayoutPass {
                   }
                 : null,
             edit: listRow ? { listRow, control: { x: cardX, y, width: LIST_EDIT_CONTROL_WIDTH, height: rowHeight } } : null,
+            separatorHidden: hints.separatorHidden,
           });
           y += rowHeight;
         }
@@ -1922,11 +2120,16 @@ export class LayoutPass {
           footer = { rect: { x: contentX, y, width: contentWidth, height: size.height }, layout };
           y += size.height;
         }
+        let footerView = supplement(source.footerView, y + LIST_FOOTER_GAP);
+        if (footerView && footerView.rect.height > 0) y += LIST_FOOTER_GAP + footerView.rect.height;
+        else if (footerView) footerView = { ...footerView, rect: { ...footerView.rect, y } };
         groups.push({
           section: source.section,
           frame: { x: cardX, y: top, width: cardWidth, height: y - top },
           header,
           footer,
+          headerView,
+          footerView,
           card,
           rows,
         });
@@ -1944,15 +2147,21 @@ export class LayoutPass {
   // Place
   // -------------------------------------------------------------------------
 
-  place(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
-    // Phase 9: placed before, same proposal, same origin, nothing in the
-    // subtree invalidated since: the last run's output still holds.
-    const key = proposalKey(p);
+  /**
+   * Phase 9: placed before, same proposal, same origin, nothing in the
+   * subtree invalidated since: the last run's output still holds.
+   */
+  private placedAlready(node: LayoutNode, p: Proposal, x: number, y: number): boolean {
     const last = this.placed.get(node);
-    if (last && last.key === key && last.x === x && last.y === y) {
+    return last !== undefined && last.key === proposalKey(p) && last.x === x && last.y === y;
+  }
+
+  place(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
+    if (this.placedAlready(node, p, x, y)) {
       this.stats.skipped += 1;
       return;
     }
+    const key = proposalKey(p);
     this.placed.set(node, { key, x, y });
     this.stats.placed += 1;
     if (node.id >= 0) {
@@ -1979,11 +2188,17 @@ export class LayoutPass {
       case 'image':
         if (node.id >= 0) this.fonts.set(node.id, scaledFont(ctx.font, ctx.imageScale));
         return;
+      case 'textfield':
+        // A vertical field draws its text in the context font (one-line fields in the body font).
+        if (node.props['axis'] === 'vertical' && node.id >= 0) this.fonts.set(node.id, ctx.font);
+        return;
       case 'spacer':
+      case 'lazyspacer':
       case 'divider':
-      case 'textfield':
       case 'color':
       case 'shape':
+      case 'canvas':
+      case 'video':
         return;
       case 'vstack':
       case 'hstack': {
@@ -1998,7 +2213,7 @@ export class LayoutPass {
         const alignment = str(node.props['alignment']) ?? 'center';
         for (const child of node.children) {
           const childSize = this.measure(child, cctx, p);
-          const { dx, dy } = alignIn(size, childSize, alignment);
+          const { dx, dy } = alignChild(size, childSize, alignment, child);
           this.place(child, cctx, p, x + dx, y + dy);
         }
         return;
@@ -2038,7 +2253,7 @@ export class LayoutPass {
             );
             return;
           }
-          const { dx, dy } = alignIn(box, plan.childSize, plan.alignment);
+          const { dx, dy } = alignChild(box, plan.childSize, plan.alignment, child);
           this.place(child, cctx, plan.childProposal, x + box.x + dx, y + box.y + dy);
         }
         return;
@@ -2208,7 +2423,7 @@ 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 } = alignIn(size, decorationSize, alignment);
+          const { dx, dy } = alignChild(size, decorationSize, alignment, decoration);
           this.place(decoration, cctx, proposal, x + dx, y + dy);
         }
         return;
@@ -2289,6 +2504,9 @@ export class LayoutPass {
         }
         this.setFrame(group.section, x + group.frame.x, y + group.frame.y, group.frame);
         this.setChrome(group.section, chrome);
+        for (const view of [group.headerView, group.footerView]) {
+          if (view) this.place(view.node, view.ctx, view.proposal, x + view.rect.x, y + view.rect.y);
+        }
         if (group.section.id >= 0) {
           this.fonts.set(group.section.id, group.header?.layout.font ?? group.footer?.layout.font ?? makeFont('system', textStyleSize('footnote', this.env.dynamicTypeSize), 400));
           if (Object.keys(texts).length > 0) this.chromeText.set(group.section.id, texts);
@@ -2297,6 +2515,10 @@ export class LayoutPass {
       for (const row of group.rows) {
         // Set the row chrome before placing so a navlink can merge its own keys.
         const chrome: Record<string, Rect> = { row: offset(row.row) };
+        // `.listRowSeparator(.hidden)`: flags the renderer turns into data
+        // attributes on the row element (its separator line is CSS).
+        if (row.separatorHidden?.top) chrome['separatorTopHidden'] = offset(row.row);
+        if (row.separatorHidden?.bottom) chrome['separatorBottomHidden'] = offset(row.row);
         if (row.badge) {
           chrome['badge'] = offset(row.badge.rect);
           if (row.node.id >= 0) this.chromeText.set(row.node.id, { badge: row.badge.layout });
@@ -2307,8 +2529,15 @@ export class LayoutPass {
           if (row.edit.listRow === row.node) chrome['editControl'] = offset(row.edit.control);
           else this.setChrome(row.edit.listRow, { editControl: offset(row.edit.control) });
         }
-        this.setChrome(row.node, chrome);
-        this.place(row.node, rowCtx, row.proposal, x + row.content.x, y + row.content.y);
+        const rowX = x + row.content.x;
+        const rowY = y + row.content.y;
+        // A row that is skipped keeps the chrome it set itself when it was
+        // placed (a link's chevron and label); only the list's keys are new.
+        const own = this.placedAlready(row.node, row.proposal, rowX, rowY) && row.node.id >= 0
+          ? this.chrome.get(row.node.id)
+          : undefined;
+        this.setChrome(row.node, own ? { ...own, ...chrome } : chrome);
+        this.place(row.node, rowCtx, row.proposal, rowX, rowY);
       }
     }
   }
@@ -2461,13 +2690,17 @@ export class LayoutPass {
     }
 
     // The inline title: centered, no wider than 56% of the bar, and clear of
-    // whatever the back button and the bar items occupy on either side.
+    // whatever the back button and the bar items occupy on either side. Its
+    // width is rounded up to whole pixels: snapping floors both edges, which
+    // takes up to a pixel off a fractional width at a fractional origin, and
+    // the title truncates with an ellipsis ("Animati…") when its box is any
+    // narrower than its text.
     if (!large && !principal) {
       const leftUsed = Math.max(back ? back.x + back.width - x : 0, leadingWidth > 0 ? leadingCursor - NAV_ITEM_SPACING - x : 0);
       const rightUsed = trailingWidth > 0 ? x + size.width - (trailingEdge + NAV_ITEM_SPACING) : 0;
       const side = Math.max(leftUsed, rightUsed) + 8;
       const available = Math.max(0, size.width - 2 * side);
-      const titleWidth = Math.min(this.measurer.measureWidth(title, titleFont), size.width * 0.56, available);
+      const titleWidth = Math.min(Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001), Math.floor(size.width * 0.56), Math.floor(available));
       chrome['title'] = { x: x + (size.width - titleWidth) / 2, y: rowY, width: titleWidth, height: NAV_BAR_HEIGHT };
     }
     this.setChrome(node, chrome);
@@ -3389,7 +3622,9 @@ export class LayoutPass {
   /**
    * A linear gauge: width = proposal (100 when none), a 4px bar below an
    * optional label row (label leading, current value label trailing, both in
-   * the `caption` text style) with a 4px gap. Circular styles render linear.
+   * 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.
    */
   private gaugePlan(node: LayoutNode, ctx: Context, p: Proposal): GaugePlan {
     return this.plan(node, p, () => {
@@ -3399,6 +3634,13 @@ export class LayoutPass {
       let index = 0;
       const label = node.props['hasLabel'] === true ? (node.children[index++] ?? null) : null;
       const current = node.props['hasCurrentValueLabel'] === true ? (node.children[index++] ?? null) : null;
+      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 proposal: Proposal = { width, height: null };
       const labelSize = label ? this.measure(label, labelCtx, proposal) : ZERO;
       const currentSize = current ? this.measure(current, labelCtx, proposal) : ZERO;
@@ -3410,6 +3652,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);
+      if (center) {
+        const { dx, dy } = alignIn(size, centerSize, 'center');
+        this.place(center, plan.labelCtx, { width: inner, height: inner }, x + dx, y + dy);
+      }
+      // 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);
+      this.setChrome(node, { ring: { x, y, width: size.width, height: size.height } });
+      return;
+    }
     const proposal: Proposal = { width: size.width, height: null };
     if (plan.label) {
       this.place(plan.label, plan.labelCtx, proposal, x, y + (plan.labelRow - plan.labelSize.height) / 2);
@@ -3464,13 +3718,13 @@ export class LayoutPass {
       const axisInput = (axis: unknown, fallback: string, views: ChartItemPlan[], key: 'x0' | 'y0'): ChartAxisInput | null => {
         const a = obj(axis);
         if (!a) return null;
-        const labels: { at: number; width: number }[] = [];
+        const labels: ChartAxisInput['labels'] = [];
         const rawLabels = Array.isArray(a['labels']) ? (a['labels'] as unknown[]) : [];
         for (const raw of rawLabels) {
           const label = obj(raw);
           if (!label) continue;
           const text = str(label['text']) ?? '';
-          labels.push({ at: num(label['at']) ?? 0, width: measureWidth(text) });
+          labels.push({ at: num(label['at']) ?? 0, width: measureWidth(text), leading: label['anchor'] === 'leading' });
         }
         return {
           position: (str(a['position']) ?? fallback) as ChartAxisInput['position'],

package/src/layout/index.ts

@@ -61,6 +61,8 @@ export type {
   Size,
   TextAlignment,
   TextLayout,
+  TextFragment,
+  RichTextLayout,
   TextMeasurer,
 } from './types';
 export { layoutTree, LayoutPass, type Context as LayoutContext } from './engine';
@@ -88,4 +90,4 @@ export {
   snapSliderValue,
   timeInputValue,
 } from './controls';
-export { wrapText, ELLIPSIS, type WrappedText } from './text';
+export { wrapText, wrapRuns, ELLIPSIS, type WrappedText, type WrappedRuns, type TextRunInput } from './text';