@almadar/ui 4.0.1 → 4.1.0

package/dist/hooks/index.cjs

@@ -1016,30 +1016,76 @@ function useEmitEvent() {
     [eventBus]
   );
 }
-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 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",
+  "hud-left",
+  "hud-right",
+  "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;
+  },
+  {}
+);
 var idCounter = 0;
 function generateId() {
   return `slot-content-${++idCounter}-${Date.now()}`;
 }
+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 [slots, setSlots] = react.useState(DEFAULT_SLOTS);
+  const [sources, setSources] = react.useState(DEFAULT_SOURCES);
   const subscribersRef = react.useRef(/* @__PURE__ */ new Set());
   const timersRef = react.useRef(/* @__PURE__ */ new Map());
   const traitIndexRef = react.useRef(/* @__PURE__ */ new Map());
   const traitSubscribersRef = react.useRef(/* @__PURE__ */ new Map());
+  const slots = react.useMemo(() => {
+    const out = { ...DEFAULT_SLOTS };
+    for (const slot of ALL_SLOTS) {
+      out[slot] = aggregateSlot(sources[slot]);
+    }
+    return out;
+  }, [sources]);
   react.useEffect(() => {
     return () => {
       timersRef.current.forEach((timer) => clearTimeout(timer));
@@ -1078,103 +1124,160 @@ function useUISlotManager() {
   const unindexTrait = react.useCallback((traitName) => {
     traitIndexRef.current.delete(traitName);
   }, []);
-  const render = react.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;
-      }
-      if (content.sourceTrait) {
-        indexTraitRender(content.sourceTrait, content);
-        notifyTraitSubscribers(content.sourceTrait, content);
+  const render = react.useCallback(
+    (config) => {
+      const id = generateId();
+      const sourceKey = config.sourceTrait ?? DEFAULT_SOURCE_KEY;
+      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(() => {
+          setSources((prev) => {
+            const slotSources = prev[config.target];
+            if (slotSources && slotSources[sourceKey]?.id === id) {
+              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);
       }
-      notifySubscribers(config.target, content);
-      return { ...prev, [config.target]: content };
-    });
-    return id;
-  }, [notifySubscribers, notifyTraitSubscribers, indexTraitRender]);
-  const clear = react.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);
+      setSources((prev) => {
+        const slotSources = prev[config.target] ?? {};
+        const existing = slotSources[sourceKey];
+        if (existing && existing.priority > content.priority) {
+          console.warn(
+            `[UISlots] Slot "${config.target}" source "${sourceKey}" already has higher priority content (${existing.priority} > ${content.priority})`
+          );
+          return prev;
         }
-        content.onDismiss?.();
+        const nextSources = {
+          ...slotSources,
+          [sourceKey]: content
+        };
+        const nextAll = { ...prev, [config.target]: nextSources };
         if (content.sourceTrait) {
-          unindexTrait(content.sourceTrait);
-          notifyTraitSubscribers(content.sourceTrait, null);
+          indexTraitRender(content.sourceTrait, content);
+          notifyTraitSubscribers(content.sourceTrait, content);
+        }
+        notifySubscribers(config.target, aggregateSlot(nextSources));
+        return nextAll;
+      });
+      return id;
+    },
+    [notifySubscribers, notifyTraitSubscribers, indexTraitRender]
+  );
+  const clear = react.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]: null };
-    });
-  }, [notifySubscribers, notifyTraitSubscribers, unindexTrait]);
-  const clearById = react.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);
+        return { ...prev, [slot]: {} };
+      });
+    },
+    [notifySubscribers, notifyTraitSubscribers, unindexTrait]
+  );
+  const clearBySource = react.useCallback(
+    (slot, sourceTrait) => {
+      const sourceKey = sourceTrait;
+      setSources((prev) => {
+        const slotSources = prev[slot];
+        if (!slotSources || !(sourceKey in slotSources)) return prev;
+        const content = slotSources[sourceKey];
+        const timer = timersRef.current.get(content.id);
         if (timer) {
           clearTimeout(timer);
-          timersRef.current.delete(id);
+          timersRef.current.delete(content.id);
         }
         content.onDismiss?.();
         if (content.sourceTrait) {
           unindexTrait(content.sourceTrait);
           notifyTraitSubscribers(content.sourceTrait, null);
         }
-        notifySubscribers(slot, null);
-        return { ...prev, [slot]: null };
-      }
-      return prev;
-    });
-  }, [notifySubscribers, notifyTraitSubscribers, unindexTrait]);
+        const nextSources = { ...slotSources };
+        delete nextSources[sourceKey];
+        notifySubscribers(slot, aggregateSlot(nextSources));
+        return { ...prev, [slot]: nextSources };
+      });
+    },
+    [notifySubscribers, notifyTraitSubscribers, unindexTrait]
+  );
+  const clearById = react.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 = react.useCallback(() => {
     timersRef.current.forEach((timer) => clearTimeout(timer));
     timersRef.current.clear();
-    setSlots((prev) => {
-      Object.entries(prev).forEach(([slot, content]) => {
-        if (content) {
+    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_SLOTS;
+        notifySubscribers(slot, null);
+      }
+      return DEFAULT_SOURCES;
     });
     traitIndexRef.current.clear();
   }, [notifySubscribers, notifyTraitSubscribers]);
@@ -1184,16 +1287,16 @@ function useUISlotManager() {
       subscribersRef.current.delete(callback);
     };
   }, []);
-  const hasContent = react.useCallback((slot) => {
-    return slots[slot] !== null;
-  }, [slots]);
-  const getContent = react.useCallback((slot) => {
-    return slots[slot];
-  }, [slots]);
+  const hasContent = react.useCallback(
+    (slot) => slots[slot] !== null,
+    [slots]
+  );
+  const getContent = react.useCallback(
+    (slot) => slots[slot],
+    [slots]
+  );
   const getTraitContent = react.useCallback(
-    (traitName) => {
-      return traitIndexRef.current.get(traitName) ?? null;
-    },
+    (traitName) => traitIndexRef.current.get(traitName) ?? null,
     []
   );
   const subscribeTrait = react.useCallback(
@@ -1219,6 +1322,7 @@ function useUISlotManager() {
     slots,
     render,
     clear,
+    clearBySource,
     clearById,
     clearAll,
     subscribe: subscribe2,