@lumeweb/portal-framework-ui 0.0.1 → 0.1.1

package/dist/esm/hooks/useAvatar.js

@@ -0,0 +1,20 @@
+import { useGetIdentity } from "@refinedev/core";
+
+//#region src/hooks/useAvatar.ts
+const useAvatar = () => {
+	const { data: identity, isLoading } = useGetIdentity();
+	if (isLoading) return {
+		avatarUrl: "/placeholder.svg",
+		displayName: "",
+		isLoading: true
+	};
+	return {
+		avatarUrl: identity?.avatar ? `${identity.avatar}?t=${Date.now()}` : "/placeholder.svg",
+		displayName: `${identity?.firstName || ""} ${identity?.lastName || ""}`.trim(),
+		isLoading: false
+	};
+};
+
+//#endregion
+export { useAvatar };
+//# sourceMappingURL=useAvatar.js.map

package/dist/esm/hooks/useAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatar.js","names":[],"sources":["../../../src/hooks/useAvatar.ts"],"sourcesContent":["import type { Identity } from \"@lumeweb/portal-framework-core\";\n\nimport { useGetIdentity } from \"@refinedev/core\";\n\ninterface UseAvatarReturn {\n  avatarUrl: string;\n  displayName: string;\n  isLoading: boolean;\n}\n\nexport const useAvatar = (): UseAvatarReturn => {\n  const { data: identity, isLoading } = useGetIdentity<Identity>();\n\n  if (isLoading) {\n    return {\n      avatarUrl: \"/placeholder.svg\",\n      displayName: \"\",\n      isLoading: true,\n    };\n  }\n\n  const avatarUrl = identity?.avatar\n    ? `${identity.avatar}?t=${Date.now()}`\n    : \"/placeholder.svg\";\n  const displayName =\n    `${identity?.firstName || \"\"} ${identity?.lastName || \"\"}`.trim();\n\n  return {\n    avatarUrl,\n    displayName,\n    isLoading: false,\n  };\n};\n"],"mappings":";;;AAUA,MAAa,kBAAmC;CAC9C,MAAM,EAAE,MAAM,UAAU,cAAc,gBAA0B;AAEhE,KAAI,UACF,QAAO;EACL,WAAW;EACX,aAAa;EACb,WAAW;EACZ;AASH,QAAO;EACL,WAPgB,UAAU,SACxB,GAAG,SAAS,OAAO,KAAK,KAAK,KAAK,KAClC;EAMF,aAJA,GAAG,UAAU,aAAa,GAAG,GAAG,UAAU,YAAY,KAAK,MAIhD;EACX,WAAW;EACZ"}

package/dist/esm/hooks/useFeatureFlag.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/useFeatureFlag.d.ts
+declare function useFeatureFlag(featureName: string): boolean;
+//#endregion
+export { useFeatureFlag };
+//# sourceMappingURL=useFeatureFlag.d.ts.map

package/dist/esm/hooks/useFeatureFlag.js

@@ -0,0 +1,10 @@
+import { usePortalMeta } from "./usePortalMeta.js";
+
+//#region src/hooks/useFeatureFlag.ts
+function useFeatureFlag(featureName) {
+	return !!usePortalMeta()?.feature_flags?.[featureName.toUpperCase()];
+}
+
+//#endregion
+export { useFeatureFlag };
+//# sourceMappingURL=useFeatureFlag.js.map

package/dist/esm/hooks/useFeatureFlag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeatureFlag.js","names":[],"sources":["../../../src/hooks/useFeatureFlag.ts"],"sourcesContent":["import { usePortalMeta } from \"@/hooks/usePortalMeta\";\n\nexport function useFeatureFlag(featureName: string): boolean {\n  const portalMeta = usePortalMeta();\n  const flagValue = portalMeta?.feature_flags?.[featureName.toUpperCase()];\n  // Convert the value to a boolean: truthy values become true, falsy values become false\n  return !!flagValue;\n}\n"],"mappings":";;;AAEA,SAAgB,eAAe,aAA8B;AAI3D,QAAO,CAAC,CAHW,eACS,EAAE,gBAAgB,YAAY,aAAa"}

package/dist/esm/hooks/useLoginUrl.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/useLoginUrl.d.ts
+declare function useLoginUrl(): string;
+//#endregion
+export { useLoginUrl };
+//# sourceMappingURL=useLoginUrl.d.ts.map

package/dist/esm/hooks/useLoginUrl.js

@@ -0,0 +1,10 @@
+import { useAccountUrl } from "./useAccountUrl.js";
+
+//#region src/hooks/useLoginUrl.ts
+function useLoginUrl() {
+	return useAccountUrl("/login");
+}
+
+//#endregion
+export { useLoginUrl };
+//# sourceMappingURL=useLoginUrl.js.map

package/dist/esm/hooks/useLoginUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoginUrl.js","names":[],"sources":["../../../src/hooks/useLoginUrl.ts"],"sourcesContent":["import { useAccountUrl } from \"@/hooks/useAccountUrl\";\n\nexport function useLoginUrl() {\n  return useAccountUrl(\"/login\");\n}\n"],"mappings":";;;AAEA,SAAgB,cAAc;AAC5B,QAAO,cAAc,SAAS"}

package/dist/esm/hooks/useMenuItems.d.ts

@@ -0,0 +1,12 @@
+import * as _$_lumeweb_portal_framework_core0 from "@lumeweb/portal-framework-core";
+
+//#region src/hooks/useMenuItems.d.ts
+declare function useMenuItems(): {
+  addMenuItem: (item: _$_lumeweb_portal_framework_core0.NavigationItem, parentKey?: string) => void;
+  getMenuItems: () => _$_lumeweb_portal_framework_core0.NavigationItem[];
+  menuItems: _$_lumeweb_portal_framework_core0.NavigationItem[];
+  removeMenuItem: (key: string) => void;
+};
+//#endregion
+export { useMenuItems };
+//# sourceMappingURL=useMenuItems.d.ts.map

package/dist/esm/hooks/useMenuItems.js

@@ -0,0 +1,16 @@
+import { useAppStore } from "../store/appStore.js";
+
+//#region src/hooks/useMenuItems.ts
+function useMenuItems() {
+	const menuItems = useAppStore((state) => state.menuItems);
+	return {
+		addMenuItem: useAppStore((state) => state.addMenuItem),
+		getMenuItems: () => menuItems,
+		menuItems,
+		removeMenuItem: useAppStore((state) => state.removeMenuItem)
+	};
+}
+
+//#endregion
+export { useMenuItems };
+//# sourceMappingURL=useMenuItems.js.map

package/dist/esm/hooks/useMenuItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuItems.js","names":[],"sources":["../../../src/hooks/useMenuItems.ts"],"sourcesContent":["import { useAppStore } from \"@/store/appStore\";\n\nexport function useMenuItems() {\n  const menuItems = useAppStore((state) => state.menuItems);\n  const addMenuItem = useAppStore((state) => state.addMenuItem);\n  const removeMenuItem = useAppStore((state) => state.removeMenuItem);\n\n  return {\n    addMenuItem,\n    getMenuItems: () => menuItems,\n    menuItems,\n    removeMenuItem,\n  };\n}\n"],"mappings":";;;AAEA,SAAgB,eAAe;CAC7B,MAAM,YAAY,aAAa,UAAU,MAAM,UAAU;AAIzD,QAAO;EACL,aAJkB,aAAa,UAAU,MAAM,YAIpC;EACX,oBAAoB;EACpB;EACA,gBANqB,aAAa,UAAU,MAAM,eAMpC;EACf"}

package/dist/esm/hooks/usePluginMeta.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/usePluginMeta.d.ts
+declare function usePluginMeta<T = Record<string, unknown>>(pluginName: string, key?: string): T | undefined;
+//#endregion
+export { usePluginMeta };
+//# sourceMappingURL=usePluginMeta.d.ts.map

package/dist/esm/hooks/usePluginMeta.js

@@ -0,0 +1,11 @@
+import { usePortalStore } from "../store/portalStore.js";
+import { getPluginMeta } from "@lumeweb/portal-framework-core";
+
+//#region src/hooks/usePluginMeta.ts
+function usePluginMeta(pluginName, key) {
+	return getPluginMeta(usePortalStore((state) => state.meta), pluginName, key);
+}
+
+//#endregion
+export { usePluginMeta };
+//# sourceMappingURL=usePluginMeta.js.map

package/dist/esm/hooks/usePluginMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePluginMeta.js","names":[],"sources":["../../../src/hooks/usePluginMeta.ts"],"sourcesContent":["import { getPluginMeta } from \"@lumeweb/portal-framework-core\";\n\nimport { usePortalStore } from \"../store/portalStore\";\n\nexport function usePluginMeta<T = Record<string, unknown>>(\n  pluginName: string,\n  key?: string,\n): T | undefined {\n  const meta = usePortalStore((state) => state.meta);\n  return getPluginMeta<T>(meta, pluginName, key);\n}\n"],"mappings":";;;;AAIA,SAAgB,cACd,YACA,KACe;AAEf,QAAO,cADM,gBAAgB,UAAU,MAAM,KACjB,EAAE,YAAY,IAAI"}

package/dist/esm/hooks/usePortalMeta.d.ts

@@ -0,0 +1,7 @@
+import * as _$_lumeweb_portal_framework_core0 from "@lumeweb/portal-framework-core";
+
+//#region src/hooks/usePortalMeta.d.ts
+declare function usePortalMeta(): _$_lumeweb_portal_framework_core0.PortalMeta | undefined;
+//#endregion
+export { usePortalMeta };
+//# sourceMappingURL=usePortalMeta.d.ts.map

package/dist/esm/hooks/usePortalMeta.js

@@ -0,0 +1,10 @@
+import { usePortalStore } from "../store/portalStore.js";
+
+//#region src/hooks/usePortalMeta.ts
+function usePortalMeta() {
+	return usePortalStore((state) => state.meta);
+}
+
+//#endregion
+export { usePortalMeta };
+//# sourceMappingURL=usePortalMeta.js.map

package/dist/esm/hooks/usePortalMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortalMeta.js","names":[],"sources":["../../../src/hooks/usePortalMeta.ts"],"sourcesContent":["import { usePortalStore } from \"@/store/portalStore\";\n\nexport function usePortalMeta() {\n  // This hook now only reads the meta state from the store.\n  // The fetching logic has been moved to usePortalUrl.\n  return usePortalStore((state) => state.meta);\n}\n"],"mappings":";;;AAEA,SAAgB,gBAAgB;AAG9B,QAAO,gBAAgB,UAAU,MAAM,KAAK"}

package/dist/esm/hooks/usePortalUrl.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/usePortalUrl.d.ts
+declare function usePortalUrl(): string;
+//#endregion
+export { usePortalUrl };
+//# sourceMappingURL=usePortalUrl.d.ts.map

package/dist/esm/hooks/usePortalUrl.js

@@ -0,0 +1,20 @@
+import { usePortalStore } from "../store/portalStore.js";
+
+//#region src/hooks/usePortalUrl.ts
+function usePortalUrl() {
+	const portalUrl = usePortalStore((state) => state.portalUrl);
+	return isValidUrl(portalUrl) ? portalUrl : `https://${portalUrl}`;
+}
+function isValidUrl(url) {
+	if (!url) return false;
+	try {
+		new URL(url);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+//#endregion
+export { usePortalUrl };
+//# sourceMappingURL=usePortalUrl.js.map

package/dist/esm/hooks/usePortalUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortalUrl.js","names":[],"sources":["../../../src/hooks/usePortalUrl.ts"],"sourcesContent":["import { usePortalStore } from \"@/store/portalStore\";\n\nexport function usePortalUrl(): string {\n  const portalUrl = usePortalStore((state) => state.portalUrl);\n\n  // Ensure valid URL format before returning\n  return isValidUrl(portalUrl) ? portalUrl : `https://${portalUrl}`;\n}\n\n// Helper function to validate URL format\nfunction isValidUrl(url: string): boolean {\n  if (!url) return false;\n  try {\n    new URL(url);\n    return true;\n  } catch {\n    return false;\n  }\n}\n"],"mappings":";;;AAEA,SAAgB,eAAuB;CACrC,MAAM,YAAY,gBAAgB,UAAU,MAAM,UAAU;AAG5D,QAAO,WAAW,UAAU,GAAG,YAAY,WAAW;;AAIxD,SAAS,WAAW,KAAsB;AACxC,KAAI,CAAC,IAAK,QAAO;AACjB,KAAI;AACF,MAAI,IAAI,IAAI;AACZ,SAAO;SACD;AACN,SAAO"}

package/dist/esm/hooks/useProtocolDomain.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/useProtocolDomain.d.ts
+declare function useProtocolDomain(proto: string): string;
+//#endregion
+export { useProtocolDomain };
+//# sourceMappingURL=useProtocolDomain.d.ts.map

package/dist/esm/hooks/useProtocolDomain.js

@@ -0,0 +1,12 @@
+import { usePortalMeta } from "./usePortalMeta.js";
+import { env, getCurrentLocation, getProtocolDomain } from "@lumeweb/portal-framework-core";
+
+//#region src/hooks/useProtocolDomain.ts
+function useProtocolDomain(proto) {
+	usePortalMeta()?.domain || getCurrentLocation().hostname;
+	return getProtocolDomain(proto, { isRootDomain: env.VITE_PORTAL_DOMAIN_IS_ROOT === "true" });
+}
+
+//#endregion
+export { useProtocolDomain };
+//# sourceMappingURL=useProtocolDomain.js.map

package/dist/esm/hooks/useProtocolDomain.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProtocolDomain.js","names":[],"sources":["../../../src/hooks/useProtocolDomain.ts"],"sourcesContent":["import {\n  env,\n  getCurrentLocation,\n  getProtocolDomain,\n} from \"@lumeweb/portal-framework-core\";\n\nimport { usePortalMeta } from \"@/hooks/usePortalMeta\";\n\nexport function useProtocolDomain(proto: string): string {\n  const portalMeta = usePortalMeta();\n  const domain = portalMeta?.domain || getCurrentLocation().hostname;\n\n  return getProtocolDomain(proto, {\n    isRootDomain: env.VITE_PORTAL_DOMAIN_IS_ROOT === \"true\",\n  });\n}\n"],"mappings":";;;;AAQA,SAAgB,kBAAkB,OAAuB;AAExC,CADI,eACM,EAAE,UAAU,oBAAoB,CAAC;AAE1D,QAAO,kBAAkB,OAAO,EAC9B,cAAc,IAAI,+BAA+B,QAClD,CAAC"}

package/dist/esm/hooks/useRegisterUrl.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/useRegisterUrl.d.ts
+declare function useRegisterUrl(): string;
+//#endregion
+export { useRegisterUrl };
+//# sourceMappingURL=useRegisterUrl.d.ts.map

package/dist/esm/hooks/useRegisterUrl.js

@@ -0,0 +1,10 @@
+import { useAccountUrl } from "./useAccountUrl.js";
+
+//#region src/hooks/useRegisterUrl.ts
+function useRegisterUrl() {
+	return useAccountUrl("/register");
+}
+
+//#endregion
+export { useRegisterUrl };
+//# sourceMappingURL=useRegisterUrl.js.map

package/dist/esm/hooks/useRegisterUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRegisterUrl.js","names":[],"sources":["../../../src/hooks/useRegisterUrl.ts"],"sourcesContent":["import { useAccountUrl } from \"@/hooks/useAccountUrl\";\n\nexport function useRegisterUrl() {\n  return useAccountUrl(\"/register\");\n}\n"],"mappings":";;;AAEA,SAAgB,iBAAiB;AAC/B,QAAO,cAAc,YAAY"}

package/dist/esm/hooks/useResetPasswordUrl.d.ts

@@ -0,0 +1,5 @@
+//#region src/hooks/useResetPasswordUrl.d.ts
+declare function useResetPasswordUrl(): string;
+//#endregion
+export { useResetPasswordUrl };
+//# sourceMappingURL=useResetPasswordUrl.d.ts.map

package/dist/esm/hooks/useResetPasswordUrl.js

@@ -0,0 +1,10 @@
+import { useAccountUrl } from "./useAccountUrl.js";
+
+//#region src/hooks/useResetPasswordUrl.ts
+function useResetPasswordUrl() {
+	return useAccountUrl("/reset-password");
+}
+
+//#endregion
+export { useResetPasswordUrl };
+//# sourceMappingURL=useResetPasswordUrl.js.map

package/dist/esm/hooks/useResetPasswordUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResetPasswordUrl.js","names":[],"sources":["../../../src/hooks/useResetPasswordUrl.ts"],"sourcesContent":["import { useAccountUrl } from \"@/hooks/useAccountUrl\";\n\nexport function useResetPasswordUrl() {\n  return useAccountUrl(\"/reset-password\");\n}\n"],"mappings":";;;AAEA,SAAgB,sBAAsB;AACpC,QAAO,cAAc,kBAAkB"}

package/dist/esm/hooks/useSdk.d.ts

@@ -0,0 +1,8 @@
+import { Sdk } from "@lumeweb/portal-sdk";
+
+//#region src/hooks/useSdk.d.ts
+declare const resetGloballyInitialized: () => void;
+declare function useSdk(): Sdk | null;
+//#endregion
+export { resetGloballyInitialized, useSdk };
+//# sourceMappingURL=useSdk.d.ts.map

package/dist/esm/hooks/useSdk.js

@@ -0,0 +1,33 @@
+import { usePortalActions, usePortalStore } from "../store/portalStore.js";
+import { useApiUrl } from "./useApiUrl.js";
+import { useEffect, useRef } from "react";
+import { Sdk } from "@lumeweb/portal-sdk";
+
+//#region src/hooks/useSdk.ts
+let isGloballyInitialized = false;
+const resetGloballyInitialized = () => {
+	isGloballyInitialized = false;
+};
+function useSdk() {
+	const apiUrl = useApiUrl();
+	const { sdk } = usePortalStore((state) => ({ sdk: state.sdk }));
+	const { setSdk } = usePortalActions();
+	const initializationAttempted = useRef(false);
+	useEffect(() => {
+		if (apiUrl && !isGloballyInitialized && !initializationAttempted.current) {
+			initializationAttempted.current = true;
+			const initializeSdk = () => {
+				if (!isGloballyInitialized) {
+					isGloballyInitialized = true;
+					setSdk(new Sdk(apiUrl));
+				}
+			};
+			initializeSdk();
+		}
+	}, [apiUrl, setSdk]);
+	return sdk;
+}
+
+//#endregion
+export { resetGloballyInitialized, useSdk };
+//# sourceMappingURL=useSdk.js.map

package/dist/esm/hooks/useSdk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSdk.js","names":[],"sources":["../../../src/hooks/useSdk.ts"],"sourcesContent":["import { Sdk } from \"@lumeweb/portal-sdk\";\nimport { useEffect, useRef } from \"react\";\n\nimport { useApiUrl } from \"@/hooks/useApiUrl\"; // Import the updated useApiUrl hook\nimport { usePortalActions, usePortalStore } from \"@/store/portalStore\";\n\n// Global flag to ensure SDK is initialized only once across all instances\nlet isGloballyInitialized = false;\n\n// For testing purposes only\nexport const resetGloballyInitialized = () => {\n  isGloballyInitialized = false;\n};\n\nexport function useSdk() {\n  // Use the useApiUrl hook to get the API base URL\n  const apiUrl = useApiUrl();\n  const { sdk } = usePortalStore((state) => ({\n    sdk: state.sdk,\n  }));\n  const { setSdk } = usePortalActions();\n  const initializationAttempted = useRef(false);\n\n  useEffect(() => {\n    // Initialize SDK only when apiUrl is available (non-empty string)\n    if (apiUrl && !isGloballyInitialized && !initializationAttempted.current) {\n      initializationAttempted.current = true;\n      const initializeSdk = () => {\n        if (!isGloballyInitialized) {\n          isGloballyInitialized = true;\n          // Pass the determined apiUrl to the Sdk constructor\n          const newSdk = new Sdk(apiUrl);\n          setSdk(newSdk);\n        }\n      };\n\n      initializeSdk();\n    }\n  }, [apiUrl, setSdk]); // Update dependency array to depend on apiUrl\n\n  return sdk;\n}\n"],"mappings":";;;;;;AAOA,IAAI,wBAAwB;AAG5B,MAAa,iCAAiC;AAC5C,yBAAwB;;AAG1B,SAAgB,SAAS;CAEvB,MAAM,SAAS,WAAW;CAC1B,MAAM,EAAE,QAAQ,gBAAgB,WAAW,EACzC,KAAK,MAAM,KACZ,EAAE;CACH,MAAM,EAAE,WAAW,kBAAkB;CACrC,MAAM,0BAA0B,OAAO,MAAM;AAE7C,iBAAgB;AAEd,MAAI,UAAU,CAAC,yBAAyB,CAAC,wBAAwB,SAAS;AACxE,2BAAwB,UAAU;GAClC,MAAM,sBAAsB;AAC1B,QAAI,CAAC,uBAAuB;AAC1B,6BAAwB;AAGxB,YAAO,IADY,IAAI,OACV,CAAC;;;AAIlB,kBAAe;;IAEhB,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAO"}

package/dist/esm/hooks/useTheme.d.ts

@@ -0,0 +1,41 @@
+import { Theme } from "../types/theme.js";
+import React from "react";
+
+//#region src/hooks/useTheme.d.ts
+/**
+ * Higher-Order Component (HoC) for managing theme application at the root level.
+ *
+ * This HoC is used to control the theme for the Root component, ensuring proper
+ * theme management throughout the application. It's an alternative to using
+ * React Context, which is the current best practice, but we've chosen a different
+ * approach here with global state management.
+ *
+ * Wrapping a component in this HoC will ensure that the theme is applied to the
+ * <html> element of the page, so this HoC should be used for the Root component
+ * only.
+ *
+ * The HoC:
+ * 1. Retrieves the current theme ID from the global app store using useThemeIdAndSetter.
+ * 2. Retrieves the list of available themes from plugin metadata using usePluginMeta.
+ * 3. Uses an effect to find the selected or default theme and apply it using the utility function.
+ * 4. Wraps the provided component, passing through all props.
+ *
+ * @param Component - The React component to be wrapped.
+ * @returns A new component with theme management capabilities.
+ */
+/**
+ * Hook to get the currently selected theme ID and the setter function.
+ * This hook directly uses the UI store.
+ */
+declare const useThemeIdAndSetter: () => {
+  setTheme: (theme: string) => void;
+  theme: string;
+};
+/**
+ * Hook to get the full Theme object based on the selected theme ID and available themes from meta.
+ */
+declare const useTheme: () => Theme | undefined;
+declare const withTheme: <P extends object>(Component: React.ComponentType<P>) => (props: P) => any;
+//#endregion
+export { useTheme, useThemeIdAndSetter, withTheme };
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/esm/hooks/useTheme.js

@@ -0,0 +1,79 @@
+import { usePluginMeta } from "./usePluginMeta.js";
+import { useUIStore } from "../store/uiStore.js";
+import { applyThemeStyles, getThemeById } from "../utils/theme.js";
+import React, { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/hooks/useTheme.tsx
+/**
+* Higher-Order Component (HoC) for managing theme application at the root level.
+*
+* This HoC is used to control the theme for the Root component, ensuring proper
+* theme management throughout the application. It's an alternative to using
+* React Context, which is the current best practice, but we've chosen a different
+* approach here with global state management.
+*
+* Wrapping a component in this HoC will ensure that the theme is applied to the
+* <html> element of the page, so this HoC should be used for the Root component
+* only.
+*
+* The HoC:
+* 1. Retrieves the current theme ID from the global app store using useThemeIdAndSetter.
+* 2. Retrieves the list of available themes from plugin metadata using usePluginMeta.
+* 3. Uses an effect to find the selected or default theme and apply it using the utility function.
+* 4. Wraps the provided component, passing through all props.
+*
+* @param Component - The React component to be wrapped.
+* @returns A new component with theme management capabilities.
+*/
+/**
+* Hook to get the currently selected theme ID and the setter function.
+* This hook directly uses the UI store.
+*/
+const useThemeIdAndSetter = () => {
+	const theme = useUIStore((state) => state.theme);
+	return {
+		setTheme: useUIStore((state) => state.setTheme),
+		theme
+	};
+};
+/**
+* Hook to get the full Theme object based on the selected theme ID and available themes from meta.
+*/
+const useTheme = () => {
+	const { theme: selectedThemeId } = useThemeIdAndSetter();
+	const themes = usePluginMeta("dashboard", "themes");
+	if (selectedThemeId && Array.isArray(themes) && themes.length > 0) {
+		const persistedTheme = getThemeById(themes, selectedThemeId);
+		if (persistedTheme) return persistedTheme;
+	}
+	if (!themes || themes.length === 0) return;
+	let theme = getThemeById(themes, selectedThemeId);
+	if (!theme) theme = themes.find((t) => t.default);
+	if (!theme && themes.length > 0) theme = themes[0];
+	return theme;
+};
+const withTheme = (Component) => {
+	return function WithTheme(props) {
+		const { theme: selectedThemeId } = useThemeIdAndSetter();
+		const themes = usePluginMeta("dashboard", "themes");
+		useEffect(() => {
+			if (!themes || !Array.isArray(themes) || themes.length === 0) return;
+			if (selectedThemeId) {
+				const persistedTheme = getThemeById(themes, selectedThemeId);
+				if (persistedTheme) {
+					applyThemeStyles(persistedTheme);
+					return;
+				}
+			}
+			const themeToApply = getThemeById(themes, selectedThemeId) || themes.find((t) => t.default) || themes[0];
+			if (themeToApply) applyThemeStyles(themeToApply);
+			else console.warn("No theme found to apply.");
+		}, [selectedThemeId, themes]);
+		return /* @__PURE__ */ jsx(Component, { ...props });
+	};
+};
+
+//#endregion
+export { useTheme, useThemeIdAndSetter, withTheme };
+//# sourceMappingURL=useTheme.js.map

package/dist/esm/hooks/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","names":[],"sources":["../../../src/hooks/useTheme.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { useUIStore } from \"@/store/uiStore\";\nimport { getThemeById } from \"@/utils/theme\";\n\n// Import Theme from the new types file\nimport type { Theme } from \"../types/theme\";\n\nimport { applyThemeStyles } from \"../utils/theme\";\nimport { usePluginMeta } from \"./usePluginMeta\";\n/**\n * Higher-Order Component (HoC) for managing theme application at the root level.\n *\n * This HoC is used to control the theme for the Root component, ensuring proper\n * theme management throughout the application. It's an alternative to using\n * React Context, which is the current best practice, but we've chosen a different\n * approach here with global state management.\n *\n * Wrapping a component in this HoC will ensure that the theme is applied to the\n * <html> element of the page, so this HoC should be used for the Root component\n * only.\n *\n * The HoC:\n * 1. Retrieves the current theme ID from the global app store using useThemeIdAndSetter.\n * 2. Retrieves the list of available themes from plugin metadata using usePluginMeta.\n * 3. Uses an effect to find the selected or default theme and apply it using the utility function.\n * 4. Wraps the provided component, passing through all props.\n *\n * @param Component - The React component to be wrapped.\n * @returns A new component with theme management capabilities.\n */\n\n/**\n * Hook to get the currently selected theme ID and the setter function.\n * This hook directly uses the UI store.\n */\nexport const useThemeIdAndSetter = () => {\n  const theme = useUIStore((state) => state.theme);\n  const setTheme = useUIStore((state) => state.setTheme);\n\n  return {\n    setTheme,\n    theme, // This is the theme ID string\n  };\n};\n\n/**\n * Hook to get the full Theme object based on the selected theme ID and available themes from meta.\n */\nexport const useTheme = (): Theme | undefined => {\n  const { theme: selectedThemeId } = useThemeIdAndSetter();\n  const themes = usePluginMeta<Theme[]>(\"dashboard\", \"themes\");\n\n  // First, try to use the persisted theme from the store\n  if (selectedThemeId && Array.isArray(themes) && themes.length > 0) {\n    const persistedTheme = getThemeById(themes, selectedThemeId);\n    if (persistedTheme) {\n      return persistedTheme;\n    }\n  }\n\n  // Fallback to original logic if no persisted theme found or selectedThemeId is not set yet\n  if (!themes || themes.length === 0) {\n    return undefined;\n  }\n\n  let theme = getThemeById(themes, selectedThemeId);\n\n  if (!theme) {\n    theme = themes.find((t) => t.default);\n  }\n\n  if (!theme && themes.length > 0) {\n    theme = themes[0];\n  }\n\n  return theme;\n};\n\nexport const withTheme = <P extends object>(\n  Component: React.ComponentType<P>,\n) => {\n  return function WithTheme(props: P) {\n    const { theme: selectedThemeId } = useThemeIdAndSetter();\n    const themes = usePluginMeta<Theme[]>(\"dashboard\", \"themes\");\n\n    useEffect(() => {\n      if (!themes || !Array.isArray(themes) || themes.length === 0) {\n        return;\n      }\n\n      // First, try to use the persisted theme\n      if (selectedThemeId) {\n        const persistedTheme = getThemeById(themes, selectedThemeId);\n        if (persistedTheme) {\n          applyThemeStyles(persistedTheme);\n          return;\n        }\n      }\n\n      // Fallback to original logic if no persisted theme found\n      const themeToApply =\n        getThemeById(themes, selectedThemeId) ||\n        themes.find((t) => t.default) ||\n        themes[0];\n\n      if (themeToApply) {\n        applyThemeStyles(themeToApply);\n      } else {\n        console.warn(\"No theme found to apply.\");\n      }\n    }, [selectedThemeId, themes]);\n\n    return <Component {...props} />;\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAa,4BAA4B;CACvC,MAAM,QAAQ,YAAY,UAAU,MAAM,MAAM;AAGhD,QAAO;EACL,UAHe,YAAY,UAAU,MAAM,SAGnC;EACR;EACD;;;;;AAMH,MAAa,iBAAoC;CAC/C,MAAM,EAAE,OAAO,oBAAoB,qBAAqB;CACxD,MAAM,SAAS,cAAuB,aAAa,SAAS;AAG5D,KAAI,mBAAmB,MAAM,QAAQ,OAAO,IAAI,OAAO,SAAS,GAAG;EACjE,MAAM,iBAAiB,aAAa,QAAQ,gBAAgB;AAC5D,MAAI,eACF,QAAO;;AAKX,KAAI,CAAC,UAAU,OAAO,WAAW,EAC/B;CAGF,IAAI,QAAQ,aAAa,QAAQ,gBAAgB;AAEjD,KAAI,CAAC,MACH,SAAQ,OAAO,MAAM,MAAM,EAAE,QAAQ;AAGvC,KAAI,CAAC,SAAS,OAAO,SAAS,EAC5B,SAAQ,OAAO;AAGjB,QAAO;;AAGT,MAAa,aACX,cACG;AACH,QAAO,SAAS,UAAU,OAAU;EAClC,MAAM,EAAE,OAAO,oBAAoB,qBAAqB;EACxD,MAAM,SAAS,cAAuB,aAAa,SAAS;AAE5D,kBAAgB;AACd,OAAI,CAAC,UAAU,CAAC,MAAM,QAAQ,OAAO,IAAI,OAAO,WAAW,EACzD;AAIF,OAAI,iBAAiB;IACnB,MAAM,iBAAiB,aAAa,QAAQ,gBAAgB;AAC5D,QAAI,gBAAgB;AAClB,sBAAiB,eAAe;AAChC;;;GAKJ,MAAM,eACJ,aAAa,QAAQ,gBAAgB,IACrC,OAAO,MAAM,MAAM,EAAE,QAAQ,IAC7B,OAAO;AAET,OAAI,aACF,kBAAiB,aAAa;OAE9B,SAAQ,KAAK,2BAA2B;KAEzC,CAAC,iBAAiB,OAAO,CAAC;AAE7B,SAAO,oBAAC,WAAD,EAAW,GAAI,OAAS"}

package/dist/esm/image.d.ts

@@ -0,0 +1,6 @@
+//#region src/image.d.ts
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+//# sourceMappingURL=image.d.ts.map