@almadar/ui 4.0.1 → 4.1.0

package/dist/hooks/index.js

@@ -1014,30 +1014,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] = useState(DEFAULT_SLOTS);
+  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));
@@ -1076,103 +1122,160 @@ function useUISlotManager() {
   const unindexTrait = useCallback((traitName) => {
     traitIndexRef.current.delete(traitName);
   }, []);
-  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;
-      }
-      if (content.sourceTrait) {
-        indexTraitRender(content.sourceTrait, content);
-        notifyTraitSubscribers(content.sourceTrait, content);
+  const render = 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 = 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 = 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 = 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 = 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 = 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();
-    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]);
@@ -1182,16 +1285,16 @@ function useUISlotManager() {
       subscribersRef.current.delete(callback);
     };
   }, []);
-  const hasContent = useCallback((slot) => {
-    return slots[slot] !== null;
-  }, [slots]);
-  const getContent = useCallback((slot) => {
-    return slots[slot];
-  }, [slots]);
+  const hasContent = useCallback(
+    (slot) => slots[slot] !== null,
+    [slots]
+  );
+  const getContent = useCallback(
+    (slot) => slots[slot],
+    [slots]
+  );
   const getTraitContent = useCallback(
-    (traitName) => {
-      return traitIndexRef.current.get(traitName) ?? null;
-    },
+    (traitName) => traitIndexRef.current.get(traitName) ?? null,
     []
   );
   const subscribeTrait = useCallback(
@@ -1217,6 +1320,7 @@ function useUISlotManager() {
     slots,
     render,
     clear,
+    clearBySource,
     clearById,
     clearAll,
     subscribe: subscribe2,

package/dist/hooks/useUISlots.d.ts

@@ -1,3 +1,4 @@
+import type { EventPayload } from '@almadar/core';
 /**
  * Valid UI slot names
  */
@@ -6,6 +7,14 @@ export type UISlot = 'main' | 'sidebar' | 'modal' | 'drawer' | 'overlay' | 'cent
  * Animation types for slot transitions
  */
 export type SlotAnimation = 'fade' | 'slide' | 'scale' | 'none';
+/**
+ * Pattern-specific props carried by a rendered slot. Pattern authors decide
+ * the concrete shape; the slot manager treats this as an opaque record of
+ * field-like values sourced from the event-bus payload vocabulary so the
+ * same types round-trip through render-ui → useUISlots → UISlotRenderer
+ * without a private re-coercion boundary.
+ */
+export type SlotProps = Record<string, EventPayload[string] | unknown>;
 /**
  * Content rendered in a slot
  */
@@ -15,7 +24,7 @@ export interface SlotContent {
     /** Pattern/component type to render */
     pattern: string;
     /** Props to pass to the pattern component */
-    props: Record<string, unknown>;
+    props: SlotProps;
     /** Priority for conflict resolution (higher wins) */
     priority: number;
     /** Animation for showing/hiding */
@@ -38,7 +47,7 @@ export interface RenderUIConfig {
     /** Pattern/component to render */
     pattern: string;
     /** Props for the pattern */
-    props?: Record<string, unknown>;
+    props?: SlotProps;
     /** Priority (default: 0) */
     priority?: number;
     /** Animation type */
@@ -68,12 +77,20 @@ export type TraitChangeCallback = (content: SlotContent | null) => void;
  * UI Slot Manager interface
  */
 export interface UISlotManager {
-    /** Current content for each slot */
+    /**
+     * Current aggregate content for each slot. Single-source slots hold
+     * that source's SlotContent; multi-source slots hold a synthetic
+     * `stack` wrapper whose `children` prop is the list of per-source
+     * pattern configs in insertion order. Single consumers can continue
+     * to read `slots[slot]` without knowing the slot is multi-source.
+     */
     slots: Record<UISlot, SlotContent | null>;
     /** Render content to a slot */
     render: (config: RenderUIConfig) => string;
-    /** Clear a specific slot */
+    /** Clear all source entries from a slot */
     clear: (slot: UISlot) => void;
+    /** Clear a single source's contribution from a slot, keeping others */
+    clearBySource: (slot: UISlot, sourceTrait: string) => void;
     /** Clear content by ID */
     clearById: (id: string) => void;
     /** Clear all slots */
@@ -82,7 +99,7 @@ export interface UISlotManager {
     subscribe: (callback: SlotChangeCallback) => () => void;
     /** Check if a slot has content */
     hasContent: (slot: UISlot) => boolean;
-    /** Get content for a slot */
+    /** Get aggregated content for a slot (single or synthetic stack) */
     getContent: (slot: UISlot) => SlotContent | null;
     /**
      * Look up the most recent `render-ui` output a given trait produced,

package/dist/runtime/index.cjs

@@ -37828,6 +37828,34 @@ var init_UISlotRenderer = __esm({
 
 // hooks/index.ts
 init_useEventBus();
+var ALL_SLOTS = [
+  "main",
+  "sidebar",
+  "modal",
+  "drawer",
+  "overlay",
+  "center",
+  "toast",
+  "hud-top",
+  "hud-bottom",
+  "hud-left",
+  "hud-right",
+  "floating"
+];
+ALL_SLOTS.reduce(
+  (acc, slot) => {
+    acc[slot] = null;
+    return acc;
+  },
+  {}
+);
+ALL_SLOTS.reduce(
+  (acc, slot) => {
+    acc[slot] = {};
+    return acc;
+  },
+  {}
+);
 
 // hooks/useUIEvents.ts
 init_useEventBus();
@@ -38870,13 +38898,11 @@ function SlotBridge() {
   return null;
 }
 function applyServerEffects(effects, uiSlots, onNavigate) {
-  const perSlotRenders = /* @__PURE__ */ new Map();
   for (const eff of effects) {
     if (eff.type === "render-ui" && eff.slot && eff.pattern) {
       const patternRecord = eff.pattern;
       const { type: patternType, children, ...inlineProps } = patternRecord;
       const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
-      const sourceTrait = eff.traitName ?? "server";
       uiSlots.render({
         target: eff.slot,
         pattern: patternType,
@@ -38884,38 +38910,12 @@ function applyServerEffects(effects, uiSlots, onNavigate) {
           ...inlineProps,
           ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {}
         },
-        sourceTrait
+        sourceTrait: eff.traitName ?? "server"
       });
-      const bucket = perSlotRenders.get(eff.slot) ?? [];
-      bucket.push({
-        sourceTrait,
-        pattern: {
-          type: patternType,
-          ...inlineProps,
-          ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {}
-        }
-      });
-      perSlotRenders.set(eff.slot, bucket);
     } else if (eff.type === "navigate" && eff.route && onNavigate) {
       onNavigate(eff.route, eff.params);
     }
   }
-  for (const [slot, bucket] of perSlotRenders) {
-    const distinctSources = new Set(bucket.map((b) => b.sourceTrait));
-    if (distinctSources.size <= 1) continue;
-    uiSlots.render({
-      target: slot,
-      pattern: "stack",
-      props: {
-        direction: "vertical",
-        gap: "lg",
-        children: bucket.map((b) => b.pattern)
-      },
-      // Use a synthetic wrapper source trait; individual traits' frames
-      // already live in the per-trait index from the per-effect loop.
-      sourceTrait: "__multi_source_stack__"
-    });
-  }
 }
 function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback, persistence }) {
   const slotsActions = useSlotsActions();

package/dist/runtime/index.js

@@ -37783,6 +37783,34 @@ var init_UISlotRenderer = __esm({
 
 // hooks/index.ts
 init_useEventBus();
+var ALL_SLOTS = [
+  "main",
+  "sidebar",
+  "modal",
+  "drawer",
+  "overlay",
+  "center",
+  "toast",
+  "hud-top",
+  "hud-bottom",
+  "hud-left",
+  "hud-right",
+  "floating"
+];
+ALL_SLOTS.reduce(
+  (acc, slot) => {
+    acc[slot] = null;
+    return acc;
+  },
+  {}
+);
+ALL_SLOTS.reduce(
+  (acc, slot) => {
+    acc[slot] = {};
+    return acc;
+  },
+  {}
+);
 
 // hooks/useUIEvents.ts
 init_useEventBus();
@@ -38825,13 +38853,11 @@ function SlotBridge() {
   return null;
 }
 function applyServerEffects(effects, uiSlots, onNavigate) {
-  const perSlotRenders = /* @__PURE__ */ new Map();
   for (const eff of effects) {
     if (eff.type === "render-ui" && eff.slot && eff.pattern) {
       const patternRecord = eff.pattern;
       const { type: patternType, children, ...inlineProps } = patternRecord;
       const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
-      const sourceTrait = eff.traitName ?? "server";
       uiSlots.render({
         target: eff.slot,
         pattern: patternType,
@@ -38839,38 +38865,12 @@ function applyServerEffects(effects, uiSlots, onNavigate) {
           ...inlineProps,
           ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {}
         },
-        sourceTrait
+        sourceTrait: eff.traitName ?? "server"
       });
-      const bucket = perSlotRenders.get(eff.slot) ?? [];
-      bucket.push({
-        sourceTrait,
-        pattern: {
-          type: patternType,
-          ...inlineProps,
-          ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {}
-        }
-      });
-      perSlotRenders.set(eff.slot, bucket);
     } else if (eff.type === "navigate" && eff.route && onNavigate) {
       onNavigate(eff.route, eff.params);
     }
   }
-  for (const [slot, bucket] of perSlotRenders) {
-    const distinctSources = new Set(bucket.map((b) => b.sourceTrait));
-    if (distinctSources.size <= 1) continue;
-    uiSlots.render({
-      target: slot,
-      pattern: "stack",
-      props: {
-        direction: "vertical",
-        gap: "lg",
-        children: bucket.map((b) => b.pattern)
-      },
-      // Use a synthetic wrapper source trait; individual traits' frames
-      // already live in the per-trait index from the per-effect loop.
-      sourceTrait: "__multi_source_stack__"
-    });
-  }
 }
 function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback, persistence }) {
   const slotsActions = useSlotsActions();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",