@swiftbrowser/react 0.28.3 → 0.28.5

package/dist/index.js

@@ -4,10 +4,10 @@ import Reconciler from "react-reconciler";
 import { base64Decode, base64Encode } from "@swiftbrowser/web/src/base64";
 import { addLiveBitmap, forgetLiveBitmap } from "@swiftbrowser/web/src/bitmaps";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { browserEnvironment, exportFiles, loadableURL, performHostRequest } from "@swiftbrowser/web/src/hostRequests";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
 import { BrowserHistory } from "@swiftbrowser/web/src/browserHistory";
 import { watchKeyboard } from "@swiftbrowser/web/src/deviceMode";
-import { browserEnvironment, exportFiles, loadableURL, performHostRequest } from "@swiftbrowser/web/src/hostRequests";
 import { Renderer } from "@swiftbrowser/web/src/renderer";
 import { currentScenePhase, watchScenePhase } from "@swiftbrowser/web/src/scenePhase";
 import { applyTypeSizeVariables } from "@swiftbrowser/web/src/typography";
@@ -989,41 +989,136 @@ function findStack(node) {
   for (const child of node.children) {
     if (child.kind === "sheet" || child.kind === "alert") continue;
     if (child.kind === "navstack") return child;
+    if (child.kind === "navsplit") return splitDetailStack(child);
     const found = findStack(child);
     if (found) return found;
   }
   return null;
 }
+function findSplit(node) {
+  for (const child of node.children) {
+    if (child.kind === "sheet" || child.kind === "alert" || child.kind === "navstack") continue;
+    if (child.kind === "navsplit") return child;
+    const found = findSplit(child);
+    if (found) return found;
+  }
+  return null;
+}
+const splitSidebarStack = (split) => split.children[0]?.kind === "navstack" ? split.children[0] : null;
+const splitDetailStack = (split) => split.children[1]?.kind === "navstack" ? split.children[1] : null;
 const screensOf = (stack) => stack ? stack.children.filter((child) => child.kind === "navscreen") : [];
-function renderNode(root, node, stack) {
+function renderNode(root, node, stack, elements) {
   if (node.kind === "host") return null;
   if (node === stack) {
     const first = screensOf(stack)[0];
-    return createElement(Fragment, { key: node.id }, first ? renderScreen(root, first, stack) : null);
+    return createElement(Fragment, { key: node.id }, first ? renderScreen(root, first, stack, elements) : null);
   }
-  const children = node.children.length ? node.children.map((child) => renderNode(root, child, stack)) : void 0;
+  if (node.kind === "navsplit" && stack && splitDetailStack(node) === stack) return createElement(Fragment, { key: node.id }, renderNode(root, stack, stack, elements));
+  const children = node.children.length ? node.children.map((child) => renderNode(root, child, stack, elements)) : void 0;
+  const own = elements && Object.prototype.hasOwnProperty.call(elements, node.kind) ? elements[node.kind] : void 0;
+  if (own) return createElement(Fragment, { key: node.id }, own(node.props, children));
   return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), children));
 }
-function renderSheet(root, node, stack, inherited) {
-  const children = node.children.map((child) => renderNode(root, child, stack));
+function renderSheet(root, node, stack, inherited, elements) {
+  const children = node.children.map((child) => renderNode(root, child, stack, elements));
   return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), replayStyles(inherited, children)));
 }
-function renderScreen(root, screen, stack) {
+function renderScreen(root, screen, stack, elements) {
   const out = [screenPrefs(screen.props, "$screen")];
   for (const child of screen.children) {
-    const drawn = renderNode(root, child, stack);
+    const drawn = renderNode(root, child, stack, elements);
     if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
     else out.push(drawn);
   }
   return createElement(Fragment, null, ...out);
 }
-function RemoteScreen({ root, id }) {
+function RemoteScreen({ root, id, elements }) {
   useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
   const screen = root.node(id);
   if (!screen?.parent) return null;
-  return renderScreen(root, screen, findStack(root.root));
+  return renderScreen(root, screen, findStack(root.root), elements);
+}
+function useScreenValues(root, elements) {
+  const values = useRef(/* @__PURE__ */ new Map());
+  const ours = useRef(/* @__PURE__ */ new WeakSet());
+  const keyOf2 = (screen) => `${screen.id}:${JSON.stringify(screen.props["route"] ?? null)}`;
+  const valueFor = (screen) => {
+    const key = keyOf2(screen);
+    let value = values.current.get(key);
+    if (!value) {
+      value = "route" in screen.props ? { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements }), route: screen.props["route"] } : { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements }) };
+      values.current.set(key, value);
+      ours.current.add(value);
+    }
+    return value;
+  };
+  const isOurs = (value) => typeof value === "object" && value !== null && ours.current.has(value);
+  const forget = (keys) => {
+    for (const key of values.current.keys()) if (!keys.includes(key)) values.current.delete(key);
+  };
+  return { valueFor, keyOf: keyOf2, isOurs, forget };
+}
+function useRemoteSidebar(root, path, setPath, options = {}) {
+  const shown = options.shown ?? true;
+  useSyncExternalStore(root ? root.subscribe : noSubscribe, root ? root.getVersion : zero, root ? root.getVersion : zero);
+  const { valueFor, keyOf: keyOf2, isOurs, forget } = useScreenValues(root ?? NO_ROOT, options.elements);
+  const split = root ? findSplit(root.root) : null;
+  const screens = split ? screensOf(splitSidebarStack(split)) : [];
+  const dismissed = useRef(false);
+  const lastKeys = useRef([]);
+  const lastMine = useRef(0);
+  const last = useRef({ root: null, shown: false, generation: void 0 });
+  useLayoutEffect(() => {
+    if (last.current.root !== root || !last.current.shown && shown || last.current.generation !== options.generation) dismissed.current = false;
+    last.current = { root, shown, generation: options.generation };
+    const keys = screens.map(keyOf2);
+    const wanted = shown && !dismissed.current ? screens.map(valueFor) : [];
+    forget(keys);
+    const hosts = path.filter((value) => !isOurs(value));
+    const mine = path.filter(isOurs);
+    const childMoved = keys.length !== lastKeys.current.length || keys.some((key, i) => key !== lastKeys.current[i]);
+    lastKeys.current = keys;
+    const popped = mine.length < lastMine.current;
+    lastMine.current = mine.length;
+    if (root && wanted.length > 0 && !childMoved && popped && mine.length < wanted.length && mine.every((value, i) => value === wanted[i])) {
+      if (mine.length === 0) {
+        dismissed.current = true;
+        return;
+      }
+      root.dispatch({ type: "tap", id: screens[mine.length].id });
+      return;
+    }
+    if (mine.length === wanted.length && mine.every((value, i) => value === wanted[i])) return;
+    lastMine.current = wanted.length;
+    setPath([...hosts, ...wanted]);
+  });
 }
-function RemoteTree({ root, initialPath }) {
+const noSubscribe = () => () => {
+};
+const zero = () => 0;
+const NO_ROOT = {
+  applyOps() {
+  },
+  onEvent() {
+  },
+  onEnvironment() {
+  },
+  dispatch() {
+  },
+  setEnvironment() {
+  },
+  subscribe: noSubscribe,
+  getVersion: zero,
+  root: { id: 0, kind: "root", props: {}, children: [], parent: null },
+  node: () => void 0,
+  rootProps: {},
+  handlersFor: () => ({}),
+  attach() {
+  },
+  dispose() {
+  }
+};
+function RemoteTree({ root, initialPath, elements }) {
   useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
   const environment = useContext(EnvironmentContext);
   const inherited = useInheritedStyles();
@@ -1039,20 +1134,8 @@ function RemoteTree({ root, initialPath }) {
   }, [root, environment]);
   const stack = navigation ? findStack(root.root) : null;
   const pushed = screensOf(stack).slice(1);
-  const values = useRef(/* @__PURE__ */ new Map());
-  const ours = useRef(/* @__PURE__ */ new WeakSet());
+  const { valueFor, keyOf: keyOf2, isOurs, forget } = useScreenValues(root, elements);
   const lastPushed = useRef([]);
-  const keyOf2 = (screen) => `${screen.id}:${JSON.stringify(screen.props["route"] ?? null)}`;
-  const valueFor = (screen) => {
-    const key = keyOf2(screen);
-    let value = values.current.get(key);
-    if (!value) {
-      value = "route" in screen.props ? { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id }), route: screen.props["route"] } : { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id }) };
-      values.current.set(key, value);
-      ours.current.add(value);
-    }
-    return value;
-  };
   const restored = useRef(false);
   useLayoutEffect(() => {
     if (restored.current) return;
@@ -1065,10 +1148,10 @@ function RemoteTree({ root, initialPath }) {
     if (!navigation) return;
     const keys = pushed.map(keyOf2);
     const wanted = pushed.map(valueFor);
-    for (const key of values.current.keys()) if (!keys.includes(key)) values.current.delete(key);
+    forget(keys);
     const tail = navigation.path.slice(depth);
     let shown = 0;
-    while (shown < tail.length && typeof tail[shown] === "object" && tail[shown] !== null && ours.current.has(tail[shown])) shown += 1;
+    while (shown < tail.length && isOurs(tail[shown])) shown += 1;
     const childMoved = keys.length !== lastPushed.current.length || keys.some((key, i) => key !== lastPushed.current[i]);
     lastPushed.current = keys;
     if (!childMoved && shown < wanted.length && tail.slice(0, shown).every((value, i) => value === wanted[i])) {
@@ -1082,13 +1165,192 @@ function RemoteTree({ root, initialPath }) {
   if ("colorScheme" in root.rootProps)
     out.push(createElement(Fragment, { key: "$scheme" }, sb(PREF_KIND, { colorScheme: root.rootProps["colorScheme"] }, void 0, void 0, "root")));
   for (const child of root.root.children) {
-    const drawn = child.kind === "sheet" && inherited.length > 0 ? renderSheet(root, child, stack, inherited) : renderNode(root, child, stack);
+    const drawn = child.kind === "sheet" && inherited.length > 0 ? renderSheet(root, child, stack, inherited, elements) : renderNode(root, child, stack, elements);
     if (child.kind === "sheet" || child.kind === "alert") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "root")));
     else if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
     else out.push(drawn);
   }
   return createElement(Fragment, null, ...out);
 }
+function readBinding(value, onChange) {
+  if (Array.isArray(value) && value.length === 2 && typeof value[1] === "function") {
+    const [current, set] = value;
+    return [current, set];
+  }
+  return [value, onChange ?? (() => {
+  })];
+}
+let active = null;
+function Draggable({ payload, children }) {
+  return sb(
+    "draggable",
+    {},
+    {
+      dragstart: (event) => {
+        active = { id: event.id, payload };
+      },
+      dragend: (event) => {
+        if (active?.id === event.id) active = null;
+      }
+    },
+    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 name = item.path ?? item.name ?? "file";
+  if (item.file) {
+    const file = item.file;
+    return item.path !== void 0 && item.path !== file.name ? new File([file], item.path, { type: file.type, lastModified: file.lastModified }) : file;
+  }
+  if (item.url !== void 0 && item.data === void 0) {
+    const fromReference = browserEnvironment.fileFromReference;
+    if (fromReference) {
+      return fromReference({ type: item.type, name, url: item.url, ...item.path !== void 0 ? { path: item.path } : {}, ...item.size !== void 0 ? { size: item.size } : {} });
+    }
+  }
+  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], name, { 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 EXTENSIONS = {
+  "text/plain": "txt",
+  "text/csv": "csv",
+  "text/markdown": "md",
+  "text/html": "html",
+  "application/json": "json",
+  "application/pdf": "pdf",
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/svg+xml": "svg",
+  "audio/mp4": "m4a",
+  "video/mp4": "mp4"
+};
+function exportFile(document2, contentType, defaultFilename, index = 0) {
+  const type = document2 instanceof Blob && document2.type || contentType || "application/octet-stream";
+  let name = defaultFilename ?? (document2 instanceof File ? document2.name : index === 0 ? "Untitled" : `Untitled ${index + 1}`);
+  name = name.replace(/[\\/:*?"<>|]+/g, "-").trim() || "Untitled";
+  const extension = EXTENSIONS[type.split(";")[0].trim()];
+  if (extension && !/\.[A-Za-z0-9]{1,8}$/.test(name)) name = `${name}.${extension}`;
+  if (document2 instanceof File && document2.name === name && document2.type === type) return document2;
+  const bytes = typeof document2 === "string" ? new TextEncoder().encode(document2) : document2;
+  return new File([bytes], name, { type });
+}
+function FileExporterPresenter(spec) {
+  const [presented, setPresented] = readBinding(spec.isPresented);
+  const latest = useRef(spec);
+  latest.current = spec;
+  const exporting = useRef(false);
+  useLayoutEffect(() => {
+    if (!presented || exporting.current) return;
+    const { document: document2, contentType, defaultFilename } = latest.current;
+    const documents = document2 === null ? [] : Array.isArray(document2) ? document2 : [document2];
+    if (documents.length === 0) {
+      setPresented(false);
+      latest.current.onCancellation?.();
+      return;
+    }
+    exporting.current = true;
+    const files = documents.map((item, index) => exportFile(item, contentType, defaultFilename, index));
+    exportFiles(files).then(
+      (result) => {
+        exporting.current = false;
+        setPresented(false);
+        if (result.outcome === "cancelled") latest.current.onCancellation?.();
+        else latest.current.onCompletion?.(result);
+      },
+      (error) => {
+        exporting.current = false;
+        setPresented(false);
+        latest.current.onError?.(error);
+      }
+    );
+  }, [presented, setPresented]);
+  return null;
+}
+const ListSelectionContext = createContext(null);
+function Row({ tag, onDelete, deletable, onMove, movable, index, containerIndex, children }) {
+  const selection = useContext(ListSelectionContext);
+  const selectable = selection !== null && tag !== void 0;
+  const canDelete = onDelete !== void 0 && deletable !== false;
+  const canMove = onMove !== void 0 && movable !== false;
+  if (!selectable && !canDelete && !canMove) return children;
+  const props = {};
+  if (selectable) {
+    props["selectable"] = true;
+    props["selected"] = selection.isSelected(tag);
+  }
+  if (canDelete) props["deletable"] = true;
+  if (canMove) props["movable"] = true;
+  return sb(
+    "listrow",
+    props,
+    {
+      tap: () => selectable && selection.select(tag),
+      delete: () => onDelete?.(),
+      move: (event) => {
+        const start = (containerIndex ?? index ?? 0) - (index ?? 0);
+        onMove?.(Math.max(0, event.to - start));
+      }
+    },
+    children
+  );
+}
 const HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
 function rgb(r2, g, b, a = 1) {
   return { r: r2, g, b, a };
@@ -1235,608 +1497,15 @@ function insets(edges, 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);
+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 decidePlatform(width, media = matchesMedia) {
-  return horizontalSizeClassFor(width) === "regular" && media("(hover: hover) and (pointer: fine)") ? "macos" : "ios";
-}
-function matchesMedia(query) {
-  return typeof matchMedia === "function" && matchMedia(query).matches;
-}
-function mount(screen, element, options = {}) {
-  let renderer = null;
-  const root = createSwiftUIRoot((ops) => renderer?.applyOps(ops));
-  renderer = new Renderer(screen, (event) => root.dispatch(event));
-  renderer.fileDrops = "reference";
-  const measurer = (text, font2, width2) => renderer.measureText(text, font2, width2);
-  installTextMeasurer(measurer);
-  let pageScheme = options.colorScheme ?? "light";
-  let preferred = null;
-  const width = screen.clientWidth || 393;
-  const environment = {
-    colorScheme: pageScheme,
-    dynamicTypeSize: options.dynamicTypeSize ?? "large",
-    horizontalSizeClass: horizontalSizeClassFor(width),
-    scenePhase: typeof document !== "undefined" ? currentScenePhase() : "active",
-    platform: options.platform === void 0 || options.platform === "auto" ? decidePlatform(width) : options.platform
-  };
-  renderer.contentHeight = options.contentHeight ?? false;
-  if (options.sidebarTitleBar === false) renderer.sidebarTitleBar = false;
-  if (options.assets) renderer.setAssetCatalog(options.assets);
-  if (options.app) browserEnvironment.files?.setApp?.(options.app);
-  renderer.setEnvironment({ colorScheme: environment.colorScheme, dynamicTypeSize: environment.dynamicTypeSize, platform: environment.platform });
-  if (options.safeArea !== void 0) renderer.setSafeArea(options.safeArea);
-  root.setEnvironment(environment);
-  const browserHistory = (options.history ?? true) && typeof window !== "undefined" ? new BrowserHistory(renderer, screen) : null;
-  browserHistory?.enable();
-  const stopKeyboard = options.keyboard && typeof window !== "undefined" ? watchKeyboard((height) => renderer?.setKeyboard(height), { root: screen }) : null;
-  const applyScheme = () => {
-    const scheme = preferred ?? pageScheme;
-    const device = screen.closest(".device");
-    if (device) device.dataset["theme"] = scheme;
-    renderer?.setEnvironment({ colorScheme: scheme });
-    root.setEnvironment({ colorScheme: scheme });
-  };
-  const onPreferredScheme = (event) => {
-    const scheme = event.detail.colorScheme;
-    preferred = scheme;
-    queueMicrotask(applyScheme);
-  };
-  screen.addEventListener("sb:color-scheme", onPreferredScheme);
-  let sizeClass = environment.horizontalSizeClass;
-  const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
-    const next = horizontalSizeClassFor(screen.clientWidth);
-    if (next === sizeClass) return;
-    sizeClass = next;
-    root.setEnvironment({ horizontalSizeClass: next });
-  }) : null;
-  observer?.observe(screen);
-  const stopScenePhase = typeof document !== "undefined" ? watchScenePhase((scenePhase) => root.setEnvironment({ scenePhase })) : null;
-  root.render(element);
-  const mounted = {
-    root,
-    renderer,
-    setEnvironment(next) {
-      if (next.colorScheme !== void 0) pageScheme = next.colorScheme;
-      const scheme = preferred ?? pageScheme;
-      renderer?.setEnvironment({ ...next, colorScheme: scheme });
-      root.setEnvironment({ ...next, colorScheme: scheme });
-    },
-    setSafeArea(insets2) {
-      renderer?.setSafeArea(insets2);
-    },
-    viewportChanged() {
-      renderer?.viewportChanged();
-    },
-    unmount() {
-      observer?.disconnect();
-      stopScenePhase?.();
-      stopKeyboard?.();
-      browserHistory?.dispose();
-      screen.removeEventListener("sb:color-scheme", onPreferredScheme);
-      installTextMeasurer(measurer, true);
-      root.unmount();
-      renderer?.dispose();
-    }
-  };
-  return mounted;
-}
-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,
-  UndoManagerContext
-];
-function useContextBridge(contexts = [], options = {}) {
-  const own = options.environment === false ? OWN.filter((context) => context !== EnvironmentContext) : OWN;
-  const all = [...own, ...contexts];
-  const values = all.map((context) => useContext(context));
-  return (children) => all.reduceRight((inner, context, index) => createElement(context.Provider, { value: values[index] }, inner), children);
-}
-const WINDOW_TOP_INSET = 10;
-function insetsOf(safeArea, fit) {
-  const given = typeof safeArea === "number" ? { top: safeArea } : safeArea ?? { top: fit === "fill" ? WINDOW_TOP_INSET : 0 };
-  return { top: given.top ?? 0, leading: given.leading ?? 0, bottom: given.bottom ?? 0, trailing: given.trailing ?? 0 };
-}
-function SwiftUIView({
-  children,
-  fit = "fill",
-  colorScheme = "light",
-  dynamicTypeSize = "large",
-  contexts,
-  assets,
-  safeArea,
-  history = true,
-  keyboard = fit === "fill",
-  sidebarTitleBar = true,
-  className,
-  style
-}) {
-  const device = useRef(null);
-  const screen = useRef(null);
-  const mounted = useRef(null);
-  const bridge = useContextBridge(contexts, { environment: false });
-  const tree = bridge(children);
-  const latest = useRef(tree);
-  latest.current = tree;
-  useLayoutEffect(() => {
-    if (!screen.current) return;
-    const instance = mount(screen.current, latest.current, {
-      colorScheme,
-      dynamicTypeSize,
-      safeArea: insetsOf(safeArea, fit),
-      contentHeight: fit === "content",
-      history,
-      keyboard,
-      ...assets ? { assets } : {}
-    });
-    mounted.current = instance;
-    return () => {
-      mounted.current = null;
-      instance.unmount();
-    };
-  }, [fit, history, keyboard]);
-  useLayoutEffect(() => {
-    if (mounted.current) mounted.current.renderer.sidebarTitleBar = sidebarTitleBar;
-  }, [sidebarTitleBar, fit, history, keyboard]);
-  useLayoutEffect(() => {
-    mounted.current?.root.render(tree);
-  });
-  const insets2 = insetsOf(safeArea, fit);
-  const insetsKey = `${insets2.top},${insets2.leading},${insets2.bottom},${insets2.trailing}`;
-  useLayoutEffect(() => {
-    mounted.current?.renderer.setSafeArea(insets2);
-  }, [insetsKey]);
-  useLayoutEffect(() => {
-    if (device.current) applyTypeSizeVariables(device.current, dynamicTypeSize, mounted.current?.renderer.platform);
-    mounted.current?.setEnvironment({ colorScheme, dynamicTypeSize });
-  }, [colorScheme, dynamicTypeSize]);
-  const classes = ["device", "sb-island", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { ref: device, className: classes, "data-theme": colorScheme, "data-type-size": dynamicTypeSize, "data-state": "ready", "data-sb-fit": fit, style, children: /* @__PURE__ */ jsx("div", { className: "device-screen", children: /* @__PURE__ */ jsx("div", { ref: screen, className: "screen" }) }) });
-}
-function readBinding(value, onChange) {
-  if (Array.isArray(value) && value.length === 2 && typeof value[1] === "function") {
-    const [current, set] = value;
-    return [current, set];
-  }
-  return [value, onChange ?? (() => {
-  })];
-}
-const CoordinateSpacesContext = createContext({});
-function useCoordinateSpaces() {
-  return useContext(CoordinateSpacesContext);
-}
-function CoordinateSpace({ name, children }) {
-  const spaces = useContext(CoordinateSpacesContext);
-  const [frame2, setFrame] = useState(null);
-  return /* @__PURE__ */ jsx(CoordinateSpacesContext.Provider, { value: { ...spaces, [name]: frame2 }, children: sb(
-    "zstack",
-    { alignment: "center", reportsSize: true, reportsFrame: true },
-    {
-      geometry: (event) => {
-        const next = { x: event.x ?? 0, y: event.y ?? 0, width: event.width, height: event.height };
-        if (!frame2 || frame2.x !== next.x || frame2.y !== next.y || frame2.width !== next.width || frame2.height !== next.height) setFrame(next);
-      }
-    },
-    children
-  ) });
-}
-let active = null;
-function Draggable({ payload, children }) {
-  return sb(
-    "draggable",
-    {},
-    {
-      dragstart: (event) => {
-        active = { id: event.id, payload };
-      },
-      dragend: (event) => {
-        if (active?.id === event.id) active = null;
-      }
-    },
-    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 name = item.path ?? item.name ?? "file";
-  if (item.file) {
-    const file = item.file;
-    return item.path !== void 0 && item.path !== file.name ? new File([file], item.path, { type: file.type, lastModified: file.lastModified }) : file;
-  }
-  if (item.url !== void 0 && item.data === void 0) {
-    const fromReference = browserEnvironment.fileFromReference;
-    if (fromReference) {
-      return fromReference({ type: item.type, name, url: item.url, ...item.path !== void 0 ? { path: item.path } : {}, ...item.size !== void 0 ? { size: item.size } : {} });
-    }
-  }
-  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], name, { 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 EXTENSIONS = {
-  "text/plain": "txt",
-  "text/csv": "csv",
-  "text/markdown": "md",
-  "text/html": "html",
-  "application/json": "json",
-  "application/pdf": "pdf",
-  "image/png": "png",
-  "image/jpeg": "jpg",
-  "image/svg+xml": "svg",
-  "audio/mp4": "m4a",
-  "video/mp4": "mp4"
-};
-function exportFile(document2, contentType, defaultFilename, index = 0) {
-  const type = document2 instanceof Blob && document2.type || contentType || "application/octet-stream";
-  let name = defaultFilename ?? (document2 instanceof File ? document2.name : index === 0 ? "Untitled" : `Untitled ${index + 1}`);
-  name = name.replace(/[\\/:*?"<>|]+/g, "-").trim() || "Untitled";
-  const extension = EXTENSIONS[type.split(";")[0].trim()];
-  if (extension && !/\.[A-Za-z0-9]{1,8}$/.test(name)) name = `${name}.${extension}`;
-  if (document2 instanceof File && document2.name === name && document2.type === type) return document2;
-  const bytes = typeof document2 === "string" ? new TextEncoder().encode(document2) : document2;
-  return new File([bytes], name, { type });
-}
-function FileExporterPresenter(spec) {
-  const [presented, setPresented] = readBinding(spec.isPresented);
-  const latest = useRef(spec);
-  latest.current = spec;
-  const exporting = useRef(false);
-  useLayoutEffect(() => {
-    if (!presented || exporting.current) return;
-    const { document: document2, contentType, defaultFilename } = latest.current;
-    const documents = document2 === null ? [] : Array.isArray(document2) ? document2 : [document2];
-    if (documents.length === 0) {
-      setPresented(false);
-      latest.current.onCancellation?.();
-      return;
-    }
-    exporting.current = true;
-    const files = documents.map((item, index) => exportFile(item, contentType, defaultFilename, index));
-    exportFiles(files).then(
-      (result) => {
-        exporting.current = false;
-        setPresented(false);
-        if (result.outcome === "cancelled") latest.current.onCancellation?.();
-        else latest.current.onCompletion?.(result);
-      },
-      (error) => {
-        exporting.current = false;
-        setPresented(false);
-        latest.current.onError?.(error);
-      }
-    );
-  }, [presented, setPresented]);
-  return null;
-}
-const ListSelectionContext = createContext(null);
-function Row({ tag, onDelete, deletable, onMove, movable, index, containerIndex, children }) {
-  const selection = useContext(ListSelectionContext);
-  const selectable = selection !== null && tag !== void 0;
-  const canDelete = onDelete !== void 0 && deletable !== false;
-  const canMove = onMove !== void 0 && movable !== false;
-  if (!selectable && !canDelete && !canMove) return children;
-  const props = {};
-  if (selectable) {
-    props["selectable"] = true;
-    props["selected"] = selection.isSelected(tag);
-  }
-  if (canDelete) props["deletable"] = true;
-  if (canMove) props["movable"] = true;
-  return sb(
-    "listrow",
-    props,
-    {
-      tap: () => selectable && selection.select(tag),
-      delete: () => onDelete?.(),
-      move: (event) => {
-        const start = (containerIndex ?? index ?? 0) - (index ?? 0);
-        onMove?.(Math.max(0, event.to - start));
-      }
-    },
-    children
-  );
-}
-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;
+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;
@@ -1956,29 +1625,49 @@ function marginedContent(children, margins, axis) {
 }
 const LAZY_BATCH = 12;
 const LazyContext = createContext(null);
+const LazyBatchContext = createContext(LAZY_BATCH);
+const LAZY_GRID_BATCH = 48;
+const LazyWindowContext = createContext(false);
+const LazyStackContext = createContext(false);
 function LazyGroup({ rows, start = 0, wrap: wrap2 }) {
   const axis = useContext(LazyContext);
+  const batch = useContext(LazyBatchContext);
   const request = useContext(ScrollRequestContext);
-  const [count, setCount] = useState(LAZY_BATCH);
+  const windowed = useContext(LazyWindowContext) && useContext(LazyStackContext) && axis !== null;
+  const [count, setCount] = useState(batch);
+  const [front, setFront] = useState({ from: 0, extents: [] });
   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;
+  const needed = target >= 0 ? Math.ceil((target + 1) / batch) * batch : 0;
   useEffect(() => {
     if (needed > count) setCount(needed);
-  }, [needed, count]);
+    if (target >= 0 && target < front.from) setFront({ from: Math.floor(target / batch) * batch, extents: front.extents.slice(0, Math.floor(target / batch)) });
+  }, [needed, count, target, front, batch]);
   const visible = Math.max(count, needed);
-  const shown = axis === null ? rows : rows.slice(0, visible);
-  const built = shown.map((row, index) => wrap2 ? wrap2(row, start + index) : row);
-  if (axis === null || shown.length >= rows.length) return built;
-  return [
-    ...built,
-    createElement(
-      LazySpacer,
-      { key: `lazy-${visible}`, axis, remaining: rows.length - shown.length, more: () => setCount(visible + LAZY_BATCH) }
-    )
-  ];
-}
-function LazySpacer({ axis, remaining, more }) {
-  return sb("lazyspacer", { axis, remaining }, { lazy: more });
+  const from = windowed ? Math.min(front.from, Math.max(0, visible - batch)) : 0;
+  const shown = axis === null ? rows : rows.slice(from, visible);
+  const built = shown.map((row, index) => wrap2 ? wrap2(row, start + from + index) : row);
+  if (axis === null || !windowed && shown.length >= rows.length) return built;
+  const ask = (event) => {
+    if (event.drop && event.drop > 0) {
+      const drop = Math.min(event.drop, shown.length - batch);
+      if (drop > 0) setFront({ from: from + drop, extents: [...front.extents, ...(event.extents ?? []).slice(0, Math.ceil(drop / batch))] });
+    } else if (event.dropEnd && event.dropEnd > 0) {
+      setCount(Math.max(from + batch, visible - event.dropEnd));
+    } else if (from > 0) {
+      setFront({ from: Math.max(0, from - batch), extents: front.extents.slice(0, -1) });
+    }
+  };
+  const leading = windowed ? [createElement(LazySpacer, { key: `lazy-lead-${from}`, axis, remaining: from, edge: "leading", extent: front.extents.reduce((a, b) => a + b, 0), built: shown.length, batch, ask })] : [];
+  const trailing = visible < rows.length ? [createElement(LazySpacer, { key: `lazy-${visible}`, axis, remaining: rows.length - visible, ask: () => setCount(visible + batch) })] : [];
+  return [...leading, ...built, ...trailing];
+}
+function LazySpacer({
+  axis,
+  remaining,
+  ask,
+  ...leading
+}) {
+  return sb("lazyspacer", { axis, remaining, ...leading }, { lazy: ask });
 }
 function rowMatches(row, id) {
   if (row.key !== null && row.key === String(id)) return true;
@@ -2008,6 +1697,11 @@ function HStack(props) {
   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 FlowStack(props) {
+  const { own, modifiers } = splitProps(props);
+  const stack = { spacing: own.spacing ?? null, lineSpacing: own.lineSpacing ?? null, alignment: own.alignment ?? "center" };
+  return applyModifiers(sb("flowstack", stack, void 0, own.children), modifiers);
+}
 function ZStack(props) {
   const { own, modifiers } = splitProps(props);
   return applyModifiers(sb("zstack", { alignment: own.alignment ?? "center" }, void 0, own.children), modifiers);
@@ -2140,547 +1834,910 @@ function keyOf(element, index) {
     const id = element.id;
     if (typeof id === "string" || typeof id === "number") return id;
   }
-  return index;
+  return index;
+}
+function flattenChildren(children, options = {}) {
+  const result = [];
+  const visit = (node) => {
+    if (node === null || node === void 0 || typeof node === "boolean") return;
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    if (!isValidElement(node)) return;
+    const element = node;
+    if (element.type === Fragment) {
+      const inner = element.props["children"];
+      if (element.key !== null && isValidElement(inner) && inner.key === null && inner.type !== Fragment) {
+        visit({ ...inner, key: element.key });
+        return;
+      }
+      visit(inner);
+      return;
+    }
+    if (element.type === ForEach) {
+      visit(ForEach(element.props));
+      return;
+    }
+    if (element.type === LazyGroup && !options.keepLazy) {
+      visit(element.props.rows);
+      return;
+    }
+    result.push(element);
+  };
+  visit(children);
+  return result;
+}
+function GridItem(spec = {}) {
+  const dimension = (n) => n === void 0 || n === Infinity ? "infinity" : n;
+  let size;
+  if (spec.size && "fixed" in spec.size) size = { kind: "fixed", value: spec.size.fixed };
+  else if (spec.size && "adaptive" in spec.size) {
+    size = { kind: "adaptive", minimum: spec.size.adaptive.minimum, maximum: dimension(spec.size.adaptive.maximum) };
+  } else {
+    const flexible = spec.size && "flexible" in spec.size ? spec.size.flexible : {};
+    size = { kind: "flexible", minimum: flexible.minimum ?? 10, maximum: dimension(flexible.maximum) };
+  }
+  return { size, spacing: spec.spacing ?? null, alignment: spec.alignment ?? null };
+}
+GridItem.flexible = (options = {}) => GridItem({ size: { flexible: options }, spacing: options.spacing, alignment: options.alignment });
+GridItem.fixed = (value, options = {}) => GridItem({ size: { fixed: value }, spacing: options.spacing, alignment: options.alignment });
+GridItem.adaptive = (options) => GridItem({ size: { adaptive: options }, spacing: options.spacing, alignment: options.alignment });
+function lazyCells(axis, children) {
+  return createElement(LazyContext.Provider, { value: axis }, createElement(LazyStackContext.Provider, { value: false }, createElement(LazyBatchContext.Provider, { value: LAZY_GRID_BATCH }, children)));
+}
+function LazyVGrid(props) {
+  const { own, modifiers } = splitProps(props);
+  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, lazyCells("vertical", pinning(own.pinnedViews, own.children))), modifiers);
+}
+function LazyHGrid(props) {
+  const { own, modifiers } = splitProps(props);
+  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, lazyCells("horizontal", pinning(own.pinnedViews, own.children))), modifiers);
+}
+function Grid(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(
+    sb(
+      "grid",
+      { horizontalSpacing: own.horizontalSpacing ?? null, verticalSpacing: own.verticalSpacing ?? null, alignment: own.alignment ?? "center" },
+      void 0,
+      own.children
+    ),
+    modifiers
+  );
+}
+function GridRow(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("gridrow", { alignment: own.alignment ?? null }, void 0, own.children), modifiers);
+}
+function runStyleOf(props, inherited, nested) {
+  const style = { ...inherited };
+  if (props.italic) style.italic = true;
+  if (props.underline) style.underline = typeof props.underline === "object" && props.underline.color ? { color: color(props.underline.color) } : {};
+  if (props.strikethrough) {
+    style.strikethrough = typeof props.strikethrough === "object" && props.strikethrough.color ? { color: color(props.strikethrough.color) } : {};
+  }
+  const kerning = props.tracking ?? props.kerning;
+  if (kerning !== void 0) style.kerning = kerning;
+  if (props.baselineOffset !== void 0) style.baselineOffset = props.baselineOffset;
+  if (props.link) style.link = props.link;
+  if (nested) {
+    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);
+    }
+    const background = runBackground(props.background);
+    if (background) style.background = background;
+  }
+  return style;
+}
+function runBackground(value) {
+  if (typeof value === "string") {
+    const made = color(value);
+    return "hierarchical" in made ? void 0 : made;
+  }
+  if (typeof value !== "object" || value === null || isValidElement(value) || "in" in value) return void 0;
+  return "r" in value || "name" in value || "named" in value ? value : void 0;
+}
+function segmentsOf(children, style, into) {
+  const visit = (node) => {
+    if (node === null || node === void 0 || typeof node === "boolean") return;
+    if (typeof node === "string" || typeof node === "number") {
+      const last = into[into.length - 1];
+      if (last && "text" in last && last.style === style) last.text += String(node);
+      else into.push({ text: String(node), style });
+      return;
+    }
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    if (!isValidElement(node)) return;
+    const element = node;
+    if (element.type === Fragment) {
+      visit(element.props["children"]);
+      return;
+    }
+    if (element.type === Text) {
+      const props = element.props;
+      segmentsOf(props.children, runStyleOf(props, style, true), into);
+      return;
+    }
+    if (element.type === Image$1) {
+      const props = element.props;
+      into.push({ image: imageProps$1(props), style });
+      return;
+    }
+  };
+  visit(children);
+}
+function isPlainStyle(style) {
+  return Object.keys(style).length === 0;
+}
+function Text(props) {
+  const { own, modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const style = runStyleOf(props, {}, false);
+  const segments = [];
+  segmentsOf(own.children, style, segments);
+  const textCase = takeModifier(modifiers, "textCase") ?? environment.textCase;
+  if (textCase) {
+    for (const segment of segments) {
+      if ("text" in segment) segment.text = textCase === "uppercase" ? segment.text.toUpperCase() : segment.text.toLowerCase();
+    }
+  }
+  const redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
+  const content = segments.map((segment) => "text" in segment ? segment.text : "").join("");
+  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;
+    else run["image"] = segment.image;
+    return run;
+  });
+  const hasLinks = segments.some((segment) => segment.style.link);
+  const handlers = hasLinks ? { link: (event) => openURL(event.value) } : void 0;
+  return applyModifiers(placeholder(sb("text", { text: content, runs }, handlers), redacted), modifiers);
+}
+function placeholder(node, redacted) {
+  if (!redacted) return node;
+  return styled({ background: { hierarchical: 3 }, backgroundCornerRadius: 4 }, styled({ foreground: { name: "clear" } }, node));
+}
+function openURL(url) {
+  const native = globalThis.__sbNative;
+  if (native?.openURL) {
+    native.openURL(url);
+    return;
+  }
+  if (typeof window !== "undefined") window.open(url, "_blank", "noopener");
+}
+function imageProps$1(props) {
+  if (props.systemName !== void 0) return { systemName: props.systemName };
+  if (props.bitmap !== void 0) {
+    const { source, steps = [], version } = props.bitmap;
+    const extent = bitmapExtent(source, steps);
+    const finite = Number.isFinite(extent.width) && Number.isFinite(extent.height);
+    const width = finite ? Math.max(0, Math.round(extent.width)) : 0;
+    const height = finite ? Math.max(0, Math.round(extent.height)) : 0;
+    const scale = props.scale !== void 0 && props.scale > 0 ? props.scale : 1;
+    return {
+      bitmap: { source: source?.key ?? null, steps, width, height, ...version !== void 0 ? { version } : {} },
+      resizable: props.resizable ?? false,
+      width: width / scale,
+      height: height / scale,
+      ...props.interpolation === "none" ? { interpolation: "none" } : {}
+    };
+  }
+  if (props.url !== void 0) return { url: props.url, resizable: props.resizable ?? false, width: props.width ?? 0, height: props.height ?? 0 };
+  return { name: props.name ?? "", resizable: props.resizable ?? false };
 }
-function flattenChildren(children, options = {}) {
-  const result = [];
-  const visit = (node) => {
-    if (node === null || node === void 0 || typeof node === "boolean") return;
-    if (Array.isArray(node)) {
-      node.forEach(visit);
-      return;
-    }
-    if (!isValidElement(node)) return;
-    const element = node;
-    if (element.type === Fragment) {
-      const inner = element.props["children"];
-      if (element.key !== null && isValidElement(inner) && inner.key === null && inner.type !== Fragment) {
-        visit({ ...inner, key: element.key });
-        return;
-      }
-      visit(inner);
-      return;
-    }
-    if (element.type === ForEach) {
-      visit(ForEach(element.props));
-      return;
-    }
-    if (element.type === LazyGroup && !options.keepLazy) {
-      visit(element.props.rows);
-      return;
-    }
-    result.push(element);
-  };
-  visit(children);
-  return result;
+function Image$1(props) {
+  const { modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
+  const mode = takeModifier(modifiers, "symbolRenderingMode") ?? environment.symbolRenderingMode;
+  const own = imageProps$1(props);
+  const element = props.systemName !== void 0 && mode === "palette" ? { ...own, renderingMode: "palette" } : own;
+  if (props.accessibilityLabel) element["accessibilityLabel"] = props.accessibilityLabel;
+  return applyModifiers(placeholder(sb("image", element), redacted), modifiers);
 }
-function GridItem(spec = {}) {
-  const dimension = (n) => n === void 0 || n === Infinity ? "infinity" : n;
-  let size;
-  if (spec.size && "fixed" in spec.size) size = { kind: "fixed", value: spec.size.fixed };
-  else if (spec.size && "adaptive" in spec.size) {
-    size = { kind: "adaptive", minimum: spec.size.adaptive.minimum, maximum: dimension(spec.size.adaptive.maximum) };
-  } else {
-    const flexible = spec.size && "flexible" in spec.size ? spec.size.flexible : {};
-    size = { kind: "flexible", minimum: flexible.minimum ?? 10, maximum: dimension(flexible.maximum) };
+function Label(props) {
+  const { own, modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const style = takeModifier(modifiers, "labelStyle") ?? environment.labelStyle ?? "automatic";
+  const icon = own.icon ?? (own.systemImage !== void 0 ? /* @__PURE__ */ jsx(Image$1, { systemName: own.systemImage }) : own.image !== void 0 ? /* @__PURE__ */ jsx(Image$1, { name: own.image }) : null);
+  const title = typeof own.title === "string" || typeof own.title === "number" ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.title;
+  if (style === "iconOnly") {
+    const name = typeof own.title === "string" || typeof own.title === "number" ? String(own.title) : void 0;
+    const named = own.icon === void 0 && name !== void 0 ? own.systemImage !== void 0 ? /* @__PURE__ */ jsx(Image$1, { systemName: own.systemImage, accessibilityLabel: name }) : own.image !== void 0 ? /* @__PURE__ */ jsx(Image$1, { name: own.image, accessibilityLabel: name }) : icon : icon;
+    return applyModifiers(named, modifiers);
   }
-  return { size, spacing: spec.spacing ?? null, alignment: spec.alignment ?? null };
+  if (style === "titleOnly") return applyModifiers(title, modifiers);
+  return applyModifiers(
+    /* @__PURE__ */ jsxs(HStack, { spacing: 8, children: [
+      style === "titleAndIcon" ? icon : styled({ labelIcon: true }, icon),
+      title
+    ] }),
+    modifiers
+  );
 }
-GridItem.flexible = (options = {}) => GridItem({ size: { flexible: options }, spacing: options.spacing, alignment: options.alignment });
-GridItem.fixed = (value, options = {}) => GridItem({ size: { fixed: value }, spacing: options.spacing, alignment: options.alignment });
-GridItem.adaptive = (options) => GridItem({ size: { adaptive: options }, spacing: options.spacing, alignment: options.alignment });
-function LazyVGrid(props) {
+function LabeledContent(props) {
   const { own, modifiers } = splitProps(props);
-  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);
+  const label = typeof own.label === "string" || typeof own.label === "number" ? /* @__PURE__ */ jsx(Text, { children: own.label }) : own.label;
+  const content = own.children ?? own.value;
+  const value = typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ jsx(Text, { children: content }) : content;
+  return applyModifiers(
+    /* @__PURE__ */ jsxs(HStack, { children: [
+      label,
+      sb("spacer", { minLength: null }),
+      styled({ foreground: { hierarchical: 2 } }, value)
+    ] }),
+    modifiers
+  );
 }
-function LazyHGrid(props) {
+function Link(props) {
   const { own, modifiers } = splitProps(props);
-  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);
+  const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
+  return applyModifiers(sb("button", { role: null, style: "automatic" }, { tap: () => openURL(own.destination) }, label), modifiers);
 }
-function Grid(props) {
+const isPushedView = (value) => typeof value === "object" && value !== null && "view" in value && isValidElement(value.view);
+function routeOf(value, depth = 0) {
+  if (depth > 8) return void 0;
+  if (value === null || typeof value === "string" || typeof value === "boolean") return value;
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  if (Array.isArray(value)) {
+    const items = value.map((item) => routeOf(item, depth + 1));
+    return items.every((item) => item !== void 0) ? items : void 0;
+  }
+  if (typeof value === "object" && !isPushedView(value)) {
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null) return void 0;
+    const out = {};
+    for (const [key, item] of Object.entries(value)) {
+      if (item === void 0) continue;
+      const plain2 = routeOf(item, depth + 1);
+      if (plain2 === void 0) return void 0;
+      out[key] = plain2;
+    }
+    return out;
+  }
+  return void 0;
+}
+function NavigationStack(props) {
+  const enclosing = useNavigation();
+  if (enclosing) return /* @__PURE__ */ jsx(FlattenedStack, { ...props });
+  return /* @__PURE__ */ jsx(OwnStack, { ...props });
+}
+function FlattenedStack(props) {
   const { own, modifiers } = splitProps(props);
   return applyModifiers(
-    sb(
-      "grid",
-      { horizontalSpacing: own.horizontalSpacing ?? null, verticalSpacing: own.verticalSpacing ?? null, alignment: own.alignment ?? "center" },
-      void 0,
+    /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      own.destination && /* @__PURE__ */ jsx(RegisterDestination, { destination: own.destination }),
       own.children
-    ),
+    ] }),
     modifiers
   );
 }
-function GridRow(props) {
+function OwnStack(props) {
   const { own, modifiers } = splitProps(props);
-  return applyModifiers(sb("gridrow", { alignment: own.alignment ?? null }, void 0, own.children), modifiers);
+  const remote = useContext(HostTreeContext)?.remote ?? false;
+  const [internalPath, setInternalPath] = useState([]);
+  const [path, setPath] = own.path !== void 0 ? readBinding(own.path, own.onPathChange) : [internalPath, setInternalPath];
+  const destination = useRef(null);
+  destination.current = own.destination ?? null;
+  const context = {
+    push: (value) => setPath([...path, value]),
+    pop: () => setPath(path.slice(0, -1)),
+    path,
+    setPath: (next) => setPath(next),
+    registerDestination: (builder) => {
+      destination.current = builder;
+    }
+  };
+  const screens = [
+    /* @__PURE__ */ jsx(Fragment, { children: sb("navscreen", { title: "", displayMode: "automatic", depth: 0 }, { tap: context.pop }, /* @__PURE__ */ jsx(ScreenDepthContext.Provider, { value: 0, children: own.children })) }, "root")
+  ];
+  path.forEach((value, index) => {
+    const pop = () => setPath(path.slice(0, index));
+    const route = remote ? routeOf(value) : void 0;
+    screens.push(
+      /* @__PURE__ */ jsx(Fragment, { children: sb(
+        "navscreen",
+        { title: "", displayMode: "automatic", depth: index + 1, ...route === void 0 ? {} : { route } },
+        { tap: pop },
+        /* @__PURE__ */ jsx(DismissContext.Provider, { value: pop, children: /* @__PURE__ */ jsx(ScreenDepthContext.Provider, { value: index + 1, children: /* @__PURE__ */ jsx(PathScreen, { value, destination }) }) })
+      ) }, index + 1)
+    );
+  });
+  return applyModifiers(
+    sb("navstack", {}, { setpath: (event) => setPath(Array.isArray(event.path) ? event.path : []) }, /* @__PURE__ */ jsx(NavigationContext.Provider, { value: context, children: screens })),
+    modifiers
+  );
 }
-function runStyleOf(props, inherited, nested) {
-  const style = { ...inherited };
-  if (props.italic) style.italic = true;
-  if (props.underline) style.underline = typeof props.underline === "object" && props.underline.color ? { color: color(props.underline.color) } : {};
-  if (props.strikethrough) {
-    style.strikethrough = typeof props.strikethrough === "object" && props.strikethrough.color ? { color: color(props.strikethrough.color) } : {};
-  }
-  const kerning = props.tracking ?? props.kerning;
-  if (kerning !== void 0) style.kerning = kerning;
-  if (props.baselineOffset !== void 0) style.baselineOffset = props.baselineOffset;
-  if (props.link) style.link = props.link;
-  if (nested) {
-    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);
+function PathScreen({ value, destination }) {
+  if (isPushedView(value)) return value.view;
+  return destination.current ? destination.current(value) : null;
+}
+function NavigationLink(props) {
+  const { own, modifiers } = splitProps(props);
+  const navigation = useNavigation();
+  const environment = useViewEnvironment();
+  const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
+  const listSelection = useContext(ListSelectionContext);
+  const sidebar = useContext(SplitSelectionContext) !== null && listSelection !== null && own.destination === void 0 && own.value !== void 0;
+  const tap = () => {
+    if (sidebar) {
+      listSelection.select(own.value);
+      return;
     }
-    const background = runBackground(props.background);
-    if (background) style.background = background;
-  }
-  return style;
+    if (!navigation) return;
+    if (own.destination !== void 0) navigation.push({ view: own.destination });
+    else navigation.push(own.value);
+  };
+  const style = takeModifier(modifiers, "buttonStyle") ?? environment.buttonStyle;
+  const linkProps = style === "plain" ? { style: "plain" } : {};
+  if (sidebar) linkProps["selects"] = true;
+  return applyModifiers(sb("navlink", linkProps, { tap }, label), modifiers);
 }
-function runBackground(value) {
-  if (typeof value === "string") {
-    const made = color(value);
-    return "hierarchical" in made ? void 0 : made;
+const SplitSelectionContext = createContext(null);
+function splitColumnWidthHint(width) {
+  if (typeof width === "number") return { min: width, ideal: width, max: width };
+  return { ...width.min !== void 0 ? { min: width.min } : {}, ideal: width.ideal, ...width.max !== void 0 ? { max: width.max } : {} };
+}
+function NavigationSplitView(props) {
+  const { own, modifiers } = splitProps(props);
+  const sizeClass = useHorizontalSizeClass();
+  const [selected, setSelected] = useState(false);
+  const reporters = useRef(/* @__PURE__ */ new Map());
+  const settle = () => setSelected([...reporters.current.values()].some((entry) => entry.selected));
+  const [report] = useState(() => {
+    return {
+      report: (key, nowSelected, clear2) => {
+        reporters.current.set(key, { selected: nowSelected, clear: clear2 });
+        settle();
+      },
+      retract: (key) => {
+        if (reporters.current.delete(key)) settle();
+      }
+    };
+  });
+  const clear = () => {
+    for (const entry of reporters.current.values()) {
+      if (!entry.selected) continue;
+      entry.clear();
+      entry.selected = false;
+    }
+    settle();
+  };
+  const [internal, setInternal] = useState("automatic");
+  const [visibility, setVisibility] = own.columnVisibility !== void 0 ? readBinding(own.columnVisibility, own.onColumnVisibilityChange) : [internal, setInternal];
+  if (sizeClass === "compact") {
+    return applyModifiers(/* @__PURE__ */ jsx(CompactSplit, { sidebar: own.sidebar, detail: own.detail, report, selected, clear }), modifiers);
   }
-  if (typeof value !== "object" || value === null || isValidElement(value) || "in" in value) return void 0;
-  return "r" in value || "name" in value || "named" in value ? value : void 0;
+  const sidebarVisible = visibility !== "detailOnly";
+  const toggle = () => withAnimation(() => setVisibility(sidebarVisible ? "detailOnly" : "all"));
+  const detail = isValidElement(own.detail) && own.detail.type === NavigationStack ? own.detail : /* @__PURE__ */ jsx(NavigationStack, { children: own.detail });
+  const hinted = (content) => own.sidebarWidth !== void 0 ? sb("styled", { style: { splitColumnWidth: splitColumnWidthHint(own.sidebarWidth) } }, void 0, content) : content;
+  const sidebar = isValidElement(own.sidebar) && own.sidebar.type === NavigationStack ? hinted(own.sidebar) : /* @__PURE__ */ jsx(NavigationStack, { children: hinted(own.sidebar) });
+  return applyModifiers(
+    sb("navsplit", { sidebarVisible }, { tap: toggle, columnwidth: (event) => own.onSidebarWidthChange?.(event.width) }, [
+      /* @__PURE__ */ jsx(SplitColumn, { report, children: sidebar }, "sidebar"),
+      /* @__PURE__ */ jsx(SplitColumn, { report: null, children: detail }, "detail")
+    ]),
+    modifiers
+  );
 }
-function segmentsOf(children, style, into) {
-  const visit = (node) => {
-    if (node === null || node === void 0 || typeof node === "boolean") return;
-    if (typeof node === "string" || typeof node === "number") {
-      const last = into[into.length - 1];
-      if (last && "text" in last && last.style === style) last.text += String(node);
-      else into.push({ text: String(node), style });
-      return;
-    }
-    if (Array.isArray(node)) {
-      node.forEach(visit);
-      return;
-    }
-    if (!isValidElement(node)) return;
-    const element = node;
-    if (element.type === Fragment) {
-      visit(element.props["children"]);
-      return;
-    }
-    if (element.type === Text) {
-      const props = element.props;
-      segmentsOf(props.children, runStyleOf(props, style, true), into);
-      return;
-    }
-    if (element.type === Image$1) {
-      const props = element.props;
-      into.push({ image: imageProps$1(props), style });
+function SplitColumn({ report, children }) {
+  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: report, children }) });
+}
+function CompactSplit({
+  sidebar,
+  detail,
+  report,
+  selected,
+  clear
+}) {
+  const [internal, setInternal] = useState([]);
+  const detailStack = isValidElement(detail) && detail.type === NavigationStack ? detail.props : null;
+  const [extra, setExtra] = detailStack?.path !== void 0 ? readBinding(detailStack.path, detailStack.onPathChange) : [internal, setInternal];
+  const base = selected ? [{ view: detail }] : [];
+  const path = [...base, ...extra];
+  const setPath = (next) => {
+    if (selected && next.length === 0) {
+      setExtra([]);
+      clear();
       return;
     }
+    setExtra(next.slice(base.length));
   };
-  visit(children);
-}
-function isPlainStyle(style) {
-  return Object.keys(style).length === 0;
+  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, children: /* @__PURE__ */ jsx(NavigationStack, { path: [path, setPath], children: /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: report, children: sidebar }) }) }) });
 }
-function Text(props) {
-  const { own, modifiers } = splitProps(props);
-  const environment = useViewEnvironment();
-  const style = runStyleOf(props, {}, false);
-  const segments = [];
-  segmentsOf(own.children, style, segments);
-  const textCase = takeModifier(modifiers, "textCase") ?? environment.textCase;
-  if (textCase) {
-    for (const segment of segments) {
-      if ("text" in segment) segment.text = textCase === "uppercase" ? segment.text.toUpperCase() : segment.text.toLowerCase();
-    }
-  }
-  const redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
-  const content = segments.map((segment) => "text" in segment ? segment.text : "").join("");
-  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;
-    else run["image"] = segment.image;
-    return run;
+function useReportSplitSelection(split, selected, clear, active2 = true) {
+  const key = useRef({}).current;
+  useLayoutEffect(() => {
+    if (active2) split?.report(key, selected, clear);
+    else split?.retract(key);
   });
-  const hasLinks = segments.some((segment) => segment.style.link);
-  const handlers = hasLinks ? { link: (event) => openURL(event.value) } : void 0;
-  return applyModifiers(placeholder(sb("text", { text: content, runs }, handlers), redacted), modifiers);
+  useLayoutEffect(() => () => split?.retract(key), [split, key]);
+  return (nowSelected, nowClear) => {
+    if (active2) split?.report(key, nowSelected, nowClear);
+  };
 }
-function placeholder(node, redacted) {
-  if (!redacted) return node;
-  return styled({ background: { hierarchical: 3 }, backgroundCornerRadius: 4 }, styled({ foreground: { name: "clear" } }, node));
+function OutsideSplit({ children }) {
+  return /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, children });
 }
-function openURL(url) {
-  const native = globalThis.__sbNative;
-  if (native?.openURL) {
-    native.openURL(url);
-    return;
-  }
-  if (typeof window !== "undefined") window.open(url, "_blank", "noopener");
+function SheetPresenter({ isPresented, onDismiss, content, fullScreen, inherited }) {
+  const around = useInheritedStyles();
+  const [presented, setPresented] = readBinding(isPresented);
+  if (!presented) return null;
+  const dismiss = () => {
+    setPresented(false);
+    onDismiss?.();
+  };
+  const detents = fullScreen ? ["full"] : ["large"];
+  return sb(
+    HOIST_KIND,
+    void 0,
+    void 0,
+    sb(
+      "sheet",
+      { detents },
+      { tap: dismiss },
+      replayStyles(
+        inherited && inherited.length > 0 ? [...around, ...inherited] : around,
+        /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(OutsideSplit, { children: /* @__PURE__ */ jsx(DismissContext.Provider, { value: dismiss, children: content }) }) })
+      )
+    ),
+    "root"
+  );
 }
-function imageProps$1(props) {
-  if (props.systemName !== void 0) return { systemName: props.systemName };
-  if (props.bitmap !== void 0) {
-    const { source, steps = [], version } = props.bitmap;
-    const extent = bitmapExtent(source, steps);
-    const finite = Number.isFinite(extent.width) && Number.isFinite(extent.height);
-    const width = finite ? Math.max(0, Math.round(extent.width)) : 0;
-    const height = finite ? Math.max(0, Math.round(extent.height)) : 0;
-    const scale = props.scale !== void 0 && props.scale > 0 ? props.scale : 1;
-    return {
-      bitmap: { source: source?.key ?? null, steps, width, height, ...version !== void 0 ? { version } : {} },
-      resizable: props.resizable ?? false,
-      width: width / scale,
-      height: height / scale,
-      ...props.interpolation === "none" ? { interpolation: "none" } : {}
-    };
-  }
-  if (props.url !== void 0) return { url: props.url, resizable: props.resizable ?? false, width: props.width ?? 0, height: props.height ?? 0 };
-  return { name: props.name ?? "", resizable: props.resizable ?? false };
+function presentationDetents(detents) {
+  const encoded = detents.map(
+    (detent) => typeof detent === "string" ? detent : "height" in detent ? `height:${detent.height}` : `fraction:${detent.fraction}`
+  );
+  return sb(PREF_KIND, { detents: encoded }, void 0, void 0, "sheet");
 }
-function Image$1(props) {
-  const { modifiers } = splitProps(props);
-  const environment = useViewEnvironment();
-  const redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
-  const mode = takeModifier(modifiers, "symbolRenderingMode") ?? environment.symbolRenderingMode;
-  const own = imageProps$1(props);
-  const element = props.systemName !== void 0 && mode === "palette" ? { ...own, renderingMode: "palette" } : own;
-  if (props.accessibilityLabel) element["accessibilityLabel"] = props.accessibilityLabel;
-  return applyModifiers(placeholder(sb("image", element), redacted), modifiers);
+function AlertPresenter({ title, isPresented, message, actions, style }) {
+  const [presented, setPresented] = readBinding(isPresented);
+  if (!presented) return null;
+  const dismiss = () => setPresented(false);
+  return sb(
+    HOIST_KIND,
+    void 0,
+    void 0,
+    sb(
+      "alert",
+      { title, message: message ?? null, style: style ?? "alert" },
+      { tap: dismiss },
+      withEnvironment({ dismissAlert: dismiss }, actions)
+    ),
+    "root"
+  );
 }
-function Label(props) {
-  const { own, modifiers } = splitProps(props);
-  const environment = useViewEnvironment();
-  const style = takeModifier(modifiers, "labelStyle") ?? environment.labelStyle ?? "automatic";
-  const icon = own.icon ?? (own.systemImage !== void 0 ? /* @__PURE__ */ jsx(Image$1, { systemName: own.systemImage }) : own.image !== void 0 ? /* @__PURE__ */ jsx(Image$1, { name: own.image }) : null);
-  const title = typeof own.title === "string" || typeof own.title === "number" ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.title;
-  if (style === "iconOnly") {
-    const name = typeof own.title === "string" || typeof own.title === "number" ? String(own.title) : void 0;
-    const named = own.icon === void 0 && name !== void 0 ? own.systemImage !== void 0 ? /* @__PURE__ */ jsx(Image$1, { systemName: own.systemImage, accessibilityLabel: name }) : own.image !== void 0 ? /* @__PURE__ */ jsx(Image$1, { name: own.image, accessibilityLabel: name }) : icon : icon;
-    return applyModifiers(named, modifiers);
+function Lifecycle({ onAppear, onDisappear }) {
+  useEffect(() => {
+    onAppear?.();
+    return () => onDisappear?.();
+  }, []);
+  return null;
+}
+function Inspector({ isPresented, content, columnWidth, children }) {
+  const sizeClass = useHorizontalSizeClass();
+  const [presented, setPresented] = readBinding(isPresented);
+  if (sizeClass === "compact") {
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      children,
+      /* @__PURE__ */ jsx(SheetPresenter, { isPresented: [presented, setPresented], content })
+    ] });
   }
-  if (style === "titleOnly") return applyModifiers(title, modifiers);
-  return applyModifiers(
-    /* @__PURE__ */ jsxs(HStack, { spacing: 8, children: [
-      style === "titleAndIcon" ? icon : styled({ labelIcon: true }, icon),
-      title
-    ] }),
-    modifiers
-  );
+  const outside = /* @__PURE__ */ jsx(OutsideSplit, { children: content });
+  const panelContent = columnWidth !== void 0 ? sb("styled", { style: { inspectorColumnWidth: columnWidth } }, void 0, outside) : outside;
+  return sb("inspector", { presented }, void 0, [
+    /* @__PURE__ */ jsx(InspectorPart, { children }, "content"),
+    /* @__PURE__ */ jsx(InspectorPart, { children: sb("inspectorpanel", {}, void 0, panelContent) }, "panel")
+  ]);
+}
+function InspectorPart({ children }) {
+  return children;
+}
+function Task({ id, action }) {
+  const latest = useRef(action);
+  latest.current = action;
+  useEffect(() => {
+    const controller = new AbortController();
+    Promise.resolve().then(() => latest.current(controller.signal)).catch((error) => {
+      if (!controller.signal.aborted) console.error(error);
+    });
+    return () => controller.abort();
+  }, [id]);
+  return null;
+}
+function OnChange({
+  value,
+  action,
+  initial
+}) {
+  const previous = useRef(null);
+  const latest = useRef(action);
+  latest.current = action;
+  useEffect(() => {
+    const last = previous.current;
+    previous.current = { value };
+    if (last === null) {
+      if (initial) latest.current(value, value);
+      return;
+    }
+    if (!Object.is(last.value, value)) latest.current(last.value, value);
+  }, [value, initial]);
+  return null;
+}
+const CoordinateSpacesContext = createContext({});
+function useCoordinateSpaces() {
+  return useContext(CoordinateSpacesContext);
 }
-function LabeledContent(props) {
-  const { own, modifiers } = splitProps(props);
-  const label = typeof own.label === "string" || typeof own.label === "number" ? /* @__PURE__ */ jsx(Text, { children: own.label }) : own.label;
-  const content = own.children ?? own.value;
-  const value = typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ jsx(Text, { children: content }) : content;
-  return applyModifiers(
-    /* @__PURE__ */ jsxs(HStack, { children: [
-      label,
-      sb("spacer", { minLength: null }),
-      styled({ foreground: { hierarchical: 2 } }, value)
-    ] }),
-    modifiers
-  );
+function CoordinateSpace({ name, children }) {
+  const spaces = useContext(CoordinateSpacesContext);
+  const [frame2, setFrame] = useState(null);
+  return /* @__PURE__ */ jsx(CoordinateSpacesContext.Provider, { value: { ...spaces, [name]: frame2 }, children: sb(
+    "zstack",
+    { alignment: "center", reportsSize: true, reportsFrame: true },
+    {
+      geometry: (event) => {
+        const next = { x: event.x ?? 0, y: event.y ?? 0, width: event.width, height: event.height };
+        if (!frame2 || frame2.x !== next.x || frame2.y !== next.y || frame2.width !== next.width || frame2.height !== next.height) setFrame(next);
+      }
+    },
+    children
+  ) });
 }
-function Link(props) {
-  const { own, modifiers } = splitProps(props);
-  const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
-  return applyModifiers(sb("button", { role: null, style: "automatic" }, { tap: () => openURL(own.destination) }, label), modifiers);
+const NO_INSETS = { top: 0, leading: 0, bottom: 0, trailing: 0 };
+const NO_GEOMETRY = { size: { width: 0, height: 0 }, origin: null, safeArea: NO_INSETS, scrollView: null };
+function nextGeometry(event, reported) {
+  const hasOrigin = event.x !== void 0 && event.y !== void 0;
+  return {
+    size: { width: event.width, height: event.height },
+    origin: hasOrigin ? { x: event.x, y: event.y } : reported.origin,
+    safeArea: event.safeArea ?? reported.safeArea,
+    // A frame report without a scroll view means the reader is in none.
+    scrollView: hasOrigin ? event.scrollView ?? null : reported.scrollView
+  };
 }
-const isPushedView = (value) => typeof value === "object" && value !== null && "view" in value && isValidElement(value.view);
-function routeOf(value, depth = 0) {
-  if (depth > 8) return void 0;
-  if (value === null || typeof value === "string" || typeof value === "boolean") return value;
-  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
-  if (Array.isArray(value)) {
-    const items = value.map((item) => routeOf(item, depth + 1));
-    return items.every((item) => item !== void 0) ? items : void 0;
-  }
-  if (typeof value === "object" && !isPushedView(value)) {
-    const proto = Object.getPrototypeOf(value);
-    if (proto !== Object.prototype && proto !== null) return void 0;
-    const out = {};
-    for (const [key, item] of Object.entries(value)) {
-      if (item === void 0) continue;
-      const plain2 = routeOf(item, depth + 1);
-      if (plain2 === void 0) return void 0;
-      out[key] = plain2;
+function geometryProxy(reported, spaces, onReadFrame) {
+  return {
+    size: reported.size,
+    frame: (space = "local") => {
+      if (space === "local") return { x: 0, y: 0, ...reported.size };
+      onReadFrame();
+      const origin = reported.origin ?? { x: 0, y: 0 };
+      if (space === "global") return { ...origin, ...reported.size };
+      const named = spaces[space.named];
+      return { x: origin.x - (named?.x ?? 0), y: origin.y - (named?.y ?? 0), ...reported.size };
+    },
+    bounds: () => {
+      onReadFrame();
+      const view = reported.scrollView;
+      if (!view || !reported.origin) return null;
+      return { x: view.x - reported.origin.x, y: view.y - reported.origin.y, width: view.width, height: view.height };
+    },
+    get safeAreaInsets() {
+      onReadFrame();
+      return reported.safeArea;
     }
-    return out;
-  }
-  return void 0;
-}
-function NavigationStack(props) {
-  const enclosing = useNavigation();
-  if (enclosing) return /* @__PURE__ */ jsx(FlattenedStack, { ...props });
-  return /* @__PURE__ */ jsx(OwnStack, { ...props });
+  };
 }
-function FlattenedStack(props) {
+function GeometryReader(props) {
   const { own, modifiers } = splitProps(props);
+  const [reported, setReported] = useState(NO_GEOMETRY);
+  const [needsFrame, setNeedsFrame] = useState(false);
+  let readFrame = false;
+  const proxy = geometryProxy(reported, useCoordinateSpaces(), () => {
+    readFrame = true;
+  });
+  const content = own.children(proxy);
+  useEffect(() => {
+    if (readFrame && !needsFrame) setNeedsFrame(true);
+  });
   return applyModifiers(
-    /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      own.destination && /* @__PURE__ */ jsx(RegisterDestination, { destination: own.destination }),
-      own.children
-    ] }),
+    sb(
+      "geometry",
+      needsFrame ? { reportsFrame: true } : {},
+      {
+        geometry: (event) => {
+          const next = nextGeometry(event, reported);
+          if (JSON.stringify(next) !== JSON.stringify(reported)) setReported(next);
+        }
+      },
+      content
+    ),
     modifiers
   );
 }
-function OwnStack(props) {
-  const { own, modifiers } = splitProps(props);
-  const remote = useContext(HostTreeContext)?.remote ?? false;
-  const [internalPath, setInternalPath] = useState([]);
-  const [path, setPath] = own.path !== void 0 ? readBinding(own.path, own.onPathChange) : [internalPath, setInternalPath];
-  const destination = useRef(null);
-  destination.current = own.destination ?? null;
-  const context = {
-    push: (value) => setPath([...path, value]),
-    pop: () => setPath(path.slice(0, -1)),
-    path,
-    setPath: (next) => setPath(next),
-    registerDestination: (builder) => {
-      destination.current = builder;
+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;
+  useLayoutEffect(() => {
+    if (readFrame && !needsFrame) setNeedsFrame(true);
+  });
+  useLayoutEffect(() => {
+    if (!heard) return;
+    if (typeof handler === "function") {
+      handler(proxy);
+      return;
     }
-  };
-  const screens = [
-    /* @__PURE__ */ jsx(Fragment, { children: sb("navscreen", { title: "", displayMode: "automatic", depth: 0 }, { tap: context.pop }, /* @__PURE__ */ jsx(ScreenDepthContext.Provider, { value: 0, children: own.children })) }, "root")
-  ];
-  path.forEach((value, index) => {
-    const pop = () => setPath(path.slice(0, index));
-    const route = remote ? routeOf(value) : void 0;
-    screens.push(
-      /* @__PURE__ */ jsx(Fragment, { children: sb(
-        "navscreen",
-        { title: "", displayMode: "automatic", depth: index + 1, ...route === void 0 ? {} : { route } },
-        { tap: pop },
-        /* @__PURE__ */ jsx(DismissContext.Provider, { value: pop, children: /* @__PURE__ */ jsx(ScreenDepthContext.Provider, { value: index + 1, children: /* @__PURE__ */ jsx(PathScreen, { value, destination }) }) })
-      ) }, index + 1)
-    );
+    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 applyModifiers(
-    sb("navstack", {}, { setpath: (event) => setPath(Array.isArray(event.path) ? event.path : []) }, /* @__PURE__ */ jsx(NavigationContext.Provider, { value: context, children: screens })),
-    modifiers
+  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
   );
 }
-function PathScreen({ value, destination }) {
-  if (isPushedView(value)) return value.view;
-  return destination.current ? destination.current(value) : null;
+const DEFAULT_VIEW_SPACING = { distance: () => 8 };
+function subviewTraits(children) {
+  return flattenChildren(children).map((element) => {
+    const props = element.props;
+    return { priority: props.layoutPriority ?? 0, values: props.layoutValue ?? {} };
+  });
 }
-function NavigationLink(props) {
-  const { own, modifiers } = splitProps(props);
-  const navigation = useNavigation();
-  const environment = useViewEnvironment();
-  const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
-  const listSelection = useContext(ListSelectionContext);
-  const sidebar = useContext(SplitSelectionContext) !== null && listSelection !== null && own.destination === void 0 && own.value !== void 0;
-  const tap = () => {
-    if (sidebar) {
-      listSelection.select(own.value);
-      return;
-    }
-    if (!navigation) return;
-    if (own.destination !== void 0) navigation.push({ view: own.destination });
-    else navigation.push(own.value);
+const fromDimension = (value) => value === "infinity" ? Infinity : value;
+const toDimension = (value) => Number.isFinite(value) ? Math.round(value * 100) / 100 : "infinity";
+const toSize = (size) => ({
+  width: fromDimension(size.width) ?? 0,
+  height: fromDimension(size.height) ?? 0
+});
+const GUIDES = ["leading", "horizontalCenter", "trailing", "top", "verticalCenter", "bottom", "firstTextBaseline", "lastTextBaseline"];
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function answerLayout(layout, record, traits = []) {
+  const frames = record.children.map(() => null);
+  const subviews = record.children.map((measurement, index) => {
+    const min = toSize(measurement.min);
+    const ideal = toSize(measurement.ideal);
+    const max = toSize(measurement.max);
+    const sizeThatFits = (proposal) => ({
+      width: proposal.width === null ? ideal.width : clamp(proposal.width, min.width, max.width),
+      height: proposal.height === null ? ideal.height : clamp(proposal.height, min.height, max.height)
+    });
+    return {
+      min,
+      ideal,
+      max,
+      priority: traits[index]?.priority ?? 0,
+      values: traits[index]?.values ?? {},
+      spacing: DEFAULT_VIEW_SPACING,
+      sizeThatFits,
+      place: ({ x, y, anchor, proposal }) => {
+        const size2 = sizeThatFits(proposal ?? { width: null, height: null });
+        const point = unitPoint(anchor ?? "topLeading");
+        frames[index] = { x: x - point.x * size2.width, y: y - point.y * size2.height, ...size2 };
+      }
+    };
+  });
+  const cache = layout.makeCache ? layout.makeCache(subviews) : void 0;
+  const measure = (proposal) => layout.sizeThatFits(proposal, subviews, cache);
+  const size = measure(record.proposal);
+  layout.placeSubviews({ x: 0, y: 0, ...size }, record.proposal, subviews, cache);
+  const placed = frames.map((frame2, index) => {
+    if (frame2) return frame2;
+    const own = subviews[index].sizeThatFits({ width: size.width, height: size.height });
+    return { x: (size.width - own.width) / 2, y: (size.height - own.height) / 2, ...own };
+  });
+  const guides = {};
+  if (layout.explicitAlignment) {
+    const bounds = { x: 0, y: 0, ...size };
+    for (const guide of GUIDES) {
+      const value = layout.explicitAlignment(guide, bounds, record.proposal, subviews, cache);
+      if (value !== null && value !== void 0 && Number.isFinite(value)) guides[guide] = value;
+    }
+  }
+  const sizes = {
+    min: measure({ width: 0, height: 0 }),
+    ideal: measure({ width: null, height: null }),
+    max: measure({ width: Infinity, height: Infinity })
   };
-  const style = takeModifier(modifiers, "buttonStyle") ?? environment.buttonStyle;
-  const linkProps = style === "plain" ? { style: "plain" } : {};
-  if (sidebar) linkProps["selects"] = true;
-  return applyModifiers(sb("navlink", linkProps, { tap }, label), modifiers);
-}
-const SplitSelectionContext = createContext(null);
-function splitColumnWidthHint(width) {
-  if (typeof width === "number") return { min: width, ideal: width, max: width };
-  return { ...width.min !== void 0 ? { min: width.min } : {}, ideal: width.ideal, ...width.max !== void 0 ? { max: width.max } : {} };
+  const { width, height } = record.proposal;
+  if (width !== null && Number.isFinite(width) && height !== null) sizes.atWidth = measure({ width, height: null });
+  return { size, frames: placed, guides, sizes };
 }
-function NavigationSplitView(props) {
+function Layout(props) {
   const { own, modifiers } = splitProps(props);
-  const sizeClass = useHorizontalSizeClass();
-  const [selected, setSelected] = useState(false);
-  const reporters = useRef(/* @__PURE__ */ new Map());
-  const settle = () => setSelected([...reporters.current.values()].some((entry) => entry.selected));
-  const [report] = useState(() => {
-    return {
-      report: (key, nowSelected, clear2) => {
-        reporters.current.set(key, { selected: nowSelected, clear: clear2 });
-        settle();
+  const [record, setRecord] = useState(null);
+  let layoutProps = { proposal: null, size: null, frames: null };
+  const guideModifiers = [];
+  if (record) {
+    const answer = answerLayout(own.layout, record, subviewTraits(own.children));
+    for (const [guide, value] of Object.entries(answer.guides)) guideModifiers.push(["alignmentGuide", { guide, value: () => value }]);
+    const encode = (size) => ({ width: toDimension(size.width), height: toDimension(size.height) });
+    const round2 = (value) => Math.round(value * 100) / 100;
+    layoutProps = {
+      proposal: {
+        width: record.proposal.width === null ? null : toDimension(record.proposal.width),
+        height: record.proposal.height === null ? null : toDimension(record.proposal.height)
       },
-      retract: (key) => {
-        if (reporters.current.delete(key)) settle();
+      size: { width: round2(answer.size.width), height: round2(answer.size.height) },
+      frames: answer.frames.map((frame2) => ({ x: round2(frame2.x), y: round2(frame2.y), width: round2(frame2.width), height: round2(frame2.height) })),
+      sizes: {
+        min: encode(answer.sizes.min),
+        ideal: encode(answer.sizes.ideal),
+        max: encode(answer.sizes.max),
+        ...answer.sizes.atWidth ? { atWidth: encode(answer.sizes.atWidth) } : {}
       }
     };
-  });
-  const clear = () => {
-    for (const entry of reporters.current.values()) {
-      if (!entry.selected) continue;
-      entry.clear();
-      entry.selected = false;
-    }
-    settle();
-  };
-  const [internal, setInternal] = useState("automatic");
-  const [visibility, setVisibility] = own.columnVisibility !== void 0 ? readBinding(own.columnVisibility, own.onColumnVisibilityChange) : [internal, setInternal];
-  if (sizeClass === "compact") {
-    return applyModifiers(/* @__PURE__ */ jsx(CompactSplit, { sidebar: own.sidebar, detail: own.detail, report, selected, clear }), modifiers);
   }
-  const sidebarVisible = visibility !== "detailOnly";
-  const toggle = () => withAnimation(() => setVisibility(sidebarVisible ? "detailOnly" : "all"));
-  const detail = isValidElement(own.detail) && own.detail.type === NavigationStack ? own.detail : /* @__PURE__ */ jsx(NavigationStack, { children: own.detail });
-  const sidebar = own.sidebarWidth !== void 0 ? sb("styled", { style: { splitColumnWidth: splitColumnWidthHint(own.sidebarWidth) } }, void 0, own.sidebar) : own.sidebar;
   return applyModifiers(
-    sb("navsplit", { sidebarVisible }, { tap: toggle, columnwidth: (event) => own.onSidebarWidthChange?.(event.width) }, [
-      /* @__PURE__ */ jsx(SplitColumn, { report, children: /* @__PURE__ */ jsx(NavigationStack, { children: sidebar }) }, "sidebar"),
-      /* @__PURE__ */ jsx(SplitColumn, { report: null, children: detail }, "detail")
-    ]),
-    modifiers
-  );
-}
-function SplitColumn({ report, children }) {
-  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: report, children }) });
-}
-function CompactSplit({
-  sidebar,
-  detail,
-  report,
-  selected,
-  clear
-}) {
-  const [internal, setInternal] = useState([]);
-  const detailStack = isValidElement(detail) && detail.type === NavigationStack ? detail.props : null;
-  const [extra, setExtra] = detailStack?.path !== void 0 ? readBinding(detailStack.path, detailStack.onPathChange) : [internal, setInternal];
-  const base = selected ? [{ view: detail }] : [];
-  const path = [...base, ...extra];
-  const setPath = (next) => {
-    if (selected && next.length === 0) {
-      setExtra([]);
-      clear();
-      return;
-    }
-    setExtra(next.slice(base.length));
-  };
-  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, children: /* @__PURE__ */ jsx(NavigationStack, { path: [path, setPath], children: /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: report, children: sidebar }) }) }) });
-}
-function useReportSplitSelection(split, selected, clear, active2 = true) {
-  const key = useRef({}).current;
-  useLayoutEffect(() => {
-    if (active2) split?.report(key, selected, clear);
-    else split?.retract(key);
-  });
-  useLayoutEffect(() => () => split?.retract(key), [split, key]);
-  return (nowSelected, nowClear) => {
-    if (active2) split?.report(key, nowSelected, nowClear);
-  };
-}
-function OutsideSplit({ children }) {
-  return /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, children });
-}
-function SheetPresenter({ isPresented, onDismiss, content, fullScreen, inherited }) {
-  const around = useInheritedStyles();
-  const [presented, setPresented] = readBinding(isPresented);
-  if (!presented) return null;
-  const dismiss = () => {
-    setPresented(false);
-    onDismiss?.();
-  };
-  const detents = fullScreen ? ["full"] : ["large"];
-  return sb(
-    HOIST_KIND,
-    void 0,
-    void 0,
-    sb(
-      "sheet",
-      { detents },
-      { tap: dismiss },
-      replayStyles(
-        inherited && inherited.length > 0 ? [...around, ...inherited] : around,
-        /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(OutsideSplit, { children: /* @__PURE__ */ jsx(DismissContext.Provider, { value: dismiss, children: content }) }) })
-      )
-    ),
-    "root"
-  );
-}
-function presentationDetents(detents) {
-  const encoded = detents.map(
-    (detent) => typeof detent === "string" ? detent : "height" in detent ? `height:${detent.height}` : `fraction:${detent.fraction}`
-  );
-  return sb(PREF_KIND, { detents: encoded }, void 0, void 0, "sheet");
-}
-function AlertPresenter({ title, isPresented, message, actions, style }) {
-  const [presented, setPresented] = readBinding(isPresented);
-  if (!presented) return null;
-  const dismiss = () => setPresented(false);
-  return sb(
-    HOIST_KIND,
-    void 0,
-    void 0,
     sb(
-      "alert",
-      { title, message: message ?? null, style: style ?? "alert" },
-      { tap: dismiss },
-      withEnvironment({ dismissAlert: dismiss }, actions)
+      "layout",
+      layoutProps,
+      {
+        layout: (event) => {
+          const proposal = event.proposal;
+          setRecord({
+            proposal: { width: fromDimension(proposal.width), height: fromDimension(proposal.height) },
+            children: event.children
+          });
+        }
+      },
+      own.children
     ),
-    "root"
+    [...guideModifiers, ...modifiers]
   );
 }
-function Lifecycle({ onAppear, onDisappear }) {
-  useEffect(() => {
-    onAppear?.();
-    return () => onDisappear?.();
-  }, []);
-  return null;
+const IDENTITY$1 = {
+  offsetX: 0,
+  offsetY: 0,
+  scaleX: 1,
+  scaleY: 1,
+  rotation: 0,
+  opacity: 1,
+  blur: 0,
+  brightness: 0,
+  contrast: 1,
+  saturation: 1,
+  grayscale: 0,
+  hueRotation: 0
+};
+class VisualEffect {
+  /** @internal */
+  constructor(values = IDENTITY$1) {
+    this.values = values;
+  }
+  values;
+  with(patch) {
+    return new VisualEffect({ ...this.values, ...patch });
+  }
+  offset(offset) {
+    return this.with({ offsetX: this.values.offsetX + (offset.x ?? 0), offsetY: this.values.offsetY + (offset.y ?? 0) });
+  }
+  scaleEffect(scale, anchor) {
+    const x = typeof scale === "number" ? scale : scale.x ?? 1;
+    const y = typeof scale === "number" ? scale : scale.y ?? 1;
+    return this.with({ scaleX: this.values.scaleX * x, scaleY: this.values.scaleY * y, ...anchor !== void 0 ? { scaleAnchor: unitPoint(anchor) } : {} });
+  }
+  /** Degrees. */
+  rotationEffect(degrees, anchor) {
+    return this.with({ rotation: this.values.rotation + degrees, ...anchor !== void 0 ? { rotationAnchor: unitPoint(anchor) } : {} });
+  }
+  rotation3DEffect(spec) {
+    const rotation = { angle: spec.angle, axis: spec.axis };
+    if (spec.anchor !== void 0) rotation.anchor = unitPoint(spec.anchor);
+    if (spec.perspective !== void 0) rotation.perspective = spec.perspective;
+    return this.with({ rotation3D: rotation });
+  }
+  opacity(opacity2) {
+    return this.with({ opacity: this.values.opacity * opacity2 });
+  }
+  blur(radius) {
+    return this.with({ blur: this.values.blur + radius });
+  }
+  brightness(amount) {
+    return this.with({ brightness: this.values.brightness + amount });
+  }
+  contrast(amount) {
+    return this.with({ contrast: this.values.contrast * amount });
+  }
+  saturation(amount) {
+    return this.with({ saturation: this.values.saturation * amount });
+  }
+  grayscale(amount) {
+    return this.with({ grayscale: Math.min(1, this.values.grayscale + amount) });
+  }
+  /** Degrees. */
+  hueRotation(degrees) {
+    return this.with({ hueRotation: this.values.hueRotation + degrees });
+  }
 }
-function Inspector({ isPresented, content, columnWidth, children }) {
-  const sizeClass = useHorizontalSizeClass();
-  const [presented, setPresented] = readBinding(isPresented);
-  if (sizeClass === "compact") {
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      children,
-      /* @__PURE__ */ jsx(SheetPresenter, { isPresented: [presented, setPresented], content })
-    ] });
+const EMPTY_EFFECT = new VisualEffect();
+const round = (value) => Math.round(value * 1e3) / 1e3;
+function effectStyle(values) {
+  const style = {};
+  if (values.offsetX !== 0 || values.offsetY !== 0) style.offset = { x: round(values.offsetX), y: round(values.offsetY) };
+  if (values.scaleX !== 1 || values.scaleY !== 1) {
+    style.scale = { x: round(values.scaleX), y: round(values.scaleY) };
+    if (values.scaleAnchor) style.scaleAnchor = values.scaleAnchor;
+  }
+  if (values.rotation !== 0) {
+    style.rotation = round(values.rotation);
+    if (values.rotationAnchor) style.rotationAnchor = values.rotationAnchor;
   }
-  const outside = /* @__PURE__ */ jsx(OutsideSplit, { children: content });
-  const panelContent = columnWidth !== void 0 ? sb("styled", { style: { inspectorColumnWidth: columnWidth } }, void 0, outside) : outside;
-  return sb("inspector", { presented }, void 0, [
-    /* @__PURE__ */ jsx(InspectorPart, { children }, "content"),
-    /* @__PURE__ */ jsx(InspectorPart, { children: sb("inspectorpanel", {}, void 0, panelContent) }, "panel")
-  ]);
-}
-function InspectorPart({ children }) {
-  return children;
+  if (values.rotation3D && values.rotation3D.angle !== 0) style.rotation3D = { ...values.rotation3D, angle: round(values.rotation3D.angle) };
+  if (values.opacity !== 1) style.opacity = round(values.opacity);
+  if (values.blur !== 0) style.blur = round(values.blur);
+  if (values.brightness !== 0) style.brightness = round(values.brightness);
+  if (values.contrast !== 1) style.contrast = round(values.contrast);
+  if (values.saturation !== 1) style.saturation = round(values.saturation);
+  if (values.grayscale !== 0) style.grayscale = round(values.grayscale);
+  if (values.hueRotation !== 0) style.hueRotation = round(values.hueRotation);
+  return style;
 }
-function Task({ id, action }) {
-  const latest = useRef(action);
-  latest.current = action;
+function EffectBox({ render, children }) {
+  const [reported, setReported] = useState(NO_GEOMETRY);
+  const [needsFrame, setNeedsFrame] = useState(false);
+  let readFrame = false;
+  const style = render(reported, () => {
+    readFrame = true;
+  });
   useEffect(() => {
-    const controller = new AbortController();
-    Promise.resolve().then(() => latest.current(controller.signal)).catch((error) => {
-      if (!controller.signal.aborted) console.error(error);
-    });
-    return () => controller.abort();
-  }, [id]);
-  return null;
+    if (readFrame && !needsFrame) setNeedsFrame(true);
+  });
+  const content = Object.keys(style).length > 0 ? sb("styled", { style }, void 0, children) : children;
+  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);
+      }
+    },
+    content
+  );
 }
-function OnChange({
-  value,
-  action,
-  initial
-}) {
-  const previous = useRef(null);
-  const latest = useRef(action);
-  latest.current = action;
-  useEffect(() => {
-    const last = previous.current;
-    previous.current = { value };
-    if (last === null) {
-      if (initial) latest.current(value, value);
-      return;
-    }
-    if (!Object.is(last.value, value)) latest.current(last.value, value);
-  }, [value, initial]);
-  return null;
+function VisualEffectView({ effect, children }) {
+  const spaces = useCoordinateSpaces();
+  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 ScrollTransitionView({ spec, 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);
 }
 function Hover({ action, children }) {
   return sb("styled", { style: { hover: true } }, { hover: (event) => action(event.value) }, children);
@@ -3644,345 +3701,404 @@ function TextInputHint({ hint, children }) {
   const outer = useViewEnvironment().textInputHints;
   return withEnvironment({ textInputHints: { ...outer, ...hint } }, children);
 }
-const NO_INSETS = { top: 0, leading: 0, bottom: 0, trailing: 0 };
-const NO_GEOMETRY = { size: { width: 0, height: 0 }, origin: null, safeArea: NO_INSETS, scrollView: null };
-function nextGeometry(event, reported) {
-  const hasOrigin = event.x !== void 0 && event.y !== void 0;
-  return {
-    size: { width: event.width, height: event.height },
-    origin: hasOrigin ? { x: event.x, y: event.y } : reported.origin,
-    safeArea: event.safeArea ?? reported.safeArea,
-    // A frame report without a scroll view means the reader is in none.
-    scrollView: hasOrigin ? event.scrollView ?? null : reported.scrollView
-  };
+function HostElement(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb(own.kind, own.props ? { ...own.props } : void 0, void 0, own.children), modifiers);
 }
-function geometryProxy(reported, spaces, onReadFrame) {
-  return {
-    size: reported.size,
-    frame: (space = "local") => {
-      if (space === "local") return { x: 0, y: 0, ...reported.size };
-      onReadFrame();
-      const origin = reported.origin ?? { x: 0, y: 0 };
-      if (space === "global") return { ...origin, ...reported.size };
-      const named = spaces[space.named];
-      return { x: origin.x - (named?.x ?? 0), y: origin.y - (named?.y ?? 0), ...reported.size };
-    },
-    bounds: () => {
-      onReadFrame();
-      const view = reported.scrollView;
-      if (!view || !reported.origin) return null;
-      return { x: view.x - reported.origin.x, y: view.y - reported.origin.y, width: view.width, height: view.height };
-    },
-    get safeAreaInsets() {
-      onReadFrame();
-      return reported.safeArea;
-    }
-  };
+let installed = null;
+function installTextMeasurer(measurer, remove = false) {
+  if (remove) {
+    if (installed === measurer) installed = null;
+    return;
+  }
+  installed = measurer;
 }
-function GeometryReader(props) {
-  const { own, modifiers } = splitProps(props);
-  const [reported, setReported] = useState(NO_GEOMETRY);
-  const [needsFrame, setNeedsFrame] = useState(false);
-  let readFrame = false;
-  const proxy = geometryProxy(reported, useCoordinateSpaces(), () => {
-    readFrame = true;
-  });
-  const content = own.children(proxy);
-  useEffect(() => {
-    if (readFrame && !needsFrame) setNeedsFrame(true);
-  });
-  return applyModifiers(
-    sb(
-      "geometry",
-      needsFrame ? { reportsFrame: true } : {},
-      {
-        geometry: (event) => {
-          const next = nextGeometry(event, reported);
-          if (JSON.stringify(next) !== JSON.stringify(reported)) setReported(next);
-        }
-      },
-      content
-    ),
-    modifiers
-  );
+function canMeasureText() {
+  return installed !== null;
 }
-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;
-  useLayoutEffect(() => {
-    if (readFrame && !needsFrame) setNeedsFrame(true);
-  });
-  useLayoutEffect(() => {
-    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);
-      }
+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 decidePlatform(width, media = matchesMedia) {
+  return horizontalSizeClassFor(width) === "regular" && media("(hover: hover) and (pointer: fine)") ? "macos" : "ios";
+}
+function matchesMedia(query) {
+  return typeof matchMedia === "function" && matchMedia(query).matches;
+}
+function mount(screen, element, options = {}) {
+  let renderer = null;
+  const root = createSwiftUIRoot((ops) => renderer?.applyOps(ops));
+  renderer = new Renderer(screen, (event) => root.dispatch(event));
+  renderer.fileDrops = "reference";
+  const measurer = (text, font2, width2) => renderer.measureText(text, font2, width2);
+  installTextMeasurer(measurer);
+  let pageScheme = options.colorScheme ?? "light";
+  let preferred = null;
+  const width = screen.clientWidth || 393;
+  const environment = {
+    colorScheme: pageScheme,
+    dynamicTypeSize: options.dynamicTypeSize ?? "large",
+    horizontalSizeClass: horizontalSizeClassFor(width),
+    scenePhase: typeof document !== "undefined" ? currentScenePhase() : "active",
+    platform: options.platform === void 0 || options.platform === "auto" ? decidePlatform(width) : options.platform
+  };
+  renderer.contentHeight = options.contentHeight ?? false;
+  if (options.sidebarTitleBar === false) renderer.sidebarTitleBar = false;
+  if (options.assets) renderer.setAssetCatalog(options.assets);
+  if (options.app) browserEnvironment.files?.setApp?.(options.app);
+  renderer.setEnvironment({ colorScheme: environment.colorScheme, dynamicTypeSize: environment.dynamicTypeSize, platform: environment.platform });
+  if (options.safeArea !== void 0) renderer.setSafeArea(options.safeArea);
+  root.setEnvironment(environment);
+  const browserHistory = (options.history ?? true) && typeof window !== "undefined" ? new BrowserHistory(renderer, screen) : null;
+  browserHistory?.enable();
+  const stopKeyboard = options.keyboard && typeof window !== "undefined" ? watchKeyboard((height) => renderer?.setKeyboard(height), { root: screen }) : null;
+  const applyScheme = () => {
+    const scheme = preferred ?? pageScheme;
+    const device = screen.closest(".device");
+    if (device) device.dataset["theme"] = scheme;
+    renderer?.setEnvironment({ colorScheme: scheme });
+    root.setEnvironment({ colorScheme: scheme });
+  };
+  const onPreferredScheme = (event) => {
+    const scheme = event.detail.colorScheme;
+    preferred = scheme;
+    queueMicrotask(applyScheme);
+  };
+  screen.addEventListener("sb:color-scheme", onPreferredScheme);
+  let sizeClass = environment.horizontalSizeClass;
+  const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+    const next = horizontalSizeClassFor(screen.clientWidth);
+    if (next === sizeClass) return;
+    sizeClass = next;
+    root.setEnvironment({ horizontalSizeClass: next });
+  }) : null;
+  observer?.observe(screen);
+  const stopScenePhase = typeof document !== "undefined" ? watchScenePhase((scenePhase) => root.setEnvironment({ scenePhase })) : null;
+  root.render(createElement(LazyWindowContext.Provider, { value: true }, element));
+  const mounted = {
+    root,
+    renderer,
+    setEnvironment(next) {
+      if (next.colorScheme !== void 0) pageScheme = next.colorScheme;
+      const scheme = preferred ?? pageScheme;
+      renderer?.setEnvironment({ ...next, colorScheme: scheme });
+      root.setEnvironment({ ...next, colorScheme: scheme });
     },
-    children
-  );
-}
-const DEFAULT_VIEW_SPACING = { distance: () => 8 };
-function subviewTraits(children) {
-  return flattenChildren(children).map((element) => {
-    const props = element.props;
-    return { priority: props.layoutPriority ?? 0, values: props.layoutValue ?? {} };
-  });
-}
-const fromDimension = (value) => value === "infinity" ? Infinity : value;
-const toDimension = (value) => Number.isFinite(value) ? Math.round(value * 100) / 100 : "infinity";
-const toSize = (size) => ({
-  width: fromDimension(size.width) ?? 0,
-  height: fromDimension(size.height) ?? 0
-});
-const GUIDES = ["leading", "horizontalCenter", "trailing", "top", "verticalCenter", "bottom", "firstTextBaseline", "lastTextBaseline"];
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-function answerLayout(layout, record, traits = []) {
-  const frames = record.children.map(() => null);
-  const subviews = record.children.map((measurement, index) => {
-    const min = toSize(measurement.min);
-    const ideal = toSize(measurement.ideal);
-    const max = toSize(measurement.max);
-    const sizeThatFits = (proposal) => ({
-      width: proposal.width === null ? ideal.width : clamp(proposal.width, min.width, max.width),
-      height: proposal.height === null ? ideal.height : clamp(proposal.height, min.height, max.height)
-    });
-    return {
-      min,
-      ideal,
-      max,
-      priority: traits[index]?.priority ?? 0,
-      values: traits[index]?.values ?? {},
-      spacing: DEFAULT_VIEW_SPACING,
-      sizeThatFits,
-      place: ({ x, y, anchor, proposal }) => {
-        const size2 = sizeThatFits(proposal ?? { width: null, height: null });
-        const point = unitPoint(anchor ?? "topLeading");
-        frames[index] = { x: x - point.x * size2.width, y: y - point.y * size2.height, ...size2 };
-      }
-    };
-  });
-  const cache = layout.makeCache ? layout.makeCache(subviews) : void 0;
-  const measure = (proposal) => layout.sizeThatFits(proposal, subviews, cache);
-  const size = measure(record.proposal);
-  layout.placeSubviews({ x: 0, y: 0, ...size }, record.proposal, subviews, cache);
-  const placed = frames.map((frame2, index) => {
-    if (frame2) return frame2;
-    const own = subviews[index].sizeThatFits({ width: size.width, height: size.height });
-    return { x: (size.width - own.width) / 2, y: (size.height - own.height) / 2, ...own };
-  });
-  const guides = {};
-  if (layout.explicitAlignment) {
-    const bounds = { x: 0, y: 0, ...size };
-    for (const guide of GUIDES) {
-      const value = layout.explicitAlignment(guide, bounds, record.proposal, subviews, cache);
-      if (value !== null && value !== void 0 && Number.isFinite(value)) guides[guide] = value;
+    setSafeArea(insets2) {
+      renderer?.setSafeArea(insets2);
+    },
+    viewportChanged() {
+      renderer?.viewportChanged();
+    },
+    unmount() {
+      observer?.disconnect();
+      stopScenePhase?.();
+      stopKeyboard?.();
+      browserHistory?.dispose();
+      screen.removeEventListener("sb:color-scheme", onPreferredScheme);
+      installTextMeasurer(measurer, true);
+      root.unmount();
+      renderer?.dispose();
     }
-  }
-  const sizes = {
-    min: measure({ width: 0, height: 0 }),
-    ideal: measure({ width: null, height: null }),
-    max: measure({ width: Infinity, height: Infinity })
   };
-  const { width, height } = record.proposal;
-  if (width !== null && Number.isFinite(width) && height !== null) sizes.atWidth = measure({ width, height: null });
-  return { size, frames: placed, guides, sizes };
-}
-function Layout(props) {
-  const { own, modifiers } = splitProps(props);
-  const [record, setRecord] = useState(null);
-  let layoutProps = { proposal: null, size: null, frames: null };
-  const guideModifiers = [];
-  if (record) {
-    const answer = answerLayout(own.layout, record, subviewTraits(own.children));
-    for (const [guide, value] of Object.entries(answer.guides)) guideModifiers.push(["alignmentGuide", { guide, value: () => value }]);
-    const encode = (size) => ({ width: toDimension(size.width), height: toDimension(size.height) });
-    const round2 = (value) => Math.round(value * 100) / 100;
-    layoutProps = {
-      proposal: {
-        width: record.proposal.width === null ? null : toDimension(record.proposal.width),
-        height: record.proposal.height === null ? null : toDimension(record.proposal.height)
-      },
-      size: { width: round2(answer.size.width), height: round2(answer.size.height) },
-      frames: answer.frames.map((frame2) => ({ x: round2(frame2.x), y: round2(frame2.y), width: round2(frame2.width), height: round2(frame2.height) })),
-      sizes: {
-        min: encode(answer.sizes.min),
-        ideal: encode(answer.sizes.ideal),
-        max: encode(answer.sizes.max),
-        ...answer.sizes.atWidth ? { atWidth: encode(answer.sizes.atWidth) } : {}
-      }
-    };
-  }
-  return applyModifiers(
-    sb(
-      "layout",
-      layoutProps,
-      {
-        layout: (event) => {
-          const proposal = event.proposal;
-          setRecord({
-            proposal: { width: fromDimension(proposal.width), height: fromDimension(proposal.height) },
-            children: event.children
-          });
-        }
-      },
-      own.children
-    ),
-    [...guideModifiers, ...modifiers]
-  );
+  return mounted;
 }
-const IDENTITY$1 = {
-  offsetX: 0,
-  offsetY: 0,
-  scaleX: 1,
-  scaleY: 1,
-  rotation: 0,
-  opacity: 1,
-  blur: 0,
-  brightness: 0,
-  contrast: 1,
-  saturation: 1,
-  grayscale: 0,
-  hueRotation: 0
+const EMPTY = { canUndo: false, canRedo: false, undoActionName: "", redoActionName: "" };
+const defaultSchedule = (close) => {
+  if (typeof queueMicrotask === "function") queueMicrotask(close);
+  else void Promise.resolve().then(close);
 };
-class VisualEffect {
-  /** @internal */
-  constructor(values = IDENTITY$1) {
-    this.values = values;
+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);
+    }
   }
-  values;
-  with(patch) {
-    return new VisualEffect({ ...this.values, ...patch });
+  get canUndo() {
+    return this.undoStack.length > 0;
   }
-  offset(offset) {
-    return this.with({ offsetX: this.values.offsetX + (offset.x ?? 0), offsetY: this.values.offsetY + (offset.y ?? 0) });
+  get canRedo() {
+    return this.redoStack.length > 0;
   }
-  scaleEffect(scale, anchor) {
-    const x = typeof scale === "number" ? scale : scale.x ?? 1;
-    const y = typeof scale === "number" ? scale : scale.y ?? 1;
-    return this.with({ scaleX: this.values.scaleX * x, scaleY: this.values.scaleY * y, ...anchor !== void 0 ? { scaleAnchor: unitPoint(anchor) } : {} });
+  /** 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 ?? "";
   }
-  /** Degrees. */
-  rotationEffect(degrees, anchor) {
-    return this.with({ rotation: this.values.rotation + degrees, ...anchor !== void 0 ? { rotationAnchor: unitPoint(anchor) } : {} });
+  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");
   }
-  rotation3DEffect(spec) {
-    const rotation = { angle: spec.angle, axis: spec.axis };
-    if (spec.anchor !== void 0) rotation.anchor = unitPoint(spec.anchor);
-    if (spec.perspective !== void 0) rotation.perspective = spec.perspective;
-    return this.with({ rotation3D: rotation });
+  /**
+   * 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;
   }
-  opacity(opacity2) {
-    return this.with({ opacity: this.values.opacity * opacity2 });
+  /** 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();
   }
-  blur(radius) {
-    return this.with({ blur: this.values.blur + radius });
+  /** `body` as one group named `name`. */
+  group(name, body) {
+    this.beginGrouping(name);
+    try {
+      return body();
+    } finally {
+      this.endGrouping();
+    }
   }
-  brightness(amount) {
-    return this.with({ brightness: this.values.brightness + amount });
+  /** 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();
   }
-  contrast(amount) {
-    return this.with({ contrast: this.values.contrast * amount });
+  /** 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;
   }
-  saturation(amount) {
-    return this.with({ saturation: this.values.saturation * amount });
+  push(group) {
+    this.undoStack.push(group);
+    if (this.levelsOfUndo > 0 && this.undoStack.length > this.levelsOfUndo) this.undoStack.splice(0, this.undoStack.length - this.levelsOfUndo);
   }
-  grayscale(amount) {
-    return this.with({ grayscale: Math.min(1, this.values.grayscale + amount) });
+  /** 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;
   }
-  /** Degrees. */
-  hueRotation(degrees) {
-    return this.with({ hueRotation: this.values.hueRotation + degrees });
+  endOpenGroups() {
+    this.depth = 0;
+    if (this.open) this.close();
   }
-}
-const EMPTY_EFFECT = new VisualEffect();
-const round = (value) => Math.round(value * 1e3) / 1e3;
-function effectStyle(values) {
-  const style = {};
-  if (values.offsetX !== 0 || values.offsetY !== 0) style.offset = { x: round(values.offsetX), y: round(values.offsetY) };
-  if (values.scaleX !== 1 || values.scaleY !== 1) {
-    style.scale = { x: round(values.scaleX), y: round(values.scaleY) };
-    if (values.scaleAnchor) style.scaleAnchor = values.scaleAnchor;
+  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();
+    }
   }
-  if (values.rotation !== 0) {
-    style.rotation = round(values.rotation);
-    if (values.rotationAnchor) style.rotationAnchor = values.rotationAnchor;
+  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();
   }
-  if (values.rotation3D && values.rotation3D.angle !== 0) style.rotation3D = { ...values.rotation3D, angle: round(values.rotation3D.angle) };
-  if (values.opacity !== 1) style.opacity = round(values.opacity);
-  if (values.blur !== 0) style.blur = round(values.blur);
-  if (values.brightness !== 0) style.brightness = round(values.brightness);
-  if (values.contrast !== 1) style.contrast = round(values.contrast);
-  if (values.saturation !== 1) style.saturation = round(values.saturation);
-  if (values.grayscale !== 0) style.grayscale = round(values.grayscale);
-  if (values.hueRotation !== 0) style.hueRotation = round(values.hueRotation);
-  return style;
 }
-function EffectBox({ render, children }) {
-  const [reported, setReported] = useState(NO_GEOMETRY);
-  const [needsFrame, setNeedsFrame] = useState(false);
-  let readFrame = false;
-  const style = render(reported, () => {
-    readFrame = true;
-  });
-  useEffect(() => {
-    if (readFrame && !needsFrame) setNeedsFrame(true);
-  });
-  const content = Object.keys(style).length > 0 ? sb("styled", { style }, void 0, children) : children;
-  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);
-      }
-    },
-    content
+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;
 }
-function VisualEffectView({ effect, children }) {
-  const spaces = useCoordinateSpaces();
-  return /* @__PURE__ */ jsx(EffectBox, { render: (reported, markRead) => effectStyle(effect(EMPTY_EFFECT, geometryProxy(reported, spaces, markRead)).values), children });
+const OWN = [
+  EnvironmentContext,
+  ViewEnvironmentContext,
+  NavigationContext,
+  DismissContext,
+  UndoManagerContext
+];
+function useContextBridge(contexts = [], options = {}) {
+  const own = options.environment === false ? OWN.filter((context) => context !== EnvironmentContext) : OWN;
+  const all = [...own, ...contexts];
+  const values = all.map((context) => useContext(context));
+  return (children) => all.reduceRight((inner, context, index) => createElement(context.Provider, { value: values[index] }, inner), 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 ScrollTransitionView({ spec, 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 WINDOW_TOP_INSET = 10;
+function insetsOf(safeArea, fit) {
+  const given = typeof safeArea === "number" ? { top: safeArea } : safeArea ?? { top: fit === "fill" ? WINDOW_TOP_INSET : 0 };
+  return { top: given.top ?? 0, leading: given.leading ?? 0, bottom: given.bottom ?? 0, trailing: given.trailing ?? 0 };
+}
+function SwiftUIView({
+  children,
+  fit = "fill",
+  colorScheme = "light",
+  dynamicTypeSize = "large",
+  contexts,
+  assets,
+  safeArea,
+  history = true,
+  keyboard = fit === "fill",
+  sidebarTitleBar = true,
+  className,
+  style
+}) {
+  const device = useRef(null);
+  const screen = useRef(null);
+  const mounted = useRef(null);
+  const bridge = useContextBridge(contexts, { environment: false });
+  const tree = bridge(children);
+  const latest = useRef(tree);
+  latest.current = tree;
+  useLayoutEffect(() => {
+    if (!screen.current) return;
+    const instance = mount(screen.current, latest.current, {
+      colorScheme,
+      dynamicTypeSize,
+      safeArea: insetsOf(safeArea, fit),
+      contentHeight: fit === "content",
+      history,
+      keyboard,
+      ...assets ? { assets } : {}
+    });
+    mounted.current = instance;
+    return () => {
+      mounted.current = null;
+      instance.unmount();
+    };
+  }, [fit, history, keyboard]);
+  useLayoutEffect(() => {
+    if (mounted.current) mounted.current.renderer.sidebarTitleBar = sidebarTitleBar;
+  }, [sidebarTitleBar, fit, history, keyboard]);
+  useLayoutEffect(() => {
+    mounted.current?.root.render(tree);
+  });
+  const insets2 = insetsOf(safeArea, fit);
+  const insetsKey = `${insets2.top},${insets2.leading},${insets2.bottom},${insets2.trailing}`;
+  useLayoutEffect(() => {
+    mounted.current?.renderer.setSafeArea(insets2);
+  }, [insetsKey]);
+  useLayoutEffect(() => {
+    if (device.current) applyTypeSizeVariables(device.current, dynamicTypeSize, mounted.current?.renderer.platform);
+    mounted.current?.setEnvironment({ colorScheme, dynamicTypeSize });
+  }, [colorScheme, dynamicTypeSize]);
+  const classes = ["device", "sb-island", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ref: device, className: classes, "data-theme": colorScheme, "data-type-size": dynamicTypeSize, "data-state": "ready", "data-sb-fit": fit, style, children: /* @__PURE__ */ jsx("div", { className: "device-screen", children: /* @__PURE__ */ jsx("div", { ref: screen, className: "screen" }) }) });
 }
 const r = (n) => {
   const v = Math.round(n * 100) / 100;
@@ -5982,6 +6098,7 @@ function TextEditor(props) {
   if (focus) editor["focused"] = focus[0];
   if (selection) editor["selection"] = { start: selection[0].start, end: selection[0].end };
   if (own.onDeleteBackward) editor["deleteBackward"] = true;
+  if (own.marks && own.marks.length > 0) editor["marks"] = own.marks.map((mark) => ({ start: mark.start, end: mark.end, color: color(mark.color ?? MARK_COLOR) }));
   return applyModifiers(
     sb("texteditor", editor, {
       text: (event) => setText(rich ? AttributedText.replacingCharacters(text, event.value) : event.value),
@@ -5996,6 +6113,7 @@ function TextEditor(props) {
     modifiers
   );
 }
+const MARK_COLOR = opacity("accent", 0.25);
 function buttonDisabled(modifiers) {
   return modifiers.some(([key, value]) => key === "disabled" && value === true);
 }
@@ -6054,7 +6172,9 @@ ContainerRelativeShape.shape = { kind: "containerRelative", cornerRadius: null }
 function Shape(props) {
   const { own, modifiers } = splitProps(props);
   const [size, setSize] = useState(null);
-  const affine = affinePath(own.path);
+  const sized = useRef(false);
+  const affine = sized.current ? null : affinePath(own.path);
+  if (affine === null) sized.current = true;
   const shapeProps = {
     shape: "path",
     cornerRadius: 0,
@@ -6664,7 +6784,7 @@ function List(props) {
   const ownSettings = takeScrollSettings(modifiers);
   const edgeEffect = edgeEffectProp(useScrollSettings(ownSettings));
   if (edgeEffect) listProps["edgeEffect"] = edgeEffect;
-  const element = /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: sb("list", listProps, refresh.handlers, providingScrollSettings(ownSettings, wrapRows(own.children))) });
+  const element = /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: /* @__PURE__ */ jsx(LazyStackContext.Provider, { value: false, children: sb("list", listProps, refresh.handlers, providingScrollSettings(ownSettings, wrapRows(own.children))) }) });
   return applyModifiers(
     selection ? /* @__PURE__ */ jsx(ListSelectionContext.Provider, { value: selection, children: element }) : element,
     modifiers
@@ -7310,10 +7430,10 @@ function ViewThatFits(props) {
   return applyModifiers(sb("viewthatfits", { axes: own.axes ?? "both" }, void 0, own.children), modifiers);
 }
 function LazyVStack(props) {
-  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: /* @__PURE__ */ jsx(VStack, { ...props }) });
+  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: /* @__PURE__ */ jsx(LazyStackContext.Provider, { value: true, children: /* @__PURE__ */ jsx(VStack, { ...props }) }) });
 }
 function LazyHStack(props) {
-  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "horizontal", children: /* @__PURE__ */ jsx(HStack, { ...props }) });
+  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "horizontal", children: /* @__PURE__ */ jsx(LazyStackContext.Provider, { value: true, children: /* @__PURE__ */ jsx(HStack, { ...props }) }) });
 }
 function ContentUnavailableView(props) {
   const { own, modifiers } = splitProps(props);
@@ -8194,6 +8314,7 @@ export {
   Divider,
   EditButton,
   Ellipse,
+  FlowStack,
   Font,
   ForEach,
   Form,
@@ -8209,6 +8330,7 @@ export {
   GroupBox,
   HStack,
   Host,
+  HostElement,
   Image$1 as Image,
   KeyframeAnimator,
   LOADING_INDICATOR_DELAY_MS,
@@ -8347,6 +8469,7 @@ export {
   usePlatform,
   useRedacted,
   useRefreshable,
+  useRemoteSidebar,
   useReportSplitSelection,
   useScenePhase,
   useSpeechRecognition,