@swiftbrowser/web 0.9.1 → 0.9.3

package/app/index.html

@@ -40,6 +40,9 @@
         var coarse = typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches;
         var device = mode === 'device' || (mode !== 'frame' && (coarse || site.pageMode === 'device'));
         document.documentElement.setAttribute('data-sb-mode', device ? 'device' : 'frame');
+        // ?embed=1: the page is in another's frame (the playground's
+        // simulator), which has its own controls: the device alone.
+        if (new URLSearchParams(location.search).get('embed') === '1') document.documentElement.setAttribute('data-sb-embed', '');
       })();
       // Point the manifest, the home-screen icon and the titles at the app
       // this page runs (?app=, else the site's default), so Share -> Add to

package/node/dist/plugins/playground.d.ts

@@ -2,7 +2,7 @@
  * The playground page (playground/index.html): Swift compiled in the browser
  * by the WebAssembly compiler (docs/in-browser-compiler.md, Milestone 3).
  * Only this repository's site has it: its code imports
- * @swiftbrowser/wasm-compiler and the CLI's browser entry from their sources
+ * @swiftbrowser/wasm-compiler, the CLI's browser entry and @swiftbrowser/react from their sources
  * (the aliases below). The page fetches the npm packages it reads
  * (src/playground/files.ts) from a CDN that serves them file by file, at one
  * version, except those the site serves itself (`localPackages`): the kit

package/node/dist/plugins/playground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../plugins/playground.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAMH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EAQL,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACtB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAEjD,6FAA6F;AAC7F,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAC3C,qEAAqE;AACrE,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAmB,CAAC;AAIhD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,QAAY,CAAC;AAE5C,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1E;AAED,2DAA2D;AAC3D,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAQvE;AAED,uEAAuE;AACvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAGxE;AAED,oEAAoE;AACpE,wBAAgB,aAAa,CAAC,QAAQ,EAAE,kBAAkB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAQjF;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAE,SAAS,MAAM,EAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CActG;AAMD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,SAAkB,EAAE,YAAY,SAAqB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CA0DnM;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,GAAG,MAAM,CA0BvF"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../plugins/playground.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAMH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EAQL,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACtB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAEjD,6FAA6F;AAC7F,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAC3C,qEAAqE;AACrE,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAmB,CAAC;AAIhD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,QAAY,CAAC;AAE5C,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAO1E;AAED,2DAA2D;AAC3D,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAQvE;AAED,uEAAuE;AACvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAGxE;AAED,oEAAoE;AACpE,wBAAgB,aAAa,CAAC,QAAQ,EAAE,kBAAkB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAQjF;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAE,SAAS,MAAM,EAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CActG;AAMD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,SAAkB,EAAE,YAAY,SAAqB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CA0DnM;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,GAAG,MAAM,CA0BvF"}

package/node/dist/plugins/playground.js

@@ -2,7 +2,7 @@
  * The playground page (playground/index.html): Swift compiled in the browser
  * by the WebAssembly compiler (docs/in-browser-compiler.md, Milestone 3).
  * Only this repository's site has it: its code imports
- * @swiftbrowser/wasm-compiler and the CLI's browser entry from their sources
+ * @swiftbrowser/wasm-compiler, the CLI's browser entry and @swiftbrowser/react from their sources
  * (the aliases below). The page fetches the npm packages it reads
  * (src/playground/files.ts) from a CDN that serves them file by file, at one
  * version, except those the site serves itself (`localPackages`): the kit
@@ -41,6 +41,8 @@ export function playgroundAliases(repoRoot) {
     return {
         '@swiftbrowser/wasm-compiler': path.join(repoRoot, 'packages/wasm-compiler/src/index.ts'),
         '@swiftbrowser/cli/browser': path.join(repoRoot, 'packages/cli/src/browser.ts'),
+        // The page's own UI is SwiftUI views from @swiftbrowser/react.
+        '@swiftbrowser/react': path.join(repoRoot, 'packages/react/src/index.ts'),
     };
 }
 /** The workspaces' package directories by package name. */

package/node/dist/plugins/playground.js.map

@@ -1 +1 @@
-{"version":3,"file":"playground.js","sourceRoot":"","sources":["../../../plugins/playground.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"playground.js","sourceRoot":"","sources":["../../../plugins/playground.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "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": {
@@ -56,7 +56,12 @@
     "@playwright/test": "^1.56.0",
     "@types/node": "^26.6.4",
     "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "brotli-dec-wasm": "^2.3.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-reconciler": "^0.34.0",
     "typescript": "^5.9.2",
     "vitest": "^5.0.3"
   }

package/plugins/playground.ts

@@ -2,7 +2,7 @@
  * The playground page (playground/index.html): Swift compiled in the browser
  * by the WebAssembly compiler (docs/in-browser-compiler.md, Milestone 3).
  * Only this repository's site has it: its code imports
- * @swiftbrowser/wasm-compiler and the CLI's browser entry from their sources
+ * @swiftbrowser/wasm-compiler, the CLI's browser entry and @swiftbrowser/react from their sources
  * (the aliases below). The page fetches the npm packages it reads
  * (src/playground/files.ts) from a CDN that serves them file by file, at one
  * version, except those the site serves itself (`localPackages`): the kit
@@ -58,6 +58,8 @@ export function playgroundAliases(repoRoot: string): Record<string, string> {
   return {
     '@swiftbrowser/wasm-compiler': path.join(repoRoot, 'packages/wasm-compiler/src/index.ts'),
     '@swiftbrowser/cli/browser': path.join(repoRoot, 'packages/cli/src/browser.ts'),
+    // The page's own UI is SwiftUI views from @swiftbrowser/react.
+    '@swiftbrowser/react': path.join(repoRoot, 'packages/react/src/index.ts'),
   };
 }
 

package/src/layout/engine.ts

@@ -3130,6 +3130,9 @@ export class LayoutPass {
         this.placeDatePicker(node, ctx, p, x, y, size);
         return;
       case 'texteditor':
+        // It draws in the context font, as a field does (the page's own
+        // font otherwise: a serif where the page sets none).
+        if (node.id >= 0) this.fonts.set(node.id, ctx.font);
         return;
       case 'swipeactions':
       case 'contextmenu': {

package/src/layoutDom.ts

@@ -492,6 +492,30 @@ function padIntoFrame(el: HTMLElement, box: Rect, frame: Rect, shift = 0): void
   if (s.paddingBottom !== paddingBottom) s.paddingBottom = paddingBottom;
 }
 
+/**
+ * A vertical field's textarea draws every line a leading apart, where the
+ * engine sized it as a Text: its first line a line height tall, the rest a
+ * leading apart. The textarea's lines need the difference more (2 px for
+ * the body style); without it they overflow by that much, and the textarea
+ * scrolls its text up while it is edited. The difference comes out of the
+ * padding below the lines (a list row's, a rounded border's), else the box
+ * reaches that much further down (into the space below it, which its lines
+ * leave empty).
+ */
+function fitFieldLines(el: HTMLTextAreaElement, font: ResolvedFont, box: Rect, frame: Rect): void {
+  const extra = Math.ceil(font.leading - font.lineHeight - 0.01);
+  if (extra <= 0) return;
+  const s = el.style;
+  const below = box.y + box.height - (frame.y + frame.height);
+  const padding = below > 0 ? below : el.dataset['sbStyle'] === 'roundedBorder' ? ROUNDED_FIELD_INSET : 0;
+  s.paddingBottom = `${Math.max(0, padding - extra)}px`;
+  const height = `${box.height + Math.max(0, extra - padding)}px`;
+  if (s.height !== height) s.height = height;
+}
+
+/** A rounded border field's padding above and below its lines (styles.css: the engine's inset of 6, less the 1 px border). */
+const ROUNDED_FIELD_INSET = 5;
+
 const fieldCapShifts = new Map<string, number>();
 
 /**
@@ -597,6 +621,7 @@ function applyChrome(
           ? fieldCapShift(font) + (line ? line.y - frame.y - (frame.height - font.lineHeight) / 2 : 0)
           : 0;
       padIntoFrame(el, box, frame, shift);
+      if (el instanceof HTMLTextAreaElement && node.kind === 'textfield' && font) fitFieldLines(el, font, box, frame);
       return;
     }
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.

package/src/main.ts

@@ -147,11 +147,15 @@ function applyTheme(theme: Theme, persist: boolean): void {
   }
 }
 
-/** The OS appearance (device mode follows it; the toolbar toggle is hidden there). */
+/**
+ * The OS appearance: device mode follows it, and an embedded page
+ * (`?embed=1`, the playground's simulator) too; the toolbar toggle is
+ * hidden in both.
+ */
 const darkScheme = typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: dark)') : null;
 const systemTheme = (): Theme => (darkScheme?.matches ? 'dark' : 'light');
 
-if (deviceMode) {
+if (deviceMode || document.documentElement.hasAttribute('data-sb-embed')) {
   applyTheme(systemTheme(), false);
   darkScheme?.addEventListener('change', () => {
     applyTheme(systemTheme(), false);

package/src/page.css

@@ -232,3 +232,19 @@ html[data-sb-mode="device"] .status {
   max-height: 40dvh;
   overflow: auto;
 }
+
+/* Embedded (?embed=1, app/index.html): in another page's frame, which has
+   its own controls and background. The device alone, at the top. */
+html[data-sb-embed] .toolbar {
+  display: none;
+}
+html[data-sb-embed],
+html[data-sb-embed] body {
+  min-height: 0;
+  background: transparent;
+  overflow: hidden;
+}
+/* Room for the device's rings and shadow, which the frame would clip. */
+html[data-sb-embed] .stage {
+  padding: 16px;
+}

package/src/playground/app.tsx

@@ -0,0 +1,311 @@
+// The playground's window, drawn with @swiftbrowser/react's SwiftUI views
+// as Xcode lays one out: the project's files in a sidebar, then the editor
+// beside the simulator. In a compact width (a phone) the code is a stack's
+// root, the simulator a screen it pushes, and the files an inspector. The
+// editor and the frame the app runs in are ordinary DOM in `Host`s.
+
+import {
+  Button,
+  Divider,
+  HStack,
+  Host,
+  Label,
+  List,
+  NavigationSplitView,
+  NavigationStack,
+  Section,
+  ToolbarItem,
+  ZStack,
+  useHorizontalSizeClass,
+} from '@swiftbrowser/react';
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type KeyboardEvent } from 'react';
+import type { Session, SessionState } from './session';
+
+/** The value a phone's stack pushes for the simulator's screen. */
+const SIMULATOR = 'simulator';
+
+export interface PlaygroundProps {
+  session: Session;
+  appName: string;
+  /** Path relative to the app's Sources/ → text. */
+  files: Record<string, string>;
+}
+
+export function Playground({ session, appName, files: initialFiles }: PlaygroundProps) {
+  const state = useSyncExternalStore(session.subscribe, () => session.state);
+  const [files, setFiles] = useState(initialFiles);
+  const names = Object.keys(files).sort();
+  const [selection, setSelection] = useState<string | null>(names[0] ?? null);
+  // The file the editor shows: the sidebar's selection, or the last one
+  // when it has none.
+  const [shown, setShown] = useState(names[0] ?? '');
+  const select = (file: string | null): void => {
+    setSelection(file);
+    if (file) setShown(file);
+  };
+  const compact = useHorizontalSizeClass() === 'compact';
+  // A phone's stack: empty, or the simulator pushed over the code.
+  const [path, setPath] = useState<readonly unknown[]>([]);
+  const [filesShown, setFilesShown] = useState(false);
+  const latest = useRef(files);
+  latest.current = files;
+  const run = (): void => session.compile(latest.current);
+
+  // The first run loads the compiler and the SDK too.
+  useEffect(() => run(), []);
+  // On a phone a linked app comes into view.
+  useEffect(() => {
+    if (state.linked > 0 && compact) setPath((stack) => (stack.length > 0 ? stack : [SIMULATOR]));
+  }, [state.linked]);
+
+  const editor = (
+    <Host sizing="fill" className="pg-pane" frame={{ maxWidth: Infinity, maxHeight: Infinity }}>
+      <Editor
+        file={shown}
+        text={files[shown] ?? ''}
+        onChange={(text) => setFiles((all) => ({ ...all, [shown]: text }))}
+        onRun={run}
+        state={state}
+      />
+    </Host>
+  );
+  const preview = (
+    <Host sizing="fill" className="pg-pane" frame={compact ? { maxWidth: Infinity, maxHeight: Infinity } : { width: 430, maxHeight: Infinity }}>
+      <Simulator session={session} state={state} />
+    </Host>
+  );
+  const runButton = (
+    <ToolbarItem placement="primaryAction">
+      <Button action={run} disabled={state.busy}>
+        <Label title="Run" systemImage="play.fill" labelStyle={compact ? 'iconOnly' : 'titleAndIcon'} />
+      </Button>
+    </ToolbarItem>
+  );
+
+  const sources = (
+    <Section header="Sources">
+      {names.map((name) => (
+        <Label key={name} tag={name} title={name} systemImage="swift" />
+      ))}
+    </Section>
+  );
+  // Picking a file in the phone's inspector opens it and closes the inspector.
+  const pick = (file: string | null): void => {
+    if (!file) return;
+    select(file);
+    setFilesShown(false);
+  };
+
+  if (compact) {
+    // A phone: one stack. The code is its root, with the files in an
+    // inspector (a sheet in a compact width) and the simulator a screen the
+    // bar's iPhone button pushes, as does a build that links. Popping back
+    // unloads the app, which leaves its memory to the compiler.
+    return (
+      <NavigationStack
+        path={[path, setPath]}
+        destination={() => (
+          <ZStack navigationTitle={appName} navigationBarTitleDisplayMode="inline" toolbar={runButton}>
+            {preview}
+          </ZStack>
+        )}
+      >
+        <ZStack
+          navigationTitle={shown}
+          navigationBarTitleDisplayMode="inline"
+          toolbar={
+            <>
+              <ToolbarItem placement="topBarLeading">
+                <Button action={() => setFilesShown(true)}>
+                  <Label title="Files" systemImage="folder" labelStyle="iconOnly" />
+                </Button>
+              </ToolbarItem>
+              {runButton}
+              <ToolbarItem placement="primaryAction">
+                <Button action={() => setPath([SIMULATOR])}>
+                  <Label title="Simulator" systemImage="iphone" labelStyle="iconOnly" />
+                </Button>
+              </ToolbarItem>
+            </>
+          }
+          inspector={{
+            isPresented: [filesShown, setFilesShown],
+            content: (
+              <NavigationStack>
+                <List
+                  selection={[shown, pick]}
+                  navigationTitle="Files"
+                  navigationBarTitleDisplayMode="inline"
+                  presentationDetents={['medium', 'large']}
+                  toolbar={
+                    <ToolbarItem placement="confirmationAction">
+                      <Button title="Done" action={() => setFilesShown(false)} />
+                    </ToolbarItem>
+                  }
+                >
+                  {sources}
+                </List>
+              </NavigationStack>
+            ),
+          }}
+        >
+          {editor}
+        </ZStack>
+      </NavigationStack>
+    );
+  }
+
+  return (
+    <NavigationSplitView
+      sidebar={
+        <List selection={[selection, select]} navigationTitle={appName}>
+          {sources}
+        </List>
+      }
+      detail={
+        <HStack spacing={0} navigationTitle={shown} navigationBarTitleDisplayMode="inline" toolbar={runButton}>
+          {editor}
+          <Divider />
+          {preview}
+        </HStack>
+      }
+    />
+  );
+}
+
+interface EditorProps {
+  file: string;
+  text: string;
+  onChange: (text: string) => void;
+  onRun: () => void;
+  state: SessionState;
+}
+
+/** The source editor: a textarea with a line-number gutter, the issues below it, and a status bar. */
+function Editor({ file, text, onChange, onRun, state }: EditorProps) {
+  const gutter = useRef<HTMLPreElement>(null);
+  const area = useRef<HTMLTextAreaElement>(null);
+  const [cursor, setCursor] = useState({ line: 1, column: 1 });
+  const lines = text.split('\n').length;
+  const syncScroll = (): void => {
+    if (gutter.current && area.current) gutter.current.scrollTop = area.current.scrollTop;
+  };
+  useLayoutEffect(syncScroll, [text, file]);
+  const track = (): void => {
+    const element = area.current;
+    if (!element) return;
+    const before = element.value.slice(0, element.selectionStart).split('\n');
+    setCursor({ line: before.length, column: before.at(-1)!.length + 1 });
+  };
+  const keyDown = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+    // ⌘R or ⌘↩ (Ctrl on other systems) runs, as in Xcode.
+    if ((event.metaKey || event.ctrlKey) && (event.key === 'r' || event.key === 'Enter')) {
+      event.preventDefault();
+      onRun();
+    } else if (event.key === 'Tab' && !event.shiftKey) {
+      event.preventDefault();
+      const element = event.currentTarget;
+      const { selectionStart, selectionEnd, value } = element;
+      onChange(`${value.slice(0, selectionStart)}    ${value.slice(selectionEnd)}`);
+      requestAnimationFrame(() => element.setSelectionRange(selectionStart + 4, selectionStart + 4));
+    }
+  };
+  const issues = state.output.trim();
+  const count = (kind: string): number => (issues.match(new RegExp(`^[^\\s:][^:]*:\\d+:\\d+: ${kind}:`, 'gm')) ?? []).length;
+  const errors = count('error');
+  const warnings = count('warning');
+  // Issues open by themselves when a build fails; warnings wait to be asked for.
+  const [open, setOpen] = useState(false);
+  useEffect(() => setOpen(state.failed), [state.output, state.failed]);
+  const summary = [errors && `${errors} error${errors === 1 ? '' : 's'}`, warnings && `${warnings} warning${warnings === 1 ? '' : 's'}`].filter(Boolean).join(', ') || (state.failed ? 'Failed' : 'Output');
+  return (
+    <div className="pg-editor">
+      {state.warning && (
+        <p id="warning" role="alert">
+          {state.warning}
+        </p>
+      )}
+      <div className="pg-code">
+        <pre ref={gutter} className="pg-gutter" aria-hidden="true">
+          {Array.from({ length: lines }, (_, index) => `${index + 1}\n`).join('')}
+        </pre>
+        <textarea
+          ref={area}
+          id="source"
+          aria-label={file}
+          spellCheck={false}
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          wrap="off"
+          value={text}
+          onChange={(event) => onChange(event.target.value)}
+          onScroll={syncScroll}
+          onKeyDown={keyDown}
+          onKeyUp={track}
+          onClick={track}
+        />
+      </div>
+      <pre id="diagnostics" className={state.failed ? 'pg-errors' : ''} hidden={issues === '' || !open}>
+        {issues}
+      </pre>
+      <div className="pg-statusbar">
+        <span id="status" role="status" className={state.busy ? 'pg-busy' : ''}>
+          {state.status}
+        </span>
+        {issues !== '' && (
+          <button type="button" className={`pg-issues${errors || state.failed ? ' pg-has-errors' : ''}`} aria-expanded={open} onClick={() => setOpen(!open)}>
+            {summary}
+          </button>
+        )}
+        <span className="pg-position">{`Line ${cursor.line}, Col ${cursor.column}`}</span>
+      </div>
+    </div>
+  );
+}
+
+/** Whether this is a touch device, where the app runs full screen in the simulator's pane. */
+export const TOUCH = matchMedia('(pointer: coarse)').matches;
+/**
+ * The embedded app page's size: its iPhone, bezel included (styles.css's
+ * --device-*), and 16 around it for the shadow (page.css).
+ */
+const DEVICE = { width: 417 + 32, height: 876 + 32 };
+/** The simulator's margin around that, beyond the shadow's room. */
+const MARGIN = 4;
+
+/**
+ * The simulator: the frame the app runs in, and the compiler's progress
+ * over it while it runs. Off a touch device the frame is the iPhone's size,
+ * scaled to fit the pane; the app inside never knows, so its taps and
+ * scrolling are exact.
+ */
+function Simulator({ session, state }: { session: Session; state: SessionState }) {
+  const box = useRef<HTMLDivElement>(null);
+  const [fit, setFit] = useState({ scale: 1, top: MARGIN });
+  useLayoutEffect(() => {
+    const element = box.current;
+    if (TOUCH || !element) return;
+    const observer = new ResizeObserver(() => {
+      const { clientWidth: width, clientHeight: height } = element;
+      const scale = Math.max(0.2, Math.min(1, (width - 2 * MARGIN) / DEVICE.width, (height - 2 * MARGIN) / DEVICE.height));
+      setFit({ scale, top: Math.max(MARGIN, (height - DEVICE.height * scale) / 2) });
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const style = TOUCH
+    ? undefined
+    : { width: DEVICE.width, height: DEVICE.height, top: fit.top, transform: `translateX(-50%) scale(${fit.scale})` };
+  return (
+    <div ref={box} className={TOUCH ? 'pg-simulator pg-full' : 'pg-simulator'}>
+      <iframe ref={session.attachFrame} id="app" title="The app" src="about:blank" style={style} />
+      {state.busy && (
+        <div className="pg-activity" aria-hidden="true">
+          <span className="pg-spinner" />
+          {state.status}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/playground/main.tsx

@@ -0,0 +1,45 @@
+/// <reference path="../vite-env.d.ts" />
+// The playground page: an app's sources in an editor, compiled and linked in
+// a worker by the WebAssembly Swift compiler (session.ts, worker.ts), and run
+// by the renderer's own page in a frame. The page itself is SwiftUI views
+// from @swiftbrowser/react (app.tsx). Counter's sources come with the page,
+// so after the first visit's downloads nothing reaches a server.
+
+import '../styles.css';
+import './playground.css';
+import { SwiftUIView } from '@swiftbrowser/react';
+import { useSyncExternalStore } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Playground, TOUCH } from './app';
+import { Session } from './session';
+
+const sources = import.meta.glob('../../../Examples/Counter/Sources/**/*.swift', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
+const APP = 'Counter';
+
+const source = {
+  ...__SB_PLAYGROUND__,
+  npm: new URL(__SB_PLAYGROUND__.npm, location.href).href,
+  ...(__SB_PLAYGROUND__.packages
+    ? { packages: Object.fromEntries(Object.entries(__SB_PLAYGROUND__.packages).map(([name, base]) => [name, new URL(base, location.href).href])) }
+    : {}),
+};
+const files = Object.fromEntries(Object.entries(sources).map(([file, text]) => [file.replace(/^.*\/Sources\//, ''), text]));
+// A touch device runs the app full screen in its pane; elsewhere the
+// simulator shows the app page's iPhone (app.tsx).
+const session = new Session(source, APP, TOUCH ? 'device' : 'frame');
+const scheme = matchMedia('(prefers-color-scheme: dark)');
+const watchScheme = (change: () => void): (() => void) => {
+  scheme.addEventListener('change', change);
+  return () => scheme.removeEventListener('change', change);
+};
+
+function Root() {
+  const dark = useSyncExternalStore(watchScheme, () => scheme.matches);
+  return (
+    <SwiftUIView className="pg-root" colorScheme={dark ? 'dark' : 'light'} safeArea={0}>
+      <Playground session={session} appName={APP} files={files} />
+    </SwiftUIView>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<Root />);

package/src/playground/playground.css

@@ -1,31 +1,194 @@
-:root {
-  --bg: #f5f5f7;
-  --panel: #ffffff;
-  --text: #1d1d1f;
-  --muted: #6e6e73;
-  --accent: #0071e3;
-  --error: #c62828;
-  --border: #d2d2d7;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+/* The playground's window (app.tsx): SwiftUI views fill it; the editor and
+   the simulator are DOM in their hosts, styled with the renderer's tokens so
+   they follow dark mode. */
+html,
+body,
+#root,
+.pg-root {
+  margin: 0;
+  height: 100%;
+}
+/* The page behind the views, which a phone's browser tints its bars with:
+   the system background of the appearance the views follow (main.tsx). The
+   tokens are the island's, so not the body's to read. */
+body {
+  background: #ffffff;
+  overscroll-behavior: none;
 }
 @media (prefers-color-scheme: dark) {
-  :root { --bg: #000; --panel: #1c1c1e; --text: #f5f5f7; --muted: #98989d; --accent: #2997ff; --error: #ff6b6b; --border: #38383a; }
-}
-body { margin: 0; background: var(--bg); color: var(--text); }
-header { padding: 20px 24px 8px; }
-header h1 { margin: 0; font-size: 22px; }
-header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
-main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; padding: 16px 24px 24px; }
-@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
-.editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
-#files { display: flex; gap: 4px; flex-wrap: wrap; }
-#files button { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 6px; padding: 4px 10px; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
-#files button[aria-current='true'] { border-color: var(--accent); color: var(--accent); }
-#source { min-height: 480px; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
-.actions { display: flex; align-items: center; gap: 12px; }
-#run { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 8px 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
-#run:disabled { opacity: 0.5; cursor: default; }
-#status { color: var(--muted); font-size: 13px; }
-#diagnostics { margin: 0; padding: 12px; border: 1px solid var(--error); border-radius: 8px; background: var(--panel); color: var(--error); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow: auto; max-height: 320px; }
-#warning { margin: 0; padding: 8px 12px; border: 1px solid var(--error); border-radius: 8px; background: var(--panel); font-size: 13px; }
-.preview iframe { width: 100%; height: 860px; border: none; border-radius: 12px; background: var(--panel); }
+  body {
+    background: #000000;
+  }
+}
+
+.pg-pane {
+  height: 100%;
+}
+
+/* The editor: a gutter and the text, issues below, a status bar at the foot. */
+.pg-editor {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  background: var(--sb-color-system-background);
+  color: var(--sb-color-primary);
+  --pg-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+}
+.pg-code {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.pg-gutter,
+.pg-code textarea {
+  margin: 0;
+  padding: 12px 0;
+  font: 13px/20px var(--pg-mono);
+}
+.pg-gutter {
+  flex: none;
+  width: 44px;
+  padding-right: 10px;
+  overflow: hidden;
+  text-align: right;
+  color: var(--sb-color-tertiary-label);
+  user-select: none;
+  white-space: pre;
+}
+.pg-code textarea {
+  flex: 1;
+  min-width: 0;
+  padding-left: 6px;
+  padding-right: 12px;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: inherit;
+  tab-size: 4;
+  white-space: pre;
+  caret-color: var(--sb-color-accent);
+}
+#warning {
+  margin: 0;
+  padding: 8px 12px;
+  background: color-mix(in srgb, var(--sb-color-yellow) 18%, transparent);
+  border-bottom: 1px solid var(--sb-color-separator);
+  font-size: 13px;
+}
+#diagnostics {
+  flex: none;
+  max-height: 38%;
+  margin: 0;
+  padding: 10px 12px;
+  overflow: auto;
+  border-top: 1px solid var(--sb-color-separator);
+  background: var(--sb-color-secondary-system-background);
+  font: 12px/1.45 var(--pg-mono);
+  white-space: pre-wrap;
+}
+#diagnostics.pg-errors {
+  color: var(--sb-color-red);
+}
+.pg-statusbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 26px;
+  padding: 0 12px;
+  border-top: 1px solid var(--sb-color-separator);
+  background: var(--sb-color-secondary-system-background);
+  color: var(--sb-color-secondary);
+  font-size: 11px;
+  white-space: nowrap;
+}
+#status {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pg-issues {
+  flex: none;
+  padding: 1px 8px;
+  border: none;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--sb-color-yellow) 28%, transparent);
+  color: var(--sb-color-primary);
+  font: inherit;
+  cursor: pointer;
+}
+.pg-issues.pg-has-errors {
+  background: color-mix(in srgb, var(--sb-color-red) 22%, transparent);
+}
+.pg-issues[aria-expanded='true'] {
+  outline: 1px solid var(--sb-color-separator);
+}
+.pg-position {
+  font-variant-numeric: tabular-nums;
+}
+
+/* The simulator: the app's own page (its iPhone, or full screen on a touch
+   device) in a frame, with the compiler's progress floating over it. */
+.pg-simulator {
+  position: relative;
+  height: 100%;
+  background: var(--sb-color-secondary-system-background);
+}
+.pg-simulator {
+  overflow: hidden;
+}
+.pg-simulator iframe {
+  position: absolute;
+  left: 50%;
+  display: block;
+  border: none;
+  transform-origin: top center;
+  color-scheme: normal;
+}
+.pg-simulator.pg-full iframe {
+  inset: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.pg-activity {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 32px);
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: var(--sb-color-material-base, rgba(255, 255, 255, 0.8));
+  -webkit-backdrop-filter: blur(20px) saturate(1.8);
+  backdrop-filter: blur(20px) saturate(1.8);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  color: var(--sb-color-primary);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+.pg-spinner {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--sb-color-tertiary-label);
+  border-top-color: var(--sb-color-accent);
+  border-radius: 50%;
+  animation: pg-spin 0.8s linear infinite;
+}
+@keyframes pg-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/playground/session.ts

@@ -0,0 +1,117 @@
+// The playground's compiles: an app's sources sent to the compiler's worker
+// (worker.ts), the module it links run by the renderer's own page in the
+// frame (`?module=`, a blob: URL), and what the page shows meanwhile. The
+// UI (app.tsx) reads `state` and calls `compile`; it hands over the frame
+// with `attachFrame` whenever it mounts one.
+
+import { frozenCopy, restoreScroll } from './freeze';
+import type { PlaygroundSource } from './files';
+import type { FromWorker, ToWorker } from './worker';
+
+export interface SessionState {
+  /** A compile is under way. */
+  busy: boolean;
+  /** One line on what the compiler is doing or did. */
+  status: string;
+  /** The compiler's diagnostics, or the error the worker failed with. */
+  output: string;
+  /** Whether the last compile failed (its output is errors). */
+  failed: boolean;
+  /** Why the kit may not suit this page's renderer, when it may not. */
+  warning: string | null;
+  /** How many compiles have linked an app. */
+  linked: number;
+}
+
+export class Session {
+  state: SessionState = { busy: false, status: 'Loading the compiler…', output: '', failed: false, warning: null, linked: 0 };
+  private readonly worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
+  private readonly listeners = new Set<() => void>();
+  private nextId = 1;
+  private started = 0;
+  private frame: HTMLIFrameElement | null = null;
+  /** The last linked app, and the still copy of it a compile shows instead (freeze.ts). */
+  private moduleUrl: string | null = null;
+  private frozenUrl: string | null = null;
+
+  /**
+   * `frame`: the app page in an embedded frame mode (its iPhone, without
+   * its toolbar) for the simulator to scale; `device`: full screen.
+   */
+  constructor(
+    private readonly source: PlaygroundSource,
+    private readonly appName: string,
+    private readonly appMode: 'frame' | 'device',
+  ) {
+    this.worker.onmessage = (event: MessageEvent<FromWorker>) => this.receive(event.data);
+  }
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  private set(changes: Partial<SessionState>): void {
+    this.state = { ...this.state, ...changes };
+    for (const listener of this.listeners) listener();
+  }
+
+  /** The frame the app runs in, or null when the UI unmounts it; a new one shows what the last had. */
+  attachFrame = (frame: HTMLIFrameElement | null): void => {
+    this.frame = frame;
+    if (!frame) return;
+    frame.addEventListener('load', () => {
+      if (this.frozenUrl && frame.contentDocument && frame.contentWindow?.location.href === this.frozenUrl) restoreScroll(frame.contentDocument);
+    });
+    const url = this.frozenUrl ?? (this.moduleUrl ? this.appUrl(this.moduleUrl) : null);
+    if (url) frame.src = url;
+  };
+
+  private appUrl(moduleUrl: string): string {
+    const mode = this.appMode === 'frame' ? 'mode=frame&embed=1' : 'mode=device';
+    return `${import.meta.env.BASE_URL}app/?app=${this.appName}&${mode}&module=${encodeURIComponent(moduleUrl)}`;
+  }
+
+  compile(files: Record<string, string>): void {
+    if (this.state.busy) return;
+    // The last build's app goes while the compiler runs: its page, its module
+    // and its memory would stay beside the linker's, which a phone has not got.
+    // A still copy of it stays in its place.
+    if (this.moduleUrl) {
+      let copy: string | null = null;
+      try {
+        copy = this.frame?.contentDocument ? frozenCopy(this.frame.contentDocument) : null;
+      } catch {
+        // No copy: the frame goes blank.
+      }
+      if (this.frozenUrl) URL.revokeObjectURL(this.frozenUrl);
+      this.frozenUrl = copy ? URL.createObjectURL(new Blob([copy], { type: 'text/html' })) : null;
+      if (this.frame) this.frame.src = this.frozenUrl ?? 'about:blank';
+      URL.revokeObjectURL(this.moduleUrl);
+      this.moduleUrl = null;
+    }
+    this.started = performance.now();
+    this.set({ busy: true, status: 'Compiling…' });
+    const message: ToWorker = { type: 'compile', id: this.nextId++, source: this.source, app: { name: this.appName, files: { ...files } } };
+    this.worker.postMessage(message);
+  }
+
+  private receive(message: FromWorker): void {
+    if (message.type === 'progress') return this.set({ status: message.text });
+    if (message.type === 'warning') return this.set({ warning: message.text });
+    if (message.type === 'failure') return this.set({ busy: false, status: 'The compiler failed.', output: message.error, failed: true });
+    const seconds = (performance.now() - this.started) / 1000;
+    // Each tool's memory too: what a phone's browser runs out of first.
+    const steps = message.steps
+      .map((step) => `${step.tool} ${step.seconds.toFixed(1)} s${step.memoryBytes ? `, ${Math.round(step.memoryBytes / 1e6)} MB` : ''}`)
+      .join('; ');
+    if (!message.ok || !message.wasm) {
+      return this.set({ busy: false, status: `Did not compile (${steps}).`, output: message.output, failed: true });
+    }
+    if (this.frozenUrl) URL.revokeObjectURL(this.frozenUrl);
+    this.frozenUrl = null;
+    this.moduleUrl = URL.createObjectURL(new Blob([message.wasm], { type: 'application/wasm' }));
+    if (this.frame) this.frame.src = this.appUrl(this.moduleUrl);
+    this.set({ busy: false, status: `Compiled and linked in ${seconds.toFixed(1)} s (${steps}).`, output: message.output, failed: false, linked: this.state.linked + 1 });
+  }
+}

package/src/renderer.ts

@@ -433,10 +433,35 @@ export class Renderer {
   /** The highest `scrollTo` serial seen: a command keeps its serial until the reader re-runs, and runs once. */
   private scrollSerial = 0;
 
+  /**
+   * A row that taps its button (`rowAction`) highlights while pressed, as a
+   * row that is a button does (`:active`, styles.css): until the pointer is
+   * released or the press turns into a scroll.
+   */
+  private readonly onRowPress = (event: PointerEvent): void => {
+    const hit = event.target as HTMLElement | null;
+    if (!hit || !event.isPrimary || hit.closest('.sb-button, .sb-navlink')) return;
+    const button = rowAction(hit, this.root);
+    const row = button ? listRowOf(button, this.root) : null;
+    if (!row) return;
+    row.dataset['sbRowPressed'] = '';
+    const release = (): void => {
+      delete row.dataset['sbRowPressed'];
+      window.removeEventListener('pointerup', release, true);
+      window.removeEventListener('pointercancel', release, true);
+      this.root.removeEventListener('scroll', release, true);
+    };
+    window.addEventListener('pointerup', release, true);
+    window.addEventListener('pointercancel', release, true);
+    this.root.addEventListener('scroll', release, true);
+  };
+
   private readonly onClick = (event: MouseEvent): void => {
     // `closest` picks the innermost control, so a button inside a
-    // `tapgesture` (or a menu label) handles the click alone.
-    const target = (event.target as HTMLElement | null)?.closest<HTMLElement>(
+    // `tapgesture` (or a menu label) handles the click alone. Elsewhere in
+    // a list row, the row's one button (`rowAction`).
+    const hit = event.target as HTMLElement | null;
+    const target = hit?.closest<HTMLElement>(
       '.sb-button, .sb-navlink, .sb-navbar-back, .sb-navbar-more, .sb-navsplit-toggle, .sb-switch, .sb-sheet-scrim, ' +
         '.sb-tabbar-item, .sb-segment, .sb-picker-option, .sb-picker-menu-item, .sb-picker[data-sb-style="menu"], ' +
         '.sb-menu, .sb-tapgesture, .sb-stepper-button, .sb-alert-scrim, .sb-alert-ok, ' +
@@ -444,7 +469,7 @@ export class Renderer {
         '.sb-swipe-action, .sb-listrow-control, .sb-listrow[data-sb-selectable], ' +
         // A link in a rich text: innermost, so it wins over a tappable row around the text
         '.sb-link',
-    );
+    ) ?? (hit ? rowAction(hit, this.root) : null);
     if (!target || !this.root.contains(target)) return;
     if (target.classList.contains('sb-link')) {
       const text = target.closest<HTMLElement>('.sb-text');
@@ -820,6 +845,7 @@ export class Renderer {
     // Delegated listeners instead of one per control: elements can be
     // created detached and moved around freely.
     root.addEventListener('click', this.onClick);
+    root.addEventListener('pointerdown', this.onRowPress);
     root.addEventListener('keydown', this.onKeyDown);
     root.addEventListener('input', this.onInput);
     root.addEventListener('focusin', this.onFocusChange);
@@ -1502,6 +1528,7 @@ export class Renderer {
   dispose(): void {
     this.closeMenu();
     this.root.removeEventListener('click', this.onClick);
+    this.root.removeEventListener('pointerdown', this.onRowPress);
     this.root.removeEventListener('keydown', this.onKeyDown);
     this.root.removeEventListener('input', this.onInput);
     this.root.removeEventListener('focusin', this.onFocusChange);
@@ -1688,12 +1715,17 @@ export class Renderer {
     // props produced before applying the new ones. The layout box is kept:
     // the engine re-lays out at `commit`, and removals recorded later in the
     // pass measure their old position against intact ancestors.
-    const { left, top, width, height } = el.style;
-    el.removeAttribute('style');
-    if (left) el.style.left = left;
-    if (top) el.style.top = top;
-    if (width) el.style.width = width;
-    if (height) el.style.height = height;
+    // A text input's props produce no inline style (layout sets its box,
+    // font and padding), and it is updated on every keystroke while it is
+    // being edited: its style stays as it is.
+    if (kind !== 'textfield' && kind !== 'texteditor') {
+      const { left, top, width, height } = el.style;
+      el.removeAttribute('style');
+      if (left) el.style.left = left;
+      if (top) el.style.top = top;
+      if (width) el.style.width = width;
+      if (height) el.style.height = height;
+    }
     for (const key of Object.keys(el.dataset)) {
       if (key !== ID_ATTR && key !== KIND_ATTR) delete el.dataset[key];
     }
@@ -2510,6 +2542,38 @@ function createShell(kind: ElementKind): HTMLElement {
   }
 }
 
+/** The list row `el` is in (a direct child of a section's rows or a list's content), or null. */
+function listRowOf(el: HTMLElement, root: HTMLElement): HTMLElement | null {
+  for (let node: HTMLElement | null = el; node && node !== root; node = node.parentElement) {
+    const parent = node.parentElement;
+    if (parent?.classList.contains('sb-section-rows') || parent?.classList.contains('sb-list-content')) return node;
+  }
+  return null;
+}
+
+/** Controls a row may hold besides its button for the row to stay the button's: none. */
+const ROW_CONTROLS =
+  'input, textarea, .sb-navlink, .sb-switch, .sb-picker, .sb-stepper, .sb-slider, .sb-menu, .sb-tapgesture, .sb-link, .sb-datepicker';
+
+/**
+ * A list row holding one button (with other views beside it, or under a
+ * modifier) taps the button wherever it is tapped, as a UITableView cell
+ * does on iOS; a row that is the button itself is that already. Not a
+ * `.plain` or `.borderless` button (both arrive as `plain`), which SwiftUI
+ * keeps to its own label in a row, a disabled one, or a row with other
+ * controls.
+ */
+function rowAction(el: HTMLElement, root: HTMLElement): HTMLElement | null {
+  const row = listRowOf(el, root);
+  if (!row || row.matches('.sb-button, .sb-navlink, .sb-listrow[data-sb-selectable]')) return null;
+  const buttons = row.querySelectorAll<HTMLElement>('.sb-button');
+  if (buttons.length !== 1) return null;
+  const button = buttons[0]!;
+  if (button.dataset['sbStyle'] === 'plain' || button.closest('[data-sb-disabled]')) return null;
+  if (row.querySelector(ROW_CONTROLS)) return null;
+  return button;
+}
+
 /** A vertical `textfield`: a `<textarea>` the layout sizes to its lines. */
 function createMultilineField(): HTMLTextAreaElement {
   const el = document.createElement('textarea');
@@ -3565,7 +3629,8 @@ function applyTextField(input: HTMLInputElement | HTMLTextAreaElement, props: Te
   // A vertical field is a `<textarea>`, which has no type.
   if (input instanceof HTMLInputElement) input.type = props.secure ? 'password' : 'text';
   else input.dataset['sbAxis'] = 'vertical';
-  input.placeholder = props.placeholder ?? '';
+  const placeholder = props.placeholder ?? '';
+  if (input.placeholder !== placeholder) input.placeholder = placeholder;
   input.dataset['sbStyle'] = props.style ?? 'plain';
   const text = props.text ?? '';
   // Leave the caret alone when Swift echoes the value the field already shows.

package/src/styles.css

@@ -196,6 +196,14 @@
 
 .device {
   position: relative;
+  /* iOS Safari inflates the text of wide multi-line blocks it judges hard to
+     read ("text autosizing"): a wrapped section footer or paragraph would draw
+     a size up from the one the engine measured it at and run into what
+     follows. page.css pins this on the document in device mode; an island
+     (@swiftbrowser/react) lives in a page that may not, so pin it here too.
+     Inherited, so it covers everything the frame draws. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 /* The iPhone's size and bezel: the frame's only. An island (`.sb-island`,
@@ -759,6 +767,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   color: var(--sb-color-placeholder);
 }
 
+/* A UITextField's rounded rect: the same with the focus as without (iOS
+   draws no focus ring or tinted border on it). */
 .sb-textfield[data-sb-style="roundedBorder"] {
   padding: 0 7px;
   border: 1px solid var(--sb-color-field-border);
@@ -766,11 +776,6 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: var(--sb-color-field-background);
 }
 
-.sb-textfield[data-sb-style="roundedBorder"]:focus-visible {
-  border-color: var(--sb-color-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sb-color-accent) 30%, transparent);
-}
-
 /* Toggle: the label children are positioned by their frames; the switch sits
    at the engine's `switch` rect (51×31 at the trailing edge). */
 .sb-switch {
@@ -969,6 +974,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: var(--sb-color-fill);
 }
 
+/* A row whose one button it taps (renderer.ts `rowAction`), while pressed. */
+.sb-section-rows > [data-sb-row-pressed],
+.sb-list-content > [data-sb-row-pressed] {
+  background: var(--sb-color-fill);
+}
+
 /* ---------------------------------------------------------------------------
    Phase 2: navigation
    ------------------------------------------------------------------------- */
@@ -2901,6 +2912,14 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: auto;
 }
 
+/* A list row is content however it is made (a stack, a modifier box): its
+   empty space is the cell's, and a tap there taps the row's one button
+   (renderer.ts `rowAction`), as on iOS. */
+.sb-section-rows > [data-sb-kind],
+.sb-list-content > [data-sb-kind] {
+  pointer-events: auto;
+}
+
 .sb-styled[data-sb-background] {
   pointer-events: auto;
 }
@@ -3749,14 +3768,17 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 /* ---------------------------------------------------------------------------
-   Text editor: a borderless textarea filling its frame in the body font (its
-   parent provides any frame or background).
+   Text editor: a borderless textarea filling its frame in its context's font
+   (layoutDom.ts; its parent provides any frame or background). Its text is
+   inset as a UITextView's is: 8 above and below (`textContainerInset`), 5 at
+   the sides (`lineFragmentPadding`).
    ------------------------------------------------------------------------- */
 .sb-texteditor {
   appearance: none;
   display: block;
+  box-sizing: border-box;
   margin: 0;
-  padding: 0;
+  padding: 8px 5px;
   border: 0;
   outline: none;
   resize: none;

package/src/symbols.ts

@@ -577,6 +577,20 @@ const QUESTIONMARK: IconNode = [
   ['path', { d: 'M12 20.5h.01' }],
 ];
 
+/**
+ * `tray.fill`: the tray's silhouette (lucide's `Inbox`) filled, split along
+ * its opening's edge, the line with the notch, by a gap: the well above,
+ * the front below. A real gap, not a stroke in the background color, so
+ * whatever is behind the glyph (a selected tab's capsule) shows through.
+ * The pieces' edges along it sit 1.75 from that line, so with their 2 wide
+ * stroke they leave 1.5 between them, the notch's slants offset square to
+ * their direction.
+ */
+const TRAY_FILL: IconNode = [
+  ['path', { d: 'M2.88 10.25 5.45 5.11A2 2 0 0 1 7.24 4h9.52a2 2 0 0 1 1.79 1.11l2.57 5.14h-6.06l-2 3h-2.12l-2-3z' }],
+  ['path', { d: 'M2 13.75h5.06l2 3h5.88l2-3H22V18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z' }],
+];
+
 const outline = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'outline' });
 const knockout = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'knockout' });
 const solid = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'solid' });
@@ -1083,7 +1097,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'envelope.badge': outline(MailWarning),
   'envelope.open.fill': outline(MailOpen),
   'tray.full': outline(Inbox),
-  'tray.fill': solid(Inbox),
+  'tray.fill': solid(TRAY_FILL),
   'tray.and.arrow.down': outline(Inbox),
   'tray.and.arrow.up': outline(Inbox),
   'phone.arrow.up.right': outline(PhoneOutgoing),

package/src/playground/main.ts

@@ -1,133 +0,0 @@
-/// <reference path="../vite-env.d.ts" />
-// The playground page: an app's sources in an editor, compiled and linked in
-// a worker by the WebAssembly Swift compiler (worker.ts), and run by the
-// renderer's own page in the frame, which takes the module as a blob: URL
-// (`?module=`, main.ts). Counter's sources come with the page, so after the
-// first visit's downloads nothing reaches a server.
-
-import { frozenCopy, restoreScroll } from './freeze';
-import type { FromWorker, ToWorker } from './worker';
-
-const sources = import.meta.glob('../../../Examples/Counter/Sources/**/*.swift', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
-const APP = 'Counter';
-
-function $<T extends HTMLElement>(selector: string): T {
-  const element = document.querySelector<T>(selector);
-  if (!element) throw new Error(`missing ${selector}`);
-  return element;
-}
-const filesNav = $<HTMLElement>('#files');
-const editor = $<HTMLTextAreaElement>('#source');
-const run = $<HTMLButtonElement>('#run');
-const status = $<HTMLElement>('#status');
-const diagnostics = $<HTMLPreElement>('#diagnostics');
-const frame = $<HTMLIFrameElement>('#app');
-const warning = $<HTMLElement>('#warning');
-
-// Path relative to Sources/ → text, as edited.
-const files: Record<string, string> = Object.fromEntries(
-  Object.entries(sources).map(([file, text]) => [file.replace(/^.*\/Sources\//, ''), text]),
-);
-let current = Object.keys(files).sort()[0]!;
-
-function showFiles(): void {
-  filesNav.replaceChildren(...Object.keys(files).sort().map((file) => {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.textContent = file;
-    button.setAttribute('aria-current', String(file === current));
-    button.addEventListener('click', () => {
-      files[current] = editor.value;
-      current = file;
-      editor.value = files[file]!;
-      showFiles();
-    });
-    return button;
-  }));
-}
-editor.value = files[current]!;
-editor.addEventListener('input', () => (files[current] = editor.value));
-showFiles();
-
-const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
-const source = {
-  ...__SB_PLAYGROUND__,
-  npm: new URL(__SB_PLAYGROUND__.npm, location.href).href,
-  ...(__SB_PLAYGROUND__.packages
-    ? { packages: Object.fromEntries(Object.entries(__SB_PLAYGROUND__.packages).map(([name, base]) => [name, new URL(base, location.href).href])) }
-    : {}),
-};
-let nextId = 1;
-let moduleUrl: string | null = null;
-/** The still copy of the last app the frame shows while a compile runs. */
-let frozenUrl: string | null = null;
-frame.addEventListener('load', () => {
-  if (frozenUrl && frame.contentDocument && frame.contentWindow?.location.href === frozenUrl) restoreScroll(frame.contentDocument);
-});
-const started = new Map<number, number>();
-
-worker.onmessage = (event: MessageEvent<FromWorker>) => {
-  const message = event.data;
-  if (message.type === 'progress') {
-    status.textContent = message.text;
-    return;
-  }
-  if (message.type === 'warning') {
-    warning.hidden = false;
-    warning.textContent = message.text;
-    return;
-  }
-  run.disabled = false;
-  if (message.type === 'failure') {
-    status.textContent = 'The compiler failed.';
-    diagnostics.hidden = false;
-    diagnostics.textContent = message.error;
-    return;
-  }
-  const seconds = (performance.now() - (started.get(message.id) ?? performance.now())) / 1000;
-  // Each tool's memory too: what a phone's browser runs out of first.
-  const steps = message.steps
-    .map((step) => `${step.tool} ${step.seconds.toFixed(1)} s${step.memoryBytes ? `, ${Math.round(step.memoryBytes / 1e6)} MB` : ''}`)
-    .join('; ');
-  diagnostics.hidden = message.ok || message.output === '';
-  diagnostics.textContent = message.output;
-  if (!message.ok || !message.wasm) {
-    status.textContent = `Did not compile (${steps}).`;
-    diagnostics.hidden = false;
-    return;
-  }
-  status.textContent = `Compiled and linked in ${seconds.toFixed(1)} s (${steps}).`;
-  if (frozenUrl) URL.revokeObjectURL(frozenUrl);
-  frozenUrl = null;
-  moduleUrl = URL.createObjectURL(new Blob([message.wasm], { type: 'application/wasm' }));
-  frame.src = `${import.meta.env.BASE_URL}app/?app=${APP}&module=${encodeURIComponent(moduleUrl)}`;
-};
-
-function compile(): void {
-  run.disabled = true;
-  // The last build's app goes while the compiler runs: its page, its module
-  // and its memory would stay beside the linker's, which a phone has not got.
-  // A still copy of it stays in its place (freeze.ts).
-  if (moduleUrl) {
-    let copy: string | null = null;
-    try {
-      copy = frame.contentDocument ? frozenCopy(frame.contentDocument) : null;
-    } catch {
-      // No copy: the frame goes blank.
-    }
-    if (frozenUrl) URL.revokeObjectURL(frozenUrl);
-    frozenUrl = copy ? URL.createObjectURL(new Blob([copy], { type: 'text/html' })) : null;
-    frame.src = frozenUrl ?? 'about:blank';
-    URL.revokeObjectURL(moduleUrl);
-    moduleUrl = null;
-  }
-  diagnostics.hidden = true;
-  status.textContent = 'Compiling…';
-  const id = nextId++;
-  started.set(id, performance.now());
-  const message: ToWorker = { type: 'compile', id, source, app: { name: APP, files: { ...files } } };
-  worker.postMessage(message);
-}
-run.addEventListener('click', compile);
-// The first run loads the compiler and the SDK too.
-compile();