@swiftbrowser/web 0.26.5 → 0.26.7

package/package.json

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

@@ -475,6 +475,8 @@ const MAC_LIST_FOOTER_BOTTOM = 6;
 // the bar and 10 above the rows. A screen not at the window's leading edge
 // starts its toolbar 10 in.
 const MAC_NAVSPLIT_SIDEBAR_WIDTH = 140;
+/** The width of the strip astride the sidebar panel's trailing edge that drags the sidebar's width. */
+const MAC_NAVSPLIT_DIVIDER_GRIP = 8;
 const MAC_NAVSPLIT_SIDEBAR_INSET = 8;
 const MAC_NAVSPLIT_TOGGLE_INSET = 6;
 const MAC_SIDEBAR_SEARCH_ABOVE = 9;
@@ -1031,6 +1033,32 @@ function cellStyle(node: LayoutNode, key: string): unknown {
   return undefined;
 }
 
+/**
+ * A split view column's `.navigationSplitViewColumnWidth(min:ideal:max:)`:
+ * the `splitColumnWidth` hint (`{ min?, ideal, max? }`) on the column's
+ * content, read through its `styled` wrappers, its `navstack` and the root
+ * screen of that stack (an app puts the modifier on the sidebar's list).
+ */
+function splitColumnWidthOf(column: LayoutNode): { min?: number; ideal: number; max?: number } | null {
+  let current: LayoutNode | undefined = column;
+  while (current) {
+    const hint = cellStyle(current, 'splitColumnWidth');
+    if (hint && typeof hint === 'object') {
+      const spec = hint as Record<string, unknown>;
+      const ideal = num(spec['ideal']);
+      if (ideal === null) return null;
+      const min = num(spec['min']);
+      const max = num(spec['max']);
+      return { ...(min !== null ? { min } : {}), ideal, ...(max !== null ? { max } : {}) };
+    }
+    const inner = unwrapStyled(current);
+    if (inner.kind === 'navstack') current = inner.children[0] as LayoutNode | undefined;
+    else if (inner.kind === 'navscreen') current = inner.children.find((child) => child.kind !== 'toolbar' && child.kind !== 'searchfield');
+    else return null;
+  }
+  return null;
+}
+
 /** The default vertical padding above and below a list row's content. */
 function listRowVPad(row: LayoutNode, sidebar: boolean, mac: boolean): number {
   if (mac) return row.kind === 'button' ? MAC_LIST_BUTTON_ROW_VPAD : sidebar ? MAC_LIST_SIDEBAR_ROW_VPAD : MAC_LIST_ROW_VPAD;
@@ -5438,7 +5466,18 @@ export class LayoutPass {
     const trailing = x + size.width >= screen.width - EPSILON ? safeArea.trailing : 0;
     const usable = Math.max(0, size.width - leading - trailing);
     const mac = this.env.platform === 'macos';
-    const sidebarWidth = Math.min(mac ? MAC_NAVSPLIT_SIDEBAR_WIDTH : NAVSPLIT_SIDEBAR_WIDTH, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
+    const [sidebar, detail, ...rest] = node.children;
+    // The sidebar's width: the app's `.navigationSplitViewColumnWidth` (a
+    // `splitColumnWidth` hint on the sidebar's content, its ideal width
+    // between its min and max), else the platform's default; on a Mac the
+    // user drags the column's edge (`env.sidebarWidths`) between the same
+    // bounds. Never more than 40% of the width.
+    const requested = sidebar ? splitColumnWidthOf(sidebar) : null;
+    const fallback = mac ? MAC_NAVSPLIT_SIDEBAR_WIDTH : NAVSPLIT_SIDEBAR_WIDTH;
+    const minWidth = requested?.min ?? Math.min(fallback, requested?.ideal ?? fallback);
+    const maxWidth = Math.min(requested?.max ?? Infinity, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
+    const dragged = mac ? this.env.sidebarWidths?.[node.id] : undefined;
+    const sidebarWidth = Math.max(0, Math.min(maxWidth, Math.max(minWidth, dragged ?? requested?.ideal ?? fallback)));
     const visible = node.props['sidebarVisible'] !== false;
     // A Mac's sidebar is a panel inset from the window's edges, with no separator.
     const panelInset = mac ? MAC_NAVSPLIT_SIDEBAR_INSET : 0;
@@ -5465,9 +5504,11 @@ export class LayoutPass {
     };
     // The Mac's sidebar panel (the page draws it), inset from the window's edges.
     if (mac) chrome['panel'] = { x: sidebarX, y: y + panelInset, width: sidebarWidth, height: Math.max(0, size.height - 2 * panelInset) };
+    // The Mac's column divider (the page's drag handle for the sidebar's
+    // width), a strip astride the panel's trailing edge while it shows.
+    if (mac && visible) chrome['divider'] = { x: separatorX - MAC_NAVSPLIT_DIVIDER_GRIP / 2, y, width: MAC_NAVSPLIT_DIVIDER_GRIP, height: size.height };
     this.setChrome(node, chrome);
     const toggleRoom = toggleSize + (mac ? MAC_BAR_GROUP_GAP : NAV_GROUP_SPACING);
-    const [sidebar, detail, ...rest] = node.children;
     if (sidebar) {
       const proposal: Proposal = { width: sidebarWidth, height: size.height };
       // On a Mac the toggle is at the sidebar's trailing end: its screens' items start where they would.

package/src/layout/types.ts

@@ -127,6 +127,12 @@ export interface LayoutEnvironment {
    * shows its `keyboard` toolbars above the keyboard.
    */
   focusedField?: number;
+  /**
+   * The sidebar widths the user dragged a `navsplit`'s column divider to (a
+   * Mac), by the `navsplit`'s element id. The engine keeps each between the
+   * column's min and max (its `splitColumnWidth` hint, else the defaults).
+   */
+  sidebarWidths?: Record<number, number>;
 }
 
 export type TextAlignment = 'leading' | 'center' | 'trailing';

package/src/layoutDom.ts

@@ -1070,6 +1070,11 @@ function applyChrome(
       // Phase 7: the sidebar toggle (the sidebar column draws the hairline).
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navsplit-toggle'), chrome?.['toggle'], box);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navsplit-panel'), chrome?.['panel'], box);
+      // The Mac's column divider, astride the panel's trailing edge; it
+      // carries the sidebar's width for the drag that resizes it (renderer.ts).
+      const divider = el.querySelector<HTMLElement>(':scope > .sb-navsplit-divider');
+      placeChrome(divider, chrome?.['divider'], box, false);
+      if (divider && chrome?.['panel']) divider.dataset['sbWidth'] = String(chrome['panel'].width);
       setFlag(el, 'sbSidebarHidden', node.props['sidebarVisible'] === false ? '' : null);
       return;
     }

package/src/pointerEffects.ts

@@ -1,43 +1,70 @@
 /**
  * What a page with a mouse adds to a phone's UI: `hover` events (`.onHover`),
- * tooltips (`.help`), cursors (`.pointerStyle`), and SF Symbols' effects
- * (`.symbolEffect`) drawn with CSS. The Swift shim draws an iPhone and sends
- * none of these; producers in the page (@swiftbrowser/react) do.
+ * `continuoushover` events (`.onContinuousHover`: where the mouse is as it
+ * moves), tooltips (`.help`), cursors (`.pointerStyle`), and SF Symbols'
+ * effects (`.symbolEffect`) drawn with CSS. The Swift shim draws an iPhone
+ * and sends none of these; producers in the page (@swiftbrowser/react) do.
  */
 
-import type { ElementId, Style, SymbolEffectStyle } from './protocol';
+import type { ContinuousHoverEvent, ElementId, HoverEvent, Style, SymbolEffectStyle } from './protocol';
 
 // ---------------------------------------------------------------------------
 // Hover
 // ---------------------------------------------------------------------------
 
 const HOVER_ATTR = 'sbHover';
+const CONTINUOUS_HOVER_ATTR = 'sbContinuousHover';
 
-/** Sends `hover` as a mouse enters and leaves the boxes marked `data-sb-hover` under `root`. */
+/**
+ * Sends `hover` as a mouse enters and leaves the boxes marked `data-sb-hover`
+ * under `root`, and `continuoushover` as it moves over the boxes marked
+ * `data-sb-continuous-hover` (its value the space of the location: the box's
+ * own, or the root's), one per animation frame per box, then `ended` as it
+ * leaves each.
+ */
 export class HoverTracker {
   private readonly hovered = new Set<HTMLElement>();
+  /** The boxes the mouse is over that follow it, with the location to send at the next frame. */
+  private readonly followed = new Map<HTMLElement, { x: number; y: number } | null>();
+  private frame: number | null = null;
 
   constructor(
     private readonly root: HTMLElement,
-    private readonly send: (id: ElementId, value: boolean) => void,
+    private readonly send: (event: HoverEvent | ContinuousHoverEvent) => void,
   ) {
     root.addEventListener('pointerover', this.onOver);
     root.addEventListener('pointerout', this.onOut);
+    root.addEventListener('pointermove', this.onMove);
   }
 
   dispose(): void {
     this.root.removeEventListener('pointerover', this.onOver);
     this.root.removeEventListener('pointerout', this.onOut);
+    this.root.removeEventListener('pointermove', this.onMove);
     this.hovered.clear();
+    this.followed.clear();
+    if (this.frame !== null) cancelAnimationFrame(this.frame);
+    this.frame = null;
   }
 
   private readonly onOver = (event: PointerEvent): void => {
     if (event.pointerType === 'touch') return;
     for (let el = event.target as HTMLElement | null; el && el !== this.root; el = el.parentElement) {
-      if (el.dataset[HOVER_ATTR] === undefined || this.hovered.has(el)) continue;
-      this.hovered.add(el);
-      this.report(el, true);
+      if (el.dataset[HOVER_ATTR] !== undefined && !this.hovered.has(el)) {
+        this.hovered.add(el);
+        this.report(el, true);
+      }
+      if (el.dataset[CONTINUOUS_HOVER_ATTR] !== undefined && !this.followed.has(el)) this.followed.set(el, this.locationIn(el, event));
+    }
+    if (this.followed.size) this.schedule();
+  };
+
+  private readonly onMove = (event: PointerEvent): void => {
+    if (event.pointerType === 'touch' || !this.followed.size) return;
+    for (let el = event.target as HTMLElement | null; el && el !== this.root; el = el.parentElement) {
+      if (this.followed.has(el)) this.followed.set(el, this.locationIn(el, event));
     }
+    this.schedule();
   };
 
   private readonly onOut = (event: PointerEvent): void => {
@@ -48,11 +75,42 @@ export class HoverTracker {
       this.hovered.delete(el);
       this.report(el, false);
     }
+    for (const el of [...this.followed.keys()]) {
+      if (next && el.contains(next)) continue;
+      this.followed.delete(el);
+      const id = this.idOf(el);
+      if (id !== null) this.send({ type: 'continuoushover', id, phase: 'ended' });
+    }
   };
 
-  private report(el: HTMLElement, value: boolean): void {
+  /** Where the mouse is, in the box's own coordinates or the root's, as the box's style asks. */
+  private locationIn(el: HTMLElement, event: PointerEvent): { x: number; y: number } {
+    const rect = (el.dataset[CONTINUOUS_HOVER_ATTR] === 'global' ? this.root : el).getBoundingClientRect();
+    return { x: Math.round((event.clientX - rect.left) * 100) / 100, y: Math.round((event.clientY - rect.top) * 100) / 100 };
+  }
+
+  /** The followed boxes' locations go out at the next frame, however many moves came in. */
+  private schedule(): void {
+    if (this.frame !== null) return;
+    this.frame = requestAnimationFrame(() => {
+      this.frame = null;
+      for (const [el, location] of this.followed) {
+        if (!location) continue;
+        this.followed.set(el, null);
+        const id = this.idOf(el);
+        if (id !== null) this.send({ type: 'continuoushover', id, phase: 'active', location });
+      }
+    });
+  }
+
+  private idOf(el: HTMLElement): ElementId | null {
     const id = Number(el.dataset['sbId']);
-    if (Number.isInteger(id) && el.isConnected) this.send(id, value);
+    return Number.isInteger(id) && el.isConnected ? id : null;
+  }
+
+  private report(el: HTMLElement, value: boolean): void {
+    const id = this.idOf(el);
+    if (id !== null) this.send({ type: 'hover', id, value });
   }
 }
 
@@ -87,6 +145,8 @@ const triggers = new WeakMap<HTMLElement, number>();
 /** Apply the pointer and effect fields of a `styled` element's style (called on create and update). */
 export function applyPointerAndEffects(el: HTMLElement, style: Style): void {
   if (style.hover) el.dataset[HOVER_ATTR] = '';
+  if (style.continuousHover) el.dataset[CONTINUOUS_HOVER_ATTR] = style.continuousHover;
+  else delete el.dataset[CONTINUOUS_HOVER_ATTR];
   if (style.help) {
     el.title = style.help;
     el.dataset['sbHelp'] = '';

package/src/protocol.ts

@@ -1593,6 +1593,7 @@ export type RendererEvent =
   | LazyEvent
   | MenuEvent
   | HoverEvent
+  | ContinuousHoverEvent
   // Scroll geometry and animation completion (the block at the end of this file)
   | ScrollGeometryEvent
   | AnimationCompleteEvent
@@ -2694,6 +2695,13 @@ export interface SymbolEffectStyle {
 export interface Style {
   /** The page sends `hover` events as a mouse enters and leaves the box (`.onHover`). */
   hover?: boolean;
+  /**
+   * `.onContinuousHover(coordinateSpace:)`: the page sends `continuoushover`
+   * events as a mouse moves over the box, its location in the box's own
+   * coordinates (`local`) or the root's, scrolling included (`global`, the
+   * same a `reportsFrame` geometry event reports), and once as it leaves.
+   */
+  continuousHover?: 'local' | 'global';
   /** `.help(_:)`: a tooltip on the box. */
   help?: string;
   /** `.pointerStyle(_:)`: the CSS cursor over the box (`pointer`, `text`, `grab`…). */
@@ -2735,6 +2743,13 @@ export interface HoverEvent {
   value: boolean;
 }
 
+/**
+ * A mouse (or pen) over a box whose style has `continuousHover`: `active`
+ * with where it is, coalesced to one per animation frame while it moves,
+ * then `ended` once as it leaves. Touch never hovers.
+ */
+export type ContinuousHoverEvent = { type: 'continuoushover'; id: ElementId; phase: 'active'; location: Point } | { type: 'continuoushover'; id: ElementId; phase: 'ended' };
+
 export interface ScrollToCommand {
   anchor: UnitPoint | null;
   /** Increases with every request (across readers); the page carries out each serial once. */

package/src/renderer.ts

@@ -422,7 +422,7 @@ export class Renderer {
    * for size changes, and the measurements of the current layout pass.
    */
   private readonly hostObserver: ResizeObserver | null = null;
-  /** `hover` events for boxes whose style asks for them (pointerEffects.ts). */
+  /** `hover` and `continuoushover` events for boxes whose style asks for them (pointerEffects.ts). */
   private readonly hover: HoverTracker;
   /** A frame check of the `reportsFrame` readers is queued for the next animation frame (after a scroll). */
   private frameCheckQueued = false;
@@ -1015,6 +1015,64 @@ export class Renderer {
     if (slider && this.root.contains(slider)) this.beginSliderDrag(slider, event);
   };
 
+  /**
+   * The sidebar widths the user dragged each `navsplit`'s column divider to
+   * (a Mac), by element id: the engine lays the split out with them, clamped
+   * to the column's bounds (`LayoutEnvironment.sidebarWidths`).
+   */
+  private readonly sidebarWidths: Record<number, number> = {};
+  private sidebarDrag: SidebarDrag | null = null;
+
+  // A Mac split view's divider: the pointer down that starts resizing the sidebar.
+  private readonly onDividerPointerDown = (event: PointerEvent): void => {
+    if (event.button !== 0 || this.sidebarDrag) return;
+    const target = event.target as HTMLElement | null;
+    const divider = target?.closest<HTMLElement>('.sb-navsplit-divider');
+    const split = divider?.parentElement;
+    if (!divider || !split || !this.root.contains(divider)) return;
+    const id = Number(split.dataset[ID_ATTR]);
+    const width = Number(divider.dataset['sbWidth']);
+    if (!Number.isInteger(id) || !Number.isFinite(width)) return;
+    event.preventDefault();
+    // The presenting tree may be scaled (behind a sheet): pointer distances are in screen px.
+    const rect = split.getBoundingClientRect();
+    const scale = split.offsetWidth > 0 ? rect.width / split.offsetWidth : 1;
+    this.sidebarDrag = { id, pointerId: event.pointerId, startX: event.clientX, startWidth: width, scale, frame: null, pending: width };
+    this.root.classList.add('sb-resizing-sidebar');
+    window.addEventListener('pointermove', this.onDividerMove);
+    window.addEventListener('pointerup', this.onDividerUp);
+    window.addEventListener('pointercancel', this.onDividerUp);
+  };
+
+  private readonly onDividerMove = (event: PointerEvent): void => {
+    const drag = this.sidebarDrag;
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    drag.pending = Math.round(drag.startWidth + (event.clientX - drag.startX) / drag.scale);
+    if (drag.frame !== null) return;
+    // One layout per frame, however many pointer moves arrive.
+    drag.frame = window.requestAnimationFrame(() => {
+      drag.frame = null;
+      if (this.sidebarWidths[drag.id] === drag.pending) return;
+      this.sidebarWidths[drag.id] = drag.pending;
+      if (this.commits > 0) this.layout();
+    });
+  };
+
+  private readonly onDividerUp = (event: PointerEvent): void => {
+    const drag = this.sidebarDrag;
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    if (drag.frame !== null) window.cancelAnimationFrame(drag.frame);
+    this.sidebarDrag = null;
+    this.root.classList.remove('sb-resizing-sidebar');
+    window.removeEventListener('pointermove', this.onDividerMove);
+    window.removeEventListener('pointerup', this.onDividerUp);
+    window.removeEventListener('pointercancel', this.onDividerUp);
+    if (this.sidebarWidths[drag.id] !== drag.pending) {
+      this.sidebarWidths[drag.id] = drag.pending;
+      if (this.commits > 0) this.layout();
+    }
+  };
+
   constructor(root: HTMLElement, onEvent: EventCallback) {
     this.root = root;
     this.onEvent = onEvent;
@@ -1079,6 +1137,7 @@ export class Renderer {
     });
     root.addEventListener('change', this.onChange);
     root.addEventListener('pointerdown', this.onSliderPointerDown);
+    root.addEventListener('pointerdown', this.onDividerPointerDown);
     if (typeof ResizeObserver !== 'undefined') {
       this.resizeObserver = new ResizeObserver(() => {
         const before = this.rootSize;
@@ -1112,7 +1171,7 @@ export class Renderer {
     this.stopRichEditors = listenToRichEditors(root, editorId, (event) => this.onEvent(event));
     // After `onInput` above, so a keystroke's `text` goes before its `selection`.
     this.stopPlainEditors = listenToPlainEditors(root, editorId, (event) => this.onEvent(event));
-    this.hover = new HoverTracker(root, (id, value) => this.onEvent({ type: 'hover', id, value }));
+    this.hover = new HoverTracker(root, (event) => this.onEvent(event));
     root.addEventListener('scroll', this.queueFrameCheck, { capture: true, passive: true });
     // Scroll transitions and pinned views follow the scroll in the frame it is drawn in.
     root.addEventListener('scroll', drawScrollTransitions, { capture: true, passive: true });
@@ -1605,6 +1664,7 @@ export class Renderer {
       ...(this.contentHeight ? { contentHeight: true } : {}),
       ...(this.keyboard > 0 ? { keyboard: this.keyboard } : {}),
       ...(focused !== null ? { focusedField: focused } : {}),
+      ...(Object.keys(this.sidebarWidths).length > 0 ? { sidebarWidths: { ...this.sidebarWidths } } : {}),
     };
   }
 
@@ -2114,6 +2174,8 @@ export class Renderer {
     this.root.removeEventListener('scroll', drawScrollTransitions, true);
     this.root.removeEventListener('change', this.onChange);
     this.root.removeEventListener('pointerdown', this.onSliderPointerDown);
+    this.root.removeEventListener('pointerdown', this.onDividerPointerDown);
+    if (this.sidebarDrag) this.onDividerUp({ pointerId: this.sidebarDrag.pointerId } as PointerEvent);
     this.reset();
   }
 
@@ -3375,7 +3437,11 @@ function createShell(kind: ElementKind): HTMLElement {
       // The Mac's floating sidebar panel, under the columns (the engine's `panel` rect).
       const panel = div('sb-navsplit-panel');
       panel.hidden = true;
-      el.append(panel, slot, toggle);
+      // The Mac's column divider (the engine's `divider` rect): dragging it
+      // resizes the sidebar, as SwiftUI's does.
+      const divider = div('sb-navsplit-divider');
+      divider.hidden = true;
+      el.append(panel, slot, divider, toggle);
       SLOTS.set(el, slot);
       return el;
     }
@@ -3858,6 +3924,21 @@ function animateAlertOut(container: HTMLElement, alert: HTMLElement): void {
   afterAnimation(clone, ALERT_TRANSITION_MS, () => clone.remove());
 }
 
+/** A drag of a Mac split view's column divider (`.sb-navsplit-divider`). */
+interface SidebarDrag {
+  /** The `navsplit` element. */
+  id: ElementId;
+  pointerId: number;
+  startX: number;
+  /** The sidebar's width when the drag began (the divider's `data-sb-width`). */
+  startWidth: number;
+  /** Screen px per layout px of the split view (the presenting tree may be scaled). */
+  scale: number;
+  frame: number | null;
+  /** The width the pointer asks for, laid out at the next animation frame. */
+  pending: number;
+}
+
 interface SliderDrag {
   slider: HTMLElement;
   track: HTMLElement;

package/src/styles.css

@@ -4499,9 +4499,11 @@ svg.sb-path {
   height: auto;
 }
 
-/* `.onHover` (pointerEffects.ts): the whole box hovers, as SwiftUI uses the
-   view's frame, so a hover box is hit in its empty space too. */
-.sb-styled[data-sb-hover] {
+/* `.onHover` and `.onContinuousHover` (pointerEffects.ts): the whole box
+   hovers, as SwiftUI uses the view's frame, so a hover box is hit in its
+   empty space too. */
+.sb-styled[data-sb-hover],
+.sb-styled[data-sb-continuous-hover] {
   pointer-events: auto;
 }
 
@@ -5602,6 +5604,29 @@ html[data-sb-platform="macos"] .sb-navsplit-panel:not([hidden]) {
   display: block;
 }
 
+/* The Mac's column divider: an invisible strip astride the sidebar panel's
+   trailing edge (the engine's `divider` rect) that drags the sidebar's width,
+   as SwiftUI's split view lets the user. Over the columns, under the toggle. */
+.sb-navsplit-divider {
+  display: none;
+}
+
+html[data-sb-platform="macos"] .sb-navsplit-divider:not([hidden]) {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+/* While a divider is dragged the whole page keeps its cursor and selects no text. */
+.sb-resizing-sidebar,
+.sb-resizing-sidebar * {
+  cursor: col-resize !important;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
 html[data-sb-platform="macos"] .sb-navsplit-columns > [data-sb-id]:first-child,
 html[data-sb-platform="macos"] .sb-navsplit-columns > [data-sb-ghost]:first-child {
   box-shadow: none;