@swiftbrowser/web 0.9.7 → 0.9.8

package/package.json

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

@@ -3357,6 +3357,12 @@ export class LayoutPass {
     const searchOnTop = parts.search !== null && cctx.bottomBar > 0;
     const searchRow = searchOnTop ? SEARCH_TOP_ROW : 0;
     const searchBottom = parts.search && !searchOnTop ? SEARCH_BOTTOM_HEIGHT + searchMargin : 0;
+    // The on-screen keyboard (device mode) covers the screen's bottom. A
+    // bottom search field rises above it, as iOS 26 docks it on the
+    // keyboard, so what is typed into it can be seen; the bars stay put,
+    // covered.
+    const keyboard = reachesBottom ? this.keyboard : 0;
+    const searchLift = searchBottom > 0 ? keyboard : 0;
     const contentTop = barHeight + largeHeight + searchRow;
     const content: Rect = {
       x,
@@ -3375,7 +3381,7 @@ export class LayoutPass {
       const marginH = searchOnTop ? SEARCH_FIELD_MARGIN_H : SEARCH_BOTTOM_MARGIN_H;
       chrome['searchField'] = {
         x: x + marginH,
-        y: searchOnTop ? y + barHeight + largeHeight + SEARCH_TOP_ABOVE : y + size.height - searchBottom,
+        y: searchOnTop ? y + barHeight + largeHeight + SEARCH_TOP_ABOVE : y + size.height - searchLift - searchBottom,
         width: Math.max(0, size.width - 2 * marginH),
         height: searchOnTop ? SEARCH_TOP_HEIGHT : SEARCH_BOTTOM_HEIGHT,
       };
@@ -3675,12 +3681,11 @@ export class LayoutPass {
     // Under a tab bar the bar (which includes the bottom safe area) is what
     // non-scrolling content must clear; a bottom toolbar already excluded it.
     const clears = bottomBarHeight === 0 && y + size.height >= screen.height ? Math.max(safeArea.bottom, cctx.bottomBar) : 0;
-    // The on-screen keyboard (device mode) covers the screen's bottom, the
-    // bars with it: the content stops above it as on iOS (the bars stay
-    // put, covered), and a scroll view runs under only the part of a bar
-    // still showing above it.
-    const keyboard = reachesBottom ? this.keyboard : 0;
-    const bottomInset = Math.max(clears, keyboard - bottomCover);
+    // The keyboard covers the bars (but not the search field, lifted above
+    // it): the content stops above it as on iOS, and a scroll view runs under
+    // only the part of a bar still showing above it, or under the whole
+    // search field.
+    const bottomInset = Math.max(clears, keyboard - (searchLift > 0 ? 0 : bottomCover));
     // Phase 8: `.ignoresSafeArea` content grows up under the bar (and the
     // large title / search field), which is transparent over it.
     const contentCtx: Context = {
@@ -3692,7 +3697,7 @@ export class LayoutPass {
       ...(bottomCover > 0 ? { bottomBar: bottomCover, bottomEdge: y + size.height } : {}),
     };
     if (keyboard > 0) {
-      contentCtx.bottomBar = Math.max(0, (bottomCover > 0 ? bottomCover : cctx.bottomBar) - keyboard);
+      contentCtx.bottomBar = searchLift > 0 ? bottomCover : Math.max(0, (bottomCover > 0 ? bottomCover : cctx.bottomBar) - keyboard);
       contentCtx.bottomEdge = y + size.height - keyboard;
     }
     if (scroller) {
@@ -3716,7 +3721,7 @@ export class LayoutPass {
     // content clears there.
     if (!large) contentCtx.barAbove = { top: content.y, height: content.y - y, x, width: size.width };
     if (keyboard > 0) {
-      contentCtx.bottomBar = Math.max(0, (bottomCover > 0 ? bottomCover + clears : cctx.bottomBar) - keyboard);
+      contentCtx.bottomBar = searchLift > 0 ? bottomCover + clears : Math.max(0, (bottomCover > 0 ? bottomCover + clears : cctx.bottomBar) - keyboard);
     } else if (bottomCover > 0) {
       contentCtx.bottomBar = bottomCover + clears;
     }

package/src/protocol.ts

@@ -1869,6 +1869,14 @@ export interface ScrollViewProps {
    * past it while scrolling and snapping as before.
    */
   clipDisabled?: boolean;
+  /**
+   * `.scrollPosition(id:)`: when scrolling settles, the page sends
+   * `scrollposition` to the scroll target (`scrollID`) at the view's anchor
+   * point, once per change of target (docs/ops-protocol.md, "Scrolling to a view").
+   */
+  reportsPosition?: boolean;
+  /** With `reportsPosition`: the point of the visible area the reported target is at; the leading edge (`{x: 0, y: 0}`) when omitted. */
+  positionAnchor?: UnitPoint;
 }
 
 export interface Style {
@@ -1940,6 +1948,15 @@ export interface RefreshEvent {
   type: 'refresh';
   id: ElementId;
 }
+/**
+ * Sent to a scroll target (`scrollID`) inside a `scrollview` with
+ * `reportsPosition`: scrolling settled with this target at the view's
+ * anchor point. Sent once per change of target.
+ */
+export interface ScrollPositionEvent {
+  type: 'scrollposition';
+  id: ElementId;
+}
 /**
  * A movable `listrow` was dragged to a new place: `to` is the index among
  * its container's children (the `list`'s, or its `section`'s) before which
@@ -1985,7 +2002,7 @@ export interface DropEvent {
 }
 
 /** The Phase 8 events (merged into `RendererEvent` above). */
-export type InteractionEvent = DragEvent | PinchEvent | LongPressEvent | DeleteEvent | RefreshEvent | MoveEvent | DragStartEvent | DragEndEvent | DropEvent;
+export type InteractionEvent = DragEvent | PinchEvent | LongPressEvent | DeleteEvent | RefreshEvent | ScrollPositionEvent | MoveEvent | DragStartEvent | DragEndEvent | DropEvent;
 // Phase 8: alerts, controls, effects
 // (docs/ops-protocol.md, "Phase 8: interaction"; gestures, swipe actions,
 // context menus, list rows and refresh live in their own block)

package/src/renderer.ts

@@ -151,6 +151,7 @@ import { VideoEvents, applyVideo, stopVideos } from './video';
 import { PinchController } from './pinch';
 import { applyCanvas, createCanvasElement } from './canvasDrawing';
 import { scrollToTarget } from './scrollTo';
+import { POSITION_SETTLE_MS, anchorPoint, positionTarget, type PositionCandidate } from './scrollPosition';
 import { applyDefaultScrollAnchor, keepScrollAnchors } from './scrollAnchor';
 import { EMPTY_CATALOG, assetColorVar, type AssetCatalog } from './assets';
 import { HIERARCHY_OPACITY, colorToCSS, effectsCSS, styleToCSS, type PaintCSS } from './styles';
@@ -360,6 +361,10 @@ export class Renderer {
    */
   private rootSize: { width: number; height: number } | null = null;
   private readonly resizeObserver: ResizeObserver | null = null;
+  /** `reportsPosition` scroll views mid-scroll: the timer that calls the scroll settled (src/scrollPosition.ts). */
+  private readonly positionTimers = new Map<HTMLElement, number>();
+  /** The scroll target each `reportsPosition` scroll view last reported, so a settle at the same one says nothing. */
+  private readonly reportedPositions = new WeakMap<HTMLElement, number>();
   /**
    * `host` elements (src/hostContent.ts): their content elements, observed
    * for size changes, and the measurements of the current layout pass.
@@ -855,6 +860,8 @@ export class Renderer {
     root.addEventListener('focusout', this.onFocusChange);
     root.addEventListener('scroll', this.onScrollDismissKeyboard, true);
     root.addEventListener('scroll', this.queueLazyCheck, { capture: true, passive: true });
+    root.addEventListener('scroll', this.onPositionScroll, { capture: true, passive: true });
+    root.addEventListener('scrollend', this.onPositionScrollEnd, { capture: true, passive: true });
     this.videoEvents = new VideoEvents(root, (event) => this.onEvent(event));
     // Phase 8: pointer gestures (the sheet drag among them) are delegated too.
     const host: InteractionHost = {
@@ -1448,24 +1455,27 @@ export class Renderer {
       height += row.kind === 'caption' ? MENU_CAPTION_HEIGHT : row.kind === 'separator' ? MENU_SEPARATOR_HEIGHT : PICKER_MENU_ROW;
     }
     // Anchor to the control: trailing edges aligned, below it when there is
-    // room, else above; clamped inside the screen.
+    // room, else above; clamped inside the screen. A menu taller than the
+    // room on either side (a picker of every hour) takes the roomier side,
+    // as tall as that room, and scrolls inside, opened at its checked row.
     const rootRect = this.root.getBoundingClientRect();
     const anchorRect = anchor.getBoundingClientRect();
     const width = Math.min(PICKER_MENU_WIDTH, Math.max(0, rootRect.width - 2 * PICKER_MENU_MARGIN));
     let left = anchorRect.right - rootRect.left - width;
     left = Math.max(PICKER_MENU_MARGIN, Math.min(left, rootRect.width - width - PICKER_MENU_MARGIN));
-    let top = anchorRect.bottom - rootRect.top + PICKER_MENU_GAP;
-    if (top + height > rootRect.height - PICKER_MENU_MARGIN) {
-      top = anchorRect.top - rootRect.top - PICKER_MENU_GAP - height;
-      menu.dataset['sbPlacement'] = 'above';
-    } else {
-      menu.dataset['sbPlacement'] = 'below';
-    }
-    top = Math.max(PICKER_MENU_MARGIN, top);
+    const belowTop = anchorRect.bottom - rootRect.top + PICKER_MENU_GAP;
+    const roomBelow = rootRect.height - PICKER_MENU_MARGIN - belowTop;
+    const roomAbove = anchorRect.top - rootRect.top - PICKER_MENU_GAP - PICKER_MENU_MARGIN;
+    const below = height <= roomBelow || (height > roomAbove && roomBelow >= roomAbove);
+    const shown = Math.min(height, Math.max(0, below ? roomBelow : roomAbove));
+    const top = below ? belowTop : anchorRect.top - rootRect.top - PICKER_MENU_GAP - shown;
+    menu.dataset['sbPlacement'] = below ? 'below' : 'above';
     menu.style.left = `${Math.round(left)}px`;
-    menu.style.top = `${Math.round(top)}px`;
+    menu.style.top = `${Math.round(Math.max(PICKER_MENU_MARGIN, top))}px`;
     menu.style.width = `${Math.round(width)}px`;
+    if (shown < height) menu.style.maxHeight = `${Math.round(shown)}px`;
     this.root.append(menu);
+    if (shown < height) menu.querySelector('[aria-checked="true"]')?.scrollIntoView({ block: 'nearest' });
     anchor.setAttribute('aria-expanded', 'true');
     this.menu = { el: menu, anchor, anchorId: id };
     document.addEventListener('click', this.onDocumentClick, true);
@@ -1562,6 +1572,10 @@ export class Renderer {
     this.root.removeEventListener('focusin', this.onFocusChange);
     this.root.removeEventListener('focusout', this.onFocusChange);
     this.root.removeEventListener('scroll', this.onScrollDismissKeyboard, true);
+    this.root.removeEventListener('scroll', this.onPositionScroll, true);
+    this.root.removeEventListener('scrollend', this.onPositionScrollEnd, true);
+    for (const timer of this.positionTimers.values()) window.clearTimeout(timer);
+    this.positionTimers.clear();
     this.interaction.dispose();
     this.pressEffects.dispose();
     this.externalDrops.dispose();
@@ -1649,6 +1663,60 @@ export class Renderer {
     }
   }
 
+  // -------------------------------------------------------------------------
+  // `.scrollPosition(id:)` reading back (src/scrollPosition.ts)
+  // -------------------------------------------------------------------------
+
+  /** A `reportsPosition` scroll view scrolled: it has settled when no further scroll follows for a moment. */
+  private readonly onPositionScroll = (event: Event): void => {
+    const el = event.target;
+    if (!(el instanceof HTMLElement) || el.dataset['sbReportsPosition'] === undefined) return;
+    const pending = this.positionTimers.get(el);
+    if (pending !== undefined) window.clearTimeout(pending);
+    this.positionTimers.set(
+      el,
+      window.setTimeout(() => this.reportPosition(el), POSITION_SETTLE_MS),
+    );
+  };
+
+  /** The browser says the scroll ended (Chrome, Firefox; Safari waits for the timer). */
+  private readonly onPositionScrollEnd = (event: Event): void => {
+    const el = event.target;
+    if (!(el instanceof HTMLElement) || el.dataset['sbReportsPosition'] === undefined) return;
+    this.reportPosition(el);
+  };
+
+  /**
+   * Which scroll target of a settled scroll view is at its anchor point: the
+   * `scrollID` boxes inside it whose nearest scrolling ancestor it is, along
+   * the axis it scrolls on (the vertical one when it scrolls both ways). Sent
+   * to that target when it is not the one reported last.
+   */
+  private reportPosition(el: HTMLElement): void {
+    const pending = this.positionTimers.get(el);
+    if (pending !== undefined) window.clearTimeout(pending);
+    this.positionTimers.delete(el);
+    const node = this.nodes.get(Number(el.dataset[ID_ATTR]));
+    if (!node || !el.isConnected) return;
+    const horizontal = node.props['axes'] === 'horizontal';
+    const anchor = node.props['positionAnchor'] as { x?: unknown; y?: unknown } | undefined;
+    const fraction = horizontal ? anchor?.x : anchor?.y;
+    const box = el.getBoundingClientRect();
+    const point = anchorPoint(horizontal ? { start: box.left, length: box.width } : { start: box.top, length: box.height }, typeof fraction === 'number' ? fraction : 0);
+    const candidates: PositionCandidate[] = [];
+    for (const target of el.querySelectorAll<HTMLElement>('[data-sb-id]')) {
+      const id = Number(target.dataset[ID_ATTR]);
+      const style = (this.nodes.get(id)?.props as Partial<StyledProps> | undefined)?.style;
+      if (!style?.scrollID || target.parentElement?.closest('.sb-scrollview, .sb-list') !== el) continue;
+      const rect = target.getBoundingClientRect();
+      candidates.push(horizontal ? { id, start: rect.left, length: rect.width } : { id, start: rect.top, length: rect.height });
+    }
+    const target = positionTarget(candidates, point);
+    if (target === null || this.reportedPositions.get(el) === target) return;
+    this.reportedPositions.set(el, target);
+    this.onEvent({ type: 'scrollposition', id: target });
+  }
+
   /** A `styled` whose style carries a `scrollTo` not seen before is scrolled to after this pass's layout. */
   private noteScroll(id: ElementId, kind: ElementKind, props: ElementProps): void {
     if (kind !== 'styled') return;
@@ -3134,6 +3202,8 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
       if (scroll.snap === 'viewAligned' || scroll.snap === 'paging') el.dataset['sbSnap'] = scroll.snap;
       else delete el.dataset['sbSnap'];
       if (scroll.dismissesKeyboard === true) el.dataset['sbDismissesKeyboard'] = 'true';
+      if (scroll.reportsPosition === true) el.dataset['sbReportsPosition'] = '';
+      else delete el.dataset['sbReportsPosition'];
       applyEdgeEffect(el, scroll.edgeEffect);
       applyDefaultScrollAnchor(el, scroll.defaultScrollAnchor);
       break;

package/src/scrollPosition.ts

@@ -0,0 +1,44 @@
+/**
+ * `.scrollPosition(id:)` reading back (docs/ops-protocol.md, "Scrolling to a
+ * view"): a `scrollview` with `reportsPosition` tells the app which scroll
+ * target (`scrollID`) is at its anchor point once scrolling settles, as
+ * SwiftUI sets the binding to the id of the view at the anchor. The renderer
+ * gathers the targets' extents along the axis and asks `positionTarget`
+ * which one is there; the event goes to that target's element.
+ */
+
+/** A scroll target's extent along the scroll axis, in the same coordinates as the viewport. */
+export interface PositionCandidate {
+  id: number;
+  start: number;
+  length: number;
+}
+
+/** A settled scroll is one with no `scroll` event for this long (`scrollend`, where the browser has it, ends the wait). */
+export const POSITION_SETTLE_MS = 120;
+
+/**
+ * The target at `point` along the axis: the one whose extent holds the point
+ * (the last of several, as a later sibling draws over an earlier one), else
+ * the first one starting after it (the point is in a gap or before the
+ * content), else the last one (the point is past the end). Null without
+ * candidates; candidates of no extent are hidden and left out.
+ */
+export function positionTarget(candidates: readonly PositionCandidate[], point: number): number | null {
+  const shown = candidates.filter((c) => c.length > 0);
+  if (shown.length === 0) return null;
+  let holding: PositionCandidate | null = null;
+  let next: PositionCandidate | null = null;
+  for (const c of shown) {
+    if (c.start <= point && point < c.start + c.length) holding = c;
+    else if (c.start > point && (!next || c.start < next.start)) next = c;
+  }
+  if (holding) return holding.id;
+  if (next) return next.id;
+  return shown.reduce((last, c) => (c.start >= last.start ? c : last)).id;
+}
+
+/** The anchor point of a viewport along the axis: its start plus the anchor's fraction of its length. */
+export function anchorPoint(viewport: { start: number; length: number }, fraction: number): number {
+  return viewport.start + Math.min(1, Math.max(0, fraction)) * viewport.length;
+}

package/src/styles.css

@@ -1945,11 +1945,18 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   backdrop-filter: blur(40px) saturate(180%);
   -webkit-backdrop-filter: blur(40px) saturate(180%);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
-  overflow: hidden;
+  /* Taller than the room it was given (`max-height`), it scrolls inside. */
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
   transform-origin: 50% 0;
   animation: sb-menu-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
 }
 
+.sb-picker-menu::-webkit-scrollbar {
+  display: none;
+}
+
 .sb-picker-menu-exit {
   pointer-events: none;
   animation: sb-menu-out 0.15s ease-in both;
@@ -2968,9 +2975,15 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 /* Swipe rows (`swipeactions`, deletable `listrow`): the content slot paints
    the row background and slides over the action buttons behind it. */
 .sb-swipeactions,
-.sb-listrow {
+.sb-listrow,
+.sb-swipeactions {
   overflow: hidden;
   touch-action: pan-y;
+  /* The swipe content's z-index (below) orders it over the actions within
+     the row only: without its own stacking context it ranked with the
+     screen's bar (z-index 1), and a row scrolled under the bar painted over
+     the title. */
+  isolation: isolate;
 }
 
 .sb-swipeactions > .sb-swipe-content,