entangle-ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,333 @@
+"use client";
+import { useMemo, useRef, useEffect, useCallback } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import { useDebouncedCallback } from '../../../hooks/useDebounced/useDebouncedCallback.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 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { clamp } from '../../../utils/mathUtils.js';
+import { screenToWorld } from './viewportCoords.js';
+import { normalizeRect, computeZoomTowardPivot } from './viewportMath.js';
+
+const BUTTON_TO_NAME = {
+    0: 'left',
+    1: 'middle',
+    2: 'right',
+};
+const DEFAULT_PAN = {
+    button: 'middle',
+    spaceKey: true,
+};
+const DEFAULT_ZOOM = {
+    wheel: true,
+    pinch: true,
+    speed: 0.0015,
+};
+const DEFAULT_SELECTION = {
+    enabled: false,
+    button: 'left',
+    additiveModifier: 'shift',
+};
+const ZOOM_END_DELAY_MS = 180;
+const MAX_VELOCITY_PX_PER_MS = 3;
+const VELOCITY_SAMPLE_COUNT = 5;
+/**
+ * Resolves gesture event handlers (pan, zoom, marquee) for the Viewport
+ * wrapper. Used internally by `<Viewport>` — every "live" value (current
+ * transform, current size, latest callbacks) is read through the store
+ * or through a `useLatest` ref so the wheel/keyboard listeners never
+ * re-attach on prop changes.
+ */
+function useViewportGestures(options) {
+    const { viewportRef, store, setTransform, disabled, minZoom, maxZoom, pan, zoom, selectionRect, callbacks, } = options;
+    const panCfg = useMemo(() => pan === false
+        ? { button: false, spaceKey: false }
+        : { ...DEFAULT_PAN, ...pan }, [pan]);
+    const zoomCfg = useMemo(() => zoom === false
+        ? { wheel: false, pinch: false, speed: DEFAULT_ZOOM.speed }
+        : { ...DEFAULT_ZOOM, ...zoom }, [zoom]);
+    const selCfg = useMemo(() => ({ ...DEFAULT_SELECTION, ...selectionRect }), [selectionRect]);
+    const callbacksRef = useLatest(callbacks);
+    const setTransformRef = useLatest(setTransform);
+    const limitsRef = useLatest({ minZoom, maxZoom });
+    const zoomSpeedRef = useLatest(zoomCfg.speed);
+    const activeRef = useRef(null);
+    const spaceHeldRef = useRef(false);
+    const pointerInsideRef = useRef(false);
+    // Ring-buffer of recent pointer-move samples for velocity smoothing.
+    const samplesRef = useRef([]);
+    const zoomActiveRef = useRef(false);
+    const fireZoomEnd = useDebouncedCallback(() => {
+        zoomActiveRef.current = false;
+        callbacksRef.current.onZoomEnd?.();
+    }, ZOOM_END_DELAY_MS);
+    // ── Space-key tracking (window-scoped, gated by pointer/focus state) ──
+    useEffect(() => {
+        if (!panCfg.spaceKey || disabled) {
+            spaceHeldRef.current = false;
+            return;
+        }
+        const isInteractingWithViewport = () => {
+            if (pointerInsideRef.current)
+                return true;
+            const root = viewportRef.current;
+            const active = document.activeElement;
+            if (!root || !active)
+                return false;
+            return root === active || root.contains(active);
+        };
+        const handleDown = (e) => {
+            if (e.code !== 'Space')
+                return;
+            if (!isInteractingWithViewport())
+                return;
+            spaceHeldRef.current = true;
+            e.preventDefault();
+        };
+        const handleUp = (e) => {
+            if (e.code === 'Space') {
+                spaceHeldRef.current = false;
+            }
+        };
+        const handleBlur = () => {
+            spaceHeldRef.current = false;
+        };
+        window.addEventListener('keydown', handleDown);
+        window.addEventListener('keyup', handleUp);
+        window.addEventListener('blur', handleBlur);
+        return () => {
+            window.removeEventListener('keydown', handleDown);
+            window.removeEventListener('keyup', handleUp);
+            window.removeEventListener('blur', handleBlur);
+        };
+    }, [panCfg.spaceKey, disabled, viewportRef]);
+    // ── Native wheel listener (non-passive so we can preventDefault page scroll) ──
+    useEffect(() => {
+        const el = viewportRef.current;
+        if (!el || disabled)
+            return;
+        if (!zoomCfg.wheel && !zoomCfg.pinch)
+            return;
+        const handler = (e) => {
+            const isPinch = e.ctrlKey;
+            if (isPinch && !zoomCfg.pinch)
+                return;
+            if (!isPinch && !zoomCfg.wheel)
+                return;
+            e.preventDefault();
+            if (!zoomActiveRef.current) {
+                zoomActiveRef.current = true;
+                callbacksRef.current.onZoomStart?.();
+            }
+            fireZoomEnd();
+            const rect = el.getBoundingClientRect();
+            const pivot = {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+            };
+            const factor = Math.exp(-e.deltaY * zoomSpeedRef.current);
+            const next = computeZoomTowardPivot(pivot, factor, store.getTransform(), limitsRef.current);
+            setTransformRef.current(next);
+        };
+        el.addEventListener('wheel', handler, { passive: false });
+        return () => {
+            el.removeEventListener('wheel', handler);
+        };
+    }, [
+        viewportRef,
+        disabled,
+        zoomCfg.wheel,
+        zoomCfg.pinch,
+        store,
+        callbacksRef,
+        fireZoomEnd,
+        limitsRef,
+        setTransformRef,
+        zoomSpeedRef,
+    ]);
+    const resolveGesture = useCallback((buttonNum) => {
+        const button = BUTTON_TO_NAME[buttonNum];
+        if (!button)
+            return null;
+        if (panCfg.spaceKey && spaceHeldRef.current && panCfg.button !== false) {
+            return 'pan';
+        }
+        if (panCfg.button !== false && button === panCfg.button) {
+            return 'pan';
+        }
+        if (selCfg.enabled && button === selCfg.button) {
+            return 'marquee';
+        }
+        return null;
+    }, [panCfg.spaceKey, panCfg.button, selCfg.enabled, selCfg.button]);
+    const getLocalPoint = useCallback((e) => {
+        const el = viewportRef.current;
+        if (!el)
+            return { x: 0, y: 0 };
+        const rect = el.getBoundingClientRect();
+        return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }, [viewportRef]);
+    const emitSelection = useCallback((startScreen, endScreen, additive, inProgress) => {
+        const t = store.getTransform();
+        const startWorld = screenToWorld(startScreen, t);
+        const endWorld = screenToWorld(endScreen, t);
+        const rect = normalizeRect({
+            x: startWorld.x,
+            y: startWorld.y,
+            width: endWorld.x - startWorld.x,
+            height: endWorld.y - startWorld.y,
+        });
+        const screenRect = normalizeRect({
+            x: startScreen.x,
+            y: startScreen.y,
+            width: endScreen.x - startScreen.x,
+            height: endScreen.y - startScreen.y,
+        });
+        store.setMarqueeRect(inProgress ? screenRect : null);
+        callbacksRef.current.onSelectionChange?.({
+            rect,
+            additive,
+            inProgress,
+        });
+    }, [store, callbacksRef]);
+    const onPointerDown = useCallback((e) => {
+        if (disabled)
+            return;
+        if (activeRef.current)
+            return;
+        const kind = resolveGesture(e.button);
+        if (!kind)
+            return;
+        const local = getLocalPoint(e);
+        activeRef.current = {
+            kind,
+            pointerId: e.pointerId,
+            startScreen: local,
+            startTransform: store.getTransform(),
+            additive: (() => {
+                switch (selCfg.additiveModifier) {
+                    case 'shift':
+                        return e.shiftKey;
+                    case 'meta':
+                        return e.metaKey;
+                    case 'ctrl':
+                        return e.ctrlKey;
+                    case 'alt':
+                        return e.altKey;
+                    default:
+                        return false;
+                }
+            })(),
+        };
+        samplesRef.current = [{ point: local, time: performance.now() }];
+        e.currentTarget.setPointerCapture(e.pointerId);
+        e.preventDefault();
+        if (kind === 'pan') {
+            store.setIsPanning(true);
+            callbacksRef.current.onPanStart?.();
+        }
+        else {
+            emitSelection(local, local, activeRef.current.additive, true);
+        }
+    }, [
+        disabled,
+        resolveGesture,
+        getLocalPoint,
+        store,
+        selCfg.additiveModifier,
+        emitSelection,
+        callbacksRef,
+    ]);
+    const onPointerMove = useCallback((e) => {
+        const g = activeRef.current;
+        if (g?.pointerId !== e.pointerId)
+            return;
+        const local = getLocalPoint(e);
+        const samples = samplesRef.current;
+        samples.push({ point: local, time: performance.now() });
+        if (samples.length > VELOCITY_SAMPLE_COUNT)
+            samples.shift();
+        if (g.kind === 'pan') {
+            const dx = local.x - g.startScreen.x;
+            const dy = local.y - g.startScreen.y;
+            setTransformRef.current({
+                x: g.startTransform.x + dx,
+                y: g.startTransform.y + dy,
+                zoom: g.startTransform.zoom,
+            });
+        }
+        else {
+            emitSelection(g.startScreen, local, g.additive, true);
+        }
+    }, [getLocalPoint, emitSelection, setTransformRef]);
+    const endGesture = useCallback((e, cancelled) => {
+        const g = activeRef.current;
+        if (g?.pointerId !== e.pointerId)
+            return;
+        const local = getLocalPoint(e);
+        if (g.kind === 'pan') {
+            let vx = 0;
+            let vy = 0;
+            const samples = samplesRef.current;
+            if (samples.length >= 2) {
+                const first = samples[0];
+                const last = samples[samples.length - 1];
+                if (first && last) {
+                    const dt = last.time - first.time;
+                    if (dt > 0) {
+                        vx = clamp((last.point.x - first.point.x) / dt, -MAX_VELOCITY_PX_PER_MS, MAX_VELOCITY_PX_PER_MS);
+                        vy = clamp((last.point.y - first.point.y) / dt, -MAX_VELOCITY_PX_PER_MS, MAX_VELOCITY_PX_PER_MS);
+                    }
+                }
+            }
+            store.setIsPanning(false);
+            callbacksRef.current.onPanEnd?.({ velocity: { x: vx, y: vy } });
+        }
+        else if (!cancelled) {
+            emitSelection(g.startScreen, local, g.additive, false);
+        }
+        else {
+            store.setMarqueeRect(null);
+        }
+        activeRef.current = null;
+        samplesRef.current = [];
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        }
+    }, [getLocalPoint, emitSelection, store, callbacksRef]);
+    const onPointerUp = useCallback((e) => {
+        endGesture(e, false);
+    }, [endGesture]);
+    const onPointerCancel = useCallback((e) => {
+        endGesture(e, true);
+    }, [endGesture]);
+    const onPointerEnter = useCallback(() => {
+        pointerInsideRef.current = true;
+    }, []);
+    const onPointerLeave = useCallback(() => {
+        pointerInsideRef.current = false;
+    }, []);
+    const onContextMenu = useCallback((e) => {
+        if (panCfg.button === 'right')
+            e.preventDefault();
+    }, [panCfg.button]);
+    return {
+        handlers: {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel,
+            onPointerEnter,
+            onPointerLeave,
+            onContextMenu,
+        },
+    };
+}
+
+export { useViewportGestures };
+//# sourceMappingURL=useViewportGestures.js.map

package/dist/esm/components/primitives/viewport/useViewportGestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewportGestures.js","sources":["src/components/primitives/viewport/useViewportGestures.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { useDebouncedCallback, useLatest } from '@/hooks';\nimport { clamp } from '@/utils/mathUtils';\n\nimport { screenToWorld } from './viewportCoords';\nimport { computeZoomTowardPivot, normalizeRect } from './viewportMath';\n\nimport type {\n  ScreenRect,\n  ViewportMouseButton,\n  ViewportPanConfig,\n  ViewportPanEndInfo,\n  ViewportSelectionConfig,\n  ViewportSelectionEvent,\n  ViewportTransform,\n  ViewportZoomConfig,\n  WorldRect,\n} from './Viewport.types';\nimport type { ViewportStore } from './ViewportStore';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type React from 'react';\n\ninterface GestureCallbacks {\n  onPanStart?: () => void;\n  onPanEnd?: (info: ViewportPanEndInfo) => void;\n  onZoomStart?: () => void;\n  onZoomEnd?: () => void;\n  onSelectionChange?: (info: ViewportSelectionEvent) => void;\n}\n\ninterface UseViewportGesturesOptions {\n  viewportRef: React.RefObject<HTMLDivElement | null>;\n  store: ViewportStore;\n  /** Called to push a new transform through React state. */\n  setTransform: (next: ViewportTransform) => void;\n  disabled: boolean;\n  minZoom: number;\n  maxZoom: number;\n  pan: ViewportPanConfig | false;\n  zoom: ViewportZoomConfig | false;\n  selectionRect: ViewportSelectionConfig;\n  callbacks: GestureCallbacks;\n}\n\ninterface UseViewportGesturesReturn {\n  handlers: {\n    onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerUp: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerCancel: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerEnter: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerLeave: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onContextMenu: (e: React.MouseEvent<HTMLDivElement>) => void;\n  };\n}\n\nconst BUTTON_TO_NAME: Record<number, ViewportMouseButton> = {\n  0: 'left',\n  1: 'middle',\n  2: 'right',\n};\n\nconst DEFAULT_PAN: Required<ViewportPanConfig> = {\n  button: 'middle',\n  spaceKey: true,\n};\n\nconst DEFAULT_ZOOM: Required<ViewportZoomConfig> = {\n  wheel: true,\n  pinch: true,\n  speed: 0.0015,\n};\n\nconst DEFAULT_SELECTION: Required<ViewportSelectionConfig> = {\n  enabled: false,\n  button: 'left',\n  additiveModifier: 'shift',\n};\n\nconst ZOOM_END_DELAY_MS = 180;\nconst MAX_VELOCITY_PX_PER_MS = 3;\nconst VELOCITY_SAMPLE_COUNT = 5;\n\ntype GestureKind = 'pan' | 'marquee';\n\ninterface ActiveGesture {\n  kind: GestureKind;\n  pointerId: number;\n  startScreen: Point2D;\n  startTransform: ViewportTransform;\n  /** For marquee — additive modifier observed at gesture start. */\n  additive: boolean;\n}\n\n/**\n * Resolves gesture event handlers (pan, zoom, marquee) for the Viewport\n * wrapper. Used internally by `<Viewport>` — every \"live\" value (current\n * transform, current size, latest callbacks) is read through the store\n * or through a `useLatest` ref so the wheel/keyboard listeners never\n * re-attach on prop changes.\n */\nexport function useViewportGestures(\n  options: UseViewportGesturesOptions\n): UseViewportGesturesReturn {\n  const {\n    viewportRef,\n    store,\n    setTransform,\n    disabled,\n    minZoom,\n    maxZoom,\n    pan,\n    zoom,\n    selectionRect,\n    callbacks,\n  } = options;\n\n  const panCfg = useMemo<Required<ViewportPanConfig>>(\n    () =>\n      pan === false\n        ? { button: false, spaceKey: false }\n        : { ...DEFAULT_PAN, ...pan },\n    [pan]\n  );\n  const zoomCfg = useMemo<Required<ViewportZoomConfig>>(\n    () =>\n      zoom === false\n        ? { wheel: false, pinch: false, speed: DEFAULT_ZOOM.speed }\n        : { ...DEFAULT_ZOOM, ...zoom },\n    [zoom]\n  );\n  const selCfg = useMemo<Required<ViewportSelectionConfig>>(\n    () => ({ ...DEFAULT_SELECTION, ...selectionRect }),\n    [selectionRect]\n  );\n\n  const callbacksRef = useLatest(callbacks);\n  const setTransformRef = useLatest(setTransform);\n  const limitsRef = useLatest({ minZoom, maxZoom });\n  const zoomSpeedRef = useLatest(zoomCfg.speed);\n\n  const activeRef = useRef<ActiveGesture | null>(null);\n  const spaceHeldRef = useRef(false);\n  const pointerInsideRef = useRef(false);\n\n  // Ring-buffer of recent pointer-move samples for velocity smoothing.\n  const samplesRef = useRef<Array<{ point: Point2D; time: number }>>([]);\n\n  const zoomActiveRef = useRef(false);\n\n  const fireZoomEnd = useDebouncedCallback(() => {\n    zoomActiveRef.current = false;\n    callbacksRef.current.onZoomEnd?.();\n  }, ZOOM_END_DELAY_MS);\n\n  // ── Space-key tracking (window-scoped, gated by pointer/focus state) ──\n  useEffect(() => {\n    if (!panCfg.spaceKey || disabled) {\n      spaceHeldRef.current = false;\n      return;\n    }\n    const isInteractingWithViewport = (): boolean => {\n      if (pointerInsideRef.current) return true;\n      const root = viewportRef.current;\n      const active = document.activeElement;\n      if (!root || !active) return false;\n      return root === active || root.contains(active);\n    };\n    const handleDown = (e: KeyboardEvent): void => {\n      if (e.code !== 'Space') return;\n      if (!isInteractingWithViewport()) return;\n      spaceHeldRef.current = true;\n      e.preventDefault();\n    };\n    const handleUp = (e: KeyboardEvent): void => {\n      if (e.code === 'Space') {\n        spaceHeldRef.current = false;\n      }\n    };\n    const handleBlur = (): void => {\n      spaceHeldRef.current = false;\n    };\n    window.addEventListener('keydown', handleDown);\n    window.addEventListener('keyup', handleUp);\n    window.addEventListener('blur', handleBlur);\n    return () => {\n      window.removeEventListener('keydown', handleDown);\n      window.removeEventListener('keyup', handleUp);\n      window.removeEventListener('blur', handleBlur);\n    };\n  }, [panCfg.spaceKey, disabled, viewportRef]);\n\n  // ── Native wheel listener (non-passive so we can preventDefault page scroll) ──\n  useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || disabled) return;\n    if (!zoomCfg.wheel && !zoomCfg.pinch) return;\n\n    const handler = (e: WheelEvent): void => {\n      const isPinch = e.ctrlKey;\n      if (isPinch && !zoomCfg.pinch) return;\n      if (!isPinch && !zoomCfg.wheel) return;\n\n      e.preventDefault();\n\n      if (!zoomActiveRef.current) {\n        zoomActiveRef.current = true;\n        callbacksRef.current.onZoomStart?.();\n      }\n      fireZoomEnd();\n\n      const rect = el.getBoundingClientRect();\n      const pivot: Point2D = {\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      };\n      const factor = Math.exp(-e.deltaY * zoomSpeedRef.current);\n      const next = computeZoomTowardPivot(\n        pivot,\n        factor,\n        store.getTransform(),\n        limitsRef.current\n      );\n      setTransformRef.current(next);\n    };\n\n    el.addEventListener('wheel', handler, { passive: false });\n    return () => {\n      el.removeEventListener('wheel', handler);\n    };\n  }, [\n    viewportRef,\n    disabled,\n    zoomCfg.wheel,\n    zoomCfg.pinch,\n    store,\n    callbacksRef,\n    fireZoomEnd,\n    limitsRef,\n    setTransformRef,\n    zoomSpeedRef,\n  ]);\n\n  const resolveGesture = useCallback(\n    (buttonNum: number): GestureKind | null => {\n      const button = BUTTON_TO_NAME[buttonNum];\n      if (!button) return null;\n\n      if (panCfg.spaceKey && spaceHeldRef.current && panCfg.button !== false) {\n        return 'pan';\n      }\n      if (panCfg.button !== false && button === panCfg.button) {\n        return 'pan';\n      }\n      if (selCfg.enabled && button === selCfg.button) {\n        return 'marquee';\n      }\n      return null;\n    },\n    [panCfg.spaceKey, panCfg.button, selCfg.enabled, selCfg.button]\n  );\n\n  const getLocalPoint = useCallback(\n    (e: { clientX: number; clientY: number }): Point2D => {\n      const el = viewportRef.current;\n      if (!el) return { x: 0, y: 0 };\n      const rect = el.getBoundingClientRect();\n      return { x: e.clientX - rect.left, y: e.clientY - rect.top };\n    },\n    [viewportRef]\n  );\n\n  const emitSelection = useCallback(\n    (\n      startScreen: Point2D,\n      endScreen: Point2D,\n      additive: boolean,\n      inProgress: boolean\n    ): void => {\n      const t = store.getTransform();\n      const startWorld = screenToWorld(startScreen, t);\n      const endWorld = screenToWorld(endScreen, t);\n      const rect: WorldRect = normalizeRect({\n        x: startWorld.x,\n        y: startWorld.y,\n        width: endWorld.x - startWorld.x,\n        height: endWorld.y - startWorld.y,\n      });\n      const screenRect: ScreenRect = normalizeRect({\n        x: startScreen.x,\n        y: startScreen.y,\n        width: endScreen.x - startScreen.x,\n        height: endScreen.y - startScreen.y,\n      });\n      store.setMarqueeRect(inProgress ? screenRect : null);\n      callbacksRef.current.onSelectionChange?.({\n        rect,\n        additive,\n        inProgress,\n      });\n    },\n    [store, callbacksRef]\n  );\n\n  const onPointerDown = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      if (activeRef.current) return;\n\n      const kind = resolveGesture(e.button);\n      if (!kind) return;\n\n      const local = getLocalPoint(e);\n\n      activeRef.current = {\n        kind,\n        pointerId: e.pointerId,\n        startScreen: local,\n        startTransform: store.getTransform(),\n        additive: ((): boolean => {\n          switch (selCfg.additiveModifier) {\n            case 'shift':\n              return e.shiftKey;\n            case 'meta':\n              return e.metaKey;\n            case 'ctrl':\n              return e.ctrlKey;\n            case 'alt':\n              return e.altKey;\n            default:\n              return false;\n          }\n        })(),\n      };\n\n      samplesRef.current = [{ point: local, time: performance.now() }];\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      e.preventDefault();\n\n      if (kind === 'pan') {\n        store.setIsPanning(true);\n        callbacksRef.current.onPanStart?.();\n      } else {\n        emitSelection(local, local, activeRef.current.additive, true);\n      }\n    },\n    [\n      disabled,\n      resolveGesture,\n      getLocalPoint,\n      store,\n      selCfg.additiveModifier,\n      emitSelection,\n      callbacksRef,\n    ]\n  );\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      const g = activeRef.current;\n      if (g?.pointerId !== e.pointerId) return;\n\n      const local = getLocalPoint(e);\n\n      const samples = samplesRef.current;\n      samples.push({ point: local, time: performance.now() });\n      if (samples.length > VELOCITY_SAMPLE_COUNT) samples.shift();\n\n      if (g.kind === 'pan') {\n        const dx = local.x - g.startScreen.x;\n        const dy = local.y - g.startScreen.y;\n        setTransformRef.current({\n          x: g.startTransform.x + dx,\n          y: g.startTransform.y + dy,\n          zoom: g.startTransform.zoom,\n        });\n      } else {\n        emitSelection(g.startScreen, local, g.additive, true);\n      }\n    },\n    [getLocalPoint, emitSelection, setTransformRef]\n  );\n\n  const endGesture = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>, cancelled: boolean): void => {\n      const g = activeRef.current;\n      if (g?.pointerId !== e.pointerId) return;\n\n      const local = getLocalPoint(e);\n\n      if (g.kind === 'pan') {\n        let vx = 0;\n        let vy = 0;\n        const samples = samplesRef.current;\n        if (samples.length >= 2) {\n          const first = samples[0];\n          const last = samples[samples.length - 1];\n          if (first && last) {\n            const dt = last.time - first.time;\n            if (dt > 0) {\n              vx = clamp(\n                (last.point.x - first.point.x) / dt,\n                -MAX_VELOCITY_PX_PER_MS,\n                MAX_VELOCITY_PX_PER_MS\n              );\n              vy = clamp(\n                (last.point.y - first.point.y) / dt,\n                -MAX_VELOCITY_PX_PER_MS,\n                MAX_VELOCITY_PX_PER_MS\n              );\n            }\n          }\n        }\n        store.setIsPanning(false);\n        callbacksRef.current.onPanEnd?.({ velocity: { x: vx, y: vy } });\n      } else if (!cancelled) {\n        emitSelection(g.startScreen, local, g.additive, false);\n      } else {\n        store.setMarqueeRect(null);\n      }\n\n      activeRef.current = null;\n      samplesRef.current = [];\n\n      if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n        e.currentTarget.releasePointerCapture(e.pointerId);\n      }\n    },\n    [getLocalPoint, emitSelection, store, callbacksRef]\n  );\n\n  const onPointerUp = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      endGesture(e, false);\n    },\n    [endGesture]\n  );\n\n  const onPointerCancel = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      endGesture(e, true);\n    },\n    [endGesture]\n  );\n\n  const onPointerEnter = useCallback(() => {\n    pointerInsideRef.current = true;\n  }, []);\n\n  const onPointerLeave = useCallback(() => {\n    pointerInsideRef.current = false;\n  }, []);\n\n  const onContextMenu = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (panCfg.button === 'right') e.preventDefault();\n    },\n    [panCfg.button]\n  );\n\n  return {\n    handlers: {\n      onPointerDown,\n      onPointerMove,\n      onPointerUp,\n      onPointerCancel,\n      onPointerEnter,\n      onPointerLeave,\n      onContextMenu,\n    },\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA2DA;AACE;AACA;AACA;;AAGF;AACE;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACA;AACA;AAaA;;;;;;AAMG;AACG;;;;AAoBE;;AAMA;AACA;;AAQN;AACA;;;AAIA;AACA;AACA;;AAGA;AAEA;AAEA;AACE;AACA;;;;AAKA;AACE;;;;;AAI8B;AAC9B;AACA;AACA;AAAsB;;AAExB;AACA;AACE;;;;AAEA;;AAEF;AACA;AACE;AACE;;AAEJ;;AAEE;AACF;AACA;AACA;AACA;AACA;AACE;AACA;AACA;AACF;;;;AAKA;;;;;AAIA;AACE;AACA;;AACA;;;AAIA;AACE;AACA;;AAEF;AAEA;AACA;AACE;AACA;;AAEF;AACA;AAMA;AACF;AAEA;AACA;AACE;AACF;AACF;;;AAGE;AACA;;;;;;;AAOD;AAED;AAEI;AACA;AAAa;AAEb;AACE;;AAEF;AACE;;;AAGA;;AAEF;AACF;AAIF;AAEI;AACA;;AACA;;AAEF;AAIF;AAOI;;;;;;AAME;AACA;AACD;;;;AAIC;AACA;AACD;AACD;AACA;;;;AAIC;AACH;AAIF;AAEI;;;;;AAIA;;AAEA;;;;AAKE;AACA;;AAEE;AACE;;AAEA;;AAEA;;AAEA;;AAEA;AACE;;AAEN;;AAGF;;;AAKA;AACE;AACA;;;AAEA;;AAEJ;;;;;AAME;;;AAGD;AAGH;AAEI;AACA;;AAEA;AAEA;AACA;AACA;;AAEA;;;;AAII;AACA;AACA;AACD;;;AAED;;;;AAQF;AACA;;AAEA;AAEA;;;AAGE;AACA;AACE;;AAEA;;AAEE;;;;;;AAcJ;;;;AAGA;;;AAEA;;AAGF;AACA;;;;;AASJ;AAEI;AACF;AAIF;AAEI;AACF;AAIF;AACE;;AAGF;AACE;;AAGF;AAEI;;AACF;;AAKA;;;;;;;;AAQC;;AAEL;;"}

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

@@ -0,0 +1,37 @@
+/**
+ * Convert a world-space point to a screen-space (CSS-pixel) point.
+ *
+ * Uses the canonical transform: `screenPos = worldPos * zoom + (x, y)`.
+ */
+function worldToScreen(point, transform) {
+    return {
+        x: point.x * transform.zoom + transform.x,
+        y: point.y * transform.zoom + transform.y,
+    };
+}
+/**
+ * Convert a screen-space (CSS-pixel) point to a world-space point.
+ *
+ * Inverse of `worldToScreen`.
+ */
+function screenToWorld(point, transform) {
+    const z = transform.zoom || 1;
+    return {
+        x: (point.x - transform.x) / z,
+        y: (point.y - transform.y) / z,
+    };
+}
+/**
+ * Compute the screen-space (CSS-pixel) position of a pointer event relative
+ * to a viewport element.
+ */
+function getViewportPointerPosition(event, viewport) {
+    const rect = viewport.getBoundingClientRect();
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+    };
+}
+
+export { getViewportPointerPosition, screenToWorld, worldToScreen };
+//# sourceMappingURL=viewportCoords.js.map

package/dist/esm/components/primitives/viewport/viewportCoords.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewportCoords.js","sources":["src/components/primitives/viewport/viewportCoords.ts"],"sourcesContent":["import type { ViewportTransform } from './Viewport.types';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\n\n/**\n * Convert a world-space point to a screen-space (CSS-pixel) point.\n *\n * Uses the canonical transform: `screenPos = worldPos * zoom + (x, y)`.\n */\nexport function worldToScreen(\n  point: Point2D,\n  transform: ViewportTransform\n): Point2D {\n  return {\n    x: point.x * transform.zoom + transform.x,\n    y: point.y * transform.zoom + transform.y,\n  };\n}\n\n/**\n * Convert a screen-space (CSS-pixel) point to a world-space point.\n *\n * Inverse of `worldToScreen`.\n */\nexport function screenToWorld(\n  point: Point2D,\n  transform: ViewportTransform\n): Point2D {\n  const z = transform.zoom || 1;\n  return {\n    x: (point.x - transform.x) / z,\n    y: (point.y - transform.y) / z,\n  };\n}\n\n/**\n * Compute the screen-space (CSS-pixel) position of a pointer event relative\n * to a viewport element.\n */\nexport function getViewportPointerPosition(\n  event: { clientX: number; clientY: number },\n  viewport: HTMLElement\n): Point2D {\n  const rect = viewport.getBoundingClientRect();\n  return {\n    x: event.clientX - rect.left,\n    y: event.clientY - rect.top,\n  };\n}\n"],"names":[],"mappings":"AAGA;;;;AAIG;AACG,SAAU,aAAa,CAC3B,KAAc,EACd,SAA4B,EAAA;IAE5B,OAAO;QACL,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;QACzC,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;KAC1C;AACH;AAEA;;;;AAIG;AACG,SAAU,aAAa,CAC3B,KAAc,EACd,SAA4B,EAAA;AAE5B,IAAA,MAAM,CAAC,GAAG,SAAS,CAAC,IAAI,IAAI,CAAC;IAC7B,OAAO;QACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC;QAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC;KAC/B;AACH;AAEA;;;AAGG;AACG,SAAU,0BAA0B,CACxC,KAA2C,EAC3C,QAAqB,EAAA;AAErB,IAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,qBAAqB,EAAE;IAC7C,OAAO;AACL,QAAA,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI;AAC5B,QAAA,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG;KAC5B;AACH;;;;"}

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

@@ -0,0 +1,77 @@
+import { clamp } from '../../../utils/mathUtils.js';
+
+/**
+ * Compute a transform that fits `bounds` (in world coordinates) into the
+ * viewport `size`, with optional uniform inner `padding` in screen pixels.
+ *
+ * The resulting transform preserves aspect ratio (uniform zoom on both axes)
+ * and centers the content within the viewport.
+ */
+function computeFitTransform(bounds, size, padding, limits) {
+    const innerW = Math.max(1, size.width - padding * 2);
+    const innerH = Math.max(1, size.height - padding * 2);
+    // Degenerate bounds — fall back to identity scale, center on bounds origin
+    const w = bounds.width > 0 ? bounds.width : 1;
+    const h = bounds.height > 0 ? bounds.height : 1;
+    const zoomX = innerW / w;
+    const zoomY = innerH / h;
+    const zoom = clamp(Math.min(zoomX, zoomY), limits.minZoom, limits.maxZoom);
+    // Center of world bounds maps to center of viewport
+    const worldCx = bounds.x + bounds.width / 2;
+    const worldCy = bounds.y + bounds.height / 2;
+    const screenCx = size.width / 2;
+    const screenCy = size.height / 2;
+    return {
+        x: screenCx - worldCx * zoom,
+        y: screenCy - worldCy * zoom,
+        zoom,
+    };
+}
+/**
+ * Compute a transform that centers `point` (world coordinates) in the
+ * viewport, optionally setting a new zoom.
+ */
+function computeCenterTransform(point, size, current, limits, nextZoom) {
+    const zoom = clamp(nextZoom ?? current.zoom, limits.minZoom, limits.maxZoom);
+    return {
+        x: size.width / 2 - point.x * zoom,
+        y: size.height / 2 - point.y * zoom,
+        zoom,
+    };
+}
+/**
+ * Compute the new transform for a "zoom toward pivot" gesture.
+ *
+ * The world point currently under `pivot` (screen pixels) stays under
+ * the pivot after the zoom change.
+ */
+function computeZoomTowardPivot(pivot, factor, current, limits) {
+    const nextZoom = clamp(current.zoom * factor, limits.minZoom, limits.maxZoom);
+    // World position under pivot before zoom
+    const worldX = (pivot.x - current.x) / (current.zoom || 1);
+    const worldY = (pivot.y - current.y) / (current.zoom || 1);
+    // Keep world point under pivot after zoom
+    return {
+        x: pivot.x - worldX * nextZoom,
+        y: pivot.y - worldY * nextZoom,
+        zoom: nextZoom,
+    };
+}
+/**
+ * Normalize a rectangle so that width and height are non-negative,
+ * adjusting the origin accordingly. Useful for marquee selection
+ * where the user may drag in any direction.
+ */
+function normalizeRect(rect) {
+    const x = rect.width < 0 ? rect.x + rect.width : rect.x;
+    const y = rect.height < 0 ? rect.y + rect.height : rect.y;
+    return {
+        x,
+        y,
+        width: Math.abs(rect.width),
+        height: Math.abs(rect.height),
+    };
+}
+
+export { computeCenterTransform, computeFitTransform, computeZoomTowardPivot, normalizeRect };
+//# sourceMappingURL=viewportMath.js.map

package/dist/esm/components/primitives/viewport/viewportMath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewportMath.js","sources":["src/components/primitives/viewport/viewportMath.ts"],"sourcesContent":["import { clamp } from '@/utils/mathUtils';\n\nimport type {\n  ViewportSize,\n  ViewportTransform,\n  WorldRect,\n} from './Viewport.types';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\n\ninterface ZoomLimits {\n  minZoom: number;\n  maxZoom: number;\n}\n\n/**\n * Compute a transform that fits `bounds` (in world coordinates) into the\n * viewport `size`, with optional uniform inner `padding` in screen pixels.\n *\n * The resulting transform preserves aspect ratio (uniform zoom on both axes)\n * and centers the content within the viewport.\n */\nexport function computeFitTransform(\n  bounds: WorldRect,\n  size: ViewportSize,\n  padding: number,\n  limits: ZoomLimits\n): ViewportTransform {\n  const innerW = Math.max(1, size.width - padding * 2);\n  const innerH = Math.max(1, size.height - padding * 2);\n\n  // Degenerate bounds — fall back to identity scale, center on bounds origin\n  const w = bounds.width > 0 ? bounds.width : 1;\n  const h = bounds.height > 0 ? bounds.height : 1;\n\n  const zoomX = innerW / w;\n  const zoomY = innerH / h;\n  const zoom = clamp(Math.min(zoomX, zoomY), limits.minZoom, limits.maxZoom);\n\n  // Center of world bounds maps to center of viewport\n  const worldCx = bounds.x + bounds.width / 2;\n  const worldCy = bounds.y + bounds.height / 2;\n  const screenCx = size.width / 2;\n  const screenCy = size.height / 2;\n\n  return {\n    x: screenCx - worldCx * zoom,\n    y: screenCy - worldCy * zoom,\n    zoom,\n  };\n}\n\n/**\n * Compute a transform that centers `point` (world coordinates) in the\n * viewport, optionally setting a new zoom.\n */\nexport function computeCenterTransform(\n  point: Point2D,\n  size: ViewportSize,\n  current: ViewportTransform,\n  limits: ZoomLimits,\n  nextZoom?: number\n): ViewportTransform {\n  const zoom = clamp(nextZoom ?? current.zoom, limits.minZoom, limits.maxZoom);\n  return {\n    x: size.width / 2 - point.x * zoom,\n    y: size.height / 2 - point.y * zoom,\n    zoom,\n  };\n}\n\n/**\n * Compute the new transform for a \"zoom toward pivot\" gesture.\n *\n * The world point currently under `pivot` (screen pixels) stays under\n * the pivot after the zoom change.\n */\nexport function computeZoomTowardPivot(\n  pivot: Point2D,\n  factor: number,\n  current: ViewportTransform,\n  limits: ZoomLimits\n): ViewportTransform {\n  const nextZoom = clamp(current.zoom * factor, limits.minZoom, limits.maxZoom);\n  // World position under pivot before zoom\n  const worldX = (pivot.x - current.x) / (current.zoom || 1);\n  const worldY = (pivot.y - current.y) / (current.zoom || 1);\n  // Keep world point under pivot after zoom\n  return {\n    x: pivot.x - worldX * nextZoom,\n    y: pivot.y - worldY * nextZoom,\n    zoom: nextZoom,\n  };\n}\n\n/**\n * Normalize a rectangle so that width and height are non-negative,\n * adjusting the origin accordingly. Useful for marquee selection\n * where the user may drag in any direction.\n */\nexport function normalizeRect(rect: WorldRect): WorldRect {\n  const x = rect.width < 0 ? rect.x + rect.width : rect.x;\n  const y = rect.height < 0 ? rect.y + rect.height : rect.y;\n  return {\n    x,\n    y,\n    width: Math.abs(rect.width),\n    height: Math.abs(rect.height),\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/shell/AppShell/AppShell.js

@@ -42,7 +42,7 @@ const AppShellRoot = ({ viewportLock = false, topChromeSeparator = 'border', sid
         left: true,
         right: true,
     });
-    const isToolbarVisible = useCallback((position) => toolbarVisibility[position] ?? true, [toolbarVisibility]);
+    const isToolbarVisible = useCallback((position) => toolbarVisibility[position], [toolbarVisibility]);
     const setToolbarVisible = useCallback((position, visible) => {
         setToolbarVisibility(prev => ({ ...prev, [position]: visible }));
     }, []);

package/dist/esm/components/shell/AppShell/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sources":["../../../../../../src/components/shell/AppShell/AppShell.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA2BA;AAEA;AACE;AACA;AACA;AACA;AACD;AAEM;AAEP;AAEA;AAkBA;AAEA;;AAYE;AAAiC;;AAG/B;AACA;;AAMU;AACA;AACD;AAUT;AACE;;AAeN;AACA;AAEA;AAmBA;AAEA;AAmBA;AAEA;AAEA;AAYE;AAGE;AACA;AACA;AACD;;;AASG;;AAKJ;;;;;AAMG;;;;;AAMA;;AAiBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"AppShell.js","sources":["src/components/shell/AppShell/AppShell.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useMemo,\n} from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  viewportLockClass,\n  shellRoot,\n  menuBarSlot,\n  toolbarTopSlot,\n  sideToolbarSlot,\n  dockSlot,\n  statusBarSlot,\n} from './AppShell.css';\n\nimport type {\n  AppShellProps,\n  AppShellSlotProps,\n  AppShellToolbarSlotProps,\n  AppShellContextValue,\n  ToolbarPosition,\n} from './AppShell.types';\n\n// --- Context ---\n\nconst AppShellContext = /*#__PURE__*/ createContext<AppShellContextValue>({\n  isToolbarVisible: () => true,\n  setToolbarVisible: () => {},\n  topChromeSeparator: 'border',\n  sideChromeSeparator: 'border',\n});\n\nexport const useAppShell = () => useContext(AppShellContext);\n\n// --- Slot Components ---\n\nconst MenuBarSlot: React.FC<AppShellSlotProps> = ({\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => (\n  <header\n    ref={ref}\n    className={cx(menuBarSlot, className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </header>\n);\nMenuBarSlot.displayName = 'AppShell.MenuBar';\n\nconst ToolbarSlot: React.FC<AppShellToolbarSlotProps> = ({\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  position = 'top',\n  ...rest\n}) => {\n  const { isToolbarVisible, topChromeSeparator, sideChromeSeparator } =\n    useAppShell();\n  if (!isToolbarVisible(position)) return null;\n\n  switch (position) {\n    case 'left':\n    case 'right':\n      return (\n        <aside\n          ref={ref}\n          className={cx(\n            sideToolbarSlot({\n              side: position,\n              separator: sideChromeSeparator,\n            }),\n            className\n          )}\n          style={style}\n          data-testid={testId}\n          {...rest}\n        >\n          {children}\n        </aside>\n      );\n    default:\n      return (\n        <div\n          ref={ref as React.Ref<HTMLDivElement>}\n          className={cx(\n            toolbarTopSlot({ separator: topChromeSeparator }),\n            className\n          )}\n          style={style}\n          data-testid={testId}\n          {...rest}\n        >\n          {children}\n        </div>\n      );\n  }\n};\nToolbarSlot.displayName = 'AppShell.Toolbar';\n\nconst DockSlot: React.FC<AppShellSlotProps> = ({\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => (\n  <main\n    ref={ref}\n    className={cx(dockSlot, className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </main>\n);\nDockSlot.displayName = 'AppShell.Dock';\n\nconst StatusBarSlot: React.FC<AppShellSlotProps> = ({\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => (\n  <footer\n    ref={ref}\n    className={cx(statusBarSlot, className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </footer>\n);\nStatusBarSlot.displayName = 'AppShell.StatusBar';\n\n// --- Root Component ---\n\nconst AppShellRoot: React.FC<AppShellProps> = ({\n  viewportLock = false,\n  topChromeSeparator = 'border',\n  sideChromeSeparator = 'border',\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const [toolbarVisibility, setToolbarVisibility] = useState<\n    Record<ToolbarPosition, boolean>\n  >({\n    top: true,\n    left: true,\n    right: true,\n  });\n\n  const isToolbarVisible = useCallback(\n    (position: ToolbarPosition) => toolbarVisibility[position],\n    [toolbarVisibility]\n  );\n\n  const setToolbarVisible = useCallback(\n    (position: ToolbarPosition, visible: boolean) => {\n      setToolbarVisibility(prev => ({ ...prev, [position]: visible }));\n    },\n    []\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      isToolbarVisible,\n      setToolbarVisible,\n      topChromeSeparator,\n      sideChromeSeparator,\n    }),\n    [\n      isToolbarVisible,\n      setToolbarVisible,\n      topChromeSeparator,\n      sideChromeSeparator,\n    ]\n  );\n\n  return (\n    <AppShellContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        className={cx(shellRoot, viewportLock && viewportLockClass, className)}\n        style={style}\n        data-testid={testId}\n        role=\"application\"\n        {...rest}\n      >\n        {children}\n      </div>\n    </AppShellContext.Provider>\n  );\n};\n\nAppShellRoot.displayName = 'AppShell';\n\n// --- Compound Component ---\n\nexport const AppShell = /*#__PURE__*/ Object.assign(AppShellRoot, {\n  MenuBar: MenuBarSlot,\n  Toolbar: ToolbarSlot,\n  Dock: DockSlot,\n  StatusBar: StatusBarSlot,\n});\n"],"names":[],"mappings":";;;;;;AA8BA;AAEA;AACE;AACA;AACA;AACA;AACD;AAEM;AAEP;AAEA;AAkBA;AAEA;;AAYE;AAAiC;;AAG/B;AACA;;AAMU;AACA;AACD;AAUT;AACE;;AAeN;AACA;AAEA;AAmBA;AAEA;AAmBA;AAEA;AAEA;AAYE;AAGE;AACA;AACA;AACD;AAED;;AAOI;;AAKJ;;;;;AAMG;;;;;AAMA;;AAiBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.css.js

@@ -1,18 +1,19 @@
-import './../../../assets/src/components/shell/FloatingPanel/FloatingPanel.css.ts.vanilla-1rIAXEFp.css';
+import './../../../assets/src/components/shell/FloatingPanel/FloatingPanel.css.ts.vanilla-CRaeYJ2b.css';
 
-var collapsibleHidden = 'FloatingPanel_collapsibleHidden__exxnv7b';
-var collapsibleVisible = 'FloatingPanel_collapsibleVisible__exxnv7a';
-var header = 'FloatingPanel_header__exxnv76';
-var headerActions = 'FloatingPanel_headerActions__exxnv78';
-var headerButton = 'FloatingPanel_headerButton__exxnv79';
-var panel = 'FloatingPanel_panel__exxnv75';
+var collapsibleHidden = 'FloatingPanel_collapsibleHidden__exxnv7c';
+var collapsibleVisible = 'FloatingPanel_collapsibleVisible__exxnv7b';
+var header = 'FloatingPanel_header__exxnv77';
+var headerActions = 'FloatingPanel_headerActions__exxnv79';
+var headerButton = 'FloatingPanel_headerButton__exxnv7a';
+var managerRoot = 'FloatingPanel_managerRoot__exxnv75';
+var panel = 'FloatingPanel_panel__exxnv76';
 var panelHeightVar = 'var(--panelHeightVar__exxnv73)';
 var panelWidthVar = 'var(--panelWidthVar__exxnv72)';
 var panelZIndexVar = 'var(--panelZIndexVar__exxnv74)';
 var posXVar = 'var(--posXVar__exxnv70)';
 var posYVar = 'var(--posYVar__exxnv71)';
-var resizeHandle = 'FloatingPanel_resizeHandle__exxnv7c';
-var title = 'FloatingPanel_title__exxnv77';
+var resizeHandle = 'FloatingPanel_resizeHandle__exxnv7d';
+var title = 'FloatingPanel_title__exxnv78';
 
-export { collapsibleHidden, collapsibleVisible, header, headerActions, headerButton, panel, panelHeightVar, panelWidthVar, panelZIndexVar, posXVar, posYVar, resizeHandle, title };
+export { collapsibleHidden, collapsibleVisible, header, headerActions, headerButton, managerRoot, panel, panelHeightVar, panelWidthVar, panelZIndexVar, posXVar, posYVar, resizeHandle, title };
 //# sourceMappingURL=FloatingPanel.css.js.map

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.css.js.map

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