@meshxdata/fops 0.1.51 → 0.1.53

package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/Header.jsx

@@ -0,0 +1,132 @@
+import React, { useState, useRef, useEffect } from "react";
+import { useAuth0 } from "@auth0/auth0-react";
+import ThemeToggle from "../components/ThemeToggle";
+import { useAuthContext } from "../utils/AuthContext";
+
+function UserMenu() {
+  const { logout } = useAuth0();
+  const { user, roles, isAdmin, canWrite } = useAuthContext();
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  const initials = (user?.name || user?.email || "?")
+    .split(/[\s@]+/)
+    .slice(0, 2)
+    .map((s) => s[0]?.toUpperCase())
+    .join("");
+
+  const roleBadge = isAdmin ? "Admin" : canWrite ? "Operator" : "Viewer";
+  const badgeColor = isAdmin
+    ? "bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300"
+    : canWrite
+      ? "bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-300"
+      : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300";
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center space-x-2 text-sm focus:outline-none"
+      >
+        {user?.picture ? (
+          <img src={user.picture} alt="" className="w-8 h-8 rounded-full" />
+        ) : (
+          <div className="w-8 h-8 rounded-full bg-violet-500 text-white flex items-center justify-center text-xs font-bold">
+            {initials}
+          </div>
+        )}
+        <span className="hidden sm:block text-gray-700 dark:text-gray-200 font-medium truncate max-w-[120px]">
+          {user?.name || user?.email}
+        </span>
+        <svg className="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50">
+          <div className="px-4 py-2 border-b border-gray-100 dark:border-gray-700">
+            <p className="text-sm font-medium text-gray-800 dark:text-gray-100 truncate">
+              {user?.name || user?.email}
+            </p>
+            <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{user?.email}</p>
+            <div className="mt-1.5 flex flex-wrap gap-1">
+              <span className={`inline-block text-[10px] font-semibold px-1.5 py-0.5 rounded ${badgeColor}`}>
+                {roleBadge}
+              </span>
+              {roles.filter((r) => r !== "admin").map((r) => (
+                <span key={r} className="inline-block text-[10px] font-medium px-1.5 py-0.5 rounded bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400">
+                  {r}
+                </span>
+              ))}
+            </div>
+          </div>
+          <button
+            onClick={() => logout({ logoutParams: { returnTo: window.location.origin + "/cloud" } })}
+            className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50"
+          >
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Header({ sidebarOpen, setSidebarOpen, variant = "default" }) {
+  const { user } = useAuthContext();
+  return (
+    <header
+      className={`sticky top-0 before:absolute before:inset-0 before:backdrop-blur-md max-lg:before:bg-white/90 dark:max-lg:before:bg-gray-800/90 before:-z-10 z-30 ${variant === "v2" ? "before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10 dark:before:bg-gray-800" : "max-lg:shadow-xs lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90"}`}
+    >
+      <div className="px-4 sm:px-6 lg:px-8">
+        <div className={`flex items-center justify-between h-16 ${variant !== "v2" ? "lg:border-b border-gray-200 dark:border-gray-700/60" : ""}`}>
+          {/* Left side */}
+          <div className="flex">
+            <button
+              className="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 lg:hidden"
+              aria-controls="sidebar"
+              aria-expanded={sidebarOpen}
+              onClick={(e) => {
+                e.stopPropagation();
+                setSidebarOpen(!sidebarOpen);
+              }}
+            >
+              <span className="sr-only">Open sidebar</span>
+              <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <rect x="4" y="5" width="16" height="2" />
+                <rect x="4" y="11" width="16" height="2" />
+                <rect x="4" y="17" width="16" height="2" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Right side */}
+          <div className="flex items-center space-x-3">
+            <ThemeToggle />
+            <hr className="w-px h-6 bg-gray-200 dark:bg-gray-700/60 border-none" />
+            {user?.sub !== "local" && (
+              <>
+                <UserMenu />
+                <hr className="w-px h-6 bg-gray-200 dark:bg-gray-700/60 border-none" />
+              </>
+            )}
+            <a href="/" className="text-xs text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 font-medium">
+              &larr; fops
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/Sidebar.jsx

@@ -0,0 +1,174 @@
+import React, { useState, useEffect, useRef } from "react";
+import { NavLink, useLocation } from "react-router-dom";
+
+function Sidebar({ sidebarOpen, setSidebarOpen }) {
+  const location = useLocation();
+  const { pathname } = location;
+
+  const trigger = useRef(null);
+  const sidebar = useRef(null);
+
+  const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
+  const [sidebarExpanded, setSidebarExpanded] = useState(
+    storedSidebarExpanded === null ? false : storedSidebarExpanded === "true",
+  );
+
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!sidebar.current || !trigger.current) return;
+      if (!sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target)) return;
+      setSidebarOpen(false);
+    };
+    document.addEventListener("click", clickHandler);
+    return () => document.removeEventListener("click", clickHandler);
+  });
+
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!sidebarOpen || keyCode !== 27) return;
+      setSidebarOpen(false);
+    };
+    document.addEventListener("keydown", keyHandler);
+    return () => document.removeEventListener("keydown", keyHandler);
+  });
+
+  useEffect(() => {
+    localStorage.setItem("sidebar-expanded", sidebarExpanded);
+    if (sidebarExpanded) {
+      document.querySelector("body").classList.add("sidebar-expanded");
+    } else {
+      document.querySelector("body").classList.remove("sidebar-expanded");
+    }
+  }, [sidebarExpanded]);
+
+  const navItems = [
+    {
+      to: "/",
+      label: "Registry",
+      icon: (
+        <svg className="shrink-0 fill-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2Zm0 2v10h10V3H3Zm2 2h6v2H5V5Zm0 4h6v2H5V9Z" />
+        </svg>
+      ),
+    },
+    {
+      to: "/fleet",
+      label: "Fleet",
+      icon: (
+        <svg className="shrink-0 fill-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M8 0a1 1 0 0 1 1 1v2.1A5.002 5.002 0 0 1 13 8a5 5 0 0 1-5 5 5 5 0 0 1-5-5 5.002 5.002 0 0 1 4-4.9V1a1 1 0 0 1 1-1ZM6 8a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z" />
+        </svg>
+      ),
+    },
+    {
+      to: "/costs",
+      label: "Costs",
+      icon: (
+        <svg className="shrink-0 fill-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6Z" />
+          <path d="M9 4H7v4.4l3.2 2.4.8-1.2L9 8V4Z" />
+        </svg>
+      ),
+    },
+    {
+      to: "/audit",
+      label: "Audit",
+      icon: (
+        <svg className="shrink-0 fill-current" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M8 0L1 3v5c0 4.1 3 7.4 7 8 4-0.6 7-3.9 7-8V3L8 0Zm0 2.2l5 2.1v4.2c0 3-2.2 5.6-5 6.2-2.8-0.6-5-3.2-5-6.2V4.3l5-2.1Zm2.3 4L7 9.5 5.7 8.2l-1 1L7 11.5l4.3-4.3-1-1Z" />
+        </svg>
+      ),
+    },
+  ];
+
+  return (
+    <div className="min-w-fit">
+      {/* Sidebar backdrop (mobile only) */}
+      <div
+        className={`fixed inset-0 bg-gray-900/30 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${sidebarOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        aria-hidden="true"
+      />
+
+      {/* Sidebar */}
+      <div
+        id="sidebar"
+        ref={sidebar}
+        className={`flex lg:flex! flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:w-64! shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-64"} border-r border-gray-200 dark:border-gray-700/60`}
+      >
+        {/* Sidebar header */}
+        <div className="flex justify-between mb-10 pr-3 sm:px-2">
+          <button
+            ref={trigger}
+            className="lg:hidden text-gray-500 hover:text-gray-400"
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+            aria-controls="sidebar"
+            aria-expanded={sidebarOpen}
+          >
+            <span className="sr-only">Close sidebar</span>
+            <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
+            </svg>
+          </button>
+          {/* Logo */}
+          <NavLink end to="/" className="block">
+            <svg className="fill-violet-500" xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32">
+              <path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z" />
+              <path d="M16 8a8 8 0 1 0 8 8 8 8 0 0 0-8-8Zm0 14a6 6 0 1 1 6-6 6 6 0 0 1-6 6Z" />
+              <circle cx="16" cy="16" r="3" />
+            </svg>
+          </NavLink>
+        </div>
+
+        {/* Links */}
+        <div className="space-y-8">
+          <div>
+            <h3 className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
+              <span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
+                &bull;&bull;&bull;
+              </span>
+              <span className="lg:hidden lg:sidebar-expanded:block 2xl:block">Cloud</span>
+            </h3>
+            <ul className="mt-3">
+              {navItems.map((item) => (
+                <li key={item.to} className="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0">
+                  <NavLink
+                    end={item.to === "/"}
+                    to={item.to}
+                    className={({ isActive }) =>
+                      `block text-gray-800 dark:text-gray-100 truncate transition ${isActive ? "" : "hover:text-gray-900 dark:hover:text-white"}`
+                    }
+                  >
+                    {({ isActive }) => (
+                      <div className="flex items-center">
+                        <div className={isActive ? "text-violet-500" : "text-gray-400 dark:text-gray-500"}>
+                          {item.icon}
+                        </div>
+                        <span className={`text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200 ${isActive ? "text-violet-500" : ""}`}>
+                          {item.label}
+                        </span>
+                      </div>
+                    )}
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Expand / collapse button */}
+        <div className="pt-3 hidden lg:inline-flex 2xl:hidden justify-end mt-auto">
+          <div className="w-12 pl-4 pr-3 py-2">
+            <button className="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400" onClick={() => setSidebarExpanded(!sidebarExpanded)}>
+              <span className="sr-only">Expand / collapse sidebar</span>
+              <svg className={`shrink-0 fill-current text-gray-400 dark:text-gray-600 sidebar-expanded:rotate-180`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                <path d="M6.7 14.7l1.4-1.4L3.8 9H16V7H3.8l4.3-4.3-1.4-1.4L0 8z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Sidebar;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/partials/SidebarLinkGroup.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+
+function SidebarLinkGroup({
+  children,
+  activecondition,
+}) {
+
+  const [open, setOpen] = useState(activecondition);
+
+  const handleClick = () => {
+    setOpen(!open);
+  }
+
+  return (
+    <li className={`pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r ${activecondition && 'from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]'}`}>
+      {children(handleClick, open)}
+    </li>
+  );
+}
+
+export default SidebarLinkGroup;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/AuthContext.jsx

@@ -0,0 +1,170 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { Auth0Provider, useAuth0 } from "@auth0/auth0-react";
+import { setTokenGetter } from "../api/client";
+
+const AuthContext = createContext({
+  user: null,
+  roles: [],
+  permissions: [],
+  isAdmin: false,
+  canWrite: false,
+  canDeploy: false,
+  getToken: async () => "",
+});
+
+/**
+ * Inner provider that fetches user profile + roles from the API
+ * once authenticated.
+ */
+function AuthGate({ children }) {
+  const { isAuthenticated, isLoading, loginWithRedirect, getAccessTokenSilently, user } = useAuth0();
+  const [profile, setProfile] = useState(null);
+  const [loadingProfile, setLoadingProfile] = useState(true);
+
+  // Wire token getter into the API client so all fetches are authenticated
+  useEffect(() => {
+    if (isAuthenticated) setTokenGetter(() => getAccessTokenSilently());
+  }, [isAuthenticated, getAccessTokenSilently]);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const token = await getAccessTokenSilently();
+        const res = await fetch("/cloud/api/me", {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        if (res.ok && !cancelled) {
+          setProfile(await res.json());
+        }
+      } catch {
+        // token or fetch failed — will show login
+      } finally {
+        if (!cancelled) setLoadingProfile(false);
+      }
+    })();
+
+    return () => { cancelled = true; };
+  }, [isAuthenticated, getAccessTokenSilently]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
+        <div className="text-gray-500 dark:text-gray-400 text-sm">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">meshXcloud</h1>
+          <p className="text-gray-500 dark:text-gray-400 mb-6">Sign in to access the cloud panel</p>
+          <button
+            onClick={() => loginWithRedirect()}
+            className="px-6 py-2.5 bg-violet-500 hover:bg-violet-600 text-white rounded-lg font-medium transition-colors"
+          >
+            Sign in with Auth0
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (loadingProfile) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
+        <div className="text-gray-500 dark:text-gray-400 text-sm">Loading profile...</div>
+      </div>
+    );
+  }
+
+  const roles = profile?.roles || [];
+  const permissions = profile?.permissions || [];
+  const isAdmin = roles.includes("admin");
+
+  const value = {
+    user: { ...user, ...profile },
+    roles,
+    permissions,
+    isAdmin,
+    canWrite: isAdmin || permissions.includes("cloud:write") || permissions.includes("cloud:admin"),
+    canDeploy: isAdmin || permissions.includes("cloud:deploy") || permissions.includes("cloud:admin"),
+    getToken: getAccessTokenSilently,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+/**
+ * Passthrough provider when auth is disabled — grants full admin access.
+ */
+function NoAuthProvider({ children }) {
+  const value = {
+    user: { sub: "local", name: "Local User", email: "" },
+    roles: ["admin"],
+    permissions: ["cloud:admin"],
+    isAdmin: true,
+    canWrite: true,
+    canDeploy: true,
+    getToken: async () => "",
+  };
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+/**
+ * Top-level wrapper that fetches Auth0 config from the API.
+ * If auth is disabled (CLOUD_AUTH != 1), renders children directly
+ * with full permissions. Otherwise, wraps in Auth0Provider + AuthGate.
+ */
+export default function AuthProvider({ children }) {
+  const [config, setConfig] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch("/cloud/api/auth-config")
+      .then((r) => r.json())
+      .then(setConfig)
+      .catch((e) => setError(e.message));
+  }, []);
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
+        <div className="text-red-500 text-sm">Auth config error: {error}</div>
+      </div>
+    );
+  }
+
+  if (!config) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
+        <div className="text-gray-500 dark:text-gray-400 text-sm">Initializing...</div>
+      </div>
+    );
+  }
+
+  // Auth disabled — bypass Auth0 entirely
+  if (!config.enabled) {
+    return <NoAuthProvider>{children}</NoAuthProvider>;
+  }
+
+  return (
+    <Auth0Provider
+      domain={config.domain}
+      clientId={config.clientId}
+      authorizationParams={{
+        redirect_uri: window.location.origin + "/cloud",
+        audience: config.audience,
+      }}
+      cacheLocation="localstorage"
+    >
+      <AuthGate>{children}</AuthGate>
+    </Auth0Provider>
+  );
+}
+
+export const useAuthContext = () => useContext(AuthContext);

package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/Info.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import Transition from './Transition';
+
+function Info({
+  children,
+  className,
+  containerClassName
+}) {
+
+  const [infoOpen, setInfoOpen] = useState(false);
+
+  return (
+    <div
+      className={`relative ${className}`}
+      onMouseEnter={() => setInfoOpen(true)}
+      onMouseLeave={() => setInfoOpen(false)}
+      onFocus={() => setInfoOpen(true)}
+      onBlur={() => setInfoOpen(false)}
+    >
+      <button
+        className="block"
+        aria-haspopup="true"
+        aria-expanded={infoOpen}
+        onClick={(e) => e.preventDefault()}
+      >
+        <svg className="w-4 h-4 fill-current text-gray-400" viewBox="0 0 16 16">
+          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+        </svg>
+      </button>
+      <div className="z-10 absolute bottom-full left-1/2 transform -translate-x-1/2">
+        <Transition
+          show={infoOpen}
+          tag="div"
+          className={`bg-white border border-gray-200 p-3 rounded-sm shadow-lg overflow-hidden mb-2 ${containerClassName}`}
+          enter="transition ease-out duration-200 transform"
+          enterStart="opacity-0 -translate-y-2"
+          enterEnd="opacity-100 translate-y-0"
+          leave="transition ease-out duration-200"
+          leaveStart="opacity-100"
+          leaveEnd="opacity-0"
+        >
+          {children}
+        </Transition>
+      </div>
+    </div>
+  );
+}
+
+export default Info;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/utils/ThemeContext.jsx

@@ -0,0 +1,37 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext({
+  currentTheme: 'light',
+  changeCurrentTheme: () => {},
+});
+
+export default function ThemeProvider({children}) {  
+  const persistedTheme = localStorage.getItem('theme');
+  const [theme, setTheme] = useState(persistedTheme || 'light');
+
+  const changeCurrentTheme = (newTheme) => {
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  useEffect(() => {
+    document.documentElement.classList.add('**:transition-none!');
+    if (theme === 'light') {
+      document.documentElement.classList.remove('dark');
+      document.documentElement.style.colorScheme = 'light';
+    } else {
+      document.documentElement.classList.add('dark');
+      document.documentElement.style.colorScheme = 'dark';
+    }
+
+    const transitionTimeout = setTimeout(() => {
+      document.documentElement.classList.remove('**:transition-none!');
+    }, 1);
+    
+    return () => clearTimeout(transitionTimeout);
+  }, [theme]);
+
+  return <ThemeContext.Provider value={{ currentTheme: theme, changeCurrentTheme }}>{children}</ThemeContext.Provider>;
+}
+
+export const useThemeProvider = () => useContext(ThemeContext);