@almadar/ui 5.23.0 → 5.24.0

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React80 from 'react';
-import React80__default, { useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, lazy, createContext, useLayoutEffect, useId, useSyncExternalStore } from 'react';
+import * as React81 from 'react';
+import React81__default, { useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, lazy, createContext, useLayoutEffect, useId, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScope, TraitScopeProvider } from '@almadar/ui/providers';
@@ -211,7 +211,7 @@ var init_SvgFlow = __esm({
       opacity = 1,
       className
     }) => {
-      const markerId = React80__default.useMemo(() => {
+      const markerId = React81__default.useMemo(() => {
         flowIdCounter += 1;
         return `almadar-flow-arrow-${flowIdCounter}`;
       }, []);
@@ -754,7 +754,7 @@ var init_SvgRing = __esm({
       className,
       label
     }) => {
-      const gradientId = React80__default.useMemo(() => {
+      const gradientId = React81__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
@@ -1836,7 +1836,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 = React80__default.useMemo(() => {
+      const RenderedComponent = React81__default.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
       }, [directIcon, effectiveName, family]);
@@ -1894,7 +1894,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React80__default.isValidElement(value)) {
+  if (React81__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -1970,7 +1970,7 @@ var init_Button = __esm({
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    Button = React80__default.forwardRef(
+    Button = React81__default.forwardRef(
       ({
         className,
         variant = "primary",
@@ -2036,7 +2036,7 @@ var init_Input = __esm({
   "components/core/atoms/Input.tsx"() {
     init_cn();
     init_Icon();
-    Input = React80__default.forwardRef(
+    Input = React81__default.forwardRef(
       ({
         className,
         inputType,
@@ -2157,7 +2157,7 @@ var Label;
 var init_Label = __esm({
   "components/core/atoms/Label.tsx"() {
     init_cn();
-    Label = React80__default.forwardRef(
+    Label = React81__default.forwardRef(
       ({ className, required, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "label",
@@ -2183,7 +2183,7 @@ var Textarea;
 var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
-    Textarea = React80__default.forwardRef(
+    Textarea = React81__default.forwardRef(
       ({ className, error, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "textarea",
@@ -2213,7 +2213,7 @@ var init_Select = __esm({
   "components/core/atoms/Select.tsx"() {
     init_cn();
     init_Icon();
-    Select = React80__default.forwardRef(
+    Select = React81__default.forwardRef(
       ({ className, options, placeholder, error, ...props }, ref) => {
         return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxs(
@@ -2255,7 +2255,7 @@ var Checkbox;
 var init_Checkbox = __esm({
   "components/core/atoms/Checkbox.tsx"() {
     init_cn();
-    Checkbox = React80__default.forwardRef(
+    Checkbox = React81__default.forwardRef(
       ({ className, label, id, ...props }, ref) => {
         const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
         return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -2346,7 +2346,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 = React80__default.forwardRef(
+    Card = React81__default.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -2384,9 +2384,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React80__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React81__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React80__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React81__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -2399,11 +2399,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React80__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React81__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React80__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React81__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -2456,7 +2456,7 @@ var init_Badge = __esm({
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React80__default.forwardRef(
+    Badge = React81__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = {
           sm: "h-icon-default w-icon-default",
@@ -2549,7 +2549,7 @@ var init_FilterPill = __esm({
       md: "w-3.5 h-3.5",
       lg: "w-4 h-4"
     };
-    FilterPill = React80__default.forwardRef(
+    FilterPill = React81__default.forwardRef(
       ({
         className,
         variant = "default",
@@ -2626,7 +2626,7 @@ var init_Spinner = __esm({
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
-    Spinner = React80__default.forwardRef(
+    Spinner = React81__default.forwardRef(
       ({ className, size = "md", ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "div",
@@ -2705,11 +2705,15 @@ var init_Avatar = __esm({
       actionPayload
     }) => {
       const eventBus = useEventBus();
+      const [imgFailed, setImgFailed] = React81__default.useState(false);
+      React81__default.useEffect(() => {
+        setImgFailed(false);
+      }, [src]);
       const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
       const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
-      const hasImage = !!src;
-      const hasInitials = !!initials;
+      const hasImage = !!src && !imgFailed;
       const hasIcon = !!IconComponent;
+      const hasInitials = !!initials && !(hasIcon && !providedInitials);
       const getInitialsBackground = () => "bg-primary text-primary-foreground";
       const isClickable = action || onClick;
       const handleClick = () => {
@@ -2739,9 +2743,8 @@ var init_Avatar = __esm({
                 src,
                 alt: alt || "Avatar",
                 className: "w-full h-full object-cover",
-                onError: (e) => {
-                  const target = e.target;
-                  target.style.display = "none";
+                onError: () => {
+                  setImgFailed(true);
                 }
               }
             ) : hasInitials ? /* @__PURE__ */ jsx(
@@ -2910,7 +2913,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React80__default.forwardRef(
+    Box = React81__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -2960,7 +2963,7 @@ var init_Box = __esm({
           onMouseLeave?.(e);
         }, [hoverEvent, eventBus, onMouseLeave]);
         const isClickable = action || onClick;
-        return React80__default.createElement(
+        return React81__default.createElement(
           Component,
           {
             ref,
@@ -3282,7 +3285,7 @@ var init_Radio = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    Radio = React80__default.forwardRef(
+    Radio = React81__default.forwardRef(
       ({
         label,
         helperText,
@@ -3299,12 +3302,12 @@ var init_Radio = __esm({
         onChange,
         ...props
       }, ref) => {
-        const reactId = React80__default.useId();
+        const reactId = React81__default.useId();
         const baseId = id || `radio-${reactId}`;
         const hasError = !!error;
         const eventBus = useEventBus();
-        const [selected, setSelected] = React80__default.useState(value);
-        React80__default.useEffect(() => {
+        const [selected, setSelected] = React81__default.useState(value);
+        React81__default.useEffect(() => {
           if (value !== void 0) setSelected(value);
         }, [value]);
         const pick = (next, e) => {
@@ -3486,7 +3489,7 @@ var init_Switch = __esm({
   "components/core/atoms/Switch.tsx"() {
     "use client";
     init_cn();
-    Switch = React80.forwardRef(
+    Switch = React81.forwardRef(
       ({
         checked,
         defaultChecked = false,
@@ -3497,10 +3500,10 @@ var init_Switch = __esm({
         name,
         className
       }, ref) => {
-        const [isChecked, setIsChecked] = React80.useState(
+        const [isChecked, setIsChecked] = React81.useState(
           checked !== void 0 ? checked : defaultChecked
         );
-        React80.useEffect(() => {
+        React81.useEffect(() => {
           if (checked !== void 0) {
             setIsChecked(checked);
           }
@@ -4371,7 +4374,7 @@ var Dialog;
 var init_Dialog = __esm({
   "components/core/atoms/Dialog.tsx"() {
     init_cn();
-    Dialog = React80__default.forwardRef(
+    Dialog = React81__default.forwardRef(
       ({
         role = "dialog",
         "aria-modal": ariaModal = true,
@@ -4397,7 +4400,7 @@ var Aside;
 var init_Aside = __esm({
   "components/core/atoms/Aside.tsx"() {
     init_cn();
-    Aside = React80__default.forwardRef(
+    Aside = React81__default.forwardRef(
       ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn(className), ...rest, children })
     );
     Aside.displayName = "Aside";
@@ -4475,8 +4478,8 @@ var init_LawReferenceTooltip = __esm({
       className
     }) => {
       const { t } = useTranslate();
-      const [isVisible, setIsVisible] = React80__default.useState(false);
-      const timeoutRef = React80__default.useRef(null);
+      const [isVisible, setIsVisible] = React81__default.useState(false);
+      const timeoutRef = React81__default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -4485,7 +4488,7 @@ var init_LawReferenceTooltip = __esm({
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         setIsVisible(false);
       };
-      React80__default.useEffect(() => {
+      React81__default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
         };
@@ -4695,7 +4698,7 @@ var init_StatusDot = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    StatusDot = React80__default.forwardRef(
+    StatusDot = React81__default.forwardRef(
       ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "span",
@@ -4749,7 +4752,7 @@ var init_TrendIndicator = __esm({
       down: "trending-down",
       flat: "arrow-right"
     };
-    TrendIndicator = React80__default.forwardRef(
+    TrendIndicator = React81__default.forwardRef(
       ({
         className,
         value,
@@ -4816,7 +4819,7 @@ var init_RangeSlider = __esm({
       md: "w-4 h-4",
       lg: "w-5 h-5"
     };
-    RangeSlider = React80__default.forwardRef(
+    RangeSlider = React81__default.forwardRef(
       ({
         className,
         min = 0,
@@ -5412,7 +5415,7 @@ var init_ContentSection = __esm({
       md: "py-16",
       lg: "py-24"
     };
-    ContentSection = React80__default.forwardRef(
+    ContentSection = React81__default.forwardRef(
       ({ children, background = "default", padding = "lg", id, className }, ref) => {
         return /* @__PURE__ */ jsx(
           Box,
@@ -5946,7 +5949,7 @@ var init_AnimatedReveal = __esm({
       "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
       "none": {}
     };
-    AnimatedReveal = React80__default.forwardRef(
+    AnimatedReveal = React81__default.forwardRef(
       ({
         trigger = "scroll",
         animation = "fade-up",
@@ -6106,7 +6109,7 @@ var init_AnimatedGraphic = __esm({
   "components/marketing/atoms/AnimatedGraphic.tsx"() {
     "use client";
     init_cn();
-    AnimatedGraphic = React80__default.forwardRef(
+    AnimatedGraphic = React81__default.forwardRef(
       ({
         src,
         svgContent,
@@ -6129,7 +6132,7 @@ var init_AnimatedGraphic = __esm({
         const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
         const resolvedSvg = svgContent ?? fetchedSvg;
         const prevAnimateRef = useRef(animate);
-        const setRef = React80__default.useCallback(
+        const setRef = React81__default.useCallback(
           (node) => {
             containerRef.current = node;
             if (typeof ref === "function") ref(node);
@@ -6532,7 +6535,7 @@ var init_Drawer = __esm({
       };
       const widthClass = width in sizeWidths ? sizeWidths[width] : "";
       const widthStyle = width in sizeWidths ? void 0 : { width };
-      const positionClasses3 = position === "right" ? "right-0 border-l" : "left-0 border-r";
+      const positionClasses = position === "right" ? "right-0 border-l" : "left-0 border-r";
       const animationClasses2 = position === "right" ? "animate-slide-in-right" : "animate-slide-in-left";
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -6553,7 +6556,7 @@ var init_Drawer = __esm({
             className: cn(
               "fixed top-0 bottom-0 z-50",
               "flex flex-col max-h-screen",
-              positionClasses3,
+              positionClasses,
               widthClass,
               animationClasses2,
               className
@@ -6819,7 +6822,7 @@ var init_ErrorBoundary = __esm({
         }
       );
     };
-    ErrorBoundary = class extends React80__default.Component {
+    ErrorBoundary = class extends React81__default.Component {
       constructor(props) {
         super(props);
         __publicField(this, "reset", () => {
@@ -7792,18 +7795,42 @@ var init_Alert = __esm({
     Alert.displayName = "Alert";
   }
 });
-var positionClasses, arrowClasses, Tooltip;
+function computeTooltipStyle(position, triggerRect) {
+  switch (position) {
+    case "bottom":
+      return {
+        left: triggerRect.left + triggerRect.width / 2,
+        top: triggerRect.bottom + TRIGGER_GAP,
+        transform: "translateX(-50%)"
+      };
+    case "left":
+      return {
+        left: triggerRect.left - TRIGGER_GAP,
+        top: triggerRect.top + triggerRect.height / 2,
+        transform: "translate(-100%, -50%)"
+      };
+    case "right":
+      return {
+        left: triggerRect.right + TRIGGER_GAP,
+        top: triggerRect.top + triggerRect.height / 2,
+        transform: "translateY(-50%)"
+      };
+    case "top":
+    default:
+      return {
+        left: triggerRect.left + triggerRect.width / 2,
+        top: triggerRect.top - TRIGGER_GAP,
+        transform: "translate(-50%, -100%)"
+      };
+  }
+}
+var TRIGGER_GAP, arrowClasses, Tooltip;
 var init_Tooltip = __esm({
   "components/core/molecules/Tooltip.tsx"() {
     "use client";
     init_Typography();
     init_cn();
-    positionClasses = {
-      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-      left: "right-full top-1/2 -translate-y-1/2 mr-2",
-      right: "left-full top-1/2 -translate-y-1/2 ml-2"
-    };
+    TRIGGER_GAP = 8;
     arrowClasses = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-primary border-l-transparent border-r-transparent border-b-transparent",
       bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-primary border-l-transparent border-r-transparent border-t-transparent",
@@ -7858,8 +7885,8 @@ var init_Tooltip = __esm({
           if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
         };
       }, []);
-      const triggerElement = React80__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-      const trigger = React80__default.cloneElement(triggerElement, {
+      const triggerElement = React81__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const trigger = React81__default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -7877,14 +7904,9 @@ var init_Tooltip = __esm({
             "text-sm pointer-events-none",
             "break-words whitespace-normal",
             "h-auto min-h-fit",
-            positionClasses[position],
             className
           ),
-          style: {
-            left: position === "left" || position === "right" ? triggerRect.left + (position === "left" ? 0 : triggerRect.width) : triggerRect.left + triggerRect.width / 2,
-            top: position === "top" || position === "bottom" ? triggerRect.top + (position === "top" ? 0 : triggerRect.height) : triggerRect.top + triggerRect.height / 2,
-            transform: position === "top" || position === "bottom" ? "translateX(-50%)" : position === "left" || position === "right" ? "translateY(-50%)" : "none"
-          },
+          style: computeTooltipStyle(position, triggerRect),
           role: "tooltip",
           children: [
             /* @__PURE__ */ jsx("div", { className: "w-full break-words whitespace-normal h-auto", children: typeof content === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary-foreground break-words whitespace-normal", children: content }) : /* @__PURE__ */ jsx("div", { className: "break-words whitespace-normal", children: content }) }),
@@ -7911,8 +7933,9 @@ var init_Tooltip = __esm({
 function computePopoverStyle(position, triggerRect, popoverWidth) {
   if (position === "left" || position === "right") {
     return {
-      left: triggerRect.left + (position === "left" ? 0 : triggerRect.width),
-      top: triggerRect.top + triggerRect.height / 2
+      left: position === "left" ? triggerRect.left - popoverWidth - TRIGGER_GAP2 : triggerRect.right + TRIGGER_GAP2,
+      top: triggerRect.top + triggerRect.height / 2,
+      transform: "translateY(-50%)"
     };
   }
   const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
@@ -7924,21 +7947,16 @@ function computePopoverStyle(position, triggerRect, popoverWidth) {
   );
   return {
     left: clamped,
-    top: triggerRect.top + (position === "top" ? 0 : triggerRect.height)
+    top: position === "top" ? triggerRect.top - TRIGGER_GAP2 : triggerRect.bottom + TRIGGER_GAP2,
+    transform: position === "top" ? "translateY(-100%)" : void 0
   };
 }
-var positionClasses2, arrowClasses2, VIEWPORT_EDGE_PADDING, Popover;
+var arrowClasses2, VIEWPORT_EDGE_PADDING, TRIGGER_GAP2, Popover;
 var init_Popover = __esm({
   "components/core/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
     init_cn();
-    positionClasses2 = {
-      top: "mb-2",
-      bottom: "mt-2",
-      left: "mr-2 -translate-y-1/2",
-      right: "ml-2 -translate-y-1/2"
-    };
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
       bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-white border-l-transparent border-r-transparent border-t-transparent",
@@ -7946,6 +7964,7 @@ var init_Popover = __esm({
       right: "right-full top-1/2 -translate-y-1/2 border-r-white border-t-transparent border-b-transparent border-l-transparent"
     };
     VIEWPORT_EDGE_PADDING = 8;
+    TRIGGER_GAP2 = 8;
     Popover = ({
       content,
       children,
@@ -8014,8 +8033,8 @@ var init_Popover = __esm({
         onMouseEnter: handleOpen,
         onMouseLeave: handleClose
       };
-      const childElement = React80__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-      const triggerElement = React80__default.cloneElement(
+      const childElement = React81__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const triggerElement = React81__default.cloneElement(
         childElement,
         {
           ref: triggerRef,
@@ -8029,7 +8048,6 @@ var init_Popover = __esm({
           className: cn(
             "fixed z-50 p-4",
             "bg-card border-2 border-border shadow-elevation-popover",
-            positionClasses2[position],
             className
           ),
           style: computePopoverStyle(position, triggerRect, popoverWidth),
@@ -8119,7 +8137,7 @@ var init_Menu = __esm({
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }, [isOpen]);
-      const positionClasses3 = {
+      const positionClasses = {
         "top-left": "bottom-full left-0 mb-2",
         "top-right": "bottom-full right-0 mb-2",
         "bottom-left": "top-full left-0 mt-2",
@@ -8142,8 +8160,8 @@ var init_Menu = __esm({
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
       const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
-      const triggerChild = React80__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React80__default.cloneElement(
+      const triggerChild = React81__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
+      const triggerElement = React81__default.cloneElement(
         triggerChild,
         {
           ref: triggerRef,
@@ -8227,7 +8245,7 @@ var init_Menu = __esm({
             className: cn(
               "absolute z-50",
               menuContainerStyles,
-              positionClasses3[effectivePosition],
+              positionClasses[effectivePosition],
               className
             ),
             style: {
@@ -8403,7 +8421,7 @@ var init_FloatingActionButton = __esm({
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }, [isExpanded, actions]);
-      const positionClasses3 = {
+      const positionClasses = {
         "bottom-right": "bottom-6 right-6",
         "bottom-left": "bottom-6 left-6",
         "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
@@ -8412,7 +8430,7 @@ var init_FloatingActionButton = __esm({
         "top-center": "top-6 left-1/2 -translate-x-1/2"
       };
       if (resolvedAction && (!actions || actions.length === 0)) {
-        return /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", positionClasses3[position], className), children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", positionClasses[position], className), children: /* @__PURE__ */ jsx(
           Button,
           {
             variant: resolvedAction.variant || "primary",
@@ -8440,7 +8458,7 @@ var init_FloatingActionButton = __esm({
             ref: fabRef,
             className: cn(
               "fixed z-50 flex flex-col items-end gap-3",
-              positionClasses3[position],
+              positionClasses[position],
               position.includes("left") && "items-start",
               className
             ),
@@ -8550,13 +8568,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect70, useRef: useRef67, useCallback: useCallback114, useState: useState100 } = React80__default;
+      const { useEffect: useEffect71, useRef: useRef68, useCallback: useCallback116, useState: useState102 } = React81__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 }) {
         const map = useMap();
-        const prevRef = useRef67({ centerLat, centerLng, zoom });
-        useEffect70(() => {
+        const prevRef = useRef68({ centerLat, centerLng, zoom });
+        useEffect71(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -8567,7 +8585,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect70(() => {
+        useEffect71(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -8595,8 +8613,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState100(null);
-        const handleMapClick = useCallback114((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState102(null);
+        const handleMapClick = useCallback116((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -8605,7 +8623,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback114((marker) => {
+        const handleMarkerClick = useCallback116((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -8614,7 +8632,7 @@ var init_MapView = __esm({
         return /* @__PURE__ */ jsx(
           Box,
           {
-            className: cn("relative w-full overflow-hidden rounded-lg", className),
+            className: cn("relative isolate w-full overflow-hidden rounded-lg", className),
             style: { height },
             "data-testid": "map-view",
             children: /* @__PURE__ */ jsxs(
@@ -8796,7 +8814,7 @@ function InputPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React80__default.useState(value);
+  const [localValue, setLocalValue] = React81__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8834,7 +8852,7 @@ function TextareaPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React80__default.useState(value);
+  const [localValue, setLocalValue] = React81__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8866,7 +8884,7 @@ function SelectPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React80__default.useState(value);
+  const [localValue, setLocalValue] = React81__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8895,7 +8913,7 @@ function CheckboxPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localChecked, setLocalChecked] = React80__default.useState(checked);
+  const [localChecked, setLocalChecked] = React81__default.useState(checked);
   const handleChange = (e) => {
     setLocalChecked(e.target.checked);
     if (onChange) {
@@ -9208,9 +9226,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React80.useState(false);
+  const [isPressed, setIsPressed] = React81.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React80.useCallback(
+  const handlePointerDown = React81.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -9220,7 +9238,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React80.useCallback(
+  const handlePointerUp = React81.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -9230,7 +9248,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React80.useCallback(
+  const handlePointerLeave = React81.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -9307,8 +9325,8 @@ function ActionButtons({
   disabled
 }) {
   const eventBus = useEventBus();
-  const [activeButtons, setActiveButtons] = React80.useState(/* @__PURE__ */ new Set());
-  const handlePress = React80.useCallback(
+  const [activeButtons, setActiveButtons] = React81.useState(/* @__PURE__ */ new Set());
+  const handlePress = React81.useCallback(
     (id) => {
       setActiveButtons((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -9316,7 +9334,7 @@ function ActionButtons({
     },
     [actionEvent, eventBus, onAction]
   );
-  const handleRelease = React80.useCallback(
+  const handleRelease = React81.useCallback(
     (id) => {
       setActiveButtons((prev) => {
         const next = new Set(prev);
@@ -12242,7 +12260,10 @@ function computeFoldRegions(code) {
   }
   return regions.sort((a, b) => a.start - b.start);
 }
-var orbStyleOverrides, orbStyle, loloStyleOverrides, loloStyle, log5, LINE_PROPS_FN, HIDDEN_LINE_NUMBERS, CodeBlock;
+function toCodeLanguage(value) {
+  return value && CODE_LANGUAGE_SET.has(value) ? value : "text";
+}
+var orbStyleOverrides, orbStyle, loloStyleOverrides, loloStyle, log5, CODE_LANGUAGES, CODE_LANGUAGE_SET, LINE_PROPS_FN, HIDDEN_LINE_NUMBERS, CodeBlock;
 var init_CodeBlock = __esm({
   "components/core/molecules/markdown/CodeBlock.tsx"() {
     init_Box();
@@ -12320,9 +12341,40 @@ var init_CodeBlock = __esm({
     };
     loloStyle = { ...dark, ...loloStyleOverrides };
     log5 = createLogger("almadar:ui:markdown-code");
+    CODE_LANGUAGES = [
+      "text",
+      "json",
+      "javascript",
+      "js",
+      "typescript",
+      "ts",
+      "jsx",
+      "tsx",
+      "css",
+      "markdown",
+      "md",
+      "bash",
+      "shell",
+      "sh",
+      "yaml",
+      "yml",
+      "rust",
+      "python",
+      "py",
+      "sql",
+      "diff",
+      "toml",
+      "go",
+      "graphql",
+      "html",
+      "xml",
+      "orb",
+      "lolo"
+    ];
+    CODE_LANGUAGE_SET = new Set(CODE_LANGUAGES);
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React80__default.memo(
+    CodeBlock = React81__default.memo(
       ({
         code: rawCode,
         language = "text",
@@ -12759,7 +12811,7 @@ var init_MarkdownContent = __esm({
     init_Box();
     init_CodeBlock();
     init_cn();
-    MarkdownContent = React80__default.memo(
+    MarkdownContent = React81__default.memo(
       ({ content, direction, className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -12809,7 +12861,7 @@ var init_MarkdownContent = __esm({
                           CodeBlock,
                           {
                             code,
-                            language: match[1],
+                            language: toCodeLanguage(match[1]),
                             maxHeight: "60vh"
                           }
                         );
@@ -13855,7 +13907,7 @@ var init_StateMachineView = __esm({
                 style: { top: title ? 30 : 0 },
                 children: [
                   entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React80__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React81__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                     StateNode,
                     {
                       state,
@@ -14668,7 +14720,7 @@ var init_ContentRenderer = __esm({
               CodeBlock,
               {
                 code: segment.content,
-                language: segment.language
+                language: toCodeLanguage(segment.language)
               },
               key
             );
@@ -14693,7 +14745,7 @@ var init_ContentRenderer = __esm({
                 CodeBlock,
                 {
                   code: segment.content,
-                  language: segment.language
+                  language: toCodeLanguage(segment.language)
                 }
               ),
               /* @__PURE__ */ jsx(ScaledDiagram, { children: /* @__PURE__ */ jsx(
@@ -15460,7 +15512,7 @@ var init_Grid = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = rows2 ? { gridTemplateRows: `repeat(${rows2}, minmax(0, 1fr))`, ...style } : style;
-      return React80__default.createElement(
+      return React81__default.createElement(
         Component,
         {
           className: cn(
@@ -20998,7 +21050,7 @@ function CraftingRecipe({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCraft = React80.useCallback(() => {
+  const handleCraft = React81.useCallback(() => {
     onCraft?.();
     if (craftEvent) {
       eventBus.emit(craftEvent, { output: output.label });
@@ -21015,7 +21067,7 @@ function CraftingRecipe({
       children: [
         /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap items-center", children: inputs.map((ingredient, index) => {
           const hasSufficient = ingredient.available >= ingredient.required;
-          return /* @__PURE__ */ jsxs(React80.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React81.Fragment, { children: [
             /* @__PURE__ */ jsx(Box, { className: "relative", children: /* @__PURE__ */ jsx(
               ItemSlot,
               {
@@ -21078,8 +21130,8 @@ function DPad({
 }) {
   const eventBus = useEventBus();
   const sizes = sizeMap6[size];
-  const [activeDirections, setActiveDirections] = React80.useState(/* @__PURE__ */ new Set());
-  const handlePress = React80.useCallback(
+  const [activeDirections, setActiveDirections] = React81.useState(/* @__PURE__ */ new Set());
+  const handlePress = React81.useCallback(
     (direction) => {
       setActiveDirections((prev) => new Set(prev).add(direction));
       if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: true });
@@ -21087,7 +21139,7 @@ function DPad({
     },
     [directionEvent, eventBus, onDirection]
   );
-  const handleRelease = React80.useCallback(
+  const handleRelease = React81.useCallback(
     (direction) => {
       setActiveDirections((prev) => {
         const next = new Set(prev);
@@ -21822,14 +21874,14 @@ function useDataDnd(args) {
   const isZone = Boolean(dragGroup || accepts || sortable);
   const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
-  const parentRoot = React80__default.useContext(RootCtx);
+  const parentRoot = React81__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const zoneId = React80__default.useId();
+  const zoneId = React81__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
-  const [optimisticOrders, setOptimisticOrders] = React80__default.useState(() => /* @__PURE__ */ new Map());
-  const optimisticOrdersRef = React80__default.useRef(optimisticOrders);
+  const [optimisticOrders, setOptimisticOrders] = React81__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React81__default.useRef(optimisticOrders);
   optimisticOrdersRef.current = optimisticOrders;
-  const clearOptimisticOrder = React80__default.useCallback((group) => {
+  const clearOptimisticOrder = React81__default.useCallback((group) => {
     setOptimisticOrders((prev) => {
       if (!prev.has(group)) return prev;
       const next = new Map(prev);
@@ -21854,7 +21906,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
   }).join("|");
-  const itemIds = React80__default.useMemo(
+  const itemIds = React81__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
@@ -21862,7 +21914,7 @@ function useDataDnd(args) {
     [itemIdsSignature]
   );
   const itemsContentSig = items.map((it, idx) => String(it[dndItemIdField] ?? `__${idx}`)).join("|");
-  React80__default.useEffect(() => {
+  React81__default.useEffect(() => {
     const root = isRoot ? null : parentRoot;
     if (root) {
       root.clearOptimisticOrder(ownGroup);
@@ -21870,20 +21922,20 @@ function useDataDnd(args) {
       clearOptimisticOrder(ownGroup);
     }
   }, [itemsContentSig, ownGroup]);
-  const zonesRef = React80__default.useRef(/* @__PURE__ */ new Map());
-  const registerZone = React80__default.useCallback((zoneId2, meta2) => {
+  const zonesRef = React81__default.useRef(/* @__PURE__ */ new Map());
+  const registerZone = React81__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
   }, []);
-  const unregisterZone = React80__default.useCallback((zoneId2) => {
+  const unregisterZone = React81__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
-  const [activeDrag, setActiveDrag] = React80__default.useState(null);
-  const [overZoneGroup, setOverZoneGroup] = React80__default.useState(null);
-  const meta = React80__default.useMemo(
+  const [activeDrag, setActiveDrag] = React81__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React81__default.useState(null);
+  const meta = React81__default.useMemo(
     () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
     [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
-  React80__default.useEffect(() => {
+  React81__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
@@ -21902,7 +21954,7 @@ function useDataDnd(args) {
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useAlmadarDndSensors(true);
   const collisionDetection = almadarDndCollisionDetection;
-  const findZoneByItem = React80__default.useCallback(
+  const findZoneByItem = React81__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
         if (z.itemIds.includes(id)) return z;
@@ -21911,7 +21963,7 @@ function useDataDnd(args) {
     },
     []
   );
-  React80__default.useCallback(
+  React81__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -21920,7 +21972,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const handleDragEnd = React80__default.useCallback(
+  const handleDragEnd = React81__default.useCallback(
     (event) => {
       const { active, over } = event;
       const activeIdStr = String(active.id);
@@ -22011,8 +22063,8 @@ function useDataDnd(args) {
     },
     [eventBus]
   );
-  const sortableData = React80__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
-  const SortableItem = React80__default.useCallback(
+  const sortableData = React81__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
+  const SortableItem = React81__default.useCallback(
     ({ id, children }) => {
       const {
         attributes,
@@ -22052,7 +22104,7 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
-    const ctx = React80__default.useContext(RootCtx);
+    const ctx = React81__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
     const overZoneGroup2 = ctx?.overZoneGroup ?? null;
     const isThisZoneOver = overZoneGroup2 === ownGroup;
@@ -22067,7 +22119,7 @@ function useDataDnd(args) {
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
-    React80__default.useEffect(() => {
+    React81__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsx(
@@ -22081,11 +22133,11 @@ function useDataDnd(args) {
       }
     );
   };
-  const rootContextValue = React80__default.useMemo(
+  const rootContextValue = React81__default.useMemo(
     () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
     [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
-  const handleDragStart = React80__default.useCallback((event) => {
+  const handleDragStart = React81__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;
@@ -22104,7 +22156,7 @@ function useDataDnd(args) {
       isRoot
     });
   }, [findZoneByItem, isRoot, zoneId]);
-  const handleDragOver = React80__default.useCallback((event) => {
+  const handleDragOver = React81__default.useCallback((event) => {
     const { active, over } = event;
     const overData = over?.data?.current;
     const overGroup = overData?.dndGroup ?? null;
@@ -22174,7 +22226,7 @@ function useDataDnd(args) {
       return next;
     });
   }, []);
-  const handleDragCancel = React80__default.useCallback((event) => {
+  const handleDragCancel = React81__default.useCallback((event) => {
     setActiveDrag(null);
     setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
@@ -22182,12 +22234,12 @@ function useDataDnd(args) {
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
-  const handleDragEndWithCleanup = React80__default.useCallback((event) => {
+  const handleDragEndWithCleanup = React81__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
     setOverZoneGroup(null);
   }, [handleDragEnd]);
-  const wrapContainer = React80__default.useCallback(
+  const wrapContainer = React81__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
@@ -22241,7 +22293,7 @@ var init_useDataDnd = __esm({
     init_useAlmadarDndCollision();
     init_Box();
     dndLog = createLogger("almadar:ui:dnd");
-    RootCtx = React80__default.createContext(null);
+    RootCtx = React81__default.createContext(null);
   }
 });
 function fieldLabel2(key) {
@@ -22761,7 +22813,7 @@ function DataList({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React80__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React81__default.useState(pageSize || Infinity);
   const fieldDefs = fields ?? columns ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -22780,7 +22832,7 @@ function DataList({
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
-  React80__default.useEffect(() => {
+  React81__default.useEffect(() => {
     const renderItemTypeOf = typeof schemaRenderItem;
     const childrenTypeOf = typeof children;
     if (data.length > 0 && !hasRenderProp) {
@@ -22885,7 +22937,7 @@ function DataList({
     const items2 = data.map((item) => item);
     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(React80__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React81__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}`;
@@ -23033,7 +23085,7 @@ function DataList({
           className
         ),
         children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs(React80__default.Fragment, { children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs(React81__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)
@@ -24657,7 +24709,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(React80__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -25174,7 +25226,7 @@ var init_FormSectionHeader = __esm({
         Box,
         {
           className: cn(
-            "px-4 py-3 bg-muted rounded-t-lg",
+            "px-4 py-3 bg-muted rounded-t-lg border-b-2 border-border border-l-4 border-l-primary",
             isClickable && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
             className
           ),
@@ -25186,7 +25238,7 @@ var init_FormSectionHeader = __esm({
                 {
                   name: icon,
                   size: "md",
-                  className: "text-muted-foreground"
+                  className: "text-primary"
                 }
               ),
               statusIcon && /* @__PURE__ */ jsx(
@@ -25197,8 +25249,8 @@ var init_FormSectionHeader = __esm({
                   className: hasErrors ? "text-error" : "text-success"
                 }
               ),
-              /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "label", weight: "semibold", children: title }),
+              /* @__PURE__ */ jsxs(Box, { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subheading", weight: "semibold", children: title }),
                 subtitle && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: subtitle })
               ] })
             ] }),
@@ -25268,6 +25320,303 @@ var init_FlipCard = __esm({
     FlipCard.displayName = "FlipCard";
   }
 });
+var ALL_CATEGORY, GridPicker;
+var init_GridPicker = __esm({
+  "components/core/molecules/GridPicker.tsx"() {
+    "use client";
+    init_cn();
+    init_Input();
+    init_Badge();
+    init_Stack();
+    ALL_CATEGORY = "__all__";
+    GridPicker = ({
+      items,
+      value,
+      onChange,
+      categories,
+      searchPlaceholder,
+      renderThumbnail,
+      cellSize = 32,
+      className
+    }) => {
+      const [search, setSearch] = useState("");
+      const [activeCategory, setActiveCategory] = useState(ALL_CATEGORY);
+      const gridRef = useRef(null);
+      const categoryChips = useMemo(() => {
+        if (categories !== void 0) return categories;
+        const seen = [];
+        for (const item of items) {
+          if (!seen.includes(item.category)) seen.push(item.category);
+        }
+        return seen;
+      }, [categories, items]);
+      const filtered = useMemo(() => {
+        const needle = search.trim().toLowerCase();
+        return items.filter((item) => {
+          const matchesCategory = activeCategory === ALL_CATEGORY || item.category === activeCategory;
+          const matchesSearch = needle === "" || item.label.toLowerCase().includes(needle);
+          return matchesCategory && matchesSearch;
+        });
+      }, [items, search, activeCategory]);
+      const select = useCallback(
+        (item) => {
+          onChange(item.id);
+        },
+        [onChange]
+      );
+      const handleKeyDown = useCallback(
+        (e, index) => {
+          const cells = gridRef.current?.querySelectorAll(
+            "[data-gridpicker-cell]"
+          );
+          if (cells === void 0 || cells.length === 0) return;
+          const columns = (() => {
+            const grid = gridRef.current;
+            if (grid === null) return 1;
+            const style = window.getComputedStyle(grid);
+            const cols = style.gridTemplateColumns.split(" ").filter(Boolean).length;
+            return cols > 0 ? cols : 1;
+          })();
+          let next = -1;
+          if (e.key === "ArrowRight") next = index + 1;
+          else if (e.key === "ArrowLeft") next = index - 1;
+          else if (e.key === "ArrowDown") next = index + columns;
+          else if (e.key === "ArrowUp") next = index - columns;
+          else if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            select(filtered[index]);
+            return;
+          } else {
+            return;
+          }
+          e.preventDefault();
+          if (next >= 0 && next < cells.length) {
+            cells[next].focus();
+          }
+        },
+        [filtered, select]
+      );
+      return /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: cn("w-full", className), children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "search",
+            icon: "search",
+            value: search,
+            placeholder: searchPlaceholder,
+            clearable: true,
+            onClear: () => setSearch(""),
+            onChange: (e) => setSearch(e.target.value)
+          }
+        ),
+        categoryChips.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", wrap: true, children: [
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: activeCategory === ALL_CATEGORY ? "primary" : "neutral",
+              size: "sm",
+              role: "button",
+              tabIndex: 0,
+              "aria-pressed": activeCategory === ALL_CATEGORY,
+              className: "cursor-pointer",
+              onClick: () => setActiveCategory(ALL_CATEGORY),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActiveCategory(ALL_CATEGORY);
+                }
+              },
+              children: "All"
+            }
+          ),
+          categoryChips.map((category) => /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: activeCategory === category ? "primary" : "neutral",
+              size: "sm",
+              role: "button",
+              tabIndex: 0,
+              "aria-pressed": activeCategory === category,
+              className: "cursor-pointer",
+              onClick: () => setActiveCategory(category),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setActiveCategory(category);
+                }
+              },
+              children: category
+            },
+            category
+          ))
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: gridRef,
+            role: "listbox",
+            className: "grid gap-1 overflow-y-auto max-h-64 p-1",
+            style: {
+              gridTemplateColumns: `repeat(auto-fill, minmax(${cellSize}px, 1fr))`
+            },
+            children: filtered.map((item, index) => {
+              const selected = item.id === value;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": selected,
+                  "aria-label": item.label,
+                  title: item.label,
+                  "data-gridpicker-cell": true,
+                  tabIndex: selected || value === void 0 && index === 0 ? 0 : -1,
+                  onClick: () => select(item),
+                  onKeyDown: (e) => handleKeyDown(e, index),
+                  className: cn(
+                    "flex items-center justify-center rounded-sm",
+                    "transition-colors hover:bg-muted",
+                    "focus:outline-none focus:ring-1 focus:ring-ring",
+                    selected && "bg-primary/10 ring-1 ring-primary"
+                  ),
+                  style: { width: cellSize, height: cellSize },
+                  children: renderThumbnail(item)
+                },
+                item.id
+              );
+            })
+          }
+        )
+      ] });
+    };
+    GridPicker.displayName = "GridPicker";
+  }
+});
+function iconForKind(kind) {
+  if (kind === "audio") return "music";
+  if (kind === "model") return "box";
+  return "file";
+}
+var THUMB_PX, IMAGE_KINDS, AssetPicker;
+var init_AssetPicker = __esm({
+  "components/core/molecules/AssetPicker.tsx"() {
+    "use client";
+    init_GridPicker();
+    init_Icon();
+    THUMB_PX = 32;
+    IMAGE_KINDS = /* @__PURE__ */ new Set([
+      "image",
+      "spritesheet",
+      "scene",
+      "portrait"
+    ]);
+    AssetPicker = ({
+      assets,
+      value,
+      onChange,
+      className
+    }) => {
+      const byUrl = useMemo(() => {
+        const map = /* @__PURE__ */ new Map();
+        for (const entry of assets) map.set(entry.url, entry);
+        return map;
+      }, [assets]);
+      const items = useMemo(
+        () => assets.map((entry) => ({
+          id: entry.url,
+          label: entry.name,
+          category: entry.category
+        })),
+        [assets]
+      );
+      const categories = useMemo(() => {
+        const seen = [];
+        for (const entry of assets) {
+          if (!seen.includes(entry.category)) seen.push(entry.category);
+        }
+        return seen;
+      }, [assets]);
+      const renderThumbnail = useCallback(
+        (item) => {
+          const entry = byUrl.get(item.id);
+          if (entry === void 0) return null;
+          if (IMAGE_KINDS.has(entry.kind)) {
+            return /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: entry.thumbnailUrl ?? entry.url,
+                alt: entry.name,
+                loading: "lazy",
+                width: THUMB_PX,
+                height: THUMB_PX,
+                style: { width: THUMB_PX, height: THUMB_PX, objectFit: "cover" }
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(Icon, { name: iconForKind(entry.kind), size: "sm" });
+        },
+        [byUrl]
+      );
+      return /* @__PURE__ */ jsx(
+        GridPicker,
+        {
+          items,
+          value,
+          onChange,
+          categories,
+          renderThumbnail,
+          cellSize: THUMB_PX,
+          className
+        }
+      );
+    };
+    AssetPicker.displayName = "AssetPicker";
+  }
+});
+function pascalToKebab(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+}
+function kebabToPascal3(name) {
+  return name.split("-").map((part) => /^\d+$/.test(part) ? part : part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+var ICON_ITEMS, IconPicker;
+var init_IconPicker = __esm({
+  "components/core/molecules/IconPicker.tsx"() {
+    "use client";
+    init_Icon();
+    init_GridPicker();
+    ICON_ITEMS = (() => {
+      const items = [];
+      for (const [exportName, candidate] of Object.entries(LucideIcons2)) {
+        if (!/^[A-Z]/.test(exportName)) continue;
+        if (exportName.endsWith("Icon")) continue;
+        if (exportName.startsWith("Lucide")) continue;
+        const isComponent = candidate !== null && (typeof candidate === "object" || typeof candidate === "function") && "$$typeof" in candidate;
+        if (!isComponent) continue;
+        const kebab = pascalToKebab(exportName);
+        if (kebabToPascal3(kebab) !== exportName) continue;
+        items.push({ id: kebab, label: kebab, category: "icons" });
+      }
+      return items;
+    })();
+    IconPicker = ({ value, onChange, className }) => {
+      const items = useMemo(() => ICON_ITEMS, []);
+      return /* @__PURE__ */ jsx(
+        GridPicker,
+        {
+          items,
+          value,
+          onChange,
+          searchPlaceholder: "Search icons\u2026",
+          renderThumbnail: (it) => /* @__PURE__ */ jsx(Icon, { name: it.id }),
+          cellSize: 32,
+          className
+        }
+      );
+    };
+    IconPicker.displayName = "IconPicker";
+  }
+});
 function toISODate(d) {
   return d.toISOString().slice(0, 10);
 }
@@ -25704,9 +26053,9 @@ function ScoreDisplay({
   ...rest
 }) {
   const resolvedValue = typeof value === "number" && !Number.isNaN(value) ? value : typeof rest.score === "number" && !Number.isNaN(rest.score) ? rest.score : 0;
-  const [displayValue, setDisplayValue] = React80.useState(resolvedValue);
-  const [isAnimating, setIsAnimating] = React80.useState(false);
-  React80.useEffect(() => {
+  const [displayValue, setDisplayValue] = React81.useState(resolvedValue);
+  const [isAnimating, setIsAnimating] = React81.useState(false);
+  React81.useEffect(() => {
     if (!animated || displayValue === resolvedValue) {
       setDisplayValue(resolvedValue);
       return;
@@ -25853,7 +26202,7 @@ function InventoryGrid({
   const eventBus = useEventBus();
   const slotCount = totalSlots ?? items.length;
   const emptySlotCount = Math.max(0, slotCount - items.length);
-  const handleSelect = React80.useCallback(
+  const handleSelect = React81.useCallback(
     (id) => {
       onSelect?.(id);
       if (selectEvent) {
@@ -26139,31 +26488,31 @@ function GameCanvas2D({
   assetBaseUrl = "",
   className
 }) {
-  const canvasRef = React80.useRef(null);
-  const rafRef = React80.useRef(0);
-  const frameRef = React80.useRef(0);
-  const lastTimeRef = React80.useRef(0);
-  const imageCache = React80.useRef(/* @__PURE__ */ new Map());
+  const canvasRef = React81.useRef(null);
+  const rafRef = React81.useRef(0);
+  const frameRef = React81.useRef(0);
+  const lastTimeRef = React81.useRef(0);
+  const imageCache = React81.useRef(/* @__PURE__ */ new Map());
   const emit = useEmitEvent();
-  const onDrawRef = React80.useRef(onDraw);
+  const onDrawRef = React81.useRef(onDraw);
   onDrawRef.current = onDraw;
-  const onTickRef = React80.useRef(onTick);
+  const onTickRef = React81.useRef(onTick);
   onTickRef.current = onTick;
-  const tickEventRef = React80.useRef(tickEvent);
+  const tickEventRef = React81.useRef(tickEvent);
   tickEventRef.current = tickEvent;
-  const drawEventRef = React80.useRef(drawEvent);
+  const drawEventRef = React81.useRef(drawEvent);
   drawEventRef.current = drawEvent;
-  const emitRef = React80.useRef(emit);
+  const emitRef = React81.useRef(emit);
   emitRef.current = emit;
-  const assetBaseUrlRef = React80.useRef(assetBaseUrl);
+  const assetBaseUrlRef = React81.useRef(assetBaseUrl);
   assetBaseUrlRef.current = assetBaseUrl;
-  const backgroundImageRef = React80.useRef(backgroundImage);
+  const backgroundImageRef = React81.useRef(backgroundImage);
   backgroundImageRef.current = backgroundImage;
-  const widthRef = React80.useRef(width);
+  const widthRef = React81.useRef(width);
   widthRef.current = width;
-  const heightRef = React80.useRef(height);
+  const heightRef = React81.useRef(height);
   heightRef.current = height;
-  const loadImage = React80.useCallback((url) => {
+  const loadImage = React81.useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
@@ -26175,7 +26524,7 @@ function GameCanvas2D({
     }
     return null;
   }, []);
-  React80.useEffect(() => {
+  React81.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -26530,7 +26879,7 @@ function TurnPanel({
   className
 }) {
   const eventBus = useEventBus();
-  const handleAction = React80.useCallback(
+  const handleAction = React81.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { turn: currentTurn, phase, activeTeam });
@@ -26676,7 +27025,7 @@ function UnitCommandBar({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCommand = React80.useCallback(
+  const handleCommand = React81.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { unitId: selectedUnitId });
@@ -27161,7 +27510,7 @@ function GameMenu({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleOptionClick = React80.useCallback(
+  const handleOptionClick = React81.useCallback(
     (option) => {
       if (option.event && eventBus) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -27275,7 +27624,7 @@ function GameOverScreen({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleActionClick = React80.useCallback(
+  const handleActionClick = React81.useCallback(
     (action) => {
       if (action.event && eventBus) {
         eventBus.emit(`UI:${action.event}`, { action });
@@ -28291,7 +28640,7 @@ var init_StarRating = __esm({
                       name: "star",
                       className: cn(
                         styles.star,
-                        "text-muted",
+                        "text-muted-foreground",
                         "transition-colors duration-100"
                       ),
                       strokeWidth: 1.5
@@ -28774,8 +29123,8 @@ function TableView({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React80__default.useState(pageSize > 0 ? pageSize : Infinity);
-  const [localSelected, setLocalSelected] = React80__default.useState(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React81__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React81__default.useState(/* @__PURE__ */ new Set());
   const colDefs = columns ?? fields ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -28970,12 +29319,12 @@ function TableView({
         ]
       }
     );
-    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React80__default.Fragment, { children: rowInner }, id);
+    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React81__default.Fragment, { children: rowInner }, id);
   };
   const items = data.map((row) => row);
   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(React80__default.Fragment, { children: [
+  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React81__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)) });
@@ -30327,7 +30676,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(React80__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(React81__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" })
@@ -30338,7 +30687,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(React80__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(React81__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 }),
@@ -31314,7 +31663,7 @@ var init_LikertScale = __esm({
       md: "text-base",
       lg: "text-lg"
     };
-    LikertScale = React80__default.forwardRef(
+    LikertScale = React81__default.forwardRef(
       ({
         question,
         options = DEFAULT_LIKERT_OPTIONS,
@@ -31326,7 +31675,7 @@ var init_LikertScale = __esm({
         variant = "radios",
         className
       }, ref) => {
-        const groupId = React80__default.useId();
+        const groupId = React81__default.useId();
         const eventBus = useEventBus();
         const handleSelect = useCallback(
           (next) => {
@@ -32471,6 +32820,7 @@ function Editable({
 function BlockRow({
   block,
   readOnly,
+  showAffordances,
   placeholder,
   onUpdate,
   onDelete,
@@ -32689,7 +33039,7 @@ function BlockRow({
                     onValueChange: (next) => setChildContent(child.id, next)
                   }
                 ),
-                !readOnly && /* @__PURE__ */ jsx(
+                !readOnly && showAffordances && /* @__PURE__ */ jsx(
                   Button,
                   {
                     type: "button",
@@ -32704,7 +33054,7 @@ function BlockRow({
                   }
                 )
               ] }, child.id)),
-              !readOnly && /* @__PURE__ */ jsx(Box, { as: "li", className: "list-none pl-0", children: /* @__PURE__ */ jsxs(
+              !readOnly && showAffordances && /* @__PURE__ */ jsx(Box, { as: "li", className: "list-none pl-0", children: /* @__PURE__ */ jsxs(
                 Button,
                 {
                   type: "button",
@@ -32751,7 +33101,7 @@ function BlockRow({
       "data-block-id": block.id,
       "data-block-type": block.type,
       children: [
-        !readOnly && /* @__PURE__ */ jsxs(Box, { className: "flex w-12 shrink-0 items-center gap-0.5 pt-1", children: [
+        !readOnly && showAffordances && /* @__PURE__ */ jsxs(Box, { className: "flex w-12 shrink-0 items-center gap-0.5 pt-1", children: [
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -32850,6 +33200,7 @@ var init_RichBlockEditor = __esm({
       changeEvent,
       readOnly = false,
       placeholder,
+      enableBlocks = false,
       showToolbar = true,
       className
     }) => {
@@ -32921,7 +33272,7 @@ var init_RichBlockEditor = __esm({
           padding: "none",
           className: cn("flex flex-col", className),
           children: [
-            showToolbar && !readOnly && /* @__PURE__ */ jsx(
+            enableBlocks && showToolbar && !readOnly && /* @__PURE__ */ jsx(
               Box,
               {
                 role: "toolbar",
@@ -32957,6 +33308,7 @@ var init_RichBlockEditor = __esm({
               {
                 block,
                 readOnly,
+                showAffordances: enableBlocks,
                 placeholder,
                 onUpdate: (updater) => handleUpdate(block.id, updater),
                 onDelete: () => handleDelete(block.id),
@@ -33631,7 +33983,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(React80__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -34595,7 +34947,7 @@ var init_MiniStateMachine = __esm({
           const x = 2 + i * (NODE_W + GAP2 + ARROW_W + GAP2);
           const tc = transitionCounts[s.name] ?? 0;
           const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
-          return /* @__PURE__ */ jsxs(React80__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               AvlState,
               {
@@ -34799,7 +35151,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(React80__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(React81__default.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
           crumb.href ? /* @__PURE__ */ jsx(
             "a",
@@ -34908,7 +35260,7 @@ var init_FormSection = __esm({
       columns = 1,
       className
     }) => {
-      const [collapsed, setCollapsed] = React80__default.useState(defaultCollapsed);
+      const [collapsed, setCollapsed] = React81__default.useState(defaultCollapsed);
       const { t } = useTranslate();
       const eventBus = useEventBus();
       const gridClass = {
@@ -34916,7 +35268,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];
-      React80__default.useCallback(() => {
+      React81__default.useCallback(() => {
         if (collapsible) {
           setCollapsed((prev) => !prev);
           eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -35023,8 +35375,8 @@ function TextLikeControl({
   onCommit
 }) {
   const initial = value === void 0 || value === null ? "" : String(value);
-  const [draft, setDraft] = React80__default.useState(initial);
-  React80__default.useEffect(() => setDraft(initial), [initial]);
+  const [draft, setDraft] = React81__default.useState(initial);
+  React81__default.useEffect(() => setDraft(initial), [initial]);
   const commit = () => {
     if (numeric) {
       const n = draft.trim() === "" ? 0 : Number(draft);
@@ -35050,10 +35402,27 @@ function FieldControl({
   name,
   decl,
   value,
-  onChange
+  onChange,
+  assets
 }) {
   let control;
-  if (decl.type === "boolean") {
+  const stringValue = typeof value === "string" ? value : void 0;
+  if (decl.control === "icon") {
+    control = /* @__PURE__ */ jsx(IconPicker, { value: stringValue, onChange: (icon) => onChange(name, icon) });
+  } else if (decl.control === "asset" && assets !== void 0) {
+    control = /* @__PURE__ */ jsx(AssetPicker, { assets, value: stringValue, onChange: (url) => onChange(name, url) });
+  } else if (decl.control === "color" && decl.values !== void 0 && decl.values.length > 0) {
+    control = /* @__PURE__ */ jsx(
+      Select,
+      {
+        options: decl.values.map((v) => ({ value: v, label: v })),
+        value: stringValue ?? "",
+        onChange: (e) => onChange(name, e.target.value)
+      }
+    );
+  } else if (decl.control === "asset" || decl.control === "color") {
+    control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
+  } else if (decl.type === "boolean") {
     control = /* @__PURE__ */ jsx(Switch, { checked: value === true, onChange: (c) => onChange(name, c) });
   } else if (decl.type === "string" && decl.values !== void 0 && decl.values.length > 0) {
     control = /* @__PURE__ */ jsx(
@@ -35092,6 +35461,8 @@ var init_PropertyInspector = __esm({
     init_Select();
     init_Input();
     init_FormSection();
+    init_IconPicker();
+    init_AssetPicker();
     TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
     PropertyInspector = ({
       config,
@@ -35099,7 +35470,8 @@ var init_PropertyInspector = __esm({
       onChange,
       onReset,
       title,
-      className
+      className,
+      assets
     }) => {
       const fields = Object.entries(config);
       const byTier = /* @__PURE__ */ new Map();
@@ -35126,7 +35498,8 @@ var init_PropertyInspector = __esm({
             name,
             decl,
             value: currentValue(decl, values?.[name]),
-            onChange
+            onChange,
+            assets
           },
           name
         )) }) }, tier))
@@ -35784,7 +36157,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(React80__default.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -37034,6 +37407,9 @@ var init_molecules2 = __esm({
     init_ViolationAlert();
     init_FormSectionHeader();
     init_FlipCard();
+    init_GridPicker();
+    init_AssetPicker();
+    init_IconPicker();
     init_DateRangePicker();
     init_DateRangeSelector();
     init_ChartLegend();
@@ -38228,7 +38604,7 @@ var init_DialogueBubble = __esm({
   }
 });
 function extractTitle(children) {
-  if (!React80__default.isValidElement(children)) return void 0;
+  if (!React81__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -38340,7 +38716,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(React80__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -39298,12 +39674,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 = React80__default.useMemo(() => {
+      const normalizedInitialData = React81__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 = React80__default.useMemo(() => {
+      const entityDerivedFields = React81__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
         if (!resolvedEntity) return void 0;
         return resolvedEntity.fields.map(
@@ -39323,16 +39699,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] = React80__default.useState(
+      const [formData, setFormData] = React81__default.useState(
         normalizedInitialData
       );
-      const [collapsedSections, setCollapsedSections] = React80__default.useState(
+      const [collapsedSections, setCollapsedSections] = React81__default.useState(
         /* @__PURE__ */ new Set()
       );
-      const [submitError, setSubmitError] = React80__default.useState(null);
-      const formRef = React80__default.useRef(null);
+      const [submitError, setSubmitError] = React81__default.useState(null);
+      const formRef = React81__default.useRef(null);
       const formMode = props.mode;
-      const mountedRef = React80__default.useRef(false);
+      const mountedRef = React81__default.useRef(false);
       if (!mountedRef.current) {
         mountedRef.current = true;
         debug("forms", "mount", {
@@ -39345,7 +39721,7 @@ var init_Form = __esm({
         });
       }
       const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-      const evalContext = React80__default.useMemo(
+      const evalContext = React81__default.useMemo(
         () => ({
           formValues: formData,
           globalVariables: externalContext?.globalVariables ?? {},
@@ -39354,7 +39730,7 @@ var init_Form = __esm({
         }),
         [formData, externalContext]
       );
-      React80__default.useEffect(() => {
+      React81__default.useEffect(() => {
         debug("forms", "initialData-sync", {
           mode: formMode,
           normalizedInitialData,
@@ -39365,7 +39741,7 @@ var init_Form = __esm({
           setFormData(normalizedInitialData);
         }
       }, [normalizedInitialData]);
-      const processCalculations = React80__default.useCallback(
+      const processCalculations = React81__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!hiddenCalculations.length) return;
           const context = {
@@ -39390,7 +39766,7 @@ var init_Form = __esm({
         },
         [hiddenCalculations, externalContext, eventBus]
       );
-      const checkViolations = React80__default.useCallback(
+      const checkViolations = React81__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!violationTriggers.length) return;
           const context = {
@@ -39428,7 +39804,7 @@ var init_Form = __esm({
         processCalculations(name, newFormData);
         checkViolations(name, newFormData);
       };
-      const isFieldVisible = React80__default.useCallback(
+      const isFieldVisible = React81__default.useCallback(
         (fieldName) => {
           const condition = conditionalFields[fieldName];
           if (!condition) return true;
@@ -39436,7 +39812,7 @@ var init_Form = __esm({
         },
         [conditionalFields, evalContext]
       );
-      const isSectionVisible = React80__default.useCallback(
+      const isSectionVisible = React81__default.useCallback(
         (section) => {
           if (!section.condition) return true;
           return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -39512,7 +39888,7 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onCancel}`);
         }
       };
-      const renderField = React80__default.useCallback(
+      const renderField = React81__default.useCallback(
         (field) => {
           const fieldName = field.name || field.field;
           if (!fieldName) return null;
@@ -39533,7 +39909,7 @@ var init_Form = __esm({
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
       const effectiveFields = entityDerivedFields ?? fields;
-      const normalizedFields = React80__default.useMemo(() => {
+      const normalizedFields = React81__default.useMemo(() => {
         if (!effectiveFields || effectiveFields.length === 0) return [];
         return effectiveFields.map((field) => {
           if (typeof field === "string") {
@@ -39556,7 +39932,7 @@ var init_Form = __esm({
           return field;
         });
       }, [effectiveFields, resolvedEntity]);
-      const schemaFields = React80__default.useMemo(() => {
+      const schemaFields = React81__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
           debugGroup(`Form: ${entityName || "unknown"}`);
@@ -39566,7 +39942,7 @@ var init_Form = __esm({
         }
         return normalizedFields.map(renderField).filter(Boolean);
       }, [normalizedFields, renderField, entityName, conditionalFields]);
-      const sectionElements = React80__default.useMemo(() => {
+      const sectionElements = React81__default.useMemo(() => {
         if (!sections || sections.length === 0) return null;
         return sections.map((section) => {
           if (!isSectionVisible(section)) {
@@ -40848,7 +41224,7 @@ var init_List = __esm({
         if (entity && typeof entity === "object" && "id" in entity) return [entity];
         return [];
       }, [entity]);
-      const getItemActions = React80__default.useCallback(
+      const getItemActions = React81__default.useCallback(
         (item) => {
           if (!itemActions) return [];
           if (typeof itemActions === "function") {
@@ -41324,7 +41700,7 @@ var init_MediaGallery = __esm({
         [selectable, selectedItems, selectionEvent, eventBus]
       );
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React80__default.useMemo(() => {
+      const items = React81__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => ({
@@ -41494,9 +41870,9 @@ function MiniMap({
   viewportRect,
   className
 }) {
-  const canvasRef = React80.useRef(null);
-  const frameRef = React80.useRef(0);
-  React80.useEffect(() => {
+  const canvasRef = React81.useRef(null);
+  const frameRef = React81.useRef(0);
+  React81.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -41578,7 +41954,7 @@ var init_MiniMap = __esm({
   }
 });
 function extractTitle2(children) {
-  if (!React80__default.isValidElement(children)) return void 0;
+  if (!React81__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -42035,7 +42411,7 @@ var init_debugRegistry = __esm({
   }
 });
 function useDebugData() {
-  const [data, setData] = React80.useState(() => ({
+  const [data, setData] = React81.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -42049,7 +42425,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React80.useEffect(() => {
+  React81.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -42158,12 +42534,12 @@ function layoutGraph(states, transitions, initialState, width, height) {
   return positions;
 }
 function WalkMinimap() {
-  const [walkStep, setWalkStep] = React80.useState(null);
-  const [traits2, setTraits] = React80.useState([]);
-  const [coveredEdges, setCoveredEdges] = React80.useState([]);
-  const [completedTraits, setCompletedTraits] = React80.useState(/* @__PURE__ */ new Set());
-  const prevTraitRef = React80.useRef(null);
-  React80.useEffect(() => {
+  const [walkStep, setWalkStep] = React81.useState(null);
+  const [traits2, setTraits] = React81.useState([]);
+  const [coveredEdges, setCoveredEdges] = React81.useState([]);
+  const [completedTraits, setCompletedTraits] = React81.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React81.useRef(null);
+  React81.useEffect(() => {
     const interval = setInterval(() => {
       const w = window;
       const step = w.__orbitalWalkStep;
@@ -42599,15 +42975,15 @@ var init_EntitiesTab = __esm({
 });
 function EventFlowTab({ events: events2 }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React80.useState("all");
-  const containerRef = React80.useRef(null);
-  const [autoScroll, setAutoScroll] = React80.useState(true);
-  React80.useEffect(() => {
+  const [filter, setFilter] = React81.useState("all");
+  const containerRef = React81.useRef(null);
+  const [autoScroll, setAutoScroll] = React81.useState(true);
+  React81.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React80.useMemo(() => {
+  const filteredEvents = React81.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -42723,7 +43099,7 @@ var init_EventFlowTab = __esm({
 });
 function GuardsPanel({ guards }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React80.useState("all");
+  const [filter, setFilter] = React81.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -42736,7 +43112,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React80.useMemo(() => {
+  const filteredGuards = React81.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -42899,10 +43275,10 @@ function EffectBadge({ effect }) {
 }
 function TransitionTimeline({ transitions }) {
   const { t } = useTranslate();
-  const containerRef = React80.useRef(null);
-  const [autoScroll, setAutoScroll] = React80.useState(true);
-  const [expandedId, setExpandedId] = React80.useState(null);
-  React80.useEffect(() => {
+  const containerRef = React81.useRef(null);
+  const [autoScroll, setAutoScroll] = React81.useState(true);
+  const [expandedId, setExpandedId] = React81.useState(null);
+  React81.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -43182,9 +43558,9 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log8, setLog] = React80.useState([]);
-  const prevStatesRef = React80.useRef(/* @__PURE__ */ new Map());
-  React80.useEffect(() => {
+  const [log8, setLog] = React81.useState([]);
+  const prevStatesRef = React81.useRef(/* @__PURE__ */ new Map());
+  React81.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -43353,10 +43729,10 @@ function VerifyModePanel({
   localCount
 }) {
   const { t } = useTranslate();
-  const [expanded, setExpanded] = React80.useState(true);
-  const scrollRef = React80.useRef(null);
-  const prevCountRef = React80.useRef(0);
-  React80.useEffect(() => {
+  const [expanded, setExpanded] = React81.useState(true);
+  const scrollRef = React81.useRef(null);
+  const prevCountRef = React81.useRef(0);
+  React81.useEffect(() => {
     if (expanded && transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -43413,10 +43789,10 @@ function RuntimeDebugger({
   schema
 }) {
   const { t } = useTranslate();
-  const [isCollapsed, setIsCollapsed] = React80.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React80.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React81.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React81.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React80.useEffect(() => {
+  React81.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -43425,7 +43801,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React80.useEffect(() => {
+  React81.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -43440,7 +43816,7 @@ function RuntimeDebugger({
   if (!isVisible) {
     return null;
   }
-  const positionClasses3 = {
+  const positionClasses = {
     "bottom-right": "bottom-4 right-4",
     "bottom-left": "bottom-4 left-4",
     "top-right": "top-4 right-4",
@@ -43569,7 +43945,7 @@ function RuntimeDebugger({
       className: cn(
         "runtime-debugger",
         "fixed",
-        positionClasses3[position],
+        positionClasses[position],
         isCollapsed ? "runtime-debugger--collapsed" : "runtime-debugger--expanded",
         className
       ),
@@ -43874,7 +44250,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(React80__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -44964,7 +45340,7 @@ var init_StatCard = __esm({
       const labelToUse = propLabel ?? propTitle;
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleActionClick = React80__default.useCallback(() => {
+      const handleActionClick = React81__default.useCallback(() => {
         if (action?.event) {
           eventBus.emit(`UI:${action.event}`, {});
         }
@@ -44975,7 +45351,7 @@ var init_StatCard = __esm({
       const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
       const isLoading = externalLoading ?? false;
       const error = externalError;
-      const computeMetricValue = React80__default.useCallback(
+      const computeMetricValue = React81__default.useCallback(
         (metric, items) => {
           if (metric.value !== void 0) {
             return metric.value;
@@ -45014,7 +45390,7 @@ var init_StatCard = __esm({
         },
         []
       );
-      const schemaStats = React80__default.useMemo(() => {
+      const schemaStats = React81__default.useMemo(() => {
         if (!metrics || metrics.length === 0) return null;
         return metrics.map((metric) => ({
           label: metric.label,
@@ -45022,7 +45398,7 @@ var init_StatCard = __esm({
           format: metric.format
         }));
       }, [metrics, data, computeMetricValue]);
-      const calculatedTrend = React80__default.useMemo(() => {
+      const calculatedTrend = React81__default.useMemo(() => {
         if (manualTrend !== void 0) return manualTrend;
         if (previousValue === void 0 || currentValue2 === void 0)
           return void 0;
@@ -46027,7 +46403,7 @@ var init_Timeline = __esm({
     }) => {
       const { t } = useTranslate();
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React80__default.useMemo(() => {
+      const items = React81__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -46184,7 +46560,7 @@ var init_TimerDisplay = __esm({
   }
 });
 function extractToastProps(children) {
-  if (!React80__default.isValidElement(children)) {
+  if (!React81__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -46222,7 +46598,7 @@ var init_ToastSlot = __esm({
         eventBus.emit("UI:CLOSE");
       };
       if (!isVisible) return null;
-      const isCustomContent = React80__default.isValidElement(children) && !message;
+      const isCustomContent = React81__default.isValidElement(children) && !message;
       return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
         Toast,
         {
@@ -46742,13 +47118,22 @@ function XPBar({
 }) {
   const sizes = sizeMap18[size];
   const percentage = max > 0 ? Math.max(0, Math.min(100, current / max * 100)) : 0;
+  const [fillWidth, setFillWidth] = React81.useState(animated ? 0 : percentage);
+  React81.useEffect(() => {
+    if (!animated) {
+      setFillWidth(percentage);
+      return;
+    }
+    const frame = requestAnimationFrame(() => setFillWidth(percentage));
+    return () => cancelAnimationFrame(frame);
+  }, [animated, percentage]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
     level != null && /* @__PURE__ */ jsxs(
       "span",
       {
         className: cn(
           "flex-shrink-0 rounded-interactive font-bold",
-          "bg-accent text-foreground border border-accent",
+          "bg-accent text-accent-foreground border border-accent",
           sizes.badge
         ),
         children: [
@@ -46773,7 +47158,7 @@ function XPBar({
                 "bg-gradient-to-r from-accent to-info",
                 animated && "transition-all duration-500 ease-out"
               ),
-              style: { width: `${percentage}%` }
+              style: { width: `${fillWidth}%` }
             }
           )
         }
@@ -46790,6 +47175,7 @@ function XPBar({
 var sizeMap18;
 var init_XPBar = __esm({
   "components/game/atoms/XPBar.tsx"() {
+    "use client";
     init_cn();
     sizeMap18 = {
       sm: { bar: "h-2", text: "text-xs", badge: "text-xs px-1.5 py-0.5" },
@@ -46800,12 +47186,12 @@ var init_XPBar = __esm({
   }
 });
 function lazyThree(name, loader) {
-  const Lazy = React80__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  const Lazy = React81__default.lazy(() => loader().then((m) => ({ default: m[name] })));
   function ThreeWrapper(props) {
-    return React80__default.createElement(
-      React80__default.Suspense,
+    return React81__default.createElement(
+      React81__default.Suspense,
       { fallback: null },
-      React80__default.createElement(Lazy, props)
+      React81__default.createElement(Lazy, props)
     );
   }
   ThreeWrapper.displayName = `Lazy(${name})`;
@@ -47421,7 +47807,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React80__default.createElement(
+  return React81__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -47496,6 +47882,9 @@ function renderContainedPortal(t, slot, content, onDismiss) {
   const slotId = `slot-${slot}`;
   switch (slot) {
     case "modal":
+      if (SELF_OVERLAY_PATTERNS.has(content.pattern)) {
+        return /* @__PURE__ */ jsx(Box, { id: slotId, className: "contents", children: slotContent });
+      }
       return /* @__PURE__ */ jsx(
         Box,
         {
@@ -47757,8 +48146,8 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   const slotId = `slot-${slot}`;
   let wrapper;
   switch (slot) {
-    case "modal":
-      wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsx(
+    case "modal": {
+      const innerContent = /* @__PURE__ */ jsx(
         Box,
         {
           id: slotId,
@@ -47767,8 +48156,10 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
           "data-source-trait": sourceTrait,
           children
         }
-      ) });
+      );
+      wrapper = pattern !== void 0 && SELF_OVERLAY_PATTERNS.has(pattern) ? innerContent : /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: innerContent });
       break;
+    }
     case "drawer":
       wrapper = /* @__PURE__ */ jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsx(
         Box,
@@ -47826,7 +48217,7 @@ function SlotPortal({
   let wrapper;
   switch (slot) {
     case "modal":
-      wrapper = /* @__PURE__ */ jsx(
+      wrapper = SELF_OVERLAY_PATTERNS.has(content.pattern) ? /* @__PURE__ */ jsx(Box, { id: slotId, children: slotContent }) : /* @__PURE__ */ jsx(
         Modal,
         {
           isOpen: true,
@@ -47906,7 +48297,7 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
         const key = `${parentId}-${index}-trait:${traitName}`;
         return /* @__PURE__ */ jsx(TraitFrame, { traitName }, key);
       }
-      return /* @__PURE__ */ jsx(React80__default.Fragment, { children: child }, `${parentId}-${index}`);
+      return /* @__PURE__ */ jsx(React81__default.Fragment, { children: child }, `${parentId}-${index}`);
     }
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
@@ -47946,14 +48337,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 (React80__default.isValidElement(value)) return false;
+  if (React81__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";
 }
 function isPlainConfigObject(value) {
-  if (React80__default.isValidElement(value)) return false;
+  if (React81__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
@@ -48206,7 +48597,7 @@ function UISlotRenderer({
   }
   return wrapped;
 }
-var scopeWrapLog, TRAIT_BINDING_RE, SuspenseConfigContext, SlotContainedContext, SLOT_SKELETON_MAP, FORM_PATTERNS, PATTERNS_WITH_CHILDREN;
+var scopeWrapLog, TRAIT_BINDING_RE, SuspenseConfigContext, SlotContainedContext, SLOT_SKELETON_MAP, FORM_PATTERNS, SELF_OVERLAY_PATTERNS, PATTERNS_WITH_CHILDREN;
 var init_UISlotRenderer = __esm({
   "components/core/organisms/UISlotRenderer.tsx"() {
     "use client";
@@ -48242,6 +48633,7 @@ var init_UISlotRenderer = __esm({
       "inline-edit-form",
       "wizard-step"
     ]);
+    SELF_OVERLAY_PATTERNS = /* @__PURE__ */ new Set(["modal", "confirm-dialog"]);
     PATTERNS_WITH_CHILDREN = /* @__PURE__ */ new Set([
       "stack",
       "vstack",
@@ -49563,4 +49955,4 @@ init_AboutPageTemplate();
 // components/index.ts
 init_cn();
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };
+export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };