entangle-ui 0.9.0 → 0.11.0

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../../../src/components/primitives/Switch/Switch.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA+GA;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;AAYG;AACI;AAmBL;AACA;AACA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;AAEA;AACA;;AAGE;AACA;AACD;;AAGC;AACA;AACD;;;;AAMD;;;;AAcK;;AAQE;AASP;AACE;;AAGF;;;;AAuBF;AAEA;;"}
+{"version":3,"file":"Switch.js","sources":["src/components/primitives/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useId, useState } from 'react';\n\nimport { FormHelperText } from '@/components/form/FormHelperText';\nimport { cx } from '@/utils/cx';\n\nimport {\n  switchContainerStyle,\n  switchRowRecipe,\n  trackRecipe,\n  trackWidthVar,\n  trackHeightVar,\n  thumbRecipe,\n  thumbDiameterVar,\n  thumbTranslateVar,\n  labelTextStyle,\n} from './Switch.css';\n\nimport type { Size } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n// --- Types ---\n\nexport type SwitchSize = Size;\n\nexport interface SwitchBaseProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange' | 'css'\n> {\n  /**\n   * Whether the switch is on (controlled)\n   */\n  checked?: boolean;\n\n  /**\n   * Default on/off state (uncontrolled)\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * Switch label text\n   */\n  label?: string;\n\n  /**\n   * Position of the label relative to the switch\n   * @default \"right\"\n   */\n  labelPosition?: 'left' | 'right';\n\n  /**\n   * Switch size\n   * - `sm`: 28x14px track, compact toolbars\n   * - `md`: 34x18px track, standard for panels\n   * - `lg`: 42x22px track, prominent settings\n   * @default \"md\"\n   */\n  size?: SwitchSize;\n\n  /**\n   * Whether the switch is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Helper text displayed below the switch\n   */\n  helperText?: string;\n\n  /**\n   * Error state\n   * @default false\n   */\n  error?: boolean;\n\n  /**\n   * Error message displayed when error is true\n   */\n  errorMessage?: string;\n\n  /**\n   * Name attribute for form submission\n   */\n  name?: string;\n\n  /**\n   * Change event handler\n   * @param checked - The new on/off state\n   */\n  onChange?: (checked: boolean) => void;\n\n  /**\n   * Test identifier for automated testing\n   */\n  testId?: string;\n\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nexport type SwitchProps = Prettify<SwitchBaseProps>;\n\n// --- Size maps ---\n\ninterface SizeConfig {\n  trackW: number;\n  trackH: number;\n  thumbDiameter: number;\n  offset: number;\n}\n\nconst SIZE_MAP: Record<SwitchSize, SizeConfig> = {\n  sm: { trackW: 28, trackH: 14, thumbDiameter: 10, offset: 2 },\n  md: { trackW: 34, trackH: 18, thumbDiameter: 14, offset: 2 },\n  lg: { trackW: 42, trackH: 22, thumbDiameter: 18, offset: 2 },\n};\n\n/**\n * Switch component for boolean on/off states in editor toolbars,\n * settings panels, and property inspectors.\n *\n * More space-efficient than Checkbox for toggle options like\n * \"Show Grid\", \"Snap to Grid\", \"Auto-Save\".\n *\n * @example\n * ```tsx\n * <Switch label=\"Show Grid\" />\n * <Switch checked={value} onChange={setValue} label=\"Auto-save\" />\n * ```\n */\nexport const Switch: React.FC<SwitchProps> = ({\n  checked: checkedProp,\n  defaultChecked = false,\n  label,\n  labelPosition = 'right',\n  size = 'md',\n  disabled = false,\n  helperText,\n  error = false,\n  errorMessage,\n  name,\n  onChange,\n  className,\n  style,\n  testId,\n  ref,\n  id: idProp,\n  ...rest\n}) => {\n  const autoId = useId();\n  const switchId = idProp ?? autoId;\n  const helperId = `${switchId}-helper`;\n\n  const [internalChecked, setInternalChecked] = useState(defaultChecked);\n  const isControlled = checkedProp !== undefined;\n  const resolvedChecked = isControlled ? checkedProp : internalChecked;\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n\n    const newChecked = !resolvedChecked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, resolvedChecked, isControlled, onChange]);\n\n  const showHelperText = error && errorMessage ? errorMessage : helperText;\n\n  const config = SIZE_MAP[size];\n  const translateX = config.trackW - config.thumbDiameter - config.offset * 2;\n\n  const trackInlineVars = assignInlineVars({\n    [trackWidthVar]: `${config.trackW}px`,\n    [trackHeightVar]: `${config.trackH}px`,\n  });\n\n  const thumbInlineVars = assignInlineVars({\n    [thumbDiameterVar]: `${config.thumbDiameter}px`,\n    [thumbTranslateVar]: `${translateX}px`,\n  });\n\n  const thumbStyle: React.CSSProperties = !resolvedChecked\n    ? { transform: `translateX(${config.offset}px)` }\n    : {};\n\n  const track = (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={resolvedChecked}\n      aria-disabled={disabled || undefined}\n      aria-describedby={showHelperText ? helperId : undefined}\n      disabled={disabled}\n      onClick={handleClick}\n      className={trackRecipe({\n        checked: resolvedChecked || undefined,\n        disabled: disabled || undefined,\n        error: error || undefined,\n      })}\n      style={trackInlineVars}\n      data-testid={testId}\n      {...rest}\n    >\n      <span\n        className={thumbRecipe({\n          checked: resolvedChecked || undefined,\n        })}\n        style={{ ...thumbInlineVars, ...thumbStyle }}\n      />\n      {name && (\n        <input type=\"hidden\" name={name} value={resolvedChecked ? 'on' : ''} />\n      )}\n    </button>\n  );\n\n  if (!label && !showHelperText) {\n    return track;\n  }\n\n  return (\n    <div className={cx(switchContainerStyle, className)} style={style}>\n      <label\n        className={switchRowRecipe({\n          size,\n          disabled: disabled || undefined,\n        })}\n      >\n        {labelPosition === 'left' && label && (\n          <span className={labelTextStyle}>{label}</span>\n        )}\n        {track}\n        {labelPosition === 'right' && label && (\n          <span className={labelTextStyle}>{label}</span>\n        )}\n      </label>\n      {showHelperText && (\n        <FormHelperText id={helperId} error={error}>\n          {showHelperText}\n        </FormHelperText>\n      )}\n    </div>\n  );\n};\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":";;;;;;;;AAkHA;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;AAYG;AACI;AAmBL;AACA;AACA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;AAEA;AACA;;AAGE;AACA;AACD;;AAGC;AACA;AACD;;;;AAMD;;;;AAcK;;AAQE;AASP;AACE;;AAGF;;;;AAuBF;AAEA;;"}

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

@@ -1 +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;;"}
+{"version":3,"file":"Text.js","sources":["src/components/primitives/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  textRecipe,\n  truncateSingleLineStyle,\n  truncateMultiLineStyle,\n} from './Text.css';\n\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * HTML element types that Text component can render as\n */\nexport type TextElement =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'span'\n  | 'div'\n  | 'label'\n  | 'strong'\n  | 'em'\n  | 'small';\n\n/**\n * Semantic text variants optimized for editor interfaces\n */\nexport type TextVariant =\n  | 'display' // Large headings, titles\n  | 'heading' // Section headings\n  | 'subheading' // Subsection headings\n  | 'body' // Standard body text\n  | 'caption' // Small descriptive text\n  | 'code' // Inline code text\n  | 'inherit'; // Inherit from parent\n\n/**\n * Text size using theme typography tokens\n */\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Text weight using theme typography tokens\n */\nexport type TextWeight = 'normal' | 'medium' | 'semibold';\n\n/**\n * Text color using theme color tokens\n */\nexport type TextColor =\n  | 'primary'\n  | 'secondary'\n  | 'muted'\n  | 'disabled'\n  | 'accent'\n  | 'success'\n  | 'warning'\n  | 'error';\n\n/**\n * Text alignment options\n */\nexport type TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n/**\n * Line height using theme typography tokens\n */\nexport type TextLineHeight = 'tight' | 'normal' | 'relaxed';\n\n/**\n * Base props for Text component\n */\nexport interface TextBaseProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  'css' | 'color'\n> {\n  /**\n   * Text content\n   */\n  children: React.ReactNode;\n\n  /**\n   * HTML element to render as\n   * @default \"span\"\n   */\n  as?: TextElement;\n\n  /**\n   * Semantic variant with predefined styling\n   * - `display`: Large text for main titles (xl size, semibold weight)\n   * - `heading`: Section headings (lg size, medium weight)\n   * - `subheading`: Subsection headings (md size, medium weight)\n   * - `body`: Standard body text (sm size, normal weight)\n   * - `caption`: Small descriptive text (xs size, normal weight)\n   * - `code`: Monospace text for code (sm size, mono font)\n   * - `inherit`: Inherit typography from parent\n   * @default \"body\"\n   */\n  variant?: TextVariant;\n\n  /**\n   * Text size using theme typography tokens\n   * Overrides variant size if specified\n   */\n  size?: TextSize;\n\n  /**\n   * Text weight using theme typography tokens\n   * Overrides variant weight if specified\n   */\n  weight?: TextWeight;\n\n  /**\n   * Text color using theme color tokens\n   * @default \"primary\"\n   */\n  color?: TextColor;\n\n  /**\n   * Line height using theme typography tokens\n   * Overrides variant line height if specified\n   */\n  lineHeight?: TextLineHeight;\n\n  /**\n   * Text alignment\n   */\n  align?: TextAlign;\n\n  /**\n   * Whether to truncate text with ellipsis on overflow\n   * @default false\n   */\n  truncate?: boolean;\n\n  /**\n   * Maximum number of lines before truncating (requires truncate=true)\n   * Single line truncation if not specified\n   */\n  maxLines?: number;\n\n  /**\n   * Whether text should not wrap to next line\n   * @default false\n   */\n  nowrap?: boolean;\n\n  /**\n   * Whether to use monospace font family\n   * Automatically true for 'code' variant\n   * @default false\n   */\n  mono?: boolean;\n\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n\n  /**\n   * Test identifier for automated testing\n   */\n  testId?: string;\n\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * Props for the Text component with prettified type for better IntelliSense\n */\nexport type TextProps = Prettify<TextBaseProps>;\n\n/**\n * A versatile text component for consistent typography in editor interfaces.\n *\n * Provides semantic variants, flexible sizing, and comprehensive text styling\n * options optimized for professional editor UIs. Uses theme typography tokens\n * for consistent spacing and sizing across the application.\n *\n * @example\n * ```tsx\n * // Semantic variants\n * <Text variant=\"display\">Main Title</Text>\n * <Text variant=\"heading\">Section Heading</Text>\n * <Text variant=\"body\">Regular paragraph text</Text>\n * <Text variant=\"caption\">Small helper text</Text>\n * <Text variant=\"code\">console.log('hello')</Text>\n *\n * // Custom sizing and colors\n * <Text size=\"lg\" weight=\"semibold\" color=\"accent\">\n *   Custom styled text\n * </Text>\n *\n * // With truncation\n * <Text truncate maxLines={2}>\n *   Long text that will be truncated after two lines...\n * </Text>\n *\n * // Different HTML elements\n * <Text as=\"h1\" variant=\"display\">Page Title</Text>\n * <Text as=\"p\" variant=\"body\">Paragraph content</Text>\n * <Text as=\"label\" variant=\"caption\">Form label</Text>\n * ```\n */\nexport const Text = /*#__PURE__*/ React.memo<TextProps>(\n  ({\n    children,\n    as: Component = 'span',\n    variant = 'body',\n    size,\n    weight,\n    color = 'primary',\n    lineHeight,\n    align,\n    truncate = false,\n    maxLines,\n    nowrap = false,\n    mono = false,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    // Only pass size/weight/lineHeight overrides when variant is not 'inherit'\n    const sizeVariant = size && variant !== 'inherit' ? size : undefined;\n    const weightVariant = weight && variant !== 'inherit' ? weight : undefined;\n    const lineHeightVariant =\n      lineHeight && variant !== 'inherit' ? lineHeight : undefined;\n\n    const truncateStyle =\n      truncate && maxLines ? { WebkitLineClamp: maxLines } : undefined;\n\n    return (\n      <Component\n        ref={ref as React.Ref<never>}\n        className={cx(\n          textRecipe({\n            variant,\n            color,\n            size: sizeVariant,\n            weight: weightVariant,\n            lineHeight: lineHeightVariant,\n            align,\n            nowrap: nowrap || undefined,\n            mono: mono || variant === 'code' ? true : undefined,\n            truncate: truncate || undefined,\n          }),\n          truncate && !maxLines && truncateSingleLineStyle,\n          truncate && maxLines ? truncateMultiLineStyle : undefined,\n          className\n        )}\n        style={{ ...truncateStyle, ...style }}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;;AAoLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACI;;AAqBH;AACA;AACA;AAGA;AAGA;;;AAOQ;AACA;AACA;;;AAGA;;AAED;AAYT;AAGF;;"}

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useRef, useId, useCallback, useEffect } from 'react';
-import { cx } from '../../../utils/cx.js';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import { FormLabel } from '../../form/FormLabel.js';
+import { cx } from '../../../utils/cx.js';
 import { textAreaRecipe, textAreaWrapperRecipe, textAreaFooterStyle, textAreaContainerStyle } from './TextArea.css.js';
 
 /**
@@ -41,8 +41,7 @@ const TextArea = ({ value, defaultValue, placeholder, size = 'md', disabled = fa
         if (typeof ref === 'function')
             ref(node);
         else if (ref)
-            ref.current =
-                node;
+            ref.current = node;
     }, [ref]);
     const autoResize = useCallback(() => {
         if (!autoSizeEnabled)
@@ -79,7 +78,7 @@ const TextArea = ({ value, defaultValue, placeholder, size = 'md', disabled = fa
         onChange?.(next);
     };
     const effectiveHelper = error && errorMessage ? errorMessage : helperText;
-    const count = currentValue?.length ?? 0;
+    const count = currentValue.length;
     return (jsxs("div", { className: cx(textAreaContainerStyle, className), style: style, children: [label && (jsx(FormLabel, { htmlFor: inputId, disabled: disabled, required: required, children: label })), jsx("div", { className: textAreaWrapperRecipe({ size, error, disabled, focused }), children: jsx("textarea", { ref: setRef, id: inputId, name: name, placeholder: placeholder, disabled: disabled, required: required, readOnly: readOnly, value: isControlled ? value : undefined, defaultValue: isControlled ? undefined : defaultValue, rows: autoSizeEnabled ? (minRows ?? rows) : rows, maxLength: maxLength, className: textAreaRecipe({
                         size,
                         monospace: monospace || undefined,

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/primitives/TextArea/TextArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAcA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AA+BL;AACA;AACA;AACA;AACA;AAEA;;;;AAMA;AAEI;;;AAEK;AACF;AACC;AACN;AAIF;AACE;;AACA;AACA;;AAEA;;AAGA;AACE;;;AAGF;AAEA;;AAEA;;;AAIA;AACF;AAEA;;AAEE;AACF;AACA;;AAEE;AACF;AACA;AACE;AACA;;AACA;AACF;AAEA;AACA;AAEA;;;AA0BS;AAaL;AAGM;AACA;AACA;AACA;AACD;AAgBX;AAEA;;"}
+{"version":3,"file":"TextArea.js","sources":["src/components/primitives/TextArea/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useId, useRef } from 'react';\n\nimport { FormHelperText } from '@/components/form/FormHelperText';\nimport { FormLabel } from '@/components/form/FormLabel';\nimport { cx } from '@/utils/cx';\n\nimport {\n  textAreaContainerStyle,\n  textAreaFooterStyle,\n  textAreaRecipe,\n  textAreaWrapperRecipe,\n} from './TextArea.css';\n\nimport type { TextAreaProps } from './TextArea.types';\n\n/**\n * Multi-line text input with optional auto-resize.\n *\n * Visual parity with `Input` — uses the same border, focus ring, and error\n * states. Auto-resize activates when `minRows` or `maxRows` is set and\n * disables the native resize handle.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   minRows={3}\n *   maxRows={8}\n *   value={value}\n *   onChange={setValue}\n *   showCount\n *   maxLength={500}\n * />\n * ```\n */\nexport const TextArea: React.FC<TextAreaProps> = ({\n  value,\n  defaultValue,\n  placeholder,\n  size = 'md',\n  disabled = false,\n  error = false,\n  required = false,\n  readOnly = false,\n  label,\n  helperText,\n  errorMessage,\n  resize = 'vertical',\n  rows = 3,\n  minRows,\n  maxRows,\n  monospace = false,\n  maxLength,\n  showCount = false,\n  className,\n  style,\n  onChange,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  testId,\n  ref,\n  id,\n  name,\n  ...rest\n}) => {\n  const [focused, setFocused] = React.useState(false);\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n  const autoId = useId();\n  const inputId = id ?? autoId;\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalValue;\n\n  const autoSizeEnabled = minRows !== undefined || maxRows !== undefined;\n  const effectiveResize = autoSizeEnabled ? 'none' : resize;\n\n  const setRef = useCallback(\n    (node: HTMLTextAreaElement | null) => {\n      textareaRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref]\n  );\n\n  const autoResize = useCallback(() => {\n    if (!autoSizeEnabled) return;\n    const el = textareaRef.current;\n    if (!el) return;\n\n    el.style.height = 'auto';\n\n    const measuredLineHeight = parseFloat(getComputedStyle(el).lineHeight);\n    const lineHeight = Number.isFinite(measuredLineHeight)\n      ? measuredLineHeight\n      : 18;\n    const minHeight = (minRows ?? 1) * lineHeight;\n    const maxHeight = maxRows ? maxRows * lineHeight : Infinity;\n\n    const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);\n    el.style.height = `${next}px`;\n    el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';\n  }, [autoSizeEnabled, minRows, maxRows]);\n\n  useEffect(() => {\n    autoResize();\n  }, [currentValue, autoResize]);\n\n  const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n  const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const next = event.target.value;\n    if (!isControlled) setInternalValue(next);\n    onChange?.(next);\n  };\n\n  const effectiveHelper = error && errorMessage ? errorMessage : helperText;\n  const count = currentValue.length;\n\n  return (\n    <div className={cx(textAreaContainerStyle, className)} style={style}>\n      {label && (\n        <FormLabel htmlFor={inputId} disabled={disabled} required={required}>\n          {label}\n        </FormLabel>\n      )}\n\n      <div\n        className={textAreaWrapperRecipe({ size, error, disabled, focused })}\n      >\n        <textarea\n          ref={setRef}\n          id={inputId}\n          name={name}\n          placeholder={placeholder}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          value={isControlled ? value : undefined}\n          defaultValue={isControlled ? undefined : defaultValue}\n          rows={autoSizeEnabled ? (minRows ?? rows) : rows}\n          maxLength={maxLength}\n          className={textAreaRecipe({\n            size,\n            monospace: monospace || undefined,\n          })}\n          style={{ resize: effectiveResize }}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={onKeyDown}\n          data-testid={testId}\n          aria-invalid={error || undefined}\n          {...rest}\n        />\n      </div>\n\n      {(effectiveHelper !== undefined && effectiveHelper !== '') ||\n      showCount ? (\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'flex-start',\n            gap: 8,\n          }}\n        >\n          {effectiveHelper !== undefined && effectiveHelper !== '' ? (\n            <FormHelperText error={error}>{effectiveHelper}</FormHelperText>\n          ) : (\n            <span />\n          )}\n          {showCount && (\n            <div className={textAreaFooterStyle}>\n              {maxLength !== undefined ? `${count}/${maxLength}` : count}\n            </div>\n          )}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nTextArea.displayName = 'TextArea';\n"],"names":[],"mappings":";;;;;;;;AAiBA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AA+BL;AACA;AACA;AACA;AACA;AAEA;;;;AAMA;AAEI;;;AAEK;AAAS;AAChB;AAIF;AACE;;AACA;AACA;;AAEA;;AAGA;AACE;;;AAGF;AAEA;;AAEA;;;AAIA;AACF;AAEA;;AAEE;AACF;AACA;;AAEE;AACF;AACA;AACE;AACA;;AACA;AACF;AAEA;AACA;AAEA;;;AA0BS;AAaL;AAGM;AACA;AACA;AACA;AACD;AAgBX;AAEA;;"}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
 import { Tooltip } from '@base-ui/react/tooltip';
+import React from 'react';
 import { cx } from '../../../utils/cx.js';
 import { tooltipArrowStyle, arrowFillStyle } from './Tooltip.css.js';
 

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

@@ -1 +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;;"}
+{"version":3,"file":"Arrow.js","sources":["src/components/primitives/Tooltip/Arrow.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip } from '@base-ui/react/tooltip';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { arrowFillStyle, tooltipArrowStyle } from './Tooltip.css';\n\nexport const ArrowSvg = (props: React.ComponentProps<'svg'>) => {\n  return (\n    <svg\n      width=\"20\"\n      height=\"10\"\n      viewBox=\"0 0 20 10\"\n      fill=\"none\"\n      style={{\n        // Improve SVG rendering quality\n        shapeRendering: 'geometricPrecision',\n        imageRendering: 'crisp-edges',\n      }}\n      {...props}\n    >\n      <path\n        className={arrowFillStyle}\n        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\"\n      />\n    </svg>\n  );\n};\n\nexport const StyledTooltipArrow = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof Tooltip.Arrow>\n>(({ className, ...props }, ref) => (\n  <Tooltip.Arrow\n    ref={ref}\n    className={cx(\n      tooltipArrowStyle,\n      typeof className === 'string' ? className : undefined\n    )}\n    {...props}\n  />\n));\n\nStyledTooltipArrow.displayName = 'StyledTooltipArrow';\n"],"names":[],"mappings":";;;;;;;AASO;AACL;;AAQM;AACA;AACD;AASP;AAEO;AAcP;;"}

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

@@ -3,8 +3,8 @@ 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';
+import { parsePlacement, parseCollisionStrategy } from './utils.js';
 
 /**
  * A tooltip component that displays contextual information on hover.
@@ -135,9 +135,11 @@ const Tooltip = ({ children, title, placement = 'top', collision = 'smart', coll
             finalPositionerProps.collisionBoundary = boundary;
         }
     }
-    // Handle cursor tracking
+    // Handle cursor tracking. Copy into a local object instead of mutating the
+    // caller-owned `rootProps` prop.
+    const finalRootProps = { ...rootProps };
     if (trackCursor) {
-        rootProps.trackCursorAxis = trackCursor;
+        finalRootProps.trackCursorAxis = trackCursor;
     }
     // Build animation transition style. Honors `prefers-reduced-motion: reduce`
     // by collapsing to `transition: none` regardless of caller-passed config —
@@ -145,15 +147,15 @@ const Tooltip = ({ children, title, placement = 'top', collision = 'smart', coll
     const prefersReducedMotion = typeof window !== 'undefined' &&
         typeof window.matchMedia === 'function' &&
         window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    const animated = animation?.animated !== false && !prefersReducedMotion;
-    const duration = animation?.duration ?? 200;
-    const easing = animation?.easing ?? 'ease-out';
+    const animated = animation.animated !== false && !prefersReducedMotion;
+    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: {
+    return (jsx(Tooltip$1.Provider, { delay: delay, closeDelay: closeDelay, ...finalRootProps, 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,

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

@@ -1 +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;;;;;AAMF;AAEE;AACA;;AAEF;AACA;;AAGE;;AAEG;AACH;;AA8BgB;AACA;;;AAoBpB;AAEA;;"}
+{"version":3,"file":"Tooltip.js","sources":["src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\n// src/components/primitives/Tooltip/Tooltip.tsx\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { ArrowSvg, StyledTooltipArrow } from './Arrow';\nimport { tooltipContentStyle, tooltipTriggerStyle } from './Tooltip.css';\nimport {\n  CollisionAvoidance,\n  TooltipAnimation,\n  TooltipCollisionConfig,\n  TooltipCollisionStrategy,\n  TooltipPlacement,\n  TooltipPositioner,\n  BaseTooltipPositionerProps,\n  BaseTooltipRootProps,\n} from './types';\nimport { parseCollisionStrategy, parsePlacement } from './utils';\n\nimport type { Prettify } from '@/types/utilities';\n\ninterface TooltipBaseProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'css' | 'title'\n> {\n  /**\n   * The trigger element that will show the tooltip on hover.\n   * Must be a single React element or component.\n   *\n   * @example\n   * <Button>Hover me</Button>\n   * <IconButton><SaveIcon /></IconButton>\n   */\n  children: React.ReactElement;\n\n  /**\n   * The content to display in the tooltip.\n   * Can be simple text or a complex React node for advanced customization.\n   *\n   * @example\n   * \"Save file\"\n   * <div><strong>Save</strong><br />Ctrl+S</div>\n   */\n  title: React.ReactNode;\n\n  /**\n   * Intuitive placement similar to MUI\n   * @default \"top\"\n   */\n  placement?: TooltipPlacement;\n\n  /**\n   * Collision handling strategy\n   * @default \"smart\"\n   */\n  collision?: TooltipCollisionStrategy;\n\n  /**\n   * Advanced collision configuration for power users\n   * When provided, overrides the collision strategy\n   */\n  collisionConfig?: TooltipCollisionConfig;\n\n  /**\n   * Advanced positioning configuration\n   */\n  positioner?: TooltipPositioner;\n\n  /**\n   * Animation configuration\n   */\n  animation?: TooltipAnimation;\n\n  /**\n   * Delay in milliseconds before showing the tooltip\n   * @default 600\n   */\n  delay?: number;\n\n  /**\n   * Delay in milliseconds before hiding the tooltip\n   * @default 0\n   */\n  closeDelay?: number;\n\n  /**\n   * Whether to show the arrow pointing to the trigger\n   * @default true\n   */\n  arrow?: boolean;\n\n  /**\n   * Whether the tooltip is disabled\n   * When true, tooltip will not appear\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Direct props passed to Base UI Root component\n   * For power users who need full control\n   */\n  rootProps?: Partial<BaseTooltipRootProps>;\n\n  /**\n   * Direct props passed to Base UI Positioner component\n   * For power users who need full control\n   */\n  positionerProps?: Partial<BaseTooltipPositionerProps>;\n\n  /**\n   * Test identifier for automated testing\n   */\n  testId?: string;\n\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Props for the Tooltip component with prettified type for better IntelliSense\n */\nexport type TooltipProps = Prettify<TooltipBaseProps>;\n\n/**\n * A tooltip component that displays contextual information on hover.\n *\n * Built on @base-ui/react for robust accessibility and positioning.\n * Provides an intuitive API similar to MUI with advanced positioning and collision handling.\n * Supports both simple text and complex React nodes for advanced tooltip content.\n *\n * @example\n * ```tsx\n * // Simple text tooltip\n * <Tooltip title=\"Save your work\">\n *   <Button>Save</Button>\n * </Tooltip>\n *\n * // Intuitive positioning (MUI-style)\n * <Tooltip placement=\"bottom-start\" title=\"Menu options\">\n *   <IconButton><MenuIcon /></IconButton>\n * </Tooltip>\n *\n * // Intelligent collision handling (new default)\n * <Tooltip collision=\"smart\" title=\"Intelligent positioning\">\n *   <Button>Smart tooltip</Button>\n * </Tooltip>\n *\n * // Advanced collision configuration\n * <Tooltip\n *   collisionConfig={{\n *     side: 'flip',\n *     align: 'shift',\n *     fallbackAxisSide: 'start',\n *     hideWhenDetached: true\n *   }}\n *   title=\"Custom collision handling\"\n * >\n *   <Button>Advanced collision</Button>\n * </Tooltip>\n *\n * // Advanced positioning\n * <Tooltip\n *   positioner={{\n *     offset: 12,\n *     padding: 10,\n *     sticky: true,\n *     boundary: '#container'\n *   }}\n *   title=\"Advanced positioning\"\n * >\n *   <Button>Advanced</Button>\n * </Tooltip>\n *\n * // Custom animations\n * <Tooltip\n *   animation={{\n *     animated: true,\n *     duration: 300,\n *     easing: 'ease-in-out'\n *   }}\n *   title=\"Custom animation\"\n * >\n *   <Button>Animated</Button>\n * </Tooltip>\n *\n * // Interactive tooltip\n * <Tooltip\n *   hoverable={true}\n *   closeDelay={300}\n *   title={\n *     <div>\n *       <strong>Interactive Content</strong>\n *       <br />\n *       <button>Click me</button>\n *     </div>\n *   }\n * >\n *   <Button>Hoverable tooltip</Button>\n * </Tooltip>\n *\n * // Full control with raw props\n * <Tooltip\n *   arrow={false}\n *   rootProps={{ trackCursorAxis: 'x' }}\n *   positionerProps={{ arrowPadding: 20 }}\n *   title=\"Full control\"\n * >\n *   <Button>Power user</Button>\n * </Tooltip>\n * ```\n */\nexport const Tooltip: React.FC<TooltipProps> = ({\n  children,\n  title,\n  placement = 'top',\n  collision = 'smart',\n  collisionConfig,\n  positioner = {},\n  animation = {},\n  delay = 600,\n  closeDelay = 0,\n  arrow = true,\n  disabled = false,\n  rootProps = {},\n  positionerProps = {},\n  className,\n  testId,\n  id,\n  style,\n  ref,\n  ...htmlProps\n}) => {\n  // If disabled, return just the children without tooltip\n  if (disabled) {\n    return children;\n  }\n\n  // Parse placement into side and align\n  const { side, align } = parsePlacement(placement);\n\n  // Parse collision strategy or use custom config\n  const collisionSettings = collisionConfig\n    ? {\n        collisionAvoidance: {\n          side: collisionConfig.side ?? 'flip',\n          align: collisionConfig.align ?? 'shift',\n          fallbackAxisSide: collisionConfig.fallbackAxisSide ?? 'none',\n        } as CollisionAvoidance,\n      }\n    : parseCollisionStrategy(collision);\n\n  // Prepare positioner configuration\n  const {\n    offset = 8,\n    padding = 8,\n    sticky = false,\n    boundary,\n    trackCursor,\n  } = positioner;\n\n  // Prepare final positioner props\n  const finalPositionerProps: Partial<BaseTooltipPositionerProps> = {\n    side,\n    align,\n    sideOffset: offset,\n    collisionPadding: padding,\n    sticky,\n    collisionAvoidance: collisionSettings.collisionAvoidance,\n    ...positionerProps,\n  };\n\n  // Handle boundary if specified\n  if (boundary) {\n    if (typeof boundary === 'string') {\n      const boundaryElement = document.querySelector(boundary);\n      if (boundaryElement) {\n        finalPositionerProps.collisionBoundary = boundaryElement;\n      }\n    } else {\n      finalPositionerProps.collisionBoundary = boundary;\n    }\n  }\n\n  // Handle cursor tracking. Copy into a local object instead of mutating the\n  // caller-owned `rootProps` prop.\n  const finalRootProps: Partial<BaseTooltipRootProps> = { ...rootProps };\n  if (trackCursor) {\n    finalRootProps.trackCursorAxis = trackCursor;\n  }\n\n  // Build animation transition style. Honors `prefers-reduced-motion: reduce`\n  // by collapsing to `transition: none` regardless of caller-passed config —\n  // user OS-level preference always wins over component config.\n  const prefersReducedMotion =\n    typeof window !== 'undefined' &&\n    typeof window.matchMedia === 'function' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  const animated = animation.animated !== false && !prefersReducedMotion;\n  const duration = animation.duration ?? 200;\n  const easing = animation.easing ?? 'ease-out';\n\n  const animationStyle: React.CSSProperties = animated\n    ? {\n        transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,\n      }\n    : { transition: 'none' };\n\n  return (\n    <BaseTooltip.Provider\n      delay={delay}\n      closeDelay={closeDelay}\n      {...finalRootProps}\n    >\n      <BaseTooltip.Root>\n        <BaseTooltip.Trigger\n          render={props => (\n            <div\n              {...props}\n              className={cx(tooltipTriggerStyle, props.className)}\n            />\n          )}\n        >\n          {children}\n        </BaseTooltip.Trigger>\n\n        <BaseTooltip.Portal>\n          <BaseTooltip.Positioner {...finalPositionerProps}>\n            <BaseTooltip.Popup\n              render={props => (\n                <div\n                  {...props}\n                  className={cx(\n                    tooltipContentStyle,\n                    className,\n                    props.className\n                  )}\n                  data-testid={testId}\n                  id={id}\n                  style={{\n                    ...animationStyle,\n                    ...style,\n                    ...props.style,\n                  }}\n                  ref={ref}\n                  {...htmlProps}\n                >\n                  {title}\n                  {arrow && (\n                    <StyledTooltipArrow>\n                      <ArrowSvg />\n                    </StyledTooltipArrow>\n                  )}\n                </div>\n              )}\n            />\n          </BaseTooltip.Positioner>\n        </BaseTooltip.Portal>\n      </BaseTooltip.Root>\n    </BaseTooltip.Provider>\n  );\n};\n\nTooltip.displayName = 'Tooltip';\n"],"names":[],"mappings":";;;;;;;;AA8HA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFG;AACI;;;AAuBH;;;;;;AAQA;AACI;AACE;AACA;AACA;AACqB;AACxB;AACH;;AAGF;;AASA;;;AAGE;AACA;;;AAGA;;;;AAKA;;;AAGI;;;;AAGF;;;;;AAMJ;;AAEE;;;;;AAMF;AAEE;AACA;;AAEF;AACA;;AAGE;;AAEG;AACH;;AAkCgB;AACA;;;AAoBpB;AAEA;;"}

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

@@ -3,7 +3,7 @@
  */
 const parsePlacement = (placement) => {
     const [side, align = 'center'] = placement.split('-');
-    return { side, align: align || 'center' };
+    return { side, align };
 };
 /**
  * Convert collision strategy to Base UI CollisionAvoidance config

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

@@ -1 +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;;;;"}
+{"version":3,"file":"utils.js","sources":["src/components/primitives/Tooltip/utils.ts"],"sourcesContent":["import type {\n  TooltipPlacement,\n  TooltipCollisionStrategy,\n  BaseTooltipPositionerProps,\n  CollisionAvoidance,\n} from './types';\n\n/**\n * Convert our placement prop to Base UI side and align\n */\nexport const parsePlacement = (placement: TooltipPlacement) => {\n  const [side, align = 'center'] = placement.split('-') as [\n    BaseTooltipPositionerProps['side'],\n    BaseTooltipPositionerProps['align']?,\n  ];\n  return { side, align };\n};\n\n/**\n * Convert collision strategy to Base UI CollisionAvoidance config\n */\nexport const parseCollisionStrategy = (\n  strategy: TooltipCollisionStrategy\n): {\n  collisionAvoidance: CollisionAvoidance;\n  hideWhenDetached?: boolean;\n} => {\n  switch (strategy) {\n    case 'flip':\n      return {\n        collisionAvoidance: {\n          side: 'flip',\n          align: 'none',\n          fallbackAxisSide: 'none',\n        },\n      };\n\n    case 'shift':\n      return {\n        collisionAvoidance: {\n          side: 'shift',\n          align: 'shift',\n          fallbackAxisSide: 'none',\n        },\n      };\n\n    case 'hide':\n      return {\n        collisionAvoidance: undefined,\n        hideWhenDetached: true,\n      };\n\n    case 'flip-shift':\n      return {\n        collisionAvoidance: {\n          side: 'flip',\n          align: 'shift',\n          fallbackAxisSide: 'none',\n        },\n      };\n\n    case 'smart':\n      return {\n        collisionAvoidance: {\n          side: 'flip',\n          align: 'shift',\n          fallbackAxisSide: 'start',\n        },\n      };\n\n    case 'none':\n      return {\n        collisionAvoidance: undefined,\n      };\n\n    default:\n      return {\n        collisionAvoidance: {\n          side: 'flip',\n          align: 'shift',\n          fallbackAxisSide: 'start',\n        },\n      };\n  }\n};\n"],"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;AACD,IAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE;AACxB;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/VisuallyHidden/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","sources":["../../../../../../src/components/primitives/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACI;AAWH;AAcF;AAGF;;"}
+{"version":3,"file":"VisuallyHidden.js","sources":["src/components/primitives/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  visuallyHiddenStyle,\n  visuallyHiddenFocusableStyle,\n} from './VisuallyHidden.css';\n\nimport type { VisuallyHiddenProps } from './VisuallyHidden.types';\n\n/**\n * Hides content visually while keeping it accessible to screen readers.\n *\n * Implements the canonical `sr-only` / `visually-hidden` pattern. Use it for\n * screen-reader-only labels, additional context next to icons, and\n * skip-to-content links (with `focusable`).\n *\n * Don't use this to hide content from sighted users for layout reasons —\n * that's `display: none`. This component keeps content in the accessibility\n * tree on purpose.\n *\n * @example\n * ```tsx\n * // SR-only label next to an icon-only button\n * <button>\n *   <SearchIcon />\n *   <VisuallyHidden>Search</VisuallyHidden>\n * </button>\n *\n * // Skip link revealed on focus\n * <VisuallyHidden as=\"a\" href=\"#main\" focusable>\n *   Skip to content\n * </VisuallyHidden>\n * ```\n */\nexport const VisuallyHidden = /*#__PURE__*/ React.memo<VisuallyHiddenProps>(\n  ({\n    as: Component = 'span',\n    focusable = false,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    return (\n      <Component\n        ref={ref as React.Ref<never>}\n        className={cx(\n          focusable ? visuallyHiddenFocusableStyle : visuallyHiddenStyle,\n          className\n        )}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nVisuallyHidden.displayName = 'VisuallyHidden';\n"],"names":[],"mappings":";;;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACI;AAWH;AAcF;AAGF;;"}

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useRef } from 'react';
 import { canvasRecipe, ariaLiveRegionStyle, canvasContainerHeightVar, canvasContainerRecipe } from './CanvasContainer.css.js';
 
 /**

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

@@ -1 +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;;"}
+{"version":3,"file":"CanvasContainer.js","sources":["src/components/primitives/canvas/CanvasContainer.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useRef } from 'react';\n\nimport {\n  canvasContainerRecipe,\n  canvasContainerHeightVar,\n  canvasRecipe,\n  ariaLiveRegionStyle,\n} from './CanvasContainer.css';\n\nimport type { CanvasContainerProps } from './canvas.types';\n\n/**\n * Styled container + canvas + a11y live region.\n *\n * Provides the boilerplate every canvas control needs:\n * - Responsive or fixed-height container\n * - Canvas element with proper styling\n * - Screen reader announcements region\n * - Disabled opacity\n * - Focus-visible ring\n *\n * Does NOT manage rendering — consumers use useCanvasSetup + useCanvasRenderer.\n */\nexport const CanvasContainer: React.FC<CanvasContainerProps> = ({\n  canvasRef,\n  height = 200,\n  responsive = false,\n  disabled = false,\n  role = 'application',\n  ariaLabel,\n  ariaRoledescription,\n  liveAnnouncement,\n  handlers,\n  className,\n  style,\n  testId,\n  id,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      ref={containerRef}\n      className={`${canvasContainerRecipe({ responsive })}${className ? ` ${className}` : ''}`}\n      style={{\n        ...style,\n        ...assignInlineVars({\n          [canvasContainerHeightVar]: `${height}px`,\n        }),\n        minHeight: `${height}px`,\n      }}\n      id={id}\n      data-testid={testId}\n    >\n      <canvas\n        ref={canvasRef}\n        className={canvasRecipe({ disabled })}\n        role={role}\n        aria-label={ariaLabel}\n        aria-roledescription={ariaRoledescription}\n        tabIndex={disabled ? -1 : 0}\n        onPointerDown={handlers?.onPointerDown}\n        onPointerMove={handlers?.onPointerMove}\n        onPointerUp={handlers?.onPointerUp}\n        onDoubleClick={handlers?.onDoubleClick}\n        onKeyDown={handlers?.onKeyDown}\n      />\n      <div className={ariaLiveRegionStyle} aria-live=\"polite\" role=\"status\">\n        {liveAnnouncement}\n      </div>\n    </div>\n  );\n};\n\nCanvasContainer.displayName = 'CanvasContainer';\n"],"names":[],"mappings":";;;;;;AAcA;;;;;;;;;;;AAWG;AACI;AAeL;AAEA;AAKM;AACA;AACE;;;AAGH;AAsBP;AAEA;;"}

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

@@ -1 +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;;;;"}
+{"version":3,"file":"canvasCoords.js","sources":["src/components/primitives/canvas/canvasCoords.ts"],"sourcesContent":["import type { CanvasViewport, Point2D } from './canvas.types';\n\n/**\n * Convert domain coordinates to canvas pixel coordinates.\n *\n * Y axis is flipped: domain Y goes up, canvas Y goes down.\n */\nexport function domainToCanvas(\n  domainX: number,\n  domainY: number,\n  viewport: CanvasViewport,\n  canvasWidth: number,\n  canvasHeight: number\n): { px: number; py: number } {\n  const [vxMin, vxMax] = viewport.viewX;\n  const [vyMin, vyMax] = viewport.viewY;\n\n  const vw = vxMax - vxMin || 1;\n  const vh = vyMax - vyMin || 1;\n\n  const px = ((domainX - vxMin) / vw) * canvasWidth;\n  const py = ((vyMax - domainY) / vh) * canvasHeight;\n\n  return { px, py };\n}\n\n/**\n * Convert canvas pixel coordinates to domain coordinates.\n *\n * Inverse of domainToCanvas — Y axis is flipped.\n */\nexport function canvasToDomain(\n  px: number,\n  py: number,\n  viewport: CanvasViewport,\n  canvasWidth: number,\n  canvasHeight: number\n): Point2D {\n  const [vxMin, vxMax] = viewport.viewX;\n  const [vyMin, vyMax] = viewport.viewY;\n\n  const vw = vxMax - vxMin || 1;\n  const vh = vyMax - vyMin || 1;\n\n  const x = vxMin + (px / canvasWidth) * vw;\n  const y = vyMax - (py / canvasHeight) * vh;\n\n  return { x, y };\n}\n\n/**\n * Test whether a canvas pixel position is within tolerance of a domain point.\n *\n * @returns Distance in pixels, or Infinity if outside tolerance\n */\nexport function hitTestPoint(\n  px: number,\n  py: number,\n  point: Point2D,\n  viewport: CanvasViewport,\n  canvasWidth: number,\n  canvasHeight: number,\n  tolerancePx: number = 10\n): number {\n  const target = domainToCanvas(\n    point.x,\n    point.y,\n    viewport,\n    canvasWidth,\n    canvasHeight\n  );\n  const dist = Math.sqrt((px - target.px) ** 2 + (py - target.py) ** 2);\n  return dist <= tolerancePx ? dist : Infinity;\n}\n\n/**\n * Get the canvas-pixel position of a pointer event relative to the canvas.\n */\nexport function getCanvasPointerPosition(\n  e: { clientX: number; clientY: number },\n  canvas: HTMLCanvasElement\n): { px: number; py: number } {\n  const rect = canvas.getBoundingClientRect();\n  return {\n    px: e.clientX - rect.left,\n    py: e.clientY - rect.top,\n  };\n}\n"],"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;;;;"}

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

@@ -1,5 +1,5 @@
-import { domainToCanvas } from './canvasCoords.js';
 import { clamp } from '../../../utils/mathUtils.js';
+import { domainToCanvas } from './canvasCoords.js';
 
 /**
  * Format a number for axis labels.

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

@@ -1 +1 @@
-{"version":3,"file":"canvasDrawing.js","sources":["../../../../../../src/components/primitives/canvas/canvasDrawing.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAYA;;;;AAIG;AACG,SAAU,WAAW,CAAC,KAAa,EAAE,WAAmB,EAAA;AAC5D,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI;AAC/C,IAAA,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC;AAAE,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;AAExD,IAAA,IAAI,WAAW,IAAI,CAAC,EAAE;QACpB,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;AAC9B,QAAA,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC;AAAE,YAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;AAChD,QAAA,OAAO,GAAG;IACZ;IAEA,IAAI,WAAW,IAAI,EAAE;AAAE,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;AAChD,IAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B;AAEA;;;;;AAKG;AACG,SAAU,QAAQ,CACtB,GAA6B,EAC7B,CAAS,EACT,CAAS,EACT,KAAwB,EACxB,OAAoB,EAAA;AAEpB,IAAA,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,CAAC,EAAE,GAAG,OAAO;AAC/D,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM;AACnC,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AAC5C,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AAE5C,IAAA,GAAG,CAAC,SAAS,GAAG,CAAC;;AAGjB,IAAA,MAAM,KAAK,GAAG,OAAO,GAAG,YAAY;AACpC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK;AACnC,QAAA,MAAM,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;QACtD,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,YAAY;AAC7C,QAAA,GAAG,CAAC,WAAW,GAAG,OAAO,IAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,QAAA,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa;QACrC,GAAG,CAAC,SAAS,EAAE;AACf,QAAA,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AACnC,QAAA,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;QACnC,GAAG,CAAC,MAAM,EAAE;IACd;;AAGA,IAAA,MAAM,KAAK,GAAG,OAAO,GAAG,YAAY;AACpC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK;AACnC,QAAA,MAAM,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;QACtD,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,YAAY;AAC7C,QAAA,GAAG,CAAC,WAAW,GAAG,OAAO,IAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,QAAA,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa;QACrC,GAAG,CAAC,SAAS,EAAE;AACf,QAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;AACnC,QAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;QACnC,GAAG,CAAC,MAAM,EAAE;IACd;AACF;AAEA;;AAEG;SACa,gBAAgB,CAC9B,GAA6B,EAC7B,CAAS,EACT,CAAS,EACT,KAAwB,EACxB,MAAoB,EACpB,QAAwB,EACxB,UAAkB,CAAC,EAAA;AAEnB,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM;AAEnC,IAAA,GAAG,CAAC,WAAW,GAAG,OAAO,GAAG,IAAI;AAChC,IAAA,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa;AACrC,IAAA,GAAG,CAAC,SAAS,GAAG,GAAG;IAEnB,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,GAAG,CAAC,SAAS,EAAE;AACf,IAAA,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AACtC,IAAA,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;IACtC,GAAG,CAAC,MAAM,EAAE;IAEZ,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,GAAG,CAAC,SAAS,EAAE;AACf,IAAA,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AACtC,IAAA,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;IACtC,GAAG,CAAC,MAAM,EAAE;IAEZ,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,GAAG,CAAC,SAAS,EAAE;AACf,IAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;AACtC,IAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;IACtC,GAAG,CAAC,MAAM,EAAE;IAEZ,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,GAAG,CAAC,SAAS,EAAE;AACf,IAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;AACtC,IAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;IACtC,GAAG,CAAC,MAAM,EAAE;AACd;AAEA;;;;;AAKG;AACG,SAAU,cAAc,CAC5B,GAA6B,EAC7B,CAAS,EACT,CAAS,EACT,KAAwB,EACxB,OAAyB,EAAA;AAEzB,IAAA,MAAM,EACJ,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,OAAO,GAAG,CAAC,EACX,MAAM,EACN,MAAM,GACP,GAAG,OAAO;AACX,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM;AACnC,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AAC5C,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AAE5C,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU;AACjC,IAAA,GAAG,CAAC,WAAW,GAAG,OAAO,GAAG,GAAG;AAC/B,IAAA,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS;AAC/B,IAAA,GAAG,CAAC,IAAI,GAAG,CAAA,EAAG,QAAQ,eAAe;IAErC,MAAM,WAAW,GAAG,CAAC;IACrB,MAAM,OAAO,GAAG,CAAC;IAEjB,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACtE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACtE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACtE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;AAEtE,IAAA,MAAM,QAAQ,GAAG,KAAK,CACpB,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,CAAC,EACZ,CAAC,GAAG,QAAQ,IAAI,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAC3C;IACD,MAAM,aAAa,GAAG;AACpB,UAAE,KAAK,CAAC,QAAQ,GAAG,QAAQ,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,QAAQ,GAAG,CAAC;UAClD,CAAC;AAEL,IAAA,MAAM,YAAY,GAAG,KAAK,CACxB,QAAQ,GAAG,OAAO,EAClB,WAAW,GAAG,CAAC,EACf,CAAC,GAAG,WAAW,CAChB;AACD,IAAA,MAAM,SAAS,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC;AAClC,IAAA,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,QAAQ,GAAG,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,KAAK,CACzB,QAAQ,GAAG,QAAQ,GAAG,CAAC,EACvB,WAAW,EACX,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC,CAC/C;;AAGD,IAAA,GAAG,CAAC,YAAY,GAAG,KAAK;AACxB,IAAA,MAAM,KAAK,GAAG,OAAO,GAAG,YAAY;AACpC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK;AACnC,QAAA,MAAM,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;QACtD,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC;AAExC,QAAA,IAAI,CAAC,KAAK,CAAC,EAAE;AACX,YAAA,GAAG,CAAC,SAAS,GAAG,MAAM;YACtB,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,CAAC;QAC7C;AAAO,aAAA,IAAI,CAAC,KAAK,YAAY,EAAE;AAC7B,YAAA,GAAG,CAAC,SAAS,GAAG,OAAO;YACvB,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,CAAC;QAC7C;aAAO;AACL,YAAA,GAAG,CAAC,SAAS,GAAG,QAAQ;YACxB,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC;QACtE;IACF;;AAGA,IAAA,GAAG,CAAC,SAAS,GAAG,OAAO;AACvB,IAAA,GAAG,CAAC,YAAY,GAAG,QAAQ;AAC3B,IAAA,MAAM,KAAK,GAAG,OAAO,GAAG,YAAY;AACpC,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK;AACnC,QAAA,MAAM,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;QACtD,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC;QAExC,MAAM,SAAS,GAAG,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,CAAC;QACjD,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC;IAC9C;;IAGA,IAAI,MAAM,EAAE;QACV,MAAM,SAAS,GAAG,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK;AAC/C,QAAA,MAAM,CAAC,GAAG,KAAK,CACb,QAAQ,GAAG,OAAO,EAClB,WAAW,EACX,CAAC,GAAG,WAAW,GAAG,SAAS,CAC5B;AACD,QAAA,GAAG,CAAC,SAAS,GAAG,MAAM;AACtB,QAAA,GAAG,CAAC,YAAY,GAAG,KAAK;QACxB,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,aAAa,CAAC;IACxC;IACA,IAAI,MAAM,EAAE;AACV,QAAA,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,EAAE,WAAW,EAAE,CAAC,GAAG,WAAW,CAAC;AACjE,QAAA,GAAG,CAAC,SAAS,GAAG,MAAM;AACtB,QAAA,GAAG,CAAC,YAAY,GAAG,KAAK;QACxB,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,aAAa,CAAC;IACxC;AACF;AAEA;;;;;AAKG;AACG,SAAU,aAAa,CAC3B,GAA6B,EAC7B,CAAS,EACT,CAAS,EACT,KAAwB,EACxB,OAAyB,EAAA;IAEzB,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,CAAC,EACb,QAAQ,GAAG,IAAI,EACf,OAAO,GAAG,CAAC,GACZ,GAAG,OAAO;IAEX,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;AAEnE,IAAA,GAAG,CAAC,WAAW,GAAG,OAAO,GAAG,GAAG;AAC/B,IAAA,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa;AACrC,IAAA,GAAG,CAAC,SAAS,GAAG,SAAS;AAEzB,IAAA,IAAI,SAAS,KAAK,QAAQ,EAAE;QAC1B,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB;SAAO;AACL,QAAA,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACrB;;IAGA,GAAG,CAAC,SAAS,EAAE;IACf,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;IACxD,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;IACxD,GAAG,CAAC,MAAM,EAAE;;IAGZ,GAAG,CAAC,SAAS,EAAE;IACf,GAAG,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;IACxD,GAAG,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;IACxD,GAAG,CAAC,MAAM,EAAE;AAEZ,IAAA,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;AACrB;AAEA;;;;;AAKG;AACG,SAAU,eAAe,CAC7B,GAA6B,EAC7B,CAAS,EACT,CAAS,EACT,KAAwB,EACxB,OAA2B,EAAA;IAE3B,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,CAAC,EACV,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,CAAC,GACZ,GAAG,OAAO;IAEX,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;AACnE,IAAA,MAAM,eAAe,GAAG,OAAO,IAAI,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,MAAM;AAEjE,IAAA,GAAG,CAAC,WAAW,GAAG,OAAO;;IAGzB,GAAG,CAAC,SAAS,EAAE;AACf,IAAA,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;AAChD,IAAA,GAAG,CAAC,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,mBAAmB;IAC1E,GAAG,CAAC,IAAI,EAAE;AACV,IAAA,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,aAAa;AACrC,IAAA,GAAG,CAAC,SAAS,GAAG,CAAC;IACjB,GAAG,CAAC,MAAM,EAAE;;IAGZ,GAAG,CAAC,SAAS,EAAE;AACf,IAAA,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;AAClC,IAAA,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa;IACnC,GAAG,CAAC,IAAI,EAAE;AACZ;AAEA;;;;AAIG;AACG,SAAU,cAAc,CAC5B,GAA6B,EAC7B,CAAS,EACT,CAAS,EACT,KAAwB,EACxB,QAAwB,EACxB,UAAkB,CAAC,EAAA;IAEnB,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK;IACrC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK;AAErC,IAAA,GAAG,CAAC,WAAW,GAAG,OAAO,GAAG,GAAG;AAC/B,IAAA,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS;AACjC,IAAA,GAAG,CAAC,SAAS,GAAG,CAAC;;IAGjB,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AAC5B,QAAA,MAAM,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;QACnD,GAAG,CAAC,SAAS,EAAE;AACf,QAAA,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;AACnC,QAAA,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;QACnC,GAAG,CAAC,MAAM,EAAE;IACd;;IAGA,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;AAC5B,QAAA,MAAM,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;QACnD,GAAG,CAAC,SAAS,EAAE;AACf,QAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;AACnC,QAAA,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;QACnC,GAAG,CAAC,MAAM,EAAE;IACd;AACF;;;;"}
+{"version":3,"file":"canvasDrawing.js","sources":["src/components/primitives/canvas/canvasDrawing.ts"],"sourcesContent":["import { clamp } from '@/utils/mathUtils';\n\nimport { domainToCanvas } from './canvasCoords';\n\nimport type {\n  CanvasViewport,\n  DomainBounds,\n  CanvasThemeColors,\n  GridOptions,\n  AxisLabelOptions,\n  CrosshairOptions,\n  PointMarkerOptions,\n} from './canvas.types';\n\n/**\n * Format a number for axis labels.\n * Integers show as \"0\", \"1\". Clean fractions show as \"0.25\", \"0.5\".\n * Others show with minimal decimals needed.\n */\nexport function formatLabel(value: number, domainRange: number): string {\n  const rounded = Math.round(value * 1e10) / 1e10;\n  if (Number.isInteger(rounded)) return rounded.toFixed(0);\n\n  if (domainRange <= 1) {\n    const str = rounded.toFixed(2);\n    if (str.endsWith('0')) return rounded.toFixed(1);\n    return str;\n  }\n\n  if (domainRange <= 10) return rounded.toFixed(1);\n  return rounded.toFixed(0);\n}\n\n/**\n * Draw grid lines at clean domain values.\n * Grid lines subdivide the domain range into equal parts.\n *\n * Extracted from CurveEditor's drawGrid — identical visual output.\n */\nexport function drawGrid(\n  ctx: CanvasRenderingContext2D,\n  w: number,\n  h: number,\n  theme: CanvasThemeColors,\n  options: GridOptions\n): void {\n  const { subdivisions, domain, viewport, opacity = 1 } = options;\n  const { domainX, domainY } = domain;\n  const dxRange = domainX[1] - domainX[0] || 1;\n  const dyRange = domainY[1] - domainY[0] || 1;\n\n  ctx.lineWidth = 1;\n\n  // Vertical grid lines (subdivide domain X)\n  const xStep = dxRange / subdivisions;\n  for (let i = 0; i <= subdivisions; i++) {\n    const domX = domainX[0] + i * xStep;\n    const { px } = domainToCanvas(domX, 0, viewport, w, h);\n    const isBound = i === 0 || i === subdivisions;\n    ctx.globalAlpha = opacity * (isBound ? 0.25 : 0.12);\n    ctx.strokeStyle = theme.borderDefault;\n    ctx.beginPath();\n    ctx.moveTo(Math.round(px) + 0.5, 0);\n    ctx.lineTo(Math.round(px) + 0.5, h);\n    ctx.stroke();\n  }\n\n  // Horizontal grid lines (subdivide domain Y)\n  const yStep = dyRange / subdivisions;\n  for (let i = 0; i <= subdivisions; i++) {\n    const domY = domainY[0] + i * yStep;\n    const { py } = domainToCanvas(0, domY, viewport, w, h);\n    const isBound = i === 0 || i === subdivisions;\n    ctx.globalAlpha = opacity * (isBound ? 0.25 : 0.12);\n    ctx.strokeStyle = theme.borderDefault;\n    ctx.beginPath();\n    ctx.moveTo(0, Math.round(py) + 0.5);\n    ctx.lineTo(w, Math.round(py) + 0.5);\n    ctx.stroke();\n  }\n}\n\n/**\n * Draw stronger lines at the domain boundaries (min/max on both axes).\n */\nexport function drawDomainBounds(\n  ctx: CanvasRenderingContext2D,\n  w: number,\n  h: number,\n  theme: CanvasThemeColors,\n  domain: DomainBounds,\n  viewport: CanvasViewport,\n  opacity: number = 1\n): void {\n  const { domainX, domainY } = domain;\n\n  ctx.globalAlpha = opacity * 0.35;\n  ctx.strokeStyle = theme.borderDefault;\n  ctx.lineWidth = 1.5;\n\n  const { px: pxMin } = domainToCanvas(domainX[0], 0, viewport, w, h);\n  ctx.beginPath();\n  ctx.moveTo(Math.round(pxMin) + 0.5, 0);\n  ctx.lineTo(Math.round(pxMin) + 0.5, h);\n  ctx.stroke();\n\n  const { px: pxMax } = domainToCanvas(domainX[1], 0, viewport, w, h);\n  ctx.beginPath();\n  ctx.moveTo(Math.round(pxMax) + 0.5, 0);\n  ctx.lineTo(Math.round(pxMax) + 0.5, h);\n  ctx.stroke();\n\n  const { py: pyMin } = domainToCanvas(0, domainY[0], viewport, w, h);\n  ctx.beginPath();\n  ctx.moveTo(0, Math.round(pyMin) + 0.5);\n  ctx.lineTo(w, Math.round(pyMin) + 0.5);\n  ctx.stroke();\n\n  const { py: pyMax } = domainToCanvas(0, domainY[1], viewport, w, h);\n  ctx.beginPath();\n  ctx.moveTo(0, Math.round(pyMax) + 0.5);\n  ctx.lineTo(w, Math.round(pyMax) + 0.5);\n  ctx.stroke();\n}\n\n/**\n * Draw axis labels at clean domain values.\n *\n * Y labels on the left side, X labels at the bottom.\n * Extracted from CurveEditor's drawAxisLabels — identical layout algorithm.\n */\nexport function drawAxisLabels(\n  ctx: CanvasRenderingContext2D,\n  w: number,\n  h: number,\n  theme: CanvasThemeColors,\n  options: AxisLabelOptions\n): void {\n  const {\n    subdivisions,\n    domain,\n    viewport,\n    opacity = 1,\n    labelX,\n    labelY,\n  } = options;\n  const { domainX, domainY } = domain;\n  const dxRange = domainX[1] - domainX[0] || 1;\n  const dyRange = domainY[1] - domainY[0] || 1;\n\n  const fontSize = theme.fontSizeXs;\n  ctx.globalAlpha = opacity * 0.7;\n  ctx.fillStyle = theme.textMuted;\n  ctx.font = `${fontSize}px sans-serif`;\n\n  const sidePadding = 4;\n  const axisGap = 6;\n\n  const { px: xAxisMin } = domainToCanvas(domainX[0], 0, viewport, w, h);\n  const { px: xAxisMax } = domainToCanvas(domainX[1], 0, viewport, w, h);\n  const { py: yAxisMin } = domainToCanvas(0, domainY[0], viewport, w, h);\n  const { py: yAxisMax } = domainToCanvas(0, domainY[1], viewport, w, h);\n\n  const xTickTop = clamp(\n    yAxisMin + axisGap,\n    yAxisMax + 2,\n    h - fontSize - (labelX ? fontSize + 8 : 2)\n  );\n  const xAxisLabelTop = labelX\n    ? clamp(xTickTop + fontSize + 4, 0, h - fontSize - 1)\n    : 0;\n\n  const yTickAnchorX = clamp(\n    xAxisMin - axisGap,\n    sidePadding + 1,\n    w - sidePadding\n  );\n  const yTickMinY = fontSize / 2 + 2;\n  const yTickMaxY = Math.max(yTickMinY, xTickTop - 2);\n  const yAxisLabelTop = clamp(\n    yAxisMax - fontSize - 4,\n    sidePadding,\n    Math.max(sidePadding, xTickTop - fontSize - 6)\n  );\n\n  // X axis labels (bottom, aligned to domain subdivisions)\n  ctx.textBaseline = 'top';\n  const xStep = dxRange / subdivisions;\n  for (let i = 0; i <= subdivisions; i++) {\n    const domX = domainX[0] + i * xStep;\n    const { px } = domainToCanvas(domX, 0, viewport, w, h);\n    const label = formatLabel(domX, dxRange);\n\n    if (i === 0) {\n      ctx.textAlign = 'left';\n      ctx.fillText(label, xAxisMin + 2, xTickTop);\n    } else if (i === subdivisions) {\n      ctx.textAlign = 'right';\n      ctx.fillText(label, xAxisMax - 2, xTickTop);\n    } else {\n      ctx.textAlign = 'center';\n      ctx.fillText(label, clamp(px, xAxisMin + 2, xAxisMax - 2), xTickTop);\n    }\n  }\n\n  // Y axis labels (left side, aligned to domain subdivisions)\n  ctx.textAlign = 'right';\n  ctx.textBaseline = 'middle';\n  const yStep = dyRange / subdivisions;\n  for (let i = 0; i <= subdivisions; i++) {\n    const domY = domainY[0] + i * yStep;\n    const { py } = domainToCanvas(0, domY, viewport, w, h);\n    const label = formatLabel(domY, dyRange);\n\n    const clampedPy = clamp(py, yTickMinY, yTickMaxY);\n    ctx.fillText(label, yTickAnchorX, clampedPy);\n  }\n\n  // Axis name labels\n  if (labelX) {\n    const textWidth = ctx.measureText(labelX).width;\n    const x = clamp(\n      xAxisMax + axisGap,\n      sidePadding,\n      w - sidePadding - textWidth\n    );\n    ctx.textAlign = 'left';\n    ctx.textBaseline = 'top';\n    ctx.fillText(labelX, x, xAxisLabelTop);\n  }\n  if (labelY) {\n    const x = clamp(xAxisMin + axisGap, sidePadding, w - sidePadding);\n    ctx.textAlign = 'left';\n    ctx.textBaseline = 'top';\n    ctx.fillText(labelY, x, yAxisLabelTop);\n  }\n}\n\n/**\n * Draw crosshair lines through a point.\n *\n * Used by CartesianPicker to show the current selection.\n * Can be solid or dashed, full-span or limited to domain bounds.\n */\nexport function drawCrosshair(\n  ctx: CanvasRenderingContext2D,\n  w: number,\n  h: number,\n  theme: CanvasThemeColors,\n  options: CrosshairOptions\n): void {\n  const {\n    point,\n    viewport,\n    lineStyle = 'dashed',\n    lineWidth = 1,\n    fullSpan = true,\n    opacity = 1,\n  } = options;\n\n  const { px, py } = domainToCanvas(point.x, point.y, viewport, w, h);\n\n  ctx.globalAlpha = opacity * 0.6;\n  ctx.strokeStyle = theme.accentPrimary;\n  ctx.lineWidth = lineWidth;\n\n  if (lineStyle === 'dashed') {\n    ctx.setLineDash([4, 4]);\n  } else {\n    ctx.setLineDash([]);\n  }\n\n  // Vertical line through point\n  ctx.beginPath();\n  ctx.moveTo(Math.round(px) + 0.5, fullSpan ? 0 : py - 20);\n  ctx.lineTo(Math.round(px) + 0.5, fullSpan ? h : py + 20);\n  ctx.stroke();\n\n  // Horizontal line through point\n  ctx.beginPath();\n  ctx.moveTo(fullSpan ? 0 : px - 20, Math.round(py) + 0.5);\n  ctx.lineTo(fullSpan ? w : px + 20, Math.round(py) + 0.5);\n  ctx.stroke();\n\n  ctx.setLineDash([]);\n}\n\n/**\n * Draw a circular point marker.\n *\n * Used by CartesianPicker for the selected point.\n * Supports hover and drag visual states.\n */\nexport function drawPointMarker(\n  ctx: CanvasRenderingContext2D,\n  w: number,\n  h: number,\n  theme: CanvasThemeColors,\n  options: PointMarkerOptions\n): void {\n  const {\n    point,\n    viewport,\n    radius = 6,\n    hovered = false,\n    dragging = false,\n    opacity = 1,\n  } = options;\n\n  const { px, py } = domainToCanvas(point.x, point.y, viewport, w, h);\n  const effectiveRadius = hovered || dragging ? radius + 2 : radius;\n\n  ctx.globalAlpha = opacity;\n\n  // Outer ring\n  ctx.beginPath();\n  ctx.arc(px, py, effectiveRadius, 0, Math.PI * 2);\n  ctx.fillStyle = dragging ? theme.accentPrimary : theme.backgroundSecondary;\n  ctx.fill();\n  ctx.strokeStyle = theme.accentPrimary;\n  ctx.lineWidth = 2;\n  ctx.stroke();\n\n  // Inner dot\n  ctx.beginPath();\n  ctx.arc(px, py, 2, 0, Math.PI * 2);\n  ctx.fillStyle = theme.accentPrimary;\n  ctx.fill();\n}\n\n/**\n * Draw axis origin lines (X=0 and Y=0 if visible within viewport).\n *\n * Useful for CartesianPicker where domain is centered on origin.\n */\nexport function drawOriginAxes(\n  ctx: CanvasRenderingContext2D,\n  w: number,\n  h: number,\n  theme: CanvasThemeColors,\n  viewport: CanvasViewport,\n  opacity: number = 1\n): void {\n  const [vxMin, vxMax] = viewport.viewX;\n  const [vyMin, vyMax] = viewport.viewY;\n\n  ctx.globalAlpha = opacity * 0.5;\n  ctx.strokeStyle = theme.textMuted;\n  ctx.lineWidth = 1;\n\n  // Y axis (x = 0) if in viewport\n  if (vxMin <= 0 && vxMax >= 0) {\n    const { px } = domainToCanvas(0, 0, viewport, w, h);\n    ctx.beginPath();\n    ctx.moveTo(Math.round(px) + 0.5, 0);\n    ctx.lineTo(Math.round(px) + 0.5, h);\n    ctx.stroke();\n  }\n\n  // X axis (y = 0) if in viewport\n  if (vyMin <= 0 && vyMax >= 0) {\n    const { py } = domainToCanvas(0, 0, viewport, w, h);\n    ctx.beginPath();\n    ctx.moveTo(0, Math.round(py) + 0.5);\n    ctx.lineTo(w, Math.round(py) + 0.5);\n    ctx.stroke();\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"canvasTheme.js","sources":["../../../../../../src/components/primitives/canvas/canvasTheme.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA;;;AAGG;AACH,SAAS,UAAU,CAAC,OAAgB,EAAE,MAAc,EAAA;IAClD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;AAC5C,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,MAAM;AACzB,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;AACxB,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,MAAM;AAC3B,IAAA,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,MAAM;AAC7E;AAEA;;;;;;AAMG;AACG,SAAU,kBAAkB,CAChC,MAAyB,EAAA;IAEzB,OAAO;AACL,QAAA,mBAAmB,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC;AACzE,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;AAC7D,QAAA,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACrD,QAAA,WAAW,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;AACzD,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC7D,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;AAC7D,QAAA,UAAU,EACR,UAAU,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE;KACpE;AACH;AAEA;;;AAGG;AACG,SAAU,eAAe,CAAC,OAAgB,EAAE,MAAc,EAAA;AAC9D,IAAA,OAAO,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC;AACpC;;;;"}
+{"version":3,"file":"canvasTheme.js","sources":["src/components/primitives/canvas/canvasTheme.ts"],"sourcesContent":["import { vars } from '@/theme/contract.css';\n\nimport type { CanvasThemeColors } from './canvas.types';\n\n/**\n * Resolve CSS variable references (e.g., `var(--etui-color-text-primary)`)\n * to their computed values via getComputedStyle.\n */\nfunction resolveVar(element: Element, cssVar: string): string {\n  const match = cssVar.match(/var\\(([^)]+)\\)/);\n  if (!match) return cssVar;\n  const varName = match[1];\n  if (!varName) return cssVar;\n  return getComputedStyle(element).getPropertyValue(varName).trim() || cssVar;\n}\n\n/**\n * Resolve Vanilla Extract CSS variables from a canvas element to\n * actual color values for canvas 2D drawing.\n *\n * Canvas 2D contexts cannot read CSS variables — this resolves them\n * via getComputedStyle.\n */\nexport function resolveCanvasTheme(\n  canvas: HTMLCanvasElement\n): CanvasThemeColors {\n  return {\n    backgroundSecondary: resolveVar(canvas, vars.colors.background.secondary),\n    borderDefault: resolveVar(canvas, vars.colors.border.default),\n    textMuted: resolveVar(canvas, vars.colors.text.muted),\n    textPrimary: resolveVar(canvas, vars.colors.text.primary),\n    textSecondary: resolveVar(canvas, vars.colors.text.secondary),\n    accentPrimary: resolveVar(canvas, vars.colors.accent.primary),\n    fontSizeXs:\n      parseFloat(resolveVar(canvas, vars.typography.fontSize.xs)) || 10,\n  };\n}\n\n/**\n * Resolve a single CSS variable reference string (e.g. `var(--etui-color-accent-primary)`)\n * to its computed value.\n */\nexport function resolveVarValue(element: Element, cssVar: string): string {\n  return resolveVar(element, cssVar);\n}\n"],"names":[],"mappings":";;AAIA;;;AAGG;AACH,SAAS,UAAU,CAAC,OAAgB,EAAE,MAAc,EAAA;IAClD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;AAC5C,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,MAAM;AACzB,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;AACxB,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,MAAM;AAC3B,IAAA,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,MAAM;AAC7E;AAEA;;;;;;AAMG;AACG,SAAU,kBAAkB,CAChC,MAAyB,EAAA;IAEzB,OAAO;AACL,QAAA,mBAAmB,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC;AACzE,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;AAC7D,QAAA,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACrD,QAAA,WAAW,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;AACzD,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC7D,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;AAC7D,QAAA,UAAU,EACR,UAAU,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE;KACpE;AACH;AAEA;;;AAGG;AACG,SAAU,eAAe,CAAC,OAAgB,EAAE,MAAc,EAAA;AAC9D,IAAA,OAAO,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC;AACpC;;;;"}

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

@@ -12,13 +12,19 @@ import { useRef, useCallback, useEffect } from 'react';
 function useCanvasRenderer(options) {
     const { draw, deps, paused = false } = options;
     const rafRef = useRef(0);
-    const stableDraw = useCallback(draw, deps); // deps intentionally dynamic
+    // This hook's contract is to re-run an arbitrary `draw` when caller-supplied
+    // `deps` change, so the dependency list is intentionally dynamic rather than
+    // a literal — the two rules below cannot model that generic pass-through.
+    // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
+    const stableDraw = useCallback(draw, deps);
     useEffect(() => {
         if (paused)
             return;
         cancelAnimationFrame(rafRef.current);
         rafRef.current = requestAnimationFrame(stableDraw);
-        return () => cancelAnimationFrame(rafRef.current);
+        return () => {
+            cancelAnimationFrame(rafRef.current);
+        };
     }, [stableDraw, paused]);
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"useCanvasRenderer.js","sources":["../../../../../../src/components/primitives/canvas/useCanvasRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAaA;;;;;;;AAOG;AACG;;AAEJ;;;AAKE;;AAEA;AACA;;AAGF;AACF;;"}
+{"version":3,"file":"useCanvasRenderer.js","sources":["src/components/primitives/canvas/useCanvasRenderer.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useCallback } from 'react';\n\ninterface UseCanvasRendererOptions {\n  /** The draw function to call each frame. */\n  draw: () => void;\n  /** Dependencies array — when these change, the canvas re-renders */\n  deps: unknown[];\n  /** Whether rendering is paused @default false */\n  paused?: boolean;\n}\n\n/**\n * Hook that manages a rAF-based render loop for canvas drawing.\n *\n * Calls the provided draw function whenever deps change.\n * Does NOT run continuously — only re-renders when deps trigger a change.\n *\n * Extracted from CurveEditor's useCurveRenderer rAF pattern.\n */\nexport function useCanvasRenderer(options: UseCanvasRendererOptions): void {\n  const { draw, deps, paused = false } = options;\n  const rafRef = useRef<number>(0);\n\n  // This hook's contract is to re-run an arbitrary `draw` when caller-supplied\n  // `deps` change, so the dependency list is intentionally dynamic rather than\n  // a literal — the two rules below cannot model that generic pass-through.\n  // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo\n  const stableDraw = useCallback(draw, deps);\n\n  useEffect(() => {\n    if (paused) return;\n\n    cancelAnimationFrame(rafRef.current);\n    rafRef.current = requestAnimationFrame(stableDraw);\n\n    return () => {\n      cancelAnimationFrame(rafRef.current);\n    };\n  }, [stableDraw, paused]);\n}\n"],"names":[],"mappings":";;;AAaA;;;;;;;AAOG;AACG;;AAEJ;;;;;;;AASE;;AAEA;AACA;AAEA;AACE;AACF;AACF;AACF;;"}

package/dist/esm/components/primitives/viewport/Viewport.css.js

@@ -0,0 +1,12 @@
+import './../../../assets/src/components/primitives/viewport/Viewport.css.ts.vanilla-CkFBJ7Vo.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var layerCanvasStyle = 'Viewport_layerCanvasStyle__4kgrsw8';
+var marqueeRectStyle = 'Viewport_marqueeRectStyle__4kgrswb';
+var overlayLayerStyle = 'Viewport_overlayLayerStyle__4kgrswa';
+var viewportHeightVar = 'var(--viewportHeightVar__4kgrsw0)';
+var viewportRootRecipe = createRuntimeFn({defaultClassName:'Viewport_viewportRootRecipe__4kgrsw1',variantClassNames:{responsive:{true:'Viewport_viewportRootRecipe_responsive_true__4kgrsw2',false:'Viewport_viewportRootRecipe_responsive_false__4kgrsw3'},disabled:{true:'Viewport_viewportRootRecipe_disabled_true__4kgrsw4',false:'Viewport_viewportRootRecipe_disabled_false__4kgrsw5'},panning:{true:'Viewport_viewportRootRecipe_panning_true__4kgrsw6',false:'Viewport_viewportRootRecipe_panning_false__4kgrsw7'}},defaultVariants:{responsive:false,disabled:false,panning:false},compoundVariants:[]});
+var worldLayerStyle = 'Viewport_worldLayerStyle__4kgrsw9';
+
+export { layerCanvasStyle, marqueeRectStyle, overlayLayerStyle, viewportHeightVar, viewportRootRecipe, worldLayerStyle };
+//# sourceMappingURL=Viewport.css.js.map

package/dist/esm/components/primitives/viewport/Viewport.css.js.map

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

package/dist/esm/components/primitives/viewport/Viewport.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React, { useRef, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useSyncExternalStore } from 'react';
+import '../../../utils/devWarn.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { cx } from '../../../utils/cx.js';
+import { clamp } from '../../../utils/mathUtils.js';
+import { useViewportGestures } from './useViewportGestures.js';
+import { viewportHeightVar, viewportRootRecipe, marqueeRectStyle } from './Viewport.css.js';
+import { ViewportStoreContext, useViewportStore } from './ViewportContext.js';
+import { ViewportStore } from './ViewportStore.js';
+
+const IDENTITY_TRANSFORM = { x: 0, y: 0, zoom: 1 };
+// Stable empty defaults so `useViewportGestures` does not re-compute config
+// objects on every render when the consumer passes nothing.
+const EMPTY_PAN = {};
+const EMPTY_ZOOM = {};
+const EMPTY_SELECTION = {};
+function getSlotKind(child) {
+    const displayName = child.type
+        ?.displayName;
+    if (displayName === 'ViewportLayer')
+        return 'layer';
+    if (displayName === 'ViewportWorld')
+        return 'world';
+    if (displayName === 'ViewportOverlay')
+        return 'overlay';
+    // Compound components rendered in the overlay slot (e.g. <ViewportMinimap />).
+    if (displayName === 'ViewportMinimap')
+        return 'overlay';
+    return null;
+}
+function categorizeChildren(children) {
+    const layers = [];
+    const worldChildren = [];
+    const overlayChildren = [];
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child))
+            return;
+        const kind = getSlotKind(child);
+        if (kind === 'layer')
+            layers.push(child);
+        else if (kind === 'world')
+            worldChildren.push(child);
+        else if (kind === 'overlay')
+            overlayChildren.push(child);
+    });
+    return { layers, worldChildren, overlayChildren };
+}
+/**
+ * Viewport — pan/zoom canvas + HTML container for editor-style surfaces
+ * such as node graphs, timelines, and 2D world editors.
+ *
+ * Composes:
+ * - Multiple perf-isolated `<ViewportLayer>` canvases (one draw cycle each).
+ * - `<ViewportWorld>` for HTML positioned in world coordinates.
+ * - `<ViewportOverlay>` for HTML pinned to the viewport (toolbars, minimap).
+ *
+ * Owns pan/zoom gestures (drag-to-pan, wheel-zoom-toward-cursor, optional
+ * pinch and space-to-pan) and optional marquee selection. Transform is
+ * controlled or uncontrolled (`useControlledState`-style) and mirrored
+ * into an internal `ViewportStore` that powers slice-level subscriptions
+ * for layers, world, and overlay children.
+ *
+ * @example
+ * ```tsx
+ * <Viewport responsive selectionRect={{ enabled: true }}>
+ *   <ViewportLayer name="grid" draw={drawGrid} invalidateOn={[gridStep]} />
+ *   <ViewportLayer name="content" draw={drawNodes} invalidateOn={[nodes]} />
+ *   <ViewportWorld>
+ *     <NodeView style={{ position: 'absolute', left: 100, top: 200 }} />
+ *   </ViewportWorld>
+ *   <ViewportOverlay>
+ *     <Toolbar />
+ *   </ViewportOverlay>
+ * </Viewport>
+ * ```
+ */
+const Viewport = ({ transform: transformProp, defaultTransform, onTransformChange, minZoom = 0.1, maxZoom = 8, pan, zoom, selectionRect, onSelectionChange, onPanStart, onPanEnd, onZoomStart, onZoomEnd, responsive = false, height = 300, disabled = false, role = 'application', ariaLabel, ariaRoledescription, className, style, testId, id, children, ref, ...rest }) => {
+    const rootRef = useRef(null);
+    // One store per <Viewport> instance, stable for the lifetime of the component.
+    const store = useMemo(() => new ViewportStore(), []);
+    // ── Controlled / uncontrolled transform (React state) ──
+    const clampTransform = useCallback((t) => ({
+        x: t.x,
+        y: t.y,
+        zoom: clamp(t.zoom, minZoom, maxZoom),
+    }), [minZoom, maxZoom]);
+    const [transformRaw, setTransformRaw] = useControlledState({
+        value: transformProp,
+        defaultValue: defaultTransform,
+        onChange: onTransformChange,
+        fallback: IDENTITY_TRANSFORM,
+    });
+    const transform = useMemo(() => clampTransform(transformRaw), [transformRaw, clampTransform]);
+    const setTransform = useCallback((next) => {
+        setTransformRaw(clampTransform(next));
+    }, [setTransformRaw, clampTransform]);
+    // Mirror React state → store before paint so layer/world subscribers see the
+    // latest transform in the same frame.
+    useLayoutEffect(() => {
+        store.setTransform(transform);
+    }, [store, transform]);
+    // Wire the store's imperative methods (fitToContent etc.) to React's
+    // setTransform and current zoom limits.
+    useLayoutEffect(() => {
+        store.configureImperative({ setTransform, minZoom, maxZoom });
+    }, [store, setTransform, minZoom, maxZoom]);
+    // ── Size tracking ──
+    useResizeObserver(rootRef, entry => {
+        store.setSize({
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+        });
+    });
+    // Seed size on mount in case ResizeObserver fires asynchronously.
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        store.setSize({ width: rect.width, height: rect.height });
+    }, [store]);
+    // ── Imperative ref ──
+    useImperativeHandle(ref, () => store.handle, [store]);
+    // ── Gestures ──
+    const { handlers } = useViewportGestures({
+        viewportRef: rootRef,
+        store,
+        setTransform,
+        disabled,
+        minZoom,
+        maxZoom,
+        pan: pan ?? EMPTY_PAN,
+        zoom: zoom ?? EMPTY_ZOOM,
+        selectionRect: selectionRect ?? EMPTY_SELECTION,
+        callbacks: {
+            onPanStart,
+            onPanEnd,
+            onZoomStart,
+            onZoomEnd,
+            onSelectionChange,
+        },
+    });
+    // Subscribe to isPanning only — drives the cursor class on the wrapper.
+    const isPanning = useSyncExternalStore(store.subscribeIsPanning, store.getIsPanning);
+    // ── Children categorization ──
+    const { layers, worldChildren, overlayChildren } = useMemo(() => categorizeChildren(children), [children]);
+    const rootStyle = useMemo(() => ({
+        ...style,
+        ...(!responsive
+            ? assignInlineVars({ [viewportHeightVar]: `${height}px` })
+            : {}),
+    }), [style, responsive, height]);
+    return (jsx("div", { ref: rootRef, id: id, "data-testid": testId, role: role, "aria-label": ariaLabel, "aria-roledescription": ariaRoledescription, tabIndex: disabled ? -1 : 0, className: cx(viewportRootRecipe({
+            responsive,
+            disabled,
+            panning: isPanning,
+        }), className), style: rootStyle, onPointerDown: handlers.onPointerDown, onPointerMove: handlers.onPointerMove, onPointerUp: handlers.onPointerUp, onPointerCancel: handlers.onPointerCancel, onPointerEnter: handlers.onPointerEnter, onPointerLeave: handlers.onPointerLeave, onContextMenu: handlers.onContextMenu, ...rest, children: jsxs(ViewportStoreContext.Provider, { value: store, children: [layers, worldChildren, overlayChildren, jsx(MarqueeRect, {})] }) }));
+};
+Viewport.displayName = 'Viewport';
+/**
+ * Internal — renders the marquee selection rectangle. Subscribes only to
+ * the marquee slice so it re-renders only when the rectangle changes,
+ * never on transform/size/isPanning mutations.
+ */
+const MarqueeRect = () => {
+    const store = useViewportStore();
+    const rect = useSyncExternalStore(store.subscribeMarquee, store.getMarqueeRect);
+    if (!rect)
+        return null;
+    return (jsx("div", { className: marqueeRectStyle, style: {
+            left: rect.x,
+            top: rect.y,
+            width: rect.width,
+            height: rect.height,
+        }, "data-viewport-marquee": "" }));
+};
+
+export { Viewport };
+//# sourceMappingURL=Viewport.js.map