@danxbot/ui 2.3.0 → 2.4.0

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

@@ -8,6 +8,8 @@ declare const button: import("tailwind-variants").TVReturnType<{
         subtle: string[];
         outline: string[];
         ghost: string[];
+        "ghost-danger": string[];
+        "outline-danger": string[];
         danger: string[];
         "danger-subtle": string[];
         link: string[];
@@ -34,6 +36,8 @@ declare const button: import("tailwind-variants").TVReturnType<{
         subtle: string[];
         outline: string[];
         ghost: string[];
+        "ghost-danger": string[];
+        "outline-danger": string[];
         danger: string[];
         "danger-subtle": string[];
         link: string[];
@@ -60,6 +64,8 @@ declare const button: import("tailwind-variants").TVReturnType<{
         subtle: string[];
         outline: string[];
         ghost: string[];
+        "ghost-danger": string[];
+        "outline-danger": string[];
         danger: string[];
         "danger-subtle": string[];
         link: string[];
@@ -99,5 +105,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
     trailingIcon?: ReactNode;
     ref?: Ref<HTMLButtonElement>;
 }
-export declare function Button({ className, variant, size, iconOnly, fullWidth, render, loading, leadingIcon, trailingIcon, disabled, children, onPointerDown, ref, ...props }: ButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function Button({ className, variant, size, iconOnly, fullWidth, render, loading, leadingIcon, trailingIcon, disabled, children, onPointerDown, ref, "aria-disabled": ariaDisabled, ...props }: ButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { button as buttonVariants };

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

@@ -0,0 +1,56 @@
+import type { ReactNode, Ref } from "react";
+import { type ButtonProps } from "./Button";
+/** Which `Button` variant backs each (variant, tone) pair. */
+declare const VARIANT_FOR: {
+    readonly ghost: {
+        readonly neutral: "ghost";
+        readonly danger: "ghost-danger";
+    };
+    readonly subtle: {
+        readonly neutral: "subtle";
+        readonly danger: "danger-subtle";
+    };
+    readonly outline: {
+        readonly neutral: "outline";
+        readonly danger: "outline-danger";
+    };
+    readonly solid: {
+        readonly neutral: "solid";
+        readonly danger: "danger";
+    };
+};
+export type IconButtonVariant = keyof typeof VARIANT_FOR;
+export type IconButtonTone = "neutral" | "danger";
+export interface IconButtonProps extends Omit<ButtonProps, "children" | "iconOnly" | "leadingIcon" | "trailingIcon" | "variant" | "aria-label" | "disabled" | "aria-disabled"> {
+    /** The glyph. Rendered `aria-hidden` — the name comes from `label`. */
+    icon: ReactNode;
+    /**
+     * The accessible name, and the tooltip text. REQUIRED — an icon carries no
+     * text, so there is no other source for it.
+     *
+     * Name the ACTION and its object ("Delete Phase 2"), not the picture
+     * ("Trash"). It is read aloud in a list of controls where nothing else
+     * distinguishes one row's delete from another's.
+     */
+    label: string;
+    /** Visual weight. Defaults to `ghost` — the right resting state in a row. */
+    variant?: IconButtonVariant;
+    /** `danger` makes the hover destructive. Resting state is unchanged. */
+    tone?: IconButtonTone;
+    /**
+     * Unavailable, AND WHY — there is no boolean form. The string is shown in
+     * the tooltip and announced as the control's description, so the refusal is
+     * never silent.
+     */
+    disabledReason?: string;
+    /**
+     * Suppress the tooltip. For the rare control already named in adjacent
+     * visible text, where a tooltip would only repeat it. The `aria-label` is
+     * unaffected — the name is never optional.
+     */
+    hideTooltip?: boolean;
+    tooltipSide?: "top" | "bottom" | "left" | "right";
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function IconButton({ icon, label, variant, tone, size, disabledReason, hideTooltip, tooltipSide, className, onClick, ...props }: IconButtonProps): import("react").JSX.Element;
+export {};

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

@@ -14,8 +14,12 @@ export interface DragDropContextValue {
      */
     instructionsId: string;
     /**
-     * True while a `<DragDropOverlay>` is mounted, i.e. while something else is
-     * able to carry the card. It decides whether an item vacates its own slot.
+     * 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.
+     *
+     * 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.
      */
     lifted: boolean;
     registerOverlay: () => () => void;

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

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

@@ -1,4 +1,4 @@
-import type { ContainerId, DragAxis, DragState, LayoutSnapshot } from "../../lib/dnd";
+import type { ContainerId, DragAxis, DragState, LayoutSnapshot, Point } from "../../lib/dnd";
 export interface ContainerShift {
     axis: DragAxis;
     /** Items in this container with the carried one removed. */
@@ -26,14 +26,54 @@ 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.
+ *
+ * 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.
+ *
+ * `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.
+ *
+ * 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.
+ */
+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;
+};
 /**
  * Everything one container needs to render the shift, or null when no drag is
  * in flight and nothing should move.
  *
- * `lifted` says whether something else is carrying the card — a
- * `<DragDropOverlay>` is mounted. It decides ONLY whether the home slot closes,
- * and the reason is not cosmetic: with no overlay the card is still sitting in
- * its own slot, so closing that slot slides a neighbour underneath it.
+ * 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.
  */
 export declare function containerShift(layout: LayoutSnapshot | null, state: DragState, container: ContainerId, lifted: boolean): ContainerShift | null;
 /** A rect in viewport coordinates. */

package/dist/types/components/provenance/ProvenanceBadge.d.ts

@@ -1,12 +1,22 @@
 import type { ProvenanceState } from "./types";
+/** How much of the state the badge draws. The accessible name is the same either way. */
+export type ProvenanceBadgeAppearance = "word" | "icon";
 export interface ProvenanceBadgeProps {
     state: ProvenanceState;
     /** Render the badge even for states that are quiet by default. */
     alwaysShow?: boolean;
+    /**
+     * `"word"` (default) draws the icon and the word. `"icon"` draws the glyph in
+     * the same coloured box and keeps the word as visually-hidden text, so the
+     * announced name does not change.
+     *
+     * `"icon"` also lifts the quiet rule — see the note at the top of this file.
+     */
+    appearance?: ProvenanceBadgeAppearance;
     size?: "sm" | "md";
     className?: string;
 }
-export declare function ProvenanceBadge({ state, alwaysShow, size, className, }: ProvenanceBadgeProps): import("react").JSX.Element | null;
+export declare function ProvenanceBadge({ state, alwaysShow, appearance, size, className, }: ProvenanceBadgeProps): import("react").JSX.Element | null;
 /** The words this library uses for each state. Exported so a consumer's own
     filters and legends read the same as its badges. */
 export declare function provenanceStateLabel(state: ProvenanceState): string;

package/dist/types/components/provenance/ProvenanceDisclosure.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
 import type { ProvenanceRecord } from "./types";
+/** How much of the verification state the trigger draws. */
+export type ProvenanceTriggerBadge = "icon" | "word" | "none";
 export interface ProvenanceDisclosureProps {
     record: ProvenanceRecord;
     /**
@@ -14,6 +16,49 @@ export interface ProvenanceDisclosureProps {
     emptyLabel?: string;
     /** Shown in place of the value when the viewer may not see it. */
     redactedLabel?: string;
+    /**
+     * How the state reads ON THE TRIGGER. The panel always shows icon + word.
+     *
+     * - `"word"` (default) — today's behaviour exactly, quiet rule included: the
+     *   exceptions wear a worded badge and `verified` wears nothing.
+     * - `"icon"` — the glyph alone, in the same coloured box, for ALL FOUR states
+     *   including `verified`. A dense table of values wants a legend, not four
+     *   hundred sentences; the word is still announced (see below).
+     * - `"none"` — no badge at all, for a consumer drawing the state itself in an
+     *   adjacent column. The state then leaves the accessible name too, because
+     *   the name says what the trigger says and nothing more.
+     */
+    triggerBadge?: ProvenanceTriggerBadge;
+    /**
+     * Let a long value wrap onto more lines instead of truncating.
+     *
+     * Off by default because the component's home is a dense table where a
+     * ragged row height is worse than an ellipsis. On by default would be wrong;
+     * unavailable was also wrong — a value clipped at `No — typed notes only, at
+     * gu…` in a 900px column is not a value, and there was no way in.
+     */
+    valueWrap?: boolean;
+    /**
+     * Draw something else in place of the value — an id chip, an avatar, a
+     * sparkline — and anchor the panel to THAT.
+     *
+     * NOT a whole-trigger slot, and the difference matters. This node becomes the
+     * CONTENT of the disclosure's own button; the button, its focus ring, its tap
+     * target and its accessible name stay with the component. A prop that took
+     * the control itself would hand a consumer all four obligations at once, and
+     * the observed result of consumers owning this one is a chip that announces a
+     * bare id ("FM-002") with no field, no value and no state — which is the
+     * exact defect this library has now shipped three times.
+     *
+     * Pass presentational markup. An interactive element here nests a control
+     * inside a control, which is invalid and unfocusable.
+     *
+     * The field, the state and the "show where this came from" affordance are
+     * still composed around it, so the announced name is the same as any other
+     * disclosure's. The dotted underline is dropped — a chip carries its own
+     * edges and does not want a second one.
+     */
+    triggerContent?: ReactNode;
     className?: string;
 }
-export declare function ProvenanceDisclosure({ record, actions, emptyLabel, redactedLabel, className, }: ProvenanceDisclosureProps): import("react").JSX.Element;
+export declare function ProvenanceDisclosure({ record, actions, emptyLabel, redactedLabel, triggerBadge, valueWrap, triggerContent, className, }: ProvenanceDisclosureProps): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -13,6 +13,7 @@ export { Icon, type IconProps, type IconSize, type IconName } from "./components
 export { registerIcon, registerIcons, getIcon, hasIcon, iconNames, type IconNode, type IconNodeChild, } from "./lib/icons";
 export { coreIcons, type CoreIconName } from "./icons/data";
 export { Button, buttonVariants, type ButtonProps } from "./components/Button";
+export { IconButton, type IconButtonProps, type IconButtonVariant, type IconButtonTone, } from "./components/IconButton";
 export { Badge, badgeVariants, type BadgeProps } from "./components/Badge";
 export { Spinner, type SpinnerProps } from "./components/Spinner";
 export { Skeleton, SkeletonText, LoadingOverlay, type SkeletonProps, type SkeletonTextProps, type LoadingOverlayProps, } from "./components/Loading";
@@ -98,5 +99,5 @@ export { AmbiguousTimeError, addDays, addDuration, addMonths, atMidnight, atTime
 export { allDayBandSegment, dayKey, daySlots, isAllDay, packBand, packLanes, snapFractionToInstant, timeSegments, timedBandSegment, type AllDayEvent, type BandInput, type BandOptions, type BandPlacement, type BandResult, type BandSegment, type CalendarEvent, type CalendarEventId, type CalendarView, type DaySlot, type DragKind, type EventDraft, type EventPalette, type LaneInput, type LaneOptions, type LanePlacement, type PaletteEntry, type TimeSegment, type TimedEvent, type VisibleRange, } from "./lib/calendar";
 export { RBACProvider, useRBAC, AccountMenu, DevToolsPopover, RolePermissionMatrix, ProfilePage, RolesPermissionsPage, type RBACProviderProps, type RBACHookResult, type AccountMenuProps, type DevToolsPopoverProps, type RolePermissionMatrixProps, type Permission, type Role, type User, type Team, type TeamMembership, } from "./components/rbac";
 export { UseCaseCard, RoadmapItemCard, RoadmapSwimlaneBoard, UseCaseLedgerPage, RoadmapPage, PhaseManager, TrackManager, deriveRoadmapItemStatus, isFullyBuilt, isUnbuilt, trackIds, trackProgress, toneForIndex, CATEGORY_TONES, type Domain, type Phase, type Track, type RoadmapItem, type RoadmapItemStatus, type UseCase, type UseCaseStatus, type UseCaseDecision, type UseCaseCardProps, type RoadmapItemCardProps, type RoadmapSwimlaneBoardProps, type UseCaseLedgerPageProps, type RoadmapPageProps, type PhaseManagerProps, type TrackManagerProps, } from "./components/roadmap";
-export { ProvenanceDisclosure, ProvenanceBadge, ConfidenceMeter, provenanceStateLabel, confidenceBand, type ProvenanceRecord, type ProvenanceState, type ProvenanceSource, type ProvenanceCheck, type ProvenanceCall, type ProvenanceSignoff, type ConfidenceBand, type ProvenanceDisclosureProps, type ProvenanceBadgeProps, type ConfidenceMeterProps, } from "./components/provenance";
+export { ProvenanceDisclosure, ProvenanceBadge, ConfidenceMeter, provenanceStateLabel, confidenceBand, type ProvenanceRecord, type ProvenanceState, type ProvenanceSource, type ProvenanceCheck, type ProvenanceCall, type ProvenanceSignoff, type ConfidenceBand, type ProvenanceDisclosureProps, type ProvenanceTriggerBadge, type ProvenanceBadgeProps, type ProvenanceBadgeAppearance, type ConfidenceMeterProps, } from "./components/provenance";
 export { createSimStore, resetSimStores, useSimSettings, setSimSettings, getNetworkSpeed, getDataSource, simulateLatency, SimNetworkError, type SimStore, type SimStoreOptions, type SimSettings, type NetworkSpeed, type DataSource, type SimNamespace, } from "./lib/sim";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "2.3.0",
+  "version": "2.4.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",
+    "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",
     "audit:axtree": "node scripts/audit-axtree.mjs",
     "audit:mutations": "node scripts/audit-mutations.mjs",
     "audit:palette": "node scripts/audit-palette.mjs",