@sanvika/ui 0.2.0 → 0.3.1

package/src/context/ThemeContext.jsx

@@ -15,29 +15,38 @@ export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState("light"); // SSR fallback
 
   // Step 1: On mount, load theme from localStorage. Default = dark.
+  // Defer state updates so this effect is not classified as synchronous setState-in-effect (react-hooks/set-state-in-effect).
   useEffect(() => {
-    try {
-      const saved = localStorage.getItem("theme");
-      const resolved = saved ?? "dark"; // First visit = dark
-      setTheme(resolved);
-      document.documentElement.setAttribute("data-theme", resolved);
+    let cancelled = false;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onSystemChange = (e) => {
+      if (!localStorage.getItem("theme")) {
+        const sys = e.matches ? "dark" : "light";
+        setTheme(sys);
+      }
+    };
 
-      // Listen for OS-level theme changes only if user has not set a preference
-      const mq = window.matchMedia("(prefers-color-scheme: dark)");
-      const onSystemChange = (e) => {
-        if (!localStorage.getItem("theme")) {
-          const sys = e.matches ? "dark" : "light";
-          setTheme(sys);
-        }
-      };
-      mq.addEventListener("change", onSystemChange);
-      setMounted(true);
-      return () => mq.removeEventListener("change", onSystemChange);
-    } catch {
-      setTheme("dark");
-      document.documentElement.setAttribute("data-theme", "dark");
-      setMounted(true);
-    }
+    queueMicrotask(() => {
+      if (cancelled) return;
+      try {
+        const saved = localStorage.getItem("theme");
+        const resolved = saved ?? "dark"; // First visit = dark
+        setTheme(resolved);
+        document.documentElement.setAttribute("data-theme", resolved);
+        mq.addEventListener("change", onSystemChange);
+        setMounted(true);
+      } catch {
+        if (cancelled) return;
+        setTheme("dark");
+        document.documentElement.setAttribute("data-theme", "dark");
+        setMounted(true);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      mq.removeEventListener("change", onSystemChange);
+    };
   }, []);
 
   // Step 2: Apply theme with smooth transition class

package/src/layouts/Layout.jsx

@@ -1,6 +1,6 @@
 // src/layouts/Layout.jsx
-import Navbar from "../components/layout/Navbar";
-import Footer from "../components/layout/Footer";
+import Navbar from "../components/layout/Navbar.jsx";
+import Footer from "../components/layout/Footer.jsx";
 import styles from "../styles/components/layouts/Layout.module.css";
 
 /**

package/src/server/index.js

@@ -1,6 +1,10 @@
-// @sanvika/ui/server v0.2.0
+// @sanvika/ui/server v0.3.0
 // HTTP client for ui.sanvikaproduction.com — cloud-driven Navbar configs and Theme presets.
-// Env vars: UI_URL, UI_CLIENT_SECRET (or pass via constructor).
+// Universal S2S Auth Pattern (ecosystem rule §21):
+//   PROJECT_NAME            — clientId
+//   SANVIKA_SERVICE_KEY     — Tier 1 trust
+//   UI_URL                  — service endpoint
+//   UI_CLIENT_SECRET        — (optional, Tier 2 fallback for 3rd-party)
 
 const DEFAULT_TIMEOUT_MS = 8000;
 
@@ -14,15 +18,21 @@ function _readEnv(key) {
 
 export class SanvikaUI {
   #url;
+  #clientId;
+  #serviceKey;
   #secret;
 
-  constructor({ url, secret } = {}) {
+  constructor({ url, clientId, serviceKey, secret } = {}) {
     const finalUrl = url || _readEnv("UI_URL");
-    const finalSecret = secret || _readEnv("UI_CLIENT_SECRET");
-    if (!finalUrl || !finalSecret) {
-      throw new Error("@sanvika/ui/server: UI_URL and UI_CLIENT_SECRET are required");
+    const finalClientId = clientId || _readEnv("PROJECT_NAME") || _readEnv("UI_CLIENT_ID");
+    const finalServiceKey = serviceKey || _readEnv("SANVIKA_SERVICE_KEY") || "";
+    const finalSecret = secret || _readEnv("UI_CLIENT_SECRET") || "";  // Tier 2 fallback (optional)
+    if (!finalUrl || !finalClientId) {
+      throw new Error("@sanvika/ui/server: UI_URL and PROJECT_NAME are required");
     }
     this.#url = finalUrl.replace(/\/$/, "");
+    this.#clientId = finalClientId;
+    this.#serviceKey = finalServiceKey;
     this.#secret = finalSecret;
   }
 
@@ -37,7 +47,11 @@ export class SanvikaUI {
     const qs = query ? "?" + new URLSearchParams(query).toString() : "";
     const init = {
       method,
-      headers: { "x-client-secret": this.#secret },
+      headers: {
+        "x-client-id": this.#clientId,
+        "x-service-key": this.#serviceKey,
+        "x-client-secret": this.#secret,
+      },
       signal: controller.signal,
     };
     if (body !== undefined) {