@salilvnair/dui 1.0.0 → 1.0.2

package/dist/lib/components/button/AIButtonView.d.ts

@@ -3,7 +3,7 @@ export type AIButtonAction = 'generate' | 'fuzz' | 'explain' | 'fix' | 'ask' | '
 export interface AIButtonViewProps {
     action?: AIButtonAction;
     label?: string;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     loading?: boolean;
     disabled?: boolean;
     /** Falls back to DuiProvider size when omitted. */

package/dist/lib/components/button/BookmarkButtonView.d.ts

@@ -0,0 +1,10 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface BookmarkButtonViewProps {
+    saved: boolean;
+    onChange: (saved: boolean) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+/** Animated bookmark/save toggle button. */
+export declare function BookmarkButtonView({ saved, onChange, size, color, className, }: BookmarkButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/FabView.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface FabAction {
+    icon: ReactNode;
+    label: string;
+    onClick: () => void;
+}
+export interface FabViewProps {
+    icon?: ReactNode;
+    /** Extended FAB: renders `label` beside the icon. */
+    label?: string;
+    onClick?: () => void;
+    /** Speed-dial mode — renders `actions` in a fanned-out menu on click. */
+    actions?: FabAction[];
+    position?: 'bottom-right' | 'bottom-left';
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+export declare function FabView({ icon, label, onClick, actions, position, size, color, className, }: FabViewProps): import("react").JSX.Element;

package/dist/lib/components/button/FollowButtonView.d.ts

@@ -0,0 +1,10 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface FollowButtonViewProps {
+    following: boolean;
+    onChange: (following: boolean) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+/** Follow/following state-toggle button — swaps label + style, "Unfollow" on hover while following. */
+export declare function FollowButtonView({ following, onChange, size, color, className, }: FollowButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/HoldToConfirmView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface HoldToConfirmViewProps {
+    children: ReactNode;
+    onConfirm: () => void;
+    /** Hold duration in ms required to trigger. Default 900. */
+    duration?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Press-and-hold with a radial fill that must complete before the destructive action fires. */
+export declare function HoldToConfirmView({ children, onConfirm, duration, size, color, className, style, }: HoldToConfirmViewProps): import("react").JSX.Element;

package/dist/lib/components/button/IconButtonView.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { DuiRadius } from '../../core/DuiTypes';
-export type IconButtonSize = 'default' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconButtonSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type IconButtonVariant = 'ghost' | 'filled';
 export interface IconButtonViewProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     icon: ReactNode;

package/dist/lib/components/button/LikeButtonView.d.ts

@@ -0,0 +1,11 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface LikeButtonViewProps {
+    liked: boolean;
+    onChange: (liked: boolean) => void;
+    count?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+/** Animated heart/like toggle button — pop animation on like. */
+export declare function LikeButtonView({ liked, onChange, count, size, color, className, }: LikeButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/MorphingIconButtonView.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type MorphIconPreset = 'play-pause' | 'menu-close' | 'sun-moon';
+export interface MorphingIconButtonViewProps {
+    preset: MorphIconPreset;
+    active: boolean;
+    onClick: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** The icon itself SVG-path-morphs between two states instead of a crossfade/swap. */
+export declare function MorphingIconButtonView({ preset, active, onClick, size, color, className, style, }: MorphingIconButtonViewProps): import("react").JSX.Element;

package/dist/lib/components/button/ThemeToggleView.d.ts

@@ -0,0 +1,12 @@
+import { IconButtonSize } from './IconButtonView';
+export interface ThemeToggleViewProps {
+    theme: 'dark' | 'light';
+    onToggle: () => void;
+    size?: IconButtonSize;
+    sunColor?: string;
+    moonColor?: string;
+    className?: string;
+}
+/** Sun/moon icon-swap button — no app-specific theme logic, just renders
+ * the icon for the *current* theme and calls onToggle on click. */
+export declare function ThemeToggleView({ theme, onToggle, size, sunColor, moonColor, className, }: ThemeToggleViewProps): import("react").JSX.Element;

package/dist/lib/components/button/VoteWidgetView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface VoteWidgetViewProps {
+    score: number;
+    userVote: 'up' | 'down' | null;
+    onVote: (vote: 'up' | 'down' | null) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Upvote/downvote counter control. */
+export declare function VoteWidgetView({ score, userVote, onVote, size, color, className, style, }: VoteWidgetViewProps): import("react").JSX.Element;

package/dist/lib/components/chips/ChipView.d.ts

@@ -1,9 +1,12 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 /** `'xs'` is a sub-sm alias kept for dense protocol badges. */
 export type ChipViewSize = 'xs' | DuiSize;
 export interface ChipViewProps {
     label: string;
+    /** Leading glyph — pass a DUI icon component (e.g. `<TargetGoalIcon size={12} />`),
+     *  never an emoji. Sized/colored by the caller; the chip just positions it. */
+    icon?: ReactNode;
     /** CSS variable or raw color value — drives text, border, and auto-derived bg */
     color?: string;
     /** Override background explicitly instead of deriving from color */
@@ -18,4 +21,4 @@ export interface ChipViewProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function ChipView({ label, color, bg, size, rounded, onClick, active, className, style, }: ChipViewProps): import("react").JSX.Element;
+export declare function ChipView({ label, icon, color, bg, size, rounded, onClick, active, className, style, }: ChipViewProps): import("react").JSX.Element;

package/dist/lib/components/chips/CommandChipView.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface CommandChipViewProps {
+    /** The command text — also what is copied to the clipboard on click. */
+    command: string;
+    /** DUI size — shares the SAME height/padding/font tokens as ButtonView, so a
+     *  `CommandChipView` and a `ButtonView` at the same `size` line up pixel-for
+     *  pixel (e.g. put a Run button next to a command chip). Falls back to the
+     *  DuiProvider context size when omitted. */
+    size?: DuiSize;
+    /** Text + border accent (CSS var or raw value). Defaults to the DUI context
+     *  color, then a neutral token. */
+    color?: string;
+    /** Confirmation text shown briefly after a successful copy. */
+    copiedLabel?: string;
+    /** Set false to render a plain, non-interactive command pill (no copy). */
+    copyable?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * CommandChipView — a monospace command pill that copies itself to the
+ * clipboard on click. Sized through the shared button-metric system
+ * (`useButtonBase`) so it is guaranteed the same height as a `ButtonView` of
+ * the same `size`. Degrades to a plain, selectable pill when the Clipboard API
+ * is unavailable (non-secure context).
+ */
+export declare function CommandChipView({ command, size, color, copiedLabel, copyable, className, style, }: CommandChipViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface AIStreamingTextViewProps {
+    /** Full text to reveal. As this grows (e.g. appended from a stream), new tokens fade in. */
+    text: string;
+    /** Show the pre-first-token "thinking" shimmer. */
+    thinking?: boolean;
+    /** Show the blinking cursor after the last revealed token. */
+    streaming?: boolean;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Token-by-token LLM output renderer — per-token fade-in, thinking shimmer, blink cursor. */
+export declare function AIStreamingTextView({ text, thinking, streaming, size, color, className, style, }: AIStreamingTextViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ActivityEntry {
+    id: string;
+    actor: string;
+    avatar?: ReactNode;
+    action: string;
+    timestamp: string;
+    /** ISO date string used to group entries under a day header, e.g. "2026-07-02". */
+    day: string;
+}
+export interface ActivityFeedViewProps {
+    entries: ActivityEntry[];
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Chronological activity feed, entries grouped by day. */
+export declare function ActivityFeedView({ entries, size, className, style, }: ActivityFeedViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ApiKeyRowViewProps {
+    label: string;
+    apiKey: string;
+    onRevoke?: () => void;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Masked API key row with reveal/copy/revoke actions. */
+export declare function ApiKeyRowView({ label, apiKey, onRevoke, size, className, style, }: ApiKeyRowViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface ArticleCardViewProps {
+    image?: string;
+    title: string;
+    excerpt?: string;
+    meta?: ReactNode;
+    onClick?: () => void;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Image + title + excerpt + meta preview card — blog/article listing. */
+export declare function ArticleCardView({ image, title, excerpt, meta, onClick, size, borderRadius, color, className, style, }: ArticleCardViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export interface AudioPlayerViewProps {
+    src: string;
+    samples?: number[];
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Waveform + play/pause/seek audio player. */
+export declare function AudioPlayerView({ src, samples, color, className, style, }: AudioPlayerViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+export interface AudioWaveformViewProps {
+    /** Normalized amplitude samples, 0-1. If omitted, renders a deterministic placeholder pattern. */
+    samples?: number[];
+    /** Playback progress, 0-1 — played bars render in `color`, the rest in a muted tone. */
+    progress?: number;
+    height?: number;
+    color?: string;
+    /** Animate bars with a gentle bounce — for a "live"/recording waveform. */
+    animated?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Static or animated waveform visualization primitive — used standalone or inside `AudioPlayerView`. */
+export declare function AudioWaveformView({ samples, progress, height, color, animated, className, style, }: AudioWaveformViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface AuditLogRowViewProps {
+    timestamp: string;
+    actor: string;
+    actorAvatar?: ReactNode;
+    action: string;
+    target: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Timestamped actor+action+target log row — audit trail primitive. */
+export declare function AuditLogRowView({ timestamp, actor, actorAvatar, action, target, size, className, style, }: AuditLogRowViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface AvatarGroupMember {
+    src?: string | null;
+    name?: string;
+    initials?: string;
+}
+export interface AvatarGroupViewProps {
+    members: AvatarGroupMember[];
+    /** Max avatars shown before collapsing into a "+N" overflow bubble. Default 4. */
+    max?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function AvatarGroupView({ members, max, size, color, className, style, }: AvatarGroupViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+import { PresenceStatus } from './PresenceDotView';
+export interface AvatarViewProps {
+    src?: string | null;
+    /** Fallback initials when no `src` is given — auto-derived from `name` if omitted. */
+    initials?: string;
+    name?: string;
+    status?: PresenceStatus;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function AvatarView({ src, initials, name, status, size, color, className, style, }: AvatarViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export type BannerVariant = 'info' | 'success' | 'warning' | 'danger';
+export interface BannerViewProps {
+    open: boolean;
+    message: ReactNode;
+    variant?: BannerVariant;
+    onDismiss?: () => void;
+    actionLabel?: string;
+    onAction?: () => void;
+    icon?: ReactNode;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function BannerView({ open, message, variant, onDismiss, actionLabel, onAction, icon, size, borderRadius, className, style, }: BannerViewProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+export interface BarcodeViewProps {
+    value: string;
+    height?: number;
+    showValue?: boolean;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Barcode generator display — canvas/SVG-drawn, no extra runtime dependency. */
+export declare function BarcodeView({ value, height, showValue, color, className, style, }: BarcodeViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface BreathingLoaderViewProps {
+    label?: string;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** An ultra-minimal loading state — a single circle slowly scales/fades in a breathing rhythm. A calmer alternative to a spinner. */
+export declare function BreathingLoaderView({ label, size, color, className, style, }: BreathingLoaderViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type CalloutVariant = 'info' | 'warning' | 'tip' | 'danger';
+export interface CalloutViewProps {
+    variant?: CalloutVariant;
+    title: string;
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function CalloutView({ variant, title, children, className, style }: CalloutViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface CarouselViewProps {
+    slides: ReactNode[];
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    color?: string;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Swipeable card carousel with dot indicators — autoplay pauses on hover. */
+export declare function CarouselView({ slides, autoplay, autoplayInterval, color, height, className, style, }: CarouselViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type ChangeType = 'feature' | 'fix' | 'improvement' | 'breaking';
+export interface ChangelogEntryViewProps {
+    version: string;
+    date: string;
+    changes: {
+        type: ChangeType;
+        description: ReactNode;
+    }[];
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Version + date + change-type badges + description block — changelog/release-notes entry. */
+export declare function ChangelogEntryView({ version, date, changes, size, className, style, }: ChangelogEntryViewProps): import("react").JSX.Element;

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

@@ -1,11 +1,25 @@
 export interface CodeBlockViewProps {
     code: string;
     language?: string;
+    /** Optional filename/title row rendered above the language + copy bar */
+    title?: string;
     showCopyButton?: boolean;
     showLineNumbers?: boolean;
     maxHeight?: string;
+    /**
+     * Stretch to fill the height of a flex/grid parent instead of sizing to
+     * content — for callers embedding this in a flex-1 container that should
+     * be fully spanned (e.g. a detail panel's sole content block) rather than
+     * left with empty space below a content-sized box. Switches the root to
+     * `display:flex, flexDirection:column, height:100%` and the scrollable
+     * code area to `flex:1` instead of relying on `maxHeight` alone — `
+     * maxHeight` only caps growth, it can't force a short block to grow, which
+     * is exactly what "span available height" needs. `maxHeight` is ignored
+     * when this is set.
+     */
+    fill?: boolean;
     accentColor?: string;
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function CodeBlockView({ code, language, showCopyButton, showLineNumbers, maxHeight, accentColor, className, style, }: CodeBlockViewProps): import("react").JSX.Element;
+export declare function CodeBlockView({ code, language, title, showCopyButton, showLineNumbers, maxHeight, fill, accentColor, className, style, }: CodeBlockViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ColumnVisibilityOption {
+    key: string;
+    label: string;
+}
+export interface ColumnVisibilityMenuViewProps {
+    columns: ColumnVisibilityOption[];
+    /** Keys of currently-visible columns. */
+    visible: string[];
+    onChange: (visible: string[]) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** Trigger button text — defaults to "Columns". Override to reuse this
+     * same checkbox-menu-in-a-portal pattern for other multi-select filters
+     * (e.g. a project-scope picker) without duplicating the positioning/
+     * outside-click logic. */
+    label?: string;
+    /** Trigger button icon — defaults to ColumnsIcon. */
+    icon?: ReactNode;
+}
+/** Checkbox menu to toggle table column visibility (or any other named
+ * multi-select set — see `label`/`icon` to repurpose it). */
+export declare function ColumnVisibilityMenuView({ columns, visible, onChange, size, color, className, style, label, icon, }: ColumnVisibilityMenuViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type CommandOrbState = 'idle' | 'thinking' | 'speaking' | 'open';
+export interface CommandOrbViewProps {
+    state: CommandOrbState;
+    onClick?: () => void;
+    /** Rendered inside an expanded panel below the orb when `state === 'open'`. */
+    panel?: ReactNode;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Floating, breathing circular AI-assistant orb — idle pulse → thinking ripple → speaking waveform, expands into a chat panel. */
+export declare function CommandOrbView({ state, onClick, panel, size, color, className, style, }: CommandOrbViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface CommentNode {
+    id: string;
+    author: string;
+    avatar?: ReactNode;
+    timestamp: string;
+    content: string;
+    replies?: CommentNode[];
+}
+export interface CommentThreadViewProps {
+    comments: CommentNode[];
+    onReply?: (id: string) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Nested comment thread with reply action — GitHub/PR-style. */
+export declare function CommentThreadView({ comments, onReply, size, color, className, style, }: CommentThreadViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export interface ComparisonSliderViewProps {
+    beforeSrc: string;
+    afterSrc: string;
+    beforeLabel?: string;
+    afterLabel?: string;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Before/after drag slider for image comparison. */
+export declare function ComparisonSliderView({ beforeSrc, afterSrc, beforeLabel, afterLabel, height, className, style, }: ComparisonSliderViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+export interface ConfettiBurstHandle {
+    /** Fire a burst. Origin defaults to viewport center; pass a DOMRect-like point to burst from a button, etc. */
+    fire: (origin?: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export interface ConfettiBurstViewProps {
+    colors?: string[];
+    particleCount?: number;
+}
+/**
+ * Canvas confetti burst, triggered imperatively via ref — `ref.current.fire()`.
+ * Renders a fixed full-viewport transparent canvas that stays mounted but invisible
+ * (zero particles) until fired, so it can sit anywhere in the tree.
+ */
+export declare const ConfettiBurstView: import('react').ForwardRefExoticComponent<ConfettiBurstViewProps & import('react').RefAttributes<ConfettiBurstHandle>>;

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

@@ -0,0 +1,14 @@
+import { CSSProperties, RefObject } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ConnectionPulseLineViewProps {
+    /** A positioned ancestor that both `from`/`to` live inside — coordinates are relative to it. */
+    containerRef: RefObject<HTMLElement | null>;
+    from: RefObject<HTMLElement | null>;
+    to: RefObject<HTMLElement | null>;
+    color?: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A dashed/gradient SVG line connecting two arbitrary DOM elements, with a traveling pulse dot. */
+export declare function ConnectionPulseLineView({ containerRef, from, to, color, size, className, style, }: ConnectionPulseLineViewProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ConstellationLoaderViewProps {
+    /** Number of stars. Default 7. */
+    count?: number;
+    size?: DuiSize;
+    color?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Loading dots that drift and connect into shifting constellation lines — ties to NetworkGraphView's visual identity. */
+export declare function ConstellationLoaderView({ count, size, color, width, height, className, style, }: ConstellationLoaderViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface ContactCardViewProps {
+    name: string;
+    role?: string;
+    avatar?: ReactNode;
+    contacts?: {
+        icon: ReactNode;
+        label: string;
+        onClick?: () => void;
+    }[];
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Avatar + name + role + contact-icon row card. */
+export declare function ContactCardView({ name, role, avatar, contacts, size, borderRadius, color, className, style, }: ContactCardViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface CookieConsentBannerViewProps {
+    open: boolean;
+    message?: string;
+    onAccept: () => void;
+    onCustomize?: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Fixed bottom cookie-consent bar with accept/customize actions. */
+export declare function CookieConsentBannerView({ open, message, onAccept, onCustomize, size, color, className, style, }: CookieConsentBannerViewProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface CountUpNumberViewProps {
+    value: number;
+    /** Animation duration in milliseconds. Default 1200. */
+    duration?: number;
+    prefix?: string;
+    suffix?: string;
+    precision?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Standalone animated number count-up primitive. */
+export declare function CountUpNumberView({ value, duration, prefix, suffix, precision, size, color, className, style, }: CountUpNumberViewProps): import("react").JSX.Element;