@swiftbrowser/web 0.26.0 → 0.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.26.0",
+  "version": "0.26.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/pathShape.ts

@@ -3,7 +3,9 @@
  * `path(in:)`. The Swift side sends the path as SVG path data for the size the
  * element reported (`reportsSize`), so the element holds an `<svg>` whose
  * view box is that size, stretched to the element's box until the path for a
- * new size arrives (docs/ops-protocol.md, "Custom shapes").
+ * new size arrives (docs/ops-protocol.md, "Custom shapes"). A path for any
+ * size (`affinePath`) is drawn at the size the element is laid out at, which
+ * the renderer hands `layOutAffinePath` after each layout.
  *
  * An update whose shape's `animatableData` changed carries `frames`: the
  * paths at fractions of the change. When the commit animates the element,
@@ -12,7 +14,7 @@
  * path; otherwise the final path is drawn at once.
  */
 
-import type { Animation, ShapeProps } from './protocol';
+import type { AffinePath, Animation, ShapeProps } from './protocol';
 import { paintFor, type IdSource } from './chartDom';
 import { easedProgress } from './animation';
 
@@ -32,6 +34,9 @@ interface PathState {
   frames: PathFrames | null;
   /** The running playback's frame request. */
   request: number | null;
+  /** The props last drawn, and the size an `affinePath` was last laid out at (src/renderer.ts). */
+  props: ShapeProps | null;
+  laidOut: { width: number; height: number } | null;
 }
 
 const STATE = new WeakMap<HTMLElement, PathState>();
@@ -48,13 +53,17 @@ export function applyPathShape(el: HTMLElement, props: ShapeProps): void {
     const path = doc.createElementNS(SVG_NS, 'path');
     svg.append(doc.createElementNS(SVG_NS, 'defs'), path);
     el.replaceChildren(svg);
-    state = { svg, path, final: '', frames: null, request: null };
+    state = { svg, path, final: '', frames: null, request: null, props: null, laidOut: null };
     STATE.set(el, state);
   }
   stop(state);
+  state.props = props;
   const { svg, path } = state;
-  const width = Number(props.size?.width) || 0;
-  const height = Number(props.size?.height) || 0;
+  // A path for any size is drawn at the size the element was laid out at (none before its first layout).
+  const affine = props.affinePath ?? null;
+  const size = affine ? state.laidOut : props.size;
+  const width = Number(size?.width) || 0;
+  const height = Number(size?.height) || 0;
   if (width > 0 && height > 0) svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
   else svg.removeAttribute('viewBox');
   svg.setAttribute('preserveAspectRatio', 'none');
@@ -81,11 +90,37 @@ export function applyPathShape(el: HTMLElement, props: ShapeProps): void {
   // The stroke is not scaled with a stretched view box.
   path.setAttribute('vector-effect', 'non-scaling-stroke');
 
-  state.final = typeof props.path === 'string' ? props.path : '';
-  state.frames = validFrames(props.frames);
+  state.final = affine ? (width > 0 && height > 0 ? affinePathData(affine, width, height) : '') : typeof props.path === 'string' ? props.path : '';
+  state.frames = affine ? null : validFrames(props.frames);
   path.setAttribute('d', state.final);
 }
 
+/**
+ * Draws `el`'s `affinePath` (if it has one) at the `width` by `height` it was
+ * laid out at, when that is new: the renderer calls it after each layout.
+ */
+export function layOutAffinePath(el: HTMLElement, width: number, height: number): void {
+  const state = STATE.get(el);
+  if (!state?.props?.affinePath) return;
+  if (state.laidOut && state.laidOut.width === width && state.laidOut.height === height) return;
+  state.laidOut = { width, height };
+  applyPathShape(el, state.props);
+}
+
+/** A number in SVG path data, as `Path` (@swiftbrowser/react) writes them. */
+const NUMBER = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/g;
+
+/** `affine`'s SVG path data for a `width` by `height` rectangle, its points rounded to hundredths as `Path` rounds them. */
+export function affinePathData(affine: AffinePath, width: number, height: number): string {
+  let i = 0;
+  return affine.path.replace(NUMBER, (number) => {
+    const value = Number(number) + width * (affine.width[i] ?? 0) + height * (affine.height[i] ?? 0);
+    i += 1;
+    const rounded = Math.round(value * 100) / 100;
+    return Object.is(rounded, -0) ? '0' : String(rounded);
+  });
+}
+
 /** Whether `el` is a path shape whose last update carried frames. */
 export function hasPathFrames(el: HTMLElement): boolean {
   return STATE.get(el)?.frames != null;

package/src/protocol.ts

@@ -728,6 +728,13 @@ export interface Stroke {
   dash?: number[];
   dashPhase?: number;
 }
+/** A path for any size: `ShapeProps.affinePath`. */
+export interface AffinePath {
+  path: string;
+  width: number[];
+  height: number[];
+}
+
 /** `fill: null` means the current foreground color; fills its proposal. */
 export interface ShapeProps {
   shape: ShapeKind;
@@ -748,6 +755,14 @@ export interface ShapeProps {
    */
   path?: string;
   size?: { width: number; height: number };
+  /**
+   * A custom shape's path for any size (`path` and `size` unused): SVG path
+   * data whose numbers are their values for an empty rectangle, the `i`th
+   * growing `width[i]` a point of the element's width and `height[i]` a
+   * point of its height. Drawn at the element's laid-out size, so from its
+   * first layout, with no size reported.
+   */
+  affinePath?: AffinePath;
   /** `FillStyle(eoFill: true)`: overlapping parts of the path cancel out. */
   fillRule?: 'evenodd';
   /** The element reports its laid-out size (a custom shape draws its path for it). */
@@ -1572,7 +1587,21 @@ export type RendererEvent =
   // The page's undo and redo keys, for the app's undo manager (src/undo.ts)
   | UndoEvent
   // A registered view's own answer (src/viewRegistry.ts)
-  | RegisteredEvent;
+  | RegisteredEvent
+  // A stack's path set whole by the tree that hosts this one (@swiftbrowser/react RemoteTree)
+  | SetPathEvent;
+
+/**
+ * A `navstack`'s path set whole: the values its destinations build the
+ * screens from, as its pushed `navscreen`s report them (`route`). Sent by a
+ * host drawing this tree (`RemoteTree`), to reopen the screens a link named;
+ * never by a renderer.
+ */
+export interface SetPathEvent {
+  type: 'setpath';
+  id: ElementId;
+  path: unknown[];
+}
 
 /** What a registered view sent (`context.send(value)`), for the element's `onEvent`. */
 export interface RegisteredEvent {

package/src/renderer.ts

@@ -160,7 +160,7 @@ import {
   timeInputValue,
 } from './layout';
 import { filledSymbolName, renderSymbol } from './symbols';
-import { applyPathShape, hasPathFrames, playPathFrames } from './pathShape';
+import { applyPathShape, hasPathFrames, layOutAffinePath, playPathFrames } from './pathShape';
 import { VideoEvents, applyVideo, stopVideos } from './video';
 import { loadableURL } from './hostRequests';
 import { PinchController } from './pinch';
@@ -494,6 +494,8 @@ export class Renderer {
   private readonly reportedGeometry = new Map<ElementId, { width: number; height: number; key: string }>();
   /** The elements whose size is reported (`geometry`, or `reportsSize` props): what `collectGeometry` visits. */
   private readonly geometryReporters = new Set<ElementId>();
+  /** The custom shapes with a path for any size (`affinePath`), drawn at their size after each layout. */
+  private readonly affinePaths = new Set<ElementId>();
   /** `geometry` and `layout` events collected by layout passes, sent once the ops are applied. */
   private pendingGeometry: (GeometryEvent | LayoutEvent | ScrollGeometryEvent)[] = [];
   /** Phase 6: dedupes `layout` events per element (src/layoutEvents.ts). */
@@ -1451,6 +1453,7 @@ export class Renderer {
     this.closeMenu();
     this.reportedGeometry.clear();
     this.geometryReporters.clear();
+    this.affinePaths.clear();
     this.layoutReporter.clear();
     this.pendingGeometry = [];
     refreshSheets(this.root);
@@ -1786,6 +1789,11 @@ export class Renderer {
     }
     drawScrollTransitions();
     drawPinnedViews();
+    for (const id of this.affinePaths) {
+      const frame = result.frames.get(id);
+      const el = this.elements.get(id);
+      if (frame && el) layOutAffinePath(el, frame.width, frame.height);
+    }
     this.collectGeometry(result);
     this.collectScrollGeometry(result);
     this.collectLayouts(result);
@@ -2119,6 +2127,7 @@ export class Renderer {
     this.elements.set(id, el);
     this.nodes.set(id, { id, kind, props: asRecord(props), children: [] });
     if (kind === 'geometry' || (props as { reportsSize?: unknown }).reportsSize === true) this.geometryReporters.add(id);
+    if ((props as { affinePath?: unknown }).affinePath) this.affinePaths.add(id);
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
     this.noteVisibility(id, kind, props);
@@ -2529,6 +2538,8 @@ export class Renderer {
       } else {
         this.geometryReporters.delete(id);
       }
+      if (next['affinePath']) this.affinePaths.add(id);
+      else this.affinePaths.delete(id);
       node.props = next;
       // Phase 9: the next layout re-measures this subtree and its ancestors;
       // a screen's title also feeds the next screen's back label.
@@ -2814,6 +2825,7 @@ export class Renderer {
     this.scrollGeometry.forget(id);
     this.offsetSerials.delete(id);
     this.geometryReporters.delete(id);
+    this.affinePaths.delete(id);
     this.layoutReporter.forget(id);
     const node = this.nodes.get(id);
     const parentId = this.parents.get(id);

package/src/symbols.ts

@@ -607,6 +607,17 @@ const TRAY_FILL: IconNode = [
   ['path', { d: 'M2 13.75h5.06l2 3h5.88l2-3H22V18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z' }],
 ];
 
+/** `circle.grid.2x2`: four dots in a square, as lucide draws none. */
+const CIRCLE_GRID_2X2: IconNode = [
+  ['circle', { cx: '7', cy: '7', r: '3.5' }],
+  ['circle', { cx: '17', cy: '7', r: '3.5' }],
+  ['circle', { cx: '7', cy: '17', r: '3.5' }],
+  ['circle', { cx: '17', cy: '17', r: '3.5' }],
+];
+
+/** `trash.slash`: lucide's trash crossed out, as its `…Off` icons are. */
+const TRASH_SLASH: IconNode = [...Trash, ['path', { d: 'm2 2 20 20' }]];
+
 const outline = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'outline' });
 const knockout = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'knockout' });
 const solid = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'solid' });
@@ -1011,6 +1022,10 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'chart.line.uptrend.xyaxis': outline(TrendingUp),
   'square.grid.2x2': outline(LayoutGrid),
   'circle.grid.3x3': outline(Grid3x3),
+  'circle.grid.2x2': outline(CIRCLE_GRID_2X2),
+  'circle.grid.2x2.fill': solid(CIRCLE_GRID_2X2),
+  'app.dashed': outline(SquareDashed),
+  'trash.slash': outline(TRASH_SLASH),
   'fork.knife': outline(Utensils),
   'text.bubble': outline(MessageSquareText),
   'text.bubble.fill': knockout(MessageSquareText),