@aperture-browser/session-react 0.0.0-nightly.95.3b4883f6d9c2 → 0.0.0-nightly.97.4e0ac6c83ab5
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/index.js +205 -201
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
|
7
7
|
import { ArrowLeft, ArrowRight, CheckIcon, ChevronRightIcon, Circle, CircleCheckIcon, Copy, Download, Gauge, Globe2, Hand, Info, InfoIcon, Link2Off, Loader2, Loader2Icon, Lock, LockOpen, Maximize2, Monitor, MonitorPause, MoreVertical, MousePointer2, OctagonXIcon, PanelBottom, PanelRight, Pencil, Plus, Radio, RefreshCw, RotateCcw, Share2, Square, TriangleAlertIcon, Unplug, Wrench, X } from "lucide-react";
|
|
8
8
|
import { cva } from "class-variance-authority";
|
|
9
9
|
import { clsx } from "clsx";
|
|
10
|
-
import {
|
|
10
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
11
11
|
import { useTheme } from "next-themes";
|
|
12
12
|
import { Toaster, toast } from "sonner";
|
|
13
13
|
import * as ResizablePrimitive from "react-resizable-panels";
|
|
@@ -28,6 +28,7 @@ import { Popover } from "@base-ui/react/popover";
|
|
|
28
28
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
29
29
|
import { useRender } from "@base-ui/react/use-render";
|
|
30
30
|
//#region ../ui/src/utils.ts
|
|
31
|
+
const twMerge = extendTailwindMerge({ prefix: "aperture" });
|
|
31
32
|
function cn(...inputs) {
|
|
32
33
|
return twMerge(clsx(inputs));
|
|
33
34
|
}
|
|
@@ -36,21 +37,21 @@ function cn(...inputs) {
|
|
|
36
37
|
function Empty({ className, ...props }) {
|
|
37
38
|
return /* @__PURE__ */ jsx("div", {
|
|
38
39
|
"data-slot": "empty",
|
|
39
|
-
className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className),
|
|
40
|
+
className: cn("aperture:flex aperture:w-full aperture:min-w-0 aperture:flex-1 aperture:flex-col aperture:items-center aperture:justify-center aperture:gap-4 aperture:rounded-xl aperture:border-dashed aperture:p-6 aperture:text-center aperture:text-balance", className),
|
|
40
41
|
...props
|
|
41
42
|
});
|
|
42
43
|
}
|
|
43
44
|
function EmptyHeader({ className, ...props }) {
|
|
44
45
|
return /* @__PURE__ */ jsx("div", {
|
|
45
46
|
"data-slot": "empty-header",
|
|
46
|
-
className: cn("flex max-w-sm flex-col items-center gap-2", className),
|
|
47
|
+
className: cn("aperture:flex aperture:max-w-sm aperture:flex-col aperture:items-center aperture:gap-2", className),
|
|
47
48
|
...props
|
|
48
49
|
});
|
|
49
50
|
}
|
|
50
|
-
const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
51
|
+
const emptyMediaVariants = cva("aperture:mb-2 aperture:flex aperture:shrink-0 aperture:items-center aperture:justify-center aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0", {
|
|
51
52
|
variants: { variant: {
|
|
52
|
-
default: "bg-transparent",
|
|
53
|
-
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
|
|
53
|
+
default: "aperture:bg-transparent",
|
|
54
|
+
icon: "aperture:flex aperture:size-8 aperture:shrink-0 aperture:items-center aperture:justify-center aperture:rounded-lg aperture:bg-muted aperture:text-foreground aperture:[&_svg:not([class*='size-'])]:size-4"
|
|
54
55
|
} },
|
|
55
56
|
defaultVariants: { variant: "default" }
|
|
56
57
|
});
|
|
@@ -68,14 +69,14 @@ function EmptyMedia({ className, variant = "default", ...props }) {
|
|
|
68
69
|
function EmptyTitle({ className, ...props }) {
|
|
69
70
|
return /* @__PURE__ */ jsx("div", {
|
|
70
71
|
"data-slot": "empty-title",
|
|
71
|
-
className: cn("text-sm font-medium tracking-tight", className),
|
|
72
|
+
className: cn("aperture:text-sm aperture:font-medium aperture:tracking-tight", className),
|
|
72
73
|
...props
|
|
73
74
|
});
|
|
74
75
|
}
|
|
75
76
|
function EmptyDescription({ className, ...props }) {
|
|
76
77
|
return /* @__PURE__ */ jsx("div", {
|
|
77
78
|
"data-slot": "empty-description",
|
|
78
|
-
className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
|
|
79
|
+
className: cn("aperture:text-sm/relaxed aperture:text-muted-foreground aperture:[&>a]:underline aperture:[&>a]:underline-offset-4 aperture:[&>a:hover]:text-primary", className),
|
|
79
80
|
...props
|
|
80
81
|
});
|
|
81
82
|
}
|
|
@@ -85,13 +86,13 @@ const Toaster$1 = ({ ...props }) => {
|
|
|
85
86
|
const { theme = "system" } = useTheme();
|
|
86
87
|
return /* @__PURE__ */ jsx(Toaster, {
|
|
87
88
|
theme,
|
|
88
|
-
className: "toaster group",
|
|
89
|
+
className: "toaster aperture:group",
|
|
89
90
|
icons: {
|
|
90
|
-
success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
|
|
91
|
-
info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
|
|
92
|
-
warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
|
|
93
|
-
error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
|
|
94
|
-
loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
|
|
91
|
+
success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "aperture:size-4" }),
|
|
92
|
+
info: /* @__PURE__ */ jsx(InfoIcon, { className: "aperture:size-4" }),
|
|
93
|
+
warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "aperture:size-4" }),
|
|
94
|
+
error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "aperture:size-4" }),
|
|
95
|
+
loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "aperture:size-4 aperture:animate-spin" })
|
|
95
96
|
},
|
|
96
97
|
style: {
|
|
97
98
|
"--normal-bg": "var(--popover)",
|
|
@@ -120,25 +121,25 @@ function resolveSessionFeatures(features) {
|
|
|
120
121
|
}
|
|
121
122
|
//#endregion
|
|
122
123
|
//#region ../ui/src/components/button.tsx
|
|
123
|
-
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm leading-none font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
124
|
+
const buttonVariants = cva("aperture:group/button aperture:inline-flex aperture:shrink-0 aperture:items-center aperture:justify-center aperture:rounded-lg aperture:border aperture:border-transparent aperture:bg-clip-padding aperture:text-sm aperture:leading-none aperture:font-medium aperture:whitespace-nowrap aperture:transition-all aperture:outline-none aperture:select-none aperture:focus-visible:border-ring aperture:focus-visible:ring-3 aperture:focus-visible:ring-ring/50 aperture:active:not-aria-[haspopup]:translate-y-px aperture:disabled:pointer-events-none aperture:disabled:opacity-50 aperture:aria-invalid:border-destructive aperture:aria-invalid:ring-3 aperture:aria-invalid:ring-destructive/20 aperture:dark:aria-invalid:border-destructive/50 aperture:dark:aria-invalid:ring-destructive/40 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", {
|
|
124
125
|
variants: {
|
|
125
126
|
variant: {
|
|
126
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
127
|
-
outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
128
|
-
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
129
|
-
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
130
|
-
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
131
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
127
|
+
default: "aperture:bg-primary aperture:text-primary-foreground aperture:hover:bg-primary/80",
|
|
128
|
+
outline: "aperture:border-border aperture:bg-background aperture:hover:bg-muted aperture:hover:text-foreground aperture:aria-expanded:bg-muted aperture:aria-expanded:text-foreground aperture:dark:border-input aperture:dark:bg-input/30 aperture:dark:hover:bg-input/50",
|
|
129
|
+
secondary: "aperture:bg-secondary aperture:text-secondary-foreground aperture:hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aperture:aria-expanded:bg-secondary aperture:aria-expanded:text-secondary-foreground",
|
|
130
|
+
ghost: "aperture:hover:bg-muted aperture:hover:text-foreground aperture:aria-expanded:bg-muted aperture:aria-expanded:text-foreground aperture:dark:hover:bg-muted/50",
|
|
131
|
+
destructive: "aperture:bg-destructive/10 aperture:text-destructive aperture:hover:bg-destructive/20 aperture:focus-visible:border-destructive/40 aperture:focus-visible:ring-destructive/20 aperture:dark:bg-destructive/20 aperture:dark:hover:bg-destructive/30 aperture:dark:focus-visible:ring-destructive/40",
|
|
132
|
+
link: "aperture:text-primary aperture:underline-offset-4 aperture:hover:underline"
|
|
132
133
|
},
|
|
133
134
|
size: {
|
|
134
|
-
default: "h-8 gap-1.5 px-2.5 pt-px has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
135
|
-
xs: "h-6 gap-1 rounded-[min(
|
|
136
|
-
sm: "h-7 gap-1 rounded-[min(
|
|
137
|
-
lg: "h-9 gap-1.5 px-2.5 pt-px has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
138
|
-
icon: "size-8",
|
|
139
|
-
"icon-xs": "size-6 rounded-[min(
|
|
140
|
-
"icon-sm": "size-7 rounded-[min(
|
|
141
|
-
"icon-lg": "size-9"
|
|
135
|
+
default: "aperture:h-8 aperture:gap-1.5 aperture:px-2.5 aperture:pt-px aperture:has-data-[icon=inline-end]:pr-2 aperture:has-data-[icon=inline-start]:pl-2",
|
|
136
|
+
xs: "aperture:h-6 aperture:gap-1 aperture:rounded-[min(--theme(--radius-md),10px)] aperture:px-2 aperture:pt-px aperture:text-xs aperture:in-data-[slot=button-group]:rounded-lg aperture:has-data-[icon=inline-end]:pr-1.5 aperture:has-data-[icon=inline-start]:pl-1.5 aperture:[&_svg:not([class*='size-'])]:size-3",
|
|
137
|
+
sm: "aperture:h-7 aperture:gap-1 aperture:rounded-[min(--theme(--radius-md),12px)] aperture:px-2.5 aperture:pt-px aperture:text-[0.8rem] aperture:in-data-[slot=button-group]:rounded-lg aperture:has-data-[icon=inline-end]:pr-1.5 aperture:has-data-[icon=inline-start]:pl-1.5 aperture:[&_svg:not([class*='size-'])]:size-3.5",
|
|
138
|
+
lg: "aperture:h-9 aperture:gap-1.5 aperture:px-2.5 aperture:pt-px aperture:has-data-[icon=inline-end]:pr-2 aperture:has-data-[icon=inline-start]:pl-2",
|
|
139
|
+
icon: "aperture:size-8",
|
|
140
|
+
"icon-xs": "aperture:size-6 aperture:rounded-[min(--theme(--radius-md),10px)] aperture:in-data-[slot=button-group]:rounded-lg aperture:[&_svg:not([class*='size-'])]:size-3",
|
|
141
|
+
"icon-sm": "aperture:size-7 aperture:rounded-[min(--theme(--radius-md),12px)] aperture:in-data-[slot=button-group]:rounded-lg",
|
|
142
|
+
"icon-lg": "aperture:size-9"
|
|
142
143
|
}
|
|
143
144
|
},
|
|
144
145
|
defaultVariants: {
|
|
@@ -180,7 +181,7 @@ function ContextMenu$1({ ...props }) {
|
|
|
180
181
|
function ContextMenuTrigger({ className, ...props }) {
|
|
181
182
|
return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
|
|
182
183
|
"data-slot": "context-menu-trigger",
|
|
183
|
-
className: cn("select-none", className),
|
|
184
|
+
className: cn("aperture:select-none", className),
|
|
184
185
|
...props
|
|
185
186
|
});
|
|
186
187
|
}
|
|
@@ -188,14 +189,14 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
|
|
|
188
189
|
return /* @__PURE__ */ jsx(ContextMenu.Portal, {
|
|
189
190
|
container: usePortalContainer(),
|
|
190
191
|
children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
|
|
191
|
-
className: "isolate z-50 outline-none",
|
|
192
|
+
className: "aperture:isolate aperture:z-50 aperture:outline-none",
|
|
192
193
|
align,
|
|
193
194
|
alignOffset,
|
|
194
195
|
side,
|
|
195
196
|
sideOffset,
|
|
196
197
|
children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
|
|
197
198
|
"data-slot": "context-menu-content",
|
|
198
|
-
className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
199
|
+
className: cn("aperture:z-50 aperture:max-h-(--available-height) aperture:min-w-36 aperture:origin-(--transform-origin) aperture:overflow-x-hidden aperture:overflow-y-auto aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:outline-none aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=inline-end]:slide-in-from-left-2 aperture:data-[side=inline-start]:slide-in-from-right-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
|
|
199
200
|
...props
|
|
200
201
|
})
|
|
201
202
|
})
|
|
@@ -211,7 +212,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
|
|
|
211
212
|
return /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
|
|
212
213
|
"data-slot": "context-menu-label",
|
|
213
214
|
"data-inset": inset,
|
|
214
|
-
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
215
|
+
className: cn("aperture:px-1.5 aperture:py-1 aperture:text-xs aperture:font-medium aperture:text-muted-foreground aperture:data-inset:pl-7", className),
|
|
215
216
|
...props
|
|
216
217
|
});
|
|
217
218
|
}
|
|
@@ -220,7 +221,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
|
|
|
220
221
|
"data-slot": "context-menu-item",
|
|
221
222
|
"data-inset": inset,
|
|
222
223
|
"data-variant": variant,
|
|
223
|
-
className: cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
224
|
+
className: cn("aperture:group/context-menu-item aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:px-1.5 aperture:py-1 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:data-inset:pl-7 aperture:data-[variant=destructive]:text-destructive aperture:data-[variant=destructive]:focus:bg-destructive/10 aperture:data-[variant=destructive]:focus:text-destructive aperture:dark:data-[variant=destructive]:focus:bg-destructive/20 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4 aperture:focus:*:[svg]:text-accent-foreground aperture:data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
224
225
|
...props
|
|
225
226
|
});
|
|
226
227
|
}
|
|
@@ -234,10 +235,10 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
|
234
235
|
return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
|
|
235
236
|
"data-slot": "context-menu-radio-item",
|
|
236
237
|
"data-inset": inset,
|
|
237
|
-
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
238
|
+
className: cn("aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:py-1 aperture:pr-8 aperture:pl-1.5 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:data-inset:pl-7 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
|
|
238
239
|
...props,
|
|
239
240
|
children: [/* @__PURE__ */ jsx("span", {
|
|
240
|
-
className: "pointer-events-none absolute right-2",
|
|
241
|
+
className: "aperture:pointer-events-none aperture:absolute aperture:right-2",
|
|
241
242
|
children: /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
242
243
|
}), children]
|
|
243
244
|
});
|
|
@@ -245,7 +246,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
|
245
246
|
function ContextMenuSeparator({ className, ...props }) {
|
|
246
247
|
return /* @__PURE__ */ jsx(ContextMenu.Separator, {
|
|
247
248
|
"data-slot": "context-menu-separator",
|
|
248
|
-
className: cn("
|
|
249
|
+
className: cn("aperture:-mx-1 aperture:my-1 aperture:h-px aperture:bg-border", className),
|
|
249
250
|
...props
|
|
250
251
|
});
|
|
251
252
|
}
|
|
@@ -255,7 +256,7 @@ function Input$1({ className, type, ...props }) {
|
|
|
255
256
|
return /* @__PURE__ */ jsx(Input, {
|
|
256
257
|
type,
|
|
257
258
|
"data-slot": "input",
|
|
258
|
-
className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
259
|
+
className: cn("aperture:h-8 aperture:w-full aperture:min-w-0 aperture:rounded-lg aperture:border aperture:border-input aperture:bg-transparent aperture:px-2.5 aperture:py-1 aperture:text-base aperture:transition-colors aperture:outline-none aperture:file:inline-flex aperture:file:h-6 aperture:file:border-0 aperture:file:bg-transparent aperture:file:text-sm aperture:file:font-medium aperture:file:text-foreground aperture:placeholder:text-muted-foreground aperture:focus-visible:border-ring aperture:focus-visible:ring-3 aperture:focus-visible:ring-ring/50 aperture:disabled:pointer-events-none aperture:disabled:cursor-not-allowed aperture:disabled:bg-input/50 aperture:disabled:opacity-50 aperture:aria-invalid:border-destructive aperture:aria-invalid:ring-3 aperture:aria-invalid:ring-destructive/20 aperture:md:text-sm aperture:dark:bg-input/30 aperture:dark:disabled:bg-input/80 aperture:dark:aria-invalid:border-destructive/50 aperture:dark:aria-invalid:ring-destructive/40", className),
|
|
259
260
|
...props
|
|
260
261
|
});
|
|
261
262
|
}
|
|
@@ -265,32 +266,32 @@ function InputGroup({ className, ...props }) {
|
|
|
265
266
|
return /* @__PURE__ */ jsx("div", {
|
|
266
267
|
"data-slot": "input-group",
|
|
267
268
|
role: "group",
|
|
268
|
-
className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
|
|
269
|
+
className: cn("aperture:group/input-group aperture:relative aperture:flex aperture:h-8 aperture:w-full aperture:min-w-0 aperture:items-center aperture:rounded-lg aperture:border aperture:border-input aperture:transition-colors aperture:outline-none aperture:in-data-[slot=combobox-content]:focus-within:border-inherit aperture:in-data-[slot=combobox-content]:focus-within:ring-0 aperture:has-disabled:bg-input/50 aperture:has-disabled:opacity-50 aperture:has-[[data-slot=input-group-control]:focus-visible]:border-ring aperture:has-[[data-slot=input-group-control]:focus-visible]:ring-3 aperture:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 aperture:has-[[data-slot][aria-invalid=true]]:border-destructive aperture:has-[[data-slot][aria-invalid=true]]:ring-3 aperture:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 aperture:has-[>[data-align=block-end]]:h-auto aperture:has-[>[data-align=block-end]]:flex-col aperture:has-[>[data-align=block-start]]:h-auto aperture:has-[>[data-align=block-start]]:flex-col aperture:has-[>textarea]:h-auto aperture:dark:bg-input/30 aperture:dark:has-disabled:bg-input/80 aperture:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 aperture:has-[>[data-align=block-end]]:[&>input]:pt-3 aperture:has-[>[data-align=block-start]]:[&>input]:pb-3 aperture:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 aperture:has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
|
|
269
270
|
...props
|
|
270
271
|
});
|
|
271
272
|
}
|
|
272
|
-
cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
|
|
273
|
+
cva("aperture:flex aperture:h-auto aperture:cursor-text aperture:items-center aperture:justify-center aperture:gap-2 aperture:py-1.5 aperture:text-sm aperture:font-medium aperture:text-muted-foreground aperture:select-none aperture:group-data-[disabled=true]/input-group:opacity-50 aperture:[&>kbd]:rounded-[calc(var(--radius)-5px)] aperture:[&>svg:not([class*='size-'])]:size-4", {
|
|
273
274
|
variants: { align: {
|
|
274
|
-
"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
|
275
|
-
"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
|
276
|
-
"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [
|
|
277
|
-
"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [
|
|
275
|
+
"inline-start": "aperture:order-first aperture:pl-2 aperture:has-[>button]:ml-[-0.3rem] aperture:has-[>kbd]:ml-[-0.15rem]",
|
|
276
|
+
"inline-end": "aperture:order-last aperture:pr-2 aperture:has-[>button]:mr-[-0.3rem] aperture:has-[>kbd]:mr-[-0.15rem]",
|
|
277
|
+
"block-start": "aperture:order-first aperture:w-full aperture:justify-start aperture:px-2.5 aperture:pt-2 aperture:group-has-[>input]/input-group:pt-2 aperture:[[class~='aperture:border-b']]:pb-2",
|
|
278
|
+
"block-end": "aperture:order-last aperture:w-full aperture:justify-start aperture:px-2.5 aperture:pb-2 aperture:group-has-[>input]/input-group:pb-2 aperture:[[class~='aperture:border-t']]:pt-2"
|
|
278
279
|
} },
|
|
279
280
|
defaultVariants: { align: "inline-start" }
|
|
280
281
|
});
|
|
281
|
-
cva("flex items-center gap-2 text-sm shadow-none", {
|
|
282
|
+
cva("aperture:flex aperture:items-center aperture:gap-2 aperture:text-sm aperture:shadow-none", {
|
|
282
283
|
variants: { size: {
|
|
283
|
-
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
284
|
+
xs: "aperture:h-6 aperture:gap-1 aperture:rounded-[calc(var(--radius)-3px)] aperture:px-1.5 aperture:[&>svg:not([class*='size-'])]:size-3.5",
|
|
284
285
|
sm: "",
|
|
285
|
-
"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
|
286
|
-
"icon-sm": "size-8 p-0 has-[>svg]:p-0"
|
|
286
|
+
"icon-xs": "aperture:size-6 aperture:rounded-[calc(var(--radius)-3px)] aperture:p-0 aperture:has-[>svg]:p-0",
|
|
287
|
+
"icon-sm": "aperture:size-8 aperture:p-0 aperture:has-[>svg]:p-0"
|
|
287
288
|
} },
|
|
288
289
|
defaultVariants: { size: "xs" }
|
|
289
290
|
});
|
|
290
291
|
function InputGroupInput({ className, ...props }) {
|
|
291
292
|
return /* @__PURE__ */ jsx(Input$1, {
|
|
292
293
|
"data-slot": "input-group-control",
|
|
293
|
-
className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
|
|
294
|
+
className: cn("aperture:flex-1 aperture:rounded-none aperture:border-0 aperture:bg-transparent aperture:shadow-none aperture:ring-0 aperture:focus-visible:ring-0 aperture:disabled:bg-transparent aperture:aria-invalid:ring-0 aperture:dark:bg-transparent aperture:dark:disabled:bg-transparent", className),
|
|
294
295
|
...props
|
|
295
296
|
});
|
|
296
297
|
}
|
|
@@ -323,12 +324,12 @@ function TooltipContent({ className, side = "top", sideOffset = 4, align = "cent
|
|
|
323
324
|
alignOffset,
|
|
324
325
|
side,
|
|
325
326
|
sideOffset,
|
|
326
|
-
className: "isolate z-50",
|
|
327
|
+
className: "aperture:isolate aperture:z-50",
|
|
327
328
|
children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
|
|
328
329
|
"data-slot": "tooltip-content",
|
|
329
|
-
className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
|
|
330
|
+
className: cn("aperture:z-50 aperture:inline-flex aperture:w-fit aperture:max-w-xs aperture:origin-(--transform-origin) aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:bg-foreground aperture:px-3 aperture:py-1.5 aperture:text-xs aperture:text-background aperture:has-data-[slot=kbd]:pr-1.5 aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=inline-end]:slide-in-from-left-2 aperture:data-[side=inline-start]:slide-in-from-right-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:**:data-[slot=kbd]:relative aperture:**:data-[slot=kbd]:isolate aperture:**:data-[slot=kbd]:z-50 aperture:**:data-[slot=kbd]:rounded-sm aperture:data-[state=delayed-open]:animate-in aperture:data-[state=delayed-open]:fade-in-0 aperture:data-[state=delayed-open]:zoom-in-95 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
|
|
330
331
|
...props,
|
|
331
|
-
children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
|
|
332
|
+
children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "aperture:z-50 aperture:size-2.5 aperture:translate-y-[calc(-50%-2px)] aperture:rotate-45 aperture:rounded-[2px] aperture:bg-foreground aperture:fill-foreground aperture:data-[side=bottom]:top-1 aperture:data-[side=inline-end]:top-1/2! aperture:data-[side=inline-end]:-left-1 aperture:data-[side=inline-end]:-translate-y-1/2 aperture:data-[side=inline-start]:top-1/2! aperture:data-[side=inline-start]:-right-1 aperture:data-[side=inline-start]:-translate-y-1/2 aperture:data-[side=left]:top-1/2! aperture:data-[side=left]:-right-1 aperture:data-[side=left]:-translate-y-1/2 aperture:data-[side=right]:top-1/2! aperture:data-[side=right]:-left-1 aperture:data-[side=right]:-translate-y-1/2 aperture:data-[side=top]:-bottom-2.5" })]
|
|
332
333
|
})
|
|
333
334
|
})
|
|
334
335
|
});
|
|
@@ -356,10 +357,10 @@ function HoverCardContent({ className, side = "bottom", sideOffset = 4, align =
|
|
|
356
357
|
side,
|
|
357
358
|
sideOffset,
|
|
358
359
|
collisionPadding,
|
|
359
|
-
className: "isolate z-50",
|
|
360
|
+
className: "aperture:isolate aperture:z-50",
|
|
360
361
|
children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
|
|
361
362
|
"data-slot": "hover-card-content",
|
|
362
|
-
className: cn("z-50 w-64 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden", className),
|
|
363
|
+
className: cn("aperture:z-50 aperture:w-64 aperture:rounded-lg aperture:bg-popover aperture:p-2.5 aperture:text-sm aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:outline-hidden", className),
|
|
363
364
|
...props
|
|
364
365
|
})
|
|
365
366
|
})
|
|
@@ -368,21 +369,22 @@ function HoverCardContent({ className, side = "bottom", sideOffset = 4, align =
|
|
|
368
369
|
const createHoverCardHandle = PreviewCard.createHandle;
|
|
369
370
|
//#endregion
|
|
370
371
|
//#region ../ui/src/components/scroll-area.tsx
|
|
371
|
-
function ScrollArea$1({ className, viewportClassName, scrollbars = "vertical", children, ...props }) {
|
|
372
|
+
function ScrollArea$1({ className, viewportClassName, viewportRef, scrollbars = "vertical", children, ...props }) {
|
|
372
373
|
const vertical = scrollbars === "vertical" || scrollbars === "both";
|
|
373
374
|
const horizontal = scrollbars === "horizontal" || scrollbars === "both";
|
|
374
375
|
return /* @__PURE__ */ jsxs(ScrollArea.Root, {
|
|
375
376
|
"data-slot": "scroll-area",
|
|
376
|
-
className: cn("relative", className),
|
|
377
|
+
className: cn("aperture:relative", className),
|
|
377
378
|
...props,
|
|
378
379
|
children: [
|
|
379
380
|
/* @__PURE__ */ jsx(ScrollArea.Viewport, {
|
|
381
|
+
ref: viewportRef,
|
|
380
382
|
"data-slot": "scroll-area-viewport",
|
|
381
383
|
style: {
|
|
382
384
|
overflowX: horizontal ? "scroll" : "hidden",
|
|
383
385
|
overflowY: vertical ? "scroll" : "hidden"
|
|
384
386
|
},
|
|
385
|
-
className: cn("size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1", viewportClassName),
|
|
387
|
+
className: cn("aperture:size-full aperture:rounded-[inherit] aperture:transition-[color,box-shadow] aperture:outline-none aperture:focus-visible:ring-[3px] aperture:focus-visible:ring-ring/50 aperture:focus-visible:outline-1", viewportClassName),
|
|
386
388
|
children
|
|
387
389
|
}),
|
|
388
390
|
vertical ? /* @__PURE__ */ jsx(ScrollBar, {}) : null,
|
|
@@ -396,11 +398,11 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
|
|
|
396
398
|
"data-slot": "scroll-area-scrollbar",
|
|
397
399
|
"data-orientation": orientation,
|
|
398
400
|
orientation,
|
|
399
|
-
className: cn("flex touch-none p-px transition-colors select-none hover:bg-muted/50 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent", className),
|
|
401
|
+
className: cn("aperture:flex aperture:touch-none aperture:p-px aperture:transition-colors aperture:select-none aperture:hover:bg-muted/50 aperture:data-[orientation=horizontal]:h-2.5 aperture:data-[orientation=horizontal]:flex-col aperture:data-[orientation=horizontal]:border-t aperture:data-[orientation=horizontal]:border-t-transparent aperture:data-[orientation=vertical]:h-full aperture:data-[orientation=vertical]:w-2.5 aperture:data-[orientation=vertical]:border-l aperture:data-[orientation=vertical]:border-l-transparent", className),
|
|
400
402
|
...props,
|
|
401
403
|
children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
|
|
402
404
|
"data-slot": "scroll-area-thumb",
|
|
403
|
-
className: "relative flex-1 rounded-full bg-foreground/35 transition-colors hover:bg-foreground/55"
|
|
405
|
+
className: "aperture:relative aperture:flex-1 aperture:rounded-full aperture:bg-foreground/35 aperture:transition-colors aperture:hover:bg-foreground/55"
|
|
404
406
|
})
|
|
405
407
|
});
|
|
406
408
|
}
|
|
@@ -439,7 +441,7 @@ const BROWSER_TAB_DRAG_KIND = "browser-tab";
|
|
|
439
441
|
function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devToolsTargetIds, disabled, mutationDisabled, onActivate, onCreate, onDuplicate, onClose, onReload, onReorder, loadThumbnail = null }) {
|
|
440
442
|
const [previewHandle] = useState(() => createHoverCardHandle());
|
|
441
443
|
if (targets.length === 0) return /* @__PURE__ */ jsxs("div", {
|
|
442
|
-
className: "flex h-8 min-w-0 flex-1 items-center gap-2 px-2 text-xs text-muted-foreground",
|
|
444
|
+
className: "aperture:flex aperture:h-8 aperture:min-w-0 aperture:flex-1 aperture:items-center aperture:gap-2 aperture:px-2 aperture:text-xs aperture:text-muted-foreground",
|
|
443
445
|
children: [/* @__PURE__ */ jsx("span", { children: "No tabs" }), /* @__PURE__ */ jsx(NewTabButton, {
|
|
444
446
|
disabled: disabled || mutationDisabled,
|
|
445
447
|
onCreate
|
|
@@ -447,9 +449,9 @@ function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devTools
|
|
|
447
449
|
});
|
|
448
450
|
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScrollArea$1, {
|
|
449
451
|
scrollbars: "horizontal",
|
|
450
|
-
className: "h-8 min-w-0 flex-1",
|
|
452
|
+
className: "aperture:h-8 aperture:min-w-0 aperture:flex-1",
|
|
451
453
|
children: /* @__PURE__ */ jsxs("div", {
|
|
452
|
-
className: "flex min-w-max items-end gap-0.5 px-1 pt-1",
|
|
454
|
+
className: "aperture:flex aperture:min-w-max aperture:items-end aperture:gap-0.5 aperture:px-1 aperture:pt-1",
|
|
453
455
|
children: [targets.map((target, index) => {
|
|
454
456
|
return /* @__PURE__ */ jsx(BrowserTab, {
|
|
455
457
|
target,
|
|
@@ -526,7 +528,7 @@ function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutatio
|
|
|
526
528
|
const tab = /* @__PURE__ */ jsx("div", {
|
|
527
529
|
ref: tabRef,
|
|
528
530
|
"data-browser-tab": true,
|
|
529
|
-
className: cn("group relative flex h-7 w-52 max-w-[38vw] min-w-28 cursor-grab select-none items-center gap-1.5 rounded-t-lg border border-b-0 px-2 text-left text-xs transition-[background-color,border-color,color,opacity] active:cursor-grabbing", active ? "border-border bg-background text-foreground" : "border-transparent bg-muted/55 text-muted-foreground hover:bg-muted", dragging && "opacity-60"),
|
|
531
|
+
className: cn("aperture:group aperture:relative aperture:flex aperture:h-7 aperture:w-52 aperture:max-w-[38vw] aperture:min-w-28 aperture:cursor-grab aperture:select-none aperture:items-center aperture:gap-1.5 aperture:rounded-t-lg aperture:border aperture:border-b-0 aperture:px-2 aperture:text-left aperture:text-xs aperture:transition-[background-color,border-color,color,opacity] aperture:active:cursor-grabbing", active ? "aperture:border-border aperture:bg-background aperture:text-foreground" : "aperture:border-transparent aperture:bg-muted/55 aperture:text-muted-foreground aperture:hover:bg-muted", dragging && "aperture:opacity-60"),
|
|
530
532
|
onMouseDown: (event) => {
|
|
531
533
|
if (event.button === 1) event.preventDefault();
|
|
532
534
|
},
|
|
@@ -546,32 +548,32 @@ function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutatio
|
|
|
546
548
|
render: tab
|
|
547
549
|
}) : tab,
|
|
548
550
|
children: [
|
|
549
|
-
/* @__PURE__ */ jsx("span", { className: cn("pointer-events-none absolute inset-y-1 left-0 w-0.5 rounded-full bg-primary opacity-0", dropPlacement === "before" && "opacity-100") }),
|
|
550
|
-
/* @__PURE__ */ jsx("span", { className: cn("pointer-events-none absolute inset-y-1 right-0 w-0.5 rounded-full bg-primary opacity-0", dropPlacement === "after" && "opacity-100") }),
|
|
551
|
+
/* @__PURE__ */ jsx("span", { className: cn("aperture:pointer-events-none aperture:absolute aperture:inset-y-1 aperture:left-0 aperture:w-0.5 aperture:rounded-full aperture:bg-primary aperture:opacity-0", dropPlacement === "before" && "aperture:opacity-100") }),
|
|
552
|
+
/* @__PURE__ */ jsx("span", { className: cn("aperture:pointer-events-none aperture:absolute aperture:inset-y-1 aperture:right-0 aperture:w-0.5 aperture:rounded-full aperture:bg-primary aperture:opacity-0", dropPlacement === "after" && "aperture:opacity-100") }),
|
|
551
553
|
/* @__PURE__ */ jsxs("button", {
|
|
552
554
|
type: "button",
|
|
553
555
|
"aria-current": active ? "page" : void 0,
|
|
554
556
|
disabled,
|
|
555
|
-
className: "flex min-w-0 flex-1 items-center gap-1.5 text-left",
|
|
557
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-1 aperture:items-center aperture:gap-1.5 aperture:text-left",
|
|
556
558
|
onClick: () => onActivate(target.id),
|
|
557
559
|
children: [
|
|
558
560
|
/* @__PURE__ */ jsx(TabFavicon, { url: target.url }),
|
|
559
561
|
devToolsOpen ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Wrench, {
|
|
560
562
|
"aria-hidden": true,
|
|
561
|
-
className: "size-3.5 shrink-0 text-muted-foreground"
|
|
563
|
+
className: "aperture:size-3.5 aperture:shrink-0 aperture:text-muted-foreground"
|
|
562
564
|
}), /* @__PURE__ */ jsx("span", {
|
|
563
|
-
className: "sr-only",
|
|
565
|
+
className: "aperture:sr-only",
|
|
564
566
|
children: "DevTools open"
|
|
565
567
|
})] }) : null,
|
|
566
568
|
recording ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
|
|
567
569
|
"aria-hidden": true,
|
|
568
|
-
className: "size-2 shrink-0 rounded-full bg-destructive"
|
|
570
|
+
className: "aperture:size-2 aperture:shrink-0 aperture:rounded-full aperture:bg-destructive"
|
|
569
571
|
}), /* @__PURE__ */ jsx("span", {
|
|
570
|
-
className: "sr-only",
|
|
572
|
+
className: "aperture:sr-only",
|
|
571
573
|
children: "Recording"
|
|
572
574
|
})] }) : null,
|
|
573
575
|
/* @__PURE__ */ jsx("span", {
|
|
574
|
-
className: "min-w-0 truncate font-mono",
|
|
576
|
+
className: "aperture:min-w-0 aperture:truncate aperture:font-mono",
|
|
575
577
|
children: label
|
|
576
578
|
})
|
|
577
579
|
]
|
|
@@ -581,7 +583,7 @@ function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutatio
|
|
|
581
583
|
type: "button",
|
|
582
584
|
variant: "ghost",
|
|
583
585
|
size: "icon-xs",
|
|
584
|
-
className: "shrink-0 opacity-55 hover:opacity-100 group-hover:opacity-100",
|
|
586
|
+
className: "aperture:shrink-0 aperture:opacity-55 aperture:hover:opacity-100 aperture:group-hover:opacity-100",
|
|
585
587
|
"aria-label": "Close tab",
|
|
586
588
|
disabled: disabled || mutationDisabled,
|
|
587
589
|
onClick: () => onClose(target.id)
|
|
@@ -593,7 +595,7 @@ function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutatio
|
|
|
593
595
|
})] })
|
|
594
596
|
]
|
|
595
597
|
}), /* @__PURE__ */ jsxs(ContextMenuContent, {
|
|
596
|
-
className: "min-w-48",
|
|
598
|
+
className: "aperture:min-w-48",
|
|
597
599
|
children: [
|
|
598
600
|
/* @__PURE__ */ jsxs(ContextMenuGroup, { children: [
|
|
599
601
|
/* @__PURE__ */ jsx(ContextMenuItem, {
|
|
@@ -642,7 +644,7 @@ function NewTabButton({ disabled, onCreate }) {
|
|
|
642
644
|
type: "button",
|
|
643
645
|
variant: "ghost",
|
|
644
646
|
size: "icon-xs",
|
|
645
|
-
className: "mb-px shrink-0",
|
|
647
|
+
className: "aperture:mb-px aperture:shrink-0",
|
|
646
648
|
"aria-label": "New tab",
|
|
647
649
|
disabled,
|
|
648
650
|
onClick: onCreate
|
|
@@ -659,11 +661,11 @@ function TabFavicon({ url }) {
|
|
|
659
661
|
useEffect(() => {
|
|
660
662
|
setFailed(false);
|
|
661
663
|
}, [faviconUrl]);
|
|
662
|
-
if (!faviconUrl || failed) return /* @__PURE__ */ jsx(Globe2, { className: "size-4 shrink-0 text-muted-foreground" });
|
|
664
|
+
if (!faviconUrl || failed) return /* @__PURE__ */ jsx(Globe2, { className: "aperture:size-4 aperture:shrink-0 aperture:text-muted-foreground" });
|
|
663
665
|
return /* @__PURE__ */ jsx("img", {
|
|
664
666
|
src: faviconUrl,
|
|
665
667
|
alt: "",
|
|
666
|
-
className: "size-4 shrink-0",
|
|
668
|
+
className: "aperture:size-4 aperture:shrink-0",
|
|
667
669
|
onError: () => setFailed(true)
|
|
668
670
|
});
|
|
669
671
|
}
|
|
@@ -698,18 +700,18 @@ function TabPreview({ target, loadThumbnail }) {
|
|
|
698
700
|
align: "start",
|
|
699
701
|
sideOffset: 8,
|
|
700
702
|
collisionPadding: 16,
|
|
701
|
-
className: "pointer-events-none flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2 p-2",
|
|
703
|
+
className: "aperture:pointer-events-none aperture:flex aperture:w-80 aperture:max-w-[calc(100vw-2rem)] aperture:flex-col aperture:gap-2 aperture:p-2",
|
|
702
704
|
children: [
|
|
703
705
|
/* @__PURE__ */ jsx(TabThumbnail, {
|
|
704
706
|
targetId: target.id,
|
|
705
707
|
loadThumbnail
|
|
706
708
|
}),
|
|
707
709
|
/* @__PURE__ */ jsx("span", {
|
|
708
|
-
className: "truncate text-xs font-medium",
|
|
710
|
+
className: "aperture:truncate aperture:text-xs aperture:font-medium",
|
|
709
711
|
children: target.title || simplifyUrl(target.url)
|
|
710
712
|
}),
|
|
711
713
|
/* @__PURE__ */ jsx("span", {
|
|
712
|
-
className: "truncate font-mono text-xs text-muted-foreground",
|
|
714
|
+
className: "aperture:truncate aperture:font-mono aperture:text-xs aperture:text-muted-foreground",
|
|
713
715
|
children: target.url || "about:blank"
|
|
714
716
|
})
|
|
715
717
|
]
|
|
@@ -725,11 +727,11 @@ function TabThumbnail({ targetId, loadThumbnail }) {
|
|
|
725
727
|
return yield* Effect.never;
|
|
726
728
|
}).pipe(Effect.catch(() => Effect.void), Effect.scoped), [loadThumbnail, targetId]);
|
|
727
729
|
return /* @__PURE__ */ jsx("div", {
|
|
728
|
-
className: "aspect-video w-full overflow-hidden rounded-md bg-muted",
|
|
730
|
+
className: "aperture:aspect-video aperture:w-full aperture:overflow-hidden aperture:rounded-md aperture:bg-muted",
|
|
729
731
|
children: src ? /* @__PURE__ */ jsx("img", {
|
|
730
732
|
src,
|
|
731
733
|
alt: "",
|
|
732
|
-
className: "size-full object-cover object-top"
|
|
734
|
+
className: "aperture:size-full aperture:object-cover aperture:object-top"
|
|
733
735
|
}) : null
|
|
734
736
|
});
|
|
735
737
|
}
|
|
@@ -738,7 +740,7 @@ function TabThumbnail({ targetId, loadThumbnail }) {
|
|
|
738
740
|
function Label({ className, ...props }) {
|
|
739
741
|
return /* @__PURE__ */ jsx("label", {
|
|
740
742
|
"data-slot": "label",
|
|
741
|
-
className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
|
|
743
|
+
className: cn("aperture:flex aperture:items-center aperture:gap-2 aperture:text-sm aperture:leading-none aperture:font-medium aperture:select-none aperture:group-data-[disabled=true]:pointer-events-none aperture:group-data-[disabled=true]:opacity-50 aperture:peer-disabled:cursor-not-allowed aperture:peer-disabled:opacity-50", className),
|
|
742
744
|
...props
|
|
743
745
|
});
|
|
744
746
|
}
|
|
@@ -747,15 +749,15 @@ function Label({ className, ...props }) {
|
|
|
747
749
|
function FieldGroup({ className, ...props }) {
|
|
748
750
|
return /* @__PURE__ */ jsx("div", {
|
|
749
751
|
"data-slot": "field-group",
|
|
750
|
-
className: cn("group/field-group
|
|
752
|
+
className: cn("aperture:group/field-group aperture:@container/field-group aperture:flex aperture:w-full aperture:flex-col aperture:gap-5 aperture:data-[slot=checkbox-group]:gap-3 aperture:*:data-[slot=field-group]:gap-4", className),
|
|
751
753
|
...props
|
|
752
754
|
});
|
|
753
755
|
}
|
|
754
|
-
const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
|
|
756
|
+
const fieldVariants = cva("aperture:group/field aperture:flex aperture:w-full aperture:gap-2 aperture:data-[invalid=true]:text-destructive", {
|
|
755
757
|
variants: { orientation: {
|
|
756
|
-
vertical: "flex-col
|
|
757
|
-
horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start
|
|
758
|
-
responsive: "flex-col
|
|
758
|
+
vertical: "aperture:flex-col aperture:*:w-full aperture:[&>.sr-only]:w-auto",
|
|
759
|
+
horizontal: "aperture:flex-row aperture:items-center aperture:has-[>[data-slot=field-content]]:items-start aperture:*:data-[slot=field-label]:flex-auto aperture:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
760
|
+
responsive: "aperture:flex-col aperture:*:w-full aperture:@md/field-group:flex-row aperture:@md/field-group:items-center aperture:@md/field-group:*:w-auto aperture:@md/field-group:has-[>[data-slot=field-content]]:items-start aperture:@md/field-group:*:data-[slot=field-label]:flex-auto aperture:[&>.sr-only]:w-auto aperture:@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
|
|
759
761
|
} },
|
|
760
762
|
defaultVariants: { orientation: "vertical" }
|
|
761
763
|
});
|
|
@@ -771,7 +773,7 @@ function Field({ className, orientation = "vertical", ...props }) {
|
|
|
771
773
|
function FieldLabel({ className, ...props }) {
|
|
772
774
|
return /* @__PURE__ */ jsx(Label, {
|
|
773
775
|
"data-slot": "field-label",
|
|
774
|
-
className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border
|
|
776
|
+
className: cn("aperture:group/field-label aperture:peer/field-label aperture:flex aperture:w-fit aperture:gap-2 aperture:leading-snug aperture:group-data-[disabled=true]/field:opacity-50 aperture:has-data-checked:border-primary/30 aperture:has-data-checked:bg-primary/5 aperture:has-[>[data-slot=field]]:rounded-lg aperture:has-[>[data-slot=field]]:border aperture:*:data-[slot=field]:p-2.5 aperture:dark:has-data-checked:border-primary/20 aperture:dark:has-data-checked:bg-primary/10", "aperture:has-[>[data-slot=field]]:w-full aperture:has-[>[data-slot=field]]:flex-col", className),
|
|
775
777
|
...props
|
|
776
778
|
});
|
|
777
779
|
}
|
|
@@ -793,14 +795,14 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
|
|
|
793
795
|
return /* @__PURE__ */ jsx(Menu.Portal, {
|
|
794
796
|
container: usePortalContainer(),
|
|
795
797
|
children: /* @__PURE__ */ jsx(Menu.Positioner, {
|
|
796
|
-
className: "isolate z-50 outline-none",
|
|
798
|
+
className: "aperture:isolate aperture:z-50 aperture:outline-none",
|
|
797
799
|
align,
|
|
798
800
|
alignOffset,
|
|
799
801
|
side,
|
|
800
802
|
sideOffset,
|
|
801
803
|
children: /* @__PURE__ */ jsx(Menu.Popup, {
|
|
802
804
|
"data-slot": "dropdown-menu-content",
|
|
803
|
-
className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
805
|
+
className: cn("aperture:z-50 aperture:max-h-(--available-height) aperture:w-(--anchor-width) aperture:min-w-32 aperture:origin-(--transform-origin) aperture:overflow-x-hidden aperture:overflow-y-auto aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:outline-none aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=inline-end]:slide-in-from-left-2 aperture:data-[side=inline-start]:slide-in-from-right-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:overflow-hidden aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
|
|
804
806
|
...props
|
|
805
807
|
})
|
|
806
808
|
})
|
|
@@ -816,7 +818,7 @@ function DropdownMenuLabel({ className, inset, ...props }) {
|
|
|
816
818
|
return /* @__PURE__ */ jsx("div", {
|
|
817
819
|
"data-slot": "dropdown-menu-label",
|
|
818
820
|
"data-inset": inset,
|
|
819
|
-
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
821
|
+
className: cn("aperture:px-1.5 aperture:py-1 aperture:text-xs aperture:font-medium aperture:text-muted-foreground aperture:data-inset:pl-7", className),
|
|
820
822
|
...props
|
|
821
823
|
});
|
|
822
824
|
}
|
|
@@ -825,7 +827,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
|
825
827
|
"data-slot": "dropdown-menu-item",
|
|
826
828
|
"data-inset": inset,
|
|
827
829
|
"data-variant": variant,
|
|
828
|
-
className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
830
|
+
className: cn("aperture:group/dropdown-menu-item aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:px-1.5 aperture:py-1 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:not-data-[variant=destructive]:focus:**:text-accent-foreground aperture:data-inset:pl-7 aperture:data-[variant=destructive]:text-destructive aperture:data-[variant=destructive]:focus:bg-destructive/10 aperture:data-[variant=destructive]:focus:text-destructive aperture:dark:data-[variant=destructive]:focus:bg-destructive/20 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4 aperture:data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
829
831
|
...props
|
|
830
832
|
});
|
|
831
833
|
}
|
|
@@ -839,15 +841,15 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
|
839
841
|
return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
|
|
840
842
|
"data-slot": "dropdown-menu-sub-trigger",
|
|
841
843
|
"data-inset": inset,
|
|
842
|
-
className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
844
|
+
className: cn("aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:px-1.5 aperture:py-1 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:not-data-[variant=destructive]:focus:**:text-accent-foreground aperture:data-inset:pl-7 aperture:data-popup-open:bg-accent aperture:data-popup-open:text-accent-foreground aperture:data-open:bg-accent aperture:data-open:text-accent-foreground aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
|
|
843
845
|
...props,
|
|
844
|
-
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
|
|
846
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "aperture:ml-auto" })]
|
|
845
847
|
});
|
|
846
848
|
}
|
|
847
849
|
function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
|
|
848
850
|
return /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
849
851
|
"data-slot": "dropdown-menu-sub-content",
|
|
850
|
-
className: cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
852
|
+
className: cn("aperture:w-auto aperture:min-w-[96px] aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-lg aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
|
|
851
853
|
align,
|
|
852
854
|
alignOffset,
|
|
853
855
|
side,
|
|
@@ -859,11 +861,11 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
|
|
|
859
861
|
return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
|
|
860
862
|
"data-slot": "dropdown-menu-checkbox-item",
|
|
861
863
|
"data-inset": inset,
|
|
862
|
-
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
864
|
+
className: cn("aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:py-1 aperture:pr-8 aperture:pl-1.5 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:focus:**:text-accent-foreground aperture:data-inset:pl-7 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
|
|
863
865
|
checked,
|
|
864
866
|
...props,
|
|
865
867
|
children: [/* @__PURE__ */ jsx("span", {
|
|
866
|
-
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
868
|
+
className: "aperture:pointer-events-none aperture:absolute aperture:right-2 aperture:flex aperture:items-center aperture:justify-center",
|
|
867
869
|
"data-slot": "dropdown-menu-checkbox-item-indicator",
|
|
868
870
|
children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
869
871
|
}), children]
|
|
@@ -879,10 +881,10 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
|
|
|
879
881
|
return /* @__PURE__ */ jsxs(Menu.RadioItem, {
|
|
880
882
|
"data-slot": "dropdown-menu-radio-item",
|
|
881
883
|
"data-inset": inset,
|
|
882
|
-
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
884
|
+
className: cn("aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:py-1 aperture:pr-8 aperture:pl-1.5 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:focus:**:text-accent-foreground aperture:data-inset:pl-7 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
|
|
883
885
|
...props,
|
|
884
886
|
children: [/* @__PURE__ */ jsx("span", {
|
|
885
|
-
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
887
|
+
className: "aperture:pointer-events-none aperture:absolute aperture:right-2 aperture:flex aperture:items-center aperture:justify-center",
|
|
886
888
|
"data-slot": "dropdown-menu-radio-item-indicator",
|
|
887
889
|
children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
|
|
888
890
|
}), children]
|
|
@@ -891,7 +893,7 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
|
|
|
891
893
|
function DropdownMenuSeparator({ className, ...props }) {
|
|
892
894
|
return /* @__PURE__ */ jsx(Menu.Separator, {
|
|
893
895
|
"data-slot": "dropdown-menu-separator",
|
|
894
|
-
className: cn("
|
|
896
|
+
className: cn("aperture:-mx-1 aperture:my-1 aperture:h-px aperture:bg-border", className),
|
|
895
897
|
...props
|
|
896
898
|
});
|
|
897
899
|
}
|
|
@@ -955,7 +957,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
|
|
|
955
957
|
const recordingActive = runningRecordings.length > 0;
|
|
956
958
|
const viewportConnected = connected && control.collaboration.role !== "viewer";
|
|
957
959
|
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
|
|
958
|
-
className: "shrink-0 sm:hidden",
|
|
960
|
+
className: "aperture:shrink-0 aperture:sm:hidden",
|
|
959
961
|
children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
960
962
|
render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
|
|
961
963
|
type: "button",
|
|
@@ -969,7 +971,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
|
|
|
969
971
|
children: recordingActive ? "Browser menu, recording active" : "Browser menu"
|
|
970
972
|
})] }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
|
|
971
973
|
align: "end",
|
|
972
|
-
className: "w-72",
|
|
974
|
+
className: "aperture:w-72",
|
|
973
975
|
children: [
|
|
974
976
|
/* @__PURE__ */ jsx(RestMenuItems, {
|
|
975
977
|
control,
|
|
@@ -996,7 +998,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
|
|
|
996
998
|
]
|
|
997
999
|
})] })
|
|
998
1000
|
}), /* @__PURE__ */ jsxs("div", {
|
|
999
|
-
className: "hidden shrink-0 items-center gap-0.5 sm:flex",
|
|
1001
|
+
className: "aperture:hidden aperture:shrink-0 aperture:items-center aperture:gap-0.5 aperture:sm:flex",
|
|
1000
1002
|
children: [
|
|
1001
1003
|
/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
1002
1004
|
render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
|
|
@@ -1011,7 +1013,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
|
|
|
1011
1013
|
children: recordingActive ? "Recording in progress" : "Recording"
|
|
1012
1014
|
})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
1013
1015
|
align: "end",
|
|
1014
|
-
className: "w-72",
|
|
1016
|
+
className: "aperture:w-72",
|
|
1015
1017
|
children: /* @__PURE__ */ jsx(RecordingMenuItems, {
|
|
1016
1018
|
control,
|
|
1017
1019
|
connected,
|
|
@@ -1036,7 +1038,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
|
|
|
1036
1038
|
children: "Viewport and stream"
|
|
1037
1039
|
})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
1038
1040
|
align: "end",
|
|
1039
|
-
className: "w-56",
|
|
1041
|
+
className: "aperture:w-56",
|
|
1040
1042
|
children: /* @__PURE__ */ jsx(ViewportStreamMenuItems, {
|
|
1041
1043
|
control,
|
|
1042
1044
|
connected: viewportConnected,
|
|
@@ -1059,7 +1061,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
|
|
|
1059
1061
|
children: "More browser actions"
|
|
1060
1062
|
})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
1061
1063
|
align: "end",
|
|
1062
|
-
className: "w-48",
|
|
1064
|
+
className: "aperture:w-48",
|
|
1063
1065
|
children: /* @__PURE__ */ jsx(RestMenuItems, {
|
|
1064
1066
|
control,
|
|
1065
1067
|
cdpUrl,
|
|
@@ -1150,9 +1152,9 @@ function RecordingMenuItems({ control, connected, runningRecordings, now }) {
|
|
|
1150
1152
|
disabled: !canStart,
|
|
1151
1153
|
onClick: () => control.startRecording("tab"),
|
|
1152
1154
|
children: [/* @__PURE__ */ jsx(Circle, {}), /* @__PURE__ */ jsxs("span", {
|
|
1153
|
-
className: "flex min-w-0 flex-col",
|
|
1155
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-col",
|
|
1154
1156
|
children: [/* @__PURE__ */ jsx("span", { children: "Record this tab" }), /* @__PURE__ */ jsx("span", {
|
|
1155
|
-
className: "text-xs text-muted-foreground",
|
|
1157
|
+
className: "aperture:text-xs aperture:text-muted-foreground",
|
|
1156
1158
|
children: "Stay pinned to this target"
|
|
1157
1159
|
})]
|
|
1158
1160
|
})]
|
|
@@ -1161,9 +1163,9 @@ function RecordingMenuItems({ control, connected, runningRecordings, now }) {
|
|
|
1161
1163
|
disabled: !canStart,
|
|
1162
1164
|
onClick: () => control.startRecording("viewer"),
|
|
1163
1165
|
children: [/* @__PURE__ */ jsx(Monitor, {}), /* @__PURE__ */ jsxs("span", {
|
|
1164
|
-
className: "flex min-w-0 flex-col",
|
|
1166
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-col",
|
|
1165
1167
|
children: [/* @__PURE__ */ jsx("span", { children: "Record this viewer" }), /* @__PURE__ */ jsx("span", {
|
|
1166
|
-
className: "text-xs text-muted-foreground",
|
|
1168
|
+
className: "aperture:text-xs aperture:text-muted-foreground",
|
|
1167
1169
|
children: recordingAvailable ? "Follow tab switches" : "Owner connection required"
|
|
1168
1170
|
})]
|
|
1169
1171
|
})]
|
|
@@ -1172,9 +1174,9 @@ function RecordingMenuItems({ control, connected, runningRecordings, now }) {
|
|
|
1172
1174
|
const target = control.targets.find((candidate) => candidate.id === recording.targetId);
|
|
1173
1175
|
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
|
|
1174
1176
|
/* @__PURE__ */ jsx(DropdownMenuLabel, { children: /* @__PURE__ */ jsxs("span", {
|
|
1175
|
-
className: "flex min-w-0 items-center justify-between gap-2",
|
|
1177
|
+
className: "aperture:flex aperture:min-w-0 aperture:items-center aperture:justify-between aperture:gap-2",
|
|
1176
1178
|
children: [/* @__PURE__ */ jsxs("span", {
|
|
1177
|
-
className: "truncate",
|
|
1179
|
+
className: "aperture:truncate",
|
|
1178
1180
|
children: [
|
|
1179
1181
|
recording.mode === "viewer" ? "Viewer" : "Tab",
|
|
1180
1182
|
":",
|
|
@@ -1182,7 +1184,7 @@ function RecordingMenuItems({ control, connected, runningRecordings, now }) {
|
|
|
1182
1184
|
target?.title || recording.targetId.slice(0, 8)
|
|
1183
1185
|
]
|
|
1184
1186
|
}), /* @__PURE__ */ jsx("span", {
|
|
1185
|
-
className: "shrink-0 tabular-nums",
|
|
1187
|
+
className: "aperture:shrink-0 aperture:tabular-nums",
|
|
1186
1188
|
children: formatElapsed(recording.startedAt, now)
|
|
1187
1189
|
})]
|
|
1188
1190
|
}) }),
|
|
@@ -1232,7 +1234,7 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
|
|
|
1232
1234
|
const source = control.mediaPath === "websocket-live" ? "jpeg" : qualityUpdatesEnabled ? settings?.profile : "webrtc";
|
|
1233
1235
|
const disabled = control.mediaSwitching || control.phase !== "connected";
|
|
1234
1236
|
return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Gauge, {}), "Stream"] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
|
|
1235
|
-
className: "w-64",
|
|
1237
|
+
className: "aperture:w-64",
|
|
1236
1238
|
children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
|
|
1237
1239
|
/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Source" }),
|
|
1238
1240
|
/* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
|
|
@@ -1260,9 +1262,9 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
|
|
|
1260
1262
|
value: "webrtc",
|
|
1261
1263
|
disabled,
|
|
1262
1264
|
children: /* @__PURE__ */ jsxs("span", {
|
|
1263
|
-
className: "flex min-w-0 flex-col",
|
|
1265
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-col",
|
|
1264
1266
|
children: [/* @__PURE__ */ jsx("span", { children: "WebRTC" }), /* @__PURE__ */ jsx("span", {
|
|
1265
|
-
className: "text-xs text-muted-foreground",
|
|
1267
|
+
className: "aperture:text-xs aperture:text-muted-foreground",
|
|
1266
1268
|
children: "Live video"
|
|
1267
1269
|
})]
|
|
1268
1270
|
})
|
|
@@ -1271,9 +1273,9 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
|
|
|
1271
1273
|
value: profile.id,
|
|
1272
1274
|
disabled: disabled || !settings,
|
|
1273
1275
|
children: /* @__PURE__ */ jsxs("span", {
|
|
1274
|
-
className: "flex min-w-0 flex-col",
|
|
1276
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-col",
|
|
1275
1277
|
children: [/* @__PURE__ */ jsx("span", { children: profile.label }), /* @__PURE__ */ jsxs("span", {
|
|
1276
|
-
className: "text-xs text-muted-foreground",
|
|
1278
|
+
className: "aperture:text-xs aperture:text-muted-foreground",
|
|
1277
1279
|
children: [profile.codec, " · WebRTC"]
|
|
1278
1280
|
})]
|
|
1279
1281
|
})
|
|
@@ -1282,9 +1284,9 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
|
|
|
1282
1284
|
value: "jpeg",
|
|
1283
1285
|
disabled,
|
|
1284
1286
|
children: /* @__PURE__ */ jsxs("span", {
|
|
1285
|
-
className: "flex min-w-0 flex-col",
|
|
1287
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-col",
|
|
1286
1288
|
children: [/* @__PURE__ */ jsx("span", { children: "JPEG" }), /* @__PURE__ */ jsx("span", {
|
|
1287
|
-
className: "text-xs text-muted-foreground",
|
|
1289
|
+
className: "aperture:text-xs aperture:text-muted-foreground",
|
|
1288
1290
|
children: "WebSocket raster stream"
|
|
1289
1291
|
})]
|
|
1290
1292
|
})
|
|
@@ -1307,9 +1309,9 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
|
|
|
1307
1309
|
value: preset.id,
|
|
1308
1310
|
disabled,
|
|
1309
1311
|
children: /* @__PURE__ */ jsxs("span", {
|
|
1310
|
-
className: "flex min-w-0 flex-col",
|
|
1312
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-col",
|
|
1311
1313
|
children: [/* @__PURE__ */ jsx("span", { children: preset.label }), /* @__PURE__ */ jsx("span", {
|
|
1312
|
-
className: "text-xs text-muted-foreground",
|
|
1314
|
+
className: "aperture:text-xs aperture:text-muted-foreground",
|
|
1313
1315
|
children: preset.detail
|
|
1314
1316
|
})]
|
|
1315
1317
|
})
|
|
@@ -1341,7 +1343,7 @@ function ViewportPausedIndicator({ control, connected }) {
|
|
|
1341
1343
|
type: "button",
|
|
1342
1344
|
variant: "ghost",
|
|
1343
1345
|
size: "icon-sm",
|
|
1344
|
-
className: "text-muted-foreground",
|
|
1346
|
+
className: "aperture:text-muted-foreground",
|
|
1345
1347
|
"aria-label": `Auto-size paused. ${sizeController}`
|
|
1346
1348
|
}) }),
|
|
1347
1349
|
children: /* @__PURE__ */ jsx(MonitorPause, {})
|
|
@@ -1350,7 +1352,7 @@ function ViewportPausedIndicator({ control, connected }) {
|
|
|
1350
1352
|
children: sizeController
|
|
1351
1353
|
})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
1352
1354
|
align: "end",
|
|
1353
|
-
className: "w-56",
|
|
1355
|
+
className: "aperture:w-56",
|
|
1354
1356
|
children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: sizeController }), /* @__PURE__ */ jsxs(DropdownMenuItem, {
|
|
1355
1357
|
disabled: !connected,
|
|
1356
1358
|
onClick: () => control.takeOverViewport(),
|
|
@@ -1361,7 +1363,7 @@ function ViewportPausedIndicator({ control, connected }) {
|
|
|
1361
1363
|
function ViewportMenu({ control, connected }) {
|
|
1362
1364
|
const sizeController = viewportSizeController(control);
|
|
1363
1365
|
return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Monitor, {}), "Viewport"] }), /* @__PURE__ */ jsxs(DropdownMenuSubContent, {
|
|
1364
|
-
className: "w-64",
|
|
1366
|
+
className: "aperture:w-64",
|
|
1365
1367
|
children: [
|
|
1366
1368
|
/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Viewport" }),
|
|
1367
1369
|
/* @__PURE__ */ jsxs(DropdownMenuItem, {
|
|
@@ -1374,9 +1376,9 @@ function ViewportMenu({ control, connected }) {
|
|
|
1374
1376
|
checked: control.viewportAutoSync,
|
|
1375
1377
|
onCheckedChange: control.setViewportAutoSync,
|
|
1376
1378
|
children: [/* @__PURE__ */ jsx(Monitor, {}), /* @__PURE__ */ jsxs("span", {
|
|
1377
|
-
className: "flex min-w-0 flex-col",
|
|
1379
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-col",
|
|
1378
1380
|
children: [/* @__PURE__ */ jsx("span", { children: "Auto-size" }), sizeController !== null ? /* @__PURE__ */ jsx("span", {
|
|
1379
|
-
className: "truncate text-xs text-muted-foreground",
|
|
1381
|
+
className: "aperture:truncate aperture:text-xs aperture:text-muted-foreground",
|
|
1380
1382
|
children: sizeController
|
|
1381
1383
|
}) : null]
|
|
1382
1384
|
})]
|
|
@@ -1447,16 +1449,16 @@ function CustomViewportSettings({ viewport, connected, onApply }) {
|
|
|
1447
1449
|
});
|
|
1448
1450
|
const unchanged = nextViewport ? viewport.width === nextViewport.width && viewport.height === nextViewport.height && viewport.deviceScaleFactor === nextViewport.deviceScaleFactor : false;
|
|
1449
1451
|
return /* @__PURE__ */ jsxs("div", {
|
|
1450
|
-
className: "grid gap-2 px-2 py-1.5",
|
|
1452
|
+
className: "aperture:grid aperture:gap-2 aperture:px-2 aperture:py-1.5",
|
|
1451
1453
|
onClick: (event) => event.stopPropagation(),
|
|
1452
1454
|
onKeyDown: (event) => event.stopPropagation(),
|
|
1453
1455
|
children: [
|
|
1454
1456
|
/* @__PURE__ */ jsx(DropdownMenuLabel, {
|
|
1455
|
-
className: "px-0",
|
|
1457
|
+
className: "aperture:px-0",
|
|
1456
1458
|
children: "Custom"
|
|
1457
1459
|
}),
|
|
1458
1460
|
/* @__PURE__ */ jsxs("div", {
|
|
1459
|
-
className: "grid grid-cols-3 gap-2",
|
|
1461
|
+
className: "aperture:grid aperture:grid-cols-3 aperture:gap-2",
|
|
1460
1462
|
children: [
|
|
1461
1463
|
/* @__PURE__ */ jsx(StreamNumberField, {
|
|
1462
1464
|
label: "Width",
|
|
@@ -1478,7 +1480,7 @@ function CustomViewportSettings({ viewport, connected, onApply }) {
|
|
|
1478
1480
|
/* @__PURE__ */ jsx(Button$1, {
|
|
1479
1481
|
type: "button",
|
|
1480
1482
|
size: "sm",
|
|
1481
|
-
className: "h-7",
|
|
1483
|
+
className: "aperture:h-7",
|
|
1482
1484
|
disabled: !connected || !nextViewport || unchanged,
|
|
1483
1485
|
onClick: () => {
|
|
1484
1486
|
if (nextViewport) onApply(nextViewport);
|
|
@@ -1501,16 +1503,16 @@ function CustomStreamSettings({ settings, disabled, onApply }) {
|
|
|
1501
1503
|
});
|
|
1502
1504
|
const unchanged = settings.fps === nextSettings?.fps && settings.bitrateKbps === nextSettings?.bitrateKbps;
|
|
1503
1505
|
return /* @__PURE__ */ jsxs(FieldGroup, {
|
|
1504
|
-
className: "gap-2 px-2 py-1.5",
|
|
1506
|
+
className: "aperture:gap-2 aperture:px-2 aperture:py-1.5",
|
|
1505
1507
|
onClick: (event) => event.stopPropagation(),
|
|
1506
1508
|
onKeyDown: (event) => event.stopPropagation(),
|
|
1507
1509
|
children: [
|
|
1508
1510
|
/* @__PURE__ */ jsx(DropdownMenuLabel, {
|
|
1509
|
-
className: "px-0",
|
|
1511
|
+
className: "aperture:px-0",
|
|
1510
1512
|
children: "Custom"
|
|
1511
1513
|
}),
|
|
1512
1514
|
/* @__PURE__ */ jsxs("div", {
|
|
1513
|
-
className: "grid grid-cols-2 gap-2",
|
|
1515
|
+
className: "aperture:grid aperture:grid-cols-2 aperture:gap-2",
|
|
1514
1516
|
children: [/* @__PURE__ */ jsx(StreamNumberField, {
|
|
1515
1517
|
label: "FPS",
|
|
1516
1518
|
value: fps,
|
|
@@ -1524,7 +1526,7 @@ function CustomStreamSettings({ settings, disabled, onApply }) {
|
|
|
1524
1526
|
/* @__PURE__ */ jsx(Button$1, {
|
|
1525
1527
|
type: "button",
|
|
1526
1528
|
size: "sm",
|
|
1527
|
-
className: "h-7 w-full",
|
|
1529
|
+
className: "aperture:h-7 aperture:w-full",
|
|
1528
1530
|
disabled: disabled || !nextSettings || unchanged,
|
|
1529
1531
|
onClick: () => {
|
|
1530
1532
|
if (nextSettings) onApply({
|
|
@@ -1540,7 +1542,7 @@ function CustomStreamSettings({ settings, disabled, onApply }) {
|
|
|
1540
1542
|
function StreamNumberField({ label, value, onChange }) {
|
|
1541
1543
|
const id = useId();
|
|
1542
1544
|
return /* @__PURE__ */ jsxs(Field, {
|
|
1543
|
-
className: "gap-1",
|
|
1545
|
+
className: "aperture:gap-1",
|
|
1544
1546
|
children: [/* @__PURE__ */ jsx(FieldLabel, {
|
|
1545
1547
|
htmlFor: id,
|
|
1546
1548
|
children: label
|
|
@@ -1551,14 +1553,14 @@ function StreamNumberField({ label, value, onChange }) {
|
|
|
1551
1553
|
value,
|
|
1552
1554
|
onChange: (event) => onChange(digitsOnly(event.currentTarget.value)),
|
|
1553
1555
|
onFocus: (event) => event.currentTarget.select(),
|
|
1554
|
-
className: "h-7"
|
|
1556
|
+
className: "aperture:h-7"
|
|
1555
1557
|
})]
|
|
1556
1558
|
});
|
|
1557
1559
|
}
|
|
1558
1560
|
function ViewportScaleField({ label, value, onChange }) {
|
|
1559
1561
|
const id = useId();
|
|
1560
1562
|
return /* @__PURE__ */ jsxs(Field, {
|
|
1561
|
-
className: "gap-1",
|
|
1563
|
+
className: "aperture:gap-1",
|
|
1562
1564
|
children: [/* @__PURE__ */ jsx(FieldLabel, {
|
|
1563
1565
|
htmlFor: id,
|
|
1564
1566
|
children: label
|
|
@@ -1569,7 +1571,7 @@ function ViewportScaleField({ label, value, onChange }) {
|
|
|
1569
1571
|
value,
|
|
1570
1572
|
onChange: (event) => onChange(decimalNumber(event.currentTarget.value)),
|
|
1571
1573
|
onFocus: (event) => event.currentTarget.select(),
|
|
1572
|
-
className: "h-7"
|
|
1574
|
+
className: "aperture:h-7"
|
|
1573
1575
|
})]
|
|
1574
1576
|
});
|
|
1575
1577
|
}
|
|
@@ -1628,28 +1630,28 @@ function Avatar$1({ className, size = "default", ...props }) {
|
|
|
1628
1630
|
return /* @__PURE__ */ jsx(Avatar.Root, {
|
|
1629
1631
|
"data-slot": "avatar",
|
|
1630
1632
|
"data-size": size,
|
|
1631
|
-
className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
|
|
1633
|
+
className: cn("aperture:group/avatar aperture:relative aperture:flex aperture:size-8 aperture:shrink-0 aperture:rounded-full aperture:select-none aperture:after:absolute aperture:after:inset-0 aperture:after:rounded-full aperture:after:border aperture:after:border-border aperture:after:mix-blend-darken aperture:data-[size=lg]:size-10 aperture:data-[size=sm]:size-6 aperture:dark:after:mix-blend-lighten", className),
|
|
1632
1634
|
...props
|
|
1633
1635
|
});
|
|
1634
1636
|
}
|
|
1635
1637
|
function AvatarImage({ className, ...props }) {
|
|
1636
1638
|
return /* @__PURE__ */ jsx(Avatar.Image, {
|
|
1637
1639
|
"data-slot": "avatar-image",
|
|
1638
|
-
className: cn("aspect-square size-full rounded-full object-cover", className),
|
|
1640
|
+
className: cn("aperture:aspect-square aperture:size-full aperture:rounded-full aperture:object-cover", className),
|
|
1639
1641
|
...props
|
|
1640
1642
|
});
|
|
1641
1643
|
}
|
|
1642
1644
|
function AvatarFallback({ className, ...props }) {
|
|
1643
1645
|
return /* @__PURE__ */ jsx(Avatar.Fallback, {
|
|
1644
1646
|
"data-slot": "avatar-fallback",
|
|
1645
|
-
className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
|
|
1647
|
+
className: cn("aperture:flex aperture:size-full aperture:items-center aperture:justify-center aperture:rounded-full aperture:bg-muted aperture:text-sm aperture:text-muted-foreground aperture:group-data-[size=sm]/avatar:text-xs", className),
|
|
1646
1648
|
...props
|
|
1647
1649
|
});
|
|
1648
1650
|
}
|
|
1649
1651
|
function AvatarBadge({ className, ...props }) {
|
|
1650
1652
|
return /* @__PURE__ */ jsx("span", {
|
|
1651
1653
|
"data-slot": "avatar-badge",
|
|
1652
|
-
className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
|
|
1654
|
+
className: cn("aperture:absolute aperture:right-0 aperture:bottom-0 aperture:z-10 aperture:inline-flex aperture:items-center aperture:justify-center aperture:rounded-full aperture:bg-primary aperture:text-primary-foreground aperture:bg-blend-color aperture:ring-2 aperture:ring-background aperture:select-none", "aperture:group-data-[size=sm]/avatar:size-2 aperture:group-data-[size=sm]/avatar:[&>svg]:hidden", "aperture:group-data-[size=default]/avatar:size-2.5 aperture:group-data-[size=default]/avatar:[&>svg]:size-2", "aperture:group-data-[size=lg]/avatar:size-3 aperture:group-data-[size=lg]/avatar:[&>svg]:size-2", className),
|
|
1653
1655
|
...props
|
|
1654
1656
|
});
|
|
1655
1657
|
}
|
|
@@ -1675,10 +1677,10 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
|
|
|
1675
1677
|
alignOffset,
|
|
1676
1678
|
side,
|
|
1677
1679
|
sideOffset,
|
|
1678
|
-
className: "isolate z-50",
|
|
1680
|
+
className: "aperture:isolate aperture:z-50",
|
|
1679
1681
|
children: /* @__PURE__ */ jsx(Popover.Popup, {
|
|
1680
1682
|
"data-slot": "popover-content",
|
|
1681
|
-
className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
1683
|
+
className: cn("aperture:z-50 aperture:flex aperture:w-72 aperture:origin-(--transform-origin) aperture:flex-col aperture:gap-2.5 aperture:rounded-lg aperture:bg-popover aperture:p-2.5 aperture:text-sm aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:outline-hidden aperture:duration-100 aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=inline-end]:slide-in-from-left-2 aperture:data-[side=inline-start]:slide-in-from-right-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
|
|
1682
1684
|
...props
|
|
1683
1685
|
})
|
|
1684
1686
|
})
|
|
@@ -1687,7 +1689,7 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
|
|
|
1687
1689
|
function PopoverTitle({ className, ...props }) {
|
|
1688
1690
|
return /* @__PURE__ */ jsx(Popover.Title, {
|
|
1689
1691
|
"data-slot": "popover-title",
|
|
1690
|
-
className: cn("font-medium", className),
|
|
1692
|
+
className: cn("aperture:font-medium", className),
|
|
1691
1693
|
...props
|
|
1692
1694
|
});
|
|
1693
1695
|
}
|
|
@@ -1705,10 +1707,10 @@ function CollaborationPresence({ collaboration }) {
|
|
|
1705
1707
|
const overflow = participants.length - visible.length;
|
|
1706
1708
|
if (visible.length === 0) return null;
|
|
1707
1709
|
return /* @__PURE__ */ jsxs("div", {
|
|
1708
|
-
className: "group flex shrink-0 items-center px-2",
|
|
1710
|
+
className: "aperture:group aperture:flex aperture:shrink-0 aperture:items-center aperture:px-2",
|
|
1709
1711
|
"aria-label": "Session participants",
|
|
1710
1712
|
children: [overflow > 0 ? /* @__PURE__ */ jsx("div", {
|
|
1711
|
-
className: "relative transition-[margin] duration-200",
|
|
1713
|
+
className: "aperture:relative aperture:transition-[margin] aperture:duration-200",
|
|
1712
1714
|
style: { zIndex: visible.length + 1 },
|
|
1713
1715
|
children: /* @__PURE__ */ jsx(OverflowParticipants, {
|
|
1714
1716
|
overflow,
|
|
@@ -1716,7 +1718,7 @@ function CollaborationPresence({ collaboration }) {
|
|
|
1716
1718
|
collaboration
|
|
1717
1719
|
})
|
|
1718
1720
|
}) : null, visible.map((participant, index) => /* @__PURE__ */ jsx("div", {
|
|
1719
|
-
className: cn("relative transition-[margin] duration-200", (index > 0 || overflow > 0) && "
|
|
1721
|
+
className: cn("aperture:relative aperture:transition-[margin] aperture:duration-200", (index > 0 || overflow > 0) && "aperture:-ml-4 aperture:group-hover:ml-0 aperture:group-focus-within:ml-0"),
|
|
1720
1722
|
style: { zIndex: visible.length - index },
|
|
1721
1723
|
children: /* @__PURE__ */ jsx(ParticipantButton, {
|
|
1722
1724
|
participant,
|
|
@@ -1731,18 +1733,18 @@ function OverflowParticipants({ overflow, participants, collaboration }) {
|
|
|
1731
1733
|
type: "button",
|
|
1732
1734
|
variant: "ghost",
|
|
1733
1735
|
size: "icon-sm",
|
|
1734
|
-
className: "shrink-0 rounded-full border bg-background text-[0.65rem] text-muted-foreground",
|
|
1736
|
+
className: "aperture:shrink-0 aperture:rounded-full aperture:border aperture:bg-background aperture:text-[0.65rem] aperture:text-muted-foreground",
|
|
1735
1737
|
"aria-label": `${overflow} more participants`
|
|
1736
1738
|
}),
|
|
1737
1739
|
children: ["+", overflow]
|
|
1738
1740
|
}), /* @__PURE__ */ jsxs(PopoverContent, {
|
|
1739
1741
|
align: "end",
|
|
1740
|
-
className: "w-auto gap-2",
|
|
1742
|
+
className: "aperture:w-auto aperture:gap-2",
|
|
1741
1743
|
children: [/* @__PURE__ */ jsx(PopoverTitle, {
|
|
1742
|
-
className: "text-xs text-muted-foreground",
|
|
1744
|
+
className: "aperture:text-xs aperture:text-muted-foreground",
|
|
1743
1745
|
children: "Everyone"
|
|
1744
1746
|
}), /* @__PURE__ */ jsx("div", {
|
|
1745
|
-
className: "flex flex-wrap items-center gap-1",
|
|
1747
|
+
className: "aperture:flex aperture:flex-wrap aperture:items-center aperture:gap-1",
|
|
1746
1748
|
children: participants.map((participant) => /* @__PURE__ */ jsx(ParticipantButton, {
|
|
1747
1749
|
participant,
|
|
1748
1750
|
collaboration
|
|
@@ -1757,13 +1759,13 @@ function ParticipantButton({ participant, collaboration }) {
|
|
|
1757
1759
|
const label = local ? `${participant.name} (you)` : !followable ? participant.name : following ? `${participant.name} · click to stop following` : `${participant.name} · click to follow`;
|
|
1758
1760
|
return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
1759
1761
|
render: local || !followable ? /* @__PURE__ */ jsx("span", {
|
|
1760
|
-
className: "inline-flex size-7 shrink-0 items-center justify-center rounded-full",
|
|
1762
|
+
className: "aperture:inline-flex aperture:size-7 aperture:shrink-0 aperture:items-center aperture:justify-center aperture:rounded-full",
|
|
1761
1763
|
"aria-label": label
|
|
1762
1764
|
}) : /* @__PURE__ */ jsx(Button$1, {
|
|
1763
1765
|
type: "button",
|
|
1764
1766
|
variant: following ? "secondary" : "ghost",
|
|
1765
1767
|
size: "icon-sm",
|
|
1766
|
-
className: "shrink-0 rounded-full p-0",
|
|
1768
|
+
className: "aperture:shrink-0 aperture:rounded-full aperture:p-0",
|
|
1767
1769
|
"aria-label": label,
|
|
1768
1770
|
"aria-pressed": following,
|
|
1769
1771
|
onClick: () => collaboration.follow(following ? null : participant.clientId)
|
|
@@ -1781,7 +1783,7 @@ function ParticipantAvatar({ participant, following }) {
|
|
|
1781
1783
|
const controlClaimed = participant.holdingInput && participant.leaseMode === "explicit";
|
|
1782
1784
|
return /* @__PURE__ */ jsxs(Avatar$1, {
|
|
1783
1785
|
size: "sm",
|
|
1784
|
-
className: cn("shrink-0 ring-2 ring-background", following && "ring-ring"),
|
|
1786
|
+
className: cn("aperture:shrink-0 aperture:ring-2 aperture:ring-background", following && "aperture:ring-ring"),
|
|
1785
1787
|
children: [
|
|
1786
1788
|
/* @__PURE__ */ jsx(AvatarImage, {
|
|
1787
1789
|
src: gravatarURL(participant.avatarHash),
|
|
@@ -1789,7 +1791,7 @@ function ParticipantAvatar({ participant, following }) {
|
|
|
1789
1791
|
}),
|
|
1790
1792
|
/* @__PURE__ */ jsx(AvatarFallback, { children: initials(participant.name) }),
|
|
1791
1793
|
participant.holdingInput ? /* @__PURE__ */ jsx(AvatarBadge, {
|
|
1792
|
-
className: cn("bg-emerald-500", controlClaimed && "group-data-[size=sm]/avatar:size-3 group-data-[size=sm]/avatar:[&>svg]:!block group-data-[size=sm]/avatar:[&>svg]:size-2"),
|
|
1794
|
+
className: cn("aperture:bg-emerald-500", controlClaimed && "aperture:group-data-[size=sm]/avatar:size-3 aperture:group-data-[size=sm]/avatar:[&>svg]:!block aperture:group-data-[size=sm]/avatar:[&>svg]:size-2"),
|
|
1793
1795
|
title: controlClaimed ? "Control claimed" : "Has input control",
|
|
1794
1796
|
children: controlClaimed ? /* @__PURE__ */ jsx(Lock, {}) : /* @__PURE__ */ jsx(Radio, {})
|
|
1795
1797
|
}) : null
|
|
@@ -1812,6 +1814,8 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
|
|
|
1812
1814
|
const browserMutationEnabled = connected && collaborationRole !== "viewer";
|
|
1813
1815
|
const drawingAvailable = connected && control.collaboration.phase === "connected" && Boolean(control.activeTargetId);
|
|
1814
1816
|
const loading = control.activeTarget?.loading ?? false;
|
|
1817
|
+
const canGoBack = control.activeTarget?.canGoBack ?? true;
|
|
1818
|
+
const canGoForward = control.activeTarget?.canGoForward ?? true;
|
|
1815
1819
|
const runningRecordings = control.recordings.filter((recording) => recording.status === "starting" || recording.status === "running");
|
|
1816
1820
|
const hasRunningRecordings = runningRecordings.length > 0;
|
|
1817
1821
|
const recordingTargetIds = new Set(runningRecordings.map((recording) => recording.targetId));
|
|
@@ -1824,10 +1828,10 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
|
|
|
1824
1828
|
setUrlDraft(null);
|
|
1825
1829
|
}
|
|
1826
1830
|
return /* @__PURE__ */ jsxs("div", {
|
|
1827
|
-
className: "flex min-w-0 flex-col bg-background",
|
|
1831
|
+
className: "aperture:flex aperture:min-w-0 aperture:flex-col aperture:bg-background",
|
|
1828
1832
|
children: [leading || features.tabs || features.presence ? /* @__PURE__ */ jsxs("div", {
|
|
1829
1833
|
"data-workbench-titlebar": true,
|
|
1830
|
-
className: "flex min-w-0 shrink-0 items-stretch border-b bg-muted/35",
|
|
1834
|
+
className: "aperture:flex aperture:min-w-0 aperture:shrink-0 aperture:items-stretch aperture:border-b aperture:bg-muted/35",
|
|
1831
1835
|
children: [
|
|
1832
1836
|
leading,
|
|
1833
1837
|
features.tabs ? /* @__PURE__ */ jsx(BrowserTabStrip, {
|
|
@@ -1844,24 +1848,24 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
|
|
|
1844
1848
|
onReload: control.reload,
|
|
1845
1849
|
onReorder: control.reorderTargets,
|
|
1846
1850
|
loadThumbnail: control.loadTargetThumbnail
|
|
1847
|
-
}) : /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1" }),
|
|
1851
|
+
}) : /* @__PURE__ */ jsx("div", { className: "aperture:min-w-0 aperture:flex-1" }),
|
|
1848
1852
|
features.presence ? /* @__PURE__ */ jsx(CollaborationPresence, { collaboration: control.collaboration }) : null
|
|
1849
1853
|
]
|
|
1850
1854
|
}) : null, features.navigation || features.addressBar || features.drawing || features.devTools || features.menus ? /* @__PURE__ */ jsxs("div", {
|
|
1851
|
-
className: "flex h-9 items-center gap-1 px-1.5",
|
|
1855
|
+
className: "aperture:flex aperture:h-9 aperture:items-center aperture:gap-1 aperture:px-1.5",
|
|
1852
1856
|
children: [
|
|
1853
1857
|
features.navigation ? /* @__PURE__ */ jsxs("div", {
|
|
1854
|
-
className: "flex shrink-0 items-center gap-0.5",
|
|
1858
|
+
className: "aperture:flex aperture:shrink-0 aperture:items-center aperture:gap-0.5",
|
|
1855
1859
|
children: [
|
|
1856
1860
|
/* @__PURE__ */ jsx(ToolbarButton, {
|
|
1857
1861
|
label: "Back",
|
|
1858
|
-
disabled: !browserMutationEnabled,
|
|
1862
|
+
disabled: !browserMutationEnabled || !canGoBack,
|
|
1859
1863
|
onClick: () => control.historyBack(),
|
|
1860
1864
|
children: /* @__PURE__ */ jsx(ArrowLeft, {})
|
|
1861
1865
|
}),
|
|
1862
1866
|
/* @__PURE__ */ jsx(ToolbarButton, {
|
|
1863
1867
|
label: "Forward",
|
|
1864
|
-
disabled: !browserMutationEnabled,
|
|
1868
|
+
disabled: !browserMutationEnabled || !canGoForward,
|
|
1865
1869
|
onClick: () => control.historyForward(),
|
|
1866
1870
|
children: /* @__PURE__ */ jsx(ArrowRight, {})
|
|
1867
1871
|
}),
|
|
@@ -1877,7 +1881,7 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
|
|
|
1877
1881
|
]
|
|
1878
1882
|
}) : null,
|
|
1879
1883
|
features.addressBar ? /* @__PURE__ */ jsx(InputGroup, {
|
|
1880
|
-
className: "h-7 border-transparent bg-transparent transition-colors hover:border-input/50 hover:bg-muted/35 has-[[data-slot=input-group-control]:focus-visible]:border-input/70 has-[[data-slot=input-group-control]:focus-visible]:bg-background has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/20 dark:hover:bg-input/20",
|
|
1884
|
+
className: "aperture:h-7 aperture:border-transparent aperture:bg-transparent aperture:transition-colors aperture:hover:border-input/50 aperture:hover:bg-muted/35 aperture:has-[[data-slot=input-group-control]:focus-visible]:border-input/70 aperture:has-[[data-slot=input-group-control]:focus-visible]:bg-background aperture:has-[[data-slot=input-group-control]:focus-visible]:ring-2 aperture:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/20 aperture:dark:hover:bg-input/20",
|
|
1881
1885
|
children: /* @__PURE__ */ jsx(InputGroupInput, {
|
|
1882
1886
|
value: urlDraft ?? displayUrl,
|
|
1883
1887
|
onChange: (event) => setUrlDraft(event.target.value),
|
|
@@ -1889,17 +1893,17 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
|
|
|
1889
1893
|
}
|
|
1890
1894
|
},
|
|
1891
1895
|
placeholder: "URL",
|
|
1892
|
-
className: "h-7 px-2 font-mono text-xs text-muted-foreground transition-colors focus-visible:text-foreground",
|
|
1896
|
+
className: "aperture:h-7 aperture:px-2 aperture:font-mono aperture:text-xs aperture:text-muted-foreground aperture:transition-colors aperture:focus-visible:text-foreground",
|
|
1893
1897
|
disabled: !browserMutationEnabled
|
|
1894
1898
|
})
|
|
1895
|
-
}) : /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1" }),
|
|
1896
|
-
busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground" }) : null,
|
|
1899
|
+
}) : /* @__PURE__ */ jsx("div", { className: "aperture:min-w-0 aperture:flex-1" }),
|
|
1900
|
+
busy ? /* @__PURE__ */ jsx(Loader2, { className: "aperture:size-4 aperture:shrink-0 aperture:animate-spin aperture:text-muted-foreground" }) : null,
|
|
1897
1901
|
features.drawing ? /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
1898
1902
|
render: /* @__PURE__ */ jsx(Button$1, {
|
|
1899
1903
|
type: "button",
|
|
1900
1904
|
variant: paintingEnabled ? "secondary" : "ghost",
|
|
1901
1905
|
size: "icon-sm",
|
|
1902
|
-
className: "shrink-0",
|
|
1906
|
+
className: "aperture:shrink-0",
|
|
1903
1907
|
disabled: !paintingEnabled && !drawingAvailable,
|
|
1904
1908
|
"aria-label": paintingEnabled ? "Stop drawing" : "Draw on this tab",
|
|
1905
1909
|
"aria-pressed": paintingEnabled,
|
|
@@ -2000,14 +2004,14 @@ function isLikelyHost(value) {
|
|
|
2000
2004
|
}
|
|
2001
2005
|
//#endregion
|
|
2002
2006
|
//#region ../ui/src/components/badge.tsx
|
|
2003
|
-
const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
|
|
2007
|
+
const badgeVariants = cva("aperture:group/badge aperture:inline-flex aperture:h-5 aperture:w-fit aperture:shrink-0 aperture:items-center aperture:justify-center aperture:gap-1 aperture:overflow-hidden aperture:rounded-4xl aperture:border aperture:border-transparent aperture:px-2 aperture:py-0.5 aperture:text-xs aperture:font-medium aperture:whitespace-nowrap aperture:transition-all aperture:focus-visible:border-ring aperture:focus-visible:ring-[3px] aperture:focus-visible:ring-ring/50 aperture:has-data-[icon=inline-end]:pr-1.5 aperture:has-data-[icon=inline-start]:pl-1.5 aperture:aria-invalid:border-destructive aperture:aria-invalid:ring-destructive/20 aperture:dark:aria-invalid:ring-destructive/40 aperture:[&>svg]:pointer-events-none aperture:[&>svg]:size-3!", {
|
|
2004
2008
|
variants: { variant: {
|
|
2005
|
-
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
2006
|
-
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
|
2007
|
-
destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
|
2008
|
-
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
|
2009
|
-
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
2010
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
2009
|
+
default: "aperture:bg-primary aperture:text-primary-foreground aperture:[a]:hover:bg-primary/80",
|
|
2010
|
+
secondary: "aperture:bg-secondary aperture:text-secondary-foreground aperture:[a]:hover:bg-secondary/80",
|
|
2011
|
+
destructive: "aperture:bg-destructive/10 aperture:text-destructive aperture:focus-visible:ring-destructive/20 aperture:dark:bg-destructive/20 aperture:dark:focus-visible:ring-destructive/40 aperture:[a]:hover:bg-destructive/20",
|
|
2012
|
+
outline: "aperture:border-border aperture:text-foreground aperture:[a]:hover:bg-muted aperture:[a]:hover:text-muted-foreground",
|
|
2013
|
+
ghost: "aperture:hover:bg-muted aperture:hover:text-muted-foreground aperture:dark:hover:bg-muted/50",
|
|
2014
|
+
link: "aperture:text-primary aperture:underline-offset-4 aperture:hover:underline"
|
|
2011
2015
|
} },
|
|
2012
2016
|
defaultVariants: { variant: "default" }
|
|
2013
2017
|
});
|
|
@@ -2033,7 +2037,7 @@ function showNotice(notice) {
|
|
|
2033
2037
|
function BrowserViewport({ statusBadge = true, className, ...props }) {
|
|
2034
2038
|
return /* @__PURE__ */ jsx(SessionViewport, {
|
|
2035
2039
|
...props,
|
|
2036
|
-
className: className ?? "bg-background",
|
|
2040
|
+
className: className ?? "aperture:bg-background",
|
|
2037
2041
|
onNotice: showNotice,
|
|
2038
2042
|
renderOverlay: (overlay) => /* @__PURE__ */ jsx(ViewportOverlay, {
|
|
2039
2043
|
overlay,
|
|
@@ -2044,26 +2048,26 @@ function BrowserViewport({ statusBadge = true, className, ...props }) {
|
|
|
2044
2048
|
function ViewportOverlay({ overlay, statusBadge }) {
|
|
2045
2049
|
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
2046
2050
|
overlay.placeholder ? /* @__PURE__ */ jsx("div", {
|
|
2047
|
-
className: "pointer-events-none absolute inset-0 flex items-center justify-center",
|
|
2051
|
+
className: "aperture:pointer-events-none aperture:absolute aperture:inset-0 aperture:flex aperture:items-center aperture:justify-center",
|
|
2048
2052
|
children: /* @__PURE__ */ jsx(ViewportPlaceholder, { placeholder: overlay.placeholder })
|
|
2049
2053
|
}) : null,
|
|
2050
2054
|
statusBadge ? /* @__PURE__ */ jsx("div", {
|
|
2051
|
-
className: "pointer-events-none absolute right-2 bottom-2 flex items-center gap-1.5",
|
|
2055
|
+
className: "aperture:pointer-events-none aperture:absolute aperture:right-2 aperture:bottom-2 aperture:flex aperture:items-center aperture:gap-1.5",
|
|
2052
2056
|
children: /* @__PURE__ */ jsx(StatusBadge, { status: overlay.status })
|
|
2053
2057
|
}) : null,
|
|
2054
2058
|
overlay.followedCursor ? /* @__PURE__ */ jsxs("div", {
|
|
2055
|
-
className: "pointer-events-none absolute z-30 flex translate-x-[-2px] translate-y-[-2px] items-start text-primary drop-shadow-sm",
|
|
2059
|
+
className: "aperture:pointer-events-none aperture:absolute aperture:z-30 aperture:flex aperture:translate-x-[-2px] aperture:translate-y-[-2px] aperture:items-start aperture:text-primary aperture:drop-shadow-sm",
|
|
2056
2060
|
style: {
|
|
2057
2061
|
left: overlay.followedCursor.x,
|
|
2058
2062
|
top: overlay.followedCursor.y
|
|
2059
2063
|
},
|
|
2060
|
-
children: [/* @__PURE__ */ jsx(MousePointer2, { className: "size-5 fill-primary stroke-background stroke-[1.5]" }), /* @__PURE__ */ jsx("span", {
|
|
2061
|
-
className: "mt-4
|
|
2064
|
+
children: [/* @__PURE__ */ jsx(MousePointer2, { className: "aperture:size-5 aperture:fill-primary aperture:stroke-background aperture:stroke-[1.5]" }), /* @__PURE__ */ jsx("span", {
|
|
2065
|
+
className: "aperture:mt-4 aperture:-ml-1 aperture:rounded aperture:bg-primary aperture:px-1.5 aperture:py-0.5 aperture:text-[10px] aperture:leading-none aperture:font-medium aperture:whitespace-nowrap aperture:text-primary-foreground",
|
|
2062
2066
|
children: overlay.followedCursor.name
|
|
2063
2067
|
})]
|
|
2064
2068
|
}) : null,
|
|
2065
2069
|
overlay.cursorHint ? /* @__PURE__ */ jsx("div", {
|
|
2066
|
-
className: "pointer-events-none absolute z-20 max-w-64 translate-x-3 translate-y-3 rounded-md border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md",
|
|
2070
|
+
className: "aperture:pointer-events-none aperture:absolute aperture:z-20 aperture:max-w-64 aperture:translate-x-3 aperture:translate-y-3 aperture:rounded-md aperture:border aperture:bg-popover aperture:px-2 aperture:py-1 aperture:text-xs aperture:text-popover-foreground aperture:shadow-md",
|
|
2067
2071
|
style: {
|
|
2068
2072
|
left: overlay.cursorHint.x,
|
|
2069
2073
|
top: overlay.cursorHint.y
|
|
@@ -2071,7 +2075,7 @@ function ViewportOverlay({ overlay, statusBadge }) {
|
|
|
2071
2075
|
children: overlay.cursorHint.text
|
|
2072
2076
|
}) : null,
|
|
2073
2077
|
overlay.collaborationError ? /* @__PURE__ */ jsx("div", {
|
|
2074
|
-
className: "pointer-events-none absolute bottom-10 left-2 max-w-[80%] rounded-md border border-amber-500/40 bg-background/90 px-2 py-1 text-xs text-amber-800 dark:text-amber-300",
|
|
2078
|
+
className: "aperture:pointer-events-none aperture:absolute aperture:bottom-10 aperture:left-2 aperture:max-w-[80%] aperture:rounded-md aperture:border aperture:border-amber-500/40 aperture:bg-background/90 aperture:px-2 aperture:py-1 aperture:text-xs aperture:text-amber-800 aperture:dark:text-amber-300",
|
|
2075
2079
|
children: overlay.collaborationError
|
|
2076
2080
|
}) : null
|
|
2077
2081
|
] });
|
|
@@ -2085,14 +2089,14 @@ const placeholderLabels = {
|
|
|
2085
2089
|
};
|
|
2086
2090
|
function ViewportPlaceholder({ placeholder }) {
|
|
2087
2091
|
return /* @__PURE__ */ jsxs("div", {
|
|
2088
|
-
className: "flex flex-col items-center gap-2 text-sm text-muted-foreground",
|
|
2089
|
-
children: [placeholder === "disconnected" ? /* @__PURE__ */ jsx(Unplug, { className: "size-5" }) : /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin" }), placeholderLabels[placeholder]]
|
|
2092
|
+
className: "aperture:flex aperture:flex-col aperture:items-center aperture:gap-2 aperture:text-sm aperture:text-muted-foreground",
|
|
2093
|
+
children: [placeholder === "disconnected" ? /* @__PURE__ */ jsx(Unplug, { className: "aperture:size-5" }) : /* @__PURE__ */ jsx(Loader2, { className: "aperture:size-5 aperture:animate-spin" }), placeholderLabels[placeholder]]
|
|
2090
2094
|
});
|
|
2091
2095
|
}
|
|
2092
2096
|
function StatusBadge({ status }) {
|
|
2093
2097
|
if (status === "webrtc" || status === "websocket") return /* @__PURE__ */ jsx(Badge, {
|
|
2094
2098
|
variant: "secondary",
|
|
2095
|
-
className: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
|
|
2099
|
+
className: "aperture:bg-emerald-500/15 aperture:text-emerald-700 aperture:dark:text-emerald-300",
|
|
2096
2100
|
children: status
|
|
2097
2101
|
});
|
|
2098
2102
|
return /* @__PURE__ */ jsx(Badge, {
|
|
@@ -2113,7 +2117,7 @@ function BrowserDevToolsPane({ cdpUrl, targetId }) {
|
|
|
2113
2117
|
return frame.toString();
|
|
2114
2118
|
}, [cdpUrl, targetId]);
|
|
2115
2119
|
if (!src) return /* @__PURE__ */ jsx(Empty, {
|
|
2116
|
-
className: "h-full rounded-none border-none",
|
|
2120
|
+
className: "aperture:h-full aperture:rounded-none aperture:border-none",
|
|
2117
2121
|
children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
|
|
2118
2122
|
/* @__PURE__ */ jsx(EmptyMedia, {
|
|
2119
2123
|
variant: "icon",
|
|
@@ -2124,7 +2128,7 @@ function BrowserDevToolsPane({ cdpUrl, targetId }) {
|
|
|
2124
2128
|
] })
|
|
2125
2129
|
});
|
|
2126
2130
|
return /* @__PURE__ */ jsx("iframe", {
|
|
2127
|
-
className: "h-full w-full border-0 bg-background",
|
|
2131
|
+
className: "aperture:h-full aperture:w-full aperture:border-0 aperture:bg-background",
|
|
2128
2132
|
src,
|
|
2129
2133
|
title: "Browser DevTools",
|
|
2130
2134
|
allow: "clipboard-read; clipboard-write",
|
|
@@ -2136,7 +2140,7 @@ function BrowserDevToolsPane({ cdpUrl, targetId }) {
|
|
|
2136
2140
|
function ResizablePanelGroup({ className, ...props }) {
|
|
2137
2141
|
return /* @__PURE__ */ jsx(ResizablePrimitive.Group, {
|
|
2138
2142
|
"data-slot": "resizable-panel-group",
|
|
2139
|
-
className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className),
|
|
2143
|
+
className: cn("aperture:flex aperture:h-full aperture:w-full aperture:aria-[orientation=vertical]:flex-col", className),
|
|
2140
2144
|
...props
|
|
2141
2145
|
});
|
|
2142
2146
|
}
|
|
@@ -2149,9 +2153,9 @@ function ResizablePanel({ ...props }) {
|
|
|
2149
2153
|
function ResizableHandle({ withHandle, className, ...props }) {
|
|
2150
2154
|
return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
|
|
2151
2155
|
"data-slot": "resizable-handle",
|
|
2152
|
-
className: cn("relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90", className),
|
|
2156
|
+
className: cn("aperture:relative aperture:flex aperture:w-px aperture:items-center aperture:justify-center aperture:bg-border aperture:ring-offset-background aperture:after:absolute aperture:after:inset-y-0 aperture:after:left-1/2 aperture:after:w-1 aperture:after:-translate-x-1/2 aperture:focus-visible:ring-1 aperture:focus-visible:ring-ring aperture:focus-visible:outline-hidden aperture:aria-[orientation=horizontal]:h-px aperture:aria-[orientation=horizontal]:w-full aperture:aria-[orientation=horizontal]:after:left-0 aperture:aria-[orientation=horizontal]:after:h-1 aperture:aria-[orientation=horizontal]:after:w-full aperture:aria-[orientation=horizontal]:after:translate-x-0 aperture:aria-[orientation=horizontal]:after:-translate-y-1/2 aperture:[&[aria-orientation=horizontal]>div]:rotate-90", className),
|
|
2153
2157
|
...props,
|
|
2154
|
-
children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
|
|
2158
|
+
children: withHandle && /* @__PURE__ */ jsx("div", { className: "aperture:z-10 aperture:flex aperture:h-6 aperture:w-1 aperture:shrink-0 aperture:rounded-lg aperture:bg-border" })
|
|
2155
2159
|
});
|
|
2156
2160
|
}
|
|
2157
2161
|
//#endregion
|
|
@@ -2209,7 +2213,7 @@ function BrowserControlPane({ control, leading, features: featureOverrides, coll
|
|
|
2209
2213
|
statusBadge: features.statusBadge
|
|
2210
2214
|
});
|
|
2211
2215
|
return /* @__PURE__ */ jsxs("div", {
|
|
2212
|
-
className: "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
|
|
2216
|
+
className: "aperture:flex aperture:h-full aperture:min-h-0 aperture:min-w-0 aperture:flex-1 aperture:flex-col aperture:overflow-hidden",
|
|
2213
2217
|
children: [/* @__PURE__ */ jsx(BrowserToolbar, {
|
|
2214
2218
|
control,
|
|
2215
2219
|
leading,
|
|
@@ -2229,10 +2233,10 @@ function BrowserControlPane({ control, leading, features: featureOverrides, coll
|
|
|
2229
2233
|
onSessionDetails
|
|
2230
2234
|
}), features.devTools ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
|
|
2231
2235
|
orientation: devToolsDock === "bottom" ? "vertical" : "horizontal",
|
|
2232
|
-
className: "min-h-0 min-w-0 flex-1 has-[[data-separator=active]]:[&_iframe]:pointer-events-none",
|
|
2236
|
+
className: "aperture:min-h-0 aperture:min-w-0 aperture:flex-1 aperture:has-[[data-separator=active]]:[&_iframe]:pointer-events-none",
|
|
2233
2237
|
children: [
|
|
2234
2238
|
/* @__PURE__ */ jsx(ResizablePanel, {
|
|
2235
|
-
className: "flex min-h-0 min-w-0",
|
|
2239
|
+
className: "aperture:flex aperture:min-h-0 aperture:min-w-0",
|
|
2236
2240
|
defaultSize: "60%",
|
|
2237
2241
|
minSize: "20%",
|
|
2238
2242
|
children: viewport
|
|
@@ -2244,12 +2248,12 @@ function BrowserControlPane({ control, leading, features: featureOverrides, coll
|
|
|
2244
2248
|
}),
|
|
2245
2249
|
/* @__PURE__ */ jsx(ResizablePanel, {
|
|
2246
2250
|
panelRef: devToolsPanelRef,
|
|
2247
|
-
className: "flex min-h-0 min-w-0",
|
|
2251
|
+
className: "aperture:flex aperture:min-h-0 aperture:min-w-0",
|
|
2248
2252
|
collapsible: true,
|
|
2249
2253
|
defaultSize: "40%",
|
|
2250
2254
|
minSize: "20%",
|
|
2251
2255
|
children: Array.from(devToolsTargetIds, (targetId) => /* @__PURE__ */ jsx("div", {
|
|
2252
|
-
className: "h-full min-h-0 w-full min-w-0",
|
|
2256
|
+
className: "aperture:h-full aperture:min-h-0 aperture:w-full aperture:min-w-0",
|
|
2253
2257
|
hidden: targetId !== activeTargetId,
|
|
2254
2258
|
children: /* @__PURE__ */ jsx(BrowserDevToolsPane, {
|
|
2255
2259
|
cdpUrl,
|
|
@@ -2267,7 +2271,7 @@ function ApertureUIRoot({ theme = "system", className, children }) {
|
|
|
2267
2271
|
const [root, setRoot] = useState(null);
|
|
2268
2272
|
return /* @__PURE__ */ jsx("div", {
|
|
2269
2273
|
ref: setRoot,
|
|
2270
|
-
className: cn("aperture-root relative h-full w-full", useDarkTheme(theme) && "dark", className),
|
|
2274
|
+
className: cn("aperture-root aperture:relative aperture:h-full aperture:w-full", useDarkTheme(theme) && "aperture-dark", className),
|
|
2271
2275
|
children: root ? /* @__PURE__ */ jsx(PortalContainerProvider, {
|
|
2272
2276
|
container: root,
|
|
2273
2277
|
children: /* @__PURE__ */ jsx(TooltipProvider, { children })
|
|
@@ -2315,7 +2319,7 @@ function Session({ access, features, leading }) {
|
|
|
2315
2319
|
description: "Provide a valid session connection."
|
|
2316
2320
|
});
|
|
2317
2321
|
case "loading": return /* @__PURE__ */ jsx(SessionState, {
|
|
2318
|
-
icon: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }),
|
|
2322
|
+
icon: /* @__PURE__ */ jsx(Loader2, { className: "aperture:animate-spin" }),
|
|
2319
2323
|
title: "Opening session"
|
|
2320
2324
|
});
|
|
2321
2325
|
case "denied": return /* @__PURE__ */ jsx(SessionState, {
|
|
@@ -2334,7 +2338,7 @@ function Session({ access, features, leading }) {
|
|
|
2334
2338
|
description: "This session is unavailable or access has been revoked."
|
|
2335
2339
|
});
|
|
2336
2340
|
case "ready": return /* @__PURE__ */ jsx("div", {
|
|
2337
|
-
className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-background",
|
|
2341
|
+
className: "aperture:flex aperture:h-full aperture:min-h-0 aperture:flex-1 aperture:flex-col aperture:overflow-hidden aperture:bg-background",
|
|
2338
2342
|
children: /* @__PURE__ */ jsx(BrowserControlPane, {
|
|
2339
2343
|
control,
|
|
2340
2344
|
collaborationRole: control.collaboration.role,
|
|
@@ -2357,7 +2361,7 @@ function devToolsUrl(origin, cdpUrl, sessionToken) {
|
|
|
2357
2361
|
}
|
|
2358
2362
|
function SessionState({ icon, title, description }) {
|
|
2359
2363
|
return /* @__PURE__ */ jsx(Empty, {
|
|
2360
|
-
className: "h-full border-none",
|
|
2364
|
+
className: "aperture:h-full aperture:border-none",
|
|
2361
2365
|
children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
|
|
2362
2366
|
/* @__PURE__ */ jsx(EmptyMedia, {
|
|
2363
2367
|
variant: "icon",
|