@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/esm/core/theme.js

@@ -1,168 +1,170 @@
-import React from '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 ──────────────────────────────────────────────────────
+import React from "react";
 const LIGHT_THEME = {
-    mode: 'light',
-    colors: {
-        bg: 'var(--nice-bg, #fff)',
-        bgAlt: 'var(--nice-bg-secondary, #f8f9fa)',
-        surface: 'var(--nice-bg-secondary, #f1f3f5)',
-        surfaceHover: 'var(--nice-border, #e9ecef)',
-        border: 'var(--nice-border, #dee2e6)',
-        text: 'var(--nice-text, #212529)',
-        textSecondary: '#495057',
-        textMuted: 'var(--nice-text-secondary, #868e96)',
-        accent: 'var(--nice-primary, #228be6)',
-        accentHover: '#1c7ed6',
-        accentText: 'var(--nice-text-primary, #fff)',
-        error: '#e03131',
-        warning: '#f59f00',
-        success: 'var(--nice-success, #2f9e44)',
-        canvasBg: 'var(--nice-border, #e9ecef)',
-        toolbarBg: 'var(--nice-bg-secondary, #f8f9fa)',
-        panelBg: 'var(--nice-bg, #fff)',
-        statusBarBg: 'var(--nice-bg-secondary, #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 },
+  mode: "light",
+  colors: {
+    bg: "var(--nice-bg, #fff)",
+    bgAlt: "var(--nice-bg-secondary, #f8f9fa)",
+    surface: "var(--nice-bg-secondary, #f1f3f5)",
+    surfaceHover: "var(--nice-border, #e9ecef)",
+    border: "var(--nice-border, #dee2e6)",
+    text: "var(--nice-text, #212529)",
+    textSecondary: "#495057",
+    textMuted: "var(--nice-text-secondary, #868e96)",
+    accent: "var(--nice-primary, #228be6)",
+    accentHover: "#1c7ed6",
+    accentText: "var(--nice-text-primary, #fff)",
+    error: "#e03131",
+    warning: "#f59f00",
+    success: "var(--nice-success, #2f9e44)",
+    canvasBg: "var(--nice-border, #e9ecef)",
+    toolbarBg: "var(--nice-bg-secondary, #f8f9fa)",
+    panelBg: "var(--nice-bg, #fff)",
+    statusBarBg: "var(--nice-bg-secondary, #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: 'var(--nice-bg, #1a1b1e)',
-        bgAlt: 'var(--nice-bg-secondary, #25262b)',
-        surface: 'var(--nice-bg-secondary, #2c2e33)',
-        surfaceHover: 'var(--nice-border, #373a40)',
-        border: 'var(--nice-border, #373a40)',
-        text: 'var(--nice-text, #c1c2c5)',
-        textSecondary: '#909296',
-        textMuted: 'var(--nice-text-secondary, #5c5f66)',
-        accent: 'var(--nice-info, #339af0)',
-        accentHover: 'var(--nice-primary, #228be6)',
-        accentText: 'var(--nice-text-primary, #fff)',
-        error: 'var(--nice-danger, #ff6b6b)',
-        warning: '#ffd43b',
-        success: '#69db7c',
-        canvasBg: 'var(--nice-bg, #141517)',
-        toolbarBg: 'var(--nice-bg-secondary, #25262b)',
-        panelBg: 'var(--nice-bg, #1a1b1e)',
-        statusBarBg: 'var(--nice-bg-secondary, #25262b)',
-        selectionBg: 'var(--nice-primary-tint-15, 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 },
+  mode: "dark",
+  colors: {
+    bg: "var(--nice-bg, #1a1b1e)",
+    bgAlt: "var(--nice-bg-secondary, #25262b)",
+    surface: "var(--nice-bg-secondary, #2c2e33)",
+    surfaceHover: "var(--nice-border, #373a40)",
+    border: "var(--nice-border, #373a40)",
+    text: "var(--nice-text, #c1c2c5)",
+    textSecondary: "#909296",
+    textMuted: "var(--nice-text-secondary, #5c5f66)",
+    accent: "var(--nice-info, #339af0)",
+    accentHover: "var(--nice-primary, #228be6)",
+    accentText: "var(--nice-text-primary, #fff)",
+    error: "var(--nice-danger, #ff6b6b)",
+    warning: "#ffd43b",
+    success: "#69db7c",
+    canvasBg: "var(--nice-bg, #141517)",
+    toolbarBg: "var(--nice-bg-secondary, #25262b)",
+    panelBg: "var(--nice-bg, #1a1b1e)",
+    statusBarBg: "var(--nice-bg-secondary, #25262b)",
+    selectionBg: "var(--nice-primary-tint-15, 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;
+  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);
-    }
+  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()}`);
+  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;
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
 }
-/** Resolve "auto" mode to "light" or "dark". */
 function resolveThemeMode(mode) {
-    if (mode === 'auto') {
-        return systemPrefersDark() ? 'dark' : 'light';
-    }
-    return mode;
+  if (mode === "auto") {
+    return systemPrefersDark() ? "dark" : "light";
+  }
+  return mode;
 }
 const ThemeContext = /* @__PURE__ */ React.createContext({
-    theme: DARK_THEME,
-    mode: 'dark',
-    setMode: () => { },
-    toggleMode: () => { },
+  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 (_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 (_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', {
+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 {
+    }
+    return initialMode;
+  });
+  const [resolvedMode, setResolvedMode] = React.useState(resolveThemeMode(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 {
+      }
+    },
+    [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));
+        "data-theme": resolvedMode
+      },
+      children
+    )
+  );
 };
-/** Hook to access editor theme. */
 function useEditorTheme() {
-    return React.useContext(ThemeContext);
+  return React.useContext(ThemeContext);
 }
-
-export { DARK_THEME, LIGHT_THEME, NiceEditorThemeProvider, applyThemeToElement, resolveThemeMode, systemPrefersDark, themeToCssVars, useEditorTheme };
+export {
+  DARK_THEME,
+  LIGHT_THEME,
+  NiceEditorThemeProvider,
+  applyThemeToElement,
+  resolveThemeMode,
+  systemPrefersDark,
+  themeToCssVars,
+  useEditorTheme
+};