@djvlc/runtime-host-vue 1.0.2 → 1.0.3

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  DJVLC_CONFIG_KEY: () => DJVLC_CONFIG_KEY,
   DJVPlugin: () => DJVPlugin,
   DJVProvider: () => DJVProvider,
   DJVRenderer: () => DJVRenderer,
@@ -28,13 +29,19 @@ __export(index_exports, {
   injectRuntime: () => injectRuntime,
   provideRuntime: () => provideRuntime,
   useAction: () => useAction,
+  useComponentState: () => useComponentState,
   useDJVRuntime: () => useDJVRuntime,
   useData: () => useData,
+  useDebouncedAction: () => useDebouncedAction,
+  useGlobalConfig: () => useGlobalConfig,
   useHostApi: () => useHostApi,
+  useLifecycle: () => useLifecycle,
+  usePageInfo: () => usePageInfo,
   useQuery: () => useQuery,
   useRuntimeEvent: () => useRuntimeEvent,
   useRuntimeState: () => useRuntimeState,
-  useRuntimeStateWritable: () => useRuntimeStateWritable
+  useRuntimeStateWritable: () => useRuntimeStateWritable,
+  useWhen: () => useWhen
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -48,11 +55,33 @@ function createVueRuntime(options) {
   const page = (0, import_vue.shallowRef)(null);
   const error = (0, import_vue.shallowRef)(null);
   const hostApi = (0, import_vue.shallowRef)(null);
+  const isReady = (0, import_vue.computed)(() => phase.value === "ready");
+  const hasError = (0, import_vue.computed)(() => phase.value === "error" || error.value !== null);
+  const metrics = (0, import_vue.shallowRef)({
+    initTime: 0,
+    loadTime: 0,
+    renderTime: 0,
+    totalTime: 0,
+    initTimestamp: null,
+    readyTimestamp: null
+  });
+  let startTime = 0;
+  let initStartTime = 0;
+  let loadStartTime = 0;
+  let renderStartTime = 0;
   const init = async () => {
     const container = options.containerRef?.value;
     if (!container) {
       throw new Error("Container element not found");
     }
+    startTime = performance.now();
+    initStartTime = startTime;
+    if (options.enableMetrics) {
+      metrics.value = {
+        ...metrics.value,
+        initTimestamp: Date.now()
+      };
+    }
     const runtimeInstance = (0, import_runtime_core.createRuntime)({
       ...options,
       container,
@@ -77,22 +106,45 @@ function createVueRuntime(options) {
     });
     await runtimeInstance.init();
     hostApi.value = runtimeInstance.getHostApi();
+    if (options.enableMetrics) {
+      metrics.value = {
+        ...metrics.value,
+        initTime: performance.now() - initStartTime
+      };
+    }
   };
   const load = async () => {
     if (!runtime.value) {
       throw new Error("Runtime not initialized");
     }
+    loadStartTime = performance.now();
     const result = await runtime.value.load();
     page.value = result;
     hostApi.value = runtime.value.getHostApi();
+    if (options.enableMetrics) {
+      metrics.value = {
+        ...metrics.value,
+        loadTime: performance.now() - loadStartTime
+      };
+    }
     return result;
   };
   const render = async () => {
     if (!runtime.value) {
       throw new Error("Runtime not initialized");
     }
+    renderStartTime = performance.now();
     await runtime.value.render();
     loading.value = false;
+    if (options.enableMetrics) {
+      const now = performance.now();
+      metrics.value = {
+        ...metrics.value,
+        renderTime: now - renderStartTime,
+        totalTime: now - startTime,
+        readyTimestamp: Date.now()
+      };
+    }
   };
   const destroy = () => {
     runtime.value?.destroy();
@@ -103,12 +155,41 @@ function createVueRuntime(options) {
     phase.value = "idle";
     loading.value = true;
   };
+  const reload = async () => {
+    if (!runtime.value) {
+      throw new Error("Runtime not initialized");
+    }
+    error.value = null;
+    loading.value = true;
+    await load();
+    await render();
+  };
   const setVariable = (key, value) => {
     runtime.value?.setVariable(key, value);
   };
+  const setVariables = (variables) => {
+    if (!runtime.value) return;
+    Object.entries(variables).forEach(([key, value]) => {
+      runtime.value?.setVariable(key, value);
+    });
+  };
+  const getVariable = (key) => {
+    return runtime.value?.getState().variables[key];
+  };
   const refreshData = async (queryId) => {
     await runtime.value?.refreshData(queryId);
   };
+  const executeAction = async (actionType, params) => {
+    const api = hostApi.value;
+    if (!api) {
+      throw new Error("HostAPI not available");
+    }
+    const response = await api.executeAction(actionType, params || {});
+    if (response.success) {
+      return response.data;
+    }
+    throw new Error(response.errorMessage || "Action failed");
+  };
   return {
     runtime,
     loading: (0, import_vue.readonly)(loading),
@@ -116,12 +197,19 @@ function createVueRuntime(options) {
     page,
     error,
     hostApi,
+    isReady,
+    hasError,
+    metrics,
     init,
     load,
     render,
     destroy,
+    reload,
     setVariable,
-    refreshData
+    setVariables,
+    getVariable,
+    refreshData,
+    executeAction
   };
 }
 
@@ -143,16 +231,30 @@ function injectRuntime() {
 }
 function useDJVRuntime() {
   const context = injectRuntime();
+  const loading = (0, import_vue2.computed)(() => {
+    const phase = context.value.state.phase;
+    return phase !== "ready" && phase !== "error";
+  });
+  const isReady = (0, import_vue2.computed)(() => context.value.state.phase === "ready");
+  const hasError = (0, import_vue2.computed)(() => context.value.state.phase === "error" || context.value.state.error !== null);
+  const reload = async () => {
+    const runtime = context.value.runtime;
+    if (!runtime) {
+      throw new Error("Runtime not available");
+    }
+    await runtime.load();
+    await runtime.render();
+  };
   return {
     runtime: (0, import_vue2.computed)(() => context.value.runtime),
     state: (0, import_vue2.computed)(() => context.value.state),
-    loading: (0, import_vue2.computed)(() => {
-      const phase = context.value.state.phase;
-      return phase !== "ready" && phase !== "error";
-    }),
+    loading,
     phase: (0, import_vue2.computed)(() => context.value.state.phase),
     error: (0, import_vue2.computed)(() => context.value.state.error),
-    page: (0, import_vue2.computed)(() => context.value.state.page)
+    page: (0, import_vue2.computed)(() => context.value.state.page),
+    isReady,
+    hasError,
+    reload
   };
 }
 function useHostApi() {
@@ -179,10 +281,12 @@ function useRuntimeStateWritable(key, defaultValue) {
   };
   return [value, setValue];
 }
-function useQuery(queryId) {
+function useQuery(queryId, options) {
   const context = injectRuntime();
   const loading = (0, import_vue2.ref)(false);
   const error = (0, import_vue2.ref)(null);
+  const lastUpdated = (0, import_vue2.ref)(null);
+  let intervalTimer = null;
   const data = (0, import_vue2.computed)(() => {
     return context.value.state.queries[queryId];
   });
@@ -191,41 +295,84 @@ function useQuery(queryId) {
     error.value = null;
     try {
       await context.value.runtime?.refreshData(queryId);
+      lastUpdated.value = Date.now();
     } catch (e) {
       error.value = e;
     } finally {
       loading.value = false;
     }
   };
+  (0, import_vue2.onMounted)(() => {
+    if (options?.refreshOnMount && context.value.runtime) {
+      refetch();
+    }
+    if (options?.refreshInterval && options.refreshInterval > 0) {
+      intervalTimer = setInterval(refetch, options.refreshInterval);
+    }
+    if (options?.refreshOnFocus) {
+      window.addEventListener("focus", refetch);
+    }
+  });
+  (0, import_vue2.onUnmounted)(() => {
+    if (intervalTimer) {
+      clearInterval(intervalTimer);
+    }
+    if (options?.refreshOnFocus) {
+      window.removeEventListener("focus", refetch);
+    }
+  });
   return {
     data,
     loading,
     error,
-    refetch
+    refetch,
+    lastUpdated
   };
 }
-function useAction(actionType) {
+function useAction(actionType, options) {
   const context = injectRuntime();
   const loading = (0, import_vue2.ref)(false);
-  const result = (0, import_vue2.ref)();
+  const result = (0, import_vue2.shallowRef)();
   const error = (0, import_vue2.ref)(null);
-  const execute = async (params) => {
+  const executionCount = (0, import_vue2.ref)(0);
+  const reset = () => {
+    result.value = void 0;
+    error.value = null;
+    executionCount.value = 0;
+  };
+  const executeWithRetry = async (params, retriesLeft) => {
     const hostApi = context.value.hostApi;
     if (!hostApi) {
       throw new Error("HostAPI not available");
     }
-    loading.value = true;
-    error.value = null;
     try {
       const response = await hostApi.executeAction(actionType, params);
       if (response.success) {
-        result.value = response.data;
         return response.data;
       } else {
-        throw new Error(response.message || "Action failed");
+        throw new Error(response.errorMessage || "Action failed");
       }
     } catch (e) {
-      error.value = e;
+      if (retriesLeft > 0) {
+        await new Promise((resolve) => setTimeout(resolve, options?.retryDelay || 1e3));
+        return executeWithRetry(params, retriesLeft - 1);
+      }
+      throw e;
+    }
+  };
+  const execute = async (params) => {
+    loading.value = true;
+    error.value = null;
+    executionCount.value++;
+    try {
+      const data = await executeWithRetry(params, options?.retryCount || 0);
+      result.value = data;
+      options?.onSuccess?.(data);
+      return data;
+    } catch (e) {
+      const err = e;
+      error.value = err;
+      options?.onError?.(err);
       throw e;
     } finally {
       loading.value = false;
@@ -235,14 +382,25 @@ function useAction(actionType) {
     execute,
     loading,
     result,
-    error
+    error,
+    reset,
+    executionCount
   };
 }
 function useData(queryId, params, options) {
   const context = injectRuntime();
-  const data = (0, import_vue2.ref)();
+  const data = (0, import_vue2.shallowRef)();
   const loading = (0, import_vue2.ref)(false);
   const error = (0, import_vue2.ref)(null);
+  const isFetched = (0, import_vue2.ref)(false);
+  let intervalTimer = null;
+  const getCurrentParams = () => {
+    if (!params) return void 0;
+    if (typeof params === "object" && "value" in params) {
+      return params.value;
+    }
+    return params;
+  };
   const refetch = async (newParams) => {
     const hostApi = context.value.hostApi;
     if (!hostApi) {
@@ -251,29 +409,47 @@ function useData(queryId, params, options) {
     loading.value = true;
     error.value = null;
     try {
-      const response = await hostApi.requestData(
+      const result = await hostApi.requestData(
         queryId,
-        newParams || params
+        newParams || getCurrentParams()
       );
-      if (response.success) {
-        data.value = response.data;
-      } else {
-        throw new Error(response.message || "Query failed");
-      }
+      data.value = result;
+      isFetched.value = true;
+      options?.onSuccess?.(result);
     } catch (e) {
-      error.value = e;
+      const err = e;
+      error.value = err;
+      options?.onError?.(err);
     } finally {
       loading.value = false;
     }
   };
-  if (options?.immediate !== false) {
-    refetch();
+  if (params && typeof params === "object" && "value" in params && options?.refreshOnParamsChange !== false) {
+    (0, import_vue2.watch)(params, () => {
+      if (isFetched.value) {
+        refetch();
+      }
+    }, { deep: true });
   }
+  (0, import_vue2.onMounted)(() => {
+    if (options?.immediate !== false && context.value.hostApi) {
+      refetch();
+    }
+    if (options?.refreshInterval && options.refreshInterval > 0) {
+      intervalTimer = setInterval(refetch, options.refreshInterval);
+    }
+  });
+  (0, import_vue2.onUnmounted)(() => {
+    if (intervalTimer) {
+      clearInterval(intervalTimer);
+    }
+  });
   return {
     data,
     loading,
     error,
-    refetch
+    refetch,
+    isFetched
   };
 }
 function useRuntimeEvent(eventType, handler) {
@@ -285,6 +461,145 @@ function useRuntimeEvent(eventType, handler) {
     unsubscribe?.();
   });
 }
+function usePageInfo() {
+  const context = injectRuntime();
+  return {
+    /** 页面 UID */
+    pageUid: (0, import_vue2.computed)(() => context.value.state.page?.pageUid),
+    /** 页面版本 ID */
+    pageVersionId: (0, import_vue2.computed)(() => context.value.state.page?.pageVersionId),
+    /** Schema 版本 */
+    schemaVersion: (0, import_vue2.computed)(() => context.value.state.page?.pageJson?.schemaVersion),
+    /** 页面标题 */
+    title: (0, import_vue2.computed)(() => {
+      const page = context.value.state.page;
+      return page?.title;
+    }),
+    /** 页面配置 */
+    config: (0, import_vue2.computed)(() => {
+      const page = context.value.state.page;
+      return page?.config;
+    }),
+    /** 页面是否已加载 */
+    isLoaded: (0, import_vue2.computed)(() => context.value.state.page !== null)
+  };
+}
+function useComponentState(componentId) {
+  const context = injectRuntime();
+  const componentStatus = (0, import_vue2.computed)(() => {
+    return context.value.state.components.get(componentId);
+  });
+  return {
+    /** 组件是否已加载 */
+    isLoaded: (0, import_vue2.computed)(() => componentStatus.value?.status === "loaded"),
+    /** 组件是否加载中 */
+    isLoading: (0, import_vue2.computed)(() => componentStatus.value?.status === "loading"),
+    /** 组件是否加载失败 */
+    hasError: (0, import_vue2.computed)(() => componentStatus.value?.status === "failed"),
+    /** 加载耗时 */
+    loadTime: (0, import_vue2.computed)(() => componentStatus.value?.loadTime),
+    /** 组件信息 */
+    info: componentStatus
+  };
+}
+function useLifecycle(options) {
+  const context = injectRuntime();
+  const hasMounted = (0, import_vue2.ref)(false);
+  const hasReady = (0, import_vue2.ref)(false);
+  (0, import_vue2.watch)(
+    () => context.value.state.phase,
+    async (newPhase, oldPhase) => {
+      options?.onPhaseChange?.(newPhase);
+      if (!hasMounted.value && newPhase !== "idle") {
+        hasMounted.value = true;
+        try {
+          await options?.onMounted?.();
+        } catch (error) {
+          options?.onError?.(error);
+        }
+      }
+      if (!hasReady.value && newPhase === "ready") {
+        hasReady.value = true;
+        try {
+          await options?.onReady?.();
+        } catch (error) {
+          options?.onError?.(error);
+        }
+      }
+      if (newPhase === "error" && oldPhase !== "error") {
+        options?.onError?.(context.value.state.error);
+      }
+    },
+    { immediate: true }
+  );
+  return {
+    /** 当前阶段 */
+    phase: (0, import_vue2.computed)(() => context.value.state.phase),
+    /** 是否已 mounted */
+    hasMounted: (0, import_vue2.readonly)(hasMounted),
+    /** 是否已 ready */
+    hasReady: (0, import_vue2.readonly)(hasReady)
+  };
+}
+function useWhen(condition, callback, options) {
+  const executed = (0, import_vue2.ref)(false);
+  const { once = true, immediate = true } = options || {};
+  const stop = (0, import_vue2.watch)(
+    condition,
+    async (value) => {
+      if (value && (!once || !executed.value)) {
+        executed.value = true;
+        await callback();
+        if (once) {
+          stop();
+        }
+      }
+    },
+    { immediate }
+  );
+  (0, import_vue2.onUnmounted)(() => {
+    stop();
+  });
+  return {
+    /** 是否已执行 */
+    executed: (0, import_vue2.readonly)(executed),
+    /** 手动停止监听 */
+    stop
+  };
+}
+function useDebouncedAction(actionType, delay = 300) {
+  const { execute: rawExecute, loading, result, error } = useAction(actionType);
+  let timeoutId = null;
+  const execute = (params) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      rawExecute(params).catch(() => {
+      });
+    }, delay);
+  };
+  const cancel = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  (0, import_vue2.onUnmounted)(() => {
+    cancel();
+  });
+  return {
+    execute,
+    loading,
+    result,
+    error,
+    cancel
+  };
+}
+function useGlobalConfig() {
+  const config = (0, import_vue2.inject)("djvlc-config", {});
+  return config;
+}
 
 // src/components/DJVRenderer.ts
 var DJVRenderer = (0, import_vue3.defineComponent)({
@@ -317,11 +632,26 @@ var DJVRenderer = (0, import_vue3.defineComponent)({
     enableSRI: {
       type: Boolean,
       default: true
+    },
+    retryCount: {
+      type: Number,
+      default: 3
+    },
+    retryDelay: {
+      type: Number,
+      default: 1e3
+    },
+    timeout: {
+      type: Number,
+      default: 3e4
     }
   },
-  emits: ["load", "error", "ready"],
+  emits: ["load", "error", "ready", "phase-change"],
   setup(props, { emit, slots }) {
     const containerRef = (0, import_vue3.ref)(null);
+    const mounted = (0, import_vue3.ref)(true);
+    const retryAttempt = (0, import_vue3.ref)(0);
+    const phase = (0, import_vue3.ref)("idle");
     const contextValue = (0, import_vue3.shallowRef)({
       runtime: null,
       state: {
@@ -337,8 +667,16 @@ var DJVRenderer = (0, import_vue3.defineComponent)({
     });
     provideRuntime(contextValue);
     let vueRuntime = null;
-    const initAndLoad = async () => {
-      if (!containerRef.value) return;
+    const withTimeout = (promise, ms) => {
+      return Promise.race([
+        promise,
+        new Promise(
+          (_, reject) => setTimeout(() => reject(new Error("\u52A0\u8F7D\u8D85\u65F6")), ms)
+        )
+      ]);
+    };
+    const initWithRetry = async () => {
+      if (!containerRef.value || !mounted.value) return;
       const options = {
         pageUid: props.pageUid,
         apiBaseUrl: props.apiBaseUrl,
@@ -357,56 +695,126 @@ var DJVRenderer = (0, import_vue3.defineComponent)({
       };
       vueRuntime = createVueRuntime(options);
       try {
-        await vueRuntime.init();
-        contextValue.value = {
-          runtime: vueRuntime.runtime.value,
-          state: vueRuntime.runtime.value?.getState() || contextValue.value.state,
-          hostApi: vueRuntime.hostApi.value
-        };
-        const page = await vueRuntime.load();
-        emit("load", page);
-        contextValue.value = {
-          ...contextValue.value,
-          state: vueRuntime.runtime.value?.getState() || contextValue.value.state,
-          hostApi: vueRuntime.hostApi.value
-        };
-        await vueRuntime.render();
-        emit("ready");
-        vueRuntime.runtime.value?.onStateChange((state) => {
-          contextValue.value = {
-            ...contextValue.value,
-            state
-          };
-        });
+        await withTimeout(
+          (async () => {
+            await vueRuntime.init();
+            if (!mounted.value) return;
+            phase.value = "loading";
+            emit("phase-change", "loading");
+            contextValue.value = {
+              runtime: vueRuntime.runtime.value,
+              state: vueRuntime.runtime.value?.getState() || contextValue.value.state,
+              hostApi: vueRuntime.hostApi.value
+            };
+            const pageData = await vueRuntime.load();
+            if (!mounted.value) return;
+            emit("load", pageData);
+            contextValue.value = {
+              ...contextValue.value,
+              state: vueRuntime.runtime.value?.getState() || contextValue.value.state,
+              hostApi: vueRuntime.hostApi.value
+            };
+            await vueRuntime.render();
+            if (!mounted.value) return;
+            phase.value = "ready";
+            emit("phase-change", "ready");
+            emit("ready");
+            retryAttempt.value = 0;
+            vueRuntime.runtime.value?.onStateChange((state) => {
+              if (!mounted.value) return;
+              contextValue.value = {
+                ...contextValue.value,
+                state
+              };
+              phase.value = state.phase;
+              emit("phase-change", state.phase);
+            });
+          })(),
+          props.timeout
+        );
       } catch (error) {
-        emit("error", error);
+        if (!mounted.value) return;
+        if (retryAttempt.value < props.retryCount) {
+          retryAttempt.value++;
+          if (props.debug) {
+            console.log(`[DJVRenderer] \u91CD\u8BD5 ${retryAttempt.value}/${props.retryCount}...`);
+          }
+          setTimeout(() => {
+            if (mounted.value) {
+              initWithRetry();
+            }
+          }, props.retryDelay);
+        } else {
+          phase.value = "error";
+          emit("phase-change", "error");
+          emit("error", error);
+        }
       }
     };
+    const handleRetry = () => {
+      retryAttempt.value = 0;
+      initWithRetry();
+    };
     (0, import_vue3.onMounted)(() => {
-      initAndLoad();
+      mounted.value = true;
+      initWithRetry();
     });
     (0, import_vue3.onUnmounted)(() => {
+      mounted.value = false;
       vueRuntime?.destroy();
     });
     (0, import_vue3.watch)(
       () => props.pageUid,
       () => {
         vueRuntime?.destroy();
-        initAndLoad();
+        retryAttempt.value = 0;
+        initWithRetry();
       }
     );
+    const renderDefaultLoading = () => {
+      return (0, import_vue3.h)("div", { class: "djvlc-loading" }, [
+        (0, import_vue3.h)("div", { class: "djvlc-loading-spinner" }),
+        (0, import_vue3.h)("span", {}, "\u52A0\u8F7D\u4E2D..."),
+        retryAttempt.value > 0 && (0, import_vue3.h)("span", { class: "djvlc-loading-retry" }, `\u91CD\u8BD5 ${retryAttempt.value}/${props.retryCount}`)
+      ]);
+    };
+    const renderDefaultError = (error) => {
+      return (0, import_vue3.h)("div", { class: "djvlc-error" }, [
+        (0, import_vue3.h)("div", { class: "djvlc-error-icon" }, "\u26A0\uFE0F"),
+        (0, import_vue3.h)("span", { class: "djvlc-error-message" }, `\u52A0\u8F7D\u5931\u8D25\uFF1A${error.message}`),
+        (0, import_vue3.h)(
+          "button",
+          {
+            class: "djvlc-error-retry-btn",
+            onClick: handleRetry,
+            type: "button"
+          },
+          "\u91CD\u8BD5"
+        )
+      ]);
+    };
+    const renderDefaultEmpty = () => {
+      return (0, import_vue3.h)("div", { class: "djvlc-empty" }, [(0, import_vue3.h)("span", {}, "\u6682\u65E0\u5185\u5BB9")]);
+    };
     return () => {
+      const isLoading = vueRuntime?.loading.value ?? false;
+      const currentError = vueRuntime?.error.value;
+      const currentPage = vueRuntime?.page.value;
       return (0, import_vue3.h)(
         "div",
         {
           ref: containerRef,
-          class: "djvlc-renderer"
+          class: "djvlc-renderer",
+          "data-phase": phase.value,
+          "data-page-uid": props.pageUid
         },
         [
           // 加载中插槽
-          vueRuntime?.loading.value && slots.loading?.(),
+          isLoading && (slots.loading?.() || renderDefaultLoading()),
           // 错误插槽
-          vueRuntime?.error.value && slots.error?.({ error: vueRuntime.error.value }),
+          currentError && (slots.error?.({ error: currentError, retry: handleRetry }) || renderDefaultError(currentError)),
+          // 空状态
+          !isLoading && !currentError && !currentPage && phase.value === "ready" && (slots.empty?.() || renderDefaultEmpty()),
           // 默认插槽（额外内容）
           slots.default?.()
         ]
@@ -417,6 +825,15 @@ var DJVRenderer = (0, import_vue3.defineComponent)({
 
 // src/components/DJVProvider.ts
 var import_vue4 = require("vue");
+var defaultState = {
+  phase: "idle",
+  page: null,
+  variables: {},
+  queries: {},
+  components: /* @__PURE__ */ new Map(),
+  error: null,
+  destroyed: false
+};
 var DJVProvider = (0, import_vue4.defineComponent)({
   name: "DJVProvider",
   props: {
@@ -427,50 +844,220 @@ var DJVProvider = (0, import_vue4.defineComponent)({
     hostApi: {
       type: Object,
       default: null
+    },
+    class: {
+      type: String,
+      default: ""
+    },
+    debug: {
+      type: Boolean,
+      default: false
     }
   },
-  setup(props, { slots }) {
+  emits: ["state-change", "phase-change", "error"],
+  setup(props, { slots, emit }) {
+    let unsubscribe = null;
     const contextValue = (0, import_vue4.shallowRef)({
       runtime: props.runtime,
-      state: props.runtime?.getState() || {
-        phase: "idle",
-        page: null,
-        variables: {},
-        queries: {},
-        components: /* @__PURE__ */ new Map(),
-        error: null,
-        destroyed: false
-      },
+      state: props.runtime?.getState() || defaultState,
       hostApi: props.hostApi
     });
     provideRuntime(contextValue);
-    if (props.runtime) {
-      props.runtime.onStateChange((state) => {
+    const subscribeToRuntime = (runtime) => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+      if (!runtime) return;
+      unsubscribe = runtime.onStateChange((state) => {
+        const prevPhase = contextValue.value.state.phase;
         contextValue.value = {
           ...contextValue.value,
           state
         };
+        emit("state-change", state);
+        if (state.phase !== prevPhase) {
+          emit("phase-change", state.phase);
+          if (props.debug) {
+            console.log(`[DJVProvider] Phase changed: ${prevPhase} -> ${state.phase}`);
+          }
+        }
+        if (state.error) {
+          emit("error", state.error);
+        }
       });
-    }
-    return () => (0, import_vue4.h)("div", { class: "djvlc-provider" }, slots.default?.());
+    };
+    subscribeToRuntime(props.runtime);
+    (0, import_vue4.watch)(
+      () => props.runtime,
+      (newRuntime, oldRuntime) => {
+        if (newRuntime !== oldRuntime) {
+          contextValue.value = {
+            runtime: newRuntime,
+            state: newRuntime?.getState() || defaultState,
+            hostApi: props.hostApi
+          };
+          subscribeToRuntime(newRuntime);
+        }
+      }
+    );
+    (0, import_vue4.watch)(
+      () => props.hostApi,
+      (newHostApi) => {
+        contextValue.value = {
+          ...contextValue.value,
+          hostApi: newHostApi
+        };
+      }
+    );
+    (0, import_vue4.onUnmounted)(() => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    });
+    return () => (0, import_vue4.h)(
+      "div",
+      {
+        class: ["djvlc-provider", props.class].filter(Boolean).join(" "),
+        "data-phase": contextValue.value.state.phase
+      },
+      slots.default?.()
+    );
   }
 });
 
 // src/plugin.ts
+var DJVLC_CONFIG_KEY = "djvlc-config";
+function createTrackDirective() {
+  const observedElements = /* @__PURE__ */ new WeakSet();
+  return {
+    mounted(el, binding) {
+      const { event, data = {}, trigger = "click" } = binding.value;
+      if (trigger === "click") {
+        el.addEventListener("click", () => {
+          dispatchTrackEvent(event, { ...data, element: el.tagName });
+        });
+      } else if (trigger === "view") {
+        if (!observedElements.has(el)) {
+          observedElements.add(el);
+          const observer = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                  dispatchTrackEvent(event, { ...data, element: el.tagName });
+                  observer.unobserve(el);
+                }
+              });
+            },
+            { threshold: 0.5 }
+          );
+          observer.observe(el);
+        }
+      } else if (trigger === "mounted") {
+        dispatchTrackEvent(event, { ...data, element: el.tagName });
+      }
+    }
+  };
+}
+function dispatchTrackEvent(event, data) {
+  window.dispatchEvent(
+    new CustomEvent("djvlc:track", {
+      detail: { event, data, timestamp: Date.now() }
+    })
+  );
+}
+function createVisibleDirective() {
+  return {
+    mounted(el, binding) {
+      updateVisibility(el, binding.value);
+    },
+    updated(el, binding) {
+      updateVisibility(el, binding.value);
+    }
+  };
+}
+function updateVisibility(el, visible) {
+  el.style.display = visible ? "" : "none";
+}
+function createLoadingDirective() {
+  const loadingOverlays = /* @__PURE__ */ new WeakMap();
+  return {
+    mounted(el, binding) {
+      el.style.position = "relative";
+      updateLoading(el, binding.value, loadingOverlays);
+    },
+    updated(el, binding) {
+      updateLoading(el, binding.value, loadingOverlays);
+    },
+    unmounted(el) {
+      const overlay = loadingOverlays.get(el);
+      if (overlay) {
+        overlay.remove();
+        loadingOverlays.delete(el);
+      }
+    }
+  };
+}
+function updateLoading(el, loading, overlays) {
+  let overlay = overlays.get(el);
+  if (loading) {
+    if (!overlay) {
+      overlay = document.createElement("div");
+      overlay.className = "djvlc-loading-overlay";
+      overlay.innerHTML = `
+        <div class="djvlc-loading-spinner"></div>
+      `;
+      overlay.style.cssText = `
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.8);
+        z-index: 100;
+      `;
+      el.appendChild(overlay);
+      overlays.set(el, overlay);
+    }
+    overlay.style.display = "flex";
+  } else if (overlay) {
+    overlay.style.display = "none";
+  }
+}
 var DJVPlugin = {
   install(app, options = {}) {
+    const prefix = options.componentPrefix || "";
     if (options.registerComponents !== false) {
-      app.component("DJVRenderer", DJVRenderer);
-      app.component("DJVProvider", DJVProvider);
+      app.component(`${prefix}DJVRenderer`, DJVRenderer);
+      app.component(`${prefix}DJVProvider`, DJVProvider);
     }
-    app.provide("djvlc-config", {
-      apiBaseUrl: options.defaultApiBaseUrl,
-      cdnBaseUrl: options.defaultCdnBaseUrl
-    });
+    if (options.registerDirectives !== false) {
+      app.directive("djv-track", createTrackDirective());
+      app.directive("djv-visible", createVisibleDirective());
+      app.directive("djv-loading", createLoadingDirective());
+    }
+    const globalConfig = {
+      apiBaseUrl: options.apiBaseUrl,
+      cdnBaseUrl: options.cdnBaseUrl,
+      channel: options.channel,
+      debug: options.debug,
+      enableSRI: options.enableSRI,
+      enableMetrics: options.enableMetrics,
+      retryCount: options.retryCount,
+      retryDelay: options.retryDelay,
+      timeout: options.timeout
+    };
+    app.provide(DJVLC_CONFIG_KEY, globalConfig);
+    app.config.globalProperties.$djvlc = {
+      config: globalConfig,
+      track: dispatchTrackEvent
+    };
   }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DJVLC_CONFIG_KEY,
   DJVPlugin,
   DJVProvider,
   DJVRenderer,
@@ -479,11 +1066,17 @@ var DJVPlugin = {
   injectRuntime,
   provideRuntime,
   useAction,
+  useComponentState,
   useDJVRuntime,
   useData,
+  useDebouncedAction,
+  useGlobalConfig,
   useHostApi,
+  useLifecycle,
+  usePageInfo,
   useQuery,
   useRuntimeEvent,
   useRuntimeState,
-  useRuntimeStateWritable
+  useRuntimeStateWritable,
+  useWhen
 });