@swiftbrowser/web 0.26.3 → 0.26.5

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));
@@ -877,6 +881,28 @@ function applyChrome(
       }
       bindScrollUnderBar(el, frame, chrome?.['topInset'], chrome?.['largeTitle']);
       bindScrollEdgeBottom(el, chrome?.['bottomInset'], extent);
+      // The Mac idiom's columns form (`data-sb-form-columns`, styles.css):
+      // 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');
+        let i = 0;
+        for (; chrome?.[`formLabel${i}`]; i++) {
+          let label = labels[i] ?? null;
+          if (!label) {
+            label = document.createElement('span');
+            label.className = 'sb-form-label';
+            content.append(label);
+          }
+          placeChrome(label, chrome[`formLabel${i}`], frame);
+          const layout = texts?.[`formLabel${i}`];
+          if (layout) setTextLayout(label, layout);
+        }
+        for (let extra = i; extra < labels.length; extra++) labels[extra]!.remove();
+      }
       return;
     }
     case 'scrollview': {
@@ -976,6 +1002,17 @@ function applyChrome(
           if (inlineTitle.style.lineHeight !== lineHeight) inlineTitle.style.lineHeight = lineHeight;
         }
       }
+      // The Mac idiom: the subtitle under the title in a unified title bar (chrome `subtitle`, hidden otherwise).
+      const subtitleEl = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-subtitle');
+      if (subtitleEl) {
+        const subtitleRect = chrome?.['subtitle'];
+        placeChrome(subtitleEl, subtitleRect, frame);
+        if (subtitleRect) {
+          if (texts?.['subtitle']) setFont(subtitleEl, texts['subtitle'].font);
+          const lineHeight = `${subtitleRect.height}px`;
+          if (subtitleEl.style.lineHeight !== lineHeight) subtitleEl.style.lineHeight = lineHeight;
+        }
+      }
       // The More button of the collapsed `secondary` items, at the trailing end.
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-more'), chrome?.['more'], frame);
       const back = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-back');
@@ -1032,6 +1069,7 @@ 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);
       setFlag(el, 'sbSidebarHidden', node.props['sidebarVisible'] === false ? '' : null);
       return;
     }

package/src/protocol.ts

@@ -623,6 +623,16 @@ export interface ScrollViewProps {
 export type ListStyle = 'plain' | 'insetGrouped' | 'grouped' | 'sidebar';
 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;
@@ -679,6 +689,8 @@ export type NavStackProps = Record<string, never>;
 export type NavDisplayMode = 'automatic' | 'large' | 'inline';
 export interface NavScreenProps {
   title: string;
+  /** `.navigationSubtitle`: a second line under the title in a Mac's unified title bar, after it in a plain one. */
+  subtitle?: string;
   displayMode: NavDisplayMode;
   /** 0 for the root screen; the renderer draws a back button when > 0. */
   depth: number;

package/src/renderer.ts

@@ -3163,6 +3163,9 @@ function createShell(kind: ElementKind): HTMLElement {
       if (chevron) back.append(chevron);
       back.append(span('sb-navbar-back-label'));
       const inlineTitle = span('sb-navbar-title');
+      // `.navigationSubtitle`: under the title in a Mac's unified title bar (chrome.subtitle).
+      const subtitle = span('sb-navbar-subtitle');
+      subtitle.hidden = true;
       // The More button of the collapsed `secondary` items (chrome.more).
       const more = document.createElement('button');
       more.type = 'button';
@@ -3172,7 +3175,7 @@ function createShell(kind: ElementKind): HTMLElement {
       more.hidden = true;
       const ellipsis = renderSymbol('ellipsis');
       if (ellipsis) more.append(ellipsis);
-      bar.append(back, inlineTitle, div('sb-navbar-trailing'), more);
+      bar.append(back, inlineTitle, subtitle, div('sb-navbar-trailing'), more);
       const body = div('sb-navscreen-body');
       const slot = div('sb-slot sb-navscreen-content');
       // The `keyboard` toolbars' bar (chrome `keyboardBar`), under their items.
@@ -3369,7 +3372,10 @@ 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;
+      el.append(panel, slot, toggle);
       SLOTS.set(el, slot);
       return el;
     }
@@ -4787,6 +4793,11 @@ function applyNavScreen(el: HTMLElement, props: NavScreenProps): void {
   const largeTitle = largeTitleOf(el);
   // A large title that scrolls away collapses into the inline one (shown
   // with `data-sb-collapsed`, src/largeTitle.ts).
+  const subtitleEl = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-subtitle');
+  if (subtitleEl) {
+    const subtitle = props.subtitle ?? '';
+    if (subtitleEl.textContent !== subtitle) subtitleEl.textContent = subtitle;
+  }
   if (inlineTitle) {
     const appearing = inlineTitle.textContent === '' && title !== '' && inlineTitle.isConnected;
     inlineTitle.textContent = title;