@almadar/ui 2.15.8 → 2.15.11

package/dist/context/index.js

@@ -1,10 +1,424 @@
-import { ThemeProvider, useTheme } from '../chunk-DKQN5FVU.js';
-export { BUILT_IN_THEMES, ThemeContext_default as ThemeContext, ThemeProvider, UISlotContext, UISlotProvider, useSlotContent, useSlotHasContent, useTheme, useUISlots } from '../chunk-DKQN5FVU.js';
-import '../chunk-3JGAROCW.js';
-import '../chunk-PKBMQBKP.js';
-import { createContext, useCallback, useMemo, useContext } from 'react';
+import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+var DEFAULT_SLOTS = {
+  main: null,
+  sidebar: null,
+  modal: null,
+  drawer: null,
+  overlay: null,
+  center: null,
+  toast: null,
+  "hud-top": null,
+  "hud-bottom": null,
+  "hud-left": null,
+  "hud-right": null,
+  floating: null
+};
+var idCounter = 0;
+function generateId() {
+  return `slot-content-${++idCounter}-${Date.now()}`;
+}
+function useUISlotManager() {
+  const [slots, setSlots] = useState(DEFAULT_SLOTS);
+  const subscribersRef = useRef(/* @__PURE__ */ new Set());
+  const timersRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    return () => {
+      timersRef.current.forEach((timer) => clearTimeout(timer));
+      timersRef.current.clear();
+    };
+  }, []);
+  const notifySubscribers = useCallback((slot, content) => {
+    subscribersRef.current.forEach((callback) => {
+      try {
+        callback(slot, content);
+      } catch (error) {
+        console.error("[UISlots] Subscriber error:", error);
+      }
+    });
+  }, []);
+  const render = useCallback((config) => {
+    const id = generateId();
+    const content = {
+      id,
+      pattern: config.pattern,
+      props: config.props ?? {},
+      priority: config.priority ?? 0,
+      animation: config.animation ?? "fade",
+      onDismiss: config.onDismiss,
+      sourceTrait: config.sourceTrait
+    };
+    if (config.autoDismissMs && config.autoDismissMs > 0) {
+      content.autoDismissAt = Date.now() + config.autoDismissMs;
+      const timer = setTimeout(() => {
+        setSlots((prev) => {
+          if (prev[config.target]?.id === id) {
+            content.onDismiss?.();
+            notifySubscribers(config.target, null);
+            return { ...prev, [config.target]: null };
+          }
+          return prev;
+        });
+        timersRef.current.delete(id);
+      }, config.autoDismissMs);
+      timersRef.current.set(id, timer);
+    }
+    setSlots((prev) => {
+      const existing = prev[config.target];
+      if (existing && existing.priority > content.priority) {
+        console.warn(
+          `[UISlots] Slot "${config.target}" already has higher priority content (${existing.priority} > ${content.priority})`
+        );
+        return prev;
+      }
+      notifySubscribers(config.target, content);
+      return { ...prev, [config.target]: content };
+    });
+    return id;
+  }, [notifySubscribers]);
+  const clear = useCallback((slot) => {
+    setSlots((prev) => {
+      const content = prev[slot];
+      if (content) {
+        const timer = timersRef.current.get(content.id);
+        if (timer) {
+          clearTimeout(timer);
+          timersRef.current.delete(content.id);
+        }
+        content.onDismiss?.();
+        notifySubscribers(slot, null);
+      }
+      return { ...prev, [slot]: null };
+    });
+  }, [notifySubscribers]);
+  const clearById = useCallback((id) => {
+    setSlots((prev) => {
+      const entry = Object.entries(prev).find(([, content]) => content?.id === id);
+      if (entry) {
+        const [slot, content] = entry;
+        const timer = timersRef.current.get(id);
+        if (timer) {
+          clearTimeout(timer);
+          timersRef.current.delete(id);
+        }
+        content.onDismiss?.();
+        notifySubscribers(slot, null);
+        return { ...prev, [slot]: null };
+      }
+      return prev;
+    });
+  }, [notifySubscribers]);
+  const clearAll = useCallback(() => {
+    timersRef.current.forEach((timer) => clearTimeout(timer));
+    timersRef.current.clear();
+    setSlots((prev) => {
+      Object.entries(prev).forEach(([slot, content]) => {
+        if (content) {
+          content.onDismiss?.();
+          notifySubscribers(slot, null);
+        }
+      });
+      return DEFAULT_SLOTS;
+    });
+  }, [notifySubscribers]);
+  const subscribe = useCallback((callback) => {
+    subscribersRef.current.add(callback);
+    return () => {
+      subscribersRef.current.delete(callback);
+    };
+  }, []);
+  const hasContent = useCallback((slot) => {
+    return slots[slot] !== null;
+  }, [slots]);
+  const getContent = useCallback((slot) => {
+    return slots[slot];
+  }, [slots]);
+  return {
+    slots,
+    render,
+    clear,
+    clearById,
+    clearAll,
+    subscribe,
+    hasContent,
+    getContent
+  };
+}
+var UISlotContext = createContext(null);
+function UISlotProvider({ children }) {
+  const slotManager = useUISlotManager();
+  const contextValue = useMemo(() => slotManager, [slotManager]);
+  return /* @__PURE__ */ jsx(UISlotContext.Provider, { value: contextValue, children });
+}
+function useUISlots() {
+  const context = useContext(UISlotContext);
+  if (!context) {
+    throw new Error(
+      "useUISlots must be used within a UISlotProvider. Make sure your component tree is wrapped with <UISlotProvider>."
+    );
+  }
+  return context;
+}
+function useSlotContent(slot) {
+  const { getContent } = useUISlots();
+  return getContent(slot);
+}
+function useSlotHasContent(slot) {
+  const { hasContent } = useUISlots();
+  return hasContent(slot);
+}
+var BUILT_IN_THEMES = [
+  {
+    name: "wireframe",
+    displayName: "Wireframe",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "minimalist",
+    displayName: "Minimalist",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "almadar",
+    displayName: "Almadar",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "trait-wars",
+    displayName: "Trait Wars",
+    hasLightMode: false,
+    hasDarkMode: true
+  },
+  // Extended themes
+  {
+    name: "ocean",
+    displayName: "Ocean",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "forest",
+    displayName: "Forest",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "sunset",
+    displayName: "Sunset",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "lavender",
+    displayName: "Lavender",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "rose",
+    displayName: "Rose",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "slate",
+    displayName: "Slate",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "ember",
+    displayName: "Ember",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "midnight",
+    displayName: "Midnight",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "sand",
+    displayName: "Sand",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "neon",
+    displayName: "Neon",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "arctic",
+    displayName: "Arctic",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "copper",
+    displayName: "Copper",
+    hasLightMode: true,
+    hasDarkMode: true
+  }
+];
+var ThemeContext = createContext(void 0);
+var THEME_STORAGE_KEY = "theme";
+var MODE_STORAGE_KEY = "theme-mode";
+function getSystemMode() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveMode(mode) {
+  if (mode === "system") {
+    return getSystemMode();
+  }
+  return mode;
+}
+var ThemeProvider = ({
+  children,
+  themes = [],
+  defaultTheme = "wireframe",
+  defaultMode = "system",
+  targetRef
+}) => {
+  const availableThemes = useMemo(() => {
+    const themeMap = /* @__PURE__ */ new Map();
+    BUILT_IN_THEMES.forEach((t) => themeMap.set(t.name, t));
+    themes.forEach((t) => themeMap.set(t.name, t));
+    return Array.from(themeMap.values());
+  }, [themes]);
+  const isScoped = !!targetRef;
+  const [theme, setThemeState] = useState(() => {
+    if (isScoped || typeof window === "undefined") return defaultTheme;
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    const validThemes = [
+      ...BUILT_IN_THEMES.map((t) => t.name),
+      ...themes.map((t) => t.name)
+    ];
+    if (stored && validThemes.includes(stored)) {
+      return stored;
+    }
+    return defaultTheme;
+  });
+  const [mode, setModeState] = useState(() => {
+    if (isScoped || typeof window === "undefined") return defaultMode;
+    const stored = localStorage.getItem(MODE_STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") {
+      return stored;
+    }
+    return defaultMode;
+  });
+  const [resolvedMode, setResolvedMode] = useState(
+    () => resolveMode(mode)
+  );
+  const appliedTheme = useMemo(
+    () => `${theme}-${resolvedMode}`,
+    [theme, resolvedMode]
+  );
+  useEffect(() => {
+    const updateResolved = () => {
+      setResolvedMode(resolveMode(mode));
+    };
+    updateResolved();
+    if (mode === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const handleChange = () => updateResolved();
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    return void 0;
+  }, [mode]);
+  useEffect(() => {
+    if (isScoped) {
+      if (targetRef?.current) {
+        targetRef.current.setAttribute("data-theme", appliedTheme);
+        targetRef.current.classList.remove("light", "dark");
+        targetRef.current.classList.add(resolvedMode);
+      }
+      return;
+    }
+    const root = document.documentElement;
+    root.setAttribute("data-theme", appliedTheme);
+    root.classList.remove("light", "dark");
+    root.classList.add(resolvedMode);
+  }, [appliedTheme, resolvedMode, targetRef, isScoped]);
+  const setTheme = useCallback(
+    (newTheme) => {
+      const validTheme = availableThemes.find((t) => t.name === newTheme);
+      if (validTheme) {
+        setThemeState(newTheme);
+        if (!isScoped && typeof window !== "undefined") {
+          localStorage.setItem(THEME_STORAGE_KEY, newTheme);
+        }
+      } else {
+        console.warn(
+          `Theme "${newTheme}" not found. Available: ${availableThemes.map((t) => t.name).join(", ")}`
+        );
+      }
+    },
+    [availableThemes]
+  );
+  const setMode = useCallback((newMode) => {
+    setModeState(newMode);
+    if (!isScoped && typeof window !== "undefined") {
+      localStorage.setItem(MODE_STORAGE_KEY, newMode);
+    }
+  }, []);
+  const toggleMode = useCallback(() => {
+    const newMode = resolvedMode === "dark" ? "light" : "dark";
+    setMode(newMode);
+  }, [resolvedMode, setMode]);
+  const contextValue = useMemo(
+    () => ({
+      theme,
+      mode,
+      resolvedMode,
+      setTheme,
+      setMode,
+      toggleMode,
+      availableThemes,
+      appliedTheme
+    }),
+    [
+      theme,
+      mode,
+      resolvedMode,
+      setTheme,
+      setMode,
+      toggleMode,
+      availableThemes,
+      appliedTheme
+    ]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+};
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    return {
+      theme: "wireframe",
+      mode: "light",
+      resolvedMode: "light",
+      setTheme: () => {
+      },
+      setMode: () => {
+      },
+      toggleMode: () => {
+      },
+      availableThemes: BUILT_IN_THEMES,
+      appliedTheme: "wireframe-light"
+    };
+  }
+  return context;
+}
+var ThemeContext_default = ThemeContext;
+
 // context/DesignThemeContext.tsx
 var DesignThemeProvider = ThemeProvider;
 function useDesignTheme() {
@@ -114,4 +528,4 @@ function useUserForEvaluation() {
   return isLoggedIn && user ? user : void 0;
 }
 
-export { ANONYMOUS_USER, DesignThemeProvider, UserContext, UserProvider, useDesignTheme, useHasPermission, useHasRole, useUser, useUserForEvaluation };
+export { ANONYMOUS_USER, BUILT_IN_THEMES, DesignThemeProvider, ThemeContext_default as ThemeContext, ThemeProvider, UISlotContext, UISlotProvider, UserContext, UserProvider, useDesignTheme, useHasPermission, useHasRole, useSlotContent, useSlotHasContent, useTheme, useUISlots, useUser, useUserForEvaluation };