@ai-matrx/capture 0.1.0 → 0.1.1

package/dist/react.d.cts

@@ -96,8 +96,11 @@ interface CaptureCameraSlots {
     topBarCenter?: React.ReactNode;
     /** Honesty chips under the top bar (QR confirmation, etc.). */
     statusChips?: React.ReactNode;
+    /** Rendered OVER THE FEED just above the bottom bar (with the zoom
+     *  pills) — costs the bar no height. The filmstrip belongs here. */
+    aboveBar?: React.ReactNode;
     /** Rows rendered inside the bottom bar ABOVE the mode selector
-     *  (filmstrip, notes/voice row, process button…). */
+     *  (keep to ONE compact row — bar height is stolen from the feed). */
     aboveModeSelector?: React.ReactNode;
     /** A compact action pinned right of the mode selector (Next/Break). */
     modeRowTrailing?: React.ReactNode;
@@ -238,11 +241,16 @@ interface ImageEditSheetProps {
 declare function ImageEditSheet({ open, src, onClose, onSave, }: ImageEditSheetProps): React__default.JSX.Element | null;
 
 /**
- * ModeSelector — the iPhone mode row: uppercase, letter-spaced labels in a
- * horizontal band; the ACTIVE mode sits in a dark pill with the iOS camera
- * yellow. VIDEO and PHOTO are persistent modes; UPLOAD is an immediate
- * action (opens the host's picker) and never takes the active state — it is
- * our third lane in the slot the iPhone layout leaves open next to PHOTO.
+ * ModeSelector — the CONNECTED capture-mode bar: one compact rounded track
+ * holding VIDEO · PHOTO · UPLOAD (+ injected extras) with a spring-sliding
+ * thumb under the active mode (the proven CaptureModeBar interaction, in
+ * iPhone dress: uppercase letter-spaced labels, active in iOS camera
+ * yellow). Deliberately narrow — the row keeps usable space on BOTH sides
+ * for host affordances; screen height is the scarcest resource on a phone
+ * browser, so the bar is one short row, never a spread of pills.
+ *
+ * VIDEO and PHOTO are persistent modes; UPLOAD and extras are immediate
+ * actions and never take the thumb.
  *
  * Package source (`@ai-matrx/capture`) — presentational only.
  */

package/dist/react.d.ts

@@ -96,8 +96,11 @@ interface CaptureCameraSlots {
     topBarCenter?: React.ReactNode;
     /** Honesty chips under the top bar (QR confirmation, etc.). */
     statusChips?: React.ReactNode;
+    /** Rendered OVER THE FEED just above the bottom bar (with the zoom
+     *  pills) — costs the bar no height. The filmstrip belongs here. */
+    aboveBar?: React.ReactNode;
     /** Rows rendered inside the bottom bar ABOVE the mode selector
-     *  (filmstrip, notes/voice row, process button…). */
+     *  (keep to ONE compact row — bar height is stolen from the feed). */
     aboveModeSelector?: React.ReactNode;
     /** A compact action pinned right of the mode selector (Next/Break). */
     modeRowTrailing?: React.ReactNode;
@@ -238,11 +241,16 @@ interface ImageEditSheetProps {
 declare function ImageEditSheet({ open, src, onClose, onSave, }: ImageEditSheetProps): React__default.JSX.Element | null;
 
 /**
- * ModeSelector — the iPhone mode row: uppercase, letter-spaced labels in a
- * horizontal band; the ACTIVE mode sits in a dark pill with the iOS camera
- * yellow. VIDEO and PHOTO are persistent modes; UPLOAD is an immediate
- * action (opens the host's picker) and never takes the active state — it is
- * our third lane in the slot the iPhone layout leaves open next to PHOTO.
+ * ModeSelector — the CONNECTED capture-mode bar: one compact rounded track
+ * holding VIDEO · PHOTO · UPLOAD (+ injected extras) with a spring-sliding
+ * thumb under the active mode (the proven CaptureModeBar interaction, in
+ * iPhone dress: uppercase letter-spaced labels, active in iOS camera
+ * yellow). Deliberately narrow — the row keeps usable space on BOTH sides
+ * for host affordances; screen height is the scarcest resource on a phone
+ * browser, so the bar is one short row, never a spread of pills.
+ *
+ * VIDEO and PHOTO are persistent modes; UPLOAD and extras are immediate
+ * actions and never take the thumb.
  *
  * Package source (`@ai-matrx/capture`) — presentational only.
  */

package/dist/react.js

@@ -154,7 +154,8 @@ function ShutterButton({
 
 // src/components/ModeSelector.tsx
 import { jsx as jsx2, jsxs } from "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";
+var SPRING_EASING = "linear(0, 0.0047 0.71%, 0.0189 1.44%, 0.0755 2.93%, 0.1692 4.49%, 0.3921 7.55%, 0.8121 12.94%, 0.9804 15.49%, 1.0946 18.14%, 1.1423 20.16%, 1.1568 21.62%, 1.1541 23.03%, 1.1113 26.4%, 1.0322 31.83%, 0.9902 36.25%, 0.9769 40.24%, 0.9844 45.87%, 1.0028 55.35%, 1.0075 63.42%, 1.0006 85.48%, 1)";
+var LABEL_BASE = "relative z-10 flex h-8 min-w-0 touch-manipulation items-center justify-center rounded-full px-3 text-[11px] 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,
@@ -163,13 +164,28 @@ function ModeSelector({
   uploadDisabled = false,
   extraModes = []
 }) {
+  const segments = 3 + extraModes.length;
+  const activeIndex = mode === "video" ? 0 : 1;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "tablist",
       "aria-label": "Capture mode",
-      className: "flex items-center justify-center gap-1",
+      className: "relative inline-grid rounded-full bg-white/10 p-1",
+      style: { gridTemplateColumns: `repeat(${segments}, minmax(0, 1fr))` },
       children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute bottom-1 top-1 left-1 rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)] will-change-transform motion-reduce:transition-none",
+            style: {
+              width: `calc((100% - 0.5rem) / ${segments})`,
+              transform: `translateX(${activeIndex * 100}%)`,
+              transitionTimingFunction: SPRING_EASING
+            }
+          }
+        ),
         /* @__PURE__ */ jsx2(
           "button",
           {
@@ -180,7 +196,7 @@ function ModeSelector({
             onClick: () => onModeChange("video"),
             className: cn(
               LABEL_BASE,
-              mode === "video" ? "bg-white/15 text-[#FFCC00]" : "text-white"
+              mode === "video" ? "text-[#FFCC00]" : "text-white"
             ),
             children: "Video"
           }
@@ -195,7 +211,7 @@ function ModeSelector({
             onClick: () => onModeChange("photo"),
             className: cn(
               LABEL_BASE,
-              mode === "photo" ? "bg-white/15 text-[#FFCC00]" : "text-white"
+              mode === "photo" ? "text-[#FFCC00]" : "text-white"
             ),
             children: "Photo"
           }
@@ -524,17 +540,17 @@ function CameraCapture({
       }
     ),
     /* @__PURE__ */ jsx8(CountdownOverlay, { seconds: countdown }),
-    !controlsHidden && /* @__PURE__ */ jsx8("div", { className: "absolute inset-x-0 top-0 z-20 bg-black/65 pt-safe backdrop-blur-[2px]", children: /* @__PURE__ */ jsxs6("div", { className: "flex h-16 items-center gap-1 px-3", children: [
+    !controlsHidden && /* @__PURE__ */ jsx8("div", { className: "absolute inset-x-0 top-0 z-20 bg-black/65 pt-safe backdrop-blur-[2px]", children: /* @__PURE__ */ jsxs6("div", { className: "flex h-11 items-center gap-0.5 px-1.5", children: [
       onClose ? /* @__PURE__ */ jsx8(
         "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__ */ jsx8(X2, { className: "h-6 w-6" })
+          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__ */ jsx8(X2, { className: "h-5 w-5" })
         }
-      ) : /* @__PURE__ */ jsx8("span", { className: "w-11 shrink-0" }),
+      ) : /* @__PURE__ */ jsx8("span", { className: "w-10 shrink-0" }),
       /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1", children: slots.topBarCenter }),
       controls.torchSupported && /* @__PURE__ */ jsx8(
         "button",
@@ -544,13 +560,13 @@ function CameraCapture({
           "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",
+            "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__ */ jsx8(
             Zap,
             {
-              className: "h-[22px] w-[22px]",
+              className: "h-5 w-5",
               fill: controls.torchOn ? "currentColor" : "none"
             }
           )
@@ -565,14 +581,14 @@ function CameraCapture({
           "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",
+            "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__ */ jsx8(Grip, { className: "h-[22px] w-[22px]" })
+          children: /* @__PURE__ */ jsx8(Grip, { className: "h-5 w-5" })
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs6("div", { className: "pointer-events-none absolute inset-x-0 top-20 z-20 mt-safe flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ jsxs6("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__ */ jsxs6("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__ */ jsx8("span", { className: "h-2.5 w-2.5 animate-pulse rounded-full bg-[#FF3B30]" }),
         formatElapsed(engine.recordElapsedSeconds)
@@ -580,7 +596,7 @@ function CameraCapture({
       slots.statusChips
     ] }),
     !controlsHidden && /* @__PURE__ */ jsxs6("div", { className: "absolute inset-x-0 bottom-0 z-20", children: [
-      !blocked && controls.zoomOptions.length >= 2 && /* @__PURE__ */ jsx8("div", { className: "mb-3", children: /* @__PURE__ */ jsx8(
+      !blocked && controls.zoomOptions.length >= 2 && /* @__PURE__ */ jsx8("div", { className: "mb-2", children: /* @__PURE__ */ jsx8(
         ZoomRow,
         {
           options: controls.zoomOptions,
@@ -588,6 +604,7 @@ function CameraCapture({
           onSelect: controls.setZoom
         }
       ) }),
+      slots.aboveBar && /* @__PURE__ */ jsx8("div", { className: "mb-1.5 px-2", children: slots.aboveBar }),
       exposureOpen && controls.exposureSupported && controls.exposureRange && /* @__PURE__ */ jsxs6("div", { className: "mx-auto mb-3 flex w-64 items-center gap-3 rounded-full bg-black/55 px-4 py-2", children: [
         /* @__PURE__ */ jsx8(SunMedium, { className: "h-4 w-4 shrink-0 text-[#FFCC00]" }),
         /* @__PURE__ */ jsx8(
@@ -610,26 +627,28 @@ function CameraCapture({
       ] }),
       /* @__PURE__ */ jsxs6("div", { className: "bg-black/65 px-3 pb-safe backdrop-blur-[2px]", children: [
         slots.aboveModeSelector,
-        slots.modeRowTrailing && /* @__PURE__ */ jsx8("div", { className: "flex justify-end pb-1 pt-1.5", children: slots.modeRowTrailing }),
-        /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-center py-2.5", children: /* @__PURE__ */ jsx8(
-          ModeSelector,
-          {
-            mode,
-            onModeChange,
-            onUpload: engine.onUpload,
-            modeDisabled: engine.recording,
-            uploadDisabled: shutterDisabled && !blocked,
-            extraModes: slots.extraModes
-          }
-        ) }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-2 pb-4 pt-1", children: [
-          /* @__PURE__ */ jsx8("div", { className: "flex w-16 justify-start", children: /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center justify-center py-1.5", children: [
+          /* @__PURE__ */ jsx8(
+            ModeSelector,
+            {
+              mode,
+              onModeChange,
+              onUpload: engine.onUpload,
+              modeDisabled: engine.recording,
+              uploadDisabled: shutterDisabled && !blocked,
+              extraModes: slots.extraModes
+            }
+          ),
+          slots.modeRowTrailing && /* @__PURE__ */ jsx8("div", { className: "absolute right-0", children: slots.modeRowTrailing })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-2 pb-1.5 pt-0.5", children: [
+          /* @__PURE__ */ jsx8("div", { className: "flex w-14 justify-start", children: /* @__PURE__ */ jsx8(
             "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",
+              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__ */ jsx8("span", { className: "block h-full w-full bg-white/5" })
             }
           ) }),
@@ -642,16 +661,16 @@ function CameraCapture({
               onPress: onShutter
             }
           ),
-          /* @__PURE__ */ jsx8("div", { className: "flex w-16 justify-end", children: engine.onFlipCamera ? /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx8("div", { className: "flex w-14 justify-end", children: engine.onFlipCamera ? /* @__PURE__ */ jsx8(
             "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",
+              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__ */ jsx8(RefreshCw, { className: "h-5 w-5" })
             }
-          ) : /* @__PURE__ */ jsx8("span", { className: "h-12 w-12" }) })
+          ) : /* @__PURE__ */ jsx8("span", { className: "h-11 w-11" }) })
         ] })
       ] })
     ] }),