@aipanel/ui 1.2.0-beta.0

package/es/AI-panel-widget/composables/use-inspector.d.ts

@@ -0,0 +1,52 @@
+import { type Ref } from "vue";
+import type { AIPanelSelectedElement } from "../src/types";
+interface VueInspector {
+    getTargetNode: (e: MouseEvent) => {
+        targetNode: Element | null;
+        params: {
+            file?: string;
+            line?: number;
+            column?: number;
+        } | null;
+    };
+    handleClick: (e: MouseEvent) => void;
+    enable: () => void;
+    disable: () => void;
+    __aipanel_hooked?: boolean;
+}
+declare global {
+    interface Window {
+        __VUE_INSPECTOR__?: VueInspector;
+    }
+}
+interface UseInspectorOptions {
+    selectMode: Ref<boolean>;
+    onAddSelectedNode: (element: AIPanelSelectedElement) => void;
+    onExitSelectMode: () => void;
+}
+export declare function useInspector(options: UseInspectorOptions): {
+    highlightVisible: Ref<boolean, boolean>;
+    highlightStyle: Ref<Record<string, string>, Record<string, string>>;
+    tooltipVisible: Ref<boolean, boolean>;
+    tooltipStyle: Ref<{
+        top: string;
+        left: string;
+    }, {
+        top: string;
+        left: string;
+    } | {
+        top: string;
+        left: string;
+    }>;
+    tooltipContent: Ref<{
+        description: string;
+        fileInfo: string;
+    }, {
+        description: string;
+        fileInfo: string;
+    } | {
+        description: string;
+        fileInfo: string;
+    }>;
+};
+export {};

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

@@ -0,0 +1,437 @@
+import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
+import { truncate } from "@aipanel/core";
+import getCssSelector from "css-selector-generator";
+const IGNORE_SELECTORS = [
+  "#vue-inspector-container",
+  ".aipanel-widget",
+  ".aipanel-element-highlight",
+  ".aipanel-element-tooltip",
+  ".aipanel-select-mode-hint",
+  ".floating-bubble"
+];
+const IGNORE_ATTRIBUTE = "data-v-inspector-ignore";
+const KEY_PROPS_DATA = "__v_inspector";
+const KEY_DATA = "data-v-inspector";
+function getDirectText(element) {
+  let text = "";
+  for (let i = 0; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i];
+    if (child.nodeType === Node.TEXT_NODE) {
+      text += child.textContent || "";
+    }
+  }
+  return text.trim();
+}
+const DYNAMIC_ID_PATTERN = /^(?:el-|:r[0-9]+:|radix-|uid-|ts-|uuid-|id-[a-f0-9]{4,}|.*[0-9]{4,}.*|.*-[a-f0-9]{6,}$)/i;
+const STATE_CLASS_PATTERN = /^(?:hover|active|focus|focus-visible|focus-within|disabled|enabled|checked|selected|open|closed|loading|error|success|warning|hidden|visible|show|hide|current|expanded|collapsed|pressed|dragging|droppable|sortable|placeholder|transition|enter|leave|appear|move)$/i;
+const STATE_CLASS_PREFIX_PATTERN = /^(?:is-|has-|was-|are-|can-|should-|will-|did-|does-|on-|off-|in-|out-|at-|to-|from-)/i;
+function isDynamicId(id) {
+  if (!id) return false;
+  if (DYNAMIC_ID_PATTERN.test(id)) {
+    return true;
+  }
+  const digitCount = (id.match(/\d/g) || []).length;
+  const letterCount = (id.match(/[a-zA-Z]/g) || []).length;
+  if (digitCount > letterCount && digitCount >= 3) {
+    return true;
+  }
+  const dashParts = id.split("-");
+  if (dashParts.length >= 3) {
+    const lastPart = dashParts[dashParts.length - 1];
+    if (/^\d+$/.test(lastPart) || /^[a-f0-9]{4,}$/i.test(lastPart)) {
+      return true;
+    }
+  }
+  return false;
+}
+function isStateClass(className) {
+  if (!className) return false;
+  if (STATE_CLASS_PATTERN.test(className)) {
+    return true;
+  }
+  if (STATE_CLASS_PREFIX_PATTERN.test(className)) {
+    return true;
+  }
+  if (className.includes("-active") || className.includes("-hover") || className.includes("-focus")) {
+    return true;
+  }
+  if (/^(?:router-link|nuxt-link)/.test(className)) {
+    return true;
+  }
+  return false;
+}
+function getElementDescription(element) {
+  return getCssSelector(element, {
+    selectors: ["id", "class", "tag", "nthchild"],
+    combineWithinSelector: true,
+    combineBetweenSelectors: true,
+    maxCombinations: 100,
+    maxCandidates: 100,
+    blacklist: [
+      (selectorValue) => {
+        const idMatch = selectorValue.match(/^#(.+)$/);
+        if (idMatch) {
+          return isDynamicId(idMatch[1]);
+        }
+        const classMatch = selectorValue.match(/^\.([a-zA-Z_-][\w-]*)$/);
+        if (classMatch) {
+          return isStateClass(classMatch[1]);
+        }
+        return false;
+      }
+    ]
+  });
+}
+function getFileInfoFromVueInstance(element) {
+  const vue3Instance = element.__vueParentComponent;
+  if (vue3Instance) {
+    let current = vue3Instance;
+    while (current) {
+      const file = current.type?.__file || current.vnode?.type?.__file;
+      if (file) {
+        return { file, line: null, column: null };
+      }
+      current = current.parent;
+    }
+  }
+  const vue2Instance = element.__vue__;
+  if (vue2Instance) {
+    let current = vue2Instance;
+    while (current) {
+      const file = current.$options?.__file;
+      if (file) {
+        return { file, line: null, column: null };
+      }
+      current = current.$parent;
+    }
+  }
+  return null;
+}
+function shouldIgnoreElement(el) {
+  if (el.hasAttribute(IGNORE_ATTRIBUTE)) return true;
+  for (const selector of IGNORE_SELECTORS) {
+    if (el.closest(selector)) return true;
+  }
+  return false;
+}
+function getDataFromElement(el) {
+  const vnodeData = el.__vnode?.props?.[KEY_PROPS_DATA];
+  if (vnodeData) return vnodeData;
+  const ctxVNode = el.__vnode?.ctx?.vnode;
+  if (ctxVNode?.el === el) {
+    const ctxData = ctxVNode.props?.[KEY_PROPS_DATA];
+    if (ctxData) return ctxData;
+  }
+  const vueInstance = el.__vueParentComponent;
+  let currentParent = vueInstance?.parent;
+  while (currentParent) {
+    if (currentParent.vnode?.el === el) {
+      const parentData = currentParent.vnode.props?.[KEY_PROPS_DATA];
+      if (parentData) return parentData;
+    }
+    currentParent = currentParent.parent;
+  }
+  const attr = el.getAttribute(KEY_DATA);
+  return attr ?? void 0;
+}
+function findInspectorFileInfo(element) {
+  let current = element;
+  while (current) {
+    if (shouldIgnoreElement(current)) {
+      current = current.parentElement;
+      continue;
+    }
+    const data = getDataFromElement(current);
+    if (data) {
+      const splitRE = /(.+):([\d]+):([\d]+)$/;
+      const match = data.match(splitRE);
+      if (match) {
+        return {
+          file: match[1],
+          line: parseInt(match[2], 10),
+          column: parseInt(match[3], 10)
+        };
+      }
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function mergeFileInfo(inspectorFileInfo, vueFileInfo) {
+  if (!inspectorFileInfo?.file && !vueFileInfo?.file) {
+    return { file: null, line: null, column: null };
+  }
+  const isNodeModules = (path) => path.includes("node_modules");
+  if (inspectorFileInfo?.file && vueFileInfo?.file) {
+    if (!isNodeModules(inspectorFileInfo.file)) {
+      return inspectorFileInfo;
+    } else if (!isNodeModules(vueFileInfo.file)) {
+      return vueFileInfo;
+    } else {
+      return inspectorFileInfo;
+    }
+  } else if (inspectorFileInfo?.file) {
+    return inspectorFileInfo;
+  } else {
+    return vueFileInfo;
+  }
+}
+function getTargetElement(e) {
+  if (!e.target || !(e.target instanceof Element)) return null;
+  const el = e.target;
+  if (shouldIgnoreElement(el)) return null;
+  return el;
+}
+function getFileInfo(e, element) {
+  let inspectorFileInfo = null;
+  if (element) {
+    inspectorFileInfo = findInspectorFileInfo(element);
+  }
+  const vueFileInfo = element ? getFileInfoFromVueInstance(element) : null;
+  return mergeFileInfo(inspectorFileInfo, vueFileInfo);
+}
+function useInspector(options) {
+  const highlightVisible = ref(false);
+  const highlightStyle = ref({
+    top: "0px",
+    left: "0px",
+    width: "0px",
+    height: "0px"
+  });
+  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)";
+  function setPointerEventsNone(elements) {
+    elements.forEach((el) => {
+      if (el) el.style.pointerEvents = "none";
+    });
+  }
+  function setPointerEventsAuto(elements) {
+    elements.forEach((el) => {
+      if (el) el.style.pointerEvents = "";
+    });
+  }
+  function handleMouseMoveCore(e) {
+    if (!options.selectMode.value) return;
+    const highlight = document.querySelector(".aipanel-element-highlight");
+    const tooltip = document.querySelector(".aipanel-element-tooltip");
+    const selectHint = document.querySelector(".aipanel-select-mode-hint");
+    const floatingBubble = document.querySelector(".floating-bubble");
+    const uiElements = [highlight, tooltip, selectHint, floatingBubble];
+    setPointerEventsNone(uiElements);
+    const elementToHighlight = getTargetElement(e);
+    const fileInfo = getFileInfo(e, elementToHighlight);
+    setPointerEventsAuto(uiElements);
+    if (elementToHighlight) {
+      const widget = document.querySelector(".aipanel-widget");
+      if (widget) {
+        const style = getComputedStyle(widget);
+        currentPrimary = style.getPropertyValue("--ap-primary").trim() || currentPrimary;
+        currentPrimaryBg = style.getPropertyValue("--ap-primary-bg").trim() || currentPrimaryBg;
+      }
+      const description = getElementDescription(elementToHighlight);
+      const fileName = fileInfo.file ? fileInfo.file.split("/").pop() : "";
+      let lineInfo = "";
+      if (fileInfo.line) {
+        lineInfo = `:${fileInfo.line}`;
+        if (fileInfo.column) {
+          lineInfo += `:${fileInfo.column}`;
+        }
+      }
+      const fileInfoText = fileName ? `${fileName}${lineInfo}` : "";
+      tooltipContent.value = {
+        description,
+        fileInfo: fileInfoText
+      };
+      const rect = elementToHighlight.getBoundingClientRect();
+      const newTop = `${rect.top}px`;
+      const newLeft = `${rect.left}px`;
+      const newWidth = `${rect.width}px`;
+      const newHeight = `${rect.height}px`;
+      if (highlightStyle.value.top !== newTop || highlightStyle.value.left !== newLeft || highlightStyle.value.width !== newWidth || highlightStyle.value.height !== newHeight) {
+        highlightStyle.value = {
+          top: newTop,
+          left: newLeft,
+          width: newWidth,
+          height: newHeight,
+          border: `2px solid ${currentPrimary}`,
+          background: currentPrimaryBg
+        };
+      }
+      highlightVisible.value = true;
+      tooltipVisible.value = true;
+      void nextTick(() => {
+        const tooltipEl = document.querySelector(".aipanel-element-tooltip");
+        if (!tooltipEl) return;
+        const tooltipWidth = tooltipEl.offsetWidth;
+        const tooltipHeight = tooltipEl.offsetHeight;
+        if (tooltipWidth === 0 || tooltipHeight === 0) return;
+        const margin = 10;
+        const gap = 4;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const clampLeft = (left) => Math.max(margin, Math.min(left, viewportWidth - tooltipWidth - margin));
+        const clampTop = (top) => Math.max(margin, Math.min(top, viewportHeight - tooltipHeight - margin));
+        const candidateTop = rect.top - tooltipHeight - gap;
+        const candidateBottom = rect.bottom + gap;
+        const candidateRight = rect.right + gap;
+        const candidateLeft = rect.left - tooltipWidth - gap;
+        const verticalCenter = rect.top + (rect.height - tooltipHeight) / 2;
+        let tooltipTop = 0;
+        let tooltipLeft = 0;
+        let placed = false;
+        if (candidateTop >= margin) {
+          tooltipTop = candidateTop;
+          tooltipLeft = clampLeft(rect.left);
+          placed = true;
+        }
+        if (!placed && candidateBottom + tooltipHeight <= viewportHeight - margin) {
+          tooltipTop = candidateBottom;
+          tooltipLeft = clampLeft(rect.left);
+          placed = true;
+        }
+        if (!placed && candidateRight + tooltipWidth <= viewportWidth - margin) {
+          tooltipLeft = candidateRight;
+          tooltipTop = clampTop(verticalCenter);
+          placed = true;
+        }
+        if (!placed && candidateLeft >= margin) {
+          tooltipLeft = candidateLeft;
+          tooltipTop = clampTop(verticalCenter);
+          placed = true;
+        }
+        if (!placed) {
+          const corners = [
+            { top: margin, left: margin },
+            { top: margin, left: viewportWidth - tooltipWidth - margin },
+            { top: viewportHeight - tooltipHeight - margin, left: margin },
+            {
+              top: viewportHeight - tooltipHeight - margin,
+              left: viewportWidth - tooltipWidth - margin
+            }
+          ];
+          for (const corner of corners) {
+            const tooltipRight = corner.left + tooltipWidth;
+            const tooltipBottom = corner.top + tooltipHeight;
+            const overlaps = tooltipRight <= rect.left || rect.right <= corner.left || tooltipBottom <= rect.top || rect.bottom <= corner.top;
+            if (overlaps) {
+              tooltipTop = corner.top;
+              tooltipLeft = corner.left;
+              placed = true;
+              break;
+            }
+          }
+          if (!placed) {
+            tooltipTop = margin;
+            tooltipLeft = margin;
+          }
+        }
+        const newTooltipTop = `${tooltipTop}px`;
+        const newTooltipLeft = `${tooltipLeft}px`;
+        if (tooltipStyle.value.top !== newTooltipTop || tooltipStyle.value.left !== newTooltipLeft) {
+          tooltipStyle.value = {
+            top: newTooltipTop,
+            left: newTooltipLeft
+          };
+        }
+      });
+    } else {
+      highlightVisible.value = false;
+      tooltipVisible.value = false;
+    }
+  }
+  const handleMouseMove = handleMouseMoveCore;
+  function setupInspectorHook() {
+    const inspector = window.__VUE_INSPECTOR__;
+    if (!inspector || inspector.__aipanel_hooked) return;
+    const originalHandleClick = inspector.handleClick.bind(inspector);
+    inspector.handleClick = function(e) {
+      if (options.selectMode.value) {
+        const targetEl = e.target instanceof Element ? e.target : null;
+        if (targetEl && targetEl.closest(".aipanel-widget")) {
+          return originalHandleClick.call(inspector, e);
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const elementToSelect = getTargetElement(e);
+        const fileInfo = getFileInfo(e, elementToSelect);
+        if (elementToSelect) {
+          const innerText = getDirectText(elementToSelect);
+          const description = getElementDescription(elementToSelect);
+          const elementInfo = {
+            filePath: fileInfo.file,
+            line: fileInfo.line,
+            column: fileInfo.column,
+            innerText: truncate(innerText, 200),
+            description
+          };
+          options.onAddSelectedNode(elementInfo);
+        }
+        return;
+      }
+      return originalHandleClick.call(inspector, e);
+    };
+    inspector.__aipanel_hooked = true;
+  }
+  function handleKeydown(e) {
+    if (e.key === "Escape" && options.selectMode.value) {
+      e.preventDefault();
+      e.stopPropagation();
+      options.onExitSelectMode();
+    }
+  }
+  watch(options.selectMode, (newVal) => {
+    const inspector = window.__VUE_INSPECTOR__;
+    if (newVal) {
+      if (inspector) {
+        inspector.enable();
+      }
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("keydown", handleKeydown, true);
+    } else {
+      if (inspector) {
+        inspector.disable();
+      }
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("keydown", handleKeydown, true);
+      highlightVisible.value = false;
+      tooltipVisible.value = false;
+    }
+  });
+  onMounted(() => {
+    if (window.__VUE_INSPECTOR__) {
+      setupInspectorHook();
+    } else {
+      inspectorCheckTimer = window.setInterval(() => {
+        if (window.__VUE_INSPECTOR__) {
+          setupInspectorHook();
+          if (inspectorCheckTimer) {
+            window.clearInterval(inspectorCheckTimer);
+            inspectorCheckTimer = null;
+          }
+        }
+      }, INSPECTOR_CHECK_INTERVAL);
+    }
+  });
+  onUnmounted(() => {
+    if (inspectorCheckTimer) {
+      window.clearInterval(inspectorCheckTimer);
+    }
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("keydown", handleKeydown, true);
+  });
+  return {
+    highlightVisible,
+    highlightStyle,
+    tooltipVisible,
+    tooltipStyle,
+    tooltipContent
+  };
+}
+export {
+  useInspector
+};

package/es/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/es/AI-panel-widget/composables/use-persist-state.mjs

@@ -0,0 +1,83 @@
+import { watch, onMounted } from "vue";
+import { createLogger } from "@aipanel/core";
+const log = 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);
+  }
+  onMounted(() => {
+    restoreState();
+    watch(
+      watchers,
+      () => {
+        persistState();
+      },
+      { deep: true }
+    );
+  });
+  return {
+    restoreState,
+    persistState
+  };
+}
+export {
+  usePersistState
+};

package/es/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;
+};