@almadar/ui 4.50.13 → 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 });
@@ -57373,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;
@@ -59331,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 {
@@ -60525,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 });
@@ -57327,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;
@@ -59285,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 {
@@ -60479,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/package.json

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