@swiftbrowser/web 0.9.2 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.9.2",
+  "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": {

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/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),