@almadar/ui 4.8.0 → 4.10.0

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);

package/dist/providers/TraitScopeProvider.d.ts

@@ -0,0 +1,43 @@
+/**
+ * TraitScopeProvider
+ *
+ * Wraps a trait's rendered subtree with its owning `{ orbital, trait }`
+ * pair. Pure components inside the subtree (Button, Form, etc.) keep
+ * calling `useEventBus().emit('UI:X', ...)` exactly as today; the
+ * scoped wrapper that `useEventBus` returns inside this provider
+ * rewrites bare `UI:X` keys into the qualified
+ * `UI:Orbital.Trait.X` form that `useTraitStateMachine` (and the rest
+ * of the post-Phase 4 subscriber side) listens on.
+ *
+ * Producer-side fix for the gap where Button-emitted bare keys never
+ * reached the trait state machine in the runtime path. The compiled
+ * path's codegen wraps each trait view with the same provider so both
+ * paths share the qualification contract.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+export interface TraitScope {
+    /** Owning orbital name (e.g. `"ContactOrbital"`). */
+    orbital: string;
+    /** Trait name within the orbital (e.g. `"ContactBrowse"`). */
+    trait: string;
+}
+export interface TraitScopeProviderProps {
+    orbital: string;
+    trait: string;
+    children: React.ReactNode;
+}
+/**
+ * Wrap a trait's rendered subtree to qualify bare `UI:*` emits with the
+ * trait's scope. Mount this at the slot-content boundary in runtime
+ * mode (UISlotRenderer) and at each generated trait view's outermost
+ * element in compiled mode (orbital-shell-typescript codegen).
+ */
+export declare function TraitScopeProvider({ orbital, trait, children, }: TraitScopeProviderProps): React.ReactElement;
+/**
+ * Read the current trait scope. Returns `null` when called outside
+ * any `TraitScopeProvider` (e.g. Storybook, design-system catalog).
+ */
+export declare function useTraitScope(): TraitScope | null;
+export default TraitScopeProvider;

package/dist/providers/index.cjs

@@ -436,7 +436,23 @@ function getGlobalEventBus() {
 }
 function useEventBus() {
   const context = React116.useContext(providers.EventBusContext);
-  return context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
+  const scope = providers.useTraitScope();
+  return React116.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();
@@ -37854,6 +37870,17 @@ function renderContainedPortal(slot, content, onDismiss) {
       return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: slotId, children: slotContent });
   }
 }
+function MaybeTraitScope({
+  sourceTrait,
+  children
+}) {
+  const schemaCtx = useEntitySchemaOptional();
+  const orbital = sourceTrait !== void 0 && schemaCtx !== null ? schemaCtx.orbitalsByTrait.get(sourceTrait) : void 0;
+  if (sourceTrait !== void 0 && orbital !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(providers.TraitScopeProvider, { orbital, trait: sourceTrait, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
 function UISlotComponent({
   slot,
   portal = false,
@@ -37881,11 +37908,11 @@ function UISlotComponent({
             className: cn("ui-slot", `ui-slot-${slot}`, className),
             "data-pattern": pattern,
             "data-source-trait": sourceTrait,
-            children
+            children: /* @__PURE__ */ jsxRuntime.jsx(MaybeTraitScope, { sourceTrait, children })
           }
         );
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(CompiledPortal, { slot, className, pattern, sourceTrait, children });
+      return /* @__PURE__ */ jsxRuntime.jsx(CompiledPortal, { slot, className, pattern, sourceTrait, children: /* @__PURE__ */ jsxRuntime.jsx(MaybeTraitScope, { sourceTrait, children }) });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -37894,7 +37921,7 @@ function UISlotComponent({
         className: cn("ui-slot", `ui-slot-${slot}`, className),
         "data-pattern": pattern,
         "data-source-trait": sourceTrait,
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(MaybeTraitScope, { sourceTrait, children })
       }
     );
   }
@@ -37940,7 +37967,7 @@ function UISlotComponent({
       className: cn("ui-slot", `ui-slot-${slot}`, className),
       "data-pattern": content.pattern,
       "data-source-trait": content.sourceTrait,
-      children: wrappedContent
+      children: /* @__PURE__ */ jsxRuntime.jsx(MaybeTraitScope, { sourceTrait: content.sourceTrait, children: wrappedContent })
     }
   );
 }
@@ -38048,7 +38075,7 @@ function SlotPortal({
   });
   if (!portalRoot) return null;
   const slotId = `slot-${slot}`;
-  const slotContent = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss });
+  const slotContent = /* @__PURE__ */ jsxRuntime.jsx(MaybeTraitScope, { sourceTrait: content.sourceTrait, children: /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content, onDismiss }) });
   let wrapper;
   switch (slot) {
     case "modal":
@@ -38880,6 +38907,18 @@ function OrbitalProvider({
   );
 }
 OrbitalProvider.displayName = "OrbitalProvider";
+var TraitScopeContext = React116.createContext(null);
+function TraitScopeProvider2({
+  orbital,
+  trait,
+  children
+}) {
+  const value = React116.useMemo(() => ({ orbital, trait }), [orbital, trait]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TraitScopeContext.Provider, { value, children });
+}
+function useTraitScope2() {
+  return React116.useContext(TraitScopeContext);
+}
 
 // providers/OfflineModeProvider.tsx
 init_offline_executor();
@@ -38919,8 +38958,10 @@ exports.OfflineModeProvider = OfflineModeProvider;
 exports.OrbitalProvider = OrbitalProvider;
 exports.SelectionContext = SelectionContext;
 exports.SelectionProvider = SelectionProvider;
+exports.TraitScopeProvider = TraitScopeProvider2;
 exports.VerificationProvider = VerificationProvider;
 exports.useOfflineMode = useOfflineMode;
 exports.useOptionalOfflineMode = useOptionalOfflineMode;
 exports.useSelection = useSelection;
 exports.useSelectionOptional = useSelectionOptional;
+exports.useTraitScope = useTraitScope2;

package/dist/providers/index.d.ts

@@ -7,6 +7,8 @@
 export { OrbitalProvider, type OrbitalProviderProps } from './OrbitalProvider';
 export type { ThemeDefinition } from '../context/ThemeContext';
 export { EventBusProvider, EventBusContext } from './EventBusProvider';
+export { TraitScopeProvider, useTraitScope } from './TraitScopeProvider';
+export type { TraitScope, TraitScopeProviderProps } from './TraitScopeProvider';
 export { SelectionProvider, SelectionContext, useSelection, useSelectionOptional } from './SelectionProvider';
 export type { SelectionContextType } from './SelectionProvider';
 export { VerificationProvider } from './VerificationProvider';