@ai-matrx/capture 0.0.0 → 0.1.0

package/dist/react.cjs

@@ -0,0 +1,984 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.ts
+var react_exports = {};
+__export(react_exports, {
+  CameraCapture: () => CameraCapture,
+  CaptureSheet: () => CaptureSheet,
+  CountdownOverlay: () => CountdownOverlay,
+  GridOverlay: () => GridOverlay,
+  ImageEditSheet: () => ImageEditSheet,
+  ModeSelector: () => ModeSelector,
+  OptionsGridPanel: () => OptionsGridPanel,
+  ShutterButton: () => ShutterButton,
+  ZoomRow: () => ZoomRow,
+  useTrackControls: () => useTrackControls
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/components/CameraCapture.tsx
+var import_react2 = require("react");
+var import_lucide_react2 = require("lucide-react");
+
+// src/cn.ts
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)(inputs.filter(Boolean).join(" "));
+}
+
+// src/hooks/useTrackControls.ts
+var import_react = require("react");
+var ZOOM_LADDER = [0.5, 1, 2, 4, 8];
+function useTrackControls(stream) {
+  const [torchOn, setTorchOn] = (0, import_react.useState)(false);
+  const [zoom, setZoomState] = (0, import_react.useState)(1);
+  const [exposure, setExposureState] = (0, import_react.useState)(0);
+  const [caps, setCaps] = (0, import_react.useState)(null);
+  const track = stream?.getVideoTracks()[0] ?? null;
+  (0, import_react.useEffect)(() => {
+    setTorchOn(false);
+    if (!track || typeof track.getCapabilities !== "function") {
+      setCaps(null);
+      return;
+    }
+    const read = () => {
+      try {
+        setCaps(track.getCapabilities());
+        const settings = track.getSettings();
+        if (typeof settings.zoom === "number") setZoomState(settings.zoom);
+        if (typeof settings.exposureCompensation === "number")
+          setExposureState(settings.exposureCompensation);
+      } catch {
+        setCaps(null);
+      }
+    };
+    read();
+    const timer = window.setTimeout(read, 750);
+    return () => window.clearTimeout(timer);
+  }, [track]);
+  const torchSupported = caps?.torch === true;
+  const toggleTorch = (0, import_react.useCallback)(() => {
+    if (!track || !torchSupported) return;
+    const next = !torchOn;
+    track.applyConstraints({ advanced: [{ torch: next }] }).then(() => setTorchOn(next)).catch((err) => {
+      console.error("[capture-camera] torch toggle failed", err);
+    });
+  }, [track, torchSupported, torchOn]);
+  const zoomOptions = (0, import_react.useMemo)(() => {
+    const range = caps?.zoom;
+    if (!range || !(range.max > range.min)) return [];
+    const options = ZOOM_LADDER.filter(
+      (f) => f >= range.min && f <= range.max
+    );
+    if (!options.includes(1) && 1 >= range.min && 1 <= range.max) {
+      options.push(1);
+      options.sort((a, b) => a - b);
+    }
+    return options.length >= 2 ? options : [];
+  }, [caps]);
+  const setZoom = (0, import_react.useCallback)(
+    (factor) => {
+      if (!track || !caps?.zoom) return;
+      const clamped = Math.min(caps.zoom.max, Math.max(caps.zoom.min, factor));
+      track.applyConstraints({
+        advanced: [{ zoom: clamped }]
+      }).then(() => setZoomState(clamped)).catch((err) => {
+        console.error("[capture-camera] zoom failed", err);
+      });
+    },
+    [track, caps]
+  );
+  const exposureCaps = caps?.exposureCompensation;
+  const exposureRange = exposureCaps && exposureCaps.max > exposureCaps.min ? {
+    min: exposureCaps.min,
+    max: exposureCaps.max,
+    step: exposureCaps.step && exposureCaps.step > 0 ? exposureCaps.step : 0.5
+  } : null;
+  const setExposure = (0, import_react.useCallback)(
+    (value) => {
+      if (!track || !exposureRange) return;
+      const clamped = Math.min(
+        exposureRange.max,
+        Math.max(exposureRange.min, value)
+      );
+      track.applyConstraints({
+        advanced: [
+          { exposureCompensation: clamped }
+        ]
+      }).then(() => setExposureState(clamped)).catch((err) => {
+        console.error("[capture-camera] exposure failed", err);
+      });
+    },
+    [track, exposureRange]
+  );
+  return {
+    torchSupported,
+    torchOn,
+    toggleTorch,
+    zoomOptions,
+    zoom,
+    setZoom,
+    exposureSupported: exposureRange !== null,
+    exposure,
+    exposureRange,
+    setExposure
+  };
+}
+
+// src/components/ShutterButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ShutterButton({
+  mode,
+  recording,
+  disabled = false,
+  onPress
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: onPress,
+      disabled,
+      "aria-label": mode === "photo" ? "Take photo" : recording ? "Stop recording" : "Start recording",
+      className: cn(
+        "group flex h-[74px] w-[74px] shrink-0 items-center justify-center rounded-full",
+        "border-[3.5px] border-white transition-opacity",
+        disabled && "opacity-30"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: cn(
+            "block transition-all duration-200 ease-out group-active:scale-90",
+            mode === "photo" ? "h-[62px] w-[62px] rounded-full bg-white" : recording ? "h-8 w-8 rounded-md bg-[#FF3B30]" : "h-[62px] w-[62px] rounded-full bg-[#FF3B30]"
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/components/ModeSelector.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LABEL_BASE = "touch-manipulation rounded-full px-4 py-1.5 text-[13px] font-semibold uppercase tracking-[0.12em] transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 disabled:opacity-40";
+function ModeSelector({
+  mode,
+  onModeChange,
+  onUpload,
+  modeDisabled = false,
+  uploadDisabled = false,
+  extraModes = []
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": "Capture mode",
+      className: "flex items-center justify-center gap-1",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": mode === "video",
+            disabled: modeDisabled,
+            onClick: () => onModeChange("video"),
+            className: cn(
+              LABEL_BASE,
+              mode === "video" ? "bg-white/15 text-[#FFCC00]" : "text-white"
+            ),
+            children: "Video"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": mode === "photo",
+            disabled: modeDisabled,
+            onClick: () => onModeChange("photo"),
+            className: cn(
+              LABEL_BASE,
+              mode === "photo" ? "bg-white/15 text-[#FFCC00]" : "text-white"
+            ),
+            children: "Photo"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Upload photos or videos from this device",
+            disabled: modeDisabled || uploadDisabled,
+            onClick: onUpload,
+            className: cn(LABEL_BASE, "text-white active:text-[#FFCC00]"),
+            children: "Upload"
+          }
+        ),
+        extraModes.map((extra) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": extra.label,
+            disabled: modeDisabled,
+            onClick: extra.onSelect,
+            className: cn(LABEL_BASE, "text-white active:text-[#FFCC00]"),
+            children: extra.label
+          },
+          extra.id
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/ZoomRow.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function formatFactor(factor) {
+  return factor < 1 ? `.${String(Math.round(factor * 10))}` : String(Math.round(factor * 10) / 10);
+}
+function ZoomRow({ options, value, onSelect }) {
+  if (options.length < 2) return null;
+  const active = options.reduce(
+    (best, opt) => Math.abs(opt - value) < Math.abs(best - value) ? opt : best
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-center gap-3", children: options.map((opt) => {
+    const isActive = opt === active;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(opt),
+        "aria-label": `Zoom ${formatFactor(opt)}x`,
+        "aria-pressed": isActive,
+        className: cn(
+          "flex touch-manipulation items-center justify-center rounded-full font-semibold transition-all duration-200",
+          isActive ? "h-10 w-10 bg-black/45 text-[13px] text-[#FFCC00]" : "h-8 w-8 bg-black/35 text-[12px] text-white"
+        ),
+        children: [
+          formatFactor(opt),
+          isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px]", children: "\xD7" })
+        ]
+      },
+      opt
+    );
+  }) });
+}
+
+// src/components/OptionsGridPanel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function OptionsGridPanel({
+  open,
+  onClose,
+  tiles
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "absolute inset-0 z-40", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Close camera options",
+        onClick: onClose,
+        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"
+          ),
+          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)) }) })
+  ] });
+}
+
+// src/components/CaptureSheet.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function CaptureSheet({
+  open,
+  onClose,
+  variant = "content",
+  icon,
+  title,
+  body,
+  actions = [],
+  busyLabel = "Working\u2026"
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute inset-0 z-50 flex flex-col justify-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Dismiss",
+        onClick: onClose,
+        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
+        )) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/GridOverlay.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function GridOverlay({ visible }) {
+  if (!visible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-y-0 left-1/3 w-px bg-white/40" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-y-0 left-2/3 w-px bg-white/40" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-x-0 top-1/3 h-px bg-white/40" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-x-0 top-2/3 h-px bg-white/40" })
+  ] });
+}
+
+// src/components/CountdownOverlay.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CountdownOverlay({ seconds }) {
+  if (seconds === null || seconds <= 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      className: "text-[120px] font-light text-white drop-shadow-lg [@starting-style]:scale-125 [@starting-style]:opacity-0 transition-all duration-300",
+      children: seconds
+    },
+    seconds
+  ) });
+}
+
+// src/components/CameraCapture.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}`;
+}
+var ASPECT_CYCLE = ["full", "4:3", "1:1", "16:9"];
+function CameraCapture({
+  engine,
+  cloud,
+  mode,
+  onModeChange,
+  preview,
+  onClose,
+  blockedSheet,
+  controlsHidden = false,
+  shutterDisabled = false,
+  slots = {}
+}) {
+  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;
+    }
+    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_react2.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_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
+      }
+    ] : [],
+    {
+      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)
+      }
+    ] : []
+  ];
+  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)(
+      "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%"
+            }
+          }
+        )
+      }
+    ),
+    /* @__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-16 items-center gap-1 px-3", children: [
+      onClose ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          "aria-label": "Close camera",
+          className: "flex h-11 w-11 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-6 w-6" })
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-11 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)(
+        "button",
+        {
+          type: "button",
+          onClick: controls.toggleTorch,
+          "aria-label": controls.torchOn ? "Turn flash off" : "Turn flash on",
+          "aria-pressed": controls.torchOn,
+          className: cn(
+            "flex h-11 w-11 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-[22px] w-[22px]",
+              fill: controls.torchOn ? "currentColor" : "none"
+            }
+          )
+        }
+      ),
+      slots.topBarTrailing,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOptionsOpen((o) => !o),
+          "aria-label": "More camera options",
+          "aria-expanded": optionsOpen,
+          className: cn(
+            "flex h-11 w-11 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-[22px] w-[22px]" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pointer-events-none absolute inset-x-0 top-20 z-20 mt-safe flex flex-col items-center gap-2", 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-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ZoomRow,
+        {
+          options: controls.zoomOptions,
+          value: controls.zoom,
+          onSelect: controls.setZoom
+        }
+      ) }),
+      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",
+          {
+            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,
+        slots.modeRowTrailing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-end pb-1 pt-1.5", children: slots.modeRowTrailing }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center justify-center py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ModeSelector,
+          {
+            mode,
+            onModeChange,
+            onUpload: engine.onUpload,
+            modeDisabled: engine.recording,
+            uploadDisabled: shutterDisabled && !blocked,
+            extraModes: slots.extraModes
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between px-2 pb-4 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex w-16 justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: cloud.onOpenLibrary,
+              "aria-label": "Open your media library",
+              className: "h-12 w-12 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-16 justify-end", children: engine.onFlipCamera ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: engine.onFlipCamera,
+              "aria-label": "Switch camera",
+              className: "flex h-12 w-12 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-12 w-12" }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      OptionsGridPanel,
+      {
+        open: optionsOpen && !controlsHidden,
+        onClose: () => setOptionsOpen(false),
+        tiles
+      }
+    ),
+    blocked && blockedSheet && !blockedDismissed && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CaptureSheet,
+      {
+        open: true,
+        onClose: () => setBlockedDismissed(true),
+        body: blockedSheet.body,
+        title: "Camera unavailable",
+        actions: blockedSheet.actions
+      }
+    ),
+    slots.overlays
+  ] });
+}
+
+// src/components/ImageEditSheet.tsx
+var import_react3 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ASPECTS = [
+  { id: "free", label: "Free", ratio: null },
+  { id: "1:1", label: "Square", ratio: 1 },
+  { id: "4:3", label: "4:3", ratio: 4 / 3 },
+  { id: "16:9", label: "16:9", ratio: 16 / 9 }
+];
+var FULL_CROP = { x: 0, y: 0, w: 1, h: 1 };
+var MIN_CROP = 0.08;
+function ImageEditSheet({
+  open,
+  src,
+  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)(() => {
+    if (open) {
+      setRotation(0);
+      setFlipped(false);
+      setAspect("free");
+      setCrop(FULL_CROP);
+      setSaving(false);
+    }
+  }, [open, src]);
+  const applyAspect = (0, import_react3.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;
+    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)(
+    (kind) => (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      e.target.setPointerCapture(e.pointerId);
+      dragRef.current = {
+        kind,
+        startX: e.clientX,
+        startY: e.clientY,
+        startCrop: crop
+      };
+    },
+    [crop]
+  );
+  const onPointerMove = (0, import_react3.useCallback)(
+    (e) => {
+      const drag = dragRef.current;
+      const img = imgRef.current;
+      if (!drag || !img) return;
+      const rect = img.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) return;
+      const dx = (e.clientX - drag.startX) / rect.width;
+      const dy = (e.clientY - drag.startY) / rect.height;
+      const c = { ...drag.startCrop };
+      const ratio = ASPECTS.find((a) => a.id === aspect)?.ratio ?? null;
+      const frameRatio = rect.width / rect.height;
+      if (drag.kind === "move") {
+        c.x = Math.min(1 - c.w, Math.max(0, c.x + dx));
+        c.y = Math.min(1 - c.h, Math.max(0, c.y + dy));
+      } else {
+        const left = drag.kind === "nw" || drag.kind === "sw";
+        const top = drag.kind === "nw" || drag.kind === "ne";
+        let x2 = c.x + c.w;
+        let y2 = c.y + c.h;
+        if (left) c.x = Math.min(x2 - MIN_CROP, Math.max(0, c.x + dx));
+        else x2 = Math.max(c.x + MIN_CROP, Math.min(1, x2 + dx));
+        if (top) c.y = Math.min(y2 - MIN_CROP, Math.max(0, c.y + dy));
+        else y2 = Math.max(c.y + MIN_CROP, Math.min(1, y2 + dy));
+        c.w = x2 - c.x;
+        c.h = y2 - c.y;
+        if (ratio !== null) {
+          const targetH = c.w * frameRatio / ratio;
+          if (top) c.y = y2 - Math.min(targetH, y2);
+          c.h = Math.min(targetH, top ? y2 - c.y : 1 - c.y);
+          c.w = c.h * ratio / frameRatio;
+          if (left) c.x = x2 - c.w;
+        }
+      }
+      setCrop(c);
+    },
+    [aspect]
+  );
+  const onPointerUp = (0, import_react3.useCallback)(() => {
+    dragRef.current = null;
+  }, []);
+  const save = (0, import_react3.useCallback)(() => {
+    const img = imgRef.current;
+    if (!img || img.naturalWidth === 0) return;
+    setSaving(true);
+    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);
+      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);
+      canvas.toBlob(
+        (blob) => {
+          setSaving(false);
+          if (blob) {
+            onSave(blob);
+            onClose();
+          }
+        },
+        "image/jpeg",
+        0.92
+      );
+    } catch (err) {
+      console.error("[capture-camera] edit save failed", err);
+      setSaving(false);
+    }
+  }, [rotation, flipped, 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)(
+      "div",
+      {
+        ref: stageRef,
+        className: "relative flex min-h-0 flex-1 items-center justify-center overflow-hidden p-4",
+        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)(
+            "img",
+            {
+              ref: imgRef,
+              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)" : ""}`
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "div",
+            {
+              role: "presentation",
+              onPointerDown: onPointerDown("move"),
+              className: "absolute cursor-move touch-none border-2 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.55)]",
+              style: {
+                left: `${crop.x * 100}%`,
+                top: `${crop.y * 100}%`,
+                width: `${crop.w * 100}%`,
+                height: `${crop.h * 100}%`
+              },
+              children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "span",
+                {
+                  role: "presentation",
+                  onPointerDown: onPointerDown(corner),
+                  className: cn(
+                    "absolute h-6 w-6 touch-none",
+                    corner === "nw" && "-left-1.5 -top-1.5 border-l-4 border-t-4 cursor-nwse-resize",
+                    corner === "ne" && "-right-1.5 -top-1.5 border-r-4 border-t-4 cursor-nesw-resize",
+                    corner === "sw" && "-bottom-1.5 -left-1.5 border-b-4 border-l-4 cursor-nesw-resize",
+                    corner === "se" && "-bottom-1.5 -right-1.5 border-b-4 border-r-4 cursor-nwse-resize",
+                    "border-white"
+                  )
+                },
+                corner
+              ))
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__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)(
+        "button",
+        {
+          type: "button",
+          onClick: () => applyAspect(a.id),
+          "aria-pressed": aspect === a.id,
+          className: cn(
+            "touch-manipulation rounded-full px-3.5 py-1.5 text-[12px] font-semibold uppercase tracking-wide transition-colors",
+            aspect === a.id ? "bg-white/20 text-[#FFCC00]" : "text-white/80"
+          ),
+          children: a.label
+        },
+        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)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setRotation((r) => (r + 270) % 360);
+              setCrop(FULL_CROP);
+              setAspect("free");
+            },
+            "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" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setFlipped((f) => !f),
+            "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" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+//# sourceMappingURL=react.cjs.map