@copilotkit/web-inspector 1.75.2 → 1.76.0

package/dist/index.cjs

@@ -267,8 +267,18 @@ const DRAG_THRESHOLD = 6;
 const MIN_WINDOW_WIDTH = 880;
 const MIN_WINDOW_WIDTH_DOCKED_LEFT = 640;
 const MIN_WINDOW_HEIGHT = 480;
+/**
+* A window minimum that gives way on screens smaller than it, so the window
+* (and its close control) never runs past the viewport edge.
+*/
+const viewportCappedMin = (px, unit) => `min(${px}px, calc(100${unit} - ${EDGE_MARGIN * 2}px))`;
+/**
+* The floating window zooms down with the screen, never below this, once the
+* viewport can no longer hold the default window at full size.
+*/
+const MIN_WINDOW_SCALE = .8;
 const INSPECTOR_STORAGE_KEY = "cpk:inspector:state";
-const LAUNCHER_MIN_SIZE = 51.84;
+const LAUNCHER_MIN_SIZE = 34;
 const LAUNCHER_MAX_SIZE = 62.208;
 const DEFAULT_BUTTON_SIZE = {
 	width: LAUNCHER_MIN_SIZE,
@@ -5547,7 +5557,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			const sidebarBounds = sidebar.getBoundingClientRect();
 			this.sidebarRailTooltip = {
 				label,
-				top: targetBounds.top - sidebarBounds.top + targetBounds.height / 2
+				top: (targetBounds.top - sidebarBounds.top + targetBounds.height / 2) / this.getWindowScale()
 			};
 			this.requestUpdate();
 		};
@@ -7699,7 +7709,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
            is the button's sibling, can clear the mark by the same length. */
         --cpk-launcher-size: clamp(
           ${LAUNCHER_MIN_SIZE}px,
-          7vw,
+          calc(22px + 2.8vw),
           ${LAUNCHER_MAX_SIZE}px
         );
       }
@@ -11362,6 +11372,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		const isPoppedOut = this.isPoppedOut;
 		const isTransitioning = this.hasAttribute("data-transitioning");
 		const disableDrag = isDocked || isPoppedOut;
+		const scale = this.getWindowScale();
 		const windowStyles = isPoppedOut ? {
 			position: "fixed",
 			inset: "0",
@@ -11375,17 +11386,18 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			...this.getDockedWindowStyles(),
 			overflowX: "hidden"
 		} : {
-			width: `${Math.round(windowState.size.width)}px`,
-			height: `${Math.round(windowState.size.height)}px`,
-			minWidth: `${MIN_WINDOW_WIDTH}px`,
-			minHeight: `${MIN_WINDOW_HEIGHT}px`,
-			overflowX: "hidden"
+			width: `${Math.round(windowState.size.width / scale)}px`,
+			height: `${Math.round(windowState.size.height / scale)}px`,
+			minWidth: viewportCappedMin(MIN_WINDOW_WIDTH, "vw"),
+			minHeight: viewportCappedMin(MIN_WINDOW_HEIGHT, "vh"),
+			overflowX: "hidden",
+			...scale < 1 ? { zoom: String(scale) } : {}
 		};
 		const hasContextDropdown = this.contextOptions.some((option) => option.key !== "all-agents");
 		const viewportWidth = isPoppedOut ? this.popOut?.win.innerWidth ?? windowState.size.width : typeof window === "undefined" ? windowState.size.width : window.innerWidth;
 		const automaticallyCollapsed = require_inspector_nav.shouldUseIconRail({
 			dockedLeft: this.dockMode === "docked-left",
-			width: viewportWidth
+			width: viewportWidth / scale
 		});
 		const iconRail = this.sidebarCollapsed || automaticallyCollapsed;
 		const contextDropdown = hasContextDropdown ? this.renderContextDropdown(iconRail) : lit.nothing;
@@ -11715,8 +11727,9 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	getRenderedInspectorWindowSize() {
 		const inspectorWindow = this.shadowRoot?.querySelector(".inspector-window");
 		if (inspectorWindow) {
-			const width = Math.round(Number.parseFloat(inspectorWindow.style.width));
-			const height = Math.round(Number.parseFloat(inspectorWindow.style.height));
+			const scale = this.getWindowScale();
+			const width = Math.round(Number.parseFloat(inspectorWindow.style.width) * scale);
+			const height = Math.round(Number.parseFloat(inspectorWindow.style.height) * scale);
 			if (Number.isFinite(width) && Number.isFinite(height)) return {
 				width,
 				height
@@ -11801,6 +11814,16 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			height: window.innerHeight
 		};
 	}
+	/**
+	* Zoom for the floating window: 1 while the viewport holds the default
+	* window, then proportional to the screen down to MIN_WINDOW_SCALE, so a
+	* small screen gets the same layout smaller rather than a cramped one.
+	*/
+	getWindowScale() {
+		if (typeof window === "undefined" || this.isPoppedOut || this.dockMode !== "floating") return 1;
+		const fit = Math.min(window.innerWidth / (DEFAULT_WINDOW_SIZE.width + EDGE_MARGIN * 2), window.innerHeight / (DEFAULT_WINDOW_SIZE.height + EDGE_MARGIN * 2));
+		return Math.min(1, Math.max(MIN_WINDOW_SCALE, Math.round(fit * 20) / 20));
+	}
 	persistState() {
 		const state = {
 			button: {
@@ -12106,14 +12129,14 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			bottom: "0",
 			width: `${Math.round(this.contextState.window.size.width)}px`,
 			height: "auto",
-			minWidth: `${MIN_WINDOW_WIDTH_DOCKED_LEFT}px`,
+			minWidth: viewportCappedMin(MIN_WINDOW_WIDTH_DOCKED_LEFT, "vw"),
 			borderRadius: "0"
 		};
 		return {
 			width: `${Math.round(this.contextState.window.size.width)}px`,
 			height: `${Math.round(this.contextState.window.size.height)}px`,
-			minWidth: `${MIN_WINDOW_WIDTH}px`,
-			minHeight: `${MIN_WINDOW_HEIGHT}px`
+			minWidth: viewportCappedMin(MIN_WINDOW_WIDTH, "vw"),
+			minHeight: viewportCappedMin(MIN_WINDOW_HEIGHT, "vh")
 		};
 	}
 	handleDockClick(mode) {
@@ -13949,7 +13972,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
         <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
           <!-- Left sidebar: thread list -->
           <div
-            style="display:${this.threadListCollapsed ? "none" : "flex"};width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;flex-direction:column;border-right:1px solid #DBDBE5;"
+            style="display:${this.threadListCollapsed ? "none" : "flex"};width:${this.threadListWidth}px;max-width:calc(100% - 160px);flex-shrink:0;overflow:hidden;flex-direction:column;border-right:1px solid #DBDBE5;"
           >
         ${ephemeral ? lit.html`
           <button type="button" class="cpk-ephemeral-threads-banner"