@swiftbrowser/web 0.26.4 → 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));
@@ -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,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

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

@@ -3372,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;
     }