@almadar/ui 5.158.0 → 5.159.0

package/dist/context/index.cjs

@@ -1,11 +1,98 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var logger = require('@almadar/logger');
+var core = require('@almadar/core');
 var jsxRuntime = require('react/jsx-runtime');
 var providers = require('@almadar/ui/providers');
 var context = require('@almadar/ui/context');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function expressionEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!expressionEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (a !== null && b !== null && typeof a === "object" && typeof b === "object" && !Array.isArray(a) && !Array.isArray(b) && !(a instanceof Date) && !(b instanceof Date)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    for (const key of aKeys) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!expressionEqual(
+        a[key],
+        b[key]
+      )) return false;
+    }
+    return true;
+  }
+  return false;
+}
+function isPlainSlotObject(value) {
+  if (value === null || value === void 0 || typeof value !== "object") return false;
+  if (Array.isArray(value)) return false;
+  if (React__default.default.isValidElement(value)) return false;
+  if (value instanceof Date) return false;
+  if (core.isRenderBindingMarker(value)) return false;
+  return true;
+}
+function shareValue(prev, next) {
+  if (Object.is(prev, next)) return { value: prev, equal: true };
+  const prevMarker = core.isRenderBindingMarker(prev) ? prev : void 0;
+  const nextMarker = core.isRenderBindingMarker(next) ? next : void 0;
+  if (prevMarker !== void 0 || nextMarker !== void 0) {
+    if (prevMarker !== void 0 && nextMarker !== void 0 && expressionEqual(prevMarker.expression, nextMarker.expression)) {
+      return { value: prev, equal: true };
+    }
+    return { value: next, equal: false };
+  }
+  if (prev instanceof Date || next instanceof Date) {
+    return prev instanceof Date && next instanceof Date && prev.getTime() === next.getTime() ? { value: prev, equal: true } : { value: next, equal: false };
+  }
+  if (typeof prev === "function" || typeof next === "function") return { value: next, equal: false };
+  if (React__default.default.isValidElement(prev) || React__default.default.isValidElement(next)) return { value: next, equal: false };
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    let equal = prev.length === next.length;
+    const out = new Array(next.length);
+    for (let i = 0; i < next.length; i++) {
+      const child = shareValue(prev[i], next[i]);
+      out[i] = child.value;
+      if (!child.equal) equal = false;
+    }
+    return equal ? { value: prev, equal: true } : { value: out, equal: false };
+  }
+  if (isPlainSlotObject(prev) && isPlainSlotObject(next)) {
+    const prevKeys = Object.keys(prev);
+    const nextKeys = Object.keys(next);
+    let equal = prevKeys.length === nextKeys.length;
+    const out = {};
+    for (const key of nextKeys) {
+      if (!Object.prototype.hasOwnProperty.call(prev, key)) {
+        equal = false;
+        out[key] = next[key];
+        continue;
+      }
+      const child = shareValue(prev[key], next[key]);
+      out[key] = child.value;
+      if (!child.equal) equal = false;
+    }
+    return equal ? { value: prev, equal: true } : { value: out, equal: false };
+  }
+  return { value: next, equal: false };
+}
+function reconcileSlotProps(prev, next) {
+  const result = shareValue(prev, next);
+  return { value: result.value, equal: result.equal };
+}
+
+// hooks/useUISlots.ts
 var log = logger.createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
 var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
@@ -60,25 +147,25 @@ function aggregateSlot(sources) {
   };
 }
 function useUISlotManager() {
-  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 [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(() => {
+  React.useEffect(() => {
     return () => {
       timersRef.current.forEach((timer) => clearTimeout(timer));
       timersRef.current.clear();
     };
   }, []);
-  const notifySubscribers = react.useCallback((slot, content) => {
+  const notifySubscribers = React.useCallback((slot, content) => {
     subscribersRef.current.forEach((callback) => {
       try {
         callback(slot, content);
@@ -87,7 +174,7 @@ function useUISlotManager() {
       }
     });
   }, []);
-  const notifyTraitSubscribers = react.useCallback(
+  const notifyTraitSubscribers = React.useCallback(
     (traitName, content) => {
       const subs = traitSubscribersRef.current.get(traitName);
       if (!subs) return;
@@ -101,16 +188,16 @@ function useUISlotManager() {
     },
     []
   );
-  const indexTraitRender = react.useCallback(
+  const indexTraitRender = React.useCallback(
     (traitName, content) => {
       traitIndexRef.current.set(traitName, content);
     },
     []
   );
-  const unindexTrait = react.useCallback((traitName) => {
+  const unindexTrait = React.useCallback((traitName) => {
     traitIndexRef.current.delete(traitName);
   }, []);
-  const render = react.useCallback(
+  const render = React.useCallback(
     (config) => {
       const sourceKey = config.sourceTrait ?? DEFAULT_SOURCE_KEY;
       const id = `slot-content-${config.target}-${sourceKey}`;
@@ -160,6 +247,14 @@ function useUISlotManager() {
           });
           return prev;
         }
+        if (existing && existing.priority === content.priority && existing.pattern === content.pattern && existing.animation === content.animation && existing.transitionEvent === content.transitionEvent && existing.fromState === content.fromState && existing.entity === content.entity && existing.nodeId === content.nodeId && existing.autoDismissAt === void 0 && content.autoDismissAt === void 0 && existing.onDismiss === void 0 === (content.onDismiss === void 0)) {
+          const reconciled = reconcileSlotProps(existing.props, content.props);
+          if (reconciled.equal) {
+            log.debug("slot:flush-bail", { slot: config.target, sourceKey, pattern: content.pattern });
+            return prev;
+          }
+          content.props = reconciled.value;
+        }
         const nextSources = {
           ...slotSources,
           [sourceKey]: content
@@ -191,7 +286,7 @@ function useUISlotManager() {
     },
     [notifySubscribers, notifyTraitSubscribers, indexTraitRender]
   );
-  const clear = react.useCallback(
+  const clear = React.useCallback(
     (slot) => {
       setSources((prev) => {
         const slotSources = prev[slot];
@@ -216,7 +311,7 @@ function useUISlotManager() {
     },
     [notifySubscribers, notifyTraitSubscribers, unindexTrait]
   );
-  const clearBySource = react.useCallback(
+  const clearBySource = React.useCallback(
     (slot, sourceTrait) => {
       const sourceKey = sourceTrait;
       setSources((prev) => {
@@ -245,7 +340,7 @@ function useUISlotManager() {
     },
     [notifySubscribers, notifyTraitSubscribers, unindexTrait]
   );
-  const clearById = react.useCallback(
+  const clearById = React.useCallback(
     (id) => {
       setSources((prev) => {
         for (const slot of ALL_SLOTS) {
@@ -276,7 +371,7 @@ function useUISlotManager() {
     },
     [notifySubscribers, notifyTraitSubscribers, unindexTrait]
   );
-  const clearAll = react.useCallback(() => {
+  const clearAll = React.useCallback(() => {
     timersRef.current.forEach((timer) => clearTimeout(timer));
     timersRef.current.clear();
     setSources((prev) => {
@@ -295,25 +390,25 @@ function useUISlotManager() {
     });
     traitIndexRef.current.clear();
   }, [notifySubscribers, notifyTraitSubscribers]);
-  const subscribe = react.useCallback((callback) => {
+  const subscribe = React.useCallback((callback) => {
     subscribersRef.current.add(callback);
     return () => {
       subscribersRef.current.delete(callback);
     };
   }, []);
-  const hasContent = react.useCallback(
+  const hasContent = React.useCallback(
     (slot) => slots[slot] !== null,
     [slots]
   );
-  const getContent = react.useCallback(
+  const getContent = React.useCallback(
     (slot) => slots[slot] ?? null,
     [slots]
   );
-  const getTraitContent = react.useCallback(
+  const getTraitContent = React.useCallback(
     (traitName) => traitIndexRef.current.get(traitName) ?? null,
     []
   );
-  const subscribeTrait = react.useCallback(
+  const subscribeTrait = React.useCallback(
     (traitName, callback) => {
       let set = traitSubscribersRef.current.get(traitName);
       if (!set) {
@@ -332,7 +427,7 @@ function useUISlotManager() {
     },
     []
   );
-  const updateTraitContent = react.useCallback(
+  const updateTraitContent = React.useCallback(
     (traitName, content) => {
       const id = `slot-content-trait-${traitName}`;
       const fullContent = { ...content, id, sourceTrait: traitName };
@@ -357,14 +452,14 @@ function useUISlotManager() {
     updateTraitContent
   };
 }
-var UISlotContext = react.createContext(null);
+var UISlotContext = React.createContext(null);
 function UISlotProvider({ children }) {
   const slotManager = useUISlotManager();
-  const contextValue = react.useMemo(() => slotManager, [slotManager]);
+  const contextValue = React.useMemo(() => slotManager, [slotManager]);
   return /* @__PURE__ */ jsxRuntime.jsx(UISlotContext.Provider, { value: contextValue, children });
 }
 function useUISlots() {
-  const context = react.useContext(UISlotContext);
+  const context = React.useContext(UISlotContext);
   if (!context) {
     throw new Error(
       "useUISlots must be used within a UISlotProvider. Make sure your component tree is wrapped with <UISlotProvider>."
@@ -512,7 +607,7 @@ var BUILT_IN_THEMES = [
     hasDarkMode: true
   }
 ];
-var ThemeContext = react.createContext(void 0);
+var ThemeContext = React.createContext(void 0);
 var THEME_STORAGE_KEY = "theme";
 var MODE_STORAGE_KEY = "theme-mode";
 function getSystemMode() {
@@ -532,14 +627,14 @@ var ThemeProvider = ({
   defaultMode = "system",
   targetRef
 }) => {
-  const availableThemes = react.useMemo(() => {
+  const availableThemes = React.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] = react.useState(() => {
+  const [theme, setThemeState] = React.useState(() => {
     if (isScoped || typeof window === "undefined") return defaultTheme;
     const stored = localStorage.getItem(THEME_STORAGE_KEY);
     const validThemes = [
@@ -551,7 +646,7 @@ var ThemeProvider = ({
     }
     return defaultTheme;
   });
-  const [mode, setModeState] = react.useState(() => {
+  const [mode, setModeState] = React.useState(() => {
     if (isScoped || typeof window === "undefined") return defaultMode;
     const stored = localStorage.getItem(MODE_STORAGE_KEY);
     if (stored === "light" || stored === "dark" || stored === "system") {
@@ -559,14 +654,14 @@ var ThemeProvider = ({
     }
     return defaultMode;
   });
-  const [resolvedMode, setResolvedMode] = react.useState(
+  const [resolvedMode, setResolvedMode] = React.useState(
     () => resolveMode(mode)
   );
-  const appliedTheme = react.useMemo(
+  const appliedTheme = React.useMemo(
     () => `${theme}-${resolvedMode}`,
     [theme, resolvedMode]
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     const updateResolved = () => {
       setResolvedMode(resolveMode(mode));
     };
@@ -579,7 +674,7 @@ var ThemeProvider = ({
     }
     return void 0;
   }, [mode]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isScoped) {
       if (targetRef?.current) {
         targetRef.current.setAttribute("data-theme", appliedTheme);
@@ -594,7 +689,7 @@ var ThemeProvider = ({
     root.classList.remove("light", "dark");
     root.classList.add(resolvedMode);
   }, [appliedTheme, resolvedMode, targetRef, isScoped]);
-  const setTheme = react.useCallback(
+  const setTheme = React.useCallback(
     (newTheme) => {
       const validTheme = availableThemes.find((t) => t.name === newTheme);
       if (validTheme) {
@@ -611,17 +706,17 @@ var ThemeProvider = ({
     },
     [availableThemes]
   );
-  const setMode = react.useCallback((newMode) => {
+  const setMode = React.useCallback((newMode) => {
     setModeState(newMode);
     if (!isScoped && typeof window !== "undefined") {
       localStorage.setItem(MODE_STORAGE_KEY, newMode);
     }
   }, []);
-  const toggleMode = react.useCallback(() => {
+  const toggleMode = React.useCallback(() => {
     const newMode = resolvedMode === "dark" ? "light" : "dark";
     setMode(newMode);
   }, [resolvedMode, setMode]);
-  const contextValue = react.useMemo(
+  const contextValue = React.useMemo(
     () => ({
       theme,
       mode,
@@ -646,7 +741,7 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children });
 };
 function useTheme() {
-  const context = react.useContext(ThemeContext);
+  const context = React.useContext(ThemeContext);
   if (context === void 0) {
     return {
       theme: "wireframe",

package/dist/context/index.js

@@ -1,9 +1,92 @@
-import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import React, { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { createLogger } from '@almadar/logger';
+import { isRenderBindingMarker } from '@almadar/core';
 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';
 
+function expressionEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!expressionEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (a !== null && b !== null && typeof a === "object" && typeof b === "object" && !Array.isArray(a) && !Array.isArray(b) && !(a instanceof Date) && !(b instanceof Date)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) return false;
+    for (const key of aKeys) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!expressionEqual(
+        a[key],
+        b[key]
+      )) return false;
+    }
+    return true;
+  }
+  return false;
+}
+function isPlainSlotObject(value) {
+  if (value === null || value === void 0 || typeof value !== "object") return false;
+  if (Array.isArray(value)) return false;
+  if (React.isValidElement(value)) return false;
+  if (value instanceof Date) return false;
+  if (isRenderBindingMarker(value)) return false;
+  return true;
+}
+function shareValue(prev, next) {
+  if (Object.is(prev, next)) return { value: prev, equal: true };
+  const prevMarker = isRenderBindingMarker(prev) ? prev : void 0;
+  const nextMarker = isRenderBindingMarker(next) ? next : void 0;
+  if (prevMarker !== void 0 || nextMarker !== void 0) {
+    if (prevMarker !== void 0 && nextMarker !== void 0 && expressionEqual(prevMarker.expression, nextMarker.expression)) {
+      return { value: prev, equal: true };
+    }
+    return { value: next, equal: false };
+  }
+  if (prev instanceof Date || next instanceof Date) {
+    return prev instanceof Date && next instanceof Date && prev.getTime() === next.getTime() ? { value: prev, equal: true } : { value: next, equal: false };
+  }
+  if (typeof prev === "function" || typeof next === "function") return { value: next, equal: false };
+  if (React.isValidElement(prev) || React.isValidElement(next)) return { value: next, equal: false };
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    let equal = prev.length === next.length;
+    const out = new Array(next.length);
+    for (let i = 0; i < next.length; i++) {
+      const child = shareValue(prev[i], next[i]);
+      out[i] = child.value;
+      if (!child.equal) equal = false;
+    }
+    return equal ? { value: prev, equal: true } : { value: out, equal: false };
+  }
+  if (isPlainSlotObject(prev) && isPlainSlotObject(next)) {
+    const prevKeys = Object.keys(prev);
+    const nextKeys = Object.keys(next);
+    let equal = prevKeys.length === nextKeys.length;
+    const out = {};
+    for (const key of nextKeys) {
+      if (!Object.prototype.hasOwnProperty.call(prev, key)) {
+        equal = false;
+        out[key] = next[key];
+        continue;
+      }
+      const child = shareValue(prev[key], next[key]);
+      out[key] = child.value;
+      if (!child.equal) equal = false;
+    }
+    return equal ? { value: prev, equal: true } : { value: out, equal: false };
+  }
+  return { value: next, equal: false };
+}
+function reconcileSlotProps(prev, next) {
+  const result = shareValue(prev, next);
+  return { value: result.value, equal: result.equal };
+}
+
+// hooks/useUISlots.ts
 var log = createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
 var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
@@ -158,6 +241,14 @@ function useUISlotManager() {
           });
           return prev;
         }
+        if (existing && existing.priority === content.priority && existing.pattern === content.pattern && existing.animation === content.animation && existing.transitionEvent === content.transitionEvent && existing.fromState === content.fromState && existing.entity === content.entity && existing.nodeId === content.nodeId && existing.autoDismissAt === void 0 && content.autoDismissAt === void 0 && existing.onDismiss === void 0 === (content.onDismiss === void 0)) {
+          const reconciled = reconcileSlotProps(existing.props, content.props);
+          if (reconciled.equal) {
+            log.debug("slot:flush-bail", { slot: config.target, sourceKey, pattern: content.pattern });
+            return prev;
+          }
+          content.props = reconciled.value;
+        }
         const nextSources = {
           ...slotSources,
           [sourceKey]: content