@swiftbrowser/web 0.1.0

package/src/layoutDom.ts

@@ -0,0 +1,549 @@
+/**
+ * Applies a `LayoutResult` from the layout engine (src/layout) to the DOM.
+ *
+ * Every protocol element is `position: absolute`. The engine reports frames
+ * in screen coordinates; an element is positioned relative to the *origin* of
+ * its parent element's box, which is the parent's frame except for:
+ *
+ * - `scrollview`: children live in `.sb-scroll-content` (sized from
+ *   `contentSizes`, offset by `chrome.content`) so the browser scrolls it;
+ * - `list`: children live in `.sb-list-content`, sized from `contentSizes`;
+ * - `section`: rows live in `.sb-section-rows`, the inset card (`chrome.rows`);
+ * - `sheet`: the element itself is a full-screen layer (scrim); the engine's
+ *   frame is applied to its card and children are relative to the card;
+ * - `tabview`: tabs live in `.sb-tabview-content`; the tab bar (`chrome.bar`,
+ *   items at `chrome.item<i>`) is drawn on top. Tabs in `result.hidden` get
+ *   `data-sb-tab-hidden` (visibility hidden, inert) so their DOM and scroll
+ *   positions survive; their subtrees have no frames and are left alone.
+ *
+ * A list row's DOM box is the full-width row (`chrome.row`) rather than its
+ * content frame, so the row background, separator and hit area match iOS;
+ * `text`, `image` and `textfield` rows pad their content back into place.
+ *
+ * Phase 6: the items of a `menu` (every child but the first) are in
+ * `result.hidden` without frames; they get the `hidden` attribute so they
+ * never show inline (the renderer lists them in a popover). A list row whose
+ * `styled` carries a `badge` gets a `.sb-badge` span at `chrome.badge`; an
+ * inline `picker` positions its label/option rows; a navscreen's inline title
+ * is positioned at `chrome.title` so it truncates around the bar items.
+ *
+ * Phase 7: the candidates a `viewthatfits` did not choose are in
+ * `result.hidden` without frames and get the `hidden` attribute like menu
+ * items (and lose it when chosen later); a `navsplit` positions its
+ * separator hairline at `chrome.separator`.
+ */
+
+import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, TextLayout } from './layout';
+import { applyChartChrome } from './chartDom';
+
+export interface LayoutDomContext {
+  root: HTMLElement;
+  elements: Map<number, HTMLElement>;
+  nodes: Map<number, LayoutNode>;
+  parents: Map<number, number>;
+  /**
+   * Boxes applied by the previous layout, by id, relative to the origin of
+   * the parent element (the coordinates the inline `left`/`top` use). A child
+   * that moves only because its parent moved therefore reads as unchanged:
+   * it is neither repositioned nor animated, the parent is.
+   */
+  boxes: Map<number, Rect>;
+  /** Elements whose inline style was reset since the previous layout. */
+  dirty: Set<number>;
+  /** The environment the result was laid out for (screen size, safe areas). */
+  env: LayoutEnvironment;
+}
+
+/**
+ * An element whose DOM box moved or resized (`from` is null for a new
+ * element). Boxes are relative to the parent's origin, so the delta is the
+ * element's own motion and not its ancestors'.
+ */
+export interface BoxChange {
+  id: number;
+  el: HTMLElement;
+  kind: string;
+  from: Rect | null;
+  to: Rect;
+}
+
+const ROOT_ID = 0;
+const SWITCH_SIZE = { width: 51, height: 31 };
+const CHEVRON_SIZE = 14;
+const NAV_BAR_HEIGHT = 44;
+
+export function applyLayout(ctx: LayoutDomContext, result: LayoutResult): BoxChange[] {
+  const changes: BoxChange[] = [];
+  // Phase 9: an incremental result names what it touched; everything else
+  // kept its frame, chrome and box. A one-off result is visited whole.
+  const boxes = result.changed ? ctx.boxes : new Map<number, Rect>();
+  let ids: Iterable<number>;
+  if (result.changed) {
+    const visit = new Set(result.changed);
+    for (const id of ctx.dirty) visit.add(id);
+    ids = visit;
+  } else {
+    ids = result.frames.keys();
+  }
+
+  for (const id of ids) {
+    const frame = result.frames.get(id);
+    const el = ctx.elements.get(id);
+    const node = ctx.nodes.get(id);
+    if (!el || !node) continue;
+    if (!frame) {
+      boxes.delete(id);
+      continue;
+    }
+    const box = boxOf(ctx, result, node, frame);
+    const origin = node.kind === 'sheet' ? { x: 0, y: 0 } : originOf(ctx, result, ctx.parents.get(id) ?? ROOT_ID);
+    const relative = { x: box.x - origin.x, y: box.y - origin.y, width: box.width, height: box.height };
+    const previous = ctx.boxes.get(id) ?? null;
+    boxes.set(id, relative);
+    const moved = !previous || !sameRect(previous, relative);
+    if (moved) changes.push({ id, el, kind: node.kind, from: previous, to: relative });
+    if (moved || ctx.dirty.has(id)) {
+      if (node.kind === 'sheet') positionSheetCard(el, box);
+      else positionBox(el, box, origin);
+    }
+    // A former menu item that is laid out again (moved out of the menu), or a
+    // `viewthatfits` candidate chosen again, shows again.
+    if (el.hidden) el.hidden = false;
+    applyChrome(result, node, el, box, frame, scrollBottomInset(ctx, result, node, frame));
+    if (node.kind === 'tab') setTabHidden(el, result.hidden.has(id));
+  }
+
+  // Phase 6: menu items are hidden without a frame (tabs keep theirs, above);
+  // Phase 7: so are the unchosen candidates of a `viewthatfits`.
+  for (const id of result.hidden) {
+    const el = ctx.elements.get(id);
+    const node = ctx.nodes.get(id);
+    if (!el || !node || node.kind === 'tab' || result.frames.has(id)) continue;
+    if (!el.hidden) el.hidden = true;
+  }
+
+  ctx.boxes = boxes;
+  ctx.dirty.clear();
+  return changes;
+}
+
+const LIST_ROW_MIN_HEIGHT = 44;
+const LIST_ROW_VPAD = 11;
+
+/** Hide a non-selected tab without dropping its DOM (or its scroll positions). */
+export function setTabHidden(tab: HTMLElement, hidden: boolean): void {
+  tab.toggleAttribute('data-sb-tab-hidden', hidden);
+  tab.toggleAttribute('inert', hidden);
+  tab.setAttribute('aria-hidden', String(hidden));
+}
+
+/**
+ * The DOM box of an element: its full row inside a list, else its frame.
+ * Rows whose own chrome replaced the engine's `row` key (toggles, bordered
+ * buttons) get the row rebuilt from the card and the engine's row rule
+ * (content centered in max(44, content + 2 × 11)).
+ */
+export function boxOf(ctx: LayoutDomContext, result: LayoutResult, node: LayoutNode, frame: Rect): Rect {
+  const row = result.chrome.get(node.id)?.['row'];
+  if (row) return row;
+  if (node.kind === 'section') return frame;
+  const parentId = ctx.parents.get(node.id);
+  const parent = parentId !== undefined ? ctx.nodes.get(parentId) : undefined;
+  if (!parent || (parent.kind !== 'section' && parent.kind !== 'list')) return frame;
+  const card = parent.kind === 'section' ? result.chrome.get(parent.id)?.['rows'] : result.frames.get(parent.id);
+  if (!card) return frame;
+  const height = Math.max(LIST_ROW_MIN_HEIGHT, frame.height + 2 * LIST_ROW_VPAD);
+  return { x: card.x, y: frame.y - (height - frame.height) / 2, width: card.width, height };
+}
+
+/** Screen-coordinate origin that the children of `parentId` are positioned against. */
+export function originOf(ctx: LayoutDomContext, result: LayoutResult, parentId: number): { x: number; y: number } {
+  if (parentId === ROOT_ID) return { x: 0, y: 0 };
+  const node = ctx.nodes.get(parentId);
+  const frame = result.frames.get(parentId);
+  if (!node || !frame) return { x: 0, y: 0 };
+  const chrome = result.chrome.get(parentId);
+  switch (node.kind) {
+    case 'scrollview':
+      return chrome?.['content'] ?? frame;
+    case 'list':
+    case 'sheet':
+      return frame;
+    case 'section':
+      return chrome?.['rows'] ?? frame;
+    default:
+      return boxOf(ctx, result, node, frame);
+  }
+}
+
+/**
+ * iOS adds the bottom safe area as a content inset to scrolling views that
+ * reach the bottom of the screen, so the last row can scroll clear of the
+ * home indicator. Inside a sheet the card already ends above it (0).
+ */
+function scrollBottomInset(ctx: LayoutDomContext, result: LayoutResult, node: LayoutNode, frame: Rect): number {
+  if (node.kind !== 'list' && node.kind !== 'scrollview') return 0;
+  // Under a tab bar the engine reports the covered part of the frame; the
+  // bar (49 + safe area) replaces the plain safe-area inset.
+  const covered = result.chrome.get(node.id)?.['bottomInset'];
+  if (covered) return covered.height;
+  if (frame.y + frame.height < ctx.env.screen.height) return 0;
+  for (let id = ctx.parents.get(node.id); id !== undefined && id !== ROOT_ID; id = ctx.parents.get(id)) {
+    if (ctx.nodes.get(id)?.kind === 'sheet') return 0;
+  }
+  return ctx.env.safeArea.bottom;
+}
+
+function sameRect(a: Rect, b: Rect): boolean {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
+function positionBox(el: HTMLElement, box: Rect, origin: { x: number; y: number }): void {
+  const s = el.style;
+  s.left = `${box.x - origin.x}px`;
+  s.top = `${box.y - origin.y}px`;
+  s.width = `${box.width}px`;
+  s.height = `${box.height}px`;
+}
+
+/** Position a chrome node inside its element: `rect` is in screen coordinates. */
+function placeChrome(node: HTMLElement | null, rect: Rect | undefined, origin: Rect): void {
+  if (!node) return;
+  if (!rect) {
+    node.hidden = true;
+    return;
+  }
+  node.hidden = false;
+  const s = node.style;
+  s.position = 'absolute';
+  s.left = `${rect.x - origin.x}px`;
+  s.top = `${rect.y - origin.y}px`;
+  s.width = `${rect.width}px`;
+  s.height = `${rect.height}px`;
+}
+
+function positionSheetCard(sheet: HTMLElement, frame: Rect): void {
+  const card = sheet.querySelector<HTMLElement>(':scope > .sb-sheet-card');
+  if (!card) return;
+  const s = card.style;
+  s.left = `${frame.x}px`;
+  s.top = `${frame.y}px`;
+  s.width = `${frame.width}px`;
+  s.height = `${frame.height}px`;
+}
+
+function setFont(el: HTMLElement, font: ResolvedFont | undefined): void {
+  if (!font) return;
+  if (el.style.font !== font.css) el.style.font = font.css;
+}
+
+const TEXT_ALIGN: Record<string, string> = { leading: 'left', center: 'center', trailing: 'right' };
+
+/** Render the engine's exact lines into a text node (`white-space: pre` keeps them). */
+function setTextLayout(el: HTMLElement, layout: TextLayout): void {
+  setFont(el, layout.font);
+  const align = TEXT_ALIGN[layout.alignment] ?? 'left';
+  if (el.style.textAlign !== align) el.style.textAlign = align;
+  const content = layout.lines.join('\n');
+  if (el.textContent !== content) el.textContent = content;
+}
+
+/**
+ * Phase 6 `.badge`: the trailing text of a list row, drawn by the row element
+ * (a `styled` row, or a `navlink` whose label carries the badge) at
+ * `chrome.badge`; removed when the row has no badge.
+ */
+function applyBadge(result: LayoutResult, node: LayoutNode, el: HTMLElement, box: Rect): void {
+  const badgeRect = result.chrome.get(node.id)?.['badge'];
+  let badge = el.querySelector<HTMLElement>(':scope > .sb-badge');
+  if (!badgeRect) {
+    badge?.remove();
+    return;
+  }
+  if (!badge) {
+    badge = el.ownerDocument.createElement('span');
+    badge.className = 'sb-badge';
+    badge.setAttribute('aria-hidden', 'true');
+    el.append(badge);
+  }
+  placeChrome(badge, badgeRect, box);
+  const layout = result.chromeText.get(node.id)?.['badge'];
+  if (layout) {
+    setFont(badge, layout.font);
+    const text = layout.lines[0] ?? '';
+    if (badge.textContent !== text) badge.textContent = text;
+  }
+}
+
+/** For leaf rows: pad the content frame back into place inside the row box. */
+function padIntoFrame(el: HTMLElement, box: Rect, frame: Rect): void {
+  const s = el.style;
+  const left = frame.x - box.x;
+  const top = frame.y - box.y;
+  const right = box.x + box.width - (frame.x + frame.width);
+  const bottom = box.y + box.height - (frame.y + frame.height);
+  if (left || top || right || bottom) {
+    s.padding = `${Math.max(0, top)}px ${Math.max(0, right)}px ${Math.max(0, bottom)}px ${Math.max(0, left)}px`;
+  } else if (s.padding) {
+    s.padding = '';
+  }
+}
+
+function applyChrome(
+  result: LayoutResult,
+  node: LayoutNode,
+  el: HTMLElement,
+  box: Rect,
+  frame: Rect,
+  bottomInset: number,
+): void {
+  const chrome = result.chrome.get(node.id);
+  switch (node.kind) {
+    case 'styled':
+      applyBadge(result, node, el, box);
+      return;
+    case 'text': {
+      const layout = result.text.get(node.id);
+      if (layout) setTextLayout(el, layout);
+      padIntoFrame(el, box, frame);
+      return;
+    }
+    case 'image': {
+      const font = result.fonts.get(node.id);
+      if (font) {
+        const size = `${font.size}px`;
+        if (el.style.fontSize !== size) el.style.fontSize = size;
+      }
+      padIntoFrame(el, box, frame);
+      return;
+    }
+    case 'textfield':
+    case 'texteditor':
+      padIntoFrame(el, box, frame);
+      return;
+    // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.
+    case 'stepper':
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-stepper-control'), chrome?.['control'], box);
+      return;
+    case 'slider':
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-track'), chrome?.['track'], box);
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-fill'), chrome?.['fill'], box);
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-thumb'), chrome?.['thumb'], box);
+      return;
+    case 'datepicker':
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-datepicker-date'), chrome?.['date'], box);
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-datepicker-time'), chrome?.['time'], box);
+      return;
+    case 'alert': {
+      // Phase 8: the card(s), the centered title / message lines and the
+      // renderer-drawn OK; the button children have ordinary frames. Two
+      // buttons in one row get `data-sb-layout="row"` (a hairline between
+      // them); the appear animation scales the layer about the card's center.
+      const layer = el.querySelector<HTMLElement>(':scope > .sb-alert-layer');
+      const part = (cls: string): HTMLElement | null => layer?.querySelector<HTMLElement>(`:scope > .${cls}`) ?? null;
+      const texts = result.chromeText.get(node.id);
+      const card = chrome?.['card'];
+      placeChrome(part('sb-alert-card'), card, box);
+      placeChrome(part('sb-alert-cancel-card'), chrome?.['cancelCard'], box);
+      const title = part('sb-alert-title');
+      placeChrome(title, chrome?.['title'], box);
+      if (title && texts?.['title']) setTextLayout(title, texts['title']);
+      const message = part('sb-alert-message');
+      placeChrome(message, chrome?.['message'], box);
+      if (message && texts?.['message']) setTextLayout(message, texts['message']);
+      placeChrome(part('sb-alert-ok'), chrome?.['ok'], box);
+      el.toggleAttribute('data-sb-header', Boolean(chrome?.['title'] || chrome?.['message']));
+      const first = chrome?.['button0'];
+      const second = chrome?.['button1'];
+      el.dataset['sbLayout'] = first && second && first.y === second.y && !chrome?.['button2'] ? 'row' : 'stack';
+      if (layer && card) {
+        layer.style.transformOrigin = `${card.x + card.width / 2 - box.x}px ${card.y + card.height / 2 - box.y}px`;
+      }
+      return;
+    }
+    case 'toggle': {
+      const sw = el.querySelector<HTMLElement>(':scope > .sb-switch');
+      const rect = chrome?.['switch'] ?? {
+        x: frame.x + frame.width - SWITCH_SIZE.width,
+        y: frame.y + (frame.height - SWITCH_SIZE.height) / 2,
+        ...SWITCH_SIZE,
+      };
+      placeChrome(sw, rect, box);
+      return;
+    }
+    case 'navlink': {
+      // A link row's badge sits on its label (`NavigationLink { row.badge(n) }`).
+      applyBadge(result, node, el, box);
+      const chevron = el.querySelector<HTMLElement>(':scope > .sb-navlink-chevron');
+      const rect = chrome?.['chevron'];
+      if (chevron) {
+        if (rect) {
+          chevron.removeAttribute('hidden');
+          placeChrome(chevron, {
+            x: rect.x + (rect.width - CHEVRON_SIZE) / 2,
+            y: rect.y + (rect.height - CHEVRON_SIZE) / 2,
+            width: CHEVRON_SIZE,
+            height: CHEVRON_SIZE,
+          }, box);
+        } else {
+          chevron.toggleAttribute('hidden', true); // an SVG: the `hidden` property is not an attribute
+        }
+      }
+      return;
+    }
+    case 'section': {
+      const rows = el.querySelector<HTMLElement>(':scope > .sb-section-rows');
+      const header = el.querySelector<HTMLElement>(':scope > .sb-section-header');
+      const footer = el.querySelector<HTMLElement>(':scope > .sb-section-footer');
+      const texts = result.chromeText.get(node.id);
+      if (chrome?.['rows']) placeChrome(rows, chrome['rows'], frame);
+      else if (rows) {
+        // Outside a list the section is a plain container.
+        rows.hidden = false;
+        rows.removeAttribute('style');
+      }
+      placeChrome(header, chrome?.['header'], frame);
+      placeChrome(footer, chrome?.['footer'], frame);
+      if (header && texts?.['header']) setTextLayout(header, texts['header']);
+      if (footer && texts?.['footer']) {
+        // The engine measures footers upper-cased like headers; iOS footers
+        // keep their case, so draw the prop text in the engine's font and
+        // rect and let it wrap there.
+        setFont(footer, texts['footer'].font);
+        footer.style.textAlign = 'left';
+        footer.style.whiteSpace = 'pre-wrap';
+        const original = typeof node.props['footer'] === 'string' ? node.props['footer'] : texts['footer'].lines.join('\n');
+        if (footer.textContent !== original) footer.textContent = original;
+      }
+      return;
+    }
+    case 'list': {
+      const content = el.querySelector<HTMLElement>(':scope > .sb-list-content');
+      const size = result.contentSizes.get(node.id);
+      if (content && size) {
+        content.style.width = `${size.width}px`;
+        // Extra scrollable space at the end (the engine's frames are unchanged).
+        content.style.height = `${size.height + bottomInset}px`;
+      }
+      return;
+    }
+    case 'scrollview': {
+      const content = el.querySelector<HTMLElement>(':scope > .sb-scroll-content');
+      const size = result.contentSizes.get(node.id);
+      const rect = chrome?.['content'];
+      if (content && size) {
+        const s = content.style;
+        const axes = String(node.props['axes'] ?? 'vertical');
+        s.width = `${size.width}px`;
+        s.height = `${size.height + (axes === 'horizontal' ? 0 : bottomInset)}px`;
+        s.marginLeft = `${rect ? rect.x - frame.x : 0}px`;
+        s.marginTop = `${rect ? rect.y - frame.y : 0}px`;
+      }
+      return;
+    }
+    case 'navscreen': {
+      const bar = el.querySelector<HTMLElement>(':scope > .sb-navbar');
+      const largeTitle = el.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-navbar-large-title');
+      const inlineTitle = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-title');
+      const texts = result.chromeText.get(node.id);
+      const barRect = chrome?.['bar'];
+      if (bar && barRect) {
+        placeChrome(bar, barRect, frame);
+        // The 44px bar row sits under the status bar portion of the rect.
+        bar.style.paddingTop = `${Math.max(0, barRect.height - NAV_BAR_HEIGHT)}px`;
+      }
+      const largeRect = chrome?.['largeTitle'];
+      if (largeTitle) {
+        if (largeRect) {
+          placeChrome(largeTitle, largeRect, frame);
+          if (texts?.['largeTitle']) {
+            setFont(largeTitle, texts['largeTitle'].font);
+            const line = texts['largeTitle'].lines.join('\n');
+            if (largeTitle.textContent !== line) largeTitle.textContent = line;
+          }
+        } else {
+          largeTitle.hidden = true;
+        }
+      }
+      if (inlineTitle) {
+        // Phase 6: the engine centers the inline title in the room the back
+        // button and the toolbar items leave (no rect: large title or a
+        // `principal` toolbar replaces it).
+        const titleRect = chrome?.['title'];
+        placeChrome(inlineTitle, titleRect, frame);
+        if (titleRect) {
+          if (texts?.['title']) setFont(inlineTitle, texts['title'].font);
+          const lineHeight = `${titleRect.height}px`;
+          if (inlineTitle.style.lineHeight !== lineHeight) inlineTitle.style.lineHeight = lineHeight;
+        }
+      }
+      const back = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-back');
+      const backLabel = back?.querySelector<HTMLElement>('.sb-navbar-back-label');
+      const backRect = chrome?.['back'];
+      if (back && backLabel && backRect && texts?.['back']) {
+        const text = texts['back'].lines[0] ?? '';
+        back.style.maxWidth = `${backRect.width}px`;
+        backLabel.dataset['sbLayoutLabel'] = text;
+        if (backLabel.textContent !== text) backLabel.textContent = text;
+        setFont(back, texts['back'].font);
+      }
+      return;
+    }
+    case 'sheet': {
+      const card = el.querySelector<HTMLElement>(':scope > .sb-sheet-card');
+      const grabber = card?.querySelector<HTMLElement>(':scope > .sb-sheet-grabber') ?? null;
+      placeChrome(grabber, chrome?.['grabber'], frame);
+      return;
+    }
+    case 'tabview': {
+      const bar = el.querySelector<HTMLElement>(':scope > .sb-tabbar');
+      const barRect = chrome?.['bar'];
+      if (!bar || !barRect) return;
+      placeChrome(bar, barRect, box);
+      // Items are the 49px row at the top of the bar; the rest is the safe area.
+      const items = Array.from(bar.children) as HTMLElement[];
+      items.forEach((item, i) => placeChrome(item, chrome?.[`item${i}`], barRect));
+      return;
+    }
+    case 'navsplit': {
+      // Phase 7: the hairline between the two columns.
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navsplit-separator'), chrome?.['separator'], box);
+      return;
+    }
+    case 'gauge': {
+      // The track and fill are chrome, positioned from the element's own box.
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-gauge-track'), chrome?.['track'], box);
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-gauge-fill'), chrome?.['fill'], box);
+      return;
+    }
+    case 'chart':
+      // Phase 7: the plot SVG, ticks, text labels and legend are rebuilt
+      // from the props and the engine's `plot` / label / legend rects.
+      applyChartChrome(el, node, result, box);
+      return;
+    case 'listrow':
+      // Phase 8: the edit-mode control (selection circle / minus) at the
+      // engine's `editControl` rect; hidden when the list is not editing.
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-listrow-control'), chrome?.['editControl'], box);
+      return;
+    case 'picker': {
+      setFont(el, result.fonts.get(node.id));
+      if (node.props['style'] === 'segmented') {
+        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-segment-track'), frame, box);
+        const segments = el.querySelectorAll<HTMLElement>(':scope > .sb-segment');
+        segments.forEach((segment, i) => placeChrome(segment, chrome?.[`segment${i}`], box));
+      } else if (node.props['style'] === 'inline') {
+        // Phase 6: a label row (when the label is non-empty) and one 44px row per option.
+        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-inline-label'), chrome?.['label'], box);
+        const options = el.querySelectorAll<HTMLElement>(':scope > .sb-picker-option');
+        options.forEach((option, i) => placeChrome(option, chrome?.[`option${i}`], box));
+      } else {
+        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-label'), chrome?.['label'], box);
+        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-value'), chrome?.['value'], box);
+      }
+      return;
+    }
+    default:
+      return;
+  }
+}

package/src/layoutEvents.ts

@@ -0,0 +1,110 @@
+/**
+ * Phase 6: `layout` events (docs/phase6/layout-containers.md).
+ *
+ * A `layout` element is a custom SwiftUI `Layout` evaluated on the Swift side
+ * with host-measured subviews. After every layout pass the engine leaves, per
+ * `layout` element, the proposal it was placed with and its children's min /
+ * ideal / max sizes (`LayoutResult.layouts`). `LayoutReporter` turns those
+ * into `layout` events and sends one only when the record differs from the
+ * last one sent for that id, so Swift's answer (an `update` of the element's
+ * `size` and `frames`) can trigger another pass without looping forever.
+ *
+ * DOM-free so it can be unit-tested next to the engine.
+ */
+
+import type { LayoutRecord, LayoutResult, Size } from './layout';
+import type { Dimension, ElementId, LayoutChildMeasurement, LayoutEvent, LayoutProposal } from './protocol';
+
+/** Round to 2 decimals; `Infinity` (an unbounded axis) serializes as `"infinity"`. */
+export function layoutDimension(value: number): Dimension {
+  if (!Number.isFinite(value)) return value > 0 ? 'infinity' : 0;
+  return Math.round(value * 100) / 100;
+}
+
+function layoutSize(size: Size): { width: Dimension; height: Dimension } {
+  return { width: layoutDimension(size.width), height: layoutDimension(size.height) };
+}
+
+/** The `layout` event for an engine record. */
+export function layoutEventFor(id: ElementId, record: LayoutRecord): LayoutEvent {
+  const axis = (value: number | null): LayoutProposal['width'] => (value === null ? null : layoutDimension(value));
+  const children: LayoutChildMeasurement[] = record.children.map((child) => ({
+    min: layoutSize(child.min),
+    ideal: layoutSize(child.ideal),
+    max: layoutSize(child.max),
+  }));
+  return {
+    type: 'layout',
+    id,
+    proposal: { width: axis(record.proposal.width), height: axis(record.proposal.height) },
+    children,
+  };
+}
+
+/** How long (ms) the cycle guard remembers a record sent for an element. */
+export const CYCLE_WINDOW_MS = 1000;
+
+interface SentRecord {
+  json: string;
+  at: number;
+}
+
+export class LayoutReporter {
+  /** The last event sent for every `layout` element. */
+  readonly reported = new Map<ElementId, LayoutEvent>();
+  /** The records sent per element within the cycle window (newest last). */
+  private readonly history = new Map<ElementId, SentRecord[]>();
+  /** Elements whose records cycled; each is warned about once. */
+  private readonly cycled = new Set<ElementId>();
+
+  constructor(private readonly now: () => number = () => performance.now()) {}
+
+  /**
+   * The events to send for a pass: one per `layout` element whose record
+   * differs from the last one sent. Elements without a frame (inside a hidden
+   * tab) are skipped, like `geometry`.
+   */
+  collect(result: LayoutResult): LayoutEvent[] {
+    const events: LayoutEvent[] = [];
+    const at = this.now();
+    for (const [id, record] of result.layouts) {
+      if (!result.frames.has(id)) continue;
+      const event = layoutEventFor(id, record);
+      const json = JSON.stringify(event);
+      const last = this.reported.get(id);
+      if (last && JSON.stringify(last) === json) continue;
+      // Cycle guard: a record already sent within the window means the host
+      // and Swift are trading answers (nested layouts measuring each other).
+      // Stop re-asking until the window passes; Swift's latest answer stands.
+      // The window keeps a legitimate repeat (data that changes back) from
+      // being mistaken for a cycle and frozen for good.
+      const recent = (this.history.get(id) ?? []).filter((r) => at - r.at < CYCLE_WINDOW_MS);
+      if (recent.some((r) => r.json === json)) {
+        this.history.set(id, recent);
+        if (!this.cycled.has(id)) {
+          this.cycled.add(id);
+          console.warn(`[sb] layout ${id}: measurements cycle; keeping the last answer`);
+        }
+        continue;
+      }
+      recent.push({ json, at });
+      this.history.set(id, recent);
+      this.reported.set(id, event);
+      events.push(event);
+    }
+    return events;
+  }
+
+  /** The element was removed: a re-created element with the same id reports afresh. */
+  forget(id: ElementId): void {
+    this.reported.delete(id);
+    this.history.delete(id);
+    this.cycled.delete(id);
+  }
+
+  clear(): void {
+    this.reported.clear();
+    this.history.clear();
+    this.cycled.clear();
+  }
+}