@swiftbrowser/web 0.26.1 → 0.26.3

package/src/layout/types.ts

@@ -5,6 +5,7 @@
  */
 
 import type { AssetCatalog } from '../assets';
+import type { Platform } from '../protocol';
 
 /**
  * A size proposal from a parent to a child. `null` means "whatever you want",
@@ -97,6 +98,8 @@ export interface LayoutEnvironment {
   dynamicTypeSize: DynamicTypeSize;
   devicePixelRatio: number;
   colorScheme: 'light' | 'dark';
+  /** The platform whose idiom the engine lays out for (docs/notes/macos.md); iOS when absent. */
+  platform?: Platform;
   /**
    * Phase 5: the app's asset catalog manifest, for the intrinsic size of
    * named images. Absent (or empty) when the app has no catalog; named

package/src/layout/typography.ts

@@ -11,6 +11,7 @@
  * leading (body 22): the distance between a paragraph's lines (`LEADINGS`).
  */
 
+import type { Platform } from '../protocol';
 import type { DynamicTypeSize, FontFamily, LayoutEnvironment, ResolvedFont } from './types';
 
 export type TextStyle =
@@ -63,6 +64,24 @@ export const TEXT_STYLE_SIZES: Record<TextStyle, readonly number[]> = {
   caption2: [11, 11, 11, 11, 13, 15, 17, 20, 24, 29, 34, 40],
 };
 
+/**
+ * The macOS text styles (HIG "Typography" > "macOS built-in text styles"),
+ * one size each: the Mac has no Dynamic Type. Body is 13.
+ */
+export const MAC_TEXT_STYLE_SIZES: Readonly<Record<TextStyle, number>> = {
+  largeTitle: 26,
+  title: 22,
+  title2: 17,
+  title3: 15,
+  headline: 13,
+  body: 13,
+  callout: 12,
+  subheadline: 11,
+  footnote: 10,
+  caption: 10,
+  caption2: 10,
+};
+
 /**
  * The HIG's leading for the standard (Large) point sizes: the distance
  * between the baselines of a paragraph's lines, which SwiftUI keeps (a
@@ -122,8 +141,9 @@ export function sizeCategoryIndex(size: DynamicTypeSize): number {
   return index < 0 ? LARGE_INDEX : index;
 }
 
-/** Point size of a text style at a Dynamic Type size category. */
-export function textStyleSize(style: TextStyle, size: DynamicTypeSize): number {
+/** Point size of a text style at a Dynamic Type size category (on the Mac, its one size). */
+export function textStyleSize(style: TextStyle, size: DynamicTypeSize, platform: Platform = 'ios'): number {
+  if (platform === 'macos') return MAC_TEXT_STYLE_SIZES[style];
   const row = TEXT_STYLE_SIZES[style];
   return row[sizeCategoryIndex(size)] ?? row[LARGE_INDEX] ?? 17;
 }
@@ -166,9 +186,9 @@ export function makeFont(
   return font;
 }
 
-/** Body text for the current `dynamicTypeSize` (17/20.33 at Large). */
+/** Body text for the current `dynamicTypeSize` (17/20.33 at Large; 13 on the Mac). */
 export function defaultFont(env: LayoutEnvironment): ResolvedFont {
-  return makeFont('system', textStyleSize('body', env.dynamicTypeSize), 400);
+  return makeFont('system', textStyleSize('body', env.dynamicTypeSize, env.platform), 400);
 }
 
 /**
@@ -199,13 +219,14 @@ export function resolveFont(
   let defaultWeight = 400;
   let isNewFont = false;
   if (isTextStyle(textStyle)) {
-    size = textStyleSize(textStyle, env.dynamicTypeSize);
+    size = textStyleSize(textStyle, env.dynamicTypeSize, env.platform);
     if (textStyle === 'headline') defaultWeight = 600;
     isNewFont = true;
   } else if (typeof fixedSize === 'number' && Number.isFinite(fixedSize) && fixedSize > 0) {
     size = fixedSize;
     const relativeTo = font['relativeTo'];
-    if (isTextStyle(relativeTo)) {
+    // The Mac has no Dynamic Type: a fixed size stays as given.
+    if (isTextStyle(relativeTo) && env.platform !== 'macos') {
       const base = TEXT_STYLE_SIZES[relativeTo][LARGE_INDEX] ?? 17;
       size = fixedSize * (textStyleSize(relativeTo, env.dynamicTypeSize) / base);
     }

package/src/layoutDom.ts

@@ -702,6 +702,8 @@ function applyChrome(
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.
     case 'stepper':
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-stepper-control'), chrome?.['control'], box);
+      // The Mac idiom: the arrows, up over down (styles.css).
+      setFlag(el, 'sbArrows', chrome?.['arrows'] ? '' : null);
       return;
     case 'slider': {
       // The `label` child is hidden (iOS draws none) and names the slider, as VoiceOver reads it.
@@ -715,6 +717,8 @@ function applyChrome(
         el.removeAttribute('aria-labelledby');
       }
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-track'), chrome?.['track'], box);
+      // The Mac idiom: the round knob (styles.css).
+      setFlag(el, 'sbKnob', chrome?.['knob'] ? '' : null);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-fill'), chrome?.['fill'], box);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-slider-thumb'), chrome?.['thumb'], box);
       return;
@@ -722,6 +726,8 @@ function applyChrome(
     case 'datepicker':
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-datepicker-date'), chrome?.['date'], box);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-datepicker-time'), chrome?.['time'], box);
+      // The Mac idiom: the date and time as bordered fields (styles.css).
+      setFlag(el, 'sbFields', chrome?.['fields'] ? '' : null);
       return;
     case 'alert': {
       // Phase 8: the card(s), the centered title / message lines and the
@@ -742,6 +748,8 @@ function applyChrome(
       if (message && texts?.['message']) setTextLayout(message, texts['message']);
       placeChrome(part('sb-alert-ok'), chrome?.['ok'], box);
       el.toggleAttribute('data-sb-header', Boolean(chrome?.['title'] || chrome?.['message']));
+      // The Mac idiom: the alert as a panel (styles.css).
+      setFlag(el, 'sbPanel', chrome?.['panel'] ? '' : null);
       const first = chrome?.['button0'];
       const second = chrome?.['button1'];
       el.dataset['sbLayout'] = first && second && first.y === second.y && !chrome?.['button2'] ? 'row' : 'stack';
@@ -750,7 +758,34 @@ function applyChrome(
       }
       return;
     }
+    case 'menu':
+      // The Mac idiom: a pull-down button around the label (styles.css).
+      setFlag(el, 'sbPulldown', chrome?.['pulldown'] ? '' : null);
+      return;
+    case 'button': {
+      // The Mac idiom: an automatic button the engine bordered (styles.css);
+      // in a list row the button is drawn at its own frame on the row
+      // (`inset`, the frame in the row's coordinates).
+      // The rect the border is drawn at: the engine's (a bar item's slot) or
+      // the button's own frame; `inset` when it is not the element's box.
+      const bordered = chrome?.['bordered'];
+      const rect = bordered ?? frame;
+      const inset = bordered !== undefined && (box.x !== rect.x || box.y !== rect.y || box.width !== rect.width || box.height !== rect.height);
+      setFlag(el, 'sbBordered', bordered ? (inset ? 'inset' : '') : null);
+      const vars: [string, string][] = inset
+        ? [['--sb-bordered-left', `${rect.x - box.x}px`], ['--sb-bordered-top', `${rect.y - box.y}px`], ['--sb-bordered-width', `${rect.width}px`], ['--sb-bordered-height', `${rect.height}px`]]
+        : [['--sb-bordered-left', ''], ['--sb-bordered-top', ''], ['--sb-bordered-width', ''], ['--sb-bordered-height', '']];
+      for (const [name, value] of vars) {
+        if (el.style.getPropertyValue(name) !== value) {
+          if (value) el.style.setProperty(name, value);
+          else el.style.removeProperty(name);
+        }
+      }
+      return;
+    }
     case 'toggle': {
+      // The Mac idiom: a checkbox at the switch's rect (styles.css).
+      setFlag(el, 'sbCheckbox', chrome?.['checkbox'] ? '' : null);
       const sw = el.querySelector<HTMLElement>(':scope > .sb-switch');
       const rect = chrome?.['switch'] ?? {
         x: frame.x + frame.width - SWITCH_SIZE.width,
@@ -761,10 +796,22 @@ function applyChrome(
       return;
     }
     case 'disclosuregroup': {
-      // The chevron at the label's trailing edge, the toggle over the label (the first child's frame).
-      const label = node.children[0] ? result.frames.get(node.children[0].id) : undefined;
       const chevron = el.querySelector<HTMLElement>(':scope > .sb-disclosure-chevron');
       const toggle = el.querySelector<HTMLElement>(':scope > .sb-disclosure-toggle');
+      // In a list the group is an outline (engine.ts `outlineRows`): its label
+      // and content are rows (styles.css draws them as the card's), the toggle
+      // lies over the label's row and the chevron sits at that row's trailing
+      // edge, centred as a link's is.
+      const outline = chrome?.['toggle'];
+      setFlag(el, 'sbOutline', outline ? '' : null);
+      if (outline) {
+        placeChrome(toggle, outline, box);
+        const rect = chrome?.['chevron'];
+        placeChrome(chevron, rect ? { x: rect.x + (rect.width - CHEVRON_SIZE) / 2, y: rect.y + (rect.height - CHEVRON_SIZE) / 2, width: CHEVRON_SIZE, height: CHEVRON_SIZE } : undefined, box);
+        return;
+      }
+      // The chevron at the label's trailing edge, the toggle over the label (the first child's frame).
+      const label = node.children[0] ? result.frames.get(node.children[0].id) : undefined;
       if (label) {
         placeChrome(chevron, { x: frame.x + frame.width - CHEVRON_SIZE - 2, y: label.y + (label.height - CHEVRON_SIZE) / 2, width: CHEVRON_SIZE, height: CHEVRON_SIZE }, box);
         placeChrome(toggle, { x: frame.x, y: label.y, width: frame.width, height: label.height }, box);
@@ -884,11 +931,17 @@ function applyChrome(
         bar.style.paddingTop = `${top}px`;
         bar.style.paddingBottom = `${bottom}px`;
       }
+      // The Mac idiom: a unified title bar (styles.css lays its title out leading-aligned).
+      setFlag(el, 'sbUnified', chrome?.['unified'] ? '' : null);
+      // The Mac idiom: a sheet's title bar (the title leading, 13 bold).
+      setFlag(el, 'sbSheetBar', chrome?.['sheetBar'] ? '' : null);
       syncBarGlass(result, node, el, chrome, frame, isNew, changes);
       // The `keyboard` toolbars' bar above the keyboard while a text input of the screen is focused.
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-keyboard-bar'), chrome?.['keyboardBar'], frame);
       // iOS 26 in a tab view: the search field under the title (styles.css).
       setFlag(el, 'sbSearchTop', chrome?.['searchTop'] ? '' : null);
+      // The Mac idiom: the search field in the title bar (styles.css).
+      setFlag(el, 'sbSearchBar', chrome?.['searchBar'] ? '' : null);
       const largeRect = chrome?.['largeTitle'];
       if (largeTitle) {
         if (largeRect) {
@@ -956,6 +1009,8 @@ function applyChrome(
       setFlag(el, 'sbFloating', chrome?.['floating'] ? '' : null);
       // iPadOS: in a regular width, a centered form sheet (styles.css).
       setFlag(el, 'sbForm', chrome?.['form'] ? '' : null);
+      // The Mac idiom: a bottom bar with the sheet's actions (styles.css).
+      setFlag(el, 'sbActions', chrome?.['actions'] ? '' : null);
       return;
     }
     case 'tabview': {
@@ -963,6 +1018,8 @@ function applyChrome(
       const barRect = chrome?.['bar'];
       if (!bar || !barRect) return;
       placeChrome(bar, barRect, box);
+      // The Mac idiom: the bar is a segmented control at the top of the content (styles.css).
+      setFlag(el, 'sbTabsTop', chrome?.['top'] ? '' : null);
       // Items are the 49px row at the top of the bar; the rest is the safe area.
       const items = Array.from(bar.children) as HTMLElement[];
       items.forEach((item, i) => placeChrome(item, chrome?.[`item${i}`], barRect));
@@ -1006,7 +1063,9 @@ function applyChrome(
       if (node.props['style'] === 'segmented') {
         // In a navigation bar item the control is the bar's glass capsule (engine `bar`).
         el.toggleAttribute('data-sb-bar', chrome?.['bar'] !== undefined);
-        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-segment-track'), frame, box);
+        // The Mac idiom: the label before the control (engine `label`, `track`).
+        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-segment-track'), chrome?.['track'] ?? frame, box);
+        placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-label'), chrome?.['label'], box);
         const segments = el.querySelectorAll<HTMLElement>(':scope > .sb-segment');
         segments.forEach((segment, i) => placeChrome(segment, chrome?.[`segment${i}`], box));
       } else if (node.props['style'] === 'inline') {
@@ -1017,6 +1076,8 @@ function applyChrome(
       } else {
         placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-label'), chrome?.['label'], box);
         placeChrome(el.querySelector<HTMLElement>(':scope > .sb-picker-value'), chrome?.['value'], box);
+        // The Mac idiom: the value in a pop-up button (styles.css).
+        setFlag(el, 'sbPopup', chrome?.['popup'] ? '' : null);
       }
       return;
     }

package/src/main.ts

@@ -2,7 +2,7 @@
 import { easingFor, springEasing, timingFor } from './animation';
 import type { BuildEndPayload, BuildErrorPayload, BuildStartPayload } from './devEvents';
 import { ChromeColor } from './chromeColor';
-import { installDeviceFrame } from './deviceFrame';
+import { frameFor, installDeviceFrame } from './deviceFrame';
 import { applyPageMode, decidePageMode, installViewportReadout, readViewportInsets, watchKeyboard, watchViewport, type PageMode } from './deviceMode';
 import { EMPTY_CATALOG, catalogPath, isAssetCatalog, type AssetCatalog } from './assets';
 import { createMockApp } from './mock';
@@ -202,7 +202,7 @@ function currentTypeSize(): DynamicTypeSize {
  */
 function applyTypeSize(size: DynamicTypeSize, persist: boolean): void {
   device.dataset['typeSize'] = size;
-  applyTypeSizeVariables(device, size);
+  applyTypeSizeVariables(device, size, renderer.platform);
   // The layout engine resolves text styles for this size and re-lays out.
   renderer.setEnvironment({ dynamicTypeSize: size });
   if (typeSizeSelect.value !== size) typeSizeSelect.value = size;
@@ -237,6 +237,8 @@ function currentSizeClass(): HorizontalSizeClass {
 }
 /** The size class last sent in an `environment` event (null before the first). */
 let sentSizeClass: HorizontalSizeClass | null = null;
+/** The platform last sent in an `environment` event (null before the first). */
+let sentPlatform: string | null = null;
 
 if (deviceMode) {
   // `#screen` fills the viewport (styles.css); the renderer re-reads its size
@@ -267,9 +269,12 @@ if (deviceMode) {
   // app in an iPhone, an iPad or no device; the renderer re-reads the
   // screen's size when it changes, and Swift hears a new size class.
   const sizeClassMayHaveChanged = (): void => {
-    if (sentSizeClass !== null && currentSizeClass() !== sentSizeClass) sendEnvironment();
+    // The Mac's text styles are its own: the device's variables follow the platform.
+    applyTypeSizeVariables(device, currentTypeSize(), renderer.platform);
+    if (sentSizeClass !== null && (currentSizeClass() !== sentSizeClass || renderer.platform !== sentPlatform)) sendEnvironment();
   };
-  installDeviceFrame(renderer, { onChange: sizeClassMayHaveChanged });
+  // An app built for macOS (docs/notes/macos.md) starts in a Mac window.
+  installDeviceFrame(renderer, { onChange: sizeClassMayHaveChanged, preferred: frameFor(registeredApp()?.platform) });
   watchViewport(sizeClassMayHaveChanged);
 }
 
@@ -303,12 +308,16 @@ function sendEnvironment(): void {
   // Phase 8: every environment event carries the scene phase.
   const scenePhase = currentScenePhase();
   sentScenePhase = scenePhase;
+  // The platform the renderer draws (docs/notes/macos.md).
+  const platform = renderer.platform;
+  sentPlatform = platform;
   dispatch({
     type: 'environment',
     colorScheme: currentTheme(),
     dynamicTypeSize: currentTypeSize(),
     horizontalSizeClass,
     scenePhase,
+    platform,
   });
 }
 

package/src/pathShape.ts

@@ -3,7 +3,9 @@
  * `path(in:)`. The Swift side sends the path as SVG path data for the size the
  * element reported (`reportsSize`), so the element holds an `<svg>` whose
  * view box is that size, stretched to the element's box until the path for a
- * new size arrives (docs/ops-protocol.md, "Custom shapes").
+ * new size arrives (docs/ops-protocol.md, "Custom shapes"). A path for any
+ * size (`affinePath`) is drawn at the size the element is laid out at, which
+ * the renderer hands `layOutAffinePath` after each layout.
  *
  * An update whose shape's `animatableData` changed carries `frames`: the
  * paths at fractions of the change. When the commit animates the element,
@@ -12,7 +14,7 @@
  * path; otherwise the final path is drawn at once.
  */
 
-import type { Animation, ShapeProps } from './protocol';
+import type { AffinePath, Animation, ShapeProps } from './protocol';
 import { paintFor, type IdSource } from './chartDom';
 import { easedProgress } from './animation';
 
@@ -32,6 +34,9 @@ interface PathState {
   frames: PathFrames | null;
   /** The running playback's frame request. */
   request: number | null;
+  /** The props last drawn, and the size an `affinePath` was last laid out at (src/renderer.ts). */
+  props: ShapeProps | null;
+  laidOut: { width: number; height: number } | null;
 }
 
 const STATE = new WeakMap<HTMLElement, PathState>();
@@ -48,13 +53,17 @@ export function applyPathShape(el: HTMLElement, props: ShapeProps): void {
     const path = doc.createElementNS(SVG_NS, 'path');
     svg.append(doc.createElementNS(SVG_NS, 'defs'), path);
     el.replaceChildren(svg);
-    state = { svg, path, final: '', frames: null, request: null };
+    state = { svg, path, final: '', frames: null, request: null, props: null, laidOut: null };
     STATE.set(el, state);
   }
   stop(state);
+  state.props = props;
   const { svg, path } = state;
-  const width = Number(props.size?.width) || 0;
-  const height = Number(props.size?.height) || 0;
+  // A path for any size is drawn at the size the element was laid out at (none before its first layout).
+  const affine = props.affinePath ?? null;
+  const size = affine ? state.laidOut : props.size;
+  const width = Number(size?.width) || 0;
+  const height = Number(size?.height) || 0;
   if (width > 0 && height > 0) svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
   else svg.removeAttribute('viewBox');
   svg.setAttribute('preserveAspectRatio', 'none');
@@ -81,11 +90,37 @@ export function applyPathShape(el: HTMLElement, props: ShapeProps): void {
   // The stroke is not scaled with a stretched view box.
   path.setAttribute('vector-effect', 'non-scaling-stroke');
 
-  state.final = typeof props.path === 'string' ? props.path : '';
-  state.frames = validFrames(props.frames);
+  state.final = affine ? (width > 0 && height > 0 ? affinePathData(affine, width, height) : '') : typeof props.path === 'string' ? props.path : '';
+  state.frames = affine ? null : validFrames(props.frames);
   path.setAttribute('d', state.final);
 }
 
+/**
+ * Draws `el`'s `affinePath` (if it has one) at the `width` by `height` it was
+ * laid out at, when that is new: the renderer calls it after each layout.
+ */
+export function layOutAffinePath(el: HTMLElement, width: number, height: number): void {
+  const state = STATE.get(el);
+  if (!state?.props?.affinePath) return;
+  if (state.laidOut && state.laidOut.width === width && state.laidOut.height === height) return;
+  state.laidOut = { width, height };
+  applyPathShape(el, state.props);
+}
+
+/** A number in SVG path data, as `Path` (@swiftbrowser/react) writes them. */
+const NUMBER = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/g;
+
+/** `affine`'s SVG path data for a `width` by `height` rectangle, its points rounded to hundredths as `Path` rounds them. */
+export function affinePathData(affine: AffinePath, width: number, height: number): string {
+  let i = 0;
+  return affine.path.replace(NUMBER, (number) => {
+    const value = Number(number) + width * (affine.width[i] ?? 0) + height * (affine.height[i] ?? 0);
+    i += 1;
+    const rounded = Math.round(value * 100) / 100;
+    return Object.is(rounded, -0) ? '0' : String(rounded);
+  });
+}
+
 /** Whether `el` is a path shape whose last update carried frames. */
 export function hasPathFrames(el: HTMLElement): boolean {
   return STATE.get(el)?.frames != null;

package/src/protocol.ts

@@ -728,6 +728,13 @@ export interface Stroke {
   dash?: number[];
   dashPhase?: number;
 }
+/** A path for any size: `ShapeProps.affinePath`. */
+export interface AffinePath {
+  path: string;
+  width: number[];
+  height: number[];
+}
+
 /** `fill: null` means the current foreground color; fills its proposal. */
 export interface ShapeProps {
   shape: ShapeKind;
@@ -748,6 +755,14 @@ export interface ShapeProps {
    */
   path?: string;
   size?: { width: number; height: number };
+  /**
+   * A custom shape's path for any size (`path` and `size` unused): SVG path
+   * data whose numbers are their values for an empty rectangle, the `i`th
+   * growing `width[i]` a point of the element's width and `height[i]` a
+   * point of its height. Drawn at the element's laid-out size, so from its
+   * first layout, with no size reported.
+   */
+  affinePath?: AffinePath;
   /** `FillStyle(eoFill: true)`: overlapping parts of the path cancel out. */
   fillRule?: 'evenodd';
   /** The element reports its laid-out size (a custom shape draws its path for it). */
@@ -1572,7 +1587,21 @@ export type RendererEvent =
   // The page's undo and redo keys, for the app's undo manager (src/undo.ts)
   | UndoEvent
   // A registered view's own answer (src/viewRegistry.ts)
-  | RegisteredEvent;
+  | RegisteredEvent
+  // A stack's path set whole by the tree that hosts this one (@swiftbrowser/react RemoteTree)
+  | SetPathEvent;
+
+/**
+ * A `navstack`'s path set whole: the values its destinations build the
+ * screens from, as its pushed `navscreen`s report them (`route`). Sent by a
+ * host drawing this tree (`RemoteTree`), to reopen the screens a link named;
+ * never by a renderer.
+ */
+export interface SetPathEvent {
+  type: 'setpath';
+  id: ElementId;
+  path: unknown[];
+}
 
 /** What a registered view sent (`context.send(value)`), for the element's `onEvent`. */
 export interface RegisteredEvent {
@@ -1753,6 +1782,17 @@ export function horizontalSizeClassFor(width: number): HorizontalSizeClass {
   return Number.isFinite(width) && width >= REGULAR_WIDTH_MIN ? 'regular' : 'compact';
 }
 
+/**
+ * The platform the app is drawn as (docs/notes/macos.md): `ios`, the
+ * default, or `macos`. The renderer draws the platform's idiom and reports
+ * it in the first `environment` event; it never changes in a session.
+ */
+export type Platform = 'ios' | 'macos';
+
+export interface EnvironmentEvent {
+  platform?: Platform;
+}
+
 // ---------------------------------------------------------------------------
 // Phase 7: charts (docs/ops-protocol.md, "Phase 7"). Swift turns data into
 // unit coordinates (0...1 of the plot rectangle, y top → bottom); the renderer

package/src/renderer.ts

@@ -148,6 +148,7 @@ import {
   type CanvasProps,
   type Color,
   type LazySpacerProps,
+  type Platform,
 } from './protocol';
 import {
   combineDateSeconds,
@@ -160,7 +161,7 @@ import {
   timeInputValue,
 } from './layout';
 import { filledSymbolName, renderSymbol } from './symbols';
-import { applyPathShape, hasPathFrames, playPathFrames } from './pathShape';
+import { applyPathShape, hasPathFrames, layOutAffinePath, playPathFrames } from './pathShape';
 import { VideoEvents, applyVideo, stopVideos } from './video';
 import { loadableURL } from './hostRequests';
 import { PinchController } from './pinch';
@@ -361,6 +362,8 @@ const DEFAULT_SAFE_AREA = { top: 59, leading: 0, bottom: 34, trailing: 0 };
 export interface RendererEnvironment {
   dynamicTypeSize: DynamicTypeSize;
   colorScheme: ColorScheme;
+  /** The platform drawn (docs/notes/macos.md): iOS unless the page says macOS. */
+  platform: Platform;
 }
 
 export class Renderer {
@@ -473,7 +476,7 @@ export class Renderer {
    */
   private engine: LayoutPass | null = null;
   private engineEnvKey = '';
-  private environment: RendererEnvironment = { dynamicTypeSize: 'large', colorScheme: 'light' };
+  private environment: RendererEnvironment = { dynamicTypeSize: 'large', colorScheme: 'light', platform: 'ios' };
   /** Phase 5: the app's asset catalog manifest (empty until `setAssetCatalog`). */
   private assets: AssetCatalog = EMPTY_CATALOG;
   /** The `<style>` holding the catalog colors as custom properties (see `setAssetCatalog`). */
@@ -494,6 +497,8 @@ export class Renderer {
   private readonly reportedGeometry = new Map<ElementId, { width: number; height: number; key: string }>();
   /** The elements whose size is reported (`geometry`, or `reportsSize` props): what `collectGeometry` visits. */
   private readonly geometryReporters = new Set<ElementId>();
+  /** The custom shapes with a path for any size (`affinePath`), drawn at their size after each layout. */
+  private readonly affinePaths = new Set<ElementId>();
   /** `geometry` and `layout` events collected by layout passes, sent once the ops are applied. */
   private pendingGeometry: (GeometryEvent | LayoutEvent | ScrollGeometryEvent)[] = [];
   /** Phase 6: dedupes `layout` events per element (src/layoutEvents.ts). */
@@ -1451,6 +1456,7 @@ export class Renderer {
     this.closeMenu();
     this.reportedGeometry.clear();
     this.geometryReporters.clear();
+    this.affinePaths.clear();
     this.layoutReporter.clear();
     this.pendingGeometry = [];
     refreshSheets(this.root);
@@ -1461,18 +1467,26 @@ export class Renderer {
   // -------------------------------------------------------------------------
 
   /**
-   * Set the device environment (Dynamic Type size, color scheme) and re-lay
-   * the tree out. The page calls this on boot and whenever a control changes.
+   * Set the device environment (Dynamic Type size, color scheme, platform)
+   * and re-lay the tree out. The page calls this on boot and whenever a
+   * control changes. The platform is also on the document
+   * (`html[data-sb-platform]`), which the stylesheet themes by.
    */
   setEnvironment(environment: Partial<RendererEnvironment>): void {
     const next = { ...this.environment, ...environment };
-    if (next.dynamicTypeSize === this.environment.dynamicTypeSize && next.colorScheme === this.environment.colorScheme) {
+    if (next.dynamicTypeSize === this.environment.dynamicTypeSize && next.colorScheme === this.environment.colorScheme && next.platform === this.environment.platform) {
       return;
     }
     this.environment = next;
+    this.root.ownerDocument.documentElement.dataset['sbPlatform'] = next.platform;
     if (this.commits > 0) this.layout();
   }
 
+  /** The platform drawn (`setEnvironment`). */
+  get platform(): Platform {
+    return this.environment.platform;
+  }
+
   /**
    * Phase 5: give the renderer the app's asset catalog manifest (src/assets.ts).
    * Named images take their intrinsic size and `src` from it, and every
@@ -1586,6 +1600,7 @@ export class Renderer {
       dynamicTypeSize: this.environment.dynamicTypeSize,
       devicePixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
       colorScheme: this.environment.colorScheme,
+      platform: this.environment.platform,
       assets: this.assets,
       ...(this.contentHeight ? { contentHeight: true } : {}),
       ...(this.keyboard > 0 ? { keyboard: this.keyboard } : {}),
@@ -1786,6 +1801,11 @@ export class Renderer {
     }
     drawScrollTransitions();
     drawPinnedViews();
+    for (const id of this.affinePaths) {
+      const frame = result.frames.get(id);
+      const el = this.elements.get(id);
+      if (frame && el) layOutAffinePath(el, frame.width, frame.height);
+    }
     this.collectGeometry(result);
     this.collectScrollGeometry(result);
     this.collectLayouts(result);
@@ -2119,6 +2139,7 @@ export class Renderer {
     this.elements.set(id, el);
     this.nodes.set(id, { id, kind, props: asRecord(props), children: [] });
     if (kind === 'geometry' || (props as { reportsSize?: unknown }).reportsSize === true) this.geometryReporters.add(id);
+    if ((props as { affinePath?: unknown }).affinePath) this.affinePaths.add(id);
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
     this.noteVisibility(id, kind, props);
@@ -2529,6 +2550,8 @@ export class Renderer {
       } else {
         this.geometryReporters.delete(id);
       }
+      if (next['affinePath']) this.affinePaths.add(id);
+      else this.affinePaths.delete(id);
       node.props = next;
       // Phase 9: the next layout re-measures this subtree and its ancestors;
       // a screen's title also feeds the next screen's back label.
@@ -2814,6 +2837,7 @@ export class Renderer {
     this.scrollGeometry.forget(id);
     this.offsetSerials.delete(id);
     this.geometryReporters.delete(id);
+    this.affinePaths.delete(id);
     this.layoutReporter.forget(id);
     const node = this.nodes.get(id);
     const parentId = this.parents.get(id);
@@ -4831,8 +4855,13 @@ function applyPicker(el: HTMLElement, props: PickerProps): void {
     el.removeAttribute('aria-haspopup');
     el.removeAttribute('aria-expanded');
     // The gray track sits at the control's frame (which, in a list row, is
-    // narrower than the row box the element occupies).
+    // narrower than the row box the element occupies); the label shows only
+    // where the engine places it (the Mac idiom).
     el.append(div('sb-segment-track'));
+    const segmentedLabel = span('sb-picker-label');
+    segmentedLabel.textContent = label;
+    segmentedLabel.hidden = true;
+    el.append(segmentedLabel);
     options.forEach((option, index) => {
       const segment = document.createElement('button');
       segment.type = 'button';