@ai-matrx/capture 0.1.2 → 0.2.1

package/dist/react.cjs

@@ -22,21 +22,29 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   CameraCapture: () => CameraCapture,
+  CameraFeed: () => CameraFeed,
+  CaptureFilmstrip: () => CaptureFilmstrip,
   CaptureSheet: () => CaptureSheet,
   CountdownOverlay: () => CountdownOverlay,
   GridOverlay: () => GridOverlay,
   ImageEditSheet: () => ImageEditSheet,
+  MediaViewer: () => MediaViewer,
   ModeSelector: () => ModeSelector,
   OptionsGridPanel: () => OptionsGridPanel,
   ShutterButton: () => ShutterButton,
   ZoomRow: () => ZoomRow,
+  getMediaUrl: () => getMediaUrl,
+  invalidateMedia: () => invalidateMedia,
+  primeMedia: () => primeMedia,
+  useDefaultCaptureEngine: () => useDefaultCaptureEngine,
+  useMediaUrl: () => useMediaUrl,
   useTrackControls: () => useTrackControls
 });
 module.exports = __toCommonJS(react_exports);
 
 // src/components/CameraCapture.tsx
-var import_react2 = require("react");
-var import_lucide_react2 = require("lucide-react");
+var import_react5 = require("react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/cn.ts
 var import_tailwind_merge = require("tailwind-merge");
@@ -44,6 +52,20 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)(inputs.filter(Boolean).join(" "));
 }
 
+// src/safe-area.ts
+var safeTop = {
+  paddingTop: "env(safe-area-inset-top, 0px)"
+};
+var safeBottom = {
+  paddingBottom: "env(safe-area-inset-bottom, 0px)"
+};
+var safeMarginTop = {
+  marginTop: "env(safe-area-inset-top, 0px)"
+};
+var safeMarginBottom = {
+  marginBottom: "env(safe-area-inset-bottom, 0px)"
+};
+
 // src/hooks/useTrackControls.ts
 var import_react = require("react");
 var ZOOM_LADDER = [0.5, 1, 2, 4, 8];
@@ -59,20 +81,31 @@ function useTrackControls(stream) {
       setCaps(null);
       return;
     }
+    const timers = [];
     const read = () => {
       try {
-        setCaps(track.getCapabilities());
+        const next = track.getCapabilities();
+        setCaps(next);
         const settings = track.getSettings();
         if (typeof settings.zoom === "number") setZoomState(settings.zoom);
         if (typeof settings.exposureCompensation === "number")
           setExposureState(settings.exposureCompensation);
+        return next.torch === true || next.zoom !== void 0 || next.exposureCompensation !== void 0;
       } catch {
         setCaps(null);
+        return false;
       }
     };
-    read();
-    const timer = window.setTimeout(read, 750);
-    return () => window.clearTimeout(timer);
+    if (!read()) {
+      for (const delay of [500, 1200, 2500, 5e3]) {
+        timers.push(
+          window.setTimeout(() => {
+            if (read()) timers.forEach((t) => window.clearTimeout(t));
+          }, delay)
+        );
+      }
+    }
+    return () => timers.forEach((t) => window.clearTimeout(t));
   }, [track]);
   const torchSupported = caps?.torch === true;
   const toggleTorch = (0, import_react.useCallback)(() => {
@@ -319,25 +352,32 @@ function OptionsGridPanel({
         className: "absolute inset-0 bg-black/70"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-x-3 bottom-3 mb-safe rounded-[2.5rem] bg-[#3a3a3c]/95 px-6 py-8 shadow-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-7", children: tiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center gap-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: tile.onPress,
-          disabled: tile.disabled,
-          "aria-label": tile.label,
-          "aria-pressed": tile.active === true,
-          className: cn(
-            "flex h-16 w-16 touch-manipulation items-center justify-center rounded-full bg-[#2c2c2e] transition-colors",
-            tile.active ? "text-[#FFCC00]" : "text-white",
-            tile.disabled && "opacity-40"
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: "absolute inset-x-3 bottom-3 rounded-[2.5rem] bg-[#3a3a3c]/95 px-6 py-8 shadow-2xl",
+        style: { marginBottom: "env(safe-area-inset-bottom, 0px)" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "grid grid-cols-3 gap-x-4 gap-y-7", children: tiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: tile.onPress,
+              disabled: tile.disabled,
+              "aria-label": tile.label,
+              "aria-pressed": tile.active === true,
+              className: cn(
+                "flex h-16 w-16 touch-manipulation items-center justify-center rounded-full bg-[#2c2c2e] transition-colors",
+                tile.active ? "text-[#FFCC00]" : "text-white",
+                tile.disabled && "opacity-40"
+              ),
+              children: tile.icon
+            }
           ),
-          children: tile.icon
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[13px] font-semibold uppercase tracking-[0.14em] text-white", children: tile.valueLabel ? `${tile.label} ${tile.valueLabel}` : tile.label })
-    ] }, tile.id)) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[13px] font-semibold uppercase tracking-[0.14em] text-white", children: tile.valueLabel ? `${tile.label} ${tile.valueLabel}` : tile.label })
+        ] }, tile.id)) })
+      }
+    )
   ] });
 }
 
@@ -365,39 +405,46 @@ function CaptureSheet({
         className: "absolute inset-0 bg-black/30"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative mx-2 mb-2 mb-safe rounded-[2rem] bg-[#f2f2f7] px-6 pb-6 pt-5 text-black shadow-2xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          "aria-label": "Close",
-          className: "absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full bg-black/5 text-black/70 transition-colors hover:bg-black/10",
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.X, { className: "h-5 w-5", strokeWidth: 2.5 })
-        }
-      ),
-      variant === "busy" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-h-[220px] items-center justify-center gap-2.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Loader2, { className: "h-5 w-5 animate-spin text-black/50" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[17px] font-medium text-black/80", children: busyLabel })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pt-4", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mb-5 text-[#0a84ff]", children: icon }),
-        title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mb-2 text-[26px] font-bold leading-tight", children: title }),
-        body && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-[17px] leading-snug text-black/85", children: body }),
-        actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-7 flex flex-col gap-3", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: action.onPress,
-            className: cn(
-              "h-[50px] w-full touch-manipulation rounded-full text-[17px] font-semibold transition-transform active:scale-[0.98]",
-              (action.kind ?? "primary") === "primary" ? "bg-[#0a84ff] text-white" : "bg-black/[0.06] text-[#0a84ff]"
-            ),
-            children: action.label
-          },
-          action.label
-        )) })
-      ] })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: "relative mx-2 mb-2 rounded-[2rem] bg-[#f2f2f7] px-6 pb-6 pt-5 text-black shadow-2xl",
+        style: { marginBottom: "calc(0.5rem + env(safe-area-inset-bottom, 0px))" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close",
+              className: "absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full bg-black/5 text-black/70 transition-colors hover:bg-black/10",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.X, { className: "h-5 w-5", strokeWidth: 2.5 })
+            }
+          ),
+          variant === "busy" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-h-[220px] items-center justify-center gap-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Loader2, { className: "h-5 w-5 animate-spin text-black/50" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[17px] font-medium text-black/80", children: busyLabel })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pt-4", children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mb-5 text-[#0a84ff]", children: icon }),
+            title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "mb-2 text-[26px] font-bold leading-tight", children: title }),
+            body && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-[17px] leading-snug text-black/85", children: body }),
+            actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-7 flex flex-col gap-3", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: action.onPress,
+                className: cn(
+                  "h-[50px] w-full touch-manipulation rounded-full text-[17px] font-semibold transition-transform active:scale-[0.98]",
+                  (action.kind ?? "primary") === "primary" ? "bg-[#0a84ff] text-white" : "bg-black/[0.06] text-[#0a84ff]"
+                ),
+                children: action.label
+              },
+              action.label
+            )) })
+          ] })
+        ]
+      }
+    )
   ] });
 }
 
@@ -427,303 +474,498 @@ function CountdownOverlay({ seconds }) {
   ) });
 }
 
-// src/components/CameraCapture.tsx
+// src/media/media-cache.ts
+var import_react2 = require("react");
+var MAX_ENTRIES = 80;
+var cache = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Map();
+function notify(key) {
+  listeners.get(key)?.forEach((fn) => fn());
+}
+function evictIfNeeded() {
+  while (cache.size > MAX_ENTRIES) {
+    const oldest = cache.keys().next().value;
+    if (oldest === void 0) return;
+    const entry = cache.get(oldest);
+    cache.delete(oldest);
+    if (entry?.revoke && entry.url) URL.revokeObjectURL(entry.url);
+  }
+}
+function touch(key, entry) {
+  cache.delete(key);
+  cache.set(key, entry);
+}
+function getMediaUrl(item) {
+  if (item.src) return item.src;
+  if (!item.resolve) return null;
+  const existing = cache.get(item.key);
+  if (existing) {
+    touch(item.key, existing);
+    if (existing.url || existing.error) return existing.url;
+    return null;
+  }
+  const entry = { url: null, revoke: false, promise: null, error: false };
+  cache.set(item.key, entry);
+  evictIfNeeded();
+  entry.promise = item.resolve().then((resolved) => {
+    const url = typeof resolved === "string" ? resolved : resolved.url;
+    entry.revoke = typeof resolved === "object" && resolved.revoke === true;
+    entry.url = url;
+    entry.promise = null;
+    notify(item.key);
+    return url;
+  }).catch(() => {
+    entry.error = true;
+    entry.promise = null;
+    notify(item.key);
+    return null;
+  });
+  return null;
+}
+function invalidateMedia(key) {
+  const entry = cache.get(key);
+  cache.delete(key);
+  if (entry?.revoke && entry.url) URL.revokeObjectURL(entry.url);
+  notify(key);
+}
+function useMediaUrl(item) {
+  const [, bump] = (0, import_react2.useState)(0);
+  const key = item?.key ?? null;
+  (0, import_react2.useEffect)(() => {
+    if (!key) return;
+    const set = listeners.get(key) ?? /* @__PURE__ */ new Set();
+    const fn = () => bump((n) => n + 1);
+    set.add(fn);
+    listeners.set(key, set);
+    return () => {
+      set.delete(fn);
+      if (set.size === 0) listeners.delete(key);
+    };
+  }, [key]);
+  if (!item) return null;
+  return getMediaUrl(item);
+}
+function primeMedia(items) {
+  for (const item of items) {
+    if (item) void getMediaUrl(item);
+  }
+}
+
+// src/components/CaptureFilmstrip.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function formatElapsed(totalSeconds) {
-  const m = Math.floor(totalSeconds / 60);
-  const s = String(totalSeconds % 60).padStart(2, "0");
-  return `${m}:${s}`;
+function CaptureFilmstrip({
+  items,
+  onOpen,
+  limit = 12
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-1.5 overflow-x-auto py-1", children: items.slice(-limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: () => onOpen(item),
+      "aria-label": "View capture",
+      className: cn(
+        "relative h-12 w-9 shrink-0 touch-manipulation overflow-hidden rounded bg-white/10",
+        item.accent && "ring-2 ring-inset ring-amber-400"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FilmstripThumb, { item }),
+        item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute inset-0 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/40 border-t-white" }) }),
+        item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute inset-0 rounded ring-2 ring-inset ring-red-500" })
+      ]
+    },
+    item.key
+  )) });
 }
-var ASPECT_CYCLE = ["full", "4:3", "1:1", "16:9"];
-function CameraCapture({
-  engine,
-  cloud,
-  mode,
-  onModeChange,
-  preview,
+function FilmstripThumb({ item }) {
+  const url = useMediaUrl(item);
+  if (item.kind === "audio") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4 stroke-white/80",
+        fill: "none",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 3v10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 7v4M16 7v4M4 9v1M20 9v1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "17", r: "3" })
+        ]
+      }
+    ) });
+  }
+  if (!url) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "block h-full w-full bg-white/5" });
+  if (item.kind === "video") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "relative block h-full w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "video",
+        {
+          src: url,
+          muted: true,
+          playsInline: true,
+          preload: "metadata",
+          className: "h-full w-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          className: "absolute inset-0 m-auto h-4 w-4 fill-white drop-shadow",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 5v14l11-7z" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: url, alt: "", className: "h-full w-full object-cover" });
+}
+
+// src/components/MediaViewer.tsx
+var import_react3 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SWIPE_TRIGGER_PX = 40;
+var SWIPE_TRIGGER_VELOCITY = 0.25;
+var DISMISS_TRIGGER_PX = 110;
+var DIRECTION_LOCK_PX = 8;
+function MediaViewer({
+  items,
+  initialKey,
   onClose,
-  blockedSheet,
-  controlsHidden = false,
-  shutterDisabled = false,
-  slots = {}
+  onDelete,
+  onEdit,
+  deleteConsequence = "It is removed from this capture for everyone.",
+  keysDisabled = false
 }) {
-  const [optionsOpen, setOptionsOpen] = (0, import_react2.useState)(false);
-  const [gridOn, setGridOn] = (0, import_react2.useState)(false);
-  const [timerSetting, setTimerSetting] = (0, import_react2.useState)(0);
-  const [aspect, setAspect] = (0, import_react2.useState)("full");
-  const [exposureOpen, setExposureOpen] = (0, import_react2.useState)(false);
-  const [countdown, setCountdown] = (0, import_react2.useState)(null);
-  const [blockedDismissed, setBlockedDismissed] = (0, import_react2.useState)(false);
-  const countdownRef = (0, import_react2.useRef)(null);
-  const controls = useTrackControls(engine.stream);
-  const clearCountdown = (0, import_react2.useCallback)(() => {
-    if (countdownRef.current) clearInterval(countdownRef.current);
-    countdownRef.current = null;
-    setCountdown(null);
-  }, []);
-  (0, import_react2.useEffect)(() => clearCountdown, [clearCountdown]);
-  const onShutter = (0, import_react2.useCallback)(() => {
-    if (mode === "video") {
-      if (engine.recording) engine.onStopRecording();
-      else engine.onStartRecording();
-      return;
-    }
-    if (countdown !== null) {
-      clearCountdown();
-      return;
+  const count = items.length;
+  const [index, setIndex] = (0, import_react3.useState)(() => {
+    const i = items.findIndex((m) => m.key === initialKey);
+    return i >= 0 ? i : 0;
+  });
+  const clamped = Math.min(index, count - 1);
+  const current = count > 0 ? items[clamped] : void 0;
+  const [confirmingDelete, setConfirmingDelete] = (0, import_react3.useState)(false);
+  const dragRef = (0, import_react3.useRef)(null);
+  const [drag, setDrag] = (0, import_react3.useState)(null);
+  const [settling, setSettling] = (0, import_react3.useState)(false);
+  const go = (0, import_react3.useCallback)(
+    (dir) => {
+      setIndex((i) => Math.max(0, Math.min(count - 1, i + dir)));
+      setDrag(null);
+      setSettling(true);
+    },
+    [count]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (count === 0) {
+      const t = setTimeout(onClose, 0);
+      return () => clearTimeout(t);
     }
-    if (timerSetting === 0) {
-      engine.onCapturePhoto({ aspect });
-      return;
+    if (index >= count) setIndex(count - 1);
+  }, [count, index, onClose]);
+  (0, import_react3.useEffect)(() => {
+    setConfirmingDelete(false);
+  }, [clamped]);
+  (0, import_react3.useEffect)(() => {
+    primeMedia([
+      items[clamped - 2],
+      items[clamped - 1],
+      items[clamped + 1],
+      items[clamped + 2]
+    ]);
+  }, [items, clamped]);
+  (0, import_react3.useEffect)(() => {
+    if (keysDisabled) return;
+    const onKey = (e) => {
+      if (e.key === "ArrowRight") go(1);
+      else if (e.key === "ArrowLeft") go(-1);
+      else if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [go, onClose, keysDisabled]);
+  const onPointerDown = (0, import_react3.useCallback)((e) => {
+    if (e.target.closest("video, audio")) return;
+    dragRef.current = {
+      x0: e.clientX,
+      y0: e.clientY,
+      t0: performance.now(),
+      axis: null,
+      pointerId: e.pointerId
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setSettling(false);
+  }, []);
+  const onPointerMove = (0, import_react3.useCallback)((e) => {
+    const d = dragRef.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    const dx = e.clientX - d.x0;
+    const dy = e.clientY - d.y0;
+    if (d.axis === null) {
+      if (Math.abs(dx) < DIRECTION_LOCK_PX && Math.abs(dy) < DIRECTION_LOCK_PX)
+        return;
+      d.axis = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
     }
-    let remaining = timerSetting;
-    setCountdown(remaining);
-    countdownRef.current = setInterval(() => {
-      remaining -= 1;
-      if (remaining <= 0) {
-        clearCountdown();
-        engine.onCapturePhoto({ aspect });
-      } else {
-        setCountdown(remaining);
-      }
-    }, 1e3);
-  }, [mode, engine, countdown, timerSetting, aspect, clearCountdown]);
-  const cycleTimer = (0, import_react2.useCallback)(() => {
-    setTimerSetting((t) => t === 0 ? 3 : t === 3 ? 10 : 0);
+    setDrag(d.axis === "x" ? { dx, dy: 0 } : { dx: 0, dy });
   }, []);
-  const coreTiles = [
-    ...controls.torchSupported ? [
-      {
-        id: "flash",
-        label: "Flash",
-        icon: controls.torchOn ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Zap, { className: "h-6 w-6", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ZapOff, { className: "h-6 w-6" }),
-        active: controls.torchOn,
-        onPress: controls.toggleTorch
+  const endDrag = (0, import_react3.useCallback)(
+    (e) => {
+      const d = dragRef.current;
+      if (!d || e.pointerId !== d.pointerId) return;
+      dragRef.current = null;
+      const dx = e.clientX - d.x0;
+      const dy = e.clientY - d.y0;
+      const dt = Math.max(1, performance.now() - d.t0);
+      const vx = dx / dt;
+      if (d.axis === "y" && Math.abs(dy) > DISMISS_TRIGGER_PX) {
+        onClose();
+        return;
       }
-    ] : [],
-    {
-      id: "timer",
-      label: "Timer",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Timer, { className: "h-6 w-6" }),
-      active: timerSetting !== 0,
-      valueLabel: timerSetting === 0 ? void 0 : `${timerSetting}s`,
-      onPress: cycleTimer
-    },
-    {
-      id: "grid",
-      label: "Grid",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Grid3x3, { className: "h-6 w-6" }),
-      active: gridOn,
-      onPress: () => setGridOn((g) => !g)
-    },
-    // Aspect applies to PHOTO output (center-cropped from the full sensor).
-    {
-      id: "aspect",
-      label: "Aspect",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Proportions, { className: "h-6 w-6" }),
-      active: aspect !== "full",
-      valueLabel: aspect === "full" ? void 0 : aspect,
-      onPress: () => setAspect(
-        (a) => ASPECT_CYCLE[(ASPECT_CYCLE.indexOf(a) + 1) % ASPECT_CYCLE.length] ?? "full"
-      )
-    },
-    ...controls.exposureSupported ? [
-      {
-        id: "exposure",
-        label: "Exposure",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.SunMedium, { className: "h-6 w-6" }),
-        active: controls.exposure !== 0 || exposureOpen,
-        valueLabel: controls.exposure === 0 ? void 0 : `${controls.exposure > 0 ? "+" : ""}${controls.exposure}`,
-        onPress: () => setExposureOpen((o) => !o)
+      if (d.axis === "x") {
+        const flick = Math.abs(dx) > 10 && Math.abs(vx) > SWIPE_TRIGGER_VELOCITY;
+        if ((dx < -SWIPE_TRIGGER_PX || flick && dx < 0) && clamped < count - 1) {
+          go(1);
+          return;
+        }
+        if ((dx > SWIPE_TRIGGER_PX || flick && dx > 0) && clamped > 0) {
+          go(-1);
+          return;
+        }
       }
-    ] : []
-  ];
-  const tiles = [...coreTiles, ...slots.optionTiles ?? []];
-  const blocked = engine.blocked !== null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "absolute inset-0 select-none overflow-hidden bg-black", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0", children: preview }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GridOverlay, { visible: gridOn && !blocked }),
-    mode === "photo" && aspect !== "full" && !blocked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      setDrag(null);
+      setSettling(true);
+    },
+    [clamped, count, go, onClose]
+  );
+  const neighborKeys = (0, import_react3.useMemo)(() => {
+    const wanted = [];
+    for (const i of [clamped - 1, clamped + 1]) {
+      const m = items[i];
+      if (m) wanted.push(m);
+    }
+    return wanted;
+  }, [items, clamped]);
+  if (!current) return null;
+  const canEdit = onEdit && current.kind === "photo";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute inset-0 z-40 flex flex-col bg-black", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
-        "aria-hidden": true,
-        className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "div",
-          {
-            className: "shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]",
-            style: {
-              aspectRatio: aspect === "1:1" ? "1 / 1" : aspect === "4:3" ? "3 / 4" : "9 / 16",
-              width: aspect === "16:9" ? "100%" : void 0,
-              height: aspect === "16:9" ? void 0 : "70%",
-              maxWidth: "100%",
-              maxHeight: "100%"
+        className: "absolute inset-x-0 top-0 z-20 flex items-center justify-between bg-gradient-to-b from-black/70 to-transparent p-3",
+        style: safeTop,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close viewer",
+              className: "flex h-10 w-10 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.X, { className: "h-5 w-5" })
             }
-          }
-        )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "rounded-full bg-black/50 px-3 py-1 text-sm tabular-nums text-white/90", children: [
+            clamped + 1,
+            " / ",
+            count
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-1", children: [
+            canEdit ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => onEdit(current),
+                "aria-label": "Edit this photo",
+                className: "flex h-10 w-10 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Pencil, { className: "h-5 w-5" })
+              }
+            ) : null,
+            onDelete ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setConfirmingDelete(true),
+                "aria-label": "Delete this file",
+                className: "flex h-10 w-10 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Trash2, { className: "h-5 w-5" })
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "h-10 w-10", "aria-hidden": true })
+          ] })
+        ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CountdownOverlay, { seconds: countdown }),
-    !controlsHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-x-0 top-0 z-20 bg-black/65 pt-safe backdrop-blur-[2px]", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex h-11 items-center gap-0.5 px-1.5", children: [
-      onClose ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        "button",
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
         {
-          type: "button",
-          onClick: onClose,
-          "aria-label": "Close camera",
-          className: "flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.X, { className: "h-5 w-5" })
+          className: "absolute inset-0 touch-none",
+          style: {
+            transform: drag ? `translate(${drag.dx}px, ${drag.dy}px)` : "translate(0px, 0px)",
+            transition: settling ? "transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1)" : "none",
+            opacity: drag?.dy ? Math.max(0.4, 1 - Math.abs(drag.dy) / 400) : 1
+          },
+          onPointerDown,
+          onPointerMove,
+          onPointerUp: endDrag,
+          onPointerCancel: endDrag,
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerSlide, { item: current, active: true }, current.key)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 opacity-0",
+          children: neighborKeys.map((m) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerSlide, { item: m, active: false }) }, m.key))
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-10 shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "min-w-0 flex-1", children: slots.topBarCenter }),
-      controls.torchSupported && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ),
+      clamped > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
-          onClick: controls.toggleTorch,
-          "aria-label": controls.torchOn ? "Turn flash off" : "Turn flash on",
-          "aria-pressed": controls.torchOn,
-          className: cn(
-            "flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full transition-colors",
-            controls.torchOn ? "text-[#FFCC00]" : "text-white hover:bg-white/10"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_lucide_react2.Zap,
-            {
-              className: "h-5 w-5",
-              fill: controls.torchOn ? "currentColor" : "none"
-            }
-          )
+          onClick: () => go(-1),
+          "aria-label": "Previous file",
+          className: "absolute left-2 top-1/2 z-20 hidden h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 sm:flex",
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.ChevronLeft, { className: "h-6 w-6" })
         }
       ),
-      slots.topBarTrailing,
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      clamped < count - 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => setOptionsOpen((o) => !o),
-          "aria-label": "More camera options",
-          "aria-expanded": optionsOpen,
-          className: cn(
-            "flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full transition-colors",
-            optionsOpen ? "bg-white/20 text-white" : "text-white hover:bg-white/10"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Grip, { className: "h-5 w-5" })
+          onClick: () => go(1),
+          "aria-label": "Next file",
+          className: "absolute right-2 top-1/2 z-20 hidden h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 sm:flex",
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.ChevronRight, { className: "h-6 w-6" })
         }
       )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pointer-events-none absolute inset-x-0 top-[50px] z-20 mt-safe flex flex-col items-center gap-1.5", children: [
-      engine.recording && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm font-medium text-white", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-2.5 w-2.5 animate-pulse rounded-full bg-[#FF3B30]" }),
-        formatElapsed(engine.recordElapsedSeconds)
-      ] }),
-      slots.statusChips
     ] }),
-    !controlsHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "absolute inset-x-0 bottom-0 z-20", children: [
-      !blocked && controls.zoomOptions.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        ZoomRow,
-        {
-          options: controls.zoomOptions,
-          value: controls.zoom,
-          onSelect: controls.setZoom
-        }
-      ) }),
-      slots.aboveBar && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mb-1.5 px-2", children: slots.aboveBar }),
-      exposureOpen && controls.exposureSupported && controls.exposureRange && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mx-auto mb-3 flex w-64 items-center gap-3 rounded-full bg-black/55 px-4 py-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.SunMedium, { className: "h-4 w-4 shrink-0 text-[#FFCC00]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "input",
+    confirmingDelete && onDelete && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        className: "absolute inset-x-0 bottom-0 z-30 bg-black/85 px-4 pt-4 backdrop-blur-sm",
+        style: {
+          paddingBottom: "calc(1rem + env(safe-area-inset-bottom, 0px))"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "pb-3 text-center text-sm text-white/85", children: [
+            "Delete this ",
+            current.kind === "video" ? "video" : current.kind === "audio" ? "voice note" : "photo",
+            "? ",
+            deleteConsequence
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setConfirmingDelete(false),
+                className: "h-11 touch-manipulation rounded-full bg-white/15 px-6 text-sm font-medium text-white",
+                children: "Keep it"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setConfirmingDelete(false);
+                  onDelete(current);
+                },
+                className: "h-11 touch-manipulation rounded-full bg-[#FF3B30] px-6 text-sm font-semibold text-white",
+                children: "Delete"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    count > 1 && count <= 12 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center gap-1.5",
+        style: safeMarginBottom,
+        children: items.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "span",
           {
-            type: "range",
-            min: controls.exposureRange.min,
-            max: controls.exposureRange.max,
-            step: controls.exposureRange.step,
-            value: controls.exposure,
-            onChange: (e) => controls.setExposure(Number(e.target.value)),
-            "aria-label": "Exposure compensation",
-            className: "w-full accent-[#FFCC00]"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "w-8 shrink-0 text-right text-xs tabular-nums text-white", children: [
-          controls.exposure > 0 ? "+" : "",
-          controls.exposure
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "bg-black/65 px-3 pb-safe backdrop-blur-[2px]", children: [
-        slots.aboveModeSelector,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-center gap-2 py-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            ModeSelector,
-            {
-              mode,
-              onModeChange,
-              onUpload: engine.onUpload,
-              modeDisabled: engine.recording,
-              uploadDisabled: shutterDisabled && !blocked,
-              extraModes: slots.extraModes
-            }
-          ),
-          slots.modeRowTrailing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "shrink-0", children: slots.modeRowTrailing })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between px-2 pb-1.5 pt-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex w-14 justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: cloud.onOpenLibrary,
-              "aria-label": "Open your media library",
-              className: "h-11 w-11 touch-manipulation overflow-hidden rounded-xl bg-white/10 ring-1 ring-white/25 transition-transform active:scale-95",
-              children: cloud.recentsThumb ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "block h-full w-full bg-white/5" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            ShutterButton,
-            {
-              mode,
-              recording: engine.recording,
-              disabled: shutterDisabled || blocked,
-              onPress: onShutter
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex w-14 justify-end", children: engine.onFlipCamera ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: engine.onFlipCamera,
-              "aria-label": "Switch camera",
-              className: "flex h-11 w-11 touch-manipulation items-center justify-center rounded-full bg-white/15 text-white transition-transform active:rotate-180 active:scale-95 duration-300",
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.RefreshCw, { className: "h-5 w-5" })
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-11 w-11" }) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      OptionsGridPanel,
-      {
-        open: optionsOpen && !controlsHidden,
-        onClose: () => setOptionsOpen(false),
-        tiles
+            className: cn(
+              "h-1.5 w-1.5 rounded-full transition-colors",
+              i === clamped ? "bg-white" : "bg-white/35"
+            )
+          },
+          m.key
+        ))
       }
-    ),
-    blocked && blockedSheet && !blockedDismissed && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      CaptureSheet,
+    )
+  ] });
+}
+function ViewerSlide({
+  item,
+  active
+}) {
+  const url = useMediaUrl(item);
+  if (!url) {
+    return active ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "h-8 w-8 animate-spin rounded-full border-2 border-white/30 border-t-white" }) }) : null;
+  }
+  if (item.kind === "audio") {
+    if (!active) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-6 px-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          className: "h-12 w-12 stroke-white/80",
+          fill: "none",
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          "aria-hidden": true,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 2v12" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 6v6M17 6v6M2 9v2M22 9v2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "19", r: "3" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("audio", { src: url, controls: true, className: "w-full max-w-sm" })
+    ] });
+  }
+  if (item.kind === "video") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "video",
       {
-        open: true,
-        onClose: () => setBlockedDismissed(true),
-        body: blockedSheet.body,
-        title: "Camera unavailable",
-        actions: blockedSheet.actions
+        src: url,
+        controls: active,
+        playsInline: true,
+        preload: active ? "auto" : "metadata",
+        muted: !active,
+        className: cn(
+          "absolute inset-0 h-full w-full object-contain",
+          active ? "pointer-events-auto" : "pointer-events-none"
+        )
       }
-    ),
-    slots.overlays
-  ] });
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "img",
+    {
+      src: url,
+      alt: "",
+      draggable: false,
+      decoding: active ? "auto" : "async",
+      className: "absolute inset-0 h-full w-full select-none object-contain"
+    }
+  );
 }
 
 // src/components/ImageEditSheet.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ASPECTS = [
   { id: "free", label: "Free", ratio: null },
   { id: "1:1", label: "Square", ratio: 1 },
@@ -738,43 +980,83 @@ function ImageEditSheet({
   onClose,
   onSave
 }) {
-  const [rotation, setRotation] = (0, import_react3.useState)(0);
-  const [flipped, setFlipped] = (0, import_react3.useState)(false);
-  const [aspect, setAspect] = (0, import_react3.useState)("free");
-  const [crop, setCrop] = (0, import_react3.useState)(FULL_CROP);
-  const [saving, setSaving] = (0, import_react3.useState)(false);
-  const stageRef = (0, import_react3.useRef)(null);
-  const imgRef = (0, import_react3.useRef)(null);
-  const dragRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const [workingSrc, setWorkingSrc] = (0, import_react4.useState)(null);
+  const [aspect, setAspect] = (0, import_react4.useState)("free");
+  const [crop, setCrop] = (0, import_react4.useState)(FULL_CROP);
+  const [saving, setSaving] = (0, import_react4.useState)(false);
+  const [editError, setEditError] = (0, import_react4.useState)(null);
+  const stageRef = (0, import_react4.useRef)(null);
+  const imgRef = (0, import_react4.useRef)(null);
+  const ownedUrlsRef = (0, import_react4.useRef)([]);
+  const dragRef = (0, import_react4.useRef)(null);
+  const revokeOwned = (0, import_react4.useCallback)(() => {
+    for (const url of ownedUrlsRef.current) URL.revokeObjectURL(url);
+    ownedUrlsRef.current = [];
+  }, []);
+  (0, import_react4.useEffect)(() => {
     if (open) {
-      setRotation(0);
-      setFlipped(false);
+      setWorkingSrc(null);
       setAspect("free");
       setCrop(FULL_CROP);
       setSaving(false);
+      setEditError(null);
     }
-  }, [open, src]);
-  const applyAspect = (0, import_react3.useCallback)((preset) => {
+    return revokeOwned;
+  }, [open, src, revokeOwned]);
+  const bake = (0, import_react4.useCallback)(
+    (op) => {
+      const img = imgRef.current;
+      if (!img || img.naturalWidth === 0 || saving) return;
+      try {
+        const swap = op === "rotate-left";
+        const canvas = document.createElement("canvas");
+        canvas.width = swap ? img.naturalHeight : img.naturalWidth;
+        canvas.height = swap ? img.naturalWidth : img.naturalHeight;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) throw new Error("no 2d context");
+        ctx.translate(canvas.width / 2, canvas.height / 2);
+        if (swap) ctx.rotate(-Math.PI / 2);
+        else ctx.scale(-1, 1);
+        ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              setEditError(
+                "This image is too large to process on this device."
+              );
+              return;
+            }
+            revokeOwned();
+            const url = URL.createObjectURL(blob);
+            ownedUrlsRef.current.push(url);
+            setWorkingSrc(url);
+            setCrop(FULL_CROP);
+            setAspect("free");
+            setEditError(null);
+          },
+          "image/jpeg",
+          0.95
+        );
+      } catch {
+        setEditError("This image could not be edited on this device.");
+      }
+    },
+    [saving, revokeOwned]
+  );
+  const applyAspect = (0, import_react4.useCallback)((preset) => {
     setAspect(preset);
     const ratio = ASPECTS.find((a) => a.id === preset)?.ratio ?? null;
     if (ratio === null) return;
     const img = imgRef.current;
     if (!img || img.naturalWidth === 0) return;
-    const rotated = rotationSwapsAxes();
-    const iw = rotated ? img.naturalHeight : img.naturalWidth;
-    const ih = rotated ? img.naturalWidth : img.naturalHeight;
-    const imageRatio = iw / ih;
+    const imageRatio = img.naturalWidth / img.naturalHeight;
     let w = 1;
     let h = 1;
     if (ratio > imageRatio) h = imageRatio / ratio;
     else w = ratio / imageRatio;
     setCrop({ x: (1 - w) / 2, y: (1 - h) / 2, w, h });
-    function rotationSwapsAxes() {
-      return rotation % 180 !== 0;
-    }
-  }, [rotation]);
-  const onPointerDown = (0, import_react3.useCallback)(
+  }, []);
+  const onPointerDown = (0, import_react4.useCallback)(
     (kind) => (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -788,7 +1070,7 @@ function ImageEditSheet({
     },
     [crop]
   );
-  const onPointerMove = (0, import_react3.useCallback)(
+  const onPointerMove = (0, import_react4.useCallback)(
     (e) => {
       const drag = dragRef.current;
       const img = imgRef.current;
@@ -826,35 +1108,31 @@ function ImageEditSheet({
     },
     [aspect]
   );
-  const onPointerUp = (0, import_react3.useCallback)(() => {
+  const onPointerUp = (0, import_react4.useCallback)(() => {
     dragRef.current = null;
   }, []);
-  const save = (0, import_react3.useCallback)(() => {
+  const save = (0, import_react4.useCallback)(() => {
     const img = imgRef.current;
     if (!img || img.naturalWidth === 0) return;
     setSaving(true);
+    setEditError(null);
     try {
-      const swap = rotation % 180 !== 0;
-      const outW = Math.round((swap ? img.naturalHeight : img.naturalWidth) * crop.w);
-      const outH = Math.round((swap ? img.naturalWidth : img.naturalHeight) * crop.h);
       const canvas = document.createElement("canvas");
-      canvas.width = Math.max(1, outW);
-      canvas.height = Math.max(1, outH);
+      canvas.width = Math.max(1, Math.round(img.naturalWidth * crop.w));
+      canvas.height = Math.max(1, Math.round(img.naturalHeight * crop.h));
       const ctx = canvas.getContext("2d");
       if (!ctx) throw new Error("no 2d context");
-      const rw = swap ? img.naturalHeight : img.naturalWidth;
-      const rh = swap ? img.naturalWidth : img.naturalHeight;
-      ctx.translate(-crop.x * rw, -crop.y * rh);
-      ctx.translate(rw / 2, rh / 2);
-      ctx.rotate(rotation * Math.PI / 180);
-      if (flipped) ctx.scale(-1, 1);
-      ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
+      ctx.drawImage(img, -crop.x * img.naturalWidth, -crop.y * img.naturalHeight);
       canvas.toBlob(
         (blob) => {
           setSaving(false);
           if (blob) {
             onSave(blob);
             onClose();
+          } else {
+            setEditError(
+              "Saving failed on this device \u2014 try a smaller crop."
+            );
           }
         },
         "image/jpeg",
@@ -863,41 +1141,49 @@ function ImageEditSheet({
     } catch (err) {
       console.error("[capture-camera] edit save failed", err);
       setSaving(false);
+      setEditError("Saving failed on this device \u2014 try again.");
     }
-  }, [rotation, flipped, crop, onSave, onClose]);
+  }, [crop, onSave, onClose]);
   if (!open || !src) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute inset-0 z-50 flex flex-col bg-black", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex shrink-0 items-center justify-between px-4 pt-safe", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          "aria-label": "Cancel editing",
-          className: "flex h-11 items-center gap-1.5 rounded-full px-3 text-[15px] font-medium text-white",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.X, { className: "h-5 w-5" }),
-            "Cancel"
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[15px] font-semibold text-white/90", children: "Edit" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: save,
-          disabled: saving,
-          "aria-label": "Save edited image",
-          className: "flex h-11 items-center gap-1.5 rounded-full px-3 text-[15px] font-semibold text-[#FFCC00] disabled:opacity-50",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "h-5 w-5" }),
-            "Save"
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "absolute inset-0 z-50 flex flex-col bg-black", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        className: "flex shrink-0 items-center justify-between px-4",
+        style: { paddingTop: "env(safe-area-inset-top, 0px)" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Cancel editing",
+              className: "flex h-11 items-center gap-1.5 rounded-full px-3 text-[15px] font-medium text-white",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.X, { className: "h-5 w-5" }),
+                "Cancel"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[15px] font-semibold text-white/90", children: "Edit" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: save,
+              disabled: saving,
+              "aria-label": "Save edited image",
+              className: "flex h-11 items-center gap-1.5 rounded-full px-3 text-[15px] font-semibold text-[#FFCC00] disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Check, { className: "h-5 w-5" }),
+                "Save"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         ref: stageRef,
@@ -905,21 +1191,18 @@ function ImageEditSheet({
         onPointerMove,
         onPointerUp,
         onPointerCancel: onPointerUp,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative max-h-full max-w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative max-h-full max-w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "img",
             {
               ref: imgRef,
-              src,
+              src: workingSrc ?? src,
               alt: "Image being edited",
               draggable: false,
-              className: "max-h-[62dvh] max-w-full select-none object-contain",
-              style: {
-                transform: `rotate(${rotation}deg) ${flipped ? "scaleX(-1)" : ""}`
-              }
+              className: "max-h-[62dvh] max-w-full select-none object-contain"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "div",
             {
               role: "presentation",
@@ -931,7 +1214,7 @@ function ImageEditSheet({
                 width: `${crop.w * 100}%`,
                 height: `${crop.h * 100}%`
               },
-              children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "span",
                 {
                   role: "presentation",
@@ -952,8 +1235,9 @@ function ImageEditSheet({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "shrink-0 pb-safe", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center gap-2 pb-2", children: ASPECTS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "shrink-0", style: { paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
+      editError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "px-6 pb-2 text-center text-sm text-[#FF6961]", children: editError }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center justify-center gap-2 pb-2", children: ASPECTS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -967,37 +1251,676 @@ function ImageEditSheet({
         },
         a.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-center gap-6 pb-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center gap-6 pb-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             type: "button",
-            onClick: () => {
-              setRotation((r) => (r + 270) % 360);
-              setCrop(FULL_CROP);
-              setAspect("free");
-            },
+            onClick: () => bake("rotate-left"),
             "aria-label": "Rotate left",
             className: "flex h-12 w-12 touch-manipulation items-center justify-center rounded-full bg-white/10 text-white",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.RotateCcw, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.RotateCcw, { className: "h-5 w-5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             type: "button",
-            onClick: () => setFlipped((f) => !f),
+            onClick: () => bake("flip"),
             "aria-label": "Flip horizontally",
-            "aria-pressed": flipped,
-            className: cn(
-              "flex h-12 w-12 touch-manipulation items-center justify-center rounded-full bg-white/10",
-              flipped ? "text-[#FFCC00]" : "text-white"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.FlipHorizontal2, { className: "h-5 w-5" })
+            className: "flex h-12 w-12 touch-manipulation items-center justify-center rounded-full bg-white/10 text-white",
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.FlipHorizontal2, { className: "h-5 w-5" })
           }
         )
       ] })
     ] })
   ] });
 }
+
+// src/components/CameraCapture.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function formatElapsed(totalSeconds) {
+  const m = Math.floor(totalSeconds / 60);
+  const s = String(totalSeconds % 60).padStart(2, "0");
+  return `${m}:${s}`;
+}
+var ASPECT_CYCLE = ["full", "4:3", "1:1", "16:9"];
+function CameraCapture({
+  engine,
+  cloud,
+  mode,
+  onModeChange,
+  preview,
+  media,
+  onReviewOpenChange,
+  onClose,
+  blockedSheet,
+  controlsHidden = false,
+  shutterDisabled = false,
+  slots = {}
+}) {
+  const [optionsOpen, setOptionsOpen] = (0, import_react5.useState)(false);
+  const [viewerKey, setViewerKey] = (0, import_react5.useState)(null);
+  const [editTarget, setEditTarget] = (0, import_react5.useState)(null);
+  const [gridOn, setGridOn] = (0, import_react5.useState)(false);
+  const [timerSetting, setTimerSetting] = (0, import_react5.useState)(0);
+  const [aspect, setAspect] = (0, import_react5.useState)("full");
+  const [exposureOpen, setExposureOpen] = (0, import_react5.useState)(false);
+  const [countdown, setCountdown] = (0, import_react5.useState)(null);
+  const [blockedDismissed, setBlockedDismissed] = (0, import_react5.useState)(false);
+  const countdownRef = (0, import_react5.useRef)(null);
+  const controls = useTrackControls(engine.stream);
+  const reviewOpen = viewerKey !== null || editTarget !== null;
+  (0, import_react5.useEffect)(() => {
+    onReviewOpenChange?.(reviewOpen);
+  }, [reviewOpen, onReviewOpenChange]);
+  const clearCountdown = (0, import_react5.useCallback)(() => {
+    if (countdownRef.current) clearInterval(countdownRef.current);
+    countdownRef.current = null;
+    setCountdown(null);
+  }, []);
+  (0, import_react5.useEffect)(() => clearCountdown, [clearCountdown]);
+  (0, import_react5.useEffect)(() => {
+    if (mode !== "photo") clearCountdown();
+  }, [mode, clearCountdown]);
+  const onShutter = (0, import_react5.useCallback)(() => {
+    if (mode === "video") {
+      if (engine.recording) engine.onStopRecording();
+      else engine.onStartRecording();
+      return;
+    }
+    if (countdown !== null) {
+      clearCountdown();
+      return;
+    }
+    if (timerSetting === 0) {
+      engine.onCapturePhoto({ aspect });
+      return;
+    }
+    let remaining = timerSetting;
+    setCountdown(remaining);
+    countdownRef.current = setInterval(() => {
+      remaining -= 1;
+      if (remaining <= 0) {
+        clearCountdown();
+        engine.onCapturePhoto({ aspect });
+      } else {
+        setCountdown(remaining);
+      }
+    }, 1e3);
+  }, [mode, engine, countdown, timerSetting, aspect, clearCountdown]);
+  const cycleTimer = (0, import_react5.useCallback)(() => {
+    setTimerSetting((t) => t === 0 ? 3 : t === 3 ? 10 : 0);
+  }, []);
+  const coreTiles = [
+    ...controls.torchSupported ? [
+      {
+        id: "flash",
+        label: "Flash",
+        icon: controls.torchOn ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Zap, { className: "h-6 w-6", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ZapOff, { className: "h-6 w-6" }),
+        active: controls.torchOn,
+        onPress: controls.toggleTorch
+      }
+    ] : [],
+    {
+      id: "timer",
+      label: "Timer",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Timer, { className: "h-6 w-6" }),
+      active: timerSetting !== 0,
+      valueLabel: timerSetting === 0 ? void 0 : `${timerSetting}s`,
+      onPress: cycleTimer
+    },
+    {
+      id: "grid",
+      label: "Grid",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Grid3x3, { className: "h-6 w-6" }),
+      active: gridOn,
+      onPress: () => setGridOn((g) => !g)
+    },
+    // Aspect applies to PHOTO output (center-cropped from the full sensor).
+    {
+      id: "aspect",
+      label: "Aspect",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Proportions, { className: "h-6 w-6" }),
+      active: aspect !== "full",
+      valueLabel: aspect === "full" ? void 0 : aspect,
+      onPress: () => setAspect(
+        (a) => ASPECT_CYCLE[(ASPECT_CYCLE.indexOf(a) + 1) % ASPECT_CYCLE.length] ?? "full"
+      )
+    },
+    ...controls.exposureSupported ? [
+      {
+        id: "exposure",
+        label: "Exposure",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.SunMedium, { className: "h-6 w-6" }),
+        active: controls.exposure !== 0 || exposureOpen,
+        valueLabel: controls.exposure === 0 ? void 0 : `${controls.exposure > 0 ? "+" : ""}${controls.exposure}`,
+        onPress: () => setExposureOpen((o) => !o)
+      }
+    ] : []
+  ];
+  const tiles = [...coreTiles, ...slots.optionTiles ?? []];
+  const blocked = engine.blocked !== null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute inset-0 select-none overflow-hidden bg-black", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0", children: preview }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(GridOverlay, { visible: gridOn && !blocked }),
+    mode === "photo" && aspect !== "full" && !blocked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: "shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]",
+            style: {
+              aspectRatio: aspect === "1:1" ? "1 / 1" : aspect === "4:3" ? "3 / 4" : "9 / 16",
+              width: aspect === "16:9" ? "100%" : void 0,
+              height: aspect === "16:9" ? void 0 : "70%",
+              maxWidth: "100%",
+              maxHeight: "100%"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CountdownOverlay, { seconds: countdown }),
+    !controlsHidden && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        className: "absolute inset-x-0 top-0 z-20 bg-black/65 backdrop-blur-[2px]",
+        style: safeTop,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex h-11 items-center gap-0.5 px-1.5", children: [
+          onClose ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close camera",
+              className: "flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.X, { className: "h-5 w-5" })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-10 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "min-w-0 flex-1", children: slots.topBarCenter }),
+          controls.torchSupported && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: controls.toggleTorch,
+              "aria-label": controls.torchOn ? "Turn flash off" : "Turn flash on",
+              "aria-pressed": controls.torchOn,
+              className: cn(
+                "flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full transition-colors",
+                controls.torchOn ? "text-[#FFCC00]" : "text-white hover:bg-white/10"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_lucide_react4.Zap,
+                {
+                  className: "h-5 w-5",
+                  fill: controls.torchOn ? "currentColor" : "none"
+                }
+              )
+            }
+          ),
+          slots.topBarTrailing,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOptionsOpen((o) => !o),
+              "aria-label": "More camera options",
+              "aria-expanded": optionsOpen,
+              className: cn(
+                "flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full transition-colors",
+                optionsOpen ? "bg-white/20 text-white" : "text-white hover:bg-white/10"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Grip, { className: "h-5 w-5" })
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 top-[50px] z-20 flex flex-col items-center gap-1.5",
+        style: safeMarginTop,
+        children: [
+          engine.recording && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm font-medium text-white", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "h-2.5 w-2.5 animate-pulse rounded-full bg-[#FF3B30]" }),
+            formatElapsed(engine.recordElapsedSeconds)
+          ] }),
+          slots.statusChips
+        ]
+      }
+    ),
+    !controlsHidden && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute inset-x-0 bottom-0 z-20", children: [
+      !blocked && controls.zoomOptions.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ZoomRow,
+        {
+          options: controls.zoomOptions,
+          value: controls.zoom,
+          onSelect: controls.setZoom
+        }
+      ) }),
+      media && media.items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mb-1.5 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        CaptureFilmstrip,
+        {
+          items: media.items,
+          onOpen: (item) => setViewerKey(item.key)
+        }
+      ) }),
+      slots.aboveBar && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mb-1.5 px-2", children: slots.aboveBar }),
+      exposureOpen && controls.exposureSupported && controls.exposureRange && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mx-auto mb-3 flex w-64 items-center gap-3 rounded-full bg-black/55 px-4 py-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.SunMedium, { className: "h-4 w-4 shrink-0 text-[#FFCC00]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "input",
+          {
+            type: "range",
+            min: controls.exposureRange.min,
+            max: controls.exposureRange.max,
+            step: controls.exposureRange.step,
+            value: controls.exposure,
+            onChange: (e) => controls.setExposure(Number(e.target.value)),
+            "aria-label": "Exposure compensation",
+            className: "w-full accent-[#FFCC00]"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "w-8 shrink-0 text-right text-xs tabular-nums text-white", children: [
+          controls.exposure > 0 ? "+" : "",
+          controls.exposure
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "div",
+        {
+          className: "bg-black/65 px-3 backdrop-blur-[2px]",
+          style: safeBottom,
+          children: [
+            slots.aboveModeSelector,
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-2 py-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                ModeSelector,
+                {
+                  mode,
+                  onModeChange,
+                  onUpload: engine.onUpload,
+                  modeDisabled: engine.recording,
+                  uploadDisabled: shutterDisabled && !blocked,
+                  extraModes: slots.extraModes
+                }
+              ),
+              slots.modeRowTrailing && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "shrink-0", children: slots.modeRowTrailing })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between px-2 pb-1.5 pt-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-14 justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: cloud.onOpenLibrary,
+                  "aria-label": "Open your media library",
+                  className: "h-11 w-11 touch-manipulation overflow-hidden rounded-xl bg-white/10 ring-1 ring-white/25 transition-transform active:scale-95",
+                  children: cloud.recentsThumb ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "block h-full w-full bg-white/5" })
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                ShutterButton,
+                {
+                  mode,
+                  recording: engine.recording,
+                  disabled: shutterDisabled || blocked,
+                  onPress: onShutter
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-14 justify-end", children: engine.onFlipCamera ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: engine.onFlipCamera,
+                  "aria-label": "Switch camera",
+                  className: "flex h-11 w-11 touch-manipulation items-center justify-center rounded-full bg-white/15 text-white transition-transform active:rotate-180 active:scale-95 duration-300",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.RefreshCw, { className: "h-5 w-5" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "h-11 w-11" }) })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      OptionsGridPanel,
+      {
+        open: optionsOpen && !controlsHidden,
+        onClose: () => setOptionsOpen(false),
+        tiles
+      }
+    ),
+    blocked && blockedSheet && !blockedDismissed && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      CaptureSheet,
+      {
+        open: true,
+        onClose: () => setBlockedDismissed(true),
+        body: blockedSheet.body,
+        title: "Camera unavailable",
+        actions: blockedSheet.actions
+      }
+    ),
+    media && viewerKey !== null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      MediaViewer,
+      {
+        items: media.items,
+        initialKey: viewerKey,
+        keysDisabled: editTarget !== null,
+        onClose: () => setViewerKey(null),
+        onDelete: media.onDelete ? (item) => {
+          media.onDelete?.(item.key);
+          invalidateMedia(item.key);
+        } : void 0,
+        onEdit: media.onReplacePhoto ? (item) => {
+          const url = getMediaUrl(item);
+          if (url) setEditTarget({ key: item.key, url });
+        } : void 0
+      }
+    ),
+    media?.onReplacePhoto && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ImageEditSheet,
+      {
+        open: editTarget !== null,
+        src: editTarget?.url ?? null,
+        onClose: () => setEditTarget(null),
+        onSave: (blob) => {
+          const target = editTarget;
+          setEditTarget(null);
+          setViewerKey(null);
+          if (target) {
+            media.onReplacePhoto?.(target.key, blob);
+            invalidateMedia(target.key);
+          }
+        }
+      }
+    ),
+    slots.overlays
+  ] });
+}
+
+// src/components/CameraFeed.tsx
+var import_react6 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CameraFeed({
+  engine,
+  mirror = false
+}) {
+  const { stream, videoRef } = engine;
+  (0, import_react6.useEffect)(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.srcObject !== stream) video.srcObject = stream;
+    return () => {
+      video.srcObject = null;
+    };
+  }, [stream, videoRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "video",
+    {
+      ref: videoRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        ...mirror ? { transform: "scaleX(-1)" } : {}
+      },
+      muted: true,
+      autoPlay: true,
+      playsInline: true
+    }
+  );
+}
+
+// src/engine/useDefaultEngine.ts
+var import_react7 = require("react");
+var RECORDING_MIME_LADDER = [
+  'video/mp4;codecs="avc1.42E01E,mp4a.40.2"',
+  "video/mp4",
+  'video/webm;codecs="vp9,opus"',
+  'video/webm;codecs="vp8,opus"',
+  "video/webm"
+];
+function cropRect(w, h, aspect) {
+  if (aspect === "full") return { x: 0, y: 0, w, h };
+  const [aw, ah] = aspect === "1:1" ? [1, 1] : aspect === "4:3" ? [3, 4] : [9, 16];
+  const [rw, rh] = w >= h ? [ah, aw] : [aw, ah];
+  const target = rw / rh;
+  let cw = w;
+  let ch = w / target;
+  if (ch > h) {
+    ch = h;
+    cw = h * target;
+  }
+  return { x: (w - cw) / 2, y: (h - ch) / 2, w: cw, h: ch };
+}
+function useDefaultCaptureEngine(options) {
+  const {
+    onPhoto,
+    onVideo,
+    onFiles,
+    withAudio = true,
+    facingMode: initialFacing = "environment",
+    photoQuality = 0.92
+  } = options;
+  const [stream, setStream] = (0, import_react7.useState)(null);
+  const [blocked, setBlocked] = (0, import_react7.useState)(null);
+  const [facing, setFacing] = (0, import_react7.useState)(initialFacing);
+  const [multipleCameras, setMultipleCameras] = (0, import_react7.useState)(false);
+  const [recording, setRecording] = (0, import_react7.useState)(false);
+  const [recordElapsedSeconds, setRecordElapsedSeconds] = (0, import_react7.useState)(0);
+  const videoRef = (0, import_react7.useRef)(null);
+  const streamRef = (0, import_react7.useRef)(null);
+  const recorderRef = (0, import_react7.useRef)(null);
+  const callbacksRef = (0, import_react7.useRef)({ onPhoto, onVideo, onFiles });
+  callbacksRef.current = { onPhoto, onVideo, onFiles };
+  (0, import_react7.useEffect)(() => {
+    let cancelled = false;
+    let acquired = null;
+    if (typeof navigator === "undefined" || !navigator.mediaDevices) {
+      setBlocked({ reason: "not-supported" });
+      return;
+    }
+    navigator.mediaDevices.getUserMedia({
+      video: {
+        facingMode: facing,
+        width: { ideal: 4096 },
+        height: { ideal: 4096 }
+      },
+      audio: false
+    }).then((s) => {
+      if (cancelled) {
+        s.getTracks().forEach((t) => t.stop());
+        return;
+      }
+      acquired = s;
+      streamRef.current = s;
+      setStream(s);
+      setBlocked(null);
+      return navigator.mediaDevices.enumerateDevices().then((devices) => {
+        if (!cancelled)
+          setMultipleCameras(
+            devices.filter((d) => d.kind === "videoinput").length > 1
+          );
+      });
+    }).catch((err) => {
+      if (cancelled) return;
+      const name = err && typeof err === "object" && "name" in err ? String(err.name) : "";
+      setBlocked({
+        reason: name === "NotAllowedError" || name === "SecurityError" ? "permission-denied" : "not-supported"
+      });
+    });
+    return () => {
+      cancelled = true;
+      acquired?.getTracks().forEach((t) => t.stop());
+      if (streamRef.current === acquired) streamRef.current = null;
+      setStream(null);
+    };
+  }, [facing]);
+  (0, import_react7.useEffect)(() => {
+    return () => {
+      const r = recorderRef.current;
+      if (r) {
+        clearInterval(r.timer);
+        if (r.recorder.state !== "inactive") r.recorder.stop();
+        r.micTracks.forEach((t) => t.stop());
+      }
+    };
+  }, []);
+  const onCapturePhoto = (0, import_react7.useCallback)(
+    (opts) => {
+      const video = videoRef.current;
+      if (!video || video.videoWidth === 0) return;
+      const rect = cropRect(
+        video.videoWidth,
+        video.videoHeight,
+        opts?.aspect ?? "full"
+      );
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.round(rect.w);
+      canvas.height = Math.round(rect.h);
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.drawImage(
+        video,
+        rect.x,
+        rect.y,
+        rect.w,
+        rect.h,
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) return;
+          callbacksRef.current.onPhoto(
+            new File([blob], `capture-${(/* @__PURE__ */ new Date()).toISOString()}.jpg`, {
+              type: "image/jpeg"
+            })
+          );
+        },
+        "image/jpeg",
+        photoQuality
+      );
+    },
+    [photoQuality]
+  );
+  const onStartRecording = (0, import_react7.useCallback)(() => {
+    const base = streamRef.current;
+    if (!base || recorderRef.current) return;
+    void (async () => {
+      let micTracks = [];
+      if (withAudio) {
+        try {
+          const mic = await navigator.mediaDevices.getUserMedia({
+            audio: true
+          });
+          micTracks = mic.getAudioTracks();
+        } catch {
+        }
+      }
+      const composed = new MediaStream([
+        ...base.getVideoTracks(),
+        ...micTracks
+      ]);
+      const mime = RECORDING_MIME_LADDER.find(
+        (m) => typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported(m)
+      );
+      let recorder;
+      try {
+        recorder = new MediaRecorder(
+          composed,
+          mime ? { mimeType: mime } : void 0
+        );
+      } catch {
+        micTracks.forEach((t) => t.stop());
+        return;
+      }
+      const entry = {
+        recorder,
+        chunks: [],
+        startedAt: performance.now(),
+        micTracks,
+        timer: setInterval(() => {
+          setRecordElapsedSeconds(
+            Math.floor((performance.now() - entry.startedAt) / 1e3)
+          );
+        }, 250)
+      };
+      recorderRef.current = entry;
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) entry.chunks.push(e.data);
+      };
+      recorder.onstop = () => {
+        clearInterval(entry.timer);
+        entry.micTracks.forEach((t) => t.stop());
+        recorderRef.current = null;
+        setRecording(false);
+        const durationMs = Math.round(performance.now() - entry.startedAt);
+        const type = recorder.mimeType || entry.chunks[0]?.type || "video/webm";
+        const blob = new Blob(entry.chunks, { type });
+        const ext = type.includes("mp4") ? "mp4" : "webm";
+        callbacksRef.current.onVideo(
+          new File([blob], `capture-${(/* @__PURE__ */ new Date()).toISOString()}.${ext}`, {
+            type
+          }),
+          durationMs
+        );
+      };
+      recorder.start(1e3);
+      setRecordElapsedSeconds(0);
+      setRecording(true);
+    })();
+  }, [withAudio]);
+  const onStopRecording = (0, import_react7.useCallback)(() => {
+    const r = recorderRef.current;
+    if (r && r.recorder.state !== "inactive") r.recorder.stop();
+  }, []);
+  const onUpload = (0, import_react7.useCallback)(() => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*,video/*";
+    input.multiple = true;
+    input.onchange = () => {
+      if (input.files && input.files.length > 0)
+        callbacksRef.current.onFiles(input.files);
+    };
+    input.click();
+  }, []);
+  const onFlipCamera = (0, import_react7.useCallback)(() => {
+    setFacing((f) => f === "environment" ? "user" : "environment");
+  }, []);
+  return (0, import_react7.useMemo)(
+    () => ({
+      stream,
+      videoRef,
+      blocked,
+      onCapturePhoto,
+      onStartRecording,
+      onStopRecording,
+      recording,
+      recordElapsedSeconds,
+      onUpload,
+      onFlipCamera: multipleCameras ? onFlipCamera : null
+    }),
+    [
+      stream,
+      blocked,
+      onCapturePhoto,
+      onStartRecording,
+      onStopRecording,
+      recording,
+      recordElapsedSeconds,
+      onUpload,
+      onFlipCamera,
+      multipleCameras
+    ]
+  );
+}
 //# sourceMappingURL=react.cjs.map