@swiftbrowser/web 0.9.9 → 0.9.10

package/package.json

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

@@ -3,11 +3,13 @@
  * renderer's element tree (docs/ops-protocol.md, "Layout engine semantics").
  *
  * `measure(node, proposal)` reports the size a node wants for a proposal and
- * is memoized per (node, proposal); `place(node, proposal, x, y)` records the
- * frame and places the children using the same memoized plans. Context (font,
- * line limit, text alignment, enclosing stack axis, list row) flows down the
- * tree like SwiftUI's environment and is a pure function of the node's
- * ancestors, so it is not part of the memo key.
+ * is memoized per (node, proposal, container); `place(node, proposal, x, y)`
+ * records the frame and places the children using the same memoized plans.
+ * Context (font, line limit, text alignment, enclosing stack axis, list row)
+ * flows down the tree like SwiftUI's environment and is a pure function of
+ * the node's ancestors, so it is not part of the memo key; the container
+ * (`containerRelativeFrame`) is, as a scroll view's viewport is its own
+ * proposal and differs between the widths a stack tries it at.
  *
  * Phase 9: a `LayoutPass` lives across commits. The renderer tells it which
  * nodes changed (`invalidate`, `remove`); a changed node, its ancestors (their
@@ -978,6 +980,18 @@ function proposalKey(p: Proposal): string {
   return `${p.width === null ? 'n' : p.width}|${p.height === null ? 'n' : p.height}`;
 }
 
+/**
+ * The memo key of a plan or placement: the proposal and the container
+ * (`containerRelativeFrame`) it was made under. The container is the screen
+ * everywhere but inside a scroll view, whose viewport is its proposal: a
+ * stack measuring the scroll view at zero, at its ideal and at its final
+ * width makes three containers, and a page sized by the container must not
+ * keep the size the first measurement gave it.
+ */
+function planKey(ctx: Context, p: Proposal): string {
+  return `${proposalKey(p)}@${ctx.container.width}x${ctx.container.height}`;
+}
+
 /**
  * Snap a frame to whole CSS pixels: both edges floor (with an epsilon for
  * float noise), so nested and adjacent frames never overlap by a fraction and
@@ -1100,6 +1114,8 @@ interface ListPlan {
 interface ScrollPlan {
   size: Size;
   content: LayoutNode | null;
+  /** The content's context: the scroll view's, with the viewport as the container. */
+  cctx: Context;
   contentProposal: Proposal;
   contentSize: Size;
 }
@@ -1484,13 +1500,13 @@ export class LayoutPass {
   // Memoization and context
   // -------------------------------------------------------------------------
 
-  private plan<T>(node: LayoutNode, proposal: Proposal, compute: () => T): T {
+  private plan<T>(node: LayoutNode, ctx: Context, proposal: Proposal, compute: () => T): T {
     let byProposal = this.memo.get(node);
     if (!byProposal) {
       byProposal = new Map();
       this.memo.set(node, byProposal);
     }
-    const key = proposalKey(proposal);
+    const key = planKey(ctx, proposal);
     const cached = byProposal.get(key);
     if (cached !== undefined) return cached as T;
     const value = compute();
@@ -1765,7 +1781,7 @@ export class LayoutPass {
   }
 
   private textPlan(node: LayoutNode, ctx: Context, p: Proposal): TextPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const runs = node.props['runs'];
       if (Array.isArray(runs)) return this.richTextPlan(runs, ctx, p);
       const text = str(node.props['text']) ?? '';
@@ -1974,7 +1990,7 @@ export class LayoutPass {
    * non-empty; the width is the proposal, or the widest row.
    */
   private pickerPlan(node: LayoutNode, ctx: Context, p: Proposal): PickerPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const options = readOptions(node);
       const selected = readSelected(node, options.length);
       const style = str(node.props['style']);
@@ -2089,7 +2105,7 @@ export class LayoutPass {
   // -------------------------------------------------------------------------
 
   private stackPlan(node: LayoutNode, ctx: Context, p: Proposal, axis: Axis): StackPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const cctx = this.childContext(node, ctx);
       return this.layoutStack(node.children, cctx, p, axis, this.stackGaps(node, cctx, axis));
     });
@@ -2390,7 +2406,7 @@ export class LayoutPass {
    * frame (outermost) > padding > fixedSize > aspectRatio > child.
    */
   private styledPlan(node: LayoutNode, ctx: Context, p: Proposal): StyledPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const style = styleOf(node);
       let frame = readFrame(style['frame']);
       // Phase 12 `.containerRelativeFrame`: an affine size against the nearest
@@ -2542,7 +2558,7 @@ export class LayoutPass {
   }
 
   private scrollPlan(node: LayoutNode, ctx: Context, p: Proposal): ScrollPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const axes = this.scrollAxes(node);
       const content = this.contentOf(node, axes.horizontal && !axes.vertical ? 'horizontal' : 'vertical');
       // Phase 12: the viewport is the container `containerRelativeFrame` measures against.
@@ -2562,7 +2578,7 @@ export class LayoutPass {
         width: p.width === null ? contentSize.width : p.width,
         height: p.height === null ? contentSize.height : p.height,
       };
-      return { size, content, contentProposal, contentSize };
+      return { size, content, cctx, contentProposal, contentSize };
     });
   }
 
@@ -2571,7 +2587,7 @@ export class LayoutPass {
   // -------------------------------------------------------------------------
 
   private listPlan(node: LayoutNode, ctx: Context, p: Proposal): ListPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const { screen } = this.env;
       const width = finite(p.width) ? p.width : p.width === Infinity ? Infinity : screen.width;
       const layoutWidth = Number.isFinite(width) ? width : screen.width;
@@ -2775,17 +2791,17 @@ export class LayoutPass {
    * Phase 9: placed before, same proposal, same origin, nothing in the
    * subtree invalidated since: the last run's output still holds.
    */
-  private placedAlready(node: LayoutNode, p: Proposal, x: number, y: number): boolean {
+  private placedAlready(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): boolean {
     const last = this.placed.get(node);
-    return last !== undefined && last.key === proposalKey(p) && last.x === x && last.y === y;
+    return last !== undefined && last.key === planKey(ctx, p) && last.x === x && last.y === y;
   }
 
   place(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
-    if (this.placedAlready(node, p, x, y)) {
+    if (this.placedAlready(node, ctx, p, x, y)) {
       this.stats.skipped += 1;
       return;
     }
-    const key = proposalKey(p);
+    const key = planKey(ctx, p);
     this.placed.set(node, { key, x, y });
     this.stats.placed += 1;
     if (node.id >= 0) {
@@ -3018,7 +3034,8 @@ export class LayoutPass {
         if (inset) scrollChrome['topInset'] = { x, y, width: size.width, height: inset.bar };
         if (inset?.largeTitle) scrollChrome['largeTitle'] = inset.largeTitle;
         this.setChrome(node, scrollChrome);
-        if (plan.content) this.place(plan.content, cctx, plan.contentProposal, content.x, content.y);
+        // The content is placed under the context it was measured in: its container is the viewport.
+        if (plan.content) this.place(plan.content, plan.cctx, plan.contentProposal, content.x, content.y);
         return;
       }
       case 'list':
@@ -3291,7 +3308,7 @@ export class LayoutPass {
         const rowY = y + row.content.y;
         // A row that is skipped keeps the chrome it set itself when it was
         // placed (a link's chevron and label); only the list's keys are new.
-        const own = this.placedAlready(row.node, row.proposal, rowX, rowY) && row.node.id >= 0
+        const own = this.placedAlready(row.node, rowCtx, row.proposal, rowX, rowY) && row.node.id >= 0
           ? this.chrome.get(row.node.id)
           : undefined;
         this.setChrome(row.node, own ? { ...own, ...chrome } : chrome);
@@ -4059,7 +4076,7 @@ export class LayoutPass {
    * stable within a pass.
    */
   private viewThatFitsPlan(node: LayoutNode, ctx: Context, p: Proposal): { chosen: LayoutNode | null; size: Size } {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const axes = str(node.props['axes']) ?? 'both';
       const checkWidth = axes !== 'vertical';
       const checkHeight = axes !== 'horizontal';
@@ -4160,7 +4177,7 @@ export class LayoutPass {
    * the track. Children are named by `labels` in order.
    */
   private sliderPlan(node: LayoutNode, ctx: Context, p: Proposal): SliderPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const width = finite(p.width) ? p.width : SLIDER_DEFAULT_WIDTH;
       const cctx = this.childContext(node, ctx);
       const names = Array.isArray(node.props['labels']) ? node.props['labels'].map(str) : [];
@@ -4223,7 +4240,7 @@ export class LayoutPass {
    * trail. The width is the proposal, or label + 8 + capsules.
    */
   private datePickerPlan(node: LayoutNode, ctx: Context, p: Proposal): DatePickerPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const cctx = this.childContext(node, ctx);
       const seconds = num(node.props['seconds']) ?? 0;
       const components = str(node.props['components']) ?? 'dateAndTime';
@@ -4632,7 +4649,7 @@ export class LayoutPass {
    * aligns its whole column.
    */
   private gridPlan(node: LayoutNode, ctx: Context, p: Proposal): GridPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const hSpacing = num(node.props['horizontalSpacing']) ?? DEFAULT_SPACING;
       const vSpacing = num(node.props['verticalSpacing']) ?? DEFAULT_SPACING;
       interface Source {
@@ -4799,7 +4816,7 @@ export class LayoutPass {
    * its `rows` the lines along it (`y`, `height`: main axis).
    */
   private lazyGridPlan(node: LayoutNode, ctx: Context, p: Proposal): LazyGridPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const horizontal = node.kind === 'lazyhgrid';
       const crossOf = (size: { width: number | null; height: number | null }): number | null => (horizontal ? size.height : size.width);
       const items = readGridItems(node.props[horizontal ? 'rows' : 'columns']);
@@ -4922,7 +4939,7 @@ export class LayoutPass {
    * label in the gap at the bottom of its arc.
    */
   private gaugePlan(node: LayoutNode, ctx: Context, p: Proposal): GaugePlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const width = finite(p.width) ? p.width : GAUGE_DEFAULT_WIDTH;
       const cctx = this.childContext(node, ctx);
       const labelCtx: Context = { ...cctx, font: resolveFont({ textStyle: 'caption' }, ctx.font, this.env) };
@@ -5022,7 +5039,7 @@ export class LayoutPass {
    * measured at its ideal size and framed against the plot (src/layout/chart.ts).
    */
   private chartPlan(node: LayoutNode, ctx: Context, p: Proposal): ChartPlan {
-    return this.plan(node, p, () => {
+    return this.plan(node, ctx, p, () => {
       const size = chartSize(p.width, p.height);
       // An infinite proposal reports infinite (the chart is flexible); the
       // geometry is computed for the default size and recomputed when placed.

package/src/renderer.ts

@@ -363,6 +363,8 @@ export class Renderer {
   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>();
+  /** `reportsPosition` scroll views a finger is on: a scroll under it is not settled, however still the finger holds. */
+  private readonly heldScrolls = new Set<HTMLElement>();
   /** 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>();
   /**
@@ -862,6 +864,9 @@ export class Renderer {
     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 });
+    root.addEventListener('touchstart', this.onPositionTouchStart, { capture: true, passive: true });
+    root.addEventListener('touchend', this.onPositionTouchEnd, { capture: true, passive: true });
+    root.addEventListener('touchcancel', this.onPositionTouchEnd, { 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 = {
@@ -1574,6 +1579,9 @@ export class Renderer {
     this.root.removeEventListener('scroll', this.onScrollDismissKeyboard, true);
     this.root.removeEventListener('scroll', this.onPositionScroll, true);
     this.root.removeEventListener('scrollend', this.onPositionScrollEnd, true);
+    this.root.removeEventListener('touchstart', this.onPositionTouchStart, true);
+    this.root.removeEventListener('touchend', this.onPositionTouchEnd, true);
+    this.root.removeEventListener('touchcancel', this.onPositionTouchEnd, true);
     for (const timer of this.positionTimers.values()) window.clearTimeout(timer);
     this.positionTimers.clear();
     this.interaction.dispose();
@@ -1667,25 +1675,58 @@ 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. */
+  /** A `reportsPosition` scroll view scrolled: it has settled when no further scroll follows for a moment (and no finger is on it). */
   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),
-    );
+    if (this.heldScrolls.has(el)) return;
+    this.armPositionReport(el);
   };
 
   /** 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;
+    if (this.heldScrolls.has(el)) return;
     this.reportPosition(el);
   };
 
+  /**
+   * A finger came down inside `reportsPosition` scroll views: a pause in the
+   * drag is not a settled scroll (the page would be reported, and an app
+   * that re-centres on it would move the content under the finger). They
+   * report once the finger lifts and the scroll (the snap after a fling)
+   * settles.
+   */
+  private readonly onPositionTouchStart = (event: Event): void => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    for (let el = target.closest<HTMLElement>('[data-sb-reports-position]'); el; el = el.parentElement?.closest<HTMLElement>('[data-sb-reports-position]') ?? null) {
+      this.heldScrolls.add(el);
+      const pending = this.positionTimers.get(el);
+      if (pending !== undefined) {
+        window.clearTimeout(pending);
+        this.positionTimers.delete(el);
+      }
+    }
+  };
+
+  /** The last finger lifted: the held scroll views settle from here. */
+  private readonly onPositionTouchEnd = (event: Event): void => {
+    if ((event as TouchEvent).touches?.length > 0) return;
+    for (const el of this.heldScrolls) this.armPositionReport(el);
+    this.heldScrolls.clear();
+  };
+
+  private armPositionReport(el: HTMLElement): void {
+    const pending = this.positionTimers.get(el);
+    if (pending !== undefined) window.clearTimeout(pending);
+    this.positionTimers.set(
+      el,
+      window.setTimeout(() => this.reportPosition(el), POSITION_SETTLE_MS),
+    );
+  }
+
   /**
    * 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