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

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

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

@@ -1,8 +1,5 @@
 import { ref, watch, onMounted, onUnmounted } from "vue";
-function truncate(str, maxLength) {
-  if (!str) return "";
-  return str.length > maxLength ? str.substring(0, maxLength) + "..." : str;
-}
+import { truncate } from "@vite-plugin-opencode-assistant/shared";
 function getDirectText(element) {
   let text = "";
   for (let i = 0; i < element.childNodes.length; i++) {
@@ -32,6 +29,32 @@ function getElementDescription(element) {
   if (href && href !== "#") parts.push(`[href]`);
   return parts.join("");
 }
+function getPreciseElementAtPoint(x, y, boundary) {
+  var _a, _b;
+  const highlight = document.querySelector(".opencode-element-highlight");
+  const tooltip = document.querySelector(".opencode-element-tooltip");
+  const highlightDisplay = ((_a = highlight == null ? void 0 : highlight.getAttribute("style")) == null ? void 0 : _a.includes("display: block")) ? "block" : "none";
+  const tooltipDisplay = ((_b = tooltip == null ? void 0 : tooltip.getAttribute("style")) == null ? void 0 : _b.includes("display: block")) ? "block" : "none";
+  if (highlight) highlight.style.display = "none";
+  if (tooltip) tooltip.style.display = "none";
+  let element = null;
+  try {
+    const elements = document.elementsFromPoint(x, y);
+    for (const el of elements) {
+      if (el.closest("#vue-inspector-container")) continue;
+      if (el.closest(".opencode-widget")) continue;
+      if (el.hasAttribute("data-v-inspector-ignore")) continue;
+      if (boundary.contains(el) || el === boundary) {
+        element = el;
+        break;
+      }
+    }
+  } finally {
+    if (highlight) highlight.style.display = highlightDisplay;
+    if (tooltip) tooltip.style.display = tooltipDisplay;
+  }
+  return element;
+}
 function useInspector(options) {
   const highlightVisible = ref(false);
   const highlightStyle = ref({
@@ -51,7 +74,9 @@ function useInspector(options) {
     if (!inspector) return;
     const { targetNode, params } = inspector.getTargetNode(e);
     if (targetNode && params) {
-      const rect = targetNode.getBoundingClientRect();
+      const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
+      const elementToHighlight = preciseElement || targetNode;
+      const rect = elementToHighlight.getBoundingClientRect();
       const widget = document.querySelector(".opencode-widget");
       let primary = "#3b82f6";
       let primaryBg = "rgba(59, 130, 246, 0.1)";
@@ -69,7 +94,7 @@ function useInspector(options) {
         border: `2px solid ${primary}`,
         background: primaryBg
       };
-      const description = getElementDescription(targetNode);
+      const description = getElementDescription(elementToHighlight);
       const fileName = params.file ? params.file.split("/").pop() : "";
       let lineInfo = "";
       if (params.line) {
@@ -111,8 +136,10 @@ function useInspector(options) {
       if (options.selectMode.value) {
         const { targetNode, params } = inspector.getTargetNode(e);
         if (targetNode && params) {
-          const innerText = getDirectText(targetNode);
-          const description = getElementDescription(targetNode);
+          const preciseElement = getPreciseElementAtPoint(e.clientX, e.clientY, targetNode);
+          const elementToSelect = preciseElement || targetNode;
+          const innerText = getDirectText(elementToSelect);
+          const description = getElementDescription(elementToSelect);
           const elementInfo = {
             filePath: (_a = params.file) != null ? _a : null,
             line: (_b = params.line) != null ? _b : null,

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

@@ -19,12 +19,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { computed } from "vue";
-function truncate(value, maxLength) {
-  if (value.length <= maxLength) {
-    return value;
-  }
-  return `${value.slice(0, maxLength)}...`;
-}
+import { truncate } from "@vite-plugin-opencode-assistant/shared";
 function getElementKey(element, index) {
   var _a;
   if (element.filePath && element.line) {

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

@@ -1 +1 @@
-.opencode-iframe-container{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;margin-top:-42px}.opencode-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10;transition:opacity .3s ease}.opencode-loading-overlay.visible{display:flex}.opencode-loading-spinner{width:40px;height:40px;border:3px solid var(--oc-border-primary);border-top-color:var(--oc-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.opencode-loading-text{margin-top:12px;font-size:14px;color:var(--oc-text-placeholder)}.opencode-empty-state-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-bg-secondary);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:5;transition:opacity .3s ease;margin-top:42px}.opencode-empty-state-overlay.visible{display:flex}.opencode-empty-state-icon{color:var(--oc-text-placeholder);margin-bottom:16px}.opencode-empty-state-text{color:var(--oc-text-primary);font-size:16px;font-weight:500;margin-bottom:24px}.opencode-empty-state-btn{padding:10px 24px;border-radius:8px;border:none;background:var(--oc-primary);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:var(--oc-shadow-primary)}.opencode-empty-state-btn:hover{background:var(--oc-primary-hover);transform:translateY(-1px);box-shadow:var(--oc-shadow-primary-hover)}.opencode-empty-state-btn:active{transform:translateY(0)}.opencode-iframe{width:100%;height:100%;border:none}
+.opencode-iframe-container{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;margin-top:-42px}.opencode-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-overlay-bg);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10;transition:opacity .3s ease}.opencode-loading-overlay.visible{display:flex}.opencode-loading-spinner{width:40px;height:40px;border:3px solid var(--oc-border-primary);border-top-color:var(--oc-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.opencode-loading-text{margin-top:12px;font-size:14px;color:var(--oc-text-placeholder)}.opencode-error-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:15;margin-top:42px;display:none}.opencode-error-overlay.visible{display:flex}.opencode-empty-state-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--oc-bg-secondary);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:5;transition:opacity .3s ease;margin-top:42px}.opencode-empty-state-overlay.visible{display:flex}.opencode-empty-state-icon{color:var(--oc-text-placeholder);margin-bottom:16px}.opencode-empty-state-text{color:var(--oc-text-primary);font-size:16px;font-weight:500;margin-bottom:24px}.opencode-empty-state-btn{padding:10px 24px;border-radius:8px;border:none;background:var(--oc-primary);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:var(--oc-shadow-primary)}.opencode-empty-state-btn:hover{background:var(--oc-primary-hover);transform:translateY(-1px);box-shadow:var(--oc-shadow-primary-hover)}.opencode-empty-state-btn:active{transform:translateY(0)}.opencode-iframe{width:100%;height:100%;border:none}

package/es/open-code-widget/src/components/Frame.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 = {} & {
     'empty-state'?: (props: typeof __VLS_1) => any;
 } & {
     loading?: (props: typeof __VLS_3) => any;
 } & {
-    content?: (props: typeof __VLS_5) => any;
+    error?: (props: typeof __VLS_5) => any;
+} & {
+    content?: (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/Frame.vue.js

@@ -24,12 +24,14 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     __expose();
     const iframeRef = ref(null);
     const {
-      loading,
+      frameLoading,
       showEmptyState,
+      showError,
       iframeSource: iframeSrc,
       emptyStateText,
       emptyStateActionText,
       handleEmptyAction,
+      handleFrameLoaded,
       theme,
       resolvedTheme
     } = useOpenCodeWidgetContext();
@@ -55,6 +57,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       if (iframeRef.value) {
         iframeRef.value.addEventListener("load", () => {
           iframeReady.value = true;
+          handleFrameLoaded();
         });
       }
       window.addEventListener("message", handleIframeMessage);
@@ -62,7 +65,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     onUnmounted(() => {
       window.removeEventListener("message", handleIframeMessage);
     });
-    const __returned__ = { iframeRef, loading, showEmptyState, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, theme, resolvedTheme, iframeReady, sendMessageToIframe, syncIframeTheme, handleIframeMessage };
+    const __returned__ = { iframeRef, frameLoading, showEmptyState, showError, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded, theme, resolvedTheme, iframeReady, sendMessageToIframe, syncIframeTheme, handleIframeMessage };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -129,7 +132,7 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
     _createElementVNode(
       "div",
       {
-        class: _normalizeClass(["opencode-loading-overlay", { visible: $setup.loading }])
+        class: _normalizeClass(["opencode-loading-overlay", { visible: $setup.frameLoading }])
       },
       [
         _renderSlot(_ctx.$slots, "loading", {}, () => [
@@ -152,6 +155,17 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       2
       /* CLASS */
     ),
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(["opencode-error-overlay", { visible: $setup.showError }])
+      },
+      [
+        _renderSlot(_ctx.$slots, "error")
+      ],
+      2
+      /* CLASS */
+    ),
     _renderSlot(_ctx.$slots, "content", {}, () => [
       _createElementVNode("iframe", {
         ref: "iframeRef",

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: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)}}
+.opencode-select-mode-hint{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:10px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 6px 20px rgba(239,68,68,.5),0 0 0 3px rgba(239,68,68,.3);z-index:9999999;display:none;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.3)}.opencode-select-mode-hint.visible{display:flex;animation:slideDown .3s ease,pulseHint 2s ease-in-out infinite}.opencode-hint-shortcut{padding:4px 10px;background:rgba(255,255,255,.25);border-radius:6px;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.4)}@keyframes pulseHint{0%,to{box-shadow:0 6px 20px rgba(239,68,68,.5),0 0 0 3px rgba(239,68,68,.3)}50%{box-shadow:0 6px 20px rgba(239,68,68,.6),0 0 0 6px rgba(239,68,68,.4)}}

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

@@ -10,6 +10,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       sessionListCollapsed: collapsed,
       sessionItems: sessions,
       loadingSessionList,
+      showSessionListSkeleton,
       handleCreateSession,
       handleSelectSession,
       handleDeleteSession,
@@ -26,9 +27,10 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     });
     const showSkeleton = computed(() => {
       if (isAnimating.value) return true;
+      if (showSessionListSkeleton.value) return true;
       return false;
     });
-    const __returned__ = { collapsed, sessions, loadingSessionList, handleCreateSession, handleSelectSession, handleDeleteSession, sessionKey, isAnimating, get animTimer() {
+    const __returned__ = { collapsed, sessions, loadingSessionList, showSessionListSkeleton, handleCreateSession, handleSelectSession, handleDeleteSession, sessionKey, isAnimating, get animTimer() {
       return animTimer;
     }, set animTimer(v) {
       animTimer = v;

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

@@ -10,9 +10,11 @@ export interface OpenCodeWidgetContext {
     selectEnabled: Ref<boolean>;
     sessionListCollapsed: Ref<boolean>;
     sessionKey: Ref<string>;
-    loading: Ref<boolean>;
+    frameLoading: Ref<boolean>;
     loadingSessionList: Ref<boolean | undefined>;
+    showSessionListSkeleton: Ref<boolean>;
     showEmptyState: Ref<boolean>;
+    showError: Ref<boolean>;
     emptyStateText: Ref<string>;
     emptyStateActionText: Ref<string>;
     showClearAll: Ref<boolean>;
@@ -40,6 +42,7 @@ export interface OpenCodeWidgetContext {
         source: OpenCodeRemoveSelectedPayload["source"];
     }) => void;
     handleClearSelectedNodes: () => void;
+    handleFrameLoaded: () => void;
 }
 export declare function provideOpenCodeWidgetContext(context: OpenCodeWidgetContext): void;
 export declare function useOpenCodeWidgetContext(): OpenCodeWidgetContext;

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

@@ -1,5 +1,5 @@
 import type { OpenCodeWidgetProps } from "./types";
-declare var __VLS_4: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {}, __VLS_21: {}, __VLS_26: {}, __VLS_28: {}, __VLS_30: {};
+declare var __VLS_4: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {}, __VLS_21: {}, __VLS_26: {}, __VLS_28: {}, __VLS_30: {}, __VLS_32: {};
 type __VLS_Slots = {} & {
     'button-icon'?: (props: typeof __VLS_4) => any;
 } & {
@@ -15,69 +15,75 @@ type __VLS_Slots = {} & {
 } & {
     loading?: (props: typeof __VLS_28) => any;
 } & {
-    content?: (props: typeof __VLS_30) => any;
+    error?: (props: typeof __VLS_30) => any;
+} & {
+    content?: (props: typeof __VLS_32) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<OpenCodeWidgetProps, {
     showNotification: (message: string, duration?: number) => void;
     showConfirmDialog: (message: string) => Promise<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    toggle: (value: boolean) => any;
+    "create-session": () => any;
     "update:open": (value: boolean) => any;
+    "delete-session": (session: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetSession) => any;
     "update:selectMode": (value: boolean) => any;
     "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;
+    "update:selectedElements": (value: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[]) => any;
+    "update:theme": (value: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme) => 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;
-    "click-selected-node": (element: import("./types").OpenCodeSelectedElement) => any;
-    "remove-selected-node": (payload: import("./types").OpenCodeRemoveSelectedPayload) => any;
+    "toggle-theme": (value: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme) => any;
+    "select-session": (session: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetSession) => any;
+    "click-selected-node": (element: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement) => any;
+    "remove-selected-node": (payload: import("@vite-plugin-opencode-assistant/shared").OpenCodeRemoveSelectedPayload) => any;
     "clear-selected-nodes": () => any;
     "empty-action": () => any;
+    "frame-loaded": () => any;
 }, string, import("vue").PublicProps, Readonly<OpenCodeWidgetProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onToggle?: ((value: boolean) => any) | undefined;
+    "onCreate-session"?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onDelete-session"?: ((session: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetSession) => any) | undefined;
     "onUpdate:selectMode"?: ((value: boolean) => any) | undefined;
     "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;
+    "onUpdate:selectedElements"?: ((value: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[]) => any) | undefined;
+    "onUpdate:theme"?: ((value: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme) => 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;
-    "onClick-selected-node"?: ((element: import("./types").OpenCodeSelectedElement) => any) | undefined;
-    "onRemove-selected-node"?: ((payload: import("./types").OpenCodeRemoveSelectedPayload) => any) | undefined;
+    "onToggle-theme"?: ((value: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme) => any) | undefined;
+    "onSelect-session"?: ((session: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetSession) => any) | undefined;
+    "onClick-selected-node"?: ((element: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement) => any) | undefined;
+    "onRemove-selected-node"?: ((payload: import("@vite-plugin-opencode-assistant/shared").OpenCodeRemoveSelectedPayload) => any) | undefined;
     "onClear-selected-nodes"?: (() => any) | undefined;
     "onEmpty-action"?: (() => any) | undefined;
+    "onFrame-loaded"?: (() => any) | undefined;
 }>, {
-    title: string;
-    loading: boolean;
+    frameLoading: boolean;
     showEmptyState: boolean;
+    showError: boolean;
     emptyStateText: string;
     emptyStateActionText: string;
-    theme: import("./types").OpenCodeWidgetTheme;
+    theme: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetTheme;
     iframeSrc: string;
+    title: string;
     sessionListCollapsed: boolean;
     selectMode: boolean;
     selectEnabled: boolean;
     selectShortcutLabel: string;
     showClearAll: boolean;
+    showSessionListSkeleton: boolean;
     sessionKey: string;
-    sessions: import("./types").OpenCodeWidgetSession[];
+    sessions: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetSession[];
     open: boolean;
     hotkeyLabel: string;
-    position: import("./types").OpenCodeWidgetPosition;
+    position: import("@vite-plugin-opencode-assistant/shared").OpenCodeWidgetPosition;
     currentSessionId: string | null;
-    selectedElements: import("./types").OpenCodeSelectedElement[];
+    selectedElements: import("@vite-plugin-opencode-assistant/shared").OpenCodeSelectedElement[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -46,19 +46,21 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
     selectMode: { type: Boolean, required: false, default: false },
     sessionListCollapsed: { type: Boolean, required: false, default: true },
     sessionKey: { type: String, required: false, default: "id" },
-    loading: { type: Boolean, required: false, default: false },
+    frameLoading: { type: Boolean, required: false, default: false },
     loadingSessionList: { type: Boolean, required: false },
+    showSessionListSkeleton: { type: Boolean, required: false, default: false },
     showEmptyState: { type: Boolean, required: false, default: false },
+    showError: { type: Boolean, required: false, default: false },
+    emptyStateText: { type: String, required: false, default: "\u5F53\u524D\u9879\u76EE\u6682\u65E0\u4F1A\u8BDD" },
+    emptyStateActionText: { type: String, required: false, default: "\u7ACB\u5373\u521B\u5EFA" },
     iframeSrc: { type: String, required: false, default: "" },
     sessions: { type: Array, required: false, default: () => [] },
     currentSessionId: { type: [String, null], required: false, default: null },
     selectedElements: { type: Array, required: false, default: () => [] },
     showClearAll: { type: Boolean, required: false, default: true },
-    selectEnabled: { type: Boolean, required: false, default: true },
-    emptyStateText: { type: String, required: false, default: "\u5F53\u524D\u9879\u76EE\u6682\u65E0\u4F1A\u8BDD" },
-    emptyStateActionText: { type: String, required: false, default: "\u7ACB\u5373\u521B\u5EFA" }
+    selectEnabled: { type: Boolean, required: false, default: true }
   },
-  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"],
+  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", "frame-loaded"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -92,6 +94,9 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       dialogVisible.value = false;
       if (dialogResolve) dialogResolve(false);
     };
+    const handleFrameLoaded = () => {
+      emit("frame-loaded");
+    };
     __expose({
       showNotification,
       showConfirmDialog
@@ -204,9 +209,11 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       selectEnabled: toRef(props, "selectEnabled"),
       sessionListCollapsed: localSessionListCollapsed,
       sessionKey: toRef(props, "sessionKey"),
-      loading: toRef(props, "loading"),
+      frameLoading: toRef(props, "frameLoading"),
       loadingSessionList: toRef(props, "loadingSessionList"),
+      showSessionListSkeleton: toRef(props, "showSessionListSkeleton"),
       showEmptyState: toRef(props, "showEmptyState"),
+      showError: toRef(props, "showError"),
       emptyStateText: toRef(props, "emptyStateText"),
       emptyStateActionText: toRef(props, "emptyStateActionText"),
       showClearAll: toRef(props, "showClearAll"),
@@ -229,7 +236,8 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       handleToggleSelectMode,
       handleClickSelectedNode,
       handleRemoveSelectedNode: (payload) => handleRemoveSelectedNode(payload.item, payload.index, payload.source),
-      handleClearSelectedNodes
+      handleClearSelectedNodes,
+      handleFrameLoaded
     });
     const __returned__ = { props, emit, slots, notificationMessage, notificationVisible, get notificationTimer() {
       return notificationTimer;
@@ -239,7 +247,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent(__spreadProps(__spreadValue
       return dialogResolve;
     }, set dialogResolve(v) {
       dialogResolve = v;
-    }, 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 };
+    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, handleFrameLoaded, 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__;
   }
@@ -373,12 +381,19 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
                   ]),
                   key: "1"
                 } : void 0,
+                $setup.slots.error ? {
+                  name: "error",
+                  fn: _withCtx(() => [
+                    _renderSlot(_ctx.$slots, "error")
+                  ]),
+                  key: "2"
+                } : void 0,
                 $setup.slots.content ? {
                   name: "content",
                   fn: _withCtx(() => [
                     _renderSlot(_ctx.$slots, "content")
                   ]),
-                  key: "2"
+                  key: "3"
                 } : void 0
               ]),
               1024

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

@@ -1,79 +1,3 @@
-export type OpenCodeWidgetPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
-export type OpenCodeWidgetTheme = "light" | "dark" | "auto";
-export interface OpenCodeWidgetSession {
-    id: string;
-    title?: string;
-    updatedAt?: string | number | Date;
-    meta?: string;
-    directory?: string;
-}
-export interface OpenCodeSelectedElement {
-    filePath: string | null;
-    line: number | null;
-    column: number | null;
-    innerText: string;
-    description: string;
-}
-export interface OpenCodeWidgetProps {
-    position?: OpenCodeWidgetPosition;
-    open?: boolean;
-    theme?: OpenCodeWidgetTheme;
-    title?: string;
-    hotkeyLabel?: string;
-    selectShortcutLabel?: string;
-    selectMode?: boolean;
-    sessionListCollapsed?: boolean;
-    sessionKey?: string;
-    loading?: boolean;
-    loadingSessionList?: boolean;
-    showEmptyState?: boolean;
-    iframeSrc?: string;
-    sessions?: OpenCodeWidgetSession[];
-    currentSessionId?: string | null;
-    selectedElements?: OpenCodeSelectedElement[];
-    showClearAll?: boolean;
-    selectEnabled?: boolean;
-    emptyStateText?: string;
-    emptyStateActionText?: string;
-}
-export type OpenCodeWidgetEmits = {
-    (e: "update:open", value: boolean): void;
-    (e: "update:selectMode", value: boolean): void;
-    (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;
-    (e: "click-selected-node", element: OpenCodeSelectedElement): void;
-    (e: "remove-selected-node", payload: OpenCodeRemoveSelectedPayload): void;
-    (e: "clear-selected-nodes"): void;
-    (e: "empty-action"): void;
-};
-export interface OpenCodeRemoveSelectedPayload {
-    element: OpenCodeSelectedElement;
-    index: number;
-    source: "panel" | "bubble";
-}
-export interface OpenCodeWidgetSessionItem {
-    key: string;
-    id: string;
-    title: string;
-    meta: string;
-    active: boolean;
-    session: OpenCodeWidgetSession;
-    [key: string]: any;
-}
-export interface OpenCodeSelectedElementItem {
-    key: string;
-    description: string;
-    bubbleFileText: string;
-    panelFileText: string;
-    element: OpenCodeSelectedElement;
-}
+export type { OpenCodeWidgetPosition, OpenCodeWidgetTheme, OpenCodeWidgetSession, OpenCodeSelectedElement, OpenCodeRemoveSelectedPayload, OpenCodeWidgetSessionItem, OpenCodeSelectedElementItem, OpenCodeWidgetProps, OpenCodeWidgetEmits, } from "@vite-plugin-opencode-assistant/shared";
+export type OpenCodeWidgetPositionLocal = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+export type OpenCodeWidgetThemeLocal = "light" | "dark" | "auto";