@swiftbrowser/react 0.0.0-stage → 0.4.0

package/dist/index.js

@@ -0,0 +1,4038 @@
+import { createContext, useContext, createElement, useRef, useLayoutEffect, useEffect, useState, useId, Fragment as Fragment$1, Children, isValidElement, 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 { applyTypeSizeVariables } from "@swiftbrowser/web/src/typography";
+import { registerHostContent, notifyHostContentChange, unregisterHostContent } from "@swiftbrowser/web/src/hostContent";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { chooseColor } from "@swiftbrowser/web/src/colorPicker";
+import { performHostRequest, browserEnvironment } from "@swiftbrowser/web/src/hostRequests";
+import { timingFor } from "@swiftbrowser/web/src/animation";
+const ViewEnvironmentContext = createContext({});
+function useViewEnvironment() {
+  return useContext(ViewEnvironmentContext);
+}
+function withEnvironment(values, children) {
+  return createElement(EnvironmentExtender, { values }, children);
+}
+function EnvironmentExtender({ values, children }) {
+  const parent = useContext(ViewEnvironmentContext);
+  return createElement(ViewEnvironmentContext.Provider, { value: { ...parent, ...values } }, children);
+}
+const EnvironmentContext = createContext({
+  colorScheme: "light",
+  dynamicTypeSize: "large",
+  horizontalSizeClass: "compact"
+});
+function EnvironmentProvider({ value, children }) {
+  return createElement(EnvironmentContext.Provider, { value }, children);
+}
+function useColorScheme() {
+  return useContext(EnvironmentContext).colorScheme;
+}
+function useDynamicTypeSize() {
+  return useContext(EnvironmentContext).dynamicTypeSize;
+}
+const DismissContext = createContext(null);
+function useDismiss() {
+  const dismiss = useContext(DismissContext);
+  return dismiss ?? (() => {
+  });
+}
+function useHorizontalSizeClass() {
+  return useContext(EnvironmentContext).horizontalSizeClass;
+}
+function useRedacted() {
+  return useContext(ViewEnvironmentContext).redacted === true;
+}
+let currentUpdatePriority = 0;
+function detach(parent, child) {
+  const at = parent.children.indexOf(child);
+  if (at >= 0) parent.children.splice(at, 1);
+}
+const hostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: true,
+  noTimeout: -1,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  supportsMicrotasks: true,
+  scheduleMicrotask: queueMicrotask,
+  getRootHostContext: () => ({}),
+  getChildHostContext: (parent) => parent,
+  getPublicInstance: (instance) => instance,
+  prepareForCommit: () => null,
+  resetAfterCommit: (tree) => tree.commit(),
+  preparePortalMount: () => {
+  },
+  shouldSetTextContent: () => false,
+  createInstance: (type, props, tree) => {
+    if (type !== "sb") throw new Error(`Unknown host element <${type}>: only SwiftUI components render here.`);
+    return tree.createInstance(props);
+  },
+  createTextInstance: (text) => {
+    throw new Error(`Text strings must be rendered within a <Text> component (got ${JSON.stringify(text)}).`);
+  },
+  appendInitialChild: (parent, child) => parent.children.push(child),
+  finalizeInitialChildren: () => false,
+  commitMount: () => {
+  },
+  commitUpdate: (instance, _type, _prev, next, handle) => {
+    const tree = treeOf(handle);
+    if (tree) tree.updateInstance(instance, next);
+    else {
+      instance.props = next.props ?? {};
+      instance.on = next.on;
+      instance.target = next.target;
+    }
+  },
+  appendChild: (parent, child) => {
+    detach(parent, child);
+    parent.children.push(child);
+  },
+  appendChildToContainer: (tree, child) => {
+    detach(tree.root, child);
+    tree.root.children.push(child);
+  },
+  insertBefore: (parent, child, before) => {
+    detach(parent, child);
+    const at = parent.children.indexOf(before);
+    parent.children.splice(at < 0 ? parent.children.length : at, 0, child);
+  },
+  insertInContainerBefore: (tree, child, before) => {
+    detach(tree.root, child);
+    const at = tree.root.children.indexOf(before);
+    tree.root.children.splice(at < 0 ? tree.root.children.length : at, 0, child);
+  },
+  removeChild: (parent, child) => detach(parent, child),
+  removeChildFromContainer: (tree, child) => detach(tree.root, child),
+  clearContainer: (tree) => {
+    tree.root.children = [];
+  },
+  resetTextContent: () => {
+  },
+  commitTextUpdate: () => {
+  },
+  hideInstance: (instance) => {
+    instance.hidden = true;
+  },
+  unhideInstance: (instance) => {
+    instance.hidden = false;
+  },
+  hideTextInstance: () => {
+  },
+  unhideTextInstance: () => {
+  },
+  detachDeletedInstance: () => {
+  },
+  getInstanceFromNode: () => null,
+  beforeActiveInstanceBlur: () => {
+  },
+  afterActiveInstanceBlur: () => {
+  },
+  prepareScopeUpdate: () => {
+  },
+  getInstanceFromScope: () => null,
+  setCurrentUpdatePriority: (priority) => {
+    currentUpdatePriority = priority;
+  },
+  getCurrentUpdatePriority: () => currentUpdatePriority,
+  resolveUpdatePriority: () => currentUpdatePriority !== 0 ? currentUpdatePriority : DefaultEventPriority,
+  resetFormInstance: () => {
+  },
+  requestPostPaintCallback: () => {
+  },
+  shouldAttemptEagerTransition: () => false,
+  trackSchedulerEvent: () => {
+  },
+  resolveEventType: () => null,
+  resolveEventTimeStamp: () => -1.1,
+  maySuspendCommit: () => false,
+  maySuspendCommitOnUpdate: () => false,
+  maySuspendCommitInSyncRender: () => false,
+  suspendOnActiveViewTransition: () => {
+  },
+  getSuspendedCommitReason: () => null,
+  bindToConsole: (methodName, args) => () => console[methodName]?.(...args),
+  preloadInstance: () => true,
+  startSuspendingCommit: () => null,
+  suspendInstance: () => {
+  },
+  waitForCommitToBeReady: () => null,
+  NotPendingTransition: null,
+  HostTransitionContext: createContext(null),
+  rendererVersion: "0.3.1",
+  rendererPackageName: "@swiftbrowser/react",
+  extraDevToolsConfig: null
+};
+function treeOf(handle) {
+  let fiber = handle;
+  while (fiber) {
+    if (fiber.tag === 3) return fiber.stateNode.containerInfo;
+    fiber = fiber.return;
+  }
+  return null;
+}
+const reconciler = Reconciler(hostConfig);
+const PREF_KIND = "$pref";
+const HOIST_KIND = "$hoist";
+class HostTree {
+  constructor(sink) {
+    this.sink = sink;
+  }
+  sink;
+  root = { id: 0, kind: "root", children: [], committedChildren: [] };
+  nextId = 1;
+  /** Emitted elements by id, for event dispatch. */
+  live = /* @__PURE__ */ new Map();
+  committedLive = /* @__PURE__ */ new Set();
+  /** Ids whose element changed kind: removed at the end of the next flush. */
+  retired = [];
+  /** `withAnimation`: stamped on the next `commit`. */
+  pendingAnimation;
+  /** The root's `colorScheme` last sent (`.preferredColorScheme`); undefined while none was. */
+  committedColorScheme;
+  createInstance(props) {
+    return {
+      id: this.nextId++,
+      kind: props.kind,
+      props: props.props ?? {},
+      on: props.on,
+      target: props.target,
+      children: [],
+      hidden: false,
+      created: false,
+      committedProps: null,
+      committedParent: null,
+      committedChildren: []
+    };
+  }
+  updateInstance(instance, next) {
+    if (next.kind !== instance.kind) {
+      if (instance.created) {
+        this.retired.push(instance.id);
+        this.live.delete(instance.id);
+      }
+      instance.id = this.nextId++;
+      instance.kind = next.kind;
+      instance.created = false;
+      instance.committedProps = null;
+      instance.committedParent = null;
+      instance.committedChildren = [];
+    }
+    instance.props = next.props ?? {};
+    instance.on = next.on;
+    instance.target = next.target;
+  }
+  /** Emit the ops for everything that changed since the last commit. */
+  commit() {
+    const ops = this.flush();
+    if (ops.length > 0) this.sink(ops);
+  }
+  flush() {
+    const animation = this.pendingAnimation;
+    this.pendingAnimation = void 0;
+    const effective = /* @__PURE__ */ new Map();
+    const rootEffective = { props: {}, children: [], hoisted: [] };
+    effective.set(this.root, rootEffective);
+    const visit = (child, sink, ctx) => {
+      if (child.hidden) return;
+      if (child.kind === PREF_KIND) {
+        const target = child.target === "root" || child.target === void 0 ? this.root : ctx[child.target];
+        const entry2 = target ? effective.get(target) : void 0;
+        if (entry2) Object.assign(entry2.props, child.props);
+        return;
+      }
+      if (child.kind === HOIST_KIND) {
+        const target = (child.target && child.target !== "root" ? ctx[child.target] : void 0) ?? this.root;
+        const entry2 = effective.get(target);
+        for (const grandchild of child.children) visit(grandchild, entry2.hoisted, ctx);
+        return;
+      }
+      const entry = { props: { ...child.props }, children: [], hoisted: [] };
+      effective.set(child, entry);
+      sink.push(child);
+      const next2 = child.kind === "navscreen" ? { ...ctx, navscreen: child } : child.kind === "sheet" ? { ...ctx, sheet: child } : ctx;
+      for (const grandchild of child.children) visit(grandchild, entry.children, next2);
+    };
+    for (const child of this.root.children) visit(child, rootEffective.children, {});
+    for (const entry of effective.values()) {
+      if (entry.hoisted.length > 0) entry.children.push(...entry.hoisted);
+    }
+    const live = /* @__PURE__ */ new Set();
+    const parentOf = /* @__PURE__ */ new Map();
+    for (const [node, entry] of effective) {
+      for (const child of entry.children) {
+        live.add(child);
+        parentOf.set(child, node);
+      }
+    }
+    const ops = [];
+    const dead = /* @__PURE__ */ new Set();
+    for (const instance of this.committedLive) if (!live.has(instance)) dead.add(instance);
+    for (const instance of dead) {
+      const parent = instance.committedParent;
+      if (parent && parent !== this.root && dead.has(parent)) continue;
+      ops.push({ op: "remove", id: instance.id });
+    }
+    for (const instance of dead) {
+      this.live.delete(instance.id);
+      instance.created = false;
+      instance.committedProps = null;
+      instance.committedParent = null;
+      instance.committedChildren = [];
+    }
+    const emit = (parent, entry) => {
+      const current = parent.committedChildren.filter((child) => live.has(child) && parentOf.get(child) === parent);
+      entry.children.forEach((child, index) => {
+        const childEntry = effective.get(child);
+        if (!child.created) {
+          ops.push({ op: "create", id: child.id, kind: child.kind, props: childEntry.props });
+          child.created = true;
+          this.live.set(child.id, child);
+        } else if (!deepEqual(childEntry.props, child.committedProps)) {
+          ops.push({ op: "update", id: child.id, props: childEntry.props });
+        }
+        child.committedProps = childEntry.props;
+        if (current[index] !== child || child.committedParent !== parent) {
+          ops.push({ op: "insert", parent: parent.id, id: child.id, index });
+          const at = current.indexOf(child);
+          if (at >= 0) current.splice(at, 1);
+          current.splice(index, 0, child);
+        }
+        child.committedParent = parent;
+        emit(child, childEntry);
+      });
+      parent.committedChildren = entry.children;
+    };
+    emit(this.root, rootEffective);
+    for (const id of this.retired) ops.push({ op: "remove", id });
+    this.retired = [];
+    this.committedLive = live;
+    const scheme = rootEffective.props["colorScheme"];
+    const next = scheme === void 0 ? this.committedColorScheme === void 0 ? void 0 : null : scheme;
+    if (next !== void 0 && next !== this.committedColorScheme) {
+      ops.push({ op: "update", id: 0, props: { colorScheme: next } });
+      this.committedColorScheme = next === null ? void 0 : next;
+    }
+    if (ops.length === 0) return ops;
+    ops.push(animation ? { op: "commit", animation } : { op: "commit" });
+    return ops;
+  }
+  /** Hand a renderer event to the element's handler for its type. */
+  dispatch(event) {
+    if (event.type === "batch") {
+      for (const each of event.events) this.dispatch(each);
+      return;
+    }
+    if (!("id" in event)) return;
+    const instance = this.live.get(event.id);
+    const handler = instance?.on?.[event.type];
+    handler?.(event);
+  }
+}
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  if (Array.isArray(a)) {
+    const other = b;
+    return a.length === other.length && a.every((value, index) => deepEqual(value, other[index]));
+  }
+  const left = a;
+  const right = b;
+  const keys = Object.keys(left);
+  if (keys.length !== Object.keys(right).length) return false;
+  return keys.every((key) => key in right && deepEqual(left[key], right[key]));
+}
+const DEFAULT_ENVIRONMENT = { colorScheme: "light", dynamicTypeSize: "large", horizontalSizeClass: "compact" };
+const roots = /* @__PURE__ */ new Set();
+function createSwiftUIRoot(sink) {
+  const tree = new HostTree(sink);
+  roots.add(tree);
+  const container = reconciler.createContainer(
+    tree,
+    ConcurrentRoot,
+    null,
+    false,
+    null,
+    "",
+    (error) => {
+      throw error;
+    },
+    (error) => console.error(error),
+    (error) => console.warn(error),
+    () => {
+    },
+    null
+  );
+  let environment = DEFAULT_ENVIRONMENT;
+  let current = null;
+  const update = () => {
+    reconciler.updateContainerSync(createElement(EnvironmentProvider, { value: environment }, current), container, null, null);
+    reconciler.flushSyncWork();
+  };
+  return {
+    render(element) {
+      current = element;
+      update();
+    },
+    unmount() {
+      reconciler.updateContainerSync(null, container, null, null);
+      reconciler.flushSyncWork();
+      roots.delete(tree);
+    },
+    dispatch(event) {
+      reconciler.flushSyncFromReconciler(() => tree.dispatch(event));
+    },
+    setEnvironment(next) {
+      environment = { ...environment, ...next };
+      update();
+    }
+  };
+}
+function withAnimation(first, second) {
+  const animation = typeof first === "function" ? { type: "default" } : first ?? { type: "default" };
+  const body = typeof first === "function" ? first : second;
+  for (const tree of roots) tree.pendingAnimation = animation;
+  try {
+    return reconciler.flushSyncFromReconciler(body);
+  } finally {
+    for (const tree of roots) tree.pendingAnimation = void 0;
+  }
+}
+function mount(screen, element, options = {}) {
+  let renderer = null;
+  const root = createSwiftUIRoot((ops) => renderer?.applyOps(ops));
+  renderer = new Renderer(screen, (event) => root.dispatch(event));
+  let pageScheme = options.colorScheme ?? "light";
+  let preferred = null;
+  const environment = {
+    colorScheme: pageScheme,
+    dynamicTypeSize: options.dynamicTypeSize ?? "large",
+    horizontalSizeClass: horizontalSizeClassFor(screen.clientWidth || 393)
+  };
+  renderer.contentHeight = options.contentHeight ?? false;
+  if (options.assets) renderer.setAssetCatalog(options.assets);
+  renderer.setEnvironment({ colorScheme: environment.colorScheme, dynamicTypeSize: environment.dynamicTypeSize });
+  if (options.safeArea !== void 0) renderer.setSafeArea(options.safeArea);
+  root.setEnvironment(environment);
+  const applyScheme = () => {
+    const scheme = preferred ?? pageScheme;
+    const device = screen.closest(".device");
+    if (device) device.dataset["theme"] = scheme;
+    renderer?.setEnvironment({ colorScheme: scheme });
+    root.setEnvironment({ colorScheme: scheme });
+  };
+  const onPreferredScheme = (event) => {
+    const scheme = event.detail.colorScheme;
+    preferred = scheme;
+    queueMicrotask(applyScheme);
+  };
+  screen.addEventListener("sb:color-scheme", onPreferredScheme);
+  let sizeClass = environment.horizontalSizeClass;
+  const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+    const next = horizontalSizeClassFor(screen.clientWidth);
+    if (next === sizeClass) return;
+    sizeClass = next;
+    root.setEnvironment({ horizontalSizeClass: next });
+  }) : null;
+  observer?.observe(screen);
+  root.render(element);
+  const mounted = {
+    root,
+    renderer,
+    setEnvironment(next) {
+      if (next.colorScheme !== void 0) pageScheme = next.colorScheme;
+      const scheme = preferred ?? pageScheme;
+      renderer?.setEnvironment({ ...next, colorScheme: scheme });
+      root.setEnvironment({ ...next, colorScheme: scheme });
+    },
+    unmount() {
+      observer?.disconnect();
+      screen.removeEventListener("sb:color-scheme", onPreferredScheme);
+      root.unmount();
+      renderer?.dispose();
+    }
+  };
+  return mounted;
+}
+const NavigationContext = createContext(null);
+function useNavigation() {
+  return useContext(NavigationContext);
+}
+function RegisterDestination({ destination }) {
+  const navigation = useContext(NavigationContext);
+  navigation?.registerDestination(destination);
+  return null;
+}
+const OWN = [
+  EnvironmentContext,
+  ViewEnvironmentContext,
+  NavigationContext,
+  DismissContext
+];
+function useContextBridge(contexts = [], options = {}) {
+  const own = options.environment === false ? OWN.filter((context) => context !== EnvironmentContext) : OWN;
+  const all = [...own, ...contexts];
+  const values = all.map((context) => useContext(context));
+  return (children) => all.reduceRight((inner, context, index) => createElement(context.Provider, { value: values[index] }, inner), children);
+}
+const NO_SAFE_AREA = { top: 0, leading: 0, bottom: 0, trailing: 0 };
+function SwiftUIView({
+  children,
+  fit = "fill",
+  colorScheme = "light",
+  dynamicTypeSize = "large",
+  contexts,
+  assets,
+  className,
+  style
+}) {
+  const device = useRef(null);
+  const screen = useRef(null);
+  const mounted = useRef(null);
+  const bridge = useContextBridge(contexts, { environment: false });
+  const tree = bridge(children);
+  const latest = useRef(tree);
+  latest.current = tree;
+  useLayoutEffect(() => {
+    if (!screen.current) return;
+    const instance = mount(screen.current, latest.current, {
+      colorScheme,
+      dynamicTypeSize,
+      safeArea: NO_SAFE_AREA,
+      contentHeight: fit === "content",
+      ...assets ? { assets } : {}
+    });
+    mounted.current = instance;
+    return () => {
+      mounted.current = null;
+      instance.unmount();
+    };
+  }, [fit]);
+  useLayoutEffect(() => {
+    mounted.current?.root.render(tree);
+  });
+  useLayoutEffect(() => {
+    if (device.current) applyTypeSizeVariables(device.current, dynamicTypeSize);
+    mounted.current?.setEnvironment({ colorScheme, dynamicTypeSize });
+  }, [colorScheme, dynamicTypeSize]);
+  const classes = ["device", "sb-island", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ref: device, className: classes, "data-theme": colorScheme, "data-type-size": dynamicTypeSize, "data-state": "ready", "data-sb-fit": fit, style, children: /* @__PURE__ */ jsx("div", { className: "device-screen", children: /* @__PURE__ */ jsx("div", { ref: screen, className: "screen" }) }) });
+}
+function readBinding(value, onChange) {
+  if (Array.isArray(value) && value.length === 2 && typeof value[1] === "function") {
+    const [current, set] = value;
+    return [current, set];
+  }
+  return [value, onChange ?? (() => {
+  })];
+}
+const HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
+function rgb(r2, g, b, a = 1) {
+  return { r: r2, g, b, a };
+}
+function hex(value) {
+  const digits = value.replace("#", "");
+  const wide = digits.length === 3 || digits.length === 4 ? [...digits].map((d) => d + d).join("") : digits;
+  const n = (at) => parseInt(wide.slice(at, at + 2), 16) / 255;
+  return { r: n(0), g: n(2), b: n(4), a: wide.length >= 8 ? n(6) : 1 };
+}
+function shapeStyle(value) {
+  if (typeof value !== "string") return value;
+  if (value in HIERARCHY) return { hierarchical: HIERARCHY[value] };
+  if (value === "white") return rgb(1, 1, 1);
+  if (value === "black") return rgb(0, 0, 0);
+  if (value.startsWith("#")) return hex(value);
+  return { name: value };
+}
+function color(value) {
+  return shapeStyle(value);
+}
+function opacity(value, a) {
+  const style = shapeStyle(value);
+  if ("r" in style) return { ...style, a: style.a * a };
+  if ("name" in style) return { ...style, a: (style.a ?? 1) * a };
+  if ("named" in style) return { ...style, opacity: style.opacity * a };
+  return { ...style, opacity: (style.opacity ?? 1) * a };
+}
+function gradient(value) {
+  return { colorGradient: color(value) };
+}
+const ColorValues = {
+  red: { name: "red" },
+  orange: { name: "orange" },
+  yellow: { name: "yellow" },
+  green: { name: "green" },
+  mint: { name: "mint" },
+  teal: { name: "teal" },
+  cyan: { name: "cyan" },
+  blue: { name: "blue" },
+  indigo: { name: "indigo" },
+  purple: { name: "purple" },
+  pink: { name: "pink" },
+  brown: { name: "brown" },
+  gray: { name: "gray" },
+  white: rgb(1, 1, 1),
+  black: rgb(0, 0, 0),
+  clear: { name: "clear" },
+  primary: { name: "primary" },
+  secondary: { name: "secondary" },
+  accent: { name: "accent" },
+  /** `Color(uiColor:)` / `Color(.name)`: a UIKit semantic color by its iOS name. */
+  system: (name) => ({ name }),
+  rgb,
+  hex,
+  opacity,
+  gradient
+};
+const UNIT_POINTS = {
+  center: { x: 0.5, y: 0.5 },
+  top: { x: 0.5, y: 0 },
+  bottom: { x: 0.5, y: 1 },
+  leading: { x: 0, y: 0.5 },
+  trailing: { x: 1, y: 0.5 },
+  topLeading: { x: 0, y: 0 },
+  topTrailing: { x: 1, y: 0 },
+  bottomLeading: { x: 0, y: 1 },
+  bottomTrailing: { x: 1, y: 1 }
+};
+function unitPoint(value) {
+  return typeof value === "string" ? UNIT_POINTS[value] : value;
+}
+function stops$1(spec) {
+  if (spec.stops) return spec.stops.map((stop) => ({ color: color(stop.color), location: stop.location }));
+  const colors = spec.colors ?? [];
+  const last = Math.max(colors.length - 1, 1);
+  return colors.map((value, index) => ({ color: color(value), location: index / last }));
+}
+function LinearGradient(spec) {
+  return { linearGradient: { stops: stops$1(spec), start: unitPoint(spec.startPoint), end: unitPoint(spec.endPoint) } };
+}
+function RadialGradient(spec) {
+  return {
+    radialGradient: { stops: stops$1(spec), center: unitPoint(spec.center), startRadius: spec.startRadius, endRadius: spec.endRadius }
+  };
+}
+function AngularGradient(spec) {
+  return {
+    angularGradient: {
+      stops: stops$1(spec),
+      center: unitPoint(spec.center),
+      startAngle: spec.startAngle ?? 0,
+      endAngle: spec.endAngle ?? 360
+    }
+  };
+}
+function font(value) {
+  return typeof value === "string" ? { textStyle: value } : value;
+}
+function system(first, second, third) {
+  const result = typeof first === "number" ? { size: first } : { textStyle: first };
+  const weight = typeof first === "number" ? second : third;
+  const design = typeof first === "number" ? third : second;
+  if (weight) result.weight = weight;
+  if (design) result.design = design;
+  return result;
+}
+function weighted(value, weight) {
+  return { ...font(value), weight };
+}
+const Font = { system, weighted, bold: (value) => weighted(value, "bold") };
+function frame(value) {
+  const dimension = (n) => n === void 0 ? void 0 : n === Infinity ? "infinity" : n;
+  const result = { alignment: value.alignment ?? "center" };
+  if (value.width !== void 0) result.width = value.width;
+  if (value.height !== void 0) result.height = value.height;
+  const minWidth = dimension(value.minWidth);
+  const maxWidth = dimension(value.maxWidth);
+  const minHeight = dimension(value.minHeight);
+  const maxHeight = dimension(value.maxHeight);
+  if (minWidth !== void 0) result.minWidth = minWidth;
+  if (maxWidth !== void 0) result.maxWidth = maxWidth;
+  if (minHeight !== void 0) result.minHeight = minHeight;
+  if (maxHeight !== void 0) result.maxHeight = maxHeight;
+  return result;
+}
+const DEFAULT_PADDING = 16;
+function padding(value) {
+  if (value === true) return insets(["all"], DEFAULT_PADDING);
+  if (typeof value === "number") return insets(["all"], value);
+  if (Array.isArray(value)) {
+    const [edges, amount] = value;
+    return insets(Array.isArray(edges) ? edges : [edges], amount ?? DEFAULT_PADDING);
+  }
+  return value;
+}
+function insets(edges, amount) {
+  const result = {};
+  for (const edge of edges) {
+    if (edge === "all" || edge === "vertical" || edge === "top") result.top = amount;
+    if (edge === "all" || edge === "vertical" || edge === "bottom") result.bottom = amount;
+    if (edge === "all" || edge === "horizontal" || edge === "leading") result.leading = amount;
+    if (edge === "all" || edge === "horizontal" || edge === "trailing") result.trailing = amount;
+  }
+  return result;
+}
+const r = (n) => {
+  const v = Math.round(n * 100) / 100;
+  return Object.is(v, -0) ? "0" : String(v);
+};
+class Path {
+  parts = [];
+  current = null;
+  start = null;
+  constructor(build) {
+    build?.(this);
+  }
+  /** `Path(rect)` */
+  static rect(rect) {
+    return new Path().addRect(rect);
+  }
+  /** `Path(roundedRect:cornerRadius:)` */
+  static roundedRect(rect, cornerRadius) {
+    return new Path().addRoundedRect(rect, cornerRadius);
+  }
+  /** `Path(ellipseIn:)` */
+  static ellipse(rect) {
+    return new Path().addEllipse(rect);
+  }
+  move(to) {
+    this.parts.push(`M${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    this.start = to;
+    return this;
+  }
+  addLine(to) {
+    if (!this.current) return this.move(to);
+    this.parts.push(`L${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    return this;
+  }
+  addLines(points) {
+    points.forEach((point, index) => index === 0 ? this.move(point) : this.addLine(point));
+    return this;
+  }
+  addQuadCurve(to, control) {
+    if (!this.current) this.move(control);
+    this.parts.push(`Q${r(control.x)} ${r(control.y)} ${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    return this;
+  }
+  addCurve(to, control1, control2) {
+    if (!this.current) this.move(control1);
+    this.parts.push(`C${r(control1.x)} ${r(control1.y)} ${r(control2.x)} ${r(control2.y)} ${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    return this;
+  }
+  /**
+   * `addArc(center:radius:startAngle:endAngle:clockwise:)`, angles in
+   * degrees. As in SwiftUI's flipped coordinates, `clockwise: false` draws
+   * clockwise on screen.
+   */
+  addArc(center, radius, startAngle, endAngle, clockwise) {
+    const rad = (deg) => deg * Math.PI / 180;
+    const point = (deg) => ({ x: center.x + radius * Math.cos(rad(deg)), y: center.y + radius * Math.sin(rad(deg)) });
+    const from = point(startAngle);
+    if (this.current) this.addLine(from);
+    else this.move(from);
+    const sweepPositive = !clockwise;
+    let delta = endAngle - startAngle;
+    if (sweepPositive) while (delta < 0) delta += 360;
+    else while (delta > 0) delta -= 360;
+    if (Math.abs(delta) >= 360) {
+      const half = point(startAngle + (sweepPositive ? 180 : -180));
+      const flag = sweepPositive ? 1 : 0;
+      this.parts.push(`A${r(radius)} ${r(radius)} 0 0 ${flag} ${r(half.x)} ${r(half.y)}`);
+      this.parts.push(`A${r(radius)} ${r(radius)} 0 0 ${flag} ${r(from.x)} ${r(from.y)}`);
+      this.current = from;
+      return this;
+    }
+    const to = point(startAngle + delta);
+    const large = Math.abs(delta) > 180 ? 1 : 0;
+    this.parts.push(`A${r(radius)} ${r(radius)} 0 ${large} ${sweepPositive ? 1 : 0} ${r(to.x)} ${r(to.y)}`);
+    this.current = to;
+    return this;
+  }
+  addRect(rect) {
+    this.move({ x: rect.x, y: rect.y });
+    this.addLine({ x: rect.x + rect.width, y: rect.y });
+    this.addLine({ x: rect.x + rect.width, y: rect.y + rect.height });
+    this.addLine({ x: rect.x, y: rect.y + rect.height });
+    return this.closeSubpath();
+  }
+  addRoundedRect(rect, cornerRadius) {
+    const c = Math.max(0, Math.min(cornerRadius, rect.width / 2, rect.height / 2));
+    if (c === 0) return this.addRect(rect);
+    const { x, y, width: w, height: h } = rect;
+    this.move({ x: x + c, y });
+    this.addLine({ x: x + w - c, y });
+    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + w)} ${r(y + c)}`);
+    this.current = { x: x + w, y: y + c };
+    this.addLine({ x: x + w, y: y + h - c });
+    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + w - c)} ${r(y + h)}`);
+    this.current = { x: x + w - c, y: y + h };
+    this.addLine({ x: x + c, y: y + h });
+    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x)} ${r(y + h - c)}`);
+    this.current = { x, y: y + h - c };
+    this.addLine({ x, y: y + c });
+    this.parts.push(`A${r(c)} ${r(c)} 0 0 1 ${r(x + c)} ${r(y)}`);
+    this.current = { x: x + c, y };
+    return this.closeSubpath();
+  }
+  addEllipse(rect) {
+    const rx = rect.width / 2;
+    const ry = rect.height / 2;
+    const cx = rect.x + rx;
+    const cy = rect.y + ry;
+    this.move({ x: cx + rx, y: cy });
+    this.parts.push(`A${r(rx)} ${r(ry)} 0 0 1 ${r(cx - rx)} ${r(cy)}`);
+    this.parts.push(`A${r(rx)} ${r(ry)} 0 0 1 ${r(cx + rx)} ${r(cy)}`);
+    this.current = { x: cx + rx, y: cy };
+    return this.closeSubpath();
+  }
+  addPath(path) {
+    this.parts.push(path.svg());
+    return this;
+  }
+  closeSubpath() {
+    this.parts.push("Z");
+    this.current = this.start;
+    return this;
+  }
+  get isEmpty() {
+    return this.parts.length === 0;
+  }
+  /** The SVG path data. */
+  svg() {
+    return this.parts.join("");
+  }
+  toString() {
+    return this.svg();
+  }
+}
+function sb(kind, props, on, children, target) {
+  const hostProps = { kind };
+  if (props) hostProps.props = props;
+  if (on) hostProps.on = on;
+  if (target) hostProps.target = target;
+  return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
+}
+let active = null;
+function Draggable({ payload, children }) {
+  return sb(
+    "draggable",
+    {},
+    {
+      dragstart: (event) => {
+        active = { id: event.id, payload };
+      },
+      dragend: (event) => {
+        if (active?.id === event.id) active = null;
+      }
+    },
+    children
+  );
+}
+function itemValue(item) {
+  if (item.text !== void 0) {
+    if (item.type === "text/uri-list") {
+      try {
+        return new URL(item.text.split(/\r?\n/)[0].trim());
+      } catch {
+        return item.text;
+      }
+    }
+    return item.text;
+  }
+  const binary = atob(item.data ?? "");
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return typeof File !== "undefined" ? new File([bytes], item.name ?? "file", { type: item.type }) : bytes;
+}
+function DropDestination({ action, isTargeted, accepts, children }) {
+  return sb(
+    "dropdestination",
+    { accepts: accepts ?? [] },
+    {
+      drop: (event) => {
+        if (event.phase === "entered") {
+          isTargeted?.(true);
+          return;
+        }
+        isTargeted?.(false);
+        if (event.phase !== "performed") return;
+        let items;
+        if (event.source !== void 0) items = active && active.id === event.source ? [active.payload] : [];
+        else items = (event.items ?? []).map(itemValue);
+        if (items.length > 0) action(items, { x: event.x, y: event.y });
+      }
+    },
+    children
+  );
+}
+function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
+  const [presented, setPresented] = readBinding(isPresented);
+  if (!presented) return null;
+  const dismiss = () => {
+    setPresented(false);
+    onDismiss?.();
+  };
+  const detents = fullScreen ? ["full"] : ["large"];
+  return sb(
+    HOIST_KIND,
+    void 0,
+    void 0,
+    sb(
+      "sheet",
+      { detents },
+      { tap: dismiss },
+      /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(DismissContext.Provider, { value: dismiss, children: content }) })
+    ),
+    "root"
+  );
+}
+function presentationDetents(detents) {
+  const encoded = detents.map(
+    (detent) => typeof detent === "string" ? detent : "height" in detent ? `height:${detent.height}` : `fraction:${detent.fraction}`
+  );
+  return sb(PREF_KIND, { detents: encoded }, void 0, void 0, "sheet");
+}
+function AlertPresenter({ title, isPresented, message, actions, style }) {
+  const [presented, setPresented] = readBinding(isPresented);
+  if (!presented) return null;
+  const dismiss = () => setPresented(false);
+  return sb(
+    HOIST_KIND,
+    void 0,
+    void 0,
+    sb(
+      "alert",
+      { title, message: message ?? null, style: style ?? "alert" },
+      { tap: dismiss },
+      withEnvironment({ dismissAlert: dismiss }, actions)
+    ),
+    "root"
+  );
+}
+function Lifecycle({ onAppear, onDisappear }) {
+  useEffect(() => {
+    onAppear?.();
+    return () => onDisappear?.();
+  }, []);
+  return null;
+}
+function Inspector({ isPresented, content, columnWidth, children }) {
+  const sizeClass = useHorizontalSizeClass();
+  const [presented, setPresented] = readBinding(isPresented);
+  if (sizeClass === "compact") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      /* @__PURE__ */ jsx(SheetPresenter, { isPresented: [presented, setPresented], content })
+    ] });
+  }
+  const panelContent = columnWidth !== void 0 ? sb("styled", { style: { inspectorColumnWidth: columnWidth } }, void 0, content) : content;
+  return sb("inspector", { presented }, void 0, [
+    /* @__PURE__ */ jsx(InspectorPart, { children }, "content"),
+    /* @__PURE__ */ jsx(InspectorPart, { children: sb("inspectorpanel", {}, void 0, panelContent) }, "panel")
+  ]);
+}
+function InspectorPart({ children }) {
+  return children;
+}
+function Task({ id, action }) {
+  const latest = useRef(action);
+  latest.current = action;
+  useEffect(() => {
+    const controller = new AbortController();
+    Promise.resolve().then(() => latest.current(controller.signal)).catch((error) => {
+      if (!controller.signal.aborted) console.error(error);
+    });
+    return () => controller.abort();
+  }, [id]);
+  return null;
+}
+function OnChange({
+  value,
+  action,
+  initial
+}) {
+  const previous = useRef(null);
+  const latest = useRef(action);
+  latest.current = action;
+  useEffect(() => {
+    const last = previous.current;
+    previous.current = { value };
+    if (last === null) {
+      if (initial) latest.current(value, value);
+      return;
+    }
+    if (!Object.is(last.value, value)) latest.current(last.value, value);
+  }, [value, initial]);
+  return null;
+}
+const CoordinateSpacesContext = createContext({});
+function useCoordinateSpaces() {
+  return useContext(CoordinateSpacesContext);
+}
+function CoordinateSpace({ name, children }) {
+  const spaces = useContext(CoordinateSpacesContext);
+  const [frame2, setFrame] = useState(null);
+  return /* @__PURE__ */ jsx(CoordinateSpacesContext.Provider, { value: { ...spaces, [name]: frame2 }, children: sb(
+    "zstack",
+    { alignment: "center", reportsSize: true, reportsFrame: true },
+    {
+      geometry: (event) => {
+        const next = { x: event.x ?? 0, y: event.y ?? 0, width: event.width, height: event.height };
+        if (!frame2 || frame2.x !== next.x || frame2.y !== next.y || frame2.width !== next.width || frame2.height !== next.height) setFrame(next);
+      }
+    },
+    children
+  ) });
+}
+function Hover({ action, children }) {
+  return sb("styled", { style: { hover: true } }, { hover: (event) => action(event.value) }, children);
+}
+const CURSORS = {
+  link: "pointer",
+  automatic: "auto",
+  default: "default",
+  text: "text",
+  verticalText: "vertical-text",
+  grabIdle: "grab",
+  grabActive: "grabbing",
+  rectSelection: "crosshair",
+  columnResize: "col-resize",
+  rowResize: "row-resize"
+};
+function cursorFor(style) {
+  return CURSORS[style] ?? style;
+}
+function SymbolEffect({ spec, children }) {
+  const serial = useRef(null);
+  const discrete = "value" in spec;
+  if (discrete) {
+    if (!serial.current) serial.current = { value: spec.value, count: 0 };
+    else if (!Object.is(serial.current.value, spec.value)) serial.current = { value: spec.value, count: serial.current.count + 1 };
+  }
+  if (!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";
+    default:
+      return "trailing";
+  }
+}
+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"
+]);
+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$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 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$1, 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":
+      return styled({ gridColumnAlignment: value }, node);
+    case "gridCellColumns":
+      return styled({ gridCellColumns: value }, node);
+    case "buttonStyle":
+      return withEnvironment({ buttonStyle: value === "borderless" ? "plain" : value }, node);
+    case "controlSize":
+      return withEnvironment({ controlSize: value }, node);
+    case "pickerStyle":
+      return withEnvironment({ pickerStyle: value }, node);
+    case "labelsHidden":
+      return withEnvironment({ labelsHidden: Boolean(value) }, node);
+    case "navigationTitle":
+      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 round = (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: [round(a), round((at(100, 0) - a) / 100), round((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":
+      return node;
+    case "safeAreaInset": {
+      const spec = value;
+      const vertical = spec.edge === "top" || spec.edge === "bottom";
+      const before = spec.edge === "top" || spec.edge === "leading";
+      const children = before ? [createElement(Fragment$1, { key: "inset" }, spec.content), createElement(Fragment$1, { key: "content" }, node)] : [createElement(Fragment$1, { key: "content" }, node), createElement(Fragment$1, { key: "inset" }, spec.content)];
+      return vertical ? sb("vstack", { spacing: spec.spacing ?? 0, alignment: spec.alignment ?? "center" }, void 0, children) : sb("hstack", { spacing: spec.spacing ?? 0, alignment: spec.alignment ?? "center" }, void 0, children);
+    }
+    case "popover":
+      sides.push(createElement(SheetPresenter, value));
+      return node;
+    case "redacted":
+      return withEnvironment({ redacted: Boolean(value) }, node);
+    case "keyboardShortcut":
+      return node;
+    case "onKeyPress":
+      sides.push(createElement(KeyPressListener, { spec: value }));
+      return node;
+    case "sensoryFeedback": {
+      const spec = value;
+      sides.push(createElement(SensoryFeedbackPlayer, spec));
+      return node;
+    }
+    case "textCase":
+      return withEnvironment({ textCase: value }, node);
+    case "coordinateSpace":
+      return createElement(CoordinateSpace, { name: value }, node);
+    case "contentTransition": {
+      if (value === "identity") return node;
+      if (typeof value === "object") {
+        const countsDown = value.numericText.countsDown;
+        return styled({ contentTransition: { kind: "numericText", ...countsDown !== void 0 ? { countsDown } : {} } }, node);
+      }
+      return styled({ contentTransition: { kind: value } }, node);
+    }
+    case "modifiers": {
+      let result = node;
+      for (const extra of value) {
+        result = wrap(result, Object.entries(extra), sides);
+      }
+      return result;
+    }
+    default: {
+      const unknown = key;
+      throw new Error(`Unknown modifier ${String(unknown)}`);
+    }
+  }
+}
+const ScrollRequestContext = createContext(null);
+let nextSerial = 1;
+function ScrollViewReader({ children }) {
+  const [request, setRequest] = useState(null);
+  const proxy = {
+    scrollTo: (id, anchor) => setRequest({ id, anchor: anchor === void 0 ? null : unitPoint(anchor), serial: nextSerial++ })
+  };
+  return /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: request, children: children(proxy) });
+}
+function ScrollTarget({ id, children }) {
+  const request = useContext(ScrollRequestContext);
+  if (request && request.id === id) return styled({ scrollID: true, scrollTo: { anchor: request.anchor, serial: request.serial } }, children);
+  return styled({ scrollID: true }, children);
+}
+const ListSelectionContext = createContext(null);
+function Row({ tag, onDelete, deletable, onMove, movable, index, containerIndex, children }) {
+  const selection = useContext(ListSelectionContext);
+  const selectable = selection !== null && tag !== void 0;
+  const canDelete = onDelete !== void 0 && deletable !== false;
+  const canMove = onMove !== void 0 && movable !== false;
+  if (!selectable && !canDelete && !canMove) return children;
+  const props = {};
+  if (selectable) {
+    props["selectable"] = true;
+    props["selected"] = selection.isSelected(tag);
+  }
+  if (canDelete) props["deletable"] = true;
+  if (canMove) props["movable"] = true;
+  return sb(
+    "listrow",
+    props,
+    {
+      tap: () => selectable && selection.select(tag),
+      delete: () => onDelete?.(),
+      move: (event) => {
+        const start = (containerIndex ?? index ?? 0) - (index ?? 0);
+        onMove?.(Math.max(0, event.to - start));
+      }
+    },
+    children
+  );
+}
+const LAZY_BATCH = 12;
+const LazyContext = createContext(null);
+function LazyGroup({ rows, start = 0, wrap: wrap2 }) {
+  const axis = useContext(LazyContext);
+  const request = useContext(ScrollRequestContext);
+  const [count, setCount] = useState(LAZY_BATCH);
+  const target = request ? rows.findIndex((row) => rowMatches(row, request.id)) : -1;
+  const needed = target >= 0 ? Math.ceil((target + 1) / LAZY_BATCH) * LAZY_BATCH : 0;
+  useEffect(() => {
+    if (needed > count) setCount(needed);
+  }, [needed, count]);
+  const visible = Math.max(count, needed);
+  const shown = axis === null ? rows : rows.slice(0, visible);
+  const built = shown.map((row, index) => wrap2 ? wrap2(row, start + index) : row);
+  if (axis === null || shown.length >= rows.length) return built;
+  return [
+    ...built,
+    createElement(
+      LazySpacer,
+      { key: `lazy-${visible}`, axis, remaining: rows.length - shown.length, more: () => setCount(visible + LAZY_BATCH) }
+    )
+  ];
+}
+function LazySpacer({ axis, remaining, more }) {
+  return sb("lazyspacer", { axis, remaining }, { lazy: more });
+}
+function rowMatches(row, id) {
+  if (row.key !== null && row.key === String(id)) return true;
+  let element = row;
+  for (let depth = 0; element && depth < 3; depth++) {
+    const props = element.props;
+    if (props.scrollID === id) return true;
+    element = isValidElement(props.children) ? props.children : null;
+  }
+  return false;
+}
+function VStack(props) {
+  const { own, modifiers } = splitProps(props);
+  const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
+  if (own.scrollTargetLayout) stack["scrollTarget"] = true;
+  return applyModifiers(sb("vstack", stack, void 0, own.children), modifiers);
+}
+function HStack(props) {
+  const { own, modifiers } = splitProps(props);
+  const stack = { spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
+  if (own.scrollTargetLayout) stack["scrollTarget"] = true;
+  return applyModifiers(sb("hstack", stack, void 0, own.children), modifiers);
+}
+function ZStack(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("zstack", { alignment: own.alignment ?? "center" }, void 0, own.children), modifiers);
+}
+function Spacer(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("spacer", { minLength: own.minLength ?? null }), modifiers);
+}
+function Divider(props) {
+  const { modifiers } = splitProps(props);
+  return applyModifiers(sb("divider", {}), modifiers);
+}
+function ScrollView(props) {
+  const { own, modifiers } = splitProps(props);
+  const refresh = useRefreshable(takeModifier(modifiers, "refreshable"));
+  const scroll = { axes: own.axes ?? "vertical", ...refresh.props };
+  if (own.scrollTargetBehavior) scroll["snap"] = own.scrollTargetBehavior;
+  if (own.scrollDismissesKeyboard) scroll["dismissesKeyboard"] = true;
+  return applyModifiers(sb("scrollview", scroll, refresh.handlers, own.children), modifiers);
+}
+function useRefreshable(own) {
+  const environment = useViewEnvironment();
+  const refresh = own ?? environment.refresh;
+  const [refreshing, setRefreshing] = useState(false);
+  if (!refresh) return { props: {} };
+  return {
+    props: { refreshable: true, refreshing },
+    handlers: {
+      refresh: () => {
+        if (refreshing) return;
+        setRefreshing(true);
+        Promise.resolve().then(refresh).catch((error) => console.error(error)).finally(() => setRefreshing(false));
+      }
+    }
+  };
+}
+function Group(props) {
+  const { own, modifiers } = splitProps(props);
+  if (modifiers.length === 0) return own.children;
+  return Children.map(own.children, (child) => applyModifiers(child, modifiers));
+}
+function moveItems(items, offsets, to) {
+  const moving = new Set(offsets);
+  const picked = items.filter((_, index) => moving.has(index));
+  const rest = items.filter((_, index) => !moving.has(index));
+  const before = offsets.filter((offset) => offset < to).length;
+  const at = to - before;
+  return [...rest.slice(0, at), ...picked, ...rest.slice(at)];
+}
+function ForEach(props) {
+  const { own, modifiers } = splitProps(props);
+  const rows = own.data.map((element, index) => {
+    const key = own.id ? own.id(element, index) : keyOf(element, index);
+    const content = applyModifiers(own.children(element, index), modifiers);
+    if (!own.onDelete && !own.onMove) return createElement(Fragment$1, { key }, content);
+    const { onDelete, onMove } = own;
+    const row = { tag: key, index };
+    if (onDelete) {
+      row.onDelete = () => onDelete([index]);
+      row.deletable = !own.deleteDisabled?.(element, index);
+    }
+    if (onMove) {
+      row.onMove = (to) => onMove([index], to);
+      row.movable = !own.moveDisabled?.(element, index);
+    }
+    return createElement(Row, { key, ...row }, content);
+  });
+  return rows.length > LAZY_BATCH ? createElement(LazyGroup, { rows }) : rows;
+}
+function keyOf(element, index) {
+  if (typeof element === "string" || typeof element === "number") return element;
+  if (typeof element === "object" && element !== null && "id" in element) {
+    const id = element.id;
+    if (typeof id === "string" || typeof id === "number") return id;
+  }
+  return index;
+}
+function flattenChildren(children, options = {}) {
+  const result = [];
+  const visit = (node) => {
+    if (node === null || node === void 0 || typeof node === "boolean") return;
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    if (!isValidElement(node)) return;
+    const element = node;
+    if (element.type === Fragment$1) {
+      const inner = element.props["children"];
+      if (element.key !== null && isValidElement(inner) && inner.key === null && inner.type !== Fragment$1) {
+        visit({ ...inner, key: element.key });
+        return;
+      }
+      visit(inner);
+      return;
+    }
+    if (element.type === ForEach) {
+      visit(ForEach(element.props));
+      return;
+    }
+    if (element.type === LazyGroup && !options.keepLazy) {
+      visit(element.props.rows);
+      return;
+    }
+    result.push(element);
+  };
+  visit(children);
+  return result;
+}
+function GridItem(spec = {}) {
+  const dimension = (n) => n === void 0 || n === Infinity ? "infinity" : n;
+  let size;
+  if (spec.size && "fixed" in spec.size) size = { kind: "fixed", value: spec.size.fixed };
+  else if (spec.size && "adaptive" in spec.size) {
+    size = { kind: "adaptive", minimum: spec.size.adaptive.minimum, maximum: dimension(spec.size.adaptive.maximum) };
+  } else {
+    const flexible = spec.size && "flexible" in spec.size ? spec.size.flexible : {};
+    size = { kind: "flexible", minimum: flexible.minimum ?? 10, maximum: dimension(flexible.maximum) };
+  }
+  return { size, spacing: spec.spacing ?? null, alignment: spec.alignment ?? null };
+}
+GridItem.flexible = (options = {}) => GridItem({ size: { flexible: options }, spacing: options.spacing, alignment: options.alignment });
+GridItem.fixed = (value, options = {}) => GridItem({ size: { fixed: value }, spacing: options.spacing, alignment: options.alignment });
+GridItem.adaptive = (options) => GridItem({ size: { adaptive: options }, spacing: options.spacing, alignment: options.alignment });
+function LazyVGrid(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(
+    sb("lazyvgrid", { columns: own.columns, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" }, void 0, own.children),
+    modifiers
+  );
+}
+function Grid(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(
+    sb(
+      "grid",
+      { horizontalSpacing: own.horizontalSpacing ?? null, verticalSpacing: own.verticalSpacing ?? null, alignment: own.alignment ?? "center" },
+      void 0,
+      own.children
+    ),
+    modifiers
+  );
+}
+function GridRow(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("gridrow", { alignment: own.alignment ?? null }, void 0, own.children), modifiers);
+}
+function runStyleOf(props, inherited, nested) {
+  const style = { ...inherited };
+  if (props.italic) style.italic = true;
+  if (props.underline) style.underline = typeof props.underline === "object" && props.underline.color ? { color: color(props.underline.color) } : {};
+  if (props.strikethrough) {
+    style.strikethrough = typeof props.strikethrough === "object" && props.strikethrough.color ? { color: color(props.strikethrough.color) } : {};
+  }
+  const kerning = props.tracking ?? props.kerning;
+  if (kerning !== void 0) style.kerning = kerning;
+  if (props.baselineOffset !== void 0) style.baselineOffset = props.baselineOffset;
+  if (props.link) style.link = props.link;
+  if (nested) {
+    let runFont = props.font !== void 0 ? font(props.font) : void 0;
+    if (props.bold) runFont = { ...runFont ?? {}, weight: "bold" };
+    if (props.fontWeight) runFont = { ...runFont ?? {}, weight: props.fontWeight };
+    if (runFont) style.font = { ...style.font ?? {}, ...runFont };
+    if (props.foregroundStyle !== void 0) style.foreground = shapeStyle(props.foregroundStyle);
+  }
+  return style;
+}
+function segmentsOf(children, style, into) {
+  const visit = (node) => {
+    if (node === null || node === void 0 || typeof node === "boolean") return;
+    if (typeof node === "string" || typeof node === "number") {
+      const last = into[into.length - 1];
+      if (last && "text" in last && last.style === style) last.text += String(node);
+      else into.push({ text: String(node), style });
+      return;
+    }
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    if (!isValidElement(node)) return;
+    const element = node;
+    if (element.type === Fragment$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();
+  const ownStyle = takeModifier(modifiers, "buttonStyle");
+  const ownSize = takeModifier(modifiers, "controlSize");
+  const style = ownStyle === "borderless" ? "plain" : ownStyle ?? environment.buttonStyle ?? "automatic";
+  const controlSize = ownSize ?? environment.controlSize;
+  const buttonProps = { role: own.role ?? null, style };
+  if (controlSize !== void 0 && controlSize !== "regular") buttonProps["controlSize"] = controlSize;
+  const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
+  const tap = () => {
+    own.action?.();
+    environment.dismissAlert?.();
+  };
+  const shortcut = takeModifier(modifiers, "keyboardShortcut");
+  useKeyboardShortcut(typeof shortcut === "string" ? { key: shortcut } : shortcut, () => {
+    if (!buttonDisabled(modifiers)) tap();
+  });
+  return applyModifiers(sb("button", buttonProps, { tap }, label), modifiers);
+}
+function Toggle(props) {
+  const { own, modifiers } = splitProps(props);
+  const [isOn, setOn] = readBinding(own.isOn, own.onChange);
+  const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
+  return applyModifiers(sb("toggle", { isOn }, { toggle: (event) => setOn(event.value) }, label), modifiers);
+}
+function Picker(props) {
+  const { own, modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const ownStyle = takeModifier(modifiers, "pickerStyle");
+  const style = ownStyle ?? environment.pickerStyle ?? "menu";
+  const [selection, setSelection] = readBinding(own.selection, own.onChange);
+  const options = pickerOptions(own.options, own.children);
+  const selected = Math.max(
+    0,
+    options.findIndex((option) => Object.is(option.tag, selection))
+  );
+  return applyModifiers(
+    sb(
+      "picker",
+      { style, label: own.label, options: options.map((option) => option.label), selected },
+      { select: (event) => options[event.value] && setSelection(options[event.value].tag) }
+    ),
+    modifiers
+  );
+}
+function pickerOptions(options, children) {
+  if (options) {
+    return options.map(
+      (option) => typeof option === "object" && option !== null && "label" in option && "tag" in option ? option : { label: String(option), tag: option }
+    );
+  }
+  return flattenChildren(children).map((element) => {
+    const label = plainText(element);
+    const tag = element.props.tag;
+    return { label, tag: tag !== void 0 ? tag : label };
+  });
+}
+function plainText(element) {
+  const props = element.props;
+  if (element.type === Text) return collectText(props.children);
+  if (typeof props.title === "string") return props.title;
+  return "";
+}
+function collectText(node) {
+  if (node === null || node === void 0 || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(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);
+  }
+  return "";
+}
+function Slider(props) {
+  const { own, modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const [value, setValue] = readBinding(own.value, own.onChange);
+  const [min, max] = own.range ?? [0, 1];
+  const labels = [];
+  const children = [];
+  if (own.label !== void 0 && !environment.labelsHidden) {
+    labels.push("label");
+    children.push(/* @__PURE__ */ jsx(Fragment$1, { 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"));
+  }
+  return applyModifiers(
+    sb("slider", { value, min, max, step: own.step ?? null, labels }, { slide: (event) => setValue(event.value) }, children.length ? children : void 0),
+    modifiers
+  );
+}
+function Stepper(props) {
+  const { own, modifiers } = splitProps(props);
+  const [value, setValue] = readBinding(own.value, own.onChange);
+  const step = own.step ?? 1;
+  const [min, max] = own.range ?? [-Infinity, Infinity];
+  const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.children;
+  return applyModifiers(
+    sb(
+      "stepper",
+      { canIncrement: value < max, canDecrement: value > min },
+      { step: (event) => setValue(Math.min(max, Math.max(min, value + Math.sign(event.value) * step))) },
+      label
+    ),
+    modifiers
+  );
+}
+function TextField(props) {
+  const { own, modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const ownSubmitLabel = takeModifier(modifiers, "submitLabel");
+  const [text, setText] = readBinding(own.text, own.onChange);
+  const fieldProps = {
+    text,
+    placeholder: own.placeholder ?? "",
+    style: own.textFieldStyle ?? "plain",
+    secure: own.secure ?? false
+  };
+  if (own.onSubmit) fieldProps["submit"] = true;
+  if (own.axis) fieldProps["axis"] = own.axis;
+  const submitLabel = ownSubmitLabel ?? environment.submitLabel;
+  if (submitLabel) fieldProps["submitLabel"] = submitLabel;
+  const focus = own.focused !== void 0 ? readBinding(own.focused) : null;
+  if (focus) fieldProps["focused"] = focus[0];
+  return applyModifiers(
+    sb("textfield", fieldProps, {
+      text: (event) => setText(event.value),
+      submit: () => own.onSubmit?.(),
+      focus: (event) => focus?.[1](event.value)
+    }),
+    modifiers
+  );
+}
+function SecureField(props) {
+  return /* @__PURE__ */ jsx(TextField, { ...props, secure: true });
+}
+function ProgressView(props) {
+  const { own, modifiers } = splitProps(props);
+  if (own.value === void 0) {
+    return applyModifiers(
+      styled({ foreground: { hierarchical: 2 } }, styled({ font: { size: 20 } }, /* @__PURE__ */ jsx(Image$1, { systemName: "progress.indicator" }))),
+      modifiers
+    );
+  }
+  const label = own.label ?? own.children;
+  const children = [];
+  if (label !== void 0 && label !== null) children.push(/* @__PURE__ */ jsx(Fragment$1, { 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"));
+  }
+  return applyModifiers(
+    sb(
+      "gauge",
+      { value: own.value / (own.total ?? 1), style: "progress", hasLabel: true, hasCurrentValueLabel: true },
+      void 0,
+      children.length ? children : void 0
+    ),
+    modifiers
+  );
+}
+function ToolbarItem(props) {
+  return sb("toolbar", { placement: toolbarPlacement(props.placement) }, void 0, props.children);
+}
+const ToolbarItemGroup = ToolbarItem;
+function DatePicker(props) {
+  const { own, modifiers } = splitProps(props);
+  const environment = useViewEnvironment();
+  const [date, setDate] = readBinding(own.selection, own.onChange);
+  const labelsHidden = takeModifier(modifiers, "labelsHidden") ?? environment.labelsHidden ?? false;
+  const seconds = (value) => value ? Math.floor(value.getTime() / 1e3) : null;
+  const pickerProps = {
+    seconds: seconds(date) ?? 0,
+    components: own.displayedComponents ?? "date",
+    min: seconds(own.range?.[0]),
+    max: seconds(own.range?.[1])
+  };
+  if (labelsHidden) pickerProps["labelsHidden"] = true;
+  const label = labelsHidden || own.label === void 0 ? void 0 : /* @__PURE__ */ jsx(Text, { children: own.label });
+  return applyModifiers(sb("datepicker", pickerProps, { date: (event) => setDate(new Date(event.value * 1e3)) }, label), modifiers);
+}
+function TextEditor(props) {
+  const { own, modifiers } = splitProps(props);
+  const [text, setText] = readBinding(own.text, own.onChange);
+  const focus = own.focused !== void 0 ? readBinding(own.focused) : null;
+  const editor = { text };
+  if (focus) editor["focused"] = focus[0];
+  return applyModifiers(
+    sb("texteditor", editor, { text: (event) => setText(event.value), focus: (event) => focus?.[1](event.value) }),
+    modifiers
+  );
+}
+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) {
+  const { own, modifiers } = splitProps(props);
+  const [editing] = own.editing !== void 0 ? readBinding(own.editing) : [false];
+  const listProps = { style: own.listStyle ?? "insetGrouped" };
+  if (editing) listProps["editing"] = true;
+  let selection = null;
+  const split = useContext(SplitSelectionContext);
+  let selected = false;
+  let clearSelection = NO_CLEAR;
+  if (own.selection !== void 0) {
+    const [value, setValue] = readBinding(own.selection, own.onSelectionChange);
+    selected = value instanceof Set ? value.size > 0 : value !== null && value !== void 0;
+    clearSelection = () => setValue(value instanceof Set ? /* @__PURE__ */ new Set() : null);
+    selection = {
+      editing,
+      isSelected: (tag) => value instanceof Set ? value.has(tag) : value !== null && Object.is(value, tag),
+      select: (tag) => {
+        if (value instanceof Set) {
+          const next = new Set(value);
+          if (next.has(tag)) next.delete(tag);
+          else next.add(tag);
+          setValue(next);
+        } else {
+          setValue(editing && Object.is(value, tag) ? null : tag);
+        }
+      }
+    };
+  }
+  useReportSplitSelection(split, selected, clearSelection);
+  const refresh = useRefreshable(takeModifier(modifiers, "refreshable"));
+  Object.assign(listProps, refresh.props);
+  const element = /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: sb("list", listProps, refresh.handlers, wrapRows(own.children)) });
+  return applyModifiers(
+    selection ? /* @__PURE__ */ jsx(ListSelectionContext.Provider, { value: selection, children: element }) : element,
+    modifiers
+  );
+}
+function Form(props) {
+  return /* @__PURE__ */ jsx(List, { ...props });
+}
+function Section(props) {
+  const { own, modifiers } = splitProps(props);
+  const header = supplement(own.header);
+  const footer = supplement(own.footer);
+  const children = [];
+  if (header.view) children.push(sb("sectionheader", {}, void 0, header.view));
+  if (own.children !== void 0) children.push(wrapRows(own.children));
+  if (footer.view) children.push(sb("sectionfooter", {}, void 0, footer.view));
+  return applyModifiers(sb("section", { header: header.text, footer: footer.text }, void 0, children), modifiers);
+}
+function wrapRows(children) {
+  let offset = 0;
+  return flattenChildren(children, { keepLazy: true }).map((element, index) => {
+    const at = index + offset;
+    if (element.type === LazyGroup) {
+      const group = element.props;
+      offset += group.rows.length - 1;
+      return { ...withKey(element, index), props: { ...group, start: at, wrap: wrapRow } };
+    }
+    return wrapRow(withKey(element, index), at);
+  });
+}
+function wrapRow(element, containerIndex) {
+  if (element.type === Section) return element;
+  if (element.type === Row) return { ...element, props: { ...element.props, containerIndex } };
+  const props = element.props;
+  const tag = props.tag !== void 0 ? props.tag : element.type === NavigationLink ? props.value : void 0;
+  if (tag === void 0) return element;
+  return /* @__PURE__ */ jsx(Row, { tag, containerIndex, children: element }, element.key ?? containerIndex);
+}
+function withKey(element, index) {
+  return element.key !== null ? element : { ...element, key: String(index) };
+}
+function supplement(node) {
+  if (node === void 0 || node === null || node === false) return { text: null, view: null };
+  if (typeof node === "string" || typeof node === "number") return { text: String(node), view: null };
+  if (isValidElement(node) && node.type === Text) {
+    const props = node.props;
+    const only = Object.keys(props).every((key) => key === "children");
+    if (only) return { text: plainText(node), view: null };
+  }
+  return { text: null, view: isValidElement(node) ? node : null };
+}
+function TabView(props) {
+  const { own, modifiers } = splitProps(props);
+  const tabs = flattenChildren(own.children);
+  const tags = tabs.map((tab, index) => {
+    const tag = tab.props.tag;
+    return tag !== void 0 ? tag : index;
+  });
+  const [internal, setInternal] = useState(tags[0]);
+  const [selection, setSelection] = own.selection !== void 0 ? readBinding(own.selection, own.onChange) : [internal, setInternal];
+  const selected = Math.max(
+    0,
+    tags.findIndex((tag) => Object.is(tag, selection))
+  );
+  return applyModifiers(
+    sb("tabview", { selected }, { select: (event) => tags[event.value] !== void 0 && setSelection(tags[event.value]) }, tabs),
+    modifiers
+  );
+}
+function Tab(props) {
+  const { own, modifiers } = splitProps(props);
+  const badge = takeModifier(modifiers, "badge");
+  const tabProps = { title: own.title, systemImage: own.systemImage ?? null };
+  if (badge !== void 0 && badge !== null) tabProps["badge"] = String(badge);
+  if (own.role) tabProps["role"] = own.role;
+  return applyModifiers(sb("tab", tabProps, void 0, own.children), modifiers);
+}
+const STYLE_KEYS = ["r", "name", "named", "hierarchical", "linearGradient", "radialGradient", "angularGradient", "colorGradient", "material"];
+function strokeOf(value, inset) {
+  if (value === void 0) return null;
+  const isSpec = typeof value === "object" && value !== null && !STYLE_KEYS.some((key) => key in value);
+  const spec = isSpec ? value : { style: value };
+  const stroke = { color: shapeStyle(spec.style ?? "primary"), lineWidth: spec.lineWidth ?? 1 };
+  if (inset) stroke.inset = true;
+  if (spec.dash) stroke.dash = spec.dash;
+  if (spec.dashPhase !== void 0) stroke.dashPhase = spec.dashPhase;
+  if (spec.lineCap) stroke.lineCap = spec.lineCap;
+  if (spec.lineJoin) stroke.lineJoin = spec.lineJoin;
+  if (spec.miterLimit !== void 0) stroke.miterLimit = spec.miterLimit;
+  return stroke;
+}
+function shape(kind, cornerRadius, props) {
+  const { own, modifiers } = splitProps(props);
+  const shapeProps = {
+    shape: kind,
+    cornerRadius,
+    fill: own.fill !== void 0 ? shapeStyle(own.fill) : null,
+    stroke: strokeOf(own.strokeBorder, true) ?? strokeOf(own.stroke, false)
+  };
+  if (own.trim) shapeProps["trim"] = own.trim;
+  return applyModifiers(sb("shape", shapeProps), modifiers);
+}
+const ROUND = 9999;
+function Rectangle(props) {
+  return shape("rectangle", 0, props);
+}
+Rectangle.shape = { kind: "rectangle", cornerRadius: 0 };
+function RoundedRectangle(props) {
+  const { cornerRadius, ...rest } = props;
+  return shape("roundedRectangle", cornerRadius, rest);
+}
+RoundedRectangle.shape = { kind: "roundedRectangle", cornerRadius: null };
+function Circle(props) {
+  return shape("circle", ROUND, props);
+}
+Circle.shape = { kind: "circle", cornerRadius: ROUND };
+function Capsule(props) {
+  return shape("capsule", ROUND, props);
+}
+Capsule.shape = { kind: "capsule", cornerRadius: ROUND };
+function Ellipse(props) {
+  return shape("ellipse", ROUND, props);
+}
+Ellipse.shape = { kind: "ellipse", cornerRadius: ROUND };
+function ContainerRelativeShape(props) {
+  const { cornerRadius, ...rest } = props;
+  return shape("containerRelative", cornerRadius ?? 0, rest);
+}
+ContainerRelativeShape.shape = { kind: "containerRelative", cornerRadius: null };
+function Shape(props) {
+  const { own, modifiers } = splitProps(props);
+  const [size, setSize] = useState(null);
+  const shapeProps = {
+    shape: "path",
+    cornerRadius: 0,
+    fill: own.fill !== void 0 ? shapeStyle(own.fill) : null,
+    // A custom shape's border is its path stroked as is (the shim insets an InsettableShape first).
+    stroke: strokeOf(own.strokeBorder ?? own.stroke, false),
+    reportsSize: true,
+    path: size ? own.path({ x: 0, y: 0, width: size.width, height: size.height }).svg() : "",
+    size: size ?? { width: 0, height: 0 }
+  };
+  if (own.evenOdd) shapeProps["fillRule"] = "evenodd";
+  return applyModifiers(
+    sb("shape", shapeProps, {
+      geometry: (event) => {
+        if (!size || size.width !== event.width || size.height !== event.height) setSize({ width: event.width, height: event.height });
+      }
+    }),
+    modifiers
+  );
+}
+function UnevenRoundedRectangle(props) {
+  const { topLeadingRadius = 0, bottomLeadingRadius = 0, bottomTrailingRadius = 0, topTrailingRadius = 0, trim: _trim, ...rest } = props;
+  const path = (rect) => {
+    const clamp2 = (radius) => Math.max(0, Math.min(radius, rect.width / 2, rect.height / 2));
+    const tl = clamp2(topLeadingRadius);
+    const tr = clamp2(topTrailingRadius);
+    const br = clamp2(bottomTrailingRadius);
+    const bl = clamp2(bottomLeadingRadius);
+    const { width: w, height: h } = rect;
+    const p = new Path().move({ x: tl, y: 0 }).addLine({ x: w - tr, y: 0 });
+    if (tr) p.addArc({ x: w - tr, y: tr }, tr, -90, 0, false);
+    p.addLine({ x: w, y: h - br });
+    if (br) p.addArc({ x: w - br, y: h - br }, br, 0, 90, false);
+    p.addLine({ x: bl, y: h });
+    if (bl) p.addArc({ x: bl, y: h - bl }, bl, 90, 180, false);
+    p.addLine({ x: 0, y: tl });
+    if (tl) p.addArc({ x: tl, y: tl }, tl, 180, 270, false);
+    return p.closeSubpath();
+  };
+  return /* @__PURE__ */ jsx(Shape, { ...rest, path });
+}
+function ColorView(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("color", { color: color(own.color) }), modifiers);
+}
+const Color = Object.assign(ColorView, ColorValues);
+function Host(props) {
+  const { own, modifiers } = splitProps(props);
+  const key = useId();
+  const [content] = useState(() => {
+    if (typeof document === "undefined") return null;
+    const element = document.createElement("div");
+    element.className = "sb-host-content";
+    registerHostContent(key, element);
+    return element;
+  });
+  const bridge = useContextBridge(own.contexts);
+  const root = useRef(null);
+  const sizing = own.sizing ?? "content";
+  const style = sizing === "fill" ? { height: "100%", ...own.style } : own.style;
+  const tree = bridge(
+    /* @__PURE__ */ jsx("div", { className: own.className, style, children: own.children })
+  );
+  useLayoutEffect(() => {
+    if (!content) return;
+    root.current ??= createRoot(content);
+    const current = root.current;
+    queueMicrotask(() => {
+      if (root.current !== current) return;
+      flushSync(() => current.render(tree));
+      notifyHostContentChange(key);
+    });
+  });
+  useEffect(
+    () => () => {
+      const current = root.current;
+      root.current = null;
+      unregisterHostContent(key);
+      queueMicrotask(() => current?.unmount());
+    },
+    [key]
+  );
+  return applyModifiers(sb("host", { content: key, sizing }), modifiers);
+}
+const NO_INSETS = { top: 0, leading: 0, bottom: 0, trailing: 0 };
+function GeometryReader(props) {
+  const { own, modifiers } = splitProps(props);
+  const [reported, setReported] = useState({ size: { width: 0, height: 0 }, origin: null, safeArea: NO_INSETS });
+  const [needsFrame, setNeedsFrame] = useState(false);
+  const spaces = useCoordinateSpaces();
+  let readFrame = false;
+  const proxy = {
+    size: reported.size,
+    frame: (space = "local") => {
+      if (space === "local") return { x: 0, y: 0, ...reported.size };
+      readFrame = true;
+      const origin = reported.origin ?? { x: 0, y: 0 };
+      if (space === "global") return { ...origin, ...reported.size };
+      const named = spaces[space.named];
+      return { x: origin.x - (named?.x ?? 0), y: origin.y - (named?.y ?? 0), ...reported.size };
+    },
+    get safeAreaInsets() {
+      readFrame = true;
+      return reported.safeArea;
+    }
+  };
+  const content = own.children(proxy);
+  useEffect(() => {
+    if (readFrame && !needsFrame) setNeedsFrame(true);
+  });
+  return applyModifiers(
+    sb(
+      "geometry",
+      needsFrame ? { reportsFrame: true } : {},
+      {
+        geometry: (event) => {
+          const next = {
+            size: { width: event.width, height: event.height },
+            origin: event.x !== void 0 && event.y !== void 0 ? { x: event.x, y: event.y } : reported.origin,
+            safeArea: event.safeArea ?? reported.safeArea
+          };
+          if (JSON.stringify(next) !== JSON.stringify(reported)) setReported(next);
+        }
+      },
+      content
+    ),
+    modifiers
+  );
+}
+const DEFAULT_VIEW_SPACING = { distance: () => 8 };
+function subviewTraits(children) {
+  return flattenChildren(children).map((element) => {
+    const props = element.props;
+    return { priority: props.layoutPriority ?? 0, values: props.layoutValue ?? {} };
+  });
+}
+const fromDimension = (value) => value === "infinity" ? Infinity : value;
+const toDimension = (value) => Number.isFinite(value) ? Math.round(value * 100) / 100 : "infinity";
+const toSize = (size) => ({
+  width: fromDimension(size.width) ?? 0,
+  height: fromDimension(size.height) ?? 0
+});
+const GUIDES = ["leading", "horizontalCenter", "trailing", "top", "verticalCenter", "bottom", "firstTextBaseline", "lastTextBaseline"];
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function answerLayout(layout, record, traits = []) {
+  const frames = record.children.map(() => null);
+  const subviews = record.children.map((measurement, index) => {
+    const min = toSize(measurement.min);
+    const ideal = toSize(measurement.ideal);
+    const max = toSize(measurement.max);
+    const sizeThatFits = (proposal) => ({
+      width: proposal.width === null ? ideal.width : clamp(proposal.width, min.width, max.width),
+      height: proposal.height === null ? ideal.height : clamp(proposal.height, min.height, max.height)
+    });
+    return {
+      min,
+      ideal,
+      max,
+      priority: traits[index]?.priority ?? 0,
+      values: traits[index]?.values ?? {},
+      spacing: DEFAULT_VIEW_SPACING,
+      sizeThatFits,
+      place: ({ x, y, anchor, proposal }) => {
+        const size2 = sizeThatFits(proposal ?? { width: null, height: null });
+        const point = unitPoint(anchor ?? "topLeading");
+        frames[index] = { x: x - point.x * size2.width, y: y - point.y * size2.height, ...size2 };
+      }
+    };
+  });
+  const cache = layout.makeCache ? layout.makeCache(subviews) : void 0;
+  const measure = (proposal) => layout.sizeThatFits(proposal, subviews, cache);
+  const size = measure(record.proposal);
+  layout.placeSubviews({ x: 0, y: 0, ...size }, record.proposal, subviews, cache);
+  const placed = frames.map((frame2, index) => {
+    if (frame2) return frame2;
+    const own = subviews[index].sizeThatFits({ width: size.width, height: size.height });
+    return { x: (size.width - own.width) / 2, y: (size.height - own.height) / 2, ...own };
+  });
+  const guides = {};
+  if (layout.explicitAlignment) {
+    const bounds = { x: 0, y: 0, ...size };
+    for (const guide of GUIDES) {
+      const value = layout.explicitAlignment(guide, bounds, record.proposal, subviews, cache);
+      if (value !== null && value !== void 0 && Number.isFinite(value)) guides[guide] = value;
+    }
+  }
+  return {
+    size,
+    frames: placed,
+    guides,
+    sizes: {
+      min: measure({ width: 0, height: 0 }),
+      ideal: measure({ width: null, height: null }),
+      max: measure({ width: Infinity, height: Infinity })
+    }
+  };
+}
+function Layout(props) {
+  const { own, modifiers } = splitProps(props);
+  const [record, setRecord] = useState(null);
+  let layoutProps = { proposal: null, size: null, frames: null };
+  const guideModifiers = [];
+  if (record) {
+    const answer = answerLayout(own.layout, record, subviewTraits(own.children));
+    for (const [guide, value] of Object.entries(answer.guides)) guideModifiers.push(["alignmentGuide", { guide, value: () => value }]);
+    const encode = (size) => ({ width: toDimension(size.width), height: toDimension(size.height) });
+    const round = (value) => Math.round(value * 100) / 100;
+    layoutProps = {
+      proposal: {
+        width: record.proposal.width === null ? null : toDimension(record.proposal.width),
+        height: record.proposal.height === null ? null : toDimension(record.proposal.height)
+      },
+      size: { width: round(answer.size.width), height: round(answer.size.height) },
+      frames: answer.frames.map((frame2) => ({ x: round(frame2.x), y: round(frame2.y), width: round(frame2.width), height: round(frame2.height) })),
+      sizes: { min: encode(answer.sizes.min), ideal: encode(answer.sizes.ideal), max: encode(answer.sizes.max) }
+    };
+  }
+  return applyModifiers(
+    sb(
+      "layout",
+      layoutProps,
+      {
+        layout: (event) => {
+          const proposal = event.proposal;
+          setRecord({
+            proposal: { width: fromDimension(proposal.width), height: fromDimension(proposal.height) },
+            children: event.children
+          });
+        }
+      },
+      own.children
+    ),
+    [...guideModifiers, ...modifiers]
+  );
+}
+function Menu(props) {
+  const { own, modifiers } = splitProps(props);
+  const label = own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.label;
+  return applyModifiers(
+    sb("menu", {}, void 0, [
+      /* @__PURE__ */ jsx(Fragment$1, { children: sb("zstack", { alignment: "center" }, void 0, label) }, "label"),
+      /* @__PURE__ */ jsx(Fragment$1, { children: own.children }, "items")
+    ]),
+    modifiers
+  );
+}
+function EditButton(props) {
+  const { own, modifiers } = splitProps(props);
+  const [editing, setEditing] = readBinding(own.editMode, own.onChange);
+  return applyModifiers(/* @__PURE__ */ jsx(Button, { title: editing ? "Done" : "Edit", action: () => setEditing(!editing) }), modifiers);
+}
+const loaded = /* @__PURE__ */ new Map();
+function AsyncImage(props) {
+  const { own, modifiers } = splitProps(props);
+  const [state, setState] = useState(() => loaded.get(own.url) ?? null);
+  useEffect(() => {
+    const cached = loaded.get(own.url);
+    if (cached) {
+      setState(cached);
+      return;
+    }
+    if (typeof Image === "undefined") return;
+    let live = true;
+    const image = new Image();
+    image.onload = () => {
+      const result = { url: own.url, width: image.naturalWidth, height: image.naturalHeight };
+      loaded.set(own.url, result);
+      if (live) setState(result);
+    };
+    image.onerror = () => {
+      loaded.set(own.url, "failed");
+      if (live) setState("failed");
+    };
+    image.src = own.url;
+    return () => {
+      live = false;
+    };
+  }, [own.url]);
+  if (state === null) return own.placeholder ?? null;
+  if (state === "failed") return own.failure ?? own.placeholder ?? null;
+  return applyModifiers(
+    sb("image", { url: state.url, resizable: own.resizable ?? false, width: state.width, height: state.height }),
+    modifiers
+  );
+}
+function BarMark(_props) {
+  return null;
+}
+function LineMark(_props) {
+  return null;
+}
+function AreaMark(_props) {
+  return null;
+}
+function PointMark(_props) {
+  return null;
+}
+function RuleMark(_props) {
+  return null;
+}
+const PALETTE = ["blue", "green", "orange", "purple", "red", "teal", "yellow", "pink", "indigo", "mint", "cyan", "brown"];
+const SYMBOLS = ["circle", "square", "triangle", "diamond", "cross", "plus", "asterisk"];
+function declaredMarks(children) {
+  const kinds = /* @__PURE__ */ new Map([
+    [BarMark, "bar"],
+    [LineMark, "line"],
+    [AreaMark, "area"],
+    [PointMark, "point"],
+    [RuleMark, "rule"]
+  ]);
+  const result = [];
+  for (const element of flattenChildren(children)) {
+    const kind = kinds.get(element.type);
+    if (kind) result.push({ kind, props: element.props });
+  }
+  return result;
+}
+const asNumber = (value) => value instanceof Date ? value.getTime() : typeof value === "number" ? value : NaN;
+function bandScale(categories) {
+  const n = Math.max(categories.length, 1);
+  const index = new Map(categories.map((c, i) => [c, i]));
+  const center = (value) => ((index.get(String(value)) ?? 0) + 0.5) / n;
+  return {
+    kind: "band",
+    unit: center,
+    band: (value) => {
+      const i = index.get(String(value)) ?? 0;
+      return [i / n, (i + 1) / n];
+    },
+    ticks: categories.map((_, i) => (i + 0.5) / n),
+    gridLines: [],
+    labels: categories.map((text, i) => ({ at: (i + 0.5) / n, text })),
+    domain: [0, n]
+  };
+}
+function niceStep(span, desired = 5) {
+  if (!(span > 0)) return 1;
+  const raw = span / Math.max(desired - 1, 1);
+  const magnitude = 10 ** Math.floor(Math.log10(raw));
+  let best = magnitude;
+  for (const candidate of [1, 2, 2.5, 5, 10].map((m) => m * magnitude)) {
+    if (Math.abs(candidate - raw) <= Math.abs(best - raw)) best = candidate;
+  }
+  return best;
+}
+function decimalsOf(step) {
+  const text = step.toString();
+  const dot = text.indexOf(".");
+  return dot < 0 ? 0 : text.length - dot - 1;
+}
+function numberScale(values, options = {}) {
+  let min = Math.min(...values);
+  let max = Math.max(...values);
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    min = 0;
+    max = 1;
+  }
+  if (options.includesZero) {
+    min = Math.min(min, 0);
+    max = Math.max(max, 0);
+  }
+  if (min === max) {
+    if (min === 0) max = 1;
+    else {
+      min = Math.min(min, 0);
+      max = Math.max(max, 0);
+      if (min === max) max = min + 1;
+    }
+  }
+  const step = niceStep(max - min);
+  let lo;
+  let hi;
+  if (options.domain) [lo, hi] = options.domain;
+  else {
+    lo = Math.floor(min / step + 1e-9) * step;
+    hi = Math.ceil(max / step - 1e-9) * step;
+  }
+  const ticks = [];
+  const first = Math.ceil(lo / step - 1e-9) * step;
+  for (let value = first; value <= hi + 1e-9; value += step) ticks.push(Number(value.toFixed(10)));
+  const decimals = decimalsOf(step);
+  const unit = (value) => (asNumber(value) - lo) / (hi - lo || 1);
+  const format = new Intl.NumberFormat("en-US", { maximumFractionDigits: decimals });
+  return {
+    kind: "number",
+    unit,
+    band: (value) => [unit(value), unit(value)],
+    ticks: ticks.map(unit),
+    gridLines: ticks.map(unit),
+    labels: ticks.map((value) => ({ at: unit(value), text: format.format(value) })),
+    domain: [lo, hi]
+  };
+}
+const HOUR = 36e5;
+const DAY = 24 * HOUR;
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function timeTicks(min, max, desired = 8) {
+  const span = Math.max(max - min, 1);
+  const pick = (strides, unit) => strides.find((s) => span / (s * unit) <= desired + 1) ?? strides[strides.length - 1];
+  const ticks = [];
+  if (span <= 3 * DAY) {
+    const hours = pick([1, 3, 6, 12], HOUR);
+    const start = Math.floor(min / (hours * HOUR)) * hours * HOUR;
+    for (let t = start; t <= max; t += hours * HOUR) if (t >= min) ticks.push(t);
+    return {
+      ticks,
+      format: (ms) => {
+        const h = new Date(ms).getUTCHours();
+        const minute = new Date(ms).getUTCMinutes();
+        const suffix = h < 12 ? "AM" : "PM";
+        const hour12 = h % 12 === 0 ? 12 : h % 12;
+        return minute === 0 ? `${hour12} ${suffix}` : `${hour12}:${String(minute).padStart(2, "0")} ${suffix}`;
+      }
+    };
+  }
+  if (span <= 45 * DAY) {
+    const days = pick([1, 2, 7, 14], DAY);
+    const start = Math.floor(min / DAY) * DAY;
+    for (let t = start; t <= max; t += days * DAY) if (t >= min) ticks.push(t);
+    return { ticks, format: (ms) => `${MONTHS[new Date(ms).getUTCMonth()]} ${new Date(ms).getUTCDate()}` };
+  }
+  const months = span / (30.4 * DAY);
+  if (months <= 6 * (desired + 1)) {
+    const stride2 = pick([1, 2, 3, 6], 30.4 * DAY);
+    const first = new Date(min);
+    let year = first.getUTCFullYear();
+    let month = Math.floor(first.getUTCMonth() / stride2) * stride2;
+    for (; ; ) {
+      const t = Date.UTC(year, month, 1);
+      if (t > max) break;
+      if (t >= min) ticks.push(t);
+      month += stride2;
+      if (month >= 12) {
+        month -= 12;
+        year += 1;
+      }
+    }
+    const years = new Set(ticks.map((t) => new Date(t).getUTCFullYear()));
+    return {
+      ticks,
+      format: (ms) => {
+        const d = new Date(ms);
+        return years.size > 1 ? `${MONTHS[d.getUTCMonth()]} ${d.getUTCFullYear()}` : MONTHS[d.getUTCMonth()];
+      }
+    };
+  }
+  const stride = pick([1, 2, 5, 10], 365.25 * DAY);
+  const startYear = Math.floor(new Date(min).getUTCFullYear() / stride) * stride;
+  for (let year = startYear; ; year += stride) {
+    const t = Date.UTC(year, 0, 1);
+    if (t > max) break;
+    if (t >= min) ticks.push(t);
+  }
+  return { ticks, format: (ms) => String(new Date(ms).getUTCFullYear()) };
+}
+function timeScale(values, domain) {
+  let lo = domain ? asNumber(domain[0]) : Math.min(...values);
+  let hi = domain ? asNumber(domain[1]) : Math.max(...values);
+  if (!Number.isFinite(lo) || !Number.isFinite(hi)) {
+    lo = 0;
+    hi = DAY;
+  }
+  if (lo === hi) hi = lo + DAY;
+  const { ticks, format } = timeTicks(lo, hi);
+  const unit = (value) => (asNumber(value) - lo) / (hi - lo);
+  return {
+    kind: "time",
+    unit,
+    band: (value) => [unit(value), unit(value)],
+    ticks: ticks.map(unit),
+    gridLines: ticks.map(unit),
+    labels: ticks.map((t) => ({ at: unit(t), text: format(t), anchor: "leading" })),
+    domain: [lo, hi]
+  };
+}
+function scaleFor(values, options) {
+  const domain = options.domain;
+  if (domain && domain.length > 2) return bandScale([...domain]);
+  if (domain && domain.length === 2 && typeof domain[0] === "string") return bandScale([...domain]);
+  if (values.some((v) => typeof v === "string")) {
+    const categories = [];
+    for (const v of values) if (!categories.includes(String(v))) categories.push(String(v));
+    return bandScale(categories);
+  }
+  if (values.some((v) => v instanceof Date)) return timeScale(values.map(asNumber), domain);
+  return numberScale(values.map(asNumber), { includesZero: options.includesZero, domain });
+}
+function Chart(props) {
+  const { own, modifiers } = splitProps(props);
+  const marks = declaredMarks(own.children);
+  const series = [];
+  for (const mark of marks) {
+    const key = mark.props.foregroundStyleBy;
+    if (key !== void 0 && !series.includes(key)) series.push(key);
+  }
+  const styleOf = (mark) => {
+    if (mark.props.foregroundStyle !== void 0) return shapeStyle(mark.props.foregroundStyle);
+    const key = mark.props.foregroundStyleBy;
+    if (key !== void 0) return { name: PALETTE[series.indexOf(key) % PALETTE.length] };
+    return { name: "blue" };
+  };
+  const xValues = [];
+  const yValues = [];
+  for (const { kind, props: p } of marks) {
+    if (p.x !== void 0) xValues.push(p.x);
+    if (p.xStart !== void 0) xValues.push(p.xStart);
+    if (p.xEnd !== void 0) xValues.push(p.xEnd);
+    if (p.y !== void 0) yValues.push(p.y);
+    if (p.yStart !== void 0) yValues.push(p.yStart);
+    if (p.yEnd !== void 0) yValues.push(p.yEnd);
+    if (kind === "bar" || kind === "area") yValues.push(p.yStart ?? 0);
+  }
+  const xScale = scaleFor(xValues, { domain: own.xScale?.domain });
+  const yScale = scaleFor(yValues, { includesZero: own.yScale?.includesZero ?? true, domain: own.yScale?.domain });
+  const round = (n) => Math.round(n * 1e6) / 1e6;
+  const ux = (v) => round(xScale.unit(v));
+  const uy = (v) => round(1 - yScale.unit(v));
+  let continuousBand = 1;
+  if (xScale.kind !== "band") {
+    const centers = [...new Set(marks.filter((m) => m.kind === "bar").map((m) => ux(m.props.x)))].sort((a, b) => a - b);
+    for (let i = 1; i < centers.length; i++) continuousBand = Math.min(continuousBand, centers[i] - centers[i - 1]);
+  }
+  const encoded = [];
+  const items = [];
+  const annotate = (mark, rect) => {
+    const annotation = mark.props.annotation;
+    if (!annotation) return;
+    items.push(
+      /* @__PURE__ */ jsx(Fragment$1, { children: sb(
+        "chartitem",
+        {
+          role: "annotation",
+          ...rect,
+          position: annotation.position ?? "top",
+          alignment: annotation.alignment ?? "center",
+          spacing: annotation.spacing ?? 4
+        },
+        void 0,
+        annotation.content
+      ) }, items.length)
+    );
+  };
+  const common = (mark) => {
+    const base = { style: styleOf(mark) };
+    if (mark.props.opacity !== void 0) base.opacity = mark.props.opacity;
+    return base;
+  };
+  const groups = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    if (mark.kind !== "line" && mark.kind !== "area") continue;
+    const key = `${mark.kind}:${mark.props.series ?? mark.props.foregroundStyleBy ?? ""}`;
+    const group = groups.get(key);
+    if (group) group.push(mark);
+    else groups.set(key, [mark]);
+  }
+  const emittedGroups = /* @__PURE__ */ new Set();
+  for (const mark of marks) {
+    const p = mark.props;
+    switch (mark.kind) {
+      case "bar": {
+        const style = common(mark);
+        const [b0, b1] = xScale.kind === "band" ? xScale.band(p.x) : [ux(p.x) - continuousBand / 2, ux(p.x) + continuousBand / 2];
+        const center = round((b0 + b1) / 2);
+        const half = round((b1 - b0) * 0.8 / 2);
+        const top = uy(Math.max(asNumber(p.y), p.yStart ?? 0));
+        const bottom = uy(Math.min(asNumber(p.y), p.yStart ?? 0));
+        const rect = {
+          kind: "rect",
+          ...style,
+          x0: p.width !== void 0 ? center : round(center - half),
+          x1: p.width !== void 0 ? center : round(center + half),
+          y0: top,
+          y1: bottom,
+          cornerRadius: p.cornerRadius ?? 0,
+          fixedWidth: p.width ?? null
+        };
+        encoded.push(rect);
+        annotate(mark, { x0: rect.x0, x1: rect.x1, y0: top, y1: bottom });
+        break;
+      }
+      case "line":
+      case "area": {
+        const key = `${mark.kind}:${p.series ?? p.foregroundStyleBy ?? ""}`;
+        if (emittedGroups.has(key)) {
+          annotate(mark, { x0: ux(p.x), x1: ux(p.x), y0: uy(p.y), y1: uy(p.y) });
+          break;
+        }
+        emittedGroups.add(key);
+        const group = [...groups.get(key)].sort((a, b) => ux(a.props.x) - ux(b.props.x));
+        const first = group[0];
+        if (mark.kind === "line") {
+          const line = {
+            kind: "line",
+            ...common(first),
+            points: group.map((m) => ({ x: ux(m.props.x), y: uy(m.props.y) })),
+            lineWidth: first.props.lineWidth ?? 2,
+            interpolation: first.props.interpolation ?? "linear",
+            symbol: first.props.symbol ?? (first.props.foregroundStyleBy !== void 0 && marks.some((m) => m.props.symbol) ? SYMBOLS[series.indexOf(first.props.foregroundStyleBy) % SYMBOLS.length] : null),
+            symbolSize: first.props.symbolSize ?? 8
+          };
+          encoded.push(line);
+        } else {
+          const area = {
+            kind: "area",
+            ...common(first),
+            points: group.map((m) => ({
+              x: ux(m.props.x),
+              y0: uy(Math.max(m.props.y, m.props.yStart ?? 0)),
+              y1: uy(Math.min(m.props.y, m.props.yStart ?? 0))
+            })),
+            interpolation: first.props.interpolation ?? "linear"
+          };
+          encoded.push(area);
+        }
+        annotate(mark, { x0: ux(p.x), x1: ux(p.x), y0: uy(p.y), y1: uy(p.y) });
+        break;
+      }
+      case "point": {
+        const point = { kind: "point", ...common(mark), x: ux(p.x), y: uy(p.y), symbol: p.symbol ?? "circle", symbolSize: p.symbolSize ?? 8 };
+        encoded.push(point);
+        annotate(mark, { x0: point.x, x1: point.x, y0: point.y, y1: point.y });
+        break;
+      }
+      case "rule": {
+        const vertical = p.x !== void 0;
+        const rule = {
+          kind: "rule",
+          ...common(mark),
+          x0: vertical ? ux(p.x) : p.xStart !== void 0 ? ux(p.xStart) : 0,
+          x1: vertical ? ux(p.x) : p.xEnd !== void 0 ? ux(p.xEnd) : 1,
+          y0: vertical ? p.yEnd !== void 0 ? uy(p.yEnd) : 0 : uy(p.y ?? 0),
+          y1: vertical ? p.yStart !== void 0 ? uy(p.yStart) : 1 : uy(p.y ?? 0),
+          lineWidth: p.lineWidth ?? 1
+        };
+        encoded.push(rule);
+        annotate(mark, { x0: rule.x0, x1: rule.x1, y0: rule.y0, y1: rule.y1 });
+        break;
+      }
+    }
+  }
+  const axis = (scale, position, flipY) => {
+    const flip = (u) => round(flipY ? 1 - u : u);
+    return {
+      position,
+      gridLines: scale.gridLines.map(flip),
+      ticks: scale.ticks.map(flip),
+      labels: scale.labels.map((label) => ({ ...label, at: flip(label.at) }))
+    };
+  };
+  const chartProps = {
+    marks: encoded,
+    xAxis: own.xAxis === null ? null : axis(xScale, own.xAxis ?? "bottom", false),
+    yAxis: own.yAxis === null ? null : axis(yScale, own.yAxis ?? "trailing", true),
+    legend: own.legend === null || series.length === 0 ? null : {
+      position: own.legend ?? "top",
+      items: series.map((label, index) => ({ label, style: { name: PALETTE[index % PALETTE.length] }, symbol: null }))
+    }
+  };
+  return applyModifiers(sb("chart", chartProps, void 0, items.length ? items : void 0), modifiers);
+}
+function Gauge(props) {
+  const { own, modifiers } = splitProps(props);
+  const [min, max] = own.range ?? [0, 1];
+  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"));
+  return applyModifiers(
+    sb(
+      "gauge",
+      {
+        value: Math.min(1, Math.max(0, value)),
+        style: own.gaugeStyle ?? "automatic",
+        hasLabel: own.label !== void 0,
+        hasCurrentValueLabel: own.currentValueLabel !== void 0
+      },
+      void 0,
+      children.length ? children : void 0
+    ),
+    modifiers
+  );
+}
+function ViewThatFits(props) {
+  const { own, modifiers } = splitProps(props);
+  return applyModifiers(sb("viewthatfits", { axes: own.axes ?? "both" }, void 0, own.children), modifiers);
+}
+function LazyVStack(props) {
+  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: /* @__PURE__ */ jsx(VStack, { ...props }) });
+}
+function LazyHStack(props) {
+  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "horizontal", children: /* @__PURE__ */ jsx(HStack, { ...props }) });
+}
+function ContentUnavailableView(props) {
+  const { own, modifiers } = splitProps(props);
+  const title = typeof own.title === "string" ? /* @__PURE__ */ jsx(Text, { children: own.title }) : own.title;
+  const description = typeof own.description === "string" ? /* @__PURE__ */ jsx(Text, { children: own.description }) : own.description;
+  return applyModifiers(
+    /* @__PURE__ */ jsxs(VStack, { spacing: 16, padding: ["horizontal", 32], frame: { maxWidth: Infinity, maxHeight: Infinity }, children: [
+      /* @__PURE__ */ jsxs(VStack, { spacing: 8, children: [
+        /* @__PURE__ */ jsxs(VStack, { spacing: 12, children: [
+          own.systemImage !== void 0 && /* @__PURE__ */ jsx(Image$1, { systemName: own.systemImage, font: { size: 48 }, foregroundStyle: "secondary" }),
+          styled({ multilineTextAlignment: "center" }, styled({ font: { textStyle: "title2", weight: "bold" } }, title))
+        ] }),
+        description !== void 0 && styled({ multilineTextAlignment: "center" }, styled({ foreground: { hierarchical: 2 } }, styled({ font: { textStyle: "callout" } }, description)))
+      ] }),
+      own.actions
+    ] }),
+    modifiers
+  );
+}
+ContentUnavailableView.search = (text) => /* @__PURE__ */ jsx(
+  ContentUnavailableView,
+  {
+    title: text ? `No Results for “${text}”` : "No Results",
+    systemImage: "magnifyingglass",
+    description: "Check the spelling or try a new search."
+  }
+);
+function GroupBox(props) {
+  const { own, modifiers } = splitProps(props);
+  const label = typeof own.label === "string" ? /* @__PURE__ */ jsx(Text, { children: own.label }) : own.label;
+  return applyModifiers(
+    /* @__PURE__ */ jsxs(
+      VStack,
+      {
+        alignment: "leading",
+        spacing: 8,
+        padding: 16,
+        background: { fill: "secondarySystemBackground", in: /* @__PURE__ */ jsx(RoundedRectangle, { cornerRadius: 8 }) },
+        children: [
+          label !== void 0 && styled({ font: { textStyle: "headline" } }, label),
+          own.children
+        ]
+      }
+    ),
+    modifiers
+  );
+}
+function ControlGroup(props) {
+  const { own, modifiers } = splitProps(props);
+  return modifiers.length ? applyModifiers(/* @__PURE__ */ jsx(Fragment, { children: own.children }), modifiers) : own.children;
+}
+function DisclosureGroup(props) {
+  const { own, modifiers } = splitProps(props);
+  const [internal, setInternal] = useState(false);
+  const [expanded, setExpanded] = own.isExpanded !== void 0 ? readBinding(own.isExpanded, own.onExpandedChange) : [internal, setInternal];
+  const label = typeof own.label === "string" ? /* @__PURE__ */ jsx(Text, { children: own.label }) : own.label;
+  const toggle = () => withAnimation({ type: "easeInOut", duration: 0.25 }, () => setExpanded(!expanded));
+  return applyModifiers(
+    /* @__PURE__ */ jsxs(VStack, { alignment: "leading", spacing: 0, children: [
+      /* @__PURE__ */ jsx(Button, { action: toggle, buttonStyle: "plain", children: /* @__PURE__ */ jsxs(HStack, { children: [
+        styled({ foreground: { hierarchical: 1 } }, label),
+        /* @__PURE__ */ jsx(Spacer, {}),
+        /* @__PURE__ */ jsx(
+          Image$1,
+          {
+            systemName: "chevron.right",
+            font: { textStyle: "footnote", weight: "semibold" },
+            foregroundStyle: "tint",
+            rotationEffect: expanded ? 90 : 0
+          }
+        )
+      ] }) }),
+      expanded && /* @__PURE__ */ jsx(VStack, { alignment: "leading", spacing: 8, padding: ["top", 8], transition: { kind: "opacity" }, children: own.children })
+    ] }),
+    modifiers
+  );
+}
+const COLUMN_SPACING = 12;
+function cell(column, content) {
+  if (column.width !== void 0) return styled({ layoutPriority: 0 }, styled({ frame: { width: column.width, alignment: "leading" } }, content));
+  return styled(
+    { layoutPriority: 0 },
+    styled({ frame: { minWidth: column.minWidth ?? 0, maxWidth: column.maxWidth ?? "infinity", alignment: "leading" } }, content)
+  );
+}
+function cellContent(column, row) {
+  if (typeof column.content === "function") return column.content(row);
+  return /* @__PURE__ */ jsx(Text, { children: String(row[column.content] ?? "") });
+}
+function Table(props) {
+  const { own, modifiers } = splitProps(props);
+  const compact = useHorizontalSizeClass() !== "regular";
+  const sort = own.sortOrder !== void 0 ? readBinding(own.sortOrder) : null;
+  const keyOf2 = (row2, index) => {
+    if (own.id) return own.id(row2, index);
+    const id = row2.id;
+    return typeof id === "string" || typeof id === "number" ? id : index;
+  };
+  const row = (value) => {
+    const first = own.columns[0];
+    if (!first) return null;
+    if (compact) return cellContent(first, value);
+    return /* @__PURE__ */ jsx(HStack, { spacing: COLUMN_SPACING, children: own.columns.map((column, index) => /* @__PURE__ */ jsx(ColumnCell, { children: cell(column, cellContent(column, value)) }, index)) });
+  };
+  const title = (column) => {
+    if (!sort || column.sortKey === void 0) return /* @__PURE__ */ jsx(Text, { children: column.title });
+    const [order, setOrder] = sort;
+    const current = order[0]?.key === column.sortKey ? order[0] : null;
+    const tap = () => {
+      const rest = order.filter((descriptor) => descriptor.key !== column.sortKey);
+      setOrder([{ key: column.sortKey, ascending: current ? !current.ascending : true }, ...rest]);
+    };
+    return /* @__PURE__ */ jsx(Button, { action: tap, buttonStyle: "plain", children: /* @__PURE__ */ jsxs(HStack, { spacing: 4, children: [
+      /* @__PURE__ */ jsx(Text, { children: column.title }),
+      current && /* @__PURE__ */ jsx(Image$1, { systemName: current.ascending ? "chevron.up" : "chevron.down", font: { textStyle: "caption2", weight: "bold" } })
+    ] }) });
+  };
+  const list = /* @__PURE__ */ jsx(List, { selection: own.selection, onSelectionChange: own.onSelectionChange, children: /* @__PURE__ */ jsx(ForEach, { data: own.data, id: keyOf2, children: (value, index) => /* @__PURE__ */ jsx(TableRow, { tag: keyOf2(value, index), children: row(value) }) }) });
+  if (compact) return applyModifiers(list, modifiers);
+  return applyModifiers(
+    /* @__PURE__ */ jsxs(VStack, { spacing: 0, children: [
+      /* @__PURE__ */ jsx(
+        HStack,
+        {
+          spacing: COLUMN_SPACING,
+          font: { textStyle: "subheadline", weight: "semibold" },
+          foregroundStyle: "secondary",
+          padding: ["horizontal", 20],
+          modifiers: [{ padding: ["vertical", 8] }],
+          children: own.columns.map((column, index) => /* @__PURE__ */ jsx(ColumnCell, { children: cell(column, title(column)) }, index))
+        }
+      ),
+      list
+    ] }),
+    modifiers
+  );
+}
+function ColumnCell({ children }) {
+  return children;
+}
+function TableRow({ children }) {
+  return children;
+}
+const hexOf = (c) => "#" + [c.r, c.g, c.b].map((v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")).join("");
+function ColorPicker(props) {
+  const { own, modifiers } = splitProps(props);
+  const [selection, setSelection] = readBinding(own.selection, own.onChange);
+  const label = own.label ?? (own.title !== void 0 ? /* @__PURE__ */ jsx(Text, { children: own.title }) : null);
+  const pick = () => {
+    chooseColor(hexOf(selection)).then((chosen) => {
+      if (chosen) setSelection({ ...Color.hex(chosen), a: selection.a });
+    }).catch((error) => console.error(error));
+  };
+  return applyModifiers(
+    /* @__PURE__ */ jsx(Button, { action: pick, buttonStyle: "plain", children: /* @__PURE__ */ jsxs(HStack, { children: [
+      label,
+      /* @__PURE__ */ jsx(Spacer, {}),
+      /* @__PURE__ */ jsx(
+        Circle,
+        {
+          fill: selection,
+          frame: { width: 28, height: 28 },
+          overlay: /* @__PURE__ */ jsx(Circle, { strokeBorder: { style: Color.opacity("secondary", 0.3), lineWidth: 1 } })
+        }
+      )
+    ] }) }),
+    modifiers
+  );
+}
+function ShareLink(props) {
+  const { own, modifiers } = splitProps(props);
+  const share = () => {
+    const isURL = own.item instanceof URL || /^[a-z][a-z0-9+.-]*:\/\//i.test(own.item);
+    const params = {};
+    if (own.subject) params["title"] = own.subject;
+    if (isURL) params["url"] = String(own.item);
+    const text = [own.message, isURL ? null : String(own.item)].filter(Boolean).join("\n");
+    if (text) params["text"] = text;
+    performHostRequest({ op: "request", id: 0, kind: "share", params }, browserEnvironment).catch((error) => console.error(error));
+  };
+  return applyModifiers(
+    /* @__PURE__ */ jsx(Button, { action: share, children: own.children ?? /* @__PURE__ */ jsx(Label, { title: own.title ?? "Share", systemImage: "square.and.arrow.up" }) }),
+    modifiers
+  );
+}
+const IDENTITY = [1, 0, 0, 1, 0, 0];
+function multiply(m, n) {
+  const [a, b, c, d, tx, ty] = m;
+  const [a2, b2, c2, d2, tx2, ty2] = n;
+  return [a2 * a + b2 * c, a2 * b + b2 * d, c2 * a + d2 * c, c2 * b + d2 * d, tx2 * a + ty2 * c + tx, tx2 * b + ty2 * d + ty];
+}
+function stops(spec) {
+  if (spec.stops) return spec.stops.map((s) => ({ color: color(s.color), location: s.location }));
+  const colors = spec.colors ?? [];
+  const last = Math.max(colors.length - 1, 1);
+  return colors.map((c, i) => ({ color: color(c), location: i / last }));
+}
+const LABEL_COLORS = {
+  primary: { name: "primary" },
+  secondary: { name: "secondary" },
+  tertiary: { name: "tertiaryLabel" },
+  quaternary: { name: "quaternaryLabel" }
+};
+function shading(value) {
+  if (typeof value === "string" && value in LABEL_COLORS) return LABEL_COLORS[value];
+  if (typeof value === "object" && value !== null) {
+    if ("linearGradient" in value) {
+      const g = value.linearGradient;
+      if (isCanvasGradient(g)) return { canvasLinearGradient: { stops: stops(g), start: g.start, end: g.end } };
+    }
+    if ("radialGradient" in value) {
+      const g = value.radialGradient;
+      if (isCanvasGradient(g)) return { canvasRadialGradient: { stops: stops(g), center: g.center, startRadius: g.startRadius, endRadius: g.endRadius } };
+    }
+  }
+  return shapeStyle(value);
+}
+function isCanvasGradient(g) {
+  if (Array.isArray(g.colors)) return true;
+  return Array.isArray(g.stops) && g.stops.some((s) => typeof s.color === "string");
+}
+class GraphicsContext {
+  constructor(size) {
+    this.size = size;
+  }
+  size;
+  commands = [];
+  symbolDraws = [];
+  symbolIds = /* @__PURE__ */ new Set();
+  /** @internal The ids `symbols` gave the canvas. */
+  setSymbols(ids) {
+    this.symbolIds = new Set(ids);
+  }
+  /** `resolveSymbol(id:)`: the view the canvas was given under `id`, or null. */
+  resolveSymbol(id) {
+    return this.symbolIds.has(id) ? { symbol: id } : null;
+  }
+  /**
+   * `draw(symbol, at:)`: the symbol's view centered on the point. Symbols are
+   * views laid over the drawing, so they draw above its other commands.
+   */
+  drawSymbol(symbol, at) {
+    const [a, b, c, d, tx, ty] = this.state.transform;
+    const scaleX = Math.hypot(a, b);
+    const scaleY = scaleX > 0 ? (a * d - b * c) / scaleX : Math.hypot(c, d);
+    this.symbolDraws.push({
+      id: symbol.symbol,
+      x: a * at.x + c * at.y + tx,
+      y: b * at.x + d * at.y + ty,
+      rotation: Math.atan2(b, a) * 180 / Math.PI,
+      scale: { x: scaleX, y: scaleY },
+      opacity: this.state.opacity
+    });
+    return this;
+  }
+  state = { transform: IDENTITY, opacity: 1, blendMode: void 0, clips: [], filters: [] };
+  get opacity() {
+    return this.state.opacity;
+  }
+  set opacity(value) {
+    this.state.opacity = value;
+  }
+  get blendMode() {
+    return this.state.blendMode;
+  }
+  set blendMode(value) {
+    this.state.blendMode = value;
+  }
+  translateBy(x, y) {
+    this.state.transform = multiply(this.state.transform, [1, 0, 0, 1, x, y]);
+    return this;
+  }
+  scaleBy(x, y = x) {
+    this.state.transform = multiply(this.state.transform, [x, 0, 0, y, 0, 0]);
+    return this;
+  }
+  /** Degrees, clockwise on screen. */
+  rotate(degrees) {
+    const r2 = degrees * Math.PI / 180;
+    this.state.transform = multiply(this.state.transform, [Math.cos(r2), Math.sin(r2), -Math.sin(r2), Math.cos(r2), 0, 0]);
+    return this;
+  }
+  concatenate(matrix) {
+    this.state.transform = multiply(this.state.transform, matrix);
+    return this;
+  }
+  clip(to) {
+    this.state.clips = [...this.state.clips, to.svg()];
+    return this;
+  }
+  addFilter(filter) {
+    this.state.filters = [...this.state.filters, filter];
+    return this;
+  }
+  /** `drawLayer { }`: draws with a copy of the state, restored after. */
+  drawLayer(body) {
+    const saved = { ...this.state, clips: [...this.state.clips], filters: [...this.state.filters] };
+    body(this);
+    this.state = saved;
+    return this;
+  }
+  fill(path, with_, options = {}) {
+    this.push({ op: "fill", path: path.svg(), shading: shading(with_), ...options.eoFill ? { evenOdd: true } : {} });
+    return this;
+  }
+  stroke(path, with_, options = {}) {
+    const o = typeof options === "number" ? { lineWidth: options } : options;
+    const command = { op: "stroke", path: path.svg(), shading: shading(with_), lineWidth: o.lineWidth ?? 1 };
+    if (o.lineCap) command.lineCap = o.lineCap;
+    if (o.lineJoin) command.lineJoin = o.lineJoin;
+    if (o.miterLimit !== void 0) command.miterLimit = o.miterLimit;
+    if (o.dash) command.dash = o.dash;
+    if (o.dashPhase !== void 0) command.dashPhase = o.dashPhase;
+    this.push(command);
+    return this;
+  }
+  /** `draw(Text(...), at:anchor:)` */
+  drawText(text, at, options = {}) {
+    const command = {
+      op: "text",
+      text,
+      x: at.x,
+      y: at.y,
+      anchor: unitPoint(options.anchor ?? "center"),
+      shading: shading(options.color ?? "primary")
+    };
+    if (options.font !== void 0) command.font = font(options.font);
+    this.push(command);
+    return this;
+  }
+  /** `draw(Image(...), at:anchor:)` or `draw(_:in:)` with `size`. */
+  drawImage(image, at, options = {}) {
+    const props = "url" in image ? { ...image, resizable: true } : "name" in image ? { name: image.name, resizable: true } : image;
+    const command = {
+      op: "image",
+      image: props,
+      x: at.x,
+      y: at.y,
+      anchor: unitPoint(options.anchor ?? (options.size ? "topLeading" : "center")),
+      ...options.size ? { width: options.size.width, height: options.size.height } : {},
+      ...options.color !== void 0 ? { shading: shading(options.color) } : {}
+    };
+    this.push(command);
+    return this;
+  }
+  push(command) {
+    const state = {};
+    if (this.state.transform.some((v, i) => v !== IDENTITY[i])) state.transform = this.state.transform.map((v) => Math.round(v * 1e4) / 1e4);
+    if (this.state.opacity !== 1) state.opacity = this.state.opacity;
+    if (this.state.blendMode) state.blendMode = this.state.blendMode;
+    if (this.state.clips.length) state.clips = [...this.state.clips];
+    if (this.state.filters.length) state.filters = [...this.state.filters];
+    this.commands.push({ ...state, ...command });
+  }
+}
+function Canvas(props) {
+  const { own, modifiers } = splitProps(props);
+  const [size, setSize] = useState(null);
+  let canvas = null;
+  let draws = [];
+  if (size) {
+    const context = new GraphicsContext(size);
+    if (own.symbols) context.setSymbols(Object.keys(own.symbols));
+    own.renderer(context, size);
+    canvas = sb("canvas", { width: size.width, height: size.height, commands: context.commands });
+    draws = context.symbolDraws;
+  }
+  const reader = sb(
+    "geometry",
+    {},
+    {
+      geometry: (event) => {
+        if (!size || size.width !== event.width || size.height !== event.height) setSize({ width: event.width, height: event.height });
+      }
+    },
+    canvas
+  );
+  if (!own.symbols) return applyModifiers(reader, modifiers);
+  const symbols = draws.map((draw, index) => {
+    let view = own.symbols[draw.id];
+    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 applyModifiers(
+    sb("zstack", { alignment: "topLeading" }, void 0, [/* @__PURE__ */ jsx(Fragment$1, { children: reader }, "canvas"), ...symbols]),
+    modifiers
+  );
+}
+function TimelineView({ schedule, children }) {
+  const [date, setDate] = useState(() => /* @__PURE__ */ new Date());
+  const key = typeof schedule === "string" ? schedule : JSON.stringify(schedule);
+  useEffect(() => {
+    if (schedule === "everyMinute") {
+      let interval;
+      const timeout = setTimeout(() => {
+        setDate(/* @__PURE__ */ new Date());
+        interval = setInterval(() => setDate(/* @__PURE__ */ new Date()), 6e4);
+      }, 6e4 - Date.now() % 6e4);
+      return () => {
+        clearTimeout(timeout);
+        if (interval) clearInterval(interval);
+      };
+    }
+    if (typeof schedule === "object" && "periodic" in schedule) {
+      const every = Math.max(schedule.periodic.by, 0.01) * 1e3;
+      const from = schedule.periodic.from?.getTime() ?? Date.now();
+      let timer;
+      const tick = () => {
+        const now = Date.now();
+        const next = from + Math.ceil((now - from + 1) / every) * every;
+        timer = setTimeout(() => {
+          setDate(new Date(next));
+          tick();
+        }, Math.max(0, next - now));
+      };
+      tick();
+      return () => clearTimeout(timer);
+    }
+    const options = typeof schedule === "object" ? schedule.animation : {};
+    if (options.paused) return;
+    const minimum = (options.minimumInterval ?? 1 / 20) * 1e3;
+    let last = 0;
+    let frame2 = 0;
+    const loop = (time) => {
+      if (time - last >= minimum) {
+        last = time;
+        setDate(/* @__PURE__ */ new Date());
+      }
+      frame2 = requestAnimationFrame(loop);
+    };
+    frame2 = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(frame2);
+  }, [key]);
+  return children({ date });
+}
+class AVPlayer {
+  state;
+  listeners = /* @__PURE__ */ new Set();
+  timeListeners = /* @__PURE__ */ new Set();
+  time = 0;
+  serial = 0;
+  constructor(url = null, options = {}) {
+    this.state = {
+      url,
+      rate: 0,
+      muted: false,
+      volume: 1,
+      loop: options.loop ?? false,
+      seek: { time: 0, serial: 0 },
+      duration: null,
+      size: null,
+      status: "paused",
+      failed: null
+    };
+  }
+  get url() {
+    return this.state.url;
+  }
+  get rate() {
+    return this.state.rate;
+  }
+  get isPlaying() {
+    return this.state.rate > 0;
+  }
+  get isMuted() {
+    return this.state.muted;
+  }
+  get volume() {
+    return this.state.volume;
+  }
+  get duration() {
+    return this.state.duration;
+  }
+  get presentationSize() {
+    return this.state.size;
+  }
+  get timeControlStatus() {
+    return this.state.status;
+  }
+  get error() {
+    return this.state.failed;
+  }
+  get currentTime() {
+    return this.time;
+  }
+  /** @internal */
+  get snapshot() {
+    return this.state;
+  }
+  play() {
+    this.update({ rate: 1 });
+  }
+  pause() {
+    this.update({ rate: 0 });
+  }
+  seek(time) {
+    this.time = time;
+    this.update({ seek: { time, serial: ++this.serial } });
+  }
+  replaceCurrentItem(url) {
+    this.time = 0;
+    this.update({ url, duration: null, size: null, failed: null, seek: { time: 0, serial: ++this.serial } });
+  }
+  set isMuted(muted) {
+    this.update({ muted });
+  }
+  set volume(volume) {
+    this.update({ volume: Math.min(1, Math.max(0, volume)) });
+  }
+  set rate(rate) {
+    this.update({ rate });
+  }
+  set loop(loop) {
+    this.update({ loop });
+  }
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  /** `addPeriodicTimeObserver`: told the position as the page reports it. */
+  onTime(listener) {
+    this.timeListeners.add(listener);
+    return () => this.timeListeners.delete(listener);
+  }
+  /** @internal The page's report for a view showing this player. */
+  handle(event) {
+    if (event.time !== void 0) {
+      this.time = event.time;
+      for (const listener of this.timeListeners) listener(event.time);
+    }
+    switch (event.event) {
+      case "ready":
+        this.update({
+          duration: event.duration ?? null,
+          size: event.width && event.height ? { width: event.width, height: event.height } : this.state.size
+        });
+        break;
+      case "status":
+        if (event.status) this.update({ status: event.status });
+        break;
+      case "play":
+        if (this.state.rate === 0) this.update({ rate: 1 });
+        break;
+      case "pause":
+        if (this.state.rate !== 0) this.update({ rate: 0 });
+        break;
+      case "volume":
+        this.update({ muted: event.muted ?? this.state.muted, volume: event.volume ?? this.state.volume });
+        break;
+      case "rate":
+        if (event.rate !== void 0) this.update({ rate: event.rate });
+        break;
+      case "ended":
+        if (!this.state.loop) this.update({ rate: 0 });
+        break;
+      case "error":
+        this.update({ failed: event.message ?? "error", rate: 0 });
+        break;
+    }
+  }
+  update(changes) {
+    this.state = { ...this.state, ...changes };
+    for (const listener of this.listeners) listener();
+  }
+}
+function useAVPlayer(url = null, options = {}) {
+  const ref = useRef(null);
+  ref.current ??= new AVPlayer(url, options);
+  const player = ref.current;
+  useSyncExternalStore(player.subscribe, () => player.snapshot, () => player.snapshot);
+  useEffect(() => {
+    if (player.url !== url) player.replaceCurrentItem(url);
+  }, [player, url]);
+  return player;
+}
+function VideoPlayer(props) {
+  const { own, modifiers } = splitProps(props);
+  const player = own.player;
+  const state = useSyncExternalStore(
+    player?.subscribe ?? NO_SUBSCRIBE,
+    () => player?.snapshot ?? null,
+    () => player?.snapshot ?? null
+  );
+  if (!player || !state || !state.url) return applyModifiers(sb("color", { color: { r: 0, g: 0, b: 0, a: 1 } }), modifiers);
+  const video = sb(
+    "video",
+    {
+      url: state.url,
+      playing: state.rate > 0 && !state.failed,
+      muted: state.muted,
+      volume: state.volume,
+      rate: state.rate > 0 ? state.rate : 1,
+      loop: state.loop,
+      gravity: own.gravity ?? "resizeAspect",
+      controls: own.controls ?? true,
+      seek: state.seek,
+      ...state.size ? { width: state.size.width, height: state.size.height } : {}
+    },
+    { video: (event) => player.handle(event) }
+  );
+  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")]),
+    modifiers
+  );
+}
+const NO_SUBSCRIBE = () => () => {
+};
+function PhaseAnimator({ phases, trigger, animation, children }) {
+  const [index, setIndex] = useState(0);
+  const hasTrigger = trigger !== void 0;
+  const latest = useRef({ phases, animation });
+  latest.current = { phases, animation };
+  const first = useRef(true);
+  useEffect(() => {
+    if (hasTrigger && first.current) {
+      first.current = false;
+      return;
+    }
+    first.current = false;
+    let cancelled = false;
+    let timer;
+    let step = 0;
+    const count = latest.current.phases.length;
+    if (count < 2) return;
+    const advance = () => {
+      if (cancelled) return;
+      step += 1;
+      const next = step % count;
+      const { phases: current, animation: animationFor } = latest.current;
+      const into = animationFor?.(current[next]) ?? { type: "default" };
+      withAnimation(into, () => setIndex(next));
+      if (hasTrigger && next === 0) return;
+      const timing = timingFor(into);
+      timer = setTimeout(advance, timing.duration + timing.delay);
+    };
+    timer = setTimeout(advance, 0);
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [hasTrigger, trigger]);
+  return children(phases[index % Math.max(phases.length, 1)]);
+}
+function ease(curve, t) {
+  switch (curve) {
+    case "move":
+      return 1;
+    case "cubic":
+      return t * t * (3 - 2 * t);
+    case "spring": {
+      const omega = 7;
+      return 1 - (1 + omega * t) * Math.exp(-omega * t);
+    }
+    default:
+      return t;
+  }
+}
+function keyframeValues(initial, tracks, elapsed) {
+  const value = { ...initial };
+  for (const key of Object.keys(tracks)) {
+    const frames = tracks[key] ?? [];
+    let from = initial[key];
+    let start = 0;
+    let current = from;
+    for (const frame2 of frames) {
+      const end = start + frame2.duration;
+      if (elapsed >= end) {
+        current = frame2.to;
+      } else {
+        const t = frame2.duration > 0 ? Math.max(0, (elapsed - start) / frame2.duration) : 1;
+        current = from + (frame2.to - from) * ease(frame2.curve ?? "spring", t);
+        break;
+      }
+      from = frame2.to;
+      start = end;
+    }
+    value[key] = current;
+  }
+  return value;
+}
+function totalDuration(tracks) {
+  return Math.max(0, ...Object.values(tracks).map((frames) => (frames ?? []).reduce((sum, frame2) => sum + frame2.duration, 0)));
+}
+function KeyframeAnimator({
+  initialValue,
+  keyframes,
+  trigger,
+  repeating,
+  children
+}) {
+  const [value, setValue] = useState(initialValue);
+  const latest = useRef({ initialValue, keyframes });
+  latest.current = { initialValue, keyframes };
+  const first = useRef(true);
+  const hasTrigger = trigger !== void 0;
+  useEffect(() => {
+    if (hasTrigger && first.current) {
+      first.current = false;
+      return;
+    }
+    first.current = false;
+    if (!hasTrigger && !repeating) return;
+    let frame2 = 0;
+    let start = null;
+    const tick = (now) => {
+      start ??= now;
+      const { initialValue: initial, keyframes: tracks } = latest.current;
+      const total = totalDuration(tracks);
+      let elapsed = (now - start) / 1e3;
+      if (!hasTrigger && repeating && total > 0) elapsed %= total;
+      setValue(keyframeValues(initial, tracks, elapsed));
+      if (hasTrigger && elapsed >= total) return;
+      frame2 = requestAnimationFrame(tick);
+    };
+    frame2 = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame2);
+  }, [hasTrigger, trigger, repeating]);
+  return children(value);
+}
+export {
+  AVPlayer,
+  AngularGradient,
+  AreaMark,
+  AsyncImage,
+  BarMark,
+  Button,
+  Canvas,
+  Capsule,
+  Chart,
+  Circle,
+  Color,
+  ColorPicker,
+  ColorValues,
+  ContainerRelativeShape,
+  ContentUnavailableView,
+  ControlGroup,
+  DEFAULT_PADDING,
+  DEFAULT_VIEW_SPACING,
+  DatePicker,
+  DisclosureGroup,
+  Divider,
+  EditButton,
+  Ellipse,
+  Font,
+  ForEach,
+  Form,
+  Gauge,
+  GeometryReader,
+  GraphicsContext,
+  Grid,
+  GridItem,
+  GridRow,
+  Group,
+  GroupBox,
+  HStack,
+  Host,
+  Image$1 as Image,
+  KeyframeAnimator,
+  Label,
+  LabeledContent,
+  Layout,
+  LazyHStack,
+  LazyVGrid,
+  LazyVStack,
+  LineMark,
+  LinearGradient,
+  Link,
+  List,
+  Menu,
+  NavigationLink,
+  NavigationSplitView,
+  NavigationStack,
+  Path,
+  PhaseAnimator,
+  Picker,
+  PointMark,
+  ProgressView,
+  RadialGradient,
+  Rectangle,
+  RoundedRectangle,
+  Row,
+  RuleMark,
+  ScrollView,
+  ScrollViewReader,
+  Section,
+  SecureField,
+  Shape,
+  ShareLink,
+  Slider,
+  Spacer,
+  SplitSelectionContext,
+  Stepper,
+  SwiftUIView,
+  Tab,
+  TabView,
+  Table,
+  Text,
+  TextEditor,
+  TextField,
+  TimelineView,
+  Toggle,
+  ToolbarItem,
+  ToolbarItemGroup,
+  UnevenRoundedRectangle,
+  VStack,
+  VideoPlayer,
+  ViewThatFits,
+  ZStack,
+  answerLayout,
+  color,
+  createSwiftUIRoot,
+  flattenChildren,
+  font,
+  frame,
+  gradient,
+  hex,
+  insets,
+  keyframeValues,
+  mount,
+  moveItems,
+  niceStep,
+  opacity,
+  openURL,
+  padding,
+  placeholder,
+  plainText,
+  readBinding,
+  rgb,
+  shapeStyle,
+  system,
+  timeTicks,
+  unitPoint,
+  useAVPlayer,
+  useColorScheme,
+  useContextBridge,
+  useCoordinateSpaces,
+  useDismiss,
+  useDynamicTypeSize,
+  useHorizontalSizeClass,
+  useNamespace,
+  useNavigation,
+  useRedacted,
+  useRefreshable,
+  useReportSplitSelection,
+  useViewEnvironment,
+  weighted,
+  withAnimation
+};
+//# sourceMappingURL=index.js.map