@vite-plugin-opencode-assistant/components 1.0.26 → 1.0.27

package/lib/@vite-plugin-opencode-assistant/components.es.js

@@ -1,4 +1,4 @@
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, useCssVars, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, useCssVars, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { truncate } from "@vite-plugin-opencode-assistant/shared";
 import getCssSelector from "css-selector-generator";
 //#region es/open-code-widget/src/context.js
@@ -582,6 +582,19 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			bottom: windowHeight.value - state.value.height - gapY.value,
 			left: gapX.value
 		}));
+		const closest = (arr, target) => {
+			return arr.reduce((pre, cur) => Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur);
+		};
+		const applyMagnetic = () => {
+			if (props.magnetic === "x") {
+				const nextX = closest([boundary.value.left, boundary.value.right], state.value.x);
+				state.value.x = nextX;
+			}
+			if (props.magnetic === "y") {
+				const nextY = closest([boundary.value.top, boundary.value.bottom], state.value.y);
+				state.value.y = nextY;
+			}
+		};
 		const dragging = ref(false);
 		const initialized = ref(false);
 		const rootStyle = computed(() => {
@@ -603,12 +616,25 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			if (x > maxX) x = maxX;
 			if (y < gapY.value) y = gapY.value;
 			if (y > maxY) y = maxY;
+			const oldX = state.value.x;
+			const oldY = state.value.y;
 			state.value = {
 				x,
 				y,
 				width: rect.width,
 				height: rect.height
 			};
+			if (!dragging.value) {
+				applyMagnetic();
+				if (state.value.x !== oldX || state.value.y !== oldY) {
+					const offset2 = {
+						x: state.value.x,
+						y: state.value.y
+					};
+					emit("update:offset", offset2);
+					emit("offset-change", offset2);
+				}
+			}
 		};
 		const touch = {
 			startX: ref(0),
@@ -645,6 +671,7 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			dragging.value = true;
 			prevX = state.value.x;
 			prevY = state.value.y;
+			document.body.classList.add("floating-bubble-dragging");
 			if (!("touches" in e)) {
 				window.addEventListener("mousemove", onTouchMove, { passive: false });
 				window.addEventListener("mouseup", onTouchEnd);
@@ -675,24 +702,15 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 				});
 			}
 		};
-		const closest = (arr, target) => {
-			return arr.reduce((pre, cur) => Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur);
-		};
 		const onTouchEnd = (e) => {
 			dragging.value = false;
+			document.body.classList.remove("floating-bubble-dragging");
 			if (e && !("touches" in e) && e.type === "mouseup") {
 				window.removeEventListener("mousemove", onTouchMove);
 				window.removeEventListener("mouseup", onTouchEnd);
 			}
 			requestAnimationFrame(() => {
-				if (props.magnetic === "x") {
-					const nextX = closest([boundary.value.left, boundary.value.right], state.value.x);
-					state.value.x = nextX;
-				}
-				if (props.magnetic === "y") {
-					const nextY = closest([boundary.value.top, boundary.value.bottom], state.value.y);
-					state.value.y = nextY;
-				}
+				applyMagnetic();
 				if (!touch.isTap.value) {
 					emit("drag-end");
 					const offset = {
@@ -723,6 +741,7 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			if (rootRef.value) rootRef.value.addEventListener("touchmove", onTouchMove, { passive: false });
 		});
 		onUnmounted(() => {
+			document.body.classList.remove("floating-bubble-dragging");
 			if (typeof window !== "undefined") {
 				window.removeEventListener("resize", handleResize);
 				window.removeEventListener("mousemove", onTouchMove);
@@ -752,6 +771,8 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			windowWidth,
 			windowHeight,
 			boundary,
+			closest,
+			applyMagnetic,
 			dragging,
 			initialized,
 			rootStyle,
@@ -771,7 +792,6 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			},
 			onTouchStart,
 			onTouchMove,
-			closest,
 			onTouchEnd,
 			onClick,
 			handleResize
@@ -799,38 +819,20 @@ __vue_sfc__$2.render = __vue_render__$2;
 var FloatingBubble_vue_default = __vue_sfc__$2;
 //#endregion
 //#region es/open-code-widget/src/components/Trigger.vue.js
-var STORAGE_KEY = "opencode-bubble-offset";
 var __vue_sfc__$1 = /* @__PURE__ */ defineComponent({
 	__name: "Trigger",
-	emits: [
-		"offset-change",
-		"drag-start",
-		"drag-end"
-	],
+	emits: ["drag-start", "drag-end"],
 	setup(__props, { expose: __expose, emit: __emit }) {
-		const { buttonActive: active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle } = useOpenCodeWidgetContext();
-		const loadOffset = () => {
-			try {
-				const saved = localStorage.getItem(STORAGE_KEY);
-				if (saved) {
-					const parsed = JSON.parse(saved);
-					if (parsed && (parsed.x !== 0 || parsed.y !== 0)) return parsed;
-				}
-			} catch (e) {}
-		};
-		const offset = ref(loadOffset());
+		const { buttonActive: active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, bubbleOffset, handleBubbleOffsetChange } = useOpenCodeWidgetContext();
+		const offset = ref(bubbleOffset.value);
 		const emit = __emit;
-		const saveOffset = (value) => {
-			try {
-				localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
-			} catch (e) {}
-		};
 		const handleOffsetChange = (value) => {
 			offset.value = value;
-			saveOffset(value);
-			emit("offset-change", value);
+			handleBubbleOffsetChange(value);
 		};
-		watch(offset, handleOffsetChange, { immediate: true });
+		watch(bubbleOffset, (newOffset) => {
+			offset.value = newOffset;
+		});
 		__expose({ offset });
 		const __returned__ = {
 			active,
@@ -839,11 +841,10 @@ var __vue_sfc__$1 = /* @__PURE__ */ defineComponent({
 			thinking,
 			resolvedTheme,
 			handleToggle,
-			STORAGE_KEY,
-			loadOffset,
+			bubbleOffset,
+			handleBubbleOffsetChange,
 			offset,
 			emit,
-			saveOffset,
 			handleOffsetChange,
 			FloatingBubble: FloatingBubble_vue_default
 		};
@@ -1347,35 +1348,16 @@ function findFileInfo(element, inspector) {
 	};
 }
 function getPreciseElementAtPoint(x, y, boundary) {
-	var _a, _b;
-	const highlight = document.querySelector(".opencode-element-highlight");
-	const tooltip = document.querySelector(".opencode-element-tooltip");
-	const highlightDisplay = ((_a = highlight == null ? void 0 : highlight.getAttribute("style")) == null ? void 0 : _a.includes("display: block")) ? "block" : "none";
-	const tooltipDisplay = ((_b = tooltip == null ? void 0 : tooltip.getAttribute("style")) == null ? void 0 : _b.includes("display: block")) ? "block" : "none";
-	if (highlight) highlight.style.display = "none";
-	if (tooltip) tooltip.style.display = "none";
-	let element = null;
-	try {
-		const elements = document.elementsFromPoint(x, y);
-		for (const el of elements) {
-			if (el.closest("#vue-inspector-container")) continue;
-			if (el.closest(".opencode-widget")) continue;
-			if (el.hasAttribute("data-v-inspector-ignore")) continue;
-			if (boundary) {
-				if (boundary.contains(el) || el === boundary) {
-					element = el;
-					break;
-				}
-			} else {
-				element = el;
-				break;
-			}
-		}
-	} finally {
-		if (highlight) highlight.style.display = highlightDisplay;
-		if (tooltip) tooltip.style.display = tooltipDisplay;
+	const elements = document.elementsFromPoint(x, y);
+	for (const el of elements) {
+		if (el.closest("#vue-inspector-container")) continue;
+		if (el.closest(".opencode-widget")) continue;
+		if (el.hasAttribute("data-v-inspector-ignore")) continue;
+		if (boundary) {
+			if (boundary.contains(el) || el === boundary) return el;
+		} else return el;
 	}
-	return element;
+	return null;
 }
 function useInspector(options) {
 	const highlightVisible = ref(false);
@@ -1396,74 +1378,117 @@ function useInspector(options) {
 	});
 	const INSPECTOR_CHECK_INTERVAL = 500;
 	let inspectorCheckTimer = null;
+	let currentHighlightElement = null;
+	let currentFileInfo = {
+		file: null,
+		line: null,
+		column: null
+	};
+	let currentPrimary = "#3b82f6";
+	let currentPrimaryBg = "rgba(59, 130, 246, 0.1)";
+	let currentDescription = "";
+	let currentFileInfoText = "";
 	function handleMouseMoveCore(e) {
 		var _a, _b;
 		if (!options.selectMode.value) return;
 		const inspector = window.__VUE_INSPECTOR__;
+		const highlight = document.querySelector(".opencode-element-highlight");
+		const tooltip = document.querySelector(".opencode-element-tooltip");
+		if (highlight) highlight.style.pointerEvents = "none";
+		if (tooltip) tooltip.style.pointerEvents = "none";
 		let elementToHighlight = null;
+		let targetNode = null;
 		let fileInfo = {
 			file: null,
 			line: null,
 			column: null
 		};
-		if (inspector) {
-			const { targetNode, params } = inspector.getTargetNode(e);
-			if (targetNode) {
-				elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode) || targetNode;
-				if (params && params.file) fileInfo = {
-					file: params.file,
-					line: (_a = params.line) != null ? _a : null,
-					column: (_b = params.column) != null ? _b : null
-				};
-				else if (elementToHighlight) fileInfo = findFileInfo(elementToHighlight, inspector);
+		try {
+			if (inspector) {
+				const result = inspector.getTargetNode(e);
+				targetNode = result.targetNode;
+				const params = result.params;
+				if (targetNode) {
+					elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode) || targetNode;
+					if (params && params.file) fileInfo = {
+						file: params.file,
+						line: (_a = params.line) != null ? _a : null,
+						column: (_b = params.column) != null ? _b : null
+					};
+					else fileInfo = findFileInfo(targetNode, inspector);
+				}
 			}
+			if (!elementToHighlight) elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, null);
+			if (elementToHighlight && !fileInfo.file) fileInfo = getFileInfoFromVueInstance(elementToHighlight) || fileInfo;
+		} finally {
+			if (highlight) highlight.style.pointerEvents = "";
+			if (tooltip) tooltip.style.pointerEvents = "";
 		}
-		if (!elementToHighlight) elementToHighlight = getPreciseElementAtPoint(e.clientX, e.clientY, null);
-		if (elementToHighlight && !fileInfo.file) fileInfo = getFileInfoFromVueInstance(elementToHighlight) || fileInfo;
 		if (elementToHighlight) {
-			const rect = elementToHighlight.getBoundingClientRect();
-			const widget = document.querySelector(".opencode-widget");
-			let primary = "#3b82f6";
-			let primaryBg = "rgba(59, 130, 246, 0.1)";
-			if (widget) {
-				const style = getComputedStyle(widget);
-				primary = style.getPropertyValue("--oc-primary").trim() || primary;
-				primaryBg = style.getPropertyValue("--oc-primary-bg").trim() || primaryBg;
-			}
-			highlightVisible.value = true;
-			highlightStyle.value = {
-				top: `${rect.top}px`,
-				left: `${rect.left}px`,
-				width: `${rect.width}px`,
-				height: `${rect.height}px`,
-				border: `2px solid ${primary}`,
-				background: primaryBg
-			};
-			const description = getElementDescription(elementToHighlight);
-			const fileName = fileInfo.file ? fileInfo.file.split("/").pop() : "";
+			const elementChanged = currentHighlightElement !== elementToHighlight;
+			if (elementChanged) {
+				currentHighlightElement = elementToHighlight;
+				currentFileInfo = fileInfo;
+				const widget = document.querySelector(".opencode-widget");
+				if (widget) {
+					const style = getComputedStyle(widget);
+					currentPrimary = style.getPropertyValue("--oc-primary").trim() || currentPrimary;
+					currentPrimaryBg = style.getPropertyValue("--oc-primary-bg").trim() || currentPrimaryBg;
+				}
+				currentDescription = getElementDescription(elementToHighlight);
+			} else if (!currentFileInfo.file && fileInfo.file) currentFileInfo = fileInfo;
+			const fileName = currentFileInfo.file ? currentFileInfo.file.split("/").pop() : "";
 			let lineInfo = "";
-			if (fileInfo.line) {
-				lineInfo = `:${fileInfo.line}`;
-				if (fileInfo.column) lineInfo += `:${fileInfo.column}`;
+			if (currentFileInfo.line) {
+				lineInfo = `:${currentFileInfo.line}`;
+				if (currentFileInfo.column) lineInfo += `:${currentFileInfo.column}`;
+			}
+			const newFileInfoText = fileName ? `${fileName}${lineInfo}` : "";
+			if (elementChanged || currentFileInfoText !== newFileInfoText) {
+				currentFileInfoText = newFileInfoText;
+				tooltipContent.value = {
+					description: currentDescription,
+					fileInfo: currentFileInfoText
+				};
 			}
-			tooltipContent.value = {
-				description,
-				fileInfo: fileName ? `${fileName}${lineInfo}` : ""
+			const rect = elementToHighlight.getBoundingClientRect();
+			const newTop = `${rect.top}px`;
+			const newLeft = `${rect.left}px`;
+			const newWidth = `${rect.width}px`;
+			const newHeight = `${rect.height}px`;
+			if (highlightStyle.value.top !== newTop || highlightStyle.value.left !== newLeft || highlightStyle.value.width !== newWidth || highlightStyle.value.height !== newHeight) highlightStyle.value = {
+				top: newTop,
+				left: newLeft,
+				width: newWidth,
+				height: newHeight,
+				border: `2px solid ${currentPrimary}`,
+				background: currentPrimaryBg
 			};
-			tooltipVisible.value = true;
 			const tooltipHeight = 50;
 			const tooltipWidth = 200;
 			let tooltipTop = rect.top - tooltipHeight - 8;
 			let tooltipLeft = rect.left;
 			if (tooltipTop < 10) tooltipTop = rect.bottom + 8;
 			if (tooltipLeft + tooltipWidth > window.innerWidth - 10) tooltipLeft = window.innerWidth - tooltipWidth - 10;
-			tooltipStyle.value = {
-				top: `${tooltipTop}px`,
-				left: `${tooltipLeft}px`
+			const newTooltipTop = `${tooltipTop}px`;
+			const newTooltipLeft = `${tooltipLeft}px`;
+			if (tooltipStyle.value.top !== newTooltipTop || tooltipStyle.value.left !== newTooltipLeft) tooltipStyle.value = {
+				top: newTooltipTop,
+				left: newTooltipLeft
 			};
+			if (!highlightVisible.value) highlightVisible.value = true;
+			if (!tooltipVisible.value) tooltipVisible.value = true;
 		} else {
-			highlightVisible.value = false;
-			tooltipVisible.value = false;
+			currentHighlightElement = null;
+			currentDescription = "";
+			currentFileInfoText = "";
+			currentFileInfo = {
+				file: null,
+				line: null,
+				column: null
+			};
+			if (highlightVisible.value) highlightVisible.value = false;
+			if (tooltipVisible.value) tooltipVisible.value = false;
 		}
 	}
 	const handleMouseMove = throttle(handleMouseMoveCore, 16);
@@ -1527,6 +1552,14 @@ function useInspector(options) {
 			if (inspector) inspector.disable();
 			document.removeEventListener("mousemove", handleMouseMove);
 			document.removeEventListener("keydown", handleKeydown, true);
+			currentHighlightElement = null;
+			currentDescription = "";
+			currentFileInfoText = "";
+			currentFileInfo = {
+				file: null,
+				line: null,
+				column: null
+			};
 			highlightVisible.value = false;
 			tooltipVisible.value = false;
 		}
@@ -1557,6 +1590,62 @@ function useInspector(options) {
 	};
 }
 //#endregion
+//#region es/open-code-widget/composables/use-persist-state.js
+var STORAGE_KEY = "opencode-widget-state";
+function loadState() {
+	if (typeof window === "undefined") return null;
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (stored) return JSON.parse(stored);
+	} catch (e) {
+		console.warn("[OpenCodeWidget] Failed to load persisted state:", e);
+	}
+	return null;
+}
+function saveState(state) {
+	if (typeof window === "undefined") return;
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+	} catch (e) {
+		console.warn("[OpenCodeWidget] Failed to save state:", e);
+	}
+}
+function usePersistState(options) {
+	const restoreState = () => {
+		const saved = loadState();
+		if (options.onRestore) options.onRestore(saved || {});
+		return saved;
+	};
+	const getCurrentState = () => ({
+		open: options.open.value,
+		minimized: options.minimized.value,
+		promptDockVisible: options.promptDockVisible.value,
+		bubbleOffset: options.bubbleOffset.value,
+		theme: options.theme.value,
+		sessionListCollapsed: options.sessionListCollapsed.value
+	});
+	const persistState = () => {
+		saveState(getCurrentState());
+	};
+	onMounted(() => {
+		restoreState();
+		watch([
+			options.open,
+			options.minimized,
+			options.promptDockVisible,
+			options.bubbleOffset,
+			options.theme,
+			options.sessionListCollapsed
+		], () => {
+			persistState();
+		}, { deep: true });
+	});
+	return {
+		restoreState,
+		persistState
+	};
+}
+//#endregion
 //#region es/open-code-widget/src/index.vue.js
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -1760,17 +1849,26 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			var _a;
 			(_a = frameRef.value) == null || _a.sendMessageToIframe(type, data);
 		};
+		const localSessionListCollapsed = ref(props.sessionListCollapsed);
+		const minimized = ref(false);
+		const promptDockVisible = ref(true);
+		const isRestoring = ref(true);
+		const iframeLoaded = ref(false);
+		const syncStateToIframe = () => {
+			if (!iframeLoaded.value) return;
+			sendMessageToIframe("prompt-dock-visibility-change", { visible: promptDockVisible.value });
+			sendMessageToIframe("minimize-state-change", { minimized: minimized.value });
+		};
 		const handleFrameLoaded = () => {
 			emit("frame-loaded");
+			iframeLoaded.value = true;
+			syncStateToIframe();
 		};
 		__expose({
 			showNotification,
 			showConfirmDialog,
 			sendMessageToIframe
 		});
-		const localSessionListCollapsed = ref(props.sessionListCollapsed);
-		const minimized = ref(false);
-		const promptDockVisible = ref(true);
 		watch(() => props.sessionListCollapsed, (val) => {
 			localSessionListCollapsed.value = val;
 		});
@@ -1845,6 +1943,48 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 				emit("toggle-select-mode", false);
 			}
 		});
+		const bubbleOffset = ref(void 0);
+		usePersistState({
+			open: toRef(props, "open"),
+			minimized,
+			promptDockVisible,
+			bubbleOffset,
+			theme: toRef(props, "theme"),
+			sessionListCollapsed: localSessionListCollapsed,
+			onRestore: (state) => {
+				if (state.open !== void 0 && state.open !== props.open) {
+					emit("update:open", state.open);
+					emit("toggle", state.open);
+				}
+				if (state.minimized !== void 0) minimized.value = state.minimized;
+				if (state.bubbleOffset !== void 0) {
+					const bubbleSize = 44;
+					const margin = 10;
+					const maxX = window.innerWidth - bubbleSize - margin;
+					const maxY = window.innerHeight - bubbleSize - margin;
+					bubbleOffset.value = {
+						x: Math.max(margin, Math.min(state.bubbleOffset.x, maxX)),
+						y: Math.max(margin, Math.min(state.bubbleOffset.y, maxY))
+					};
+				}
+				if (state.theme !== void 0 && state.theme !== props.theme) {
+					emit("update:theme", state.theme);
+					emit("toggle-theme", state.theme);
+				}
+				if (state.sessionListCollapsed !== void 0 && state.sessionListCollapsed !== props.sessionListCollapsed) {
+					localSessionListCollapsed.value = state.sessionListCollapsed;
+					emit("update:sessionListCollapsed", state.sessionListCollapsed);
+				}
+				if (state.promptDockVisible !== void 0) promptDockVisible.value = state.promptDockVisible;
+				else if (minimized.value) promptDockVisible.value = false;
+				nextTick(() => {
+					syncStateToIframe();
+					setTimeout(() => {
+						isRestoring.value = false;
+					}, 50);
+				});
+			}
+		});
 		const handleToggleMinimize = () => {
 			minimized.value = !minimized.value;
 			promptDockVisible.value = !minimized.value;
@@ -1855,15 +1995,29 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			promptDockVisible.value = !promptDockVisible.value;
 			sendMessageToIframe("prompt-dock-visibility-change", { visible: promptDockVisible.value });
 		};
-		const bubbleOffset = ref(void 0);
+		const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 0);
+		const windowHeight = ref(typeof window !== "undefined" ? window.innerHeight : 0);
+		const handleWindowResize = () => {
+			if (typeof window !== "undefined") {
+				windowWidth.value = window.innerWidth;
+				windowHeight.value = window.innerHeight;
+			}
+		};
+		onMounted(() => {
+			if (typeof window !== "undefined") window.addEventListener("resize", handleWindowResize);
+		});
+		onUnmounted(() => {
+			if (typeof window !== "undefined") window.removeEventListener("resize", handleWindowResize);
+		});
 		const bubbleQuadrant = computed(() => {
 			var _a, _b, _c, _d;
 			if (typeof window === "undefined") return "bottom-right";
-			const centerX = window.innerWidth / 2;
-			const centerY = window.innerHeight / 2;
+			const centerX = windowWidth.value / 2;
+			const centerY = windowHeight.value / 2;
 			const bubbleSize = 44;
-			const effectiveX = ((_b = (_a = bubbleOffset.value) == null ? void 0 : _a.x) != null ? _b : window.innerWidth - bubbleSize - 24) + bubbleSize / 2;
-			const effectiveY = ((_d = (_c = bubbleOffset.value) == null ? void 0 : _c.y) != null ? _d : window.innerHeight - bubbleSize - 24) + bubbleSize / 2;
+			const currentOffset = (_b = (_a = triggerRef.value) == null ? void 0 : _a.offset) != null ? _b : bubbleOffset.value;
+			const effectiveX = ((_c = currentOffset == null ? void 0 : currentOffset.x) != null ? _c : windowWidth.value - bubbleSize - 24) + bubbleSize / 2;
+			const effectiveY = ((_d = currentOffset == null ? void 0 : currentOffset.y) != null ? _d : windowHeight.value - bubbleSize - 24) + bubbleSize / 2;
 			if (effectiveX >= centerX && effectiveY >= centerY) return "bottom-right";
 			else if (effectiveX < centerX && effectiveY >= centerY) return "bottom-left";
 			else if (effectiveX >= centerX && effectiveY < centerY) return "top-right";
@@ -1874,35 +2028,37 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			return quadrant === "top-right" || quadrant === "bottom-right";
 		});
 		const chatPositionStyle = computed(() => {
-			var _a;
+			var _a, _b, _c;
 			if (typeof window === "undefined") return {};
-			const windowWidth = window.innerWidth;
-			const windowHeight = window.innerHeight;
 			const chatWidth = minimized.value ? 300 : 700;
-			const chatHeight = minimized.value ? 300 : Math.min(windowHeight * .86, windowHeight - 40);
+			const chatHeight = minimized.value ? 300 : Math.min(windowHeight.value * .86, windowHeight.value - 40);
 			const gap = 24;
 			const bubbleSize = 44;
 			const screenMargin = 20;
-			const effectiveOffset = (_a = bubbleOffset.value) != null ? _a : {
-				x: windowWidth - bubbleSize - gap,
-				y: windowHeight - bubbleSize - gap
+			const effectiveOffset = (_c = (_b = (_a = triggerRef.value) == null ? void 0 : _a.offset) != null ? _b : bubbleOffset.value) != null ? _c : {
+				x: windowWidth.value - bubbleSize - gap,
+				y: windowHeight.value - bubbleSize - gap
 			};
 			const style = {};
 			if (isBubbleOnRightSide.value) {
-				let rightPos = windowWidth - effectiveOffset.x + gap;
-				const maxRight = windowWidth - chatWidth - screenMargin;
+				let rightPos = windowWidth.value - effectiveOffset.x + gap;
+				const minRight = screenMargin;
+				const maxRight = windowWidth.value - chatWidth - screenMargin;
 				if (rightPos > maxRight) rightPos = maxRight;
+				if (rightPos < minRight) rightPos = minRight;
 				style.right = `${rightPos}px`;
 				style.left = "auto";
 			} else {
 				let leftPos = effectiveOffset.x + bubbleSize + gap;
-				const maxLeft = windowWidth - chatWidth - screenMargin;
+				const minLeft = screenMargin;
+				const maxLeft = windowWidth.value - chatWidth - screenMargin;
 				if (leftPos > maxLeft) leftPos = maxLeft;
+				if (leftPos < minLeft) leftPos = minLeft;
 				style.left = `${leftPos}px`;
 				style.right = "auto";
 			}
-			let bottomPos = windowHeight - effectiveOffset.y - bubbleSize;
-			const maxBottom = windowHeight - chatHeight - screenMargin;
+			let bottomPos = windowHeight.value - effectiveOffset.y - bubbleSize;
+			const maxBottom = windowHeight.value - chatHeight - screenMargin;
 			if (bottomPos > maxBottom) bottomPos = maxBottom;
 			if (bottomPos < screenMargin) bottomPos = screenMargin;
 			style.bottom = `${bottomPos}px`;
@@ -1964,6 +2120,7 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			thinking: toRef(props, "thinking"),
 			minimized,
 			promptDockVisible,
+			bubbleOffset,
 			iframeSource,
 			buttonActive,
 			sessionListTitle,
@@ -1985,7 +2142,8 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			handleClickSelectedNode,
 			handleRemoveSelectedNode: (payload) => handleRemoveSelectedNode(payload.item, payload.index, payload.source),
 			handleClearSelectedNodes,
-			handleFrameLoaded
+			handleFrameLoaded,
+			handleBubbleOffsetChange
 		});
 		const __returned__ = {
 			props,
@@ -2015,10 +2173,13 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			frameRef,
 			triggerRef,
 			sendMessageToIframe,
-			handleFrameLoaded,
 			localSessionListCollapsed,
 			minimized,
 			promptDockVisible,
+			isRestoring,
+			iframeLoaded,
+			syncStateToIframe,
+			handleFrameLoaded,
 			buttonActive,
 			containerClasses,
 			iframeSource,
@@ -2045,9 +2206,12 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			tooltipVisible,
 			tooltipStyle,
 			tooltipContent,
+			bubbleOffset,
 			handleToggleMinimize,
 			handleTogglePromptDock,
-			bubbleOffset,
+			windowWidth,
+			windowHeight,
+			handleWindowResize,
 			bubbleQuadrant,
 			isBubbleOnRightSide,
 			chatPositionStyle,
@@ -2104,7 +2268,6 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", { class: normalizeClass($setup.containerClasses) }, [
 		createVNode($setup["Trigger"], {
 			ref: "triggerRef",
-			onOffsetChange: $setup.handleBubbleOffsetChange,
 			onDragStart: $setup.handleDragStart,
 			onDragEnd: $setup.handleDragEnd
 		}, createSlots({ _: 2 }, [$setup.slots["button-icon"] ? {
@@ -2116,7 +2279,8 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
 			class: normalizeClass(["opencode-chat", {
 				open: $props.open,
 				minimized: $setup.minimized,
-				dragging: $setup.isDragging
+				dragging: $setup.isDragging,
+				"no-transition": $setup.isRestoring
 			}]),
 			style: normalizeStyle($setup.chatPositionStyle)
 		}, [
@@ -2171,11 +2335,11 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
 		createVNode($setup["SelectHint"]),
 		withDirectives(createElementVNode("div", {
 			class: "opencode-element-highlight",
-			style: normalizeStyle(__spreadValues({ display: $setup.highlightVisible ? "block" : "none" }, $setup.highlightStyle))
+			style: normalizeStyle($setup.highlightStyle)
 		}, null, 4), [[vShow, $setup.highlightVisible]]),
 		withDirectives(createElementVNode("div", {
 			class: "opencode-element-tooltip",
-			style: normalizeStyle(__spreadValues({ display: $setup.tooltipVisible ? "block" : "none" }, $setup.tooltipStyle))
+			style: normalizeStyle($setup.tooltipStyle)
 		}, [createElementVNode("div", _hoisted_3, toDisplayString($setup.tooltipContent.description), 1), createElementVNode("div", _hoisted_4, toDisplayString($setup.tooltipContent.fileInfo), 1)], 4), [[vShow, $setup.tooltipVisible]]),
 		$setup.dialogVisible ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createElementVNode("div", _hoisted_8, toDisplayString($setup.dialogMessage), 1)]), createElementVNode("div", { class: "opencode-dialog-actions" }, [createElementVNode("button", {
 			class: "opencode-dialog-btn cancel",
@@ -2193,7 +2357,7 @@ __vue_sfc__.render = __vue_render__;
 var open_code_widget_default = __vue_sfc__;
 //#endregion
 //#region es/index.js
-var version = "1.0.26";
+var version = "1.0.27";
 function install(app, options) {
 	[open_code_widget_default].forEach((item) => {
 		if (item.install) app.use(item, options);