entangle-ui 0.9.0 → 0.11.0

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":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useId,\n  useMemo,\n} from 'react';\n\nimport { ChevronDownIcon } from '@/components/Icons/ChevronDownIcon';\nimport { ChevronUpIcon } from '@/components/Icons/ChevronUpIcon';\nimport { CloseIcon } from '@/components/Icons/CloseIcon';\nimport { ScrollArea } from '@/components/layout/ScrollArea';\nimport { useLatest } from '@/hooks/useLatest';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { cx } from '@/utils/cx';\n\nimport {\n  posXVar,\n  posYVar,\n  panelWidthVar,\n  panelHeightVar,\n  panelZIndexVar,\n  managerRoot,\n  panel,\n  header,\n  title,\n  headerActions,\n  headerButton,\n  collapsibleVisible,\n  collapsibleHidden,\n  resizeHandle,\n} from './FloatingPanel.css';\n\nimport type {\n  FloatingPanelProps,\n  FloatingManagerProps,\n  FloatingManagerContextValue,\n  Position,\n  FloatingPanelSize,\n} from './FloatingPanel.types';\n\n// --- FloatingManager Context ---\n\nconst FloatingManagerContext =\n  /*#__PURE__*/ createContext<FloatingManagerContextValue | null>(null);\n\nconst useFloatingManager = () => useContext(FloatingManagerContext);\n\nexport const FloatingManager: React.FC<FloatingManagerProps> = ({\n  baseZIndex = 100,\n  children,\n}) => {\n  const stackRef = useRef<string[]>([]);\n  const [revision, setRevision] = useState(0);\n\n  const register = useCallback((id: string) => {\n    if (!stackRef.current.includes(id)) {\n      stackRef.current = [...stackRef.current, id];\n      setRevision(c => c + 1);\n    }\n  }, []);\n\n  const unregister = useCallback((id: string) => {\n    stackRef.current = stackRef.current.filter(s => s !== id);\n    setRevision(c => c + 1);\n  }, []);\n\n  const bringToFront = useCallback((id: string) => {\n    const stack = stackRef.current;\n    if (stack[stack.length - 1] === id) return; // already on top\n    stackRef.current = [...stack.filter(s => s !== id), id];\n    setRevision(c => c + 1);\n  }, []);\n\n  const getZIndex = useCallback(\n    (id: string) => {\n      const index = stackRef.current.indexOf(id);\n      return baseZIndex + (index >= 0 ? index : 0);\n    },\n    [baseZIndex]\n  );\n\n  const contextValue = useMemo<FloatingManagerContextValue>(\n    () => ({ bringToFront, getZIndex, register, unregister }),\n    // `revision` is bumped whenever the panel stack changes; it intentionally\n    // busts this memo so consumers re-render and re-read z-indices from the\n    // (otherwise stable) getZIndex, even though it is not read in the factory.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [revision, bringToFront, getZIndex, register, unregister]\n  );\n\n  return (\n    <FloatingManagerContext.Provider value={contextValue}>\n      <div className={managerRoot}>{children}</div>\n    </FloatingManagerContext.Provider>\n  );\n};\n\nFloatingManager.displayName = 'FloatingManager';\n\n// --- FloatingPanel Component ---\n\nexport const FloatingPanel: React.FC<FloatingPanelProps> = ({\n  title: panelTitle,\n  position: controlledPosition,\n  defaultPosition = { x: 100, y: 100 },\n  onPositionChange,\n  size: controlledSize,\n  defaultSize = { width: 280, height: 200 },\n  onSizeChange,\n  minWidth = 150,\n  minHeight = 100,\n  maxWidth = Infinity,\n  maxHeight = Infinity,\n  collapsed: controlledCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  onClose,\n  closable = true,\n  resizable = true,\n  children,\n\n  className,\n  panelId,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const generatedId = useId();\n  const id = panelId ?? generatedId;\n  const manager = useFloatingManager();\n\n  // Position state\n  const [internalPosition, setInternalPosition] =\n    useState<Position>(defaultPosition);\n  const pos = controlledPosition ?? internalPosition;\n  const setPos = useCallback(\n    (p: Position) => {\n      if (!controlledPosition) setInternalPosition(p);\n      onPositionChange?.(p);\n    },\n    [controlledPosition, onPositionChange]\n  );\n\n  // Size state\n  const [internalSize, setInternalSize] =\n    useState<FloatingPanelSize>(defaultSize);\n  const currentSize = controlledSize ?? internalSize;\n  const setSize = useCallback(\n    (s: FloatingPanelSize) => {\n      if (!controlledSize) setInternalSize(s);\n      onSizeChange?.(s);\n    },\n    [controlledSize, onSizeChange]\n  );\n\n  // Collapsed state\n  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n  const isCollapsed = controlledCollapsed ?? internalCollapsed;\n  const toggleCollapse = useCallback(() => {\n    const next = !isCollapsed;\n    if (controlledCollapsed === undefined) setInternalCollapsed(next);\n    onCollapsedChange?.(next);\n  }, [isCollapsed, controlledCollapsed, onCollapsedChange]);\n\n  const handleCollapseKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        toggleCollapse();\n      }\n    },\n    [toggleCollapse]\n  );\n\n  const handleCloseKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onClose?.();\n      }\n    },\n    [onClose]\n  );\n\n  // FloatingManager registration -- use stable id, run once. Latest manager via\n  // useLatest so the register/unregister effect and handlers read it without\n  // writing a ref during render.\n  const managerRef = useLatest(manager);\n\n  useEffect(() => {\n    managerRef.current?.register(id);\n    // Reading the latest manager from the ref at cleanup is intentional.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    return () => managerRef.current?.unregister(id);\n    // Register/unregister exactly once per id. managerRef is a stable useLatest\n    // ref read at both register and unregister time; the manager is read via\n    // the ref because the manager context value changes on every panel\n    // registration and must not re-trigger this effect.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  const handleBringToFront = useCallback(() => {\n    managerRef.current?.bringToFront(id);\n  }, [id, managerRef]);\n\n  const zIndex = manager?.getZIndex(id) ?? 100;\n\n  // --- Drag ---\n  const panelRef = useRef<HTMLDivElement>(null);\n  const setPanelRef = useMergedRef<HTMLDivElement>(panelRef, externalRef);\n\n  const handleDragStart = useCallback(\n    (e: React.PointerEvent) => {\n      e.preventDefault();\n      const target = e.currentTarget as HTMLElement;\n      target.setPointerCapture(e.pointerId);\n\n      // Track the pointer delta from the drag start, so positioning is\n      // independent of the coordinate space the panel lives in.\n      const startPointer = { x: e.clientX, y: e.clientY };\n      const startPos = { x: pos.x, y: pos.y };\n      const bounds = panelRef.current?.offsetParent?.getBoundingClientRect();\n      const panelRect = panelRef.current?.getBoundingClientRect();\n\n      const handleDragMove = (me: PointerEvent) => {\n        const newX = startPos.x + (me.clientX - startPointer.x);\n        const newY = startPos.y + (me.clientY - startPointer.y);\n        // Clamp within the positioned container when one is available,\n        // keeping a small margin of the panel on-screen.\n        const maxX = bounds\n          ? Math.max(0, bounds.width - (panelRect?.width ?? 50))\n          : Number.POSITIVE_INFINITY;\n        const maxY = bounds\n          ? Math.max(0, bounds.height - 30)\n          : Number.POSITIVE_INFINITY;\n        setPos({\n          x: Math.max(0, Math.min(newX, maxX)),\n          y: Math.max(0, Math.min(newY, maxY)),\n        });\n      };\n\n      const handleDragEnd = () => {\n        target.removeEventListener('pointermove', handleDragMove);\n        target.removeEventListener('pointerup', handleDragEnd);\n      };\n\n      target.addEventListener('pointermove', handleDragMove);\n      target.addEventListener('pointerup', handleDragEnd);\n    },\n    [pos, setPos]\n  );\n\n  // --- Resize (bottom-right corner only) ---\n  const handleResizeStart = useCallback(\n    (e: React.PointerEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const target = e.currentTarget as HTMLElement;\n      target.setPointerCapture(e.pointerId);\n\n      const startX = e.clientX;\n      const startY = e.clientY;\n      const startW = currentSize.width;\n      const startH = currentSize.height;\n\n      const handleResizeMove = (me: PointerEvent) => {\n        const dx = me.clientX - startX;\n        const dy = me.clientY - startY;\n        const newW = Math.min(maxWidth, Math.max(minWidth, startW + dx));\n        const newH = Math.min(maxHeight, Math.max(minHeight, startH + dy));\n        setSize({ width: newW, height: newH });\n      };\n\n      const handleResizeEnd = () => {\n        target.removeEventListener('pointermove', handleResizeMove);\n        target.removeEventListener('pointerup', handleResizeEnd);\n      };\n\n      target.addEventListener('pointermove', handleResizeMove);\n      target.addEventListener('pointerup', handleResizeEnd);\n    },\n    [currentSize, minWidth, minHeight, maxWidth, maxHeight, setSize]\n  );\n\n  const inlineVars = assignInlineVars({\n    [posXVar]: `${pos.x}px`,\n    [posYVar]: `${pos.y}px`,\n    [panelWidthVar]: `${currentSize.width}px`,\n    [panelHeightVar]: isCollapsed ? 'auto' : `${currentSize.height}px`,\n    [panelZIndexVar]: String(zIndex),\n  });\n\n  return (\n    <div\n      ref={setPanelRef}\n      className={cx(panel, className)}\n      data-testid={testId}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-label={panelTitle}\n      tabIndex={-1}\n      onPointerDown={handleBringToFront}\n      style={{\n        ...style,\n        ...inlineVars,\n      }}\n      {...rest}\n    >\n      <div\n        className={header}\n        onPointerDown={handleDragStart}\n        data-testid=\"panel-header\"\n      >\n        <span className={title}>{panelTitle}</span>\n        <div className={headerActions}>\n          <span\n            className={headerButton}\n            role=\"button\"\n            tabIndex={0}\n            onClick={toggleCollapse}\n            onKeyDown={handleCollapseKeyDown}\n            aria-label={isCollapsed ? 'Expand panel' : 'Collapse panel'}\n          >\n            {isCollapsed ? (\n              <ChevronDownIcon size=\"sm\" color=\"secondary\" decorative />\n            ) : (\n              <ChevronUpIcon size=\"sm\" color=\"secondary\" decorative />\n            )}\n          </span>\n          {closable && onClose && (\n            <span\n              className={headerButton}\n              role=\"button\"\n              tabIndex={0}\n              onClick={onClose}\n              onKeyDown={handleCloseKeyDown}\n              aria-label=\"Close panel\"\n            >\n              <CloseIcon size=\"sm\" color=\"secondary\" decorative />\n            </span>\n          )}\n        </div>\n      </div>\n      <div className={isCollapsed ? collapsibleHidden : collapsibleVisible}>\n        <ScrollArea\n          direction=\"both\"\n          scrollbarVisibility=\"auto\"\n          scrollbarWidth={5}\n          autoFill\n        >\n          {children}\n        </ScrollArea>\n      </div>\n      {resizable && !isCollapsed && (\n        <div\n          className={resizeHandle}\n          onPointerDown={handleResizeStart}\n          data-testid=\"resize-handle\"\n        />\n      )}\n    </div>\n  );\n};\n\nFloatingPanel.displayName = 'FloatingPanel';\n"],"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;;"}

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

@@ -34,6 +34,7 @@ const MenuBarItem = ({ onClick, shortcut: shortcutText, disabled = false, icon,
 };
 MenuBarItem.displayName = 'MenuBar.Item';
 const MenuBarSub = ({ label, children, disabled = false, className, style, testId, ref, ...rest }) => {
+    const { menuOffset } = useMenuBar();
     const [open, setOpen] = useState(false);
     const closeTimer = useRef(null);
     const handleEnter = useCallback(() => {
@@ -45,7 +46,9 @@ const MenuBarSub = ({ label, children, disabled = false, className, style, testI
             setOpen(true);
     }, [disabled]);
     const handleLeave = useCallback(() => {
-        closeTimer.current = setTimeout(() => setOpen(false), SUBMENU_CLOSE_DELAY);
+        closeTimer.current = setTimeout(() => {
+            setOpen(false);
+        }, SUBMENU_CLOSE_DELAY);
     }, []);
     useEffect(() => {
         return () => {
@@ -53,7 +56,7 @@ const MenuBarSub = ({ label, children, disabled = false, className, style, testI
                 clearTimeout(closeTimer.current);
         };
     }, []);
-    return (jsxs("div", { ref: ref, className: cx(subContainer, className), style: style, "data-testid": testId, onMouseEnter: handleEnter, onMouseLeave: handleLeave, ...rest, children: [jsxs("button", { className: subTrigger, role: "menuitem", "aria-haspopup": "true", "aria-expanded": open, disabled: disabled, type: "button", tabIndex: -1, children: [jsx("span", { children: label }), jsx(ChevronRight, {})] }), open && (jsx("div", { className: subDropdown, role: "menu", children: children }))] }));
+    return (jsxs("div", { ref: ref, className: cx(subContainer, className), style: style, "data-testid": testId, onMouseEnter: handleEnter, onMouseLeave: handleLeave, ...rest, children: [jsxs("button", { className: subTrigger, role: "menuitem", "aria-haspopup": "true", "aria-expanded": open, disabled: disabled, type: "button", tabIndex: -1, children: [jsx("span", { children: label }), jsx(ChevronRight, {})] }), open && (jsx("div", { className: subDropdown, role: "menu", style: { left: `calc(100% + ${menuOffset}px)` }, children: children }))] }));
 };
 MenuBarSub.displayName = 'MenuBar.Sub';
 const MenuBarSeparator = ({ className, style, testId, ref, ...rest }) => {
@@ -69,7 +72,9 @@ const MenuBarMenu = ({ label, children, disabled = false, className, style, test
     const isOpen = openMenuId === menuId;
     useEffect(() => {
         registerMenu(menuId);
-        return () => unregisterMenu(menuId);
+        return () => {
+            unregisterMenu(menuId);
+        };
     }, [menuId, registerMenu, unregisterMenu]);
     const handleClick = useCallback(() => {
         if (disabled)
@@ -129,17 +134,23 @@ const MenuBarMenu = ({ label, children, disabled = false, className, style, test
             }
         };
         document.addEventListener('mousedown', handleOutsideClick);
-        return () => document.removeEventListener('mousedown', handleOutsideClick);
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
     }, [isOpen, setOpenMenuId]);
-    return (jsxs("div", { ref: ref, className: cx(menuContainer, className), style: style, "data-testid": testId, ...rest, children: [jsx("button", { ref: triggerRef, className: trigger({ active: isOpen }), onClick: handleClick, onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, disabled: disabled, type: "button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, tabIndex: -1, children: label }), isOpen && (jsx("div", { ref: dropdownRef, className: dropdown, role: "menu", "aria-label": label, onKeyDown: handleDropdownKeyDown, style: { top: `calc(100% + ${menuOffset}px)` }, children: children }))] }));
+    return (jsxs("div", { ref: ref, className: cx(menuContainer, className), style: style, "data-testid": testId, ...rest, children: [jsx("button", { ref: triggerRef, className: trigger({ active: isOpen }), onClick: handleClick, onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, disabled: disabled, type: "button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, tabIndex: -1, children: label }), isOpen && (jsx("div", { ref: dropdownRef, className: dropdown, role: "menu", "aria-label": label, 
+                // Focusable programmatically so the open menu can receive focus and
+                // handle arrow-key navigation across its items.
+                tabIndex: -1, onKeyDown: handleDropdownKeyDown, style: { top: `calc(100% + ${menuOffset}px)` }, children: children }))] }));
 };
 MenuBarMenu.displayName = 'MenuBar.Menu';
 // --- Root Component ---
 const MenuBarRoot = ({ size = 'md', menuOffset = 2, children, className, style, testId, ref: externalRef, ...rest }) => {
     const [openMenuId, setOpenMenuId] = useState(null);
-    const menuIdsRef = useRef([]);
+    // Registered child menu ids, kept in state so the context value stays
+    // reactive (previously a ref + forceUpdate, which read the ref during render).
+    const [menuIds, setMenuIds] = useState([]);
     const safeMenuOffset = Math.max(0, menuOffset);
-    const [, forceUpdate] = useState(0);
     const barRef = useRef(null);
     const setBarRef = useMemo(() => (node) => {
         barRef.current = node;
@@ -147,19 +158,14 @@ const MenuBarRoot = ({ size = 'md', menuOffset = 2, children, className, style,
             externalRef(node);
         }
         else if (externalRef && typeof externalRef === 'object') {
-            externalRef.current =
-                node;
+            externalRef.current = node;
         }
     }, [externalRef]);
     const registerMenu = useCallback((id) => {
-        if (!menuIdsRef.current.includes(id)) {
-            menuIdsRef.current = [...menuIdsRef.current, id];
-            forceUpdate(c => c + 1);
-        }
+        setMenuIds(prev => (prev.includes(id) ? prev : [...prev, id]));
     }, []);
     const unregisterMenu = useCallback((id) => {
-        menuIdsRef.current = menuIdsRef.current.filter(m => m !== id);
-        forceUpdate(c => c + 1);
+        setMenuIds(prev => prev.filter(m => m !== id));
     }, []);
     const handleBarKeyDown = useCallback((e) => {
         if (!barRef.current)
@@ -191,7 +197,7 @@ const MenuBarRoot = ({ size = 'md', menuOffset = 2, children, className, style,
         setOpenMenuId,
         registerMenu,
         unregisterMenu,
-        menuIds: menuIdsRef.current,
+        menuIds,
     }), [
         size,
         safeMenuOffset,
@@ -199,6 +205,7 @@ const MenuBarRoot = ({ size = 'md', menuOffset = 2, children, className, style,
         setOpenMenuId,
         registerMenu,
         unregisterMenu,
+        menuIds,
     ]);
     return (jsx(MenuBarContext.Provider, { value: contextValue, children: jsx("div", { ref: setBarRef, className: cx(menuBarRoot({ size }), className), style: style, "data-testid": testId, role: "menubar", onKeyDown: handleBarKeyDown, tabIndex: 0, ...rest, children: children }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.js","sources":["../../../../../../src/components/shell/MenuBar/MenuBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmCA;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AAEA;AAEA;AAEA;AAGM;AACA;AACD;AAML;AAEA;AAaE;AAEA;;AAEI;;;AAGJ;AAEA;AAkBF;AAEA;AAEA;;AAYE;AAEA;AACE;AACE;AACA;;AAEF;;AACF;AAEA;AACE;;;AAIA;;AAC0B;AAC1B;;AAGF;AA6BF;AAEA;AAEA;AAOE;AAUF;AAEA;AAEA;AAEA;AAWE;AACA;AAOA;AACA;AACA;;;AAIE;;AAGF;AACE;;;;AAIF;;;;;;AAOA;AAEI;;;;;;;;;AAWA;;;AAGE;;AAEJ;AAIF;AAEI;;AAOA;;AAEE;AACA;;AACK;;;AAIL;;AACK;;;AAGL;;AAEJ;;;AAMA;;AAEA;AACE;;;;;AAOF;AAEA;;AAEF;;AAuCF;AAEA;AAEA;AAEA;;AAYE;;;AAGA;;AAGI;AACA;;;AAEO;AACJ;AACC;;AAEN;AAIF;;;;;;AAOA;AACE;;;AAIF;;;AAII;;AASA;;AAEE;AACA;;AAEA;AACE;;;AAEG;;;AAIL;AACA;AACE;;;AAGN;AAIF;;AAGI;;;;;;AAMD;;;;;;;AAQA;;AAmBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"MenuBar.js","sources":["src/components/shell/MenuBar/MenuBar.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useId,\n  KeyboardEvent,\n  useMemo,\n} from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  menuBarRoot,\n  menuContainer,\n  trigger,\n  dropdown,\n  menuItem,\n  shortcut,\n  separator,\n  subTrigger,\n  subDropdown,\n  subContainer,\n} from './MenuBar.css';\n\nimport type {\n  MenuBarProps,\n  MenuBarMenuProps,\n  MenuBarItemProps,\n  MenuBarSubProps,\n  MenuBarSeparatorProps,\n  MenuBarContextValue,\n} from './MenuBar.types';\n\n// --- Context ---\n\nconst MenuBarContext = /*#__PURE__*/ createContext<MenuBarContextValue>({\n  size: 'md',\n  menuOffset: 2,\n  openMenuId: null,\n  setOpenMenuId: () => {},\n  registerMenu: () => {},\n  unregisterMenu: () => {},\n  menuIds: [],\n});\n\nconst useMenuBar = () => useContext(MenuBarContext);\n\nconst SUBMENU_CLOSE_DELAY = 150;\n\nconst MENU_ITEM_SELECTOR = '[role=\"menuitem\"]:not(:disabled)';\n\nconst ChevronRight = () => (\n  <span\n    style={{\n      fontSize: '8px',\n      lineHeight: 1,\n    }}\n  >\n    &#x25B6;\n  </span>\n);\n\n// --- Sub-components ---\n\nconst MenuBarItem: React.FC<MenuBarItemProps> = ({\n  onClick,\n  shortcut: shortcutText,\n  disabled = false,\n  icon,\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { setOpenMenuId } = useMenuBar();\n\n  const handleClick = useCallback(() => {\n    if (onClick) {\n      onClick();\n      setOpenMenuId(null);\n    }\n  }, [onClick, setOpenMenuId]);\n\n  return (\n    <button\n      role=\"menuitem\"\n      onClick={handleClick}\n      disabled={disabled}\n      className={cx(menuItem, className)}\n      style={style}\n      data-testid={testId}\n      ref={ref}\n      type=\"button\"\n      tabIndex={-1}\n      {...rest}\n    >\n      {icon && <span>{icon}</span>}\n      <span>{children}</span>\n      {shortcutText && <span className={shortcut}>{shortcutText}</span>}\n    </button>\n  );\n};\n\nMenuBarItem.displayName = 'MenuBar.Item';\n\nconst MenuBarSub: React.FC<MenuBarSubProps> = ({\n  label,\n  children,\n  disabled = false,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { menuOffset } = useMenuBar();\n  const [open, setOpen] = useState(false);\n  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleEnter = useCallback(() => {\n    if (closeTimer.current) {\n      clearTimeout(closeTimer.current);\n      closeTimer.current = null;\n    }\n    if (!disabled) setOpen(true);\n  }, [disabled]);\n\n  const handleLeave = useCallback(() => {\n    closeTimer.current = setTimeout(() => {\n      setOpen(false);\n    }, SUBMENU_CLOSE_DELAY);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (closeTimer.current) clearTimeout(closeTimer.current);\n    };\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(subContainer, className)}\n      style={style}\n      data-testid={testId}\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      {...rest}\n    >\n      <button\n        className={subTrigger}\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        aria-expanded={open}\n        disabled={disabled}\n        type=\"button\"\n        tabIndex={-1}\n      >\n        <span>{label}</span>\n        <ChevronRight />\n      </button>\n      {open && (\n        <div\n          className={subDropdown}\n          role=\"menu\"\n          style={{ left: `calc(100% + ${menuOffset}px)` }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nMenuBarSub.displayName = 'MenuBar.Sub';\n\nconst MenuBarSeparator: React.FC<MenuBarSeparatorProps> = ({\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  return (\n    <div\n      role=\"separator\"\n      className={cx(separator, className)}\n      style={style}\n      data-testid={testId}\n      ref={ref}\n      {...rest}\n    />\n  );\n};\n\nMenuBarSeparator.displayName = 'MenuBar.Separator';\n\n// --- MenuBarMenu (top-level dropdown trigger) ---\n\nconst MenuBarMenu: React.FC<MenuBarMenuProps> = ({\n  label,\n  children,\n  disabled = false,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const menuId = useId();\n  const {\n    openMenuId,\n    setOpenMenuId,\n    registerMenu,\n    unregisterMenu,\n    menuOffset,\n  } = useMenuBar();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const isOpen = openMenuId === menuId;\n\n  useEffect(() => {\n    registerMenu(menuId);\n    return () => {\n      unregisterMenu(menuId);\n    };\n  }, [menuId, registerMenu, unregisterMenu]);\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    setOpenMenuId(isOpen ? null : menuId);\n  }, [disabled, isOpen, menuId, setOpenMenuId]);\n\n  const handleMouseEnter = useCallback(() => {\n    // Open on hover only when another menu is already open\n    if (openMenuId !== null && openMenuId !== menuId && !disabled) {\n      setOpenMenuId(menuId);\n    }\n  }, [openMenuId, menuId, disabled, setOpenMenuId]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        setOpenMenuId(menuId);\n        // Focus first item in dropdown after open\n        setTimeout(() => {\n          const firstItem = dropdownRef.current?.querySelector(\n            MENU_ITEM_SELECTOR\n          ) as HTMLElement | null;\n          firstItem?.focus();\n        }, 0);\n      }\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpenMenuId(null);\n        triggerRef.current?.focus();\n      }\n    },\n    [menuId, setOpenMenuId]\n  );\n\n  const handleDropdownKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const items = Array.from(\n        dropdownRef.current?.querySelectorAll<HTMLElement>(\n          MENU_ITEM_SELECTOR\n        ) ?? []\n      );\n      const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        const next = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n        items[next]?.focus();\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        const prev =\n          currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n        items[prev]?.focus();\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpenMenuId(null);\n        triggerRef.current?.focus();\n      }\n    },\n    [setOpenMenuId]\n  );\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleOutsideClick = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (\n        !triggerRef.current?.contains(target) &&\n        !dropdownRef.current?.contains(target)\n      ) {\n        setOpenMenuId(null);\n      }\n    };\n\n    document.addEventListener('mousedown', handleOutsideClick);\n    return () => {\n      document.removeEventListener('mousedown', handleOutsideClick);\n    };\n  }, [isOpen, setOpenMenuId]);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(menuContainer, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <button\n        ref={triggerRef}\n        className={trigger({ active: isOpen })}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        type=\"button\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        tabIndex={-1}\n      >\n        {label}\n      </button>\n      {isOpen && (\n        <div\n          ref={dropdownRef}\n          className={dropdown}\n          role=\"menu\"\n          aria-label={label}\n          // Focusable programmatically so the open menu can receive focus and\n          // handle arrow-key navigation across its items.\n          tabIndex={-1}\n          onKeyDown={handleDropdownKeyDown}\n          style={{ top: `calc(100% + ${menuOffset}px)` }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nMenuBarMenu.displayName = 'MenuBar.Menu';\n\n// --- Root Component ---\n\nconst MenuBarRoot: React.FC<MenuBarProps> = ({\n  size = 'md',\n  menuOffset = 2,\n  children,\n\n  className,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const [openMenuId, setOpenMenuId] = useState<string | null>(null);\n  // Registered child menu ids, kept in state so the context value stays\n  // reactive (previously a ref + forceUpdate, which read the ref during render).\n  const [menuIds, setMenuIds] = useState<string[]>([]);\n  const safeMenuOffset = Math.max(0, menuOffset);\n  const barRef = useRef<HTMLDivElement>(null);\n  const setBarRef = useMemo(\n    () => (node: HTMLDivElement | null) => {\n      barRef.current = node;\n      if (typeof externalRef === 'function') {\n        externalRef(node);\n      } else if (externalRef && typeof externalRef === 'object') {\n        externalRef.current = node;\n      }\n    },\n    [externalRef]\n  );\n\n  const registerMenu = useCallback((id: string) => {\n    setMenuIds(prev => (prev.includes(id) ? prev : [...prev, id]));\n  }, []);\n\n  const unregisterMenu = useCallback((id: string) => {\n    setMenuIds(prev => prev.filter(m => m !== id));\n  }, []);\n\n  const handleBarKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (!barRef.current) return;\n\n      const triggers = Array.from(\n        barRef.current.querySelectorAll<HTMLElement>(\n          ':scope > div > [role=\"menuitem\"]'\n        )\n      );\n      const currentIndex = triggers.indexOf(\n        document.activeElement as HTMLElement\n      );\n\n      if (e.key === 'ArrowRight') {\n        e.preventDefault();\n        const next = currentIndex + 1 < triggers.length ? currentIndex + 1 : 0;\n        triggers[next]?.focus();\n        // If menu is open, switch to next menu\n        if (openMenuId !== null) {\n          triggers[next]?.click();\n        }\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        const prev =\n          currentIndex - 1 >= 0 ? currentIndex - 1 : triggers.length - 1;\n        triggers[prev]?.focus();\n        if (openMenuId !== null) {\n          triggers[prev]?.click();\n        }\n      }\n    },\n    [openMenuId]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      size,\n      menuOffset: safeMenuOffset,\n      openMenuId,\n      setOpenMenuId,\n      registerMenu,\n      unregisterMenu,\n      menuIds,\n    }),\n    [\n      size,\n      safeMenuOffset,\n      openMenuId,\n      setOpenMenuId,\n      registerMenu,\n      unregisterMenu,\n      menuIds,\n    ]\n  );\n\n  return (\n    <MenuBarContext.Provider value={contextValue}>\n      <div\n        ref={setBarRef}\n        className={cx(menuBarRoot({ size }), className)}\n        style={style}\n        data-testid={testId}\n        role=\"menubar\"\n        onKeyDown={handleBarKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {children}\n      </div>\n    </MenuBarContext.Provider>\n  );\n};\n\nMenuBarRoot.displayName = 'MenuBar';\n\n// --- Compound Component ---\n\nexport const MenuBar = /*#__PURE__*/ Object.assign(MenuBarRoot, {\n  Menu: MenuBarMenu,\n  Item: MenuBarItem,\n  Sub: MenuBarSub,\n  Separator: MenuBarSeparator,\n});\n"],"names":[],"mappings":";;;;;;AAsCA;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AAEA;AAEA;AAEA;AAGM;AACA;AACD;AAML;AAEA;AAaE;AAEA;;AAEI;;;AAGJ;AAEA;AAkBF;AAEA;AAEA;AAWE;;AAEA;AAEA;AACE;AACE;AACA;;AAEF;;AACF;AAEA;AACE;;;;;AAMA;;AAC0B;AAC1B;;;AAoCJ;AAEA;AAEA;AAOE;AAUF;AAEA;AAEA;AAEA;AAWE;AACA;AAOA;AACA;AACA;;;AAIE;;AAEA;;AAGF;AACE;;;;AAIF;;;;;;AAOA;AAEI;;;;;;;;;AAWA;;;AAGE;;AAEJ;AAIF;AAEI;;AAOA;;AAEE;AACA;;AACK;;;AAIL;;AACK;;;AAGL;;AAEJ;;;AAMA;;AAEA;AACE;;;;;AAOF;AAEA;AACA;AACE;AACF;AACF;AAEA;;;;AAwCF;AAEA;AAEA;AAEA;;;;;;AAgBE;;AAGI;AACA;;;AAEO;AACL;;AAEJ;AAIF;;;AAIA;AACE;;AAGF;;;AAII;;AASA;;AAEE;AACA;;AAEA;AACE;;;AAEG;;;AAIL;AACA;AACE;;;AAGN;AAIF;;AAGI;;;;;;AAMD;;;;;;;;AASA;;AAmBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACD;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.js","sources":["../../../../../../src/components/shell/StatusBar/StatusBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkBA;AACE;AACD;AAED;AAEA;AAEA;AAWI;AAWF;AAGF;AAEA;AAeI;;;AAeE;;AAiBF;AAYF;AAGF;AAEA;AAEA;AAWE;;AAiBF;AAEA;AAEA;AAEO;AACL;AACA;AACD;;"}
+{"version":3,"file":"StatusBar.js","sources":["src/components/shell/StatusBar/StatusBar.tsx"],"sourcesContent":["'use client';\n\nimport React, { createContext, useContext, useMemo } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  statusBarRoot,\n  statusBarSection,\n  itemButton,\n  itemSpan,\n  badge,\n} from './StatusBar.css';\n\nimport type {\n  StatusBarProps,\n  StatusBarSectionProps,\n  StatusBarItemProps,\n  StatusBarContextValue,\n} from './StatusBar.types';\n\nconst StatusBarContext = /*#__PURE__*/ createContext<StatusBarContextValue>({\n  size: 'sm',\n});\n\nconst useStatusBar = () => useContext(StatusBarContext);\n\n// --- Sub-components ---\n\nconst StatusBarSection = /*#__PURE__*/ React.memo<StatusBarSectionProps>(\n  ({\n    side = 'left',\n    children,\n\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(statusBarSection({ side }), className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nStatusBarSection.displayName = 'StatusBar.Section';\n\nconst StatusBarItem = /*#__PURE__*/ React.memo<StatusBarItemProps>(\n  ({\n    onClick,\n    icon,\n    children,\n    title,\n    badge: badgeProp,\n    disabled = false,\n\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    useStatusBar();\n\n    const content = (\n      <>\n        {icon}\n        {children && <span>{children}</span>}\n        {badgeProp !== undefined && badgeProp !== false && (\n          <span className={badge({ dot: badgeProp === true })}>\n            {typeof badgeProp === 'number' ? badgeProp : null}\n          </span>\n        )}\n      </>\n    );\n\n    if (onClick) {\n      return (\n        <button\n          onClick={onClick}\n          title={title}\n          disabled={disabled}\n          className={cx(itemButton, className)}\n          style={style}\n          data-testid={testId}\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          {...rest}\n        >\n          {content}\n        </button>\n      );\n    }\n\n    return (\n      <span\n        title={title}\n        className={cx(itemSpan, className)}\n        style={style}\n        data-testid={testId}\n        ref={ref}\n        {...rest}\n      >\n        {content}\n      </span>\n    );\n  }\n);\n\nStatusBarItem.displayName = 'StatusBar.Item';\n\n// --- Root Component ---\n\nconst StatusBarRoot: React.FC<StatusBarProps> = ({\n  size = 'sm',\n  variant = 'default',\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const contextValue = useMemo(() => ({ size }), [size]);\n\n  return (\n    <StatusBarContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        className={cx(statusBarRoot({ variant, size }), className)}\n        style={style}\n        data-testid={testId}\n        role=\"status\"\n        aria-live=\"polite\"\n        {...rest}\n      >\n        {children}\n      </div>\n    </StatusBarContext.Provider>\n  );\n};\n\nStatusBarRoot.displayName = 'StatusBar';\n\n// --- Compound Component ---\n\nexport const StatusBar = /*#__PURE__*/ Object.assign(StatusBarRoot, {\n  Section: StatusBarSection,\n  Item: StatusBarItem,\n});\n"],"names":[],"mappings":";;;;;;AAqBA;AACE;AACD;AAED;AAEA;AAEA;AAWI;AAWF;AAGF;AAEA;AAeI;;;AAeE;;AAiBF;AAYF;AAGF;AAEA;AAEA;AAWE;;AAiBF;AAEA;AAEA;AAEO;AACL;AACA;AACD;;"}

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

@@ -22,7 +22,9 @@ const ToolbarButton = /*#__PURE__*/ React.memo(({ onClick, icon, children, toolt
 ToolbarButton.displayName = 'Toolbar.Button';
 const ToolbarToggle = /*#__PURE__*/ React.memo(({ pressed, onPressedChange, icon, children, tooltip, disabled = false, className, style, testId, ref, ...rest }) => {
     const { size } = useToolbar();
-    return (jsxs("button", { onClick: () => onPressedChange(!pressed), disabled: disabled, className: cx(toolbarButton({ size, variant: 'default', active: pressed }), className), style: style, "data-testid": testId, ref: ref, title: tooltip, type: "button", tabIndex: -1, "aria-pressed": pressed, ...rest, children: [icon, !icon && children] }));
+    return (jsxs("button", { onClick: () => {
+            onPressedChange(!pressed);
+        }, disabled: disabled, className: cx(toolbarButton({ size, variant: 'default', active: pressed }), className), style: style, "data-testid": testId, ref: ref, title: tooltip, type: "button", tabIndex: -1, "aria-pressed": pressed, ...rest, children: [icon, !icon && children] }));
 });
 ToolbarToggle.displayName = 'Toolbar.Toggle';
 const ToolbarGroupComp = /*#__PURE__*/ React.memo(({ children, className, style, testId, ref, ...rest }) => {
@@ -48,8 +50,7 @@ const ToolbarRoot = ({ orientation = 'horizontal', size = 'md', children, classN
             externalRef(node);
         }
         else if (externalRef && typeof externalRef === 'object') {
-            externalRef.current =
-                node;
+            externalRef.current = node;
         }
     }, [externalRef]);
     const handleKeyDown = useCallback((e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../../../../../src/components/shell/Toolbar/Toolbar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA4BA;AACE;AACA;AACD;AAED;AAEA;AAEA;AAGA;;AAIA;AAEA;AAEA;AAeI;AAEA;AAoBF;AAGF;AAEA;AAeI;AAEA;AAqBF;AAGF;AAEA;AAEI;AAEA;AAYF;AAGF;AAEA;AAEI;;AAcF;AAGF;AAEA;;AAWE;AAGF;AAEA;AAEA;AAWE;;AAII;AACA;;;AAEO;AACJ;AACC;;AAEN;AAIF;AAEI;AACA;;AAEA;AACA;;AAEA;;AAGA;AACA;AAEA;;AAEE;AACA;;AACK;;;AAIL;;AACK;;AAEL;;AACK;;;;AAIT;AAIF;AACE;AACA;;;AAGA;AACE;AACA;;;;;AA2BN;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"Toolbar.js","sources":["src/components/shell/Toolbar/Toolbar.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useContext,\n  useRef,\n  useCallback,\n  useMemo,\n  KeyboardEvent,\n} from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  toolbarRoot,\n  toolbarButton,\n  toolbarGroup,\n  toolbarSeparator,\n  toolbarSpacer,\n} from './Toolbar.css';\n\nimport type {\n  ToolbarProps,\n  ToolbarButtonProps,\n  ToolbarToggleProps,\n  ToolbarGroupProps,\n  ToolbarSeparatorProps,\n  ToolbarSpacerProps,\n  ToolbarContextValue,\n} from './Toolbar.types';\n\nconst ToolbarContext = /*#__PURE__*/ createContext<ToolbarContextValue>({\n  orientation: 'horizontal',\n  size: 'md',\n});\n\nconst useToolbar = () => useContext(ToolbarContext);\n\n// --- Roving tabindex helper ---\n\nconst FOCUSABLE_ITEM_SELECTOR =\n  'button:not(:disabled), [role=\"button\"]:not([aria-disabled=\"true\"])';\n\nfunction focusableItems(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_ITEM_SELECTOR)\n  );\n}\n\n// --- Sub-components ---\n\nconst ToolbarButton = /*#__PURE__*/ React.memo<ToolbarButtonProps>(\n  ({\n    onClick,\n    icon,\n    children,\n    tooltip,\n    variant = 'default',\n    disabled = false,\n\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const { size } = useToolbar();\n\n    return (\n      <button\n        onClick={onClick}\n        disabled={disabled}\n        className={cx(\n          toolbarButton({ size, variant, active: false }),\n          className\n        )}\n        style={style}\n        data-testid={testId}\n        ref={ref}\n        title={tooltip}\n        type=\"button\"\n        tabIndex={-1}\n        {...rest}\n      >\n        {icon}\n        {!icon && children}\n      </button>\n    );\n  }\n);\n\nToolbarButton.displayName = 'Toolbar.Button';\n\nconst ToolbarToggle = /*#__PURE__*/ React.memo<ToolbarToggleProps>(\n  ({\n    pressed,\n    onPressedChange,\n    icon,\n    children,\n    tooltip,\n    disabled = false,\n\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const { size } = useToolbar();\n\n    return (\n      <button\n        onClick={() => {\n          onPressedChange(!pressed);\n        }}\n        disabled={disabled}\n        className={cx(\n          toolbarButton({ size, variant: 'default', active: pressed }),\n          className\n        )}\n        style={style}\n        data-testid={testId}\n        ref={ref}\n        title={tooltip}\n        type=\"button\"\n        tabIndex={-1}\n        aria-pressed={pressed}\n        {...rest}\n      >\n        {icon}\n        {!icon && children}\n      </button>\n    );\n  }\n);\n\nToolbarToggle.displayName = 'Toolbar.Toggle';\n\nconst ToolbarGroupComp = /*#__PURE__*/ React.memo<ToolbarGroupProps>(\n  ({ children, className, style, testId, ref, ...rest }) => {\n    const { orientation } = useToolbar();\n\n    return (\n      <div\n        className={cx(toolbarGroup({ orientation }), className)}\n        style={style}\n        data-testid={testId}\n        ref={ref}\n        role=\"group\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nToolbarGroupComp.displayName = 'Toolbar.Group';\n\nconst ToolbarSeparatorComp = /*#__PURE__*/ React.memo<ToolbarSeparatorProps>(\n  ({ className, style, testId, ref, ...rest }) => {\n    const { orientation } = useToolbar();\n    return (\n      <div\n        className={cx(toolbarSeparator({ orientation }), className)}\n        style={style}\n        data-testid={testId}\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={\n          orientation === 'horizontal' ? 'vertical' : 'horizontal'\n        }\n        {...rest}\n      />\n    );\n  }\n);\n\nToolbarSeparatorComp.displayName = 'Toolbar.Separator';\n\nconst ToolbarSpacerComp = /*#__PURE__*/ React.memo<ToolbarSpacerProps>(\n  ({ className, style, testId, ref, ...rest }) => {\n    return (\n      <div\n        className={cx(toolbarSpacer, className)}\n        style={style}\n        data-testid={testId}\n        ref={ref}\n        {...rest}\n      />\n    );\n  }\n);\n\nToolbarSpacerComp.displayName = 'Toolbar.Spacer';\n\n// --- Root Component ---\n\nconst ToolbarRoot: React.FC<ToolbarProps> = ({\n  orientation = 'horizontal',\n  size = 'md',\n  children,\n\n  className,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const setToolbarRef = useMemo(\n    () => (node: HTMLDivElement | null) => {\n      internalRef.current = node;\n      if (typeof externalRef === 'function') {\n        externalRef(node);\n      } else if (externalRef && typeof externalRef === 'object') {\n        externalRef.current = node;\n      }\n    },\n    [externalRef]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const container = internalRef.current;\n      if (!container) return;\n\n      const items = focusableItems(container);\n      if (items.length === 0) return;\n\n      const current = document.activeElement as HTMLElement;\n      const currentIndex = items.indexOf(current);\n\n      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n\n      if (e.key === nextKey) {\n        e.preventDefault();\n        const next = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n        items[next]?.focus();\n      } else if (e.key === prevKey) {\n        e.preventDefault();\n        const prev =\n          currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n        items[prev]?.focus();\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        items[0]?.focus();\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        items[items.length - 1]?.focus();\n      }\n    },\n    [orientation]\n  );\n\n  const handleFocus = useCallback(() => {\n    const container = internalRef.current;\n    if (!container) return;\n\n    // If focus lands on the toolbar container itself, move to first button\n    if (document.activeElement === container) {\n      const items = focusableItems(container);\n      items[0]?.focus();\n    }\n  }, []);\n\n  const toolbarContextValue = useMemo(\n    () => ({ orientation, size }),\n    [orientation, size]\n  );\n\n  return (\n    <ToolbarContext.Provider value={toolbarContextValue}>\n      <div\n        ref={setToolbarRef}\n        className={cx(toolbarRoot({ orientation }), className)}\n        style={style}\n        data-testid={testId}\n        role=\"toolbar\"\n        aria-orientation={orientation}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToolbarContext.Provider>\n  );\n};\n\nToolbarRoot.displayName = 'Toolbar';\n\n// --- Compound Component ---\n\nexport const Toolbar = /*#__PURE__*/ Object.assign(ToolbarRoot, {\n  Button: ToolbarButton,\n  Toggle: ToolbarToggle,\n  Group: ToolbarGroupComp,\n  Separator: ToolbarSeparatorComp,\n  Spacer: ToolbarSpacerComp,\n});\n"],"names":[],"mappings":";;;;;;AA+BA;AACE;AACA;AACD;AAED;AAEA;AAEA;AAGA;;AAIA;AAEA;AAEA;AAeI;AAEA;AAoBF;AAGF;AAEA;AAeI;AAEA;AAGM;AACF;AAmBN;AAGF;AAEA;AAEI;AAEA;AAYF;AAGF;AAEA;AAEI;;AAcF;AAGF;AAEA;;AAWE;AAGF;AAEA;AAEA;AAWE;;AAII;AACA;;;AAEO;AACL;;AAEJ;AAIF;AAEI;AACA;;AAEA;AACA;;AAEA;;AAGA;AACA;AAEA;;AAEE;AACA;;AACK;;;AAIL;;AACK;;AAEL;;AACK;;;;AAIT;AAIF;AACE;AACA;;;AAGA;AACE;AACA;;;;;AA2BN;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/esm/context/KeyboardContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardContext.js","sources":["../../../../src/context/KeyboardContext.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAQA;AACE;AACA;;AAGF;AAQO;AAEH;AACA;AAKF;AAGK;AAYD;AACJ;AAEA;AACE;AACE;AACE;;AAEJ;AACF;AAEA;AACE;AACE;AACE;;AAEJ;AACF;;AAGE;AACA;AACF;AACF;;"}
+{"version":3,"file":"KeyboardContext.js","sources":["src/context/KeyboardContext.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useContext,\n  memo,\n  useEffect,\n  useCallback,\n} from 'react';\n\nimport { useKeyboard, isKeyPressed } from '@/hooks/useKeyboard';\n\nimport type { KeyboardState, AllKeys } from '@/hooks/useKeyboard';\n\nconst NEUTRAL_KEYBOARD_STATE: KeyboardState = {\n  pressedKeys: [],\n  modifiers: { control: false, shift: false, alt: false, meta: false },\n};\n\nconst KeyboardContext = /*#__PURE__*/ createContext<KeyboardState>(\n  NEUTRAL_KEYBOARD_STATE\n);\n\nexport interface KeyboardContextProviderProps {\n  children: React.ReactNode;\n}\n\nexport const KeyboardContextProvider = /*#__PURE__*/ memo(\n  ({ children }: KeyboardContextProviderProps) => {\n    const keyboardState = useKeyboard();\n    return (\n      <KeyboardContext.Provider value={keyboardState}>\n        {children}\n      </KeyboardContext.Provider>\n    );\n  }\n);\n\nexport const useKeyboardContext = (): KeyboardState =>\n  useContext(KeyboardContext);\n\ntype KeyboardEffectMode = 'keydown' | 'keyup';\n\ntype KeyboardEffect = {\n  key: AllKeys;\n  actions: {\n    [mode in KeyboardEffectMode]?: () => void;\n  };\n};\n\nexport function useEffectsOnKeyboard(actions: KeyboardEffect[]): void {\n  const keyboard = useKeyboardContext();\n\n  const handleKeyDown = useCallback(() => {\n    actions.forEach(action => {\n      if (isKeyPressed(keyboard, action.key) && action.actions.keydown) {\n        action.actions.keydown();\n      }\n    });\n  }, [keyboard, actions]);\n\n  const handleKeyUp = useCallback(() => {\n    actions.forEach(action => {\n      if (isKeyPressed(keyboard, action.key) && action.actions.keyup) {\n        action.actions.keyup();\n      }\n    });\n  }, [keyboard, actions]);\n\n  useEffect(() => {\n    handleKeyDown();\n    handleKeyUp();\n  }, [handleKeyDown, handleKeyUp]);\n}\n"],"names":[],"mappings":";;;;;;AAcA;AACE;AACA;;AAGF;AAQO;AAEH;AACA;AAKF;AAGK;AAYD;AACJ;AAEA;AACE;AACE;AACE;;AAEJ;AACF;AAEA;AACE;AACE;AACE;;AAEJ;AACF;;AAGE;AACA;AACF;AACF;;"}

package/dist/esm/hooks/useBreakpoint/useBreakpoint.js

@@ -1,7 +1,7 @@
 "use client";
 import { useMemo } from 'react';
-import { breakpoints, BREAKPOINT_ORDER } from '../../theme/breakpoints.js';
 import { useMediaQuery } from '../useMediaQuery/useMediaQuery.js';
+import { breakpoints, BREAKPOINT_ORDER } from '../../theme/breakpoints.js';
 
 const SM_QUERY = `(min-width: ${breakpoints.sm}px)`;
 const MD_QUERY = `(min-width: ${breakpoints.md}px)`;

package/dist/esm/hooks/useBreakpoint/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../../../../src/hooks/useBreakpoint/useBreakpoint.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAWA;AACA;AACA;AACA;AAEA;AACE;AACE;AACA;AAAuB;;AAEzB;AACF;AAEA;;;;;;;;;;;;;AAaG;;AAED;AACA;AACA;AACA;;AAGE;;;AAGJ;;"}
+{"version":3,"file":"useBreakpoint.js","sources":["src/hooks/useBreakpoint/useBreakpoint.ts"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useMediaQuery } from '@/hooks/useMediaQuery';\nimport { BREAKPOINT_ORDER, breakpoints } from '@/theme/breakpoints';\n\nimport type { UseBreakpointReturn } from './useBreakpoint.types';\nimport type { Breakpoint } from '@/theme/breakpoints';\n\nconst SM_QUERY = `(min-width: ${breakpoints.sm}px)`;\nconst MD_QUERY = `(min-width: ${breakpoints.md}px)`;\nconst LG_QUERY = `(min-width: ${breakpoints.lg}px)`;\nconst XL_QUERY = `(min-width: ${breakpoints.xl}px)`;\n\nfunction resolveCurrent(map: Omit<UseBreakpointReturn, 'current'>): Breakpoint {\n  for (let i = BREAKPOINT_ORDER.length - 1; i >= 0; i -= 1) {\n    const name = BREAKPOINT_ORDER[i];\n    if (name && map[name]) return name;\n  }\n  return 'xs';\n}\n\n/**\n * Reactive named-breakpoint matcher.\n *\n * Returns booleans for each named breakpoint plus the largest matching\n * `current`. Built on top of `useMediaQuery`. Breakpoint values come from\n * `@/theme/breakpoints` and match the values used by `Stack` and other\n * responsive layout components.\n *\n * @example\n * ```tsx\n * const { md, current } = useBreakpoint();\n * return md ? <Sidebar /> : <BottomSheet />;\n * ```\n */\nexport function useBreakpoint(): UseBreakpointReturn {\n  const sm = useMediaQuery(SM_QUERY);\n  const md = useMediaQuery(MD_QUERY);\n  const lg = useMediaQuery(LG_QUERY);\n  const xl = useMediaQuery(XL_QUERY);\n\n  return useMemo(() => {\n    const map = { xs: true, sm, md, lg, xl };\n    return { ...map, current: resolveCurrent(map) };\n  }, [sm, md, lg, xl]);\n}\n"],"names":[],"mappings":";;;;;AAUA;AACA;AACA;AACA;AAEA;AACE;AACE;AACA;AAAuB;;AAEzB;AACF;AAEA;;;;;;;;;;;;;AAaG;;AAED;AACA;AACA;AACA;;AAGE;;;AAGJ;;"}

package/dist/esm/hooks/useClickOutside/useClickOutside.js

@@ -1,5 +1,6 @@
 "use client";
-import { useRef, useEffect } from 'react';
+import { useEffect } from 'react';
+import { useLatest } from '../useLatest/useLatest.js';
 
 function isOutside(target, refs) {
     if (!(target instanceof Node))
@@ -32,13 +33,11 @@ function isOutside(target, refs) {
  */
 function useClickOutside(ref, handler, options = {}) {
     const { enabled = true, event = 'mousedown' } = options;
-    const handlerRef = useRef(handler);
-    const refsRef = useRef([]);
-    // Latest handler — invoked from the listener without re-subscribing.
-    handlerRef.current = handler;
-    // Latest ref(s) — refreshed every render so consumers may pass inline
-    // arrays without forcing a re-subscribe of the document listener.
-    refsRef.current = Array.isArray(ref) ? ref : [ref];
+    // Latest handler / ref(s), refreshed after each commit so the document
+    // listener reads live values without re-subscribing and consumers may pass
+    // inline arrays.
+    const handlerRef = useLatest(handler);
+    const refsRef = useLatest(Array.isArray(ref) ? ref : [ref]);
     useEffect(() => {
         if (!enabled)
             return;
@@ -53,7 +52,8 @@ function useClickOutside(ref, handler, options = {}) {
         return () => {
             document.removeEventListener(event, listener);
         };
-    }, [enabled, event]);
+        // handlerRef/refsRef are stable useLatest refs; listed to satisfy the rule.
+    }, [enabled, event, handlerRef, refsRef]);
 }
 
 export { useClickOutside };

package/dist/esm/hooks/useClickOutside/useClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.js","sources":["../../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAoBA;AACE;AAA+B;AAE/B;AACE;AACA;AACE;;;AAGJ;AACF;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACG;;AAOJ;AACA;;AAGA;;;AAGA;;AAGE;;;;AAGA;;AAEI;;AAEJ;AAEA;AACA;AACE;AACF;AACF;AACF;;"}
+{"version":3,"file":"useClickOutside.js","sources":["src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { useLatest } from '@/hooks/useLatest';\n\nimport type { RefObject } from 'react';\n\nexport interface UseClickOutsideOptions {\n  /**\n   * When false, the listener is not attached. Useful for toggling without\n   * unmount.\n   * @default true\n   */\n  enabled?: boolean;\n  /**\n   * Mouse / pointer event to listen for.\n   * @default 'mousedown'\n   */\n  event?: 'mousedown' | 'click' | 'pointerdown';\n}\n\ntype AnyHTMLRef = RefObject<HTMLElement | null>;\n\nfunction isOutside(target: EventTarget | null, refs: AnyHTMLRef[]): boolean {\n  if (!(target instanceof Node)) return true;\n\n  for (const ref of refs) {\n    const node = ref.current;\n    if (node && (node === target || node.contains(target))) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * Fire a callback when a click occurs outside the referenced element(s).\n *\n * Accepts either a single ref or an array of refs. The handler fires only\n * when the click lands outside ALL provided refs — useful for popover +\n * trigger pairs where clicking either should be considered \"inside\".\n *\n * Defaults to `mousedown` so the handler runs before `click`. SSR-safe;\n * cleans up on unmount and when `enabled` flips to `false`.\n *\n * @example\n * ```tsx\n * const ref = useRef<HTMLDivElement>(null);\n * useClickOutside(ref, () => setOpen(false), { enabled: isOpen });\n *\n * return <div ref={ref}>...</div>;\n * ```\n */\nexport function useClickOutside<T extends HTMLElement = HTMLElement>(\n  ref: RefObject<T | null> | Array<RefObject<HTMLElement | null>>,\n  handler: (event: MouseEvent) => void,\n  options: UseClickOutsideOptions = {}\n): void {\n  const { enabled = true, event = 'mousedown' } = options;\n\n  // Latest handler / ref(s), refreshed after each commit so the document\n  // listener reads live values without re-subscribing and consumers may pass\n  // inline arrays.\n  const handlerRef = useLatest(handler);\n  const refsRef = useLatest<AnyHTMLRef[]>(Array.isArray(ref) ? ref : [ref]);\n\n  useEffect(() => {\n    if (!enabled) return;\n    if (typeof document === 'undefined') return;\n\n    const listener = (e: MouseEvent) => {\n      if (isOutside(e.target, refsRef.current)) {\n        handlerRef.current(e);\n      }\n    };\n\n    document.addEventListener(event, listener);\n    return () => {\n      document.removeEventListener(event, listener);\n    };\n    // handlerRef/refsRef are stable useLatest refs; listed to satisfy the rule.\n  }, [enabled, event, handlerRef, refsRef]);\n}\n"],"names":[],"mappings":";;;;AAwBA;AACE;AAA+B;AAE/B;AACE;AACA;AACE;;;AAGJ;AACF;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACG;;;;;AAUJ;;;AAIE;;;;AAGA;;AAEI;;AAEJ;AAEA;AACA;AACE;AACF;;;AAGJ;;"}

package/dist/esm/hooks/useClipboard/useClipboard.js

@@ -24,6 +24,10 @@ function writeViaExecCommand(text) {
     textarea.select();
     let succeeded = false;
     try {
+        // Legacy fallback used only when navigator.clipboard.writeText is
+        // unavailable (the modern primary path). execCommand has no modern
+        // synchronous equivalent for this fallback scenario.
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         succeeded = document.execCommand('copy');
     }
     catch {

package/dist/esm/hooks/useClipboard/useClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClipboard.js","sources":["../../../../../src/hooks/useClipboard/useClipboard.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AASA;AAEA;;AAGI;;AAGA;;;AAGF;AACF;AAEA;;AACuC;;AAGrC;AACA;AACA;AACA;AACA;AACA;;;AAIA;AACE;;AACA;;;AAGF;AACA;AACF;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACG;AAGJ;;;AAKA;AACA;;;;;AAKA;;AAGE;AACF;AAEA;AACE;AACE;AACA;;;AAIJ;AACE;;;AAGA;;;AAGF;;AAII;AAEA;AACA;;;AAKA;AACE;;;AAEA;;AAGF;AACE;AACE;;AAEE;;;;AAGF;;;;;AAMJ;AACE;;;;;AAMA;AACE;;;;;AAKA;;;AAGF;AACA;;;;AAKF;AACF;;AAKA;AACE;AACE;AACA;;AAEJ;;;;;;;;;AAUJ;;"}
+{"version":3,"file":"useClipboard.js","sources":["src/hooks/useClipboard/useClipboard.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type {\n  ClipboardStatus,\n  UseClipboardOptions,\n  UseClipboardReturn,\n} from './useClipboard.types';\n\nconst DEFAULT_TIMEOUT = 2000;\n\nasync function writeViaClipboardApi(text: string): Promise<boolean> {\n  if (\n    typeof navigator === 'undefined' ||\n    typeof navigator.clipboard === 'undefined' ||\n    typeof navigator.clipboard.writeText !== 'function'\n  ) {\n    return false;\n  }\n  await navigator.clipboard.writeText(text);\n  return true;\n}\n\nfunction writeViaExecCommand(text: string): boolean {\n  if (typeof document === 'undefined') return false;\n\n  const textarea = document.createElement('textarea');\n  textarea.value = text;\n  textarea.setAttribute('readonly', '');\n  textarea.style.position = 'absolute';\n  textarea.style.left = '-9999px';\n  textarea.style.top = '0';\n  document.body.appendChild(textarea);\n  textarea.select();\n\n  let succeeded = false;\n  try {\n    // Legacy fallback used only when navigator.clipboard.writeText is\n    // unavailable (the modern primary path). execCommand has no modern\n    // synchronous equivalent for this fallback scenario.\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    succeeded = document.execCommand('copy');\n  } catch {\n    succeeded = false;\n  }\n  document.body.removeChild(textarea);\n  return succeeded;\n}\n\n/**\n * Copy text to the clipboard with a built-in timeout-driven feedback state.\n *\n * Uses `navigator.clipboard.writeText` when available; falls back to\n * `document.execCommand('copy')` only when the modern API is missing.\n * In SSR or restricted contexts where neither path is available, `copy`\n * resolves to `false` and `status` flips to `'error'` without throwing.\n *\n * @example\n * ```tsx\n * const { copy, copied } = useClipboard({ timeout: 1500 });\n *\n * return (\n *   <Button onClick={() => copy('Hello!')}>\n *     {copied ? 'Copied!' : 'Copy'}\n *   </Button>\n * );\n * ```\n */\nexport function useClipboard(\n  options: UseClipboardOptions = {}\n): UseClipboardReturn {\n  const { timeout = DEFAULT_TIMEOUT } = options;\n\n  const [status, setStatus] = useState<ClipboardStatus>('idle');\n  const [error, setError] = useState<Error | null>(null);\n\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const timeoutRef = useRef(timeout);\n  // Bumped on every `copy()` call. The async path captures its own value\n  // and short-circuits on resolution if a newer call has started — that\n  // prevents an older, slower `writeText` from overwriting the state of a\n  // newer copy or from arming a stale timer.\n  const requestSeqRef = useRef(0);\n\n  useEffect(() => {\n    timeoutRef.current = timeout;\n  }, [timeout]);\n\n  const clearTimer = useCallback(() => {\n    if (timerRef.current !== null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  }, []);\n\n  const reset = useCallback(() => {\n    clearTimer();\n    // Invalidate any in-flight copy so a late resolution does not flip\n    // the status back from idle/error.\n    requestSeqRef.current += 1;\n    setStatus('idle');\n    setError(null);\n  }, [clearTimer]);\n\n  const copy = useCallback(\n    async (text: string): Promise<boolean> => {\n      clearTimer();\n\n      requestSeqRef.current += 1;\n      const requestId = requestSeqRef.current;\n\n      let succeeded = false;\n      let copyError: Error | null = null;\n\n      try {\n        succeeded = await writeViaClipboardApi(text);\n      } catch (err) {\n        copyError = err instanceof Error ? err : new Error(String(err));\n      }\n\n      if (!succeeded && copyError === null) {\n        try {\n          succeeded = writeViaExecCommand(text);\n          if (!succeeded) {\n            copyError = new Error('Copy command was rejected by the browser.');\n          }\n        } catch (err) {\n          copyError = err instanceof Error ? err : new Error(String(err));\n        }\n      }\n\n      // A newer call (or `reset`) has started — drop this result on the\n      // floor so it does not race the active state.\n      if (requestId !== requestSeqRef.current) {\n        return succeeded;\n      }\n\n      if (succeeded) {\n        setError(null);\n        setStatus('copied');\n        timerRef.current = setTimeout(() => {\n          timerRef.current = null;\n          // Guard the timer too: another copy may have started during the\n          // window and bumped the sequence. We still clear the timer ref,\n          // but only flip back to idle if the timer belonged to the\n          // current request.\n          if (requestId === requestSeqRef.current) {\n            setStatus('idle');\n          }\n        }, timeoutRef.current);\n        return true;\n      }\n\n      setError(copyError ?? new Error('Clipboard API is not available.'));\n      setStatus('error');\n      return false;\n    },\n    [clearTimer]\n  );\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    };\n  }, []);\n\n  return {\n    status,\n    copied: status === 'copied',\n    error,\n    copy,\n    reset,\n  };\n}\n"],"names":[],"mappings":";;;AAUA;AAEA;;AAGI;;AAGA;;;AAGF;AACF;AAEA;;AACuC;;AAGrC;AACA;AACA;AACA;AACA;AACA;;;AAIA;;;;;AAKE;;AACA;;;AAGF;AACA;AACF;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACG;AAGJ;;;AAKA;AACA;;;;;AAKA;;AAGE;AACF;AAEA;AACE;AACE;AACA;;;AAIJ;AACE;;;AAGA;;;AAGF;;AAII;AAEA;AACA;;;AAKA;AACE;;;AAEA;;AAGF;AACE;AACE;;AAEE;;;;AAGF;;;;;AAMJ;AACE;;;;;AAMA;AACE;;;;;AAKA;;;AAGF;AACA;;;;AAKF;AACF;;AAKA;AACE;AACE;AACA;;AAEJ;;;;;;;;;AAUJ;;"}

package/dist/esm/hooks/useControlledState/useControlledState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlledState.js","sources":["../../../../../src/hooks/useControlledState/useControlledState.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAgBA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACG;;AAKJ;;;AAIA;;;;AAMA;AACA;AACA;;AAGE;AACF;;AAGE;AACF;;;;AAKE;AACA;;;;AAOM;AAEJ;;AAEJ;AAEA;AAEI;AACE;AACA;AACF;AAGA;;AAEE;;AAEF;AACF;;AAKF;AACF;;"}
+{"version":3,"file":"useControlledState.js","sources":["src/hooks/useControlledState/useControlledState.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { devWarn } from '@/utils/devWarn';\n\nexport interface UseControlledStateOptions<T> {\n  /** Controlled value — when defined, drives the returned value. */\n  value?: T;\n  /** Default value used when the hook is uncontrolled. */\n  defaultValue?: T;\n  /** Called when the consumer requests a change in either mode. */\n  onChange?: (value: T) => void;\n  /** Fallback used when both `value` and `defaultValue` are undefined. */\n  fallback: T;\n}\n\n/**\n * Manage a value that may be either controlled (via prop) or uncontrolled\n * (managed internally with a default).\n *\n * Returns a `[value, setValue]` tuple just like `useState`. When\n * `options.value` is defined the state is read from there and `setValue`\n * becomes a pure side-effect callback that calls `onChange` only — internal\n * state is never mutated. When `options.value` is undefined the hook owns the\n * state and `setValue` updates it as well as calls `onChange`.\n *\n * Switching between controlled and uncontrolled within a component's lifetime\n * is a known pitfall (matches React's own warning for `<input value/defaultValue>`).\n * The hook emits a development-only warning when this happens.\n *\n * @example\n * ```ts\n * const [value, setValue] = useControlledState({\n *   value: props.value,\n *   defaultValue: props.defaultValue,\n *   onChange: props.onChange,\n *   fallback: '',\n * });\n * ```\n */\nexport function useControlledState<T>(\n  options: UseControlledStateOptions<T>\n): [T, (next: T | ((prev: T) => T)) => void] {\n  const { value, defaultValue, onChange, fallback } = options;\n\n  const isControlled = value !== undefined;\n\n  // Only `undefined` means \"no defaultValue given\" — `null` is a legal value\n  // for generic T (e.g. `string | null`) and must not be replaced by fallback.\n  const [internalValue, setInternalValue] = useState<T>(\n    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n    defaultValue !== undefined ? defaultValue : fallback\n  );\n\n  // Stable refs to avoid stale closures and unnecessary identity changes.\n  const onChangeRef = useRef(onChange);\n  const internalValueRef = useRef(internalValue);\n  const isControlledRef = useRef(isControlled);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    internalValueRef.current = internalValue;\n  }, [internalValue]);\n\n  // Dev-only warning when controlled <-> uncontrolled flips after mount.\n  // Mirrors React's behavior for <input value/defaultValue>.\n  useEffect(() => {\n    const wasControlled = isControlledRef.current;\n    if (wasControlled !== isControlled) {\n      devWarn(\n        `[useControlledState] Component is changing from ${\n          wasControlled ? 'controlled' : 'uncontrolled'\n        } to ${isControlled ? 'controlled' : 'uncontrolled'}. ` +\n          'Components should not switch between controlled and uncontrolled ' +\n          '(or vice versa) during their lifetime. Decide between using a ' +\n          'controlled or uncontrolled mode for the lifetime of the component.'\n      );\n      isControlledRef.current = isControlled;\n    }\n  }, [isControlled]);\n\n  const setValue = useCallback(\n    (next: T | ((prev: T) => T)) => {\n      const prev = isControlledRef.current\n        ? (value as T)\n        : internalValueRef.current;\n      const resolved =\n        typeof next === 'function' ? (next as (p: T) => T)(prev) : next;\n\n      if (!isControlledRef.current) {\n        setInternalValue(resolved);\n        internalValueRef.current = resolved;\n      }\n      onChangeRef.current?.(resolved);\n    },\n    [value]\n  );\n\n  const currentValue = isControlled ? (value as T) : internalValue;\n  return [currentValue, setValue];\n}\n"],"names":[],"mappings":";;;;AAiBA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACG;;AAKJ;;;AAIA;;;;AAMA;AACA;AACA;;AAGE;AACF;;AAGE;AACF;;;;AAKE;AACA;;;;AAOM;AAEJ;;AAEJ;AAEA;AAEI;AACE;AACA;AACF;AAGA;;AAEE;;AAEF;AACF;;AAKF;AACF;;"}

package/dist/esm/hooks/useDebounced/useDebouncedCallback.js

@@ -1,5 +1,6 @@
 "use client";
 import { useRef, useCallback, useMemo, useEffect } from 'react';
+import { useEventCallback } from '../useEventCallback/useEventCallback.js';
 
 /**
  * Wrap a function so rapid calls collapse into one. By default the call
@@ -20,8 +21,9 @@ import { useRef, useCallback, useMemo, useEffect } from 'react';
  */
 function useDebouncedCallback(fn, delay, options = {}) {
     const { leading = false, maxWait } = options;
-    const fnRef = useRef(fn);
-    fnRef.current = fn;
+    // Stable wrapper that always invokes the current callback, refreshed via
+    // useInsertionEffect so the debounced wrapper never goes stale.
+    const stableFn = useEventCallback(fn);
     const timerRef = useRef(null);
     const maxTimerRef = useRef(null);
     const lastArgsRef = useRef(null);
@@ -42,11 +44,14 @@ function useDebouncedCallback(fn, delay, options = {}) {
         lastInvokeRef.current = Date.now();
         clearTimers();
         if (args)
-            fnRef.current(...args);
-    }, [clearTimers]);
+            stableFn(...args);
+    }, [clearTimers, stableFn]);
     const debounced = useMemo(() => {
         const wrapper = (...args) => {
             lastArgsRef.current = args;
+            // Date.now() runs only when the wrapper is invoked from an event/timer,
+            // never during render, so it is not a render-purity concern here.
+            // eslint-disable-next-line react-hooks/purity
             const now = Date.now();
             const isLeadingCall = leading && timerRef.current === null && maxTimerRef.current === null;
             if (isLeadingCall) {
@@ -55,7 +60,7 @@ function useDebouncedCallback(fn, delay, options = {}) {
                 // pick them up.
                 lastArgsRef.current = null;
                 lastInvokeRef.current = now;
-                fnRef.current(...args);
+                stableFn(...args);
             }
             if (timerRef.current !== null)
                 clearTimeout(timerRef.current);
@@ -87,7 +92,7 @@ function useDebouncedCallback(fn, delay, options = {}) {
                 clearTimers();
         };
         return wrapper;
-    }, [delay, leading, maxWait, invoke, clearTimers]);
+    }, [delay, leading, maxWait, invoke, clearTimers, stableFn]);
     // Cleanup on unmount.
     useEffect(() => clearTimers, [clearTimers]);
     return debounced;

package/dist/esm/hooks/useDebounced/useDebouncedCallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDebouncedCallback.js","sources":["../../../../../src/hooks/useDebounced/useDebouncedCallback.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;;;;;AAgBG;AACG;;AAOJ;AACA;AAEA;AACA;AACA;AACA;AAEA;AACE;AACE;AACA;;AAEF;AACE;AACA;;;AAIJ;AACE;AACA;AACA;AACA;AACA;AAAU;AACZ;AAEA;AACE;AACE;AACA;AACA;;;;;AAOE;AACA;AACA;;AAGF;AAA+B;AAC/B;AACE;AACA;AAAkC;AAC7B;AACH;AACA;;;;AAKF;AACE;AACA;AAAkC;;;AAGxC;AAEA;AACE;AACA;AACF;AACA;AACE;AAAkC;;AAC7B;AACP;AAEA;AACF;;;AAKA;AACF;;"}
+{"version":3,"file":"useDebouncedCallback.js","sources":["src/hooks/useDebounced/useDebouncedCallback.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport type {\n  DebouncedCallback,\n  UseDebouncedCallbackOptions,\n} from './useDebounced.types';\n\n/**\n * Wrap a function so rapid calls collapse into one. By default the call\n * fires on the trailing edge — pass `leading: true` to also fire\n * immediately. `maxWait` forces a call even when calls keep coming.\n *\n * The wrapper identity is stable; passing fresh inline functions across\n * renders is safe and does not reset pending timers.\n *\n * @example\n * ```tsx\n * const onResize = useDebouncedCallback(measure, 150);\n * useEffect(() => {\n *   window.addEventListener('resize', onResize);\n *   return () => window.removeEventListener('resize', onResize);\n * }, [onResize]);\n * ```\n */\nexport function useDebouncedCallback<Args extends unknown[]>(\n  fn: (...args: Args) => void,\n  delay: number,\n  options: UseDebouncedCallbackOptions = {}\n): DebouncedCallback<Args> {\n  const { leading = false, maxWait } = options;\n\n  // Stable wrapper that always invokes the current callback, refreshed via\n  // useInsertionEffect so the debounced wrapper never goes stale.\n  const stableFn = useEventCallback(fn);\n\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const maxTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const lastArgsRef = useRef<Args | null>(null);\n  const lastInvokeRef = useRef<number>(0);\n\n  const clearTimers = useCallback(() => {\n    if (timerRef.current !== null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n    if (maxTimerRef.current !== null) {\n      clearTimeout(maxTimerRef.current);\n      maxTimerRef.current = null;\n    }\n  }, []);\n\n  const invoke = useCallback(() => {\n    const args = lastArgsRef.current;\n    lastArgsRef.current = null;\n    lastInvokeRef.current = Date.now();\n    clearTimers();\n    if (args) stableFn(...args);\n  }, [clearTimers, stableFn]);\n\n  const debounced = useMemo<DebouncedCallback<Args>>(() => {\n    const wrapper = (...args: Args): void => {\n      lastArgsRef.current = args;\n      // Date.now() runs only when the wrapper is invoked from an event/timer,\n      // never during render, so it is not a render-purity concern here.\n      // eslint-disable-next-line react-hooks/purity\n      const now = Date.now();\n      const isLeadingCall =\n        leading && timerRef.current === null && maxTimerRef.current === null;\n\n      if (isLeadingCall) {\n        // Fire immediately, then suppress trailing for `delay` ms unless\n        // additional calls happen — in that case the trailing handler will\n        // pick them up.\n        lastArgsRef.current = null;\n        lastInvokeRef.current = now;\n        stableFn(...args);\n      }\n\n      if (timerRef.current !== null) clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => {\n        timerRef.current = null;\n        if (lastArgsRef.current !== null) invoke();\n        else if (maxTimerRef.current !== null) {\n          clearTimeout(maxTimerRef.current);\n          maxTimerRef.current = null;\n        }\n      }, delay);\n\n      if (maxWait !== undefined && maxTimerRef.current === null) {\n        maxTimerRef.current = setTimeout(() => {\n          maxTimerRef.current = null;\n          if (lastArgsRef.current !== null) invoke();\n        }, maxWait);\n      }\n    };\n\n    wrapper.cancel = () => {\n      lastArgsRef.current = null;\n      clearTimers();\n    };\n    wrapper.flush = () => {\n      if (lastArgsRef.current !== null) invoke();\n      else clearTimers();\n    };\n\n    return wrapper;\n  }, [delay, leading, maxWait, invoke, clearTimers, stableFn]);\n\n  // Cleanup on unmount.\n  useEffect(() => clearTimers, [clearTimers]);\n\n  return debounced;\n}\n"],"names":[],"mappings":";;;;AAWA;;;;;;;;;;;;;;;;AAgBG;AACG;;;;AASJ;AAEA;AACA;AACA;AACA;AAEA;AACE;AACE;AACA;;AAEF;AACE;AACA;;;AAIJ;AACE;AACA;AACA;AACA;AACA;AAAU;AACZ;AAEA;AACE;AACE;;;;AAIA;AACA;;;;;AAOE;AACA;AACA;;AAGF;AAA+B;AAC/B;AACE;AACA;AAAkC;AAC7B;AACH;AACA;;;;AAKF;AACE;AACA;AAAkC;;;AAGxC;AAEA;AACE;AACA;AACF;AACA;AACE;AAAkC;;AAC7B;AACP;AAEA;AACF;;;AAKA;AACF;;"}

package/dist/esm/hooks/useDebounced/useDebouncedValue.js

@@ -5,19 +5,31 @@ import { useState, useEffect } from 'react';
  * Returns a copy of `value` that updates only after `delay` ms have elapsed
  * without further changes (trailing-edge debounce).
  *
- * Typical use: feeding a search input value into an expensive query.
+ * @deprecated Prefer React's `useDeferredValue` for the common case — keeping
+ * an input responsive while an expensive derivation (filtering, search) lags
+ * behind it. It needs no fixed delay, integrates with concurrent rendering,
+ * and gives better interactivity on large lists. Reach for `useDebouncedCallback`
+ * when you need to debounce a *side effect* (a network request, an analytics
+ * ping) rather than a rendered value. This hook stays exported for now but
+ * will not see further work.
  *
  * @example
  * ```tsx
- * const [text, setText] = useState('');
- * const debounced = useDebouncedValue(text, 200);
- * useEffect(() => { search(debounced); }, [debounced]);
+ * // Preferred: defer the value that drives the expensive derivation.
+ * const deferredQuery = useDeferredValue(query);
+ * const results = useMemo(
+ *   () => filter(items, deferredQuery),
+ *   [items, deferredQuery]
+ * );
  * ```
  */
 function useDebouncedValue(value, delay) {
     const [debounced, setDebounced] = useState(value);
     useEffect(() => {
         if (delay <= 0) {
+            // Synchronous passthrough when debouncing is disabled; this hook's whole
+            // purpose is to mirror an external value into state.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setDebounced(value);
             return;
         }