@salilvnair/dui 1.0.0 → 1.0.2

package/dist/lib/components/display/CountdownRingView.d.ts

@@ -0,0 +1,19 @@
+import { DuiSize, DuiRadius, DuiWidth } from '../../core/DuiTypes';
+export interface CountdownRingViewProps {
+    /** Target time to count down to. Takes precedence over `durationSeconds`. */
+    target?: Date | number;
+    /** Alternative to `target` — counts down from now for N seconds. */
+    durationSeconds?: number;
+    onComplete?: () => void;
+    size?: DuiSize;
+    /** Ring diameter in px — overrides the size-derived default. */
+    diameter?: number;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    label?: string;
+    paused?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function CountdownRingView({ target, durationSeconds, onComplete, size, diameter, width, borderRadius, color, label, paused, className, style, }: CountdownRingViewProps): import("react").JSX.Element;

package/dist/lib/components/display/DataGridToolbarView.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+import { ColumnVisibilityOption } from './ColumnVisibilityMenuView';
+export type DataGridDensity = 'compact' | 'default' | 'comfortable';
+export interface DataGridToolbarViewProps {
+    search: string;
+    onSearchChange: (value: string) => void;
+    columns?: ColumnVisibilityOption[];
+    visibleColumns?: string[];
+    onVisibleColumnsChange?: (visible: string[]) => void;
+    density?: DataGridDensity;
+    onDensityChange?: (density: DataGridDensity) => void;
+    onExport?: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Table toolbar — search + column-visibility + density cycle + export. */
+export declare function DataGridToolbarView({ search, onSearchChange, columns, visibleColumns, onVisibleColumnsChange, density, onDensityChange, onExport, size, color, className, style, }: DataGridToolbarViewProps): import("react").JSX.Element;

package/dist/lib/components/display/DataTableView.d.ts

@@ -1,7 +1,8 @@
 import { DuiSize } from '../../core/DuiTypes';
 export interface DataTableColumn<T = Record<string, unknown>> {
     key: string;
-    label: string;
+    /** Usually plain text; accepts a ReactNode for e.g. a select-all checkbox header. */
+    label: React.ReactNode;
     width?: string | number;
     sortable?: boolean;
     renderCell?: (row: T, value: unknown) => React.ReactNode;

package/dist/lib/components/display/DescriptionsView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface DescriptionItem {
+    label: string;
+    value: ReactNode;
+    /** Number of grid columns this item spans. Default 1. */
+    span?: number;
+}
+export interface DescriptionsViewProps {
+    title?: string;
+    items: DescriptionItem[];
+    columns?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Read-only label/value grid for entity detail views. */
+export declare function DescriptionsView({ title, items, columns, size, color, className, style, }: DescriptionsViewProps): import("react").JSX.Element;

package/dist/lib/components/display/DiffMorphView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface DiffMorphViewProps {
+    text: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Old→new text isn't cross-faded — unchanged words FLIP-animate into their new
+ * position while changed words fade/strike, so an edit visually "reflows".
+ */
+export declare function DiffMorphView({ text, size, className, style }: DiffMorphViewProps): import("react").JSX.Element;

package/dist/lib/components/display/DragHandleView.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface DragHandleViewProps {
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Grab-handle primitive for reorderable lists — six-dot grip icon. */
+export declare function DragHandleView({ size, color, className, style, }: DragHandleViewProps): import("react").JSX.Element;

package/dist/lib/components/display/EditableCellView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface EditableCellViewProps {
+    value: string;
+    onChange: (value: string) => void;
+    size?: DuiSize;
+    color?: string;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Click-to-edit table cell — click to enter edit mode, Enter to commit, Escape to cancel. */
+export declare function EditableCellView({ value, onChange, size, color, placeholder, className, style, }: EditableCellViewProps): import("react").JSX.Element;

package/dist/lib/components/display/EmptyInboxView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface EmptyInboxViewProps {
+    title?: string;
+    message?: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Zero-notifications empty state — pre-styled variant of the general EmptyStateView shape. */
+export declare function EmptyInboxView({ title, message, size, className, style, }: EmptyInboxViewProps): import("react").JSX.Element;

package/dist/lib/components/display/EnvironmentBadgeView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type EnvironmentKind = 'dev' | 'staging' | 'prod';
+export interface EnvironmentBadgeViewProps {
+    env: EnvironmentKind;
+    /** Show a pulsing "live" dot — typically for prod. */
+    live?: boolean;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Colored environment chip with an optional pulsing live indicator. */
+export declare function EnvironmentBadgeView({ env, live, size, className, style, }: EnvironmentBadgeViewProps): import("react").JSX.Element;

package/dist/lib/components/display/FeatureSpotlightBadgeView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface FeatureSpotlightBadgeViewProps {
+    label?: string;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Pulsing "New" badge for recently shipped features. */
+export declare function FeatureSpotlightBadgeView({ label, size, color, className, style, }: FeatureSpotlightBadgeViewProps): import("react").JSX.Element;

package/dist/lib/components/display/FileIconView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface FileIconViewProps {
+    name: string;
+    size?: DuiSize;
+    bytes?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Extension-based file-type icon + name + size row. */
+export declare function FileIconView({ name, size, bytes, className, style, }: FileIconViewProps): import("react").JSX.Element;

package/dist/lib/components/display/FileListView.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface FileListEntry {
+    id: string;
+    name: string;
+    bytes: number;
+    /** 0-100. Omit or 100 for "done". */
+    progress?: number;
+    error?: string;
+}
+export interface FileListViewProps {
+    files: FileListEntry[];
+    onRemove: (id: string) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Uploaded-files list with per-row progress and remove action. */
+export declare function FileListView({ files, onRemove, size, color, className, style, }: FileListViewProps): import("react").JSX.Element;

package/dist/lib/components/display/FilterBarView.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface FilterBarFilter {
+    key: string;
+    label: string;
+}
+export interface FilterBarViewProps {
+    filters: FilterBarFilter[];
+    onRemove: (key: string) => void;
+    onClearAll?: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Chip-based row of active filters with a clear-all action. */
+export declare function FilterBarView({ filters, onRemove, onClearAll, size, color, className, style, }: FilterBarViewProps): import("react").JSX.Element | null;

package/dist/lib/components/display/GaugeView.d.ts

@@ -0,0 +1,12 @@
+export interface GaugeViewProps {
+    /** 0–1 fraction */
+    score: number;
+    size?: number;
+    /** Overrides the score-driven color when set */
+    color?: string;
+    /** Overrides the score-driven label when set */
+    label?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function GaugeView({ score, size, color, label, className, style }: GaugeViewProps): import("react").JSX.Element;

package/dist/lib/components/display/GlowBorderView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface GlowBorderViewProps {
+    children: ReactNode;
+    colors?: [string, string];
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Animated gradient glowing-border wrapper. */
+export declare function GlowBorderView({ children, colors, size, className, style, }: GlowBorderViewProps): import("react").JSX.Element;

package/dist/lib/components/display/GradientTextView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface GradientTextViewProps {
+    children: ReactNode;
+    colors?: [string, string, string?];
+    /** Animation duration in seconds. Default 4. */
+    duration?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Animated gradient-shifting text. */
+export declare function GradientTextView({ children, colors, duration, size, className, style, }: GradientTextViewProps): import("react").JSX.Element;

package/dist/lib/components/display/HeatmapCalendarView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+export interface HeatmapDay {
+    date: string;
+    count: number;
+}
+export interface HeatmapCalendarViewProps {
+    data: HeatmapDay[];
+    color?: string;
+    cellSize?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** GitHub-style contribution heatmap — day cells shaded by count, tooltip on hover. */
+export declare function HeatmapCalendarView({ data, color, cellSize, className, style, }: HeatmapCalendarViewProps): import("react").JSX.Element;

package/dist/lib/components/display/HoloCardView.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface HoloCardViewProps {
+    children: ReactNode;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A card with a mouse-position-reactive holographic/iridescent sheen — trading-card holo effect. */
+export declare function HoloCardView({ children, size, className, style, }: HoloCardViewProps): import("react").JSX.Element;

package/dist/lib/components/display/HudView.d.ts

@@ -1,10 +1,17 @@
 export interface HudItem {
     id: string;
-    icon: React.ReactNode;
+    /** Icon-only items (default look) — omit when using dotColor + label instead */
+    icon?: React.ReactNode;
+    /** Colored swatch rendered before the label — e.g. a source-layer legend key */
+    dotColor?: string;
+    /** Text label rendered after the icon/dot — turns the item into a legend pill instead of an icon-only square button */
+    label?: string;
     onClick?: () => void;
     title?: string;
     disabled?: boolean;
-    /** Renders a highlighted active state (e.g. "mute breakpoints" toggled on) */
+    /** Renders a highlighted active state (e.g. "mute breakpoints" toggled on).
+     * For dot+label legend items, `active: false` instead dims the item to
+     * indicate "hidden/off" rather than highlighting it. */
     active?: boolean;
     /** Separator before this item */
     separator?: boolean;
@@ -19,7 +26,32 @@ export interface HudViewProps {
     activeColor?: string;
     className?: string;
     onDragEnd?: (x: number, y: number) => void;
-    /** Embed in a positioned container — uses position:relative, drag disabled. For showcase/preview use. */
+    /** Embed in a positioned container — uses position:relative instead of
+     * fixed-centered-on-viewport. Drag is still enabled by default; pass
+     * `draggable={false}` explicitly to disable it (e.g. static showcase/demo use). */
     contained?: boolean;
+    /** 'free' (default) drags in any direction, matching the original
+     * always-has-been HUD behavior. 'x' constrains the drag handle to
+     * horizontal movement only. */
+    dragAxis?: 'free' | 'x';
+    /** Explicitly enable/disable the drag handle. Defaults to true regardless
+     * of `contained` — set to false for a static, non-draggable HUD bar. */
+    draggable?: boolean;
+    /** Adds a minimize control next to the drag handle — collapses the whole
+     * HUD into a small draggable circular orb. Click the orb to restore. */
+    minimizable?: boolean;
+    /** Start minimized (uncontrolled — default false). Ignored if `minimized` is set. */
+    defaultMinimized?: boolean;
+    /** Controlled minimized state — pass with `onMinimizedChange` to fully control it. */
+    minimized?: boolean;
+    onMinimizedChange?: (minimized: boolean) => void;
+    /** Adds a "reset to initial view" icon button next to the minimize
+     * control — for a canvas/graph HUD where the caller wants a one-click
+     * way back to whatever view state it opened with, regardless of how far
+     * the user has since panned/zoomed. Purely presentational: HudView has
+     * no concept of "initial view" itself, the caller supplies the handler. */
+    onReset?: () => void;
+    /** Tooltip for the reset button. Defaults to "Reset view". */
+    resetTitle?: string;
 }
-export declare function HudView({ items, status, accentColor, activeColor, className, onDragEnd, contained, }: HudViewProps): import("react").JSX.Element;
+export declare function HudView({ items, status, accentColor, activeColor, className, onDragEnd, contained, dragAxis, draggable, minimizable, defaultMinimized, minimized: minimizedProp, onMinimizedChange, onReset, resetTitle, }: HudViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ImageCropperView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+export interface ImageCropperValue {
+    /** Pan offset as a fraction of container size, e.g. -0.5..0.5 */
+    x: number;
+    y: number;
+    zoom: number;
+}
+export interface ImageCropperViewProps {
+    src: string;
+    value: ImageCropperValue;
+    onChange: (value: ImageCropperValue) => void;
+    /** Crop frame aspect ratio, width/height. Default 1 (square). */
+    aspectRatio?: number;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Drag-crop + zoom image editor — a fixed crop frame with a pannable/zoomable image behind it. */
+export declare function ImageCropperView({ src, value, onChange, aspectRatio, height, className, style, }: ImageCropperViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ImageGalleryView.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface GalleryImage {
+    src: string;
+    alt?: string;
+}
+export interface ImageGalleryViewProps {
+    images: GalleryImage[];
+    columns?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Grid gallery with a click-to-open lightbox — prev/next navigation, Escape to close. */
+export declare function ImageGalleryView({ images, columns, size, className, style, }: ImageGalleryViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ImageZoomView.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export interface ImageZoomViewProps {
+    src: string;
+    alt?: string;
+    thumbnailStyle?: CSSProperties;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Click-to-zoom lightbox for a single image. */
+export declare function ImageZoomView({ src, alt, thumbnailStyle, className, style, }: ImageZoomViewProps): import("react").JSX.Element;

package/dist/lib/components/display/InfoView.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface InfoViewProps {
+    /** Icon rendered inside a soft colored badge above the title */
+    icon?: ReactNode;
+    title: string;
+    /** Plain description text — use `paths` for inline code/file-path snippets instead of embedding them here */
+    description?: string;
+    /** File paths / code snippets rendered as indigo/purple monospace pills, same treatment as InfoPopupView's item.code */
+    paths?: string[];
+    /** Small chip badges rendered below the paths (e.g. a count or a status word) */
+    badges?: {
+        label: string;
+        color?: string;
+    }[];
+    accentColor?: string;
+    compact?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Colorful "nothing here yet" panel — icon badge + title + description +
+ * indigo/purple-coded path/snippet pills + optional chip badges. Reuses
+ * InfoPopupView's item.code visual language for the path pills. */
+export declare function InfoView({ icon, title, description, paths, badges, accentColor, compact, className, style, }: InfoViewProps): import("react").JSX.Element;

package/dist/lib/components/display/InspectorPanelView.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export interface InspectorSectionViewProps {
+    icon?: ReactNode;
+    label: string;
+    accentColor?: string;
+    children: ReactNode;
+    className?: string;
+}
+/** One bordered, labeled content block inside an InspectorPanelView. */
+export declare function InspectorSectionView({ icon, label, accentColor, children, className }: InspectorSectionViewProps): import("react").JSX.Element;
+export interface InspectorPanelViewProps {
+    /** Primary heading, e.g. an entity name */
+    title: ReactNode;
+    /** Small uppercase text under the title, e.g. entity type */
+    subtitle?: string;
+    /** Chips/badges row above the title */
+    badges?: ReactNode;
+    onClose?: () => void;
+    /** false (default): absolute overlay panel on the right edge.
+     *  true: fills its parent in normal flow (e.g. inside an existing sidebar). */
+    embedded?: boolean;
+    width?: number | string;
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Generic "entity detail sidebar" shell — header (badges + title + subtitle +
+ * close button) followed by stacked InspectorSectionView blocks. */
+export declare function InspectorPanelView({ title, subtitle, badges, onClose, embedded, width, children, className, style, }: InspectorPanelViewProps): import("react").JSX.Element;

package/dist/lib/components/display/IntegrationCardView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface IntegrationCardViewProps {
+    logo: ReactNode;
+    name: string;
+    description?: string;
+    connected: boolean;
+    onConnect: () => void;
+    onDisconnect: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Logo + name + connect/disconnect card — integrations/marketplace listing. */
+export declare function IntegrationCardView({ logo, name, description, connected, onConnect, onDisconnect, size, color, className, style, }: IntegrationCardViewProps): import("react").JSX.Element;

package/dist/lib/components/display/KanbanBoardView.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface KanbanCard {
+    id: string;
+    title: string;
+    content?: ReactNode;
+}
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    cards: KanbanCard[];
+    color?: string;
+}
+export interface KanbanBoardViewProps {
+    columns: KanbanColumn[];
+    onChange: (columns: KanbanColumn[]) => void;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Draggable columns + cards board. Both cards and column headers drag
+ * exclusively from a dedicated handle (same "armed" pattern as
+ * SortableView) so buttons/links inside a card's custom content keep
+ * working — dragging from anywhere else on the card just clicks through.
+ */
+export declare function KanbanBoardView({ columns, onChange, size, className, style, }: KanbanBoardViewProps): import("react").JSX.Element;

package/dist/lib/components/display/KbdView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface KbdViewProps {
+    keys: string | string[];
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** `<kbd>`-style hotkey hint chip. Composes multiple keys with a "+" separator. */
+export declare function KbdView({ keys, size, color, className, style, }: KbdViewProps): import("react").JSX.Element;

package/dist/lib/components/display/KeyValueListView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface KeyValueListEntry {
+    key: string;
+    value: ReactNode;
+}
+export interface KeyValueListViewProps {
+    entries: KeyValueListEntry[];
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Lightweight label:value stacked list — no edit, no toolbar. Distinct from `KeyValueTableView`. */
+export declare function KeyValueListView({ entries, size, className, style, }: KeyValueListViewProps): import("react").JSX.Element;

package/dist/lib/components/display/LatencyPulseView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface LatencyPulseViewProps {
+    /** Latest latency in ms — higher values beat faster and spike taller. */
+    latencyMs: number;
+    /** Latency (ms) considered "critical" — beat turns red past this. Default 500. */
+    criticalMs?: number;
+    width?: number;
+    height?: number;
+    color?: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** EKG/vitals-monitor style live pulse line for request latency — a metric that visually "beats". */
+export declare function LatencyPulseView({ latencyMs, criticalMs, width, height, color, size, className, style, }: LatencyPulseViewProps): import("react").JSX.Element;

package/dist/lib/components/display/LicenseBadgeView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type LicenseTier = 'free' | 'pro' | 'enterprise';
+export interface LicenseBadgeViewProps {
+    tier: LicenseTier;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Plan/tier ribbon badge — Free / Pro / Enterprise. */
+export declare function LicenseBadgeView({ tier, size, className, style, }: LicenseBadgeViewProps): import("react").JSX.Element;

package/dist/lib/components/display/ListView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ListViewItem {
+    id: string;
+    avatar?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    onClick?: () => void;
+}
+export interface ListViewProps {
+    items: ListViewItem[];
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Generic avatar/title/subtitle/action list primitive. */
+export declare function ListView({ items, size, color, className, style, }: ListViewProps): import("react").JSX.Element;

package/dist/lib/components/display/LiveCursorPresenceView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface LiveCursor {
+    id: string;
+    name: string;
+    /** Position as a fraction (0-1) of the container's width/height. */
+    x: number;
+    y: number;
+    color?: string;
+}
+export interface LiveCursorPresenceViewProps {
+    cursors: LiveCursor[];
+    children: ReactNode;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Collaborative cursors with name tags, overlaid on arbitrary content. */
+export declare function LiveCursorPresenceView({ cursors, children, size, className, style, }: LiveCursorPresenceViewProps): import("react").JSX.Element;

package/dist/lib/components/display/LoaderView.d.ts

@@ -7,6 +7,17 @@ export interface LoaderViewProps {
     label?: string;
     fullscreen?: boolean;
     progress?: number;
+    /** skeleton only: renders a single placeholder bar of this exact size
+     * instead of the default 3-line paragraph shape — for mimicking a
+     * specific piece of UI (a stat number, a table cell, a title). */
+    width?: number | string;
+    height?: number | string;
+    /** skeleton only: 'rect' (default) is the bar/paragraph shape above.
+     * 'circle' with an explicit width/height renders one pulsing circle
+     * that size; with no size given (the common full-area loading-overlay
+     * case) it scatters a handful of varying-size pulsing circles instead —
+     * reads as loading *nodes*, a natural fit for graph/network canvases. */
+    shape?: 'rect' | 'circle';
     className?: string;
 }
-export declare function LoaderView({ variant, size, accentColor, label, fullscreen, progress, className, }: LoaderViewProps): import("react").JSX.Element;
+export declare function LoaderView({ variant, size, accentColor, label, fullscreen, progress, width, height, shape, className, }: LoaderViewProps): import("react").JSX.Element;

package/dist/lib/components/display/MagneticButtonView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface MagneticButtonViewProps {
+    children: ReactNode;
+    onClick?: () => void;
+    /** Max pull distance in px. Default 12. */
+    strength?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Cursor-attraction hover button effect. */
+export declare function MagneticButtonView({ children, onClick, strength, size, color, className, style, }: MagneticButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/display/MaintenanceBannerView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface MaintenanceBannerViewProps {
+    open: boolean;
+    window: string;
+    onDismiss?: () => void;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Scheduled-downtime notice strip. */
+export declare function MaintenanceBannerView({ open, window: maintenanceWindow, onDismiss, size, className, style, }: MaintenanceBannerViewProps): import("react").JSX.Element | null;

package/dist/lib/components/display/MessageBannerView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type MessageBannerVariant = 'success' | 'error' | 'info' | 'warning';
+export interface MessageBannerViewProps {
+    variant?: MessageBannerVariant;
+    children: ReactNode;
+    onDismiss?: () => void;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Inline success/error/info/warning message strip. Form-adjacent, distinct from the page-level `CalloutView`/dismissible `BannerView`. */
+export declare function MessageBannerView({ variant, children, onDismiss, size, className, style, }: MessageBannerViewProps): import("react").JSX.Element;