@swiftbrowser/web 0.4.0 → 0.5.1

package/README.md

@@ -35,6 +35,7 @@ src/imageOps.ts     Core Image's steps (sepia, crystallize, edges, blur, pixella
 src/hostContent.ts  `host` elements: the registry of the page's own DOM elements the renderer adopts (docs/ops-protocol.md, "Host elements")
 src/pointerEffects.ts Hover events, tooltips, cursors and symbol effects for page-side producers; frame reports' safe-area overlap (docs/ops-protocol.md, "Pointer, effects, matched geometry and frames on screen")
 src/styles.css      iOS tokens, device frame, device mode, element styles, host boxes and islands
+src/page.css        The app page around the frame: its toolbar, stage, error banner, device-mode chrome
 node/               Node side: apps.ts (the AppSpec registry type), config.ts (Vite config from specs),
                     examples.ts (Examples/* as specs, build-wasm.sh runner, descriptions),
                     index.ts (createDevServer / buildSite, the package entry); compiled to node/dist/

package/app/index.html

@@ -24,6 +24,7 @@
     <link rel="icon" href="/icon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="stylesheet" href="/src/styles.css" />
+    <link rel="stylesheet" href="/src/page.css" />
     <script>
       // Decide frame vs device mode before the first paint so a phone never
       // flashes the fake bezel. src/deviceMode.ts holds the same rule and is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "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": {
@@ -16,6 +16,7 @@
       "default": "./node/dist/node/index.js"
     },
     "./src/styles.css": "./src/styles.css",
+    "./src/page.css": "./src/page.css",
     "./src/*": "./src/*.ts"
   },
   "files": [

package/src/largeTitle.ts

@@ -19,7 +19,7 @@
  */
 
 import type { Rect } from './layout';
-import { setValue } from './scrollEdge';
+import { edgeStrength, setProperty, setValue } from './scrollEdge';
 
 /** The scroll offset past which the title has gone under the bar. */
 const COLLAPSE_OFFSET = 44;
@@ -65,6 +65,7 @@ export function bindScrollUnderBar(scroller: HTMLElement, frame: Rect, topInset:
         delete screen.dataset['sbScrolled'];
         delete screen.dataset['sbCollapsed'];
         delete screen.dataset['sbEdgeTop'];
+        screen.style.removeProperty('--sb-edge-top');
       }
     }
     if (screen) releaseTitle(screen, scroller);
@@ -106,6 +107,8 @@ export function syncScrollUnderBar(scroller: HTMLElement): void {
   if (!screen) return;
   const offset = scroller.scrollTop;
   setFlag(screen, 'sbScrolled', offset > 0);
+  // The edge effect's strength ramps up over the first `EDGE_RAMP` px.
+  setProperty(screen, '--sb-edge-top', edgeStrength(offset));
   const title = titles.get(screen);
   const carries = title !== undefined && title.parentElement === scroller;
   setFlag(screen, 'sbCollapsed', carries && offset > COLLAPSE_OFFSET);

package/src/layout/engine.ts

@@ -200,10 +200,13 @@ const LIST_SECTION_GAP = 107 / 3;
 const LIST_SECTION_GAP_AFTER_FOOTER = 74 / 3;
 const LIST_CHEVRON_WIDTH = 20;
 // Phase 4.
-// iOS 26: the tab bar is a 62-tall glass capsule floating 21 from the sides
-// and 22 above the bottom edge (8 when the tab view ends above the screen
-// bottom), its items in equal slots inside a 4 inset.
+// iOS 26: the tab bar is a 62-tall glass capsule floating 22 above the bottom
+// edge (8 when the tab view ends above the screen bottom), its items in equal
+// slots inside a 4 inset. It is as wide as its tabs (268/3 each, measured in
+// the 26.2 simulator: two tabs make a 186.67 capsule), centered, and at most
+// the width less 21 either side (four tabs fill that on an iPhone).
 const TAB_BAR_HEIGHT = 62;
+const TAB_BAR_ITEM_WIDTH = 268 / 3;
 const TAB_BAR_MARGIN_H = 21;
 const TAB_BAR_MARGIN_BOTTOM = 22;
 const TAB_BAR_MARGIN_BOTTOM_INSET = 8;
@@ -243,7 +246,18 @@ const NAV_ITEM_MARGIN = 16;
 const NAV_GLASS_SIZE = 44;
 const NAV_GLASS_PAD_H = 12;
 const NAV_GROUP_SPACING = 8;
-const BOTTOM_BAR_HEIGHT = 49;
+// iOS 26 (measured in the 26.2 simulator, Examples/Fidelity `bottombar*`): a
+// bottom toolbar's items float on Liquid Glass in a 48 row 28 above the
+// screen bottom (as the search field does) and 28 in from the sides.
+// Consecutive items share a capsule: an icon takes a 50 slot, text its width
+// and 18 either side, 6 between slots; a lone icon is a 48 circle.
+const BOTTOM_GLASS_HEIGHT = 48;
+const BOTTOM_GLASS_MARGIN_H = 28;
+const BOTTOM_ICON_SLOT = 50;
+const BOTTOM_TEXT_PAD_H = 18;
+const BOTTOM_ITEM_GAP = 6;
+/** A fixed `ToolbarSpacer` between two bottom groups. */
+const BOTTOM_FIXED_SPACER = 8;
 const SEARCH_FIELD_HEIGHT = 36;
 const SEARCH_FIELD_MARGIN_H = 16;
 // iOS 26: a navigation stack's search field is a 48-tall glass capsule
@@ -256,6 +270,8 @@ const SEARCH_FIELD_DEFAULT_WIDTH = 200;
 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;
+/** From this root width a window is regular (an iPad, a desktop browser), as `@swiftbrowser/react`'s size class. */
+const REGULAR_WIDTH = 700;
 /** The sidebar never takes more than this share of the split view's width. */
 const NAVSPLIT_SIDEBAR_MAX_FRACTION = 0.4;
 const NAVSPLIT_SEPARATOR_WIDTH = 1;
@@ -568,7 +584,7 @@ interface GridItemSpec {
   alignment: string | null;
 }
 
-/** `columns` of a `lazyvgrid` (untrusted JSON); an empty list is one flexible column. */
+/** `columns` of a `lazyvgrid` or `rows` of a `lazyhgrid` (untrusted JSON); an empty list is one flexible track. */
 function readGridItems(value: unknown): GridItemSpec[] {
   const items: GridItemSpec[] = [];
   if (Array.isArray(value)) {
@@ -1526,6 +1542,7 @@ export class LayoutPass {
       case 'grid':
         return this.gridPlan(node, ctx, p).size;
       case 'lazyvgrid':
+      case 'lazyhgrid':
         return this.lazyGridPlan(node, ctx, p).size;
       case 'gauge':
         return this.gaugePlan(node, ctx, p).size;
@@ -2778,6 +2795,7 @@ export class LayoutPass {
         this.placeGrid(node, ctx, p, x, y);
         return;
       case 'lazyvgrid':
+      case 'lazyhgrid':
         this.placeLazyGrid(node, ctx, p, x, y);
         return;
       case 'gauge':
@@ -3000,13 +3018,14 @@ 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); a `bottom` toolbar is a 49 bar plus the bottom safe area; the
-   * content is proposed the rest. Toolbar
-   * items are measured at their ideal size and laid out in iOS 26 glass
-   * capsules (44-tall slots, groups 8 apart) in the 44 row (`leading` after the back button, `trailing` 16 from the
-   * trailing edge, `principal` centered in place of the title) or spread
-   * evenly across the bottom bar. The inline title (`chrome.title`) is
-   * centered and truncated to the room the bar items leave.
+   * (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 (44-tall slots, groups 8 apart) in the 44 row
+   * (`leading` after the back button, `trailing` 16 from the trailing edge,
+   * `principal` centered in place of the title). A `ToolbarSpacer` (an empty
+   * toolbar with `spacer`) only separates groups there. The inline title
+   * (`chrome.title`) is centered and truncated to the room the bar items leave.
    */
   private placeNavScreen(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
     const { safeArea, screen, dynamicTypeSize } = this.env;
@@ -3018,10 +3037,12 @@ export class LayoutPass {
     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;
     const bottomToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'bottom');
-    const bottomBarHeight =
-      bottomToolbars.length > 0 ? Math.min(size.height, BOTTOM_BAR_HEIGHT + (reachesBottom ? safeArea.bottom : 0)) : 0;
     const searchMargin = reachesBottom ? SEARCH_BOTTOM_MARGIN : SEARCH_BOTTOM_MARGIN_INSET;
+    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;
     const content: Rect = {
@@ -3063,7 +3084,15 @@ export class LayoutPass {
       slots: number[] | null;
       total: number;
     }
-    const groups: Group[] = parts.toolbars.map((toolbar) => {
+    // The navigation bar's groups; spacers there only separate them (the
+    // groups are 8 apart anyway) and draw nothing.
+    for (const spacer of parts.toolbars.filter(isSpacer)) this.hide(spacer, node);
+    const barToolbars = parts.toolbars.filter((t) => {
+      const placement = str(t.props['placement']);
+      return placement !== 'bottom' && placement !== 'secondary' && !isSpacer(t);
+    });
+    const secondaryToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'secondary' && !isSpacer(t));
+    const groups: Group[] = barToolbars.map((toolbar) => {
       const itemCtx = this.childContext(toolbar, cctx);
       const sizes = toolbar.children.map((item) => this.measure(item, itemCtx, { width: null, height: null }));
       const placement = str(toolbar.props['placement']) ?? 'trailing';
@@ -3080,6 +3109,53 @@ export class LayoutPass {
     const trailingWidth = groupWidth('trailing');
     const principal = groups.some((g) => g.placement === 'principal');
 
+    // `.secondaryAction` items (placement `secondary`), as iOS treats them:
+    // collapsed into the More button (chrome `more`: an ellipsis in a glass
+    // circle at the trailing end, whose menu lists them). A screen with the
+    // editor toolbar role in a regular width shows them inline before the
+    // trailing items, as iPadOS does, clear of the title, and collapses only
+    // those that do not fit.
+    interface SecondaryItem {
+      toolbar: LayoutNode;
+      item: LayoutNode;
+      size: Size;
+      slot: number;
+    }
+    const secondaryItems: SecondaryItem[] = secondaryToolbars.flatMap((toolbar) => {
+      const itemCtx = this.childContext(toolbar, cctx);
+      return toolbar.children.map((item) => {
+        const itemSize = this.measure(item, itemCtx, { width: null, height: null });
+        return { toolbar, item, size: itemSize, slot: Math.max(NAV_GLASS_SIZE, itemSize.width + 2 * NAV_GLASS_PAD_H) };
+      });
+    });
+    // Items of one toolbar share its glass capsule; separate toolbars sit 8 apart, as the trailing groups do.
+    const secondaryGap = (previous: SecondaryItem | undefined, entry: SecondaryItem): number =>
+      previous && previous.toolbar !== entry.toolbar ? NAV_GROUP_SPACING : 0;
+    const secondaryWidth = (entries: readonly SecondaryItem[]): number =>
+      entries.reduce((sum, entry, i) => sum + secondaryGap(entries[i - 1], entry) + entry.slot, 0);
+    let inlineSecondary: SecondaryItem[] = [];
+    if (secondaryItems.length > 0 && str(node.props['toolbarRole']) === 'editor' && screen.width >= REGULAR_WIDTH) {
+      // The room between the title (centered, at its width up to 56% of the
+      // bar) and the trailing groups; the More button takes a slot of it
+      // once anything collapses.
+      const titleWidth = principal ? 0 : Math.min(this.measurer.measureWidth(title, titleFont), size.width * 0.56);
+      const roomStart = x + (size.width + titleWidth) / 2 + NAV_GROUP_SPACING;
+      const roomEnd = x + size.width - NAV_ITEM_MARGIN - trailingWidth;
+      const fitting = (room: number): SecondaryItem[] => {
+        const out: SecondaryItem[] = [];
+        let used = 0;
+        for (const entry of secondaryItems) {
+          const width = secondaryGap(out[out.length - 1], entry) + entry.slot;
+          if (used + width > room) break;
+          used += width;
+          out.push(entry);
+        }
+        return out;
+      };
+      inlineSecondary = secondaryWidth(secondaryItems) <= roomEnd - roomStart ? secondaryItems : fitting(roomEnd - roomStart - NAV_GLASS_SIZE - NAV_GROUP_SPACING);
+    }
+    const collapsedSecondary = secondaryItems.filter((entry) => !inlineSecondary.includes(entry));
+
     // Back button, iOS 26: the chevron alone in a glass circle (the previous
     // title no longer shows).
     const backLabel = '';
@@ -3092,6 +3168,11 @@ export class LayoutPass {
     const back = chrome['back'];
     let leadingCursor = back ? back.x + back.width + NAV_GROUP_SPACING : leadingStart;
     let trailingEdge = x + size.width - NAV_ITEM_MARGIN;
+    // The More button is the trailing-most item.
+    if (collapsedSecondary.length > 0) {
+      chrome['more'] = { x: trailingEdge - NAV_GLASS_SIZE, y: rowY, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE };
+      trailingEdge -= NAV_GLASS_SIZE + NAV_GROUP_SPACING;
+    }
     const placeGroup = (group: Group, startX: number, top: number, rowHeight: number, spacing: number): void => {
       const itemCtx = this.childContext(group.toolbar, cctx);
       let cursor = startX;
@@ -3118,19 +3199,6 @@ export class LayoutPass {
           placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, NAV_ITEM_SPACING);
           break;
         }
-        case 'bottom': {
-          const bar = chrome['bottomBar'] as Rect;
-          this.setFrame(group.toolbar, bar.x, bar.y, bar);
-          const n = group.sizes.length;
-          const inner = Math.max(0, size.width - 2 * NAV_ITEM_MARGIN);
-          const itemsWidth = group.total - Math.max(0, n - 1) * NAV_ITEM_SPACING;
-          if (n === 1) placeGroup(group, x + (size.width - itemsWidth) / 2, bar.y, BOTTOM_BAR_HEIGHT, 0);
-          else if (n > 1) {
-            const gap = Math.max(NAV_ITEM_SPACING, (inner - itemsWidth) / (n - 1));
-            placeGroup(group, x + NAV_ITEM_MARGIN, bar.y, BOTTOM_BAR_HEIGHT, gap);
-          }
-          break;
-        }
         default: {
           const startX = trailingEdge - group.total;
           this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
@@ -3140,6 +3208,32 @@ export class LayoutPass {
         }
       }
     }
+    // The inline secondary items, right-aligned before the trailing groups,
+    // each toolbar framed around its own; the collapsed ones are hidden (the
+    // renderer lists the items without a frame in the More menu).
+    if (inlineSecondary.length > 0) {
+      const total = secondaryWidth(inlineSecondary);
+      let cursor = trailingEdge - total;
+      const extents = new Map<LayoutNode, { start: number; end: number }>();
+      for (const [i, entry] of inlineSecondary.entries()) {
+        cursor += secondaryGap(inlineSecondary[i - 1], entry);
+        const itemCtx = this.childContext(entry.toolbar, cctx);
+        this.place(entry.item, itemCtx, { width: null, height: null }, cursor + (entry.slot - entry.size.width) / 2, rowY + (NAV_BAR_HEIGHT - entry.size.height) / 2);
+        const extent = extents.get(entry.toolbar);
+        extents.set(entry.toolbar, { start: extent?.start ?? cursor, end: cursor + entry.slot });
+        cursor += entry.slot;
+      }
+      for (const [toolbar, extent] of extents) this.setFrame(toolbar, extent.start, rowY, { width: extent.end - extent.start, height: NAV_BAR_HEIGHT });
+      trailingEdge -= total + NAV_GROUP_SPACING;
+    }
+    for (const toolbar of secondaryToolbars) {
+      const items = toolbar.children;
+      if (!inlineSecondary.some((entry) => entry.toolbar === toolbar)) this.hide(toolbar, node);
+      else for (const item of items) if (collapsedSecondary.some((entry) => entry.item === item)) this.hide(item, node);
+    }
+    if (bottomBarHeight > 0) {
+      this.placeBottomToolbars(bottomToolbars, cctx, chrome, x, y + size.height - bottomBarHeight, size.width);
+    }
     if (parts.search) {
       // The field is the whole capsule (its own measure is a 36pt field).
       const field = chrome['searchField'] as Rect;
@@ -3166,7 +3260,8 @@ export class LayoutPass {
         leadingWidth > 0 ? leadingCursor - NAV_GROUP_SPACING - x : 0,
         cctx.barLeading ? leadingStart - NAV_GROUP_SPACING - x : 0,
       );
-      const rightUsed = trailingWidth > 0 ? x + size.width - (trailingEdge + NAV_GROUP_SPACING) : 0;
+      const trailingUsed = trailingWidth > 0 || chrome['more'] !== undefined || inlineSecondary.length > 0;
+      const rightUsed = trailingUsed ? x + size.width - (trailingEdge + NAV_GROUP_SPACING) : 0;
       const side = Math.max(leftUsed, rightUsed) + 8;
       const available = Math.max(0, size.width - 2 * side);
       const titleWidth = Math.min(Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001), Math.floor(size.width * 0.56), Math.floor(available));
@@ -3244,9 +3339,101 @@ export class LayoutPass {
     this.place(child, contentCtx, proposal, content.x + dx, content.y + dy);
   }
 
+  /**
+   * iOS 26's bottom toolbar: the items of the `bottom` toolbars, in order,
+   * float on Liquid Glass in a 48 row at the top of the bottom bar's band
+   * (`top`), 28 in from the sides. Consecutive items share a capsule; a
+   * `ToolbarSpacer` (an empty toolbar with `spacer`) ends one. Flexible
+   * spacers share the room the groups leave (with none the row is centered)
+   * and fixed ones are 8 wide. An icon takes a 50 slot (a lone one is a 48
+   * circle), text its width and 18 either side, 6 between slots; each item
+   * is centered in its slot. The capsules are the screen's chrome
+   * `bottomGlass0` … (drawn under the items); each toolbar's frame spans its
+   * items.
+   */
+  private placeBottomToolbars(
+    toolbars: LayoutNode[],
+    cctx: Context,
+    chrome: Record<string, Rect>,
+    x: number,
+    top: number,
+    width: number,
+  ): void {
+    interface Item {
+      node: LayoutNode;
+      toolbar: LayoutNode;
+      size: Size;
+      slot: number;
+    }
+    type Token = { kind: 'group'; items: Item[]; width: number } | { kind: 'flexible' } | { kind: 'fixed' };
+    const tokens: Token[] = [];
+    let open: Item[] = [];
+    const close = (): void => {
+      if (open.length === 0) return;
+      const icon = (item: Item): boolean => item.size.width < NAV_GLASS_SIZE;
+      const lone = open.length === 1 && icon(open[0] as Item);
+      if (lone) (open[0] as Item).slot = BOTTOM_GLASS_HEIGHT;
+      const slots = open.reduce((sum, item) => sum + item.slot, 0);
+      tokens.push({ kind: 'group', items: open, width: slots + (open.length - 1) * BOTTOM_ITEM_GAP });
+      open = [];
+    };
+    for (const toolbar of toolbars) {
+      const spacer = str(toolbar.props['spacer']);
+      if (spacer !== null) {
+        close();
+        tokens.push({ kind: spacer === 'fixed' ? 'fixed' : 'flexible' });
+        continue;
+      }
+      const itemCtx = this.childContext(toolbar, cctx);
+      for (const node of toolbar.children) {
+        const size = this.measure(node, itemCtx, { width: null, height: null });
+        const slot = size.width < NAV_GLASS_SIZE ? BOTTOM_ICON_SLOT : size.width + 2 * BOTTOM_TEXT_PAD_H;
+        open.push({ node, toolbar, size, slot });
+      }
+    }
+    close();
+    const inner = Math.max(0, width - 2 * BOTTOM_GLASS_MARGIN_H);
+    let used = 0;
+    let flexible = 0;
+    for (const token of tokens) {
+      if (token.kind === 'group') used += token.width;
+      else if (token.kind === 'fixed') used += BOTTOM_FIXED_SPACER;
+      else flexible += 1;
+    }
+    const share = flexible > 0 ? Math.max(0, inner - used) / flexible : 0;
+    let cursor = flexible > 0 ? x + BOTTOM_GLASS_MARGIN_H : x + (width - used) / 2;
+    const spans = new Map<LayoutNode, { start: number; end: number }>();
+    let glass = 0;
+    for (const token of tokens) {
+      if (token.kind === 'flexible') {
+        cursor += share;
+        continue;
+      }
+      if (token.kind === 'fixed') {
+        cursor += BOTTOM_FIXED_SPACER;
+        continue;
+      }
+      chrome[`bottomGlass${glass}`] = { x: cursor, y: top, width: token.width, height: BOTTOM_GLASS_HEIGHT };
+      glass += 1;
+      for (const item of token.items) {
+        const itemCtx = this.childContext(item.toolbar, cctx);
+        this.place(item.node, itemCtx, { width: null, height: null }, cursor + (item.slot - item.size.width) / 2, top + (BOTTOM_GLASS_HEIGHT - item.size.height) / 2);
+        const span = spans.get(item.toolbar);
+        spans.set(item.toolbar, { start: span ? span.start : cursor, end: cursor + item.slot });
+        cursor += item.slot + BOTTOM_ITEM_GAP;
+      }
+      cursor -= BOTTOM_ITEM_GAP;
+    }
+    for (const toolbar of toolbars) {
+      const span = spans.get(toolbar);
+      if (span) this.setFrame(toolbar, span.start, top, { width: span.end - span.start, height: BOTTOM_GLASS_HEIGHT });
+    }
+  }
+
   /**
    * The tab bar (iOS 26) is a glass capsule floating over the bottom of the
-   * content (TAB_BAR_* above), with one equal-width item per tab; what it
+   * content (TAB_BAR_* above), as wide as its equal-width items (one per tab)
+   * up to the width less the margins, centered; what it
    * covers (the capsule and the gap under it) is the content's bottom inset.
    * Every `tab` gets the tab view's frame; only the selected one lays its
    * content out, the others are reported in `hidden`.
@@ -3256,18 +3443,19 @@ export class LayoutPass {
     const marginBottom = y + size.height >= screen.height - EPSILON ? TAB_BAR_MARGIN_BOTTOM : TAB_BAR_MARGIN_BOTTOM_INSET;
     const barHeight = Math.min(size.height, TAB_BAR_HEIGHT + marginBottom);
     const capsuleHeight = Math.min(TAB_BAR_HEIGHT, barHeight);
+    const tabs = node.children;
+    const n = tabs.length;
+    const width = Math.min(Math.max(0, size.width - 2 * TAB_BAR_MARGIN_H), n * TAB_BAR_ITEM_WIDTH + 2 * TAB_BAR_ITEM_INSET);
     const bar: Rect = {
-      x: x + TAB_BAR_MARGIN_H,
+      x: x + (size.width - width) / 2,
       y: y + size.height - barHeight,
-      width: Math.max(0, size.width - 2 * TAB_BAR_MARGIN_H),
+      width,
       height: capsuleHeight,
     };
     const chrome: Record<string, Rect> = {
       bar,
       content: { x, y, width: size.width, height: size.height - barHeight },
     };
-    const tabs = node.children;
-    const n = tabs.length;
     const inner = Math.max(0, bar.width - 2 * TAB_BAR_ITEM_INSET);
     for (let i = 0; i < n; i++) {
       const itemWidth = inner / n;
@@ -4150,22 +4338,33 @@ export class LayoutPass {
    * clamped. 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.
    */
+  /**
+   * `lazyvgrid` and `lazyhgrid`. Written for the vertical grid: its columns
+   * share the proposed width and its cells fill them row by row. A horizontal
+   * grid is the same along the other axis (its rows share the proposed
+   * height and the cells fill them column by column), so the plan's
+   * `columns` are the tracks across the grid (`x`, `width`: cross axis) and
+   * its `rows` the lines along it (`y`, `height`: main axis).
+   */
   private lazyGridPlan(node: LayoutNode, ctx: Context, p: Proposal): LazyGridPlan {
     return this.plan(node, p, () => {
-      const items = readGridItems(node.props['columns']);
-      const rowSpacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
+      const horizontal = node.kind === 'lazyhgrid';
+      const crossOf = (size: { width: number | null; height: number | null }): number | null => (horizontal ? size.height : size.width);
+      const items = readGridItems(node.props[horizontal ? 'rows' : 'columns']);
+      const lineSpacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
       const cctx = this.childContext(node, ctx);
       const cells = node.children;
+      const cross = crossOf(p);
       let idealCell: number | null = null;
       const ideal = (): number => {
         if (idealCell === null) {
           idealCell = 0;
-          for (const cell of cells) idealCell = Math.max(idealCell, this.measure(cell, cctx, NIL_PROPOSAL).width);
+          for (const cell of cells) idealCell = Math.max(idealCell, crossOf(this.measure(cell, cctx, NIL_PROPOSAL)) ?? 0);
         }
         return idealCell;
       };
       const widths = items.map((item): number[] => (item.kind === 'fixed' ? [item.value] : []));
-      if (!finite(p.width)) {
+      if (!finite(cross)) {
         items.forEach((item, i) => {
           if (item.kind !== 'fixed') widths[i] = [clamp(ideal(), item.minimum, item.maximum)];
         });
@@ -4175,7 +4374,7 @@ export class LayoutPass {
         let fixed = 0;
         for (const item of items) if (item.kind === 'fixed') fixed += item.value;
         const sharing = items.filter((item) => item.kind !== 'fixed').length;
-        const remaining = Math.max(0, p.width - fixed - gaps);
+        const remaining = Math.max(0, cross - fixed - gaps);
         const share = sharing > 0 ? remaining / sharing : 0;
         let flexibleTotal = 0;
         let adaptiveCount = 0;
@@ -4209,9 +4408,9 @@ export class LayoutPass {
         });
       });
       const used = cursor;
-      const gridWidth = finite(p.width) ? p.width : used;
+      const gridCross = finite(cross) ? cross : used;
       const alignment = str(node.props['alignment']) ?? 'center';
-      const offset = safeOffset(gridWidth, used, alignmentAnchors(alignment)[0]);
+      const offset = safeOffset(gridCross, used, alignmentAnchors(alignment)[horizontal ? 1 : 0]);
       for (const column of columns) column.x += offset;
 
       const rows: LazyGridPlan['rows'] = [];
@@ -4223,28 +4422,31 @@ export class LayoutPass {
         for (let k = 0; k < perRow && start + k < cells.length; k++) {
           const cell = cells[start + k] as LayoutNode;
           const column = columns[k] as LazyColumnPlan;
-          const size = this.measure(cell, cctx, { width: column.width, height: null });
-          height = Math.max(height, size.height);
+          const size = this.measure(cell, cctx, horizontal ? { width: null, height: column.width } : { width: column.width, height: null });
+          height = Math.max(height, horizontal ? size.width : size.height);
           rowCells.push({ node: cell, column: k, size });
         }
         rows.push({ y, height, cells: rowCells });
-        y += height + rowSpacing;
+        y += height + lineSpacing;
       }
-      const gridHeight = rows.length > 0 ? y - rowSpacing : 0;
-      return { size: { width: gridWidth, height: gridHeight }, columns, rows };
+      const gridMain = rows.length > 0 ? y - lineSpacing : 0;
+      const size = horizontal ? { width: gridMain, height: gridCross } : { width: gridCross, height: gridMain };
+      return { size, columns, rows };
     });
   }
 
   private placeLazyGrid(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
     const plan = this.lazyGridPlan(node, ctx, p);
+    const horizontal = node.kind === 'lazyhgrid';
     const cctx = this.childContext(node, ctx);
     const gridAlignment = str(node.props['alignment']) ?? 'center';
     for (const row of plan.rows) {
       for (const cell of row.cells) {
         const column = plan.columns[cell.column] as LazyColumnPlan;
-        const box: Size = { width: column.width, height: row.height };
+        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);
-        this.place(cell.node, cctx, { width: column.width, height: null }, x + column.x + dx, y + row.y + dy);
+        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);
       }
     }
   }

package/src/layout/index.ts

@@ -9,7 +9,7 @@
  *
  * | kind                | keys |
  * |---------------------|------|
- * | `navscreen`         | `bar` (status bar + 44), `largeTitle` (only when the title is large), `back` (only when depth > 0), `title` (Phase 6: the centered inline title's rect, truncated to the room the bar items leave; absent for a large title or a `principal` toolbar), `searchField` (Phase 6: the 36px field of a `searchfield` child), `bottomBar` (Phase 6: 49 + bottom safe area, when a `bottom` toolbar is present), `content` |
+ * | `navscreen`         | `bar` (status bar + 44), `largeTitle` (only when the title is large), `back` (only when depth > 0), `title` (Phase 6: the centered inline title's rect, truncated to the room the bar items leave; absent for a large title or a `principal` toolbar), `searchField` (Phase 6: the 36px field of a `searchfield` child), `bottomBar` (iOS 26: the band from a `bottom` toolbar's 48 glass row to the screen bottom, when one is present), `bottomGlass0` … (its glass capsules, in order), `content` |
  * | `sheet`             | `grabber` (36×5), `content` (below the 20px grabber row) |
  * | `toggle`            | `label`, `switch` (51×31 at the trailing edge) |
  * | `button` (bordered) | `label` |
@@ -17,7 +17,7 @@
  * | list rows           | `row` (the full-width row rect inside the card); `navlink` rows add `label` and `chevron` (20px at the trailing edge); rows with a Phase 6 `badge` style add `badge` (the text's rect at the trailing inset, full row height) |
  * | `scrollview`        | `content` (the content rect at scroll offset 0) |
  * | `list`/`scrollview` | `bottomInset` (Phase 4, only under a tab bar that reaches the screen bottom, or a bottom toolbar or search field reaching its screen's bottom: the part of the frame the bar covers; the DOM adds its height as scrollable content inset), `topInset` / `largeTitle` (the screen's bar and the large title row it runs under: its screen's content, or a vertical one in it touching the bar) |
- * | `tabview`           | `bar` (49 + bottom safe area at the bottom), `item0` … `itemN-1` (equal-width 49px items in the bar), `content` (above the bar) |
+ * | `tabview`           | `bar` (iOS 26: the 62 glass capsule, as wide as its tabs up to the width less 21 either side, centered), `item0` … `itemN-1` (equal-width items inside its 4 inset), `content` (above the bar and the gap under it) |
  * | `tab`               | `content` (the selected tab's safe content area: below the status bar, above the bar); non-selected tabs are in `hidden` |
  * | `picker`            | segmented: `segment0` … `segmentN-1` (equal widths, 32 high); menu: `label` (leading), `value` (the selected option plus chevron, trailing) |
  * | `gauge`             | `track` (the 4px bar), `fill` (the leading `value` share of the track) (Phase 6) |
@@ -25,7 +25,7 @@
  * `LayoutResult.layouts` (Phase 6) holds, per `layout` element, the proposal
  * it was placed with and its children's min / ideal / max sizes.
  * | `picker`            | segmented: `segment0` … `segmentN-1` (equal widths, 32 high); menu: `label` (leading), `value` (the selected option plus chevron, trailing); inline (Phase 6): `label` (a 44 row, only for a non-empty label), `option0` … `optionN-1` (44 rows spanning the list row when there is one) |
- * | `toolbar`           | none; the element's frame is its item group in the bar (or the whole bottom bar) and the items have ordinary frames |
+ * | `toolbar`           | none; the element's frame is its item group in the bar (in a bottom bar: the span of its items in the glass row; a `spacer` toolbar is hidden) and the items have ordinary frames |
  * | `navsplit`          | `sidebar` (the sidebar column, including the leading safe-area inset), `separator` (the 1px hairline), `detail` (the detail column, including the trailing inset) (Phase 7) |
  * | `listrow`           | Phase 8: `editControl` (the 44px leading control, full row height) while the enclosing `list` has `editing`; the row content is shifted right by 44. `swipeactions` / `contextmenu` have no keys: their children after the first are in `hidden` without frames |
  * | `alert`             | Phase 8: `card` (270 wide, centered; a dialog's button card), `title` / `message` (when non-empty; `chromeText` carries the centered lines), `button<i>` (the i-th child's row), `ok` (the renderer-drawn OK, only without button children), `cancelCard` (dialog: the `cancel` button's own card) |

package/src/layoutDom.ts

@@ -258,6 +258,26 @@ function placeEditControl(node: HTMLElement | null, rect: Rect | undefined, orig
   }
 }
 
+/**
+ * iOS 26: the glass a screen's bottom toolbar items float on, one element
+ * per capsule (engine `bottomGlass0` …), under the items (styles.css).
+ */
+function syncBottomGlass(screen: HTMLElement, chrome: Record<string, Rect> | undefined, frame: Rect): void {
+  const existing = Array.from(screen.querySelectorAll<HTMLElement>(':scope > .sb-bottom-glass'));
+  let count = 0;
+  for (let rect = chrome?.['bottomGlass0']; rect; rect = chrome?.[`bottomGlass${count}`]) {
+    let glass = existing[count];
+    if (!glass) {
+      glass = document.createElement('div');
+      glass.className = 'sb-bottom-glass';
+      screen.append(glass);
+    }
+    placeChrome(glass, rect, frame);
+    count += 1;
+  }
+  for (const extra of existing.slice(count)) extra.remove();
+}
+
 function placeChrome(node: HTMLElement | null, rect: Rect | undefined, origin: Rect): void {
   if (!node) return;
   if (!rect) {
@@ -543,6 +563,7 @@ function applyChrome(
         bar.style.paddingTop = `${top}px`;
         bar.style.paddingBottom = `${bottom}px`;
       }
+      syncBottomGlass(el, chrome, frame);
       const largeRect = chrome?.['largeTitle'];
       if (largeTitle) {
         if (largeRect) {
@@ -571,6 +592,8 @@ function applyChrome(
           if (inlineTitle.style.lineHeight !== lineHeight) inlineTitle.style.lineHeight = lineHeight;
         }
       }
+      // The More button of the collapsed `secondary` items, at the trailing end.
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-more'), chrome?.['more'], frame);
       const back = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-back');
       const backLabel = back?.querySelector<HTMLElement>('.sb-navbar-back-label');
       const backRect = chrome?.['back'];