@swiftbrowser/web 0.5.0 → 0.5.2

package/package.json

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

@@ -270,6 +270,8 @@ const SEARCH_FIELD_DEFAULT_WIDTH = 200;
 const IMAGE_SCALES: Readonly<Record<string, number>> = { small: 0.8, medium: 1, large: 1.25 };
 // Phase 7 (docs/ops-protocol.md, "NavigationSplitView").
 const NAVSPLIT_SIDEBAR_WIDTH = 320;
+/** From this root width a window is regular (an iPad, a desktop browser), as `@swiftbrowser/react`'s size class. */
+const REGULAR_WIDTH = 700;
 /** The sidebar never takes more than this share of the split view's width. */
 const NAVSPLIT_SIDEBAR_MAX_FRACTION = 0.4;
 const NAVSPLIT_SEPARATOR_WIDTH = 1;
@@ -3085,7 +3087,11 @@ export class LayoutPass {
     // The navigation bar's groups; spacers there only separate them (the
     // groups are 8 apart anyway) and draw nothing.
     for (const spacer of parts.toolbars.filter(isSpacer)) this.hide(spacer, node);
-    const barToolbars = parts.toolbars.filter((t) => str(t.props['placement']) !== 'bottom' && !isSpacer(t));
+    const barToolbars = parts.toolbars.filter((t) => {
+      const placement = str(t.props['placement']);
+      return placement !== 'bottom' && placement !== 'secondary' && !isSpacer(t);
+    });
+    const secondaryToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'secondary' && !isSpacer(t));
     const groups: Group[] = barToolbars.map((toolbar) => {
       const itemCtx = this.childContext(toolbar, cctx);
       const sizes = toolbar.children.map((item) => this.measure(item, itemCtx, { width: null, height: null }));
@@ -3103,6 +3109,53 @@ export class LayoutPass {
     const trailingWidth = groupWidth('trailing');
     const principal = groups.some((g) => g.placement === 'principal');
 
+    // `.secondaryAction` items (placement `secondary`), as iOS treats them:
+    // collapsed into the More button (chrome `more`: an ellipsis in a glass
+    // circle at the trailing end, whose menu lists them). A screen with the
+    // editor toolbar role in a regular width shows them inline before the
+    // trailing items, as iPadOS does, clear of the title, and collapses only
+    // those that do not fit.
+    interface SecondaryItem {
+      toolbar: LayoutNode;
+      item: LayoutNode;
+      size: Size;
+      slot: number;
+    }
+    const secondaryItems: SecondaryItem[] = secondaryToolbars.flatMap((toolbar) => {
+      const itemCtx = this.childContext(toolbar, cctx);
+      return toolbar.children.map((item) => {
+        const itemSize = this.measure(item, itemCtx, { width: null, height: null });
+        return { toolbar, item, size: itemSize, slot: Math.max(NAV_GLASS_SIZE, itemSize.width + 2 * NAV_GLASS_PAD_H) };
+      });
+    });
+    // Items of one toolbar share its glass capsule; separate toolbars sit 8 apart, as the trailing groups do.
+    const secondaryGap = (previous: SecondaryItem | undefined, entry: SecondaryItem): number =>
+      previous && previous.toolbar !== entry.toolbar ? NAV_GROUP_SPACING : 0;
+    const secondaryWidth = (entries: readonly SecondaryItem[]): number =>
+      entries.reduce((sum, entry, i) => sum + secondaryGap(entries[i - 1], entry) + entry.slot, 0);
+    let inlineSecondary: SecondaryItem[] = [];
+    if (secondaryItems.length > 0 && str(node.props['toolbarRole']) === 'editor' && screen.width >= REGULAR_WIDTH) {
+      // The room between the title (centered, at its width up to 56% of the
+      // bar) and the trailing groups; the More button takes a slot of it
+      // once anything collapses.
+      const titleWidth = principal ? 0 : Math.min(this.measurer.measureWidth(title, titleFont), size.width * 0.56);
+      const roomStart = x + (size.width + titleWidth) / 2 + NAV_GROUP_SPACING;
+      const roomEnd = x + size.width - NAV_ITEM_MARGIN - trailingWidth;
+      const fitting = (room: number): SecondaryItem[] => {
+        const out: SecondaryItem[] = [];
+        let used = 0;
+        for (const entry of secondaryItems) {
+          const width = secondaryGap(out[out.length - 1], entry) + entry.slot;
+          if (used + width > room) break;
+          used += width;
+          out.push(entry);
+        }
+        return out;
+      };
+      inlineSecondary = secondaryWidth(secondaryItems) <= roomEnd - roomStart ? secondaryItems : fitting(roomEnd - roomStart - NAV_GLASS_SIZE - NAV_GROUP_SPACING);
+    }
+    const collapsedSecondary = secondaryItems.filter((entry) => !inlineSecondary.includes(entry));
+
     // Back button, iOS 26: the chevron alone in a glass circle (the previous
     // title no longer shows).
     const backLabel = '';
@@ -3115,6 +3168,11 @@ export class LayoutPass {
     const back = chrome['back'];
     let leadingCursor = back ? back.x + back.width + NAV_GROUP_SPACING : leadingStart;
     let trailingEdge = x + size.width - NAV_ITEM_MARGIN;
+    // The More button is the trailing-most item.
+    if (collapsedSecondary.length > 0) {
+      chrome['more'] = { x: trailingEdge - NAV_GLASS_SIZE, y: rowY, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE };
+      trailingEdge -= NAV_GLASS_SIZE + NAV_GROUP_SPACING;
+    }
     const placeGroup = (group: Group, startX: number, top: number, rowHeight: number, spacing: number): void => {
       const itemCtx = this.childContext(group.toolbar, cctx);
       let cursor = startX;
@@ -3150,6 +3208,29 @@ export class LayoutPass {
         }
       }
     }
+    // The inline secondary items, right-aligned before the trailing groups,
+    // each toolbar framed around its own; the collapsed ones are hidden (the
+    // renderer lists the items without a frame in the More menu).
+    if (inlineSecondary.length > 0) {
+      const total = secondaryWidth(inlineSecondary);
+      let cursor = trailingEdge - total;
+      const extents = new Map<LayoutNode, { start: number; end: number }>();
+      for (const [i, entry] of inlineSecondary.entries()) {
+        cursor += secondaryGap(inlineSecondary[i - 1], entry);
+        const itemCtx = this.childContext(entry.toolbar, cctx);
+        this.place(entry.item, itemCtx, { width: null, height: null }, cursor + (entry.slot - entry.size.width) / 2, rowY + (NAV_BAR_HEIGHT - entry.size.height) / 2);
+        const extent = extents.get(entry.toolbar);
+        extents.set(entry.toolbar, { start: extent?.start ?? cursor, end: cursor + entry.slot });
+        cursor += entry.slot;
+      }
+      for (const [toolbar, extent] of extents) this.setFrame(toolbar, extent.start, rowY, { width: extent.end - extent.start, height: NAV_BAR_HEIGHT });
+      trailingEdge -= total + NAV_GROUP_SPACING;
+    }
+    for (const toolbar of secondaryToolbars) {
+      const items = toolbar.children;
+      if (!inlineSecondary.some((entry) => entry.toolbar === toolbar)) this.hide(toolbar, node);
+      else for (const item of items) if (collapsedSecondary.some((entry) => entry.item === item)) this.hide(item, node);
+    }
     if (bottomBarHeight > 0) {
       this.placeBottomToolbars(bottomToolbars, cctx, chrome, x, y + size.height - bottomBarHeight, size.width);
     }
@@ -3179,11 +3260,21 @@ export class LayoutPass {
         leadingWidth > 0 ? leadingCursor - NAV_GROUP_SPACING - x : 0,
         cctx.barLeading ? leadingStart - NAV_GROUP_SPACING - x : 0,
       );
-      const rightUsed = trailingWidth > 0 ? x + size.width - (trailingEdge + NAV_GROUP_SPACING) : 0;
-      const side = Math.max(leftUsed, rightUsed) + 8;
-      const available = Math.max(0, size.width - 2 * side);
-      const titleWidth = Math.min(Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001), Math.floor(size.width * 0.56), Math.floor(available));
-      chrome['title'] = { x: x + (size.width - titleWidth) / 2, y: rowY, width: titleWidth, height: NAV_BAR_HEIGHT };
+      const trailingUsed = trailingWidth > 0 || chrome['more'] !== undefined || inlineSecondary.length > 0;
+      const rightUsed = trailingUsed ? x + size.width - (trailingEdge + NAV_GROUP_SPACING) : 0;
+      // As UIKit places it: centered in the bar when it fits there; else slid
+      // off-center into the room the items leave (between them, 8 clear of
+      // each side), and truncated only when it does not fit even there.
+      const roomStart = x + leftUsed + 8;
+      const roomEnd = x + size.width - rightUsed - 8;
+      const titleWidth = Math.min(
+        Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001),
+        Math.floor(size.width * 0.56),
+        Math.floor(Math.max(0, roomEnd - roomStart)),
+      );
+      const centered = x + (size.width - titleWidth) / 2;
+      const titleX = Math.max(roomStart, Math.min(centered, roomEnd - titleWidth));
+      chrome['title'] = { x: titleX, y: rowY, width: titleWidth, height: NAV_BAR_HEIGHT };
     }
     this.setChrome(node, chrome);
 

package/src/layoutDom.ts

@@ -592,6 +592,8 @@ function applyChrome(
           if (inlineTitle.style.lineHeight !== lineHeight) inlineTitle.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');
       const backLabel = back?.querySelector<HTMLElement>('.sb-navbar-back-label');
       const backRect = chrome?.['back'];

package/src/protocol.ts

@@ -860,7 +860,7 @@ export interface DecoratedProps {
 export interface MenuProps {
   deferred?: boolean;
 }
-export type ToolbarPlacement = 'trailing' | 'leading' | 'principal' | 'bottom';
+export type ToolbarPlacement = 'trailing' | 'leading' | 'principal' | 'bottom' | 'secondary';
 /**
  * `.toolbar { ToolbarItem(placement:) { ... } }`, an extra child of a
  * `navscreen` after its content. The children are the items, laid out at

package/src/renderer.ts

@@ -401,7 +401,7 @@ export class Renderer {
     // `closest` picks the innermost control, so a button inside a
     // `tapgesture` (or a menu label) handles the click alone.
     const target = (event.target as HTMLElement | null)?.closest<HTMLElement>(
-      '.sb-button, .sb-navlink, .sb-navbar-back, .sb-navsplit-toggle, .sb-switch, .sb-sheet-scrim, ' +
+      '.sb-button, .sb-navlink, .sb-navbar-back, .sb-navbar-more, .sb-navsplit-toggle, .sb-switch, .sb-sheet-scrim, ' +
         '.sb-tabbar-item, .sb-segment, .sb-picker-option, .sb-picker-menu-item, .sb-picker[data-sb-style="menu"], ' +
         '.sb-menu, .sb-tapgesture, .sb-stepper-button, .sb-alert-scrim, .sb-alert-ok, ' +
         // Phase 8: swipe action buttons, the edit-mode row control and selectable rows (the row sends `tap` itself)
@@ -510,6 +510,16 @@ export class Renderer {
       this.onEvent({ type: 'tap', id });
       return;
     }
+    if (target.classList.contains('sb-navbar-more')) {
+      // The collapsed `secondary` items, as a menu under the button.
+      const screen = target.closest<HTMLElement>('.sb-navscreen');
+      const id = Number(screen?.dataset[ID_ATTR]);
+      if (!screen || !Number.isInteger(id)) return;
+      event.preventDefault();
+      if (this.menu?.anchorId === id) this.closeMenu();
+      else this.openMenu(target, id, this.collapsedSecondaryRows(id));
+      return;
+    }
     if (target.classList.contains('sb-navbar-back')) {
       const id = Number(target.dataset['sbTarget']);
       if (!Number.isInteger(id)) return;
@@ -1252,6 +1262,21 @@ export class Renderer {
    * and navlinks become tap rows, pickers a checked section, dividers and
    * sections separators and captions, texts disabled captions.
    */
+  /**
+   * A navscreen's More menu: its `secondary` toolbar items the engine
+   * collapsed (those it gave no frame), in order.
+   */
+  private collapsedSecondaryRows(id: ElementId): MenuRow[] {
+    const screen = this.nodes.get(id);
+    if (!screen) return [];
+    const frames = this.layoutResult?.frames;
+    const items = screen.children
+      .filter((child) => child.kind === 'toolbar' && child.props['placement'] === 'secondary')
+      .flatMap((toolbar) => toolbar.children)
+      .filter((item) => !frames?.has(item.id));
+    return collectMenuRows(items);
+  }
+
   private menuRows(id: ElementId): MenuRow[] {
     const node = this.nodes.get(id);
     return node ? collectMenuRows(node.children.slice(1)) : [];
@@ -2013,7 +2038,16 @@ function createShell(kind: ElementKind): HTMLElement {
       if (chevron) back.append(chevron);
       back.append(span('sb-navbar-back-label'));
       const inlineTitle = span('sb-navbar-title');
-      bar.append(back, inlineTitle, div('sb-navbar-trailing'));
+      // The More button of the collapsed `secondary` items (chrome.more).
+      const more = document.createElement('button');
+      more.type = 'button';
+      more.className = 'sb-navbar-more';
+      more.setAttribute('aria-label', 'More');
+      more.setAttribute('aria-haspopup', 'menu');
+      more.hidden = true;
+      const ellipsis = renderSymbol('ellipsis');
+      if (ellipsis) more.append(ellipsis);
+      bar.append(back, inlineTitle, div('sb-navbar-trailing'), more);
       const body = div('sb-navscreen-body');
       const slot = div('sb-slot sb-navscreen-content');
       body.append(div('sb-navbar-large-title'), slot);
@@ -2768,6 +2802,7 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
     }
     case 'toolbar': {
       const placement = (props as ToolbarProps).placement;
+      // `secondary` items shown in the bar look like the trailing ones (glass capsules).
       el.dataset['sbPlacement'] =
         placement === 'leading' || placement === 'principal' || placement === 'bottom' ? placement : 'trailing';
       // A `ToolbarSpacer`: draws nothing.

package/src/styles.css

@@ -1001,6 +1001,41 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: none;
 }
 
+/* The More button of the collapsed `.secondaryAction` items: the ellipsis
+   in a 44pt glass circle at the engine's `more` rect (iOS 26). */
+.sb-navbar-more {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 22px;
+  background: var(--sb-glass-background);
+  box-shadow: var(--sb-glass-shadow);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  color: var(--sb-color-primary);
+  font-size: var(--sb-font-size-body);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sb-navbar-more[hidden] {
+  display: none;
+}
+
+.sb-navbar-more:active {
+  opacity: 0.3;
+}
+
+.sb-navbar-more > svg {
+  width: 1.2em;
+  height: 1.2em;
+}
+
 .sb-navbar-back:active {
   opacity: 0.3;
 }
@@ -2097,6 +2132,13 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: block;
 }
 
+/* A toolbar the engine hid (a spacer, `secondary` items collapsed into the
+   More menu), and its items collapsed one by one, draw nothing. */
+.sb-toolbar[hidden],
+.sb-toolbar > [data-sb-id][hidden] {
+  display: none;
+}
+
 /* iOS 26: a bar's leading and trailing items share a glass capsule (the
    engine sizes the group: 44 tall, each item in a slot at least 44 wide),
    drawn in the label color unless tinted. */