entangle-ui 0.9.0 → 0.10.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 '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+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":[null],"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":[null],"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":[null],"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":[null],"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":";;;;;;;;;;;;;;;;;;;"}

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

@@ -1,14 +1,15 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useMemo, useId, useEffect, createContext, useContext } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { cx } from '../../../utils/cx.js';
-import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
-import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
-import { CloseIcon } from '../../Icons/CloseIcon.js';
-import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
+import { useRef, useState, useCallback, useMemo, useId, useEffect, createContext, useContext } from 'react';
 import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
-import { panelZIndexVar, panelHeightVar, panelWidthVar, posYVar, posXVar, header, title, headerActions, headerButton, collapsibleHidden, collapsibleVisible, resizeHandle, panel } from './FloatingPanel.css.js';
+import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { cx } from '../../../utils/cx.js';
+import { managerRoot, panelZIndexVar, panelHeightVar, panelWidthVar, posYVar, posXVar, header, title, headerActions, headerButton, collapsibleHidden, collapsibleVisible, resizeHandle, panel } from './FloatingPanel.css.js';
 
 // --- FloatingManager Context ---
 const FloatingManagerContext = 
@@ -38,8 +39,13 @@ const FloatingManager = ({ baseZIndex = 100, children, }) => {
         const index = stackRef.current.indexOf(id);
         return baseZIndex + (index >= 0 ? index : 0);
     }, [baseZIndex]);
-    const contextValue = useMemo(() => ({ bringToFront, getZIndex, register, unregister }), [revision, bringToFront, getZIndex, register, unregister]);
-    return (jsx(FloatingManagerContext.Provider, { value: contextValue, children: children }));
+    const contextValue = useMemo(() => ({ bringToFront, getZIndex, register, unregister }), 
+    // `revision` is bumped whenever the panel stack changes; it intentionally
+    // busts this memo so consumers re-render and re-read z-indices from the
+    // (otherwise stable) getZIndex, even though it is not read in the factory.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [revision, bringToFront, getZIndex, register, unregister]);
+    return (jsx(FloatingManagerContext.Provider, { value: contextValue, children: jsx("div", { className: managerRoot, children: children }) }));
 };
 FloatingManager.displayName = 'FloatingManager';
 // --- FloatingPanel Component ---
@@ -72,35 +78,65 @@ const FloatingPanel = ({ title: panelTitle, position: controlledPosition, defaul
             setInternalCollapsed(next);
         onCollapsedChange?.(next);
     }, [isCollapsed, controlledCollapsed, onCollapsedChange]);
-    // FloatingManager registration -- use stable id, run once
-    const managerRef = useRef(manager);
-    managerRef.current = manager;
+    const handleCollapseKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleCollapse();
+        }
+    }, [toggleCollapse]);
+    const handleCloseKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClose?.();
+        }
+    }, [onClose]);
+    // FloatingManager registration -- use stable id, run once. Latest manager via
+    // useLatest so the register/unregister effect and handlers read it without
+    // writing a ref during render.
+    const managerRef = useLatest(manager);
     useEffect(() => {
         managerRef.current?.register(id);
+        // Reading the latest manager from the ref at cleanup is intentional.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         return () => managerRef.current?.unregister(id);
+        // Register/unregister exactly once per id. managerRef is a stable useLatest
+        // ref read at both register and unregister time; the manager is read via
+        // the ref because the manager context value changes on every panel
+        // registration and must not re-trigger this effect.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [id]);
     const handleBringToFront = useCallback(() => {
         managerRef.current?.bringToFront(id);
-    }, [id]);
+    }, [id, managerRef]);
     const zIndex = manager?.getZIndex(id) ?? 100;
     // --- Drag ---
     const panelRef = useRef(null);
     const setPanelRef = useMergedRef(panelRef, externalRef);
-    const dragOffsetRef = useRef({ x: 0, y: 0 });
     const handleDragStart = useCallback((e) => {
         e.preventDefault();
         const target = e.currentTarget;
         target.setPointerCapture(e.pointerId);
-        dragOffsetRef.current = {
-            x: e.clientX - pos.x,
-            y: e.clientY - pos.y,
-        };
+        // Track the pointer delta from the drag start, so positioning is
+        // independent of the coordinate space the panel lives in.
+        const startPointer = { x: e.clientX, y: e.clientY };
+        const startPos = { x: pos.x, y: pos.y };
+        const bounds = panelRef.current?.offsetParent?.getBoundingClientRect();
+        const panelRect = panelRef.current?.getBoundingClientRect();
         const handleDragMove = (me) => {
-            const newX = me.clientX - dragOffsetRef.current.x;
-            const newY = me.clientY - dragOffsetRef.current.y;
-            const clampedX = Math.max(0, Math.min(newX, window.innerWidth - 50));
-            const clampedY = Math.max(0, Math.min(newY, window.innerHeight - 30));
-            setPos({ x: clampedX, y: clampedY });
+            const newX = startPos.x + (me.clientX - startPointer.x);
+            const newY = startPos.y + (me.clientY - startPointer.y);
+            // Clamp within the positioned container when one is available,
+            // keeping a small margin of the panel on-screen.
+            const maxX = bounds
+                ? Math.max(0, bounds.width - (panelRect?.width ?? 50))
+                : Number.POSITIVE_INFINITY;
+            const maxY = bounds
+                ? Math.max(0, bounds.height - 30)
+                : Number.POSITIVE_INFINITY;
+            setPos({
+                x: Math.max(0, Math.min(newX, maxX)),
+                y: Math.max(0, Math.min(newY, maxY)),
+            });
         };
         const handleDragEnd = () => {
             target.removeEventListener('pointermove', handleDragMove);
@@ -143,7 +179,7 @@ const FloatingPanel = ({ title: panelTitle, position: controlledPosition, defaul
     return (jsxs("div", { ref: setPanelRef, className: cx(panel, className), "data-testid": testId, role: "dialog", "aria-modal": "false", "aria-label": panelTitle, tabIndex: -1, onPointerDown: handleBringToFront, style: {
             ...style,
             ...inlineVars,
-        }, ...rest, children: [jsxs("div", { className: header, onPointerDown: handleDragStart, "data-testid": "panel-header", children: [jsx("span", { className: title, children: panelTitle }), jsxs("div", { className: headerActions, children: [jsx("span", { className: headerButton, role: "button", tabIndex: 0, onClick: toggleCollapse, "aria-label": isCollapsed ? 'Expand panel' : 'Collapse panel', children: isCollapsed ? (jsx(ChevronDownIcon, { size: "sm", color: "secondary", decorative: true })) : (jsx(ChevronUpIcon, { size: "sm", color: "secondary", decorative: true })) }), closable && onClose && (jsx("span", { className: headerButton, role: "button", tabIndex: 0, onClick: onClose, "aria-label": "Close panel", children: jsx(CloseIcon, { size: "sm", color: "secondary", decorative: true }) }))] })] }), jsx("div", { className: isCollapsed ? collapsibleHidden : collapsibleVisible, children: jsx(ScrollArea, { direction: "both", scrollbarVisibility: "auto", scrollbarWidth: 5, autoFill: true, children: children }) }), resizable && !isCollapsed && (jsx("div", { className: resizeHandle, onPointerDown: handleResizeStart, "data-testid": "resize-handle" }))] }));
+        }, ...rest, children: [jsxs("div", { className: header, onPointerDown: handleDragStart, "data-testid": "panel-header", children: [jsx("span", { className: title, children: panelTitle }), jsxs("div", { className: headerActions, children: [jsx("span", { className: headerButton, role: "button", tabIndex: 0, onClick: toggleCollapse, onKeyDown: handleCollapseKeyDown, "aria-label": isCollapsed ? 'Expand panel' : 'Collapse panel', children: isCollapsed ? (jsx(ChevronDownIcon, { size: "sm", color: "secondary", decorative: true })) : (jsx(ChevronUpIcon, { size: "sm", color: "secondary", decorative: true })) }), closable && onClose && (jsx("span", { className: headerButton, role: "button", tabIndex: 0, onClick: onClose, onKeyDown: handleCloseKeyDown, "aria-label": "Close panel", children: jsx(CloseIcon, { size: "sm", color: "secondary", decorative: true }) }))] })] }), jsx("div", { className: isCollapsed ? collapsibleHidden : collapsibleVisible, children: jsx(ScrollArea, { direction: "both", scrollbarVisibility: "auto", scrollbarWidth: 5, autoFill: true, children: children }) }), resizable && !isCollapsed && (jsx("div", { className: resizeHandle, onPointerDown: handleResizeStart, "data-testid": "resize-handle" }))] }));
 };
 FloatingPanel.displayName = 'FloatingPanel';
 

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.js","sources":["../../../../../../src/components/shell/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AA0CA;AAEA;AACE;AAEF;AAEO;AAIL;;AAGA;;;;;;AAOA;AACE;;;AAIF;AACE;;AACoC;;;;AAKtC;;AAGI;AACF;AAIF;AAKA;AAKF;AAEA;AAEA;;AA6BE;AACA;AACA;;;AAKA;AACA;AAEI;;AACA;AACF;;;AAOF;AACA;AAEI;;AACA;AACF;;;AAMF;AACA;AACE;;;AAEA;;;AAIF;AACA;;AAGE;;AAEF;AAEA;AACE;AACF;;;AAKA;;AAEA;AAEA;;AAGI;AACA;;AAGE;AACA;;AAGF;;;;;;AAMA;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKF;;;AAII;AACA;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAEF;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKA;AACA;AACA;AACA;AACA;AACD;AAED;AAWM;AACA;;AAwDR;AAEA;;"}
+{"version":3,"file":"FloatingPanel.js","sources":["../../../../../../src/components/shell/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AA+CA;AAEA;AACE;AAEF;AAEO;AAIL;;AAGA;;;;;;AAOA;AACE;;;AAIF;AACE;;AACoC;;;;AAKtC;;AAGI;AACF;AAIF;;;;;;AASA;AAKF;AAEA;AAEA;;AA6BE;AACA;AACA;;;AAKA;AACA;AAEI;;AACA;AACF;;;AAOF;AACA;AAEI;;AACA;AACF;;;AAMF;AACA;AACE;;;AAEA;;AAGF;AAEI;;AAEE;;AAEJ;AAIF;AAEI;;;;AAIF;;;;AAOF;;AAGE;;;;;;;;;AASF;AAEA;AACE;AACF;;;AAKA;;AAGA;;AAGI;AACA;;;AAIA;AACA;;;AAIA;AACE;AACA;;;;AAIE;AACA;;AAEA;AACA;AACF;AACE;AACA;AACD;AACH;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKF;;;AAII;AACA;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAEF;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKA;AACA;AACA;AACA;AACA;AACD;AAED;AAWM;AACA;;AA0DR;AAEA;;"}