entangle-ui 0.3.0 → 0.5.0

package/dist/esm/components/Icons/UndoIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Undo icon component for undo actions.
+ *
+ * A standard curved arrow icon commonly used for undoing operations,
+ * reverting changes, and history navigation in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UndoIcon />
+ *
+ * // With custom size and color
+ * <UndoIcon size="md" color="secondary" />
+ *
+ * // In an undo button
+ * <Button icon={<UndoIcon />}>Undo</Button>
+ * ```
+ */
+const UndoIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M3 7v6h6" }), jsx("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })] }));
+});
+UndoIcon.displayName = 'UndoIcon';
+
+export { UndoIcon };
+//# sourceMappingURL=UndoIcon.js.map

package/dist/esm/components/Icons/UndoIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UndoIcon.js","sources":["../../../../../src/components/Icons/UndoIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAMF;AAGF;;"}

package/dist/esm/components/Icons/UnlockIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Unlock icon component for security and unlocked states.
+ *
+ * A standard open padlock icon commonly used for indicating unlocked content,
+ * accessible features, and unprotected operations in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UnlockIcon />
+ *
+ * // With custom size and color
+ * <UnlockIcon size="md" color="success" />
+ *
+ * // In a security context
+ * <Button icon={<UnlockIcon />}>Unlock</Button>
+ * ```
+ */
+const UnlockIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), jsx("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })] }));
+});
+UnlockIcon.displayName = 'UnlockIcon';
+
+export { UnlockIcon };
+//# sourceMappingURL=UnlockIcon.js.map

package/dist/esm/components/Icons/UnlockIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnlockIcon.js","sources":["../../../../../src/components/Icons/UnlockIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAMF;AAGF;;"}

package/dist/esm/components/Icons/UploadIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Upload icon component for upload actions.
+ *
+ * A standard upload arrow icon commonly used for uploading files,
+ * importing data, and file transfer operations in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UploadIcon />
+ *
+ * // With custom size and color
+ * <UploadIcon size="lg" color="primary" />
+ *
+ * // In an upload button
+ * <Button icon={<UploadIcon />}>Upload</Button>
+ * ```
+ */
+const UploadIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), jsx("polyline", { points: "17,8 12,3 7,8" }), jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }));
+});
+UploadIcon.displayName = 'UploadIcon';
+
+export { UploadIcon };
+//# sourceMappingURL=UploadIcon.js.map

package/dist/esm/components/Icons/UploadIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadIcon.js","sources":["../../../../../src/components/Icons/UploadIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAOF;AAGF;;"}

package/dist/esm/components/Icons/UserIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * User icon component for user profiles and accounts.
+ *
+ * A standard user silhouette icon commonly used for user profiles,
+ * account management, and person-related features in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UserIcon />
+ *
+ * // With custom size and color
+ * <UserIcon size="sm" color="secondary" />
+ *
+ * // In a profile context
+ * <Button icon={<UserIcon />}>Profile</Button>
+ * ```
+ */
+const UserIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), jsx("circle", { cx: "12", cy: "7", r: "4" })] }));
+});
+UserIcon.displayName = 'UserIcon';
+
+export { UserIcon };
+//# sourceMappingURL=UserIcon.js.map

package/dist/esm/components/Icons/UserIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserIcon.js","sources":["../../../../../src/components/Icons/UserIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAQL;AAGF;;"}

package/dist/esm/components/Icons/WarningIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Warning icon component for warning states.
+ *
+ * A standard triangle with exclamation icon commonly used for warnings,
+ * caution messages, and alert notifications in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <WarningIcon />
+ *
+ * // With custom size and color
+ * <WarningIcon size="md" color="warning" />
+ *
+ * // In a warning context
+ * <Button icon={<WarningIcon />}>Warning</Button>
+ * ```
+ */
+const WarningIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }));
+});
+WarningIcon.displayName = 'WarningIcon';
+
+export { WarningIcon };
+//# sourceMappingURL=WarningIcon.js.map

package/dist/esm/components/Icons/WarningIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningIcon.js","sources":["../../../../../src/components/Icons/WarningIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}

package/dist/esm/components/Icons/ZoomInIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Zoom In icon component for zoom in actions.
+ *
+ * A standard magnifying glass with plus icon commonly used for zooming in,
+ * enlarging content, and scale increase operations in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ZoomInIcon />
+ *
+ * // With custom size and color
+ * <ZoomInIcon size="md" color="accent" />
+ *
+ * // In a zoom context
+ * <Button icon={<ZoomInIcon />}>Zoom In</Button>
+ * ```
+ */
+const ZoomInIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("circle", { cx: "11", cy: "11", r: "8" }), jsx("path", { d: "M21 21l-4.35-4.35" }), jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14" }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })] }));
+});
+ZoomInIcon.displayName = 'ZoomInIcon';
+
+export { ZoomInIcon };
+//# sourceMappingURL=ZoomInIcon.js.map

package/dist/esm/components/Icons/ZoomInIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomInIcon.js","sources":["../../../../../src/components/Icons/ZoomInIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAQF;AAGF;;"}

package/dist/esm/components/Icons/ZoomOutIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Zoom Out icon component for zoom out actions.
+ *
+ * A standard magnifying glass with minus icon commonly used for zooming out,
+ * reducing content, and scale decrease operations in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ZoomOutIcon />
+ *
+ * // With custom size and color
+ * <ZoomOutIcon size="lg" color="secondary" />
+ *
+ * // In a zoom context
+ * <Button icon={<ZoomOutIcon />}>Zoom Out</Button>
+ * ```
+ */
+const ZoomOutIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("circle", { cx: "11", cy: "11", r: "8" }), jsx("path", { d: "M21 21l-4.35-4.35" }), jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })] }));
+});
+ZoomOutIcon.displayName = 'ZoomOutIcon';
+
+export { ZoomOutIcon };
+//# sourceMappingURL=ZoomOutIcon.js.map

package/dist/esm/components/Icons/ZoomOutIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomOutIcon.js","sources":["../../../../../src/components/Icons/ZoomOutIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}

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

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/controls/CartesianPicker/CartesianPicker.css.ts.vanilla-Ccao9ycw.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var bottomBarStyle = 'CartesianPicker_bottomBarStyle__tqma2q6';
+var cartesianPickerRecipe = createRuntimeFn({defaultClassName:'CartesianPicker_cartesianPickerRecipe__tqma2q1',variantClassNames:{disabled:{true:'CartesianPicker_cartesianPickerRecipe_disabled_true__tqma2q2',false:'CartesianPicker_cartesianPickerRecipe_disabled_false__tqma2q3'},responsive:{true:'CartesianPicker_cartesianPickerRecipe_responsive_true__tqma2q4',false:'CartesianPicker_cartesianPickerRecipe_responsive_false__tqma2q5'}},defaultVariants:{disabled:false,responsive:false},compoundVariants:[]});
+var pickerWidthVar = 'var(--pickerWidthVar__tqma2q0)';
+
+export { bottomBarStyle, cartesianPickerRecipe, pickerWidthVar };
+//# sourceMappingURL=CartesianPicker.css.js.map

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

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

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

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { roundToPrecision } from '../../../utils/mathUtils.js';
+import { CanvasContainer } from '../../primitives/canvas/CanvasContainer.js';
+import { useCartesianInteraction } from './useCartesianInteraction.js';
+import { useCartesianRenderer } from './useCartesianRenderer.js';
+import { bottomBarStyle, pickerWidthVar, cartesianPickerRecipe } from './CartesianPicker.css.js';
+
+const CartesianPicker = ({ value, defaultValue, domainX = [-1, 1], domainY = [-1, 1], showGrid = true, gridSubdivisions = 4, showAxisLabels = true, showOriginAxes = true, showCrosshair = true, crosshairStyle = 'dashed', labelX, labelY, markerRadius = 6, snapToGrid = false, step, clampToRange = true, precision = 2, width = 200, height = 200, responsive = false, disabled = false, readOnly = false, onChange, onChangeComplete, renderBackground, renderBottomBar, className, testId, id, style, ...rest }) => {
+    const canvasRef = useRef(null);
+    // Controlled / uncontrolled
+    const [internalValue, setInternalValue] = useState(() => defaultValue ?? { x: 0, y: 0 });
+    const isControlled = value !== undefined;
+    const currentPoint = useMemo(() => (isControlled ? value : internalValue), [isControlled, value, internalValue]);
+    const handleChange = useCallback((newPoint) => {
+        if (!isControlled) {
+            setInternalValue(newPoint);
+        }
+        onChange?.(newPoint);
+    }, [isControlled, onChange]);
+    const handleChangeComplete = useCallback((newPoint) => {
+        onChangeComplete?.(newPoint);
+    }, [onChangeComplete]);
+    // Viewport with padding
+    const viewport = useMemo(() => {
+        const hasAxisNames = Boolean(labelX ?? labelY);
+        const padding = hasAxisNames && showAxisLabels ? 0.12 : 0.08;
+        const [dxMin, dxMax] = domainX;
+        const [dyMin, dyMax] = domainY;
+        const xPad = (dxMax - dxMin) * padding;
+        const yPad = (dyMax - dyMin) * padding;
+        return {
+            viewX: [dxMin - xPad, dxMax + xPad],
+            viewY: [dyMin - yPad, dyMax + yPad],
+        };
+    }, [domainX, domainY, labelX, labelY, showAxisLabels]);
+    // Interaction hook
+    const interaction = useCartesianInteraction({
+        point: currentPoint,
+        viewport,
+        canvasRef,
+        domainX,
+        domainY,
+        disabled,
+        readOnly,
+        clampToRange,
+        snapToGrid,
+        gridSubdivisions,
+        step,
+        precision,
+        onChange: handleChange,
+        onChangeComplete: handleChangeComplete,
+    });
+    // Renderer hook
+    useCartesianRenderer({
+        canvasRef,
+        point: currentPoint,
+        viewport,
+        domainX,
+        domainY,
+        showGrid,
+        gridSubdivisions,
+        showAxisLabels,
+        showOriginAxes,
+        showCrosshair,
+        crosshairStyle,
+        labelX,
+        labelY,
+        markerRadius,
+        disabled,
+        isHovered: interaction.isHovered,
+        isDragging: interaction.isDragging,
+        renderBackground,
+    });
+    // ARIA description
+    const ariaDescription = `2D point picker, current value X: ${roundToPrecision(currentPoint.x, precision)}, Y: ${roundToPrecision(currentPoint.y, precision)}`;
+    // Live announcement
+    const liveAnnouncement = `X: ${roundToPrecision(currentPoint.x, precision)}, Y: ${roundToPrecision(currentPoint.y, precision)}`;
+    return (jsxs("div", { className: cx(cartesianPickerRecipe({ disabled, responsive }), className), style: {
+            ...style,
+            ...(!responsive
+                ? assignInlineVars({ [pickerWidthVar]: `${width}px` })
+                : {}),
+        }, "data-testid": testId, id: id, ...rest, children: [jsx(CanvasContainer, { canvasRef: canvasRef, height: height, responsive: responsive, disabled: disabled, ariaLabel: "Cartesian point picker", ariaRoledescription: ariaDescription, liveAnnouncement: liveAnnouncement, handlers: interaction.handlers, testId: testId ? `${testId}-canvas` : undefined }), renderBottomBar && (jsx("div", { className: bottomBarStyle, "data-testid": testId ? `${testId}-bottom-bar` : undefined, children: renderBottomBar({
+                    point: currentPoint,
+                    disabled,
+                    readOnly,
+                    isDragging: interaction.isDragging,
+                    domainX,
+                    domainY,
+                }) }))] }));
+};
+CartesianPicker.displayName = 'CartesianPicker';
+
+export { CartesianPicker };
+//# sourceMappingURL=CartesianPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CartesianPicker.js","sources":["../../../../../../src/components/controls/CartesianPicker/CartesianPicker.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAiBO;AAiCL;;;AAOA;;AAMA;;;;AAKI;AACF;AAIF;AAEI;AACF;;AAKF;;AAEE;AACA;AACA;;;;;;;AAOF;;;AAIE;;;;;;;;;;;;AAYA;AACA;AACD;;AAGD;;AAEE;;;;;;;;;;;;;;;;;AAiBD;;;;;AAQD;AAIM;;AAEE;;AAEH;AAsBK;;;;;;AAMD;AAKX;AAEA;;"}

package/dist/esm/components/controls/CartesianPicker/useCartesianInteraction.js

@@ -0,0 +1,230 @@
+"use client";
+import { useState, useRef, useCallback } from 'react';
+import { clamp, roundToPrecision } from '../../../utils/mathUtils.js';
+import { getCanvasPointerPosition, canvasToDomain, hitTestPoint } from '../../primitives/canvas/canvasCoords.js';
+import '../../primitives/canvas/CanvasContainer.js';
+
+function snapValue(value, step) {
+    if (step === 0)
+        return value;
+    return Math.round(value / step) * step;
+}
+function useCartesianInteraction(options) {
+    const { point, viewport, canvasRef, domainX, domainY, disabled, readOnly, clampToRange, snapToGrid, gridSubdivisions, step, precision, onChange, onChangeComplete, } = options;
+    const [isHovered, setIsHovered] = useState(false);
+    const isDraggingRef = useRef(false);
+    const [, setForceUpdate] = useState(0);
+    const getCanvasSize = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return { w: 200, h: 200 };
+        const rect = canvas.getBoundingClientRect();
+        return { w: rect.width, h: rect.height };
+    }, [canvasRef]);
+    const applyConstraints = useCallback((rawX, rawY, ctrlKey) => {
+        let newX = rawX;
+        let newY = rawY;
+        // Apply snap
+        if (step) {
+            const [stepX, stepY] = Array.isArray(step) ? step : [step, step];
+            newX = snapValue(newX, stepX);
+            newY = snapValue(newY, stepY);
+        }
+        else if (snapToGrid !== ctrlKey) {
+            // Ctrl toggles snap behavior
+            const xStep = (domainX[1] - domainX[0]) / gridSubdivisions;
+            const yStep = (domainY[1] - domainY[0]) / gridSubdivisions;
+            newX = snapValue(newX, xStep);
+            newY = snapValue(newY, yStep);
+        }
+        newX = roundToPrecision(newX, precision);
+        newY = roundToPrecision(newY, precision);
+        if (clampToRange) {
+            newX = clamp(newX, domainX[0], domainX[1]);
+            newY = clamp(newY, domainY[0], domainY[1]);
+        }
+        return { x: newX, y: newY };
+    }, [
+        step,
+        snapToGrid,
+        gridSubdivisions,
+        domainX,
+        domainY,
+        precision,
+        clampToRange,
+    ]);
+    const onPointerDown = useCallback((e) => {
+        if (disabled || readOnly || e.button !== 0)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const { px, py } = getCanvasPointerPosition(e, canvas);
+        const { w, h } = getCanvasSize();
+        const domain = canvasToDomain(px, py, viewport, w, h);
+        const newPoint = applyConstraints(domain.x, domain.y, e.ctrlKey);
+        isDraggingRef.current = true;
+        setForceUpdate(n => n + 1);
+        canvas.setPointerCapture(e.pointerId);
+        onChange(newPoint);
+    }, [
+        disabled,
+        readOnly,
+        canvasRef,
+        viewport,
+        getCanvasSize,
+        applyConstraints,
+        onChange,
+    ]);
+    const onPointerMove = useCallback((e) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        if (isDraggingRef.current) {
+            if (readOnly)
+                return;
+            const { px, py } = getCanvasPointerPosition(e, canvas);
+            const { w, h } = getCanvasSize();
+            const domain = canvasToDomain(px, py, viewport, w, h);
+            const newPoint = applyConstraints(domain.x, domain.y, e.ctrlKey);
+            onChange(newPoint);
+            return;
+        }
+        // Hover detection
+        const { px, py } = getCanvasPointerPosition(e, canvas);
+        const { w, h } = getCanvasSize();
+        const dist = hitTestPoint(px, py, point, viewport, w, h, 12);
+        const hovering = dist !== Infinity;
+        setIsHovered(hovering);
+        if (disabled) {
+            canvas.style.cursor = 'not-allowed';
+        }
+        else if (readOnly) {
+            canvas.style.cursor = 'default';
+        }
+        else if (hovering) {
+            canvas.style.cursor = 'grab';
+        }
+        else {
+            canvas.style.cursor = 'crosshair';
+        }
+    }, [
+        canvasRef,
+        viewport,
+        point,
+        disabled,
+        readOnly,
+        getCanvasSize,
+        applyConstraints,
+        onChange,
+    ]);
+    const onPointerUp = useCallback((e) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        if (isDraggingRef.current) {
+            isDraggingRef.current = false;
+            setForceUpdate(n => n + 1);
+            canvas.releasePointerCapture(e.pointerId);
+            // Compute final point for onChangeComplete
+            const { px, py } = getCanvasPointerPosition(e, canvas);
+            const { w, h } = getCanvasSize();
+            const domain = canvasToDomain(px, py, viewport, w, h);
+            const finalPoint = applyConstraints(domain.x, domain.y, e.ctrlKey);
+            onChangeComplete?.(finalPoint);
+        }
+    }, [canvasRef, viewport, getCanvasSize, applyConstraints, onChangeComplete]);
+    const onKeyDown = useCallback((e) => {
+        if (disabled || readOnly)
+            return;
+        const xRange = domainX[1] - domainX[0];
+        const yRange = domainY[1] - domainY[0];
+        let baseStep;
+        if (step) {
+            const [stepX] = Array.isArray(step) ? step : [step, step];
+            baseStep = stepX;
+        }
+        else {
+            baseStep = xRange / gridSubdivisions;
+        }
+        const fineMultiplier = e.shiftKey ? 0.1 : 1;
+        const xStep = baseStep * fineMultiplier;
+        const yStep = (step
+            ? Array.isArray(step)
+                ? step[1]
+                : step
+            : yRange / gridSubdivisions) * fineMultiplier;
+        let newX = point.x;
+        let newY = point.y;
+        let handled = false;
+        switch (e.key) {
+            case 'ArrowLeft':
+                newX -= xStep;
+                handled = true;
+                break;
+            case 'ArrowRight':
+                newX += xStep;
+                handled = true;
+                break;
+            case 'ArrowUp':
+                newY += yStep;
+                handled = true;
+                break;
+            case 'ArrowDown':
+                newY -= yStep;
+                handled = true;
+                break;
+            case 'Home': {
+                // Reset to center of domain
+                newX = (domainX[0] + domainX[1]) / 2;
+                newY = (domainY[0] + domainY[1]) / 2;
+                handled = true;
+                break;
+            }
+            case '0': {
+                // Reset to origin
+                newX = 0;
+                newY = 0;
+                handled = true;
+                break;
+            }
+        }
+        if (!handled)
+            return;
+        e.preventDefault();
+        newX = roundToPrecision(newX, precision);
+        newY = roundToPrecision(newY, precision);
+        if (clampToRange) {
+            newX = clamp(newX, domainX[0], domainX[1]);
+            newY = clamp(newY, domainY[0], domainY[1]);
+        }
+        const newPoint = { x: newX, y: newY };
+        onChange(newPoint);
+        onChangeComplete?.(newPoint);
+    }, [
+        disabled,
+        readOnly,
+        point,
+        domainX,
+        domainY,
+        step,
+        gridSubdivisions,
+        precision,
+        clampToRange,
+        onChange,
+        onChangeComplete,
+    ]);
+    return {
+        isDragging: isDraggingRef.current,
+        isHovered,
+        handlers: {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onKeyDown,
+        },
+    };
+}
+
+export { useCartesianInteraction };
+//# sourceMappingURL=useCartesianInteraction.js.map

package/dist/esm/components/controls/CartesianPicker/useCartesianInteraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCartesianInteraction.js","sources":["../../../../../../src/components/controls/CartesianPicker/useCartesianInteraction.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAwCA;;AACkB;;AAElB;AAEM;AAGJ;;AAkBA;;AAGA;AACE;AACA;;AACA;AACA;AACF;;;;;;;AAUM;AACA;;AACK;;AAEL;AACA;AACA;AACA;;AAGF;AACA;;AAGE;AACA;;;AAIJ;;;;;;;;AASC;AAGH;;;AAGI;AACA;;AAEA;;AAGA;AACA;AAEA;;AAEA;;AAGF;;;;;;;;AASC;AAGH;AAEI;AACA;;AAEA;AACE;;AACA;;AAEA;AACA;;;;;AAMF;;AAEA;AACA;;;AAIE;;;AAEA;;;AAEA;;;AAEA;;AAEJ;;;;;;;;;AAUC;AAGH;AAEI;AACA;;AAEA;AACE;;AAEA;;AAGA;;AAEA;AACA;AACA;;AAEJ;AAIF;;;;;AAOI;;;;;;AAKE;;AAGF;AACA;;AAGI;AACE;AACA;AACF;AAEJ;AACA;;AAGA;AACE;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAME;AACA;;;;;;;;;;;;AAaJ;;;AAGA;AACA;;AAGE;AACA;;;;AAKF;AACF;;;;;;;;;;;;AAaC;;;;AAMD;;;;;AAKC;;AAEL;;"}