@vite-plugin-opencode-assistant/components 1.0.23 → 1.0.24

package/es/index.d.ts

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

package/es/index.js

@@ -1,5 +1,5 @@
 import OpenCodeWidget from "./open-code-widget";
-const version = "1.0.23";
+const version = "1.0.24";
 function install(app, options) {
   const components = [
     OpenCodeWidget

package/es/open-code-widget/composables/use-widget.d.ts

@@ -1,7 +1,6 @@
 import { type Ref } from "vue";
 import type { OpenCodeWidgetTheme } from "../src/types";
 export interface UseWidgetOptions {
-    position: Ref<string>;
     theme: Ref<string>;
     open: Ref<boolean>;
     selectMode: Ref<boolean>;

package/es/open-code-widget/composables/use-widget.js

@@ -30,7 +30,6 @@ function useWidget(options) {
   });
   const containerClasses = computed(() => [
     "opencode-widget",
-    options.position.value,
     `opencode-theme-${resolvedTheme.value}`
   ]);
   const buttonActive = computed(() => !!(options.open.value || options.selectMode.value));

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

@@ -0,0 +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;visibility:hidden;will-change:transform}.floating-bubble[style*=translate3d]{visibility:visible}.floating-bubble:active{cursor:grabbing}

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

@@ -0,0 +1,44 @@
+import type { FloatingBubbleAxis, FloatingBubbleMagnetic, FloatingBubbleOffset, FloatingBubbleGap } from "./types";
+type __VLS_Props = {
+    offset?: FloatingBubbleOffset;
+    axis?: FloatingBubbleAxis;
+    magnetic?: FloatingBubbleMagnetic;
+    gap?: number | FloatingBubbleGap;
+    teleport?: string | Element;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    isOnRightSide: import("vue").ComputedRef<boolean>;
+    offset: import("vue").ComputedRef<{
+        x: number;
+        y: number;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    "update:offset": (value: FloatingBubbleOffset) => 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;
+    "onOffset-change"?: ((offset: FloatingBubbleOffset) => any) | undefined;
+    "onDrag-start"?: (() => any) | undefined;
+    "onDrag-end"?: (() => any) | undefined;
+}>, {
+    offset: FloatingBubbleOffset;
+    axis: FloatingBubbleAxis;
+    magnetic: FloatingBubbleMagnetic;
+    gap: number | FloatingBubbleGap;
+    teleport: string | Element;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,290 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import "./FloatingBubble-sfc.css";
+import { defineComponent as _defineComponent } from "vue";
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
+const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValues({}, {
+  name: "FloatingBubble"
+}), {
+  __name: "FloatingBubble",
+  props: {
+    offset: { type: Object, required: false, default: void 0 },
+    axis: { type: String, required: false, default: "xy" },
+    magnetic: { type: String, required: false, default: void 0 },
+    gap: { type: [Number, Object], required: false, default: 24 },
+    teleport: { type: null, required: false, default: "body" }
+  },
+  emits: ["update:offset", "click", "offset-change", "drag-start", "drag-end"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const rootRef = ref(null);
+    const state = ref({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    const isObject = (val) => val !== null && typeof val === "object";
+    const gapX = computed(
+      () => isObject(props.gap) ? props.gap.x : props.gap
+    );
+    const gapY = computed(
+      () => isObject(props.gap) ? props.gap.y : props.gap
+    );
+    const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 0);
+    const windowHeight = ref(typeof window !== "undefined" ? window.innerHeight : 0);
+    const boundary = computed(() => ({
+      top: gapY.value,
+      right: windowWidth.value - state.value.width - gapX.value,
+      bottom: windowHeight.value - state.value.height - gapY.value,
+      left: gapX.value
+    }));
+    const dragging = ref(false);
+    const initialized = ref(false);
+    const rootStyle = computed(() => {
+      const style = {};
+      const x = `${state.value.x}px`;
+      const y = `${state.value.y}px`;
+      style.transform = `translate3d(${x}, ${y}, 0)`;
+      if (dragging.value || !initialized.value) {
+        style.transition = "none";
+      } else {
+        style.transition = "transform 0.3s ease";
+      }
+      return style;
+    });
+    const show = ref(true);
+    const updateState = () => {
+      if (!show.value || !rootRef.value || typeof window === "undefined") return;
+      const rect = rootRef.value.getBoundingClientRect();
+      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;
+      const maxX = windowWidth.value - rect.width - gapX.value;
+      const maxY = windowHeight.value - rect.height - gapY.value;
+      if (x < gapX.value) x = gapX.value;
+      if (x > maxX) x = maxX;
+      if (y < gapY.value) y = gapY.value;
+      if (y > maxY) y = maxY;
+      state.value = {
+        x,
+        y,
+        width: rect.width,
+        height: rect.height
+      };
+    };
+    const touch = {
+      startX: ref(0),
+      startY: ref(0),
+      deltaX: ref(0),
+      deltaY: ref(0),
+      offsetX: ref(0),
+      offsetY: ref(0),
+      isTap: ref(true),
+      start(e) {
+        this.startX.value = "touches" in e ? e.touches[0].clientX : e.clientX;
+        this.startY.value = "touches" in e ? e.touches[0].clientY : e.clientY;
+        this.deltaX.value = 0;
+        this.deltaY.value = 0;
+        this.offsetX.value = 0;
+        this.offsetY.value = 0;
+        this.isTap.value = true;
+      },
+      move(e) {
+        const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+        const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+        this.deltaX.value = clientX - this.startX.value;
+        this.deltaY.value = clientY - this.startY.value;
+        this.offsetX.value = Math.abs(this.deltaX.value);
+        this.offsetY.value = Math.abs(this.deltaY.value);
+        const TAP_OFFSET = 5;
+        if (this.isTap.value && (this.offsetX.value > TAP_OFFSET || this.offsetY.value > TAP_OFFSET)) {
+          this.isTap.value = false;
+        }
+      }
+    };
+    let prevX = 0;
+    let prevY = 0;
+    const onTouchStart = (e) => {
+      touch.start(e);
+      dragging.value = true;
+      prevX = state.value.x;
+      prevY = state.value.y;
+      if (!("touches" in e)) {
+        window.addEventListener("mousemove", onTouchMove, { passive: false });
+        window.addEventListener("mouseup", onTouchEnd);
+      }
+    };
+    const onTouchMove = (e) => {
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      const wasTap = touch.isTap.value;
+      touch.move(e);
+      if (wasTap && !touch.isTap.value) {
+        emit("drag-start");
+      }
+      if (props.axis === "lock") return;
+      if (!touch.isTap.value) {
+        if (props.axis === "x" || props.axis === "xy") {
+          let nextX = prevX + touch.deltaX.value;
+          if (nextX < boundary.value.left) nextX = boundary.value.left;
+          if (nextX > boundary.value.right) nextX = boundary.value.right;
+          state.value.x = nextX;
+        }
+        if (props.axis === "y" || props.axis === "xy") {
+          let nextY = prevY + touch.deltaY.value;
+          if (nextY < boundary.value.top) nextY = boundary.value.top;
+          if (nextY > boundary.value.bottom) nextY = boundary.value.bottom;
+          state.value.y = nextY;
+        }
+        const offset = { x: state.value.x, y: state.value.y };
+        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;
+      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;
+        }
+        if (!touch.isTap.value) {
+          emit("drag-end");
+          const offset = { x: state.value.x, y: state.value.y };
+          emit("update:offset", offset);
+          if (prevX !== offset.x || prevY !== offset.y) {
+            emit("offset-change", offset);
+          }
+        }
+      });
+    };
+    const onClick = (e) => {
+      if (touch.isTap.value) {
+        emit("click", e);
+      } else {
+        e.stopPropagation();
+      }
+    };
+    const handleResize = () => {
+      if (typeof window !== "undefined") {
+        windowWidth.value = window.innerWidth;
+        windowHeight.value = window.innerHeight;
+      }
+    };
+    onMounted(() => {
+      updateState();
+      nextTick(() => {
+        initialized.value = true;
+      });
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", handleResize);
+      }
+      if (rootRef.value) {
+        rootRef.value.addEventListener("touchmove", onTouchMove, {
+          passive: false
+        });
+      }
+    });
+    onUnmounted(() => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("mousemove", onTouchMove);
+        window.removeEventListener("mouseup", onTouchEnd);
+      }
+      if (rootRef.value) {
+        rootRef.value.removeEventListener("touchmove", onTouchMove);
+      }
+    });
+    watch(
+      [windowWidth, windowHeight, gapX, gapY, () => props.offset],
+      updateState,
+      { deep: true }
+    );
+    const isOnRightSide = computed(() => {
+      return state.value.x > windowWidth.value / 2;
+    });
+    __expose({
+      isOnRightSide,
+      offset: computed(() => ({ x: state.value.x, y: state.value.y }))
+    });
+    const __returned__ = { props, emit, rootRef, state, isObject, gapX, gapY, windowWidth, windowHeight, boundary, dragging, initialized, rootStyle, show, updateState, touch, get prevX() {
+      return prevX;
+    }, set prevX(v) {
+      prevX = v;
+    }, get prevY() {
+      return prevY;
+    }, set prevY(v) {
+      prevY = v;
+    }, onTouchStart, onTouchMove, closest, onTouchEnd, onClick, handleResize, isOnRightSide };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+}));
+import { renderSlot as _renderSlot, vShow as _vShow, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return _openBlock(), _createBlock(_Teleport, { to: $props.teleport }, [
+    _withDirectives(_createElementVNode(
+      "div",
+      {
+        ref: "rootRef",
+        class: "floating-bubble",
+        style: _normalizeStyle($setup.rootStyle),
+        onTouchstartPassive: $setup.onTouchStart,
+        onTouchend: $setup.onTouchEnd,
+        onTouchcancel: $setup.onTouchEnd,
+        onMousedown: $setup.onTouchStart,
+        onClickCapture: $setup.onClick
+      },
+      [
+        _renderSlot(_ctx.$slots, "default")
+      ],
+      36
+      /* STYLE, NEED_HYDRATION */
+    ), [
+      [_vShow, $setup.show]
+    ])
+  ], 8, ["to"]);
+}
+__vue_sfc__.render = __vue_render__;
+var FloatingBubble_vue_default = __vue_sfc__;
+export {
+  FloatingBubble_vue_default as default
+};

package/es/open-code-widget/src/components/FloatingBubble/index.d.ts

@@ -0,0 +1,3 @@
+import FloatingBubble from "./FloatingBubble.vue";
+export { FloatingBubble };
+export * from "./types";

package/es/open-code-widget/src/components/FloatingBubble/index.js

@@ -0,0 +1,5 @@
+import FloatingBubble from "./FloatingBubble.vue.js";
+export * from "./types";
+export {
+  FloatingBubble
+};

package/es/open-code-widget/src/components/FloatingBubble/types.d.ts

@@ -0,0 +1,24 @@
+export type FloatingBubbleAxis = "x" | "y" | "xy" | "lock";
+export type FloatingBubbleMagnetic = "x" | "y";
+export interface FloatingBubbleOffset {
+    x: number;
+    y: number;
+}
+export interface FloatingBubbleGap {
+    x: number;
+    y: number;
+}
+export interface FloatingBubbleProps {
+    offset?: FloatingBubbleOffset;
+    axis?: FloatingBubbleAxis;
+    magnetic?: FloatingBubbleMagnetic;
+    gap?: number | FloatingBubbleGap;
+    teleport?: string | Element;
+}
+export type FloatingBubbleEmits = {
+    (e: "update:offset", value: FloatingBubbleOffset): void;
+    (e: "click", event: MouseEvent): void;
+    (e: "offset-change", offset: FloatingBubbleOffset): void;
+    (e: "drag-start"): void;
+    (e: "drag-end"): void;
+};

package/es/open-code-widget/src/components/Trigger-sfc.css

@@ -1 +1 @@
-.opencode-button{width:44px;height:44px;border-radius:50%;background:var(--oc-trigger-bg);border:none;cursor:pointer;box-shadow:var(--oc-trigger-shadow);transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;padding:0;position:relative;overflow:visible}.opencode-button svg{transform:rotate(180deg);transition:transform .3s ease}.opencode-button:before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%}.opencode-button:hover{transform:scale(1.1);box-shadow:var(--oc-trigger-shadow-hover);background:var(--oc-trigger-bg-hover)}.opencode-button.thinking{background:linear-gradient(135deg,#667eea,#764ba2,#667eea);background-size:200% 200%;animation:thinking-gradient 2s ease infinite,thinking-pulse 2s ease-in-out infinite;box-shadow:0 0 20px rgba(102,126,234,.5),0 0 40px rgba(118,75,162,.3)}.opencode-button.thinking svg{animation:none}.opencode-button.thinking:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(102,126,234,.7) 0%,rgba(118,75,162,.5) 50%,transparent 70%);transform:translate(-50%,-50%);animation:ripple-wave 2s ease-out infinite;pointer-events:none}.opencode-button.thinking:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(118,75,162,.6) 0%,rgba(102,126,234,.4) 50%,transparent 70%);transform:translate(-50%,-50%);animation:ripple-wave 2s ease-out infinite;animation-delay:1s;pointer-events:none}@keyframes thinking-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes ripple-wave{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}@keyframes thinking-pulse{0%,to{transform:scale(1)}50%{transform:scale(.9)}}.opencode-button.loading{animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
+.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}

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

@@ -1,8 +1,26 @@
-declare var __VLS_1: {};
+import type { FloatingBubbleOffset } from "./FloatingBubble/types";
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    isOnRightSide: import("vue").ComputedRef<boolean>;
+    offset: import("vue").Ref<{
+        x: number;
+        y: number;
+    }, FloatingBubbleOffset | {
+        x: number;
+        y: number;
+    }>;
+}, {}, {}, {}, 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>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,69 +1,148 @@
 import "./Trigger-sfc.css";
 import { defineComponent as _defineComponent } from "vue";
+import { ref, computed, onMounted } 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",
-  setup(__props, { expose: __expose }) {
-    __expose();
+  emits: ["offset-change", "drag-start", "drag-end"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const {
       buttonActive: active,
       open,
       hotkeyLabel,
       thinking,
+      resolvedTheme,
       handleToggle
     } = useOpenCodeWidgetContext();
-    const __returned__ = { active, open, hotkeyLabel, thinking, handleToggle };
+    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 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);
+    };
+    const bubbleRef = ref(null);
+    const isOnRightSide = computed(() => {
+      if (typeof window === "undefined") return true;
+      const centerX = window.innerWidth / 2;
+      return offset.value.x > centerX;
+    });
+    onMounted(() => {
+      if (offset.value.x !== 0 || offset.value.y !== 0) {
+        emit("offset-change", offset.value);
+      }
+    });
+    __expose({
+      isOnRightSide,
+      offset
+    });
+    const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, STORAGE_KEY, loadOffset, offset, emit, saveOffset, handleOffsetChange, bubbleRef, isOnRightSide, FloatingBubble };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 const _hoisted_1 = ["aria-expanded", "title"];
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
-  return _openBlock(), _createElementBlock("button", {
-    class: _normalizeClass(["opencode-button", { active: $setup.active, thinking: $setup.thinking }]),
-    type: "button",
-    "aria-expanded": $setup.open,
-    "aria-label": "\u6253\u5F00 AI \u52A9\u624B",
-    title: `AI \u52A9\u624B (${$setup.hotkeyLabel})`,
-    onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleToggle && $setup.handleToggle(...args))
-  }, [
-    _renderSlot(_ctx.$slots, "default", {}, () => [
-      _cache[1] || (_cache[1] = _createElementVNode(
-        "svg",
-        {
-          t: "1775402599580",
-          class: "icon",
-          viewBox: "0 0 1024 1024",
-          version: "1.1",
-          xmlns: "http://www.w3.org/2000/svg",
-          "p-id": "5390",
-          "xmlns:xlink": "http://www.w3.org/1999/xlink",
-          width: "100%",
-          height: "100%"
-        },
-        [
-          _createElementVNode("path", {
-            d: "M512 981.33H85.34c-15.85 0-30.38-8.77-37.77-22.81a42.624 42.624 0 0 1 2.6-44.02L135 791.08C75.25 710.5 42.67 612.6 42.67 512 42.67 253.21 253.21 42.67 512 42.67S981.34 253.21 981.34 512 770.8 981.33 512 981.33zM166.44 896H512c211.73 0 384-172.27 384-384S723.73 128 512 128 128 300.27 128 512c0 91.29 32.83 179.9 92.46 249.46 12.58 14.69 13.73 36 2.77 51.94L166.44 896z",
-            fill: "white",
-            "p-id": "5391"
-          }),
-          _createElementVNode("path", {
-            d: "M384 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z",
-            fill: "white",
-            "p-id": "5392"
-          }),
-          _createElementVNode("path", {
-            d: "M640 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z",
-            fill: "white",
-            "p-id": "5393"
-          })
-        ],
-        -1
-        /* CACHED */
-      ))
-    ])
-  ], 10, _hoisted_1);
+  return _openBlock(), _createBlock($setup["FloatingBubble"], {
+    ref: "bubbleRef",
+    offset: $setup.offset,
+    "onUpdate:offset": _cache[0] || (_cache[0] = ($event) => $setup.offset = $event),
+    axis: "xy",
+    magnetic: "x",
+    gap: 24,
+    onClick: $setup.handleToggle,
+    onOffsetChange: $setup.handleOffsetChange,
+    onDragStart: _cache[1] || (_cache[1] = ($event) => $setup.emit("drag-start")),
+    onDragEnd: _cache[2] || (_cache[2] = ($event) => $setup.emit("drag-end"))
+  }, {
+    default: _withCtx(() => [
+      _createElementVNode("button", {
+        class: _normalizeClass(["opencode-button", { active: $setup.active, thinking: $setup.thinking, "opencode-theme-dark": $setup.resolvedTheme === "dark" }]),
+        type: "button",
+        "aria-expanded": $setup.open,
+        "aria-label": "\u6253\u5F00 AI \u52A9\u624B",
+        title: `AI \u52A9\u624B (${$setup.hotkeyLabel})`
+      }, [
+        _renderSlot(_ctx.$slots, "default", {}, () => [
+          _cache[3] || (_cache[3] = _createElementVNode(
+            "svg",
+            {
+              t: "1775402599580",
+              class: "icon",
+              viewBox: "0 0 1024 1024",
+              version: "1.1",
+              xmlns: "http://www.w3.org/2000/svg",
+              "p-id": "5390",
+              "xmlns:xlink": "http://www.w3.org/1999/xlink",
+              width: "100%",
+              height: "100%"
+            },
+            [
+              _createElementVNode("defs", null, [
+                _createElementVNode("linearGradient", {
+                  id: "opencode-logo-gradient",
+                  x1: "0%",
+                  y1: "0%",
+                  x2: "100%",
+                  y2: "100%"
+                }, [
+                  _createElementVNode("stop", {
+                    offset: "0%",
+                    style: { "stop-color": "#667eea" }
+                  }),
+                  _createElementVNode("stop", {
+                    offset: "100%",
+                    style: { "stop-color": "#764ba2" }
+                  })
+                ])
+              ]),
+              _createElementVNode("path", {
+                d: "M512 981.33H85.34c-15.85 0-30.38-8.77-37.77-22.81a42.624 42.624 0 0 1 2.6-44.02L135 791.08C75.25 710.5 42.67 612.6 42.67 512 42.67 253.21 253.21 42.67 512 42.67S981.34 253.21 981.34 512 770.8 981.33 512 981.33zM166.44 896H512c211.73 0 384-172.27 384-384S723.73 128 512 128 128 300.27 128 512c0 91.29 32.83 179.9 92.46 249.46 12.58 14.69 13.73 36 2.77 51.94L166.44 896z",
+                fill: "url(#opencode-logo-gradient)",
+                "p-id": "5391"
+              }),
+              _createElementVNode("path", {
+                d: "M384 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z",
+                fill: "url(#opencode-logo-gradient)",
+                "p-id": "5392"
+              }),
+              _createElementVNode("path", {
+                d: "M640 448m-64 0a64 64 0 1 0 128 0 64 64 0 1 0 -128 0Z",
+                fill: "url(#opencode-logo-gradient)",
+                "p-id": "5393"
+              })
+            ],
+            -1
+            /* CACHED */
+          ))
+        ])
+      ], 10, _hoisted_1)
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["offset", "onClick"]);
 }
 __vue_sfc__.render = __vue_render__;
 var Trigger_vue_default = __vue_sfc__;