@aperture-browser/session-react 0.0.0-init.0

package/dist/index.js

@@ -0,0 +1,2212 @@
+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 { 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 { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+import { twMerge } 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 { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+import "@base-ui/react/separator";
+import { Menu } from "@base-ui/react/menu";
+import { Avatar } from "@base-ui/react/avatar";
+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
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region ../ui/src/components/empty.tsx
+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),
+		...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),
+		...props
+	});
+}
+const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_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"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		className: cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-title",
+		className: cn("text-sm font-medium 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),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/sonner.tsx
+const Toaster$1 = ({ ...props }) => {
+	const { theme = "system" } = useTheme();
+	return /* @__PURE__ */ jsx(Toaster, {
+		theme,
+		className: "toaster 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" })
+		},
+		style: {
+			"--normal-bg": "var(--popover)",
+			"--normal-text": "var(--popover-foreground)",
+			"--normal-border": "var(--border)",
+			"--border-radius": "var(--radius)"
+		},
+		toastOptions: { classNames: { toast: "cn-toast" } },
+		...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 {
+		tabs: true,
+		navigation: true,
+		addressBar: true,
+		presence: true,
+		drawing: true,
+		devTools: true,
+		menus: true,
+		statusBadge: true,
+		...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", {
+	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"
+		},
+		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"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Button$1({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/context-menu.tsx
+function ContextMenu$1({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+function ContextMenuTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: cn("select-none", className),
+		...props
+	});
+}
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, {
+		container: usePortalContainer(),
+		children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+			className: "isolate z-50 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),
+				...props
+			})
+		})
+	});
+}
+function ContextMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+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),
+		...props
+	});
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		"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),
+		...props
+	});
+}
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+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),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2",
+			children: /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+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),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/input.tsx
+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),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/input-group.tsx
+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),
+		...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", {
+	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"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>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"
+	} },
+	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),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/scroll-area.tsx
+function ScrollArea$1({ className, viewportClassName, 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),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				"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),
+				children
+			}),
+			vertical ? /* @__PURE__ */ jsx(ScrollBar, {}) : null,
+			horizontal ? /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }) : null,
+			/* @__PURE__ */ jsx(ScrollArea.Corner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"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),
+		...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"
+		})
+	});
+}
+//#endregion
+//#region src/clipboard.ts
+/** The browser refused to write to the clipboard. */
+var ClipboardError = class extends Data.TaggedError("ClipboardError") {
+	message = "Clipboard write is unavailable";
+};
+const copyText = (value) => Effect.suspend(() => {
+	const clipboard = navigator.clipboard;
+	if (clipboard?.writeText) return Effect.tryPromise({
+		try: () => clipboard.writeText(value),
+		catch: (cause) => new ClipboardError({ cause })
+	});
+	const textArea = document.createElement("textarea");
+	textArea.value = value;
+	textArea.readOnly = true;
+	textArea.style.position = "fixed";
+	textArea.style.top = "0";
+	textArea.style.left = "-9999px";
+	document.body.append(textArea);
+	textArea.select();
+	const copied = document.execCommand("copy");
+	textArea.remove();
+	return copied ? Effect.void : Effect.fail(new ClipboardError({}));
+});
+/** Copies `value`, then runs `onCopied`, or shows an error toast if the copy fails. */
+const copyTextWithToast = (value, onCopied = () => {}) => copyText(value).pipe(Effect.andThen(Effect.sync(onCopied)), Effect.catchTag("ClipboardError", (error) => Effect.sync(() => {
+	console.warn("Copy failed", error);
+	toast.error("Copy failed");
+})));
+//#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 }) {
+	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",
+		children: [/* @__PURE__ */ jsx("span", { children: "No tabs" }), /* @__PURE__ */ jsx(NewTabButton, {
+			disabled: disabled || mutationDisabled,
+			onCreate
+		})]
+	});
+	return /* @__PURE__ */ jsx(ScrollArea$1, {
+		scrollbars: "horizontal",
+		className: "h-8 min-w-0 flex-1",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-max items-end gap-0.5 px-1 pt-1",
+			children: [targets.map((target, index) => {
+				return /* @__PURE__ */ jsx(BrowserTab, {
+					target,
+					active: target.id === activeTargetId,
+					recording: recordingTargetIds.has(target.id),
+					devToolsOpen: devToolsTargetIds.has(target.id),
+					disabled,
+					mutationDisabled,
+					onActivate,
+					onDuplicate,
+					onClose,
+					onReload,
+					onReorder,
+					closeOtherTargetIds: targets.filter((current) => current.id !== target.id).map((current) => current.id),
+					closeRightTargetIds: targets.slice(index + 1).map((current) => current.id)
+				}, target.id);
+			}), /* @__PURE__ */ jsx(NewTabButton, {
+				disabled: disabled || mutationDisabled,
+				onCreate
+			})]
+		})
+	});
+}
+function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutationDisabled, onActivate, onDuplicate, onClose, onReload, onReorder, closeOtherTargetIds, closeRightTargetIds }) {
+	const tabRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const [dropPlacement, setDropPlacement] = useState(null);
+	const label = simplifyUrl(target.url);
+	const copyUrl = useEffectCallback((url) => copyTextWithToast(url), []);
+	useEffect(() => {
+		const element = tabRef.current;
+		if (!element) return;
+		return combine(draggable({
+			element,
+			getInitialData: () => ({
+				kind: BROWSER_TAB_DRAG_KIND,
+				targetId: target.id
+			}),
+			onDragStart: () => setDragging(true),
+			onDrop: () => setDragging(false)
+		}), dropTargetForElements({
+			element,
+			canDrop: ({ source }) => {
+				return isBrowserTabDragData(source.data) && source.data.targetId !== target.id;
+			},
+			getData: () => ({
+				kind: BROWSER_TAB_DRAG_KIND,
+				targetId: target.id
+			}),
+			onDrag: ({ location, self }) => {
+				setDropPlacement(dropPlacementFromClientX(self.element, location.current.input.clientX));
+			},
+			onDragEnter: ({ location, self }) => {
+				setDropPlacement(dropPlacementFromClientX(self.element, location.current.input.clientX));
+			},
+			onDragLeave: () => setDropPlacement(null),
+			onDrop: ({ source, self, location }) => {
+				setDropPlacement(null);
+				if (!isBrowserTabDragData(source.data)) return;
+				onReorder(source.data.targetId, target.id, dropPlacementFromClientX(self.element, location.current.input.clientX));
+			}
+		}));
+	}, [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);
+				}
+			}
+		}),
+		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__ */ 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",
+				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"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "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"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Recording"
+					})] }) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate font-mono",
+						children: label
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				render: /* @__PURE__ */ jsx(Button$1, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-xs",
+					className: "shrink-0 opacity-55 hover:opacity-100 group-hover:opacity-100",
+					"aria-label": "Close tab",
+					disabled: disabled || mutationDisabled,
+					onClick: () => onClose(target.id)
+				}),
+				children: /* @__PURE__ */ jsx(X, {})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				children: "Close tab"
+			})] })
+		]
+	}), /* @__PURE__ */ jsxs(ContextMenuContent, {
+		className: "min-w-48",
+		children: [
+			/* @__PURE__ */ jsxs(ContextMenuGroup, { children: [
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					disabled: disabled || mutationDisabled,
+					onClick: () => onReload(target.id),
+					children: "Reload"
+				}),
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					disabled: disabled || mutationDisabled,
+					onClick: () => onDuplicate(target),
+					children: "Duplicate"
+				}),
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					onClick: () => copyUrl(target.url || "about:blank"),
+					children: "Copy URL"
+				})
+			] }),
+			/* @__PURE__ */ jsx(ContextMenuSeparator, {}),
+			/* @__PURE__ */ jsxs(ContextMenuGroup, { children: [
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					disabled: disabled || mutationDisabled,
+					onClick: () => onClose(target.id),
+					children: "Close"
+				}),
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					disabled: disabled || mutationDisabled || closeOtherTargetIds.length === 0,
+					onClick: () => {
+						for (const targetId of closeOtherTargetIds) onClose(targetId);
+					},
+					children: "Close other tabs"
+				}),
+				/* @__PURE__ */ jsx(ContextMenuItem, {
+					disabled: disabled || mutationDisabled || closeRightTargetIds.length === 0,
+					onClick: () => {
+						for (const targetId of closeRightTargetIds) onClose(targetId);
+					},
+					children: "Close tabs to the right"
+				})
+			] })
+		]
+	})] });
+}
+function NewTabButton({ disabled, onCreate }) {
+	return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(Button$1, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-xs",
+			className: "mb-px shrink-0",
+			"aria-label": "New tab",
+			disabled,
+			onClick: onCreate
+		}),
+		children: /* @__PURE__ */ jsx(Plus, {})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: "New tab"
+	})] });
+}
+function TabFavicon({ url }) {
+	const [failed, setFailed] = useState(false);
+	const faviconUrl = resolveFaviconUrl(url);
+	useEffect(() => {
+		setFailed(false);
+	}, [faviconUrl]);
+	if (!faviconUrl || failed) return /* @__PURE__ */ jsx(Globe2, { className: "size-4 shrink-0 text-muted-foreground" });
+	return /* @__PURE__ */ jsx("img", {
+		src: faviconUrl,
+		alt: "",
+		className: "size-4 shrink-0",
+		onError: () => setFailed(true)
+	});
+}
+function resolveFaviconUrl(url) {
+	try {
+		const parsed = new URL(url);
+		if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return null;
+		return `${parsed.origin}/favicon.ico`;
+	} catch {
+		return null;
+	}
+}
+function simplifyUrl(url) {
+	if (!url || url === "about:blank") return "about:blank";
+	try {
+		const parsed = new URL(url);
+		return `${parsed.host}${parsed.pathname === "/" ? "" : parsed.pathname}`;
+	} catch {
+		return url;
+	}
+}
+function isBrowserTabDragData(data) {
+	return data.kind === BROWSER_TAB_DRAG_KIND && typeof data.targetId === "string";
+}
+function dropPlacementFromClientX(element, clientX) {
+	const rect = element.getBoundingClientRect();
+	return clientX < rect.left + rect.width / 2 ? "before" : "after";
+}
+//#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),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/field.tsx
+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),
+		...props
+	});
+}
+const fieldVariants = cva("group/field flex w-full gap-2 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"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+function Field({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...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),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/dropdown-menu.tsx
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		container: usePortalContainer(),
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			className: "isolate z-50 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),
+				...props
+			})
+		})
+	});
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+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),
+		...props
+	});
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"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),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+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),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "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),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	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),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+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),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+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),
+		...props
+	});
+}
+//#endregion
+//#region src/components/browser-toolbar-menus.tsx
+const STREAM_PRESETS = [
+	{
+		id: "low",
+		label: "Low",
+		detail: "20 fps · max 800 kbps",
+		settings: {
+			fps: 20,
+			bitrateKbps: 800
+		}
+	},
+	{
+		id: "balanced",
+		label: "Balanced",
+		detail: "30 fps · max 3000 kbps",
+		settings: {
+			fps: 30,
+			bitrateKbps: 3e3
+		}
+	},
+	{
+		id: "high",
+		label: "High",
+		detail: "60 fps · max 20000 kbps",
+		settings: {
+			fps: 60,
+			bitrateKbps: 2e4
+		}
+	}
+];
+const STREAM_LIMITS = {
+	fps: {
+		min: 1,
+		max: 120
+	},
+	bitrateKbps: {
+		min: 100,
+		max: 5e4
+	}
+};
+const VIEWPORT_LIMITS = {
+	width: {
+		min: 1,
+		max: 16384
+	},
+	height: {
+		min: 1,
+		max: 16384
+	},
+	deviceScaleFactor: {
+		min: .25,
+		max: 4
+	}
+};
+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;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "shrink-0 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",
+				variant: recordingActive ? "destructive" : "ghost",
+				size: "icon-sm",
+				"aria-label": recordingActive ? "Browser menu, recording active" : "Browser menu"
+			}) }),
+			children: recordingActive ? /* @__PURE__ */ jsx(Circle, { fill: "currentColor" }) : /* @__PURE__ */ jsx(MoreVertical, {})
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side: "bottom",
+			children: recordingActive ? "Browser menu, recording active" : "Browser menu"
+		})] }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "end",
+			className: "w-72",
+			children: [
+				/* @__PURE__ */ jsx(RestMenuItems, {
+					control,
+					cdpUrl,
+					shareUrls,
+					onSessionDetails
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsx(RecordingMenuItems, {
+					control,
+					connected: connected && control.collaboration.role === "owner",
+					runningRecordings,
+					now
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsx(ViewportStreamMenuItems, {
+					control,
+					connected: connected && control.collaboration.role !== "viewer",
+					localCursorEnabled,
+					onLocalCursorChange,
+					busy,
+					onReconnect
+				})
+			]
+		})] })
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "hidden shrink-0 items-center gap-0.5 sm:flex",
+		children: [
+			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
+					type: "button",
+					variant: recordingActive ? "destructive" : "ghost",
+					size: "icon-sm",
+					"aria-label": recordingActive ? "Recording in progress" : "Recording"
+				}) }),
+				children: /* @__PURE__ */ jsx(Circle, { fill: recordingActive ? "currentColor" : "none" })
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				children: recordingActive ? "Recording in progress" : "Recording"
+			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "end",
+				className: "w-72",
+				children: /* @__PURE__ */ jsx(RecordingMenuItems, {
+					control,
+					connected: connected && control.collaboration.role === "owner",
+					runningRecordings,
+					now
+				})
+			})] }),
+			/* @__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",
+					"aria-label": "Viewport and stream"
+				}) }),
+				children: /* @__PURE__ */ jsx(Monitor, {})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				children: "Viewport and stream"
+			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "end",
+				className: "w-56",
+				children: /* @__PURE__ */ jsx(ViewportStreamMenuItems, {
+					control,
+					connected: connected && control.collaboration.role !== "viewer",
+					localCursorEnabled,
+					onLocalCursorChange,
+					busy,
+					onReconnect
+				})
+			})] }),
+			/* @__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",
+					"aria-label": "More browser actions"
+				}) }),
+				children: /* @__PURE__ */ jsx(MoreVertical, {})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				children: "More browser actions"
+			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "end",
+				className: "w-48",
+				children: /* @__PURE__ */ jsx(RestMenuItems, {
+					control,
+					cdpUrl,
+					shareUrls,
+					onSessionDetails
+				})
+			})] })
+		]
+	})] });
+}
+function RestMenuItems({ control, cdpUrl, shareUrls, onSessionDetails }) {
+	const copy = useEffectCallback((value, copied) => copyTextWithToast(value, () => toast.success(copied)), []);
+	return /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+		/* @__PURE__ */ jsx(InputControlMenuItem, { control }),
+		onSessionDetails ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onClick: onSessionDetails,
+			children: [/* @__PURE__ */ jsx(Info, {}), "Session details"]
+		}) : null,
+		/* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: !cdpUrl,
+			onClick: () => {
+				if (!cdpUrl) return;
+				copy(cdpUrl, "CDP URL copied");
+			},
+			children: [/* @__PURE__ */ jsx(Copy, {}), "Copy CDP URL"]
+		}),
+		/* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: !shareUrls,
+			onClick: () => {
+				if (!shareUrls) return;
+				copy(shareUrls.editor, "Editor URL copied");
+			},
+			children: [/* @__PURE__ */ jsx(Share2, {}), "Copy editor URL"]
+		}),
+		/* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: !shareUrls,
+			onClick: () => {
+				if (!shareUrls) return;
+				copy(shareUrls.viewer, "Viewer URL copied");
+			},
+			children: [/* @__PURE__ */ jsx(Share2, {}), "Copy viewer URL"]
+		})
+	] });
+}
+function InputControlMenuItem({ control }) {
+	const collaboration = control.collaboration;
+	const targetId = control.activeTargetId;
+	const explicitControlClaimed = collaboration.holderClientId !== null && collaboration.leaseMode === "explicit";
+	const localControlClaimed = collaboration.hasControl && collaboration.leaseMode === "explicit";
+	let label = "Control offline";
+	let disabled = collaboration.phase !== "connected" || !targetId;
+	let action = () => void 0;
+	if (collaboration.role === "viewer") {
+		label = "View only";
+		disabled = true;
+	} else if (collaboration.hasControl && collaboration.leaseMode === "explicit") {
+		label = "Release control";
+		action = () => {
+			collaboration.release();
+		};
+	} else if (collaboration.hasControl) {
+		label = "Claim control";
+		action = () => {
+			if (targetId) collaboration.claim(targetId, "explicit");
+		};
+	} else {
+		const holder = collaboration.participants.find((participant) => participant.clientId === collaboration.holderClientId);
+		const canPreempt = collaboration.role === "owner" && holder?.role === "editor";
+		const controlBlocked = explicitControlClaimed && !canPreempt;
+		label = controlBlocked ? "Control in use" : "Claim control";
+		disabled = disabled || controlBlocked;
+		action = () => {
+			if (targetId) collaboration.claim(targetId, "explicit");
+		};
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		disabled,
+		onClick: action,
+		children: [localControlClaimed ? /* @__PURE__ */ jsx(Lock, {}) : /* @__PURE__ */ jsx(LockOpen, {}), label]
+	});
+}
+function RecordingMenuItems({ control, connected, runningRecordings, now }) {
+	const recordingAvailable = connected && control.collaboration.role === "owner";
+	const canStart = recordingAvailable && Boolean(control.activeTargetId) && !control.recordingBusy;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+		/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Recording" }),
+		/* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: !canStart,
+			onClick: () => control.startRecording("tab"),
+			children: [/* @__PURE__ */ jsx(Circle, {}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-col",
+				children: [/* @__PURE__ */ jsx("span", { children: "Record this tab" }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: "Stay pinned to this target"
+				})]
+			})]
+		}),
+		/* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: !canStart,
+			onClick: () => control.startRecording("viewer"),
+			children: [/* @__PURE__ */ jsx(Monitor, {}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-col",
+				children: [/* @__PURE__ */ jsx("span", { children: "Record this viewer" }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: recordingAvailable ? "Follow tab switches" : "Owner connection required"
+				})]
+			})]
+		})
+	] }), runningRecordings.map((recording) => {
+		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",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "truncate",
+					children: [
+						recording.mode === "viewer" ? "Viewer" : "Tab",
+						":",
+						" ",
+						target?.title || recording.targetId.slice(0, 8)
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 tabular-nums",
+					children: formatElapsed(recording.startedAt, now)
+				})]
+			}) }),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: control.recordingBusy,
+				onClick: () => control.stopRecording(recording.recordingId),
+				children: [/* @__PURE__ */ jsx(Download, {}), "Stop and download"]
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: control.recordingBusy,
+				onClick: () => control.cancelRecording(recording.recordingId),
+				children: [/* @__PURE__ */ jsx(X, {}), "Cancel without download"]
+			})
+		] })] }, recording.recordingId);
+	})] });
+}
+function ViewportStreamMenuItems({ control, connected, localCursorEnabled, onLocalCursorChange, busy, onReconnect }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+		/* @__PURE__ */ jsx(ViewportMenu, {
+			control,
+			connected
+		}),
+		control.mediaVideoProfiles.length > 0 ? /* @__PURE__ */ jsx(StreamMenu, {
+			control,
+			qualityUpdatesEnabled: control.collaboration.role !== "viewer"
+		}) : null,
+		/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+			disabled: !connected || control.collaboration.role === "viewer",
+			checked: control.remoteCursorEnabled,
+			onCheckedChange: control.setRemoteCursorEnabled,
+			children: [/* @__PURE__ */ jsx(MousePointer2, {}), "Remote cursor"]
+		}),
+		/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+			checked: localCursorEnabled,
+			onCheckedChange: onLocalCursorChange,
+			children: [/* @__PURE__ */ jsx(MousePointer2, {}), "Local cursor"]
+		}),
+		/* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled: busy,
+			onClick: onReconnect,
+			children: [/* @__PURE__ */ jsx(RotateCcw, {}), "Reconnect"]
+		})
+	] });
+}
+function StreamMenu({ control, qualityUpdatesEnabled }) {
+	const settings = control.mediaStreamSettings;
+	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",
+		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Source" }),
+			/* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+				value: source,
+				onValueChange: (value) => {
+					if (value === "jpeg") {
+						control.selectMediaStream({ kind: "jpeg" });
+						return;
+					}
+					if (value === "webrtc") {
+						control.selectMediaStream({ kind: "webrtc-retry" });
+						return;
+					}
+					const profile = control.mediaVideoProfiles.find((candidate) => candidate.id === value);
+					if (profile && settings) control.selectMediaStream({
+						kind: "webrtc",
+						quality: {
+							...settings,
+							profile: profile.id
+						}
+					});
+				},
+				children: [
+					!qualityUpdatesEnabled ? /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: "webrtc",
+						disabled,
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: "WebRTC" }), /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground",
+								children: "Live video"
+							})]
+						})
+					}) : null,
+					qualityUpdatesEnabled ? control.mediaVideoProfiles.map((profile) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: profile.id,
+						disabled: disabled || !settings,
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: profile.label }), /* @__PURE__ */ jsxs("span", {
+								className: "text-xs text-muted-foreground",
+								children: [profile.codec, " · WebRTC"]
+							})]
+						})
+					}, profile.id)) : null,
+					/* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: "jpeg",
+						disabled,
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: "JPEG" }), /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground",
+								children: "WebSocket raster stream"
+							})]
+						})
+					})
+				]
+			}),
+			qualityUpdatesEnabled && control.mediaPath === "webrtc-live" && settings ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Quality" }),
+				/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+					value: activeStreamPresetId(settings),
+					onValueChange: (value) => {
+						const preset = STREAM_PRESETS.find((item) => item.id === value);
+						if (preset) control.setWebRTCStreamSettings({
+							...settings,
+							...preset.settings
+						});
+					},
+					children: STREAM_PRESETS.map((preset) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+						value: preset.id,
+						disabled,
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: preset.label }), /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground",
+								children: preset.detail
+							})]
+						})
+					}, preset.id))
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsx(CustomStreamSettings, {
+					settings,
+					disabled,
+					onApply: control.setWebRTCStreamSettings
+				})
+			] }) : null
+		] })
+	})] });
+}
+function ViewportMenu({ control, connected }) {
+	return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Monitor, {}), "Viewport"] }), /* @__PURE__ */ jsxs(DropdownMenuSubContent, {
+		className: "w-64",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Viewport" }),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: !connected || !control.browserViewportSize,
+				onClick: () => control.setViewportToBrowserSize(),
+				children: [/* @__PURE__ */ jsx(Maximize2, {}), "Set to browser size"]
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+				disabled: !connected || !control.browserViewportSize,
+				checked: control.viewportAutoSync,
+				onCheckedChange: control.setViewportAutoSync,
+				children: [/* @__PURE__ */ jsx(Monitor, {}), "Auto sync browser size"]
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: activeViewportPresetId(control.viewport),
+				onValueChange: (value) => {
+					const preset = VIEWPORT_PRESETS.find((item) => item.id === value);
+					if (preset) control.setViewport(createViewportPreset(preset.width, preset.height, control.viewport.deviceScaleFactor));
+				},
+				children: VIEWPORT_PRESETS.map((preset) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: preset.id,
+					disabled: !connected,
+					children: [/* @__PURE__ */ jsx(Monitor, {}), preset.label]
+				}, preset.id))
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Scale" }),
+			/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value: activeViewportScaleId(control.viewport.deviceScaleFactor),
+				onValueChange: (value) => {
+					const nextScale = VIEWPORT_DEVICE_SCALE_FACTORS.find((item) => formatViewportScale(item) === value);
+					if (nextScale) control.setViewport(createViewportPreset(control.viewport.width, control.viewport.height, nextScale));
+				},
+				children: VIEWPORT_DEVICE_SCALE_FACTORS.map((deviceScaleFactor) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: formatViewportScale(deviceScaleFactor),
+					disabled: !connected,
+					children: [
+						/* @__PURE__ */ jsx(Monitor, {}),
+						formatViewportScale(deviceScaleFactor),
+						"x"
+					]
+				}, deviceScaleFactor))
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsx(CustomViewportSettings, {
+				viewport: control.viewport,
+				connected,
+				onApply: control.setViewport
+			})
+		]
+	})] });
+}
+function CustomViewportSettings({ viewport, connected, onApply }) {
+	const [width, setWidth] = useState(String(viewport.width));
+	const [height, setHeight] = useState(String(viewport.height));
+	const [deviceScaleFactor, setDeviceScaleFactor] = useState(formatViewportScale(viewport.deviceScaleFactor));
+	useEffect(() => {
+		setWidth(String(viewport.width));
+		setHeight(String(viewport.height));
+		setDeviceScaleFactor(formatViewportScale(viewport.deviceScaleFactor));
+	}, [viewport]);
+	const nextViewport = parseViewportSettings({
+		width,
+		height,
+		deviceScaleFactor
+	});
+	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",
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: (event) => event.stopPropagation(),
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "px-0",
+				children: "Custom"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-3 gap-2",
+				children: [
+					/* @__PURE__ */ jsx(StreamNumberField, {
+						label: "Width",
+						value: width,
+						onChange: setWidth
+					}),
+					/* @__PURE__ */ jsx(StreamNumberField, {
+						label: "Height",
+						value: height,
+						onChange: setHeight
+					}),
+					/* @__PURE__ */ jsx(ViewportScaleField, {
+						label: "Scale",
+						value: deviceScaleFactor,
+						onChange: setDeviceScaleFactor
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Button$1, {
+				type: "button",
+				size: "sm",
+				className: "h-7",
+				disabled: !connected || !nextViewport || unchanged,
+				onClick: () => {
+					if (nextViewport) onApply(nextViewport);
+				},
+				children: "Apply"
+			})
+		]
+	});
+}
+function CustomStreamSettings({ settings, disabled, onApply }) {
+	const [fps, setFps] = useState(String(settings.fps));
+	const [bitrateKbps, setBitrateKbps] = useState(String(settings.bitrateKbps));
+	useEffect(() => {
+		setFps(String(settings.fps));
+		setBitrateKbps(String(settings.bitrateKbps));
+	}, [settings]);
+	const nextSettings = parseStreamSettings({
+		fps,
+		bitrateKbps
+	});
+	const unchanged = settings.fps === nextSettings?.fps && settings.bitrateKbps === nextSettings?.bitrateKbps;
+	return /* @__PURE__ */ jsxs(FieldGroup, {
+		className: "gap-2 px-2 py-1.5",
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: (event) => event.stopPropagation(),
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "px-0",
+				children: "Custom"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-2",
+				children: [/* @__PURE__ */ jsx(StreamNumberField, {
+					label: "FPS",
+					value: fps,
+					onChange: setFps
+				}), /* @__PURE__ */ jsx(StreamNumberField, {
+					label: "Max Kbps",
+					value: bitrateKbps,
+					onChange: setBitrateKbps
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button$1, {
+				type: "button",
+				size: "sm",
+				className: "h-7 w-full",
+				disabled: disabled || !nextSettings || unchanged,
+				onClick: () => {
+					if (nextSettings) onApply({
+						...settings,
+						...nextSettings
+					});
+				},
+				children: "Apply"
+			})
+		]
+	});
+}
+function StreamNumberField({ label, value, onChange }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(Field, {
+		className: "gap-1",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: id,
+			children: label
+		}), /* @__PURE__ */ jsx(Input$1, {
+			id,
+			type: "text",
+			inputMode: "numeric",
+			value,
+			onChange: (event) => onChange(digitsOnly(event.currentTarget.value)),
+			onFocus: (event) => event.currentTarget.select(),
+			className: "h-7"
+		})]
+	});
+}
+function ViewportScaleField({ label, value, onChange }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(Field, {
+		className: "gap-1",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: id,
+			children: label
+		}), /* @__PURE__ */ jsx(Input$1, {
+			id,
+			type: "text",
+			inputMode: "decimal",
+			value,
+			onChange: (event) => onChange(decimalNumber(event.currentTarget.value)),
+			onFocus: (event) => event.currentTarget.select(),
+			className: "h-7"
+		})]
+	});
+}
+function parseViewportSettings({ width, height, deviceScaleFactor }) {
+	if (!width || !height || !deviceScaleFactor) return null;
+	const parsedWidth = Number(width);
+	const parsedHeight = Number(height);
+	const parsedScale = Number(deviceScaleFactor);
+	if (!Number.isFinite(parsedWidth) || !Number.isFinite(parsedHeight) || !Number.isFinite(parsedScale)) return null;
+	const nextWidth = clampInteger(parsedWidth, VIEWPORT_LIMITS.width.min, VIEWPORT_LIMITS.width.max);
+	const nextHeight = clampInteger(parsedHeight, VIEWPORT_LIMITS.height.min, VIEWPORT_LIMITS.height.max);
+	const maxScale = Math.min(VIEWPORT_LIMITS.deviceScaleFactor.max, VIEWPORT_LIMITS.width.max / nextWidth, VIEWPORT_LIMITS.height.max / nextHeight);
+	return createViewportPreset(nextWidth, nextHeight, clampDecimal(parsedScale, VIEWPORT_LIMITS.deviceScaleFactor.min, maxScale));
+}
+function parseStreamSettings({ fps, bitrateKbps }) {
+	if (!fps || !bitrateKbps) return null;
+	return {
+		fps: clampInteger(Number(fps), STREAM_LIMITS.fps.min, STREAM_LIMITS.fps.max),
+		bitrateKbps: clampInteger(Number(bitrateKbps), STREAM_LIMITS.bitrateKbps.min, STREAM_LIMITS.bitrateKbps.max)
+	};
+}
+function digitsOnly(value) {
+	return value.replace(/\D/g, "");
+}
+function decimalNumber(value) {
+	const [integer = "", ...fraction] = value.replace(/[^\d.]/g, "").split(".");
+	return fraction.length ? `${integer}.${fraction.join("")}` : integer;
+}
+function clampInteger(value, min, max) {
+	return Math.min(Math.max(Math.round(value), min), max);
+}
+function clampDecimal(value, min, max) {
+	return Math.min(Math.max(Math.round(value * 100) / 100, min), max);
+}
+function activeViewportPresetId(viewport) {
+	return VIEWPORT_PRESETS.find((item) => viewport.width === item.width && viewport.height === item.height)?.id ?? "";
+}
+function activeViewportScaleId(deviceScaleFactor) {
+	const preset = VIEWPORT_DEVICE_SCALE_FACTORS.find((item) => item === deviceScaleFactor);
+	return preset ? formatViewportScale(preset) : "";
+}
+function activeStreamPresetId(settings) {
+	if (!settings) return "";
+	return STREAM_PRESETS.find((item) => settings.fps === item.settings.fps && settings.bitrateKbps === item.settings.bitrateKbps)?.id ?? "";
+}
+function formatElapsed(startedAt, now) {
+	const elapsed = Math.max(0, Math.floor((now - Date.parse(startedAt)) / 1e3));
+	const hours = Math.floor(elapsed / 3600);
+	const minutes = Math.floor(elapsed % 3600 / 60);
+	const seconds = elapsed % 60;
+	return hours > 0 ? `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}` : `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}
+//#endregion
+//#region ../ui/src/components/avatar.tsx
+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),
+		...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),
+		...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),
+		...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),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/popover.tsx
+function Popover$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, {
+		container: usePortalContainer(),
+		children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "isolate 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),
+				...props
+			})
+		})
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: cn("font-medium", className),
+		...props
+	});
+}
+//#endregion
+//#region src/components/collaboration-presence.tsx
+const visibleParticipantCount = 5;
+function CollaborationPresence({ collaboration }) {
+	const participants = [...collaboration.participants].sort((left, right) => {
+		if (left.clientId === collaboration.clientId) return -1;
+		if (right.clientId === collaboration.clientId) return 1;
+		if (left.holdingInput !== right.holdingInput) return left.holdingInput ? -1 : 1;
+		return left.name.localeCompare(right.name);
+	});
+	const visible = participants.slice(0, visibleParticipantCount);
+	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",
+		"aria-label": "Session participants",
+		children: [overflow > 0 ? /* @__PURE__ */ jsx("div", {
+			className: "relative transition-[margin] duration-200",
+			style: { zIndex: visible.length + 1 },
+			children: /* @__PURE__ */ jsx(OverflowParticipants, {
+				overflow,
+				participants,
+				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"),
+			style: { zIndex: visible.length - index },
+			children: /* @__PURE__ */ jsx(ParticipantButton, {
+				participant,
+				collaboration
+			})
+		}, participant.clientId))]
+	});
+}
+function OverflowParticipants({ overflow, participants, collaboration }) {
+	return /* @__PURE__ */ jsxs(Popover$1, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+		render: /* @__PURE__ */ jsx(Button$1, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			className: "shrink-0 rounded-full border bg-background text-[0.65rem] text-muted-foreground",
+			"aria-label": `${overflow} more participants`
+		}),
+		children: ["+", overflow]
+	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		align: "end",
+		className: "w-auto gap-2",
+		children: [/* @__PURE__ */ jsx(PopoverTitle, {
+			className: "text-xs text-muted-foreground",
+			children: "Everyone"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-1",
+			children: participants.map((participant) => /* @__PURE__ */ jsx(ParticipantButton, {
+				participant,
+				collaboration
+			}, participant.clientId))
+		})]
+	})] });
+}
+function ParticipantButton({ participant, collaboration }) {
+	const local = participant.clientId === collaboration.clientId;
+	const followable = participant.role !== "automation";
+	const following = participant.clientId === collaboration.followingClientId;
+	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",
+			"aria-label": label
+		}) : /* @__PURE__ */ jsx(Button$1, {
+			type: "button",
+			variant: following ? "secondary" : "ghost",
+			size: "icon-sm",
+			className: "shrink-0 rounded-full p-0",
+			"aria-label": label,
+			"aria-pressed": following,
+			onClick: () => collaboration.follow(following ? null : participant.clientId)
+		}),
+		children: /* @__PURE__ */ jsx(ParticipantAvatar, {
+			participant,
+			following
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: label
+	})] });
+}
+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"),
+		children: [
+			/* @__PURE__ */ jsx(AvatarImage, {
+				src: gravatarURL(participant.avatarHash),
+				alt: ""
+			}),
+			/* @__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"),
+				title: controlClaimed ? "Control claimed" : "Has input control",
+				children: controlClaimed ? /* @__PURE__ */ jsx(Lock, {}) : /* @__PURE__ */ jsx(Radio, {})
+			}) : null
+		]
+	});
+}
+function gravatarURL(hash) {
+	return `https://www.gravatar.com/avatar/${encodeURIComponent(hash)}?d=identicon&s=64`;
+}
+function initials(name) {
+	return name.split(/\s+/).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
+}
+//#endregion
+//#region src/components/browser-toolbar.tsx
+function BrowserToolbar({ control, leading, features, collaborationRole, cdpUrl, shareUrls, localCursorEnabled, onLocalCursorChange, paintingEnabled, onPaintingEnabledChange, devToolsOpen, devToolsTargetIds, devToolsDock, onDevToolsOpenChange, onDevToolsDockChange, onSessionDetails }) {
+	const [urlDraft, setUrlDraft] = useState(null);
+	const displayUrl = control.activeTarget?.url ?? "";
+	const busy = control.phase === "connecting";
+	const connected = control.phase === "connected";
+	const browserMutationEnabled = connected && collaborationRole !== "viewer";
+	const drawingAvailable = connected && control.collaboration.phase === "connected" && Boolean(control.activeTargetId);
+	const loading = control.activeTarget?.loading ?? false;
+	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));
+	const [recordingNow, setRecordingNow] = useState(Date.now());
+	useFork(() => hasRunningRecordings ? Effect.repeat(Effect.sync(() => setRecordingNow(Date.now())), Schedule.spaced(1e3)) : void 0, [hasRunningRecordings]);
+	function handleNavigate(value) {
+		const nextUrl = value.trim();
+		if (!nextUrl) return;
+		control.navigate(normalizeUrl(nextUrl));
+		setUrlDraft(null);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col 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",
+			children: [
+				leading,
+				features.tabs ? /* @__PURE__ */ jsx(BrowserTabStrip, {
+					targets: control.targets,
+					activeTargetId: control.activeTargetId,
+					recordingTargetIds,
+					devToolsTargetIds,
+					disabled: !connected,
+					mutationDisabled: !browserMutationEnabled,
+					onActivate: control.activateTarget,
+					onCreate: () => control.createTarget("about:blank"),
+					onDuplicate: control.duplicateTarget,
+					onClose: control.closeTarget,
+					onReload: control.reload,
+					onReorder: control.reorderTargets
+				}) : /* @__PURE__ */ jsx("div", { className: "min-w-0 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",
+			children: [
+				features.navigation ? /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-0.5",
+					children: [
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Back",
+							disabled: !browserMutationEnabled,
+							onClick: () => control.historyBack(),
+							children: /* @__PURE__ */ jsx(ArrowLeft, {})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: "Forward",
+							disabled: !browserMutationEnabled,
+							onClick: () => control.historyForward(),
+							children: /* @__PURE__ */ jsx(ArrowRight, {})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							label: loading ? "Stop loading" : "Reload",
+							disabled: !browserMutationEnabled,
+							onClick: () => {
+								if (loading) control.stopLoading();
+								else if (control.activeTargetId) control.reload(control.activeTargetId);
+							},
+							children: loading ? /* @__PURE__ */ jsx(Square, {}) : /* @__PURE__ */ jsx(RefreshCw, {})
+						})
+					]
+				}) : 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",
+					children: /* @__PURE__ */ jsx(InputGroupInput, {
+						value: urlDraft ?? displayUrl,
+						onChange: (event) => setUrlDraft(event.target.value),
+						onFocus: (event) => event.currentTarget.select(),
+						onKeyDown: (event) => {
+							if (event.key === "Enter") {
+								event.preventDefault();
+								handleNavigate(event.currentTarget.value);
+							}
+						},
+						placeholder: "URL",
+						className: "h-7 px-2 font-mono text-xs text-muted-foreground transition-colors 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,
+				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",
+						disabled: !paintingEnabled && !drawingAvailable,
+						"aria-label": paintingEnabled ? "Stop drawing" : "Draw on this tab",
+						"aria-pressed": paintingEnabled,
+						onClick: () => onPaintingEnabledChange(!paintingEnabled)
+					}),
+					children: /* @__PURE__ */ jsx(Pencil, {})
+				}), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					children: paintingEnabled ? "Stop drawing" : "Draw on this tab"
+				})] }) : null,
+				features.devTools ? /* @__PURE__ */ jsx(DevToolsButton, {
+					open: devToolsOpen,
+					dock: devToolsDock,
+					available: collaborationRole === "owner" && connected && Boolean(cdpUrl && control.activeTargetId),
+					onOpenChange: onDevToolsOpenChange,
+					onDockChange: onDevToolsDockChange
+				}) : null,
+				features.menus ? /* @__PURE__ */ jsx(BrowserMenus, {
+					control,
+					cdpUrl,
+					shareUrls,
+					busy,
+					connected,
+					localCursorEnabled,
+					onLocalCursorChange,
+					onReconnect: () => control.reconnect(),
+					onSessionDetails,
+					now: recordingNow
+				}) : null
+			]
+		}) : null]
+	});
+}
+function DevToolsButton({ open, dock, available, onOpenChange, onDockChange }) {
+	const label = open ? "Close DevTools" : "Open DevTools";
+	return /* @__PURE__ */ jsxs(ContextMenu$1, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(ContextMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
+			type: "button",
+			variant: open ? "secondary" : "ghost",
+			size: "icon-sm",
+			disabled: !open && !available,
+			"aria-label": label,
+			"aria-pressed": open,
+			onClick: () => onOpenChange(!open)
+		}) }),
+		children: /* @__PURE__ */ jsx(Wrench, {})
+	}), /* @__PURE__ */ jsxs(TooltipContent, {
+		side: "bottom",
+		children: [label, ". Right-click to choose dock side."]
+	})] }), /* @__PURE__ */ jsx(ContextMenuContent, { children: /* @__PURE__ */ jsxs(ContextMenuGroup, { children: [/* @__PURE__ */ jsx(ContextMenuLabel, { children: "Dock side" }), /* @__PURE__ */ jsxs(ContextMenuRadioGroup, {
+		value: dock,
+		onValueChange: (value) => {
+			switch (value) {
+				case "bottom":
+					onDockChange("bottom");
+					break;
+				case "right":
+					onDockChange("right");
+					break;
+			}
+		},
+		children: [/* @__PURE__ */ jsxs(ContextMenuRadioItem, {
+			value: "bottom",
+			children: [/* @__PURE__ */ jsx(PanelBottom, {}), "Bottom"]
+		}), /* @__PURE__ */ jsxs(ContextMenuRadioItem, {
+			value: "right",
+			children: [/* @__PURE__ */ jsx(PanelRight, {}), "Right"]
+		})]
+	})] }) })] });
+}
+function ToolbarButton({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(Button$1, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			disabled,
+			onClick
+		}),
+		children
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: label
+	})] });
+}
+function normalizeUrl(value) {
+	const trimmed = value.trim();
+	if (isLocalHost(trimmed)) return `http://${trimmed}`;
+	if (/^[a-z][a-z0-9+.-]*:\/\//i.test(trimmed) || /^(about|chrome|devtools|data|file):/i.test(trimmed)) return trimmed;
+	if (isLikelyHost(trimmed)) return `https://${trimmed}`;
+	return `https://www.google.com/search?q=${encodeURIComponent(trimmed)}`;
+}
+function isLocalHost(value) {
+	return /^localhost(?::\d+)?(?:[/?#].*)?$/i.test(value) || /^127(?:\.\d{1,3}){3}(?::\d+)?(?:[/?#].*)?$/.test(value) || /^[a-z0-9-]+:\d+(?:[/?#].*)?$/i.test(value);
+}
+function isLikelyHost(value) {
+	return !/\s/.test(value) && /^[a-z0-9-]+(?:\.[a-z0-9-]+)+(?:[/:?#].*)?$/i.test(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!", {
+	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"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant = "default", render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn(badgeVariants({ variant }), className) }, props),
+		render,
+		state: {
+			slot: "badge",
+			variant
+		}
+	});
+}
+//#endregion
+//#region src/notices.ts
+function showNotice(notice) {
+	if (notice.level === "error") toast.error(notice.message);
+	else toast.success(notice.message);
+}
+//#endregion
+//#region src/components/browser-viewport.tsx
+function BrowserViewport({ statusBadge = true, className, ...props }) {
+	return /* @__PURE__ */ jsx(SessionViewport, {
+		...props,
+		className: className ?? "bg-background",
+		onNotice: showNotice,
+		renderOverlay: (overlay) => /* @__PURE__ */ jsx(ViewportOverlay, {
+			overlay,
+			statusBadge
+		})
+	});
+}
+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",
+			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",
+			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",
+			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: 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",
+			style: {
+				left: overlay.cursorHint.x,
+				top: overlay.cursorHint.y
+			},
+			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",
+			children: overlay.collaborationError
+		}) : null
+	] });
+}
+const placeholderLabels = {
+	connecting: "Connecting",
+	"connecting-media": "Connecting media",
+	switching: "Switching target",
+	disconnected: "Disconnected",
+	waiting: "Waiting for frame"
+};
+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]]
+	});
+}
+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",
+		children: status
+	});
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		children: "offline"
+	});
+}
+//#endregion
+//#region src/components/browser-devtools-pane.tsx
+function BrowserDevToolsPane({ cdpUrl, targetId }) {
+	const src = useMemo(() => {
+		if (!cdpUrl || !targetId) return null;
+		const cdp = new URL(cdpUrl);
+		const cdpPath = cdp.pathname.replace(/\/$/, "");
+		const frame = new URL(`${cdpPath}/devtools/devtools_app.html`, cdp.origin);
+		const socket = `${cdp.host}${cdpPath}/devtools/page/${encodeURIComponent(targetId)}`;
+		frame.searchParams.set(cdp.protocol === "https:" ? "wss" : "ws", socket);
+		return frame.toString();
+	}, [cdpUrl, targetId]);
+	if (!src) return /* @__PURE__ */ jsx(Empty, {
+		className: "h-full rounded-none border-none",
+		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, {
+				variant: "icon",
+				children: /* @__PURE__ */ jsx(Wrench, {})
+			}),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: "DevTools unavailable" }),
+			/* @__PURE__ */ jsx(EmptyDescription, { children: "Connect to a browser target to inspect it." })
+		] })
+	});
+	return /* @__PURE__ */ jsx("iframe", {
+		className: "h-full w-full border-0 bg-background",
+		src,
+		title: "Browser DevTools",
+		allow: "clipboard-read; clipboard-write",
+		referrerPolicy: "no-referrer"
+	});
+}
+//#endregion
+//#region ../ui/src/components/resizable.tsx
+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),
+		...props
+	});
+}
+function ResizablePanel({ ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, {
+		"data-slot": "resizable-panel",
+		...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),
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+	});
+}
+//#endregion
+//#region src/components/browser-control-pane.tsx
+const LOCAL_CURSOR_STORAGE_KEY = "aperture.workbench.localCursorEnabled";
+function BrowserControlPane({ control, leading, features: featureOverrides, collaborationRole, cdpUrl, shareUrls, onSessionDetails }) {
+	const features = resolveSessionFeatures(featureOverrides);
+	const [localCursorEnabled, setLocalCursorEnabled] = useState(true);
+	const [paintingEnabled, setPaintingEnabled] = useState(false);
+	const [devToolsTargetIds, setDevToolsTargetIds] = useState(() => /* @__PURE__ */ new Set());
+	const [devToolsDock, setDevToolsDock] = useState("bottom");
+	const devToolsPanelRef = usePanelRef();
+	const activeTargetId = control.activeTargetId;
+	const devToolsOpen = features.devTools && activeTargetId !== null && devToolsTargetIds.has(activeTargetId);
+	useEffect(() => {
+		try {
+			if (window.localStorage.getItem(LOCAL_CURSOR_STORAGE_KEY) === "false") setLocalCursorEnabled(false);
+		} catch {}
+	}, []);
+	useEffect(() => {
+		const targetIds = new Set(control.targets.map((target) => target.id));
+		setDevToolsTargetIds((current) => {
+			let changed = false;
+			const next = /* @__PURE__ */ new Set();
+			for (const targetId of current) if (targetIds.has(targetId)) next.add(targetId);
+			else changed = true;
+			return changed ? next : current;
+		});
+	}, [control.targets]);
+	useLayoutEffect(() => {
+		if (devToolsOpen) devToolsPanelRef.current?.expand();
+		else devToolsPanelRef.current?.collapse();
+	}, [devToolsOpen, devToolsPanelRef]);
+	function handleDevToolsOpenChange(open) {
+		if (!activeTargetId) return;
+		setDevToolsTargetIds((current) => {
+			const next = new Set(current);
+			if (open) next.add(activeTargetId);
+			else next.delete(activeTargetId);
+			return next;
+		});
+	}
+	function handleLocalCursorChange(enabled) {
+		setLocalCursorEnabled(enabled);
+		try {
+			window.localStorage.setItem(LOCAL_CURSOR_STORAGE_KEY, String(enabled));
+		} catch {}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+		children: [/* @__PURE__ */ jsx(BrowserToolbar, {
+			control,
+			leading,
+			features,
+			collaborationRole,
+			cdpUrl,
+			shareUrls,
+			localCursorEnabled,
+			onLocalCursorChange: handleLocalCursorChange,
+			paintingEnabled,
+			onPaintingEnabledChange: setPaintingEnabled,
+			devToolsOpen,
+			devToolsTargetIds,
+			devToolsDock,
+			onDevToolsOpenChange: handleDevToolsOpenChange,
+			onDevToolsDockChange: setDevToolsDock,
+			onSessionDetails
+		}), /* @__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",
+			children: [
+				/* @__PURE__ */ jsx(ResizablePanel, {
+					className: "flex min-h-0 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
+					})
+				}),
+				/* @__PURE__ */ jsx(ResizableHandle, {
+					withHandle: true,
+					disabled: !devToolsOpen,
+					hidden: !devToolsOpen
+				}),
+				/* @__PURE__ */ jsx(ResizablePanel, {
+					panelRef: devToolsPanelRef,
+					className: "flex min-h-0 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",
+						hidden: targetId !== activeTargetId,
+						children: /* @__PURE__ */ jsx(BrowserDevToolsPane, {
+							cdpUrl,
+							targetId
+						})
+					}, targetId))
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/aperture-session.tsx
+function ApertureSession({ baseUrl, theme = "system", className, ...props }) {
+	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] })
+			})
+		}) : null
+	});
+}
+function useDarkTheme(theme) {
+	const [systemDark, setSystemDark] = useState(false);
+	useEffect(() => {
+		if (theme !== "system") return;
+		const query = window.matchMedia("(prefers-color-scheme: dark)");
+		const update = () => setSystemDark(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, [theme]);
+	return theme === "dark" || theme === "system" && systemDark;
+}
+function SharedSession({ token, features, leading }) {
+	const { status, share, control } = useSharedSession({
+		token,
+		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."
+		});
+		case "loading": return /* @__PURE__ */ jsx(SessionState, {
+			icon: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }),
+			title: "Opening shared 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."
+		});
+		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."
+		});
+		case "ready": return /* @__PURE__ */ jsx("div", {
+			className: "flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-background",
+			children: /* @__PURE__ */ jsx(BrowserControlPane, {
+				control,
+				collaborationRole: share?.role ?? "viewer",
+				cdpUrl: null,
+				shareUrls: null,
+				leading,
+				features: {
+					devTools: false,
+					...features
+				}
+			})
+		});
+	}
+}
+function devToolsUrl(origin, cdpUrl, sessionToken) {
+	const sourceUrl = new URL(cdpUrl, origin);
+	const url = new URL(origin);
+	url.pathname = `${sourceUrl.pathname.replace(/\/$/, "")}/${encodeURIComponent(sessionToken)}`;
+	return url.toString();
+}
+function SessionState({ icon, title, description }) {
+	return /* @__PURE__ */ jsx(Empty, {
+		className: "h-full border-none",
+		children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			/* @__PURE__ */ jsx(EmptyMedia, {
+				variant: "icon",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+			description ? /* @__PURE__ */ jsx(EmptyDescription, { children: description }) : null
+		] })
+	});
+}
+//#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 };
+
+//# sourceMappingURL=index.js.map