@swiftbrowser/web 0.17.3 → 0.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.17.3",
+  "version": "0.17.4",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/layout/engine.ts

@@ -162,6 +162,10 @@ 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;
+// iOS 26: `.largeTitle` toolbar items take the title's place 10 below the
+// bar's 44 row, in a row exactly their height: the content starts right
+// under them (measured in the iOS 26 simulator, Native's LargeTitleTests).
+const LARGE_TITLE_ITEM_TOP = 10;
 const SHEET_GRABBER_ROW = 20;
 const SHEET_GRABBER: Size = { width: 36, height: 5 };
 const SHEET_GRABBER_TOP = 8;
@@ -3390,8 +3394,9 @@ export class LayoutPass {
 
   /**
    * The navigation bar is the status bar plus a 44 row (plus 62 for a large
-   * title); a Phase 6 `searchfield` is a capsule floating above the bottom
-   * (iOS 26); `bottom` toolbars float their items on glass in a 48 row 28
+   * title, or 10 and the height of its `.largeTitle` items); a Phase 6
+   * `searchfield` is a capsule floating above the bottom (iOS 26); `bottom`
+   * toolbars float their items on glass in a 48 row 28
    * above the bottom (`placeBottomToolbars`); the content is proposed the
    * rest. Toolbar items are measured at their ideal size and laid out in iOS
    * 26 glass capsules in the 44 row: adjacent `leading` (or `trailing`)
@@ -3403,6 +3408,18 @@ export class LayoutPass {
    * inline title (`chrome.title`) is centered and truncated to the room the
    * bar items leave.
    */
+  /** The tallest `.largeTitle` toolbar item at its ideal size, or null when the screen has none (the text title shows). */
+  private largeTitleItemsHeight(toolbars: readonly LayoutNode[], cctx: Context, width: number): number | null {
+    let height: number | null = null;
+    for (const toolbar of toolbars) {
+      if (str(toolbar.props['placement']) !== 'largeTitle' || str(toolbar.props['spacer']) !== null) continue;
+      const itemCtx = this.childContext(toolbar, cctx);
+      const room: Proposal = { width: Math.max(0, width - 2 * NAV_ITEM_MARGIN), height: null };
+      for (const item of toolbar.children) height = Math.max(height ?? 0, this.measure(item, itemCtx, room).height);
+    }
+    return height;
+  }
+
   private placeNavScreen(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
     const { safeArea, screen, dynamicTypeSize } = this.env;
     const statusBar = y <= 0 ? safeArea.top : (cctx.barInset ?? 0);
@@ -3410,10 +3427,12 @@ export class LayoutPass {
     const depth = num(node.props['depth']) ?? 0;
     const large = displayMode === 'large' || (displayMode === 'automatic' && depth === 0);
     const barHeight = statusBar + NAV_BAR_HEIGHT + (!large && y <= 0 ? NAV_BAR_INLINE_BOTTOM : 0);
-    const largeHeight = large ? LARGE_TITLE_HEIGHT : 0;
     const parts = this.navScreenParts(node);
     const reachesBottom = y + size.height >= screen.height - EPSILON;
     const isSpacer = (t: LayoutNode): boolean => str(t.props['spacer']) !== null;
+    // `.largeTitle` items size the large title row; the text title is 62.
+    const titleItemsHeight = large ? this.largeTitleItemsHeight(parts.toolbars, cctx, size.width) : null;
+    const largeHeight = !large ? 0 : titleItemsHeight !== null ? LARGE_TITLE_ITEM_TOP + titleItemsHeight : LARGE_TITLE_HEIGHT;
     const bottomToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'bottom');
     const searchMargin = reachesBottom ? SEARCH_BOTTOM_MARGIN : SEARCH_BOTTOM_MARGIN_INSET;
     const bottomBarHeight = bottomToolbars.some((t) => !isSpacer(t))
@@ -3443,7 +3462,7 @@ export class LayoutPass {
       barRow: { x, y: y + statusBar, width: size.width, height: NAV_BAR_HEIGHT },
       content,
     };
-    if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: LARGE_TITLE_HEIGHT };
+    if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: largeHeight };
     if (parts.search) {
       const marginH = searchOnTop ? SEARCH_FIELD_MARGIN_H : SEARCH_BOTTOM_MARGIN_H;
       chrome['searchField'] = {
@@ -3711,9 +3730,11 @@ export class LayoutPass {
       const itemCtx = this.childContext(toolbar, cctx);
       const room: Proposal = { width: Math.max(0, row.width - 2 * NAV_ITEM_MARGIN), height: null };
       let cursor = row.x + NAV_ITEM_MARGIN;
+      // The items' band: the row below its 10 top, as tall as the tallest item.
+      const band = row.height - LARGE_TITLE_ITEM_TOP;
       for (const item of toolbar.children) {
         const itemSize = this.measure(item, itemCtx, room);
-        this.place(item, itemCtx, room, cursor, row.y + (row.height - itemSize.height) / 2);
+        this.place(item, itemCtx, room, cursor, row.y + LARGE_TITLE_ITEM_TOP + (band - itemSize.height) / 2);
         cursor += itemSize.width + NAV_ITEM_SPACING;
       }
       this.setFrame(toolbar, row.x, row.y, { width: row.width, height: row.height });

package/src/layoutDom.ts

@@ -944,6 +944,9 @@ function applyChrome(
       applyChartChrome(el, node, result, box);
       return;
     case 'listrow':
+      // A selectable or editable row is the list's row: the engine reads a
+      // badge through it and puts the badge's rect on it, so it draws it.
+      applyBadge(result, node, el, box);
       // Phase 8: the edit-mode control (selection circle / minus) at the
       // engine's `editControl` rect and the reorder grip at `reorderControl`;
       // hidden when the list is not editing.