@almadar/ui 4.51.16 → 4.52.0

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React75 from 'react';
-import React75__default, { useContext, useMemo, useRef, useEffect, useCallback, createContext, Suspense, useState, lazy, useSyncExternalStore, useLayoutEffect, useId } from 'react';
+import * as React78 from 'react';
+import React78__default, { useContext, useMemo, useRef, useEffect, useCallback, createContext, Suspense, useState, lazy, useSyncExternalStore, useLayoutEffect, useId } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScope, TraitScopeProvider } from '@almadar/ui/providers';
@@ -206,7 +206,7 @@ var init_SvgFlow = __esm({
       opacity = 1,
       className
     }) => {
-      const markerId = React75__default.useMemo(() => {
+      const markerId = React78__default.useMemo(() => {
         flowIdCounter += 1;
         return `almadar-flow-arrow-${flowIdCounter}`;
       }, []);
@@ -749,7 +749,7 @@ var init_SvgRing = __esm({
       className,
       label
     }) => {
-      const gradientId = React75__default.useMemo(() => {
+      const gradientId = React78__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
@@ -1177,7 +1177,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React75__default.isValidElement(value)) {
+  if (React78__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -1253,7 +1253,7 @@ var init_Button = __esm({
       md: "h-4 w-4",
       lg: "h-5 w-5"
     };
-    Button = React75__default.forwardRef(
+    Button = React78__default.forwardRef(
       ({
         className,
         variant = "primary",
@@ -1318,7 +1318,7 @@ var Input;
 var init_Input = __esm({
   "components/atoms/Input.tsx"() {
     init_cn();
-    Input = React75__default.forwardRef(
+    Input = React78__default.forwardRef(
       ({
         className,
         inputType,
@@ -1436,7 +1436,7 @@ var Label;
 var init_Label = __esm({
   "components/atoms/Label.tsx"() {
     init_cn();
-    Label = React75__default.forwardRef(
+    Label = React78__default.forwardRef(
       ({ className, required, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "label",
@@ -1462,7 +1462,7 @@ var Textarea;
 var init_Textarea = __esm({
   "components/atoms/Textarea.tsx"() {
     init_cn();
-    Textarea = React75__default.forwardRef(
+    Textarea = React78__default.forwardRef(
       ({ className, error, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "textarea",
@@ -1491,7 +1491,7 @@ var Select;
 var init_Select = __esm({
   "components/atoms/Select.tsx"() {
     init_cn();
-    Select = React75__default.forwardRef(
+    Select = React78__default.forwardRef(
       ({ className, options, placeholder, error, ...props }, ref) => {
         return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxs(
@@ -1533,7 +1533,7 @@ var Checkbox;
 var init_Checkbox = __esm({
   "components/atoms/Checkbox.tsx"() {
     init_cn();
-    Checkbox = React75__default.forwardRef(
+    Checkbox = React78__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: [
@@ -1615,7 +1615,7 @@ var init_Card = __esm({
       md: "shadow",
       lg: "shadow-lg"
     };
-    Card = React75__default.forwardRef(
+    Card = React78__default.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -1651,9 +1651,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React75__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React78__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React75__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React78__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -1666,11 +1666,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React75__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React78__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React75__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React78__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -1723,7 +1723,7 @@ var init_Badge = __esm({
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React75__default.forwardRef(
+    Badge = React78__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
         const iconSizes3 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
         const resolvedIcon = typeof icon === "string" ? (() => {
@@ -1796,7 +1796,7 @@ var init_FilterPill = __esm({
       md: "w-3.5 h-3.5",
       lg: "w-4 h-4"
     };
-    FilterPill = React75__default.forwardRef(
+    FilterPill = React78__default.forwardRef(
       ({
         className,
         variant = "default",
@@ -1875,7 +1875,7 @@ var init_Spinner = __esm({
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
-    Spinner = React75__default.forwardRef(
+    Spinner = React78__default.forwardRef(
       ({ className, size = "md", ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "div",
@@ -2156,7 +2156,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React75__default.forwardRef(
+    Box = React78__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -2206,38 +2206,26 @@ var init_Box = __esm({
           onMouseLeave?.(e);
         }, [hoverEvent, eventBus, onMouseLeave]);
         const isClickable = action || onClick;
-        const Comp = Component;
-        return /* @__PURE__ */ jsx(
-          Comp,
+        return React78__default.createElement(
+          Component,
           {
             ref,
             className: cn(
-              // Padding
               padding && paddingStyles2[padding],
               paddingX && paddingXStyles[paddingX],
               paddingY && paddingYStyles[paddingY],
-              // Margin
               margin && marginStyles[margin],
               marginX && marginXStyles[marginX],
               marginY && marginYStyles[marginY],
-              // Background
               bgStyles[bg],
-              // Border - uses theme variables
               border && "border-[length:var(--border-width)] border-border",
-              // Rounded
               roundedStyles[rounded],
-              // Shadow
               shadowStyles2[shadow],
-              // Display
               display && displayStyles[display],
-              // Dimensions
               fullWidth && "w-full",
               fullHeight && "h-full",
-              // Overflow
               overflow && overflowStyles[overflow],
-              // Position
               position && positionStyles[position],
-              // Cursor for clickable
               isClickable && "cursor-pointer",
               className
             ),
@@ -2245,9 +2233,9 @@ var init_Box = __esm({
             onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
             onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
             style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-            ...rest,
-            children
-          }
+            ...rest
+          },
+          children
         );
       }
     );
@@ -2529,7 +2517,7 @@ var Radio;
 var init_Radio = __esm({
   "components/atoms/Radio.tsx"() {
     init_cn();
-    Radio = React75__default.forwardRef(
+    Radio = React78__default.forwardRef(
       ({
         label,
         helperText,
@@ -2701,7 +2689,7 @@ var init_Switch = __esm({
   "components/atoms/Switch.tsx"() {
     "use client";
     init_cn();
-    Switch = React75.forwardRef(
+    Switch = React78.forwardRef(
       ({
         checked,
         defaultChecked = false,
@@ -2712,10 +2700,10 @@ var init_Switch = __esm({
         name,
         className
       }, ref) => {
-        const [isChecked, setIsChecked] = React75.useState(
+        const [isChecked, setIsChecked] = React78.useState(
           checked !== void 0 ? checked : defaultChecked
         );
-        React75.useEffect(() => {
+        React78.useEffect(() => {
           if (checked !== void 0) {
             setIsChecked(checked);
           }
@@ -3530,6 +3518,42 @@ var init_FlipContainer = __esm({
     FlipContainer.displayName = "FlipContainer";
   }
 });
+var Dialog;
+var init_Dialog = __esm({
+  "components/atoms/Dialog.tsx"() {
+    init_cn();
+    Dialog = React78__default.forwardRef(
+      ({
+        role = "dialog",
+        "aria-modal": ariaModal = true,
+        className,
+        children,
+        ...rest
+      }, ref) => /* @__PURE__ */ jsx(
+        "dialog",
+        {
+          ref,
+          role,
+          "aria-modal": ariaModal,
+          className: cn(className),
+          ...rest,
+          children
+        }
+      )
+    );
+    Dialog.displayName = "Dialog";
+  }
+});
+var Aside;
+var init_Aside = __esm({
+  "components/atoms/Aside.tsx"() {
+    init_cn();
+    Aside = React78__default.forwardRef(
+      ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn(className), ...rest, children })
+    );
+    Aside.displayName = "Aside";
+  }
+});
 function toSharedContext(ctx) {
   return createMinimalContext(
     {
@@ -3601,8 +3625,8 @@ var init_LawReferenceTooltip = __esm({
       position = "top",
       className
     }) => {
-      const [isVisible, setIsVisible] = React75__default.useState(false);
-      const timeoutRef = React75__default.useRef(null);
+      const [isVisible, setIsVisible] = React78__default.useState(false);
+      const timeoutRef = React78__default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -3611,7 +3635,7 @@ var init_LawReferenceTooltip = __esm({
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         setIsVisible(false);
       };
-      React75__default.useEffect(() => {
+      React78__default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
         };
@@ -3821,7 +3845,7 @@ var init_StatusDot = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    StatusDot = React75__default.forwardRef(
+    StatusDot = React78__default.forwardRef(
       ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "span",
@@ -3874,7 +3898,7 @@ var init_TrendIndicator = __esm({
       down: TrendingDown,
       flat: ArrowRight
     };
-    TrendIndicator = React75__default.forwardRef(
+    TrendIndicator = React78__default.forwardRef(
       ({
         className,
         value,
@@ -3941,7 +3965,7 @@ var init_RangeSlider = __esm({
       md: "w-4 h-4",
       lg: "w-5 h-5"
     };
-    RangeSlider = React75__default.forwardRef(
+    RangeSlider = React78__default.forwardRef(
       ({
         className,
         min = 0,
@@ -4537,7 +4561,7 @@ var init_ContentSection = __esm({
       md: "py-16",
       lg: "py-24"
     };
-    ContentSection = React75__default.forwardRef(
+    ContentSection = React78__default.forwardRef(
       ({ children, background = "default", padding = "lg", id, className }, ref) => {
         return /* @__PURE__ */ jsx(
           Box,
@@ -5071,7 +5095,7 @@ var init_AnimatedReveal = __esm({
       "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
       "none": {}
     };
-    AnimatedReveal = React75__default.forwardRef(
+    AnimatedReveal = React78__default.forwardRef(
       ({
         trigger = "scroll",
         animation = "fade-up",
@@ -5231,7 +5255,7 @@ var init_AnimatedGraphic = __esm({
   "components/atoms/AnimatedGraphic.tsx"() {
     "use client";
     init_cn();
-    AnimatedGraphic = React75__default.forwardRef(
+    AnimatedGraphic = React78__default.forwardRef(
       ({
         src,
         svgContent,
@@ -5254,7 +5278,7 @@ var init_AnimatedGraphic = __esm({
         const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
         const resolvedSvg = svgContent ?? fetchedSvg;
         const prevAnimateRef = useRef(animate);
-        const setRef = React75__default.useCallback(
+        const setRef = React78__default.useCallback(
           (node) => {
             containerRef.current = node;
             if (typeof ref === "function") ref(node);
@@ -5356,8 +5380,9 @@ var sizeClasses5, minWidths, Modal;
 var init_Modal = __esm({
   "components/molecules/Modal.tsx"() {
     "use client";
-    init_Icon();
     init_Box();
+    init_Button();
+    init_Dialog();
     init_Typography();
     init_Overlay();
     init_cn();
@@ -5450,7 +5475,7 @@ var init_Modal = __esm({
           }
         ),
         /* @__PURE__ */ jsx(
-          "div",
+          Box,
           {
             className: cn(
               "fixed inset-0 z-50 pointer-events-none",
@@ -5459,17 +5484,17 @@ var init_Modal = __esm({
             ),
             style: { paddingTop: "10vh" },
             children: /* @__PURE__ */ jsxs(
-              Box,
+              Dialog,
               {
                 ref: modalRef,
-                bg: "surface",
-                border: true,
-                shadow: "lg",
-                rounded: "md",
+                open: true,
                 className: cn(
-                  "pointer-events-auto w-full flex flex-col",
+                  // Reset browser-default dialog chrome — we own styling.
+                  "m-0 p-0 border-0 bg-transparent",
+                  // Pre-existing dialog frame
+                  "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
                   sizeClasses5[size],
-                  "max-sm:max-w-full max-sm:rounded-b-none max-sm:rounded-t-2xl",
+                  "max-sm:max-w-full max-sm:min-w-0 max-sm:rounded-b-none max-sm:rounded-t-2xl",
                   className
                 ),
                 style: {
@@ -5480,12 +5505,10 @@ var init_Modal = __esm({
                     transition: isDragging.current ? "none" : "transform 200ms ease-out"
                   }
                 },
-                role: "dialog",
-                "aria-modal": "true",
                 ...title && { "aria-labelledby": "modal-title" },
                 children: [
                   /* @__PURE__ */ jsx(
-                    "div",
+                    Box,
                     {
                       className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
                       onPointerDown: (e) => {
@@ -5511,11 +5534,11 @@ var init_Modal = __esm({
                         isDragging.current = false;
                         setDragY(0);
                       },
-                      children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-full bg-border" })
+                      children: /* @__PURE__ */ jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
                     }
                   ),
                   (title || showCloseButton) && /* @__PURE__ */ jsxs(
-                    "div",
+                    Box,
                     {
                       className: cn(
                         "px-6 py-4 flex items-center justify-between",
@@ -5524,25 +5547,22 @@ var init_Modal = __esm({
                       children: [
                         title && /* @__PURE__ */ jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
                         showCloseButton && /* @__PURE__ */ jsx(
-                          "button",
+                          Button,
                           {
-                            type: "button",
+                            variant: "ghost",
+                            size: "sm",
+                            icon: X,
                             onClick: handleClose,
                             "data-event": "CLOSE",
-                            className: cn(
-                              "p-1 transition-colors rounded-sm",
-                              "hover:bg-muted"
-                            ),
-                            "aria-label": "Close modal",
-                            children: /* @__PURE__ */ jsx(Icon, { icon: X, size: "md" })
+                            "aria-label": "Close modal"
                           }
                         )
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children }),
+                  /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
                   footer && /* @__PURE__ */ jsx(
-                    "div",
+                    Box,
                     {
                       className: cn(
                         "px-6 py-4 bg-muted",
@@ -5565,21 +5585,19 @@ var sizeWidths, Drawer;
 var init_Drawer = __esm({
   "components/molecules/Drawer.tsx"() {
     "use client";
-    init_Icon();
     init_Box();
+    init_Button();
     init_Typography();
     init_Overlay();
     init_cn();
     init_useEventBus();
     sizeWidths = {
-      sm: "w-80",
+      sm: "w-full sm:w-80",
       // 320px
-      md: "w-96",
+      md: "w-full sm:w-96",
       // 384px
-      lg: "w-[480px]",
-      // 480px
-      xl: "w-[640px]",
-      // 640px
+      lg: "w-full sm:w-[480px]",
+      xl: "w-full sm:w-[640px]",
       full: "w-screen"
     };
     Drawer = ({
@@ -5677,7 +5695,7 @@ var init_Drawer = __esm({
             ...title && { "aria-labelledby": "drawer-title" },
             children: [
               (title || showCloseButton) && /* @__PURE__ */ jsxs(
-                "div",
+                Box,
                 {
                   className: cn(
                     "px-6 py-4 flex items-center justify-between shrink-0",
@@ -5686,25 +5704,22 @@ var init_Drawer = __esm({
                   children: [
                     title && /* @__PURE__ */ jsx(Typography, { variant: "h4", as: "h2", id: "drawer-title", children: title }),
                     showCloseButton && /* @__PURE__ */ jsx(
-                      "button",
+                      Button,
                       {
-                        type: "button",
+                        variant: "ghost",
+                        size: "sm",
+                        icon: X,
                         onClick: handleClose,
-                        className: cn(
-                          "p-1 transition-colors rounded-sm",
-                          "hover:bg-muted",
-                          !title && "ml-auto"
-                        ),
                         "aria-label": "Close drawer",
-                        children: /* @__PURE__ */ jsx(Icon, { icon: X, size: "md" })
+                        className: cn(!title && "ml-auto")
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children }),
+              /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
               footer && /* @__PURE__ */ jsx(
-                "div",
+                Box,
                 {
                   className: cn(
                     "px-6 py-4 shrink-0 bg-muted",
@@ -5749,6 +5764,7 @@ var variantClasses, iconMap2, iconColors, Toast;
 var init_Toast = __esm({
   "components/molecules/Toast.tsx"() {
     "use client";
+    init_Box();
     init_Icon();
     init_Typography();
     init_Button();
@@ -5806,17 +5822,20 @@ var init_Toast = __esm({
         return () => clearTimeout(timer);
       }, [duration, onDismiss, dismissEvent]);
       return /* @__PURE__ */ jsx(
-        "div",
+        Box,
         {
           className: cn(
-            "border-l-4 p-4 shadow min-w-[300px] max-w-md",
+            // `min-w-[300px]` only kicks in at `sm:` and above so a phone
+            // viewport doesn't get a toast wider than the screen near the
+            // edge. `max-w-[calc(100vw-2rem)]` clamps to viewport too.
+            "border-l-4 p-4 shadow min-w-0 sm:min-w-[300px] max-w-md max-w-[calc(100vw-2rem)]",
             "rounded-sm",
             variantClasses[variant],
             className
           ),
           role: "alert",
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(
+          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,
               {
                 icon: iconMap2[variant],
@@ -5824,25 +5843,22 @@ var init_Toast = __esm({
                 className: iconColors[variant]
               }
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs(Box, { className: "flex-1 min-w-0", children: [
               title && /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "mb-1", children: title }),
               /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-sm", children: message }),
-              actionLabel && (onAction || actionEvent) && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleAction, children: actionLabel }) })
+              actionLabel && (onAction || actionEvent) && /* @__PURE__ */ jsx(Box, { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleAction, children: actionLabel }) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 flex-shrink-0", children: [
+            /* @__PURE__ */ jsxs(Box, { className: "flex items-start gap-2 flex-shrink-0", children: [
               badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: badge }),
               dismissible && /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
-                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  icon: X,
                   onClick: handleDismiss,
-                  className: cn(
-                    "flex-shrink-0 p-1 transition-colors rounded-sm",
-                    "hover:bg-muted",
-                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                  ),
                   "aria-label": "Dismiss toast",
-                  children: /* @__PURE__ */ jsx(Icon, { icon: X, size: "sm" })
+                  className: "flex-shrink-0"
                 }
               )
             ] })
@@ -6064,7 +6080,7 @@ var init_ErrorBoundary = __esm({
     "use client";
     init_cn();
     init_ErrorState();
-    ErrorBoundary = class extends React75__default.Component {
+    ErrorBoundary = class extends React78__default.Component {
       constructor(props) {
         super(props);
         __publicField(this, "reset", () => {
@@ -6617,7 +6633,7 @@ var init_HeroSection = __esm({
     HeroSection.displayName = "HeroSection";
   }
 });
-var ArticleSection;
+var maxWidthMap, ArticleSection;
 var init_ArticleSection = __esm({
   "components/molecules/ArticleSection.tsx"() {
     "use client";
@@ -6625,6 +6641,11 @@ var init_ArticleSection = __esm({
     init_Box();
     init_Stack();
     init_Typography();
+    maxWidthMap = {
+      sm: "max-w-full sm:max-w-xl md:max-w-2xl",
+      md: "max-w-full sm:max-w-2xl md:max-w-3xl",
+      lg: "max-w-full sm:max-w-3xl md:max-w-4xl"
+    };
     ArticleSection = ({
       title,
       children,
@@ -6639,7 +6660,7 @@ var init_ArticleSection = __esm({
             className
           ),
           padding: "md",
-          children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", align: "start", children: [
+          children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", align: "start", className: cn("w-full mx-auto", maxWidthMap[maxWidth]), children: [
             /* @__PURE__ */ jsx(Typography, { variant: "h2", children: title }),
             /* @__PURE__ */ jsx(Box, { className: "w-full", children })
           ] })
@@ -6691,6 +6712,7 @@ var init_TeamCard = __esm({
 var gapStyles2, colStyles, SimpleGrid;
 var init_SimpleGrid = __esm({
   "components/molecules/SimpleGrid.tsx"() {
+    init_Box();
     init_cn();
     gapStyles2 = {
       none: "gap-0",
@@ -6703,10 +6725,10 @@ var init_SimpleGrid = __esm({
     colStyles = {
       1: "grid-cols-1",
       2: "grid-cols-1 sm:grid-cols-2",
-      3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-      4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-      5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
-      6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+      3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+      4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+      5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
+      6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
     };
     SimpleGrid = ({
       minChildWidth = 250,
@@ -6717,12 +6739,12 @@ var init_SimpleGrid = __esm({
       children
     }) => {
       if (cols) {
-        return /* @__PURE__ */ jsx("div", { className: cn("grid", colStyles[cols], gapStyles2[gap], className), children });
+        return /* @__PURE__ */ jsx(Box, { className: cn("grid", colStyles[cols], gapStyles2[gap], className), children });
       }
       const minWidth = typeof minChildWidth === "number" ? `${minChildWidth}px` : minChildWidth;
       const templateColumns = maxCols ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : `repeat(auto-fit, minmax(${minWidth}, 1fr))`;
       return /* @__PURE__ */ jsx(
-        "div",
+        Box,
         {
           className: cn("grid", gapStyles2[gap], className),
           style: {
@@ -7112,8 +7134,8 @@ var init_Tooltip = __esm({
           if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
         };
       }, []);
-      const triggerElement = React75__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-      const trigger = React75__default.cloneElement(triggerElement, {
+      const triggerElement = React78__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const trigger = React78__default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -7234,8 +7256,8 @@ var init_Popover = __esm({
         onMouseEnter: handleOpen,
         onMouseLeave: handleClose
       };
-      const childElement = React75__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-      const triggerElement = React75__default.cloneElement(
+      const childElement = React78__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const triggerElement = React78__default.cloneElement(
         childElement,
         {
           ref: triggerRef,
@@ -7284,6 +7306,7 @@ var Menu;
 var init_Menu = __esm({
   "components/molecules/Menu.tsx"() {
     "use client";
+    init_Box();
     init_Icon();
     init_Divider();
     init_Typography();
@@ -7352,8 +7375,8 @@ var init_Menu = __esm({
         "bottom-start": "top-full left-0 mt-2",
         "bottom-end": "top-full right-0 mt-2"
       };
-      const triggerChild = React75__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
-      const triggerElement = React75__default.cloneElement(
+      const triggerChild = React78__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
+      const triggerElement = React78__default.cloneElement(
         triggerChild,
         {
           ref: triggerRef,
@@ -7365,17 +7388,17 @@ var init_Menu = __esm({
         "border-[length:var(--border-width)] border-border",
         "shadow",
         "rounded-sm",
-        "min-w-[200px] py-1"
+        "min-w-0 sm:min-w-[200px] max-w-[calc(100vw-1rem)] py-1"
       );
       const renderMenuItem = (item, hasSubMenu, index) => {
         const itemId = item.id ?? `item-${item.label.toLowerCase().replace(/\s+/g, "-")}-${index}`;
         const isDanger = item.variant === "danger";
         return /* @__PURE__ */ jsx(
-          "button",
+          Box,
           {
-            type: "button",
-            onClick: () => handleItemClick({ ...item, id: itemId }),
-            disabled: item.disabled,
+            as: "button",
+            onClick: () => !item.disabled && handleItemClick({ ...item, id: itemId }),
+            "aria-disabled": item.disabled || void 0,
             onMouseEnter: () => hasSubMenu && setActiveSubMenu(itemId),
             "data-testid": item.event ? `action-${item.event}` : void 0,
             className: cn(
@@ -7387,7 +7410,7 @@ var init_Menu = __esm({
               item.disabled && "cursor-not-allowed",
               isDanger && "text-error hover:bg-error/10"
             ),
-            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+            children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
               item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
               /* @__PURE__ */ jsx(
                 Typography,
@@ -7412,10 +7435,10 @@ var init_Menu = __esm({
           if (isDivider) {
             return /* @__PURE__ */ jsx(Divider, { className: "my-1" }, `divider-${index}`);
           }
-          return /* @__PURE__ */ jsxs("div", { children: [
+          return /* @__PURE__ */ jsxs(Box, { children: [
             renderMenuItem(item, !!hasSubMenu, index),
             hasSubMenu && activeSubMenu === itemId && item.subMenu && /* @__PURE__ */ jsx(
-              "div",
+              Box,
               {
                 className: cn(
                   "absolute left-full top-0 ml-2 z-50",
@@ -7427,10 +7450,10 @@ var init_Menu = __esm({
           ] }, itemId);
         });
       };
-      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      return /* @__PURE__ */ jsxs(Box, { className: "relative", children: [
         triggerElement,
         isOpen && triggerRect && /* @__PURE__ */ jsx(
-          "div",
+          Box,
           {
             ref: menuRef,
             className: cn(
@@ -7769,13 +7792,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect70, useRef: useRef66, useCallback: useCallback126, useState: useState107 } = React75__default;
+      const { useEffect: useEffect71, useRef: useRef66, useCallback: useCallback126, useState: useState108 } = React78__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 = useRef66({ centerLat, centerLng, zoom });
-        useEffect70(() => {
+        useEffect71(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -7786,7 +7809,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect70(() => {
+        useEffect71(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -7814,7 +7837,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState107(null);
+        const [clickedPosition, setClickedPosition] = useState108(null);
         const handleMapClick = useCallback126((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -8015,7 +8038,7 @@ function InputPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React75__default.useState(value);
+  const [localValue, setLocalValue] = React78__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8053,7 +8076,7 @@ function TextareaPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React75__default.useState(value);
+  const [localValue, setLocalValue] = React78__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8085,7 +8108,7 @@ function SelectPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React75__default.useState(value);
+  const [localValue, setLocalValue] = React78__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8114,7 +8137,7 @@ function CheckboxPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localChecked, setLocalChecked] = React75__default.useState(checked);
+  const [localChecked, setLocalChecked] = React78__default.useState(checked);
   const handleChange = (e) => {
     setLocalChecked(e.target.checked);
     if (onChange) {
@@ -8427,9 +8450,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React75.useState(false);
+  const [isPressed, setIsPressed] = React78.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React75.useCallback(
+  const handlePointerDown = React78.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -8439,7 +8462,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React75.useCallback(
+  const handlePointerUp = React78.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -8449,7 +8472,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React75.useCallback(
+  const handlePointerLeave = React78.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -8526,8 +8549,8 @@ function ActionButtons({
   disabled
 }) {
   const eventBus = useEventBus();
-  const [activeButtons, setActiveButtons] = React75.useState(/* @__PURE__ */ new Set());
-  const handlePress = React75.useCallback(
+  const [activeButtons, setActiveButtons] = React78.useState(/* @__PURE__ */ new Set());
+  const handlePress = React78.useCallback(
     (id) => {
       setActiveButtons((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -8535,7 +8558,7 @@ function ActionButtons({
     },
     [actionEvent, eventBus, onAction]
   );
-  const handleRelease = React75.useCallback(
+  const handleRelease = React78.useCallback(
     (id) => {
       setActiveButtons((prev) => {
         const next = new Set(prev);
@@ -11297,7 +11320,7 @@ var init_MarkdownContent = __esm({
     init_Box();
     init_useTranslate();
     init_cn();
-    MarkdownContent = React75__default.memo(
+    MarkdownContent = React78__default.memo(
       ({ content, direction, className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -11515,7 +11538,7 @@ var init_CodeBlock = __esm({
     log5 = createLogger("almadar:ui:markdown-code");
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React75__default.memo(
+    CodeBlock = React78__default.memo(
       ({
         code: rawCode,
         language = "text",
@@ -12824,7 +12847,7 @@ var init_StateMachineView = __esm({
                 style: { top: title ? 30 : 0 },
                 children: [
                   entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React75__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React78__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                     StateNode,
                     {
                       state,
@@ -14405,27 +14428,23 @@ var init_Grid = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = rows ? { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`, ...style } : style;
-      const Comp = Component;
-      return /* @__PURE__ */ jsx(
-        Comp,
+      return React78__default.createElement(
+        Component,
         {
           className: cn(
             "grid",
             getColsClass(cols),
-            // Gap (rowGap/colGap override gap)
             rowGap ? rowGapStyles[rowGap] : colGap ? void 0 : gapStyles3[gap],
             colGap ? colGapStyles[colGap] : rowGap ? void 0 : void 0,
             rowGap && colGap ? `${rowGapStyles[rowGap]} ${colGapStyles[colGap]}` : void 0,
-            // Alignment
             alignItems && alignStyles2[alignItems],
             justifyItems && justifyStyles2[justifyItems],
-            // Flow
             flow && flowStyles[flow],
             className
           ),
-          style: mergedStyle,
-          children
-        }
+          style: mergedStyle
+        },
+        children
       );
     };
     Grid.displayName = "Grid";
@@ -15444,6 +15463,35 @@ var init_useSwipeGesture = __esm({
     "use client";
   }
 });
+function dayWindowForViewport(width) {
+  if (width <= 640) return 1;
+  if (width <= 1024) return 3;
+  return 7;
+}
+function useDayWindow(override) {
+  const [w, setW] = useState(() => {
+    if (override !== "auto") return override;
+    if (typeof window === "undefined") return 7;
+    return dayWindowForViewport(window.innerWidth);
+  });
+  useEffect(() => {
+    if (override !== "auto") {
+      setW(override);
+      return void 0;
+    }
+    if (typeof window === "undefined") return void 0;
+    const onResize = () => setW(dayWindowForViewport(window.innerWidth));
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [override]);
+  return w;
+}
+function formatDateRange(start, end) {
+  const startStr = start.toLocaleDateString(void 0, SHORT_DATE);
+  const endStr = end.toLocaleDateString(void 0, SHORT_DATE);
+  return start.toDateString() === end.toDateString() ? startStr : `${startStr} \u2013 ${endStr}`;
+}
 function getStartOfWeek(date) {
   const d = new Date(date);
   const day = d.getDay();
@@ -15484,7 +15532,8 @@ function CalendarGrid({
   longPressEvent,
   longPressPayload,
   swipeLeftEvent,
-  swipeRightEvent
+  swipeRightEvent,
+  dayWindow = "auto"
 }) {
   const eventBus = useEventBus();
   const longPressTimer = useRef(null);
@@ -15500,6 +15549,26 @@ function CalendarGrid({
     () => timeSlots ?? generateDefaultTimeSlots(),
     [timeSlots]
   );
+  const visibleCount = useDayWindow(dayWindow);
+  const [dayOffset, setDayOffset] = useState(0);
+  useEffect(() => {
+    if (dayOffset + visibleCount > 7) {
+      setDayOffset(Math.max(0, 7 - visibleCount));
+    }
+  }, [visibleCount, dayOffset]);
+  const visibleDays = useMemo(
+    () => weekDays.slice(dayOffset, dayOffset + visibleCount),
+    [weekDays, dayOffset, visibleCount]
+  );
+  const canPrev = dayOffset > 0;
+  const canNext = dayOffset + visibleCount < 7;
+  const stepPrev = useCallback(() => {
+    setDayOffset((d) => Math.max(0, d - visibleCount));
+  }, [visibleCount]);
+  const stepNext = useCallback(() => {
+    setDayOffset((d) => Math.min(7 - visibleCount, d + visibleCount));
+  }, [visibleCount]);
+  const gridColsClass = visibleCount === 1 ? "grid-cols-2" : visibleCount === 3 ? "grid-cols-4" : "grid-cols-8";
   const handleSlotClick = useCallback(
     (day, time) => {
       onSlotClick?.(day, time);
@@ -15551,93 +15620,124 @@ function CalendarGrid({
     },
     event.id
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: cn("overflow-x-auto", className),
+      className,
       ...swipeLeftEvent || swipeRightEvent ? {
         onPointerDown: swipe.onPointerDown,
         onPointerMove: swipe.onPointerMove,
         onPointerUp: swipe.onPointerUp,
         onPointerCancel: swipe.onPointerCancel
       } : {},
-      children: /* @__PURE__ */ jsxs(Box, { className: "min-w-[800px]", children: [
-        /* @__PURE__ */ jsxs(Box, { className: "grid grid-cols-8 border-b border-border", children: [
-          /* @__PURE__ */ jsx(Box, { className: "p-2" }),
-          weekDays.map((day) => {
-            const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
-            const count = eventsForDayCount(day);
-            return /* @__PURE__ */ jsxs(
-              Box,
-              {
-                className: "border-l border-border",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    DayCell,
-                    {
-                      date: day,
-                      isToday,
-                      onClick: onDayClick
-                    }
-                  ),
-                  count > 0 && /* @__PURE__ */ jsx(Box, { className: "text-center pb-1", children: /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: count }) })
-                ]
-              },
-              day.toISOString()
-            );
-          })
+      children: [
+        visibleCount < 7 && /* @__PURE__ */ jsxs(HStack, { align: "center", justify: "between", className: "mb-2 px-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: ChevronLeft,
+              onClick: stepPrev,
+              "aria-disabled": !canPrev || void 0,
+              "aria-label": "Previous days",
+              children: "Prev"
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: formatDateRange(visibleDays[0], visibleDays[visibleDays.length - 1]) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconRight: ChevronRight,
+              onClick: stepNext,
+              "aria-disabled": !canNext || void 0,
+              "aria-label": "Next days",
+              children: "Next"
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx(Box, { className: "max-h-[500px] overflow-y-auto", children: resolvedTimeSlots.map((time) => /* @__PURE__ */ jsxs(
-          Box,
-          {
-            className: "grid grid-cols-8 border-b border-border",
-            children: [
-              /* @__PURE__ */ jsx(Box, { className: "p-2 text-right pr-3", children: /* @__PURE__ */ jsx(
-                Typography,
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Box, { className: cn("grid border-b border-border", gridColsClass), children: [
+            /* @__PURE__ */ jsx(Box, { className: "p-2" }),
+            visibleDays.map((day) => {
+              const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+              const count = eventsForDayCount(day);
+              return /* @__PURE__ */ jsxs(
+                Box,
                 {
-                  variant: "small",
-                  className: "text-muted-foreground",
-                  children: time
-                }
-              ) }),
-              weekDays.map((day) => {
-                const slotEvents = events2.filter(
-                  (ev) => eventInSlot(ev, day, time)
-                );
-                const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
-                return /* @__PURE__ */ jsx(
-                  TimeSlotCell,
-                  {
-                    time,
-                    isOccupied: slotEvents.length > 0,
-                    onClick: () => handleSlotClick(day, time),
-                    className: cn(
-                      "border-l border-border",
-                      isToday && "bg-blue-50/30"
+                  className: "border-l border-border",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      DayCell,
+                      {
+                        date: day,
+                        isToday,
+                        onClick: onDayClick
+                      }
                     ),
-                    ...longPressEvent ? {
-                      onPointerDown: () => startLongPress(day, time),
-                      onPointerUp: clearLongPress,
-                      onPointerCancel: clearLongPress
-                    } : {},
-                    children: /* @__PURE__ */ jsx(VStack, { gap: "xs", children: slotEvents.map(renderEvent) })
-                  },
-                  `${day.toISOString()}-${time}`
-                );
-              })
-            ]
-          },
-          time
-        )) })
-      ] })
+                    count > 0 && /* @__PURE__ */ jsx(Box, { className: "text-center pb-1", children: /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: count }) })
+                  ]
+                },
+                day.toISOString()
+              );
+            })
+          ] }),
+          /* @__PURE__ */ jsx(Box, { className: "max-h-[500px] overflow-y-auto", children: resolvedTimeSlots.map((time) => /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: cn("grid border-b border-border", gridColsClass),
+              children: [
+                /* @__PURE__ */ jsx(Box, { className: "p-2 text-right pr-3", children: /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "small",
+                    className: "text-muted-foreground",
+                    children: time
+                  }
+                ) }),
+                visibleDays.map((day) => {
+                  const slotEvents = events2.filter(
+                    (ev) => eventInSlot(ev, day, time)
+                  );
+                  const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+                  return /* @__PURE__ */ jsx(
+                    TimeSlotCell,
+                    {
+                      time,
+                      isOccupied: slotEvents.length > 0,
+                      onClick: () => handleSlotClick(day, time),
+                      className: cn(
+                        "border-l border-border",
+                        isToday && "bg-blue-50/30"
+                      ),
+                      ...longPressEvent ? {
+                        onPointerDown: () => startLongPress(day, time),
+                        onPointerUp: clearLongPress,
+                        onPointerCancel: clearLongPress
+                      } : {},
+                      children: /* @__PURE__ */ jsx(VStack, { gap: "xs", children: slotEvents.map(renderEvent) })
+                    },
+                    `${day.toISOString()}-${time}`
+                  );
+                })
+              ]
+            },
+            time
+          )) })
+        ] })
+      ]
     }
   );
 }
+var SHORT_DATE;
 var init_CalendarGrid = __esm({
   "components/molecules/CalendarGrid.tsx"() {
     "use client";
     init_cn();
     init_Box();
+    init_Button();
     init_Stack();
     init_Typography();
     init_Badge();
@@ -15645,6 +15745,7 @@ var init_CalendarGrid = __esm({
     init_TimeSlotCell();
     init_useEventBus();
     init_useSwipeGesture();
+    SHORT_DATE = { month: "short", day: "numeric" };
     CalendarGrid.displayName = "CalendarGrid";
   }
 });
@@ -18852,9 +18953,9 @@ var init_Tabs = __esm({
       className
     }) => {
       const rawItems = items ?? tabs ?? [];
-      const safeItems = rawItems.map((item) => ({
-        ...item,
-        id: item.id || item.value || ""
+      const safeItems = rawItems.map(({ id, value, ...rest }) => ({
+        ...rest,
+        id: id || value || ""
       }));
       const eventBus = useEventBus();
       const { t } = useTranslate();
@@ -18923,7 +19024,12 @@ var init_Tabs = __esm({
             role: "tablist",
             className: cn(
               "flex",
-              orientation === "horizontal" ? "flex-row border-b-[length:var(--border-width)] border-border" : "flex-col border-r-[length:var(--border-width)] border-border",
+              // Horizontal tab strip becomes a horizontally-scrollable lane
+              // below its container width — phones with many tabs scroll
+              // instead of clipping. `snap-x` snaps to each tab; the
+              // scrollbar is hidden for a cleaner affordance (the swipe
+              // gesture is the discoverability cue).
+              orientation === "horizontal" ? "flex-row border-b-[length:var(--border-width)] border-border overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden" : "flex-col border-r-[length:var(--border-width)] border-border",
               variant === "pills" && "gap-1 p-1 bg-muted border-0 rounded-md",
               variant === "underline" && orientation === "vertical" && "border-b-0"
             ),
@@ -18945,7 +19051,8 @@ var init_Tabs = __esm({
                   onKeyDown: (e) => handleKeyDown(e, index),
                   "data-active": isActive,
                   className: cn(
-                    "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all",
+                    "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all whitespace-nowrap",
+                    orientation === "horizontal" && "snap-start shrink-0",
                     "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                     isDisabled && "opacity-50 cursor-not-allowed",
                     variantClasses2[variant],
@@ -19842,7 +19949,7 @@ function CraftingRecipe({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCraft = React75.useCallback(() => {
+  const handleCraft = React78.useCallback(() => {
     onCraft?.();
     if (craftEvent) {
       eventBus.emit(craftEvent, { output: output.label });
@@ -19859,7 +19966,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(React75.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React78.Fragment, { children: [
             /* @__PURE__ */ jsx(Box, { className: "relative", children: /* @__PURE__ */ jsx(
               ItemSlot,
               {
@@ -19922,8 +20029,8 @@ function DPad({
 }) {
   const eventBus = useEventBus();
   const sizes = sizeMap6[size];
-  const [activeDirections, setActiveDirections] = React75.useState(/* @__PURE__ */ new Set());
-  const handlePress = React75.useCallback(
+  const [activeDirections, setActiveDirections] = React78.useState(/* @__PURE__ */ new Set());
+  const handlePress = React78.useCallback(
     (direction) => {
       setActiveDirections((prev) => new Set(prev).add(direction));
       if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: true });
@@ -19931,7 +20038,7 @@ function DPad({
     },
     [directionEvent, eventBus, onDirection]
   );
-  const handleRelease = React75.useCallback(
+  const handleRelease = React78.useCallback(
     (direction) => {
       setActiveDirections((prev) => {
         const next = new Set(prev);
@@ -20525,14 +20632,14 @@ function useDataDnd(args) {
   const isZone = Boolean(dragGroup || accepts || sortable);
   const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
-  const parentRoot = React75__default.useContext(RootCtx);
+  const parentRoot = React78__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const zoneId = React75__default.useId();
+  const zoneId = React78__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
-  const [optimisticOrders, setOptimisticOrders] = React75__default.useState(() => /* @__PURE__ */ new Map());
-  const optimisticOrdersRef = React75__default.useRef(optimisticOrders);
+  const [optimisticOrders, setOptimisticOrders] = React78__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React78__default.useRef(optimisticOrders);
   optimisticOrdersRef.current = optimisticOrders;
-  const clearOptimisticOrder = React75__default.useCallback((group) => {
+  const clearOptimisticOrder = React78__default.useCallback((group) => {
     setOptimisticOrders((prev) => {
       if (!prev.has(group)) return prev;
       const next = new Map(prev);
@@ -20557,7 +20664,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
   }).join("|");
-  const itemIds = React75__default.useMemo(
+  const itemIds = React78__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
@@ -20565,7 +20672,7 @@ function useDataDnd(args) {
     [itemIdsSignature]
   );
   const itemsContentSig = items.map((it, idx) => String(it[dndItemIdField] ?? `__${idx}`)).join("|");
-  React75__default.useEffect(() => {
+  React78__default.useEffect(() => {
     const root = isRoot ? null : parentRoot;
     if (root) {
       root.clearOptimisticOrder(ownGroup);
@@ -20573,20 +20680,20 @@ function useDataDnd(args) {
       clearOptimisticOrder(ownGroup);
     }
   }, [itemsContentSig, ownGroup]);
-  const zonesRef = React75__default.useRef(/* @__PURE__ */ new Map());
-  const registerZone = React75__default.useCallback((zoneId2, meta2) => {
+  const zonesRef = React78__default.useRef(/* @__PURE__ */ new Map());
+  const registerZone = React78__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
   }, []);
-  const unregisterZone = React75__default.useCallback((zoneId2) => {
+  const unregisterZone = React78__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
-  const [activeDrag, setActiveDrag] = React75__default.useState(null);
-  const [overZoneGroup, setOverZoneGroup] = React75__default.useState(null);
-  const meta = React75__default.useMemo(
+  const [activeDrag, setActiveDrag] = React78__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React78__default.useState(null);
+  const meta = React78__default.useMemo(
     () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
     [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
-  React75__default.useEffect(() => {
+  React78__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
@@ -20605,7 +20712,7 @@ function useDataDnd(args) {
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useAlmadarDndSensors(true);
   const collisionDetection = almadarDndCollisionDetection;
-  const findZoneByItem = React75__default.useCallback(
+  const findZoneByItem = React78__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
         if (z.itemIds.includes(id)) return z;
@@ -20614,7 +20721,7 @@ function useDataDnd(args) {
     },
     []
   );
-  React75__default.useCallback(
+  React78__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -20623,7 +20730,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const handleDragEnd = React75__default.useCallback(
+  const handleDragEnd = React78__default.useCallback(
     (event) => {
       const { active, over } = event;
       const activeIdStr = String(active.id);
@@ -20714,8 +20821,8 @@ function useDataDnd(args) {
     },
     [eventBus]
   );
-  const sortableData = React75__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
-  const SortableItem = React75__default.useCallback(
+  const sortableData = React78__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
+  const SortableItem = React78__default.useCallback(
     ({ id, children }) => {
       const {
         attributes,
@@ -20755,7 +20862,7 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
-    const ctx = React75__default.useContext(RootCtx);
+    const ctx = React78__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
     const overZoneGroup2 = ctx?.overZoneGroup ?? null;
     const isThisZoneOver = overZoneGroup2 === ownGroup;
@@ -20770,7 +20877,7 @@ function useDataDnd(args) {
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
-    React75__default.useEffect(() => {
+    React78__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsx(
@@ -20784,11 +20891,11 @@ function useDataDnd(args) {
       }
     );
   };
-  const rootContextValue = React75__default.useMemo(
+  const rootContextValue = React78__default.useMemo(
     () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
     [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
-  const handleDragStart = React75__default.useCallback((event) => {
+  const handleDragStart = React78__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;
@@ -20807,7 +20914,7 @@ function useDataDnd(args) {
       isRoot
     });
   }, [findZoneByItem, isRoot, zoneId]);
-  const handleDragOver = React75__default.useCallback((event) => {
+  const handleDragOver = React78__default.useCallback((event) => {
     const { active, over } = event;
     const overData = over?.data?.current;
     const overGroup = overData?.dndGroup ?? null;
@@ -20877,7 +20984,7 @@ function useDataDnd(args) {
       return next;
     });
   }, []);
-  const handleDragCancel = React75__default.useCallback((event) => {
+  const handleDragCancel = React78__default.useCallback((event) => {
     setActiveDrag(null);
     setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
@@ -20885,12 +20992,12 @@ function useDataDnd(args) {
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
-  const handleDragEndWithCleanup = React75__default.useCallback((event) => {
+  const handleDragEndWithCleanup = React78__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
     setOverZoneGroup(null);
   }, [handleDragEnd]);
-  const wrapContainer = React75__default.useCallback(
+  const wrapContainer = React78__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
@@ -20944,7 +21051,7 @@ var init_useDataDnd = __esm({
     init_useAlmadarDndCollision();
     init_Box();
     dndLog = createLogger("almadar:ui:dnd");
-    RootCtx = React75__default.createContext(null);
+    RootCtx = React78__default.createContext(null);
   }
 });
 function fieldLabel2(key) {
@@ -21433,7 +21540,7 @@ function DataList({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React75__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React78__default.useState(pageSize || Infinity);
   const fieldDefs = fields ?? columns ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -21452,7 +21559,7 @@ function DataList({
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
-  React75__default.useEffect(() => {
+  React78__default.useEffect(() => {
     const renderItemTypeOf = typeof schemaRenderItem;
     const childrenTypeOf = typeof children;
     if (data.length > 0 && !hasRenderProp) {
@@ -21509,7 +21616,7 @@ function DataList({
     const items2 = data.map((item) => item);
     const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
     const contentField = titleField?.name ?? fieldDefs[0]?.name ?? "";
-    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React78__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}`;
@@ -21697,7 +21804,7 @@ function DataList({
           className
         ),
         children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs(React78__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)
@@ -22934,6 +23041,8 @@ var SidePanel;
 var init_SidePanel = __esm({
   "components/molecules/SidePanel.tsx"() {
     "use client";
+    init_Aside();
+    init_Box();
     init_Button();
     init_Typography();
     init_cn();
@@ -22943,7 +23052,7 @@ var init_SidePanel = __esm({
       children,
       isOpen,
       onClose,
-      width = "w-96",
+      width = "w-full sm:w-96",
       position = "right",
       showOverlay = true,
       className,
@@ -22957,14 +23066,14 @@ var init_SidePanel = __esm({
       if (!isOpen) return null;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         showOverlay && /* @__PURE__ */ jsx(
-          "div",
+          Box,
           {
             className: "fixed inset-0 bg-white/80 backdrop-blur-sm z-40 lg:hidden",
             onClick: handleClose
           }
         ),
         /* @__PURE__ */ jsxs(
-          "aside",
+          Aside,
           {
             className: cn(
               "fixed top-16 lg:top-0 bottom-0 z-[60]",
@@ -22978,7 +23087,7 @@ var init_SidePanel = __esm({
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b-2 border-border sticky top-0 bg-card z-10", 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 }),
                 /* @__PURE__ */ jsx(
                   Button,
@@ -22988,11 +23097,11 @@ var init_SidePanel = __esm({
                     icon: X,
                     onClick: handleClose,
                     "aria-label": "Close panel",
-                    children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                    children: /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", className: "sr-only", children: "Close" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "p-4 flex-1 overflow-y-auto", children })
+              /* @__PURE__ */ jsx(Box, { className: "p-4 flex-1 overflow-y-auto", children })
             ]
           }
         )
@@ -23043,7 +23152,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(React75__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -23168,7 +23277,9 @@ var init_WizardNavigation = __esm({
         {
           border: true,
           className: cn(
-            "border-t-2 border-x-0 border-b-0 border-border flex justify-between items-center",
+            // `flex-wrap gap-2` lets the Back / Step / Next trio reflow on
+            // narrow viewports rather than crushing the step counter.
+            "border-t-2 border-x-0 border-b-0 border-border flex flex-wrap gap-2 justify-between items-center",
             compact ? "px-4 py-2" : "px-6 py-4",
             className
           ),
@@ -24088,9 +24199,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] = React75.useState(resolvedValue);
-  const [isAnimating, setIsAnimating] = React75.useState(false);
-  React75.useEffect(() => {
+  const [displayValue, setDisplayValue] = React78.useState(resolvedValue);
+  const [isAnimating, setIsAnimating] = React78.useState(false);
+  React78.useEffect(() => {
     if (!animated || displayValue === resolvedValue) {
       setDisplayValue(resolvedValue);
       return;
@@ -24240,7 +24351,7 @@ function InventoryGrid({
   const eventBus = useEventBus();
   const slotCount = totalSlots ?? items.length;
   const emptySlotCount = Math.max(0, slotCount - items.length);
-  const handleSelect = React75.useCallback(
+  const handleSelect = React78.useCallback(
     (id) => {
       onSelect?.(id);
       if (selectEvent) {
@@ -24522,15 +24633,15 @@ function GameCanvas2D({
   fps = 60,
   className
 }) {
-  const canvasRef = React75.useRef(null);
-  const rafRef = React75.useRef(0);
-  const frameRef = React75.useRef(0);
-  const lastTimeRef = React75.useRef(0);
-  const onDrawRef = React75.useRef(onDraw);
+  const canvasRef = React78.useRef(null);
+  const rafRef = React78.useRef(0);
+  const frameRef = React78.useRef(0);
+  const lastTimeRef = React78.useRef(0);
+  const onDrawRef = React78.useRef(onDraw);
   onDrawRef.current = onDraw;
-  const onTickRef = React75.useRef(onTick);
+  const onTickRef = React78.useRef(onTick);
   onTickRef.current = onTick;
-  React75.useEffect(() => {
+  React78.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -24871,7 +24982,7 @@ function TurnPanel({
   className
 }) {
   const eventBus = useEventBus();
-  const handleAction = React75.useCallback(
+  const handleAction = React78.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { turn: currentTurn, phase, activeTeam });
@@ -25017,7 +25128,7 @@ function UnitCommandBar({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCommand = React75.useCallback(
+  const handleCommand = React78.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { unitId: selectedUnitId });
@@ -25502,7 +25613,7 @@ function GameMenu({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleOptionClick = React75.useCallback(
+  const handleOptionClick = React78.useCallback(
     (option) => {
       if (option.event && eventBus) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -25616,7 +25727,7 @@ function GameOverScreen({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleActionClick = React75.useCallback(
+  const handleActionClick = React78.useCallback(
     (action) => {
       if (action.event && eventBus) {
         eventBus.emit(`UI:${action.event}`, { action });
@@ -28297,7 +28408,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(React75__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(React78__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" })
@@ -28308,7 +28419,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(React75__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(React78__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 }),
@@ -28376,9 +28487,9 @@ var init_SplitSection = __esm({
             className
           ),
           padding: "lg",
-          children: /* @__PURE__ */ jsxs(Box, { className: cn("w-full flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
-            /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
-            /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
+          children: /* @__PURE__ */ jsxs(Box, { className: cn("w-full flex flex-col md:flex-row gap-8 md:gap-12 lg:gap-16 items-center", isImageLeft && "md:flex-row-reverse"), children: [
+            /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 md:min-w-[45%]", children: textContent }),
+            /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 md:max-w-[50%]", children: mediaContent })
           ] })
         }
       );
@@ -29190,7 +29301,7 @@ var init_LikertScale = __esm({
       md: "text-base",
       lg: "text-lg"
     };
-    LikertScale = React75__default.forwardRef(
+    LikertScale = React78__default.forwardRef(
       ({
         question,
         options = DEFAULT_LIKERT_OPTIONS,
@@ -29202,7 +29313,7 @@ var init_LikertScale = __esm({
         variant = "radios",
         className
       }, ref) => {
-        const groupId = React75__default.useId();
+        const groupId = React78__default.useId();
         const eventBus = useEventBus();
         const handleSelect = useCallback(
           (next) => {
@@ -31206,7 +31317,7 @@ var init_VersionDiff = __esm({
               /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className: "flex-wrap", children: [
                 /* @__PURE__ */ jsx(Icon, { icon: GitCommit, size: "sm", className: "text-muted-foreground" }),
                 /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "whitespace-nowrap", children: "Compare" }),
-                /* @__PURE__ */ jsx(Box, { className: "min-w-[160px]", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Box, { className: "min-w-0 md:min-w-[160px]", children: /* @__PURE__ */ jsx(
                   Select,
                   {
                     options,
@@ -31216,7 +31327,7 @@ var init_VersionDiff = __esm({
                   }
                 ) }),
                 /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "to" }),
-                /* @__PURE__ */ jsx(Box, { className: "min-w-[160px]", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Box, { className: "min-w-0 md:min-w-[160px]", children: /* @__PURE__ */ jsx(
                   Select,
                   {
                     options,
@@ -31281,8 +31392,8 @@ var init_VersionDiff = __esm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Box, { className: "overflow-auto bg-muted/20", style: { maxHeight: 600 }, children: activeView === "side-by-side" ? /* @__PURE__ */ jsxs(Box, { className: "grid grid-cols-2", children: [
-          /* @__PURE__ */ jsx(Box, { className: "border-r border-border", children: /* @__PURE__ */ jsx(VStack, { gap: "none", className: "font-mono text-xs", children: beforeLines.map((line, idx) => {
+        /* @__PURE__ */ jsx(Box, { className: "overflow-auto bg-muted/20", style: { maxHeight: 600 }, children: activeView === "side-by-side" ? /* @__PURE__ */ jsxs(Box, { className: "grid grid-cols-1 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "border-b md:border-b-0 md:border-r border-border", children: /* @__PURE__ */ jsx(VStack, { gap: "none", className: "font-mono text-xs", children: beforeLines.map((line, idx) => {
             const isRemoved = line.type === "removed";
             return /* @__PURE__ */ jsxs(
               HStack,
@@ -31428,7 +31539,7 @@ var init_DocBreadcrumb = __esm({
           "aria-label": "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(React75__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -32318,7 +32429,7 @@ var init_MiniStateMachine = __esm({
           const x = 2 + i * (NODE_W + GAP + ARROW_W + GAP);
           const tc = transitionCounts[s.name] ?? 0;
           const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
-          return /* @__PURE__ */ jsxs(React75__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               AvlState,
               {
@@ -33832,7 +33943,7 @@ var init_DocumentViewer = __esm({
   }
 });
 function extractTitle(children) {
-  if (!React75__default.isValidElement(children)) return void 0;
+  if (!React78__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -33944,7 +34055,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(React75__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -34845,12 +34956,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 = React75__default.useMemo(() => {
+      const normalizedInitialData = React78__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 = React75__default.useMemo(() => {
+      const entityDerivedFields = React78__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
         if (!resolvedEntity) return void 0;
         return resolvedEntity.fields.map(
@@ -34869,16 +34980,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] = React75__default.useState(
+      const [formData, setFormData] = React78__default.useState(
         normalizedInitialData
       );
-      const [collapsedSections, setCollapsedSections] = React75__default.useState(
+      const [collapsedSections, setCollapsedSections] = React78__default.useState(
         /* @__PURE__ */ new Set()
       );
-      const [submitError, setSubmitError] = React75__default.useState(null);
-      const formRef = React75__default.useRef(null);
+      const [submitError, setSubmitError] = React78__default.useState(null);
+      const formRef = React78__default.useRef(null);
       const formMode = props.mode;
-      const mountedRef = React75__default.useRef(false);
+      const mountedRef = React78__default.useRef(false);
       if (!mountedRef.current) {
         mountedRef.current = true;
         debug("forms", "mount", {
@@ -34891,7 +35002,7 @@ var init_Form = __esm({
         });
       }
       const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-      const evalContext = React75__default.useMemo(
+      const evalContext = React78__default.useMemo(
         () => ({
           formValues: formData,
           globalVariables: externalContext?.globalVariables ?? {},
@@ -34900,7 +35011,7 @@ var init_Form = __esm({
         }),
         [formData, externalContext]
       );
-      React75__default.useEffect(() => {
+      React78__default.useEffect(() => {
         debug("forms", "initialData-sync", {
           mode: formMode,
           normalizedInitialData,
@@ -34911,7 +35022,7 @@ var init_Form = __esm({
           setFormData(normalizedInitialData);
         }
       }, [normalizedInitialData]);
-      const processCalculations = React75__default.useCallback(
+      const processCalculations = React78__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!hiddenCalculations.length) return;
           const context = {
@@ -34936,7 +35047,7 @@ var init_Form = __esm({
         },
         [hiddenCalculations, externalContext, eventBus]
       );
-      const checkViolations = React75__default.useCallback(
+      const checkViolations = React78__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!violationTriggers.length) return;
           const context = {
@@ -34974,7 +35085,7 @@ var init_Form = __esm({
         processCalculations(name, newFormData);
         checkViolations(name, newFormData);
       };
-      const isFieldVisible = React75__default.useCallback(
+      const isFieldVisible = React78__default.useCallback(
         (fieldName) => {
           const condition = conditionalFields[fieldName];
           if (!condition) return true;
@@ -34982,7 +35093,7 @@ var init_Form = __esm({
         },
         [conditionalFields, evalContext]
       );
-      const isSectionVisible = React75__default.useCallback(
+      const isSectionVisible = React78__default.useCallback(
         (section) => {
           if (!section.condition) return true;
           return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -35058,7 +35169,7 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onCancel}`);
         }
       };
-      const renderField = React75__default.useCallback(
+      const renderField = React78__default.useCallback(
         (field) => {
           const fieldName = field.name || field.field;
           if (!fieldName) return null;
@@ -35079,7 +35190,7 @@ var init_Form = __esm({
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
       const effectiveFields = entityDerivedFields ?? fields;
-      const normalizedFields = React75__default.useMemo(() => {
+      const normalizedFields = React78__default.useMemo(() => {
         if (!effectiveFields || effectiveFields.length === 0) return [];
         return effectiveFields.map((field) => {
           if (typeof field === "string") {
@@ -35101,7 +35212,7 @@ var init_Form = __esm({
           return field;
         });
       }, [effectiveFields, resolvedEntity]);
-      const schemaFields = React75__default.useMemo(() => {
+      const schemaFields = React78__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
           debugGroup(`Form: ${entityName || "unknown"}`);
@@ -35111,7 +35222,7 @@ var init_Form = __esm({
         }
         return normalizedFields.map(renderField).filter(Boolean);
       }, [normalizedFields, renderField, entityName, conditionalFields]);
-      const sectionElements = React75__default.useMemo(() => {
+      const sectionElements = React78__default.useMemo(() => {
         if (!sections || sections.length === 0) return null;
         return sections.map((section) => {
           if (!isSectionVisible(section)) {
@@ -36837,7 +36948,7 @@ var init_List = __esm({
         if (entity && typeof entity === "object" && "id" in entity) return [entity];
         return [];
       }, [entity]);
-      const getItemActions = React75__default.useCallback(
+      const getItemActions = React78__default.useCallback(
         (item) => {
           if (!itemActions) return [];
           if (typeof itemActions === "function") {
@@ -37310,7 +37421,7 @@ var init_MediaGallery = __esm({
         [selectable, selectedItems, selectionEvent, eventBus]
       );
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React75__default.useMemo(() => {
+      const items = React78__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => ({
@@ -37483,9 +37594,9 @@ function MiniMap({
   viewportRect,
   className
 }) {
-  const canvasRef = React75.useRef(null);
-  const frameRef = React75.useRef(0);
-  React75.useEffect(() => {
+  const canvasRef = React78.useRef(null);
+  const frameRef = React78.useRef(0);
+  React78.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -37567,7 +37678,7 @@ var init_MiniMap = __esm({
   }
 });
 function extractTitle2(children) {
-  if (!React75__default.isValidElement(children)) return void 0;
+  if (!React78__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -38280,7 +38391,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(React75__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(React78__default.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
           crumb.href ? /* @__PURE__ */ jsx(
             "a",
@@ -38621,7 +38732,7 @@ var init_debugRegistry = __esm({
   }
 });
 function useDebugData() {
-  const [data, setData] = React75.useState(() => ({
+  const [data, setData] = React78.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -38635,7 +38746,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React75.useEffect(() => {
+  React78.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -38744,12 +38855,12 @@ function layoutGraph(states, transitions, initialState, width, height) {
   return positions;
 }
 function WalkMinimap() {
-  const [walkStep, setWalkStep] = React75.useState(null);
-  const [traits2, setTraits] = React75.useState([]);
-  const [coveredEdges, setCoveredEdges] = React75.useState([]);
-  const [completedTraits, setCompletedTraits] = React75.useState(/* @__PURE__ */ new Set());
-  const prevTraitRef = React75.useRef(null);
-  React75.useEffect(() => {
+  const [walkStep, setWalkStep] = React78.useState(null);
+  const [traits2, setTraits] = React78.useState([]);
+  const [coveredEdges, setCoveredEdges] = React78.useState([]);
+  const [completedTraits, setCompletedTraits] = React78.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React78.useRef(null);
+  React78.useEffect(() => {
     const interval = setInterval(() => {
       const w = window;
       const step = w.__orbitalWalkStep;
@@ -39196,15 +39307,15 @@ var init_EntitiesTab = __esm({
   }
 });
 function EventFlowTab({ events: events2 }) {
-  const [filter, setFilter] = React75.useState("all");
-  const containerRef = React75.useRef(null);
-  const [autoScroll, setAutoScroll] = React75.useState(true);
-  React75.useEffect(() => {
+  const [filter, setFilter] = React78.useState("all");
+  const containerRef = React78.useRef(null);
+  const [autoScroll, setAutoScroll] = React78.useState(true);
+  React78.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React75.useMemo(() => {
+  const filteredEvents = React78.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -39323,7 +39434,7 @@ var init_EventFlowTab = __esm({
   }
 });
 function GuardsPanel({ guards }) {
-  const [filter, setFilter] = React75.useState("all");
+  const [filter, setFilter] = React78.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -39336,7 +39447,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React75.useMemo(() => {
+  const filteredGuards = React78.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -39497,10 +39608,10 @@ function EffectBadge({ effect }) {
   ] });
 }
 function TransitionTimeline({ transitions }) {
-  const containerRef = React75.useRef(null);
-  const [autoScroll, setAutoScroll] = React75.useState(true);
-  const [expandedId, setExpandedId] = React75.useState(null);
-  React75.useEffect(() => {
+  const containerRef = React78.useRef(null);
+  const [autoScroll, setAutoScroll] = React78.useState(true);
+  const [expandedId, setExpandedId] = React78.useState(null);
+  React78.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -39786,9 +39897,9 @@ function getAllEvents(traits2) {
 }
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
-  const [log18, setLog] = React75.useState([]);
-  const prevStatesRef = React75.useRef(/* @__PURE__ */ new Map());
-  React75.useEffect(() => {
+  const [log18, setLog] = React78.useState([]);
+  const prevStatesRef = React78.useRef(/* @__PURE__ */ new Map());
+  React78.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -39958,10 +40069,10 @@ function VerifyModePanel({
   serverCount,
   localCount
 }) {
-  const [expanded, setExpanded] = React75.useState(true);
-  const scrollRef = React75.useRef(null);
-  const prevCountRef = React75.useRef(0);
-  React75.useEffect(() => {
+  const [expanded, setExpanded] = React78.useState(true);
+  const scrollRef = React78.useRef(null);
+  const prevCountRef = React78.useRef(0);
+  React78.useEffect(() => {
     if (expanded && transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -40027,10 +40138,10 @@ function RuntimeDebugger({
   defaultTab,
   schema
 }) {
-  const [isCollapsed, setIsCollapsed] = React75.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React75.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React78.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React78.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React75.useEffect(() => {
+  React78.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -40039,7 +40150,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React75.useEffect(() => {
+  React78.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -40588,7 +40699,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(React75__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -42101,7 +42212,7 @@ var init_StatCard = __esm({
       const labelToUse = propLabel ?? propTitle;
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleActionClick = React75__default.useCallback(() => {
+      const handleActionClick = React78__default.useCallback(() => {
         if (action?.event) {
           eventBus.emit(`UI:${action.event}`, {});
         }
@@ -42112,7 +42223,7 @@ var init_StatCard = __esm({
       const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
       const isLoading = externalLoading ?? false;
       const error = externalError;
-      const computeMetricValue = React75__default.useCallback(
+      const computeMetricValue = React78__default.useCallback(
         (metric, items) => {
           if (metric.value !== void 0) {
             return metric.value;
@@ -42151,7 +42262,7 @@ var init_StatCard = __esm({
         },
         []
       );
-      const schemaStats = React75__default.useMemo(() => {
+      const schemaStats = React78__default.useMemo(() => {
         if (!metrics || metrics.length === 0) return null;
         return metrics.map((metric) => ({
           label: metric.label,
@@ -42159,7 +42270,7 @@ var init_StatCard = __esm({
           format: metric.format
         }));
       }, [metrics, data, computeMetricValue]);
-      const calculatedTrend = React75__default.useMemo(() => {
+      const calculatedTrend = React78__default.useMemo(() => {
         if (manualTrend !== void 0) return manualTrend;
         if (previousValue === void 0 || currentValue === void 0)
           return void 0;
@@ -43341,7 +43452,7 @@ var init_Timeline = __esm({
     }) => {
       const { t } = useTranslate();
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React75__default.useMemo(() => {
+      const items = React78__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -43498,7 +43609,7 @@ var init_TimerDisplay = __esm({
   }
 });
 function extractToastProps(children) {
-  if (!React75__default.isValidElement(children)) {
+  if (!React78__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -43536,7 +43647,7 @@ var init_ToastSlot = __esm({
         eventBus.emit("UI:CLOSE");
       };
       if (!isVisible) return null;
-      const isCustomContent = React75__default.isValidElement(children) && !message;
+      const isCustomContent = React78__default.isValidElement(children) && !message;
       return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
         Toast,
         {
@@ -43805,7 +43916,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(React75__default.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -44255,12 +44366,12 @@ var init_XPBar = __esm({
   }
 });
 function lazyThree(name, loader) {
-  const Lazy = React75__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  const Lazy = React78__default.lazy(() => loader().then((m) => ({ default: m[name] })));
   function ThreeWrapper(props) {
-    return React75__default.createElement(
-      React75__default.Suspense,
+    return React78__default.createElement(
+      React78__default.Suspense,
       { fallback: null },
-      React75__default.createElement(Lazy, props)
+      React78__default.createElement(Lazy, props)
     );
   }
   ThreeWrapper.displayName = `Lazy(${name})`;
@@ -44279,6 +44390,7 @@ var init_component_registry_generated = __esm({
     init_AnimatedGraphic();
     init_AnimatedReveal();
     init_ArticleSection();
+    init_Aside();
     init_AuthLayout();
     init_BattleBoard();
     init_BattleTemplate();
@@ -44333,6 +44445,7 @@ var init_component_registry_generated = __esm({
     init_DayCell();
     init_DebuggerBoard();
     init_DetailPanel();
+    init_Dialog();
     init_DialogueBox();
     init_DialogueBubble();
     init_DocBreadcrumb();
@@ -44546,6 +44659,7 @@ var init_component_registry_generated = __esm({
       "AnimatedGraphic": AnimatedGraphic,
       "AnimatedReveal": AnimatedReveal,
       "ArticleSection": ArticleSection,
+      "Aside": Aside,
       "AuthLayout": AuthLayout,
       "Avatar": AvatarPattern,
       "AvatarPattern": AvatarPattern,
@@ -44615,6 +44729,7 @@ var init_component_registry_generated = __esm({
       "DayCell": DayCell,
       "DebuggerBoard": DebuggerBoard,
       "DetailPanel": DetailPanel,
+      "Dialog": Dialog,
       "DialogueBox": DialogueBox,
       "DialogueBubble": DialogueBubble,
       "Divider": DividerPattern,
@@ -44868,7 +44983,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React75__default.createElement(
+  return React78__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -45351,7 +45466,7 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
         const key = `${parentId}-${index}-trait:${traitName}`;
         return /* @__PURE__ */ jsx(TraitFrame, { traitName }, key);
       }
-      return /* @__PURE__ */ jsx(React75__default.Fragment, { children: child }, `${parentId}-${index}`);
+      return /* @__PURE__ */ jsx(React78__default.Fragment, { children: child }, `${parentId}-${index}`);
     }
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
@@ -45388,14 +45503,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 (React75__default.isValidElement(value)) return false;
+  if (React78__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
   return "type" in record && typeof record.type === "string";
 }
 function isPlainConfigObject(value) {
-  if (React75__default.isValidElement(value)) return false;
+  if (React78__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
@@ -45787,6 +45902,8 @@ var init_atoms = __esm({
     init_ThemeSelector();
     init_Overlay();
     init_FlipContainer();
+    init_Dialog();
+    init_Aside();
     init_ConditionalWrapper();
     init_LawReferenceTooltip();
     init_DayCell();
@@ -45840,7 +45957,7 @@ var FormSection = ({
   columns = 1,
   className
 }) => {
-  const [collapsed, setCollapsed] = React75__default.useState(defaultCollapsed);
+  const [collapsed, setCollapsed] = React78__default.useState(defaultCollapsed);
   const { t } = useTranslate();
   const eventBus = useEventBus();
   const gridClass = {
@@ -45848,7 +45965,7 @@ var FormSection = ({
     2: "grid-cols-1 md:grid-cols-2",
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
   }[columns];
-  React75__default.useCallback(() => {
+  React78__default.useCallback(() => {
     if (collapsible) {
       setCollapsed((prev) => !prev);
       eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -48716,4 +48833,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, 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, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity as useEntityById, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, 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, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity as useEntityById, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };