@swiftbrowser/react 0.28.0 → 0.28.2

package/dist/index.js

@@ -1,6 +1,8 @@
 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 { base64Decode, base64Encode } from "@swiftbrowser/web/src/base64";
+import { addLiveBitmap, forgetLiveBitmap } from "@swiftbrowser/web/src/bitmaps";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
 import { BrowserHistory } from "@swiftbrowser/web/src/browserHistory";
@@ -16,7 +18,6 @@ import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
 import { ViewRegistry } from "@swiftbrowser/web/src/viewRegistry";
 import { chooseColor } from "@swiftbrowser/web/src/colorPicker";
-import { base64Encode } from "@swiftbrowser/web/src/base64";
 import { timingFor } from "@swiftbrowser/web/src/animation";
 const ViewEnvironmentContext = createContext({});
 function useViewEnvironment() {
@@ -63,6 +64,176 @@ function usePlatform() {
 function useRedacted() {
   return useContext(ViewEnvironmentContext).redacted === true;
 }
+const registry = /* @__PURE__ */ new Map();
+const byURL = /* @__PURE__ */ new Map();
+function bitmapSource(file, options = {}) {
+  if (typeof file === "string") {
+    const known = byURL.get(file);
+    if (known !== void 0) return known;
+    const match = /^data:([^;,]*)(?:;[^,]*)?;base64,(.*)$/s.exec(file);
+    const source = match ? register(base64Decode(match[2]), match[2], { mime: match[1] || void 0, ...options }) : null;
+    byURL.set(file, source);
+    return source;
+  }
+  return register(file, null, options);
+}
+function register(bytes, base64, options) {
+  const header = imageHeader(bytes);
+  const width = options.width ?? header?.width;
+  const height = options.height ?? header?.height;
+  const mime = header?.mime ?? options.mime ?? "";
+  if (width === void 0 || height === void 0) return null;
+  const key = `f${fnv1a64(bytes)}`;
+  if (!registry.has(key)) registry.set(key, { op: "imagedata", key, width, height, mime, data: base64 ?? base64Encode(bytes) });
+  return { key, width, height, mime };
+}
+function liveBitmapSource(pixels, width, height) {
+  if (globalThis.__sbNative !== void 0) return null;
+  return { key: addLiveBitmap(pixels, width, height), width, height, mime: "" };
+}
+function releaseBitmapSource(source) {
+  if (source.key.startsWith("l")) forgetLiveBitmap(source.key);
+}
+function bitmapSourceOp(key) {
+  return registry.get(key);
+}
+function registerBitmapSourceOp(op) {
+  if (!registry.has(op.key)) registry.set(op.key, op);
+}
+function fnv1a64(bytes) {
+  let hi = 3421674724;
+  let lo = 2216829733;
+  for (let i = 0; i < bytes.length; i++) {
+    lo = (lo ^ bytes[i]) >>> 0;
+    const loMul = lo * 435;
+    const carry = Math.floor(loMul / 4294967296);
+    const newLo = loMul >>> 0;
+    const newHi = Math.imul(hi, 435) + carry + (lo << 8 >>> 0) >>> 0;
+    hi = newHi;
+    lo = newLo;
+  }
+  return hi.toString(16).padStart(8, "0") + lo.toString(16).padStart(8, "0");
+}
+function imageHeader(b) {
+  const u16 = (i, little = false) => little ? b[i] | b[i + 1] << 8 : b[i] << 8 | b[i + 1];
+  const u32 = (i) => (b[i] << 24 | b[i + 1] << 16 | b[i + 2] << 8 | b[i + 3]) >>> 0;
+  if (b.length >= 24 && b[0] === 137 && b[1] === 80 && b[2] === 78 && b[3] === 71) {
+    return { mime: "image/png", width: u32(16), height: u32(20) };
+  }
+  if (b.length >= 10 && b[0] === 71 && b[1] === 73 && b[2] === 70) {
+    return { mime: "image/gif", width: u16(6, true), height: u16(8, true) };
+  }
+  if (b.length >= 30 && b[0] === 82 && b[1] === 73 && b[2] === 70 && b[3] === 70 && b[8] === 87 && b[9] === 69 && b[10] === 66 && b[11] === 80) {
+    const chunk = String.fromCharCode(b[12], b[13], b[14], b[15]);
+    if (chunk === "VP8 ") return { mime: "image/webp", width: u16(26, true) & 16383, height: u16(28, true) & 16383 };
+    if (chunk === "VP8L") {
+      const bits = (b[21] | b[22] << 8 | b[23] << 16 | b[24] << 24) >>> 0;
+      return { mime: "image/webp", width: (bits & 16383) + 1, height: (bits >>> 14 & 16383) + 1 };
+    }
+    if (chunk === "VP8X") return { mime: "image/webp", width: 1 + (b[24] | b[25] << 8 | b[26] << 16), height: 1 + (b[27] | b[28] << 8 | b[29] << 16) };
+    return null;
+  }
+  if (b.length >= 4 && b[0] === 255 && b[1] === 216) {
+    let orientation = 1;
+    let i = 2;
+    while (i + 4 <= b.length) {
+      if (b[i] !== 255) return null;
+      const marker = b[i + 1];
+      if (marker === 216 || marker === 1 || marker >= 208 && marker <= 215) {
+        i += 2;
+        continue;
+      }
+      const length = u16(i + 2);
+      if (marker === 225 && length >= 16) orientation = exifOrientation(b, i + 4, length - 2) ?? orientation;
+      if (marker >= 192 && marker <= 207 && marker !== 196 && marker !== 200 && marker !== 204) {
+        if (i + 9 > b.length) return null;
+        const height = u16(i + 5);
+        const width = u16(i + 7);
+        return orientation >= 5 && orientation <= 8 ? { mime: "image/jpeg", width: height, height: width } : { mime: "image/jpeg", width, height };
+      }
+      i += 2 + length;
+    }
+  }
+  return null;
+}
+function exifOrientation(b, start, length) {
+  if (b[start] !== 69 || b[start + 1] !== 120 || b[start + 2] !== 105 || b[start + 3] !== 102) return null;
+  const tiff = start + 6;
+  const end = Math.min(b.length, start + length);
+  const little = b[tiff] === 73;
+  const u16 = (i) => little ? b[i] | b[i + 1] << 8 : b[i] << 8 | b[i + 1];
+  const u32 = (i) => little ? (b[i] | b[i + 1] << 8 | b[i + 2] << 16 | b[i + 3] << 24) >>> 0 : (b[i] << 24 | b[i + 1] << 16 | b[i + 2] << 8 | b[i + 3]) >>> 0;
+  if (tiff + 8 > end) return null;
+  const ifd = tiff + u32(tiff + 4);
+  if (ifd + 2 > end) return null;
+  const count = u16(ifd);
+  for (let n = 0; n < count; n++) {
+    const entry = ifd + 2 + n * 12;
+    if (entry + 12 > end) return null;
+    if (u16(entry) === 274) return u16(entry + 8);
+  }
+  return null;
+}
+function bitmapExtent(source, steps = []) {
+  let r2 = source ? { x: 0, y: 0, width: source.width, height: source.height } : { x: 0, y: 0, width: 0, height: 0 };
+  const infinite = () => !Number.isFinite(r2.width) || !Number.isFinite(r2.height);
+  for (const step of steps) {
+    switch (step.op) {
+      case "crop": {
+        if (infinite()) {
+          r2 = { x: step.x, y: step.y, width: step.width, height: step.height };
+          break;
+        }
+        const x0 = Math.max(r2.x, step.x);
+        const y0 = Math.max(r2.y, step.y);
+        const x1 = Math.min(r2.x + r2.width, step.x + step.width);
+        const y1 = Math.min(r2.y + r2.height, step.y + step.height);
+        r2 = { x: x0, y: y0, width: Math.max(0, x1 - x0), height: Math.max(0, y1 - y0) };
+        break;
+      }
+      case "render":
+        r2 = { x: 0, y: 0, width: step.width, height: step.height };
+        break;
+      case "clamp":
+        r2 = { x: -Infinity, y: -Infinity, width: Infinity, height: Infinity };
+        break;
+      case "gaussianBlur": {
+        if (infinite()) break;
+        const grow = Math.ceil(3 * step.radius);
+        r2 = { x: r2.x - grow, y: r2.y - grow, width: r2.width + 2 * grow, height: r2.height + 2 * grow };
+        break;
+      }
+      case "place":
+        if (!(step.sx > 0) || !(step.sy > 0)) r2 = { x: step.tx, y: step.ty, width: 0, height: 0 };
+        else if (!infinite()) r2 = { x: r2.x * step.sx + step.tx, y: r2.y * step.sy + step.ty, width: r2.width * step.sx, height: r2.height * step.sy };
+        break;
+      case "transform": {
+        if (infinite()) break;
+        const { a, b, c, d, tx, ty } = step;
+        if (!(Math.abs(a * d - b * c) > 1e-12)) {
+          r2 = { x: tx, y: ty, width: 0, height: 0 };
+          break;
+        }
+        const xs = [];
+        const ys = [];
+        for (const [x, y] of [
+          [r2.x, r2.y],
+          [r2.x + r2.width, r2.y],
+          [r2.x, r2.y + r2.height],
+          [r2.x + r2.width, r2.y + r2.height]
+        ]) {
+          xs.push(a * x + c * y + tx);
+          ys.push(b * x + d * y + ty);
+        }
+        const x0 = Math.min(...xs);
+        const y0 = Math.min(...ys);
+        r2 = { x: x0, y: y0, width: Math.max(...xs) - x0, height: Math.max(...ys) - y0 };
+        break;
+      }
+    }
+  }
+  return r2;
+}
 const PREF_KIND = "$pref";
 const HOIST_KIND = "$hoist";
 function inheritTitleModes(screens) {
@@ -122,6 +293,8 @@ class HostTree {
   committedColorScheme;
   /** Remote: the root's props last sent. */
   committedRootProps = {};
+  /** The bitmap sources (`imagedata` keys) this tree has sent: each goes once, before the first image that draws it. */
+  sentSources = /* @__PURE__ */ new Set();
   /** Whether another tree draws this one (`createSwiftUIRoot(sink, { remote: true })`, for a `RemoteTree`). */
   get remote() {
     return this.options.remote === true;
@@ -221,6 +394,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;
@@ -303,6 +477,7 @@ class HostTree {
       const current = parent.committedChildren.filter((child) => child.shown && child.effectiveParent === parent);
       entry.children.forEach((child, index) => {
         const childEntry = child.entry;
+        if (child.kind === "image") this.sendBitmapSource(childEntry.props, ops);
         if (!child.created) {
           ops.push({ op: "create", id: child.id, kind: child.kind, props: childEntry.props });
           child.created = true;
@@ -352,6 +527,15 @@ class HostTree {
     ops.push(commit);
     return ops;
   }
+  /** An `imagedata` op ahead of an image whose recipe's source this tree has not sent yet (bitmaps.ts). */
+  sendBitmapSource(props, ops) {
+    const key = props["bitmap"]?.source;
+    if (typeof key !== "string" || this.sentSources.has(key)) return;
+    const op = bitmapSourceOp(key);
+    if (!op) return;
+    this.sentSources.add(key);
+    ops.push(op);
+  }
   /** Whether a pass is still animating with this completion serial. */
   awaitsCompletion(serial) {
     return this.completions.has(serial);
@@ -670,6 +854,9 @@ function createRemoteRoot() {
           case "commit":
             commit = op;
             break;
+          case "imagedata":
+            registerBitmapSourceOp(op);
+            break;
         }
       }
       if (!commit) return;
@@ -2138,6 +2325,21 @@ function openURL(url) {
 }
 function imageProps$1(props) {
   if (props.systemName !== void 0) return { systemName: props.systemName };
+  if (props.bitmap !== void 0) {
+    const { source, steps = [], version } = props.bitmap;
+    const extent = bitmapExtent(source, steps);
+    const finite = Number.isFinite(extent.width) && Number.isFinite(extent.height);
+    const width = finite ? Math.max(0, Math.round(extent.width)) : 0;
+    const height = finite ? Math.max(0, Math.round(extent.height)) : 0;
+    const scale = props.scale !== void 0 && props.scale > 0 ? props.scale : 1;
+    return {
+      bitmap: { source: source?.key ?? null, steps, width, height, ...version !== void 0 ? { version } : {} },
+      resizable: props.resizable ?? false,
+      width: width / scale,
+      height: height / scale,
+      ...props.interpolation === "none" ? { interpolation: "none" } : {}
+    };
+  }
   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 };
 }
@@ -4036,7 +4238,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([]);
@@ -4045,13 +4247,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]);
@@ -4063,15 +4265,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;
     }
@@ -4081,28 +4283,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) {
@@ -4111,30 +4313,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++;
@@ -4143,9 +4853,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;
@@ -4751,9 +5461,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);
   });
 }
@@ -5236,8 +5946,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) {
@@ -5439,14 +6150,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) {
@@ -5777,16 +6488,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;
@@ -5823,8 +6534,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) ?? (() => {
     })
   };
 }
@@ -7420,6 +8131,19 @@ function KeyframeAnimator({
   return children(value);
 }
 export {
+  AVAsset,
+  AVAssetExportPreset1280x720,
+  AVAssetExportPreset1920x1080,
+  AVAssetExportPreset3840x2160,
+  AVAssetExportPreset640x480,
+  AVAssetExportPreset960x540,
+  AVAssetExportPresetHighestQuality,
+  AVAssetExportPresetLowQuality,
+  AVAssetExportPresetMediumQuality,
+  AVAssetExportPresetPassthrough,
+  AVAssetExportSession,
+  AVAssetImageGenerator,
+  AVAssetTrack,
   AVAudioEngine,
   AVAudioFile,
   AVAudioInputNode,
@@ -7437,8 +8161,12 @@ export {
   AVAudioUnitReverb,
   AVAudioUnitSampler,
   AVAudioUnitTimePitch,
+  AVFileType,
+  AVMediaType,
+  AVMutableComposition,
   AVPlayer,
   AVQueuePlayer,
+  AVURLAsset,
   AngularGradient,
   AreaMark,
   AsyncImage,
@@ -7446,6 +8174,9 @@ export {
   AudioPlayer,
   BarMark,
   Button,
+  CMTime,
+  CMTimeRange,
+  CameraPreview,
   Canvas,
   Capsule,
   Chart,
@@ -7550,6 +8281,8 @@ export {
   answerLayout,
   appStorage,
   appleCredentialState,
+  bitmapExtent,
+  bitmapSource,
   canMeasureText,
   canSignInWithApple,
   color,
@@ -7566,10 +8299,12 @@ export {
   geometryProxy,
   gradient,
   hex,
+  imageHeader,
   injectIntoDevTools,
   insets,
   installTextMeasurer,
   keyframeValues,
+  liveBitmapSource,
   measureText,
   mount,
   moveItems,
@@ -7583,6 +8318,7 @@ export {
   plainText,
   providingScrollSettings,
   readBinding,
+  releaseBitmapSource,
   rgb,
   routeOf,
   samplerZones,
@@ -7617,6 +8353,7 @@ export {
   useSpeechSynthesis,
   useSystemLanguageModel,
   useUndoManager,
+  useVideoRecorder,
   useViewEnvironment,
   useWakeLock,
   weighted,