glirastes 0.3.0 → 0.3.2

package/dist/cjs/react/hooks/use-deepgram-transcription.js

@@ -0,0 +1,329 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeepgramTranscription = useDeepgramTranscription;
+const react_1 = require("react");
+const DEFAULT_LANGUAGE = 'de';
+const CONNECT_TIMEOUT_MS = 5000;
+const SPEECH_STREAM_ENDPOINT = '/api/ai/speech-stream';
+function useDeepgramTranscription(options = {}) {
+    const { language = DEFAULT_LANGUAGE, baseUrl, getToken, onInterimTranscript, onError, } = options;
+    const [isRecording, setIsRecording] = (0, react_1.useState)(false);
+    const [isConnecting, setIsConnecting] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [transcript, setTranscript] = (0, react_1.useState)('');
+    const socketRef = (0, react_1.useRef)(null);
+    const streamRef = (0, react_1.useRef)(null);
+    const audioContextRef = (0, react_1.useRef)(null);
+    const sourceRef = (0, react_1.useRef)(null);
+    const processorRef = (0, react_1.useRef)(null);
+    const connectTimeoutRef = (0, react_1.useRef)(null);
+    const mediaRecorderRef = (0, react_1.useRef)(null);
+    const abortControllerRef = (0, react_1.useRef)(null);
+    const transcriptRef = (0, react_1.useRef)('');
+    const lastFullTextRef = (0, react_1.useRef)('');
+    const clearConnectTimeout = (0, react_1.useCallback)(() => {
+        if (connectTimeoutRef.current) {
+            clearTimeout(connectTimeoutRef.current);
+            connectTimeoutRef.current = null;
+        }
+    }, []);
+    const cleanup = (0, react_1.useCallback)(() => {
+        clearConnectTimeout();
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+        }
+        if (mediaRecorderRef.current) {
+            const recorder = mediaRecorderRef.current;
+            if (recorder.state !== 'inactive') {
+                recorder.stop();
+            }
+            mediaRecorderRef.current = null;
+        }
+        if (processorRef.current) {
+            processorRef.current.disconnect();
+            processorRef.current = null;
+        }
+        if (sourceRef.current) {
+            sourceRef.current.disconnect();
+            sourceRef.current = null;
+        }
+        if (audioContextRef.current) {
+            void audioContextRef.current.close();
+            audioContextRef.current = null;
+        }
+        if (socketRef.current) {
+            const socket = socketRef.current;
+            socket.onopen = null;
+            socket.onmessage = null;
+            socket.onerror = null;
+            socket.onclose = null;
+            if (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING) {
+                socket.close();
+            }
+            socketRef.current = null;
+        }
+        if (streamRef.current) {
+            for (const track of streamRef.current.getTracks()) {
+                track.stop();
+            }
+            streamRef.current = null;
+        }
+    }, [clearConnectTimeout]);
+    (0, react_1.useEffect)(() => cleanup, [cleanup]);
+    const determineTransportAndUrl = (0, react_1.useCallback)((token) => {
+        const tokenParam = token ? `&token=${encodeURIComponent(token)}` : '';
+        if (baseUrl) {
+            const urlLower = baseUrl.toLowerCase();
+            if (urlLower.startsWith('ws://') || urlLower.startsWith('wss://')) {
+                return { transport: 'websocket', url: `${baseUrl}?language=${encodeURIComponent(language)}${tokenParam}` };
+            }
+            else if (urlLower.startsWith('http://') || urlLower.startsWith('https://')) {
+                return { transport: 'http', url: `${baseUrl}?language=${encodeURIComponent(language)}${tokenParam}` };
+            }
+        }
+        // Default: WebSocket from current origin
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${protocol}//${window.location.host}${SPEECH_STREAM_ENDPOINT}?language=${encodeURIComponent(language)}${tokenParam}`;
+        return { transport: 'websocket', url: wsUrl };
+    }, [baseUrl, language]);
+    const handleTranscriptMessage = (0, react_1.useCallback)((data) => {
+        if (data.type === 'error') {
+            const errMsg = data.message ?? 'Transcription error';
+            setError(errMsg);
+            onError?.(errMsg);
+            return;
+        }
+        const text = data.channel?.alternatives?.[0]?.transcript;
+        if (!text)
+            return;
+        if (data.is_final) {
+            if (text.trim()) {
+                transcriptRef.current += (transcriptRef.current ? ' ' : '') + text;
+                setTranscript(transcriptRef.current);
+                lastFullTextRef.current = transcriptRef.current;
+            }
+            return;
+        }
+        const fullText = `${transcriptRef.current}${transcriptRef.current ? ' ' : ''}${text}`;
+        lastFullTextRef.current = fullText;
+        onInterimTranscript?.(fullText);
+    }, [onError, onInterimTranscript]);
+    const startHttpStreaming = (0, react_1.useCallback)(async (stream, url) => {
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        const mediaRecorder = new MediaRecorder(stream, {
+            mimeType: 'audio/webm;codecs=opus',
+        });
+        mediaRecorderRef.current = mediaRecorder;
+        mediaRecorder.start(250); // Send chunks every 250ms
+        try {
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/octet-stream',
+                },
+                body: new ReadableStream({
+                    start(controller) {
+                        mediaRecorder.ondataavailable = (event) => {
+                            if (event.data.size > 0) {
+                                void event.data.arrayBuffer().then((buffer) => {
+                                    controller.enqueue(new Uint8Array(buffer));
+                                });
+                            }
+                        };
+                        mediaRecorder.onstop = () => {
+                            controller.close();
+                        };
+                    },
+                }),
+                // @ts-expect-error - duplex is required for streaming request body but not in TS types yet
+                duplex: 'half',
+                signal: abortController.signal,
+            });
+            if (!response.ok) {
+                throw new Error('HTTP streaming failed');
+            }
+            if (!response.body) {
+                throw new Error('No response body');
+            }
+            setIsConnecting(false);
+            setIsRecording(true);
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            try {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                        break;
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop() ?? '';
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            const jsonStr = line.slice(6);
+                            try {
+                                const data = JSON.parse(jsonStr);
+                                handleTranscriptMessage(data);
+                            }
+                            catch {
+                                // Ignore malformed JSON
+                            }
+                        }
+                    }
+                }
+            }
+            catch (err) {
+                if (abortController.signal.aborted) {
+                    // Normal abort, not an error
+                    return;
+                }
+                throw err;
+            }
+        }
+        catch (err) {
+            if (abortController.signal.aborted) {
+                // Normal abort, not an error
+                return;
+            }
+            const errMsg = err instanceof Error ? err.message : 'Verbindungsfehler';
+            setError(errMsg);
+            onError?.(errMsg);
+            cleanup();
+            setIsRecording(false);
+            setIsConnecting(false);
+        }
+    }, [cleanup, onError, handleTranscriptMessage]);
+    const startWebSocketStreaming = (0, react_1.useCallback)(async (stream, wsUrl) => {
+        const socket = new WebSocket(wsUrl);
+        socketRef.current = socket;
+        await new Promise((resolve, reject) => {
+            connectTimeoutRef.current = setTimeout(() => {
+                reject(new Error('Verbindungs-Timeout'));
+            }, CONNECT_TIMEOUT_MS);
+            socket.onopen = () => {
+                clearConnectTimeout();
+                resolve();
+            };
+            socket.onerror = () => {
+                clearConnectTimeout();
+                reject(new Error('Verbindungsfehler'));
+            };
+        });
+        socket.onmessage = (event) => {
+            try {
+                const payload = typeof event.data === 'string' ? event.data : '';
+                if (!payload)
+                    return;
+                const data = JSON.parse(payload);
+                handleTranscriptMessage(data);
+            }
+            catch {
+                // Ignore malformed messages
+            }
+        };
+        socket.onerror = () => {
+            const errMsg = 'Verbindungsfehler';
+            setError(errMsg);
+            onError?.(errMsg);
+            cleanup();
+            setIsRecording(false);
+            setIsConnecting(false);
+        };
+        socket.onclose = () => {
+            setIsRecording(false);
+            setIsConnecting(false);
+        };
+        const AudioContextCtor = globalThis.AudioContext ??
+            (globalThis.webkitAudioContext);
+        if (!AudioContextCtor) {
+            throw new Error('Browser unterstuetzt keine Audioaufnahme');
+        }
+        const audioContext = new AudioContextCtor({ sampleRate: 16000 });
+        try {
+            await audioContext.audioWorklet.addModule('/audio-worklet-processor.js');
+        }
+        catch {
+            throw new Error('AudioWorklet nicht verfuegbar');
+        }
+        const source = audioContext.createMediaStreamSource(stream);
+        const processor = new AudioWorkletNode(audioContext, 'audio-processor');
+        processor.port.onmessage = (event) => {
+            if (socket.readyState !== WebSocket.OPEN)
+                return;
+            socket.send(event.data.buffer);
+        };
+        source.connect(processor);
+        processor.connect(audioContext.destination);
+        audioContextRef.current = audioContext;
+        sourceRef.current = source;
+        processorRef.current = processor;
+        setIsConnecting(false);
+        setIsRecording(true);
+    }, [clearConnectTimeout, cleanup, onError, handleTranscriptMessage]);
+    const startRecording = (0, react_1.useCallback)(async () => {
+        setError(null);
+        setTranscript('');
+        transcriptRef.current = '';
+        lastFullTextRef.current = '';
+        setIsConnecting(true);
+        try {
+            if (!navigator?.mediaDevices?.getUserMedia) {
+                throw new Error('Browser unterstuetzt keine Audioaufnahme');
+            }
+            let stream;
+            try {
+                stream = await navigator.mediaDevices.getUserMedia({
+                    audio: {
+                        channelCount: 1,
+                        sampleRate: 16000,
+                    },
+                });
+            }
+            catch {
+                throw new Error('Mikrofon-Zugriff verweigert');
+            }
+            streamRef.current = stream;
+            const token = getToken?.() ?? undefined;
+            const { transport, url } = determineTransportAndUrl(token);
+            // For WebSocket, token is required for authentication
+            // For HTTP, cookie-based auth can be used instead
+            if (transport === 'websocket' && !token) {
+                throw new Error('Authentication token required for WebSocket speech stream');
+            }
+            if (transport === 'http') {
+                await startHttpStreaming(stream, url);
+            }
+            else {
+                await startWebSocketStreaming(stream, url);
+            }
+        }
+        catch (err) {
+            const errMsg = err instanceof Error ? err.message : 'Unbekannter Fehler';
+            setError(errMsg);
+            onError?.(errMsg);
+            setIsConnecting(false);
+            setIsRecording(false);
+            cleanup();
+        }
+    }, [cleanup, onError, getToken, determineTransportAndUrl, startHttpStreaming, startWebSocketStreaming]);
+    const stopRecording = (0, react_1.useCallback)(() => {
+        const finalText = lastFullTextRef.current || transcriptRef.current;
+        if (finalText && finalText !== transcriptRef.current) {
+            setTranscript(finalText);
+        }
+        cleanup();
+        setIsRecording(false);
+        setIsConnecting(false);
+        return finalText;
+    }, [cleanup]);
+    return {
+        isRecording,
+        isConnecting,
+        error,
+        transcript,
+        startRecording,
+        stopRecording,
+    };
+}

package/dist/cjs/react/hooks/use-drag-resize-panel.d.ts

@@ -0,0 +1,48 @@
+import { type RefObject, type MouseEvent as ReactMouseEvent } from 'react';
+export interface UseDragResizePanelOptions {
+    panelRef: RefObject<HTMLElement | null>;
+    width: number;
+    height: number;
+    minWidth: number;
+    minHeight: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    snapToCenter?: boolean;
+    snapRadius?: number;
+    edgeThreshold?: number;
+    persistDimensions?: boolean | string;
+    draggable?: boolean;
+    resizable?: boolean;
+}
+export type ResizeEdge = 'top' | 'left' | 'right';
+export interface UseDragResizePanelReturn {
+    position: {
+        x: number;
+        y: number;
+    } | null;
+    size: {
+        width: number;
+        height: number;
+    };
+    isDragging: boolean;
+    isResizing: boolean;
+    activeEdge: ResizeEdge | null;
+    isNearSnapZone: boolean;
+    nearEdge: {
+        top: boolean;
+        left: boolean;
+        right: boolean;
+    };
+    handlers: {
+        onDragStart: (e: ReactMouseEvent<HTMLElement>) => void;
+        onDoubleClickHeader: () => void;
+        onEdgeResizeStart: (edge: ResizeEdge) => (e: ReactMouseEvent<HTMLElement>) => void;
+        onPanelMouseMove: (e: ReactMouseEvent<HTMLElement>) => void;
+        onPanelMouseLeave: () => void;
+    };
+}
+export declare function useDragResizePanel(options: UseDragResizePanelOptions): UseDragResizePanelReturn;

package/dist/cjs/react/hooks/use-drag-resize-panel.js

@@ -0,0 +1,308 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragResizePanel = useDragResizePanel;
+const react_1 = require("react");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const DEFAULT_SNAP_RADIUS = 100;
+const DEFAULT_EDGE_THRESHOLD = 20;
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function readSessionNumber(key) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const stored = sessionStorage.getItem(key);
+        return stored ? Number(stored) : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeSessionNumber(key, value) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        sessionStorage.setItem(key, String(value));
+    }
+    catch {
+        // Ignore errors from private browsing or quota limits
+    }
+}
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+function useDragResizePanel(options) {
+    const { panelRef, width: defaultWidth, height: defaultHeight, minWidth, minHeight, maxWidth, maxHeight, initialPosition, snapToCenter = false, snapRadius = DEFAULT_SNAP_RADIUS, edgeThreshold = DEFAULT_EDGE_THRESHOLD, persistDimensions = false, draggable = true, resizable = true, } = options;
+    const storagePrefix = persistDimensions === true
+        ? 'chat-panel'
+        : typeof persistDimensions === 'string'
+            ? persistDimensions
+            : null;
+    // -----------------------------------------------------------------------
+    // Position state (null = default centered)
+    // -----------------------------------------------------------------------
+    const [position, setPosition] = (0, react_1.useState)(() => initialPosition ?? null);
+    // -----------------------------------------------------------------------
+    // Size state (with optional session-storage persistence)
+    // -----------------------------------------------------------------------
+    const [size, setSize] = (0, react_1.useState)(() => {
+        if (storagePrefix) {
+            const storedWidth = readSessionNumber(`${storagePrefix}-width`);
+            const storedHeight = readSessionNumber(`${storagePrefix}-height`);
+            return {
+                width: storedWidth ?? defaultWidth,
+                height: storedHeight ?? defaultHeight,
+            };
+        }
+        return { width: defaultWidth, height: defaultHeight };
+    });
+    // Sync to incoming prop changes. Without this, the `size` state is
+    // frozen at mount time and consumers updating their `size` / `width` /
+    // `height` props see no effect until a hard reload.
+    (0, react_1.useEffect)(() => {
+        setSize({ width: defaultWidth, height: defaultHeight });
+    }, [defaultWidth, defaultHeight]);
+    // -----------------------------------------------------------------------
+    // Interaction states
+    // -----------------------------------------------------------------------
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [isResizing, setIsResizing] = (0, react_1.useState)(false);
+    const [activeEdge, setActiveEdge] = (0, react_1.useState)(null);
+    const [isNearSnapZone, setIsNearSnapZone] = (0, react_1.useState)(false);
+    const [nearEdge, setNearEdge] = (0, react_1.useState)({ top: false, left: false, right: false });
+    // -----------------------------------------------------------------------
+    // Refs for drag/resize start state (mutable, never trigger re-renders)
+    // -----------------------------------------------------------------------
+    const dragStartRef = (0, react_1.useRef)(null);
+    const resizeStartRef = (0, react_1.useRef)(null);
+    const wasDraggingRef = (0, react_1.useRef)(false);
+    // -----------------------------------------------------------------------
+    // Snap-to-center helpers
+    // -----------------------------------------------------------------------
+    const shouldSnapToCenter = (0, react_1.useCallback)((x, _y) => {
+        if (!snapToCenter || typeof window === 'undefined')
+            return false;
+        const panel = panelRef.current;
+        if (!panel)
+            return false;
+        const viewportCenterX = window.innerWidth / 2;
+        const panelHeight = panel.getBoundingClientRect().height;
+        const defaultY = window.innerHeight - 16 - panelHeight;
+        return (Math.abs(x - viewportCenterX) < snapRadius &&
+            Math.abs(_y - defaultY) < snapRadius);
+    }, [snapToCenter, panelRef, snapRadius]);
+    // -----------------------------------------------------------------------
+    // Drag handlers
+    // -----------------------------------------------------------------------
+    const handleDragStart = (0, react_1.useCallback)((e) => {
+        if (!draggable)
+            return;
+        if (e.button !== 0)
+            return;
+        if (e.target.closest('button'))
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const rect = panel.getBoundingClientRect();
+        // When position is null (centered), the rendering uses
+        // transform: translate(-50%, 0), so x represents the center of the panel.
+        // We compute the initial x as rect.left + rect.width / 2 for smooth drag.
+        dragStartRef.current = {
+            mouseX: e.clientX,
+            mouseY: e.clientY,
+            panelX: position?.x ?? rect.left + rect.width / 2,
+            panelY: position?.y ?? rect.top,
+        };
+        setIsDragging(true);
+        e.preventDefault();
+    }, [draggable, panelRef, position]);
+    const handleDoubleClickHeader = (0, react_1.useCallback)(() => {
+        if (snapToCenter) {
+            setPosition(null);
+        }
+    }, [snapToCenter]);
+    // -----------------------------------------------------------------------
+    // Edge resize handler (memoized, returns a function per edge)
+    // -----------------------------------------------------------------------
+    const handleEdgeResizeStart = (0, react_1.useCallback)((edge) => (e) => {
+        if (!resizable)
+            return;
+        if (e.button !== 0)
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const rect = panel.getBoundingClientRect();
+        resizeStartRef.current = {
+            mouseX: e.clientX,
+            mouseY: e.clientY,
+            width: rect.width,
+            height: rect.height,
+            positionX: position?.x ?? rect.left + rect.width / 2,
+            positionY: position?.y ?? rect.top,
+            edge,
+        };
+        setIsResizing(true);
+        setActiveEdge(edge);
+        e.preventDefault();
+        e.stopPropagation();
+    }, [resizable, panelRef, position]);
+    // -----------------------------------------------------------------------
+    // Edge detection
+    // -----------------------------------------------------------------------
+    const handlePanelMouseMove = (0, react_1.useCallback)((e) => {
+        const panel = panelRef.current;
+        if (!panel || isDragging || isResizing)
+            return;
+        const rect = panel.getBoundingClientRect();
+        setNearEdge({
+            top: e.clientY - rect.top < edgeThreshold,
+            left: e.clientX - rect.left < edgeThreshold,
+            right: e.clientX - rect.left > rect.width - edgeThreshold,
+        });
+    }, [panelRef, isDragging, isResizing, edgeThreshold]);
+    const handlePanelMouseLeave = (0, react_1.useCallback)(() => {
+        if (!isDragging && !isResizing) {
+            setNearEdge({ top: false, left: false, right: false });
+        }
+    }, [isDragging, isResizing]);
+    // -----------------------------------------------------------------------
+    // Persist dimensions to sessionStorage
+    // -----------------------------------------------------------------------
+    (0, react_1.useEffect)(() => {
+        if (storagePrefix) {
+            writeSessionNumber(`${storagePrefix}-width`, size.width);
+            writeSessionNumber(`${storagePrefix}-height`, size.height);
+        }
+    }, [storagePrefix, size.width, size.height]);
+    // -----------------------------------------------------------------------
+    // Global mouse listeners for active drag / resize
+    // -----------------------------------------------------------------------
+    (0, react_1.useEffect)(() => {
+        if (!isDragging && !isResizing)
+            return;
+        // Prevent accidental text selection during drag/resize
+        const prevUserSelect = document.body.style.userSelect;
+        document.body.style.userSelect = 'none';
+        const onMouseMove = (e) => {
+            if (isDragging && dragStartRef.current) {
+                const newX = dragStartRef.current.panelX +
+                    (e.clientX - dragStartRef.current.mouseX);
+                const newY = dragStartRef.current.panelY +
+                    (e.clientY - dragStartRef.current.mouseY);
+                setPosition({ x: newX, y: newY });
+                if (snapToCenter) {
+                    setIsNearSnapZone(shouldSnapToCenter(newX, newY));
+                }
+            }
+            if (isResizing && resizeStartRef.current) {
+                const start = resizeStartRef.current;
+                if (start.edge === 'top') {
+                    const deltaY = start.mouseY - e.clientY;
+                    let newHeight = start.height + deltaY;
+                    newHeight = Math.max(minHeight, newHeight);
+                    if (maxHeight != null)
+                        newHeight = Math.min(maxHeight, newHeight);
+                    const actualDelta = newHeight - start.height;
+                    setSize((prev) => ({ ...prev, height: newHeight }));
+                    // Move position up so the bottom edge stays anchored
+                    if (start.positionY != null) {
+                        setPosition((prev) => prev ? { ...prev, y: start.positionY - actualDelta } : prev);
+                    }
+                }
+                else if (start.edge === 'left') {
+                    const deltaX = start.mouseX - e.clientX;
+                    let newWidth = start.width + deltaX;
+                    newWidth = Math.max(minWidth, newWidth);
+                    if (maxWidth != null)
+                        newWidth = Math.min(maxWidth, newWidth);
+                    const actualDelta = newWidth - start.width;
+                    setSize((prev) => ({ ...prev, width: newWidth }));
+                    // Shift center left so the right edge stays anchored
+                    // (position.x is center due to translate(-50%, 0))
+                    if (start.positionX != null) {
+                        setPosition((prev) => prev ? { ...prev, x: start.positionX - actualDelta / 2 } : prev);
+                    }
+                }
+                else {
+                    const deltaX = e.clientX - start.mouseX;
+                    let newWidth = start.width + deltaX;
+                    newWidth = Math.max(minWidth, newWidth);
+                    if (maxWidth != null)
+                        newWidth = Math.min(maxWidth, newWidth);
+                    const actualDelta = newWidth - start.width;
+                    setSize((prev) => ({ ...prev, width: newWidth }));
+                    // Shift center right so the left edge stays anchored
+                    if (start.positionX != null) {
+                        setPosition((prev) => prev ? { ...prev, x: start.positionX + actualDelta / 2 } : prev);
+                    }
+                }
+            }
+        };
+        const onMouseUp = () => {
+            if (isDragging) {
+                wasDraggingRef.current = true;
+                setIsDragging(false);
+                setIsNearSnapZone(false);
+                dragStartRef.current = null;
+            }
+            if (isResizing) {
+                setIsResizing(false);
+                setActiveEdge(null);
+                resizeStartRef.current = null;
+            }
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+        return () => {
+            document.body.style.userSelect = prevUserSelect;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+    }, [
+        isDragging,
+        isResizing,
+        snapToCenter,
+        shouldSnapToCenter,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+    ]);
+    // -----------------------------------------------------------------------
+    // Snap-on-release: detect transition from isDragging=true to false
+    // -----------------------------------------------------------------------
+    (0, react_1.useEffect)(() => {
+        if (!isDragging && wasDraggingRef.current) {
+            wasDraggingRef.current = false;
+            if (snapToCenter &&
+                position &&
+                shouldSnapToCenter(position.x, position.y)) {
+                setPosition(null);
+            }
+        }
+    }, [isDragging, snapToCenter, position, shouldSnapToCenter]);
+    // -----------------------------------------------------------------------
+    // Return
+    // -----------------------------------------------------------------------
+    return {
+        position,
+        size,
+        isDragging,
+        isResizing,
+        activeEdge,
+        isNearSnapZone,
+        nearEdge,
+        handlers: {
+            onDragStart: handleDragStart,
+            onDoubleClickHeader: handleDoubleClickHeader,
+            onEdgeResizeStart: handleEdgeResizeStart,
+            onPanelMouseMove: handlePanelMouseMove,
+            onPanelMouseLeave: handlePanelMouseLeave,
+        },
+    };
+}