@swiftbrowser/web 0.9.6 → 0.9.8

package/package.json

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

@@ -1,7 +1,8 @@
 /**
  * Phase 8 control helpers shared by the layout engine and the renderer
  * (docs/ops-protocol.md, "Phase 8: interaction", Controls). Pure and DOM-free:
- * slider value snapping and the US-English UTC formatting of a `datepicker`.
+ * slider value snapping and the US-English formatting of a `datepicker` in
+ * its time zone.
  */
 
 // Slider
@@ -45,72 +46,124 @@ export function sliderFraction(value: number, min: number, max: number): number
 
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
-function dateOf(seconds: number): Date {
-  return new Date((Number.isFinite(seconds) ? seconds : 0) * 1000);
-}
-
 function pad2(n: number): string {
   return n < 10 ? `0${n}` : String(n);
 }
 
-/** "Oct 3, 2026": the UTC date of `seconds` in the US English abbreviated form. */
-export function formatPickerDate(seconds: number): string {
-  const d = dateOf(seconds);
-  return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`;
+/** The wall clock of an instant in a zone. */
+interface WallClock {
+  year: number;
+  month: number; // 0-based
+  day: number;
+  hours: number;
+  minutes: number;
+}
+
+/** The viewer's IANA zone, or UTC when the runtime cannot say. */
+function localZone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+  } catch {
+    return 'UTC';
+  }
+}
+
+const formatters = new Map<string, Intl.DateTimeFormat>();
+
+/** A formatter giving an instant's wall clock in `zone`; an unknown zone reads as UTC. */
+function formatterFor(zone: string): Intl.DateTimeFormat {
+  let format = formatters.get(zone);
+  if (!format) {
+    const options: Intl.DateTimeFormatOptions = { hourCycle: 'h23', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
+    try {
+      format = new Intl.DateTimeFormat('en-US', { ...options, timeZone: zone });
+    } catch {
+      format = new Intl.DateTimeFormat('en-US', { ...options, timeZone: 'UTC' });
+    }
+    formatters.set(zone, format);
+  }
+  return format;
+}
+
+/** The zone a picker shows and edits in: the one it names, else the viewer's. */
+function zoneOf(timeZone: string | undefined): string {
+  return timeZone || localZone();
+}
+
+/** The wall clock of `seconds` (since 1970) in `zone`. */
+export function wallClock(seconds: number, timeZone?: string): WallClock {
+  const ms = (Number.isFinite(seconds) ? seconds : 0) * 1000;
+  const parts: Record<string, number> = {};
+  for (const part of formatterFor(zoneOf(timeZone)).formatToParts(new Date(ms))) {
+    if (part.type !== 'literal') parts[part.type] = Number(part.value);
+  }
+  // `h23` still reads "24" for midnight in some engines.
+  return { year: parts['year'] ?? 1970, month: (parts['month'] ?? 1) - 1, day: parts['day'] ?? 1, hours: (parts['hour'] ?? 0) % 24, minutes: parts['minute'] ?? 0 };
+}
+
+/** The instant (seconds since 1970) at a wall clock in `zone`; in a gap (a clock skipped forward) the later reading, in an overlap the earlier. */
+export function instantOf(clock: WallClock, timeZone?: string): number {
+  const asUTC = (c: WallClock): number => Date.UTC(c.year, c.month, c.day, c.hours, c.minutes, 0) / 1000;
+  const wanted = asUTC(clock);
+  // The zone's offset at a nearby instant, then checked at the answer itself (a DST change may sit between).
+  let guess = wanted - (asUTC(wallClock(wanted, timeZone)) - wanted);
+  const again = wanted - (asUTC(wallClock(guess, timeZone)) - guess);
+  if (again !== guess && asUTC(wallClock(again, timeZone)) === wanted) guess = again;
+  return guess;
+}
+
+/** "Oct 3, 2026": the date of `seconds` in `timeZone` (the viewer's when absent), in the US English abbreviated form. */
+export function formatPickerDate(seconds: number, timeZone?: string): string {
+  const c = wallClock(seconds, timeZone);
+  return `${MONTHS[c.month]} ${c.day}, ${c.year}`;
 }
 
-/** "7:00 AM": the UTC time of `seconds` in the US English 12-hour form. */
-export function formatPickerTime(seconds: number): string {
-  const d = dateOf(seconds);
-  const hours = d.getUTCHours();
-  const period = hours < 12 ? 'AM' : 'PM';
-  const hour12 = hours % 12 === 0 ? 12 : hours % 12;
-  return `${hour12}:${pad2(d.getUTCMinutes())} ${period}`;
+/** "7:00 AM": the time of `seconds` in `timeZone`, in the US English 12-hour form. */
+export function formatPickerTime(seconds: number, timeZone?: string): string {
+  const c = wallClock(seconds, timeZone);
+  const period = c.hours < 12 ? 'AM' : 'PM';
+  const hour12 = c.hours % 12 === 0 ? 12 : c.hours % 12;
+  return `${hour12}:${pad2(c.minutes)} ${period}`;
 }
 
-/** `yyyy-mm-dd` for a native `<input type="date">`, in UTC. */
-export function dateInputValue(seconds: number): string {
-  const d = dateOf(seconds);
-  return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())}`;
+/** `yyyy-mm-dd` for a native `<input type="date">`, in `timeZone`. */
+export function dateInputValue(seconds: number, timeZone?: string): string {
+  const c = wallClock(seconds, timeZone);
+  return `${c.year}-${pad2(c.month + 1)}-${pad2(c.day)}`;
 }
 
-/** `HH:MM` for a native `<input type="time">`, in UTC. */
-export function timeInputValue(seconds: number): string {
-  const d = dateOf(seconds);
-  return `${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}`;
+/** `HH:MM` for a native `<input type="time">`, in `timeZone`. */
+export function timeInputValue(seconds: number, timeZone?: string): string {
+  const c = wallClock(seconds, timeZone);
+  return `${pad2(c.hours)}:${pad2(c.minutes)}`;
 }
 
 /**
- * Seconds (UTC) after a native input changed: the `date` (`yyyy-mm-dd`)
- * replaces the day and keeps the time of day of `seconds`; the `time`
- * (`HH:MM`) replaces the time of day and keeps the day. Seconds within the
- * minute are dropped, like the pickers' minute granularity. An unparsable
- * value leaves `seconds` as it was.
+ * Seconds after a native input changed, read in `timeZone`: the `date`
+ * (`yyyy-mm-dd`) replaces the day and keeps the time of day of `seconds`;
+ * the `time` (`HH:MM`) replaces the time of day and keeps the day. Seconds
+ * within the minute are dropped, like the pickers' minute granularity. An
+ * unparsable value leaves `seconds` as it was.
  */
-export function combineDateSeconds(seconds: number, change: { date?: string; time?: string }): number {
-  const d = dateOf(seconds);
-  let year = d.getUTCFullYear();
-  let month = d.getUTCMonth();
-  let day = d.getUTCDate();
-  let hours = d.getUTCHours();
-  let minutes = d.getUTCMinutes();
+export function combineDateSeconds(seconds: number, change: { date?: string; time?: string }, timeZone?: string): number {
+  const clock = wallClock(seconds, timeZone);
   if (change.date !== undefined) {
     const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(change.date);
     if (!m) return seconds;
-    year = Number(m[1]);
-    month = Number(m[2]) - 1;
-    day = Number(m[3]);
+    clock.year = Number(m[1]);
+    clock.month = Number(m[2]) - 1;
+    clock.day = Number(m[3]);
   }
   if (change.time !== undefined) {
     const m = /^(\d{2}):(\d{2})/.exec(change.time);
     if (!m) return seconds;
-    hours = Number(m[1]);
-    minutes = Number(m[2]);
+    clock.hours = Number(m[1]);
+    clock.minutes = Number(m[2]);
   }
-  return Math.floor(Date.UTC(year, month, day, hours, minutes, 0) / 1000);
+  return instantOf(clock, timeZone);
 }
 
-/** True when two instants fall on the same UTC day (a time input's `min`/`max` only apply then). */
-export function sameUTCDay(a: number, b: number): boolean {
-  return dateInputValue(a) === dateInputValue(b);
+/** True when two instants fall on the same day in `timeZone` (a time input's `min`/`max` only apply then). */
+export function sameDay(a: number, b: number, timeZone?: string): boolean {
+  return dateInputValue(a, timeZone) === dateInputValue(b, timeZone);
 }

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;
     }
@@ -4222,8 +4227,9 @@ export class LayoutPass {
       const cctx = this.childContext(node, ctx);
       const seconds = num(node.props['seconds']) ?? 0;
       const components = str(node.props['components']) ?? 'dateAndTime';
-      const dateText = components === 'hourAndMinute' ? null : formatPickerDate(seconds);
-      const timeText = components === 'date' ? null : formatPickerTime(seconds);
+      const timeZone = str(node.props['timeZone']) ?? undefined;
+      const dateText = components === 'hourAndMinute' ? null : formatPickerDate(seconds, timeZone);
+      const timeText = components === 'date' ? null : formatPickerTime(seconds, timeZone);
       const capsule = (text: string | null): number =>
         text === null ? 0 : this.measurer.measureWidth(text, ctx.font) + 2 * DATEPICKER_CAPSULE_PAD_H;
       const dateWidth = capsule(dateText);

package/src/layout/index.ts

@@ -88,7 +88,7 @@ export {
   dateInputValue,
   formatPickerDate,
   formatPickerTime,
-  sameUTCDay,
+  sameDay,
   sliderFraction,
   snapSliderValue,
   timeInputValue,

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)
@@ -2035,6 +2052,8 @@ export interface DatePickerProps {
   components: DatePickerComponents;
   min: number | null;
   max: number | null;
+  /** The IANA time zone the date and time are shown and edited in (`\\.timeZone`); the viewer's when absent. */
+  timeZone?: string;
   /** `.labelsHidden()`: the label child is not laid out. */
   labelsHidden?: boolean;
 }
@@ -2058,7 +2077,7 @@ export interface SlideEvent {
   id: ElementId;
   value: number;
 }
-/** A `datepicker` changed: seconds since 1970, UTC. */
+/** A `datepicker` changed: seconds since 1970 (an instant; the zone only shaped the reading). */
 export interface DateEvent {
   type: 'date';
   id: ElementId;

package/src/renderer.ts

@@ -140,7 +140,7 @@ import {
   dateInputValue,
   formatPickerDate,
   formatPickerTime,
-  sameUTCDay,
+  sameDay,
   sliderFraction,
   snapSliderValue,
   timeInputValue,
@@ -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.
@@ -742,7 +747,7 @@ export class Renderer {
     const id = Number(picker?.dataset[ID_ATTR]);
     if (!picker || !Number.isInteger(id) || input.value === '') return;
     const seconds = Number(picker.dataset['sbSeconds']) || 0;
-    const value = combineDateSeconds(seconds, input.type === 'date' ? { date: input.value } : { time: input.value });
+    const value = combineDateSeconds(seconds, input.type === 'date' ? { date: input.value } : { time: input.value }, picker.dataset['sbTimeZone'] || undefined);
     if (value === seconds) return;
     // Show the new value right away; Swift's `update` confirms (or reverts) it.
     picker.dataset['sbSeconds'] = String(value);
@@ -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;
@@ -2957,14 +3025,15 @@ function applyDatePicker(el: HTMLElement, props: DatePickerProps): void {
   el.dataset['sbComponents'] = components;
   el.dataset['sbMin'] = props.min != null && Number.isFinite(props.min) ? String(props.min) : '';
   el.dataset['sbMax'] = props.max != null && Number.isFinite(props.max) ? String(props.max) : '';
+  el.dataset['sbTimeZone'] = typeof props.timeZone === 'string' ? props.timeZone : '';
   if (props.labelsHidden === true) el.dataset['sbLabelsHidden'] = '';
   setDatePickerValue(el, seconds);
 }
 
 /**
- * Show `seconds` in the capsules (US English, UTC) and in the native inputs;
- * `min` / `max` (from the element's data) bound the date input, and the time
- * input only when they fall on the shown day.
+ * Show `seconds` in the capsules (US English, in the picker's zone) and in
+ * the native inputs; `min` / `max` (from the element's data) bound the date
+ * input, and the time input only when they fall on the shown day.
  */
 function setDatePickerValue(el: HTMLElement, seconds: number): void {
   const bound = (key: 'sbMin' | 'sbMax'): number | null => {
@@ -2973,19 +3042,20 @@ function setDatePickerValue(el: HTMLElement, seconds: number): void {
   };
   const min = bound('sbMin');
   const max = bound('sbMax');
+  const zone = el.dataset['sbTimeZone'] || undefined;
   for (const type of ['date', 'time'] as const) {
     const capsule = el.querySelector<HTMLElement>(`:scope > .sb-datepicker-${type}`);
     if (!capsule) continue;
     const text = capsule.querySelector<HTMLElement>(':scope > .sb-datepicker-text');
     const input = capsule.querySelector<HTMLInputElement>(':scope > .sb-datepicker-input');
-    const label = type === 'date' ? formatPickerDate(seconds) : formatPickerTime(seconds);
+    const label = type === 'date' ? formatPickerDate(seconds, zone) : formatPickerTime(seconds, zone);
     if (text && text.textContent !== label) text.textContent = label;
     if (!input) continue;
-    const format = type === 'date' ? dateInputValue : timeInputValue;
+    const format = (s: number): string => (type === 'date' ? dateInputValue(s, zone) : timeInputValue(s, zone));
     const value = format(seconds);
     if (input.value !== value) input.value = value;
     const limit = (b: number | null): string =>
-      b !== null && Number.isFinite(b) && (type === 'date' || sameUTCDay(b, seconds)) ? format(b) : '';
+      b !== null && Number.isFinite(b) && (type === 'date' || sameDay(b, seconds, zone)) ? format(b) : '';
     input.min = limit(min);
     input.max = limit(max);
   }
@@ -3132,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,