@swiftbrowser/react 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,9 +1,9 @@
-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, Children, useEffect, isValidElement, Fragment, useId, cloneElement, useSyncExternalStore } from "react";
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
 import { Renderer } from "@swiftbrowser/web/src/renderer";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { applyTypeSizeVariables } from "@swiftbrowser/web/src/typography";
 import { registerHostContent, notifyHostContentChange, unregisterHostContent } from "@swiftbrowser/web/src/hostContent";
 import { createRoot } from "react-dom/client";
@@ -534,6 +534,85 @@ 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
+  );
+}
 const HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
 function rgb(r2, g, b, a = 1) {
   return { r: r2, g, b, a };
@@ -680,369 +759,746 @@ 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);
-  }
-  /** `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();
-  }
+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 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);
+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;
 }
-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 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 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;
+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];
   }
-  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;
+  if (inner.margins) result.margins = { ...outer.margins, ...inner.margins };
+  return result;
 }
-function DropDestination({ action, isTargeted, accepts, children }) {
+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);
+}
+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(
-    "dropdestination",
-    { accepts: accepts ?? [] },
+    "listrow",
+    props,
     {
-      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 });
+      tap: () => selectable && selection.select(tag),
+      delete: () => onDelete?.(),
+      move: (event) => {
+        const start = (containerIndex ?? index ?? 0) - (index ?? 0);
+        onMove?.(Math.max(0, event.to - start));
       }
     },
     children
   );
 }
-function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
-  const [presented, setPresented] = readBinding(isPresented);
-  if (!presented) return null;
-  const dismiss = () => {
-    setPresented(false);
-    onDismiss?.();
+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++ })
   };
-  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");
+  return /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: request, children: children(proxy) });
 }
-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 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);
 }
-function Lifecycle({ onAppear, onDisappear }) {
+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(() => {
-    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")
-  ]);
+    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 InspectorPart({ children }) {
-  return children;
+function LazySpacer({ axis, remaining, more }) {
+  return sb("lazyspacer", { axis, remaining }, { lazy: more });
 }
-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 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 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 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);
 }
-const CoordinateSpacesContext = createContext({});
-function useCoordinateSpaces() {
-  return useContext(CoordinateSpacesContext);
+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 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 ZStack(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("zstack", { alignment: own.alignment ?? "center" }, void 0, own.children), modifiers);
 }
-function Hover({ action, children }) {
-  return sb("styled", { style: { hover: true } }, { hover: (event) => action(event.value) }, children);
+function Spacer(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("spacer", { minLength: own.minLength ?? null }), modifiers);
 }
-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 Divider(props) {
+  const { modifiers } = splitProps(props);
+  return applyModifiers(sb("divider", {}), modifiers);
 }
-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 };
+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));
   }
-  if (!discrete && spec.isActive === false) return children;
-  const effect = { effect: spec.effect };
-  if (spec.direction) effect.direction = spec.direction;
-  if (spec.speed !== void 0) effect.speed = spec.speed;
-  if (spec.repeat !== void 0) effect.repeat = spec.repeat;
-  if (discrete) effect.trigger = serial.current.count;
-  return styled({ symbolEffect: effect }, children);
+  for (const each of own) settings = mergeScrollSettings(settings, each);
+  return settings;
 }
-function useNamespace() {
-  return useId();
+function providingScrollSettings(settings, children) {
+  return Object.keys(settings).length > 0 ? withScrollSettings(settings, children) : children;
 }
-const KEY_NAMES = {
-  return: "Enter",
-  escape: "Escape",
-  delete: "Backspace",
-  tab: "Tab",
-  space: " ",
-  upArrow: "ArrowUp",
-  downArrow: "ArrowDown",
-  leftArrow: "ArrowLeft",
-  rightArrow: "ArrowRight"
-};
+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, { 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) {
+      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 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);
+}
+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 runFont = props.font !== void 0 ? font(props.font) : void 0;
+    if (props.bold) runFont = { ...runFont ?? {}, weight: "bold" };
+    if (props.fontWeight) runFont = { ...runFont ?? {}, weight: props.fontWeight };
+    if (runFont) style.font = { ...style.font ?? {}, ...runFont };
+    if (props.foregroundStyle !== void 0) style.foreground = shapeStyle(props.foregroundStyle);
+  }
+  return style;
+}
+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(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 plain = segments.length <= 1 && (segments.length === 0 || "text" in segments[0] && isPlainStyle(segments[0].style));
+  if (plain) return applyModifiers(placeholder(sb("text", { text: content }), redacted), modifiers);
+  const 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) {
+  if (typeof window !== "undefined") window.open(url, "_blank", "noopener");
+}
+function imageProps(props) {
+  if (props.systemName !== void 0) return { systemName: props.systemName };
+  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 Image$1(props) {
+  const { modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
+  return applyModifiers(placeholder(sb("image", imageProps(props)), redacted), modifiers);
+}
+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") return applyModifiers(icon, modifiers);
+  if (style === "titleOnly") return applyModifiers(title, modifiers);
+  return applyModifiers(
+    /* @__PURE__ */ jsxs(HStack, { spacing: 8, children: [
+      styled({ labelIcon: true }, icon),
+      title
+    ] }),
+    modifiers
+  );
+}
+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 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 isPushedView = (value) => typeof value === "object" && value !== null && "view" in value && Object.keys(value).length === 1;
+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(
+    /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      own.destination && /* @__PURE__ */ jsx(RegisterDestination, { destination: own.destination }),
+      own.children
+    ] }),
+    modifiers
+  );
+}
+function OwnStack(props) {
+  const { own, modifiers } = splitProps(props);
+  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)),
+    registerDestination: (builder) => {
+      destination.current = builder;
+    }
+  };
+  const screens = [
+    /* @__PURE__ */ jsx(Fragment, { children: sb("navscreen", { title: "", displayMode: "automatic", depth: 0 }, { tap: context.pop }, own.children) }, "root")
+  ];
+  path.forEach((value, index) => {
+    const pop = () => setPath(path.slice(0, index));
+    screens.push(
+      /* @__PURE__ */ jsx(Fragment, { children: sb(
+        "navscreen",
+        { title: "", displayMode: "automatic", depth: index + 1 },
+        { tap: pop },
+        /* @__PURE__ */ jsx(DismissContext.Provider, { value: pop, children: /* @__PURE__ */ jsx(PathScreen, { value, destination }) })
+      ) }, index + 1)
+    );
+  });
+  return applyModifiers(
+    sb("navstack", {}, void 0, /* @__PURE__ */ jsx(NavigationContext.Provider, { value: context, children: screens })),
+    modifiers
+  );
+}
+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 label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
+  const tap = () => {
+    if (!navigation) return;
+    if (own.destination !== void 0) navigation.push({ view: own.destination });
+    else navigation.push(own.value);
+  };
+  return applyModifiers(sb("navlink", {}, { tap }, label), modifiers);
+}
+const SplitSelectionContext = createContext(null);
+function NavigationSplitView(props) {
+  const { own, modifiers } = splitProps(props);
+  const sizeClass = useHorizontalSizeClass();
+  const [selected, setSelected] = useState(false);
+  const reporters = useRef(/* @__PURE__ */ new Map());
+  const [report] = useState(() => {
+    const settle = () => setSelected([...reporters.current.values()].some((entry) => entry.selected));
+    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) entry.clear();
+  };
+  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(SplitSelectionContext.Provider, { value: report, children: /* @__PURE__ */ jsx(CompactSplit, { sidebar: own.sidebar, detail: own.detail, 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 });
+  return applyModifiers(
+    sb("navsplit", { sidebarVisible }, { tap: toggle }, [
+      /* @__PURE__ */ jsx(SplitColumn, { report, children: /* @__PURE__ */ jsx(NavigationStack, { children: own.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, selected, clear }) {
+  const [extra, setExtra] = useState([]);
+  const base = selected ? [{ view: /* @__PURE__ */ jsx(DetailScope, { children: 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(NavigationStack, { path: [path, setPath], children: sidebar }) });
+}
+function DetailScope({ children }) {
+  return /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, children });
+}
+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]);
+}
+function OutsideSplit({ children }) {
+  return /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, 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(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)
+    ),
+    "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$1, { children: [
+      children,
+      /* @__PURE__ */ jsx(SheetPresenter, { isPresented: [presented, setPresented], content })
+    ] });
+  }
+  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;
+}
+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 };
+  if (spec.direction) effect.direction = spec.direction;
+  if (spec.speed !== void 0) effect.speed = spec.speed;
+  if (spec.repeat !== void 0) effect.repeat = spec.repeat;
+  if (discrete) effect.trigger = serial.current.count;
+  return styled({ symbolEffect: effect }, children);
+}
+function useNamespace() {
+  return useId();
+}
+const KEY_NAMES = {
+  return: "Enter",
+  escape: "Escape",
+  delete: "Backspace",
+  tab: "Tab",
+  space: " ",
+  upArrow: "ArrowUp",
+  downArrow: "ArrowDown",
+  leftArrow: "ArrowLeft",
+  rightArrow: "ArrowRight"
+};
 const isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 function matchesKey(event, key) {
   const name = KEY_NAMES[key] ?? key;
@@ -1128,10 +1584,31 @@ function toolbarPlacement(name) {
       return "principal";
     case "bottomBar":
       return "bottom";
+    case "secondaryAction":
+      return "secondary";
     default:
       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",
@@ -1169,6 +1646,7 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "labelsHidden",
   "navigationTitle",
   "navigationBarTitleDisplayMode",
+  "toolbarRole",
   "toolbar",
   "searchable",
   "navigationDestination",
@@ -1230,7 +1708,13 @@ const MODIFIER_KEYS = /* @__PURE__ */ new Set([
   "sensoryFeedback",
   "textCase",
   "coordinateSpace",
-  "contentTransition"
+  "contentTransition",
+  "scrollEdgeEffectStyle",
+  "scrollEdgeEffectHidden",
+  "contentMargins",
+  "containerRelativeFrame",
+  "visualEffect",
+  "scrollTransition"
 ]);
 function splitProps(props) {
   const own = {};
@@ -1253,8 +1737,8 @@ function styled(style, child) {
 }
 function decorated(role, alignment, content, decoration) {
   return sb("decorated", { role, alignment }, void 0, [
-    createElement(Fragment$1, { key: "content" }, content),
-    createElement(Fragment$1, { key: "decoration" }, decoration)
+    createElement(Fragment, { key: "content" }, content),
+    createElement(Fragment, { key: "decoration" }, decoration)
   ]);
 }
 function shapeSpecOf(element) {
@@ -1276,7 +1760,7 @@ function applyModifiers(element, modifiers) {
   const sides = [];
   const node = wrap(element, modifiers, sides);
   if (sides.length === 0) return node;
-  return createElement(Fragment$1, null, node, ...sides);
+  return createElement(Fragment, null, node, ...sides);
 }
 function wrap(element, modifiers, sides) {
   let node = element;
@@ -1398,6 +1882,9 @@ function apply(key, value, node, sides) {
     case "navigationBarTitleDisplayMode":
       sides.push(sb(PREF_KIND, { displayMode: value }, void 0, void 0, "navscreen"));
       return node;
+    case "toolbarRole":
+      sides.push(sb(PREF_KIND, { toolbarRole: value }, void 0, void 0, "navscreen"));
+      return node;
     case "toolbar":
       sides.push(sb(HOIST_KIND, void 0, void 0, value, "navscreen"));
       return node;
@@ -1454,7 +1941,7 @@ function apply(key, value, node, sides) {
       );
     }
     case "contextMenu":
-      return sb("contextmenu", {}, void 0, [createElement(Fragment$1, { key: "content" }, node), createElement(Fragment$1, { key: "items" }, value)]);
+      return sb("contextmenu", {}, void 0, [createElement(Fragment, { key: "content" }, node), createElement(Fragment, { key: "items" }, value)]);
     case "swipeActions": {
       const specs = Array.isArray(value) ? value : [value];
       const trailing = [];
@@ -1475,7 +1962,7 @@ function apply(key, value, node, sides) {
         "swipeactions",
         { trailing: trailing.length, leading: leading.length, fullSwipeTrailing, fullSwipeLeading },
         void 0,
-        [createElement(Fragment$1, { key: "content" }, node), ...trailing, ...leading]
+        [createElement(Fragment, { key: "content" }, node), ...trailing, ...leading]
       );
     }
     case "onAppear":
@@ -1535,7 +2022,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 +2030,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
@@ -1592,7 +2079,7 @@ function apply(key, value, node, sides) {
       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)];
+      const children = before ? [createElement(Fragment, { key: "inset" }, spec.content), createElement(Fragment, { key: "content" }, node)] : [createElement(Fragment, { key: "content" }, node), createElement(Fragment, { 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":
@@ -1605,406 +2092,538 @@ function apply(key, value, node, sides) {
     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 "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 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 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 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 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);
+    case "sensoryFeedback": {
+      const spec = value;
+      sides.push(createElement(SensoryFeedbackPlayer, spec));
+      return node;
     }
-    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;
+    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);
     }
-    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;
+    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);
       }
-      visit(inner);
-      return;
+      return styled({ contentTransition: { kind: value } }, node);
     }
-    if (element.type === ForEach) {
-      visit(ForEach(element.props));
-      return;
+    case "modifiers": {
+      let result = node;
+      for (const extra of value) {
+        result = wrap(result, Object.entries(extra), sides);
+      }
+      return result;
     }
-    if (element.type === LazyGroup && !options.keepLazy) {
-      visit(element.props.rows);
-      return;
+    default: {
+      const unknown = key;
+      throw new Error(`Unknown modifier ${String(unknown)}`);
     }
-    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
-  );
+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 Grid(props) {
+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;
+    }
+  };
+}
+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(
-      "grid",
-      { horizontalSpacing: own.horizontalSpacing ?? null, verticalSpacing: own.verticalSpacing ?? null, alignment: own.alignment ?? "center" },
-      void 0,
-      own.children
+      "geometry",
+      needsFrame ? { reportsFrame: true } : {},
+      {
+        geometry: (event) => {
+          const next = nextGeometry(event, reported);
+          if (JSON.stringify(next) !== JSON.stringify(reported)) setReported(next);
+        }
+      },
+      content
     ),
     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 runFont = props.font !== void 0 ? font(props.font) : void 0;
-    if (props.bold) runFont = { ...runFont ?? {}, weight: "bold" };
-    if (props.fontWeight) runFont = { ...runFont ?? {}, weight: props.fontWeight };
-    if (runFont) style.font = { ...style.font ?? {}, ...runFont };
-    if (props.foregroundStyle !== void 0) style.foreground = shapeStyle(props.foregroundStyle);
-  }
-  return style;
-}
-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$1) {
-      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(props), style });
-      return;
-    }
-  };
-  visit(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 ?? {} };
+  });
 }
-function isPlainStyle(style) {
-  return Object.keys(style).length === 0;
+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 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();
+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 redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
-  const content = segments.map((segment) => "text" in segment ? segment.text : "").join("");
-  const plain = segments.length <= 1 && (segments.length === 0 || "text" in segments[0] && isPlainStyle(segments[0].style));
-  if (plain) return applyModifiers(placeholder(sb("text", { text: content }), redacted), modifiers);
-  const 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);
+  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 placeholder(node, redacted) {
-  if (!redacted) return node;
-  return styled({ background: { hierarchical: 3 }, backgroundCornerRadius: 4 }, styled({ foreground: { name: "clear" } }, node));
+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]
+  );
 }
-function openURL(url) {
-  if (typeof window !== "undefined") window.open(url, "_blank", "noopener");
+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 imageProps(props) {
-  if (props.systemName !== void 0) return { systemName: props.systemName };
-  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 };
+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;
 }
-function Image$1(props) {
-  const { modifiers } = splitProps(props);
-  const environment = useViewEnvironment();
-  const redacted = takeModifier(modifiers, "redacted") ?? environment.redacted;
-  return applyModifiers(placeholder(sb("image", imageProps(props)), redacted), modifiers);
+function interpolateEffects(from, to, t) {
+  const mix = (a, b) => a + (b - a) * t;
+  const result = {
+    offsetX: mix(from.offsetX, to.offsetX),
+    offsetY: mix(from.offsetY, to.offsetY),
+    scaleX: mix(from.scaleX, to.scaleX),
+    scaleY: mix(from.scaleY, to.scaleY),
+    rotation: mix(from.rotation, to.rotation),
+    opacity: mix(from.opacity, to.opacity),
+    blur: mix(from.blur, to.blur),
+    brightness: mix(from.brightness, to.brightness),
+    contrast: mix(from.contrast, to.contrast),
+    saturation: mix(from.saturation, to.saturation),
+    grayscale: mix(from.grayscale, to.grayscale),
+    hueRotation: mix(from.hueRotation, to.hueRotation)
+  };
+  const scaleAnchor = to.scaleAnchor ?? from.scaleAnchor;
+  if (scaleAnchor) result.scaleAnchor = scaleAnchor;
+  const rotationAnchor = to.rotationAnchor ?? from.rotationAnchor;
+  if (rotationAnchor) result.rotationAnchor = rotationAnchor;
+  const rotation3D = to.rotation3D ?? from.rotation3D;
+  if (rotation3D) result.rotation3D = { ...rotation3D, angle: mix(from.rotation3D?.angle ?? 0, to.rotation3D?.angle ?? 0) };
+  return result;
 }
-function 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") return applyModifiers(icon, modifiers);
-  if (style === "titleOnly") return applyModifiers(title, modifiers);
-  return applyModifiers(
-    /* @__PURE__ */ jsxs(HStack, { spacing: 8, children: [
-      styled({ labelIcon: true }, icon),
-      title
-    ] }),
-    modifiers
+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(
+    "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 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 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 });
+}
+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
+    }
   );
 }
-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 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);
+  }
+  /** `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 Button(props) {
   const { own, modifiers } = splitProps(props);
@@ -2076,7 +2695,7 @@ function collectText(node) {
   if (Array.isArray(node)) return node.map(collectText).join("");
   if (typeof node === "object" && "props" in node) {
     const element = node;
-    if (element.type === Fragment$1 || element.type === Text) return collectText(element.props.children);
+    if (element.type === Fragment || element.type === Text) return collectText(element.props.children);
   }
   return "";
 }
@@ -2089,11 +2708,11 @@ function Slider(props) {
   const children = [];
   if (own.label !== void 0 && !environment.labelsHidden) {
     labels.push("label");
-    children.push(/* @__PURE__ */ jsx(Fragment$1, { children: own.label }, "label"));
+    children.push(/* @__PURE__ */ jsx(Fragment, { children: own.label }, "label"));
   }
   if (own.minimumValueLabel !== void 0 || own.maximumValueLabel !== void 0) {
     labels.push("min", "max");
-    children.push(/* @__PURE__ */ jsx(Fragment$1, { children: own.minimumValueLabel }, "min"), /* @__PURE__ */ jsx(Fragment$1, { children: own.maximumValueLabel }, "max"));
+    children.push(/* @__PURE__ */ jsx(Fragment, { children: own.minimumValueLabel }, "min"), /* @__PURE__ */ jsx(Fragment, { children: own.maximumValueLabel }, "max"));
   }
   return applyModifiers(
     sb("slider", { value, min, max, step: own.step ?? null, labels }, { slide: (event) => setValue(event.value) }, children.length ? children : void 0),
@@ -2155,9 +2774,9 @@ function ProgressView(props) {
   }
   const label = own.label ?? own.children;
   const children = [];
-  if (label !== void 0 && label !== null) children.push(/* @__PURE__ */ jsx(Fragment$1, { children: label }, "label"));
+  if (label !== void 0 && label !== null) children.push(/* @__PURE__ */ jsx(Fragment, { children: label }, "label"));
   if (own.currentValueLabel !== void 0 && own.currentValueLabel !== null) {
-    children.push(/* @__PURE__ */ jsx(Fragment$1, { children: styled({ foreground: { hierarchical: 2 } }, own.currentValueLabel) }, "current"));
+    children.push(/* @__PURE__ */ jsx(Fragment, { children: styled({ foreground: { hierarchical: 2 } }, own.currentValueLabel) }, "current"));
   }
   return applyModifiers(
     sb(
@@ -2203,127 +2822,6 @@ function TextEditor(props) {
 function buttonDisabled(modifiers) {
   return modifiers.some(([key, value]) => key === "disabled" && value === true);
 }
-const isPushedView = (value) => typeof value === "object" && value !== null && "view" in value && Object.keys(value).length === 1;
-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(
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      own.destination && /* @__PURE__ */ jsx(RegisterDestination, { destination: own.destination }),
-      own.children
-    ] }),
-    modifiers
-  );
-}
-function OwnStack(props) {
-  const { own, modifiers } = splitProps(props);
-  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)),
-    registerDestination: (builder) => {
-      destination.current = builder;
-    }
-  };
-  const screens = [
-    /* @__PURE__ */ jsx(Fragment$1, { children: sb("navscreen", { title: "", displayMode: "automatic", depth: 0 }, { tap: context.pop }, own.children) }, "root")
-  ];
-  path.forEach((value, index) => {
-    const pop = () => setPath(path.slice(0, index));
-    screens.push(
-      /* @__PURE__ */ jsx(Fragment$1, { children: sb(
-        "navscreen",
-        { title: "", displayMode: "automatic", depth: index + 1 },
-        { tap: pop },
-        /* @__PURE__ */ jsx(DismissContext.Provider, { value: pop, children: /* @__PURE__ */ jsx(PathScreen, { value, destination }) })
-      ) }, index + 1)
-    );
-  });
-  return applyModifiers(
-    sb("navstack", {}, void 0, /* @__PURE__ */ jsx(NavigationContext.Provider, { value: context, children: screens })),
-    modifiers
-  );
-}
-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 label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
-  const tap = () => {
-    if (!navigation) return;
-    if (own.destination !== void 0) navigation.push({ view: own.destination });
-    else navigation.push(own.value);
-  };
-  return applyModifiers(sb("navlink", {}, { tap }, label), modifiers);
-}
-const SplitSelectionContext = createContext(null);
-function NavigationSplitView(props) {
-  const { own, modifiers } = splitProps(props);
-  const sizeClass = useHorizontalSizeClass();
-  const [selected, setSelected] = useState(false);
-  const clearRef = useRef(() => {
-  });
-  const report = {
-    report: (nowSelected, clear2) => {
-      clearRef.current = clear2;
-      if (nowSelected !== selected) setSelected(nowSelected);
-    }
-  };
-  const clear = () => clearRef.current();
-  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(SplitSelectionContext.Provider, { value: report, children: /* @__PURE__ */ jsx(CompactSplit, { sidebar: own.sidebar, detail: own.detail, 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 });
-  return applyModifiers(
-    sb("navsplit", { sidebarVisible }, { tap: toggle }, [
-      /* @__PURE__ */ jsx(SplitColumn, { report, children: /* @__PURE__ */ jsx(NavigationStack, { children: own.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, selected, clear }) {
-  const [extra, setExtra] = useState([]);
-  const base = selected ? [{ view: /* @__PURE__ */ jsx(DetailScope, { children: 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(NavigationStack, { path: [path, setPath], children: sidebar }) });
-}
-function DetailScope({ children }) {
-  return /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, children });
-}
-function useReportSplitSelection(split, selected, clear) {
-  useLayoutEffect(() => {
-    split?.report(selected, clear);
-  });
-}
 const NO_CLEAR = () => {
 };
 function List(props) {
@@ -2354,10 +2852,13 @@ function List(props) {
       }
     };
   }
-  useReportSplitSelection(split, selected, clearSelection);
+  useReportSplitSelection(split, selected, clearSelection, own.selection !== void 0);
   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 +3044,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 +3056,8 @@ function Host(props) {
   );
   useLayoutEffect(() => {
     if (!content) return;
+    mounted.current = true;
+    registerHostContent(key, content);
     root.current ??= createRoot(content);
     const current = root.current;
     queueMicrotask(() => {
@@ -2565,175 +3068,26 @@ 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;
   return applyModifiers(
     sb("menu", {}, void 0, [
-      /* @__PURE__ */ jsx(Fragment$1, { children: sb("zstack", { alignment: "center" }, void 0, label) }, "label"),
-      /* @__PURE__ */ jsx(Fragment$1, { children: own.children }, "items")
+      /* @__PURE__ */ jsx(Fragment, { children: sb("zstack", { alignment: "center" }, void 0, label) }, "label"),
+      /* @__PURE__ */ jsx(Fragment, { children: own.children }, "items")
     ]),
     modifiers
   );
@@ -3006,9 +3360,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);
@@ -3020,7 +3374,7 @@ function Chart(props) {
     const annotation = mark.props.annotation;
     if (!annotation) return;
     items.push(
-      /* @__PURE__ */ jsx(Fragment$1, { children: sb(
+      /* @__PURE__ */ jsx(Fragment, { children: sb(
         "chartitem",
         {
           role: "annotation",
@@ -3054,15 +3408,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 +3487,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),
@@ -3158,8 +3512,8 @@ function Gauge(props) {
   const value = (own.value - min) / (max - min || 1);
   const children = [];
   const asView = (node) => typeof node === "string" || typeof node === "number" ? /* @__PURE__ */ jsx(Text, { children: node }) : node;
-  if (own.label !== void 0) children.push(/* @__PURE__ */ jsx(Fragment$1, { children: asView(own.label) }, "label"));
-  if (own.currentValueLabel !== void 0) children.push(/* @__PURE__ */ jsx(Fragment$1, { children: asView(own.currentValueLabel) }, "current"));
+  if (own.label !== void 0) children.push(/* @__PURE__ */ jsx(Fragment, { children: asView(own.label) }, "label"));
+  if (own.currentValueLabel !== void 0) children.push(/* @__PURE__ */ jsx(Fragment, { children: asView(own.currentValueLabel) }, "current"));
   return applyModifiers(
     sb(
       "gauge",
@@ -3233,7 +3587,7 @@ function GroupBox(props) {
 }
 function ControlGroup(props) {
   const { own, modifiers } = splitProps(props);
-  return modifiers.length ? applyModifiers(/* @__PURE__ */ jsx(Fragment, { children: own.children }), modifiers) : own.children;
+  return modifiers.length ? applyModifiers(/* @__PURE__ */ jsx(Fragment$1, { children: own.children }), modifiers) : own.children;
 }
 function DisclosureGroup(props) {
   const { own, modifiers } = splitProps(props);
@@ -3567,10 +3921,10 @@ function Canvas(props) {
     if (draw.scale.x !== 1 || draw.scale.y !== 1) view = styled({ scale: draw.scale }, view);
     if (Math.abs(draw.rotation) > 1e-6) view = styled({ rotation: draw.rotation }, view);
     if (draw.opacity !== 1) view = styled({ opacity: draw.opacity }, view);
-    return /* @__PURE__ */ jsx(Fragment$1, { children: styled({ position: { x: draw.x, y: draw.y } }, view) }, index);
+    return /* @__PURE__ */ jsx(Fragment, { children: styled({ position: { x: draw.x, y: draw.y } }, view) }, index);
   });
   return applyModifiers(
-    sb("zstack", { alignment: "topLeading" }, void 0, [/* @__PURE__ */ jsx(Fragment$1, { children: reader }, "canvas"), ...symbols]),
+    sb("zstack", { alignment: "topLeading" }, void 0, [/* @__PURE__ */ jsx(Fragment, { children: reader }, "canvas"), ...symbols]),
     modifiers
   );
 }
@@ -3788,7 +4142,7 @@ function VideoPlayer(props) {
   );
   if (own.videoOverlay === void 0) return applyModifiers(video, modifiers);
   return applyModifiers(
-    sb("zstack", { alignment: "center" }, void 0, [/* @__PURE__ */ jsx(Fragment$1, { children: video }, "video"), /* @__PURE__ */ jsx(Fragment$1, { children: own.videoOverlay }, "overlay")]),
+    sb("zstack", { alignment: "center" }, void 0, [/* @__PURE__ */ jsx(Fragment, { children: video }, "video"), /* @__PURE__ */ jsx(Fragment, { children: own.videoOverlay }, "overlay")]),
     modifiers
   );
 }
@@ -3948,6 +4302,7 @@ export {
   Label,
   LabeledContent,
   Layout,
+  LazyHGrid,
   LazyHStack,
   LazyVGrid,
   LazyVStack,
@@ -3956,9 +4311,11 @@ export {
   Link,
   List,
   Menu,
+  NO_GEOMETRY,
   NavigationLink,
   NavigationSplitView,
   NavigationStack,
+  OutsideSplit,
   Path,
   PhaseAnimator,
   Picker,
@@ -3994,6 +4351,7 @@ export {
   VStack,
   VideoPlayer,
   ViewThatFits,
+  VisualEffect,
   ZStack,
   answerLayout,
   color,
@@ -4001,22 +4359,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,