@danxbot/ui 2.7.1 → 2.9.0

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

@@ -55,6 +55,57 @@ export interface DragDropItemProps {
     children?: ReactNode;
 }
 export declare function DragDropItem({ id, index, label, className, children, }: DragDropItemProps): import("react").JSX.Element;
+export interface DragDropSurfaceProps {
+    /**
+     * Accessible name, used ONLY in the case where the surface has to become
+     * focusable itself — see the banner. Defaults to the item's label.
+     */
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * THE WHOLE ROW IS THE DRAG SOURCE. The alternative to `DragDropHandle`, and
+ * the right one wherever every row is draggable by definition.
+ *
+ * A GRIP IS A CHOICE ABOUT WHICH ROWS MOVE. On a list where some rows are fixed
+ * and some are not, the grip is the affordance that says which — and it is also
+ * the only way to keep a row full of buttons from starting a drag from every
+ * one of them. On a kanban board neither is true: every card moves, and the
+ * card's own job is to open a record. Reported, in the user's words: "I should
+ * be able to drag anywhere on the card and it should drag the card. Get rid of
+ * the drag handle entirely. Cards are just draggable. Click opens them, drag
+ * drags them."
+ *
+ * THE HARD PART IS NOT THE DRAG, IT IS THE CLICK. A card that is both a drag
+ * source and a link has to tell a press-that-moved from a press-that-did-not,
+ * and it has to do it without a threshold invented here — the engine already
+ * has one, tuned against real devices (`PointerActivation`: 5px for a mouse, a
+ * 250ms dwell for a finger). A press under that stays a click and opens the
+ * record; a press over it becomes a drag AND has its trailing `click`
+ * swallowed, in `sensors/gesture.ts`, because the browser fires one either way.
+ *
+ * THE KEYBOARD IS THE HALF THAT IS EASY TO LOSE, and losing it is not
+ * acceptable — a board that can only be reordered with a mouse is a board some
+ * people cannot reorder at all. Two things keep it:
+ *
+ *   THE KEYS ARE SPLIT. Space picks the card up, Enter is left to whatever
+ *   control has focus inside it. The keyboard sensor reads that off the event's
+ *   target rather than from a flag here, so a grip (where the source IS the
+ *   focused control) keeps both keys and a card gets the split, with nothing to
+ *   configure and nothing to forget.
+ *
+ *   THE INSTRUCTIONS FOLLOW THE FOCUS. A grip carried `aria-describedby`
+ *   itself. A card's focus lands on the consumer's own control — a
+ *   `RecordCard`'s button — which this component did not render and cannot pass
+ *   props to, so the description is attached to that element directly and
+ *   removed again on unmount. A card with NO focusable control of its own has
+ *   nothing to describe and no way into a drag, so the surface becomes the
+ *   focusable control instead. Both branches are measured by
+ *   `probe-kanban.mjs`; without the second one, a board of plain cards would be
+ *   keyboard-inaccessible with nothing to see and nothing to fail.
+ */
+export declare function DragDropSurface({ label, className, children }: DragDropSurfaceProps): import("react").JSX.Element;
 export interface DragDropHandleProps {
     /** Accessible name. Defaults to `Reorder <the item's label>`. */
     label?: string;

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

@@ -1,4 +1,4 @@
-import type { ReactNode, Ref } from "react";
+import { type ReactNode, type Ref } from "react";
 import { type VariantProps } from "tailwind-variants";
 declare const bar: import("tailwind-variants").TVReturnType<{
     size: {
@@ -151,8 +151,28 @@ declare const ring: import("tailwind-variants").TVReturnType<{
         lg: "size-24";
     };
 }, undefined>>;
-export interface ProgressRingProps extends VariantProps<typeof ring> {
-    value: number | null;
+/** The tones a bar, meter or ring arc can be drawn in. */
+export type ProgressTone = NonNullable<VariantProps<typeof bar>["tone"]>;
+/** One arc of a segmented ring: how much, in what tone, called what. */
+export interface ProgressRingSegment {
+    /**
+     * How much of `total` this arc covers, in the caller's own units — tokens,
+     * megabytes, jobs. Never a percentage of its own accord; the denominator is
+     * `total` and nothing else.
+     */
+    value: number;
+    tone: ProgressTone;
+    /**
+     * What this arc IS, in words.
+     *
+     * Not decorative and not optional: it is read out as part of the ring's
+     * description, and it is the only thing a legend beside the ring has to name
+     * a colour by. A segmented ring whose arcs had no names would encode its
+     * entire breakdown in hue alone.
+     */
+    label: string;
+}
+interface ProgressRingBase extends VariantProps<typeof ring> {
     /**
      * REQUIRED, and a plain string.
      *
@@ -163,16 +183,108 @@ export interface ProgressRingProps extends VariantProps<typeof ring> {
      * of this component existing.
      */
     label: string;
-    tone?: VariantProps<typeof bar>["tone"];
+    /**
+     * Draw the number in the middle. On by default, which is the behaviour this
+     * component has always had.
+     *
+     * Worth turning off on a `sm` ring used as an affordance rather than a
+     * readout — two digits inside a 40px circle is a number nobody reads and a
+     * ring nobody can see past.
+     */
+    showValue?: boolean;
     className?: string;
 }
+/** A ring showing ONE number. `null` is "working, length unknown". */
+export interface ProgressRingValueProps extends ProgressRingBase {
+    value: number | null;
+    tone?: ProgressTone;
+    segments?: never;
+    total?: never;
+    remainderLabel?: never;
+}
+/**
+ * A ring showing a BREAKDOWN: contiguous arcs around one circle.
+ *
+ * The two shapes are a union rather than two optional props, so passing both
+ * `value` and `segments` does not type-check. There is no precedence rule to
+ * learn and no silent winner.
+ */
+export interface ProgressRingSegmentsProps extends ProgressRingBase {
+    /** Drawn in order, starting at twelve o'clock and running clockwise. */
+    segments: ProgressRingSegment[];
+    /**
+     * The whole the segments are parts OF, in the same units as their values.
+     *
+     * REQUIRED, with no default. A default of 100 would read as "the values are
+     * percentages" and quietly turn a ring of token counts into a ring that
+     * overflows on its first render — and the denominator is the one fact that
+     * makes a remainder arc mean anything.
+     *
+     * SEGMENTS SUMMING TO MORE THAN THIS ARE **CLAMPED, NOT NORMALISED** — see
+     * the note above `layoutRingSegments`.
+     */
+    total: number;
+    /**
+     * What the unfilled part of the ring IS, for the description: "Remaining",
+     * "Free", "Unallocated".
+     *
+     * The arc itself needs no drawing — it is the track showing through — but it
+     * still needs a name, because "72% used" and "28% free" are the same fact
+     * and readers act on different halves of it.
+     */
+    remainderLabel?: string;
+    value?: never;
+    tone?: never;
+}
+export type ProgressRingProps = ProgressRingValueProps | ProgressRingSegmentsProps;
+/** One arc, resolved to the two fractions an SVG dash actually needs. */
+export interface ProgressRingArc {
+    label: string;
+    tone: ProgressTone;
+    /** The segment's own magnitude, in caller units, before any clamping. */
+    value: number;
+    /** Where the arc begins, as a fraction of the circumference. */
+    start: number;
+    /** How far it is drawn for, as a fraction, with its gap already taken off. */
+    length: number;
+}
+export interface ProgressRingLayout {
+    arcs: ProgressRingArc[];
+    /** Every segment added up, in caller units. NOT clamped — this is the fact. */
+    used: number;
+    /** How far `used` overshoots `total`. Zero when the segments fit. */
+    overflow: number;
+}
+export declare function layoutRingSegments(segments: ProgressRingSegment[], total: number): ProgressRingLayout;
 /**
  * Circular progress, for when the number belongs INSIDE the indicator —
  * a tile, a card corner, a stat.
  *
+ * Two shapes, chosen by which prop is passed:
+ *
+ * ```tsx
+ * <ProgressRing value={62} label="Context used" />
+ * <ProgressRing
+ *   label="Context used"
+ *   total={200_000}
+ *   segments={[
+ *     { label: "System prompt", value: 12_000, tone: "brand" },
+ *     { label: "Conversation", value: 84_000, tone: "accent" },
+ *   ]}
+ *   remainderLabel="Free"
+ * />
+ * ```
+ *
  * Uses `pathLength="1"` so the dash numbers are fractions rather than
  * circumference maths: the same two values work at any radius, and it dodges
  * the Safari bug where a zoomed SVG rescales absolute dash lengths.
+ *
+ * THE ROLE IS `progressbar` IN BOTH SHAPES, and stays that way even though a
+ * breakdown of a budget is arguably a gauge. The role is a property of the
+ * component a caller reached for, not of the data they handed it — a component
+ * that announced itself as a different thing depending on the shape of its
+ * props would be two components sharing one name. A caller whose fact is a
+ * gauge has `Meter`.
  */
-export declare function ProgressRing({ value, label, size, tone, className, }: ProgressRingProps): import("react").JSX.Element;
+export declare function ProgressRing(props: ProgressRingProps): import("react").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import type { ReactNode, Ref } from "react";
+import { type ReactNode, type Ref } from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { type VariantProps } from "tailwind-variants";
 declare const trigger: import("tailwind-variants").TVReturnType<{
@@ -28,7 +28,7 @@ export interface SelectProps<Value> extends Omit<BaseSelect.Root.Props<Value, bo
     children: ReactNode;
     ref?: Ref<HTMLButtonElement>;
 }
-export declare function Select<Value>({ size, placeholder, className, children, ref, "aria-label": ariaLabel, ...props }: SelectProps<Value>): import("react").JSX.Element;
+export declare function Select<Value>({ size, placeholder, className, children, ref, items, "aria-label": ariaLabel, ...props }: SelectProps<Value>): import("react").JSX.Element;
 export interface SelectItemProps extends Omit<BaseSelect.Item.Props, "className"> {
     className?: string;
     ref?: Ref<HTMLDivElement>;

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

@@ -2,6 +2,11 @@ import type { ReactNode, Ref } from "react";
 import { type VariantProps } from "tailwind-variants";
 declare const stat: import("tailwind-variants").TVReturnType<{
     size: {
+        xs: {
+            label: string;
+            hint: string;
+            value: string;
+        };
         sm: {
             value: string;
         };
@@ -21,6 +26,11 @@ declare const stat: import("tailwind-variants").TVReturnType<{
     hint: string;
 }, undefined, {
     size: {
+        xs: {
+            label: string;
+            hint: string;
+            value: string;
+        };
         sm: {
             value: string;
         };
@@ -40,6 +50,11 @@ declare const stat: import("tailwind-variants").TVReturnType<{
     hint: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     size: {
+        xs: {
+            label: string;
+            hint: string;
+            value: string;
+        };
         sm: {
             value: string;
         };

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

@@ -1,4 +1,4 @@
-import type { ReactNode, Ref } from "react";
+import { type ReactNode, type Ref } from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import { type VariantProps } from "tailwind-variants";
 declare const tabs: import("tailwind-variants").TVReturnType<{

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

@@ -6,6 +6,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
             marker: string;
             landing: string;
             handle: string;
+            surface: string;
         };
         x: {
             container: string;
@@ -13,6 +14,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
             marker: string;
             landing: string;
             handle: string;
+            surface: string;
         };
     };
     moving: {
@@ -36,6 +38,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
     shift: string;
     marker: string[];
     landing: string;
+    surface: string[];
     handle: string[];
     overlay: string[];
 }, undefined, {
@@ -46,6 +49,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
             marker: string;
             landing: string;
             handle: string;
+            surface: string;
         };
         x: {
             container: string;
@@ -53,6 +57,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
             marker: string;
             landing: string;
             handle: string;
+            surface: string;
         };
     };
     moving: {
@@ -76,6 +81,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
     shift: string;
     marker: string[];
     landing: string;
+    surface: string[];
     handle: string[];
     overlay: string[];
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -86,6 +92,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
             marker: string;
             landing: string;
             handle: string;
+            surface: string;
         };
         x: {
             container: string;
@@ -93,6 +100,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
             marker: string;
             landing: string;
             handle: string;
+            surface: string;
         };
     };
     moving: {
@@ -116,6 +124,7 @@ export declare const dnd: import("tailwind-variants").TVReturnType<{
     shift: string;
     marker: string[];
     landing: string;
+    surface: string[];
     handle: string[];
     overlay: string[];
 }>>;

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

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

package/dist/types/index.d.ts

@@ -48,7 +48,7 @@ export { Toggle, ToggleGroup, Toolbar, ToolbarSeparator, type ToggleProps, type
 export { Separator, ScrollArea, Collapsible, EmptyState, Timeline, type SeparatorProps, type ScrollAreaProps, type CollapsibleProps, type EmptyStateProps, type TimelineProps, type TimelineItem, } from "./components/Surface";
 export { PanelGroup, Panel, PanelResizer, type PanelGroupProps, type PanelProps, type PanelResizerProps, type PanelDirection, type PanelNarrowMode, } from "./components/Panel";
 export { Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps, type AvatarStatus, } from "./components/Avatar";
-export { Progress, Meter, ProgressRing, type ProgressProps, type MeterProps, type ProgressRingProps, } from "./components/Progress";
+export { Progress, Meter, ProgressRing, type ProgressProps, type MeterProps, type ProgressRingProps, type ProgressRingValueProps, type ProgressRingSegmentsProps, type ProgressRingSegment, type ProgressTone, } from "./components/Progress";
 export { Stat, Sparkline, type StatProps, type SparklineProps, type StatTrend, type StatSentiment, } from "./components/Stat";
 export { DataTable, TableEmptyState, CellStack, type DataTableProps, type TableDensity, } from "./components/Table";
 export { CodeEditor, CodeEditorToolbar, CodeEditorCaption, CodeEditorCopyButton, CodeEditorWrapToggle, CodeEditorViewSwitch, type CodeEditorProps, type CodeEditorToolbarProps, type CodeEditorView, } from "./components/CodeEditor";
@@ -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, type DragDropProps, type DragDropContainerProps, type DragDropItemProps, type DragDropHandleProps, } from "./components/DragDrop";
+export { DragDrop, DragDropContainer, DragDropItem, DragDropHandle, DragDropSurface, type DragDropProps, type DragDropContainerProps, type DragDropItemProps, type DragDropHandleProps, type DragDropSurfaceProps, } 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/dist/types/lib/dnd/sensors/keyboard.d.ts

@@ -13,7 +13,11 @@ import type { DragAxis, DragId } from "../types";
  *
  * THE KEY MAP IS FIXED BY THE PROJECT CONTRACT, not by this file:
  *
- *   Space / Enter  pick up on a focused handle; drop when already carrying
+ *   Space          pick up; drop when already carrying
+ *   Enter          the same, but ONLY when the drag source is itself the
+ *                  focused control. On a whole-card source the key arrives by
+ *                  bubbling from the card's own button, and Enter is that
+ *                  button's — see the note at the check.
  *   Escape         cancel — handled by `attachSessionWindowListeners`, NOT here
  *   Along the axis step the insertion point inside the current container
  *   Across it      move to the previous / next container

package/dist/types/lib/motion.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The one reduced-motion answer, read from `--motion-scale`.
+ *
+ * WHY THE TOKEN AND NOT `matchMedia` DIRECTLY. `--motion-scale` is the single
+ * place where the OS media query and the app-level `data-motion` override are
+ * reconciled (see `styles/motion.css`). Reading the media query alone would
+ * ignore the in-app preference control, so a user who set "reduced" in the app
+ * on a machine with no OS setting would get full-speed motion — the exact case
+ * that control exists for. It is also why a raw `motion-reduce:` utility is the
+ * wrong tool for anything this system builds (see the note on `Choice`'s
+ * thumb): that variant reads the OS query alone and fires even for someone who
+ * has explicitly chosen `data-motion="full"`.
+ *
+ * ONLY THE COMPARISON IS EVER USED, never the value. Multiplying a SPEED by the
+ * scale would be backwards — a slower auto-scroll ramp holds the user at the
+ * edge longer and produces MORE motion overall — and a scroll has no "half"
+ * anyway: it is smooth or it is a jump.
+ *
+ * ITS OWN MODULE because two unrelated layers need it. The drag engine's edge
+ * auto-scroll had the only copy, and the tab strip's reveal-the-active-tab
+ * scroll needs exactly the same question answered exactly the same way. A
+ * second copy is a second place for the token name to go stale.
+ */
+export declare function reducedMotion(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "2.7.1",
+  "version": "2.9.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",
@@ -69,7 +69,7 @@
     "gates": "npm run shoot && npm run a11y && node scripts/shoot-overlays.mjs && npm run probe",
     "a11y": "node scripts/a11y-scan.mjs",
     "shoot": "node scripts/shoot.mjs",
-    "probe": "node scripts/probe-scale.mjs && node scripts/probe-switch.mjs && node scripts/probe-slider.mjs && node scripts/probe-panel.mjs && node scripts/probe-popover-width.mjs && node scripts/probe-api.mjs && node scripts/probe-api-live.mjs",
+    "probe": "node scripts/probe-scale.mjs && node scripts/probe-switch.mjs && node scripts/probe-slider.mjs && node scripts/probe-panel.mjs && node scripts/probe-popover-width.mjs && node scripts/probe-api.mjs && node scripts/probe-api-live.mjs && node scripts/probe-tabs-overflow.mjs && node scripts/probe-stat-row.mjs",
     "sync": "node scripts/sync.mjs",
     "visual": "node scripts/visual-docker.mjs",
     "visual:update": "node scripts/visual-docker.mjs --update-snapshots",