@almadar/ui 4.50.13 → 4.50.15

package/dist/avl/index.js

@@ -35,7 +35,7 @@ import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { FieldTypeSchema, isInlineTrait, isEntityCall, schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners, DndContext, useDroppable } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, arrayMove, useSortable, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { sortableKeyboardCoordinates, useSortable, arrayMove, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
 import * as THREE6 from 'three';
@@ -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 });
@@ -24877,11 +24877,21 @@ function useDataDnd(args) {
   const eventBus = useEventBus();
   const parentRoot = React93__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const [localOrder, setLocalOrder] = React93__default.useState(null);
-  const orderedItems = localOrder ?? items;
-  React93__default.useEffect(() => {
-    setLocalOrder(null);
-  }, [items]);
+  const zoneId = React93__default.useId();
+  const ownGroup = dragGroup ?? accepts ?? zoneId;
+  const [optimisticOrders, setOptimisticOrders] = React93__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React93__default.useRef(optimisticOrders);
+  optimisticOrdersRef.current = optimisticOrders;
+  const clearOptimisticOrder = React93__default.useCallback((group) => {
+    setOptimisticOrders((prev) => {
+      if (!prev.has(group)) return prev;
+      const next = new Map(prev);
+      next.delete(group);
+      return next;
+    });
+  }, []);
+  const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
+  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
@@ -24894,6 +24904,15 @@ function useDataDnd(args) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [itemIdsSignature]
   );
+  const itemsContentSig = items.map((it, idx) => String(it[dndItemIdField] ?? `__${idx}`)).join("|");
+  React93__default.useEffect(() => {
+    const root = isRoot ? null : parentRoot;
+    if (root) {
+      root.clearOptimisticOrder(ownGroup);
+    } else {
+      clearOptimisticOrder(ownGroup);
+    }
+  }, [itemsContentSig, ownGroup]);
   const zonesRef = React93__default.useRef(/* @__PURE__ */ new Map());
   const registerZone = React93__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
@@ -24903,11 +24922,9 @@ function useDataDnd(args) {
   }, []);
   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(
-    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds }),
-    [ownGroup, dropEvent, reorderEvent, itemIds]
+    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds, rawItems: items, idField: dndItemIdField }),
+    [ownGroup, dropEvent, reorderEvent, itemIds, items, dndItemIdField]
   );
   React93__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
@@ -24954,7 +24971,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const findZoneByGroup = React93__default.useCallback(
+  React93__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -24966,81 +24983,76 @@ function useDataDnd(args) {
   const handleDragEnd = React93__default.useCallback(
     (event) => {
       const { active, over } = event;
-      const allZones = Array.from(zonesRef.current.entries()).map(([id, m]) => ({ id, group: m.group, items: m.itemIds.length }));
+      const activeIdStr = String(active.id);
       dndLog.debug("dragEnd:received", {
         activeId: active.id,
         overId: over?.id,
-        overData: over?.data?.current,
-        zones: allZones
+        overData: over?.data?.current
       });
-      if (!over) {
-        dndLog.warn("dragEnd:abort:no-over", { activeId: active.id, reason: "no droppable under pointer at drop time \u2192 item snaps back" });
-        return;
-      }
-      const sourceZone = findZoneByItem(active.id);
-      const overData = over.data?.current;
-      const targetGroup = overData?.dndGroup;
-      dndLog.debug("dragEnd:resolved", { sourceGroup: sourceZone?.group, targetGroup, overDataKeys: overData ? Object.keys(overData) : null });
-      if (!sourceZone) {
-        dndLog.warn("dragEnd:abort:no-source-zone", { activeId: active.id });
-        return;
-      }
-      if (!targetGroup) {
-        dndLog.warn("dragEnd:abort:no-target-group", { overId: over.id, overData });
-        return;
-      }
-      const targetZone = findZoneByGroup(targetGroup);
-      if (!targetZone) {
-        dndLog.warn("dragEnd:abort:target-zone-not-registered", { targetGroup });
+      let sourceMeta;
+      let oldIndex = -1;
+      let targetMeta;
+      let newIndex = -1;
+      for (const m of zonesRef.current.values()) {
+        const rawIdx = m.rawItems.findIndex((it) => String(it[m.idField]) === activeIdStr);
+        if (rawIdx >= 0) {
+          sourceMeta = m;
+          oldIndex = rawIdx;
+        }
+        const currentItems = optimisticOrdersRef.current.get(m.group) ?? m.rawItems;
+        const curIdx = currentItems.findIndex((it) => String(it[m.idField]) === activeIdStr);
+        if (curIdx >= 0) {
+          targetMeta = m;
+          newIndex = curIdx;
+        }
+      }
+      if (!sourceMeta || !targetMeta) {
+        dndLog.warn("dragEnd:abort:no-zone-resolved", { activeId: active.id, hasSource: !!sourceMeta, hasTarget: !!targetMeta });
         return;
       }
-      if (sourceZone.group !== targetZone.group) {
-        if (targetZone.dropEvent) {
-          const newIndex2 = targetZone.itemIds.indexOf(over.id);
-          const evt = `UI:${targetZone.dropEvent}`;
+      if (sourceMeta.group !== targetMeta.group) {
+        if (targetMeta.dropEvent) {
+          const evt = `UI:${targetMeta.dropEvent}`;
           dndLog.info("dragEnd:cross-container:emit", {
             event: evt,
-            id: String(active.id),
-            sourceGroup: sourceZone.group,
-            targetGroup: targetZone.group,
-            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+            id: activeIdStr,
+            sourceGroup: sourceMeta.group,
+            targetGroup: targetMeta.group,
+            newIndex
           });
           eventBus.emit(evt, {
-            id: String(active.id),
-            sourceGroup: sourceZone.group,
-            targetGroup: targetZone.group,
-            newIndex: newIndex2 === -1 ? targetZone.itemIds.length : newIndex2
+            id: activeIdStr,
+            sourceGroup: sourceMeta.group,
+            targetGroup: targetMeta.group,
+            newIndex
           });
         } else {
-          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetZone.group });
+          dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetMeta.group });
         }
         return;
       }
-      const oldIndex = sourceZone.itemIds.indexOf(active.id);
-      const newIndex = sourceZone.itemIds.indexOf(over.id);
-      if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;
-      if (sourceZone.group === ownGroup) {
-        const reordered = arrayMove(orderedItems, oldIndex, newIndex);
-        setLocalOrder(reordered);
+      if (oldIndex === newIndex) {
+        dndLog.debug("dragEnd:reorder:no-op", { sourceGroup: sourceMeta.group, oldIndex });
+        return;
       }
-      if (sourceZone.reorderEvent) {
-        const evt = `UI:${sourceZone.reorderEvent}`;
+      if (sourceMeta.reorderEvent) {
+        const evt = `UI:${sourceMeta.reorderEvent}`;
         dndLog.info("dragEnd:reorder:emit", {
           event: evt,
-          id: String(active.id),
+          id: activeIdStr,
           oldIndex,
           newIndex
         });
         eventBus.emit(evt, {
-          id: String(active.id),
+          id: activeIdStr,
           oldIndex,
           newIndex
         });
       } else {
-        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceZone.group });
+        dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceMeta.group });
       }
     },
-    [orderedItems, ownGroup, findZoneByItem, findZoneByGroup, eventBus]
+    [eventBus]
   );
   const sortableData = React93__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
   const SortableItem = React93__default.useCallback(
@@ -25101,30 +25113,20 @@ function useDataDnd(args) {
     React93__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
         "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(
-            Box,
-            {
-              "data-dnd-placeholder": true,
-              style: { height: activeDrag2.height },
-              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
-            }
-          ) : null
-        ]
+        className: isThisZoneOver ? "ring-2 ring-primary/40 ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
+        children
       }
     );
   };
   const rootContextValue = React93__default.useMemo(
-    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup }),
-    [registerZone, unregisterZone, activeDrag, overZoneGroup]
+    () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
+    [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
   const handleDragStart = React93__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
@@ -25146,13 +25148,73 @@ 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,
-      overGroup: group
+    const { active, over } = event;
+    const overData = over?.data?.current;
+    const overGroup = overData?.dndGroup ?? null;
+    setOverZoneGroup(overGroup);
+    if (!over || !overGroup) return;
+    const activeIdStr = String(active.id);
+    let sourceMeta;
+    let sourceGroup;
+    for (const m of zonesRef.current.values()) {
+      const currentItems = optimisticOrdersRef.current.get(m.group) ?? m.rawItems;
+      const found = currentItems.find((it) => String(it[m.idField]) === activeIdStr);
+      if (found) {
+        sourceMeta = m;
+        sourceGroup = m.group;
+        break;
+      }
+    }
+    if (!sourceMeta || !sourceGroup) {
+      dndLog.debug("dragOver:no-source-zone", { activeId: active.id });
+      return;
+    }
+    let targetMeta;
+    for (const m of zonesRef.current.values()) {
+      if (m.group === overGroup) {
+        targetMeta = m;
+        break;
+      }
+    }
+    if (!targetMeta) {
+      dndLog.debug("dragOver:no-target-zone", { overGroup });
+      return;
+    }
+    if (sourceGroup === overGroup) {
+      setOptimisticOrders((prev) => {
+        const currentItems = prev.get(sourceGroup) ?? sourceMeta.rawItems;
+        const oldIndex = currentItems.findIndex((it) => String(it[sourceMeta.idField]) === activeIdStr);
+        const newIndex = currentItems.findIndex((it) => String(it[sourceMeta.idField]) === String(over.id));
+        if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return prev;
+        const reordered = arrayMove([...currentItems], oldIndex, newIndex);
+        const next = new Map(prev);
+        next.set(sourceGroup, reordered);
+        return next;
+      });
+      return;
+    }
+    setOptimisticOrders((prev) => {
+      const currentSource = prev.get(sourceGroup) ?? sourceMeta.rawItems;
+      const currentTarget = prev.get(overGroup) ?? targetMeta.rawItems;
+      const activeItem = currentSource.find((it) => String(it[sourceMeta.idField]) === activeIdStr);
+      if (!activeItem) return prev;
+      if (currentTarget.some((it) => String(it[targetMeta.idField]) === activeIdStr)) {
+        return prev;
+      }
+      const newSource = currentSource.filter((it) => String(it[sourceMeta.idField]) !== activeIdStr);
+      const overIdStr = String(over.id);
+      const overIndex = currentTarget.findIndex((it) => String(it[targetMeta.idField]) === overIdStr);
+      const insertAt = overIndex >= 0 ? overIndex : currentTarget.length;
+      const newTarget = [
+        ...currentTarget.slice(0, insertAt),
+        activeItem,
+        ...currentTarget.slice(insertAt)
+      ];
+      const next = new Map(prev);
+      next.set(sourceGroup, newSource);
+      next.set(overGroup, newTarget);
+      dndLog.debug("dragOver:cross-zone:splice", { sourceGroup, overGroup, sourceLen: newSource.length, targetLen: newTarget.length, insertAt });
+      return next;
     });
   }, []);
   const handleDragCancel = React93__default.useCallback((event) => {
@@ -57327,6 +57389,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 +59407,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 +60680,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);
   }, []);