afterbefore 0.2.24 → 0.2.25
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/dist/overlay/index.js +350 -212
- package/dist/overlay/index.js.map +1 -1
- package/package.json +1 -1
package/dist/overlay/index.js
CHANGED
|
@@ -48,7 +48,9 @@ var DEFAULT_FRAME_SETTINGS = {
|
|
|
48
48
|
bgImage: null,
|
|
49
49
|
padding: 40,
|
|
50
50
|
browserChrome: false,
|
|
51
|
-
browserTheme: "dark"
|
|
51
|
+
browserTheme: "dark",
|
|
52
|
+
browserPadding: 20,
|
|
53
|
+
browserUrl: "localhost"
|
|
52
54
|
};
|
|
53
55
|
var FRAME_SIZE_PRESETS = [
|
|
54
56
|
{ label: "1920 x 1080", hint: "Desktop / HD", w: 1920, h: 1080 },
|
|
@@ -116,9 +118,9 @@ async function captureViewport(frameSettings) {
|
|
|
116
118
|
return viewportDataUrl;
|
|
117
119
|
}
|
|
118
120
|
const viewportImg = await loadImage(viewportDataUrl);
|
|
119
|
-
return drawBrowserChrome(viewportImg, frameSettings.browserTheme, dpr);
|
|
121
|
+
return drawBrowserChrome(viewportImg, frameSettings.browserTheme, dpr, frameSettings.browserUrl);
|
|
120
122
|
}
|
|
121
|
-
function drawBrowserChrome(img, theme, dpr) {
|
|
123
|
+
function drawBrowserChrome(img, theme, dpr, url = "localhost") {
|
|
122
124
|
const TITLE_BAR_H = 40;
|
|
123
125
|
const URL_BAR_H = 28;
|
|
124
126
|
const URL_BAR_MARGIN_TOP = 6;
|
|
@@ -165,7 +167,7 @@ function drawBrowserChrome(img, theme, dpr) {
|
|
|
165
167
|
ctx.font = `${11 * dpr}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
|
|
166
168
|
ctx.textAlign = "center";
|
|
167
169
|
ctx.textBaseline = "middle";
|
|
168
|
-
ctx.fillText(
|
|
170
|
+
ctx.fillText(url, canvas.width / 2, urlBarY + urlBarH / 2);
|
|
169
171
|
ctx.drawImage(img, 0, CHROME_H * dpr);
|
|
170
172
|
return canvas.toDataURL("image/png");
|
|
171
173
|
}
|
|
@@ -217,7 +219,7 @@ async function captureComponent(element, frameSettings) {
|
|
|
217
219
|
const dpr = window.devicePixelRatio || 1;
|
|
218
220
|
const FRAME_W = frameSettings.size.w;
|
|
219
221
|
const FRAME_H = frameSettings.size.h;
|
|
220
|
-
const pad = frameSettings.padding ?? 40;
|
|
222
|
+
const pad = frameSettings.browserChrome ? frameSettings.browserPadding ?? 20 : frameSettings.padding ?? 40;
|
|
221
223
|
const compW = img.width / dpr;
|
|
222
224
|
const compH = img.height / dpr;
|
|
223
225
|
const maxW = FRAME_W - pad * 2;
|
|
@@ -354,15 +356,69 @@ function injectInterFont() {
|
|
|
354
356
|
// src/overlay/ui/toolbar.tsx
|
|
355
357
|
import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
|
|
356
358
|
import {
|
|
357
|
-
Camera,
|
|
358
|
-
Check as Check2,
|
|
359
359
|
ChevronDown as ChevronDown2,
|
|
360
360
|
LoaderCircle,
|
|
361
361
|
FileText,
|
|
362
|
-
Monitor
|
|
363
|
-
X as X2
|
|
362
|
+
Monitor
|
|
364
363
|
} from "lucide-react";
|
|
365
364
|
|
|
365
|
+
// src/overlay/ui/icons.tsx
|
|
366
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
367
|
+
function CameraIcon({ size = 32, color }) {
|
|
368
|
+
return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", style: { color }, children: /* @__PURE__ */ jsx(
|
|
369
|
+
"path",
|
|
370
|
+
{
|
|
371
|
+
d: "M23.2119 13.8662C23.8759 13.8662 24.4228 13.3193 24.4228 12.6553C24.4228 11.9814 23.8759 11.4443 23.2119 11.4443C22.538 11.4443 22.0009 11.9814 22.0009 12.6553C22.0009 13.3193 22.538 13.8662 23.2119 13.8662ZM6.89356 24.999H24.7451C26.7763 24.999 27.8115 23.9834 27.8115 21.9717V11.7471C27.8115 9.73536 26.7763 8.7295 24.7451 8.7295H21.9521C21.1806 8.7295 20.9462 8.57325 20.5068 8.08496L19.7255 7.20605C19.2373 6.66895 18.7392 6.37598 17.7333 6.37598H13.8369C12.8311 6.37598 12.333 6.66895 11.8447 7.20605L11.0635 8.08496C10.624 8.56348 10.3799 8.7295 9.61817 8.7295H6.89356C4.85254 8.7295 3.82715 9.73536 3.82715 11.7471V21.9717C3.82715 23.9834 4.85254 24.999 6.89356 24.999ZM6.91309 23.4268C5.95606 23.4268 5.39942 22.9092 5.39942 21.8936V11.835C5.39942 10.8193 5.95606 10.3018 6.91309 10.3018H10.0088C10.8877 10.3018 11.3662 10.1357 11.8545 9.58887L12.6162 8.7295C13.1728 8.1045 13.4658 7.94825 14.3251 7.94825H17.2451C18.1044 7.94825 18.3974 8.1045 18.9541 8.7295L19.7158 9.58887C20.2041 10.1357 20.6826 10.3018 21.5615 10.3018H24.7158C25.6826 10.3018 26.2392 10.8193 26.2392 11.835V21.8936C26.2392 22.9092 25.6826 23.4268 24.7158 23.4268H6.91309ZM15.8193 22.0205C18.7685 22.0205 21.1416 19.6572 21.1416 16.6787C21.1416 13.71 18.7783 11.3467 15.8193 11.3467C12.8603 11.3467 10.4873 13.71 10.4873 16.6787C10.4873 19.6572 12.8603 22.0205 15.8193 22.0205ZM15.8193 20.5362C13.7002 20.5362 11.9619 18.8272 11.9619 16.6787C11.9619 14.54 13.6904 12.8213 15.8193 12.8213C17.9482 12.8213 19.6669 14.54 19.6669 16.6787C19.6669 18.8272 17.9482 20.5362 15.8193 20.5362Z",
|
|
372
|
+
fill: "currentColor"
|
|
373
|
+
}
|
|
374
|
+
) });
|
|
375
|
+
}
|
|
376
|
+
function ImageIcon({ size = 32, color }) {
|
|
377
|
+
return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", style: { color }, children: [
|
|
378
|
+
/* @__PURE__ */ jsx(
|
|
379
|
+
"path",
|
|
380
|
+
{
|
|
381
|
+
d: "M7.30371 24.3056H23.6709C25.4385 24.3056 26.3272 23.3193 26.3272 21.4443L20.5264 15.9951C20.0967 15.5947 19.5791 15.3897 19.0518 15.3897C18.5147 15.3897 18.0362 15.5752 17.5869 15.9756L13.1729 19.9209L11.3662 18.29C10.9561 17.9189 10.5068 17.7334 10.0479 17.7334C9.60839 17.7334 9.18847 17.9091 8.78808 18.2802L5.06738 21.6396C5.12598 23.4072 5.84863 24.3056 7.30371 24.3056ZM7.37207 24.9892H24.2666C26.3174 24.9892 27.333 23.9834 27.333 21.9716V10.0381C27.333 8.02636 26.3174 7.01074 24.2666 7.01074H7.37207C5.33105 7.01074 4.30566 8.02636 4.30566 10.0381V21.9716C4.30566 23.9834 5.33105 24.9892 7.37207 24.9892ZM7.3916 23.4169C6.41504 23.4169 5.87793 22.8994 5.87793 21.8837V10.126C5.87793 9.11035 6.41504 8.58301 7.3916 8.58301H24.2471C25.2139 8.58301 25.7608 9.11035 25.7608 10.126V21.8837C25.7608 22.8994 25.2139 23.4169 24.2471 23.4169H7.3916Z",
|
|
382
|
+
fill: "currentColor"
|
|
383
|
+
}
|
|
384
|
+
),
|
|
385
|
+
/* @__PURE__ */ jsx(
|
|
386
|
+
"path",
|
|
387
|
+
{
|
|
388
|
+
d: "M11.5811 16.0928C12.8408 16.0928 13.876 15.0576 13.876 13.7881C13.876 12.5283 12.8408 11.4834 11.5811 11.4834C10.3115 11.4834 9.27637 12.5283 9.27637 13.7881C9.27637 15.0576 10.3115 16.0928 11.5811 16.0928Z",
|
|
389
|
+
fill: "currentColor"
|
|
390
|
+
}
|
|
391
|
+
)
|
|
392
|
+
] });
|
|
393
|
+
}
|
|
394
|
+
function CheckmarkIcon({ size = 32, color }) {
|
|
395
|
+
return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", style: { color }, children: [
|
|
396
|
+
/* @__PURE__ */ jsx(
|
|
397
|
+
"path",
|
|
398
|
+
{
|
|
399
|
+
d: "M15.8193 25.9561C21.3174 25.9561 25.7803 21.4932 25.7803 15.9951C25.7803 10.4971 21.3174 6.03418 15.8193 6.03418C10.3213 6.03418 5.8584 10.4971 5.8584 15.9951C5.8584 21.4932 10.3213 25.9561 15.8193 25.9561ZM15.8193 24.2959C11.2295 24.2959 7.51856 20.585 7.51856 15.9951C7.51856 11.4053 11.2295 7.69434 15.8193 7.69434C20.4092 7.69434 24.1201 11.4053 24.1201 15.9951C24.1201 20.585 20.4092 24.2959 15.8193 24.2959Z",
|
|
400
|
+
fill: "currentColor"
|
|
401
|
+
}
|
|
402
|
+
),
|
|
403
|
+
/* @__PURE__ */ jsx(
|
|
404
|
+
"path",
|
|
405
|
+
{
|
|
406
|
+
d: "M14.7451 20.6338C15.0674 20.6338 15.3408 20.4776 15.5361 20.1748L19.999 13.1533C20.1064 12.958 20.2334 12.7432 20.2334 12.5283C20.2334 12.0889 19.8428 11.8057 19.4326 11.8057C19.1885 11.8057 18.9443 11.9619 18.7588 12.2451L14.7061 18.749L12.7822 16.2588C12.5478 15.9463 12.333 15.8682 12.0596 15.8682C11.6396 15.8682 11.3076 16.21 11.3076 16.6397C11.3076 16.8545 11.3955 17.0596 11.5322 17.2451L13.915 20.1748C14.1592 20.4971 14.4228 20.6338 14.7451 20.6338Z",
|
|
407
|
+
fill: "currentColor"
|
|
408
|
+
}
|
|
409
|
+
)
|
|
410
|
+
] });
|
|
411
|
+
}
|
|
412
|
+
function CloseIcon({ size = 32, color }) {
|
|
413
|
+
return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", style: { color }, children: /* @__PURE__ */ jsx(
|
|
414
|
+
"path",
|
|
415
|
+
{
|
|
416
|
+
d: "M22.0693 8.52467L8.32911 22.2649C7.99708 22.5969 7.98732 23.1633 8.32911 23.4953C8.67091 23.8274 9.23732 23.8274 9.56935 23.4953L23.3096 9.75514C23.6416 9.42311 23.6514 8.8567 23.3096 8.52467C22.9678 8.18287 22.4111 8.17311 22.0693 8.52467ZM23.3096 22.2649L9.56935 8.52467C9.23732 8.18287 8.66115 8.17311 8.32911 8.52467C7.99708 8.86647 7.99708 9.42311 8.32911 9.75514L22.0693 23.4953C22.4014 23.8274 22.9775 23.8371 23.3096 23.4953C23.6416 23.1535 23.6416 22.5969 23.3096 22.2649Z",
|
|
417
|
+
fill: "currentColor"
|
|
418
|
+
}
|
|
419
|
+
) });
|
|
420
|
+
}
|
|
421
|
+
|
|
366
422
|
// src/overlay/color.ts
|
|
367
423
|
var gray = {
|
|
368
424
|
950: "oklch(0.162 0 0)",
|
|
@@ -435,7 +491,6 @@ var shadow = {
|
|
|
435
491
|
import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
|
|
436
492
|
import { createPortal } from "react-dom";
|
|
437
493
|
import {
|
|
438
|
-
Image as Image2,
|
|
439
494
|
Trash2 as Trash22,
|
|
440
495
|
X
|
|
441
496
|
} from "lucide-react";
|
|
@@ -451,7 +506,7 @@ import {
|
|
|
451
506
|
Trash2,
|
|
452
507
|
Upload
|
|
453
508
|
} from "lucide-react";
|
|
454
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
509
|
+
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
455
510
|
function SettingsContent({
|
|
456
511
|
frameSettings,
|
|
457
512
|
onFrameSettingsChange,
|
|
@@ -459,37 +514,41 @@ function SettingsContent({
|
|
|
459
514
|
picking,
|
|
460
515
|
onPickFolder
|
|
461
516
|
}) {
|
|
462
|
-
return /* @__PURE__ */
|
|
463
|
-
/* @__PURE__ */
|
|
517
|
+
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
518
|
+
/* @__PURE__ */ jsx2(
|
|
464
519
|
BackgroundSetting,
|
|
465
520
|
{
|
|
466
521
|
frameSettings,
|
|
467
522
|
onFrameSettingsChange
|
|
468
523
|
}
|
|
469
524
|
),
|
|
470
|
-
/* @__PURE__ */
|
|
525
|
+
/* @__PURE__ */ jsx2(
|
|
471
526
|
FrameSizeControl,
|
|
472
527
|
{
|
|
473
528
|
size: frameSettings.size,
|
|
474
529
|
onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
|
|
475
530
|
}
|
|
476
531
|
),
|
|
477
|
-
/* @__PURE__ */
|
|
478
|
-
/* @__PURE__ */
|
|
532
|
+
/* @__PURE__ */ jsx2(SettingsDivider, {}),
|
|
533
|
+
/* @__PURE__ */ jsx2(
|
|
479
534
|
BrowserFrameSetting,
|
|
480
535
|
{
|
|
481
536
|
enabled: frameSettings.browserChrome,
|
|
482
537
|
theme: frameSettings.browserTheme,
|
|
538
|
+
padding: frameSettings.browserPadding ?? 20,
|
|
539
|
+
url: frameSettings.browserUrl ?? "localhost",
|
|
483
540
|
onToggle: () => onFrameSettingsChange({ ...frameSettings, browserChrome: !frameSettings.browserChrome }),
|
|
484
|
-
onSelect: (theme) => onFrameSettingsChange({ ...frameSettings, browserChrome: true, browserTheme: theme })
|
|
541
|
+
onSelect: (theme) => onFrameSettingsChange({ ...frameSettings, browserChrome: true, browserTheme: theme }),
|
|
542
|
+
onPaddingChange: (v) => onFrameSettingsChange({ ...frameSettings, browserPadding: v }),
|
|
543
|
+
onUrlChange: (v) => onFrameSettingsChange({ ...frameSettings, browserUrl: v })
|
|
485
544
|
}
|
|
486
545
|
),
|
|
487
|
-
/* @__PURE__ */
|
|
488
|
-
saveDir !== void 0 && onPickFolder && /* @__PURE__ */
|
|
546
|
+
/* @__PURE__ */ jsx2(SettingsDivider, {}),
|
|
547
|
+
saveDir !== void 0 && onPickFolder && /* @__PURE__ */ jsx2(
|
|
489
548
|
SettingsRow,
|
|
490
549
|
{
|
|
491
550
|
title: "Save Location",
|
|
492
|
-
description: /* @__PURE__ */
|
|
551
|
+
description: /* @__PURE__ */ jsx2(
|
|
493
552
|
"span",
|
|
494
553
|
{
|
|
495
554
|
style: {
|
|
@@ -502,7 +561,7 @@ function SettingsContent({
|
|
|
502
561
|
children: saveDir
|
|
503
562
|
}
|
|
504
563
|
),
|
|
505
|
-
control: /* @__PURE__ */
|
|
564
|
+
control: /* @__PURE__ */ jsx2(SmallButton, { onClick: onPickFolder, children: picking ? "..." : "Change" })
|
|
506
565
|
}
|
|
507
566
|
)
|
|
508
567
|
] });
|
|
@@ -512,16 +571,16 @@ function SettingsRow({
|
|
|
512
571
|
description,
|
|
513
572
|
control
|
|
514
573
|
}) {
|
|
515
|
-
return /* @__PURE__ */
|
|
516
|
-
/* @__PURE__ */
|
|
517
|
-
/* @__PURE__ */
|
|
518
|
-
description && /* @__PURE__ */
|
|
574
|
+
return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "14px 0" }, children: [
|
|
575
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 2, flex: 1, minWidth: 0 }, children: [
|
|
576
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: title }),
|
|
577
|
+
description && /* @__PURE__ */ jsx2("span", { style: { ...text.paragraph.xs, color: fg.sub }, children: description })
|
|
519
578
|
] }),
|
|
520
|
-
/* @__PURE__ */
|
|
579
|
+
/* @__PURE__ */ jsx2("div", { style: { flexShrink: 0 }, children: control })
|
|
521
580
|
] });
|
|
522
581
|
}
|
|
523
582
|
function SettingsDivider() {
|
|
524
|
-
return /* @__PURE__ */
|
|
583
|
+
return /* @__PURE__ */ jsx2(
|
|
525
584
|
"div",
|
|
526
585
|
{
|
|
527
586
|
style: {
|
|
@@ -535,7 +594,7 @@ function ToggleSwitch({
|
|
|
535
594
|
enabled,
|
|
536
595
|
onChange
|
|
537
596
|
}) {
|
|
538
|
-
return /* @__PURE__ */
|
|
597
|
+
return /* @__PURE__ */ jsx2(
|
|
539
598
|
"button",
|
|
540
599
|
{
|
|
541
600
|
type: "button",
|
|
@@ -552,7 +611,7 @@ function ToggleSwitch({
|
|
|
552
611
|
flexShrink: 0,
|
|
553
612
|
transition: "background 0.12s ease"
|
|
554
613
|
},
|
|
555
|
-
children: /* @__PURE__ */
|
|
614
|
+
children: /* @__PURE__ */ jsx2(
|
|
556
615
|
"span",
|
|
557
616
|
{
|
|
558
617
|
style: {
|
|
@@ -595,9 +654,9 @@ function FrameSizeControl({
|
|
|
595
654
|
outline: "none",
|
|
596
655
|
padding: "0 2px 0 6px"
|
|
597
656
|
};
|
|
598
|
-
return /* @__PURE__ */
|
|
599
|
-
/* @__PURE__ */
|
|
600
|
-
/* @__PURE__ */
|
|
657
|
+
return /* @__PURE__ */ jsxs2("div", { style: { marginTop: 16, paddingBottom: 14 }, children: [
|
|
658
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Size" }),
|
|
659
|
+
/* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 6, marginTop: 8 }, children: ["w", "h"].map((field) => /* @__PURE__ */ jsxs2(
|
|
601
660
|
"div",
|
|
602
661
|
{
|
|
603
662
|
style: {
|
|
@@ -611,8 +670,8 @@ function FrameSizeControl({
|
|
|
611
670
|
borderRadius: 7
|
|
612
671
|
},
|
|
613
672
|
children: [
|
|
614
|
-
/* @__PURE__ */
|
|
615
|
-
/* @__PURE__ */
|
|
673
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none" }, children: field.toUpperCase() }),
|
|
674
|
+
/* @__PURE__ */ jsx2(
|
|
616
675
|
"input",
|
|
617
676
|
{
|
|
618
677
|
type: "text",
|
|
@@ -636,10 +695,10 @@ function FrameSizeControl({
|
|
|
636
695
|
},
|
|
637
696
|
field
|
|
638
697
|
)) }),
|
|
639
|
-
/* @__PURE__ */
|
|
640
|
-
/* @__PURE__ */
|
|
641
|
-
/* @__PURE__ */
|
|
642
|
-
/* @__PURE__ */
|
|
698
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginTop: 16 }, children: [
|
|
699
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Presets" }),
|
|
700
|
+
/* @__PURE__ */ jsxs2("div", { style: { position: "relative", flexShrink: 0 }, children: [
|
|
701
|
+
/* @__PURE__ */ jsxs2(
|
|
643
702
|
"button",
|
|
644
703
|
{
|
|
645
704
|
onClick: () => setSizeOpen((prev) => !prev),
|
|
@@ -660,11 +719,11 @@ function FrameSizeControl({
|
|
|
660
719
|
},
|
|
661
720
|
children: [
|
|
662
721
|
currentPreset ? currentPreset.label : "Custom",
|
|
663
|
-
/* @__PURE__ */
|
|
722
|
+
/* @__PURE__ */ jsx2(ChevronDown, { size: 12, strokeWidth: 2 })
|
|
664
723
|
]
|
|
665
724
|
}
|
|
666
725
|
),
|
|
667
|
-
sizeOpen && /* @__PURE__ */
|
|
726
|
+
sizeOpen && /* @__PURE__ */ jsx2(
|
|
668
727
|
"div",
|
|
669
728
|
{
|
|
670
729
|
style: {
|
|
@@ -679,7 +738,7 @@ function FrameSizeControl({
|
|
|
679
738
|
boxShadow: shadow.dropdown,
|
|
680
739
|
zIndex: 1
|
|
681
740
|
},
|
|
682
|
-
children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */
|
|
741
|
+
children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs2(
|
|
683
742
|
DropItem,
|
|
684
743
|
{
|
|
685
744
|
active: !isCustom && preset.w === size.w && preset.h === size.h,
|
|
@@ -688,8 +747,8 @@ function FrameSizeControl({
|
|
|
688
747
|
setSizeOpen(false);
|
|
689
748
|
},
|
|
690
749
|
children: [
|
|
691
|
-
/* @__PURE__ */
|
|
692
|
-
/* @__PURE__ */
|
|
750
|
+
/* @__PURE__ */ jsx2("span", { children: preset.label }),
|
|
751
|
+
/* @__PURE__ */ jsx2("span", { style: { marginLeft: 6, fontSize: 10, color: fg.muted }, children: preset.hint })
|
|
693
752
|
]
|
|
694
753
|
},
|
|
695
754
|
preset.label
|
|
@@ -732,13 +791,13 @@ function BackgroundSetting({
|
|
|
732
791
|
onFrameSettingsChange({ ...frameSettings, bgType: "color", bgColor: c });
|
|
733
792
|
};
|
|
734
793
|
const currentBg = frameSettings.bgType === "gradient" ? frameSettings.bgGradient : frameSettings.bgColor;
|
|
735
|
-
return /* @__PURE__ */
|
|
736
|
-
/* @__PURE__ */
|
|
737
|
-
/* @__PURE__ */
|
|
738
|
-
/* @__PURE__ */
|
|
739
|
-
/* @__PURE__ */
|
|
794
|
+
return /* @__PURE__ */ jsxs2("div", { children: [
|
|
795
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
|
|
796
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
797
|
+
/* @__PURE__ */ jsx2(LayoutGrid, { size: 16, strokeWidth: 1.6, color: fg.sub }),
|
|
798
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Background" })
|
|
740
799
|
] }),
|
|
741
|
-
/* @__PURE__ */
|
|
800
|
+
/* @__PURE__ */ jsx2(
|
|
742
801
|
ToggleSwitch,
|
|
743
802
|
{
|
|
744
803
|
enabled: frameSettings.enabled,
|
|
@@ -746,7 +805,7 @@ function BackgroundSetting({
|
|
|
746
805
|
}
|
|
747
806
|
)
|
|
748
807
|
] }),
|
|
749
|
-
/* @__PURE__ */
|
|
808
|
+
/* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 2, marginTop: 12, background: state.subtle, borderRadius: 8, padding: 2 }, children: ["solid", "gradient", "image"].map((t) => /* @__PURE__ */ jsx2(
|
|
750
809
|
"button",
|
|
751
810
|
{
|
|
752
811
|
onClick: () => setTab(t),
|
|
@@ -767,9 +826,9 @@ function BackgroundSetting({
|
|
|
767
826
|
},
|
|
768
827
|
t
|
|
769
828
|
)) }),
|
|
770
|
-
tab === "gradient" && /* @__PURE__ */
|
|
829
|
+
tab === "gradient" && /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 8, marginTop: 12, paddingBottom: 10, flexWrap: "wrap" }, children: GRADIENT_PRESETS.map((g) => {
|
|
771
830
|
const selected = frameSettings.bgType === "gradient" && frameSettings.bgGradient === g;
|
|
772
|
-
return /* @__PURE__ */
|
|
831
|
+
return /* @__PURE__ */ jsx2(
|
|
773
832
|
PresetSwatch,
|
|
774
833
|
{
|
|
775
834
|
background: g,
|
|
@@ -779,11 +838,11 @@ function BackgroundSetting({
|
|
|
779
838
|
g
|
|
780
839
|
);
|
|
781
840
|
}) }),
|
|
782
|
-
tab === "solid" && /* @__PURE__ */
|
|
783
|
-
/* @__PURE__ */
|
|
841
|
+
tab === "solid" && /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
842
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, marginTop: 12, paddingBottom: 10, flexWrap: "wrap" }, children: [
|
|
784
843
|
COLOR_PRESETS.map((c) => {
|
|
785
844
|
const selected = frameSettings.bgType === "color" && frameSettings.bgColor === c;
|
|
786
|
-
return /* @__PURE__ */
|
|
845
|
+
return /* @__PURE__ */ jsx2(
|
|
787
846
|
PresetSwatch,
|
|
788
847
|
{
|
|
789
848
|
background: c,
|
|
@@ -798,7 +857,7 @@ function BackgroundSetting({
|
|
|
798
857
|
const isCustom = !COLOR_PRESETS.includes(customColor.toUpperCase());
|
|
799
858
|
const bg2 = isCustom ? customColor : "transparent";
|
|
800
859
|
const iconColor = isCustom ? hexLuminance(customColor) > 0.4 ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.7)" : fg.sub;
|
|
801
|
-
return /* @__PURE__ */
|
|
860
|
+
return /* @__PURE__ */ jsx2(
|
|
802
861
|
"button",
|
|
803
862
|
{
|
|
804
863
|
onClick: async () => {
|
|
@@ -823,15 +882,15 @@ function BackgroundSetting({
|
|
|
823
882
|
justifyContent: "center",
|
|
824
883
|
color: iconColor
|
|
825
884
|
},
|
|
826
|
-
children: /* @__PURE__ */
|
|
885
|
+
children: /* @__PURE__ */ jsx2(Pipette, { size: 14, strokeWidth: 2 })
|
|
827
886
|
}
|
|
828
887
|
);
|
|
829
888
|
})()
|
|
830
889
|
] }),
|
|
831
|
-
/* @__PURE__ */
|
|
890
|
+
/* @__PURE__ */ jsx2("div", { style: { paddingBottom: 4 }, children: /* @__PURE__ */ jsx2(ColorHexInput, { value: frameSettings.bgColor, onChange: selectColor }) })
|
|
832
891
|
] }),
|
|
833
|
-
tab === "image" && /* @__PURE__ */
|
|
834
|
-
/* @__PURE__ */
|
|
892
|
+
tab === "image" && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, children: [
|
|
893
|
+
/* @__PURE__ */ jsx2(
|
|
835
894
|
"input",
|
|
836
895
|
{
|
|
837
896
|
ref: fileInputRef,
|
|
@@ -841,8 +900,8 @@ function BackgroundSetting({
|
|
|
841
900
|
style: { display: "none" }
|
|
842
901
|
}
|
|
843
902
|
),
|
|
844
|
-
frameSettings.bgImage ? /* @__PURE__ */
|
|
845
|
-
/* @__PURE__ */
|
|
903
|
+
frameSettings.bgImage ? /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
904
|
+
/* @__PURE__ */ jsx2(
|
|
846
905
|
"img",
|
|
847
906
|
{
|
|
848
907
|
src: frameSettings.bgImage,
|
|
@@ -856,20 +915,20 @@ function BackgroundSetting({
|
|
|
856
915
|
}
|
|
857
916
|
}
|
|
858
917
|
),
|
|
859
|
-
/* @__PURE__ */
|
|
860
|
-
/* @__PURE__ */
|
|
918
|
+
/* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
|
|
919
|
+
/* @__PURE__ */ jsx2(Upload, { size: 11, strokeWidth: 2 }),
|
|
861
920
|
"Replace"
|
|
862
921
|
] }),
|
|
863
|
-
/* @__PURE__ */
|
|
864
|
-
] }) : /* @__PURE__ */
|
|
865
|
-
/* @__PURE__ */
|
|
922
|
+
/* @__PURE__ */ jsx2(SmallButton, { onClick: () => onFrameSettingsChange({ ...frameSettings, bgImage: null }), children: /* @__PURE__ */ jsx2(Trash2, { size: 11, strokeWidth: 2 }) })
|
|
923
|
+
] }) : /* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
|
|
924
|
+
/* @__PURE__ */ jsx2(Upload, { size: 11, strokeWidth: 2 }),
|
|
866
925
|
"Upload image"
|
|
867
926
|
] })
|
|
868
927
|
] }),
|
|
869
|
-
/* @__PURE__ */
|
|
870
|
-
/* @__PURE__ */
|
|
871
|
-
/* @__PURE__ */
|
|
872
|
-
/* @__PURE__ */
|
|
928
|
+
/* @__PURE__ */ jsxs2("div", { style: { marginTop: 16 }, children: [
|
|
929
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Padding" }),
|
|
930
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 8 }, children: [
|
|
931
|
+
/* @__PURE__ */ jsx2(
|
|
873
932
|
SlimSlider,
|
|
874
933
|
{
|
|
875
934
|
min: 0,
|
|
@@ -879,7 +938,7 @@ function BackgroundSetting({
|
|
|
879
938
|
onChange: (v) => onFrameSettingsChange({ ...frameSettings, padding: v })
|
|
880
939
|
}
|
|
881
940
|
),
|
|
882
|
-
/* @__PURE__ */
|
|
941
|
+
/* @__PURE__ */ jsx2(
|
|
883
942
|
PaddingInput,
|
|
884
943
|
{
|
|
885
944
|
value: frameSettings.padding,
|
|
@@ -915,7 +974,7 @@ function SlimSlider({
|
|
|
915
974
|
if (e.buttons === 0) return;
|
|
916
975
|
update(e.clientX);
|
|
917
976
|
};
|
|
918
|
-
return /* @__PURE__ */
|
|
977
|
+
return /* @__PURE__ */ jsx2(
|
|
919
978
|
"div",
|
|
920
979
|
{
|
|
921
980
|
ref: trackRef,
|
|
@@ -930,9 +989,9 @@ function SlimSlider({
|
|
|
930
989
|
cursor: "pointer",
|
|
931
990
|
touchAction: "none"
|
|
932
991
|
},
|
|
933
|
-
children: /* @__PURE__ */
|
|
934
|
-
/* @__PURE__ */
|
|
935
|
-
/* @__PURE__ */
|
|
992
|
+
children: /* @__PURE__ */ jsxs2("div", { style: { position: "relative", width: "100%", height: 3, borderRadius: 2, background: stroke.default }, children: [
|
|
993
|
+
/* @__PURE__ */ jsx2("div", { style: { position: "absolute", left: 0, top: 0, height: "100%", width: `${pct}%`, borderRadius: 2, background: fg.sub } }),
|
|
994
|
+
/* @__PURE__ */ jsx2(
|
|
936
995
|
"div",
|
|
937
996
|
{
|
|
938
997
|
style: {
|
|
@@ -956,7 +1015,7 @@ function PresetSwatch({
|
|
|
956
1015
|
selected,
|
|
957
1016
|
onClick
|
|
958
1017
|
}) {
|
|
959
|
-
return /* @__PURE__ */
|
|
1018
|
+
return /* @__PURE__ */ jsx2(
|
|
960
1019
|
"div",
|
|
961
1020
|
{
|
|
962
1021
|
onClick,
|
|
@@ -973,7 +1032,7 @@ function PresetSwatch({
|
|
|
973
1032
|
transition: "outline-color 0.12s ease",
|
|
974
1033
|
flexShrink: 0
|
|
975
1034
|
},
|
|
976
|
-
children: selected && /* @__PURE__ */
|
|
1035
|
+
children: selected && /* @__PURE__ */ jsx2(
|
|
977
1036
|
"div",
|
|
978
1037
|
{
|
|
979
1038
|
style: {
|
|
@@ -985,7 +1044,7 @@ function PresetSwatch({
|
|
|
985
1044
|
justifyContent: "center",
|
|
986
1045
|
background: "rgba(0,0,0,0.2)"
|
|
987
1046
|
},
|
|
988
|
-
children: /* @__PURE__ */
|
|
1047
|
+
children: /* @__PURE__ */ jsx2(Check, { size: 16, strokeWidth: 3, color: "#fff" })
|
|
989
1048
|
}
|
|
990
1049
|
)
|
|
991
1050
|
}
|
|
@@ -1001,25 +1060,29 @@ function hexLuminance(hex) {
|
|
|
1001
1060
|
function BrowserFrameSetting({
|
|
1002
1061
|
enabled,
|
|
1003
1062
|
theme,
|
|
1063
|
+
padding,
|
|
1064
|
+
url,
|
|
1004
1065
|
onToggle,
|
|
1005
|
-
onSelect
|
|
1066
|
+
onSelect,
|
|
1067
|
+
onPaddingChange,
|
|
1068
|
+
onUrlChange
|
|
1006
1069
|
}) {
|
|
1007
|
-
const trafficLights = /* @__PURE__ */
|
|
1070
|
+
const trafficLights = /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 4 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx2("div", { style: { width: 5, height: 5, borderRadius: "50%", background: c } }, c)) });
|
|
1008
1071
|
const themes = [
|
|
1009
1072
|
{ value: "dark", label: "macOS Dark", titleBar: "#1C1C1C", urlBar: "#262626", border: "#333333" },
|
|
1010
1073
|
{ value: "light", label: "macOS Light", titleBar: "#F5F5F5", urlBar: "#FFFFFF", border: "#EBEBEB" }
|
|
1011
1074
|
];
|
|
1012
|
-
return /* @__PURE__ */
|
|
1013
|
-
/* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1015
|
-
/* @__PURE__ */
|
|
1016
|
-
/* @__PURE__ */
|
|
1075
|
+
return /* @__PURE__ */ jsxs2("div", { style: { padding: "14px 0" }, children: [
|
|
1076
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
|
|
1077
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
1078
|
+
/* @__PURE__ */ jsx2(AppWindow, { size: 16, strokeWidth: 1.6, color: fg.sub }),
|
|
1079
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Browser Frame" })
|
|
1017
1080
|
] }),
|
|
1018
|
-
/* @__PURE__ */
|
|
1081
|
+
/* @__PURE__ */ jsx2(ToggleSwitch, { enabled, onChange: onToggle })
|
|
1019
1082
|
] }),
|
|
1020
|
-
/* @__PURE__ */
|
|
1083
|
+
/* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 10, marginTop: 12 }, children: themes.map((t) => {
|
|
1021
1084
|
const selected = enabled && theme === t.value;
|
|
1022
|
-
return /* @__PURE__ */
|
|
1085
|
+
return /* @__PURE__ */ jsxs2(
|
|
1023
1086
|
"div",
|
|
1024
1087
|
{
|
|
1025
1088
|
onClick: () => onSelect(t.value),
|
|
@@ -1034,7 +1097,7 @@ function BrowserFrameSetting({
|
|
|
1034
1097
|
transition: "border-color 0.12s ease"
|
|
1035
1098
|
},
|
|
1036
1099
|
children: [
|
|
1037
|
-
/* @__PURE__ */
|
|
1100
|
+
/* @__PURE__ */ jsxs2(
|
|
1038
1101
|
"div",
|
|
1039
1102
|
{
|
|
1040
1103
|
style: {
|
|
@@ -1049,7 +1112,7 @@ function BrowserFrameSetting({
|
|
|
1049
1112
|
},
|
|
1050
1113
|
children: [
|
|
1051
1114
|
trafficLights,
|
|
1052
|
-
/* @__PURE__ */
|
|
1115
|
+
/* @__PURE__ */ jsx2(
|
|
1053
1116
|
"div",
|
|
1054
1117
|
{
|
|
1055
1118
|
style: {
|
|
@@ -1064,8 +1127,8 @@ function BrowserFrameSetting({
|
|
|
1064
1127
|
]
|
|
1065
1128
|
}
|
|
1066
1129
|
),
|
|
1067
|
-
/* @__PURE__ */
|
|
1068
|
-
selected && /* @__PURE__ */
|
|
1130
|
+
/* @__PURE__ */ jsx2("div", { style: { textAlign: "center", marginTop: 8, ...text.label.xs, color: fg.default }, children: t.label }),
|
|
1131
|
+
selected && /* @__PURE__ */ jsx2(
|
|
1069
1132
|
"div",
|
|
1070
1133
|
{
|
|
1071
1134
|
style: {
|
|
@@ -1080,14 +1143,73 @@ function BrowserFrameSetting({
|
|
|
1080
1143
|
alignItems: "center",
|
|
1081
1144
|
justifyContent: "center"
|
|
1082
1145
|
},
|
|
1083
|
-
children: /* @__PURE__ */
|
|
1146
|
+
children: /* @__PURE__ */ jsx2(Check, { size: 10, strokeWidth: 3, color: "#fff" })
|
|
1084
1147
|
}
|
|
1085
1148
|
)
|
|
1086
1149
|
]
|
|
1087
1150
|
},
|
|
1088
1151
|
t.value
|
|
1089
1152
|
);
|
|
1090
|
-
}) })
|
|
1153
|
+
}) }),
|
|
1154
|
+
/* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, children: [
|
|
1155
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "URL" }),
|
|
1156
|
+
/* @__PURE__ */ jsx2(
|
|
1157
|
+
"div",
|
|
1158
|
+
{
|
|
1159
|
+
style: {
|
|
1160
|
+
display: "flex",
|
|
1161
|
+
alignItems: "center",
|
|
1162
|
+
height: 30,
|
|
1163
|
+
padding: "0 8px",
|
|
1164
|
+
background: state.input,
|
|
1165
|
+
borderRadius: 7,
|
|
1166
|
+
marginTop: 8
|
|
1167
|
+
},
|
|
1168
|
+
children: /* @__PURE__ */ jsx2(
|
|
1169
|
+
"input",
|
|
1170
|
+
{
|
|
1171
|
+
type: "text",
|
|
1172
|
+
value: url,
|
|
1173
|
+
onChange: (e) => onUrlChange(e.target.value),
|
|
1174
|
+
placeholder: "localhost",
|
|
1175
|
+
style: {
|
|
1176
|
+
flex: 1,
|
|
1177
|
+
minWidth: 0,
|
|
1178
|
+
border: "none",
|
|
1179
|
+
background: "transparent",
|
|
1180
|
+
color: fg.strong,
|
|
1181
|
+
...text.label.xs,
|
|
1182
|
+
fontFamily: "inherit",
|
|
1183
|
+
outline: "none",
|
|
1184
|
+
padding: 0
|
|
1185
|
+
}
|
|
1186
|
+
}
|
|
1187
|
+
)
|
|
1188
|
+
}
|
|
1189
|
+
)
|
|
1190
|
+
] }),
|
|
1191
|
+
/* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, children: [
|
|
1192
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Padding" }),
|
|
1193
|
+
/* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 8 }, children: [
|
|
1194
|
+
/* @__PURE__ */ jsx2(
|
|
1195
|
+
SlimSlider,
|
|
1196
|
+
{
|
|
1197
|
+
min: 0,
|
|
1198
|
+
max: 200,
|
|
1199
|
+
step: 5,
|
|
1200
|
+
value: padding,
|
|
1201
|
+
onChange: onPaddingChange
|
|
1202
|
+
}
|
|
1203
|
+
),
|
|
1204
|
+
/* @__PURE__ */ jsx2(
|
|
1205
|
+
PaddingInput,
|
|
1206
|
+
{
|
|
1207
|
+
value: padding,
|
|
1208
|
+
onChange: onPaddingChange
|
|
1209
|
+
}
|
|
1210
|
+
)
|
|
1211
|
+
] })
|
|
1212
|
+
] })
|
|
1091
1213
|
] });
|
|
1092
1214
|
}
|
|
1093
1215
|
function SmallButton({
|
|
@@ -1095,7 +1217,7 @@ function SmallButton({
|
|
|
1095
1217
|
onClick
|
|
1096
1218
|
}) {
|
|
1097
1219
|
const [hovered, setHovered] = useState2(false);
|
|
1098
|
-
return /* @__PURE__ */
|
|
1220
|
+
return /* @__PURE__ */ jsx2(
|
|
1099
1221
|
"button",
|
|
1100
1222
|
{
|
|
1101
1223
|
onClick,
|
|
@@ -1128,7 +1250,7 @@ function PaddingInput({
|
|
|
1128
1250
|
useEffect(() => {
|
|
1129
1251
|
if (!editing) setText(String(value));
|
|
1130
1252
|
}, [editing, value]);
|
|
1131
|
-
return /* @__PURE__ */
|
|
1253
|
+
return /* @__PURE__ */ jsxs2(
|
|
1132
1254
|
"div",
|
|
1133
1255
|
{
|
|
1134
1256
|
style: {
|
|
@@ -1142,7 +1264,7 @@ function PaddingInput({
|
|
|
1142
1264
|
width: 68
|
|
1143
1265
|
},
|
|
1144
1266
|
children: [
|
|
1145
|
-
/* @__PURE__ */
|
|
1267
|
+
/* @__PURE__ */ jsx2(
|
|
1146
1268
|
"input",
|
|
1147
1269
|
{
|
|
1148
1270
|
type: "text",
|
|
@@ -1174,7 +1296,7 @@ function PaddingInput({
|
|
|
1174
1296
|
}
|
|
1175
1297
|
}
|
|
1176
1298
|
),
|
|
1177
|
-
/* @__PURE__ */
|
|
1299
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none", marginLeft: 4 }, children: "px" })
|
|
1178
1300
|
]
|
|
1179
1301
|
}
|
|
1180
1302
|
);
|
|
@@ -1192,7 +1314,7 @@ function ColorHexInput({
|
|
|
1192
1314
|
const hex = raw.startsWith("#") ? raw : `#${raw}`;
|
|
1193
1315
|
if (/^#[0-9a-fA-F]{6}$/.test(hex)) onChange(hex);
|
|
1194
1316
|
};
|
|
1195
|
-
return /* @__PURE__ */
|
|
1317
|
+
return /* @__PURE__ */ jsxs2(
|
|
1196
1318
|
"div",
|
|
1197
1319
|
{
|
|
1198
1320
|
style: {
|
|
@@ -1207,8 +1329,8 @@ function ColorHexInput({
|
|
|
1207
1329
|
gap: 6
|
|
1208
1330
|
},
|
|
1209
1331
|
children: [
|
|
1210
|
-
/* @__PURE__ */
|
|
1211
|
-
/* @__PURE__ */
|
|
1332
|
+
/* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none" }, children: "#" }),
|
|
1333
|
+
/* @__PURE__ */ jsx2(
|
|
1212
1334
|
"input",
|
|
1213
1335
|
{
|
|
1214
1336
|
type: "text",
|
|
@@ -1248,7 +1370,7 @@ function DropItem({
|
|
|
1248
1370
|
onClick,
|
|
1249
1371
|
active
|
|
1250
1372
|
}) {
|
|
1251
|
-
return /* @__PURE__ */
|
|
1373
|
+
return /* @__PURE__ */ jsx2(
|
|
1252
1374
|
"button",
|
|
1253
1375
|
{
|
|
1254
1376
|
onClick,
|
|
@@ -1286,47 +1408,51 @@ async function downscaleImage(dataUrl, maxW, maxH) {
|
|
|
1286
1408
|
}
|
|
1287
1409
|
|
|
1288
1410
|
// src/overlay/ui/screenshots-panel.tsx
|
|
1289
|
-
import { Fragment as Fragment2, jsx as
|
|
1290
|
-
function BrowserChromeBar({ theme }) {
|
|
1411
|
+
import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1412
|
+
function BrowserChromeBar({ theme, url = "localhost" }) {
|
|
1291
1413
|
const colors = theme === "dark" ? { titleBar: "#1C1C1C", urlBar: "#262626", text: "#7B7B7B", border: "#333333" } : { titleBar: "#F5F5F5", urlBar: "#FFFFFF", text: "#999999", border: "#EBEBEB" };
|
|
1292
|
-
return /* @__PURE__ */
|
|
1293
|
-
/* @__PURE__ */
|
|
1294
|
-
/* @__PURE__ */
|
|
1414
|
+
return /* @__PURE__ */ jsx3("div", { style: { background: colors.titleBar, flexShrink: 0, padding: "4px 6px" }, children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 6, height: 14 }, children: [
|
|
1415
|
+
/* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: 5, flexShrink: 0 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx3("div", { style: { width: 6, height: 6, borderRadius: "50%", background: c } }, c)) }),
|
|
1416
|
+
/* @__PURE__ */ jsx3(
|
|
1295
1417
|
"div",
|
|
1296
1418
|
{
|
|
1297
1419
|
style: {
|
|
1420
|
+
flex: 1,
|
|
1421
|
+
height: 14,
|
|
1298
1422
|
background: colors.urlBar,
|
|
1299
1423
|
borderRadius: 3,
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1424
|
+
display: "flex",
|
|
1425
|
+
alignItems: "center",
|
|
1426
|
+
paddingLeft: 6,
|
|
1427
|
+
...theme === "light" ? { border: `1px solid ${colors.border}` } : {},
|
|
1428
|
+
boxSizing: "border-box"
|
|
1303
1429
|
},
|
|
1304
|
-
children: /* @__PURE__ */
|
|
1430
|
+
children: /* @__PURE__ */ jsx3(
|
|
1305
1431
|
"span",
|
|
1306
1432
|
{
|
|
1307
1433
|
style: {
|
|
1308
1434
|
fontSize: 7,
|
|
1435
|
+
lineHeight: 1,
|
|
1309
1436
|
color: colors.text,
|
|
1310
1437
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
|
|
1311
1438
|
},
|
|
1312
|
-
children:
|
|
1439
|
+
children: url
|
|
1313
1440
|
}
|
|
1314
1441
|
)
|
|
1315
1442
|
}
|
|
1316
|
-
)
|
|
1317
|
-
|
|
1318
|
-
] });
|
|
1443
|
+
)
|
|
1444
|
+
] }) });
|
|
1319
1445
|
}
|
|
1320
1446
|
function FramePreview({
|
|
1321
1447
|
previewUrl,
|
|
1322
1448
|
frameSettings,
|
|
1323
1449
|
loading
|
|
1324
1450
|
}) {
|
|
1325
|
-
const { enabled: frameEnabled, browserChrome, browserTheme, size, bgType, bgColor, bgGradient, bgImage, padding } = frameSettings;
|
|
1451
|
+
const { enabled: frameEnabled, browserChrome, browserTheme, browserUrl, size, bgType, bgColor, bgGradient, bgImage, padding, browserPadding = 20 } = frameSettings;
|
|
1326
1452
|
const aspectRatio = frameEnabled ? `${size.w} / ${size.h}` : "16 / 10";
|
|
1327
1453
|
const outerBg = frameEnabled ? bgType === "image" && bgImage ? { backgroundImage: `url(${bgImage})`, backgroundSize: "cover", backgroundPosition: "center" } : bgType === "gradient" ? { background: bgGradient } : { background: bgColor } : { background: bg.elevated };
|
|
1328
|
-
const emptyState = /* @__PURE__ */
|
|
1329
|
-
const imageEl = previewUrl ? /* @__PURE__ */
|
|
1454
|
+
const emptyState = /* @__PURE__ */ jsx3("span", { style: { ...text.paragraph.xs, color: fg.sub }, children: loading ? "Loading..." : "No screenshots yet" });
|
|
1455
|
+
const imageEl = previewUrl ? /* @__PURE__ */ jsx3(
|
|
1330
1456
|
"img",
|
|
1331
1457
|
{
|
|
1332
1458
|
src: previewUrl,
|
|
@@ -1339,7 +1465,8 @@ function FramePreview({
|
|
|
1339
1465
|
}
|
|
1340
1466
|
}
|
|
1341
1467
|
) : null;
|
|
1342
|
-
|
|
1468
|
+
const padPct = frameEnabled ? `${(browserChrome ? browserPadding : padding) / size.h * 100}%` : void 0;
|
|
1469
|
+
return /* @__PURE__ */ jsx3(
|
|
1343
1470
|
"div",
|
|
1344
1471
|
{
|
|
1345
1472
|
style: {
|
|
@@ -1351,11 +1478,12 @@ function FramePreview({
|
|
|
1351
1478
|
marginBottom: 10,
|
|
1352
1479
|
display: "flex",
|
|
1353
1480
|
flexDirection: "column",
|
|
1354
|
-
...outerBg
|
|
1481
|
+
...outerBg,
|
|
1482
|
+
...browserChrome && padPct ? { padding: padPct } : {}
|
|
1355
1483
|
},
|
|
1356
|
-
children: [
|
|
1357
|
-
|
|
1358
|
-
/* @__PURE__ */
|
|
1484
|
+
children: browserChrome ? /* @__PURE__ */ jsxs3("div", { style: { flex: 1, display: "flex", flexDirection: "column", borderRadius: 8, overflow: "hidden", minHeight: 0 }, children: [
|
|
1485
|
+
/* @__PURE__ */ jsx3(BrowserChromeBar, { theme: browserTheme, url: browserUrl }),
|
|
1486
|
+
/* @__PURE__ */ jsx3(
|
|
1359
1487
|
"div",
|
|
1360
1488
|
{
|
|
1361
1489
|
style: {
|
|
@@ -1363,13 +1491,25 @@ function FramePreview({
|
|
|
1363
1491
|
display: "flex",
|
|
1364
1492
|
alignItems: "center",
|
|
1365
1493
|
justifyContent: "center",
|
|
1366
|
-
minHeight: 0
|
|
1367
|
-
...frameEnabled ? { padding: `${padding / size.h * 100}%` } : {}
|
|
1494
|
+
minHeight: 0
|
|
1368
1495
|
},
|
|
1369
1496
|
children: imageEl || emptyState
|
|
1370
1497
|
}
|
|
1371
1498
|
)
|
|
1372
|
-
]
|
|
1499
|
+
] }) : /* @__PURE__ */ jsx3(
|
|
1500
|
+
"div",
|
|
1501
|
+
{
|
|
1502
|
+
style: {
|
|
1503
|
+
flex: 1,
|
|
1504
|
+
display: "flex",
|
|
1505
|
+
alignItems: "center",
|
|
1506
|
+
justifyContent: "center",
|
|
1507
|
+
minHeight: 0,
|
|
1508
|
+
...padPct ? { padding: padPct } : {}
|
|
1509
|
+
},
|
|
1510
|
+
children: imageEl || emptyState
|
|
1511
|
+
}
|
|
1512
|
+
)
|
|
1373
1513
|
}
|
|
1374
1514
|
);
|
|
1375
1515
|
}
|
|
@@ -1516,10 +1656,10 @@ function ScreenshotsPanel({
|
|
|
1516
1656
|
}
|
|
1517
1657
|
};
|
|
1518
1658
|
const previewUrl = selectedFile ? `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(selectedFile)}` : null;
|
|
1519
|
-
return /* @__PURE__ */
|
|
1520
|
-
/* @__PURE__ */
|
|
1659
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1660
|
+
/* @__PURE__ */ jsx3(IconButton, { active: open, tooltipSide, tooltip: !open ? "Screenshots" : void 0, onClick, children: /* @__PURE__ */ jsx3(ImageIcon, { size: 20 }) }),
|
|
1521
1661
|
open && createPortal(
|
|
1522
|
-
/* @__PURE__ */
|
|
1662
|
+
/* @__PURE__ */ jsxs3(
|
|
1523
1663
|
"div",
|
|
1524
1664
|
{
|
|
1525
1665
|
"data-afterbefore": "true",
|
|
@@ -1535,7 +1675,7 @@ function ScreenshotsPanel({
|
|
|
1535
1675
|
...fontBase
|
|
1536
1676
|
},
|
|
1537
1677
|
children: [
|
|
1538
|
-
/* @__PURE__ */
|
|
1678
|
+
/* @__PURE__ */ jsx3(
|
|
1539
1679
|
"style",
|
|
1540
1680
|
{
|
|
1541
1681
|
dangerouslySetInnerHTML: {
|
|
@@ -1548,7 +1688,7 @@ function ScreenshotsPanel({
|
|
|
1548
1688
|
}
|
|
1549
1689
|
}
|
|
1550
1690
|
),
|
|
1551
|
-
/* @__PURE__ */
|
|
1691
|
+
/* @__PURE__ */ jsxs3(
|
|
1552
1692
|
"div",
|
|
1553
1693
|
{
|
|
1554
1694
|
onClick: (e) => e.stopPropagation(),
|
|
@@ -1565,18 +1705,18 @@ function ScreenshotsPanel({
|
|
|
1565
1705
|
animation: "ab-panel-in 150ms cubic-bezier(0.23, 1, 0.32, 1)"
|
|
1566
1706
|
},
|
|
1567
1707
|
children: [
|
|
1568
|
-
/* @__PURE__ */
|
|
1708
|
+
/* @__PURE__ */ jsxs3("div", { style: {
|
|
1569
1709
|
display: "flex",
|
|
1570
1710
|
alignItems: "center",
|
|
1571
1711
|
justifyContent: "space-between",
|
|
1572
1712
|
padding: "16px 20px",
|
|
1573
1713
|
borderBottom: `1px solid ${stroke.soft}`
|
|
1574
1714
|
}, children: [
|
|
1575
|
-
/* @__PURE__ */
|
|
1576
|
-
/* @__PURE__ */
|
|
1577
|
-
/* @__PURE__ */
|
|
1715
|
+
/* @__PURE__ */ jsxs3("div", { children: [
|
|
1716
|
+
/* @__PURE__ */ jsx3("div", { style: { ...text.label.sm, color: fg.strong }, children: "Screenshots" }),
|
|
1717
|
+
/* @__PURE__ */ jsx3("div", { style: { ...text.paragraph.xs, color: fg.sub, marginTop: 2 }, children: "Capture history & settings" })
|
|
1578
1718
|
] }),
|
|
1579
|
-
/* @__PURE__ */
|
|
1719
|
+
/* @__PURE__ */ jsx3(
|
|
1580
1720
|
"button",
|
|
1581
1721
|
{
|
|
1582
1722
|
onClick,
|
|
@@ -1602,13 +1742,13 @@ function ScreenshotsPanel({
|
|
|
1602
1742
|
e.currentTarget.style.background = "transparent";
|
|
1603
1743
|
e.currentTarget.style.color = fg.sub;
|
|
1604
1744
|
},
|
|
1605
|
-
children: /* @__PURE__ */
|
|
1745
|
+
children: /* @__PURE__ */ jsx3(X, { size: 14, strokeWidth: 2 })
|
|
1606
1746
|
}
|
|
1607
1747
|
)
|
|
1608
1748
|
] }),
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
/* @__PURE__ */
|
|
1611
|
-
/* @__PURE__ */
|
|
1749
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "flex", flex: 1, overflow: "hidden", minHeight: 0 }, children: [
|
|
1750
|
+
/* @__PURE__ */ jsxs3("div", { style: { flex: 1, overflowY: "auto", padding: "16px 20px 20px", minHeight: 0 }, children: [
|
|
1751
|
+
/* @__PURE__ */ jsx3(
|
|
1612
1752
|
FramePreview,
|
|
1613
1753
|
{
|
|
1614
1754
|
previewUrl,
|
|
@@ -1616,13 +1756,13 @@ function ScreenshotsPanel({
|
|
|
1616
1756
|
loading
|
|
1617
1757
|
}
|
|
1618
1758
|
),
|
|
1619
|
-
selectedFile && !loading && /* @__PURE__ */
|
|
1759
|
+
selectedFile && !loading && /* @__PURE__ */ jsxs3("div", { style: {
|
|
1620
1760
|
display: "flex",
|
|
1621
1761
|
alignItems: "center",
|
|
1622
1762
|
gap: 8,
|
|
1623
1763
|
marginBottom: 12
|
|
1624
1764
|
}, children: [
|
|
1625
|
-
/* @__PURE__ */
|
|
1765
|
+
/* @__PURE__ */ jsx3("div", { style: { flex: 1, minWidth: 0 }, children: editingFile === selectedFile ? /* @__PURE__ */ jsx3(
|
|
1626
1766
|
"input",
|
|
1627
1767
|
{
|
|
1628
1768
|
autoFocus: true,
|
|
@@ -1645,7 +1785,7 @@ function ScreenshotsPanel({
|
|
|
1645
1785
|
fontFamily: "inherit"
|
|
1646
1786
|
}
|
|
1647
1787
|
}
|
|
1648
|
-
) : /* @__PURE__ */
|
|
1788
|
+
) : /* @__PURE__ */ jsx3(
|
|
1649
1789
|
"div",
|
|
1650
1790
|
{
|
|
1651
1791
|
onClick: () => {
|
|
@@ -1664,7 +1804,7 @@ function ScreenshotsPanel({
|
|
|
1664
1804
|
children: formatTimestamp(selectedFile)
|
|
1665
1805
|
}
|
|
1666
1806
|
) }),
|
|
1667
|
-
/* @__PURE__ */
|
|
1807
|
+
/* @__PURE__ */ jsx3(
|
|
1668
1808
|
"button",
|
|
1669
1809
|
{
|
|
1670
1810
|
onClick: () => handleDelete(selectedFile),
|
|
@@ -1691,12 +1831,12 @@ function ScreenshotsPanel({
|
|
|
1691
1831
|
e.currentTarget.style.color = fg.muted;
|
|
1692
1832
|
e.currentTarget.style.background = "transparent";
|
|
1693
1833
|
},
|
|
1694
|
-
children: /* @__PURE__ */
|
|
1834
|
+
children: /* @__PURE__ */ jsx3(Trash22, { size: 14, strokeWidth: 1.8 })
|
|
1695
1835
|
}
|
|
1696
1836
|
)
|
|
1697
1837
|
] }),
|
|
1698
|
-
/* @__PURE__ */
|
|
1699
|
-
/* @__PURE__ */
|
|
1838
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 10, marginBottom: 10 }, children: [
|
|
1839
|
+
/* @__PURE__ */ jsx3("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx3(
|
|
1700
1840
|
FilterDropdown,
|
|
1701
1841
|
{
|
|
1702
1842
|
label: "Project",
|
|
@@ -1714,7 +1854,7 @@ function ScreenshotsPanel({
|
|
|
1714
1854
|
}
|
|
1715
1855
|
}
|
|
1716
1856
|
) }),
|
|
1717
|
-
/* @__PURE__ */
|
|
1857
|
+
/* @__PURE__ */ jsx3("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx3(
|
|
1718
1858
|
FilterDropdown,
|
|
1719
1859
|
{
|
|
1720
1860
|
label: "Branch",
|
|
@@ -1732,7 +1872,7 @@ function ScreenshotsPanel({
|
|
|
1732
1872
|
}
|
|
1733
1873
|
) })
|
|
1734
1874
|
] }),
|
|
1735
|
-
screenshots.length > 0 && /* @__PURE__ */
|
|
1875
|
+
screenshots.length > 0 && /* @__PURE__ */ jsx3(
|
|
1736
1876
|
"div",
|
|
1737
1877
|
{
|
|
1738
1878
|
style: {
|
|
@@ -1745,7 +1885,7 @@ function ScreenshotsPanel({
|
|
|
1745
1885
|
children: screenshots.map((shot) => {
|
|
1746
1886
|
const thumbUrl = `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(shot.filename)}`;
|
|
1747
1887
|
const isSelected = selectedFile === shot.filename;
|
|
1748
|
-
return /* @__PURE__ */
|
|
1888
|
+
return /* @__PURE__ */ jsx3(
|
|
1749
1889
|
"div",
|
|
1750
1890
|
{
|
|
1751
1891
|
onClick: () => setSelectedFile(shot.filename),
|
|
@@ -1760,7 +1900,7 @@ function ScreenshotsPanel({
|
|
|
1760
1900
|
opacity: isSelected ? 1 : 0.7,
|
|
1761
1901
|
transition: "opacity 0.12s ease, border-color 0.12s ease"
|
|
1762
1902
|
},
|
|
1763
|
-
children: /* @__PURE__ */
|
|
1903
|
+
children: /* @__PURE__ */ jsx3(
|
|
1764
1904
|
"img",
|
|
1765
1905
|
{
|
|
1766
1906
|
src: thumbUrl,
|
|
@@ -1780,9 +1920,9 @@ function ScreenshotsPanel({
|
|
|
1780
1920
|
}
|
|
1781
1921
|
)
|
|
1782
1922
|
] }),
|
|
1783
|
-
/* @__PURE__ */
|
|
1784
|
-
/* @__PURE__ */
|
|
1785
|
-
/* @__PURE__ */
|
|
1923
|
+
/* @__PURE__ */ jsx3("div", { style: { width: 1, flexShrink: 0, background: stroke.soft } }),
|
|
1924
|
+
/* @__PURE__ */ jsxs3("div", { style: { width: 300, flexShrink: 0, overflowY: "auto", padding: "16px 16px 12px", minHeight: 0, display: "flex", flexDirection: "column" }, children: [
|
|
1925
|
+
/* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx3(
|
|
1786
1926
|
SettingsContent,
|
|
1787
1927
|
{
|
|
1788
1928
|
frameSettings,
|
|
@@ -1792,9 +1932,9 @@ function ScreenshotsPanel({
|
|
|
1792
1932
|
onPickFolder: handlePickFolder
|
|
1793
1933
|
}
|
|
1794
1934
|
) }),
|
|
1795
|
-
/* @__PURE__ */
|
|
1796
|
-
/* @__PURE__ */
|
|
1797
|
-
/* @__PURE__ */
|
|
1935
|
+
/* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 8, paddingTop: 12, paddingBottom: 2, marginTop: 12, borderTop: `1px solid ${stroke.soft}`, marginLeft: -16, marginRight: -16, paddingLeft: 16 }, children: [
|
|
1936
|
+
/* @__PURE__ */ jsx3("span", { style: { ...text.paragraph.xs, color: fg.muted }, children: "Paulius Kairevicius" }),
|
|
1937
|
+
/* @__PURE__ */ jsx3(
|
|
1798
1938
|
"a",
|
|
1799
1939
|
{
|
|
1800
1940
|
href: "https://github.com/kairevicius",
|
|
@@ -1807,10 +1947,10 @@ function ScreenshotsPanel({
|
|
|
1807
1947
|
onMouseLeave: (e) => {
|
|
1808
1948
|
e.currentTarget.style.color = fg.muted;
|
|
1809
1949
|
},
|
|
1810
|
-
children: /* @__PURE__ */
|
|
1950
|
+
children: /* @__PURE__ */ jsx3("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" }) })
|
|
1811
1951
|
}
|
|
1812
1952
|
),
|
|
1813
|
-
/* @__PURE__ */
|
|
1953
|
+
/* @__PURE__ */ jsx3(
|
|
1814
1954
|
"a",
|
|
1815
1955
|
{
|
|
1816
1956
|
href: "https://x.com/kairevicius",
|
|
@@ -1823,7 +1963,7 @@ function ScreenshotsPanel({
|
|
|
1823
1963
|
onMouseLeave: (e) => {
|
|
1824
1964
|
e.currentTarget.style.color = fg.muted;
|
|
1825
1965
|
},
|
|
1826
|
-
children: /* @__PURE__ */
|
|
1966
|
+
children: /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
|
|
1827
1967
|
}
|
|
1828
1968
|
)
|
|
1829
1969
|
] })
|
|
@@ -1832,7 +1972,7 @@ function ScreenshotsPanel({
|
|
|
1832
1972
|
]
|
|
1833
1973
|
}
|
|
1834
1974
|
),
|
|
1835
|
-
toast && /* @__PURE__ */
|
|
1975
|
+
toast && /* @__PURE__ */ jsx3(
|
|
1836
1976
|
"div",
|
|
1837
1977
|
{
|
|
1838
1978
|
onClick: (e) => e.stopPropagation(),
|
|
@@ -1861,7 +2001,7 @@ function ScreenshotsPanel({
|
|
|
1861
2001
|
}
|
|
1862
2002
|
|
|
1863
2003
|
// src/overlay/ui/toolbar.tsx
|
|
1864
|
-
import { Fragment as Fragment3, jsx as
|
|
2004
|
+
import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1865
2005
|
var TOOLTIP_DELAY = 500;
|
|
1866
2006
|
var TOOLTIP_COOLDOWN = 300;
|
|
1867
2007
|
var tooltipWarm = false;
|
|
@@ -1946,7 +2086,7 @@ function getCornerPosition(corner, w, h) {
|
|
|
1946
2086
|
}
|
|
1947
2087
|
}
|
|
1948
2088
|
var MODES = [
|
|
1949
|
-
{ mode: "component", label: "Component", icon:
|
|
2089
|
+
{ mode: "component", label: "Component", icon: CameraIcon },
|
|
1950
2090
|
{ mode: "viewport", label: "Viewport", icon: Monitor },
|
|
1951
2091
|
{ mode: "fullpage", label: "Full Page", icon: FileText }
|
|
1952
2092
|
];
|
|
@@ -2109,8 +2249,8 @@ function Toolbar({
|
|
|
2109
2249
|
} : getCornerStyle(corner);
|
|
2110
2250
|
const cameraTooltipLabel = expanded ? "Close" : void 0;
|
|
2111
2251
|
const cameraTooltipStyle = cameraTooltipLabel ? tooltipSide === "left" ? { right: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)" } : { left: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)" } : void 0;
|
|
2112
|
-
const cameraButton = /* @__PURE__ */
|
|
2113
|
-
cameraTooltipLabel && cameraTooltipVisible && !dragging && /* @__PURE__ */
|
|
2252
|
+
const cameraButton = /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
|
|
2253
|
+
cameraTooltipLabel && cameraTooltipVisible && !dragging && /* @__PURE__ */ jsx4(
|
|
2114
2254
|
"div",
|
|
2115
2255
|
{
|
|
2116
2256
|
style: {
|
|
@@ -2132,7 +2272,7 @@ function Toolbar({
|
|
|
2132
2272
|
children: cameraTooltipLabel
|
|
2133
2273
|
}
|
|
2134
2274
|
),
|
|
2135
|
-
/* @__PURE__ */
|
|
2275
|
+
/* @__PURE__ */ jsxs4(
|
|
2136
2276
|
"div",
|
|
2137
2277
|
{
|
|
2138
2278
|
onMouseDown: handleMouseDown,
|
|
@@ -2151,7 +2291,7 @@ function Toolbar({
|
|
|
2151
2291
|
transition: "background 0.12s ease"
|
|
2152
2292
|
},
|
|
2153
2293
|
children: [
|
|
2154
|
-
/* @__PURE__ */
|
|
2294
|
+
/* @__PURE__ */ jsx4(
|
|
2155
2295
|
"style",
|
|
2156
2296
|
{
|
|
2157
2297
|
dangerouslySetInnerHTML: {
|
|
@@ -2168,33 +2308,31 @@ function Toolbar({
|
|
|
2168
2308
|
}
|
|
2169
2309
|
}
|
|
2170
2310
|
),
|
|
2171
|
-
loading ? /* @__PURE__ */
|
|
2311
|
+
loading ? /* @__PURE__ */ jsx4(
|
|
2172
2312
|
LoaderCircle,
|
|
2173
2313
|
{
|
|
2174
2314
|
size: 16,
|
|
2175
2315
|
strokeWidth: 2,
|
|
2176
2316
|
style: { animation: "ab-spin 0.8s linear infinite", color: "white" }
|
|
2177
2317
|
}
|
|
2178
|
-
) : phase === "ready" ? /* @__PURE__ */
|
|
2179
|
-
|
|
2318
|
+
) : phase === "ready" ? /* @__PURE__ */ jsx4(CheckmarkIcon, { size: 20, color: fg.default }) : expanded ? /* @__PURE__ */ jsx4(
|
|
2319
|
+
CloseIcon,
|
|
2180
2320
|
{
|
|
2181
|
-
size:
|
|
2182
|
-
|
|
2183
|
-
color: cameraHovered ? fg.strong : fg.sub
|
|
2321
|
+
size: 20,
|
|
2322
|
+
color: cameraHovered ? fg.strong : fg.default
|
|
2184
2323
|
}
|
|
2185
|
-
) : /* @__PURE__ */
|
|
2186
|
-
|
|
2324
|
+
) : /* @__PURE__ */ jsx4(
|
|
2325
|
+
CameraIcon,
|
|
2187
2326
|
{
|
|
2188
|
-
size:
|
|
2189
|
-
|
|
2190
|
-
color: fg.sub
|
|
2327
|
+
size: 20,
|
|
2328
|
+
color: cameraHovered ? fg.strong : fg.default
|
|
2191
2329
|
}
|
|
2192
2330
|
)
|
|
2193
2331
|
]
|
|
2194
2332
|
}
|
|
2195
2333
|
)
|
|
2196
2334
|
] });
|
|
2197
|
-
const toolbarButtons = buttonsVisible ? /* @__PURE__ */
|
|
2335
|
+
const toolbarButtons = buttonsVisible ? /* @__PURE__ */ jsx4(
|
|
2198
2336
|
"div",
|
|
2199
2337
|
{
|
|
2200
2338
|
style: {
|
|
@@ -2202,7 +2340,7 @@ function Toolbar({
|
|
|
2202
2340
|
maxHeight: animIn ? 195 : 0,
|
|
2203
2341
|
transition: animIn ? "max-height 250ms cubic-bezier(0.23, 1, 0.32, 1)" : "max-height 150ms cubic-bezier(0.23, 1, 0.32, 1)"
|
|
2204
2342
|
},
|
|
2205
|
-
children: /* @__PURE__ */
|
|
2343
|
+
children: /* @__PURE__ */ jsxs4(
|
|
2206
2344
|
"div",
|
|
2207
2345
|
{
|
|
2208
2346
|
style: {
|
|
@@ -2215,7 +2353,7 @@ function Toolbar({
|
|
|
2215
2353
|
willChange: "transform, opacity"
|
|
2216
2354
|
},
|
|
2217
2355
|
children: [
|
|
2218
|
-
/* @__PURE__ */
|
|
2356
|
+
/* @__PURE__ */ jsx4("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsx4(
|
|
2219
2357
|
IconButton,
|
|
2220
2358
|
{
|
|
2221
2359
|
active: selectedMode === "component" && !historyOpen,
|
|
@@ -2225,10 +2363,10 @@ function Toolbar({
|
|
|
2225
2363
|
setHistoryOpen(false);
|
|
2226
2364
|
onModeChange("component");
|
|
2227
2365
|
},
|
|
2228
|
-
children: /* @__PURE__ */
|
|
2366
|
+
children: /* @__PURE__ */ jsx4(CameraIcon, { size: 20 })
|
|
2229
2367
|
}
|
|
2230
2368
|
) }),
|
|
2231
|
-
MODES.filter((m) => m.mode !== "component").map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */
|
|
2369
|
+
MODES.filter((m) => m.mode !== "component").map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */ jsx4(
|
|
2232
2370
|
"div",
|
|
2233
2371
|
{
|
|
2234
2372
|
style: {
|
|
@@ -2236,7 +2374,7 @@ function Toolbar({
|
|
|
2236
2374
|
opacity: modesExpanded ? 1 : 0,
|
|
2237
2375
|
transition: "max-height 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms cubic-bezier(0.23, 1, 0.32, 1)"
|
|
2238
2376
|
},
|
|
2239
|
-
children: /* @__PURE__ */
|
|
2377
|
+
children: /* @__PURE__ */ jsx4(
|
|
2240
2378
|
IconButton,
|
|
2241
2379
|
{
|
|
2242
2380
|
active: selectedMode === mode && !historyOpen,
|
|
@@ -2247,20 +2385,20 @@ function Toolbar({
|
|
|
2247
2385
|
onModeChange(mode);
|
|
2248
2386
|
onCapture(mode);
|
|
2249
2387
|
},
|
|
2250
|
-
children: /* @__PURE__ */
|
|
2388
|
+
children: /* @__PURE__ */ jsx4(ModeIcon, { size: 16, strokeWidth: 1.7 })
|
|
2251
2389
|
}
|
|
2252
2390
|
)
|
|
2253
2391
|
},
|
|
2254
2392
|
mode
|
|
2255
2393
|
)),
|
|
2256
|
-
/* @__PURE__ */
|
|
2394
|
+
/* @__PURE__ */ jsx4(
|
|
2257
2395
|
Separator,
|
|
2258
2396
|
{
|
|
2259
2397
|
vertical: false,
|
|
2260
2398
|
onClick: () => setModesExpanded((p) => !p)
|
|
2261
2399
|
}
|
|
2262
2400
|
),
|
|
2263
|
-
/* @__PURE__ */
|
|
2401
|
+
/* @__PURE__ */ jsx4(
|
|
2264
2402
|
ScreenshotsPanel,
|
|
2265
2403
|
{
|
|
2266
2404
|
open: historyOpen,
|
|
@@ -2278,7 +2416,7 @@ function Toolbar({
|
|
|
2278
2416
|
)
|
|
2279
2417
|
}
|
|
2280
2418
|
) : null;
|
|
2281
|
-
return /* @__PURE__ */
|
|
2419
|
+
return /* @__PURE__ */ jsx4(
|
|
2282
2420
|
"div",
|
|
2283
2421
|
{
|
|
2284
2422
|
ref: toolbarRef,
|
|
@@ -2297,10 +2435,10 @@ function Toolbar({
|
|
|
2297
2435
|
...fontBase,
|
|
2298
2436
|
userSelect: "none"
|
|
2299
2437
|
},
|
|
2300
|
-
children: bottom ? /* @__PURE__ */
|
|
2438
|
+
children: bottom ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
2301
2439
|
toolbarButtons,
|
|
2302
2440
|
cameraButton
|
|
2303
|
-
] }) : /* @__PURE__ */
|
|
2441
|
+
] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
|
|
2304
2442
|
cameraButton,
|
|
2305
2443
|
toolbarButtons
|
|
2306
2444
|
] })
|
|
@@ -2325,8 +2463,8 @@ function IconButton({
|
|
|
2325
2463
|
top: "50%",
|
|
2326
2464
|
transform: "translateY(-50%)"
|
|
2327
2465
|
};
|
|
2328
|
-
return /* @__PURE__ */
|
|
2329
|
-
tooltip && tooltipVisible && /* @__PURE__ */
|
|
2466
|
+
return /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
|
|
2467
|
+
tooltip && tooltipVisible && /* @__PURE__ */ jsx4(
|
|
2330
2468
|
"div",
|
|
2331
2469
|
{
|
|
2332
2470
|
style: {
|
|
@@ -2348,7 +2486,7 @@ function IconButton({
|
|
|
2348
2486
|
children: tooltip
|
|
2349
2487
|
}
|
|
2350
2488
|
),
|
|
2351
|
-
/* @__PURE__ */
|
|
2489
|
+
/* @__PURE__ */ jsx4(
|
|
2352
2490
|
"button",
|
|
2353
2491
|
{
|
|
2354
2492
|
onClick,
|
|
@@ -2365,7 +2503,7 @@ function IconButton({
|
|
|
2365
2503
|
justifyContent: "center",
|
|
2366
2504
|
cursor: "pointer",
|
|
2367
2505
|
padding: 0,
|
|
2368
|
-
color: active || hovered ? fg.strong : fg.
|
|
2506
|
+
color: active || hovered ? fg.strong : fg.default,
|
|
2369
2507
|
transition: "background 0.12s ease, color 0.12s ease"
|
|
2370
2508
|
},
|
|
2371
2509
|
children
|
|
@@ -2379,7 +2517,7 @@ function DropItem2({
|
|
|
2379
2517
|
active,
|
|
2380
2518
|
accent: accent2
|
|
2381
2519
|
}) {
|
|
2382
|
-
return /* @__PURE__ */
|
|
2520
|
+
return /* @__PURE__ */ jsx4(
|
|
2383
2521
|
"button",
|
|
2384
2522
|
{
|
|
2385
2523
|
onClick,
|
|
@@ -2403,7 +2541,7 @@ function Separator({
|
|
|
2403
2541
|
vertical = true,
|
|
2404
2542
|
onClick
|
|
2405
2543
|
}) {
|
|
2406
|
-
return /* @__PURE__ */
|
|
2544
|
+
return /* @__PURE__ */ jsx4(
|
|
2407
2545
|
"div",
|
|
2408
2546
|
{
|
|
2409
2547
|
onClick,
|
|
@@ -2416,7 +2554,7 @@ function Separator({
|
|
|
2416
2554
|
margin: vertical ? "0 6px" : "6px 0",
|
|
2417
2555
|
cursor: onClick ? "pointer" : void 0
|
|
2418
2556
|
},
|
|
2419
|
-
children: onClick && /* @__PURE__ */
|
|
2557
|
+
children: onClick && /* @__PURE__ */ jsx4("div", { style: { position: "absolute", inset: vertical ? "0 -8px" : "-8px 0" } })
|
|
2420
2558
|
}
|
|
2421
2559
|
);
|
|
2422
2560
|
}
|
|
@@ -2428,8 +2566,8 @@ function FilterDropdown({
|
|
|
2428
2566
|
onToggle,
|
|
2429
2567
|
onSelect
|
|
2430
2568
|
}) {
|
|
2431
|
-
return /* @__PURE__ */
|
|
2432
|
-
/* @__PURE__ */
|
|
2569
|
+
return /* @__PURE__ */ jsxs4("div", { children: [
|
|
2570
|
+
/* @__PURE__ */ jsx4(
|
|
2433
2571
|
"div",
|
|
2434
2572
|
{
|
|
2435
2573
|
style: {
|
|
@@ -2440,8 +2578,8 @@ function FilterDropdown({
|
|
|
2440
2578
|
children: label
|
|
2441
2579
|
}
|
|
2442
2580
|
),
|
|
2443
|
-
/* @__PURE__ */
|
|
2444
|
-
/* @__PURE__ */
|
|
2581
|
+
/* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
|
|
2582
|
+
/* @__PURE__ */ jsxs4(
|
|
2445
2583
|
"button",
|
|
2446
2584
|
{
|
|
2447
2585
|
onClick: onToggle,
|
|
@@ -2462,7 +2600,7 @@ function FilterDropdown({
|
|
|
2462
2600
|
fontFamily: "inherit"
|
|
2463
2601
|
},
|
|
2464
2602
|
children: [
|
|
2465
|
-
/* @__PURE__ */
|
|
2603
|
+
/* @__PURE__ */ jsx4(
|
|
2466
2604
|
"span",
|
|
2467
2605
|
{
|
|
2468
2606
|
style: {
|
|
@@ -2473,11 +2611,11 @@ function FilterDropdown({
|
|
|
2473
2611
|
children: value || "\u2014"
|
|
2474
2612
|
}
|
|
2475
2613
|
),
|
|
2476
|
-
/* @__PURE__ */
|
|
2614
|
+
/* @__PURE__ */ jsx4(ChevronDown2, { size: 12, strokeWidth: 2 })
|
|
2477
2615
|
]
|
|
2478
2616
|
}
|
|
2479
2617
|
),
|
|
2480
|
-
isOpen && options.length > 0 && /* @__PURE__ */
|
|
2618
|
+
isOpen && options.length > 0 && /* @__PURE__ */ jsx4(
|
|
2481
2619
|
"div",
|
|
2482
2620
|
{
|
|
2483
2621
|
style: {
|
|
@@ -2494,7 +2632,7 @@ function FilterDropdown({
|
|
|
2494
2632
|
boxShadow: shadow.dropdown,
|
|
2495
2633
|
zIndex: 1
|
|
2496
2634
|
},
|
|
2497
|
-
children: options.map((opt) => /* @__PURE__ */
|
|
2635
|
+
children: options.map((opt) => /* @__PURE__ */ jsx4(
|
|
2498
2636
|
DropItem2,
|
|
2499
2637
|
{
|
|
2500
2638
|
active: opt === value,
|
|
@@ -2511,7 +2649,7 @@ function FilterDropdown({
|
|
|
2511
2649
|
|
|
2512
2650
|
// src/overlay/ui/inspector.tsx
|
|
2513
2651
|
import { useEffect as useEffect4, useRef as useRef3, useCallback as useCallback4, useState as useState5 } from "react";
|
|
2514
|
-
import { jsx as
|
|
2652
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
2515
2653
|
function Inspector({ onSelect, onCancel }) {
|
|
2516
2654
|
const [highlight, setHighlight] = useState5(null);
|
|
2517
2655
|
const hoveredEl = useRef3(null);
|
|
@@ -2588,7 +2726,7 @@ function Inspector({ onSelect, onCancel }) {
|
|
|
2588
2726
|
document.removeEventListener("keydown", handleKeyDown);
|
|
2589
2727
|
};
|
|
2590
2728
|
}, [handleMouseMove, handleClick, handleKeyDown]);
|
|
2591
|
-
return /* @__PURE__ */
|
|
2729
|
+
return /* @__PURE__ */ jsx5("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsx5(
|
|
2592
2730
|
"div",
|
|
2593
2731
|
{
|
|
2594
2732
|
style: {
|
|
@@ -2608,7 +2746,7 @@ function Inspector({ onSelect, onCancel }) {
|
|
|
2608
2746
|
}
|
|
2609
2747
|
|
|
2610
2748
|
// src/overlay/index.tsx
|
|
2611
|
-
import { jsx as
|
|
2749
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2612
2750
|
async function saveCapture(mode, dataUrl) {
|
|
2613
2751
|
try {
|
|
2614
2752
|
const res = await fetch("/__afterbefore/save", {
|
|
@@ -2735,8 +2873,8 @@ function AfterBefore() {
|
|
|
2735
2873
|
setSelectedMode(mode);
|
|
2736
2874
|
setInspectorActive(mode === "component");
|
|
2737
2875
|
}, []);
|
|
2738
|
-
return /* @__PURE__ */
|
|
2739
|
-
/* @__PURE__ */
|
|
2876
|
+
return /* @__PURE__ */ jsxs5("div", { "data-afterbefore": "true", children: [
|
|
2877
|
+
/* @__PURE__ */ jsx6(
|
|
2740
2878
|
Toolbar,
|
|
2741
2879
|
{
|
|
2742
2880
|
expanded: toolbarActive,
|
|
@@ -2751,7 +2889,7 @@ function AfterBefore() {
|
|
|
2751
2889
|
onFrameSettingsChange: handleFrameSettingsChange
|
|
2752
2890
|
}
|
|
2753
2891
|
),
|
|
2754
|
-
inspectorActive && /* @__PURE__ */
|
|
2892
|
+
inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
|
|
2755
2893
|
] });
|
|
2756
2894
|
}
|
|
2757
2895
|
export {
|