@swiftbrowser/web 0.26.4 → 0.26.6

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

@@ -161,7 +161,7 @@ function applyFrames(ctx: LayoutDomContext, result: LayoutResult, changes: BoxCh
     applyChrome(result, node, el, box, frame, scrollBottomInset(ctx, result, node, frame), previous === null, changes);
     if (node.kind === 'tab') setTabHidden(el, result.hidden.has(id));
     // A `sidebar` list draws as one (no cards or hairlines) in a regular width; in a compact one it looks like `insetGrouped`.
-    if (node.kind === 'list') setFlag(el, 'sbListLook', node.props['style'] === 'sidebar' && isRegularWidth(ctx.env.screen) ? 'sidebar' : null);
+    if (node.kind === 'list') setFlag(el, 'sbListLook', (node.props['style'] === 'sidebar' || result.chrome.get(id)?.['sidebarLook']) && isRegularWidth(ctx.env.screen) ? 'sidebar' : null);
     // A child the engine did not touch kept its screen frame, but if this
     // element's box moved, the child's `left`/`top` (relative to it) did
     // not: the plus button at the bottom of a chat's composer stays put on
@@ -343,6 +343,8 @@ function placeEditControl(node: HTMLElement | null, rect: Rect | undefined, orig
  * goes, scales and fades as the items do (`TOOLBAR_TRANSITION`), in the
  * toolbar's own spring.
  */
+const BAR_PLACEMENTS = new Set(['leading', 'trailing', 'bottom']);
+
 function syncBarGlass(
   result: LayoutResult,
   node: LayoutNode,
@@ -354,7 +356,9 @@ function syncBarGlass(
 ): void {
   for (const placement of ['leading', 'trailing', 'bottom'] as const) {
     const unmatched = new Set(screen.querySelectorAll<HTMLElement>(`:scope > .sb-bar-glass[data-sb-placement="${placement}"]:not([data-sb-exiting])`));
-    const toolbars = node.children.filter((child) => child.kind === 'toolbar' && child.props['placement'] === placement);
+    // A capsule's toolbars are those whose frames lie in it, of any bar
+    // placement: on a Mac a bottom toolbar's items are on the trailing capsules.
+    const toolbars = node.children.filter((child) => child.kind === 'toolbar' && BAR_PLACEMENTS.has(String(child.props['placement'])));
     for (let count = 0, rect = chrome?.[`${placement}Glass0`]; rect; rect = chrome?.[`${placement}Glass${++count}`]) {
       const capsule = rect;
       const ids = toolbars.filter((toolbar) => centeredIn(result.frames.get(toolbar.id), capsule)).map((toolbar) => String(toolbar.id));
@@ -881,6 +885,7 @@ function applyChrome(
       // the label column's texts (chrome `formLabel<i>`) as spans in the
       // content, as many as the engine placed.
       setFlag(el, 'sbFormColumns', chrome?.['columns'] ? '' : null);
+      setFlag(el, 'sbFormGrouped', chrome?.['grouped'] ? '' : null);
       if (content) {
         const texts = result.chromeText.get(node.id);
         const labels = content.querySelectorAll<HTMLElement>(':scope > .sb-form-label');
@@ -1064,6 +1069,12 @@ function applyChrome(
     case 'navsplit': {
       // 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/protocol.ts

@@ -625,6 +625,14 @@ export interface ListProps {
   style?: ListStyle;
   /** A `Form`: on a Mac the page lays its rows out in the columns style (labels in a column before their controls). */
   form?: boolean;
+  /** `.formStyle(_:)` other than `automatic`: on a Mac `grouped` lays the form out in grouped sections. */
+  formStyle?: 'grouped' | 'columns';
+  /**
+   * `.environment(\.defaultMinListRowHeight, _)`: the rows are at least
+   * this tall (points). Absent, the platform's default: 44 on iOS, 24 on a
+   * Mac. A Mac app spaces a content list's rows like a sidebar's, 32.
+   */
+  minRowHeight?: number;
 }
 export interface SectionProps {
   header: string | null;

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();
   }
 
@@ -3372,7 +3434,14 @@ function createShell(kind: ElementKind): HTMLElement {
       toggle.setAttribute('aria-label', 'Toggle Sidebar');
       const symbol = renderSymbol('sidebar.left');
       if (symbol) toggle.append(symbol);
-      el.append(slot, toggle);
+      // The Mac's floating sidebar panel, under the columns (the engine's `panel` rect).
+      const panel = div('sb-navsplit-panel');
+      panel.hidden = true;
+      // 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;
     }
@@ -3855,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;