@swiftbrowser/web 0.1.0 → 0.2.0

package/src/styles.css

@@ -77,6 +77,15 @@
   --sb-color-secondary-fill: rgba(120, 120, 128, 0.16);
   --sb-color-tertiary-fill: rgba(118, 118, 128, 0.12);
   --sb-color-quaternary-fill: rgba(116, 116, 128, 0.08);
+  /* UIKit's semantic colors without a token above (`Color(uiColor:)`). */
+  --sb-color-tertiary-system-background: #ffffff;
+  --sb-color-tertiary-system-grouped-background: #f2f2f7;
+  --sb-color-opaque-separator: #c6c6c8;
+  --sb-color-system-gray2: #aeaeb2;
+  --sb-color-system-gray3: #c7c7cc;
+  --sb-color-system-gray4: #d1d1d6;
+  --sb-color-system-gray5: #e5e5ea;
+  --sb-color-system-gray6: #f2f2f7;
   /* Phase 6 materials: rgb components of the color blurred over the backdrop. */
   --sb-color-material-base: 255, 255, 255;
   --sb-color-switch-off: #e9e9ea;
@@ -110,6 +119,14 @@
   --sb-color-secondary-fill: rgba(120, 120, 128, 0.32);
   --sb-color-tertiary-fill: rgba(118, 118, 128, 0.24);
   --sb-color-quaternary-fill: rgba(118, 118, 128, 0.18);
+  --sb-color-tertiary-system-background: #2c2c2e;
+  --sb-color-tertiary-system-grouped-background: #2c2c2e;
+  --sb-color-opaque-separator: #38383a;
+  --sb-color-system-gray2: #636366;
+  --sb-color-system-gray3: #48484a;
+  --sb-color-system-gray4: #3a3a3c;
+  --sb-color-system-gray5: #2c2c2e;
+  --sb-color-system-gray6: #1c1c1e;
   --sb-color-material-base: 30, 30, 30;
   --sb-color-switch-off: #39393d;
   --sb-color-field-border: #3a3a3c;
@@ -455,7 +472,21 @@ html[data-sb-mode="device"] body {
   overflow: hidden;
   overscroll-behavior: none;
   touch-action: manipulation;
-  background: var(--sb-color-system-background, var(--page-bg));
+}
+
+/* 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 {
@@ -542,6 +573,9 @@ html[data-sb-mode="device"] .status {
   -webkit-background-clip: var(--sb-text-clip, border-box);
   background-clip: var(--sb-text-clip, border-box);
   color: var(--sb-text-color);
+  /* View-level `.underline()` / `.strikethrough()` (renderer.ts `applyStyle`);
+     with both unset the declaration is invalid and the line is `none`. */
+  text-decoration-line: var(--sb-text-underline,) var(--sb-text-strikethrough,);
 }
 
 .sb-vstack,
@@ -639,7 +673,8 @@ html[data-sb-mode="device"] .status {
 /* Phase 5: a catalog image. The layout engine decides the frame (intrinsic
    size, or the proposal for `.resizable()`), so the bitmap fills the box;
    `.aspectRatio` fitting is a layout concern, not object-fit's. */
-.sb-image > img {
+.sb-image > img,
+.sb-image > canvas {
   display: block;
   width: 100%;
   height: 100%;
@@ -649,6 +684,12 @@ html[data-sb-mode="device"] .status {
   -webkit-user-select: none;
 }
 
+/* `.interpolation(.none)`: a QR code's modules stay sharp when scaled up. */
+.sb-image[data-sb-interpolation='none'] > img,
+.sb-image[data-sb-interpolation='none'] > canvas {
+  image-rendering: pixelated;
+}
+
 /* Phase 5: a `.symbolset` SVG drawn as a template: the SVG masks a box
    filled with the current foreground color, like an SF Symbol. */
 .sb-image > .sb-image-mask {
@@ -854,6 +895,34 @@ html[data-sb-mode="device"] .status {
   border-bottom-right-radius: 10px;
 }
 
+/* Lazy rows not built yet (a trailing `lazyspacer`): no cell of their own, and
+   the row before them ends the card as the last row would. */
+.sb-lazyspacer {
+  background: none !important;
+  pointer-events: none;
+}
+
+.sb-list-content > :not(.sb-section):has(+ .sb-lazyspacer:last-child) {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.sb-section-rows > :has(+ .sb-lazyspacer:last-child)::after,
+.sb-list-content > :has(+ .sb-lazyspacer:last-child)::after,
+.sb-section-rows > .sb-lazyspacer::after,
+.sb-list-content > .sb-lazyspacer::after {
+  display: none;
+}
+
+/* `.listRowSeparator(.hidden)`: the row's own line (below it) or the
+   previous row's (above it) is left out. */
+.sb-section-rows > [data-sb-separator-bottom="hidden"]::after,
+.sb-list-content > [data-sb-separator-bottom="hidden"]::after,
+.sb-section-rows > :has(+ [data-sb-separator-top="hidden"])::after,
+.sb-list-content > :has(+ [data-sb-separator-top="hidden"])::after {
+  display: none !important;
+}
+
 /* Hairline separators, inset 16px from the leading edge. */
 .sb-section-rows > :not(:last-child)::after,
 .sb-list-content > :not(.sb-section):not(:last-child):not(:has(+ .sb-section))::after {
@@ -902,7 +971,7 @@ html[data-sb-mode="device"] .status {
 
 /* A screen with a list as its content takes the grouped background, like a
    UINavigationController hosting an inset-grouped table view. */
-.sb-navscreen:has(> .sb-navscreen-body > .sb-navscreen-content > .sb-list) {
+.sb-navscreen:has(> .sb-navscreen-body > .sb-navscreen-content > .sb-list:not([data-sb-background="hidden"])) {
   background: var(--sb-color-grouped-background);
 }
 
@@ -1070,7 +1139,9 @@ html[data-sb-mode="device"] .status {
 }
 
 /* NavigationLink: a tappable label. Inside a list it is a row with a chevron
-   at the engine's `chevron` rect; elsewhere it reads as plain accent text. */
+   at the engine's `chevron` rect, its label in the primary color (also when
+   the row is wrapped: a selectable or deletable `listrow`, a modifier);
+   elsewhere it reads as plain accent text. */
 .sb-navlink {
   color: var(--sb-color-accent);
   cursor: pointer;
@@ -1094,9 +1165,16 @@ html[data-sb-mode="device"] .status {
   display: none;
 }
 
-.sb-section-rows > .sb-navlink,
-.sb-list-content > .sb-navlink {
-  color: var(--sb-color-primary);
+/* An explicit `.foregroundStyle` on or around the link (which sets
+   `--sb-button-color`) wins, as in SwiftUI. */
+.sb-list .sb-navlink {
+  color: var(--sb-button-color, var(--sb-color-primary));
+}
+
+/* A `Label`'s icon in a list row takes the tint; its title keeps the row's
+   color. */
+.sb-list [data-sb-label-icon] {
+  color: var(--sb-button-color, var(--sb-tint, var(--sb-color-accent)));
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1406,6 +1484,30 @@ html[data-sb-mode="device"] .status {
   white-space: nowrap;
 }
 
+/* iOS 18 `Tab(…).badge(…)`: a red capsule at the top trailing corner of the icon. */
+.sb-tabbar-badge {
+  position: absolute;
+  top: 2px;
+  left: calc(50% + 5px);
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--sb-color-red);
+  color: #fff;
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.sb-tabbar-badge[hidden] {
+  display: none;
+}
+
 /* ---------------------------------------------------------------------------
    Phase 4: pickers. Segmented: a gray track with equal segments at the
    engine's `segment<i>` rects; the selected one carries a raised pill inset
@@ -1658,6 +1760,28 @@ html[data-sb-mode="device"] .status {
   background: var(--sb-tint, var(--sb-color-accent));
 }
 
+.sb-gauge-ring {
+  position: absolute;
+  pointer-events: none;
+}
+
+.sb-gauge-ring > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.sb-gauge-ring-track {
+  stroke: var(--sb-color-fill);
+  stroke-linecap: round;
+}
+
+.sb-gauge-ring-value {
+  stroke: var(--sb-tint, var(--sb-color-accent));
+  stroke-linecap: round;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sb-picker-menu,
   .sb-segment::before {
@@ -2832,3 +2956,84 @@ html[data-sb-mode="device"] .status {
     animation-duration: 0.01s;
   }
 }
+
+/* Rich text (src/richText.ts): a block per line, the height the engine gave
+   it; fragments share its baseline. An inline image sits on the baseline. */
+.sb-text-line {
+  display: block;
+  white-space: pre;
+}
+
+.sb-text-image {
+  display: inline-block;
+  position: relative;
+  vertical-align: baseline;
+  overflow: hidden;
+}
+
+/* A symbol's glyph is centered in its line-height square, as a standalone
+   `Image(systemName:)` is. */
+.sb-text-symbol {
+  display: inline-flex;
+  vertical-align: text-bottom;
+}
+
+/* A link: tinted unless the run has its own foreground. */
+.sb-link {
+  color: var(--sb-tint, var(--sb-color-accent));
+  cursor: pointer;
+}
+
+/* ---------------------------------------------------------------------------
+   A vertical text field (`TextField(_:text:axis: .vertical)`): a textarea the
+   engine sizes to its lines, in the font it measured them in (layoutDom.ts);
+   it scrolls inside past its `lineLimit`.
+   ------------------------------------------------------------------------- */
+textarea.sb-textfield {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  resize: none;
+  overflow-y: auto;
+  scrollbar-width: none;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+textarea.sb-textfield[data-sb-style="roundedBorder"] {
+  padding: 5px 7px;
+}
+
+/* A section's view header / footer: footnote-sized secondary text above or
+   below the card (the engine sets the fonts of the texts inside). */
+.sb-sectionheader,
+.sb-sectionfooter {
+  color: var(--sb-color-secondary);
+  text-align: left;
+}
+
+/* `.scrollContentBackground(.hidden)`: the list's own background goes; rows keep theirs. */
+.sb-list[data-sb-background="hidden"] {
+  background: transparent;
+}
+
+/* A custom shape's path (src/pathShape.ts): an SVG filling the shape's box,
+   whose view box is the size the path was drawn for. Strokes may lie outside
+   the box, as in SwiftUI. */
+svg.sb-path {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+/* A `Canvas` (src/canvasDrawing.ts): its drawing is clipped to its box. */
+.sb-canvas {
+  overflow: hidden;
+}
+
+.sb-canvas > svg {
+  display: block;
+  overflow: hidden;
+}

package/src/styles.ts

@@ -41,7 +41,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`. */
@@ -325,6 +338,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)';

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);
+    },
+  };
+}