@almadar/ui 2.24.8 → 2.24.9

package/dist/components/index.js

@@ -1,5 +1,5 @@
-import * as React88 from 'react';
-import React88__default, { useCallback, createContext, useState, useRef, useLayoutEffect, useEffect, lazy, useContext, useMemo, useId, Suspense, useSyncExternalStore } from 'react';
+import * as React90 from 'react';
+import React90__default, { useCallback, createContext, useState, useRef, useEffect, useLayoutEffect, lazy, useContext, useMemo, useId, Suspense, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons from 'lucide-react';
@@ -215,7 +215,8 @@ var variantStyles = {
   ].join(" "),
   ghost: [
     "bg-transparent text-muted-foreground",
-    "hover:text-foreground hover:bg-muted",
+    "border border-transparent",
+    "hover:text-primary-foreground hover:bg-primary hover:border-primary",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [
@@ -268,7 +269,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React88__default.isValidElement(value)) {
+  if (React90__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -277,7 +278,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React88__default.forwardRef(
+var Button = React90__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -336,7 +337,7 @@ var Button = React88__default.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React88__default.forwardRef(
+var Input = React90__default.forwardRef(
   ({
     className,
     inputType,
@@ -448,7 +449,7 @@ var Input = React88__default.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Label = React88__default.forwardRef(
+var Label = React90__default.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "label",
@@ -468,7 +469,7 @@ var Label = React88__default.forwardRef(
   }
 );
 Label.displayName = "Label";
-var Textarea = React88__default.forwardRef(
+var Textarea = React90__default.forwardRef(
   ({ className, error, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -491,7 +492,7 @@ var Textarea = React88__default.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Select = React88__default.forwardRef(
+var Select = React90__default.forwardRef(
   ({ className, options, placeholder, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxs(
@@ -527,7 +528,7 @@ var Select = React88__default.forwardRef(
   }
 );
 Select.displayName = "Select";
-var Checkbox = React88__default.forwardRef(
+var Checkbox = React90__default.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -603,7 +604,7 @@ var shadowStyles = {
   md: "shadow",
   lg: "shadow-lg"
 };
-var Card = React88__default.forwardRef(
+var Card = React90__default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -639,9 +640,9 @@ var Card = React88__default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React88__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React90__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React88__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React90__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -654,11 +655,11 @@ var CardTitle = React88__default.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React88__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React90__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React88__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React90__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -704,7 +705,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React88__default.forwardRef(
+var Badge = React90__default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
     const iconSizes2 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
     const resolvedIcon = typeof icon === "string" ? (() => {
@@ -737,7 +738,7 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React88__default.forwardRef(
+var Spinner = React90__default.forwardRef(
   ({ className, size = "md", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1002,7 +1003,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React88__default.forwardRef(
+var Box = React90__default.forwardRef(
   ({
     padding,
     paddingX,
@@ -1349,7 +1350,7 @@ var ProgressBar = ({
   return null;
 };
 ProgressBar.displayName = "ProgressBar";
-var Radio = React88__default.forwardRef(
+var Radio = React90__default.forwardRef(
   ({
     label,
     helperText,
@@ -1453,7 +1454,7 @@ var Radio = React88__default.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React88.forwardRef(
+var Switch = React90.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -1464,10 +1465,10 @@ var Switch = React88.forwardRef(
     name,
     className
   }, ref) => {
-    const [isChecked, setIsChecked] = React88.useState(
+    const [isChecked, setIsChecked] = React90.useState(
       checked !== void 0 ? checked : defaultChecked
     );
-    React88.useEffect(() => {
+    React90.useEffect(() => {
       if (checked !== void 0) {
         setIsChecked(checked);
       }
@@ -2261,8 +2262,8 @@ var LawReferenceTooltip = ({
   position = "top",
   className
 }) => {
-  const [isVisible, setIsVisible] = React88__default.useState(false);
-  const timeoutRef = React88__default.useRef(null);
+  const [isVisible, setIsVisible] = React90__default.useState(false);
+  const timeoutRef = React90__default.useRef(null);
   const handleMouseEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -2271,7 +2272,7 @@ var LawReferenceTooltip = ({
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setIsVisible(false);
   };
-  React88__default.useEffect(() => {
+  React90__default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -2459,7 +2460,7 @@ var sizeStyles5 = {
   md: "w-2.5 h-2.5",
   lg: "w-3 h-3"
 };
-var StatusDot = React88__default.forwardRef(
+var StatusDot = React90__default.forwardRef(
   ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
@@ -2506,7 +2507,7 @@ var iconMap = {
   down: TrendingDown,
   flat: ArrowRight
 };
-var TrendIndicator = React88__default.forwardRef(
+var TrendIndicator = React90__default.forwardRef(
   ({
     className,
     value,
@@ -2565,7 +2566,7 @@ var thumbSizes = {
   md: "w-4 h-4",
   lg: "w-5 h-5"
 };
-var RangeSlider = React88__default.forwardRef(
+var RangeSlider = React90__default.forwardRef(
   ({
     className,
     min = 0,
@@ -3097,7 +3098,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React88__default.forwardRef(
+var ContentSection = React90__default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -3598,6 +3599,289 @@ function getTileDimensions(variant, size) {
   }
   return { width: size, height: size };
 }
+var initialStyles = {
+  "fade-up": { opacity: 0, transform: "translateY(24px)" },
+  "fade-down": { opacity: 0, transform: "translateY(-24px)" },
+  "fade-in": { opacity: 0 },
+  "fade-left": { opacity: 0, transform: "translateX(24px)" },
+  "fade-right": { opacity: 0, transform: "translateX(-24px)" },
+  "scale": { opacity: 0, transform: "scale(0.92)" },
+  "scale-up": { opacity: 0, transform: "scale(0.92) translateY(16px)" },
+  "none": {}
+};
+var animatedStyles = {
+  "fade-up": { opacity: 1, transform: "translateY(0)" },
+  "fade-down": { opacity: 1, transform: "translateY(0)" },
+  "fade-in": { opacity: 1 },
+  "fade-left": { opacity: 1, transform: "translateX(0)" },
+  "fade-right": { opacity: 1, transform: "translateX(0)" },
+  "scale": { opacity: 1, transform: "scale(1)" },
+  "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
+  "none": {}
+};
+var AnimatedReveal = React90__default.forwardRef(
+  ({
+    trigger = "scroll",
+    animation = "fade-up",
+    duration = 600,
+    delay = 0,
+    threshold = 0.15,
+    once = true,
+    animate: manualAnimate,
+    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
+    children,
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    const [isAnimated, setIsAnimated] = useState(false);
+    const internalRef = useRef(null);
+    const hasAnimated = useRef(false);
+    const setRef = useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    useEffect(() => {
+      if (trigger !== "scroll") return;
+      const el = internalRef.current;
+      if (!el) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            if (once && hasAnimated.current) return;
+            hasAnimated.current = true;
+            setIsAnimated(true);
+          } else if (!once) {
+            setIsAnimated(false);
+          }
+        },
+        { threshold }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [trigger, threshold, once]);
+    const handleMouseEnter = trigger === "hover" ? () => setIsAnimated(true) : void 0;
+    const handleMouseLeave = trigger === "hover" ? () => {
+      if (!once || !hasAnimated.current) {
+        hasAnimated.current = true;
+        setIsAnimated(false);
+      }
+    } : void 0;
+    useEffect(() => {
+      if (trigger === "manual" && manualAnimate !== void 0) {
+        setIsAnimated(manualAnimate);
+      }
+    }, [trigger, manualAnimate]);
+    const active = isAnimated;
+    const currentStyle = active ? animatedStyles[animation] : initialStyles[animation];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        className: cn("will-change-[opacity,transform]", className),
+        style: {
+          ...currentStyle,
+          transitionProperty: "opacity, transform",
+          transitionDuration: `${duration}ms`,
+          transitionDelay: `${delay}ms`,
+          transitionTimingFunction: easing,
+          ...style
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: typeof children === "function" ? children(active) : children
+      }
+    );
+  }
+);
+AnimatedReveal.displayName = "AnimatedReveal";
+function useFetchedSvg(src) {
+  const [svg, setSvg] = useState(null);
+  const cache = useRef({});
+  useEffect(() => {
+    if (!src) {
+      setSvg(null);
+      return;
+    }
+    if (cache.current[src]) {
+      setSvg(cache.current[src]);
+      return;
+    }
+    let cancelled = false;
+    fetch(src).then((res) => {
+      if (!res.ok) throw new Error(`Failed to fetch SVG: ${res.status}`);
+      return res.text();
+    }).then((text) => {
+      if (cancelled) return;
+      cache.current[src] = text;
+      setSvg(text);
+    }).catch(() => {
+      if (!cancelled) setSvg(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+  return svg;
+}
+function applyDrawAnimation(container, animate, duration, delay, easing) {
+  const paths = container.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+  paths.forEach((el) => {
+    if ("getTotalLength" in el && typeof el.getTotalLength === "function") {
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = `${len}`;
+      el.style.strokeDashoffset = animate ? "0" : `${len}`;
+      el.style.transition = `stroke-dashoffset ${duration}ms ${easing} ${delay}ms`;
+    }
+  });
+}
+function applyFillAnimation(container, animate, duration, delay, easing, fillColor) {
+  const paths = container.querySelectorAll("path, circle, ellipse, rect, polygon");
+  paths.forEach((el) => {
+    if ("getTotalLength" in el && typeof el.getTotalLength === "function") {
+      const geom = el;
+      const len = geom.getTotalLength();
+      geom.style.strokeDasharray = `${len}`;
+      geom.style.strokeDashoffset = animate ? "0" : `${len}`;
+      geom.style.transition = `stroke-dashoffset ${duration * 0.6}ms ${easing} ${delay}ms, fill-opacity ${duration * 0.4}ms ${easing} ${delay + duration * 0.6}ms`;
+    }
+    if (fillColor) el.style.fill = fillColor;
+    el.style.fillOpacity = animate ? "1" : "0";
+  });
+}
+function applyPulseAnimation(container, animate, duration) {
+  const svg = container.querySelector("svg");
+  if (!svg) return;
+  if (animate) {
+    svg.style.animation = `ag-pulse ${duration}ms ease-in-out infinite`;
+  } else {
+    svg.style.animation = "none";
+  }
+}
+function applyMorphAnimation(container, animate, duration, delay, easing) {
+  const paths = container.querySelectorAll("path, circle, ellipse, rect, polygon");
+  paths.forEach((el) => {
+    el.style.transition = `all ${duration}ms ${easing} ${delay}ms`;
+    el.style.transform = animate ? "scale(1)" : "scale(0)";
+    el.style.transformOrigin = "center";
+    el.style.opacity = animate ? "1" : "0";
+  });
+}
+var AnimatedGraphic = React90__default.forwardRef(
+  ({
+    src,
+    svgContent,
+    animation = "draw",
+    animate = false,
+    duration = 1200,
+    delay = 0,
+    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
+    width,
+    height,
+    strokeColor,
+    fillColor,
+    alt,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const containerRef = useRef(null);
+    const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
+    const resolvedSvg = svgContent ?? fetchedSvg;
+    const prevAnimateRef = useRef(animate);
+    const setRef = React90__default.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el || !strokeColor) return;
+      const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+      paths.forEach((p2) => {
+        p2.style.stroke = strokeColor;
+      });
+    }, [resolvedSvg, strokeColor]);
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el || !resolvedSvg) return;
+      if (animation === "draw" || animation === "fill") {
+        const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+        paths.forEach((p2) => {
+          if ("getTotalLength" in p2 && typeof p2.getTotalLength === "function") {
+            const len = p2.getTotalLength();
+            p2.style.strokeDasharray = `${len}`;
+            p2.style.strokeDashoffset = `${len}`;
+          }
+          if (animation === "fill") {
+            p2.style.fillOpacity = "0";
+          }
+        });
+      }
+      if (animation === "morph") {
+        const paths = el.querySelectorAll("path, circle, ellipse, rect, polygon");
+        paths.forEach((p2) => {
+          p2.style.transform = "scale(0)";
+          p2.style.transformOrigin = "center";
+          p2.style.opacity = "0";
+        });
+      }
+    }, [resolvedSvg, animation]);
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const id = requestAnimationFrame(() => {
+        switch (animation) {
+          case "draw":
+            applyDrawAnimation(el, animate, duration, delay, easing);
+            break;
+          case "fill":
+            applyFillAnimation(el, animate, duration, delay, easing, fillColor);
+            break;
+          case "pulse":
+            applyPulseAnimation(el, animate, duration);
+            break;
+          case "morph":
+            applyMorphAnimation(el, animate, duration, delay, easing);
+            break;
+        }
+      });
+      prevAnimateRef.current = animate;
+      return () => cancelAnimationFrame(id);
+    }, [animate, animation, duration, delay, easing, fillColor, resolvedSvg]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `@keyframes ag-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.85; } }` }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: setRef,
+          className: cn("inline-flex items-center justify-center", className),
+          style: { width, height, ...style },
+          role: alt ? "img" : void 0,
+          "aria-label": alt,
+          ...props,
+          children: resolvedSvg ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-full h-full [&>svg]:w-full [&>svg]:h-full",
+              dangerouslySetInnerHTML: { __html: resolvedSvg }
+            }
+          ) : children
+        }
+      )
+    ] });
+  }
+);
+AnimatedGraphic.displayName = "AnimatedGraphic";
 var heartIcon = (filled, size) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -3682,9 +3966,9 @@ function ScoreDisplay({
   ...rest
 }) {
   const resolvedValue = typeof value === "number" && !Number.isNaN(value) ? value : typeof rest.score === "number" && !Number.isNaN(rest.score) ? rest.score : 0;
-  const [displayValue, setDisplayValue] = React88.useState(resolvedValue);
-  const [isAnimating, setIsAnimating] = React88.useState(false);
-  React88.useEffect(() => {
+  const [displayValue, setDisplayValue] = React90.useState(resolvedValue);
+  const [isAnimating, setIsAnimating] = React90.useState(false);
+  React90.useEffect(() => {
     if (!animated || displayValue === resolvedValue) {
       setDisplayValue(resolvedValue);
       return;
@@ -3757,9 +4041,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React88.useState(false);
+  const [isPressed, setIsPressed] = React90.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React88.useCallback(
+  const handlePointerDown = React90.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -3769,7 +4053,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React88.useCallback(
+  const handlePointerUp = React90.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -3779,7 +4063,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React88.useCallback(
+  const handlePointerLeave = React90.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -4605,9 +4889,9 @@ function MiniMap({
   viewportRect,
   className
 }) {
-  const canvasRef = React88.useRef(null);
-  const frameRef = React88.useRef(0);
-  React88.useEffect(() => {
+  const canvasRef = React90.useRef(null);
+  const frameRef = React90.useRef(0);
+  React90.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -4848,7 +5132,7 @@ var ErrorState = ({
   );
 };
 ErrorState.displayName = "ErrorState";
-var ErrorBoundary = class extends React88__default.Component {
+var ErrorBoundary = class extends React90__default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "reset", () => {
@@ -6584,8 +6868,8 @@ var Menu = ({
     "bottom-start": "top-full left-0 mt-2",
     "bottom-end": "top-full right-0 mt-2"
   };
-  const triggerChild = React88__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
-  const triggerElement = React88__default.cloneElement(
+  const triggerChild = React90__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
+  const triggerElement = React90__default.cloneElement(
     triggerChild,
     {
       ref: triggerRef,
@@ -7090,8 +7374,8 @@ var Popover = ({
     onMouseEnter: handleOpen,
     onMouseLeave: handleClose
   };
-  const childElement = React88__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-  const triggerElement = React88__default.cloneElement(
+  const childElement = React90__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const triggerElement = React90__default.cloneElement(
     childElement,
     {
       ref: triggerRef,
@@ -7846,8 +8130,8 @@ var Tooltip = ({
       if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
     };
   }, []);
-  const triggerElement = React88__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-  const trigger = React88__default.cloneElement(triggerElement, {
+  const triggerElement = React90__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const trigger = React90__default.cloneElement(triggerElement, {
     ref: triggerRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -8096,7 +8380,7 @@ var WizardProgress = ({
       children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: steps.map((step, index) => {
         const isActive = index === currentStep;
         const isCompleted = index < currentStep;
-        return /* @__PURE__ */ jsxs(React88__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React90__default.Fragment, { children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -8226,7 +8510,7 @@ var WizardNavigation = ({
   );
 };
 WizardNavigation.displayName = "WizardNavigation";
-var MarkdownContent = React88__default.memo(
+var MarkdownContent = React90__default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
     const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -8328,7 +8612,7 @@ var MarkdownContent = React88__default.memo(
   (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
 );
 MarkdownContent.displayName = "MarkdownContent";
-var CodeBlock = React88__default.memo(
+var CodeBlock = React90__default.memo(
   ({
     code: rawCode,
     language = "text",
@@ -9449,8 +9733,8 @@ function DPad({
 }) {
   const eventBus = useEventBus();
   const sizes = sizeMap15[size];
-  const [activeDirections, setActiveDirections] = React88.useState(/* @__PURE__ */ new Set());
-  const handlePress = React88.useCallback(
+  const [activeDirections, setActiveDirections] = React90.useState(/* @__PURE__ */ new Set());
+  const handlePress = React90.useCallback(
     (direction) => {
       setActiveDirections((prev) => new Set(prev).add(direction));
       if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: true });
@@ -9458,7 +9742,7 @@ function DPad({
     },
     [directionEvent, eventBus, onDirection]
   );
-  const handleRelease = React88.useCallback(
+  const handleRelease = React90.useCallback(
     (direction) => {
       setActiveDirections((prev) => {
         const next = new Set(prev);
@@ -9516,8 +9800,8 @@ function ActionButtons({
   disabled
 }) {
   const eventBus = useEventBus();
-  const [activeButtons, setActiveButtons] = React88.useState(/* @__PURE__ */ new Set());
-  const handlePress = React88.useCallback(
+  const [activeButtons, setActiveButtons] = React90.useState(/* @__PURE__ */ new Set());
+  const handlePress = React90.useCallback(
     (id) => {
       setActiveButtons((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -9525,7 +9809,7 @@ function ActionButtons({
     },
     [actionEvent, eventBus, onAction]
   );
-  const handleRelease = React88.useCallback(
+  const handleRelease = React90.useCallback(
     (id) => {
       setActiveButtons((prev) => {
         const next = new Set(prev);
@@ -9710,7 +9994,7 @@ function InventoryGrid({
   const eventBus = useEventBus();
   const slotCount = totalSlots ?? items.length;
   const emptySlotCount = Math.max(0, slotCount - items.length);
-  const handleSelect = React88.useCallback(
+  const handleSelect = React90.useCallback(
     (id) => {
       onSelect?.(id);
       if (selectEvent) {
@@ -9834,7 +10118,7 @@ function CraftingRecipe({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCraft = React88.useCallback(() => {
+  const handleCraft = React90.useCallback(() => {
     onCraft?.();
     if (craftEvent) {
       eventBus.emit(craftEvent, { output: output.label });
@@ -9851,7 +10135,7 @@ function CraftingRecipe({
       children: [
         /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap items-center", children: inputs.map((ingredient, index) => {
           const hasSufficient = ingredient.available >= ingredient.required;
-          return /* @__PURE__ */ jsxs(React88.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React90.Fragment, { children: [
             /* @__PURE__ */ jsx(Box, { className: "relative", children: /* @__PURE__ */ jsx(
               ItemSlot,
               {
@@ -9953,15 +10237,15 @@ function GameCanvas2D({
   fps = 60,
   className
 }) {
-  const canvasRef = React88.useRef(null);
-  const rafRef = React88.useRef(0);
-  const frameRef = React88.useRef(0);
-  const lastTimeRef = React88.useRef(0);
-  const onDrawRef = React88.useRef(onDraw);
+  const canvasRef = React90.useRef(null);
+  const rafRef = React90.useRef(0);
+  const frameRef = React90.useRef(0);
+  const lastTimeRef = React90.useRef(0);
+  const onDrawRef = React90.useRef(onDraw);
   onDrawRef.current = onDraw;
-  const onTickRef = React88.useRef(onTick);
+  const onTickRef = React90.useRef(onTick);
   onTickRef.current = onTick;
-  React88.useEffect(() => {
+  React90.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -10214,7 +10498,7 @@ function TurnPanel({
   className
 }) {
   const eventBus = useEventBus();
-  const handleAction = React88.useCallback(
+  const handleAction = React90.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { turn: currentTurn, phase, activeTeam });
@@ -10339,7 +10623,7 @@ function UnitCommandBar({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCommand = React88.useCallback(
+  const handleCommand = React90.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { unitId: selectedUnitId });
@@ -10878,7 +11162,7 @@ function GameMenu({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleOptionClick = React88.useCallback(
+  const handleOptionClick = React90.useCallback(
     (option) => {
       if (option.event && eventBus) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -11001,7 +11285,7 @@ function GameOverScreen({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleActionClick = React88.useCallback(
+  const handleActionClick = React90.useCallback(
     (action) => {
       if (action.event && eventBus) {
         eventBus.emit(`UI:${action.event}`, { action });
@@ -13817,7 +14101,7 @@ var DataList = ({
 }) => {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React88__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React90__default.useState(pageSize || Infinity);
   const fields = fieldsProp ?? columnsProp ?? [];
   const allData = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -13854,7 +14138,7 @@ var DataList = ({
     const items2 = data.map((item) => item);
     const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
     const contentField = titleField?.name ?? fields[0]?.name ?? "";
-    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React88__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React90__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}`;
@@ -14057,7 +14341,7 @@ var DataList = ({
         className
       ),
       children: [
-        groups.map((group, gi) => /* @__PURE__ */ jsxs(React88__default.Fragment, { children: [
+        groups.map((group, gi) => /* @__PURE__ */ jsxs(React90__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)
@@ -15113,18 +15397,14 @@ var InstallBox = ({
     /* @__PURE__ */ jsx(
       Box,
       {
-        className: cn(
-          "bg-foreground",
-          "rounded-md",
-          "border-[length:var(--border-width)] border-border"
-        ),
+        className: "bg-surface rounded-md border-[length:var(--border-width)] border-border",
         padding: "md",
-        children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", children: [
+        children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx(
             Typography,
             {
               variant: "body2",
-              className: "font-mono flex-1 min-w-0 text-background select-all",
+              className: "font-mono flex-1 min-w-0 select-all",
               truncate: true,
               children: command
             }
@@ -15133,10 +15413,12 @@ var InstallBox = ({
             Button,
             {
               variant: "ghost",
-              size: "md",
+              size: "sm",
+              leftIcon: copied ? "check" : "copy",
               onClick: handleCopy,
-              className: "flex-shrink-0 text-background hover:text-background",
-              children: copied ? "Copied!" : "Copy"
+              className: "flex-shrink-0",
+              "aria-label": copied ? "Copied" : "Copy to clipboard",
+              children: copied ? "Copied" : "Copy"
             }
           )
         ] })
@@ -15791,7 +16073,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React88__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(React90__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" })
@@ -15802,7 +16084,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React88__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(React90__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 }),
@@ -16969,7 +17251,7 @@ var StatCard = ({
   const labelToUse = propLabel ?? propTitle;
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const handleActionClick = React88__default.useCallback(() => {
+  const handleActionClick = React90__default.useCallback(() => {
     if (action?.event) {
       eventBus.emit(`UI:${action.event}`, {});
     }
@@ -16980,7 +17262,7 @@ var StatCard = ({
   const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const isLoading = externalLoading ?? false;
   const error = externalError;
-  const computeMetricValue = React88__default.useCallback(
+  const computeMetricValue = React90__default.useCallback(
     (metric, items) => {
       if (metric.value !== void 0) {
         return metric.value;
@@ -17019,7 +17301,7 @@ var StatCard = ({
     },
     []
   );
-  const schemaStats = React88__default.useMemo(() => {
+  const schemaStats = React90__default.useMemo(() => {
     if (!metrics || metrics.length === 0) return null;
     return metrics.map((metric) => ({
       label: metric.label,
@@ -17027,7 +17309,7 @@ var StatCard = ({
       format: metric.format
     }));
   }, [metrics, data, computeMetricValue]);
-  const calculatedTrend = React88__default.useMemo(() => {
+  const calculatedTrend = React90__default.useMemo(() => {
     if (manualTrend !== void 0) return manualTrend;
     if (previousValue === void 0 || currentValue === void 0)
       return void 0;
@@ -17191,7 +17473,7 @@ var PageHeader = ({
     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(React88__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(React90__default.Fragment, { children: [
       idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
       crumb.href ? /* @__PURE__ */ jsx(
         "a",
@@ -17717,7 +17999,7 @@ var FormSection = ({
   columns = 1,
   className
 }) => {
-  const [collapsed, setCollapsed] = React88__default.useState(defaultCollapsed);
+  const [collapsed, setCollapsed] = React90__default.useState(defaultCollapsed);
   const { t } = useTranslate();
   const eventBus = useEventBus();
   const gridClass = {
@@ -17725,7 +18007,7 @@ var FormSection = ({
     2: "grid-cols-1 md:grid-cols-2",
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
   }[columns];
-  React88__default.useCallback(() => {
+  React90__default.useCallback(() => {
     if (collapsible) {
       setCollapsed((prev) => !prev);
       eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -17937,7 +18219,7 @@ var Form = ({
   const normalizedInitialData = initialData ?? {};
   const resolvedEntity = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
   const entityName = typeof entity === "string" ? entity : resolvedEntity?.name;
-  const entityDerivedFields = React88__default.useMemo(() => {
+  const entityDerivedFields = React90__default.useMemo(() => {
     if (fields && fields.length > 0) return void 0;
     if (!resolvedEntity) return void 0;
     return resolvedEntity.fields.map(
@@ -17956,14 +18238,14 @@ var Form = ({
   const conditionalFields = typeof conditionalFieldsRaw === "boolean" ? {} : conditionalFieldsRaw;
   const hiddenCalculations = typeof hiddenCalculationsRaw === "boolean" ? [] : hiddenCalculationsRaw;
   const violationTriggers = typeof violationTriggersRaw === "boolean" ? [] : violationTriggersRaw;
-  const [formData, setFormData] = React88__default.useState(
+  const [formData, setFormData] = React90__default.useState(
     normalizedInitialData
   );
-  const [collapsedSections, setCollapsedSections] = React88__default.useState(
+  const [collapsedSections, setCollapsedSections] = React90__default.useState(
     /* @__PURE__ */ new Set()
   );
   const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-  const evalContext = React88__default.useMemo(
+  const evalContext = React90__default.useMemo(
     () => ({
       formValues: formData,
       globalVariables: externalContext?.globalVariables ?? {},
@@ -17972,13 +18254,13 @@ var Form = ({
     }),
     [formData, externalContext]
   );
-  React88__default.useEffect(() => {
+  React90__default.useEffect(() => {
     const data = initialData;
     if (data && Object.keys(data).length > 0) {
       setFormData(data);
     }
   }, [initialData]);
-  const processCalculations = React88__default.useCallback(
+  const processCalculations = React90__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!hiddenCalculations.length) return;
       const context = {
@@ -18003,7 +18285,7 @@ var Form = ({
     },
     [hiddenCalculations, externalContext, eventBus]
   );
-  const checkViolations = React88__default.useCallback(
+  const checkViolations = React90__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!violationTriggers.length) return;
       const context = {
@@ -18040,7 +18322,7 @@ var Form = ({
     processCalculations(name, newFormData);
     checkViolations(name, newFormData);
   };
-  const isFieldVisible = React88__default.useCallback(
+  const isFieldVisible = React90__default.useCallback(
     (fieldName) => {
       const condition = conditionalFields[fieldName];
       if (!condition) return true;
@@ -18048,7 +18330,7 @@ var Form = ({
     },
     [conditionalFields, evalContext]
   );
-  const isSectionVisible = React88__default.useCallback(
+  const isSectionVisible = React90__default.useCallback(
     (section) => {
       if (!section.condition) return true;
       return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -18080,7 +18362,7 @@ var Form = ({
       eventBus.emit(`UI:${onCancel}`);
     }
   };
-  const renderField = React88__default.useCallback(
+  const renderField = React90__default.useCallback(
     (field) => {
       const fieldName = field.name || field.field;
       if (!fieldName) return null;
@@ -18101,7 +18383,7 @@ var Form = ({
     [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
   );
   const effectiveFields = entityDerivedFields ?? fields;
-  const normalizedFields = React88__default.useMemo(() => {
+  const normalizedFields = React90__default.useMemo(() => {
     if (!effectiveFields || effectiveFields.length === 0) return [];
     return effectiveFields.map((field) => {
       if (typeof field === "string") {
@@ -18123,7 +18405,7 @@ var Form = ({
       return field;
     });
   }, [effectiveFields, resolvedEntity]);
-  const schemaFields = React88__default.useMemo(() => {
+  const schemaFields = React90__default.useMemo(() => {
     if (normalizedFields.length === 0) return null;
     if (isDebugEnabled()) {
       debugGroup(`Form: ${entityName || "unknown"}`);
@@ -18133,7 +18415,7 @@ var Form = ({
     }
     return normalizedFields.map(renderField).filter(Boolean);
   }, [normalizedFields, renderField, entityName, conditionalFields]);
-  const sectionElements = React88__default.useMemo(() => {
+  const sectionElements = React90__default.useMemo(() => {
     if (!sections || sections.length === 0) return null;
     return sections.map((section) => {
       if (!isSectionVisible(section)) {
@@ -19258,7 +19540,7 @@ var List = ({
     if (entity && typeof entity === "object" && "id" in entity) return [entity];
     return [];
   }, [entity]);
-  const getItemActions = React88__default.useCallback(
+  const getItemActions = React90__default.useCallback(
     (item) => {
       if (!itemActions) return [];
       if (typeof itemActions === "function") {
@@ -20024,7 +20306,7 @@ var WizardContainer = ({
           const isCompleted = index < currentStep;
           const stepKey = step.id ?? step.tabId ?? `step-${index}`;
           const stepTitle = step.title ?? step.name ?? `Step ${index + 1}`;
-          return /* @__PURE__ */ jsxs(React88__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React90__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -21248,7 +21530,7 @@ var StateMachineView = ({
             style: { top: title ? 30 : 0 },
             children: [
               entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React88__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React90__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                 StateNode,
                 {
                   state,
@@ -25694,7 +25976,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(React88__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React90__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -26348,7 +26630,7 @@ function SequenceBar({
     onSlotRemove(index);
   }, [onSlotRemove, playing]);
   const paddedSlots = Array.from({ length: maxSlots }, (_, i) => slots[i]);
-  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React88__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React90__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -28836,7 +29118,7 @@ function InputPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React88__default.useState(value);
+  const [localValue, setLocalValue] = React90__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -28873,7 +29155,7 @@ function TextareaPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React88__default.useState(value);
+  const [localValue, setLocalValue] = React90__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -28904,7 +29186,7 @@ function SelectPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React88__default.useState(value);
+  const [localValue, setLocalValue] = React90__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -28933,7 +29215,7 @@ function CheckboxPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localChecked, setLocalChecked] = React88__default.useState(checked);
+  const [localChecked, setLocalChecked] = React90__default.useState(checked);
   const handleChange = (e) => {
     setLocalChecked(e.target.checked);
     if (onChange) {
@@ -30815,7 +31097,7 @@ var DocumentViewer = ({
 };
 DocumentViewer.displayName = "DocumentViewer";
 function extractTitle(children) {
-  if (!React88__default.isValidElement(children)) return void 0;
+  if (!React90__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -31413,7 +31695,7 @@ var MediaGallery = ({
     [selectable, selectedItems, selectionEvent, eventBus]
   );
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React88__default.useMemo(() => {
+  const items = React90__default.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => ({
@@ -31575,7 +31857,7 @@ var MediaGallery = ({
 };
 MediaGallery.displayName = "MediaGallery";
 function extractTitle2(children) {
-  if (!React88__default.isValidElement(children)) return void 0;
+  if (!React90__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -31661,7 +31943,7 @@ function subscribeToDebugEvents(listener) {
 
 // components/organisms/debug/hooks/useDebugData.ts
 function useDebugData() {
-  const [data, setData] = React88.useState(() => ({
+  const [data, setData] = React90.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -31675,7 +31957,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React88.useEffect(() => {
+  React90.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -31944,15 +32226,15 @@ var TYPE_BADGES = {
   state: { variant: "danger", icon: "\u{1F4CA}" }
 };
 function EventFlowTab({ events: events2 }) {
-  const [filter, setFilter] = React88.useState("all");
-  const containerRef = React88.useRef(null);
-  const [autoScroll, setAutoScroll] = React88.useState(true);
-  React88.useEffect(() => {
+  const [filter, setFilter] = React90.useState("all");
+  const containerRef = React90.useRef(null);
+  const [autoScroll, setAutoScroll] = React90.useState(true);
+  React90.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React88.useMemo(() => {
+  const filteredEvents = React90.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -32051,7 +32333,7 @@ function EventFlowTab({ events: events2 }) {
 }
 EventFlowTab.displayName = "EventFlowTab";
 function GuardsPanel({ guards }) {
-  const [filter, setFilter] = React88.useState("all");
+  const [filter, setFilter] = React90.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -32064,7 +32346,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React88.useMemo(() => {
+  const filteredGuards = React90.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -32208,10 +32490,10 @@ function EffectBadge({ effect }) {
   ] });
 }
 function TransitionTimeline({ transitions }) {
-  const containerRef = React88.useRef(null);
-  const [autoScroll, setAutoScroll] = React88.useState(true);
-  const [expandedId, setExpandedId] = React88.useState(null);
-  React88.useEffect(() => {
+  const containerRef = React90.useRef(null);
+  const [autoScroll, setAutoScroll] = React90.useState(true);
+  const [expandedId, setExpandedId] = React90.useState(null);
+  React90.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -32472,9 +32754,9 @@ function getAllEvents(traits2) {
 }
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
-  const [log, setLog] = React88.useState([]);
-  const prevStatesRef = React88.useRef(/* @__PURE__ */ new Map());
-  React88.useEffect(() => {
+  const [log, setLog] = React90.useState([]);
+  const prevStatesRef = React90.useRef(/* @__PURE__ */ new Map());
+  React90.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -32557,10 +32839,10 @@ function RuntimeDebugger({
   defaultTab,
   schema
 }) {
-  const [isCollapsed, setIsCollapsed] = React88.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React88.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React90.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React90.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React88.useEffect(() => {
+  React90.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -32569,7 +32851,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React88.useEffect(() => {
+  React90.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -33016,7 +33298,7 @@ var Timeline = ({
 }) => {
   const { t } = useTranslate();
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React88__default.useMemo(() => {
+  const items = React90__default.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => {
@@ -33118,7 +33400,7 @@ var Timeline = ({
 };
 Timeline.displayName = "Timeline";
 function extractToastProps(children) {
-  if (!React88__default.isValidElement(children)) {
+  if (!React90__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -33149,7 +33431,7 @@ var ToastSlot = ({
     eventBus.emit("UI:CLOSE");
   };
   if (!isVisible) return null;
-  const isCustomContent = React88__default.isValidElement(children) && !message;
+  const isCustomContent = React90__default.isValidElement(children) && !message;
   return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
     Toast,
     {
@@ -33191,12 +33473,12 @@ WorldMapTemplate.displayName = "WorldMapTemplate";
 
 // components/organisms/component-registry.generated.ts
 function lazyThree(name, loader) {
-  const Lazy = React88__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  const Lazy = React90__default.lazy(() => loader().then((m) => ({ default: m[name] })));
   function ThreeWrapper(props) {
-    return React88__default.createElement(
-      React88__default.Suspense,
+    return React90__default.createElement(
+      React90__default.Suspense,
       { fallback: null },
-      React88__default.createElement(Lazy, props)
+      React90__default.createElement(Lazy, props)
     );
   }
   ThreeWrapper.displayName = `Lazy(${name})`;
@@ -33484,7 +33766,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React88__default.createElement(
+  return React90__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -35867,7 +36149,7 @@ function EntityDataProvider({
   adapter,
   children
 }) {
-  return React88__default.createElement(
+  return React90__default.createElement(
     EntityDataContext.Provider,
     { value: adapter },
     children
@@ -36693,4 +36975,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, ArticleSection, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, DialogueBox, DialogueBubble, Divider, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ENTITY_EVENTS, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDataProvider, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LineChart, List, LoadingState, MapView, MarkdownContent, MarketingStatCard, MasterDetail, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, ViolationAlert, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, entityDataKeys, generateCombatMessage, getAllEntities, getByType, getCurrentFrame, getEntity, getSingleton, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseQueryBinding, pendulum, projectileMotion, removeEntity, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, spawnEntity, springOscillator, tickAnimationState, transitionAnimation, updateEntity, updateSingleton, useAgentChat, useAuthContext, useBattleState, useCamera, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useDragReorder, useEmitEvent, useEntities, useEntitiesByType, useEntity, useEntity2 as useEntityById, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityListSuspense, useEntityMutations, useEntitySuspense, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, useOrbitalMutations, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useResolvedEntity, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTranslate, useUIEvents, useUISlotManager, useUpdateEntity, useValidation };
+export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, DialogueBox, DialogueBubble, Divider, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ENTITY_EVENTS, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDataProvider, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LineChart, List, LoadingState, MapView, MarkdownContent, MarketingStatCard, MasterDetail, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, ViolationAlert, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, entityDataKeys, generateCombatMessage, getAllEntities, getByType, getCurrentFrame, getEntity, getSingleton, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseQueryBinding, pendulum, projectileMotion, removeEntity, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, spawnEntity, springOscillator, tickAnimationState, transitionAnimation, updateEntity, updateSingleton, useAgentChat, useAuthContext, useBattleState, useCamera, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useDragReorder, useEmitEvent, useEntities, useEntitiesByType, useEntity, useEntity2 as useEntityById, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityListSuspense, useEntityMutations, useEntitySuspense, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, useOrbitalMutations, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useResolvedEntity, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTranslate, useUIEvents, useUISlotManager, useUpdateEntity, useValidation };