@themodcraft/addon-providers 1.1.0

package/README.md

@@ -0,0 +1,17 @@
+# `@themodcraft/addon-providers`
+
+Provider presets and runtime wrappers for the UI stack.
+
+Includes:
+- Theme provider
+- Auth provider
+- Keyboard provider
+- Nexus provider bundles
+
+Install:
+```bash
+npm install @themodcraft/addon-providers
+```
+
+This package publishes compiled output only.
+

package/dist/auth/index.d.ts

@@ -0,0 +1 @@
+export { createBetterAuthProviderPreset, type AuthProviderPreset, type BetterAuthProviderPresetOptions, } from "..";

package/dist/auth/index.js

@@ -0,0 +1 @@
+export { createBetterAuthProviderPreset, } from "..";

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import type { AuthProviderProps, KeyboardProviderProps, NexusProviderProps, ThemeProviderProps } from "./runtime";
+import { type BetterAuthSessionLike } from "@themodcraft/addon-integrations/better-auth";
+export * from "./runtime";
+export type AuthProviderPreset = Omit<AuthProviderProps, "children">;
+export type KeyboardProviderPreset = Omit<KeyboardProviderProps, "children">;
+export type ThemeProviderPreset = Omit<ThemeProviderProps, "children">;
+export type NexusProviderPreset = Omit<NexusProviderProps, "children">;
+export interface BetterAuthProviderPresetOptions {
+    loginUrl?: string;
+    logoutUrl?: string;
+    onLogout?: () => void | Promise<void>;
+    session?: BetterAuthSessionLike | null;
+    settingsUrl?: string;
+    storageKey?: string;
+}
+export declare const themodcraftV3ThemeProviderPreset: ThemeProviderPreset;
+export declare const defaultKeyboardProviderPreset: KeyboardProviderPreset;
+export declare function createBetterAuthProviderPreset({ loginUrl, logoutUrl, onLogout, session, settingsUrl, storageKey, }?: BetterAuthProviderPresetOptions): AuthProviderPreset;
+export declare const themodcraftV3ProviderPreset: NexusProviderPreset;

package/dist/index.js

@@ -0,0 +1,81 @@
+import { profileFromBetterAuthSession, } from "@themodcraft/addon-integrations/better-auth";
+export * from "./runtime";
+export const themodcraftV3ThemeProviderPreset = {
+    defaultMode: "system",
+    defaultThemeId: "themodcraft-v3",
+    storageKey: "tmc-nexus-theme",
+    themes: [
+        {
+            colorScheme: "dark light",
+            cssVariables: {
+                "--neutral-50": "#ffffff",
+                "--neutral-100": "#d9d9d9",
+                "--neutral-200": "#9e9e9e",
+                "--neutral-300": "#828282",
+                "--neutral-400": "#696969",
+                "--neutral-500": "#4a4a4a",
+                "--neutral-600": "#3c3c3c",
+                "--neutral-700": "#212121",
+                "--neutral-800": "#161616",
+                "--neutral-850": "#131313",
+                "--neutral-900": "#121212",
+                "--neutral-999": "#000000",
+                "--accent-green-500": "#30fa00",
+                "--accent-blue-500": "#005efe",
+                "--accent-cyan-400": "#00f2ff",
+                "--accent-cyan-500": "#00d2de",
+                "--primary-background": "#212121",
+                "--secondary-background": "#161616",
+                "--primary-text": "#ffffff",
+                "--secondary-text": "#828282",
+                "--tertiary-text": "#4a4a4a",
+                "--border-color": "#3c3c3c",
+                "--cta-color": "#30fa00",
+                "--link-color": "#005efe",
+                "--hover-overlay": "rgba(0, 0, 0, 0.49)",
+                "--border-radius": "15px",
+                "--border-radius-sm": "6px",
+                "--font-main": "Inter, system-ui, sans-serif",
+                "--font-mono": "JetBrains Mono, Fira Code, monospace",
+            },
+            id: "themodcraft-v3",
+            label: "TheModCraft V3",
+        },
+    ],
+};
+export const defaultKeyboardProviderPreset = {
+    focusSelector: [
+        "a[href]",
+        "button:not([disabled])",
+        "input:not([disabled])",
+        "select:not([disabled])",
+        "textarea:not([disabled])",
+        "[tabindex]:not([tabindex='-1'])",
+        "[data-keyboard-focusable='true']",
+    ].join(","),
+    shortcuts: [],
+};
+export function createBetterAuthProviderPreset({ loginUrl = "/login", logoutUrl = "/logout", onLogout, session, settingsUrl = "/account/settings", storageKey = "tmc-nexus-auth", } = {}) {
+    const user = profileFromBetterAuthSession(session);
+    return {
+        loginUrl,
+        logoutUrl,
+        onLogout,
+        profileImage: user?.image ?? null,
+        settingsUrl,
+        status: user ? "authenticated" : "anonymous",
+        storageKey,
+        user,
+    };
+}
+export const themodcraftV3ProviderPreset = {
+    auth: createBetterAuthProviderPreset(),
+    config: {
+        config: {
+            appName: "TMC Nexus",
+            cdnBaseUrl: "https://cdnui.themodcraft.net/api/files",
+        },
+    },
+    keyboard: defaultKeyboardProviderPreset,
+    theme: themodcraftV3ThemeProviderPreset,
+};

package/dist/keyboard/index.d.ts

@@ -0,0 +1 @@
+export { defaultKeyboardProviderPreset, type KeyboardProviderPreset, } from "..";

package/dist/keyboard/index.js

@@ -0,0 +1 @@
+export { defaultKeyboardProviderPreset, } from "..";

package/dist/nexus/index.d.ts

@@ -0,0 +1 @@
+export { themodcraftV3ProviderPreset, type NexusProviderPreset, } from "..";

package/dist/nexus/index.js

@@ -0,0 +1 @@
+export { themodcraftV3ProviderPreset, } from "..";

package/dist/runtime/auth-provider.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export interface AuthUserProfile {
+    email?: string | null;
+    id?: string | null;
+    image?: string | null;
+    name?: string | null;
+    username?: string | null;
+}
+export type AuthStatus = "anonymous" | "authenticated" | "loading";
+export type AuthUserResolver = () => AuthUserProfile | null | Promise<AuthUserProfile | null>;
+export type AuthProfileImageResolver = (user: AuthUserProfile | null) => string | null | Promise<string | null>;
+export interface AuthProviderProps {
+    children: ReactNode;
+    loginUrl?: string;
+    logoutUrl?: string;
+    onLogout?: () => void | Promise<void>;
+    profileImage?: string | null;
+    refreshOnMount?: boolean;
+    resolveProfileImage?: AuthProfileImageResolver;
+    resolveUser?: AuthUserResolver;
+    settingsUrl?: string;
+    status?: AuthStatus;
+    storageKey?: string;
+    user?: AuthUserProfile | null;
+}
+export interface AuthContextValue {
+    loginUrl?: string;
+    logout: () => Promise<void>;
+    logoutUrl?: string;
+    profileImage: string | null;
+    refreshUser: () => Promise<AuthUserProfile | null>;
+    setUser: (user: AuthUserProfile | null) => void;
+    settingsUrl?: string;
+    status: AuthStatus;
+    user: AuthUserProfile | null;
+}
+export declare function AuthProvider({ children, loginUrl, logoutUrl, onLogout, profileImage, refreshOnMount, resolveProfileImage, resolveUser, settingsUrl, status, storageKey, user: initialUser, }: AuthProviderProps): import("react").JSX.Element;
+export declare function useAuth(): AuthContextValue;
+export declare function useOptionalAuth(): AuthContextValue | null;

package/dist/runtime/auth-provider.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+const AuthContext = createContext(null);
+const authEventName = "tmc:nexus-auth";
+function statusFromUser(user, fallback) {
+    if (fallback) {
+        return fallback;
+    }
+    return user ? "authenticated" : "anonymous";
+}
+function readStoredAuthSnapshot(storageKey) {
+    if (!storageKey || typeof window === "undefined") {
+        return null;
+    }
+    try {
+        const rawSnapshot = window.localStorage.getItem(storageKey);
+        return rawSnapshot ? JSON.parse(rawSnapshot) : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredAuthSnapshot(storageKey, snapshot) {
+    if (!storageKey || typeof window === "undefined") {
+        return;
+    }
+    if (!snapshot) {
+        window.localStorage.removeItem(storageKey);
+        window.dispatchEvent(new CustomEvent(authEventName, { detail: null }));
+        return;
+    }
+    window.localStorage.setItem(storageKey, JSON.stringify(snapshot));
+    window.dispatchEvent(new CustomEvent(authEventName, { detail: snapshot }));
+}
+export function AuthProvider({ children, loginUrl, logoutUrl, onLogout, profileImage, refreshOnMount = true, resolveProfileImage, resolveUser, settingsUrl, status, storageKey = "tmc-nexus-auth", user: initialUser = null, }) {
+    const [user, setUserState] = useState(initialUser);
+    const [resolvedProfileImage, setResolvedProfileImage] = useState(profileImage ?? initialUser?.image ?? null);
+    const [resolvedStatus, setResolvedStatus] = useState(statusFromUser(initialUser, status));
+    useEffect(() => {
+        const storedSnapshot = readStoredAuthSnapshot(storageKey);
+        if (storedSnapshot) {
+            setUserState(storedSnapshot.user);
+            setResolvedProfileImage(storedSnapshot.profileImage);
+            setResolvedStatus(storedSnapshot.status);
+            return;
+        }
+        setUserState(initialUser);
+        setResolvedProfileImage(profileImage ?? initialUser?.image ?? null);
+        setResolvedStatus(statusFromUser(initialUser, status));
+    }, [initialUser, profileImage, status, storageKey]);
+    useEffect(() => {
+        function handleStorage(event) {
+            if (event.key !== storageKey) {
+                return;
+            }
+            const snapshot = readStoredAuthSnapshot(storageKey);
+            setUserState(snapshot?.user ?? null);
+            setResolvedProfileImage(snapshot?.profileImage ?? null);
+            setResolvedStatus(snapshot?.status ?? "anonymous");
+        }
+        function handleAuthEvent(event) {
+            const snapshot = event.detail;
+            setUserState(snapshot?.user ?? null);
+            setResolvedProfileImage(snapshot?.profileImage ?? null);
+            setResolvedStatus(snapshot?.status ?? "anonymous");
+        }
+        window.addEventListener("storage", handleStorage);
+        window.addEventListener(authEventName, handleAuthEvent);
+        return () => {
+            window.removeEventListener("storage", handleStorage);
+            window.removeEventListener(authEventName, handleAuthEvent);
+        };
+    }, [storageKey]);
+    const refreshUser = useCallback(async () => {
+        if (!resolveUser) {
+            return user;
+        }
+        setResolvedStatus("loading");
+        const nextUser = await resolveUser();
+        const nextProfileImage = resolveProfileImage
+            ? await resolveProfileImage(nextUser)
+            : nextUser?.image ?? null;
+        setUserState(nextUser);
+        setResolvedProfileImage(nextProfileImage);
+        setResolvedStatus(nextUser ? "authenticated" : "anonymous");
+        writeStoredAuthSnapshot(storageKey, {
+            profileImage: nextProfileImage,
+            status: nextUser ? "authenticated" : "anonymous",
+            user: nextUser,
+        });
+        return nextUser;
+    }, [resolveProfileImage, resolveUser, storageKey, user]);
+    useEffect(() => {
+        if (!refreshOnMount || !resolveUser) {
+            return;
+        }
+        let cancelled = false;
+        async function refresh() {
+            const nextUser = await resolveUser?.();
+            if (cancelled) {
+                return;
+            }
+            const nextProfileImage = resolveProfileImage
+                ? await resolveProfileImage(nextUser ?? null)
+                : nextUser?.image ?? null;
+            if (!cancelled) {
+                setUserState(nextUser ?? null);
+                setResolvedProfileImage(nextProfileImage);
+                setResolvedStatus(nextUser ? "authenticated" : "anonymous");
+                writeStoredAuthSnapshot(storageKey, {
+                    profileImage: nextProfileImage,
+                    status: nextUser ? "authenticated" : "anonymous",
+                    user: nextUser ?? null,
+                });
+            }
+        }
+        refresh();
+        return () => {
+            cancelled = true;
+        };
+    }, [refreshOnMount, resolveProfileImage, resolveUser, storageKey]);
+    const setUser = useCallback((nextUser) => {
+        const nextProfileImage = nextUser?.image ?? null;
+        const nextStatus = nextUser ? "authenticated" : "anonymous";
+        setUserState(nextUser);
+        setResolvedProfileImage(nextProfileImage);
+        setResolvedStatus(nextStatus);
+        writeStoredAuthSnapshot(storageKey, {
+            profileImage: nextProfileImage,
+            status: nextStatus,
+            user: nextUser,
+        });
+    }, [storageKey]);
+    const logout = useCallback(async () => {
+        await onLogout?.();
+        setUser(null);
+        writeStoredAuthSnapshot(storageKey, null);
+    }, [onLogout, setUser, storageKey]);
+    const value = useMemo(() => ({
+        loginUrl,
+        logout,
+        logoutUrl,
+        profileImage: resolvedProfileImage,
+        refreshUser,
+        setUser,
+        settingsUrl,
+        status: resolvedStatus,
+        user,
+    }), [
+        loginUrl,
+        logout,
+        logoutUrl,
+        refreshUser,
+        resolvedProfileImage,
+        resolvedStatus,
+        setUser,
+        settingsUrl,
+        user,
+    ]);
+    return _jsx(AuthContext.Provider, { value: value, children: children });
+}
+export function useAuth() {
+    const context = useContext(AuthContext);
+    if (!context) {
+        throw new Error("useAuth must be used inside AuthProvider.");
+    }
+    return context;
+}
+export function useOptionalAuth() {
+    return useContext(AuthContext);
+}

package/dist/runtime/config-provider.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface TmcRuntimeConfig {
+    appName?: string;
+    assetBaseUrl?: string;
+    cdnBaseUrl?: string;
+    locale?: string;
+}
+export interface ConfigProviderProps {
+    children: ReactNode;
+    config?: TmcRuntimeConfig;
+}
+export declare function ConfigProvider({ children, config }: ConfigProviderProps): import("react").JSX.Element;
+export declare function useConfig(): TmcRuntimeConfig;

package/dist/runtime/config-provider.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, } from "react";
+const ConfigContext = createContext({});
+export function ConfigProvider({ children, config = {} }) {
+    const value = useMemo(() => config, [config]);
+    return _jsx(ConfigContext.Provider, { value: value, children: children });
+}
+export function useConfig() {
+    return useContext(ConfigContext);
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./auth-provider";
+export * from "./config-provider";
+export * from "./keyboard-provider";
+export * from "./nexus-provider";
+export * from "./theme-provider";
+export * from "./ui-overlay-provider";

package/dist/runtime/index.js

@@ -0,0 +1,6 @@
+export * from "./auth-provider";
+export * from "./config-provider";
+export * from "./keyboard-provider";
+export * from "./nexus-provider";
+export * from "./theme-provider";
+export * from "./ui-overlay-provider";

package/dist/runtime/keyboard-provider.d.ts

@@ -0,0 +1,29 @@
+import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from "react";
+export interface KeyboardShortcut {
+    allowInEditable?: boolean;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    enabled?: boolean;
+    handler: (event: KeyboardEvent) => void;
+    id: string;
+    key: string;
+    metaKey?: boolean;
+    preventDefault?: boolean;
+    shiftKey?: boolean;
+}
+export interface KeyboardProviderProps {
+    children: ReactNode;
+    focusSelector?: string;
+    shortcuts?: KeyboardShortcut[];
+}
+export interface KeyboardContextValue {
+    focusFirst: (selector?: string) => void;
+    focusNext: (selector?: string) => void;
+    focusPrevious: (selector?: string) => void;
+    registerShortcut: (shortcut: KeyboardShortcut) => () => void;
+}
+export declare function KeyboardProvider({ children, focusSelector, shortcuts, }: KeyboardProviderProps): import("react").JSX.Element;
+export declare function useKeyboard(): KeyboardContextValue;
+export declare function useOptionalKeyboard(): KeyboardContextValue | null;
+export declare function useKeyboardShortcut(shortcut: KeyboardShortcut): void;
+export declare function handleKeyboardClick(event: ReactKeyboardEvent, callback: () => void): void;

package/dist/runtime/keyboard-provider.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, } from "react";
+const defaultFocusSelector = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex='-1'])",
+    "[data-keyboard-focusable='true']",
+].join(",");
+const KeyboardContext = createContext(null);
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    return (target.isContentEditable ||
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLSelectElement ||
+        target instanceof HTMLTextAreaElement);
+}
+function matchesShortcut(event, shortcut) {
+    return (shortcut.enabled !== false &&
+        event.key.toLowerCase() === shortcut.key.toLowerCase() &&
+        Boolean(event.altKey) === Boolean(shortcut.altKey) &&
+        Boolean(event.ctrlKey) === Boolean(shortcut.ctrlKey) &&
+        Boolean(event.metaKey) === Boolean(shortcut.metaKey) &&
+        Boolean(event.shiftKey) === Boolean(shortcut.shiftKey));
+}
+function getFocusableElements(selector) {
+    return Array.from(document.querySelectorAll(selector)).filter((element) => {
+        const style = window.getComputedStyle(element);
+        return !element.hasAttribute("disabled") && style.display !== "none" && style.visibility !== "hidden";
+    });
+}
+export function KeyboardProvider({ children, focusSelector = defaultFocusSelector, shortcuts = [], }) {
+    const shortcutsRef = useRef(new Map());
+    useEffect(() => {
+        shortcutsRef.current = new Map(shortcuts.map((shortcut) => [shortcut.id, shortcut]));
+    }, [shortcuts]);
+    useEffect(() => {
+        function handleKeyDown(event) {
+            for (const shortcut of shortcutsRef.current.values()) {
+                if (!matchesShortcut(event, shortcut)) {
+                    continue;
+                }
+                if (!shortcut.allowInEditable && isEditableTarget(event.target)) {
+                    continue;
+                }
+                if (shortcut.preventDefault ?? true) {
+                    event.preventDefault();
+                }
+                shortcut.handler(event);
+            }
+        }
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, []);
+    const registerShortcut = useCallback((shortcut) => {
+        shortcutsRef.current.set(shortcut.id, shortcut);
+        return () => {
+            shortcutsRef.current.delete(shortcut.id);
+        };
+    }, []);
+    const focusByOffset = useCallback((offset, selector = focusSelector) => {
+        const elements = getFocusableElements(selector);
+        if (!elements.length) {
+            return;
+        }
+        const currentIndex = document.activeElement instanceof HTMLElement
+            ? elements.indexOf(document.activeElement)
+            : -1;
+        const nextIndex = currentIndex === -1
+            ? 0
+            : (currentIndex + offset + elements.length) % elements.length;
+        elements[nextIndex]?.focus();
+    }, [focusSelector]);
+    const value = useMemo(() => ({
+        focusFirst: (selector = focusSelector) => getFocusableElements(selector)[0]?.focus(),
+        focusNext: (selector = focusSelector) => focusByOffset(1, selector),
+        focusPrevious: (selector = focusSelector) => focusByOffset(-1, selector),
+        registerShortcut,
+    }), [focusByOffset, focusSelector, registerShortcut]);
+    return _jsx(KeyboardContext.Provider, { value: value, children: children });
+}
+export function useKeyboard() {
+    const context = useContext(KeyboardContext);
+    if (!context) {
+        throw new Error("useKeyboard must be used inside KeyboardProvider.");
+    }
+    return context;
+}
+export function useOptionalKeyboard() {
+    return useContext(KeyboardContext);
+}
+export function useKeyboardShortcut(shortcut) {
+    const keyboard = useKeyboard();
+    useEffect(() => keyboard.registerShortcut(shortcut), [keyboard, shortcut]);
+}
+export function handleKeyboardClick(event, callback) {
+    if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        callback();
+    }
+}

package/dist/runtime/nexus-provider.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type AuthProviderProps } from "./auth-provider";
+import { type ConfigProviderProps } from "./config-provider";
+import { type KeyboardProviderProps } from "./keyboard-provider";
+import { type ThemeProviderProps } from "./theme-provider";
+import { type UIOverlayProviderProps } from "./ui-overlay-provider";
+export interface NexusProviderProps {
+    auth?: Omit<AuthProviderProps, "children">;
+    children: ReactNode;
+    config?: Omit<ConfigProviderProps, "children">;
+    keyboard?: Omit<KeyboardProviderProps, "children">;
+    overlay?: Omit<UIOverlayProviderProps, "children">;
+    theme?: Omit<ThemeProviderProps, "children">;
+}
+export declare function NexusProvider({ auth, children, config, keyboard, overlay, theme, }: NexusProviderProps): import("react").JSX.Element;

package/dist/runtime/nexus-provider.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LicenseGate, TMC_ENTITLEMENTS } from "@themodcraft/license-client";
+import { AuthProvider, } from "./auth-provider";
+import { ConfigProvider, } from "./config-provider";
+import { KeyboardProvider, } from "./keyboard-provider";
+import { ThemeProvider, } from "./theme-provider";
+import { UIOverlayProvider, } from "./ui-overlay-provider";
+export function NexusProvider({ auth, children, config, keyboard, overlay, theme, }) {
+    return (_jsx(LicenseGate, { required: TMC_ENTITLEMENTS.addonProviders, children: _jsx(ConfigProvider, { ...config, children: _jsx(ThemeProvider, { ...theme, children: _jsx(AuthProvider, { ...auth, children: _jsx(KeyboardProvider, { ...keyboard, children: _jsx(UIOverlayProvider, { ...overlay, children: children }) }) }) }) }) }));
+}

package/dist/runtime/theme-provider.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export type ThemeMode = "light" | "dark" | "system";
+export type ThemeTokenValue = string | number;
+export interface ThemeDefinition {
+    className?: string;
+    colorScheme?: string;
+    cssVariables?: Record<string, ThemeTokenValue>;
+    id: string;
+    label?: string;
+}
+export interface ThemeProviderProps {
+    children: ReactNode;
+    defaultMode?: ThemeMode;
+    defaultThemeId?: string;
+    storageKey?: string;
+    themes?: ThemeDefinition[];
+}
+export interface ThemeContextValue {
+    activeTheme?: ThemeDefinition;
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    setThemeId: (themeId: string) => void;
+    themeId: string;
+    themes: ThemeDefinition[];
+}
+export declare function ThemeProvider({ children, defaultMode, defaultThemeId, storageKey, themes, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export declare function useOptionalTheme(): ThemeContextValue | null;

package/dist/runtime/theme-provider.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+const ThemeContext = createContext(null);
+const themeModeEventName = "tmc:nexus-theme-mode";
+const themeIdEventName = "tmc:nexus-theme-id";
+function toCssVariableName(tokenName) {
+    if (tokenName.startsWith("--")) {
+        return tokenName;
+    }
+    return `--tmc-${tokenName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`).replace(/[_\s]+/g, "-")}`;
+}
+function setRootAttribute(name, value) {
+    if (!value) {
+        document.documentElement.removeAttribute(name);
+        return;
+    }
+    document.documentElement.setAttribute(name, value);
+}
+export function ThemeProvider({ children, defaultMode = "system", defaultThemeId, storageKey, themes = [], }) {
+    const initialThemeId = defaultThemeId ?? themes[0]?.id ?? "default";
+    const [themeId, setThemeIdState] = useState(initialThemeId);
+    const [mode, setModeState] = useState(defaultMode);
+    const activeTheme = themes.find((theme) => theme.id === themeId) ?? themes[0];
+    useEffect(() => {
+        if (!storageKey) {
+            return;
+        }
+        const storedThemeId = window.localStorage.getItem(`${storageKey}:theme`);
+        const storedMode = window.localStorage.getItem(`${storageKey}:mode`);
+        if (storedThemeId) {
+            setThemeIdState(storedThemeId);
+        }
+        if (storedMode === "light" || storedMode === "dark" || storedMode === "system") {
+            setModeState(storedMode);
+        }
+    }, [storageKey]);
+    useEffect(() => {
+        if (!storageKey) {
+            return;
+        }
+        function handleStorage(event) {
+            if (event.key === `${storageKey}:theme` && event.newValue) {
+                setThemeIdState(event.newValue);
+            }
+            if (event.key === `${storageKey}:mode` &&
+                (event.newValue === "light" || event.newValue === "dark" || event.newValue === "system")) {
+                setModeState(event.newValue);
+            }
+        }
+        function handleThemeMode(event) {
+            const nextMode = event.detail?.mode;
+            if (nextMode === "light" || nextMode === "dark" || nextMode === "system") {
+                setModeState(nextMode);
+            }
+        }
+        function handleThemeId(event) {
+            const nextThemeId = event.detail?.themeId;
+            if (nextThemeId) {
+                setThemeIdState(nextThemeId);
+            }
+        }
+        window.addEventListener("storage", handleStorage);
+        window.addEventListener(themeModeEventName, handleThemeMode);
+        window.addEventListener(themeIdEventName, handleThemeId);
+        return () => {
+            window.removeEventListener("storage", handleStorage);
+            window.removeEventListener(themeModeEventName, handleThemeMode);
+            window.removeEventListener(themeIdEventName, handleThemeId);
+        };
+    }, [storageKey]);
+    useEffect(() => {
+        const root = document.documentElement;
+        const appliedVariableNames = [];
+        setRootAttribute("data-tmc-theme", activeTheme?.id);
+        setRootAttribute("data-tmc-theme-mode", mode);
+        if (activeTheme?.className) {
+            root.classList.add(activeTheme.className);
+        }
+        if (activeTheme?.colorScheme) {
+            root.style.colorScheme = activeTheme.colorScheme;
+        }
+        Object.entries(activeTheme?.cssVariables ?? {}).forEach(([name, value]) => {
+            const variableName = toCssVariableName(name);
+            appliedVariableNames.push(variableName);
+            root.style.setProperty(variableName, String(value));
+        });
+        return () => {
+            appliedVariableNames.forEach((name) => root.style.removeProperty(name));
+            if (activeTheme?.className) {
+                root.classList.remove(activeTheme.className);
+            }
+            if (activeTheme?.colorScheme) {
+                root.style.removeProperty("color-scheme");
+            }
+        };
+    }, [activeTheme, mode]);
+    const setThemeId = useCallback((nextThemeId) => {
+        setThemeIdState(nextThemeId);
+        if (storageKey) {
+            window.localStorage.setItem(`${storageKey}:theme`, nextThemeId);
+            window.dispatchEvent(new CustomEvent(themeIdEventName, { detail: { themeId: nextThemeId } }));
+        }
+    }, [storageKey]);
+    const setMode = useCallback((nextMode) => {
+        setModeState(nextMode);
+        if (storageKey) {
+            window.localStorage.setItem(`${storageKey}:mode`, nextMode);
+            window.dispatchEvent(new CustomEvent(themeModeEventName, { detail: { mode: nextMode } }));
+        }
+    }, [storageKey]);
+    const value = useMemo(() => ({
+        activeTheme,
+        mode,
+        setMode,
+        setThemeId,
+        themeId,
+        themes,
+    }), [activeTheme, mode, setMode, setThemeId, themeId, themes]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useTheme must be used inside ThemeProvider.");
+    }
+    return context;
+}
+export function useOptionalTheme() {
+    return useContext(ThemeContext);
+}

package/dist/runtime/ui-overlay-provider.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export interface UIOverlayProviderProps {
+    children: ReactNode;
+}
+export interface UIOverlayContextValue {
+    closeOverlay: (id: string) => void;
+    isOverlayOpen: (id: string) => boolean;
+    openOverlay: (id: string) => void;
+    openOverlayIds: string[];
+    toggleOverlay: (id: string) => void;
+}
+export declare function UIOverlayProvider({ children }: UIOverlayProviderProps): import("react").JSX.Element;
+export declare function useUIOverlay(): UIOverlayContextValue;
+export declare function useOptionalUIOverlay(): UIOverlayContextValue | null;

package/dist/runtime/ui-overlay-provider.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+const UIOverlayContext = createContext(null);
+export function UIOverlayProvider({ children }) {
+    const [openOverlayIds, setOpenOverlayIds] = useState([]);
+    const openOverlay = useCallback((id) => {
+        setOpenOverlayIds((current) => (current.includes(id) ? current : [...current, id]));
+    }, []);
+    const closeOverlay = useCallback((id) => {
+        setOpenOverlayIds((current) => current.filter((currentId) => currentId !== id));
+    }, []);
+    const toggleOverlay = useCallback((id) => {
+        setOpenOverlayIds((current) => (current.includes(id)
+            ? current.filter((currentId) => currentId !== id)
+            : [...current, id]));
+    }, []);
+    const value = useMemo(() => ({
+        closeOverlay,
+        isOverlayOpen: (id) => openOverlayIds.includes(id),
+        openOverlay,
+        openOverlayIds,
+        toggleOverlay,
+    }), [closeOverlay, openOverlay, openOverlayIds, toggleOverlay]);
+    return _jsx(UIOverlayContext.Provider, { value: value, children: children });
+}
+export function useUIOverlay() {
+    const context = useContext(UIOverlayContext);
+    if (!context) {
+        throw new Error("useUIOverlay must be used inside UIOverlayProvider.");
+    }
+    return context;
+}
+export function useOptionalUIOverlay() {
+    return useContext(UIOverlayContext);
+}

package/dist/theme/index.d.ts

@@ -0,0 +1 @@
+export { themodcraftV3ThemeProviderPreset, type ThemeProviderPreset, } from "..";

package/dist/theme/index.js

@@ -0,0 +1 @@
+export { themodcraftV3ThemeProviderPreset, } from "..";

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@themodcraft/addon-providers",
+  "version": "1.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "default": "./dist/auth/index.js"
+    },
+    "./keyboard": {
+      "types": "./dist/keyboard/index.d.ts",
+      "default": "./dist/keyboard/index.js"
+    },
+    "./nexus": {
+      "types": "./dist/nexus/index.d.ts",
+      "default": "./dist/nexus/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "default": "./dist/theme/index.js"
+    }
+  },
+  "scripts": {
+    "build": "node ../../tools/build-package.mjs",
+    "prepack": "npm run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@themodcraft/addon-integrations": "1.1.0",
+    "@themodcraft/license-client": "1.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}