@swiftbrowser/web 0.4.0 → 0.5.1

package/src/page.css

@@ -0,0 +1,234 @@
+/* ---------------------------------------------------------------------------
+   The device page (app/index.html): the page around the iPhone frame, with
+   its toolbar, its stage and its error banner. Not the renderer's: a page
+   that draws an island (@swiftbrowser/react's `SwiftUIView`) imports
+   styles.css alone and keeps its own layout.
+   ------------------------------------------------------------------------- */
+
+:root {
+  --page-bg: #e9e9ee;
+  --page-fg: #1c1c1e;
+  --page-muted: #6e6e73;
+  --page-border: rgba(0, 0, 0, 0.08);
+  --page-surface: rgba(255, 255, 255, 0.8);
+  --page-error-bg: #ffe5e5;
+  --page-error-fg: #a1000d;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --page-bg: #111114;
+    --page-fg: #f2f2f7;
+    --page-muted: #98989f;
+    --page-border: rgba(255, 255, 255, 0.1);
+    --page-surface: rgba(28, 28, 30, 0.85);
+    --page-error-bg: #3a0b10;
+    --page-error-fg: #ff8a8a;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--page-bg);
+  color: var(--page-fg);
+  font-family: var(--sb-font-family);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  background: var(--page-surface);
+  border-bottom: 1px solid var(--page-border);
+  backdrop-filter: blur(16px);
+}
+
+.toolbar-brand {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.toolbar-sep {
+  width: 1px;
+  height: 18px;
+  background: var(--page-border);
+}
+
+.toolbar-label {
+  color: var(--page-muted);
+}
+
+.toolbar-value {
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--page-border);
+}
+
+.toolbar-spacer {
+  flex: 1 1 0;
+}
+
+/* Hot-reload indicator, driven by the dev server's sb:build-* events (the
+   `sb-spin` keyframes are styles.css's, loaded with this file). */
+.toolbar-build {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--page-muted);
+}
+
+.toolbar-build[hidden] {
+  display: none;
+}
+
+.toolbar-build::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  animation: sb-spin 0.9s linear infinite;
+}
+
+.toolbar-build[data-state="error"] {
+  color: var(--page-error-fg);
+}
+
+.toolbar-build[data-state="error"]::before {
+  animation: none;
+  border-color: currentColor;
+}
+
+.toolbar-button {
+  font: inherit;
+  padding: 6px 12px;
+  border: 1px solid var(--page-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--page-fg);
+  cursor: pointer;
+}
+
+.toolbar-button:hover {
+  background: var(--page-border);
+}
+
+.toolbar-button[aria-pressed="true"] {
+  background: var(--page-fg);
+  color: var(--page-bg);
+  border-color: transparent;
+}
+
+.toolbar-select {
+  font: inherit;
+  padding: 5px 8px;
+  border: 1px solid var(--page-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--page-fg);
+  cursor: pointer;
+}
+
+.stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 32px 16px 48px;
+}
+
+.status {
+  max-width: 560px;
+  margin: 0;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: var(--page-error-bg);
+  color: var(--page-error-fg);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ---------------------------------------------------------------------------
+   Device mode (html[data-sb-mode="device"], see src/deviceMode.ts): no
+   toolbar, no stage padding, the page behind the app in the OS appearance's
+   system background from the first paint (Safari tints its status bar strip
+   from it; chromeColor.ts then keeps it at the color the app draws at its
+   top edge), and the error banner floating clear of the home indicator.
+   ------------------------------------------------------------------------- */
+
+html[data-sb-mode="device"] {
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+  /* No double-tap zoom, no text inflation in landscape. */
+  touch-action: manipulation;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+html[data-sb-mode="device"] body {
+  min-height: 100dvh;
+  overflow: hidden;
+  overscroll-behavior: none;
+  touch-action: manipulation;
+}
+
+/* The page behind the app is the OS appearance's system background from the
+   first paint (Safari tints its status bar strip from it); chromeColor.ts
+   then keeps it at the color the app draws at its top edge. */
+html[data-sb-mode="device"],
+html[data-sb-mode="device"] body {
+  background: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  html[data-sb-mode="device"],
+  html[data-sb-mode="device"] body {
+    background: #000000;
+  }
+}
+
+html[data-sb-mode="device"] .toolbar {
+  display: none;
+}
+
+html[data-sb-mode="device"] .stage {
+  padding: 0;
+  gap: 0;
+}
+
+/* The error banner floats over the app, clear of the home indicator. */
+html[data-sb-mode="device"] .status {
+  position: fixed;
+  left: 16px;
+  right: 16px;
+  bottom: calc(16px + var(--sb-inset-bottom));
+  z-index: 10;
+  max-width: none;
+  max-height: 40dvh;
+  overflow: auto;
+}

package/src/protocol.ts

@@ -803,6 +803,16 @@ export interface LazyVGridProps {
   spacing: number | null;
   alignment: FrameAlignment;
 }
+/**
+ * `LazyHGrid`: `LazyVGrid` turned on its side. The `rows` share the height
+ * the grid is proposed; the cells fill them column by column, `spacing`
+ * (default 8) apart. Children are the cells (flattened). Nothing is lazy.
+ */
+export interface LazyHGridProps {
+  rows: GridItem[];
+  spacing: number | null;
+  alignment: FrameAlignment;
+}
 export type GaugeStyle =
   | 'automatic'
   | 'linearCapacity'
@@ -850,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
@@ -859,6 +869,12 @@ export type ToolbarPlacement = 'trailing' | 'leading' | 'principal' | 'bottom';
  */
 export interface ToolbarProps {
   placement: ToolbarPlacement;
+  /**
+   * A `ToolbarSpacer` (no children): it separates glass groups, and in a
+   * bottom bar flexible ones share the room left over and push the groups
+   * apart; fixed ones are 8 wide.
+   */
+  spacer?: 'flexible' | 'fixed';
 }
 /**
  * `.searchable(text:)`, an extra child of a `navscreen`: a 36pt rounded
@@ -920,6 +936,7 @@ export interface ElementPropsByKind {
   grid: GridProps;
   gridrow: GridRowProps;
   lazyvgrid: LazyVGridProps;
+  lazyhgrid: LazyHGridProps;
   gauge: GaugeProps;
   decorated: DecoratedProps;
   menu: MenuProps;
@@ -1316,6 +1333,11 @@ export interface GeometryEvent {
   y?: number;
   /** With `reportsFrame`: how far the device's safe area reaches into the box on each edge. */
   safeArea?: { top: number; leading: number; bottom: number; trailing: number };
+  /**
+   * With `reportsFrame`, inside a scroll view or list: its visible rectangle
+   * in the root's coordinates (whole px) and the axis it scrolls along.
+   */
+  scrollView?: { x: number; y: number; width: number; height: number; axis: 'horizontal' | 'vertical' };
 }
 
 /** Host measurements of one subview of a `layout` element (points, 2 decimals; `"infinity"` for an unbounded axis). */
@@ -2161,6 +2183,15 @@ export interface Style {
   contentTransition?: { kind: 'numericText' | 'opacity' | 'interpolate'; countsDown?: boolean };
 }
 
+export interface Style {
+  /**
+   * `.containerRelativeFrame(_:…)`: on the marked axes the box is
+   * `a × container + b` long, the container being the nearest scroll view's
+   * visible area (or the screen), and its content is aligned in that frame.
+   */
+  containerRelativeFrame?: { horizontal?: boolean; vertical?: boolean; a: number; b: number; alignment: FrameAlignment };
+}
+
 /**
  * A mouse (or pen) entered (`value: true`) or left a box whose style has
  * `hover`. Touch never hovers.

package/src/renderer.ts

@@ -86,6 +86,7 @@ import {
   type HStackProps,
   type LayoutEvent,
   type LazyVGridProps,
+  type LazyHGridProps,
   type ImageProps,
   type InspectorProps,
   type ListProps,
@@ -223,6 +224,7 @@ const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
   'grid',
   'gridrow',
   'lazyvgrid',
+  'lazyhgrid',
   'gauge',
   'decorated',
   'menu',
@@ -335,6 +337,8 @@ export class Renderer {
   /** A frame check of the `reportsFrame` readers is queued for the next animation frame (after a scroll). */
   private frameCheckQueued = false;
   private readonly hostContents = new Map<ElementId, HTMLElement>();
+  /** The `host` elements, adopted or still waiting for their content. */
+  private readonly hosts = new Set<ElementId>();
   private readonly hostSizes = new WeakMap<HTMLElement, { width: number; height: number }>();
   private readonly hostMeasures = new Map<string, { width: number; height: number }>();
   private readonly stopHostChanges: () => void;
@@ -397,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)
@@ -506,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;
@@ -835,10 +849,19 @@ export class Renderer {
 
   /**
    * A `host` element's content changed (the page said so, or it resized):
-   * the hosts are measured again and the tree laid out.
+   * the hosts are measured again and the tree laid out. A host whose content
+   * was not registered when its element was created (a page that registers
+   * from an effect, after its commit) adopts it now.
    */
   private hostContentChanged(): void {
-    if (this.commits === 0 || this.hostContents.size === 0) return;
+    if (this.commits === 0) return;
+    for (const id of this.hosts) {
+      if (this.hostContents.has(id)) continue;
+      const el = this.elements.get(id);
+      const node = this.nodes.get(id);
+      if (el && node) this.adoptHostContent(id, el, node.props as unknown as HostProps);
+    }
+    if (this.hostContents.size === 0) return;
     for (const id of this.hostContents.keys()) {
       const node = this.nodes.get(id);
       if (node) this.engine?.invalidate(node);
@@ -1173,6 +1196,20 @@ export class Renderer {
         event.y = y;
         event.safeArea = safeAreaOverlap({ x, y, width, height }, env.screen, env.safeArea);
         key += `@${x},${y}/${event.safeArea.top},${event.safeArea.leading},${event.safeArea.bottom},${event.safeArea.trailing}`;
+        // The visible rectangle of the scroll view (or list) the reader is in.
+        const scroller = el?.parentElement?.closest<HTMLElement>('.sb-scrollview, .sb-list');
+        if (scroller) {
+          const view = scroller.getBoundingClientRect();
+          event.scrollView = {
+            x: Math.round(view.left - rootRect.left),
+            y: Math.round(view.top - rootRect.top),
+            width: Math.round(view.width),
+            height: Math.round(view.height),
+            axis: scroller.dataset['sbAxes'] === 'horizontal' ? 'horizontal' : 'vertical',
+          };
+          const v = event.scrollView;
+          key += `/${v.x},${v.y},${v.width},${v.height},${v.axis}`;
+        }
       }
       const last = this.reportedGeometry.get(id);
       if (last && last.key === key) continue;
@@ -1225,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)) : [];
@@ -1386,7 +1438,10 @@ export class Renderer {
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
     if (kind === 'lazyspacer') this.lazySpacers.add(id);
-    if (kind === 'host') this.adoptHostContent(id, el, props as HostProps);
+    if (kind === 'host') {
+      this.hosts.add(id);
+      this.adoptHostContent(id, el, props as HostProps);
+    }
   }
 
   /** A `host` element takes the page's content element (src/hostContent.ts) and watches its size. */
@@ -1699,6 +1754,7 @@ export class Renderer {
       this.hostObserver?.unobserve(content);
       this.hostContents.delete(id);
     }
+    this.hosts.delete(id);
     this.elements.delete(id);
     this.boxes.delete(id);
     this.dirty.delete(id);
@@ -1982,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);
@@ -2737,8 +2802,11 @@ 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.
+      el.toggleAttribute('data-sb-spacer', typeof (props as ToolbarProps).spacer === 'string');
       break;
     }
     case 'searchfield':
@@ -2825,6 +2893,12 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       el.dataset['sbColumns'] = String(Array.isArray(grid.columns) ? grid.columns.length : 0);
       break;
     }
+    case 'lazyhgrid': {
+      const grid = props as LazyHGridProps;
+      el.dataset['sbAlignment'] = grid.alignment ?? 'center';
+      el.dataset['sbRows'] = String(Array.isArray(grid.rows) ? grid.rows.length : 0);
+      break;
+    }
     case 'gauge':
       applyGauge(el, props as GaugeProps);
       break;

package/src/scrollEdge.ts

@@ -4,8 +4,10 @@
  * has its content inset by the bar (the engine's `bottomInset` chrome rect,
  * layout/engine.ts). While content is under the bar (more of it below) its
  * screen, or the tab it fills, shows the effect over it, behind the bar:
- * `data-sb-scrolled-bottom` with `--sb-bottom-edge` the bar's height
- * (styles.css). The top edge's effect is the bar's own (largeTitle.ts).
+ * `data-sb-scrolled-bottom` with `--sb-bottom-edge` the bar's height and
+ * `--sb-edge-bottom` its strength, which ramps down over the last
+ * `EDGE_RAMP` px of content (styles.css). The top edge's effect is the
+ * bar's own (largeTitle.ts).
  *
  * `.scrollEdgeEffectStyle(_:for:)` / `.scrollEdgeEffectHidden(_:for:)` reach
  * the scroll view as `edgeEffect` props, which become `data-sb-edge-top` /
@@ -16,6 +18,24 @@
 import type { EdgeEffectProps } from './protocol';
 import type { Rect } from './layout';
 
+/**
+ * How far content has to be under a bar for its edge effect to be at full
+ * strength: the effect ramps up over this scroll distance (and back down as
+ * the end comes clear of a bottom bar) rather than switching on, which stood
+ * out over content that is not the background color (a photo).
+ */
+export const EDGE_RAMP = 40;
+
+/** The strength (0…1) of an edge effect over `distance` px of content under its bar, as a CSS value. */
+export function edgeStrength(distance: number): string {
+  return String(Math.round(Math.min(1, Math.max(0, distance / EDGE_RAMP)) * 1000) / 1000);
+}
+
+/** Sets a CSS custom property, untouched when unchanged. */
+export function setProperty(el: HTMLElement, name: string, value: string): void {
+  if (el.style.getPropertyValue(name) !== value) el.style.setProperty(name, value);
+}
+
 const bound = new WeakSet<HTMLElement>();
 /** The scroll view whose state each screen's (or tab's) bottom effect shows. */
 const claimedBy = new WeakMap<HTMLElement, HTMLElement>();
@@ -63,8 +83,9 @@ export function syncScrollEdgeBottom(scroller: HTMLElement): void {
   claimedBy.set(owner, scroller);
   // Content is under the bar until the end has scrolled clear of it (the
   // inset is room past the content's end).
-  const under = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop > 1;
-  setValue(owner, 'sbScrolledBottom', under ? '' : null);
+  const remaining = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+  setValue(owner, 'sbScrolledBottom', remaining > 1 ? '' : null);
+  setProperty(owner, '--sb-edge-bottom', edgeStrength(remaining));
   setValue(owner, 'sbEdgeBottom', scroller.dataset['sbEdgeBottom'] ?? null);
   const height = scroller.style.getPropertyValue('--sb-bottom-edge');
   if (owner.style.getPropertyValue('--sb-bottom-edge') !== height) owner.style.setProperty('--sb-bottom-edge', height);
@@ -73,6 +94,7 @@ export function syncScrollEdgeBottom(scroller: HTMLElement): void {
 function release(owner: HTMLElement): void {
   claimedBy.delete(owner);
   setValue(owner, 'sbScrolledBottom', null);
+  owner.style.removeProperty('--sb-edge-bottom');
   setValue(owner, 'sbEdgeBottom', null);
   owner.style.removeProperty('--sb-bottom-edge');
 }