@almadar/ui 6.61.0 → 6.62.0

package/dist/components/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React89 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var React89 = require('react');
 var providers = require('@almadar/ui/providers');
 var core = require('@almadar/core');
 var logger = require('@almadar/logger');
@@ -291,11 +291,143 @@ var init_SvgBranch = __esm({
     exports.SvgBranch.displayName = "SvgBranch";
   }
 });
+
+// lib/theme-scale.ts
+var THEME_SCALE_KEYS;
+var init_theme_scale = __esm({
+  "lib/theme-scale.ts"() {
+    THEME_SCALE_KEYS = {
+      height: ["button-sm", "button-md", "button-lg", "input-sm", "input-md", "input-lg", "row-compact", "row-normal", "row-spacious", "icon-default"],
+      minHeight: ["button-sm", "button-md", "button-lg", "input-sm", "input-md", "input-lg", "row-compact", "row-normal", "row-spacious"],
+      width: ["icon-default"],
+      fontSize: ["display-1", "display-2"],
+      borderRadius: ["container", "interactive", "pill"],
+      boxShadow: ["elevation-card", "elevation-popover", "elevation-dialog", "elevation-toast", "elevation-interactive", "elevation-pressed"],
+      spacing: ["card-sm", "card-md", "card-lg", "dialog", "section"]
+    };
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+var scale, twMerge;
+var init_cn = __esm({
+  "lib/cn.ts"() {
+    init_theme_scale();
+    scale = (keys) => [...keys];
+    twMerge = tailwindMerge.extendTailwindMerge({
+      extend: {
+        theme: {
+          spacing: scale(THEME_SCALE_KEYS.spacing),
+          borderRadius: scale(THEME_SCALE_KEYS.borderRadius)
+        },
+        classGroups: {
+          h: [{ h: scale(THEME_SCALE_KEYS.height) }],
+          "min-h": [{ "min-h": scale(THEME_SCALE_KEYS.minHeight) }],
+          w: [{ w: scale(THEME_SCALE_KEYS.width) }],
+          "font-size": [{ text: scale(THEME_SCALE_KEYS.fontSize) }],
+          shadow: [{ shadow: scale(THEME_SCALE_KEYS.boxShadow) }]
+        }
+      }
+    });
+  }
+});
+function isMotionEnabled() {
+  if (typeof document === "undefined") return true;
+  if (motionEnabledCache !== null) return motionEnabledCache;
+  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
+  motionEnabledCache = v !== "off";
+  return motionEnabledCache;
+}
+function usePresence(show, opts) {
+  const { animation, animate = true, onExited } = opts;
+  const [mounted, setMounted] = React89.useState(show);
+  const [exiting, setExiting] = React89.useState(false);
+  const prev = React89.useRef(show);
+  const onExitedRef = React89.useRef(onExited);
+  onExitedRef.current = onExited;
+  const safeTimer = React89.useRef(null);
+  const clearSafe = React89.useCallback(() => {
+    if (safeTimer.current) {
+      clearTimeout(safeTimer.current);
+      safeTimer.current = null;
+    }
+  }, []);
+  const finishExit = React89.useCallback(() => {
+    clearSafe();
+    setExiting(false);
+    setMounted(false);
+    onExitedRef.current?.();
+  }, [clearSafe]);
+  React89.useLayoutEffect(() => {
+    const moving = animate && isMotionEnabled();
+    if (show && !prev.current) {
+      setExiting(false);
+      setMounted(true);
+    } else if (!show && prev.current) {
+      if (moving) {
+        setExiting(true);
+        clearSafe();
+        safeTimer.current = setTimeout(finishExit, SAFE_EXIT_MS);
+      } else {
+        setMounted(false);
+        setExiting(false);
+        onExitedRef.current?.();
+      }
+    }
+    prev.current = show;
+  }, [show, animate, clearSafe, finishExit]);
+  React89.useEffect(() => () => clearSafe(), [clearSafe]);
+  const disabled = !animate || !isMotionEnabled();
+  const className = disabled ? "" : show ? `animate-${animation}-in` : `animate-${animation}-out`;
+  const onAnimationEnd = React89.useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (exiting) finishExit();
+    },
+    [exiting, finishExit]
+  );
+  return { mounted, exiting, className, onAnimationEnd };
+}
+var SAFE_EXIT_MS, motionEnabledCache; exports.Presence = void 0;
+var init_Presence = __esm({
+  "components/core/atoms/Presence.tsx"() {
+    "use client";
+    init_domPassthrough();
+    init_cn();
+    SAFE_EXIT_MS = 1e3;
+    motionEnabledCache = null;
+    exports.Presence = ({ show, className, children, ...rest }) => {
+      const { mounted, className: animClass, onAnimationEnd } = usePresence(show, rest);
+      if (!mounted) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(animClass, className), onAnimationEnd, ...domPassthrough(rest), children });
+    };
+    exports.Presence.displayName = "Presence";
+  }
+});
+
+// lib/svgMotion.ts
+function svgMotionClass(motion, animated) {
+  if (!animated || !isMotionEnabled()) return void 0;
+  return SVG_MOTION_CLASSES[motion];
+}
+var SVG_MOTION_CLASSES;
+var init_svgMotion = __esm({
+  "lib/svgMotion.ts"() {
+    init_Presence();
+    SVG_MOTION_CLASSES = {
+      flowDash: "almadar-svg-flow-dash",
+      pulseRing: "almadar-svg-pulse-ring",
+      pulseExpand: "almadar-svg-pulse-expand"
+    };
+  }
+});
 exports.SvgConnection = void 0;
 var init_SvgConnection = __esm({
   "components/core/atoms/svg/SvgConnection.tsx"() {
     "use client";
     init_domPassthrough();
+    init_svgMotion();
     exports.SvgConnection = ({
       x1 = 10,
       y1 = 50,
@@ -320,7 +452,7 @@ var init_SvgConnection = __esm({
         {
           ...asRoot ? void 0 : a11y,
           className: [
-            variant === "animated" ? "almadar-svg-flow-dash" : void 0,
+            svgMotionClass("flowDash", variant === "animated"),
             className
           ].filter(Boolean).join(" ") || void 0,
           x1,
@@ -347,6 +479,7 @@ var init_SvgFlow = __esm({
   "components/core/atoms/svg/SvgFlow.tsx"() {
     "use client";
     init_domPassthrough();
+    init_svgMotion();
     flowIdCounter = 0;
     DEFAULT_POINTS = [[10, 50], [50, 20], [90, 50]];
     exports.SvgFlow = ({
@@ -394,7 +527,7 @@ var init_SvgFlow = __esm({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             markerEnd: `url(#${markerId})`,
-            className: animated ? "almadar-svg-flow-dash" : void 0,
+            className: svgMotionClass("flowDash", animated),
             strokeDasharray: animated ? "8 6" : void 0
           }
         )
@@ -828,6 +961,7 @@ var init_SvgNode = __esm({
   "components/core/atoms/svg/SvgNode.tsx"() {
     "use client";
     init_domPassthrough();
+    init_svgMotion();
     exports.SvgNode = ({
       x = 50,
       y = 50,
@@ -854,7 +988,7 @@ var init_SvgNode = __esm({
             stroke: color,
             strokeWidth: 1,
             opacity: 0.3,
-            className: "almadar-svg-pulse-ring"
+            className: svgMotionClass("pulseRing", true)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -889,23 +1023,12 @@ var init_SvgNode = __esm({
     exports.SvgNode.displayName = "SvgNode";
   }
 });
-var PULSE_KEYFRAMES; exports.SvgPulse = void 0;
+exports.SvgPulse = void 0;
 var init_SvgPulse = __esm({
   "components/core/atoms/svg/SvgPulse.tsx"() {
     "use client";
     init_domPassthrough();
-    PULSE_KEYFRAMES = `
-@keyframes almadar-svg-pulse-expand {
-  0% {
-    transform: scale(0.3);
-    opacity: 0.4;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-`;
+    init_svgMotion();
     exports.SvgPulse = ({
       cx = 70,
       cy = 70,
@@ -921,8 +1044,8 @@ var init_SvgPulse = __esm({
       ...rest
     }) => {
       const a11y = domPassthrough(rest);
+      const pulseClass2 = svgMotionClass("pulseExpand", animated);
       const inner = /* @__PURE__ */ jsxRuntime.jsxs("g", { ...asRoot ? void 0 : a11y, className, opacity, children: [
-        animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: PULSE_KEYFRAMES }),
         Array.from({ length: rings }).map((_, i) => {
           const ringRadius = (i + 1) / rings * maxRadius;
           const ringOpacity = 1 - i / rings * 0.6;
@@ -936,11 +1059,9 @@ var init_SvgPulse = __esm({
               fill: "none",
               stroke: color,
               strokeWidth: 1.5,
-              opacity: animated ? void 0 : ringOpacity * 0.4,
-              style: animated ? {
-                transformOrigin: `${cx}px ${cy}px`,
-                animation: `almadar-svg-pulse-expand 2s ease-out ${delay}s infinite`
-              } : void 0
+              opacity: pulseClass2 ? void 0 : ringOpacity * 0.4,
+              className: pulseClass2,
+              style: pulseClass2 ? { animationDelay: `${delay}s` } : void 0
             },
             i
           );
@@ -1171,47 +1292,6 @@ var init_svg = __esm({
     init_SvgStack();
   }
 });
-
-// lib/theme-scale.ts
-var THEME_SCALE_KEYS;
-var init_theme_scale = __esm({
-  "lib/theme-scale.ts"() {
-    THEME_SCALE_KEYS = {
-      height: ["button-sm", "button-md", "button-lg", "input-sm", "input-md", "input-lg", "row-compact", "row-normal", "row-spacious", "icon-default"],
-      minHeight: ["button-sm", "button-md", "button-lg", "input-sm", "input-md", "input-lg", "row-compact", "row-normal", "row-spacious"],
-      width: ["icon-default"],
-      fontSize: ["display-1", "display-2"],
-      borderRadius: ["container", "interactive", "pill"],
-      boxShadow: ["elevation-card", "elevation-popover", "elevation-dialog", "elevation-toast", "elevation-interactive", "elevation-pressed"],
-      spacing: ["card-sm", "card-md", "card-lg", "dialog", "section"]
-    };
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx.clsx(inputs));
-}
-var scale, twMerge;
-var init_cn = __esm({
-  "lib/cn.ts"() {
-    init_theme_scale();
-    scale = (keys) => [...keys];
-    twMerge = tailwindMerge.extendTailwindMerge({
-      extend: {
-        theme: {
-          spacing: scale(THEME_SCALE_KEYS.spacing),
-          borderRadius: scale(THEME_SCALE_KEYS.borderRadius)
-        },
-        classGroups: {
-          h: [{ h: scale(THEME_SCALE_KEYS.height) }],
-          "min-h": [{ "min-h": scale(THEME_SCALE_KEYS.minHeight) }],
-          w: [{ w: scale(THEME_SCALE_KEYS.width) }],
-          "font-size": [{ text: scale(THEME_SCALE_KEYS.fontSize) }],
-          shadow: [{ shadow: scale(THEME_SCALE_KEYS.boxShadow) }]
-        }
-      }
-    });
-  }
-});
 function notify(key) {
   keyListeners.get(key)?.forEach((cb) => cb());
 }
@@ -3769,7 +3849,8 @@ var init_en = __esm({
       "avl.stateInitial": "start",
       "avl.stateTerminal": "end",
       "avl.guardCaption": "The transition only fires when this check is true.",
-      "avl.effectsCaption": "What runs, in order, when the transition fires."
+      "avl.effectsCaption": "What runs, in order, when the transition fires.",
+      "aria.carousel": "carousel"
     };
   }
 });
@@ -5452,79 +5533,6 @@ var init_useTapReveal = __esm({
   "hooks/useTapReveal.ts"() {
   }
 });
-function isMotionEnabled() {
-  if (typeof document === "undefined") return true;
-  if (motionEnabledCache !== null) return motionEnabledCache;
-  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
-  motionEnabledCache = v !== "off";
-  return motionEnabledCache;
-}
-function usePresence(show, opts) {
-  const { animation, animate = true, onExited } = opts;
-  const [mounted, setMounted] = React89.useState(show);
-  const [exiting, setExiting] = React89.useState(false);
-  const prev = React89.useRef(show);
-  const onExitedRef = React89.useRef(onExited);
-  onExitedRef.current = onExited;
-  const safeTimer = React89.useRef(null);
-  const clearSafe = React89.useCallback(() => {
-    if (safeTimer.current) {
-      clearTimeout(safeTimer.current);
-      safeTimer.current = null;
-    }
-  }, []);
-  const finishExit = React89.useCallback(() => {
-    clearSafe();
-    setExiting(false);
-    setMounted(false);
-    onExitedRef.current?.();
-  }, [clearSafe]);
-  React89.useLayoutEffect(() => {
-    const moving = animate && isMotionEnabled();
-    if (show && !prev.current) {
-      setExiting(false);
-      setMounted(true);
-    } else if (!show && prev.current) {
-      if (moving) {
-        setExiting(true);
-        clearSafe();
-        safeTimer.current = setTimeout(finishExit, SAFE_EXIT_MS);
-      } else {
-        setMounted(false);
-        setExiting(false);
-        onExitedRef.current?.();
-      }
-    }
-    prev.current = show;
-  }, [show, animate, clearSafe, finishExit]);
-  React89.useEffect(() => () => clearSafe(), [clearSafe]);
-  const disabled = !animate || !isMotionEnabled();
-  const className = disabled ? "" : show ? `animate-${animation}-in` : `animate-${animation}-out`;
-  const onAnimationEnd = React89.useCallback(
-    (e) => {
-      if (e.target !== e.currentTarget) return;
-      if (exiting) finishExit();
-    },
-    [exiting, finishExit]
-  );
-  return { mounted, exiting, className, onAnimationEnd };
-}
-var SAFE_EXIT_MS, motionEnabledCache; exports.Presence = void 0;
-var init_Presence = __esm({
-  "components/core/atoms/Presence.tsx"() {
-    "use client";
-    init_domPassthrough();
-    init_cn();
-    SAFE_EXIT_MS = 1e3;
-    motionEnabledCache = null;
-    exports.Presence = ({ show, className, children, ...rest }) => {
-      const { mounted, className: animClass, onAnimationEnd } = usePresence(show, rest);
-      if (!mounted) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(animClass, className), onAnimationEnd, ...domPassthrough(rest), children });
-    };
-    exports.Presence.displayName = "Presence";
-  }
-});
 
 // lib/motion-tokens.ts
 function cssTimeMs(value) {
@@ -13140,7 +13148,7 @@ var init_CodeBlock = __esm({
           () => naturalTabs?.find((lang) => lang === pageLocale) ?? naturalTabs?.[0] ?? "en"
         );
         const activeNaturalLanguage = naturalTabs?.includes(naturalLanguage) === true ? naturalLanguage : naturalTabs?.[0] ?? "en";
-        const codeDir = naturalTabs && i18n.coreTables[activeNaturalLanguage].meta.rtl ? "rtl" : "ltr";
+        const codeDir = naturalTabs && i18n.getVocabulary(activeNaturalLanguage).meta.rtl ? "rtl" : "ltr";
         const translationCache = React89.useMemo(() => /* @__PURE__ */ new Map(), [englishCode, files]);
         const translateFor = React89.useCallback(
           (source, sourceLanguage, cacheKey) => {
@@ -13157,14 +13165,14 @@ var init_CodeBlock = __esm({
         const code = translateFor(englishCode, language, "code");
         const naturalTabItems = naturalTabs?.map((lang) => ({
           id: `lang-${lang}`,
-          label: i18n.coreTables[lang].meta.name,
+          label: i18n.getVocabulary(lang).meta.name,
           content: null
         }));
         const naturalTabStrip = naturalTabs && naturalTabItems ? /* @__PURE__ */ jsxRuntime.jsx(
           exports.Box,
           {
             className: "border-b border-border",
-            dir: i18n.coreTables[activeNaturalLanguage].meta.rtl ? "rtl" : "ltr",
+            dir: i18n.getVocabulary(activeNaturalLanguage).meta.rtl ? "rtl" : "ltr",
             "data-testid": "codeblock-language-tabs",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               exports.Tabs,
@@ -14661,6 +14669,10 @@ function resolveCanvasTheme(scope) {
       const c = r.color(toneVar(tone));
       tones[tone] = c ? colorCss(c) : "currentColor";
     }
+    const surface = (name) => {
+      const c = r.color(name);
+      return c ? colorCss(c) : "transparent";
+    };
     const ground = r.color("--surface-diagram");
     const text = {};
     const TEXT_FALLBACK = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24 };
@@ -14668,6 +14680,11 @@ function resolveCanvasTheme(scope) {
     const body = r.family("--font-family-body", r.family("--font-family", "system-ui, sans-serif"));
     return {
       ground: ground ? colorCss(ground) : "transparent",
+      surfaces: {
+        muted: surface("--color-muted"),
+        card: surface("--color-card"),
+        onPrimary: surface("--color-primary-foreground")
+      },
       tones,
       series: SERIES_TONES.map((t) => tones[t]),
       strokes: {
@@ -20418,10 +20435,10 @@ var init_AvlState = __esm({
     }) => {
       const width = computeWidth(explicitWidth, transitionCount);
       const rx = height / 2;
-      const roleColors = role ? STATE_COLORS[role] : null;
-      const fillColor = roleColors ? roleColors.fill : "none";
-      const strokeColor = roleColors ? roleColors.border : color;
-      const textColor = roleColors ? roleColors.border : color;
+      const roleColors2 = role ? STATE_COLORS[role] : null;
+      const fillColor = roleColors2 ? roleColors2.fill : "none";
+      const strokeColor = roleColors2 ? roleColors2.border : color;
+      const textColor = roleColors2 ? roleColors2.border : color;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
         isInitial && /* @__PURE__ */ jsxRuntime.jsx(
           "circle",
@@ -26903,18 +26920,30 @@ var init_Carousel = __esm({
       loop = false,
       slideChangeEvent,
       slideChangePayload,
+      orientation = "horizontal",
+      fullHeight = false,
+      loadMoreEvent,
+      loadMoreAhead = 2,
+      hasMore = false,
+      isLoadingMore = false,
       className,
       ...rest
     }) => {
+      const vertical = orientation === "vertical";
+      const loadRequestedAt = React89.useRef(null);
       const [activeIndex, setActiveIndex] = React89.useState(0);
       const scrollRef = React89.useRef(null);
+      const rootRef = React89.useRef(null);
+      const [topOffset, setTopOffset] = React89.useState(0);
       const autoPlayRef = React89.useRef(null);
       const eventBus = useSafeEventBus3();
       const { t } = hooks.useTranslate();
       const safeItems = items ?? [];
       const totalSlides = safeItems.length;
+      const announcedIndex = React89.useRef(0);
       const emitSlideChange = React89.useCallback(
         (newIndex) => {
+          announcedIndex.current = newIndex;
           if (slideChangeEvent) {
             eventBus.emit(`UI:${slideChangeEvent}`, {
               index: newIndex,
@@ -26928,13 +26957,13 @@ var init_Carousel = __esm({
         (index) => {
           const container = scrollRef.current;
           if (!container) return;
-          const slideWidth = container.offsetWidth;
-          container.scrollTo({
-            left: slideWidth * index,
-            behavior: "smooth"
-          });
+          const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+          const behavior = reduceMotion ? "auto" : "smooth";
+          if (typeof container.scrollTo !== "function") return;
+          if (vertical) container.scrollTo({ top: container.offsetHeight * index, behavior });
+          else container.scrollTo({ left: container.offsetWidth * index, behavior });
         },
-        []
+        [vertical]
       );
       const goToSlide = React89.useCallback(
         (index) => {
@@ -26958,10 +26987,7 @@ var init_Carousel = __esm({
         goToSlide(activeIndex - 1);
       }, [goToSlide, activeIndex]);
       const swipeHandlers = useSwipeGesture(
-        {
-          onSwipeLeft: goNext,
-          onSwipeRight: goPrev
-        },
+        vertical ? { onSwipeUp: goNext, onSwipeDown: goPrev } : { onSwipeLeft: goNext, onSwipeRight: goPrev },
         { threshold: 40 }
       );
       React89.useEffect(() => {
@@ -26986,138 +27012,189 @@ var init_Carousel = __esm({
       const handleScroll = React89.useCallback(() => {
         const container = scrollRef.current;
         if (!container) return;
-        const slideWidth = container.offsetWidth;
-        if (slideWidth === 0) return;
-        const newIndex = Math.round(container.scrollLeft / slideWidth);
-        setActiveIndex((prev) => {
-          if (prev !== newIndex && newIndex >= 0 && newIndex < totalSlides) {
-            return newIndex;
+        const slideSize = vertical ? container.offsetHeight : container.offsetWidth;
+        if (slideSize === 0) return;
+        const position = vertical ? container.scrollTop : container.scrollLeft;
+        const newIndex = Math.round(position / slideSize);
+        if (newIndex < 0 || newIndex >= totalSlides) return;
+        setActiveIndex(newIndex);
+        if (Math.abs(position - newIndex * slideSize) <= 1 && newIndex !== announcedIndex.current) {
+          emitSlideChange(newIndex);
+        }
+      }, [totalSlides, vertical, emitSlideChange]);
+      React89.useEffect(() => {
+        if (!loadMoreEvent || !hasMore || isLoadingMore || totalSlides === 0) return;
+        if (activeIndex < totalSlides - 1 - loadMoreAhead) return;
+        if (loadRequestedAt.current === totalSlides) return;
+        loadRequestedAt.current = totalSlides;
+        eventBus.emit(`UI:${loadMoreEvent}`, { index: activeIndex });
+      }, [activeIndex, totalSlides, loadMoreEvent, hasMore, isLoadingMore, loadMoreAhead, eventBus]);
+      const viewportBound = vertical && fullHeight;
+      React89.useLayoutEffect(() => {
+        if (!viewportBound || typeof window === "undefined") return;
+        const measure = () => {
+          const root = rootRef.current;
+          if (root) setTopOffset(Math.max(0, Math.round(root.getBoundingClientRect().top)));
+        };
+        measure();
+        window.addEventListener("resize", measure);
+        return () => window.removeEventListener("resize", measure);
+      }, [viewportBound]);
+      const handleKeyDown = React89.useCallback(
+        (e) => {
+          const next = vertical ? ["ArrowDown", "PageDown"] : ["ArrowRight"];
+          const prev = vertical ? ["ArrowUp", "PageUp"] : ["ArrowLeft"];
+          if (next.includes(e.key)) {
+            e.preventDefault();
+            goNext();
+          } else if (prev.includes(e.key)) {
+            e.preventDefault();
+            goPrev();
           }
-          return prev;
-        });
-      }, [totalSlides]);
+        },
+        [vertical, goNext, goPrev]
+      );
       const hasPrev = loop || activeIndex > 0;
       const hasNext = loop || activeIndex < totalSlides - 1;
       if (totalSlides === 0) return null;
-      return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { position: "relative", overflow: "hidden", ...domPassthrough(rest), className: cn("w-full", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          exports.Box,
-          {
-            ref: scrollRef,
-            display: "flex",
-            overflow: "auto",
-            className: cn(
-              "w-full",
-              "scroll-smooth",
-              "scrollbar-none",
-              "[scroll-snap-type:x_mandatory]",
-              "[&::-webkit-scrollbar]:hidden",
-              "[-ms-overflow-style:none]"
-            ),
-            style: {
-              scrollSnapType: "x mandatory",
-              WebkitOverflowScrolling: "touch"
-            },
-            onScroll: handleScroll,
-            onPointerDown: swipeHandlers.onPointerDown,
-            onPointerMove: swipeHandlers.onPointerMove,
-            onPointerUp: swipeHandlers.onPointerUp,
-            onPointerCancel: swipeHandlers.onPointerCancel,
-            children: safeItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        exports.Box,
+        {
+          position: "relative",
+          overflow: "hidden",
+          role: "region",
+          "aria-roledescription": t("aria.carousel"),
+          tabIndex: 0,
+          onKeyDown: handleKeyDown,
+          ...domPassthrough(rest),
+          ref: rootRef,
+          className: cn("w-full", fullHeight && !viewportBound && "h-full", className),
+          style: viewportBound ? { height: `calc(100svh - ${topOffset}px)` } : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
               exports.Box,
               {
+                ref: scrollRef,
+                display: "flex",
+                overflow: "auto",
                 className: cn(
-                  "flex-shrink-0 w-full",
-                  "[scroll-snap-align:start]"
+                  "w-full",
+                  "scroll-smooth",
+                  "scrollbar-none",
+                  vertical ? "[scroll-snap-type:y_mandatory]" : "[scroll-snap-type:x_mandatory]",
+                  "[&::-webkit-scrollbar]:hidden",
+                  "[-ms-overflow-style:none]"
                 ),
                 style: {
-                  scrollSnapAlign: "start"
+                  flexDirection: vertical ? "column" : "row",
+                  scrollSnapType: vertical ? "y mandatory" : "x mandatory",
+                  height: fullHeight ? "100%" : void 0,
+                  WebkitOverflowScrolling: "touch"
                 },
-                children: (renderItem ?? children)?.(item, index)
-              },
-              index
-            ))
-          }
-        ),
-        showArrows && hasPrev && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          exports.Box,
-          {
-            position: "absolute",
-            className: "left-2 top-1/2 -translate-y-1/2 z-10",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              exports.Button,
+                onScroll: handleScroll,
+                onPointerDown: swipeHandlers.onPointerDown,
+                onPointerMove: swipeHandlers.onPointerMove,
+                onPointerUp: swipeHandlers.onPointerUp,
+                onPointerCancel: swipeHandlers.onPointerCancel,
+                children: safeItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Box,
+                  {
+                    className: cn(
+                      "flex-shrink-0 w-full",
+                      "[scroll-snap-align:start]"
+                    ),
+                    style: {
+                      scrollSnapAlign: "start",
+                      scrollSnapStop: vertical ? "always" : void 0,
+                      height: fullHeight ? "100%" : void 0
+                    },
+                    children: (renderItem ?? children)?.(item, index)
+                  },
+                  index
+                ))
+              }
+            ),
+            showArrows && hasPrev && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Box,
               {
-                variant: "ghost",
-                size: "sm",
-                onClick: goPrev,
-                "aria-label": t("aria.previousSlide"),
-                className: cn(
-                  "rounded-full",
-                  "bg-surface/80",
-                  "backdrop-blur-sm",
-                  "shadow-elevation-interactive",
-                  "hover:bg-surface"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronLeft, { className: "w-5 h-5" })
+                position: "absolute",
+                className: vertical ? "right-2 top-2 z-10" : "left-2 top-1/2 -translate-y-1/2 z-10",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: goPrev,
+                    "aria-label": t("aria.previousSlide"),
+                    className: cn(
+                      "rounded-full",
+                      "bg-surface/80",
+                      "backdrop-blur-sm",
+                      "shadow-elevation-interactive",
+                      "hover:bg-surface"
+                    ),
+                    children: vertical ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronUp, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronLeft, { className: "w-5 h-5" })
+                  }
+                )
               }
-            )
-          }
-        ),
-        showArrows && hasNext && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          exports.Box,
-          {
-            position: "absolute",
-            className: "right-2 top-1/2 -translate-y-1/2 z-10",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              exports.Button,
+            ),
+            showArrows && hasNext && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Box,
               {
-                variant: "ghost",
-                size: "sm",
-                onClick: goNext,
-                "aria-label": t("aria.nextSlide"),
-                className: cn(
-                  "rounded-full",
-                  "bg-surface/80",
-                  "backdrop-blur-sm",
-                  "shadow-elevation-interactive",
-                  "hover:bg-surface"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronRight, { className: "w-5 h-5" })
+                position: "absolute",
+                className: vertical ? "right-2 bottom-2 z-10" : "right-2 top-1/2 -translate-y-1/2 z-10",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: goNext,
+                    "aria-label": t("aria.nextSlide"),
+                    className: cn(
+                      "rounded-full",
+                      "bg-surface/80",
+                      "backdrop-blur-sm",
+                      "shadow-elevation-interactive",
+                      "hover:bg-surface"
+                    ),
+                    children: vertical ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronDown, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.ChevronRight, { className: "w-5 h-5" })
+                  }
+                )
+              }
+            ),
+            showDots && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Box,
+              {
+                position: "absolute",
+                className: "bottom-3 left-0 right-0 z-10",
+                children: /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", align: "center", justify: "center", role: "tablist", "aria-label": t("aria.carouselSlides"), children: safeItems.map((_, index) => {
+                  const isActive = index === activeIndex;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    exports.Box,
+                    {
+                      className: cn(
+                        "rounded-full cursor-pointer transition-all duration-fast"
+                      ),
+                      style: {
+                        width: isActive ? 10 : 8,
+                        height: isActive ? 10 : 8,
+                        backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted, #d4d4d8)",
+                        opacity: isActive ? 1 : 0.6
+                      },
+                      ...pressableProps(() => goToSlide(index)),
+                      role: "tab",
+                      "aria-selected": isActive,
+                      tabIndex: isActive ? 0 : -1,
+                      "aria-label": t("carousel.goToSlide", { number: index + 1 })
+                    },
+                    index
+                  );
+                }) })
               }
             )
-          }
-        ),
-        showDots && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          exports.Box,
-          {
-            position: "absolute",
-            className: "bottom-3 left-0 right-0 z-10",
-            children: /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", align: "center", justify: "center", role: "tablist", "aria-label": t("aria.carouselSlides"), children: safeItems.map((_, index) => {
-              const isActive = index === activeIndex;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                exports.Box,
-                {
-                  className: cn(
-                    "rounded-full cursor-pointer transition-all duration-fast"
-                  ),
-                  style: {
-                    width: isActive ? 10 : 8,
-                    height: isActive ? 10 : 8,
-                    backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted, #d4d4d8)",
-                    opacity: isActive ? 1 : 0.6
-                  },
-                  ...pressableProps(() => goToSlide(index)),
-                  role: "tab",
-                  "aria-selected": isActive,
-                  tabIndex: isActive ? 0 : -1,
-                  "aria-label": t("carousel.goToSlide", { number: index + 1 })
-                },
-                index
-              );
-            }) })
-          }
-        )
-      ] });
+          ]
+        }
+      );
     };
     exports.Carousel.displayName = "Carousel";
   }
@@ -28193,6 +28270,8 @@ function ChatBar({
   placeholder,
   context,
   sendEvent = "CHAT_SEND",
+  focusRequest,
+  editFocus,
   className,
   ...rest
 }) {
@@ -28201,7 +28280,14 @@ function ChatBar({
   const [inputValue, setInputValue] = React89.useState("");
   const inputRef = React89.useRef(null);
   const [requestedPlaceholder, setRequestedPlaceholder] = React89.useState(null);
-  const [focus, setFocus] = React89.useState(null);
+  const focus = editFocus ?? null;
+  const requestId = focusRequest?.id;
+  const requestPlaceholder = focusRequest?.placeholder;
+  React89.useEffect(() => {
+    if (requestId === void 0) return;
+    if (requestPlaceholder !== void 0 && requestPlaceholder.length > 0) setRequestedPlaceholder(requestPlaceholder);
+    inputRef.current?.focus();
+  }, [requestId, requestPlaceholder]);
   React89.useLayoutEffect(() => {
     const el = inputRef.current;
     if (!el) return;
@@ -28211,36 +28297,21 @@ function ChatBar({
     el.style.overflowY = el.scrollHeight > INPUT_MAX_HEIGHT_PX ? "auto" : "hidden";
   }, [inputValue]);
   const clearFocus = React89.useCallback(() => {
-    setFocus(null);
     eventBus.emit(exports.ELEMENT_SELECTED_EVENT, { focus: null });
   }, [eventBus]);
+  const clearSent = React89.useCallback(() => {
+    setInputValue("");
+    setRequestedPlaceholder(null);
+  }, []);
   const handleKeyDown = React89.useCallback((e) => {
     if (e.key !== "Enter" || e.shiftKey) return;
     const trimmed = inputValue.trim();
     if (!trimmed) return;
     e.preventDefault();
     eventBus.emit(`UI:${sendEvent}`, { message: trimmed });
-  }, [inputValue, eventBus, sendEvent]);
-  React89.useEffect(() => {
-    const unsubSend = eventBus.on(`UI:${sendEvent}`, () => {
-      setInputValue("");
-      setFocus(null);
-      setRequestedPlaceholder(null);
-    });
-    const unsubFocus = eventBus.on("UI:CHAT_FOCUS", (e) => {
-      const hint = e.payload?.placeholder;
-      if (typeof hint === "string" && hint.length > 0) setRequestedPlaceholder(hint);
-      inputRef.current?.focus();
-    });
-    const unsubSelect = eventBus.on(exports.ELEMENT_SELECTED_EVENT, (e) => {
-      setFocus(parseEditFocus(e.payload?.focus));
-    });
-    return () => {
-      unsubSend();
-      unsubFocus();
-      unsubSelect();
-    };
-  }, [eventBus, sendEvent]);
+    clearSent();
+  }, [inputValue, eventBus, sendEvent, clearSent]);
+  React89.useEffect(() => eventBus.on(`UI:${sendEvent}`, clearSent), [eventBus, sendEvent, clearSent]);
   const trailingAction = status === "error" ? /* @__PURE__ */ jsxRuntime.jsxs(exports.Button, { variant: "secondary", size: "sm", action: "RETRY_GENERATION", className: "rounded-none flex-shrink-0 h-auto", children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "refresh-cw", size: "xs" }),
     /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", children: t("openFile.retry") })
@@ -28287,6 +28358,7 @@ function ChatBar({
       size: "sm",
       action: sendEvent,
       actionPayload: { message: inputValue.trim() },
+      onClick: clearSent,
       disabled: !inputValue.trim(),
       "aria-label": t("chatBar.sendMessage"),
       className: "rounded-none flex-shrink-0 h-auto",
@@ -31476,13 +31548,16 @@ var init_DashboardLayout = __esm({
       React89.useEffect(() => {
         registerNavItems(navItems);
       }, [navItems, registerNavItems]);
-      const { user: authUser, signOut: authSignOut } = useAuthContext();
+      const { user: authUser } = useAuthContext();
       const user = userProp || (authUser ? {
         name: authUser.displayName || authUser.email?.split("@")[0] || t("dashboard.defaultUserName"),
         email: authUser.email || "",
         avatar: authUser.photoURL || void 0
       } : null);
-      const handleSignOut = onSignOutProp || authSignOut;
+      const handleSignOut = () => {
+        onSignOutProp?.();
+        eventBus.emit("UI:SIGN_OUT", {});
+      };
       const showSidebar = layoutMode === "sidebar" || isDrawer;
       const showHeader = layoutMode !== "minimal";
       const showBottomNav = layoutMode === "bottomnav";
@@ -31491,7 +31566,11 @@ var init_DashboardLayout = __esm({
         exports.Box,
         {
           ref: layoutRef,
-          className: "@container/dashboard min-h-screen w-full bg-background surface-page flex flex-row items-stretch",
+          className: cn(
+            "@container/dashboard w-full bg-background surface-page flex flex-row items-stretch",
+            // A full-bleed shell is an app frame: viewport-bound, so a full-height child gets a real height.
+            fullBleed ? "h-screen overflow-hidden" : "min-h-screen"
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               exports.Button,
@@ -31595,7 +31674,7 @@ var init_DashboardLayout = __esm({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: "flex-1 min-w-0 min-h-screen", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: cn("flex-1 min-w-0", fullBleed ? "h-full min-h-0" : "min-h-screen"), children: [
               showHeader && /* @__PURE__ */ jsxRuntime.jsx(
                 exports.Box,
                 {
@@ -31818,7 +31897,7 @@ var init_DashboardLayout = __esm({
                   id: "main-content",
                   tabIndex: -1,
                   className: cn(
-                    fullBleed ? "flex-1 min-h-0 flex flex-col focus:outline-none" : "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6 focus:outline-none",
+                    fullBleed ? "flex-1 min-h-0 flex flex-col overflow-y-auto focus:outline-none" : "flex-1 p-3 @sm/dashboard:p-4 @md/dashboard:p-6 focus:outline-none",
                     // Reserve space for the fixed bottom nav so content isn't
                     // hidden under the tab bar.
                     showBottomNav && "pb-[calc(5rem+env(safe-area-inset-bottom))]"
@@ -42200,7 +42279,8 @@ var init_ar = __esm({
       "avl.stateInitial": "\u0627\u0644\u0628\u062F\u0627\u064A\u0629",
       "avl.stateTerminal": "\u0627\u0644\u0646\u0647\u0627\u064A\u0629",
       "avl.guardCaption": "\u0644\u0627 \u064A\u062D\u062F\u062B \u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644 \u0625\u0644\u0627 \u0639\u0646\u062F\u0645\u0627 \u064A\u0643\u0648\u0646 \u0647\u0630\u0627 \u0627\u0644\u0634\u0631\u0637 \u0635\u062D\u064A\u062D\u064B\u0627.",
-      "avl.effectsCaption": "\u0645\u0627 \u064A\u064F\u0646\u0641\u064E\u0651\u0630\u060C \u0628\u0627\u0644\u062A\u0631\u062A\u064A\u0628\u060C \u0639\u0646\u062F \u062D\u062F\u0648\u062B \u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644."
+      "avl.effectsCaption": "\u0645\u0627 \u064A\u064F\u0646\u0641\u064E\u0651\u0630\u060C \u0628\u0627\u0644\u062A\u0631\u062A\u064A\u0628\u060C \u0639\u0646\u062F \u062D\u062F\u0648\u062B \u0627\u0644\u0627\u0646\u062A\u0642\u0627\u0644.",
+      "aria.carousel": "\u0639\u0631\u0636 \u0634\u0631\u0627\u0626\u062D"
     };
   }
 });
@@ -43462,7 +43542,8 @@ var init_sl = __esm({
       "avl.stateInitial": "za\u010Detek",
       "avl.stateTerminal": "konec",
       "avl.guardCaption": "Prehod se zgodi le, ko je ta pogoj izpolnjen.",
-      "avl.effectsCaption": "Kaj se izvede, po vrsti, ko se prehod zgodi."
+      "avl.effectsCaption": "Kaj se izvede, po vrsti, ko se prehod zgodi.",
+      "aria.carousel": "vrtiljak"
     };
   }
 });
@@ -45163,6 +45244,18 @@ var init_circuitVerificationObserver = __esm({
     init_verificationRegistry();
   }
 });
+
+// lib/hostDispatchInView.ts
+function hostDispatchInView(request, response, owns) {
+  if (request.targetTrait !== void 0 && owns(request.targetTrait)) return true;
+  if (Object.keys(response.states).some(owns)) return true;
+  if (Object.keys(response.entityByTrait ?? {}).some(owns)) return true;
+  return (response.clientEffectsByTrait ?? []).some((e) => owns(e.traitName));
+}
+var init_hostDispatchInView = __esm({
+  "lib/hostDispatchInView.ts"() {
+  }
+});
 function getTabClientId() {
   if (tabClientId === void 0) tabClientId = crypto.randomUUID();
   return tabClientId;
@@ -45487,6 +45580,9 @@ function readsI18n(value) {
     const arr = value;
     return arr[0] === "i18n/t" || arr.some((v) => readsI18n(v));
   }
+  if (value !== null && typeof value === "object" && !React89__namespace.default.isValidElement(value) && !(value instanceof Date) && typeof value !== "function") {
+    return Object.values(value).some((v) => readsI18n(v));
+  }
   return false;
 }
 function needsRenderContext(value) {
@@ -46512,7 +46608,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     if (!transport?.subscribeHostDispatches) return;
     return transport.subscribeHostDispatches((_orbitalName, request, response) => {
       const traitName = request.targetTrait;
-      if (traitName === void 0 || !traitIndex.byName.has(traitName)) return;
+      if (traitName === void 0 || !hostDispatchInView(request, response, (t2) => traitIndex.byName.has(t2))) return;
       const composedBefore = new Map(store.callsitePayloads);
       void kernel.foldHostDispatch(request, response).then((outcome) => settleOutcome(traitName, request.event, request.payload, outcome, composedBefore));
     }, { clientId: getTabClientId() });
@@ -46654,6 +46750,7 @@ var init_useTraitStateMachine = __esm({
     init_traitRegistry();
     init_verificationRegistry();
     init_circuitVerificationObserver();
+    init_hostDispatchInView();
     init_useCircuitKernel();
     init_useBusIngress();
     init_useSlotFlush();
@@ -47082,6 +47179,11 @@ function NavigateListener({ onNavigate }) {
   );
   return null;
 }
+function SignOutListener({ onSignOut }) {
+  const bus = useEventBus();
+  React89.useEffect(() => bus.on("UI:SIGN_OUT", () => onSignOut()), [bus, onSignOut]);
+  return null;
+}
 function OrbPreview({
   schema,
   mockData,
@@ -47102,7 +47204,8 @@ function OrbPreview({
   lazyLoader,
   schemaPath,
   onUnmatchedNavigate,
-  onSignIn
+  onSignIn,
+  onSignOut
 }) {
   if (serverUrl && transport) {
     throw new Error("OrbPreview accepts serverUrl OR transport, not both");
@@ -47390,6 +47493,7 @@ function OrbPreview({
                 /* @__PURE__ */ jsxRuntime.jsx(NavStackRefBridge, { apiRef: navStackRef }),
                 /* @__PURE__ */ jsxRuntime.jsxs(providers.OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(NavigateListener, { onNavigate: handleNavigate }),
+                  onSignOut !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(SignOutListener, { onSignOut }),
                   /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
                     providers.PageAccessHost,
                     {
@@ -47731,6 +47835,10 @@ function entityNameOf(ref) {
   if (typeof ref === "string") return ref;
   return "name" in ref ? ref.name : void 0;
 }
+function roleColors(role) {
+  if (role === "default") return { border: "var(--color-border)", dot: STATE_COLORS.default.border };
+  return { border: STATE_COLORS[role].border, dot: STATE_COLORS[role].border };
+}
 function eventHandleStyle(source) {
   const hint = Number.isFinite(source.positionHint) ? source.positionHint : 0.5;
   if (hint !== source.positionHint) {
@@ -48039,7 +48147,7 @@ function parentBoxOf(el, container, zoom) {
 function resolveLayoutAxis(el) {
   return getComputedStyle(layoutBoxOf(el)).flexDirection === "row" ? "horizontal" : "vertical";
 }
-var eventHandleLog, orbPreviewLog, ScreenSizeContext, CARD_MIN_WIDTH, CARD_MAX_WIDTH, PatternSelectionContext, CanvasToolsContext, CanvasStatePickerContext, CanvasVerifyContext, VERDICT_VARIANT, ROLE_COLORS, LAYER_ORDER, LAYER_LABEL_KEYS, LAYER_COLORS, TARGET_HANDLE_STYLE, SELECTION_STYLES, OrbPreviewNodeInner, OrbPreviewNode;
+var eventHandleLog, orbPreviewLog, ScreenSizeContext, CARD_MIN_WIDTH, CARD_MAX_WIDTH, PatternSelectionContext, CanvasToolsContext, CanvasStatePickerContext, CanvasVerifyContext, VERDICT_VARIANT, LAYER_ORDER, LAYER_LABEL_KEYS, LAYER_COLORS, TARGET_HANDLE_STYLE, SELECTION_STYLES, OrbPreviewNodeInner, OrbPreviewNode;
 var init_OrbPreviewNode = __esm({
   "components/avl/molecules/OrbPreviewNode.tsx"() {
     "use client";
@@ -48089,12 +48197,6 @@ var init_OrbPreviewNode = __esm({
       stale: "warning",
       running: "info"
     };
-    ROLE_COLORS = {
-      initial: { border: STATE_COLORS.initial.border, dot: STATE_COLORS.initial.border },
-      terminal: { border: STATE_COLORS.terminal.border, dot: STATE_COLORS.terminal.border },
-      hub: { border: STATE_COLORS.hub.border, dot: STATE_COLORS.hub.border },
-      default: { border: "var(--color-border)", dot: STATE_COLORS.default.border }
-    };
     LAYER_ORDER = ["Infrastructure", "Services", "UI Patterns", "Game", "ML", "Domain", "Community"];
     LAYER_LABEL_KEYS = {
       Infrastructure: "orbPreview.layer.infrastructure",
@@ -48165,7 +48267,7 @@ var init_OrbPreviewNode = __esm({
       const [hoverRect, setHoverRect] = React89.useState(null);
       const lastHoverElRef = React89.useRef(null);
       const role = data.stateRole ?? "default";
-      const colors = ROLE_COLORS[role] ?? ROLE_COLORS.default;
+      const colors = roleColors(role);
       const eventSources = data.eventSources ?? [];
       const layerColor = data.layer ? LAYER_COLORS[data.layer] : void 0;
       const isExpanded = Boolean(data.traitName);