@danxbot/ui 2.5.0 → 2.7.0

package/dist/types/components/DragDrop.d.ts

@@ -5,10 +5,21 @@ export interface DragDropProps extends DragSessionCallbacks {
     strings?: Partial<DragStrings>;
     /** Tune the edge auto-scroll. It cannot be turned off; see the banner. */
     autoScroll?: AutoScrollOptions;
+    /**
+     * What the card in the hand SHOWS. Defaults to the carried item's own
+     * children, which is the version that cannot drift from the row it stands
+     * for.
+     *
+     * It does not decide whether the card is carried, or how — every carried card
+     * is a portalled clone, always. Worth passing when the resting row is dense:
+     * the clone is moving, usually under a cursor, and the two or three fields
+     * that identify the record are the only ones anybody reads off it.
+     */
+    renderCarried?: (id: DragId) => ReactNode;
     className?: string;
     children?: ReactNode;
 }
-export declare function DragDrop({ strings, autoScroll, className, children, ...callbacks }: DragDropProps): import("react").JSX.Element;
+export declare function DragDrop({ strings, autoScroll, renderCarried, className, children, ...callbacks }: DragDropProps): import("react").JSX.Element;
 export interface DragDropContainerProps {
     id: ContainerId;
     /**
@@ -52,9 +63,3 @@ export interface DragDropHandleProps {
     children?: ReactNode;
 }
 export declare function DragDropHandle({ label, className, children }: DragDropHandleProps): import("react").JSX.Element;
-export interface DragDropOverlayProps {
-    /** Renders the carried card. Called only while a card is being carried. */
-    children: (id: DragId) => ReactNode;
-    className?: string;
-}
-export declare function DragDropOverlay({ children, className }: DragDropOverlayProps): import("react").ReactPortal | null;

package/dist/types/components/drag-drop/context.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import type { DragAxis, DragId, ContainerId, DragSession } from "../../lib/dnd";
 import type { ContainerShift } from "./shift";
 export interface DragDropContextValue {
@@ -14,15 +15,22 @@ export interface DragDropContextValue {
      */
     instructionsId: string;
     /**
-     * True while a `<DragDropOverlay>` is mounted, i.e. while a portalled clone
-     * is carrying the card and the row itself should render as the hole it left.
+     * What the carried card SHOWS — never how, whether, or where it is carried.
      *
-     * It selects WHICH of the two carries the card, never WHETHER one does: with
-     * no overlay the row follows the pointer under its own transform
-     * (`shift.ts#carriedOffset`). Either way the slot is vacated and closes.
+     * There is exactly one carry mechanism (`DragDrop.tsx#CarriedCard`: a `fixed`
+     * clone portalled to the body) and every item uses it, so this is content and
+     * nothing else. Absent — the ordinary case — the clone renders the carried
+     * item's OWN children, which is the only version of the card that cannot
+     * drift from the row it stands for.
+     *
+     * This used to be a `lifted` boolean counting mounted `<DragDropOverlay>`s,
+     * and it selected a MECHANISM: overlay mounted meant a portalled clone,
+     * absent meant the row transformed itself in flow. Two mechanisms is what
+     * this field no longer is. A board that forgot the overlay got a card that
+     * could not leave its own scroll container, which is a defect a consumer had
+     * no way to know it owed — and the reason the mechanism is not a choice.
      */
-    lifted: boolean;
-    registerOverlay: () => () => void;
+    renderCarried: ((id: DragId) => ReactNode) | undefined;
     /** Items and containers publish their spoken names here at mount. */
     registerLabel: (kind: "item" | "container", id: string, label: string | undefined) => () => void;
 }

package/dist/types/components/drag-drop/recipe.d.ts

@@ -21,12 +21,6 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    carried: {
-        true: {
-            shift: string;
-        };
-        false: {};
-    };
     mode: {
         pointer: {
             overlay: string;
@@ -67,12 +61,6 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    carried: {
-        true: {
-            shift: string;
-        };
-        false: {};
-    };
     mode: {
         pointer: {
             overlay: string;
@@ -113,12 +101,6 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    carried: {
-        true: {
-            shift: string;
-        };
-        false: {};
-    };
     mode: {
         pointer: {
             overlay: string;

package/dist/types/components/drag-drop/shift.d.ts

@@ -27,55 +27,57 @@ export interface ContainerShift {
     markerShift: (restIndex: number) => number;
 }
 /**
- * The carried item's own displacement from its resting box, in px — what makes
- * the thing under the cursor BE the thing you picked up.
+ * Where a pointer-carried card sits on screen, in VIEWPORT coordinates — what
+ * makes the thing under the cursor BE the thing you picked up.
  *
- * WHY THIS EXISTS AT ALL. A `<DragDropOverlay>` is optional, and for a long
- * while a board without one dragged nothing: the sibling gap opened correctly,
- * the marker drew in the right place, and the row itself sat exactly where it
- * had always been. Every automated check passed, because every one of them
- * asserts against the ORDER a drop writes and the order was right — the defect
- * was that there was no visual connection between the pointer and the thing it
- * was moving, which is a fact about pixels and nothing but a browser can see
- * it. So following the pointer is now what the engine does by DEFAULT, and an
- * overlay is what a consumer adds when the card must escape its container
- * rather than what it adds to make the card move at all.
+ * A VIEWPORT POINT, NOT A DISPLACEMENT, AND THAT IS THE WHOLE FIX. This was an
+ * offset from the card's resting box for exactly as long as the ROW did the
+ * carrying, under an in-flow `translate` on a child of the measured element.
+ * Two things are wrong with carrying a card in flow and neither can be tuned
+ * away:
+ *
+ *   IT CANNOT LEAVE.  A descendant of a scroll container is clipped by it. A
+ *                     card carried past the edge of its own list is cut off at
+ *                     that edge, and the container cannot stop clipping — it is
+ *                     the scroller, and a scrolling axis forces its cross axis
+ *                     to a non-`visible` value (see `recipe.ts`).
+ *   IT INFLATES.      A transformed in-flow element contributes to its
+ *                     ancestor's SCROLLABLE OVERFLOW REGION, so the held row
+ *                     grew the extent of the very container it was inside —
+ *                     measured 512 -> 607px on a straight 90px sideways drag,
+ *                     which is auto-scroll theft and then a runaway.
+ *
+ * Neither is about SIZE, so neither is fixed by shrinking the card: the growth
+ * is the card following the hand, and a held object has to follow the hand on
+ * BOTH axes or it slides out from under the cursor the moment the hand moves
+ * the other way. Measured: dropping the 2% lift scale took a 95.12px overhang
+ * to 90.00px, and 90px was the pointer's own sideways travel. So the card is
+ * carried by a `fixed` clone portalled to the body (`DragDrop.tsx#CarriedCard`)
+ * — out of the flow entirely, where there is no ancestor to clip it and no
+ * extent to inflate.
  *
  * `grab` is where inside the box the press landed, so the card tracks the point
- * that was actually pressed rather than snapping a corner to the cursor. The
- * rest box comes from the same snapshot the shift is computed from — re-taken
- * on scroll, resize and every auto-scroll frame — so the card stays under the
- * cursor while the list scrolls beneath it.
+ * that was actually pressed rather than snapping a corner to the cursor.
  *
  * Null in keyboard mode: there is no pointer to follow, and a keyboard drag
  * moves slot to slot with the marker saying where. That is not a fallback — it
- * is a different question with a different honest answer.
+ * is a different question with a different honest answer, and `gapRect` is it.
  */
-export declare function carriedOffset(layout: LayoutSnapshot | null, state: DragState): Point | null;
-/**
- * The carried item's follow offset as an inline style.
- *
- * A 2D `translate`, unlike `shiftStyle`'s axis-constrained one: the card is a
- * held object rather than a row sliding along a list, and constraining it to
- * the container's axis makes it slide off the cursor the moment the hand moves
- * the other way.
- */
-export declare function followStyle(offset: Point | null): {
-    translate: string;
-};
+export declare function carriedPoint(state: DragState): Point | null;
 /**
  * Everything one container needs to render the shift, or null when no drag is
  * in flight and nothing should move.
  *
- * WHETHER THE HOME SLOT CLOSES ASKS ONE QUESTION: has the card actually left
- * it? Two different things can carry it away — a mounted `<DragDropOverlay>`
- * (`lifted`), or the card following the pointer under its own transform
- * (`carriedOffset`) — and either one empties the slot, so either one closes it.
- * The reason this is not cosmetic runs the other way too: a KEYBOARD drag with
- * no overlay has nothing carrying the card, so the card is still sitting in its
- * own slot, and closing it there would slide a neighbour underneath it.
+ * THE HOME SLOT CLOSES WHENEVER A DRAG IS LIVE, with no condition on it, and
+ * that is a consequence of there being ONE carry mechanism rather than a
+ * simplification of two. There used to be a `lifted` argument here, because a
+ * portalled clone and an in-flow `translate` were different answers to "is the
+ * card still in its slot" and a keyboard drag with no clone was a third. Every
+ * drag now lifts the card out into a portalled clone — pointer and keyboard
+ * alike — so the slot is empty every time, and a caller cannot get this wrong
+ * by forgetting to say so.
  */
-export declare function containerShift(layout: LayoutSnapshot | null, state: DragState, container: ContainerId, lifted: boolean): ContainerShift | null;
+export declare function containerShift(layout: LayoutSnapshot | null, state: DragState, container: ContainerId): ContainerShift | null;
 /** A rect in viewport coordinates. */
 export interface GapRect {
     top: number;
@@ -93,7 +95,7 @@ export interface GapRect {
  * (`autoscroll.ts#keepKeyboardTargetVisible`), which is the only thing that
  * moves these boxes during a keyboard drag.
  */
-export declare function gapRect(layout: LayoutSnapshot | null, state: DragState, lifted: boolean): GapRect | null;
+export declare function gapRect(layout: LayoutSnapshot | null, state: DragState): GapRect | null;
 /**
  * The shift as an inline style.
  *

package/dist/types/components/kanban/KanbanBoard.d.ts

@@ -28,6 +28,11 @@ export interface KanbanBoardProps<T> extends Omit<DragSessionCallbacks, "onDragE
      * Worth overriding when the resting card is dense: the clone is moving, often
      * under a cursor, and the two or three fields that identify the record are
      * the only ones anybody reads off it.
+     *
+     * It changes what the carried card SHOWS and nothing else. Whether a card is
+     * carried, and how, is not a board's decision — `DragDrop` lifts every card
+     * into a portalled clone, and a board that omitted the piece that did the
+     * carrying used to get cards that could not leave their own lane.
      */
     renderDragging?: (item: T) => ReactNode;
     onMove: (move: KanbanMove) => void;

package/dist/types/components/kanban/recipe.d.ts

@@ -12,6 +12,8 @@ export declare const kanban: import("tailwind-variants").TVReturnType<{
     laneLabel: string;
     laneHint: string;
     laneItems: string;
+    card: string[];
+    cardHandle: string;
     laneEmpty: string;
     laneRefusal: string;
 }, undefined, {
@@ -28,6 +30,8 @@ export declare const kanban: import("tailwind-variants").TVReturnType<{
     laneLabel: string;
     laneHint: string;
     laneItems: string;
+    card: string[];
+    cardHandle: string;
     laneEmpty: string;
     laneRefusal: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -44,6 +48,8 @@ export declare const kanban: import("tailwind-variants").TVReturnType<{
     laneLabel: string;
     laneHint: string;
     laneItems: string;
+    card: string[];
+    cardHandle: string;
     laneEmpty: string;
     laneRefusal: string;
 }>>;

package/dist/types/index.d.ts

@@ -69,7 +69,7 @@ export type { Command, Edit } from "./lib/markdown/commands";
 export { toggleBold, toggleItalic, toggleCode, toggleStrike, toggleInline, setHeading, adjustHeading, headingLevel, toggleList, toggleTask, indentLines, outdentLines, toggleQuote, toggleCodeBlock, fenceAround, insertRule, insertImage, insertLink, insertTable, insertRow, insertColumn, deleteRow, deleteColumn, deleteTable, alignColumn, tableAround, cellsOf, cellAt, tableTab, smartEnter, smartTab, smartShiftTab, } from "./lib/markdown/commands";
 export { tokenize, listLanguages, resolveLanguage, defineGrammar, registerGrammar, checkCoverage, type Token, type TokenType, type Grammar, type Rule, } from "./lib/syntax";
 export { parseMarkdown, MarkdownNodes, sanitizeHref, type MdNode, type MdInline, type MdCodeRenderer, } from "./lib/syntax/markdown";
-export { DragDrop, DragDropContainer, DragDropItem, DragDropHandle, DragDropOverlay, type DragDropProps, type DragDropContainerProps, type DragDropItemProps, type DragDropHandleProps, type DragDropOverlayProps, } from "./components/DragDrop";
+export { DragDrop, DragDropContainer, DragDropItem, DragDropHandle, type DragDropProps, type DragDropContainerProps, type DragDropItemProps, type DragDropHandleProps, } from "./components/DragDrop";
 export { KanbanBoard, type KanbanBoardProps, type KanbanLane, type KanbanMove, type KanbanRefusal, } from "./components/kanban/KanbanBoard";
 export { DEFAULT_DRAG_STRINGS, DRAG_INSTRUCTIONS_ID, DragInstructions, DragLiveRegion, DragSession, DragSessionProvider, applyMove, attachAutoScroll, attachKeyboardSensor, attachPointerSensor, attachSessionWindowListeners, isNoOp, resolveTarget, sameTarget, scrollVelocity, useCreateDragSession, useDragAnnouncements, useDragSession, useDragState, useDraggable, useDropContainer, type ContainerId, type DragAxis, type DragCancelEvent, type DragEndEvent, type DragId, type DragMode, type DragPhase, type DragSessionCallbacks, type DragStartEvent, type DragState, type AutoScrollOptions, type DragAnnouncementContext, type DragAnnouncementOptions, type DragAnnouncements, type DragInstructionsProps, type DragLiveRegionProps, type DragStrings, type DropTarget, type KeyboardSensorOptions, type PointerActivation, } from "./lib/dnd";
 export type { MessageRole, MessagePart, MessagePartType, TextPart, CodePart, ReasoningPart, ToolPart, ToolStatus, FilePart, ComponentPart, ChatFile, ChatMessage, RenderContext, PartRenderer, PartRenderers, ChatComponentRenderer, ChatComponents, } from "./components/chat/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",
@@ -78,7 +78,7 @@
     "audit:arrows": "node scripts/audit-arrows.mjs",
     "audit:motion": "node scripts/audit-motion.mjs",
     "audit:responsive": "node scripts/audit-responsive.mjs",
-    "audit:dnd": "node scripts/audit-dnd.mjs && node scripts/probe-dnd-sensors.mjs && node scripts/probe-dnd-a11y.mjs && node scripts/probe-drag-follow.mjs && node scripts/probe-drag-overflow.mjs && node scripts/probe-node-canvas.mjs",
+    "audit:dnd": "node scripts/audit-dnd.mjs && node scripts/probe-dnd-sensors.mjs && node scripts/probe-dnd-a11y.mjs && node scripts/probe-drag-follow.mjs && node scripts/probe-drag-overflow.mjs && node scripts/probe-node-canvas.mjs && node scripts/probe-kanban.mjs",
     "audit:axtree": "node scripts/audit-axtree.mjs",
     "audit:mutations": "node scripts/audit-mutations.mjs",
     "audit:palette": "node scripts/audit-palette.mjs",