@swiftbrowser/web 0.4.0 → 0.5.0

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'
@@ -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;
@@ -835,10 +839,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 +1186,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;
@@ -1386,7 +1413,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 +1729,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);
@@ -2739,6 +2770,8 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       const placement = (props as ToolbarProps).placement;
       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 +2858,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');
 }