@aipanel/ui 1.2.8 → 1.2.10

package/es/AI-panel-widget/composables/use-inspector.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
-import { truncate } from "@aipanel/core";
+import { INSPECTOR_CHECK_INTERVAL, truncate } from "@aipanel/core";
 import getCssSelector from "css-selector-generator";
 const IGNORE_SELECTORS = [
   "#vue-inspector-container",
@@ -196,7 +196,6 @@ function useInspector(options) {
   const tooltipVisible = ref(false);
   const tooltipStyle = ref({ top: "0px", left: "0px" });
   const tooltipContent = ref({ description: "", fileInfo: "" });
-  const INSPECTOR_CHECK_INTERVAL = 500;
   let inspectorCheckTimer = null;
   let currentPrimary = "#3b82f6";
   let currentPrimaryBg = "rgba(59, 130, 246, 0.1)";

package/es/AI-panel-widget/composables/use-persist-state.mjs

@@ -1,26 +1,11 @@
 import { watch, onMounted } from "vue";
-import { createLogger } from "@aipanel/core";
-const log = createLogger("AIPanelWidget");
+import { storageGet, storageSet } from "@aipanel/core/client";
 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;
+  return storageGet("local", STORAGE_KEY);
 }
 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 });
-  }
+  storageSet("local", STORAGE_KEY, state);
 }
 function usePersistState(options) {
   const restoreState = () => {

package/es/AI-panel-widget/composables/use-widget.mjs

@@ -1,11 +1,9 @@
 import { computed, ref, onMounted, onUnmounted } from "vue";
-const THEME_CYCLE = ["auto", "light", "dark"];
+import { WIDGET_THEME_MODES } from "@aipanel/core";
+import { getSystemTheme, resolveWidgetTheme } from "@aipanel/core/client";
+const THEME_CYCLE = WIDGET_THEME_MODES;
 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(() => {
@@ -22,12 +20,9 @@ function useWidget(options) {
       mediaQuery.removeEventListener("change", handleChange);
     }
   });
-  const resolvedTheme = computed(() => {
-    if (options.theme.value === "auto") {
-      return systemTheme.value;
-    }
-    return options.theme.value;
-  });
+  const resolvedTheme = computed(
+    () => resolveWidgetTheme(options.theme.value, systemTheme.value)
+  );
   const containerClasses = computed(() => [
     "aipanel-widget",
     `aipanel-theme-${resolvedTheme.value}`

package/es/AI-panel-widget/src/components/Frame.vue.mjs

@@ -2,6 +2,7 @@ import "./Frame-sfc.css";
 import { defineComponent as _defineComponent } from "vue";
 import { ref } from "vue";
 import { useAIPanelWidgetContext } from "../context.mjs";
+import { widgetEnvelope } from "@aipanel/core";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
   __name: "Frame",
   setup(__props, { expose: __expose }) {
@@ -18,7 +19,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     } = useAIPanelWidgetContext();
     function sendMessageToIframe(type, data) {
       if (!iframeRef.value?.contentWindow) return;
-      iframeRef.value.contentWindow.postMessage({ type, ...data }, "*");
+      iframeRef.value.contentWindow.postMessage(widgetEnvelope(type, data), "*");
     }
     __expose({
       sendMessageToIframe

package/es/AI-panel-widget/src/components/Header.vue.mjs

@@ -33,6 +33,14 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       handleRefresh,
       handleCreateSession
     } = useAIPanelWidgetContext();
+    const DISPLAY_MODE_LABELS = {
+      bubble: "\u6C14\u6CE1\u6A21\u5F0F",
+      split: "\u5206\u5C4F\u6A21\u5F0F",
+      auto: "\u81EA\u52A8\u6A21\u5F0F",
+      extension: "\u6269\u5C55\u6A21\u5F0F",
+      "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
+    };
+    const DISPLAY_CYCLE = ["bubble", "split", "auto"];
     const isSplitMode = computed(() => mode.value === "split");
     const themeIconTitle = computed(() => {
       const themeLabels = {
@@ -51,27 +59,12 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       return `\u5207\u6362\u4E3B\u9898 - \u5F53\u524D: ${themeLabels[theme.value]}`;
     });
     const displayModeIconTitle = computed(() => {
-      const displayModeLabels = {
-        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
-        split: "\u5206\u5C4F\u6A21\u5F0F",
-        auto: "\u81EA\u52A8\u6A21\u5F0F",
-        extension: "\u6269\u5C55\u6A21\u5F0F",
-        "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
-      };
-      return `\u5C55\u793A\u6A21\u5F0F: ${displayModeLabels[displayMode.value]}`;
+      return `\u5C55\u793A\u6A21\u5F0F: ${DISPLAY_MODE_LABELS[displayMode.value]}`;
     });
     const displayModeIconLabel = computed(() => {
-      const displayModeLabels = {
-        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
-        split: "\u5206\u5C4F\u6A21\u5F0F",
-        auto: "\u81EA\u52A8\u6A21\u5F0F",
-        extension: "\u6269\u5C55\u6A21\u5F0F",
-        "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
-      };
-      const modes = ["bubble", "split", "auto"];
-      const currentIndex = modes.indexOf(displayMode.value);
-      const nextMode = modes[(currentIndex + 1) % modes.length];
-      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${displayModeLabels[nextMode]}`;
+      const currentIndex = DISPLAY_CYCLE.indexOf(displayMode.value);
+      const nextMode = DISPLAY_CYCLE[(currentIndex + 1) % DISPLAY_CYCLE.length];
+      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${DISPLAY_MODE_LABELS[nextMode]}`;
     });
     const splitPositionIconTitle = computed(() => {
       const positionLabels = {
@@ -84,7 +77,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       const nextPosition = splitPosition.value === "right" ? "\u5DE6\u4FA7" : "\u53F3\u4FA7";
       return `\u5207\u6362\u5206\u680F\u4F4D\u7F6E - \u4E0B\u4E00\u4E2A: ${nextPosition}`;
     });
-    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, reviewPanelVisible, reviewPanelEnabled, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, handleCreateSession, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
+    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, reviewPanelVisible, reviewPanelEnabled, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, handleCreateSession, DISPLAY_MODE_LABELS, DISPLAY_CYCLE, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/es/AI-panel-widget/src/index.vue.mjs

@@ -11,7 +11,7 @@ import { useInspector } from "../composables/use-inspector.mjs";
 import { usePersistState } from "../composables/use-persist-state.mjs";
 import { useSplitMode } from "../composables/use-split.mjs";
 import { provideAIPanelWidgetContext } from "./context.mjs";
-import { WIDGET_MSG } from "@aipanel/core";
+import { NOTIFICATION_DURATION, WIDGET_MSG } from "@aipanel/core";
 const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
   ...{
     name: "AIPanelWidget"
@@ -61,7 +61,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     const notificationMode = ref("widget");
     let notificationTimer = null;
     const showNotification = (message, options) => {
-      const { duration = 3e3, mode = "widget" } = options || {};
+      const { duration = NOTIFICATION_DURATION, mode = "widget" } = options || {};
       notificationMessage.value = message;
       notificationVisible.value = true;
       notificationMode.value = mode;

package/es/AI-panel-widget/src/types.d.ts

@@ -1,2 +1 @@
 export type { AIPanelWidgetTheme, AIPanelWidgetSession, AIPanelSelectedElement, AIPanelRemoveSelectedPayload, AIPanelWidgetSessionItem, AIPanelSelectedElementItem, AIPanelWidgetProps, AIPanelWidgetEmits, AIPanelSessionThinkingState, DisplayMode, SplitModeOptions, } from "@aipanel/core";
-export type AIPanelWidgetThemeLocal = "light" | "dark" | "auto";

package/es/index.d.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-declare const version = "1.2.8";
+declare const version = "1.2.10";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, };
 export * from './AI-panel-widget';

package/es/index.mjs

@@ -1,5 +1,5 @@
 import { AIPanelWidget } from "./AI-panel-widget/index.mjs";
-const version = "1.2.8";
+const version = "1.2.10";
 function install(app, options) {
   const components = [
     AIPanelWidget

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

@@ -228,7 +228,6 @@ function useInspector(options) {
   const tooltipVisible = (0, import_vue.ref)(false);
   const tooltipStyle = (0, import_vue.ref)({ top: "0px", left: "0px" });
   const tooltipContent = (0, import_vue.ref)({ description: "", fileInfo: "" });
-  const INSPECTOR_CHECK_INTERVAL = 500;
   let inspectorCheckTimer = null;
   let currentPrimary = "#3b82f6";
   let currentPrimaryBg = "rgba(59, 130, 246, 0.1)";
@@ -441,7 +440,7 @@ function useInspector(options) {
             inspectorCheckTimer = null;
           }
         }
-      }, INSPECTOR_CHECK_INTERVAL);
+      }, import_core.INSPECTOR_CHECK_INTERVAL);
     }
   });
   (0, import_vue.onUnmounted)(() => {

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

@@ -21,28 +21,13 @@ __export(use_persist_state_exports, {
 });
 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");
+var import_client = require("@aipanel/core/client");
 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;
+  return (0, import_client.storageGet)("local", STORAGE_KEY);
 }
 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 });
-  }
+  (0, import_client.storageSet)("local", STORAGE_KEY, state);
 }
 function usePersistState(options) {
   const restoreState = () => {

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

@@ -21,18 +21,16 @@ __export(use_widget_exports, {
 });
 module.exports = __toCommonJS(use_widget_exports);
 var import_vue = require("vue");
-const THEME_CYCLE = ["auto", "light", "dark"];
+var import_core = require("@aipanel/core");
+var import_client = require("@aipanel/core/client");
+const THEME_CYCLE = import_core.WIDGET_THEME_MODES;
 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();
+    systemTheme.value = (0, import_client.getSystemTheme)();
     mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     handleChange = (e) => {
       systemTheme.value = e.matches ? "dark" : "light";
@@ -44,12 +42,9 @@ function useWidget(options) {
       mediaQuery.removeEventListener("change", handleChange);
     }
   });
-  const resolvedTheme = (0, import_vue.computed)(() => {
-    if (options.theme.value === "auto") {
-      return systemTheme.value;
-    }
-    return options.theme.value;
-  });
+  const resolvedTheme = (0, import_vue.computed)(
+    () => (0, import_client.resolveWidgetTheme)(options.theme.value, systemTheme.value)
+  );
   const containerClasses = (0, import_vue.computed)(() => [
     "aipanel-widget",
     `aipanel-theme-${resolvedTheme.value}`

package/lib/AI-panel-widget/src/components/Frame.vue.cjs

@@ -24,6 +24,7 @@ var import_Frame_sfc = require("./Frame-sfc.css");
 var import_vue = require("vue");
 var import_vue2 = require("vue");
 var import_context = require("../context.cjs");
+var import_core = require("@aipanel/core");
 var import_vue3 = require("vue");
 const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
   __name: "Frame",
@@ -41,7 +42,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     } = (0, import_context.useAIPanelWidgetContext)();
     function sendMessageToIframe(type, data) {
       if (!iframeRef.value?.contentWindow) return;
-      iframeRef.value.contentWindow.postMessage({ type, ...data }, "*");
+      iframeRef.value.contentWindow.postMessage((0, import_core.widgetEnvelope)(type, data), "*");
     }
     __expose({
       sendMessageToIframe

package/lib/AI-panel-widget/src/components/Header.vue.cjs

@@ -56,6 +56,14 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       handleRefresh,
       handleCreateSession
     } = (0, import_context.useAIPanelWidgetContext)();
+    const DISPLAY_MODE_LABELS = {
+      bubble: "\u6C14\u6CE1\u6A21\u5F0F",
+      split: "\u5206\u5C4F\u6A21\u5F0F",
+      auto: "\u81EA\u52A8\u6A21\u5F0F",
+      extension: "\u6269\u5C55\u6A21\u5F0F",
+      "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
+    };
+    const DISPLAY_CYCLE = ["bubble", "split", "auto"];
     const isSplitMode = (0, import_vue2.computed)(() => mode.value === "split");
     const themeIconTitle = (0, import_vue2.computed)(() => {
       const themeLabels = {
@@ -74,27 +82,12 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       return `\u5207\u6362\u4E3B\u9898 - \u5F53\u524D: ${themeLabels[theme.value]}`;
     });
     const displayModeIconTitle = (0, import_vue2.computed)(() => {
-      const displayModeLabels = {
-        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
-        split: "\u5206\u5C4F\u6A21\u5F0F",
-        auto: "\u81EA\u52A8\u6A21\u5F0F",
-        extension: "\u6269\u5C55\u6A21\u5F0F",
-        "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
-      };
-      return `\u5C55\u793A\u6A21\u5F0F: ${displayModeLabels[displayMode.value]}`;
+      return `\u5C55\u793A\u6A21\u5F0F: ${DISPLAY_MODE_LABELS[displayMode.value]}`;
     });
     const displayModeIconLabel = (0, import_vue2.computed)(() => {
-      const displayModeLabels = {
-        bubble: "\u6C14\u6CE1\u6A21\u5F0F",
-        split: "\u5206\u5C4F\u6A21\u5F0F",
-        auto: "\u81EA\u52A8\u6A21\u5F0F",
-        extension: "\u6269\u5C55\u6A21\u5F0F",
-        "extension-selector": "\u6269\u5C55\u9009\u62E9\u5668\u6A21\u5F0F"
-      };
-      const modes = ["bubble", "split", "auto"];
-      const currentIndex = modes.indexOf(displayMode.value);
-      const nextMode = modes[(currentIndex + 1) % modes.length];
-      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${displayModeLabels[nextMode]}`;
+      const currentIndex = DISPLAY_CYCLE.indexOf(displayMode.value);
+      const nextMode = DISPLAY_CYCLE[(currentIndex + 1) % DISPLAY_CYCLE.length];
+      return `\u5207\u6362\u5C55\u793A\u6A21\u5F0F - \u4E0B\u4E00\u4E2A: ${DISPLAY_MODE_LABELS[nextMode]}`;
     });
     const splitPositionIconTitle = (0, import_vue2.computed)(() => {
       const positionLabels = {
@@ -107,7 +100,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       const nextPosition = splitPosition.value === "right" ? "\u5DE6\u4FA7" : "\u53F3\u4FA7";
       return `\u5207\u6362\u5206\u680F\u4F4D\u7F6E - \u4E0B\u4E00\u4E2A: ${nextPosition}`;
     });
-    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, reviewPanelVisible, reviewPanelEnabled, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, handleCreateSession, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
+    const __returned__ = { title, sessionListTitle, sessionListCollapsed, selectMode, selectEnabled, theme, resolvedTheme, minimized, promptDockVisible, reviewPanelVisible, reviewPanelEnabled, mode, displayMode, splitPosition, handleToggleSessionList, handleToggleSelectMode, handleToggleTheme, handleToggleDisplayMode, handleToggleSplitPosition, handleClose, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, handleCreateSession, DISPLAY_MODE_LABELS, DISPLAY_CYCLE, isSplitMode, themeIconTitle, themeIconLabel, displayModeIconTitle, displayModeIconLabel, splitPositionIconTitle, splitPositionIconLabel };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/lib/AI-panel-widget/src/index.vue.cjs

@@ -94,7 +94,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     const notificationMode = (0, import_vue2.ref)("widget");
     let notificationTimer = null;
     const showNotification = (message, options) => {
-      const { duration = 3e3, mode = "widget" } = options || {};
+      const { duration = import_core.NOTIFICATION_DURATION, mode = "widget" } = options || {};
       notificationMessage.value = message;
       notificationVisible.value = true;
       notificationMode.value = mode;

package/lib/AI-panel-widget/src/types.d.ts

@@ -1,2 +1 @@
 export type { AIPanelWidgetTheme, AIPanelWidgetSession, AIPanelSelectedElement, AIPanelRemoveSelectedPayload, AIPanelWidgetSessionItem, AIPanelSelectedElementItem, AIPanelWidgetProps, AIPanelWidgetEmits, AIPanelSessionThinkingState, DisplayMode, SplitModeOptions, } from "@aipanel/core";
-export type AIPanelWidgetThemeLocal = "light" | "dark" | "auto";

package/lib/index.cjs

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(lib_exports);
 var import_AI_panel_widget = require("./AI-panel-widget/index.cjs");
 __reExport(lib_exports, require("./AI-panel-widget/index.cjs"), module.exports);
 __reExport(lib_exports, require("./setup.cjs"), module.exports);
-const version = "1.2.8";
+const version = "1.2.10";
 function install(app, options) {
   const components = [
     import_AI_panel_widget.AIPanelWidget

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-declare const version = "1.2.8";
+declare const version = "1.2.10";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, };
 export * from './AI-panel-widget';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aipanel/ui",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "Reusable AIPanel widget components built with Pagoda CLI",
   "type": "module",
   "main": "lib/index.cjs",
@@ -31,12 +31,10 @@
   },
   "dependencies": {
     "css-selector-generator": "^3.9.2",
-    "@aipanel/core": "1.2.8"
+    "@aipanel/core": "1.2.10"
   },
   "scripts": {
     "build": "pagoda-cli build",
-    "dev:site": "pagoda-cli site",
-    "build:site": "pagoda-cli build-site",
     "test": "vitest run"
   }
 }