entangle-ui 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # entangle-ui
 
+## 0.13.0
+
+### Minor Changes
+
+- [#114](https://github.com/SebastianWebdev/entangle-ui/pull/114) [`6594d8e`](https://github.com/SebastianWebdev/entangle-ui/commit/6594d8ef89d07e14e5322a1bd296f91dca1014d5) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Add `EditableText`: a primitive that renders like `Text` but becomes a chrome-less inline editor on click — the editor-UI pattern for renaming layers, nodes, and assets in place. The idle state renders a real `<Text>` (inheriting every typography prop) and the editing state renders an `<input>` sharing the same typography recipe, so the swap is seamless; the field auto-sizes to its content with no measurement effects. Supports controlled/uncontrolled `value`, `activationMode` (`single` / `double`, plus Enter/F2 keyboard activation), commit on Enter/blur, cancel on Escape, `submitOnBlur` and `selectOnEdit` toggles, an imperative handle (`edit` / `commit` / `cancel` / `focus` / `isEditing` / `getElement`), full i18n via `labels` (`DEFAULT_EDITABLE_TEXT_LABELS`), and overridable `--etui-editable-text-*` custom properties.
+
+- [#112](https://github.com/SebastianWebdev/entangle-ui/pull/112) [`4fc41c6`](https://github.com/SebastianWebdev/entangle-ui/commit/4fc41c62a5ce8e6fa1d90f6772875b64a482a23c) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - ViewportGizmo: add `invertYaw` and `invertPitch` props to flip the orbit drag direction without negating the `onOrbit` delta by hand. Inversion is applied before `constrainPitch`, so pitch clamping stays correct at the poles. Also documents the `onOrbit` delta sign convention and adds a copy-paste Three.js / R3F `OrbitControls` integration recipe to the docs.
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/esm/assets/src/components/primitives/EditableText/EditableText.css.ts.vanilla-CrVGgD19.css

@@ -0,0 +1,63 @@
+.EditableText_displayStyle__d2an010 {
+  display: inline-block;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding-inline: 3px;
+  margin-inline: -3px;
+  border-radius: var(--etui-radius-sm);
+  outline: none;
+  cursor: text;
+  transition: background-color var(--etui-transition-fast);
+}
+.EditableText_displayStyle__d2an010:hover {
+  background-color: var(--etui-editable-text-hover-bg, var(--etui-color-surface-hover));
+}
+.EditableText_displayStyle__d2an010:focus-visible {
+  box-shadow: var(--etui-shadow-focus);
+}
+.EditableText_displayReadOnlyStyle__d2an011 {
+  cursor: default;
+}
+.EditableText_displayReadOnlyStyle__d2an011:hover {
+  background-color: transparent;
+}
+.EditableText_displayDisabledStyle__d2an012 {
+  cursor: not-allowed;
+}
+.EditableText_displayDisabledStyle__d2an012:hover {
+  background-color: transparent;
+}
+.EditableText_editWrapStyle__d2an013 {
+  display: inline-grid;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding-inline: 3px;
+  margin-inline: -3px;
+  border-radius: var(--etui-radius-sm);
+  background-color: var(--etui-editable-text-edit-bg, var(--etui-color-bg-tertiary));
+  box-shadow: inset 0 0 0 1px var(--etui-editable-text-edit-ring, var(--etui-color-border-focus));
+}
+.EditableText_sharedCell__d2an014 {
+  grid-area: 1 / 1;
+  min-width: 1ch;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  white-space: pre;
+  font: inherit;
+}
+.EditableText_sizerStyle__d2an015 {
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+.EditableText_inputStyle__d2an016 {
+  width: 100%;
+  background: transparent;
+  outline: none;
+  color: inherit;
+  appearance: none;
+}
+.EditableText_inputStyle__d2an016::placeholder {
+  color: var(--etui-color-text-muted);
+}

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

@@ -9,7 +9,7 @@ import { gizmoCanvasStyle, ariaLiveRegionStyle, gizmoDiameterVar, gizmoWrapperRe
 
 const DEFAULT_LABELS = { x: 'X', y: 'Y', z: 'Z' };
 const DEFAULT_VISIBLE = { x: true, y: true, z: true };
-const ViewportGizmo = ({ orientation, upAxis = 'y-up', axisColorPreset = 'blender', axisConfig, showLabels = true, showNegativeAxes = true, showOrbitRing = true, showOriginHandle = true, background = 'subtle', interactionMode = 'full', orbitSpeed = 1, constrainPitch = true, onOrbit, onOrbitEnd, onSnapToView, onAxisClick, onOriginClick, diameter = 120, size = 'md', disabled = false, className, testId, id, style, ...rest }) => {
+const ViewportGizmo = ({ orientation, upAxis = 'y-up', axisColorPreset = 'blender', axisConfig, showLabels = true, showNegativeAxes = true, showOrbitRing = true, showOriginHandle = true, background = 'subtle', interactionMode = 'full', orbitSpeed = 1, constrainPitch = true, invertYaw = false, invertPitch = false, onOrbit, onOrbitEnd, onSnapToView, onAxisClick, onOriginClick, diameter = 120, size = 'md', disabled = false, className, testId, id, style, ...rest }) => {
     const canvasRef = useRef(null);
     // Resolve axis colors from preset or custom config
     const axisColors = useMemo(() => {
@@ -51,6 +51,8 @@ const ViewportGizmo = ({ orientation, upAxis = 'y-up', axisColorPreset = 'blende
         interactionMode,
         orbitSpeed,
         constrainPitch,
+        invertYaw,
+        invertPitch,
         disabled,
         onOrbit,
         onOrbitEnd,

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

@@ -1 +1 @@
-{"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;;"}
+{"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  invertYaw = false,\n  invertPitch = false,\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    invertYaw,\n    invertPitch,\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;;AA+BE;;AAGA;AACE;;;;;;;AAOA;AACF;AAEA;;;;;;;;AAQE;AACF;AAEA;;;;;;;;AAQE;AACF;;;;;;;;;;;;;;;;;;AAmBC;;AAGD;;;;;;;;;;;;;;;;AAiBC;;;AAKD;AAIM;;;;;;;AAcA;AAcR;AAEA;;"}

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

@@ -7,7 +7,7 @@ const NONE_HIT = { type: 'none', distance: Infinity };
 const ORBIT_KEY_STEP = 15;
 const ORBIT_FINE_STEP = 5;
 function useGizmoInteraction(options) {
-    const { orientation, canvasRef, diameter, upAxis, interactionMode, orbitSpeed, constrainPitch, disabled, onOrbit, onOrbitEnd, onSnapToView, onAxisClick, onOriginClick, } = options;
+    const { orientation, canvasRef, diameter, upAxis, interactionMode, orbitSpeed, constrainPitch, invertYaw, invertPitch, 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).
@@ -27,6 +27,19 @@ function useGizmoInteraction(options) {
         const rect = canvas.getBoundingClientRect();
         return { px: e.clientX - rect.left, py: e.clientY - rect.top };
     }, [canvasRef]);
+    // Single emission point for orbit deltas so the pointer and keyboard paths
+    // stay consistent. Inversion is applied last, then pitch is constrained
+    // against the value that will actually be applied — this keeps the
+    // constraint correct at both poles regardless of `invertPitch`.
+    const emitOrbit = useCallback((rawYaw, rawPitch) => {
+        const deltaYaw = invertYaw ? -rawYaw : rawYaw;
+        let deltaPitch = invertPitch ? -rawPitch : rawPitch;
+        if (constrainPitch) {
+            deltaPitch =
+                clamp(orientation.pitch + deltaPitch, -90, 90) - orientation.pitch;
+        }
+        onOrbit?.({ deltaYaw, deltaPitch });
+    }, [invertYaw, invertPitch, constrainPitch, orientation.pitch, onOrbit]);
     const onPointerDown = useCallback((e) => {
         if (disabled || interactionMode === 'display-only' || e.button !== 0)
             return;
@@ -67,13 +80,7 @@ function useGizmoInteraction(options) {
                 hasDraggedRef.current = true;
             }
             if (hasDraggedRef.current) {
-                const deltaYaw = dx * orbitSpeed * 0.5;
-                let deltaPitch = -dy * orbitSpeed * 0.5;
-                if (constrainPitch) {
-                    const newPitch = orientation.pitch + deltaPitch;
-                    deltaPitch = clamp(newPitch, -90, 90) - orientation.pitch;
-                }
-                onOrbit?.({ deltaYaw, deltaPitch });
+                emitOrbit(dx * orbitSpeed * 0.5, -dy * orbitSpeed * 0.5);
             }
             lastPointerRef.current = { x: e.clientX, y: e.clientY };
             return;
@@ -101,7 +108,7 @@ function useGizmoInteraction(options) {
         canvasRef,
         allowOrbit,
         orbitSpeed,
-        constrainPitch,
+        emitOrbit,
         orientation,
         interactionMode,
         disabled,
@@ -109,7 +116,6 @@ function useGizmoInteraction(options) {
         center,
         armLength,
         upAxis,
-        onOrbit,
     ]);
     const onPointerUp = useCallback((e) => {
         const canvas = canvasRef.current;
@@ -166,35 +172,25 @@ function useGizmoInteraction(options) {
         switch (e.key) {
             case 'ArrowLeft':
                 if (allowOrbit) {
-                    onOrbit?.({ deltaYaw: -step, deltaPitch: 0 });
+                    emitOrbit(-step, 0);
                     handled = true;
                 }
                 break;
             case 'ArrowRight':
                 if (allowOrbit) {
-                    onOrbit?.({ deltaYaw: step, deltaPitch: 0 });
+                    emitOrbit(step, 0);
                     handled = true;
                 }
                 break;
             case 'ArrowUp':
                 if (allowOrbit) {
-                    let deltaPitch = step;
-                    if (constrainPitch) {
-                        deltaPitch =
-                            clamp(orientation.pitch + step, -90, 90) - orientation.pitch;
-                    }
-                    onOrbit?.({ deltaYaw: 0, deltaPitch });
+                    emitOrbit(0, step);
                     handled = true;
                 }
                 break;
             case 'ArrowDown':
                 if (allowOrbit) {
-                    let deltaPitch = -step;
-                    if (constrainPitch) {
-                        deltaPitch =
-                            clamp(orientation.pitch - step, -90, 90) - orientation.pitch;
-                    }
-                    onOrbit?.({ deltaYaw: 0, deltaPitch });
+                    emitOrbit(0, -step);
                     handled = true;
                 }
                 break;
@@ -230,9 +226,7 @@ function useGizmoInteraction(options) {
         interactionMode,
         allowOrbit,
         allowSnap,
-        constrainPitch,
-        orientation,
-        onOrbit,
+        emitOrbit,
         onSnapToView,
         onOriginClick,
     ]);

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

@@ -1 +1 @@
-{"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;;"}
+{"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  invertYaw: boolean;\n  invertPitch: 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    invertYaw,\n    invertPitch,\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  // Single emission point for orbit deltas so the pointer and keyboard paths\n  // stay consistent. Inversion is applied last, then pitch is constrained\n  // against the value that will actually be applied — this keeps the\n  // constraint correct at both poles regardless of `invertPitch`.\n  const emitOrbit = useCallback(\n    (rawYaw: number, rawPitch: number) => {\n      const deltaYaw = invertYaw ? -rawYaw : rawYaw;\n      let deltaPitch = invertPitch ? -rawPitch : rawPitch;\n\n      if (constrainPitch) {\n        deltaPitch =\n          clamp(orientation.pitch + deltaPitch, -90, 90) - orientation.pitch;\n      }\n\n      onOrbit?.({ deltaYaw, deltaPitch });\n    },\n    [invertYaw, invertPitch, constrainPitch, orientation.pitch, onOrbit]\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          emitOrbit(dx * orbitSpeed * 0.5, -dy * orbitSpeed * 0.5);\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      emitOrbit,\n      orientation,\n      interactionMode,\n      disabled,\n      getPointerPos,\n      center,\n      armLength,\n      upAxis,\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            emitOrbit(-step, 0);\n            handled = true;\n          }\n          break;\n        case 'ArrowRight':\n          if (allowOrbit) {\n            emitOrbit(step, 0);\n            handled = true;\n          }\n          break;\n        case 'ArrowUp':\n          if (allowOrbit) {\n            emitOrbit(0, step);\n            handled = true;\n          }\n          break;\n        case 'ArrowDown':\n          if (allowOrbit) {\n            emitOrbit(0, -step);\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      emitOrbit,\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":";;;;;AA8CA;AAEA;AACA;AAEM;AAGJ;;;;AAqBA;;AAEA;AACA;AACA;;;;;AAaA;AAEI;AACA;;AACA;;AAEF;;;;;;AAUE;AACA;;;AAII;;;AAIN;AAIF;;;AAII;AACA;;;AAIA;AACA;AACA;AACA;;AAEA;;AAGA;;AAEF;;;;;;;;;AAUC;AAGH;AAEI;AACA;;AAEA;;;;;;AAOE;AACE;;AAGF;AACE;;AAGF;;;;;;;AAOF;;;;AAKE;;AACK;AACL;;;AAEA;;;AAEA;;AAEJ;;;;;;;;;;;;AAaC;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;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;;AAEI;;;;AAIJ;AACA;;;;;;;;AASJ;;;;;;;;AASC;;;;AAMD;;;;;AAKC;;AAEL;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js

@@ -9,6 +9,7 @@ import '../../primitives/Checkbox/Checkbox.js';
 import '../../primitives/Checkbox/CheckboxGroup.js';
 import '../../primitives/Code/Code.js';
 import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/EditableText/EditableText.js';
 import '../../primitives/HoverCard/HoverCard.js';
 import '../../primitives/Icon/Icon.js';
 import '../../primitives/IconButton/IconButton.js';

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbEllipsis.js","sources":["src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Tooltip } from '@/components/primitives';\nimport { cx } from '@/utils/cx';\n\nimport {\n  breadcrumbEllipsisButtonStyle,\n  breadcrumbEllipsisStyle,\n  breadcrumbEllipsisTextStyle,\n} from './Breadcrumbs.css';\n\nimport type { BreadcrumbEllipsisProps } from './Breadcrumbs.types';\n\n/**\n * Ellipsis placeholder for collapsed breadcrumb segments.\n *\n * @example\n * ```tsx\n * <BreadcrumbEllipsis onClick={expand} tooltip=\"src / components\" />\n * ```\n */\nexport const BreadcrumbEllipsis =\n  /*#__PURE__*/ React.memo<BreadcrumbEllipsisProps>(\n    ({ onClick, tooltip, className, style, testId, ref, ...rest }) => {\n      const ellipsis = onClick ? (\n        <button\n          type=\"button\"\n          className={breadcrumbEllipsisButtonStyle}\n          onClick={onClick}\n          aria-label=\"Show all breadcrumbs\"\n        >\n          …\n        </button>\n      ) : (\n        <span className={breadcrumbEllipsisTextStyle}>…</span>\n      );\n\n      return (\n        <li\n          ref={ref as React.Ref<HTMLLIElement>}\n          className={cx(breadcrumbEllipsisStyle, className)}\n          style={style}\n          data-testid={testId}\n          {...rest}\n        >\n          {tooltip ? (\n            <Tooltip title={tooltip} delay={300}>\n              {ellipsis}\n            </Tooltip>\n          ) : (\n            ellipsis\n          )}\n        </li>\n      );\n    }\n  );\n\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}
+{"version":3,"file":"BreadcrumbEllipsis.js","sources":["src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Tooltip } from '@/components/primitives';\nimport { cx } from '@/utils/cx';\n\nimport {\n  breadcrumbEllipsisButtonStyle,\n  breadcrumbEllipsisStyle,\n  breadcrumbEllipsisTextStyle,\n} from './Breadcrumbs.css';\n\nimport type { BreadcrumbEllipsisProps } from './Breadcrumbs.types';\n\n/**\n * Ellipsis placeholder for collapsed breadcrumb segments.\n *\n * @example\n * ```tsx\n * <BreadcrumbEllipsis onClick={expand} tooltip=\"src / components\" />\n * ```\n */\nexport const BreadcrumbEllipsis =\n  /*#__PURE__*/ React.memo<BreadcrumbEllipsisProps>(\n    ({ onClick, tooltip, className, style, testId, ref, ...rest }) => {\n      const ellipsis = onClick ? (\n        <button\n          type=\"button\"\n          className={breadcrumbEllipsisButtonStyle}\n          onClick={onClick}\n          aria-label=\"Show all breadcrumbs\"\n        >\n          …\n        </button>\n      ) : (\n        <span className={breadcrumbEllipsisTextStyle}>…</span>\n      );\n\n      return (\n        <li\n          ref={ref as React.Ref<HTMLLIElement>}\n          className={cx(breadcrumbEllipsisStyle, className)}\n          style={style}\n          data-testid={testId}\n          {...rest}\n        >\n          {tooltip ? (\n            <Tooltip title={tooltip} delay={300}>\n              {ellipsis}\n            </Tooltip>\n          ) : (\n            ellipsis\n          )}\n        </li>\n      );\n    }\n  );\n\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js

@@ -9,6 +9,7 @@ import '../../primitives/Checkbox/Checkbox.js';
 import '../../primitives/Checkbox/CheckboxGroup.js';
 import '../../primitives/Code/Code.js';
 import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/EditableText/EditableText.js';
 import '../../primitives/HoverCard/HoverCard.js';
 import '../../primitives/Icon/Icon.js';
 import '../../primitives/IconButton/IconButton.js';

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sources":["src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { Tooltip } from '@/components/primitives';\nimport { cx } from '@/utils/cx';\n\nimport {\n  breadcrumbContentRecipe,\n  breadcrumbIconStyle,\n  breadcrumbItemStyle,\n  breadcrumbLabelStyle,\n} from './Breadcrumbs.css';\n\nimport type { BreadcrumbItemProps } from './Breadcrumbs.types';\n\nfunction getTruncatedLabel(children: React.ReactNode, maxLength?: number) {\n  if (\n    typeof children !== 'string' ||\n    !maxLength ||\n    children.length <= maxLength\n  ) {\n    return { label: children, fullLabel: undefined };\n  }\n\n  const endIndex = Math.max(0, maxLength - 1);\n  return {\n    label: `${children.slice(0, endIndex)}…`,\n    fullLabel: children,\n  };\n}\n\n/**\n * Individual segment in a breadcrumb trail.\n *\n * Renders as a link, clickable span for client routing, current-page text, or\n * disabled text depending on the props provided.\n *\n * @example\n * ```tsx\n * <BreadcrumbItem href=\"/components\">Components</BreadcrumbItem>\n * <BreadcrumbItem isCurrent>Button</BreadcrumbItem>\n * ```\n */\nexport const BreadcrumbItem = /*#__PURE__*/ React.memo<BreadcrumbItemProps>(\n  ({\n    href,\n    onClick,\n    isCurrent = false,\n    icon,\n    maxLength,\n    endContent,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const { label, fullLabel } = getTruncatedLabel(children, maxLength);\n    const isInteractive =\n      (href !== undefined || onClick !== undefined) && !isCurrent;\n    const state = isCurrent ? 'current' : isInteractive ? 'link' : 'disabled';\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLSpanElement>) => {\n        if (!onClick || isCurrent) {\n          return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          event.currentTarget.click();\n        }\n      },\n      [isCurrent, onClick]\n    );\n\n    const content = (\n      <>\n        {icon && <span className={breadcrumbIconStyle}>{icon}</span>}\n        <span className={breadcrumbLabelStyle}>{label}</span>\n      </>\n    );\n\n    let inner: React.ReactElement;\n\n    if (isCurrent) {\n      inner = (\n        <span\n          className={breadcrumbContentRecipe({ state })}\n          aria-current=\"page\"\n        >\n          {content}\n        </span>\n      );\n    } else if (href) {\n      inner = (\n        <a className={breadcrumbContentRecipe({ state })} href={href}>\n          {content}\n        </a>\n      );\n    } else if (onClick) {\n      inner = (\n        <span\n          className={breadcrumbContentRecipe({ state })}\n          role=\"button\"\n          tabIndex={0}\n          onClick={onClick}\n          onKeyDown={handleKeyDown}\n        >\n          {content}\n        </span>\n      );\n    } else {\n      inner = (\n        <span className={breadcrumbContentRecipe({ state })}>{content}</span>\n      );\n    }\n\n    return (\n      <li\n        ref={ref as React.Ref<HTMLLIElement>}\n        className={cx(breadcrumbItemStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {fullLabel ? (\n          <Tooltip title={fullLabel} delay={300}>\n            {inner}\n          </Tooltip>\n        ) : (\n          inner\n        )}\n        {endContent}\n      </li>\n    );\n  }\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAeH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAuBJ;AAGF;;"}
+{"version":3,"file":"BreadcrumbItem.js","sources":["src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { Tooltip } from '@/components/primitives';\nimport { cx } from '@/utils/cx';\n\nimport {\n  breadcrumbContentRecipe,\n  breadcrumbIconStyle,\n  breadcrumbItemStyle,\n  breadcrumbLabelStyle,\n} from './Breadcrumbs.css';\n\nimport type { BreadcrumbItemProps } from './Breadcrumbs.types';\n\nfunction getTruncatedLabel(children: React.ReactNode, maxLength?: number) {\n  if (\n    typeof children !== 'string' ||\n    !maxLength ||\n    children.length <= maxLength\n  ) {\n    return { label: children, fullLabel: undefined };\n  }\n\n  const endIndex = Math.max(0, maxLength - 1);\n  return {\n    label: `${children.slice(0, endIndex)}…`,\n    fullLabel: children,\n  };\n}\n\n/**\n * Individual segment in a breadcrumb trail.\n *\n * Renders as a link, clickable span for client routing, current-page text, or\n * disabled text depending on the props provided.\n *\n * @example\n * ```tsx\n * <BreadcrumbItem href=\"/components\">Components</BreadcrumbItem>\n * <BreadcrumbItem isCurrent>Button</BreadcrumbItem>\n * ```\n */\nexport const BreadcrumbItem = /*#__PURE__*/ React.memo<BreadcrumbItemProps>(\n  ({\n    href,\n    onClick,\n    isCurrent = false,\n    icon,\n    maxLength,\n    endContent,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const { label, fullLabel } = getTruncatedLabel(children, maxLength);\n    const isInteractive =\n      (href !== undefined || onClick !== undefined) && !isCurrent;\n    const state = isCurrent ? 'current' : isInteractive ? 'link' : 'disabled';\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLSpanElement>) => {\n        if (!onClick || isCurrent) {\n          return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          event.currentTarget.click();\n        }\n      },\n      [isCurrent, onClick]\n    );\n\n    const content = (\n      <>\n        {icon && <span className={breadcrumbIconStyle}>{icon}</span>}\n        <span className={breadcrumbLabelStyle}>{label}</span>\n      </>\n    );\n\n    let inner: React.ReactElement;\n\n    if (isCurrent) {\n      inner = (\n        <span\n          className={breadcrumbContentRecipe({ state })}\n          aria-current=\"page\"\n        >\n          {content}\n        </span>\n      );\n    } else if (href) {\n      inner = (\n        <a className={breadcrumbContentRecipe({ state })} href={href}>\n          {content}\n        </a>\n      );\n    } else if (onClick) {\n      inner = (\n        <span\n          className={breadcrumbContentRecipe({ state })}\n          role=\"button\"\n          tabIndex={0}\n          onClick={onClick}\n          onKeyDown={handleKeyDown}\n        >\n          {content}\n        </span>\n      );\n    } else {\n      inner = (\n        <span className={breadcrumbContentRecipe({ state })}>{content}</span>\n      );\n    }\n\n    return (\n      <li\n        ref={ref as React.Ref<HTMLLIElement>}\n        className={cx(breadcrumbItemStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {fullLabel ? (\n          <Tooltip title={fullLabel} delay={300}>\n            {inner}\n          </Tooltip>\n        ) : (\n          inner\n        )}\n        {endContent}\n      </li>\n    );\n  }\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAeH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAuBJ;AAGF;;"}

package/dist/esm/components/navigation/PathBar/PathBarSiblingMenu.js

@@ -102,6 +102,7 @@ import '../../primitives/Checkbox/Checkbox.js';
 import '../../primitives/Checkbox/CheckboxGroup.js';
 import '../../primitives/Code/Code.js';
 import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/EditableText/EditableText.js';
 import '../../primitives/HoverCard/HoverCard.js';
 import '../../primitives/Icon/Icon.js';
 import { IconButton } from '../../primitives/IconButton/IconButton.js';

package/dist/esm/components/navigation/PathBar/PathBarSiblingMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PathBarSiblingMenu.js","sources":["src/components/navigation/PathBar/PathBarSiblingMenu.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { ChevronDownIcon } from '@/components/Icons';\nimport { Menu } from '@/components/navigation/Menu';\nimport { IconButton } from '@/components/primitives';\n\nimport { pathBarSiblingTriggerStyle } from './PathBar.css';\nimport { resolveSiblings } from './pathUtils';\n\nimport type { PathBarSize, PathSegment } from './PathBar.types';\nimport type { ResolvedPathSegment } from './pathUtils';\n\ninterface PathBarSiblingMenuProps {\n  /** The resolved segment this dropdown hangs off — the sibling anchor. */\n  segment: ResolvedPathSegment;\n  /** Index of `segment` in the trail; forwarded to `onSelect`. */\n  index: number;\n  /** Returns the raw sibling entries for the segment. */\n  getSiblings: (\n    segment: PathSegment,\n    index: number\n  ) => ReadonlyArray<string | PathSegment>;\n  /** Called with the chosen sibling (already resolved to a concrete value). */\n  onSelect: (index: number, sibling: ResolvedPathSegment) => void;\n  /** Scale shared with the rest of the bar — sizes the caret button and icon. */\n  size: PathBarSize;\n}\n\n/**\n * Trailing caret + dropdown for a single crumb's siblings (the VS Code path-bar\n * affordance). Rendered as a crumb's `endContent`, so it mounts only for crumbs\n * Breadcrumbs actually renders — `getSiblings` runs lazily, never for segments\n * hidden behind the overflow ellipsis. Renders nothing when the segment has no\n * siblings.\n */\nexport const PathBarSiblingMenu = ({\n  segment,\n  index,\n  getSiblings,\n  onSelect,\n  size,\n}: PathBarSiblingMenuProps): React.ReactElement | null => {\n  const siblings = resolveSiblings(segment, getSiblings(segment, index));\n  if (siblings.length === 0) {\n    return null;\n  }\n\n  return (\n    <Menu>\n      <Menu.Trigger\n        render={\n          <IconButton\n            aria-label={`Browse ${segment.label} siblings`}\n            size={size}\n            radius=\"sm\"\n            className={pathBarSiblingTriggerStyle}\n          >\n            <ChevronDownIcon size={size} decorative />\n          </IconButton>\n        }\n      />\n      <Menu.Content>\n        {siblings.map((sibling, siblingIndex) => (\n          <Menu.Item\n            key={`${sibling.value}-${siblingIndex}`}\n            icon={sibling.icon}\n            onSelect={() => {\n              onSelect(index, sibling);\n            }}\n          >\n            {sibling.label}\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu>\n  );\n};\n\nPathBarSiblingMenu.displayName = 'PathBarSiblingMenu';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;AAMG;AACI;AAOL;AACA;AACE;;AAGF;AAoBY;AACF;AAQZ;AAEA;;"}
+{"version":3,"file":"PathBarSiblingMenu.js","sources":["src/components/navigation/PathBar/PathBarSiblingMenu.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { ChevronDownIcon } from '@/components/Icons';\nimport { Menu } from '@/components/navigation/Menu';\nimport { IconButton } from '@/components/primitives';\n\nimport { pathBarSiblingTriggerStyle } from './PathBar.css';\nimport { resolveSiblings } from './pathUtils';\n\nimport type { PathBarSize, PathSegment } from './PathBar.types';\nimport type { ResolvedPathSegment } from './pathUtils';\n\ninterface PathBarSiblingMenuProps {\n  /** The resolved segment this dropdown hangs off — the sibling anchor. */\n  segment: ResolvedPathSegment;\n  /** Index of `segment` in the trail; forwarded to `onSelect`. */\n  index: number;\n  /** Returns the raw sibling entries for the segment. */\n  getSiblings: (\n    segment: PathSegment,\n    index: number\n  ) => ReadonlyArray<string | PathSegment>;\n  /** Called with the chosen sibling (already resolved to a concrete value). */\n  onSelect: (index: number, sibling: ResolvedPathSegment) => void;\n  /** Scale shared with the rest of the bar — sizes the caret button and icon. */\n  size: PathBarSize;\n}\n\n/**\n * Trailing caret + dropdown for a single crumb's siblings (the VS Code path-bar\n * affordance). Rendered as a crumb's `endContent`, so it mounts only for crumbs\n * Breadcrumbs actually renders — `getSiblings` runs lazily, never for segments\n * hidden behind the overflow ellipsis. Renders nothing when the segment has no\n * siblings.\n */\nexport const PathBarSiblingMenu = ({\n  segment,\n  index,\n  getSiblings,\n  onSelect,\n  size,\n}: PathBarSiblingMenuProps): React.ReactElement | null => {\n  const siblings = resolveSiblings(segment, getSiblings(segment, index));\n  if (siblings.length === 0) {\n    return null;\n  }\n\n  return (\n    <Menu>\n      <Menu.Trigger\n        render={\n          <IconButton\n            aria-label={`Browse ${segment.label} siblings`}\n            size={size}\n            radius=\"sm\"\n            className={pathBarSiblingTriggerStyle}\n          >\n            <ChevronDownIcon size={size} decorative />\n          </IconButton>\n        }\n      />\n      <Menu.Content>\n        {siblings.map((sibling, siblingIndex) => (\n          <Menu.Item\n            key={`${sibling.value}-${siblingIndex}`}\n            icon={sibling.icon}\n            onSelect={() => {\n              onSelect(index, sibling);\n            }}\n          >\n            {sibling.label}\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu>\n  );\n};\n\nPathBarSiblingMenu.displayName = 'PathBarSiblingMenu';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;AAMG;AACI;AAOL;AACA;AACE;;AAGF;AAoBY;AACF;AAQZ;AAEA;;"}

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

@@ -0,0 +1,11 @@
+import './../../../assets/src/components/primitives/EditableText/EditableText.css.ts.vanilla-CrVGgD19.css';
+
+var displayDisabledStyle = 'EditableText_displayDisabledStyle__d2an012';
+var displayReadOnlyStyle = 'EditableText_displayReadOnlyStyle__d2an011';
+var displayStyle = 'EditableText_displayStyle__d2an010';
+var editWrapStyle = 'EditableText_editWrapStyle__d2an013';
+var inputStyle = 'EditableText_inputStyle__d2an016 EditableText_sharedCell__d2an014';
+var sizerStyle = 'EditableText_sizerStyle__d2an015 EditableText_sharedCell__d2an014';
+
+export { displayDisabledStyle, displayReadOnlyStyle, displayStyle, editWrapStyle, inputStyle, sizerStyle };
+//# sourceMappingURL=EditableText.css.js.map

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

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

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

@@ -0,0 +1,208 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
+import { Text } from '../Text/Text.js';
+import { textRecipe } from '../Text/Text.css.js';
+import '../../../utils/devWarn.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.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 { sizerStyle, inputStyle, editWrapStyle, displayDisabledStyle, displayReadOnlyStyle, displayStyle } from './EditableText.css.js';
+import { resolveEditableTextLabels } from './editableTextLabels.js';
+
+/**
+ * Text that looks like `<Text>` but turns into an inline editor when the user
+ * activates it — the editor-UI pattern for renaming layers, nodes, assets, and
+ * scene objects in place.
+ *
+ * The idle state renders a real `<Text>` (so it inherits every typography prop),
+ * and the editing state renders a chrome-less `<input>` that shares the exact
+ * same typography recipe, so the swap is visually seamless. The edit field
+ * auto-sizes to its content via a hidden sizer — no measurement effects.
+ *
+ * Editing commits on `Enter` (and on blur when `submitOnBlur`), cancels on
+ * `Escape`. `onChange` fires on commit only, with the new value.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled — click the text to rename in place
+ * <EditableText defaultValue="Untitled Layer" onChange={setName} />
+ *
+ * // Controlled, heading-styled, double-click to edit (rename convention)
+ * <EditableText
+ *   variant="heading"
+ *   value={name}
+ *   onChange={setName}
+ *   activationMode="double"
+ *   placeholder="Name this node"
+ * />
+ * ```
+ */
+const EditableText = ({ value, defaultValue, onChange, placeholder, as = 'span', variant = 'body', size, weight, color = 'primary', lineHeight, align, truncate = false, mono = false, activationMode = 'single', disabled = false, readOnly = false, selectOnEdit = true, submitOnBlur = true, maxLength, labels: labelsProp, 'aria-label': ariaLabel, onEditStart, onEditEnd, onKeyDown, className, style, testId, ref, }) => {
+    const [currentValue, setValue] = useControlledState({
+        value,
+        defaultValue,
+        onChange,
+        fallback: '',
+    });
+    const [isEditing, setIsEditing] = useState(false);
+    const [draft, setDraft] = useState('');
+    const displayRef = useRef(null);
+    const inputRef = useRef(null);
+    // When an edit ends via keyboard we return focus to the display; a blur-driven
+    // end must NOT steal focus back (the user just clicked somewhere else).
+    const refocusDisplayRef = useRef(false);
+    // Guards the input's blur handler from firing a second end after Enter/Escape
+    // already tore the input down.
+    const endingRef = useRef(false);
+    const currentValueRef = useLatest(currentValue);
+    const draftRef = useLatest(draft);
+    const submitOnBlurRef = useLatest(submitOnBlur);
+    const selectOnEditRef = useLatest(selectOnEdit);
+    const onEditStartRef = useLatest(onEditStart);
+    const onEditEndRef = useLatest(onEditEnd);
+    const onKeyDownRef = useLatest(onKeyDown);
+    const labels = useMemo(() => resolveEditableTextLabels(labelsProp), [labelsProp]);
+    const startEditing = useCallback(() => {
+        if (disabled || readOnly)
+            return;
+        endingRef.current = false;
+        setDraft(currentValueRef.current);
+        setIsEditing(true);
+        onEditStartRef.current?.();
+    }, [disabled, readOnly, currentValueRef, onEditStartRef]);
+    const endEditing = useCallback((reason, refocus) => {
+        endingRef.current = true;
+        refocusDisplayRef.current = refocus;
+        setIsEditing(false);
+        onEditEndRef.current?.(reason);
+    }, [onEditEndRef]);
+    const commit = useCallback((refocus) => {
+        if (endingRef.current)
+            return;
+        const next = draftRef.current;
+        if (next !== currentValueRef.current) {
+            setValue(next);
+        }
+        endEditing('commit', refocus);
+    }, [draftRef, currentValueRef, setValue, endEditing]);
+    const cancel = useCallback((refocus) => {
+        if (endingRef.current)
+            return;
+        endEditing('cancel', refocus);
+    }, [endEditing]);
+    useImperativeHandle(ref, () => ({
+        edit: startEditing,
+        commit: () => {
+            commit(false);
+        },
+        cancel: () => {
+            cancel(false);
+        },
+        focus: () => {
+            (inputRef.current ?? displayRef.current)?.focus();
+        },
+        isEditing: () => isEditing,
+        getElement: () => inputRef.current ?? displayRef.current,
+    }), [startEditing, commit, cancel, isEditing]);
+    // Focus (and optionally select) the input the moment it mounts, without an
+    // effect. Stable identity, so it fires once per edit session, not per render.
+    const focusInput = useCallback((node) => {
+        if (node) {
+            node.focus();
+            if (selectOnEditRef.current)
+                node.select();
+        }
+    }, [selectOnEditRef]);
+    const mergedInputRef = useMergedRef(inputRef, focusInput);
+    // Return focus to the display element after a keyboard-driven edit end.
+    const refocusDisplay = useCallback((node) => {
+        if (node && refocusDisplayRef.current) {
+            node.focus();
+            refocusDisplayRef.current = false;
+        }
+    }, []);
+    const mergedDisplayRef = useMergedRef(displayRef, refocusDisplay);
+    const handleDisplayKeyDown = useCallback((event) => {
+        if (event.key === 'Enter' || event.key === 'F2') {
+            event.preventDefault();
+            startEditing();
+        }
+    }, [startEditing]);
+    const handleInputKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commit(true);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel(true);
+        }
+        onKeyDownRef.current?.(event);
+    }, [commit, cancel, onKeyDownRef]);
+    const handleInputBlur = useCallback(() => {
+        if (submitOnBlurRef.current) {
+            commit(false);
+        }
+        else {
+            cancel(false);
+        }
+    }, [commit, cancel, submitOnBlurRef]);
+    // Recipe args mirror Text's own gating so the input matches the display
+    // typography exactly.
+    const isInherit = variant === 'inherit';
+    const sizeVariant = size && !isInherit ? size : undefined;
+    const weightVariant = weight && !isInherit ? weight : undefined;
+    const lineHeightVariant = lineHeight && !isInherit ? lineHeight : undefined;
+    const useMono = mono || variant === 'code' ? true : undefined;
+    if (isEditing) {
+        const editTextClass = textRecipe({
+            variant,
+            color,
+            size: sizeVariant,
+            weight: weightVariant,
+            lineHeight: lineHeightVariant,
+            align,
+            mono: useMono,
+        });
+        return (
+        // The wrapper only groups the sizer + input; the input owns all
+        // interactivity, so the wrapper needs no role or key handler.
+        jsxs("span", { className: cx(editWrapStyle, className), style: style, "data-editing": "true", children: [jsx("span", { "aria-hidden": "true", className: cx(editTextClass, sizerStyle), children: `${draft.length > 0 ? draft : (placeholder ?? '')} ` }), jsx("input", { ref: mergedInputRef, type: "text", className: cx(editTextClass, inputStyle), value: draft, placeholder: placeholder, maxLength: maxLength, "aria-label": ariaLabel ?? labels.editLabel, onChange: event => {
+                        setDraft(event.target.value);
+                    }, onKeyDown: handleInputKeyDown, onBlur: handleInputBlur, onClick: event => {
+                        // Don't let the click bubble to a parent row/select handler.
+                        event.stopPropagation();
+                    }, "data-testid": testId })] }));
+    }
+    const hasValue = currentValue.length > 0;
+    const showingPlaceholder = !hasValue && placeholder != null && placeholder.length > 0;
+    const displayContent = hasValue
+        ? currentValue
+        : showingPlaceholder
+            ? placeholder
+            : // Keep a clickable line box when there is nothing to show.
+                ' ';
+    const displayColor = disabled
+        ? 'disabled'
+        : showingPlaceholder
+            ? 'muted'
+            : color;
+    const interactive = !disabled && !readOnly;
+    // When the value is empty there is no meaningful text content to name the
+    // control, so fall back to the placeholder or the edit label.
+    const resolvedAriaLabel = ariaLabel ?? (hasValue ? undefined : (placeholder ?? labels.editLabel));
+    return (jsx(Text, { as: as, variant: variant, size: size, weight: weight, color: displayColor, lineHeight: lineHeight, align: align, truncate: truncate, mono: mono, ref: mergedDisplayRef, className: cx(displayStyle, !interactive &&
+            (disabled ? displayDisabledStyle : displayReadOnlyStyle), className), style: style, role: interactive ? 'button' : undefined, tabIndex: interactive ? 0 : undefined, "aria-label": resolvedAriaLabel, "aria-disabled": disabled || undefined, onClick: interactive && activationMode === 'single' ? startEditing : undefined, onDoubleClick: interactive && activationMode === 'double' ? startEditing : undefined, onKeyDown: interactive ? handleDisplayKeyDown : undefined, testId: testId, children: displayContent }));
+};
+EditableText.displayName = 'EditableText';
+
+export { EditableText };
+//# sourceMappingURL=EditableText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.js","sources":["src/components/primitives/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Text } from '@/components/primitives/Text';\nimport { textRecipe } from '@/components/primitives/Text/Text.css';\nimport { useControlledState, useLatest, useMergedRef } from '@/hooks';\nimport { cx } from '@/utils/cx';\n\nimport {\n  displayStyle,\n  displayReadOnlyStyle,\n  displayDisabledStyle,\n  editWrapStyle,\n  sizerStyle,\n  inputStyle,\n} from './EditableText.css';\nimport { resolveEditableTextLabels } from './editableTextLabels';\n\nimport type {\n  EditableTextEndReason,\n  EditableTextHandle,\n  EditableTextProps,\n} from './EditableText.types';\n\n/**\n * Text that looks like `<Text>` but turns into an inline editor when the user\n * activates it — the editor-UI pattern for renaming layers, nodes, assets, and\n * scene objects in place.\n *\n * The idle state renders a real `<Text>` (so it inherits every typography prop),\n * and the editing state renders a chrome-less `<input>` that shares the exact\n * same typography recipe, so the swap is visually seamless. The edit field\n * auto-sizes to its content via a hidden sizer — no measurement effects.\n *\n * Editing commits on `Enter` (and on blur when `submitOnBlur`), cancels on\n * `Escape`. `onChange` fires on commit only, with the new value.\n *\n * @example\n * ```tsx\n * // Uncontrolled — click the text to rename in place\n * <EditableText defaultValue=\"Untitled Layer\" onChange={setName} />\n *\n * // Controlled, heading-styled, double-click to edit (rename convention)\n * <EditableText\n *   variant=\"heading\"\n *   value={name}\n *   onChange={setName}\n *   activationMode=\"double\"\n *   placeholder=\"Name this node\"\n * />\n * ```\n */\nexport const EditableText = ({\n  value,\n  defaultValue,\n  onChange,\n  placeholder,\n  as = 'span',\n  variant = 'body',\n  size,\n  weight,\n  color = 'primary',\n  lineHeight,\n  align,\n  truncate = false,\n  mono = false,\n  activationMode = 'single',\n  disabled = false,\n  readOnly = false,\n  selectOnEdit = true,\n  submitOnBlur = true,\n  maxLength,\n  labels: labelsProp,\n  'aria-label': ariaLabel,\n  onEditStart,\n  onEditEnd,\n  onKeyDown,\n  className,\n  style,\n  testId,\n  ref,\n}: EditableTextProps): React.ReactElement => {\n  const [currentValue, setValue] = useControlledState({\n    value,\n    defaultValue,\n    onChange,\n    fallback: '',\n  });\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [draft, setDraft] = useState('');\n\n  const displayRef = useRef<HTMLElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  // When an edit ends via keyboard we return focus to the display; a blur-driven\n  // end must NOT steal focus back (the user just clicked somewhere else).\n  const refocusDisplayRef = useRef(false);\n  // Guards the input's blur handler from firing a second end after Enter/Escape\n  // already tore the input down.\n  const endingRef = useRef(false);\n\n  const currentValueRef = useLatest(currentValue);\n  const draftRef = useLatest(draft);\n  const submitOnBlurRef = useLatest(submitOnBlur);\n  const selectOnEditRef = useLatest(selectOnEdit);\n  const onEditStartRef = useLatest(onEditStart);\n  const onEditEndRef = useLatest(onEditEnd);\n  const onKeyDownRef = useLatest(onKeyDown);\n\n  const labels = useMemo(\n    () => resolveEditableTextLabels(labelsProp),\n    [labelsProp]\n  );\n\n  const startEditing = useCallback(() => {\n    if (disabled || readOnly) return;\n    endingRef.current = false;\n    setDraft(currentValueRef.current);\n    setIsEditing(true);\n    onEditStartRef.current?.();\n  }, [disabled, readOnly, currentValueRef, onEditStartRef]);\n\n  const endEditing = useCallback(\n    (reason: EditableTextEndReason, refocus: boolean) => {\n      endingRef.current = true;\n      refocusDisplayRef.current = refocus;\n      setIsEditing(false);\n      onEditEndRef.current?.(reason);\n    },\n    [onEditEndRef]\n  );\n\n  const commit = useCallback(\n    (refocus: boolean) => {\n      if (endingRef.current) return;\n      const next = draftRef.current;\n      if (next !== currentValueRef.current) {\n        setValue(next);\n      }\n      endEditing('commit', refocus);\n    },\n    [draftRef, currentValueRef, setValue, endEditing]\n  );\n\n  const cancel = useCallback(\n    (refocus: boolean) => {\n      if (endingRef.current) return;\n      endEditing('cancel', refocus);\n    },\n    [endEditing]\n  );\n\n  useImperativeHandle(\n    ref,\n    (): EditableTextHandle => ({\n      edit: startEditing,\n      commit: () => {\n        commit(false);\n      },\n      cancel: () => {\n        cancel(false);\n      },\n      focus: () => {\n        (inputRef.current ?? displayRef.current)?.focus();\n      },\n      isEditing: () => isEditing,\n      getElement: () => inputRef.current ?? displayRef.current,\n    }),\n    [startEditing, commit, cancel, isEditing]\n  );\n\n  // Focus (and optionally select) the input the moment it mounts, without an\n  // effect. Stable identity, so it fires once per edit session, not per render.\n  const focusInput = useCallback(\n    (node: HTMLInputElement | null) => {\n      if (node) {\n        node.focus();\n        if (selectOnEditRef.current) node.select();\n      }\n    },\n    [selectOnEditRef]\n  );\n  const mergedInputRef = useMergedRef(inputRef, focusInput);\n\n  // Return focus to the display element after a keyboard-driven edit end.\n  const refocusDisplay = useCallback((node: HTMLElement | null) => {\n    if (node && refocusDisplayRef.current) {\n      node.focus();\n      refocusDisplayRef.current = false;\n    }\n  }, []);\n  const mergedDisplayRef = useMergedRef(displayRef, refocusDisplay);\n\n  const handleDisplayKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Enter' || event.key === 'F2') {\n        event.preventDefault();\n        startEditing();\n      }\n    },\n    [startEditing]\n  );\n\n  const handleInputKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        commit(true);\n      } else if (event.key === 'Escape') {\n        event.preventDefault();\n        cancel(true);\n      }\n      onKeyDownRef.current?.(event);\n    },\n    [commit, cancel, onKeyDownRef]\n  );\n\n  const handleInputBlur = useCallback(() => {\n    if (submitOnBlurRef.current) {\n      commit(false);\n    } else {\n      cancel(false);\n    }\n  }, [commit, cancel, submitOnBlurRef]);\n\n  // Recipe args mirror Text's own gating so the input matches the display\n  // typography exactly.\n  const isInherit = variant === 'inherit';\n  const sizeVariant = size && !isInherit ? size : undefined;\n  const weightVariant = weight && !isInherit ? weight : undefined;\n  const lineHeightVariant = lineHeight && !isInherit ? lineHeight : undefined;\n  const useMono = mono || variant === 'code' ? true : undefined;\n\n  if (isEditing) {\n    const editTextClass = textRecipe({\n      variant,\n      color,\n      size: sizeVariant,\n      weight: weightVariant,\n      lineHeight: lineHeightVariant,\n      align,\n      mono: useMono,\n    });\n\n    return (\n      // The wrapper only groups the sizer + input; the input owns all\n      // interactivity, so the wrapper needs no role or key handler.\n      <span\n        className={cx(editWrapStyle, className)}\n        style={style}\n        data-editing=\"true\"\n      >\n        <span aria-hidden=\"true\" className={cx(editTextClass, sizerStyle)}>\n          {`${draft.length > 0 ? draft : (placeholder ?? '')} `}\n        </span>\n        <input\n          ref={mergedInputRef}\n          type=\"text\"\n          className={cx(editTextClass, inputStyle)}\n          value={draft}\n          placeholder={placeholder}\n          maxLength={maxLength}\n          aria-label={ariaLabel ?? labels.editLabel}\n          onChange={event => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={handleInputKeyDown}\n          onBlur={handleInputBlur}\n          onClick={event => {\n            // Don't let the click bubble to a parent row/select handler.\n            event.stopPropagation();\n          }}\n          data-testid={testId}\n        />\n      </span>\n    );\n  }\n\n  const hasValue = currentValue.length > 0;\n  const showingPlaceholder =\n    !hasValue && placeholder != null && placeholder.length > 0;\n  const displayContent = hasValue\n    ? currentValue\n    : showingPlaceholder\n      ? placeholder\n      : // Keep a clickable line box when there is nothing to show.\n        ' ';\n\n  const displayColor = disabled\n    ? 'disabled'\n    : showingPlaceholder\n      ? 'muted'\n      : color;\n\n  const interactive = !disabled && !readOnly;\n\n  // When the value is empty there is no meaningful text content to name the\n  // control, so fall back to the placeholder or the edit label.\n  const resolvedAriaLabel =\n    ariaLabel ?? (hasValue ? undefined : (placeholder ?? labels.editLabel));\n\n  return (\n    <Text\n      as={as}\n      variant={variant}\n      size={size}\n      weight={weight}\n      color={displayColor}\n      lineHeight={lineHeight}\n      align={align}\n      truncate={truncate}\n      mono={mono}\n      ref={mergedDisplayRef}\n      className={cx(\n        displayStyle,\n        !interactive &&\n          (disabled ? displayDisabledStyle : displayReadOnlyStyle),\n        className\n      )}\n      style={style}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-label={resolvedAriaLabel}\n      aria-disabled={disabled || undefined}\n      onClick={\n        interactive && activationMode === 'single' ? startEditing : undefined\n      }\n      onDoubleClick={\n        interactive && activationMode === 'double' ? startEditing : undefined\n      }\n      onKeyDown={interactive ? handleDisplayKeyDown : undefined}\n      testId={testId}\n    >\n      {displayContent}\n    </Text>\n  );\n};\n\nEditableText.displayName = 'EditableText';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;AACI;AA8BL;;;;AAIE;AACD;;;AAKD;AACA;;;AAGA;;;AAGA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAKA;;;AAEE;AACA;;AAEA;;;AAKE;AACA;;AAEA;AACF;AAIF;;;AAGI;AACA;;;AAGA;;AAKJ;;;AAGI;AACF;AAIF;AAGI;;;;;;;;;;AAUA;;;;;AAQJ;;;;;;AAME;;;AAMF;AACE;;AAEE;;;;AAKJ;AAEI;;AAEE;;AAEJ;AAIF;AAEI;;;;AAGO;;;;AAIP;;AAKJ;AACE;;;;;;;;;AASF;AACA;AACA;AACA;AACA;;;;;AAMI;AACA;AACA;;AAEA;AACD;;;;AAKC;AAiBM;AACF;;;AAMA;;AAOR;AACA;;AAGE;AACA;AACE;AACA;AACE;;AAGJ;AACA;AACE;;AAGJ;;;;;;AA0CF;AAEA;;"}

package/dist/esm/components/primitives/EditableText/editableTextLabels.js

@@ -0,0 +1,16 @@
+/**
+ * English defaults for every user-facing string EditableText renders. Override
+ * any subset by passing `labels` to `<EditableText>`; the rest fall back here.
+ */
+const DEFAULT_EDITABLE_TEXT_LABELS = {
+    editLabel: 'Edit text',
+};
+/** Merge a partial `labels` override onto the English defaults. */
+function resolveEditableTextLabels(overrides) {
+    return overrides
+        ? { ...DEFAULT_EDITABLE_TEXT_LABELS, ...overrides }
+        : DEFAULT_EDITABLE_TEXT_LABELS;
+}
+
+export { DEFAULT_EDITABLE_TEXT_LABELS, resolveEditableTextLabels };
+//# sourceMappingURL=editableTextLabels.js.map

package/dist/esm/components/primitives/EditableText/editableTextLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editableTextLabels.js","sources":["src/components/primitives/EditableText/editableTextLabels.ts"],"sourcesContent":["import type { EditableTextLabels } from './EditableText.types';\n\n/**\n * English defaults for every user-facing string EditableText renders. Override\n * any subset by passing `labels` to `<EditableText>`; the rest fall back here.\n */\nexport const DEFAULT_EDITABLE_TEXT_LABELS: EditableTextLabels = {\n  editLabel: 'Edit text',\n};\n\n/** Merge a partial `labels` override onto the English defaults. */\nexport function resolveEditableTextLabels(\n  overrides: Partial<EditableTextLabels> | undefined\n): EditableTextLabels {\n  return overrides\n    ? { ...DEFAULT_EDITABLE_TEXT_LABELS, ...overrides }\n    : DEFAULT_EDITABLE_TEXT_LABELS;\n}\n"],"names":[],"mappings":"AAEA;;;AAGG;AACI,MAAM,4BAA4B,GAAuB;AAC9D,IAAA,SAAS,EAAE,WAAW;;AAGxB;AACM,SAAU,yBAAyB,CACvC,SAAkD,EAAA;AAElD,IAAA,OAAO;AACL,UAAE,EAAE,GAAG,4BAA4B,EAAE,GAAG,SAAS;UAC/C,4BAA4B;AAClC;;;;"}

package/dist/esm/index.js

@@ -32,6 +32,8 @@ export { Checkbox } from './components/primitives/Checkbox/Checkbox.js';
 export { CheckboxGroup } from './components/primitives/Checkbox/CheckboxGroup.js';
 export { Code } from './components/primitives/Code/Code.js';
 export { Collapsible } from './components/primitives/Collapsible/Collapsible.js';
+export { EditableText } from './components/primitives/EditableText/EditableText.js';
+export { DEFAULT_EDITABLE_TEXT_LABELS, resolveEditableTextLabels } from './components/primitives/EditableText/editableTextLabels.js';
 export { HoverCard } from './components/primitives/HoverCard/HoverCard.js';
 export { Icon } from './components/primitives/Icon/Icon.js';
 export { IconButton } from './components/primitives/IconButton/IconButton.js';

package/dist/esm/index.js.map

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

package/dist/tokens/tokens.dark.css

@@ -1,4 +1,4 @@
-/* Entangle UI dark theme — token export (v0.12.0) */
+/* Entangle UI dark theme — token export (v0.13.0) */
 /* Generated by scripts/export-tokens.ts — do not edit by hand. */
 :root {
   --etui-color-accent-error: #f44336;

package/dist/tokens/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://design-tokens.org/schema.json",
   "$description": "Entangle UI design tokens",
-  "$version": "0.12.0",
+  "$version": "0.13.0",
   "themes": {
     "dark": {
       "colors": {

package/dist/tokens/tokens.light.css

@@ -1,4 +1,4 @@
-/* Entangle UI light theme — token export (v0.12.0) */
+/* Entangle UI light theme — token export (v0.13.0) */
 /* Generated by scripts/export-tokens.ts — do not edit by hand. */
 .etui-theme-light {
   --etui-color-accent-error: #d32f2f;

package/dist/types/components/editor/ViewportGizmo/ViewportGizmo.types.d.ts

@@ -17,11 +17,17 @@ interface GizmoOrientation {
 /**
  * Orbital rotation delta during a drag gesture.
  * The app applies this to its camera orbit controller.
+ *
+ * Sign convention (before any `invertYaw` / `invertPitch`): dragging the
+ * pointer right — or pressing `ArrowRight` — emits a positive `deltaYaw`;
+ * dragging up — or `ArrowUp` — emits a positive `deltaPitch`. Which way the
+ * camera actually turns is the consumer's choice; flip it with the
+ * `invertYaw` / `invertPitch` props if the motion feels mirrored.
  */
 interface OrbitDelta {
-    /** Yaw change in degrees (horizontal drag) */
+    /** Yaw change in degrees. Positive = pointer dragged right / ArrowRight. */
     deltaYaw: number;
-    /** Pitch change in degrees (vertical drag) */
+    /** Pitch change in degrees. Positive = pointer dragged up / ArrowUp. */
     deltaPitch: number;
 }
 /**
@@ -109,7 +115,24 @@ interface ViewportGizmoBaseProps extends Omit<BaseComponent, 'onChange'> {
      * @default true
      */
     constrainPitch?: boolean;
-    /** Called continuously while the user drags to orbit. */
+    /**
+     * Invert the horizontal orbit direction. When true, the emitted `deltaYaw`
+     * sign is flipped, so the consumer's camera turns the opposite way for the
+     * same drag / arrow-key gesture. Use this when the orbit feels mirrored
+     * relative to your camera controller (e.g. Three.js OrbitControls).
+     * @default false
+     */
+    invertYaw?: boolean;
+    /**
+     * Invert the vertical orbit direction. When true, the emitted `deltaPitch`
+     * sign is flipped (dragging up turns the camera down).
+     * @default false
+     */
+    invertPitch?: boolean;
+    /**
+     * Called continuously while the user drags to orbit.
+     * See {@link OrbitDelta} for the delta sign convention.
+     */
     onOrbit?: (delta: OrbitDelta) => void;
     /** Called when the user finishes an orbit drag. */
     onOrbitEnd?: (finalOrientation: GizmoOrientation) => void;

package/dist/types/components/primitives/EditableText/EditableText.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { EditableTextProps } from './EditableText.types.js';
+
+/**
+ * Text that looks like `<Text>` but turns into an inline editor when the user
+ * activates it — the editor-UI pattern for renaming layers, nodes, assets, and
+ * scene objects in place.
+ *
+ * The idle state renders a real `<Text>` (so it inherits every typography prop),
+ * and the editing state renders a chrome-less `<input>` that shares the exact
+ * same typography recipe, so the swap is visually seamless. The edit field
+ * auto-sizes to its content via a hidden sizer — no measurement effects.
+ *
+ * Editing commits on `Enter` (and on blur when `submitOnBlur`), cancels on
+ * `Escape`. `onChange` fires on commit only, with the new value.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled — click the text to rename in place
+ * <EditableText defaultValue="Untitled Layer" onChange={setName} />
+ *
+ * // Controlled, heading-styled, double-click to edit (rename convention)
+ * <EditableText
+ *   variant="heading"
+ *   value={name}
+ *   onChange={setName}
+ *   activationMode="double"
+ *   placeholder="Name this node"
+ * />
+ * ```
+ */
+declare const EditableText: {
+    ({ value, defaultValue, onChange, placeholder, as, variant, size, weight, color, lineHeight, align, truncate, mono, activationMode, disabled, readOnly, selectOnEdit, submitOnBlur, maxLength, labels: labelsProp, "aria-label": ariaLabel, onEditStart, onEditEnd, onKeyDown, className, style, testId, ref, }: EditableTextProps): React.ReactElement;
+    displayName: string;
+};
+
+export { EditableText };

package/dist/types/components/primitives/EditableText/EditableText.types.d.ts

@@ -0,0 +1,158 @@
+import { TextElement, TextVariant, TextSize, TextWeight, TextColor, TextLineHeight, TextAlign } from '../Text/Text.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+
+/**
+ * How a pointer starts an edit session.
+ *
+ * Keyboard activation (Enter / F2 while the display is focused) always works,
+ * independent of this setting.
+ * - `single`: a single click on the text starts editing.
+ * - `double`: a double click starts editing; single clicks are left free for
+ *   selection or row activation (the file/node-rename convention).
+ */
+type EditableTextActivationMode = 'single' | 'double';
+/**
+ * Why an edit session ended.
+ * - `commit`: the draft was accepted (Enter, or blur with `submitOnBlur`).
+ * - `cancel`: the draft was discarded (Escape, or blur without `submitOnBlur`).
+ */
+type EditableTextEndReason = 'commit' | 'cancel';
+/**
+ * Every user-facing string EditableText renders. Override any subset via the
+ * `labels` prop; the rest fall back to {@link DEFAULT_EDITABLE_TEXT_LABELS}.
+ */
+interface EditableTextLabels {
+    /**
+     * Accessible name for the edit field while editing, and the fallback
+     * accessible name for the display element when the value is empty (and no
+     * `placeholder` is set). An explicit `aria-label` prop still wins.
+     * @default 'Edit text'
+     */
+    editLabel: string;
+}
+/**
+ * Imperative handle exposed through `ref`. Lets an external control (e.g. a
+ * toolbar "Rename" button) drive the edit session and focus.
+ */
+interface EditableTextHandle {
+    /** Enter edit mode programmatically (no-op when disabled or read-only). */
+    edit: () => void;
+    /** Leave edit mode, committing the current draft. */
+    commit: () => void;
+    /** Leave edit mode, discarding the current draft. */
+    cancel: () => void;
+    /** Focus the edit field while editing, otherwise the display element. */
+    focus: () => void;
+    /** Whether an edit session is currently active. */
+    isEditing: () => boolean;
+    /** The root DOM element for the current state (display element or input). */
+    getElement: () => HTMLElement | null;
+}
+interface EditableTextBaseProps {
+    /**
+     * The committed text value (controlled).
+     */
+    value?: string;
+    /**
+     * Initial committed value (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Called with the new value when an edit is committed. Fires on commit only
+     * (Enter / blur), not on every keystroke.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder shown when the value is empty, both in the display and the edit
+     * field. Rendered in the muted placeholder color.
+     */
+    placeholder?: string;
+    /**
+     * HTML element rendered for the display (idle) state.
+     * @default 'span'
+     */
+    as?: TextElement;
+    /**
+     * Semantic typography variant, matching `Text`.
+     * @default 'body'
+     */
+    variant?: TextVariant;
+    /** Text size, matching `Text`. Overrides the variant size. */
+    size?: TextSize;
+    /** Text weight, matching `Text`. Overrides the variant weight. */
+    weight?: TextWeight;
+    /**
+     * Text color, matching `Text`.
+     * @default 'primary'
+     */
+    color?: TextColor;
+    /** Line height, matching `Text`. */
+    lineHeight?: TextLineHeight;
+    /** Text alignment, matching `Text`. */
+    align?: TextAlign;
+    /** Truncate the display text with an ellipsis on overflow. */
+    truncate?: boolean;
+    /** Use the monospace font family (also implied by `variant="code"`). */
+    mono?: boolean;
+    /**
+     * How a pointer starts an edit session.
+     * @default 'single'
+     */
+    activationMode?: EditableTextActivationMode;
+    /**
+     * Disable the field entirely — no editing, no hover affordance, not
+     * focusable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Render the value but do not allow editing. Still selectable/focusable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Select the whole value when an edit session starts.
+     * @default true
+     */
+    selectOnEdit?: boolean;
+    /**
+     * Commit the draft when the edit field loses focus. When `false`, blurring
+     * discards the draft instead.
+     * @default true
+     */
+    submitOnBlur?: boolean;
+    /** Maximum number of characters accepted by the edit field. */
+    maxLength?: number;
+    /**
+     * String overrides for localization. Pass a stable reference (memoize it) —
+     * it is low-frequency config.
+     */
+    labels?: Partial<EditableTextLabels>;
+    /**
+     * Explicit accessible name. Wins over the value/placeholder-derived name and
+     * over `labels.editLabel`.
+     */
+    'aria-label'?: string;
+    /** Called when an edit session starts. */
+    onEditStart?: () => void;
+    /** Called when an edit session ends, with the reason. */
+    onEditEnd?: (reason: EditableTextEndReason) => void;
+    /** Key-down handler forwarded to the edit field (runs after built-ins). */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Additional CSS class name applied to the current root element. */
+    className?: string;
+    /** Inline styles applied to the current root element. */
+    style?: React.CSSProperties;
+    /** Test identifier for automated testing. */
+    testId?: string;
+    /** Imperative handle — see {@link EditableTextHandle}. */
+    ref?: React.Ref<EditableTextHandle>;
+}
+/**
+ * Props for the EditableText component with a prettified type for better
+ * IntelliSense.
+ */
+type EditableTextProps = Prettify<EditableTextBaseProps>;
+
+export type { EditableTextActivationMode, EditableTextBaseProps, EditableTextEndReason, EditableTextHandle, EditableTextLabels, EditableTextProps };

package/dist/types/components/primitives/EditableText/editableTextLabels.d.ts

@@ -0,0 +1,11 @@
+import { EditableTextLabels } from './EditableText.types.js';
+
+/**
+ * English defaults for every user-facing string EditableText renders. Override
+ * any subset by passing `labels` to `<EditableText>`; the rest fall back here.
+ */
+declare const DEFAULT_EDITABLE_TEXT_LABELS: EditableTextLabels;
+/** Merge a partial `labels` override onto the English defaults. */
+declare function resolveEditableTextLabels(overrides: Partial<EditableTextLabels> | undefined): EditableTextLabels;
+
+export { DEFAULT_EDITABLE_TEXT_LABELS, resolveEditableTextLabels };

package/dist/types/index.d.ts

@@ -44,6 +44,9 @@ export { Code } from './components/primitives/Code/Code.js';
 export { CodeProps, CodeSize } from './components/primitives/Code/Code.types.js';
 export { Collapsible } from './components/primitives/Collapsible/Collapsible.js';
 export { CollapsibleProps, CollapsibleSize } from './components/primitives/Collapsible/Collapsible.types.js';
+export { EditableText } from './components/primitives/EditableText/EditableText.js';
+export { DEFAULT_EDITABLE_TEXT_LABELS, resolveEditableTextLabels } from './components/primitives/EditableText/editableTextLabels.js';
+export { EditableTextActivationMode, EditableTextBaseProps, EditableTextEndReason, EditableTextHandle, EditableTextLabels, EditableTextProps } from './components/primitives/EditableText/EditableText.types.js';
 export { HoverCard } from './components/primitives/HoverCard/HoverCard.js';
 export { HoverCardBaseProps, HoverCardContentBaseProps, HoverCardContentProps, HoverCardContextValue, HoverCardProps, HoverCardTriggerBaseProps, HoverCardTriggerProps } from './components/primitives/HoverCard/HoverCard.types.js';
 export { Icon, IconProps, IconSize } from './components/primitives/Icon/Icon.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "entangle-ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "sideEffects": [
     "*.css",