@danxbot/ui 3.6.0 → 3.7.0

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

@@ -55,3 +55,36 @@ export declare function MenuGroup({ label, children }: MenuGroupProps): import("
 export declare function MenuSeparator({ className }: {
     className?: string;
 }): import("react").JSX.Element;
+export interface MenuSubProps {
+    /** The row that opens it — reads like a MenuItem and carries a trailing caret. */
+    label: ReactNode;
+    /** Optional leading icon, matching `MenuItem`'s own slot. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A nested menu that flies out beside its parent.
+ *
+ * WHY THIS IS A COMPONENT AND NOT A FLAT GROUP. `MenuGroup` renders its items
+ * inline under a label, which is right for two or three related actions and
+ * wrong the moment the group is a SET YOU PICK FROM — teams, workspaces,
+ * projects. Inline, that set pushes every other item down the menu, grows
+ * without bound as the account gains members, and puts a one-of-many choice at
+ * the same visual weight as "Sign out". A submenu keeps the parent menu a fixed
+ * size and says, correctly, that the thing behind this row is a list.
+ *
+ * OPENING IS HOVER *AND* KEYBOARD, which Base UI gives us: pointer-over opens
+ * after its own small delay, ArrowRight/Enter opens from the keyboard, and
+ * ArrowLeft/Escape closes back to the parent. Building this from a nested
+ * `Menu` would lose all of it — an inner Root gets its own trigger semantics
+ * and its own focus scope, so keyboard users end up in a popup the parent does
+ * not know it owns.
+ *
+ * It is positioned `side="right"` with a small negative `alignOffset` so the
+ * first child row sits level with the row that opened it; Base UI flips it to
+ * the left edge on its own when there is no room, which is the case a hard
+ * `left` would get wrong on a narrow window.
+ */
+export declare function MenuSub({ label, icon, disabled, className, children }: MenuSubProps): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import type { DragSessionCallbacks } from "../../lib/dnd";
+import { type DragDropProps } from "../DragDrop";
 import type { KanbanLane, KanbanMove, KanbanRefusal } from "./types";
 export type { KanbanLane, KanbanMove, KanbanRefusal };
 export interface KanbanBoardProps<T> extends Omit<DragSessionCallbacks, "onDragEnd"> {
@@ -40,6 +41,51 @@ export interface KanbanBoardProps<T> extends Omit<DragSessionCallbacks, "onDragE
     onRefuse?: (refusal: KanbanRefusal) => void;
     /** Shown in a lane with no cards. */
     emptyLane?: ReactNode;
+    /**
+     * Override any part of the announcement grammar — `DragDrop.strings`, reached
+     * through the board.
+     *
+     * IT WAS UNREACHABLE, and the omission had a symptom. The default sentence is
+     * `… Position 1 of 4 in ${containerLabel}`, which reads correctly right up
+     * until a lane is called "In review" and a screen reader says "in In review".
+     * That is a property of the lane's NAME rather than of the template, so there
+     * is no template this component could ship that is right for every board —
+     * which is precisely why the engine exposes the grammar, and precisely why a
+     * board that swallowed the prop left its consumer with no way out of a
+     * sentence they could hear was wrong. Rename the lane, or write the sentence:
+     *
+     * ```tsx
+     * strings={{ picked: (c) => `Picked up ${c.label}, ${c.containerLabel} column.` }}
+     * ```
+     */
+    strings?: DragDropProps["strings"];
+    /**
+     * Fill the space between the board's own top and the bottom of whatever
+     * scrolls it, so the lanes are the only thing that scrolls down.
+     *
+     * `true` — the default, and what a board IS. It was not the default until
+     * 3.7.0, and the reason is worth keeping: the height was expressed purely as
+     * a `flex-1 min-h-0` chain, which is correct and is correct only while every
+     * ancestor cooperates. One ordinary page wrapper above the board — a bare
+     * `<div className="flex flex-col gap-10">`, which is this package's own demo
+     * layout — makes `flex-1` inert, the board sizes to its tallest lane, and the
+     * PAGE takes the scrollbar that was supposed to belong to a column. Reported
+     * from a running board: "the columns should fill to the full remaining height
+     * of the page. No scroll bar vertically. Only scroll vertically per column."
+     *
+     * The height is MEASURED (`lib/use-fill-height`), not computed from a token,
+     * and re-measured whenever anything above the board changes size. It is
+     * paired with `max-h-full`, so an ancestor that genuinely does bound the board
+     * still wins and a board in a short box does not overflow it.
+     *
+     * `false` — the board is as tall as the box it is given, or as its tallest
+     * lane if nothing gives it one. For a board deliberately sized by its
+     * container (`h-[60dvh]`, a fixed-height card) or embedded in a page that is
+     * meant to scroll as a document.
+     *
+     * @default true
+     */
+    fill?: boolean;
     className?: string;
 }
-export declare function KanbanBoard<T>({ label, lanes, getItemId, itemLabel, renderItem, renderDragging, onMove, onRefuse, emptyLane, className, ...callbacks }: KanbanBoardProps<T>): import("react").JSX.Element;
+export declare function KanbanBoard<T>({ label, lanes, getItemId, itemLabel, renderItem, renderDragging, onMove, onRefuse, emptyLane, strings, fill, className, ...callbacks }: KanbanBoardProps<T>): import("react").JSX.Element;

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

@@ -5,6 +5,14 @@ export declare const kanban: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
+    fill: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     lane: string;
@@ -22,6 +30,14 @@ export declare const kanban: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
+    fill: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     lane: string;
@@ -39,6 +55,14 @@ export declare const kanban: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
+    fill: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     lane: string;

package/dist/types/index.d.ts

@@ -28,7 +28,7 @@ export { Checkbox, Switch, Radio, RadioGroup, CheckboxField, SwitchField, RadioF
 export { Dialog, DialogClose, AlertDialog, type DialogProps, type AlertDialogProps, } from "./components/Dialog";
 export { Popover, PopoverClose, Tooltip, TooltipProvider, type PopoverProps, type TooltipProps, } from "./components/Popover";
 export { Toaster, ToastProvider, useToast, type ToasterProps, type ToastProviderProps, type ToastOptions, type ToastTone, } from "./components/Toast";
-export { Menu, MenuItem, MenuGroup, MenuRadioGroup, MenuRadioItem, MenuSeparator, type MenuProps, type MenuItemProps, type MenuGroupProps, type MenuRadioGroupProps, type MenuRadioItemProps, } from "./components/Menu";
+export { Menu, MenuItem, MenuGroup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, type MenuProps, type MenuItemProps, type MenuGroupProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuSubProps, } from "./components/Menu";
 export { ThemeMenu, type ThemeMenuProps } from "./components/ThemeMenu";
 export { AppShell, type AppShellProps, type NavItem, type NavSection, } from "./components/AppShell";
 export { FileUpload, type FileUploadProps, type UploadFile } from "./components/FileUpload";
@@ -90,6 +90,7 @@ export { ModelSelector, type ModelSelectorProps, type ChatModel, } from "./compo
 export { EffortControl, DEFAULT_EFFORT_LEVELS, type EffortControlProps, type EffortLevel, } from "./components/chat/EffortControl";
 export { ContextMeter, ChatStatus, formatTokens, type ContextMeterProps, type ContextSegment, type UsageLimit, type ChatStatusProps, } from "./components/chat/ContextMeter";
 export { cn } from "./lib/cn";
+export { useFillHeight } from "./lib/use-fill-height";
 export { useTheme, useUiScale, useContrast, useMotionPreference, type Theme, type UiScale, type ContrastPreference, type MotionPreference, } from "./lib/preferences";
 export { usePersistedState, readStored, writeStored, clearStored, storageKey, type PersistedStateOptions, } from "./lib/persist";
 export { CalendarMonth, type CalendarMonthProps } from "./components/calendar/CalendarMonth";

package/dist/types/lib/dnd/geometry.d.ts

@@ -21,6 +21,37 @@ export declare function measure(items: Iterable<ItemRegistration>, containers: I
  * the innermost one.
  */
 export declare function containerAt(snapshot: LayoutSnapshot, point: Point): ContainerRect | null;
+/**
+ * The container CLOSEST to the pointer, for a pointer that is inside none of
+ * them.
+ *
+ * THE DEAD ZONE IS THE BUG THIS EXISTS FOR, AND IT IS MOST OF A BOARD. The
+ * registered container is the SCROLLER — it has to be, so auto-scroll can find
+ * its edges — and on a kanban lane the scroller is only the card list. The lane
+ * header above it, the lane's own border, the gutter between two lanes and the
+ * board's bottom padding are all outside every registered rect, so a pointer
+ * there is "over no container" while being unmistakably over a lane to the
+ * person holding the card.
+ *
+ * What used to happen there was `resolveTarget` returning null and the session
+ * keeping the PREVIOUS target — so a card dragged from lane 1 and released on
+ * lane 3's header landed in lane 2, the lane the pointer had last crossed on
+ * its way. Measured in the demo before this change: released at (1022, 419),
+ * visually the middle of "Review" whose lane box is 878–1166 × 407–939, the
+ * card landed in "Building". Not an edge case — the header is 60px of every
+ * lane's top, and a person aiming at an empty lane aims at its label.
+ *
+ * SCOPED, so "nearest" cannot mean "somewhere else entirely": the snapshot
+ * holds one `DragDrop` root's own containers and nothing else — every root
+ * builds its own `DragSession` (`use-drag.ts`) with its own registry. The
+ * nearest container to a point over the sidebar is still a lane of the board
+ * being dragged, which is the only answer a release can sensibly have.
+ *
+ * TIES GO TO THE SMALLER BOX, matching `containerAt` — a point in the gutter
+ * between two lanes is equidistant from both, and a nested container is the
+ * more specific answer for the same reason it is there.
+ */
+export declare function nearestContainer(snapshot: LayoutSnapshot, point: Point): ContainerRect | null;
 /** A container's items in reading order, excluding the one being carried. */
 export declare function remainingItems(snapshot: LayoutSnapshot, container: string, dragged: DragId | null): ItemRect[];
 /**
@@ -41,12 +72,29 @@ export declare function indexAt(snapshot: LayoutSnapshot, container: ContainerRe
 /**
  * Where the dragged item would land if released at `point`.
  *
- * Returns null when the pointer is over no container at all. The session keeps
- * the PREVIOUS target in that case rather than clearing it — dragging a card
- * briefly outside the board should not make the insertion marker vanish, and a
- * release outside every container should still land where the marker last
- * showed. That is the behaviour every board people already use has, and the
- * alternative reads as the drag having silently failed.
+ * THE POINTER IS OVER THE CONTAINER IT IS NEAREST TO, not only the one whose
+ * rectangle happens to hold it. Both halves of that matter and the second one
+ * is the fix:
+ *
+ * The goal has always been that dragging a card briefly outside the board must
+ * not make the insertion marker vanish, and that a release outside every
+ * container still lands somewhere rather than reading as a silently failed
+ * drag. That was served by returning null here and having the session keep the
+ * PREVIOUS target — which achieves "the marker does not blink out" and gets
+ * "lands where you are pointing" exactly backwards. The gap between two lanes,
+ * a lane's header, a lane's border and the board's own bottom padding are all
+ * outside every registered rect; a release in any of them landed the card in
+ * the last lane the pointer had crossed, which for a drag from lane 1 to lane 3
+ * is lane 2. See `nearestContainer` for the measurement.
+ *
+ * Nearest keeps the marker alive for the same reason last-target did, and puts
+ * it where the person is aiming rather than where they have been.
+ *
+ * STILL NULL FOR A BOARD WITH NO CONTAINERS AT ALL — there is no nearest one,
+ * and the session's `?? s.over` remains the guard for that.
+ *
+ * The index then falls out of `indexAt` without a special case: a point above a
+ * lane is before every card in it, a point below is after all of them.
  */
 export declare function resolveTarget(snapshot: LayoutSnapshot, point: Point, dragged: DragId | null): DropTarget | null;
 /** Value equality — targets are recreated on every move, so `===` is useless. */

package/dist/types/lib/dnd/index.d.ts

@@ -7,7 +7,7 @@
  * empty icon registry (CAV-11).
  */
 export type { ContainerId, ContainerRect, ContainerRegistration, DragAxis, DragCancelEvent, DragEndEvent, DragId, DragMode, DragPhase, DragSessionCallbacks, DragStartEvent, DragState, DropTarget, ItemRect, ItemRegistration, LayoutSnapshot, Point, } from "./types";
-export { applyMove, containerAt, indexAt, isNoOp, measure, remainingItems, resolveTarget, sameTarget, } from "./geometry";
+export { applyMove, containerAt, indexAt, isNoOp, measure, nearestContainer, remainingItems, resolveTarget, sameTarget, } from "./geometry";
 export { DragSession, type StartArgs } from "./session";
 export { attachPointerSensor, attachSessionWindowListeners, type PointerActivation, type PointerSensorOptions, } from "./sensors/pointer";
 export { attachKeyboardSensor, type KeyboardSensorOptions, } from "./sensors/keyboard";

package/dist/types/lib/use-fill-height.d.ts

@@ -0,0 +1,26 @@
+import { type RefCallback } from "react";
+/**
+ * Size an element to the space between its own top and the bottom of the box
+ * that scrolls it, and keep it sized as the page changes around it.
+ *
+ * Returns a ref callback for the element. The height is written as inline style
+ * rather than returned as state on purpose — a returned number would re-render
+ * the subtree on every resize frame, and the value is only ever consumed by one
+ * property on one element.
+ *
+ * ```tsx
+ * const fillRef = useFillHeight(fill);
+ * <div ref={fillRef} className="max-h-full …" />
+ * ```
+ *
+ * WHAT IT WATCHES, and why that list rather than a global observer. The number
+ * changes when a box ABOVE the element changes size: the scrollport itself, an
+ * ancestor between the two, or a sibling laid out before it. All three are
+ * observed. The element itself is deliberately NOT observed — it is the thing
+ * being written, and observing it is the loop.
+ *
+ * A sibling ADDED after mount is the known gap: the observer set is built once
+ * per attach. In practice the content above a filling element is a page header,
+ * not a live list, and a `key`ed remount covers the rest.
+ */
+export declare function useFillHeight(enabled?: boolean): RefCallback<HTMLElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",