@almadar/ui 5.76.1 → 5.76.2

package/dist/context/index.js

@@ -1,4 +1,675 @@
-export { ANONYMOUS_USER, BUILT_IN_THEMES, CurrentPagePathContext, CurrentPagePathProvider, DesignThemeProvider, OrbitalThemeProvider, default as ThemeContext, ThemeProvider, UISlotContext, UISlotProvider, UserContext, UserProvider, useCurrentPagePath, useDesignTheme, useHasPermission, useHasRole, useSlotContent, useSlotHasContent, useTheme, useUISlots, useUser, useUserForEvaluation } from '@almadar/ui/providers';
+import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@almadar/logger';
+import { jsx } from 'react/jsx-runtime';
+export { ANONYMOUS_USER, CurrentPagePathContext, CurrentPagePathProvider, OrbitalThemeProvider, UserContext, UserProvider, useCurrentPagePath, useHasPermission, useHasRole, useUser, useUserForEvaluation } from '@almadar/ui/providers';
+import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from '@almadar/ui/context';
+
+var log = createLogger("almadar:ui:ui-slots");
+var DEFAULT_SOURCE_KEY = "__default__";
+var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
+var ALL_SLOTS = [
+  "main",
+  "sidebar",
+  "modal",
+  "drawer",
+  "overlay",
+  "center",
+  "toast",
+  "hud-top",
+  "hud-bottom",
+  "floating"
+];
+var DEFAULT_SLOTS = ALL_SLOTS.reduce(
+  (acc, slot) => {
+    acc[slot] = null;
+    return acc;
+  },
+  {}
+);
+var DEFAULT_SOURCES = ALL_SLOTS.reduce(
+  (acc, slot) => {
+    acc[slot] = {};
+    return acc;
+  },
+  {}
+);
+function aggregateSlot(sources) {
+  if (!sources) return null;
+  const entries = Object.entries(sources);
+  if (entries.length === 0) return null;
+  if (entries.length === 1) return entries[0][1];
+  const children = entries.map(([, entry]) => ({
+    type: entry.pattern,
+    ...entry.props
+  }));
+  const stackId = `slot-content-stack-${entries.map(([k]) => k).join("-")}`;
+  return {
+    id: stackId,
+    pattern: "stack",
+    props: {
+      direction: "vertical",
+      gap: "lg",
+      children
+    },
+    priority: 0,
+    animation: "fade",
+    sourceTrait: MULTI_SOURCE_STACK_TRAIT
+  };
+}
+function useUISlotManager() {
+  const [sources, setSources] = useState(DEFAULT_SOURCES);
+  const subscribersRef = useRef(/* @__PURE__ */ new Set());
+  const timersRef = useRef(/* @__PURE__ */ new Map());
+  const traitIndexRef = useRef(/* @__PURE__ */ new Map());
+  const traitSubscribersRef = useRef(/* @__PURE__ */ new Map());
+  const slots = useMemo(() => {
+    const out = { ...DEFAULT_SLOTS };
+    for (const slot of ALL_SLOTS) {
+      out[slot] = aggregateSlot(sources[slot]);
+    }
+    return out;
+  }, [sources]);
+  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) {
+        log.error("Subscriber error", { error: error instanceof Error ? error : String(error) });
+      }
+    });
+  }, []);
+  const notifyTraitSubscribers = useCallback(
+    (traitName, content) => {
+      const subs = traitSubscribersRef.current.get(traitName);
+      if (!subs) return;
+      subs.forEach((callback) => {
+        try {
+          callback(content);
+        } catch (error) {
+          log.error("Trait subscriber error", { traitName, error: error instanceof Error ? error : String(error) });
+        }
+      });
+    },
+    []
+  );
+  const indexTraitRender = useCallback(
+    (traitName, content) => {
+      traitIndexRef.current.set(traitName, content);
+    },
+    []
+  );
+  const unindexTrait = useCallback((traitName) => {
+    traitIndexRef.current.delete(traitName);
+  }, []);
+  const render = useCallback(
+    (config) => {
+      const sourceKey = config.sourceTrait ?? DEFAULT_SOURCE_KEY;
+      const id = `slot-content-${config.target}-${sourceKey}`;
+      const content = {
+        id,
+        pattern: config.pattern,
+        props: config.props ?? {},
+        priority: config.priority ?? 0,
+        animation: config.animation ?? "fade",
+        onDismiss: config.onDismiss,
+        sourceTrait: config.sourceTrait,
+        slot: config.target,
+        transitionEvent: config.transitionEvent,
+        fromState: config.fromState,
+        entity: config.entity
+      };
+      if (config.autoDismissMs && config.autoDismissMs > 0) {
+        content.autoDismissAt = Date.now() + config.autoDismissMs;
+        const prevTimer = timersRef.current.get(id);
+        if (prevTimer) clearTimeout(prevTimer);
+        const timer = setTimeout(() => {
+          setSources((prev) => {
+            const slotSources = prev[config.target];
+            if (slotSources && slotSources[sourceKey] === content) {
+              content.onDismiss?.();
+              const next = { ...slotSources };
+              delete next[sourceKey];
+              const updated = { ...prev, [config.target]: next };
+              notifySubscribers(config.target, aggregateSlot(next));
+              return updated;
+            }
+            return prev;
+          });
+          timersRef.current.delete(id);
+        }, config.autoDismissMs);
+        timersRef.current.set(id, timer);
+      }
+      setSources((prev) => {
+        const slotSources = prev[config.target] ?? {};
+        const existing = slotSources[sourceKey];
+        if (existing && existing.priority > content.priority) {
+          log.warn("Slot already has higher priority content", {
+            slot: config.target,
+            sourceKey,
+            existingPriority: existing.priority,
+            newPriority: content.priority
+          });
+          return prev;
+        }
+        const nextSources = {
+          ...slotSources,
+          [sourceKey]: content
+        };
+        const nextAll = { ...prev, [config.target]: nextSources };
+        if (content.sourceTrait) {
+          indexTraitRender(content.sourceTrait, content);
+          notifyTraitSubscribers(content.sourceTrait, content);
+        }
+        log.info("slot:written", {
+          slot: config.target,
+          sourceKey,
+          sourceTrait: content.sourceTrait,
+          patternType: content.pattern,
+          priority: content.priority
+        });
+        notifySubscribers(config.target, aggregateSlot(nextSources));
+        return nextAll;
+      });
+      return id;
+    },
+    [notifySubscribers, notifyTraitSubscribers, indexTraitRender]
+  );
+  const clear = useCallback(
+    (slot) => {
+      setSources((prev) => {
+        const slotSources = prev[slot];
+        if (!slotSources || Object.keys(slotSources).length === 0) {
+          return prev;
+        }
+        for (const content of Object.values(slotSources)) {
+          const timer = timersRef.current.get(content.id);
+          if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(content.id);
+          }
+          content.onDismiss?.();
+          if (content.sourceTrait) {
+            unindexTrait(content.sourceTrait);
+            notifyTraitSubscribers(content.sourceTrait, null);
+          }
+        }
+        notifySubscribers(slot, null);
+        return { ...prev, [slot]: {} };
+      });
+    },
+    [notifySubscribers, notifyTraitSubscribers, unindexTrait]
+  );
+  const clearBySource = useCallback(
+    (slot, sourceTrait) => {
+      const sourceKey = sourceTrait;
+      setSources((prev) => {
+        const slotSources = prev[slot];
+        if (!slotSources || !(sourceKey in slotSources)) {
+          log.debug("slot:clear-noop", { slot, sourceTrait, reason: !slotSources ? "no-slot" : "no-source" });
+          return prev;
+        }
+        const content = slotSources[sourceKey];
+        const timer = timersRef.current.get(content.id);
+        if (timer) {
+          clearTimeout(timer);
+          timersRef.current.delete(content.id);
+        }
+        content.onDismiss?.();
+        if (content.sourceTrait) {
+          unindexTrait(content.sourceTrait);
+          notifyTraitSubscribers(content.sourceTrait, null);
+        }
+        const nextSources = { ...slotSources };
+        delete nextSources[sourceKey];
+        log.info("slot:cleared", { slot, sourceTrait, lastPatternType: content.pattern });
+        notifySubscribers(slot, aggregateSlot(nextSources));
+        return { ...prev, [slot]: nextSources };
+      });
+    },
+    [notifySubscribers, notifyTraitSubscribers, unindexTrait]
+  );
+  const clearById = useCallback(
+    (id) => {
+      setSources((prev) => {
+        for (const slot of ALL_SLOTS) {
+          const slotSources = prev[slot];
+          if (!slotSources) continue;
+          const matchKey = Object.keys(slotSources).find(
+            (k) => slotSources[k].id === id
+          );
+          if (!matchKey) continue;
+          const content = slotSources[matchKey];
+          const timer = timersRef.current.get(id);
+          if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+          }
+          content.onDismiss?.();
+          if (content.sourceTrait) {
+            unindexTrait(content.sourceTrait);
+            notifyTraitSubscribers(content.sourceTrait, null);
+          }
+          const nextSources = { ...slotSources };
+          delete nextSources[matchKey];
+          notifySubscribers(slot, aggregateSlot(nextSources));
+          return { ...prev, [slot]: nextSources };
+        }
+        return prev;
+      });
+    },
+    [notifySubscribers, notifyTraitSubscribers, unindexTrait]
+  );
+  const clearAll = useCallback(() => {
+    timersRef.current.forEach((timer) => clearTimeout(timer));
+    timersRef.current.clear();
+    setSources((prev) => {
+      for (const slot of ALL_SLOTS) {
+        const slotSources = prev[slot];
+        if (!slotSources) continue;
+        for (const content of Object.values(slotSources)) {
+          content.onDismiss?.();
+          if (content.sourceTrait) {
+            notifyTraitSubscribers(content.sourceTrait, null);
+          }
+        }
+        notifySubscribers(slot, null);
+      }
+      return DEFAULT_SOURCES;
+    });
+    traitIndexRef.current.clear();
+  }, [notifySubscribers, notifyTraitSubscribers]);
+  const subscribe = useCallback((callback) => {
+    subscribersRef.current.add(callback);
+    return () => {
+      subscribersRef.current.delete(callback);
+    };
+  }, []);
+  const hasContent = useCallback(
+    (slot) => slots[slot] !== null,
+    [slots]
+  );
+  const getContent = useCallback(
+    (slot) => slots[slot] ?? null,
+    [slots]
+  );
+  const getTraitContent = useCallback(
+    (traitName) => traitIndexRef.current.get(traitName) ?? null,
+    []
+  );
+  const subscribeTrait = useCallback(
+    (traitName, callback) => {
+      let set = traitSubscribersRef.current.get(traitName);
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        traitSubscribersRef.current.set(traitName, set);
+      }
+      set.add(callback);
+      return () => {
+        const s = traitSubscribersRef.current.get(traitName);
+        if (!s) return;
+        s.delete(callback);
+        if (s.size === 0) {
+          traitSubscribersRef.current.delete(traitName);
+        }
+      };
+    },
+    []
+  );
+  const updateTraitContent = useCallback(
+    (traitName, content) => {
+      const id = `slot-content-trait-${traitName}`;
+      const fullContent = { ...content, id, sourceTrait: traitName };
+      indexTraitRender(traitName, fullContent);
+      notifyTraitSubscribers(traitName, fullContent);
+      return id;
+    },
+    [indexTraitRender, notifyTraitSubscribers]
+  );
+  return {
+    slots,
+    render,
+    clear,
+    clearBySource,
+    clearById,
+    clearAll,
+    subscribe,
+    hasContent,
+    getContent,
+    getTraitContent,
+    subscribeTrait,
+    updateTraitContent
+  };
+}
+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 log2 = createLogger("almadar:ui:theme");
+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
+  },
+  // Layer 1 skin axes — truly-unique themes (compact tech / editorial / brutalist dense / display-heavy / touch-first)
+  {
+    name: "prism",
+    displayName: "Prism",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "gazette",
+    displayName: "Gazette",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "terminal",
+    displayName: "Terminal",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "atelier",
+    displayName: "Atelier",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "kiosk",
+    displayName: "Kiosk",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "linear-clean",
+    displayName: "Linear Clean",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "notion-editorial",
+    displayName: "Notion Editorial",
+    hasLightMode: true,
+    hasDarkMode: true
+  },
+  {
+    name: "bloomberg-dense",
+    displayName: "Bloomberg Dense",
+    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 {
+        log2.warn("Theme not found", {
+          theme: newTheme,
+          available: availableThemes.map((t) => t.name)
+        });
+      }
+    },
+    [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;
 
 // lib/themeTokens.ts
 function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
@@ -215,5 +886,14 @@ function resolveThemeForRuntime(theme) {
   if (typeof theme === "string") return void 0;
   return theme;
 }
+var DesignThemeProvider = ThemeProvider$1;
+function useDesignTheme() {
+  const { theme, setTheme, availableThemes } = useTheme$1();
+  return {
+    designTheme: theme,
+    setDesignTheme: setTheme,
+    availableThemes: availableThemes.map((t) => t.name)
+  };
+}
 
-export { resolveThemeForRuntime, themeTokensToCssVars };
+export { BUILT_IN_THEMES, DesignThemeProvider, ThemeContext_default as ThemeContext, ThemeProvider, UISlotContext, UISlotProvider, resolveThemeForRuntime, themeTokensToCssVars, useDesignTheme, useSlotContent, useSlotHasContent, useTheme, useUISlots };