@almadar/ui 4.50.12 → 4.50.14

package/dist/avl/index.cjs

@@ -13697,7 +13697,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback127, useState: useState121 } = React93__namespace.default;
+      const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback128, useState: useState122 } = React93__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 }) {
@@ -13742,8 +13742,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState121(null);
-        const handleMapClick = useCallback127((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState122(null);
+        const handleMapClick = useCallback128((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -13752,7 +13752,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback127((marker) => {
+        const handleMarkerClick = useCallback128((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -24948,6 +24948,7 @@ function useDataDnd(args) {
     zonesRef.current.delete(zoneId2);
   }, []);
   const [activeDrag, setActiveDrag] = React93__namespace.default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React93__namespace.default.useState(null);
   const zoneId = React93__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React93__namespace.default.useMemo(
@@ -25130,25 +25131,29 @@ function useDataDnd(args) {
     });
     const ctx = React93__namespace.default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
-    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    const overZoneGroup2 = ctx?.overZoneGroup ?? null;
+    const isThisZoneOver = overZoneGroup2 === ownGroup;
+    const showForeignPlaceholder = isThisZoneOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     dndLog.debug("dropzone:render", {
       group: ownGroup,
       isOver,
+      isThisZoneOver,
+      overZoneGroup: overZoneGroup2,
       activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
       activeDragHeight: activeDrag2?.height ?? null,
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
     React93__namespace.default.useEffect(() => {
-      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
-    }, [droppableId, isOver, showForeignPlaceholder]);
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
-        "data-dnd-is-over": isOver ? "true" : "false",
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        "data-dnd-is-over": isThisZoneOver ? "true" : "false",
+        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children: [
           children,
           showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -25164,8 +25169,8 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React93__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag }),
-    [registerZone, unregisterZone, activeDrag]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup]
   );
   const handleDragStart = React93__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -25187,14 +25192,18 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React93__namespace.default.useCallback((event) => {
+    const overData = event.over?.data?.current;
+    const group = overData?.dndGroup ?? null;
+    setOverZoneGroup(group);
     dndLog.debug("dragOver", {
       activeId: event.active.id,
       overId: event.over?.id,
-      overData: event.over?.data?.current
+      overGroup: group
     });
   }, []);
   const handleDragCancel = React93__namespace.default.useCallback((event) => {
     setActiveDrag(null);
+    setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
@@ -25203,6 +25212,7 @@ function useDataDnd(args) {
   const handleDragEndWithCleanup = React93__namespace.default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
+    setOverZoneGroup(null);
   }, [handleDragEnd]);
   const wrapContainer = React93__namespace.default.useCallback(
     (children) => {
@@ -57363,6 +57373,66 @@ function convertFnFormLambdasInProps(props) {
 // hooks/index.ts
 init_useEventBus();
 var ALMADAR_DND_MIME = "application/x-almadar-dnd";
+
+// hooks/useDropZone.ts
+init_useEventBus();
+function parsePayload(e) {
+  try {
+    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.kind !== "string" || !parsed.data) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function hasAlmadarPayload(e) {
+  return e.dataTransfer.types.includes(ALMADAR_DND_MIME);
+}
+function useDropZone({ accepts, onDrop, disabled = false }) {
+  const [isOver, setIsOver] = React93.useState(false);
+  const eventBus = useEventBus();
+  const handleDragOver = React93.useCallback(
+    (e) => {
+      if (disabled) return;
+      if (!hasAlmadarPayload(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = React93.useCallback(
+    (e) => {
+      setIsOver(false);
+    },
+    []
+  );
+  const handleDrop = React93.useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsOver(false);
+      if (disabled) return;
+      const payload = parsePayload(e);
+      if (!payload) return;
+      if (!accepts.includes(payload.kind)) return;
+      const position = { x: e.clientX, y: e.clientY };
+      onDrop(payload, position);
+      eventBus.emit("UI:DROP", { kind: payload.kind, data: payload.data, ...position });
+    },
+    [disabled, accepts, onDrop, eventBus]
+  );
+  const dropProps = React93.useMemo(
+    () => ({
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    }),
+    [handleDragOver, handleDragLeave, handleDrop]
+  );
+  return { dropProps, isOver };
+}
 var log16 = logger.createLogger("almadar:ui:effects:client-handlers");
 function createClientEffectHandlers(options) {
   const { eventBus, slotSetter, navigate, notify, callService } = options;
@@ -59321,19 +59391,98 @@ var OrbPreviewNodeInner = (props) => {
   const statusBorder = isRunning ? "var(--color-primary)" : isError ? "var(--color-danger)" : isSuccess ? "var(--color-success)" : null;
   const borderWidth = isRunning || isError || isSuccess ? "2px" : "1.5px";
   const borderColor = statusBorder ?? (hovered ? "var(--color-primary)" : colors.border);
+  const handleL1Drop = React93.useCallback(
+    (payload) => {
+      if (payload.kind !== "pattern") return;
+      if (typeof payload.data.type !== "string") return;
+      eventBus.emit("UI:PATTERN_DROP", {
+        patternType: payload.data.type,
+        containerNode: { orbitalName: data.orbitalName }
+      });
+    },
+    [eventBus, data.orbitalName]
+  );
+  const { dropProps: l1DropProps, isOver: l1IsOver } = useDropZone({
+    accepts: ["pattern"],
+    onDrop: handleL1Drop,
+    disabled: isExpanded
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
+      ...isExpanded ? {} : l1DropProps,
       className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
-        borderColor,
-        borderWidth,
-        width: preset.width
+        borderColor: l1IsOver ? "var(--color-primary)" : borderColor,
+        borderWidth: l1IsOver ? "2px" : borderWidth,
+        width: preset.width,
+        boxShadow: l1IsOver ? "0 0 0 3px var(--color-primary), 0 0 12px var(--color-primary)" : void 0
       },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: SELECTION_STYLES }),
+        !isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: "absolute top-1.5 left-1.5 rounded px-1 py-[1px] text-[8px] font-mono uppercase tracking-wider pointer-events-none",
+              style: {
+                backgroundColor: "var(--color-muted)",
+                color: "var(--color-muted-foreground)",
+                zIndex: 3
+              },
+              children: "Preview"
+            }
+          ),
+          hovered && !dragActive && !l1IsOver && /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+              style: {
+                backgroundColor: "rgba(0,0,0,0.04)",
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Box,
+                {
+                  className: "rounded-md px-2 py-1 text-[11px] font-medium flex items-center gap-1",
+                  style: {
+                    backgroundColor: "var(--color-card)",
+                    color: "var(--color-foreground)",
+                    boxShadow: "var(--shadow-main)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "\u279E" }),
+                    "Click to open"
+                  ]
+                }
+              )
+            }
+          ),
+          (dragActive || l1IsOver) && /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+              style: {
+                backgroundColor: l1IsOver ? "rgba(20,184,166,0.15)" : "rgba(20,184,166,0.06)",
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Box,
+                {
+                  className: "rounded-md px-2 py-1 text-[11px] font-semibold",
+                  style: {
+                    backgroundColor: "var(--color-primary)",
+                    color: "var(--color-primary-foreground)",
+                    boxShadow: "var(--shadow-lg)"
+                  },
+                  children: "Drop to add and open"
+                }
+              )
+            }
+          )
+        ] }),
         isRunning && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
             @keyframes orb-preview-running-pulse {
@@ -60515,13 +60664,14 @@ function FlowCanvasInner({
         transition: nodeData.transitionEvent
       });
     } else {
-      onNodeClick?.({
-        level: "overview",
-        orbital: nodeData.orbitalName ?? node.id
-      });
-      onNodeSelect?.(nodeData.orbitalName ?? node.id);
+      const orbitalName = nodeData.orbitalName ?? node.id;
+      onNodeClick?.({ level: "overview", orbital: orbitalName });
+      onNodeSelect?.(orbitalName);
+      setExpandedOrbital(orbitalName);
+      setLevel("expanded");
+      onLevelChange?.("expanded", orbitalName);
     }
-  }, [level, expandedOrbital, onNodeClick]);
+  }, [level, expandedOrbital, onNodeClick, onNodeSelect, onLevelChange]);
   const handleClosePanel = React93.useCallback(() => {
     setSelectedNode(null);
   }, []);

package/dist/avl/index.js

@@ -13651,7 +13651,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback127, useState: useState121 } = React93__default;
+      const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback128, useState: useState122 } = React93__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 }) {
@@ -13696,8 +13696,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState121(null);
-        const handleMapClick = useCallback127((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState122(null);
+        const handleMapClick = useCallback128((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -13706,7 +13706,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback127((marker) => {
+        const handleMarkerClick = useCallback128((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -24902,6 +24902,7 @@ function useDataDnd(args) {
     zonesRef.current.delete(zoneId2);
   }, []);
   const [activeDrag, setActiveDrag] = React93__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React93__default.useState(null);
   const zoneId = React93__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React93__default.useMemo(
@@ -25084,25 +25085,29 @@ function useDataDnd(args) {
     });
     const ctx = React93__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
-    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    const overZoneGroup2 = ctx?.overZoneGroup ?? null;
+    const isThisZoneOver = overZoneGroup2 === ownGroup;
+    const showForeignPlaceholder = isThisZoneOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     dndLog.debug("dropzone:render", {
       group: ownGroup,
       isOver,
+      isThisZoneOver,
+      overZoneGroup: overZoneGroup2,
       activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
       activeDragHeight: activeDrag2?.height ?? null,
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
     React93__default.useEffect(() => {
-      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
-    }, [droppableId, isOver, showForeignPlaceholder]);
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsxs(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
-        "data-dnd-is-over": isOver ? "true" : "false",
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        "data-dnd-is-over": isThisZoneOver ? "true" : "false",
+        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children: [
           children,
           showForeignPlaceholder ? /* @__PURE__ */ jsx(
@@ -25118,8 +25123,8 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React93__default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag }),
-    [registerZone, unregisterZone, activeDrag]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup]
   );
   const handleDragStart = React93__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -25141,14 +25146,18 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React93__default.useCallback((event) => {
+    const overData = event.over?.data?.current;
+    const group = overData?.dndGroup ?? null;
+    setOverZoneGroup(group);
     dndLog.debug("dragOver", {
       activeId: event.active.id,
       overId: event.over?.id,
-      overData: event.over?.data?.current
+      overGroup: group
     });
   }, []);
   const handleDragCancel = React93__default.useCallback((event) => {
     setActiveDrag(null);
+    setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
@@ -25157,6 +25166,7 @@ function useDataDnd(args) {
   const handleDragEndWithCleanup = React93__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
+    setOverZoneGroup(null);
   }, [handleDragEnd]);
   const wrapContainer = React93__default.useCallback(
     (children) => {
@@ -57317,6 +57327,66 @@ function convertFnFormLambdasInProps(props) {
 // hooks/index.ts
 init_useEventBus();
 var ALMADAR_DND_MIME = "application/x-almadar-dnd";
+
+// hooks/useDropZone.ts
+init_useEventBus();
+function parsePayload(e) {
+  try {
+    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.kind !== "string" || !parsed.data) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function hasAlmadarPayload(e) {
+  return e.dataTransfer.types.includes(ALMADAR_DND_MIME);
+}
+function useDropZone({ accepts, onDrop, disabled = false }) {
+  const [isOver, setIsOver] = useState(false);
+  const eventBus = useEventBus();
+  const handleDragOver = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (!hasAlmadarPayload(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      setIsOver(false);
+    },
+    []
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsOver(false);
+      if (disabled) return;
+      const payload = parsePayload(e);
+      if (!payload) return;
+      if (!accepts.includes(payload.kind)) return;
+      const position = { x: e.clientX, y: e.clientY };
+      onDrop(payload, position);
+      eventBus.emit("UI:DROP", { kind: payload.kind, data: payload.data, ...position });
+    },
+    [disabled, accepts, onDrop, eventBus]
+  );
+  const dropProps = useMemo(
+    () => ({
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    }),
+    [handleDragOver, handleDragLeave, handleDrop]
+  );
+  return { dropProps, isOver };
+}
 var log16 = createLogger("almadar:ui:effects:client-handlers");
 function createClientEffectHandlers(options) {
   const { eventBus, slotSetter, navigate, notify, callService } = options;
@@ -59275,19 +59345,98 @@ var OrbPreviewNodeInner = (props) => {
   const statusBorder = isRunning ? "var(--color-primary)" : isError ? "var(--color-danger)" : isSuccess ? "var(--color-success)" : null;
   const borderWidth = isRunning || isError || isSuccess ? "2px" : "1.5px";
   const borderColor = statusBorder ?? (hovered ? "var(--color-primary)" : colors.border);
+  const handleL1Drop = useCallback(
+    (payload) => {
+      if (payload.kind !== "pattern") return;
+      if (typeof payload.data.type !== "string") return;
+      eventBus.emit("UI:PATTERN_DROP", {
+        patternType: payload.data.type,
+        containerNode: { orbitalName: data.orbitalName }
+      });
+    },
+    [eventBus, data.orbitalName]
+  );
+  const { dropProps: l1DropProps, isOver: l1IsOver } = useDropZone({
+    accepts: ["pattern"],
+    onDrop: handleL1Drop,
+    disabled: isExpanded
+  });
   return /* @__PURE__ */ jsxs(
     Box,
     {
+      ...isExpanded ? {} : l1DropProps,
       className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
-        borderColor,
-        borderWidth,
-        width: preset.width
+        borderColor: l1IsOver ? "var(--color-primary)" : borderColor,
+        borderWidth: l1IsOver ? "2px" : borderWidth,
+        width: preset.width,
+        boxShadow: l1IsOver ? "0 0 0 3px var(--color-primary), 0 0 12px var(--color-primary)" : void 0
       },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         /* @__PURE__ */ jsx("style", { children: SELECTION_STYLES }),
+        !isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "absolute top-1.5 left-1.5 rounded px-1 py-[1px] text-[8px] font-mono uppercase tracking-wider pointer-events-none",
+              style: {
+                backgroundColor: "var(--color-muted)",
+                color: "var(--color-muted-foreground)",
+                zIndex: 3
+              },
+              children: "Preview"
+            }
+          ),
+          hovered && !dragActive && !l1IsOver && /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+              style: {
+                backgroundColor: "rgba(0,0,0,0.04)",
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  className: "rounded-md px-2 py-1 text-[11px] font-medium flex items-center gap-1",
+                  style: {
+                    backgroundColor: "var(--color-card)",
+                    color: "var(--color-foreground)",
+                    boxShadow: "var(--shadow-main)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: 12 }, children: "\u279E" }),
+                    "Click to open"
+                  ]
+                }
+              )
+            }
+          ),
+          (dragActive || l1IsOver) && /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "absolute inset-0 flex items-center justify-center pointer-events-none",
+              style: {
+                backgroundColor: l1IsOver ? "rgba(20,184,166,0.15)" : "rgba(20,184,166,0.06)",
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: "rounded-md px-2 py-1 text-[11px] font-semibold",
+                  style: {
+                    backgroundColor: "var(--color-primary)",
+                    color: "var(--color-primary-foreground)",
+                    boxShadow: "var(--shadow-lg)"
+                  },
+                  children: "Drop to add and open"
+                }
+              )
+            }
+          )
+        ] }),
         isRunning && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("style", { children: `
             @keyframes orb-preview-running-pulse {
@@ -60469,13 +60618,14 @@ function FlowCanvasInner({
         transition: nodeData.transitionEvent
       });
     } else {
-      onNodeClick?.({
-        level: "overview",
-        orbital: nodeData.orbitalName ?? node.id
-      });
-      onNodeSelect?.(nodeData.orbitalName ?? node.id);
+      const orbitalName = nodeData.orbitalName ?? node.id;
+      onNodeClick?.({ level: "overview", orbital: orbitalName });
+      onNodeSelect?.(orbitalName);
+      setExpandedOrbital(orbitalName);
+      setLevel("expanded");
+      onLevelChange?.("expanded", orbitalName);
     }
-  }, [level, expandedOrbital, onNodeClick]);
+  }, [level, expandedOrbital, onNodeClick, onNodeSelect, onLevelChange]);
   const handleClosePanel = useCallback(() => {
     setSelectedNode(null);
   }, []);

package/dist/components/index.cjs

@@ -20115,6 +20115,7 @@ function useDataDnd(args) {
     zonesRef.current.delete(zoneId2);
   }, []);
   const [activeDrag, setActiveDrag] = React75__namespace.default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React75__namespace.default.useState(null);
   const zoneId = React75__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React75__namespace.default.useMemo(
@@ -20297,25 +20298,29 @@ function useDataDnd(args) {
     });
     const ctx = React75__namespace.default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
-    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    const overZoneGroup2 = ctx?.overZoneGroup ?? null;
+    const isThisZoneOver = overZoneGroup2 === ownGroup;
+    const showForeignPlaceholder = isThisZoneOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     dndLog.debug("dropzone:render", {
       group: ownGroup,
       isOver,
+      isThisZoneOver,
+      overZoneGroup: overZoneGroup2,
       activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
       activeDragHeight: activeDrag2?.height ?? null,
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
     React75__namespace.default.useEffect(() => {
-      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
-    }, [droppableId, isOver, showForeignPlaceholder]);
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       exports.Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
-        "data-dnd-is-over": isOver ? "true" : "false",
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        "data-dnd-is-over": isThisZoneOver ? "true" : "false",
+        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children: [
           children,
           showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -20331,8 +20336,8 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React75__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag }),
-    [registerZone, unregisterZone, activeDrag]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup]
   );
   const handleDragStart = React75__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -20354,14 +20359,18 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React75__namespace.default.useCallback((event) => {
+    const overData = event.over?.data?.current;
+    const group = overData?.dndGroup ?? null;
+    setOverZoneGroup(group);
     dndLog.debug("dragOver", {
       activeId: event.active.id,
       overId: event.over?.id,
-      overData: event.over?.data?.current
+      overGroup: group
     });
   }, []);
   const handleDragCancel = React75__namespace.default.useCallback((event) => {
     setActiveDrag(null);
+    setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
@@ -20370,6 +20379,7 @@ function useDataDnd(args) {
   const handleDragEndWithCleanup = React75__namespace.default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
+    setOverZoneGroup(null);
   }, [handleDragEnd]);
   const wrapContainer = React75__namespace.default.useCallback(
     (children) => {

package/dist/components/index.js

@@ -20069,6 +20069,7 @@ function useDataDnd(args) {
     zonesRef.current.delete(zoneId2);
   }, []);
   const [activeDrag, setActiveDrag] = React75__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React75__default.useState(null);
   const zoneId = React75__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React75__default.useMemo(
@@ -20251,25 +20252,29 @@ function useDataDnd(args) {
     });
     const ctx = React75__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
-    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    const overZoneGroup2 = ctx?.overZoneGroup ?? null;
+    const isThisZoneOver = overZoneGroup2 === ownGroup;
+    const showForeignPlaceholder = isThisZoneOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     dndLog.debug("dropzone:render", {
       group: ownGroup,
       isOver,
+      isThisZoneOver,
+      overZoneGroup: overZoneGroup2,
       activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
       activeDragHeight: activeDrag2?.height ?? null,
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
     React75__default.useEffect(() => {
-      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
-    }, [droppableId, isOver, showForeignPlaceholder]);
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsxs(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
-        "data-dnd-is-over": isOver ? "true" : "false",
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        "data-dnd-is-over": isThisZoneOver ? "true" : "false",
+        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children: [
           children,
           showForeignPlaceholder ? /* @__PURE__ */ jsx(
@@ -20285,8 +20290,8 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React75__default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag }),
-    [registerZone, unregisterZone, activeDrag]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup]
   );
   const handleDragStart = React75__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -20308,14 +20313,18 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React75__default.useCallback((event) => {
+    const overData = event.over?.data?.current;
+    const group = overData?.dndGroup ?? null;
+    setOverZoneGroup(group);
     dndLog.debug("dragOver", {
       activeId: event.active.id,
       overId: event.over?.id,
-      overData: event.over?.data?.current
+      overGroup: group
     });
   }, []);
   const handleDragCancel = React75__default.useCallback((event) => {
     setActiveDrag(null);
+    setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
@@ -20324,6 +20333,7 @@ function useDataDnd(args) {
   const handleDragEndWithCleanup = React75__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
+    setOverZoneGroup(null);
   }, [handleDragEnd]);
   const wrapContainer = React75__default.useCallback(
     (children) => {

package/dist/providers/index.cjs

@@ -21360,6 +21360,7 @@ function useDataDnd(args) {
     zonesRef.current.delete(zoneId2);
   }, []);
   const [activeDrag, setActiveDrag] = React81__namespace.default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React81__namespace.default.useState(null);
   const zoneId = React81__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React81__namespace.default.useMemo(
@@ -21542,25 +21543,29 @@ function useDataDnd(args) {
     });
     const ctx = React81__namespace.default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
-    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    const overZoneGroup2 = ctx?.overZoneGroup ?? null;
+    const isThisZoneOver = overZoneGroup2 === ownGroup;
+    const showForeignPlaceholder = isThisZoneOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     dndLog.debug("dropzone:render", {
       group: ownGroup,
       isOver,
+      isThisZoneOver,
+      overZoneGroup: overZoneGroup2,
       activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
       activeDragHeight: activeDrag2?.height ?? null,
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
     React81__namespace.default.useEffect(() => {
-      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
-    }, [droppableId, isOver, showForeignPlaceholder]);
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
-        "data-dnd-is-over": isOver ? "true" : "false",
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        "data-dnd-is-over": isThisZoneOver ? "true" : "false",
+        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children: [
           children,
           showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -21576,8 +21581,8 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React81__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag }),
-    [registerZone, unregisterZone, activeDrag]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup]
   );
   const handleDragStart = React81__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -21599,14 +21604,18 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React81__namespace.default.useCallback((event) => {
+    const overData = event.over?.data?.current;
+    const group = overData?.dndGroup ?? null;
+    setOverZoneGroup(group);
     dndLog.debug("dragOver", {
       activeId: event.active.id,
       overId: event.over?.id,
-      overData: event.over?.data?.current
+      overGroup: group
     });
   }, []);
   const handleDragCancel = React81__namespace.default.useCallback((event) => {
     setActiveDrag(null);
+    setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
@@ -21615,6 +21624,7 @@ function useDataDnd(args) {
   const handleDragEndWithCleanup = React81__namespace.default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
+    setOverZoneGroup(null);
   }, [handleDragEnd]);
   const wrapContainer = React81__namespace.default.useCallback(
     (children) => {

package/dist/providers/index.js

@@ -21314,6 +21314,7 @@ function useDataDnd(args) {
     zonesRef.current.delete(zoneId2);
   }, []);
   const [activeDrag, setActiveDrag] = React81__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React81__default.useState(null);
   const zoneId = React81__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React81__default.useMemo(
@@ -21496,25 +21497,29 @@ function useDataDnd(args) {
     });
     const ctx = React81__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
-    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    const overZoneGroup2 = ctx?.overZoneGroup ?? null;
+    const isThisZoneOver = overZoneGroup2 === ownGroup;
+    const showForeignPlaceholder = isThisZoneOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     dndLog.debug("dropzone:render", {
       group: ownGroup,
       isOver,
+      isThisZoneOver,
+      overZoneGroup: overZoneGroup2,
       activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
       activeDragHeight: activeDrag2?.height ?? null,
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
     React81__default.useEffect(() => {
-      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
-    }, [droppableId, isOver, showForeignPlaceholder]);
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsxs(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
-        "data-dnd-is-over": isOver ? "true" : "false",
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        "data-dnd-is-over": isThisZoneOver ? "true" : "false",
+        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children: [
           children,
           showForeignPlaceholder ? /* @__PURE__ */ jsx(
@@ -21530,8 +21535,8 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React81__default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag }),
-    [registerZone, unregisterZone, activeDrag]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup]
   );
   const handleDragStart = React81__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -21553,14 +21558,18 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React81__default.useCallback((event) => {
+    const overData = event.over?.data?.current;
+    const group = overData?.dndGroup ?? null;
+    setOverZoneGroup(group);
     dndLog.debug("dragOver", {
       activeId: event.active.id,
       overId: event.over?.id,
-      overData: event.over?.data?.current
+      overGroup: group
     });
   }, []);
   const handleDragCancel = React81__default.useCallback((event) => {
     setActiveDrag(null);
+    setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
@@ -21569,6 +21578,7 @@ function useDataDnd(args) {
   const handleDragEndWithCleanup = React81__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
+    setOverZoneGroup(null);
   }, [handleDragEnd]);
   const wrapContainer = React81__default.useCallback(
     (children) => {

package/dist/runtime/index.cjs

@@ -21129,6 +21129,7 @@ function useDataDnd(args) {
     zonesRef.current.delete(zoneId2);
   }, []);
   const [activeDrag, setActiveDrag] = React80__namespace.default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React80__namespace.default.useState(null);
   const zoneId = React80__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React80__namespace.default.useMemo(
@@ -21311,25 +21312,29 @@ function useDataDnd(args) {
     });
     const ctx = React80__namespace.default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
-    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    const overZoneGroup2 = ctx?.overZoneGroup ?? null;
+    const isThisZoneOver = overZoneGroup2 === ownGroup;
+    const showForeignPlaceholder = isThisZoneOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     dndLog.debug("dropzone:render", {
       group: ownGroup,
       isOver,
+      isThisZoneOver,
+      overZoneGroup: overZoneGroup2,
       activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
       activeDragHeight: activeDrag2?.height ?? null,
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
     React80__namespace.default.useEffect(() => {
-      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
-    }, [droppableId, isOver, showForeignPlaceholder]);
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
-        "data-dnd-is-over": isOver ? "true" : "false",
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        "data-dnd-is-over": isThisZoneOver ? "true" : "false",
+        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children: [
           children,
           showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -21345,8 +21350,8 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React80__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag }),
-    [registerZone, unregisterZone, activeDrag]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup]
   );
   const handleDragStart = React80__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -21368,14 +21373,18 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React80__namespace.default.useCallback((event) => {
+    const overData = event.over?.data?.current;
+    const group = overData?.dndGroup ?? null;
+    setOverZoneGroup(group);
     dndLog.debug("dragOver", {
       activeId: event.active.id,
       overId: event.over?.id,
-      overData: event.over?.data?.current
+      overGroup: group
     });
   }, []);
   const handleDragCancel = React80__namespace.default.useCallback((event) => {
     setActiveDrag(null);
+    setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
@@ -21384,6 +21393,7 @@ function useDataDnd(args) {
   const handleDragEndWithCleanup = React80__namespace.default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
+    setOverZoneGroup(null);
   }, [handleDragEnd]);
   const wrapContainer = React80__namespace.default.useCallback(
     (children) => {

package/dist/runtime/index.js

@@ -21083,6 +21083,7 @@ function useDataDnd(args) {
     zonesRef.current.delete(zoneId2);
   }, []);
   const [activeDrag, setActiveDrag] = React80__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React80__default.useState(null);
   const zoneId = React80__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React80__default.useMemo(
@@ -21265,25 +21266,29 @@ function useDataDnd(args) {
     });
     const ctx = React80__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
-    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
+    const overZoneGroup2 = ctx?.overZoneGroup ?? null;
+    const isThisZoneOver = overZoneGroup2 === ownGroup;
+    const showForeignPlaceholder = isThisZoneOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     dndLog.debug("dropzone:render", {
       group: ownGroup,
       isOver,
+      isThisZoneOver,
+      overZoneGroup: overZoneGroup2,
       activeDragSourceGroup: activeDrag2?.sourceGroup ?? null,
       activeDragHeight: activeDrag2?.height ?? null,
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
     React80__default.useEffect(() => {
-      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
-    }, [droppableId, isOver, showForeignPlaceholder]);
+      dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
+    }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsxs(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
-        "data-dnd-is-over": isOver ? "true" : "false",
-        className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        "data-dnd-is-over": isThisZoneOver ? "true" : "false",
+        className: isThisZoneOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
         children: [
           children,
           showForeignPlaceholder ? /* @__PURE__ */ jsx(
@@ -21299,8 +21304,8 @@ function useDataDnd(args) {
     );
   };
   const rootContextValue = React80__default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag }),
-    [registerZone, unregisterZone, activeDrag]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup]
   );
   const handleDragStart = React80__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -21322,14 +21327,18 @@ function useDataDnd(args) {
     });
   }, [findZoneByItem, isRoot, zoneId]);
   const handleDragOver = React80__default.useCallback((event) => {
+    const overData = event.over?.data?.current;
+    const group = overData?.dndGroup ?? null;
+    setOverZoneGroup(group);
     dndLog.debug("dragOver", {
       activeId: event.active.id,
       overId: event.over?.id,
-      overData: event.over?.data?.current
+      overGroup: group
     });
   }, []);
   const handleDragCancel = React80__default.useCallback((event) => {
     setActiveDrag(null);
+    setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
@@ -21338,6 +21347,7 @@ function useDataDnd(args) {
   const handleDragEndWithCleanup = React80__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
+    setOverZoneGroup(null);
   }, [handleDragEnd]);
   const wrapContainer = React80__default.useCallback(
     (children) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.50.12",
+  "version": "4.50.14",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [