@swiftbrowser/web 0.18.3 → 0.21.0

package/src/layout/engine.ts

@@ -413,6 +413,15 @@ const IMAGE_SCALES: Readonly<Record<string, number>> = { small: 0.8, medium: 1,
 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;
+/** Whether a screen is the regular size class (an iPad, a desktop window): a `sidebar` list then draws as one. */
+export const isRegularWidth = (screen: { width: number }): boolean => screen.width >= REGULAR_WIDTH;
+/**
+ * From this root height a window is the regular vertical size class: below
+ * it, as an iPhone on its side (at most 440 tall, less under Safari's bars),
+ * it is compact, and UIKit shows no large titles. An iPad is regular either
+ * way (744 tall at the least).
+ */
+const REGULAR_HEIGHT = 500;
 /** 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;
@@ -1139,14 +1148,12 @@ interface TextPlan {
 // Phase 8 controls.
 interface SliderPlan {
   size: Size;
+  /** The `label` child, hidden (iOS draws no slider label). */
   label: LayoutNode | null;
   min: LayoutNode | null;
   max: LayoutNode | null;
-  labelSize: Size;
   minSize: Size;
   maxSize: Size;
-  /** Height of the label row above the 44 track row (0 without a label). */
-  labelRow: number;
   cctx: Context;
 }
 
@@ -1638,9 +1645,17 @@ export class LayoutPass {
         const imageScale = str(style['imageScale']);
         if (imageScale !== null) next = { ...next, imageScale: IMAGE_SCALES[imageScale] ?? 1 };
         if (typeof style['scrollDisabled'] === 'boolean') next = { ...next, scrollDisabled: style['scrollDisabled'] };
+        // `.ignoresSafeArea` on the bottom: the content inside has no bottom
+        // safe area, so a scroll view in it reaching the screen's bottom is
+        // not inset by the bar there (a photo viewer's, under a bottom toolbar).
+        const ignored = style['ignoresSafeArea'];
+        if (ignored === 'all' || (Array.isArray(ignored) && ignored.includes('bottom'))) {
+          if (next.bottomBar !== 0 || next.bottomEdge !== undefined) next = { ...next, bottomBar: 0, bottomEdge: undefined };
+        }
         return next;
       }
       case 'vstack':
+      case 'disclosuregroup':
         return { ...ctx, stackAxis: 'vertical', listRow: false };
       case 'hstack':
         return { ...ctx, stackAxis: 'horizontal', listRow: false };
@@ -1744,6 +1759,7 @@ export class LayoutPass {
         if (ctx.stackAxis === 'horizontal') return { width: 1, height: finite(p.height) ? p.height : 0 };
         return { width: finite(p.width) ? p.width : 0, height: 1 };
       case 'vstack':
+      case 'disclosuregroup':
         return this.stackPlan(node, ctx, p, 'vertical').size;
       case 'hstack': {
         const label = ctx.labelColumn ? labelColumnOf(node) : null;
@@ -1803,6 +1819,7 @@ export class LayoutPass {
         return this.pickerPlan(node, ctx, p).size;
       case 'host':
         return this.measureHost(node, p);
+      case 'registered':
       case 'geometry':
         // GeometryReader: the proposal, 10 on unconstrained axes.
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
@@ -2319,10 +2336,19 @@ export class LayoutPass {
   private stackPlan(node: LayoutNode, ctx: Context, p: Proposal, axis: Axis): StackPlan {
     return this.plan(node, ctx, p, () => {
       const cctx = this.childContext(node, ctx);
-      return this.layoutStack(node.children, cctx, p, axis, this.stackGaps(node, cctx, axis));
+      return this.layoutStack(this.stackChildren(node), cctx, p, axis, this.stackGaps(node, cctx, axis));
     });
   }
 
+  /**
+   * The children a stack lays out: all of them, but a collapsed
+   * `disclosuregroup`'s label alone (the first child; its content is in
+   * the tree whatever the state, as the native renderer wants it).
+   */
+  private stackChildren(node: LayoutNode): readonly LayoutNode[] {
+    return node.kind === 'disclosuregroup' && node.props['expanded'] !== true ? node.children.slice(0, 1) : node.children;
+  }
+
   /**
    * The space between a stack's children: its `spacing`, else the system's.
    * A horizontal stack's default is 8; in a vertical one iOS 26 spaces text
@@ -2334,14 +2360,16 @@ export class LayoutPass {
    * 0.6em + 1.13 above it (caption 8.33, body 11.33); other views are 8 apart.
    */
   private stackGaps(node: LayoutNode, cctx: Context, axis: Axis): number[] {
-    const n = node.children.length;
+    const children = this.stackChildren(node);
+    const n = children.length;
     if (n < 2) return [];
-    const spacing = num(node.props['spacing']);
+    // A disclosure group's content sits 8 under its label, as SwiftUI's does.
+    const spacing = num(node.props['spacing']) ?? (node.kind === 'disclosuregroup' ? DEFAULT_SPACING : null);
     if (spacing !== null || axis === 'horizontal') return new Array<number>(n - 1).fill(spacing ?? DEFAULT_SPACING);
     const gaps: number[] = [];
     for (let i = 0; i < n - 1; i++) {
-      const above = this.textEdge(node.children[i] as LayoutNode, cctx, 'bottom');
-      const below = this.textEdge(node.children[i + 1] as LayoutNode, cctx, 'top');
+      const above = this.textEdge(children[i] as LayoutNode, cctx, 'bottom');
+      const below = this.textEdge(children[i + 1] as LayoutNode, cctx, 'top');
       let gap = DEFAULT_SPACING;
       if (above && below) gap = below.leading - below.lineHeight + 1 / 3;
       else if (below) gap = 0.409 * below.size - 1.24;
@@ -2372,8 +2400,10 @@ export class LayoutPass {
         const content = node.children[0];
         return content ? this.textEdge(content, this.childContext(node, ctx), edge, depth + 1) : null;
       }
-      case 'vstack': {
-        const child = edge === 'top' ? node.children[0] : node.children[node.children.length - 1];
+      case 'vstack':
+      case 'disclosuregroup': {
+        const children = this.stackChildren(node);
+        const child = edge === 'top' ? children[0] : children[children.length - 1];
         return child && !isSpacer(child) ? this.textEdge(child, this.childContext(node, ctx), edge, depth + 1) : null;
       }
       case 'hstack': {
@@ -2808,10 +2838,12 @@ export class LayoutPass {
       // the space between sections. `sidebar` (iPadOS) is laid out like
       // `insetGrouped` with 44pt rows (the page draws no cards or hairlines).
       const listStyle = str(node.props['style']) ?? 'insetGrouped';
-      const sidebarStyle = listStyle === 'sidebar';
+      // In a compact width (an iPhone) a `sidebar` list looks like `insetGrouped`
+      // (cards, chevrons, 52pt rows) and only its sections' folding remains.
+      const sidebarStyle = listStyle === 'sidebar' && isRegularWidth(screen);
       // `.environment(\.defaultMinListRowHeight, _)`; 52 by default (44 in a sidebar).
       const minRowHeight = num(node.props['minRowHeight']) ?? (sidebarStyle ? LIST_SIDEBAR_ROW_MIN_HEIGHT : LIST_ROW_MIN_HEIGHT);
-      const inset = listStyle === 'insetGrouped' || sidebarStyle ? LIST_INSET : 0;
+      const inset = listStyle === 'insetGrouped' || listStyle === 'sidebar' ? LIST_INSET : 0;
       const plain = listStyle === 'plain';
       const listTop = plain ? 0 : LIST_TOP;
       const listBottom = plain ? 0 : LIST_BOTTOM;
@@ -2843,7 +2875,9 @@ export class LayoutPass {
       const groupsSource: GroupSource[] = [];
       for (const child of node.children) {
         if (child.kind === 'section') {
-          const rows = child.children.filter((row) => row.kind !== 'sectionheader' && row.kind !== 'sectionfooter');
+          // `Section(isExpanded:)`: collapsed, its rows are not laid out, in a sidebar-style list (iOS shows the rows in the other styles, whatever the binding).
+          const collapsed = child.props['collapsible'] === true && child.props['expanded'] === false && rowCtx.sidebarList === true;
+          const rows = collapsed ? [] : 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 });
@@ -2857,11 +2891,12 @@ export class LayoutPass {
       // footer's font.
       const headerCtx: Context = { ...rowCtx, listRow: false, stackAxis: null, font: headerFont };
       const footerCtx: Context = { ...headerCtx, font: footerFont };
-      const supplement = (view: LayoutNode | null, y: number, ctx: Context): ListSupplementPlan | null => {
+      const supplement = (view: LayoutNode | null, y: number, ctx: Context, full = false): ListSupplementPlan | null => {
         if (!view) return null;
         const proposal: Proposal = { width: contentWidth, height: null };
         const size = this.measure(view, ctx, proposal);
-        return { node: view, ctx, proposal, rect: { x: contentX, y, width: size.width, height: size.height } };
+        // A collapsible section's header spans the content width: its chevron sits at the trailing edge.
+        return { node: view, ctx, proposal, rect: { x: contentX, y, width: full ? contentWidth : size.width, height: size.height } };
       };
 
       const groups: ListGroupPlan[] = [];
@@ -2886,7 +2921,7 @@ export class LayoutPass {
         // A header sits in the gap above its card (from LIST_HEADER_LIFT
         // into it); the card then starts LIST_HEADER_GAP below the header.
         const headerLift = plain ? 0 : LIST_HEADER_LIFT;
-        const headerView = supplement(source.headerView, y - headerLift, headerCtx);
+        const headerView = supplement(source.headerView, y - headerLift, headerCtx, source.section?.props['collapsible'] === true);
         if (headerView && headerView.rect.height > 0) y += headerView.rect.height + LIST_HEADER_GAP - headerLift;
         const headerText = source.section ? str(source.section.props['header']) : null;
         const footerText = source.section ? str(source.section.props['footer']) : null;
@@ -3068,8 +3103,10 @@ export class LayoutPass {
       case 'canvas':
       case 'video':
       case 'host':
+      case 'registered':
         return;
       case 'vstack':
+      case 'disclosuregroup':
       case 'hstack': {
         const label = node.kind === 'hstack' && ctx.labelColumn ? labelColumnOf(node) : null;
         if (label) {
@@ -3079,10 +3116,13 @@ export class LayoutPass {
           this.place(label.title, cctx, plan.titleProposal, x + LIST_LABEL_TITLE_X, y + (size.height - plan.title.height) / 2);
           return;
         }
-        const axis: Axis = node.kind === 'vstack' ? 'vertical' : 'horizontal';
+        const axis: Axis = node.kind === 'hstack' ? 'horizontal' : 'vertical';
         const plan = this.stackPlan(node, ctx, p, axis);
-        const alignment = str(node.props['alignment']) ?? 'center';
-        this.placeStack(node.children, cctx, plan, axis, alignment, x, y, size);
+        const alignment = str(node.props['alignment']) ?? (node.kind === 'disclosuregroup' ? 'leading' : 'center');
+        const shown = this.stackChildren(node);
+        this.placeStack(shown, cctx, plan, axis, alignment, x, y, size);
+        // A collapsed `disclosuregroup`: its content is hidden, without frames.
+        for (const child of node.children) if (!shown.includes(child)) this.hide(child, node);
         return;
       }
       case 'zstack': {
@@ -3224,7 +3264,7 @@ export class LayoutPass {
           // (its label still reserves the chevron's width so selecting a row
           // never reflows it); elsewhere `selected` keeps the chevron. No row
           // of a `sidebar`-style list has one (iPadOS).
-          if (!(node.props['selected'] === true && ctx.splitSidebar) && !ctx.sidebarList) {
+          if (!(node.props['selected'] === true && ctx.splitSidebar) && !(ctx.sidebarList && isRegularWidth(this.env.screen))) {
             chrome['chevron'] = {
               x: x + size.width - LIST_CHEVRON_WIDTH,
               y,
@@ -3521,12 +3561,22 @@ 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 (!view) continue;
+          this.place(view.node, view.ctx, view.proposal, x + view.rect.x, y + view.rect.y);
+          // A collapsible section's header spans the content width (its chevron is at the trailing edge); its content stays put.
+          const placed = view.node.id >= 0 ? this.frames.get(view.node.id) : undefined;
+          if (placed && placed.width < view.rect.width) this.setFrame(view.node, placed.x, placed.y, { width: view.rect.width, height: placed.height });
         }
         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);
         }
+        // A collapsed `Section(isExpanded:)` (sidebar-style list): its rows are hidden, without frames.
+        if (group.rows.length === 0) {
+          for (const child of group.section.children) {
+            if (child.kind !== 'sectionheader' && child.kind !== 'sectionfooter') this.hide(child, group.section);
+          }
+        }
       }
       for (const row of group.rows) {
         // Set the row chrome before placing so a navlink can merge its own keys.
@@ -3613,18 +3663,43 @@ export class LayoutPass {
 
   private placeNavScreen(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
     const { safeArea, screen, dynamicTypeSize } = this.env;
+    // The horizontal safe area (a phone on its side: the notch on one side,
+    // the corner on the other): the bar's background runs edge to edge, as
+    // the screen does; its items, the titles, the search field, the bottom
+    // toolbars and the content stay clear of it. A split view's columns are
+    // inset already (`placeNavSplit`), so they do not reach the edges here.
+    const barX = x;
+    const barWidth = size.width;
+    const insetLeading = x <= EPSILON ? safeArea.leading : 0;
+    const insetTrailing = x + size.width >= screen.width - EPSILON ? safeArea.trailing : 0;
+    x += insetLeading;
+    size = { width: Math.max(0, size.width - insetLeading - insetTrailing), height: size.height };
     const statusBar = y <= 0 ? safeArea.top : (cctx.barInset ?? 0);
     const displayMode = str(node.props['displayMode']) ?? 'automatic';
     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);
+    // `.toolbar(.hidden, for: .navigationBar)`: no bar, title, back button or
+    // bar items; the content starts under the status bar, which stays a safe
+    // area. `.bottomBar` hidden: the bottom toolbars draw nothing.
+    const barHidden = node.props['navigationBarHidden'] === true;
+    const bottomBarHidden = node.props['bottomBarHidden'] === true;
+    // A compact height (a phone on its side) has no large titles, whatever the
+    // display mode, as UIKit: the title is the bar's inline one.
+    const large = !barHidden && screen.height >= REGULAR_HEIGHT && (displayMode === 'large' || (displayMode === 'automatic' && depth === 0));
+    const barHeight = barHidden ? statusBar : statusBar + NAV_BAR_HEIGHT + (!large && y <= 0 ? NAV_BAR_INLINE_BOTTOM : 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 placementOf = (t: LayoutNode): string | null => str(t.props['placement']);
+    const inHiddenBar = (t: LayoutNode): boolean => {
+      const placement = placementOf(t);
+      if (placement === 'keyboard') return false;
+      return placement === 'bottom' ? bottomBarHidden : barHidden;
+    };
+    for (const toolbar of parts.toolbars.filter(inHiddenBar)) this.hide(toolbar, node);
     // `.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 bottomToolbars = bottomBarHidden ? [] : parts.toolbars.filter((t) => placementOf(t) === 'bottom');
     // `keyboard` toolbars: a glass capsule floating above the keyboard while a
     // text input of this screen is being edited (as Notes' format bar on
     // iOS 26; SwiftUI's input accessory view); nothing otherwise.
@@ -3657,12 +3732,12 @@ export class LayoutPass {
       width: size.width,
       height: Math.max(0, size.height - contentTop - Math.max(bottomBarHeight, searchBottom)),
     };
-    const chrome: Record<string, Rect> = {
-      bar: { x, y, width: size.width, height: barHeight },
+    const chrome: Record<string, Rect> = { content };
+    if (!barHidden) {
+      chrome['bar'] = { x: barX, y, width: barWidth, height: barHeight };
       // The 44 row the bar's items sit in, under the status bar.
-      barRow: { x, y: y + statusBar, width: size.width, height: NAV_BAR_HEIGHT },
-      content,
-    };
+      chrome['barRow'] = { x, y: y + statusBar, width: size.width, height: NAV_BAR_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;
@@ -3700,11 +3775,13 @@ export class LayoutPass {
     // 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' && placement !== 'largeTitle' && placement !== 'keyboard' && !isSpacer(t);
-    });
-    const secondaryToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'secondary' && !isSpacer(t));
+    const barToolbars = barHidden
+      ? []
+      : parts.toolbars.filter((t) => {
+          const placement = placementOf(t);
+          return placement !== 'bottom' && placement !== 'secondary' && placement !== 'largeTitle' && placement !== 'keyboard' && !isSpacer(t);
+        });
+    const secondaryToolbars = barHidden ? [] : parts.toolbars.filter((t) => placementOf(t) === '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 }));
@@ -3826,7 +3903,7 @@ export class LayoutPass {
     // title no longer shows).
     const backLabel = '';
     const leadingStart = x + NAV_ITEM_MARGIN + (cctx.barLeading ?? 0);
-    if (depth > 0) {
+    if (depth > 0 && !barHidden) {
       chrome['back'] = { x: leadingStart, y: rowY, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE };
     }
 
@@ -3969,7 +4046,7 @@ export class LayoutPass {
     const titleScrolls = large && scroller !== null;
     // A large title that scrolls away collapses into the inline title, which
     // the renderer shows once it has (`data-sb-collapsed`).
-    if ((!large || titleScrolls) && !principal) {
+    if ((!large || titleScrolls) && !principal && !barHidden) {
       const leftUsed = Math.max(
         back ? back.x + back.width - x : 0,
         leadingWidth > 0 ? leadingCursor - NAV_GROUP_SPACING - x : 0,
@@ -4299,10 +4376,14 @@ export class LayoutPass {
     // The keyboard (device mode) covers the tab bar: the content stops above
     // whichever is taller (a `navstack` handles the keyboard in its screens).
     const keyboard = y + size.height >= screen.height - EPSILON ? this.keyboard : 0;
+    // Clear of the horizontal safe area (a phone on its side); a `navstack`
+    // insets its own screens' items and content.
+    const leading = x <= EPSILON ? safeArea.leading : 0;
+    const trailing = x + size.width >= screen.width - EPSILON ? safeArea.trailing : 0;
     const area: Rect = {
-      x,
+      x: x + leading,
       y: y + topInset,
-      width: size.width,
+      width: Math.max(0, size.width - leading - trailing),
       height: Math.max(0, size.height - topInset - Math.max(barHeight, keyboard)),
     };
     this.setChrome(tab, { content: area });
@@ -4316,7 +4397,7 @@ export class LayoutPass {
     if (kind === 'list' || kind === 'scrollview') {
       const height = Math.max(0, size.height - topInset - keyboard);
       const ctx: Context = keyboard > 0 ? { ...cctx, bottomBar: Math.max(0, barHeight - keyboard), bottomEdge: y + size.height - keyboard } : cctx;
-      this.place(child, ctx, { width: size.width, height }, x, y + topInset);
+      this.place(child, ctx, { width: area.width, height }, area.x, y + topInset);
       return;
     }
     const proposal: Proposal = { width: area.width, height: area.height };
@@ -4535,10 +4616,11 @@ export class LayoutPass {
   }
 
   /**
-   * A slider is the proposed width (200 when none) and 44 high, plus a label
-   * row above when a `label` child exists (its own height, leading). The
-   * `min` / `max` value labels sit at the track's ends in the 44 row, 8 from
-   * the track. Children are named by `labels` in order.
+   * A slider is the proposed width (200 when none) and 44 high. The `min` /
+   * `max` value labels sit at the track's ends, 8 from the track. Its
+   * `label` child is not drawn, as iOS does not draw a slider's label (it
+   * names the slider for VoiceOver): the page hides it and names the slider
+   * from it (`aria-labelledby`). Children are named by `labels` in order.
    */
   private sliderPlan(node: LayoutNode, ctx: Context, p: Proposal): SliderPlan {
     return this.plan(node, ctx, p, () => {
@@ -4554,19 +4636,17 @@ export class LayoutPass {
         else if (name === 'min') min = child;
         else if (name === 'max') max = child;
       });
-      const labelSize = label ? this.measure(label, cctx, { width, height: null }) : ZERO;
       const minSize = min ? this.measure(min, cctx, NIL_PROPOSAL) : ZERO;
       const maxSize = max ? this.measure(max, cctx, NIL_PROPOSAL) : ZERO;
-      const labelRow = label ? labelSize.height : 0;
-      return { size: { width, height: labelRow + SLIDER_HEIGHT }, label, min, max, labelSize, minSize, maxSize, labelRow, cctx };
+      return { size: { width, height: SLIDER_HEIGHT }, label, min, max, minSize, maxSize, cctx };
     });
   }
 
   private placeSlider(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
     const plan = this.sliderPlan(node, ctx, p);
     const { cctx } = plan;
-    if (plan.label) this.place(plan.label, cctx, { width: size.width, height: null }, x, y);
-    const rowY = y + plan.labelRow;
+    if (plan.label) this.hide(plan.label, node);
+    const rowY = y;
     let trackX = x;
     let trackEnd = x + size.width;
     if (plan.min) {

package/src/layoutDom.ts

@@ -36,6 +36,7 @@
 import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, TextLayout } from './layout';
 import { hostContentInset } from './hostInset';
 import { listRowBackgroundOf } from './layout';
+import { isRegularWidth } from './layout/engine';
 import { styleToCSS } from './styles';
 import type { ShapeStyle } from './protocol';
 import { applyChartChrome } from './chartDom';
@@ -159,6 +160,8 @@ function applyFrames(ctx: LayoutDomContext, result: LayoutResult, changes: BoxCh
     if (el.hidden) el.hidden = false;
     applyChrome(result, node, el, box, frame, scrollBottomInset(ctx, result, node, frame), previous === null, changes);
     if (node.kind === 'tab') setTabHidden(el, result.hidden.has(id));
+    // A `sidebar` list draws as one (no cards or hairlines) in a regular width; in a compact one it looks like `insetGrouped`.
+    if (node.kind === 'list') setFlag(el, 'sbListLook', node.props['style'] === 'sidebar' && isRegularWidth(ctx.env.screen) ? 'sidebar' : null);
     // A child the engine did not touch kept its screen frame, but if this
     // element's box moved, the child's `left`/`top` (relative to it) did
     // not: the plus button at the bottom of a chat's composer stays put on
@@ -636,14 +639,15 @@ function applyChrome(
   setFlag(el, 'sbSeparatorBottom', chrome?.['separatorBottomHidden'] ? 'hidden' : null);
   setFlag(el, 'sbSeparatorTop', chrome?.['separatorTopHidden'] ? 'hidden' : null);
   // `.listRowBackground(_:)`: the row's cell paint (styles.css reads it, and
-  // a card with such a row leaves its own background to its rows).
+  // a card with such a row leaves its own background to its rows; a card of
+  // clear rows alone, marked `clear`, clips nothing either).
   const rowBackground = chrome?.['row'] ? listRowBackgroundOf(node) : undefined;
   const rowPaint = rowBackground !== undefined ? styleToCSS(rowBackground as ShapeStyle, 'paint').value : '';
   if (el.style.getPropertyValue('--sb-row-background') !== rowPaint) {
     if (rowPaint) el.style.setProperty('--sb-row-background', rowPaint);
     else el.style.removeProperty('--sb-row-background');
   }
-  setFlag(el, 'sbRowBackground', rowPaint ? '' : null);
+  setFlag(el, 'sbRowBackground', rowPaint ? (rowPaint === 'transparent' ? 'clear' : '') : null);
   // iOS 26: the separator under a list row starts at its first text (styles.css).
   const separator = chrome?.['separator'];
   const leading = separator ? `${separator.x}px` : '';
@@ -699,11 +703,22 @@ function applyChrome(
     case 'stepper':
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-stepper-control'), chrome?.['control'], box);
       return;
-    case 'slider':
+    case 'slider': {
+      // The `label` child is hidden (iOS draws none) and names the slider, as VoiceOver reads it.
+      const names = Array.isArray(node.props['labels']) ? node.props['labels'] : [];
+      const labelNode = node.children[names.indexOf('label')];
+      const labelEl = labelNode && names.includes('label') ? el.querySelector<HTMLElement>(`[data-sb-id="${labelNode.id}"]`) : null;
+      if (labelEl) {
+        if (!labelEl.id) labelEl.id = `sb-slider-label-${labelNode!.id}`;
+        el.setAttribute('aria-labelledby', labelEl.id);
+      } else {
+        el.removeAttribute('aria-labelledby');
+      }
       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);
@@ -745,6 +760,20 @@ function applyChrome(
       placeChrome(sw, rect, box);
       return;
     }
+    case 'disclosuregroup': {
+      // The chevron at the label's trailing edge, the toggle over the label (the first child's frame).
+      const label = node.children[0] ? result.frames.get(node.children[0].id) : undefined;
+      const chevron = el.querySelector<HTMLElement>(':scope > .sb-disclosure-chevron');
+      const toggle = el.querySelector<HTMLElement>(':scope > .sb-disclosure-toggle');
+      if (label) {
+        placeChrome(chevron, { x: frame.x + frame.width - CHEVRON_SIZE - 2, y: label.y + (label.height - CHEVRON_SIZE) / 2, width: CHEVRON_SIZE, height: CHEVRON_SIZE }, box);
+        placeChrome(toggle, { x: frame.x, y: label.y, width: frame.width, height: label.height }, box);
+      } else {
+        placeChrome(chevron, undefined, box);
+        placeChrome(toggle, undefined, box);
+      }
+      return;
+    }
     case 'navlink': {
       // A link row's badge sits on its label (`NavigationLink { row.badge(n) }`).
       applyBadge(result, node, el, box);
@@ -839,6 +868,12 @@ function applyChrome(
       const inlineTitle = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-title');
       const texts = result.chromeText.get(node.id);
       const barRect = chrome?.['bar'];
+      // `.toolbar(.hidden, for: .navigationBar)`: the bar fades out where it
+      // was, its title, back button and More button with it (styles.css);
+      // `.statusBarHidden`: the frame's drawn status bar fades (renderer.ts).
+      const barHidden = node.props['navigationBarHidden'] === true;
+      setFlag(el, 'sbBarHidden', barHidden ? '' : null);
+      setFlag(el, 'sbStatusHidden', node.props['statusBarHidden'] === true ? '' : null);
       if (bar && barRect) {
         placeChrome(bar, barRect, frame);
         // The 44px bar row sits under the status bar portion of the rect
@@ -871,6 +906,11 @@ function applyChrome(
           largeTitle.hidden = true;
         }
       }
+      if (barHidden) return;
+      // The engine's choice, not the display mode's: a compact height (a
+      // phone on its side) has no large title row, and the bar shows the
+      // inline title as UIKit does (styles.css hides it under a large one).
+      el.dataset['sbDisplay'] = largeRect ? 'large' : 'inline';
       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

package/src/main.ts

@@ -2,6 +2,7 @@
 import { easingFor, springEasing, timingFor } from './animation';
 import type { BuildEndPayload, BuildErrorPayload, BuildStartPayload } from './devEvents';
 import { ChromeColor } from './chromeColor';
+import { installDeviceFrame } from './deviceFrame';
 import { applyPageMode, decidePageMode, installViewportReadout, readViewportInsets, watchKeyboard, watchViewport, type PageMode } from './deviceMode';
 import { EMPTY_CATALOG, catalogPath, isAssetCatalog, type AssetCatalog } from './assets';
 import { createMockApp } from './mock';
@@ -228,7 +229,8 @@ typeSizeSelect.addEventListener('change', () => {
 
 /**
  * Phase 7: the horizontal size class Swift sees (`regular` from 700 CSS px of
- * screen width). The frame is always compact; device mode follows the viewport.
+ * screen width). The iPhone frame is compact, the iPad frame regular, and
+ * without a frame (or in device mode) it follows the window.
  */
 function currentSizeClass(): HorizontalSizeClass {
   return horizontalSizeClassFor(screen.clientWidth);
@@ -260,6 +262,15 @@ if (deviceMode) {
   // `?debug=viewport` shows the numbers the measurement reads, over the app.
   const readout = new URLSearchParams(location.search).get('debug') === 'viewport' ? installViewportReadout() : undefined;
   watchKeyboard((height) => renderer.setKeyboard(height), { root: device, onRead: readout });
+} else if (!document.documentElement.hasAttribute('data-sb-embed')) {
+  // A desktop preview: the toolbar's Device picker (deviceFrame.ts) draws the
+  // app in an iPhone, an iPad or no device; the renderer re-reads the
+  // screen's size when it changes, and Swift hears a new size class.
+  const sizeClassMayHaveChanged = (): void => {
+    if (sentSizeClass !== null && currentSizeClass() !== sentSizeClass) sendEnvironment();
+  };
+  installDeviceFrame(renderer, { onChange: sizeClassMayHaveChanged });
+  watchViewport(sizeClassMayHaveChanged);
 }
 
 // ---------------------------------------------------------------------------

package/src/page.css

@@ -141,6 +141,43 @@ body {
   border-color: transparent;
 }
 
+.toolbar-close {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  margin-right: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--page-fg);
+  cursor: pointer;
+}
+
+.toolbar-close svg circle {
+  fill: currentColor;
+  opacity: 0.12;
+}
+
+.toolbar-close svg path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  opacity: 0.7;
+}
+
+.toolbar-close:hover svg circle {
+  opacity: 0.2;
+}
+
+/* ?toolbar=0 (the toolbar's close button, src/deviceFrame.ts): the app alone. */
+html[data-sb-toolbar="hidden"] .toolbar {
+  display: none;
+}
+
 .toolbar-select {
   font: inherit;
   padding: 5px 8px;
@@ -172,6 +209,34 @@ body {
   word-break: break-word;
 }
 
+/* No device (html[data-sb-frame="none"], src/deviceFrame.ts): the page is
+   the toolbar over the app, which fills the rest of the window and lays out
+   for its size as the window is resized. */
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) body {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .stage {
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: stretch;
+  padding: 0;
+  gap: 0;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .status {
+  position: fixed;
+  left: 16px;
+  right: 16px;
+  bottom: 16px;
+  z-index: 10;
+  max-width: none;
+}
+
 /* ---------------------------------------------------------------------------
    Device mode (html[data-sb-mode="device"], see src/deviceMode.ts): no
    toolbar, no stage padding, the page behind the app in the OS appearance's