@almadar/ui 5.79.2 → 5.81.0

package/dist/providers/index.js

@@ -1,5 +1,5 @@
-import * as React107 from 'react';
-import React107__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, useLayoutEffect, lazy, useId, useSyncExternalStore } from 'react';
+import * as React105 from 'react';
+import React105__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, useLayoutEffect, lazy, useId, useSyncExternalStore } from 'react';
 import { EventBusContext, useTraitScope, useEntitySchemaOptional, TraitScopeProvider, useCurrentPagePath } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import { clsx } from 'clsx';
@@ -12,7 +12,6 @@ import { useTranslate } from '@almadar/ui/hooks';
 import { useUISlots, ThemeProvider, useTheme } from '@almadar/ui/context';
 export { DesignThemeProvider, useDesignTheme } from '@almadar/ui/context';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
-import { getPatternDefinition, getComponentForPattern } from '@almadar/patterns';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light.js';
@@ -43,6 +42,7 @@ import { DndContext, pointerWithin, rectIntersection, closestCorners, useSensors
 import { useSortable, arrayMove, sortableKeyboardCoordinates, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useNodeId, ReactFlowProvider, Handle, Position } from '@xyflow/react';
+import { getPatternDefinition, getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -388,7 +388,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React107__default.forwardRef(
+    Box = React105__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -453,7 +453,7 @@ var init_Box = __esm({
           onPointerDown?.(e);
         }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
         const isClickable = action || onClick;
-        return React107__default.createElement(
+        return React105__default.createElement(
           Component,
           {
             ref,
@@ -549,7 +549,7 @@ function loadLib(key, importer) {
   return p2;
 }
 function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
-  const Lazy = React107__default.lazy(async () => {
+  const Lazy = React105__default.lazy(async () => {
     const lib = await loadLib(libKey, importer);
     const Comp = pick(lib);
     if (!Comp) {
@@ -559,7 +559,7 @@ function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
     return { default: Comp };
   });
   const Wrapped = (props) => /* @__PURE__ */ jsx(
-    React107__default.Suspense,
+    React105__default.Suspense,
     {
       fallback: /* @__PURE__ */ jsx(
         "span",
@@ -1290,7 +1290,7 @@ var init_Icon = __esm({
       const directIcon = typeof icon === "string" ? void 0 : icon;
       const effectiveName = typeof icon === "string" ? icon : name;
       const family = useIconFamily();
-      const RenderedComponent = React107__default.useMemo(() => {
+      const RenderedComponent = React105__default.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
       }, [directIcon, effectiveName, family]);
@@ -1352,7 +1352,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React107__default.isValidElement(value)) {
+  if (React105__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -1428,7 +1428,7 @@ var init_Button = __esm({
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    Button = React107__default.forwardRef(
+    Button = React105__default.forwardRef(
       ({
         className,
         variant = "primary",
@@ -1494,7 +1494,7 @@ var Dialog;
 var init_Dialog = __esm({
   "components/core/atoms/Dialog.tsx"() {
     init_cn();
-    Dialog = React107__default.forwardRef(
+    Dialog = React105__default.forwardRef(
       ({
         role = "dialog",
         "aria-modal": ariaModal = true,
@@ -1612,7 +1612,7 @@ var init_Typography = __esm({
     }) => {
       const variant = variantProp ?? (level ? `h${level}` : "body1");
       const Component = as || defaultElements[variant];
-      return React107__default.createElement(
+      return React105__default.createElement(
         Component,
         {
           id,
@@ -2107,7 +2107,7 @@ var init_Badge = __esm({
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React107__default.forwardRef(
+    Badge = React105__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = {
           sm: "h-icon-default w-icon-default",
@@ -2443,7 +2443,7 @@ var init_SvgFlow = __esm({
       width = 100,
       height = 100
     }) => {
-      const markerId = React107__default.useMemo(() => {
+      const markerId = React105__default.useMemo(() => {
         flowIdCounter += 1;
         return `almadar-flow-arrow-${flowIdCounter}`;
       }, []);
@@ -3036,7 +3036,7 @@ var init_SvgRing = __esm({
       width = 100,
       height = 100
     }) => {
-      const gradientId = React107__default.useMemo(() => {
+      const gradientId = React105__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
@@ -3217,7 +3217,7 @@ var init_Input = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Input = React107__default.forwardRef(
+    Input = React105__default.forwardRef(
       ({
         className,
         inputType,
@@ -3377,7 +3377,7 @@ var Label;
 var init_Label = __esm({
   "components/core/atoms/Label.tsx"() {
     init_cn();
-    Label = React107__default.forwardRef(
+    Label = React105__default.forwardRef(
       ({ className, required, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "label",
@@ -3404,7 +3404,7 @@ var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
     init_useEventBus();
-    Textarea = React107__default.forwardRef(
+    Textarea = React105__default.forwardRef(
       ({ className, error, onChange, ...props }, ref) => {
         const eventBus = useEventBus();
         const handleChange = (e) => {
@@ -3643,7 +3643,7 @@ var init_Select = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Select = React107__default.forwardRef(
+    Select = React105__default.forwardRef(
       (props, _ref) => {
         const { multiple, searchable, clearable } = props;
         if (multiple || searchable || clearable) {
@@ -3660,7 +3660,7 @@ var init_Checkbox = __esm({
   "components/core/atoms/Checkbox.tsx"() {
     init_cn();
     init_useEventBus();
-    Checkbox = React107__default.forwardRef(
+    Checkbox = React105__default.forwardRef(
       ({ className, label, id, onChange, ...props }, ref) => {
         const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
         const eventBus = useEventBus();
@@ -3714,7 +3714,7 @@ var init_Spinner = __esm({
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
-    Spinner = React107__default.forwardRef(
+    Spinner = React105__default.forwardRef(
       ({ className, size = "md", overlay, ...props }, ref) => {
         if (overlay) {
           return /* @__PURE__ */ jsx(
@@ -3804,7 +3804,7 @@ var init_Card = __esm({
       chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
       "tile-image-first": "p-0 overflow-hidden"
     };
-    Card = React107__default.forwardRef(
+    Card = React105__default.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -3852,9 +3852,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React107__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React105__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React107__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React105__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -3867,11 +3867,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React107__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React105__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React107__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React105__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -3926,7 +3926,7 @@ var init_FilterPill = __esm({
       md: "w-3.5 h-3.5",
       lg: "w-4 h-4"
     };
-    FilterPill = React107__default.forwardRef(
+    FilterPill = React105__default.forwardRef(
       ({
         className,
         variant = "default",
@@ -4055,8 +4055,8 @@ var init_Avatar = __esm({
       actionPayload
     }) => {
       const eventBus = useEventBus();
-      const [imgFailed, setImgFailed] = React107__default.useState(false);
-      React107__default.useEffect(() => {
+      const [imgFailed, setImgFailed] = React105__default.useState(false);
+      React105__default.useEffect(() => {
         setImgFailed(false);
       }, [src]);
       const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -4169,7 +4169,7 @@ var init_Center = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = minHeight ? { minHeight, ...style } : style;
-      return React107__default.createElement(Component, {
+      return React105__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           horizontal && "justify-center",
@@ -4437,7 +4437,7 @@ var init_Radio = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    Radio = React107__default.forwardRef(
+    Radio = React105__default.forwardRef(
       ({
         label,
         helperText,
@@ -4454,12 +4454,12 @@ var init_Radio = __esm({
         onChange,
         ...props
       }, ref) => {
-        const reactId = React107__default.useId();
+        const reactId = React105__default.useId();
         const baseId = id || `radio-${reactId}`;
         const hasError = !!error;
         const eventBus = useEventBus();
-        const [selected, setSelected] = React107__default.useState(value);
-        React107__default.useEffect(() => {
+        const [selected, setSelected] = React105__default.useState(value);
+        React105__default.useEffect(() => {
           if (value !== void 0) setSelected(value);
         }, [value]);
         const pick = (next, e) => {
@@ -4641,7 +4641,7 @@ var init_Switch = __esm({
   "components/core/atoms/Switch.tsx"() {
     "use client";
     init_cn();
-    Switch = React107.forwardRef(
+    Switch = React105.forwardRef(
       ({
         checked,
         defaultChecked = false,
@@ -4652,10 +4652,10 @@ var init_Switch = __esm({
         name,
         className
       }, ref) => {
-        const [isChecked, setIsChecked] = React107.useState(
+        const [isChecked, setIsChecked] = React105.useState(
           checked !== void 0 ? checked : defaultChecked
         );
-        React107.useEffect(() => {
+        React105.useEffect(() => {
           if (checked !== void 0) {
             setIsChecked(checked);
           }
@@ -4818,7 +4818,7 @@ var init_Stack = __esm({
       };
       const isHorizontal = direction === "horizontal";
       const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-      return React107__default.createElement(
+      return React105__default.createElement(
         Component,
         {
           className: cn(
@@ -5018,7 +5018,7 @@ var Aside;
 var init_Aside = __esm({
   "components/core/atoms/Aside.tsx"() {
     init_cn();
-    Aside = React107__default.forwardRef(
+    Aside = React105__default.forwardRef(
       ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn(className), ...rest, children })
     );
     Aside.displayName = "Aside";
@@ -5097,9 +5097,9 @@ var init_LawReferenceTooltip = __esm({
       className
     }) => {
       const { t } = useTranslate();
-      const [isVisible, setIsVisible] = React107__default.useState(false);
-      const timeoutRef = React107__default.useRef(null);
-      const triggerRef = React107__default.useRef(null);
+      const [isVisible, setIsVisible] = React105__default.useState(false);
+      const timeoutRef = React105__default.useRef(null);
+      const triggerRef = React105__default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -5110,7 +5110,7 @@ var init_LawReferenceTooltip = __esm({
       };
       const { revealed, triggerProps } = useTapReveal({ refs: [triggerRef] });
       const open = isVisible || revealed;
-      React107__default.useEffect(() => {
+      React105__default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
         };
@@ -5320,7 +5320,7 @@ var init_StatusDot = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    StatusDot = React107__default.forwardRef(
+    StatusDot = React105__default.forwardRef(
       ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "span",
@@ -5374,7 +5374,7 @@ var init_TrendIndicator = __esm({
       down: "trending-down",
       flat: "arrow-right"
     };
-    TrendIndicator = React107__default.forwardRef(
+    TrendIndicator = React105__default.forwardRef(
       ({
         className,
         value,
@@ -5441,7 +5441,7 @@ var init_RangeSlider = __esm({
       md: "w-4 h-4",
       lg: "w-5 h-5"
     };
-    RangeSlider = React107__default.forwardRef(
+    RangeSlider = React105__default.forwardRef(
       ({
         className,
         min = 0,
@@ -6035,7 +6035,7 @@ var init_ContentSection = __esm({
       md: "py-16",
       lg: "py-24"
     };
-    ContentSection = React107__default.forwardRef(
+    ContentSection = React105__default.forwardRef(
       ({ children, background = "default", padding = "lg", id, className }, ref) => {
         return /* @__PURE__ */ jsx(
           Box,
@@ -6569,7 +6569,7 @@ var init_AnimatedReveal = __esm({
       "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
       "none": {}
     };
-    AnimatedReveal = React107__default.forwardRef(
+    AnimatedReveal = React105__default.forwardRef(
       ({
         trigger = "scroll",
         animation = "fade-up",
@@ -6729,7 +6729,7 @@ var init_AnimatedGraphic = __esm({
   "components/marketing/atoms/AnimatedGraphic.tsx"() {
     "use client";
     init_cn();
-    AnimatedGraphic = React107__default.forwardRef(
+    AnimatedGraphic = React105__default.forwardRef(
       ({
         src,
         svgContent,
@@ -6752,7 +6752,7 @@ var init_AnimatedGraphic = __esm({
         const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
         const resolvedSvg = svgContent ?? fetchedSvg;
         const prevAnimateRef = useRef(animate);
-        const setRef = React107__default.useCallback(
+        const setRef = React105__default.useCallback(
           (node) => {
             containerRef.current = node;
             if (typeof ref === "function") ref(node);
@@ -8357,6 +8357,38 @@ var init_shared = __esm({
     init_canvasEffects();
   }
 });
+function GameIcon({ assetUrl, icon, size = "md", alt, className }) {
+  const px = typeof size === "number" ? size : sizeMap[size];
+  if (assetUrl?.url) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: assetUrl.url,
+        alt: alt ?? assetUrl.category ?? "",
+        width: px,
+        height: px,
+        style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px },
+        className: cn("flex-shrink-0", className)
+      }
+    );
+  }
+  const I = typeof icon === "string" ? resolveIcon(icon) : icon;
+  return /* @__PURE__ */ jsx(I, { width: px, height: px, className: cn("flex-shrink-0", className) });
+}
+var sizeMap;
+var init_GameIcon = __esm({
+  "components/game/2d/atoms/GameIcon.tsx"() {
+    "use client";
+    init_cn();
+    init_Icon();
+    sizeMap = {
+      sm: 16,
+      md: 24,
+      lg: 32
+    };
+    GameIcon.displayName = "GameIcon";
+  }
+});
 function GameCard({
   id,
   cost,
@@ -8372,16 +8404,16 @@ function GameCard({
   className
 }) {
   const eventBus = useEventBus();
-  const handleClick = React107.useCallback(() => {
+  const handleClick = React105.useCallback(() => {
     if (disabled) return;
     onClick?.(id);
     if (clickEvent) eventBus.emit(`UI:${clickEvent}`, { cardId: id });
   }, [disabled, id, onClick, clickEvent, eventBus]);
   const artPx = artPxMap[size];
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: "ghost",
       onClick: handleClick,
       disabled,
       title: name,
@@ -8395,8 +8427,9 @@ function GameCard({
       ),
       children: [
         cost != null && /* @__PURE__ */ jsx(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "absolute -top-2 -left-2 flex items-center justify-center",
               "min-w-[22px] h-[22px] rounded-full px-1",
@@ -8405,17 +8438,7 @@ function GameCard({
             children: cost
           }
         ),
-        /* @__PURE__ */ jsx(Box, { className: "flex-1 flex items-center justify-center w-full", children: art ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: art.url,
-            alt: name ?? id,
-            width: artPx,
-            height: artPx,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : /* @__PURE__ */ jsx(Box, { className: "rounded bg-muted/40", style: { width: artPx, height: artPx } }) }),
+        /* @__PURE__ */ jsx(Box, { className: "flex-1 flex items-center justify-center w-full", children: art ? /* @__PURE__ */ jsx(GameIcon, { assetUrl: art, icon: "image", size: artPx, alt: name ?? id, className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Box, { className: "rounded bg-muted/40", style: { width: artPx, height: artPx } }) }),
         name != null && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -8425,8 +8448,8 @@ function GameCard({
           }
         ),
         (attack != null || defense != null) && /* @__PURE__ */ jsxs(Box, { className: "flex w-full items-center justify-between px-0.5 text-[10px] font-bold leading-none", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-error", children: attack != null ? `\u2694${attack}` : "" }),
-          /* @__PURE__ */ jsx("span", { className: "text-info", children: defense != null ? `\u{1F6E1}${defense}` : "" })
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-error", children: attack != null ? `\u2694${attack}` : "" }),
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-info", children: defense != null ? `\u{1F6E1}${defense}` : "" })
         ] })
       ]
     }
@@ -8439,7 +8462,9 @@ var init_GameCard = __esm({
     init_cn();
     init_useEventBus();
     init_Box();
+    init_Button();
     init_Typography();
+    init_GameIcon();
     cardSizeMap = {
       sm: "w-16 h-24",
       md: "w-20 h-28",
@@ -8458,14 +8483,17 @@ function HealthBar({
   labelSuffix,
   size = "md",
   className,
-  animated = true
+  animated = true,
+  frameAsset,
+  fillAsset
 }) {
-  const sizes = sizeMap[size];
+  const sizes = sizeMap2[size];
   const percentage = max > 0 ? Math.max(0, Math.min(100, current / max * 100)) : 0;
   if (format === "hearts") {
-    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx(
-      "span",
+    return /* @__PURE__ */ jsx(Box, { className: cn("flex items-center gap-1", className), children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx(
+      Box,
       {
+        as: "span",
         className: cn(animated && "transition-transform hover:scale-110"),
         children: heartIcon(i < current, sizes.heart)
       },
@@ -8474,33 +8502,42 @@ function HealthBar({
   }
   if (format === "bar") {
     return /* @__PURE__ */ jsx(
-      "div",
+      Box,
       {
+        position: "relative",
+        overflow: "hidden",
         className: cn(
-          "relative overflow-hidden rounded-full bg-muted",
+          "rounded-full",
+          !frameAsset && "bg-muted",
           sizes.bar,
           "w-24",
           className
         ),
+        style: frameAsset ? { backgroundImage: `url(${frameAsset.url})`, backgroundSize: "100% 100%" } : void 0,
         children: /* @__PURE__ */ jsx(
-          "div",
+          Box,
           {
+            position: "absolute",
             className: cn(
-              "absolute inset-y-0 left-0 rounded-full",
-              percentage > 66 ? "bg-success" : percentage > 33 ? "bg-warning" : "bg-error",
+              "inset-y-0 left-0 rounded-full",
+              !fillAsset && (percentage > 66 ? "bg-success" : percentage > 33 ? "bg-warning" : "bg-error"),
               animated && "transition-all duration-300"
             ),
-            style: { width: `${percentage}%` }
+            style: {
+              width: `${percentage}%`,
+              ...fillAsset ? { backgroundImage: `url(${fillAsset.url})`, backgroundSize: "auto 100%" } : {}
+            }
           }
         )
       }
     );
   }
   if (format === "progress") {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    return /* @__PURE__ */ jsxs(Box, { className: cn("flex items-center gap-2", className), children: [
       level != null && /* @__PURE__ */ jsxs(
-        "span",
+        Typography,
         {
+          as: "span",
           className: cn(
             "flex-shrink-0 rounded-interactive font-bold",
             "bg-accent text-accent-foreground border border-accent",
@@ -8512,28 +8549,35 @@ function HealthBar({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs(Box, { className: "flex-1 flex flex-col gap-0.5", children: [
         /* @__PURE__ */ jsx(
-          "div",
+          Box,
           {
+            position: "relative",
             className: cn(
-              "relative w-full overflow-hidden rounded-full bg-muted border border-muted",
+              "w-full overflow-hidden rounded-full",
+              !frameAsset && "bg-muted border border-muted",
               sizes.bar
             ),
+            style: frameAsset ? { backgroundImage: `url(${frameAsset.url})`, backgroundSize: "100% 100%" } : void 0,
             children: /* @__PURE__ */ jsx(
-              "div",
+              Box,
               {
+                position: "absolute",
                 className: cn(
-                  "absolute inset-y-0 left-0 rounded-full",
-                  "bg-gradient-to-r from-accent to-info",
+                  "inset-y-0 left-0 rounded-full",
+                  !fillAsset && "bg-gradient-to-r from-accent to-info",
                   animated && "transition-all duration-500 ease-out"
                 ),
-                style: { width: `${percentage}%` }
+                style: {
+                  width: `${percentage}%`,
+                  ...fillAsset ? { backgroundImage: `url(${fillAsset.url})`, backgroundSize: "auto 100%" } : {}
+                }
               }
             )
           }
         ),
-        showLabel && /* @__PURE__ */ jsxs("span", { className: cn("text-foreground/70 tabular-nums", sizes.label), children: [
+        showLabel && /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("text-foreground/70 tabular-nums", sizes.label), children: [
           current,
           " / ",
           max,
@@ -8542,16 +8586,18 @@ function HealthBar({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("span", { className: cn("font-mono font-bold", sizes.text, className), children: [
+  return /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("font-mono font-bold", sizes.text, className), children: [
     current,
     "/",
     max
   ] });
 }
-var heartIcon, sizeMap;
+var heartIcon, sizeMap2;
 var init_HealthBar = __esm({
   "components/game/2d/atoms/HealthBar.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
     heartIcon = (filled, size) => /* @__PURE__ */ jsx(
       "svg",
       {
@@ -8563,7 +8609,7 @@ var init_HealthBar = __esm({
         children: /* @__PURE__ */ jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
       }
     );
-    sizeMap = {
+    sizeMap2 = {
       sm: { heart: "w-4 h-4", bar: "h-2", text: "text-sm", label: "text-xs", badge: "text-xs px-1.5 py-0.5" },
       md: { heart: "w-6 h-6", bar: "h-3", text: "text-base", label: "text-xs", badge: "text-xs px-2 py-0.5" },
       lg: { heart: "w-8 h-8", bar: "h-4", text: "text-lg", label: "text-sm", badge: "text-sm px-2.5 py-1" }
@@ -8584,37 +8630,30 @@ function ScoreDisplay({
   const resolvedValue = typeof value === "number" && !Number.isNaN(value) ? value : typeof score === "number" && !Number.isNaN(score) ? score : 0;
   const formattedValue = new Intl.NumberFormat(locale).format(resolvedValue);
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "flex items-center gap-2 font-bold",
-        sizeMap2[size],
+        sizeMap3[size],
         className
       ),
       children: [
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 20,
-            height: 20,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
-        label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formattedValue })
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 20, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
+        label && /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "tabular-nums", children: formattedValue })
       ]
     }
   );
 }
-var sizeMap2, DEFAULT_ASSET_URL;
+var sizeMap3, DEFAULT_ASSET_URL;
 var init_ScoreDisplay = __esm({
   "components/game/2d/atoms/ScoreDisplay.tsx"() {
     init_cn();
     init_Icon();
-    sizeMap2 = {
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap3 = {
       sm: "text-sm",
       md: "text-lg",
       lg: "text-2xl",
@@ -8644,9 +8683,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React107.useState(false);
+  const [isPressed, setIsPressed] = React105.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React107.useCallback(
+  const handlePointerDown = React105.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -8656,7 +8695,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React107.useCallback(
+  const handlePointerUp = React105.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -8666,7 +8705,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React107.useCallback(
+  const handlePointerLeave = React105.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -8677,9 +8716,9 @@ function ControlButton({
     [isPressed, releaseEvent, eventBus, onRelease]
   );
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
-      type: "button",
+      variant,
       disabled,
       onPointerDown: handlePointerDown,
       onPointerUp: handlePointerUp,
@@ -8690,41 +8729,35 @@ function ControlButton({
         "select-none touch-none",
         "transition-all duration-100",
         "active:scale-95",
-        sizeMap3[size] ?? sizeMap3.md,
+        sizeMap4[size] ?? sizeMap4.md,
         shapeMap[shape] ?? shapeMap.circle,
         variantMap[variant] ?? variantMap.secondary,
         actualPressed && "scale-95 brightness-110 border-foreground",
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
-      children: assetUrl ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: assetUrl.url,
-          alt: "",
-          width: 24,
-          height: 24,
-          style: { imageRendering: "pixelated", objectFit: "contain" },
-          className: "flex-shrink-0"
-        }
-      ) : icon ? /* @__PURE__ */ jsx("span", { className: "text-2xl", children: typeof icon === "string" ? /^[a-zA-Z0-9-]+$/.test(icon) ? (() => {
+      children: assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 24, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "text-2xl", children: typeof icon === "string" ? /^[a-zA-Z0-9-]+$/.test(icon) ? (() => {
         const I = resolveIcon(icon);
         return I ? /* @__PURE__ */ jsx(I, { className: "w-6 h-6" }) : null;
       })() : icon : /* @__PURE__ */ (() => {
         const I = icon;
         return /* @__PURE__ */ jsx(I, { className: "w-6 h-6" });
-      })() }) : label ? /* @__PURE__ */ jsx("span", { children: label }) : null
+      })() }) : label ? /* @__PURE__ */ jsx(Typography, { as: "span", children: label }) : null
     }
   );
 }
-var sizeMap3, shapeMap, variantMap, DEFAULT_ASSET_URL2;
+var sizeMap4, shapeMap, variantMap, DEFAULT_ASSET_URL2;
 var init_ControlButton = __esm({
   "components/game/2d/atoms/ControlButton.tsx"() {
     "use client";
     init_cn();
     init_useEventBus();
     init_Icon();
-    sizeMap3 = {
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap4 = {
       sm: "w-10 h-10 text-sm",
       md: "w-14 h-14 text-base",
       lg: "w-18 h-18 text-lg",
@@ -8794,12 +8827,12 @@ function Sprite({
     onClick?.();
   };
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
+      position: "absolute",
       className,
       onClick: action || onClick ? handleClick : void 0,
       style: {
-        position: "absolute",
         width: frameWidth,
         height: frameHeight,
         backgroundImage: `url(${spritesheet.url})`,
@@ -8820,6 +8853,7 @@ var init_Sprite = __esm({
   "components/game/2d/atoms/Sprite.tsx"() {
     "use client";
     init_useEventBus();
+    init_Box();
     init_spriteAnimation();
     DEFAULT_SPRITESHEET = {
       url: "https://almadar-kflow-assets.web.app/shared/isometric-blocks/Spritesheet/allTiles_sheet.png",
@@ -8856,17 +8890,7 @@ function StateIndicator({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Box, { as: "span", children: assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: displayLabel,
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : typeof config.icon === "string" ? /^[a-zA-Z0-9-]+$/.test(config.icon) ? /* @__PURE__ */ jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsx(Icon, { icon: config.icon }) }),
+        /* @__PURE__ */ jsx(Box, { as: "span", children: assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 16, alt: displayLabel, className: "flex-shrink-0" }) : typeof config.icon === "string" ? /^[a-zA-Z0-9-]+$/.test(config.icon) ? /* @__PURE__ */ jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsx(Icon, { icon: config.icon }) }),
         /* @__PURE__ */ jsx(Box, { as: "span", children: displayLabel })
       ]
     }
@@ -8878,6 +8902,7 @@ var init_StateIndicator = __esm({
     init_Box();
     init_Icon();
     init_cn();
+    init_GameIcon();
     DEFAULT_ASSET_URL3 = {
       url: "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png",
       role: "ui",
@@ -8926,30 +8951,36 @@ function TimerDisplay({
   format = "mm:ss",
   size = "md",
   className,
-  lowThreshold
+  lowThreshold,
+  iconAsset
 }) {
   const isLow = lowThreshold != null && seconds <= lowThreshold && seconds > 0;
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsxs(
+    Box,
     {
       className: cn(
-        "inline-flex items-center justify-center rounded-container",
+        "inline-flex items-center gap-1 justify-center rounded-container",
         "bg-card/80 border border-muted font-mono font-bold tabular-nums",
-        sizeMap4[size],
+        sizeMap5[size],
         running && "border-success/50",
         isLow && "text-error border-error/50 animate-pulse",
         !isLow && "text-foreground",
         className
       ),
-      children: formatTime(seconds, format)
+      children: [
+        iconAsset && /* @__PURE__ */ jsx(GameIcon, { assetUrl: iconAsset, icon: "image", size: 16, className: "w-4 h-4 object-contain flex-shrink-0" }),
+        formatTime(seconds, format)
+      ]
     }
   );
 }
-var sizeMap4;
+var sizeMap5;
 var init_TimerDisplay = __esm({
   "components/game/2d/atoms/TimerDisplay.tsx"() {
     init_cn();
-    sizeMap4 = {
+    init_Box();
+    init_GameIcon();
+    sizeMap5 = {
       sm: "text-sm px-2 py-0.5",
       md: "text-lg px-3 py-1",
       lg: "text-2xl px-4 py-1.5"
@@ -8967,9 +8998,9 @@ function ResourceCounter({
   size = "md",
   className
 }) {
-  const sizes = sizeMap5[size];
+  const sizes = sizeMap6[size];
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center rounded-container",
@@ -8978,21 +9009,11 @@ function ResourceCounter({
         className
       ),
       children: [
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: label,
-            width: sizes.img,
-            height: sizes.img,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsxs("span", { className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
           value,
-          max != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          max != null && /* @__PURE__ */ jsxs(Typography, { as: "span", className: "text-muted-foreground", children: [
             "/",
             max
           ] })
@@ -9001,11 +9022,14 @@ function ResourceCounter({
     }
   );
 }
-var colorTokenClasses2, DEFAULT_ASSET_URL4, sizeMap5;
+var colorTokenClasses2, DEFAULT_ASSET_URL4, sizeMap6;
 var init_ResourceCounter = __esm({
   "components/game/2d/atoms/ResourceCounter.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     colorTokenClasses2 = {
       primary: "text-primary",
       secondary: "text-secondary",
@@ -9019,7 +9043,7 @@ var init_ResourceCounter = __esm({
       role: "ui",
       category: "coin"
     };
-    sizeMap5 = {
+    sizeMap6 = {
       sm: { wrapper: "text-xs gap-1 px-1.5 py-0.5", icon: "text-sm", img: 16 },
       md: { wrapper: "text-sm gap-1.5 px-2 py-1", icon: "text-base", img: 20 },
       lg: { wrapper: "text-base gap-2 px-3 py-1.5", icon: "text-lg", img: 28 }
@@ -9037,21 +9061,26 @@ function ItemSlot({
   size = "md",
   selected,
   onClick,
+  action,
   className
 }) {
-  const isClickable = onClick != null;
+  const eventBus = useEventBus();
+  const isClickable = onClick != null || action != null;
   const px = assetSizeMap[size];
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
-      type: "button",
-      onClick,
+      variant: "ghost",
+      onClick: () => {
+        if (action) eventBus.emit(`UI:${action}`, {});
+        onClick?.();
+      },
       disabled: !isClickable,
       title: label,
       className: cn(
         "relative flex items-center justify-center rounded-interactive border-2",
         "bg-card/80 transition-all duration-150",
-        sizeMap6[size],
+        sizeMap7[size],
         empty ? "border-border bg-card/50" : rarityBorderMap[rarity],
         !empty && rarityGlowMap[rarity],
         selected && "ring-2 ring-foreground ring-offset-1 ring-offset-background",
@@ -9060,21 +9089,12 @@ function ItemSlot({
         !isClickable && "cursor-default",
         className
       ),
-      children: empty ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl?.url,
-            alt: label,
-            width: px,
-            height: px,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
+      children: empty ? /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: px, alt: label, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsx(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "absolute -bottom-1 -right-1 flex items-center justify-center",
               "min-w-[18px] h-[18px] rounded-full px-1",
@@ -9087,13 +9107,18 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL5, assetSizeMap;
+var sizeMap7, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL5, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/2d/atoms/ItemSlot.tsx"() {
     "use client";
     init_cn();
     init_Icon();
-    sizeMap6 = {
+    init_useEventBus();
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap7 = {
       sm: "w-10 h-10 text-lg",
       md: "w-14 h-14 text-2xl",
       lg: "w-18 h-18 text-3xl"
@@ -9134,9 +9159,9 @@ function TurnIndicator({
   size = "md",
   className
 }) {
-  const sizes = sizeMap7[size];
+  const sizes = sizeMap8[size];
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center rounded-container",
@@ -9145,42 +9170,35 @@ function TurnIndicator({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "font-bold tabular-nums", children: [
+        /* @__PURE__ */ jsxs(Typography, { as: "span", className: "font-bold tabular-nums", children: [
           "Turn ",
           currentTurn,
-          maxTurns != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          maxTurns != null && /* @__PURE__ */ jsxs(Typography, { as: "span", className: "text-muted-foreground", children: [
             "/",
             maxTurns
           ] })
         ] }),
         phase && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "|" }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: phase })
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: "|" }),
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: phase })
         ] }),
         activeTeam && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "|" }),
-          assetUrl ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: "",
-              width: 12,
-              height: 12,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ) : /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-success/20", sizes.dot) }),
-          /* @__PURE__ */ jsx("span", { className: "text-success", children: activeTeam })
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: "|" }),
+          assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 12, className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Box, { as: "span", className: cn("rounded-full bg-success/20", sizes.dot) }),
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-success", children: activeTeam })
         ] })
       ]
     }
   );
 }
-var sizeMap7, DEFAULT_ASSET_URL6;
+var sizeMap8, DEFAULT_ASSET_URL6;
 var init_TurnIndicator = __esm({
   "components/game/2d/atoms/TurnIndicator.tsx"() {
     init_cn();
-    sizeMap7 = {
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap8 = {
       sm: { wrapper: "text-xs gap-1.5 px-2 py-0.5", dot: "w-1.5 h-1.5" },
       md: { wrapper: "text-sm gap-2 px-3 py-1", dot: "w-2 h-2" },
       lg: { wrapper: "text-base gap-2.5 px-4 py-1.5", dot: "w-2.5 h-2.5" }
@@ -9212,10 +9230,10 @@ function ComboCounter({
   size = "md",
   className
 }) {
-  const sizes = sizeMap8[size];
+  const sizes = sizeMap9[size];
   if (combo <= 0) return null;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex flex-col items-center justify-center",
@@ -9225,24 +9243,14 @@ function ComboCounter({
         className
       ),
       children: [
-        assetUrl && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "combo",
-            width: 24,
-            height: 24,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0 mb-0.5"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
-        /* @__PURE__ */ jsx("span", { className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
-        multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxs("span", { className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
+        assetUrl && /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 24, className: "flex-shrink-0 mb-0.5" }),
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
+        multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
           "x",
           multiplier.toFixed(1)
         ] }),
-        streak != null && streak > 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground tabular-nums", sizes.label), children: [
+        streak != null && streak > 0 && /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("text-muted-foreground tabular-nums", sizes.label), children: [
           streak,
           " streak"
         ] })
@@ -9250,16 +9258,19 @@ function ComboCounter({
     }
   );
 }
-var DEFAULT_ASSET_URL7, sizeMap8;
+var DEFAULT_ASSET_URL7, sizeMap9;
 var init_ComboCounter = __esm({
   "components/game/2d/atoms/ComboCounter.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL7 = {
       url: "https://almadar-kflow-assets.web.app/shared/effects/flash/flash00.png",
       role: "effect",
       category: "effect"
     };
-    sizeMap8 = {
+    sizeMap9 = {
       sm: { combo: "text-lg", label: "text-xs", multiplier: "text-xs" },
       md: { combo: "text-2xl", label: "text-xs", multiplier: "text-sm" },
       lg: { combo: "text-4xl", label: "text-sm", multiplier: "text-base" }
@@ -9276,54 +9287,48 @@ function WaypointMarker({
   size = "md",
   className
 }) {
-  const sizes = sizeMap9[size];
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+  const sizes = sizeMap10[size];
+  return /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col items-center", className), children: [
+    /* @__PURE__ */ jsxs(Box, { className: "relative flex items-center justify-center", children: [
       active && /* @__PURE__ */ jsx(
-        "div",
+        Box,
         {
+          position: "absolute",
           className: cn(
-            "absolute rounded-full border-2 border-info animate-ping opacity-50",
+            "rounded-full border-2 border-info animate-ping opacity-50",
             sizes.ring
           )
         }
       ),
       active && /* @__PURE__ */ jsx(
-        "div",
+        Box,
         {
+          position: "absolute",
           className: cn(
-            "absolute rounded-full border-2 border-info",
+            "rounded-full border-2 border-info",
             sizes.ring
           )
         }
       ),
       /* @__PURE__ */ jsx(
-        "div",
+        Box,
         {
+          position: "relative",
           className: cn(
-            "relative flex items-center justify-center rounded-full transition-all duration-200",
+            "flex items-center justify-center rounded-full transition-all duration-200",
             sizes.dot,
             completed && "bg-success text-foreground",
             active && !completed && "bg-info text-foreground",
             !active && !completed && "bg-muted"
           ),
-          children: completed ? checkIcon : assetUrl ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: label,
-              width: sizes.img,
-              height: sizes.img,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) : null
+          children: completed ? checkIcon : assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) : null
         }
       )
     ] }),
     label && /* @__PURE__ */ jsx(
-      "span",
+      Typography,
       {
+        as: "span",
         className: cn(
           "text-center whitespace-nowrap",
           sizes.label,
@@ -9334,17 +9339,20 @@ function WaypointMarker({
     )
   ] });
 }
-var DEFAULT_ASSET_URL8, sizeMap9, checkIcon;
+var DEFAULT_ASSET_URL8, sizeMap10, checkIcon;
 var init_WaypointMarker = __esm({
   "components/game/2d/atoms/WaypointMarker.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL8 = {
       url: "https://almadar-kflow-assets.web.app/shared/world-map/battle_marker.png",
       role: "ui",
       category: "waypoint"
     };
-    sizeMap9 = {
+    sizeMap10 = {
       sm: { dot: "w-4 h-4", ring: "w-6 h-6", label: "text-xs mt-1", img: 12 },
       md: { dot: "w-6 h-6", ring: "w-8 h-8", label: "text-sm mt-1.5", img: 18 },
       lg: { dot: "w-8 h-8", ring: "w-10 h-10", label: "text-base mt-2", img: 24 }
@@ -9369,32 +9377,24 @@ function StatusEffect({
   size = "md",
   className
 }) {
-  const sizes = sizeMap10[size];
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex flex-col items-center", className), children: [
+  const sizes = sizeMap11[size];
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", className: cn("inline-flex flex-col items-center", className), children: [
     /* @__PURE__ */ jsxs(
-      "div",
+      Box,
       {
+        position: "relative",
         className: cn(
-          "relative flex items-center justify-center rounded-interactive border-2",
+          "flex items-center justify-center rounded-interactive border-2",
           sizes.container,
           variantStyles7[variant]
         ),
         title: label,
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: assetUrl ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: label,
-              width: sizes.img,
-              height: sizes.img,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ) : icon != null && typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }) : icon != null ? /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) : null }),
+          /* @__PURE__ */ jsx(Box, { as: "span", className: cn("flex items-center justify-center", sizes.icon), children: assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon != null && typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }) : icon != null ? /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) : null }),
           duration !== void 0 && /* @__PURE__ */ jsx(
-            "span",
+            Typography,
             {
+              as: "span",
               className: cn(
                 "absolute bottom-0 left-0 right-0 text-center font-mono font-bold text-foreground bg-background/60 leading-tight",
                 sizes.timer
@@ -9406,8 +9406,9 @@ function StatusEffect({
       }
     ),
     stacks !== void 0 && stacks > 1 && /* @__PURE__ */ jsx(
-      "span",
+      Typography,
       {
+        as: "span",
         className: cn(
           "absolute flex items-center justify-center rounded-full bg-card text-foreground font-bold leading-none",
           sizes.badge
@@ -9415,20 +9416,23 @@ function StatusEffect({
         children: stacks
       }
     ),
-    label && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
+    label && /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
-var DEFAULT_ASSET_URL9, sizeMap10, variantStyles7;
+var DEFAULT_ASSET_URL9, sizeMap11, variantStyles7;
 var init_StatusEffect = __esm({
   "components/game/2d/atoms/StatusEffect.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL9 = {
       url: "https://almadar-kflow-assets.web.app/shared/effects/particles/flame_01.png",
       role: "ui",
       category: "effect"
     };
-    sizeMap10 = {
+    sizeMap11 = {
       sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-xs -top-1 -right-1 w-4 h-4", timer: "text-[9px]", img: 20 },
       md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-xs", img: 28 },
       lg: { container: "w-12 h-12", icon: "text-lg", badge: "text-sm -top-1.5 -right-1.5 w-6 h-6", timer: "text-xs", img: 36 }
@@ -9452,38 +9456,31 @@ function DamageNumber({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: floatKeyframes }),
     /* @__PURE__ */ jsxs(
-      "span",
+      Typography,
       {
+        as: "span",
         className: cn(
           "inline-flex items-center gap-0.5 font-mono select-none pointer-events-none",
-          sizeMap11[size],
+          sizeMap12[size],
           typeStyles[type],
           className
         ),
         style: { animation: "damageFloat 1s ease-out forwards" },
         children: [
-          assetUrl && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: "",
-              width: 14,
-              height: 14,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ),
+          assetUrl && /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 14, className: "flex-shrink-0" }),
           displayText
         ]
       }
     )
   ] });
 }
-var sizeMap11, typeStyles, floatKeyframes, DEFAULT_ASSET_URL10;
+var sizeMap12, typeStyles, floatKeyframes, DEFAULT_ASSET_URL10;
 var init_DamageNumber = __esm({
   "components/game/2d/atoms/DamageNumber.tsx"() {
     init_cn();
-    sizeMap11 = {
+    init_Typography();
+    init_GameIcon();
+    sizeMap12 = {
       sm: "text-sm",
       md: "text-lg",
       lg: "text-2xl"
@@ -9517,7 +9514,7 @@ function DialogueBubble({
   className
 }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "flex items-start gap-3 rounded-container bg-background/80 backdrop-blur-sm px-4 py-3 border border-border/10",
@@ -9525,17 +9522,10 @@ function DialogueBubble({
         className
       ),
       children: [
-        portrait && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: portrait?.url,
-            alt: speaker ?? "speaker",
-            className: "w-full h-full object-cover"
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
-          speaker && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-warning", children: speaker }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground leading-relaxed", children: text })
+        portrait && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsx(GameIcon, { assetUrl: portrait, icon: "image", size: 48, alt: speaker ?? "speaker", className: "w-full h-full object-cover" }) }),
+        /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-1 min-w-0", children: [
+          speaker && /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-sm font-bold text-warning", children: speaker }),
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-sm text-foreground leading-relaxed", children: text })
         ] })
       ]
     }
@@ -9545,6 +9535,9 @@ var DEFAULT_PORTRAIT;
 var init_DialogueBubble = __esm({
   "components/game/2d/atoms/DialogueBubble.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_PORTRAIT = {
       url: "https://almadar-kflow-assets.web.app/shared/characters/archetypes/04_hero.png",
       role: "effect",
@@ -9561,14 +9554,19 @@ function ChoiceButton({
   disabled = false,
   selected = false,
   onClick,
+  action,
   className
 }) {
+  const eventBus = useEventBus();
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: "ghost",
       disabled,
-      onClick,
+      onClick: () => {
+        if (action) eventBus.emit(`UI:${action}`, {});
+        onClick?.();
+      },
       className: cn(
         "w-full text-left px-4 py-2.5 rounded-interactive border transition-all duration-150",
         "flex items-center gap-2",
@@ -9578,8 +9576,9 @@ function ChoiceButton({
       ),
       children: [
         index !== void 0 && /* @__PURE__ */ jsxs(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "flex-shrink-0 font-mono font-bold text-sm",
               selected ? "text-accent" : "text-muted-foreground"
@@ -9590,24 +9589,14 @@ function ChoiceButton({
             ]
           }
         ),
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-sm", children: typeof icon === "string" ? (() => {
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 16, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0 text-sm", children: typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
           return I ? /* @__PURE__ */ jsx(I, { className: "w-4 h-4" }) : null;
         })() : /* @__PURE__ */ (() => {
           const I = icon;
           return /* @__PURE__ */ jsx(I, { className: "w-4 h-4" });
         })() }) : null,
-        /* @__PURE__ */ jsx("span", { className: "text-sm leading-snug", children: text })
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-sm leading-snug", children: text })
       ]
     }
   );
@@ -9616,6 +9605,11 @@ var init_ChoiceButton = __esm({
   "components/game/2d/atoms/ChoiceButton.tsx"() {
     init_cn();
     init_Icon();
+    init_useEventBus();
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     ChoiceButton.displayName = "ChoiceButton";
   }
 });
@@ -9629,18 +9623,23 @@ function ActionButton({
   size = "md",
   variant = "primary",
   onClick,
+  action,
   className
 }) {
-  const sizes = sizeMap12[size];
+  const eventBus = useEventBus();
+  const sizes = sizeMap13[size];
   const onCooldown = cooldown > 0;
   const isDisabled = disabled || onCooldown;
   const cooldownDeg = Math.round(cooldown * 360);
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: variant === "danger" ? "danger" : variant === "secondary" ? "secondary" : "primary",
       disabled: isDisabled,
-      onClick,
+      onClick: () => {
+        if (action) eventBus.emit(`UI:${action}`, {});
+        onClick?.();
+      },
       className: cn(
         "relative inline-flex items-center gap-1.5 rounded-interactive border font-medium overflow-hidden transition-colors duration-150",
         sizes.button,
@@ -9650,9 +9649,10 @@ function ActionButton({
       ),
       children: [
         onCooldown && /* @__PURE__ */ jsx(
-          "div",
+          Box,
           {
-            className: "absolute inset-0 bg-foreground/40 pointer-events-none",
+            position: "absolute",
+            className: "inset-0 bg-foreground/40 pointer-events-none",
             style: {
               clipPath: `conic-gradient(from 0deg, transparent ${360 - cooldownDeg}deg, black ${360 - cooldownDeg}deg)`,
               WebkitClipPath: `conic-gradient(from 0deg, transparent ${360 - cooldownDeg}deg, black ${360 - cooldownDeg}deg)`,
@@ -9660,27 +9660,18 @@ function ActionButton({
             }
           }
         ),
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: cn("flex-shrink-0", sizes.icon)
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 16, className: cn("flex-shrink-0", sizes.icon) }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
           return I ? /* @__PURE__ */ jsx(I, { className: "w-4 h-4" }) : null;
         })() : /* @__PURE__ */ (() => {
           const I = icon;
           return /* @__PURE__ */ jsx(I, { className: "w-4 h-4" });
         })() }) : null,
-        /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label }),
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "relative z-10", children: label }),
         hotkey && /* @__PURE__ */ jsx(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "absolute top-0.5 right-0.5 bg-foreground/30 text-primary-foreground rounded font-mono leading-tight",
               sizes.hotkey
@@ -9692,12 +9683,17 @@ function ActionButton({
     }
   );
 }
-var sizeMap12, variantStyles8, DEFAULT_ASSET_URL11;
+var sizeMap13, variantStyles8, DEFAULT_ASSET_URL11;
 var init_ActionButton = __esm({
   "components/game/2d/atoms/ActionButton.tsx"() {
     init_cn();
     init_Icon();
-    sizeMap12 = {
+    init_useEventBus();
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap13 = {
       sm: { button: "h-button-sm px-3 text-xs", hotkey: "text-[9px] px-1", icon: "text-xs" },
       md: { button: "h-button-md px-4 text-sm", hotkey: "text-xs px-1.5", icon: "text-sm" },
       lg: { button: "h-button-lg px-5 text-base", hotkey: "text-xs px-2", icon: "text-base" }
@@ -9723,10 +9719,27 @@ function MiniMap({
   mapWidth = 100,
   mapHeight = 100,
   viewportRect = DEFAULT_VIEWPORT,
-  className
+  className,
+  tileAssets,
+  unitAssets
 }) {
-  const canvasRef = React107.useRef(null);
-  React107.useEffect(() => {
+  const canvasRef = React105.useRef(null);
+  const imgCacheRef = React105.useRef(/* @__PURE__ */ new Map());
+  function loadImg(url) {
+    const cached = imgCacheRef.current.get(url);
+    if (cached) return cached.complete ? cached : null;
+    const img = new Image();
+    img.src = url;
+    img.onload = () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (ctx) ctx.clearRect(0, 0, 0, 0);
+    };
+    imgCacheRef.current.set(url, img);
+    return null;
+  }
+  React105.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -9737,20 +9750,31 @@ function MiniMap({
     ctx.fillStyle = "#111";
     ctx.fillRect(0, 0, width, height);
     for (const tile of tiles) {
-      ctx.fillStyle = tile.color;
-      ctx.fillRect(
-        Math.floor(tile.x * scaleX2),
-        Math.floor(tile.y * scaleY2),
-        Math.max(1, Math.ceil(scaleX2)),
-        Math.max(1, Math.ceil(scaleY2))
-      );
+      const tileAsset = tileAssets?.[tile.color] ?? tileAssets?.["default"];
+      const tileImg = tileAsset ? loadImg(tileAsset.url) : null;
+      const tx = Math.floor(tile.x * scaleX2);
+      const ty = Math.floor(tile.y * scaleY2);
+      const tw = Math.max(1, Math.ceil(scaleX2));
+      const th = Math.max(1, Math.ceil(scaleY2));
+      if (tileImg) {
+        ctx.drawImage(tileImg, tx, ty, tw, th);
+      } else {
+        ctx.fillStyle = tile.color;
+        ctx.fillRect(tx, ty, tw, th);
+      }
     }
     for (const unit of units) {
       if (unit.isPlayer) continue;
-      ctx.fillStyle = unit.color;
+      const unitAsset = unitAssets?.[unit.color] ?? unitAssets?.["default"];
+      const unitImg = unitAsset ? loadImg(unitAsset.url) : null;
       const ux = Math.floor(unit.x * scaleX2) - 1;
       const uy = Math.floor(unit.y * scaleY2) - 1;
-      ctx.fillRect(ux, uy, 3, 3);
+      if (unitImg) {
+        ctx.drawImage(unitImg, ux, uy, 5, 5);
+      } else {
+        ctx.fillStyle = unit.color;
+        ctx.fillRect(ux, uy, 3, 3);
+      }
     }
     if (viewportRect) {
       ctx.strokeStyle = "#ffffff";
@@ -9762,7 +9786,7 @@ function MiniMap({
         Math.floor(viewportRect.h * scaleY2)
       );
     }
-  }, [tiles, units, width, height, mapWidth, mapHeight, viewportRect]);
+  }, [tiles, units, width, height, mapWidth, mapHeight, viewportRect, tileAssets, unitAssets]);
   const scaleX = width / mapWidth;
   const scaleY = height / mapHeight;
   const playerUnit = units.find((u) => u.isPlayer);
@@ -9771,10 +9795,12 @@ function MiniMap({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: `@keyframes minimap-blink{0%,49%{opacity:1}50%,100%{opacity:0}}` }),
     /* @__PURE__ */ jsxs(
-      "div",
+      Box,
       {
+        position: "relative",
+        display: "inline-block",
         className: cn(
-          "relative inline-block border border-border/20 rounded-container",
+          "border border-border/20 rounded-container",
           className
         ),
         children: [
@@ -9789,10 +9815,10 @@ function MiniMap({
             }
           ),
           playerLeft !== null && playerTop !== null && /* @__PURE__ */ jsx(
-            "div",
+            Box,
             {
+              position: "absolute",
               style: {
-                position: "absolute",
                 left: playerLeft,
                 top: playerTop,
                 width: 3,
@@ -9813,6 +9839,7 @@ var init_MiniMap = __esm({
   "components/game/2d/atoms/MiniMap.tsx"() {
     "use client";
     init_cn();
+    init_Box();
     DEFAULT_TILES = [
       { x: 10, y: 10, color: "#4ade80" },
       { x: 20, y: 15, color: "#4ade80" },
@@ -9830,38 +9857,6 @@ var init_MiniMap = __esm({
     MiniMap.displayName = "MiniMap";
   }
 });
-function GameIcon({ assetUrl, icon, size = "md", alt, className }) {
-  const px = typeof size === "number" ? size : sizeMap13[size];
-  if (assetUrl?.url) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: assetUrl.url,
-        alt: alt ?? assetUrl.category ?? "",
-        width: px,
-        height: px,
-        style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px },
-        className: cn("flex-shrink-0", className)
-      }
-    );
-  }
-  const I = typeof icon === "string" ? resolveIcon(icon) : icon;
-  return /* @__PURE__ */ jsx(I, { width: px, height: px, className: cn("flex-shrink-0", className) });
-}
-var sizeMap13;
-var init_GameIcon = __esm({
-  "components/game/2d/atoms/GameIcon.tsx"() {
-    "use client";
-    init_cn();
-    init_Icon();
-    sizeMap13 = {
-      sm: 16,
-      md: 24,
-      lg: 32
-    };
-    GameIcon.displayName = "GameIcon";
-  }
-});
 function ControlGrid({
   kind,
   buttons = DEFAULT_BUTTONS,
@@ -9871,13 +9866,14 @@ function ControlGrid({
   actionEvent,
   onDirection,
   directionEvent,
+  directionAssets,
   size = "md",
   disabled,
   className
 }) {
   const eventBus = useEventBus();
-  const [active, setActive] = React107.useState(/* @__PURE__ */ new Set());
-  const handlePress = React107.useCallback(
+  const [active, setActive] = React105.useState(/* @__PURE__ */ new Set());
+  const handlePress = React105.useCallback(
     (id) => {
       setActive((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -9889,7 +9885,7 @@ function ControlGrid({
     },
     [kind, actionEvent, directionEvent, eventBus, onAction, onDirection]
   );
-  const handleRelease = React107.useCallback(
+  const handleRelease = React105.useCallback(
     (id) => {
       setActive((prev) => {
         const next = new Set(prev);
@@ -9910,7 +9906,8 @@ function ControlGrid({
     const dir = (d) => /* @__PURE__ */ jsx(
       ControlButton,
       {
-        icon: arrowIcons[d],
+        icon: directionAssets?.[d] ? void 0 : arrowIcons[d],
+        assetUrl: directionAssets?.[d],
         size: sizeKey[size],
         variant: "secondary",
         pressed: active.has(d),
@@ -9920,22 +9917,22 @@ function ControlGrid({
       },
       d
     );
-    return /* @__PURE__ */ jsxs("div", { className: cn("inline-grid grid-cols-3", ds.gap, ds.container, className), children: [
-      /* @__PURE__ */ jsx("div", {}),
+    return /* @__PURE__ */ jsxs(Box, { className: cn("inline-grid grid-cols-3", ds.gap, ds.container, className), children: [
+      /* @__PURE__ */ jsx(Box, {}),
       dir("up"),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       dir("left"),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-interactive bg-muted border-2 border-muted-foreground" }) }),
+      /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Box, { className: "w-6 h-6 rounded-interactive bg-muted border-2 border-muted-foreground" }) }),
       dir("right"),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       dir("down"),
-      /* @__PURE__ */ jsx("div", {})
+      /* @__PURE__ */ jsx(Box, {})
     ] });
   }
   if (layout === "diamond" && buttons.length === 4) {
     const [top, right, bottom, left] = buttons;
-    return /* @__PURE__ */ jsxs("div", { className: cn(layoutClass.diamond, className), children: [
-      /* @__PURE__ */ jsx("div", {}),
+    return /* @__PURE__ */ jsxs(Box, { className: cn(layoutClass.diamond, className), children: [
+      /* @__PURE__ */ jsx(Box, {}),
       /* @__PURE__ */ jsx(
         ControlButton,
         {
@@ -9950,7 +9947,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       /* @__PURE__ */ jsx(
         ControlButton,
         {
@@ -9965,7 +9962,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       /* @__PURE__ */ jsx(
         ControlButton,
         {
@@ -9980,7 +9977,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       /* @__PURE__ */ jsx(
         ControlButton,
         {
@@ -9995,10 +9992,10 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsx("div", {})
+      /* @__PURE__ */ jsx(Box, {})
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn(layoutClass[layout], className), children: buttons.map((button) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: cn(layoutClass[layout], className), children: buttons.map((button) => /* @__PURE__ */ jsx(
     ControlButton,
     {
       icon: button.icon,
@@ -10020,6 +10017,7 @@ var init_ControlGrid = __esm({
     "use client";
     init_cn();
     init_useEventBus();
+    init_Box();
     init_ControlButton();
     sizeKey = { sm: "sm", md: "md", lg: "lg" };
     layoutClass = {
@@ -10064,7 +10062,7 @@ function StatBadge({
   const numValue = typeof value === "number" ? value : parseInt(String(value), 10) || 0;
   const resolvedAsset = iconUrl ?? assetUrl;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center gap-2 rounded-container border backdrop-blur-sm",
@@ -10073,18 +10071,8 @@ function StatBadge({
         className
       ),
       children: [
-        resolvedAsset ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: resolvedAsset.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: label }),
+        resolvedAsset ? /* @__PURE__ */ jsx(GameIcon, { assetUrl: resolvedAsset, icon: "image", size: 16, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground font-medium", children: label }),
         format === "hearts" && max && /* @__PURE__ */ jsx(
           HealthBar,
           {
@@ -10110,7 +10098,7 @@ function StatBadge({
             size: size === "lg" ? "md" : "sm"
           }
         ),
-        format === "text" && /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: value })
+        format === "text" && /* @__PURE__ */ jsx(Typography, { as: "span", className: "font-bold text-foreground", children: value })
       ]
     }
   );
@@ -10120,6 +10108,9 @@ var init_StatBadge = __esm({
   "components/game/2d/molecules/StatBadge.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     init_HealthBar();
     init_ScoreDisplay();
     sizeMap14 = {
@@ -10150,11 +10141,11 @@ function InventoryGrid({
   const eventBus = useEventBus();
   const slotCount = totalSlots ?? items.length;
   const emptySlotCount = Math.max(0, slotCount - items.length);
-  const handleSelect = React107.useCallback(
+  const handleSelect = React105.useCallback(
     (id) => {
       onSelect?.(id);
       if (selectEvent) {
-        eventBus.emit(selectEvent, { id });
+        eventBus.emit(`UI:${selectEvent}`, { id });
       }
     },
     [onSelect, selectEvent, eventBus]
@@ -10297,9 +10288,9 @@ function GameHud({
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative", positionMap[position], className), children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-4 flex flex-col gap-2 pointer-events-auto", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
-      /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+    return /* @__PURE__ */ jsxs(Box, { position: "relative", className: cn(positionMap[position], className), children: [
+      /* @__PURE__ */ jsx(Box, { position: "absolute", className: "top-4 left-4 flex flex-col gap-2 pointer-events-auto", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
+      /* @__PURE__ */ jsx(Box, { position: "absolute", className: "top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
   if (position === "top" || position === "bottom") {
@@ -10308,7 +10299,7 @@ function GameHud({
     const rightStats = stats.slice(mid);
     const isTop = position === "top";
     return /* @__PURE__ */ jsxs(
-      "div",
+      Box,
       {
         className: cn(
           "flex items-center justify-between w-full",
@@ -10318,17 +10309,18 @@ function GameHud({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
-          rightStats.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+          /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
         ]
       }
     );
   }
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
+      position: "relative",
       className: cn(
-        "relative z-10 flex items-center gap-4 px-4 py-2",
+        "z-10 flex items-center gap-4 px-4 py-2",
         transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
@@ -10340,6 +10332,7 @@ var positionMap, DEFAULT_HUD_STATS;
 var init_GameHud = __esm({
   "components/game/2d/molecules/GameHud.tsx"() {
     init_cn();
+    init_Box();
     init_StatBadge();
     positionMap = {
       corners: "inset-0 pointer-events-none"
@@ -10359,34 +10352,28 @@ function GameMenu({
   options,
   menuItems,
   onSelect,
-  eventBus: eventBusProp,
   background,
-  logo = "",
+  logo,
   className
 }) {
   const resolvedOptions = options ?? menuItems ?? DEFAULT_MENU_OPTIONS;
-  let eventBusFromHook = null;
-  try {
-    eventBusFromHook = useEventBus();
-  } catch {
-  }
-  const eventBus = eventBusProp || eventBusFromHook;
-  const handleOptionClick = React107.useCallback(
+  const eventBus = useEventBus();
+  const handleOptionClick = React105.useCallback(
     (option) => {
-      if (option.event && eventBus) {
+      if (option.event) {
         eventBus.emit(`UI:${option.event}`, { option });
       }
       if (onSelect) {
         onSelect(option);
       }
-      if (option.navigatesTo && eventBus) {
+      if (option.navigatesTo) {
         eventBus.emit("UI:NAVIGATE", { url: option.navigatesTo, option });
       }
     },
     [eventBus, onSelect]
   );
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "min-h-screen w-full flex flex-col items-center justify-center p-8",
@@ -10396,18 +10383,12 @@ function GameMenu({
         background: background ?? "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0e17 100%)"
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 animate-fade-in", children: [
-          logo && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: logo,
-              alt: title,
-              className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl"
-            }
-          ),
+        /* @__PURE__ */ jsxs(Box, { className: "text-center mb-12 animate-fade-in", children: [
+          logo && /* @__PURE__ */ jsx(GameIcon, { assetUrl: logo, icon: "image", size: 96, alt: title, className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl" }),
           /* @__PURE__ */ jsx(
-            "h1",
+            Typography,
             {
+              variant: "h1",
               className: "text-5xl md:text-7xl font-bold text-[var(--color-foreground)] tracking-tight",
               style: {
                 textShadow: "0 4px 12px rgba(0,0,0,0.5)"
@@ -10415,9 +10396,9 @@ function GameMenu({
               children: title
             }
           ),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
+          subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsx(
           ChoiceButton,
           {
             text: option.label,
@@ -10428,9 +10409,9 @@ function GameMenu({
           },
           index
         )) }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none overflow-hidden", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute top-1/4 left-1/4 w-64 h-64 bg-info/10 rounded-container blur-3xl" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-container blur-3xl" })
+        /* @__PURE__ */ jsxs(Box, { position: "absolute", className: "inset-0 pointer-events-none overflow-hidden", children: [
+          /* @__PURE__ */ jsx(Box, { position: "absolute", className: "top-1/4 left-1/4 w-64 h-64 bg-info/10 rounded-container blur-3xl" }),
+          /* @__PURE__ */ jsx(Box, { position: "absolute", className: "bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-container blur-3xl" })
         ] })
       ]
     }
@@ -10442,6 +10423,9 @@ var init_GameMenu = __esm({
     "use client";
     init_cn();
     init_useEventBus();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     init_ChoiceButton();
     DEFAULT_MENU_OPTIONS = [
       { label: "New Game", event: "NEW_GAME", variant: "primary" },
@@ -11861,10 +11845,11 @@ function Canvas2D({
             }
           }
         ),
-        process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsxs("div", { "data-game-actions": "", className: "sr-only", "aria-hidden": "true", children: [
+        process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsxs(Box, { "data-game-actions": "", className: "sr-only", "aria-hidden": "true", children: [
           tileClickEvent && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "ghost",
               "data-event": tileClickEvent,
               "data-x": "0",
               "data-y": "0",
@@ -11873,8 +11858,9 @@ function Canvas2D({
             }
           ),
           unitClickEvent && units && units.length > 0 && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "ghost",
               "data-event": unitClickEvent,
               "data-unit-id": units[0].id,
               onClick: () => eventBus.emit(`UI:${unitClickEvent}`, { unitId: units[0].id }),
@@ -11883,15 +11869,17 @@ function Canvas2D({
           )
         ] }),
         unitOverlays.map(({ unit, screenX, screenY }) => /* @__PURE__ */ jsxs(
-          "div",
+          Box,
           {
-            className: "absolute pointer-events-none",
+            position: "absolute",
+            className: "pointer-events-none",
             style: { left: Math.round(screenX), top: Math.round(screenY), transform: "translate(-50%, 0)", zIndex: 5 },
             children: [
               unit.name && /* @__PURE__ */ jsx(
-                "div",
+                Typography,
                 {
-                  className: "text-white text-xs font-bold px-1.5 py-0.5 rounded mb-0.5 whitespace-nowrap",
+                  as: "span",
+                  className: "text-white text-xs font-bold px-1.5 py-0.5 rounded mb-0.5 whitespace-nowrap block",
                   style: { background: unit.team === "player" ? "rgba(59,130,246,0.9)" : unit.team === "enemy" ? "rgba(239,68,68,0.9)" : "rgba(107,114,128,0.9)" },
                   children: unit.name
                 }
@@ -11901,7 +11889,7 @@ function Canvas2D({
           },
           unit.id
         )),
-        showMinimap && /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 pointer-events-none", style: { zIndex: 10 }, children: /* @__PURE__ */ jsx(
+        showMinimap && /* @__PURE__ */ jsx(Box, { position: "absolute", className: "bottom-2 right-2 pointer-events-none", style: { zIndex: 10 }, children: /* @__PURE__ */ jsx(
           MiniMap,
           {
             tiles: miniMapTiles,
@@ -11923,6 +11911,7 @@ var init_Canvas2D = __esm({
     init_cn();
     init_useEventBus();
     init_Box();
+    init_Button();
     init_Stack();
     init_Icon();
     init_Typography();
@@ -12234,7 +12223,9 @@ var init_GameAudioProvider = __esm({
 });
 function GameAudioToggle({
   size = "sm",
-  className
+  className,
+  onAsset,
+  offAsset
 }) {
   const ctx = useGameAudioContextOptional();
   const [localMuted, setLocalMuted] = useState(false);
@@ -12243,6 +12234,7 @@ function GameAudioToggle({
   const handleToggle = useCallback(() => {
     setMuted(!muted);
   }, [muted, setMuted]);
+  const activeAsset = muted ? offAsset : onAsset;
   return /* @__PURE__ */ jsx(
     Button,
     {
@@ -12251,7 +12243,7 @@ function GameAudioToggle({
       onClick: handleToggle,
       className: cn("text-lg leading-none px-2", className),
       "aria-pressed": muted,
-      children: muted ? "\u{1F507}" : "\u{1F50A}"
+      children: activeAsset ? /* @__PURE__ */ jsx(GameIcon, { assetUrl: activeAsset, icon: "image", size: 20, alt: muted ? "Muted" : "Sound on", className: "w-5 h-5 object-contain" }) : muted ? "\u{1F507}" : "\u{1F50A}"
     }
   );
 }
@@ -12261,6 +12253,7 @@ var init_GameAudioToggle = __esm({
     init_atoms();
     init_cn();
     init_GameAudioProvider();
+    init_GameIcon();
     GameAudioToggle.displayName = "GameAudioToggle";
   }
 });
@@ -13543,6 +13536,7 @@ function PlatformerBoard({
   canvasHeight: _canvasHeight = 400,
   playerSprite,
   tileSprites,
+  ui: _ui,
   bgColor: _bgColor,
   keyEvent = "KEY",
   playAgainEvent = "PLAY_AGAIN",
@@ -15401,6 +15395,7 @@ function TanksBoard({
   features,
   assetManifest,
   assetBaseUrl,
+  ui: _ui,
   scale = 0.45,
   showMinimap = true,
   enableCamera = true,
@@ -15928,7 +15923,7 @@ function LinearView({
     /* @__PURE__ */ jsx(HStack, { className: "flex-wrap items-center", gap: "xs", children: trait.states.map((state, i) => {
       const isDone = i < currentIdx;
       const isCurrent = i === currentIdx;
-      return /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -16149,7 +16144,7 @@ function TraitSlot({
   size = "md",
   showTooltip = true,
   categoryColors,
-  tooltipFrameUrl = "",
+  tooltipFrameUrl,
   className,
   feedback,
   onItemDrop,
@@ -16279,7 +16274,7 @@ function TraitSlot({
               as: "img",
               className: "object-contain",
               style: { width: config.icon, height: config.icon },
-              ...{ src: equippedItem.iconUrl, alt: equippedItem.name }
+              ...{ src: equippedItem.iconUrl.url, alt: equippedItem.name }
             }
           ) : /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-center leading-none", style: { fontSize: config.icon }, children: equippedItem.iconEmoji || "\u2726" }),
           (onRemove || removeEvent) && /* @__PURE__ */ jsx(
@@ -16308,7 +16303,7 @@ function TraitSlot({
               ...getTooltipStyle(),
               minWidth: 200,
               ...tooltipFrameUrl ? {
-                borderImage: `url(${tooltipFrameUrl}) 60 fill / 15px / 0 stretch`,
+                borderImage: `url(${tooltipFrameUrl.url}) 60 fill / 15px / 0 stretch`,
                 border: "none"
               } : {}
             },
@@ -16383,7 +16378,7 @@ function ActionTile({
       draggable: !disabled,
       onDragStart: handleDragStart,
       children: [
-        action.iconUrl ? /* @__PURE__ */ jsx("img", { src: action.iconUrl, alt: "", className: "w-8 h-8 object-contain" }) : /* @__PURE__ */ jsx(Typography, { variant: "body1", className: cn(config.icon, "leading-none"), children: action.iconEmoji || "\u2726" }),
+        action.iconUrl ? /* @__PURE__ */ jsx("img", { src: action.iconUrl.url, alt: "", className: "w-8 h-8 object-contain" }) : /* @__PURE__ */ jsx(Typography, { variant: "body1", className: cn(config.icon, "leading-none"), children: action.iconEmoji || "\u2726" }),
         /* @__PURE__ */ jsx(Typography, { variant: "caption", className: cn(config.text, "text-foreground font-medium whitespace-nowrap"), children: action.name })
       ]
     }
@@ -16456,7 +16451,7 @@ function SequenceBar({
     onSlotRemove(index);
   }, [onSlotRemove, playing]);
   const paddedSlots = Array.from({ length: maxSlots }, (_, i) => slots[i]);
-  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -16507,6 +16502,42 @@ function computeSlotFeedback(playerSeq, solutions) {
     (id, i) => id !== void 0 && id === bestSolution[i] ? "correct" : "wrong"
   );
 }
+function isFieldRecord(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v) && !(v instanceof Date);
+}
+function assetFromField(v) {
+  if (!isFieldRecord(v)) return void 0;
+  const url = typeof v.url === "string" ? v.url : void 0;
+  const role = typeof v.role === "string" ? v.role : void 0;
+  const category = typeof v.category === "string" ? v.category : "";
+  if (!url || !role) return void 0;
+  return {
+    url,
+    role,
+    category,
+    name: typeof v.name === "string" ? v.name : void 0,
+    thumbnailUrl: typeof v.thumbnailUrl === "string" ? v.thumbnailUrl : void 0,
+    style: typeof v.style === "string" ? v.style : void 0,
+    variant: typeof v.variant === "string" ? v.variant : void 0,
+    dimension: typeof v.dimension === "string" ? v.dimension : void 0,
+    aspect: typeof v.aspect === "string" ? v.aspect : void 0
+  };
+}
+function slotItemFromField(fv) {
+  if (!isFieldRecord(fv)) return void 0;
+  const id = typeof fv.id === "string" ? fv.id : void 0;
+  const name = typeof fv.name === "string" ? fv.name : void 0;
+  const category = typeof fv.category === "string" ? fv.category : void 0;
+  if (!id || !name || !category) return void 0;
+  return {
+    id,
+    name,
+    category,
+    description: typeof fv.description === "string" ? fv.description : void 0,
+    iconEmoji: typeof fv.iconEmoji === "string" ? fv.iconEmoji : void 0,
+    iconUrl: assetFromField(fv.iconUrl)
+  };
+}
 function SequencerBoard({
   entity,
   categoryColors,
@@ -16517,6 +16548,7 @@ function SequencerBoard({
   removeEvent,
   checkEvent,
   playAgainEvent,
+  stepEvent,
   className
 }) {
   const { emit } = useEventBus();
@@ -16524,7 +16556,11 @@ function SequencerBoard({
   const resolved = boardEntity(entity);
   const maxSlots = num(resolved?.maxSlots) || 3;
   const solutions = Array.isArray(resolved?.solutions) ? resolved.solutions : [];
-  const availableActions = Array.isArray(resolved?.availableActions) ? resolved.availableActions : [];
+  const availableActions = (Array.isArray(resolved?.availableActions) ? resolved.availableActions : []).reduce((acc, fv) => {
+    const item = slotItemFromField(fv);
+    if (item) acc.push(item);
+    return acc;
+  }, []);
   const allowDuplicates = resolved?.allowDuplicates !== false;
   const entitySlots = Array.isArray(resolved?.slots) ? resolved.slots : [];
   const entityResult = str(resolved?.result);
@@ -16582,7 +16618,7 @@ function SequencerBoard({
     let step = 0;
     const advance = () => {
       step++;
-      emit("UI:STEP", { step });
+      if (stepEvent) emit(`UI:${stepEvent}`, { step });
       if (step >= maxSlots) {
         if (checkEvent) emit(`UI:${checkEvent}`, { sequence: playerIds });
         const playerSeq = slots.map((s) => s?.id);
@@ -18807,35 +18843,7 @@ var init_SimulationCanvas = __esm({
     SimulationCanvas.displayName = "SimulationCanvas";
   }
 });
-function getSlotContentRenderer2() {
-  if (_scr) return _scr;
-  const mod = (init_UISlotRenderer(), __toCommonJS(UISlotRenderer_exports));
-  _scr = mod.SlotContentRenderer;
-  return _scr;
-}
-function resolveDescriptor(value, idPrefix) {
-  if (value === null || value === void 0) return value;
-  if (React107__default.isValidElement(value)) return value;
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return value;
-  if (Array.isArray(value)) {
-    return value.map((item, i) => /* @__PURE__ */ jsx(React107__default.Fragment, { children: resolveDescriptor(item, `${idPrefix}-${i}`) }, i));
-  }
-  if (typeof value === "object") {
-    const rec = value;
-    if (typeof rec.type === "string" && getComponentForPattern(rec.type) !== null) {
-      const type = rec.type;
-      const _id = typeof rec._id === "string" ? rec._id : void 0;
-      const nestedProps = rec.props !== void 0 && typeof rec.props === "object" && !Array.isArray(rec.props) && rec.props !== null ? rec.props : void 0;
-      const { type: _t, props: _p, _id: _d, ...flatRest } = rec;
-      const resolvedProps = nestedProps !== void 0 ? nestedProps : flatRest;
-      const content = { id: _id ?? idPrefix, pattern: type, props: resolvedProps, priority: 0 };
-      const SCR = getSlotContentRenderer2();
-      return /* @__PURE__ */ jsx(SCR, { content, onDismiss: () => void 0 });
-    }
-  }
-  return null;
-}
-var _scr, GameTemplate;
+var GameTemplate;
 var init_GameTemplate = __esm({
   "components/game/2d/templates/GameTemplate.tsx"() {
     init_cn();
@@ -18843,7 +18851,6 @@ var init_GameTemplate = __esm({
     init_Stack();
     init_Typography();
     init_Button();
-    _scr = null;
     GameTemplate = ({
       entity,
       title = "Game",
@@ -18852,7 +18859,8 @@ var init_GameTemplate = __esm({
       debugPanel,
       showDebugPanel = false,
       controls,
-      className
+      className,
+      backgroundAsset
     }) => {
       return /* @__PURE__ */ jsxs(
         Box,
@@ -18909,15 +18917,16 @@ var init_GameTemplate = __esm({
                 {
                   position: "relative",
                   fullWidth: true,
-                  className: "flex-1 bg-muted",
+                  className: backgroundAsset ? "flex-1" : "flex-1 bg-muted",
+                  style: backgroundAsset ? { backgroundImage: `url(${backgroundAsset.url})`, backgroundSize: "cover", backgroundPosition: "center" } : void 0,
                   children: [
-                    resolveDescriptor(children, "gt-children"),
+                    children,
                     hud && /* @__PURE__ */ jsx(
                       Box,
                       {
                         position: "absolute",
                         className: "top-0 left-0 right-0 pointer-events-none",
-                        children: /* @__PURE__ */ jsx(Box, { padding: "md", className: "pointer-events-auto w-fit", children: resolveDescriptor(hud, "gt-hud") })
+                        children: /* @__PURE__ */ jsx(Box, { padding: "md", className: "pointer-events-auto w-fit", children: hud })
                       }
                     )
                   ]
@@ -18942,7 +18951,7 @@ var init_GameTemplate = __esm({
                       children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Debug Panel" })
                     }
                   ),
-                  /* @__PURE__ */ jsx(Box, { padding: "md", children: resolveDescriptor(debugPanel, "gt-debug") })
+                  /* @__PURE__ */ jsx(Box, { padding: "md", children: debugPanel })
                 ]
               }
             )
@@ -18953,59 +18962,21 @@ var init_GameTemplate = __esm({
     GameTemplate.displayName = "GameTemplate";
   }
 });
-function asDescriptor(v) {
-  if (Array.isArray(v) || React107__default.isValidElement(v)) return null;
-  const o = v;
-  if (typeof o.type !== "string") return null;
-  const props = o.props !== void 0 && typeof o.props === "object" && !Array.isArray(o.props) && o.props !== null ? o.props : void 0;
-  const _id = typeof o._id === "string" ? o._id : void 0;
-  const sourceTrait = typeof o.sourceTrait === "string" ? o.sourceTrait : void 0;
-  return { type: o.type, props, _id, sourceTrait };
-}
-function getSlotContentRenderer3() {
-  if (_scr2) return _scr2;
-  const mod = (init_UISlotRenderer(), __toCommonJS(UISlotRenderer_exports));
-  _scr2 = mod.SlotContentRenderer;
-  return _scr2;
-}
-function resolveDescriptor2(value, idPrefix) {
-  if (value === null || value === void 0) return value;
-  if (React107__default.isValidElement(value)) return value;
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return value;
-  if (Array.isArray(value)) {
-    return value.map((item, i) => /* @__PURE__ */ jsx(React107__default.Fragment, { children: resolveDescriptor2(item, `${idPrefix}-${i}`) }, i));
-  }
-  if (typeof value === "object" && value !== null) {
-    const desc = asDescriptor(value);
-    if (desc !== null && getComponentForPattern(desc.type) !== null) {
-      const resolvedProps = desc.props ?? {};
-      const content = {
-        id: desc._id ?? idPrefix,
-        pattern: desc.type,
-        props: resolvedProps,
-        priority: 0,
-        ...desc.sourceTrait !== void 0 && { sourceTrait: desc.sourceTrait }
-      };
-      const SCR = getSlotContentRenderer3();
-      return /* @__PURE__ */ jsx(SCR, { content, onDismiss: () => void 0 }, content.id);
-    }
-  }
-  return null;
-}
-var _scr2, GameShell;
+var GameShell;
 var init_GameShell = __esm({
   "components/game/2d/templates/GameShell.tsx"() {
     init_cn();
     init_Box();
     init_Stack();
     init_Typography();
-    _scr2 = null;
     GameShell = ({
       appName = "Game",
       hud,
       className,
       showTopBar = true,
-      children
+      children,
+      backgroundAsset,
+      hudBackgroundAsset
     }) => {
       return /* @__PURE__ */ jsxs(
         Box,
@@ -19020,7 +18991,7 @@ var init_GameShell = __esm({
             width: "100vw",
             height: "100vh",
             overflow: "hidden",
-            background: "var(--color-background, #0a0a0f)",
+            background: backgroundAsset ? `url(${backgroundAsset.url}) center/cover no-repeat` : "var(--color-background, #0a0a0f)",
             color: "var(--color-text, #e0e0e0)"
           },
           children: [
@@ -19030,7 +19001,7 @@ var init_GameShell = __esm({
                 className: "game-shell__header",
                 style: {
                   flexShrink: 0,
-                  background: "var(--color-surface, #12121f)",
+                  background: hudBackgroundAsset ? `url(${hudBackgroundAsset.url}) center/cover no-repeat` : "var(--color-surface, #12121f)",
                   borderBottom: "1px solid var(--color-border, #2a2a3a)"
                 },
                 children: [
@@ -19053,7 +19024,7 @@ var init_GameShell = __esm({
                       )
                     }
                   ),
-                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: resolveDescriptor2(hud, "gs-hud") })
+                  hud && /* @__PURE__ */ jsx(Box, { className: "game-shell__hud", style: { width: "100%" }, children: hud })
                 ]
               }
             ),
@@ -19066,7 +19037,7 @@ var init_GameShell = __esm({
                   overflow: "hidden",
                   position: "relative"
                 },
-                children: resolveDescriptor2(children, "gs-children")
+                children
               }
             )
           ]
@@ -20273,7 +20244,7 @@ var init_ErrorBoundary = __esm({
         }
       );
     };
-    ErrorBoundary = class extends React107__default.Component {
+    ErrorBoundary = class extends React105__default.Component {
       constructor(props) {
         super(props);
         __publicField(this, "reset", () => {
@@ -20938,7 +20909,7 @@ var init_Container = __esm({
       as: Component = "div"
     }) => {
       const resolvedSize = maxWidth ?? size ?? "lg";
-      return React107__default.createElement(
+      return React105__default.createElement(
         Component,
         {
           className: cn(
@@ -23120,9 +23091,9 @@ var init_BiologyCanvas = __esm({
   }
 });
 
-// node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/katex.min.css
+// node_modules/katex/dist/katex.min.css
 var init_katex_min = __esm({
-  "node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/katex.min.css"() {
+  "node_modules/katex/dist/katex.min.css"() {
   }
 });
 var Tabs;
@@ -23562,7 +23533,7 @@ var init_CodeBlock = __esm({
     DIFF_STYLE_FALLBACK = { bg: "", prefix: " ", text: "text-foreground" };
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React107__default.memo(
+    CodeBlock = React105__default.memo(
       ({
         code: rawCode,
         language = "text",
@@ -24149,7 +24120,7 @@ var init_MarkdownContent = __esm({
     init_Box();
     init_CodeBlock();
     init_cn();
-    MarkdownContent = React107__default.memo(
+    MarkdownContent = React105__default.memo(
       ({ content, direction = "ltr", className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -25476,7 +25447,7 @@ var init_StateMachineView = __esm({
                 style: { top: title ? 30 : 0 },
                 children: [
                   entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React107__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React105__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                     StateNode2,
                     {
                       state,
@@ -30079,6 +30050,8 @@ function CounterMinimal({
   size = "md",
   onDecrement,
   onIncrement,
+  decrementEvent,
+  incrementEvent,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
@@ -30089,6 +30062,7 @@ function CounterMinimal({
       {
         variant: "secondary",
         size: sizeStyles8[size].button,
+        action: decrementEvent,
         onClick: onDecrement,
         disabled: resolved.decrementDisabled,
         icon: "minus",
@@ -30111,6 +30085,7 @@ function CounterMinimal({
       {
         variant: "secondary",
         size: sizeStyles8[size].button,
+        action: incrementEvent,
         onClick: onIncrement,
         disabled: resolved.incrementDisabled,
         icon: "plus",
@@ -30127,6 +30102,9 @@ function CounterStandard({
   onDecrement,
   onIncrement,
   onReset,
+  decrementEvent,
+  incrementEvent,
+  resetEvent,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
@@ -30157,6 +30135,7 @@ function CounterStandard({
         {
           variant: "secondary",
           size: sizeStyles8[size].button,
+          action: decrementEvent,
           onClick: onDecrement,
           disabled: resolved.decrementDisabled,
           icon: "minus"
@@ -30167,6 +30146,7 @@ function CounterStandard({
         {
           variant: "primary",
           size: sizeStyles8[size].button,
+          action: incrementEvent,
           onClick: onIncrement,
           disabled: resolved.incrementDisabled,
           icon: "plus"
@@ -30178,6 +30158,7 @@ function CounterStandard({
       {
         variant: "ghost",
         size: "sm",
+        action: resetEvent,
         onClick: onReset,
         icon: "rotate-ccw",
         children: "Reset"
@@ -30193,6 +30174,9 @@ function CounterFull({
   onDecrement,
   onIncrement,
   onReset,
+  decrementEvent,
+  incrementEvent,
+  resetEvent,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
@@ -30226,6 +30210,7 @@ function CounterFull({
         {
           variant: "secondary",
           size: sizeStyles8[size].button,
+          action: decrementEvent,
           onClick: onDecrement,
           disabled: resolved.decrementDisabled,
           icon: "minus",
@@ -30237,6 +30222,7 @@ function CounterFull({
         {
           variant: "primary",
           size: sizeStyles8[size].button,
+          action: incrementEvent,
           onClick: onIncrement,
           disabled: resolved.incrementDisabled,
           icon: "plus",
@@ -30249,6 +30235,7 @@ function CounterFull({
       {
         variant: "ghost",
         size: "sm",
+        action: resetEvent,
         onClick: onReset,
         icon: "rotate-ccw",
         children: "Reset to 0"
@@ -31098,8 +31085,8 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const triggerChild = React107__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React107__default.cloneElement(
+      const triggerChild = React105__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
+      const triggerElement = React105__default.cloneElement(
         triggerChild,
         {
           ref: triggerRef,
@@ -31194,14 +31181,14 @@ function useDataDnd(args) {
   const isZone = Boolean(dragGroup || accepts || sortable);
   const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
-  const parentRoot = React107__default.useContext(RootCtx);
+  const parentRoot = React105__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const zoneId = React107__default.useId();
+  const zoneId = React105__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
-  const [optimisticOrders, setOptimisticOrders] = React107__default.useState(() => /* @__PURE__ */ new Map());
-  const optimisticOrdersRef = React107__default.useRef(optimisticOrders);
+  const [optimisticOrders, setOptimisticOrders] = React105__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React105__default.useRef(optimisticOrders);
   optimisticOrdersRef.current = optimisticOrders;
-  const clearOptimisticOrder = React107__default.useCallback((group) => {
+  const clearOptimisticOrder = React105__default.useCallback((group) => {
     setOptimisticOrders((prev) => {
       if (!prev.has(group)) return prev;
       const next = new Map(prev);
@@ -31226,7 +31213,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__idx_${idx}`;
   }).join("|");
-  const itemIds = React107__default.useMemo(
+  const itemIds = React105__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw != null ? String(raw) : `__idx_${idx}`;
@@ -31237,7 +31224,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__${idx}`;
   }).join("|");
-  React107__default.useEffect(() => {
+  React105__default.useEffect(() => {
     const root = isRoot ? null : parentRoot;
     if (root) {
       root.clearOptimisticOrder(ownGroup);
@@ -31245,20 +31232,20 @@ function useDataDnd(args) {
       clearOptimisticOrder(ownGroup);
     }
   }, [itemsContentSig, ownGroup]);
-  const zonesRef = React107__default.useRef(/* @__PURE__ */ new Map());
-  const registerZone = React107__default.useCallback((zoneId2, meta2) => {
+  const zonesRef = React105__default.useRef(/* @__PURE__ */ new Map());
+  const registerZone = React105__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
   }, []);
-  const unregisterZone = React107__default.useCallback((zoneId2) => {
+  const unregisterZone = React105__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
-  const [activeDrag, setActiveDrag] = React107__default.useState(null);
-  const [overZoneGroup, setOverZoneGroup] = React107__default.useState(null);
-  const meta = React107__default.useMemo(
+  const [activeDrag, setActiveDrag] = React105__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React105__default.useState(null);
+  const meta = React105__default.useMemo(
     () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
     [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
-  React107__default.useEffect(() => {
+  React105__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
@@ -31277,7 +31264,7 @@ function useDataDnd(args) {
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useAlmadarDndSensors(true);
   const collisionDetection = almadarDndCollisionDetection;
-  const findZoneByItem = React107__default.useCallback(
+  const findZoneByItem = React105__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
         if (z.itemIds.includes(id)) return z;
@@ -31286,7 +31273,7 @@ function useDataDnd(args) {
     },
     []
   );
-  React107__default.useCallback(
+  React105__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -31295,7 +31282,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const handleDragEnd = React107__default.useCallback(
+  const handleDragEnd = React105__default.useCallback(
     (event) => {
       const { active, over } = event;
       const activeIdStr = String(active.id);
@@ -31386,8 +31373,8 @@ function useDataDnd(args) {
     },
     [eventBus]
   );
-  const sortableData = React107__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
-  const SortableItem = React107__default.useCallback(
+  const sortableData = React105__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
+  const SortableItem = React105__default.useCallback(
     ({ id, children }) => {
       const {
         attributes,
@@ -31427,7 +31414,7 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
-    const ctx = React107__default.useContext(RootCtx);
+    const ctx = React105__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
     const overZoneGroup2 = ctx?.overZoneGroup ?? null;
     const isThisZoneOver = overZoneGroup2 === ownGroup;
@@ -31442,7 +31429,7 @@ function useDataDnd(args) {
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
-    React107__default.useEffect(() => {
+    React105__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsx(
@@ -31456,11 +31443,11 @@ function useDataDnd(args) {
       }
     );
   };
-  const rootContextValue = React107__default.useMemo(
+  const rootContextValue = React105__default.useMemo(
     () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
     [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
-  const handleDragStart = React107__default.useCallback((event) => {
+  const handleDragStart = React105__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
     const rect = event.active.rect.current.initial;
     const height = rect?.height && rect.height > 0 ? rect.height : 64;
@@ -31479,7 +31466,7 @@ function useDataDnd(args) {
       isRoot
     });
   }, [findZoneByItem, isRoot, zoneId]);
-  const handleDragOver = React107__default.useCallback((event) => {
+  const handleDragOver = React105__default.useCallback((event) => {
     const { active, over } = event;
     const overData = over?.data?.current;
     const overGroup = overData?.dndGroup ?? null;
@@ -31549,7 +31536,7 @@ function useDataDnd(args) {
       return next;
     });
   }, []);
-  const handleDragCancel = React107__default.useCallback((event) => {
+  const handleDragCancel = React105__default.useCallback((event) => {
     setActiveDrag(null);
     setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
@@ -31557,12 +31544,12 @@ function useDataDnd(args) {
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
-  const handleDragEndWithCleanup = React107__default.useCallback((event) => {
+  const handleDragEndWithCleanup = React105__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
     setOverZoneGroup(null);
   }, [handleDragEnd]);
-  const wrapContainer = React107__default.useCallback(
+  const wrapContainer = React105__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
@@ -31616,7 +31603,7 @@ var init_useDataDnd = __esm({
     init_useAlmadarDndCollision();
     init_Box();
     dndLog = createLogger("almadar:ui:dnd");
-    RootCtx = React107__default.createContext(null);
+    RootCtx = React105__default.createContext(null);
   }
 });
 function renderIconInput(icon, props) {
@@ -32142,7 +32129,7 @@ function DataList({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React107__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React105__default.useState(pageSize || Infinity);
   const fieldDefs = fields ?? columns ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -32161,7 +32148,7 @@ function DataList({
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
-  React107__default.useEffect(() => {
+  React105__default.useEffect(() => {
     const renderItemTypeOf = typeof schemaRenderItem;
     const childrenTypeOf = typeof children;
     if (data.length > 0 && !hasRenderProp) {
@@ -32265,7 +32252,7 @@ function DataList({
     const items2 = [...data];
     const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
     const contentField = titleField?.name ?? fieldDefs[0]?.name ?? "";
-    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
       group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: "my-2" }),
       group.items.map((itemData, index) => {
         const id = itemData.id || `${gi}-${index}`;
@@ -32406,7 +32393,7 @@ function DataList({
           className
         ),
         children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
             group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-4" : "mt-0" }),
             group.items.map(
               (itemData, index) => renderItem(itemData, index, gi === groups.length - 1 && index === group.items.length - 1)
@@ -32491,7 +32478,7 @@ var init_FormSection = __esm({
       columns = 1,
       className
     }) => {
-      const [collapsed, setCollapsed] = React107__default.useState(defaultCollapsed);
+      const [collapsed, setCollapsed] = React105__default.useState(defaultCollapsed);
       const { t } = useTranslate();
       const eventBus = useEventBus();
       const gridClass = {
@@ -32499,7 +32486,7 @@ var init_FormSection = __esm({
         2: "grid-cols-1 md:grid-cols-2",
         3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       }[columns];
-      React107__default.useCallback(() => {
+      React105__default.useCallback(() => {
         if (collapsible) {
           setCollapsed((prev) => !prev);
           eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -33449,7 +33436,7 @@ var init_Flex = __esm({
           flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
         }
       }
-      return React107__default.createElement(Component, {
+      return React105__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           directionStyles[direction],
@@ -33568,7 +33555,7 @@ var init_Grid = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = rows2 ? { gridTemplateRows: `repeat(${rows2}, minmax(0, 1fr))`, ...style } : style;
-      return React107__default.createElement(
+      return React105__default.createElement(
         Component,
         {
           className: cn(
@@ -33764,9 +33751,9 @@ var init_Popover = __esm({
         onMouseLeave: handleClose,
         onPointerDown: tapTriggerProps.onPointerDown
       };
-      const childElement = React107__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const childElement = React105__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = childElement.props.onPointerDown;
-      const triggerElement = React107__default.cloneElement(
+      const triggerElement = React105__default.cloneElement(
         childElement,
         {
           ref: triggerRef,
@@ -34368,9 +34355,9 @@ var init_Tooltip = __esm({
           if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
         };
       }, []);
-      const triggerElement = React107__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const triggerElement = React105__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = triggerElement.props.onPointerDown;
-      const trigger = React107__default.cloneElement(triggerElement, {
+      const trigger = React105__default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -34460,7 +34447,7 @@ var init_WizardProgress = __esm({
           children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: normalizedSteps.map((step, index) => {
             const isActive = index === currentStep;
             const isCompleted = index < currentStep;
-            return /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -36020,7 +36007,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect76, useRef: useRef77, useCallback: useCallback117, useState: useState108 } = React107__default;
+      const { useEffect: useEffect76, useRef: useRef77, useCallback: useCallback117, useState: useState108 } = React105__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -36935,8 +36922,8 @@ function TableView({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React107__default.useState(pageSize > 0 ? pageSize : Infinity);
-  const [localSelected, setLocalSelected] = React107__default.useState(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React105__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React105__default.useState(/* @__PURE__ */ new Set());
   const colDefs = columns ?? fields ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -37131,12 +37118,12 @@ function TableView({
         ]
       }
     );
-    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React107__default.Fragment, { children: rowInner }, id);
+    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React105__default.Fragment, { children: rowInner }, id);
   };
   const items = Array.from(data);
   const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
   let runningIndex = 0;
-  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
     group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),
     group.items.map((row) => renderRow(row, runningIndex++))
   ] }, gi)) });
@@ -38493,7 +38480,7 @@ var init_StepFlow = __esm({
       className
     }) => {
       if (orientation === "vertical") {
-        return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React107__default.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(React105__default.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" })
@@ -38504,7 +38491,7 @@ var init_StepFlow = __esm({
           ] })
         ] }) }, 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(React107__default.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(React105__default.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 }),
@@ -39489,7 +39476,7 @@ var init_LikertScale = __esm({
       md: "text-base",
       lg: "text-lg"
     };
-    LikertScale = React107__default.forwardRef(
+    LikertScale = React105__default.forwardRef(
       ({
         question,
         options = DEFAULT_LIKERT_OPTIONS,
@@ -39501,7 +39488,7 @@ var init_LikertScale = __esm({
         variant = "radios",
         className
       }, ref) => {
-        const groupId = React107__default.useId();
+        const groupId = React105__default.useId();
         const eventBus = useEventBus();
         const handleSelect = useCallback(
           (next) => {
@@ -41783,7 +41770,7 @@ var init_DocBreadcrumb = __esm({
           "aria-label": t("aria.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(React107__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -42652,7 +42639,7 @@ var init_MiniStateMachine = __esm({
           const x = 2 + i * (NODE_W + GAP + ARROW_W + GAP);
           const tc = transitionCounts[s.name] ?? 0;
           const role = getStateRole(s.name, s.isInitial ?? void 0, s.isTerminal ?? void 0, tc, maxTC);
-          return /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               AvlState,
               {
@@ -42856,7 +42843,7 @@ var init_PageHeader = __esm({
         info: "bg-info/10 text-info"
       };
       return /* @__PURE__ */ jsxs(Box, { className: cn("mb-6", className), children: [
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
           crumb.href ? /* @__PURE__ */ jsx(
             "a",
@@ -43214,7 +43201,7 @@ var init_Section = __esm({
       as: Component = "section"
     }) => {
       const hasHeader = title || description || action;
-      return React107__default.createElement(
+      return React105__default.createElement(
         Component,
         {
           className: cn(
@@ -43516,6 +43503,7 @@ var init_WizardContainer = __esm({
     init_Stack();
     init_Icon();
     init_cn();
+    init_useEventBus();
     WizardContainer = ({
       steps,
       currentStep: controlledStep,
@@ -43524,9 +43512,13 @@ var init_WizardContainer = __esm({
       showProgress = true,
       allowBack = true,
       compact = false,
-      className
+      className,
+      nextEvent,
+      backEvent,
+      completeEvent
     }) => {
       const { t } = useTranslate();
+      const eventBus = useEventBus();
       const [internalStep, setInternalStep] = useState(0);
       const normalizedControlledStep = (() => {
         if (controlledStep === void 0 || controlledStep === null)
@@ -43556,13 +43548,16 @@ var init_WizardContainer = __esm({
           return;
         }
         if (isLastStep) {
+          if (completeEvent) eventBus.emit(`UI:${completeEvent}`, { step: currentStep });
           onComplete?.();
         } else {
+          if (nextEvent) eventBus.emit(`UI:${nextEvent}`, { step: currentStep + 1 });
           goToStep(currentStep + 1);
         }
       };
       const handleBack = () => {
         if (!isFirstStep && allowBack) {
+          if (backEvent) eventBus.emit(`UI:${backEvent}`, { step: currentStep - 1 });
           goToStep(currentStep - 1);
         }
       };
@@ -43580,7 +43575,7 @@ var init_WizardContainer = __esm({
               const isCompleted = index < currentStep;
               const stepKey = step.id ?? step.tabId ?? `step-${index}`;
               const stepTitle = step.title ?? step.name ?? `Step ${index + 1}`;
-              return /* @__PURE__ */ jsxs(React107__default.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React105__default.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -46013,7 +46008,7 @@ var init_DetailPanel = __esm({
   }
 });
 function extractTitle(children) {
-  if (!React107__default.isValidElement(children)) return void 0;
+  if (!React105__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -46031,14 +46026,18 @@ var init_DrawerSlot = __esm({
       title: overrideTitle,
       position = "right",
       size = "md",
-      className
+      className,
+      sourceTrait
     }) => {
       const eventBus = useEventBus();
+      const schemaCtx = useEntitySchemaOptional();
       const isOpen = Boolean(children);
       const title = overrideTitle || extractTitle(children);
       const handleClose = () => {
-        eventBus.emit("UI:CLOSE");
-        eventBus.emit("UI:CANCEL");
+        const orbital = sourceTrait !== void 0 && schemaCtx !== null ? schemaCtx.orbitalsByTrait.get(sourceTrait) : void 0;
+        const prefix = orbital !== void 0 && sourceTrait !== void 0 ? `UI:${orbital}.${sourceTrait}.` : "UI:";
+        eventBus.emit(`${prefix}CLOSE`);
+        eventBus.emit(`${prefix}CANCEL`);
       };
       if (!isOpen) return null;
       return /* @__PURE__ */ jsx(
@@ -46359,12 +46358,12 @@ var init_Form = __esm({
       const isSchemaEntity = isOrbitalEntitySchema(entity);
       const resolvedEntity = isSchemaEntity ? entity : void 0;
       const entityName = typeof entity === "string" ? entity : resolvedEntity?.name;
-      const normalizedInitialData = React107__default.useMemo(() => {
+      const normalizedInitialData = React105__default.useMemo(() => {
         const entityRowAsInitial = isPlainEntityRow(entity) ? entity : void 0;
         const callerInitial = initialData !== null && typeof initialData === "object" && !Array.isArray(initialData) ? initialData : {};
         return entityRowAsInitial !== void 0 ? { ...entityRowAsInitial, ...callerInitial } : callerInitial;
       }, [entity, initialData]);
-      const entityDerivedFields = React107__default.useMemo(() => {
+      const entityDerivedFields = React105__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
         if (!resolvedEntity) return void 0;
         return resolvedEntity.fields.map(
@@ -46385,16 +46384,16 @@ var init_Form = __esm({
       const conditionalFields = typeof conditionalFieldsRaw === "boolean" ? {} : conditionalFieldsRaw;
       const hiddenCalculations = typeof hiddenCalculationsRaw === "boolean" ? [] : hiddenCalculationsRaw;
       const violationTriggers = typeof violationTriggersRaw === "boolean" ? [] : violationTriggersRaw;
-      const [formData, setFormData] = React107__default.useState(
+      const [formData, setFormData] = React105__default.useState(
         normalizedInitialData
       );
-      const [collapsedSections, setCollapsedSections] = React107__default.useState(
+      const [collapsedSections, setCollapsedSections] = React105__default.useState(
         /* @__PURE__ */ new Set()
       );
-      const [submitError, setSubmitError] = React107__default.useState(null);
-      const formRef = React107__default.useRef(null);
+      const [submitError, setSubmitError] = React105__default.useState(null);
+      const formRef = React105__default.useRef(null);
       const formMode = props.mode;
-      const mountedRef = React107__default.useRef(false);
+      const mountedRef = React105__default.useRef(false);
       if (!mountedRef.current) {
         mountedRef.current = true;
         debug("forms", "mount", {
@@ -46407,7 +46406,7 @@ var init_Form = __esm({
         });
       }
       const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-      const evalContext = React107__default.useMemo(
+      const evalContext = React105__default.useMemo(
         () => ({
           formValues: formData,
           globalVariables: externalContext?.globalVariables ?? {},
@@ -46416,7 +46415,7 @@ var init_Form = __esm({
         }),
         [formData, externalContext]
       );
-      React107__default.useEffect(() => {
+      React105__default.useEffect(() => {
         debug("forms", "initialData-sync", {
           mode: formMode,
           normalizedInitialData,
@@ -46427,7 +46426,7 @@ var init_Form = __esm({
           setFormData(normalizedInitialData);
         }
       }, [normalizedInitialData]);
-      const processCalculations = React107__default.useCallback(
+      const processCalculations = React105__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!hiddenCalculations.length) return;
           const context = {
@@ -46452,7 +46451,7 @@ var init_Form = __esm({
         },
         [hiddenCalculations, externalContext, eventBus]
       );
-      const checkViolations = React107__default.useCallback(
+      const checkViolations = React105__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!violationTriggers.length) return;
           const context = {
@@ -46490,7 +46489,7 @@ var init_Form = __esm({
         processCalculations(name, newFormData);
         checkViolations(name, newFormData);
       };
-      const isFieldVisible = React107__default.useCallback(
+      const isFieldVisible = React105__default.useCallback(
         (fieldName) => {
           const condition = conditionalFields[fieldName];
           if (!condition) return true;
@@ -46498,7 +46497,7 @@ var init_Form = __esm({
         },
         [conditionalFields, evalContext]
       );
-      const isSectionVisible = React107__default.useCallback(
+      const isSectionVisible = React105__default.useCallback(
         (section) => {
           if (!section.condition) return true;
           return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -46574,7 +46573,7 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onCancel}`);
         }
       };
-      const renderField = React107__default.useCallback(
+      const renderField = React105__default.useCallback(
         (field) => {
           const fieldName = field.name || field.field;
           if (!fieldName) return null;
@@ -46595,7 +46594,7 @@ var init_Form = __esm({
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
       const effectiveFields = entityDerivedFields ?? fields;
-      const normalizedFields = React107__default.useMemo(() => {
+      const normalizedFields = React105__default.useMemo(() => {
         if (!effectiveFields || effectiveFields.length === 0) return [];
         return effectiveFields.map((field) => {
           if (typeof field === "string") {
@@ -46619,7 +46618,7 @@ var init_Form = __esm({
           return field;
         });
       }, [effectiveFields, resolvedEntity]);
-      const schemaFields = React107__default.useMemo(() => {
+      const schemaFields = React105__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
           debugGroup(`Form: ${entityName || "unknown"}`);
@@ -46629,7 +46628,7 @@ var init_Form = __esm({
         }
         return normalizedFields.map(renderField).filter(Boolean);
       }, [normalizedFields, renderField, entityName, conditionalFields]);
-      const sectionElements = React107__default.useMemo(() => {
+      const sectionElements = React105__default.useMemo(() => {
         if (!sections || sections.length === 0) return null;
         return sections.map((section) => {
           if (!isSectionVisible(section)) {
@@ -47354,7 +47353,7 @@ var init_List = __esm({
         if (entity && typeof entity === "object" && "id" in entity) return [entity];
         return [];
       }, [entity]);
-      const getItemActions = React107__default.useCallback(
+      const getItemActions = React105__default.useCallback(
         (item) => {
           if (!itemActions) return [];
           if (typeof itemActions === "function") {
@@ -47829,7 +47828,7 @@ var init_MediaGallery = __esm({
         [selectable, selectedItems, selectionEvent, eventBus]
       );
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React107__default.useMemo(() => {
+      const items = React105__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -47992,7 +47991,7 @@ var init_MediaGallery = __esm({
   }
 });
 function extractTitle2(children) {
-  if (!React107__default.isValidElement(children)) return void 0;
+  if (!React105__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -48009,14 +48008,18 @@ var init_ModalSlot = __esm({
       children,
       title: overrideTitle,
       size = "md",
-      className
+      className,
+      sourceTrait
     }) => {
       const eventBus = useEventBus();
+      const schemaCtx = useEntitySchemaOptional();
       const isOpen = Boolean(children);
       const title = overrideTitle || extractTitle2(children);
       const handleClose = () => {
-        eventBus.emit("UI:CLOSE");
-        eventBus.emit("UI:CANCEL");
+        const orbital = sourceTrait !== void 0 && schemaCtx !== null ? schemaCtx.orbitalsByTrait.get(sourceTrait) : void 0;
+        const prefix = orbital !== void 0 && sourceTrait !== void 0 ? `UI:${orbital}.${sourceTrait}.` : "UI:";
+        eventBus.emit(`${prefix}CLOSE`);
+        eventBus.emit(`${prefix}CANCEL`);
       };
       if (!isOpen) return null;
       return /* @__PURE__ */ jsx(
@@ -48243,7 +48246,7 @@ var init_debugRegistry = __esm({
   }
 });
 function useDebugData() {
-  const [data, setData] = React107.useState(() => ({
+  const [data, setData] = React105.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -48257,7 +48260,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React107.useEffect(() => {
+  React105.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -48366,12 +48369,12 @@ function layoutGraph(states, transitions, initialState, width, height) {
   return positions;
 }
 function WalkMinimap() {
-  const [walkStep, setWalkStep] = React107.useState(null);
-  const [traits2, setTraits] = React107.useState([]);
-  const [coveredEdges, setCoveredEdges] = React107.useState([]);
-  const [completedTraits, setCompletedTraits] = React107.useState(/* @__PURE__ */ new Set());
-  const prevTraitRef = React107.useRef(null);
-  React107.useEffect(() => {
+  const [walkStep, setWalkStep] = React105.useState(null);
+  const [traits2, setTraits] = React105.useState([]);
+  const [coveredEdges, setCoveredEdges] = React105.useState([]);
+  const [completedTraits, setCompletedTraits] = React105.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React105.useRef(null);
+  React105.useEffect(() => {
     const interval = setInterval(() => {
       const w = window;
       const step = w.__orbitalWalkStep;
@@ -48807,15 +48810,15 @@ var init_EntitiesTab = __esm({
 });
 function EventFlowTab({ events: events2 }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React107.useState("all");
-  const containerRef = React107.useRef(null);
-  const [autoScroll, setAutoScroll] = React107.useState(true);
-  React107.useEffect(() => {
+  const [filter, setFilter] = React105.useState("all");
+  const containerRef = React105.useRef(null);
+  const [autoScroll, setAutoScroll] = React105.useState(true);
+  React105.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React107.useMemo(() => {
+  const filteredEvents = React105.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -48931,7 +48934,7 @@ var init_EventFlowTab = __esm({
 });
 function GuardsPanel({ guards }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React107.useState("all");
+  const [filter, setFilter] = React105.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -48944,7 +48947,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React107.useMemo(() => {
+  const filteredGuards = React105.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -49107,10 +49110,10 @@ function EffectBadge({ effect }) {
 }
 function TransitionTimeline({ transitions }) {
   const { t } = useTranslate();
-  const containerRef = React107.useRef(null);
-  const [autoScroll, setAutoScroll] = React107.useState(true);
-  const [expandedId, setExpandedId] = React107.useState(null);
-  React107.useEffect(() => {
+  const containerRef = React105.useRef(null);
+  const [autoScroll, setAutoScroll] = React105.useState(true);
+  const [expandedId, setExpandedId] = React105.useState(null);
+  React105.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -49390,9 +49393,9 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log13, setLog] = React107.useState([]);
-  const prevStatesRef = React107.useRef(/* @__PURE__ */ new Map());
-  React107.useEffect(() => {
+  const [log13, setLog] = React105.useState([]);
+  const prevStatesRef = React105.useRef(/* @__PURE__ */ new Map());
+  React105.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -49561,10 +49564,10 @@ function VerifyModePanel({
   localCount
 }) {
   const { t } = useTranslate();
-  const [expanded, setExpanded] = React107.useState(true);
-  const scrollRef = React107.useRef(null);
-  const prevCountRef = React107.useRef(0);
-  React107.useEffect(() => {
+  const [expanded, setExpanded] = React105.useState(true);
+  const scrollRef = React105.useRef(null);
+  const prevCountRef = React105.useRef(0);
+  React105.useEffect(() => {
     if (expanded && transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -49621,10 +49624,10 @@ function RuntimeDebugger({
   schema
 }) {
   const { t } = useTranslate();
-  const [isCollapsed, setIsCollapsed] = React107.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React107.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React105.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React105.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React107.useEffect(() => {
+  React105.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -49633,7 +49636,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React107.useEffect(() => {
+  React105.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -50153,7 +50156,7 @@ var init_StatCard = __esm({
       const labelToUse = propLabel ?? propTitle;
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleActionClick = React107__default.useCallback(() => {
+      const handleActionClick = React105__default.useCallback(() => {
         if (action?.event) {
           eventBus.emit(`UI:${action.event}`, {});
         }
@@ -50164,7 +50167,7 @@ var init_StatCard = __esm({
       const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
       const isLoading = externalLoading ?? false;
       const error = externalError;
-      const computeMetricValue = React107__default.useCallback(
+      const computeMetricValue = React105__default.useCallback(
         (metric, items) => {
           if (metric.value !== void 0) {
             return metric.value;
@@ -50203,7 +50206,7 @@ var init_StatCard = __esm({
         },
         []
       );
-      const schemaStats = React107__default.useMemo(() => {
+      const schemaStats = React105__default.useMemo(() => {
         if (!metrics || metrics.length === 0) return null;
         return metrics.map((metric) => ({
           label: metric.label,
@@ -50211,7 +50214,7 @@ var init_StatCard = __esm({
           format: metric.format
         }));
       }, [metrics, data, computeMetricValue]);
-      const calculatedTrend = React107__default.useMemo(() => {
+      const calculatedTrend = React105__default.useMemo(() => {
         if (manualTrend !== void 0) return manualTrend;
         if (previousValue === void 0 || currentValue === void 0)
           return void 0;
@@ -50851,8 +50854,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     InlineActivityStream = ({ activities, autoScroll = true, className }) => {
-      const endRef = React107__default.useRef(null);
-      React107__default.useEffect(() => {
+      const endRef = React105__default.useRef(null);
+      React105__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [activities.length, autoScroll]);
@@ -50946,7 +50949,7 @@ var init_SubagentTracePanel = __esm({
     };
     SubagentRichCard = ({ subagent }) => {
       const { t } = useTranslate();
-      const activities = React107__default.useMemo(
+      const activities = React105__default.useMemo(
         () => subagentMessagesToActivities(subagent.messages),
         [subagent.messages]
       );
@@ -51023,8 +51026,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     CoordinatorConversation = ({ messages, autoScroll = true, className }) => {
-      const endRef = React107__default.useRef(null);
-      React107__default.useEffect(() => {
+      const endRef = React105__default.useRef(null);
+      React105__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [messages.length, autoScroll]);
@@ -51454,7 +51457,7 @@ var init_Timeline = __esm({
     }) => {
       const { t } = useTranslate();
       const entityData = entity ?? [];
-      const items = React107__default.useMemo(() => {
+      const items = React105__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -51556,7 +51559,7 @@ var init_Timeline = __esm({
   }
 });
 function extractToastProps(children) {
-  if (!React107__default.isValidElement(children)) {
+  if (!React105__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -51581,20 +51584,24 @@ var init_ToastSlot = __esm({
       variant: overrideVariant,
       title: overrideTitle,
       duration = 5e3,
-      className
+      className,
+      sourceTrait
     }) => {
       const eventBus = useEventBus();
+      const schemaCtx = useEntitySchemaOptional();
       const isVisible = Boolean(children);
       const extracted = extractToastProps(children);
       const variant = overrideVariant || extracted.variant || "info";
       const title = overrideTitle || extracted.title;
       const message = extracted.message || (typeof children === "string" ? children : "");
       const handleDismiss = () => {
-        eventBus.emit("UI:DISMISS");
-        eventBus.emit("UI:CLOSE");
+        const orbital = sourceTrait !== void 0 && schemaCtx !== null ? schemaCtx.orbitalsByTrait.get(sourceTrait) : void 0;
+        const prefix = orbital !== void 0 && sourceTrait !== void 0 ? `UI:${orbital}.${sourceTrait}.` : "UI:";
+        eventBus.emit(`${prefix}DISMISS`);
+        eventBus.emit(`${prefix}CLOSE`);
       };
       if (!isVisible) return null;
-      const isCustomContent = React107__default.isValidElement(children) && !message;
+      const isCustomContent = React105__default.isValidElement(children) && !message;
       return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
         Toast,
         {
@@ -51611,7 +51618,7 @@ var init_ToastSlot = __esm({
   }
 });
 function lazyThree(name, loader) {
-  const Lazy = React107__default.lazy(
+  const Lazy = React105__default.lazy(
     () => loader().then((m) => {
       const Resolved = m[name];
       if (!Resolved) {
@@ -51623,13 +51630,13 @@ function lazyThree(name, loader) {
     })
   );
   function ThreeWrapper(props) {
-    return React107__default.createElement(
+    return React105__default.createElement(
       ThreeBoundary,
       { name },
-      React107__default.createElement(
-        React107__default.Suspense,
+      React105__default.createElement(
+        React105__default.Suspense,
         { fallback: null },
-        React107__default.createElement(Lazy, props)
+        React105__default.createElement(Lazy, props)
       )
     );
   }
@@ -51941,7 +51948,7 @@ var init_component_registry_generated = __esm({
     init_WizardProgress();
     init_WorldMapBoard();
     init_WorldMapTemplate();
-    ThreeBoundary = class extends React107__default.Component {
+    ThreeBoundary = class extends React105__default.Component {
       constructor() {
         super(...arguments);
         __publicField(this, "state", { failed: false });
@@ -51951,7 +51958,7 @@ var init_component_registry_generated = __esm({
       }
       render() {
         if (this.state.failed) {
-          return React107__default.createElement(
+          return React105__default.createElement(
             "div",
             {
               "data-testid": "three-unavailable",
@@ -52307,7 +52314,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React107__default.createElement(
+  return React105__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -52318,8 +52325,8 @@ function getSlotFallback(slot, config) {
   const variant = SLOT_SKELETON_MAP[slot] ?? "text";
   return /* @__PURE__ */ jsx(Skeleton, { variant });
 }
-function getComponentForPattern3(patternType) {
-  const mapping = getComponentForPattern(patternType);
+function getComponentForPattern(patternType) {
+  const mapping = getComponentForPattern$1(patternType);
   if (!mapping) {
     return null;
   }
@@ -52349,7 +52356,7 @@ function enrichFormFields(fields, entityDef) {
       }
       return { name: field, label: field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase()) };
     }
-    if (field && typeof field === "object" && !Array.isArray(field) && !React107__default.isValidElement(field) && !(field instanceof Date)) {
+    if (field && typeof field === "object" && !Array.isArray(field) && !React105__default.isValidElement(field) && !(field instanceof Date)) {
       const obj = field;
       const fieldName = typeof obj.name === "string" ? obj.name : typeof obj.field === "string" ? obj.field : void 0;
       if (!fieldName) return field;
@@ -52527,6 +52534,7 @@ function UISlotComponent({
   const { t } = useTranslate();
   const suspenseConfig = useContext(SuspenseConfigContext);
   const contained = useContext(SlotContainedContext);
+  const schemaCtx = useEntitySchemaOptional();
   const content = slots[slot];
   if (children !== void 0) {
     if (pattern === "clear") {
@@ -52572,8 +52580,11 @@ function UISlotComponent({
   }
   const handleDismiss = () => {
     if (slot === "modal" || slot === "drawer") {
-      eventBus.emit("UI:CLOSE");
-      eventBus.emit("UI:CANCEL");
+      const trait = content?.sourceTrait;
+      const orbital = trait !== void 0 && schemaCtx !== null ? schemaCtx.orbitalsByTrait.get(trait) : void 0;
+      const prefix = orbital !== void 0 && trait !== void 0 ? `UI:${orbital}.${trait}.` : "UI:";
+      eventBus.emit(`${prefix}CLOSE`);
+      eventBus.emit(`${prefix}CANCEL`);
     }
     clear(slot);
   };
@@ -52627,6 +52638,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const slotsBus = useUISlots();
   const eventBus = useEventBus();
   const { t } = useTranslate();
+  const compiledPortalSchemaCtx = useEntitySchemaOptional();
   useEffect(() => {
     setPortalRoot(getOrCreatePortalRoot());
   }, []);
@@ -52635,8 +52647,10 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   });
   const handleDismiss = () => {
     if (slot === "modal" || slot === "drawer") {
-      eventBus.emit("UI:CLOSE");
-      eventBus.emit("UI:CANCEL");
+      const orbital = sourceTrait !== void 0 && compiledPortalSchemaCtx !== null ? compiledPortalSchemaCtx.orbitalsByTrait.get(sourceTrait) : void 0;
+      const prefix = orbital !== void 0 && sourceTrait !== void 0 ? `UI:${orbital}.${sourceTrait}.` : "UI:";
+      eventBus.emit(`${prefix}CLOSE`);
+      eventBus.emit(`${prefix}CANCEL`);
     }
     slotsBus.clear(slot);
   };
@@ -52795,7 +52809,7 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
         const key = `${parentId}-${index}-trait:${traitName}`;
         return /* @__PURE__ */ jsx(TraitFrame, { traitName }, key);
       }
-      return /* @__PURE__ */ jsx(React107__default.Fragment, { children: child }, `${parentId}-${index}`);
+      return /* @__PURE__ */ jsx(React105__default.Fragment, { children: child }, `${parentId}-${index}`);
     }
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
@@ -52835,14 +52849,14 @@ function isPatternConfig(value) {
   if (value === null || value === void 0) return false;
   if (typeof value !== "object") return false;
   if (Array.isArray(value)) return false;
-  if (React107__default.isValidElement(value)) return false;
+  if (React105__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
-  return "type" in record && typeof record.type === "string" && getComponentForPattern(record.type) !== null;
+  return "type" in record && typeof record.type === "string" && getComponentForPattern$1(record.type) !== null;
 }
 function isPlainConfigObject(value) {
-  if (React107__default.isValidElement(value)) return false;
+  if (React105__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
@@ -52948,7 +52962,7 @@ function SlotContentRenderer({
     }
   }
   const orbitalName = schemaCtx && content.sourceTrait !== void 0 ? schemaCtx.orbitalsByTrait.get(content.sourceTrait) : void 0;
-  const PatternComponent = getComponentForPattern3(content.pattern);
+  const PatternComponent = getComponentForPattern(content.pattern);
   if (PatternComponent) {
     const childrenConfig = content.props.children;
     const isSingleChild = typeof childrenConfig === "string" || typeof childrenConfig === "object" && childrenConfig !== null && !Array.isArray(childrenConfig) && "type" in childrenConfig;
@@ -52968,7 +52982,7 @@ function SlotContentRenderer({
     for (const slotKey of CONTENT_NODE_SLOTS) {
       const slotVal = restProps[slotKey];
       if (slotVal === void 0 || slotVal === null) continue;
-      if (React107__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
+      if (React105__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
       if (Array.isArray(slotVal) || typeof slotVal === "object" && "type" in slotVal) {
         nodeSlotOverrides[slotKey] = renderPatternChildren(
           slotVal,
@@ -53017,7 +53031,7 @@ function SlotContentRenderer({
     const resolvedItems = Array.isArray(entityVal) && entityVal[0] !== "fn" ? entityVal : null;
     if (resolvedItems && resolvedItems.length > 0 && !finalProps.fields && !finalProps.columns) {
       const sample = resolvedItems[0];
-      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React107__default.isValidElement(sample) && !(sample instanceof Date)) {
+      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React105__default.isValidElement(sample) && !(sample instanceof Date)) {
         const keys = Object.keys(sample).filter((k) => k !== "id" && k !== "_id");
         finalProps.fields = keys.map((k, i) => ({ name: k, variant: i === 0 ? "h4" : "body" }));
       }
@@ -53195,6 +53209,7 @@ var init_UISlotRenderer = __esm({
       "custom",
       "dashboard-layout",
       "game-shell",
+      "game-template",
       "scaled-diagram",
       "master-detail",
       "form-field",
@@ -54050,7 +54065,7 @@ function useEntitySchema() {
   }
   return context;
 }
-function useEntitySchemaOptional3() {
+function useEntitySchemaOptional6() {
   return useContext(EntitySchemaContext);
 }
 var log11 = createLogger("almadar:ui:navigation");
@@ -54577,4 +54592,4 @@ function useOptionalOfflineMode() {
   return useContext(OfflineModeContext);
 }
 
-export { ANONYMOUS_USER, CurrentPagePathContext, CurrentPagePathProvider, EntitySchemaProvider, EventBusContext2 as EventBusContext, EventBusProvider, NavigationProvider2 as NavigationProvider, OfflineModeProvider, OrbitalProvider, OrbitalThemeProvider, SelectionContext, SelectionProvider, ServerBridgeProvider, TraitContext, TraitProvider, TraitScopeProvider3 as TraitScopeProvider, UserContext, UserProvider, VerificationProvider, extractRouteParams2 as extractRouteParams, findPageByName2 as findPageByName, findPageByPath2 as findPageByPath, getAllPages2 as getAllPages, getDefaultPage2 as getDefaultPage, matchPath2 as matchPath, pathMatches2 as pathMatches, useActivePage2 as useActivePage, useCurrentPagePath2 as useCurrentPagePath, useEntitySchema, useEntitySchemaOptional3 as useEntitySchemaOptional, useHasPermission, useHasRole, useInitPayload2 as useInitPayload, useNavigateTo2 as useNavigateTo, useNavigation2 as useNavigation, useNavigationId2 as useNavigationId, useNavigationState2 as useNavigationState, useOfflineMode, useOptionalOfflineMode, useSelection, useSelectionOptional, useServerBridge, useTrait, useTraitContext, useTraitScope2 as useTraitScope, useUser, useUserForEvaluation };
+export { ANONYMOUS_USER, CurrentPagePathContext, CurrentPagePathProvider, EntitySchemaProvider, EventBusContext2 as EventBusContext, EventBusProvider, NavigationProvider2 as NavigationProvider, OfflineModeProvider, OrbitalProvider, OrbitalThemeProvider, SelectionContext, SelectionProvider, ServerBridgeProvider, TraitContext, TraitProvider, TraitScopeProvider3 as TraitScopeProvider, UserContext, UserProvider, VerificationProvider, extractRouteParams2 as extractRouteParams, findPageByName2 as findPageByName, findPageByPath2 as findPageByPath, getAllPages2 as getAllPages, getDefaultPage2 as getDefaultPage, matchPath2 as matchPath, pathMatches2 as pathMatches, useActivePage2 as useActivePage, useCurrentPagePath2 as useCurrentPagePath, useEntitySchema, useEntitySchemaOptional6 as useEntitySchemaOptional, useHasPermission, useHasRole, useInitPayload2 as useInitPayload, useNavigateTo2 as useNavigateTo, useNavigation2 as useNavigation, useNavigationId2 as useNavigationId, useNavigationState2 as useNavigationState, useOfflineMode, useOptionalOfflineMode, useSelection, useSelectionOptional, useServerBridge, useTrait, useTraitContext, useTraitScope2 as useTraitScope, useUser, useUserForEvaluation };