@aperture-browser/session-react 0.0.0-nightly.131.764dc151c439 → 0.0.0-nightly.133.2b928e99e576

package/dist/index.d.ts

@@ -98,6 +98,11 @@ type BrowserControlPaneProps = {
   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;
+  /**
+   * The icon Aperture captured for a tab, null for none, or undefined while unknown. Without it
+   * tabs load the site's own `/favicon.ico`.
+   */
+  targetFaviconUrl?: (targetId: string) => string | null | undefined;
 };
 declare function BrowserControlPane({
   control,
@@ -112,7 +117,8 @@ declare function BrowserControlPane({
   onSessionDetails,
   menuItems,
   shareMenuItems,
-  menuFooterItems
+  menuFooterItems,
+  targetFaviconUrl
 }: BrowserControlPaneProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/browser-viewport.d.ts

package/dist/index.js

@@ -441,7 +441,7 @@ const copyTextWithToast = (value, onCopied = () => {}) => copyText(value).pipe(E
 //#endregion
 //#region src/components/browser-tab-strip.tsx
 const BROWSER_TAB_DRAG_KIND = "browser-tab";
-function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devToolsTargetIds, disabled, mutationDisabled, onActivate, onCreate, onDuplicate, onClose, onReload, onReorder, loadThumbnail = null }) {
+function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devToolsTargetIds, disabled, mutationDisabled, onActivate, onCreate, onDuplicate, onClose, onReload, onReorder, loadThumbnail = null, targetFaviconUrl }) {
 	const [previewHandle] = useState(() => createHoverCardHandle());
 	if (targets.length === 0) return /* @__PURE__ */ jsxs("div", {
 		className: "aperture:flex aperture:h-8 aperture:min-w-0 aperture:flex-1 aperture:items-center aperture:gap-2 aperture:px-2 aperture:text-xs aperture:text-muted-foreground",
@@ -456,9 +456,11 @@ function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devTools
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "aperture:flex aperture:min-w-max aperture:items-end aperture:gap-0.5 aperture:px-1 aperture:pt-1",
 			children: [targets.map((target, index) => {
+				const active = target.id === activeTargetId;
 				return /* @__PURE__ */ jsx(BrowserTab, {
 					target,
-					active: target.id === activeTargetId,
+					faviconSrc: faviconSource(target, targetFaviconUrl),
+					active,
 					recording: recordingTargetIds.has(target.id),
 					devToolsOpen: devToolsTargetIds.has(target.id),
 					disabled,
@@ -488,7 +490,7 @@ function BrowserTabStrip({ targets, activeTargetId, recordingTargetIds, devTools
 		}
 	}) : null] });
 }
-function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutationDisabled, onActivate, onDuplicate, onClose, onReload, onReorder, previewHandle, closeOtherTargetIds, closeRightTargetIds }) {
+function BrowserTab({ target, faviconSrc, active, recording, devToolsOpen, disabled, mutationDisabled, onActivate, onDuplicate, onClose, onReload, onReorder, previewHandle, closeOtherTargetIds, closeRightTargetIds }) {
 	const tabRef = useRef(null);
 	const [dragging, setDragging] = useState(false);
 	const [dropPlacement, setDropPlacement] = useState(null);
@@ -560,7 +562,7 @@ function BrowserTab({ target, active, recording, devToolsOpen, disabled, mutatio
 				className: "aperture:flex aperture:min-w-0 aperture:flex-1 aperture:items-center aperture:gap-1.5 aperture:text-left",
 				onClick: () => onActivate(target.id),
 				children: [
-					/* @__PURE__ */ jsx(TabFavicon, { url: target.url }),
+					/* @__PURE__ */ jsx(TabFavicon, { src: faviconSrc }),
 					devToolsOpen ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Wrench, {
 						"aria-hidden": true,
 						className: "aperture:size-3.5 aperture:shrink-0 aperture:text-muted-foreground"
@@ -658,18 +660,18 @@ function NewTabButton({ disabled, onCreate }) {
 		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: "aperture:size-4 aperture:shrink-0 aperture:text-muted-foreground" });
+function faviconSource(target, targetFaviconUrl) {
+	const captured = targetFaviconUrl?.(target.id);
+	return captured === void 0 ? resolveFaviconUrl(target.url) : captured;
+}
+function TabFavicon({ src }) {
+	const [failedSrc, setFailedSrc] = useState(null);
+	if (!src || failedSrc === src) return /* @__PURE__ */ jsx(Globe2, { className: "aperture:size-4 aperture:shrink-0 aperture:text-muted-foreground" });
 	return /* @__PURE__ */ jsx("img", {
-		src: faviconUrl,
+		src,
 		alt: "",
 		className: "aperture:size-4 aperture:shrink-0",
-		onError: () => setFailed(true)
+		onError: () => setFailedSrc(src)
 	});
 }
 function resolveFaviconUrl(url) {
@@ -2065,7 +2067,7 @@ function initials(name) {
 }
 //#endregion
 //#region src/components/browser-toolbar.tsx
-function BrowserToolbar({ control, leading, trailing, toolbarLeading, toolbarTrailing, features, collaborationRole, cdpUrl, shareUrls, localCursorEnabled, onLocalCursorChange, paintingEnabled, onPaintingEnabledChange, devToolsOpen, devToolsTargetIds, devToolsDock, onDevToolsOpenChange, onDevToolsDockChange, onSessionDetails, menuItems, shareMenuItems, menuFooterItems }) {
+function BrowserToolbar({ control, leading, trailing, toolbarLeading, toolbarTrailing, features, collaborationRole, cdpUrl, shareUrls, localCursorEnabled, onLocalCursorChange, paintingEnabled, onPaintingEnabledChange, devToolsOpen, devToolsTargetIds, devToolsDock, onDevToolsOpenChange, onDevToolsDockChange, onSessionDetails, menuItems, shareMenuItems, menuFooterItems, targetFaviconUrl }) {
 	const [urlDraft, setUrlDraft] = useState(null);
 	const displayUrl = control.activeTarget?.url ?? "";
 	const busy = control.phase === "connecting";
@@ -2107,7 +2109,8 @@ function BrowserToolbar({ control, leading, trailing, toolbarLeading, toolbarTra
 					onClose: control.closeTarget,
 					onReload: control.reload,
 					onReorder: control.reorderTargets,
-					loadThumbnail: control.loadTargetThumbnail
+					loadThumbnail: control.loadTargetThumbnail,
+					targetFaviconUrl
 				}) : /* @__PURE__ */ jsx("div", { className: "aperture:min-w-0 aperture:flex-1" }),
 				features.presence ? /* @__PURE__ */ jsx(CollaborationPresence, { collaboration: control.collaboration }) : null,
 				trailing
@@ -2429,7 +2432,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, trailing, toolbarLeading, toolbarTrailing, features: featureOverrides, collaborationRole, cdpUrl, shareUrls, onSessionDetails, menuItems, shareMenuItems, menuFooterItems }) {
+function BrowserControlPane({ control, leading, trailing, toolbarLeading, toolbarTrailing, features: featureOverrides, collaborationRole, cdpUrl, shareUrls, onSessionDetails, menuItems, shareMenuItems, menuFooterItems, targetFaviconUrl }) {
 	const features = resolveSessionFeatures(featureOverrides);
 	const [localCursorEnabled, setLocalCursorEnabled] = useState(true);
 	const [paintingEnabled, setPaintingEnabled] = useState(false);
@@ -2504,7 +2507,8 @@ function BrowserControlPane({ control, leading, trailing, toolbarLeading, toolba
 			onSessionDetails,
 			menuItems,
 			shareMenuItems,
-			menuFooterItems
+			menuFooterItems,
+			targetFaviconUrl
 		}), 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",