@almadar/ui 4.7.0 → 4.9.0

package/dist/docs/index.js

@@ -1,4 +1,4 @@
-import React4, { createContext, useCallback, useContext, useState, useRef, useEffect } from 'react';
+import React5, { createContext, useCallback, useContext, useMemo, useState, useRef, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, ChevronDown, X } from 'lucide-react';
@@ -2533,6 +2533,10 @@ function createLogger(namespace) {
 createLogger("almadar:eventbus");
 createLogger("almadar:eventbus:subscribe");
 var EventBusContext = createContext(null);
+var TraitScopeContext = createContext(null);
+function useTraitScope() {
+  return useContext(TraitScopeContext);
+}
 
 // hooks/useEventBus.ts
 var log = createLogger("almadar:eventbus");
@@ -2609,7 +2613,23 @@ var fallbackEventBus = {
 };
 function useEventBus() {
   const context = useContext(EventBusContext);
-  return context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const scope = useTraitScope();
+  return useMemo(() => {
+    if (!scope) return baseBus;
+    return {
+      ...baseBus,
+      emit: (type, payload, source) => {
+        if (typeof type === "string" && type.startsWith("UI:")) {
+          const tail = type.slice(3);
+          const qualified = tail.includes(".") ? type : `UI:${scope.orbital}.${scope.trait}.${tail}`;
+          baseBus.emit(qualified, payload, source);
+          return;
+        }
+        baseBus.emit(type, payload, source);
+      }
+    };
+  }, [baseBus, scope]);
 }
 var paddingStyles = {
   none: "p-0",
@@ -2713,7 +2733,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React4.forwardRef(
+var Box = React5.forwardRef(
   ({
     padding,
     paddingX,
@@ -3142,7 +3162,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React4.isValidElement(value)) {
+  if (React5.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3151,7 +3171,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React4.forwardRef(
+var Button = React5.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3254,7 +3274,7 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-lg"
 };
-var Card = React4.forwardRef(
+var Card = React5.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -3290,9 +3310,9 @@ var Card = React4.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -3305,11 +3325,11 @@ var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3388,7 +3408,7 @@ var Divider = ({
   );
 };
 Divider.displayName = "Divider";
-var Input = React4.forwardRef(
+var Input = React5.forwardRef(
   ({
     className,
     inputType,
@@ -3656,7 +3676,7 @@ var DocBreadcrumb = ({
       "aria-label": "Breadcrumb",
       children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", wrap: true, children: items.map((item, idx) => {
         const isLast = idx === items.length - 1;
-        return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(
             Icon,
             {

package/dist/hooks/index.cjs

@@ -991,7 +991,23 @@ var fallbackEventBus = {
 };
 function useEventBus() {
   const context = react.useContext(providers.EventBusContext);
-  return context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const scope = providers.useTraitScope();
+  return react.useMemo(() => {
+    if (!scope) return baseBus;
+    return {
+      ...baseBus,
+      emit: (type, payload, source) => {
+        if (typeof type === "string" && type.startsWith("UI:")) {
+          const tail = type.slice(3);
+          const qualified = tail.includes(".") ? type : `UI:${scope.orbital}.${scope.trait}.${tail}`;
+          baseBus.emit(qualified, payload, source);
+          return;
+        }
+        baseBus.emit(type, payload, source);
+      }
+    };
+  }, [baseBus, scope]);
 }
 function useEventListener(event, handler) {
   const eventBus = useEventBus();

package/dist/hooks/index.js

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useState, useEffect, useMemo, useContext, useRef, useSyncExternalStore } from 'react';
-import { EventBusContext } from '@almadar/ui/providers';
+import { EventBusContext, useTraitScope } from '@almadar/ui/providers';
 import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 
 function useOrbitalHistory(options) {
@@ -989,7 +989,23 @@ var fallbackEventBus = {
 };
 function useEventBus() {
   const context = useContext(EventBusContext);
-  return context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const scope = useTraitScope();
+  return useMemo(() => {
+    if (!scope) return baseBus;
+    return {
+      ...baseBus,
+      emit: (type, payload, source) => {
+        if (typeof type === "string" && type.startsWith("UI:")) {
+          const tail = type.slice(3);
+          const qualified = tail.includes(".") ? type : `UI:${scope.orbital}.${scope.trait}.${tail}`;
+          baseBus.emit(qualified, payload, source);
+          return;
+        }
+        baseBus.emit(type, payload, source);
+      }
+    };
+  }, [baseBus, scope]);
 }
 function useEventListener(event, handler) {
   const eventBus = useEventBus();

package/dist/marketing/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React5 = require('react');
+var React6 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var LucideIcons = require('lucide-react');
 
@@ -24,7 +24,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+var React6__default = /*#__PURE__*/_interopDefault(React6);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
 // node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -2556,7 +2556,11 @@ function createLogger(namespace) {
 }
 createLogger("almadar:eventbus");
 createLogger("almadar:eventbus:subscribe");
-var EventBusContext = React5.createContext(null);
+var EventBusContext = React6.createContext(null);
+var TraitScopeContext = React6.createContext(null);
+function useTraitScope() {
+  return React6.useContext(TraitScopeContext);
+}
 
 // hooks/useEventBus.ts
 var log = createLogger("almadar:eventbus");
@@ -2632,8 +2636,24 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React5.useContext(EventBusContext);
-  return context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const context = React6.useContext(EventBusContext);
+  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const scope = useTraitScope();
+  return React6.useMemo(() => {
+    if (!scope) return baseBus;
+    return {
+      ...baseBus,
+      emit: (type, payload, source) => {
+        if (typeof type === "string" && type.startsWith("UI:")) {
+          const tail = type.slice(3);
+          const qualified = tail.includes(".") ? type : `UI:${scope.orbital}.${scope.trait}.${tail}`;
+          baseBus.emit(qualified, payload, source);
+          return;
+        }
+        baseBus.emit(type, payload, source);
+      }
+    };
+  }, [baseBus, scope]);
 }
 var paddingStyles = {
   none: "p-0",
@@ -2737,7 +2757,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React5__default.default.forwardRef(
+var Box = React6__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2767,20 +2787,20 @@ var Box = React5__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React5.useCallback((e) => {
+    const handleClick = React6.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React5.useCallback((e) => {
+    const handleMouseEnter = React6.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React5.useCallback((e) => {
+    const handleMouseLeave = React6.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -3166,7 +3186,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React5__default.default.isValidElement(value)) {
+  if (React6__default.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3175,7 +3195,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React5__default.default.forwardRef(
+var Button = React6__default.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3271,7 +3291,7 @@ var sizeStyles3 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React5__default.default.forwardRef(
+var Badge = React6__default.default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
     const iconSizes = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
     const resolvedIcon = typeof icon === "string" ? (() => {
@@ -3342,7 +3362,7 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-lg"
 };
-var Card = React5__default.default.forwardRef(
+var Card = React6__default.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -3378,9 +3398,9 @@ var Card = React5__default.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React5__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React6__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React5__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React6__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -3393,11 +3413,11 @@ var CardTitle = React5__default.default.forwardRef(({ className, ...props }, ref
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React5__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React6__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React5__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React6__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -3554,7 +3574,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React5__default.default.forwardRef(
+var ContentSection = React6__default.default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -3578,8 +3598,8 @@ var InstallBox = ({
   label,
   className
 }) => {
-  const [copied, setCopied] = React5.useState(false);
-  const handleCopy = React5.useCallback(() => {
+  const [copied, setCopied] = React6.useState(false);
+  const handleCopy = React6.useCallback(() => {
     void navigator.clipboard.writeText(command);
     setCopied(true);
     const timer = setTimeout(() => setCopied(false), 2e3);
@@ -4141,7 +4161,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React5__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-8 bg-border" })
@@ -4152,7 +4172,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -4662,10 +4682,10 @@ var AnimatedCounter = ({
   duration = 1500,
   className
 }) => {
-  const ref = React5.useRef(null);
-  const [displayValue, setDisplayValue] = React5.useState("0");
-  const [hasAnimated, setHasAnimated] = React5.useState(false);
-  const animate = React5.useCallback(() => {
+  const ref = React6.useRef(null);
+  const [displayValue, setDisplayValue] = React6.useState("0");
+  const [hasAnimated, setHasAnimated] = React6.useState(false);
+  const animate = React6.useCallback(() => {
     const { num, prefix, suffix, decimals } = parseValue(value);
     if (num === 0) {
       setDisplayValue(String(value));
@@ -4686,7 +4706,7 @@ var AnimatedCounter = ({
     };
     requestAnimationFrame(tick);
   }, [value, duration]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (hasAnimated) return;
     const el = ref.current;
     if (!el) return;
@@ -4736,7 +4756,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React5__default.default.forwardRef(
+var AnimatedReveal = React6__default.default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -4751,10 +4771,10 @@ var AnimatedReveal = React5__default.default.forwardRef(
     style,
     ...props
   }, forwardedRef) => {
-    const [isAnimated, setIsAnimated] = React5.useState(false);
-    const internalRef = React5.useRef(null);
-    const hasAnimated = React5.useRef(false);
-    const setRef = React5.useCallback(
+    const [isAnimated, setIsAnimated] = React6.useState(false);
+    const internalRef = React6.useRef(null);
+    const hasAnimated = React6.useRef(false);
+    const setRef = React6.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -4762,7 +4782,7 @@ var AnimatedReveal = React5__default.default.forwardRef(
       },
       [forwardedRef]
     );
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       if (trigger !== "scroll") return;
       const el = internalRef.current;
       if (!el) return;
@@ -4788,7 +4808,7 @@ var AnimatedReveal = React5__default.default.forwardRef(
         setIsAnimated(false);
       }
     } : void 0;
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       if (trigger === "manual" && manualAnimate !== void 0) {
         setIsAnimated(manualAnimate);
       }
@@ -4818,9 +4838,9 @@ var AnimatedReveal = React5__default.default.forwardRef(
 );
 AnimatedReveal.displayName = "AnimatedReveal";
 function useFetchedSvg(src) {
-  const [svg, setSvg] = React5.useState(null);
-  const cache = React5.useRef({});
-  React5.useEffect(() => {
+  const [svg, setSvg] = React6.useState(null);
+  const cache = React6.useRef({});
+  React6.useEffect(() => {
     if (!src) {
       setSvg(null);
       return;
@@ -4889,7 +4909,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React5__default.default.forwardRef(
+var AnimatedGraphic = React6__default.default.forwardRef(
   ({
     src,
     svgContent,
@@ -4908,11 +4928,11 @@ var AnimatedGraphic = React5__default.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = React5.useRef(null);
+    const containerRef = React6.useRef(null);
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
-    const prevAnimateRef = React5.useRef(animate);
-    const setRef = React5__default.default.useCallback(
+    const prevAnimateRef = React6.useRef(animate);
+    const setRef = React6__default.default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -4920,7 +4940,7 @@ var AnimatedGraphic = React5__default.default.forwardRef(
       },
       [ref]
     );
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       const el = containerRef.current;
       if (!el || !strokeColor) return;
       const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
@@ -4928,7 +4948,7 @@ var AnimatedGraphic = React5__default.default.forwardRef(
         p.style.stroke = strokeColor;
       });
     }, [resolvedSvg, strokeColor]);
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       const el = containerRef.current;
       if (!el || !resolvedSvg) return;
       if (animation === "draw" || animation === "fill") {
@@ -4953,7 +4973,7 @@ var AnimatedGraphic = React5__default.default.forwardRef(
         });
       }
     }, [resolvedSvg, animation]);
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const id = requestAnimationFrame(() => {
@@ -5753,7 +5773,7 @@ var GeometricPattern = ({
   children,
   className
 }) => {
-  const reactId = React5.useId();
+  const reactId = React6.useId();
   const patternId = `gp${reactId.replace(/:/g, "")}`;
   const size = 60 * scale;
   const stripHeight = 40 * scale;
@@ -5980,7 +6000,7 @@ var EdgeDecoration = ({
   width = 15,
   className
 }) => {
-  const id = React5.useId();
+  const id = React6.useId();
   const Variant = VARIANT_MAP2[variant];
   const sides = side === "both" ? ["left", "right"] : [side];
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sides.map((s) => /* @__PURE__ */ jsxRuntime.jsx(

package/dist/marketing/index.js

@@ -1,4 +1,4 @@
-import React5, { createContext, useCallback, useState, useRef, useEffect, useContext, useId } from 'react';
+import React6, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, Check, User } from 'lucide-react';
@@ -2533,6 +2533,10 @@ function createLogger(namespace) {
 createLogger("almadar:eventbus");
 createLogger("almadar:eventbus:subscribe");
 var EventBusContext = createContext(null);
+var TraitScopeContext = createContext(null);
+function useTraitScope() {
+  return useContext(TraitScopeContext);
+}
 
 // hooks/useEventBus.ts
 var log = createLogger("almadar:eventbus");
@@ -2609,7 +2613,23 @@ var fallbackEventBus = {
 };
 function useEventBus() {
   const context = useContext(EventBusContext);
-  return context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const scope = useTraitScope();
+  return useMemo(() => {
+    if (!scope) return baseBus;
+    return {
+      ...baseBus,
+      emit: (type, payload, source) => {
+        if (typeof type === "string" && type.startsWith("UI:")) {
+          const tail = type.slice(3);
+          const qualified = tail.includes(".") ? type : `UI:${scope.orbital}.${scope.trait}.${tail}`;
+          baseBus.emit(qualified, payload, source);
+          return;
+        }
+        baseBus.emit(type, payload, source);
+      }
+    };
+  }, [baseBus, scope]);
 }
 var paddingStyles = {
   none: "p-0",
@@ -2713,7 +2733,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React5.forwardRef(
+var Box = React6.forwardRef(
   ({
     padding,
     paddingX,
@@ -3142,7 +3162,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React5.isValidElement(value)) {
+  if (React6.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3151,7 +3171,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React5.forwardRef(
+var Button = React6.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3247,7 +3267,7 @@ var sizeStyles3 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React5.forwardRef(
+var Badge = React6.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
     const iconSizes = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
     const resolvedIcon = typeof icon === "string" ? (() => {
@@ -3318,7 +3338,7 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-lg"
 };
-var Card = React5.forwardRef(
+var Card = React6.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -3354,9 +3374,9 @@ var Card = React5.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -3369,11 +3389,11 @@ var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3530,7 +3550,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React5.forwardRef(
+var ContentSection = React6.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -4117,7 +4137,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React5.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React6.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-border" })
@@ -4128,7 +4148,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
     /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -4712,7 +4732,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React5.forwardRef(
+var AnimatedReveal = React6.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -4865,7 +4885,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React5.forwardRef(
+var AnimatedGraphic = React6.forwardRef(
   ({
     src,
     svgContent,
@@ -4888,7 +4908,7 @@ var AnimatedGraphic = React5.forwardRef(
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
     const prevAnimateRef = useRef(animate);
-    const setRef = React5.useCallback(
+    const setRef = React6.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);