@almadar/ui 4.51.0 → 4.51.1

package/dist/avl/index.cjs

@@ -59158,13 +59158,19 @@ function defaultEmit(eventBus, drop) {
   }
   log18.debug("default-emit:unhandled-kind", { kind: payload.kind });
 }
-function CanvasDndProvider({ children, onDrop }) {
+function CanvasDndProvider({
+  children,
+  onDrop,
+  renderOverlay
+}) {
   const eventBus = useEventBus();
   const sensors = useAlmadarDndSensors(false);
+  const [activePayload, setActivePayload] = React93__namespace.default.useState(null);
   const handleDragStart = React93__namespace.default.useCallback((e) => {
     const data = e.active.data.current;
     const payload = data?.payload;
     if (payload) {
+      setActivePayload(payload);
       eventBus.emit("UI:DRAG_START", { kind: payload.kind, data: payload.data });
       log18.info("dragStart", { id: e.active.id, kind: payload.kind });
     } else {
@@ -59172,6 +59178,7 @@ function CanvasDndProvider({ children, onDrop }) {
     }
   }, [eventBus]);
   const handleDragEnd = React93__namespace.default.useCallback((e) => {
+    setActivePayload(null);
     const activeData = e.active.data.current;
     const payload = activeData?.payload;
     const overData = e.over?.data.current;
@@ -59199,14 +59206,22 @@ function CanvasDndProvider({ children, onDrop }) {
     const suppressed = onDrop ? onDrop(drop) === true : false;
     if (!suppressed) defaultEmit(eventBus, drop);
   }, [eventBus, onDrop]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const handleDragCancel = React93__namespace.default.useCallback(() => {
+    setActivePayload(null);
+    log18.info("dragCancel");
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     core$1.DndContext,
     {
       sensors,
       collisionDetection: almadarDndCollisionDetection,
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
-      children
+      onDragCancel: handleDragCancel,
+      children: [
+        children,
+        renderOverlay ? /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { dropAnimation: null, children: activePayload ? renderOverlay(activePayload) : null }) : null
+      ]
     }
   );
 }

package/dist/avl/index.d.cts

@@ -1312,13 +1312,24 @@ interface CanvasDndProviderProps {
      * `false`/`undefined` to fall through to defaults after running your code.
      */
     onDrop?: (drop: CanvasDropEvent) => boolean | void;
+    /**
+     * Renders the floating preview that follows the cursor during a drag.
+     * @dnd-kit moves the source DOM node via CSS transform, which gets clipped
+     * by any ancestor with `overflow: hidden|auto|scroll` (e.g. a scrollable
+     * palette column). Returning a node here mounts a portal-attached overlay
+     * outside the clip so the user always sees what they're dragging.
+     *
+     * Receives the active payload (or null between drags) and returns the
+     * preview element — typically the same JSX the tile renders inline.
+     */
+    renderOverlay?: (payload: CanvasDragPayload | null) => React__default.ReactNode;
 }
 /**
  * Wraps a canvas subtree in one DndContext + sensors + collision waterfall.
  * Every `useCanvasDraggable` / `useCanvasDroppable` inside this provider
  * participates in the same drag session.
  */
-declare function CanvasDndProvider({ children, onDrop }: CanvasDndProviderProps): React__default.ReactElement;
+declare function CanvasDndProvider({ children, onDrop, renderOverlay, }: CanvasDndProviderProps): React__default.ReactElement;
 
 /**
  * OrbInspector

package/dist/avl/index.js

@@ -34,7 +34,7 @@ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js'
 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 { useDroppable, useDraggable, DndContext, useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners } from '@dnd-kit/core';
+import { useDroppable, useDraggable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners } from '@dnd-kit/core';
 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';
@@ -59112,13 +59112,19 @@ function defaultEmit(eventBus, drop) {
   }
   log18.debug("default-emit:unhandled-kind", { kind: payload.kind });
 }
-function CanvasDndProvider({ children, onDrop }) {
+function CanvasDndProvider({
+  children,
+  onDrop,
+  renderOverlay
+}) {
   const eventBus = useEventBus();
   const sensors = useAlmadarDndSensors(false);
+  const [activePayload, setActivePayload] = React93__default.useState(null);
   const handleDragStart = React93__default.useCallback((e) => {
     const data = e.active.data.current;
     const payload = data?.payload;
     if (payload) {
+      setActivePayload(payload);
       eventBus.emit("UI:DRAG_START", { kind: payload.kind, data: payload.data });
       log18.info("dragStart", { id: e.active.id, kind: payload.kind });
     } else {
@@ -59126,6 +59132,7 @@ function CanvasDndProvider({ children, onDrop }) {
     }
   }, [eventBus]);
   const handleDragEnd = React93__default.useCallback((e) => {
+    setActivePayload(null);
     const activeData = e.active.data.current;
     const payload = activeData?.payload;
     const overData = e.over?.data.current;
@@ -59153,14 +59160,22 @@ function CanvasDndProvider({ children, onDrop }) {
     const suppressed = onDrop ? onDrop(drop) === true : false;
     if (!suppressed) defaultEmit(eventBus, drop);
   }, [eventBus, onDrop]);
-  return /* @__PURE__ */ jsx(
+  const handleDragCancel = React93__default.useCallback(() => {
+    setActivePayload(null);
+    log18.info("dragCancel");
+  }, []);
+  return /* @__PURE__ */ jsxs(
     DndContext,
     {
       sensors,
       collisionDetection: almadarDndCollisionDetection,
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
-      children
+      onDragCancel: handleDragCancel,
+      children: [
+        children,
+        renderOverlay ? /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activePayload ? renderOverlay(activePayload) : null }) : null
+      ]
     }
   );
 }

package/dist/components/molecules/avl/useCanvasDnd.d.ts

@@ -135,10 +135,21 @@ export interface CanvasDndProviderProps {
      * `false`/`undefined` to fall through to defaults after running your code.
      */
     onDrop?: (drop: CanvasDropEvent) => boolean | void;
+    /**
+     * Renders the floating preview that follows the cursor during a drag.
+     * @dnd-kit moves the source DOM node via CSS transform, which gets clipped
+     * by any ancestor with `overflow: hidden|auto|scroll` (e.g. a scrollable
+     * palette column). Returning a node here mounts a portal-attached overlay
+     * outside the clip so the user always sees what they're dragging.
+     *
+     * Receives the active payload (or null between drags) and returns the
+     * preview element — typically the same JSX the tile renders inline.
+     */
+    renderOverlay?: (payload: CanvasDragPayload | null) => React.ReactNode;
 }
 /**
  * Wraps a canvas subtree in one DndContext + sensors + collision waterfall.
  * Every `useCanvasDraggable` / `useCanvasDroppable` inside this provider
  * participates in the same drag session.
  */
-export declare function CanvasDndProvider({ children, onDrop }: CanvasDndProviderProps): React.ReactElement;
+export declare function CanvasDndProvider({ children, onDrop, renderOverlay, }: CanvasDndProviderProps): React.ReactElement;

package/package.json

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