@vite-plugin-opencode-assistant/components 1.0.25 → 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, 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
@@ -565,27 +565,12 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 		const props = __props;
 		const emit = __emit;
 		const rootRef = ref(null);
-		const getInitialState = () => {
-			if (props.offset) return {
-				x: props.offset.x,
-				y: props.offset.y,
-				width: 0,
-				height: 0
-			};
-			if (typeof window !== "undefined") return {
-				x: window.innerWidth - 42 - 24,
-				y: window.innerHeight - 42 - 24,
-				width: 0,
-				height: 0
-			};
-			return {
-				x: 0,
-				y: 0,
-				width: 0,
-				height: 0
-			};
-		};
-		const state = ref(getInitialState());
+		const state = ref({
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		});
 		const isObject = (val) => val !== null && typeof val === "object";
 		const gapX = computed(() => isObject(props.gap) ? props.gap.x : props.gap);
 		const gapY = computed(() => isObject(props.gap) ? props.gap.y : props.gap);
@@ -597,20 +582,31 @@ 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(() => {
 			const style = {};
 			style.transform = `translate3d(${`${state.value.x}px`}, ${`${state.value.y}px`}, 0)`;
-			if (dragging.value) style.transition = "none";
+			if (dragging.value || !initialized.value) style.transition = "none";
 			else style.transition = "transform 0.3s ease";
 			return style;
 		});
-		const show = ref(true);
 		const updateState = () => {
-			if (!show.value || !rootRef.value || typeof window === "undefined") return;
+			if (!rootRef.value || typeof window === "undefined") return;
 			const rect = rootRef.value.getBoundingClientRect();
-			if (rect.width === 0 || rect.height === 0) return;
 			const { offset } = props;
 			let x = offset ? offset.x : windowWidth.value - rect.width - gapX.value;
 			let y = offset ? offset.y : windowHeight.value - rect.height - gapY.value;
@@ -620,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),
@@ -662,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);
@@ -692,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 = {
@@ -732,16 +733,15 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			}
 		};
 		onMounted(() => {
+			updateState();
 			requestAnimationFrame(() => {
-				updateState();
-				requestAnimationFrame(() => {
-					initialized.value = true;
-				});
+				initialized.value = true;
 			});
 			if (typeof window !== "undefined") window.addEventListener("resize", handleResize);
 			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);
@@ -756,21 +756,14 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			gapY,
 			() => props.offset
 		], updateState, { deep: true });
-		const isOnRightSide = computed(() => {
-			return state.value.x > windowWidth.value / 2;
-		});
-		__expose({
-			isOnRightSide,
-			offset: computed(() => ({
-				x: state.value.x,
-				y: state.value.y
-			}))
-		});
+		__expose({ offset: computed(() => ({
+			x: state.value.x,
+			y: state.value.y
+		})) });
 		const __returned__ = {
 			props,
 			emit,
 			rootRef,
-			getInitialState,
 			state,
 			isObject,
 			gapX,
@@ -778,10 +771,11 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			windowWidth,
 			windowHeight,
 			boundary,
+			closest,
+			applyMagnetic,
 			dragging,
 			initialized,
 			rootStyle,
-			show,
 			updateState,
 			touch,
 			get prevX() {
@@ -798,11 +792,9 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 			},
 			onTouchStart,
 			onTouchMove,
-			closest,
 			onTouchEnd,
 			onClick,
-			handleResize,
-			isOnRightSide
+			handleResize
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -812,7 +804,7 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
 	}
 }));
 function __vue_render__$2(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createBlock(Teleport, { to: $props.teleport }, [withDirectives(createElementVNode("div", {
+	return openBlock(), createBlock(Teleport, { to: $props.teleport }, [createElementVNode("div", {
 		ref: "rootRef",
 		class: "floating-bubble",
 		style: normalizeStyle($setup.rootStyle),
@@ -821,60 +813,27 @@ function __vue_render__$2(_ctx, _cache, $props, $setup, $data, $options) {
 		onTouchcancel: $setup.onTouchEnd,
 		onMousedown: $setup.onTouchStart,
 		onClickCapture: $setup.onClick
-	}, [renderSlot(_ctx.$slots, "default")], 36), [[vShow, $setup.show && $setup.initialized]])], 8, ["to"]);
+	}, [renderSlot(_ctx.$slots, "default")], 36)], 8, ["to"]);
 }
 __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) {}
-			return {
-				x: 0,
-				y: 0
-			};
-		};
-		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);
 		};
-		const bubbleRef = ref(null);
-		const isOnRightSide = computed(() => {
-			if (typeof window === "undefined") return true;
-			const centerX = window.innerWidth / 2;
-			return offset.value.x > centerX;
-		});
-		onMounted(() => {
-			if (offset.value.x !== 0 || offset.value.y !== 0) emit("offset-change", offset.value);
-		});
-		__expose({
-			isOnRightSide,
-			offset
+		watch(bubbleOffset, (newOffset) => {
+			offset.value = newOffset;
 		});
+		__expose({ offset });
 		const __returned__ = {
 			active,
 			open,
@@ -882,14 +841,11 @@ var __vue_sfc__$1 = /* @__PURE__ */ defineComponent({
 			thinking,
 			resolvedTheme,
 			handleToggle,
-			STORAGE_KEY,
-			loadOffset,
+			bubbleOffset,
+			handleBubbleOffsetChange,
 			offset,
 			emit,
-			saveOffset,
 			handleOffsetChange,
-			bubbleRef,
-			isOnRightSide,
 			FloatingBubble: FloatingBubble_vue_default
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
@@ -1392,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);
@@ -1441,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}`;
 			}
-			tooltipContent.value = {
-				description,
-				fileInfo: fileName ? `${fileName}${lineInfo}` : ""
+			const newFileInfoText = fileName ? `${fileName}${lineInfo}` : "";
+			if (elementChanged || currentFileInfoText !== newFileInfoText) {
+				currentFileInfoText = newFileInfoText;
+				tooltipContent.value = {
+					description: currentDescription,
+					fileInfo: currentFileInfoText
+				};
+			}
+			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);
@@ -1572,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;
 		}
@@ -1602,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,6 +1804,10 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 		"thinking-change"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
+		useCssVars((_ctx) => ({
+			"-chatAnimationOrigin.x": chatAnimationOrigin.value.x,
+			"-chatAnimationOrigin.y": chatAnimationOrigin.value.y
+		}));
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
@@ -1801,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;
 		});
@@ -1886,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;
@@ -1896,40 +1995,70 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			promptDockVisible.value = !promptDockVisible.value;
 			sendMessageToIframe("prompt-dock-visibility-change", { visible: promptDockVisible.value });
 		};
-		const bubbleOffset = ref({
-			x: 0,
-			y: 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 = windowWidth.value / 2;
+			const centerY = windowHeight.value / 2;
+			const bubbleSize = 44;
+			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";
+			else return "top-left";
 		});
 		const isBubbleOnRightSide = computed(() => {
-			if (typeof window === "undefined") return true;
-			const centerX = window.innerWidth / 2;
-			return bubbleOffset.value.x > centerX;
+			const quadrant = bubbleQuadrant.value;
+			return quadrant === "top-right" || quadrant === "bottom-right";
 		});
 		const chatPositionStyle = computed(() => {
+			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 = (_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 - bubbleOffset.value.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 = bubbleOffset.value.x + bubbleSize + gap;
-				const maxLeft = windowWidth - chatWidth - screenMargin;
+				let leftPos = effectiveOffset.x + bubbleSize + gap;
+				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 - bubbleOffset.value.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`;
@@ -1938,6 +2067,26 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 		const handleBubbleOffsetChange = (offset) => {
 			bubbleOffset.value = offset;
 		};
+		const chatAnimationOrigin = computed(() => {
+			switch (bubbleQuadrant.value) {
+				case "top-left": return {
+					x: "-20px",
+					y: "-20px"
+				};
+				case "top-right": return {
+					x: "20px",
+					y: "-20px"
+				};
+				case "bottom-left": return {
+					x: "-20px",
+					y: "20px"
+				};
+				default: return {
+					x: "20px",
+					y: "20px"
+				};
+			}
+		});
 		const isDragging = ref(false);
 		let wasOpenBeforeDrag = false;
 		const handleDragStart = () => {
@@ -1971,6 +2120,7 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			thinking: toRef(props, "thinking"),
 			minimized,
 			promptDockVisible,
+			bubbleOffset,
 			iframeSource,
 			buttonActive,
 			sessionListTitle,
@@ -1992,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,
@@ -2022,10 +2173,13 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			frameRef,
 			triggerRef,
 			sendMessageToIframe,
-			handleFrameLoaded,
 			localSessionListCollapsed,
 			minimized,
 			promptDockVisible,
+			isRestoring,
+			iframeLoaded,
+			syncStateToIframe,
+			handleFrameLoaded,
 			buttonActive,
 			containerClasses,
 			iframeSource,
@@ -2052,12 +2206,17 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
 			tooltipVisible,
 			tooltipStyle,
 			tooltipContent,
+			bubbleOffset,
 			handleToggleMinimize,
 			handleTogglePromptDock,
-			bubbleOffset,
+			windowWidth,
+			windowHeight,
+			handleWindowResize,
+			bubbleQuadrant,
 			isBubbleOnRightSide,
 			chatPositionStyle,
 			handleBubbleOffsetChange,
+			chatAnimationOrigin,
 			isDragging,
 			get wasOpenBeforeDrag() {
 				return wasOpenBeforeDrag;
@@ -2109,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"] ? {
@@ -2121,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)
 		}, [
@@ -2176,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",
@@ -2198,7 +2357,7 @@ __vue_sfc__.render = __vue_render__;
 var open_code_widget_default = __vue_sfc__;
 //#endregion
 //#region es/index.js
-var version = "1.0.25";
+var version = "1.0.27";
 function install(app, options) {
 	[open_code_widget_default].forEach((item) => {
 		if (item.install) app.use(item, options);