@swiftbrowser/web 0.2.0 → 0.3.0

package/src/layoutDom.ts

@@ -37,6 +37,7 @@ import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, T
 import { applyChartChrome } from './chartDom';
 import { bitmapLaidOut } from './bitmaps';
 import { drawRichText } from './richText';
+import { bindLargeTitle } from './largeTitle';
 
 export interface LayoutDomContext {
   root: HTMLElement;
@@ -342,6 +343,13 @@ function applyChrome(
   // 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);
@@ -454,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';
@@ -473,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': {
@@ -487,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': {
@@ -541,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': {

package/src/main.ts

@@ -579,7 +579,10 @@ async function boot(): Promise<void> {
   // The standard directories a new home gets are saved with its first write.
   const corsProxy = registeredApp()?.corsProxy;
   app = await loadApp(url, onOps, {
-    args: [requestedApp],
+    // `?arg=` (repeatable) adds launch arguments after the app's name, as
+    // `simctl launch <app> <args>` does: CI's iOS fidelity workflow opens a
+    // screen of Examples/Fidelity with `?arg=-screen&arg=<name>`.
+    args: [requestedApp, ...params.getAll('arg')],
     env,
     bundle,
     home,

package/src/mock.ts

@@ -381,8 +381,8 @@ export function galleryTextStyleIds(style: TextStyle): { styled: number; text: n
   return { styled: GALLERY_IDS.firstTextStyle + 2 * i, text: GALLERY_IDS.firstTextStyle + 2 * i + 1 };
 }
 
-const BLUE = { r: 0, g: 0.478, b: 1, a: 1 };
-const RED = { r: 1, g: 0.231, b: 0.188, a: 1 };
+const BLUE = { r: 0, g: 0.533, b: 1, a: 1 };
+const RED = { r: 1, g: 0.22, b: 0.235, a: 1 };
 const GREEN = { r: 0.204, g: 0.78, b: 0.349, a: 1 };
 
 /** The animated box: `styled{frame}` > `shape`; expanded doubles the width and swaps the fill. */

package/src/protocol.ts

@@ -140,6 +140,17 @@ export interface RadialGradientStyle extends StyleOpacity {
   radialGradient: RadialGradient;
 }
 
+export interface AngularGradient {
+  stops: GradientStop[];
+  center: UnitPoint;
+  /** Degrees, clockwise from the positive x axis (3 o'clock); the stops span start...end. */
+  startAngle: number;
+  endAngle: number;
+}
+export interface AngularGradientStyle extends StyleOpacity {
+  angularGradient: AngularGradient;
+}
+
 /** `Color.gradient`: a subtle vertical gradient derived from one color. */
 export interface ColorGradientStyle extends StyleOpacity {
   colorGradient: Color;
@@ -156,6 +167,7 @@ export type ShapeStyle =
   | HierarchicalStyle
   | LinearGradientStyle
   | RadialGradientStyle
+  | AngularGradientStyle
   | ColorGradientStyle
   | MaterialStyle;
 
@@ -622,10 +634,11 @@ export interface Stroke {
    * `data-sb-stroke`.
    */
   inset?: boolean;
-  /** A custom shape's `StrokeStyle` (a built-in shape's border has none of these). */
+  /** A custom shape's `StrokeStyle` (a built-in shape's border has none of these but `dash`). */
   lineCap?: 'butt' | 'round' | 'square';
   lineJoin?: 'miter' | 'round' | 'bevel';
   miterLimit?: number;
+  /** A built-in shape draws any dash pattern as CSS dashes. */
   dash?: number[];
   dashPhase?: number;
 }
@@ -787,7 +800,9 @@ export type GaugeStyle =
   | 'linearCapacity'
   | 'accessoryLinear'
   | 'accessoryCircular'
-  | 'accessoryCircularCapacity';
+  | 'accessoryCircularCapacity'
+  /** A determinate `ProgressView`: the label above the bar, the current value label under it. */
+  | 'progress';
 /**
  * `Gauge`: `value` is normalized to 0...1. Children in order: the label (when
  * `hasLabel`) and the current value label (when `hasCurrentValueLabel`).
@@ -1383,6 +1398,11 @@ export function isRadialGradientStyle(style: ShapeStyle): style is RadialGradien
   return typeof g === 'object' && g !== null;
 }
 
+export function isAngularGradientStyle(style: ShapeStyle): style is AngularGradientStyle {
+  const g = (style as AngularGradientStyle).angularGradient;
+  return typeof g === 'object' && g !== null;
+}
+
 export function isColorGradientStyle(style: ShapeStyle): style is ColorGradientStyle {
   const c = (style as ColorGradientStyle).colorGradient;
   return typeof c === 'object' && c !== null;

package/src/renderer.ts

@@ -137,7 +137,7 @@ import {
   snapSliderValue,
   timeInputValue,
 } from './layout';
-import { renderSymbol } from './symbols';
+import { filledSymbolName, renderSymbol } from './symbols';
 import { applyPathShape, hasPathFrames, playPathFrames } from './pathShape';
 import { VideoEvents, applyVideo, stopVideos } from './video';
 import { applyCanvas, createCanvasElement } from './canvasDrawing';
@@ -228,8 +228,8 @@ const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
 
 /** Duration of the alert / dialog fade (Phase 8); keep in sync with styles.css. */
 export const ALERT_TRANSITION_MS = 250;
-/** Diameter of the slider thumb (Phase 8); keep in sync with the engine and styles.css. */
-const SLIDER_THUMB = 27;
+/** Width of the slider thumb (iOS 26: a 38×24 capsule); keep in sync with the engine and styles.css. */
+const SLIDER_THUMB = 38;
 
 /** Width of the menu a `menu` picker (or a Phase 6 `menu`) opens, like an iOS context menu. */
 export const PICKER_MENU_WIDTH = 250;
@@ -2202,7 +2202,8 @@ function refreshTabBar(tabview: HTMLElement): void {
     const icon = item.querySelector<HTMLElement>(':scope > .sb-tabbar-icon');
     if (icon && icon.dataset['sbSymbol'] !== symbol) {
       icon.dataset['sbSymbol'] = symbol;
-      const svg = symbol ? renderSymbol(symbol) : null;
+      // iOS draws tab bar symbols in their filled form.
+      const svg = symbol ? renderSymbol(filledSymbolName(symbol)) : null;
       if (svg) icon.replaceChildren(svg);
       else icon.replaceChildren();
       icon.toggleAttribute('data-sb-missing', Boolean(symbol) && !svg);
@@ -2761,7 +2762,8 @@ function applyShape(el: HTMLElement, props: ShapeProps): void {
   if (stroke) {
     const width = Number.isFinite(stroke.lineWidth) ? Math.max(0, stroke.lineWidth) : 1;
     const color = stroke.color ? styleToCSS(stroke.color, 'paint').solid : 'currentColor';
-    s.border = `${width}px solid ${color}`;
+    // A dash pattern is drawn as CSS dashes (their lengths are the browser's).
+    s.border = `${width}px ${stroke.dash?.length ? 'dashed' : 'solid'} ${color}`;
     el.dataset['sbStroke'] = stroke.inset ? 'inset' : 'center';
   }
   // A fill with a drop shadow (`.shadow(.drop(…))` on the style).
@@ -3050,7 +3052,9 @@ function applyNavScreen(el: HTMLElement, props: NavScreenProps): void {
   el.dataset['sbDisplay'] = large ? 'large' : 'inline';
   const inlineTitle = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-title');
   const largeTitle = el.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-navbar-large-title');
-  if (inlineTitle) inlineTitle.textContent = large ? '' : title;
+  // A large title that scrolls away collapses into the inline one (shown
+  // with `data-sb-collapsed`, src/largeTitle.ts).
+  if (inlineTitle) inlineTitle.textContent = title;
   if (largeTitle) {
     largeTitle.textContent = large ? title : '';
     largeTitle.hidden = !large;
@@ -3309,11 +3313,15 @@ export function applyStyle(el: HTMLElement, style: Style): void {
   let opacity = style.opacity;
   if (style.disabled) {
     // `.disabled(true)`: dim the subtree and block input.
+    // The undimmed opacity stays available to styles.css, which draws a
+    // disabled bordered button gray instead of faded.
+    s.setProperty('--sb-undimmed-opacity', String(opacity ?? 1));
     opacity = (opacity ?? 1) * 0.4;
     s.pointerEvents = 'none';
     el.dataset['sbDisabled'] = '';
     el.setAttribute('aria-disabled', 'true');
   } else {
+    s.removeProperty('--sb-undimmed-opacity');
     el.removeAttribute('aria-disabled');
   }
   if (opacity != null) {
@@ -3354,8 +3362,11 @@ export function applyStyle(el: HTMLElement, style: Style): void {
 
   // Phase 6 (docs/phase6/layout-containers.md).
   if (style.tint) {
-    // `.tint`: gauges, switches and prominent buttons below read `--sb-tint`.
-    s.setProperty('--sb-tint', colorToCSS(style.tint));
+    // `.tint`: gauges, switches and prominent buttons below read `--sb-tint`;
+    // a bordered button fills with the tint, faintly (`--sb-tint-fill`).
+    const tint = colorToCSS(style.tint);
+    s.setProperty('--sb-tint', tint);
+    s.setProperty('--sb-tint-fill', `color-mix(in srgb, ${tint} var(--sb-tint-fill-amount), transparent)`);
   }
   if (style.position) {
     const { x, y } = style.position;

package/src/scanner.ts

@@ -115,7 +115,7 @@ function pillButton(label: string, primary: boolean): HTMLButtonElement {
   button.type = 'button';
   button.textContent = label;
   button.style.cssText = `padding:12px 28px;border:0;border-radius:999px;font:600 17px ${FONT};color:#fff;background:${
-    primary ? '#007aff' : 'rgba(255,255,255,.25)'
+    primary ? '#0088ff' : 'rgba(255,255,255,.25)'
   };backdrop-filter:blur(12px)`;
   return button;
 }