@swiftbrowser/web 0.1.0 → 0.3.0

package/src/styles.ts

@@ -15,6 +15,7 @@
 
 import { assetColorVar } from './assets';
 import {
+  isAngularGradientStyle,
   isAssetColor,
   isColor,
   isColorGradientStyle,
@@ -41,7 +42,20 @@ const SEMANTIC_COLOR_VAR: Record<string, string> = {
   accent: 'var(--sb-color-accent)',
   systemBackground: 'var(--sb-color-system-background)',
   secondarySystemBackground: 'var(--sb-color-secondary-system-background)',
+  // UIKit's semantic colors (`Color(uiColor:)`) with a token of another name;
+  // the rest map by name (`tertiaryLabel` → `--sb-color-tertiary-label`).
+  label: 'var(--sb-color-primary)',
+  secondaryLabel: 'var(--sb-color-secondary)',
+  systemGroupedBackground: 'var(--sb-color-grouped-background)',
+  secondarySystemGroupedBackground: 'var(--sb-color-grouped-cell)',
+  placeholderText: 'var(--sb-color-placeholder)',
+  systemFill: 'var(--sb-color-fill)',
+  secondarySystemFill: 'var(--sb-color-secondary-fill)',
+  tertiarySystemFill: 'var(--sb-color-tertiary-fill)',
+  quaternarySystemFill: 'var(--sb-color-quaternary-fill)',
   clear: 'transparent',
+  // `.tint` as a style: the nearest `.tint(_:)` (styled `tint` sets `--sb-tint`), else the accent.
+  tint: 'var(--sb-tint, var(--sb-color-accent))',
 };
 
 /** CSS `<color>` for a protocol `Color`. */
@@ -156,6 +170,10 @@ export function styleToCSS(style: ShapeStyle, role: PaintRole): PaintCSS {
     const { stops, center, startRadius, endRadius } = style.radialGradient;
     return gradient(radialGradientCSS(stops ?? [], center, startRadius, endRadius, opacity), stops, opacity);
   }
+  if (isAngularGradientStyle(style)) {
+    const { stops, center, startAngle, endAngle } = style.angularGradient;
+    return gradient(angularGradientCSS(stops ?? [], center, startAngle, endAngle, opacity), stops, opacity);
+  }
   if (isColorGradientStyle(style)) {
     const base = colorToCSS(style.colorGradient);
     const light = withOpacity(`color-mix(in srgb, ${base}, white 12%)`, opacity);
@@ -230,6 +248,27 @@ export function radialGradientCSS(
   return `radial-gradient(circle ${size} at ${round(cx * 100)}% ${round(cy * 100)}%, ${list})`;
 }
 
+/**
+ * `conic-gradient(from <angle> at <cx>% <cy>%, ...)`. SwiftUI measures angles
+ * clockwise from 3 o'clock and CSS from 12 o'clock, so the CSS start is the
+ * start angle plus 90°; the stops span start...end as a share of the turn.
+ */
+export function angularGradientCSS(
+  stops: readonly GradientStop[],
+  center: UnitPoint | undefined,
+  startAngle: number | undefined,
+  endAngle: number | undefined,
+  opacity?: number,
+): string {
+  const cx = unit(center?.x, 0.5);
+  const cy = unit(center?.y, 0.5);
+  const start = unit(startAngle, 0);
+  const end = unit(endAngle, start + 360);
+  const span = end === start ? 360 : end - start;
+  const list = stopsCSS(stops, (location) => (location * span) / 360, opacity);
+  return `conic-gradient(from ${round(start + 90)}deg at ${round(cx * 100)}% ${round(cy * 100)}%, ${list})`;
+}
+
 /**
  * `color pct%, ...`, with `map` turning a stop location into a 0...1 position
  * and `opacity` multiplying every stop. Degenerate lists are padded to two stops.
@@ -325,6 +364,24 @@ export function effectsCSS(style: Style): EffectsCSS {
   if (style.blur != null && Number.isFinite(style.blur) && style.blur > 0) {
     filters.push(`blur(${round(style.blur)}px)`);
   }
+  // `.brightness` (SwiftUI adds the amount; CSS scales by 1 + amount),
+  // `.saturation`, `.contrast`, `.grayscale`, `.hueRotation`, `.colorInvert`.
+  if (style.brightness != null && Number.isFinite(style.brightness) && style.brightness !== 0) {
+    filters.push(`brightness(${round(Math.max(0, 1 + style.brightness))})`);
+  }
+  if (style.saturation != null && Number.isFinite(style.saturation) && style.saturation !== 1) {
+    filters.push(`saturate(${round(Math.max(0, style.saturation))})`);
+  }
+  if (style.contrast != null && Number.isFinite(style.contrast) && style.contrast !== 1) {
+    filters.push(`contrast(${round(Math.max(0, style.contrast))})`);
+  }
+  if (style.grayscale != null && Number.isFinite(style.grayscale) && style.grayscale > 0) {
+    filters.push(`grayscale(${round(Math.min(1, style.grayscale))})`);
+  }
+  if (style.hueRotation != null && Number.isFinite(style.hueRotation) && style.hueRotation !== 0) {
+    filters.push(`hue-rotate(${round(style.hueRotation)}deg)`);
+  }
+  if (style.colorInvert === true) filters.push('invert(1)');
   if (style.shadow) {
     const { color, radius, x, y } = style.shadow;
     const css = color ? colorToCSS(color) : 'rgba(0, 0, 0, 0.33)';
@@ -355,6 +412,10 @@ export function maskImageCSS(style: ShapeStyle): string {
     const { stops, center, startRadius, endRadius } = style.radialGradient;
     return radialGradientCSS(stops ?? [], center, startRadius, endRadius, style.opacity);
   }
+  if (isAngularGradientStyle(style)) {
+    const { stops, center, startAngle, endAngle } = style.angularGradient;
+    return angularGradientCSS(stops ?? [], center, startAngle, endAngle, style.opacity);
+  }
   if (isColorGradientStyle(style)) return styleToCSS(style, 'paint').value;
   const alpha = isColor(style) ? colorAlpha(style) : clamp01(style.opacity ?? 1);
   const solid = `rgba(0, 0, 0, ${round(alpha)})`;

package/src/swiftData.ts

@@ -0,0 +1,128 @@
+/**
+ * Phase 18: SwiftData's stores in the browser's IndexedDB.
+ *
+ * The app keeps its models in memory (Sources/SwiftData) and the page keeps
+ * them across launches: before the module starts, every record of the app's
+ * database is read and handed in as `SB_SWIFTDATA`
+ * (`{"<store>": [{id, entity, values}, …]}`), and each `swiftdata` op (one
+ * save) is written back in one transaction. One database per app,
+ * `sb-swiftdata:<App>`, with one object store, `records`, keyed by
+ * `[store, id]`. See docs/ops-protocol.md, "Phase 18".
+ */
+
+import type { SwiftDataOp, SwiftDataRecord } from './protocol';
+
+/** Every store of an app: store name → its records, in key order. */
+export type SwiftDataStores = Record<string, SwiftDataRecord[]>;
+
+/** What is kept in the `records` object store. */
+interface StoredRecord extends SwiftDataRecord {
+  store: string;
+}
+
+const RECORDS = 'records';
+
+export function databaseName(app: string): string {
+  return `sb-swiftdata:${app}`;
+}
+
+/** `stores` with one save applied, as the database applies it (for tests and the headless runner). */
+export function applySwiftDataOp(stores: SwiftDataStores, op: SwiftDataOp): SwiftDataStores {
+  const records = new Map<number, SwiftDataRecord>();
+  if (!op.clear) for (const record of stores[op.store] ?? []) records.set(record.id, record);
+  for (const id of op.delete) records.delete(id);
+  for (const record of op.put) records.set(record.id, { id: record.id, entity: record.entity, values: record.values });
+  return { ...stores, [op.store]: [...records.values()].sort((a, b) => a.id - b.id) };
+}
+
+/** The stores as the module reads them from `SB_SWIFTDATA`; null when there is nothing to hand in. */
+export function launchValue(stores: SwiftDataStores): string | null {
+  const nonEmpty = Object.entries(stores).filter(([, records]) => records.length > 0);
+  if (nonEmpty.length === 0) return null;
+  return JSON.stringify(Object.fromEntries(nonEmpty));
+}
+
+/** Groups stored records by store, each in key order. */
+export function groupRecords(rows: readonly StoredRecord[]): SwiftDataStores {
+  const stores: SwiftDataStores = {};
+  for (const row of rows) {
+    (stores[row.store] ??= []).push({ id: row.id, entity: row.entity, values: row.values });
+  }
+  for (const records of Object.values(stores)) records.sort((a, b) => a.id - b.id);
+  return stores;
+}
+
+/** Where an app's SwiftData lives between launches. */
+export interface SwiftDataPersistence {
+  /** Every store, read once before the module starts. */
+  load(): Promise<SwiftDataStores>;
+  /** Writes one save; saves are written in the order they were made. */
+  apply(op: SwiftDataOp): Promise<void>;
+  /** Deletes the app's data (every store). */
+  clear(): Promise<void>;
+}
+
+function request<T>(req: IDBRequest<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error ?? new Error('IndexedDB request failed'));
+  });
+}
+
+function done(transaction: IDBTransaction): Promise<void> {
+  return new Promise((resolve, reject) => {
+    transaction.oncomplete = () => resolve();
+    transaction.onabort = () => reject(transaction.error ?? new Error('IndexedDB transaction aborted'));
+    transaction.onerror = () => reject(transaction.error ?? new Error('IndexedDB transaction failed'));
+  });
+}
+
+/** The app's database in IndexedDB (`factory` is the browser's unless a test passes one). */
+export function indexedDBPersistence(app: string, factory: IDBFactory = indexedDB): SwiftDataPersistence {
+  let opened: Promise<IDBDatabase> | null = null;
+  const database = (): Promise<IDBDatabase> => {
+    opened ??= new Promise((resolve, reject) => {
+      const open = factory.open(databaseName(app), 1);
+      open.onupgradeneeded = () => {
+        if (!open.result.objectStoreNames.contains(RECORDS)) open.result.createObjectStore(RECORDS, { keyPath: ['store', 'id'] });
+      };
+      open.onsuccess = () => resolve(open.result);
+      open.onerror = () => reject(open.error ?? new Error(`could not open ${databaseName(app)}`));
+      open.onblocked = () => reject(new Error(`${databaseName(app)} is blocked by another tab`));
+    });
+    return opened;
+  };
+  // Saves are chained so that each one's transaction starts after the
+  // previous one's was created, whatever the database's opening takes.
+  let queue: Promise<void> = Promise.resolve();
+
+  return {
+    async load() {
+      const db = await database();
+      const transaction = db.transaction(RECORDS, 'readonly');
+      const rows = await request(transaction.objectStore(RECORDS).getAll() as IDBRequest<StoredRecord[]>);
+      return groupRecords(rows);
+    },
+    apply(op) {
+      queue = queue.then(async () => {
+        const db = await database();
+        const transaction = db.transaction(RECORDS, 'readwrite');
+        const records = transaction.objectStore(RECORDS);
+        if (op.clear) records.delete(IDBKeyRange.bound([op.store, -Infinity], [op.store, Infinity]));
+        for (const id of op.delete) records.delete([op.store, id]);
+        for (const record of op.put) {
+          const row: StoredRecord = { store: op.store, id: record.id, entity: record.entity, values: record.values };
+          records.put(row);
+        }
+        await done(transaction);
+      });
+      return queue;
+    },
+    async clear() {
+      const db = await database();
+      const transaction = db.transaction(RECORDS, 'readwrite');
+      transaction.objectStore(RECORDS).clear();
+      await done(transaction);
+    },
+  };
+}