@swiftbrowser/web 0.1.0 → 0.3.0

package/src/colorMultiply.ts

@@ -0,0 +1,93 @@
+/**
+ * `.colorMultiply(_:)`: CSS has no filter that multiplies by a color, so the
+ * page keeps one SVG filter per color in a hidden `<svg>` and the view's box
+ * names it in its `filter` (`url(#sb-multiply-…)`). The filter is an
+ * `feColorMatrix` that scales red, green, blue and alpha by the color's, in
+ * sRGB as SwiftUI multiplies. A semantic or catalog color is resolved for the
+ * scheme the page shows when the style is applied.
+ */
+
+import type { Color, RGBAColor } from './protocol';
+import { colorToCSS } from './styles';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const DEFS_ID = 'sb-filter-defs';
+
+function clamp01(v: number): number {
+  return Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : 1;
+}
+
+function isRGBA(color: Color): color is RGBAColor {
+  return typeof (color as RGBAColor).r === 'number';
+}
+
+/** The filter's id for a color: its components to three places. */
+export function multiplyFilterId(color: RGBAColor): string {
+  const part = (v: number) => Math.round(clamp01(v) * 1000).toString(36);
+  return `sb-multiply-${part(color.r)}-${part(color.g)}-${part(color.b)}-${part(color.a ?? 1)}`;
+}
+
+/** The `feColorMatrix` values that multiply by `color`. */
+export function multiplyMatrix(color: RGBAColor): string {
+  const v = (n: number) => String(Math.round(clamp01(n) * 1000) / 1000);
+  return [
+    `${v(color.r)} 0 0 0 0`,
+    `0 ${v(color.g)} 0 0 0`,
+    `0 0 ${v(color.b)} 0 0`,
+    `0 0 0 ${v(color.a ?? 1)} 0`,
+  ].join(' ');
+}
+
+/** Parses a computed `rgb()` / `rgba()` / `color(srgb …)` value. */
+export function parseComputedColor(value: string): RGBAColor | null {
+  const rgb = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*([\d.]+))?\s*\)$/.exec(value.trim());
+  if (rgb) {
+    return { r: Number(rgb[1]) / 255, g: Number(rgb[2]) / 255, b: Number(rgb[3]) / 255, a: rgb[4] != null ? Number(rgb[4]) : 1 };
+  }
+  const srgb = /^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\s*\)$/.exec(value.trim());
+  if (srgb) return { r: Number(srgb[1]), g: Number(srgb[2]), b: Number(srgb[3]), a: srgb[4] != null ? Number(srgb[4]) : 1 };
+  return null;
+}
+
+/** The color's components as `el` would draw it (a semantic or catalog color through its CSS). */
+function resolve(color: Color, el: HTMLElement): RGBAColor {
+  if (isRGBA(color)) return color;
+  const probe = el.ownerDocument.createElement('span');
+  probe.style.display = 'none';
+  probe.style.color = colorToCSS(color);
+  el.appendChild(probe);
+  const computed = getComputedStyle(probe).color;
+  probe.remove();
+  return parseComputedColor(computed) ?? { r: 1, g: 1, b: 1, a: 1 };
+}
+
+/** The `filter` function that multiplies `el`'s box by `color`, adding the filter to the document once. */
+export function colorMultiplyFilter(color: Color, el: HTMLElement): string {
+  const rgba = resolve(color, el);
+  const id = multiplyFilterId(rgba);
+  const doc = el.ownerDocument;
+  if (!doc.getElementById(id)) {
+    let defs: Element | null = doc.getElementById(DEFS_ID);
+    if (!defs) {
+      const svg = doc.createElementNS(SVG_NS, 'svg');
+      svg.setAttribute('aria-hidden', 'true');
+      svg.setAttribute('width', '0');
+      svg.setAttribute('height', '0');
+      svg.style.position = 'absolute';
+      const created = doc.createElementNS(SVG_NS, 'defs');
+      created.id = DEFS_ID;
+      svg.appendChild(created);
+      defs = created;
+      doc.body.appendChild(svg);
+    }
+    const filter = doc.createElementNS(SVG_NS, 'filter');
+    filter.id = id;
+    filter.setAttribute('color-interpolation-filters', 'sRGB');
+    const matrix = doc.createElementNS(SVG_NS, 'feColorMatrix');
+    matrix.setAttribute('type', 'matrix');
+    matrix.setAttribute('values', multiplyMatrix(rgba));
+    filter.appendChild(matrix);
+    defs.appendChild(filter);
+  }
+  return `url(#${id})`;
+}

package/src/colorPicker.ts

@@ -0,0 +1,44 @@
+/**
+ * SwiftUI's `ColorPicker`, page side: a `pickColor` host request opens the
+ * browser's color chooser (`<input type="color">`, clicked inside the tap
+ * that sent the request) at the current color and answers
+ * `{ color: "#rrggbb" }` when the viewer picks one, or `{}` when they close
+ * it (where the browser reports that with a `cancel` event; otherwise a
+ * dismissal is never answered and the app's color stays as it was).
+ */
+
+import type { PickColorRequestParams } from './protocol';
+
+export type PickColorResult = {
+  color?: string;
+};
+
+/** Opens a color chooser at `color` (`#rrggbb`); resolves with the chosen color, or null. */
+export type ColorChooser = (color: string) => Promise<string | null>;
+
+export async function performPickColor(params: PickColorRequestParams, choose: ColorChooser | undefined): Promise<PickColorResult> {
+  if (!choose) throw new Error('unsupported: this page cannot open a color chooser');
+  const current = /^#[0-9a-f]{6}$/i.test(params.color ?? '') ? params.color!.toLowerCase() : '#000000';
+  const chosen = await choose(current);
+  return chosen ? { color: chosen.toLowerCase() } : {};
+}
+
+/** The browser's color chooser: a hidden `<input type="color">` clicked at once. */
+export function chooseColor(color: string): Promise<string | null> {
+  const input = document.createElement('input');
+  input.type = 'color';
+  input.value = color;
+  input.style.cssText = 'position:fixed;left:-1000px;top:0;width:1px;height:1px;opacity:0';
+  input.dataset['sbPicker'] = '';
+  document.body.append(input);
+  const result = new Promise<string | null>((resolve) => {
+    const finish = (value: string | null): void => {
+      input.remove();
+      resolve(value);
+    };
+    input.addEventListener('change', () => finish(input.value), { once: true });
+    input.addEventListener('cancel', () => finish(null), { once: true });
+  });
+  input.click();
+  return result;
+}

package/src/corsProxy.ts

@@ -0,0 +1,45 @@
+// The CORS proxy an app may be built with (`swiftbrowser build --cors-proxy
+// <url>`, packages/cors-proxy). A page reads a cross-origin response only
+// when the server allows the page's origin; many servers don't, for images
+// especially, which the app reads with `fetch` (natively they load). With a
+// proxy, a cross-origin GET or HEAD that fails is tried once more through
+// `<proxy>?url=<target>`. Requests go direct first, so a server that allows
+// the page (an API, with the user's token) never sees the proxy, and a
+// request that may change something (POST, PUT…) is never sent twice.
+
+/** Whether `url` (absolute) is http(s) on another origin than `pageOrigin`. */
+export function isCrossOrigin(url: string, pageOrigin: string): boolean {
+  try {
+    const target = new URL(url);
+    return (target.protocol === 'http:' || target.protocol === 'https:') && target.origin !== pageOrigin;
+  } catch {
+    return false;
+  }
+}
+
+/** `<proxy>?url=<target>`, keeping a query the proxy URL already has. */
+export function proxiedURL(proxy: string, target: string): string {
+  const url = new URL(proxy);
+  url.searchParams.set('url', target);
+  return url.href;
+}
+
+/**
+ * `fetchImpl`, retrying a failed cross-origin GET or HEAD through `proxy`.
+ * A failure is a rejection (CORS refusals and network errors look the same
+ * to a page); an answer with any status is the server's and is kept. An
+ * aborted request is not retried.
+ */
+export function withCORSProxy(fetchImpl: typeof fetch, proxy: string, pageOrigin: string): typeof fetch {
+  return async (input, init) => {
+    try {
+      return await fetchImpl(input, init);
+    } catch (error) {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+      const method = (init?.method ?? (typeof input === 'object' && 'method' in input ? input.method : 'GET')).toUpperCase();
+      const aborted = init?.signal?.aborted || (error instanceof DOMException && error.name === 'AbortError');
+      if (aborted || (method !== 'GET' && method !== 'HEAD') || !isCrossOrigin(url, pageOrigin)) throw error;
+      return fetchImpl(proxiedURL(proxy, url), init);
+    }
+  };
+}

package/src/gaugeRing.ts

@@ -0,0 +1,74 @@
+/**
+ * The ring of a circular gauge (`accessoryCircularCapacity`,
+ * `accessoryCircular`), an SVG the layout places over the gauge's square
+ * (the `ring` chrome rect). In a 100-unit box: a capacity gauge is a full
+ * track with the value filled clockwise from the top; an `accessoryCircular`
+ * gauge is an arc of 270° open at the bottom, filled from its start to the
+ * value. The track is the fill color, the value the tint (`--sb-tint`, else
+ * the accent color), with round caps (styles.css).
+ */
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/** The ring's stroke, in units of the 100-unit box (about 6 points at 58). */
+const STROKE = 10;
+const RADIUS = 50 - STROKE / 2;
+
+/** The part of the circle an `accessoryCircular` gauge's arc covers. */
+const OPEN_ARC = 0.75;
+
+export function isCircularGauge(style: string | undefined): boolean {
+  return style === 'accessoryCircular' || style === 'accessoryCircularCapacity';
+}
+
+/**
+ * A ring with its track and value circles, in a box the layout places (and
+ * hides, as an HTML element can be), hidden until laid out.
+ */
+export function createGaugeRing(): HTMLElement {
+  const box = document.createElement('div');
+  box.className = 'sb-gauge-ring';
+  box.hidden = true;
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', '0 0 100 100');
+  svg.setAttribute('aria-hidden', 'true');
+  for (const part of ['track', 'value']) {
+    const circle = document.createElementNS(SVG_NS, 'circle');
+    circle.setAttribute('class', `sb-gauge-ring-${part}`);
+    circle.setAttribute('cx', '50');
+    circle.setAttribute('cy', '50');
+    circle.setAttribute('r', String(RADIUS));
+    circle.setAttribute('fill', 'none');
+    circle.setAttribute('stroke-width', String(STROKE));
+    // Dashes in hundredths of the circle.
+    circle.setAttribute('pathLength', '100');
+    svg.append(circle);
+  }
+  box.append(svg);
+  return box;
+}
+
+/** The dash arrays and rotation that draw `value` (0...1) in `style`. */
+export function gaugeRingGeometry(style: string, value: number): { track: string; value: string; rotation: number } {
+  const v = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+  const round = (n: number) => Math.round(n * 1000) / 1000;
+  if (style === 'accessoryCircular') {
+    const arc = OPEN_ARC * 100;
+    // From 135° (bottom left), clockwise over the top to 45° (bottom right).
+    return { track: `${arc} 100`, value: `${round(arc * v)} 100`, rotation: 135 };
+  }
+  // Capacity: the whole circle, the value from 12 o'clock.
+  return { track: '100 0', value: `${round(100 * v)} 100`, rotation: -90 };
+}
+
+export function updateGaugeRing(box: HTMLElement, style: string, value: number): void {
+  const geometry = gaugeRingGeometry(style, value);
+  const svg = box.firstElementChild;
+  if (!svg) return;
+  const [track, fill] = Array.from(svg.children) as SVGCircleElement[];
+  for (const circle of [track, fill]) circle?.setAttribute('transform', `rotate(${geometry.rotation} 50 50)`);
+  track?.setAttribute('stroke-dasharray', geometry.track);
+  fill?.setAttribute('stroke-dasharray', geometry.value);
+  // A zero value draws nothing (a round cap would show a dot).
+  fill?.setAttribute('visibility', geometry.value.startsWith('0 ') ? 'hidden' : 'visible');
+}

package/src/gif.ts

@@ -0,0 +1,297 @@
+/**
+ * Animated GIFs, a frame at a time. Image I/O in Swift reports a GIF's
+ * frames and delays (Sources/ImageIO/GIF.swift) and draws frame `n` as a
+ * recipe whose `frame` is `n`; the page draws that frame here: decoded (LZW)
+ * and composed over the frames before it as the browser composes them when
+ * it animates a GIF itself. The canvas starts clear, a frame's transparent
+ * pixels leave what is under them, and a frame's disposal applies before
+ * the next one is drawn: none or leave in place (0, 1), clear its rectangle
+ * (2: the background, which browsers draw clear), or restore what was under
+ * it (3). Frames are composed in order once and kept, so a loop is decoded
+ * once (docs/ops-protocol.md, "Animated GIFs").
+ */
+
+interface FrameRecord {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  interlaced: boolean;
+  /** RGB triples of the frame's own color table, else the global one. */
+  colors: Uint8Array | null;
+  transparent: number | null;
+  disposal: number;
+  /** Delay before the next frame, in hundredths of a second. */
+  delay: number;
+  minCodeSize: number;
+  /** The image data's sub-blocks, joined. */
+  data: Uint8Array;
+}
+
+/** A GIF's frames, composed on demand. */
+export class GifDecoder {
+  readonly width: number;
+  readonly height: number;
+  private readonly records: FrameRecord[];
+  /** Composed frames so far, straight RGBA. */
+  private readonly composed: Uint8ClampedArray<ArrayBuffer>[] = [];
+  /** The canvas as the next frame will find it (the last frame's disposal applied). */
+  private canvas: Uint8ClampedArray<ArrayBuffer>;
+
+  private constructor(width: number, height: number, records: FrameRecord[]) {
+    this.width = width;
+    this.height = height;
+    this.records = records;
+    this.canvas = new Uint8ClampedArray(width * height * 4);
+  }
+
+  /** The decoder for a GIF file; null when `bytes` is not one, or has no frame. */
+  static parse(bytes: Uint8Array): GifDecoder | null {
+    const signature = String.fromCharCode(...bytes.subarray(0, 6));
+    if (bytes.length < 13 || (signature !== 'GIF87a' && signature !== 'GIF89a')) return null;
+    const u16 = (at: number): number => (bytes[at] ?? 0) | ((bytes[at + 1] ?? 0) << 8);
+    const width = u16(6);
+    const height = u16(8);
+    if (width === 0 || height === 0) return null;
+    const screen = bytes[10]!;
+    let at = 13;
+    let globalColors: Uint8Array | null = null;
+    if (screen & 0x80) {
+      const size = 3 << ((screen & 0x07) + 1);
+      globalColors = bytes.subarray(at, at + size);
+      at += size;
+    }
+    /** The sub-blocks starting at `start`, joined, and the index after them. */
+    const subBlocks = (start: number): { data: Uint8Array; next: number } => {
+      const parts: Uint8Array[] = [];
+      let total = 0;
+      let index = start;
+      while (index < bytes.length) {
+        const size = bytes[index]!;
+        index += 1;
+        if (size === 0) break;
+        const part = bytes.subarray(index, Math.min(bytes.length, index + size));
+        parts.push(part);
+        total += part.length;
+        index += size;
+      }
+      const data = new Uint8Array(total);
+      let offset = 0;
+      for (const part of parts) {
+        data.set(part, offset);
+        offset += part.length;
+      }
+      return { data, next: index };
+    };
+
+    const records: FrameRecord[] = [];
+    let transparent: number | null = null;
+    let disposal = 0;
+    let delay = 0;
+    while (at < bytes.length) {
+      const block = bytes[at]!;
+      if (block === 0x21) {
+        const label = bytes[at + 1];
+        if (label === 0xf9 && (bytes[at + 2] ?? 0) >= 4) {
+          const packed = bytes[at + 3] ?? 0;
+          disposal = (packed >> 2) & 0x07;
+          delay = u16(at + 4);
+          transparent = packed & 0x01 ? (bytes[at + 6] ?? 0) : null;
+        }
+        at = subBlocks(at + 2).next;
+      } else if (block === 0x2c) {
+        if (at + 10 > bytes.length) break;
+        const packed = bytes[at + 9]!;
+        let index = at + 10;
+        let colors = globalColors;
+        if (packed & 0x80) {
+          const size = 3 << ((packed & 0x07) + 1);
+          colors = bytes.subarray(index, index + size);
+          index += size;
+        }
+        const minCodeSize = bytes[index] ?? 0;
+        const { data, next } = subBlocks(index + 1);
+        records.push({
+          x: u16(at + 1),
+          y: u16(at + 3),
+          width: u16(at + 5),
+          height: u16(at + 7),
+          interlaced: (packed & 0x40) !== 0,
+          colors,
+          transparent,
+          disposal,
+          delay,
+          minCodeSize,
+          data,
+        });
+        transparent = null;
+        disposal = 0;
+        delay = 0;
+        at = next;
+      } else {
+        // The trailer (0x3b), or not a block: the file ends here.
+        break;
+      }
+    }
+    return records.length > 0 ? new GifDecoder(width, height, records) : null;
+  }
+
+  get frameCount(): number {
+    return this.records.length;
+  }
+
+  /** Frame `index`'s delay in hundredths of a second, as the file says. */
+  delay(index: number): number {
+    return this.records[index]?.delay ?? 0;
+  }
+
+  /** Frame `index` composed over the ones before it: straight RGBA, `width` × `height`. */
+  frame(index: number): Uint8ClampedArray<ArrayBuffer> | null {
+    if (index < 0 || index >= this.records.length) return null;
+    while (this.composed.length <= index) this.composeNext();
+    return this.composed[index]!;
+  }
+
+  private composeNext(): void {
+    const record = this.records[this.composed.length]!;
+    const { width, height } = this;
+    const before = record.disposal === 3 ? this.canvas.slice() : null;
+    const pixels = record.width * record.height;
+    const { indices, count } = lzwDecode(record.minCodeSize, record.data, pixels);
+    const colors = record.colors;
+    const canvas = this.canvas;
+    for (let i = 0; i < count; i += 1) {
+      const row = interlacedRow(Math.floor(i / record.width), record.height, record.interlaced);
+      const x = record.x + (i % record.width);
+      const y = record.y + row;
+      if (x >= width || y >= height) continue;
+      const color = indices[i]!;
+      if (color === record.transparent) continue;
+      const offset = (y * width + x) * 4;
+      if (colors && color * 3 + 2 < colors.length) {
+        canvas[offset] = colors[color * 3]!;
+        canvas[offset + 1] = colors[color * 3 + 1]!;
+        canvas[offset + 2] = colors[color * 3 + 2]!;
+      } else {
+        canvas[offset] = canvas[offset + 1] = canvas[offset + 2] = 0;
+      }
+      canvas[offset + 3] = 255;
+    }
+    this.composed.push(canvas.slice());
+    // The disposal readies the canvas for the next frame.
+    if (record.disposal === 2) {
+      for (let y = record.y; y < Math.min(height, record.y + record.height); y += 1) {
+        const start = (y * width + record.x) * 4;
+        const end = (y * width + Math.min(width, record.x + record.width)) * 4;
+        if (end > start) canvas.fill(0, start, end);
+      }
+    } else if (before) {
+      this.canvas = before;
+    }
+  }
+}
+
+/** The row an interlaced image's `n`th decoded row belongs on (passes of 8, 8, 4 and 2). */
+function interlacedRow(n: number, height: number, interlaced: boolean): number {
+  if (!interlaced) return n;
+  const passes: [number, number][] = [
+    [0, 8],
+    [4, 8],
+    [2, 4],
+    [1, 2],
+  ];
+  let remaining = n;
+  for (const [start, step] of passes) {
+    const rows = start < height ? Math.ceil((height - start) / step) : 0;
+    if (remaining < rows) return start + remaining * step;
+    remaining -= rows;
+  }
+  return height;
+}
+
+/**
+ * GIF's variable-width LZW: color indices for up to `pixels` pixels, and how
+ * many the data held (a file cut short leaves the rest undrawn).
+ */
+export function lzwDecode(minCodeSize: number, data: Uint8Array, pixels: number): { indices: Uint8Array; count: number } {
+  const indices = new Uint8Array(pixels);
+  if (minCodeSize < 1 || minCodeSize > 11) return { indices, count: 0 };
+  const clear = 1 << minCodeSize;
+  const end = clear + 1;
+  const prefix = new Int16Array(4096);
+  const suffix = new Uint8Array(4096);
+  const stack = new Uint8Array(4097);
+  for (let code = 0; code < clear; code += 1) {
+    prefix[code] = -1;
+    suffix[code] = code;
+  }
+  let codeSize = minCodeSize + 1;
+  let codeMask = (1 << codeSize) - 1;
+  let next = end + 1;
+  let previous = -1;
+  let first = 0;
+  let datum = 0;
+  let bits = 0;
+  let position = 0;
+  let count = 0;
+  while (count < pixels) {
+    while (bits < codeSize && position < data.length) {
+      datum |= data[position]! << bits;
+      position += 1;
+      bits += 8;
+    }
+    if (bits < codeSize) break;
+    let code = datum & codeMask;
+    datum >>>= codeSize;
+    bits -= codeSize;
+    if (code === clear) {
+      codeSize = minCodeSize + 1;
+      codeMask = (1 << codeSize) - 1;
+      next = end + 1;
+      previous = -1;
+      continue;
+    }
+    if (code === end) break;
+    if (previous === -1) {
+      if (code >= clear) break;
+      indices[count] = code;
+      count += 1;
+      previous = code;
+      first = code;
+      continue;
+    }
+    if (code > next) break;
+    const current = code;
+    let top = 0;
+    if (code === next) {
+      // The code being defined: the previous string and its own first index.
+      stack[top] = first;
+      top += 1;
+      code = previous;
+    }
+    while (code >= clear) {
+      stack[top] = suffix[code]!;
+      top += 1;
+      code = prefix[code]!;
+    }
+    first = suffix[code]!;
+    stack[top] = first;
+    top += 1;
+    if (next < 4096) {
+      prefix[next] = previous;
+      suffix[next] = first;
+      next += 1;
+      if ((next & codeMask) === 0 && next < 4096) {
+        codeSize += 1;
+        codeMask = (1 << codeSize) - 1;
+      }
+    }
+    previous = current;
+    while (top > 0 && count < pixels) {
+      top -= 1;
+      indices[count] = stack[top]!;
+      count += 1;
+    }
+  }
+  return { indices, count };
+}