@almadar/ui 5.15.0 → 5.16.1

package/dist/avl/index.cjs

@@ -14626,13 +14626,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect89, useRef: useRef88, useCallback: useCallback130, useState: useState125 } = React98__namespace.default;
+      const { useEffect: useEffect90, useRef: useRef89, useCallback: useCallback130, useState: useState125 } = React98__namespace.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);
@@ -14643,7 +14643,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);
@@ -26158,6 +26158,21 @@ var init_DashboardLayout = __esm({
       };
       const [sidebarOpen, setSidebarOpen] = React98.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React98.useState(false);
+      const layoutRef = React98.useRef(null);
+      const [isMobile, setIsMobile] = React98.useState(false);
+      React98.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();
+      }, []);
+      React98.useEffect(() => {
+        if (!isMobile && sidebarOpen) setSidebarOpen(false);
+      }, [isMobile, sidebarOpen]);
       const location = reactRouterDom.useLocation();
       const ctxPagePath = useCurrentPagePath();
       const activePath = currentPath ?? ctxPagePath ?? location.pathname;
@@ -26170,15 +26185,15 @@ var init_DashboardLayout = __esm({
       const showBottomNav = layoutMode === "bottomnav";
       const isTopNav = layoutMode === "topnav";
       return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            showSidebar && isMobile && sidebarOpen && /* @__PURE__ */ jsxRuntime.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)
               }
             ),
@@ -26188,11 +26203,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(
                     HStack,
@@ -26221,11 +26241,11 @@ var init_DashboardLayout = __esm({
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
+                        isMobile && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: "x", className: "h-5 w-5" })
                           }
@@ -26266,11 +26286,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(
                           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(Icon, { name: "menu", className: "h-5 w-5" })
@@ -62653,15 +62673,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;
@@ -62678,15 +62692,66 @@ 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) {
+  const u = absUnion(el);
+  if (!u) return null;
+  const base = container.getBoundingClientRect();
+  return { top: u.top - base.top, left: u.left - base.left, width: u.right - u.left, height: u.bottom - u.top };
+}
+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 = React98.useContext(ScreenSizeContext);
   const preset = SCREEN_SIZE_PRESETS[screenSize];
   const { select } = React98.useContext(PatternSelectionContext);
+  const eventBus = useEventBus();
   const contentRef = React98.useRef(null);
   const [hovered, setHovered] = React98.useState(false);
   const handleMouseEnter = React98.useCallback(() => setHovered(true), []);
   const handleMouseLeave = React98.useCallback(() => setHovered(false), []);
+  const [selectedRect, setSelectedRect] = React98.useState(null);
+  const [hoverRect, setHoverRect] = React98.useState(null);
+  const lastHoverElRef = React98.useRef(null);
   const role = data.stateRole ?? "default";
   const colors = ROLE_COLORS[role] ?? ROLE_COLORS.default;
   const eventSources = data.eventSources ?? [];
@@ -62719,13 +62784,14 @@ 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) {
+    if (patternEl && container) {
       patternEl.classList.add("pattern-selected");
-      const nodeRect = contentRef.current?.getBoundingClientRect();
-      const elRect = patternEl.getBoundingClientRect();
+      const rect = rectRelativeTo(patternEl, container);
+      setSelectedRect(rect);
       select({
         patternType: patternEl.getAttribute("data-pattern") ?? "unknown",
         // `data-pattern-path` is the SExpr tree path (`children.0.…`) emitted by
@@ -62736,18 +62802,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]);
+  const handleContentMouseMove = React98.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) : null);
+  }, []);
+  const handleContentMouseLeave = React98.useCallback(() => {
+    lastHoverElRef.current = null;
+    setHoverRect(null);
+  }, []);
+  React98.useEffect(() => {
+    setSelectedRect(null);
+    setHoverRect(null);
+    lastHoverElRef.current = null;
+  }, [orbitalSchema]);
   const [dragActive, setDragActive] = React98.useState(false);
   React98.useEffect(() => {
     const unsub1 = eventBus.on("UI:DRAG_START", (e) => {
@@ -62966,26 +63047,66 @@ var OrbPreviewNodeInner = (props) => {
             src.event
           )) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                BrowserPlayground,
+            onMouseMove: handleContentMouseMove,
+            onMouseLeave: handleContentMouseLeave,
+            children: [
+              hoverRect && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { className: "flex items-center justify-center", style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: "No preview available" }) })
+              ),
+              selectedRect && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  BrowserPlayground,
+                  {
+                    schema: orbitalSchema,
+                    mode: "mock",
+                    height: "auto"
+                  }
+                ) })
+              ) : /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center justify-center", style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: "No preview available" }) })
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Left, style: TARGET_HANDLE_STYLE }),