entangle-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,178 @@
+import React from 'react';
+import { Prettify } from '../../../types/utilities.js';
+import { BaseComponent, Size } from '../../../types/common.js';
+
+/**
+ * Props specific to Slider component
+ */
+interface SliderBaseProps extends Omit<BaseComponent, 'onChange'> {
+    /**
+     * Current numeric value
+     */
+    value: number;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: number) => void;
+    /**
+     * Minimum allowed value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step size for value increments
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Step size when Shift is held (precision mode)
+     * @default step / 10
+     */
+    precisionStep?: number;
+    /**
+     * Step size when Ctrl is held (large steps)
+     * @default step * 10
+     */
+    largeStep?: number;
+    /**
+     * Number of decimal places to round to
+     */
+    precision?: number;
+    /**
+     * Slider size using standard library sizing
+     * - `sm`: Compact for toolbars
+     * - `md`: Standard for forms
+     * - `lg`: Prominent sliders
+     * @default "md"
+     */
+    size?: Size;
+    /**
+     * Whether the slider is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the slider is read-only
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Slider label
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the slider
+     */
+    helperText?: string;
+    /**
+     * Error message displayed when error is true
+     */
+    errorMessage?: string;
+    /**
+     * Whether the slider has an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Whether the slider is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Unit suffix to display (e.g., "px", "%", "°")
+     */
+    unit?: string;
+    /**
+     * Format value for display
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Show value tooltip while dragging
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Show tick marks along the track
+     * @default false
+     */
+    showTicks?: boolean;
+    /**
+     * Number of tick marks to show (when showTicks is true)
+     * @default 5
+     */
+    tickCount?: number;
+    /**
+     * Focus event handler
+     */
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * Blur event handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * Key down event handler
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+}
+/**
+ * Props for the Slider component with prettified type for better IntelliSense
+ */
+type SliderProps = Prettify<SliderBaseProps>;
+/**
+ * A professional slider component with drag interaction and keyboard support.
+ *
+ * Features:
+ * - Smooth drag interaction with visual feedback
+ * - Keyboard navigation with arrow keys
+ * - Modifier key support: Ctrl (large steps), Shift (precision)
+ * - Optional tick marks and value tooltip
+ * - Comprehensive theming and size variants
+ * - Accessible with proper ARIA attributes
+ *
+ * @example
+ * ```tsx
+ * // Basic slider
+ * <Slider
+ *   value={opacity}
+ *   onChange={setOpacity}
+ *   min={0}
+ *   max={1}
+ *   step={0.1}
+ *   unit="%"
+ * />
+ *
+ * // Slider with ticks and custom formatting
+ * <Slider
+ *   value={rotation}
+ *   onChange={setRotation}
+ *   min={0}
+ *   max={360}
+ *   step={15}
+ *   unit="°"
+ *   showTicks
+ *   tickCount={8}
+ *   formatValue={(v) => `${v}°`}
+ * />
+ *
+ * // Precision slider for fine control
+ * <Slider
+ *   value={scale}
+ *   onChange={setScale}
+ *   min={0.1}
+ *   max={5}
+ *   step={0.1}
+ *   precisionStep={0.01}
+ *   largeStep={1}
+ *   precision={2}
+ * />
+ * ```
+ */
+declare const Slider: React.FC<SliderProps>;
+
+export { Slider };
+export type { SliderBaseProps, SliderProps };

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

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TreeViewProps } from './TreeView.types.js';
+
+/**
+ * A hierarchical collapsible tree for displaying and managing nested data.
+ *
+ * Supports multi-selection, keyboard navigation, inline renaming,
+ * and custom node rendering. The most iconic editor panel — scene hierarchy,
+ * file browser, layer stack.
+ *
+ * @example
+ * ```tsx
+ * const nodes = [
+ *   { id: '1', label: 'Root', children: [
+ *     { id: '1.1', label: 'Child A' },
+ *     { id: '1.2', label: 'Child B' },
+ *   ]},
+ * ];
+ * <TreeView nodes={nodes} onSelectionChange={setSelected} />
+ * ```
+ */
+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;
+    displayName: string;
+};
+
+export { TreeView };

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Prettify } from '../../../types/utilities.js';
+import { BaseComponent, Size } from '../../../types/common.js';
+
+type TreeViewSize = Size;
+/**
+ * Selection mode for the tree.
+ * - `single`: Only one node can be selected
+ * - `multiple`: Multiple nodes via Ctrl+Click, Shift+Click
+ * - `none`: No selection, tree is display-only
+ */
+type TreeSelectionMode = 'single' | 'multiple' | 'none';
+/**
+ * Generic tree node data structure.
+ */
+interface TreeNodeData {
+    /** Unique identifier for this node */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional icon rendered before the label */
+    icon?: React.ReactNode;
+    /** Child nodes (empty array or undefined for leaf nodes) */
+    children?: TreeNodeData[];
+    /** Whether this node is disabled */
+    disabled?: boolean;
+    /** Whether this node can be dragged */
+    draggable?: boolean;
+    /** Whether this node can accept children via drag-and-drop */
+    droppable?: boolean;
+    /** Whether this node can be renamed inline */
+    renamable?: boolean;
+    /** Additional data attached to this node */
+    data?: Record<string, unknown>;
+}
+/**
+ * State information passed to render functions.
+ */
+interface TreeNodeState {
+    selected: boolean;
+    expanded: boolean;
+    focused: boolean;
+    depth: number;
+    isLeaf: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+}
+interface TreeViewBaseProps extends Omit<BaseComponent, 'onChange'> {
+    /**
+     * Tree data — array of root-level nodes.
+     */
+    nodes: TreeNodeData[];
+    /**
+     * Expanded node IDs (controlled).
+     */
+    expandedIds?: string[];
+    /**
+     * Default expanded node IDs (uncontrolled).
+     */
+    defaultExpandedIds?: string[];
+    /**
+     * Selected node IDs (controlled).
+     */
+    selectedIds?: string[];
+    /**
+     * Default selected node IDs (uncontrolled).
+     */
+    defaultSelectedIds?: string[];
+    /**
+     * Selection mode.
+     * @default "single"
+     */
+    selectionMode?: TreeSelectionMode;
+    /**
+     * Whether to allow inline renaming (double-click on label).
+     * @default false
+     */
+    renamable?: boolean;
+    /**
+     * Tree node size.
+     * @default "md"
+     */
+    size?: TreeViewSize;
+    /**
+     * Indentation per depth level in pixels.
+     * @default 16
+     */
+    indent?: number;
+    /**
+     * Whether to show expand/collapse chevrons for parent nodes.
+     * @default true
+     */
+    showChevrons?: boolean;
+    /**
+     * Whether to show connecting guide lines.
+     * @default false
+     */
+    showGuideLines?: boolean;
+    /**
+     * Whether to expand parent nodes when they are selected.
+     * @default false
+     */
+    expandOnSelect?: boolean;
+    /**
+     * Maximum height before scrolling.
+     */
+    maxHeight?: number | string;
+    /**
+     * Custom render function for node content.
+     */
+    renderNode?: (node: TreeNodeData, state: TreeNodeState) => React.ReactNode;
+    /**
+     * Custom render function for trailing actions (right side of node).
+     */
+    renderActions?: (node: TreeNodeData, state: TreeNodeState) => React.ReactNode;
+    /**
+     * Empty state content when nodes array is empty.
+     */
+    emptyContent?: React.ReactNode;
+    /** Fired when expanded nodes change. */
+    onExpandedChange?: (expandedIds: string[]) => void;
+    /** Fired when selected nodes change. */
+    onSelectionChange?: (selectedIds: string[]) => void;
+    /** Fired when a node is clicked. */
+    onNodeClick?: (node: TreeNodeData, event: React.MouseEvent) => void;
+    /** Fired when a node is double-clicked. */
+    onNodeDoubleClick?: (node: TreeNodeData, event: React.MouseEvent) => void;
+    /** Fired when a node is right-clicked. */
+    onNodeContextMenu?: (node: TreeNodeData, event: React.MouseEvent) => void;
+    /** Fired when a node is renamed. */
+    onNodeRename?: (nodeId: string, newLabel: string) => void;
+}
+type TreeViewProps = Prettify<TreeViewBaseProps>;
+
+export type { TreeNodeData, TreeNodeState, TreeSelectionMode, TreeViewBaseProps, TreeViewProps, TreeViewSize };

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

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VectorInputProps } from './VectorInput.types.js';
+
+/**
+ * A grouped numeric input for Vec2, Vec3, and Vec4 vectors.
+ *
+ * Used for position, rotation, scale, color channels, UV coordinates,
+ * bounding box extents, and more. Composes NumberInput with per-axis labels,
+ * optional color coding, and linked/unlinked proportional editing.
+ *
+ * @example
+ * ```tsx
+ * <VectorInput
+ *   label="Position"
+ *   value={[0, 0, 0]}
+ *   onChange={(val) => setPosition(val)}
+ *   unit="px"
+ * />
+ * ```
+ */
+declare const VectorInput: {
+    ({ value: controlledValue, defaultValue, dimension, labelPreset, axisLabels: customAxisLabels, colorPreset, axisColors: customAxisColors, min, max, step, precisionStep, largeStep, precision, unit, size, label, helperText, error, errorMessage, disabled, showLink, defaultLinked, linked: controlledLinked, onLinkedChange, direction, gap, onChange, onChangeComplete, className, testId, ...rest }: VectorInputProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { VectorInput };

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

@@ -0,0 +1,158 @@
+import { Prettify } from '../../../types/utilities.js';
+import { BaseComponent, Size } from '../../../types/common.js';
+
+type VectorInputSize = Size;
+/**
+ * Number of components in the vector.
+ */
+type VectorDimension = 2 | 3 | 4;
+/**
+ * Axis label preset configurations.
+ * - `xyz`: X, Y, Z, W — position, rotation, scale
+ * - `rgba`: R, G, B, A — color channels
+ * - `uvw`: U, V, W — texture coordinates
+ * - `custom`: use `axisLabels` prop
+ */
+type VectorLabelPreset = 'xyz' | 'rgba' | 'uvw' | 'custom';
+/**
+ * Color coding preset for axis labels.
+ * - `spatial`: X=red, Y=green, Z=blue, W=purple (standard 3D convention)
+ * - `color`: R=red, G=green, B=blue, A=white
+ * - `none`: all labels use default text color
+ * - `custom`: use `axisColors` prop
+ */
+type VectorColorPreset = 'spatial' | 'color' | 'none' | 'custom';
+interface VectorInputBaseProps extends Omit<BaseComponent, 'onChange' | 'value' | 'defaultValue'> {
+    /**
+     * Current vector value (controlled).
+     * Array length must match `dimension`.
+     */
+    value?: number[];
+    /**
+     * Default vector value (uncontrolled).
+     */
+    defaultValue?: number[];
+    /**
+     * Number of vector components.
+     * @default 3
+     */
+    dimension?: VectorDimension;
+    /**
+     * Axis label preset.
+     * @default "xyz"
+     */
+    labelPreset?: VectorLabelPreset;
+    /**
+     * Custom axis labels (when labelPreset is "custom").
+     * Array length must match `dimension`.
+     */
+    axisLabels?: string[];
+    /**
+     * Color coding for axis labels.
+     * @default "spatial"
+     */
+    colorPreset?: VectorColorPreset;
+    /**
+     * Custom axis colors (when colorPreset is "custom").
+     * Array of CSS color strings, length must match `dimension`.
+     */
+    axisColors?: string[];
+    /**
+     * Minimum allowed value (applies to all axes).
+     */
+    min?: number;
+    /**
+     * Maximum allowed value (applies to all axes).
+     */
+    max?: number;
+    /**
+     * Step size for value increments.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Step size when Shift is held (precision mode).
+     */
+    precisionStep?: number;
+    /**
+     * Step size when Ctrl is held (large steps).
+     */
+    largeStep?: number;
+    /**
+     * Number of decimal places.
+     * @default 2
+     */
+    precision?: number;
+    /**
+     * Unit suffix displayed in each input (e.g., "px", "deg", "%").
+     */
+    unit?: string;
+    /**
+     * Component size using standard library sizing.
+     * @default "md"
+     */
+    size?: VectorInputSize;
+    /**
+     * Label displayed above the vector input.
+     */
+    label?: string;
+    /**
+     * Helper text displayed below.
+     */
+    helperText?: string;
+    /**
+     * Error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Error message.
+     */
+    errorMessage?: string;
+    /**
+     * Whether the vector input is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show the lock/link proportions toggle.
+     * @default false
+     */
+    showLink?: boolean;
+    /**
+     * Whether axes are linked by default.
+     * @default false
+     */
+    defaultLinked?: boolean;
+    /**
+     * Whether axes are linked (controlled).
+     */
+    linked?: boolean;
+    /**
+     * Callback when linked state changes.
+     */
+    onLinkedChange?: (linked: boolean) => void;
+    /**
+     * Layout direction.
+     * @default "row"
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Gap between axis inputs in pixels.
+     * @default 2
+     */
+    gap?: number;
+    /**
+     * Callback when any axis value changes.
+     * @param value - Complete vector array with the changed axis.
+     * @param axisIndex - Which axis changed (0-based).
+     */
+    onChange?: (value: number[], axisIndex: number) => void;
+    /**
+     * Callback when editing is committed (blur, Enter).
+     */
+    onChangeComplete?: (value: number[]) => void;
+}
+type VectorInputProps = Prettify<VectorInputBaseProps>;
+
+export type { VectorColorPreset, VectorDimension, VectorInputBaseProps, VectorInputProps, VectorInputSize, VectorLabelPreset };

package/dist/types/components/editor/PropertyInspector/PropertyGroup.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PropertyGroupProps } from './PropertyInspector.types.js';
+
+declare const PropertyGroup: React.FC<PropertyGroupProps>;
+
+export { PropertyGroup };