entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/primitives/Text/Text.css.js

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/primitives/Text/Text.css.ts.vanilla-qTMvgKKC.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var textRecipe = createRuntimeFn({defaultClassName:'Text_textRecipe__1buvrbk0',variantClassNames:{variant:{display:'Text_textRecipe_variant_display__1buvrbk1',heading:'Text_textRecipe_variant_heading__1buvrbk2',subheading:'Text_textRecipe_variant_subheading__1buvrbk3',body:'Text_textRecipe_variant_body__1buvrbk4',caption:'Text_textRecipe_variant_caption__1buvrbk5',code:'Text_textRecipe_variant_code__1buvrbk6',inherit:'Text_textRecipe_variant_inherit__1buvrbk7'},color:{primary:'Text_textRecipe_color_primary__1buvrbk8',secondary:'Text_textRecipe_color_secondary__1buvrbk9',muted:'Text_textRecipe_color_muted__1buvrbka',disabled:'Text_textRecipe_color_disabled__1buvrbkb',accent:'Text_textRecipe_color_accent__1buvrbkc',success:'Text_textRecipe_color_success__1buvrbkd',warning:'Text_textRecipe_color_warning__1buvrbke',error:'Text_textRecipe_color_error__1buvrbkf'},size:{xs:'Text_textRecipe_size_xs__1buvrbkg',sm:'Text_textRecipe_size_sm__1buvrbkh',md:'Text_textRecipe_size_md__1buvrbki',lg:'Text_textRecipe_size_lg__1buvrbkj',xl:'Text_textRecipe_size_xl__1buvrbkk'},weight:{normal:'Text_textRecipe_weight_normal__1buvrbkl',medium:'Text_textRecipe_weight_medium__1buvrbkm',semibold:'Text_textRecipe_weight_semibold__1buvrbkn'},lineHeight:{tight:'Text_textRecipe_lineHeight_tight__1buvrbko',normal:'Text_textRecipe_lineHeight_normal__1buvrbkp',relaxed:'Text_textRecipe_lineHeight_relaxed__1buvrbkq'},align:{left:'Text_textRecipe_align_left__1buvrbkr',center:'Text_textRecipe_align_center__1buvrbks',right:'Text_textRecipe_align_right__1buvrbkt',justify:'Text_textRecipe_align_justify__1buvrbku'},nowrap:{true:'Text_textRecipe_nowrap_true__1buvrbkv',false:'Text_textRecipe_nowrap_false__1buvrbkw'},mono:{true:'Text_textRecipe_mono_true__1buvrbkx',false:'Text_textRecipe_mono_false__1buvrbky'},truncate:{true:'Text_textRecipe_truncate_true__1buvrbkz',false:'Text_textRecipe_truncate_false__1buvrbk10'}},defaultVariants:{variant:'body',color:'primary',nowrap:false,mono:false,truncate:false},compoundVariants:[]});
+var truncateMultiLineStyle = 'Text_truncateMultiLineStyle__1buvrbk12';
+var truncateSingleLineStyle = 'Text_truncateSingleLineStyle__1buvrbk11';
+
+export { textRecipe, truncateMultiLineStyle, truncateSingleLineStyle };
+//# sourceMappingURL=Text.css.js.map

package/dist/esm/components/primitives/Text/Text.css.js.map

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

package/dist/esm/components/primitives/Text/Text.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { truncateMultiLineStyle, truncateSingleLineStyle, textRecipe } from './Text.css.js';
+
+/**
+ * A versatile text component for consistent typography in editor interfaces.
+ *
+ * Provides semantic variants, flexible sizing, and comprehensive text styling
+ * options optimized for professional editor UIs. Uses theme typography tokens
+ * for consistent spacing and sizing across the application.
+ *
+ * @example
+ * ```tsx
+ * // Semantic variants
+ * <Text variant="display">Main Title</Text>
+ * <Text variant="heading">Section Heading</Text>
+ * <Text variant="body">Regular paragraph text</Text>
+ * <Text variant="caption">Small helper text</Text>
+ * <Text variant="code">console.log('hello')</Text>
+ *
+ * // Custom sizing and colors
+ * <Text size="lg" weight="semibold" color="accent">
+ *   Custom styled text
+ * </Text>
+ *
+ * // With truncation
+ * <Text truncate maxLines={2}>
+ *   Long text that will be truncated after two lines...
+ * </Text>
+ *
+ * // Different HTML elements
+ * <Text as="h1" variant="display">Page Title</Text>
+ * <Text as="p" variant="body">Paragraph content</Text>
+ * <Text as="label" variant="caption">Form label</Text>
+ * ```
+ */
+const Text = /*#__PURE__*/ React.memo(({ children, as: Component = 'span', variant = 'body', size, weight, color = 'primary', lineHeight, align, truncate = false, maxLines, nowrap = false, mono = false, className, style, testId, ref, ...rest }) => {
+    // Only pass size/weight/lineHeight overrides when variant is not 'inherit'
+    const sizeVariant = size && variant !== 'inherit' ? size : undefined;
+    const weightVariant = weight && variant !== 'inherit' ? weight : undefined;
+    const lineHeightVariant = lineHeight && variant !== 'inherit' ? lineHeight : undefined;
+    const truncateStyle = truncate && maxLines ? { WebkitLineClamp: maxLines } : undefined;
+    return (jsx(Component, { ref: ref, className: cx(textRecipe({
+            variant,
+            color,
+            size: sizeVariant,
+            weight: weightVariant,
+            lineHeight: lineHeightVariant,
+            align,
+            nowrap: nowrap || undefined,
+            mono: mono || variant === 'code' ? true : undefined,
+            truncate: truncate || undefined,
+        }), truncate && !maxLines && truncateSingleLineStyle, truncate && maxLines ? truncateMultiLineStyle : undefined, className), style: { ...truncateStyle, ...style }, "data-testid": testId, ...rest, children: children }));
+});
+Text.displayName = 'Text';
+
+export { Text };
+//# sourceMappingURL=Text.js.map

package/dist/esm/components/primitives/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../../../../src/components/primitives/Text/Text.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAiLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACI;;AAqBH;AACA;AACA;AAGA;AAGA;;;AAOQ;AACA;AACA;;;AAGA;;AAED;AAYT;AAGF;;"}

package/dist/esm/components/primitives/Tooltip/Arrow.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tooltip } from '@base-ui/react/tooltip';
+import { cx } from '../../../utils/cx.js';
+import { tooltipArrowStyle, arrowFillStyle } from './Tooltip.css.js';
+
+const ArrowSvg = (props) => {
+    return (jsx("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", style: {
+            // Improve SVG rendering quality
+            shapeRendering: 'geometricPrecision',
+            imageRendering: 'crisp-edges',
+        }, ...props, children: jsx("path", { className: arrowFillStyle, d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z" }) }));
+};
+const StyledTooltipArrow = React.forwardRef(({ className, ...props }, ref) => (jsx(Tooltip.Arrow, { ref: ref, className: cx(tooltipArrowStyle, typeof className === 'string' ? className : undefined), ...props })));
+StyledTooltipArrow.displayName = 'StyledTooltipArrow';
+
+export { ArrowSvg, StyledTooltipArrow };
+//# sourceMappingURL=Arrow.js.map

package/dist/esm/components/primitives/Tooltip/Arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.js","sources":["../../../../../../src/components/primitives/Tooltip/Arrow.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQO;AACL;;AAQM;AACA;AACD;AASP;AAEO;AAcP;;"}

package/dist/esm/components/primitives/Tooltip/Tooltip.css.js

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/primitives/Tooltip/Tooltip.css.ts.vanilla-CrEFoLBX.css';
+
+var arrowFillStyle = 'Tooltip_arrowFillStyle__u81kis2';
+var tooltipArrowStyle = 'Tooltip_tooltipArrowStyle__u81kis3';
+var tooltipContentStyle = 'Tooltip_tooltipContentStyle__u81kis0';
+var tooltipTriggerStyle = 'Tooltip_tooltipTriggerStyle__u81kis1';
+
+export { arrowFillStyle, tooltipArrowStyle, tooltipContentStyle, tooltipTriggerStyle };
+//# sourceMappingURL=Tooltip.css.js.map

package/dist/esm/components/primitives/Tooltip/Tooltip.css.js.map

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

package/dist/esm/components/primitives/Tooltip/Tooltip.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import { cx } from '../../../utils/cx.js';
+import { StyledTooltipArrow, ArrowSvg } from './Arrow.js';
+import { parsePlacement, parseCollisionStrategy } from './utils.js';
+import { tooltipTriggerStyle, tooltipContentStyle } from './Tooltip.css.js';
+
+/**
+ * A tooltip component that displays contextual information on hover.
+ *
+ * Built on @base-ui/react for robust accessibility and positioning.
+ * Provides an intuitive API similar to MUI with advanced positioning and collision handling.
+ * Supports both simple text and complex React nodes for advanced tooltip content.
+ *
+ * @example
+ * ```tsx
+ * // Simple text tooltip
+ * <Tooltip title="Save your work">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ *
+ * // Intuitive positioning (MUI-style)
+ * <Tooltip placement="bottom-start" title="Menu options">
+ *   <IconButton><MenuIcon /></IconButton>
+ * </Tooltip>
+ *
+ * // Intelligent collision handling (new default)
+ * <Tooltip collision="smart" title="Intelligent positioning">
+ *   <Button>Smart tooltip</Button>
+ * </Tooltip>
+ *
+ * // Advanced collision configuration
+ * <Tooltip
+ *   collisionConfig={{
+ *     side: 'flip',
+ *     align: 'shift',
+ *     fallbackAxisSide: 'start',
+ *     hideWhenDetached: true
+ *   }}
+ *   title="Custom collision handling"
+ * >
+ *   <Button>Advanced collision</Button>
+ * </Tooltip>
+ *
+ * // Advanced positioning
+ * <Tooltip
+ *   positioner={{
+ *     offset: 12,
+ *     padding: 10,
+ *     sticky: true,
+ *     boundary: '#container'
+ *   }}
+ *   title="Advanced positioning"
+ * >
+ *   <Button>Advanced</Button>
+ * </Tooltip>
+ *
+ * // Custom animations
+ * <Tooltip
+ *   animation={{
+ *     animated: true,
+ *     duration: 300,
+ *     easing: 'ease-in-out'
+ *   }}
+ *   title="Custom animation"
+ * >
+ *   <Button>Animated</Button>
+ * </Tooltip>
+ *
+ * // Interactive tooltip
+ * <Tooltip
+ *   hoverable={true}
+ *   closeDelay={300}
+ *   title={
+ *     <div>
+ *       <strong>Interactive Content</strong>
+ *       <br />
+ *       <button>Click me</button>
+ *     </div>
+ *   }
+ * >
+ *   <Button>Hoverable tooltip</Button>
+ * </Tooltip>
+ *
+ * // Full control with raw props
+ * <Tooltip
+ *   arrow={false}
+ *   rootProps={{ trackCursorAxis: 'x' }}
+ *   positionerProps={{ arrowPadding: 20 }}
+ *   title="Full control"
+ * >
+ *   <Button>Power user</Button>
+ * </Tooltip>
+ * ```
+ */
+const Tooltip = ({ children, title, placement = 'top', collision = 'smart', collisionConfig, positioner = {}, animation = {}, delay = 600, closeDelay = 0, arrow = true, disabled = false, rootProps = {}, positionerProps = {}, className, testId, id, style, ref, ...htmlProps }) => {
+    // If disabled, return just the children without tooltip
+    if (disabled) {
+        return children;
+    }
+    // Parse placement into side and align
+    const { side, align } = parsePlacement(placement);
+    // Parse collision strategy or use custom config
+    const collisionSettings = collisionConfig
+        ? {
+            collisionAvoidance: {
+                side: collisionConfig.side ?? 'flip',
+                align: collisionConfig.align ?? 'shift',
+                fallbackAxisSide: collisionConfig.fallbackAxisSide ?? 'none',
+            },
+        }
+        : parseCollisionStrategy(collision);
+    // Prepare positioner configuration
+    const { offset = 8, padding = 8, sticky = false, boundary, trackCursor, } = positioner;
+    // Prepare final positioner props
+    const finalPositionerProps = {
+        side,
+        align,
+        sideOffset: offset,
+        collisionPadding: padding,
+        sticky,
+        collisionAvoidance: collisionSettings.collisionAvoidance,
+        ...positionerProps,
+    };
+    // Handle boundary if specified
+    if (boundary) {
+        if (typeof boundary === 'string') {
+            const boundaryElement = document.querySelector(boundary);
+            if (boundaryElement) {
+                finalPositionerProps.collisionBoundary = boundaryElement;
+            }
+        }
+        else {
+            finalPositionerProps.collisionBoundary = boundary;
+        }
+    }
+    // Handle cursor tracking
+    if (trackCursor) {
+        rootProps.trackCursorAxis = trackCursor;
+    }
+    // Build animation transition style
+    const animated = animation?.animated !== false;
+    const duration = animation?.duration ?? 200;
+    const easing = animation?.easing ?? 'ease-out';
+    const animationStyle = animated
+        ? {
+            transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
+        }
+        : { transition: 'none' };
+    return (jsx(Tooltip$1.Provider, { delay: delay, closeDelay: closeDelay, ...rootProps, children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { render: props => (jsx("div", { ...props, className: cx(tooltipTriggerStyle, props.className) })), children: children }), jsx(Tooltip$1.Portal, { children: jsx(Tooltip$1.Positioner, { ...finalPositionerProps, children: jsx(Tooltip$1.Popup, { render: props => (jsxs("div", { ...props, className: cx(tooltipContentStyle, className, props.className), "data-testid": testId, id: id, style: {
+                                    ...animationStyle,
+                                    ...style,
+                                    ...props.style,
+                                }, ref: ref, ...htmlProps, children: [title, arrow && (jsx(StyledTooltipArrow, { children: jsx(ArrowSvg, {}) }))] })) }) }) })] }) }));
+};
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/components/primitives/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA8HA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFG;AACI;;;AAuBH;;;;;;AAQA;AACI;AACE;AACA;AACA;AACqB;AACxB;AACH;;AAGF;;AASA;;;AAGE;AACA;;;AAGA;;;;AAKA;;;AAGI;;;;AAGF;;;;;AAMF;;;AAIF;AACA;AACA;;AAGE;;AAEG;AACH;;AA8BgB;AACA;;;AAoBpB;AAEA;;"}

package/dist/esm/components/primitives/Tooltip/utils.js

@@ -0,0 +1,66 @@
+/**
+ * Convert our placement prop to Base UI side and align
+ */
+const parsePlacement = (placement) => {
+    const [side, align = 'center'] = placement.split('-');
+    return { side, align: align || 'center' };
+};
+/**
+ * Convert collision strategy to Base UI CollisionAvoidance config
+ */
+const parseCollisionStrategy = (strategy) => {
+    switch (strategy) {
+        case 'flip':
+            return {
+                collisionAvoidance: {
+                    side: 'flip',
+                    align: 'none',
+                    fallbackAxisSide: 'none',
+                },
+            };
+        case 'shift':
+            return {
+                collisionAvoidance: {
+                    side: 'shift',
+                    align: 'shift',
+                    fallbackAxisSide: 'none',
+                },
+            };
+        case 'hide':
+            return {
+                collisionAvoidance: undefined,
+                hideWhenDetached: true,
+            };
+        case 'flip-shift':
+            return {
+                collisionAvoidance: {
+                    side: 'flip',
+                    align: 'shift',
+                    fallbackAxisSide: 'none',
+                },
+            };
+        case 'smart':
+            return {
+                collisionAvoidance: {
+                    side: 'flip',
+                    align: 'shift',
+                    fallbackAxisSide: 'start',
+                },
+            };
+        case 'none':
+            return {
+                collisionAvoidance: undefined,
+            };
+        default:
+            return {
+                collisionAvoidance: {
+                    side: 'flip',
+                    align: 'shift',
+                    fallbackAxisSide: 'start',
+                },
+            };
+    }
+};
+
+export { parseCollisionStrategy, parsePlacement };
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/primitives/Tooltip/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/primitives/Tooltip/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAOA;;AAEG;AACI,MAAM,cAAc,GAAG,CAAC,SAA2B,KAAI;AAC5D,IAAA,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAGnD;IACD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE;AAC3C;AAEA;;AAEG;AACI,MAAM,sBAAsB,GAAG,CACpC,QAAkC,KAIhC;IACF,QAAQ,QAAQ;AACd,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE,SAAS;AAC7B,gBAAA,gBAAgB,EAAE,IAAI;aACvB;AAEH,QAAA,KAAK,YAAY;YACf,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,MAAM;AACzB,iBAAA;aACF;AAEH,QAAA,KAAK,OAAO;YACV,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,OAAO;AAC1B,iBAAA;aACF;AAEH,QAAA,KAAK,MAAM;YACT,OAAO;AACL,gBAAA,kBAAkB,EAAE,SAAS;aAC9B;AAEH,QAAA;YACE,OAAO;AACL,gBAAA,kBAAkB,EAAE;AAClB,oBAAA,IAAI,EAAE,MAAM;AACZ,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE,OAAO;AAC1B,iBAAA;aACF;;AAEP;;;;"}

package/dist/esm/components/primitives/canvas/CanvasContainer.css.js

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/primitives/canvas/CanvasContainer.css.ts.vanilla-DR3zkEYQ.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var ariaLiveRegionStyle = 'CanvasContainer_ariaLiveRegionStyle__ktqdsj7';
+var canvasContainerHeightVar = 'var(--canvasContainerHeightVar__ktqdsj0)';
+var canvasContainerRecipe = createRuntimeFn({defaultClassName:'CanvasContainer_canvasContainerRecipe__ktqdsj1',variantClassNames:{responsive:{true:'CanvasContainer_canvasContainerRecipe_responsive_true__ktqdsj2',false:'CanvasContainer_canvasContainerRecipe_responsive_false__ktqdsj3'}},defaultVariants:{responsive:false},compoundVariants:[]});
+var canvasRecipe = createRuntimeFn({defaultClassName:'CanvasContainer_canvasRecipe__ktqdsj4',variantClassNames:{disabled:{true:'CanvasContainer_canvasRecipe_disabled_true__ktqdsj5',false:'CanvasContainer_canvasRecipe_disabled_false__ktqdsj6'}},defaultVariants:{disabled:false},compoundVariants:[]});
+
+export { ariaLiveRegionStyle, canvasContainerHeightVar, canvasContainerRecipe, canvasRecipe };
+//# sourceMappingURL=CanvasContainer.css.js.map

package/dist/esm/components/primitives/canvas/CanvasContainer.css.js.map

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

package/dist/esm/components/primitives/canvas/CanvasContainer.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { canvasRecipe, ariaLiveRegionStyle, canvasContainerHeightVar, canvasContainerRecipe } from './CanvasContainer.css.js';
+
+/**
+ * Styled container + canvas + a11y live region.
+ *
+ * Provides the boilerplate every canvas control needs:
+ * - Responsive or fixed-height container
+ * - Canvas element with proper styling
+ * - Screen reader announcements region
+ * - Disabled opacity
+ * - Focus-visible ring
+ *
+ * Does NOT manage rendering — consumers use useCanvasSetup + useCanvasRenderer.
+ */
+const CanvasContainer = ({ canvasRef, height = 200, responsive = false, disabled = false, role = 'application', ariaLabel, ariaRoledescription, liveAnnouncement, handlers, className, style, testId, id, }) => {
+    const containerRef = useRef(null);
+    return (jsxs("div", { ref: containerRef, className: `${canvasContainerRecipe({ responsive })}${className ? ` ${className}` : ''}`, style: {
+            ...style,
+            ...assignInlineVars({
+                [canvasContainerHeightVar]: `${height}px`,
+            }),
+            minHeight: `${height}px`,
+        }, id: id, "data-testid": testId, children: [jsx("canvas", { ref: canvasRef, className: canvasRecipe({ disabled }), role: role, "aria-label": ariaLabel, "aria-roledescription": ariaRoledescription, tabIndex: disabled ? -1 : 0, onPointerDown: handlers?.onPointerDown, onPointerMove: handlers?.onPointerMove, onPointerUp: handlers?.onPointerUp, onDoubleClick: handlers?.onDoubleClick, onKeyDown: handlers?.onKeyDown }), jsx("div", { className: ariaLiveRegionStyle, "aria-live": "polite", role: "status", children: liveAnnouncement })] }));
+};
+CanvasContainer.displayName = 'CanvasContainer';
+
+export { CanvasContainer };
+//# sourceMappingURL=CanvasContainer.js.map

package/dist/esm/components/primitives/canvas/CanvasContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasContainer.js","sources":["../../../../../../src/components/primitives/canvas/CanvasContainer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAYA;;;;;;;;;;;AAWG;AACI;AAeL;AAEA;AAKM;AACA;AACE;;;AAGH;AAsBP;AAEA;;"}

package/dist/esm/components/primitives/canvas/canvasCoords.js

@@ -0,0 +1,51 @@
+/**
+ * Convert domain coordinates to canvas pixel coordinates.
+ *
+ * Y axis is flipped: domain Y goes up, canvas Y goes down.
+ */
+function domainToCanvas(domainX, domainY, viewport, canvasWidth, canvasHeight) {
+    const [vxMin, vxMax] = viewport.viewX;
+    const [vyMin, vyMax] = viewport.viewY;
+    const vw = vxMax - vxMin || 1;
+    const vh = vyMax - vyMin || 1;
+    const px = ((domainX - vxMin) / vw) * canvasWidth;
+    const py = ((vyMax - domainY) / vh) * canvasHeight;
+    return { px, py };
+}
+/**
+ * Convert canvas pixel coordinates to domain coordinates.
+ *
+ * Inverse of domainToCanvas — Y axis is flipped.
+ */
+function canvasToDomain(px, py, viewport, canvasWidth, canvasHeight) {
+    const [vxMin, vxMax] = viewport.viewX;
+    const [vyMin, vyMax] = viewport.viewY;
+    const vw = vxMax - vxMin || 1;
+    const vh = vyMax - vyMin || 1;
+    const x = vxMin + (px / canvasWidth) * vw;
+    const y = vyMax - (py / canvasHeight) * vh;
+    return { x, y };
+}
+/**
+ * Test whether a canvas pixel position is within tolerance of a domain point.
+ *
+ * @returns Distance in pixels, or Infinity if outside tolerance
+ */
+function hitTestPoint(px, py, point, viewport, canvasWidth, canvasHeight, tolerancePx = 10) {
+    const target = domainToCanvas(point.x, point.y, viewport, canvasWidth, canvasHeight);
+    const dist = Math.sqrt((px - target.px) ** 2 + (py - target.py) ** 2);
+    return dist <= tolerancePx ? dist : Infinity;
+}
+/**
+ * Get the canvas-pixel position of a pointer event relative to the canvas.
+ */
+function getCanvasPointerPosition(e, canvas) {
+    const rect = canvas.getBoundingClientRect();
+    return {
+        px: e.clientX - rect.left,
+        py: e.clientY - rect.top,
+    };
+}
+
+export { canvasToDomain, domainToCanvas, getCanvasPointerPosition, hitTestPoint };
+//# sourceMappingURL=canvasCoords.js.map

package/dist/esm/components/primitives/canvas/canvasCoords.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasCoords.js","sources":["../../../../../../src/components/primitives/canvas/canvasCoords.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA;;;;AAIG;AACG,SAAU,cAAc,CAC5B,OAAe,EACf,OAAe,EACf,QAAwB,EACxB,WAAmB,EACnB,YAAoB,EAAA;IAEpB,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK;IACrC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK;AAErC,IAAA,MAAM,EAAE,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC;AAC7B,IAAA,MAAM,EAAE,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC;AAE7B,IAAA,MAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,KAAK,IAAI,EAAE,IAAI,WAAW;AACjD,IAAA,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG,OAAO,IAAI,EAAE,IAAI,YAAY;AAElD,IAAA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE;AACnB;AAEA;;;;AAIG;AACG,SAAU,cAAc,CAC5B,EAAU,EACV,EAAU,EACV,QAAwB,EACxB,WAAmB,EACnB,YAAoB,EAAA;IAEpB,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK;IACrC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK;AAErC,IAAA,MAAM,EAAE,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC;AAC7B,IAAA,MAAM,EAAE,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC;IAE7B,MAAM,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,GAAG,WAAW,IAAI,EAAE;IACzC,MAAM,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,GAAG,YAAY,IAAI,EAAE;AAE1C,IAAA,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;AACjB;AAEA;;;;AAIG;SACa,YAAY,CAC1B,EAAU,EACV,EAAU,EACV,KAAc,EACd,QAAwB,EACxB,WAAmB,EACnB,YAAoB,EACpB,cAAsB,EAAE,EAAA;AAExB,IAAA,MAAM,MAAM,GAAG,cAAc,CAC3B,KAAK,CAAC,CAAC,EACP,KAAK,CAAC,CAAC,EACP,QAAQ,EACR,WAAW,EACX,YAAY,CACb;IACD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC;IACrE,OAAO,IAAI,IAAI,WAAW,GAAG,IAAI,GAAG,QAAQ;AAC9C;AAEA;;AAEG;AACG,SAAU,wBAAwB,CACtC,CAAuC,EACvC,MAAyB,EAAA;AAEzB,IAAA,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE;IAC3C,OAAO;AACL,QAAA,EAAE,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI;AACzB,QAAA,EAAE,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG;KACzB;AACH;;;;"}