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

package/lib/components.css

@@ -1,9 +1,9 @@
-.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.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:translateZ(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)}}
+.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)}}
 .opencode-iframe-container{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;margin-top:-42px}.opencode-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10;transition:opacity .3s ease}.opencode-loading-overlay.visible{display:flex}.opencode-loading-spinner{width:40px;height:40px;border:3px solid var(--oc-border-primary);border-top-color:var(--oc-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.opencode-loading-text{margin-top:12px;font-size:14px;color:var(--oc-text-placeholder)}.opencode-error-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:15;margin-top:42px;display:none}.opencode-error-overlay.visible{display:flex}.opencode-empty-state-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-bg-secondary);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:5;transition:opacity .3s ease;margin-top:42px}.opencode-empty-state-overlay.visible{display:flex}.opencode-empty-state-icon{color:var(--oc-text-placeholder);margin-bottom:16px}.opencode-empty-state-text{color:var(--oc-text-primary);font-size:16px;font-weight:500;margin-bottom:24px}.opencode-empty-state-btn{padding:10px 24px;border-radius:8px;border:none;background:var(--oc-primary);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:var(--oc-shadow-primary)}.opencode-empty-state-btn:hover{background:var(--oc-primary-hover);transform:translateY(-1px);box-shadow:var(--oc-shadow-primary-hover)}.opencode-empty-state-btn:active{transform:translateY(0)}.opencode-iframe{width:100%;height:100%;border:none}
 .opencode-chat-header{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--oc-bg-secondary);border-bottom:1px solid var(--oc-border-primary);z-index:5}.opencode-chat-header-left{display:flex;align-items:center;gap:4px}.opencode-chat-header-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);position:absolute;left:50%;transform:translate(-50%)}.opencode-chat-header-actions{display:flex;gap:4px}.opencode-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-header-btn:hover{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-header-btn.close:hover{background:var(--oc-danger);color:#fff}.opencode-header-btn.select-btn.active,.opencode-header-btn.session-toggle.active{background:var(--oc-primary);color:#fff}
 .opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:10px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 6px 20px rgba(239,68,68,.5),0 0 0 3px rgba(239,68,68,.3);z-index:9999999;display:none;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.3)}.opencode-select-mode-hint.visible{display:flex;animation:slideDown .3s ease,pulseHint 2s ease-in-out infinite}.opencode-hint-shortcut{padding:4px 10px;background:rgba(255,255,255,.25);border-radius:6px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.4)}@keyframes pulseHint{0%,to{box-shadow:0 6px 20px rgba(239,68,68,.5),0 0 0 3px rgba(239,68,68,.3)}50%{box-shadow:0 6px 20px rgba(239,68,68,.6),0 0 0 6px rgba(239,68,68,.4)}}
 .opencode-right-toolbar{width:140px;background:var(--oc-bg-secondary);border-left:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease;overflow:hidden}.opencode-right-toolbar.collapsed{width:0;overflow:hidden}.opencode-right-toolbar.collapsed .opencode-selected-nodes-header,.opencode-right-toolbar.collapsed .opencode-selected-nodes,.opencode-right-toolbar.collapsed .opencode-clear-all-btn{display:none}.opencode-selected-nodes-header{padding:12px 8px 8px;border-bottom:1px solid var(--oc-border-primary)}.opencode-selected-nodes-title{font-size:14px;font-weight:600;color:var(--oc-text-primary);margin-bottom:4px}.opencode-selected-nodes-desc{font-size:11px;color:var(--oc-text-placeholder);line-height:1.4}.opencode-selected-nodes{flex:1;display:flex;flex-direction:column;padding:8px;gap:6px;overflow-y:auto;overflow-x:hidden}.opencode-selected-nodes:empty:before{content:"\6682\65e0\9009\4e2d\5143\7d20";color:var(--oc-text-placeholder);font-size:12px;text-align:center;padding:20px 10px}.opencode-selected-node{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--oc-bg-main);border:1px solid var(--oc-border-primary);border-radius:6px;font-size:12px;transition:all .2s}.opencode-selected-node:hover{border-color:var(--oc-primary);box-shadow:var(--oc-shadow-primary)}.opencode-node-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.opencode-node-text{color:var(--oc-text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-node-file{color:var(--oc-text-placeholder);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-node-remove{width:18px;height:18px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;flex-shrink:0}.opencode-node-remove:hover{background:var(--oc-danger);color:#fff}.opencode-clear-all-btn{width:calc(100% - 16px);margin:8px;padding:8px 12px;border-radius:6px;border:none;background:var(--oc-danger);color:#fff;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .2s}.opencode-clear-all-btn:hover{background:var(--oc-danger-hover);transform:scale(1.02)}
 .opencode-session-list{width:240px;background:var(--oc-bg-secondary);border-right:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.opencode-session-list.collapsed{width:0;overflow:hidden}.opencode-session-list.collapsed .opencode-session-list-header,.opencode-session-list.collapsed .opencode-session-list-content{display:none}.opencode-session-list-header{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--oc-text-primary)}.opencode-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--oc-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-new-session-btn:hover{background:var(--oc-primary-hover);transform:scale(1.05)}.opencode-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.opencode-session-list-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.opencode-loading-spinner.small{width:24px;height:24px;border-width:2px}.opencode-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--oc-text-primary)}.opencode-session-item:hover{background:var(--oc-bg-tertiary)}.opencode-session-item.active{background:var(--oc-primary);color:#fff;transition:none}.opencode-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-session-meta{font-size:12px;opacity:.6}.opencode-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.opencode-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.opencode-session-item:hover .opencode-session-delete-btn{opacity:1}.opencode-session-delete-btn:hover{background:var(--oc-danger);color:#fff}.opencode-session-item.active .opencode-session-delete-btn{color:rgba(255,255,255,.7)}.opencode-session-item.active .opencode-session-delete-btn:hover{background:rgba(255,255,255,.2);color:#fff}.opencode-session-header-skeleton{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:none;justify-content:space-between;align-items:center}.opencode-session-header-skeleton.visible{display:flex}.opencode-skeleton-header-title{height:18px;width:80px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.opencode-skeleton-header-btn{width:28px;height:28px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.opencode-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.opencode-session-skeleton.visible{display:block}.opencode-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--oc-skeleton-bg)}.opencode-skeleton-title{height:16px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.opencode-skeleton-meta{height:12px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.opencode-session-empty{padding:32px 16px;text-align:center;color:var(--oc-text-placeholder);font-size:13px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
 .opencode-button{width:42px;height:42px;border-radius:50%;background:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(102,126,234,.4);transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:0;position:relative}.opencode-button svg{transform:rotate(180deg) scale(1.1);transition:transform .3s ease;width:100%;height:100%;display:block}.opencode-button:hover svg{transform:rotate(180deg) scale(1.1)}.opencode-button:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(102,126,234,.5)}.opencode-button.thinking{background:linear-gradient(135deg,#667eea,#764ba2);animation:thinking-glow 1.5s ease-in-out infinite,thinking-pulse 1.5s ease-in-out infinite;box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}.opencode-button.thinking svg path{fill:#fff}.opencode-button.thinking:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.thinking:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:conic-gradient(from 180deg,transparent,rgba(102,126,234,.3),transparent,rgba(118,75,162,.3),transparent);z-index:-2;animation:thinking-rotate 2s linear infinite reverse;filter:blur(8px)}@keyframes thinking-glow{0%,to{box-shadow:0 0 20px rgba(102,126,234,.6),0 0 40px rgba(118,75,162,.4),0 0 60px rgba(102,126,234,.2)}50%{box-shadow:0 0 30px rgba(102,126,234,.8),0 0 60px rgba(118,75,162,.6),0 0 90px rgba(102,126,234,.3)}}@keyframes thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes thinking-pulse{0%,to{transform:scale(1)}50%{transform:scale(.95)}}.opencode-button.opencode-theme-dark{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px rgba(102,126,234,.3)}.opencode-button.opencode-theme-dark:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:linear-gradient(135deg,#8b9cf5,#9d6bc7);z-index:-1}.opencode-button.opencode-theme-dark:hover{box-shadow:0 6px 16px rgba(102,126,234,.4)}.opencode-button.opencode-theme-dark svg path{fill:#fff}
-.floating-bubble{position:fixed;top:0;left:0;z-index:999999;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;will-change:transform}.floating-bubble:active{cursor:grabbing}
+.floating-bubble{position:fixed;top:0;left:0;z-index:999999;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;will-change:transform}.floating-bubble:active{cursor:grabbing}body.floating-bubble-dragging *{pointer-events:none!important}body.floating-bubble-dragging .floating-bubble,body.floating-bubble-dragging .floating-bubble *{pointer-events:auto!important}
 /*$vite$:1*/

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import OpenCodeWidget from './open-code-widget';
 import type { App } from 'vue';
-declare const version = "1.0.26";
+declare const version = "1.0.27";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, OpenCodeWidget };
 export default install;

package/lib/index.js

@@ -34,7 +34,7 @@ __export(lib_exports, {
 });
 module.exports = __toCommonJS(lib_exports);
 var import_open_code_widget = __toESM(require("./open-code-widget"));
-const version = "1.0.26";
+const version = "1.0.27";
 function install(app, options) {
   const components = [
     import_open_code_widget.default

package/lib/open-code-widget/composables/use-inspector.js

@@ -234,35 +234,20 @@ function findFileInfo(element, inspector) {
   return fallbackFileInfo || { file: null, line: null, column: null };
 }
 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;
+  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;
     }
-  } finally {
-    if (highlight) highlight.style.display = highlightDisplay;
-    if (tooltip) tooltip.style.display = tooltipDisplay;
   }
-  return element;
+  return null;
 }
 function useInspector(options) {
   const highlightVisible = (0, import_vue.ref)(false);
@@ -277,67 +262,99 @@ function useInspector(options) {
   const tooltipContent = (0, import_vue.ref)({ description: "", fileInfo: "" });
   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) {
-        const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
-        elementToHighlight = preciseElement || 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) {
+          const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
+          elementToHighlight = preciseElement || 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;
+      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) {
-      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;
+      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;
       }
-      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 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}` : ""
-      };
-      tooltipVisible.value = true;
+      const newFileInfoText = fileName ? `${fileName}${lineInfo}` : "";
+      const fileInfoChanged = currentFileInfoText !== newFileInfoText;
+      if (elementChanged || fileInfoChanged) {
+        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
+        };
+      }
       const tooltipHeight = 50;
       const tooltipWidth = 200;
       let tooltipTop = rect.top - tooltipHeight - 8;
@@ -348,13 +365,31 @@ function useInspector(options) {
       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);
@@ -426,6 +461,10 @@ function useInspector(options) {
       }
       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;
     }

package/lib/open-code-widget/composables/use-persist-state.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from "vue";
+import type { FloatingBubbleOffset } from "../src/components/FloatingBubble/types";
+import type { OpenCodeWidgetTheme } from "../src/types";
+export interface WidgetPersistState {
+    open: boolean;
+    minimized: boolean;
+    promptDockVisible: boolean;
+    bubbleOffset?: FloatingBubbleOffset;
+    theme: OpenCodeWidgetTheme;
+    sessionListCollapsed: boolean;
+}
+export interface UsePersistStateOptions {
+    open: Ref<boolean>;
+    minimized: Ref<boolean>;
+    promptDockVisible: Ref<boolean>;
+    bubbleOffset: Ref<FloatingBubbleOffset | undefined>;
+    theme: Ref<OpenCodeWidgetTheme>;
+    sessionListCollapsed: Ref<boolean>;
+    onRestore?: (state: Partial<WidgetPersistState>) => void;
+}
+export declare function usePersistState(options: UsePersistStateOptions): {
+    restoreState: () => Partial<WidgetPersistState> | null;
+    persistState: () => void;
+};

package/lib/open-code-widget/composables/use-persist-state.js

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_persist_state_exports = {};
+__export(use_persist_state_exports, {
+  usePersistState: () => usePersistState
+});
+module.exports = __toCommonJS(use_persist_state_exports);
+var import_vue = require("vue");
+const 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());
+  };
+  (0, import_vue.onMounted)(() => {
+    restoreState();
+    (0, import_vue.watch)(
+      [options.open, options.minimized, options.promptDockVisible, options.bubbleOffset, options.theme, options.sessionListCollapsed],
+      () => {
+        persistState();
+      },
+      { deep: true }
+    );
+  });
+  return {
+    restoreState,
+    persistState
+  };
+}

package/lib/open-code-widget/src/components/FloatingBubble/FloatingBubble-sfc.css

@@ -1 +1 @@
-.floating-bubble{position:fixed;top:0;left:0;z-index:999999;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;will-change:transform}.floating-bubble:active{cursor:grabbing}
+.floating-bubble{position:fixed;top:0;left:0;z-index:999999;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;will-change:transform}.floating-bubble:active{cursor:grabbing}body.floating-bubble-dragging *{pointer-events:none!important}body.floating-bubble-dragging .floating-bubble,body.floating-bubble-dragging .floating-bubble *{pointer-events:auto!important}

package/lib/open-code-widget/src/components/FloatingBubble/FloatingBubble.vue.d.ts

@@ -16,14 +16,14 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
         y: number;
     }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
     "update:offset": (value: FloatingBubbleOffset) => any;
+    click: (event: MouseEvent) => any;
     "offset-change": (offset: FloatingBubbleOffset) => any;
     "drag-start": () => any;
     "drag-end": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     "onUpdate:offset"?: ((value: FloatingBubbleOffset) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
     "onOffset-change"?: ((offset: FloatingBubbleOffset) => any) | undefined;
     "onDrag-start"?: (() => any) | undefined;
     "onDrag-end"?: (() => any) | undefined;

package/lib/open-code-widget/src/components/FloatingBubble/FloatingBubble.vue.js

@@ -78,6 +78,27 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       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 = (0, import_vue2.ref)(false);
     const initialized = (0, import_vue2.ref)(false);
     const rootStyle = (0, import_vue2.computed)(() => {
@@ -104,12 +125,22 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       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: (0, import_vue2.ref)(0),
@@ -148,6 +179,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       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);
@@ -180,32 +212,15 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
         emit("update:offset", offset);
       }
     };
-    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 = { x: state.value.x, y: state.value.y };
@@ -244,6 +259,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       }
     });
     (0, import_vue2.onUnmounted)(() => {
+      document.body.classList.remove("floating-bubble-dragging");
       if (typeof window !== "undefined") {
         window.removeEventListener("resize", handleResize);
         window.removeEventListener("mousemove", onTouchMove);
@@ -261,7 +277,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
     __expose({
       offset: (0, import_vue2.computed)(() => ({ x: state.value.x, y: state.value.y }))
     });
-    const __returned__ = { props, emit, rootRef, state, isObject, gapX, gapY, windowWidth, windowHeight, boundary, dragging, initialized, rootStyle, updateState, touch, get prevX() {
+    const __returned__ = { props, emit, rootRef, state, isObject, gapX, gapY, windowWidth, windowHeight, boundary, closest, applyMagnetic, dragging, initialized, rootStyle, updateState, touch, get prevX() {
       return prevX;
     }, set prevX(v) {
       prevX = v;
@@ -269,7 +285,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       return prevY;
     }, set prevY(v) {
       prevY = v;
-    }, onTouchStart, onTouchMove, closest, onTouchEnd, onClick, handleResize };
+    }, onTouchStart, onTouchMove, onTouchEnd, onClick, handleResize };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/lib/open-code-widget/src/components/Trigger.vue.d.ts

@@ -12,11 +12,9 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
         y: number;
     } | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "offset-change": (offset: FloatingBubbleOffset | undefined) => any;
     "drag-start": () => any;
     "drag-end": () => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    "onOffset-change"?: ((offset: FloatingBubbleOffset | undefined) => any) | undefined;
     "onDrag-start"?: (() => any) | undefined;
     "onDrag-end"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/open-code-widget/src/components/Trigger.vue.js

@@ -36,10 +36,9 @@ var import_vue2 = require("vue");
 var import_context = require("../context");
 var import_FloatingBubble_vue = __toESM(require("./FloatingBubble/FloatingBubble.vue.js"));
 var import_vue3 = require("vue");
-const STORAGE_KEY = "opencode-bubble-offset";
 const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
   __name: "Trigger",
-  emits: ["offset-change", "drag-start", "drag-end"],
+  emits: ["drag-start", "drag-end"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const {
       buttonActive: active,
@@ -47,39 +46,23 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       hotkeyLabel,
       thinking,
       resolvedTheme,
-      handleToggle
+      handleToggle,
+      bubbleOffset,
+      handleBubbleOffsetChange
     } = (0, import_context.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 void 0;
-    };
-    const offset = (0, import_vue2.ref)(loadOffset());
+    const offset = (0, import_vue2.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);
     };
-    (0, import_vue2.watch)(offset, handleOffsetChange, { immediate: true });
+    (0, import_vue2.watch)(bubbleOffset, (newOffset) => {
+      offset.value = newOffset;
+    });
     __expose({
       offset
     });
-    const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, STORAGE_KEY, loadOffset, offset, emit, saveOffset, handleOffsetChange, FloatingBubble: import_FloatingBubble_vue.default };
+    const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, bubbleOffset, handleBubbleOffsetChange, offset, emit, handleOffsetChange, FloatingBubble: import_FloatingBubble_vue.default };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }