@vite-plugin-opencode-assistant/components 1.0.10 → 1.0.12

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.10";
+declare const version = "1.0.12";
 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.10";
+const version = "1.0.12";
 function install(app, options) {
   const components = [
     OpenCodeWidget

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

@@ -1,4 +1,5 @@
 import { type Ref } from "vue";
+import type { OpenCodeWidgetTheme } from "../src/types";
 export interface UseWidgetOptions {
     position: Ref<string>;
     theme: Ref<string>;
@@ -11,14 +12,17 @@ export interface UseWidgetOptions {
     onClose: () => void;
     onToggleSessionList: (collapsed: boolean) => void;
     onEmptyAction: () => void;
+    onToggleTheme?: (theme: OpenCodeWidgetTheme) => void;
 }
 export declare function useWidget(options: UseWidgetOptions): {
     buttonActive: import("vue").ComputedRef<boolean>;
     containerClasses: import("vue").ComputedRef<string[]>;
     iframeSource: import("vue").ComputedRef<string>;
     sessionListTitle: import("vue").ComputedRef<"展开会话列表" | "折叠会话列表">;
+    resolvedTheme: import("vue").ComputedRef<"light" | "dark">;
     handleClose: () => void;
     handleEmptyAction: () => void;
     handleToggle: () => void;
     handleToggleSessionList: () => void;
+    handleToggleTheme: () => void;
 };

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

@@ -1,9 +1,37 @@
-import { computed } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
+const THEME_CYCLE = ["auto", "light", "dark"];
 function useWidget(options) {
+  const systemTheme = ref("light");
+  function getSystemTheme() {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  let mediaQuery = null;
+  let handleChange = null;
+  onMounted(() => {
+    if (typeof window === "undefined") return;
+    systemTheme.value = getSystemTheme();
+    mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    handleChange = (e) => {
+      systemTheme.value = e.matches ? "dark" : "light";
+    };
+    mediaQuery.addEventListener("change", handleChange);
+  });
+  onUnmounted(() => {
+    if (mediaQuery && handleChange) {
+      mediaQuery.removeEventListener("change", handleChange);
+    }
+  });
+  const resolvedTheme = computed(() => {
+    if (options.theme.value === "auto") {
+      return systemTheme.value;
+    }
+    return options.theme.value;
+  });
   const containerClasses = computed(() => [
     "opencode-widget",
     options.position.value,
-    `opencode-theme-${options.theme.value}`
+    `opencode-theme-${resolvedTheme.value}`
   ]);
   const buttonActive = computed(() => !!(options.open.value || options.selectMode.value));
   const iframeSource = computed(() => options.iframeSrc.value || "about:blank");
@@ -28,15 +56,24 @@ function useWidget(options) {
   function handleEmptyAction() {
     options.onEmptyAction();
   }
+  function handleToggleTheme() {
+    var _a;
+    const currentIndex = THEME_CYCLE.indexOf(options.theme.value);
+    const nextIndex = (currentIndex + 1) % THEME_CYCLE.length;
+    const nextTheme = THEME_CYCLE[nextIndex];
+    (_a = options.onToggleTheme) == null ? void 0 : _a.call(options, nextTheme);
+  }
   return {
     buttonActive,
     containerClasses,
     iframeSource,
     sessionListTitle,
+    resolvedTheme,
     handleClose,
     handleEmptyAction,
     handleToggle,
-    handleToggleSessionList
+    handleToggleSessionList,
+    handleToggleTheme
   };
 }
 export {

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

@@ -1,19 +1,68 @@
+var __defProp = Object.defineProperty;
+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;
+};
 import "./Frame-sfc.css";
 import { defineComponent as _defineComponent } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 import { useOpenCodeWidgetContext } from "../context";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
   __name: "Frame",
   setup(__props, { expose: __expose }) {
     __expose();
+    const iframeRef = ref(null);
     const {
       loading,
       showEmptyState,
       iframeSource: iframeSrc,
       emptyStateText,
       emptyStateActionText,
-      handleEmptyAction
+      handleEmptyAction,
+      theme,
+      resolvedTheme
     } = useOpenCodeWidgetContext();
-    const __returned__ = { loading, showEmptyState, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction };
+    const iframeReady = ref(false);
+    function sendMessageToIframe(type, data) {
+      var _a;
+      if (!((_a = iframeRef.value) == null ? void 0 : _a.contentWindow)) return;
+      iframeRef.value.contentWindow.postMessage(__spreadValues({ type }, data), "*");
+    }
+    function syncIframeTheme() {
+      sendMessageToIframe("OPENCODE_SET_THEME", { theme: resolvedTheme.value });
+    }
+    function handleIframeMessage(event) {
+      var _a;
+      if (((_a = event.data) == null ? void 0 : _a.type) === "OPENCODE_READY") {
+        syncIframeTheme();
+      }
+    }
+    watch([theme, resolvedTheme], () => {
+      syncIframeTheme();
+    });
+    onMounted(() => {
+      if (iframeRef.value) {
+        iframeRef.value.addEventListener("load", () => {
+          iframeReady.value = true;
+        });
+      }
+      window.addEventListener("message", handleIframeMessage);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("message", handleIframeMessage);
+    });
+    const __returned__ = { iframeRef, loading, showEmptyState, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, theme, resolvedTheme, iframeReady, sendMessageToIframe, syncIframeTheme, handleIframeMessage };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -105,6 +154,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
     ),
     _renderSlot(_ctx.$slots, "content", {}, () => [
       _createElementVNode("iframe", {
+        ref: "iframeRef",
         class: "opencode-iframe",
         src: $setup.iframeSrc,
         allow: "clipboard-write; clipboard-read",

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

@@ -1 +1 @@
-.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{background:var(--oc-primary);color:#fff}
+.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}

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

@@ -1,10 +1,12 @@
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     'session-toggle-icon'?: (props: typeof __VLS_1) => any;
 } & {
     'select-icon'?: (props: typeof __VLS_3) => any;
 } & {
-    'close-icon'?: (props: typeof __VLS_5) => any;
+    'theme-icon'?: (props: typeof __VLS_5) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_7) => 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1,5 +1,6 @@
 import "./Header-sfc.css";
 import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
 import { useOpenCodeWidgetContext } from "../context";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
   __name: "Header",
@@ -11,27 +12,77 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       sessionListCollapsed,
       selectMode,
       selectEnabled,
+      theme,
+      resolvedTheme,
       handleToggleSessionList,
       handleToggleSelectMode,
+      handleToggleTheme,
       handleClose
     } = useOpenCodeWidgetContext();
-    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, handleToggleSessionList, handleToggleSelectMode, handleClose };
+    const themeIconTitle = computed(() => {
+      const themeLabels = {
+        auto: "\u81EA\u52A8",
+        light: "\u4EAE\u8272",
+        dark: "\u6697\u8272"
+      };
+      return `\u4E3B\u9898: ${themeLabels[theme.value]} (${resolvedTheme.value})`;
+    });
+    const themeIconLabel = computed(() => {
+      const themeLabels = {
+        auto: "\u81EA\u52A8\u8DDF\u968F\u7CFB\u7EDF",
+        light: "\u4EAE\u8272\u4E3B\u9898",
+        dark: "\u6697\u8272\u4E3B\u9898"
+      };
+      return `\u5207\u6362\u4E3B\u9898 - \u5F53\u524D: ${themeLabels[theme.value]}`;
+    });
+    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleClose, themeIconTitle, themeIconLabel };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, toDisplayString as _toDisplayString, createStaticVNode as _createStaticVNode } from "vue";
 const _hoisted_1 = { class: "opencode-chat-header" };
 const _hoisted_2 = { class: "opencode-chat-header-left" };
 const _hoisted_3 = ["title", "aria-label", "aria-expanded"];
 const _hoisted_4 = ["aria-pressed", "disabled"];
-const _hoisted_5 = { class: "opencode-chat-header-title" };
-const _hoisted_6 = { class: "opencode-chat-header-actions" };
+const _hoisted_5 = ["title", "aria-label"];
+const _hoisted_6 = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "aria-hidden": "true"
+};
+const _hoisted_7 = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "aria-hidden": "true"
+};
+const _hoisted_8 = {
+  key: 2,
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "aria-hidden": "true"
+};
+const _hoisted_9 = { class: "opencode-chat-header-title" };
+const _hoisted_10 = { class: "opencode-chat-header-actions" };
 function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
   return _openBlock(), _createElementBlock("div", _hoisted_1, [
     _createElementVNode("div", _hoisted_2, [
       _createElementVNode("button", {
-        class: "opencode-header-btn session-toggle",
+        class: _normalizeClass(["opencode-header-btn session-toggle", { active: !$setup.sessionListCollapsed }]),
         type: "button",
         title: $setup.sessionListTitle,
         "aria-label": $setup.sessionListTitle,
@@ -39,7 +90,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleToggleSessionList && $setup.handleToggleSessionList(...args))
       }, [
         _renderSlot(_ctx.$slots, "session-toggle-icon", {}, () => [
-          _cache[3] || (_cache[3] = _createElementVNode(
+          _cache[4] || (_cache[4] = _createElementVNode(
             "svg",
             {
               viewBox: "0 0 24 24",
@@ -60,7 +111,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             /* CACHED */
           ))
         ])
-      ], 8, _hoisted_3),
+      ], 10, _hoisted_3),
       _createElementVNode("button", {
         class: _normalizeClass(["opencode-header-btn select-btn", { active: $setup.selectMode }]),
         type: "button",
@@ -71,7 +122,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[1] || (_cache[1] = (...args) => $setup.handleToggleSelectMode && $setup.handleToggleSelectMode(...args))
       }, [
         _renderSlot(_ctx.$slots, "select-icon", {}, () => [
-          _cache[4] || (_cache[4] = _createElementVNode(
+          _cache[5] || (_cache[5] = _createElementVNode(
             "svg",
             {
               viewBox: "0 0 1024 1024",
@@ -93,25 +144,48 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
             /* CACHED */
           ))
         ])
-      ], 10, _hoisted_4)
+      ], 10, _hoisted_4),
+      _createElementVNode("button", {
+        class: "opencode-header-btn theme-btn",
+        type: "button",
+        title: $setup.themeIconTitle,
+        "aria-label": $setup.themeIconLabel,
+        onClick: _cache[2] || (_cache[2] = (...args) => $setup.handleToggleTheme && $setup.handleToggleTheme(...args))
+      }, [
+        _renderSlot(_ctx.$slots, "theme-icon", {}, () => [
+          $setup.theme === "light" ? (_openBlock(), _createElementBlock("svg", _hoisted_6, [..._cache[6] || (_cache[6] = [
+            _createStaticVNode('<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>', 9)
+          ])])) : $setup.theme === "dark" ? (_openBlock(), _createElementBlock("svg", _hoisted_7, [..._cache[7] || (_cache[7] = [
+            _createElementVNode(
+              "path",
+              { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" },
+              null,
+              -1
+              /* CACHED */
+            )
+          ])])) : (_openBlock(), _createElementBlock("svg", _hoisted_8, [..._cache[8] || (_cache[8] = [
+            _createStaticVNode('<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line><circle cx="12" cy="10" r="3"></circle><path d="M7 7l2 2M17 7l-2 2M7 13l2-2M17 13l-2-2"></path>', 5)
+          ])]))
+        ])
+      ], 8, _hoisted_5)
     ]),
     _createElementVNode(
       "span",
-      _hoisted_5,
+      _hoisted_9,
       _toDisplayString($setup.title),
       1
       /* TEXT */
     ),
-    _createElementVNode("div", _hoisted_6, [
+    _createElementVNode("div", _hoisted_10, [
       _createElementVNode("button", {
         class: "opencode-header-btn close",
         type: "button",
         title: "\u5173\u95ED",
         "aria-label": "\u5173\u95ED\u9762\u677F",
-        onClick: _cache[2] || (_cache[2] = (...args) => $setup.handleClose && $setup.handleClose(...args))
+        onClick: _cache[3] || (_cache[3] = (...args) => $setup.handleClose && $setup.handleClose(...args))
       }, [
         _renderSlot(_ctx.$slots, "close-icon", {}, () => [
-          _cache[5] || (_cache[5] = _createElementVNode(
+          _cache[9] || (_cache[9] = _createElementVNode(
             "svg",
             {
               viewBox: "0 0 24 24",

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

@@ -1 +1 @@
-.opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:10px 16px;background:var(--oc-danger);color:#fff;border-radius:8px;font-size:13px;box-shadow:var(--oc-shadow-danger);z-index:9999999;display:none;align-items:center;gap:12px}.opencode-select-mode-hint.visible{display:flex;animation:slideDown .3s ease}.opencode-hint-shortcut{padding:2px 6px;background:rgba(255,255,255,.2);border-radius:4px;font-size:12px}
+.opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:14px 20px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:12px;font-size:15px;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:2px 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/es/open-code-widget/src/components/SessionList-sfc.css

@@ -1 +1 @@
-.opencode-session-list{width:240px;background:var(--oc-bg-secondary);border-right:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.opencode-session-list.collapsed{width:0;overflow:hidden}.opencode-session-list.collapsed .opencode-session-list-header,.opencode-session-list.collapsed .opencode-session-list-content{display:none}.opencode-session-list-header{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--oc-text-primary)}.opencode-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--oc-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-new-session-btn:hover{background:var(--oc-primary-hover);transform:scale(1.05)}.opencode-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.opencode-session-list-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.opencode-loading-spinner.small{width:24px;height:24px;border-width:2px}.opencode-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:all .2s;margin-bottom:4px;color:var(--oc-text-primary)}.opencode-session-item:hover{background:var(--oc-bg-tertiary)}.opencode-session-item.active{background:var(--oc-primary);color:#fff}.opencode-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-session-meta{font-size:12px;opacity:.6}.opencode-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.opencode-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.opencode-session-item:hover .opencode-session-delete-btn{opacity:1}.opencode-session-delete-btn:hover{background:var(--oc-danger);color:#fff}.opencode-session-item.active .opencode-session-delete-btn{color:rgba(255,255,255,.7)}.opencode-session-item.active .opencode-session-delete-btn:hover{background:rgba(255,255,255,.2);color:#fff}.opencode-session-header-skeleton{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:none;justify-content:space-between;align-items:center}.opencode-session-header-skeleton.visible{display:flex}.opencode-skeleton-header-title{height:18px;width:80px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.opencode-skeleton-header-btn{width:28px;height:28px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.opencode-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.opencode-session-skeleton.visible{display:block}.opencode-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--oc-skeleton-bg)}.opencode-skeleton-title{height:16px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.opencode-skeleton-meta{height:12px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.opencode-session-empty{padding:32px 16px;text-align:center;color:var(--oc-text-placeholder);font-size:13px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
+.opencode-session-list{width:240px;background:var(--oc-bg-secondary);border-right:1px solid var(--oc-border-primary);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.opencode-session-list.collapsed{width:0;overflow:hidden}.opencode-session-list.collapsed .opencode-session-list-header,.opencode-session-list.collapsed .opencode-session-list-content{display:none}.opencode-session-list-header{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--oc-text-primary)}.opencode-new-session-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--oc-primary);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.opencode-new-session-btn:hover{background:var(--oc-primary-hover);transform:scale(1.05)}.opencode-session-list-content{flex:1;overflow-y:auto;padding:8px;position:relative}.opencode-session-list-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:10;border-radius:8px}.opencode-loading-spinner.small{width:24px;height:24px;border-width:2px}.opencode-session-item{padding:12px;border-radius:8px;cursor:pointer;transition:transform .2s;margin-bottom:4px;color:var(--oc-text-primary)}.opencode-session-item:hover{background:var(--oc-bg-tertiary)}.opencode-session-item.active{background:var(--oc-primary);color:#fff;transition:none}.opencode-session-title{font-size:14px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opencode-session-meta{font-size:12px;opacity:.6}.opencode-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.opencode-session-delete-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:var(--oc-text-placeholder);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;flex-shrink:0}.opencode-session-item:hover .opencode-session-delete-btn{opacity:1}.opencode-session-delete-btn:hover{background:var(--oc-danger);color:#fff}.opencode-session-item.active .opencode-session-delete-btn{color:rgba(255,255,255,.7)}.opencode-session-item.active .opencode-session-delete-btn:hover{background:rgba(255,255,255,.2);color:#fff}.opencode-session-header-skeleton{padding:16px;border-bottom:1px solid var(--oc-border-primary);display:none;justify-content:space-between;align-items:center}.opencode-session-header-skeleton.visible{display:flex}.opencode-skeleton-header-title{height:18px;width:80px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.opencode-skeleton-header-btn{width:28px;height:28px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:6px}.opencode-session-skeleton{flex:1;overflow-y:auto;padding:8px;display:none}.opencode-session-skeleton.visible{display:block}.opencode-skeleton-item{padding:12px;border-radius:8px;margin-bottom:4px;background:var(--oc-skeleton-bg)}.opencode-skeleton-title{height:16px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;margin-bottom:8px;width:70%}.opencode-skeleton-meta{height:12px;background:var(--oc-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px;width:50%}.opencode-session-empty{padding:32px 16px;text-align:center;color:var(--oc-text-placeholder);font-size:13px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}

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

@@ -2,6 +2,7 @@ import { type Ref } from "vue";
 import type { OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeRemoveSelectedPayload } from "./types";
 export interface OpenCodeWidgetContext {
     theme: Ref<string>;
+    resolvedTheme: Ref<"light" | "dark">;
     title: Ref<string>;
     hotkeyLabel: Ref<string>;
     selectShortcutLabel: Ref<string>;
@@ -26,6 +27,7 @@ export interface OpenCodeWidgetContext {
     handleToggle: () => void;
     handleClose: () => void;
     handleToggleSessionList: () => void;
+    handleToggleTheme: () => void;
     handleEmptyAction: () => void;
     handleCreateSession: () => void;
     handleSelectSession: (item: OpenCodeWidgetSessionItem) => void;

package/es/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-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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .4);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .6);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .4);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-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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .5);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .7);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .5)}.opencode-widget.bottom-right{bottom:20px;right:20px}.opencode-widget.bottom-left{bottom:20px;left:20px}.opencode-widget.top-right{top:20px;right:20px}.opencode-widget.top-left{top:20px;left:20px}.opencode-chat{position:absolute;width:700px;height:86vh;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}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-widget.bottom-right .opencode-chat{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-chat{bottom:56px;left:0}.opencode-widget.top-right .opencode-chat{top:56px;right:0}.opencode-widget.top-left .opencode-chat{top:56px;left:0}.opencode-widget.bottom-right .opencode-selected-bubbles{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-selected-bubbles{bottom:56px;left:0}.opencode-widget.top-right .opencode-selected-bubbles{top:56px;bottom:auto;right:0}.opencode-widget.top-left .opencode-selected-bubbles{top:56px;bottom:auto;left:0}.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 20px;background:var(--oc-bg-main);color:var(--oc-text-primary);border:1px solid var(--oc-border-primary);border-radius:8px;font-size:14px;box-shadow:var(--oc-shadow-lg);animation:slideDown .3s ease;z-index:10000000}.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-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-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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .4);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .6);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .4);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-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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--oc-trigger-bg-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);--oc-trigger-bg-active: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--oc-trigger-shadow: 0 4px 15px rgba(102, 126, 234, .5);--oc-trigger-shadow-hover: 0 6px 20px rgba(102, 126, 234, .7);--oc-trigger-shadow-active: 0 6px 20px rgba(240, 147, 251, .5)}.opencode-widget.bottom-right{bottom:20px;right:20px}.opencode-widget.bottom-left{bottom:20px;left:20px}.opencode-widget.top-right{top:20px;right:20px}.opencode-widget.top-left{top:20px;left:20px}.opencode-chat{position:absolute;width:700px;height:86vh;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}.opencode-chat-content{display:flex;flex:1;overflow:hidden}.opencode-widget.bottom-right .opencode-chat{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-chat{bottom:56px;left:0}.opencode-widget.top-right .opencode-chat{top:56px;right:0}.opencode-widget.top-left .opencode-chat{top:56px;left:0}.opencode-widget.bottom-right .opencode-selected-bubbles{bottom:56px;right:0}.opencode-widget.bottom-left .opencode-selected-bubbles{bottom:56px;left:0}.opencode-widget.top-right .opencode-selected-bubbles{top:56px;bottom:auto;right:0}.opencode-widget.top-left .opencode-selected-bubbles{top:56px;bottom:auto;left:0}.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-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)}}

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

@@ -26,10 +26,12 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
     "update:sessionListCollapsed": (value: boolean) => any;
     "update:currentSessionId": (value: string | null) => any;
     "update:selectedElements": (value: import("./types").OpenCodeSelectedElement[]) => any;
+    "update:theme": (value: import("./types").OpenCodeWidgetTheme) => any;
     toggle: (value: boolean) => any;
     close: () => any;
     "toggle-session-list": (value: boolean) => any;
     "toggle-select-mode": (value: boolean) => any;
+    "toggle-theme": (value: import("./types").OpenCodeWidgetTheme) => any;
     "create-session": () => any;
     "select-session": (session: import("./types").OpenCodeWidgetSession) => any;
     "delete-session": (session: import("./types").OpenCodeWidgetSession) => any;
@@ -43,10 +45,12 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
     "onUpdate:sessionListCollapsed"?: ((value: boolean) => any) | undefined;
     "onUpdate:currentSessionId"?: ((value: string | null) => any) | undefined;
     "onUpdate:selectedElements"?: ((value: import("./types").OpenCodeSelectedElement[]) => any) | undefined;
+    "onUpdate:theme"?: ((value: import("./types").OpenCodeWidgetTheme) => any) | undefined;
     onToggle?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
     "onToggle-session-list"?: ((value: boolean) => any) | undefined;
     "onToggle-select-mode"?: ((value: boolean) => any) | undefined;
+    "onToggle-theme"?: ((value: import("./types").OpenCodeWidgetTheme) => any) | undefined;
     "onCreate-session"?: (() => any) | undefined;
     "onSelect-session"?: ((session: import("./types").OpenCodeWidgetSession) => any) | undefined;
     "onDelete-session"?: ((session: import("./types").OpenCodeWidgetSession) => any) | undefined;
@@ -60,6 +64,7 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
     showEmptyState: boolean;
     emptyStateText: string;
     emptyStateActionText: string;
+    theme: import("./types").OpenCodeWidgetTheme;
     iframeSrc: string;
     sessionListCollapsed: boolean;
     selectMode: boolean;
@@ -71,7 +76,6 @@ declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps
     open: boolean;
     hotkeyLabel: string;
     position: import("./types").OpenCodeWidgetPosition;
-    theme: import("./types").OpenCodeWidgetTheme;
     currentSessionId: string | null;
     selectedElements: import("./types").OpenCodeSelectedElement[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -39,7 +39,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
   props: {
     position: { type: String, required: false, default: "bottom-right" },
     open: { type: Boolean, required: false, default: false },
-    theme: { type: String, required: false, default: "light" },
+    theme: { type: String, required: false, default: "auto" },
     title: { type: String, required: false, default: "AI \u52A9\u624B" },
     hotkeyLabel: { type: String, required: false, default: "Ctrl+K" },
     selectShortcutLabel: { type: String, required: false, default: "\u6309 ESC \u6216 Ctrl+P \u9000\u51FA" },
@@ -58,7 +58,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
     emptyStateText: { type: String, required: false, default: "\u5F53\u524D\u9879\u76EE\u6682\u65E0\u4F1A\u8BDD" },
     emptyStateActionText: { type: String, required: false, default: "\u7ACB\u5373\u521B\u5EFA" }
   },
-  emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "toggle", "close", "toggle-session-list", "toggle-select-mode", "create-session", "select-session", "delete-session", "click-selected-node", "remove-selected-node", "clear-selected-nodes", "empty-action"],
+  emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "toggle", "close", "toggle-session-list", "toggle-select-mode", "toggle-theme", "create-session", "select-session", "delete-session", "click-selected-node", "remove-selected-node", "clear-selected-nodes", "empty-action"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -108,10 +108,12 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       containerClasses,
       iframeSource,
       sessionListTitle,
+      resolvedTheme,
       handleClose,
       handleEmptyAction,
       handleToggle,
-      handleToggleSessionList
+      handleToggleSessionList,
+      handleToggleTheme
     } = useWidget({
       position: toRef(props, "position"),
       theme: toRef(props, "theme"),
@@ -138,6 +140,10 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       },
       onEmptyAction: () => {
         emit("empty-action");
+      },
+      onToggleTheme: (newTheme) => {
+        emit("update:theme", newTheme);
+        emit("toggle-theme", newTheme);
       }
     });
     const { sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession } = useSession({
@@ -190,6 +196,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
     });
     provideOpenCodeWidgetContext({
       theme: toRef(props, "theme"),
+      resolvedTheme,
       title: toRef(props, "title"),
       hotkeyLabel: toRef(props, "hotkeyLabel"),
       selectShortcutLabel: toRef(props, "selectShortcutLabel"),
@@ -214,6 +221,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       handleToggle,
       handleClose,
       handleToggleSessionList,
+      handleToggleTheme,
       handleEmptyAction,
       handleCreateSession,
       handleSelectSession,
@@ -231,7 +239,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       return dialogResolve;
     }, set dialogResolve(v) {
       dialogResolve = v;
-    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, localSessionListCollapsed, buttonActive, containerClasses, iframeSource, sessionListTitle, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, Frame, Header, SelectHint, SelectedBubbles, SelectedNodes, SessionList, Trigger };
+    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, localSessionListCollapsed, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, Frame, Header, SelectHint, SelectedBubbles, SelectedNodes, SessionList, Trigger };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

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

@@ -42,10 +42,12 @@ export type OpenCodeWidgetEmits = {
     (e: "update:sessionListCollapsed", value: boolean): void;
     (e: "update:currentSessionId", value: string | null): void;
     (e: "update:selectedElements", value: OpenCodeSelectedElement[]): void;
+    (e: "update:theme", value: OpenCodeWidgetTheme): void;
     (e: "toggle", value: boolean): void;
     (e: "close"): void;
     (e: "toggle-session-list", value: boolean): void;
     (e: "toggle-select-mode", value: boolean): void;
+    (e: "toggle-theme", value: OpenCodeWidgetTheme): void;
     (e: "create-session"): void;
     (e: "select-session", session: OpenCodeWidgetSession): void;
     (e: "delete-session", session: OpenCodeWidgetSession): void;