@aipanel/ui 1.2.0-beta.0

package/lib/AI-panel-widget/composables/use-persist-state.cjs

@@ -0,0 +1,102 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_persist_state_exports = {};
+__export(use_persist_state_exports, {
+  usePersistState: () => usePersistState
+});
+module.exports = __toCommonJS(use_persist_state_exports);
+var import_vue = require("vue");
+var import_core = require("@aipanel/core");
+const log = (0, import_core.createLogger)("AIPanelWidget");
+const STORAGE_KEY = "aipanel-widget-state";
+function loadState() {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (e) {
+    log.error("Failed to load persisted state:", { error: e });
+  }
+  return null;
+}
+function saveState(state) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch (e) {
+    log.error("Failed to save state:", { error: e });
+  }
+}
+function usePersistState(options) {
+  const restoreState = () => {
+    const saved = loadState();
+    if (options.onRestore) {
+      options.onRestore(saved || {});
+    }
+    return saved;
+  };
+  const getCurrentState = () => ({
+    open: options.open.value,
+    minimized: options.minimized.value,
+    promptDockVisible: options.promptDockVisible.value,
+    reviewPanelVisible: options.reviewPanelVisible.value,
+    bubbleOffset: options.bubbleOffset.value,
+    theme: options.theme.value,
+    sessionListCollapsed: options.sessionListCollapsed.value,
+    splitPanelWidth: options.splitPanelWidth?.value,
+    displayMode: options.displayMode?.value,
+    splitPosition: options.splitPosition?.value
+  });
+  const persistState = () => {
+    saveState(getCurrentState());
+  };
+  const watchers = [
+    options.open,
+    options.minimized,
+    options.promptDockVisible,
+    options.reviewPanelVisible,
+    options.bubbleOffset,
+    options.theme,
+    options.sessionListCollapsed
+  ];
+  if (options.splitPanelWidth) {
+    watchers.push(options.splitPanelWidth);
+  }
+  if (options.displayMode) {
+    watchers.push(options.displayMode);
+  }
+  if (options.splitPosition) {
+    watchers.push(options.splitPosition);
+  }
+  (0, import_vue.onMounted)(() => {
+    restoreState();
+    (0, import_vue.watch)(
+      watchers,
+      () => {
+        persistState();
+      },
+      { deep: true }
+    );
+  });
+  return {
+    restoreState,
+    persistState
+  };
+}

package/lib/AI-panel-widget/composables/use-persist-state.d.ts

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

package/lib/AI-panel-widget/composables/use-selection.cjs

@@ -0,0 +1,131 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_selection_exports = {};
+__export(use_selection_exports, {
+  useSelection: () => useSelection
+});
+module.exports = __toCommonJS(use_selection_exports);
+var import_vue = require("vue");
+var import_core = require("@aipanel/core");
+function getElementKey(element, index) {
+  if (element.filePath && element.line) {
+    return `${element.filePath}:${element.line}:${element.column ?? 0}`;
+  }
+  return `${element.description}-${index}`;
+}
+function getBubbleFileText(element) {
+  const fileName = element.filePath?.split("/").pop() || "";
+  const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ""}` : "";
+  return `${fileName}${lineInfo}`;
+}
+function getPanelFileText(element) {
+  const fileName = element.filePath?.split("/").pop() || "\u672A\u77E5\u6587\u4EF6";
+  const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ""}` : "";
+  const textPreview = element.innerText?.trim() ? `${(0, import_core.truncate)(element.innerText.trim(), 30)} \xB7 ` : "";
+  return `${textPreview}${fileName}${lineInfo}`;
+}
+function useSelection(options) {
+  const bubbleVisible = (0, import_vue.computed)(() => options.selectMode.value);
+  const selectedElementItems = (0, import_vue.computed)(
+    () => (options.selectedElements.value || []).map(
+      (element, index) => ({
+        key: getElementKey(element, index),
+        description: element.description || "\u672A\u77E5\u5143\u7D20",
+        bubbleFileText: getBubbleFileText(element),
+        panelFileText: getPanelFileText(element),
+        element
+      })
+    )
+  );
+  const hasSelectedElements = (0, import_vue.computed)(() => selectedElementItems.value.length > 0);
+  function handleToggleSelectMode() {
+    options.onToggleSelectMode(!options.selectMode.value);
+  }
+  function handleClickSelectedNode(item) {
+    const description = item.element.description;
+    if (!description) return;
+    let targetElement = null;
+    if (description.includes("#")) {
+      const idMatch = description.match(/#([^.[\s]+)/);
+      if (idMatch) {
+        targetElement = document.getElementById(idMatch[1]);
+      }
+    }
+    if (!targetElement && description.includes(".")) {
+      const classMatch = description.match(/^([a-z]+)\.([^[\s]+)/i);
+      if (classMatch) {
+        const tagName = classMatch[1];
+        const classes = classMatch[2].split(".").filter(Boolean);
+        const selector = `${tagName}.${classes.join(".")}`;
+        targetElement = document.querySelector(selector);
+      }
+    }
+    if (!targetElement) {
+      const tagMatch = description.match(/^([a-z]+)/i);
+      if (tagMatch) {
+        const simpleSelector = description.split(/[.[\s]/)[0];
+        targetElement = document.querySelector(simpleSelector);
+      }
+    }
+    if (targetElement) {
+      targetElement.scrollIntoView({ behavior: "smooth", block: "center" });
+      const highlightOverlay = document.createElement("div");
+      highlightOverlay.className = "aipanel-element-highlight-temp";
+      const widget = document.querySelector(".aipanel-widget");
+      let primary = "#3b82f6";
+      let primaryBg = "rgba(59, 130, 246, 0.1)";
+      if (widget) {
+        const style = getComputedStyle(widget);
+        primary = style.getPropertyValue("--ap-primary").trim() || primary;
+        primaryBg = style.getPropertyValue("--ap-primary-bg").trim() || primaryBg;
+      }
+      highlightOverlay.style.border = `2px solid ${primary}`;
+      highlightOverlay.style.background = primaryBg;
+      const rect = targetElement.getBoundingClientRect();
+      highlightOverlay.style.top = `${rect.top + window.scrollY}px`;
+      highlightOverlay.style.left = `${rect.left + window.scrollX}px`;
+      highlightOverlay.style.width = `${rect.width}px`;
+      highlightOverlay.style.height = `${rect.height}px`;
+      document.body.appendChild(highlightOverlay);
+      setTimeout(() => {
+        highlightOverlay.remove();
+      }, 2e3);
+    }
+  }
+  function handleRemoveSelectedNode(item, index, source) {
+    options.onRemoveSelectedNode({ element: item.element, index, source });
+  }
+  async function handleClearSelectedNodes() {
+    if (!options.selectedElements.value || options.selectedElements.value.length === 0) return;
+    const confirmed = await options.showConfirmDialog(
+      `\u786E\u5B9A\u8981\u6E05\u7A7A\u6240\u6709 ${options.selectedElements.value.length} \u4E2A\u5DF2\u9009\u8282\u70B9\u5417\uFF1F`
+    );
+    if (confirmed) {
+      options.onClearSelectedNodes();
+    }
+  }
+  return {
+    bubbleVisible,
+    hasSelectedElements,
+    selectedElementItems,
+    handleClearSelectedNodes,
+    handleClickSelectedNode,
+    handleRemoveSelectedNode,
+    handleToggleSelectMode
+  };
+}

package/lib/AI-panel-widget/composables/use-selection.d.ts

@@ -0,0 +1,19 @@
+import { type Ref } from "vue";
+import type { AIPanelRemoveSelectedPayload, AIPanelSelectedElement, AIPanelSelectedElementItem } from "../src/types";
+export interface UseSelectionOptions {
+    selectMode: Ref<boolean>;
+    selectedElements: Ref<AIPanelSelectedElement[]>;
+    onToggleSelectMode: (mode: boolean) => void;
+    onRemoveSelectedNode: (payload: AIPanelRemoveSelectedPayload) => void;
+    onClearSelectedNodes: () => void;
+    showConfirmDialog: (message: string) => Promise<boolean>;
+}
+export declare function useSelection(options: UseSelectionOptions): {
+    bubbleVisible: import("vue").ComputedRef<boolean>;
+    hasSelectedElements: import("vue").ComputedRef<boolean>;
+    selectedElementItems: import("vue").ComputedRef<AIPanelSelectedElementItem[]>;
+    handleClearSelectedNodes: () => Promise<void>;
+    handleClickSelectedNode: (item: AIPanelSelectedElementItem) => void;
+    handleRemoveSelectedNode: (item: AIPanelSelectedElementItem, index: number, source: AIPanelRemoveSelectedPayload["source"]) => void;
+    handleToggleSelectMode: () => void;
+};

package/lib/AI-panel-widget/composables/use-session.cjs

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_session_exports = {};
+__export(use_session_exports, {
+  useSession: () => useSession
+});
+module.exports = __toCommonJS(use_session_exports);
+var import_vue = require("vue");
+function formatSessionMeta(session) {
+  if (session.meta) {
+    return session.meta;
+  }
+  if (!session.updatedAt) {
+    return "";
+  }
+  const date = new Date(session.updatedAt);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+}
+function useSession(options) {
+  const sessionItems = (0, import_vue.computed)(
+    () => (options.sessions.value || []).map((session) => ({
+      key: session.id,
+      id: session.id,
+      title: session.title || "\u65B0\u4F1A\u8BDD",
+      meta: formatSessionMeta(session),
+      active: session.id === options.currentSessionId.value,
+      session
+    }))
+  );
+  function handleCreateSession() {
+    options.onCreateSession();
+  }
+  function handleSelectSession(item) {
+    options.onSelectSession(item.session);
+  }
+  async function handleDeleteSession(item) {
+    const confirmed = await options.showConfirmDialog(`\u786E\u5B9A\u8981\u5220\u9664\u4F1A\u8BDD "${item.title}" \u5417\uFF1F`);
+    if (confirmed) {
+      options.onDeleteSession(item.session);
+    }
+  }
+  return {
+    sessionItems,
+    handleCreateSession,
+    handleDeleteSession,
+    handleSelectSession
+  };
+}

package/lib/AI-panel-widget/composables/use-session.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from "vue";
+import type { AIPanelWidgetSession, AIPanelWidgetSessionItem } from "../src/types";
+export interface UseSessionOptions {
+    sessions: Ref<AIPanelWidgetSession[]>;
+    currentSessionId: Ref<string | number | null>;
+    onCreateSession: () => void;
+    onSelectSession: (session: AIPanelWidgetSession) => void;
+    onDeleteSession: (session: AIPanelWidgetSession) => void;
+    showConfirmDialog: (message: string) => Promise<boolean>;
+}
+export declare function useSession(options: UseSessionOptions): {
+    sessionItems: import("vue").ComputedRef<AIPanelWidgetSessionItem[]>;
+    handleCreateSession: () => void;
+    handleDeleteSession: (item: AIPanelWidgetSessionItem) => Promise<void>;
+    handleSelectSession: (item: AIPanelWidgetSessionItem) => void;
+};

package/lib/AI-panel-widget/composables/use-split.cjs

@@ -0,0 +1,152 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_split_exports = {};
+__export(use_split_exports, {
+  useSplitMode: () => useSplitMode
+});
+module.exports = __toCommonJS(use_split_exports);
+var import_vue = require("vue");
+const AUTO_MODE_THRESHOLD = 1440;
+function useSplitMode(options) {
+  const windowWidth = (0, import_vue.ref)(typeof window !== "undefined" ? window.innerWidth : 0);
+  const localSplitPosition = (0, import_vue.ref)(options.splitPosition?.value ?? "right");
+  const isExtensionMode = (0, import_vue.computed)(() => options.displayMode.value === "extension");
+  const shouldSkipBodyModification = (0, import_vue.computed)(
+    () => isExtensionMode.value || options.displayMode.value === "extension-selector"
+  );
+  const splitConfig = (0, import_vue.computed)(() => {
+    const config = options.splitMode.value || {};
+    const isExt = isExtensionMode.value;
+    return {
+      width: config.width ?? 500,
+      minWidth: config.minWidth ?? 400,
+      maxWidth: config.maxWidth ?? 800,
+      resizable: isExt ? false : config.resizable ?? true,
+      shrinkPage: isExt ? false : config.shrinkPage ?? true,
+      defaultOpen: isExt ? true : config.defaultOpen ?? true,
+      position: config.position ?? localSplitPosition.value
+    };
+  });
+  const panelWidth = (0, import_vue.ref)(splitConfig.value.width);
+  const effectiveMode = (0, import_vue.computed)(() => {
+    if (isExtensionMode.value) return "split";
+    if (options.displayMode.value === "bubble") {
+      return "bubble";
+    }
+    if (options.displayMode.value === "split") {
+      return "split";
+    }
+    return windowWidth.value >= AUTO_MODE_THRESHOLD ? "split" : "bubble";
+  });
+  const isSplitMode = (0, import_vue.computed)(() => effectiveMode.value === "split");
+  const splitPosition = (0, import_vue.computed)(() => splitConfig.value.position);
+  const handleResize = (width) => {
+    panelWidth.value = width;
+    options.onWidthChange?.(width);
+  };
+  const handleToggle = () => {
+    const nextOpen = !options.open.value;
+    options.onOpenChange?.(nextOpen);
+  };
+  const handleTogglePosition = () => {
+    const nextPosition = localSplitPosition.value === "right" ? "left" : "right";
+    localSplitPosition.value = nextPosition;
+    options.onPositionChange?.(nextPosition);
+  };
+  const handleWindowResize = () => {
+    if (typeof window !== "undefined") {
+      windowWidth.value = window.innerWidth;
+    }
+  };
+  const updateBodyClass = () => {
+    if (typeof document === "undefined") return;
+    if (shouldSkipBodyModification.value) {
+      document.body.classList.remove("has-aipanel-split");
+      document.body.classList.remove("has-aipanel-split-left");
+      document.body.classList.remove("has-aipanel-split-right");
+      document.body.style.removeProperty("--aipanel-split-width");
+      return;
+    }
+    const shouldShrink = isSplitMode.value && options.open.value && splitConfig.value.shrinkPage;
+    if (shouldShrink) {
+      document.body.classList.add("has-aipanel-split");
+      document.body.style.setProperty("--aipanel-split-width", `${panelWidth.value}px`);
+      if (splitPosition.value === "left") {
+        document.body.classList.add("has-aipanel-split-left");
+        document.body.classList.remove("has-aipanel-split-right");
+      } else {
+        document.body.classList.add("has-aipanel-split-right");
+        document.body.classList.remove("has-aipanel-split-left");
+      }
+    } else {
+      document.body.classList.remove("has-aipanel-split");
+      document.body.classList.remove("has-aipanel-split-left");
+      document.body.classList.remove("has-aipanel-split-right");
+      document.body.style.removeProperty("--aipanel-split-width");
+    }
+  };
+  (0, import_vue.watch)([isSplitMode, options.open, panelWidth, splitPosition], updateBodyClass, {
+    immediate: true
+  });
+  (0, import_vue.watch)(splitConfig, (config) => {
+    if (panelWidth.value < config.minWidth) {
+      panelWidth.value = config.minWidth;
+    }
+    if (panelWidth.value > config.maxWidth) {
+      panelWidth.value = config.maxWidth;
+    }
+  });
+  (0, import_vue.watch)(
+    () => options.splitPosition?.value,
+    (val) => {
+      if (val && val !== localSplitPosition.value) {
+        localSplitPosition.value = val;
+      }
+    }
+  );
+  (0, import_vue.onMounted)(() => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleWindowResize);
+      if (!isExtensionMode.value && isSplitMode.value && splitConfig.value.defaultOpen && !options.open.value) {
+        options.onOpenChange?.(true);
+      }
+    }
+  });
+  (0, import_vue.onUnmounted)(() => {
+    if (typeof window !== "undefined") {
+      window.removeEventListener("resize", handleWindowResize);
+      if (!isExtensionMode.value) {
+        document.body.classList.remove("has-aipanel-split");
+        document.body.classList.remove("has-aipanel-split-left");
+        document.body.classList.remove("has-aipanel-split-right");
+        document.body.style.removeProperty("--aipanel-split-width");
+      }
+    }
+  });
+  return {
+    effectiveMode,
+    isSplitMode,
+    isExtensionMode,
+    panelWidth,
+    splitConfig,
+    splitPosition,
+    handleResize,
+    handleToggle,
+    handleTogglePosition
+  };
+}

package/lib/AI-panel-widget/composables/use-split.d.ts

@@ -0,0 +1,30 @@
+import { type Ref } from "vue";
+import type { DisplayMode, SplitModeOptions } from "@aipanel/core";
+export interface UseSplitModeOptions {
+    displayMode: Ref<DisplayMode>;
+    splitMode: Ref<SplitModeOptions | undefined>;
+    open: Ref<boolean>;
+    splitPosition?: Ref<"left" | "right">;
+    onOpenChange?: (open: boolean) => void;
+    onWidthChange?: (width: number) => void;
+    onPositionChange?: (position: "left" | "right") => void;
+}
+export declare function useSplitMode(options: UseSplitModeOptions): {
+    effectiveMode: import("vue").ComputedRef<"bubble" | "split">;
+    isSplitMode: import("vue").ComputedRef<boolean>;
+    isExtensionMode: import("vue").ComputedRef<boolean>;
+    panelWidth: Ref<number, number>;
+    splitConfig: import("vue").ComputedRef<{
+        width: number;
+        minWidth: number;
+        maxWidth: number;
+        resizable: boolean;
+        shrinkPage: boolean;
+        defaultOpen: boolean;
+        position: "left" | "right";
+    }>;
+    splitPosition: import("vue").ComputedRef<"left" | "right">;
+    handleResize: (width: number) => void;
+    handleToggle: () => void;
+    handleTogglePosition: () => void;
+};

package/lib/AI-panel-widget/composables/use-widget.cjs

@@ -0,0 +1,97 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_widget_exports = {};
+__export(use_widget_exports, {
+  useWidget: () => useWidget
+});
+module.exports = __toCommonJS(use_widget_exports);
+var import_vue = require("vue");
+const THEME_CYCLE = ["auto", "light", "dark"];
+function useWidget(options) {
+  const systemTheme = (0, import_vue.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;
+  (0, import_vue.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);
+  });
+  (0, import_vue.onUnmounted)(() => {
+    if (mediaQuery && handleChange) {
+      mediaQuery.removeEventListener("change", handleChange);
+    }
+  });
+  const resolvedTheme = (0, import_vue.computed)(() => {
+    if (options.theme.value === "auto") {
+      return systemTheme.value;
+    }
+    return options.theme.value;
+  });
+  const containerClasses = (0, import_vue.computed)(() => [
+    "aipanel-widget",
+    `aipanel-theme-${resolvedTheme.value}`
+  ]);
+  const buttonActive = (0, import_vue.computed)(() => !!(options.open.value || options.selectMode.value));
+  const iframeSource = (0, import_vue.computed)(() => options.iframeSrc.value || "about:blank");
+  const sessionListTitle = (0, import_vue.computed)(
+    () => options.sessionListCollapsed.value ? "\u5C55\u5F00\u4F1A\u8BDD\u5217\u8868" : "\u6298\u53E0\u4F1A\u8BDD\u5217\u8868"
+  );
+  function handleToggle() {
+    if (options.selectMode.value) {
+      options.onToggleSelectMode?.(false);
+      return;
+    }
+    const nextOpen = !options.open.value;
+    options.onToggle(nextOpen);
+  }
+  function handleClose() {
+    options.onClose();
+  }
+  function handleToggleSessionList() {
+    options.onToggleSessionList(!options.sessionListCollapsed.value);
+  }
+  function handleEmptyAction() {
+    options.onEmptyAction();
+  }
+  function handleToggleTheme() {
+    const currentIndex = THEME_CYCLE.indexOf(options.theme.value);
+    const nextIndex = (currentIndex + 1) % THEME_CYCLE.length;
+    const nextTheme = THEME_CYCLE[nextIndex];
+    options.onToggleTheme?.(nextTheme);
+  }
+  return {
+    buttonActive,
+    containerClasses,
+    iframeSource,
+    sessionListTitle,
+    resolvedTheme,
+    handleClose,
+    handleEmptyAction,
+    handleToggle,
+    handleToggleSessionList,
+    handleToggleTheme
+  };
+}

package/lib/AI-panel-widget/composables/use-widget.d.ts

@@ -0,0 +1,27 @@
+import { type Ref } from "vue";
+import type { AIPanelWidgetTheme } from "../src/types";
+export interface UseWidgetOptions {
+    theme: Ref<string>;
+    open: Ref<boolean>;
+    selectMode: Ref<boolean>;
+    iframeSrc: Ref<string>;
+    sessionListCollapsed: Ref<boolean>;
+    onToggle: (nextOpen: boolean) => void;
+    onToggleSelectMode?: (mode: boolean) => void;
+    onClose: () => void;
+    onToggleSessionList: (collapsed: boolean) => void;
+    onEmptyAction: () => void;
+    onToggleTheme?: (theme: AIPanelWidgetTheme) => 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;
+};