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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
1
+ import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createStaticVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, useCssVars, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
2
2
  import { truncate } from "@vite-plugin-opencode-assistant/shared";
3
3
  import getCssSelector from "css-selector-generator";
4
4
  //#region es/open-code-widget/src/context.js
@@ -565,27 +565,12 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
565
565
  const props = __props;
566
566
  const emit = __emit;
567
567
  const rootRef = ref(null);
568
- const getInitialState = () => {
569
- if (props.offset) return {
570
- x: props.offset.x,
571
- y: props.offset.y,
572
- width: 0,
573
- height: 0
574
- };
575
- if (typeof window !== "undefined") return {
576
- x: window.innerWidth - 42 - 24,
577
- y: window.innerHeight - 42 - 24,
578
- width: 0,
579
- height: 0
580
- };
581
- return {
582
- x: 0,
583
- y: 0,
584
- width: 0,
585
- height: 0
586
- };
587
- };
588
- const state = ref(getInitialState());
568
+ const state = ref({
569
+ x: 0,
570
+ y: 0,
571
+ width: 0,
572
+ height: 0
573
+ });
589
574
  const isObject = (val) => val !== null && typeof val === "object";
590
575
  const gapX = computed(() => isObject(props.gap) ? props.gap.x : props.gap);
591
576
  const gapY = computed(() => isObject(props.gap) ? props.gap.y : props.gap);
@@ -602,15 +587,13 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
602
587
  const rootStyle = computed(() => {
603
588
  const style = {};
604
589
  style.transform = `translate3d(${`${state.value.x}px`}, ${`${state.value.y}px`}, 0)`;
605
- if (dragging.value) style.transition = "none";
590
+ if (dragging.value || !initialized.value) style.transition = "none";
606
591
  else style.transition = "transform 0.3s ease";
607
592
  return style;
608
593
  });
609
- const show = ref(true);
610
594
  const updateState = () => {
611
- if (!show.value || !rootRef.value || typeof window === "undefined") return;
595
+ if (!rootRef.value || typeof window === "undefined") return;
612
596
  const rect = rootRef.value.getBoundingClientRect();
613
- if (rect.width === 0 || rect.height === 0) return;
614
597
  const { offset } = props;
615
598
  let x = offset ? offset.x : windowWidth.value - rect.width - gapX.value;
616
599
  let y = offset ? offset.y : windowHeight.value - rect.height - gapY.value;
@@ -732,11 +715,9 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
732
715
  }
733
716
  };
734
717
  onMounted(() => {
718
+ updateState();
735
719
  requestAnimationFrame(() => {
736
- updateState();
737
- requestAnimationFrame(() => {
738
- initialized.value = true;
739
- });
720
+ initialized.value = true;
740
721
  });
741
722
  if (typeof window !== "undefined") window.addEventListener("resize", handleResize);
742
723
  if (rootRef.value) rootRef.value.addEventListener("touchmove", onTouchMove, { passive: false });
@@ -756,21 +737,14 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
756
737
  gapY,
757
738
  () => props.offset
758
739
  ], updateState, { deep: true });
759
- const isOnRightSide = computed(() => {
760
- return state.value.x > windowWidth.value / 2;
761
- });
762
- __expose({
763
- isOnRightSide,
764
- offset: computed(() => ({
765
- x: state.value.x,
766
- y: state.value.y
767
- }))
768
- });
740
+ __expose({ offset: computed(() => ({
741
+ x: state.value.x,
742
+ y: state.value.y
743
+ })) });
769
744
  const __returned__ = {
770
745
  props,
771
746
  emit,
772
747
  rootRef,
773
- getInitialState,
774
748
  state,
775
749
  isObject,
776
750
  gapX,
@@ -781,7 +755,6 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
781
755
  dragging,
782
756
  initialized,
783
757
  rootStyle,
784
- show,
785
758
  updateState,
786
759
  touch,
787
760
  get prevX() {
@@ -801,8 +774,7 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
801
774
  closest,
802
775
  onTouchEnd,
803
776
  onClick,
804
- handleResize,
805
- isOnRightSide
777
+ handleResize
806
778
  };
807
779
  Object.defineProperty(__returned__, "__isScriptSetup", {
808
780
  enumerable: false,
@@ -812,7 +784,7 @@ var __vue_sfc__$2 = /* @__PURE__ */ defineComponent(__spreadProps$1(__spreadValu
812
784
  }
813
785
  }));
814
786
  function __vue_render__$2(_ctx, _cache, $props, $setup, $data, $options) {
815
- return openBlock(), createBlock(Teleport, { to: $props.teleport }, [withDirectives(createElementVNode("div", {
787
+ return openBlock(), createBlock(Teleport, { to: $props.teleport }, [createElementVNode("div", {
816
788
  ref: "rootRef",
817
789
  class: "floating-bubble",
818
790
  style: normalizeStyle($setup.rootStyle),
@@ -821,7 +793,7 @@ function __vue_render__$2(_ctx, _cache, $props, $setup, $data, $options) {
821
793
  onTouchcancel: $setup.onTouchEnd,
822
794
  onMousedown: $setup.onTouchStart,
823
795
  onClickCapture: $setup.onClick
824
- }, [renderSlot(_ctx.$slots, "default")], 36), [[vShow, $setup.show && $setup.initialized]])], 8, ["to"]);
796
+ }, [renderSlot(_ctx.$slots, "default")], 36)], 8, ["to"]);
825
797
  }
826
798
  __vue_sfc__$2.render = __vue_render__$2;
827
799
  var FloatingBubble_vue_default = __vue_sfc__$2;
@@ -845,10 +817,6 @@ var __vue_sfc__$1 = /* @__PURE__ */ defineComponent({
845
817
  if (parsed && (parsed.x !== 0 || parsed.y !== 0)) return parsed;
846
818
  }
847
819
  } catch (e) {}
848
- return {
849
- x: 0,
850
- y: 0
851
- };
852
820
  };
853
821
  const offset = ref(loadOffset());
854
822
  const emit = __emit;
@@ -862,19 +830,8 @@ var __vue_sfc__$1 = /* @__PURE__ */ defineComponent({
862
830
  saveOffset(value);
863
831
  emit("offset-change", value);
864
832
  };
865
- const bubbleRef = ref(null);
866
- const isOnRightSide = computed(() => {
867
- if (typeof window === "undefined") return true;
868
- const centerX = window.innerWidth / 2;
869
- return offset.value.x > centerX;
870
- });
871
- onMounted(() => {
872
- if (offset.value.x !== 0 || offset.value.y !== 0) emit("offset-change", offset.value);
873
- });
874
- __expose({
875
- isOnRightSide,
876
- offset
877
- });
833
+ watch(offset, handleOffsetChange, { immediate: true });
834
+ __expose({ offset });
878
835
  const __returned__ = {
879
836
  active,
880
837
  open,
@@ -888,8 +845,6 @@ var __vue_sfc__$1 = /* @__PURE__ */ defineComponent({
888
845
  emit,
889
846
  saveOffset,
890
847
  handleOffsetChange,
891
- bubbleRef,
892
- isOnRightSide,
893
848
  FloatingBubble: FloatingBubble_vue_default
894
849
  };
895
850
  Object.defineProperty(__returned__, "__isScriptSetup", {
@@ -1760,6 +1715,10 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
1760
1715
  "thinking-change"
1761
1716
  ],
1762
1717
  setup(__props, { expose: __expose, emit: __emit }) {
1718
+ useCssVars((_ctx) => ({
1719
+ "-chatAnimationOrigin.x": chatAnimationOrigin.value.x,
1720
+ "-chatAnimationOrigin.y": chatAnimationOrigin.value.y
1721
+ }));
1763
1722
  const props = __props;
1764
1723
  const emit = __emit;
1765
1724
  const slots = useSlots();
@@ -1896,16 +1855,26 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
1896
1855
  promptDockVisible.value = !promptDockVisible.value;
1897
1856
  sendMessageToIframe("prompt-dock-visibility-change", { visible: promptDockVisible.value });
1898
1857
  };
1899
- const bubbleOffset = ref({
1900
- x: 0,
1901
- y: 0
1858
+ const bubbleOffset = ref(void 0);
1859
+ const bubbleQuadrant = computed(() => {
1860
+ var _a, _b, _c, _d;
1861
+ if (typeof window === "undefined") return "bottom-right";
1862
+ const centerX = window.innerWidth / 2;
1863
+ const centerY = window.innerHeight / 2;
1864
+ const bubbleSize = 44;
1865
+ const effectiveX = ((_b = (_a = bubbleOffset.value) == null ? void 0 : _a.x) != null ? _b : window.innerWidth - bubbleSize - 24) + bubbleSize / 2;
1866
+ const effectiveY = ((_d = (_c = bubbleOffset.value) == null ? void 0 : _c.y) != null ? _d : window.innerHeight - bubbleSize - 24) + bubbleSize / 2;
1867
+ if (effectiveX >= centerX && effectiveY >= centerY) return "bottom-right";
1868
+ else if (effectiveX < centerX && effectiveY >= centerY) return "bottom-left";
1869
+ else if (effectiveX >= centerX && effectiveY < centerY) return "top-right";
1870
+ else return "top-left";
1902
1871
  });
1903
1872
  const isBubbleOnRightSide = computed(() => {
1904
- if (typeof window === "undefined") return true;
1905
- const centerX = window.innerWidth / 2;
1906
- return bubbleOffset.value.x > centerX;
1873
+ const quadrant = bubbleQuadrant.value;
1874
+ return quadrant === "top-right" || quadrant === "bottom-right";
1907
1875
  });
1908
1876
  const chatPositionStyle = computed(() => {
1877
+ var _a;
1909
1878
  if (typeof window === "undefined") return {};
1910
1879
  const windowWidth = window.innerWidth;
1911
1880
  const windowHeight = window.innerHeight;
@@ -1914,21 +1883,25 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
1914
1883
  const gap = 24;
1915
1884
  const bubbleSize = 44;
1916
1885
  const screenMargin = 20;
1886
+ const effectiveOffset = (_a = bubbleOffset.value) != null ? _a : {
1887
+ x: windowWidth - bubbleSize - gap,
1888
+ y: windowHeight - bubbleSize - gap
1889
+ };
1917
1890
  const style = {};
1918
1891
  if (isBubbleOnRightSide.value) {
1919
- let rightPos = windowWidth - bubbleOffset.value.x + gap;
1892
+ let rightPos = windowWidth - effectiveOffset.x + gap;
1920
1893
  const maxRight = windowWidth - chatWidth - screenMargin;
1921
1894
  if (rightPos > maxRight) rightPos = maxRight;
1922
1895
  style.right = `${rightPos}px`;
1923
1896
  style.left = "auto";
1924
1897
  } else {
1925
- let leftPos = bubbleOffset.value.x + bubbleSize + gap;
1898
+ let leftPos = effectiveOffset.x + bubbleSize + gap;
1926
1899
  const maxLeft = windowWidth - chatWidth - screenMargin;
1927
1900
  if (leftPos > maxLeft) leftPos = maxLeft;
1928
1901
  style.left = `${leftPos}px`;
1929
1902
  style.right = "auto";
1930
1903
  }
1931
- let bottomPos = windowHeight - bubbleOffset.value.y - bubbleSize;
1904
+ let bottomPos = windowHeight - effectiveOffset.y - bubbleSize;
1932
1905
  const maxBottom = windowHeight - chatHeight - screenMargin;
1933
1906
  if (bottomPos > maxBottom) bottomPos = maxBottom;
1934
1907
  if (bottomPos < screenMargin) bottomPos = screenMargin;
@@ -1938,6 +1911,26 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
1938
1911
  const handleBubbleOffsetChange = (offset) => {
1939
1912
  bubbleOffset.value = offset;
1940
1913
  };
1914
+ const chatAnimationOrigin = computed(() => {
1915
+ switch (bubbleQuadrant.value) {
1916
+ case "top-left": return {
1917
+ x: "-20px",
1918
+ y: "-20px"
1919
+ };
1920
+ case "top-right": return {
1921
+ x: "20px",
1922
+ y: "-20px"
1923
+ };
1924
+ case "bottom-left": return {
1925
+ x: "-20px",
1926
+ y: "20px"
1927
+ };
1928
+ default: return {
1929
+ x: "20px",
1930
+ y: "20px"
1931
+ };
1932
+ }
1933
+ });
1941
1934
  const isDragging = ref(false);
1942
1935
  let wasOpenBeforeDrag = false;
1943
1936
  const handleDragStart = () => {
@@ -2055,9 +2048,11 @@ var __vue_sfc__ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
2055
2048
  handleToggleMinimize,
2056
2049
  handleTogglePromptDock,
2057
2050
  bubbleOffset,
2051
+ bubbleQuadrant,
2058
2052
  isBubbleOnRightSide,
2059
2053
  chatPositionStyle,
2060
2054
  handleBubbleOffsetChange,
2055
+ chatAnimationOrigin,
2061
2056
  isDragging,
2062
2057
  get wasOpenBeforeDrag() {
2063
2058
  return wasOpenBeforeDrag;
@@ -2198,7 +2193,7 @@ __vue_sfc__.render = __vue_render__;
2198
2193
  var open_code_widget_default = __vue_sfc__;
2199
2194
  //#endregion
2200
2195
  //#region es/index.js
2201
- var version = "1.0.25";
2196
+ var version = "1.0.26";
2202
2197
  function install(app, options) {
2203
2198
  [open_code_widget_default].forEach((item) => {
2204
2199
  if (item.install) app.use(item, options);
@@ -1,4 +1,4 @@
1
- .opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"\1f4a1";font-size:16px}.opencode-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-page-notification:before{content:"\1f4a1";font-size:16px}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;display:none;transition:all .1s ease;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;display:none;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}
1
+ .opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.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)}}
2
2
  .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}
3
3
  .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}
4
4
  .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)}}
package/lib/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import OpenCodeWidget from './open-code-widget';
2
2
  import type { App } from 'vue';
3
- declare const version = "1.0.25";
3
+ declare const version = "1.0.26";
4
4
  declare function install(app: App<any>, options?: any): void;
5
5
  export { install, version, OpenCodeWidget };
6
6
  export default install;
package/lib/index.js CHANGED
@@ -34,7 +34,7 @@ __export(lib_exports, {
34
34
  });
35
35
  module.exports = __toCommonJS(lib_exports);
36
36
  var import_open_code_widget = __toESM(require("./open-code-widget"));
37
- const version = "1.0.25";
37
+ const version = "1.0.26";
38
38
  function install(app, options) {
39
39
  const components = [
40
40
  import_open_code_widget.default
@@ -11,7 +11,6 @@ type __VLS_Slots = {} & {
11
11
  default?: (props: typeof __VLS_5) => any;
12
12
  };
13
13
  declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
14
- isOnRightSide: import("vue").ComputedRef<boolean>;
15
14
  offset: import("vue").ComputedRef<{
16
15
  x: number;
17
16
  y: number;
@@ -57,26 +57,12 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
57
57
  const props = __props;
58
58
  const emit = __emit;
59
59
  const rootRef = (0, import_vue2.ref)(null);
60
- const getInitialState = () => {
61
- if (props.offset) {
62
- return {
63
- x: props.offset.x,
64
- y: props.offset.y,
65
- width: 0,
66
- height: 0
67
- };
68
- }
69
- if (typeof window !== "undefined") {
70
- return {
71
- x: window.innerWidth - 42 - 24,
72
- y: window.innerHeight - 42 - 24,
73
- width: 0,
74
- height: 0
75
- };
76
- }
77
- return { x: 0, y: 0, width: 0, height: 0 };
78
- };
79
- const state = (0, import_vue2.ref)(getInitialState());
60
+ const state = (0, import_vue2.ref)({
61
+ x: 0,
62
+ y: 0,
63
+ width: 0,
64
+ height: 0
65
+ });
80
66
  const isObject = (val) => val !== null && typeof val === "object";
81
67
  const gapX = (0, import_vue2.computed)(
82
68
  () => isObject(props.gap) ? props.gap.x : props.gap
@@ -99,20 +85,16 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
99
85
  const x = `${state.value.x}px`;
100
86
  const y = `${state.value.y}px`;
101
87
  style.transform = `translate3d(${x}, ${y}, 0)`;
102
- if (dragging.value) {
88
+ if (dragging.value || !initialized.value) {
103
89
  style.transition = "none";
104
90
  } else {
105
91
  style.transition = "transform 0.3s ease";
106
92
  }
107
93
  return style;
108
94
  });
109
- const show = (0, import_vue2.ref)(true);
110
95
  const updateState = () => {
111
- if (!show.value || !rootRef.value || typeof window === "undefined") return;
96
+ if (!rootRef.value || typeof window === "undefined") return;
112
97
  const rect = rootRef.value.getBoundingClientRect();
113
- if (rect.width === 0 || rect.height === 0) {
114
- return;
115
- }
116
98
  const { offset } = props;
117
99
  let x = offset ? offset.x : windowWidth.value - rect.width - gapX.value;
118
100
  let y = offset ? offset.y : windowHeight.value - rect.height - gapY.value;
@@ -248,11 +230,9 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
248
230
  }
249
231
  };
250
232
  (0, import_vue2.onMounted)(() => {
233
+ updateState();
251
234
  requestAnimationFrame(() => {
252
- updateState();
253
- requestAnimationFrame(() => {
254
- initialized.value = true;
255
- });
235
+ initialized.value = true;
256
236
  });
257
237
  if (typeof window !== "undefined") {
258
238
  window.addEventListener("resize", handleResize);
@@ -278,14 +258,10 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
278
258
  updateState,
279
259
  { deep: true }
280
260
  );
281
- const isOnRightSide = (0, import_vue2.computed)(() => {
282
- return state.value.x > windowWidth.value / 2;
283
- });
284
261
  __expose({
285
- isOnRightSide,
286
262
  offset: (0, import_vue2.computed)(() => ({ x: state.value.x, y: state.value.y }))
287
263
  });
288
- const __returned__ = { props, emit, rootRef, getInitialState, state, isObject, gapX, gapY, windowWidth, windowHeight, boundary, dragging, initialized, rootStyle, show, updateState, touch, get prevX() {
264
+ const __returned__ = { props, emit, rootRef, state, isObject, gapX, gapY, windowWidth, windowHeight, boundary, dragging, initialized, rootStyle, updateState, touch, get prevX() {
289
265
  return prevX;
290
266
  }, set prevX(v) {
291
267
  prevX = v;
@@ -293,14 +269,14 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)(__spreadProp
293
269
  return prevY;
294
270
  }, set prevY(v) {
295
271
  prevY = v;
296
- }, onTouchStart, onTouchMove, closest, onTouchEnd, onClick, handleResize, isOnRightSide };
272
+ }, onTouchStart, onTouchMove, closest, onTouchEnd, onClick, handleResize };
297
273
  Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
298
274
  return __returned__;
299
275
  }
300
276
  }));
301
277
  function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
302
278
  return (0, import_vue3.openBlock)(), (0, import_vue3.createBlock)(import_vue3.Teleport, { to: $props.teleport }, [
303
- (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)(
279
+ (0, import_vue3.createElementVNode)(
304
280
  "div",
305
281
  {
306
282
  ref: "rootRef",
@@ -317,9 +293,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
317
293
  ],
318
294
  36
319
295
  /* STYLE, NEED_HYDRATION */
320
- ), [
321
- [import_vue3.vShow, $setup.show && $setup.initialized]
322
- ])
296
+ )
323
297
  ], 8, ["to"]);
324
298
  }
325
299
  __vue_sfc__.render = __vue_render__;
@@ -4,20 +4,19 @@ type __VLS_Slots = {} & {
4
4
  default?: (props: typeof __VLS_13) => any;
5
5
  };
6
6
  declare const __VLS_component: import("vue").DefineComponent<{}, {
7
- isOnRightSide: import("vue").ComputedRef<boolean>;
8
7
  offset: import("vue").Ref<{
9
8
  x: number;
10
9
  y: number;
11
- }, FloatingBubbleOffset | {
10
+ } | undefined, FloatingBubbleOffset | {
12
11
  x: number;
13
12
  y: number;
14
- }>;
13
+ } | undefined>;
15
14
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
16
- "offset-change": (offset: FloatingBubbleOffset) => any;
15
+ "offset-change": (offset: FloatingBubbleOffset | undefined) => any;
17
16
  "drag-start": () => any;
18
17
  "drag-end": () => any;
19
18
  }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
20
- "onOffset-change"?: ((offset: FloatingBubbleOffset) => any) | undefined;
19
+ "onOffset-change"?: ((offset: FloatingBubbleOffset | undefined) => any) | undefined;
21
20
  "onDrag-start"?: (() => any) | undefined;
22
21
  "onDrag-end"?: (() => any) | undefined;
23
22
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -60,7 +60,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
60
60
  }
61
61
  } catch (e) {
62
62
  }
63
- return { x: 0, y: 0 };
63
+ return void 0;
64
64
  };
65
65
  const offset = (0, import_vue2.ref)(loadOffset());
66
66
  const emit = __emit;
@@ -75,22 +75,11 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
75
75
  saveOffset(value);
76
76
  emit("offset-change", value);
77
77
  };
78
- const bubbleRef = (0, import_vue2.ref)(null);
79
- const isOnRightSide = (0, import_vue2.computed)(() => {
80
- if (typeof window === "undefined") return true;
81
- const centerX = window.innerWidth / 2;
82
- return offset.value.x > centerX;
83
- });
84
- (0, import_vue2.onMounted)(() => {
85
- if (offset.value.x !== 0 || offset.value.y !== 0) {
86
- emit("offset-change", offset.value);
87
- }
88
- });
78
+ (0, import_vue2.watch)(offset, handleOffsetChange, { immediate: true });
89
79
  __expose({
90
- isOnRightSide,
91
80
  offset
92
81
  });
93
- const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, STORAGE_KEY, loadOffset, offset, emit, saveOffset, handleOffsetChange, bubbleRef, isOnRightSide, FloatingBubble: import_FloatingBubble_vue.default };
82
+ const __returned__ = { active, open, hotkeyLabel, thinking, resolvedTheme, handleToggle, STORAGE_KEY, loadOffset, offset, emit, saveOffset, handleOffsetChange, FloatingBubble: import_FloatingBubble_vue.default };
94
83
  Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
95
84
  return __returned__;
96
85
  }
@@ -1 +1 @@
1
- .opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.minimized{width:300px;height:300px}.opencode-chat.minimized .opencode-iframe-container{margin-top:-146px}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-chat.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opencode-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.opencode-notification:before{content:"\1f4a1";font-size:16px}.opencode-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--oc-dialog-overlay);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opencode-dialog{background:var(--oc-bg-main);border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:var(--oc-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.opencode-dialog-content{margin-bottom:20px}.opencode-dialog-message{font-size:15px;color:var(--oc-text-primary);line-height:1.5}.opencode-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.opencode-dialog-btn{padding:10px 20px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.opencode-dialog-btn.cancel{background:var(--oc-bg-tertiary);color:var(--oc-text-primary)}.opencode-dialog-btn.cancel:hover{background:var(--oc-text-primary);color:var(--oc-bg-main)}.opencode-dialog-btn.confirm{background:var(--oc-danger);color:#fff}.opencode-dialog-btn.confirm:hover{background:var(--oc-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.opencode-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(59,130,246,.4),0 0 0 2px rgba(59,130,246,.2);animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-page-notification:before{content:"\1f4a1";font-size:16px}.opencode-element-highlight{position:fixed;pointer-events:none;z-index:999998;display:none;transition:all .1s ease;border-radius:4px}#vue-inspector-container{display:none!important}.opencode-element-tooltip{position:fixed;background:var(--oc-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;display:none;box-shadow:var(--oc-shadow-md);max-width:300px;pointer-events:none}.opencode-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.opencode-tooltip-file{font-size:11px;color:var(--oc-text-placeholder);word-break:break-all}.opencode-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.opencode-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}
1
+ .opencode-widget{--oc-bg-main: #ffffff;--oc-bg-secondary: #f8f9fa;--oc-bg-tertiary: #f3f4f6;--oc-overlay-bg: rgba(255, 255, 255, .9);--oc-bg-inverse: #1e1e1e;--oc-text-primary: #282828;--oc-text-secondary: #4b5563;--oc-text-tertiary: #6b7280;--oc-text-placeholder: #9ca3af;--oc-text-inverse: #ffffff;--oc-border-primary: #e5e7eb;--oc-border-secondary: #d1d5db;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .1);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(0, 0, 0, .5);--oc-tooltip-bg: #1e1e1e;--oc-dialog-overlay: rgba(0, 0, 0, .5);--oc-thinking-gradient-1: #10b981;--oc-thinking-gradient-2: #059669;--oc-thinking-glow: rgba(16, 185, 129, .3);--oc-thinking-glow-strong: rgba(16, 185, 129, .6);--oc-skeleton-bg: #e5e7eb;--oc-skeleton-gradient: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .3);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .2);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .3);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .3);--oc-trigger-bg: #3b82f6;--oc-trigger-bg-hover: #2563eb;--oc-trigger-bg-active: #1d4ed8;--oc-trigger-shadow: 0 2px 8px rgba(59, 130, 246, .3);--oc-trigger-shadow-hover: 0 4px 12px rgba(59, 130, 246, .4);--oc-trigger-shadow-active: 0 4px 12px rgba(59, 130, 246, .5);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.opencode-widget.opencode-theme-dark{--oc-bg-main: #1a1a1a;--oc-bg-secondary: #1e1e1e;--oc-bg-tertiary: #282828;--oc-overlay-bg: rgba(26, 26, 26, .9);--oc-bg-inverse: #ffffff;--oc-text-primary: #f3f4f6;--oc-text-secondary: #d1d5db;--oc-text-tertiary: #9ca3af;--oc-text-placeholder: #6b7280;--oc-text-inverse: #282828;--oc-border-primary: #282828;--oc-border-secondary: #4b5563;--oc-primary: #3b82f6;--oc-primary-hover: #2563eb;--oc-primary-bg: rgba(59, 130, 246, .15);--oc-danger: #ef4444;--oc-danger-hover: #dc2626;--oc-danger-active: #b91c1c;--oc-success: #10b981;--oc-overlay: rgba(26, 26, 26, .9);--oc-tooltip-bg: #282828;--oc-dialog-overlay: rgba(0, 0, 0, .7);--oc-thinking-gradient-1: #34d399;--oc-thinking-gradient-2: #10b981;--oc-thinking-glow: rgba(52, 211, 153, .3);--oc-thinking-glow-strong: rgba(52, 211, 153, .6);--oc-skeleton-bg: #151515;--oc-skeleton-gradient: linear-gradient(90deg, #282828 25%, #4b5563 50%, #282828 75%);--oc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--oc-shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--oc-shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--oc-shadow-xl: 0 20px 60px rgba(0, 0, 0, .6);--oc-shadow-primary: 0 2px 4px rgba(59, 130, 246, .3);--oc-shadow-primary-hover: 0 4px 6px rgba(59, 130, 246, .4);--oc-shadow-danger: 0 4px 12px rgba(239, 68, 68, .4);--oc-trigger-bg: #60a5fa;--oc-trigger-bg-hover: #3b82f6;--oc-trigger-bg-active: #2563eb;--oc-trigger-shadow: 0 2px 8px rgba(96, 165, 250, .4);--oc-trigger-shadow-hover: 0 4px 12px rgba(96, 165, 250, .5);--oc-trigger-shadow-active: 0 4px 12px rgba(96, 165, 250, .6)}.opencode-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--oc-bg-main);border-radius:16px;box-shadow:var(--oc-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.opencode-chat.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)}}