@ai-matrx/capture 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/index.d.cts +8 -7
- package/dist/index.d.ts +8 -7
- package/dist/react.cjs +416 -262
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +11 -10
- package/dist/react.d.ts +11 -10
- package/dist/react.js +416 -282
- package/dist/react.js.map +1 -1
- package/package.json +1 -2
package/dist/react.js
CHANGED
|
@@ -2,17 +2,158 @@
|
|
|
2
2
|
|
|
3
3
|
// src/components/CameraCapture.tsx
|
|
4
4
|
import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
5
|
+
|
|
6
|
+
// src/components/icons.tsx
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
function svgProps(props) {
|
|
9
|
+
return {
|
|
10
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
11
|
+
viewBox: "0 0 24 24",
|
|
12
|
+
width: 24,
|
|
13
|
+
height: 24,
|
|
14
|
+
fill: "none",
|
|
15
|
+
stroke: "currentColor",
|
|
16
|
+
strokeWidth: 2,
|
|
17
|
+
strokeLinecap: "round",
|
|
18
|
+
strokeLinejoin: "round",
|
|
19
|
+
"aria-hidden": true,
|
|
20
|
+
...props
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
function CheckIcon(props) {
|
|
24
|
+
return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
|
|
25
|
+
}
|
|
26
|
+
function ChevronLeftIcon(props) {
|
|
27
|
+
return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
|
|
28
|
+
}
|
|
29
|
+
function ChevronRightIcon(props) {
|
|
30
|
+
return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
|
|
31
|
+
}
|
|
32
|
+
function FlipHorizontal2Icon(props) {
|
|
33
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
34
|
+
/* @__PURE__ */ jsx("path", { d: "m3 7 5 5-5 5V7" }),
|
|
35
|
+
/* @__PURE__ */ jsx("path", { d: "m21 7-5 5 5 5V7" }),
|
|
36
|
+
/* @__PURE__ */ jsx("path", { d: "M12 20v2" }),
|
|
37
|
+
/* @__PURE__ */ jsx("path", { d: "M12 14v2" }),
|
|
38
|
+
/* @__PURE__ */ jsx("path", { d: "M12 8v2" }),
|
|
39
|
+
/* @__PURE__ */ jsx("path", { d: "M12 2v2" })
|
|
40
|
+
] });
|
|
41
|
+
}
|
|
42
|
+
function Grid3x3Icon(props) {
|
|
43
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
44
|
+
/* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
|
|
45
|
+
/* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
|
|
46
|
+
/* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
|
|
47
|
+
/* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
|
|
48
|
+
/* @__PURE__ */ jsx("path", { d: "M15 3v18" })
|
|
49
|
+
] });
|
|
50
|
+
}
|
|
51
|
+
function GripIcon(props) {
|
|
52
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
53
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1" }),
|
|
54
|
+
/* @__PURE__ */ jsx("circle", { cx: "19", cy: "5", r: "1" }),
|
|
55
|
+
/* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "1" }),
|
|
56
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
|
|
57
|
+
/* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
|
|
58
|
+
/* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" }),
|
|
59
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1" }),
|
|
60
|
+
/* @__PURE__ */ jsx("circle", { cx: "19", cy: "19", r: "1" }),
|
|
61
|
+
/* @__PURE__ */ jsx("circle", { cx: "5", cy: "19", r: "1" })
|
|
62
|
+
] });
|
|
63
|
+
}
|
|
64
|
+
function ImagesIcon(props) {
|
|
65
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
66
|
+
/* @__PURE__ */ jsx("path", { d: "m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16" }),
|
|
67
|
+
/* @__PURE__ */ jsx("path", { d: "M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2" }),
|
|
68
|
+
/* @__PURE__ */ jsx("circle", { cx: "13", cy: "7", r: "1", fill: "currentColor" }),
|
|
69
|
+
/* @__PURE__ */ jsx("rect", { x: "8", y: "2", width: "14", height: "14", rx: "2" })
|
|
70
|
+
] });
|
|
71
|
+
}
|
|
72
|
+
function Loader2Icon(props) {
|
|
73
|
+
return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
|
|
74
|
+
}
|
|
75
|
+
function LockIcon(props) {
|
|
76
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
77
|
+
/* @__PURE__ */ jsx("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
|
|
78
|
+
/* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
|
|
79
|
+
] });
|
|
80
|
+
}
|
|
81
|
+
function PencilIcon(props) {
|
|
82
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
83
|
+
/* @__PURE__ */ jsx("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
|
|
84
|
+
/* @__PURE__ */ jsx("path", { d: "m15 5 4 4" })
|
|
85
|
+
] });
|
|
86
|
+
}
|
|
87
|
+
function PlayIcon(props) {
|
|
88
|
+
return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" }) });
|
|
89
|
+
}
|
|
90
|
+
function ProportionsIcon(props) {
|
|
91
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
92
|
+
/* @__PURE__ */ jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
|
|
93
|
+
/* @__PURE__ */ jsx("path", { d: "M12 9v11" }),
|
|
94
|
+
/* @__PURE__ */ jsx("path", { d: "M2 9h13a2 2 0 0 1 2 2v9" })
|
|
95
|
+
] });
|
|
96
|
+
}
|
|
97
|
+
function RefreshCwIcon(props) {
|
|
98
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
99
|
+
/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
|
|
100
|
+
/* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
|
|
101
|
+
/* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
|
|
102
|
+
/* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
|
|
103
|
+
] });
|
|
104
|
+
}
|
|
105
|
+
function RotateCcwIcon(props) {
|
|
106
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
107
|
+
/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
|
|
108
|
+
/* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
|
|
109
|
+
] });
|
|
110
|
+
}
|
|
111
|
+
function SunMediumIcon(props) {
|
|
112
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
113
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
|
|
114
|
+
/* @__PURE__ */ jsx("path", { d: "M12 3v1" }),
|
|
115
|
+
/* @__PURE__ */ jsx("path", { d: "M12 20v1" }),
|
|
116
|
+
/* @__PURE__ */ jsx("path", { d: "M3 12h1" }),
|
|
117
|
+
/* @__PURE__ */ jsx("path", { d: "M20 12h1" }),
|
|
118
|
+
/* @__PURE__ */ jsx("path", { d: "m18.364 5.636-.707.707" }),
|
|
119
|
+
/* @__PURE__ */ jsx("path", { d: "m6.343 17.657-.707.707" }),
|
|
120
|
+
/* @__PURE__ */ jsx("path", { d: "m5.636 5.636.707.707" }),
|
|
121
|
+
/* @__PURE__ */ jsx("path", { d: "m17.657 17.657.707.707" })
|
|
122
|
+
] });
|
|
123
|
+
}
|
|
124
|
+
function TimerIcon(props) {
|
|
125
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
126
|
+
/* @__PURE__ */ jsx("line", { x1: "10", x2: "14", y1: "2", y2: "2" }),
|
|
127
|
+
/* @__PURE__ */ jsx("line", { x1: "12", x2: "15", y1: "14", y2: "11" }),
|
|
128
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "8" })
|
|
129
|
+
] });
|
|
130
|
+
}
|
|
131
|
+
function Trash2Icon(props) {
|
|
132
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
133
|
+
/* @__PURE__ */ jsx("path", { d: "M10 11v6" }),
|
|
134
|
+
/* @__PURE__ */ jsx("path", { d: "M14 11v6" }),
|
|
135
|
+
/* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
|
|
136
|
+
/* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
|
|
137
|
+
/* @__PURE__ */ jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
|
|
138
|
+
] });
|
|
139
|
+
}
|
|
140
|
+
function XIcon(props) {
|
|
141
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
142
|
+
/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
|
|
143
|
+
/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
|
|
144
|
+
] });
|
|
145
|
+
}
|
|
146
|
+
function ZapIcon(props) {
|
|
147
|
+
return /* @__PURE__ */ jsx("svg", { ...svgProps(props), children: /* @__PURE__ */ jsx("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" }) });
|
|
148
|
+
}
|
|
149
|
+
function ZapOffIcon(props) {
|
|
150
|
+
return /* @__PURE__ */ jsxs("svg", { ...svgProps(props), children: [
|
|
151
|
+
/* @__PURE__ */ jsx("path", { d: "M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317" }),
|
|
152
|
+
/* @__PURE__ */ jsx("path", { d: "M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773" }),
|
|
153
|
+
/* @__PURE__ */ jsx("path", { d: "M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643" }),
|
|
154
|
+
/* @__PURE__ */ jsx("path", { d: "m2 2 20 20" })
|
|
155
|
+
] });
|
|
156
|
+
}
|
|
16
157
|
|
|
17
158
|
// src/cn.ts
|
|
18
159
|
import { twMerge } from "tailwind-merge";
|
|
@@ -145,14 +286,14 @@ function useTrackControls(stream) {
|
|
|
145
286
|
}
|
|
146
287
|
|
|
147
288
|
// src/components/ShutterButton.tsx
|
|
148
|
-
import { jsx } from "react/jsx-runtime";
|
|
289
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
149
290
|
function ShutterButton({
|
|
150
291
|
mode,
|
|
151
292
|
recording,
|
|
152
293
|
disabled = false,
|
|
153
294
|
onPress
|
|
154
295
|
}) {
|
|
155
|
-
return /* @__PURE__ */
|
|
296
|
+
return /* @__PURE__ */ jsx2(
|
|
156
297
|
"button",
|
|
157
298
|
{
|
|
158
299
|
type: "button",
|
|
@@ -164,7 +305,7 @@ function ShutterButton({
|
|
|
164
305
|
"border-[3.5px] border-white transition-opacity",
|
|
165
306
|
disabled && "opacity-30"
|
|
166
307
|
),
|
|
167
|
-
children: /* @__PURE__ */
|
|
308
|
+
children: /* @__PURE__ */ jsx2(
|
|
168
309
|
"span",
|
|
169
310
|
{
|
|
170
311
|
className: cn(
|
|
@@ -178,7 +319,7 @@ function ShutterButton({
|
|
|
178
319
|
}
|
|
179
320
|
|
|
180
321
|
// src/components/ModeSelector.tsx
|
|
181
|
-
import { jsx as
|
|
322
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
182
323
|
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)";
|
|
183
324
|
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";
|
|
184
325
|
function ModeSelector({
|
|
@@ -191,7 +332,7 @@ function ModeSelector({
|
|
|
191
332
|
}) {
|
|
192
333
|
const segments = 3 + extraModes.length;
|
|
193
334
|
const activeIndex = mode === "video" ? 0 : 1;
|
|
194
|
-
return /* @__PURE__ */
|
|
335
|
+
return /* @__PURE__ */ jsxs2(
|
|
195
336
|
"div",
|
|
196
337
|
{
|
|
197
338
|
role: "tablist",
|
|
@@ -199,7 +340,7 @@ function ModeSelector({
|
|
|
199
340
|
className: "relative inline-grid rounded-full bg-white/10 p-1",
|
|
200
341
|
style: { gridTemplateColumns: `repeat(${segments}, minmax(0, 1fr))` },
|
|
201
342
|
children: [
|
|
202
|
-
/* @__PURE__ */
|
|
343
|
+
/* @__PURE__ */ jsx3(
|
|
203
344
|
"div",
|
|
204
345
|
{
|
|
205
346
|
"aria-hidden": true,
|
|
@@ -211,7 +352,7 @@ function ModeSelector({
|
|
|
211
352
|
}
|
|
212
353
|
}
|
|
213
354
|
),
|
|
214
|
-
/* @__PURE__ */
|
|
355
|
+
/* @__PURE__ */ jsx3(
|
|
215
356
|
"button",
|
|
216
357
|
{
|
|
217
358
|
type: "button",
|
|
@@ -226,7 +367,7 @@ function ModeSelector({
|
|
|
226
367
|
children: "Video"
|
|
227
368
|
}
|
|
228
369
|
),
|
|
229
|
-
/* @__PURE__ */
|
|
370
|
+
/* @__PURE__ */ jsx3(
|
|
230
371
|
"button",
|
|
231
372
|
{
|
|
232
373
|
type: "button",
|
|
@@ -241,7 +382,7 @@ function ModeSelector({
|
|
|
241
382
|
children: "Photo"
|
|
242
383
|
}
|
|
243
384
|
),
|
|
244
|
-
/* @__PURE__ */
|
|
385
|
+
/* @__PURE__ */ jsx3(
|
|
245
386
|
"button",
|
|
246
387
|
{
|
|
247
388
|
type: "button",
|
|
@@ -252,7 +393,7 @@ function ModeSelector({
|
|
|
252
393
|
children: "Upload"
|
|
253
394
|
}
|
|
254
395
|
),
|
|
255
|
-
extraModes.map((extra) => /* @__PURE__ */
|
|
396
|
+
extraModes.map((extra) => /* @__PURE__ */ jsx3(
|
|
256
397
|
"button",
|
|
257
398
|
{
|
|
258
399
|
type: "button",
|
|
@@ -270,7 +411,7 @@ function ModeSelector({
|
|
|
270
411
|
}
|
|
271
412
|
|
|
272
413
|
// src/components/ZoomRow.tsx
|
|
273
|
-
import { jsx as
|
|
414
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
274
415
|
function formatFactor(factor) {
|
|
275
416
|
return factor < 1 ? `.${String(Math.round(factor * 10))}` : String(Math.round(factor * 10) / 10);
|
|
276
417
|
}
|
|
@@ -279,9 +420,9 @@ function ZoomRow({ options, value, onSelect }) {
|
|
|
279
420
|
const active = options.reduce(
|
|
280
421
|
(best, opt) => Math.abs(opt - value) < Math.abs(best - value) ? opt : best
|
|
281
422
|
);
|
|
282
|
-
return /* @__PURE__ */
|
|
423
|
+
return /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center gap-3", children: options.map((opt) => {
|
|
283
424
|
const isActive = opt === active;
|
|
284
|
-
return /* @__PURE__ */
|
|
425
|
+
return /* @__PURE__ */ jsxs3(
|
|
285
426
|
"button",
|
|
286
427
|
{
|
|
287
428
|
type: "button",
|
|
@@ -294,7 +435,7 @@ function ZoomRow({ options, value, onSelect }) {
|
|
|
294
435
|
),
|
|
295
436
|
children: [
|
|
296
437
|
formatFactor(opt),
|
|
297
|
-
isActive && /* @__PURE__ */
|
|
438
|
+
isActive && /* @__PURE__ */ jsx4("span", { className: "text-[10px]", children: "\xD7" })
|
|
298
439
|
]
|
|
299
440
|
},
|
|
300
441
|
opt
|
|
@@ -303,15 +444,15 @@ function ZoomRow({ options, value, onSelect }) {
|
|
|
303
444
|
}
|
|
304
445
|
|
|
305
446
|
// src/components/OptionsGridPanel.tsx
|
|
306
|
-
import { jsx as
|
|
447
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
307
448
|
function OptionsGridPanel({
|
|
308
449
|
open,
|
|
309
450
|
onClose,
|
|
310
451
|
tiles
|
|
311
452
|
}) {
|
|
312
453
|
if (!open) return null;
|
|
313
|
-
return /* @__PURE__ */
|
|
314
|
-
/* @__PURE__ */
|
|
454
|
+
return /* @__PURE__ */ jsxs4("div", { className: "absolute inset-0 z-40", children: [
|
|
455
|
+
/* @__PURE__ */ jsx5(
|
|
315
456
|
"button",
|
|
316
457
|
{
|
|
317
458
|
type: "button",
|
|
@@ -320,13 +461,13 @@ function OptionsGridPanel({
|
|
|
320
461
|
className: "absolute inset-0 bg-black/70"
|
|
321
462
|
}
|
|
322
463
|
),
|
|
323
|
-
/* @__PURE__ */
|
|
464
|
+
/* @__PURE__ */ jsx5(
|
|
324
465
|
"div",
|
|
325
466
|
{
|
|
326
467
|
className: "absolute inset-x-3 bottom-3 rounded-[2.5rem] bg-[#3a3a3c]/95 px-6 py-8 shadow-2xl",
|
|
327
468
|
style: { marginBottom: "env(safe-area-inset-bottom, 0px)" },
|
|
328
|
-
children: /* @__PURE__ */
|
|
329
|
-
/* @__PURE__ */
|
|
469
|
+
children: /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-3 gap-x-4 gap-y-7", children: tiles.map((tile) => /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-2.5", children: [
|
|
470
|
+
/* @__PURE__ */ jsx5(
|
|
330
471
|
"button",
|
|
331
472
|
{
|
|
332
473
|
type: "button",
|
|
@@ -342,7 +483,7 @@ function OptionsGridPanel({
|
|
|
342
483
|
children: tile.icon
|
|
343
484
|
}
|
|
344
485
|
),
|
|
345
|
-
/* @__PURE__ */
|
|
486
|
+
/* @__PURE__ */ jsx5("span", { className: "text-[13px] font-semibold uppercase tracking-[0.14em] text-white", children: tile.valueLabel ? `${tile.label} ${tile.valueLabel}` : tile.label })
|
|
346
487
|
] }, tile.id)) })
|
|
347
488
|
}
|
|
348
489
|
)
|
|
@@ -350,8 +491,7 @@ function OptionsGridPanel({
|
|
|
350
491
|
}
|
|
351
492
|
|
|
352
493
|
// src/components/CaptureSheet.tsx
|
|
353
|
-
import {
|
|
354
|
-
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
494
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
355
495
|
function CaptureSheet({
|
|
356
496
|
open,
|
|
357
497
|
onClose,
|
|
@@ -363,8 +503,8 @@ function CaptureSheet({
|
|
|
363
503
|
busyLabel = "Working\u2026"
|
|
364
504
|
}) {
|
|
365
505
|
if (!open) return null;
|
|
366
|
-
return /* @__PURE__ */
|
|
367
|
-
/* @__PURE__ */
|
|
506
|
+
return /* @__PURE__ */ jsxs5("div", { className: "absolute inset-0 z-50 flex flex-col justify-end", children: [
|
|
507
|
+
/* @__PURE__ */ jsx6(
|
|
368
508
|
"button",
|
|
369
509
|
{
|
|
370
510
|
type: "button",
|
|
@@ -373,30 +513,30 @@ function CaptureSheet({
|
|
|
373
513
|
className: "absolute inset-0 bg-black/30"
|
|
374
514
|
}
|
|
375
515
|
),
|
|
376
|
-
/* @__PURE__ */
|
|
516
|
+
/* @__PURE__ */ jsxs5(
|
|
377
517
|
"div",
|
|
378
518
|
{
|
|
379
519
|
className: "relative mx-2 mb-2 rounded-[2rem] bg-[#f2f2f7] px-6 pb-6 pt-5 text-black shadow-2xl",
|
|
380
520
|
style: { marginBottom: "calc(0.5rem + env(safe-area-inset-bottom, 0px))" },
|
|
381
521
|
children: [
|
|
382
|
-
/* @__PURE__ */
|
|
522
|
+
/* @__PURE__ */ jsx6(
|
|
383
523
|
"button",
|
|
384
524
|
{
|
|
385
525
|
type: "button",
|
|
386
526
|
onClick: onClose,
|
|
387
527
|
"aria-label": "Close",
|
|
388
528
|
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",
|
|
389
|
-
children: /* @__PURE__ */
|
|
529
|
+
children: /* @__PURE__ */ jsx6(XIcon, { className: "h-5 w-5", strokeWidth: 2.5 })
|
|
390
530
|
}
|
|
391
531
|
),
|
|
392
|
-
variant === "busy" ? /* @__PURE__ */
|
|
393
|
-
/* @__PURE__ */
|
|
394
|
-
/* @__PURE__ */
|
|
395
|
-
] }) : /* @__PURE__ */
|
|
396
|
-
icon && /* @__PURE__ */
|
|
397
|
-
title && /* @__PURE__ */
|
|
398
|
-
body && /* @__PURE__ */
|
|
399
|
-
actions.length > 0 && /* @__PURE__ */
|
|
532
|
+
variant === "busy" ? /* @__PURE__ */ jsxs5("div", { className: "flex min-h-[220px] items-center justify-center gap-2.5", children: [
|
|
533
|
+
/* @__PURE__ */ jsx6(Loader2Icon, { className: "h-5 w-5 animate-spin text-black/50" }),
|
|
534
|
+
/* @__PURE__ */ jsx6("span", { className: "text-[17px] font-medium text-black/80", children: busyLabel })
|
|
535
|
+
] }) : /* @__PURE__ */ jsxs5("div", { className: "pt-4", children: [
|
|
536
|
+
icon && /* @__PURE__ */ jsx6("div", { className: "mb-5 text-[#0a84ff]", children: icon }),
|
|
537
|
+
title && /* @__PURE__ */ jsx6("h2", { className: "mb-2 text-[26px] font-bold leading-tight", children: title }),
|
|
538
|
+
body && /* @__PURE__ */ jsx6("div", { className: "text-[17px] leading-snug text-black/85", children: body }),
|
|
539
|
+
actions.length > 0 && /* @__PURE__ */ jsx6("div", { className: "mt-7 flex flex-col gap-3", children: actions.map((action) => /* @__PURE__ */ jsx6(
|
|
400
540
|
"button",
|
|
401
541
|
{
|
|
402
542
|
type: "button",
|
|
@@ -417,22 +557,22 @@ function CaptureSheet({
|
|
|
417
557
|
}
|
|
418
558
|
|
|
419
559
|
// src/components/GridOverlay.tsx
|
|
420
|
-
import { jsx as
|
|
560
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
421
561
|
function GridOverlay({ visible }) {
|
|
422
562
|
if (!visible) return null;
|
|
423
|
-
return /* @__PURE__ */
|
|
424
|
-
/* @__PURE__ */
|
|
425
|
-
/* @__PURE__ */
|
|
426
|
-
/* @__PURE__ */
|
|
427
|
-
/* @__PURE__ */
|
|
563
|
+
return /* @__PURE__ */ jsxs6("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-10", children: [
|
|
564
|
+
/* @__PURE__ */ jsx7("div", { className: "absolute inset-y-0 left-1/3 w-px bg-white/40" }),
|
|
565
|
+
/* @__PURE__ */ jsx7("div", { className: "absolute inset-y-0 left-2/3 w-px bg-white/40" }),
|
|
566
|
+
/* @__PURE__ */ jsx7("div", { className: "absolute inset-x-0 top-1/3 h-px bg-white/40" }),
|
|
567
|
+
/* @__PURE__ */ jsx7("div", { className: "absolute inset-x-0 top-2/3 h-px bg-white/40" })
|
|
428
568
|
] });
|
|
429
569
|
}
|
|
430
570
|
|
|
431
571
|
// src/components/CountdownOverlay.tsx
|
|
432
|
-
import { jsx as
|
|
572
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
433
573
|
function CountdownOverlay({ seconds }) {
|
|
434
574
|
if (seconds === null || seconds <= 0) return null;
|
|
435
|
-
return /* @__PURE__ */
|
|
575
|
+
return /* @__PURE__ */ jsx8("div", { className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center", children: /* @__PURE__ */ jsx8(
|
|
436
576
|
"span",
|
|
437
577
|
{
|
|
438
578
|
className: "text-[120px] font-light text-white drop-shadow-lg [@starting-style]:scale-125 [@starting-style]:opacity-0 transition-all duration-300",
|
|
@@ -445,35 +585,43 @@ function CountdownOverlay({ seconds }) {
|
|
|
445
585
|
// src/media/media-cache.ts
|
|
446
586
|
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
447
587
|
var MAX_ENTRIES = 80;
|
|
448
|
-
var
|
|
449
|
-
|
|
588
|
+
var STATE_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.capture.media-cache-state");
|
|
589
|
+
function getState() {
|
|
590
|
+
const holder = globalThis;
|
|
591
|
+
let state = holder[STATE_SLOT];
|
|
592
|
+
if (!state) {
|
|
593
|
+
state = { cache: /* @__PURE__ */ new Map(), listeners: /* @__PURE__ */ new Map() };
|
|
594
|
+
holder[STATE_SLOT] = state;
|
|
595
|
+
}
|
|
596
|
+
return state;
|
|
597
|
+
}
|
|
450
598
|
function notify(key) {
|
|
451
|
-
listeners.get(key)?.forEach((fn) => fn());
|
|
599
|
+
getState().listeners.get(key)?.forEach((fn) => fn());
|
|
452
600
|
}
|
|
453
601
|
function evictIfNeeded() {
|
|
454
|
-
while (cache.size > MAX_ENTRIES) {
|
|
455
|
-
const oldest = cache.keys().next().value;
|
|
602
|
+
while (getState().cache.size > MAX_ENTRIES) {
|
|
603
|
+
const oldest = getState().cache.keys().next().value;
|
|
456
604
|
if (oldest === void 0) return;
|
|
457
|
-
const entry = cache.get(oldest);
|
|
458
|
-
cache.delete(oldest);
|
|
605
|
+
const entry = getState().cache.get(oldest);
|
|
606
|
+
getState().cache.delete(oldest);
|
|
459
607
|
if (entry?.revoke && entry.url) URL.revokeObjectURL(entry.url);
|
|
460
608
|
}
|
|
461
609
|
}
|
|
462
610
|
function touch(key, entry) {
|
|
463
|
-
cache.delete(key);
|
|
464
|
-
cache.set(key, entry);
|
|
611
|
+
getState().cache.delete(key);
|
|
612
|
+
getState().cache.set(key, entry);
|
|
465
613
|
}
|
|
466
614
|
function getMediaUrl(item) {
|
|
467
615
|
if (item.src) return item.src;
|
|
468
616
|
if (!item.resolve) return null;
|
|
469
|
-
const existing = cache.get(item.key);
|
|
617
|
+
const existing = getState().cache.get(item.key);
|
|
470
618
|
if (existing) {
|
|
471
619
|
touch(item.key, existing);
|
|
472
620
|
if (existing.url || existing.error) return existing.url;
|
|
473
621
|
return null;
|
|
474
622
|
}
|
|
475
623
|
const entry = { url: null, revoke: false, promise: null, error: false };
|
|
476
|
-
cache.set(item.key, entry);
|
|
624
|
+
getState().cache.set(item.key, entry);
|
|
477
625
|
evictIfNeeded();
|
|
478
626
|
entry.promise = item.resolve().then((resolved) => {
|
|
479
627
|
const url = typeof resolved === "string" ? resolved : resolved.url;
|
|
@@ -491,8 +639,8 @@ function getMediaUrl(item) {
|
|
|
491
639
|
return null;
|
|
492
640
|
}
|
|
493
641
|
function invalidateMedia(key) {
|
|
494
|
-
const entry = cache.get(key);
|
|
495
|
-
cache.delete(key);
|
|
642
|
+
const entry = getState().cache.get(key);
|
|
643
|
+
getState().cache.delete(key);
|
|
496
644
|
if (entry?.revoke && entry.url) URL.revokeObjectURL(entry.url);
|
|
497
645
|
notify(key);
|
|
498
646
|
}
|
|
@@ -501,13 +649,13 @@ function useMediaUrl(item) {
|
|
|
501
649
|
const key = item?.key ?? null;
|
|
502
650
|
useEffect2(() => {
|
|
503
651
|
if (!key) return;
|
|
504
|
-
const set = listeners.get(key) ?? /* @__PURE__ */ new Set();
|
|
652
|
+
const set = getState().listeners.get(key) ?? /* @__PURE__ */ new Set();
|
|
505
653
|
const fn = () => bump((n) => n + 1);
|
|
506
654
|
set.add(fn);
|
|
507
|
-
listeners.set(key, set);
|
|
655
|
+
getState().listeners.set(key, set);
|
|
508
656
|
return () => {
|
|
509
657
|
set.delete(fn);
|
|
510
|
-
if (set.size === 0) listeners.delete(key);
|
|
658
|
+
if (set.size === 0) getState().listeners.delete(key);
|
|
511
659
|
};
|
|
512
660
|
}, [key]);
|
|
513
661
|
if (!item) return null;
|
|
@@ -520,14 +668,14 @@ function primeMedia(items) {
|
|
|
520
668
|
}
|
|
521
669
|
|
|
522
670
|
// src/components/CaptureFilmstrip.tsx
|
|
523
|
-
import { jsx as
|
|
671
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
524
672
|
function CaptureFilmstrip({
|
|
525
673
|
items,
|
|
526
674
|
onOpen,
|
|
527
675
|
limit = 12
|
|
528
676
|
}) {
|
|
529
677
|
if (items.length === 0) return null;
|
|
530
|
-
return /* @__PURE__ */
|
|
678
|
+
return /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-1.5 overflow-x-auto py-1", children: items.slice(-limit).map((item) => /* @__PURE__ */ jsxs7(
|
|
531
679
|
"button",
|
|
532
680
|
{
|
|
533
681
|
type: "button",
|
|
@@ -538,9 +686,9 @@ function CaptureFilmstrip({
|
|
|
538
686
|
item.accent && "ring-2 ring-inset ring-amber-400"
|
|
539
687
|
),
|
|
540
688
|
children: [
|
|
541
|
-
/* @__PURE__ */
|
|
542
|
-
item.status === "uploading" && /* @__PURE__ */
|
|
543
|
-
item.status === "error" && /* @__PURE__ */
|
|
689
|
+
/* @__PURE__ */ jsx9(FilmstripThumb, { item }),
|
|
690
|
+
item.status === "uploading" && /* @__PURE__ */ jsx9("span", { className: "absolute inset-0 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ jsx9("span", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/40 border-t-white" }) }),
|
|
691
|
+
item.status === "error" && /* @__PURE__ */ jsx9("span", { className: "absolute inset-0 rounded ring-2 ring-inset ring-red-500" })
|
|
544
692
|
]
|
|
545
693
|
},
|
|
546
694
|
item.key
|
|
@@ -549,7 +697,7 @@ function CaptureFilmstrip({
|
|
|
549
697
|
function FilmstripThumb({ item }) {
|
|
550
698
|
const url = useMediaUrl(item);
|
|
551
699
|
if (item.kind === "audio") {
|
|
552
|
-
return /* @__PURE__ */
|
|
700
|
+
return /* @__PURE__ */ jsx9("span", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxs7(
|
|
553
701
|
"svg",
|
|
554
702
|
{
|
|
555
703
|
viewBox: "0 0 24 24",
|
|
@@ -559,17 +707,17 @@ function FilmstripThumb({ item }) {
|
|
|
559
707
|
strokeLinecap: "round",
|
|
560
708
|
"aria-hidden": true,
|
|
561
709
|
children: [
|
|
562
|
-
/* @__PURE__ */
|
|
563
|
-
/* @__PURE__ */
|
|
564
|
-
/* @__PURE__ */
|
|
710
|
+
/* @__PURE__ */ jsx9("path", { d: "M12 3v10" }),
|
|
711
|
+
/* @__PURE__ */ jsx9("path", { d: "M8 7v4M16 7v4M4 9v1M20 9v1" }),
|
|
712
|
+
/* @__PURE__ */ jsx9("circle", { cx: "12", cy: "17", r: "3" })
|
|
565
713
|
]
|
|
566
714
|
}
|
|
567
715
|
) });
|
|
568
716
|
}
|
|
569
|
-
if (!url) return /* @__PURE__ */
|
|
717
|
+
if (!url) return /* @__PURE__ */ jsx9("span", { className: "block h-full w-full bg-white/5" });
|
|
570
718
|
if (item.kind === "video") {
|
|
571
|
-
return /* @__PURE__ */
|
|
572
|
-
/* @__PURE__ */
|
|
719
|
+
return /* @__PURE__ */ jsxs7("span", { className: "relative block h-full w-full", children: [
|
|
720
|
+
/* @__PURE__ */ jsx9(
|
|
573
721
|
"video",
|
|
574
722
|
{
|
|
575
723
|
src: url,
|
|
@@ -579,18 +727,18 @@ function FilmstripThumb({ item }) {
|
|
|
579
727
|
className: "h-full w-full object-cover"
|
|
580
728
|
}
|
|
581
729
|
),
|
|
582
|
-
/* @__PURE__ */
|
|
730
|
+
/* @__PURE__ */ jsx9(
|
|
583
731
|
"svg",
|
|
584
732
|
{
|
|
585
733
|
viewBox: "0 0 24 24",
|
|
586
734
|
className: "absolute inset-0 m-auto h-4 w-4 fill-white drop-shadow",
|
|
587
735
|
"aria-hidden": true,
|
|
588
|
-
children: /* @__PURE__ */
|
|
736
|
+
children: /* @__PURE__ */ jsx9("path", { d: "M8 5v14l11-7z" })
|
|
589
737
|
}
|
|
590
738
|
)
|
|
591
739
|
] });
|
|
592
740
|
}
|
|
593
|
-
return /* @__PURE__ */
|
|
741
|
+
return /* @__PURE__ */ jsx9("img", { src: url, alt: "", className: "h-full w-full object-cover" });
|
|
594
742
|
}
|
|
595
743
|
|
|
596
744
|
// src/components/MediaViewer.tsx
|
|
@@ -601,8 +749,7 @@ import {
|
|
|
601
749
|
useRef,
|
|
602
750
|
useState as useState3
|
|
603
751
|
} from "react";
|
|
604
|
-
import {
|
|
605
|
-
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
752
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
606
753
|
var SWIPE_TRIGGER_PX = 40;
|
|
607
754
|
var SWIPE_TRIGGER_VELOCITY = 0.25;
|
|
608
755
|
var DISMISS_TRIGGER_PX = 110;
|
|
@@ -735,55 +882,55 @@ function MediaViewer({
|
|
|
735
882
|
}, [items, clamped]);
|
|
736
883
|
if (!current) return null;
|
|
737
884
|
const canEdit = onEdit && current.kind === "photo";
|
|
738
|
-
return /* @__PURE__ */
|
|
739
|
-
/* @__PURE__ */
|
|
885
|
+
return /* @__PURE__ */ jsxs8("div", { className: "absolute inset-0 z-40 flex flex-col bg-black", children: [
|
|
886
|
+
/* @__PURE__ */ jsxs8(
|
|
740
887
|
"div",
|
|
741
888
|
{
|
|
742
889
|
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",
|
|
743
890
|
style: safeTop,
|
|
744
891
|
children: [
|
|
745
|
-
/* @__PURE__ */
|
|
892
|
+
/* @__PURE__ */ jsx10(
|
|
746
893
|
"button",
|
|
747
894
|
{
|
|
748
895
|
type: "button",
|
|
749
896
|
onClick: onClose,
|
|
750
897
|
"aria-label": "Close viewer",
|
|
751
898
|
className: "flex h-10 w-10 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
|
|
752
|
-
children: /* @__PURE__ */
|
|
899
|
+
children: /* @__PURE__ */ jsx10(XIcon, { className: "h-5 w-5" })
|
|
753
900
|
}
|
|
754
901
|
),
|
|
755
|
-
/* @__PURE__ */
|
|
902
|
+
/* @__PURE__ */ jsxs8("span", { className: "rounded-full bg-black/50 px-3 py-1 text-sm tabular-nums text-white/90", children: [
|
|
756
903
|
clamped + 1,
|
|
757
904
|
" / ",
|
|
758
905
|
count
|
|
759
906
|
] }),
|
|
760
|
-
/* @__PURE__ */
|
|
761
|
-
canEdit ? /* @__PURE__ */
|
|
907
|
+
/* @__PURE__ */ jsxs8("span", { className: "flex items-center gap-1", children: [
|
|
908
|
+
canEdit ? /* @__PURE__ */ jsx10(
|
|
762
909
|
"button",
|
|
763
910
|
{
|
|
764
911
|
type: "button",
|
|
765
912
|
onClick: () => onEdit(current),
|
|
766
913
|
"aria-label": "Edit this photo",
|
|
767
914
|
className: "flex h-10 w-10 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
|
|
768
|
-
children: /* @__PURE__ */
|
|
915
|
+
children: /* @__PURE__ */ jsx10(PencilIcon, { className: "h-5 w-5" })
|
|
769
916
|
}
|
|
770
917
|
) : null,
|
|
771
|
-
onDelete ? /* @__PURE__ */
|
|
918
|
+
onDelete ? /* @__PURE__ */ jsx10(
|
|
772
919
|
"button",
|
|
773
920
|
{
|
|
774
921
|
type: "button",
|
|
775
922
|
onClick: () => setConfirmingDelete(true),
|
|
776
923
|
"aria-label": "Delete this file",
|
|
777
924
|
className: "flex h-10 w-10 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
|
|
778
|
-
children: /* @__PURE__ */
|
|
925
|
+
children: /* @__PURE__ */ jsx10(Trash2Icon, { className: "h-5 w-5" })
|
|
779
926
|
}
|
|
780
|
-
) : /* @__PURE__ */
|
|
927
|
+
) : /* @__PURE__ */ jsx10("span", { className: "h-10 w-10", "aria-hidden": true })
|
|
781
928
|
] })
|
|
782
929
|
]
|
|
783
930
|
}
|
|
784
931
|
),
|
|
785
|
-
/* @__PURE__ */
|
|
786
|
-
/* @__PURE__ */
|
|
932
|
+
/* @__PURE__ */ jsxs8("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: [
|
|
933
|
+
/* @__PURE__ */ jsx10(
|
|
787
934
|
"div",
|
|
788
935
|
{
|
|
789
936
|
className: "absolute inset-0 touch-none",
|
|
@@ -796,7 +943,7 @@ function MediaViewer({
|
|
|
796
943
|
onPointerMove,
|
|
797
944
|
onPointerUp: endDrag,
|
|
798
945
|
onPointerCancel: endDrag,
|
|
799
|
-
children: /* @__PURE__ */
|
|
946
|
+
children: /* @__PURE__ */ jsx10(
|
|
800
947
|
ViewerSlide,
|
|
801
948
|
{
|
|
802
949
|
item: current,
|
|
@@ -807,36 +954,36 @@ function MediaViewer({
|
|
|
807
954
|
)
|
|
808
955
|
}
|
|
809
956
|
),
|
|
810
|
-
/* @__PURE__ */
|
|
957
|
+
/* @__PURE__ */ jsx10(
|
|
811
958
|
"div",
|
|
812
959
|
{
|
|
813
960
|
"aria-hidden": true,
|
|
814
961
|
className: "pointer-events-none absolute inset-0 opacity-0",
|
|
815
|
-
children: neighborKeys.map((m) => /* @__PURE__ */
|
|
962
|
+
children: neighborKeys.map((m) => /* @__PURE__ */ jsx10("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx10(ViewerSlide, { item: m, active: false }) }, m.key))
|
|
816
963
|
}
|
|
817
964
|
),
|
|
818
|
-
clamped > 0 && /* @__PURE__ */
|
|
965
|
+
clamped > 0 && /* @__PURE__ */ jsx10(
|
|
819
966
|
"button",
|
|
820
967
|
{
|
|
821
968
|
type: "button",
|
|
822
969
|
onClick: () => go(-1),
|
|
823
970
|
"aria-label": "Previous file",
|
|
824
971
|
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",
|
|
825
|
-
children: /* @__PURE__ */
|
|
972
|
+
children: /* @__PURE__ */ jsx10(ChevronLeftIcon, { className: "h-6 w-6" })
|
|
826
973
|
}
|
|
827
974
|
),
|
|
828
|
-
clamped < count - 1 && /* @__PURE__ */
|
|
975
|
+
clamped < count - 1 && /* @__PURE__ */ jsx10(
|
|
829
976
|
"button",
|
|
830
977
|
{
|
|
831
978
|
type: "button",
|
|
832
979
|
onClick: () => go(1),
|
|
833
980
|
"aria-label": "Next file",
|
|
834
981
|
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",
|
|
835
|
-
children: /* @__PURE__ */
|
|
982
|
+
children: /* @__PURE__ */ jsx10(ChevronRightIcon, { className: "h-6 w-6" })
|
|
836
983
|
}
|
|
837
984
|
)
|
|
838
985
|
] }),
|
|
839
|
-
confirmingDelete && onDelete && /* @__PURE__ */
|
|
986
|
+
confirmingDelete && onDelete && /* @__PURE__ */ jsxs8(
|
|
840
987
|
"div",
|
|
841
988
|
{
|
|
842
989
|
className: "absolute inset-x-0 bottom-0 z-30 bg-black/85 px-4 pt-4 backdrop-blur-sm",
|
|
@@ -844,14 +991,14 @@ function MediaViewer({
|
|
|
844
991
|
paddingBottom: "calc(1rem + env(safe-area-inset-bottom, 0px))"
|
|
845
992
|
},
|
|
846
993
|
children: [
|
|
847
|
-
/* @__PURE__ */
|
|
994
|
+
/* @__PURE__ */ jsxs8("p", { className: "pb-3 text-center text-sm text-white/85", children: [
|
|
848
995
|
"Delete this ",
|
|
849
996
|
current.kind === "video" ? "video" : current.kind === "audio" ? "voice note" : "photo",
|
|
850
997
|
"? ",
|
|
851
998
|
deleteConsequence
|
|
852
999
|
] }),
|
|
853
|
-
/* @__PURE__ */
|
|
854
|
-
/* @__PURE__ */
|
|
1000
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-center gap-3", children: [
|
|
1001
|
+
/* @__PURE__ */ jsx10(
|
|
855
1002
|
"button",
|
|
856
1003
|
{
|
|
857
1004
|
type: "button",
|
|
@@ -860,7 +1007,7 @@ function MediaViewer({
|
|
|
860
1007
|
children: "Keep it"
|
|
861
1008
|
}
|
|
862
1009
|
),
|
|
863
|
-
/* @__PURE__ */
|
|
1010
|
+
/* @__PURE__ */ jsx10(
|
|
864
1011
|
"button",
|
|
865
1012
|
{
|
|
866
1013
|
type: "button",
|
|
@@ -876,12 +1023,12 @@ function MediaViewer({
|
|
|
876
1023
|
]
|
|
877
1024
|
}
|
|
878
1025
|
),
|
|
879
|
-
count > 1 && count <= 12 && /* @__PURE__ */
|
|
1026
|
+
count > 1 && count <= 12 && /* @__PURE__ */ jsx10(
|
|
880
1027
|
"div",
|
|
881
1028
|
{
|
|
882
1029
|
className: "pointer-events-none absolute inset-x-0 bottom-4 z-20 flex justify-center gap-1.5",
|
|
883
1030
|
style: safeMarginBottom,
|
|
884
|
-
children: items.map((m, i) => /* @__PURE__ */
|
|
1031
|
+
children: items.map((m, i) => /* @__PURE__ */ jsx10(
|
|
885
1032
|
"span",
|
|
886
1033
|
{
|
|
887
1034
|
className: cn(
|
|
@@ -902,12 +1049,12 @@ function ViewerSlide({
|
|
|
902
1049
|
}) {
|
|
903
1050
|
const url = useMediaUrl(item);
|
|
904
1051
|
if (!url) {
|
|
905
|
-
return active ? /* @__PURE__ */
|
|
1052
|
+
return active ? /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx10("span", { className: "h-8 w-8 animate-spin rounded-full border-2 border-white/30 border-t-white" }) }) : null;
|
|
906
1053
|
}
|
|
907
1054
|
if (item.kind === "audio") {
|
|
908
1055
|
if (!active) return null;
|
|
909
|
-
return /* @__PURE__ */
|
|
910
|
-
/* @__PURE__ */
|
|
1056
|
+
return /* @__PURE__ */ jsxs8("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-6 px-8", children: [
|
|
1057
|
+
/* @__PURE__ */ jsxs8(
|
|
911
1058
|
"svg",
|
|
912
1059
|
{
|
|
913
1060
|
viewBox: "0 0 24 24",
|
|
@@ -917,19 +1064,19 @@ function ViewerSlide({
|
|
|
917
1064
|
strokeLinecap: "round",
|
|
918
1065
|
"aria-hidden": true,
|
|
919
1066
|
children: [
|
|
920
|
-
/* @__PURE__ */
|
|
921
|
-
/* @__PURE__ */
|
|
922
|
-
/* @__PURE__ */
|
|
1067
|
+
/* @__PURE__ */ jsx10("path", { d: "M12 2v12" }),
|
|
1068
|
+
/* @__PURE__ */ jsx10("path", { d: "M7 6v6M17 6v6M2 9v2M22 9v2" }),
|
|
1069
|
+
/* @__PURE__ */ jsx10("circle", { cx: "12", cy: "19", r: "3" })
|
|
923
1070
|
]
|
|
924
1071
|
}
|
|
925
1072
|
),
|
|
926
|
-
/* @__PURE__ */
|
|
1073
|
+
/* @__PURE__ */ jsx10("audio", { src: url, controls: true, className: "w-full max-w-sm" })
|
|
927
1074
|
] });
|
|
928
1075
|
}
|
|
929
1076
|
if (item.kind === "video") {
|
|
930
|
-
return /* @__PURE__ */
|
|
1077
|
+
return /* @__PURE__ */ jsx10(VideoSlide, { url, active, videoRef });
|
|
931
1078
|
}
|
|
932
|
-
return /* @__PURE__ */
|
|
1079
|
+
return /* @__PURE__ */ jsx10(
|
|
933
1080
|
"img",
|
|
934
1081
|
{
|
|
935
1082
|
src: url,
|
|
@@ -955,8 +1102,8 @@ function VideoSlide({
|
|
|
955
1102
|
if (videoRef.current === localRef.current) videoRef.current = null;
|
|
956
1103
|
};
|
|
957
1104
|
}, [active, videoRef]);
|
|
958
|
-
return /* @__PURE__ */
|
|
959
|
-
/* @__PURE__ */
|
|
1105
|
+
return /* @__PURE__ */ jsxs8("div", { className: "pointer-events-none absolute inset-0", children: [
|
|
1106
|
+
/* @__PURE__ */ jsx10(
|
|
960
1107
|
"video",
|
|
961
1108
|
{
|
|
962
1109
|
ref: localRef,
|
|
@@ -975,8 +1122,8 @@ function VideoSlide({
|
|
|
975
1122
|
className: "absolute inset-0 h-full w-full object-contain"
|
|
976
1123
|
}
|
|
977
1124
|
),
|
|
978
|
-
active && paused && /* @__PURE__ */
|
|
979
|
-
active && !paused && /* @__PURE__ */
|
|
1125
|
+
active && paused && /* @__PURE__ */ jsx10("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx10("span", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-black/45", children: /* @__PURE__ */ jsx10(PlayIcon, { className: "ml-1 h-8 w-8 fill-white text-white" }) }) }),
|
|
1126
|
+
active && !paused && /* @__PURE__ */ jsx10("span", { className: "absolute inset-x-4 bottom-2 h-0.5 overflow-hidden rounded-full bg-white/25", children: /* @__PURE__ */ jsx10(
|
|
980
1127
|
"span",
|
|
981
1128
|
{
|
|
982
1129
|
className: "block h-full rounded-full bg-white",
|
|
@@ -993,8 +1140,7 @@ import {
|
|
|
993
1140
|
useRef as useRef2,
|
|
994
1141
|
useState as useState4
|
|
995
1142
|
} from "react";
|
|
996
|
-
import {
|
|
997
|
-
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1143
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
998
1144
|
var ASPECTS = [
|
|
999
1145
|
{ id: "free", label: "Free", ratio: null },
|
|
1000
1146
|
{ id: "1:1", label: "Square", ratio: 1 },
|
|
@@ -1174,14 +1320,14 @@ function ImageEditSheet({
|
|
|
1174
1320
|
}
|
|
1175
1321
|
}, [crop, onSave, onClose]);
|
|
1176
1322
|
if (!open || !src) return null;
|
|
1177
|
-
return /* @__PURE__ */
|
|
1178
|
-
/* @__PURE__ */
|
|
1323
|
+
return /* @__PURE__ */ jsxs9("div", { className: "absolute inset-0 z-50 flex flex-col bg-black", children: [
|
|
1324
|
+
/* @__PURE__ */ jsxs9(
|
|
1179
1325
|
"div",
|
|
1180
1326
|
{
|
|
1181
1327
|
className: "flex shrink-0 items-center justify-between px-4",
|
|
1182
1328
|
style: { paddingTop: "env(safe-area-inset-top, 0px)" },
|
|
1183
1329
|
children: [
|
|
1184
|
-
/* @__PURE__ */
|
|
1330
|
+
/* @__PURE__ */ jsxs9(
|
|
1185
1331
|
"button",
|
|
1186
1332
|
{
|
|
1187
1333
|
type: "button",
|
|
@@ -1189,13 +1335,13 @@ function ImageEditSheet({
|
|
|
1189
1335
|
"aria-label": "Cancel editing",
|
|
1190
1336
|
className: "flex h-11 items-center gap-1.5 rounded-full px-3 text-[15px] font-medium text-white",
|
|
1191
1337
|
children: [
|
|
1192
|
-
/* @__PURE__ */
|
|
1338
|
+
/* @__PURE__ */ jsx11(XIcon, { className: "h-5 w-5" }),
|
|
1193
1339
|
"Cancel"
|
|
1194
1340
|
]
|
|
1195
1341
|
}
|
|
1196
1342
|
),
|
|
1197
|
-
/* @__PURE__ */
|
|
1198
|
-
/* @__PURE__ */
|
|
1343
|
+
/* @__PURE__ */ jsx11("span", { className: "text-[15px] font-semibold text-white/90", children: "Edit" }),
|
|
1344
|
+
/* @__PURE__ */ jsxs9(
|
|
1199
1345
|
"button",
|
|
1200
1346
|
{
|
|
1201
1347
|
type: "button",
|
|
@@ -1204,7 +1350,7 @@ function ImageEditSheet({
|
|
|
1204
1350
|
"aria-label": "Save edited image",
|
|
1205
1351
|
className: "flex h-11 items-center gap-1.5 rounded-full px-3 text-[15px] font-semibold text-[#FFCC00] disabled:opacity-50",
|
|
1206
1352
|
children: [
|
|
1207
|
-
/* @__PURE__ */
|
|
1353
|
+
/* @__PURE__ */ jsx11(CheckIcon, { className: "h-5 w-5" }),
|
|
1208
1354
|
"Save"
|
|
1209
1355
|
]
|
|
1210
1356
|
}
|
|
@@ -1212,7 +1358,7 @@ function ImageEditSheet({
|
|
|
1212
1358
|
]
|
|
1213
1359
|
}
|
|
1214
1360
|
),
|
|
1215
|
-
/* @__PURE__ */
|
|
1361
|
+
/* @__PURE__ */ jsx11(
|
|
1216
1362
|
"div",
|
|
1217
1363
|
{
|
|
1218
1364
|
ref: stageRef,
|
|
@@ -1220,8 +1366,8 @@ function ImageEditSheet({
|
|
|
1220
1366
|
onPointerMove,
|
|
1221
1367
|
onPointerUp,
|
|
1222
1368
|
onPointerCancel: onPointerUp,
|
|
1223
|
-
children: /* @__PURE__ */
|
|
1224
|
-
/* @__PURE__ */
|
|
1369
|
+
children: /* @__PURE__ */ jsxs9("div", { className: "relative max-h-full max-w-full", children: [
|
|
1370
|
+
/* @__PURE__ */ jsx11(
|
|
1225
1371
|
"img",
|
|
1226
1372
|
{
|
|
1227
1373
|
ref: imgRef,
|
|
@@ -1231,7 +1377,7 @@ function ImageEditSheet({
|
|
|
1231
1377
|
className: "max-h-[62dvh] max-w-full select-none object-contain"
|
|
1232
1378
|
}
|
|
1233
1379
|
),
|
|
1234
|
-
/* @__PURE__ */
|
|
1380
|
+
/* @__PURE__ */ jsx11(
|
|
1235
1381
|
"div",
|
|
1236
1382
|
{
|
|
1237
1383
|
role: "presentation",
|
|
@@ -1243,7 +1389,7 @@ function ImageEditSheet({
|
|
|
1243
1389
|
width: `${crop.w * 100}%`,
|
|
1244
1390
|
height: `${crop.h * 100}%`
|
|
1245
1391
|
},
|
|
1246
|
-
children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */
|
|
1392
|
+
children: ["nw", "ne", "sw", "se"].map((corner) => /* @__PURE__ */ jsx11(
|
|
1247
1393
|
"span",
|
|
1248
1394
|
{
|
|
1249
1395
|
role: "presentation",
|
|
@@ -1264,9 +1410,9 @@ function ImageEditSheet({
|
|
|
1264
1410
|
] })
|
|
1265
1411
|
}
|
|
1266
1412
|
),
|
|
1267
|
-
/* @__PURE__ */
|
|
1268
|
-
editError && /* @__PURE__ */
|
|
1269
|
-
/* @__PURE__ */
|
|
1413
|
+
/* @__PURE__ */ jsxs9("div", { className: "shrink-0", style: { paddingBottom: "env(safe-area-inset-bottom, 0px)" }, children: [
|
|
1414
|
+
editError && /* @__PURE__ */ jsx11("p", { className: "px-6 pb-2 text-center text-sm text-[#FF6961]", children: editError }),
|
|
1415
|
+
/* @__PURE__ */ jsx11("div", { className: "flex items-center justify-center gap-2 pb-2", children: ASPECTS.map((a) => /* @__PURE__ */ jsx11(
|
|
1270
1416
|
"button",
|
|
1271
1417
|
{
|
|
1272
1418
|
type: "button",
|
|
@@ -1280,25 +1426,25 @@ function ImageEditSheet({
|
|
|
1280
1426
|
},
|
|
1281
1427
|
a.id
|
|
1282
1428
|
)) }),
|
|
1283
|
-
/* @__PURE__ */
|
|
1284
|
-
/* @__PURE__ */
|
|
1429
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-center gap-6 pb-4", children: [
|
|
1430
|
+
/* @__PURE__ */ jsx11(
|
|
1285
1431
|
"button",
|
|
1286
1432
|
{
|
|
1287
1433
|
type: "button",
|
|
1288
1434
|
onClick: () => bake("rotate-left"),
|
|
1289
1435
|
"aria-label": "Rotate left",
|
|
1290
1436
|
className: "flex h-12 w-12 touch-manipulation items-center justify-center rounded-full bg-white/10 text-white",
|
|
1291
|
-
children: /* @__PURE__ */
|
|
1437
|
+
children: /* @__PURE__ */ jsx11(RotateCcwIcon, { className: "h-5 w-5" })
|
|
1292
1438
|
}
|
|
1293
1439
|
),
|
|
1294
|
-
/* @__PURE__ */
|
|
1440
|
+
/* @__PURE__ */ jsx11(
|
|
1295
1441
|
"button",
|
|
1296
1442
|
{
|
|
1297
1443
|
type: "button",
|
|
1298
1444
|
onClick: () => bake("flip"),
|
|
1299
1445
|
"aria-label": "Flip horizontally",
|
|
1300
1446
|
className: "flex h-12 w-12 touch-manipulation items-center justify-center rounded-full bg-white/10 text-white",
|
|
1301
|
-
children: /* @__PURE__ */
|
|
1447
|
+
children: /* @__PURE__ */ jsx11(FlipHorizontal2Icon, { className: "h-5 w-5" })
|
|
1302
1448
|
}
|
|
1303
1449
|
)
|
|
1304
1450
|
] })
|
|
@@ -1307,7 +1453,7 @@ function ImageEditSheet({
|
|
|
1307
1453
|
}
|
|
1308
1454
|
|
|
1309
1455
|
// src/components/CameraCapture.tsx
|
|
1310
|
-
import { jsx as
|
|
1456
|
+
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1311
1457
|
function formatElapsed(totalSeconds) {
|
|
1312
1458
|
const m = Math.floor(totalSeconds / 60);
|
|
1313
1459
|
const s = String(totalSeconds % 60).padStart(2, "0");
|
|
@@ -1386,7 +1532,7 @@ function CameraCapture({
|
|
|
1386
1532
|
{
|
|
1387
1533
|
id: "flash",
|
|
1388
1534
|
label: "Flash",
|
|
1389
|
-
icon: controls.torchOn ? /* @__PURE__ */
|
|
1535
|
+
icon: controls.torchOn ? /* @__PURE__ */ jsx12(ZapIcon, { className: "h-6 w-6", fill: "currentColor" }) : /* @__PURE__ */ jsx12(ZapOffIcon, { className: "h-6 w-6" }),
|
|
1390
1536
|
active: controls.torchOn,
|
|
1391
1537
|
onPress: controls.toggleTorch
|
|
1392
1538
|
}
|
|
@@ -1394,7 +1540,7 @@ function CameraCapture({
|
|
|
1394
1540
|
{
|
|
1395
1541
|
id: "timer",
|
|
1396
1542
|
label: "Timer",
|
|
1397
|
-
icon: /* @__PURE__ */
|
|
1543
|
+
icon: /* @__PURE__ */ jsx12(TimerIcon, { className: "h-6 w-6" }),
|
|
1398
1544
|
active: timerSetting !== 0,
|
|
1399
1545
|
valueLabel: timerSetting === 0 ? void 0 : `${timerSetting}s`,
|
|
1400
1546
|
onPress: cycleTimer
|
|
@@ -1402,7 +1548,7 @@ function CameraCapture({
|
|
|
1402
1548
|
{
|
|
1403
1549
|
id: "grid",
|
|
1404
1550
|
label: "Grid",
|
|
1405
|
-
icon: /* @__PURE__ */
|
|
1551
|
+
icon: /* @__PURE__ */ jsx12(Grid3x3Icon, { className: "h-6 w-6" }),
|
|
1406
1552
|
active: gridOn,
|
|
1407
1553
|
onPress: () => setGridOn((g) => !g)
|
|
1408
1554
|
},
|
|
@@ -1410,7 +1556,7 @@ function CameraCapture({
|
|
|
1410
1556
|
{
|
|
1411
1557
|
id: "aspect",
|
|
1412
1558
|
label: "Aspect",
|
|
1413
|
-
icon: /* @__PURE__ */
|
|
1559
|
+
icon: /* @__PURE__ */ jsx12(ProportionsIcon, { className: "h-6 w-6" }),
|
|
1414
1560
|
active: aspect !== "full",
|
|
1415
1561
|
valueLabel: aspect === "full" ? void 0 : aspect,
|
|
1416
1562
|
onPress: () => setAspect(
|
|
@@ -1421,7 +1567,7 @@ function CameraCapture({
|
|
|
1421
1567
|
{
|
|
1422
1568
|
id: "exposure",
|
|
1423
1569
|
label: "Exposure",
|
|
1424
|
-
icon: /* @__PURE__ */
|
|
1570
|
+
icon: /* @__PURE__ */ jsx12(SunMediumIcon, { className: "h-6 w-6" }),
|
|
1425
1571
|
active: controls.exposure !== 0 || exposureOpen,
|
|
1426
1572
|
valueLabel: controls.exposure === 0 ? void 0 : `${controls.exposure > 0 ? "+" : ""}${controls.exposure}`,
|
|
1427
1573
|
onPress: () => setExposureOpen((o) => !o)
|
|
@@ -1430,15 +1576,15 @@ function CameraCapture({
|
|
|
1430
1576
|
];
|
|
1431
1577
|
const tiles = [...coreTiles, ...slots.optionTiles ?? []];
|
|
1432
1578
|
const blocked = engine.blocked !== null;
|
|
1433
|
-
return /* @__PURE__ */
|
|
1434
|
-
/* @__PURE__ */
|
|
1435
|
-
/* @__PURE__ */
|
|
1436
|
-
mode === "photo" && aspect !== "full" && !blocked && /* @__PURE__ */
|
|
1579
|
+
return /* @__PURE__ */ jsxs10("div", { className: "absolute inset-0 select-none overflow-hidden bg-black", children: [
|
|
1580
|
+
/* @__PURE__ */ jsx12("div", { className: "absolute inset-0", children: preview }),
|
|
1581
|
+
/* @__PURE__ */ jsx12(GridOverlay, { visible: gridOn && !blocked }),
|
|
1582
|
+
mode === "photo" && aspect !== "full" && !blocked && /* @__PURE__ */ jsx12(
|
|
1437
1583
|
"div",
|
|
1438
1584
|
{
|
|
1439
1585
|
"aria-hidden": true,
|
|
1440
1586
|
className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
|
|
1441
|
-
children: /* @__PURE__ */
|
|
1587
|
+
children: /* @__PURE__ */ jsx12(
|
|
1442
1588
|
"div",
|
|
1443
1589
|
{
|
|
1444
1590
|
className: "shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]",
|
|
@@ -1453,25 +1599,25 @@ function CameraCapture({
|
|
|
1453
1599
|
)
|
|
1454
1600
|
}
|
|
1455
1601
|
),
|
|
1456
|
-
/* @__PURE__ */
|
|
1457
|
-
!controlsHidden && /* @__PURE__ */
|
|
1602
|
+
/* @__PURE__ */ jsx12(CountdownOverlay, { seconds: countdown }),
|
|
1603
|
+
!controlsHidden && /* @__PURE__ */ jsx12(
|
|
1458
1604
|
"div",
|
|
1459
1605
|
{
|
|
1460
1606
|
className: "absolute inset-x-0 top-0 z-20 bg-black/65 backdrop-blur-[2px]",
|
|
1461
1607
|
style: safeTop,
|
|
1462
|
-
children: /* @__PURE__ */
|
|
1463
|
-
onClose ? /* @__PURE__ */
|
|
1608
|
+
children: /* @__PURE__ */ jsxs10("div", { className: "flex h-11 items-center gap-0.5 px-1.5", children: [
|
|
1609
|
+
onClose ? /* @__PURE__ */ jsx12(
|
|
1464
1610
|
"button",
|
|
1465
1611
|
{
|
|
1466
1612
|
type: "button",
|
|
1467
1613
|
onClick: onClose,
|
|
1468
1614
|
"aria-label": "Close camera",
|
|
1469
1615
|
className: "flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full text-white transition-colors hover:bg-white/10",
|
|
1470
|
-
children: /* @__PURE__ */
|
|
1616
|
+
children: /* @__PURE__ */ jsx12(XIcon, { className: "h-5 w-5" })
|
|
1471
1617
|
}
|
|
1472
|
-
) : /* @__PURE__ */
|
|
1473
|
-
/* @__PURE__ */
|
|
1474
|
-
controls.torchSupported && /* @__PURE__ */
|
|
1618
|
+
) : /* @__PURE__ */ jsx12("span", { className: "w-10 shrink-0" }),
|
|
1619
|
+
/* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: slots.topBarCenter }),
|
|
1620
|
+
controls.torchSupported && /* @__PURE__ */ jsx12(
|
|
1475
1621
|
"button",
|
|
1476
1622
|
{
|
|
1477
1623
|
type: "button",
|
|
@@ -1482,8 +1628,8 @@ function CameraCapture({
|
|
|
1482
1628
|
"flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full transition-colors",
|
|
1483
1629
|
controls.torchOn ? "text-[#FFCC00]" : "text-white hover:bg-white/10"
|
|
1484
1630
|
),
|
|
1485
|
-
children: /* @__PURE__ */
|
|
1486
|
-
|
|
1631
|
+
children: /* @__PURE__ */ jsx12(
|
|
1632
|
+
ZapIcon,
|
|
1487
1633
|
{
|
|
1488
1634
|
className: "h-5 w-5",
|
|
1489
1635
|
fill: controls.torchOn ? "currentColor" : "none"
|
|
@@ -1492,7 +1638,7 @@ function CameraCapture({
|
|
|
1492
1638
|
}
|
|
1493
1639
|
),
|
|
1494
1640
|
slots.topBarTrailing,
|
|
1495
|
-
/* @__PURE__ */
|
|
1641
|
+
/* @__PURE__ */ jsx12(
|
|
1496
1642
|
"button",
|
|
1497
1643
|
{
|
|
1498
1644
|
type: "button",
|
|
@@ -1503,28 +1649,28 @@ function CameraCapture({
|
|
|
1503
1649
|
"flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full transition-colors",
|
|
1504
1650
|
optionsOpen ? "bg-white/20 text-white" : "text-white hover:bg-white/10"
|
|
1505
1651
|
),
|
|
1506
|
-
children: /* @__PURE__ */
|
|
1652
|
+
children: /* @__PURE__ */ jsx12(GripIcon, { className: "h-5 w-5" })
|
|
1507
1653
|
}
|
|
1508
1654
|
)
|
|
1509
1655
|
] })
|
|
1510
1656
|
}
|
|
1511
1657
|
),
|
|
1512
|
-
/* @__PURE__ */
|
|
1658
|
+
/* @__PURE__ */ jsxs10(
|
|
1513
1659
|
"div",
|
|
1514
1660
|
{
|
|
1515
1661
|
className: "pointer-events-none absolute inset-x-0 top-[50px] z-20 flex flex-col items-center gap-1.5",
|
|
1516
1662
|
style: safeMarginTop,
|
|
1517
1663
|
children: [
|
|
1518
|
-
engine.recording && /* @__PURE__ */
|
|
1519
|
-
/* @__PURE__ */
|
|
1664
|
+
engine.recording && /* @__PURE__ */ jsxs10("span", { className: "flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm font-medium text-white", children: [
|
|
1665
|
+
/* @__PURE__ */ jsx12("span", { className: "h-2.5 w-2.5 animate-pulse rounded-full bg-[#FF3B30]" }),
|
|
1520
1666
|
formatElapsed(engine.recordElapsedSeconds)
|
|
1521
1667
|
] }),
|
|
1522
1668
|
slots.statusChips
|
|
1523
1669
|
]
|
|
1524
1670
|
}
|
|
1525
1671
|
),
|
|
1526
|
-
!controlsHidden && /* @__PURE__ */
|
|
1527
|
-
!blocked && controls.zoomOptions.length >= 2 && /* @__PURE__ */
|
|
1672
|
+
!controlsHidden && /* @__PURE__ */ jsxs10("div", { className: "absolute inset-x-0 bottom-0 z-20", children: [
|
|
1673
|
+
!blocked && controls.zoomOptions.length >= 2 && /* @__PURE__ */ jsx12("div", { className: "mb-2", children: /* @__PURE__ */ jsx12(
|
|
1528
1674
|
ZoomRow,
|
|
1529
1675
|
{
|
|
1530
1676
|
options: controls.zoomOptions,
|
|
@@ -1532,17 +1678,17 @@ function CameraCapture({
|
|
|
1532
1678
|
onSelect: controls.setZoom
|
|
1533
1679
|
}
|
|
1534
1680
|
) }),
|
|
1535
|
-
media && media.items.length > 0 && /* @__PURE__ */
|
|
1681
|
+
media && media.items.length > 0 && /* @__PURE__ */ jsx12("div", { className: "mb-1.5 px-2", children: /* @__PURE__ */ jsx12(
|
|
1536
1682
|
CaptureFilmstrip,
|
|
1537
1683
|
{
|
|
1538
1684
|
items: media.items,
|
|
1539
1685
|
onOpen: (item) => setViewerKey(item.key)
|
|
1540
1686
|
}
|
|
1541
1687
|
) }),
|
|
1542
|
-
slots.aboveBar && /* @__PURE__ */
|
|
1543
|
-
exposureOpen && controls.exposureSupported && controls.exposureRange && /* @__PURE__ */
|
|
1544
|
-
/* @__PURE__ */
|
|
1545
|
-
/* @__PURE__ */
|
|
1688
|
+
slots.aboveBar && /* @__PURE__ */ jsx12("div", { className: "mb-1.5 px-2", children: slots.aboveBar }),
|
|
1689
|
+
exposureOpen && controls.exposureSupported && controls.exposureRange && /* @__PURE__ */ jsxs10("div", { className: "mx-auto mb-3 flex w-64 items-center gap-3 rounded-full bg-black/55 px-4 py-2", children: [
|
|
1690
|
+
/* @__PURE__ */ jsx12(SunMediumIcon, { className: "h-4 w-4 shrink-0 text-[#FFCC00]" }),
|
|
1691
|
+
/* @__PURE__ */ jsx12(
|
|
1546
1692
|
"input",
|
|
1547
1693
|
{
|
|
1548
1694
|
type: "range",
|
|
@@ -1555,20 +1701,20 @@ function CameraCapture({
|
|
|
1555
1701
|
className: "w-full accent-[#FFCC00]"
|
|
1556
1702
|
}
|
|
1557
1703
|
),
|
|
1558
|
-
/* @__PURE__ */
|
|
1704
|
+
/* @__PURE__ */ jsxs10("span", { className: "w-8 shrink-0 text-right text-xs tabular-nums text-white", children: [
|
|
1559
1705
|
controls.exposure > 0 ? "+" : "",
|
|
1560
1706
|
controls.exposure
|
|
1561
1707
|
] })
|
|
1562
1708
|
] }),
|
|
1563
|
-
/* @__PURE__ */
|
|
1709
|
+
/* @__PURE__ */ jsxs10(
|
|
1564
1710
|
"div",
|
|
1565
1711
|
{
|
|
1566
1712
|
className: "bg-black/65 px-3 backdrop-blur-[2px]",
|
|
1567
1713
|
style: safeBottom,
|
|
1568
1714
|
children: [
|
|
1569
1715
|
slots.aboveModeSelector,
|
|
1570
|
-
/* @__PURE__ */
|
|
1571
|
-
/* @__PURE__ */
|
|
1716
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-center gap-2 py-1.5", children: [
|
|
1717
|
+
/* @__PURE__ */ jsx12(
|
|
1572
1718
|
ModeSelector,
|
|
1573
1719
|
{
|
|
1574
1720
|
mode,
|
|
@@ -1579,20 +1725,20 @@ function CameraCapture({
|
|
|
1579
1725
|
extraModes: slots.extraModes
|
|
1580
1726
|
}
|
|
1581
1727
|
),
|
|
1582
|
-
slots.modeRowTrailing && /* @__PURE__ */
|
|
1728
|
+
slots.modeRowTrailing && /* @__PURE__ */ jsx12("div", { className: "shrink-0", children: slots.modeRowTrailing })
|
|
1583
1729
|
] }),
|
|
1584
|
-
/* @__PURE__ */
|
|
1585
|
-
/* @__PURE__ */
|
|
1730
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-2 pb-1.5 pt-0.5", children: [
|
|
1731
|
+
/* @__PURE__ */ jsx12("div", { className: "flex w-14 justify-start", children: /* @__PURE__ */ jsx12(
|
|
1586
1732
|
"button",
|
|
1587
1733
|
{
|
|
1588
1734
|
type: "button",
|
|
1589
1735
|
onClick: cloud.onOpenLibrary,
|
|
1590
1736
|
"aria-label": "Open your media library",
|
|
1591
1737
|
className: "h-11 w-11 touch-manipulation overflow-hidden rounded-xl bg-white/10 ring-1 ring-white/25 transition-transform active:scale-95",
|
|
1592
|
-
children: cloud.recentsThumb ?? /* @__PURE__ */
|
|
1738
|
+
children: cloud.recentsThumb ?? /* @__PURE__ */ jsx12("span", { className: "block h-full w-full bg-white/5" })
|
|
1593
1739
|
}
|
|
1594
1740
|
) }),
|
|
1595
|
-
/* @__PURE__ */
|
|
1741
|
+
/* @__PURE__ */ jsx12(
|
|
1596
1742
|
ShutterButton,
|
|
1597
1743
|
{
|
|
1598
1744
|
mode,
|
|
@@ -1601,22 +1747,22 @@ function CameraCapture({
|
|
|
1601
1747
|
onPress: onShutter
|
|
1602
1748
|
}
|
|
1603
1749
|
),
|
|
1604
|
-
/* @__PURE__ */
|
|
1750
|
+
/* @__PURE__ */ jsx12("div", { className: "flex w-14 justify-end", children: engine.onFlipCamera ? /* @__PURE__ */ jsx12(
|
|
1605
1751
|
"button",
|
|
1606
1752
|
{
|
|
1607
1753
|
type: "button",
|
|
1608
1754
|
onClick: engine.onFlipCamera,
|
|
1609
1755
|
"aria-label": "Switch camera",
|
|
1610
1756
|
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",
|
|
1611
|
-
children: /* @__PURE__ */
|
|
1757
|
+
children: /* @__PURE__ */ jsx12(RefreshCwIcon, { className: "h-5 w-5" })
|
|
1612
1758
|
}
|
|
1613
|
-
) : /* @__PURE__ */
|
|
1759
|
+
) : /* @__PURE__ */ jsx12("span", { className: "h-11 w-11" }) })
|
|
1614
1760
|
] })
|
|
1615
1761
|
]
|
|
1616
1762
|
}
|
|
1617
1763
|
)
|
|
1618
1764
|
] }),
|
|
1619
|
-
/* @__PURE__ */
|
|
1765
|
+
/* @__PURE__ */ jsx12(
|
|
1620
1766
|
OptionsGridPanel,
|
|
1621
1767
|
{
|
|
1622
1768
|
open: optionsOpen && !controlsHidden,
|
|
@@ -1624,7 +1770,7 @@ function CameraCapture({
|
|
|
1624
1770
|
tiles
|
|
1625
1771
|
}
|
|
1626
1772
|
),
|
|
1627
|
-
blocked && blockedSheet && !blockedDismissed && /* @__PURE__ */
|
|
1773
|
+
blocked && blockedSheet && !blockedDismissed && /* @__PURE__ */ jsx12(
|
|
1628
1774
|
CaptureSheet,
|
|
1629
1775
|
{
|
|
1630
1776
|
open: true,
|
|
@@ -1634,7 +1780,7 @@ function CameraCapture({
|
|
|
1634
1780
|
actions: blockedSheet.actions
|
|
1635
1781
|
}
|
|
1636
1782
|
),
|
|
1637
|
-
media && viewerKey !== null && /* @__PURE__ */
|
|
1783
|
+
media && viewerKey !== null && /* @__PURE__ */ jsx12(
|
|
1638
1784
|
MediaViewer,
|
|
1639
1785
|
{
|
|
1640
1786
|
items: media.items,
|
|
@@ -1651,7 +1797,7 @@ function CameraCapture({
|
|
|
1651
1797
|
} : void 0
|
|
1652
1798
|
}
|
|
1653
1799
|
),
|
|
1654
|
-
media?.onReplacePhoto && /* @__PURE__ */
|
|
1800
|
+
media?.onReplacePhoto && /* @__PURE__ */ jsx12(
|
|
1655
1801
|
ImageEditSheet,
|
|
1656
1802
|
{
|
|
1657
1803
|
open: editTarget !== null,
|
|
@@ -1674,21 +1820,10 @@ function CameraCapture({
|
|
|
1674
1820
|
|
|
1675
1821
|
// src/components/CameraCaptureV3.tsx
|
|
1676
1822
|
import { useCallback as useCallback6, useEffect as useEffect7, useRef as useRef5, useState as useState8 } from "react";
|
|
1677
|
-
import {
|
|
1678
|
-
Grid3x3 as Grid3x32,
|
|
1679
|
-
Images,
|
|
1680
|
-
Proportions as Proportions2,
|
|
1681
|
-
RefreshCw as RefreshCw2,
|
|
1682
|
-
SunMedium as SunMedium2,
|
|
1683
|
-
Timer as Timer2,
|
|
1684
|
-
X as X5,
|
|
1685
|
-
Zap as Zap2,
|
|
1686
|
-
ZapOff as ZapOff2
|
|
1687
|
-
} from "lucide-react";
|
|
1688
1823
|
|
|
1689
1824
|
// src/components/CaptureRail.tsx
|
|
1690
1825
|
import { useState as useState6 } from "react";
|
|
1691
|
-
import { jsx as
|
|
1826
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1692
1827
|
function CaptureRail({
|
|
1693
1828
|
actions,
|
|
1694
1829
|
defaultExpanded = false,
|
|
@@ -1700,7 +1835,7 @@ function CaptureRail({
|
|
|
1700
1835
|
const shown = primary.length === 0 ? actions : expanded ? actions : primary;
|
|
1701
1836
|
const collapsible = primary.length > 0 && extra.length > 0;
|
|
1702
1837
|
if (actions.length === 0) return null;
|
|
1703
|
-
return /* @__PURE__ */
|
|
1838
|
+
return /* @__PURE__ */ jsxs11(
|
|
1704
1839
|
"div",
|
|
1705
1840
|
{
|
|
1706
1841
|
className: cn(
|
|
@@ -1708,8 +1843,8 @@ function CaptureRail({
|
|
|
1708
1843
|
className
|
|
1709
1844
|
),
|
|
1710
1845
|
children: [
|
|
1711
|
-
shown.map((action) => /* @__PURE__ */
|
|
1712
|
-
collapsible ? /* @__PURE__ */
|
|
1846
|
+
shown.map((action) => /* @__PURE__ */ jsx13(RailButton, { action }, action.id)),
|
|
1847
|
+
collapsible ? /* @__PURE__ */ jsx13(
|
|
1713
1848
|
"button",
|
|
1714
1849
|
{
|
|
1715
1850
|
type: "button",
|
|
@@ -1720,7 +1855,7 @@ function CaptureRail({
|
|
|
1720
1855
|
"mt-0.5 flex h-9 w-9 touch-manipulation items-center justify-center",
|
|
1721
1856
|
"rounded-full text-white/90 transition-colors hover:bg-white/10"
|
|
1722
1857
|
),
|
|
1723
|
-
children: /* @__PURE__ */
|
|
1858
|
+
children: /* @__PURE__ */ jsx13(
|
|
1724
1859
|
Chevron,
|
|
1725
1860
|
{
|
|
1726
1861
|
className: cn(
|
|
@@ -1736,7 +1871,7 @@ function CaptureRail({
|
|
|
1736
1871
|
);
|
|
1737
1872
|
}
|
|
1738
1873
|
function RailButton({ action }) {
|
|
1739
|
-
return /* @__PURE__ */
|
|
1874
|
+
return /* @__PURE__ */ jsxs11(
|
|
1740
1875
|
"button",
|
|
1741
1876
|
{
|
|
1742
1877
|
type: "button",
|
|
@@ -1751,14 +1886,14 @@ function RailButton({ action }) {
|
|
|
1751
1886
|
action.disabled ? "opacity-40" : "hover:bg-white/10 active:bg-white/15"
|
|
1752
1887
|
),
|
|
1753
1888
|
children: [
|
|
1754
|
-
/* @__PURE__ */
|
|
1755
|
-
action.valueLabel ? /* @__PURE__ */
|
|
1889
|
+
/* @__PURE__ */ jsx13("span", { className: "drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]", children: action.icon }),
|
|
1890
|
+
action.valueLabel ? /* @__PURE__ */ jsx13("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
|
|
1756
1891
|
]
|
|
1757
1892
|
}
|
|
1758
1893
|
);
|
|
1759
1894
|
}
|
|
1760
1895
|
function Chevron({ className }) {
|
|
1761
|
-
return /* @__PURE__ */
|
|
1896
|
+
return /* @__PURE__ */ jsx13(
|
|
1762
1897
|
"svg",
|
|
1763
1898
|
{
|
|
1764
1899
|
viewBox: "0 0 24 24",
|
|
@@ -1769,15 +1904,14 @@ function Chevron({ className }) {
|
|
|
1769
1904
|
strokeLinejoin: "round",
|
|
1770
1905
|
className,
|
|
1771
1906
|
"aria-hidden": "true",
|
|
1772
|
-
children: /* @__PURE__ */
|
|
1907
|
+
children: /* @__PURE__ */ jsx13("path", { d: "m6 9 6 6 6-6" })
|
|
1773
1908
|
}
|
|
1774
1909
|
);
|
|
1775
1910
|
}
|
|
1776
1911
|
|
|
1777
1912
|
// src/components/HoldShutter.tsx
|
|
1778
1913
|
import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
|
|
1779
|
-
import {
|
|
1780
|
-
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1914
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1781
1915
|
var HOLD_MS = 320;
|
|
1782
1916
|
var LOCK_DRAG_PX = 64;
|
|
1783
1917
|
function HoldShutter({
|
|
@@ -1851,15 +1985,15 @@ function HoldShutter({
|
|
|
1851
1985
|
const progress = maxSeconds && maxSeconds > 0 ? Math.min(1, elapsedSeconds / maxSeconds) : 0;
|
|
1852
1986
|
const R = 39;
|
|
1853
1987
|
const C = 2 * Math.PI * R;
|
|
1854
|
-
return /* @__PURE__ */
|
|
1855
|
-
recording && maxSeconds ? /* @__PURE__ */
|
|
1988
|
+
return /* @__PURE__ */ jsxs12("div", { className: "relative flex h-[86px] w-[86px] shrink-0 items-center justify-center", children: [
|
|
1989
|
+
recording && maxSeconds ? /* @__PURE__ */ jsxs12(
|
|
1856
1990
|
"svg",
|
|
1857
1991
|
{
|
|
1858
1992
|
className: "pointer-events-none absolute inset-0 -rotate-90",
|
|
1859
1993
|
viewBox: "0 0 86 86",
|
|
1860
1994
|
"aria-hidden": "true",
|
|
1861
1995
|
children: [
|
|
1862
|
-
/* @__PURE__ */
|
|
1996
|
+
/* @__PURE__ */ jsx14(
|
|
1863
1997
|
"circle",
|
|
1864
1998
|
{
|
|
1865
1999
|
cx: "43",
|
|
@@ -1870,7 +2004,7 @@ function HoldShutter({
|
|
|
1870
2004
|
strokeWidth: "4"
|
|
1871
2005
|
}
|
|
1872
2006
|
),
|
|
1873
|
-
/* @__PURE__ */
|
|
2007
|
+
/* @__PURE__ */ jsx14(
|
|
1874
2008
|
"circle",
|
|
1875
2009
|
{
|
|
1876
2010
|
cx: "43",
|
|
@@ -1887,28 +2021,28 @@ function HoldShutter({
|
|
|
1887
2021
|
]
|
|
1888
2022
|
}
|
|
1889
2023
|
) : null,
|
|
1890
|
-
recording && pressed && !locked && /* @__PURE__ */
|
|
2024
|
+
recording && pressed && !locked && /* @__PURE__ */ jsxs12(
|
|
1891
2025
|
"span",
|
|
1892
2026
|
{
|
|
1893
2027
|
className: "pointer-events-none absolute left-1/2 flex -translate-x-1/2 flex-col items-center gap-0.5",
|
|
1894
2028
|
style: { top: -LOCK_DRAG_PX - 22 },
|
|
1895
2029
|
"aria-hidden": true,
|
|
1896
2030
|
children: [
|
|
1897
|
-
/* @__PURE__ */
|
|
1898
|
-
/* @__PURE__ */
|
|
2031
|
+
/* @__PURE__ */ jsx14("span", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-black/60 ring-1 ring-white/30", children: /* @__PURE__ */ jsx14(LockIcon, { className: "h-4 w-4 text-white/90" }) }),
|
|
2032
|
+
/* @__PURE__ */ jsx14("span", { className: "text-[10px] font-medium text-white/80 drop-shadow", children: "Slide up to lock" })
|
|
1899
2033
|
]
|
|
1900
2034
|
}
|
|
1901
2035
|
),
|
|
1902
|
-
recording && locked && /* @__PURE__ */
|
|
2036
|
+
recording && locked && /* @__PURE__ */ jsx14(
|
|
1903
2037
|
"span",
|
|
1904
2038
|
{
|
|
1905
2039
|
className: "pointer-events-none absolute left-1/2 flex h-9 w-9 -translate-x-1/2 items-center justify-center rounded-full bg-[#FF3B30]",
|
|
1906
2040
|
style: { top: -LOCK_DRAG_PX - 22 },
|
|
1907
2041
|
"aria-hidden": true,
|
|
1908
|
-
children: /* @__PURE__ */
|
|
2042
|
+
children: /* @__PURE__ */ jsx14(LockIcon, { className: "h-4 w-4 text-white", fill: "currentColor" })
|
|
1909
2043
|
}
|
|
1910
2044
|
),
|
|
1911
|
-
/* @__PURE__ */
|
|
2045
|
+
/* @__PURE__ */ jsx14(
|
|
1912
2046
|
"button",
|
|
1913
2047
|
{
|
|
1914
2048
|
type: "button",
|
|
@@ -1925,7 +2059,7 @@ function HoldShutter({
|
|
|
1925
2059
|
"rounded-full border-[3.5px] border-white transition-opacity",
|
|
1926
2060
|
disabled && "opacity-30"
|
|
1927
2061
|
),
|
|
1928
|
-
children: /* @__PURE__ */
|
|
2062
|
+
children: /* @__PURE__ */ jsx14(
|
|
1929
2063
|
"span",
|
|
1930
2064
|
{
|
|
1931
2065
|
className: cn(
|
|
@@ -1939,7 +2073,7 @@ function HoldShutter({
|
|
|
1939
2073
|
)
|
|
1940
2074
|
}
|
|
1941
2075
|
),
|
|
1942
|
-
recording ? /* @__PURE__ */
|
|
2076
|
+
recording ? /* @__PURE__ */ jsxs12(
|
|
1943
2077
|
"span",
|
|
1944
2078
|
{
|
|
1945
2079
|
className: cn(
|
|
@@ -1961,7 +2095,7 @@ function formatElapsed2(totalSeconds) {
|
|
|
1961
2095
|
}
|
|
1962
2096
|
|
|
1963
2097
|
// src/components/CameraCaptureV3.tsx
|
|
1964
|
-
import { jsx as
|
|
2098
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1965
2099
|
var ASPECT_CYCLE2 = ["full", "4:3", "1:1", "16:9"];
|
|
1966
2100
|
function CameraCaptureV3({
|
|
1967
2101
|
engine,
|
|
@@ -2028,7 +2162,7 @@ function CameraCaptureV3({
|
|
|
2028
2162
|
{
|
|
2029
2163
|
id: "flip",
|
|
2030
2164
|
label: "Switch camera",
|
|
2031
|
-
icon: /* @__PURE__ */
|
|
2165
|
+
icon: /* @__PURE__ */ jsx15(RefreshCwIcon, { className: "h-[22px] w-[22px]" }),
|
|
2032
2166
|
primary: true,
|
|
2033
2167
|
onPress: engine.onFlipCamera
|
|
2034
2168
|
}
|
|
@@ -2037,7 +2171,7 @@ function CameraCaptureV3({
|
|
|
2037
2171
|
{
|
|
2038
2172
|
id: "flash",
|
|
2039
2173
|
label: "Flash",
|
|
2040
|
-
icon: controls.torchOn ? /* @__PURE__ */
|
|
2174
|
+
icon: controls.torchOn ? /* @__PURE__ */ jsx15(ZapIcon, { className: "h-[22px] w-[22px]", fill: "currentColor" }) : /* @__PURE__ */ jsx15(ZapOffIcon, { className: "h-[22px] w-[22px]" }),
|
|
2041
2175
|
active: controls.torchOn,
|
|
2042
2176
|
primary: true,
|
|
2043
2177
|
onPress: controls.toggleTorch
|
|
@@ -2046,7 +2180,7 @@ function CameraCaptureV3({
|
|
|
2046
2180
|
{
|
|
2047
2181
|
id: "timer",
|
|
2048
2182
|
label: "Timer",
|
|
2049
|
-
icon: /* @__PURE__ */
|
|
2183
|
+
icon: /* @__PURE__ */ jsx15(TimerIcon, { className: "h-[22px] w-[22px]" }),
|
|
2050
2184
|
active: timerSetting !== 0,
|
|
2051
2185
|
valueLabel: timerSetting === 0 ? void 0 : `${timerSetting}s`,
|
|
2052
2186
|
onPress: () => setTimerSetting((t) => t === 0 ? 3 : t === 3 ? 10 : 0)
|
|
@@ -2054,14 +2188,14 @@ function CameraCaptureV3({
|
|
|
2054
2188
|
{
|
|
2055
2189
|
id: "grid",
|
|
2056
2190
|
label: "Grid",
|
|
2057
|
-
icon: /* @__PURE__ */
|
|
2191
|
+
icon: /* @__PURE__ */ jsx15(Grid3x3Icon, { className: "h-[22px] w-[22px]" }),
|
|
2058
2192
|
active: gridOn,
|
|
2059
2193
|
onPress: () => setGridOn((g) => !g)
|
|
2060
2194
|
},
|
|
2061
2195
|
{
|
|
2062
2196
|
id: "aspect",
|
|
2063
2197
|
label: "Aspect",
|
|
2064
|
-
icon: /* @__PURE__ */
|
|
2198
|
+
icon: /* @__PURE__ */ jsx15(ProportionsIcon, { className: "h-[22px] w-[22px]" }),
|
|
2065
2199
|
active: aspect !== "full",
|
|
2066
2200
|
valueLabel: aspect === "full" ? void 0 : aspect,
|
|
2067
2201
|
onPress: () => setAspect(
|
|
@@ -2072,7 +2206,7 @@ function CameraCaptureV3({
|
|
|
2072
2206
|
{
|
|
2073
2207
|
id: "exposure",
|
|
2074
2208
|
label: "Exposure",
|
|
2075
|
-
icon: /* @__PURE__ */
|
|
2209
|
+
icon: /* @__PURE__ */ jsx15(SunMediumIcon, { className: "h-[22px] w-[22px]" }),
|
|
2076
2210
|
active: controls.exposure !== 0,
|
|
2077
2211
|
valueLabel: controls.exposure === 0 ? void 0 : `${controls.exposure > 0 ? "+" : ""}${controls.exposure}`,
|
|
2078
2212
|
onPress: () => controls.setExposure(controls.exposure === 0 ? 1 : 0)
|
|
@@ -2083,15 +2217,15 @@ function CameraCaptureV3({
|
|
|
2083
2217
|
...coreRail.map((a) => blocked ? { ...a, disabled: true } : a),
|
|
2084
2218
|
...slots.railActions ?? []
|
|
2085
2219
|
];
|
|
2086
|
-
return /* @__PURE__ */
|
|
2087
|
-
/* @__PURE__ */
|
|
2088
|
-
/* @__PURE__ */
|
|
2089
|
-
aspect !== "full" && !blocked && !engine.recording && /* @__PURE__ */
|
|
2220
|
+
return /* @__PURE__ */ jsxs13("div", { className: "absolute inset-0 select-none overflow-hidden bg-black", children: [
|
|
2221
|
+
/* @__PURE__ */ jsx15("div", { className: "absolute inset-0", children: preview }),
|
|
2222
|
+
/* @__PURE__ */ jsx15(GridOverlay, { visible: gridOn && !blocked }),
|
|
2223
|
+
aspect !== "full" && !blocked && !engine.recording && /* @__PURE__ */ jsx15(
|
|
2090
2224
|
"div",
|
|
2091
2225
|
{
|
|
2092
2226
|
"aria-hidden": true,
|
|
2093
2227
|
className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
|
|
2094
|
-
children: /* @__PURE__ */
|
|
2228
|
+
children: /* @__PURE__ */ jsx15(
|
|
2095
2229
|
"div",
|
|
2096
2230
|
{
|
|
2097
2231
|
className: "shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]",
|
|
@@ -2106,32 +2240,32 @@ function CameraCaptureV3({
|
|
|
2106
2240
|
)
|
|
2107
2241
|
}
|
|
2108
2242
|
),
|
|
2109
|
-
/* @__PURE__ */
|
|
2110
|
-
!controlsHidden && /* @__PURE__ */
|
|
2243
|
+
/* @__PURE__ */ jsx15(CountdownOverlay, { seconds: countdown }),
|
|
2244
|
+
!controlsHidden && /* @__PURE__ */ jsxs13(
|
|
2111
2245
|
"div",
|
|
2112
2246
|
{
|
|
2113
2247
|
className: "pointer-events-none absolute inset-x-0 top-0 z-20 px-2",
|
|
2114
2248
|
style: safeTop,
|
|
2115
2249
|
children: [
|
|
2116
|
-
/* @__PURE__ */
|
|
2117
|
-
onClose ? /* @__PURE__ */
|
|
2250
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex min-h-[44px] items-center gap-2 py-1.5", children: [
|
|
2251
|
+
onClose ? /* @__PURE__ */ jsx15(
|
|
2118
2252
|
"button",
|
|
2119
2253
|
{
|
|
2120
2254
|
type: "button",
|
|
2121
2255
|
onClick: onClose,
|
|
2122
2256
|
"aria-label": "Close camera",
|
|
2123
2257
|
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",
|
|
2124
|
-
children: /* @__PURE__ */
|
|
2258
|
+
children: /* @__PURE__ */ jsx15(XIcon, { className: "h-6 w-6" })
|
|
2125
2259
|
}
|
|
2126
|
-
) : /* @__PURE__ */
|
|
2127
|
-
/* @__PURE__ */
|
|
2128
|
-
/* @__PURE__ */
|
|
2260
|
+
) : /* @__PURE__ */ jsx15("span", { className: "h-10 w-10 shrink-0" }),
|
|
2261
|
+
/* @__PURE__ */ jsx15("div", { className: "pointer-events-auto flex min-w-0 flex-1 justify-center", children: slots.topEntry }),
|
|
2262
|
+
/* @__PURE__ */ jsx15("span", { className: "h-10 w-10 shrink-0" })
|
|
2129
2263
|
] }),
|
|
2130
|
-
slots.topCenter ? /* @__PURE__ */
|
|
2264
|
+
slots.topCenter ? /* @__PURE__ */ jsx15("div", { className: "pointer-events-none pb-1 text-center", children: slots.topCenter }) : null
|
|
2131
2265
|
]
|
|
2132
2266
|
}
|
|
2133
2267
|
),
|
|
2134
|
-
slots.statusChips ? /* @__PURE__ */
|
|
2268
|
+
slots.statusChips ? /* @__PURE__ */ jsx15(
|
|
2135
2269
|
"div",
|
|
2136
2270
|
{
|
|
2137
2271
|
className: "pointer-events-none absolute inset-x-0 z-20 flex flex-col items-center gap-1.5 px-3",
|
|
@@ -2143,35 +2277,35 @@ function CameraCaptureV3({
|
|
|
2143
2277
|
children: slots.statusChips
|
|
2144
2278
|
}
|
|
2145
2279
|
) : null,
|
|
2146
|
-
!controlsHidden && /* @__PURE__ */
|
|
2280
|
+
!controlsHidden && /* @__PURE__ */ jsx15(
|
|
2147
2281
|
"div",
|
|
2148
2282
|
{
|
|
2149
2283
|
className: "pointer-events-none absolute right-1 z-20 flex justify-end",
|
|
2150
2284
|
style: { top: `calc(env(safe-area-inset-top, 0px) + 64px)` },
|
|
2151
|
-
children: /* @__PURE__ */
|
|
2285
|
+
children: /* @__PURE__ */ jsx15(CaptureRail, { actions: railActions })
|
|
2152
2286
|
}
|
|
2153
2287
|
),
|
|
2154
|
-
!controlsHidden && /* @__PURE__ */
|
|
2155
|
-
media && media.items.length > 0 ? /* @__PURE__ */
|
|
2288
|
+
!controlsHidden && /* @__PURE__ */ jsxs13("div", { className: "absolute inset-x-0 bottom-0 z-20", style: safeBottom, children: [
|
|
2289
|
+
media && media.items.length > 0 ? /* @__PURE__ */ jsx15("div", { className: "px-2 pb-1.5", children: /* @__PURE__ */ jsx15(
|
|
2156
2290
|
CaptureFilmstrip,
|
|
2157
2291
|
{
|
|
2158
2292
|
items: media.items,
|
|
2159
2293
|
onOpen: (item) => setViewerKey(item.key)
|
|
2160
2294
|
}
|
|
2161
2295
|
) }) : null,
|
|
2162
|
-
slots.aboveShutter ? /* @__PURE__ */
|
|
2163
|
-
/* @__PURE__ */
|
|
2164
|
-
/* @__PURE__ */
|
|
2296
|
+
slots.aboveShutter ? /* @__PURE__ */ jsx15("div", { className: "px-2 pb-1.5", children: slots.aboveShutter }) : null,
|
|
2297
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between px-3 pb-2", children: [
|
|
2298
|
+
/* @__PURE__ */ jsx15("div", { className: "flex w-[86px] justify-start", children: /* @__PURE__ */ jsx15(
|
|
2165
2299
|
"button",
|
|
2166
2300
|
{
|
|
2167
2301
|
type: "button",
|
|
2168
2302
|
onClick: cloud.onOpenLibrary,
|
|
2169
2303
|
"aria-label": "Your media \u2014 library and upload",
|
|
2170
2304
|
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",
|
|
2171
|
-
children: cloud.recentsThumb ?? /* @__PURE__ */
|
|
2305
|
+
children: cloud.recentsThumb ?? /* @__PURE__ */ jsx15("span", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx15(ImagesIcon, { className: "h-5 w-5 text-white/80" }) })
|
|
2172
2306
|
}
|
|
2173
2307
|
) }),
|
|
2174
|
-
/* @__PURE__ */
|
|
2308
|
+
/* @__PURE__ */ jsx15(
|
|
2175
2309
|
HoldShutter,
|
|
2176
2310
|
{
|
|
2177
2311
|
recording: engine.recording,
|
|
@@ -2184,11 +2318,11 @@ function CameraCaptureV3({
|
|
|
2184
2318
|
onStopRecording: engine.onStopRecording
|
|
2185
2319
|
}
|
|
2186
2320
|
),
|
|
2187
|
-
/* @__PURE__ */
|
|
2321
|
+
/* @__PURE__ */ jsx15("div", { className: "flex w-[86px] justify-end", children: slots.shutterTrailing })
|
|
2188
2322
|
] }),
|
|
2189
|
-
!engine.recording && !blocked ? /* @__PURE__ */
|
|
2323
|
+
!engine.recording && !blocked ? /* @__PURE__ */ jsx15("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
|
|
2190
2324
|
] }),
|
|
2191
|
-
blocked && blockedSheet && !blockedDismissed && /* @__PURE__ */
|
|
2325
|
+
blocked && blockedSheet && !blockedDismissed && /* @__PURE__ */ jsx15(
|
|
2192
2326
|
CaptureSheet,
|
|
2193
2327
|
{
|
|
2194
2328
|
open: true,
|
|
@@ -2198,7 +2332,7 @@ function CameraCaptureV3({
|
|
|
2198
2332
|
actions: blockedSheet.actions
|
|
2199
2333
|
}
|
|
2200
2334
|
),
|
|
2201
|
-
media && viewerKey !== null && /* @__PURE__ */
|
|
2335
|
+
media && viewerKey !== null && /* @__PURE__ */ jsx15(
|
|
2202
2336
|
MediaViewer,
|
|
2203
2337
|
{
|
|
2204
2338
|
items: media.items,
|
|
@@ -2215,7 +2349,7 @@ function CameraCaptureV3({
|
|
|
2215
2349
|
} : void 0
|
|
2216
2350
|
}
|
|
2217
2351
|
),
|
|
2218
|
-
media?.onReplacePhoto && /* @__PURE__ */
|
|
2352
|
+
media?.onReplacePhoto && /* @__PURE__ */ jsx15(
|
|
2219
2353
|
ImageEditSheet,
|
|
2220
2354
|
{
|
|
2221
2355
|
open: editTarget !== null,
|
|
@@ -2238,7 +2372,7 @@ function CameraCaptureV3({
|
|
|
2238
2372
|
|
|
2239
2373
|
// src/components/CaptureExpandingField.tsx
|
|
2240
2374
|
import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef6, useState as useState9 } from "react";
|
|
2241
|
-
import { jsx as
|
|
2375
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
2242
2376
|
function CaptureExpandingField({
|
|
2243
2377
|
label,
|
|
2244
2378
|
placeholder,
|
|
@@ -2276,7 +2410,7 @@ function CaptureExpandingField({
|
|
|
2276
2410
|
setExpanded(false);
|
|
2277
2411
|
}, [commit]);
|
|
2278
2412
|
if (!expanded) {
|
|
2279
|
-
return /* @__PURE__ */
|
|
2413
|
+
return /* @__PURE__ */ jsxs14(
|
|
2280
2414
|
"button",
|
|
2281
2415
|
{
|
|
2282
2416
|
type: "button",
|
|
@@ -2292,13 +2426,13 @@ function CaptureExpandingField({
|
|
|
2292
2426
|
className
|
|
2293
2427
|
),
|
|
2294
2428
|
children: [
|
|
2295
|
-
icon ? /* @__PURE__ */
|
|
2296
|
-
/* @__PURE__ */
|
|
2429
|
+
icon ? /* @__PURE__ */ jsx16("span", { className: "shrink-0", children: icon }) : null,
|
|
2430
|
+
/* @__PURE__ */ jsx16("span", { className: "truncate", children: currentValue?.trim() || label })
|
|
2297
2431
|
]
|
|
2298
2432
|
}
|
|
2299
2433
|
);
|
|
2300
2434
|
}
|
|
2301
|
-
return /* @__PURE__ */
|
|
2435
|
+
return /* @__PURE__ */ jsxs14(
|
|
2302
2436
|
"div",
|
|
2303
2437
|
{
|
|
2304
2438
|
className: cn(
|
|
@@ -2307,8 +2441,8 @@ function CaptureExpandingField({
|
|
|
2307
2441
|
className
|
|
2308
2442
|
),
|
|
2309
2443
|
children: [
|
|
2310
|
-
icon ? /* @__PURE__ */
|
|
2311
|
-
/* @__PURE__ */
|
|
2444
|
+
icon ? /* @__PURE__ */ jsx16("span", { className: "shrink-0 text-white/70", children: icon }) : null,
|
|
2445
|
+
/* @__PURE__ */ jsx16(
|
|
2312
2446
|
"input",
|
|
2313
2447
|
{
|
|
2314
2448
|
ref: inputRef,
|
|
@@ -2337,7 +2471,7 @@ function CaptureExpandingField({
|
|
|
2337
2471
|
)
|
|
2338
2472
|
}
|
|
2339
2473
|
),
|
|
2340
|
-
/* @__PURE__ */
|
|
2474
|
+
/* @__PURE__ */ jsx16(
|
|
2341
2475
|
"button",
|
|
2342
2476
|
{
|
|
2343
2477
|
type: "button",
|
|
@@ -2348,7 +2482,7 @@ function CaptureExpandingField({
|
|
|
2348
2482
|
},
|
|
2349
2483
|
"aria-label": `Close ${label}`,
|
|
2350
2484
|
className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-white/70 hover:bg-white/10 hover:text-white",
|
|
2351
|
-
children: /* @__PURE__ */
|
|
2485
|
+
children: /* @__PURE__ */ jsx16(
|
|
2352
2486
|
"svg",
|
|
2353
2487
|
{
|
|
2354
2488
|
viewBox: "0 0 24 24",
|
|
@@ -2358,7 +2492,7 @@ function CaptureExpandingField({
|
|
|
2358
2492
|
strokeLinecap: "round",
|
|
2359
2493
|
className: "h-3.5 w-3.5",
|
|
2360
2494
|
"aria-hidden": "true",
|
|
2361
|
-
children: /* @__PURE__ */
|
|
2495
|
+
children: /* @__PURE__ */ jsx16("path", { d: "M18 6 6 18M6 6l12 12" })
|
|
2362
2496
|
}
|
|
2363
2497
|
)
|
|
2364
2498
|
}
|
|
@@ -2370,7 +2504,7 @@ function CaptureExpandingField({
|
|
|
2370
2504
|
|
|
2371
2505
|
// src/components/CameraFeed.tsx
|
|
2372
2506
|
import { useEffect as useEffect9 } from "react";
|
|
2373
|
-
import { jsx as
|
|
2507
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
2374
2508
|
function CameraFeed({
|
|
2375
2509
|
engine,
|
|
2376
2510
|
mirror = false
|
|
@@ -2384,7 +2518,7 @@ function CameraFeed({
|
|
|
2384
2518
|
video.srcObject = null;
|
|
2385
2519
|
};
|
|
2386
2520
|
}, [stream, videoRef]);
|
|
2387
|
-
return /* @__PURE__ */
|
|
2521
|
+
return /* @__PURE__ */ jsx17(
|
|
2388
2522
|
"video",
|
|
2389
2523
|
{
|
|
2390
2524
|
ref: videoRef,
|