entangle-ui 0.8.2 → 0.10.0

package/dist/types/components/controls/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MultiSelectProps } from './MultiSelect.types.js';
+
+/**
+ * Multi-value select that lets the user pick several options from a dropdown.
+ * Selected values are rendered as inline chips inside the trigger; the rest
+ * collapse into a "+N more" badge.
+ *
+ * Supports searchable mode, grouped options, controlled and uncontrolled
+ * modes, keyboard navigation, an optional `max` cap, and a clear-all button.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   label="Tags"
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *     { value: 'svelte', label: 'Svelte' },
+ *   ]}
+ *   value={tags}
+ *   onChange={setTags}
+ * />
+ * ```
+ */
+declare function MultiSelect<T extends string = string>({ value, defaultValue, options, placeholder, searchable, searchPlaceholder, filterFn, emptyMessage, max, maxInlineChips, size, variant, label, helperText, error, errorMessage, disabled, required, clearable, maxDropdownHeight, minDropdownWidth, closeOnSelect, name, onChange, onOpenChange, className, style, testId, ref, id: idProp, ...rest }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace MultiSelect {
+    var displayName: string;
+}
+
+export { MultiSelect };

package/dist/types/components/controls/MultiSelect/MultiSelect.types.d.ts

@@ -0,0 +1,85 @@
+import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+
+type MultiSelectSize = Size;
+type MultiSelectVariant = 'default' | 'ghost' | 'filled';
+interface MultiSelectOption<T extends string = string> {
+    /** Unique value used for selection */
+    value: T;
+    /** Display label (falls back to value when omitted) */
+    label?: string;
+    /** Optional icon rendered before the label */
+    icon?: React.ReactNode;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface MultiSelectOptionGroup<T extends string = string> {
+    /** Group header label */
+    label: string;
+    /** Options inside this group */
+    options: MultiSelectOption<T>[];
+}
+interface MultiSelectBaseProps<T extends string = string> extends Omit<BaseComponent<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue' | 'children'> {
+    /** Controlled list of selected values */
+    value?: T[];
+    /** Default selection (uncontrolled) */
+    defaultValue?: T[];
+    /** Options — flat list or grouped */
+    options: Array<MultiSelectOption<T> | MultiSelectOptionGroup<T>>;
+    /** Placeholder shown when nothing is selected */
+    placeholder?: string;
+    /** Whether to render a search input inside the dropdown */
+    searchable?: boolean;
+    /** Placeholder for the search input */
+    searchPlaceholder?: string;
+    /** Custom filter for searchable mode */
+    filterFn?: (option: MultiSelectOption<T>, query: string) => boolean;
+    /** Message shown when search yields no results */
+    emptyMessage?: string;
+    /** Maximum number of selected items */
+    max?: number;
+    /**
+     * Cap of inline chips rendered in the trigger before falling back to a
+     * "+N more" badge. `Infinity` to render every chip. Set to `0` to never
+     * render chips and only show the count.
+     * @default 3
+     */
+    maxInlineChips?: number;
+    /** Component size */
+    size?: MultiSelectSize;
+    /** Visual variant */
+    variant?: MultiSelectVariant;
+    /** Label rendered above the trigger */
+    label?: string;
+    /** Helper text rendered below */
+    helperText?: string;
+    /** Error state */
+    error?: boolean;
+    /** Error message — overrides `helperText` when `error` is true */
+    errorMessage?: string;
+    /** Disable the entire control */
+    disabled?: boolean;
+    /** Mark the field as required */
+    required?: boolean;
+    /** Show a clear-all button when at least one value is selected */
+    clearable?: boolean;
+    /** Maximum dropdown height in pixels */
+    maxDropdownHeight?: number;
+    /** Minimum dropdown width in pixels */
+    minDropdownWidth?: number;
+    /**
+     * Close the dropdown after each selection.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    /** Hidden form-input name. Selected values are joined by `,`. */
+    name?: string;
+    /** Selection change handler */
+    onChange?: (values: T[]) => void;
+    /** Open state change handler */
+    onOpenChange?: (open: boolean) => void;
+}
+type MultiSelectProps<T extends string = string> = Prettify<MultiSelectBaseProps<T>>;
+
+export type { MultiSelectBaseProps, MultiSelectOption, MultiSelectOptionGroup, MultiSelectProps, MultiSelectSize, MultiSelectVariant };

package/dist/types/components/controls/NumberInput/NumberInput.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
-import { BaseComponent, Size } from '../../../types/common.js';
 import { UseNumberInputOptions } from './useNumberInput.js';
+import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
 
 /**
  * Props specific to NumberInput component

package/dist/types/components/controls/Select/Select.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type SelectSize = Size;
 type SelectVariant = 'default' | 'ghost' | 'filled';

package/dist/types/components/controls/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
 
 /**
  * Props specific to Slider component

package/dist/types/components/controls/TagInput/TagInput.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TagInputProps } from './TagInput.types.js';
+
+/**
+ * Multi-value input that captures a list of strings ("tags") rendered as
+ * removable chips. Supports controlled and uncontrolled modes, validation,
+ * configurable commit keys, and custom chip rendering.
+ *
+ * @example
+ * ```tsx
+ * <TagInput
+ *   label="Keywords"
+ *   placeholder="Add a keyword..."
+ *   defaultValue={['react', 'typescript']}
+ *   onChange={setTags}
+ * />
+ * ```
+ */
+declare function TagInput({ value, defaultValue, onChange, placeholder, separators, addOnBlur, allowDuplicates, max, validate, normalize, onValidate, renderTag, size, variant, label, helperText, error, errorMessage, disabled, required, readOnly, name, inputAriaLabel, inputRef: inputRefProp, className, style, testId, id: idProp, ref, ...rest }: TagInputProps): react_jsx_runtime.JSX.Element;
+declare namespace TagInput {
+    var displayName: string;
+}
+
+export { TagInput };

package/dist/types/components/controls/TagInput/TagInput.types.d.ts

@@ -0,0 +1,100 @@
+import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+
+type TagInputSize = Size;
+type TagInputVariant = 'default' | 'ghost' | 'filled';
+/** Keys (or characters) that commit the current draft as a tag. */
+type TagInputSeparator = 'Enter' | 'Comma' | 'Space' | 'Tab';
+interface TagInputRenderTagState {
+    /** Tag value */
+    tag: string;
+    /** Position in the array */
+    index: number;
+    /** Whether the parent component is disabled */
+    disabled: boolean;
+    /** Remove this tag */
+    remove: () => void;
+}
+interface TagInputBaseProps extends Omit<BaseComponent, 'onChange' | 'defaultValue' | 'children'> {
+    /** Controlled list of tags */
+    value?: string[];
+    /** Default tags (uncontrolled) */
+    defaultValue?: string[];
+    /** Called whenever the tag list changes */
+    onChange?: (tags: string[]) => void;
+    /** Placeholder shown in the inner input when empty */
+    placeholder?: string;
+    /**
+     * Keys / characters that commit the current draft to a tag.
+     * @default ['Enter', 'Comma']
+     */
+    separators?: TagInputSeparator[];
+    /**
+     * Add the current draft as a tag when the input loses focus.
+     * @default false
+     */
+    addOnBlur?: boolean;
+    /**
+     * Allow duplicate tags. When `false`, attempts to add an existing tag
+     * are ignored (and `onValidate` receives `'duplicate'`).
+     * @default false
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Maximum number of tags. When reached, the input is disabled.
+     */
+    max?: number;
+    /**
+     * Synchronous validator. Return `false` (or a string with an error message)
+     * to reject the candidate value. Return `true` to accept.
+     */
+    validate?: (value: string, current: string[]) => boolean | string;
+    /**
+     * Transform the candidate before validation. Defaults to trimming.
+     */
+    normalize?: (value: string) => string;
+    /**
+     * Called when a candidate fails validation. Receives the raw value, the
+     * normalized value, and the reason (`'duplicate'`, `'max'`, `'empty'`,
+     * `'invalid'`, or the validator's string).
+     */
+    onValidate?: (rawValue: string, reason: 'duplicate' | 'max' | 'empty' | 'invalid' | (string & {})) => void;
+    /**
+     * Render a single chip. When omitted the built-in chip is used.
+     */
+    renderTag?: (state: TagInputRenderTagState) => React.ReactNode;
+    /**
+     * Component size.
+     * @default 'md'
+     */
+    size?: TagInputSize;
+    /**
+     * Visual variant for the wrapper.
+     * @default 'default'
+     */
+    variant?: TagInputVariant;
+    /** Label rendered above the input */
+    label?: string;
+    /** Helper text rendered below the input */
+    helperText?: string;
+    /** Error state */
+    error?: boolean;
+    /** Error message — shown in place of `helperText` when `error` is true */
+    errorMessage?: string;
+    /** Disable the entire control */
+    disabled?: boolean;
+    /** Mark the field as required */
+    required?: boolean;
+    /** Read-only — chips are visible but not removable, input is hidden */
+    readOnly?: boolean;
+    /** Name attribute used for form submission (joined by `,`) */
+    name?: string;
+    /** ARIA label for the inner text input */
+    inputAriaLabel?: string;
+    /** Ref forwarded to the inner `<input>` */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+type TagInputProps = Prettify<TagInputBaseProps>;
+
+export type { TagInputBaseProps, TagInputProps, TagInputRenderTagState, TagInputSeparator, TagInputSize, TagInputVariant };

package/dist/types/components/controls/TreeView/TreeView.d.ts

@@ -20,7 +20,7 @@ import { TreeViewProps } from './TreeView.types.js';
  * ```
  */
 declare const TreeView: {
-    ({ nodes, expandedIds, defaultExpandedIds, selectedIds, defaultSelectedIds, selectionMode, renamable, size, indent, showChevrons, showGuideLines, expandOnSelect, maxHeight, renderNode, renderActions, emptyContent, onExpandedChange, onSelectionChange, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeRename, className, testId, ...rest }: TreeViewProps): react_jsx_runtime.JSX.Element;
+    ({ nodes, expandedIds, defaultExpandedIds, selectedIds, defaultSelectedIds, selectionMode, renamable, size, indent, showChevrons, showGuideLines, expandOnSelect, expandOnClick, maxHeight, renderNode, renderActions, emptyContent, dropTargetId, onExpandedChange, onSelectionChange, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeRename, onNodeDragOver, onNodeDragLeave, onNodeDrop, className, testId, ...rest }: TreeViewProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/types/components/controls/TreeView/TreeView.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import { Size, BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
-import { BaseComponent, Size } from '../../../types/common.js';
+import React from 'react';
 
 type TreeViewSize = Size;
 /**
@@ -101,6 +101,12 @@ interface TreeViewBaseProps extends Omit<BaseComponent, 'onChange'> {
      * @default false
      */
     expandOnSelect?: boolean;
+    /**
+     * Whether clicking anywhere on a parent node's row toggles its expansion
+     * (not just the chevron). Leaf nodes are unaffected.
+     * @default false
+     */
+    expandOnClick?: boolean;
     /**
      * Maximum height before scrolling.
      */
@@ -129,6 +135,22 @@ interface TreeViewBaseProps extends Omit<BaseComponent, 'onChange'> {
     onNodeContextMenu?: (node: TreeNodeData, event: React.MouseEvent) => void;
     /** Fired when a node is renamed. */
     onNodeRename?: (nodeId: string, newLabel: string) => void;
+    /**
+     * Id of the node currently highlighted as an active drop target. The matching
+     * row gets a `data-drop-target="true"` attribute and an accent highlight. Pair
+     * with the `onNodeDrag*` / `onNodeDrop` callbacks to build drag-and-drop on top
+     * of the tree (see `FileTree`). `null`/`undefined` means no active target.
+     */
+    dropTargetId?: string | null;
+    /**
+     * Fired on `dragover` over a node row. Call `event.preventDefault()` to mark
+     * the row as a valid drop target (so a subsequent `drop` fires).
+     */
+    onNodeDragOver?: (node: TreeNodeData, event: React.DragEvent) => void;
+    /** Fired on `dragleave` from a node row. */
+    onNodeDragLeave?: (node: TreeNodeData, event: React.DragEvent) => void;
+    /** Fired on `drop` onto a node row. */
+    onNodeDrop?: (node: TreeNodeData, event: React.DragEvent) => void;
 }
 type TreeViewProps = Prettify<TreeViewBaseProps>;
 

package/dist/types/components/controls/VectorInput/VectorInput.types.d.ts

@@ -1,5 +1,5 @@
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
 
 type VectorInputSize = Size;
 /**

package/dist/types/components/data/DataTable/DataTable.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DataTableProps } from './DataTable.types.js';
+
+declare const DataTable: <R>(props: DataTableProps<R> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;
+
+export { DataTable };

package/dist/types/components/data/DataTable/DataTable.types.d.ts

@@ -0,0 +1,159 @@
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+
+/** Visual density. Affects row height and cell padding. */
+type DataTableDensity = 'comfortable' | 'compact' | 'dense';
+/** Cell horizontal alignment. */
+type DataTableAlign = 'left' | 'center' | 'right';
+/** Sort direction. `null` means unsorted (third state of the sort cycle). */
+type DataTableSortDirection = 'asc' | 'desc' | null;
+/** Selection behavior. */
+type DataTableSelectionMode = 'single' | 'multiple' | false;
+/**
+ * Description of a single column.
+ *
+ * `R` is the row data type.
+ *
+ * `accessor` may be a string (key of `R`) or a function returning the cell
+ * value. When omitted, `id` is used as a key into `R` if it matches a key,
+ * otherwise the cell is empty.
+ */
+interface DataTableColumn<R> {
+    /** Stable column identifier. Required. */
+    id: string;
+    /** Header content (string or any node). */
+    header?: React.ReactNode;
+    /** How to read the cell value from a row. */
+    accessor?: keyof R | ((row: R, rowIndex: number) => unknown);
+    /**
+     * Cell renderer. Receives the resolved value and the row.
+     * When omitted, the value is rendered with `String(value)` (or empty for
+     * `null`/`undefined`).
+     */
+    cell?: (info: {
+        value: unknown;
+        row: R;
+        rowIndex: number;
+        column: DataTableColumn<R>;
+    }) => React.ReactNode;
+    /** Fixed column width (px or any CSS dimension). */
+    width?: number | string;
+    /** Minimum column width in px (used for resizing). */
+    minWidth?: number;
+    /** Maximum column width in px (used for resizing). */
+    maxWidth?: number;
+    /** When true, header click toggles sort on this column. */
+    sortable?: boolean;
+    /**
+     * Custom comparator. Receives the resolved cell values for two rows.
+     * Default: `localeCompare` for strings, `<` for numbers, `Date`,
+     * `null`/`undefined` ordered last.
+     */
+    sortComparator?: (a: unknown, b: unknown, rowA: R, rowB: R) => number;
+    /** Cell horizontal alignment. @default "left" */
+    align?: DataTableAlign;
+    /** Per-column className. */
+    className?: string;
+    /** When true, this column sticks to the left edge while scrolling. */
+    sticky?: boolean;
+    /** When false, the column header is not focusable for keyboard users. */
+    ariaHidden?: boolean;
+    /** When true, this column cannot be resized even if `resizableColumns` is on. */
+    disableResize?: boolean;
+}
+/** Controlled sort state. */
+interface DataTableSortState {
+    /** Column id, or null when no sort is applied. */
+    columnId: string | null;
+    /** Direction. `null` is treated as no sort. */
+    direction: DataTableSortDirection;
+}
+/** Selection state. Always an array of row keys; for `single` it has 0 or 1 items. */
+type DataTableSelectionState = string[];
+/** Argument passed to render slot helpers. */
+interface DataTableRowRenderInfo<R> {
+    row: R;
+    rowIndex: number;
+    selected: boolean;
+}
+/** Virtualization mode. `'auto'` enables virtualization above the threshold. */
+type DataTableVirtualizationMode = boolean | 'auto';
+interface DataTableBaseProps<R> extends Omit<BaseComponent, 'onSelect' | 'children' | 'onChange'> {
+    /** Row data. */
+    rows: readonly R[];
+    /** Column definitions. */
+    columns: readonly DataTableColumn<R>[];
+    /**
+     * How to derive a stable key for each row. Either a string key on `R` or a
+     * function. Required for selection and virtualization stability.
+     */
+    rowKey: keyof R | ((row: R, rowIndex: number) => string);
+    /** Visual density. @default "comfortable" */
+    density?: DataTableDensity;
+    /** Sticky column header. @default true */
+    stickyHeader?: boolean;
+    /** Controlled sort state. */
+    sort?: DataTableSortState | null;
+    /** Default sort state for the uncontrolled mode. */
+    defaultSort?: DataTableSortState | null;
+    /** Called when the user changes the sort. */
+    onSortChange?: (state: DataTableSortState) => void;
+    /**
+     * When true, the consumer fully owns sorting and the table renders rows
+     * as-is. Useful for server-side sorting. @default false
+     */
+    manualSort?: boolean;
+    /** Selection mode. @default false */
+    selectionMode?: DataTableSelectionMode;
+    /** Controlled selection (array of row keys). */
+    selection?: DataTableSelectionState;
+    /** Default selection for the uncontrolled mode. */
+    defaultSelection?: DataTableSelectionState;
+    /** Called when selection changes. */
+    onSelectionChange?: (next: DataTableSelectionState) => void;
+    /** Disable selection of a specific row. */
+    isRowSelectable?: (row: R, rowIndex: number) => boolean;
+    /** Row click handler. Independent of selection. */
+    onRowClick?: (row: R, rowIndex: number, event: React.MouseEvent) => void;
+    /** Row activation (Enter key or double click). */
+    onRowActivate?: (row: R, rowIndex: number) => void;
+    /** Custom row renderer. Receives the default cells; consumer wraps them. */
+    renderRow?: (info: DataTableRowRenderInfo<R>, cells: React.ReactNode) => React.ReactNode;
+    /** Empty state slot (or text). Rendered when `rows.length === 0`. */
+    emptyState?: React.ReactNode;
+    /** Loading flag — renders skeleton rows. @default false */
+    loading?: boolean;
+    /** Number of skeleton rows shown while loading. @default 5 */
+    loadingRowCount?: number;
+    /**
+     * Virtualization mode. `'auto'` enables it once `rows.length` exceeds
+     * `virtualizationThreshold`. Set to `false` for tests / a11y tools or for
+     * very small tables.
+     * @default "auto"
+     */
+    virtualized?: DataTableVirtualizationMode;
+    /** Threshold above which `'auto'` mode flips on. @default 100 */
+    virtualizationThreshold?: number;
+    /** Estimated row height in px. @default depends on density */
+    estimatedRowHeight?: number;
+    /** Number of off-screen rows kept mounted. @default 8 */
+    overscan?: number;
+    /** Total scroll container height. Required when virtualized. @default 480 */
+    height?: number | string;
+    /** Maximum height before scroll engages (non-virtualized mode). */
+    maxHeight?: number | string;
+    /** Resizable columns (drag the right edge of the header). @default false */
+    resizableColumns?: boolean;
+    /** Called when a column is resized. */
+    onColumnResize?: (columnId: string, width: number) => void;
+    /** Optional aria-label for the grid. */
+    'aria-label'?: string;
+    /** Optional aria-labelledby for the grid. */
+    'aria-labelledby'?: string;
+    /** Hidden form id. Forwarded to the root element. */
+    id?: string;
+}
+type DataTableProps<R> = Prettify<DataTableBaseProps<R>>;
+
+export type { DataTableAlign, DataTableBaseProps, DataTableColumn, DataTableDensity, DataTableProps, DataTableRowRenderInfo, DataTableSelectionMode, DataTableSelectionState, DataTableSortDirection, DataTableSortState, DataTableVirtualizationMode };

package/dist/types/components/editor/AssetBrowser/AssetBrowser.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AssetBrowserProps } from './AssetBrowser.types.js';
+
+declare function AssetBrowserRoot(props: AssetBrowserProps): React.ReactElement;
+declare namespace AssetBrowserRoot {
+    var displayName: string;
+}
+declare const AssetBrowser: typeof AssetBrowserRoot & {
+    Toolbar: () => null;
+    Sidebar: () => null;
+};
+
+export { AssetBrowser };