npm - @vite-plugin-opencode-assistant/components - Versions diffs - 1.0.25 → 1.0.27 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/es/open-code-widget/src/components/Trigger.vue.js CHANGED Viewed

@@ -1,12 +1,11 @@
 import "./Trigger-sfc.css";
 import { defineComponent as _defineComponent } from "vue";
-import { ref, computed, onMounted } from "vue";
+import { ref, watch } from "vue";
 import { useOpenCodeWidgetContext } from "../context";
 import FloatingBubble from "./FloatingBubble/FloatingBubble.vue.js";
-const STORAGE_KEY = "opencode-bubble-offset";
 const __vue_sfc__ = /* @__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,
@@ -14,50 +13,23 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       hotkeyLabel,
       thinking,
       resolvedTheme,
-      handleToggle
+      handleToggle,
+      bubbleOffset,
+      handleBubbleOffsetChange
     } = 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 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);
-      }
+    watch(bubbleOffset, (newOffset) => {
+      offset.value = newOffset;
     });
     __expose({
-      isOnRightSide,
       offset
     });
-    const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, STORAGE_KEY, loadOffset, offset, emit, saveOffset, handleOffsetChange, bubbleRef, isOnRightSide, FloatingBubble };
+    const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, bubbleOffset, handleBubbleOffsetChange, offset, emit, handleOffsetChange, FloatingBubble };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/es/open-code-widget/src/context.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { type Ref } from "vue";
 import type { OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeRemoveSelectedPayload } from "./types";
+import type { FloatingBubbleOffset } from "./components/FloatingBubble/types";
 export interface OpenCodeWidgetContext {
     theme: Ref<string>;
     resolvedTheme: Ref<"light" | "dark">;
@@ -22,6 +23,7 @@ export interface OpenCodeWidgetContext {
     thinking: Ref<boolean>;
     minimized: Ref<boolean>;
     promptDockVisible: Ref<boolean>;
+    bubbleOffset: Ref<FloatingBubbleOffset | undefined>;
     iframeSource: Ref<string>;
     buttonActive: Ref<boolean>;
     sessionListTitle: Ref<string>;
@@ -48,6 +50,7 @@ export interface OpenCodeWidgetContext {
     }) => void;
     handleClearSelectedNodes: () => void;
     handleFrameLoaded: () => void;
+    handleBubbleOffsetChange: (offset: FloatingBubbleOffset | undefined) => void;
 }
 export declare function provideOpenCodeWidgetContext(context: OpenCodeWidgetContext): void;
 export declare function useOpenCodeWidgetContext(): OpenCodeWidgetContext;

package/es/open-code-widget/src/index-sfc.css CHANGED Viewed

	@@ -1 +1 @@
1	- .opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:~~translateY~~(~~20px~~) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-~~chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opencode-~~notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"\1f4a1";font-size:16px}.opencode-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-page-notification:before{content:"\1f4a1";font-size:16px}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;~~display:none;transition:all .1s ease;~~border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;~~display:none;~~box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}
1	+ .opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.opencode-chat.no-transition,.opencode-chat.no-transition.open{transition:none!important}.opencode-chat.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"\1f4a1";font-size:16px}.opencode-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-page-notification:before{content:"\1f4a1";font-size:16px}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}

package/es/open-code-widget/src/index.vue.d.ts CHANGED Viewed

@@ -1,23 +1,23 @@
 import type { OpenCodeWidgetProps } from "./types";
-declare var __VLS_12: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_26: {}, __VLS_33: {}, __VLS_35: {}, __VLS_37: {}, __VLS_39: {};
+declare var __VLS_11: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {}, __VLS_25: {}, __VLS_32: {}, __VLS_34: {}, __VLS_36: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
-    'button-icon'?: (props: typeof __VLS_12) => any;
+    'button-icon'?: (props: typeof __VLS_11) => any;
 } & {
-    'session-toggle-icon'?: (props: typeof __VLS_17) => any;
+    'session-toggle-icon'?: (props: typeof __VLS_16) => any;
 } & {
-    'select-icon'?: (props: typeof __VLS_19) => any;
+    'select-icon'?: (props: typeof __VLS_18) => any;
 } & {
-    'close-icon'?: (props: typeof __VLS_21) => any;
+    'close-icon'?: (props: typeof __VLS_20) => any;
 } & {
-    'sessions-empty'?: (props: typeof __VLS_26) => any;
+    'sessions-empty'?: (props: typeof __VLS_25) => any;
 } & {
-    'empty-state'?: (props: typeof __VLS_33) => any;
+    'empty-state'?: (props: typeof __VLS_32) => any;
 } & {
-    loading?: (props: typeof __VLS_35) => any;
+    loading?: (props: typeof __VLS_34) => any;
 } & {
-    error?: (props: typeof __VLS_37) => any;
+    error?: (props: typeof __VLS_36) => any;
 } & {
-    content?: (props: typeof __VLS_39) => any;
+    content?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps, {
     showNotification: (message: string, options?: {

package/es/open-code-widget/src/index.vue.js CHANGED Viewed

@@ -18,8 +18,8 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import "./index-sfc.css";
-import { defineComponent as _defineComponent } from "vue";
-import { useSlots, toRef, ref, watch, computed } from "vue";
+import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
+import { useSlots, toRef, ref, watch, computed, nextTick, onMounted, onUnmounted } from "vue";
 import Frame from "./components/Frame.vue.js";
 import Header from "./components/Header.vue.js";
 import SelectHint from "./components/SelectHint.vue.js";
@@ -30,6 +30,7 @@ import { useSelection } from "../composables/use-selection";
 import { useSession } from "../composables/use-session";
 import { useWidget } from "../composables/use-widget";
 import { useInspector } from "../composables/use-inspector";
+import { usePersistState } from "../composables/use-persist-state";
 import { provideOpenCodeWidgetContext } from "./context";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValues({}, {
   name: "OpencodeWidget"
@@ -61,6 +62,10 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
   },
   emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "update:thinking", "toggle", "close", "toggle-session-list", "toggle-select-mode", "toggle-theme", "create-session", "select-session", "delete-session", "click-selected-node", "remove-selected-node", "clear-selected-nodes", "empty-action", "frame-loaded", "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();
@@ -102,17 +107,26 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       var _a;
       (_a = frameRef.value) == null ? void 0 : _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) => {
@@ -209,6 +223,53 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
         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;
@@ -219,41 +280,84 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       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 * 0.86, windowHeight - 40);
+      const chatHeight = minimized.value ? 300 : Math.min(windowHeight.value * 0.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;
       }
@@ -266,6 +370,20 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
     const handleBubbleOffsetChange = (offset) => {
       bubbleOffset.value = offset;
     };
+    const chatAnimationOrigin = computed(() => {
+      const quadrant = bubbleQuadrant.value;
+      switch (quadrant) {
+        case "top-left":
+          return { x: "-20px", y: "-20px" };
+        case "top-right":
+          return { x: "20px", y: "-20px" };
+        case "bottom-left":
+          return { x: "-20px", y: "20px" };
+        case "bottom-right":
+        default:
+          return { x: "20px", y: "20px" };
+      }
+    });
     const isDragging = ref(false);
     let wasOpenBeforeDrag = false;
     const handleDragStart = () => {
@@ -303,6 +421,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       thinking: toRef(props, "thinking"),
       minimized,
       promptDockVisible,
+      bubbleOffset,
       iframeSource,
       buttonActive,
       sessionListTitle,
@@ -324,7 +443,8 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       handleClickSelectedNode,
       handleRemoveSelectedNode: (payload) => handleRemoveSelectedNode(payload.item, payload.index, payload.source),
       handleClearSelectedNodes,
-      handleFrameLoaded
+      handleFrameLoaded,
+      handleBubbleOffsetChange
     });
     const __returned__ = { props, emit, slots, notificationMessage, notificationVisible, notificationMode, get notificationTimer() {
       return notificationTimer;
@@ -334,7 +454,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       return dialogResolve;
     }, set dialogResolve(v) {
       dialogResolve = v;
-    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, handleFrameLoaded, localSessionListCollapsed, minimized, promptDockVisible, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, handleToggleMinimize, handleTogglePromptDock, bubbleOffset, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, isDragging, get wasOpenBeforeDrag() {
+    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, localSessionListCollapsed, minimized, promptDockVisible, isRestoring, iframeLoaded, syncStateToIframe, handleFrameLoaded, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, bubbleOffset, handleToggleMinimize, handleTogglePromptDock, windowWidth, windowHeight, handleWindowResize, bubbleQuadrant, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, chatAnimationOrigin, isDragging, get wasOpenBeforeDrag() {
       return wasOpenBeforeDrag;
     }, set wasOpenBeforeDrag(v) {
       wasOpenBeforeDrag = v;
@@ -379,7 +499,6 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         $setup["Trigger"],
         {
           ref: "triggerRef",
-          onOffsetChange: $setup.handleBubbleOffsetChange,
           onDragStart: $setup.handleDragStart,
           onDragEnd: $setup.handleDragEnd
         },
@@ -401,7 +520,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       _withDirectives(_createElementVNode(
         "div",
         {
-          class: _normalizeClass(["opencode-chat", { open: $props.open, minimized: $setup.minimized, dragging: $setup.isDragging }]),
+          class: _normalizeClass(["opencode-chat", { open: $props.open, minimized: $setup.minimized, dragging: $setup.isDragging, "no-transition": $setup.isRestoring }]),
           style: _normalizeStyle($setup.chatPositionStyle)
         },
         [
@@ -512,9 +631,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           class: "opencode-element-highlight",
-          style: _normalizeStyle(__spreadValues({
-            display: $setup.highlightVisible ? "block" : "none"
-          }, $setup.highlightStyle))
+          style: _normalizeStyle($setup.highlightStyle)
         },
         null,
         4
@@ -526,9 +643,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         "div",
         {
           class: "opencode-element-tooltip",
-          style: _normalizeStyle(__spreadValues({
-            display: $setup.tooltipVisible ? "block" : "none"
-          }, $setup.tooltipStyle))
+          style: _normalizeStyle($setup.tooltipStyle)
         },
         [
           _createElementVNode(