@aipanel/ui 1.2.0-beta.0

package/lib/AI-panel-widget/src/components/FloatingBubble/FloatingBubble-sfc.css

@@ -0,0 +1 @@
+.floating-bubble{position:fixed;top:0;left:0;z-index:999999;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;will-change:transform}.floating-bubble:active{cursor:grabbing}body.floating-bubble-dragging *{pointer-events:none!important}body.floating-bubble-dragging .floating-bubble,body.floating-bubble-dragging .floating-bubble *{pointer-events:auto!important}

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

@@ -0,0 +1,330 @@
+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 FloatingBubble_vue_exports = {};
+__export(FloatingBubble_vue_exports, {
+  default: () => FloatingBubble_vue_default
+});
+module.exports = __toCommonJS(FloatingBubble_vue_exports);
+var import_FloatingBubble_sfc = require("./FloatingBubble-sfc.css");
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
+  ...{
+    name: "FloatingBubble"
+  },
+  __name: "FloatingBubble",
+  props: {
+    offset: { type: Object, required: false, default: void 0 },
+    axis: { type: String, required: false, default: "xy" },
+    magnetic: { type: String, required: false, default: void 0 },
+    gap: { type: [Number, Object], required: false, default: 24 },
+    teleport: { type: null, required: false, default: "body" }
+  },
+  emits: ["update:offset", "click", "offset-change", "drag-start", "drag-end"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const rootRef = (0, import_vue2.ref)(null);
+    const state = (0, import_vue2.ref)({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    const isObject = (val) => val !== null && typeof val === "object";
+    const gapX = (0, import_vue2.computed)(
+      () => isObject(props.gap) ? props.gap.x : props.gap
+    );
+    const gapY = (0, import_vue2.computed)(
+      () => isObject(props.gap) ? props.gap.y : props.gap
+    );
+    const windowWidth = (0, import_vue2.ref)(typeof window !== "undefined" ? window.innerWidth : 0);
+    const windowHeight = (0, import_vue2.ref)(typeof window !== "undefined" ? window.innerHeight : 0);
+    const boundary = (0, import_vue2.computed)(() => ({
+      top: gapY.value,
+      right: windowWidth.value - state.value.width - gapX.value,
+      bottom: windowHeight.value - state.value.height - gapY.value,
+      left: gapX.value
+    }));
+    const closest = (arr, target) => {
+      return arr.reduce(
+        (pre, cur) => Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur
+      );
+    };
+    const applyMagnetic = () => {
+      if (props.magnetic === "x") {
+        if (magneticSide.value === "left") {
+          state.value.x = boundary.value.left;
+        } else if (magneticSide.value === "right") {
+          state.value.x = boundary.value.right;
+        } else {
+          const nextX = closest(
+            [boundary.value.left, boundary.value.right],
+            state.value.x
+          );
+          state.value.x = nextX;
+          magneticSide.value = nextX === boundary.value.left ? "left" : "right";
+        }
+      }
+      if (props.magnetic === "y") {
+        const nextY = closest(
+          [boundary.value.top, boundary.value.bottom],
+          state.value.y
+        );
+        state.value.y = nextY;
+      }
+    };
+    const dragging = (0, import_vue2.ref)(false);
+    const initialized = (0, import_vue2.ref)(false);
+    const magneticSide = (0, import_vue2.ref)(null);
+    const rootStyle = (0, import_vue2.computed)(() => {
+      const style = {};
+      const x = `${state.value.x}px`;
+      const y = `${state.value.y}px`;
+      style.transform = `translate3d(${x}, ${y}, 0)`;
+      if (dragging.value || !initialized.value) {
+        style.transition = "none";
+      } else {
+        style.transition = "transform 0.3s ease";
+      }
+      return style;
+    });
+    const updateState = () => {
+      if (!rootRef.value || typeof window === "undefined") return;
+      const rect = rootRef.value.getBoundingClientRect();
+      const { offset } = props;
+      let x = offset ? offset.x : windowWidth.value - rect.width - gapX.value;
+      let y = offset ? offset.y : windowHeight.value - rect.height - gapY.value;
+      const maxX = windowWidth.value - rect.width - gapX.value;
+      const maxY = windowHeight.value - rect.height - gapY.value;
+      if (x < gapX.value) x = gapX.value;
+      if (x > maxX) x = maxX;
+      if (y < gapY.value) y = gapY.value;
+      if (y > maxY) y = maxY;
+      const oldX = state.value.x;
+      const oldY = state.value.y;
+      state.value = {
+        x,
+        y,
+        width: rect.width,
+        height: rect.height
+      };
+      if (!dragging.value) {
+        if (props.magnetic === "x" && magneticSide.value) {
+          if (magneticSide.value === "left") {
+            state.value.x = boundary.value.left;
+          } else {
+            state.value.x = boundary.value.right;
+          }
+        } else {
+          applyMagnetic();
+        }
+        if (state.value.x !== oldX || state.value.y !== oldY) {
+          const offset2 = { x: state.value.x, y: state.value.y };
+          emit("update:offset", offset2);
+          emit("offset-change", offset2);
+        }
+      }
+    };
+    const touch = {
+      startX: (0, import_vue2.ref)(0),
+      startY: (0, import_vue2.ref)(0),
+      deltaX: (0, import_vue2.ref)(0),
+      deltaY: (0, import_vue2.ref)(0),
+      offsetX: (0, import_vue2.ref)(0),
+      offsetY: (0, import_vue2.ref)(0),
+      isTap: (0, import_vue2.ref)(true),
+      start(e) {
+        this.startX.value = "touches" in e ? e.touches[0].clientX : e.clientX;
+        this.startY.value = "touches" in e ? e.touches[0].clientY : e.clientY;
+        this.deltaX.value = 0;
+        this.deltaY.value = 0;
+        this.offsetX.value = 0;
+        this.offsetY.value = 0;
+        this.isTap.value = true;
+      },
+      move(e) {
+        const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+        const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+        this.deltaX.value = clientX - this.startX.value;
+        this.deltaY.value = clientY - this.startY.value;
+        this.offsetX.value = Math.abs(this.deltaX.value);
+        this.offsetY.value = Math.abs(this.deltaY.value);
+        const TAP_OFFSET = 5;
+        if (this.isTap.value && (this.offsetX.value > TAP_OFFSET || this.offsetY.value > TAP_OFFSET)) {
+          this.isTap.value = false;
+        }
+      }
+    };
+    let prevX = 0;
+    let prevY = 0;
+    const onTouchStart = (e) => {
+      touch.start(e);
+      dragging.value = true;
+      prevX = state.value.x;
+      prevY = state.value.y;
+      document.body.classList.add("floating-bubble-dragging");
+      if (!("touches" in e)) {
+        window.addEventListener("mousemove", onTouchMove, { passive: false });
+        window.addEventListener("mouseup", onTouchEnd);
+      }
+    };
+    const onTouchMove = (e) => {
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      const wasTap = touch.isTap.value;
+      touch.move(e);
+      if (wasTap && !touch.isTap.value) {
+        emit("drag-start");
+      }
+      if (props.axis === "lock") return;
+      if (!touch.isTap.value) {
+        if (props.axis === "x" || props.axis === "xy") {
+          let nextX = prevX + touch.deltaX.value;
+          if (nextX < boundary.value.left) nextX = boundary.value.left;
+          if (nextX > boundary.value.right) nextX = boundary.value.right;
+          state.value.x = nextX;
+        }
+        if (props.axis === "y" || props.axis === "xy") {
+          let nextY = prevY + touch.deltaY.value;
+          if (nextY < boundary.value.top) nextY = boundary.value.top;
+          if (nextY > boundary.value.bottom) nextY = boundary.value.bottom;
+          state.value.y = nextY;
+        }
+        const offset = { x: state.value.x, y: state.value.y };
+        emit("update:offset", offset);
+      }
+    };
+    const onTouchEnd = (e) => {
+      dragging.value = false;
+      document.body.classList.remove("floating-bubble-dragging");
+      if (e && !("touches" in e) && e.type === "mouseup") {
+        window.removeEventListener("mousemove", onTouchMove);
+        window.removeEventListener("mouseup", onTouchEnd);
+      }
+      requestAnimationFrame(() => {
+        if (props.magnetic === "x" && !touch.isTap.value) {
+          const centerX = state.value.x + state.value.width / 2;
+          const windowCenterX = windowWidth.value / 2;
+          magneticSide.value = centerX < windowCenterX ? "left" : "right";
+        }
+        applyMagnetic();
+        if (!touch.isTap.value) {
+          emit("drag-end");
+          const offset = { x: state.value.x, y: state.value.y };
+          emit("update:offset", offset);
+          if (prevX !== offset.x || prevY !== offset.y) {
+            emit("offset-change", offset);
+          }
+        }
+      });
+    };
+    const onClick = (e) => {
+      if (touch.isTap.value) {
+        emit("click", e);
+      } else {
+        e.stopPropagation();
+      }
+    };
+    const handleResize = () => {
+      if (typeof window !== "undefined") {
+        windowWidth.value = window.innerWidth;
+        windowHeight.value = window.innerHeight;
+      }
+    };
+    (0, import_vue2.onMounted)(() => {
+      updateState();
+      requestAnimationFrame(() => {
+        initialized.value = true;
+      });
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", handleResize);
+      }
+      if (rootRef.value) {
+        rootRef.value.addEventListener("touchmove", onTouchMove, {
+          passive: false
+        });
+      }
+    });
+    (0, import_vue2.onUnmounted)(() => {
+      document.body.classList.remove("floating-bubble-dragging");
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("mousemove", onTouchMove);
+        window.removeEventListener("mouseup", onTouchEnd);
+      }
+      if (rootRef.value) {
+        rootRef.value.removeEventListener("touchmove", onTouchMove);
+      }
+    });
+    (0, import_vue2.watch)(
+      [windowWidth, windowHeight, gapX, gapY],
+      updateState
+    );
+    (0, import_vue2.watch)(
+      () => props.offset,
+      (newOffset) => {
+        if (newOffset) {
+          magneticSide.value = null;
+        }
+        updateState();
+      },
+      { deep: true }
+    );
+    __expose({
+      offset: (0, import_vue2.computed)(() => ({ x: state.value.x, y: state.value.y }))
+    });
+    const __returned__ = { props, emit, rootRef, state, isObject, gapX, gapY, windowWidth, windowHeight, boundary, closest, applyMagnetic, dragging, initialized, magneticSide, rootStyle, updateState, touch, get prevX() {
+      return prevX;
+    }, set prevX(v) {
+      prevX = v;
+    }, get prevY() {
+      return prevY;
+    }, set prevY(v) {
+      prevY = v;
+    }, onTouchStart, onTouchMove, onTouchEnd, onClick, handleResize };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0, import_vue3.openBlock)(), (0, import_vue3.createBlock)(import_vue3.Teleport, { to: $props.teleport }, [
+    (0, import_vue3.createElementVNode)(
+      "div",
+      {
+        ref: "rootRef",
+        class: "floating-bubble",
+        style: (0, import_vue3.normalizeStyle)($setup.rootStyle),
+        onTouchstartPassive: $setup.onTouchStart,
+        onTouchend: $setup.onTouchEnd,
+        onTouchcancel: $setup.onTouchEnd,
+        onMousedown: $setup.onTouchStart,
+        onClickCapture: $setup.onClick
+      },
+      [
+        (0, import_vue3.renderSlot)(_ctx.$slots, "default")
+      ],
+      36
+      /* STYLE, NEED_HYDRATION */
+    )
+  ], 8, ["to"]);
+}
+__vue_sfc__.render = __vue_render__;
+var FloatingBubble_vue_default = __vue_sfc__;

package/lib/AI-panel-widget/src/components/FloatingBubble/FloatingBubble.vue.d.ts

@@ -0,0 +1,44 @@
+import type { FloatingBubbleAxis, FloatingBubbleMagnetic, FloatingBubbleOffset, FloatingBubbleGap } from "./types";
+type __VLS_Props = {
+    offset?: FloatingBubbleOffset;
+    axis?: FloatingBubbleAxis;
+    magnetic?: FloatingBubbleMagnetic;
+    gap?: number | FloatingBubbleGap;
+    teleport?: string | Element;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    offset: import("vue").ComputedRef<{
+        x: number;
+        y: number;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:offset": (value: FloatingBubbleOffset) => any;
+    click: (event: MouseEvent) => any;
+    "offset-change": (offset: FloatingBubbleOffset) => any;
+    "drag-start": () => any;
+    "drag-end": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:offset"?: ((value: FloatingBubbleOffset) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onOffset-change"?: ((offset: FloatingBubbleOffset) => any) | undefined;
+    "onDrag-start"?: (() => any) | undefined;
+    "onDrag-end"?: (() => any) | undefined;
+}>, {
+    offset: FloatingBubbleOffset;
+    axis: FloatingBubbleAxis;
+    magnetic: FloatingBubbleMagnetic;
+    gap: number | FloatingBubbleGap;
+    teleport: string | Element;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/AI-panel-widget/src/components/FloatingBubble/index.cjs

@@ -0,0 +1,35 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FloatingBubble_exports = {};
+__export(FloatingBubble_exports, {
+  FloatingBubble: () => import_FloatingBubble_vue.default
+});
+module.exports = __toCommonJS(FloatingBubble_exports);
+var import_FloatingBubble_vue = __toESM(require("./FloatingBubble.vue.cjs"));
+__reExport(FloatingBubble_exports, require("./types.cjs"), module.exports);

package/lib/AI-panel-widget/src/components/FloatingBubble/index.d.ts

@@ -0,0 +1,3 @@
+import FloatingBubble from "./FloatingBubble.vue";
+export { FloatingBubble };
+export * from "./types";

package/lib/AI-panel-widget/src/components/FloatingBubble/types.cjs

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 types_exports = {};
+module.exports = __toCommonJS(types_exports);

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

@@ -0,0 +1,24 @@
+export type FloatingBubbleAxis = "x" | "y" | "xy" | "lock";
+export type FloatingBubbleMagnetic = "x" | "y";
+export interface FloatingBubbleOffset {
+    x: number;
+    y: number;
+}
+export interface FloatingBubbleGap {
+    x: number;
+    y: number;
+}
+export interface FloatingBubbleProps {
+    offset?: FloatingBubbleOffset;
+    axis?: FloatingBubbleAxis;
+    magnetic?: FloatingBubbleMagnetic;
+    gap?: number | FloatingBubbleGap;
+    teleport?: string | Element;
+}
+export type FloatingBubbleEmits = {
+    (e: "update:offset", value: FloatingBubbleOffset): void;
+    (e: "click", event: MouseEvent): void;
+    (e: "offset-change", offset: FloatingBubbleOffset): void;
+    (e: "drag-start"): void;
+    (e: "drag-end"): void;
+};

package/lib/AI-panel-widget/src/components/Frame-sfc.css

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

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

@@ -0,0 +1,162 @@
+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 Frame_vue_exports = {};
+__export(Frame_vue_exports, {
+  default: () => Frame_vue_default
+});
+module.exports = __toCommonJS(Frame_vue_exports);
+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_vue3 = require("vue");
+const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
+  __name: "Frame",
+  setup(__props, { expose: __expose }) {
+    const iframeRef = (0, import_vue2.ref)(null);
+    const {
+      frameLoading,
+      showEmptyState,
+      showError,
+      iframeSource: iframeSrc,
+      emptyStateText,
+      emptyStateActionText,
+      handleEmptyAction,
+      handleFrameLoaded
+    } = (0, import_context.useAIPanelWidgetContext)();
+    function sendMessageToIframe(type, data) {
+      if (!iframeRef.value?.contentWindow) return;
+      iframeRef.value.contentWindow.postMessage({ type, ...data }, "*");
+    }
+    __expose({
+      sendMessageToIframe
+    });
+    const __returned__ = { iframeRef, frameLoading, showEmptyState, showError, iframeSrc, emptyStateText, emptyStateActionText, handleEmptyAction, handleFrameLoaded, sendMessageToIframe };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1 = { class: "aipanel-iframe-container" };
+const _hoisted_2 = { class: "aipanel-empty-state-text" };
+const _hoisted_3 = ["src"];
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_1, [
+    (0, import_vue3.createElementVNode)(
+      "div",
+      {
+        class: (0, import_vue3.normalizeClass)(["aipanel-empty-state-overlay", { visible: $setup.showEmptyState }])
+      },
+      [
+        (0, import_vue3.renderSlot)(_ctx.$slots, "empty-state", {}, () => [
+          _cache[2] || (_cache[2] = (0, import_vue3.createElementVNode)(
+            "div",
+            { class: "aipanel-empty-state-icon" },
+            [
+              (0, import_vue3.createElementVNode)("svg", {
+                viewBox: "0 0 24 24",
+                width: "48",
+                height: "48",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "1.5",
+                "aria-hidden": "true"
+              }, [
+                (0, import_vue3.createElementVNode)("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 0 1-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                })
+              ])
+            ],
+            -1
+            /* CACHED */
+          )),
+          (0, import_vue3.createElementVNode)(
+            "div",
+            _hoisted_2,
+            (0, import_vue3.toDisplayString)($setup.emptyStateText),
+            1
+            /* TEXT */
+          ),
+          (0, import_vue3.createElementVNode)(
+            "button",
+            {
+              class: "aipanel-empty-state-btn",
+              type: "button",
+              onClick: _cache[0] || (_cache[0] = (...args) => $setup.handleEmptyAction && $setup.handleEmptyAction(...args))
+            },
+            (0, import_vue3.toDisplayString)($setup.emptyStateActionText),
+            1
+            /* TEXT */
+          )
+        ])
+      ],
+      2
+      /* CLASS */
+    ),
+    (0, import_vue3.createElementVNode)(
+      "div",
+      {
+        class: (0, import_vue3.normalizeClass)(["aipanel-loading-overlay", { visible: $setup.frameLoading }])
+      },
+      [
+        (0, import_vue3.renderSlot)(_ctx.$slots, "loading", {}, () => [
+          _cache[3] || (_cache[3] = (0, import_vue3.createElementVNode)(
+            "div",
+            { class: "aipanel-loading-spinner" },
+            null,
+            -1
+            /* CACHED */
+          )),
+          _cache[4] || (_cache[4] = (0, import_vue3.createElementVNode)(
+            "div",
+            { class: "aipanel-loading-text" },
+            "\u52A0\u8F7D\u4E2D...",
+            -1
+            /* CACHED */
+          ))
+        ])
+      ],
+      2
+      /* CLASS */
+    ),
+    (0, import_vue3.createElementVNode)(
+      "div",
+      {
+        class: (0, import_vue3.normalizeClass)(["aipanel-error-overlay", { visible: $setup.showError }])
+      },
+      [
+        (0, import_vue3.renderSlot)(_ctx.$slots, "error")
+      ],
+      2
+      /* CLASS */
+    ),
+    (0, import_vue3.renderSlot)(_ctx.$slots, "content", {}, () => [
+      (0, import_vue3.createElementVNode)("iframe", {
+        ref: "iframeRef",
+        class: (0, import_vue3.normalizeClass)(["aipanel-iframe", { loaded: !$setup.frameLoading }]),
+        src: $setup.iframeSrc,
+        allow: "clipboard-write; clipboard-read",
+        referrerpolicy: "origin",
+        onLoad: _cache[1] || (_cache[1] = (...args) => $setup.handleFrameLoaded && $setup.handleFrameLoaded(...args))
+      }, null, 42, _hoisted_3)
+    ])
+  ]);
+}
+__vue_sfc__.render = __vue_render__;
+var Frame_vue_default = __vue_sfc__;

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

@@ -0,0 +1,22 @@
+declare function sendMessageToIframe(type: string, data?: Record<string, unknown>): void;
+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;
+} & {
+    error?: (props: typeof __VLS_5) => any;
+} & {
+    content?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    sendMessageToIframe: typeof sendMessageToIframe;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/AI-panel-widget/src/components/Header-sfc.css

@@ -0,0 +1 @@
+.aipanel-chat-header{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;background:var(--ap-bg-secondary);border-bottom:1px solid var(--ap-border-primary);z-index:5}.aipanel-chat-header-left{display:flex;align-items:center;gap:4px}.aipanel-chat-header-title{font-size:14px;font-weight:600;color:var(--ap-text-primary);position:absolute;left:50%;transform:translate(-50%)}.aipanel-chat-header-actions{display:flex;gap:4px}.aipanel-header-btn{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--ap-text-placeholder);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.aipanel-header-btn:hover{background:var(--ap-bg-tertiary);color:var(--ap-text-primary)}.aipanel-header-btn.close:hover{background:var(--ap-danger);color:#fff}.aipanel-header-btn.select-btn.active,.aipanel-header-btn.session-toggle.active,.aipanel-header-btn.review-panel.active{background:var(--ap-primary);color:#fff}