@swiftbrowser/react 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, createElement, useRef, useLayoutEffect, useEffect, useState, useId, Fragment as Fragment$1, Children, isValidElement, cloneElement, useSyncExternalStore } from "react";
+import { createContext, useContext, createElement, useRef, useLayoutEffect, useState, useEffect, Children, useId, Fragment as Fragment$1, isValidElement, cloneElement, useSyncExternalStore } from "react";
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
@@ -534,6 +534,185 @@ function readBinding(value, onChange) {
   return [value, onChange ?? (() => {
   })];
 }
+function sb(kind, props, on, children, target) {
+  const hostProps = { kind };
+  if (props) hostProps.props = props;
+  if (on) hostProps.on = on;
+  if (target) hostProps.target = target;
+  return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
+}
+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 binary = atob(item.data ?? "");
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return typeof File !== "undefined" ? new File([bytes], item.name ?? "file", { type: item.type }) : bytes;
+}
+function DropDestination({ action, isTargeted, accepts, children }) {
+  return sb(
+    "dropdestination",
+    { accepts: accepts ?? [] },
+    {
+      drop: (event) => {
+        if (event.phase === "entered") {
+          isTargeted?.(true);
+          return;
+        }
+        isTargeted?.(false);
+        if (event.phase !== "performed") return;
+        let items;
+        if (event.source !== void 0) items = active && active.id === event.source ? [active.payload] : [];
+        else items = (event.items ?? []).map(itemValue);
+        if (items.length > 0) action(items, { x: event.x, y: event.y });
+      }
+    },
+    children
+  );
+}
+function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
+  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 },
+      /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, 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)
+    ),
+    "root"
+  );
+}
+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, { children: [
+      children,
+      /* @__PURE__ */ jsx(SheetPresenter, { isPresented: [presented, setPresented], content })
+    ] });
+  }
+  const panelContent = columnWidth !== void 0 ? sb("styled", { style: { inspectorColumnWidth: columnWidth } }, void 0, content) : content;
+  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 HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
 function rgb(r2, g, b, a = 1) {
   return { r: r2, g, b, a };
@@ -680,346 +859,102 @@ function insets(edges, amount) {
   }
   return result;
 }
-const r = (n) => {
-  const v = Math.round(n * 100) / 100;
-  return Object.is(v, -0) ? "0" : String(v);
-};
-class Path {
-  parts = [];
-  current = null;
-  start = null;
-  constructor(build) {
-    build?.(this);
-  }
-  /** `Path(rect)` */
-  static rect(rect) {
-    return new Path().addRect(rect);
-  }
-  /** `Path(roundedRect:cornerRadius:)` */
-  static roundedRect(rect, cornerRadius) {
-    return new Path().addRoundedRect(rect, cornerRadius);
+const ScrollRequestContext = createContext(null);
+let nextSerial = 1;
+function ScrollViewReader({ children }) {
+  const [request, setRequest] = useState(null);
+  const proxy = {
+    scrollTo: (id, anchor) => setRequest({ id, anchor: anchor === void 0 ? null : unitPoint(anchor), serial: nextSerial++ })
+  };
+  return /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: request, children: children(proxy) });
+}
+function ScrollTarget({ id, children }) {
+  const request = useContext(ScrollRequestContext);
+  if (request && request.id === id) return styled({ scrollID: true, scrollTo: { anchor: request.anchor, serial: request.serial } }, children);
+  return styled({ scrollID: true }, children);
+}
+const ScrollSettingsContext = createContext({});
+function edgesOf(edges) {
+  const list = Array.isArray(edges) ? edges : [edges];
+  const all = list.some((edge) => edge === "all" || edge === "vertical");
+  return { top: all || list.includes("top"), bottom: all || list.includes("bottom") };
+}
+function edgeStyleSettings(value) {
+  const [style, edges] = Array.isArray(value) ? value : [value, "all"];
+  const on = edgesOf(edges);
+  const name = style === "automatic" ? void 0 : style;
+  const result = {};
+  if (on.top) result.topStyle = name;
+  if (on.bottom) result.bottomStyle = name;
+  return result;
+}
+function edgeHiddenSettings(value) {
+  const [hidden, edges] = Array.isArray(value) ? value : [value, "all"];
+  const on = edgesOf(edges);
+  const result = {};
+  if (on.top) result.topHidden = hidden;
+  if (on.bottom) result.bottomHidden = hidden;
+  return result;
+}
+function marginSettings(value) {
+  return { margins: padding(value) };
+}
+function mergeScrollSettings(outer, inner) {
+  const result = { ...outer };
+  for (const key of ["topStyle", "bottomStyle", "topHidden", "bottomHidden"]) {
+    if (key in inner) result[key] = inner[key];
   }
-  /** `Path(ellipseIn:)` */
-  static ellipse(rect) {
-    return new Path().addEllipse(rect);
-  }
-  move(to) {
-    this.parts.push(`M${r(to.x)} ${r(to.y)}`);
-    this.current = to;
-    this.start = to;
-    return this;
-  }
-  addLine(to) {
-    if (!this.current) return this.move(to);
-    this.parts.push(`L${r(to.x)} ${r(to.y)}`);
-    this.current = to;
-    return this;
-  }
-  addLines(points) {
-    points.forEach((point, index) => index === 0 ? this.move(point) : this.addLine(point));
-    return this;
-  }
-  addQuadCurve(to, control) {
-    if (!this.current) this.move(control);
-    this.parts.push(`Q${r(control.x)} ${r(control.y)} ${r(to.x)} ${r(to.y)}`);
-    this.current = to;
-    return this;
-  }
-  addCurve(to, control1, control2) {
-    if (!this.current) this.move(control1);
-    this.parts.push(`C${r(control1.x)} ${r(control1.y)} ${r(control2.x)} ${r(control2.y)} ${r(to.x)} ${r(to.y)}`);
-    this.current = to;
-    return this;
-  }
-  /**
-   * `addArc(center:radius:startAngle:endAngle:clockwise:)`, angles in
-   * degrees. As in SwiftUI's flipped coordinates, `clockwise: false` draws
-   * clockwise on screen.
-   */
-  addArc(center, radius, startAngle, endAngle, clockwise) {
-    const rad = (deg) => deg * Math.PI / 180;
-    const point = (deg) => ({ x: center.x + radius * Math.cos(rad(deg)), y: center.y + radius * Math.sin(rad(deg)) });
-    const from = point(startAngle);
-    if (this.current) this.addLine(from);
-    else this.move(from);
-    const sweepPositive = !clockwise;
-    let delta = endAngle - startAngle;
-    if (sweepPositive) while (delta < 0) delta += 360;
-    else while (delta > 0) delta -= 360;
-    if (Math.abs(delta) >= 360) {
-      const half = point(startAngle + (sweepPositive ? 180 : -180));
-      const flag = sweepPositive ? 1 : 0;
-      this.parts.push(`A${r(radius)} ${r(radius)} 0 0 ${flag} ${r(half.x)} ${r(half.y)}`);
-      this.parts.push(`A${r(radius)} ${r(radius)} 0 0 ${flag} ${r(from.x)} ${r(from.y)}`);
-      this.current = from;
-      return this;
-    }
-    const to = point(startAngle + delta);
-    const large = Math.abs(delta) > 180 ? 1 : 0;
-    this.parts.push(`A${r(radius)} ${r(radius)} 0 ${large} ${sweepPositive ? 1 : 0} ${r(to.x)} ${r(to.y)}`);
-    this.current = to;
-    return this;
-  }
-  addRect(rect) {
-    this.move({ x: rect.x, y: rect.y });
-    this.addLine({ x: rect.x + rect.width, y: rect.y });
-    this.addLine({ x: rect.x + rect.width, y: rect.y + rect.height });
-    this.addLine({ x: rect.x, y: rect.y + rect.height });
-    return this.closeSubpath();
-  }
-  addRoundedRect(rect, cornerRadius) {
-    const c = Math.max(0, Math.min(cornerRadius, rect.width / 2, rect.height / 2));
-    if (c === 0) return this.addRect(rect);
-    const { x, y, width: w, height: h } = rect;
-    this.move({ x: x + c, y });
-    this.addLine({ x: x + w - c, y });
-    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + w)} ${r(y + c)}`);
-    this.current = { x: x + w, y: y + c };
-    this.addLine({ x: x + w, y: y + h - c });
-    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + w - c)} ${r(y + h)}`);
-    this.current = { x: x + w - c, y: y + h };
-    this.addLine({ x: x + c, y: y + h });
-    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x)} ${r(y + h - c)}`);
-    this.current = { x, y: y + h - c };
-    this.addLine({ x, y: y + c });
-    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + c)} ${r(y)}`);
-    this.current = { x: x + c, y };
-    return this.closeSubpath();
-  }
-  addEllipse(rect) {
-    const rx = rect.width / 2;
-    const ry = rect.height / 2;
-    const cx = rect.x + rx;
-    const cy = rect.y + ry;
-    this.move({ x: cx + rx, y: cy });
-    this.parts.push(`A${r(rx)} ${r(ry)} 0 0 1 ${r(cx - rx)} ${r(cy)}`);
-    this.parts.push(`A${r(rx)} ${r(ry)} 0 0 1 ${r(cx + rx)} ${r(cy)}`);
-    this.current = { x: cx + rx, y: cy };
-    return this.closeSubpath();
-  }
-  addPath(path) {
-    this.parts.push(path.svg());
-    return this;
-  }
-  closeSubpath() {
-    this.parts.push("Z");
-    this.current = this.start;
-    return this;
-  }
-  get isEmpty() {
-    return this.parts.length === 0;
-  }
-  /** The SVG path data. */
-  svg() {
-    return this.parts.join("");
-  }
-  toString() {
-    return this.svg();
-  }
-}
-function sb(kind, props, on, children, target) {
-  const hostProps = { kind };
-  if (props) hostProps.props = props;
-  if (on) hostProps.on = on;
-  if (target) hostProps.target = target;
-  return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, 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 binary = atob(item.data ?? "");
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-  return typeof File !== "undefined" ? new File([bytes], item.name ?? "file", { type: item.type }) : bytes;
-}
-function DropDestination({ action, isTargeted, accepts, children }) {
-  return sb(
-    "dropdestination",
-    { accepts: accepts ?? [] },
-    {
-      drop: (event) => {
-        if (event.phase === "entered") {
-          isTargeted?.(true);
-          return;
-        }
-        isTargeted?.(false);
-        if (event.phase !== "performed") return;
-        let items;
-        if (event.source !== void 0) items = active && active.id === event.source ? [active.payload] : [];
-        else items = (event.items ?? []).map(itemValue);
-        if (items.length > 0) action(items, { x: event.x, y: event.y });
-      }
-    },
-    children
-  );
-}
-function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
-  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 },
-      /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, 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)
-    ),
-    "root"
-  );
-}
-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, { children: [
-      children,
-      /* @__PURE__ */ jsx(SheetPresenter, { isPresented: [presented, setPresented], content })
-    ] });
-  }
-  const panelContent = columnWidth !== void 0 ? sb("styled", { style: { inspectorColumnWidth: columnWidth } }, void 0, content) : content;
-  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 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 Hover({ action, children }) {
-  return sb("styled", { style: { hover: true } }, { hover: (event) => action(event.value) }, children);
-}
-const CURSORS = {
-  link: "pointer",
-  automatic: "auto",
-  default: "default",
-  text: "text",
-  verticalText: "vertical-text",
-  grabIdle: "grab",
-  grabActive: "grabbing",
-  rectSelection: "crosshair",
-  columnResize: "col-resize",
-  rowResize: "row-resize"
-};
-function cursorFor(style) {
-  return CURSORS[style] ?? style;
-}
-function SymbolEffect({ spec, children }) {
-  const serial = useRef(null);
-  const discrete = "value" in spec;
-  if (discrete) {
-    if (!serial.current) serial.current = { value: spec.value, count: 0 };
-    else if (!Object.is(serial.current.value, spec.value)) serial.current = { value: spec.value, count: serial.current.count + 1 };
+  if (inner.margins) result.margins = { ...outer.margins, ...inner.margins };
+  return result;
+}
+function withScrollSettings(settings, children) {
+  return createElement(ScrollSettingsExtender, { settings }, children);
+}
+function ScrollSettingsExtender({ settings, children }) {
+  const outer = useContext(ScrollSettingsContext);
+  return createElement(ScrollSettingsContext.Provider, { value: mergeScrollSettings(outer, settings) }, children);
+}
+function useScrollSettings(own) {
+  return mergeScrollSettings(useContext(ScrollSettingsContext), own);
+}
+function edgeEffectProp(settings) {
+  const edges = {};
+  const top = settings.topHidden ? "hidden" : settings.topStyle;
+  const bottom = settings.bottomHidden ? "hidden" : settings.bottomStyle;
+  if (top) edges.top = top;
+  if (bottom) edges.bottom = bottom;
+  return top || bottom ? edges : void 0;
+}
+function marginedContent(children, margins, axis) {
+  if (!margins || Object.values(margins).every((value) => !value)) return children;
+  const list = Children.toArray(children);
+  const content = list.length === 1 ? list[0] : sb(axis === "horizontal" ? "hstack" : "vstack", { spacing: null, alignment: "center" }, void 0, children);
+  return sb("styled", { style: { padding: margins } }, void 0, content);
+}
+function Hover({ action, children }) {
+  return sb("styled", { style: { hover: true } }, { hover: (event) => action(event.value) }, children);
+}
+const CURSORS = {
+  link: "pointer",
+  automatic: "auto",
+  default: "default",
+  text: "text",
+  verticalText: "vertical-text",
+  grabIdle: "grab",
+  grabActive: "grabbing",
+  rectSelection: "crosshair",
+  columnResize: "col-resize",
+  rowResize: "row-resize"
+};
+function cursorFor(style) {
+  return CURSORS[style] ?? style;
+}
+function SymbolEffect({ spec, children }) {
+  const serial = useRef(null);
+  const discrete = "value" in spec;
+  if (discrete) {
+    if (!serial.current) serial.current = { value: spec.value, count: 0 };
+    else if (!Object.is(serial.current.value, spec.value)) serial.current = { value: spec.value, count: serial.current.count + 1 };
   }
   if (!discrete && spec.isActive === false) return children;
   const effect = { effect: spec.effect };
@@ -1132,6 +1067,25 @@ function toolbarPlacement(name) {
       return "trailing";
   }
 }
+function containerRelativeFrame(value) {
+  const spec = typeof value === "string" ? { axes: value } : value;
+  const horizontal = spec.axes !== "vertical";
+  const vertical = spec.axes !== "horizontal";
+  let a = 1;
+  let b = 0;
+  if (spec.length) {
+    const axis = horizontal ? "horizontal" : "vertical";
+    b = spec.length(0, axis);
+    a = (spec.length(1e3, axis) - b) / 1e3;
+  } else if (spec.count !== void 0) {
+    const n = Math.max(spec.count, 1);
+    const span = Math.max(spec.span ?? 1, 1);
+    const spacing = spec.spacing ?? 0;
+    a = span / n;
+    b = -spacing * (n - 1) * span / n + spacing * (span - 1);
+  }
+  return { ...horizontal ? { horizontal: true } : {}, ...vertical ? { vertical: true } : {}, a, b, alignment: spec.alignment ?? "center" };
+}
 const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "padding",
   "font",
@@ -1230,7 +1184,13 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "sensoryFeedback",
   "textCase",
   "coordinateSpace",
-  "contentTransition"
+  "contentTransition",
+  "scrollEdgeEffectStyle",
+  "scrollEdgeEffectHidden",
+  "contentMargins",
+  "containerRelativeFrame",
+  "visualEffect",
+  "scrollTransition"
 ]);
 function splitProps(props) {
   const own = {};
@@ -1535,7 +1495,7 @@ function apply(key, value, node, sides) {
       const spec = value;
       const at = (width, height) => spec.value({ width, height });
       const a = at(0, 0);
-      const round = (n) => Math.round(n * 1e6) / 1e6;
+      const round2 = (n) => Math.round(n * 1e6) / 1e6;
       const vertical = ["top", "bottom", "verticalCenter", "firstTextBaseline", "lastTextBaseline"].includes(spec.guide);
       const name = spec.guide === "horizontalCenter" || spec.guide === "verticalCenter" ? "center" : spec.guide;
       return styled(
@@ -1543,7 +1503,7 @@ function apply(key, value, node, sides) {
           alignmentGuide: {
             axis: vertical ? "vertical" : "horizontal",
             name,
-            value: [round(a), round((at(100, 0) - a) / 100), round((at(0, 100) - a) / 100)]
+            value: [round2(a), round2((at(100, 0) - a) / 100), round2((at(0, 100) - a) / 100)]
           }
         },
         node
@@ -1586,291 +1546,809 @@ function apply(key, value, node, sides) {
       const spec = value;
       return styled({ matchedGeometry: `${spec.namespace ?? ""}:${spec.id}` }, node);
     }
-    case "layoutValue":
-      return node;
-    case "safeAreaInset": {
-      const spec = value;
-      const vertical = spec.edge === "top" || spec.edge === "bottom";
-      const before = spec.edge === "top" || spec.edge === "leading";
-      const children = before ? [createElement(Fragment$1, { key: "inset" }, spec.content), createElement(Fragment$1, { key: "content" }, node)] : [createElement(Fragment$1, { key: "content" }, node), createElement(Fragment$1, { key: "inset" }, spec.content)];
-      return vertical ? sb("vstack", { spacing: spec.spacing ?? 0, alignment: spec.alignment ?? "center" }, void 0, children) : sb("hstack", { spacing: spec.spacing ?? 0, alignment: spec.alignment ?? "center" }, void 0, children);
+    case "layoutValue":
+      return node;
+    case "safeAreaInset": {
+      const spec = value;
+      const vertical = spec.edge === "top" || spec.edge === "bottom";
+      const before = spec.edge === "top" || spec.edge === "leading";
+      const children = before ? [createElement(Fragment$1, { key: "inset" }, spec.content), createElement(Fragment$1, { key: "content" }, node)] : [createElement(Fragment$1, { key: "content" }, node), createElement(Fragment$1, { key: "inset" }, spec.content)];
+      return vertical ? sb("vstack", { spacing: spec.spacing ?? 0, alignment: spec.alignment ?? "center" }, void 0, children) : sb("hstack", { spacing: spec.spacing ?? 0, alignment: spec.alignment ?? "center" }, void 0, children);
+    }
+    case "popover":
+      sides.push(createElement(SheetPresenter, value));
+      return node;
+    case "redacted":
+      return withEnvironment({ redacted: Boolean(value) }, node);
+    case "keyboardShortcut":
+      return node;
+    case "onKeyPress":
+      sides.push(createElement(KeyPressListener, { spec: value }));
+      return node;
+    case "sensoryFeedback": {
+      const spec = value;
+      sides.push(createElement(SensoryFeedbackPlayer, spec));
+      return node;
+    }
+    case "textCase":
+      return withEnvironment({ textCase: value }, node);
+    case "coordinateSpace":
+      return createElement(CoordinateSpace, { name: value }, node);
+    case "scrollEdgeEffectStyle":
+      return withScrollSettings(edgeStyleSettings(value), node);
+    case "scrollEdgeEffectHidden":
+      return withScrollSettings(edgeHiddenSettings(value), node);
+    case "contentMargins":
+      return withScrollSettings(marginSettings(value), node);
+    case "containerRelativeFrame":
+      return styled({ containerRelativeFrame: containerRelativeFrame(value) }, node);
+    case "visualEffect":
+      return createElement(VisualEffectView, { effect: value }, node);
+    case "scrollTransition": {
+      const spec = typeof value === "function" ? { transition: value } : value;
+      return createElement(ScrollTransitionView, { spec }, node);
+    }
+    case "contentTransition": {
+      if (value === "identity") return node;
+      if (typeof value === "object") {
+        const countsDown = value.numericText.countsDown;
+        return styled({ contentTransition: { kind: "numericText", ...countsDown !== void 0 ? { countsDown } : {} } }, node);
+      }
+      return styled({ contentTransition: { kind: value } }, node);
+    }
+    case "modifiers": {
+      let result = node;
+      for (const extra of value) {
+        result = wrap(result, Object.entries(extra), sides);
+      }
+      return result;
+    }
+    default: {
+      const unknown = key;
+      throw new Error(`Unknown modifier ${String(unknown)}`);
+    }
+  }
+}
+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 LAZY_BATCH = 12;
+const LazyContext = createContext(null);
+function LazyGroup({ rows, start = 0, wrap: wrap2 }) {
+  const axis = useContext(LazyContext);
+  const request = useContext(ScrollRequestContext);
+  const [count, setCount] = useState(LAZY_BATCH);
+  const target = request ? rows.findIndex((row) => rowMatches(row, request.id)) : -1;
+  const needed = target >= 0 ? Math.ceil((target + 1) / LAZY_BATCH) * LAZY_BATCH : 0;
+  useEffect(() => {
+    if (needed > count) setCount(needed);
+  }, [needed, count]);
+  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 });
+}
+function rowMatches(row, id) {
+  if (row.key !== null && row.key === String(id)) return true;
+  let element = row;
+  for (let depth = 0; element && depth < 3; depth++) {
+    const props = element.props;
+    if (props.scrollID === id) return true;
+    element = isValidElement(props.children) ? props.children : null;
+  }
+  return false;
+}
+function VStack(props) {
+  const { own, modifiers } = splitProps(props);
+  const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
+  if (own.scrollTargetLayout) stack["scrollTarget"] = true;
+  return applyModifiers(sb("vstack", stack, void 0, own.children), modifiers);
+}
+function HStack(props) {
+  const { own, modifiers } = splitProps(props);
+  const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
+  if (own.scrollTargetLayout) stack["scrollTarget"] = true;
+  return applyModifiers(sb("hstack", stack, void 0, own.children), modifiers);
+}
+function ZStack(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("zstack", { alignment: own.alignment ?? "center" }, void 0, own.children), modifiers);
+}
+function Spacer(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("spacer", { minLength: own.minLength ?? null }), modifiers);
+}
+function Divider(props) {
+  const { modifiers } = splitProps(props);
+  return applyModifiers(sb("divider", {}), modifiers);
+}
+function ScrollView(props) {
+  const { own, modifiers } = splitProps(props);
+  const refresh = useRefreshable(takeModifier(modifiers, "refreshable"));
+  const ownSettings = takeScrollSettings(modifiers);
+  const settings = useScrollSettings(ownSettings);
+  const axes = own.axes ?? "vertical";
+  const scroll = { axes, ...refresh.props };
+  if (own.scrollTargetBehavior) scroll["snap"] = own.scrollTargetBehavior;
+  if (own.scrollDismissesKeyboard) scroll["dismissesKeyboard"] = true;
+  const edgeEffect = edgeEffectProp(settings);
+  if (edgeEffect) scroll["edgeEffect"] = edgeEffect;
+  const content = marginedContent(own.children, settings.margins, axes === "horizontal" ? "horizontal" : "vertical");
+  return applyModifiers(sb("scrollview", scroll, refresh.handlers, providingScrollSettings(ownSettings, content)), modifiers);
+}
+function takeScrollSettings(modifiers) {
+  let settings = {};
+  const own = [];
+  for (const key of ["scrollEdgeEffectStyle", "scrollEdgeEffectHidden", "contentMargins"]) {
+    const value = takeModifier(modifiers, key);
+    if (value === void 0) continue;
+    if (key === "scrollEdgeEffectStyle") own.push(edgeStyleSettings(value));
+    else if (key === "scrollEdgeEffectHidden") own.push(edgeHiddenSettings(value));
+    else own.push(marginSettings(value));
+  }
+  for (const each of own) settings = mergeScrollSettings(settings, each);
+  return settings;
+}
+function providingScrollSettings(settings, children) {
+  return Object.keys(settings).length > 0 ? withScrollSettings(settings, children) : children;
+}
+function useRefreshable(own) {
+  const environment = useViewEnvironment();
+  const refresh = own ?? environment.refresh;
+  const [refreshing, setRefreshing] = useState(false);
+  if (!refresh) return { props: {} };
+  return {
+    props: { refreshable: true, refreshing },
+    handlers: {
+      refresh: () => {
+        if (refreshing) return;
+        setRefreshing(true);
+        Promise.resolve().then(refresh).catch((error) => console.error(error)).finally(() => setRefreshing(false));
+      }
+    }
+  };
+}
+function Group(props) {
+  const { own, modifiers } = splitProps(props);
+  if (modifiers.length === 0) return own.children;
+  return Children.map(own.children, (child) => applyModifiers(child, modifiers));
+}
+function moveItems(items, offsets, to) {
+  const moving = new Set(offsets);
+  const picked = items.filter((_, index) => moving.has(index));
+  const rest = items.filter((_, index) => !moving.has(index));
+  const before = offsets.filter((offset) => offset < to).length;
+  const at = to - before;
+  return [...rest.slice(0, at), ...picked, ...rest.slice(at)];
+}
+function ForEach(props) {
+  const { own, modifiers } = splitProps(props);
+  const rows = own.data.map((element, index) => {
+    const key = own.id ? own.id(element, index) : keyOf(element, index);
+    const content = applyModifiers(own.children(element, index), modifiers);
+    if (!own.onDelete && !own.onMove) return createElement(Fragment$1, { key }, content);
+    const { onDelete, onMove } = own;
+    const row = { tag: key, index };
+    if (onDelete) {
+      row.onDelete = () => onDelete([index]);
+      row.deletable = !own.deleteDisabled?.(element, index);
+    }
+    if (onMove) {
+      row.onMove = (to) => onMove([index], to);
+      row.movable = !own.moveDisabled?.(element, index);
+    }
+    return createElement(Row, { key, ...row }, content);
+  });
+  return rows.length > LAZY_BATCH ? createElement(LazyGroup, { rows }) : rows;
+}
+function keyOf(element, index) {
+  if (typeof element === "string" || typeof element === "number") return element;
+  if (typeof element === "object" && element !== null && "id" in element) {
+    const id = element.id;
+    if (typeof id === "string" || typeof id === "number") return id;
+  }
+  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$1) {
+      const inner = element.props["children"];
+      if (element.key !== null && isValidElement(inner) && inner.key === null && inner.type !== Fragment$1) {
+        visit({ ...inner, key: element.key });
+        return;
+      }
+      visit(inner);
+      return;
+    }
+    if (element.type === ForEach) {
+      visit(ForEach(element.props));
+      return;
     }
-    case "popover":
-      sides.push(createElement(SheetPresenter, value));
-      return node;
-    case "redacted":
-      return withEnvironment({ redacted: Boolean(value) }, node);
-    case "keyboardShortcut":
-      return node;
-    case "onKeyPress":
-      sides.push(createElement(KeyPressListener, { spec: value }));
-      return node;
-    case "sensoryFeedback": {
-      const spec = value;
-      sides.push(createElement(SensoryFeedbackPlayer, spec));
-      return node;
+    if (element.type === LazyGroup && !options.keepLazy) {
+      visit(element.props.rows);
+      return;
     }
-    case "textCase":
-      return withEnvironment({ textCase: value }, node);
-    case "coordinateSpace":
-      return createElement(CoordinateSpace, { name: value }, node);
-    case "contentTransition": {
-      if (value === "identity") return node;
-      if (typeof value === "object") {
-        const countsDown = value.numericText.countsDown;
-        return styled({ contentTransition: { kind: "numericText", ...countsDown !== void 0 ? { countsDown } : {} } }, node);
-      }
-      return styled({ contentTransition: { kind: value } }, node);
+    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 LazyVGrid(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(
+    sb("lazyvgrid", { columns: own.columns, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" }, void 0, own.children),
+    modifiers
+  );
+}
+function LazyHGrid(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(
+    sb("lazyhgrid", { rows: own.rows, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" }, void 0, own.children),
+    modifiers
+  );
+}
+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);
+}
+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 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;
     }
-    case "modifiers": {
-      let result = node;
-      for (const extra of value) {
-        result = wrap(result, Object.entries(extra), sides);
+  };
+}
+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
+  );
+}
+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 };
       }
-      return result;
+    };
+  });
+  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;
     }
-    default: {
-      const unknown = key;
-      throw new Error(`Unknown modifier ${String(unknown)}`);
+  }
+  return {
+    size,
+    frames: placed,
+    guides,
+    sizes: {
+      min: measure({ width: 0, height: 0 }),
+      ideal: measure({ width: null, height: null }),
+      max: measure({ width: Infinity, height: Infinity })
     }
+  };
+}
+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) }
+    };
+  }
+  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]
+  );
+}
+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 });
+  }
+}
+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;
   }
+  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;
 }
-const ScrollRequestContext = createContext(null);
-let nextSerial = 1;
-function ScrollViewReader({ children }) {
-  const [request, setRequest] = useState(null);
-  const proxy = {
-    scrollTo: (id, anchor) => setRequest({ id, anchor: anchor === void 0 ? null : unitPoint(anchor), serial: nextSerial++ })
+function interpolateEffects(from, to, t) {
+  const mix = (a, b) => a + (b - a) * t;
+  const result = {
+    offsetX: mix(from.offsetX, to.offsetX),
+    offsetY: mix(from.offsetY, to.offsetY),
+    scaleX: mix(from.scaleX, to.scaleX),
+    scaleY: mix(from.scaleY, to.scaleY),
+    rotation: mix(from.rotation, to.rotation),
+    opacity: mix(from.opacity, to.opacity),
+    blur: mix(from.blur, to.blur),
+    brightness: mix(from.brightness, to.brightness),
+    contrast: mix(from.contrast, to.contrast),
+    saturation: mix(from.saturation, to.saturation),
+    grayscale: mix(from.grayscale, to.grayscale),
+    hueRotation: mix(from.hueRotation, to.hueRotation)
   };
-  return /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: request, children: children(proxy) });
-}
-function ScrollTarget({ id, children }) {
-  const request = useContext(ScrollRequestContext);
-  if (request && request.id === id) return styled({ scrollID: true, scrollTo: { anchor: request.anchor, serial: request.serial } }, children);
-  return styled({ scrollID: true }, children);
+  const scaleAnchor = to.scaleAnchor ?? from.scaleAnchor;
+  if (scaleAnchor) result.scaleAnchor = scaleAnchor;
+  const rotationAnchor = to.rotationAnchor ?? from.rotationAnchor;
+  if (rotationAnchor) result.rotationAnchor = rotationAnchor;
+  const rotation3D = to.rotation3D ?? from.rotation3D;
+  if (rotation3D) result.rotation3D = { ...rotation3D, angle: mix(from.rotation3D?.angle ?? 0, to.rotation3D?.angle ?? 0) };
+  return result;
 }
-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;
+function EffectBox({
+  render,
+  alwaysFrame,
+  animationToken,
+  children
+}) {
+  const [reported, setReported] = useState(NO_GEOMETRY);
+  const [needsFrame, setNeedsFrame] = useState(alwaysFrame);
+  let readFrame = false;
+  const style = render(reported, () => {
+    readFrame = true;
+  });
+  useEffect(() => {
+    if (readFrame && !needsFrame) setNeedsFrame(true);
+  });
+  let content = Object.keys(style).length > 0 ? sb("styled", { style }, void 0, children) : children;
+  if (animationToken) content = sb("styled", { style: { animation: { type: "default" }, animationToken: animationToken(reported) } }, void 0, content);
   return sb(
-    "listrow",
-    props,
+    "zstack",
+    { alignment: "center", reportsSize: true, ...needsFrame ? { reportsFrame: true } : {} },
     {
-      tap: () => selectable && selection.select(tag),
-      delete: () => onDelete?.(),
-      move: (event) => {
-        const start = (containerIndex ?? index ?? 0) - (index ?? 0);
-        onMove?.(Math.max(0, event.to - start));
+      geometry: (event) => {
+        const next = nextGeometry(event, reported);
+        if (JSON.stringify(next) !== JSON.stringify(reported)) setReported(next);
       }
     },
-    children
+    content
   );
 }
-const LAZY_BATCH = 12;
-const LazyContext = createContext(null);
-function LazyGroup({ rows, start = 0, wrap: wrap2 }) {
-  const axis = useContext(LazyContext);
-  const request = useContext(ScrollRequestContext);
-  const [count, setCount] = useState(LAZY_BATCH);
-  const target = request ? rows.findIndex((row) => rowMatches(row, request.id)) : -1;
-  const needed = target >= 0 ? Math.ceil((target + 1) / LAZY_BATCH) * LAZY_BATCH : 0;
-  useEffect(() => {
-    if (needed > count) setCount(needed);
-  }, [needed, count]);
-  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 });
-}
-function rowMatches(row, id) {
-  if (row.key !== null && row.key === String(id)) return true;
-  let element = row;
-  for (let depth = 0; element && depth < 3; depth++) {
-    const props = element.props;
-    if (props.scrollID === id) return true;
-    element = isValidElement(props.children) ? props.children : null;
-  }
-  return false;
-}
-function VStack(props) {
-  const { own, modifiers } = splitProps(props);
-  const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
-  if (own.scrollTargetLayout) stack["scrollTarget"] = true;
-  return applyModifiers(sb("vstack", stack, void 0, own.children), modifiers);
-}
-function HStack(props) {
-  const { own, modifiers } = splitProps(props);
-  const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
-  if (own.scrollTargetLayout) stack["scrollTarget"] = true;
-  return applyModifiers(sb("hstack", stack, void 0, own.children), modifiers);
-}
-function ZStack(props) {
-  const { own, modifiers } = splitProps(props);
-  return applyModifiers(sb("zstack", { alignment: own.alignment ?? "center" }, void 0, own.children), modifiers);
-}
-function Spacer(props) {
-  const { own, modifiers } = splitProps(props);
-  return applyModifiers(sb("spacer", { minLength: own.minLength ?? null }), modifiers);
-}
-function Divider(props) {
-  const { modifiers } = splitProps(props);
-  return applyModifiers(sb("divider", {}), modifiers);
-}
-function ScrollView(props) {
-  const { own, modifiers } = splitProps(props);
-  const refresh = useRefreshable(takeModifier(modifiers, "refreshable"));
-  const scroll = { axes: own.axes ?? "vertical", ...refresh.props };
-  if (own.scrollTargetBehavior) scroll["snap"] = own.scrollTargetBehavior;
-  if (own.scrollDismissesKeyboard) scroll["dismissesKeyboard"] = true;
-  return applyModifiers(sb("scrollview", scroll, refresh.handlers, own.children), modifiers);
-}
-function useRefreshable(own) {
-  const environment = useViewEnvironment();
-  const refresh = own ?? environment.refresh;
-  const [refreshing, setRefreshing] = useState(false);
-  if (!refresh) return { props: {} };
-  return {
-    props: { refreshable: true, refreshing },
-    handlers: {
-      refresh: () => {
-        if (refreshing) return;
-        setRefreshing(true);
-        Promise.resolve().then(refresh).catch((error) => console.error(error)).finally(() => setRefreshing(false));
-      }
-    }
-  };
-}
-function Group(props) {
-  const { own, modifiers } = splitProps(props);
-  if (modifiers.length === 0) return own.children;
-  return Children.map(own.children, (child) => applyModifiers(child, modifiers));
-}
-function moveItems(items, offsets, to) {
-  const moving = new Set(offsets);
-  const picked = items.filter((_, index) => moving.has(index));
-  const rest = items.filter((_, index) => !moving.has(index));
-  const before = offsets.filter((offset) => offset < to).length;
-  const at = to - before;
-  return [...rest.slice(0, at), ...picked, ...rest.slice(at)];
+function VisualEffectView({ effect, children }) {
+  const spaces = useCoordinateSpaces();
+  return /* @__PURE__ */ jsx(EffectBox, { alwaysFrame: false, render: (reported, markRead) => effectStyle(effect(EMPTY_EFFECT, geometryProxy(reported, spaces, markRead)).values), children });
 }
-function ForEach(props) {
-  const { own, modifiers } = splitProps(props);
-  const rows = own.data.map((element, index) => {
-    const key = own.id ? own.id(element, index) : keyOf(element, index);
-    const content = applyModifiers(own.children(element, index), modifiers);
-    if (!own.onDelete && !own.onMove) return createElement(Fragment$1, { key }, content);
-    const { onDelete, onMove } = own;
-    const row = { tag: key, index };
-    if (onDelete) {
-      row.onDelete = () => onDelete([index]);
-      row.deletable = !own.deleteDisabled?.(element, index);
-    }
-    if (onMove) {
-      row.onMove = (to) => onMove([index], to);
-      row.movable = !own.moveDisabled?.(element, index);
+const PHASES = {
+  topLeading: { phase: "topLeading", value: -1, isIdentity: false },
+  identity: { phase: "identity", value: 0, isIdentity: true },
+  bottomTrailing: { phase: "bottomTrailing", value: 1, isIdentity: false }
+};
+function scrollProgress(reported, axis) {
+  const view = reported.scrollView;
+  const origin = reported.origin;
+  if (!view || !origin) return 0;
+  const horizontal = (axis ?? view.axis) === "horizontal";
+  const start = horizontal ? origin.x : origin.y;
+  const length = horizontal ? reported.size.width : reported.size.height;
+  const viewStart = horizontal ? view.x : view.y;
+  const viewEnd = viewStart + (horizontal ? view.width : view.height);
+  if (length <= 0) return 0;
+  if (start < viewStart) return -Math.min(1, (viewStart - start) / length);
+  if (start + length > viewEnd) return Math.min(1, (start + length - viewEnd) / length);
+  return 0;
+}
+function scrollTransitionValues(spec, progress) {
+  const identity = spec.transition(EMPTY_EFFECT, PHASES.identity).values;
+  const configuration = spec.configuration ?? "interactive";
+  if (configuration === "identity" || progress === 0) return identity;
+  const edge = spec.transition(EMPTY_EFFECT, progress < 0 ? PHASES.topLeading : PHASES.bottomTrailing).values;
+  if (configuration === "animated") return edge;
+  return interpolateEffects(identity, edge, Math.abs(progress));
+}
+function ScrollTransitionView({ spec, children }) {
+  return /* @__PURE__ */ jsx(
+    EffectBox,
+    {
+      alwaysFrame: true,
+      render: (reported) => effectStyle(scrollTransitionValues(spec, scrollProgress(reported, spec.axis))),
+      ...spec.configuration === "animated" ? { animationToken: (reported) => Math.sign(scrollProgress(reported, spec.axis)) + 1 } : {},
+      children
     }
-    return createElement(Row, { key, ...row }, content);
-  });
-  return rows.length > LAZY_BATCH ? createElement(LazyGroup, { rows }) : rows;
+  );
 }
-function keyOf(element, index) {
-  if (typeof element === "string" || typeof element === "number") return element;
-  if (typeof element === "object" && element !== null && "id" in element) {
-    const id = element.id;
-    if (typeof id === "string" || typeof id === "number") return id;
+const r = (n) => {
+  const v = Math.round(n * 100) / 100;
+  return Object.is(v, -0) ? "0" : String(v);
+};
+class Path {
+  parts = [];
+  current = null;
+  start = null;
+  constructor(build) {
+    build?.(this);
   }
-  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$1) {
-      const inner = element.props["children"];
-      if (element.key !== null && isValidElement(inner) && inner.key === null && inner.type !== Fragment$1) {
-        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;
+  /** `Path(rect)` */
+  static rect(rect) {
+    return new Path().addRect(rect);
+  }
+  /** `Path(roundedRect:cornerRadius:)` */
+  static roundedRect(rect, cornerRadius) {
+    return new Path().addRoundedRect(rect, cornerRadius);
+  }
+  /** `Path(ellipseIn:)` */
+  static ellipse(rect) {
+    return new Path().addEllipse(rect);
+  }
+  move(to) {
+    this.parts.push(`M${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    this.start = to;
+    return this;
+  }
+  addLine(to) {
+    if (!this.current) return this.move(to);
+    this.parts.push(`L${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    return this;
+  }
+  addLines(points) {
+    points.forEach((point, index) => index === 0 ? this.move(point) : this.addLine(point));
+    return this;
+  }
+  addQuadCurve(to, control) {
+    if (!this.current) this.move(control);
+    this.parts.push(`Q${r(control.x)} ${r(control.y)} ${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    return this;
+  }
+  addCurve(to, control1, control2) {
+    if (!this.current) this.move(control1);
+    this.parts.push(`C${r(control1.x)} ${r(control1.y)} ${r(control2.x)} ${r(control2.y)} ${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    return this;
+  }
+  /**
+   * `addArc(center:radius:startAngle:endAngle:clockwise:)`, angles in
+   * degrees. As in SwiftUI's flipped coordinates, `clockwise: false` draws
+   * clockwise on screen.
+   */
+  addArc(center, radius, startAngle, endAngle, clockwise) {
+    const rad = (deg) => deg * Math.PI / 180;
+    const point = (deg) => ({ x: center.x + radius * Math.cos(rad(deg)), y: center.y + radius * Math.sin(rad(deg)) });
+    const from = point(startAngle);
+    if (this.current) this.addLine(from);
+    else this.move(from);
+    const sweepPositive = !clockwise;
+    let delta = endAngle - startAngle;
+    if (sweepPositive) while (delta < 0) delta += 360;
+    else while (delta > 0) delta -= 360;
+    if (Math.abs(delta) >= 360) {
+      const half = point(startAngle + (sweepPositive ? 180 : -180));
+      const flag = sweepPositive ? 1 : 0;
+      this.parts.push(`A${r(radius)} ${r(radius)} 0 0 ${flag} ${r(half.x)} ${r(half.y)}`);
+      this.parts.push(`A${r(radius)} ${r(radius)} 0 0 ${flag} ${r(from.x)} ${r(from.y)}`);
+      this.current = from;
+      return this;
     }
-    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) };
+    const to = point(startAngle + delta);
+    const large = Math.abs(delta) > 180 ? 1 : 0;
+    this.parts.push(`A${r(radius)} ${r(radius)} 0 ${large} ${sweepPositive ? 1 : 0} ${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    return this;
+  }
+  addRect(rect) {
+    this.move({ x: rect.x, y: rect.y });
+    this.addLine({ x: rect.x + rect.width, y: rect.y });
+    this.addLine({ x: rect.x + rect.width, y: rect.y + rect.height });
+    this.addLine({ x: rect.x, y: rect.y + rect.height });
+    return this.closeSubpath();
+  }
+  addRoundedRect(rect, cornerRadius) {
+    const c = Math.max(0, Math.min(cornerRadius, rect.width / 2, rect.height / 2));
+    if (c === 0) return this.addRect(rect);
+    const { x, y, width: w, height: h } = rect;
+    this.move({ x: x + c, y });
+    this.addLine({ x: x + w - c, y });
+    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + w)} ${r(y + c)}`);
+    this.current = { x: x + w, y: y + c };
+    this.addLine({ x: x + w, y: y + h - c });
+    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + w - c)} ${r(y + h)}`);
+    this.current = { x: x + w - c, y: y + h };
+    this.addLine({ x: x + c, y: y + h });
+    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x)} ${r(y + h - c)}`);
+    this.current = { x, y: y + h - c };
+    this.addLine({ x, y: y + c });
+    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + c)} ${r(y)}`);
+    this.current = { x: x + c, y };
+    return this.closeSubpath();
+  }
+  addEllipse(rect) {
+    const rx = rect.width / 2;
+    const ry = rect.height / 2;
+    const cx = rect.x + rx;
+    const cy = rect.y + ry;
+    this.move({ x: cx + rx, y: cy });
+    this.parts.push(`A${r(rx)} ${r(ry)} 0 0 1 ${r(cx - rx)} ${r(cy)}`);
+    this.parts.push(`A${r(rx)} ${r(ry)} 0 0 1 ${r(cx + rx)} ${r(cy)}`);
+    this.current = { x: cx + rx, y: cy };
+    return this.closeSubpath();
+  }
+  addPath(path) {
+    this.parts.push(path.svg());
+    return this;
+  }
+  closeSubpath() {
+    this.parts.push("Z");
+    this.current = this.start;
+    return this;
+  }
+  get isEmpty() {
+    return this.parts.length === 0;
+  }
+  /** The SVG path data. */
+  svg() {
+    return this.parts.join("");
+  }
+  toString() {
+    return this.svg();
   }
-  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 LazyVGrid(props) {
-  const { own, modifiers } = splitProps(props);
-  return applyModifiers(
-    sb("lazyvgrid", { columns: own.columns, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" }, void 0, own.children),
-    modifiers
-  );
-}
-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 };
@@ -2357,7 +2835,10 @@ function List(props) {
   useReportSplitSelection(split, selected, clearSelection);
   const refresh = useRefreshable(takeModifier(modifiers, "refreshable"));
   Object.assign(listProps, refresh.props);
-  const element = /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: sb("list", listProps, refresh.handlers, wrapRows(own.children)) });
+  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))) });
   return applyModifiers(
     selection ? /* @__PURE__ */ jsx(ListSelectionContext.Provider, { value: selection, children: element }) : element,
     modifiers
@@ -2543,11 +3024,11 @@ function Host(props) {
     if (typeof document === "undefined") return null;
     const element = document.createElement("div");
     element.className = "sb-host-content";
-    registerHostContent(key, element);
     return element;
   });
   const bridge = useContextBridge(own.contexts);
   const root = useRef(null);
+  const mounted = useRef(false);
   const sizing = own.sizing ?? "content";
   const style = sizing === "fill" ? { height: "100%", ...own.style } : own.style;
   const tree = bridge(
@@ -2555,6 +3036,8 @@ function Host(props) {
   );
   useLayoutEffect(() => {
     if (!content) return;
+    mounted.current = true;
+    registerHostContent(key, content);
     root.current ??= createRoot(content);
     const current = root.current;
     queueMicrotask(() => {
@@ -2565,168 +3048,19 @@ function Host(props) {
   });
   useEffect(
     () => () => {
-      const current = root.current;
-      root.current = null;
+      mounted.current = false;
       unregisterHostContent(key);
-      queueMicrotask(() => current?.unmount());
+      queueMicrotask(() => {
+        if (mounted.current) return;
+        const current = root.current;
+        root.current = null;
+        current?.unmount();
+      });
     },
     [key]
   );
   return applyModifiers(sb("host", { content: key, sizing }), modifiers);
 }
-const NO_INSETS = { top: 0, leading: 0, bottom: 0, trailing: 0 };
-function GeometryReader(props) {
-  const { own, modifiers } = splitProps(props);
-  const [reported, setReported] = useState({ size: { width: 0, height: 0 }, origin: null, safeArea: NO_INSETS });
-  const [needsFrame, setNeedsFrame] = useState(false);
-  const spaces = useCoordinateSpaces();
-  let readFrame = false;
-  const proxy = {
-    size: reported.size,
-    frame: (space = "local") => {
-      if (space === "local") return { x: 0, y: 0, ...reported.size };
-      readFrame = true;
-      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 };
-    },
-    get safeAreaInsets() {
-      readFrame = true;
-      return reported.safeArea;
-    }
-  };
-  const content = own.children(proxy);
-  useEffect(() => {
-    if (readFrame && !needsFrame) setNeedsFrame(true);
-  });
-  return applyModifiers(
-    sb(
-      "geometry",
-      needsFrame ? { reportsFrame: true } : {},
-      {
-        geometry: (event) => {
-          const next = {
-            size: { width: event.width, height: event.height },
-            origin: event.x !== void 0 && event.y !== void 0 ? { x: event.x, y: event.y } : reported.origin,
-            safeArea: event.safeArea ?? reported.safeArea
-          };
-          if (JSON.stringify(next) !== JSON.stringify(reported)) setReported(next);
-        }
-      },
-      content
-    ),
-    modifiers
-  );
-}
-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;
-    }
-  }
-  return {
-    size,
-    frames: placed,
-    guides,
-    sizes: {
-      min: measure({ width: 0, height: 0 }),
-      ideal: measure({ width: null, height: null }),
-      max: measure({ width: Infinity, height: Infinity })
-    }
-  };
-}
-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 round = (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: round(answer.size.width), height: round(answer.size.height) },
-      frames: answer.frames.map((frame2) => ({ x: round(frame2.x), y: round(frame2.y), width: round(frame2.width), height: round(frame2.height) })),
-      sizes: { min: encode(answer.sizes.min), ideal: encode(answer.sizes.ideal), max: encode(answer.sizes.max) }
-    };
-  }
-  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]
-  );
-}
 function Menu(props) {
   const { own, modifiers } = splitProps(props);
   const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.label;
@@ -3006,9 +3340,9 @@ function Chart(props) {
   }
   const xScale = scaleFor(xValues, { domain: own.xScale?.domain });
   const yScale = scaleFor(yValues, { includesZero: own.yScale?.includesZero ?? true, domain: own.yScale?.domain });
-  const round = (n) => Math.round(n * 1e6) / 1e6;
-  const ux = (v) => round(xScale.unit(v));
-  const uy = (v) => round(1 - yScale.unit(v));
+  const round2 = (n) => Math.round(n * 1e6) / 1e6;
+  const ux = (v) => round2(xScale.unit(v));
+  const uy = (v) => round2(1 - yScale.unit(v));
   let continuousBand = 1;
   if (xScale.kind !== "band") {
     const centers = [...new Set(marks.filter((m) => m.kind === "bar").map((m) => ux(m.props.x)))].sort((a, b) => a - b);
@@ -3054,15 +3388,15 @@ function Chart(props) {
       case "bar": {
         const style = common(mark);
         const [b0, b1] = xScale.kind === "band" ? xScale.band(p.x) : [ux(p.x) - continuousBand / 2, ux(p.x) + continuousBand / 2];
-        const center = round((b0 + b1) / 2);
-        const half = round((b1 - b0) * 0.8 / 2);
+        const center = round2((b0 + b1) / 2);
+        const half = round2((b1 - b0) * 0.8 / 2);
         const top = uy(Math.max(asNumber(p.y), p.yStart ?? 0));
         const bottom = uy(Math.min(asNumber(p.y), p.yStart ?? 0));
         const rect = {
           kind: "rect",
           ...style,
-          x0: p.width !== void 0 ? center : round(center - half),
-          x1: p.width !== void 0 ? center : round(center + half),
+          x0: p.width !== void 0 ? center : round2(center - half),
+          x1: p.width !== void 0 ? center : round2(center + half),
           y0: top,
           y1: bottom,
           cornerRadius: p.cornerRadius ?? 0,
@@ -3133,7 +3467,7 @@ function Chart(props) {
     }
   }
   const axis = (scale, position, flipY) => {
-    const flip = (u) => round(flipY ? 1 - u : u);
+    const flip = (u) => round2(flipY ? 1 - u : u);
     return {
       position,
       gridLines: scale.gridLines.map(flip),
@@ -3948,6 +4282,7 @@ export {
   Label,
   LabeledContent,
   Layout,
+  LazyHGrid,
   LazyHStack,
   LazyVGrid,
   LazyVStack,
@@ -3956,6 +4291,7 @@ export {
   Link,
   List,
   Menu,
+  NO_GEOMETRY,
   NavigationLink,
   NavigationSplitView,
   NavigationStack,
@@ -3994,6 +4330,7 @@ export {
   VStack,
   VideoPlayer,
   ViewThatFits,
+  VisualEffect,
   ZStack,
   answerLayout,
   color,
@@ -4001,22 +4338,26 @@ export {
   flattenChildren,
   font,
   frame,
+  geometryProxy,
   gradient,
   hex,
   insets,
   keyframeValues,
   mount,
   moveItems,
+  nextGeometry,
   niceStep,
   opacity,
   openURL,
   padding,
   placeholder,
   plainText,
+  providingScrollSettings,
   readBinding,
   rgb,
   shapeStyle,
   system,
+  takeScrollSettings,
   timeTicks,
   unitPoint,
   useAVPlayer,