@aperture-browser/session-react 0.0.0-nightly.130.8809feddb141 → 0.0.0-nightly.131.764dc151c439

package/dist/index.d.ts

@@ -39,9 +39,11 @@ interface SessionProps {
   readonly features?: SessionFeatures;
   /** Rendered at the start of the title bar row, before the tab strip. */
   readonly leading?: ReactNode;
+  /** Rendered at the end of the title bar row, after the participants. */
+  readonly trailing?: ReactNode;
   /** Rendered at the start of the toolbar row, before the navigation buttons. */
   readonly toolbarLeading?: ReactNode;
-  /** Rendered at the end of the toolbar row, after the menus. */
+  /** Rendered at the end of the toolbar row, before the menus. */
   readonly toolbarTrailing?: ReactNode;
 }
 interface ApertureSessionProps extends SessionProps {
@@ -58,6 +60,7 @@ declare function Session({
   access,
   features,
   leading,
+  trailing,
   toolbarLeading,
   toolbarTrailing
 }: SessionProps): import("react").JSX.Element;
@@ -80,8 +83,9 @@ declare const copyTextWithToast: (value: string, onCopied?: () => void) => Effec
 //#region src/components/browser-control-pane.d.ts
 type BrowserControlPaneProps = {
   control: UseBrowserControlResult; /** Rendered at the start of the title bar row, before the tab strip. */
-  leading?: ReactNode; /** Rendered at the start of the toolbar row, before the navigation buttons. */
-  toolbarLeading?: ReactNode; /** Rendered at the end of the toolbar row, after the menus. */
+  leading?: ReactNode; /** Rendered at the end of the title bar row, after the participants. */
+  trailing?: ReactNode; /** Rendered at the start of the toolbar row, before the navigation buttons. */
+  toolbarLeading?: ReactNode; /** Rendered at the end of the toolbar row, before the browser menu. */
   toolbarTrailing?: ReactNode;
   features?: SessionFeatures;
   collaborationRole: CollaborationRole$1;
@@ -90,18 +94,25 @@ type BrowserControlPaneProps = {
     editor: string;
     viewer: string;
   } | null;
-  onSessionDetails?: () => void;
+  onSessionDetails?: () => void; /** Extra items at the top of the browser menu, such as actions on the session. */
+  menuItems?: ReactNode; /** Extra items in the menu's "Share and connect" submenu. */
+  shareMenuItems?: ReactNode; /** Items at the end of the browser menu, such as deleting the session. */
+  menuFooterItems?: ReactNode;
 };
 declare function BrowserControlPane({
   control,
   leading,
+  trailing,
   toolbarLeading,
   toolbarTrailing,
   features: featureOverrides,
   collaborationRole,
   cdpUrl,
   shareUrls,
-  onSessionDetails
+  onSessionDetails,
+  menuItems,
+  shareMenuItems,
+  menuFooterItems
 }: BrowserControlPaneProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/browser-viewport.d.ts

package/dist/index.js

@@ -199,7 +199,7 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
 			sideOffset,
 			children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
 				"data-slot": "context-menu-content",
-				className: cn("aperture:z-50 aperture:max-h-(--available-height) aperture:min-w-36 aperture:origin-(--transform-origin) aperture:overflow-x-hidden aperture:overflow-y-auto aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:outline-none aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=inline-end]:slide-in-from-left-2 aperture:data-[side=inline-start]:slide-in-from-right-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
+				className: cn("aperture:z-50 aperture:max-h-(--available-height) aperture:min-w-36 aperture:origin-(--transform-origin) aperture:overflow-x-hidden aperture:overflow-y-auto aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:outline-none aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-closed:animate-out aperture:data-closed:fade-out-0", className),
 				...props
 			})
 		})
@@ -330,7 +330,7 @@ function TooltipContent({ className, side = "top", sideOffset = 4, align = "cent
 			className: "aperture:isolate aperture:z-50",
 			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
 				"data-slot": "tooltip-content",
-				className: cn("aperture:z-50 aperture:inline-flex aperture:w-fit aperture:max-w-xs aperture:origin-(--transform-origin) aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:bg-foreground aperture:px-3 aperture:py-1.5 aperture:text-xs aperture:text-background aperture:has-data-[slot=kbd]:pr-1.5 aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=inline-end]:slide-in-from-left-2 aperture:data-[side=inline-start]:slide-in-from-right-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:**:data-[slot=kbd]:relative aperture:**:data-[slot=kbd]:isolate aperture:**:data-[slot=kbd]:z-50 aperture:**:data-[slot=kbd]:rounded-sm aperture:data-[state=delayed-open]:animate-in aperture:data-[state=delayed-open]:fade-in-0 aperture:data-[state=delayed-open]:zoom-in-95 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
+				className: cn("aperture:z-50 aperture:inline-flex aperture:w-fit aperture:max-w-xs aperture:origin-(--transform-origin) aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:bg-foreground aperture:px-3 aperture:py-1.5 aperture:text-xs aperture:text-background aperture:has-data-[slot=kbd]:pr-1.5 aperture:**:data-[slot=kbd]:relative aperture:**:data-[slot=kbd]:isolate aperture:**:data-[slot=kbd]:z-50 aperture:**:data-[slot=kbd]:rounded-sm aperture:data-[state=delayed-open]:animate-in aperture:data-[state=delayed-open]:fade-in-0 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-closed:animate-out aperture:data-closed:fade-out-0", className),
 				...props,
 				children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "aperture:z-50 aperture:size-2.5 aperture:translate-y-[calc(-50%-2px)] aperture:rotate-45 aperture:rounded-[2px] aperture:bg-foreground aperture:fill-foreground aperture:data-[side=bottom]:top-1 aperture:data-[side=inline-end]:top-1/2! aperture:data-[side=inline-end]:-left-1 aperture:data-[side=inline-end]:-translate-y-1/2 aperture:data-[side=inline-start]:top-1/2! aperture:data-[side=inline-start]:-right-1 aperture:data-[side=inline-start]:-translate-y-1/2 aperture:data-[side=left]:top-1/2! aperture:data-[side=left]:-right-1 aperture:data-[side=left]:-translate-y-1/2 aperture:data-[side=right]:top-1/2! aperture:data-[side=right]:-left-1 aperture:data-[side=right]:-translate-y-1/2 aperture:data-[side=top]:-bottom-2.5" })]
 			})
@@ -405,7 +405,7 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 		...props,
 		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
 			"data-slot": "scroll-area-thumb",
-			className: "aperture:relative aperture:flex-1 aperture:rounded-full aperture:bg-foreground/35 aperture:transition-colors aperture:hover:bg-foreground/55"
+			className: "aperture:relative aperture:flex-1 aperture:rounded-full aperture:bg-border aperture:transition-colors aperture:hover:bg-foreground/35"
 		})
 	});
 }
@@ -805,7 +805,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
 			sideOffset,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
 				"data-slot": "dropdown-menu-content",
-				className: cn("aperture:z-50 aperture:max-h-(--available-height) aperture:w-(--anchor-width) aperture:min-w-32 aperture:origin-(--transform-origin) aperture:overflow-x-hidden aperture:overflow-y-auto aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:outline-none aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=inline-end]:slide-in-from-left-2 aperture:data-[side=inline-start]:slide-in-from-right-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:overflow-hidden aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
+				className: cn("aperture:z-50 aperture:max-h-(--available-height) aperture:w-(--anchor-width) aperture:min-w-32 aperture:origin-(--transform-origin) aperture:overflow-x-hidden aperture:overflow-y-auto aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:outline-none aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-closed:animate-out aperture:data-closed:overflow-hidden aperture:data-closed:fade-out-0", className),
 				...props
 			})
 		})
@@ -830,7 +830,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("aperture:group/dropdown-menu-item aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:px-1.5 aperture:py-1 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:not-data-[variant=destructive]:focus:**:text-accent-foreground aperture:data-inset:pl-7 aperture:data-[variant=destructive]:text-destructive aperture:data-[variant=destructive]:focus:bg-destructive/10 aperture:data-[variant=destructive]:focus:text-destructive aperture:dark:data-[variant=destructive]:focus:bg-destructive/20 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4 aperture:data-[variant=destructive]:*:[svg]:text-destructive", className),
+		className: cn("aperture:group/dropdown-menu-item aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:px-1.5 aperture:py-1 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:data-highlighted:bg-accent aperture:data-highlighted:text-accent-foreground aperture:not-data-[variant=destructive]:data-highlighted:**:[svg]:text-accent-foreground aperture:data-inset:pl-7 aperture:data-[variant=destructive]:text-destructive aperture:data-[variant=destructive]:data-highlighted:bg-destructive/10 aperture:data-[variant=destructive]:data-highlighted:text-destructive aperture:dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4 aperture:data-[variant=destructive]:*:[svg]:text-destructive", className),
 		...props
 	});
 }
@@ -844,7 +844,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:px-1.5 aperture:py-1 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:not-data-[variant=destructive]:focus:**:text-accent-foreground aperture:data-inset:pl-7 aperture:data-popup-open:bg-accent aperture:data-popup-open:text-accent-foreground aperture:data-open:bg-accent aperture:data-open:text-accent-foreground aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:px-1.5 aperture:py-1 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:data-highlighted:bg-accent aperture:data-highlighted:text-accent-foreground aperture:not-data-[variant=destructive]:data-highlighted:**:[svg]:text-accent-foreground aperture:data-inset:pl-7 aperture:data-popup-open:bg-accent aperture:data-popup-open:text-accent-foreground aperture:data-open:bg-accent aperture:data-open:text-accent-foreground aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "aperture:ml-auto" })]
 	});
@@ -852,7 +852,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenuContent, {
 		"data-slot": "dropdown-menu-sub-content",
-		className: cn("aperture:w-auto aperture:min-w-[96px] aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-lg aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
+		className: cn("aperture:w-auto aperture:min-w-[96px] aperture:rounded-lg aperture:bg-popover aperture:p-1 aperture:text-popover-foreground aperture:shadow-lg aperture:ring-1 aperture:ring-foreground/10 aperture:duration-100 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-closed:animate-out aperture:data-closed:fade-out-0", className),
 		align,
 		alignOffset,
 		side,
@@ -864,7 +864,7 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
 	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
 		"data-slot": "dropdown-menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:py-1 aperture:pr-8 aperture:pl-1.5 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:focus:**:text-accent-foreground aperture:data-inset:pl-7 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:py-1 aperture:pr-8 aperture:pl-1.5 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:data-highlighted:bg-accent aperture:data-highlighted:text-accent-foreground aperture:data-highlighted:**:[svg]:text-accent-foreground aperture:data-inset:pl-7 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -884,7 +884,7 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
 		"data-inset": inset,
-		className: cn("aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:py-1 aperture:pr-8 aperture:pl-1.5 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:focus:bg-accent aperture:focus:text-accent-foreground aperture:focus:**:text-accent-foreground aperture:data-inset:pl-7 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("aperture:relative aperture:flex aperture:cursor-default aperture:items-center aperture:gap-1.5 aperture:rounded-md aperture:py-1 aperture:pr-8 aperture:pl-1.5 aperture:text-sm aperture:outline-hidden aperture:select-none aperture:data-highlighted:bg-accent aperture:data-highlighted:text-accent-foreground aperture:data-highlighted:**:[svg]:text-accent-foreground aperture:data-inset:pl-7 aperture:data-disabled:pointer-events-none aperture:data-disabled:opacity-50 aperture:[&_svg]:pointer-events-none aperture:[&_svg]:shrink-0 aperture:[&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "aperture:pointer-events-none aperture:absolute aperture:right-2 aperture:flex aperture:items-center aperture:justify-center",
@@ -1197,7 +1197,12 @@ const VIEWPORT_LIMITS = {
 		max: 4
 	}
 };
-function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursorEnabled, onLocalCursorChange, onReconnect, onSessionDetails, now }) {
+/**
+* The toolbar's end: drawing, recording and viewport buttons, then one menu with the embedder's
+* own items first, control, tools and sharing, and the embedder's closing items (such as
+* deleting the session) last.
+*/
+function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursorEnabled, onLocalCursorChange, onReconnect, onSessionDetails, menuItems, shareMenuItems, menuFooterItems, drawing, devTools, now }) {
 	const { settings, updateSettings } = useRecordingSettings();
 	const runningRecordings = control.recordings.filter((recording) => recording.status === "starting" || recording.status === "running");
 	const recordingActive = runningRecordings.length > 0;
@@ -1216,53 +1221,35 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 			capture: "continuous"
 		});
 	}
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "aperture:shrink-0 aperture:sm:hidden",
-		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-			render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
-				type: "button",
-				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: "aperture:w-72",
-			children: [
-				/* @__PURE__ */ jsx(RestMenuItems, {
-					control,
-					cdpUrl,
-					shareUrls,
-					onSessionDetails
-				}),
-				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-				/* @__PURE__ */ jsx(RecordingMenuItems, {
-					control,
-					connected,
-					runningRecordings,
-					now,
-					settings,
-					onSettingsChange: updateSettings,
-					onStartRecording: startRecording
-				}),
-				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-				/* @__PURE__ */ jsx(ViewportStreamMenuItems, {
-					control,
-					connected: viewportConnected,
-					localCursorEnabled,
-					onLocalCursorChange,
-					busy,
-					onReconnect
-				})
-			]
-		})] })
-	}), /* @__PURE__ */ jsxs("div", {
-		className: "aperture:hidden aperture:shrink-0 aperture:items-center aperture:gap-0.5 aperture:sm:flex",
+	const recordingItems = /* @__PURE__ */ jsx(RecordingMenuItems, {
+		control,
+		connected,
+		runningRecordings,
+		now,
+		settings,
+		onSettingsChange: updateSettings,
+		onStartRecording: startRecording
+	});
+	const sizeController = viewportSizeController(control);
+	const viewportPaused = control.viewportAutoSync && !control.viewportAutoSizeActive && sizeController !== null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "aperture:flex aperture:shrink-0 aperture:items-center aperture:gap-0.5",
 		children: [
+			drawing ? /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				render: /* @__PURE__ */ jsx(Button$1, {
+					type: "button",
+					variant: drawing.enabled ? "secondary" : "ghost",
+					size: "icon-sm",
+					disabled: !drawing.enabled && !drawing.available,
+					"aria-label": drawing.enabled ? "Stop drawing" : "Draw on this tab",
+					"aria-pressed": drawing.enabled,
+					onClick: () => drawing.onChange(!drawing.enabled)
+				}),
+				children: /* @__PURE__ */ jsx(Pencil, {})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				children: drawing.enabled ? "Stop drawing" : "Draw on this tab"
+			})] }) : null,
 			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
 					type: "button",
@@ -1277,31 +1264,19 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
 				align: "end",
 				className: "aperture:w-72",
-				children: /* @__PURE__ */ jsx(RecordingMenuItems, {
-					control,
-					connected,
-					runningRecordings,
-					now,
-					settings,
-					onSettingsChange: updateSettings,
-					onStartRecording: startRecording
-				})
+				children: recordingItems
 			})] }),
-			/* @__PURE__ */ jsx(ViewportPausedIndicator, {
-				control,
-				connected: viewportConnected
-			}),
 			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
 					type: "button",
 					variant: "ghost",
 					size: "icon-sm",
-					"aria-label": "Viewport and stream"
+					"aria-label": viewportPaused ? `Viewport and stream. Auto-size paused. ${sizeController}` : "Viewport and stream"
 				}) }),
-				children: /* @__PURE__ */ jsx(Monitor, {})
+				children: viewportPaused ? /* @__PURE__ */ jsx(MonitorPause, {}) : /* @__PURE__ */ jsx(Monitor, {})
 			}), /* @__PURE__ */ jsx(TooltipContent, {
 				side: "bottom",
-				children: "Viewport and stream"
+				children: viewportPaused ? sizeController : "Viewport and stream"
 			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
 				align: "end",
 				className: "aperture:w-56",
@@ -1319,56 +1294,82 @@ function BrowserMenus({ control, cdpUrl, shareUrls, busy, connected, localCursor
 					type: "button",
 					variant: "ghost",
 					size: "icon-sm",
-					"aria-label": "More browser actions"
+					"aria-label": "Browser menu"
 				}) }),
 				children: /* @__PURE__ */ jsx(MoreVertical, {})
 			}), /* @__PURE__ */ jsx(TooltipContent, {
 				side: "bottom",
-				children: "More browser actions"
-			})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				children: "Browser menu"
+			})] }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 				align: "end",
-				className: "aperture:w-48",
-				children: /* @__PURE__ */ jsx(RestMenuItems, {
-					control,
-					cdpUrl,
-					shareUrls,
-					onSessionDetails
-				})
+				className: "aperture:w-60",
+				children: [
+					menuItems ? /* @__PURE__ */ jsxs(Fragment$1, { children: [menuItems, /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }) : null,
+					/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+						onSessionDetails ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							onClick: onSessionDetails,
+							children: [/* @__PURE__ */ jsx(Info, {}), "Session details"]
+						}) : null,
+						/* @__PURE__ */ jsx(InputControlMenuItem, { control }),
+						devTools ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
+							disabled: !devTools.open && !devTools.available,
+							children: [/* @__PURE__ */ jsx(Wrench, {}), "Developer tools"]
+						}), /* @__PURE__ */ jsxs(DropdownMenuSubContent, {
+							className: "aperture:w-44",
+							children: [
+								/* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+									checked: devTools.open,
+									disabled: !devTools.open && !devTools.available,
+									onCheckedChange: devTools.onOpenChange,
+									children: "Open DevTools"
+								}),
+								/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+								/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Dock side" }), /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, {
+									value: devTools.dock,
+									onValueChange: (value) => {
+										if (value === "bottom" || value === "right") devTools.onDockChange(value);
+									},
+									children: [/* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+										value: "bottom",
+										children: [/* @__PURE__ */ jsx(PanelBottom, {}), "Bottom"]
+									}), /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+										value: "right",
+										children: [/* @__PURE__ */ jsx(PanelRight, {}), "Right"]
+									})]
+								})] })
+							]
+						})] }) : null,
+						/* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Share2, {}), "Share and connect"] }), /* @__PURE__ */ jsxs(DropdownMenuSubContent, {
+							className: "aperture:w-56",
+							children: [shareMenuItems, /* @__PURE__ */ jsx(ShareMenuItems, {
+								cdpUrl,
+								shareUrls
+							})]
+						})] })
+					] }),
+					menuFooterItems ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), menuFooterItems] }) : null
+				]
 			})] })
 		]
-	})] });
+	});
 }
-function RestMenuItems({ control, cdpUrl, shareUrls, onSessionDetails }) {
+function ShareMenuItems({ cdpUrl, shareUrls }) {
 	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"]
+			disabled: !shareUrls,
+			onClick: () => shareUrls && copy(shareUrls.editor, "Editor link copied"),
+			children: [/* @__PURE__ */ jsx(Copy, {}), "Copy editor link"]
 		}),
 		/* @__PURE__ */ jsxs(DropdownMenuItem, {
 			disabled: !shareUrls,
-			onClick: () => {
-				if (!shareUrls) return;
-				copy(shareUrls.editor, "Editor URL copied");
-			},
-			children: [/* @__PURE__ */ jsx(Share2, {}), "Copy editor URL"]
+			onClick: () => shareUrls && copy(shareUrls.viewer, "Viewer link copied"),
+			children: [/* @__PURE__ */ jsx(Copy, {}), "Copy viewer link"]
 		}),
 		/* @__PURE__ */ jsxs(DropdownMenuItem, {
-			disabled: !shareUrls,
-			onClick: () => {
-				if (!shareUrls) return;
-				copy(shareUrls.viewer, "Viewer URL copied");
-			},
-			children: [/* @__PURE__ */ jsx(Share2, {}), "Copy viewer URL"]
+			disabled: !cdpUrl,
+			onClick: () => cdpUrl && copy(cdpUrl, "CDP URL copied"),
+			children: [/* @__PURE__ */ jsx(Copy, {}), "Copy CDP URL"]
 		})
 	] });
 }
@@ -1618,31 +1619,6 @@ function viewportSizeController(control) {
 	if (ownerName !== null) return `Size controlled by ${ownerName}`;
 	return control.viewportAutoSync ? "Paused: size was set explicitly" : null;
 }
-function ViewportPausedIndicator({ control, connected }) {
-	const sizeController = viewportSizeController(control);
-	if (!control.viewportAutoSync || control.viewportAutoSizeActive || sizeController === null) return null;
-	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-		render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button$1, {
-			type: "button",
-			variant: "ghost",
-			size: "icon-sm",
-			className: "aperture:text-muted-foreground",
-			"aria-label": `Auto-size paused. ${sizeController}`
-		}) }),
-		children: /* @__PURE__ */ jsx(MonitorPause, {})
-	}), /* @__PURE__ */ jsx(TooltipContent, {
-		side: "bottom",
-		children: sizeController
-	})] }), /* @__PURE__ */ jsx(DropdownMenuContent, {
-		align: "end",
-		className: "aperture:w-56",
-		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: sizeController }), /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			disabled: !connected,
-			onClick: () => control.takeOverViewport(),
-			children: [/* @__PURE__ */ jsx(Hand, {}), "Take over size"]
-		})] })
-	})] });
-}
 function ViewportMenu({ control, connected }) {
 	const sizeController = viewportSizeController(control);
 	return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [/* @__PURE__ */ jsx(Monitor, {}), "Viewport"] }), /* @__PURE__ */ jsxs(DropdownMenuSubContent, {
@@ -1963,7 +1939,7 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
 			className: "aperture:isolate aperture:z-50",
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				"data-slot": "popover-content",
-				className: cn("aperture:z-50 aperture:flex aperture:w-72 aperture:origin-(--transform-origin) aperture:flex-col aperture:gap-2.5 aperture:rounded-lg aperture:bg-popover aperture:p-2.5 aperture:text-sm aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:outline-hidden aperture:duration-100 aperture:data-[side=bottom]:slide-in-from-top-2 aperture:data-[side=inline-end]:slide-in-from-left-2 aperture:data-[side=inline-start]:slide-in-from-right-2 aperture:data-[side=left]:slide-in-from-right-2 aperture:data-[side=right]:slide-in-from-left-2 aperture:data-[side=top]:slide-in-from-bottom-2 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-open:zoom-in-95 aperture:data-closed:animate-out aperture:data-closed:fade-out-0 aperture:data-closed:zoom-out-95", className),
+				className: cn("aperture:z-50 aperture:flex aperture:w-72 aperture:origin-(--transform-origin) aperture:flex-col aperture:gap-2.5 aperture:rounded-lg aperture:bg-popover aperture:p-2.5 aperture:text-sm aperture:text-popover-foreground aperture:shadow-md aperture:ring-1 aperture:ring-foreground/10 aperture:outline-hidden aperture:duration-100 aperture:data-open:animate-in aperture:data-open:fade-in-0 aperture:data-closed:animate-out aperture:data-closed:fade-out-0", className),
 				...props
 			})
 		})
@@ -2089,7 +2065,7 @@ function initials(name) {
 }
 //#endregion
 //#region src/components/browser-toolbar.tsx
-function BrowserToolbar({ control, leading, toolbarLeading, toolbarTrailing, features, collaborationRole, cdpUrl, shareUrls, localCursorEnabled, onLocalCursorChange, paintingEnabled, onPaintingEnabledChange, devToolsOpen, devToolsTargetIds, devToolsDock, onDevToolsOpenChange, onDevToolsDockChange, onSessionDetails }) {
+function BrowserToolbar({ control, leading, trailing, toolbarLeading, toolbarTrailing, features, collaborationRole, cdpUrl, shareUrls, localCursorEnabled, onLocalCursorChange, paintingEnabled, onPaintingEnabledChange, devToolsOpen, devToolsTargetIds, devToolsDock, onDevToolsOpenChange, onDevToolsDockChange, onSessionDetails, menuItems, shareMenuItems, menuFooterItems }) {
 	const [urlDraft, setUrlDraft] = useState(null);
 	const displayUrl = control.activeTarget?.url ?? "";
 	const busy = control.phase === "connecting";
@@ -2110,9 +2086,10 @@ function BrowserToolbar({ control, leading, toolbarLeading, toolbarTrailing, fea
 		control.navigate(normalizeUrl(nextUrl));
 		setUrlDraft(null);
 	}
+	const devToolsAvailable = collaborationRole === "owner" && connected && Boolean(cdpUrl && control.activeTargetId);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "aperture:flex aperture:min-w-0 aperture:flex-col aperture:bg-background",
-		children: [leading || features.tabs || features.presence ? /* @__PURE__ */ jsxs("div", {
+		children: [leading || trailing || features.tabs || features.presence ? /* @__PURE__ */ jsxs("div", {
 			"data-workbench-titlebar": true,
 			className: "aperture:flex aperture:min-w-0 aperture:shrink-0 aperture:items-stretch aperture:border-b aperture:bg-muted/35",
 			children: [
@@ -2132,7 +2109,8 @@ function BrowserToolbar({ control, leading, toolbarLeading, toolbarTrailing, fea
 					onReorder: control.reorderTargets,
 					loadThumbnail: control.loadTargetThumbnail
 				}) : /* @__PURE__ */ jsx("div", { className: "aperture:min-w-0 aperture:flex-1" }),
-				features.presence ? /* @__PURE__ */ jsx(CollaborationPresence, { collaboration: control.collaboration }) : null
+				features.presence ? /* @__PURE__ */ jsx(CollaborationPresence, { collaboration: control.collaboration }) : null,
+				trailing
 			]
 		}) : null, toolbarLeading || toolbarTrailing || features.navigation || features.addressBar || features.drawing || features.devTools || features.menus ? /* @__PURE__ */ jsxs("div", {
 			className: "aperture:flex aperture:h-9 aperture:items-center aperture:gap-1 aperture:px-1.5",
@@ -2185,29 +2163,17 @@ function BrowserToolbar({ control, leading, toolbarLeading, toolbarTrailing, fea
 					})
 				}) : /* @__PURE__ */ jsx("div", { className: "aperture:min-w-0 aperture:flex-1" }),
 				busy ? /* @__PURE__ */ jsx(Loader2, { className: "aperture:size-4 aperture:shrink-0 aperture:animate-spin aperture:text-muted-foreground" }) : null,
-				features.drawing ? /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-					render: /* @__PURE__ */ jsx(Button$1, {
-						type: "button",
-						variant: paintingEnabled ? "secondary" : "ghost",
-						size: "icon-sm",
-						className: "aperture: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, {
+				features.devTools && devToolsOpen ? /* @__PURE__ */ jsx(DevToolsButton, {
 					open: devToolsOpen,
 					dock: devToolsDock,
-					available: collaborationRole === "owner" && connected && Boolean(cdpUrl && control.activeTargetId),
+					available: devToolsAvailable,
 					onOpenChange: onDevToolsOpenChange,
 					onDockChange: onDevToolsDockChange
 				}) : null,
+				toolbarTrailing ? /* @__PURE__ */ jsx("div", {
+					className: "aperture:flex aperture:shrink-0 aperture:items-center aperture:gap-0.5",
+					children: toolbarTrailing
+				}) : null,
 				features.menus ? /* @__PURE__ */ jsx(BrowserMenus, {
 					control,
 					cdpUrl,
@@ -2218,11 +2184,22 @@ function BrowserToolbar({ control, leading, toolbarLeading, toolbarTrailing, fea
 					onLocalCursorChange,
 					onReconnect: () => control.reconnect(),
 					onSessionDetails,
+					menuItems,
+					shareMenuItems,
+					menuFooterItems,
+					drawing: features.drawing ? {
+						enabled: paintingEnabled,
+						available: drawingAvailable,
+						onChange: onPaintingEnabledChange
+					} : null,
+					devTools: features.devTools ? {
+						open: devToolsOpen,
+						dock: devToolsDock,
+						available: devToolsAvailable,
+						onOpenChange: onDevToolsOpenChange,
+						onDockChange: onDevToolsDockChange
+					} : null,
 					now: recordingNow
-				}) : null,
-				toolbarTrailing ? /* @__PURE__ */ jsx("div", {
-					className: "aperture:flex aperture:shrink-0 aperture:items-center aperture:gap-0.5",
-					children: toolbarTrailing
 				}) : null
 			]
 		}) : null]
@@ -2452,7 +2429,7 @@ function ResizableHandle({ withHandle, className, ...props }) {
 //#endregion
 //#region src/components/browser-control-pane.tsx
 const LOCAL_CURSOR_STORAGE_KEY = "aperture.workbench.localCursorEnabled";
-function BrowserControlPane({ control, leading, toolbarLeading, toolbarTrailing, features: featureOverrides, collaborationRole, cdpUrl, shareUrls, onSessionDetails }) {
+function BrowserControlPane({ control, leading, trailing, toolbarLeading, toolbarTrailing, features: featureOverrides, collaborationRole, cdpUrl, shareUrls, onSessionDetails, menuItems, shareMenuItems, menuFooterItems }) {
 	const features = resolveSessionFeatures(featureOverrides);
 	const [localCursorEnabled, setLocalCursorEnabled] = useState(true);
 	const [paintingEnabled, setPaintingEnabled] = useState(false);
@@ -2508,6 +2485,7 @@ function BrowserControlPane({ control, leading, toolbarLeading, toolbarTrailing,
 		children: [/* @__PURE__ */ jsx(BrowserToolbar, {
 			control,
 			leading,
+			trailing,
 			toolbarLeading,
 			toolbarTrailing,
 			features,
@@ -2523,7 +2501,10 @@ function BrowserControlPane({ control, leading, toolbarLeading, toolbarTrailing,
 			devToolsDock,
 			onDevToolsOpenChange: handleDevToolsOpenChange,
 			onDevToolsDockChange: setDevToolsDock,
-			onSessionDetails
+			onSessionDetails,
+			menuItems,
+			shareMenuItems,
+			menuFooterItems
 		}), features.devTools ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
 			orientation: devToolsDock === "bottom" ? "vertical" : "horizontal",
 			className: "aperture:min-h-0 aperture:min-w-0 aperture:flex-1 aperture:has-[[data-separator=active]]:[&_iframe]:pointer-events-none",
@@ -2600,7 +2581,7 @@ function ApertureSession({ theme = "system", className, ...props }) {
 		})
 	});
 }
-function Session({ access, features, leading, toolbarLeading, toolbarTrailing }) {
+function Session({ access, features, leading, trailing, toolbarLeading, toolbarTrailing }) {
 	const { status, control } = useSession({
 		access,
 		onNotice: showNotice
@@ -2638,6 +2619,7 @@ function Session({ access, features, leading, toolbarLeading, toolbarTrailing })
 				cdpUrl: null,
 				shareUrls: null,
 				leading,
+				trailing,
 				toolbarLeading,
 				toolbarTrailing,
 				features: {