@swiftbrowser/web 0.3.1 → 0.5.0

package/src/layout/index.ts

@@ -9,15 +9,15 @@
  *
  * | 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` |
  * | `section`           | `rows` (the inset card), `header`, `footer` (when present) |
  * | 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: the part of the frame the bar covers; the DOM adds its height as scrollable content inset) |
- * | `tabview`           | `bar` (49 + bottom safe area at the bottom), `item0` … `itemN-1` (equal-width 49px items in the bar), `content` (above the bar) |
+ * | `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` (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) |
@@ -74,7 +74,10 @@ export {
   makeFont,
   DYNAMIC_TYPE_SIZES,
   TEXT_STYLE_SIZES,
-  LINE_HEIGHTS,
+  LINE_HEIGHT_RATIO,
+  LEADINGS,
+  leadingFor,
+  textHeight,
   FONT_FAMILIES,
   FONT_WEIGHTS,
   type TextStyle,

package/src/layout/measure.ts

@@ -20,6 +20,8 @@ function canvasFont(font: ResolvedFont): string {
  * is available (Node), it falls back to the monospace estimate.
  */
 export class CanvasTextMeasurer implements TextMeasurer {
+  /** Set by the renderer: measures a `host` element's content in the DOM. */
+  measureHost?: TextMeasurer['measureHost'];
   private context: Canvas2D | null | undefined;
   private readonly cache = new Map<string, number>();
   private readonly fallback = new MonospaceTextMeasurer();

package/src/layout/text.ts

@@ -262,12 +262,15 @@ export function wrapRuns(
   }
 
   const merged = lines.map(mergePieces);
-  const heights = merged.map((line) => {
-    if (line.length === 0) return base.lineHeight;
+  // The first line is a line tall, each further one a leading (the
+  // distance from the line above's baseline).
+  const heights = merged.map((line, index) => {
+    const metric = (font: ResolvedFont): number => (index === 0 ? font.lineHeight : font.leading);
+    if (line.length === 0) return metric(base);
     let height = 0;
     for (const piece of line) {
       const font = (runs[piece.run] as TextRunInput).font;
-      height = Math.max(height, piece.height ?? font.lineHeight, font.lineHeight);
+      height = Math.max(height, piece.height ?? metric(font), metric(font));
     }
     return height;
   });

package/src/layout/types.ts

@@ -62,8 +62,10 @@ export interface ResolvedFont {
   size: number;
   /** CSS numeric weight, 100...900. */
   weight: number;
-  /** Line height in CSS px (an integer). */
+  /** A line's height in CSS px (a multiple of 1/3: a 3x device pixel). */
   lineHeight: number;
+  /** The distance between a paragraph's baselines (the HIG leading); an SF Symbol image is this square. */
+  leading: number;
   /** A CSS `font` shorthand (`weight size/lineHeight family`) usable verbatim. */
   css: string;
   /**
@@ -79,6 +81,12 @@ export interface ResolvedFont {
 export interface TextMeasurer {
   /** Width of one line of text in CSS px when drawn with `font`. */
   measureWidth(text: string, font: ResolvedFont): number;
+  /**
+   * A `host` element's content (src/hostContent.ts, by key) laid out at
+   * `width` CSS px, or at its own ideal width when null: its size. Absent in
+   * headless layouts, where a host measures as a 10×10 placeholder.
+   */
+  measureHost?: ((content: string, width: number | null) => Size) | undefined;
 }
 
 export interface LayoutEnvironment {
@@ -93,6 +101,13 @@ export interface LayoutEnvironment {
    * images then measure as unknown (44×44 placeholders).
    */
   assets?: AssetCatalog;
+  /**
+   * The root's height is its content's, not the screen's: a SwiftUI island
+   * in a page's own layout (@swiftbrowser/react's `SwiftUIView`). A plain
+   * root is proposed the screen width and no height and placed at the top;
+   * navigation and tab roots still fill the screen.
+   */
+  contentHeight?: boolean;
 }
 
 export type TextAlignment = 'leading' | 'center' | 'trailing';

package/src/layout/typography.ts

@@ -4,8 +4,11 @@
  * Point sizes come from Apple's Human Interface Guidelines, "Typography" >
  * "Specifications" > "iOS, iPadOS Dynamic Type sizes" and "Larger
  * accessibility type sizes" (https://developer.apple.com/design/human-interface-guidelines/typography).
- * Line heights for the Large (default) sizes are the iOS values from the same
- * tables; other sizes use round(size * 1.2).
+ * A line is as tall as SwiftUI makes a `Text`: SF Pro's ascender plus
+ * descender (`UIFont.lineHeight`, 1.1934 × the point size), rounded up to a
+ * device pixel on a 3x iPhone (body 17 → 20.33, large title 34 → 40.67;
+ * measured in the iOS 26.2 simulator). The HIG's tables list a taller
+ * leading (body 22): the distance between a paragraph's lines (`LEADINGS`).
  */
 
 import type { DynamicTypeSize, FontFamily, LayoutEnvironment, ResolvedFont } from './types';
@@ -60,8 +63,13 @@ export const TEXT_STYLE_SIZES: Record<TextStyle, readonly number[]> = {
   caption2: [11, 11, 11, 11, 13, 15, 17, 20, 24, 29, 34, 40],
 };
 
-/** iOS line heights for the standard (Large) point sizes. */
-export const LINE_HEIGHTS: Readonly<Record<number, number>> = {
+/**
+ * The HIG's leading for the standard (Large) point sizes: the distance
+ * between the baselines of a paragraph's lines, which SwiftUI keeps (a
+ * multi-line body `Text` is 20.33 + 22 per further line); other sizes use
+ * round(size * 1.2). An SF Symbol image takes a square of it.
+ */
+export const LEADINGS: Readonly<Record<number, number>> = {
   34: 41,
   28: 34,
   22: 28,
@@ -120,10 +128,22 @@ export function textStyleSize(style: TextStyle, size: DynamicTypeSize): number {
   return row[sizeCategoryIndex(size)] ?? row[LARGE_INDEX] ?? 17;
 }
 
-/** Line height for a point size: the iOS value for standard sizes, else round(size * 1.2). */
+/** SF Pro's ascender plus descender per point (1950 + 494 of 2048 units per em). */
+export const LINE_HEIGHT_RATIO = 2444 / 2048;
+
+/** A line's height at a point size: `UIFont.lineHeight`, rounded up to a 3x pixel. */
 export function lineHeightFor(size: number): number {
-  const known = LINE_HEIGHTS[size];
-  return known ?? Math.round(size * 1.2);
+  return Math.ceil(size * LINE_HEIGHT_RATIO * 3 - 1e-6) / 3;
+}
+
+/** The distance between a paragraph's baselines at a point size. */
+export function leadingFor(size: number): number {
+  return LEADINGS[size] ?? Math.round(size * 1.2);
+}
+
+/** The height of `lines` lines of text in `font`: the first line, then its leading per further line. */
+export function textHeight(lines: number, font: ResolvedFont): number {
+  return lines > 0 ? font.lineHeight + (lines - 1) * font.leading : 0;
 }
 
 function formatPx(value: number): string {
@@ -138,14 +158,14 @@ export function makeFont(
   modifiers: { weightModifier?: number | undefined; familyModifier?: FontFamily | undefined } = {},
 ): ResolvedFont {
   const lineHeight = lineHeightFor(size);
-  const css = `${weight} ${formatPx(size)}/${lineHeight}px ${FONT_FAMILIES[family]}`;
-  const font: ResolvedFont = { family, size, weight, lineHeight, css };
+  const css = `${weight} ${formatPx(size)}/${formatPx(lineHeight)} ${FONT_FAMILIES[family]}`;
+  const font: ResolvedFont = { family, size, weight, lineHeight, leading: leadingFor(size), css };
   if (modifiers.weightModifier !== undefined) font.weightModifier = modifiers.weightModifier;
   if (modifiers.familyModifier !== undefined) font.familyModifier = modifiers.familyModifier;
   return font;
 }
 
-/** Body text for the current `dynamicTypeSize` (17/22 at Large). */
+/** Body text for the current `dynamicTypeSize` (17/20.33 at Large). */
 export function defaultFont(env: LayoutEnvironment): ResolvedFont {
   return makeFont('system', textStyleSize('body', env.dynamicTypeSize), 400);
 }

package/src/layoutDom.ts

@@ -37,7 +37,8 @@ import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, T
 import { applyChartChrome } from './chartDom';
 import { bitmapLaidOut } from './bitmaps';
 import { drawRichText } from './richText';
-import { bindLargeTitle } from './largeTitle';
+import { bindScrollUnderBar, largeTitleOf, largeTitleScrolls } from './largeTitle';
+import { bindScrollEdgeBottom } from './scrollEdge';
 
 export interface LayoutDomContext {
   root: HTMLElement;
@@ -236,6 +237,47 @@ function positionBox(el: HTMLElement, box: Rect, origin: { x: number; y: number
 }
 
 /** Position a chrome node inside its element: `rect` is in screen coordinates. */
+/**
+ * An edit-mode control fades in when it first appears (the list started
+ * editing), marked `data-sb-appear` for the animation's duration. A control
+ * that is laid out again while shown, or whose row is moved in the DOM (a
+ * reorder re-inserts the row, which would restart a CSS animation on it),
+ * is not marked and stays put.
+ */
+function placeEditControl(node: HTMLElement | null, rect: Rect | undefined, origin: Rect): void {
+  if (!node) return;
+  const wasHidden = node.hidden;
+  placeChrome(node, rect, origin);
+  if (wasHidden && !node.hidden) {
+    node.dataset['sbAppear'] = '';
+    const settle = (): void => {
+      delete node.dataset['sbAppear'];
+    };
+    node.addEventListener('animationend', settle, { once: true });
+    node.addEventListener('animationcancel', settle, { once: true });
+  }
+}
+
+/**
+ * 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) {
@@ -261,16 +303,21 @@ function positionSheetCard(sheet: HTMLElement, frame: Rect): void {
   s.height = `${frame.height}px`;
 }
 
-function setFont(el: HTMLElement, font: ResolvedFont | undefined): void {
+/**
+ * `lines` > 1: a paragraph, whose lines are a leading apart (the engine makes
+ * it the first line's height plus a leading per further line).
+ */
+function setFont(el: HTMLElement, font: ResolvedFont | undefined, lines = 1): void {
   if (!font) return;
-  if (el.style.font !== font.css) el.style.font = font.css;
+  const css = lines > 1 ? font.css.replace(/\/[\d.]+px /, `/${Math.round(font.leading * 100) / 100}px `) : font.css;
+  if (el.style.font !== css) el.style.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);
+  setFont(el, layout.font, layout.lines.length);
   const align = TEXT_ALIGN[layout.alignment] ?? 'left';
   if (el.style.textAlign !== align) el.style.textAlign = align;
   if (layout.rich && el.dataset['sbRich'] !== undefined) {
@@ -373,8 +420,9 @@ function applyChrome(
     }
     case 'textfield':
     case 'texteditor':
-      // A vertical text field draws in the font its lines were measured in.
-      setFont(el, result.fonts.get(node.id));
+      // A vertical text field draws in the font its lines were measured in,
+      // a leading apart.
+      setFont(el, result.fonts.get(node.id), el instanceof HTMLTextAreaElement ? 2 : 1);
       padIntoFrame(el, box, frame);
       return;
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.
@@ -463,7 +511,7 @@ function applyChrome(
       if (header && texts?.['header']) setTextLayout(header, texts['header']);
       if (footer && texts?.['footer']) {
         // The prop text in the engine's font and rect, wrapped there.
-        setFont(footer, texts['footer'].font);
+        setFont(footer, texts['footer'].font, texts['footer'].lines.length);
         footer.style.textAlign = 'left';
         footer.style.whiteSpace = 'pre-wrap';
         const original = typeof node.props['footer'] === 'string' ? node.props['footer'] : texts['footer'].lines.join('\n');
@@ -479,7 +527,8 @@ function applyChrome(
         // Extra scrollable space at the end (the engine's frames are unchanged).
         content.style.height = `${size.height + bottomInset}px`;
       }
-      bindLargeTitle(el, chrome?.['largeTitle'] !== undefined);
+      bindScrollUnderBar(el, frame, chrome?.['topInset'], chrome?.['largeTitle']);
+      bindScrollEdgeBottom(el, chrome?.['bottomInset']);
       return;
     }
     case 'scrollview': {
@@ -494,24 +543,34 @@ function applyChrome(
         s.marginLeft = `${rect ? rect.x - frame.x : 0}px`;
         s.marginTop = `${rect ? rect.y - frame.y : 0}px`;
       }
-      bindLargeTitle(el, chrome?.['largeTitle'] !== undefined);
+      bindScrollUnderBar(el, frame, chrome?.['topInset'], chrome?.['largeTitle']);
+      bindScrollEdgeBottom(el, String(node.props['axes'] ?? 'vertical') === 'horizontal' ? undefined : chrome?.['bottomInset']);
       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 largeTitle = largeTitleOf(el);
       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`;
+        // The 44px bar row sits under the status bar portion of the rect
+        // (iOS 26: an inline bar keeps 10 more below it).
+        const row = chrome?.['barRow'];
+        const top = row ? row.y - barRect.y : Math.max(0, barRect.height - NAV_BAR_HEIGHT);
+        const bottom = row ? Math.max(0, barRect.y + barRect.height - (row.y + row.height)) : 0;
+        bar.style.paddingTop = `${top}px`;
+        bar.style.paddingBottom = `${bottom}px`;
       }
+      syncBottomGlass(el, chrome, frame);
       const largeRect = chrome?.['largeTitle'];
       if (largeTitle) {
         if (largeRect) {
-          placeChrome(largeTitle, largeRect, frame);
+          // A title that scrolls with the screen's scroll view is placed by
+          // it (src/largeTitle.ts).
+          if (largeTitleScrolls(el, largeTitle)) largeTitle.hidden = false;
+          else placeChrome(largeTitle, largeRect, frame);
           if (texts?.['largeTitle']) {
             setFont(largeTitle, texts['largeTitle'].font);
             const line = texts['largeTitle'].lines.join('\n');
@@ -539,6 +598,10 @@ function applyChrome(
       if (back && backLabel && backRect && texts?.['back']) {
         const text = texts['back'].lines[0] ?? '';
         back.style.maxWidth = `${backRect.width}px`;
+        // The bar pads its row 16 (styles.css); a split view's sidebar
+        // toggle can push the back button further in (chrome.back).
+        const indent = barRect ? Math.max(0, backRect.x - barRect.x - 16) : 0;
+        back.style.marginLeft = indent > 0 ? `${indent}px` : '';
         backLabel.dataset['sbLayoutLabel'] = text;
         if (backLabel.textContent !== text) backLabel.textContent = text;
         setFont(back, texts['back'].font);
@@ -563,9 +626,15 @@ function applyChrome(
       items.forEach((item, i) => placeChrome(item, chrome?.[`item${i}`], barRect));
       return;
     }
+    case 'inspector': {
+      setFlag(el, 'sbPresented', node.props['presented'] === true ? '' : null);
+      return;
+    }
     case 'navsplit': {
-      // Phase 7: the hairline between the two columns.
+      // Phase 7: the hairline between the two columns, and the sidebar toggle.
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navsplit-separator'), chrome?.['separator'], box);
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navsplit-toggle'), chrome?.['toggle'], box);
+      setFlag(el, 'sbSidebarHidden', node.props['sidebarVisible'] === false ? '' : null);
       return;
     }
     case 'gauge': {
@@ -583,8 +652,10 @@ function applyChrome(
       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);
+      // engine's `editControl` rect and the reorder grip at `reorderControl`;
+      // hidden when the list is not editing.
+      placeEditControl(el.querySelector<HTMLElement>(':scope > .sb-listrow-control'), chrome?.['editControl'], box);
+      placeEditControl(el.querySelector<HTMLElement>(':scope > .sb-swipe-content > .sb-listrow-grip'), chrome?.['reorderControl'], box);
       return;
     case 'picker': {
       setFont(el, result.fonts.get(node.id));

package/src/page.css

@@ -0,0 +1,234 @@
+/* ---------------------------------------------------------------------------
+   The device page (app/index.html): the page around the iPhone frame, with
+   its toolbar, its stage and its error banner. Not the renderer's: a page
+   that draws an island (@swiftbrowser/react's `SwiftUIView`) imports
+   styles.css alone and keeps its own layout.
+   ------------------------------------------------------------------------- */
+
+:root {
+  --page-bg: #e9e9ee;
+  --page-fg: #1c1c1e;
+  --page-muted: #6e6e73;
+  --page-border: rgba(0, 0, 0, 0.08);
+  --page-surface: rgba(255, 255, 255, 0.8);
+  --page-error-bg: #ffe5e5;
+  --page-error-fg: #a1000d;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --page-bg: #111114;
+    --page-fg: #f2f2f7;
+    --page-muted: #98989f;
+    --page-border: rgba(255, 255, 255, 0.1);
+    --page-surface: rgba(28, 28, 30, 0.85);
+    --page-error-bg: #3a0b10;
+    --page-error-fg: #ff8a8a;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--page-bg);
+  color: var(--page-fg);
+  font-family: var(--sb-font-family);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  background: var(--page-surface);
+  border-bottom: 1px solid var(--page-border);
+  backdrop-filter: blur(16px);
+}
+
+.toolbar-brand {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.toolbar-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--page-border);
+}
+
+.toolbar-label {
+  color: var(--page-muted);
+}
+
+.toolbar-value {
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--page-border);
+}
+
+.toolbar-spacer {
+  flex: 1 1 0;
+}
+
+/* Hot-reload indicator, driven by the dev server's sb:build-* events (the
+   `sb-spin` keyframes are styles.css's, loaded with this file). */
+.toolbar-build {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--page-muted);
+}
+
+.toolbar-build[hidden] {
+  display: none;
+}
+
+.toolbar-build::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  animation: sb-spin 0.9s linear infinite;
+}
+
+.toolbar-build[data-state="error"] {
+  color: var(--page-error-fg);
+}
+
+.toolbar-build[data-state="error"]::before {
+  animation: none;
+  border-color: currentColor;
+}
+
+.toolbar-button {
+  font: inherit;
+  padding: 6px 12px;
+  border: 1px solid var(--page-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--page-fg);
+  cursor: pointer;
+}
+
+.toolbar-button:hover {
+  background: var(--page-border);
+}
+
+.toolbar-button[aria-pressed="true"] {
+  background: var(--page-fg);
+  color: var(--page-bg);
+  border-color: transparent;
+}
+
+.toolbar-select {
+  font: inherit;
+  padding: 5px 8px;
+  border: 1px solid var(--page-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--page-fg);
+  cursor: pointer;
+}
+
+.stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 32px 16px 48px;
+}
+
+.status {
+  max-width: 560px;
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: var(--page-error-bg);
+  color: var(--page-error-fg);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ---------------------------------------------------------------------------
+   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
+   system background from the first paint (Safari tints its status bar strip
+   from it; chromeColor.ts then keeps it at the color the app draws at its
+   top edge), and the error banner floating clear of the home indicator.
+   ------------------------------------------------------------------------- */
+
+html[data-sb-mode="device"] {
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+  /* No double-tap zoom, no text inflation in landscape. */
+  touch-action: manipulation;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+html[data-sb-mode="device"] body {
+  min-height: 100dvh;
+  overflow: hidden;
+  overscroll-behavior: none;
+  touch-action: manipulation;
+}
+
+/* The page behind the app is the OS appearance's system background from the
+   first paint (Safari tints its status bar strip from it); chromeColor.ts
+   then keeps it at the color the app draws at its top edge. */
+html[data-sb-mode="device"],
+html[data-sb-mode="device"] body {
+  background: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  html[data-sb-mode="device"],
+  html[data-sb-mode="device"] body {
+    background: #000000;
+  }
+}
+
+html[data-sb-mode="device"] .toolbar {
+  display: none;
+}
+
+html[data-sb-mode="device"] .stage {
+  padding: 0;
+  gap: 0;
+}
+
+/* The error banner floats over the app, clear of the home indicator. */
+html[data-sb-mode="device"] .status {
+  position: fixed;
+  left: 16px;
+  right: 16px;
+  bottom: calc(16px + var(--sb-inset-bottom));
+  z-index: 10;
+  max-width: none;
+  max-height: 40dvh;
+  overflow: auto;
+}