@swiftbrowser/react 0.17.7 → 0.18.0

package/dist/index.js

@@ -1,13 +1,14 @@
-import { createContext, useContext, createElement, useRef, useLayoutEffect, useState, Children, useEffect, isValidElement, Fragment, useId, cloneElement, useSyncExternalStore } from "react";
+import { createContext, useContext, createElement, useSyncExternalStore, useRef, useLayoutEffect, useState, Children, useEffect, isValidElement, Fragment, useId, cloneElement, useCallback } from "react";
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
 import { BrowserHistory } from "@swiftbrowser/web/src/browserHistory";
 import { watchKeyboard } from "@swiftbrowser/web/src/deviceMode";
+import { browserEnvironment, loadableURL, performHostRequest } from "@swiftbrowser/web/src/hostRequests";
 import { Renderer } from "@swiftbrowser/web/src/renderer";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { applyTypeSizeVariables } from "@swiftbrowser/web/src/typography";
-import { browserEnvironment, performHostRequest } from "@swiftbrowser/web/src/hostRequests";
+import { fileURL } from "@swiftbrowser/web/src/files";
 import { registerHostContent, notifyHostContentChange, unregisterHostContent } from "@swiftbrowser/web/src/hostContent";
 import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
@@ -211,6 +212,9 @@ class HostTree {
   retired = [];
   /** `withAnimation`: stamped on the next `commit`. */
   pendingAnimation;
+  /** `withAnimation(_:completionCriteria:_:completion:)`: stamped on the next `commit` with its serial; the callback waits in `completions`. */
+  pendingCompletion;
+  completions = /* @__PURE__ */ new Map();
   /** The root's `colorScheme` last sent (`.preferredColorScheme`); undefined while none was. */
   committedColorScheme;
   createInstance(props) {
@@ -253,6 +257,8 @@ class HostTree {
   flush() {
     const animation = this.pendingAnimation;
     this.pendingAnimation = void 0;
+    const completion = this.pendingCompletion;
+    this.pendingCompletion = void 0;
     const effective = /* @__PURE__ */ new Map();
     const rootEffective = { props: {}, children: [], hoisted: [] };
     effective.set(this.root, rootEffective);
@@ -340,15 +346,32 @@ class HostTree {
       this.committedColorScheme = next === null ? void 0 : next;
     }
     if (ops.length === 0) return ops;
-    ops.push(animation ? { op: "commit", animation } : { op: "commit" });
+    const commit = { op: "commit" };
+    if (animation) commit.animation = animation;
+    if (completion) {
+      commit.completion = completion.serial;
+      if (completion.criteria === "removed") commit.completionCriteria = "removed";
+      this.completions.set(completion.serial, completion.callback);
+    }
+    ops.push(commit);
     return ops;
   }
+  /** Whether a pass is still animating with this completion serial. */
+  awaitsCompletion(serial) {
+    return this.completions.has(serial);
+  }
   /** Hand a renderer event to the element's handler for its type. */
   dispatch(event) {
     if (event.type === "batch") {
       for (const each of event.events) this.dispatch(each);
       return;
     }
+    if (event.type === "animationcomplete") {
+      const callback = this.completions.get(event.serial);
+      this.completions.delete(event.serial);
+      callback?.();
+      return;
+    }
     if (!("id" in event)) return;
     const instance = this.live.get(event.id);
     const handler = instance?.on?.[event.type];
@@ -418,20 +441,207 @@ function createSwiftUIRoot(sink) {
 function injectIntoDevTools() {
   return reconciler.injectIntoDevTools() === true;
 }
-function withAnimation(first, second) {
+let nextCompletionSerial = 1;
+function withAnimation(first, second, third, fourth) {
   const animation = typeof first === "function" ? { type: "default" } : first ?? { type: "default" };
-  const body = typeof first === "function" ? first : second;
-  for (const tree of roots) tree.pendingAnimation = animation;
+  let body;
+  let completion;
+  let criteria = "logicallyComplete";
+  if (typeof first === "function") {
+    body = first;
+  } else if (typeof second === "function") {
+    body = second;
+    completion = third;
+  } else {
+    criteria = second?.completionCriteria ?? "logicallyComplete";
+    body = third;
+    completion = fourth;
+  }
+  const serial = completion ? nextCompletionSerial++ : 0;
+  for (const tree of roots) {
+    tree.pendingAnimation = animation;
+    if (completion) tree.pendingCompletion = { serial, criteria, callback: completion };
+  }
   try {
     return reconciler.flushSyncFromReconciler(body);
   } finally {
-    for (const tree of roots) tree.pendingAnimation = void 0;
+    let committed = false;
+    for (const tree of roots) {
+      tree.pendingAnimation = void 0;
+      tree.pendingCompletion = void 0;
+      if (completion && tree.awaitsCompletion(serial)) committed = true;
+    }
+    if (completion && !committed) completion();
+  }
+}
+const HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
+function rgb(r2, g, b, a = 1) {
+  return { r: r2, g, b, a };
+}
+function hex(value) {
+  const digits = value.replace("#", "");
+  const wide = digits.length === 3 || digits.length === 4 ? [...digits].map((d) => d + d).join("") : digits;
+  const n = (at) => parseInt(wide.slice(at, at + 2), 16) / 255;
+  return { r: n(0), g: n(2), b: n(4), a: wide.length >= 8 ? n(6) : 1 };
+}
+function shapeStyle(value) {
+  if (typeof value !== "string") return value;
+  if (value in HIERARCHY) return { hierarchical: HIERARCHY[value] };
+  if (value === "white") return rgb(1, 1, 1);
+  if (value === "black") return rgb(0, 0, 0);
+  if (value.startsWith("#")) return hex(value);
+  return { name: value };
+}
+function color(value) {
+  return shapeStyle(value);
+}
+function opacity(value, a) {
+  const style = shapeStyle(value);
+  if ("r" in style) return { ...style, a: style.a * a };
+  if ("name" in style) return { ...style, a: (style.a ?? 1) * a };
+  if ("named" in style) return { ...style, opacity: style.opacity * a };
+  return { ...style, opacity: (style.opacity ?? 1) * a };
+}
+function gradient(value) {
+  return { colorGradient: color(value) };
+}
+const ColorValues = {
+  red: { name: "red" },
+  orange: { name: "orange" },
+  yellow: { name: "yellow" },
+  green: { name: "green" },
+  mint: { name: "mint" },
+  teal: { name: "teal" },
+  cyan: { name: "cyan" },
+  blue: { name: "blue" },
+  indigo: { name: "indigo" },
+  purple: { name: "purple" },
+  pink: { name: "pink" },
+  brown: { name: "brown" },
+  gray: { name: "gray" },
+  white: rgb(1, 1, 1),
+  black: rgb(0, 0, 0),
+  clear: { name: "clear" },
+  primary: { name: "primary" },
+  secondary: { name: "secondary" },
+  accent: { name: "accent" },
+  /** `Color(uiColor:)` / `Color(.name)`: a UIKit semantic color by its iOS name. */
+  system: (name) => ({ name }),
+  rgb,
+  hex,
+  opacity,
+  gradient
+};
+const UNIT_POINTS = {
+  center: { x: 0.5, y: 0.5 },
+  top: { x: 0.5, y: 0 },
+  bottom: { x: 0.5, y: 1 },
+  leading: { x: 0, y: 0.5 },
+  trailing: { x: 1, y: 0.5 },
+  topLeading: { x: 0, y: 0 },
+  topTrailing: { x: 1, y: 0 },
+  bottomLeading: { x: 0, y: 1 },
+  bottomTrailing: { x: 1, y: 1 }
+};
+function unitPoint(value) {
+  return typeof value === "string" ? UNIT_POINTS[value] : value;
+}
+function stops$1(spec) {
+  if (spec.stops) return spec.stops.map((stop) => ({ color: color(stop.color), location: stop.location }));
+  const colors = spec.colors ?? [];
+  const last = Math.max(colors.length - 1, 1);
+  return colors.map((value, index) => ({ color: color(value), location: index / last }));
+}
+function LinearGradient(spec) {
+  return { linearGradient: { stops: stops$1(spec), start: unitPoint(spec.startPoint), end: unitPoint(spec.endPoint) } };
+}
+function RadialGradient(spec) {
+  return {
+    radialGradient: { stops: stops$1(spec), center: unitPoint(spec.center), startRadius: spec.startRadius, endRadius: spec.endRadius }
+  };
+}
+function AngularGradient(spec) {
+  return {
+    angularGradient: {
+      stops: stops$1(spec),
+      center: unitPoint(spec.center),
+      startAngle: spec.startAngle ?? 0,
+      endAngle: spec.endAngle ?? 360
+    }
+  };
+}
+function font(value) {
+  return typeof value === "string" ? { textStyle: value } : value;
+}
+function system(first, second, third) {
+  const result = typeof first === "number" ? { size: first } : { textStyle: first };
+  const weight = typeof first === "number" ? second : third;
+  const design = typeof first === "number" ? third : second;
+  if (weight) result.weight = weight;
+  if (design) result.design = design;
+  return result;
+}
+function weighted(value, weight) {
+  return { ...font(value), weight };
+}
+const Font = { system, weighted, bold: (value) => weighted(value, "bold") };
+function frame(value) {
+  const dimension = (n) => n === void 0 ? void 0 : n === Infinity ? "infinity" : n;
+  const result = { alignment: value.alignment ?? "center" };
+  if (value.width !== void 0) result.width = value.width;
+  if (value.height !== void 0) result.height = value.height;
+  const minWidth = dimension(value.minWidth);
+  const maxWidth = dimension(value.maxWidth);
+  const minHeight = dimension(value.minHeight);
+  const maxHeight = dimension(value.maxHeight);
+  if (minWidth !== void 0) result.minWidth = minWidth;
+  if (maxWidth !== void 0) result.maxWidth = maxWidth;
+  if (minHeight !== void 0) result.minHeight = minHeight;
+  if (maxHeight !== void 0) result.maxHeight = maxHeight;
+  return result;
+}
+const DEFAULT_PADDING = 16;
+function padding(value) {
+  if (value === true) return insets(["all"], DEFAULT_PADDING);
+  if (typeof value === "number") return insets(["all"], value);
+  if (Array.isArray(value)) {
+    const [edges, amount] = value;
+    return insets(Array.isArray(edges) ? edges : [edges], amount ?? DEFAULT_PADDING);
   }
+  return value;
+}
+function insets(edges, amount) {
+  const result = {};
+  for (const edge of edges) {
+    if (edge === "all" || edge === "vertical" || edge === "top") result.top = amount;
+    if (edge === "all" || edge === "vertical" || edge === "bottom") result.bottom = amount;
+    if (edge === "all" || edge === "horizontal" || edge === "leading") result.leading = amount;
+    if (edge === "all" || edge === "horizontal" || edge === "trailing") result.trailing = amount;
+  }
+  return result;
+}
+let installed = null;
+function installTextMeasurer(measurer, remove = false) {
+  if (remove) {
+    if (installed === measurer) installed = null;
+    return;
+  }
+  installed = measurer;
+}
+function canMeasureText() {
+  return installed !== null;
+}
+function measureText(text, font$1 = "body", width) {
+  if (!installed) throw new Error("measureText: nothing measures text here yet (mount the app, or run it in a SwiftBrowser Native host)");
+  const constrained = typeof width === "number" && Number.isFinite(width) && width > 0 ? width : null;
+  return installed(text, font(font$1), constrained);
 }
 function mount(screen, element, options = {}) {
   let renderer = null;
   const root = createSwiftUIRoot((ops) => renderer?.applyOps(ops));
   renderer = new Renderer(screen, (event) => root.dispatch(event));
+  const measurer = (text, font2, width) => renderer.measureText(text, font2, width);
+  installTextMeasurer(measurer);
   let pageScheme = options.colorScheme ?? "light";
   let preferred = null;
   const environment = {
@@ -441,6 +651,7 @@ function mount(screen, element, options = {}) {
   };
   renderer.contentHeight = options.contentHeight ?? false;
   if (options.assets) renderer.setAssetCatalog(options.assets);
+  if (options.app) browserEnvironment.files?.setApp?.(options.app);
   renderer.setEnvironment({ colorScheme: environment.colorScheme, dynamicTypeSize: environment.dynamicTypeSize });
   if (options.safeArea !== void 0) renderer.setSafeArea(options.safeArea);
   root.setEnvironment(environment);
@@ -483,6 +694,7 @@ function mount(screen, element, options = {}) {
       stopKeyboard?.();
       browserHistory?.dispose();
       screen.removeEventListener("sb:color-scheme", onPreferredScheme);
+      installTextMeasurer(measurer, true);
       root.unmount();
       renderer?.dispose();
     }
@@ -498,11 +710,233 @@ function RegisterDestination({ destination }) {
   navigation?.registerDestination(destination);
   return null;
 }
+const EMPTY = { canUndo: false, canRedo: false, undoActionName: "", redoActionName: "" };
+const defaultSchedule = (close) => {
+  if (typeof queueMicrotask === "function") queueMicrotask(close);
+  else void Promise.resolve().then(close);
+};
+class UndoManager {
+  /** Whether registrations in one event (one task of the event loop) form one group; true, as `groupsByEvent`. */
+  groupsByEvent = true;
+  /** How many groups the undo stack keeps; 0 for no limit, as `levelsOfUndo`. */
+  levelsOfUndo = 0;
+  undoStack = [];
+  redoStack = [];
+  /** The group registrations go in: an explicit group, the event's group, or the inverse of what is being undone or redone. */
+  open = null;
+  /** How deep `beginGrouping` is; 0 when `open` is the event's group or an inverse. */
+  depth = 0;
+  /** Whether `open` is the event's group, which `schedule` closes. */
+  byEvent = false;
+  /** The last keyed group closed onto the undo stack, which a registration with its key joins. */
+  coalescing = null;
+  undoing = false;
+  redoing = false;
+  snapshot = EMPTY;
+  listeners = /* @__PURE__ */ new Set();
+  schedule;
+  host;
+  stopListening = null;
+  constructor(options = {}) {
+    this.schedule = options.schedule ?? defaultSchedule;
+    this.host = options.host === void 0 ? browserEnvironment.undoManager ?? null : options.host;
+    if (this.host) {
+      this.stopListening = this.host.listen({ undo: () => this.undo(), redo: () => this.redo() });
+      this.host.update(this.snapshot);
+    }
+  }
+  get canUndo() {
+    return this.undoStack.length > 0;
+  }
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
+  /** The name of what `undo` takes back ('' for none): "Move" for an Edit menu's "Undo Move". */
+  get undoActionName() {
+    return this.undoStack[this.undoStack.length - 1]?.name ?? "";
+  }
+  get redoActionName() {
+    return this.redoStack[this.redoStack.length - 1]?.name ?? "";
+  }
+  get isUndoing() {
+    return this.undoing;
+  }
+  get isRedoing() {
+    return this.redoing;
+  }
+  /** What the stacks can do, one object per change (for `useSyncExternalStore`). */
+  get state() {
+    return this.snapshot;
+  }
+  /**
+   * Registers what undoes the change just made, under `name`. Run by `undo`,
+   * the closure registers its own inverse the same way, which lands on the
+   * redo stack because the manager is undoing.
+   */
+  registerUndo(name, undo, options = {}) {
+    const action = { name, undo, target: options.target };
+    if (this.undoing || this.redoing) {
+      this.open.actions.push(action);
+      this.changed();
+      return;
+    }
+    this.redoStack = [];
+    this.coalescing = this.coalescing && this.undoStack[this.undoStack.length - 1] === this.coalescing ? this.coalescing : null;
+    if (this.open) {
+      if (!this.undoStack.includes(this.open)) this.push(this.open);
+      this.open.actions.push(action);
+      if (!this.open.named) this.open.name = name;
+    } else if (this.coalescing && options.key !== void 0 && this.coalescing.key === options.key) {
+      this.coalescing.actions.push(action);
+      this.coalescing.name = name;
+    } else {
+      const group = { name, named: false, actions: [action], key: options.key };
+      this.push(group);
+      this.coalescing = null;
+      if (this.groupsByEvent) {
+        this.open = group;
+        this.byEvent = true;
+        this.schedule(() => {
+          if (this.open === group && this.byEvent) this.close();
+        });
+      } else {
+        this.coalescing = group.key !== void 0 ? group : null;
+      }
+    }
+    this.changed();
+  }
+  /** Takes back the top group of changes; its inverses become the top of the redo stack. */
+  undo() {
+    this.endOpenGroups();
+    const group = this.undoStack.pop();
+    if (!group) return;
+    this.coalescing = null;
+    this.run(group, "undo");
+  }
+  redo() {
+    this.endOpenGroups();
+    const group = this.redoStack.pop();
+    if (!group) return;
+    this.run(group, "redo");
+  }
+  /**
+   * Starts a group: every registration until `endGrouping` undoes as one
+   * (`beginUndoGrouping`). Nested calls join the outer group. The group is
+   * named `name`, else after its last registration.
+   */
+  beginGrouping(name) {
+    if (this.undoing || this.redoing) return;
+    this.depth += 1;
+    if (this.depth > 1) return;
+    if (this.open) this.close();
+    this.open = { name: name ?? "", named: name !== void 0, actions: [], key: void 0 };
+    this.byEvent = false;
+    this.coalescing = null;
+  }
+  /** Ends the group `beginGrouping` started; one that registered nothing is dropped. */
+  endGrouping() {
+    if (this.depth === 0) return;
+    this.depth -= 1;
+    if (this.depth === 0) this.close();
+  }
+  /** `body` as one group named `name`. */
+  group(name, body) {
+    this.beginGrouping(name);
+    try {
+      return body();
+    } finally {
+      this.endGrouping();
+    }
+  }
+  /** Forgets every registration, or those `target` made (`removeAllActions(withTarget:)`), on both stacks and in the open group. */
+  removeAllActions(target) {
+    const mine = (action) => target === void 0 || action.target === target;
+    const strip = (groups) => groups.filter((group) => {
+      group.actions = group.actions.filter((action) => !mine(action));
+      return group.actions.length > 0;
+    });
+    this.undoStack = strip(this.undoStack);
+    this.redoStack = strip(this.redoStack);
+    if (this.open) this.open.actions = this.open.actions.filter((action) => !mine(action));
+    if (this.coalescing && !this.undoStack.includes(this.coalescing)) this.coalescing = null;
+    this.changed();
+  }
+  /** Calls `listener` after each change to `state`; returns what stops it. */
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  /** Stops listening to the host, for a manager made in a test. */
+  dispose() {
+    this.stopListening?.();
+    this.stopListening = null;
+  }
+  push(group) {
+    this.undoStack.push(group);
+    if (this.levelsOfUndo > 0 && this.undoStack.length > this.levelsOfUndo) this.undoStack.splice(0, this.undoStack.length - this.levelsOfUndo);
+  }
+  /** Closes `open`; a keyed group on top stays open to its key. */
+  close() {
+    const group = this.open;
+    this.open = null;
+    this.byEvent = false;
+    if (group && group.key !== void 0 && this.undoStack[this.undoStack.length - 1] === group) this.coalescing = group;
+  }
+  endOpenGroups() {
+    this.depth = 0;
+    if (this.open) this.close();
+  }
+  run(group, direction) {
+    const inverse = { name: group.name, named: true, actions: [], key: void 0 };
+    this.open = inverse;
+    this.byEvent = false;
+    if (direction === "undo") this.undoing = true;
+    else this.redoing = true;
+    try {
+      for (let i = group.actions.length - 1; i >= 0; i -= 1) group.actions[i].undo();
+    } finally {
+      this.undoing = false;
+      this.redoing = false;
+      this.open = null;
+      if (inverse.actions.length > 0) {
+        if (direction === "undo") this.redoStack.push(inverse);
+        else this.push(inverse);
+      }
+      this.changed();
+    }
+  }
+  changed() {
+    const next = { canUndo: this.canUndo, canRedo: this.canRedo, undoActionName: this.undoActionName, redoActionName: this.redoActionName };
+    const last = this.snapshot;
+    if (next.canUndo === last.canUndo && next.canRedo === last.canRedo && next.undoActionName === last.undoActionName && next.redoActionName === last.redoActionName) return;
+    this.snapshot = next;
+    this.host?.update(next);
+    for (const listener of [...this.listeners]) listener();
+  }
+}
+const UndoManagerContext = createContext(null);
+let shared = null;
+function sharedUndoManager() {
+  shared ??= new UndoManager();
+  return shared;
+}
+function useUndoManager() {
+  const manager = useContext(UndoManagerContext) ?? sharedUndoManager();
+  useSyncExternalStore(
+    manager.subscribe,
+    () => manager.state,
+    () => manager.state
+  );
+  return manager;
+}
 const OWN = [
   EnvironmentContext,
   ViewEnvironmentContext,
   NavigationContext,
-  DismissContext
+  DismissContext,
+  UndoManagerContext
 ];
 function useContextBridge(contexts = [], options = {}) {
   const own = options.environment === false ? OWN.filter((context) => context !== EnvironmentContext) : OWN;
@@ -620,219 +1054,83 @@ function Draggable({ payload, children }) {
 function itemValue(item) {
   if (item.text !== void 0) {
     if (item.type === "text/uri-list") {
-      try {
-        return new URL(item.text.split(/\r?\n/)[0].trim());
-      } catch {
-        return item.text;
-      }
-    }
-    return item.text;
-  }
-  const binary = atob(item.data ?? "");
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-  return typeof File !== "undefined" ? new File([bytes], item.name ?? "file", { type: item.type }) : bytes;
-}
-function DropDestination({ action, isTargeted, accepts, children }) {
-  return sb(
-    "dropdestination",
-    { accepts: accepts ?? [] },
-    {
-      drop: (event) => {
-        if (event.phase === "entered") {
-          isTargeted?.(true);
-          return;
-        }
-        isTargeted?.(false);
-        if (event.phase !== "performed") return;
-        let items;
-        if (event.source !== void 0) items = active && active.id === event.source ? [active.payload] : [];
-        else items = (event.items ?? []).map(itemValue);
-        if (items.length > 0) action(items, { x: event.x, y: event.y });
-      }
-    },
-    children
-  );
-}
-function FileImporterPresenter(spec) {
-  const [presented, setPresented] = readBinding(spec.isPresented);
-  const latest = useRef(spec);
-  latest.current = spec;
-  const choosing = useRef(false);
-  useLayoutEffect(() => {
-    if (!presented || choosing.current) return;
-    const { allowedContentTypes, allowsMultipleSelection } = latest.current;
-    const pick = browserEnvironment.pickFiles;
-    if (!pick) {
-      setPresented(false);
-      latest.current.onCancellation?.();
-      return;
-    }
-    choosing.current = true;
-    void pick({ accept: allowedContentTypes.join(","), multiple: allowsMultipleSelection === true }).then((files) => {
-      choosing.current = false;
-      setPresented(false);
-      if (files.length > 0) latest.current.onCompletion(files);
-      else latest.current.onCancellation?.();
-    });
-  }, [presented, setPresented]);
-  return null;
-}
-const HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
-function rgb(r2, g, b, a = 1) {
-  return { r: r2, g, b, a };
-}
-function hex(value) {
-  const digits = value.replace("#", "");
-  const wide = digits.length === 3 || digits.length === 4 ? [...digits].map((d) => d + d).join("") : digits;
-  const n = (at) => parseInt(wide.slice(at, at + 2), 16) / 255;
-  return { r: n(0), g: n(2), b: n(4), a: wide.length >= 8 ? n(6) : 1 };
-}
-function shapeStyle(value) {
-  if (typeof value !== "string") return value;
-  if (value in HIERARCHY) return { hierarchical: HIERARCHY[value] };
-  if (value === "white") return rgb(1, 1, 1);
-  if (value === "black") return rgb(0, 0, 0);
-  if (value.startsWith("#")) return hex(value);
-  return { name: value };
-}
-function color(value) {
-  return shapeStyle(value);
-}
-function opacity(value, a) {
-  const style = shapeStyle(value);
-  if ("r" in style) return { ...style, a: style.a * a };
-  if ("name" in style) return { ...style, a: (style.a ?? 1) * a };
-  if ("named" in style) return { ...style, opacity: style.opacity * a };
-  return { ...style, opacity: (style.opacity ?? 1) * a };
-}
-function gradient(value) {
-  return { colorGradient: color(value) };
-}
-const ColorValues = {
-  red: { name: "red" },
-  orange: { name: "orange" },
-  yellow: { name: "yellow" },
-  green: { name: "green" },
-  mint: { name: "mint" },
-  teal: { name: "teal" },
-  cyan: { name: "cyan" },
-  blue: { name: "blue" },
-  indigo: { name: "indigo" },
-  purple: { name: "purple" },
-  pink: { name: "pink" },
-  brown: { name: "brown" },
-  gray: { name: "gray" },
-  white: rgb(1, 1, 1),
-  black: rgb(0, 0, 0),
-  clear: { name: "clear" },
-  primary: { name: "primary" },
-  secondary: { name: "secondary" },
-  accent: { name: "accent" },
-  /** `Color(uiColor:)` / `Color(.name)`: a UIKit semantic color by its iOS name. */
-  system: (name) => ({ name }),
-  rgb,
-  hex,
-  opacity,
-  gradient
-};
-const UNIT_POINTS = {
-  center: { x: 0.5, y: 0.5 },
-  top: { x: 0.5, y: 0 },
-  bottom: { x: 0.5, y: 1 },
-  leading: { x: 0, y: 0.5 },
-  trailing: { x: 1, y: 0.5 },
-  topLeading: { x: 0, y: 0 },
-  topTrailing: { x: 1, y: 0 },
-  bottomLeading: { x: 0, y: 1 },
-  bottomTrailing: { x: 1, y: 1 }
-};
-function unitPoint(value) {
-  return typeof value === "string" ? UNIT_POINTS[value] : value;
-}
-function stops$1(spec) {
-  if (spec.stops) return spec.stops.map((stop) => ({ color: color(stop.color), location: stop.location }));
-  const colors = spec.colors ?? [];
-  const last = Math.max(colors.length - 1, 1);
-  return colors.map((value, index) => ({ color: color(value), location: index / last }));
-}
-function LinearGradient(spec) {
-  return { linearGradient: { stops: stops$1(spec), start: unitPoint(spec.startPoint), end: unitPoint(spec.endPoint) } };
-}
-function RadialGradient(spec) {
-  return {
-    radialGradient: { stops: stops$1(spec), center: unitPoint(spec.center), startRadius: spec.startRadius, endRadius: spec.endRadius }
-  };
-}
-function AngularGradient(spec) {
-  return {
-    angularGradient: {
-      stops: stops$1(spec),
-      center: unitPoint(spec.center),
-      startAngle: spec.startAngle ?? 0,
-      endAngle: spec.endAngle ?? 360
-    }
-  };
-}
-function font(value) {
-  return typeof value === "string" ? { textStyle: value } : value;
-}
-function system(first, second, third) {
-  const result = typeof first === "number" ? { size: first } : { textStyle: first };
-  const weight = typeof first === "number" ? second : third;
-  const design = typeof first === "number" ? third : second;
-  if (weight) result.weight = weight;
-  if (design) result.design = design;
-  return result;
-}
-function weighted(value, weight) {
-  return { ...font(value), weight };
-}
-const Font = { system, weighted, bold: (value) => weighted(value, "bold") };
-function frame(value) {
-  const dimension = (n) => n === void 0 ? void 0 : n === Infinity ? "infinity" : n;
-  const result = { alignment: value.alignment ?? "center" };
-  if (value.width !== void 0) result.width = value.width;
-  if (value.height !== void 0) result.height = value.height;
-  const minWidth = dimension(value.minWidth);
-  const maxWidth = dimension(value.maxWidth);
-  const minHeight = dimension(value.minHeight);
-  const maxHeight = dimension(value.maxHeight);
-  if (minWidth !== void 0) result.minWidth = minWidth;
-  if (maxWidth !== void 0) result.maxWidth = maxWidth;
-  if (minHeight !== void 0) result.minHeight = minHeight;
-  if (maxHeight !== void 0) result.maxHeight = maxHeight;
-  return result;
-}
-const DEFAULT_PADDING = 16;
-function padding(value) {
-  if (value === true) return insets(["all"], DEFAULT_PADDING);
-  if (typeof value === "number") return insets(["all"], value);
-  if (Array.isArray(value)) {
-    const [edges, amount] = value;
-    return insets(Array.isArray(edges) ? edges : [edges], amount ?? DEFAULT_PADDING);
+      try {
+        return new URL(item.text.split(/\r?\n/)[0].trim());
+      } catch {
+        return item.text;
+      }
+    }
+    return item.text;
   }
-  return value;
+  const binary = atob(item.data ?? "");
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return typeof File !== "undefined" ? new File([bytes], item.name ?? "file", { type: item.type }) : bytes;
 }
-function insets(edges, amount) {
-  const result = {};
-  for (const edge of edges) {
-    if (edge === "all" || edge === "vertical" || edge === "top") result.top = amount;
-    if (edge === "all" || edge === "vertical" || edge === "bottom") result.bottom = amount;
-    if (edge === "all" || edge === "horizontal" || edge === "leading") result.leading = amount;
-    if (edge === "all" || edge === "horizontal" || edge === "trailing") result.trailing = amount;
-  }
-  return result;
+function DropDestination({ action, isTargeted, accepts, children }) {
+  return sb(
+    "dropdestination",
+    { accepts: accepts ?? [] },
+    {
+      drop: (event) => {
+        if (event.phase === "entered") {
+          isTargeted?.(true);
+          return;
+        }
+        isTargeted?.(false);
+        if (event.phase !== "performed") return;
+        let items;
+        if (event.source !== void 0) items = active && active.id === event.source ? [active.payload] : [];
+        else items = (event.items ?? []).map(itemValue);
+        if (items.length > 0) action(items, { x: event.x, y: event.y });
+      }
+    },
+    children
+  );
+}
+function FileImporterPresenter(spec) {
+  const [presented, setPresented] = readBinding(spec.isPresented);
+  const latest = useRef(spec);
+  latest.current = spec;
+  const choosing = useRef(false);
+  useLayoutEffect(() => {
+    if (!presented || choosing.current) return;
+    const { allowedContentTypes, allowsMultipleSelection } = latest.current;
+    const pick = browserEnvironment.pickFiles;
+    if (!pick) {
+      setPresented(false);
+      latest.current.onCancellation?.();
+      return;
+    }
+    choosing.current = true;
+    void pick({ accept: allowedContentTypes.join(","), multiple: allowsMultipleSelection === true }).then((files) => {
+      choosing.current = false;
+      setPresented(false);
+      if (files.length > 0) latest.current.onCompletion(files);
+      else latest.current.onCancellation?.();
+    });
+  }, [presented, setPresented]);
+  return null;
 }
+const isPoint = (value) => typeof value === "object" && value !== null && ("x" in value || "y" in value);
 function command(request) {
   return request.axes ? { anchor: request.anchor, serial: request.serial, axes: request.axes } : { anchor: request.anchor, serial: request.serial };
 }
+function offsetCommand(request) {
+  const out = { serial: request.serial };
+  if (typeof request.point.x === "number") out.x = request.point.x;
+  if (typeof request.point.y === "number") out.y = request.point.y;
+  return out;
+}
 const ScrollRequestContext = createContext(null);
 let nextSerial = 1;
 function ScrollViewReader({ children }) {
   const [request, setRequest] = useState(null);
   const proxy = {
-    scrollTo: (id, anchor, options) => setRequest({ id, anchor: anchor === void 0 ? null : unitPoint(anchor), serial: nextSerial++, ...options?.axes ? { axes: options.axes } : {} })
+    scrollTo: (target, anchor, options) => {
+      if (isPoint(target)) setRequest({ point: target, serial: nextSerial++ });
+      else setRequest({ id: target, anchor: anchor === void 0 ? null : unitPoint(anchor), serial: nextSerial++, ...options?.axes ? { axes: options.axes } : {} });
+    }
   };
   return /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: request, children: children(proxy) });
 }
@@ -840,7 +1138,7 @@ function ScrollTarget({ id, children }) {
   const request = useContext(ScrollRequestContext);
   const position = useContext(ScrollPositionContext);
   const on = position ? { scrollposition: () => position.report(id) } : void 0;
-  if (request && request.id === id) return sb("styled", { style: { scrollID: true, scrollTo: command(request) } }, on, children);
+  if (request && "id" in request && request.id === id) return sb("styled", { style: { scrollID: true, scrollTo: command(request) } }, on, children);
   if (on) return sb("styled", { style: { scrollID: true } }, on, children);
   return styled({ scrollID: true }, children);
 }
@@ -855,25 +1153,33 @@ function useScrollPosition(binding, anchor, axes) {
   const point = anchor === void 0 ? null : unitPoint(anchor);
   if (value !== last.current) {
     last.current = value;
-    if (value !== null && value !== reported.current) request.current = { id: value, anchor: point, serial: nextSerial++, axes };
+    if (isPoint(value)) request.current = { point: value, serial: nextSerial++ };
+    else if (value !== null && value !== reported.current) request.current = { id: value, anchor: point, serial: nextSerial++, axes };
     reported.current = void 0;
   }
-  if (!bound) return null;
-  const props = { reportsPosition: true };
-  if (point) props["positionAnchor"] = point;
   const own = request.current;
   const current = own && (!outer || own.serial > outer.serial) ? own : outer;
+  const offset = useOffsetCommand(bound ? current : outer);
+  if (!bound) return offset ? { props: offset, provide: (children) => children } : null;
+  const props = { reportsPosition: true, ...offset };
+  if (point) props["positionAnchor"] = point;
   const context = {
     report: (id) => {
       reported.current = id;
       set(id);
     }
   };
+  const inner = current && "point" in current ? outer && "id" in outer ? outer : null : current;
   return {
     props,
-    provide: (children) => /* @__PURE__ */ jsx(ScrollPositionContext.Provider, { value: context, children: /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: current, children }) })
+    provide: (children) => /* @__PURE__ */ jsx(ScrollPositionContext.Provider, { value: context, children: /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: inner, children }) })
   };
 }
+function useOffsetCommand(request) {
+  const seen = useRef(null);
+  if (request && "point" in request && (!seen.current || request.serial > seen.current.serial)) seen.current = offsetCommand(request);
+  return seen.current ? { scrollOffset: seen.current } : null;
+}
 const ScrollSettingsContext = createContext({});
 function edgesOf(edges) {
   const list = Array.isArray(edges) ? edges : [edges];
@@ -966,7 +1272,7 @@ function LazyGroup({ rows, start = 0, wrap: wrap2 }) {
   const axis = useContext(LazyContext);
   const request = useContext(ScrollRequestContext);
   const [count, setCount] = useState(LAZY_BATCH);
-  const target = request ? rows.findIndex((row) => rowMatches(row, request.id)) : -1;
+  const target = request && "id" in request ? rows.findIndex((row) => rowMatches(row, request.id)) : -1;
   const needed = target >= 0 ? Math.ceil((target + 1) / LAZY_BATCH) * LAZY_BATCH : 0;
   useEffect(() => {
     if (needed > count) setCount(needed);
@@ -996,17 +1302,23 @@ function rowMatches(row, id) {
   }
   return false;
 }
+const PinnedContext = createContext(null);
+function pinning(pinnedViews, children) {
+  return pinnedViews && pinnedViews.length > 0 ? /* @__PURE__ */ jsx(PinnedContext.Provider, { value: pinnedViews, children }) : children;
+}
 function VStack(props) {
   const { own, modifiers } = splitProps(props);
   const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
   if (own.scrollTargetLayout) stack["scrollTarget"] = true;
-  return applyModifiers(sb("vstack", stack, void 0, own.children), modifiers);
+  if (own.pinnedViews && own.pinnedViews.length > 0) stack["pinned"] = own.pinnedViews;
+  return applyModifiers(sb("vstack", stack, void 0, pinning(own.pinnedViews, own.children)), modifiers);
 }
 function HStack(props) {
   const { own, modifiers } = splitProps(props);
   const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
   if (own.scrollTargetLayout) stack["scrollTarget"] = true;
-  return applyModifiers(sb("hstack", stack, void 0, own.children), modifiers);
+  if (own.pinnedViews && own.pinnedViews.length > 0) stack["pinned"] = own.pinnedViews;
+  return applyModifiers(sb("hstack", stack, void 0, pinning(own.pinnedViews, own.children)), modifiers);
 }
 function ZStack(props) {
   const { own, modifiers } = splitProps(props);
@@ -1020,15 +1332,45 @@ function Divider(props) {
   const { modifiers } = splitProps(props);
   return applyModifiers(sb("divider", {}), modifiers);
 }
+function scrollGeometryOf(event) {
+  return {
+    contentOffset: { x: event.offset.x, y: event.offset.y },
+    contentSize: { width: event.contentSize.width, height: event.contentSize.height },
+    containerSize: { width: event.containerSize.width, height: event.containerSize.height },
+    contentInsets: { ...event.contentInsets },
+    visibleRect: { x: event.offset.x, y: event.offset.y, width: event.containerSize.width, height: event.containerSize.height }
+  };
+}
+function useScrollGeometryChange(handler) {
+  const last = useRef(null);
+  if (!handler) return { props: {} };
+  return {
+    props: { reportsGeometry: true },
+    handlers: {
+      scrollgeometry: (event) => {
+        const geometry = scrollGeometryOf(event);
+        if (typeof handler === "function") return handler(geometry);
+        const value = handler.of(geometry);
+        const previous = last.current;
+        if (previous && JSON.stringify(previous.value) === JSON.stringify(value)) return;
+        last.current = { value };
+        handler.action(value, previous ? previous.value : value);
+      }
+    }
+  };
+}
 function ScrollView(props) {
   const { own, modifiers } = splitProps(props);
   const refresh = useRefreshable(takeModifier(modifiers, "refreshable"));
   const ownSettings = takeScrollSettings(modifiers);
   const settings = useScrollSettings(ownSettings);
   const axes = own.axes ?? "vertical";
-  const scroll = { axes, ...refresh.props };
+  const geometry = useScrollGeometryChange(own.onScrollGeometryChange);
+  const scroll = { axes, ...refresh.props, ...geometry.props };
+  const handlers = refresh.handlers || geometry.handlers ? { ...refresh.handlers, ...geometry.handlers } : void 0;
   if (own.scrollTargetBehavior) scroll["snap"] = own.scrollTargetBehavior;
   if (own.scrollDismissesKeyboard) scroll["dismissesKeyboard"] = true;
+  if (own.scrollIndicators === "hidden") scroll["showsIndicators"] = false;
   if (own.defaultScrollAnchor !== void 0) scroll["defaultScrollAnchor"] = unitPoint(own.defaultScrollAnchor);
   const edgeEffect = edgeEffectProp(settings);
   if (edgeEffect) scroll["edgeEffect"] = edgeEffect;
@@ -1036,7 +1378,7 @@ function ScrollView(props) {
   if (position) Object.assign(scroll, position.props);
   const content = marginedContent(own.children, settings.margins, axes === "horizontal" ? "horizontal" : "vertical");
   const inner = providingScrollSettings(ownSettings, content);
-  return applyModifiers(sb("scrollview", scroll, refresh.handlers, position ? position.provide(inner) : inner), modifiers);
+  return applyModifiers(sb("scrollview", scroll, handlers, position ? position.provide(inner) : inner), modifiers);
 }
 function takeScrollSettings(modifiers) {
   let settings = {};
@@ -1160,17 +1502,15 @@ GridItem.fixed = (value, options = {}) => GridItem({ size: { fixed: value }, spa
 GridItem.adaptive = (options) => GridItem({ size: { adaptive: options }, spacing: options.spacing, alignment: options.alignment });
 function LazyVGrid(props) {
   const { own, modifiers } = splitProps(props);
-  return applyModifiers(
-    sb("lazyvgrid", { columns: own.columns, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" }, void 0, own.children),
-    modifiers
-  );
+  const grid = { columns: own.columns, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
+  if (own.pinnedViews && own.pinnedViews.length > 0) grid["pinned"] = own.pinnedViews;
+  return applyModifiers(sb("lazyvgrid", grid, void 0, pinning(own.pinnedViews, own.children)), modifiers);
 }
 function LazyHGrid(props) {
   const { own, modifiers } = splitProps(props);
-  return applyModifiers(
-    sb("lazyhgrid", { rows: own.rows, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" }, void 0, own.children),
-    modifiers
-  );
+  const grid = { rows: own.rows, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
+  if (own.pinnedViews && own.pinnedViews.length > 0) grid["pinned"] = own.pinnedViews;
+  return applyModifiers(sb("lazyhgrid", grid, void 0, pinning(own.pinnedViews, own.children)), modifiers);
 }
 function Grid(props) {
   const { own, modifiers } = splitProps(props);
@@ -1200,11 +1540,11 @@ function runStyleOf(props, inherited, nested) {
   if (props.baselineOffset !== void 0) style.baselineOffset = props.baselineOffset;
   if (props.link) style.link = props.link;
   if (nested) {
-    let runFont = props.font !== void 0 ? font(props.font) : void 0;
-    if (props.bold) runFont = { ...runFont ?? {}, weight: "bold" };
-    if (props.fontWeight) runFont = { ...runFont ?? {}, weight: props.fontWeight };
-    if (props.monospacedDigit) runFont = { ...runFont ?? {}, monospacedDigit: true };
-    if (runFont) style.font = { ...style.font ?? {}, ...runFont };
+    let runFont2 = props.font !== void 0 ? font(props.font) : void 0;
+    if (props.bold) runFont2 = { ...runFont2 ?? {}, weight: "bold" };
+    if (props.fontWeight) runFont2 = { ...runFont2 ?? {}, weight: props.fontWeight };
+    if (props.monospacedDigit) runFont2 = { ...runFont2 ?? {}, monospacedDigit: true };
+    if (runFont2) style.font = { ...style.font ?? {}, ...runFont2 };
     if (props.foregroundStyle !== void 0) {
       style.foreground = shapeStyle(Array.isArray(props.foregroundStyle) ? props.foregroundStyle[0] : props.foregroundStyle);
     }
@@ -1260,8 +1600,8 @@ function Text(props) {
   }
   const redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
   const content = segments.map((segment) => "text" in segment ? segment.text : "").join("");
-  const plain = segments.length <= 1 && (segments.length === 0 || "text" in segments[0] && isPlainStyle(segments[0].style));
-  if (plain) return applyModifiers(placeholder(sb("text", { text: content }), redacted), modifiers);
+  const plain2 = segments.length <= 1 && (segments.length === 0 || "text" in segments[0] && isPlainStyle(segments[0].style));
+  if (plain2) return applyModifiers(placeholder(sb("text", { text: content }), redacted), modifiers);
   const runs = segments.map((segment) => {
     const run = { ...segment.style };
     if ("text" in segment) run["text"] = segment.text;
@@ -1401,7 +1741,7 @@ function NavigationLink(props) {
     else navigation.push(own.value);
   };
   const style = takeModifier(modifiers, "buttonStyle") ?? environment.buttonStyle;
-  const linkProps = style === "plain" || style === "borderless" ? { style: "plain" } : {};
+  const linkProps = style === "plain" ? { style: "plain" } : {};
   return applyModifiers(sb("navlink", linkProps, { tap }, label), modifiers);
 }
 const SplitSelectionContext = createContext(null);
@@ -1712,6 +2052,8 @@ function toolbarPlacement(name) {
       return "largeTitle";
     case "bottomBar":
       return "bottom";
+    case "keyboard":
+      return "keyboard";
     case "secondaryAction":
       return "secondary";
     default:
@@ -1774,6 +2116,7 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "buttonStyle",
   "controlSize",
   "pickerStyle",
+  "toggleStyle",
   "labelsHidden",
   "navigationTitle",
   "navigationBarTitleDisplayMode",
@@ -1787,11 +2130,14 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "confirmationDialog",
   "presentationDetents",
   "onScrollVisibilityChange",
+  "onGeometryChange",
   "onTapGesture",
   "dragGesture",
   "magnifyGesture",
   "rotateGesture",
   "onLongPressGesture",
+  "simultaneousGesture",
+  "highPriorityGesture",
   "contextMenu",
   "swipeActions",
   "onAppear",
@@ -1814,6 +2160,7 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "position",
   "zIndex",
   "allowsHitTesting",
+  "contentShape",
   "ignoresSafeArea",
   "rotation3DEffect",
   "gridCellAnchor",
@@ -1848,6 +2195,7 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "textCase",
   "coordinateSpace",
   "contentTransition",
+  "scrollDisabled",
   "scrollEdgeEffectStyle",
   "scrollEdgeEffectHidden",
   "contentMargins",
@@ -1874,6 +2222,72 @@ function takeModifier(modifiers, key) {
 function styled(style, child) {
   return sb("styled", { style }, void 0, child);
 }
+function gesture(key, value, node, mode) {
+  const base = { drag: false, longPress: false, minimumDistance: 10, minimumDuration: 0.5 };
+  if (mode) base["mode"] = mode;
+  switch (key) {
+    case "dragGesture":
+      return createElement(DragGestureElement, { spec: value, mode }, node);
+    case "magnifyGesture":
+    case "rotateGesture": {
+      const pinch = value;
+      if (key === "magnifyGesture") {
+        base["magnify"] = true;
+        base["minimumScaleDelta"] = pinch.minimumScaleDelta ?? 0.01;
+      } else {
+        base["rotate"] = true;
+        base["minimumAngleDelta"] = pinch.minimumAngleDelta ?? 1;
+      }
+      return sb("gesture", base, {
+        pinch: (event) => {
+          const pinchValue = {
+            magnification: event.scale,
+            rotation: event.rotation,
+            magnificationVelocity: event.scaleVelocity,
+            rotationVelocity: event.rotationVelocity,
+            startLocation: event.startLocation,
+            startAnchor: event.startAnchor,
+            location: event.location ?? event.startLocation
+          };
+          if (event.phase === "ended" || event.phase === "cancelled") pinch.onEnded?.(pinchValue);
+          else pinch.onChanged?.(pinchValue);
+        }
+      }, node);
+    }
+    case "onLongPressGesture": {
+      const spec = typeof value === "function" ? { action: value } : value;
+      base["longPress"] = true;
+      base["minimumDuration"] = spec.minimumDuration ?? 0.5;
+      return sb("gesture", base, { longpress: () => spec.action() }, node);
+    }
+  }
+}
+function DragGestureElement({ spec, mode, children }) {
+  const spaces = useCoordinateSpaces();
+  const space = spec.coordinateSpace ?? "local";
+  const named = typeof space === "object" ? spaces[space.named] : null;
+  const props = { drag: true, longPress: false, minimumDistance: spec.minimumDistance ?? 10, minimumDuration: 0.5 };
+  if (space !== "local") props["coordinateSpace"] = "global";
+  if (mode) props["mode"] = mode;
+  const inSpace = (point) => named ? { x: point.x - named.x, y: point.y - named.y } : point;
+  return sb(
+    "gesture",
+    props,
+    {
+      drag: (event) => {
+        const dragValue = {
+          translation: event.translation,
+          location: inSpace(event.location),
+          startLocation: inSpace(event.startLocation),
+          velocity: event.velocity
+        };
+        if (event.phase === "ended" || event.phase === "cancelled") spec.onEnded?.(dragValue);
+        else spec.onChanged?.(dragValue);
+      }
+    },
+    children
+  );
+}
 function decorated(role, alignment, content, decoration) {
   return sb("decorated", { role, alignment }, void 0, [
     createElement(Fragment, { key: "content" }, content),
@@ -1956,6 +2370,7 @@ const STYLED_KEYS = /* @__PURE__ */ new Set([
   "position",
   "zIndex",
   "allowsHitTesting",
+  "contentShape",
   "ignoresSafeArea",
   "rotation3DEffect",
   "gridCellAnchor",
@@ -1964,12 +2379,14 @@ const STYLED_KEYS = /* @__PURE__ */ new Set([
   "pointerStyle",
   "matchedGeometryEffect",
   "containerRelativeFrame",
-  "contentTransition"
+  "contentTransition",
+  "scrollDisabled"
 ]);
 const ENVIRONMENT_KEYS = /* @__PURE__ */ new Set([
   "buttonStyle",
   "controlSize",
   "pickerStyle",
+  "toggleStyle",
   "labelsHidden",
   "refreshable",
   "submitLabel",
@@ -2095,13 +2512,15 @@ function apply(key, value, node, sides) {
     case "gridCellColumns":
       return styled({ gridCellColumns: value }, node);
     case "buttonStyle":
-      return withEnvironment({ buttonStyle: value === "borderless" ? "plain" : value }, node);
+      return withEnvironment({ buttonStyle: value }, node);
     case "controlSize":
       return withEnvironment({ controlSize: value }, node);
     case "symbolRenderingMode":
       return withEnvironment({ symbolRenderingMode: value }, node);
     case "pickerStyle":
       return withEnvironment({ pickerStyle: value }, node);
+    case "toggleStyle":
+      return withEnvironment({ toggleStyle: value }, node);
     case "labelsHidden":
       return withEnvironment({ labelsHidden: Boolean(value) }, node);
     case "navigationTitle":
@@ -2141,62 +2560,31 @@ function apply(key, value, node, sides) {
       const spec = typeof value === "function" ? { action: value } : value;
       return sb("styled", { style: { scrollVisibility: { threshold: spec.threshold ?? 0.5 } } }, { scrollvisibility: (event) => spec.action(event.visible) }, node);
     }
-    case "onTapGesture":
-      return sb("tapgesture", {}, { tap: value }, node);
-    case "dragGesture": {
-      const drag = value;
-      return sb(
-        "gesture",
-        { drag: true, longPress: false, minimumDistance: drag.minimumDistance ?? 10, minimumDuration: 0.5 },
-        {
-          drag: (event) => {
-            const dragValue = {
-              translation: event.translation,
-              location: event.location,
-              startLocation: event.startLocation,
-              velocity: event.velocity
-            };
-            if (event.phase === "ended" || event.phase === "cancelled") drag.onEnded?.(dragValue);
-            else drag.onChanged?.(dragValue);
-          }
-        },
-        node
-      );
+    case "onTapGesture": {
+      const spec = typeof value === "function" ? { action: value } : value;
+      const count = Math.floor(spec.count ?? 1);
+      const props = count > 1 ? { count } : {};
+      if ("perform" in spec) {
+        const { perform } = spec;
+        return sb("tapgesture", { ...props, location: true }, { tap: (event) => perform({ x: event.x ?? 0, y: event.y ?? 0 }) }, node);
+      }
+      return sb("tapgesture", props, { tap: () => spec.action() }, node);
     }
+    case "onGeometryChange":
+      return createElement(GeometryChangeView, { handler: value }, node);
+    case "dragGesture":
     case "magnifyGesture":
-    case "rotateGesture": {
-      const pinch = value;
-      const props = { drag: false, longPress: false, minimumDistance: 10, minimumDuration: 0.5 };
-      if (key === "magnifyGesture") {
-        props["magnify"] = true;
-        props["minimumScaleDelta"] = pinch.minimumScaleDelta ?? 0.01;
-      } else {
-        props["rotate"] = true;
-        props["minimumAngleDelta"] = pinch.minimumAngleDelta ?? 1;
+    case "rotateGesture":
+    case "onLongPressGesture":
+      return gesture(key, value, node);
+    case "simultaneousGesture":
+    case "highPriorityGesture": {
+      const mode = key === "simultaneousGesture" ? "simultaneous" : "highPriority";
+      let result = node;
+      for (const [gestureKey, gestureValue] of Object.entries(value)) {
+        if (gestureValue !== void 0) result = gesture(gestureKey, gestureValue, result, mode);
       }
-      return sb("gesture", props, {
-        pinch: (event) => {
-          const pinchValue = {
-            magnification: event.scale,
-            rotation: event.rotation,
-            magnificationVelocity: event.scaleVelocity,
-            rotationVelocity: event.rotationVelocity,
-            startLocation: event.startLocation,
-            startAnchor: event.startAnchor
-          };
-          if (event.phase === "ended" || event.phase === "cancelled") pinch.onEnded?.(pinchValue);
-          else pinch.onChanged?.(pinchValue);
-        }
-      }, node);
-    }
-    case "onLongPressGesture": {
-      const spec = typeof value === "function" ? { action: value } : value;
-      return sb(
-        "gesture",
-        { drag: false, longPress: true, minimumDistance: 10, minimumDuration: spec.minimumDuration ?? 0.5 },
-        { longpress: () => spec.action() },
-        node
-      );
+      return result;
     }
     case "contextMenu":
       return sb("contextmenu", {}, void 0, [createElement(Fragment, { key: "content" }, node), createElement(Fragment, { key: "items" }, value)]);
@@ -2265,6 +2653,8 @@ function apply(key, value, node, sides) {
       return styled({ zIndex: value }, node);
     case "allowsHitTesting":
       return value === false ? styled({ hitTesting: false }, node) : node;
+    case "contentShape":
+      return value === "rectangle" ? styled({ contentShape: "rectangle" }, node) : node;
     case "ignoresSafeArea":
       return styled(
         value === true ? { ignoresSafeArea: "all", ignoresKeyboard: true } : { ignoresSafeArea: value },
@@ -2387,6 +2777,8 @@ function apply(key, value, node, sides) {
       const spec = typeof value === "function" ? { transition: value } : value;
       return createElement(ScrollTransitionView, { spec }, node);
     }
+    case "scrollDisabled":
+      return styled({ scrollDisabled: value === true }, node);
     case "contentTransition": {
       if (value === "identity") return node;
       if (typeof value === "object") {
@@ -2477,6 +2869,43 @@ function GeometryReader(props) {
     modifiers
   );
 }
+function GeometryChangeView({ handler, children }) {
+  const [reported, setReported] = useState(NO_GEOMETRY);
+  const [needsFrame, setNeedsFrame] = useState(false);
+  const last = useRef(null);
+  const spaces = useCoordinateSpaces();
+  let readFrame = false;
+  const proxy = geometryProxy(reported, spaces, () => {
+    readFrame = true;
+  });
+  const heard = reported !== NO_GEOMETRY;
+  const value = heard && typeof handler !== "function" ? handler.of(proxy) : void 0;
+  useEffect(() => {
+    if (readFrame && !needsFrame) setNeedsFrame(true);
+  });
+  useEffect(() => {
+    if (!heard) return;
+    if (typeof handler === "function") {
+      handler(proxy);
+      return;
+    }
+    const previous = last.current;
+    if (previous && JSON.stringify(previous.value) === JSON.stringify(value)) return;
+    last.current = { value };
+    handler.action(value, previous ? previous.value : value);
+  });
+  return sb(
+    "zstack",
+    { alignment: "center", reportsSize: true, ...needsFrame ? { reportsFrame: true } : {} },
+    {
+      geometry: (event) => {
+        const next = nextGeometry(event, reported);
+        if (JSON.stringify(next) !== JSON.stringify(reported)) setReported(next);
+      }
+    },
+    children
+  );
+}
 const DEFAULT_VIEW_SPACING = { distance: () => 8 };
 function subviewTraits(children) {
   return flattenChildren(children).map((element) => {
@@ -2675,38 +3104,9 @@ function effectStyle(values) {
   if (values.hueRotation !== 0) style.hueRotation = round(values.hueRotation);
   return style;
 }
-function interpolateEffects(from, to, t) {
-  const mix = (a, b) => a + (b - a) * t;
-  const result = {
-    offsetX: mix(from.offsetX, to.offsetX),
-    offsetY: mix(from.offsetY, to.offsetY),
-    scaleX: mix(from.scaleX, to.scaleX),
-    scaleY: mix(from.scaleY, to.scaleY),
-    rotation: mix(from.rotation, to.rotation),
-    opacity: mix(from.opacity, to.opacity),
-    blur: mix(from.blur, to.blur),
-    brightness: mix(from.brightness, to.brightness),
-    contrast: mix(from.contrast, to.contrast),
-    saturation: mix(from.saturation, to.saturation),
-    grayscale: mix(from.grayscale, to.grayscale),
-    hueRotation: mix(from.hueRotation, to.hueRotation)
-  };
-  const scaleAnchor = to.scaleAnchor ?? from.scaleAnchor;
-  if (scaleAnchor) result.scaleAnchor = scaleAnchor;
-  const rotationAnchor = to.rotationAnchor ?? from.rotationAnchor;
-  if (rotationAnchor) result.rotationAnchor = rotationAnchor;
-  const rotation3D = to.rotation3D ?? from.rotation3D;
-  if (rotation3D) result.rotation3D = { ...rotation3D, angle: mix(from.rotation3D?.angle ?? 0, to.rotation3D?.angle ?? 0) };
-  return result;
-}
-function EffectBox({
-  render,
-  alwaysFrame,
-  animationToken,
-  children
-}) {
+function EffectBox({ render, children }) {
   const [reported, setReported] = useState(NO_GEOMETRY);
-  const [needsFrame, setNeedsFrame] = useState(alwaysFrame);
+  const [needsFrame, setNeedsFrame] = useState(false);
   let readFrame = false;
   const style = render(reported, () => {
     readFrame = true;
@@ -2714,8 +3114,7 @@ function EffectBox({
   useEffect(() => {
     if (readFrame && !needsFrame) setNeedsFrame(true);
   });
-  let content = Object.keys(style).length > 0 ? sb("styled", { style }, void 0, children) : children;
-  if (animationToken) content = sb("styled", { style: { animation: { type: "default" }, animationToken: animationToken(reported) } }, void 0, content);
+  const content = Object.keys(style).length > 0 ? sb("styled", { style }, void 0, children) : children;
   return sb(
     "zstack",
     { alignment: "center", reportsSize: true, ...needsFrame ? { reportsFrame: true } : {} },
@@ -2730,45 +3129,23 @@ function EffectBox({
 }
 function VisualEffectView({ effect, children }) {
   const spaces = useCoordinateSpaces();
-  return /* @__PURE__ */ jsx(EffectBox, { alwaysFrame: false, render: (reported, markRead) => effectStyle(effect(EMPTY_EFFECT, geometryProxy(reported, spaces, markRead)).values), children });
+  return /* @__PURE__ */ jsx(EffectBox, { render: (reported, markRead) => effectStyle(effect(EMPTY_EFFECT, geometryProxy(reported, spaces, markRead)).values), children });
 }
 const PHASES = {
   topLeading: { phase: "topLeading", value: -1, isIdentity: false },
   identity: { phase: "identity", value: 0, isIdentity: true },
   bottomTrailing: { phase: "bottomTrailing", value: 1, isIdentity: false }
 };
-function scrollProgress(reported, axis) {
-  const view = reported.scrollView;
-  const origin = reported.origin;
-  if (!view || !origin) return 0;
-  const horizontal = (axis ?? view.axis) === "horizontal";
-  const start = horizontal ? origin.x : origin.y;
-  const length = horizontal ? reported.size.width : reported.size.height;
-  const viewStart = horizontal ? view.x : view.y;
-  const viewEnd = viewStart + (horizontal ? view.width : view.height);
-  if (length <= 0) return 0;
-  if (start < viewStart) return -Math.min(1, (viewStart - start) / length);
-  if (start + length > viewEnd) return Math.min(1, (start + length - viewEnd) / length);
-  return 0;
-}
-function scrollTransitionValues(spec, progress) {
-  const identity = spec.transition(EMPTY_EFFECT, PHASES.identity).values;
-  const configuration = spec.configuration ?? "interactive";
-  if (configuration === "identity" || progress === 0) return identity;
-  const edge = spec.transition(EMPTY_EFFECT, progress < 0 ? PHASES.topLeading : PHASES.bottomTrailing).values;
-  if (configuration === "animated") return edge;
-  return interpolateEffects(identity, edge, Math.abs(progress));
-}
 function ScrollTransitionView({ spec, children }) {
-  return /* @__PURE__ */ jsx(
-    EffectBox,
-    {
-      alwaysFrame: true,
-      render: (reported) => effectStyle(scrollTransitionValues(spec, scrollProgress(reported, spec.axis))),
-      ...spec.configuration === "animated" ? { animationToken: (reported) => Math.sign(scrollProgress(reported, spec.axis)) + 1 } : {},
-      children
-    }
-  );
+  const phase = (which) => effectStyle(spec.transition(EMPTY_EFFECT, PHASES[which]).values);
+  const transition = {
+    configuration: spec.configuration ?? "interactive",
+    identity: phase("identity"),
+    topLeading: phase("topLeading"),
+    bottomTrailing: phase("bottomTrailing")
+  };
+  if (spec.axis) transition.axis = spec.axis;
+  return sb("styled", { style: { scrollTransition: transition } }, void 0, children);
 }
 const r = (n) => {
   const v = Math.round(n * 100) / 100;
@@ -2907,12 +3284,398 @@ class Path {
     return this.svg();
   }
 }
+const plain = (text) => text.map((run) => run.text).join("");
+function attributesOf(run) {
+  if (!run) return {};
+  const { text: _text, ...attributes } = run;
+  return attributes;
+}
+function alike(a, b) {
+  return !a.bold === !b.bold && !a.italic === !b.italic && !a.underline === !b.underline && !a.strikethrough === !b.strikethrough && JSON.stringify(a.foregroundColor ?? null) === JSON.stringify(b.foregroundColor ?? null) && JSON.stringify(a.backgroundColor ?? null) === JSON.stringify(b.backgroundColor ?? null) && JSON.stringify(runFont(a.font) ?? null) === JSON.stringify(runFont(b.font) ?? null);
+}
+function runFont(font2) {
+  if (!font2) return void 0;
+  const out = {};
+  if (typeof font2.size === "number" && Number.isFinite(font2.size) && font2.size > 0) out.size = font2.size;
+  if (font2.weight) out.weight = font2.weight;
+  if (font2.design) out.design = font2.design;
+  return Object.keys(out).length > 0 ? out : void 0;
+}
+function normalized(text) {
+  const runs = [];
+  for (const run of text) {
+    if (!run.text) continue;
+    const last = runs[runs.length - 1];
+    if (last && alike(last, run)) runs[runs.length - 1] = { ...last, text: last.text + run.text };
+    else runs.push(run);
+  }
+  return runs;
+}
+function slice(text, start, end = Infinity) {
+  const runs = [];
+  let at = 0;
+  for (const run of text) {
+    const from = Math.max(start, at);
+    const to = Math.min(end, at + run.text.length);
+    if (from < to) runs.push({ ...run, text: run.text.slice(from - at, to - at) });
+    at += run.text.length;
+  }
+  return runs;
+}
+function attributesAt(text, offset) {
+  let at = 0;
+  for (const run of text) {
+    if (offset < at + run.text.length) return attributesOf(run);
+    at += run.text.length;
+  }
+  return attributesOf([...text].reverse().find((run) => run.text.length > 0));
+}
+function replacingCharacters(text, next) {
+  const old = plain(text);
+  if (old === next) return text;
+  let head = 0;
+  const shorter = Math.min(old.length, next.length);
+  while (head < shorter && old[head] === next[head]) head++;
+  let tail = 0;
+  while (tail < shorter - head && old[old.length - 1 - tail] === next[next.length - 1 - tail]) tail++;
+  const removedEnd = old.length - tail;
+  const typed = next.slice(head, next.length - tail);
+  const attributes = attributesAt(text, removedEnd > head || head === 0 ? head : head - 1);
+  return normalized([...slice(text, 0, head), { ...attributes, text: typed }, ...slice(text, removedEnd)]);
+}
+function settingAttributes(text, start, end, change) {
+  const inside = slice(text, start, end).map((run) => ({ ...run, ...change }));
+  return normalized([...slice(text, 0, start), ...inside, ...slice(text, end)]);
+}
+function every(text, start, end, key) {
+  const inside = slice(text, start, end);
+  return inside.length > 0 && inside.every((run) => run[key] === true);
+}
+const AttributedText = {
+  plain,
+  normalized,
+  slice,
+  attributesAt,
+  replacingCharacters,
+  settingAttributes,
+  every,
+  /** A text of one run. */
+  of: (text, attributes = {}) => normalized([{ ...attributes, text }])
+};
+const BOLD_WEIGHTS = /* @__PURE__ */ new Set(["semibold", "bold", "heavy", "black"]);
+function fromProtocolRuns(runs) {
+  return normalized(
+    runs.map((run) => {
+      const out = { text: run.text ?? "" };
+      const font2 = run.font ?? {};
+      const bold = typeof font2.weight === "string" && BOLD_WEIGHTS.has(font2.weight);
+      if (bold) out.bold = true;
+      const own = runFont({
+        ...typeof font2.size === "number" ? { size: font2.size } : {},
+        ...typeof font2.weight === "string" && !bold ? { weight: font2.weight } : {},
+        ...typeof font2.design === "string" ? { design: font2.design } : {}
+      });
+      if (own) out.font = own;
+      if (run.italic) out.italic = true;
+      if (run.underline) out.underline = true;
+      if (run.strikethrough) out.strikethrough = true;
+      if (run.foreground !== void 0) out.foregroundColor = run.foreground;
+      if (run.background !== void 0) out.backgroundColor = run.background;
+      return out;
+    })
+  );
+}
+function protocolRuns(text) {
+  return text.map((run) => {
+    const out = { text: run.text };
+    const font2 = { ...runFont(run.font) ?? {} };
+    if (run.bold && !font2.weight) font2.weight = "bold";
+    if (Object.keys(font2).length > 0) out.font = font2;
+    if (run.italic) out.italic = true;
+    if (run.underline) out.underline = {};
+    if (run.strikethrough) out.strikethrough = {};
+    if (run.foregroundColor !== void 0) out.foreground = color(run.foregroundColor);
+    if (run.backgroundColor !== void 0) out.background = color(run.backgroundColor);
+    return out;
+  });
+}
+function useAudioRecorder(options = {}) {
+  const interval = options.meterInterval ?? 50;
+  const host = browserEnvironment.audioRecorder;
+  const [status, setStatus] = useState("idle");
+  const [time, setTime] = useState(0);
+  const [levels, setLevels] = useState([]);
+  const [error, setError] = useState(null);
+  const statusRef = useRef(status);
+  statusRef.current = status;
+  const fail = (reason) => setError(reason instanceof Error ? reason.message : String(reason));
+  useEffect(() => {
+    if (status !== "recording" || !host) return;
+    let reading = false;
+    let live = true;
+    const timer = setInterval(() => {
+      if (reading) return;
+      reading = true;
+      host.meter().then((meter) => {
+        if (!live) return;
+        setTime(meter.time);
+        setLevels((previous) => [...previous, meter.level]);
+      }).catch(() => void 0).finally(() => {
+        reading = false;
+      });
+    }, interval);
+    return () => {
+      live = false;
+      clearInterval(timer);
+    };
+  }, [status, host, interval]);
+  useEffect(
+    () => () => {
+      if (statusRef.current !== "idle") void host?.cancel().catch(() => void 0);
+    },
+    [host]
+  );
+  const record = useCallback(async () => {
+    if (!host) {
+      setError("unsupported: this page cannot record");
+      return;
+    }
+    if (statusRef.current !== "idle") return;
+    setError(null);
+    setTime(0);
+    setLevels([]);
+    setStatus("starting");
+    try {
+      await host.start();
+      setStatus("recording");
+    } catch (reason) {
+      fail(reason);
+      setStatus("idle");
+    }
+  }, [host]);
+  const pause = useCallback(async () => {
+    if (!host || statusRef.current !== "recording") return;
+    await host.pause().catch(fail);
+    setStatus("paused");
+  }, [host]);
+  const resume = useCallback(async () => {
+    if (!host || statusRef.current !== "paused") return;
+    await host.resume().catch(fail);
+    setStatus("recording");
+  }, [host]);
+  const stop = useCallback(async () => {
+    if (!host || statusRef.current !== "recording" && statusRef.current !== "paused") return null;
+    setStatus("stopping");
+    try {
+      const recording = await host.stop();
+      setTime(recording.duration);
+      return recording;
+    } catch (reason) {
+      fail(reason);
+      return null;
+    } finally {
+      setStatus("idle");
+    }
+  }, [host]);
+  const cancel = useCallback(async () => {
+    if (!host || statusRef.current === "idle") return;
+    await host.cancel().catch(fail);
+    setStatus("idle");
+    setTime(0);
+    setLevels([]);
+  }, [host]);
+  const discard = useCallback(async (url) => {
+    await host?.discard(url).catch(fail);
+  }, [host]);
+  const trim = useCallback(
+    async (url, keep) => {
+      if (!host) throw new Error("unsupported: this page cannot cut audio");
+      try {
+        return await host.trim(url, keep);
+      } catch (reason) {
+        fail(reason);
+        throw reason;
+      }
+    },
+    [host]
+  );
+  return { available: host !== void 0, status, time, levels, error, record, pause, resume, stop, cancel, discard, trim };
+}
+const stores = /* @__PURE__ */ new WeakMap();
+function entryFor(store, key) {
+  let entries = stores.get(store);
+  if (!entries) {
+    entries = /* @__PURE__ */ new Map();
+    stores.set(store, entries);
+    if (store === pageStorage) watchOtherTabs();
+  }
+  let entry = entries.get(key);
+  if (!entry) {
+    let raw = null;
+    try {
+      raw = store.getItem(key);
+    } catch {
+    }
+    entry = { raw, value: void 0, decoded: false, decode: void 0, listeners: /* @__PURE__ */ new Set() };
+    entries.set(key, entry);
+  }
+  return entry;
+}
+function valueOf(entry, absent) {
+  if (entry.raw === null) return absent;
+  if (!entry.decoded) {
+    try {
+      const parsed = JSON.parse(entry.raw);
+      entry.value = entry.decode ? entry.decode(parsed) : parsed;
+    } catch {
+      entry.raw = null;
+      return absent;
+    }
+    entry.decoded = true;
+  }
+  return entry.value;
+}
+function notify(entry) {
+  for (const listener of [...entry.listeners]) listener();
+}
+function invalidate(entry, raw) {
+  if (entry.raw === raw && entry.decoded) return;
+  entry.raw = raw;
+  entry.decoded = false;
+  notify(entry);
+}
+function readPageStorage() {
+  try {
+    const storage = globalThis.localStorage;
+    return storage && typeof storage.getItem === "function" ? storage : null;
+  } catch {
+    return null;
+  }
+}
+const memory = /* @__PURE__ */ new Map();
+const memoryStorage = {
+  getItem: (key) => memory.get(key) ?? null,
+  setItem: (key, value) => void memory.set(key, value),
+  removeItem: (key) => void memory.delete(key)
+};
+const pageStorage = readPageStorage();
+const appStorage = pageStorage ?? memoryStorage;
+let watching = false;
+function watchOtherTabs() {
+  if (watching || !pageStorage) return;
+  watching = true;
+  const target = globalThis;
+  if (typeof target.addEventListener !== "function") return;
+  target.addEventListener("storage", (event) => {
+    if (event.storageArea !== pageStorage) return;
+    const entries = stores.get(pageStorage);
+    if (!entries) return;
+    if (event.key === null) {
+      for (const entry of entries.values()) invalidate(entry, null);
+    } else {
+      const entry = entries.get(event.key);
+      if (entry) invalidate(entry, event.newValue);
+    }
+  });
+}
+function useAppStorage(key, defaultValue, options = {}) {
+  const { store = appStorage, decode, onError } = options;
+  const [fallback] = useState(defaultValue);
+  const entry = entryFor(store, key);
+  entry.decode = decode;
+  const subscribe = useCallback(
+    (listener) => {
+      const subscribed = entryFor(store, key);
+      subscribed.listeners.add(listener);
+      return () => void subscribed.listeners.delete(listener);
+    },
+    [store, key]
+  );
+  const read = useCallback(() => valueOf(entryFor(store, key), fallback), [store, key, fallback]);
+  const value = useSyncExternalStore(subscribe, read, read);
+  const set = useCallback(
+    (next) => {
+      const target = entryFor(store, key);
+      const current = valueOf(target, fallback);
+      const value2 = typeof next === "function" ? next(current) : next;
+      const raw = value2 === void 0 ? null : JSON.stringify(value2);
+      try {
+        if (raw === null) store.removeItem(key);
+        else store.setItem(key, raw);
+      } catch (error) {
+        onError?.(error);
+      }
+      target.raw = raw;
+      target.value = value2;
+      target.decoded = raw !== null;
+      notify(target);
+    },
+    [store, key, fallback, onError]
+  );
+  return [value, set];
+}
+const NONE = {
+  documents: "file:///data/Documents",
+  applicationSupport: "file:///data/Library/Application%20Support",
+  caches: "file:///data/Library/Caches",
+  temporary: "file:///tmp"
+};
+async function bytesOf(contents) {
+  if (typeof contents === "string") return new TextEncoder().encode(contents);
+  if (contents instanceof Uint8Array) return contents;
+  if (contents instanceof ArrayBuffer) return new Uint8Array(contents);
+  const blob = contents;
+  if (typeof blob.bytes === "function") return await blob.bytes();
+  return new Uint8Array(await blob.arrayBuffer());
+}
+function createFileManager(host) {
+  const required = () => {
+    const files = host();
+    if (!files) throw new Error("unsupported: this page keeps no files");
+    return files;
+  };
+  const directories = () => host()?.directories ?? NONE;
+  return {
+    get available() {
+      return host() !== void 0;
+    },
+    get documentsDirectory() {
+      return directories().documents;
+    },
+    get applicationSupportDirectory() {
+      return directories().applicationSupport;
+    },
+    get cachesDirectory() {
+      return directories().caches;
+    },
+    get temporaryDirectory() {
+      return directories().temporary;
+    },
+    url: (directory, path) => fileURL(directory, path),
+    contents: async (url) => required().read(url),
+    text: async (url) => new TextDecoder().decode(await required().read(url)),
+    write: async (url, contents) => required().write(url, await bytesOf(contents)),
+    contentsOfDirectory: async (url) => required().list(url),
+    createDirectory: async (url) => required().createDirectory(url),
+    fileExists: async (url) => await required().attributes(url) !== null,
+    attributesOfItem: async (url) => {
+      const attributes = await required().attributes(url);
+      if (!attributes) throw new Error(`notFound: nothing at ${url}`);
+      return attributes;
+    },
+    moveItem: async (from, to) => required().move(from, to),
+    copyItem: async (from, to) => required().copy(from, to),
+    removeItem: async (url) => required().remove(url),
+    loadURL: async (url) => required().loadURL(url)
+  };
+}
+const fileManager = createFileManager(() => browserEnvironment.files);
 function Button(props) {
   const { own, modifiers } = splitProps(props);
   const environment = useViewEnvironment();
   const ownStyle = takeModifier(modifiers, "buttonStyle");
   const ownSize = takeModifier(modifiers, "controlSize");
-  const style = ownStyle === "borderless" ? "plain" : ownStyle ?? environment.buttonStyle ?? "automatic";
+  const style = ownStyle ?? environment.buttonStyle ?? "automatic";
   const controlSize = ownSize ?? environment.controlSize;
   const buttonProps = { role: own.role ?? null, style };
   if (controlSize !== void 0 && controlSize !== "regular") buttonProps["controlSize"] = controlSize;
@@ -2930,9 +3693,13 @@ function Button(props) {
 }
 function Toggle(props) {
   const { own, modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const style = takeModifier(modifiers, "toggleStyle") ?? environment.toggleStyle ?? "automatic";
   const [isOn, setOn] = readBinding(own.isOn, own.onChange);
   const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
-  return applyModifiers(sb("toggle", { isOn }, { toggle: (event) => setOn(event.value) }, label), modifiers);
+  const toggleProps = { isOn };
+  if (style !== "automatic") toggleProps["style"] = style;
+  return applyModifiers(sb("toggle", toggleProps, { toggle: (event) => setOn(event.value) }, label), modifiers);
 }
 function Picker(props) {
   const { own, modifiers } = splitProps(props);
@@ -3052,6 +3819,7 @@ function TextField(props) {
     secure: own.secure ?? false
   };
   if (own.onSubmit) fieldProps["submit"] = true;
+  if (own.onDeleteBackward) fieldProps["deleteBackward"] = true;
   if (own.axis) fieldProps["axis"] = own.axis;
   const submitLabel = ownSubmitLabel ?? environment.submitLabel;
   if (submitLabel) fieldProps["submitLabel"] = submitLabel;
@@ -3059,12 +3827,13 @@ function TextField(props) {
   if (hints.contentType) fieldProps["contentType"] = hints.contentType;
   if (hints.autocapitalization) fieldProps["autocapitalization"] = hints.autocapitalization;
   if (hints.autocorrectionDisabled) fieldProps["autocorrectionDisabled"] = true;
-  const focus = own.focused !== void 0 ? readBinding(own.focused) : null;
+  const focus = focusBinding(own);
   if (focus) fieldProps["focused"] = focus[0];
   return applyModifiers(
     sb("textfield", fieldProps, {
       text: (event) => setText(event.value),
       submit: () => own.onSubmit?.(),
+      deletebackward: () => own.onDeleteBackward?.(),
       focus: (event) => focus?.[1](event.value)
     }),
     modifiers
@@ -3073,6 +3842,19 @@ function TextField(props) {
 function SecureField(props) {
   return /* @__PURE__ */ jsx(TextField, { ...props, secure: true });
 }
+function focusBinding(props) {
+  if (props.focused === void 0) return null;
+  if (props.focusedValue === void 0) return readBinding(props.focused);
+  const value = props.focusedValue;
+  const [current, set] = readBinding(props.focused);
+  return [
+    current === value,
+    (on) => {
+      if (on) set(value);
+      else if (current === value) set(null);
+    }
+  ];
+}
 function ProgressView(props) {
   const { own, modifiers } = splitProps(props);
   if (own.value === void 0) {
@@ -3125,11 +3907,25 @@ function DatePicker(props) {
 function TextEditor(props) {
   const { own, modifiers } = splitProps(props);
   const [text, setText] = readBinding(own.text, own.onChange);
-  const focus = own.focused !== void 0 ? readBinding(own.focused) : null;
-  const editor = { text };
+  const focus = focusBinding(own);
+  const selection = own.selection !== void 0 ? readBinding(own.selection) : null;
+  const rich = typeof text !== "string";
+  const editor = { text: rich ? AttributedText.plain(text) : text };
+  if (rich) editor["runs"] = protocolRuns(text);
   if (focus) editor["focused"] = focus[0];
+  if (selection) editor["selection"] = { start: selection[0].start, end: selection[0].end };
+  if (own.onDeleteBackward) editor["deleteBackward"] = true;
   return applyModifiers(
-    sb("texteditor", editor, { text: (event) => setText(event.value), focus: (event) => focus?.[1](event.value) }),
+    sb("texteditor", editor, {
+      text: (event) => setText(rich ? AttributedText.replacingCharacters(text, event.value) : event.value),
+      deletebackward: () => own.onDeleteBackward?.(),
+      // The native editor's own Bold, Italic or Underline over the text (iOS 26's edit menu): the runs it now shows.
+      runs: (event) => {
+        if (rich) setText(fromProtocolRuns(event.value));
+      },
+      focus: (event) => focus?.[1](event.value),
+      selection: (event) => selection?.[1](event.value)
+    }),
     modifiers
   );
 }
@@ -3184,8 +3980,11 @@ function Form(props) {
 }
 function Section(props) {
   const { own, modifiers } = splitProps(props);
-  const header = supplement(own.header);
-  const footer = supplement(own.footer);
+  const pinned = useContext(PinnedContext);
+  let header = supplement(own.header);
+  let footer = supplement(own.footer);
+  if (pinned?.includes("sectionHeaders") && header.text !== null && !header.view) header = { text: null, view: /* @__PURE__ */ jsx(Text, { children: header.text }) };
+  if (pinned?.includes("sectionFooters") && footer.text !== null && !footer.view) footer = { text: null, view: /* @__PURE__ */ jsx(Text, { children: footer.text }) };
   const children = [];
   if (header.view) children.push(sb("sectionheader", {}, void 0, header.view));
   if (own.children !== void 0) children.push(wrapRows(own.children));
@@ -3441,7 +4240,9 @@ function AsyncImage(props) {
       loaded.set(own.url, "failed");
       if (live) setState("failed");
     };
-    image.src = own.url;
+    const src = loadableURL(own.url);
+    if (typeof src === "string") image.src = src;
+    else void src.then((resolved) => live && (image.src = resolved));
     return () => {
       live = false;
     };
@@ -3720,6 +4521,11 @@ function Chart(props) {
     const centers = [...new Set(marks.filter((m) => m.kind === "bar").map((m) => ux(m.props.x)))].sort((a, b) => a - b);
     for (let i = 1; i < centers.length; i++) continuousBand = Math.min(continuousBand, centers[i] - centers[i - 1]);
   }
+  const positions = [];
+  for (const mark of marks) {
+    const key = mark.kind === "bar" ? mark.props.positionBy : void 0;
+    if (key !== void 0 && !positions.includes(key)) positions.push(key);
+  }
   const encoded = [];
   const items = [];
   const annotate = (mark, rect) => {
@@ -3759,7 +4565,12 @@ function Chart(props) {
     switch (mark.kind) {
       case "bar": {
         const style = common(mark);
-        const [b0, b1] = xScale.kind === "band" ? xScale.band(p.x) : [ux(p.x) - continuousBand / 2, ux(p.x) + continuousBand / 2];
+        let [b0, b1] = xScale.kind === "band" ? xScale.band(p.x) : [ux(p.x) - continuousBand / 2, ux(p.x) + continuousBand / 2];
+        if (p.positionBy !== void 0 && positions.length > 1) {
+          const slot = (b1 - b0) * 0.8 / positions.length;
+          const start = b0 + (b1 - b0) * 0.1 + slot * positions.indexOf(p.positionBy);
+          [b0, b1] = [start - slot / 16, start + slot + slot / 16];
+        }
         const center = round2((b0 + b1) / 2);
         const half = round2((b1 - b0) * 0.8 / 2);
         const top = uy(Math.max(asNumber(p.y), p.yStart ?? 0));
@@ -4298,12 +5109,12 @@ function TimelineView({ schedule, children }) {
       };
     }
     if (typeof schedule === "object" && "periodic" in schedule) {
-      const every = Math.max(schedule.periodic.by, 0.01) * 1e3;
+      const every2 = Math.max(schedule.periodic.by, 0.01) * 1e3;
       const from = schedule.periodic.from?.getTime() ?? Date.now();
       let timer;
       const tick = () => {
         const now = Date.now();
-        const next = from + Math.ceil((now - from + 1) / every) * every;
+        const next = from + Math.ceil((now - from + 1) / every2) * every2;
         timer = setTimeout(() => {
           setDate(new Date(next));
           tick();
@@ -4335,7 +5146,10 @@ class AVPlayer {
   timeListeners = /* @__PURE__ */ new Set();
   time = 0;
   serial = 0;
+  /** @internal The `report` interval for the views showing this player. */
+  report;
   constructor(url = null, options = {}) {
+    this.report = options.report;
     this.state = {
       url,
       rate: 0,
@@ -4537,6 +5351,7 @@ function videoElement(player, state, options) {
       gravity: options.gravity ?? "resizeAspect",
       controls: options.controls,
       seek: state.seek,
+      ...player.report !== void 0 && player.report > 0 ? { report: player.report } : {},
       ...state.size ? { width: state.size.width, height: state.size.height } : {}
     },
     { video: (event) => player.handle(event) }
@@ -4692,6 +5507,7 @@ export {
   AngularGradient,
   AreaMark,
   AsyncImage,
+  AttributedText,
   AudioPlayer,
   BarMark,
   Button,
@@ -4716,6 +5532,7 @@ export {
   ForEach,
   Form,
   Gauge,
+  GeometryChangeView,
   GeometryReader,
   GraphicsContext,
   Grid,
@@ -4748,6 +5565,7 @@ export {
   Path,
   PhaseAnimator,
   Picker,
+  PinnedContext,
   PointMark,
   ProgressView,
   RadialGradient,
@@ -4777,6 +5595,8 @@ export {
   ToolbarItem,
   ToolbarItemGroup,
   ToolbarSpacer,
+  UndoManager,
+  UndoManagerContext,
   UnevenRoundedRectangle,
   VStack,
   VideoPlayer,
@@ -4784,9 +5604,14 @@ export {
   VisualEffect,
   ZStack,
   answerLayout,
+  appStorage,
+  canMeasureText,
   color,
+  createFileManager,
   createSwiftUIRoot,
+  fileManager,
   flattenChildren,
+  focusBinding,
   font,
   frame,
   geometryProxy,
@@ -4794,7 +5619,9 @@ export {
   hex,
   injectIntoDevTools,
   insets,
+  installTextMeasurer,
   keyframeValues,
+  measureText,
   mount,
   moveItems,
   nextGeometry,
@@ -4807,12 +5634,15 @@ export {
   providingScrollSettings,
   readBinding,
   rgb,
+  scrollGeometryOf,
   shapeStyle,
   system,
   takeScrollSettings,
   timeTicks,
   unitPoint,
   useAVPlayer,
+  useAppStorage,
+  useAudioRecorder,
   useColorScheme,
   useContextBridge,
   useCoordinateSpaces,
@@ -4824,6 +5654,7 @@ export {
   useRedacted,
   useRefreshable,
   useReportSplitSelection,
+  useUndoManager,
   useViewEnvironment,
   weighted,
   withAnimation