@almadar/ui 4.50.22 → 4.51.0

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: useCallback128, useState: useState122 } = React93__namespace.default;
+      const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback126, useState: useState120 } = 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] = useState122(null);
-        const handleMapClick = useCallback128((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState120(null);
+        const handleMapClick = useCallback126((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 = useCallback128((marker) => {
+        const handleMarkerClick = useCallback126((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -24906,6 +24906,31 @@ var init_DashboardLayout = __esm({
     NavLink.displayName = "NavLink";
   }
 });
+function useAlmadarDndSensors(withSortableKeyboard = true) {
+  return core$1.useSensors(
+    core$1.useSensor(core$1.PointerSensor, {
+      activationConstraint: { distance: ALMADAR_DND_ACTIVATION_DISTANCE }
+    }),
+    core$1.useSensor(
+      core$1.KeyboardSensor,
+      withSortableKeyboard ? { coordinateGetter: sortable.sortableKeyboardCoordinates } : void 0
+    )
+  );
+}
+var ALMADAR_DND_ACTIVATION_DISTANCE, almadarDndCollisionDetection;
+var init_useAlmadarDndCollision = __esm({
+  "hooks/useAlmadarDndCollision.ts"() {
+    "use client";
+    ALMADAR_DND_ACTIVATION_DISTANCE = 5;
+    almadarDndCollisionDetection = (args) => {
+      const pw = core$1.pointerWithin(args);
+      if (pw.length > 0) return pw;
+      const ri = core$1.rectIntersection(args);
+      if (ri.length > 0) return ri;
+      return core$1.closestCorners(args);
+    };
+  }
+});
 function useDataDnd(args) {
   const {
     dragGroup,
@@ -25001,25 +25026,8 @@ function useDataDnd(args) {
       dndLog.debug("zone:unregister", { zoneId, group: meta.group });
     };
   }, [parentRoot, isRoot, zoneId, meta]);
-  const sensors = core$1.useSensors(
-    core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } }),
-    core$1.useSensor(core$1.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
-  );
-  const collisionDetection = React93__namespace.default.useCallback((args2) => {
-    const pointerCollisions = core$1.pointerWithin(args2);
-    if (pointerCollisions.length > 0) {
-      dndLog.debug("collision:pointerWithin", { count: pointerCollisions.length, ids: pointerCollisions.map((c) => c.id) });
-      return pointerCollisions;
-    }
-    const rectCollisions = core$1.rectIntersection(args2);
-    if (rectCollisions.length > 0) {
-      dndLog.debug("collision:rectIntersection", { count: rectCollisions.length, ids: rectCollisions.map((c) => c.id) });
-      return rectCollisions;
-    }
-    const cornerCollisions = core$1.closestCorners(args2);
-    dndLog.debug("collision:closestCorners", { count: cornerCollisions.length, ids: cornerCollisions.map((c) => c.id) });
-    return cornerCollisions;
-  }, []);
+  const sensors = useAlmadarDndSensors(true);
+  const collisionDetection = almadarDndCollisionDetection;
   const findZoneByItem = React93__namespace.default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
@@ -25356,6 +25364,7 @@ var init_useDataDnd = __esm({
   "components/molecules/useDataDnd.tsx"() {
     "use client";
     init_useEventBus();
+    init_useAlmadarDndCollision();
     init_Box();
     dndLog = logger.createLogger("almadar:ui:dnd");
     RootCtx = React93__namespace.default.createContext(null);
@@ -42979,7 +42988,7 @@ function getAllEvents(traits2) {
 }
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
-  const [log19, setLog] = React93__namespace.useState([]);
+  const [log20, setLog] = React93__namespace.useState([]);
   const prevStatesRef = React93__namespace.useRef(/* @__PURE__ */ new Map());
   React93__namespace.useEffect(() => {
     for (const trait of traits2) {
@@ -43043,9 +43052,9 @@ function EventDispatcherTab({ traits: traits2, schema }) {
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: "Other Events (not available from current state)" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: unavailableEvents.map((event) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", className: "opacity-50", children: event }, event)) })
     ] }),
-    log19.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    log20.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: "Recent Transitions" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "xs", children: log19.map((entry, i) => /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "xs", children: log20.map((entry, i) => /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-400", children: entry.traitName }),
         " ",
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: entry.from }),
@@ -57468,67 +57477,6 @@ 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;
@@ -59141,6 +59089,128 @@ function BrowserPlayground({
 // components/molecules/avl/OrbPreviewNode.tsx
 init_useEventBus();
 
+// components/molecules/avl/useCanvasDnd.tsx
+init_useEventBus();
+init_useAlmadarDndCollision();
+var log18 = logger.createLogger("almadar:ui:canvas-dnd");
+function useCanvasDraggable({
+  id,
+  payload,
+  disabled
+}) {
+  const { setNodeRef, attributes, listeners: listeners6, isDragging, transform } = core$1.useDraggable({
+    id,
+    data: { payload },
+    disabled
+  });
+  const style = {
+    transform: utilities.CSS.Translate.toString(transform),
+    cursor: disabled ? "not-allowed" : isDragging ? "grabbing" : "grab",
+    opacity: isDragging ? 0.5 : 1,
+    touchAction: "none"
+  };
+  return { setNodeRef, attributes, listeners: listeners6, isDragging, style };
+}
+var DEFAULT_ACCEPTS = ["pattern", "behavior"];
+function useCanvasDroppable({
+  id,
+  target,
+  accepts,
+  disabled
+}) {
+  const acceptsList = accepts ?? DEFAULT_ACCEPTS;
+  const { setNodeRef, isOver } = core$1.useDroppable({
+    id,
+    data: { target, accepts: acceptsList },
+    disabled
+  });
+  return { setNodeRef, isOver };
+}
+function defaultEmit(eventBus, drop) {
+  const { payload, target, resolved } = drop;
+  if (payload.kind === "pattern") {
+    const patternType = payload.data.type;
+    if (typeof patternType !== "string") {
+      log18.warn("default-emit:pattern:missing-type");
+      return;
+    }
+    const out = { patternType, containerNode: target.containerNode };
+    if (resolved) {
+      out.parentPath = resolved.parentPath;
+      out.index = resolved.index;
+    }
+    eventBus.emit("UI:PATTERN_DROP", out);
+    log18.info("default-emit:pattern", { patternType, level: target.level });
+    return;
+  }
+  if (payload.kind === "behavior") {
+    const behaviorName = payload.data.name;
+    if (typeof behaviorName !== "string") {
+      log18.warn("default-emit:behavior:missing-name");
+      return;
+    }
+    eventBus.emit("UI:BEHAVIOR_DROP", {
+      behaviorName,
+      containerNode: target.containerNode
+    });
+    log18.info("default-emit:behavior", { behaviorName, level: target.level });
+    return;
+  }
+  log18.debug("default-emit:unhandled-kind", { kind: payload.kind });
+}
+function CanvasDndProvider({ children, onDrop }) {
+  const eventBus = useEventBus();
+  const sensors = useAlmadarDndSensors(false);
+  const handleDragStart = React93__namespace.default.useCallback((e) => {
+    const data = e.active.data.current;
+    const payload = data?.payload;
+    if (payload) {
+      eventBus.emit("UI:DRAG_START", { kind: payload.kind, data: payload.data });
+      log18.info("dragStart", { id: e.active.id, kind: payload.kind });
+    } else {
+      log18.warn("dragStart:missing-payload", { id: e.active.id });
+    }
+  }, [eventBus]);
+  const handleDragEnd = React93__namespace.default.useCallback((e) => {
+    const activeData = e.active.data.current;
+    const payload = activeData?.payload;
+    const overData = e.over?.data.current;
+    const target = overData?.target;
+    const accepts = overData?.accepts;
+    log18.info("dragEnd", {
+      activeId: e.active.id,
+      overId: e.over?.id,
+      hasPayload: !!payload,
+      hasTarget: !!target,
+      targetLevel: target?.level
+    });
+    if (payload) {
+      eventBus.emit("UI:DRAG_END", { kind: payload.kind, data: payload.data });
+    }
+    if (!payload || !target) return;
+    if (accepts && !accepts.includes(payload.kind)) {
+      log18.debug("dragEnd:rejected:kind", { kind: payload.kind, accepts: [...accepts] });
+      return;
+    }
+    const activator = e.activatorEvent;
+    const cursor = activator && typeof activator.clientX === "number" && typeof activator.clientY === "number" ? { x: activator.clientX + e.delta.x, y: activator.clientY + e.delta.y } : null;
+    const resolved = target.resolvePath && cursor ? target.resolvePath(cursor) : null;
+    const drop = { payload, target, cursor, resolved };
+    const suppressed = onDrop ? onDrop(drop) === true : false;
+    if (!suppressed) defaultEmit(eventBus, drop);
+  }, [eventBus, onDrop]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core$1.DndContext,
+    {
+      sensors,
+      collisionDetection: almadarDndCollisionDetection,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children
+    }
+  );
+}
+
 // components/molecules/avl/wire-validation.ts
 function validateWire(sourcePayload, targetPayload) {
   const warnings = [];
@@ -59489,105 +59559,74 @@ var OrbPreviewNodeInner = (props) => {
       unsub2();
     };
   }, [eventBus]);
-  const handlePreviewDrop = React93.useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragActive(false);
-    contentRef.current?.querySelectorAll(".drag-hover, .drop-indicator").forEach((el2) => {
-      el2.classList.remove("drag-hover");
-      if (el2.classList.contains("drop-indicator")) el2.remove();
-    });
-    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
-    if (!raw) return;
-    let payload;
-    try {
-      payload = JSON.parse(raw);
-    } catch {
-      return;
-    }
-    if (payload.kind !== "pattern") return;
-    let el = e.target;
-    while (el && el.dataset.acceptsChildren !== "true") {
-      el = el.parentElement;
-      if (!el || el === contentRef.current) break;
-    }
-    const containerNode = {
-      orbitalName: data.orbitalName,
-      traitName: data.traitName,
-      transitionEvent: data.transitionEvent
-    };
-    const containerPath = el?.dataset?.patternPath;
-    if (!containerPath) {
-      eventBus.emit("UI:PATTERN_DROP", {
-        parentPath: "root",
-        patternType: payload.data.type,
-        index: 0,
-        containerNode
-      });
-      return;
-    }
-    const pathChildren = el.querySelectorAll(":scope > [data-pattern-path]");
-    let insertIndex = pathChildren.length;
-    for (let i = 0; i < pathChildren.length; i++) {
-      const rect = pathChildren[i].getBoundingClientRect();
+  const resolveL2Path = React93.useCallback(
+    (cursor) => {
+      const hit = document.elementFromPoint(cursor.x, cursor.y);
+      if (!hit) return null;
+      let el = hit;
+      while (el && el.dataset.acceptsChildren !== "true") {
+        if (el === contentRef.current) break;
+        el = el.parentElement;
+      }
+      if (!el) return null;
+      const containerPath = el.dataset?.patternPath;
+      if (!containerPath) return { parentPath: "root", index: 0 };
+      const pathChildren = el.querySelectorAll(":scope > [data-pattern-path]");
+      let insertIndex = pathChildren.length;
       const style = el.firstElementChild ? getComputedStyle(el.firstElementChild) : null;
       const isVertical = style?.flexDirection !== "row";
-      const mid = isVertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
-      const cursor = isVertical ? e.clientY : e.clientX;
-      if (cursor < mid) {
-        insertIndex = i;
-        break;
+      for (let i = 0; i < pathChildren.length; i++) {
+        const rect = pathChildren[i].getBoundingClientRect();
+        const mid = isVertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+        const pos = isVertical ? cursor.y : cursor.x;
+        if (pos < mid) {
+          insertIndex = i;
+          break;
+        }
       }
-    }
-    eventBus.emit("UI:PATTERN_DROP", {
-      parentPath: containerPath,
-      patternType: payload.data.type,
-      index: insertIndex,
-      containerNode
-    });
-  }, [eventBus, data.orbitalName, data.traitName, data.transitionEvent]);
-  const handlePreviewDragOver = React93.useCallback((e) => {
-    if (!e.dataTransfer.types.includes(ALMADAR_DND_MIME)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    e.dataTransfer.dropEffect = "copy";
-    if (!dragActive) setDragActive(true);
-    let el = e.target;
-    while (el && el.dataset.acceptsChildren !== "true") {
-      el = el.parentElement;
-      if (!el || el === contentRef.current) break;
-    }
-    contentRef.current?.querySelectorAll(".drag-hover").forEach((c) => c.classList.remove("drag-hover"));
-    if (el?.dataset?.acceptsChildren === "true") {
-      el.classList.add("drag-hover");
-    }
-  }, [dragActive]);
-  const handlePreviewDragLeave = React93.useCallback((e) => {
-    contentRef.current?.querySelectorAll(".drag-hover").forEach((c) => c.classList.remove("drag-hover"));
-  }, []);
+      return { parentPath: containerPath, index: insertIndex };
+    },
+    []
+  );
+  const l2Target = React93.useMemo(
+    () => ({
+      level: "l2",
+      containerNode: {
+        orbitalName: data.orbitalName,
+        traitName: data.traitName,
+        transitionEvent: data.transitionEvent
+      },
+      resolvePath: resolveL2Path
+    }),
+    [data.orbitalName, data.traitName, data.transitionEvent, resolveL2Path]
+  );
+  const { setNodeRef: l2SetNodeRef, isOver: l2IsOver } = useCanvasDroppable({
+    id: `orb-l2-${data.orbitalName}-${data.traitName ?? ""}-${data.transitionEvent ?? ""}`,
+    target: l2Target,
+    accepts: ["pattern"],
+    disabled: !isExpanded
+  });
+  const setContentRef = React93.useCallback((el) => {
+    contentRef.current = el;
+    l2SetNodeRef(el);
+  }, [l2SetNodeRef]);
   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 l1Target = React93.useMemo(
+    () => ({ level: "l1", containerNode: { orbitalName: data.orbitalName } }),
+    [data.orbitalName]
   );
-  const { dropProps: l1DropProps, isOver: l1IsOver } = useDropZone({
+  const { setNodeRef: l1SetNodeRef, isOver: l1IsOver } = useCanvasDroppable({
+    id: `orb-l1-${data.orbitalName}`,
+    target: l1Target,
     accepts: ["pattern"],
-    onDrop: handleL1Drop,
     disabled: isExpanded
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
-      ...isExpanded ? {} : l1DropProps,
+      ref: isExpanded ? void 0 : l1SetNodeRef,
       className: `rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden relative${isRunning ? " orb-preview-running" : ""}`,
       style: {
         borderColor: l1IsOver ? "var(--color-primary)" : borderColor,
@@ -59729,12 +59768,9 @@ var OrbPreviewNodeInner = (props) => {
         /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
-            ref: contentRef,
-            className: `orb-preview-live nodrag${dragActive ? " drag-active" : ""}`,
+            ref: setContentRef,
+            className: `orb-preview-live nodrag${dragActive || l2IsOver ? " drag-active" : ""}`,
             onClick: handleContentClick,
-            onDrop: handlePreviewDrop,
-            onDragOver: handlePreviewDragOver,
-            onDragLeave: handlePreviewDragLeave,
             children: orbitalSchema ? /* @__PURE__ */ jsxRuntime.jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsxRuntime.jsx(
               BrowserPlayground,
               {
@@ -61230,7 +61266,7 @@ init_AvlTransitionLane();
 init_AvlSwimLane();
 init_types();
 init_avl_elk_layout();
-var log18 = logger.createLogger("almadar:ui:avl:trait-scene");
+var log19 = logger.createLogger("almadar:ui:avl:trait-scene");
 var SWIM_GUTTER2 = 120;
 var CENTER_W2 = 360;
 var AvlTraitScene = ({
@@ -61242,7 +61278,7 @@ var AvlTraitScene = ({
   const dataKey = React93.useMemo(() => JSON.stringify(data), [data]);
   React93.useEffect(() => {
     computeTraitLayout(data).then(setLayout).catch((error) => {
-      log18.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
+      log19.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
     });
   }, [dataKey]);
   if (!layout) {
@@ -62416,6 +62452,7 @@ exports.AvlTransition = AvlTransition;
 exports.AvlTransitionEdge = AvlTransitionEdge;
 exports.AvlTransitionScene = AvlTransitionScene;
 exports.BehaviorComposeNode = BehaviorComposeNode;
+exports.CanvasDndProvider = CanvasDndProvider;
 exports.DOMAIN_COLORS = DOMAIN_COLORS;
 exports.DetailView = DetailView;
 exports.EventFlowEdge = EventFlowEdge;
@@ -62445,5 +62482,7 @@ exports.registryEntryToCanvasEntry = registryEntryToCanvasEntry;
 exports.ringPositions = ringPositions;
 exports.schemaToFlowGraph = schemaToFlowGraph;
 exports.schemaToOverviewGraph = schemaToOverviewGraph;
+exports.useCanvasDraggable = useCanvasDraggable;
+exports.useCanvasDroppable = useCanvasDroppable;
 exports.useZoomBand = useZoomBand;
 exports.zoomProgress = zoomProgress;