entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/editor/Timeline/useTimelinePlayback.js

@@ -0,0 +1,85 @@
+"use client";
+import { useRef, useEffectEvent, useEffect } from 'react';
+import { resolveLoop } from './timelineCoords.js';
+
+/**
+ * Advance a playhead by `dtSeconds` of wall-clock time at `fps`. Forward only.
+ * With a `loop` region the playhead wraps within it; without one it stops at
+ * `range.endFrame`. Pure — the rAF hook below drives it.
+ */
+function advancePlayback(current, dtSeconds, fps, range, loop) {
+    const next = current + Math.max(0, dtSeconds) * Math.max(0, fps);
+    if (loop) {
+        if (next < loop.endFrame)
+            return { frame: next, ended: false };
+        const span = Math.max(1e-6, loop.endFrame - loop.startFrame);
+        return {
+            frame: loop.startFrame + ((next - loop.startFrame) % span),
+            ended: false,
+        };
+    }
+    if (next >= range.endFrame)
+        return { frame: range.endFrame, ended: true };
+    return { frame: next, ended: false };
+}
+/**
+ * Drives the playhead while `playing` is true: a rAF loop advancing the frame
+ * in real time at `fps`. Keeps its own float accumulator (independent of the
+ * snapped/committed frame) and resyncs if the frame is changed externally
+ * (e.g. the user scrubs mid-playback).
+ */
+function useTimelinePlayback(opts) {
+    const accRef = useRef(opts.frame);
+    const lastEmittedRef = useRef(opts.frame);
+    // Canonical `useEffectEvent` use case: `tick` is called *only* from inside
+    // the rAF loop below (never attached to JSX or passed out), so it may read
+    // the latest props/state without re-arming the loop. This is the React
+    // "timer with latest values" pattern — keep it here; do not convert it to a
+    // handler that escapes the effect.
+    const tick = useEffectEvent((dt) => {
+        // External scrub during playback → resync the accumulator.
+        if (opts.frame !== lastEmittedRef.current) {
+            accRef.current = opts.frame;
+        }
+        const range = {
+            startFrame: opts.startFrame,
+            endFrame: opts.endFrame,
+        };
+        const region = resolveLoop(opts.loop, range.startFrame, range.endFrame);
+        const result = advancePlayback(accRef.current, dt, opts.fps, range, region);
+        accRef.current = result.frame;
+        lastEmittedRef.current = result.frame;
+        opts.onAdvance(result.frame);
+        if (result.ended) {
+            opts.onEnd();
+            return true;
+        }
+        return false;
+    });
+    useEffect(() => {
+        if (!opts.playing || typeof window === 'undefined')
+            return;
+        accRef.current = opts.frame;
+        lastEmittedRef.current = opts.frame;
+        let raf = 0;
+        let last = performance.now();
+        const loop = (now) => {
+            const dt = (now - last) / 1000;
+            last = now;
+            const ended = tick(dt);
+            if (!ended)
+                raf = requestAnimationFrame(loop);
+        };
+        raf = requestAnimationFrame(loop);
+        return () => {
+            cancelAnimationFrame(raf);
+        };
+        // Only `playing` drives the rAF lifecycle. `opts.frame` is read solely to
+        // seed the accumulator at playback start; including it would restart the
+        // loop on every emitted frame, so it is intentionally excluded.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [opts.playing]);
+}
+
+export { advancePlayback, useTimelinePlayback };
+//# sourceMappingURL=useTimelinePlayback.js.map

package/dist/esm/components/editor/Timeline/useTimelinePlayback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimelinePlayback.js","sources":["src/components/editor/Timeline/useTimelinePlayback.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useEffectEvent, useRef } from 'react';\n\nimport { resolveLoop } from './timelineCoords';\n\nimport type { TimelineLoop } from './Timeline.types';\n\nexport interface PlaybackRange {\n  startFrame: number;\n  endFrame: number;\n}\n\nexport interface AdvanceResult {\n  frame: number;\n  /** True when a non-looping playback has reached the end. */\n  ended: boolean;\n}\n\n/**\n * Advance a playhead by `dtSeconds` of wall-clock time at `fps`. Forward only.\n * With a `loop` region the playhead wraps within it; without one it stops at\n * `range.endFrame`. Pure — the rAF hook below drives it.\n */\nexport function advancePlayback(\n  current: number,\n  dtSeconds: number,\n  fps: number,\n  range: PlaybackRange,\n  loop: PlaybackRange | null\n): AdvanceResult {\n  const next = current + Math.max(0, dtSeconds) * Math.max(0, fps);\n  if (loop) {\n    if (next < loop.endFrame) return { frame: next, ended: false };\n    const span = Math.max(1e-6, loop.endFrame - loop.startFrame);\n    return {\n      frame: loop.startFrame + ((next - loop.startFrame) % span),\n      ended: false,\n    };\n  }\n  if (next >= range.endFrame) return { frame: range.endFrame, ended: true };\n  return { frame: next, ended: false };\n}\n\ninterface UseTimelinePlaybackOptions {\n  playing: boolean;\n  frame: number;\n  fps: number;\n  startFrame: number;\n  endFrame: number;\n  loop: TimelineLoop | undefined;\n  /** Push the advanced (float) frame — the component clamps + fires onFrameChange. */\n  onAdvance: (frame: number) => void;\n  /** Called once when non-looping playback reaches the end. */\n  onEnd: () => void;\n}\n\n/**\n * Drives the playhead while `playing` is true: a rAF loop advancing the frame\n * in real time at `fps`. Keeps its own float accumulator (independent of the\n * snapped/committed frame) and resyncs if the frame is changed externally\n * (e.g. the user scrubs mid-playback).\n */\nexport function useTimelinePlayback(opts: UseTimelinePlaybackOptions): void {\n  const accRef = useRef(opts.frame);\n  const lastEmittedRef = useRef(opts.frame);\n\n  // Canonical `useEffectEvent` use case: `tick` is called *only* from inside\n  // the rAF loop below (never attached to JSX or passed out), so it may read\n  // the latest props/state without re-arming the loop. This is the React\n  // \"timer with latest values\" pattern — keep it here; do not convert it to a\n  // handler that escapes the effect.\n  const tick = useEffectEvent((dt: number): boolean => {\n    // External scrub during playback → resync the accumulator.\n    if (opts.frame !== lastEmittedRef.current) {\n      accRef.current = opts.frame;\n    }\n    const range: PlaybackRange = {\n      startFrame: opts.startFrame,\n      endFrame: opts.endFrame,\n    };\n    const region = resolveLoop(opts.loop, range.startFrame, range.endFrame);\n    const result = advancePlayback(accRef.current, dt, opts.fps, range, region);\n    accRef.current = result.frame;\n    lastEmittedRef.current = result.frame;\n    opts.onAdvance(result.frame);\n    if (result.ended) {\n      opts.onEnd();\n      return true;\n    }\n    return false;\n  });\n\n  useEffect(() => {\n    if (!opts.playing || typeof window === 'undefined') return;\n    accRef.current = opts.frame;\n    lastEmittedRef.current = opts.frame;\n    let raf = 0;\n    let last = performance.now();\n    const loop = (now: number): void => {\n      const dt = (now - last) / 1000;\n      last = now;\n      const ended = tick(dt);\n      if (!ended) raf = requestAnimationFrame(loop);\n    };\n    raf = requestAnimationFrame(loop);\n    return () => {\n      cancelAnimationFrame(raf);\n    };\n    // Only `playing` drives the rAF lifecycle. `opts.frame` is read solely to\n    // seed the accumulator at playback start; including it would restart the\n    // loop on every emitted frame, so it is intentionally excluded.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [opts.playing]);\n}\n"],"names":[],"mappings":";;;;AAmBA;;;;AAIG;AACG;;;AASF;;AACA;;AAEE;AACA;;;AAGJ;;;AAEF;AAeA;;;;;AAKG;AACG;;;;;;;;AASJ;;;AAGI;;AAEF;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;AAEE;;AAEF;AACF;;;;AAIE;AACA;;AAEA;AACA;;;AAGE;AACA;AAAY;AACd;AACA;AACA;;AAEA;;;;;AAKF;AACF;;"}

package/dist/esm/components/editor/TransformControl/TransformControl.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
-import { cx } from '../../../utils/cx.js';
-import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
-import { VectorInput } from '../../controls/VectorInput/VectorInput.js';
 import { Select } from '../../controls/Select/Select.js';
+import { VectorInput } from '../../controls/VectorInput/VectorInput.js';
+import { PropertyRow } from '../PropertyInspector/PropertyRow.js';
 import { LockIcon } from '../../Icons/LockIcon.js';
 import { UnlockIcon } from '../../Icons/UnlockIcon.js';
-import { PropertyRow } from '../PropertyInspector/PropertyRow.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { cx } from '../../../utils/cx.js';
 import { rowInner, lockSpacerRecipe, rowVectorWrapper, lockButtonRecipe, transformRoot } from './TransformControl.css.js';
 
 // --- Defaults ---

package/dist/esm/components/editor/TransformControl/TransformControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransformControl.js","sources":["../../../../../../src/components/editor/TransformControl/TransformControl.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAyBA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AAEA;AACE;AACA;AACA;AACD;AAED;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACI;AAyBL;AACE;;;AAGA;AACD;AAED;AAEI;AACA;AACA;AACA;AACD;AAEH;AACE;AACA;AACA;AACA;AACD;AAED;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;AAOA;AAEI;AACF;AAIF;AAEI;AACF;;AAME;;;AAGE;;;AAEA;;AAEJ;AAIF;;AAEA;AAEA;;;;AAIE;;AAMF;AACE;AACF;AAEA;AACE;AACF;AAEA;AACE;AACF;;AAIA;AAiIF;AAEA;;"}
+{"version":3,"file":"TransformControl.js","sources":["src/components/editor/TransformControl/TransformControl.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useMemo } from 'react';\n\nimport { Select } from '@/components/controls/Select';\nimport { VectorInput } from '@/components/controls/VectorInput';\nimport { PropertyRow } from '@/components/editor/PropertyInspector/PropertyRow';\nimport { LockIcon } from '@/components/Icons/LockIcon';\nimport { UnlockIcon } from '@/components/Icons/UnlockIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cx } from '@/utils/cx';\n\nimport {\n  lockButtonRecipe,\n  lockSpacerRecipe,\n  rowInner,\n  rowVectorWrapper,\n  transformRoot,\n} from './TransformControl.css';\n\nimport type {\n  CoordinateSpace,\n  CoordinateSpaceOption,\n  TransformControlProps,\n  TransformValue,\n  Vec3,\n} from './TransformControl.types';\n\n// --- Defaults ---\n\nconst DEFAULT_TRANSFORM: TransformValue = {\n  position: { x: 0, y: 0, z: 0 },\n  rotation: { x: 0, y: 0, z: 0 },\n  scale: { x: 1, y: 1, z: 1 },\n};\n\nconst DEFAULT_COORDINATE_SPACE_OPTIONS: CoordinateSpaceOption[] = [\n  { value: 'local', label: 'Local' },\n  { value: 'world', label: 'World' },\n  { value: 'parent', label: 'Parent' },\n];\n\nconst DEFAULT_LABELS = {\n  position: 'Position',\n  rotation: 'Rotation',\n  scale: 'Scale',\n  coordinateSpace: 'Space',\n} as const;\n\nconst DEFAULT_PRECISION = { position: 3, rotation: 1, scale: 3 } as const;\nconst DEFAULT_STEP = { position: 0.1, rotation: 1, scale: 0.01 } as const;\nconst DEFAULT_UNITS = { position: 'm', rotation: '°', scale: '' } as const;\n\n// Narrow label column so the three axis inputs (with units) have room\n// to render without clipping inside typical 320–400 px property panels.\nconst ROW_SPLIT_RATIO: [number, number] = [25, 75];\n\n// --- Helpers ---\n\nconst vecToArray = (v: Vec3): number[] => [v.x, v.y, v.z];\n\nconst arrayToVec = (arr: number[]): Vec3 => ({\n  x: arr[0] ?? 0,\n  y: arr[1] ?? 0,\n  z: arr[2] ?? 0,\n});\n\n// --- Component ---\n\n/**\n * The canonical position / rotation / scale property control for 3D\n * editor interfaces. Composes `VectorInput` (per row) with `Select`\n * (coordinate space) and `PropertyRow` (layout) into one high-level\n * component, mirroring the transform widget found in Blender, Unity and\n * Unreal.\n *\n * Three independent atoms — `value`, `coordinateSpace`, `linkedScale` —\n * each support controlled and uncontrolled usage.\n *\n * Changing the coordinate-space dropdown does NOT transform the numeric\n * values. The component is purely a UI surface; the consumer's editor\n * logic is responsible for re-projecting values when the space changes.\n *\n * The component intentionally renders no `PropertySection` wrapper — slot\n * it inside an existing section in your panel.\n *\n * @example\n * ```tsx\n * <PropertySection title=\"Transform\">\n *   <TransformControl\n *     value={transform}\n *     onChange={setTransform}\n *     showReset\n *   />\n * </PropertySection>\n * ```\n */\nexport const TransformControl: React.FC<TransformControlProps> = ({\n  value: valueProp,\n  defaultValue,\n  onChange,\n  coordinateSpace: coordinateSpaceProp,\n  defaultCoordinateSpace,\n  onCoordinateSpaceChange,\n  coordinateSpaceOptions,\n  linkedScale: linkedScaleProp,\n  defaultLinkedScale,\n  onLinkedScaleChange,\n  show,\n  labels,\n  precision,\n  step,\n  units,\n  size = 'sm',\n  disabled = false,\n  showReset = false,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const [value, setValue] = useControlledState<TransformValue>({\n    value: valueProp,\n    defaultValue,\n    onChange,\n    fallback: DEFAULT_TRANSFORM,\n  });\n\n  const [coordinateSpace, setCoordinateSpace] =\n    useControlledState<CoordinateSpace>({\n      value: coordinateSpaceProp,\n      defaultValue: defaultCoordinateSpace,\n      onChange: onCoordinateSpaceChange,\n      fallback: 'local',\n    });\n\n  const [linkedScale, setLinkedScale] = useControlledState<boolean>({\n    value: linkedScaleProp,\n    defaultValue: defaultLinkedScale,\n    onChange: onLinkedScaleChange,\n    fallback: true,\n  });\n\n  const showPosition = show?.position !== false;\n  const showRotation = show?.rotation !== false;\n  const showScale = show?.scale !== false;\n  const showCoordinateSpace = showPosition || showRotation;\n\n  const resolvedLabels = {\n    position: labels?.position ?? DEFAULT_LABELS.position,\n    rotation: labels?.rotation ?? DEFAULT_LABELS.rotation,\n    scale: labels?.scale ?? DEFAULT_LABELS.scale,\n    coordinateSpace: labels?.coordinateSpace ?? DEFAULT_LABELS.coordinateSpace,\n  };\n\n  const resolvedPrecision = {\n    position: precision?.position ?? DEFAULT_PRECISION.position,\n    rotation: precision?.rotation ?? DEFAULT_PRECISION.rotation,\n    scale: precision?.scale ?? DEFAULT_PRECISION.scale,\n  };\n\n  const resolvedStep = {\n    position: step?.position ?? DEFAULT_STEP.position,\n    rotation: step?.rotation ?? DEFAULT_STEP.rotation,\n    scale: step?.scale ?? DEFAULT_STEP.scale,\n  };\n\n  const resolvedUnits = {\n    position: units?.position ?? DEFAULT_UNITS.position,\n    rotation: units?.rotation ?? DEFAULT_UNITS.rotation,\n    scale: units?.scale ?? DEFAULT_UNITS.scale,\n  };\n\n  const resolvedSpaceOptions = useMemo(\n    () => coordinateSpaceOptions ?? DEFAULT_COORDINATE_SPACE_OPTIONS,\n    [coordinateSpaceOptions]\n  );\n\n  // --- Per-row change handlers ---\n\n  const handlePositionChange = useCallback(\n    (next: number[]) => {\n      setValue(prev => ({ ...prev, position: arrayToVec(next) }));\n    },\n    [setValue]\n  );\n\n  const handleRotationChange = useCallback(\n    (next: number[]) => {\n      setValue(prev => ({ ...prev, rotation: arrayToVec(next) }));\n    },\n    [setValue]\n  );\n\n  const handleScaleChange = useCallback(\n    (next: number[], axisIndex: number) => {\n      const nextScale = arrayToVec(next);\n      if (linkedScale) {\n        const v = next[axisIndex] ?? 0;\n        setValue(prev => ({ ...prev, scale: { x: v, y: v, z: v } }));\n      } else {\n        setValue(prev => ({ ...prev, scale: nextScale }));\n      }\n    },\n    [linkedScale, setValue]\n  );\n\n  const handleLockToggle = useCallback(() => {\n    setLinkedScale(prev => !prev);\n  }, [setLinkedScale]);\n\n  const handleSpaceChange = useCallback(\n    (next: string | null) => {\n      if (next == null) return;\n      setCoordinateSpace(next);\n    },\n    [setCoordinateSpace]\n  );\n\n  // --- Reset handlers ---\n\n  const handlePositionReset = useCallback(() => {\n    setValue(prev => ({ ...prev, position: { x: 0, y: 0, z: 0 } }));\n  }, [setValue]);\n\n  const handleRotationReset = useCallback(() => {\n    setValue(prev => ({ ...prev, rotation: { x: 0, y: 0, z: 0 } }));\n  }, [setValue]);\n\n  const handleScaleReset = useCallback(() => {\n    setValue(prev => ({ ...prev, scale: { x: 1, y: 1, z: 1 } }));\n  }, [setValue]);\n\n  // --- Render ---\n\n  return (\n    <div\n      ref={ref}\n      className={cx(transformRoot, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {showCoordinateSpace && (\n        <PropertyRow\n          label={resolvedLabels.coordinateSpace}\n          size={size}\n          disabled={disabled}\n          splitRatio={ROW_SPLIT_RATIO}\n        >\n          <Select\n            value={coordinateSpace}\n            options={resolvedSpaceOptions}\n            onChange={handleSpaceChange}\n            size={size}\n            disabled={disabled}\n            aria-label={resolvedLabels.coordinateSpace}\n          />\n        </PropertyRow>\n      )}\n\n      {showPosition && (\n        <PropertyRow\n          label={resolvedLabels.position}\n          size={size}\n          disabled={disabled}\n          splitRatio={ROW_SPLIT_RATIO}\n          onReset={showReset ? handlePositionReset : undefined}\n        >\n          <div className={rowInner}>\n            <span aria-hidden=\"true\" className={lockSpacerRecipe({ size })} />\n            <div className={rowVectorWrapper}>\n              <VectorInput\n                value={vecToArray(value.position)}\n                onChange={handlePositionChange}\n                dimension={3}\n                labelPreset=\"xyz\"\n                colorPreset=\"spatial\"\n                precision={resolvedPrecision.position}\n                step={resolvedStep.position}\n                unit={resolvedUnits.position}\n                size={size}\n                disabled={disabled}\n                aria-label={resolvedLabels.position}\n              />\n            </div>\n          </div>\n        </PropertyRow>\n      )}\n\n      {showRotation && (\n        <PropertyRow\n          label={resolvedLabels.rotation}\n          size={size}\n          disabled={disabled}\n          splitRatio={ROW_SPLIT_RATIO}\n          onReset={showReset ? handleRotationReset : undefined}\n        >\n          <div className={rowInner}>\n            <span aria-hidden=\"true\" className={lockSpacerRecipe({ size })} />\n            <div className={rowVectorWrapper}>\n              <VectorInput\n                value={vecToArray(value.rotation)}\n                onChange={handleRotationChange}\n                dimension={3}\n                labelPreset=\"xyz\"\n                colorPreset=\"spatial\"\n                precision={resolvedPrecision.rotation}\n                step={resolvedStep.rotation}\n                unit={resolvedUnits.rotation}\n                size={size}\n                disabled={disabled}\n                aria-label={resolvedLabels.rotation}\n              />\n            </div>\n          </div>\n        </PropertyRow>\n      )}\n\n      {showScale && (\n        <PropertyRow\n          label={resolvedLabels.scale}\n          size={size}\n          disabled={disabled}\n          splitRatio={ROW_SPLIT_RATIO}\n          onReset={showReset ? handleScaleReset : undefined}\n        >\n          <div className={rowInner}>\n            <button\n              type=\"button\"\n              className={lockButtonRecipe({ active: linkedScale, size })}\n              onClick={handleLockToggle}\n              disabled={disabled}\n              aria-pressed={linkedScale}\n              aria-label={linkedScale ? 'Unlink scale axes' : 'Link scale axes'}\n              title={linkedScale ? 'Linked scale' : 'Unlinked scale'}\n              data-testid=\"transform-scale-lock\"\n            >\n              {linkedScale ? (\n                <LockIcon size={size} decorative />\n              ) : (\n                <UnlockIcon size={size} decorative />\n              )}\n            </button>\n            <div className={rowVectorWrapper}>\n              <VectorInput\n                value={vecToArray(value.scale)}\n                onChange={handleScaleChange}\n                dimension={3}\n                labelPreset=\"xyz\"\n                colorPreset=\"spatial\"\n                precision={resolvedPrecision.scale}\n                step={resolvedStep.scale}\n                unit={resolvedUnits.scale}\n                size={size}\n                disabled={disabled}\n                aria-label={resolvedLabels.scale}\n              />\n            </div>\n          </div>\n        </PropertyRow>\n      )}\n    </div>\n  );\n};\n\nTransformControl.displayName = 'TransformControl';\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;;AAGF;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AAEA;AACE;AACA;AACA;AACD;AAED;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACI;AAyBL;AACE;;;AAGA;AACD;AAED;AAEI;AACA;AACA;AACA;AACD;AAEH;AACE;AACA;AACA;AACA;AACD;AAED;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;AAOA;AAEI;AACF;AAIF;AAEI;AACF;;AAME;;;AAGE;;;AAEA;;AAEJ;AAIF;;AAEA;AAEA;;;;AAIE;;AAMF;AACE;AACF;AAEA;AACE;AACF;AAEA;AACE;AACF;;AAIA;AAiIF;AAEA;;"}

package/dist/esm/components/editor/ViewportGizmo/ViewportGizmo.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useMemo } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useRef, useMemo } from 'react';
 import { cx } from '../../../utils/cx.js';
-import { AXIS_COLORS, useGizmoRenderer } from './useGizmoRenderer.js';
 import { useGizmoInteraction } from './useGizmoInteraction.js';
+import { AXIS_COLORS, useGizmoRenderer } from './useGizmoRenderer.js';
 import { gizmoCanvasStyle, ariaLiveRegionStyle, gizmoDiameterVar, gizmoWrapperRecipe } from './ViewportGizmo.css.js';
 
 const DEFAULT_LABELS = { x: 'X', y: 'Y', z: 'Z' };
@@ -74,7 +74,6 @@ const ViewportGizmo = ({ orientation, upAxis = 'y-up', axisColorPreset = 'blende
         showOriginHandle,
         background,
         disabled,
-        isDragging: interaction.isDragging,
         hoveredRegion: interaction.hoveredRegion,
     });
     // ARIA
@@ -82,7 +81,12 @@ const ViewportGizmo = ({ orientation, upAxis = 'y-up', axisColorPreset = 'blende
     return (jsxs("div", { className: cx(gizmoWrapperRecipe({ background, disabled }), className), style: {
             ...style,
             ...assignInlineVars({ [gizmoDiameterVar]: `${diameter}px` }),
-        }, "data-testid": testId, id: id, ...rest, children: [jsx("canvas", { ref: canvasRef, className: gizmoCanvasStyle({ disabled }), role: "application", "aria-label": "Viewport orientation gizmo", "aria-roledescription": ariaDescription, tabIndex: disabled ? -1 : 0, onPointerDown: interaction.handlers.onPointerDown, onPointerMove: interaction.handlers.onPointerMove, onPointerUp: interaction.handlers.onPointerUp, onKeyDown: interaction.handlers.onKeyDown }), jsx("div", { className: ariaLiveRegionStyle, "aria-live": "polite", role: "status", children: ariaDescription })] }));
+        }, "data-testid": testId, id: id, ...rest, children: [jsx("canvas", { ref: canvasRef, className: gizmoCanvasStyle({ disabled }), 
+                // The canvas is a self-contained interactive widget driven entirely by
+                // custom pointer/keyboard handlers, so it is exposed as an ARIA
+                // application rather than its implicit canvas role.
+                // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+                role: "application", "aria-label": "Viewport orientation gizmo", "aria-roledescription": ariaDescription, tabIndex: disabled ? -1 : 0, onPointerDown: interaction.handlers.onPointerDown, onPointerMove: interaction.handlers.onPointerMove, onPointerUp: interaction.handlers.onPointerUp, onKeyDown: interaction.handlers.onKeyDown }), jsx("div", { className: ariaLiveRegionStyle, "aria-live": "polite", role: "status", children: ariaDescription })] }));
 };
 ViewportGizmo.displayName = 'ViewportGizmo';
 

package/dist/esm/components/editor/ViewportGizmo/ViewportGizmo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportGizmo.js","sources":["../../../../../../src/components/editor/ViewportGizmo/ViewportGizmo.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAeA;AACA;AAEO;AA2BL;;AAGA;AACE;;;;;;;AAOA;AACF;AAEA;;;;;;;;AAQE;AACF;AAEA;;;;;;;;AAQE;AACF;;;;;;;;;;;;;;;;AAiBC;;AAGD;;;;;;;;;;;;;;;;;AAiBC;;;AAKD;AAIM;;AAED;AAsBP;AAEA;;"}
+{"version":3,"file":"ViewportGizmo.js","sources":["src/components/editor/ViewportGizmo/ViewportGizmo.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useRef, useMemo } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { useGizmoInteraction } from './useGizmoInteraction';\nimport { useGizmoRenderer, AXIS_COLORS } from './useGizmoRenderer';\nimport {\n  gizmoWrapperRecipe,\n  gizmoCanvasStyle,\n  gizmoDiameterVar,\n  ariaLiveRegionStyle,\n} from './ViewportGizmo.css';\n\nimport type { ViewportGizmoProps } from './ViewportGizmo.types';\n\nconst DEFAULT_LABELS: Record<string, string> = { x: 'X', y: 'Y', z: 'Z' };\nconst DEFAULT_VISIBLE: Record<string, boolean> = { x: true, y: true, z: true };\n\nexport const ViewportGizmo: React.FC<ViewportGizmoProps> = ({\n  orientation,\n  upAxis = 'y-up',\n  axisColorPreset = 'blender',\n  axisConfig,\n  showLabels = true,\n  showNegativeAxes = true,\n  showOrbitRing = true,\n  showOriginHandle = true,\n  background = 'subtle',\n  interactionMode = 'full',\n  orbitSpeed = 1,\n  constrainPitch = true,\n  onOrbit,\n  onOrbitEnd,\n  onSnapToView,\n  onAxisClick,\n  onOriginClick,\n  diameter = 120,\n  size = 'md',\n  disabled = false,\n  className,\n  testId,\n  id,\n  style,\n  ...rest\n}) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  // Resolve axis colors from preset or custom config\n  const axisColors = useMemo((): Record<string, string> => {\n    if (axisColorPreset === 'custom' && axisConfig) {\n      return {\n        x: axisConfig[0].color ?? '#E63946',\n        y: axisConfig[1].color ?? '#6AA84F',\n        z: axisConfig[2].color ?? '#4A86C8',\n      };\n    }\n    return { ...AXIS_COLORS };\n  }, [axisColorPreset, axisConfig]);\n\n  const axisLabels = useMemo((): Record<string, string> => {\n    if (axisConfig) {\n      return {\n        x: axisConfig[0].label ?? 'X',\n        y: axisConfig[1].label ?? 'Y',\n        z: axisConfig[2].label ?? 'Z',\n      };\n    }\n    return DEFAULT_LABELS;\n  }, [axisConfig]);\n\n  const axisVisible = useMemo((): Record<string, boolean> => {\n    if (axisConfig) {\n      return {\n        x: axisConfig[0].visible ?? true,\n        y: axisConfig[1].visible ?? true,\n        z: axisConfig[2].visible ?? true,\n      };\n    }\n    return DEFAULT_VISIBLE;\n  }, [axisConfig]);\n\n  // Interaction\n  const interaction = useGizmoInteraction({\n    orientation,\n    canvasRef,\n    diameter,\n    upAxis,\n    interactionMode,\n    orbitSpeed,\n    constrainPitch,\n    disabled,\n    onOrbit,\n    onOrbitEnd,\n    onSnapToView,\n    onAxisClick,\n    onOriginClick,\n  });\n\n  // Renderer\n  useGizmoRenderer({\n    canvasRef,\n    orientation,\n    diameter,\n    upAxis,\n    size,\n    axisColors,\n    axisLabels,\n    axisVisible,\n    showLabels,\n    showNegativeAxes,\n    showOrbitRing,\n    showOriginHandle,\n    background,\n    disabled,\n    isDragging: interaction.isDragging,\n    hoveredRegion: interaction.hoveredRegion,\n  });\n\n  // ARIA\n  const ariaDescription = `3D orientation gizmo, yaw: ${Math.round(orientation.yaw)}deg, pitch: ${Math.round(orientation.pitch)}deg`;\n\n  return (\n    <div\n      className={cx(gizmoWrapperRecipe({ background, disabled }), className)}\n      style={{\n        ...style,\n        ...assignInlineVars({ [gizmoDiameterVar]: `${diameter}px` }),\n      }}\n      data-testid={testId}\n      id={id}\n      {...rest}\n    >\n      <canvas\n        ref={canvasRef}\n        className={gizmoCanvasStyle({ disabled })}\n        // The canvas is a self-contained interactive widget driven entirely by\n        // custom pointer/keyboard handlers, so it is exposed as an ARIA\n        // application rather than its implicit canvas role.\n        // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role\n        role=\"application\"\n        aria-label=\"Viewport orientation gizmo\"\n        aria-roledescription={ariaDescription}\n        tabIndex={disabled ? -1 : 0}\n        onPointerDown={interaction.handlers.onPointerDown}\n        onPointerMove={interaction.handlers.onPointerMove}\n        onPointerUp={interaction.handlers.onPointerUp}\n        onKeyDown={interaction.handlers.onKeyDown}\n      />\n      <div className={ariaLiveRegionStyle} aria-live=\"polite\" role=\"status\">\n        {ariaDescription}\n      </div>\n    </div>\n  );\n};\n\nViewportGizmo.displayName = 'ViewportGizmo';\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACA;AAEO;AA2BL;;AAGA;AACE;;;;;;;AAOA;AACF;AAEA;;;;;;;;AAQE;AACF;AAEA;;;;;;;;AAQE;AACF;;;;;;;;;;;;;;;;AAiBC;;AAGD;;;;;;;;;;;;;;;;AAiBC;;;AAKD;AAIM;;;;;;;AAcA;AAcR;AAEA;;"}

package/dist/esm/components/editor/ViewportGizmo/gizmoMath.js

@@ -63,11 +63,15 @@ function projectToCanvas(point, orientation, center, scale) {
  * Get all 6 axis arm endpoints projected to 2D, sorted by depth (furthest first).
  */
 function projectAxes(orientation, center, armLength, upAxis) {
+    // The drawn direction of each labelled axis depends on the up-axis
+    // convention. For z-up (Blender, Unreal, CAD) the world is rotated -90°
+    // about X relative to y-up, so the Z arm points up and the Y arm points
+    // into the scene. (x, y, z) -> (x, z, -y).
     const axes = upAxis === 'z-up'
         ? [
             { x: 1, y: 0, z: 0 }, // X
-            { x: 0, y: 1, z: 0 }, // Y
-            { x: 0, y: 0, z: 1 }, // Z (up)
+            { x: 0, y: 0, z: -1 }, // Y (into the scene)
+            { x: 0, y: 1, z: 0 }, // Z (up)
         ]
         : [
             { x: 1, y: 0, z: 0 }, // X

package/dist/esm/components/editor/ViewportGizmo/gizmoMath.js.map

@@ -1 +1 @@
-{"version":3,"file":"gizmoMath.js","sources":["../../../../../../src/components/editor/ViewportGizmo/gizmoMath.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"gizmoMath.js","sources":["src/components/editor/ViewportGizmo/gizmoMath.ts"],"sourcesContent":["import type {\n  GizmoOrientation,\n  GizmoPresetView,\n  GizmoUpAxis,\n  GizmoHitRegion,\n} from './ViewportGizmo.types';\n\n// ─── Vector Type ───\n\n/** 3D vector */\nexport interface Vec3 {\n  x: number;\n  y: number;\n  z: number;\n}\n\n// ─── Constants ───\n\nconst DEG2RAD = Math.PI / 180;\nconst RAD2DEG = 180 / Math.PI;\n\n// ─── Euler → Rotation Matrix ───\n\n/**\n * Build a 3×3 rotation matrix from Euler angles (YXZ intrinsic order).\n * Matches Three.js default Euler order.\n *\n * @param yaw  - Y-axis rotation in degrees\n * @param pitch - X-axis rotation in degrees\n * @param roll  - Z-axis rotation in degrees\n * @returns [right, up, forward] basis vectors (columns of rotation matrix)\n */\nexport function eulerToRotationMatrix(\n  yaw: number,\n  pitch: number,\n  roll: number = 0\n): [Vec3, Vec3, Vec3] {\n  const cy = Math.cos(yaw * DEG2RAD);\n  const sy = Math.sin(yaw * DEG2RAD);\n  const cp = Math.cos(pitch * DEG2RAD);\n  const sp = Math.sin(pitch * DEG2RAD);\n  const cr = Math.cos(roll * DEG2RAD);\n  const sr = Math.sin(roll * DEG2RAD);\n\n  // YXZ rotation: R = Ry * Rx * Rz\n  // Column 0 (right vector)\n  const r00 = cy * cr + sy * sp * sr;\n  const r10 = cp * sr;\n  const r20 = -sy * cr + cy * sp * sr;\n\n  // Column 1 (up vector)\n  const r01 = -cy * sr + sy * sp * cr;\n  const r11 = cp * cr;\n  const r21 = sy * sr + cy * sp * cr;\n\n  // Column 2 (forward vector)\n  const r02 = sy * cp;\n  const r12 = -sp;\n  const r22 = cy * cp;\n\n  return [\n    { x: r00, y: r10, z: r20 }, // right\n    { x: r01, y: r11, z: r21 }, // up\n    { x: r02, y: r12, z: r22 }, // forward\n  ];\n}\n\n// ─── 3D → 2D Projection ───\n\n/**\n * Project a 3D point to 2D canvas coordinates using orthographic projection.\n *\n * @param point   - 3D point to project\n * @param orientation - Camera orientation\n * @param center  - Canvas center in pixels\n * @param scale   - Pixels per unit\n * @returns Projected position { x, y, depth }\n */\nexport function projectToCanvas(\n  point: Vec3,\n  orientation: GizmoOrientation,\n  center: { x: number; y: number },\n  scale: number\n): { x: number; y: number; depth: number } {\n  const [right, up, forward] = eulerToRotationMatrix(\n    orientation.yaw,\n    orientation.pitch,\n    orientation.roll ?? 0\n  );\n\n  // Project point onto camera basis (view space)\n  const viewX = point.x * right.x + point.y * right.y + point.z * right.z;\n  const viewY = point.x * up.x + point.y * up.y + point.z * up.z;\n  const viewZ = point.x * forward.x + point.y * forward.y + point.z * forward.z;\n\n  return {\n    x: center.x + viewX * scale,\n    y: center.y - viewY * scale, // canvas Y is flipped\n    depth: viewZ,\n  };\n}\n\n/** Projected axis arm data */\nexport interface ProjectedArm {\n  axis: 'x' | 'y' | 'z';\n  positive: boolean;\n  screenX: number;\n  screenY: number;\n  depth: number;\n}\n\n/**\n * Get all 6 axis arm endpoints projected to 2D, sorted by depth (furthest first).\n */\nexport function projectAxes(\n  orientation: GizmoOrientation,\n  center: { x: number; y: number },\n  armLength: number,\n  upAxis: GizmoUpAxis\n): ProjectedArm[] {\n  // The drawn direction of each labelled axis depends on the up-axis\n  // convention. For z-up (Blender, Unreal, CAD) the world is rotated -90°\n  // about X relative to y-up, so the Z arm points up and the Y arm points\n  // into the scene. (x, y, z) -> (x, z, -y).\n  const axes: Vec3[] =\n    upAxis === 'z-up'\n      ? [\n          { x: 1, y: 0, z: 0 }, // X\n          { x: 0, y: 0, z: -1 }, // Y (into the scene)\n          { x: 0, y: 1, z: 0 }, // Z (up)\n        ]\n      : [\n          { x: 1, y: 0, z: 0 }, // X\n          { x: 0, y: 1, z: 0 }, // Y (up)\n          { x: 0, y: 0, z: 1 }, // Z\n        ];\n\n  const axisNames: Array<'x' | 'y' | 'z'> = ['x', 'y', 'z'];\n  const arms: ProjectedArm[] = [];\n\n  for (let i = 0; i < 3; i++) {\n    const ax = axes[i];\n    const name = axisNames[i];\n    if (!ax || !name) continue;\n\n    // Positive arm\n    const pos = projectToCanvas(\n      { x: ax.x, y: ax.y, z: ax.z },\n      orientation,\n      center,\n      armLength\n    );\n    arms.push({\n      axis: name,\n      positive: true,\n      screenX: pos.x,\n      screenY: pos.y,\n      depth: pos.depth,\n    });\n\n    // Negative arm\n    const neg = projectToCanvas(\n      { x: -ax.x, y: -ax.y, z: -ax.z },\n      orientation,\n      center,\n      armLength * 0.4\n    );\n    arms.push({\n      axis: name,\n      positive: false,\n      screenX: neg.x,\n      screenY: neg.y,\n      depth: neg.depth,\n    });\n  }\n\n  // Sort by depth — furthest first (painter's algorithm)\n  arms.sort((a, b) => a.depth - b.depth);\n\n  return arms;\n}\n\n// ─── Hit Testing ───\n\nfunction distPointToSegment(\n  px: number,\n  py: number,\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number\n): number {\n  const dx = x2 - x1;\n  const dy = y2 - y1;\n  const lenSq = dx * dx + dy * dy;\n  if (lenSq === 0) return Math.sqrt((px - x1) ** 2 + (py - y1) ** 2);\n\n  let t = ((px - x1) * dx + (py - y1) * dy) / lenSq;\n  t = Math.max(0, Math.min(1, t));\n\n  const projX = x1 + t * dx;\n  const projY = y1 + t * dy;\n  return Math.sqrt((px - projX) ** 2 + (py - projY) ** 2);\n}\n\n/**\n * Hit test a screen position against the gizmo geometry.\n */\nexport function gizmoHitTest(\n  px: number,\n  py: number,\n  orientation: GizmoOrientation,\n  center: { x: number; y: number },\n  armLength: number,\n  upAxis: GizmoUpAxis,\n  tolerancePx: number = 12,\n  originRadius: number = 6\n): GizmoHitRegion {\n  // Test origin handle first\n  const originDist = Math.sqrt((px - center.x) ** 2 + (py - center.y) ** 2);\n  if (originDist <= originRadius + tolerancePx * 0.5) {\n    return { type: 'origin', distance: originDist };\n  }\n\n  const arms = projectAxes(orientation, center, armLength, upAxis);\n  let closest: GizmoHitRegion = { type: 'none', distance: Infinity };\n\n  for (const arm of arms) {\n    // Check tip first (label / axis tip)\n    const tipDist = Math.sqrt(\n      (px - arm.screenX) ** 2 + (py - arm.screenY) ** 2\n    );\n\n    if (tipDist <= tolerancePx) {\n      const hitType = arm.positive ? 'axis-positive' : 'axis-negative';\n      if (tipDist < closest.distance) {\n        closest = { type: hitType, axis: arm.axis, distance: tipDist };\n      }\n    }\n\n    // Check arm line segment\n    const segDist = distPointToSegment(\n      px,\n      py,\n      center.x,\n      center.y,\n      arm.screenX,\n      arm.screenY\n    );\n    if (segDist <= tolerancePx * 0.7 && segDist < closest.distance) {\n      const hitType = arm.positive ? 'axis-positive' : 'axis-negative';\n      closest = { type: hitType, axis: arm.axis, distance: segDist };\n    }\n  }\n\n  // Check orbit ring\n  const ringDist = Math.abs(originDist - armLength * 1.1);\n  if (ringDist <= tolerancePx * 0.5 && ringDist < closest.distance) {\n    return { type: 'ring', distance: ringDist };\n  }\n\n  return closest;\n}\n\n// ─── Preset Views ───\n\n/**\n * Convert a preset view name to Euler angles.\n */\nexport function presetViewToOrientation(\n  view: GizmoPresetView,\n  upAxis: GizmoUpAxis\n): GizmoOrientation {\n  if (upAxis === 'y-up') {\n    switch (view) {\n      case 'front':\n        return { yaw: 0, pitch: 0 };\n      case 'back':\n        return { yaw: 180, pitch: 0 };\n      case 'right':\n        return { yaw: 90, pitch: 0 };\n      case 'left':\n        return { yaw: -90, pitch: 0 };\n      case 'top':\n        return { yaw: 0, pitch: 90 };\n      case 'bottom':\n        return { yaw: 0, pitch: -90 };\n    }\n  }\n\n  // Z-up\n  switch (view) {\n    case 'front':\n      return { yaw: 0, pitch: 0 };\n    case 'back':\n      return { yaw: 180, pitch: 0 };\n    case 'right':\n      return { yaw: 90, pitch: 0 };\n    case 'left':\n      return { yaw: -90, pitch: 0 };\n    case 'top':\n      return { yaw: 0, pitch: 90 };\n    case 'bottom':\n      return { yaw: 0, pitch: -90 };\n  }\n}\n\n// ─── Quaternion ↔ Euler ───\n\n/**\n * Convert quaternion [x, y, z, w] to Euler representation (YXZ order, degrees).\n * Utility for Three.js integration where `camera.quaternion` is available.\n */\nexport function quaternionToEuler(\n  qx: number,\n  qy: number,\n  qz: number,\n  qw: number\n): GizmoOrientation {\n  // YXZ intrinsic rotation decomposition\n  // Matrix from quaternion\n  const xx = qx * qx;\n  const yy = qy * qy;\n  const zz = qz * qz;\n  const xy = qx * qy;\n  const xz = qx * qz;\n  const yz = qy * qz;\n  const wx = qw * qx;\n  const wy = qw * qy;\n  const wz = qw * qz;\n\n  const m11 = 1 - 2 * (yy + zz);\n  const m13 = 2 * (xz + wy);\n  const m21 = 2 * (xy + wz);\n  const m22 = 1 - 2 * (xx + zz);\n  const m23 = 2 * (yz - wx);\n  const m31 = 2 * (xz - wy);\n  const m33 = 1 - 2 * (xx + yy);\n\n  // YXZ order extraction\n  const pitch = Math.asin(-Math.max(-1, Math.min(1, m23)));\n  let yaw: number;\n  let roll: number;\n\n  if (Math.abs(m23) < 0.9999) {\n    yaw = Math.atan2(m13, m33);\n    roll = Math.atan2(m21, m22);\n  } else {\n    yaw = Math.atan2(-m31, m11);\n    roll = 0;\n  }\n\n  return {\n    yaw: yaw * RAD2DEG,\n    pitch: pitch * RAD2DEG,\n    roll: roll * RAD2DEG,\n  };\n}\n\n/**\n * Map an axis tip click to the corresponding preset view.\n */\nexport function axisToPresetView(\n  axis: 'x' | 'y' | 'z',\n  positive: boolean,\n  upAxis: GizmoUpAxis\n): GizmoPresetView | null {\n  if (upAxis === 'y-up') {\n    switch (axis) {\n      case 'x':\n        return positive ? 'right' : 'left';\n      case 'y':\n        return positive ? 'top' : 'bottom';\n      case 'z':\n        return positive ? 'front' : 'back';\n    }\n  }\n\n  // Z-up\n  switch (axis) {\n    case 'x':\n      return positive ? 'right' : 'left';\n    case 'y':\n      return positive ? 'front' : 'back';\n    case 'z':\n      return positive ? 'top' : 'bottom';\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/editor/ViewportGizmo/useGizmoInteraction.js

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useMemo, useCallback } from 'react';
 import { clamp } from '../../../utils/mathUtils.js';
 import { gizmoHitTest, axisToPresetView } from './gizmoMath.js';
 
@@ -9,15 +9,17 @@ const ORBIT_FINE_STEP = 5;
 function useGizmoInteraction(options) {
     const { orientation, canvasRef, diameter, upAxis, interactionMode, orbitSpeed, constrainPitch, disabled, onOrbit, onOrbitEnd, onSnapToView, onAxisClick, onOriginClick, } = options;
     const [hoveredRegion, setHoveredRegion] = useState(NONE_HIT);
+    // Ref drives synchronous reads inside the pointer handlers; the state mirror
+    // is the value exposed for rendering (kept in sync on drag start/end).
     const isDraggingRef = useRef(false);
-    const [, setForceUpdate] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
     const lastPointerRef = useRef({ x: 0, y: 0 });
     const startPointerRef = useRef({ x: 0, y: 0 });
     const hasDraggedRef = useRef(false);
     const allowSnap = interactionMode === 'full' || interactionMode === 'snap-only';
     const allowOrbit = interactionMode === 'full' || interactionMode === 'orbit-only';
     const armLength = (diameter / 2) * 0.65;
-    const center = { x: diameter / 2, y: diameter / 2 };
+    const center = useMemo(() => ({ x: diameter / 2, y: diameter / 2 }), [diameter]);
     const getPointerPos = useCallback((e) => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -36,7 +38,7 @@ function useGizmoInteraction(options) {
         hasDraggedRef.current = false;
         lastPointerRef.current = { x: e.clientX, y: e.clientY };
         startPointerRef.current = { x: e.clientX, y: e.clientY };
-        setForceUpdate(n => n + 1);
+        setIsDragging(true);
         canvas.setPointerCapture(e.pointerId);
         // Store hit for click detection on pointer up
         const hit = gizmoHitTest(px, py, orientation, center, armLength, upAxis);
@@ -115,7 +117,7 @@ function useGizmoInteraction(options) {
             return;
         if (isDraggingRef.current) {
             isDraggingRef.current = false;
-            setForceUpdate(n => n + 1);
+            setIsDragging(false);
             canvas.releasePointerCapture(e.pointerId);
             if (hasDraggedRef.current) {
                 // Finished orbit drag
@@ -235,7 +237,7 @@ function useGizmoInteraction(options) {
         onOriginClick,
     ]);
     return {
-        isDragging: isDraggingRef.current,
+        isDragging,
         hoveredRegion,
         handlers: {
             onPointerDown,

package/dist/esm/components/editor/ViewportGizmo/useGizmoInteraction.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGizmoInteraction.js","sources":["../../../../../../src/components/editor/ViewportGizmo/useGizmoInteraction.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAyCA;AAEA;AACA;AAEM;AAGJ;;AAiBA;;AAEA;AACA;AACA;;;;AAQA;AAEA;AAEI;AACA;;AACA;;AAEF;AAIF;;;AAII;AACA;;;AAIA;AACA;AACA;AACA;;AAEA;;AAGA;;AAEF;;;;;;;;;AAUC;AAGH;AAEI;AACA;;AAEA;;;;;;AAOE;AACE;;AAGF;AACE;;;AAIE;AACA;;;;AAMJ;;;;;;;AAOF;;;;AAKE;;AACK;AACL;;;AAEA;;;AAEA;;AAEJ;;;;;;;;;;;;;AAcC;AAGH;AAEI;AACA;;AAEA;AACE;;AAEA;AAEA;;AAEE;;;;;AAIA;AASA;;;;;AAIE;AACA;AAAU;;;;AAGV;AACA;AAAU;;;;AAIlB;;;;;;;;;;;;AAaC;AAGH;AAEI;;AAEA;;;AAIA;AACE;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;;;;AAKQ;;;;;;AAMR;;AAEI;;;AAGI;;;;;;AAMR;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;AACA;;;;;;;;AASJ;;;;;;;;;;AAWC;;;;AAMD;;;;;AAKC;;AAEL;;"}
+{"version":3,"file":"useGizmoInteraction.js","sources":["src/components/editor/ViewportGizmo/useGizmoInteraction.ts"],"sourcesContent":["'use client';\n\nimport { useState, useCallback, useMemo, useRef } from 'react';\n\nimport { clamp } from '@/utils/mathUtils';\n\nimport { gizmoHitTest, axisToPresetView } from './gizmoMath';\n\nimport type {\n  GizmoOrientation,\n  GizmoUpAxis,\n  GizmoPresetView,\n  GizmoHitRegion,\n  OrbitDelta,\n} from './ViewportGizmo.types';\nimport type React from 'react';\n\ninterface UseGizmoInteractionOptions {\n  orientation: GizmoOrientation;\n  canvasRef: React.RefObject<HTMLCanvasElement | null>;\n  diameter: number;\n  upAxis: GizmoUpAxis;\n  interactionMode: 'full' | 'snap-only' | 'orbit-only' | 'display-only';\n  orbitSpeed: number;\n  constrainPitch: boolean;\n  disabled: boolean;\n  onOrbit?: (delta: OrbitDelta) => void;\n  onOrbitEnd?: (finalOrientation: GizmoOrientation) => void;\n  onSnapToView?: (view: GizmoPresetView) => void;\n  onAxisClick?: (axis: 'x' | 'y' | 'z', positive: boolean) => void;\n  onOriginClick?: () => void;\n}\n\ninterface UseGizmoInteractionReturn {\n  isDragging: boolean;\n  hoveredRegion: GizmoHitRegion;\n  handlers: {\n    onPointerDown: (e: React.PointerEvent) => void;\n    onPointerMove: (e: React.PointerEvent) => void;\n    onPointerUp: (e: React.PointerEvent) => void;\n    onKeyDown: (e: React.KeyboardEvent) => void;\n  };\n}\n\nconst NONE_HIT: GizmoHitRegion = { type: 'none', distance: Infinity };\n\nconst ORBIT_KEY_STEP = 15;\nconst ORBIT_FINE_STEP = 5;\n\nexport function useGizmoInteraction(\n  options: UseGizmoInteractionOptions\n): UseGizmoInteractionReturn {\n  const {\n    orientation,\n    canvasRef,\n    diameter,\n    upAxis,\n    interactionMode,\n    orbitSpeed,\n    constrainPitch,\n    disabled,\n    onOrbit,\n    onOrbitEnd,\n    onSnapToView,\n    onAxisClick,\n    onOriginClick,\n  } = options;\n\n  const [hoveredRegion, setHoveredRegion] = useState<GizmoHitRegion>(NONE_HIT);\n  // Ref drives synchronous reads inside the pointer handlers; the state mirror\n  // is the value exposed for rendering (kept in sync on drag start/end).\n  const isDraggingRef = useRef(false);\n  const [isDragging, setIsDragging] = useState(false);\n  const lastPointerRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n  const startPointerRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n  const hasDraggedRef = useRef(false);\n\n  const allowSnap =\n    interactionMode === 'full' || interactionMode === 'snap-only';\n  const allowOrbit =\n    interactionMode === 'full' || interactionMode === 'orbit-only';\n\n  const armLength = (diameter / 2) * 0.65;\n  const center = useMemo(\n    () => ({ x: diameter / 2, y: diameter / 2 }),\n    [diameter]\n  );\n\n  const getPointerPos = useCallback(\n    (e: React.PointerEvent) => {\n      const canvas = canvasRef.current;\n      if (!canvas) return { px: 0, py: 0 };\n      const rect = canvas.getBoundingClientRect();\n      return { px: e.clientX - rect.left, py: e.clientY - rect.top };\n    },\n    [canvasRef]\n  );\n\n  const onPointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      if (disabled || interactionMode === 'display-only' || e.button !== 0)\n        return;\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n\n      const { px, py } = getPointerPos(e);\n\n      isDraggingRef.current = true;\n      hasDraggedRef.current = false;\n      lastPointerRef.current = { x: e.clientX, y: e.clientY };\n      startPointerRef.current = { x: e.clientX, y: e.clientY };\n      setIsDragging(true);\n      canvas.setPointerCapture(e.pointerId);\n\n      // Store hit for click detection on pointer up\n      const hit = gizmoHitTest(px, py, orientation, center, armLength, upAxis);\n      setHoveredRegion(hit);\n    },\n    [\n      disabled,\n      interactionMode,\n      canvasRef,\n      getPointerPos,\n      orientation,\n      center,\n      armLength,\n      upAxis,\n    ]\n  );\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n\n      if (isDraggingRef.current && allowOrbit) {\n        const dx = e.clientX - lastPointerRef.current.x;\n        const dy = e.clientY - lastPointerRef.current.y;\n\n        // Only count as drag if moved > 3px from start\n        const totalDx = e.clientX - startPointerRef.current.x;\n        const totalDy = e.clientY - startPointerRef.current.y;\n        if (Math.sqrt(totalDx ** 2 + totalDy ** 2) > 3) {\n          hasDraggedRef.current = true;\n        }\n\n        if (hasDraggedRef.current) {\n          const deltaYaw = dx * orbitSpeed * 0.5;\n          let deltaPitch = -dy * orbitSpeed * 0.5;\n\n          if (constrainPitch) {\n            const newPitch = orientation.pitch + deltaPitch;\n            deltaPitch = clamp(newPitch, -90, 90) - orientation.pitch;\n          }\n\n          onOrbit?.({ deltaYaw, deltaPitch });\n        }\n\n        lastPointerRef.current = { x: e.clientX, y: e.clientY };\n        return;\n      }\n\n      // Hover detection\n      if (interactionMode === 'display-only') return;\n      const { px, py } = getPointerPos(e);\n      const hit = gizmoHitTest(px, py, orientation, center, armLength, upAxis);\n      setHoveredRegion(hit);\n\n      // Cursor\n      if (disabled) {\n        canvas.style.cursor = 'default';\n      } else if (hit.type === 'axis-positive' || hit.type === 'origin') {\n        canvas.style.cursor = 'pointer';\n      } else if (allowOrbit) {\n        canvas.style.cursor = isDraggingRef.current ? 'grabbing' : 'grab';\n      } else {\n        canvas.style.cursor = 'default';\n      }\n    },\n    [\n      canvasRef,\n      allowOrbit,\n      orbitSpeed,\n      constrainPitch,\n      orientation,\n      interactionMode,\n      disabled,\n      getPointerPos,\n      center,\n      armLength,\n      upAxis,\n      onOrbit,\n    ]\n  );\n\n  const onPointerUp = useCallback(\n    (e: React.PointerEvent) => {\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n\n      if (isDraggingRef.current) {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        canvas.releasePointerCapture(e.pointerId);\n\n        if (hasDraggedRef.current) {\n          // Finished orbit drag\n          onOrbitEnd?.(orientation);\n        } else if (allowSnap) {\n          // Click (no drag) — check hit\n          const { px, py } = getPointerPos(e);\n          const hit = gizmoHitTest(\n            px,\n            py,\n            orientation,\n            center,\n            armLength,\n            upAxis\n          );\n\n          if (hit.type === 'origin') {\n            onOriginClick?.();\n          } else if (hit.type === 'axis-positive' && hit.axis) {\n            onAxisClick?.(hit.axis, true);\n            const view = axisToPresetView(hit.axis, true, upAxis);\n            if (view) onSnapToView?.(view);\n          } else if (hit.type === 'axis-negative' && hit.axis) {\n            onAxisClick?.(hit.axis, false);\n            const view = axisToPresetView(hit.axis, false, upAxis);\n            if (view) onSnapToView?.(view);\n          }\n        }\n      }\n    },\n    [\n      canvasRef,\n      allowSnap,\n      getPointerPos,\n      orientation,\n      center,\n      armLength,\n      upAxis,\n      onOrbitEnd,\n      onOriginClick,\n      onAxisClick,\n      onSnapToView,\n    ]\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled || interactionMode === 'display-only') return;\n\n      const fine = e.shiftKey;\n      const step = fine ? ORBIT_FINE_STEP : ORBIT_KEY_STEP;\n      let handled = false;\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (allowOrbit) {\n            onOrbit?.({ deltaYaw: -step, deltaPitch: 0 });\n            handled = true;\n          }\n          break;\n        case 'ArrowRight':\n          if (allowOrbit) {\n            onOrbit?.({ deltaYaw: step, deltaPitch: 0 });\n            handled = true;\n          }\n          break;\n        case 'ArrowUp':\n          if (allowOrbit) {\n            let deltaPitch = step;\n            if (constrainPitch) {\n              deltaPitch =\n                clamp(orientation.pitch + step, -90, 90) - orientation.pitch;\n            }\n            onOrbit?.({ deltaYaw: 0, deltaPitch });\n            handled = true;\n          }\n          break;\n        case 'ArrowDown':\n          if (allowOrbit) {\n            let deltaPitch = -step;\n            if (constrainPitch) {\n              deltaPitch =\n                clamp(orientation.pitch - step, -90, 90) - orientation.pitch;\n            }\n            onOrbit?.({ deltaYaw: 0, deltaPitch });\n            handled = true;\n          }\n          break;\n        case '1':\n          if (allowSnap) {\n            onSnapToView?.(e.ctrlKey ? 'back' : 'front');\n            handled = true;\n          }\n          break;\n        case '3':\n          if (allowSnap) {\n            onSnapToView?.(e.ctrlKey ? 'left' : 'right');\n            handled = true;\n          }\n          break;\n        case '7':\n          if (allowSnap) {\n            onSnapToView?.(e.ctrlKey ? 'bottom' : 'top');\n            handled = true;\n          }\n          break;\n        case '5':\n        case 'Home':\n          onOriginClick?.();\n          handled = true;\n          break;\n      }\n\n      if (handled) {\n        e.preventDefault();\n      }\n    },\n    [\n      disabled,\n      interactionMode,\n      allowOrbit,\n      allowSnap,\n      constrainPitch,\n      orientation,\n      onOrbit,\n      onSnapToView,\n      onOriginClick,\n    ]\n  );\n\n  return {\n    isDragging,\n    hoveredRegion,\n    handlers: {\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      onKeyDown,\n    },\n  };\n}\n"],"names":[],"mappings":";;;;;AA4CA;AAEA;AACA;AAEM;AAGJ;;;;AAmBA;;AAEA;AACA;AACA;;;;;AAaA;AAEI;AACA;;AACA;;AAEF;AAIF;;;AAII;AACA;;;AAIA;AACA;AACA;AACA;;AAEA;;AAGA;;AAEF;;;;;;;;;AAUC;AAGH;AAEI;AACA;;AAEA;;;;;;AAOE;AACE;;AAGF;AACE;;;AAIE;AACA;;;;AAMJ;;;;;;;AAOF;;;;AAKE;;AACK;AACL;;;AAEA;;;AAEA;;AAEJ;;;;;;;;;;;;;AAcC;AAGH;AAEI;AACA;;AAEA;AACE;;AAEA;AAEA;;AAEE;;;;;AAIA;AASA;;;;;AAIE;AACA;AAAU;;;;AAGV;AACA;AAAU;;;;AAIlB;;;;;;;;;;;;AAaC;AAGH;AAEI;;AAEA;;;AAIA;AACE;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;;;;AAKQ;;;;;;AAMR;;AAEI;;;AAGI;;;;;;AAMR;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;AACA;;;;;;;;AASJ;;;;;;;;;;AAWC;;;;AAMD;;;;;AAKC;;AAEL;;"}

package/dist/esm/components/editor/ViewportGizmo/useGizmoRenderer.js

@@ -40,7 +40,7 @@ const AXIS_COLORS = {
     z: '#4A86C8',
 };
 function useGizmoRenderer(options) {
-    const { canvasRef, orientation, diameter, upAxis, size, axisColors, axisLabels, axisVisible, showLabels, showNegativeAxes, showOrbitRing, showOriginHandle, background, disabled, isDragging, hoveredRegion, } = options;
+    const { canvasRef, orientation, diameter, upAxis, size, axisColors, axisLabels, axisVisible, showLabels, showNegativeAxes, showOrbitRing, showOriginHandle, background, disabled, hoveredRegion, } = options;
     const draw = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -176,7 +176,6 @@ function useGizmoRenderer(options) {
         showOriginHandle,
         background,
         disabled,
-        isDragging,
         hoveredRegion,
     ]);
     useCanvasRenderer({

package/dist/esm/components/editor/ViewportGizmo/useGizmoRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGizmoRenderer.js","sources":["../../../../../../src/components/editor/ViewportGizmo/useGizmoRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA2BA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;AAGH;AAEA;AACE;AACA;AACA;;AAwBI;AACJ;AAmBA;AACE;AACA;;;AAGA;;AAEA;AAEA;AACA;AACA;AAEA;AACE;AACA;AACA;;;AAEA;;AAGF;AACA;;AAEA;;;;AAMA;AACE;AACA;;;;;AAIK;AACL;AACA;;;AAIF;;;AAIE;AACA;AACA;;;;AAIA;;;AAIF;AAEA;AACE;;AACA;;AAEA;;;AAII;AAEJ;AACA;;AAEE;;AAGF;AACA;AACA;AACA;;;;;;AAOA;AACE;AACA;AACA;;;;;;AAOE;;;;;AAMA;AACA;AACA;;;AAIA;AACA;AACA;AACA;AACA;;;;;;;AAQJ;;AAEE;AACA;AAEF;AACA;;;;;AAMA;AACA;AACA;;;AAIF;AACF;;;;;;;;;;;;;;;;;AAiBC;AAED;;;AAGE;AACD;AACH;;"}
+{"version":3,"file":"useGizmoRenderer.js","sources":["src/components/editor/ViewportGizmo/useGizmoRenderer.ts"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { resolveCanvasTheme } from '@/components/primitives/canvas/canvasTheme';\nimport { useCanvasRenderer } from '@/components/primitives/canvas/useCanvasRenderer';\n\nimport { projectAxes } from './gizmoMath';\n\nimport type {\n  GizmoOrientation,\n  GizmoUpAxis,\n  GizmoHitRegion,\n  ViewportGizmoSize,\n} from './ViewportGizmo.types';\nimport type { CanvasThemeColors } from '@/components/primitives/canvas/canvas.types';\nimport type React from 'react';\n\n// ─── Size Presets ───\n\ninterface SizePreset {\n  labelFontSize: number;\n  fontWeight: number;\n  armWidthPositive: number;\n  armWidthNegative: number;\n  tipRadius: number;\n  tipHoverRadius: number;\n  originRadius: number;\n}\n\nconst SIZE_PRESETS: Record<ViewportGizmoSize, SizePreset> = {\n  sm: {\n    labelFontSize: 9,\n    fontWeight: 600,\n    armWidthPositive: 1.5,\n    armWidthNegative: 0.75,\n    tipRadius: 4,\n    tipHoverRadius: 5,\n    originRadius: 4,\n  },\n  md: {\n    labelFontSize: 11,\n    fontWeight: 600,\n    armWidthPositive: 2.5,\n    armWidthNegative: 1,\n    tipRadius: 5,\n    tipHoverRadius: 7,\n    originRadius: 5,\n  },\n  lg: {\n    labelFontSize: 13,\n    fontWeight: 600,\n    armWidthPositive: 3,\n    armWidthNegative: 1.5,\n    tipRadius: 6,\n    tipHoverRadius: 8,\n    originRadius: 6,\n  },\n};\n\n// ─── Default Axis Colors ───\n\nconst AXIS_COLORS: Record<string, string> = {\n  x: '#E63946',\n  y: '#6AA84F',\n  z: '#4A86C8',\n};\n\ninterface UseGizmoRendererOptions {\n  canvasRef: React.RefObject<HTMLCanvasElement | null>;\n  orientation: GizmoOrientation;\n  diameter: number;\n  upAxis: GizmoUpAxis;\n  size: ViewportGizmoSize;\n  axisColors: Record<string, string>;\n  axisLabels: Record<string, string>;\n  axisVisible: Record<string, boolean>;\n  showLabels: boolean;\n  showNegativeAxes: boolean;\n  showOrbitRing: boolean;\n  showOriginHandle: boolean;\n  background: 'transparent' | 'subtle' | 'solid';\n  disabled: boolean;\n  isDragging: boolean;\n  hoveredRegion: GizmoHitRegion;\n}\n\nexport { AXIS_COLORS };\n\nexport function useGizmoRenderer(options: UseGizmoRendererOptions): void {\n  const {\n    canvasRef,\n    orientation,\n    diameter,\n    upAxis,\n    size,\n    axisColors,\n    axisLabels,\n    axisVisible,\n    showLabels,\n    showNegativeAxes,\n    showOrbitRing,\n    showOriginHandle,\n    background,\n    disabled,\n    hoveredRegion,\n  } = options;\n\n  const draw = useCallback(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    const dpr =\n      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n    const rect = canvas.getBoundingClientRect();\n    const w = rect.width;\n    const h = rect.height;\n\n    if (canvas.width !== w * dpr || canvas.height !== h * dpr) {\n      canvas.width = w * dpr;\n      canvas.height = h * dpr;\n      ctx.scale(dpr, dpr);\n    } else {\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    }\n\n    const theme: CanvasThemeColors = resolveCanvasTheme(canvas);\n    const preset = SIZE_PRESETS[size];\n    const opacity = disabled ? 0.4 : 1;\n    const center = { x: w / 2, y: h / 2 };\n    const armLength = (diameter / 2) * 0.65;\n\n    // 1. Clear / background\n    ctx.clearRect(0, 0, w, h);\n\n    if (background === 'subtle') {\n      ctx.globalAlpha = opacity * 0.15;\n      ctx.fillStyle = theme.backgroundSecondary;\n      ctx.beginPath();\n      ctx.arc(center.x, center.y, diameter / 2, 0, Math.PI * 2);\n      ctx.fill();\n    } else if (background === 'solid') {\n      ctx.globalAlpha = opacity;\n      ctx.fillStyle = theme.backgroundSecondary;\n      ctx.fillRect(0, 0, w, h);\n    }\n\n    ctx.globalAlpha = opacity;\n\n    // 2. Orbit ring\n    if (showOrbitRing) {\n      ctx.strokeStyle = theme.borderDefault;\n      ctx.lineWidth = 1;\n      ctx.globalAlpha = opacity * 0.3;\n      ctx.beginPath();\n      ctx.arc(center.x, center.y, armLength * 1.1, 0, Math.PI * 2);\n      ctx.stroke();\n      ctx.globalAlpha = opacity;\n    }\n\n    // 3. Draw arms — depth sorted (furthest first = painter's algorithm)\n    const arms = projectAxes(orientation, center, armLength, upAxis);\n\n    for (const arm of arms) {\n      if (!axisVisible[arm.axis]) continue;\n      if (!arm.positive && !showNegativeAxes) continue;\n\n      const color = axisColors[arm.axis] ?? AXIS_COLORS[arm.axis] ?? '#888';\n      const isHovered =\n        hoveredRegion.axis === arm.axis &&\n        ((arm.positive && hoveredRegion.type === 'axis-positive') ||\n          (!arm.positive && hoveredRegion.type === 'axis-negative'));\n\n      const alpha = arm.positive ? 1.0 : 0.35;\n      const lineWidth = arm.positive\n        ? preset.armWidthPositive\n        : preset.armWidthNegative;\n\n      // Draw arm line\n      ctx.globalAlpha = opacity * alpha;\n      ctx.strokeStyle = color;\n      ctx.lineWidth = lineWidth;\n      ctx.lineCap = 'round';\n      ctx.beginPath();\n      ctx.moveTo(center.x, center.y);\n      ctx.lineTo(arm.screenX, arm.screenY);\n      ctx.stroke();\n\n      // Draw tip handle (positive arms only)\n      if (arm.positive) {\n        const tipR = isHovered ? preset.tipHoverRadius : preset.tipRadius;\n        ctx.globalAlpha = opacity;\n        ctx.fillStyle = color;\n        ctx.beginPath();\n        ctx.arc(arm.screenX, arm.screenY, tipR, 0, Math.PI * 2);\n        ctx.fill();\n\n        // Draw label\n        if (showLabels) {\n          const label = axisLabels[arm.axis] ?? arm.axis.toUpperCase();\n          const labelOffset = tipR + preset.labelFontSize * 0.6;\n\n          // Position label outward from center\n          const dx = arm.screenX - center.x;\n          const dy = arm.screenY - center.y;\n          const dist = Math.sqrt(dx * dx + dy * dy) || 1;\n          const nx = dx / dist;\n          const ny = dy / dist;\n          const lx = arm.screenX + nx * labelOffset;\n          const ly = arm.screenY + ny * labelOffset;\n\n          ctx.globalAlpha = opacity;\n          ctx.fillStyle = color;\n          ctx.font = `${preset.fontWeight} ${preset.labelFontSize}px sans-serif`;\n          ctx.textAlign = 'center';\n          ctx.textBaseline = 'middle';\n          ctx.fillText(label, lx, ly);\n        }\n      }\n    }\n\n    // 4. Origin handle\n    if (showOriginHandle) {\n      const isOriginHovered = hoveredRegion.type === 'origin';\n      const originR = isOriginHovered\n        ? preset.originRadius + 1.5\n        : preset.originRadius;\n\n      ctx.globalAlpha = opacity * 0.6;\n      ctx.fillStyle = theme.textSecondary;\n      ctx.beginPath();\n      ctx.arc(center.x, center.y, originR, 0, Math.PI * 2);\n      ctx.fill();\n\n      // Border ring\n      ctx.globalAlpha = opacity * 0.3;\n      ctx.strokeStyle = theme.textMuted;\n      ctx.lineWidth = 1;\n      ctx.stroke();\n    }\n\n    ctx.globalAlpha = 1;\n  }, [\n    canvasRef,\n    orientation,\n    diameter,\n    upAxis,\n    size,\n    axisColors,\n    axisLabels,\n    axisVisible,\n    showLabels,\n    showNegativeAxes,\n    showOrbitRing,\n    showOriginHandle,\n    background,\n    disabled,\n    hoveredRegion,\n  ]);\n\n  useCanvasRenderer({\n    draw,\n    deps: [draw],\n    paused: false,\n  });\n}\n"],"names":[],"mappings":";;;;;;AA8BA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;AAGH;AAEA;AACE;AACA;AACA;;AAwBI;AACJ;AAkBA;AACE;AACA;;;AAGA;;AAEA;AAEA;AACA;AACA;AAEA;AACE;AACA;AACA;;;AAEA;;AAGF;AACA;;AAEA;;;;AAMA;AACE;AACA;;;;;AAIK;AACL;AACA;;;AAIF;;;AAIE;AACA;AACA;;;;AAIA;;;AAIF;AAEA;AACE;;AACA;;AAEA;;;AAII;AAEJ;AACA;;AAEE;;AAGF;AACA;AACA;AACA;;;;;;AAOA;AACE;AACA;AACA;;;;;;AAOE;;;;;AAMA;AACA;AACA;;;AAIA;AACA;AACA;AACA;AACA;;;;;;;AAQJ;;AAEE;AACA;AAEF;AACA;;;;;AAMA;AACA;AACA;;;AAIF;AACF;;;;;;;;;;;;;;;;AAgBC;AAED;;;AAGE;AACD;AACH;;"}

package/dist/esm/components/feedback/Alert/Alert.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { cx } from '../../../utils/cx.js';
-import { vars } from '../../../theme/contract.css.js';
-import { IconButton } from '../../primitives/IconButton/IconButton.js';
+import React from 'react';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
 import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { ErrorIcon } from '../../Icons/ErrorIcon.js';
 import { InfoIcon } from '../../Icons/InfoIcon.js';
-import { CheckIcon } from '../../Icons/CheckIcon.js';
 import { WarningIcon } from '../../Icons/WarningIcon.js';
-import { ErrorIcon } from '../../Icons/ErrorIcon.js';
+import { IconButton } from '../../primitives/IconButton/IconButton.js';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
 import { alertColorVar, alertIconSolidStyle, alertIconStyle, alertContentStyle, alertCloseColumnStyle, alertCloseButtonSolidStyle, alertRecipe } from './Alert.css.js';
-import { AlertTitle } from './AlertTitle.js';
-import { AlertDescription } from './AlertDescription.js';
 import { AlertActions } from './AlertActions.js';
+import { AlertDescription } from './AlertDescription.js';
+import { AlertTitle } from './AlertTitle.js';
 
 const VARIANT_COLOR = {
     info: vars.colors.accent.primary,

package/dist/esm/components/feedback/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0BA;AACE;AACA;AACA;AACA;AACA;;AAGF;AAEI;AACA;AACA;AACA;;;AAIJ;;;;;AAKE;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACH;AAgBI;AACA;AAEA;AAEI;;AAEE;;;AAIJ;AACD;AAED;;AAoDF;AAGF;AAeO;AACP;AACA;AACA;;"}
+{"version":3,"file":"Alert.js","sources":["src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { CheckIcon } from '@/components/Icons/CheckIcon';\nimport { CloseIcon } from '@/components/Icons/CloseIcon';\nimport { ErrorIcon } from '@/components/Icons/ErrorIcon';\nimport { InfoIcon } from '@/components/Icons/InfoIcon';\nimport { WarningIcon } from '@/components/Icons/WarningIcon';\nimport { IconButton } from '@/components/primitives/IconButton';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  alertCloseButtonSolidStyle,\n  alertCloseColumnStyle,\n  alertColorVar,\n  alertContentStyle,\n  alertIconSolidStyle,\n  alertIconStyle,\n  alertRecipe,\n} from './Alert.css';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription } from './AlertDescription';\nimport { AlertTitle } from './AlertTitle';\n\nimport type { AlertProps, AlertVariant } from './Alert.types';\n\nconst VARIANT_COLOR: Record<AlertVariant, string> = {\n  info: vars.colors.accent.primary,\n  success: vars.colors.accent.success,\n  warning: vars.colors.accent.warning,\n  error: vars.colors.accent.error,\n  neutral: vars.colors.text.muted,\n};\n\nconst VARIANT_ROLE: Record<AlertVariant, { role: string; ariaLabel?: string }> =\n  {\n    info: { role: 'status' },\n    success: { role: 'status' },\n    warning: { role: 'alert' },\n    error: { role: 'alert' },\n    neutral: { role: 'region', ariaLabel: 'Notice' },\n  };\n\nconst VARIANT_DEFAULT_ICON: Record<AlertVariant, React.ReactNode> = {\n  info: <InfoIcon size=\"md\" decorative />,\n  success: <CheckIcon size=\"md\" decorative />,\n  warning: <WarningIcon size=\"md\" decorative />,\n  error: <ErrorIcon size=\"md\" decorative />,\n  neutral: null,\n};\n\n/**\n * Persistent inline alert / callout.\n *\n * Use for non-transient status messages tied to the surrounding UI — read-only\n * notices, expired credentials, unsaved-changes banners, etc. For transient\n * confirmations like \"File saved\", reach for `useToast` instead.\n *\n * Compound API: pair with `<Alert.Title>`, `<Alert.Description>`, and\n * `<Alert.Actions>` for richer layouts. The same components are also\n * available as standalone named exports (`AlertTitle`, `AlertDescription`,\n * `AlertActions`).\n *\n * Accessibility: roles are derived from the variant — `alert` for\n * `error`/`warning`, `status` for `info`/`success`, `region` for `neutral`.\n * The component never auto-focuses; inline alerts shouldn't grab focus.\n *\n * @example\n * ```tsx\n * <Alert variant=\"warning\" title=\"Read-only mode\">\n *   Switch to edit mode to make changes.\n * </Alert>\n *\n * <Alert variant=\"error\" onClose={() => setOpen(false)}>\n *   <Alert.Title>Couldn't reach the server</Alert.Title>\n *   <Alert.Description>The request timed out.</Alert.Description>\n *   <Alert.Actions align=\"right\">\n *     <Button onClick={retry}>Retry</Button>\n *   </Alert.Actions>\n * </Alert>\n * ```\n */\nconst AlertImpl = /*#__PURE__*/ React.memo<AlertProps>(\n  ({\n    variant = 'info',\n    appearance = 'subtle',\n    icon = true,\n    onClose,\n    title,\n    width = '100%',\n    children,\n    className,\n    style,\n    testId,\n    'aria-label': ariaLabelProp,\n    ref,\n    ...rest\n  }) => {\n    const isSolid = appearance === 'solid';\n    const { role, ariaLabel: defaultAriaLabel } = VARIANT_ROLE[variant];\n\n    const resolvedIcon: React.ReactNode =\n      icon === false\n        ? null\n        : icon === true\n          ? VARIANT_DEFAULT_ICON[variant]\n          : icon;\n\n    const inlineVars = assignInlineVars({\n      [alertColorVar]: VARIANT_COLOR[variant],\n    });\n\n    const resolvedWidth = typeof width === 'number' ? `${width}px` : width;\n\n    return (\n      <div\n        ref={ref}\n        role={role}\n        aria-label={ariaLabelProp ?? defaultAriaLabel}\n        className={cx(alertRecipe({ variant, appearance }), className)}\n        style={{ ...inlineVars, width: resolvedWidth, ...style }}\n        data-testid={testId}\n        data-variant={variant}\n        data-appearance={appearance}\n        {...rest}\n      >\n        {resolvedIcon ? (\n          <div\n            className={cx(alertIconStyle, isSolid && alertIconSolidStyle)}\n            data-alert-icon=\"\"\n            aria-hidden=\"true\"\n          >\n            {resolvedIcon}\n          </div>\n        ) : null}\n\n        <div className={alertContentStyle}>\n          {title !== undefined && title !== null ? (\n            <AlertTitle>{title}</AlertTitle>\n          ) : null}\n          {typeof children === 'string' ? (\n            <AlertDescription>{children}</AlertDescription>\n          ) : (\n            children\n          )}\n        </div>\n\n        {onClose ? (\n          <div className={alertCloseColumnStyle}>\n            <IconButton\n              type=\"button\"\n              aria-label=\"Close alert\"\n              variant=\"ghost\"\n              size=\"sm\"\n              radius=\"sm\"\n              onClick={onClose}\n              className={isSolid ? alertCloseButtonSolidStyle : undefined}\n            >\n              <CloseIcon size=\"sm\" decorative />\n            </IconButton>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nAlertImpl.displayName = 'Alert';\n\n/**\n * Public API: `Alert` with attached compound members.\n *\n * `React.memo` returns an exotic component that doesn't accept arbitrary\n * static fields with proper typing — we expose the compound members through\n * a typed wrapper.\n */\ntype AlertCompound = typeof AlertImpl & {\n  Title: typeof AlertTitle;\n  Description: typeof AlertDescription;\n  Actions: typeof AlertActions;\n};\n\nexport const Alert = AlertImpl as AlertCompound;\nAlert.Title = AlertTitle;\nAlert.Description = AlertDescription;\nAlert.Actions = AlertActions;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6BA;AACE;AACA;AACA;AACA;AACA;;AAGF;AAEI;AACA;AACA;AACA;;;AAIJ;;;;;AAKE;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACH;AAgBI;AACA;AAEA;AAEI;;AAEE;;;AAIJ;AACD;AAED;;AAoDF;AAGF;AAeO;AACP;AACA;AACA;;"}

package/dist/esm/components/feedback/Alert/AlertActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertActions.js","sources":["../../../../../../src/components/feedback/Alert/AlertActions.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;;;AAgBG;AACI;AAEH;AAYF;AAGF;;"}
+{"version":3,"file":"AlertActions.js","sources":["src/components/feedback/Alert/AlertActions.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { alertActionsRecipe } from './Alert.css';\n\nimport type { AlertActionsProps } from './Alert.types';\n\n/**\n * Action-button row for an `Alert`. Lays out children with a horizontal gap\n * and configurable alignment. Renders only when actions are needed — for\n * dismissible alerts the close button in the top-right is usually enough.\n *\n * @example\n * ```tsx\n * <Alert variant=\"error\">\n *   <Alert.Title>Couldn't reach the server</Alert.Title>\n *   <Alert.Description>The request timed out after 30 seconds.</Alert.Description>\n *   <Alert.Actions align=\"right\">\n *     <Button variant=\"filled\" onClick={retry}>Retry</Button>\n *     <Button onClick={dismiss}>Dismiss</Button>\n *   </Alert.Actions>\n * </Alert>\n * ```\n */\nexport const AlertActions = /*#__PURE__*/ React.memo<AlertActionsProps>(\n  ({ children, align = 'left', className, style, testId, ref, ...rest }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(alertActionsRecipe({ align }), className)}\n        style={style}\n        data-testid={testId}\n        data-alert-actions=\"\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAlertActions.displayName = 'AlertActions';\n"],"names":[],"mappings":";;;;;;AAUA;;;;;;;;;;;;;;;;AAgBG;AACI;AAEH;AAYF;AAGF;;"}

package/dist/esm/components/feedback/Alert/AlertDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDescription.js","sources":["../../../../../../src/components/feedback/Alert/AlertDescription.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAYF;AAGF;;"}
+{"version":3,"file":"AlertDescription.js","sources":["src/components/feedback/Alert/AlertDescription.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { alertDescriptionStyle } from './Alert.css';\n\nimport type { AlertDescriptionProps } from './Alert.types';\n\n/**\n * Body text slot for an `Alert`. Most one-line alerts can pass a string as\n * children to `<Alert>` directly; reach for this when you need to compose\n * multiple paragraphs or inline elements.\n *\n * @example\n * ```tsx\n * <Alert variant=\"info\">\n *   <Alert.Title>Heads up</Alert.Title>\n *   <Alert.Description>\n *     This editor is read-only. Open the file in edit mode to make changes.\n *   </Alert.Description>\n * </Alert>\n * ```\n */\nexport const AlertDescription = /*#__PURE__*/ React.memo<AlertDescriptionProps>(\n  ({ children, className, style, testId, ref, ...rest }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(alertDescriptionStyle, className)}\n        style={style}\n        data-testid={testId}\n        data-alert-description=\"\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAlertDescription.displayName = 'AlertDescription';\n"],"names":[],"mappings":";;;;;;AAUA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAYF;AAGF;;"}

package/dist/esm/components/feedback/Alert/AlertTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertTitle.js","sources":["../../../../../../src/components/feedback/Alert/AlertTitle.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAYF;AAGF;;"}
+{"version":3,"file":"AlertTitle.js","sources":["src/components/feedback/Alert/AlertTitle.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { alertTitleStyle } from './Alert.css';\n\nimport type { AlertTitleProps } from './Alert.types';\n\n/**\n * Title slot for an `Alert`. Renders a single line of emphasized text above\n * the description.\n *\n * Equivalent to passing `title` directly on `<Alert>`. Use this form when you\n * want richer content (links, inline elements) inside the title.\n *\n * @example\n * ```tsx\n * <Alert variant=\"warning\">\n *   <Alert.Title>Read-only mode</Alert.Title>\n *   <Alert.Description>Switch to edit to change this file.</Alert.Description>\n * </Alert>\n * ```\n */\nexport const AlertTitle = /*#__PURE__*/ React.memo<AlertTitleProps>(\n  ({ children, className, style, testId, ref, ...rest }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(alertTitleStyle, className)}\n        style={style}\n        data-testid={testId}\n        data-alert-title=\"\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAlertTitle.displayName = 'AlertTitle';\n"],"names":[],"mappings":";;;;;;AAUA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAYF;AAGF;;"}