entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/feedback/CommandPalette/CommandPalette.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useId, useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { useId, useRef, useState, useDeferredValue, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { SearchIcon } from '../../Icons/SearchIcon.js';
 import { Kbd } from '../../primitives/Kbd/Kbd.js';
-import { useDebouncedValue } from '../../../hooks/useDebounced/useDebouncedValue.js';
 import { cx } from '../../../utils/cx.js';
 import { overlayStyle, inputWrapperStyle, searchIconStyle, inputStyle, emptyStyle, listStyle, groupHeaderStyle, itemSelectedStyle, itemStyle, panelStyle, itemIconStyle, itemTextStyle, itemLabelStyle, itemDescriptionStyle, itemShortcutStyle } from './CommandPalette.css.js';
 import { fuzzyFilter } from './fuzzySearch.js';
@@ -43,7 +42,7 @@ function getItemSearchStrings(item) {
  * />
  * ```
  */
-const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a command or search...', emptyState, recentLabel = 'Recent', recentKey, maxRecent = 5, debounceMs = 150, renderItem, portal = true, maxHeight = 400, width = 640, className, style, testId, id, ...rest }) => {
+const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a command or search...', emptyState, recentLabel = 'Recent', recentKey, maxRecent = 5, renderItem, portal = true, maxHeight = 400, width = 640, className, style, testId, id, ...rest }) => {
     const autoId = useId();
     const inputId = id ?? `command-palette-${autoId}`;
     const listboxId = `${inputId}-listbox`;
@@ -51,14 +50,20 @@ const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a
     const listRef = useRef(null);
     const [query, setQuery] = useState('');
     const [activeIndex, setActiveIndex] = useState(0);
-    const debouncedQuery = useDebouncedValue(query, debounceMs);
+    // Defer the query that drives fuzzy filtering so the input stays responsive
+    // while a large command list re-filters and re-sorts. The immediate `query`
+    // still drives the input value.
+    const deferredQuery = useDeferredValue(query);
     const { recentIds, pushRecent } = useRecentItems({
         storageKey: recentKey,
         maxRecent,
     });
-    // Reset state when the palette opens.
+    // Reset state on each open transition. This reacts to the `open` prop
+    // toggling rather than synchronizing continuous state, so the one-shot
+    // setState in the effect is intentional.
     useEffect(() => {
         if (open) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setQuery('');
             setActiveIndex(0);
         }
@@ -79,7 +84,7 @@ const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a
     const { rows, selectableItems } = useMemo(() => {
         const groupOrder = [];
         const groupMap = new Map();
-        if (debouncedQuery === '' && recentIds.length > 0) {
+        if (deferredQuery === '' && recentIds.length > 0) {
             const byId = new Map(items.map(it => [it.id, it]));
             const recent = [];
             for (const id of recentIds) {
@@ -92,7 +97,7 @@ const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a
                 groupMap.set(RECENT_GROUP, recent);
             }
         }
-        const filtered = fuzzyFilter(debouncedQuery, items, getItemSearchStrings);
+        const filtered = fuzzyFilter(deferredQuery, items, getItemSearchStrings);
         const filteredItems = filtered.map(r => r.item);
         for (const item of filteredItems) {
             const g = item.group ?? DEFAULT_GROUP;
@@ -134,17 +139,17 @@ const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a
             }
         }
         return { rows, selectableItems: flat };
-    }, [items, debouncedQuery, recentIds, recentLabel]);
-    // Clamp activeIndex when the result list shrinks.
-    useEffect(() => {
-        setActiveIndex(prev => {
-            if (selectableItems.length === 0)
-                return 0;
-            if (prev >= selectableItems.length)
-                return selectableItems.length - 1;
-            return prev;
-        });
-    }, [selectableItems.length]);
+    }, [items, deferredQuery, recentIds, recentLabel]);
+    // Clamp the active index during render when the result list shrinks. This is
+    // React's documented adjust-state-during-render pattern — it avoids an extra
+    // commit, and the guards make it self-terminating.
+    if (selectableItems.length === 0) {
+        if (activeIndex !== 0)
+            setActiveIndex(0);
+    }
+    else if (activeIndex >= selectableItems.length) {
+        setActiveIndex(selectableItems.length - 1);
+    }
     const moveActive = useCallback((delta) => {
         setActiveIndex(prev => {
             const len = selectableItems.length;
@@ -226,10 +231,10 @@ const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a
     const activeId = activeIndex < selectableItems.length
         ? `${listboxId}-item-${String(activeIndex)}`
         : undefined;
-    const content = (jsxs(Fragment, { children: [jsx("div", { className: overlayStyle, "data-testid": testId ? `${testId}-overlay` : undefined, onClick: handleOverlayClick }), jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "Command palette", className: cx(panelStyle, className), style: { width: widthCss, ...style }, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [jsxs("div", { className: inputWrapperStyle, children: [jsx("span", { className: searchIconStyle, "aria-hidden": "true", children: jsx(SearchIcon, {}) }), jsx("input", { ref: inputRef, id: inputId, type: "text", role: "combobox", "aria-expanded": "true", "aria-controls": listboxId, "aria-activedescendant": activeId, "aria-autocomplete": "list", className: inputStyle, placeholder: placeholder, value: query, onChange: e => {
+    const content = (jsxs(Fragment, { children: [jsx("div", { "aria-hidden": "true", className: overlayStyle, "data-testid": testId ? `${testId}-overlay` : undefined, onClick: handleOverlayClick }), jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": "Command palette", className: cx(panelStyle, className), style: { width: widthCss, ...style }, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [jsxs("div", { className: inputWrapperStyle, children: [jsx("span", { className: searchIconStyle, "aria-hidden": "true", children: jsx(SearchIcon, {}) }), jsx("input", { ref: inputRef, id: inputId, type: "text", role: "combobox", "aria-expanded": "true", "aria-controls": listboxId, "aria-activedescendant": activeId, "aria-autocomplete": "list", className: inputStyle, placeholder: placeholder, value: query, onChange: e => {
                                     setQuery(e.target.value);
                                     setActiveIndex(0);
-                                }, "data-testid": testId ? `${testId}-input` : undefined })] }), selectableItems.length === 0 ? (jsx("div", { className: emptyStyle, "data-testid": testId ? `${testId}-empty` : undefined, children: emptyState ?? `No matches for "${debouncedQuery}"` })) : (jsx("ul", { ref: listRef, id: listboxId, role: "listbox", className: listStyle, style: { maxHeight }, children: rows.map((row, rowIndex) => {
+                                }, "data-testid": testId ? `${testId}-input` : undefined })] }), selectableItems.length === 0 ? (jsx("div", { className: emptyStyle, "data-testid": testId ? `${testId}-empty` : undefined, children: emptyState ?? `No matches for "${deferredQuery}"` })) : (jsx("ul", { ref: listRef, id: listboxId, role: "listbox", className: listStyle, style: { maxHeight }, children: rows.map((row, rowIndex) => {
                             if (row.type === 'header') {
                                 return (jsx("li", { role: "presentation", className: groupHeaderStyle, children: row.groupLabel }, `hdr-${row.group}-${String(rowIndex)}`));
                             }
@@ -239,14 +244,19 @@ const CommandPalette = ({ open, onClose, items, onSelect, placeholder = 'Type a
                                 return null;
                             const isSelected = itemIndex === activeIndex;
                             const itemDomId = `${listboxId}-item-${String(itemIndex)}`;
-                            return (jsx("li", { id: itemDomId, role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled ? true : undefined, className: cx(itemStyle, isSelected && itemSelectedStyle), "data-disabled": item.disabled ? 'true' : undefined, "data-row-index": itemIndex, "data-testid": testId ? `${testId}-item-${item.id}` : undefined, onMouseEnter: () => {
+                            return (
+                            // Keyboard selection is handled centrally via the
+                            // aria-activedescendant model on the dialog (Enter selects the
+                            // active option); the click is a pointer-only convenience.
+                            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                            jsx("li", { id: itemDomId, role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled ? true : undefined, className: cx(itemStyle, isSelected && itemSelectedStyle), "data-disabled": item.disabled ? 'true' : undefined, "data-row-index": itemIndex, "data-testid": testId ? `${testId}-item-${item.id}` : undefined, onMouseEnter: () => {
                                     if (!item.disabled)
                                         setActiveIndex(itemIndex);
                                 }, onClick: () => {
                                     runSelect(item);
                                 }, children: renderItem ? (renderItem(item, {
                                     selected: isSelected,
-                                    query: debouncedQuery,
+                                    query: deferredQuery,
                                 })) : (jsx(DefaultItemContent, { item: item })) }, `${row.group}-${item.id}`));
                         }) }))] })] }));
     if (portal && typeof document !== 'undefined') {

package/dist/esm/components/feedback/CommandPalette/CommandPalette.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.js","sources":["../../../../../../src/components/feedback/CommandPalette/CommandPalette.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAoCA;AACA;AAUA;AACE;;AACsB;;;AAEtB;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI;AAqBL;AACA;AACA;AAEA;AACA;;;;AAMA;AACE;;AAED;;;;;;;AAQD;;;;AAKI;AACE;;AAEF;;AAEA;;AAEF;AACF;;;;AAKE;;;;AAKE;;AAEE;AAAwB;;AAE1B;AACE;AACA;;;;AAKJ;AAEA;AACE;;AAEE;AACA;;;;;;;AASJ;;AAEE;;AACA;AAEI;;AAEE;;;;AAIF;AACA;;AAED;;AAEH;AACE;;AAEE;AACA;;;;AAID;AACD;;;AAIJ;;;;;AAME;AAAkC;AAClC;AAAoC;AACpC;AACF;AACF;AAEA;;AAGM;;AACe;AACf;;AACc;;;AAEd;AACF;AACF;AAIF;;;AAGI;AACA;;;;AAGE;;AAEF;;AAKJ;AAEI;;AAEE;;;AAGF;;;;;AAKA;;AAEE;;;AAGF;;;;;AAKA;;AAEE;;;AAGF;;AAEE;AACA;;;AAEJ;;;AAMA;;AACA;AACA;;AACA;;;;AAMF;AAEA;;AAGM;;AAEJ;AAIF;AAAW;AAEX;AACA;;;;AAuCY;;AAEF;AAqBE;;;AAWA;AACA;AACA;AAAsC;AACtC;;AAEA;;;AAaI;;;AAOI;AACA;;AAOV;AAOV;;;AAGA;AACF;AAEA;AAEA;;"}
+{"version":3,"file":"CommandPalette.js","sources":["src/components/feedback/CommandPalette/CommandPalette.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { SearchIcon } from '@/components/Icons/SearchIcon';\nimport { Kbd } from '@/components/primitives/Kbd';\nimport { cx } from '@/utils/cx';\n\nimport {\n  emptyStyle,\n  groupHeaderStyle,\n  inputStyle,\n  inputWrapperStyle,\n  itemDescriptionStyle,\n  itemIconStyle,\n  itemLabelStyle,\n  itemSelectedStyle,\n  itemShortcutStyle,\n  itemStyle,\n  itemTextStyle,\n  listStyle,\n  overlayStyle,\n  panelStyle,\n  searchIconStyle,\n} from './CommandPalette.css';\nimport { fuzzyFilter } from './fuzzySearch';\nimport { useRecentItems } from './useRecentItems';\n\nimport type { CommandItem, CommandPaletteProps } from './CommandPalette.types';\n\nconst DEFAULT_GROUP = 'default';\nconst RECENT_GROUP = '__recent__';\n\ninterface ResolvedRow {\n  type: 'header' | 'item';\n  group: string;\n  groupLabel: string;\n  item?: CommandItem;\n  index?: number; // index into the flat selectable items list\n}\n\nfunction getItemSearchStrings(item: CommandItem): string[] {\n  const out = [item.label];\n  if (item.description) out.push(item.description);\n  if (item.keywords) out.push(...item.keywords);\n  return out;\n}\n\n/**\n * Search-driven command list shown as a centred floating dialog. Type to\n * fuzzy-filter, ArrowUp/ArrowDown to navigate, Enter to select, Escape to\n * close. Recent selections are tracked in localStorage when `recentKey` is\n * set. The component does not bind a global hotkey — wire `useHotkey` in\n * the consumer.\n *\n * @example\n * ```tsx\n * useHotkey('Mod+K', () => { setOpen(true); });\n *\n * <CommandPalette\n *   open={open}\n *   onClose={() => setOpen(false)}\n *   items={[\n *     { id: 'open', label: 'Open File', shortcut: 'Cmd+O', group: 'File' },\n *     { id: 'save', label: 'Save', shortcut: 'Cmd+S', group: 'File' },\n *   ]}\n *   onSelect={(item) => runCommand(item.id)}\n *   recentKey=\"myapp:command-palette\"\n * />\n * ```\n */\nexport const CommandPalette: React.FC<CommandPaletteProps> = ({\n  open,\n  onClose,\n  items,\n  onSelect,\n  placeholder = 'Type a command or search...',\n  emptyState,\n  recentLabel = 'Recent',\n  recentKey,\n  maxRecent = 5,\n  renderItem,\n  portal = true,\n  maxHeight = 400,\n  width = 640,\n  className,\n  style,\n  testId,\n  id,\n  ...rest\n}) => {\n  const autoId = useId();\n  const inputId = id ?? `command-palette-${autoId}`;\n  const listboxId = `${inputId}-listbox`;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const [query, setQuery] = useState('');\n  const [activeIndex, setActiveIndex] = useState(0);\n  // Defer the query that drives fuzzy filtering so the input stays responsive\n  // while a large command list re-filters and re-sorts. The immediate `query`\n  // still drives the input value.\n  const deferredQuery = useDeferredValue(query);\n\n  const { recentIds, pushRecent } = useRecentItems({\n    storageKey: recentKey,\n    maxRecent,\n  });\n\n  // Reset state on each open transition. This reacts to the `open` prop\n  // toggling rather than synchronizing continuous state, so the one-shot\n  // setState in the effect is intentional.\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setQuery('');\n      setActiveIndex(0);\n    }\n  }, [open]);\n\n  // Focus the input on open.\n  useEffect(() => {\n    if (open) {\n      const t = setTimeout(() => {\n        inputRef.current?.focus();\n      }, 0);\n      return () => {\n        clearTimeout(t);\n      };\n    }\n    return undefined;\n  }, [open]);\n\n  // Resolve groups + filtering.\n  const { rows, selectableItems } = useMemo(() => {\n    const groupOrder: string[] = [];\n    const groupMap = new Map<string, CommandItem[]>();\n\n    if (deferredQuery === '' && recentIds.length > 0) {\n      const byId = new Map(items.map(it => [it.id, it]));\n      const recent: CommandItem[] = [];\n      for (const id of recentIds) {\n        const it = byId.get(id);\n        if (it && !it.disabled) recent.push(it);\n      }\n      if (recent.length > 0) {\n        groupOrder.push(RECENT_GROUP);\n        groupMap.set(RECENT_GROUP, recent);\n      }\n    }\n\n    const filtered = fuzzyFilter(deferredQuery, items, getItemSearchStrings);\n    const filteredItems = filtered.map(r => r.item);\n\n    for (const item of filteredItems) {\n      const g = item.group ?? DEFAULT_GROUP;\n      if (!groupMap.has(g)) {\n        groupOrder.push(g);\n        groupMap.set(g, []);\n      }\n      groupMap.get(g)?.push(item);\n    }\n\n    const rows: ResolvedRow[] = [];\n    const flat: CommandItem[] = [];\n    let nextIndex = 0;\n\n    for (const groupKey of groupOrder) {\n      const list = groupMap.get(groupKey);\n      if (!list || list.length === 0) continue;\n      const groupLabel =\n        groupKey === RECENT_GROUP\n          ? recentLabel\n          : groupKey === DEFAULT_GROUP\n            ? ''\n            : groupKey;\n      if (groupLabel) {\n        rows.push({\n          type: 'header',\n          group: groupKey,\n          groupLabel,\n        });\n      }\n      for (const item of list) {\n        const index = nextIndex++;\n        rows.push({\n          type: 'item',\n          group: groupKey,\n          groupLabel,\n          item,\n          index,\n        });\n        flat.push(item);\n      }\n    }\n\n    return { rows, selectableItems: flat };\n  }, [items, deferredQuery, recentIds, recentLabel]);\n\n  // Clamp the active index during render when the result list shrinks. This is\n  // React's documented adjust-state-during-render pattern — it avoids an extra\n  // commit, and the guards make it self-terminating.\n  if (selectableItems.length === 0) {\n    if (activeIndex !== 0) setActiveIndex(0);\n  } else if (activeIndex >= selectableItems.length) {\n    setActiveIndex(selectableItems.length - 1);\n  }\n\n  const moveActive = useCallback(\n    (delta: number) => {\n      setActiveIndex(prev => {\n        const len = selectableItems.length;\n        if (len === 0) return 0;\n        let next = prev + delta;\n        if (next < 0) next = len - 1;\n        if (next >= len) next = 0;\n        return next;\n      });\n    },\n    [selectableItems.length]\n  );\n\n  const runSelect = useCallback(\n    (item: CommandItem) => {\n      if (item.disabled) return;\n      pushRecent(item.id);\n      if (item.onSelect) {\n        item.onSelect();\n      } else {\n        onSelect?.(item);\n      }\n      onClose();\n    },\n    [onClose, onSelect, pushRecent]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        moveActive(1);\n        return;\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        moveActive(-1);\n        return;\n      }\n      if (e.key === 'Home') {\n        e.preventDefault();\n        setActiveIndex(0);\n        return;\n      }\n      if (e.key === 'End') {\n        e.preventDefault();\n        setActiveIndex(Math.max(0, selectableItems.length - 1));\n        return;\n      }\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        const item = selectableItems[activeIndex];\n        if (item) runSelect(item);\n      }\n    },\n    [activeIndex, moveActive, onClose, runSelect, selectableItems]\n  );\n\n  // Scroll active item into view when it changes.\n  useEffect(() => {\n    if (!open) return;\n    const list = listRef.current;\n    if (!list) return;\n    const el = list.querySelector<HTMLElement>(\n      `[data-row-index=\"${String(activeIndex)}\"]`\n    );\n    if (el && typeof el.scrollIntoView === 'function') {\n      el.scrollIntoView({ block: 'nearest' });\n    }\n  }, [activeIndex, open]);\n\n  const handleOverlayClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  if (!open) return null;\n\n  const widthCss = typeof width === 'number' ? `${String(width)}px` : width;\n  const activeId =\n    activeIndex < selectableItems.length\n      ? `${listboxId}-item-${String(activeIndex)}`\n      : undefined;\n\n  const content = (\n    <>\n      {/* Decorative backdrop: pointer users can click to dismiss, while\n          keyboard users dismiss via Escape handled on the dialog panel. */}\n      <div\n        aria-hidden=\"true\"\n        className={overlayStyle}\n        data-testid={testId ? `${testId}-overlay` : undefined}\n        onClick={handleOverlayClick}\n      />\n      {/* The dialog panel needs a keydown handler for Escape-to-close and\n          listbox navigation; this is required dialog behavior, not a static\n          element repurposed as interactive. */}\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"Command palette\"\n        className={cx(panelStyle, className)}\n        style={{ width: widthCss, ...style }}\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        <div className={inputWrapperStyle}>\n          <span className={searchIconStyle} aria-hidden=\"true\">\n            <SearchIcon />\n          </span>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded=\"true\"\n            aria-controls={listboxId}\n            aria-activedescendant={activeId}\n            aria-autocomplete=\"list\"\n            className={inputStyle}\n            placeholder={placeholder}\n            value={query}\n            onChange={e => {\n              setQuery(e.target.value);\n              setActiveIndex(0);\n            }}\n            data-testid={testId ? `${testId}-input` : undefined}\n          />\n        </div>\n\n        {selectableItems.length === 0 ? (\n          <div\n            className={emptyStyle}\n            data-testid={testId ? `${testId}-empty` : undefined}\n          >\n            {emptyState ?? `No matches for \"${deferredQuery}\"`}\n          </div>\n        ) : (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            role=\"listbox\"\n            className={listStyle}\n            style={{ maxHeight }}\n          >\n            {rows.map((row, rowIndex) => {\n              if (row.type === 'header') {\n                return (\n                  <li\n                    key={`hdr-${row.group}-${String(rowIndex)}`}\n                    role=\"presentation\"\n                    className={groupHeaderStyle}\n                  >\n                    {row.groupLabel}\n                  </li>\n                );\n              }\n              const item = row.item;\n              const itemIndex = row.index;\n              if (!item || itemIndex === undefined) return null;\n              const isSelected = itemIndex === activeIndex;\n              const itemDomId = `${listboxId}-item-${String(itemIndex)}`;\n              return (\n                // Keyboard selection is handled centrally via the\n                // aria-activedescendant model on the dialog (Enter selects the\n                // active option); the click is a pointer-only convenience.\n                // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n                <li\n                  key={`${row.group}-${item.id}`}\n                  id={itemDomId}\n                  role=\"option\"\n                  aria-selected={isSelected}\n                  aria-disabled={item.disabled ? true : undefined}\n                  className={cx(itemStyle, isSelected && itemSelectedStyle)}\n                  data-disabled={item.disabled ? 'true' : undefined}\n                  data-row-index={itemIndex}\n                  data-testid={testId ? `${testId}-item-${item.id}` : undefined}\n                  onMouseEnter={() => {\n                    if (!item.disabled) setActiveIndex(itemIndex);\n                  }}\n                  onClick={() => {\n                    runSelect(item);\n                  }}\n                >\n                  {renderItem ? (\n                    renderItem(item, {\n                      selected: isSelected,\n                      query: deferredQuery,\n                    })\n                  ) : (\n                    <DefaultItemContent item={item} />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </div>\n    </>\n  );\n\n  if (portal && typeof document !== 'undefined') {\n    return createPortal(content, document.body);\n  }\n  return content;\n};\n\nCommandPalette.displayName = 'CommandPalette';\n\nconst DefaultItemContent: React.FC<{ item: CommandItem }> = ({ item }) => (\n  <>\n    {item.icon && <span className={itemIconStyle}>{item.icon}</span>}\n    <span className={itemTextStyle}>\n      <span className={itemLabelStyle}>{item.label}</span>\n      {item.description && (\n        <span className={itemDescriptionStyle}>{item.description}</span>\n      )}\n    </span>\n    {item.shortcut && (\n      <span className={itemShortcutStyle}>\n        <Kbd size=\"sm\">{item.shortcut}</Kbd>\n      </span>\n    )}\n  </>\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAuCA;AACA;AAUA;AACE;;AACsB;;;AAEtB;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI;AAoBL;AACA;AACA;AAEA;AACA;;;;;;AAOA;AAEA;AACE;;AAED;;;;;;;;;;AAWD;;;;AAKI;AACE;;AAEF;;AAEA;;AAEF;AACF;;;;AAKE;;;;AAKE;;AAEE;AAAwB;;AAE1B;AACE;AACA;;;;AAKJ;AAEA;AACE;;AAEE;AACA;;;;;;;AASJ;;AAEE;;AACA;AAEI;;AAEE;;;;AAIF;AACA;;AAED;;AAEH;AACE;;AAEE;AACA;;;;AAID;AACD;;;AAIJ;;;;;AAMF;;;;AAEO;AACL;;AAGF;;AAGM;;AACe;AACf;;AACc;;;AAEd;AACF;AACF;AAIF;;;AAGI;AACA;;;;AAGE;;AAEF;;AAKJ;AAEI;;AAEE;;;AAGF;;;;;AAKA;;AAEE;;;AAGF;;;;;AAKA;;AAEE;;;AAGF;;AAEE;AACA;;;AAEJ;;;AAMA;;AACA;AACA;;AACA;;;;AAMF;AAEA;;AAGM;;AAEJ;AAIF;AAAW;AAEX;AACA;;;;AA8CY;;AAEF;AAqBE;;;AAWA;AACA;AACA;AAAsC;AACtC;;;;;;;AAOE;;;AAYE;;;AAOI;AACA;;AAOV;AAOV;;;AAGA;AACF;AAEA;AAEA;;"}

package/dist/esm/components/feedback/CommandPalette/fuzzySearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"fuzzySearch.js","sources":["../../../../../../src/components/feedback/CommandPalette/fuzzySearch.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"fuzzySearch.js","sources":["src/components/feedback/CommandPalette/fuzzySearch.ts"],"sourcesContent":["/**\n * Score how well `query` matches `target`. Higher = better. Zero = no match.\n *\n * Heuristics, in priority order:\n *   1. Exact case-insensitive match (1000).\n *   2. Target starts with the query (800 + length bonus).\n *   3. Target contains the query as a contiguous substring (500 + position bonus).\n *   4. Subsequence match: every query char appears in target in order; bonuses\n *      for consecutive matches, word-boundary matches, and earlier positions.\n *\n * @example\n * ```ts\n * fuzzyScore('opn', 'open file')  // > 0, subsequence match\n * fuzzyScore('zzz', 'open file')  // 0\n * ```\n */\nexport function fuzzyScore(query: string, target: string): number {\n  if (query === '') return 1;\n  if (target === '') return 0;\n\n  const q = query.toLowerCase();\n  const t = target.toLowerCase();\n\n  if (q === t) return 1000;\n  if (t.startsWith(q)) return 800 + Math.max(0, 50 - target.length);\n  const containsAt = t.indexOf(q);\n  if (containsAt !== -1)\n    return 500 - containsAt + Math.max(0, 30 - target.length);\n\n  let score = 0;\n  let qi = 0;\n  let lastMatch = -2;\n  for (let ti = 0; ti < t.length && qi < q.length; ti++) {\n    const ch = t[ti];\n    if (ch === q[qi]) {\n      // Earlier matches contribute more.\n      score += Math.max(1, 30 - ti);\n      if (lastMatch === ti - 1) {\n        score += 25;\n      }\n      // Bonus when the match begins a \"word\" (after space/-/_/.)\n      const prev = ti > 0 ? t[ti - 1] : '';\n      if (\n        ti === 0 ||\n        prev === ' ' ||\n        prev === '-' ||\n        prev === '_' ||\n        prev === '.'\n      ) {\n        score += 20;\n      }\n      lastMatch = ti;\n      qi++;\n    }\n  }\n\n  if (qi !== q.length) return 0;\n  return score;\n}\n\nexport interface FuzzyMatch<T> {\n  item: T;\n  score: number;\n}\n\n/**\n * Score a list of items against a query. Items with score 0 are dropped, the\n * rest are sorted by descending score. The `getStrings` accessor returns one\n * or more strings per item to score against; the highest-scoring string wins.\n */\nexport function fuzzyFilter<T>(\n  query: string,\n  items: readonly T[],\n  getStrings: (item: T) => readonly string[]\n): FuzzyMatch<T>[] {\n  if (query === '') {\n    return items.map(item => ({ item, score: 1 }));\n  }\n  const result: FuzzyMatch<T>[] = [];\n  for (const item of items) {\n    const strings = getStrings(item);\n    let best = 0;\n    for (const s of strings) {\n      const score = fuzzyScore(query, s);\n      if (score > best) best = score;\n    }\n    if (best > 0) {\n      result.push({ item, score: best });\n    }\n  }\n  result.sort((a, b) => b.score - a.score);\n  return result;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/feedback/CommandPalette/useRecentItems.js

@@ -34,9 +34,11 @@ function writeStorage(key, ids) {
  */
 function useRecentItems({ storageKey, maxRecent = 5, }) {
     const [recentIds, setRecentIds] = useState(() => storageKey ? readStorage(storageKey).slice(0, maxRecent) : []);
-    // Re-read storage if the key changes after mount.
+    // Re-read storage if the key changes after mount. External-system sync
+    // (localStorage), so setState in the effect is the correct pattern.
     useEffect(() => {
         if (storageKey) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setRecentIds(readStorage(storageKey).slice(0, maxRecent));
         }
         else {

package/dist/esm/components/feedback/CommandPalette/useRecentItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRecentItems.js","sources":["../../../../../../src/components/feedback/CommandPalette/useRecentItems.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAiBA;;AACqC;AACnC;;AAEE;AAAU;;AAEV;AACE;;AAEF;;AACA;AACA;;AAEJ;AAEA;;;AAEE;AACE;;AACA;;;AAGJ;AAEA;;;AAGG;AACG;AAIJ;;;;AAOI;;;;;AAIJ;AAEA;;;AAIM;AAAgB;AAChB;AACF;AACF;AAIF;;AAEE;AAAgB;AAClB;AAEA;AACF;;"}
+{"version":3,"file":"useRecentItems.js","sources":["src/components/feedback/CommandPalette/useRecentItems.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useState } from 'react';\n\ninterface UseRecentItemsOptions {\n  /** localStorage key (component does not bind/store unless this is set). */\n  storageKey?: string;\n  /** Maximum number of recent ids to keep. @default 5 */\n  maxRecent?: number;\n}\n\ninterface UseRecentItemsReturn {\n  recentIds: string[];\n  pushRecent: (id: string) => void;\n  clearRecent: () => void;\n}\n\nfunction readStorage(key: string): string[] {\n  if (typeof window === 'undefined') return [];\n  try {\n    const raw = window.localStorage.getItem(key);\n    if (!raw) return [];\n    const parsed: unknown = JSON.parse(raw);\n    if (Array.isArray(parsed)) {\n      return parsed.filter((v): v is string => typeof v === 'string');\n    }\n    return [];\n  } catch {\n    return [];\n  }\n}\n\nfunction writeStorage(key: string, ids: string[]): void {\n  if (typeof window === 'undefined') return;\n  try {\n    window.localStorage.setItem(key, JSON.stringify(ids));\n  } catch {\n    // localStorage may be unavailable (private mode, full quota); silently ignore.\n  }\n}\n\n/**\n * Track recently selected command ids. Backed by localStorage when\n * `storageKey` is provided; otherwise the list is in-memory only.\n */\nexport function useRecentItems({\n  storageKey,\n  maxRecent = 5,\n}: UseRecentItemsOptions): UseRecentItemsReturn {\n  const [recentIds, setRecentIds] = useState<string[]>(() =>\n    storageKey ? readStorage(storageKey).slice(0, maxRecent) : []\n  );\n\n  // Re-read storage if the key changes after mount. External-system sync\n  // (localStorage), so setState in the effect is the correct pattern.\n  useEffect(() => {\n    if (storageKey) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setRecentIds(readStorage(storageKey).slice(0, maxRecent));\n    } else {\n      setRecentIds([]);\n    }\n  }, [storageKey, maxRecent]);\n\n  const pushRecent = useCallback(\n    (id: string) => {\n      setRecentIds(prev => {\n        const next = [id, ...prev.filter(v => v !== id)].slice(0, maxRecent);\n        if (storageKey) writeStorage(storageKey, next);\n        return next;\n      });\n    },\n    [storageKey, maxRecent]\n  );\n\n  const clearRecent = useCallback(() => {\n    setRecentIds([]);\n    if (storageKey) writeStorage(storageKey, []);\n  }, [storageKey]);\n\n  return { recentIds, pushRecent, clearRecent };\n}\n"],"names":[],"mappings":";;;AAiBA;;AACqC;AACnC;;AAEE;AAAU;;AAEV;AACE;;AAEF;;AACA;AACA;;AAEJ;AAEA;;;AAEE;AACE;;AACA;;;AAGJ;AAEA;;;AAGG;AACG;AAIJ;;;;;;AASI;;;;;AAIJ;AAEA;;;AAIM;AAAgB;AAChB;AACF;AACF;AAIF;;AAEE;AAAgB;AAClB;AAEA;AACF;;"}

package/dist/esm/components/feedback/Dialog/Dialog.js

@@ -2,11 +2,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useRef, useCallback, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { overlayRecipe, dialogPanelRecipe } from './Dialog.css.js';
-import { useDialogAnimation } from './useDialogAnimation.js';
 import { useFocusTrap } from '../../../hooks/useFocusTrap/useFocusTrap.js';
 import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { cx } from '../../../utils/cx.js';
+import { overlayRecipe, dialogPanelRecipe } from './Dialog.css.js';
+import { useDialogAnimation } from './useDialogAnimation.js';
 
 // --- Context ---
 const DialogContext = /*#__PURE__*/ createContext(null);
@@ -74,7 +74,10 @@ const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlay
         titleId,
         descriptionId,
     };
-    const dialogContent = (jsxs(DialogContext.Provider, { value: contextValue, children: [showOverlay && (jsx("div", { className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: setPanelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(dialogPanelRecipe({ size, closing }), className), style: style, id: id, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
+    const dialogContent = (jsxs(DialogContext.Provider, { value: contextValue, children: [showOverlay && (
+            // Decorative backdrop: pointer users can click to dismiss, while
+            // keyboard users dismiss via Escape handled on the dialog panel.
+            jsx("div", { "aria-hidden": "true", className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: setPanelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(dialogPanelRecipe({ size, closing }), className), style: style, id: id, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
     if (portal) {
         return createPortal(dialogContent, document.body);
     }

package/dist/esm/components/feedback/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAiBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAoBL;AACA;AACA;AACA;AAEA;;;;AAIC;;AAGC;AACA;AACD;;AAID;;;;AAKM;;;;;;AASN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;AAMA;;;;AA2CA;AACF;AAEA;;"}
+{"version":3,"file":"Dialog.js","sources":["src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useFocusTrap } from '@/hooks/useFocusTrap';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { cx } from '@/utils/cx';\n\nimport { overlayRecipe, dialogPanelRecipe } from './Dialog.css';\nimport { useDialogAnimation } from './useDialogAnimation';\n\nimport type { DialogContextValue, DialogProps } from './Dialog.types';\n\n// --- Context ---\n\nconst DialogContext = /*#__PURE__*/ createContext<DialogContextValue | null>(\n  null\n);\n\nexport function useDialogContext(): DialogContextValue {\n  const ctx = useContext(DialogContext);\n  if (!ctx) {\n    throw new Error(\n      'Dialog sub-components must be used within a <Dialog> component'\n    );\n  }\n  return ctx;\n}\n\n// --- Component ---\n\n/**\n * Dialog component for modal overlays in editor interfaces.\n *\n * Renders an accessible modal dialog with overlay, focus trap,\n * and keyboard support. Compound component pattern: use with\n * DialogHeader, DialogBody, DialogFooter, and DialogClose.\n *\n * @example\n * ```tsx\n * <Dialog open={isOpen} onClose={() => setIsOpen(false)} title=\"Confirm\">\n *   <DialogHeader>Confirm Action</DialogHeader>\n *   <DialogBody>Are you sure?</DialogBody>\n *   <DialogFooter align=\"right\">\n *     <Button onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button variant=\"filled\">Confirm</Button>\n *   </DialogFooter>\n * </Dialog>\n * ```\n */\nexport const Dialog: React.FC<DialogProps> = ({\n  open,\n  onClose,\n  size = 'md',\n  title,\n  description,\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n  showOverlay = true,\n  trapFocus = true,\n  initialFocusRef,\n  portal = true,\n  children,\n  className,\n  style,\n  testId,\n  id,\n  ref,\n  ...rest\n}) => {\n  const autoId = useId();\n  const titleId = `dialog-title-${autoId}`;\n  const descriptionId = `dialog-desc-${autoId}`;\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  const { mounted, closing } = useDialogAnimation({\n    open,\n    panelRef,\n    initialFocusRef,\n  });\n\n  const handleFocusTrap = useFocusTrap({\n    containerRef: panelRef,\n    enabled: trapFocus,\n  });\n\n  const setPanelRef = useMergedRef<HTMLDivElement>(panelRef, ref);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      // Escape handler — inline instead of global document listener\n      if (closeOnEscape && e.key === 'Escape') {\n        e.stopPropagation();\n        onClose();\n        return;\n      }\n      // Focus trap\n      handleFocusTrap(e);\n    },\n    [closeOnEscape, onClose, handleFocusTrap]\n  );\n\n  const handleOverlayClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (closeOnOverlayClick && e.target === e.currentTarget) {\n        onClose();\n      }\n    },\n    [closeOnOverlayClick, onClose]\n  );\n\n  if (!mounted) return null;\n\n  const contextValue: DialogContextValue = {\n    onClose,\n    titleId,\n    descriptionId,\n  };\n\n  const dialogContent = (\n    <DialogContext.Provider value={contextValue}>\n      {showOverlay && (\n        // Decorative backdrop: pointer users can click to dismiss, while\n        // keyboard users dismiss via Escape handled on the dialog panel.\n        <div\n          aria-hidden=\"true\"\n          className={overlayRecipe({ closing })}\n          onClick={handleOverlayClick}\n          data-testid={testId ? `${testId}-overlay` : undefined}\n        />\n      )}\n      {/* The dialog panel needs a keydown handler for Escape-to-close and\n          focus trapping; this is required modal-dialog behavior, not a static\n          element repurposed as interactive. */}\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n      <div\n        ref={setPanelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={description ? descriptionId : undefined}\n        tabIndex={-1}\n        className={cx(dialogPanelRecipe({ size, closing }), className)}\n        style={style}\n        id={id}\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {/* Hidden elements for ARIA references when using title/description props */}\n        {title && (\n          <span id={titleId} style={{ display: 'none' }}>\n            {title}\n          </span>\n        )}\n        {description && (\n          <span id={descriptionId} style={{ display: 'none' }}>\n            {description}\n          </span>\n        )}\n        {children}\n      </div>\n    </DialogContext.Provider>\n  );\n\n  if (portal) {\n    return createPortal(dialogContent, document.body);\n  }\n\n  return dialogContent;\n};\n\nDialog.displayName = 'Dialog';\n"],"names":[],"mappings":";;;;;;;;;;AAoBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAoBL;AACA;AACA;AACA;AAEA;;;;AAIC;;AAGC;AACA;AACD;;AAID;;;;AAKM;;;;;;AASN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;AAMA;;;AAKM;;;;AA6CN;AACF;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","sources":["../../../../../../src/components/feedback/Dialog/DialogBody.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;AAEA;;;;;;;;;AASG;;;AAoBH;AAEA;;"}
+{"version":3,"file":"DialogBody.js","sources":["src/components/feedback/Dialog/DialogBody.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { dialogBodyStyle } from './Dialog.css';\n\nimport type { DialogBodyProps } from './Dialog.types';\n\n// --- Component ---\n\n/**\n * DialogBody renders the scrollable content area of a Dialog.\n *\n * @example\n * ```tsx\n * <DialogBody>\n *   <p>Dialog content goes here.</p>\n * </DialogBody>\n * ```\n */\nexport const DialogBody: React.FC<DialogBodyProps> = ({\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  return (\n    <div\n      ref={ref}\n      className={cx(dialogBodyStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nDialogBody.displayName = 'DialogBody';\n"],"names":[],"mappings":";;;;;AAUA;AAEA;;;;;;;;;AASG;;;AAoBH;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogClose.js","sources":["../../../../../../src/components/feedback/Dialog/DialogClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;;;;;;;;;AASG;;AAED;AAEA;AACE;;AAEE;;AAEH;AACH;AAEA;;"}
+{"version":3,"file":"DialogClose.js","sources":["src/components/feedback/Dialog/DialogClose.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { useDialogContext } from './Dialog';\n\ninterface DialogCloseProps {\n  /** The element to wrap with close behavior */\n  children: React.ReactElement<{ onClick?: React.MouseEventHandler }>;\n}\n\n/**\n * DialogClose wraps a child element and adds onClick to close the dialog.\n *\n * @example\n * ```tsx\n * <DialogClose>\n *   <Button>Cancel</Button>\n * </DialogClose>\n * ```\n */\nexport const DialogClose: React.FC<DialogCloseProps> = ({ children }) => {\n  const { onClose } = useDialogContext();\n\n  return React.cloneElement(children, {\n    onClick: (e: React.MouseEvent) => {\n      children.props.onClick?.(e);\n      onClose();\n    },\n  });\n};\n\nDialogClose.displayName = 'DialogClose';\n"],"names":[],"mappings":";;;;AAWA;;;;;;;;;AASG;;AAED;AAEA;AACE;;AAEE;;AAEH;AACH;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogFooter.js","sources":["../../../../../../src/components/feedback/Dialog/DialogFooter.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;AAEA;;;;;;;;;;AAUG;AACI;AASL;AAWF;AAEA;;"}
+{"version":3,"file":"DialogFooter.js","sources":["src/components/feedback/Dialog/DialogFooter.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { dialogFooterRecipe } from './Dialog.css';\n\nimport type { DialogFooterProps } from './Dialog.types';\n\n// --- Component ---\n\n/**\n * DialogFooter renders the action area at the bottom of a Dialog.\n *\n * @example\n * ```tsx\n * <DialogFooter align=\"right\">\n *   <Button onClick={onCancel}>Cancel</Button>\n *   <Button variant=\"filled\" onClick={onConfirm}>Confirm</Button>\n * </DialogFooter>\n * ```\n */\nexport const DialogFooter: React.FC<DialogFooterProps> = ({\n  children,\n  align = 'right',\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  return (\n    <div\n      ref={ref}\n      className={cx(dialogFooterRecipe({ align }), className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nDialogFooter.displayName = 'DialogFooter';\n"],"names":[],"mappings":";;;;;AAUA;AAEA;;;;;;;;;;AAUG;AACI;AASL;AAWF;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogHeader.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CloseIcon } from '../../Icons/CloseIcon.js';
-import { useDialogContext } from './Dialog.js';
 import { cx } from '../../../utils/cx.js';
+import { useDialogContext } from './Dialog.js';
 import { dialogHeaderContentStyle, dialogTitleStyle, dialogDescriptionStyle, dialogCloseButtonStyle, dialogHeaderStyle } from './Dialog.css.js';
 
 // --- Component ---

package/dist/esm/components/feedback/Dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../../../../../../src/components/feedback/Dialog/DialogHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEA;;;;;;;;;;AAUG;AACI;;;AA2CP;AAEA;;"}
+{"version":3,"file":"DialogHeader.js","sources":["src/components/feedback/Dialog/DialogHeader.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { CloseIcon } from '@/components/Icons/CloseIcon';\nimport { cx } from '@/utils/cx';\n\nimport { useDialogContext } from './Dialog';\nimport {\n  dialogHeaderStyle,\n  dialogHeaderContentStyle,\n  dialogTitleStyle,\n  dialogDescriptionStyle,\n  dialogCloseButtonStyle,\n} from './Dialog.css';\n\nimport type { DialogHeaderProps } from './Dialog.types';\n\n// --- Component ---\n\n/**\n * DialogHeader renders the title, optional description, and close button\n * for a Dialog.\n *\n * @example\n * ```tsx\n * <DialogHeader description=\"This cannot be undone\">\n *   Delete Item\n * </DialogHeader>\n * ```\n */\nexport const DialogHeader: React.FC<DialogHeaderProps> = ({\n  children,\n  showClose = true,\n  description,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { onClose, titleId, descriptionId } = useDialogContext();\n\n  return (\n    <div\n      ref={ref}\n      className={cx(dialogHeaderStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <div className={dialogHeaderContentStyle}>\n        <div id={titleId} className={dialogTitleStyle}>\n          {children}\n        </div>\n        {description && (\n          <div id={descriptionId} className={dialogDescriptionStyle}>\n            {description}\n          </div>\n        )}\n      </div>\n      {showClose && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label=\"Close dialog\"\n          className={dialogCloseButtonStyle}\n          data-testid={testId ? `${testId}-close` : undefined}\n        >\n          <CloseIcon size=\"sm\" decorative />\n        </button>\n      )}\n    </div>\n  );\n};\n\nDialogHeader.displayName = 'DialogHeader';\n"],"names":[],"mappings":";;;;;;;AAkBA;AAEA;;;;;;;;;;AAUG;AACI;;;AA2CP;AAEA;;"}

package/dist/esm/components/feedback/Dialog/useDialogAnimation.js

@@ -20,6 +20,10 @@ function useDialogAnimation({ open, panelRef, initialFocusRef, }) {
         if (open) {
             // Opening: capture previous focus, mount immediately
             previousFocusRef.current = document.activeElement;
+            // Mount/closing state is driven by the `open` prop and gates a timed
+            // enter/exit animation (delayed unmount below), so it must live in an
+            // effect rather than be derived during render.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setClosing(false);
             setMounted(true);
             wasOpenRef.current = true;
@@ -44,7 +48,9 @@ function useDialogAnimation({ open, panelRef, initialFocusRef, }) {
                     previousFocusRef.current = null;
                 }
             }, delay);
-            return () => clearTimeout(timer);
+            return () => {
+                clearTimeout(timer);
+            };
         }
         return undefined;
     }, [open]);
@@ -69,7 +75,9 @@ function useDialogAnimation({ open, panelRef, initialFocusRef, }) {
                 }
             }
         }, 0);
-        return () => clearTimeout(timer);
+        return () => {
+            clearTimeout(timer);
+        };
     }, [open, mounted, initialFocusRef, panelRef]);
     return { mounted, closing };
 }

package/dist/esm/components/feedback/Dialog/useDialogAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialogAnimation.js","sources":["../../../../../../src/components/feedback/Dialog/useDialogAnimation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAiBA;;;;;;;AAOG;AACG;;;AAOJ;AACA;;;;AAKI;;;AAGA;;AACK;;;;;AAKL;;AAEA;AAEE;AACA;;AAEF;;;;AAKE;AACE;AACA;;;AAGJ;;AAEF;AACF;;;AAIE;;AAEA;AACE;AACE;;;AAEA;;;;;;;;;;;;AAaJ;;AAGF;AACF;;"}
+{"version":3,"file":"useDialogAnimation.js","sources":["src/components/feedback/Dialog/useDialogAnimation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { FOCUSABLE_SELECTOR } from '@/hooks/useFocusTrap';\n\nimport { DIALOG_ANIMATION_MS } from './Dialog.css';\n\nimport type { RefObject } from 'react';\n\ninterface UseDialogAnimationOptions {\n  open: boolean;\n  panelRef: RefObject<HTMLElement | null>;\n  initialFocusRef?: RefObject<HTMLElement | null>;\n}\n\ninterface UseDialogAnimationReturn {\n  mounted: boolean;\n  closing: boolean;\n}\n\n/**\n * Manages Dialog mount/unmount animation lifecycle and focus management.\n *\n * Combines three concerns into a single hook:\n * 1. Mount/unmount with closing animation delay\n * 2. Initial focus on open (respects initialFocusRef)\n * 3. Return focus to previously focused element on close\n */\nexport function useDialogAnimation({\n  open,\n  panelRef,\n  initialFocusRef,\n}: UseDialogAnimationOptions): UseDialogAnimationReturn {\n  const [mounted, setMounted] = useState(false);\n  const [closing, setClosing] = useState(false);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (open) {\n      // Opening: capture previous focus, mount immediately\n      previousFocusRef.current = document.activeElement as HTMLElement;\n      // Mount/closing state is driven by the `open` prop and gates a timed\n      // enter/exit animation (delayed unmount below), so it must live in an\n      // effect rather than be derived during render.\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setClosing(false);\n      setMounted(true);\n      wasOpenRef.current = true;\n    } else if (wasOpenRef.current) {\n      // Closing: start close animation, unmount after delay. Under\n      // prefers-reduced-motion: reduce, the close animation is suppressed\n      // (Dialog.css.ts), so honor that here too — snap the unmount to\n      // 0 ms instead of holding the dialog focus-trapped for nothing.\n      wasOpenRef.current = false;\n      setClosing(true);\n      const prefersReducedMotion =\n        typeof window !== 'undefined' &&\n        typeof window.matchMedia === 'function' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      const delay = prefersReducedMotion ? 0 : DIALOG_ANIMATION_MS;\n      const timer = setTimeout(() => {\n        setMounted(false);\n        setClosing(false);\n\n        // Return focus after unmount\n        if (previousFocusRef.current) {\n          previousFocusRef.current.focus();\n          previousFocusRef.current = null;\n        }\n      }, delay);\n      return () => {\n        clearTimeout(timer);\n      };\n    }\n    return undefined;\n  }, [open]);\n\n  // Initial focus after mount\n  useEffect(() => {\n    if (!open || !mounted) return;\n\n    const timer = setTimeout(() => {\n      if (initialFocusRef?.current) {\n        initialFocusRef.current.focus();\n      } else {\n        const panel = panelRef.current;\n        if (panel) {\n          const firstFocusable =\n            panel.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n          if (firstFocusable) {\n            firstFocusable.focus();\n          } else {\n            panel.focus();\n          }\n        }\n      }\n    }, 0);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [open, mounted, initialFocusRef, panelRef]);\n\n  return { mounted, closing };\n}\n"],"names":[],"mappings":";;;;;AAqBA;;;;;;;AAOG;AACG;;;AAOJ;AACA;;;;AAKI;;;;;;;AAOA;;AACK;;;;;AAKL;;AAEA;AAEE;AACA;;AAEF;;;;AAKE;AACE;AACA;;;AAGJ;;AAEA;;AAEF;AACF;;;AAIE;;AAEA;AACE;AACE;;;AAEA;;;;;;;;;;;;AAYJ;;AAEA;;AAGF;AACF;;"}

package/dist/esm/components/feedback/Drawer/Drawer.js

@@ -88,7 +88,10 @@ const DrawerRoot = ({ open, onClose, anchor = 'right', size = 'md', modal = true
         descriptionId,
     };
     const sizeStyle = resolveSize(size, anchor);
-    const drawerContent = (jsxs(DrawerContext.Provider, { value: contextValue, children: [modal && (jsx("div", { className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: setPanelRef, role: "dialog", "aria-modal": modal ? 'true' : undefined, "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(drawerPanelRecipe({ anchor, state: closing ? 'closing' : 'open' }), className), style: { ...sizeStyle, ...style }, id: id, "data-testid": testId, "data-anchor": anchor, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
+    const drawerContent = (jsxs(DrawerContext.Provider, { value: contextValue, children: [modal && (
+            // Decorative backdrop: pointer users can click to dismiss, while
+            // keyboard users dismiss via Escape handled on the drawer panel.
+            jsx("div", { "aria-hidden": "true", className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: setPanelRef, role: "dialog", "aria-modal": modal ? 'true' : undefined, "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(drawerPanelRecipe({ anchor, state: closing ? 'closing' : 'open' }), className), style: { ...sizeStyle, ...style }, id: id, "data-testid": testId, "data-anchor": anchor, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
     if (portal && typeof document !== 'undefined') {
         return createPortal(drawerContent, document.body);
     }

package/dist/esm/components/feedback/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../../src/components/feedback/Drawer/Drawer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAqCA;AAIA;AACE;;AAEE;;AAEF;AACF;AAEA;;;AAME;AACA;AACE;;;AAEA;;;;AAIA;AACA;;AAEJ;AAEA;;;;;;;;;;;;;;;;AAgBG;AACH;AAqBE;AACA;AACA;AACA;AAEA;AAEA;;;;AAIE;AACD;;AAGC;AACA;AACD;;AAID;;;AAIM;;;;;AAQN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;;AAQA;AA0CA;;;AAGA;AACF;AAEA;AAEA;;;AA0CA;AAEA;AAEA;AAmBA;AAEA;AAoBA;AAEA;AASE;;AAeF;AAEA;;AAUE;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"Drawer.js","sources":["src/components/feedback/Drawer/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { CloseIcon } from '@/components/Icons/CloseIcon';\nimport { useFocusTrap } from '@/hooks/useFocusTrap';\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { cx } from '@/utils/cx';\n\nimport {\n  DRAWER_SIZE_MAP,\n  drawerBodyStyle,\n  drawerCloseButtonStyle,\n  drawerDescriptionStyle,\n  drawerFooterRecipe,\n  drawerHeaderContentStyle,\n  drawerHeaderStyle,\n  drawerPanelRecipe,\n  drawerTitleStyle,\n  overlayRecipe,\n} from './Drawer.css';\nimport { useDrawerAnimation } from './useDrawerAnimation';\n\nimport type {\n  DrawerBodyProps,\n  DrawerCloseButtonProps,\n  DrawerContextValue,\n  DrawerFooterProps,\n  DrawerHeaderProps,\n  DrawerProps,\n  DrawerSize,\n} from './Drawer.types';\n\nconst DrawerContext = /*#__PURE__*/ createContext<DrawerContextValue | null>(\n  null\n);\n\nfunction useDrawerContext(): DrawerContextValue {\n  const ctx = useContext(DrawerContext);\n  if (!ctx) {\n    throw new Error('Drawer sub-components must be used within <Drawer>');\n  }\n  return ctx;\n}\n\nfunction resolveSize(\n  size: DrawerSize,\n  anchor: 'left' | 'right' | 'top' | 'bottom'\n) {\n  const isHorizontal = anchor === 'left' || anchor === 'right';\n  const dimension = isHorizontal ? 'width' : 'height';\n  let value: string;\n  if (typeof size === 'number') {\n    value = `${String(size)}px`;\n  } else {\n    value = DRAWER_SIZE_MAP[size] ?? size;\n  }\n  return {\n    [dimension]: value,\n    maxWidth: '100vw',\n    maxHeight: '100vh',\n  } as React.CSSProperties;\n}\n\n/**\n * Anchored sliding panel for secondary navigation, filters, or detail views.\n * Modal mode renders an overlay backdrop and traps focus; non-modal mode\n * leaves the rest of the page interactive.\n *\n * @example\n * ```tsx\n * <Drawer open={isOpen} onClose={close} anchor=\"right\" size=\"md\">\n *   <Drawer.Header>Filters</Drawer.Header>\n *   <Drawer.Body>...</Drawer.Body>\n *   <Drawer.Footer>\n *     <Button onClick={close}>Cancel</Button>\n *     <Button variant=\"filled\">Apply</Button>\n *   </Drawer.Footer>\n * </Drawer>\n * ```\n */\nconst DrawerRoot: React.FC<DrawerProps> = ({\n  open,\n  onClose,\n  anchor = 'right',\n  size = 'md',\n  modal = true,\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n  trapFocus,\n  initialFocusRef,\n  portal = true,\n  title,\n  description,\n  className,\n  style,\n  testId,\n  id,\n  children,\n  ref,\n  ...rest\n}) => {\n  const autoId = useId();\n  const titleId = `drawer-title-${autoId}`;\n  const descriptionId = `drawer-desc-${autoId}`;\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  const shouldTrapFocus = trapFocus ?? modal;\n\n  const { mounted, closing } = useDrawerAnimation({\n    open,\n    panelRef,\n    initialFocusRef,\n    shouldFocus: shouldTrapFocus,\n  });\n\n  const handleFocusTrap = useFocusTrap({\n    containerRef: panelRef,\n    enabled: shouldTrapFocus,\n  });\n\n  const setPanelRef = useMergedRef<HTMLDivElement>(panelRef, ref);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (closeOnEscape && e.key === 'Escape') {\n        e.stopPropagation();\n        onClose();\n        return;\n      }\n      handleFocusTrap(e);\n    },\n    [closeOnEscape, onClose, handleFocusTrap]\n  );\n\n  const handleOverlayClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (closeOnOverlayClick && e.target === e.currentTarget) {\n        onClose();\n      }\n    },\n    [closeOnOverlayClick, onClose]\n  );\n\n  if (!mounted) return null;\n\n  const contextValue: DrawerContextValue = {\n    onClose,\n    titleId,\n    descriptionId,\n  };\n\n  const sizeStyle = resolveSize(size, anchor);\n\n  const drawerContent = (\n    <DrawerContext.Provider value={contextValue}>\n      {modal && (\n        // Decorative backdrop: pointer users can click to dismiss, while\n        // keyboard users dismiss via Escape handled on the drawer panel.\n        <div\n          aria-hidden=\"true\"\n          className={overlayRecipe({ closing })}\n          onClick={handleOverlayClick}\n          data-testid={testId ? `${testId}-overlay` : undefined}\n        />\n      )}\n      {/* The drawer panel needs a keydown handler for Escape-to-close and\n          focus trapping; this is required modal-dialog behavior, not a static\n          element repurposed as interactive. */}\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n      <div\n        ref={setPanelRef}\n        role=\"dialog\"\n        aria-modal={modal ? 'true' : undefined}\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={description ? descriptionId : undefined}\n        tabIndex={-1}\n        className={cx(\n          drawerPanelRecipe({ anchor, state: closing ? 'closing' : 'open' }),\n          className\n        )}\n        style={{ ...sizeStyle, ...style }}\n        id={id}\n        data-testid={testId}\n        data-anchor={anchor}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {title && (\n          <span id={titleId} style={{ display: 'none' }}>\n            {title}\n          </span>\n        )}\n        {description && (\n          <span id={descriptionId} style={{ display: 'none' }}>\n            {description}\n          </span>\n        )}\n        {children}\n      </div>\n    </DrawerContext.Provider>\n  );\n\n  if (portal && typeof document !== 'undefined') {\n    return createPortal(drawerContent, document.body);\n  }\n  return drawerContent;\n};\n\nDrawerRoot.displayName = 'Drawer';\n\nconst DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  children,\n  showClose = true,\n  description,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { onClose, titleId, descriptionId } = useDrawerContext();\n  return (\n    <div\n      ref={ref}\n      className={cx(drawerHeaderStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <div className={drawerHeaderContentStyle}>\n        <div id={titleId} className={drawerTitleStyle}>\n          {children}\n        </div>\n        {description && (\n          <div id={descriptionId} className={drawerDescriptionStyle}>\n            {description}\n          </div>\n        )}\n      </div>\n      {showClose && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label=\"Close drawer\"\n          className={drawerCloseButtonStyle}\n          data-testid={testId ? `${testId}-close` : undefined}\n        >\n          <CloseIcon size=\"sm\" decorative />\n        </button>\n      )}\n    </div>\n  );\n};\n\nDrawerHeader.displayName = 'Drawer.Header';\n\nconst DrawerBody: React.FC<DrawerBodyProps> = ({\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => (\n  <div\n    ref={ref}\n    className={cx(drawerBodyStyle, className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\nDrawerBody.displayName = 'Drawer.Body';\n\nconst DrawerFooter: React.FC<DrawerFooterProps> = ({\n  children,\n  align = 'right',\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => (\n  <div\n    ref={ref}\n    className={cx(drawerFooterRecipe({ align }), className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\nDrawerFooter.displayName = 'Drawer.Footer';\n\nconst DrawerCloseButton: React.FC<DrawerCloseButtonProps> = ({\n  children,\n  className,\n  style,\n  testId,\n  'aria-label': ariaLabel = 'Close drawer',\n  ref,\n  ...rest\n}) => {\n  const { onClose } = useDrawerContext();\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={onClose}\n      aria-label={ariaLabel}\n      className={cx(drawerCloseButtonStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {children ?? <CloseIcon size=\"sm\" decorative />}\n    </button>\n  );\n};\n\nDrawerCloseButton.displayName = 'Drawer.CloseButton';\n\ninterface DrawerComponent extends React.FC<DrawerProps> {\n  Header: React.FC<DrawerHeaderProps>;\n  Body: React.FC<DrawerBodyProps>;\n  Footer: React.FC<DrawerFooterProps>;\n  CloseButton: React.FC<DrawerCloseButtonProps>;\n}\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Header: DrawerHeader,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  CloseButton: DrawerCloseButton,\n}) as DrawerComponent;\n"],"names":[],"mappings":";;;;;;;;;;;AAwCA;AAIA;AACE;;AAEE;;AAEF;AACF;AAEA;;;AAME;AACA;AACE;;;AAEA;;;;AAIA;AACA;;AAEJ;AAEA;;;;;;;;;;;;;;;;AAgBG;AACH;AAqBE;AACA;AACA;AACA;AAEA;AAEA;;;;AAIE;AACD;;AAGC;AACA;AACD;;AAID;;;AAIM;;;;;AAQN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;;AAQA;;;AAKM;AA4CN;;;AAGA;AACF;AAEA;AAEA;;;AA0CA;AAEA;AAEA;AAmBA;AAEA;AAoBA;AAEA;AASE;;AAeF;AAEA;;AAUE;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/feedback/Drawer/useDrawerAnimation.js

@@ -18,6 +18,10 @@ function useDrawerAnimation({ open, panelRef, initialFocusRef, shouldFocus, }) {
     useEffect(() => {
         if (open) {
             previousFocusRef.current = document.activeElement;
+            // Mount/closing state is driven by the `open` prop and gates a timed
+            // enter/exit animation (delayed unmount below), so it must live in an
+            // effect rather than be derived during render.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setClosing(false);
             setMounted(true);
             wasOpenRef.current = true;

package/dist/esm/components/feedback/Drawer/useDrawerAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerAnimation.js","sources":["../../../../../../src/components/feedback/Drawer/useDrawerAnimation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAkBA;;;;;;AAMG;AACG;;;AAQJ;AACA;;;AAII;;;AAGA;AACA;;AAEF;AACE;;AAEA;AAEE;AACA;;AAEF;;;AAGE;AACE;AACA;;;AAGJ;;AAEA;;AAEF;AACF;;AAGE;AAAuC;AACvC;AACE;AACE;;;AAGF;AACA;;;;;;;;;;AASF;;AAEA;AACF;AAEA;AACF;;"}
+{"version":3,"file":"useDrawerAnimation.js","sources":["src/components/feedback/Drawer/useDrawerAnimation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { FOCUSABLE_SELECTOR } from '@/hooks/useFocusTrap';\n\nimport { DRAWER_ANIMATION_MS } from './Drawer.css';\n\nimport type { RefObject } from 'react';\n\ninterface UseDrawerAnimationOptions {\n  open: boolean;\n  panelRef: RefObject<HTMLElement | null>;\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  shouldFocus: boolean;\n}\n\ninterface UseDrawerAnimationReturn {\n  mounted: boolean;\n  closing: boolean;\n}\n\n/**\n * Mount/unmount animation lifecycle plus focus management for Drawer.\n * Mirrors the Dialog hook so behavior stays consistent: mount on open,\n * delay unmount on close to play the slide-out, return focus to the\n * previously focused element. `prefers-reduced-motion: reduce` collapses\n * the animation delay to zero.\n */\nexport function useDrawerAnimation({\n  open,\n  panelRef,\n  initialFocusRef,\n  shouldFocus,\n}: UseDrawerAnimationOptions): UseDrawerAnimationReturn {\n  const [mounted, setMounted] = useState(false);\n  const [closing, setClosing] = useState(false);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (open) {\n      previousFocusRef.current = document.activeElement as HTMLElement;\n      // Mount/closing state is driven by the `open` prop and gates a timed\n      // enter/exit animation (delayed unmount below), so it must live in an\n      // effect rather than be derived during render.\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setClosing(false);\n      setMounted(true);\n      wasOpenRef.current = true;\n      return undefined;\n    }\n    if (wasOpenRef.current) {\n      wasOpenRef.current = false;\n      setClosing(true);\n      const prefersReducedMotion =\n        typeof window !== 'undefined' &&\n        typeof window.matchMedia === 'function' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      const delay = prefersReducedMotion ? 0 : DRAWER_ANIMATION_MS;\n      const timer = setTimeout(() => {\n        setMounted(false);\n        setClosing(false);\n        if (previousFocusRef.current) {\n          previousFocusRef.current.focus();\n          previousFocusRef.current = null;\n        }\n      }, delay);\n      return () => {\n        clearTimeout(timer);\n      };\n    }\n    return undefined;\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !mounted || !shouldFocus) return undefined;\n    const timer = setTimeout(() => {\n      if (initialFocusRef?.current) {\n        initialFocusRef.current.focus();\n        return;\n      }\n      const panel = panelRef.current;\n      if (!panel) return;\n      const firstFocusable =\n        panel.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n      if (firstFocusable) {\n        firstFocusable.focus();\n      } else {\n        panel.focus();\n      }\n    }, 0);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [open, mounted, initialFocusRef, panelRef, shouldFocus]);\n\n  return { mounted, closing };\n}\n"],"names":[],"mappings":";;;;;AAsBA;;;;;;AAMG;AACG;;;AAQJ;AACA;;;AAII;;;;;;;AAOA;AACA;;AAEF;AACE;;AAEA;AAEE;AACA;;AAEF;;;AAGE;AACE;AACA;;;AAGJ;;AAEA;;AAEF;AACF;;AAGE;AAAuC;AACvC;AACE;AACE;;;AAGF;AACA;;;;;;;;;;AASF;;AAEA;AACF;AAEA;AACF;;"}

package/dist/esm/components/feedback/EmptyState/EmptyState.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import { cx } from '../../../utils/cx.js';
 import { Spinner } from '../Spinner/Spinner.js';
+import { cx } from '../../../utils/cx.js';
 import { emptyStateIconStyle, emptyStateTextColumnCompactStyle, emptyStateTextColumnStyle, emptyStateTitleStyle, emptyStateDescriptionStyle, emptyStateActionStyle, emptyStateRecipe } from './EmptyState.css.js';
 
 /**

package/dist/esm/components/feedback/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../../../../src/components/feedback/EmptyState/EmptyState.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAgBA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAcH;AAEI;;;AAIF;AACI;AACA;AACD;;AAGL;AAkBI;AAcN;AAGF;;"}
+{"version":3,"file":"EmptyState.js","sources":["src/components/feedback/EmptyState/EmptyState.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Spinner } from '@/components/feedback/Spinner';\nimport { cx } from '@/utils/cx';\n\nimport {\n  emptyStateActionStyle,\n  emptyStateDescriptionStyle,\n  emptyStateIconStyle,\n  emptyStateRecipe,\n  emptyStateTextColumnCompactStyle,\n  emptyStateTextColumnStyle,\n  emptyStateTitleStyle,\n} from './EmptyState.css';\n\nimport type { EmptyStateProps } from './EmptyState.types';\n\n/**\n * Generic empty / loading state surface.\n *\n * Use for empty lists, filtered-out results, or \"not yet started\"\n * placeholders. When `loading` is `true`, a `Spinner` is rendered in\n * place of the icon and the root uses `role=\"status\"`.\n *\n * @example\n * ```tsx\n * <EmptyState\n *   icon={<SearchIcon size=\"lg\" />}\n *   title=\"No results\"\n *   description=\"Try a different search term.\"\n *   action={<Button>Reset filters</Button>}\n * />\n *\n * <EmptyState loading title=\"Loading conversation...\" />\n * ```\n */\nexport const EmptyState = /*#__PURE__*/ React.memo<EmptyStateProps>(\n  ({\n    icon,\n    title,\n    description,\n    action,\n    variant = 'default',\n    loading = false,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const textColumnClass =\n      variant === 'compact'\n        ? emptyStateTextColumnCompactStyle\n        : emptyStateTextColumnStyle;\n\n    const statusAttrs = loading\n      ? {\n          role: 'status' as const,\n          'aria-live': 'polite' as const,\n        }\n      : {};\n\n    return (\n      <div\n        ref={ref}\n        className={cx(emptyStateRecipe({ variant }), className)}\n        style={style}\n        data-testid={testId}\n        {...statusAttrs}\n        {...rest}\n      >\n        {loading ? (\n          <span className={emptyStateIconStyle}>\n            <Spinner size=\"lg\" />\n          </span>\n        ) : (\n          icon && <span className={emptyStateIconStyle}>{icon}</span>\n        )}\n\n        {(title !== undefined && title !== null) ||\n        (description !== undefined && description !== null) ? (\n          <div className={textColumnClass}>\n            {title !== undefined && title !== null && (\n              <h3 className={emptyStateTitleStyle}>{title}</h3>\n            )}\n            {description !== undefined && description !== null && (\n              <p className={emptyStateDescriptionStyle}>{description}</p>\n            )}\n          </div>\n        ) : null}\n\n        {action && <div className={emptyStateActionStyle}>{action}</div>}\n      </div>\n    );\n  }\n);\n\nEmptyState.displayName = 'EmptyState';\n"],"names":[],"mappings":";;;;;;;AAmBA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAcH;AAEI;;;AAIF;AACI;AACA;AACD;;AAGL;AAkBI;AAcN;AAGF;;"}

package/dist/esm/components/feedback/LogView/LogView.css.js

@@ -0,0 +1,35 @@
+import './../../../assets/src/components/feedback/LogView/LogView.css.ts.vanilla-nB5ENOpw.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var DENSITY_ROW_HEIGHT = {comfortable:30,compact:26,dense:22};
+var bodyDensityRecipe = createRuntimeFn({defaultClassName:'LogView__1koarpap',variantClassNames:{density:{comfortable:'LogView_bodyDensityRecipe_density_comfortable__1koarpaq',compact:'LogView_bodyDensityRecipe_density_compact__1koarpar',dense:'LogView_bodyDensityRecipe_density_dense__1koarpas'}},defaultVariants:{density:'compact'},compoundVariants:[]});
+var bodyStyle = 'LogView_bodyStyle__1koarpan';
+var chipCountStyle = 'LogView_chipCountStyle__1koarpam';
+var copyLineButtonStyle = 'LogView_copyLineButtonStyle__1koarpa1e';
+var emptyStateStyle = 'LogView_emptyStateStyle__1koarpa1f';
+var footerStyle = 'LogView_footerStyle__1koarpa9';
+var highlightStyle = 'LogView_highlightStyle__1koarpa1d';
+var jumpBadgeStyle = 'LogView_jumpBadgeStyle__1koarpa1j';
+var jumpButtonRecipe = createRuntimeFn({defaultClassName:'LogView_jumpButtonRecipe__1koarpa1g',variantClassNames:{visible:{true:'LogView_jumpButtonRecipe_visible_true__1koarpa1h',false:'LogView_jumpButtonRecipe_visible_false__1koarpa1i'}},defaultVariants:{visible:false},compoundVariants:[]});
+var levelChipRecipe = createRuntimeFn({defaultClassName:'LogView_levelChipRecipe__1koarpac',variantClassNames:{level:{debug:'LogView_levelChipRecipe_level_debug__1koarpad',info:'LogView_levelChipRecipe_level_info__1koarpae',warn:'LogView_levelChipRecipe_level_warn__1koarpaf',error:'LogView_levelChipRecipe_level_error__1koarpag',custom:'LogView_levelChipRecipe_level_custom__1koarpah'},active:{true:'LogView_levelChipRecipe_active_true__1koarpai',false:'LogView_levelChipRecipe_active_false__1koarpaj'}},defaultVariants:{active:true},compoundVariants:[]});
+var levelColorVar = 'var(--levelColorVar__1koarpa2)';
+var levelDotStyle = 'LogView_levelDotStyle__1koarpal';
+var levelFilterStyle = 'LogView_levelFilterStyle__1koarpab';
+var levelGlyphStyle = 'LogView_levelGlyphStyle__1koarpak';
+var messageRecipe = createRuntimeFn({defaultClassName:'LogView_messageRecipe__1koarpa1a',variantClassNames:{wrap:{true:'LogView_messageRecipe_wrap_true__1koarpa1b',false:'LogView_messageRecipe_wrap_false__1koarpa1c'}},defaultVariants:{wrap:false},compoundVariants:[]});
+var plainBodyStyle = 'LogView_plainBodyStyle__1koarpau';
+var rootRecipe = createRuntimeFn({defaultClassName:'LogView_rootRecipe__1koarpa3',variantClassNames:{density:{comfortable:'LogView_rootRecipe_density_comfortable__1koarpa4',compact:'LogView_rootRecipe_density_compact__1koarpa5',dense:'LogView_rootRecipe_density_dense__1koarpa6'}},defaultVariants:{density:'compact'},compoundVariants:[]});
+var rowGlyphStyle = 'LogView_rowGlyphStyle__1koarpa17';
+var rowRecipe = createRuntimeFn({defaultClassName:'LogView_rowRecipe__1koarpav',variantClassNames:{level:{debug:'LogView_rowRecipe_level_debug__1koarpaw',info:'LogView_rowRecipe_level_info__1koarpax',warn:'LogView_rowRecipe_level_warn__1koarpay',error:'LogView_rowRecipe_level_error__1koarpaz',custom:'LogView_rowRecipe_level_custom__1koarpa10'},virtualized:{true:'LogView_rowRecipe_virtualized_true__1koarpa11'},interactive:{true:'LogView_rowRecipe_interactive_true__1koarpa12'},selected:{true:'LogView_rowRecipe_selected_true__1koarpa13'},align:{center:'LogView_rowRecipe_align_center__1koarpa14',start:'LogView_rowRecipe_align_start__1koarpa15'}},defaultVariants:{align:'center'},compoundVariants:[]});
+var scrollViewportStyle = 'LogView_scrollViewportStyle__1koarpao';
+var searchWrapperStyle = 'LogView_searchWrapperStyle__1koarpaa';
+var sourceCellStyle = 'LogView_sourceCellStyle__1koarpa18';
+var sourceTagStyle = 'LogView_sourceTagStyle__1koarpa19';
+var timestampStyle = 'LogView_timestampStyle__1koarpa16';
+var toolbarSpacerStyle = 'LogView_toolbarSpacerStyle__1koarpa8';
+var toolbarStyle = 'LogView_toolbarStyle__1koarpa7';
+var totalHeightVar = 'var(--totalHeightVar__1koarpa0)';
+var virtualBodyStyle = 'LogView_virtualBodyStyle__1koarpat';
+
+export { DENSITY_ROW_HEIGHT, bodyDensityRecipe, bodyStyle, chipCountStyle, copyLineButtonStyle, emptyStateStyle, footerStyle, highlightStyle, jumpBadgeStyle, jumpButtonRecipe, levelChipRecipe, levelColorVar, levelDotStyle, levelFilterStyle, levelGlyphStyle, messageRecipe, plainBodyStyle, rootRecipe, rowGlyphStyle, rowRecipe, scrollViewportStyle, searchWrapperStyle, sourceCellStyle, sourceTagStyle, timestampStyle, toolbarSpacerStyle, toolbarStyle, totalHeightVar, virtualBodyStyle };
+//# sourceMappingURL=LogView.css.js.map

package/dist/esm/components/feedback/LogView/LogView.css.js.map

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