@almadar/ui 5.121.4 → 5.122.1

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React73 from 'react';
-import React73__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, Suspense, lazy, useSyncExternalStore, useLayoutEffect, useId } from 'react';
+import * as React74 from 'react';
+import React74__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, Suspense, lazy, useSyncExternalStore, useLayoutEffect, useId } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScopeChain, useCurrentPagePath, useGameAudioContextOptional, useEntitySchemaOptional, TraitScopeProvider } from '@almadar/ui/providers';
@@ -230,7 +230,7 @@ var init_SvgFlow = __esm({
       width = 100,
       height = 100
     }) => {
-      const markerId = React73__default.useMemo(() => {
+      const markerId = React74__default.useMemo(() => {
         flowIdCounter += 1;
         return `almadar-flow-arrow-${flowIdCounter}`;
       }, []);
@@ -823,7 +823,7 @@ var init_SvgRing = __esm({
       width = 100,
       height = 100
     }) => {
-      const gradientId = React73__default.useMemo(() => {
+      const gradientId = React74__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
@@ -1365,7 +1365,7 @@ var init_Icon = __esm({
       const effectiveName = typeof icon === "string" && icon !== "" ? icon : name;
       const effectiveStrokeWidth = strokeWidth != null && strokeWidth > 0 ? strokeWidth : void 0;
       const family = useIconFamily();
-      const RenderedComponent = React73__default.useMemo(() => {
+      const RenderedComponent = React74__default.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName) : null;
       }, [directIcon, effectiveName, family]);
@@ -1485,7 +1485,7 @@ var init_atlasSlice = __esm({
   }
 });
 function useAtlasSliceDataUrl(asset) {
-  const [, bump] = React73.useReducer((x) => x + 1, 0);
+  const [, bump] = React74.useReducer((x) => x + 1, 0);
   if (!isAtlasAsset(asset)) return void 0;
   const key = `${asset.atlas}#${asset.sprite}`;
   const cached = sliceDataUrlCache.get(key);
@@ -1548,13 +1548,13 @@ function AtlasImage({
   style,
   "aria-hidden": ariaHidden
 }) {
-  const [, bump] = React73.useReducer((x) => x + 1, 0);
-  const canvasRef = React73.useRef(null);
+  const [, bump] = React74.useReducer((x) => x + 1, 0);
+  const canvasRef = React74.useRef(null);
   const sliced = isAtlasAsset(asset);
   const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
   const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
   const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || !img || !rect) return;
     canvas.width = rect.sw;
@@ -1630,7 +1630,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React73__default.isValidElement(value)) {
+  if (React74__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -1707,7 +1707,7 @@ var init_Button = __esm({
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    Button = React73__default.forwardRef(
+    Button = React74__default.forwardRef(
       ({
         className,
         variant = "primary",
@@ -1749,7 +1749,8 @@ var init_Button = __esm({
               "font-medium",
               "rounded-sm",
               "cursor-pointer",
-              "transition-all duration-[var(--transition-normal)]",
+              "chrome-button",
+              "transition-all duration-normal",
               "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               variantStyles[variant],
@@ -1777,7 +1778,7 @@ var init_Input = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Input = React73__default.forwardRef(
+    Input = React74__default.forwardRef(
       ({
         className,
         inputType,
@@ -1812,7 +1813,7 @@ var init_Input = __esm({
         const showClearButton = clearable && value && String(value).length > 0;
         const isMultiline = type === "textarea";
         const baseClassName = cn(
-          "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
+          "block w-full rounded-sm transition-all duration-fast",
           "border-[length:var(--border-width-thin)] border-border",
           isMultiline ? "px-3 py-2 text-sm" : "h-input-md px-3 text-sm",
           "bg-card hover:bg-muted focus:bg-card",
@@ -1945,7 +1946,7 @@ var Label;
 var init_Label = __esm({
   "components/core/atoms/Label.tsx"() {
     init_cn();
-    Label = React73__default.forwardRef(
+    Label = React74__default.forwardRef(
       ({ className, required, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "label",
@@ -1972,7 +1973,7 @@ var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
     init_useEventBus();
-    Textarea = React73__default.forwardRef(
+    Textarea = React74__default.forwardRef(
       ({ className, error, onChange, ...props }, ref) => {
         const eventBus = useEventBus();
         const handleChange = (e) => {
@@ -2211,7 +2212,7 @@ var init_Select = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Select = React73__default.forwardRef(
+    Select = React74__default.forwardRef(
       (props, _ref) => {
         const { multiple, searchable, clearable } = props;
         if (multiple || searchable || clearable) {
@@ -2228,7 +2229,7 @@ var init_Checkbox = __esm({
   "components/core/atoms/Checkbox.tsx"() {
     init_cn();
     init_useEventBus();
-    Checkbox = React73__default.forwardRef(
+    Checkbox = React74__default.forwardRef(
       ({ className, label, id, onChange, ...props }, ref) => {
         const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
         const eventBus = useEventBus();
@@ -2282,7 +2283,7 @@ var init_Spinner = __esm({
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
-    Spinner = React73__default.forwardRef(
+    Spinner = React74__default.forwardRef(
       ({ className, size = "md", overlay, ...props }, ref) => {
         if (overlay) {
           return /* @__PURE__ */ jsx(
@@ -2324,21 +2325,21 @@ var init_Card = __esm({
         "bg-card",
         "border-[length:var(--border-width)] border-border",
         "shadow-elevation-card",
-        "transition-all duration-[var(--transition-normal)]",
+        "transition-all duration-normal",
         "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       bordered: [
         "bg-card",
         "border-[length:var(--border-width)] border-border",
         "shadow-elevation-card",
-        "transition-all duration-[var(--transition-normal)]",
+        "transition-all duration-normal",
         "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       elevated: [
         "bg-card",
         "border-[length:var(--border-width)] border-border",
         "shadow",
-        "transition-all duration-[var(--transition-normal)]",
+        "transition-all duration-normal",
         "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       // Interactive variant with theme-specific hover effects
@@ -2347,7 +2348,7 @@ var init_Card = __esm({
         "border-[length:var(--border-width)] border-border",
         "shadow",
         "cursor-pointer",
-        "transition-all duration-[var(--transition-normal)]",
+        "transition-all duration-normal",
         "hover:shadow-elevation-dialog"
       ].join(" ")
     };
@@ -2372,7 +2373,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 = React73__default.forwardRef(
+    Card = React74__default.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -2398,7 +2399,8 @@ var init_Card = __esm({
             ref,
             className: cn(
               "rounded-container relative",
-              "transition-all duration-[var(--transition-normal)]",
+              "transition-all duration-normal",
+              "chrome-panel",
               variantStyles2[variant],
               paddingStyles[padding],
               lookStyles[look],
@@ -2420,9 +2422,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React73__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React74__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React73__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React74__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -2435,11 +2437,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React73__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React74__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React73__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React74__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -2493,7 +2495,7 @@ var init_Badge = __esm({
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React73__default.forwardRef(
+    Badge = React74__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = {
           sm: "h-icon-default w-icon-default",
@@ -2619,7 +2621,7 @@ var init_FilterPill = __esm({
       md: "w-3.5 h-3.5",
       lg: "w-4 h-4"
     };
-    FilterPill = React73__default.forwardRef(
+    FilterPill = React74__default.forwardRef(
       ({
         className,
         variant = "default",
@@ -2748,8 +2750,8 @@ var init_Avatar = __esm({
       actionPayload
     }) => {
       const eventBus = useEventBus();
-      const [imgFailed, setImgFailed] = React73__default.useState(false);
-      React73__default.useEffect(() => {
+      const [imgFailed, setImgFailed] = React74__default.useState(false);
+      React74__default.useEffect(() => {
         setImgFailed(false);
       }, [src]);
       const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -3001,7 +3003,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React73__default.forwardRef(
+    Box = React74__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -3066,7 +3068,7 @@ var init_Box = __esm({
           onPointerDown?.(e);
         }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
         const isClickable = action || onClick;
-        return React73__default.createElement(
+        return React74__default.createElement(
           Component,
           {
             ref,
@@ -3120,7 +3122,7 @@ var init_Center = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = minHeight ? { minHeight, ...style } : style;
-      return React73__default.createElement(Component, {
+      return React74__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           horizontal && "justify-center",
@@ -3388,7 +3390,7 @@ var init_Radio = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    Radio = React73__default.forwardRef(
+    Radio = React74__default.forwardRef(
       ({
         label,
         helperText,
@@ -3405,12 +3407,12 @@ var init_Radio = __esm({
         onChange,
         ...props
       }, ref) => {
-        const reactId = React73__default.useId();
+        const reactId = React74__default.useId();
         const baseId = id || `radio-${reactId}`;
         const hasError = !!error;
         const eventBus = useEventBus();
-        const [selected, setSelected] = React73__default.useState(value);
-        React73__default.useEffect(() => {
+        const [selected, setSelected] = React74__default.useState(value);
+        React74__default.useEffect(() => {
           if (value !== void 0) setSelected(value);
         }, [value]);
         const pick = (next, e) => {
@@ -3592,7 +3594,7 @@ var init_Switch = __esm({
   "components/core/atoms/Switch.tsx"() {
     "use client";
     init_cn();
-    Switch = React73.forwardRef(
+    Switch = React74.forwardRef(
       ({
         checked,
         defaultChecked = false,
@@ -3603,10 +3605,10 @@ var init_Switch = __esm({
         name,
         className
       }, ref) => {
-        const [isChecked, setIsChecked] = React73.useState(
+        const [isChecked, setIsChecked] = React74.useState(
           checked !== void 0 ? checked : defaultChecked
         );
-        React73.useEffect(() => {
+        React74.useEffect(() => {
           if (checked !== void 0) {
             setIsChecked(checked);
           }
@@ -3637,7 +3639,7 @@ var init_Switch = __esm({
                 // redefine --space-11 to 68px, which makes w-11 enormous and leaves
                 // the thumb stuck near the left edge. The switch geometry must stay
                 // proportional regardless of a theme's density scale.
-                "relative inline-flex h-[1.5rem] w-[2.75rem] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+                "relative inline-flex h-[1.5rem] w-[2.75rem] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                 isChecked ? "bg-primary" : "bg-muted",
                 disabled && "cursor-not-allowed opacity-50"
@@ -3646,7 +3648,7 @@ var init_Switch = __esm({
                 "span",
                 {
                   className: cn(
-                    "pointer-events-none block h-[1.25rem] w-[1.25rem] rounded-full bg-background shadow-lg ring-0 transition-transform",
+                    "pointer-events-none block h-[1.25rem] w-[1.25rem] rounded-full bg-background shadow-lg ring-0 transition-transform duration-fast",
                     isChecked ? "translate-x-[1.25rem]" : "translate-x-0"
                   )
                 }
@@ -3769,7 +3771,7 @@ var init_Stack = __esm({
       };
       const isHorizontal = direction === "horizontal";
       const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-      return React73__default.createElement(
+      return React74__default.createElement(
         Component,
         {
           className: cn(
@@ -3814,7 +3816,7 @@ var init_TextHighlight = __esm({
       hoverEvent
     }) => {
       const eventBus = useEventBus();
-      const baseStyles = "cursor-pointer transition-all duration-150";
+      const baseStyles = "cursor-pointer transition-all duration-fast";
       const typeStyles = {
         question: cn(
           // Blue border for questions
@@ -3965,7 +3967,7 @@ var init_Typography = __esm({
     }) => {
       const variant = variantProp ?? (level ? `h${level}` : "body1");
       const Component = as || defaultElements[variant];
-      return React73__default.createElement(
+      return React74__default.createElement(
         Component,
         {
           id,
@@ -4048,12 +4050,84 @@ var init_ThemeToggle = __esm({
     ThemeToggle.displayName = "ThemeToggle";
   }
 });
+function isMotionEnabled() {
+  if (typeof document === "undefined") return true;
+  if (motionEnabledCache !== null) return motionEnabledCache;
+  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
+  motionEnabledCache = v !== "off";
+  return motionEnabledCache;
+}
+function usePresence(show, opts) {
+  const { animation, animate = true, onExited } = opts;
+  const [mounted, setMounted] = useState(show);
+  const [exiting, setExiting] = useState(false);
+  const prev = useRef(show);
+  const onExitedRef = useRef(onExited);
+  onExitedRef.current = onExited;
+  const safeTimer = useRef(null);
+  const clearSafe = useCallback(() => {
+    if (safeTimer.current) {
+      clearTimeout(safeTimer.current);
+      safeTimer.current = null;
+    }
+  }, []);
+  const finishExit = useCallback(() => {
+    clearSafe();
+    setExiting(false);
+    setMounted(false);
+    onExitedRef.current?.();
+  }, [clearSafe]);
+  useEffect(() => {
+    const moving = animate && isMotionEnabled();
+    if (show && !prev.current) {
+      setExiting(false);
+      setMounted(true);
+    } else if (!show && prev.current) {
+      if (moving) {
+        setExiting(true);
+        clearSafe();
+        safeTimer.current = setTimeout(finishExit, SAFE_EXIT_MS);
+      } else {
+        setMounted(false);
+        setExiting(false);
+      }
+    }
+    prev.current = show;
+  }, [show, animate, clearSafe, finishExit]);
+  useEffect(() => () => clearSafe(), [clearSafe]);
+  const disabled = !animate || !isMotionEnabled();
+  const className = disabled ? "" : exiting ? `animate-${animation}-out` : `animate-${animation}-in`;
+  const onAnimationEnd = useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (exiting) finishExit();
+    },
+    [exiting, finishExit]
+  );
+  return { mounted, exiting, className, onAnimationEnd };
+}
+var SAFE_EXIT_MS, motionEnabledCache, Presence;
+var init_Presence = __esm({
+  "components/core/atoms/Presence.tsx"() {
+    "use client";
+    init_cn();
+    SAFE_EXIT_MS = 1e3;
+    motionEnabledCache = null;
+    Presence = ({ show, className, children, ...opts }) => {
+      const { mounted, className: animClass, onAnimationEnd } = usePresence(show, opts);
+      if (!mounted) return null;
+      return /* @__PURE__ */ jsx("div", { className: cn(animClass, className), onAnimationEnd, children });
+    };
+    Presence.displayName = "Presence";
+  }
+});
 var Overlay;
 var init_Overlay = __esm({
   "components/core/atoms/Overlay.tsx"() {
     "use client";
     init_cn();
     init_useEventBus();
+    init_Presence();
     Overlay = ({
       isVisible = true,
       onClick,
@@ -4062,7 +4136,8 @@ var init_Overlay = __esm({
       action
     }) => {
       const eventBus = useEventBus();
-      if (!isVisible) return null;
+      const { mounted, className: animClass, onAnimationEnd } = usePresence(isVisible, { animation: "overlay" });
+      if (!mounted) return null;
       const handleClick = (e) => {
         if (action) {
           eventBus.emit(`UI:${action}`, {});
@@ -4075,11 +4150,12 @@ var init_Overlay = __esm({
           className: cn(
             "fixed inset-0 z-40",
             blur && "backdrop-blur-sm",
-            "animate-overlay-in",
+            animClass,
             className
           ),
           style: { backgroundColor: "rgba(0, 0, 0, 0.6)" },
           onClick: action || onClick ? handleClick : void 0,
+          onAnimationEnd,
           "aria-hidden": "true"
         }
       );
@@ -4125,7 +4201,7 @@ var Dialog;
 var init_Dialog = __esm({
   "components/core/atoms/Dialog.tsx"() {
     init_cn();
-    Dialog = React73__default.forwardRef(
+    Dialog = React74__default.forwardRef(
       ({
         role = "dialog",
         "aria-modal": ariaModal = true,
@@ -4151,7 +4227,7 @@ var Aside;
 var init_Aside = __esm({
   "components/core/atoms/Aside.tsx"() {
     init_cn();
-    Aside = React73__default.forwardRef(
+    Aside = React74__default.forwardRef(
       ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn(className), ...rest, children })
     );
     Aside.displayName = "Aside";
@@ -4230,9 +4306,9 @@ var init_LawReferenceTooltip = __esm({
       className
     }) => {
       const { t } = useTranslate();
-      const [isVisible, setIsVisible] = React73__default.useState(false);
-      const timeoutRef = React73__default.useRef(null);
-      const triggerRef = React73__default.useRef(null);
+      const [isVisible, setIsVisible] = React74__default.useState(false);
+      const timeoutRef = React74__default.useRef(null);
+      const triggerRef = React74__default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -4243,7 +4319,7 @@ var init_LawReferenceTooltip = __esm({
       };
       const { revealed, triggerProps } = useTapReveal({ refs: [triggerRef] });
       const open = isVisible || revealed;
-      React73__default.useEffect(() => {
+      React74__default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
         };
@@ -4453,7 +4529,7 @@ var init_StatusDot = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    StatusDot = React73__default.forwardRef(
+    StatusDot = React74__default.forwardRef(
       ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "span",
@@ -4507,7 +4583,7 @@ var init_TrendIndicator = __esm({
       down: "trending-down",
       flat: "arrow-right"
     };
-    TrendIndicator = React73__default.forwardRef(
+    TrendIndicator = React74__default.forwardRef(
       ({
         className,
         value,
@@ -4574,7 +4650,7 @@ var init_RangeSlider = __esm({
       md: "w-4 h-4",
       lg: "w-5 h-5"
     };
-    RangeSlider = React73__default.forwardRef(
+    RangeSlider = React74__default.forwardRef(
       ({
         className,
         min = 0,
@@ -4717,7 +4793,7 @@ var init_RangeSlider = __esm({
                       "border-2 border-primary",
                       "shadow-sm",
                       "pointer-events-none",
-                      "transition-transform duration-100",
+                      "transition-transform duration-instant",
                       isDragging && "scale-[var(--hover-scale)]",
                       thumbSizes[size]
                     ),
@@ -5185,7 +5261,7 @@ var init_ContentSection = __esm({
       md: "py-16",
       lg: "py-24"
     };
-    ContentSection = React73__default.forwardRef(
+    ContentSection = React74__default.forwardRef(
       ({ children, background = "default", padding = "lg", id, className }, ref) => {
         return /* @__PURE__ */ jsx(
           Box,
@@ -5719,7 +5795,7 @@ var init_AnimatedReveal = __esm({
       "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
       "none": {}
     };
-    AnimatedReveal = React73__default.forwardRef(
+    AnimatedReveal = React74__default.forwardRef(
       ({
         trigger = "scroll",
         animation = "fade-up",
@@ -5879,7 +5955,7 @@ var init_AnimatedGraphic = __esm({
   "components/marketing/atoms/AnimatedGraphic.tsx"() {
     "use client";
     init_cn();
-    AnimatedGraphic = React73__default.forwardRef(
+    AnimatedGraphic = React74__default.forwardRef(
       ({
         src,
         svgContent,
@@ -5902,7 +5978,7 @@ var init_AnimatedGraphic = __esm({
         const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
         const resolvedSvg = svgContent ?? fetchedSvg;
         const prevAnimateRef = useRef(animate);
-        const setRef = React73__default.useCallback(
+        const setRef = React74__default.useCallback(
           (node) => {
             containerRef.current = node;
             if (typeof ref === "function") ref(node);
@@ -6025,6 +6101,7 @@ var init_Modal = __esm({
       isOpen = true,
       onClose = () => {
       },
+      onExited,
       title,
       children = null,
       footer,
@@ -6051,7 +6128,10 @@ var init_Modal = __esm({
         wasOpenRef.current = isOpen;
       }, [isOpen]);
       const handleAnimEnd = (e) => {
-        if (closing && e.target === e.currentTarget) setClosing(false);
+        if (closing && e.target === e.currentTarget) {
+          setClosing(false);
+          onExited?.();
+        }
       };
       useEffect(() => {
         if (isOpen) {
@@ -6229,6 +6309,7 @@ var init_Drawer = __esm({
     init_Button();
     init_Typography();
     init_Overlay();
+    init_Presence();
     init_cn();
     init_useEventBus();
     sizeWidths = {
@@ -6282,6 +6363,7 @@ var init_Drawer = __esm({
         document.addEventListener("keydown", handleEscape);
         return () => document.removeEventListener("keydown", handleEscape);
       }, [isOpen, closeOnEscape, onClose, closeEvent, eventBus]);
+      const { mounted, className: drawerAnim, onAnimationEnd } = usePresence(isOpen, { animation: "drawer" });
       useEffect(() => {
         if (isOpen) {
           document.body.style.overflow = "hidden";
@@ -6292,7 +6374,7 @@ var init_Drawer = __esm({
           document.body.style.overflow = "";
         };
       }, [isOpen]);
-      if (!isOpen) return null;
+      if (!mounted) return null;
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
@@ -6305,7 +6387,7 @@ var init_Drawer = __esm({
       const widthClass = width in sizeWidths ? sizeWidths[width] : "";
       const widthStyle = width in sizeWidths ? void 0 : { width };
       const positionClasses = position === "right" ? "right-0 border-l" : "left-0 border-r";
-      const animationClasses2 = position === "right" ? "animate-slide-in-right" : "animate-slide-in-left";
+      const drawerSign = position === "right" ? 1 : -1;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           Overlay,
@@ -6327,12 +6409,13 @@ var init_Drawer = __esm({
               "flex flex-col max-h-screen",
               positionClasses,
               widthClass,
-              animationClasses2,
+              drawerAnim,
               className
             ),
-            style: widthStyle,
+            style: { ...widthStyle, "--motion-drawer-sign": drawerSign },
             role: "dialog",
             "aria-modal": "true",
+            onAnimationEnd,
             ...title && { "aria-labelledby": "drawer-title" },
             children: [
               (title || showCloseButton) && /* @__PURE__ */ jsxs(
@@ -6371,31 +6454,7 @@ var init_Drawer = __esm({
               )
             ]
           }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes slide-in-right {
-          from {
-            transform: translateX(100%);
-          }
-          to {
-            transform: translateX(0);
-          }
-        }
-        @keyframes slide-in-left {
-          from {
-            transform: translateX(-100%);
-          }
-          to {
-            transform: translateX(0);
-          }
-        }
-        .animate-slide-in-right {
-          animation: slide-in-right 0.3s ease-out;
-        }
-        .animate-slide-in-left {
-          animation: slide-in-left 0.3s ease-out;
-        }
-      ` })
+        )
       ] });
     };
     Drawer.displayName = "Drawer";
@@ -6446,14 +6505,23 @@ var init_Toast = __esm({
     }) => {
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleDismiss = () => {
+      const [leaving, setLeaving] = useState(false);
+      const doRealDismiss = () => {
         if (dismissEvent) eventBus.emit(`UI:${dismissEvent}`, {});
         onDismiss?.();
       };
+      const handleDismiss = () => {
+        if (leaving) return;
+        setLeaving(true);
+      };
       const handleAction = () => {
         if (actionEvent) eventBus.emit(`UI:${actionEvent}`, {});
         onAction?.();
       };
+      const handleAnimEnd = (e) => {
+        if (e.target !== e.currentTarget) return;
+        if (leaving) doRealDismiss();
+      };
       useEffect(() => {
         if (duration <= 0 || !onDismiss && !dismissEvent) {
           return;
@@ -6472,10 +6540,12 @@ var init_Toast = __esm({
             // edge. `max-w-[calc(100vw-2rem)]` clamps to viewport too.
             "border-l-4 p-4 shadow-elevation-toast min-w-0 sm:min-w-[300px] max-w-md max-w-[calc(100vw-2rem)]",
             "rounded-sm",
+            leaving ? "animate-toast-out" : "animate-toast-in",
             variantClasses[variant],
             className
           ),
           role: "alert",
+          onAnimationEnd: handleAnimEnd,
           children: /* @__PURE__ */ jsxs(Box, { className: "flex items-start gap-3", children: [
             /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(
               Icon,
@@ -6591,7 +6661,7 @@ var init_ErrorBoundary = __esm({
         }
       );
     };
-    ErrorBoundary = class extends React73__default.Component {
+    ErrorBoundary = class extends React74__default.Component {
       constructor(props) {
         super(props);
         __publicField(this, "reset", () => {
@@ -6872,7 +6942,7 @@ var init_Container = __esm({
       as: Component = "div"
     }) => {
       const resolvedSize = maxWidth ?? size ?? "lg";
-      return React73__default.createElement(
+      return React74__default.createElement(
         Component,
         {
           className: cn(
@@ -10095,7 +10165,7 @@ var init_CodeBlock = __esm({
     DIFF_STYLE_FALLBACK = { bg: "", prefix: " ", text: "text-foreground" };
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React73__default.memo(
+    CodeBlock = React74__default.memo(
       ({
         code: rawCode,
         language = "text",
@@ -10682,7 +10752,7 @@ var init_MarkdownContent = __esm({
     init_Box();
     init_CodeBlock();
     init_cn();
-    MarkdownContent = React73__default.memo(
+    MarkdownContent = React74__default.memo(
       ({ content, direction = "ltr", className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -11645,7 +11715,7 @@ var init_StateMachineView = __esm({
           Box,
           {
             className: cn(
-              "fixed z-50 animate-in fade-in-0 zoom-in-95 duration-150",
+              "fixed z-50 animate-in fade-in-0 zoom-in-95 duration-fast",
               tooltip.pinned ? "pointer-events-auto" : "pointer-events-none"
             ),
             style: {
@@ -12009,7 +12079,7 @@ var init_StateMachineView = __esm({
                 style: { top: title ? 30 : 0 },
                 children: [
                   entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React73__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React74__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                     StateNode,
                     {
                       state,
@@ -14048,6 +14118,129 @@ var init_Breadcrumb = __esm({
     Breadcrumb.displayName = "Breadcrumb";
   }
 });
+function useSafeEventBus2() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+var log5, lookStyles4, ButtonGroup;
+var init_ButtonGroup = __esm({
+  "components/core/molecules/ButtonGroup.tsx"() {
+    "use client";
+    init_cn();
+    init_atoms();
+    init_useEventBus();
+    log5 = createLogger("almadar:ui:button-group");
+    lookStyles4 = {
+      "right-aligned-buttons": "",
+      "floating-bar": "fixed bottom-section left-1/2 -translate-x-1/2 shadow-elevation-toast bg-card p-card-sm rounded-container",
+      "inline-row": "gap-2 inline-flex",
+      "dropdown-menu": "[&>button:not(:first-child)]:hidden",
+      "command-palette-trigger": "[&>button:not(:first-child)]:hidden"
+    };
+    ButtonGroup = ({
+      children,
+      primary,
+      secondary,
+      variant = "default",
+      orientation = "horizontal",
+      className,
+      // Filter-group pattern props (entity and filters are used for schema-driven filtering)
+      entity: _entity,
+      filters,
+      look = "right-aligned-buttons"
+    }) => {
+      const eventBus = useSafeEventBus2();
+      const variantClasses2 = {
+        default: "gap-0",
+        segmented: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0",
+        toggle: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0"
+      };
+      const orientationClasses = {
+        horizontal: "flex-row",
+        vertical: "flex-col [&>button:first-child]:rounded-t-lg [&>button:last-child]:rounded-b-lg [&>button:not(:first-child)]:border-t-0 [&>button:not(:first-child)]:border-l"
+      };
+      const handleActionClick = (action) => {
+        if (action.event) {
+          eventBus.emit("UI:DISPATCH", { event: action.event });
+        }
+        if (action.navigatesTo) {
+          eventBus.emit("UI:NAVIGATE", { url: action.navigatesTo });
+        }
+      };
+      const renderFormActions = () => {
+        const buttons = [];
+        if (secondary) {
+          secondary.forEach((action, index) => {
+            buttons.push(
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: action.actionType === "submit" ? "submit" : "button",
+                  variant: action.variant || "ghost",
+                  onClick: () => handleActionClick(action),
+                  children: action.label
+                },
+                `secondary-${index}`
+              )
+            );
+          });
+        }
+        if (primary) {
+          const isSubmit = primary.actionType === "submit";
+          buttons.push(
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: isSubmit ? "submit" : "button",
+                variant: primary.variant || "primary",
+                onClick: () => handleActionClick(primary),
+                "data-testid": isSubmit ? "form-submit" : void 0,
+                children: primary.label
+              },
+              "primary"
+            )
+          );
+        }
+        return buttons;
+      };
+      const renderFilters = () => {
+        if (!filters || filters.length === 0) return null;
+        return filters.map((filter, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => {
+              log5.debug("Filter clicked", { field: filter.field });
+            },
+            children: filter.label
+          },
+          `filter-${filter.field}-${index}`
+        ));
+      };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "inline-flex gap-2",
+            variantClasses2[variant],
+            orientationClasses[orientation],
+            lookStyles4[look],
+            className
+          ),
+          role: "group",
+          children: children || renderFilters() || renderFormActions()
+        }
+      );
+    };
+    ButtonGroup.displayName = "ButtonGroup";
+  }
+});
 function useSwipeGesture(callbacks, options = {}) {
   const { threshold = 50, velocityThreshold = 0.3, preventDefault = false } = options;
   const startX = useRef(0);
@@ -14418,8 +14611,8 @@ function MiniMap({
   tileAssets,
   unitAssets
 }) {
-  const canvasRef = React73.useRef(null);
-  const imgCacheRef = React73.useRef(/* @__PURE__ */ new Map());
+  const canvasRef = React74.useRef(null);
+  const imgCacheRef = React74.useRef(/* @__PURE__ */ new Map());
   function loadImg(url) {
     const cached = imgCacheRef.current.get(url);
     if (cached) return cached.complete ? cached : null;
@@ -14434,7 +14627,7 @@ function MiniMap({
     imgCacheRef.current.set(url, img);
     return null;
   }
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -14609,7 +14802,7 @@ function getTraitSnapshots() {
     try {
       snapshots.push(getter());
     } catch (err) {
-      log5.error("traitSnapshot getter failed", { trait: traitName, err: String(err) });
+      log6.error("traitSnapshot getter failed", { trait: traitName, err: String(err) });
     }
   }
   return snapshots;
@@ -14694,10 +14887,10 @@ function updateAssetStatus(url, status) {
     window.__orbitalVerification.assetStatus[url] = status;
   }
 }
-var log5;
+var log6;
 var init_verificationRegistry = __esm({
   "lib/verificationRegistry.ts"() {
-    log5 = createLogger("almadar:bridge");
+    log6 = createLogger("almadar:bridge");
     exposeOnWindow();
   }
 });
@@ -16446,7 +16639,7 @@ var init_CardGrid = __esm({
     CardGrid.displayName = "CardGrid";
   }
 });
-function useSafeEventBus2() {
+function useSafeEventBus3() {
   try {
     return useEventBus();
   } catch {
@@ -16482,7 +16675,7 @@ var init_Carousel = __esm({
       const [activeIndex, setActiveIndex] = useState(0);
       const scrollRef = useRef(null);
       const autoPlayRef = useRef(null);
-      const eventBus = useSafeEventBus2();
+      const eventBus = useSafeEventBus3();
       const { t } = useTranslate();
       const safeItems = items ?? [];
       const totalSlides = safeItems.length;
@@ -16844,7 +17037,7 @@ var init_Chart = __esm({
                   return /* @__PURE__ */ jsx(
                     Box,
                     {
-                      className: "h-full rounded-r-sm transition-all duration-500 ease-out min-w-[2px] cursor-pointer hover:opacity-80",
+                      className: "h-full rounded-r-sm transition-all duration-slow ease-standard min-w-[2px] cursor-pointer hover:opacity-80",
                       style: {
                         width: `${ratio}%`,
                         backgroundColor: color
@@ -16900,7 +17093,7 @@ var init_Chart = __esm({
                         Box,
                         {
                           className: cn(
-                            "rounded-t-sm transition-all duration-500 ease-out min-h-[4px] cursor-pointer hover:opacity-80",
+                            "rounded-t-sm transition-all duration-slow ease-standard min-h-[4px] cursor-pointer hover:opacity-80",
                             histogram ? "flex-1 mx-0" : "flex-1"
                           ),
                           style: {
@@ -16950,7 +17143,7 @@ var init_Chart = __esm({
                     return /* @__PURE__ */ jsx(
                       Box,
                       {
-                        className: "w-full transition-all duration-500 ease-out cursor-pointer hover:opacity-80",
+                        className: "w-full transition-all duration-slow ease-standard cursor-pointer hover:opacity-80",
                         style: {
                           height: `${ratio}%`,
                           backgroundColor: color
@@ -17040,7 +17233,7 @@ var init_Chart = __esm({
               fill: seg.color,
               stroke: "var(--color-card)",
               strokeWidth: "2",
-              className: "transition-opacity duration-200 hover:opacity-80 cursor-pointer",
+              className: "transition-opacity duration-fast hover:opacity-80 cursor-pointer",
               onClick: () => onPointClick?.(
                 { label: seg.label, value: seg.value, color: seg.color },
                 "default"
@@ -18294,9 +18487,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React73.useState(false);
+  const [isPressed, setIsPressed] = React74.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React73.useCallback(
+  const handlePointerDown = React74.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -18306,7 +18499,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React73.useCallback(
+  const handlePointerUp = React74.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -18316,7 +18509,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React73.useCallback(
+  const handlePointerLeave = React74.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -18404,8 +18597,8 @@ function ControlGrid({
   className
 }) {
   const eventBus = useEventBus();
-  const [active, setActive] = React73.useState(/* @__PURE__ */ new Set());
-  const handlePress = React73.useCallback(
+  const [active, setActive] = React74.useState(/* @__PURE__ */ new Set());
+  const handlePress = React74.useCallback(
     (id) => {
       setActive((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -18419,7 +18612,7 @@ function ControlGrid({
     },
     [kind, actionEvent, directionEvent, directionEvents, eventBus, onAction, onDirection]
   );
-  const handleRelease = React73.useCallback(
+  const handleRelease = React74.useCallback(
     (id) => {
       setActive((prev) => {
         const next = new Set(prev);
@@ -19626,8 +19819,8 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const triggerChild = React73__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React73__default.cloneElement(
+      const triggerChild = React74__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
+      const triggerElement = React74__default.cloneElement(
         triggerChild,
         {
           ref: triggerRef,
@@ -19722,14 +19915,14 @@ function useDataDnd(args) {
   const isZone = Boolean(dragGroup || accepts || sortable);
   const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
-  const parentRoot = React73__default.useContext(RootCtx);
+  const parentRoot = React74__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const zoneId = React73__default.useId();
+  const zoneId = React74__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
-  const [optimisticOrders, setOptimisticOrders] = React73__default.useState(() => /* @__PURE__ */ new Map());
-  const optimisticOrdersRef = React73__default.useRef(optimisticOrders);
+  const [optimisticOrders, setOptimisticOrders] = React74__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React74__default.useRef(optimisticOrders);
   optimisticOrdersRef.current = optimisticOrders;
-  const clearOptimisticOrder = React73__default.useCallback((group) => {
+  const clearOptimisticOrder = React74__default.useCallback((group) => {
     setOptimisticOrders((prev) => {
       if (!prev.has(group)) return prev;
       const next = new Map(prev);
@@ -19754,7 +19947,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__idx_${idx}`;
   }).join("|");
-  const itemIds = React73__default.useMemo(
+  const itemIds = React74__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw != null ? String(raw) : `__idx_${idx}`;
@@ -19765,7 +19958,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__${idx}`;
   }).join("|");
-  React73__default.useEffect(() => {
+  React74__default.useEffect(() => {
     const root = isRoot ? null : parentRoot;
     if (root) {
       root.clearOptimisticOrder(ownGroup);
@@ -19773,20 +19966,20 @@ function useDataDnd(args) {
       clearOptimisticOrder(ownGroup);
     }
   }, [itemsContentSig, ownGroup]);
-  const zonesRef = React73__default.useRef(/* @__PURE__ */ new Map());
-  const registerZone = React73__default.useCallback((zoneId2, meta2) => {
+  const zonesRef = React74__default.useRef(/* @__PURE__ */ new Map());
+  const registerZone = React74__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
   }, []);
-  const unregisterZone = React73__default.useCallback((zoneId2) => {
+  const unregisterZone = React74__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
-  const [activeDrag, setActiveDrag] = React73__default.useState(null);
-  const [overZoneGroup, setOverZoneGroup] = React73__default.useState(null);
-  const meta = React73__default.useMemo(
+  const [activeDrag, setActiveDrag] = React74__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React74__default.useState(null);
+  const meta = React74__default.useMemo(
     () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
     [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
-  React73__default.useEffect(() => {
+  React74__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
@@ -19805,7 +19998,7 @@ function useDataDnd(args) {
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useAlmadarDndSensors(true);
   const collisionDetection = almadarDndCollisionDetection;
-  const findZoneByItem = React73__default.useCallback(
+  const findZoneByItem = React74__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
         if (z.itemIds.includes(id)) return z;
@@ -19814,7 +20007,7 @@ function useDataDnd(args) {
     },
     []
   );
-  React73__default.useCallback(
+  React74__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -19823,7 +20016,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const handleDragEnd = React73__default.useCallback(
+  const handleDragEnd = React74__default.useCallback(
     (event) => {
       const { active, over } = event;
       const activeIdStr = String(active.id);
@@ -19914,8 +20107,8 @@ function useDataDnd(args) {
     },
     [eventBus]
   );
-  const sortableData = React73__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
-  const SortableItem = React73__default.useCallback(
+  const sortableData = React74__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
+  const SortableItem = React74__default.useCallback(
     ({ id, children }) => {
       const {
         attributes,
@@ -19955,7 +20148,7 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
-    const ctx = React73__default.useContext(RootCtx);
+    const ctx = React74__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
     const overZoneGroup2 = ctx?.overZoneGroup ?? null;
     const isThisZoneOver = overZoneGroup2 === ownGroup;
@@ -19970,7 +20163,7 @@ function useDataDnd(args) {
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
-    React73__default.useEffect(() => {
+    React74__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsx(
@@ -19984,11 +20177,11 @@ function useDataDnd(args) {
       }
     );
   };
-  const rootContextValue = React73__default.useMemo(
+  const rootContextValue = React74__default.useMemo(
     () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
     [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
-  const handleDragStart = React73__default.useCallback((event) => {
+  const handleDragStart = React74__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;
@@ -20007,7 +20200,7 @@ function useDataDnd(args) {
       isRoot
     });
   }, [findZoneByItem, isRoot, zoneId]);
-  const handleDragOver = React73__default.useCallback((event) => {
+  const handleDragOver = React74__default.useCallback((event) => {
     const { active, over } = event;
     const overData = over?.data?.current;
     const overGroup = overData?.dndGroup ?? null;
@@ -20077,7 +20270,7 @@ function useDataDnd(args) {
       return next;
     });
   }, []);
-  const handleDragCancel = React73__default.useCallback((event) => {
+  const handleDragCancel = React74__default.useCallback((event) => {
     setActiveDrag(null);
     setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
@@ -20085,12 +20278,12 @@ function useDataDnd(args) {
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
-  const handleDragEndWithCleanup = React73__default.useCallback((event) => {
+  const handleDragEndWithCleanup = React74__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
     setOverZoneGroup(null);
   }, [handleDragEnd]);
-  const wrapContainer = React73__default.useCallback(
+  const wrapContainer = React74__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
@@ -20144,7 +20337,7 @@ var init_useDataDnd = __esm({
     init_useAlmadarDndCollision();
     init_Box();
     dndLog = createLogger("almadar:ui:dnd");
-    RootCtx = React73__default.createContext(null);
+    RootCtx = React74__default.createContext(null);
   }
 });
 function renderIconInput(icon, props) {
@@ -20341,7 +20534,7 @@ function DataGrid({
       /* @__PURE__ */ jsx(
         Box,
         {
-          className: cn("grid", gapStyles5[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles4[look], className),
+          className: cn("grid", gapStyles5[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles5[look], className),
           style: scrollX ? { gridAutoFlow: "column", gridAutoColumns: `minmax(${minCardWidth}px, 1fr)` } : gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
@@ -20536,7 +20729,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles5, lookStyles4;
+var dataGridLog, BADGE_VARIANTS, gapStyles5, lookStyles5;
 var init_DataGrid = __esm({
   "components/core/molecules/DataGrid.tsx"() {
     "use client";
@@ -20571,7 +20764,7 @@ var init_DataGrid = __esm({
       lg: "gap-6",
       xl: "gap-8"
     };
-    lookStyles4 = {
+    lookStyles5 = {
       dense: "gap-2 [&>*]:p-card-sm",
       spacious: "gap-8 [&>*]:p-card-lg",
       striped: "[&>*:nth-child(even)]:bg-muted/30",
@@ -20671,7 +20864,7 @@ function DataList({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React73__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React74__default.useState(pageSize || Infinity);
   const fieldDefs = fields ?? columns ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -20690,7 +20883,7 @@ function DataList({
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
-  React73__default.useEffect(() => {
+  React74__default.useEffect(() => {
     const renderItemTypeOf = typeof schemaRenderItem;
     const childrenTypeOf = typeof children;
     if (data.length > 0 && !hasRenderProp) {
@@ -20794,7 +20987,7 @@ function DataList({
     const items2 = [...data];
     const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
     const contentField = titleField?.name ?? fieldDefs[0]?.name ?? "";
-    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React73__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React74__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}`;
@@ -20935,7 +21128,7 @@ function DataList({
           className
         ),
         children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs(React73__default.Fragment, { children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs(React74__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)
@@ -21042,8 +21235,8 @@ function ScalarControl({
   }
   const numeric = typeof value === "number";
   const initial = value === null ? "" : String(value);
-  const [draft, setDraft] = React73__default.useState(initial);
-  React73__default.useEffect(() => setDraft(initial), [initial]);
+  const [draft, setDraft] = React74__default.useState(initial);
+  React74__default.useEffect(() => setDraft(initial), [initial]);
   const commit = () => {
     if (numeric) {
       const n = draft.trim() === "" ? 0 : Number(draft);
@@ -21111,8 +21304,8 @@ function Row({
   onRemove,
   readonly
 }) {
-  const [keyDraft, setKeyDraft] = React73__default.useState(rowKey);
-  React73__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
+  const [keyDraft, setKeyDraft] = React74__default.useState(rowKey);
+  React74__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
   const container = isObj(value) || isArr(value);
   return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "group w-max min-w-full", children: [
     /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className: "py-0.5 w-max", children: [
@@ -21155,7 +21348,7 @@ function ContainerNode({
   depth,
   readonly
 }) {
-  const [open, setOpen] = React73__default.useState(depth < 2);
+  const [open, setOpen] = React74__default.useState(depth < 2);
   const array = isArr(value);
   const entries = array ? value.map((v, i) => [String(i), v]) : Object.entries(value);
   const setObjValue = (key, next) => {
@@ -21297,7 +21490,7 @@ var init_FormSection = __esm({
       columns = 1,
       className
     }) => {
-      const [collapsed, setCollapsed] = React73__default.useState(defaultCollapsed);
+      const [collapsed, setCollapsed] = React74__default.useState(defaultCollapsed);
       const { t } = useTranslate();
       const eventBus = useEventBus();
       const gridClass = {
@@ -21305,7 +21498,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];
-      React73__default.useCallback(() => {
+      React74__default.useCallback(() => {
         if (collapsible) {
           setCollapsed((prev) => !prev);
           eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -21713,8 +21906,8 @@ function TextLikeControl({
   onCommit
 }) {
   const initial = value === void 0 || value === null ? "" : String(value);
-  const [draft, setDraft] = React73__default.useState(initial);
-  React73__default.useEffect(() => setDraft(initial), [initial]);
+  const [draft, setDraft] = React74__default.useState(initial);
+  React74__default.useEffect(() => setDraft(initial), [initial]);
   const commit = () => {
     if (numeric) {
       const n = draft.trim() === "" ? 0 : Number(draft);
@@ -21899,14 +22092,14 @@ var init_NodeSlotEditor = __esm({
     isObj2 = (v) => v !== null && v !== void 0 && typeof v === "object" && !Array.isArray(v);
     NodeSlotEditor = ({ value, onChange, className }) => {
       const { type, props, wasArray } = normalize(value);
-      const patterns = React73__default.useMemo(() => {
+      const patterns = React74__default.useMemo(() => {
         try {
           return [...getKnownPatterns()].sort();
         } catch {
           return [];
         }
       }, []);
-      const options = React73__default.useMemo(
+      const options = React74__default.useMemo(
         () => [{ value: "", label: "\u2014 none \u2014" }, ...patterns.map((p) => ({ value: p, label: p }))],
         [patterns]
       );
@@ -21918,7 +22111,7 @@ var init_NodeSlotEditor = __esm({
         const pattern = { type: nextType, ...nextProps };
         onChange(wasArray || value === void 0 ? [pattern] : pattern);
       };
-      const schemaEntries = React73__default.useMemo(() => {
+      const schemaEntries = React74__default.useMemo(() => {
         if (!type) return [];
         const def = getPatternDefinition(type);
         if (!def?.propsSchema) return [];
@@ -22120,129 +22313,6 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
-function useSafeEventBus3() {
-  try {
-    return useEventBus();
-  } catch {
-    return { emit: () => {
-    }, on: () => () => {
-    }, once: () => {
-    } };
-  }
-}
-var log6, lookStyles5, ButtonGroup;
-var init_ButtonGroup = __esm({
-  "components/core/molecules/ButtonGroup.tsx"() {
-    "use client";
-    init_cn();
-    init_atoms();
-    init_useEventBus();
-    log6 = createLogger("almadar:ui:button-group");
-    lookStyles5 = {
-      "right-aligned-buttons": "",
-      "floating-bar": "fixed bottom-section left-1/2 -translate-x-1/2 shadow-elevation-toast bg-card p-card-sm rounded-container",
-      "inline-row": "gap-2 inline-flex",
-      "dropdown-menu": "[&>button:not(:first-child)]:hidden",
-      "command-palette-trigger": "[&>button:not(:first-child)]:hidden"
-    };
-    ButtonGroup = ({
-      children,
-      primary,
-      secondary,
-      variant = "default",
-      orientation = "horizontal",
-      className,
-      // Filter-group pattern props (entity and filters are used for schema-driven filtering)
-      entity: _entity,
-      filters,
-      look = "right-aligned-buttons"
-    }) => {
-      const eventBus = useSafeEventBus3();
-      const variantClasses2 = {
-        default: "gap-0",
-        segmented: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0",
-        toggle: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0"
-      };
-      const orientationClasses = {
-        horizontal: "flex-row",
-        vertical: "flex-col [&>button:first-child]:rounded-t-lg [&>button:last-child]:rounded-b-lg [&>button:not(:first-child)]:border-t-0 [&>button:not(:first-child)]:border-l"
-      };
-      const handleActionClick = (action) => {
-        if (action.event) {
-          eventBus.emit("UI:DISPATCH", { event: action.event });
-        }
-        if (action.navigatesTo) {
-          eventBus.emit("UI:NAVIGATE", { url: action.navigatesTo });
-        }
-      };
-      const renderFormActions = () => {
-        const buttons = [];
-        if (secondary) {
-          secondary.forEach((action, index) => {
-            buttons.push(
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: action.actionType === "submit" ? "submit" : "button",
-                  variant: action.variant || "ghost",
-                  onClick: () => handleActionClick(action),
-                  children: action.label
-                },
-                `secondary-${index}`
-              )
-            );
-          });
-        }
-        if (primary) {
-          const isSubmit = primary.actionType === "submit";
-          buttons.push(
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: isSubmit ? "submit" : "button",
-                variant: primary.variant || "primary",
-                onClick: () => handleActionClick(primary),
-                "data-testid": isSubmit ? "form-submit" : void 0,
-                children: primary.label
-              },
-              "primary"
-            )
-          );
-        }
-        return buttons;
-      };
-      const renderFilters = () => {
-        if (!filters || filters.length === 0) return null;
-        return filters.map((filter, index) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            onClick: () => {
-              log6.debug("Filter clicked", { field: filter.field });
-            },
-            children: filter.label
-          },
-          `filter-${filter.field}-${index}`
-        ));
-      };
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "inline-flex gap-2",
-            variantClasses2[variant],
-            orientationClasses[orientation],
-            lookStyles5[look],
-            className
-          ),
-          role: "group",
-          children: children || renderFilters() || renderFormActions()
-        }
-      );
-    };
-    ButtonGroup.displayName = "ButtonGroup";
-  }
-});
 function getOrCreateStore(query) {
   if (!queryStores.has(query)) {
     queryStores.set(query, {
@@ -22427,7 +22497,7 @@ var init_FilterGroup = __esm({
                           type: "button",
                           onClick: () => handleFilterSelect(filter.field, null),
                           className: cn(
-                            "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
+                            "px-3 py-1.5 text-sm font-medium transition-all duration-fast",
                             !selectedValues[filter.field] ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
                           ),
                           children: t("filterGroup.all")
@@ -22439,7 +22509,7 @@ var init_FilterGroup = __esm({
                           type: "button",
                           onClick: () => handleFilterSelect(filter.field, option),
                           className: cn(
-                            "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
+                            "px-3 py-1.5 text-sm font-medium transition-all duration-fast",
                             "border-l-[length:var(--border-width)] border-border",
                             selectedValues[filter.field] === option ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
                           ),
@@ -22820,7 +22890,7 @@ var init_Flex = __esm({
           flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
         }
       }
-      return React73__default.createElement(Component, {
+      return React74__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           directionStyles[direction],
@@ -22939,7 +23009,7 @@ var init_Grid = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = rows2 ? { gridTemplateRows: `repeat(${rows2}, minmax(0, 1fr))`, ...style } : style;
-      return React73__default.createElement(
+      return React74__default.createElement(
         Component,
         {
           className: cn(
@@ -23024,6 +23094,15 @@ var init_InputGroup = __esm({
     InputGroup.displayName = "InputGroup";
   }
 });
+var PageTransition;
+var init_PageTransition = __esm({
+  "components/core/molecules/PageTransition.tsx"() {
+    "use client";
+    init_cn();
+    PageTransition = ({ locationKey, children, className }) => /* @__PURE__ */ jsx("div", { className: cn("animate-page-in", className), children }, locationKey);
+    PageTransition.displayName = "PageTransition";
+  }
+});
 function computePopoverStyle(position, triggerRect, popoverWidth) {
   if (position === "left" || position === "right") {
     return {
@@ -23050,6 +23129,7 @@ var init_Popover = __esm({
   "components/core/molecules/Popover.tsx"() {
     "use client";
     init_Typography();
+    init_Presence();
     init_cn();
     init_useTapReveal();
     arrowClasses = {
@@ -23073,6 +23153,7 @@ var init_Popover = __esm({
       const [popoverWidth, setPopoverWidth] = useState(0);
       const triggerRef = useRef(null);
       const popoverRef = useRef(null);
+      const { mounted, className: panelAnim, onAnimationEnd } = usePresence(isOpen, { animation: "popover" });
       const updatePosition = () => {
         if (triggerRef.current) {
           setTriggerRect(triggerRef.current.getBoundingClientRect());
@@ -23098,10 +23179,11 @@ var init_Popover = __esm({
       useEffect(() => {
         if (isOpen) {
           updatePosition();
-        } else {
-          setPopoverWidth(0);
         }
       }, [isOpen]);
+      useEffect(() => {
+        if (!mounted) setPopoverWidth(0);
+      }, [mounted]);
       useLayoutEffect(() => {
         if (isOpen && popoverRef.current) {
           const measured = popoverRef.current.offsetWidth;
@@ -23135,9 +23217,9 @@ var init_Popover = __esm({
         onMouseLeave: handleClose,
         onPointerDown: tapTriggerProps.onPointerDown
       };
-      const childElement = React73__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const childElement = React74__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = childElement.props.onPointerDown;
-      const triggerElement = React73__default.cloneElement(
+      const triggerElement = React74__default.cloneElement(
         childElement,
         {
           ref: triggerRef,
@@ -23150,13 +23232,14 @@ var init_Popover = __esm({
           } : void 0
         }
       );
-      const panel = isOpen && triggerRect ? /* @__PURE__ */ jsxs(
+      const panel = mounted && triggerRect ? /* @__PURE__ */ jsxs(
         "div",
         {
           ref: popoverRef,
           className: cn(
             "fixed z-50 p-4",
             "bg-card border-2 border-border shadow-elevation-popover",
+            panelAnim,
             className
           ),
           style: {
@@ -23164,6 +23247,7 @@ var init_Popover = __esm({
             ...popoverWidth === 0 ? { visibility: "hidden" } : void 0
           },
           role: "dialog",
+          onAnimationEnd,
           onMouseEnter: trigger === "hover" ? handleOpen : void 0,
           onMouseLeave: trigger === "hover" ? handleClose : void 0,
           children: [
@@ -23320,7 +23404,7 @@ var init_Coachmark = __esm({
           role: "dialog",
           "aria-label": title,
           className: cn(
-            "fixed z-50 max-w-xs w-72 transition-opacity duration-150",
+            "fixed z-50 max-w-xs w-72 transition-opacity duration-fast",
             centered || pos ? "opacity-100" : "opacity-0",
             className
           ),
@@ -23827,6 +23911,7 @@ var init_SidePanel = __esm({
     init_Box();
     init_Button();
     init_Typography();
+    init_Presence();
     init_cn();
     init_useEventBus();
     SidePanel = ({
@@ -23846,15 +23931,17 @@ var init_SidePanel = __esm({
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
       };
-      if (!isOpen) return null;
+      const { mounted, className: panelAnim, onAnimationEnd } = usePresence(isOpen, { animation: "drawer" });
+      const drawerSign = position === "right" ? 1 : -1;
+      if (!mounted) return null;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        showOverlay && /* @__PURE__ */ jsx(
+        showOverlay && /* @__PURE__ */ jsx(Presence, { show: isOpen, animation: "overlay", children: /* @__PURE__ */ jsx(
           Box,
           {
             className: "fixed inset-0 bg-white/80 backdrop-blur-sm z-40 lg:hidden",
             onClick: handleClose
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxs(
           Aside,
           {
@@ -23864,11 +23951,13 @@ var init_SidePanel = __esm({
               "border-l-2 border-border",
               position === "left" && "border-l-0 border-r-2",
               "flex flex-col",
-              "transition-transform duration-normal ease-standard",
+              panelAnim,
               width,
               position === "right" ? "right-0" : "left-0",
               className
             ),
+            style: { "--motion-drawer-sign": drawerSign },
+            onAnimationEnd,
             children: [
               /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between p-4 border-b-2 border-border sticky top-0 bg-card z-10", children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "h6", children: title }),
@@ -23989,9 +24078,9 @@ var init_Tooltip = __esm({
           if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
         };
       }, []);
-      const triggerElement = React73__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const triggerElement = React74__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = triggerElement.props.onPointerDown;
-      const trigger = React73__default.cloneElement(triggerElement, {
+      const trigger = React74__default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -24081,7 +24170,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(React73__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -24632,7 +24721,7 @@ var init_FormSectionHeader = __esm({
                   name: "chevron-down",
                   size: "sm",
                   className: cn(
-                    "text-muted-foreground transition-transform duration-200 shrink-0",
+                    "text-muted-foreground transition-transform duration-fast shrink-0",
                     isCollapsed && "-rotate-90"
                   )
                 }
@@ -25753,17 +25842,18 @@ function GameHud({
     const mid = Math.ceil(stats.length / 2);
     const leftStats = stats.slice(0, mid);
     const rightStats = stats.slice(mid);
-    const isTop = position === "top";
     return /* @__PURE__ */ jsxs(
-      Box,
+      Card,
       {
+        variant: "bordered",
+        padding: "none",
         className: cn(
-          "flex items-center justify-between w-full",
+          "flex items-center justify-between w-full rounded-none bg-card",
           "px-4 py-2 gap-4",
-          !transparent && (isTop ? "border-b border-border/40 bg-surface/90 backdrop-blur-sm" : "border-t border-border/40 bg-surface/90 backdrop-blur-sm"),
-          transparent && (isTop ? "border-b border-white/10 bg-black/40 backdrop-blur-sm" : "border-t border-white/10 bg-black/40 backdrop-blur-sm"),
+          transparent && "backdrop-blur-sm",
           className
         ),
+        style: transparent ? { backgroundColor: "color-mix(in srgb, var(--color-card) 40%, transparent)" } : void 0,
         children: [
           /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
           rightStats.length > 0 && /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
@@ -25772,14 +25862,16 @@ function GameHud({
     );
   }
   return /* @__PURE__ */ jsx(
-    Box,
+    Card,
     {
-      position: "relative",
+      variant: "bordered",
+      padding: "sm",
       className: cn(
-        "z-10 flex items-center gap-4 px-4 py-2",
-        transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
+        "z-10 relative flex items-center gap-4 bg-card",
+        transparent && "backdrop-blur-sm",
         className
       ),
+      style: transparent ? { backgroundColor: "color-mix(in srgb, var(--color-card) 30%, transparent)" } : void 0,
       children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i))
     }
   );
@@ -25789,6 +25881,7 @@ var init_GameHud = __esm({
   "components/game/molecules/GameHud.tsx"() {
     init_cn();
     init_Box();
+    init_Card();
     init_StatBadge();
     positionMap = {
       corners: "inset-0 pointer-events-none"
@@ -25814,7 +25907,7 @@ function GameMenu({
 }) {
   const resolvedOptions = (options?.length ? options : void 0) ?? (menuItems?.length ? menuItems : void 0) ?? DEFAULT_MENU_OPTIONS;
   const eventBus = useEventBus();
-  const handleOptionClick = React73.useCallback(
+  const handleOptionClick = React74.useCallback(
     (option) => {
       if (option.event) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -25833,39 +25926,48 @@ function GameMenu({
     {
       className: cn(
         "min-h-screen w-full flex flex-col items-center justify-center p-8",
+        !background && "bg-background",
         className
       ),
-      style: {
-        background: background ?? "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0e17 100%)"
-      },
+      style: background ? { background } : void 0,
       children: [
-        /* @__PURE__ */ jsxs(Box, { className: "text-center mb-12 animate-fade-in", children: [
-          logo && /* @__PURE__ */ jsx(GameIcon, { assetUrl: logo, icon: "image", size: 96, alt: title, className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl" }),
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "h1",
-              className: "text-5xl md:text-7xl font-bold text-[var(--color-foreground)] tracking-tight",
-              style: {
-                textShadow: "0 4px 12px rgba(0,0,0,0.5)"
-              },
-              children: title
-            }
-          ),
-          subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
-        ] }),
-        /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsx(
-          ChoiceButton,
+        /* @__PURE__ */ jsxs(
+          Card,
           {
-            text: option.label,
-            index: index + 1,
-            disabled: option.disabled,
-            onClick: () => handleOptionClick(option),
-            className: "text-lg py-4 px-8"
-          },
-          index
-        )) }),
-        /* @__PURE__ */ jsxs(Box, { position: "absolute", className: "inset-0 pointer-events-none overflow-hidden", children: [
+            variant: "bordered",
+            padding: "lg",
+            className: "bg-card flex flex-col items-center max-w-md w-full",
+            children: [
+              /* @__PURE__ */ jsxs(Box, { className: "text-center mb-8 animate-fade-in", children: [
+                logo && /* @__PURE__ */ jsx(GameIcon, { assetUrl: logo, icon: "image", size: 96, alt: title, className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl" }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "h1",
+                    className: "text-4xl md:text-5xl font-bold text-foreground tracking-tight",
+                    style: {
+                      textShadow: "0 4px 12px rgba(0,0,0,0.5)"
+                    },
+                    children: title
+                  }
+                ),
+                subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-4 w-full", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsx(
+                ChoiceButton,
+                {
+                  text: option.label,
+                  index: index + 1,
+                  disabled: option.disabled,
+                  onClick: () => handleOptionClick(option),
+                  className: "text-lg py-4 px-8"
+                },
+                index
+              )) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { position: "absolute", className: "inset-0 pointer-events-none overflow-hidden -z-10", children: [
           /* @__PURE__ */ jsx(Box, { position: "absolute", className: "top-1/4 left-1/4 w-64 h-64 bg-info/10 rounded-container blur-3xl" }),
           /* @__PURE__ */ jsx(Box, { position: "absolute", className: "bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-container blur-3xl" })
         ] })
@@ -25880,6 +25982,7 @@ var init_GameMenu = __esm({
     init_cn();
     init_useEventBus();
     init_Box();
+    init_Card();
     init_Typography();
     init_GameIcon();
     init_ChoiceButton();
@@ -26040,7 +26143,7 @@ function StateGraph({
 }) {
   const eventBus = useEventBus();
   const nodes = states ?? [];
-  const positions = React73.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
+  const positions = React74.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -26577,7 +26680,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(React73__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -27210,7 +27313,7 @@ function SequenceBar({
     else onSlotRemove?.(index);
   }, [emit, slotRemoveEvent, 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(React73__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -27397,6 +27500,7 @@ var init_GameShell = __esm({
   "components/game/templates/GameShell.tsx"() {
     init_cn();
     init_Box();
+    init_Card();
     init_Typography();
     init_AtlasImage();
     FONT_BASE = "https://almadar-kflow-assets.web.app/shared/_shared/kenney-fonts/fonts";
@@ -27425,13 +27529,14 @@ var init_GameShell = __esm({
       showTopBar = true,
       children,
       backgroundAsset,
-      hudBackgroundAsset,
-      fontFamily = "future"
+      fontFamily = "future",
+      "data-theme": dataTheme
     }) => {
       const font = GAME_FONTS[fontFamily] ?? fontFamily;
       return /* @__PURE__ */ jsxs(
         Box,
         {
+          "data-theme": dataTheme || void 0,
           className: cn("game-shell", className),
           style: {
             position: "relative",
@@ -27439,7 +27544,7 @@ var init_GameShell = __esm({
             height: "100vh",
             overflow: "hidden",
             background: "var(--color-background, #0a0a0f)",
-            color: "var(--color-text, #e0e0e0)",
+            color: "var(--color-foreground, #e0e0e0)",
             fontFamily: `'${font}', system-ui, sans-serif`
           },
           children: [
@@ -27471,19 +27576,12 @@ var init_GameShell = __esm({
                 },
                 children: [
                   showTopBar && /* @__PURE__ */ jsx(
-                    AtlasPanel,
+                    Card,
                     {
-                      asset: hudBackgroundAsset,
-                      borderSlice: 12,
-                      borderWidth: 10,
-                      className: "game-shell__title pointer-events-auto",
-                      style: {
-                        padding: "6px 16px",
-                        background: hudBackgroundAsset ? void 0 : "rgba(18, 18, 31, 0.85)",
-                        borderRadius: hudBackgroundAsset ? void 0 : 10,
-                        boxShadow: "0 4px 14px rgba(0,0,0,0.45)",
-                        flexShrink: 0
-                      },
+                      variant: "bordered",
+                      padding: "none",
+                      className: "game-shell__title bg-card pointer-events-auto",
+                      style: { padding: "6px 16px", flexShrink: 0 },
                       children: /* @__PURE__ */ jsx(
                         Typography,
                         {
@@ -28195,13 +28293,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect64, useRef: useRef61, useCallback: useCallback104, useState: useState100 } = React73__default;
+      const { useEffect: useEffect65, useRef: useRef62, useCallback: useCallback105, useState: useState102 } = React74__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 = useRef61({ centerLat, centerLng, zoom });
-        useEffect64(() => {
+        const prevRef = useRef62({ centerLat, centerLng, zoom });
+        useEffect65(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -28212,7 +28310,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect64(() => {
+        useEffect65(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -28240,8 +28338,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState100(null);
-        const handleMapClick = useCallback104((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState102(null);
+        const handleMapClick = useCallback105((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -28250,7 +28348,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback104((marker) => {
+        const handleMarkerClick = useCallback105((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -28450,7 +28548,7 @@ var init_NumberStepper = __esm({
                   "text-foreground",
                   "hover:bg-muted",
                   "active:bg-muted",
-                  "transition-colors duration-100",
+                  "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
                   "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
                   styles.button
@@ -28491,7 +28589,7 @@ var init_NumberStepper = __esm({
                   "text-foreground",
                   "hover:bg-muted",
                   "active:bg-muted",
-                  "transition-colors duration-100",
+                  "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
                   "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
                   styles.button
@@ -28615,7 +28713,7 @@ var init_StarRating = __esm({
                       className: cn(
                         styles.star,
                         "text-foreground/30",
-                        "transition-colors duration-100"
+                        "transition-colors duration-instant"
                       ),
                       strokeWidth: 1.5
                     }
@@ -28628,7 +28726,7 @@ var init_StarRating = __esm({
                         styles.star,
                         "absolute inset-0",
                         "text-warning fill-warning",
-                        "transition-colors duration-100"
+                        "transition-colors duration-instant"
                       ),
                       strokeWidth: 1.5,
                       style: isHalf ? { clipPath: "inset(0 50% 0 0)" } : void 0
@@ -28783,7 +28881,7 @@ var init_UploadDropZone = __esm({
             "relative flex flex-col items-center justify-center",
             "p-8 rounded-sm",
             "border-2 border-dashed",
-            "transition-colors duration-150",
+            "transition-colors duration-fast",
             "cursor-pointer",
             isDragOver ? "border-primary bg-primary bg-opacity-5" : "border-border bg-surface",
             error && "border-error",
@@ -29110,8 +29208,8 @@ function TableView({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React73__default.useState(pageSize > 0 ? pageSize : Infinity);
-  const [localSelected, setLocalSelected] = React73__default.useState(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React74__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React74__default.useState(/* @__PURE__ */ new Set());
   const colDefs = columns ?? fields ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -29191,7 +29289,7 @@ function TableView({
       className: cn(
         "grid items-center gap-3 sticky top-0 z-10",
         "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
-        "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
+        "text-muted-foreground uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
@@ -29306,12 +29404,12 @@ function TableView({
         ]
       }
     );
-    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React73__default.Fragment, { children: rowInner }, id);
+    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React74__default.Fragment, { children: rowInner }, id);
   };
   const items = Array.from(data);
   const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
   let runningIndex = 0;
-  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React73__default.Fragment, { children: [
+  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React74__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)) });
@@ -30047,7 +30145,7 @@ function SortableListInner({
           "flex items-center justify-center",
           "text-muted-foreground",
           "hover:text-foreground",
-          "transition-colors duration-100",
+          "transition-colors duration-instant",
           "px-1"
         ),
         "aria-grabbed": ariaGrabbed,
@@ -30074,7 +30172,7 @@ function SortableListInner({
               gap: "sm",
               align: "center",
               className: cn(
-                "transition-opacity duration-150",
+                "transition-opacity duration-fast",
                 isBeingDragged && "opacity-50"
               ),
               children: [
@@ -30246,7 +30344,7 @@ var init_PullToRefresh = __esm({
             children: /* @__PURE__ */ jsx(
               Box,
               {
-                className: "transition-transform duration-150",
+                className: "transition-transform duration-fast",
                 style: {
                   transform: `scale(${isRefreshing ? 1 : pullProgress})`,
                   opacity: isRefreshing ? 1 : pullProgress
@@ -30668,7 +30766,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(React73__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(React74__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" })
@@ -30679,7 +30777,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(React73__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(React74__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 }),
@@ -31585,7 +31683,7 @@ var init_VoteStack = __esm({
                   isUp ? "text-primary" : "text-muted-foreground",
                   "hover:bg-muted",
                   "active:bg-muted",
-                  "transition-colors duration-100",
+                  "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
                   "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
                   styles.button
@@ -31622,7 +31720,7 @@ var init_VoteStack = __esm({
                   isDown ? "text-primary" : "text-muted-foreground",
                   "hover:bg-muted",
                   "active:bg-muted",
-                  "transition-colors duration-100",
+                  "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
                   "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
                   styles.button
@@ -31669,7 +31767,7 @@ var init_LikertScale = __esm({
       md: "text-base",
       lg: "text-lg"
     };
-    LikertScale = React73__default.forwardRef(
+    LikertScale = React74__default.forwardRef(
       ({
         question,
         options = DEFAULT_LIKERT_OPTIONS,
@@ -31681,7 +31779,7 @@ var init_LikertScale = __esm({
         variant = "radios",
         className
       }, ref) => {
-        const groupId = React73__default.useId();
+        const groupId = React74__default.useId();
         const eventBus = useEventBus();
         const handleSelect = useCallback(
           (next) => {
@@ -31734,7 +31832,7 @@ var init_LikertScale = __esm({
                         disabled,
                         onClick: () => handleSelect(opt.value),
                         className: cn(
-                          "flex-1 text-center font-medium transition-colors duration-100",
+                          "flex-1 text-center font-medium transition-colors duration-instant",
                           "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
                           "disabled:cursor-not-allowed",
                           "rounded-none gap-0 shadow-none border-none",
@@ -33963,7 +34061,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(React73__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -34832,7 +34930,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 ?? void 0, s.isTerminal ?? void 0, tc, maxTC);
-          return /* @__PURE__ */ jsxs(React73__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               AvlState,
               {
@@ -35036,7 +35134,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(React73__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(React74__default.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
           crumb.href ? /* @__PURE__ */ jsx(
             "a",
@@ -35394,7 +35492,7 @@ var init_Section = __esm({
       as: Component = "section"
     }) => {
       const hasHeader = title || description || action;
-      return React73__default.createElement(
+      return React74__default.createElement(
         Component,
         {
           className: cn(
@@ -35461,7 +35559,7 @@ var init_Sidebar = __esm({
           variant: "ghost",
           onClick: item.onClick,
           className: cn(
-            "w-full flex items-center gap-3 px-3 py-2.5 transition-all duration-[var(--transition-fast)] group relative",
+            "w-full flex items-center gap-3 px-3 py-2.5 transition-all duration-fast group relative",
             "rounded-sm border-[length:var(--border-width-thin)] border-transparent",
             isActive ? [
               "bg-primary text-primary-foreground",
@@ -35535,7 +35633,7 @@ var init_Sidebar = __esm({
           className: cn(
             "flex flex-col h-full",
             "bg-card border-e border-border",
-            "transition-all duration-300 ease-in-out",
+            "transition-all duration-normal ease-standard",
             collapsed ? "w-20" : "w-64",
             className
           ),
@@ -35768,7 +35866,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(React73__default.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React74__default.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -37538,6 +37636,7 @@ var init_molecules2 = __esm({
     init_InputGroup();
     init_Menu();
     init_Modal();
+    init_PageTransition();
     init_Pagination();
     init_Popover();
     init_Coachmark();
@@ -38588,7 +38687,7 @@ var init_DetailPanel = __esm({
   }
 });
 function extractTitle(children) {
-  if (!React73__default.isValidElement(children)) return void 0;
+  if (!React74__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -38938,12 +39037,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 = React73__default.useMemo(() => {
+      const normalizedInitialData = React74__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 = React73__default.useMemo(() => {
+      const entityDerivedFields = React74__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
         if (!resolvedEntity) return void 0;
         return resolvedEntity.fields.map(
@@ -38964,16 +39063,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] = React73__default.useState(
+      const [formData, setFormData] = React74__default.useState(
         normalizedInitialData
       );
-      const [collapsedSections, setCollapsedSections] = React73__default.useState(
+      const [collapsedSections, setCollapsedSections] = React74__default.useState(
         /* @__PURE__ */ new Set()
       );
-      const [submitError, setSubmitError] = React73__default.useState(null);
-      const formRef = React73__default.useRef(null);
+      const [submitError, setSubmitError] = React74__default.useState(null);
+      const formRef = React74__default.useRef(null);
       const formMode = props.mode;
-      const mountedRef = React73__default.useRef(false);
+      const mountedRef = React74__default.useRef(false);
       if (!mountedRef.current) {
         mountedRef.current = true;
         debug("forms", "mount", {
@@ -38986,7 +39085,7 @@ var init_Form = __esm({
         });
       }
       const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-      const evalContext = React73__default.useMemo(
+      const evalContext = React74__default.useMemo(
         () => ({
           formValues: formData,
           globalVariables: externalContext?.globalVariables ?? {},
@@ -38995,7 +39094,7 @@ var init_Form = __esm({
         }),
         [formData, externalContext]
       );
-      React73__default.useEffect(() => {
+      React74__default.useEffect(() => {
         debug("forms", "initialData-sync", {
           mode: formMode,
           normalizedInitialData,
@@ -39006,7 +39105,7 @@ var init_Form = __esm({
           setFormData(normalizedInitialData);
         }
       }, [normalizedInitialData]);
-      const processCalculations = React73__default.useCallback(
+      const processCalculations = React74__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!hiddenCalculations.length) return;
           const context = {
@@ -39031,7 +39130,7 @@ var init_Form = __esm({
         },
         [hiddenCalculations, externalContext, eventBus]
       );
-      const checkViolations = React73__default.useCallback(
+      const checkViolations = React74__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!violationTriggers.length) return;
           const context = {
@@ -39069,7 +39168,7 @@ var init_Form = __esm({
         processCalculations(name, newFormData);
         checkViolations(name, newFormData);
       };
-      const isFieldVisible = React73__default.useCallback(
+      const isFieldVisible = React74__default.useCallback(
         (fieldName) => {
           const condition = conditionalFields[fieldName];
           if (!condition) return true;
@@ -39077,7 +39176,7 @@ var init_Form = __esm({
         },
         [conditionalFields, evalContext]
       );
-      const isSectionVisible = React73__default.useCallback(
+      const isSectionVisible = React74__default.useCallback(
         (section) => {
           if (!section.condition) return true;
           return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -39153,7 +39252,7 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onCancel}`);
         }
       };
-      const renderField = React73__default.useCallback(
+      const renderField = React74__default.useCallback(
         (field) => {
           const fieldName = field.name || field.field;
           if (!fieldName) return null;
@@ -39174,7 +39273,7 @@ var init_Form = __esm({
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
       const effectiveFields = entityDerivedFields ?? fields;
-      const normalizedFields = React73__default.useMemo(() => {
+      const normalizedFields = React74__default.useMemo(() => {
         if (!effectiveFields || effectiveFields.length === 0) return [];
         return effectiveFields.map((field) => {
           if (typeof field === "string") {
@@ -39198,7 +39297,7 @@ var init_Form = __esm({
           return field;
         });
       }, [effectiveFields, resolvedEntity]);
-      const schemaFields = React73__default.useMemo(() => {
+      const schemaFields = React74__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
           debugGroup(`Form: ${entityName || "unknown"}`);
@@ -39208,7 +39307,7 @@ var init_Form = __esm({
         }
         return normalizedFields.map(renderField).filter(Boolean);
       }, [normalizedFields, renderField, entityName, conditionalFields]);
-      const sectionElements = React73__default.useMemo(() => {
+      const sectionElements = React74__default.useMemo(() => {
         if (!sections || sections.length === 0) return null;
         return sections.map((section) => {
           if (!isSectionVisible(section)) {
@@ -39891,7 +39990,7 @@ var init_List = __esm({
           Box,
           {
             className: cn(
-              "h-full rounded-full transition-all duration-500",
+              "h-full rounded-full transition-all duration-slow",
               clampedValue >= 100 ? "bg-success" : clampedValue >= 70 ? "bg-info" : clampedValue >= 40 ? "bg-warning" : "bg-muted-foreground"
             ),
             style: { width: `${clampedValue}%` }
@@ -39933,7 +40032,7 @@ var init_List = __esm({
         if (entity && typeof entity === "object" && "id" in entity) return [entity];
         return [];
       }, [entity]);
-      const getItemActions = React73__default.useCallback(
+      const getItemActions = React74__default.useCallback(
         (item) => {
           if (!itemActions) return [];
           if (typeof itemActions === "function") {
@@ -40060,7 +40159,7 @@ var init_List = __esm({
             {
               className: cn(
                 "group flex items-center gap-5 px-6 py-5",
-                "transition-all duration-300 ease-out",
+                "transition-all duration-normal ease-standard",
                 hasExplicitClick && "cursor-pointer",
                 // Hover state
                 "hover:bg-muted/80",
@@ -40167,7 +40266,7 @@ var init_List = __esm({
                       variant: "ghost",
                       action: editAction.event,
                       className: cn(
-                        "p-2 rounded-lg transition-all duration-200",
+                        "p-2 rounded-lg transition-all duration-fast",
                         "hover:bg-primary/10 hover:text-primary",
                         "text-muted-foreground",
                         "active:scale-95"
@@ -40183,7 +40282,7 @@ var init_List = __esm({
                       variant: "ghost",
                       action: viewAction.event,
                       className: cn(
-                        "p-2 rounded-lg transition-all duration-200",
+                        "p-2 rounded-lg transition-all duration-fast",
                         "hover:bg-muted hover:text-foreground",
                         "text-muted-foreground",
                         "active:scale-95"
@@ -40205,7 +40304,7 @@ var init_List = __esm({
                           {
                             variant: "ghost",
                             className: cn(
-                              "p-2 rounded-lg transition-all duration-200",
+                              "p-2 rounded-lg transition-all duration-fast",
                               "hover:bg-muted hover:shadow-sm",
                               "text-muted-foreground hover:text-foreground",
                               "active:scale-95"
@@ -40417,7 +40516,7 @@ var init_MediaGallery = __esm({
         [selectable, selectedItems, selectionEvent, eventBus]
       );
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React73__default.useMemo(() => {
+      const items = React74__default.useMemo(() => {
         if (propItems && propItems.length > 0) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -40495,7 +40594,7 @@ var init_MediaGallery = __esm({
                   {
                     className: cn(
                       "group relative overflow-hidden rounded-md cursor-pointer",
-                      "border-2 transition-all duration-200",
+                      "border-2 transition-all duration-fast",
                       isSelected ? "border-primary ring-2 ring-primary/30" : "border-transparent hover:border-border",
                       ASPECT_CLASSES[aspectRatio]
                     ),
@@ -40516,14 +40615,14 @@ var init_MediaGallery = __esm({
                         {
                           className: cn(
                             "absolute inset-0 bg-foreground/0 group-hover:bg-foreground/20",
-                            "transition-colors duration-200 flex items-center justify-center"
+                            "transition-colors duration-fast flex items-center justify-center"
                           ),
                           children: /* @__PURE__ */ jsx(
                             Icon,
                             {
                               icon: ZoomIn,
                               size: "md",
-                              className: "text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                              className: "text-white opacity-0 group-hover:opacity-100 transition-opacity duration-fast"
                             }
                           )
                         }
@@ -40581,7 +40680,7 @@ var init_MediaGallery = __esm({
   }
 });
 function extractTitle2(children) {
-  if (!React73__default.isValidElement(children)) return void 0;
+  if (!React74__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -40836,7 +40935,7 @@ var init_debugRegistry = __esm({
   }
 });
 function useDebugData() {
-  const [data, setData] = React73.useState(() => ({
+  const [data, setData] = React74.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -40850,7 +40949,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -40959,12 +41058,12 @@ function layoutGraph(states, transitions, initialState, width, height) {
   return positions;
 }
 function WalkMinimap() {
-  const [walkStep, setWalkStep] = React73.useState(null);
-  const [traits2, setTraits] = React73.useState([]);
-  const [coveredEdges, setCoveredEdges] = React73.useState([]);
-  const [completedTraits, setCompletedTraits] = React73.useState(/* @__PURE__ */ new Set());
-  const prevTraitRef = React73.useRef(null);
-  React73.useEffect(() => {
+  const [walkStep, setWalkStep] = React74.useState(null);
+  const [traits2, setTraits] = React74.useState([]);
+  const [coveredEdges, setCoveredEdges] = React74.useState([]);
+  const [completedTraits, setCompletedTraits] = React74.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React74.useRef(null);
+  React74.useEffect(() => {
     const interval = setInterval(() => {
       const w = window;
       const step = w.__orbitalWalkStep;
@@ -41400,15 +41499,15 @@ var init_EntitiesTab = __esm({
 });
 function EventFlowTab({ events: events2 }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React73.useState("all");
-  const containerRef = React73.useRef(null);
-  const [autoScroll, setAutoScroll] = React73.useState(true);
-  React73.useEffect(() => {
+  const [filter, setFilter] = React74.useState("all");
+  const containerRef = React74.useRef(null);
+  const [autoScroll, setAutoScroll] = React74.useState(true);
+  React74.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React73.useMemo(() => {
+  const filteredEvents = React74.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -41524,7 +41623,7 @@ var init_EventFlowTab = __esm({
 });
 function GuardsPanel({ guards }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React73.useState("all");
+  const [filter, setFilter] = React74.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -41537,7 +41636,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React73.useMemo(() => {
+  const filteredGuards = React74.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -41700,10 +41799,10 @@ function EffectBadge({ effect }) {
 }
 function TransitionTimeline({ transitions }) {
   const { t } = useTranslate();
-  const containerRef = React73.useRef(null);
-  const [autoScroll, setAutoScroll] = React73.useState(true);
-  const [expandedId, setExpandedId] = React73.useState(null);
-  React73.useEffect(() => {
+  const containerRef = React74.useRef(null);
+  const [autoScroll, setAutoScroll] = React74.useState(true);
+  const [expandedId, setExpandedId] = React74.useState(null);
+  React74.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -41983,9 +42082,9 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log19, setLog] = React73.useState([]);
-  const prevStatesRef = React73.useRef(/* @__PURE__ */ new Map());
-  React73.useEffect(() => {
+  const [log19, setLog] = React74.useState([]);
+  const prevStatesRef = React74.useRef(/* @__PURE__ */ new Map());
+  React74.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -42154,10 +42253,10 @@ function VerifyModePanel({
   localCount
 }) {
   const { t } = useTranslate();
-  const [expanded, setExpanded] = React73.useState(true);
-  const scrollRef = React73.useRef(null);
-  const prevCountRef = React73.useRef(0);
-  React73.useEffect(() => {
+  const [expanded, setExpanded] = React74.useState(true);
+  const scrollRef = React74.useRef(null);
+  const prevCountRef = React74.useRef(0);
+  React74.useEffect(() => {
     if (expanded && transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -42214,10 +42313,10 @@ function RuntimeDebugger({
   schema
 }) {
   const { t } = useTranslate();
-  const [isCollapsed, setIsCollapsed] = React73.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React73.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React74.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React74.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -42226,7 +42325,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -42746,7 +42845,7 @@ var init_StatCard = __esm({
       const labelToUse = propLabel ?? propTitle;
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleActionClick = React73__default.useCallback(() => {
+      const handleActionClick = React74__default.useCallback(() => {
         if (action?.event) {
           eventBus.emit(`UI:${action.event}`, {});
         }
@@ -42757,7 +42856,7 @@ var init_StatCard = __esm({
       const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
       const isLoading = externalLoading ?? false;
       const error = externalError;
-      const computeMetricValue = React73__default.useCallback(
+      const computeMetricValue = React74__default.useCallback(
         (metric, items) => {
           if (metric.value !== void 0) {
             return metric.value;
@@ -42796,7 +42895,7 @@ var init_StatCard = __esm({
         },
         []
       );
-      const schemaStats = React73__default.useMemo(() => {
+      const schemaStats = React74__default.useMemo(() => {
         if (!metrics || metrics.length === 0) return null;
         return metrics.map((metric) => ({
           label: metric.label,
@@ -42804,7 +42903,7 @@ var init_StatCard = __esm({
           format: metric.format
         }));
       }, [metrics, data, computeMetricValue]);
-      const calculatedTrend = React73__default.useMemo(() => {
+      const calculatedTrend = React74__default.useMemo(() => {
         if (manualTrend !== void 0) return manualTrend;
         if (previousValue === void 0 || currentValue2 === void 0)
           return void 0;
@@ -43444,8 +43543,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     InlineActivityStream = ({ activities, autoScroll = true, className }) => {
-      const endRef = React73__default.useRef(null);
-      React73__default.useEffect(() => {
+      const endRef = React74__default.useRef(null);
+      React74__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [activities.length, autoScroll]);
@@ -43539,7 +43638,7 @@ var init_SubagentTracePanel = __esm({
     };
     SubagentRichCard = ({ subagent }) => {
       const { t } = useTranslate();
-      const activities = React73__default.useMemo(
+      const activities = React74__default.useMemo(
         () => subagentMessagesToActivities(subagent.messages),
         [subagent.messages]
       );
@@ -43616,8 +43715,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     CoordinatorConversation = ({ messages, autoScroll = true, className }) => {
-      const endRef = React73__default.useRef(null);
-      React73__default.useEffect(() => {
+      const endRef = React74__default.useRef(null);
+      React74__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [messages.length, autoScroll]);
@@ -44052,7 +44151,7 @@ var init_Timeline = __esm({
     }) => {
       const { t } = useTranslate();
       const entityData = entity ?? [];
-      const items = React73__default.useMemo(() => {
+      const items = React74__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -44154,7 +44253,7 @@ var init_Timeline = __esm({
   }
 });
 function extractToastProps(children) {
-  if (!React73__default.isValidElement(children)) {
+  if (!React74__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -44196,7 +44295,7 @@ var init_ToastSlot = __esm({
         eventBus.emit(`${prefix}CLOSE`);
       };
       if (!isVisible) return null;
-      const isCustomContent = React73__default.isValidElement(children) && !message;
+      const isCustomContent = React74__default.isValidElement(children) && !message;
       return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
         Toast,
         {
@@ -44244,6 +44343,7 @@ var init_component_registry_generated = __esm({
     init_LayoutPatterns();
     init_BranchingLogicBuilder();
     init_Breadcrumb();
+    init_ButtonGroup();
     init_CTABanner();
     init_CalendarGrid();
     init_Canvas();
@@ -44314,8 +44414,8 @@ var init_component_registry_generated = __esm({
     init_FlipContainer();
     init_FloatingActionButton();
     init_Form();
-    init_FormSection();
     init_FormField();
+    init_FormSection();
     init_FormSectionHeader();
     init_GameAudioToggle();
     init_GameHud();
@@ -44501,6 +44601,7 @@ var init_component_registry_generated = __esm({
       "BranchingLogicBuilder": BranchingLogicBuilder,
       "Breadcrumb": Breadcrumb,
       "Button": ButtonPattern,
+      "ButtonGroup": ButtonGroup,
       "ButtonPattern": ButtonPattern,
       "CTABanner": CTABanner,
       "CalendarGrid": CalendarGrid,
@@ -44574,7 +44675,6 @@ var init_component_registry_generated = __esm({
       "FlipContainer": FlipContainer,
       "FloatingActionButton": FloatingActionButton,
       "Form": Form,
-      "FormActions": FormActions,
       "FormField": FormField,
       "FormLayout": FormLayout,
       "FormSectionHeader": FormSectionHeader,
@@ -44754,7 +44854,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React73__default.createElement(
+  return React74__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -44796,7 +44896,7 @@ function enrichFormFields(fields, entityDef) {
       }
       return { name: field, label: field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase()) };
     }
-    if (field && typeof field === "object" && !Array.isArray(field) && !React73__default.isValidElement(field) && !(field instanceof Date)) {
+    if (field && typeof field === "object" && !Array.isArray(field) && !React74__default.isValidElement(field) && !(field instanceof Date)) {
       const obj = field;
       const fieldName = typeof obj.name === "string" ? obj.name : typeof obj.field === "string" ? obj.field : void 0;
       if (!fieldName) return field;
@@ -45249,7 +45349,7 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
         const key = `${parentId}-${index}-trait:${traitName}`;
         return /* @__PURE__ */ jsx(TraitFrame, { traitName }, key);
       }
-      return /* @__PURE__ */ jsx(React73__default.Fragment, { children: child }, `${parentId}-${index}`);
+      return /* @__PURE__ */ jsx(React74__default.Fragment, { children: child }, `${parentId}-${index}`);
     }
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
@@ -45302,14 +45402,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 (React73__default.isValidElement(value)) return false;
+  if (React74__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
   return "type" in record && typeof record.type === "string" && getComponentForPattern$1(record.type) !== null;
 }
 function isPlainConfigObject(value) {
-  if (React73__default.isValidElement(value)) return false;
+  if (React74__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
@@ -45437,7 +45537,7 @@ function SlotContentRenderer({
     for (const slotKey of CONTENT_NODE_SLOTS) {
       const slotVal = restProps[slotKey];
       if (slotVal === void 0 || slotVal === null) continue;
-      if (React73__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
+      if (React74__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
       if (Array.isArray(slotVal) || typeof slotVal === "object" && "type" in slotVal) {
         nodeSlotOverrides[slotKey] = renderPatternChildren(
           slotVal,
@@ -45490,7 +45590,7 @@ function SlotContentRenderer({
     const resolvedItems = Array.isArray(entityVal) && entityVal[0] !== "fn" ? entityVal : null;
     if (resolvedItems && resolvedItems.length > 0 && !finalProps.fields && !finalProps.columns) {
       const sample = resolvedItems[0];
-      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React73__default.isValidElement(sample) && !(sample instanceof Date)) {
+      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React74__default.isValidElement(sample) && !(sample instanceof Date)) {
         const keys = Object.keys(sample).filter((k) => k !== "id" && k !== "_id");
         finalProps.fields = keys.map((k, i) => ({ name: k, variant: i === 0 ? "h4" : "body" }));
       }
@@ -45769,6 +45869,7 @@ var init_atoms = __esm({
     init_Typography();
     init_ThemeToggle();
     init_Overlay();
+    init_Presence();
     init_FlipContainer();
     init_Dialog();
     init_Aside();
@@ -48135,4 +48236,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioToggle, GameHud, GameIcon, GameMenu, GameShell, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, Modal, ModalSlot, ModuleCard, Navigation, NodeSlotEditor, NotifyListener, NumberStepper, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, RichBlockEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, ServiceCatalog, SharedEntityStoreContext, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateGraph, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StepFlow, StepFlowOrganism, SubagentTracePanel, 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, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VersionDiff, ViolationAlert, VoteStack, WizardContainer, WizardNavigation, WizardProgress, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate115 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioToggle, GameHud, GameIcon, GameMenu, GameShell, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, Modal, ModalSlot, ModuleCard, Navigation, NodeSlotEditor, NotifyListener, NumberStepper, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, PageTransition, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, Presence, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, RichBlockEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, ServiceCatalog, SharedEntityStoreContext, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateGraph, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StepFlow, StepFlowOrganism, SubagentTracePanel, 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, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VersionDiff, ViolationAlert, VoteStack, WizardContainer, WizardNavigation, WizardProgress, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useOrbitalHistory, usePresence, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate115 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };