@danxbot/ui 13.1.0 → 13.3.0

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

@@ -21,6 +21,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
         md: "h-control-md rounded-md px-5 text-sm";
         lg: "h-control-lg rounded-lg px-6 text-md";
         xl: "h-control-xl rounded-lg px-8 text-lg";
+        list: "h-auto w-full items-start justify-start gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-normal";
     };
     iconOnly: {
         true: "px-0 aspect-square";
@@ -50,6 +51,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
         md: "h-control-md rounded-md px-5 text-sm";
         lg: "h-control-lg rounded-lg px-6 text-md";
         xl: "h-control-xl rounded-lg px-8 text-lg";
+        list: "h-auto w-full items-start justify-start gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-normal";
     };
     iconOnly: {
         true: "px-0 aspect-square";
@@ -79,6 +81,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
         md: "h-control-md rounded-md px-5 text-sm";
         lg: "h-control-lg rounded-lg px-6 text-md";
         xl: "h-control-xl rounded-lg px-8 text-lg";
+        list: "h-auto w-full items-start justify-start gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-normal";
     };
     iconOnly: {
         true: "px-0 aspect-square";
@@ -146,3 +149,42 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
 }
 export declare function Button({ className, variant, size, iconOnly, fullWidth, render, loading, leadingIcon, trailingIcon, disabled, children, onPointerDown, onClick, disabledReason, disabledReasonTooltip, ref, "aria-disabled": ariaDisabled, ...props }: ButtonProps): import("react").JSX.Element;
 export { button as buttonVariants };
+export interface ListItemButtonProps extends Omit<ButtonProps, "size" | "iconOnly" | "fullWidth" | "children"> {
+    /**
+     * The row's bold leading identifier — an actor name, a from-state, a
+     * category label. Always rendered `font-semibold`, on the same wrapping
+     * line as `detail`.
+     */
+    leading: ReactNode;
+    /**
+     * Secondary text following `leading` on the SAME wrapping line — the
+     * action, the target, whatever finishes the sentence `leading` starts.
+     * Rendered `font-normal`; wraps together with `leading` as one line of
+     * text, not as a separate flex item.
+     */
+    detail?: ReactNode;
+    /**
+     * A muted line rendered on its OWN row below `leading`/`detail` — a
+     * trigger, a guard clause, any extra context. Never inlined with the line
+     * above, unlike `detail`.
+     */
+    subline?: ReactNode;
+    /**
+     * Marks this row as the current selection. Stamps `data-selected="true"`
+     * on the rendered `<button>` (omitted entirely, not `"false"`, when unset —
+     * the same convention the native `docs-step-list__item` buttons this
+     * replaces already used, so an existing `[data-selected]` CSS selector
+     * keeps working unchanged) and applies the library's own selected
+     * treatment rather than leaving every consumer to invent one.
+     */
+    selected?: boolean;
+}
+/**
+ * A list-item trigger for multi-line, rich-content rows that `Button`'s
+ * fixed single-line sizes cannot fit — see the file header above.
+ *
+ * `fullWidth` is not a prop here: a list-item row always spans its `<li>`,
+ * which is the entire reason this exists, so it's forced rather than left
+ * for every caller to remember.
+ */
+export declare function ListItemButton({ leading, detail, subline, selected, variant, className, ...props }: ListItemButtonProps): import("react").JSX.Element;

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

@@ -1,4 +1,5 @@
-import type { ReactNode, Ref } from "react";
+import type { ComponentProps, ReactNode, Ref } from "react";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 export interface SeparatorProps {
     orientation?: "horizontal" | "vertical";
     /** Text or a chip centred on the line — "or", "Today", a count. */
@@ -33,6 +34,37 @@ export interface ScrollAreaProps {
  * present when you are steering, invisible when you are reading.
  */
 export declare function ScrollArea({ children, maxHeight, className }: ScrollAreaProps): import("react").JSX.Element;
+export interface CollapsibleRootProps extends Omit<ComponentProps<typeof BaseCollapsible.Root>, "render"> {
+}
+/**
+ * Groups a `CollapsibleTrigger` and a `CollapsiblePanel` (or several of
+ * either) that can live anywhere as siblings underneath it — the headless
+ * counterpart to the fully-composed `Collapsible` below. Renders a plain
+ * `<div>` (Base UI's own default); pass `className` for whatever layout the
+ * trigger row and panel need to share, or leave it unset to render no box
+ * at all beyond that default.
+ */
+export declare function CollapsibleRoot({ className, ...props }: CollapsibleRootProps): import("react").JSX.Element;
+export interface CollapsibleTriggerProps extends Omit<ComponentProps<typeof BaseCollapsible.Trigger>, "render"> {
+}
+/**
+ * The bare trigger `<button>` half of the headless `Collapsible` parts —
+ * real Base UI `aria-controls`/`aria-expanded` wiring, zero imposed layout.
+ * Unlike `Collapsible`'s own trigger, this draws no chevron and forces no
+ * flex row: the caller's `children` are the ENTIRE button content, laid out
+ * however the caller wants (e.g. sharing a row with an unrelated `action`
+ * control that is NOT itself part of this button, rendered as a sibling
+ * outside it).
+ */
+export declare function CollapsibleTrigger({ className, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+export interface CollapsiblePanelProps extends Omit<ComponentProps<typeof BaseCollapsible.Panel>, "render"> {
+}
+/**
+ * The bare panel half of the headless `Collapsible` parts — same
+ * height-animation recipe `Collapsible`'s own panel uses, with no forced
+ * inner padding wrapper, so the caller controls its own spacing.
+ */
+export declare function CollapsiblePanel({ className, ...props }: CollapsiblePanelProps): import("react").JSX.Element;
 export interface CollapsibleProps {
     /**
      * The trigger's CONTENT — not a button.
@@ -64,7 +96,10 @@ export interface CollapsibleProps {
  * One disclosure, without the accordion around it.
  *
  * Height animates from `--collapsible-panel-height`, which Base UI publishes —
- * no measuring, no effect, no frame of lag on first open.
+ * no measuring, no effect, no frame of lag on first open. Built on the
+ * headless `CollapsibleRoot`/`CollapsibleTrigger`/`CollapsiblePanel` parts
+ * above — see their own doc if this fixed trigger-row-plus-nested-panel
+ * shape doesn't fit your consumer.
  */
 export declare function Collapsible({ trigger, defaultOpen, open, onOpenChange, triggerClassName, chevron, children, className, }: CollapsibleProps): import("react").JSX.Element;
 export interface EmptyStateProps {

package/dist/types/components/focus-web/FocusWeb.d.ts

@@ -0,0 +1,3 @@
+import type { FocusWebProps } from "./types";
+export type { FocusWebProps } from "./types";
+export declare function FocusWeb<Extra = unknown>({ center, ring, parent, onSelect, onUp, renderNode, label, className, }: FocusWebProps<Extra>): import("react").JSX.Element;

package/dist/types/components/focus-web/index.d.ts

@@ -0,0 +1,4 @@
+export { FocusWeb } from "./FocusWeb";
+export { CENTER_POSITION, PARENT_POSITION, WIDE_RING_THRESHOLD, layoutRing } from "./layout";
+export type { PlacedRingNode } from "./layout";
+export type { FocusNodeRenderContext, FocusNodeRenderer, FocusNodeRole, FocusWebNode, FocusWebProps, } from "./types";

package/dist/types/components/focus-web/layout.d.ts

@@ -0,0 +1,28 @@
+/** Ids at or below this count get ONE ring; more get two concentric ones. */
+export declare const WIDE_RING_THRESHOLD = 10;
+/** Fixed corner slot for the "up" affordance — matches the legacy page's own
+    placement (`left: 7%, top: 10%`), never part of the ring itself. */
+export declare const PARENT_POSITION: {
+    leftPct: number;
+    topPct: number;
+};
+export declare const CENTER_POSITION: {
+    leftPct: number;
+    topPct: number;
+};
+export interface PlacedRingNode {
+    id: string;
+    leftPct: number;
+    topPct: number;
+    /** Which concentric ring this sits on. `0` (outer) for every node while the
+        ring is at or below `WIDE_RING_THRESHOLD`. */
+    tier: 0 | 1;
+}
+/**
+ * Places `ids` (already in the caller's desired order — see `types.ts`'s
+ * module doc) around one or two concentric rings. Pure and total: an empty
+ * array places nothing, and the result is always the same length as `ids`,
+ * in the SAME order, so a caller can zip it back against its own node array
+ * by index without a lookup.
+ */
+export declare function layoutRing(ids: readonly string[], threshold?: number): PlacedRingNode[];

package/dist/types/components/focus-web/types.d.ts

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import type { CanvasNode } from "../node-canvas/types";
+/**
+ * One node FocusWeb draws — the centre, a ring member, or the "up" parent.
+ * Same `Extra`-carrying shape as `CanvasNode` everywhere else in this library
+ * (`node-canvas/types.ts`'s own module doc explains why): a consumer's own
+ * fields (an icon name, a type, a colour) come back untouched through
+ * `renderNode`, and the library assigns no meaning to any of them.
+ */
+export type FocusWebNode<Extra = unknown> = CanvasNode<Extra>;
+/** Which of the three roles a rendered node is playing this frame. */
+export type FocusNodeRole = "center" | "ring" | "parent";
+/**
+ * What `renderNode` is told about the node it is drawing — structural facts
+ * about the node's place in THIS frame's layout, mirroring
+ * `ExplorerNodeRenderContext` / `NodeRenderContext` elsewhere in the library.
+ */
+export interface FocusNodeRenderContext {
+    role: FocusNodeRole;
+    /** 0-based position in `ring`, in the order the caller supplied. `null` for `center`/`parent`. */
+    index: number | null;
+    /** Which of the (possibly two) concentric rings this ring node sits on — see `layoutRing`. `null` off the ring. */
+    tier: 0 | 1 | null;
+    /** This ring node currently carries the roving tab stop. Always `false` for `center`/`parent` (neither is ring-navigable). */
+    isTabStop: boolean;
+    /**
+     * The viewport is narrow enough (< 640px) that FocusWeb has switched to its
+     * own compact layout (a taller plane, giving a wide two-tier ring more
+     * vertical room to spread into — PLN-12 architecture §4 "works at 375px").
+     * `renderNode` gets this so a custom body can shrink its own icon/label
+     * the same way `DefaultFocusNodeBody` shrinks itself — a body that ignores
+     * it still renders correctly, just at its normal size in less headroom.
+     */
+    compact: boolean;
+}
+export type FocusNodeRenderer<Extra = unknown> = (node: FocusWebNode<Extra>, context: FocusNodeRenderContext) => ReactNode;
+export interface FocusWebProps<Extra = unknown> {
+    /** The node currently centred. Controlled — FocusWeb never picks its own centre. */
+    center: FocusWebNode<Extra>;
+    /**
+     * The centre's one-hop neighbours, already in the exact order to draw.
+     * FocusWeb does not sort, dedupe or reorder this — see the module doc.
+     */
+    ring: readonly FocusWebNode<Extra>[];
+    /** The "up" affordance's target. `null`/`undefined` at the root — no parent, no up button. */
+    parent?: FocusWebNode<Extra> | null;
+    /**
+     * Fired when a ring node is activated (click, or Enter/Space while it
+     * carries the roving tab stop). FocusWeb does not recentre itself — the
+     * caller responds by changing `center`/`ring`/`parent`, which is what makes
+     * the position change and glide.
+     */
+    onSelect: (id: string) => void;
+    /**
+     * Fired when the "up" affordance is activated. Ignored (and the button
+     * inert to the keyboard shortcut) while `parent` is absent — see
+     * `FocusWebProps.parent`.
+     */
+    onUp?: () => void;
+    /** Custom node body. Omit for a plain label pill — the same "falls back to
+        label" rule as `CanvasNode.label` everywhere else in this library. */
+    renderNode?: FocusNodeRenderer<Extra>;
+    /** Accessible name for the whole widget (an `aria-label`, `role="group"`). */
+    label: string;
+    className?: string;
+}

package/dist/types/index.d.ts

@@ -13,6 +13,7 @@ export { Icon, type IconProps, type IconSize, type IconName } from "./components
 export { getIcon, hasIcon, iconNames, type IconNode, type IconNodeChild, } from "./lib/icons";
 export { coreIcons, type CoreIconName } from "./icons/data";
 export { Button, type ButtonProps } from "./components/Button";
+export { ListItemButton, type ListItemButtonProps } from "./components/Button";
 export { IconButton, type IconButtonProps, type IconButtonVariant, type IconButtonTone, } from "./components/IconButton";
 export { Badge, type BadgeProps, type BadgeDismiss, } from "./components/Badge";
 export { Callout, type CalloutProps } from "./components/Callout";
@@ -59,7 +60,7 @@ export { PaginationBar, type PaginationBarProps, type PaginationBarMode, } from
 export { Stepper, stepStatus, stepperProgress, advanceBlockReason, assertSteps, type StepperProps, type Step, type StepStatus, type StepperProgress, } from "./components/stepper";
 export { StatusChecklist, tallyChecklist, type StatusChecklistProps, type ChecklistItem, type ChecklistState, type ChecklistTally, } from "./components/checklist";
 export { Toggle, ToggleGroup, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarSeparator, type ToggleProps, type ToggleGroupProps, type ToolbarProps, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, } from "./components/Toggle";
-export { Separator, ScrollArea, Collapsible, EmptyState, Timeline, type SeparatorProps, type ScrollAreaProps, type CollapsibleProps, type EmptyStateProps, type TimelineProps, type TimelineItem, } from "./components/Surface";
+export { Separator, ScrollArea, Collapsible, CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel, EmptyState, Timeline, type SeparatorProps, type ScrollAreaProps, type CollapsibleProps, type CollapsibleRootProps, type CollapsibleTriggerProps, type CollapsiblePanelProps, 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, type ProgressRingValueProps, type ProgressRingSegmentsProps, type ProgressRingSegment, type ProgressTone, } from "./components/Progress";
@@ -130,6 +131,7 @@ export { confidenceLevel, CONFIDENCE_LEVEL_LABELS, type ConfidenceLevel } from "
 export { createSimStore, resetSimStores, useSimSettings, setSimSettings, getNetworkSpeed, getDataSource, simulateLatency, SimNetworkError, type SimStore, type SimStoreOptions, type SimSettings, type NetworkSpeed, type DataSource, type SimNamespace, } from "./lib/sim";
 export { NodeCanvas, LAYOUT_DEFAULTS, edgePath, layoutGraph, neighbourhood, type NodeCanvasProps, type CanvasCycleScope, type CanvasEdge, type CanvasGraph, type CanvasGroup, type CanvasLayout, type CanvasNode, type CanvasOrientation, type CanvasPlacedEdge, type CanvasScope, type LayoutOptions, type NodeRenderContext, type NodeRenderer, type PlacedNode, } from "./components/node-canvas";
 export { GraphExplorer, frameBoxFor, layoutExplorerTree, neighbourhoodTree, CAMERA_DEFAULTS, centerOn, clampScale, fitBox, fitBoxWithFloor, toContentPoint, toScreenPoint, unionBox, zoomAtPoint, type GraphExplorerProps, type Box, type CameraState, type FitOptions, type FitWithFloorOptions, type FitWithFloorResult, type FrameOverflow, type Point, type ScaleBounds, type Size, type CrossLink, type ExplorerLayout, type ExplorerNodeRenderContext, type ExplorerNodeRenderer, type ExplorerTree, type GraphExplorerVariant, type TreeNode as ExplorerTreeNode, } from "./components/graph-explorer";
+export { FocusWeb, CENTER_POSITION, PARENT_POSITION, WIDE_RING_THRESHOLD, layoutRing, type FocusNodeRenderContext, type FocusNodeRenderer, type FocusNodeRole, type FocusWebNode, type FocusWebProps, type PlacedRingNode, } from "./components/focus-web";
 export { SequenceDiagram, type SequenceDiagramProps, type SequenceStep, } from "./components/SequenceDiagram";
 export { defineRecordType, resetRecordTypes, useRecord, useRecords, useStaleness, write, writeAll, peekRecord, readState, readStaleness, subscribeToKey, subscribeToStaleness, retainKeys, sweepRecords, setRecordStoreTenant, getRecordStoreTenant, flushRecordNotifications, resetRecordStore, recordStoreStats, UNKNOWN_STATE, normalizeTypeName, normalizeTimestamp, recordKey, isRecordRef, type RecordRef, type ReadOptions, type RecordPayload, type RecordState, type RecordTypeOptions, type RecordTypeToken, type StalenessEntry, type WriteAllResult, type WriteOptions, type WriteResult, type WriteSource, type WriteVerdict, } from "./lib/records";
 export { RealtimeProvider, useRealtime, useRealtimeEpoch, useRealtimeHealth, useRealtimeRegistry, SubscriptionRegistry, normalizeScope, scopeKey, subscriptionKey, readRealtimeEpoch, subscribeToRealtimeEpoch, subscribeToRealtimeEvents, resetRealtimeSignals, type RealtimeChannel, type RealtimeConnectionState, type RealtimeDiagnostic, type RealtimeEvent, type RealtimeHealth, type RealtimeProviderProps, type RealtimeScope, type RealtimeScopeInput, type RealtimeStatus, type RealtimeTransport, type RegistryOptions, type SubscriptionHealth, type SubscriptionLease, type SubscriptionRequest, } from "./lib/realtime";

package/package.json

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