entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/controls/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/controls/Select/Select.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAoCA;AAEA;AAGE;AACF;AAEA;;AAIE;AACE;;;;AAGE;;;AAGJ;AACF;AAEA;AAIE;;AAEF;AAEA;AAEA;AACE;AACA;AACA;;AAGF;AAEA;AAkBA;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;;AA+BD;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;;AAGA;;;;AAQA;;;AAIA;;AAGA;AACA;AACE;AAAiC;AACjC;;;AAIF;;AAMA;AACE;AACA;;AAEA;;AAEA;AAGA;;AAGI;AAEJ;;AAEE;AACA;AACE;;AAEI;AACD;AACH;AACH;AACH;AAEA;AACE;;;;AAGA;AACA;;AAEF;AAEA;;;AAGE;AACA;AACA;AACF;AAEA;;;;AAKI;AACA;;;;;AAQA;;;;AAII;AACF;;;;;;AAOJ;;AAEA;AACE;;;AAKE;;AAEJ;AAEA;;AAEF;;AAGA;;AAIO;AAIP;AAEI;;AAEA;;;AAIE;AACE;;AAEF;;;AAGA;;AAGI;AAEA;;;;;;AAKJ;AACE;;;;;;;;;AASN;;AAKF;AAEI;;AAEA;AACE;AACA;AACA;;;AAGI;;;AAGJ;;;AAGI;;;;;;AASV;AAEI;AACE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;AAII;AAEA;AACA;AACE;;;;AAIN;;AAEE;;;AAGN;AAIF;;;AAIE;AAIF;AACA;;AAGA;AAEI;AACA;;;;AAGG;AACC;;AAEN;;;AAMA;AACE;;;;AAMF;;;AAGI;AACE;;AAEA;AAEA;AAIM;AACA;AACF;;;;AAON;AACF;;AAGF;AACF;AAEA;AACE;AACA;AAEA;AAOM;AACA;AACA;AACD;AAEC;AACE;;AAEJ;AAEE;;;AAGF;AAyBN;AAEA;;;AA8BQ;;;;AAID;AAgDD;AAkBU;AACA;AACF;AA0BhB;AAEA;;"}

package/dist/esm/components/controls/Slider/Slider.css.js

@@ -0,0 +1,17 @@
+import './../../../assets/src/components/controls/Slider/Slider.css.ts.vanilla-C5SJ_7A1.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var fillPercentageVar = 'var(--fillPercentageVar__t8kxxs0)';
+var fillRecipe = createRuntimeFn({defaultClassName:'Slider_fillRecipe__t8kxxsd',variantClassNames:{error:{true:'Slider_fillRecipe_error_true__t8kxxse',false:'Slider_fillRecipe_error_false__t8kxxsf'},isDragging:{true:'Slider_fillRecipe_isDragging_true__t8kxxsg',false:'Slider_fillRecipe_isDragging_false__t8kxxsh'}},defaultVariants:{error:false,isDragging:false},compoundVariants:[]});
+var sliderContainerRecipe = createRuntimeFn({defaultClassName:'Slider_sliderContainerRecipe__t8kxxs3',variantClassNames:{disabled:{true:'Slider_sliderContainerRecipe_disabled_true__t8kxxs4',false:'Slider_sliderContainerRecipe_disabled_false__t8kxxs5'}},defaultVariants:{disabled:false},compoundVariants:[]});
+var sliderWrapperStyle = 'Slider_sliderWrapperStyle__t8kxxs6';
+var thumbPercentageVar = 'var(--thumbPercentageVar__t8kxxs1)';
+var thumbRecipe = createRuntimeFn({defaultClassName:'Slider_thumbRecipe__t8kxxsi',variantClassNames:{size:{sm:'Slider_thumbRecipe_size_sm__t8kxxsj',md:'Slider_thumbRecipe_size_md__t8kxxsk',lg:'Slider_thumbRecipe_size_lg__t8kxxsl'},error:{true:'Slider_thumbRecipe_error_true__t8kxxsm',false:'Slider_thumbRecipe_error_false__t8kxxsn'},isDragging:{true:'Slider_thumbRecipe_isDragging_true__t8kxxso',false:'Slider_thumbRecipe_isDragging_false__t8kxxsp'}},defaultVariants:{size:'md',error:false,isDragging:false},compoundVariants:[]});
+var tickStyle = 'Slider_tickStyle__t8kxxsr';
+var ticksStyle = 'Slider_ticksStyle__t8kxxsq';
+var tooltipPercentageVar = 'var(--tooltipPercentageVar__t8kxxs2)';
+var tooltipRecipe = createRuntimeFn({defaultClassName:'Slider_tooltipRecipe__t8kxxss',variantClassNames:{visible:{true:'Slider_tooltipRecipe_visible_true__t8kxxst',false:'Slider_tooltipRecipe_visible_false__t8kxxsu'}},defaultVariants:{visible:false},compoundVariants:[]});
+var trackRecipe = createRuntimeFn({defaultClassName:'Slider_trackRecipe__t8kxxs7',variantClassNames:{size:{sm:'Slider_trackRecipe_size_sm__t8kxxs8',md:'Slider_trackRecipe_size_md__t8kxxs9',lg:'Slider_trackRecipe_size_lg__t8kxxsa'},error:{true:'Slider_trackRecipe_error_true__t8kxxsb',false:'Slider_trackRecipe_error_false__t8kxxsc'}},defaultVariants:{size:'md',error:false},compoundVariants:[]});
+
+export { fillPercentageVar, fillRecipe, sliderContainerRecipe, sliderWrapperStyle, thumbPercentageVar, thumbRecipe, tickStyle, ticksStyle, tooltipPercentageVar, tooltipRecipe, trackRecipe };
+//# sourceMappingURL=Slider.css.js.map

package/dist/esm/components/controls/Slider/Slider.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/esm/components/controls/Slider/Slider.js

@@ -0,0 +1,266 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { useKeyboardContext } from '../../../context/KeyboardContext.js';
+import { FormLabel } from '../../form/FormLabel.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import { InputWrapper } from '../../form/InputWrapper.js';
+import { cx } from '../../../utils/cx.js';
+import { sliderWrapperStyle, fillPercentageVar, fillRecipe, trackRecipe, thumbPercentageVar, thumbRecipe, ticksStyle, tickStyle, tooltipPercentageVar, tooltipRecipe, sliderContainerRecipe } from './Slider.css.js';
+
+/**
+ * Clamps a value between min and max bounds
+ */
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Rounds a number to specified decimal places
+ */
+function roundToPrecision(value, precision) {
+    if (precision === undefined)
+        return value;
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+}
+/**
+ * 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}
+ * />
+ * ```
+ */
+const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep, largeStep, precision = 2, size = 'md', disabled = false, readOnly = false, label, helperText, errorMessage, error = false, required = false, unit, formatValue, showTooltip = true, showTicks = false, tickCount = 5, className, testId, onFocus, onBlur, onKeyDown, ref, ...props }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [showTooltipState, setShowTooltipState] = useState(false);
+    const sliderRef = useRef(null);
+    const trackRef = useRef(null);
+    const dragStartRef = useRef(null);
+    const { modifiers } = useKeyboardContext();
+    // Calculate derived values
+    const effectivePrecisionStep = precisionStep ?? step / 10;
+    const effectiveLargeStep = largeStep ?? step * 10;
+    const percentage = ((value - min) / (max - min)) * 100;
+    const clampedValue = clamp(value, min, max);
+    const getStepSize = useCallback(() => {
+        if (modifiers.shift)
+            return effectivePrecisionStep;
+        if (modifiers.control || modifiers.meta)
+            return effectiveLargeStep;
+        return step;
+    }, [
+        modifiers.shift,
+        modifiers.control,
+        modifiers.meta,
+        effectivePrecisionStep,
+        effectiveLargeStep,
+        step,
+    ]);
+    // Format display value with consistent precision to prevent tooltip size changes
+    const displayValue = formatValue
+        ? formatValue(clampedValue)
+        : unit
+            ? `${precision !== undefined ? clampedValue.toFixed(precision) : clampedValue}${unit}`
+            : precision !== undefined
+                ? clampedValue.toFixed(precision)
+                : clampedValue.toString();
+    /**
+     * Applies a new value with proper bounds checking and rounding
+     */
+    const applyValue = useCallback((newValue) => {
+        if (disabled || readOnly)
+            return;
+        if (newValue === value)
+            return;
+        const rounded = roundToPrecision(newValue, precision);
+        const clamped = clamp(rounded, min, max);
+        if (clamped !== value) {
+            onChange(clamped);
+        }
+    }, [disabled, readOnly, precision, min, max, value, onChange]);
+    /**
+     * Converts mouse position to value
+     */
+    const positionToValue = useCallback((clientX) => {
+        if (!trackRef.current)
+            return value;
+        const rect = trackRef.current.getBoundingClientRect();
+        const percentage = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const newValue = min + percentage * (max - min);
+        // Use the current step size (depends on keyboard modifiers)
+        const currentStep = getStepSize();
+        // Snap to step increments
+        const steps = Math.round((newValue - min) / currentStep);
+        return min + steps * currentStep;
+    }, [min, max, value, getStepSize]);
+    /**
+     * Handle mouse down on track or thumb
+     */
+    const handleMouseDown = useCallback((event) => {
+        if (disabled || readOnly)
+            return;
+        event.preventDefault();
+        setIsDragging(true);
+        setShowTooltipState(showTooltip);
+        // Use the current step size (depends on keyboard modifiers)
+        const newValue = positionToValue(event.clientX);
+        applyValue(newValue);
+        dragStartRef.current = {
+            startX: event.clientX,
+            startValue: newValue,
+        };
+    }, [disabled, readOnly, positionToValue, applyValue, showTooltip]);
+    /**
+     * Handle global mouse move during drag
+     */
+    const handleMouseMove = useCallback((event) => {
+        if (!isDragging || !dragStartRef.current)
+            return;
+        // Use requestAnimationFrame for smoother performance
+        requestAnimationFrame(() => {
+            // Use the current step size (depends on keyboard modifiers)
+            const newValue = positionToValue(event.clientX);
+            applyValue(newValue);
+        });
+    }, [isDragging, positionToValue, applyValue]);
+    /**
+     * Handle global mouse up to end drag
+     */
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+        setShowTooltipState(false);
+        dragStartRef.current = null;
+    }, []);
+    /**
+     * Handle keyboard navigation
+     */
+    const handleKeyDown = useCallback((event) => {
+        if (disabled || readOnly)
+            return;
+        const currentStep = getStepSize();
+        let handled = true;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                applyValue(value + currentStep);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                applyValue(value - currentStep);
+                break;
+            case 'Home':
+                applyValue(min);
+                break;
+            case 'End':
+                applyValue(max);
+                break;
+            case 'PageUp':
+                applyValue(value + effectiveLargeStep);
+                break;
+            case 'PageDown':
+                applyValue(value - effectiveLargeStep);
+                break;
+            default:
+                handled = false;
+        }
+        if (handled) {
+            event.preventDefault();
+        }
+        onKeyDown?.(event);
+    }, [
+        disabled,
+        readOnly,
+        getStepSize,
+        applyValue,
+        value,
+        min,
+        max,
+        effectiveLargeStep,
+        onKeyDown,
+    ]);
+    /**
+     * Handle focus events
+     */
+    const handleFocus = useCallback((event) => {
+        setIsFocused(true);
+        onFocus?.(event);
+    }, [onFocus]);
+    const handleBlur = useCallback((event) => {
+        setIsFocused(false);
+        onBlur?.(event);
+    }, [onBlur]);
+    // Global mouse events for dragging
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    // Generate tick marks
+    const ticks = showTicks ? Array.from({ length: tickCount }, (_, i) => i) : [];
+    const sliderId = React.useId();
+    return (jsxs("div", { ref: ref, className: cx(sliderContainerRecipe({ disabled }), className), "data-testid": testId, ...props, children: [label && (jsx(FormLabel, { htmlFor: sliderId, disabled: disabled, required: required, children: label })), jsx(InputWrapper, { size: size, error: error, disabled: disabled, focused: isFocused, style: {
+                    border: 'none',
+                    background: 'transparent',
+                    padding: 0,
+                    height: 5,
+                }, children: jsxs("div", { ref: sliderRef, className: sliderWrapperStyle, onMouseDown: handleMouseDown, tabIndex: disabled ? -1 : 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": clampedValue, "aria-valuetext": displayValue, "aria-disabled": disabled, "aria-readonly": readOnly, "aria-required": required, "aria-invalid": error, "aria-labelledby": label ? sliderId : undefined, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: [jsx("div", { ref: trackRef, className: trackRecipe({ size, error }), children: jsx("div", { className: fillRecipe({ error, isDragging }), style: assignInlineVars({
+                                    [fillPercentageVar]: `${percentage}%`,
+                                }) }) }), jsx("div", { className: thumbRecipe({ size, error, isDragging }), style: assignInlineVars({
+                                [thumbPercentageVar]: `${percentage}%`,
+                            }) }), showTicks && (jsx("div", { className: ticksStyle, children: ticks.map(i => (jsx("div", { className: tickStyle }, i))) })), showTooltip && (jsx("div", { className: tooltipRecipe({ visible: showTooltipState }), style: assignInlineVars({
+                                [tooltipPercentageVar]: `${percentage}%`,
+                            }), children: displayValue }))] }) }), (helperText ?? (error && errorMessage)) && (jsx(FormHelperText, { error: error, children: error && errorMessage ? errorMessage : helperText }))] }));
+};
+Slider.displayName = 'Slider';
+
+export { Slider };
+//# sourceMappingURL=Slider.js.map

package/dist/esm/components/controls/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../../../../src/components/controls/Slider/Slider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AA0KA;;AAEG;AACH;AACE;AACF;AAEA;;AAEG;AACH;;AAC+B;;;AAG/B;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDG;AACI;;;;AAkCL;AACA;AACA;AAIA;;AAGA;AACA;AACA;;AAGA;;AACuB;AACrB;AAAyC;AACzC;AACF;AACE;AACA;AACA;;;;AAID;;;AAIC;AACA;;;AAGI;AACA;AAEN;;AAEG;AACH;;;;;;;AASI;;;AAGF;AAIF;;AAEG;AACH;;AAE2B;;;;;AAOvB;;AAGA;AACA;;AAKJ;;AAEG;AACH;;;;;;;;;;;AAcM;;AAEJ;AAIF;;AAEG;AACH;AAEI;;;;;;;AAMA;;AAKJ;;AAEG;AACH;;;AAGE;;AAGF;;AAEG;AACH;;;AAII;;AAGA;AACE;AACA;AACE;;AAEF;AACA;AACE;;AAEF;;;AAGA;;;AAGA;AACE;;AAEF;AACE;;AAEF;;;;;;AAQF;AACF;;;;;;;;;;AAWC;AAGH;;AAEG;AACH;;AAGI;AACF;AAIF;;AAGI;AACF;;;AAMA;;AAEA;AACA;AAEA;AACE;AACA;AACF;;;AAIF;AAEA;AAEA;AAmBQ;AACA;AACA;AACA;;AA0BM;;AAQF;;AAgBE;AACD;AAef;AAEA;;"}

package/dist/esm/components/controls/TreeView/TreeNode.css.js

@@ -0,0 +1,15 @@
+import './../../../assets/src/components/controls/TreeView/TreeNode.css.ts.vanilla-D3ylUhuW.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var actionsStyle = 'TreeNode_actionsStyle__8ws3nev';
+var chevronRecipe = createRuntimeFn({defaultClassName:'TreeNode_chevronRecipe__8ws3nef',variantClassNames:{size:{sm:'TreeNode_chevronRecipe_size_sm__8ws3neg',md:'TreeNode_chevronRecipe_size_md__8ws3neh',lg:'TreeNode_chevronRecipe_size_lg__8ws3nei'},expanded:{true:'TreeNode_chevronRecipe_expanded_true__8ws3nej',false:'TreeNode_chevronRecipe_expanded_false__8ws3nek'},visible:{true:'TreeNode_chevronRecipe_visible_true__8ws3nel',false:'TreeNode_chevronRecipe_visible_false__8ws3nem'}},defaultVariants:{size:'md',expanded:false,visible:true},compoundVariants:[]});
+var guideLineLeftVar = 'var(--guideLineLeftVar__8ws3ne1)';
+var guideLineStyle = 'TreeNode_guideLineStyle__8ws3ne10';
+var iconRecipe = createRuntimeFn({defaultClassName:'TreeNode_iconRecipe__8ws3nen',variantClassNames:{size:{sm:'TreeNode_iconRecipe_size_sm__8ws3neo',md:'TreeNode_iconRecipe_size_md__8ws3nep',lg:'TreeNode_iconRecipe_size_lg__8ws3neq'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var labelRecipe = createRuntimeFn({defaultClassName:'TreeNode_labelRecipe__8ws3ner',variantClassNames:{size:{sm:'TreeNode_labelRecipe_size_sm__8ws3nes',md:'TreeNode_labelRecipe_size_md__8ws3net',lg:'TreeNode_labelRecipe_size_lg__8ws3neu'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var paddingLeftVar = 'var(--paddingLeftVar__8ws3ne0)';
+var renameInputRecipe = createRuntimeFn({defaultClassName:'TreeNode_renameInputRecipe__8ws3new',variantClassNames:{size:{sm:'TreeNode_renameInputRecipe_size_sm__8ws3nex',md:'TreeNode_renameInputRecipe_size_md__8ws3ney',lg:'TreeNode_renameInputRecipe_size_lg__8ws3nez'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var rowRecipe = createRuntimeFn({defaultClassName:'TreeNode_rowRecipe__8ws3ne2',variantClassNames:{size:{sm:'TreeNode_rowRecipe_size_sm__8ws3ne3',md:'TreeNode_rowRecipe_size_md__8ws3ne4',lg:'TreeNode_rowRecipe_size_lg__8ws3ne5'},selected:{true:'TreeNode_rowRecipe_selected_true__8ws3ne6',false:'TreeNode_rowRecipe_selected_false__8ws3ne7'},focused:{true:'TreeNode_rowRecipe_focused_true__8ws3ne8',false:'TreeNode_rowRecipe_focused_false__8ws3ne9'},disabled:{true:'TreeNode_rowRecipe_disabled_true__8ws3nea',false:'TreeNode_rowRecipe_disabled_false__8ws3neb'}},defaultVariants:{size:'md',selected:false,focused:false,disabled:false},compoundVariants:[[{selected:true},'TreeNode_rowRecipe_compound_0__8ws3nec'],[{selected:false},'TreeNode_rowRecipe_compound_1__8ws3ned'],[{focused:true,selected:false},'TreeNode_rowRecipe_compound_2__8ws3nee']]});
+
+export { actionsStyle, chevronRecipe, guideLineLeftVar, guideLineStyle, iconRecipe, labelRecipe, paddingLeftVar, renameInputRecipe, rowRecipe };
+//# sourceMappingURL=TreeNode.css.js.map

package/dist/esm/components/controls/TreeView/TreeNode.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/esm/components/controls/TreeView/TreeNode.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { guideLineStyle, guideLineLeftVar, chevronRecipe, iconRecipe, renameInputRecipe, labelRecipe, actionsStyle, paddingLeftVar, rowRecipe } from './TreeNode.css.js';
+
+// --- Size configurations ---
+const sizeConfig = {
+    sm: {
+        rowHeight: 20,
+        chevronSize: 10,
+        iconSize: 12,
+        fontSizeKey: 'md',
+        defaultIndent: 12,
+    },
+    md: {
+        rowHeight: 24,
+        chevronSize: 12,
+        iconSize: 14,
+        fontSizeKey: 'md',
+        defaultIndent: 16,
+    },
+    lg: {
+        rowHeight: 32,
+        chevronSize: 14,
+        iconSize: 16,
+        fontSizeKey: 'lg',
+        defaultIndent: 20,
+    },
+};
+// --- Chevron icon SVG ---
+const ChevronSvg = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: jsx("path", { d: "M4.5 2.5L8 6L4.5 9.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const TreeNodeComponent = ({ node, depth, size, indent, isSelected, isExpanded, isFocused, isFirst, isLast, showChevrons, showGuideLines, renamable, nodeId, renderNode, renderActions, onToggleExpand, onClick, onDoubleClick, onContextMenu, onRename, }) => {
+    const [isRenaming, setIsRenaming] = useState(false);
+    const [renameValue, setRenameValue] = useState(node.label);
+    const renameInputRef = useRef(null);
+    const isLeaf = !node.children || node.children.length === 0;
+    const config = sizeConfig[size];
+    const state = {
+        selected: isSelected,
+        expanded: isExpanded,
+        focused: isFocused,
+        depth,
+        isLeaf,
+        isFirst,
+        isLast,
+    };
+    const handleChevronClick = useCallback((e) => {
+        e.stopPropagation();
+        if (!node.disabled && !isLeaf) {
+            onToggleExpand(node.id);
+        }
+    }, [node.id, node.disabled, isLeaf, onToggleExpand]);
+    const handleClick = useCallback((e) => {
+        if (node.disabled || isRenaming)
+            return;
+        onClick(node, e);
+    }, [node, isRenaming, onClick]);
+    const handleDoubleClick = useCallback((e) => {
+        if (node.disabled)
+            return;
+        // Start rename if renamable
+        if (renamable && node.renamable !== false) {
+            setIsRenaming(true);
+            setRenameValue(node.label);
+            setTimeout(() => {
+                renameInputRef.current?.focus();
+                renameInputRef.current?.select();
+            }, 0);
+            return;
+        }
+        onDoubleClick?.(node, e);
+    }, [node, renamable, onDoubleClick]);
+    const handleContextMenu = useCallback((e) => {
+        onContextMenu?.(node, e);
+    }, [node, onContextMenu]);
+    const confirmRename = useCallback(() => {
+        if (renameValue.trim() && renameValue !== node.label) {
+            onRename?.(node.id, renameValue.trim());
+        }
+        setIsRenaming(false);
+    }, [renameValue, node.id, node.label, onRename]);
+    const cancelRename = useCallback(() => {
+        setRenameValue(node.label);
+        setIsRenaming(false);
+    }, [node.label]);
+    const handleRenameKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            confirmRename();
+        }
+        else if (e.key === 'Escape') {
+            cancelRename();
+        }
+    }, [confirmRename, cancelRename]);
+    // Guide lines for each parent level
+    const guideLines = showGuideLines && depth > 0
+        ? Array.from({ length: depth }, (_, i) => (jsx("span", { className: guideLineStyle, style: assignInlineVars({
+                [guideLineLeftVar]: `${i * indent + config.defaultIndent / 2}px`,
+            }) }, i)))
+        : null;
+    return (jsxs("div", { id: `treenode-${nodeId}`, role: "treeitem", "aria-expanded": isLeaf ? undefined : isExpanded, "aria-selected": isSelected, "aria-disabled": node.disabled ?? undefined, "aria-level": depth + 1, className: rowRecipe({
+            size,
+            selected: isSelected,
+            focused: isFocused,
+            disabled: node.disabled ?? false,
+        }), style: assignInlineVars({
+            [paddingLeftVar]: `${depth * indent}px`,
+        }), onClick: handleClick, onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu, tabIndex: -1, children: [guideLines, showChevrons && (jsx("span", { className: chevronRecipe({
+                    expanded: isExpanded,
+                    size,
+                    visible: !isLeaf,
+                }), onClick: handleChevronClick, "aria-hidden": "true", children: jsx(ChevronSvg, { size: config.chevronSize }) })), renderNode ? (renderNode(node, state)) : (jsxs(Fragment, { children: [node.icon && (jsx("span", { className: iconRecipe({ size }), children: node.icon })), isRenaming ? (jsx("input", { ref: renameInputRef, className: renameInputRecipe({ size }), value: renameValue, onChange: e => setRenameValue(e.target.value), onKeyDown: handleRenameKeyDown, onBlur: confirmRename, "aria-label": `Rename ${node.label}`, onClick: e => e.stopPropagation() })) : (jsx("span", { className: labelRecipe({ size }), children: node.label }))] })), renderActions && (jsx("span", { className: actionsStyle, onClick: e => e.stopPropagation(), children: renderActions(node, state) }))] }));
+};
+TreeNodeComponent.displayName = 'TreeNode';
+
+export { TreeNodeComponent };
+//# sourceMappingURL=TreeNode.js.map

package/dist/esm/components/controls/TreeView/TreeNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.js","sources":["../../../../../../src/components/controls/TreeView/TreeNode.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqBA;AAEA;AAUE;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;;AAGH;AAEA;;;AA4DE;AACA;AAEA;AACA;AAEA;AACE;AACA;AACA;;;;;;AAOF;;;AAIM;;AAEJ;AAIF;AAEI;;AACA;;AAKJ;;;;;;AAOM;;AAEE;AACA;;;;AAKJ;;AAKJ;AAEI;AACF;AAIF;;;;;AAKA;AAEA;AACE;;AAEF;AAEA;AAEI;AACE;;AACK;AACL;;AAEJ;;AAKF;;AAOY;AACD;;AAKX;;AAUM;AACA;AACA;AACD;AAEC;;AAaI;;;AAGD;AAyCX;AAEA;;"}

package/dist/esm/components/controls/TreeView/TreeView.css.js

@@ -0,0 +1,8 @@
+import './../../../assets/src/components/controls/TreeView/TreeView.css.ts.vanilla-CsG5-rWt.css';
+
+var emptyStateStyle = 'TreeView_emptyStateStyle__cc0psk2';
+var maxHeightVar = 'var(--maxHeightVar__cc0psk0)';
+var treeContainerStyle = 'TreeView_treeContainerStyle__cc0psk1';
+
+export { emptyStateStyle, maxHeightVar, treeContainerStyle };
+//# sourceMappingURL=TreeView.css.js.map

package/dist/esm/components/controls/TreeView/TreeView.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/components/controls/TreeView/TreeView.js

@@ -0,0 +1,206 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { useTreeState } from './useTreeState.js';
+import { TreeNodeComponent } from './TreeNode.js';
+import { cx } from '../../../utils/cx.js';
+import { maxHeightVar, emptyStateStyle, treeContainerStyle } from './TreeView.css.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} />
+ * ```
+ */
+const TreeView = ({ nodes, expandedIds, defaultExpandedIds, selectedIds, defaultSelectedIds, selectionMode = 'single', renamable = false, size = 'md', indent = 16, showChevrons = true, showGuideLines = false, expandOnSelect = false, maxHeight, renderNode, renderActions, emptyContent, onExpandedChange, onSelectionChange, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeRename, className, testId, ...rest }) => {
+    const treeRef = useRef(null);
+    const { expandedSet, selectedSet, focusedId, visibleNodes, toggleExpand, select, setFocused, selectAll, } = useTreeState({
+        nodes,
+        expandedIds,
+        defaultExpandedIds,
+        selectedIds,
+        defaultSelectedIds,
+        selectionMode,
+        expandOnSelect,
+        onExpandedChange,
+        onSelectionChange,
+    });
+    // Handle node click with selection logic
+    const handleNodeClick = useCallback((node, event) => {
+        if (node.disabled)
+            return;
+        setFocused(node.id);
+        if (selectionMode !== 'none') {
+            if (event.ctrlKey || event.metaKey) {
+                select(node.id, 'toggle');
+            }
+            else if (event.shiftKey) {
+                select(node.id, 'range');
+            }
+            else {
+                select(node.id, 'replace');
+            }
+        }
+        onNodeClick?.(node, event);
+    }, [selectionMode, select, setFocused, onNodeClick]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        const currentIdx = focusedId
+            ? visibleNodes.findIndex(vn => vn.node.id === focusedId)
+            : -1;
+        const currentNode = currentIdx >= 0 ? visibleNodes[currentIdx] : undefined;
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                const nextIdx = currentIdx + 1;
+                if (nextIdx < visibleNodes.length) {
+                    const nextNode = visibleNodes[nextIdx];
+                    if (nextNode) {
+                        setFocused(nextNode.node.id);
+                        if (event.shiftKey && selectionMode === 'multiple') {
+                            select(nextNode.node.id, 'range');
+                        }
+                    }
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prevIdx = currentIdx - 1;
+                if (prevIdx >= 0) {
+                    const prevNode = visibleNodes[prevIdx];
+                    if (prevNode) {
+                        setFocused(prevNode.node.id);
+                        if (event.shiftKey && selectionMode === 'multiple') {
+                            select(prevNode.node.id, 'range');
+                        }
+                    }
+                }
+                break;
+            }
+            case 'ArrowRight': {
+                event.preventDefault();
+                if (currentNode) {
+                    const hasChildren = currentNode.node.children && currentNode.node.children.length > 0;
+                    if (hasChildren && !expandedSet.has(currentNode.node.id)) {
+                        toggleExpand(currentNode.node.id);
+                    }
+                    else if (hasChildren && expandedSet.has(currentNode.node.id)) {
+                        // Move to first child
+                        const nextIdx = currentIdx + 1;
+                        if (nextIdx < visibleNodes.length) {
+                            const nextNode = visibleNodes[nextIdx];
+                            if (nextNode) {
+                                setFocused(nextNode.node.id);
+                            }
+                        }
+                    }
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                event.preventDefault();
+                if (currentNode) {
+                    const hasChildren = currentNode.node.children && currentNode.node.children.length > 0;
+                    if (hasChildren && expandedSet.has(currentNode.node.id)) {
+                        toggleExpand(currentNode.node.id);
+                    }
+                    else if (currentNode.parentId) {
+                        // Move to parent
+                        setFocused(currentNode.parentId);
+                    }
+                }
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                const firstNode = visibleNodes[0];
+                if (firstNode) {
+                    setFocused(firstNode.node.id);
+                }
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                const lastNode = visibleNodes[visibleNodes.length - 1];
+                if (lastNode) {
+                    setFocused(lastNode.node.id);
+                }
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                if (focusedId && selectionMode !== 'none') {
+                    select(focusedId, 'replace');
+                }
+                break;
+            }
+            case ' ': {
+                event.preventDefault();
+                if (focusedId) {
+                    if (selectionMode === 'multiple') {
+                        select(focusedId, 'toggle');
+                    }
+                    else if (selectionMode === 'single') {
+                        select(focusedId, 'replace');
+                    }
+                }
+                break;
+            }
+            case 'a': {
+                if (event.ctrlKey || event.metaKey) {
+                    event.preventDefault();
+                    selectAll();
+                }
+                break;
+            }
+        }
+    }, [
+        focusedId,
+        visibleNodes,
+        expandedSet,
+        selectionMode,
+        setFocused,
+        select,
+        toggleExpand,
+        selectAll,
+    ]);
+    // Scroll focused node into view
+    React.useEffect(() => {
+        if (focusedId && treeRef.current) {
+            const el = treeRef.current.querySelector(`#treenode-${CSS.escape(focusedId)}`);
+            if (el && typeof el.scrollIntoView === 'function') {
+                el.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [focusedId]);
+    const containerInlineVars = maxHeight
+        ? assignInlineVars({
+            [maxHeightVar]: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+        })
+        : undefined;
+    if (nodes.length === 0) {
+        return (jsx("div", { ref: treeRef, className: cx(treeContainerStyle, className), "data-testid": testId, role: "tree", "aria-label": "Empty tree", style: containerInlineVars, ...rest, children: jsx("div", { className: emptyStateStyle, children: emptyContent ?? 'No items' }) }));
+    }
+    return (jsx("div", { ref: treeRef, className: cx(treeContainerStyle, className), "data-testid": testId, role: "tree", "aria-label": "Tree", "aria-multiselectable": selectionMode === 'multiple' ? true : undefined, "aria-activedescendant": focusedId ? `treenode-${focusedId}` : undefined, tabIndex: 0, onKeyDown: handleKeyDown, style: containerInlineVars, ...rest, children: visibleNodes.map((flatNode, idx) => {
+            const { node, depth } = flatNode;
+            return (jsx(TreeNodeComponent, { node: node, depth: depth, size: size, indent: indent, isSelected: selectedSet.has(node.id), isExpanded: expandedSet.has(node.id), isFocused: focusedId === node.id, isFirst: idx === 0, isLast: idx === visibleNodes.length - 1, showChevrons: showChevrons, showGuideLines: showGuideLines, renamable: renamable, nodeId: node.id, renderNode: renderNode, renderActions: renderActions, onToggleExpand: toggleExpand, onClick: handleNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onRename: onNodeRename }, node.id));
+        }) }));
+};
+TreeView.displayName = 'TreeView';
+
+export { TreeView };
+//# sourceMappingURL=TreeView.js.map

package/dist/esm/components/controls/TreeView/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","sources":["../../../../../../src/components/controls/TreeView/TreeView.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAcA;;;;;;;;;;;;;;;;;AAiBG;AACI;AA2BL;AAEA;;;;;;;;;;AAmBC;;;;;AAOG;AAEA;;AAEI;;AACK;AACL;;;AAEA;;;AAIJ;;;AAMJ;;AAGM;;AAEF;AAGA;;;AAGI;AACA;AACE;;AAEE;;;;;;;;;;AAUJ;AACA;AACE;;AAEE;;;;;;;;;;;AAWF;AAEA;AACE;;AACK;;AAEL;AACA;AACE;;AAEE;;;;;;;;;;AAUN;AAEA;AACE;;AACK;;AAEL;;;;;;;AAOJ;;AAEE;;;;;;;;AAQA;;;;;;AAMF;AACE;;;;;;;AAOA;AACE;;AACK;AACL;;;;;;;;AAQF;;;;;AAKR;;;;;;;;;AAUC;;AAIH;AACE;AACE;;;;;AAOJ;;;AAIM;;;AAKN;AACE;;AAeF;AAeM;;;AA6BR;AAEA;;"}