@swiftbrowser/web 0.9.5 → 0.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/hostInset.ts

@@ -0,0 +1,26 @@
+/**
+ * A `host` that is a list row is drawn in the row's box (the card's width,
+ * the row's height with its padding), as every row is, while the engine
+ * measured and placed its content in the row's content frame inside it.
+ * The content element goes back into that frame, as a text row's text is
+ * padded into its own (layoutDom.ts), so DOM content that fills its box
+ * (`sizing: "fill"`, `height: 100%`) fills what it was measured for and
+ * not the row's padding too.
+ */
+
+import type { Rect } from './layout';
+
+export interface HostContentInset {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+/** Where the content sits inside the element's box; null when the box is the frame (nothing to set). */
+export function hostContentInset(box: Rect, frame: Rect): HostContentInset | null {
+  const left = frame.x - box.x;
+  const top = frame.y - box.y;
+  if (left === 0 && top === 0 && frame.width === box.width && frame.height === box.height) return null;
+  return { left, top, width: frame.width, height: frame.height };
+}

package/src/layout/controls.ts

@@ -1,7 +1,8 @@
 /**
  * Phase 8 control helpers shared by the layout engine and the renderer
  * (docs/ops-protocol.md, "Phase 8: interaction", Controls). Pure and DOM-free:
- * slider value snapping and the US-English UTC formatting of a `datepicker`.
+ * slider value snapping and the US-English formatting of a `datepicker` in
+ * its time zone.
  */
 
 // Slider
@@ -45,72 +46,124 @@ export function sliderFraction(value: number, min: number, max: number): number
 
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
-function dateOf(seconds: number): Date {
-  return new Date((Number.isFinite(seconds) ? seconds : 0) * 1000);
-}
-
 function pad2(n: number): string {
   return n < 10 ? `0${n}` : String(n);
 }
 
-/** "Oct 3, 2026": the UTC date of `seconds` in the US English abbreviated form. */
-export function formatPickerDate(seconds: number): string {
-  const d = dateOf(seconds);
-  return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`;
+/** The wall clock of an instant in a zone. */
+interface WallClock {
+  year: number;
+  month: number; // 0-based
+  day: number;
+  hours: number;
+  minutes: number;
+}
+
+/** The viewer's IANA zone, or UTC when the runtime cannot say. */
+function localZone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+  } catch {
+    return 'UTC';
+  }
+}
+
+const formatters = new Map<string, Intl.DateTimeFormat>();
+
+/** A formatter giving an instant's wall clock in `zone`; an unknown zone reads as UTC. */
+function formatterFor(zone: string): Intl.DateTimeFormat {
+  let format = formatters.get(zone);
+  if (!format) {
+    const options: Intl.DateTimeFormatOptions = { hourCycle: 'h23', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
+    try {
+      format = new Intl.DateTimeFormat('en-US', { ...options, timeZone: zone });
+    } catch {
+      format = new Intl.DateTimeFormat('en-US', { ...options, timeZone: 'UTC' });
+    }
+    formatters.set(zone, format);
+  }
+  return format;
+}
+
+/** The zone a picker shows and edits in: the one it names, else the viewer's. */
+function zoneOf(timeZone: string | undefined): string {
+  return timeZone || localZone();
+}
+
+/** The wall clock of `seconds` (since 1970) in `zone`. */
+export function wallClock(seconds: number, timeZone?: string): WallClock {
+  const ms = (Number.isFinite(seconds) ? seconds : 0) * 1000;
+  const parts: Record<string, number> = {};
+  for (const part of formatterFor(zoneOf(timeZone)).formatToParts(new Date(ms))) {
+    if (part.type !== 'literal') parts[part.type] = Number(part.value);
+  }
+  // `h23` still reads "24" for midnight in some engines.
+  return { year: parts['year'] ?? 1970, month: (parts['month'] ?? 1) - 1, day: parts['day'] ?? 1, hours: (parts['hour'] ?? 0) % 24, minutes: parts['minute'] ?? 0 };
+}
+
+/** The instant (seconds since 1970) at a wall clock in `zone`; in a gap (a clock skipped forward) the later reading, in an overlap the earlier. */
+export function instantOf(clock: WallClock, timeZone?: string): number {
+  const asUTC = (c: WallClock): number => Date.UTC(c.year, c.month, c.day, c.hours, c.minutes, 0) / 1000;
+  const wanted = asUTC(clock);
+  // The zone's offset at a nearby instant, then checked at the answer itself (a DST change may sit between).
+  let guess = wanted - (asUTC(wallClock(wanted, timeZone)) - wanted);
+  const again = wanted - (asUTC(wallClock(guess, timeZone)) - guess);
+  if (again !== guess && asUTC(wallClock(again, timeZone)) === wanted) guess = again;
+  return guess;
+}
+
+/** "Oct 3, 2026": the date of `seconds` in `timeZone` (the viewer's when absent), in the US English abbreviated form. */
+export function formatPickerDate(seconds: number, timeZone?: string): string {
+  const c = wallClock(seconds, timeZone);
+  return `${MONTHS[c.month]} ${c.day}, ${c.year}`;
 }
 
-/** "7:00 AM": the UTC time of `seconds` in the US English 12-hour form. */
-export function formatPickerTime(seconds: number): string {
-  const d = dateOf(seconds);
-  const hours = d.getUTCHours();
-  const period = hours < 12 ? 'AM' : 'PM';
-  const hour12 = hours % 12 === 0 ? 12 : hours % 12;
-  return `${hour12}:${pad2(d.getUTCMinutes())} ${period}`;
+/** "7:00 AM": the time of `seconds` in `timeZone`, in the US English 12-hour form. */
+export function formatPickerTime(seconds: number, timeZone?: string): string {
+  const c = wallClock(seconds, timeZone);
+  const period = c.hours < 12 ? 'AM' : 'PM';
+  const hour12 = c.hours % 12 === 0 ? 12 : c.hours % 12;
+  return `${hour12}:${pad2(c.minutes)} ${period}`;
 }
 
-/** `yyyy-mm-dd` for a native `<input type="date">`, in UTC. */
-export function dateInputValue(seconds: number): string {
-  const d = dateOf(seconds);
-  return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())}`;
+/** `yyyy-mm-dd` for a native `<input type="date">`, in `timeZone`. */
+export function dateInputValue(seconds: number, timeZone?: string): string {
+  const c = wallClock(seconds, timeZone);
+  return `${c.year}-${pad2(c.month + 1)}-${pad2(c.day)}`;
 }
 
-/** `HH:MM` for a native `<input type="time">`, in UTC. */
-export function timeInputValue(seconds: number): string {
-  const d = dateOf(seconds);
-  return `${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}`;
+/** `HH:MM` for a native `<input type="time">`, in `timeZone`. */
+export function timeInputValue(seconds: number, timeZone?: string): string {
+  const c = wallClock(seconds, timeZone);
+  return `${pad2(c.hours)}:${pad2(c.minutes)}`;
 }
 
 /**
- * Seconds (UTC) after a native input changed: the `date` (`yyyy-mm-dd`)
- * replaces the day and keeps the time of day of `seconds`; the `time`
- * (`HH:MM`) replaces the time of day and keeps the day. Seconds within the
- * minute are dropped, like the pickers' minute granularity. An unparsable
- * value leaves `seconds` as it was.
+ * Seconds after a native input changed, read in `timeZone`: the `date`
+ * (`yyyy-mm-dd`) replaces the day and keeps the time of day of `seconds`;
+ * the `time` (`HH:MM`) replaces the time of day and keeps the day. Seconds
+ * within the minute are dropped, like the pickers' minute granularity. An
+ * unparsable value leaves `seconds` as it was.
  */
-export function combineDateSeconds(seconds: number, change: { date?: string; time?: string }): number {
-  const d = dateOf(seconds);
-  let year = d.getUTCFullYear();
-  let month = d.getUTCMonth();
-  let day = d.getUTCDate();
-  let hours = d.getUTCHours();
-  let minutes = d.getUTCMinutes();
+export function combineDateSeconds(seconds: number, change: { date?: string; time?: string }, timeZone?: string): number {
+  const clock = wallClock(seconds, timeZone);
   if (change.date !== undefined) {
     const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(change.date);
     if (!m) return seconds;
-    year = Number(m[1]);
-    month = Number(m[2]) - 1;
-    day = Number(m[3]);
+    clock.year = Number(m[1]);
+    clock.month = Number(m[2]) - 1;
+    clock.day = Number(m[3]);
   }
   if (change.time !== undefined) {
     const m = /^(\d{2}):(\d{2})/.exec(change.time);
     if (!m) return seconds;
-    hours = Number(m[1]);
-    minutes = Number(m[2]);
+    clock.hours = Number(m[1]);
+    clock.minutes = Number(m[2]);
   }
-  return Math.floor(Date.UTC(year, month, day, hours, minutes, 0) / 1000);
+  return instantOf(clock, timeZone);
 }
 
-/** True when two instants fall on the same UTC day (a time input's `min`/`max` only apply then). */
-export function sameUTCDay(a: number, b: number): boolean {
-  return dateInputValue(a) === dateInputValue(b);
+/** True when two instants fall on the same day in `timeZone` (a time input's `min`/`max` only apply then). */
+export function sameDay(a: number, b: number, timeZone?: string): boolean {
+  return dateInputValue(a, timeZone) === dateInputValue(b, timeZone);
 }

package/src/layout/engine.ts

@@ -4222,8 +4222,9 @@ export class LayoutPass {
       const cctx = this.childContext(node, ctx);
       const seconds = num(node.props['seconds']) ?? 0;
       const components = str(node.props['components']) ?? 'dateAndTime';
-      const dateText = components === 'hourAndMinute' ? null : formatPickerDate(seconds);
-      const timeText = components === 'date' ? null : formatPickerTime(seconds);
+      const timeZone = str(node.props['timeZone']) ?? undefined;
+      const dateText = components === 'hourAndMinute' ? null : formatPickerDate(seconds, timeZone);
+      const timeText = components === 'date' ? null : formatPickerTime(seconds, timeZone);
       const capsule = (text: string | null): number =>
         text === null ? 0 : this.measurer.measureWidth(text, ctx.font) + 2 * DATEPICKER_CAPSULE_PAD_H;
       const dateWidth = capsule(dateText);

package/src/layout/index.ts

@@ -88,7 +88,7 @@ export {
   dateInputValue,
   formatPickerDate,
   formatPickerTime,
-  sameUTCDay,
+  sameDay,
   sliderFraction,
   snapSliderValue,
   timeInputValue,

package/src/layoutDom.ts

@@ -34,6 +34,7 @@
  */
 
 import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, TextLayout } from './layout';
+import { hostContentInset } from './hostInset';
 import { listRowBackgroundOf } from './layout';
 import { styleToCSS } from './styles';
 import type { ShapeStyle } from './protocol';
@@ -488,6 +489,26 @@ function setFlag(el: HTMLElement, key: string, value: string | null): void {
   }
 }
 
+/**
+ * A host's content element goes back into the engine's frame when the host
+ * is drawn in a bigger box (a list row's): src/hostInset.ts. In its own
+ * frame the stylesheet's `width: 100%` (and `height: 100%` for `fill`) hold.
+ */
+function positionHostContent(el: HTMLElement, box: Rect, frame: Rect): void {
+  const content = el.querySelector<HTMLElement>(':scope > .sb-host-content');
+  if (!content) return;
+  const inset = hostContentInset(box, frame);
+  const s = content.style;
+  const left = inset ? `${inset.left}px` : '';
+  const top = inset ? `${inset.top}px` : '';
+  const width = inset ? `${inset.width}px` : '';
+  const height = inset ? `${inset.height}px` : '';
+  if (s.left !== left) s.left = left;
+  if (s.top !== top) s.top = top;
+  if (s.width !== width) s.width = width;
+  if (s.height !== height) s.height = height;
+}
+
 /**
  * For leaf rows: pad the content frame back into place inside the row box.
  * `shift` moves vertically centered content (a one-line field's text) down
@@ -617,6 +638,9 @@ function applyChrome(
       padIntoFrame(el, box, frame);
       return;
     }
+    case 'host':
+      positionHostContent(el, box, frame);
+      return;
     case 'image': {
       const font = result.fonts.get(node.id);
       if (font) {

package/src/protocol.ts

@@ -2035,6 +2035,8 @@ export interface DatePickerProps {
   components: DatePickerComponents;
   min: number | null;
   max: number | null;
+  /** The IANA time zone the date and time are shown and edited in (`\\.timeZone`); the viewer's when absent. */
+  timeZone?: string;
   /** `.labelsHidden()`: the label child is not laid out. */
   labelsHidden?: boolean;
 }
@@ -2058,7 +2060,7 @@ export interface SlideEvent {
   id: ElementId;
   value: number;
 }
-/** A `datepicker` changed: seconds since 1970, UTC. */
+/** A `datepicker` changed: seconds since 1970 (an instant; the zone only shaped the reading). */
 export interface DateEvent {
   type: 'date';
   id: ElementId;

package/src/renderer.ts

@@ -140,7 +140,7 @@ import {
   dateInputValue,
   formatPickerDate,
   formatPickerTime,
-  sameUTCDay,
+  sameDay,
   sliderFraction,
   snapSliderValue,
   timeInputValue,
@@ -742,7 +742,7 @@ export class Renderer {
     const id = Number(picker?.dataset[ID_ATTR]);
     if (!picker || !Number.isInteger(id) || input.value === '') return;
     const seconds = Number(picker.dataset['sbSeconds']) || 0;
-    const value = combineDateSeconds(seconds, input.type === 'date' ? { date: input.value } : { time: input.value });
+    const value = combineDateSeconds(seconds, input.type === 'date' ? { date: input.value } : { time: input.value }, picker.dataset['sbTimeZone'] || undefined);
     if (value === seconds) return;
     // Show the new value right away; Swift's `update` confirms (or reverts) it.
     picker.dataset['sbSeconds'] = String(value);
@@ -2957,14 +2957,15 @@ function applyDatePicker(el: HTMLElement, props: DatePickerProps): void {
   el.dataset['sbComponents'] = components;
   el.dataset['sbMin'] = props.min != null && Number.isFinite(props.min) ? String(props.min) : '';
   el.dataset['sbMax'] = props.max != null && Number.isFinite(props.max) ? String(props.max) : '';
+  el.dataset['sbTimeZone'] = typeof props.timeZone === 'string' ? props.timeZone : '';
   if (props.labelsHidden === true) el.dataset['sbLabelsHidden'] = '';
   setDatePickerValue(el, seconds);
 }
 
 /**
- * Show `seconds` in the capsules (US English, UTC) and in the native inputs;
- * `min` / `max` (from the element's data) bound the date input, and the time
- * input only when they fall on the shown day.
+ * Show `seconds` in the capsules (US English, in the picker's zone) and in
+ * the native inputs; `min` / `max` (from the element's data) bound the date
+ * input, and the time input only when they fall on the shown day.
  */
 function setDatePickerValue(el: HTMLElement, seconds: number): void {
   const bound = (key: 'sbMin' | 'sbMax'): number | null => {
@@ -2973,19 +2974,20 @@ function setDatePickerValue(el: HTMLElement, seconds: number): void {
   };
   const min = bound('sbMin');
   const max = bound('sbMax');
+  const zone = el.dataset['sbTimeZone'] || undefined;
   for (const type of ['date', 'time'] as const) {
     const capsule = el.querySelector<HTMLElement>(`:scope > .sb-datepicker-${type}`);
     if (!capsule) continue;
     const text = capsule.querySelector<HTMLElement>(':scope > .sb-datepicker-text');
     const input = capsule.querySelector<HTMLInputElement>(':scope > .sb-datepicker-input');
-    const label = type === 'date' ? formatPickerDate(seconds) : formatPickerTime(seconds);
+    const label = type === 'date' ? formatPickerDate(seconds, zone) : formatPickerTime(seconds, zone);
     if (text && text.textContent !== label) text.textContent = label;
     if (!input) continue;
-    const format = type === 'date' ? dateInputValue : timeInputValue;
+    const format = (s: number): string => (type === 'date' ? dateInputValue(s, zone) : timeInputValue(s, zone));
     const value = format(seconds);
     if (input.value !== value) input.value = value;
     const limit = (b: number | null): string =>
-      b !== null && Number.isFinite(b) && (type === 'date' || sameUTCDay(b, seconds)) ? format(b) : '';
+      b !== null && Number.isFinite(b) && (type === 'date' || sameDay(b, seconds, zone)) ? format(b) : '';
     input.min = limit(min);
     input.max = limit(max);
   }