@nightkatana/kronosys-app 1.0.0-beta.0

package/bin/kronosys.mjs

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+/**
+ * kronosys CLI — entry point for `npx kronosys <command>`
+ *
+ * Supported commands:
+ *   start   → next start -p 5555   (production)
+ *   dev     → next dev --webpack -H kronosys -p 5555
+ */
+
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const projectRoot = resolve(__dirname, "..");
+
+const [, , command = "start", ...rest] = process.argv;
+
+const commands = {
+  start: ["npx", "next", "start", "-p", "5555", ...rest],
+  dev: ["npx", "next", "dev", "--webpack", "-H", "kronosys", "-p", "5555", ...rest],
+};
+
+if (!commands[command]) {
+  console.error(`[kronosys] Unknown command: "${command}"`);
+  console.error(`  Available: ${Object.keys(commands).join(", ")}`);
+  process.exit(1);
+}
+
+const [bin, ...args] = commands[command];
+
+const child = spawn(bin, args, {
+  cwd: projectRoot,
+  stdio: "inherit",
+  shell: false,
+  env: { ...process.env, NODE_ENV: command === "dev" ? "development" : "production" },
+});
+
+child.on("error", (err) => {
+  console.error(`[kronosys] Failed to start: ${err.message}`);
+  process.exit(1);
+});
+
+child.on("exit", (code) => {
+  process.exit(code ?? 0);
+});

package/components/KronosysPackageVersionProvider.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+const KronosysPackageVersionContext = createContext<string>("0.0.0");
+
+export function KronosysPackageVersionProvider({
+  version,
+  children,
+}: {
+  version: string;
+  children: ReactNode;
+}) {
+  return <KronosysPackageVersionContext.Provider value={version}>{children}</KronosysPackageVersionContext.Provider>;
+}
+
+export function useKronosysPackageVersion(): string {
+  return useContext(KronosysPackageVersionContext);
+}

package/components/KronosysPayloadProvider.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { useRouter } from "next/navigation";
+
+import { fetchKronosysState, type KronosysUpdatePayload } from "@/lib/kronosysApi";
+
+export type KronosysPayloadContextValue = {
+  payload: KronosysUpdatePayload | null;
+  error: string | null;
+  /**
+   * Recharge l’état depuis `/api/state` et met à jour le contexte partagé (toutes les routes).
+   * Met à jour `latestPayloadRef` de façon synchrone pour les appelants qui doivent lire le
+   * résultat avant le prochain rendu React.
+   */
+  refresh: (options?: { routerInvalidate?: boolean }) => Promise<boolean>;
+  /** Dernier payload connu (synchrone, même immédiatement après `await refresh()`). */
+  getLatestPayload: () => KronosysUpdatePayload | null;
+};
+
+const KronosysPayloadContext = createContext<KronosysPayloadContextValue | null>(null);
+
+export function KronosysPayloadProvider({ children }: { children: ReactNode }) {
+  const router = useRouter();
+  const [payload, setPayload] = useState<KronosysUpdatePayload | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const lastRefreshOkRef = useRef(true);
+  const latestPayloadRef = useRef<KronosysUpdatePayload | null>(null);
+
+  const refresh = useCallback(
+    async (options?: { routerInvalidate?: boolean }): Promise<boolean> => {
+      try {
+        const data = await fetchKronosysState("dashboard");
+        if (data.type === "updateData" && data.payload) {
+          const p = data.payload as KronosysUpdatePayload;
+          latestPayloadRef.current = p;
+          setPayload(p);
+          setError(null);
+        }
+        lastRefreshOkRef.current = true;
+        if (options?.routerInvalidate === true) {
+          router.refresh();
+        }
+        return true;
+      } catch (e: unknown) {
+        lastRefreshOkRef.current = false;
+        setError(e instanceof Error ? e.message : String(e));
+        return false;
+      }
+    },
+    [router],
+  );
+
+  const getLatestPayload = useCallback(() => latestPayloadRef.current, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let failures = 0;
+
+    const pollState = async () => {
+      await refresh();
+      if (cancelled) {
+        return;
+      }
+      const ok = lastRefreshOkRef.current;
+      failures = ok ? 0 : Math.min(failures + 1, 8);
+      const delay = ok ? 2000 : Math.min(30000, 2000 * 2 ** failures);
+      timer = setTimeout(() => void pollState(), delay);
+    };
+
+    void pollState();
+    return () => {
+      cancelled = true;
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [refresh]);
+
+  const value = useMemo(
+    (): KronosysPayloadContextValue => ({
+      payload,
+      error,
+      refresh,
+      getLatestPayload,
+    }),
+    [payload, error, refresh, getLatestPayload],
+  );
+
+  return <KronosysPayloadContext.Provider value={value}>{children}</KronosysPayloadContext.Provider>;
+}
+
+export function useKronosysPayload(): KronosysPayloadContextValue {
+  const v = useContext(KronosysPayloadContext);
+  if (!v) {
+    throw new Error("useKronosysPayload doit être utilisé sous KronosysPayloadProvider.");
+  }
+  return v;
+}

package/components/PwaRegister.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Enregistre le service worker en production pour satisfaire les critères d’installation PWA
+ * (Chrome, Edge, Brave, etc.). En `next dev`, on évite le SW pour ne pas masquer le HMR.
+ */
+export function PwaRegister() {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production") return;
+    if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) return;
+
+    const register = () => {
+      void navigator.serviceWorker.register("/sw.js", { scope: "/" }).catch(() => {
+        /* ignore — localhost sans build, permissions, etc. */
+      });
+    };
+
+    if (document.readyState === "complete") register();
+    else window.addEventListener("load", register, { once: true });
+  }, []);
+
+  return null;
+}

package/components/SiteLegalFooter.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+/** Pied de page global : lien vers les licences (toutes les pages du dashboard). */
+export function SiteLegalFooter() {
+  return (
+    <footer className="border-t border-zinc-200 bg-zinc-50 px-4 py-3 text-center text-[0.7rem] leading-relaxed text-zinc-600 dark:border-zinc-800/80 dark:bg-zinc-900 dark:text-zinc-500 sm:py-4 sm:text-xs">
+      <p>
+        <Link
+          href="/licenses"
+          className="text-zinc-600 underline-offset-2 hover:text-violet-700 dark:text-zinc-400 dark:hover:text-violet-300 hover:underline"
+        >
+          Licences et mentions · Licenses
+        </Link>
+        <span className="text-zinc-400 dark:text-zinc-600" aria-hidden>
+          {" · "}
+        </span>
+        <span>Kronosys — MIT License</span>
+      </p>
+    </footer>
+  );
+}

package/components/ThemeProvider.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import { THEME_STORAGE_KEY, type KronosysTheme } from "@/lib/theme";
+
+type Ctx = {
+  theme: KronosysTheme;
+  setTheme: (t: KronosysTheme) => void;
+  toggleTheme: () => void;
+  mounted: boolean;
+};
+
+const ThemeContext = createContext<Ctx | null>(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  /** Même valeur SSR et premier rendu client que `<html>` sans classe `dark` (layout), pour éviter les erreurs d’hydratation. Le script `getThemeBootstrapScript` + ce layout alignent le DOM avant peinture. */
+  const [theme, setThemeState] = useState<KronosysTheme>("light");
+  const [mounted, setMounted] = useState(false);
+
+  useLayoutEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    setThemeState(document.documentElement.classList.contains("dark") ? "dark" : "light");
+  }, []);
+
+  useEffect(() => {
+    const mountedTimer = window.setTimeout(() => setMounted(true), 0);
+    return () => window.clearTimeout(mountedTimer);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted || typeof document === "undefined") {
+      return;
+    }
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch {
+      /* ignore */
+    }
+  }, [theme, mounted]);
+
+  const setTheme = useCallback((t: KronosysTheme) => {
+    setThemeState(t);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setThemeState((prev) => (prev === "dark" ? "light" : "dark"));
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme, mounted }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useKronosysTheme(): Ctx {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useKronosysTheme must be used within ThemeProvider");
+  }
+  return ctx;
+}