@wavemaker-ai/react-runtime 1.0.0-next.27766

package/higherOrder/useActivePageReactivity.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { PageContextState } from "@wavemaker-ai/react-runtime/types";
+interface UseActivePageReactivityParams {
+    componentType?: string;
+    appProxy: any;
+    setPageContext: React.Dispatch<React.SetStateAction<PageContextState>>;
+    isMountedRef: React.RefObject<boolean>;
+    /** Active-page dependency paths this component reads (`App.activePage.*`), declared by codegen. */
+    activePageDeps?: string[];
+}
+/**
+ * Cross-context reactivity (value-gated): the active page broadcasts on every commit; this hook
+ * re-renders the consuming partial/prefab only when one of its codegen-declared `App.activePage.*`
+ * dependency paths actually changed. Works for Variables, Widgets, or anything after `activePage`,
+ * since the comparison is on the resolved value (the runtime creates new references on change).
+ *
+ * Propagation is page -> island only (acyclic). Partials with no declared deps never subscribe, so
+ * unrelated partials (header/footer) stay untouched. Re-subscribes/resets on navigation.
+ */
+export declare const useActivePageReactivity: ({ componentType, appProxy, setPageContext, isMountedRef, activePageDeps, }: UseActivePageReactivityParams) => void;
+export default useActivePageReactivity;

package/higherOrder/useActivePageReactivity.js

@@ -0,0 +1,57 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { useEffect, useRef } from "react";
+import { EVENTEMITTER_METHODS } from "../core/constants/events";
+const resolvePath = (root, path) => path.split(".").reduce((obj, key) => obj == null ? void 0 : obj[key], root);
+const useActivePageReactivity = ({
+  componentType,
+  appProxy,
+  setPageContext,
+  isMountedRef,
+  activePageDeps
+}) => {
+  var _a;
+  const snapshotRef = useRef([]);
+  const activePage = appProxy == null ? void 0 : appProxy.activePage;
+  const declaredKey = (_a = activePageDeps == null ? void 0 : activePageDeps.join("|")) != null ? _a : "";
+  useEffect(() => {
+    if (componentType === "PAGE" || !(activePageDeps == null ? void 0 : activePageDeps.length)) return;
+    const readValues = () => activePageDeps.map((path) => resolvePath(activePage, path));
+    snapshotRef.current = readValues();
+    const onActivePageChange = () => {
+      if (!isMountedRef.current) return;
+      const next = readValues();
+      if (next.some((value, i) => !Object.is(value, snapshotRef.current[i]))) {
+        snapshotRef.current = next;
+        setPageContext((prev) => __spreadProps(__spreadValues({}, prev), { App: __spreadValues({}, prev.App) }));
+      }
+    };
+    EVENTEMITTER_METHODS.ACTIVE_PAGE_SYNC_ON(onActivePageChange);
+    return () => {
+      EVENTEMITTER_METHODS.ACTIVE_PAGE_SYNC_OFF(onActivePageChange);
+    };
+  }, [componentType, activePage, declaredKey]);
+};
+var useActivePageReactivity_default = useActivePageReactivity;
+export {
+  useActivePageReactivity_default as default,
+  useActivePageReactivity
+};

package/higherOrder/withBaseWrapper.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from "react";
+import { Prettify, BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export type { BaseProps };
+export declare const withBaseWrapper: <P extends BaseProps>(WrappedComponent: ComponentType<P>) => ComponentType<Prettify<P>>;
+export default withBaseWrapper;

package/higherOrder/withBaseWrapper.js

@@ -0,0 +1,180 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { createElement } from "react";
+import React, { useEffect, useMemo, useCallback } from "react";
+import isEqual from "lodash-es/isEqual";
+import { useDeviceVisibility } from "../hooks/useDeviceVisibility";
+import { usePageContext } from "../context/WidgetProvider";
+import { sanitizeStyleObject } from "../utils/style-utils";
+const withBaseWrapper = (WrappedComponent) => {
+  const WithBaseComponent = (props) => {
+    var _b, _c, _d;
+    const _a = props, { show = true, deferload, standalone = false } = _a, rest = __objRest(_a, ["show", "deferload", "standalone"]);
+    const name = props["item-id"] || props.name;
+    const { pageContext, updateWidgetState, destroy, proxy } = usePageContext(standalone);
+    const { isHidden } = useDeviceVisibility(props.showindevice || ["all"]);
+    const componentWidgetId = useMemo(() => props == null ? void 0 : props["data-widget-id"], [props == null ? void 0 : props["data-widget-id"]]);
+    const widgetFromContext = name ? (_b = pageContext == null ? void 0 : pageContext.Widgets) == null ? void 0 : _b[name] : void 0;
+    useEffect(() => {
+      if (name && (props == null ? void 0 : props.iswidget) !== "false" && (pageContext == null ? void 0 : pageContext.Widgets)) {
+        const widget = (widgetFromContext == null ? void 0 : widgetFromContext["data-widget-id"]) === componentWidgetId ? widgetFromContext : {};
+        const registryEntry = __spreadProps(__spreadValues(__spreadValues({}, widget), props), {
+          "data-widget-id": componentWidgetId || void 0,
+          // Ensure widget-id is stored
+          viewParent: proxy
+        });
+        pageContext.Widgets[name] = registryEntry;
+      }
+    }, [name, pageContext == null ? void 0 : pageContext.Widgets, componentWidgetId, props]);
+    const mergedProps = useMemo(() => {
+      var _a2;
+      if (!name || !(pageContext == null ? void 0 : pageContext.Widgets) || (props == null ? void 0 : props.iswidget) === "false") {
+        return props;
+      }
+      const widget = widgetFromContext || {};
+      const contextWidgetId = widget == null ? void 0 : widget["data-widget-id"];
+      const component = WrappedComponent.displayName;
+      const shouldMergeFromContext = !componentWidgetId || !contextWidgetId || componentWidgetId === contextWidgetId;
+      let mergedState = __spreadValues({}, props);
+      const registry = pageContext == null ? void 0 : pageContext.overriddenPropsRegistry;
+      const widgetDatavalue = widget.datavalue;
+      const datavalue = widgetDatavalue != null ? widgetDatavalue : props.datavalue;
+      if (shouldMergeFromContext && (registry == null ? void 0 : registry.isWidgetOverridden(name, componentWidgetId || "")) && !props.formfield) {
+        const widgetOverrides = registry == null ? void 0 : registry.getWidgetOverrides(name, componentWidgetId || "");
+        if (widgetOverrides) {
+          Object.keys(widgetOverrides).forEach((key) => {
+            var _a3;
+            const internalValue = (_a3 = registry == null ? void 0 : registry.getLastInternalValue) == null ? void 0 : _a3.call(registry, name, key);
+            mergedState[key] = internalValue !== void 0 ? internalValue : widgetOverrides[key];
+            if (props.prefab && key !== "inbound" && key !== "outbound" && key !== "show") {
+              const updatedInbound = __spreadProps(__spreadValues({}, props.inbound), {
+                [key]: mergedState[key]
+              });
+              mergedState.inbound = updatedInbound;
+            }
+          });
+          Object.keys(widget).forEach((key) => {
+            const isPropOverriddenCheck = registry == null ? void 0 : registry.isPropOverridden(
+              name,
+              key,
+              componentWidgetId || ""
+            );
+            if (!isPropOverriddenCheck) {
+              mergedState[key] = props[key];
+            }
+          });
+        }
+      } else if (shouldMergeFromContext) {
+        mergedState = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, widget), props), (props == null ? void 0 : props.formfield) ? { datavalue: props.datavalue } : { datavalue: (_a2 = props.datavalue) != null ? _a2 : widgetDatavalue }), component === "WmFormField" && !props["value"] && { value: datavalue, datavalue });
+      } else {
+        mergedState = __spreadValues(__spreadValues({}, props), component === "WmFormField" && !props["value"] && { value: datavalue, datavalue });
+      }
+      if (component === "WmTable" && proxy.Widgets[name]) {
+        Object.keys(proxy.Widgets[name]).forEach((key) => {
+          if (!mergedState[key]) {
+            mergedState[key] = proxy.Widgets[name][key];
+          }
+        });
+      } else if ((component === "WmForm" || component === "WmLiveForm") && proxy.Widgets[name]) {
+        mergedState.formfields = proxy.Widgets[name].formfields;
+        mergedState.formWidgets = proxy.Widgets[name].formWidgets;
+      }
+      return mergedState;
+    }, [props, widgetFromContext, componentWidgetId]);
+    const syncWithContext = useCallback(() => {
+      if (name && (pageContext == null ? void 0 : pageContext.Widgets) && (props == null ? void 0 : props.iswidget) !== "false") {
+        const currentWidgetState = pageContext.Widgets[name] || {};
+        const contextWidgetId = currentWidgetState == null ? void 0 : currentWidgetState["data-widget-id"];
+        const shouldSync = !componentWidgetId || !contextWidgetId || componentWidgetId === contextWidgetId;
+        if (shouldSync) {
+          const stateForComparison = __spreadValues({}, currentWidgetState);
+          const propsForComparison = __spreadValues({}, mergedProps);
+          delete stateForComparison.listener;
+          delete propsForComparison.listener;
+          delete stateForComparison.viewParent;
+          delete propsForComparison.viewParent;
+          delete stateForComparison.children;
+          delete propsForComparison.children;
+          if (!isEqual(stateForComparison, propsForComparison)) {
+            updateWidgetState(name, mergedProps);
+          }
+        }
+      }
+    }, [pageContext == null ? void 0 : pageContext.Widgets, mergedProps, props, componentWidgetId]);
+    useEffect(() => {
+      syncWithContext();
+    }, [syncWithContext]);
+    const computedStyles = useMemo(() => {
+      const conditionalStyleObj = typeof props.conditionalstyle === "object" && props.conditionalstyle !== null ? sanitizeStyleObject(props.conditionalstyle) : {};
+      const baseStyles = sanitizeStyleObject(props.styles);
+      return __spreadValues(__spreadValues({}, baseStyles), conditionalStyleObj);
+    }, [props.styles, props.conditionalstyle]);
+    const computedClassName = useMemo(() => {
+      return [
+        props.className,
+        props.conditionalclass,
+        props.animation && `animated ${props.animation}`
+      ].filter(Boolean).join(" ");
+    }, [props.className, props.conditionalclass, props.animation]);
+    if (isHidden) return null;
+    const isDeferLoad = deferload === true;
+    const showValue = ((_c = mergedProps == null ? void 0 : mergedProps.show) == null ? void 0 : _c.toString()) !== "false";
+    if (!showValue && isDeferLoad) {
+      return null;
+    }
+    const shouldHide = !showValue && !isDeferLoad;
+    const updateon = (props == null ? void 0 : props.updateon) === "default" ? "keypress" : props == null ? void 0 : props.updateon;
+    return /* @__PURE__ */ createElement(
+      WrappedComponent,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, rest), mergedProps), updateon && { updateon }), shouldHide && { hidden: true }), deferload !== void 0 && { deferload: deferload.toString() }), {
+        show: (_d = mergedProps == null ? void 0 : mergedProps.show) == null ? void 0 : _d.toString(),
+        name: props.name,
+        className: computedClassName,
+        styles: computedStyles
+      }), (props == null ? void 0 : props.dataset) && { dataset: props == null ? void 0 : props.dataset }), {
+        destroy,
+        viewParent: proxy,
+        key: (pageContext == null ? void 0 : pageContext.selectedLocale) || "en"
+      })
+    );
+  };
+  WithBaseComponent.displayName = `WithBase(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return React.memo(WithBaseComponent, (prevProps, nextProps) => {
+    return prevProps === nextProps;
+  });
+};
+var withBaseWrapper_default = withBaseWrapper;
+export {
+  withBaseWrapper_default as default,
+  withBaseWrapper
+};

package/higherOrder/withRenderLogger.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType } from "react";
+/**
+ * Dev HOC that logs why a component re-rendered.
+ *
+ * On every render it diffs the current props against the previous render's
+ * props (shallow, by reference) and logs which keys changed, with prev/next
+ * values. Useful for spotting unstable props (new object/array/fn identity)
+ * that cause avoidable re-renders.
+ *
+ * Pure React (no jsx-runtime patching, no external dep), so it works in any
+ * bundler/runtime — unlike why-did-you-render.
+ *
+ * NOTE: no NODE_ENV gate for now (per request) — logs in all environments.
+ */
+export declare function withRenderLogger<P extends Record<string, any>>(WrappedComponent: ComponentType<P>, label?: string): ComponentType<P>;

package/higherOrder/withRenderLogger.js

@@ -0,0 +1,53 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+function withRenderLogger(WrappedComponent, label) {
+  const name = label || WrappedComponent.displayName || WrappedComponent.name || "Component";
+  const WithRenderLogger = (props) => {
+    const prevProps = useRef(null);
+    const renderCount = useRef(0);
+    renderCount.current += 1;
+    const changed = {};
+    if (prevProps.current) {
+      const keys = /* @__PURE__ */ new Set([...Object.keys(prevProps.current), ...Object.keys(props)]);
+      keys.forEach((key) => {
+        if (prevProps.current[key] !== props[key]) {
+          changed[key] = { prev: prevProps.current[key], next: props[key] };
+        }
+      });
+    }
+    const changedKeys = Object.keys(changed);
+    if (prevProps.current === null) {
+      console.log(`%c[render] ${name} #${renderCount.current} (mount)`, "color:#888");
+    } else {
+      console.log(
+        `%c[render] ${name} #${renderCount.current} \u2014 ${changedKeys.length ? `changed: ${changedKeys.join(", ")}` : "no prop changes (state/context/parent re-render)"}`,
+        changedKeys.length ? "color:#d9480f" : "color:#1971c2",
+        changedKeys.length ? changed : ""
+      );
+    }
+    prevProps.current = props;
+    return /* @__PURE__ */ jsx(WrappedComponent, __spreadValues({}, props));
+  };
+  WithRenderLogger.displayName = `withRenderLogger(${name})`;
+  return WithRenderLogger;
+}
+export {
+  withRenderLogger
+};

package/higherOrder/withStandalone.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType } from "react";
+/** Defaults to `true` unless overridden; forwarded to `withFormController` and inner widgets. */
+export type WithStandaloneProps = {
+    standalone?: boolean;
+};
+/**
+ * Outermost wrapper for form-backed widgets: sets `standalone` to `true` by default
+ * (pass `standalone={false}` to opt out). Forwards all props through the inner HOC chain.
+ */
+declare const withStandalone: <P extends object>(WrappedComponent: ComponentType<P & WithStandaloneProps>) => ComponentType<P & WithStandaloneProps>;
+export default withStandalone;

package/higherOrder/withStandalone.js

@@ -0,0 +1,31 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const withStandalone = (WrappedComponent) => {
+  const WithStandaloneComponent = memo((props) => /* @__PURE__ */ jsx(WrappedComponent, __spreadProps(__spreadValues({}, props), { standalone: true })));
+  WithStandaloneComponent.displayName = `withStandalone(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return WithStandaloneComponent;
+};
+var withStandalone_default = withStandalone;
+export {
+  withStandalone_default as default
+};

package/hooks/useAccess.d.ts

@@ -0,0 +1,18 @@
+export interface UseAccessOptions {
+    componentName: string;
+    type: "PAGE" | "PARTIAL" | "PREFAB";
+    enabled?: boolean;
+}
+export declare const useAccess: (options: UseAccessOptions) => {
+    hasAccess: boolean;
+    loading: boolean;
+    error: any;
+    retry: () => void;
+    cacheKey: string;
+};
+export declare const clearAccessCache: () => void;
+export declare const preloadAccess: (components: Array<{
+    name: string;
+    type: "PAGE" | "PARTIAL" | "PREFAB";
+}>, dispatch: any) => Promise<PromiseSettledResult<any>[]>;
+export default useAccess;

package/hooks/useAccess.js

@@ -0,0 +1,145 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useAppDispatch, useAppSelector } from "../store";
+import { checkAccess } from "../store/slices/authSlice";
+const accessCache = /* @__PURE__ */ new Map();
+const pendingChecks = /* @__PURE__ */ new Map();
+const useAccess = (options) => {
+  const { componentName, type, enabled = true } = options;
+  const dispatch = useAppDispatch();
+  const isSecurityEnabled = useAppSelector(
+    (state) => {
+      var _a;
+      return (_a = state.auth.securityConfig) == null ? void 0 : _a.isSecurityEnabled;
+    }
+  );
+  const cacheKey = `${type}_${componentName}`;
+  const [localState, setLocalState] = useState(() => {
+    var _a, _b, _c;
+    const cached = accessCache.get(cacheKey);
+    const defaultAccess = !isSecurityEnabled ? true : false;
+    return {
+      hasAccess: (_a = cached == null ? void 0 : cached.hasAccess) != null ? _a : defaultAccess,
+      loading: (_b = cached == null ? void 0 : cached.loading) != null ? _b : isSecurityEnabled ? true : false,
+      error: (_c = cached == null ? void 0 : cached.error) != null ? _c : null
+    };
+  });
+  const mountedRef = useRef(true);
+  const hasCheckedRef = useRef(false);
+  const checkComponentAccess = useCallback(async () => {
+    if (!isSecurityEnabled) {
+      return true;
+    }
+    if (!enabled) {
+      return true;
+    }
+    if (pendingChecks.has(cacheKey)) {
+      return pendingChecks.get(cacheKey);
+    }
+    const checkPromise = dispatch(checkAccess({ name: componentName, type })).unwrap();
+    pendingChecks.set(cacheKey, checkPromise);
+    try {
+      const result = await checkPromise;
+      return result;
+    } catch (error) {
+      return false;
+    } finally {
+      pendingChecks.delete(cacheKey);
+    }
+  }, [dispatch, componentName, type, isSecurityEnabled, enabled, cacheKey]);
+  useEffect(() => {
+    if (!mountedRef.current) return;
+    if (hasCheckedRef.current) return;
+    if (!isSecurityEnabled) {
+      const grantedState = { hasAccess: true, loading: false, error: null };
+      accessCache.set(cacheKey, grantedState);
+      setLocalState(grantedState);
+      hasCheckedRef.current = true;
+      return;
+    }
+    const cached = accessCache.get(cacheKey);
+    if (cached && !cached.loading) {
+      setLocalState(cached);
+      hasCheckedRef.current = true;
+      return;
+    }
+    const performCheck = async () => {
+      if (!mountedRef.current) return;
+      const loadingState = { hasAccess: false, loading: true, error: null };
+      accessCache.set(cacheKey, loadingState);
+      setLocalState(loadingState);
+      try {
+        const hasAccess = await checkComponentAccess();
+        if (!mountedRef.current) return;
+        const resultState = { hasAccess, loading: false, error: null };
+        accessCache.set(cacheKey, resultState);
+        setLocalState(resultState);
+        hasCheckedRef.current = true;
+      } catch (error) {
+        if (!mountedRef.current) return;
+        const errorState = { hasAccess: false, loading: false, error };
+        accessCache.set(cacheKey, errorState);
+        setLocalState(errorState);
+        hasCheckedRef.current = true;
+      }
+    };
+    performCheck();
+  }, [checkComponentAccess, cacheKey]);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [cacheKey]);
+  const retry = useCallback(() => {
+    hasCheckedRef.current = false;
+    accessCache.delete(cacheKey);
+    pendingChecks.delete(cacheKey);
+    const performCheck = async () => {
+      const loadingState = { hasAccess: false, loading: true, error: null };
+      accessCache.set(cacheKey, loadingState);
+      setLocalState(loadingState);
+      try {
+        const hasAccess = await checkComponentAccess();
+        const resultState = { hasAccess, loading: false, error: null };
+        accessCache.set(cacheKey, resultState);
+        setLocalState(resultState);
+        hasCheckedRef.current = true;
+      } catch (error) {
+        const errorState = { hasAccess: false, loading: false, error };
+        accessCache.set(cacheKey, errorState);
+        setLocalState(errorState);
+        hasCheckedRef.current = true;
+      }
+    };
+    performCheck();
+  }, [checkComponentAccess, cacheKey]);
+  return {
+    hasAccess: localState.hasAccess,
+    loading: localState.loading,
+    error: localState.error,
+    retry,
+    // Expose cache key for debugging
+    cacheKey
+  };
+};
+const clearAccessCache = () => {
+  accessCache.clear();
+  pendingChecks.clear();
+};
+const preloadAccess = async (components, dispatch) => {
+  const promises = components.map(({ name, type }) => {
+    var _a;
+    const cacheKey = `${type}_${name}`;
+    if (!accessCache.has(cacheKey)) {
+      return dispatch(checkAccess({ name, type })).unwrap();
+    }
+    return Promise.resolve((_a = accessCache.get(cacheKey)) == null ? void 0 : _a.hasAccess);
+  });
+  return Promise.allSettled(promises);
+};
+var useAccess_default = useAccess;
+export {
+  clearAccessCache,
+  useAccess_default as default,
+  preloadAccess,
+  useAccess
+};

package/hooks/useAppConfig.d.ts

@@ -0,0 +1,3 @@
+export declare const useAppConfig: () => {
+    getServiceDefinitionsData: (baseURL: string) => Promise<any>;
+};

package/hooks/useAppConfig.js

@@ -0,0 +1,17 @@
+import { useAppDispatch } from "../store";
+import { getServiceDefinitions } from "../store/slices/appConfigSlice";
+const useAppConfig = () => {
+  const dispatch = useAppDispatch();
+  const getServiceDefinitionsData = async (baseURL) => {
+    if (!baseURL) {
+      return Promise.resolve({});
+    }
+    return await dispatch(getServiceDefinitions(baseURL)).unwrap();
+  };
+  return {
+    getServiceDefinitionsData
+  };
+};
+export {
+  useAppConfig
+};

package/hooks/useAuth.d.ts

@@ -0,0 +1,55 @@
+import { LoginOptions } from "@wavemaker-ai/react-runtime/store/slices/authSlice";
+export declare const useAuth: () => {
+    isLoggedIn: boolean;
+    loggedInUser: import("@wavemaker-ai/react-runtime/store/slices/authSlice").LoggedInUserConfig;
+    securityConfig: any;
+    isPageLoading: boolean;
+    error: string;
+    login: (options: LoginOptions) => Promise<any>;
+    logout: (baseURL: string) => Promise<any>;
+    canAccessPage: (pageName: string) => Promise<any>;
+    hasAccessToWidget: (widgetRoles: string) => boolean;
+    getLoggedInUserDetails: (baseURL: string) => Promise<any>;
+    navigateToLandingPage: (options: {
+        baseUrl: string;
+        pageName: string;
+    }) => Promise<any>;
+};
+export declare const usePageAccess: (pageName: string) => {
+    hasAccess: boolean;
+    loading: boolean;
+};
+export declare const useWidgetAccess: (widgetRoles: string) => boolean;
+export declare const useAccess: (name: string, type: "PAGE" | "PARTIAL" | "PREFAB") => {
+    hasAccess: boolean;
+    loading: boolean;
+};
+/**
+ * Synchronous access checker for use outside of React components
+ * @param name - Name of the page or partial
+ * @param type - Type: 'PAGE' or 'PARTIAL'
+ * @param authState - Current auth state from Redux store
+ * @param appConfig - App configuration containing pages and partials
+ * @returns boolean indicating if access is granted
+ */
+export declare const checkAccessSync: (name: string, type: "PAGE" | "PARTIAL", authState: any, appConfig: any) => boolean;
+export declare const useLogin: () => {
+    loading: boolean;
+    error: string;
+    isLoggedIn: boolean;
+    handleLogin: (options: LoginOptions) => Promise<boolean>;
+    clearError: () => void;
+};
+export declare const useLogout: () => {
+    loading: boolean;
+    error: string;
+    handleLogout: (baseURL: string) => Promise<boolean>;
+    clearError: () => void;
+};
+export declare const useCurrentUser: () => {
+    user: import("@wavemaker-ai/react-runtime/store/slices/authSlice").LoggedInUserConfig;
+    isLoggedIn: boolean;
+    hasRole: (role: string) => boolean;
+    hasAnyRole: (roles: string[]) => boolean;
+    hasAllRoles: (roles: string[]) => boolean;
+};