@swiftbrowser/web 0.19.0 → 0.23.0

package/src/hostRequests.ts

@@ -202,6 +202,12 @@ export interface HostRequestEnvironment {
   languageModel?: LanguageModelHost;
   /** The app's files (files.ts: its IndexedDB home on a page, its sandbox natively); `FileManager` in @swiftbrowser/react calls it. */
   files?: FilesHost;
+  /**
+   * A dropped file the host left on disk (a `DropItem` with `url` and `size`,
+   * natively) as a `File` read on demand; a page never needs it, its drops
+   * carry the `File` itself.
+   */
+  fileFromReference?: (item: { type: string; name?: string; path?: string; url: string; size?: number }) => File;
   /** The browser's built-in translator (`translate`, translation.ts), where it has one. */
   translation?: TranslationHost;
   /** The browser's color chooser (`pickColor`, colorPicker.ts); it must open before it returns. */
@@ -210,18 +216,49 @@ export interface HostRequestEnvironment {
   undoManager?: UndoHost;
 }
 
+/**
+ * The type that, among a chooser's `accept`, asks for a folder rather than files (SwiftUI's `UTType.folder`).
+ * The chooser then answers with the files in the folder, at any depth, that the rest of `accept` allows.
+ */
+export const FOLDER_TYPE = 'public.folder';
+
+/**
+ * A chosen folder's files, as a `pickFiles` request answers them: those the
+ * rest of `accept` allows (an extension, a MIME type or a `type/*` pattern;
+ * any when it names none), each named by its path from the folder, the
+ * folder's own name first (`Bank/Leads/Saw.fxp`).
+ */
+export function folderFiles(files: File[], accept: string[]): File[] {
+  const allowed = accept.filter((part) => part !== FOLDER_TYPE).map((part) => part.toLowerCase());
+  const allows = (file: File): boolean =>
+    allowed.length === 0 ||
+    allowed.some((part) =>
+      part.startsWith('.') ? file.name.toLowerCase().endsWith(part)
+      : part.endsWith('/*') ? file.type.toLowerCase().startsWith(part.slice(0, -1))
+      : file.type.toLowerCase() === part);
+  return files.filter(allows).map((file) => {
+    const path = file.webkitRelativePath;
+    return path && path !== file.name ? new File([file], path, { type: file.type, lastModified: file.lastModified }) : file;
+  });
+}
+
 /**
  * The browser's file chooser: a hidden `<input type="file">` clicked at once,
  * inside the tap that sent the request (the loader performs the request while
  * the tap's click handler is still running; see wasm.ts). Resolves on
  * `change` with the files, or on `cancel` (the viewer closed the chooser)
  * with none. A browser without the `cancel` event never answers a dismissal;
- * the app's selection then just stays as it was.
+ * the app's selection then just stays as it was. With `FOLDER_TYPE` in
+ * `accept`, it is the folder chooser, answered as `folderFiles` says.
  */
 function chooseFiles(options: { accept: string; multiple: boolean }): Promise<File[]> {
+  const accept = options.accept.split(',').map((part) => part.trim()).filter((part) => part !== '');
+  const folder = accept.includes(FOLDER_TYPE);
   const input = document.createElement('input');
   input.type = 'file';
-  if (options.accept) input.accept = options.accept;
+  // A folder: the browser's folder chooser, which takes no `accept`; its files are filtered after.
+  if (folder) input.webkitdirectory = true;
+  else if (options.accept) input.accept = options.accept;
   input.multiple = options.multiple;
   // In the document (some browsers only open a chooser for an attached
   // input), but invisible and out of the way.
@@ -233,7 +270,10 @@ function chooseFiles(options: { accept: string; multiple: boolean }): Promise<Fi
       input.remove();
       resolve(files);
     };
-    input.addEventListener('change', () => finish(Array.from(input.files ?? [])), { once: true });
+    input.addEventListener('change', () => {
+      const files = Array.from(input.files ?? []);
+      finish(folder ? folderFiles(files, accept) : files);
+    }, { once: true });
     input.addEventListener('cancel', () => finish([]), { once: true });
   });
   input.click();

package/src/interaction.ts

@@ -102,6 +102,8 @@ export interface InteractionHost {
   readonly root: HTMLElement;
   send(event: RendererEvent): void;
   nodeOf(id: ElementId): LayoutNode | undefined;
+  /** How a dropped file reaches the app (src/dragDrop.ts `DragDropHost`). */
+  fileDrops?(): 'bytes' | 'reference';
   /** Open the popover of a `contextmenu` element anchored to it. */
   openContextMenu(anchor: HTMLElement, id: ElementId): void;
   /** A covered screen is about to show (a back swipe starts): lay it out if it is stale. */
@@ -318,7 +320,10 @@ export class InteractionController {
   // -------------------------------------------------------------------------
 
   private readonly onPointerDown = (event: PointerEvent): void => {
-    if (this.session || !event.isPrimary || (event.pointerType === 'mouse' && event.button !== 0)) return;
+    // One pointer at a time, but not only the primary one: a finger on a
+    // knob while another holds a key (a `touches` element, src/touches.ts,
+    // owns that one) drags, as in SwiftUI.
+    if (this.session || (event.pointerType === 'mouse' && event.button !== 0)) return;
     const target = event.target as HTMLElement | null;
     if (!target) return;
     // Pointer downs in a text field select text, never gesture; a slider

package/src/layout/engine.ts

@@ -1819,6 +1819,7 @@ export class LayoutPass {
         return this.pickerPlan(node, ctx, p).size;
       case 'host':
         return this.measureHost(node, p);
+      case 'registered':
       case 'geometry':
         // GeometryReader: the proposal, 10 on unconstrained axes.
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
@@ -3102,6 +3103,7 @@ export class LayoutPass {
       case 'canvas':
       case 'video':
       case 'host':
+      case 'registered':
         return;
       case 'vstack':
       case 'disclosuregroup':

package/src/main.ts

@@ -2,6 +2,7 @@
 import { easingFor, springEasing, timingFor } from './animation';
 import type { BuildEndPayload, BuildErrorPayload, BuildStartPayload } from './devEvents';
 import { ChromeColor } from './chromeColor';
+import { 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';
@@ -228,7 +229,8 @@ typeSizeSelect.addEventListener('change', () => {
 
 /**
  * Phase 7: the horizontal size class Swift sees (`regular` from 700 CSS px of
- * screen width). The frame is always compact; device mode follows the viewport.
+ * screen width). The iPhone frame is compact, the iPad frame regular, and
+ * without a frame (or in device mode) it follows the window.
  */
 function currentSizeClass(): HorizontalSizeClass {
   return horizontalSizeClassFor(screen.clientWidth);
@@ -260,6 +262,15 @@ if (deviceMode) {
   // `?debug=viewport` shows the numbers the measurement reads, over the app.
   const readout = new URLSearchParams(location.search).get('debug') === 'viewport' ? installViewportReadout() : undefined;
   watchKeyboard((height) => renderer.setKeyboard(height), { root: device, onRead: readout });
+} else if (!document.documentElement.hasAttribute('data-sb-embed')) {
+  // A desktop preview: the toolbar's Device picker (deviceFrame.ts) draws the
+  // 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();
+  };
+  installDeviceFrame(renderer, { onChange: sizeClassMayHaveChanged });
+  watchViewport(sizeClassMayHaveChanged);
 }
 
 // ---------------------------------------------------------------------------

package/src/page.css

@@ -141,6 +141,43 @@ body {
   border-color: transparent;
 }
 
+.toolbar-close {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  margin-right: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--page-fg);
+  cursor: pointer;
+}
+
+.toolbar-close svg circle {
+  fill: currentColor;
+  opacity: 0.12;
+}
+
+.toolbar-close svg path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  opacity: 0.7;
+}
+
+.toolbar-close:hover svg circle {
+  opacity: 0.2;
+}
+
+/* ?toolbar=0 (the toolbar's close button, src/deviceFrame.ts): the app alone. */
+html[data-sb-toolbar="hidden"] .toolbar {
+  display: none;
+}
+
 .toolbar-select {
   font: inherit;
   padding: 5px 8px;
@@ -172,6 +209,34 @@ body {
   word-break: break-word;
 }
 
+/* No device (html[data-sb-frame="none"], src/deviceFrame.ts): the page is
+   the toolbar over the app, which fills the rest of the window and lays out
+   for its size as the window is resized. */
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) body {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .stage {
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: stretch;
+  padding: 0;
+  gap: 0;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .status {
+  position: fixed;
+  left: 16px;
+  right: 16px;
+  bottom: 16px;
+  z-index: 10;
+  max-width: none;
+}
+
 /* ---------------------------------------------------------------------------
    Device mode (html[data-sb-mode="device"], see src/deviceMode.ts): no
    toolbar, no stage padding, the page behind the app in the OS appearance's

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/plainEditor.ts

@@ -9,15 +9,36 @@
  */
 
 import type { TextEditorProps, TextSelectionRange } from './protocol';
-import { editorBlurred, isSelectionBound, markSelectionBound, noteViewerSelection, selectionToApply, takePendingSelection, viewerFocused } from './editorSelection';
+import { editorBlurred, isSelectionBound, markSelectionBound, noteViewerSelection, selectionToApply, shiftOffset, takePendingSelection, viewerFocused } from './editorSelection';
+
+/** A `text` that came from outside, with the editor's value and caret before it was applied (src/editorSelection.ts, `textArrived`). */
+export interface OutsideChange {
+  before: string;
+  caret: TextSelectionRange | null;
+}
 
 export function isPlainEditor(el: unknown): el is HTMLTextAreaElement {
   return el instanceof HTMLTextAreaElement && el.classList.contains('sb-texteditor');
 }
 
-/** After the text: a selection the app set (not the viewer's coming back), moved to now, or when the app focuses the editor. */
-export function applyPlainEditorSelection(area: HTMLTextAreaElement, props: TextEditorProps): void {
+/**
+ * After the text: a selection the app set (not the viewer's coming back),
+ * moved to now, or when the app focuses the editor. After a text from
+ * outside (`outside`): the app's selection even when its numbers did not
+ * change, else the viewer's caret moved past the change (setting a
+ * textarea's value puts it at the end otherwise).
+ */
+export function applyPlainEditorSelection(area: HTMLTextAreaElement, props: TextEditorProps, outside: OutsideChange | null = null): void {
   markSelectionBound(area, props.selection !== undefined);
+  if (outside) {
+    if (props.selection !== undefined) {
+      const range = selectionToApply(area, props.selection, true);
+      if (range) area.setSelectionRange(range.start, range.end);
+    } else if (outside.caret) {
+      area.setSelectionRange(shiftOffset(outside.before, area.value, outside.caret.start), shiftOffset(outside.before, area.value, outside.caret.end));
+    }
+    return;
+  }
   const range = selectionToApply(area, props.selection);
   if (range) area.setSelectionRange(range.start, range.end);
 }

package/src/protocol.ts

@@ -378,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;
 
@@ -1062,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;
@@ -1552,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`
@@ -2251,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`