@almadar/ui 5.15.0 → 5.16.2

package/dist/avl/index.js

@@ -4,7 +4,7 @@ import * as React98 from 'react';
 import React98__default, { createContext, useState, useMemo, useRef, useEffect, useContext, useCallback, Suspense, useLayoutEffect, Profiler, useReducer, useSyncExternalStore, lazy, useId, forwardRef, useImperativeHandle, Component } from 'react';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import ELK from 'elkjs/lib/elk.bundled.js';
-import { MarkerType, Handle, Position, getBezierPath, EdgeLabelRenderer, BaseEdge, ReactFlowProvider, useNodesState, useEdgesState, useReactFlow, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
+import { MarkerType, useReactFlow, Handle, Position, getBezierPath, EdgeLabelRenderer, BaseEdge, ReactFlowProvider, useNodesState, useEdgesState, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
 import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, Code, FileText, WrapText, Check, Copy, AlertTriangle, Trash2, ZoomOut, ZoomIn, Download, RotateCcw, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, ArrowLeft, HelpCircle, Search, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Minus, Eraser, TrendingUp, TrendingDown, ArrowUp, ArrowDown, MoreVertical, AlertCircle, Circle, Clock, CheckCircle2, CheckCircle, XCircle, Play, Pause, SkipForward, Bug, Send, ChevronUp, ChevronDown, Wrench, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
 import * as PhosphorIcons from '@phosphor-icons/react';
@@ -3308,7 +3308,7 @@ function captureSubscriberTag(listener) {
   }
   return "unknown";
 }
-function EventBusProvider({ children }) {
+function EventBusProvider({ children, isolated = false }) {
   const listenersRef = useRef(/* @__PURE__ */ new Map());
   const anyListenersRef = useRef(/* @__PURE__ */ new Set());
   const deprecationWarningShown = useRef(false);
@@ -3424,11 +3424,12 @@ function EventBusProvider({ children }) {
     [emit, on, once, hasListeners, onAny, getSelectedEntity, clearSelectedEntity]
   );
   useEffect(() => {
+    if (isolated) return;
     setGlobalEventBus(contextValue);
     return () => {
       setGlobalEventBus(null);
     };
-  }, [contextValue]);
+  }, [contextValue, isolated]);
   return /* @__PURE__ */ jsx(EventBusContext.Provider, { value: contextValue, children });
 }
 var busLog, subLog, EventBusContext, listenerTags;
@@ -14577,13 +14578,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect89, useRef: useRef88, useCallback: useCallback130, useState: useState125 } = React98__default;
+      const { useEffect: useEffect90, useRef: useRef89, useCallback: useCallback130, useState: useState125 } = React98__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef88({ centerLat, centerLng, zoom });
-        useEffect89(() => {
+        const prevRef = useRef89({ centerLat, centerLng, zoom });
+        useEffect90(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -14594,7 +14595,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect89(() => {
+        useEffect90(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -26109,6 +26110,21 @@ var init_DashboardLayout = __esm({
       };
       const [sidebarOpen, setSidebarOpen] = useState(false);
       const [userMenuOpen, setUserMenuOpen] = useState(false);
+      const layoutRef = useRef(null);
+      const [isMobile, setIsMobile] = useState(false);
+      useEffect(() => {
+        const el = layoutRef.current;
+        if (!el || typeof ResizeObserver === "undefined") return;
+        const ro = new ResizeObserver((entries) => {
+          const w = entries[0]?.contentRect.width ?? el.clientWidth;
+          setIsMobile(w < 1024);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+      }, []);
+      useEffect(() => {
+        if (!isMobile && sidebarOpen) setSidebarOpen(false);
+      }, [isMobile, sidebarOpen]);
       const location = useLocation();
       const ctxPagePath = useCurrentPagePath();
       const activePath = currentPath ?? ctxPagePath ?? location.pathname;
@@ -26121,15 +26137,15 @@ var init_DashboardLayout = __esm({
       const showBottomNav = layoutMode === "bottomnav";
       const isTopNav = layoutMode === "topnav";
       return /* @__PURE__ */ jsxs(
-        HStack,
+        Box,
         {
-          gap: "none",
-          className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
+          ref: layoutRef,
+          className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background flex flex-row items-stretch",
           children: [
-            showSidebar && sidebarOpen && /* @__PURE__ */ jsx(
+            showSidebar && isMobile && sidebarOpen && /* @__PURE__ */ jsx(
               Box,
               {
-                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
+                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20",
                 onClick: () => setSidebarOpen(false)
               }
             ),
@@ -26139,11 +26155,16 @@ var init_DashboardLayout = __esm({
                 as: "aside",
                 className: cn(
                   "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
-                  "fixed inset-y-0 left-0 @lg/dashboard:static @lg/dashboard:translate-x-0 @lg/dashboard:h-auto",
-                  "transform transition-transform duration-200 ease-in-out",
-                  "flex flex-col",
-                  sidebarOpen ? "translate-x-0" : "-translate-x-full"
+                  "flex flex-col"
                 ),
+                style: isMobile ? {
+                  position: "fixed",
+                  top: 0,
+                  bottom: 0,
+                  left: 0,
+                  transform: sidebarOpen ? "translateX(0)" : "translateX(-100%)",
+                  transition: "transform 200ms ease-in-out"
+                } : { position: "static", transform: "none" },
                 children: [
                   /* @__PURE__ */ jsxs(
                     HStack,
@@ -26172,11 +26193,11 @@ var init_DashboardLayout = __esm({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsx(
+                        isMobile && /* @__PURE__ */ jsx(
                           Button,
                           {
                             variant: "ghost",
-                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
+                            className: "p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
                             onClick: () => setSidebarOpen(false),
                             children: /* @__PURE__ */ jsx(Icon, { name: "x", className: "h-5 w-5" })
                           }
@@ -26217,11 +26238,11 @@ var init_DashboardLayout = __esm({
                       justify: "between",
                       className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
                       children: [
-                        showSidebar && /* @__PURE__ */ jsx(
+                        showSidebar && isMobile && /* @__PURE__ */ jsx(
                           Button,
                           {
                             variant: "ghost",
-                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
+                            className: "p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
                             onClick: () => setSidebarOpen(true),
                             "aria-label": "Open sidebar",
                             children: /* @__PURE__ */ jsx(Icon, { name: "menu", className: "h-5 w-5" })
@@ -59979,13 +60000,14 @@ function OrbitalProvider({
   debug: debug2 = false,
   initialData,
   suspense = false,
-  verification
+  verification,
+  isolated = false
 }) {
   const suspenseConfig = useMemo(
     () => ({ enabled: suspense }),
     [suspense]
   );
-  const inner = /* @__PURE__ */ jsx(EventBusProvider, { debug: debug2, children: /* @__PURE__ */ jsx(VerificationProvider, { enabled: verification, children: /* @__PURE__ */ jsx(SelectionProvider, { debug: debug2, children: /* @__PURE__ */ jsx(SuspenseConfigProvider, { config: suspenseConfig, children }) }) }) });
+  const inner = /* @__PURE__ */ jsx(EventBusProvider, { debug: debug2, isolated, children: /* @__PURE__ */ jsx(VerificationProvider, { enabled: verification, children: /* @__PURE__ */ jsx(SelectionProvider, { debug: debug2, children: /* @__PURE__ */ jsx(SuspenseConfigProvider, { config: suspenseConfig, children }) }) }) });
   if (skipTheme) {
     return inner;
   }
@@ -61992,7 +62014,8 @@ function OrbPreview({
   className,
   serverUrl,
   transport,
-  initialPagePath
+  initialPagePath,
+  isolated = false
 }) {
   if (serverUrl && transport) {
     throw new Error("OrbPreview accepts serverUrl OR transport, not both");
@@ -62114,7 +62137,7 @@ function OrbPreview({
       style: { height },
       children: [
         localFallback && /* @__PURE__ */ jsx(Box, { className: "px-3 py-2 bg-[var(--color-warning)] bg-opacity-10 border-b border-[var(--color-warning)] flex items-center gap-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[var(--color-warning-foreground)] flex-1", children: "Preview server unreachable \u2014 running locally. Server-side state and persistence are disabled." }) }),
-        /* @__PURE__ */ jsx(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(
           SchemaRunner,
           {
             schema: parsedSchema,
@@ -62187,7 +62210,8 @@ function BrowserPlayground({
       transport,
       initialPagePath,
       height,
-      className
+      className,
+      isolated: true
     }
   );
 }
@@ -62604,15 +62628,9 @@ function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEve
   return { ...fullSchema, name: `${fullSchema.name}__${orbitalName}__${traitName}__${transitionEvent}`, orbitals: [clonedOrbital] };
 }
 var SELECTION_STYLES = `
-  .orb-preview-live [data-pattern]:hover {
-    outline: 2px dashed var(--color-primary);
-    outline-offset: 1px;
+  .orb-preview-live [data-pattern] {
     cursor: pointer;
   }
-  .orb-preview-live [data-pattern].pattern-selected {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 1px;
-  }
   .orb-preview-live.drag-active [data-accepts-children="true"] {
     outline: 2px dashed var(--color-primary);
     outline-offset: -2px;
@@ -62629,15 +62647,73 @@ var SELECTION_STYLES = `
     pointer-events: none;
   }
 `;
+function absUnion(el) {
+  const own = el.getBoundingClientRect();
+  if (own.width > 0 || own.height > 0) {
+    return { top: own.top, left: own.left, right: own.right, bottom: own.bottom };
+  }
+  let r2 = null;
+  for (const child of Array.from(el.children)) {
+    const box = absUnion(child);
+    if (!box) continue;
+    r2 = r2 ? {
+      top: Math.min(r2.top, box.top),
+      left: Math.min(r2.left, box.left),
+      right: Math.max(r2.right, box.right),
+      bottom: Math.max(r2.bottom, box.bottom)
+    } : box;
+  }
+  return r2;
+}
+function rectRelativeTo(el, container, zoom) {
+  const u = absUnion(el);
+  if (!u) return null;
+  const base = container.getBoundingClientRect();
+  const z = zoom > 0 ? zoom : 1;
+  return {
+    top: (u.top - base.top) / z,
+    left: (u.left - base.left) / z,
+    width: (u.right - u.left) / z,
+    height: (u.bottom - u.top) / z
+  };
+}
+function buildFocus(el, orbitalName) {
+  if (!orbitalName) return null;
+  const path = el.getAttribute("data-orb-path") ?? el.getAttribute("data-pattern-path");
+  const patternType = el.getAttribute("data-orb-pattern") ?? el.getAttribute("data-pattern");
+  const trait = el.getAttribute("data-orb-trait") ?? el.getAttribute("data-source-trait");
+  const focus = {
+    level: "node",
+    orbital: orbitalName,
+    label: patternType ?? trait ?? "element"
+  };
+  if (path !== null) focus.path = path;
+  if (trait !== null) focus.trait = trait;
+  if (patternType !== null) focus.patternType = patternType;
+  const transition = el.getAttribute("data-orb-transition");
+  if (transition !== null) focus.transition = transition;
+  const state = el.getAttribute("data-orb-state");
+  if (state !== null) focus.state = state;
+  const slot = el.getAttribute("data-orb-slot");
+  if (slot !== null) focus.slot = slot;
+  const entity = el.getAttribute("data-orb-entity");
+  if (entity !== null) focus.entity = entity;
+  return focus;
+}
 var OrbPreviewNodeInner = (props) => {
   const data = props.data;
   const screenSize = useContext(ScreenSizeContext);
   const preset = SCREEN_SIZE_PRESETS[screenSize];
   const { select } = useContext(PatternSelectionContext);
+  const eventBus = useEventBus();
+  const reactFlow = useReactFlow();
   const contentRef = useRef(null);
   const [hovered, setHovered] = useState(false);
   const handleMouseEnter = useCallback(() => setHovered(true), []);
   const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const [selectedRect, setSelectedRect] = useState(null);
+  const [hoverRect, setHoverRect] = useState(null);
+  const lastHoverElRef = useRef(null);
   const role = data.stateRole ?? "default";
   const colors = ROLE_COLORS[role] ?? ROLE_COLORS.default;
   const eventSources = data.eventSources ?? [];
@@ -62670,13 +62746,15 @@ var OrbPreviewNodeInner = (props) => {
     e.stopPropagation();
     const target = e.target;
     const patternEl = target.closest("[data-pattern]");
-    contentRef.current?.querySelectorAll(".pattern-selected").forEach((el) => {
+    const container = contentRef.current;
+    container?.querySelectorAll(".pattern-selected").forEach((el) => {
       el.classList.remove("pattern-selected");
     });
-    if (patternEl) {
+    const zoom = reactFlow.getViewport().zoom;
+    if (patternEl && container) {
       patternEl.classList.add("pattern-selected");
-      const nodeRect = contentRef.current?.getBoundingClientRect();
-      const elRect = patternEl.getBoundingClientRect();
+      const rect = rectRelativeTo(patternEl, container, zoom);
+      setSelectedRect(rect);
       select({
         patternType: patternEl.getAttribute("data-pattern") ?? "unknown",
         // `data-pattern-path` is the SExpr tree path (`children.0.…`) emitted by
@@ -62687,18 +62765,33 @@ var OrbPreviewNodeInner = (props) => {
         patternId: patternEl.getAttribute("data-pattern-path") ?? void 0,
         sourceTrait: patternEl.getAttribute("data-source-trait") ?? void 0,
         nodeData: data,
-        rect: nodeRect ? {
-          top: elRect.top - nodeRect.top,
-          left: elRect.left - nodeRect.left,
-          width: elRect.width,
-          height: elRect.height
-        } : void 0
+        rect: rect ?? void 0
       });
+      const focus = buildFocus(patternEl, data.orbitalName);
+      if (focus) eventBus.emit("UI:ELEMENT_SELECTED", { focus: { ...focus } });
     } else {
+      setSelectedRect(null);
       select(null);
-    }
-  }, [data, select]);
-  const eventBus = useEventBus();
+      eventBus.emit("UI:ELEMENT_SELECTED", { focus: null });
+    }
+  }, [data, select, eventBus, reactFlow]);
+  const handleContentMouseMove = useCallback((e) => {
+    const container = contentRef.current;
+    if (!container) return;
+    const el = e.target.closest("[data-pattern]");
+    if (el === lastHoverElRef.current) return;
+    lastHoverElRef.current = el;
+    setHoverRect(el ? rectRelativeTo(el, container, reactFlow.getViewport().zoom) : null);
+  }, [reactFlow]);
+  const handleContentMouseLeave = useCallback(() => {
+    lastHoverElRef.current = null;
+    setHoverRect(null);
+  }, []);
+  useEffect(() => {
+    setSelectedRect(null);
+    setHoverRect(null);
+    lastHoverElRef.current = null;
+  }, [orbitalSchema]);
   const [dragActive, setDragActive] = useState(false);
   useEffect(() => {
     const unsub1 = eventBus.on("UI:DRAG_START", (e) => {
@@ -62917,26 +63010,66 @@ var OrbPreviewNodeInner = (props) => {
             src.event
           )) })
         ] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           Box,
           {
             ref: setContentRef,
-            className: `orb-preview-live nodrag${dragActive || l2IsOver ? " drag-active" : ""}`,
+            className: `orb-preview-live nodrag relative${dragActive || l2IsOver ? " drag-active" : ""}`,
             onClick: handleContentClick,
-            children: orbitalSchema ? (
-              // L1 and L2 both auto-grow with content. L2's `buildTransitionSchema`
-              // rewrites portal slots (modal/drawer/overlay/center) to `main`, so
-              // the rendered pattern lands inline in the main slot and contributes
-              // to the card's height — same height model as L1 orbital cards.
-              /* @__PURE__ */ jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(
-                BrowserPlayground,
+            onMouseMove: handleContentMouseMove,
+            onMouseLeave: handleContentMouseLeave,
+            children: [
+              hoverRect && /* @__PURE__ */ jsx(
+                "div",
                 {
-                  schema: orbitalSchema,
-                  mode: "mock",
-                  height: "auto"
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    pointerEvents: "none",
+                    top: hoverRect.top,
+                    left: hoverRect.left,
+                    width: hoverRect.width,
+                    height: hoverRect.height,
+                    outline: "2px dashed var(--color-primary)",
+                    outlineOffset: "1px",
+                    borderRadius: "2px",
+                    zIndex: 20
+                  }
                 }
-              ) })
-            ) : /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center", style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: "No preview available" }) })
+              ),
+              selectedRect && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    pointerEvents: "none",
+                    top: selectedRect.top,
+                    left: selectedRect.left,
+                    width: selectedRect.width,
+                    height: selectedRect.height,
+                    outline: "2px solid var(--color-primary)",
+                    outlineOffset: "1px",
+                    borderRadius: "2px",
+                    zIndex: 21
+                  }
+                }
+              ),
+              orbitalSchema ? (
+                // L1 and L2 both auto-grow with content. L2's `buildTransitionSchema`
+                // rewrites portal slots (modal/drawer/overlay/center) to `main`, so
+                // the rendered pattern lands inline in the main slot and contributes
+                // to the card's height — same height model as L1 orbital cards.
+                /* @__PURE__ */ jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(
+                  BrowserPlayground,
+                  {
+                    schema: orbitalSchema,
+                    mode: "mock",
+                    height: "auto"
+                  }
+                ) })
+              ) : /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center", style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: "No preview available" }) })
+            ]
           }
         ),
         /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, style: TARGET_HANDLE_STYLE }),

package/dist/components/index.cjs

@@ -8679,13 +8679,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect73, useRef: useRef67, useCallback: useCallback129, useState: useState112 } = React80__namespace.default;
+      const { useEffect: useEffect74, useRef: useRef68, useCallback: useCallback129, useState: useState112 } = React80__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef67({ centerLat, centerLng, zoom });
-        useEffect73(() => {
+        const prevRef = useRef68({ centerLat, centerLng, zoom });
+        useEffect74(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -8696,7 +8696,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect73(() => {
+        useEffect74(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -21317,6 +21317,21 @@ var init_DashboardLayout = __esm({
       };
       const [sidebarOpen, setSidebarOpen] = React80.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React80.useState(false);
+      const layoutRef = React80.useRef(null);
+      const [isMobile, setIsMobile] = React80.useState(false);
+      React80.useEffect(() => {
+        const el = layoutRef.current;
+        if (!el || typeof ResizeObserver === "undefined") return;
+        const ro = new ResizeObserver((entries) => {
+          const w = entries[0]?.contentRect.width ?? el.clientWidth;
+          setIsMobile(w < 1024);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+      }, []);
+      React80.useEffect(() => {
+        if (!isMobile && sidebarOpen) setSidebarOpen(false);
+      }, [isMobile, sidebarOpen]);
       const location = reactRouterDom.useLocation();
       const ctxPagePath = useCurrentPagePath();
       const activePath = currentPath ?? ctxPagePath ?? location.pathname;
@@ -21333,15 +21348,15 @@ var init_DashboardLayout = __esm({
       const showBottomNav = layoutMode === "bottomnav";
       const isTopNav = layoutMode === "topnav";
       return /* @__PURE__ */ jsxRuntime.jsxs(
-        exports.HStack,
+        exports.Box,
         {
-          gap: "none",
-          className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
+          ref: layoutRef,
+          className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background flex flex-row items-stretch",
           children: [
-            showSidebar && sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
+            showSidebar && isMobile && sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
               exports.Box,
               {
-                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
+                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20",
                 onClick: () => setSidebarOpen(false)
               }
             ),
@@ -21351,11 +21366,16 @@ var init_DashboardLayout = __esm({
                 as: "aside",
                 className: cn(
                   "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
-                  "fixed inset-y-0 left-0 @lg/dashboard:static @lg/dashboard:translate-x-0 @lg/dashboard:h-auto",
-                  "transform transition-transform duration-200 ease-in-out",
-                  "flex flex-col",
-                  sidebarOpen ? "translate-x-0" : "-translate-x-full"
+                  "flex flex-col"
                 ),
+                style: isMobile ? {
+                  position: "fixed",
+                  top: 0,
+                  bottom: 0,
+                  left: 0,
+                  transform: sidebarOpen ? "translateX(0)" : "translateX(-100%)",
+                  transition: "transform 200ms ease-in-out"
+                } : { position: "static", transform: "none" },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     exports.HStack,
@@ -21384,11 +21404,11 @@ var init_DashboardLayout = __esm({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
+                        isMobile && /* @__PURE__ */ jsxRuntime.jsx(
                           exports.Button,
                           {
                             variant: "ghost",
-                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
+                            className: "p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
                             onClick: () => setSidebarOpen(false),
                             children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "x", className: "h-5 w-5" })
                           }
@@ -21429,11 +21449,11 @@ var init_DashboardLayout = __esm({
                       justify: "between",
                       className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
                       children: [
-                        showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+                        showSidebar && isMobile && /* @__PURE__ */ jsxRuntime.jsx(
                           exports.Button,
                           {
                             variant: "ghost",
-                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
+                            className: "p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
                             onClick: () => setSidebarOpen(true),
                             "aria-label": "Open sidebar",
                             children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "menu", className: "h-5 w-5" })

package/dist/components/index.js

@@ -8630,13 +8630,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect73, useRef: useRef67, useCallback: useCallback129, useState: useState112 } = React80__default;
+      const { useEffect: useEffect74, useRef: useRef68, useCallback: useCallback129, useState: useState112 } = React80__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef67({ centerLat, centerLng, zoom });
-        useEffect73(() => {
+        const prevRef = useRef68({ centerLat, centerLng, zoom });
+        useEffect74(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -8647,7 +8647,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect73(() => {
+        useEffect74(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -21268,6 +21268,21 @@ var init_DashboardLayout = __esm({
       };
       const [sidebarOpen, setSidebarOpen] = useState(false);
       const [userMenuOpen, setUserMenuOpen] = useState(false);
+      const layoutRef = useRef(null);
+      const [isMobile, setIsMobile] = useState(false);
+      useEffect(() => {
+        const el = layoutRef.current;
+        if (!el || typeof ResizeObserver === "undefined") return;
+        const ro = new ResizeObserver((entries) => {
+          const w = entries[0]?.contentRect.width ?? el.clientWidth;
+          setIsMobile(w < 1024);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+      }, []);
+      useEffect(() => {
+        if (!isMobile && sidebarOpen) setSidebarOpen(false);
+      }, [isMobile, sidebarOpen]);
       const location = useLocation();
       const ctxPagePath = useCurrentPagePath();
       const activePath = currentPath ?? ctxPagePath ?? location.pathname;
@@ -21284,15 +21299,15 @@ var init_DashboardLayout = __esm({
       const showBottomNav = layoutMode === "bottomnav";
       const isTopNav = layoutMode === "topnav";
       return /* @__PURE__ */ jsxs(
-        HStack,
+        Box,
         {
-          gap: "none",
-          className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background items-stretch",
+          ref: layoutRef,
+          className: "@container/dashboard min-h-screen w-full bg-background dark:bg-background flex flex-row items-stretch",
           children: [
-            showSidebar && sidebarOpen && /* @__PURE__ */ jsx(
+            showSidebar && isMobile && sidebarOpen && /* @__PURE__ */ jsx(
               Box,
               {
-                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20 @lg/dashboard:hidden",
+                className: "fixed inset-0 bg-foreground/50 dark:bg-foreground/70 z-20",
                 onClick: () => setSidebarOpen(false)
               }
             ),
@@ -21302,11 +21317,16 @@ var init_DashboardLayout = __esm({
                 as: "aside",
                 className: cn(
                   "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
-                  "fixed inset-y-0 left-0 @lg/dashboard:static @lg/dashboard:translate-x-0 @lg/dashboard:h-auto",
-                  "transform transition-transform duration-200 ease-in-out",
-                  "flex flex-col",
-                  sidebarOpen ? "translate-x-0" : "-translate-x-full"
+                  "flex flex-col"
                 ),
+                style: isMobile ? {
+                  position: "fixed",
+                  top: 0,
+                  bottom: 0,
+                  left: 0,
+                  transform: sidebarOpen ? "translateX(0)" : "translateX(-100%)",
+                  transition: "transform 200ms ease-in-out"
+                } : { position: "static", transform: "none" },
                 children: [
                   /* @__PURE__ */ jsxs(
                     HStack,
@@ -21335,11 +21355,11 @@ var init_DashboardLayout = __esm({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsx(
+                        isMobile && /* @__PURE__ */ jsx(
                           Button,
                           {
                             variant: "ghost",
-                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
+                            className: "p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground",
                             onClick: () => setSidebarOpen(false),
                             children: /* @__PURE__ */ jsx(Icon, { name: "x", className: "h-5 w-5" })
                           }
@@ -21380,11 +21400,11 @@ var init_DashboardLayout = __esm({
                       justify: "between",
                       className: "h-full px-3 @sm/dashboard:px-4 gap-2 @sm/dashboard:gap-4",
                       children: [
-                        showSidebar && /* @__PURE__ */ jsx(
+                        showSidebar && isMobile && /* @__PURE__ */ jsx(
                           Button,
                           {
                             variant: "ghost",
-                            className: "@lg/dashboard:hidden p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
+                            className: "p-2 rounded-md hover:bg-muted dark:hover:bg-muted text-muted-foreground dark:text-muted-foreground touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center",
                             onClick: () => setSidebarOpen(true),
                             "aria-label": "Open sidebar",
                             children: /* @__PURE__ */ jsx(Icon, { name: "menu", className: "h-5 w-5" })