@swiftbrowser/web 0.1.0

package/src/mock.ts

@@ -0,0 +1,752 @@
+/**
+ * Mock apps used by `?mock=1`: screens expressed as ops, with a tiny in-page
+ * "Swift core" that answers events with ops. Lets the renderer be exercised
+ * end to end without a Wasm build.
+ *
+ * - `?mock=1` (or `&app=Counter`): the Phase 1 Counter screen.
+ * - `?mock=1&app=Todos`: a Phase 2 navigation stack with a list, toggle,
+ *   navigation link, text field and bordered button.
+ * - `?mock=1&app=Gallery`: Phase 3 text styles (Dynamic Type), `color` and
+ *   `shape` views, an animated subtree with a transition, and a `sheet`.
+ * - `?mock=1&app=Settings`: Phase 4 `tabview` with a `geometry` reader in a
+ *   navigation stack and a `grouped` list of `picker`s.
+ */
+
+import type { ElementId, Op, RendererEvent, TextStyle } from './protocol';
+import type { AppHandle, OpsSink } from './wasm';
+
+export type MockAppName = 'Counter' | 'Todos' | 'Gallery' | 'Settings';
+
+export interface MockAppHandle extends AppHandle {
+  /** Every event the renderer delivered, in order (for tests). */
+  readonly received: RendererEvent[];
+}
+
+/** Handle fields every mock shares: no Wasm instance, JSON events, no executor. */
+const MOCK_BASE = {
+  exitCode: 0,
+  instance: undefined as unknown as WebAssembly.Instance,
+  supportsJsonEvents: true,
+  supportsJobs: false,
+  runJobs: (): number | null => null,
+} as const;
+
+export const MOCK_IDS = {
+  root: 0,
+  vstack: 1,
+  titleStyle: 2,
+  title: 3,
+  countStyle: 4,
+  count: 5,
+  controls: 6,
+  minusPad: 7,
+  minusButton: 8,
+  minusLabel: 9,
+  plusPad: 10,
+  plusButton: 11,
+  plusLabel: 12,
+} as const;
+
+/** First render pass of the Counter app, as the Swift core would emit it. */
+export function counterFixture(count = 0): Op[] {
+  const ids = MOCK_IDS;
+  return [
+    { op: 'create', id: ids.vstack, kind: 'vstack', props: { spacing: 16, alignment: 'center' } },
+    {
+      op: 'create',
+      id: ids.titleStyle,
+      kind: 'styled',
+      props: { style: { font: { size: 34, weight: 'bold', design: 'default' } } },
+    },
+    { op: 'create', id: ids.title, kind: 'text', props: { text: 'Counter' } },
+    {
+      op: 'create',
+      id: ids.countStyle,
+      kind: 'styled',
+      props: {
+        style: {
+          font: { size: 48, weight: 'semibold', design: 'monospaced' },
+          foreground: { name: 'primary' },
+        },
+      },
+    },
+    { op: 'create', id: ids.count, kind: 'text', props: { text: String(count) } },
+    { op: 'create', id: ids.controls, kind: 'hstack', props: { spacing: 24, alignment: 'center' } },
+    {
+      op: 'create',
+      id: ids.minusPad,
+      kind: 'styled',
+      props: { style: { padding: { top: 8, leading: 16, bottom: 8, trailing: 16 } } },
+    },
+    { op: 'create', id: ids.minusButton, kind: 'button', props: {} },
+    { op: 'create', id: ids.minusLabel, kind: 'text', props: { text: '−' } },
+    {
+      op: 'create',
+      id: ids.plusPad,
+      kind: 'styled',
+      props: { style: { padding: { top: 8, leading: 16, bottom: 8, trailing: 16 } } },
+    },
+    { op: 'create', id: ids.plusButton, kind: 'button', props: {} },
+    { op: 'create', id: ids.plusLabel, kind: 'text', props: { text: '+' } },
+
+    { op: 'insert', parent: ids.root, id: ids.vstack, index: 0 },
+    { op: 'insert', parent: ids.vstack, id: ids.titleStyle, index: 0 },
+    { op: 'insert', parent: ids.titleStyle, id: ids.title, index: 0 },
+    { op: 'insert', parent: ids.vstack, id: ids.countStyle, index: 1 },
+    { op: 'insert', parent: ids.countStyle, id: ids.count, index: 0 },
+    { op: 'insert', parent: ids.vstack, id: ids.controls, index: 2 },
+    { op: 'insert', parent: ids.controls, id: ids.minusPad, index: 0 },
+    { op: 'insert', parent: ids.minusPad, id: ids.minusButton, index: 0 },
+    { op: 'insert', parent: ids.minusButton, id: ids.minusLabel, index: 0 },
+    { op: 'insert', parent: ids.controls, id: ids.plusPad, index: 1 },
+    { op: 'insert', parent: ids.plusPad, id: ids.plusButton, index: 0 },
+    { op: 'insert', parent: ids.plusButton, id: ids.plusLabel, index: 0 },
+    { op: 'commit' },
+  ];
+}
+
+/** Emits the first render pass and answers taps on the two buttons. */
+export function createCounterMock(onOps: OpsSink): MockAppHandle {
+  let count = 0;
+  const received: RendererEvent[] = [];
+  onOps(counterFixture(count));
+  const sendEvent = (id: ElementId): void => {
+    received.push({ type: 'tap', id });
+    if (id === MOCK_IDS.plusButton) count += 1;
+    else if (id === MOCK_IDS.minusButton) count -= 1;
+    else return;
+    onOps([{ op: 'update', id: MOCK_IDS.count, props: { text: String(count) } }, { op: 'commit' }]);
+  };
+  return {
+    ...MOCK_BASE,
+    received,
+    sendEvent,
+    sendEventJson(event) {
+      if (event.type === 'tap') sendEvent(event.id);
+      else received.push(event);
+      return true;
+    },
+    snapshotState: () => JSON.stringify({ 'ContentView#0': count }),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Todos (Phase 2)
+// ---------------------------------------------------------------------------
+
+export const TODOS_IDS = {
+  root: 0,
+  navstack: 1,
+  screen: 2,
+  list: 3,
+  todaySection: 4,
+  toggle: 5,
+  toggleLabel: 6,
+  navlink: 7,
+  navlinkLabel: 8,
+  doneRow: 9,
+  doneIconStyle: 10,
+  doneIcon: 11,
+  doneText: 12,
+  addSection: 13,
+  addRow: 14,
+  field: 15,
+  addDisabled: 16,
+  addButton: 17,
+  addLabel: 18,
+  // Pushed on navlink tap.
+  detailScreen: 20,
+  detailStack: 21,
+  detailText: 22,
+} as const;
+
+/** First render pass of the Todos mock: navstack > navscreen > list. */
+export function todosFixture(): Op[] {
+  const ids = TODOS_IDS;
+  return [
+    { op: 'create', id: ids.navstack, kind: 'navstack', props: {} },
+    { op: 'insert', parent: ids.root, id: ids.navstack, index: 0 },
+    {
+      op: 'create',
+      id: ids.screen,
+      kind: 'navscreen',
+      props: { title: 'Todos', displayMode: 'large', depth: 0 },
+    },
+    { op: 'insert', parent: ids.navstack, id: ids.screen, index: 0 },
+    { op: 'create', id: ids.list, kind: 'list', props: {} },
+    { op: 'insert', parent: ids.screen, id: ids.list, index: 0 },
+
+    { op: 'create', id: ids.todaySection, kind: 'section', props: { header: 'Today', footer: null } },
+    { op: 'insert', parent: ids.list, id: ids.todaySection, index: 0 },
+    { op: 'create', id: ids.toggle, kind: 'toggle', props: { isOn: false } },
+    { op: 'insert', parent: ids.todaySection, id: ids.toggle, index: 0 },
+    { op: 'create', id: ids.toggleLabel, kind: 'text', props: { text: 'Buy milk' } },
+    { op: 'insert', parent: ids.toggle, id: ids.toggleLabel, index: 0 },
+    { op: 'create', id: ids.navlink, kind: 'navlink', props: {} },
+    { op: 'insert', parent: ids.todaySection, id: ids.navlink, index: 1 },
+    { op: 'create', id: ids.navlinkLabel, kind: 'text', props: { text: 'Write the layout engine' } },
+    { op: 'insert', parent: ids.navlink, id: ids.navlinkLabel, index: 0 },
+    { op: 'create', id: ids.doneRow, kind: 'hstack', props: { spacing: 12, alignment: 'center' } },
+    { op: 'insert', parent: ids.todaySection, id: ids.doneRow, index: 2 },
+    {
+      op: 'create',
+      id: ids.doneIconStyle,
+      kind: 'styled',
+      props: { style: { foreground: { r: 0.204, g: 0.78, b: 0.349, a: 1 } } },
+    },
+    { op: 'insert', parent: ids.doneRow, id: ids.doneIconStyle, index: 0 },
+    { op: 'create', id: ids.doneIcon, kind: 'image', props: { systemName: 'checkmark.circle.fill' } },
+    { op: 'insert', parent: ids.doneIconStyle, id: ids.doneIcon, index: 0 },
+    { op: 'create', id: ids.doneText, kind: 'text', props: { text: 'Ship Phase 2' } },
+    { op: 'insert', parent: ids.doneRow, id: ids.doneText, index: 1 },
+
+    { op: 'create', id: ids.addSection, kind: 'section', props: { header: null, footer: 'Press Add to save.' } },
+    { op: 'insert', parent: ids.list, id: ids.addSection, index: 1 },
+    { op: 'create', id: ids.addRow, kind: 'hstack', props: { spacing: null, alignment: 'center' } },
+    { op: 'insert', parent: ids.addSection, id: ids.addRow, index: 0 },
+    {
+      op: 'create',
+      id: ids.field,
+      kind: 'textfield',
+      props: { text: '', placeholder: 'New todo', style: 'roundedBorder', secure: false },
+    },
+    { op: 'insert', parent: ids.addRow, id: ids.field, index: 0 },
+    { op: 'create', id: ids.addDisabled, kind: 'styled', props: { style: { disabled: true } } },
+    { op: 'insert', parent: ids.addRow, id: ids.addDisabled, index: 1 },
+    { op: 'create', id: ids.addButton, kind: 'button', props: { style: 'bordered', role: null } },
+    { op: 'insert', parent: ids.addDisabled, id: ids.addButton, index: 0 },
+    { op: 'create', id: ids.addLabel, kind: 'text', props: { text: 'Add' } },
+    { op: 'insert', parent: ids.addButton, id: ids.addLabel, index: 0 },
+    { op: 'commit' },
+  ];
+}
+
+/** Ops that push the detail screen (navlink tap). */
+export function todosDetailFixture(): Op[] {
+  const ids = TODOS_IDS;
+  return [
+    {
+      op: 'create',
+      id: ids.detailScreen,
+      kind: 'navscreen',
+      props: { title: 'Detail', displayMode: 'inline', depth: 1 },
+    },
+    { op: 'insert', parent: ids.navstack, id: ids.detailScreen, index: 1 },
+    { op: 'create', id: ids.detailStack, kind: 'vstack', props: { spacing: 12, alignment: 'center' } },
+    { op: 'insert', parent: ids.detailScreen, id: ids.detailStack, index: 0 },
+    { op: 'create', id: ids.detailText, kind: 'text', props: { text: 'Write the layout engine' } },
+    { op: 'insert', parent: ids.detailStack, id: ids.detailText, index: 0 },
+    { op: 'commit' },
+  ];
+}
+
+/**
+ * Todos mock: toggling flips `isOn`, the navlink pushes a detail screen, a
+ * tap on the detail screen's own id (the back button) pops it, typing in the
+ * field echoes the text back and enables the Add button.
+ */
+export function createTodosMock(onOps: OpsSink): MockAppHandle {
+  const ids = TODOS_IDS;
+  const received: RendererEvent[] = [];
+  let isOn = false;
+  let draft = '';
+  let detailShown = false;
+  onOps(todosFixture());
+
+  const sendEvent = (id: ElementId): void => {
+    received.push({ type: 'tap', id });
+    if (id === ids.navlink && !detailShown) {
+      detailShown = true;
+      onOps(todosDetailFixture());
+    } else if (id === ids.detailScreen && detailShown) {
+      detailShown = false;
+      onOps([{ op: 'remove', id: ids.detailScreen }, { op: 'commit' }]);
+    } else if (id === ids.addButton) {
+      draft = '';
+      onOps([
+        {
+          op: 'update',
+          id: ids.field,
+          props: { text: '', placeholder: 'New todo', style: 'roundedBorder', secure: false },
+        },
+        { op: 'update', id: ids.addDisabled, props: { style: { disabled: true } } },
+        { op: 'commit' },
+      ]);
+    }
+  };
+
+  return {
+    ...MOCK_BASE,
+    received,
+    sendEvent,
+    sendEventJson(event) {
+      switch (event.type) {
+        case 'tap':
+          sendEvent(event.id);
+          break;
+        case 'toggle':
+          received.push(event);
+          if (event.id === ids.toggle) {
+            isOn = event.value;
+            onOps([{ op: 'update', id: ids.toggle, props: { isOn } }, { op: 'commit' }]);
+          }
+          break;
+        case 'text':
+          received.push(event);
+          if (event.id === ids.field) {
+            const wasEmpty = draft.length === 0;
+            draft = event.value;
+            const ops: Op[] = [
+              {
+                op: 'update',
+                id: ids.field,
+                props: { text: draft, placeholder: 'New todo', style: 'roundedBorder', secure: false },
+              },
+            ];
+            if (wasEmpty !== (draft.length === 0)) {
+              ops.push({
+                op: 'update',
+                id: ids.addDisabled,
+                props: { style: draft.length === 0 ? { disabled: true } : {} },
+              });
+            }
+            ops.push({ op: 'commit' });
+            onOps(ops);
+          }
+          break;
+        default:
+          received.push(event);
+          break;
+      }
+      return true;
+    },
+    snapshotState: () => JSON.stringify({ 'ContentView#0': draft, 'ContentView#1': isOn }),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Gallery (Phase 3)
+// ---------------------------------------------------------------------------
+
+export const GALLERY_IDS = {
+  root: 0,
+  vstack: 1,
+  /** `styled{font: textStyle}` boxes are 10, 12, …; their texts 11, 13, … (see GALLERY_TEXT_STYLES). */
+  firstTextStyle: 10,
+  shapes: 40,
+  colorFrame: 41,
+  color: 42,
+  circleFrame: 43,
+  circle: 44,
+  capsuleFrame: 45,
+  capsule: 46,
+  /** `styled{animation, animationToken}` around the animated subtree. */
+  animated: 50,
+  animatedStack: 51,
+  boxFrame: 52,
+  box: 53,
+  expandedTransition: 54,
+  expandedText: 55,
+  controls: 60,
+  toggleButton: 61,
+  toggleLabel: 62,
+  sheetButton: 63,
+  sheetLabel: 64,
+  sheet: 70,
+  sheetStack: 71,
+  sheetTitleStyle: 72,
+  sheetTitle: 73,
+  doneButton: 74,
+  doneLabel: 75,
+} as const;
+
+/** Text styles shown in the Gallery, top to bottom; the i-th uses ids 10+2i / 11+2i. */
+export const GALLERY_TEXT_STYLES: readonly TextStyle[] = [
+  'largeTitle',
+  'title',
+  'title2',
+  'title3',
+  'headline',
+  'body',
+  'callout',
+  'subheadline',
+  'footnote',
+  'caption',
+  'caption2',
+];
+
+export function galleryTextStyleIds(style: TextStyle): { styled: number; text: number } {
+  const i = GALLERY_TEXT_STYLES.indexOf(style);
+  return { styled: GALLERY_IDS.firstTextStyle + 2 * i, text: GALLERY_IDS.firstTextStyle + 2 * i + 1 };
+}
+
+const BLUE = { r: 0, g: 0.478, b: 1, a: 1 };
+const RED = { r: 1, g: 0.231, b: 0.188, a: 1 };
+const GREEN = { r: 0.204, g: 0.78, b: 0.349, a: 1 };
+
+/** The animated box: `styled{frame}` > `shape`; expanded doubles the width and swaps the fill. */
+function galleryBoxOps(expanded: boolean): Op[] {
+  const ids = GALLERY_IDS;
+  return [
+    {
+      op: 'update',
+      id: ids.boxFrame,
+      props: { style: { frame: { width: expanded ? 160 : 80, height: 40 } } },
+    },
+    {
+      op: 'update',
+      id: ids.box,
+      props: { shape: 'roundedRectangle', cornerRadius: 12, fill: expanded ? GREEN : RED, stroke: null },
+    },
+  ];
+}
+
+/** First render pass of the Gallery mock. */
+export function galleryFixture(): Op[] {
+  const ids = GALLERY_IDS;
+  const ops: Op[] = [
+    { op: 'create', id: ids.vstack, kind: 'vstack', props: { spacing: 6, alignment: 'center' } },
+    { op: 'insert', parent: ids.root, id: ids.vstack, index: 0 },
+  ];
+  GALLERY_TEXT_STYLES.forEach((textStyle, i) => {
+    const { styled, text } = galleryTextStyleIds(textStyle);
+    ops.push(
+      { op: 'create', id: styled, kind: 'styled', props: { style: { font: { textStyle } } } },
+      { op: 'insert', parent: ids.vstack, id: styled, index: i },
+      { op: 'create', id: text, kind: 'text', props: { text: textStyle } },
+      { op: 'insert', parent: styled, id: text, index: 0 },
+    );
+  });
+  const after = GALLERY_TEXT_STYLES.length;
+  ops.push(
+    // Color and shapes in fixed frames.
+    { op: 'create', id: ids.shapes, kind: 'hstack', props: { spacing: 16, alignment: 'center' } },
+    { op: 'insert', parent: ids.vstack, id: ids.shapes, index: after },
+    { op: 'create', id: ids.colorFrame, kind: 'styled', props: { style: { frame: { width: 60, height: 60 } } } },
+    { op: 'insert', parent: ids.shapes, id: ids.colorFrame, index: 0 },
+    { op: 'create', id: ids.color, kind: 'color', props: { color: BLUE } },
+    { op: 'insert', parent: ids.colorFrame, id: ids.color, index: 0 },
+    { op: 'create', id: ids.circleFrame, kind: 'styled', props: { style: { frame: { width: 60, height: 60 } } } },
+    { op: 'insert', parent: ids.shapes, id: ids.circleFrame, index: 1 },
+    { op: 'create', id: ids.circle, kind: 'shape', props: { shape: 'circle', cornerRadius: 0, fill: BLUE, stroke: null } },
+    { op: 'insert', parent: ids.circleFrame, id: ids.circle, index: 0 },
+    { op: 'create', id: ids.capsuleFrame, kind: 'styled', props: { style: { frame: { width: 100, height: 44 } } } },
+    { op: 'insert', parent: ids.shapes, id: ids.capsuleFrame, index: 2 },
+    {
+      op: 'create',
+      id: ids.capsule,
+      kind: 'shape',
+      props: { shape: 'capsule', cornerRadius: 0, fill: null, stroke: { color: { name: 'accent' }, lineWidth: 2 } },
+    },
+    { op: 'insert', parent: ids.capsuleFrame, id: ids.capsule, index: 0 },
+
+    // Animated subtree: `.animation(.bouncy, value: expanded)`.
+    {
+      op: 'create',
+      id: ids.animated,
+      kind: 'styled',
+      props: { style: { animation: { type: 'spring', duration: 0.5, bounce: 0.3 }, animationToken: 0 } },
+    },
+    { op: 'insert', parent: ids.vstack, id: ids.animated, index: after + 1 },
+    { op: 'create', id: ids.animatedStack, kind: 'vstack', props: { spacing: 8, alignment: 'center' } },
+    { op: 'insert', parent: ids.animated, id: ids.animatedStack, index: 0 },
+    { op: 'create', id: ids.boxFrame, kind: 'styled', props: { style: { frame: { width: 80, height: 40 } } } },
+    { op: 'insert', parent: ids.animatedStack, id: ids.boxFrame, index: 0 },
+    { op: 'create', id: ids.box, kind: 'shape', props: { shape: 'roundedRectangle', cornerRadius: 12, fill: RED, stroke: null } },
+    { op: 'insert', parent: ids.boxFrame, id: ids.box, index: 0 },
+
+    // Controls.
+    { op: 'create', id: ids.controls, kind: 'hstack', props: { spacing: 16, alignment: 'center' } },
+    { op: 'insert', parent: ids.vstack, id: ids.controls, index: after + 2 },
+    { op: 'create', id: ids.toggleButton, kind: 'button', props: { style: 'bordered', role: null } },
+    { op: 'insert', parent: ids.controls, id: ids.toggleButton, index: 0 },
+    { op: 'create', id: ids.toggleLabel, kind: 'text', props: { text: 'Toggle' } },
+    { op: 'insert', parent: ids.toggleButton, id: ids.toggleLabel, index: 0 },
+    { op: 'create', id: ids.sheetButton, kind: 'button', props: { style: 'borderedProminent', role: null } },
+    { op: 'insert', parent: ids.controls, id: ids.sheetButton, index: 1 },
+    { op: 'create', id: ids.sheetLabel, kind: 'text', props: { text: 'Show sheet' } },
+    { op: 'insert', parent: ids.sheetButton, id: ids.sheetLabel, index: 0 },
+    { op: 'commit' },
+  );
+  return ops;
+}
+
+/** Ops that present the sheet (root-level `sheet` after the app's tree). */
+export function gallerySheetFixture(): Op[] {
+  const ids = GALLERY_IDS;
+  return [
+    { op: 'create', id: ids.sheet, kind: 'sheet', props: { detents: ['large'] } },
+    { op: 'insert', parent: ids.root, id: ids.sheet, index: 1 },
+    { op: 'create', id: ids.sheetStack, kind: 'vstack', props: { spacing: 16, alignment: 'center' } },
+    { op: 'insert', parent: ids.sheet, id: ids.sheetStack, index: 0 },
+    { op: 'create', id: ids.sheetTitleStyle, kind: 'styled', props: { style: { font: { textStyle: 'title2' } } } },
+    { op: 'insert', parent: ids.sheetStack, id: ids.sheetTitleStyle, index: 0 },
+    { op: 'create', id: ids.sheetTitle, kind: 'text', props: { text: 'Sheet' } },
+    { op: 'insert', parent: ids.sheetTitleStyle, id: ids.sheetTitle, index: 0 },
+    { op: 'create', id: ids.doneButton, kind: 'button', props: { style: 'bordered', role: null } },
+    { op: 'insert', parent: ids.sheetStack, id: ids.doneButton, index: 1 },
+    { op: 'create', id: ids.doneLabel, kind: 'text', props: { text: 'Done' } },
+    { op: 'insert', parent: ids.doneButton, id: ids.doneLabel, index: 0 },
+    { op: 'commit' },
+  ];
+}
+
+/**
+ * Gallery mock: "Toggle" bumps the `animationToken` of the animated subtree,
+ * swaps the box's fill and width and inserts (or removes) an "Expanded" text
+ * with an opacity transition, all inside a `withAnimation(.easeInOut)`
+ * commit. "Show sheet" presents the sheet; "Done" or a tap on the sheet's
+ * own id (scrim / drag) removes it.
+ */
+export function createGalleryMock(onOps: OpsSink): MockAppHandle {
+  const ids = GALLERY_IDS;
+  const received: RendererEvent[] = [];
+  let expanded = false;
+  let token = 0;
+  let sheetShown = false;
+  onOps(galleryFixture());
+
+  const sendEvent = (id: ElementId): void => {
+    received.push({ type: 'tap', id });
+    if (id === ids.toggleButton) {
+      expanded = !expanded;
+      token += 1;
+      const ops: Op[] = [
+        {
+          op: 'update',
+          id: ids.animated,
+          props: { style: { animation: { type: 'spring', duration: 0.5, bounce: 0.3 }, animationToken: token } },
+        },
+        ...galleryBoxOps(expanded),
+      ];
+      if (expanded) {
+        ops.push(
+          { op: 'create', id: ids.expandedTransition, kind: 'styled', props: { style: { transition: { kind: 'opacity' } } } },
+          { op: 'insert', parent: ids.animatedStack, id: ids.expandedTransition, index: 1 },
+          { op: 'create', id: ids.expandedText, kind: 'text', props: { text: 'Expanded' } },
+          { op: 'insert', parent: ids.expandedTransition, id: ids.expandedText, index: 0 },
+        );
+      } else {
+        ops.push({ op: 'remove', id: ids.expandedTransition });
+      }
+      ops.push({ op: 'commit', animation: { type: 'easeInOut', duration: 0.35 } });
+      onOps(ops);
+    } else if (id === ids.sheetButton && !sheetShown) {
+      sheetShown = true;
+      onOps(gallerySheetFixture());
+    } else if ((id === ids.doneButton || id === ids.sheet) && sheetShown) {
+      sheetShown = false;
+      onOps([{ op: 'remove', id: ids.sheet }, { op: 'commit' }]);
+    }
+  };
+
+  return {
+    ...MOCK_BASE,
+    received,
+    sendEvent,
+    sendEventJson(event) {
+      if (event.type === 'tap') sendEvent(event.id);
+      else received.push(event);
+      return true;
+    },
+    snapshotState: () => JSON.stringify({ 'ContentView#0': expanded, 'ContentView#1': sheetShown }),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Settings (Phase 4)
+// ---------------------------------------------------------------------------
+
+export const SETTINGS_IDS = {
+  root: 0,
+  tabview: 1,
+  homeTab: 2,
+  navstack: 3,
+  homeScreen: 4,
+  homeList: 5,
+  geometrySection: 6,
+  geometryFrame: 7,
+  geometry: 8,
+  geometryText: 9,
+  rowsSection: 10,
+  /** Rows "Item 1" … "Item N" are 11 … 10 + SETTINGS_ROW_COUNT. */
+  firstRow: 11,
+  settingsTab: 40,
+  settingsList: 41,
+  appearanceSection: 42,
+  appearancePicker: 43,
+  unitsSection: 44,
+  unitsPicker: 45,
+  toggle: 46,
+  toggleLabel: 47,
+} as const;
+
+/** Enough rows to make the Home list scroll under the tab bar. */
+export const SETTINGS_ROW_COUNT = 20;
+
+export const SETTINGS_OPTIONS = {
+  appearance: ['Light', 'Dark', 'Auto'],
+  units: ['Metric', 'Imperial'],
+} as const;
+
+/**
+ * First render pass of the Settings mock: a `tabview` whose Home tab holds a
+ * navigation stack with a geometry reader and a long inset-grouped list, and
+ * whose Settings tab holds a `grouped` list with a segmented picker, a menu
+ * picker and a toggle.
+ */
+export function settingsFixture(): Op[] {
+  const ids = SETTINGS_IDS;
+  const ops: Op[] = [
+    { op: 'create', id: ids.tabview, kind: 'tabview', props: { selected: 0 } },
+    { op: 'insert', parent: ids.root, id: ids.tabview, index: 0 },
+
+    // Home tab: navstack > navscreen "Home" > list.
+    { op: 'create', id: ids.homeTab, kind: 'tab', props: { title: 'Home', systemImage: 'house' } },
+    { op: 'insert', parent: ids.tabview, id: ids.homeTab, index: 0 },
+    { op: 'create', id: ids.navstack, kind: 'navstack', props: {} },
+    { op: 'insert', parent: ids.homeTab, id: ids.navstack, index: 0 },
+    { op: 'create', id: ids.homeScreen, kind: 'navscreen', props: { title: 'Home', displayMode: 'large', depth: 0 } },
+    { op: 'insert', parent: ids.navstack, id: ids.homeScreen, index: 0 },
+    { op: 'create', id: ids.homeList, kind: 'list', props: { style: 'insetGrouped' } },
+    { op: 'insert', parent: ids.homeScreen, id: ids.homeList, index: 0 },
+    { op: 'create', id: ids.geometrySection, kind: 'section', props: { header: 'Geometry', footer: null } },
+    { op: 'insert', parent: ids.homeList, id: ids.geometrySection, index: 0 },
+    // A GeometryReader in a list row would collapse to 10pt, like SwiftUI; give it a height.
+    { op: 'create', id: ids.geometryFrame, kind: 'styled', props: { style: { frame: { height: 22 } } } },
+    { op: 'insert', parent: ids.geometrySection, id: ids.geometryFrame, index: 0 },
+    { op: 'create', id: ids.geometry, kind: 'geometry', props: {} },
+    { op: 'insert', parent: ids.geometryFrame, id: ids.geometry, index: 0 },
+    { op: 'create', id: ids.geometryText, kind: 'text', props: { text: 'Waiting for geometry…' } },
+    { op: 'insert', parent: ids.geometry, id: ids.geometryText, index: 0 },
+    { op: 'create', id: ids.rowsSection, kind: 'section', props: { header: 'Rows', footer: null } },
+    { op: 'insert', parent: ids.homeList, id: ids.rowsSection, index: 1 },
+  ];
+  for (let i = 0; i < SETTINGS_ROW_COUNT; i++) {
+    ops.push(
+      { op: 'create', id: ids.firstRow + i, kind: 'text', props: { text: `Item ${i + 1}` } },
+      { op: 'insert', parent: ids.rowsSection, id: ids.firstRow + i, index: i },
+    );
+  }
+  ops.push(
+    // Settings tab: a grouped list (Form) of pickers and a toggle.
+    { op: 'create', id: ids.settingsTab, kind: 'tab', props: { title: 'Settings', systemImage: 'gear' } },
+    { op: 'insert', parent: ids.tabview, id: ids.settingsTab, index: 1 },
+    { op: 'create', id: ids.settingsList, kind: 'list', props: { style: 'grouped' } },
+    { op: 'insert', parent: ids.settingsTab, id: ids.settingsList, index: 0 },
+    { op: 'create', id: ids.appearanceSection, kind: 'section', props: { header: 'Appearance', footer: null } },
+    { op: 'insert', parent: ids.settingsList, id: ids.appearanceSection, index: 0 },
+    {
+      op: 'create',
+      id: ids.appearancePicker,
+      kind: 'picker',
+      props: { style: 'segmented', label: 'Appearance', options: [...SETTINGS_OPTIONS.appearance], selected: 0 },
+    },
+    { op: 'insert', parent: ids.appearanceSection, id: ids.appearancePicker, index: 0 },
+    { op: 'create', id: ids.unitsSection, kind: 'section', props: { header: 'Units', footer: 'Pickers send a select event with the index.' } },
+    { op: 'insert', parent: ids.settingsList, id: ids.unitsSection, index: 1 },
+    {
+      op: 'create',
+      id: ids.unitsPicker,
+      kind: 'picker',
+      props: { style: 'menu', label: 'Units', options: [...SETTINGS_OPTIONS.units], selected: 0 },
+    },
+    { op: 'insert', parent: ids.unitsSection, id: ids.unitsPicker, index: 0 },
+    { op: 'create', id: ids.toggle, kind: 'toggle', props: { isOn: true } },
+    { op: 'insert', parent: ids.unitsSection, id: ids.toggle, index: 1 },
+    { op: 'create', id: ids.toggleLabel, kind: 'text', props: { text: 'Notifications' } },
+    { op: 'insert', parent: ids.toggle, id: ids.toggleLabel, index: 0 },
+    { op: 'commit' },
+  );
+  return ops;
+}
+
+/**
+ * Settings mock: `select` on the tab view updates `selected` (the renderer
+ * switches tabs only on that update), `select` on a picker updates its
+ * `selected`, `toggle` flips the switch and a `geometry` event rewrites the
+ * reader's text with the reported size.
+ */
+export function createSettingsMock(onOps: OpsSink): MockAppHandle {
+  const ids = SETTINGS_IDS;
+  const received: RendererEvent[] = [];
+  let tab = 0;
+  let appearance = 0;
+  let units = 0;
+  let isOn = true;
+  onOps(settingsFixture());
+
+  const sendEvent = (id: ElementId): void => {
+    received.push({ type: 'tap', id });
+  };
+
+  return {
+    ...MOCK_BASE,
+    received,
+    sendEvent,
+    sendEventJson(event) {
+      switch (event.type) {
+        case 'tap':
+          sendEvent(event.id);
+          break;
+        case 'select':
+          received.push(event);
+          if (event.id === ids.tabview) {
+            tab = event.value;
+            onOps([{ op: 'update', id: ids.tabview, props: { selected: tab } }, { op: 'commit' }]);
+          } else if (event.id === ids.appearancePicker) {
+            appearance = event.value;
+            onOps([
+              {
+                op: 'update',
+                id: ids.appearancePicker,
+                props: { style: 'segmented', label: 'Appearance', options: [...SETTINGS_OPTIONS.appearance], selected: appearance },
+              },
+              { op: 'commit' },
+            ]);
+          } else if (event.id === ids.unitsPicker) {
+            units = event.value;
+            onOps([
+              {
+                op: 'update',
+                id: ids.unitsPicker,
+                props: { style: 'menu', label: 'Units', options: [...SETTINGS_OPTIONS.units], selected: units },
+              },
+              { op: 'commit' },
+            ]);
+          }
+          break;
+        case 'toggle':
+          received.push(event);
+          if (event.id === ids.toggle) {
+            isOn = event.value;
+            onOps([{ op: 'update', id: ids.toggle, props: { isOn } }, { op: 'commit' }]);
+          }
+          break;
+        case 'geometry':
+          received.push(event);
+          if (event.id === ids.geometry) {
+            onOps([
+              { op: 'update', id: ids.geometryText, props: { text: `${event.width} × ${event.height}` } },
+              { op: 'commit' },
+            ]);
+          }
+          break;
+        default:
+          received.push(event);
+          break;
+      }
+      return true;
+    },
+    snapshotState: () =>
+      JSON.stringify({ 'ContentView#0': tab, 'ContentView#1': appearance, 'ContentView#2': units, 'ContentView#3': isOn }),
+  };
+}
+
+/** Pick the mock for `?app=`; unknown names fall back to Counter. */
+export function createMockApp(onOps: OpsSink, name: string = 'Counter'): MockAppHandle {
+  if (name === 'Todos') return createTodosMock(onOps);
+  if (name === 'Gallery') return createGalleryMock(onOps);
+  if (name === 'Settings') return createSettingsMock(onOps);
+  return createCounterMock(onOps);
+}