@swiftbrowser/react 0.27.0 → 0.28.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, createElement, useSyncExternalStore, useLayoutEffect, useRef, Fragment, useState, Children, useEffect, isValidElement, useId, cloneElement, useCallback } from "react";
+import { createContext, useContext, createElement, isValidElement, useMemo, useSyncExternalStore, useLayoutEffect, useRef, Fragment, useState, Children, useEffect, useId, cloneElement, useCallback } from "react";
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
@@ -221,6 +221,7 @@ class HostTree {
     };
     const visit = (child, sink, owner, ctx, hoistedTo) => {
       if (child.hidden) return;
+      if (child.kind === PREF_KIND || child.kind === HOIST_KIND) child.stale = false;
       if (child.kind === PREF_KIND) {
         contribute({ kind: "pref", target: child.target, props: child.props }, ctx);
         return;
@@ -746,6 +747,37 @@ function sb(kind, props, on, children, target) {
   if (target) hostProps.target = target;
   return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
 }
+const INHERITED_STYLE_KEYS = /* @__PURE__ */ new Set([
+  "font",
+  "fontWeight",
+  "bold",
+  "monospacedDigit",
+  "tint",
+  "lineLimit",
+  "multilineTextAlignment",
+  "imageScale",
+  "defaultMinListRowHeight"
+]);
+const PRESENTATION_KEYS = /* @__PURE__ */ new Set(["sheet", "fullScreenCover", "popover"]);
+const InheritedStylesContext = createContext([]);
+function useInheritedStyles() {
+  return useContext(InheritedStylesContext);
+}
+function styleOf(node) {
+  if (!isValidElement(node) || node.props.kind !== "styled") return {};
+  return node.props.props?.style ?? {};
+}
+function InheritStyle({ style, children }) {
+  const parent = useContext(InheritedStylesContext);
+  const key = JSON.stringify(style);
+  const value = useMemo(() => key === "{}" ? parent : [...parent, style], [parent, key]);
+  return createElement(InheritedStylesContext.Provider, { value }, children);
+}
+function replayStyles(styles, content) {
+  if (styles.length === 0) return content;
+  const provided = createElement(InheritedStylesContext.Provider, { value: styles }, content);
+  return styles.reduceRight((child, style) => sb("styled", { style }, void 0, child), provided);
+}
 const NavigationContext = createContext(null);
 const ScreenDepthContext = createContext(0);
 function useScreenDepth() {
@@ -786,6 +818,10 @@ function renderNode(root, node, stack) {
   const children = node.children.length ? node.children.map((child) => renderNode(root, child, stack)) : void 0;
   return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), children));
 }
+function renderSheet(root, node, stack, inherited) {
+  const children = node.children.map((child) => renderNode(root, child, stack));
+  return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), replayStyles(inherited, children)));
+}
 function renderScreen(root, screen, stack) {
   const out = [screenPrefs(screen.props, "$screen")];
   for (const child of screen.children) {
@@ -804,6 +840,7 @@ function RemoteScreen({ root, id }) {
 function RemoteTree({ root, initialPath }) {
   useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
   const environment = useContext(EnvironmentContext);
+  const inherited = useInheritedStyles();
   const tree = useContext(HostTreeContext);
   const navigation = useNavigation();
   const depth = useScreenDepth();
@@ -859,7 +896,7 @@ function RemoteTree({ root, initialPath }) {
   if ("colorScheme" in root.rootProps)
     out.push(createElement(Fragment, { key: "$scheme" }, sb(PREF_KIND, { colorScheme: root.rootProps["colorScheme"] }, void 0, void 0, "root")));
   for (const child of root.root.children) {
-    const drawn = renderNode(root, child, stack);
+    const drawn = child.kind === "sheet" && inherited.length > 0 ? renderSheet(root, child, stack, inherited) : renderNode(root, child, stack);
     if (child.kind === "sheet" || child.kind === "alert") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "root")));
     else if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
     else out.push(drawn);
@@ -1052,6 +1089,7 @@ function mount(screen, element, options = {}) {
     platform: options.platform === void 0 || options.platform === "auto" ? decidePlatform(width) : options.platform
   };
   renderer.contentHeight = options.contentHeight ?? false;
+  if (options.sidebarTitleBar === false) renderer.sidebarTitleBar = false;
   if (options.assets) renderer.setAssetCatalog(options.assets);
   if (options.app) browserEnvironment.files?.setApp?.(options.app);
   renderer.setEnvironment({ colorScheme: environment.colorScheme, dynamicTypeSize: environment.dynamicTypeSize, platform: environment.platform });
@@ -1360,6 +1398,7 @@ function SwiftUIView({
   safeArea,
   history = true,
   keyboard = fit === "fill",
+  sidebarTitleBar = true,
   className,
   style
 }) {
@@ -1387,6 +1426,9 @@ function SwiftUIView({
       instance.unmount();
     };
   }, [fit, history, keyboard]);
+  useLayoutEffect(() => {
+    if (mounted.current) mounted.current.renderer.sidebarTitleBar = sidebarTitleBar;
+  }, [sidebarTitleBar, fit, history, keyboard]);
   useLayoutEffect(() => {
     mounted.current?.root.render(tree);
   });
@@ -2334,7 +2376,8 @@ function useReportSplitSelection(split, selected, clear, active2 = true) {
 function OutsideSplit({ children }) {
   return /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, children });
 }
-function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
+function SheetPresenter({ isPresented, onDismiss, content, fullScreen, inherited }) {
+  const around = useInheritedStyles();
   const [presented, setPresented] = readBinding(isPresented);
   if (!presented) return null;
   const dismiss = () => {
@@ -2350,7 +2393,10 @@ function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
       "sheet",
       { detents },
       { tap: dismiss },
-      /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(OutsideSplit, { children: /* @__PURE__ */ jsx(DismissContext.Provider, { value: dismiss, children: content }) }) })
+      replayStyles(
+        inherited && inherited.length > 0 ? [...around, ...inherited] : around,
+        /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(OutsideSplit, { children: /* @__PURE__ */ jsx(DismissContext.Provider, { value: dismiss, children: content }) }) })
+      )
     ),
     "root"
   );
@@ -2857,13 +2903,30 @@ function applyModifiers(element, modifiers) {
 const isPreference = (side) => isValidElement(side) && side.props.kind === PREF_KIND;
 function wrap(element, modifiers, sides) {
   let node = element;
+  const holds = holdsViews(element);
+  const presentations = [];
   for (const [key, value] of modifiers) {
     const inactive = value === void 0 || value === null && key !== "lineLimit" && key !== "badge";
+    const before = sides.length;
     const next = inactive ? node : apply(key, value, node, sides);
     node = next === node ? neutral(key, node) : next;
+    if (INHERITED_STYLE_KEYS.has(key)) {
+      const style = styleOf(node);
+      if (Object.keys(style).length > 0) for (const presentation of presentations) presentation.after.push(style);
+      if (holds) node = createElement(InheritStyle, { style }, node);
+    }
+    if (PRESENTATION_KEYS.has(key) && sides.length > before) presentations.push({ at: before, after: [] });
+  }
+  for (const { at, after } of presentations) {
+    const side = sides[at];
+    if (after.length > 0 && isValidElement(side)) sides[at] = cloneElement(side, { inherited: after.reverse() });
   }
   return node;
 }
+function holdsViews(element) {
+  if (!isValidElement(element)) return false;
+  return element.type !== "sb" || element.props.children !== void 0;
+}
 const STYLED_KEYS = /* @__PURE__ */ new Set([
   "padding",
   "font",
@@ -3974,7 +4037,7 @@ function protocolRuns(text) {
 }
 function useAudioRecorder(options = {}) {
   const interval = options.meterInterval ?? 50;
-  const host = browserEnvironment.audioRecorder;
+  const host2 = browserEnvironment.audioRecorder;
   const [status, setStatus] = useState("idle");
   const [time, setTime] = useState(0);
   const [levels, setLevels] = useState([]);
@@ -3983,13 +4046,13 @@ function useAudioRecorder(options = {}) {
   statusRef.current = status;
   const fail = (reason) => setError(reason instanceof Error ? reason.message : String(reason));
   useEffect(() => {
-    if (status !== "recording" || !host) return;
+    if (status !== "recording" || !host2) return;
     let reading = false;
     let live = true;
     const timer = setInterval(() => {
       if (reading) return;
       reading = true;
-      host.meter().then((meter) => {
+      host2.meter().then((meter) => {
         if (!live) return;
         setTime(meter.time);
         setLevels((previous) => [...previous, meter.level]);
@@ -4001,15 +4064,15 @@ function useAudioRecorder(options = {}) {
       live = false;
       clearInterval(timer);
     };
-  }, [status, host, interval]);
+  }, [status, host2, interval]);
   useEffect(
     () => () => {
-      if (statusRef.current !== "idle") void host?.cancel().catch(() => void 0);
+      if (statusRef.current !== "idle") void host2?.cancel().catch(() => void 0);
     },
-    [host]
+    [host2]
   );
   const record = useCallback(async () => {
-    if (!host) {
+    if (!host2) {
       setError("unsupported: this page cannot record");
       return;
     }
@@ -4019,28 +4082,28 @@ function useAudioRecorder(options = {}) {
     setLevels([]);
     setStatus("starting");
     try {
-      await host.start();
+      await host2.start();
       setStatus("recording");
     } catch (reason) {
       fail(reason);
       setStatus("idle");
     }
-  }, [host]);
+  }, [host2]);
   const pause = useCallback(async () => {
-    if (!host || statusRef.current !== "recording") return;
-    await host.pause().catch(fail);
+    if (!host2 || statusRef.current !== "recording") return;
+    await host2.pause().catch(fail);
     setStatus("paused");
-  }, [host]);
+  }, [host2]);
   const resume = useCallback(async () => {
-    if (!host || statusRef.current !== "paused") return;
-    await host.resume().catch(fail);
+    if (!host2 || statusRef.current !== "paused") return;
+    await host2.resume().catch(fail);
     setStatus("recording");
-  }, [host]);
+  }, [host2]);
   const stop = useCallback(async () => {
-    if (!host || statusRef.current !== "recording" && statusRef.current !== "paused") return null;
+    if (!host2 || statusRef.current !== "recording" && statusRef.current !== "paused") return null;
     setStatus("stopping");
     try {
-      const recording = await host.stop();
+      const recording = await host2.stop();
       setTime(recording.duration);
       return recording;
     } catch (reason) {
@@ -4049,30 +4112,538 @@ function useAudioRecorder(options = {}) {
     } finally {
       setStatus("idle");
     }
-  }, [host]);
+  }, [host2]);
   const cancel = useCallback(async () => {
-    if (!host || statusRef.current === "idle") return;
-    await host.cancel().catch(fail);
+    if (!host2 || statusRef.current === "idle") return;
+    await host2.cancel().catch(fail);
     setStatus("idle");
     setTime(0);
     setLevels([]);
-  }, [host]);
+  }, [host2]);
   const discard = useCallback(async (url) => {
-    await host?.discard(url).catch(fail);
-  }, [host]);
+    await host2?.discard(url).catch(fail);
+  }, [host2]);
   const trim = useCallback(
     async (url, keep) => {
-      if (!host) throw new Error("unsupported: this page cannot cut audio");
+      if (!host2) throw new Error("unsupported: this page cannot cut audio");
       try {
-        return await host.trim(url, keep);
+        return await host2.trim(url, keep);
       } catch (reason) {
         fail(reason);
         throw reason;
       }
     },
-    [host]
+    [host2]
+  );
+  return { available: host2 !== void 0, status, time, levels, error, record, pause, resume, stop, cancel, discard, trim };
+}
+function host() {
+  const found = browserEnvironment.avAsset;
+  if (!found) throw new Error("unsupported: this page cannot read or write video");
+  return found;
+}
+class CMTime {
+  constructor(value, timescale) {
+    this.value = value;
+    this.timescale = timescale;
+  }
+  value;
+  timescale;
+  static zero = new CMTime(0, 1);
+  static invalid = new CMTime(0, 0);
+  static positiveInfinity = new CMTime(Infinity, 1);
+  /** `CMTime(value:timescale:)`. */
+  static make(value, timescale) {
+    return new CMTime(value, timescale);
+  }
+  /** `CMTime(seconds:preferredTimescale:)`: rounded to the timescale. */
+  static seconds(seconds, preferredTimescale = 600) {
+    if (!Number.isFinite(seconds)) return seconds > 0 ? CMTime.positiveInfinity : CMTime.invalid;
+    return new CMTime(Math.round(seconds * preferredTimescale), preferredTimescale);
+  }
+  get isValid() {
+    return this.timescale > 0;
+  }
+  /** `CMTimeGetSeconds`. */
+  get seconds() {
+    return this.timescale > 0 ? this.value / this.timescale : Number.NaN;
+  }
+  add(other) {
+    return CMTime.seconds(this.seconds + other.seconds, Math.max(this.timescale, other.timescale, 1));
+  }
+  subtract(other) {
+    return CMTime.seconds(this.seconds - other.seconds, Math.max(this.timescale, other.timescale, 1));
+  }
+  /** `CMTimeCompare`: -1, 0 or 1. */
+  compare(other) {
+    const a = this.seconds;
+    const b = other.seconds;
+    return a < b ? -1 : a > b ? 1 : 0;
+  }
+  static minimum(a, b) {
+    return a.compare(b) <= 0 ? a : b;
+  }
+  static maximum(a, b) {
+    return a.compare(b) >= 0 ? a : b;
+  }
+}
+class CMTimeRange {
+  constructor(start, duration) {
+    this.start = start;
+    this.duration = duration;
+  }
+  start;
+  duration;
+  static zero = new CMTimeRange(CMTime.zero, CMTime.zero);
+  /** `CMTimeRange(start:end:)`. */
+  static fromTo(start, end) {
+    return new CMTimeRange(start, CMTime.maximum(end.subtract(start), CMTime.zero));
+  }
+  /** `CMTimeRange(start:duration:)` in seconds. */
+  static seconds(start, duration, preferredTimescale = 600) {
+    return new CMTimeRange(CMTime.seconds(start, preferredTimescale), CMTime.seconds(duration, preferredTimescale));
+  }
+  get end() {
+    return this.start.add(this.duration);
+  }
+  get isEmpty() {
+    return this.duration.seconds <= 0;
+  }
+  containsTime(time) {
+    return time.compare(this.start) >= 0 && time.compare(this.end) < 0;
+  }
+}
+const AVMediaType = { video: "vide", audio: "soun" };
+class AVAssetTrack {
+  constructor(trackID, mediaType, naturalSize, nominalFrameRate, timeRange, codec) {
+    this.trackID = trackID;
+    this.mediaType = mediaType;
+    this.naturalSize = naturalSize;
+    this.nominalFrameRate = nominalFrameRate;
+    this.timeRange = timeRange;
+    this.codec = codec;
+  }
+  trackID;
+  mediaType;
+  naturalSize;
+  nominalFrameRate;
+  timeRange;
+  codec;
+}
+class AVAsset {
+  /** @internal */
+  segmentsForExport() {
+    return this.segments();
+  }
+  /** `loadTracks(withMediaType:)`. */
+  async loadTracks(mediaType) {
+    return (await this.load("tracks")).filter((track) => track.mediaType === mediaType);
+  }
+}
+const tracksOf = (info) => info.tracks.map(
+  (t) => new AVAssetTrack(
+    t.trackID,
+    t.mediaType === "video" ? AVMediaType.video : AVMediaType.audio,
+    t.naturalSize,
+    t.nominalFrameRate,
+    CMTimeRange.seconds(t.timeRange.start, t.timeRange.duration),
+    t.codec
+  )
+);
+class AVURLAsset extends AVAsset {
+  constructor(url) {
+    super();
+    this.url = url;
+  }
+  url;
+  info = null;
+  loaded() {
+    if (!this.info) {
+      this.info = host().load(this.url);
+      this.info.catch(() => {
+        this.info = null;
+      });
+    }
+    return this.info;
+  }
+  async segments() {
+    return [{ url: this.url, start: 0, end: (await this.loaded()).duration }];
+  }
+  async load(key) {
+    const info = await this.loaded();
+    const values = {
+      duration: CMTime.seconds(info.duration),
+      tracks: tracksOf(info),
+      naturalSize: info.naturalSize,
+      isPlayable: info.tracks.length > 0,
+      isExportable: info.tracks.length > 0
+    };
+    return values[key];
+  }
+}
+class AVMutableComposition extends AVAsset {
+  parts = [];
+  /** The composition's length. */
+  get duration() {
+    return CMTime.seconds(this.parts.reduce((sum, part) => sum + part.range.duration.seconds, 0));
+  }
+  /** `insertTimeRange(_:of:at:)`: `range` of `asset` (an `AVURLAsset`, or another composition's parts) placed at `at`. */
+  async insertTimeRange(range, asset, at) {
+    const inserted = [];
+    if (asset instanceof AVURLAsset) {
+      const length = (await asset.load("duration")).seconds;
+      const start = Math.max(0, range.start.seconds);
+      const end = Math.min(length, range.end.seconds);
+      if (end - start > 1e-3) inserted.push({ asset, range: CMTimeRange.seconds(start, end - start) });
+    } else if (asset instanceof AVMutableComposition) {
+      inserted.push(...asset.partsIn(range.start.seconds, range.end.seconds));
+    } else {
+      throw new Error("unsupported: only an AVURLAsset or an AVMutableComposition can be inserted");
+    }
+    const time = Math.max(0, Math.min(at.seconds, this.duration.seconds));
+    const [before, after] = this.splitAt(time);
+    this.parts = [...before, ...inserted, ...after];
+  }
+  /** `removeTimeRange(_:)`: the media in `range` cut out, the rest closing up. */
+  removeTimeRange(range) {
+    const [before] = this.splitAt(range.start.seconds);
+    const [, after] = this.splitAt(range.end.seconds);
+    this.parts = [...before, ...after];
+  }
+  /** The parts' media from `start` to `end` of the composition's timeline. */
+  partsIn(start, end) {
+    const [, from] = this.splitAt(start);
+    const out = [];
+    let cursor = start;
+    for (const part of from) {
+      if (cursor >= end) break;
+      const take = Math.min(part.range.duration.seconds, end - cursor);
+      if (take > 1e-3) out.push({ asset: part.asset, range: CMTimeRange.seconds(part.range.start.seconds, take) });
+      cursor += take;
+    }
+    return out;
+  }
+  /** The parts before `time` and from it, a part across it split in two. */
+  splitAt(time) {
+    const before = [];
+    const after = [];
+    let cursor = 0;
+    for (const part of this.parts) {
+      const length = part.range.duration.seconds;
+      const start = part.range.start.seconds;
+      if (cursor + length <= time + 1e-9) before.push(part);
+      else if (cursor >= time - 1e-9) after.push(part);
+      else {
+        const head = time - cursor;
+        before.push({ asset: part.asset, range: CMTimeRange.seconds(start, head) });
+        after.push({ asset: part.asset, range: CMTimeRange.seconds(start + head, length - head) });
+      }
+      cursor += length;
+    }
+    return [before, after];
+  }
+  async segments() {
+    return this.parts.map((part) => ({ url: part.asset.url, start: part.range.start.seconds, end: part.range.end.seconds }));
+  }
+  async load(key) {
+    const first = this.parts[0]?.asset;
+    const tracks = first ? await first.load("tracks") : [];
+    const values = {
+      duration: this.duration,
+      tracks: tracks.map((t) => new AVAssetTrack(t.trackID, t.mediaType, t.naturalSize, t.nominalFrameRate, new CMTimeRange(CMTime.zero, this.duration), t.codec)),
+      naturalSize: first ? await first.load("naturalSize") : { width: 0, height: 0 },
+      isPlayable: this.parts.length > 0,
+      isExportable: this.parts.length > 0
+    };
+    return values[key];
+  }
+}
+class AVAssetImageGenerator {
+  constructor(asset) {
+    this.asset = asset;
+  }
+  asset;
+  maximumSize = { width: 0, height: 0 };
+  /** Stills come upright (the track's rotation applied), as with `appliesPreferredTrackTransform = true`. */
+  appliesPreferredTrackTransform = true;
+  made = [];
+  /** The file and the time in it that `time` on the asset's timeline falls on (a composition's part). */
+  async source(time) {
+    let cursor = 0;
+    const segments = await this.asset.segmentsForExport();
+    for (const segment of segments) {
+      const length = segment.end - segment.start;
+      if (time < cursor + length || segment === segments[segments.length - 1]) return { url: segment.url, time: segment.start + Math.max(0, Math.min(length, time - cursor)) };
+      cursor += length;
+    }
+    throw new Error("empty: the asset has no media");
+  }
+  /** `image(at:)`: the still at `time`. */
+  async image(at) {
+    const { url, time } = await this.source(Math.max(0, at.seconds));
+    const options = {
+      ...this.maximumSize.width > 0 ? { maxWidth: this.maximumSize.width } : {},
+      ...this.maximumSize.height > 0 ? { maxHeight: this.maximumSize.height } : {}
+    };
+    const still = await host().image(url, time, options);
+    this.made.push(still.url);
+    return { image: still.url, actualTime: CMTime.seconds(at.seconds + (still.actualTime - time)), width: still.width, height: still.height };
+  }
+  /** `images(for:)`: a still for each time, in turn. */
+  async *images(times) {
+    for (const time of times) yield { ...await this.image(time), requestedTime: time };
+  }
+  /** Lets go of the stills this generator made (their `blob:` URLs on a page). */
+  async release() {
+    const urls = this.made.splice(0);
+    await Promise.all(urls.map((url) => host().release(url)));
+  }
+}
+const AVFileType = { mp4: "public.mpeg-4", mov: "com.apple.quicktime-movie", m4v: "com.apple.m4v-video", webm: "org.webmproject.webm" };
+const FILE_TYPES = {
+  "public.mpeg-4": "mp4",
+  "com.apple.m4v-video": "mp4",
+  "com.apple.quicktime-movie": "mov",
+  "org.webmproject.webm": "webm"
+};
+const AVAssetExportPresetPassthrough = "AVAssetExportPresetPassthrough";
+const AVAssetExportPresetHighestQuality = "AVAssetExportPresetHighestQuality";
+const AVAssetExportPresetMediumQuality = "AVAssetExportPresetMediumQuality";
+const AVAssetExportPresetLowQuality = "AVAssetExportPresetLowQuality";
+const AVAssetExportPreset640x480 = "AVAssetExportPreset640x480";
+const AVAssetExportPreset960x540 = "AVAssetExportPreset960x540";
+const AVAssetExportPreset1280x720 = "AVAssetExportPreset1280x720";
+const AVAssetExportPreset1920x1080 = "AVAssetExportPreset1920x1080";
+const AVAssetExportPreset3840x2160 = "AVAssetExportPreset3840x2160";
+let exports$1 = 0;
+class AVAssetExportSession {
+  constructor(asset, presetName) {
+    this.asset = asset;
+    this.presetName = presetName;
+  }
+  asset;
+  presetName;
+  outputURL = null;
+  outputFileType = AVFileType.mp4;
+  timeRange = null;
+  status = "unknown";
+  progress = 0;
+  error = null;
+  /** Heard as `progress` changes (a few times a second). */
+  onProgress = null;
+  /** The written file's length and MIME type, once completed. */
+  result = null;
+  id = `export-${++exports$1}`;
+  /** `AVAssetExportSession.allExportPresets()`. */
+  static allExportPresets() {
+    return [
+      AVAssetExportPresetPassthrough,
+      AVAssetExportPresetHighestQuality,
+      AVAssetExportPresetMediumQuality,
+      AVAssetExportPresetLowQuality,
+      AVAssetExportPreset640x480,
+      AVAssetExportPreset960x540,
+      AVAssetExportPreset1280x720,
+      AVAssetExportPreset1920x1080,
+      AVAssetExportPreset3840x2160
+    ];
+  }
+  /** The asset's parts, cut to `timeRange` when it is set. */
+  async parts() {
+    const all = await this.asset.segmentsForExport();
+    if (!this.timeRange) return all;
+    const from = this.timeRange.start.seconds;
+    const to = this.timeRange.end.seconds;
+    const out = [];
+    let cursor = 0;
+    for (const segment of all) {
+      const length = segment.end - segment.start;
+      const start = Math.max(from, cursor);
+      const end = Math.min(to, cursor + length);
+      if (end - start > 1e-3) out.push({ url: segment.url, start: segment.start + (start - cursor), end: segment.start + (end - cursor) });
+      cursor += length;
+    }
+    return out;
+  }
+  /** `export()`: writes the file and answers its URL (also `outputURL`); rejects with why it could not. */
+  async export() {
+    if (this.status === "exporting") throw new Error("busy: already exporting");
+    this.status = "exporting";
+    this.error = null;
+    this.setProgress(0);
+    const assets = host();
+    const ticker = setInterval(() => {
+      void assets.progress(this.id).then((p) => this.status === "exporting" && this.setProgress(p));
+    }, 200);
+    try {
+      const result = await assets.export(this.id, {
+        segments: await this.parts(),
+        preset: this.presetName,
+        fileType: FILE_TYPES[this.outputFileType] ?? "mp4",
+        ...this.outputURL ? { outputURL: this.outputURL } : {}
+      });
+      this.outputURL = result.url;
+      this.result = { duration: result.duration, type: result.type };
+      this.status = "completed";
+      this.setProgress(1);
+      return result.url;
+    } catch (reason) {
+      const error = reason instanceof Error ? reason : new Error(String(reason));
+      this.error = error;
+      this.status = error.message.startsWith("cancelled") ? "cancelled" : "failed";
+      throw error;
+    } finally {
+      clearInterval(ticker);
+    }
+  }
+  /** `cancelExport()`. */
+  cancelExport() {
+    if (this.status !== "exporting") return;
+    void host().cancel(this.id);
+  }
+  setProgress(progress) {
+    if (progress === this.progress) return;
+    this.progress = progress;
+    this.onProgress?.(progress);
+  }
+}
+function useVideoRecorder(options = {}) {
+  const interval = options.timeInterval ?? 100;
+  const host2 = browserEnvironment.videoRecorder;
+  const [status, setStatus] = useState("closed");
+  const [stream, setStream] = useState(null);
+  const [facing, setFacing] = useState("user");
+  const [time, setTime] = useState(0);
+  const [error, setError] = useState(null);
+  const statusRef = useRef(status);
+  statusRef.current = status;
+  const facingRef = useRef(facing);
+  facingRef.current = facing;
+  const fail = (reason) => setError(reason instanceof Error ? reason.message : String(reason));
+  useEffect(() => {
+    if (status !== "recording" || !host2) return;
+    let reading = false;
+    let live = true;
+    const timer = setInterval(() => {
+      if (reading) return;
+      reading = true;
+      host2.time().then((seconds) => live && setTime(seconds)).catch(() => void 0).finally(() => {
+        reading = false;
+      });
+    }, interval);
+    return () => {
+      live = false;
+      clearInterval(timer);
+    };
+  }, [status, host2, interval]);
+  useEffect(
+    () => () => {
+      if (statusRef.current !== "closed") void host2?.close().catch(() => void 0);
+    },
+    [host2]
+  );
+  const open = useCallback(
+    async (wanted) => {
+      if (!host2) {
+        setError("unsupported: this page cannot record video");
+        return;
+      }
+      if (statusRef.current === "recording" || statusRef.current === "paused" || statusRef.current === "stopping") return;
+      setError(null);
+      setStatus("opening");
+      try {
+        const opened = await host2.open({ facing: wanted ?? facingRef.current });
+        setStream(opened.stream);
+        setFacing(opened.facing);
+        setStatus("ready");
+      } catch (reason) {
+        fail(reason);
+        setStream(null);
+        setStatus("closed");
+      }
+    },
+    [host2]
+  );
+  const close = useCallback(async () => {
+    if (!host2) return;
+    await host2.close().catch(fail);
+    setStream(null);
+    setStatus("closed");
+    setTime(0);
+  }, [host2]);
+  const flip = useCallback(async () => {
+    if (statusRef.current !== "ready") return;
+    await open(facingRef.current === "user" ? "environment" : "user");
+  }, [open]);
+  const record = useCallback(async () => {
+    if (!host2 || statusRef.current !== "ready") return;
+    setError(null);
+    setTime(0);
+    try {
+      await host2.start();
+      setStatus("recording");
+    } catch (reason) {
+      fail(reason);
+    }
+  }, [host2]);
+  const pause = useCallback(async () => {
+    if (!host2 || statusRef.current !== "recording") return;
+    await host2.pause().catch(fail);
+    setStatus("paused");
+  }, [host2]);
+  const resume = useCallback(async () => {
+    if (!host2 || statusRef.current !== "paused") return;
+    await host2.resume().catch(fail);
+    setStatus("recording");
+  }, [host2]);
+  const stop = useCallback(async () => {
+    if (!host2 || statusRef.current !== "recording" && statusRef.current !== "paused") return null;
+    setStatus("stopping");
+    try {
+      const recording = await host2.stop();
+      setTime(recording.duration);
+      return recording;
+    } catch (reason) {
+      fail(reason);
+      return null;
+    } finally {
+      setStatus("ready");
+    }
+  }, [host2]);
+  const cancel = useCallback(async () => {
+    if (!host2 || statusRef.current !== "recording" && statusRef.current !== "paused") return;
+    await host2.cancel().catch(fail);
+    setStatus("ready");
+    setTime(0);
+  }, [host2]);
+  const discard = useCallback(
+    async (url) => {
+      await host2?.discard(url).catch(fail);
+    },
+    [host2]
+  );
+  return { available: host2 !== void 0, status, stream, facing, time, error, open, close, flip, record, pause, resume, stop, cancel, discard };
+}
+function CameraPreview(props) {
+  const { own, modifiers } = splitProps(props);
+  const stream = own.recorder.stream;
+  if (!stream) return applyModifiers(sb("color", { color: { r: 0, g: 0, b: 0, a: 1 } }), modifiers);
+  return applyModifiers(
+    sb("video", {
+      url: null,
+      playing: false,
+      muted: true,
+      volume: 0,
+      rate: 1,
+      loop: false,
+      gravity: own.gravity ?? "resizeAspectFill",
+      controls: false,
+      seek: { time: 0, serial: 0 },
+      stream,
+      mirrored: own.mirrored ?? own.recorder.facing === "user"
+    }),
+    modifiers
   );
-  return { available: host !== void 0, status, time, levels, error, record, pause, resume, stop, cancel, discard, trim };
 }
 let nextId$1 = 1;
 const newId = () => nextId$1++;
@@ -4081,9 +4652,9 @@ function unsupported() {
   return new Error("unsupported: this page or app has no audio engine");
 }
 function perform$1(command2) {
-  const host = hostNow$1();
-  if (!host) return Promise.reject(unsupported());
-  return host.perform(command2);
+  const host2 = hostNow$1();
+  if (!host2) return Promise.reject(unsupported());
+  return host2.perform(command2);
 }
 class AVAudioTime {
   spec;
@@ -4689,9 +5260,9 @@ function useAudioEngine(build) {
 let nextId = 1;
 const hostNow = () => browserEnvironment.languageModel;
 function perform(command2) {
-  const host = hostNow();
-  if (!host) return Promise.reject(new GenerationError("assetsUnavailable", "This page or app has no language model."));
-  return host.perform(command2).catch((error) => {
+  const host2 = hostNow();
+  if (!host2) return Promise.reject(new GenerationError("assetsUnavailable", "This page or app has no language model."));
+  return host2.perform(command2).catch((error) => {
     throw GenerationError.from(error);
   });
 }
@@ -5174,8 +5745,9 @@ function ProgressView(props) {
 }
 function ToolbarItem(props) {
   const hidden = props.sharedBackgroundVisibility === "hidden";
-  const items = withEnvironment({ labelStyle: "iconOnly" }, props.children);
-  return sb("toolbar", hidden ? { placement: toolbarPlacement(props.placement), sharedBackground: "hidden" } : { placement: toolbarPlacement(props.placement) }, void 0, items);
+  const placement = toolbarPlacement(props.placement);
+  const items = placement === "secondary" ? props.children : withEnvironment({ labelStyle: "iconOnly" }, props.children);
+  return sb("toolbar", hidden ? { placement, sharedBackground: "hidden" } : { placement }, void 0, items);
 }
 const ToolbarItemGroup = ToolbarItem;
 function ToolbarSpacer(props) {
@@ -5377,14 +5949,14 @@ function canSignInWithApple() {
   return browserEnvironment.appleSignIn !== void 0;
 }
 async function signInWithApple(options = {}) {
-  const host = browserEnvironment.appleSignIn;
-  if (!host) throw new Error("unsupported: Sign in with Apple is not available here (configureSignInWithApple on a page)");
-  return host.signIn({ scopes: options.scopes ?? ["fullName", "email"], ...options.nonce ? { nonce: options.nonce } : {}, ...options.state ? { state: options.state } : {} });
+  const host2 = browserEnvironment.appleSignIn;
+  if (!host2) throw new Error("unsupported: Sign in with Apple is not available here (configureSignInWithApple on a page)");
+  return host2.signIn({ scopes: options.scopes ?? ["fullName", "email"], ...options.nonce ? { nonce: options.nonce } : {}, ...options.state ? { state: options.state } : {} });
 }
 async function appleCredentialState(user) {
-  const host = browserEnvironment.appleSignIn;
-  if (!host) return "unknown";
-  return host.credentialState(user);
+  const host2 = browserEnvironment.appleSignIn;
+  if (!host2) return "unknown";
+  return host2.credentialState(user);
 }
 const LABELS = { signIn: "Sign in with Apple", signUp: "Sign up with Apple", continue: "Continue with Apple" };
 function SignInWithAppleButton(props) {
@@ -5715,16 +6287,16 @@ function hostData(contents) {
   if (contents instanceof ArrayBuffer) return new Uint8Array(contents);
   return contents;
 }
-function createFileManager(host) {
+function createFileManager(host2) {
   const required = () => {
-    const files = host();
+    const files = host2();
     if (!files) throw new Error("unsupported: this page keeps no files");
     return files;
   };
-  const directories = () => host()?.directories ?? NONE;
+  const directories = () => host2()?.directories ?? NONE;
   return {
     get available() {
-      return host() !== void 0;
+      return host2() !== void 0;
     },
     get documentsDirectory() {
       return directories().documents;
@@ -5761,8 +6333,8 @@ function createFileManager(host) {
     copyItem: async (from, to) => required().copy(from, to),
     removeItem: async (url) => required().remove(url),
     loadURL: async (url) => required().loadURL(url),
-    iCloudDirectory: async () => await host()?.iCloud?.() ?? null,
-    watch: (listener) => host()?.watch?.(listener) ?? (() => {
+    iCloudDirectory: async () => await host2()?.iCloud?.() ?? null,
+    watch: (listener) => host2()?.watch?.(listener) ?? (() => {
     })
   };
 }
@@ -6327,7 +6899,7 @@ function Chart(props) {
     const key = mark.props.foregroundStyleBy;
     if (key !== void 0 && !series.includes(key)) series.push(key);
   }
-  const styleOf = (mark) => {
+  const styleOf2 = (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] };
@@ -6385,7 +6957,7 @@ function Chart(props) {
     );
   };
   const common = (mark) => {
-    const base = { style: styleOf(mark) };
+    const base = { style: styleOf2(mark) };
     if (mark.props.opacity !== void 0) base.opacity = mark.props.opacity;
     return base;
   };
@@ -7358,6 +7930,19 @@ function KeyframeAnimator({
   return children(value);
 }
 export {
+  AVAsset,
+  AVAssetExportPreset1280x720,
+  AVAssetExportPreset1920x1080,
+  AVAssetExportPreset3840x2160,
+  AVAssetExportPreset640x480,
+  AVAssetExportPreset960x540,
+  AVAssetExportPresetHighestQuality,
+  AVAssetExportPresetLowQuality,
+  AVAssetExportPresetMediumQuality,
+  AVAssetExportPresetPassthrough,
+  AVAssetExportSession,
+  AVAssetImageGenerator,
+  AVAssetTrack,
   AVAudioEngine,
   AVAudioFile,
   AVAudioInputNode,
@@ -7375,8 +7960,12 @@ export {
   AVAudioUnitReverb,
   AVAudioUnitSampler,
   AVAudioUnitTimePitch,
+  AVFileType,
+  AVMediaType,
+  AVMutableComposition,
   AVPlayer,
   AVQueuePlayer,
+  AVURLAsset,
   AngularGradient,
   AreaMark,
   AsyncImage,
@@ -7384,6 +7973,9 @@ export {
   AudioPlayer,
   BarMark,
   Button,
+  CMTime,
+  CMTimeRange,
+  CameraPreview,
   Canvas,
   Capsule,
   Chart,
@@ -7555,6 +8147,7 @@ export {
   useSpeechSynthesis,
   useSystemLanguageModel,
   useUndoManager,
+  useVideoRecorder,
   useViewEnvironment,
   useWakeLock,
   weighted,