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

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

@@ -57,26 +57,12 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
     const props = __props;
     const emit = __emit;
     const rootRef = (0, import_vue2.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 = (0, import_vue2.ref)(getInitialState());
+    const state = (0, import_vue2.ref)({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
     const isObject = (val) => val !== null && typeof val === "object";
     const gapX = (0, import_vue2.computed)(
       () => isObject(props.gap) ? props.gap.x : props.gap
@@ -92,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)(() => {
@@ -99,20 +106,16 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       const x = `${state.value.x}px`;
       const y = `${state.value.y}px`;
       style.transform = `translate3d(${x}, ${y}, 0)`;
-      if (dragging.value) {
+      if (dragging.value || !initialized.value) {
         style.transition = "none";
       } else {
         style.transition = "transform 0.3s ease";
       }
       return style;
     });
-    const show = (0, import_vue2.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;
@@ -122,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),
@@ -166,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);
@@ -198,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 };
@@ -248,11 +245,9 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       }
     };
     (0, import_vue2.onMounted)(() => {
+      updateState();
       requestAnimationFrame(() => {
-        updateState();
-        requestAnimationFrame(() => {
-          initialized.value = true;
-        });
+        initialized.value = true;
       });
       if (typeof window !== "undefined") {
         window.addEventListener("resize", handleResize);
@@ -264,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);
@@ -278,14 +274,10 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       updateState,
       { deep: true }
     );
-    const isOnRightSide = (0, import_vue2.computed)(() => {
-      return state.value.x > windowWidth.value / 2;
-    });
     __expose({
-      isOnRightSide,
       offset: (0, import_vue2.computed)(() => ({ x: state.value.x, y: state.value.y }))
     });
-    const __returned__ = { props, emit, rootRef, getInitialState, state, isObject, gapX, gapY, windowWidth, windowHeight, boundary, dragging, initialized, rootStyle, show, 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;
@@ -293,14 +285,14 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
       return prevY;
     }, set prevY(v) {
       prevY = v;
-    }, onTouchStart, onTouchMove, closest, onTouchEnd, onClick, handleResize, isOnRightSide };
+    }, onTouchStart, onTouchMove, onTouchEnd, onClick, handleResize };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 }));
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
   return (0, import_vue3.openBlock)(), (0, import_vue3.createBlock)(import_vue3.Teleport, { to: $props.teleport }, [
-    (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)(
+    (0, import_vue3.createElementVNode)(
       "div",
       {
         ref: "rootRef",
@@ -317,9 +309,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       ],
       36
       /* STYLE, NEED_HYDRATION */
-    ), [
-      [import_vue3.vShow, $setup.show && $setup.initialized]
-    ])
+    )
   ], 8, ["to"]);
 }
 __vue_sfc__.render = __vue_render__;

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

@@ -4,20 +4,17 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<{}, {
-    isOnRightSide: import("vue").ComputedRef<boolean>;
     offset: import("vue").Ref<{
         x: number;
         y: number;
-    }, FloatingBubbleOffset | {
+    } | undefined, FloatingBubbleOffset | {
         x: number;
         y: number;
-    }>;
+    } | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "offset-change": (offset: FloatingBubbleOffset) => any;
     "drag-start": () => any;
     "drag-end": () => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    "onOffset-change"?: ((offset: FloatingBubbleOffset) => 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,50 +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 { x: 0, y: 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);
     };
-    const bubbleRef = (0, import_vue2.ref)(null);
-    const isOnRightSide = (0, import_vue2.computed)(() => {
-      if (typeof window === "undefined") return true;
-      const centerX = window.innerWidth / 2;
-      return offset.value.x > centerX;
-    });
-    (0, import_vue2.onMounted)(() => {
-      if (offset.value.x !== 0 || offset.value.y !== 0) {
-        emit("offset-change", offset.value);
-      }
+    (0, import_vue2.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: 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__;
   }

package/lib/open-code-widget/src/context.d.ts

@@ -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/lib/open-code-widget/src/index-sfc.css

@@ -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)}}
+.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/lib/open-code-widget/src/index.vue.d.ts

@@ -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?: {