@12-apps/ui 5.0.0 → 5.0.1

package/dist/navigation/CommandPalette.js

@@ -0,0 +1,540 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/navigation/CommandPalette/CommandPalette.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import EnterIcon from "@mui/icons-material/KeyboardReturn";
+import SearchIcon from "@mui/icons-material/Search";
+import {
+  alpha as alpha2,
+  Box as Box2,
+  Dialog,
+  DialogContent,
+  IconButton,
+  InputBase,
+  Paper,
+  Slide,
+  styled as styled2,
+  Typography as Typography2,
+  useTheme
+} from "@mui/material";
+import React2 from "react";
+
+// src/components/navigation/CommandPalette/CommandPalette.hooks.ts
+import Fuse from "fuse.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// src/components/navigation/CommandPalette/CommandPalette.helpers.ts
+var filterCommands = ({
+  commands,
+  searchQuery,
+  fuse,
+  showRecent,
+  recentCommandIds
+}) => {
+  if (searchQuery) {
+    return fuse.search(searchQuery).map((result) => result.item);
+  }
+  if (!showRecent || recentCommandIds.length === 0) {
+    return commands;
+  }
+  const recent = recentCommandIds.map((id) => commands.find((command) => command.id === id)).filter(Boolean);
+  return [...recent, ...commands.filter((command) => !recentCommandIds.includes(command.id))];
+};
+var groupByCategory = (commands) => {
+  const groups = {};
+  for (const command of commands) {
+    const category = command.category || "General";
+    groups[category] = groups[category] ?? [];
+    groups[category].push(command);
+  }
+  return groups;
+};
+var createPaletteKeyHandler = ({
+  commandCount,
+  selectedCommand,
+  setSelectedIndex,
+  executeCommand,
+  onClose
+}) => (event) => {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      setSelectedIndex((prev) => prev < commandCount - 1 ? prev + 1 : prev);
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      setSelectedIndex((prev) => prev > 0 ? prev - 1 : prev);
+      break;
+    case "Enter":
+      event.preventDefault();
+      if (selectedCommand) executeCommand(selectedCommand);
+      break;
+    case "Escape":
+      event.preventDefault();
+      onClose();
+      break;
+  }
+};
+
+// src/components/navigation/CommandPalette/CommandPalette.hooks.ts
+var RECENT_LIMIT = 5;
+var FOCUS_DELAY_MS = 100;
+var useCommandSearch = ({
+  commands,
+  searchQuery,
+  showRecent,
+  recentCommandIds
+}) => {
+  const fuse = useMemo(
+    () => new Fuse(commands, {
+      keys: ["label", "description", "keywords", "category"],
+      threshold: 0.3,
+      includeScore: true
+    }),
+    [commands]
+  );
+  const filteredCommands = useMemo(
+    () => filterCommands({ commands, searchQuery, fuse, showRecent, recentCommandIds }),
+    [searchQuery, commands, fuse, showRecent, recentCommandIds]
+  );
+  const groupedCommands = useMemo(() => groupByCategory(filteredCommands), [filteredCommands]);
+  return { filteredCommands, groupedCommands };
+};
+var useExecuteCommand = ({
+  setRecentCommandIds,
+  onCommandExecute,
+  onClose
+}) => useCallback(
+  (command) => {
+    setRecentCommandIds(
+      (prev) => [command.id, ...prev.filter((id) => id !== command.id)].slice(0, RECENT_LIMIT)
+    );
+    command.action();
+    onCommandExecute?.(command);
+    onClose();
+  },
+  [setRecentCommandIds, onCommandExecute, onClose]
+);
+var useSelectionReset = ({
+  open,
+  searchQuery,
+  searchInputRef,
+  setSearchQuery,
+  setSelectedIndex
+}) => {
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [searchQuery, setSelectedIndex]);
+  useEffect(() => {
+    if (open) {
+      window.setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, FOCUS_DELAY_MS);
+      return;
+    }
+    setSearchQuery("");
+    setSelectedIndex(0);
+  }, [open, searchInputRef, setSearchQuery, setSelectedIndex]);
+};
+var usePaletteKeyboard = ({
+  open,
+  selectedIndex,
+  filteredCommands,
+  listRef,
+  setSelectedIndex,
+  executeCommand,
+  onClose
+}) => {
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = createPaletteKeyHandler({
+      commandCount: filteredCommands.length,
+      selectedCommand: filteredCommands[selectedIndex],
+      setSelectedIndex,
+      executeCommand,
+      onClose
+    });
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, selectedIndex, filteredCommands, setSelectedIndex, executeCommand, onClose]);
+  useEffect(() => {
+    const selectedElement = listRef.current?.querySelector(
+      `[data-index="${selectedIndex}"]`
+    );
+    selectedElement?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [selectedIndex, listRef]);
+};
+var useCommandPalette = ({
+  open,
+  commands,
+  showRecent,
+  recentCommands,
+  onCommandExecute,
+  onClose
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [recentCommandIds, setRecentCommandIds] = useState(recentCommands);
+  const searchInputRef = useRef(null);
+  const listRef = useRef(null);
+  const { filteredCommands, groupedCommands } = useCommandSearch({
+    commands,
+    searchQuery,
+    showRecent,
+    recentCommandIds
+  });
+  const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });
+  useSelectionReset({ open, searchQuery, searchInputRef, setSearchQuery, setSelectedIndex });
+  usePaletteKeyboard({
+    open,
+    selectedIndex,
+    filteredCommands,
+    listRef,
+    setSelectedIndex,
+    executeCommand,
+    onClose
+  });
+  return {
+    searchQuery,
+    setSearchQuery,
+    selectedIndex,
+    setSelectedIndex,
+    searchInputRef,
+    listRef,
+    filteredCommands,
+    groupedCommands,
+    executeCommand,
+    recentCommandIds
+  };
+};
+
+// src/components/navigation/CommandPalette/CommandPaletteResults.tsx
+import RecentIcon from "@mui/icons-material/History";
+import { Box, Divider, List, ListItem, ListItemIcon, ListItemText, Typography } from "@mui/material";
+import { alpha, styled } from "@mui/material";
+
+// src/components/navigation/CommandPalette/ShortcutChip.tsx
+import { Chip } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var ShortcutChip = (props) => /* @__PURE__ */ jsx(
+  Chip,
+  {
+    ...props,
+    sx: {
+      height: 20,
+      fontSize: "0.7rem",
+      fontFamily: "monospace",
+      ...props.sx
+    }
+  }
+);
+
+// src/components/navigation/CommandPalette/CommandPaletteResults.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ResultsList = styled(List)(({ theme }) => ({
+  maxHeight: 400,
+  overflowY: "auto",
+  padding: theme.spacing(1),
+  "&::-webkit-scrollbar": {
+    width: 8
+  },
+  "&::-webkit-scrollbar-track": {
+    background: alpha(theme.palette.action.disabled, 0.1)
+  },
+  "&::-webkit-scrollbar-thumb": {
+    background: alpha(theme.palette.primary.main, 0.3),
+    borderRadius: 4,
+    "&:hover": {
+      background: alpha(theme.palette.primary.main, 0.5)
+    }
+  }
+}));
+var CommandItem = styled(ListItem)(({ theme, selected }) => ({
+  borderRadius: theme.shape.borderRadius,
+  marginBottom: theme.spacing(0.5),
+  transition: theme.transitions.create(["background-color", "transform"]),
+  cursor: "pointer",
+  ...selected && {
+    backgroundColor: alpha(theme.palette.primary.main, 0.12),
+    transform: "translateX(4px)",
+    "& .MuiListItemIcon-root": {
+      color: theme.palette.primary.main
+    }
+  },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.08)
+  }
+}));
+var CategoryLabel = styled(Typography)(({ theme }) => ({
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color: theme.palette.text.secondary,
+  textTransform: "uppercase",
+  letterSpacing: "0.1em",
+  padding: theme.spacing(1, 2, 0.5, 2),
+  marginTop: theme.spacing(1)
+}));
+var NoResults = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(4, 2),
+  textAlign: "center",
+  color: theme.palette.text.secondary
+}));
+var CommandRow = ({ command, index, selected, dataTestId, onSelect, onExecute }) => /* @__PURE__ */ jsxs(
+  CommandItem,
+  {
+    "data-index": index,
+    "data-testid": `${dataTestId}-item-${command.id}`,
+    selected,
+    onClick: () => onExecute(command),
+    onMouseEnter: () => onSelect(index),
+    children: [
+      command.icon && /* @__PURE__ */ jsx2(ListItemIcon, { sx: { minWidth: 40 }, children: command.icon }),
+      /* @__PURE__ */ jsx2(
+        ListItemText,
+        {
+          primary: command.label,
+          secondary: command.description,
+          primaryTypographyProps: { fontSize: "0.9rem", fontWeight: selected ? 500 : 400 },
+          secondaryTypographyProps: { fontSize: "0.75rem" }
+        }
+      ),
+      command.shortcut && /* @__PURE__ */ jsx2(ShortcutChip, { label: command.shortcut, size: "small" })
+    ]
+  }
+);
+var slug = (value) => value.toLowerCase().replace(/\s+/g, "-");
+var PaletteResults = ({
+  listRef,
+  dataTestId,
+  searchQuery,
+  showRecent,
+  commands,
+  recentCommandIds,
+  filteredCommands,
+  groupedCommands,
+  selectedIndex,
+  onSelect,
+  onExecute
+}) => {
+  if (filteredCommands.length === 0) {
+    return /* @__PURE__ */ jsxs(NoResults, { "data-testid": `${dataTestId}-no-results`, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+        'No commands found for "',
+        searchQuery,
+        '"'
+      ] }),
+      /* @__PURE__ */ jsx2(Typography, { variant: "caption", color: "text.disabled", sx: { mt: 1 }, children: "Try a different search term" })
+    ] });
+  }
+  const showRecentSection = !searchQuery && showRecent && recentCommandIds.length > 0;
+  const recent = showRecentSection ? recentCommandIds.map((id) => commands.find((command) => command.id === id)).filter(Boolean) : [];
+  let commandIndex = 0;
+  const row = (command) => {
+    const index = commandIndex++;
+    return /* @__PURE__ */ jsx2(
+      CommandRow,
+      {
+        command,
+        index,
+        selected: index === selectedIndex,
+        dataTestId,
+        onSelect,
+        onExecute
+      },
+      command.id
+    );
+  };
+  const showCategoryLabels = Object.keys(groupedCommands).length > 1;
+  return /* @__PURE__ */ jsxs(ResultsList, { ref: listRef, "data-testid": `${dataTestId}-list`, children: [
+    showRecentSection && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(CategoryLabel, { "data-testid": `${dataTestId}-group-recent`, children: [
+        /* @__PURE__ */ jsx2(RecentIcon, { sx: { fontSize: 14, mr: 0.5, verticalAlign: "middle" } }),
+        "Recent"
+      ] }),
+      recent.map(row),
+      filteredCommands.length > recentCommandIds.length && /* @__PURE__ */ jsx2(Divider, { sx: { my: 1 } })
+    ] }),
+    Object.entries(groupedCommands).map(([category, categoryCommands]) => /* @__PURE__ */ jsxs(Box, { "data-testid": `${dataTestId}-group-${slug(category)}`, children: [
+      showCategoryLabels && /* @__PURE__ */ jsx2(CategoryLabel, { "data-testid": `${dataTestId}-group-label-${slug(category)}`, children: category }),
+      categoryCommands.map(row)
+    ] }, category))
+  ] });
+};
+
+// src/components/navigation/CommandPalette/CommandPalette.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledDialog = styled2(Dialog)(() => ({
+  "& .MuiBackdrop-root": {
+    backgroundColor: alpha2("#000", 0.6),
+    backdropFilter: "blur(4px)"
+  },
+  "& .MuiDialog-paper": {
+    position: "fixed",
+    top: "20%",
+    margin: 0,
+    maxHeight: "none",
+    background: "transparent",
+    boxShadow: "none",
+    overflow: "visible"
+  }
+}));
+var PaletteContainer = styled2(Paper)(({ theme }) => ({
+  width: "100%",
+  maxWidth: 640,
+  background: `linear-gradient(135deg, ${alpha2(theme.palette.background.paper, 0.98)} 0%, ${alpha2(theme.palette.background.paper, 0.95)} 100%)`,
+  backdropFilter: "blur(20px)",
+  WebkitBackdropFilter: "blur(20px)",
+  border: `1px solid ${alpha2(theme.palette.divider, 0.18)}`,
+  borderRadius: theme.shape.borderRadius * 2,
+  overflow: "hidden",
+  boxShadow: theme.shadows[24]
+}));
+var SearchContainer = styled2(Box2)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: theme.spacing(2),
+  borderBottom: `1px solid ${alpha2(theme.palette.divider, 0.12)}`,
+  background: alpha2(theme.palette.background.default, 0.4)
+}));
+var SearchInput = styled2(InputBase)(({ theme }) => ({
+  flex: 1,
+  fontSize: "1.125rem",
+  fontWeight: 400,
+  "& input": {
+    padding: theme.spacing(0, 1),
+    "&::placeholder": {
+      color: theme.palette.text.secondary,
+      opacity: 0.8
+    }
+  }
+}));
+var Transition = React2.forwardRef(
+  function Transition2(props, ref) {
+    return /* @__PURE__ */ jsx3(Slide, { direction: "down", ref, ...props });
+  }
+);
+var PaletteSearch = ({ inputRef, placeholder, value, dataTestId, onChange, onClose }) => /* @__PURE__ */ jsxs2(SearchContainer, { children: [
+  /* @__PURE__ */ jsx3(SearchIcon, { sx: { color: "text.secondary", mr: 1 } }),
+  /* @__PURE__ */ jsx3(
+    SearchInput,
+    {
+      ref: inputRef,
+      placeholder,
+      value,
+      onChange,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: "false",
+      inputProps: { "data-testid": `${dataTestId}-input` }
+    }
+  ),
+  /* @__PURE__ */ jsx3(IconButton, { size: "small", onClick: onClose, sx: { ml: 1 }, children: /* @__PURE__ */ jsx3(CloseIcon, { fontSize: "small" }) })
+] });
+var PaletteFooter = ({ commandCount }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 1,
+        borderTop: `1px solid ${alpha2(theme.palette.divider, 0.12)}`,
+        background: alpha2(theme.palette.background.default, 0.4)
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ jsx3(ShortcutChip, { icon: /* @__PURE__ */ jsx3(EnterIcon, { sx: { fontSize: 12 } }), label: "Execute", size: "small" }),
+          /* @__PURE__ */ jsx3(ShortcutChip, { label: "\u2191\u2193 Navigate", size: "small" }),
+          /* @__PURE__ */ jsx3(ShortcutChip, { label: "ESC Close", size: "small" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Typography2, { variant: "caption", color: "text.secondary", children: [
+          commandCount,
+          " commands"
+        ] })
+      ]
+    }
+  );
+};
+var CommandPalette = ({
+  open,
+  onClose,
+  commands,
+  placeholder = "Type a command or search...",
+  width = "640px",
+  maxHeight = "400px",
+  showRecent = true,
+  recentCommands = [],
+  onCommandExecute,
+  dataTestId = "command-palette"
+}) => {
+  const {
+    searchQuery,
+    setSearchQuery,
+    selectedIndex,
+    setSelectedIndex,
+    searchInputRef,
+    listRef,
+    filteredCommands,
+    groupedCommands,
+    executeCommand,
+    recentCommandIds
+  } = useCommandPalette({
+    open,
+    commands,
+    showRecent,
+    recentCommands,
+    onCommandExecute,
+    onClose
+  });
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+  };
+  return /* @__PURE__ */ jsx3(
+    StyledDialog,
+    {
+      open,
+      onClose,
+      TransitionComponent: Transition,
+      maxWidth: false,
+      fullWidth: true,
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsx3(DialogContent, { sx: { overflow: "visible", p: 0 }, children: /* @__PURE__ */ jsxs2(PaletteContainer, { elevation: 24, sx: { width, maxHeight }, children: [
+        /* @__PURE__ */ jsx3(
+          PaletteSearch,
+          {
+            inputRef: searchInputRef,
+            placeholder,
+            value: searchQuery,
+            dataTestId,
+            onChange: handleSearchChange,
+            onClose
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          PaletteResults,
+          {
+            listRef,
+            dataTestId,
+            searchQuery,
+            showRecent,
+            commands,
+            recentCommandIds,
+            filteredCommands,
+            groupedCommands,
+            selectedIndex,
+            onSelect: setSelectedIndex,
+            onExecute: executeCommand
+          }
+        ),
+        /* @__PURE__ */ jsx3(PaletteFooter, { commandCount: filteredCommands.length })
+      ] }) })
+    }
+  );
+};
+export {
+  CommandPalette
+};
+//# sourceMappingURL=CommandPalette.js.map

package/dist/navigation/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/navigation/CommandPalette/CommandPalette.tsx","../../src/components/navigation/CommandPalette/CommandPalette.hooks.ts","../../src/components/navigation/CommandPalette/CommandPalette.helpers.ts","../../src/components/navigation/CommandPalette/CommandPaletteResults.tsx","../../src/components/navigation/CommandPalette/ShortcutChip.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport EnterIcon from '@mui/icons-material/KeyboardReturn';\nimport SearchIcon from '@mui/icons-material/Search';\nimport {\n  alpha,\n  Box,\n  Dialog,\n  DialogContent,\n  IconButton,\n  InputBase,\n  Paper,\n  Slide,\n  styled,\n  Typography,\n  useTheme } from '@mui/material';\nimport type { TransitionProps } from '@mui/material/transitions';\nimport type { FC} from 'react';\nimport React, {  } from 'react';\n\nimport { useCommandPalette } from './CommandPalette.hooks';\nimport { PaletteResults } from './CommandPaletteResults';\nimport { ShortcutChip } from './ShortcutChip';\nimport type { CommandPaletteProps } from './CommandPalette.types';\n\n// Styled components\nconst StyledDialog = styled(Dialog)(() => ({\n  '& .MuiBackdrop-root': {\n    backgroundColor: alpha('#000', 0.6),\n    backdropFilter: 'blur(4px)' },\n  '& .MuiDialog-paper': {\n    position: 'fixed',\n    top: '20%',\n    margin: 0,\n    maxHeight: 'none',\n    background: 'transparent',\n    boxShadow: 'none',\n    overflow: 'visible' } }));\n\nconst PaletteContainer = styled(Paper)(({ theme }) => ({\n  width: '100%',\n  maxWidth: 640,\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n  backdropFilter: 'blur(20px)',\n  WebkitBackdropFilter: 'blur(20px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n  overflow: 'hidden',\n  boxShadow: theme.shadows[24] }));\n\nconst SearchContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n  background: alpha(theme.palette.background.default, 0.4) }));\n\nconst SearchInput = styled(InputBase)(({ theme }) => ({\n  flex: 1,\n  fontSize: '1.125rem',\n  fontWeight: 400,\n  '& input': {\n    padding: theme.spacing(0, 1),\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.8 } } }));\n\nconst Transition = React.forwardRef<unknown, TransitionProps & { children: React.ReactElement }>(\n  function Transition(props, ref) {\n    return <Slide direction=\"down\" ref={ref} {...props} />;\n  },\n);\n\n// Main component\nconst PaletteSearch: React.FC<{\n  inputRef: React.Ref<HTMLInputElement>;\n  placeholder?: string;\n  value: string;\n  dataTestId?: string;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  onClose: () => void;\n}> = ({ inputRef, placeholder, value, dataTestId, onChange, onClose }) => (\n  <SearchContainer>\n    <SearchIcon sx={{ color: 'text.secondary', mr: 1 }} />\n    <SearchInput\n      ref={inputRef}\n      placeholder={placeholder}\n      value={value}\n      onChange={onChange}\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      autoCapitalize=\"off\"\n      spellCheck=\"false\"\n      inputProps={{ 'data-testid': `${dataTestId}-input` }}\n    />\n    <IconButton size=\"small\" onClick={onClose} sx={{ ml: 1 }}>\n      <CloseIcon fontSize=\"small\" />\n    </IconButton>\n  </SearchContainer>\n);\n\nconst PaletteFooter: React.FC<{ commandCount: number }> = ({ commandCount }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        padding: 1,\n        borderTop: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n        background: alpha(theme.palette.background.default, 0.4) }}\n    >\n      <Box sx={{ display: 'flex', gap: 1 }}>\n        <ShortcutChip icon={<EnterIcon sx={{ fontSize: 12 }} />} label=\"Execute\" size=\"small\" />\n        <ShortcutChip label=\"↑↓ Navigate\" size=\"small\" />\n        <ShortcutChip label=\"ESC Close\" size=\"small\" />\n      </Box>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {commandCount} commands\n      </Typography>\n    </Box>\n  );\n};\n\nexport const CommandPalette: FC<CommandPaletteProps> = ({\n  open,\n  onClose,\n  commands,\n  placeholder = 'Type a command or search...',\n  width = '640px',\n  maxHeight = '400px',\n  showRecent = true,\n  recentCommands = [],\n  onCommandExecute,\n  dataTestId = 'command-palette' }) => {\n  const {\n    searchQuery,\n    setSearchQuery,\n    selectedIndex,\n    setSelectedIndex,\n    searchInputRef,\n    listRef,\n    filteredCommands,\n    groupedCommands,\n    executeCommand,\n    recentCommandIds } = useCommandPalette({\n    open,\n    commands,\n    showRecent,\n    recentCommands,\n    onCommandExecute,\n    onClose });\n\n  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setSearchQuery(event.target.value);\n  };\n\n  return (\n    <StyledDialog\n      open={open}\n      onClose={onClose}\n      TransitionComponent={Transition}\n      maxWidth={false}\n      fullWidth\n      data-testid={dataTestId}\n    >\n      <DialogContent sx={{ overflow: 'visible', p: 0 }}>\n        <PaletteContainer elevation={24} sx={{ width, maxHeight }}>\n          <PaletteSearch\n            inputRef={searchInputRef}\n            placeholder={placeholder}\n            value={searchQuery}\n            dataTestId={dataTestId}\n            onChange={handleSearchChange}\n            onClose={onClose}\n          />\n\n          <PaletteResults\n            listRef={listRef}\n            dataTestId={dataTestId}\n            searchQuery={searchQuery}\n            showRecent={showRecent}\n            commands={commands}\n            recentCommandIds={recentCommandIds}\n            filteredCommands={filteredCommands}\n            groupedCommands={groupedCommands}\n            selectedIndex={selectedIndex}\n            onSelect={setSelectedIndex}\n            onExecute={executeCommand}\n          />\n\n          <PaletteFooter commandCount={filteredCommands.length} />\n        </PaletteContainer>\n      </DialogContent>\n    </StyledDialog>\n  );\n};\n\n// Export default\nexport default CommandPalette;\n","import Fuse from 'fuse.js';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  createPaletteKeyHandler,\n  filterCommands,\n  groupByCategory,\n} from './CommandPalette.helpers';\nimport type { PaletteCommand } from './CommandPalette.types';\n\nconst RECENT_LIMIT = 5;\nconst FOCUS_DELAY_MS = 100;\n\n// The fuzzy index and the two derived lists it feeds.\nconst useCommandSearch = ({\n  commands,\n  searchQuery,\n  showRecent,\n  recentCommandIds,\n}: {\n  commands: PaletteCommand[];\n  searchQuery: string;\n  showRecent?: boolean;\n  recentCommandIds: string[];\n}) => {\n  const fuse = useMemo(\n    () =>\n      new Fuse(commands, {\n        keys: ['label', 'description', 'keywords', 'category'],\n        threshold: 0.3,\n        includeScore: true,\n      }),\n    [commands],\n  );\n\n  const filteredCommands = useMemo(\n    () => filterCommands({ commands, searchQuery, fuse, showRecent, recentCommandIds }),\n    [searchQuery, commands, fuse, showRecent, recentCommandIds],\n  );\n\n  const groupedCommands = useMemo(() => groupByCategory(filteredCommands), [filteredCommands]);\n\n  return { filteredCommands, groupedCommands };\n};\n\n// Running a command records it as recent, fires the caller's callback and closes\n// the palette.\nconst useExecuteCommand = ({\n  setRecentCommandIds,\n  onCommandExecute,\n  onClose,\n}: {\n  setRecentCommandIds: React.Dispatch<React.SetStateAction<string[]>>;\n  onCommandExecute?: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) =>\n  useCallback(\n    (command: PaletteCommand) => {\n      setRecentCommandIds((prev) =>\n        [command.id, ...prev.filter((id) => id !== command.id)].slice(0, RECENT_LIMIT),\n      );\n\n      command.action();\n      onCommandExecute?.(command);\n      onClose();\n    },\n    [setRecentCommandIds, onCommandExecute, onClose],\n  );\n\n// The highlight resets on every new query; opening the palette focuses the input\n// and closing it clears the query.\nconst useSelectionReset = ({\n  open,\n  searchQuery,\n  searchInputRef,\n  setSearchQuery,\n  setSelectedIndex,\n}: {\n  open: boolean;\n  searchQuery: string;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;\n  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;\n}) => {\n  useEffect(() => {\n    setSelectedIndex(0);\n  }, [searchQuery, setSelectedIndex]);\n\n  useEffect(() => {\n    if (open) {\n      window.setTimeout(() => {\n        searchInputRef.current?.focus();\n      }, FOCUS_DELAY_MS);\n      return;\n    }\n\n    setSearchQuery('');\n    setSelectedIndex(0);\n  }, [open, searchInputRef, setSearchQuery, setSelectedIndex]);\n};\n\n// Global key handling while the palette is open, plus keeping the highlighted\n// row scrolled into view.\nconst usePaletteKeyboard = ({\n  open,\n  selectedIndex,\n  filteredCommands,\n  listRef,\n  setSelectedIndex,\n  executeCommand,\n  onClose,\n}: {\n  open: boolean;\n  selectedIndex: number;\n  filteredCommands: PaletteCommand[];\n  listRef: React.RefObject<globalThis.HTMLUListElement | null>;\n  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;\n  executeCommand: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) => {\n  useEffect(() => {\n    if (!open) return;\n\n    const handleKeyDown = createPaletteKeyHandler({\n      commandCount: filteredCommands.length,\n      selectedCommand: filteredCommands[selectedIndex],\n      setSelectedIndex,\n      executeCommand,\n      onClose,\n    });\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [open, selectedIndex, filteredCommands, setSelectedIndex, executeCommand, onClose]);\n\n  useEffect(() => {\n    const selectedElement = listRef.current?.querySelector(\n      `[data-index=\"${selectedIndex}\"]`,\n    ) as HTMLElement | null;\n\n    selectedElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [selectedIndex, listRef]);\n};\n\n// All of the palette's state: the query, the highlighted row, the derived lists\n// and the effects that keep them in sync. Grouped here so the exported component\n// is prop defaults plus markup.\nexport const useCommandPalette = ({\n  open,\n  commands,\n  showRecent,\n  recentCommands,\n  onCommandExecute,\n  onClose,\n}: {\n  open: boolean;\n  commands: PaletteCommand[];\n  showRecent?: boolean;\n  recentCommands: string[];\n  onCommandExecute?: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) => {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [recentCommandIds, setRecentCommandIds] = useState<string[]>(recentCommands);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<globalThis.HTMLUListElement>(null);\n\n  const { filteredCommands, groupedCommands } = useCommandSearch({\n    commands,\n    searchQuery,\n    showRecent,\n    recentCommandIds,\n  });\n\n  const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });\n\n  useSelectionReset({ open, searchQuery, searchInputRef, setSearchQuery, setSelectedIndex });\n\n  usePaletteKeyboard({\n    open,\n    selectedIndex,\n    filteredCommands,\n    listRef,\n    setSelectedIndex,\n    executeCommand,\n    onClose,\n  });\n\n  return {\n    searchQuery,\n    setSearchQuery,\n    selectedIndex,\n    setSelectedIndex,\n    searchInputRef,\n    listRef,\n    filteredCommands,\n    groupedCommands,\n    executeCommand,\n    recentCommandIds,\n  };\n};\n","import type Fuse from 'fuse.js';\nimport type React from 'react';\n\nimport type { PaletteCommand } from './CommandPalette.types';\n\n// Without a query the list is the recent commands first, then the rest; with one\n// it is whatever fuzzy search returns.\nexport const filterCommands = ({\n  commands,\n  searchQuery,\n  fuse,\n  showRecent,\n  recentCommandIds,\n}: {\n  commands: PaletteCommand[];\n  searchQuery: string;\n  fuse: Fuse<PaletteCommand>;\n  showRecent?: boolean;\n  recentCommandIds: string[];\n}): PaletteCommand[] => {\n  if (searchQuery) {\n    return fuse.search(searchQuery).map((result) => result.item);\n  }\n\n  if (!showRecent || recentCommandIds.length === 0) {\n    return commands;\n  }\n\n  const recent = recentCommandIds\n    .map((id) => commands.find((command) => command.id === id))\n    .filter(Boolean) as PaletteCommand[];\n\n  return [...recent, ...commands.filter((command) => !recentCommandIds.includes(command.id))];\n};\n\nexport const groupByCategory = (commands: PaletteCommand[]): Record<string, PaletteCommand[]> => {\n  const groups: Record<string, PaletteCommand[]> = {};\n\n  for (const command of commands) {\n    const category = command.category || 'General';\n    groups[category] = groups[category] ?? [];\n    groups[category].push(command);\n  }\n\n  return groups;\n};\n\n// Arrow keys move the highlight, Enter runs the highlighted command, Escape\n// closes. Built outside the effect so the switch does not count against the\n// component body.\nexport const createPaletteKeyHandler = ({\n  commandCount,\n  selectedCommand,\n  setSelectedIndex,\n  executeCommand,\n  onClose,\n}: {\n  commandCount: number;\n  selectedCommand?: PaletteCommand;\n  setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;\n  executeCommand: (command: PaletteCommand) => void;\n  onClose: () => void;\n}) => (event: globalThis.KeyboardEvent) => {\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      setSelectedIndex((prev) => (prev < commandCount - 1 ? prev + 1 : prev));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));\n      break;\n    case 'Enter':\n      event.preventDefault();\n      if (selectedCommand) executeCommand(selectedCommand);\n      break;\n    case 'Escape':\n      event.preventDefault();\n      onClose();\n      break;\n  }\n};\n","import RecentIcon from '@mui/icons-material/History';\nimport { Box, Divider, List, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material';\nimport { alpha, styled } from '@mui/material';\nimport React from 'react';\n\nimport { ShortcutChip } from './ShortcutChip';\nimport type { PaletteCommand } from './CommandPalette.types';\n\nconst ResultsList = styled(List)(({ theme }) => ({\n  maxHeight: 400,\n  overflowY: 'auto',\n  padding: theme.spacing(1),\n  '&::-webkit-scrollbar': {\n    width: 8,\n  },\n  '&::-webkit-scrollbar-track': {\n    background: alpha(theme.palette.action.disabled, 0.1),\n  },\n  '&::-webkit-scrollbar-thumb': {\n    background: alpha(theme.palette.primary.main, 0.3),\n    borderRadius: 4,\n    '&:hover': {\n      background: alpha(theme.palette.primary.main, 0.5),\n    },\n  },\n}));\n\nconst CommandItem = styled(ListItem)<{ selected?: boolean }>(({ theme, selected }) => ({\n  borderRadius: theme.shape.borderRadius,\n  marginBottom: theme.spacing(0.5),\n  transition: theme.transitions.create(['background-color', 'transform']),\n  cursor: 'pointer',\n  ...(selected && {\n    backgroundColor: alpha(theme.palette.primary.main, 0.12),\n    transform: 'translateX(4px)',\n    '& .MuiListItemIcon-root': {\n      color: theme.palette.primary.main,\n    },\n  }),\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.08),\n  },\n}));\n\nconst CategoryLabel = styled(Typography)(({ theme }) => ({\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  color: theme.palette.text.secondary,\n  textTransform: 'uppercase',\n  letterSpacing: '0.1em',\n  padding: theme.spacing(1, 2, 0.5, 2),\n  marginTop: theme.spacing(1),\n}));\n\nconst NoResults = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4, 2),\n  textAlign: 'center',\n  color: theme.palette.text.secondary,\n}));\n\nconst CommandRow: React.FC<{\n  command: PaletteCommand;\n  index: number;\n  selected: boolean;\n  dataTestId?: string;\n  onSelect: (index: number) => void;\n  onExecute: (command: PaletteCommand) => void;\n}> = ({ command, index, selected, dataTestId, onSelect, onExecute }) => (\n  <CommandItem\n    data-index={index}\n    data-testid={`${dataTestId}-item-${command.id}`}\n    selected={selected}\n    onClick={() => onExecute(command)}\n    onMouseEnter={() => onSelect(index)}\n  >\n    {command.icon && <ListItemIcon sx={{ minWidth: 40 }}>{command.icon}</ListItemIcon>}\n    <ListItemText\n      primary={command.label}\n      secondary={command.description}\n      primaryTypographyProps={{ fontSize: '0.9rem', fontWeight: selected ? 500 : 400 }}\n      secondaryTypographyProps={{ fontSize: '0.75rem' }}\n    />\n    {command.shortcut && <ShortcutChip label={command.shortcut} size=\"small\" />}\n  </CommandItem>\n);\n\nconst slug = (value: string) => value.toLowerCase().replace(/\\s+/g, '-');\n\n// The list, its recent section and the empty state. The running commandIndex\n// has to stay consistent across both sections, so it is threaded through here\n// rather than mutated from inside the render as it was before.\nexport const PaletteResults: React.FC<{\n  listRef: React.Ref<globalThis.HTMLUListElement>;\n  dataTestId?: string;\n  searchQuery: string;\n  showRecent?: boolean;\n  commands: PaletteCommand[];\n  recentCommandIds: string[];\n  filteredCommands: PaletteCommand[];\n  groupedCommands: Record<string, PaletteCommand[]>;\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  onExecute: (command: PaletteCommand) => void;\n}> = ({\n  listRef,\n  dataTestId,\n  searchQuery,\n  showRecent,\n  commands,\n  recentCommandIds,\n  filteredCommands,\n  groupedCommands,\n  selectedIndex,\n  onSelect,\n  onExecute,\n}) => {\n  if (filteredCommands.length === 0) {\n    return (\n      <NoResults data-testid={`${dataTestId}-no-results`}>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          No commands found for \"{searchQuery}\"\n        </Typography>\n        <Typography variant=\"caption\" color=\"text.disabled\" sx={{ mt: 1 }}>\n          Try a different search term\n        </Typography>\n      </NoResults>\n    );\n  }\n\n  const showRecentSection = !searchQuery && showRecent && recentCommandIds.length > 0;\n  const recent = showRecentSection\n    ? (recentCommandIds\n        .map((id) => commands.find((command) => command.id === id))\n        .filter(Boolean) as PaletteCommand[])\n    : [];\n\n  // One running index across both sections, so keyboard selection lines up with\n  // what is on screen.\n  let commandIndex = 0;\n  const row = (command: PaletteCommand) => {\n    const index = commandIndex++;\n    return (\n      <CommandRow\n        key={command.id}\n        command={command}\n        index={index}\n        selected={index === selectedIndex}\n        dataTestId={dataTestId}\n        onSelect={onSelect}\n        onExecute={onExecute}\n      />\n    );\n  };\n\n  const showCategoryLabels = Object.keys(groupedCommands).length > 1;\n\n  return (\n    <ResultsList ref={listRef} data-testid={`${dataTestId}-list`}>\n      {showRecentSection && (\n        <>\n          <CategoryLabel data-testid={`${dataTestId}-group-recent`}>\n            <RecentIcon sx={{ fontSize: 14, mr: 0.5, verticalAlign: 'middle' }} />\n            Recent\n          </CategoryLabel>\n          {recent.map(row)}\n          {filteredCommands.length > recentCommandIds.length && <Divider sx={{ my: 1 }} />}\n        </>\n      )}\n\n      {Object.entries(groupedCommands).map(([category, categoryCommands]) => (\n        <Box key={category} data-testid={`${dataTestId}-group-${slug(category)}`}>\n          {showCategoryLabels && (\n            <CategoryLabel data-testid={`${dataTestId}-group-label-${slug(category)}`}>\n              {category}\n            </CategoryLabel>\n          )}\n          {categoryCommands.map(row)}\n        </Box>\n      ))}\n    </ResultsList>\n  );\n};\n","import type { ChipProps } from '@mui/material';\nimport { Chip } from '@mui/material';\nimport React from 'react';\n\n// A plain component rather than styled(Chip): a styled component's inferred type\n// cannot be named across a module boundary in this package (TS2742), and both\n// the results list and the palette footer need this one.\nexport const ShortcutChip: React.FC<ChipProps> = (props) => (\n  <Chip\n    {...props}\n    sx={{\n      height: 20,\n      fontSize: '0.7rem',\n      fontFamily: 'monospace',\n      ...props.sx,\n    }}\n  />\n);\n"],"mappings":"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","names":["alpha","Box","styled","Typography","React","jsx","jsx","jsxs","styled","alpha","Box","React","Transition","Typography"]}