@swiftbrowser/web 0.1.0 → 0.3.0

package/src/layout/index.ts

@@ -61,6 +61,8 @@ export type {
   Size,
   TextAlignment,
   TextLayout,
+  TextFragment,
+  RichTextLayout,
   TextMeasurer,
 } from './types';
 export { layoutTree, LayoutPass, type Context as LayoutContext } from './engine';
@@ -88,4 +90,4 @@ export {
   snapSliderValue,
   timeInputValue,
 } from './controls';
-export { wrapText, ELLIPSIS, type WrappedText } from './text';
+export { wrapText, wrapRuns, ELLIPSIS, type WrappedText, type WrappedRuns, type TextRunInput } from './text';

package/src/layout/text.ts

@@ -2,7 +2,7 @@
  * Greedy word wrapping with character fallback and `lineLimit` truncation.
  */
 
-import type { ResolvedFont, TextMeasurer } from './types';
+import type { ResolvedFont, Size, TextFragment, TextMeasurer } from './types';
 
 export const ELLIPSIS = '…';
 /**
@@ -122,3 +122,219 @@ function truncateLine(
   }
   return chars.join('') + ELLIPSIS;
 }
+
+// ---------------------------------------------------------------------------
+// Rich text: runs
+// ---------------------------------------------------------------------------
+
+/** A run of rich text as the wrapper reads it: its text or image, and its font. */
+export interface TextRunInput {
+  text?: string;
+  /** An inline image's size (the run has no text). */
+  image?: Size;
+  font: ResolvedFont;
+  /** Extra space after every character, in px. */
+  kerning: number;
+}
+
+export interface WrappedRuns {
+  lines: TextFragment[][];
+  /** Each line's height: its tallest font's line height or image. */
+  heights: number[];
+  /** Width of the widest line. */
+  width: number;
+  truncated: boolean;
+}
+
+type Piece = TextFragment;
+type Token = { kind: 'word'; pieces: Piece[] } | { kind: 'space'; piece: Piece } | { kind: 'break' };
+
+/**
+ * `wrapText` for runs of differently styled text and inline images: lines
+ * break at spaces (and around images), a word may span runs, a word wider
+ * than the line breaks by characters, and `lineLimit` truncates the last
+ * kept line with an ellipsis in its last run's font. `base` sets the height
+ * of an empty line.
+ */
+export function wrapRuns(
+  runs: TextRunInput[],
+  base: ResolvedFont,
+  maxWidth: number | null,
+  lineLimit: number | null,
+  measurer: TextMeasurer,
+): WrappedRuns {
+  const measure = (run: number, text: string): number => {
+    if (text.length === 0) return 0;
+    const input = runs[run] as TextRunInput;
+    return measurer.measureWidth(text, input.font) + input.kerning * Array.from(text).length;
+  };
+  const constrained = maxWidth !== null && Number.isFinite(maxWidth);
+  const limit = constrained ? maxWidth + EPSILON : Infinity;
+
+  // Tokens: words (which may span runs), spaces and hard breaks.
+  const tokens: Token[] = [];
+  let word: Piece[] | null = null;
+  runs.forEach((input, run) => {
+    if (input.image) {
+      word = null;
+      tokens.push({ kind: 'word', pieces: [{ run, width: input.image.width, height: input.image.height }] });
+      return;
+    }
+    for (const part of (input.text ?? '').split(/(\n| +)/)) {
+      if (part.length === 0) continue;
+      if (part === '\n') {
+        word = null;
+        tokens.push({ kind: 'break' });
+      } else if (part.startsWith(' ')) {
+        word = null;
+        tokens.push({ kind: 'space', piece: { run, text: part, width: measure(run, part) } });
+      } else {
+        const piece = { run, text: part, width: measure(run, part) };
+        if (word) word.push(piece);
+        else {
+          word = [piece];
+          tokens.push({ kind: 'word', pieces: word });
+        }
+      }
+    }
+  });
+
+  let lines: Piece[][] = [];
+  let current: Piece[] = [];
+  let width = 0;
+  let spaces: Piece[] = [];
+  const sum = (pieces: Piece[]): number => pieces.reduce((total, piece) => total + piece.width, 0);
+  const endLine = (): void => {
+    lines.push(current);
+    current = [];
+    width = 0;
+    spaces = [];
+  };
+  for (const token of tokens) {
+    if (token.kind === 'break') {
+      endLine();
+      continue;
+    }
+    if (token.kind === 'space') {
+      if (current.length > 0) spaces.push(token.piece);
+      continue;
+    }
+    const wordWidth = sum(token.pieces);
+    const spaceWidth = sum(spaces);
+    if (current.length === 0 ? wordWidth <= limit : width + spaceWidth + wordWidth <= limit) {
+      current.push(...spaces, ...token.pieces);
+      width += spaceWidth + wordWidth;
+      spaces = [];
+      continue;
+    }
+    if (current.length > 0) endLine();
+    spaces = [];
+    if (wordWidth <= limit) {
+      current = [...token.pieces];
+      width = wordWidth;
+      continue;
+    }
+    // The word alone is wider than the line: break it by characters.
+    for (const piece of token.pieces) {
+      const units = piece.text === undefined ? [piece] : Array.from(piece.text).map((ch) => ({ run: piece.run, text: ch, width: measure(piece.run, ch) }));
+      for (const unit of units) {
+        if (current.length > 0 && width + unit.width > limit) endLine();
+        current.push(unit);
+        width += unit.width;
+      }
+    }
+  }
+  lines.push(current);
+
+  let truncated = false;
+  if (lineLimit !== null && lineLimit >= 1 && lines.length > lineLimit) {
+    const kept = lines.slice(0, lineLimit - 1);
+    const rest: Piece[] = [];
+    for (const line of lines.slice(lineLimit - 1)) {
+      if (line.length === 0) continue;
+      const first = line[0] as Piece;
+      if (rest.length > 0) rest.push({ run: first.run, text: ' ', width: measure(first.run, ' ') });
+      rest.push(...line);
+    }
+    kept.push(truncatePieces(rest, constrained ? maxWidth : null, measure, runs.length));
+    lines = kept;
+    truncated = true;
+  }
+
+  const merged = lines.map(mergePieces);
+  const heights = merged.map((line) => {
+    if (line.length === 0) return base.lineHeight;
+    let height = 0;
+    for (const piece of line) {
+      const font = (runs[piece.run] as TextRunInput).font;
+      height = Math.max(height, piece.height ?? font.lineHeight, font.lineHeight);
+    }
+    return height;
+  });
+  let widest = 0;
+  for (const line of merged) widest = Math.max(widest, sum(line));
+  return { lines: merged, heights, width: widest, truncated };
+}
+
+/** The pieces cut to fit `maxWidth` with an ellipsis (in the last run's font) after them. */
+function truncatePieces(
+  pieces: Piece[],
+  maxWidth: number | null,
+  measure: (run: number, text: string) => number,
+  runCount: number,
+): Piece[] {
+  const out = pieces.map((piece) => ({ ...piece }));
+  const lastRun = (): number => (out.length > 0 ? (out[out.length - 1] as Piece).run : Math.max(0, runCount - 1));
+  const ellipsis = (): number => measure(lastRun(), ELLIPSIS);
+  const total = (): number => out.reduce((sum, piece) => sum + piece.width, 0);
+  const trimEnd = (): void => {
+    for (;;) {
+      const last = out[out.length - 1];
+      if (!last) return;
+      if (last.text !== undefined && last.text.length === 0) {
+        out.pop();
+        continue;
+      }
+      if (last.text === undefined || !last.text.endsWith(' ')) return;
+      last.text = last.text.replace(/ +$/, '');
+      last.width = measure(last.run, last.text);
+    }
+  };
+  if (maxWidth !== null) {
+    while (out.length > 0 && total() + ellipsis() > maxWidth + EPSILON) {
+      const last = out[out.length - 1] as Piece;
+      if (last.text === undefined || last.text.length <= 1) out.pop();
+      else {
+        const chars = Array.from(last.text);
+        chars.pop();
+        last.text = chars.join('');
+        last.width = measure(last.run, last.text);
+      }
+      trimEnd();
+    }
+  }
+  const run = lastRun();
+  const last = out[out.length - 1];
+  if (last && last.text !== undefined) {
+    last.text += ELLIPSIS;
+    last.width = measure(last.run, last.text);
+  } else {
+    out.push({ run, text: ELLIPSIS, width: measure(run, ELLIPSIS) });
+  }
+  return out;
+}
+
+/** Adjacent text pieces of the same run as one fragment. */
+function mergePieces(line: Piece[]): Piece[] {
+  const out: Piece[] = [];
+  for (const piece of line) {
+    const last = out[out.length - 1];
+    if (last && last.run === piece.run && last.text !== undefined && piece.text !== undefined) {
+      last.text += piece.text;
+      last.width += piece.width;
+    } else {
+      out.push({ ...piece });
+    }
+  }
+  return out;
+}

package/src/layout/types.ts

@@ -66,6 +66,14 @@ export interface ResolvedFont {
   lineHeight: number;
   /** A CSS `font` shorthand (`weight size/lineHeight family`) usable verbatim. */
   css: string;
+  /**
+   * A weight or design set by a view modifier (`.fontWeight`, `.bold()`,
+   * `.fontDesign`): SwiftUI applies it to whatever font the text inside ends
+   * up with, so a `.font(...)` set further in keeps it unless that font
+   * names its own (typography.ts, `resolveFont`).
+   */
+  weightModifier?: number;
+  familyModifier?: FontFamily;
 }
 
 export interface TextMeasurer {
@@ -96,6 +104,29 @@ export interface TextLayout {
   alignment: TextAlignment;
   /** True when `lineLimit` cut text off (the last line ends with an ellipsis). */
   truncated: boolean;
+  /**
+   * Rich text (a `text` with `runs`): each line as fragments of the runs, the
+   * height of each line, and each run's font. `lines` then holds the same
+   * lines as plain strings (an inline image as U+FFFC).
+   */
+  rich?: RichTextLayout;
+}
+
+/** One piece of a line of rich text: some of a run's text, or its image. */
+export interface TextFragment {
+  /** Index into the text's `runs`. */
+  run: number;
+  /** The text drawn; absent for an image run. */
+  text?: string;
+  width: number;
+  /** An image run's height (its width is `width`). */
+  height?: number;
+}
+
+export interface RichTextLayout {
+  lines: TextFragment[][];
+  heights: number[];
+  fonts: ResolvedFont[];
 }
 
 export interface LayoutResult {

package/src/layout/typography.ts

@@ -131,10 +131,18 @@ function formatPx(value: number): string {
   return `${Math.round(value * 100) / 100}px`;
 }
 
-export function makeFont(family: FontFamily, size: number, weight: number): ResolvedFont {
+export function makeFont(
+  family: FontFamily,
+  size: number,
+  weight: number,
+  modifiers: { weightModifier?: number | undefined; familyModifier?: FontFamily | undefined } = {},
+): ResolvedFont {
   const lineHeight = lineHeightFor(size);
   const css = `${weight} ${formatPx(size)}/${lineHeight}px ${FONT_FAMILIES[family]}`;
-  return { family, size, weight, lineHeight, css };
+  const font: ResolvedFont = { family, size, weight, lineHeight, css };
+  if (modifiers.weightModifier !== undefined) font.weightModifier = modifiers.weightModifier;
+  if (modifiers.familyModifier !== undefined) font.familyModifier = modifiers.familyModifier;
+  return font;
 }
 
 /** Body text for the current `dynamicTypeSize` (17/22 at Large). */
@@ -146,7 +154,11 @@ export function defaultFont(env: LayoutEnvironment): ResolvedFont {
  * Apply a Font JSON object (`textStyle` | `size`, `weight`, `design`,
  * `relativeTo`) to an inherited font. A `textStyle` or `size` defines a new
  * font (weight defaults to regular, or semibold for `headline`; design to the
- * system family); without either, only the given `weight`/`design` change.
+ * system family); without either, only the given `weight`/`design` change,
+ * as a view modifier (`.fontWeight(.semibold)`, `.bold()`, `.fontDesign`)
+ * that also applies to a new font set further in which names no weight or
+ * design of its own: `.font(.system(size: 15)).fontWeight(.semibold)` is a
+ * semibold 15.
  */
 export function resolveFont(
   fontProps: unknown,
@@ -181,8 +193,13 @@ export function resolveFont(
     size = inherited.size;
   }
 
-  const weight = explicitWeight ?? (isNewFont ? defaultWeight : inherited.weight);
-  const family = explicitFamily ?? (isNewFont ? 'system' : inherited.family);
-  if (!isNewFont && weight === inherited.weight && family === inherited.family) return inherited;
-  return makeFont(family, size, weight);
+  const weight = explicitWeight ?? (isNewFont ? (inherited.weightModifier ?? defaultWeight) : inherited.weight);
+  const family = explicitFamily ?? (isNewFont ? (inherited.familyModifier ?? 'system') : inherited.family);
+  // A weight or design without a new font is a modifier the text further in keeps.
+  const weightModifier = !isNewFont && explicitWeight !== undefined ? explicitWeight : inherited.weightModifier;
+  const familyModifier = !isNewFont && explicitFamily !== undefined ? explicitFamily : inherited.familyModifier;
+  if (!isNewFont && weight === inherited.weight && family === inherited.family && weightModifier === inherited.weightModifier && familyModifier === inherited.familyModifier) {
+    return inherited;
+  }
+  return makeFont(family, size, weight, { weightModifier, familyModifier });
 }

package/src/layout/video.ts

@@ -0,0 +1,24 @@
+/**
+ * Measuring a `video` element (docs/ops-protocol.md, "Video and audio"). A
+ * player view fills what it is offered, like a resizable image: a finite
+ * proposal is taken as is; an axis left open follows the video's aspect
+ * ratio (its `width` / `height` props once the page has read the metadata,
+ * 16:9 before); with both open it is the video's own size, or 320 × 180.
+ */
+
+import type { Proposal, Size } from './types';
+
+export const VIDEO_DEFAULT_SIZE: Size = { width: 320, height: 180 };
+
+export function videoSize(props: Record<string, unknown>, p: Proposal): Size {
+  const width = typeof props['width'] === 'number' && props['width'] > 0 ? props['width'] : null;
+  const height = typeof props['height'] === 'number' && props['height'] > 0 ? props['height'] : null;
+  const aspect = width !== null && height !== null ? width / height : VIDEO_DEFAULT_SIZE.width / VIDEO_DEFAULT_SIZE.height;
+  const pw = p.width !== null && Number.isFinite(p.width) ? p.width : null;
+  const ph = p.height !== null && Number.isFinite(p.height) ? p.height : null;
+  if (pw !== null && ph !== null) return { width: pw, height: ph };
+  if (pw !== null) return { width: pw, height: pw / aspect };
+  if (ph !== null) return { width: ph * aspect, height: ph };
+  if (width !== null && height !== null) return { width, height };
+  return { ...VIDEO_DEFAULT_SIZE };
+}

package/src/layoutDom.ts

@@ -35,6 +35,9 @@
 
 import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, TextLayout } from './layout';
 import { applyChartChrome } from './chartDom';
+import { bitmapLaidOut } from './bitmaps';
+import { drawRichText } from './richText';
+import { bindLargeTitle } from './largeTitle';
 
 export interface LayoutDomContext {
   root: HTMLElement;
@@ -95,8 +98,8 @@ export function applyLayout(ctx: LayoutDomContext, result: LayoutResult): BoxCha
       boxes.delete(id);
       continue;
     }
-    const box = boxOf(ctx, result, node, frame);
-    const origin = node.kind === 'sheet' ? { x: 0, y: 0 } : originOf(ctx, result, ctx.parents.get(id) ?? ROOT_ID);
+    const box = drawnBox(node, boxOf(ctx, result, node, frame));
+    const origin = node.kind === 'sheet' ? { x: 0, y: 0 } : isSectionSupplement(node) ? supplementOrigin(ctx, result, id) : originOf(ctx, result, ctx.parents.get(id) ?? ROOT_ID);
     const relative = { x: box.x - origin.x, y: box.y - origin.y, width: box.width, height: box.height };
     const previous = ctx.boxes.get(id) ?? null;
     boxes.set(id, relative);
@@ -146,7 +149,7 @@ export function setTabHidden(tab: HTMLElement, hidden: boolean): void {
 export function boxOf(ctx: LayoutDomContext, result: LayoutResult, node: LayoutNode, frame: Rect): Rect {
   const row = result.chrome.get(node.id)?.['row'];
   if (row) return row;
-  if (node.kind === 'section') return frame;
+  if (node.kind === 'section' || isSectionSupplement(node)) return frame;
   const parentId = ctx.parents.get(node.id);
   const parent = parentId !== undefined ? ctx.nodes.get(parentId) : undefined;
   if (!parent || (parent.kind !== 'section' && parent.kind !== 'list')) return frame;
@@ -156,6 +159,32 @@ export function boxOf(ctx: LayoutDomContext, result: LayoutResult, node: LayoutN
   return { x: card.x, y: frame.y - (height - frame.height) / 2, width: card.width, height };
 }
 
+/**
+ * The box an element is drawn in: its frame, except a circle's, which is the
+ * square centered in it (SwiftUI draws the largest circle that fits, so
+ * `Circle().frame(width: 110)` in a taller space stays round). The engine's
+ * frame, which the siblings were laid out with, is unchanged.
+ */
+function drawnBox(node: LayoutNode, box: Rect): Rect {
+  if (node.kind !== 'shape' || node.props['shape'] !== 'circle' || box.width === box.height) return box;
+  const side = Math.min(box.width, box.height);
+  return { x: box.x + (box.width - side) / 2, y: box.y + (box.height - side) / 2, width: side, height: side };
+}
+
+/** A section's view header or footer: not a row, and a DOM child of the section itself. */
+function isSectionSupplement(node: LayoutNode): boolean {
+  return node.kind === 'sectionheader' || node.kind === 'sectionfooter';
+}
+
+/** A view header / footer sits in the section element, beside the rows' card: the section's box is its origin. */
+function supplementOrigin(ctx: LayoutDomContext, result: LayoutResult, id: number): { x: number; y: number } {
+  const parentId = ctx.parents.get(id);
+  const parent = parentId === undefined ? undefined : ctx.nodes.get(parentId);
+  const frame = parentId === undefined ? undefined : result.frames.get(parentId);
+  if (!parent || !frame || parent.kind !== 'section') return originOf(ctx, result, parentId ?? ROOT_ID);
+  return boxOf(ctx, result, parent, frame);
+}
+
 /** Screen-coordinate origin that the children of `parentId` are positioned against. */
 export function originOf(ctx: LayoutDomContext, result: LayoutResult, parentId: number): { x: number; y: number } {
   if (parentId === ROOT_ID) return { x: 0, y: 0 };
@@ -244,6 +273,10 @@ function setTextLayout(el: HTMLElement, layout: TextLayout): void {
   setFont(el, layout.font);
   const align = TEXT_ALIGN[layout.alignment] ?? 'left';
   if (el.style.textAlign !== align) el.style.textAlign = align;
+  if (layout.rich && el.dataset['sbRich'] !== undefined) {
+    drawRichText(el, layout.rich);
+    return;
+  }
   const content = layout.lines.join('\n');
   if (el.textContent !== content) el.textContent = content;
 }
@@ -275,6 +308,14 @@ function applyBadge(result: LayoutResult, node: LayoutNode, el: HTMLElement, box
   }
 }
 
+function setFlag(el: HTMLElement, key: string, value: string | null): void {
+  if (value === null) {
+    if (key in el.dataset) delete el.dataset[key];
+  } else if (el.dataset[key] !== value) {
+    el.dataset[key] = value;
+  }
+}
+
 /** For leaf rows: pad the content frame back into place inside the row box. */
 function padIntoFrame(el: HTMLElement, box: Rect, frame: Rect): void {
   const s = el.style;
@@ -298,6 +339,17 @@ function applyChrome(
   bottomInset: number,
 ): void {
   const chrome = result.chrome.get(node.id);
+  // `.listRowSeparator(.hidden)`: a list row leaves out the separator below
+  // it, or above it (the previous row's line; styles.css).
+  setFlag(el, 'sbSeparatorBottom', chrome?.['separatorBottomHidden'] ? 'hidden' : null);
+  setFlag(el, 'sbSeparatorTop', chrome?.['separatorTopHidden'] ? 'hidden' : null);
+  // iOS 26: the separator under a list row starts at its first text (styles.css).
+  const separator = chrome?.['separator'];
+  const leading = separator ? `${separator.x}px` : '';
+  if (el.style.getPropertyValue('--sb-separator-leading') !== leading) {
+    if (leading) el.style.setProperty('--sb-separator-leading', leading);
+    else el.style.removeProperty('--sb-separator-leading');
+  }
   switch (node.kind) {
     case 'styled':
       applyBadge(result, node, el, box);
@@ -315,10 +367,14 @@ function applyChrome(
         if (el.style.fontSize !== size) el.style.fontSize = size;
       }
       padIntoFrame(el, box, frame);
+      // A bitmap is drawn for the size it is shown at.
+      if (node.props['bitmap']) bitmapLaidOut(el, frame.width, frame.height);
       return;
     }
     case 'textfield':
     case 'texteditor':
+      // A vertical text field draws in the font its lines were measured in.
+      setFont(el, result.fonts.get(node.id));
       padIntoFrame(el, box, frame);
       return;
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.
@@ -406,9 +462,7 @@ function applyChrome(
       placeChrome(footer, chrome?.['footer'], frame);
       if (header && texts?.['header']) setTextLayout(header, texts['header']);
       if (footer && texts?.['footer']) {
-        // The engine measures footers upper-cased like headers; iOS footers
-        // keep their case, so draw the prop text in the engine's font and
-        // rect and let it wrap there.
+        // The prop text in the engine's font and rect, wrapped there.
         setFont(footer, texts['footer'].font);
         footer.style.textAlign = 'left';
         footer.style.whiteSpace = 'pre-wrap';
@@ -425,6 +479,7 @@ function applyChrome(
         // Extra scrollable space at the end (the engine's frames are unchanged).
         content.style.height = `${size.height + bottomInset}px`;
       }
+      bindLargeTitle(el, chrome?.['largeTitle'] !== undefined);
       return;
     }
     case 'scrollview': {
@@ -439,6 +494,7 @@ function applyChrome(
         s.marginLeft = `${rect ? rect.x - frame.x : 0}px`;
         s.marginTop = `${rect ? rect.y - frame.y : 0}px`;
       }
+      bindLargeTitle(el, chrome?.['largeTitle'] !== undefined);
       return;
     }
     case 'navscreen': {
@@ -493,6 +549,8 @@ function applyChrome(
       const card = el.querySelector<HTMLElement>(':scope > .sb-sheet-card');
       const grabber = card?.querySelector<HTMLElement>(':scope > .sb-sheet-grabber') ?? null;
       placeChrome(grabber, chrome?.['grabber'], frame);
+      // iOS 26: a sheet at a partial detent floats as a rounded card (styles.css).
+      setFlag(el, 'sbFloating', chrome?.['floating'] ? '' : null);
       return;
     }
     case 'tabview': {
@@ -514,6 +572,8 @@ function applyChrome(
       // The track and fill are chrome, positioned from the element's own box.
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-gauge-track'), chrome?.['track'], box);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-gauge-fill'), chrome?.['fill'], box);
+      // A circular style: the ring over the gauge's square (gaugeRing.ts).
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-gauge-ring'), chrome?.['ring'], box);
       return;
     }
     case 'chart':