@ai-matrx/capture 0.2.1 → 0.3.0

package/dist/react.cjs

@@ -22,11 +22,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   CameraCapture: () => CameraCapture,
+  CameraCaptureV3: () => CameraCaptureV3,
   CameraFeed: () => CameraFeed,
+  CaptureExpandingField: () => CaptureExpandingField,
   CaptureFilmstrip: () => CaptureFilmstrip,
+  CaptureRail: () => CaptureRail,
   CaptureSheet: () => CaptureSheet,
   CountdownOverlay: () => CountdownOverlay,
   GridOverlay: () => GridOverlay,
+  HoldShutter: () => HoldShutter,
   ImageEditSheet: () => ImageEditSheet,
   MediaViewer: () => MediaViewer,
   ModeSelector: () => ModeSelector,
@@ -1643,15 +1647,665 @@ function CameraCapture({
   ] });
 }
 
-// src/components/CameraFeed.tsx
+// src/components/CameraCaptureV3.tsx
+var import_react8 = require("react");
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/CaptureRail.tsx
 var import_react6 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+function CaptureRail({
+  actions,
+  defaultExpanded = false,
+  className
+}) {
+  const [expanded, setExpanded] = (0, import_react6.useState)(defaultExpanded);
+  const primary = actions.filter((a) => a.primary);
+  const extra = actions.filter((a) => !a.primary);
+  const shown = primary.length === 0 ? actions : expanded ? actions : primary;
+  const collapsible = primary.length > 0 && extra.length > 0;
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: cn(
+        "pointer-events-auto flex flex-col items-center gap-1",
+        className
+      ),
+      children: [
+        shown.map((action) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RailButton, { action }, action.id)),
+        collapsible ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded((open) => !open),
+            "aria-expanded": expanded,
+            "aria-label": expanded ? "Fewer options" : "More options",
+            className: cn(
+              "mt-0.5 flex h-9 w-9 touch-manipulation items-center justify-center",
+              "rounded-full text-white/90 transition-colors hover:bg-white/10"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              Chevron,
+              {
+                className: cn(
+                  "h-5 w-5 transition-transform duration-200",
+                  expanded && "rotate-180"
+                )
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function RailButton({ action }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: action.onPress,
+      disabled: action.disabled,
+      "aria-label": action.label,
+      "aria-pressed": action.active ?? void 0,
+      className: cn(
+        "flex w-12 shrink-0 touch-manipulation flex-col items-center justify-center gap-0.5",
+        "rounded-2xl py-1.5 transition-colors",
+        action.active ? "text-[#FFCC00]" : "text-white",
+        action.disabled ? "opacity-40" : "hover:bg-white/10 active:bg-white/15"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", children: action.icon }),
+        action.valueLabel ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] font-semibold leading-none tabular-nums drop-shadow-[0_1px_2px_rgba(0,0,0,0.7)]", children: action.valueLabel }) : null
+      ]
+    }
+  );
+}
+function Chevron({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+
+// src/components/HoldShutter.tsx
+var import_react7 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var HOLD_MS = 320;
+var LOCK_AFTER_MS = 1200;
+function HoldShutter({
+  recording,
+  elapsedSeconds,
+  maxSeconds,
+  disabled = false,
+  onPressStart,
+  onPhoto,
+  onStartRecording,
+  onStopRecording
+}) {
+  const holdTimer = (0, import_react7.useRef)(null);
+  const startedRecording = (0, import_react7.useRef)(false);
+  const [pressed, setPressed] = (0, import_react7.useState)(false);
+  const [locked, setLocked] = (0, import_react7.useState)(false);
+  const clearHold = (0, import_react7.useCallback)(() => {
+    if (holdTimer.current !== null) {
+      clearTimeout(holdTimer.current);
+      holdTimer.current = null;
+    }
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    if (!recording) {
+      setLocked(false);
+      return;
+    }
+    if (elapsedSeconds * 1e3 >= LOCK_AFTER_MS) setLocked(true);
+  }, [recording, elapsedSeconds]);
+  (0, import_react7.useEffect)(() => clearHold, [clearHold]);
+  const onPointerDown = (0, import_react7.useCallback)(
+    (event) => {
+      if (disabled) return;
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+      setPressed(true);
+      onPressStart?.();
+      if (recording && locked) return;
+      startedRecording.current = false;
+      holdTimer.current = setTimeout(() => {
+        holdTimer.current = null;
+        startedRecording.current = true;
+        onStartRecording();
+      }, HOLD_MS);
+    },
+    [disabled, locked, onPressStart, onStartRecording, recording]
+  );
+  const endPress = (0, import_react7.useCallback)(() => {
+    if (!pressed) return;
+    setPressed(false);
+    const wasHold = startedRecording.current;
+    clearHold();
+    startedRecording.current = false;
+    if (recording && locked && !wasHold) {
+      onStopRecording();
+      return;
+    }
+    if (wasHold) {
+      if (!locked) onStopRecording();
+      return;
+    }
+    if (!recording) onPhoto();
+  }, [clearHold, locked, onPhoto, onStopRecording, pressed, recording]);
+  const progress = maxSeconds && maxSeconds > 0 ? Math.min(1, elapsedSeconds / maxSeconds) : 0;
+  const R = 39;
+  const C = 2 * Math.PI * R;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex h-[86px] w-[86px] shrink-0 items-center justify-center", children: [
+    recording && maxSeconds ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 -rotate-90",
+        viewBox: "0 0 86 86",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "circle",
+            {
+              cx: "43",
+              cy: "43",
+              r: R,
+              fill: "none",
+              stroke: "rgba(255,255,255,0.25)",
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "circle",
+            {
+              cx: "43",
+              cy: "43",
+              r: R,
+              fill: "none",
+              stroke: "#FF3B30",
+              strokeWidth: "4",
+              strokeLinecap: "round",
+              strokeDasharray: C,
+              strokeDashoffset: C * (1 - progress)
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onPointerDown,
+        onPointerUp: endPress,
+        onPointerCancel: endPress,
+        onLostPointerCapture: endPress,
+        onContextMenu: (e) => e.preventDefault(),
+        "aria-label": recording ? locked ? "Stop recording" : "Recording \u2014 release to stop" : "Tap for a photo, hold to record",
+        className: cn(
+          "group flex h-[74px] w-[74px] shrink-0 touch-none select-none items-center justify-center",
+          "rounded-full border-[3.5px] border-white transition-opacity",
+          disabled && "opacity-30"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "span",
+          {
+            className: cn(
+              "block transition-all duration-200 ease-out",
+              recording ? "h-7 w-7 rounded-[6px] bg-[#FF3B30]" : cn(
+                "h-[62px] w-[62px] rounded-full bg-white",
+                pressed && "scale-90"
+              )
+            )
+          }
+        )
+      }
+    ),
+    recording ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "span",
+      {
+        className: cn(
+          "pointer-events-none absolute -bottom-1 left-1/2 -translate-x-1/2 translate-y-full",
+          "rounded-full bg-black/60 px-2 py-0.5 text-[11px] font-medium tabular-nums text-white"
+        ),
+        children: [
+          formatElapsed2(elapsedSeconds),
+          locked ? " \xB7 tap to stop" : ""
+        ]
+      }
+    ) : null
+  ] });
+}
+function formatElapsed2(totalSeconds) {
+  const m = Math.floor(totalSeconds / 60);
+  const s = String(Math.floor(totalSeconds % 60)).padStart(2, "0");
+  return `${m}:${s}`;
+}
+
+// src/components/CameraCaptureV3.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ASPECT_CYCLE2 = ["full", "4:3", "1:1", "16:9"];
+function CameraCaptureV3({
+  engine,
+  cloud,
+  preview,
+  media,
+  onRecordIntent,
+  maxRecordSeconds,
+  onReviewOpenChange,
+  onClose,
+  blockedSheet,
+  controlsHidden = false,
+  shutterDisabled = false,
+  slots = {}
+}) {
+  const [viewerKey, setViewerKey] = (0, import_react8.useState)(null);
+  const [editTarget, setEditTarget] = (0, import_react8.useState)(
+    null
+  );
+  const [gridOn, setGridOn] = (0, import_react8.useState)(false);
+  const [timerSetting, setTimerSetting] = (0, import_react8.useState)(0);
+  const [aspect, setAspect] = (0, import_react8.useState)("full");
+  const [countdown, setCountdown] = (0, import_react8.useState)(null);
+  const [blockedDismissed, setBlockedDismissed] = (0, import_react8.useState)(false);
+  const countdownRef = (0, import_react8.useRef)(null);
+  const controls = useTrackControls(engine.stream);
+  const reviewOpen = viewerKey !== null || editTarget !== null;
+  (0, import_react8.useEffect)(() => {
+    onReviewOpenChange?.(reviewOpen);
+  }, [reviewOpen, onReviewOpenChange]);
+  const clearCountdown = (0, import_react8.useCallback)(() => {
+    if (countdownRef.current) clearInterval(countdownRef.current);
+    countdownRef.current = null;
+    setCountdown(null);
+  }, []);
+  (0, import_react8.useEffect)(() => clearCountdown, [clearCountdown]);
+  (0, import_react8.useEffect)(() => {
+    if (engine.recording) clearCountdown();
+  }, [engine.recording, clearCountdown]);
+  const onPhoto = (0, import_react8.useCallback)(() => {
+    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);
+  }, [aspect, clearCountdown, countdown, engine, timerSetting]);
+  const blocked = engine.blocked !== null;
+  const coreRail = [
+    ...engine.onFlipCamera ? [
+      {
+        id: "flip",
+        label: "Switch camera",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.RefreshCw, { className: "h-[22px] w-[22px]" }),
+        primary: true,
+        onPress: engine.onFlipCamera
+      }
+    ] : [],
+    ...controls.torchSupported ? [
+      {
+        id: "flash",
+        label: "Flash",
+        icon: controls.torchOn ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Zap, { className: "h-[22px] w-[22px]", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.ZapOff, { className: "h-[22px] w-[22px]" }),
+        active: controls.torchOn,
+        primary: true,
+        onPress: controls.toggleTorch
+      }
+    ] : [],
+    {
+      id: "timer",
+      label: "Timer",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Timer, { className: "h-[22px] w-[22px]" }),
+      active: timerSetting !== 0,
+      valueLabel: timerSetting === 0 ? void 0 : `${timerSetting}s`,
+      onPress: () => setTimerSetting((t) => t === 0 ? 3 : t === 3 ? 10 : 0)
+    },
+    {
+      id: "grid",
+      label: "Grid",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Grid3x3, { className: "h-[22px] w-[22px]" }),
+      active: gridOn,
+      onPress: () => setGridOn((g) => !g)
+    },
+    {
+      id: "aspect",
+      label: "Aspect",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Proportions, { className: "h-[22px] w-[22px]" }),
+      active: aspect !== "full",
+      valueLabel: aspect === "full" ? void 0 : aspect,
+      onPress: () => setAspect(
+        (a) => ASPECT_CYCLE2[(ASPECT_CYCLE2.indexOf(a) + 1) % ASPECT_CYCLE2.length] ?? "full"
+      )
+    },
+    ...controls.exposureSupported ? [
+      {
+        id: "exposure",
+        label: "Exposure",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.SunMedium, { className: "h-[22px] w-[22px]" }),
+        active: controls.exposure !== 0,
+        valueLabel: controls.exposure === 0 ? void 0 : `${controls.exposure > 0 ? "+" : ""}${controls.exposure}`,
+        onPress: () => controls.setExposure(controls.exposure === 0 ? 1 : 0)
+      }
+    ] : []
+  ];
+  const railActions = [...coreRail, ...slots.railActions ?? []];
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "absolute inset-0 select-none overflow-hidden bg-black", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0", children: preview }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GridOverlay, { visible: gridOn && !blocked }),
+    aspect !== "full" && !blocked && !engine.recording && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(CountdownOverlay, { seconds: countdown }),
+    !controlsHidden && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 top-0 z-20 px-2",
+        style: safeTop,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-h-[44px] items-center gap-2 py-1.5", children: [
+            onClose ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "Close camera",
+                className: "pointer-events-auto flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full text-white drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)] transition-colors hover:bg-white/10",
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.X, { className: "h-6 w-6" })
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "h-10 w-10 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "pointer-events-auto flex min-w-0 flex-1 justify-center", children: slots.topEntry }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "h-10 w-10 shrink-0" })
+          ] }),
+          slots.topCenter ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "pointer-events-none pb-1 text-center", children: slots.topCenter }) : null
+        ]
+      }
+    ),
+    slots.statusChips ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-x-0 z-20 flex flex-col items-center gap-1.5 px-3",
+        style: {
+          top: `calc(env(safe-area-inset-top, 0px) + ${controlsHidden ? 12 : 64}px)`
+        },
+        children: slots.statusChips
+      }
+    ) : null,
+    !controlsHidden && !blocked && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        className: "pointer-events-none absolute right-1 z-20 flex justify-end",
+        style: { top: `calc(env(safe-area-inset-top, 0px) + 64px)` },
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CaptureRail, { actions: railActions })
+      }
+    ),
+    !controlsHidden && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "absolute inset-x-0 bottom-0 z-20", style: safeBottom, children: [
+      media && media.items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-2 pb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        CaptureFilmstrip,
+        {
+          items: media.items,
+          onOpen: (item) => setViewerKey(item.key)
+        }
+      ) }) : null,
+      slots.aboveShutter ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-2 pb-1.5", children: slots.aboveShutter }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between px-3 pb-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex w-[86px] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: cloud.onOpenLibrary,
+            "aria-label": "Your media \u2014 library and upload",
+            className: "relative h-12 w-12 touch-manipulation overflow-hidden rounded-xl bg-black/40 ring-1 ring-white/30 backdrop-blur-md transition-transform active:scale-95",
+            children: cloud.recentsThumb ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Images, { className: "h-5 w-5 text-white/80" }) })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          HoldShutter,
+          {
+            recording: engine.recording,
+            elapsedSeconds: engine.recordElapsedSeconds,
+            ...maxRecordSeconds !== void 0 ? { maxSeconds: maxRecordSeconds } : {},
+            disabled: shutterDisabled || blocked,
+            ...onRecordIntent ? { onPressStart: onRecordIntent } : {},
+            onPhoto,
+            onStartRecording: engine.onStartRecording,
+            onStopRecording: engine.onStopRecording
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex w-[86px] justify-end", children: slots.shutterTrailing })
+      ] }),
+      !engine.recording && !blocked ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "pb-1.5 text-center text-[11px] text-white/60 drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]", children: "Tap for a photo \xB7 hold to record" }) : null
+    ] }),
+    blocked && blockedSheet && !blockedDismissed && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      CaptureSheet,
+      {
+        open: true,
+        onClose: () => setBlockedDismissed(true),
+        body: blockedSheet.body,
+        title: "Camera unavailable",
+        actions: blockedSheet.actions
+      }
+    ),
+    media && viewerKey !== null && /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.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/CaptureExpandingField.tsx
+var import_react9 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CaptureExpandingField({
+  label,
+  placeholder,
+  icon,
+  onCommit,
+  defaultExpanded = false,
+  disabled = false,
+  currentValue = null,
+  className
+}) {
+  const [expanded, setExpanded] = (0, import_react9.useState)(defaultExpanded);
+  const [draft, setDraft] = (0, import_react9.useState)("");
+  const inputRef = (0, import_react9.useRef)(null);
+  const draftRef = (0, import_react9.useRef)(draft);
+  draftRef.current = draft;
+  const onCommitRef = (0, import_react9.useRef)(onCommit);
+  onCommitRef.current = onCommit;
+  (0, import_react9.useEffect)(() => {
+    return () => {
+      const trimmed = draftRef.current.trim();
+      if (trimmed) onCommitRef.current(trimmed);
+    };
+  }, []);
+  const commit = (0, import_react9.useCallback)(() => {
+    const trimmed = draftRef.current.trim();
+    if (trimmed) onCommitRef.current(trimmed);
+    setDraft("");
+  }, []);
+  const open = (0, import_react9.useCallback)(() => {
+    setExpanded(true);
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+  const close = (0, import_react9.useCallback)(() => {
+    commit();
+    setExpanded(false);
+  }, [commit]);
+  if (!expanded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: open,
+        disabled,
+        "aria-label": label,
+        "aria-expanded": false,
+        className: cn(
+          "flex h-9 max-w-[62vw] items-center gap-1.5 rounded-full px-3.5",
+          "bg-black/45 text-[13px] font-semibold text-white backdrop-blur-md",
+          "transition-colors hover:bg-black/60 active:bg-black/70",
+          disabled && "opacity-40",
+          className
+        ),
+        children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "shrink-0", children: icon }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate", children: currentValue?.trim() || label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex h-9 w-[min(78vw,320px)] items-center gap-1.5 rounded-full px-3",
+        "bg-black/60 backdrop-blur-md",
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "shrink-0 text-white/70", children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: close,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                commit();
+                e.target.blur();
+              }
+              if (e.key === "Escape") {
+                setDraft("");
+                setExpanded(false);
+              }
+            },
+            placeholder: placeholder ?? label,
+            "aria-label": label,
+            enterKeyHint: "done",
+            autoCapitalize: "characters",
+            autoCorrect: "off",
+            spellCheck: false,
+            className: cn(
+              "min-w-0 flex-1 bg-transparent text-base text-white",
+              "placeholder:text-white/40 focus:outline-none"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => {
+              setDraft("");
+              setExpanded(false);
+            },
+            "aria-label": `Close ${label}`,
+            className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-white/70 hover:bg-white/10 hover:text-white",
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                className: "h-3.5 w-3.5",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M18 6 6 18M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/CameraFeed.tsx
+var import_react10 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function CameraFeed({
   engine,
   mirror = false
 }) {
   const { stream, videoRef } = engine;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const video = videoRef.current;
     if (!video) return;
     if (video.srcObject !== stream) video.srcObject = stream;
@@ -1659,7 +2313,7 @@ function CameraFeed({
       video.srcObject = null;
     };
   }, [stream, videoRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "video",
     {
       ref: videoRef,
@@ -1677,7 +2331,7 @@ function CameraFeed({
 }
 
 // src/engine/useDefaultEngine.ts
-var import_react7 = require("react");
+var import_react11 = require("react");
 var RECORDING_MIME_LADDER = [
   'video/mp4;codecs="avc1.42E01E,mp4a.40.2"',
   "video/mp4",
@@ -1707,18 +2361,18 @@ function useDefaultCaptureEngine(options) {
     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 });
+  const [stream, setStream] = (0, import_react11.useState)(null);
+  const [blocked, setBlocked] = (0, import_react11.useState)(null);
+  const [facing, setFacing] = (0, import_react11.useState)(initialFacing);
+  const [multipleCameras, setMultipleCameras] = (0, import_react11.useState)(false);
+  const [recording, setRecording] = (0, import_react11.useState)(false);
+  const [recordElapsedSeconds, setRecordElapsedSeconds] = (0, import_react11.useState)(0);
+  const videoRef = (0, import_react11.useRef)(null);
+  const streamRef = (0, import_react11.useRef)(null);
+  const recorderRef = (0, import_react11.useRef)(null);
+  const callbacksRef = (0, import_react11.useRef)({ onPhoto, onVideo, onFiles });
   callbacksRef.current = { onPhoto, onVideo, onFiles };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     let cancelled = false;
     let acquired = null;
     if (typeof navigator === "undefined" || !navigator.mediaDevices) {
@@ -1761,7 +2415,7 @@ function useDefaultCaptureEngine(options) {
       setStream(null);
     };
   }, [facing]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return () => {
       const r = recorderRef.current;
       if (r) {
@@ -1771,7 +2425,7 @@ function useDefaultCaptureEngine(options) {
       }
     };
   }, []);
-  const onCapturePhoto = (0, import_react7.useCallback)(
+  const onCapturePhoto = (0, import_react11.useCallback)(
     (opts) => {
       const video = videoRef.current;
       if (!video || video.videoWidth === 0) return;
@@ -1811,7 +2465,7 @@ function useDefaultCaptureEngine(options) {
     },
     [photoQuality]
   );
-  const onStartRecording = (0, import_react7.useCallback)(() => {
+  const onStartRecording = (0, import_react11.useCallback)(() => {
     const base = streamRef.current;
     if (!base || recorderRef.current) return;
     void (async () => {
@@ -1878,11 +2532,11 @@ function useDefaultCaptureEngine(options) {
       setRecording(true);
     })();
   }, [withAudio]);
-  const onStopRecording = (0, import_react7.useCallback)(() => {
+  const onStopRecording = (0, import_react11.useCallback)(() => {
     const r = recorderRef.current;
     if (r && r.recorder.state !== "inactive") r.recorder.stop();
   }, []);
-  const onUpload = (0, import_react7.useCallback)(() => {
+  const onUpload = (0, import_react11.useCallback)(() => {
     const input = document.createElement("input");
     input.type = "file";
     input.accept = "image/*,video/*";
@@ -1893,10 +2547,10 @@ function useDefaultCaptureEngine(options) {
     };
     input.click();
   }, []);
-  const onFlipCamera = (0, import_react7.useCallback)(() => {
+  const onFlipCamera = (0, import_react11.useCallback)(() => {
     setFacing((f) => f === "environment" ? "user" : "environment");
   }, []);
-  return (0, import_react7.useMemo)(
+  return (0, import_react11.useMemo)(
     () => ({
       stream,
       videoRef,