'use strict';

var React = require('react');

/**
 * theme.ts — Dark/light theme system for @nice2dev/ui-graphics editors.
 *
 * Provides CSS custom properties, theme context, and auto-detection
 * of system dark mode preference.
 */
// ── Themes ──────────────────────────────────────────────────────
const LIGHT_THEME = {
    mode: "light",
    colors: {
        bg: "#ffffff",
        bgAlt: "#f8f9fa",
        surface: "#f1f3f5",
        surfaceHover: "#e9ecef",
        border: "#dee2e6",
        text: "#212529",
        textSecondary: "#495057",
        textMuted: "#868e96",
        accent: "#228be6",
        accentHover: "#1c7ed6",
        accentText: "#ffffff",
        error: "#e03131",
        warning: "#f59f00",
        success: "#2f9e44",
        canvasBg: "#e9ecef",
        toolbarBg: "#f8f9fa",
        panelBg: "#ffffff",
        statusBarBg: "#f1f3f5",
        selectionBg: "rgba(34, 139, 230, 0.1)",
        selectionBorder: "rgba(34, 139, 230, 0.5)",
    },
    spacing: { xs: 2, sm: 4, md: 8, lg: 16, xl: 24 },
    radius: { sm: 2, md: 4, lg: 8 },
    fontSize: { xs: 10, sm: 12, md: 14, lg: 16 },
};
const DARK_THEME = {
    mode: "dark",
    colors: {
        bg: "#1a1b1e",
        bgAlt: "#25262b",
        surface: "#2c2e33",
        surfaceHover: "#373a40",
        border: "#373a40",
        text: "#c1c2c5",
        textSecondary: "#909296",
        textMuted: "#5c5f66",
        accent: "#339af0",
        accentHover: "#228be6",
        accentText: "#ffffff",
        error: "#ff6b6b",
        warning: "#ffd43b",
        success: "#69db7c",
        canvasBg: "#141517",
        toolbarBg: "#25262b",
        panelBg: "#1a1b1e",
        statusBarBg: "#25262b",
        selectionBg: "rgba(51, 154, 240, 0.15)",
        selectionBorder: "rgba(51, 154, 240, 0.5)",
    },
    spacing: { xs: 2, sm: 4, md: 8, lg: 16, xl: 24 },
    radius: { sm: 2, md: 4, lg: 8 },
    fontSize: { xs: 10, sm: 12, md: 14, lg: 16 },
};
// ── CSS Custom Properties ───────────────────────────────────────
/** Generate CSS custom properties from a theme. */
function themeToCssVars(theme) {
    const vars = {};
    for (const [key, value] of Object.entries(theme.colors)) {
        vars[`--nice-editor-${camelToKebab(key)}`] = value;
    }
    for (const [key, value] of Object.entries(theme.spacing)) {
        vars[`--nice-editor-spacing-${key}`] = `${value}px`;
    }
    for (const [key, value] of Object.entries(theme.radius)) {
        vars[`--nice-editor-radius-${key}`] = `${value}px`;
    }
    for (const [key, value] of Object.entries(theme.fontSize)) {
        vars[`--nice-editor-font-${key}`] = `${value}px`;
    }
    return vars;
}
/** Apply theme CSS variables to a DOM element. */
function applyThemeToElement(element, theme) {
    const vars = themeToCssVars(theme);
    for (const [prop, value] of Object.entries(vars)) {
        element.style.setProperty(prop, value);
    }
}
function camelToKebab(str) {
    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
}
// ── System Dark Mode Detection ──────────────────────────────────
/** Detect if system prefers dark mode. */
function systemPrefersDark() {
    var _a, _b;
    if (typeof window === "undefined")
        return false;
    return (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-color-scheme: dark)").matches) !== null && _b !== void 0 ? _b : false;
}
/** Resolve "auto" mode to "light" or "dark". */
function resolveThemeMode(mode) {
    if (mode === "auto")
        return systemPrefersDark() ? "dark" : "light";
    return mode;
}
const ThemeContext = React.createContext({
    theme: DARK_THEME,
    mode: "dark",
    setMode: () => { },
    toggleMode: () => { },
});
/** Provider for editor theme. Supports "light", "dark", or "auto". */
const NiceEditorThemeProvider = ({ initialMode = "auto", storageKey = "nice2dev.graphics.theme", children }) => {
    const [mode, setModeState] = React.useState(() => {
        try {
            const saved = localStorage.getItem(storageKey);
            if (saved === "light" || saved === "dark" || saved === "auto")
                return saved;
        }
        catch ( /* ignore */_a) { /* ignore */ }
        return initialMode;
    });
    const [resolvedMode, setResolvedMode] = React.useState(resolveThemeMode(mode));
    // Listen for system theme changes when in "auto" mode
    React.useEffect(() => {
        if (mode !== "auto") {
            setResolvedMode(mode);
            return;
        }
        setResolvedMode(systemPrefersDark() ? "dark" : "light");
        const mq = window.matchMedia("(prefers-color-scheme: dark)");
        const handler = (e) => setResolvedMode(e.matches ? "dark" : "light");
        mq.addEventListener("change", handler);
        return () => mq.removeEventListener("change", handler);
    }, [mode]);
    const setMode = React.useCallback((m) => {
        setModeState(m);
        try {
            localStorage.setItem(storageKey, m);
        }
        catch ( /* ignore */_a) { /* ignore */ }
    }, [storageKey]);
    const toggleMode = React.useCallback(() => {
        setMode(resolvedMode === "dark" ? "light" : "dark");
    }, [resolvedMode, setMode]);
    const theme = resolvedMode === "dark" ? DARK_THEME : LIGHT_THEME;
    const cssVars = React.useMemo(() => themeToCssVars(theme), [theme]);
    const value = React.useMemo(() => ({ theme, mode, setMode, toggleMode }), [theme, mode, setMode, toggleMode]);
    return React.createElement(ThemeContext.Provider, { value }, React.createElement("div", {
        style: cssVars,
        "data-theme": resolvedMode,
    }, children));
};
/** Hook to access editor theme. */
function useEditorTheme() {
    return React.useContext(ThemeContext);
}

exports.DARK_THEME = DARK_THEME;
exports.LIGHT_THEME = LIGHT_THEME;
exports.NiceEditorThemeProvider = NiceEditorThemeProvider;
exports.applyThemeToElement = applyThemeToElement;
exports.resolveThemeMode = resolveThemeMode;
exports.systemPrefersDark = systemPrefersDark;
exports.themeToCssVars = themeToCssVars;
exports.useEditorTheme = useEditorTheme;
//# sourceMappingURL=theme.js.map
