@aperture-browser/session-react 0.0.0-init.0 → 0.0.0-nightly.100.78b4e7ef6edc

package/dist/index.js

@@ -1,24 +1,25 @@
-import { a as makeApertureRuntime, c as collaborationPaintLifetimeMs, d as RuntimeProviderMissingError, f as useBaseUrl, g as useRuntime, h as useRunApi, i as ApertureProvider, l as useLiveSession, m as useFork, n as parseShareToken, o as useBrowserControl, p as useEffectCallback, r as useSharedSession, s as SessionViewport, t as LiveSessionError, u as RuntimeProvider } from "./headless-CKFacFX3.js";
+import { a as makeApertureRuntime, c as collaborationPaintLifetimeMs, d as RuntimeProviderMissingError, f as useBaseUrl, g as useRuntime, h as useRunApi, i as ApertureProvider, l as useLiveSession, m as useFork, n as shareSessionAccess, o as useBrowserControl, p as useEffectCallback, r as useSession, s as SessionViewport, t as LiveSessionError, u as RuntimeProvider } from "./headless-CPoXwbFz.js";
 import { Fragment, createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as Effect from "effect/Effect";
 import { VIEWPORT_DEVICE_SCALE_FACTORS, VIEWPORT_PRESETS, createViewportPreset, formatViewportScale } from "@aperture-browser/live-session";
 import * as Data from "effect/Data";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowLeft, ArrowRight, CheckIcon, ChevronRightIcon, Circle, CircleCheckIcon, Copy, Download, Gauge, Globe2, Info, InfoIcon, Link2Off, Loader2, Loader2Icon, Lock, LockOpen, Maximize2, Monitor, MoreVertical, MousePointer2, OctagonXIcon, PanelBottom, PanelRight, Pencil, Plus, Radio, RefreshCw, RotateCcw, Share2, Square, TriangleAlertIcon, Unplug, Wrench, X } from "lucide-react";
+import { ArrowLeft, ArrowRight, CheckIcon, ChevronRightIcon, Circle, CircleCheckIcon, Copy, Download, Eye, 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";
 import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
 import { useTheme } from "next-themes";
 import { Toaster, toast } from "sonner";
-import { Tooltip } from "@base-ui/react/tooltip";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { usePanelRef } from "react-resizable-panels";
 import * as Schedule from "effect/Schedule";
 import { Button } from "@base-ui/react/button";
 import { ContextMenu } from "@base-ui/react/context-menu";
 import { Input } from "@base-ui/react/input";
+import { Tooltip } from "@base-ui/react/tooltip";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { PreviewCard } from "@base-ui/react/preview-card";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 import "@base-ui/react/separator";
 import { Menu } from "@base-ui/react/menu";
@@ -27,6 +28,7 @@ import { Popover } from "@base-ui/react/popover";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region ../ui/src/utils.ts
+const twMerge = extendTailwindMerge({ prefix: "aperture" });
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
@@ -35,21 +37,21 @@ function cn(...inputs) {
 function Empty({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "empty",
-		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),
+		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),
 		...props
 	});
 }
 function EmptyHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "empty-header",
-		className: cn("flex max-w-sm flex-col items-center gap-2", className),
+		className: cn("aperture:flex aperture:max-w-sm aperture:flex-col aperture:items-center aperture:gap-2", className),
 		...props
 	});
 }
-const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+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", {
 	variants: { variant: {
-		default: "bg-transparent",
-		icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
+		default: "aperture:bg-transparent",
+		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"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -67,14 +69,14 @@ function EmptyMedia({ className, variant = "default", ...props }) {
 function EmptyTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "empty-title",
-		className: cn("text-sm font-medium tracking-tight", className),
+		className: cn("aperture:text-sm aperture:font-medium aperture:tracking-tight", className),
 		...props
 	});
 }
 function EmptyDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "empty-description",
-		className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		className: cn("aperture:text-sm/relaxed aperture:text-muted-foreground aperture:[&>a]:underline aperture:[&>a]:underline-offset-4 aperture:[&>a:hover]:text-primary", className),
 		...props
 	});
 }
@@ -84,13 +86,13 @@ const Toaster$1 = ({ ...props }) => {
 	const { theme = "system" } = useTheme();
 	return /* @__PURE__ */ jsx(Toaster, {
 		theme,
-		className: "toaster group",
+		className: "toaster aperture:group",
 		icons: {
-			success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
-			info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
-			warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
-			error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
-			loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
+			success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "aperture:size-4" }),
+			info: /* @__PURE__ */ jsx(InfoIcon, { className: "aperture:size-4" }),
+			warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "aperture:size-4" }),
+			error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "aperture:size-4" }),
+			loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "aperture:size-4 aperture:animate-spin" })
 		},
 		style: {
 			"--normal-bg": "var(--popover)",
@@ -103,57 +105,6 @@ const Toaster$1 = ({ ...props }) => {
 	});
 };
 //#endregion
-//#region ../ui/src/portal.tsx
-const PortalContainerContext = createContext(null);
-function PortalContainerProvider({ container, children }) {
-	return /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
-		value: container,
-		children
-	});
-}
-function usePortalContainer() {
-	return useContext(PortalContainerContext) ?? void 0;
-}
-//#endregion
-//#region ../ui/src/components/tooltip.tsx
-function TooltipProvider({ delay = 0, ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip.Provider, {
-		"data-slot": "tooltip-provider",
-		delay,
-		...props
-	});
-}
-function Tooltip$1({ ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip.Root, {
-		"data-slot": "tooltip",
-		...props
-	});
-}
-function TooltipTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
-		"data-slot": "tooltip-trigger",
-		...props
-	});
-}
-function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip.Portal, {
-		container: usePortalContainer(),
-		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
-			align,
-			alignOffset,
-			side,
-			sideOffset,
-			className: "isolate z-50",
-			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
-				"data-slot": "tooltip-content",
-				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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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),
-				...props,
-				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" })]
-			})
-		})
-	});
-}
-//#endregion
 //#region src/features.ts
 function resolveSessionFeatures(features) {
 	return {
@@ -170,25 +121,25 @@ function resolveSessionFeatures(features) {
 }
 //#endregion
 //#region ../ui/src/components/button.tsx
-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", {
+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", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/80",
-			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",
-			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",
-			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-			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",
-			link: "text-primary underline-offset-4 hover:underline"
+			default: "aperture:bg-primary aperture:text-primary-foreground aperture:hover:bg-primary/80",
+			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",
+			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",
+			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",
+			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",
+			link: "aperture:text-primary aperture:underline-offset-4 aperture:hover:underline"
 		},
 		size: {
-			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",
-			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 pt-px text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 pt-px text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-			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",
-			icon: "size-8",
-			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-			"icon-lg": "size-9"
+			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",
+			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",
+			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",
+			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",
+			icon: "aperture:size-8",
+			"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",
+			"icon-sm": "aperture:size-7 aperture:rounded-[min(--theme(--radius-md),12px)] aperture:in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "aperture:size-9"
 		}
 	},
 	defaultVariants: {
@@ -208,6 +159,18 @@ function Button$1({ className, variant = "default", size = "default", ...props }
 	});
 }
 //#endregion
+//#region ../ui/src/portal.tsx
+const PortalContainerContext = createContext(void 0);
+function PortalContainerProvider({ container, children }) {
+	return /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
+		value: container,
+		children
+	});
+}
+function usePortalContainer() {
+	return useContext(PortalContainerContext);
+}
+//#endregion
 //#region ../ui/src/components/context-menu.tsx
 function ContextMenu$1({ ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu.Root, {
@@ -218,7 +181,7 @@ function ContextMenu$1({ ...props }) {
 function ContextMenuTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
 		"data-slot": "context-menu-trigger",
-		className: cn("select-none", className),
+		className: cn("aperture:select-none", className),
 		...props
 	});
 }
@@ -226,14 +189,14 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
 	return /* @__PURE__ */ jsx(ContextMenu.Portal, {
 		container: usePortalContainer(),
 		children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
-			className: "isolate z-50 outline-none",
+			className: "aperture:isolate aperture:z-50 aperture:outline-none",
 			align,
 			alignOffset,
 			side,
 			sideOffset,
 			children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
 				"data-slot": "context-menu-content",
-				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),
+				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),
 				...props
 			})
 		})
@@ -249,7 +212,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
 		"data-slot": "context-menu-label",
 		"data-inset": inset,
-		className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
+		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),
 		...props
 	});
 }
@@ -258,7 +221,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		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),
+		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),
 		...props
 	});
 }
@@ -272,10 +235,10 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
 		"data-slot": "context-menu-radio-item",
 		"data-inset": inset,
-		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),
+		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),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute right-2",
+			className: "aperture:pointer-events-none aperture:absolute aperture:right-2",
 			children: /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
@@ -283,7 +246,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 function ContextMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
 		"data-slot": "context-menu-separator",
-		className: cn("-mx-1 my-1 h-px bg-border", className),
+		className: cn("aperture:-mx-1 aperture:my-1 aperture:h-px aperture:bg-border", className),
 		...props
 	});
 }
@@ -293,7 +256,7 @@ function Input$1({ className, type, ...props }) {
 	return /* @__PURE__ */ jsx(Input, {
 		type,
 		"data-slot": "input",
-		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),
+		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),
 		...props
 	});
 }
@@ -303,52 +266,125 @@ function InputGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
-		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),
+		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),
 		...props
 	});
 }
-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", {
+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", {
 	variants: { align: {
-		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+		"inline-start": "aperture:order-first aperture:pl-2 aperture:has-[>button]:ml-[-0.3rem] aperture:has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "aperture:order-last aperture:pr-2 aperture:has-[>button]:mr-[-0.3rem] aperture:has-[>kbd]:mr-[-0.15rem]",
+		"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",
+		"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"
 	} },
 	defaultVariants: { align: "inline-start" }
 });
-cva("flex items-center gap-2 text-sm shadow-none", {
+cva("aperture:flex aperture:items-center aperture:gap-2 aperture:text-sm aperture:shadow-none", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		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",
 		sm: "",
-		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
-		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+		"icon-xs": "aperture:size-6 aperture:rounded-[calc(var(--radius)-3px)] aperture:p-0 aperture:has-[>svg]:p-0",
+		"icon-sm": "aperture:size-8 aperture:p-0 aperture:has-[>svg]:p-0"
 	} },
 	defaultVariants: { size: "xs" }
 });
 function InputGroupInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Input$1, {
 		"data-slot": "input-group-control",
-		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),
+		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),
 		...props
 	});
 }
 //#endregion
+//#region ../ui/src/components/tooltip.tsx
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+}
+function Tooltip$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	});
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		container: usePortalContainer(),
+		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "aperture:isolate aperture:z-50",
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				"data-slot": "tooltip-content",
+				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),
+				...props,
+				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" })]
+			})
+		})
+	});
+}
+//#endregion
+//#region ../ui/src/components/hover-card.tsx
+function HoverCard(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+function HoverCardTrigger(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, collisionPadding, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		container: usePortalContainer(),
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			collisionPadding,
+			className: "aperture:isolate aperture:z-50",
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "hover-card-content",
+				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),
+				...props
+			})
+		})
+	});
+}
+const createHoverCardHandle = PreviewCard.createHandle;
+//#endregion
 //#region ../ui/src/components/scroll-area.tsx
-function ScrollArea$1({ className, viewportClassName, scrollbars = "vertical", children, ...props }) {
+function ScrollArea$1({ className, viewportClassName, viewportRef, scrollbars = "vertical", children, ...props }) {
 	const vertical = scrollbars === "vertical" || scrollbars === "both";
 	const horizontal = scrollbars === "horizontal" || scrollbars === "both";
 	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
 		"data-slot": "scroll-area",
-		className: cn("relative", className),
+		className: cn("aperture:relative", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				ref: viewportRef,
 				"data-slot": "scroll-area-viewport",
 				style: {
 					overflowX: horizontal ? "scroll" : "hidden",
 					overflowY: vertical ? "scroll" : "hidden"
 				},
-				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),
+				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),
 				children
 			}),
 			vertical ? /* @__PURE__ */ jsx(ScrollBar, {}) : null,
@@ -362,11 +398,11 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 		"data-slot": "scroll-area-scrollbar",
 		"data-orientation": orientation,
 		orientation,
-		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),
+		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),
 		...props,
 		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
 			"data-slot": "scroll-area-thumb",
-			className: "relative flex-1 rounded-full bg-foreground/35 transition-colors hover:bg-foreground/55"
+			className: "aperture:relative aperture:flex-1 aperture:rounded-full aperture:bg-foreground/35 aperture:transition-colors aperture:hover:bg-foreground/55"
 		})
 	});
 }
@@ -402,19 +438,20 @@ const copyTextWithToast = (value, onCopied = () => {}) => copyText(value).pipe(E
 //#endregion
 //#region src/components/browser-tab-strip.tsx
 const BROWSER_TAB_DRAG_KIND = "browser-tab";
-function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devToolsTargetIds, disabled, mutationDisabled, onActivate, onCreate, onDuplicate, onClose, onReload, onReorder }) {
+function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devToolsTargetIds, disabled, mutationDisabled, onActivate, onCreate, onDuplicate, onClose, onReload, onReorder, loadThumbnail = null }) {
+	const [previewHandle] = useState(() => createHoverCardHandle());
 	if (targets.length === 0) return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-8 min-w-0 flex-1 items-center gap-2 px-2 text-xs text-muted-foreground",
+		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",
 		children: [/* @__PURE__ */ jsx("span", { children: "No tabs" }), /* @__PURE__ */ jsx(NewTabButton, {
 			disabled: disabled || mutationDisabled,
 			onCreate
 		})]
 	});
-	return /* @__PURE__ */ jsx(ScrollArea$1, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ScrollArea$1, {
 		scrollbars: "horizontal",
-		className: "h-8 min-w-0 flex-1",
+		className: "aperture:h-8 aperture:min-w-0 aperture:flex-1",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-max items-end gap-0.5 px-1 pt-1",
+			className: "aperture:flex aperture:min-w-max aperture:items-end aperture:gap-0.5 aperture:px-1 aperture:pt-1",
 			children: [targets.map((target, index) => {
 				return /* @__PURE__ */ jsx(BrowserTab, {
 					target,
@@ -428,6 +465,7 @@ function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devTools
 					onClose,
 					onReload,
 					onReorder,
+					previewHandle: loadThumbnail ? previewHandle : null,
 					closeOtherTargetIds: targets.filter((current) => current.id !== target.id).map((current) => current.id),
 					closeRightTargetIds: targets.slice(index + 1).map((current) => current.id)
 				}, target.id);
@@ -436,9 +474,18 @@ function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devTools
 				onCreate
 			})]
 		})
-	});
+	}), loadThumbnail ? /* @__PURE__ */ jsx(HoverCard, {
+		handle: previewHandle,
+		children: ({ payload }) => {
+			const target = targets.find((current) => current.id === payload);
+			return target ? /* @__PURE__ */ jsx(TabPreview, {
+				target,
+				loadThumbnail
+			}, target.id) : null;
+		}
+	}) : null] });
 }
-function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutationDisabled, onActivate, onDuplicate, onClose, onReload, onReorder, closeOtherTargetIds, closeRightTargetIds }) {
+function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutationDisabled, onActivate, onDuplicate, onClose, onReload, onReorder, previewHandle, closeOtherTargetIds, closeRightTargetIds }) {
 	const tabRef = useRef(null);
 	const [dragging, setDragging] = useState(false);
 	const [dropPlacement, setDropPlacement] = useState(null);
@@ -478,49 +525,55 @@ function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutatio
 			}
 		}));
 	}, [onReorder, target.id]);
-	return /* @__PURE__ */ jsxs(ContextMenu$1, { children: [/* @__PURE__ */ jsxs(ContextMenuTrigger, {
-		render: /* @__PURE__ */ jsx("div", {
-			ref: tabRef,
-			"data-browser-tab": true,
-			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"),
-			title: target.url || "about:blank",
-			onMouseDown: (event) => {
-				if (event.button === 1) event.preventDefault();
-			},
-			onAuxClick: (event) => {
-				if (event.button === 1 && !disabled && !mutationDisabled) {
-					event.preventDefault();
-					onClose(target.id);
-				}
+	const tab = /* @__PURE__ */ jsx("div", {
+		ref: tabRef,
+		"data-browser-tab": true,
+		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"),
+		onMouseDown: (event) => {
+			if (event.button === 1) event.preventDefault();
+		},
+		onAuxClick: (event) => {
+			if (event.button === 1 && !disabled && !mutationDisabled) {
+				event.preventDefault();
+				onClose(target.id);
 			}
-		}),
+		}
+	});
+	return /* @__PURE__ */ jsxs(ContextMenu$1, { children: [/* @__PURE__ */ jsxs(ContextMenuTrigger, {
+		render: previewHandle ? /* @__PURE__ */ jsx(HoverCardTrigger, {
+			handle: previewHandle,
+			payload: target.id,
+			delay: 0,
+			closeDelay: 0,
+			render: tab
+		}) : tab,
 		children: [
-			/* @__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") }),
-			/* @__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") }),
+			/* @__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") }),
+			/* @__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") }),
 			/* @__PURE__ */ jsxs("button", {
 				type: "button",
 				"aria-current": active ? "page" : void 0,
 				disabled,
-				className: "flex min-w-0 flex-1 items-center gap-1.5 text-left",
+				className: "aperture:flex aperture:min-w-0 aperture:flex-1 aperture:items-center aperture:gap-1.5 aperture:text-left",
 				onClick: () => onActivate(target.id),
 				children: [
 					/* @__PURE__ */ jsx(TabFavicon, { url: target.url }),
 					devToolsOpen ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Wrench, {
 						"aria-hidden": true,
-						className: "size-3.5 shrink-0 text-muted-foreground"
+						className: "aperture:size-3.5 aperture:shrink-0 aperture:text-muted-foreground"
 					}), /* @__PURE__ */ jsx("span", {
-						className: "sr-only",
+						className: "aperture:sr-only",
 						children: "DevTools open"
 					})] }) : null,
 					recording ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: "size-2 shrink-0 rounded-full bg-destructive"
+						className: "aperture:size-2 aperture:shrink-0 aperture:rounded-full aperture:bg-destructive"
 					}), /* @__PURE__ */ jsx("span", {
-						className: "sr-only",
+						className: "aperture:sr-only",
 						children: "Recording"
 					})] }) : null,
 					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 truncate font-mono",
+						className: "aperture:min-w-0 aperture:truncate aperture:font-mono",
 						children: label
 					})
 				]
@@ -530,7 +583,7 @@ function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutatio
 					type: "button",
 					variant: "ghost",
 					size: "icon-xs",
-					className: "shrink-0 opacity-55 hover:opacity-100 group-hover:opacity-100",
+					className: "aperture:shrink-0 aperture:opacity-55 aperture:hover:opacity-100 aperture:group-hover:opacity-100",
 					"aria-label": "Close tab",
 					disabled: disabled || mutationDisabled,
 					onClick: () => onClose(target.id)
@@ -542,7 +595,7 @@ function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutatio
 			})] })
 		]
 	}), /* @__PURE__ */ jsxs(ContextMenuContent, {
-		className: "min-w-48",
+		className: "aperture:min-w-48",
 		children: [
 			/* @__PURE__ */ jsxs(ContextMenuGroup, { children: [
 				/* @__PURE__ */ jsx(ContextMenuItem, {
@@ -591,7 +644,7 @@ function NewTabButton({ disabled, onCreate }) {
 			type: "button",
 			variant: "ghost",
 			size: "icon-xs",
-			className: "mb-px shrink-0",
+			className: "aperture:mb-px aperture:shrink-0",
 			"aria-label": "New tab",
 			disabled,
 			onClick: onCreate
@@ -608,11 +661,11 @@ function TabFavicon({ url }) {
 	useEffect(() => {
 		setFailed(false);
 	}, [faviconUrl]);
-	if (!faviconUrl || failed) return /* @__PURE__ */ jsx(Globe2, { className: "size-4 shrink-0 text-muted-foreground" });
+	if (!faviconUrl || failed) return /* @__PURE__ */ jsx(Globe2, { className: "aperture:size-4 aperture:shrink-0 aperture:text-muted-foreground" });
 	return /* @__PURE__ */ jsx("img", {
 		src: faviconUrl,
 		alt: "",
-		className: "size-4 shrink-0",
+		className: "aperture:size-4 aperture:shrink-0",
 		onError: () => setFailed(true)
 	});
 }
@@ -641,12 +694,53 @@ function dropPlacementFromClientX(element, clientX) {
 	const rect = element.getBoundingClientRect();
 	return clientX < rect.left + rect.width / 2 ? "before" : "after";
 }
+function TabPreview({ target, loadThumbnail }) {
+	return /* @__PURE__ */ jsxs(HoverCardContent, {
+		"data-browser-tab-preview": true,
+		align: "start",
+		sideOffset: 8,
+		collisionPadding: 16,
+		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",
+		children: [
+			/* @__PURE__ */ jsx(TabThumbnail, {
+				targetId: target.id,
+				loadThumbnail
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "aperture:truncate aperture:text-xs aperture:font-medium",
+				children: target.title || simplifyUrl(target.url)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "aperture:truncate aperture:font-mono aperture:text-xs aperture:text-muted-foreground",
+				children: target.url || "about:blank"
+			})
+		]
+	});
+}
+function TabThumbnail({ targetId, loadThumbnail }) {
+	const [src, setSrc] = useState(null);
+	useFork(() => Effect.gen(function* () {
+		const blob = yield* loadThumbnail(targetId);
+		const objectUrl = URL.createObjectURL(blob);
+		yield* Effect.addFinalizer(() => Effect.sync(() => URL.revokeObjectURL(objectUrl)));
+		setSrc(objectUrl);
+		return yield* Effect.never;
+	}).pipe(Effect.catch(() => Effect.void), Effect.scoped), [loadThumbnail, targetId]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "aperture:aspect-video aperture:w-full aperture:overflow-hidden aperture:rounded-md aperture:bg-muted",
+		children: src ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: "",
+			className: "aperture:size-full aperture:object-cover aperture:object-top"
+		}) : null
+	});
+}
 //#endregion
 //#region ../ui/src/components/label.tsx
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx("label", {
 		"data-slot": "label",
-		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),
+		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),
 		...props
 	});
 }
@@ -655,15 +749,15 @@ function Label({ className, ...props }) {
 function FieldGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "field-group",
-		className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className),
+		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),
 		...props
 	});
 }
-const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+const fieldVariants = cva("aperture:group/field aperture:flex aperture:w-full aperture:gap-2 aperture:data-[invalid=true]:text-destructive", {
 	variants: { orientation: {
-		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
-		horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-		responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		vertical: "aperture:flex-col aperture:*:w-full aperture:[&>.sr-only]:w-auto",
+		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",
+		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"
 	} },
 	defaultVariants: { orientation: "vertical" }
 });
@@ -679,7 +773,7 @@ function Field({ className, orientation = "vertical", ...props }) {
 function FieldLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Label, {
 		"data-slot": "field-label",
-		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 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
+		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),
 		...props
 	});
 }
@@ -701,14 +795,14 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
 	return /* @__PURE__ */ jsx(Menu.Portal, {
 		container: usePortalContainer(),
 		children: /* @__PURE__ */ jsx(Menu.Positioner, {
-			className: "isolate z-50 outline-none",
+			className: "aperture:isolate aperture:z-50 aperture:outline-none",
 			align,
 			alignOffset,
 			side,
 			sideOffset,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
 				"data-slot": "dropdown-menu-content",
-				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),
+				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),
 				...props
 			})
 		})
@@ -724,7 +818,7 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dropdown-menu-label",
 		"data-inset": inset,
-		className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
+		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),
 		...props
 	});
 }
@@ -733,7 +827,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		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),
+		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),
 		...props
 	});
 }
@@ -747,15 +841,15 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
-		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),
+		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),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "aperture:ml-auto" })]
 	});
 }
 function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenuContent, {
 		"data-slot": "dropdown-menu-sub-content",
-		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),
+		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),
 		align,
 		alignOffset,
 		side,
@@ -767,11 +861,11 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
 	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
 		"data-slot": "dropdown-menu-checkbox-item",
 		"data-inset": inset,
-		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),
+		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),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			className: "aperture:pointer-events-none aperture:absolute aperture:right-2 aperture:flex aperture:items-center aperture:justify-center",
 			"data-slot": "dropdown-menu-checkbox-item-indicator",
 			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
@@ -787,10 +881,10 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
 		"data-inset": inset,
-		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),
+		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),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			className: "aperture:pointer-events-none aperture:absolute aperture:right-2 aperture:flex aperture:items-center aperture:justify-center",
 			"data-slot": "dropdown-menu-radio-item-indicator",
 			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
@@ -799,7 +893,7 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Separator, {
 		"data-slot": "dropdown-menu-separator",
-		className: cn("-mx-1 my-1 h-px bg-border", className),
+		className: cn("aperture:-mx-1 aperture:my-1 aperture:h-px aperture:bg-border", className),
 		...props
 	});
 }
@@ -861,8 +955,9 @@ const VIEWPORT_LIMITS = {
 function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursorEnabled, onLocalCursorChange, onReconnect, onSessionDetails, now }) {
 	const runningRecordings = control.recordings.filter((recording) => recording.status === "starting" || recording.status === "running");
 	const recordingActive = runningRecordings.length > 0;
+	const viewportConnected = connected && control.collaboration.role !== "viewer";
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "shrink-0 sm:hidden",
+		className: "aperture:shrink-0 aperture:sm:hidden",
 		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
 				type: "button",
@@ -876,7 +971,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 			children: recordingActive ? "Browser menu, recording active" : "Browser menu"
 		})] }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 			align: "end",
-			className: "w-72",
+			className: "aperture:w-72",
 			children: [
 				/* @__PURE__ */ jsx(RestMenuItems, {
 					control,
@@ -887,14 +982,14 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 				/* @__PURE__ */ jsx(RecordingMenuItems, {
 					control,
-					connected: connected && control.collaboration.role === "owner",
+					connected,
 					runningRecordings,
 					now
 				}),
 				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 				/* @__PURE__ */ jsx(ViewportStreamMenuItems, {
 					control,
-					connected: connected && control.collaboration.role !== "viewer",
+					connected: viewportConnected,
 					localCursorEnabled,
 					onLocalCursorChange,
 					busy,
@@ -903,7 +998,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 			]
 		})] })
 	}), /* @__PURE__ */ jsxs("div", {
-		className: "hidden shrink-0 items-center gap-0.5 sm:flex",
+		className: "aperture:hidden aperture:shrink-0 aperture:items-center aperture:gap-0.5 aperture:sm:flex",
 		children: [
 			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
@@ -918,14 +1013,18 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 				children: recordingActive ? "Recording in progress" : "Recording"
 			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
 				align: "end",
-				className: "w-72",
+				className: "aperture:w-72",
 				children: /* @__PURE__ */ jsx(RecordingMenuItems, {
 					control,
-					connected: connected && control.collaboration.role === "owner",
+					connected,
 					runningRecordings,
 					now
 				})
 			})] }),
+			/* @__PURE__ */ jsx(ViewportPausedIndicator, {
+				control,
+				connected: viewportConnected
+			}),
 			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
 					type: "button",
@@ -939,10 +1038,10 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 				children: "Viewport and stream"
 			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
 				align: "end",
-				className: "w-56",
+				className: "aperture:w-56",
 				children: /* @__PURE__ */ jsx(ViewportStreamMenuItems, {
 					control,
-					connected: connected && control.collaboration.role !== "viewer",
+					connected: viewportConnected,
 					localCursorEnabled,
 					onLocalCursorChange,
 					busy,
@@ -962,7 +1061,7 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 				children: "More browser actions"
 			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
 				align: "end",
-				className: "w-48",
+				className: "aperture:w-48",
 				children: /* @__PURE__ */ jsx(RestMenuItems, {
 					control,
 					cdpUrl,
@@ -1045,7 +1144,7 @@ function InputControlMenuItem({ control }) {
 	});
 }
 function RecordingMenuItems({ control, connected, runningRecordings, now }) {
-	const recordingAvailable = connected && control.collaboration.role === "owner";
+	const recordingAvailable = connected && control.canRecord;
 	const canStart = recordingAvailable && Boolean(control.activeTargetId) && !control.recordingBusy;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
 		/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Recording" }),
@@ -1053,9 +1152,9 @@ function RecordingMenuItems({ control, connected, runningRecordings, now }) {
 			disabled: !canStart,
 			onClick: () => control.startRecording("tab"),
 			children: [/* @__PURE__ */ jsx(Circle, {}), /* @__PURE__ */ jsxs("span", {
-				className: "flex min-w-0 flex-col",
+				className: "aperture:flex aperture:min-w-0 aperture:flex-col",
 				children: [/* @__PURE__ */ jsx("span", { children: "Record this tab" }), /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground",
+					className: "aperture:text-xs aperture:text-muted-foreground",
 					children: "Stay pinned to this target"
 				})]
 			})]
@@ -1064,9 +1163,9 @@ function RecordingMenuItems({ control, connected, runningRecordings, now }) {
 			disabled: !canStart,
 			onClick: () => control.startRecording("viewer"),
 			children: [/* @__PURE__ */ jsx(Monitor, {}), /* @__PURE__ */ jsxs("span", {
-				className: "flex min-w-0 flex-col",
+				className: "aperture:flex aperture:min-w-0 aperture:flex-col",
 				children: [/* @__PURE__ */ jsx("span", { children: "Record this viewer" }), /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground",
+					className: "aperture:text-xs aperture:text-muted-foreground",
 					children: recordingAvailable ? "Follow tab switches" : "Owner connection required"
 				})]
 			})]
@@ -1075,9 +1174,9 @@ function RecordingMenuItems({ control, connected, runningRecordings, now }) {
 		const target = control.targets.find((candidate) => candidate.id === recording.targetId);
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
 			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: /* @__PURE__ */ jsxs("span", {
-				className: "flex min-w-0 items-center justify-between gap-2",
+				className: "aperture:flex aperture:min-w-0 aperture:items-center aperture:justify-between aperture:gap-2",
 				children: [/* @__PURE__ */ jsxs("span", {
-					className: "truncate",
+					className: "aperture:truncate",
 					children: [
 						recording.mode === "viewer" ? "Viewer" : "Tab",
 						":",
@@ -1085,7 +1184,7 @@ function RecordingMenuItems({ control, connected, runningRecordings, now }) {
 						target?.title || recording.targetId.slice(0, 8)
 					]
 				}), /* @__PURE__ */ jsx("span", {
-					className: "shrink-0 tabular-nums",
+					className: "aperture:shrink-0 aperture:tabular-nums",
 					children: formatElapsed(recording.startedAt, now)
 				})]
 			}) }),
@@ -1118,6 +1217,12 @@ function ViewportStreamMenuItems({ control, connected, localCursorEnabled, onLoc
 			onCheckedChange: control.setRemoteCursorEnabled,
 			children: [/* @__PURE__ */ jsx(MousePointer2, {}), "Remote cursor"]
 		}),
+		/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+			disabled: !connected || !control.canRecord,
+			checked: control.watchableAutomation,
+			onCheckedChange: control.setWatchableAutomation,
+			children: [/* @__PURE__ */ jsx(Eye, {}), "Watchable automation"]
+		}),
 		/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
 			checked: localCursorEnabled,
 			onCheckedChange: onLocalCursorChange,
@@ -1135,7 +1240,7 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
 	const source = control.mediaPath === "websocket-live" ? "jpeg" : qualityUpdatesEnabled ? settings?.profile : "webrtc";
 	const disabled = control.mediaSwitching || control.phase !== "connected";
 	return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Gauge, {}), "Stream"] }), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
-		className: "w-64",
+		className: "aperture:w-64",
 		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
 			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Source" }),
 			/* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
@@ -1163,9 +1268,9 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
 						value: "webrtc",
 						disabled,
 						children: /* @__PURE__ */ jsxs("span", {
-							className: "flex min-w-0 flex-col",
+							className: "aperture:flex aperture:min-w-0 aperture:flex-col",
 							children: [/* @__PURE__ */ jsx("span", { children: "WebRTC" }), /* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
+								className: "aperture:text-xs aperture:text-muted-foreground",
 								children: "Live video"
 							})]
 						})
@@ -1174,9 +1279,9 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
 						value: profile.id,
 						disabled: disabled || !settings,
 						children: /* @__PURE__ */ jsxs("span", {
-							className: "flex min-w-0 flex-col",
+							className: "aperture:flex aperture:min-w-0 aperture:flex-col",
 							children: [/* @__PURE__ */ jsx("span", { children: profile.label }), /* @__PURE__ */ jsxs("span", {
-								className: "text-xs text-muted-foreground",
+								className: "aperture:text-xs aperture:text-muted-foreground",
 								children: [profile.codec, " · WebRTC"]
 							})]
 						})
@@ -1185,9 +1290,9 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
 						value: "jpeg",
 						disabled,
 						children: /* @__PURE__ */ jsxs("span", {
-							className: "flex min-w-0 flex-col",
+							className: "aperture:flex aperture:min-w-0 aperture:flex-col",
 							children: [/* @__PURE__ */ jsx("span", { children: "JPEG" }), /* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
+								className: "aperture:text-xs aperture:text-muted-foreground",
 								children: "WebSocket raster stream"
 							})]
 						})
@@ -1210,9 +1315,9 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
 						value: preset.id,
 						disabled,
 						children: /* @__PURE__ */ jsxs("span", {
-							className: "flex min-w-0 flex-col",
+							className: "aperture:flex aperture:min-w-0 aperture:flex-col",
 							children: [/* @__PURE__ */ jsx("span", { children: preset.label }), /* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
+								className: "aperture:text-xs aperture:text-muted-foreground",
 								children: preset.detail
 							})]
 						})
@@ -1228,9 +1333,43 @@ function StreamMenu({ control, qualityUpdatesEnabled }) {
 		] })
 	})] });
 }
+function viewportSizeController(control) {
+	const ownership = control.viewportOwnership;
+	const ownerClientId = ownership?.ownerClientId ?? null;
+	if (ownership === null || ownerClientId === control.collaboration.clientId) return null;
+	const ownerName = control.collaboration.participants.find((participant) => participant.clientId === ownerClientId)?.name ?? null;
+	if (ownerName !== null) return `Size controlled by ${ownerName}`;
+	return control.viewportAutoSync ? "Paused: size was set explicitly" : null;
+}
+function ViewportPausedIndicator({ control, connected }) {
+	const sizeController = viewportSizeController(control);
+	if (!control.viewportAutoSync || control.viewportAutoSizeActive || sizeController === null) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			className: "aperture:text-muted-foreground",
+			"aria-label": `Auto-size paused. ${sizeController}`
+		}) }),
+		children: /* @__PURE__ */ jsx(MonitorPause, {})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: sizeController
+	})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "aperture:w-56",
+		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: sizeController }), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: !connected,
+			onClick: () => control.takeOverViewport(),
+			children: [/* @__PURE__ */ jsx(Hand, {}), "Take over size"]
+		})] })
+	})] });
+}
 function ViewportMenu({ control, connected }) {
+	const sizeController = viewportSizeController(control);
 	return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Monitor, {}), "Viewport"] }), /* @__PURE__ */ jsxs(DropdownMenuSubContent, {
-		className: "w-64",
+		className: "aperture:w-64",
 		children: [
 			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Viewport" }),
 			/* @__PURE__ */ jsxs(DropdownMenuItem, {
@@ -1242,7 +1381,23 @@ function ViewportMenu({ control, connected }) {
 				disabled: !connected || !control.browserViewportSize,
 				checked: control.viewportAutoSync,
 				onCheckedChange: control.setViewportAutoSync,
-				children: [/* @__PURE__ */ jsx(Monitor, {}), "Auto sync browser size"]
+				children: [/* @__PURE__ */ jsx(Monitor, {}), /* @__PURE__ */ jsxs("span", {
+					className: "aperture:flex aperture:min-w-0 aperture:flex-col",
+					children: [/* @__PURE__ */ jsx("span", { children: "Auto-size" }), sizeController !== null ? /* @__PURE__ */ jsx("span", {
+						className: "aperture:truncate aperture:text-xs aperture:text-muted-foreground",
+						children: sizeController
+					}) : null]
+				})]
+			}),
+			sizeController !== null ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: !connected || !control.browserViewportSize,
+				onClick: () => control.takeOverViewport(),
+				children: [/* @__PURE__ */ jsx(Hand, {}), "Take over size"]
+			}) : null,
+			/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+				checked: control.viewportAutoSizeDefault,
+				onCheckedChange: control.setViewportAutoSizeDefault,
+				children: [/* @__PURE__ */ jsx(Monitor, {}), "Auto-size by default"]
 			}),
 			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
 			/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
@@ -1300,16 +1455,16 @@ function CustomViewportSettings({ viewport, connected, onApply }) {
 	});
 	const unchanged = nextViewport ? viewport.width === nextViewport.width && viewport.height === nextViewport.height && viewport.deviceScaleFactor === nextViewport.deviceScaleFactor : false;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "grid gap-2 px-2 py-1.5",
+		className: "aperture:grid aperture:gap-2 aperture:px-2 aperture:py-1.5",
 		onClick: (event) => event.stopPropagation(),
 		onKeyDown: (event) => event.stopPropagation(),
 		children: [
 			/* @__PURE__ */ jsx(DropdownMenuLabel, {
-				className: "px-0",
+				className: "aperture:px-0",
 				children: "Custom"
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "grid grid-cols-3 gap-2",
+				className: "aperture:grid aperture:grid-cols-3 aperture:gap-2",
 				children: [
 					/* @__PURE__ */ jsx(StreamNumberField, {
 						label: "Width",
@@ -1331,7 +1486,7 @@ function CustomViewportSettings({ viewport, connected, onApply }) {
 			/* @__PURE__ */ jsx(Button$1, {
 				type: "button",
 				size: "sm",
-				className: "h-7",
+				className: "aperture:h-7",
 				disabled: !connected || !nextViewport || unchanged,
 				onClick: () => {
 					if (nextViewport) onApply(nextViewport);
@@ -1354,16 +1509,16 @@ function CustomStreamSettings({ settings, disabled, onApply }) {
 	});
 	const unchanged = settings.fps === nextSettings?.fps && settings.bitrateKbps === nextSettings?.bitrateKbps;
 	return /* @__PURE__ */ jsxs(FieldGroup, {
-		className: "gap-2 px-2 py-1.5",
+		className: "aperture:gap-2 aperture:px-2 aperture:py-1.5",
 		onClick: (event) => event.stopPropagation(),
 		onKeyDown: (event) => event.stopPropagation(),
 		children: [
 			/* @__PURE__ */ jsx(DropdownMenuLabel, {
-				className: "px-0",
+				className: "aperture:px-0",
 				children: "Custom"
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "grid grid-cols-2 gap-2",
+				className: "aperture:grid aperture:grid-cols-2 aperture:gap-2",
 				children: [/* @__PURE__ */ jsx(StreamNumberField, {
 					label: "FPS",
 					value: fps,
@@ -1377,7 +1532,7 @@ function CustomStreamSettings({ settings, disabled, onApply }) {
 			/* @__PURE__ */ jsx(Button$1, {
 				type: "button",
 				size: "sm",
-				className: "h-7 w-full",
+				className: "aperture:h-7 aperture:w-full",
 				disabled: disabled || !nextSettings || unchanged,
 				onClick: () => {
 					if (nextSettings) onApply({
@@ -1393,7 +1548,7 @@ function CustomStreamSettings({ settings, disabled, onApply }) {
 function StreamNumberField({ label, value, onChange }) {
 	const id = useId();
 	return /* @__PURE__ */ jsxs(Field, {
-		className: "gap-1",
+		className: "aperture:gap-1",
 		children: [/* @__PURE__ */ jsx(FieldLabel, {
 			htmlFor: id,
 			children: label
@@ -1404,14 +1559,14 @@ function StreamNumberField({ label, value, onChange }) {
 			value,
 			onChange: (event) => onChange(digitsOnly(event.currentTarget.value)),
 			onFocus: (event) => event.currentTarget.select(),
-			className: "h-7"
+			className: "aperture:h-7"
 		})]
 	});
 }
 function ViewportScaleField({ label, value, onChange }) {
 	const id = useId();
 	return /* @__PURE__ */ jsxs(Field, {
-		className: "gap-1",
+		className: "aperture:gap-1",
 		children: [/* @__PURE__ */ jsx(FieldLabel, {
 			htmlFor: id,
 			children: label
@@ -1422,7 +1577,7 @@ function ViewportScaleField({ label, value, onChange }) {
 			value,
 			onChange: (event) => onChange(decimalNumber(event.currentTarget.value)),
 			onFocus: (event) => event.currentTarget.select(),
-			className: "h-7"
+			className: "aperture:h-7"
 		})]
 	});
 }
@@ -1481,28 +1636,28 @@ function Avatar$1({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Avatar.Root, {
 		"data-slot": "avatar",
 		"data-size": size,
-		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),
+		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),
 		...props
 	});
 }
 function AvatarImage({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar.Image, {
 		"data-slot": "avatar-image",
-		className: cn("aspect-square size-full rounded-full object-cover", className),
+		className: cn("aperture:aspect-square aperture:size-full aperture:rounded-full aperture:object-cover", className),
 		...props
 	});
 }
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar.Fallback, {
 		"data-slot": "avatar-fallback",
-		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),
+		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),
 		...props
 	});
 }
 function AvatarBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "avatar-badge",
-		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),
+		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),
 		...props
 	});
 }
@@ -1528,10 +1683,10 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
 			alignOffset,
 			side,
 			sideOffset,
-			className: "isolate z-50",
+			className: "aperture:isolate aperture:z-50",
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				"data-slot": "popover-content",
-				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),
+				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),
 				...props
 			})
 		})
@@ -1540,7 +1695,7 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
 function PopoverTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Title, {
 		"data-slot": "popover-title",
-		className: cn("font-medium", className),
+		className: cn("aperture:font-medium", className),
 		...props
 	});
 }
@@ -1558,10 +1713,10 @@ function CollaborationPresence({ collaboration }) {
 	const overflow = participants.length - visible.length;
 	if (visible.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group flex shrink-0 items-center px-2",
+		className: "aperture:group aperture:flex aperture:shrink-0 aperture:items-center aperture:px-2",
 		"aria-label": "Session participants",
 		children: [overflow > 0 ? /* @__PURE__ */ jsx("div", {
-			className: "relative transition-[margin] duration-200",
+			className: "aperture:relative aperture:transition-[margin] aperture:duration-200",
 			style: { zIndex: visible.length + 1 },
 			children: /* @__PURE__ */ jsx(OverflowParticipants, {
 				overflow,
@@ -1569,7 +1724,7 @@ function CollaborationPresence({ collaboration }) {
 				collaboration
 			})
 		}) : null, visible.map((participant, index) => /* @__PURE__ */ jsx("div", {
-			className: cn("relative transition-[margin] duration-200", (index > 0 || overflow > 0) && "-ml-4 group-hover:ml-0 group-focus-within:ml-0"),
+			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"),
 			style: { zIndex: visible.length - index },
 			children: /* @__PURE__ */ jsx(ParticipantButton, {
 				participant,
@@ -1584,18 +1739,18 @@ function OverflowParticipants({ overflow, participants, collaboration }) {
 			type: "button",
 			variant: "ghost",
 			size: "icon-sm",
-			className: "shrink-0 rounded-full border bg-background text-[0.65rem] text-muted-foreground",
+			className: "aperture:shrink-0 aperture:rounded-full aperture:border aperture:bg-background aperture:text-[0.65rem] aperture:text-muted-foreground",
 			"aria-label": `${overflow} more participants`
 		}),
 		children: ["+", overflow]
 	}), /* @__PURE__ */ jsxs(PopoverContent, {
 		align: "end",
-		className: "w-auto gap-2",
+		className: "aperture:w-auto aperture:gap-2",
 		children: [/* @__PURE__ */ jsx(PopoverTitle, {
-			className: "text-xs text-muted-foreground",
+			className: "aperture:text-xs aperture:text-muted-foreground",
 			children: "Everyone"
 		}), /* @__PURE__ */ jsx("div", {
-			className: "flex flex-wrap items-center gap-1",
+			className: "aperture:flex aperture:flex-wrap aperture:items-center aperture:gap-1",
 			children: participants.map((participant) => /* @__PURE__ */ jsx(ParticipantButton, {
 				participant,
 				collaboration
@@ -1610,13 +1765,13 @@ function ParticipantButton({ participant, collaboration }) {
 	const label = local ? `${participant.name} (you)` : !followable ? participant.name : following ? `${participant.name} · click to stop following` : `${participant.name} · click to follow`;
 	return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		render: local || !followable ? /* @__PURE__ */ jsx("span", {
-			className: "inline-flex size-7 shrink-0 items-center justify-center rounded-full",
+			className: "aperture:inline-flex aperture:size-7 aperture:shrink-0 aperture:items-center aperture:justify-center aperture:rounded-full",
 			"aria-label": label
 		}) : /* @__PURE__ */ jsx(Button$1, {
 			type: "button",
 			variant: following ? "secondary" : "ghost",
 			size: "icon-sm",
-			className: "shrink-0 rounded-full p-0",
+			className: "aperture:shrink-0 aperture:rounded-full aperture:p-0",
 			"aria-label": label,
 			"aria-pressed": following,
 			onClick: () => collaboration.follow(following ? null : participant.clientId)
@@ -1634,7 +1789,7 @@ function ParticipantAvatar({ participant, following }) {
 	const controlClaimed = participant.holdingInput && participant.leaseMode === "explicit";
 	return /* @__PURE__ */ jsxs(Avatar$1, {
 		size: "sm",
-		className: cn("shrink-0 ring-2 ring-background", following && "ring-ring"),
+		className: cn("aperture:shrink-0 aperture:ring-2 aperture:ring-background", following && "aperture:ring-ring"),
 		children: [
 			/* @__PURE__ */ jsx(AvatarImage, {
 				src: gravatarURL(participant.avatarHash),
@@ -1642,7 +1797,7 @@ function ParticipantAvatar({ participant, following }) {
 			}),
 			/* @__PURE__ */ jsx(AvatarFallback, { children: initials(participant.name) }),
 			participant.holdingInput ? /* @__PURE__ */ jsx(AvatarBadge, {
-				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"),
+				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"),
 				title: controlClaimed ? "Control claimed" : "Has input control",
 				children: controlClaimed ? /* @__PURE__ */ jsx(Lock, {}) : /* @__PURE__ */ jsx(Radio, {})
 			}) : null
@@ -1665,6 +1820,8 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
 	const browserMutationEnabled = connected && collaborationRole !== "viewer";
 	const drawingAvailable = connected && control.collaboration.phase === "connected" && Boolean(control.activeTargetId);
 	const loading = control.activeTarget?.loading ?? false;
+	const canGoBack = control.activeTarget?.canGoBack ?? true;
+	const canGoForward = control.activeTarget?.canGoForward ?? true;
 	const runningRecordings = control.recordings.filter((recording) => recording.status === "starting" || recording.status === "running");
 	const hasRunningRecordings = runningRecordings.length > 0;
 	const recordingTargetIds = new Set(runningRecordings.map((recording) => recording.targetId));
@@ -1677,10 +1834,10 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
 		setUrlDraft(null);
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-col bg-background",
+		className: "aperture:flex aperture:min-w-0 aperture:flex-col aperture:bg-background",
 		children: [leading || features.tabs || features.presence ? /* @__PURE__ */ jsxs("div", {
 			"data-workbench-titlebar": true,
-			className: "flex min-w-0 shrink-0 items-stretch border-b bg-muted/35",
+			className: "aperture:flex aperture:min-w-0 aperture:shrink-0 aperture:items-stretch aperture:border-b aperture:bg-muted/35",
 			children: [
 				leading,
 				features.tabs ? /* @__PURE__ */ jsx(BrowserTabStrip, {
@@ -1695,25 +1852,26 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
 					onDuplicate: control.duplicateTarget,
 					onClose: control.closeTarget,
 					onReload: control.reload,
-					onReorder: control.reorderTargets
-				}) : /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1" }),
+					onReorder: control.reorderTargets,
+					loadThumbnail: control.loadTargetThumbnail
+				}) : /* @__PURE__ */ jsx("div", { className: "aperture:min-w-0 aperture:flex-1" }),
 				features.presence ? /* @__PURE__ */ jsx(CollaborationPresence, { collaboration: control.collaboration }) : null
 			]
 		}) : null, features.navigation || features.addressBar || features.drawing || features.devTools || features.menus ? /* @__PURE__ */ jsxs("div", {
-			className: "flex h-9 items-center gap-1 px-1.5",
+			className: "aperture:flex aperture:h-9 aperture:items-center aperture:gap-1 aperture:px-1.5",
 			children: [
 				features.navigation ? /* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 items-center gap-0.5",
+					className: "aperture:flex aperture:shrink-0 aperture:items-center aperture:gap-0.5",
 					children: [
 						/* @__PURE__ */ jsx(ToolbarButton, {
 							label: "Back",
-							disabled: !browserMutationEnabled,
+							disabled: !browserMutationEnabled || !canGoBack,
 							onClick: () => control.historyBack(),
 							children: /* @__PURE__ */ jsx(ArrowLeft, {})
 						}),
 						/* @__PURE__ */ jsx(ToolbarButton, {
 							label: "Forward",
-							disabled: !browserMutationEnabled,
+							disabled: !browserMutationEnabled || !canGoForward,
 							onClick: () => control.historyForward(),
 							children: /* @__PURE__ */ jsx(ArrowRight, {})
 						}),
@@ -1729,7 +1887,7 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
 					]
 				}) : null,
 				features.addressBar ? /* @__PURE__ */ jsx(InputGroup, {
-					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",
+					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",
 					children: /* @__PURE__ */ jsx(InputGroupInput, {
 						value: urlDraft ?? displayUrl,
 						onChange: (event) => setUrlDraft(event.target.value),
@@ -1741,17 +1899,17 @@ function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl,
 							}
 						},
 						placeholder: "URL",
-						className: "h-7 px-2 font-mono text-xs text-muted-foreground transition-colors focus-visible:text-foreground",
+						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",
 						disabled: !browserMutationEnabled
 					})
-				}) : /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1" }),
-				busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground" }) : null,
+				}) : /* @__PURE__ */ jsx("div", { className: "aperture:min-w-0 aperture:flex-1" }),
+				busy ? /* @__PURE__ */ jsx(Loader2, { className: "aperture:size-4 aperture:shrink-0 aperture:animate-spin aperture:text-muted-foreground" }) : null,
 				features.drawing ? /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 					render: /* @__PURE__ */ jsx(Button$1, {
 						type: "button",
 						variant: paintingEnabled ? "secondary" : "ghost",
 						size: "icon-sm",
-						className: "shrink-0",
+						className: "aperture:shrink-0",
 						disabled: !paintingEnabled && !drawingAvailable,
 						"aria-label": paintingEnabled ? "Stop drawing" : "Draw on this tab",
 						"aria-pressed": paintingEnabled,
@@ -1852,14 +2010,14 @@ function isLikelyHost(value) {
 }
 //#endregion
 //#region ../ui/src/components/badge.tsx
-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!", {
+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!", {
 	variants: { variant: {
-		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-		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",
-		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-		link: "text-primary underline-offset-4 hover:underline"
+		default: "aperture:bg-primary aperture:text-primary-foreground aperture:[a]:hover:bg-primary/80",
+		secondary: "aperture:bg-secondary aperture:text-secondary-foreground aperture:[a]:hover:bg-secondary/80",
+		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",
+		outline: "aperture:border-border aperture:text-foreground aperture:[a]:hover:bg-muted aperture:[a]:hover:text-muted-foreground",
+		ghost: "aperture:hover:bg-muted aperture:hover:text-muted-foreground aperture:dark:hover:bg-muted/50",
+		link: "aperture:text-primary aperture:underline-offset-4 aperture:hover:underline"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -1885,7 +2043,7 @@ function showNotice(notice) {
 function BrowserViewport({ statusBadge = true, className, ...props }) {
 	return /* @__PURE__ */ jsx(SessionViewport, {
 		...props,
-		className: className ?? "bg-background",
+		className: className ?? "aperture:bg-background",
 		onNotice: showNotice,
 		renderOverlay: (overlay) => /* @__PURE__ */ jsx(ViewportOverlay, {
 			overlay,
@@ -1896,26 +2054,26 @@ function BrowserViewport({ statusBadge = true, className, ...props }) {
 function ViewportOverlay({ overlay, statusBadge }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		overlay.placeholder ? /* @__PURE__ */ jsx("div", {
-			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			className: "aperture:pointer-events-none aperture:absolute aperture:inset-0 aperture:flex aperture:items-center aperture:justify-center",
 			children: /* @__PURE__ */ jsx(ViewportPlaceholder, { placeholder: overlay.placeholder })
 		}) : null,
 		statusBadge ? /* @__PURE__ */ jsx("div", {
-			className: "pointer-events-none absolute right-2 bottom-2 flex items-center gap-1.5",
+			className: "aperture:pointer-events-none aperture:absolute aperture:right-2 aperture:bottom-2 aperture:flex aperture:items-center aperture:gap-1.5",
 			children: /* @__PURE__ */ jsx(StatusBadge, { status: overlay.status })
 		}) : null,
 		overlay.followedCursor ? /* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-none absolute z-30 flex translate-x-[-2px] translate-y-[-2px] items-start text-primary drop-shadow-sm",
+			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",
 			style: {
 				left: overlay.followedCursor.x,
 				top: overlay.followedCursor.y
 			},
-			children: [/* @__PURE__ */ jsx(MousePointer2, { className: "size-5 fill-primary stroke-background stroke-[1.5]" }), /* @__PURE__ */ jsx("span", {
-				className: "mt-4 -ml-1 rounded bg-primary px-1.5 py-0.5 text-[10px] leading-none font-medium whitespace-nowrap text-primary-foreground",
+			children: [/* @__PURE__ */ jsx(MousePointer2, { className: "aperture:size-5 aperture:fill-primary aperture:stroke-background aperture:stroke-[1.5]" }), /* @__PURE__ */ jsx("span", {
+				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",
 				children: overlay.followedCursor.name
 			})]
 		}) : null,
 		overlay.cursorHint ? /* @__PURE__ */ jsx("div", {
-			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",
+			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",
 			style: {
 				left: overlay.cursorHint.x,
 				top: overlay.cursorHint.y
@@ -1923,7 +2081,7 @@ function ViewportOverlay({ overlay, statusBadge }) {
 			children: overlay.cursorHint.text
 		}) : null,
 		overlay.collaborationError ? /* @__PURE__ */ jsx("div", {
-			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",
+			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",
 			children: overlay.collaborationError
 		}) : null
 	] });
@@ -1937,14 +2095,14 @@ const placeholderLabels = {
 };
 function ViewportPlaceholder({ placeholder }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-center gap-2 text-sm text-muted-foreground",
-		children: [placeholder === "disconnected" ? /* @__PURE__ */ jsx(Unplug, { className: "size-5" }) : /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin" }), placeholderLabels[placeholder]]
+		className: "aperture:flex aperture:flex-col aperture:items-center aperture:gap-2 aperture:text-sm aperture:text-muted-foreground",
+		children: [placeholder === "disconnected" ? /* @__PURE__ */ jsx(Unplug, { className: "aperture:size-5" }) : /* @__PURE__ */ jsx(Loader2, { className: "aperture:size-5 aperture:animate-spin" }), placeholderLabels[placeholder]]
 	});
 }
 function StatusBadge({ status }) {
 	if (status === "webrtc" || status === "websocket") return /* @__PURE__ */ jsx(Badge, {
 		variant: "secondary",
-		className: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+		className: "aperture:bg-emerald-500/15 aperture:text-emerald-700 aperture:dark:text-emerald-300",
 		children: status
 	});
 	return /* @__PURE__ */ jsx(Badge, {
@@ -1965,7 +2123,7 @@ function BrowserDevToolsPane({ cdpUrl, targetId }) {
 		return frame.toString();
 	}, [cdpUrl, targetId]);
 	if (!src) return /* @__PURE__ */ jsx(Empty, {
-		className: "h-full rounded-none border-none",
+		className: "aperture:h-full aperture:rounded-none aperture:border-none",
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, {
 				variant: "icon",
@@ -1976,7 +2134,7 @@ function BrowserDevToolsPane({ cdpUrl, targetId }) {
 		] })
 	});
 	return /* @__PURE__ */ jsx("iframe", {
-		className: "h-full w-full border-0 bg-background",
+		className: "aperture:h-full aperture:w-full aperture:border-0 aperture:bg-background",
 		src,
 		title: "Browser DevTools",
 		allow: "clipboard-read; clipboard-write",
@@ -1988,7 +2146,7 @@ function BrowserDevToolsPane({ cdpUrl, targetId }) {
 function ResizablePanelGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ResizablePrimitive.Group, {
 		"data-slot": "resizable-panel-group",
-		className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className),
+		className: cn("aperture:flex aperture:h-full aperture:w-full aperture:aria-[orientation=vertical]:flex-col", className),
 		...props
 	});
 }
@@ -2001,9 +2159,9 @@ function ResizablePanel({ ...props }) {
 function ResizableHandle({ withHandle, className, ...props }) {
 	return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
 		"data-slot": "resizable-handle",
-		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),
+		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),
 		...props,
-		children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+		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" })
 	});
 }
 //#endregion
@@ -2052,8 +2210,16 @@ function BrowserControlPane({ control, leading, features: featureOverrides, coll
 			window.localStorage.setItem(LOCAL_CURSOR_STORAGE_KEY, String(enabled));
 		} catch {}
 	}
+	const viewport = /* @__PURE__ */ jsx(BrowserViewport, {
+		control,
+		viewport: control.viewport,
+		localCursorEnabled,
+		paintingEnabled: features.drawing && paintingEnabled,
+		onPaintingEnabledChange: setPaintingEnabled,
+		statusBadge: features.statusBadge
+	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+		className: "aperture:flex aperture:h-full aperture:min-h-0 aperture:min-w-0 aperture:flex-1 aperture:flex-col aperture:overflow-hidden",
 		children: [/* @__PURE__ */ jsx(BrowserToolbar, {
 			control,
 			leading,
@@ -2071,22 +2237,15 @@ function BrowserControlPane({ control, leading, features: featureOverrides, coll
 			onDevToolsOpenChange: handleDevToolsOpenChange,
 			onDevToolsDockChange: setDevToolsDock,
 			onSessionDetails
-		}), /* @__PURE__ */ jsxs(ResizablePanelGroup, {
+		}), features.devTools ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
 			orientation: devToolsDock === "bottom" ? "vertical" : "horizontal",
-			className: "min-h-0 min-w-0 flex-1 has-[[data-separator=active]]:[&_iframe]:pointer-events-none",
+			className: "aperture:min-h-0 aperture:min-w-0 aperture:flex-1 aperture:has-[[data-separator=active]]:[&_iframe]:pointer-events-none",
 			children: [
 				/* @__PURE__ */ jsx(ResizablePanel, {
-					className: "flex min-h-0 min-w-0",
+					className: "aperture:flex aperture:min-h-0 aperture:min-w-0",
 					defaultSize: "60%",
 					minSize: "20%",
-					children: /* @__PURE__ */ jsx(BrowserViewport, {
-						control,
-						viewport: control.viewport,
-						localCursorEnabled,
-						paintingEnabled: features.drawing && paintingEnabled,
-						onPaintingEnabledChange: setPaintingEnabled,
-						statusBadge: features.statusBadge
-					})
+					children: viewport
 				}),
 				/* @__PURE__ */ jsx(ResizableHandle, {
 					withHandle: true,
@@ -2095,12 +2254,12 @@ function BrowserControlPane({ control, leading, features: featureOverrides, coll
 				}),
 				/* @__PURE__ */ jsx(ResizablePanel, {
 					panelRef: devToolsPanelRef,
-					className: "flex min-h-0 min-w-0",
+					className: "aperture:flex aperture:min-h-0 aperture:min-w-0",
 					collapsible: true,
 					defaultSize: "40%",
 					minSize: "20%",
-					children: Array.from(features.devTools ? devToolsTargetIds : [], (targetId) => /* @__PURE__ */ jsx("div", {
-						className: "h-full min-h-0 w-full min-w-0",
+					children: Array.from(devToolsTargetIds, (targetId) => /* @__PURE__ */ jsx("div", {
+						className: "aperture:h-full aperture:min-h-0 aperture:w-full aperture:min-w-0",
 						hidden: targetId !== activeTargetId,
 						children: /* @__PURE__ */ jsx(BrowserDevToolsPane, {
 							cdpUrl,
@@ -2109,28 +2268,19 @@ function BrowserControlPane({ control, leading, features: featureOverrides, coll
 					}, targetId))
 				})
 			]
-		})]
+		}) : viewport]
 	});
 }
 //#endregion
-//#region src/aperture-session.tsx
-function ApertureSession({ baseUrl, theme = "system", className, ...props }) {
+//#region src/ui-root.tsx
+function ApertureUIRoot({ theme = "system", className, children }) {
 	const [root, setRoot] = useState(null);
-	const dark = useDarkTheme(theme);
 	return /* @__PURE__ */ jsx("div", {
 		ref: setRoot,
-		className: cn("aperture-root relative h-full w-full", dark && "dark", className),
-		children: root ? /* @__PURE__ */ jsx(ApertureProvider, {
-			baseUrl,
-			children: /* @__PURE__ */ jsx(PortalContainerProvider, {
-				container: root,
-				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [/* @__PURE__ */ jsx(SharedSession, { ...props }), props.features?.toaster !== false ? /* @__PURE__ */ jsx(Toaster$1, {
-					theme: dark ? "dark" : "light",
-					richColors: true,
-					closeButton: true,
-					position: "bottom-center"
-				}) : null] })
-			})
+		className: cn("aperture-root aperture:relative aperture:h-full aperture:w-full", useDarkTheme(theme) && "aperture-dark", className),
+		children: root ? /* @__PURE__ */ jsx(PortalContainerProvider, {
+			container: root,
+			children: /* @__PURE__ */ jsx(TooltipProvider, { children })
 		}) : null
 	});
 }
@@ -2146,36 +2296,58 @@ function useDarkTheme(theme) {
 	}, [theme]);
 	return theme === "dark" || theme === "system" && systemDark;
 }
-function SharedSession({ token, features, leading }) {
-	const { status, share, control } = useSharedSession({
-		token,
+//#endregion
+//#region src/aperture-session.tsx
+function ApertureSession({ theme = "system", className, ...props }) {
+	return /* @__PURE__ */ jsx(ApertureUIRoot, {
+		theme,
+		className,
+		children: /* @__PURE__ */ jsxs(ApertureProvider, {
+			baseUrl: props.access?.baseUrl,
+			children: [/* @__PURE__ */ jsx(Session, { ...props }), props.features?.toaster !== false ? /* @__PURE__ */ jsx(Toaster$1, {
+				theme,
+				richColors: true,
+				closeButton: true,
+				position: "bottom-center"
+			}) : null]
+		})
+	});
+}
+function Session({ access, features, leading }) {
+	const { status, control } = useSession({
+		access,
 		onNotice: showNotice
 	});
 	switch (status) {
 		case "invalid": return /* @__PURE__ */ jsx(SessionState, {
 			icon: /* @__PURE__ */ jsx(Link2Off, {}),
-			title: "Invalid share link",
-			description: "This link does not contain a valid session capability."
+			title: "Invalid session access",
+			description: "Provide a valid session connection."
 		});
 		case "loading": return /* @__PURE__ */ jsx(SessionState, {
-			icon: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }),
-			title: "Opening shared session"
+			icon: /* @__PURE__ */ jsx(Loader2, { className: "aperture:animate-spin" }),
+			title: "Opening session"
+		});
+		case "denied": return /* @__PURE__ */ jsx(SessionState, {
+			icon: /* @__PURE__ */ jsx(Link2Off, {}),
+			title: "Session access denied",
+			description: "Sign in to the app or ask for access to this session."
 		});
 		case "expired": return /* @__PURE__ */ jsx(SessionState, {
 			icon: /* @__PURE__ */ jsx(Link2Off, {}),
-			title: "Share link expired",
-			description: "This session capability has expired. Ask the session owner for a new link."
+			title: "Session access expired",
+			description: "Ask the session owner to renew access."
 		});
 		case "unavailable": return /* @__PURE__ */ jsx(SessionState, {
 			icon: /* @__PURE__ */ jsx(Link2Off, {}),
-			title: "Shared session unavailable",
-			description: "This link is invalid, revoked, or the shared session is no longer available."
+			title: "Session unavailable",
+			description: "This session is unavailable or access has been revoked."
 		});
 		case "ready": return /* @__PURE__ */ jsx("div", {
-			className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-background",
+			className: "aperture:flex aperture:h-full aperture:min-h-0 aperture:flex-1 aperture:flex-col aperture:overflow-hidden aperture:bg-background",
 			children: /* @__PURE__ */ jsx(BrowserControlPane, {
 				control,
-				collaborationRole: share?.role ?? "viewer",
+				collaborationRole: control.collaboration.role,
 				cdpUrl: null,
 				shareUrls: null,
 				leading,
@@ -2195,7 +2367,7 @@ function devToolsUrl(origin, cdpUrl, sessionToken) {
 }
 function SessionState({ icon, title, description }) {
 	return /* @__PURE__ */ jsx(Empty, {
-		className: "h-full border-none",
+		className: "aperture:h-full aperture:border-none",
 		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
 			/* @__PURE__ */ jsx(EmptyMedia, {
 				variant: "icon",
@@ -2207,6 +2379,6 @@ function SessionState({ icon, title, description }) {
 	});
 }
 //#endregion
-export { ApertureProvider, ApertureSession, BrowserControlPane, BrowserViewport, ClipboardError, LiveSessionError, RuntimeProvider, RuntimeProviderMissingError, SessionViewport, SharedSession, collaborationPaintLifetimeMs, copyText, copyTextWithToast, devToolsUrl, makeApertureRuntime, parseShareToken, resolveSessionFeatures, showNotice, useBaseUrl, useBrowserControl, useEffectCallback, useFork, useLiveSession, useRunApi, useRuntime, useSharedSession };
+export { ApertureProvider, ApertureSession, ApertureUIRoot, BrowserControlPane, BrowserViewport, ClipboardError, LiveSessionError, RuntimeProvider, RuntimeProviderMissingError, Session, SessionViewport, collaborationPaintLifetimeMs, copyText, copyTextWithToast, devToolsUrl, makeApertureRuntime, resolveSessionFeatures, shareSessionAccess, showNotice, useBaseUrl, useBrowserControl, useEffectCallback, useFork, useLiveSession, useRunApi, useRuntime, useSession };
 
 //# sourceMappingURL=index.js.map