@swiftbrowser/web 0.26.5 → 0.26.6

package/package.json

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

@@ -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;
@@ -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

@@ -5602,6 +5602,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;