@swiftbrowser/web 0.18.3 → 0.21.0

package/src/pinnedViews.ts

@@ -10,6 +10,12 @@
  * scroll event each header is moved by a transform along the axis. The
  * laid-out positions are left alone (offsets, not client rects), so the
  * transform never feeds back into where the header is reckoned to be.
+ *
+ * Where the browser has scroll-driven animations, a header is instead moved
+ * by one (styles.css `sb-pinned`) along its scroll view's timeline, from the
+ * scroll offset where it starts to pin to the one where its section's end
+ * stops it. The browser then moves it in step with the scroll itself, where a
+ * scroll event, a frame late on iOS, would leave it jittering.
  */
 
 import type { PinnedView } from './protocol';
@@ -43,6 +49,9 @@ export function pinnedFooterOffset(viewEnd: number, footer: Span, sectionStart:
 
 const registered = new Map<HTMLElement, Set<PinnedView>>();
 
+/** Whether headers pin by a scroll-driven animation (styles.css), not by script on each scroll event. */
+const scrollDriven = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('animation-timeline', '--sb-pin-y');
+
 /** Called by the renderer for every stack and grid: registers, updates or forgets its pinned views. */
 export function setPinnedViews(el: HTMLElement, pinned: PinnedView[] | undefined): void {
   const views = new Set<PinnedView>(Array.isArray(pinned) ? pinned.filter((view) => view === 'sectionHeaders' || view === 'sectionFooters') : []);
@@ -55,6 +64,7 @@ export function setPinnedViews(el: HTMLElement, pinned: PinnedView[] | undefined
           if (view) {
             view.style.transform = '';
             view.style.zIndex = '';
+            unpin(view);
           }
         }
       }
@@ -98,7 +108,8 @@ function draw(stack: HTMLElement, views: Set<PinnedView>): void {
       if (header) {
         const at = layoutOrigin(header, scroller);
         const span: Span = { start: horizontal ? (at?.x ?? sectionStart) : (at?.y ?? sectionStart), length: horizontal ? header.offsetWidth : header.offsetHeight };
-        move(header, horizontal, pinnedHeaderOffset(viewStart, span, sectionEnd));
+        if (scrollDriven) pin(header, horizontal, span.start - (horizontal ? 0 : topInset(scroller)), pinnedHeaderOffset(Infinity, span, sectionEnd));
+        else move(header, horizontal, pinnedHeaderOffset(viewStart, span, sectionEnd));
       }
     }
     if (views.has('sectionFooters')) {
@@ -119,6 +130,32 @@ function move(view: HTMLElement, horizontal: boolean, offset: number): void {
   view.style.zIndex = '1';
 }
 
+/**
+ * Pins a header by a scroll-driven animation: from the scroll offset `from`, where its view's start reaches it, it
+ * moves with the scroll for `room` and stays there. The scroll view names its timelines (styles.css).
+ */
+function pin(view: HTMLElement, horizontal: boolean, from: number, room: number): void {
+  view.style.transform = '';
+  view.style.zIndex = '1';
+  if (room <= 0) {
+    unpin(view);
+    return;
+  }
+  const start = Math.round(from * 100) / 100;
+  const end = Math.round((from + room) * 100) / 100;
+  view.style.animation = 'sb-pinned linear both';
+  view.style.setProperty('animation-timeline', horizontal ? '--sb-pin-x' : '--sb-pin-y');
+  view.style.setProperty('animation-range', `${start}px ${end}px`);
+  view.style.setProperty('--sb-pinned-to', horizontal ? `${room}px 0` : `0 ${room}px`);
+}
+
+function unpin(view: HTMLElement): void {
+  view.style.animation = '';
+  view.style.removeProperty('animation-timeline');
+  view.style.removeProperty('animation-range');
+  view.style.removeProperty('--sb-pinned-to');
+}
+
 /** Moves every pinned view to its place: after a layout, and on every scroll event. */
 export function drawPinnedViews(): void {
   for (const [stack, views] of registered) {

package/src/protocol.ts

@@ -359,6 +359,8 @@ export interface Style {
   animationToken?: number;
   /** This box is a `Label`'s icon: a list row tints it (its title keeps the row's color). */
   labelIcon?: boolean;
+  /** `.textSelection(.enabled)`: the text below can be selected (iOS shows none selectable otherwise). */
+  textSelection?: boolean;
   /** How this subtree appears and disappears inside an animated commit. */
   transition?: Transition;
   // Phase 5
@@ -376,6 +378,11 @@ export interface Style {
   /** Unit point the scale grows from (default 0.5/0.5). */
   scaleAnchor?: UnitPoint;
   shadow?: Shadow;
+  /**
+   * `.compositingGroup()`: the box is drawn as one layer before the effects around it apply, so a `shadow` (here or
+   * on a box around it) is cast by the box as a whole rather than by each view it draws.
+   */
+  compositingGroup?: boolean;
   /** `.clipped()`: `overflow: hidden` on the box. */
   clipped?: boolean;
 
@@ -612,13 +619,21 @@ export interface ScrollViewProps {
  * Phase 4: `insetGrouped` (the default when omitted, as Phase 2 modules send
  * `{}`), `grouped` (full-width sections with hairlines; `Form`) or `plain`.
  */
-export type ListStyle = 'plain' | 'insetGrouped' | 'grouped';
+/** `sidebar`: a `NavigationSplitView`'s sidebar list (and `.listStyle(.sidebar)`): rows on the background, collapsible sections. */
+export type ListStyle = 'plain' | 'insetGrouped' | 'grouped' | 'sidebar';
 export interface ListProps {
   style?: ListStyle;
 }
 export interface SectionProps {
   header: string | null;
   footer: string | null;
+  /** `Section(isExpanded:)`: the section collapses in a sidebar-style list (as on iOS); a `tap` on it toggles. The rows come whatever the state. */
+  collapsible?: boolean;
+  expanded?: boolean;
+}
+/** `DisclosureGroup`: open or not; its children are the label (first, a `zstack`) and the content, laid out when expanded; a `tap` toggles. */
+export interface DisclosureGroupProps {
+  expanded: boolean;
 }
 export type TextFieldStyle = 'plain' | 'roundedBorder';
 export interface TextFieldProps {
@@ -667,6 +682,16 @@ export interface NavScreenProps {
   displayMode: NavDisplayMode;
   /** 0 for the root screen; the renderer draws a back button when > 0. */
   depth: number;
+  /**
+   * `.toolbar(.hidden, for: .navigationBar)`: no navigation bar (nor large
+   * title, back button or bar items); the content starts under the status
+   * bar. A change fades the bar in an animated commit.
+   */
+  navigationBarHidden?: boolean;
+  /** `.toolbar(.hidden, for: .bottomBar)`: the `bottom` toolbars draw nothing. */
+  bottomBarHidden?: boolean;
+  /** `.statusBarHidden()`: natively the status bar hides with the screen; the page's frame mode hides the status bar it draws (the safe area stays). */
+  statusBarHidden?: boolean;
 }
 /** Phase 7 adds `selected` (see the block at the end of this file). */
 export interface NavLinkProps {
@@ -1017,6 +1042,7 @@ export interface ElementPropsByKind {
   scrollview: ScrollViewProps;
   list: ListProps;
   section: SectionProps;
+  disclosuregroup: DisclosureGroupProps;
   textfield: TextFieldProps;
   toggle: ToggleProps;
   navstack: NavStackProps;
@@ -1041,6 +1067,19 @@ export interface ElementPropsByKind {
   searchfield: SearchFieldProps;
   tapgesture: TapGestureProps;
   host: HostProps;
+  registered: RegisteredProps;
+}
+
+/**
+ * A view a package registered under `name` with `ViewRegistry`: on a page
+ * its own DOM (src/viewRegistry.ts), in a native app a SwiftUI view. It
+ * takes the proposal, 10 on an unconstrained axis, as `GeometryReader`
+ * does; its children, if any, are the native view's to place.
+ */
+export interface RegisteredProps {
+  name: string;
+  /** JSON, as the app wrote it, for the view. */
+  props: Record<string, unknown>;
 }
 
 export type ElementKind = keyof ElementPropsByKind;
@@ -1531,7 +1570,17 @@ export type RendererEvent =
   | ScrollGeometryEvent
   | AnimationCompleteEvent
   // The page's undo and redo keys, for the app's undo manager (src/undo.ts)
-  | UndoEvent;
+  | UndoEvent
+  // A registered view's own answer (src/viewRegistry.ts)
+  | RegisteredEvent;
+
+/** What a registered view sent (`context.send(value)`), for the element's `onEvent`. */
+export interface RegisteredEvent {
+  type: 'registered';
+  id: ElementId;
+  name: string;
+  value: unknown;
+}
 
 /**
  * Phase 13: the page's answer to the `request` op with this `id`: `value`
@@ -2230,7 +2279,19 @@ export interface DropItem {
   type: string;
   text?: string;
   name?: string;
+  /** A file's bytes as base64 (a Swift app's destination; `file` for a React one). */
   data?: string;
+  /**
+   * The file as the browser holds it, by reference (a React host asks for
+   * `reference` drops, src/dragDrop.ts): never serialized, so a dropped
+   * folder of large files costs no memory until a file is read.
+   */
+  file?: File;
+  /** The file's path inside a dropped folder, the folder's name first (`Photos/2025/a.jpg`); absent for a file dropped on its own. */
+  path?: string;
+  /** Natively: a dropped file still on disk, its `file:` URL and size, read on demand through the files bridge. */
+  url?: string;
+  size?: number;
 }
 /**
  * A drag over a `dropdestination`: it `entered`, `exited`, or `performed`
@@ -2513,8 +2574,12 @@ export interface TextFieldProps {
 export interface ListProps {
   /** `.scrollContentBackground(.hidden)`: the list draws no background of its own (rows keep theirs). */
   background?: 'hidden';
-  /** `.scrollDismissesKeyboard(.immediately | .interactively)`: scrolling blurs the text input being edited inside. */
-  dismissesKeyboard?: boolean;
+  /**
+   * `.scrollDismissesKeyboard(_:)`: `true` or `immediately` dismisses the
+   * keyboard as scrolling starts, `interactively` lets it follow the finger
+   * down (natively; a page blurs the text input being edited inside either way).
+   */
+  dismissesKeyboard?: boolean | 'immediately' | 'interactively';
   /**
    * `.scrollEdgeEffectStyle(_:for:)` / `.scrollEdgeEffectHidden(_:for:)`: the
    * scroll edge effect where the list runs under its screen's bar (`top`) or
@@ -2530,7 +2595,7 @@ export interface EdgeEffectProps {
 
 export interface ScrollViewProps {
   /** As for `list`. */
-  dismissesKeyboard?: boolean;
+  dismissesKeyboard?: boolean | 'immediately' | 'interactively';
   /** As for `list`. */
   edgeEffect?: EdgeEffectProps;
   /**