@almadar/ui 5.14.1 → 5.16.1

package/dist/avl/index.js

@@ -5436,7 +5436,11 @@ function useUISlotManager() {
         priority: config.priority ?? 0,
         animation: config.animation ?? "fade",
         onDismiss: config.onDismiss,
-        sourceTrait: config.sourceTrait
+        sourceTrait: config.sourceTrait,
+        slot: config.target,
+        transitionEvent: config.transitionEvent,
+        fromState: config.fromState,
+        entity: config.entity
       };
       if (config.autoDismissMs && config.autoDismissMs > 0) {
         content.autoDismissAt = Date.now() + config.autoDismissMs;
@@ -14573,13 +14577,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);
@@ -14590,7 +14594,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);
@@ -26105,6 +26109,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;
@@ -26117,15 +26136,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)
               }
             ),
@@ -26135,11 +26154,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,
@@ -26168,11 +26192,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" })
                           }
@@ -26213,11 +26237,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" })
@@ -56310,7 +56334,7 @@ function getToastPosition(position) {
       return "top-4 right-4";
   }
 }
-function renderPatternChildren(children, onDismiss, parentId = "root", parentPath = "root", sourceTrait) {
+function renderPatternChildren(children, onDismiss, parentId = "root", parentPath = "root", sourceTrait, orbCtx) {
   if (children === void 0 || children === null) return null;
   const childrenArray = Array.isArray(children) ? children : typeof children === "string" || typeof children === "object" && "type" in children ? [children] : [];
   if (childrenArray.length === 0) return null;
@@ -56341,8 +56365,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
       nodeId: child._id,
       // Inherit sourceTrait from the parent slot so nested patterns
       // (e.g. form-section inside a stack) can resolve entityDef via
-      // the trait's linkedEntity for form-field enrichment.
-      ...sourceTrait !== void 0 && { sourceTrait }
+      // the trait's linkedEntity for form-field enrichment. The orbCtx
+      // (slot/transition/state/entity) propagates the same way so every
+      // nested node carries a complete contextual-edit address.
+      ...sourceTrait !== void 0 && { sourceTrait },
+      ...orbCtx ?? {}
     };
     return /* @__PURE__ */ jsx(
       SlotContentRenderer,
@@ -56458,7 +56485,12 @@ function SlotContentRenderer({
     const isSingleChild = typeof childrenConfig === "string" || typeof childrenConfig === "object" && childrenConfig !== null && !Array.isArray(childrenConfig) && "type" in childrenConfig;
     const hasChildren = PATTERNS_WITH_CHILDREN.has(content.pattern) || Array.isArray(childrenConfig) && childrenConfig.length > 0 || isSingleChild;
     const myPath = patternPath ?? "root";
-    const renderedChildren = hasChildren ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath, content.sourceTrait) : void 0;
+    const renderedChildren = hasChildren ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath, content.sourceTrait, {
+      slot: content.slot,
+      transitionEvent: content.transitionEvent,
+      fromState: content.fromState,
+      entity: content.entity
+    }) : void 0;
     const incomingChildren = content.props.children;
     const childrenIsRenderFn = typeof incomingChildren === "function";
     const { children: _childrenConfig, ...restPropsNoChildren } = content.props;
@@ -56505,6 +56537,13 @@ function SlotContentRenderer({
         "data-pattern-path": myPath,
         "data-pattern-type": content.pattern,
         "data-accepts-children": acceptsChildren ? "true" : void 0,
+        "data-orb-trait": content.sourceTrait,
+        "data-orb-slot": content.slot,
+        "data-orb-transition": content.transitionEvent,
+        "data-orb-state": content.fromState,
+        "data-orb-entity": content.entity,
+        "data-orb-path": myPath,
+        "data-orb-pattern": content.pattern,
         children: renderedChildren !== void 0 ? /* @__PURE__ */ jsx(PatternComponent, { ...finalProps, children: renderedChildren }) : /* @__PURE__ */ jsx(PatternComponent, { ...finalProps })
       }
     );
@@ -56517,6 +56556,13 @@ function SlotContentRenderer({
       "data-id": content.id,
       "data-node-id": content.nodeId,
       "data-source-trait": content.sourceTrait,
+      "data-orb-trait": content.sourceTrait,
+      "data-orb-slot": content.slot,
+      "data-orb-transition": content.transitionEvent,
+      "data-orb-state": content.fromState,
+      "data-orb-entity": content.entity,
+      "data-orb-path": patternPath ?? "root",
+      "data-orb-pattern": content.pattern,
       children: content.props.children ?? /* @__PURE__ */ jsxs(Box, { className: "p-4 text-sm text-muted-foreground border border-dashed border-border rounded", children: [
         "Unknown pattern: ",
         content.pattern,
@@ -60368,7 +60414,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     embeddedTraitsRef.current = options?.embeddedTraits;
   }, [options?.embeddedTraits]);
   const flushSlot = useCallback(
-    (traitName, slot, patterns) => {
+    (traitName, slot, patterns, source) => {
       const slots = uiSlotsRef.current;
       const embedded = embeddedTraitsRef.current;
       if (patterns.length === 0) {
@@ -60397,7 +60443,10 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           pattern: patternType,
           props,
           priority: 0,
-          animation: "fade"
+          animation: "fade",
+          transitionEvent: source?.event,
+          fromState: source?.state,
+          entity: source?.entity
         });
         return;
       }
@@ -60411,7 +60460,10 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         target: slot,
         pattern: patternType,
         props,
-        sourceTrait: traitName
+        sourceTrait: traitName,
+        transitionEvent: source?.event,
+        fromState: source?.state,
+        entity: source?.entity
       });
     },
     []
@@ -60544,7 +60596,11 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       }
     }
     for (const [slot, patterns] of pendingSlots) {
-      flushSlot(binding.trait.name, slot, patterns);
+      flushSlot(binding.trait.name, slot, patterns, {
+        event: `tick:${tick.name}`,
+        state: currentState,
+        entity: binding.linkedEntity
+      });
     }
   }, [flushSlot]);
   useEffect(() => {
@@ -60796,7 +60852,11 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
               transition: `${result.previousState}->${result.newState}`,
               cleared: patterns.length === 0
             });
-            flushSlot(traitName, slot, patterns);
+            flushSlot(traitName, slot, patterns, {
+              event: eventKey,
+              state: result.previousState,
+              entity: binding.linkedEntity
+            });
           }
         } catch (error) {
           stateLog.error("transition:effect-error", {
@@ -62564,15 +62624,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;
@@ -62589,15 +62643,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 = useContext(ScreenSizeContext);
   const preset = SCREEN_SIZE_PRESETS[screenSize];
   const { select } = useContext(PatternSelectionContext);
+  const eventBus = useEventBus();
   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 ?? [];
@@ -62630,13 +62735,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
@@ -62647,18 +62753,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 = 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 = 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) => {
@@ -62877,26 +62998,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 }),