@swiftbrowser/web 0.1.0 → 0.3.0

package/src/interaction.ts

@@ -9,7 +9,10 @@
  * 2. the wrappers between the target and the root, innermost first: a
  *    `gesture` (drag, long press), a `contextmenu` (long press) and a swipe
  *    row (`swipeactions`, or a deletable `listrow` without one);
- * 3. the sheet card (drag down to dismiss);
+ * 3. the sheet card (drag down to dismiss): inside a vertical scroll view
+ *    only while that view is at its top, as UIKit hands a sheet's scroll
+ *    view's downward drag to the sheet there (a touch's first downward move
+ *    is kept from scrolling natively so the pointer reaches the sheet);
  * 4. pull to refresh on a `refreshable` scroller at its top.
  *
  * Nothing owns the pointer at first. On each move the candidates are asked in
@@ -24,6 +27,9 @@
  * reach the renderer's click handler untouched, so controls inside gestures
  * and rows keep working.
  *
+ * A horizontal scroll view keeps horizontal motion (touch or wheel) from the
+ * swipe rows around it, as UIKit's inner scroll view wins over a row's swipe.
+ *
  * Horizontal wheel scrolling slides swipe rows and vertical wheel at the
  * top of a `refreshable` scroller pulls to refresh; touch moves are read
  * directly for pull to refresh (the browser cancels the pointer once it
@@ -185,6 +191,8 @@ export class InteractionController {
   private wheelPull: { scroller: HTMLElement; pulled: number; sent: boolean; timer: number } | null = null;
   /** Touch-driven pull (the browser cancels the pointer once the list scrolls). */
   private touchPull: { scroller: HTMLElement; id: ElementId; startY: number; sent: boolean } | null = null;
+  /** A touch in a sheet's scroll view at its top: its first move decides who scrolls. */
+  private touchSheet: { scroller: HTMLElement; startY: number } | null = null;
 
   constructor(private readonly host: InteractionHost) {
     const root = host.root;
@@ -195,6 +203,7 @@ export class InteractionController {
     root.addEventListener('scroll', this.onScroll, true);
     root.addEventListener('touchstart', this.onTouchStart, { passive: true });
     root.addEventListener('touchmove', this.onTouchMove, { passive: true });
+    root.addEventListener('touchmove', this.onSheetTouchMove, { passive: false });
     root.addEventListener('touchend', this.onTouchEnd, { passive: true });
     root.addEventListener('touchcancel', this.onTouchEnd, { passive: true });
     document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
@@ -209,6 +218,7 @@ export class InteractionController {
     root.removeEventListener('scroll', this.onScroll, true);
     root.removeEventListener('touchstart', this.onTouchStart);
     root.removeEventListener('touchmove', this.onTouchMove);
+    root.removeEventListener('touchmove', this.onSheetTouchMove);
     root.removeEventListener('touchend', this.onTouchEnd);
     root.removeEventListener('touchcancel', this.onTouchEnd);
     document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
@@ -379,8 +389,11 @@ export class InteractionController {
         out.push({ kind: 'swipeback', screen, id, width: rect.width || screen.offsetWidth, below: below?.classList.contains('sb-navscreen') ? below : null });
       }
     }
+    // A horizontal scroll view takes horizontal motion from the rows around it.
+    let inHorizontalScroller = false;
     for (let el: HTMLElement | null = target; el && el !== this.host.root; el = el.parentElement) {
       const id = Number(el.dataset[ID_ATTR]);
+      if (isHorizontalScroller(el)) inHorizontalScroller = true;
       if (el.classList.contains('sb-gesture') && Number.isInteger(id)) {
         const node = this.host.nodeOf(id);
         const props = node?.props ?? {};
@@ -392,14 +405,16 @@ export class InteractionController {
         out.push({ kind: 'gesture', el, id, drag, longPress, minDistance, minDuration });
       } else if (el.classList.contains('sb-contextmenu') && Number.isInteger(id)) {
         out.push({ kind: 'contextmenu', el, id });
-      } else if (el.classList.contains('sb-swipeactions') || el.classList.contains('sb-listrow')) {
+      } else if ((el.classList.contains('sb-swipeactions') || el.classList.contains('sb-listrow')) && !inHorizontalScroller) {
         const host = this.swipeHostFor(el);
         if (host) out.push({ kind: 'swipe', host });
       }
     }
     const card = target.closest<HTMLElement>('.sb-sheet-card');
     const sheet = card?.parentElement;
-    if (card && sheet?.classList.contains('sb-sheet') && sheet.dataset['sbSheetPosition'] !== 'below') {
+    // A scroll view in the sheet that is scrolled down keeps the drag.
+    const sheetScroller = card ? verticalScrollerIn(target, card) : null;
+    if (card && sheet?.classList.contains('sb-sheet') && sheet.dataset['sbSheetPosition'] !== 'below' && !(sheetScroller && sheetScroller.scrollTop > 0)) {
       const id = Number(sheet.dataset[ID_ATTR]);
       const detents = (sheet.dataset['sbDetents'] ?? '').split(' ');
       // A full-screen cover (`detents: ["full"]`) has no drag to dismiss.
@@ -863,6 +878,10 @@ export class InteractionController {
       const rowEl = target.closest<HTMLElement>('.sb-swipeactions, .sb-listrow');
       const host = rowEl ? this.swipeHostFor(rowEl) : null;
       if (!host) return;
+      // A horizontal scroll view in the row scrolls instead.
+      for (let el: HTMLElement | null = target; el && el !== rowEl; el = el.parentElement) {
+        if (isHorizontalScroller(el)) return;
+      }
       let state = this.wheelSwipe;
       if (!state || state.host.el !== host.el) {
         if (state) this.finishWheelSwipe();
@@ -936,7 +955,15 @@ export class InteractionController {
 
   private readonly onTouchStart = (event: TouchEvent): void => {
     const touch = event.touches[0];
+    this.touchSheet = null;
     if (!touch || event.touches.length !== 1) return;
+    const target = event.target as HTMLElement;
+    const card = target.closest<HTMLElement>('.sb-sheet-card');
+    const sheetScroller = card ? verticalScrollerIn(target, card) : null;
+    // A refreshable scroller keeps its pull to refresh.
+    if (sheetScroller && sheetScroller.scrollTop <= 0 && sheetScroller.dataset['sbRefreshable'] === undefined) {
+      this.touchSheet = { scroller: sheetScroller, startY: touch.clientY };
+    }
     const scroller = this.refreshableScrollerOf(event.target as Element);
     if (!scroller || scroller.el.scrollTop > 0) return;
     this.touchPull = { scroller: scroller.el, id: scroller.id, startY: touch.clientY, sent: false };
@@ -959,6 +986,25 @@ export class InteractionController {
 
   private readonly onTouchEnd = (): void => {
     this.touchPull = null;
+    this.touchSheet = null;
+  };
+
+  /**
+   * The first move of a touch in a sheet's scroll view at its top: downwards,
+   * it is kept from scrolling (or overscrolling) the view, so the pointer
+   * stays with the sheet's drag; upwards, the view scrolls as usual.
+   */
+  private readonly onSheetTouchMove = (event: TouchEvent): void => {
+    const pending = this.touchSheet;
+    const touch = event.touches[0];
+    if (!pending || !touch) return;
+    const dy = touch.clientY - pending.startY;
+    if (dy === 0) return;
+    if (dy > 0 && pending.scroller.scrollTop <= 0 && event.cancelable) {
+      event.preventDefault();
+      return; // keep deciding: every move of this drag stays with the sheet
+    }
+    this.touchSheet = null;
   };
 
   private readonly onContextMenu = (event: MouseEvent): void => {
@@ -1077,6 +1123,25 @@ function clearSelectionIn(root: HTMLElement): void {
   if (anchor && root.contains(anchor)) selection.removeAllRanges();
 }
 
+/** A scroll view that scrolls horizontally (`ScrollView(.horizontal)` or both axes). */
+/** The innermost vertically scrolling `list` / `scrollview` from `target` up to `limit` (excluded). */
+function verticalScrollerIn(target: HTMLElement, limit: HTMLElement): HTMLElement | null {
+  for (let el: HTMLElement | null = target; el && el !== limit; el = el.parentElement) {
+    if (el.classList.contains('sb-list')) return el;
+    if (el.classList.contains('sb-scrollview')) {
+      const axes = el.dataset['sbAxes'];
+      if (axes === 'vertical' || axes === 'both' || axes === undefined) return el;
+    }
+  }
+  return null;
+}
+
+function isHorizontalScroller(el: HTMLElement): boolean {
+  if (!el.classList.contains('sb-scrollview')) return false;
+  const axes = el.dataset['sbAxes'];
+  return axes === 'horizontal' || axes === 'both';
+}
+
 /** The content slot of a swipe row (`swipeactions` / `listrow`). */
 function contentOf(rowEl: HTMLElement): HTMLElement | null {
   return rowEl.querySelector<HTMLElement>(':scope > .sb-swipe-content');

package/src/landing.ts

@@ -10,7 +10,7 @@
 
 import { toString as qrToString } from 'qrcode';
 
-const REPO_URL = 'https://github.com/dabbott/SwiftBrowser';
+const REPO_URL = 'https://github.com/noya-app/SwiftBrowser';
 
 /** The card's subtitle: the spec's description, else a generic line. */
 export function describeApp(app: Pick<SBLandingApp, 'name' | 'description'>): string {
@@ -132,7 +132,7 @@ function renderBuildInfo(): void {
     footer.append(time);
   }
   footer.append(' · ');
-  const repo = el('a', 'build-repo', 'dabbott/SwiftBrowser');
+  const repo = el('a', 'build-repo', 'noya-app/SwiftBrowser');
   repo.href = REPO_URL;
   footer.append(repo);
 }

package/src/largeTitle.ts

@@ -0,0 +1,79 @@
+/**
+ * A navigation screen's large title scrolls with the screen's root list or
+ * scroll view (iOS): the engine starts that scroll view under the bar, insets
+ * its content by the title row and marks it with a `largeTitle` chrome rect
+ * (layout/engine.ts, `placeNavScreen`). Here the title follows the scroll
+ * offset and fades out at the bar's edge, as the scrolled content does
+ * (`data-sb-scrolled`, iOS 26's scroll edge effect), and once it has gone
+ * under the bar the screen gets `data-sb-collapsed`, which shows the inline
+ * title (styles.css). Pulled past the top (a touch overscroll), the title
+ * moves down with the content (iOS 26 no longer grows it).
+ */
+
+/** The scroll offset past which the title has gone under the bar. */
+const COLLAPSE_OFFSET = 44;
+/** How far below the bar's edge content fades in (styles.css matches). */
+const EDGE_FADE = 16;
+
+const bound = new WeakSet<HTMLElement>();
+
+function largeTitleOf(scroller: HTMLElement): { screen: HTMLElement; title: HTMLElement } | null {
+  const screen = scroller.closest<HTMLElement>('.sb-navscreen');
+  const title = screen?.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-navbar-large-title');
+  return screen && title ? { screen, title } : null;
+}
+
+/**
+ * Called for every list and scroll view the layout reaches: `scrolls` is
+ * whether the engine marked it as carrying its screen's large title.
+ */
+export function bindLargeTitle(scroller: HTMLElement, scrolls: boolean): void {
+  if (!scrolls) {
+    if (scroller.dataset['sbScrollsTitle'] !== undefined) {
+      delete scroller.dataset['sbScrollsTitle'];
+      delete scroller.dataset['sbScrolled'];
+      const parts = largeTitleOf(scroller);
+      if (parts) reset(parts.screen, parts.title);
+    }
+    return;
+  }
+  scroller.dataset['sbScrollsTitle'] = '';
+  if (!bound.has(scroller)) {
+    bound.add(scroller);
+    scroller.addEventListener('scroll', () => syncLargeTitle(scroller), { passive: true });
+  }
+  syncLargeTitle(scroller);
+}
+
+export function syncLargeTitle(scroller: HTMLElement): void {
+  if (scroller.dataset['sbScrollsTitle'] === undefined) return;
+  const parts = largeTitleOf(scroller);
+  if (!parts) return;
+  const { screen, title } = parts;
+  const offset = scroller.scrollTop;
+  const s = title.style;
+  if (offset > 0) {
+    s.transform = `translateY(${-offset}px)`;
+    // Hide what has gone above the title's row (under the bar), fading in
+    // below the edge.
+    setMask(title, `linear-gradient(to bottom, transparent ${offset}px, #000 ${offset + EDGE_FADE}px)`);
+    scroller.dataset['sbScrolled'] = '';
+  } else {
+    s.transform = offset < 0 ? `translateY(${-offset}px)` : '';
+    setMask(title, '');
+    delete scroller.dataset['sbScrolled'];
+  }
+  if (offset > COLLAPSE_OFFSET) screen.dataset['sbCollapsed'] = '';
+  else delete screen.dataset['sbCollapsed'];
+}
+
+function setMask(el: HTMLElement, mask: string): void {
+  el.style.setProperty('mask-image', mask);
+  el.style.setProperty('-webkit-mask-image', mask);
+}
+
+function reset(screen: HTMLElement, title: HTMLElement): void {
+  title.style.transform = '';
+  setMask(title, '');
+  delete screen.dataset['sbCollapsed'];
+}

package/src/layout/chart.ts

@@ -14,6 +14,8 @@ export const CHART_DEFAULT_WIDTH = 300;
 export const CHART_DEFAULT_HEIGHT = 200;
 /** Gap between an axis label and the plot edge (the ticks sit inside it). */
 export const CHART_AXIS_PAD = 6;
+/** How far a leading-anchored x label (a date's) starts after its tick. */
+export const CHART_LEADING_LABEL_OFFSET = 2;
 export const CHART_TICK_LENGTH = 4;
 /** Legend glyph: a `symbolSize`-px symbol, or an 18 × 3 line when the item has no symbol. */
 export const CHART_LEGEND_GLYPH = 10;
@@ -32,8 +34,11 @@ export type ChartItemPosition = 'top' | 'bottom' | 'leading' | 'trailing' | 'ove
 
 export interface ChartAxisInput {
   position: ChartAxisPosition;
-  /** Text labels: unit position and measured width (height is `labelHeight`). */
-  labels: { at: number; width: number }[];
+  /**
+   * Text labels: unit position and measured width (height is `labelHeight`);
+   * `leading`: an x label starts at its tick (a date's) instead of centering on it.
+   */
+  labels: { at: number; width: number; leading?: boolean }[];
   /** Line height of the axis font. */
   labelHeight: number;
   /** View labels (`xLabel` / `yLabel` children) at their ideal size. */
@@ -186,7 +191,8 @@ export function layoutChart(input: ChartLayoutInput): ChartGeometry {
     const top = (h: number) => (xTop ? plot.y - CHART_AXIS_PAD - h : plot.y + plot.height + CHART_AXIS_PAD);
     for (const label of xAxis.labels) {
       const h = xAxis.labelHeight;
-      const x = clampTo(mapX(plot, label.at) - label.width / 2, label.width, 0, width);
+      const start = label.leading ? mapX(plot, label.at) + CHART_LEADING_LABEL_OFFSET : mapX(plot, label.at) - label.width / 2;
+      const x = clampTo(start, label.width, 0, width);
       xLabels.push({ x, y: top(h), width: label.width, height: h });
     }
     for (const view of xAxis.views) {