@swiftbrowser/react 0.5.0 → 0.5.1

package/dist/index.js

@@ -1,9 +1,9 @@
-import { createContext, useContext, createElement, useRef, useLayoutEffect, useState, useEffect, Children, useId, Fragment as Fragment$1, 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";
@@ -613,106 +613,6 @@ function DropDestination({ action, isTargeted, accepts, children }) {
     children
   );
 }
-function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
-  const [presented, setPresented] = readBinding(isPresented);
-  if (!presented) return null;
-  const dismiss = () => {
-    setPresented(false);
-    onDismiss?.();
-  };
-  const detents = fullScreen ? ["full"] : ["large"];
-  return sb(
-    HOIST_KIND,
-    void 0,
-    void 0,
-    sb(
-      "sheet",
-      { detents },
-      { tap: dismiss },
-      /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(DismissContext.Provider, { value: dismiss, children: content }) })
-    ),
-    "root"
-  );
-}
-function presentationDetents(detents) {
-  const encoded = detents.map(
-    (detent) => typeof detent === "string" ? detent : "height" in detent ? `height:${detent.height}` : `fraction:${detent.fraction}`
-  );
-  return sb(PREF_KIND, { detents: encoded }, void 0, void 0, "sheet");
-}
-function AlertPresenter({ title, isPresented, message, actions, style }) {
-  const [presented, setPresented] = readBinding(isPresented);
-  if (!presented) return null;
-  const dismiss = () => setPresented(false);
-  return sb(
-    HOIST_KIND,
-    void 0,
-    void 0,
-    sb(
-      "alert",
-      { title, message: message ?? null, style: style ?? "alert" },
-      { tap: dismiss },
-      withEnvironment({ dismissAlert: dismiss }, actions)
-    ),
-    "root"
-  );
-}
-function Lifecycle({ onAppear, onDisappear }) {
-  useEffect(() => {
-    onAppear?.();
-    return () => onDisappear?.();
-  }, []);
-  return null;
-}
-function Inspector({ isPresented, content, columnWidth, children }) {
-  const sizeClass = useHorizontalSizeClass();
-  const [presented, setPresented] = readBinding(isPresented);
-  if (sizeClass === "compact") {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      children,
-      /* @__PURE__ */ jsx(SheetPresenter, { isPresented: [presented, setPresented], content })
-    ] });
-  }
-  const panelContent = columnWidth !== void 0 ? sb("styled", { style: { inspectorColumnWidth: columnWidth } }, void 0, content) : content;
-  return sb("inspector", { presented }, void 0, [
-    /* @__PURE__ */ jsx(InspectorPart, { children }, "content"),
-    /* @__PURE__ */ jsx(InspectorPart, { children: sb("inspectorpanel", {}, void 0, panelContent) }, "panel")
-  ]);
-}
-function InspectorPart({ children }) {
-  return children;
-}
-function Task({ id, action }) {
-  const latest = useRef(action);
-  latest.current = action;
-  useEffect(() => {
-    const controller = new AbortController();
-    Promise.resolve().then(() => latest.current(controller.signal)).catch((error) => {
-      if (!controller.signal.aborted) console.error(error);
-    });
-    return () => controller.abort();
-  }, [id]);
-  return null;
-}
-function OnChange({
-  value,
-  action,
-  initial
-}) {
-  const previous = useRef(null);
-  const latest = useRef(action);
-  latest.current = action;
-  useEffect(() => {
-    const last = previous.current;
-    previous.current = { value };
-    if (last === null) {
-      if (initial) latest.current(value, value);
-      return;
-    }
-    if (!Object.is(last.value, value)) latest.current(last.value, value);
-  }, [value, initial]);
-  return null;
-}
 const HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
 function rgb(r2, g, b, a = 1) {
   return { r: r2, g, b, a };
@@ -859,20 +759,6 @@ function insets(edges, amount) {
   }
   return result;
 }
-const ScrollRequestContext = createContext(null);
-let nextSerial = 1;
-function ScrollViewReader({ children }) {
-  const [request, setRequest] = useState(null);
-  const proxy = {
-    scrollTo: (id, anchor) => setRequest({ id, anchor: anchor === void 0 ? null : unitPoint(anchor), serial: nextSerial++ })
-  };
-  return /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: request, children: children(proxy) });
-}
-function ScrollTarget({ id, children }) {
-  const request = useContext(ScrollRequestContext);
-  if (request && request.id === id) return styled({ scrollID: true, scrollTo: { anchor: request.anchor, serial: request.serial } }, children);
-  return styled({ scrollID: true }, children);
-}
 const ScrollSettingsContext = createContext({});
 function edgesOf(edges) {
   const list = Array.isArray(edges) ? edges : [edges];
@@ -931,413 +817,1051 @@ function marginedContent(children, margins, axis) {
   const content = list.length === 1 ? list[0] : sb(axis === "horizontal" ? "hstack" : "vstack", { spacing: null, alignment: "center" }, void 0, children);
   return sb("styled", { style: { padding: margins } }, void 0, content);
 }
-function Hover({ action, children }) {
-  return sb("styled", { style: { hover: true } }, { hover: (event) => action(event.value) }, children);
+const 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 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;
+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 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 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 useNamespace() {
-  return useId();
+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) }
+    )
+  ];
 }
-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;
-  return name.length === 1 ? event.key.toLowerCase() === name.toLowerCase() : event.key === name;
+function LazySpacer({ axis, remaining, more }) {
+  return sb("lazyspacer", { axis, remaining }, { lazy: more });
 }
-function matchesShortcut(event, shortcut) {
-  if (!matchesKey(event, shortcut.key)) return false;
-  const wanted = new Set(shortcut.modifiers ?? ["command"]);
-  const command = isApple() ? event.metaKey : event.ctrlKey;
-  const control = isApple() ? event.ctrlKey : false;
-  return command === wanted.has("command") && event.shiftKey === wanted.has("shift") && event.altKey === wanted.has("option") && control === (isApple() && wanted.has("control"));
+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 useKeyboardShortcut(shortcut, action) {
-  const latest = useRef(action);
-  latest.current = action;
-  const key = shortcut ? `${shortcut.key}:${(shortcut.modifiers ?? ["command"]).join("+")}` : "";
-  useEffect(() => {
-    if (!shortcut || typeof document === "undefined") return;
-    const onKey = (event) => {
-      if (event.defaultPrevented || !matchesShortcut(event, shortcut)) return;
-      event.preventDefault();
-      latest.current();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [key]);
+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 KeyPressListener({ spec }) {
-  const latest = useRef(spec);
-  latest.current = spec;
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const onKey = (event) => {
-      const target = event.target;
-      if (event.defaultPrevented || target?.closest("input, textarea, [contenteditable]")) return;
-      const { keys, action } = latest.current;
-      if (keys && !keys.some((key) => matchesKey(event, key))) return;
-      const modifiers = [];
-      if (event.metaKey) modifiers.push("command");
-      if (event.shiftKey) modifiers.push("shift");
-      if (event.altKey) modifiers.push("option");
-      if (event.ctrlKey) modifiers.push("control");
-      const result = action({ key: event.key, characters: event.key.length === 1 ? event.key : "", modifiers, phase: event.repeat ? "repeat" : "down" });
-      if (result === "handled") event.preventDefault();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, []);
-  return null;
+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);
 }
-const PATTERNS = {
-  success: [12, 60, 18],
-  warning: [18, 80, 18],
-  error: [24, 50, 24, 50, 24],
-  selection: 8,
-  increase: 10,
-  decrease: 10,
-  start: 14,
-  stop: 14,
-  alignment: 6,
-  levelChange: 10,
-  impact: 16
-};
-function SensoryFeedbackPlayer({ feedback, trigger }) {
-  const first = useRef(true);
-  useEffect(() => {
-    if (first.current) {
-      first.current = false;
-      return;
-    }
-    if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") navigator.vibrate(PATTERNS[feedback]);
-  }, [trigger, feedback]);
-  return null;
+function ZStack(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("zstack", { alignment: own.alignment ?? "center" }, void 0, own.children), modifiers);
 }
-function toolbarPlacement(name) {
-  switch (name) {
-    case "topBarLeading":
-    case "navigationBarLeading":
-    case "cancellationAction":
-    case "navigation":
-      return "leading";
-    case "principal":
-      return "principal";
-    case "bottomBar":
-      return "bottom";
-    default:
-      return "trailing";
-  }
+function Spacer(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("spacer", { minLength: own.minLength ?? null }), modifiers);
 }
-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" };
+function Divider(props) {
+  const { modifiers } = splitProps(props);
+  return applyModifiers(sb("divider", {}), modifiers);
 }
-const MODIFIER_KEYS = /* @__PURE__ */ new Set([
-  "padding",
-  "font",
-  "fontWeight",
-  "bold",
-  "foregroundStyle",
-  "background",
-  "overlay",
-  "frame",
-  "cornerRadius",
-  "clipShape",
-  "clipped",
-  "opacity",
-  "disabled",
-  "hidden",
-  "layoutPriority",
-  "lineLimit",
-  "multilineTextAlignment",
-  "fixedSize",
-  "offset",
-  "rotationEffect",
-  "scaleEffect",
-  "shadow",
-  "tint",
-  "badge",
-  "listRowInsets",
-  "imageScale",
-  "transition",
-  "animation",
-  "gridColumnAlignment",
-  "gridCellColumns",
-  "buttonStyle",
-  "controlSize",
-  "pickerStyle",
-  "labelsHidden",
-  "navigationTitle",
-  "navigationBarTitleDisplayMode",
-  "toolbar",
-  "searchable",
-  "navigationDestination",
-  "sheet",
-  "fullScreenCover",
-  "alert",
-  "confirmationDialog",
-  "presentationDetents",
-  "onTapGesture",
-  "dragGesture",
-  "onLongPressGesture",
-  "contextMenu",
-  "swipeActions",
-  "onAppear",
-  "onDisappear",
-  "tag",
-  "modifiers",
-  "aspectRatio",
-  "scaledToFit",
-  "scaledToFill",
-  "blur",
-  "brightness",
-  "contrast",
-  "saturation",
-  "grayscale",
-  "hueRotation",
-  "colorInvert",
-  "colorMultiply",
-  "blendMode",
-  "mask",
-  "position",
-  "zIndex",
-  "allowsHitTesting",
-  "ignoresSafeArea",
-  "rotation3DEffect",
-  "gridCellAnchor",
-  "alignmentGuide",
-  "preferredColorScheme",
-  "refreshable",
-  "submitLabel",
-  "labelStyle",
-  "task",
-  "onChangeOf",
-  "scrollID",
-  "draggable",
-  "dropDestination",
-  "inspector",
-  "onHover",
-  "help",
-  "pointerStyle",
-  "symbolEffect",
-  "matchedGeometryEffect",
-  "layoutValue",
-  "safeAreaInset",
-  "popover",
-  "redacted",
-  "keyboardShortcut",
-  "onKeyPress",
-  "sensoryFeedback",
-  "textCase",
-  "coordinateSpace",
-  "contentTransition",
-  "scrollEdgeEffectStyle",
-  "scrollEdgeEffectHidden",
-  "contentMargins",
-  "containerRelativeFrame",
-  "visualEffect",
-  "scrollTransition"
-]);
-function splitProps(props) {
-  const own = {};
-  const modifiers = [];
-  for (const [key, value] of Object.entries(props)) {
-    if (MODIFIER_KEYS.has(key)) modifiers.push([key, value]);
-    else own[key] = value;
+function ScrollView(props) {
+  const { own, modifiers } = splitProps(props);
+  const refresh = useRefreshable(takeModifier(modifiers, "refreshable"));
+  const ownSettings = takeScrollSettings(modifiers);
+  const settings = useScrollSettings(ownSettings);
+  const axes = own.axes ?? "vertical";
+  const scroll = { axes, ...refresh.props };
+  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));
   }
-  return { own, modifiers };
+  for (const each of own) settings = mergeScrollSettings(settings, each);
+  return settings;
 }
-function takeModifier(modifiers, key) {
-  const at = modifiers.findIndex(([name]) => name === key);
-  if (at < 0) return void 0;
-  const [, value] = modifiers[at];
-  modifiers.splice(at, 1);
-  return value;
+function providingScrollSettings(settings, children) {
+  return Object.keys(settings).length > 0 ? withScrollSettings(settings, children) : children;
 }
-function styled(style, child) {
-  return sb("styled", { style }, void 0, child);
+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 decorated(role, alignment, content, decoration) {
-  return sb("decorated", { role, alignment }, void 0, [
-    createElement(Fragment$1, { key: "content" }, content),
-    createElement(Fragment$1, { key: "decoration" }, decoration)
-  ]);
-}
-function shapeSpecOf(element) {
-  const spec = element.type.shape;
-  if (!spec) return null;
-  const radius = element.props.cornerRadius;
-  return { kind: spec.kind, cornerRadius: spec.cornerRadius ?? radius ?? 0 };
-}
-function AnimatedStyle({ animation, value, children }) {
-  const last = useRef({ value, token: 0 });
-  if (!Object.is(last.current.value, value)) last.current = { value, token: last.current.token + 1 };
-  return styled({ animation, animationToken: last.current.token }, children);
+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 Searchable({ text, onChange, prompt }) {
-  const [value, setValue] = readBinding(text, onChange);
-  return sb("searchfield", { text: value, placeholder: prompt ?? "Search" }, { text: (event) => setValue(event.value) });
+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 applyModifiers(element, modifiers) {
-  const sides = [];
-  const node = wrap(element, modifiers, sides);
-  if (sides.length === 0) return node;
-  return createElement(Fragment$1, null, node, ...sides);
+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 wrap(element, modifiers, sides) {
-  let node = element;
-  for (const [key, value] of modifiers) {
-    if (value === void 0) continue;
-    if (value === null && key !== "lineLimit" && key !== "badge") continue;
-    node = apply(key, value, node, sides);
+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 node;
+  return index;
 }
-function apply(key, value, node, sides) {
-  switch (key) {
-    case "padding":
-      return styled({ padding: padding(value) }, node);
-    case "font":
-      return styled({ font: font(value) }, node);
-    case "fontWeight":
-      return styled({ font: { weight: value } }, node);
-    case "bold":
-      return value ? styled({ font: { weight: "bold" } }, node) : node;
-    case "foregroundStyle":
-      return styled({ foreground: shapeStyle(value) }, node);
-    case "background": {
-      if (isValidElement(value)) return decorated("background", "center", node, value);
-      const inShape = value;
-      if (typeof inShape === "object" && inShape !== null && "in" in inShape && isValidElement(inShape.in)) {
-        return decorated("background", "center", node, cloneElement(inShape.in, { fill: inShape.fill }));
+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;
       }
-      return styled({ background: shapeStyle(value) }, node);
+      visit(inner);
+      return;
     }
-    case "overlay": {
-      if (isValidElement(value)) return decorated("overlay", "center", node, value);
-      const spec = value;
-      return decorated("overlay", spec.alignment ?? "center", node, spec.content);
+    if (element.type === ForEach) {
+      visit(ForEach(element.props));
+      return;
     }
-    case "frame":
-      return styled({ frame: frame(value) }, node);
-    case "cornerRadius":
-      return styled({ cornerRadius: value }, node);
-    case "clipShape": {
-      const spec = isValidElement(value) ? shapeSpecOf(value) : null;
-      return styled({ cornerRadius: spec?.cornerRadius ?? 0 }, node);
+    if (element.type === LazyGroup && !options.keepLazy) {
+      visit(element.props.rows);
+      return;
     }
-    case "clipped":
-      return value ? styled({ clipped: true }, node) : node;
-    case "opacity":
-      return styled({ opacity: value }, node);
-    case "disabled":
-      return value ? styled({ disabled: true }, node) : node;
-    case "hidden":
-      return value ? styled({ hidden: true }, node) : node;
-    case "layoutPriority":
-      return styled({ layoutPriority: value }, node);
-    case "lineLimit": {
-      if (Array.isArray(value)) {
-        const [min, max] = value;
-        return styled({ lineLimit: max, lineLimitMin: min }, node);
-      }
-      return styled({ lineLimit: value }, node);
+    result.push(element);
+  };
+  visit(children);
+  return result;
+}
+function GridItem(spec = {}) {
+  const dimension = (n) => n === void 0 || n === Infinity ? "infinity" : n;
+  let size;
+  if (spec.size && "fixed" in spec.size) size = { kind: "fixed", value: spec.size.fixed };
+  else if (spec.size && "adaptive" in spec.size) {
+    size = { kind: "adaptive", minimum: spec.size.adaptive.minimum, maximum: dimension(spec.size.adaptive.maximum) };
+  } else {
+    const flexible = spec.size && "flexible" in spec.size ? spec.size.flexible : {};
+    size = { kind: "flexible", minimum: flexible.minimum ?? 10, maximum: dimension(flexible.maximum) };
+  }
+  return { size, spacing: spec.spacing ?? null, alignment: spec.alignment ?? null };
+}
+GridItem.flexible = (options = {}) => GridItem({ size: { flexible: options }, spacing: options.spacing, alignment: options.alignment });
+GridItem.fixed = (value, options = {}) => GridItem({ size: { fixed: value }, spacing: options.spacing, alignment: options.alignment });
+GridItem.adaptive = (options) => GridItem({ size: { adaptive: options }, spacing: options.spacing, alignment: options.alignment });
+function LazyVGrid(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(
+    sb("lazyvgrid", { columns: own.columns, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" }, void 0, own.children),
+    modifiers
+  );
+}
+function LazyHGrid(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(
+    sb("lazyhgrid", { rows: own.rows, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" }, void 0, own.children),
+    modifiers
+  );
+}
+function Grid(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(
+    sb(
+      "grid",
+      { horizontalSpacing: own.horizontalSpacing ?? null, verticalSpacing: own.verticalSpacing ?? null, alignment: own.alignment ?? "center" },
+      void 0,
+      own.children
+    ),
+    modifiers
+  );
+}
+function GridRow(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("gridrow", { alignment: own.alignment ?? null }, void 0, own.children), modifiers);
+}
+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;
     }
-    case "multilineTextAlignment":
-      return styled({ multilineTextAlignment: value }, node);
-    case "fixedSize":
-      return value ? styled({ fixedSize: value === true ? { horizontal: true, vertical: true } : value }, node) : node;
-    case "offset": {
-      const offset = value;
-      return styled({ offset: { x: offset.x ?? 0, y: offset.y ?? 0 } }, node);
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
     }
-    case "rotationEffect": {
-      if (typeof value === "number") return styled({ rotation: value }, node);
-      const spec = value;
-      const style = { rotation: spec.degrees };
-      if (spec.anchor !== void 0) style.rotationAnchor = unitPoint(spec.anchor);
-      return styled(style, node);
+    if (!isValidElement(node)) return;
+    const element = node;
+    if (element.type === Fragment) {
+      visit(element.props["children"]);
+      return;
     }
-    case "scaleEffect": {
-      if (typeof value === "number") return styled({ scale: { x: value, y: value } }, node);
-      const spec = value;
-      const style = { scale: { x: spec.x, y: spec.y } };
-      if (spec.anchor !== void 0) style.scaleAnchor = unitPoint(spec.anchor);
-      return styled(style, node);
+    if (element.type === Text) {
+      const props = element.props;
+      segmentsOf(props.children, runStyleOf(props, style, true), into);
+      return;
     }
-    case "shadow": {
-      const shadow = value;
-      return styled(
-        { shadow: { color: shadow.color ? color(shadow.color) : rgb(0, 0, 0, 0.33), radius: shadow.radius, x: shadow.x ?? 0, y: shadow.y ?? 0 } },
-        node
-      );
+    if (element.type === Image$1) {
+      const props = element.props;
+      into.push({ image: imageProps(props), style });
+      return;
     }
-    case "tint":
-      return styled({ tint: color(value) }, node);
-    case "badge":
-      return styled({ badge: value === null ? null : String(value) }, node);
-    case "listRowInsets":
-      return styled({ listRowInsets: value }, node);
-    case "imageScale":
-      return styled({ imageScale: value }, node);
-    case "transition":
-      return styled({ transition: value }, node);
-    case "animation": {
-      const spec = value;
+  };
+  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;
+  return name.length === 1 ? event.key.toLowerCase() === name.toLowerCase() : event.key === name;
+}
+function matchesShortcut(event, shortcut) {
+  if (!matchesKey(event, shortcut.key)) return false;
+  const wanted = new Set(shortcut.modifiers ?? ["command"]);
+  const command = isApple() ? event.metaKey : event.ctrlKey;
+  const control = isApple() ? event.ctrlKey : false;
+  return command === wanted.has("command") && event.shiftKey === wanted.has("shift") && event.altKey === wanted.has("option") && control === (isApple() && wanted.has("control"));
+}
+function useKeyboardShortcut(shortcut, action) {
+  const latest = useRef(action);
+  latest.current = action;
+  const key = shortcut ? `${shortcut.key}:${(shortcut.modifiers ?? ["command"]).join("+")}` : "";
+  useEffect(() => {
+    if (!shortcut || typeof document === "undefined") return;
+    const onKey = (event) => {
+      if (event.defaultPrevented || !matchesShortcut(event, shortcut)) return;
+      event.preventDefault();
+      latest.current();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [key]);
+}
+function KeyPressListener({ spec }) {
+  const latest = useRef(spec);
+  latest.current = spec;
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const onKey = (event) => {
+      const target = event.target;
+      if (event.defaultPrevented || target?.closest("input, textarea, [contenteditable]")) return;
+      const { keys, action } = latest.current;
+      if (keys && !keys.some((key) => matchesKey(event, key))) return;
+      const modifiers = [];
+      if (event.metaKey) modifiers.push("command");
+      if (event.shiftKey) modifiers.push("shift");
+      if (event.altKey) modifiers.push("option");
+      if (event.ctrlKey) modifiers.push("control");
+      const result = action({ key: event.key, characters: event.key.length === 1 ? event.key : "", modifiers, phase: event.repeat ? "repeat" : "down" });
+      if (result === "handled") event.preventDefault();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+  return null;
+}
+const PATTERNS = {
+  success: [12, 60, 18],
+  warning: [18, 80, 18],
+  error: [24, 50, 24, 50, 24],
+  selection: 8,
+  increase: 10,
+  decrease: 10,
+  start: 14,
+  stop: 14,
+  alignment: 6,
+  levelChange: 10,
+  impact: 16
+};
+function SensoryFeedbackPlayer({ feedback, trigger }) {
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") navigator.vibrate(PATTERNS[feedback]);
+  }, [trigger, feedback]);
+  return null;
+}
+function toolbarPlacement(name) {
+  switch (name) {
+    case "topBarLeading":
+    case "navigationBarLeading":
+    case "cancellationAction":
+    case "navigation":
+      return "leading";
+    case "principal":
+      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",
+  "fontWeight",
+  "bold",
+  "foregroundStyle",
+  "background",
+  "overlay",
+  "frame",
+  "cornerRadius",
+  "clipShape",
+  "clipped",
+  "opacity",
+  "disabled",
+  "hidden",
+  "layoutPriority",
+  "lineLimit",
+  "multilineTextAlignment",
+  "fixedSize",
+  "offset",
+  "rotationEffect",
+  "scaleEffect",
+  "shadow",
+  "tint",
+  "badge",
+  "listRowInsets",
+  "imageScale",
+  "transition",
+  "animation",
+  "gridColumnAlignment",
+  "gridCellColumns",
+  "buttonStyle",
+  "controlSize",
+  "pickerStyle",
+  "labelsHidden",
+  "navigationTitle",
+  "navigationBarTitleDisplayMode",
+  "toolbarRole",
+  "toolbar",
+  "searchable",
+  "navigationDestination",
+  "sheet",
+  "fullScreenCover",
+  "alert",
+  "confirmationDialog",
+  "presentationDetents",
+  "onTapGesture",
+  "dragGesture",
+  "onLongPressGesture",
+  "contextMenu",
+  "swipeActions",
+  "onAppear",
+  "onDisappear",
+  "tag",
+  "modifiers",
+  "aspectRatio",
+  "scaledToFit",
+  "scaledToFill",
+  "blur",
+  "brightness",
+  "contrast",
+  "saturation",
+  "grayscale",
+  "hueRotation",
+  "colorInvert",
+  "colorMultiply",
+  "blendMode",
+  "mask",
+  "position",
+  "zIndex",
+  "allowsHitTesting",
+  "ignoresSafeArea",
+  "rotation3DEffect",
+  "gridCellAnchor",
+  "alignmentGuide",
+  "preferredColorScheme",
+  "refreshable",
+  "submitLabel",
+  "labelStyle",
+  "task",
+  "onChangeOf",
+  "scrollID",
+  "draggable",
+  "dropDestination",
+  "inspector",
+  "onHover",
+  "help",
+  "pointerStyle",
+  "symbolEffect",
+  "matchedGeometryEffect",
+  "layoutValue",
+  "safeAreaInset",
+  "popover",
+  "redacted",
+  "keyboardShortcut",
+  "onKeyPress",
+  "sensoryFeedback",
+  "textCase",
+  "coordinateSpace",
+  "contentTransition",
+  "scrollEdgeEffectStyle",
+  "scrollEdgeEffectHidden",
+  "contentMargins",
+  "containerRelativeFrame",
+  "visualEffect",
+  "scrollTransition"
+]);
+function splitProps(props) {
+  const own = {};
+  const modifiers = [];
+  for (const [key, value] of Object.entries(props)) {
+    if (MODIFIER_KEYS.has(key)) modifiers.push([key, value]);
+    else own[key] = value;
+  }
+  return { own, modifiers };
+}
+function takeModifier(modifiers, key) {
+  const at = modifiers.findIndex(([name]) => name === key);
+  if (at < 0) return void 0;
+  const [, value] = modifiers[at];
+  modifiers.splice(at, 1);
+  return value;
+}
+function styled(style, child) {
+  return sb("styled", { style }, void 0, child);
+}
+function decorated(role, alignment, content, decoration) {
+  return sb("decorated", { role, alignment }, void 0, [
+    createElement(Fragment, { key: "content" }, content),
+    createElement(Fragment, { key: "decoration" }, decoration)
+  ]);
+}
+function shapeSpecOf(element) {
+  const spec = element.type.shape;
+  if (!spec) return null;
+  const radius = element.props.cornerRadius;
+  return { kind: spec.kind, cornerRadius: spec.cornerRadius ?? radius ?? 0 };
+}
+function AnimatedStyle({ animation, value, children }) {
+  const last = useRef({ value, token: 0 });
+  if (!Object.is(last.current.value, value)) last.current = { value, token: last.current.token + 1 };
+  return styled({ animation, animationToken: last.current.token }, children);
+}
+function Searchable({ text, onChange, prompt }) {
+  const [value, setValue] = readBinding(text, onChange);
+  return sb("searchfield", { text: value, placeholder: prompt ?? "Search" }, { text: (event) => setValue(event.value) });
+}
+function applyModifiers(element, modifiers) {
+  const sides = [];
+  const node = wrap(element, modifiers, sides);
+  if (sides.length === 0) return node;
+  return createElement(Fragment, null, node, ...sides);
+}
+function wrap(element, modifiers, sides) {
+  let node = element;
+  for (const [key, value] of modifiers) {
+    if (value === void 0) continue;
+    if (value === null && key !== "lineLimit" && key !== "badge") continue;
+    node = apply(key, value, node, sides);
+  }
+  return node;
+}
+function apply(key, value, node, sides) {
+  switch (key) {
+    case "padding":
+      return styled({ padding: padding(value) }, node);
+    case "font":
+      return styled({ font: font(value) }, node);
+    case "fontWeight":
+      return styled({ font: { weight: value } }, node);
+    case "bold":
+      return value ? styled({ font: { weight: "bold" } }, node) : node;
+    case "foregroundStyle":
+      return styled({ foreground: shapeStyle(value) }, node);
+    case "background": {
+      if (isValidElement(value)) return decorated("background", "center", node, value);
+      const inShape = value;
+      if (typeof inShape === "object" && inShape !== null && "in" in inShape && isValidElement(inShape.in)) {
+        return decorated("background", "center", node, cloneElement(inShape.in, { fill: inShape.fill }));
+      }
+      return styled({ background: shapeStyle(value) }, node);
+    }
+    case "overlay": {
+      if (isValidElement(value)) return decorated("overlay", "center", node, value);
+      const spec = value;
+      return decorated("overlay", spec.alignment ?? "center", node, spec.content);
+    }
+    case "frame":
+      return styled({ frame: frame(value) }, node);
+    case "cornerRadius":
+      return styled({ cornerRadius: value }, node);
+    case "clipShape": {
+      const spec = isValidElement(value) ? shapeSpecOf(value) : null;
+      return styled({ cornerRadius: spec?.cornerRadius ?? 0 }, node);
+    }
+    case "clipped":
+      return value ? styled({ clipped: true }, node) : node;
+    case "opacity":
+      return styled({ opacity: value }, node);
+    case "disabled":
+      return value ? styled({ disabled: true }, node) : node;
+    case "hidden":
+      return value ? styled({ hidden: true }, node) : node;
+    case "layoutPriority":
+      return styled({ layoutPriority: value }, node);
+    case "lineLimit": {
+      if (Array.isArray(value)) {
+        const [min, max] = value;
+        return styled({ lineLimit: max, lineLimitMin: min }, node);
+      }
+      return styled({ lineLimit: value }, node);
+    }
+    case "multilineTextAlignment":
+      return styled({ multilineTextAlignment: value }, node);
+    case "fixedSize":
+      return value ? styled({ fixedSize: value === true ? { horizontal: true, vertical: true } : value }, node) : node;
+    case "offset": {
+      const offset = value;
+      return styled({ offset: { x: offset.x ?? 0, y: offset.y ?? 0 } }, node);
+    }
+    case "rotationEffect": {
+      if (typeof value === "number") return styled({ rotation: value }, node);
+      const spec = value;
+      const style = { rotation: spec.degrees };
+      if (spec.anchor !== void 0) style.rotationAnchor = unitPoint(spec.anchor);
+      return styled(style, node);
+    }
+    case "scaleEffect": {
+      if (typeof value === "number") return styled({ scale: { x: value, y: value } }, node);
+      const spec = value;
+      const style = { scale: { x: spec.x, y: spec.y } };
+      if (spec.anchor !== void 0) style.scaleAnchor = unitPoint(spec.anchor);
+      return styled(style, node);
+    }
+    case "shadow": {
+      const shadow = value;
+      return styled(
+        { shadow: { color: shadow.color ? color(shadow.color) : rgb(0, 0, 0, 0.33), radius: shadow.radius, x: shadow.x ?? 0, y: shadow.y ?? 0 } },
+        node
+      );
+    }
+    case "tint":
+      return styled({ tint: color(value) }, node);
+    case "badge":
+      return styled({ badge: value === null ? null : String(value) }, node);
+    case "listRowInsets":
+      return styled({ listRowInsets: value }, node);
+    case "imageScale":
+      return styled({ imageScale: value }, node);
+    case "transition":
+      return styled({ transition: value }, node);
+    case "animation": {
+      const spec = value;
       return createElement(AnimatedStyle, { animation: spec.animation ?? { type: "default" }, value: spec.value }, node);
     }
     case "gridColumnAlignment":
@@ -1356,510 +1880,261 @@ function apply(key, value, node, sides) {
       sides.push(sb(PREF_KIND, { title: value }, void 0, void 0, "navscreen"));
       return node;
     case "navigationBarTitleDisplayMode":
-      sides.push(sb(PREF_KIND, { displayMode: value }, void 0, void 0, "navscreen"));
-      return node;
-    case "toolbar":
-      sides.push(sb(HOIST_KIND, void 0, void 0, value, "navscreen"));
-      return node;
-    case "searchable":
-      sides.push(sb(HOIST_KIND, void 0, void 0, createElement(Searchable, value), "navscreen"));
-      return node;
-    case "navigationDestination":
-      sides.push(createElement(RegisterDestination, { destination: value }));
-      return node;
-    case "sheet":
-      sides.push(createElement(SheetPresenter, value));
-      return node;
-    case "fullScreenCover":
-      sides.push(createElement(SheetPresenter, { ...value, fullScreen: true }));
-      return node;
-    case "alert":
-      sides.push(createElement(AlertPresenter, value));
-      return node;
-    case "confirmationDialog":
-      sides.push(createElement(AlertPresenter, { ...value, style: "dialog" }));
-      return node;
-    case "presentationDetents":
-      sides.push(presentationDetents(value));
-      return node;
-    case "onTapGesture":
-      return sb("tapgesture", {}, { tap: value }, node);
-    case "dragGesture": {
-      const drag = value;
-      return sb(
-        "gesture",
-        { drag: true, longPress: false, minimumDistance: drag.minimumDistance ?? 10, minimumDuration: 0.5 },
-        {
-          drag: (event) => {
-            const dragValue = {
-              translation: event.translation,
-              location: event.location,
-              startLocation: event.startLocation,
-              velocity: event.velocity
-            };
-            if (event.phase === "ended" || event.phase === "cancelled") drag.onEnded?.(dragValue);
-            else drag.onChanged?.(dragValue);
-          }
-        },
-        node
-      );
-    }
-    case "onLongPressGesture": {
-      const spec = typeof value === "function" ? { action: value } : value;
-      return sb(
-        "gesture",
-        { drag: false, longPress: true, minimumDistance: 10, minimumDuration: spec.minimumDuration ?? 0.5 },
-        { longpress: () => spec.action() },
-        node
-      );
-    }
-    case "contextMenu":
-      return sb("contextmenu", {}, void 0, [createElement(Fragment$1, { key: "content" }, node), createElement(Fragment$1, { key: "items" }, value)]);
-    case "swipeActions": {
-      const specs = Array.isArray(value) ? value : [value];
-      const trailing = [];
-      const leading = [];
-      let fullSwipeTrailing = true;
-      let fullSwipeLeading = true;
-      for (const spec of specs) {
-        const actions = Children.toArray(spec.children);
-        if (spec.edge === "leading") {
-          leading.push(...actions);
-          fullSwipeLeading = spec.allowsFullSwipe ?? true;
-        } else {
-          trailing.push(...actions);
-          fullSwipeTrailing = spec.allowsFullSwipe ?? true;
-        }
-      }
-      return sb(
-        "swipeactions",
-        { trailing: trailing.length, leading: leading.length, fullSwipeTrailing, fullSwipeLeading },
-        void 0,
-        [createElement(Fragment$1, { key: "content" }, node), ...trailing, ...leading]
-      );
-    }
-    case "onAppear":
-      sides.push(createElement(Lifecycle, { onAppear: value }));
-      return node;
-    case "onDisappear":
-      sides.push(createElement(Lifecycle, { onDisappear: value }));
-      return node;
-    case "tag":
-      return node;
-    case "aspectRatio": {
-      const spec = typeof value === "number" ? { ratio: value } : value;
-      return styled({ aspectRatio: { ratio: spec.ratio ?? null, contentMode: spec.contentMode ?? "fit" } }, node);
-    }
-    case "scaledToFit":
-      return value ? styled({ aspectRatio: { ratio: null, contentMode: "fit" } }, node) : node;
-    case "scaledToFill":
-      return value ? styled({ aspectRatio: { ratio: null, contentMode: "fill" } }, node) : node;
-    case "blur":
-      return styled({ blur: value }, node);
-    case "brightness":
-      return styled({ brightness: value }, node);
-    case "contrast":
-      return styled({ contrast: value }, node);
-    case "saturation":
-      return styled({ saturation: value }, node);
-    case "grayscale":
-      return styled({ grayscale: value }, node);
-    case "hueRotation":
-      return styled({ hueRotation: value }, node);
-    case "colorInvert":
-      return value ? styled({ colorInvert: true }, node) : node;
-    case "colorMultiply":
-      return styled({ colorMultiply: color(value) }, node);
-    case "blendMode":
-      return styled({ blendMode: value }, node);
-    case "mask":
-      return styled({ mask: shapeStyle(value) }, node);
-    case "position":
-      return styled({ position: value }, node);
-    case "zIndex":
-      return styled({ zIndex: value }, node);
-    case "allowsHitTesting":
-      return value === false ? styled({ hitTesting: false }, node) : node;
-    case "ignoresSafeArea":
-      return styled({ ignoresSafeArea: value === true ? "all" : value }, node);
-    case "rotation3DEffect": {
-      const spec = value;
-      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 styled({ rotation3D: rotation }, node);
-    }
-    case "gridCellAnchor":
-      return styled({ gridCellAnchor: unitPoint(value) }, node);
-    case "alignmentGuide": {
-      const spec = value;
-      const at = (width, height) => spec.value({ width, height });
-      const a = at(0, 0);
-      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(
-        {
-          alignmentGuide: {
-            axis: vertical ? "vertical" : "horizontal",
-            name,
-            value: [round2(a), round2((at(100, 0) - a) / 100), round2((at(0, 100) - a) / 100)]
-          }
-        },
-        node
-      );
-    }
-    case "preferredColorScheme":
-      sides.push(sb(PREF_KIND, { colorScheme: value }, void 0, void 0, "root"));
-      return node;
-    case "refreshable":
-      return withEnvironment({ refresh: value }, node);
-    case "submitLabel":
-      return withEnvironment({ submitLabel: value }, node);
-    case "labelStyle":
-      return withEnvironment({ labelStyle: value }, node);
-    case "task": {
-      const spec = typeof value === "function" ? { id: void 0, action: value } : value;
-      sides.push(createElement(Task, spec));
-      return node;
-    }
-    case "onChangeOf":
-      sides.push(createElement(OnChange, value));
-      return node;
-    case "scrollID":
-      return createElement(ScrollTarget, { id: value }, node);
-    case "draggable":
-      return createElement(Draggable, { payload: value }, node);
-    case "dropDestination":
-      return createElement(DropDestination, value, node);
-    case "inspector":
-      return createElement(Inspector, value, node);
-    case "onHover":
-      return createElement(Hover, { action: value }, node);
-    case "help":
-      return styled({ help: value }, node);
-    case "pointerStyle":
-      return styled({ pointerStyle: cursorFor(value) }, node);
-    case "symbolEffect":
-      return createElement(SymbolEffect, { spec: value }, node);
-    case "matchedGeometryEffect": {
-      const spec = value;
-      return styled({ matchedGeometry: `${spec.namespace ?? ""}:${spec.id}` }, node);
-    }
-    case "layoutValue":
+      sides.push(sb(PREF_KIND, { displayMode: value }, void 0, void 0, "navscreen"));
       return node;
-    case "safeAreaInset": {
-      const spec = value;
-      const vertical = spec.edge === "top" || spec.edge === "bottom";
-      const before = spec.edge === "top" || spec.edge === "leading";
-      const children = before ? [createElement(Fragment$1, { key: "inset" }, spec.content), createElement(Fragment$1, { key: "content" }, node)] : [createElement(Fragment$1, { key: "content" }, node), createElement(Fragment$1, { key: "inset" }, spec.content)];
-      return vertical ? sb("vstack", { spacing: spec.spacing ?? 0, alignment: spec.alignment ?? "center" }, void 0, children) : sb("hstack", { spacing: spec.spacing ?? 0, alignment: spec.alignment ?? "center" }, void 0, children);
-    }
-    case "popover":
+    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;
+    case "searchable":
+      sides.push(sb(HOIST_KIND, void 0, void 0, createElement(Searchable, value), "navscreen"));
+      return node;
+    case "navigationDestination":
+      sides.push(createElement(RegisterDestination, { destination: value }));
+      return node;
+    case "sheet":
       sides.push(createElement(SheetPresenter, value));
       return node;
-    case "redacted":
-      return withEnvironment({ redacted: Boolean(value) }, node);
-    case "keyboardShortcut":
+    case "fullScreenCover":
+      sides.push(createElement(SheetPresenter, { ...value, fullScreen: true }));
       return node;
-    case "onKeyPress":
-      sides.push(createElement(KeyPressListener, { spec: value }));
+    case "alert":
+      sides.push(createElement(AlertPresenter, value));
       return node;
-    case "sensoryFeedback": {
-      const spec = value;
-      sides.push(createElement(SensoryFeedbackPlayer, spec));
+    case "confirmationDialog":
+      sides.push(createElement(AlertPresenter, { ...value, style: "dialog" }));
       return node;
+    case "presentationDetents":
+      sides.push(presentationDetents(value));
+      return node;
+    case "onTapGesture":
+      return sb("tapgesture", {}, { tap: value }, node);
+    case "dragGesture": {
+      const drag = value;
+      return sb(
+        "gesture",
+        { drag: true, longPress: false, minimumDistance: drag.minimumDistance ?? 10, minimumDuration: 0.5 },
+        {
+          drag: (event) => {
+            const dragValue = {
+              translation: event.translation,
+              location: event.location,
+              startLocation: event.startLocation,
+              velocity: event.velocity
+            };
+            if (event.phase === "ended" || event.phase === "cancelled") drag.onEnded?.(dragValue);
+            else drag.onChanged?.(dragValue);
+          }
+        },
+        node
+      );
     }
-    case "textCase":
-      return withEnvironment({ textCase: value }, node);
-    case "coordinateSpace":
-      return createElement(CoordinateSpace, { name: value }, node);
-    case "scrollEdgeEffectStyle":
-      return withScrollSettings(edgeStyleSettings(value), node);
-    case "scrollEdgeEffectHidden":
-      return withScrollSettings(edgeHiddenSettings(value), node);
-    case "contentMargins":
-      return withScrollSettings(marginSettings(value), node);
-    case "containerRelativeFrame":
-      return styled({ containerRelativeFrame: containerRelativeFrame(value) }, node);
-    case "visualEffect":
-      return createElement(VisualEffectView, { effect: value }, node);
-    case "scrollTransition": {
-      const spec = typeof value === "function" ? { transition: value } : value;
-      return createElement(ScrollTransitionView, { spec }, node);
-    }
-    case "contentTransition": {
-      if (value === "identity") return node;
-      if (typeof value === "object") {
-        const countsDown = value.numericText.countsDown;
-        return styled({ contentTransition: { kind: "numericText", ...countsDown !== void 0 ? { countsDown } : {} } }, node);
-      }
-      return styled({ contentTransition: { kind: value } }, node);
+    case "onLongPressGesture": {
+      const spec = typeof value === "function" ? { action: value } : value;
+      return sb(
+        "gesture",
+        { drag: false, longPress: true, minimumDistance: 10, minimumDuration: spec.minimumDuration ?? 0.5 },
+        { longpress: () => spec.action() },
+        node
+      );
     }
-    case "modifiers": {
-      let result = node;
-      for (const extra of value) {
-        result = wrap(result, Object.entries(extra), sides);
+    case "contextMenu":
+      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 = [];
+      const leading = [];
+      let fullSwipeTrailing = true;
+      let fullSwipeLeading = true;
+      for (const spec of specs) {
+        const actions = Children.toArray(spec.children);
+        if (spec.edge === "leading") {
+          leading.push(...actions);
+          fullSwipeLeading = spec.allowsFullSwipe ?? true;
+        } else {
+          trailing.push(...actions);
+          fullSwipeTrailing = spec.allowsFullSwipe ?? true;
+        }
       }
-      return result;
-    }
-    default: {
-      const unknown = key;
-      throw new Error(`Unknown modifier ${String(unknown)}`);
+      return sb(
+        "swipeactions",
+        { trailing: trailing.length, leading: leading.length, fullSwipeTrailing, fullSwipeLeading },
+        void 0,
+        [createElement(Fragment, { key: "content" }, node), ...trailing, ...leading]
+      );
     }
-  }
-}
-const ListSelectionContext = createContext(null);
-function Row({ tag, onDelete, deletable, onMove, movable, index, containerIndex, children }) {
-  const selection = useContext(ListSelectionContext);
-  const selectable = selection !== null && tag !== void 0;
-  const canDelete = onDelete !== void 0 && deletable !== false;
-  const canMove = onMove !== void 0 && movable !== false;
-  if (!selectable && !canDelete && !canMove) return children;
-  const props = {};
-  if (selectable) {
-    props["selectable"] = true;
-    props["selected"] = selection.isSelected(tag);
-  }
-  if (canDelete) props["deletable"] = true;
-  if (canMove) props["movable"] = true;
-  return sb(
-    "listrow",
-    props,
-    {
-      tap: () => selectable && selection.select(tag),
-      delete: () => onDelete?.(),
-      move: (event) => {
-        const start = (containerIndex ?? index ?? 0) - (index ?? 0);
-        onMove?.(Math.max(0, event.to - start));
-      }
-    },
-    children
-  );
-}
-const LAZY_BATCH = 12;
-const LazyContext = createContext(null);
-function LazyGroup({ rows, start = 0, wrap: wrap2 }) {
-  const axis = useContext(LazyContext);
-  const request = useContext(ScrollRequestContext);
-  const [count, setCount] = useState(LAZY_BATCH);
-  const target = request ? rows.findIndex((row) => rowMatches(row, request.id)) : -1;
-  const needed = target >= 0 ? Math.ceil((target + 1) / LAZY_BATCH) * LAZY_BATCH : 0;
-  useEffect(() => {
-    if (needed > count) setCount(needed);
-  }, [needed, count]);
-  const visible = Math.max(count, needed);
-  const shown = axis === null ? rows : rows.slice(0, visible);
-  const built = shown.map((row, index) => wrap2 ? wrap2(row, start + index) : row);
-  if (axis === null || shown.length >= rows.length) return built;
-  return [
-    ...built,
-    createElement(
-      LazySpacer,
-      { key: `lazy-${visible}`, axis, remaining: rows.length - shown.length, more: () => setCount(visible + LAZY_BATCH) }
-    )
-  ];
-}
-function LazySpacer({ axis, remaining, more }) {
-  return sb("lazyspacer", { axis, remaining }, { lazy: more });
-}
-function rowMatches(row, id) {
-  if (row.key !== null && row.key === String(id)) return true;
-  let element = row;
-  for (let depth = 0; element && depth < 3; depth++) {
-    const props = element.props;
-    if (props.scrollID === id) return true;
-    element = isValidElement(props.children) ? props.children : null;
-  }
-  return false;
-}
-function VStack(props) {
-  const { own, modifiers } = splitProps(props);
-  const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
-  if (own.scrollTargetLayout) stack["scrollTarget"] = true;
-  return applyModifiers(sb("vstack", stack, void 0, own.children), modifiers);
-}
-function HStack(props) {
-  const { own, modifiers } = splitProps(props);
-  const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
-  if (own.scrollTargetLayout) stack["scrollTarget"] = true;
-  return applyModifiers(sb("hstack", stack, void 0, own.children), modifiers);
-}
-function ZStack(props) {
-  const { own, modifiers } = splitProps(props);
-  return applyModifiers(sb("zstack", { alignment: own.alignment ?? "center" }, void 0, own.children), modifiers);
-}
-function Spacer(props) {
-  const { own, modifiers } = splitProps(props);
-  return applyModifiers(sb("spacer", { minLength: own.minLength ?? null }), modifiers);
-}
-function Divider(props) {
-  const { modifiers } = splitProps(props);
-  return applyModifiers(sb("divider", {}), modifiers);
-}
-function ScrollView(props) {
-  const { own, modifiers } = splitProps(props);
-  const refresh = useRefreshable(takeModifier(modifiers, "refreshable"));
-  const ownSettings = takeScrollSettings(modifiers);
-  const settings = useScrollSettings(ownSettings);
-  const axes = own.axes ?? "vertical";
-  const scroll = { axes, ...refresh.props };
-  if (own.scrollTargetBehavior) scroll["snap"] = own.scrollTargetBehavior;
-  if (own.scrollDismissesKeyboard) scroll["dismissesKeyboard"] = true;
-  const edgeEffect = edgeEffectProp(settings);
-  if (edgeEffect) scroll["edgeEffect"] = edgeEffect;
-  const content = marginedContent(own.children, settings.margins, axes === "horizontal" ? "horizontal" : "vertical");
-  return applyModifiers(sb("scrollview", scroll, refresh.handlers, providingScrollSettings(ownSettings, content)), modifiers);
-}
-function takeScrollSettings(modifiers) {
-  let settings = {};
-  const own = [];
-  for (const key of ["scrollEdgeEffectStyle", "scrollEdgeEffectHidden", "contentMargins"]) {
-    const value = takeModifier(modifiers, key);
-    if (value === void 0) continue;
-    if (key === "scrollEdgeEffectStyle") own.push(edgeStyleSettings(value));
-    else if (key === "scrollEdgeEffectHidden") own.push(edgeHiddenSettings(value));
-    else own.push(marginSettings(value));
-  }
-  for (const each of own) settings = mergeScrollSettings(settings, each);
-  return settings;
-}
-function providingScrollSettings(settings, children) {
-  return Object.keys(settings).length > 0 ? withScrollSettings(settings, children) : children;
-}
-function useRefreshable(own) {
-  const environment = useViewEnvironment();
-  const refresh = own ?? environment.refresh;
-  const [refreshing, setRefreshing] = useState(false);
-  if (!refresh) return { props: {} };
-  return {
-    props: { refreshable: true, refreshing },
-    handlers: {
-      refresh: () => {
-        if (refreshing) return;
-        setRefreshing(true);
-        Promise.resolve().then(refresh).catch((error) => console.error(error)).finally(() => setRefreshing(false));
-      }
+    case "onAppear":
+      sides.push(createElement(Lifecycle, { onAppear: value }));
+      return node;
+    case "onDisappear":
+      sides.push(createElement(Lifecycle, { onDisappear: value }));
+      return node;
+    case "tag":
+      return node;
+    case "aspectRatio": {
+      const spec = typeof value === "number" ? { ratio: value } : value;
+      return styled({ aspectRatio: { ratio: spec.ratio ?? null, contentMode: spec.contentMode ?? "fit" } }, node);
     }
-  };
-}
-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);
+    case "scaledToFit":
+      return value ? styled({ aspectRatio: { ratio: null, contentMode: "fit" } }, node) : node;
+    case "scaledToFill":
+      return value ? styled({ aspectRatio: { ratio: null, contentMode: "fill" } }, node) : node;
+    case "blur":
+      return styled({ blur: value }, node);
+    case "brightness":
+      return styled({ brightness: value }, node);
+    case "contrast":
+      return styled({ contrast: value }, node);
+    case "saturation":
+      return styled({ saturation: value }, node);
+    case "grayscale":
+      return styled({ grayscale: value }, node);
+    case "hueRotation":
+      return styled({ hueRotation: value }, node);
+    case "colorInvert":
+      return value ? styled({ colorInvert: true }, node) : node;
+    case "colorMultiply":
+      return styled({ colorMultiply: color(value) }, node);
+    case "blendMode":
+      return styled({ blendMode: value }, node);
+    case "mask":
+      return styled({ mask: shapeStyle(value) }, node);
+    case "position":
+      return styled({ position: value }, node);
+    case "zIndex":
+      return styled({ zIndex: value }, node);
+    case "allowsHitTesting":
+      return value === false ? styled({ hitTesting: false }, node) : node;
+    case "ignoresSafeArea":
+      return styled({ ignoresSafeArea: value === true ? "all" : value }, node);
+    case "rotation3DEffect": {
+      const spec = value;
+      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 styled({ rotation3D: rotation }, node);
     }
-    if (onMove) {
-      row.onMove = (to) => onMove([index], to);
-      row.movable = !own.moveDisabled?.(element, index);
+    case "gridCellAnchor":
+      return styled({ gridCellAnchor: unitPoint(value) }, node);
+    case "alignmentGuide": {
+      const spec = value;
+      const at = (width, height) => spec.value({ width, height });
+      const a = at(0, 0);
+      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(
+        {
+          alignmentGuide: {
+            axis: vertical ? "vertical" : "horizontal",
+            name,
+            value: [round2(a), round2((at(100, 0) - a) / 100), round2((at(0, 100) - a) / 100)]
+          }
+        },
+        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 "preferredColorScheme":
+      sides.push(sb(PREF_KIND, { colorScheme: value }, void 0, void 0, "root"));
+      return node;
+    case "refreshable":
+      return withEnvironment({ refresh: value }, node);
+    case "submitLabel":
+      return withEnvironment({ submitLabel: value }, node);
+    case "labelStyle":
+      return withEnvironment({ labelStyle: value }, node);
+    case "task": {
+      const spec = typeof value === "function" ? { id: void 0, action: value } : value;
+      sides.push(createElement(Task, spec));
+      return 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;
-      }
-      visit(inner);
-      return;
+    case "onChangeOf":
+      sides.push(createElement(OnChange, value));
+      return node;
+    case "scrollID":
+      return createElement(ScrollTarget, { id: value }, node);
+    case "draggable":
+      return createElement(Draggable, { payload: value }, node);
+    case "dropDestination":
+      return createElement(DropDestination, value, node);
+    case "inspector":
+      return createElement(Inspector, value, node);
+    case "onHover":
+      return createElement(Hover, { action: value }, node);
+    case "help":
+      return styled({ help: value }, node);
+    case "pointerStyle":
+      return styled({ pointerStyle: cursorFor(value) }, node);
+    case "symbolEffect":
+      return createElement(SymbolEffect, { spec: value }, node);
+    case "matchedGeometryEffect": {
+      const spec = value;
+      return styled({ matchedGeometry: `${spec.namespace ?? ""}:${spec.id}` }, node);
     }
-    if (element.type === ForEach) {
-      visit(ForEach(element.props));
-      return;
+    case "layoutValue":
+      return node;
+    case "safeAreaInset": {
+      const spec = value;
+      const vertical = spec.edge === "top" || spec.edge === "bottom";
+      const before = spec.edge === "top" || spec.edge === "leading";
+      const children = before ? [createElement(Fragment, { 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);
     }
-    if (element.type === LazyGroup && !options.keepLazy) {
-      visit(element.props.rows);
-      return;
+    case "popover":
+      sides.push(createElement(SheetPresenter, value));
+      return node;
+    case "redacted":
+      return withEnvironment({ redacted: Boolean(value) }, node);
+    case "keyboardShortcut":
+      return node;
+    case "onKeyPress":
+      sides.push(createElement(KeyPressListener, { spec: value }));
+      return node;
+    case "sensoryFeedback": {
+      const spec = value;
+      sides.push(createElement(SensoryFeedbackPlayer, spec));
+      return node;
     }
-    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);
+    case "textCase":
+      return withEnvironment({ textCase: value }, node);
+    case "coordinateSpace":
+      return createElement(CoordinateSpace, { name: value }, node);
+    case "scrollEdgeEffectStyle":
+      return withScrollSettings(edgeStyleSettings(value), node);
+    case "scrollEdgeEffectHidden":
+      return withScrollSettings(edgeHiddenSettings(value), node);
+    case "contentMargins":
+      return withScrollSettings(marginSettings(value), node);
+    case "containerRelativeFrame":
+      return styled({ containerRelativeFrame: containerRelativeFrame(value) }, node);
+    case "visualEffect":
+      return createElement(VisualEffectView, { effect: value }, node);
+    case "scrollTransition": {
+      const spec = typeof value === "function" ? { transition: value } : value;
+      return createElement(ScrollTransitionView, { spec }, node);
+    }
+    case "contentTransition": {
+      if (value === "identity") return node;
+      if (typeof value === "object") {
+        const countsDown = value.numericText.countsDown;
+        return styled({ contentTransition: { kind: "numericText", ...countsDown !== void 0 ? { countsDown } : {} } }, node);
+      }
+      return styled({ contentTransition: { kind: value } }, node);
+    }
+    case "modifiers": {
+      let result = node;
+      for (const extra of value) {
+        result = wrap(result, Object.entries(extra), sides);
+      }
+      return result;
+    }
+    default: {
+      const unknown = key;
+      throw new Error(`Unknown modifier ${String(unknown)}`);
+    }
+  }
 }
 const 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 };
@@ -2350,140 +2625,6 @@ class Path {
     return this.svg();
   }
 }
-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);
-}
-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);
-}
 function Button(props) {
   const { own, modifiers } = splitProps(props);
   const environment = useViewEnvironment();
@@ -2554,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 "";
 }
@@ -2567,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),
@@ -2633,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(
@@ -2681,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) {
@@ -2832,7 +2852,7 @@ 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 ownSettings = takeScrollSettings(modifiers);
@@ -3066,8 +3086,8 @@ function Menu(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
   );
@@ -3354,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",
@@ -3492,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",
@@ -3567,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);
@@ -3901,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
   );
 }
@@ -4122,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
   );
 }
@@ -4295,6 +4315,7 @@ export {
   NavigationLink,
   NavigationSplitView,
   NavigationStack,
+  OutsideSplit,
   Path,
   PhaseAnimator,
   Picker,