@salilvnair/dui 1.0.0 → 1.0.2

package/dist/lib/components/layout/DockView.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface DockItem {
+    id: string;
+    icon: ReactNode;
+    label: string;
+    active?: boolean;
+}
+export interface DockViewProps {
+    items: DockItem[];
+    onSelect: (id: string) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+/** Floating icon dock — icons magnify as the cursor approaches. */
+export declare function DockView({ items, onSelect, size, color, className, }: DockViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/FaqAccordionView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export interface FaqEntry {
+    id: string;
+    question: string;
+    answer: string;
+}
+export interface FaqAccordionViewProps {
+    faqs: FaqEntry[];
+    /** Allow multiple questions open at once. Default false. */
+    multiple?: boolean;
+    accentColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Pre-styled Q&A accordion, built directly on `AccordionGroupView`/`CollapsibleSectionView`. */
+export declare function FaqAccordionView({ faqs, multiple, accentColor, className, style, }: FaqAccordionViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/HeroView.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface HeroViewProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    /** Optional background — CSS gradient/color string, or an image URL. */
+    background?: string;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function HeroView({ title, subtitle, actions, background, size, borderRadius, color, className, style, }: HeroViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/LevelView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface LevelViewProps {
+    /** Items on the left side. */
+    left?: ReactNode;
+    /** Items on the right side. */
+    right?: ReactNode;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Space-between horizontal toolbar row — level primitive. */
+export declare function LevelView({ left, right, size, className, style, }: LevelViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/MasonryGridView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface MasonryGridViewProps {
+    children: ReactNode[];
+    columns?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Pinterest-style column-balanced layout — CSS columns, no JS measurement needed. */
+export declare function MasonryGridView({ children, columns, size, className, style, }: MasonryGridViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/MediaObjectView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface MediaObjectViewProps {
+    media: ReactNode;
+    children: ReactNode;
+    actions?: ReactNode;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Avatar/icon + content + actions row — media object primitive. */
+export declare function MediaObjectView({ media, children, actions, size, className, style, }: MediaObjectViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/NavbarView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface NavbarLink {
+    id: string;
+    label: string;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface NavbarViewProps {
+    brand: ReactNode;
+    links?: NavbarLink[];
+    right?: ReactNode;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Top app bar — brand, link menu, burger collapse on narrow widths. */
+export declare function NavbarView({ brand, links, right, size, color, className, style, }: NavbarViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/OnboardingChecklistView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface OnboardingStep {
+    id: string;
+    label: string;
+    done: boolean;
+    onClick?: () => void;
+}
+export interface OnboardingChecklistViewProps {
+    title?: string;
+    steps: OnboardingStep[];
+    defaultExpanded?: boolean;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Collapsible "getting started" progress checklist. */
+export declare function OnboardingChecklistView({ title, steps, defaultExpanded, size, color, className, style, }: OnboardingChecklistViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/PaginationView.d.ts

@@ -0,0 +1,12 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface PaginationViewProps {
+    page: number;
+    totalPages: number;
+    onChange: (page: number) => void;
+    /** Sibling pages shown on each side of the current page. Default 1. */
+    siblingCount?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+export declare function PaginationView({ page, totalPages, onChange, siblingCount, size, color, className, }: PaginationViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/PanelListView.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface PanelListItem {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface PanelListTab {
+    id: string;
+    label: string;
+}
+export interface PanelListViewProps {
+    heading: string;
+    items: PanelListItem[];
+    tabs?: PanelListTab[];
+    activeTab?: string;
+    onTabChange?: (id: string) => void;
+    searchable?: boolean;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Heading + tabs + filterable block list — panel primitive. */
+export declare function PanelListView({ heading, items, tabs, activeTab, onTabChange, searchable, size, borderRadius, color, className, style, }: PanelListViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/ScrollAreaView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface ScrollAreaViewProps {
+    children: ReactNode;
+    direction?: 'vertical' | 'horizontal' | 'both';
+    maxHeight?: number | string;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Container with a slim, accent-tinted custom scrollbar instead of the browser default. */
+export declare function ScrollAreaView({ children, direction, maxHeight, color, className, style, }: ScrollAreaViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/SettingsRowView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface SettingsRowViewProps {
+    label: string;
+    description?: string;
+    control: ReactNode;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Label + description + control row — the standard settings-page primitive. */
+export declare function SettingsRowView({ label, description, control, size, className, style, }: SettingsRowViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/SettingsSectionView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface SettingsSectionViewProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Grouped settings card with a header — pairs with `SettingsRowView`. */
+export declare function SettingsSectionView({ title, description, children, size, className, style, }: SettingsSectionViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/SideNavView.d.ts

@@ -23,6 +23,8 @@ export interface SideNavViewProps {
     defaultOpenIds?: string[];
     width?: number;
     collapsedWidth?: number;
+    /** When true, fills 100% of the parent's width instead of a fixed pixel `width` — for use inside a resizable container like SplitPanelView, which controls sizing itself. */
+    fillContainer?: boolean;
     accentColor?: string;
     /** Render a search box above the nav items */
     searchable?: boolean;
@@ -36,4 +38,4 @@ export interface SideNavViewProps {
 }
 export declare function countLeaves(items: SideNavItem[]): number;
 export declare function filterItems(items: SideNavItem[], q: string): SideNavItem[];
-export declare function SideNavView({ items, activeId, onSelect, collapsible, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, defaultOpenIds, width, collapsedWidth, accentColor, searchable, searchPlaceholder, emptyText, size, className, style, }: SideNavViewProps): import("react").JSX.Element;
+export declare function SideNavView({ items, activeId, onSelect, collapsible, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, defaultOpenIds, width, collapsedWidth, fillContainer, accentColor, searchable, searchPlaceholder, emptyText, size, className, style, }: SideNavViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/StickyHeaderView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface StickyHeaderViewProps {
+    children: ReactNode;
+    offsetTop?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Sticky section header that grows a shadow once it's pinned to the top. */
+export declare function StickyHeaderView({ children, offsetTop, size, className, style, }: StickyHeaderViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/TileGridView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface TileNode {
+    /** Leaf content — mutually exclusive with `children`. */
+    content?: ReactNode;
+    /** Nested tiles — renders this node as a sub-grid ("parent" wrapping an "ancestor"). */
+    children?: TileNode[];
+    /** Stack this node's children vertically instead of horizontally. */
+    vertical?: boolean;
+    /** Flex-grow weight relative to siblings. Default 1. */
+    weight?: number;
+}
+export interface TileGridViewProps {
+    nodes: TileNode[];
+    vertical?: boolean;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Nested ancestor/parent/child tile grid — tile primitive. */
+export declare function TileGridView({ nodes, vertical, size, className, style, }: TileGridViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/WatermarkView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface WatermarkViewProps {
+    children: ReactNode;
+    text: string;
+    /** Rotation angle in degrees. Default -22. */
+    angle?: number;
+    /** Gap between repeated tiles (px). Default 120. */
+    gap?: number;
+    fontSize?: number;
+    color?: string;
+    opacity?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Repeated diagonal text watermark overlay primitive. */
+export declare function WatermarkView({ children, text, angle, gap, fontSize, color, opacity, className, style, }: WatermarkViewProps): import("react").JSX.Element;

package/dist/lib/components/modal/ActionSheetView.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ActionSheetItem {
+    label: string;
+    icon?: ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+}
+export interface ActionSheetViewProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    items: ActionSheetItem[];
+    cancelLabel?: string;
+    size?: DuiSize;
+    className?: string;
+}
+export declare function ActionSheetView({ open, onClose, title, items, cancelLabel, size, className, }: ActionSheetViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/AlertDialogView.d.ts

@@ -0,0 +1,15 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface AlertDialogViewProps {
+    open: boolean;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+    size?: DuiSize;
+    className?: string;
+}
+/** Pre-built confirm/cancel dialog with danger styling — the standard "Are you sure?" pattern. */
+export declare function AlertDialogView({ open, title, message, confirmLabel, cancelLabel, danger, onConfirm, onCancel, size, className, }: AlertDialogViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/BottomSheetView.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface BottomSheetViewProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: ReactNode;
+    /** Sheet height as a fraction of viewport height, e.g. 0.5. Default 0.6. */
+    heightRatio?: number;
+    size?: DuiSize;
+    className?: string;
+}
+/** Mobile-style sheet — drag the handle down past a threshold, or fling it, to dismiss. */
+export declare function BottomSheetView({ open, onClose, title, children, heightRatio, size, className, }: BottomSheetViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/CommandPaletteView.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface PaletteCommand {
+    id: string;
+    label: string;
+    /** Small muted text on the right (e.g. section, shortcut) */
+    hint?: string;
+    icon?: ReactNode;
+    /** Extra strings the filter also matches against */
+    keywords?: string[];
+    action: () => void;
+}
+export interface CommandPaletteViewProps {
+    open: boolean;
+    onClose: () => void;
+    commands: PaletteCommand[];
+    placeholder?: string;
+    emptyText?: string;
+    accentColor?: string;
+}
+/** Cmd-K style launcher: fuzzy filter + ↑/↓/Enter/Esc keyboard navigation. */
+export declare function CommandPaletteView({ open, onClose, commands, placeholder, emptyText, accentColor, }: CommandPaletteViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/DrawerView.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type DrawerEdge = 'left' | 'right' | 'top' | 'bottom';
+export interface DrawerViewProps {
+    open: boolean;
+    onClose: () => void;
+    edge?: DrawerEdge;
+    title?: string;
+    children?: ReactNode;
+    /** Width (left/right edges) or height (top/bottom edges), e.g. 320 or '40vw'. */
+    size?: number | string;
+    duiSize?: DuiSize;
+    className?: string;
+}
+export declare function DrawerView({ open, onClose, edge, title, children, size, duiSize, className, }: DrawerViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/ModalView.d.ts

@@ -9,7 +9,7 @@ export interface ModalViewProps {
     onClose: () => void;
     title?: string;
     /** Secondary text shown below the title in the header */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /** Node rendered to the left of the title block — e.g. a coloured icon circle */
     headerIcon?: React.ReactNode;
     children?: React.ReactNode;
@@ -35,7 +35,16 @@ export interface ModalViewProps {
     mode?: ModalMode;
     /** Override the default 85vh max-height of the modal card */
     maxHeight?: string;
+    /**
+     * Explicit height for the modal card (e.g. '82vh'). Without this the card
+     * shrink-wraps to its content — maxHeight only caps growth, it doesn't force
+     * it — so a body relying on `flex: 1` (or a percentage height) to fill real
+     * viewport space has no free space to grow into and collapses toward 0.
+     * Set this whenever body content needs a real, non-content-driven height
+     * (e.g. an embedded chart/iframe/canvas).
+     */
+    height?: string;
     /** Extra styles merged onto the body div (e.g. flex column layout for nested flex children) */
     bodyStyle?: React.CSSProperties;
 }
-export declare function ModalView({ open, onClose, title, subtitle, headerIcon, children, footerLeft, footerRight, size, showCloseIcon, headerColor, headerGradient, headerRight, noPadding, elevated, mode, maxHeight, bodyStyle, }: ModalViewProps): import("react").JSX.Element | null;
+export declare function ModalView({ open, onClose, title, subtitle, headerIcon, children, footerLeft, footerRight, size, showCloseIcon, headerColor, headerGradient, headerRight, noPadding, elevated, mode, maxHeight, height, bodyStyle, }: ModalViewProps): import("react").JSX.Element | null;

package/dist/lib/components/modal/NotificationCenterView.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface NotificationItem {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp: string;
+    read?: boolean;
+    icon?: ReactNode;
+    onClick?: () => void;
+}
+export interface NotificationCenterViewProps {
+    notifications: NotificationItem[];
+    onMarkAllRead?: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+/** Bell icon + dropdown notification list, unread-count badge. */
+export declare function NotificationCenterView({ notifications, onMarkAllRead, size, color, className, }: NotificationCenterViewProps): import("react").JSX.Element;

package/dist/lib/components/modal/PopoverView.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface PopoverViewProps {
+    open: boolean;
+    onClose: () => void;
+    anchorEl: HTMLElement | null;
+    children: ReactNode;
+    placement?: PopoverPlacement;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+}
+/**
+ * Generic anchored floating-content primitive — extracted positioning logic
+ * shared conceptually with SelectInputView's dropdown / InfoPopupView, but
+ * exposed as a standalone component for any custom popover content.
+ */
+export declare function PopoverView({ open, onClose, anchorEl, children, placement, size, borderRadius, color, className, }: PopoverViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/SpotlightTourView.d.ts

@@ -0,0 +1,18 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface SpotlightTourStep {
+    /** CSS selector for the element to spotlight. */
+    target: string;
+    title: string;
+    content: string;
+}
+export interface SpotlightTourViewProps {
+    open: boolean;
+    steps: SpotlightTourStep[];
+    stepIndex: number;
+    onNext: () => void;
+    onPrev: () => void;
+    onClose: () => void;
+    size?: DuiSize;
+    color?: string;
+}
+export declare function SpotlightTourView({ open, steps, stepIndex, onNext, onPrev, onClose, size, color, }: SpotlightTourViewProps): import('react').ReactPortal | null;

package/dist/lib/components/modal/StackedToastDeckView.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface ToastDeckEntry {
+    id: string;
+    content: ReactNode;
+    color?: string;
+}
+export interface StackedToastDeckViewProps {
+    toasts: ToastDeckEntry[];
+    onDismiss: (id: string) => void;
+    size?: DuiSize;
+    width?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Toasts don't stack vertically — older ones shrink and recede behind the newest like a card deck; click to fan out. */
+export declare function StackedToastDeckView({ toasts, onDismiss, size, width, className, style, }: StackedToastDeckViewProps): import("react").JSX.Element;

package/dist/lib/components/modal/TooltipView.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipTriggerProps {
+    onMouseEnter?: (e: React.MouseEvent) => void;
+    onMouseLeave?: (e: React.MouseEvent) => void;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    [key: string]: unknown;
+}
+export interface TooltipViewProps {
+    content: ReactNode;
+    /**
+     * Trigger element — must forward its ref to a real DOM node (native elements
+     * like `<button>`/`<span>` work out of the box). If wrapping a DUI component
+     * that doesn't forward refs, wrap it in a `<span>` first:
+     * `<TooltipView content="..."><span><ButtonView>Save</ButtonView></span></TooltipView>`.
+     */
+    children: ReactElement<TooltipTriggerProps>;
+    placement?: TooltipPlacement;
+    /** ms before showing on hover/focus. Default 300. */
+    delay?: number;
+    size?: DuiSize;
+    color?: string;
+    disabled?: boolean;
+}
+export declare function TooltipView({ content, children, placement, delay, size, color, disabled, }: TooltipViewProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/rearrange/RearrangeView.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export interface RearrangeItem {
     /** Stable unique id. */
@@ -7,8 +7,8 @@ export interface RearrangeItem {
     label?: string;
     /** Enabled state — shows a checkbox when `selectable` is on. */
     enabled?: boolean;
-    /** Optional leading glyph / emoji. */
-    icon?: string;
+    /** Optional leading glyph — pass a DUI icon component, never an emoji. */
+    icon?: ReactNode;
     /** Optional custom row content (overrides label). */
     render?: () => React.ReactNode;
     /** Lock this row from being reordered or toggled. */

package/dist/lib/components/rearrange/SortableView.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface SortableRow {
+    /** Stable unique id. */
+    id: string;
+    /** The row's content — rendered untouched inside the sortable wrapper. */
+    node: ReactNode;
+}
+export interface SortableViewProps {
+    rows: SortableRow[];
+    /** Fired once per completed drag with the source and target indices. */
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    /** Wrapper element per row — use 'li' inside a <ul>/<ol>. Default 'div'. */
+    as?: 'div' | 'li';
+    /** Accent color for the drop indicator + handle hover. */
+    accentColor?: string;
+    /** Disables all dragging (rows render bare). */
+    disabled?: boolean;
+    /** Extra class per row wrapper. */
+    rowClassName?: string;
+    style?: CSSProperties;
+}
+/**
+ * SortableView — headless drag-to-reorder for arbitrary markup, the invisible
+ * sibling of RearrangeView. RearrangeView owns its row chrome (list rows,
+ * checkboxes); SortableView wraps YOUR rows (resume bullets, canvas items,
+ * cards…) and adds only a hover grab-handle in the left gutter plus a drop
+ * indicator line. Rows drag exclusively from the handle, so inline editing,
+ * text selection, and buttons inside the row keep working.
+ *
+ * Renders a fragment of row wrappers — the caller owns the container
+ * (pass `as="li"` to stay valid inside a <ul>).
+ */
+export declare function SortableView({ rows, onReorder, as, accentColor, disabled, rowClassName, style, }: SortableViewProps): import("react").JSX.Element;

package/dist/lib/components/tabs/TabBarView.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
 export type TabBarProtocol = 'rest' | 'graphql' | 'websocket' | 'grpc' | 'soap' | 'ai' | 'mcp';
 export type TabBarTabType = 'request' | 'settings' | 'mock-server' | 'daakia-ai';
@@ -11,6 +12,25 @@ export interface TabBarTab {
     dirty?: boolean;
     pinned?: boolean;
     rtProtocol?: RealtimeProtocol;
+    /** Per-tab color override — takes priority over type/protocol-derived
+     * colors and the shared `accentColor` prop. Opt-in only. */
+    accentColor?: string;
+    /** Force the close (×) button always visible instead of hover-reveal —
+     * same treatment `type: 'settings'`/`'mock-server'` already get. Opt-in
+     * only, for plain/untyped tabs that behave like closable documents. */
+    alwaysShowClose?: boolean;
+    /** Suppresses the close button entirely WITHOUT the 📌 pinned badge —
+     * for tabs that must stay open but aren't conceptually "pinned" (e.g. a
+     * permanent home/builder tab). `pinned` is a decorative state of its own;
+     * use `noClose` when you just want no close affordance and no badge. */
+    noClose?: boolean;
+    /** Leading glyph before the label — pass a DUI icon, colored by the caller.
+     * Takes priority over the type/protocol-derived badge. Opt-in only. */
+    icon?: ReactNode;
+    /** Hover preview — arbitrary content (e.g. a mini document thumbnail)
+     * shown in a floating card under the tab after a short hover delay.
+     * Rendered through a portal so the scrollable tab strip can't clip it. */
+    preview?: ReactNode;
 }
 export interface TabBarViewProps {
     tabs: TabBarTab[];
@@ -18,6 +38,14 @@ export interface TabBarViewProps {
     onTabClick: (id: string) => void;
     onTabClose?: (id: string) => void;
     onAddTab?: () => void;
+    /** Right-click on a tab — caller owns the resulting context menu (e.g. DUI's own ContextMenuView). */
+    onTabContextMenu?: (id: string, e: React.MouseEvent) => void;
+    /** Inline rename — when set to a tab's id, that tab's label becomes an editable input. */
+    renamingId?: string;
+    renameValue?: string;
+    onRenameChange?: (value: string) => void;
+    onRenameCommit?: () => void;
+    onRenameCancel?: () => void;
     accentColor?: string;
     /** Falls back to DuiProvider size when omitted. Overrides `height`. */
     size?: DuiSize;
@@ -25,4 +53,4 @@ export interface TabBarViewProps {
     height?: number;
     className?: string;
 }
-export declare function TabBarView({ tabs, activeTabId, onTabClick, onTabClose, onAddTab, accentColor, size, height, className, }: TabBarViewProps): import("react").JSX.Element;
+export declare function TabBarView({ tabs, activeTabId, onTabClick, onTabClose, onAddTab, onTabContextMenu, renamingId, renameValue, onRenameChange, onRenameCommit, onRenameCancel, accentColor, size, height, className, }: TabBarViewProps): import("react").JSX.Element;

package/dist/lib/core/AvatarBase.d.ts

@@ -0,0 +1,21 @@
+import { DuiSize } from './DuiTypes';
+export interface AvatarBaseConfig {
+    /** Avatar circle diameter (px) */
+    diameter: number;
+    /** Presence/status dot diameter (px) */
+    dotSize: number;
+    fontSize: string;
+    color: string | undefined;
+    activeColor: string | undefined;
+}
+/** Local override props that any avatar/presence component can accept. */
+export interface AvatarContainerProps {
+    color?: string;
+    activeColor?: string;
+}
+/**
+ * Category base for: AvatarView, AvatarGroupView, PresenceDotView,
+ * AvatarUploadView, and any future identity/presence component.
+ * Falls back to DuiProvider values when no local prop is given.
+ */
+export declare function useAvatarBase(sizeProp?: DuiSize, overrides?: AvatarContainerProps): AvatarBaseConfig;