@portnet/ui 6.0.0 → 6.0.1

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

@@ -0,0 +1,660 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from "react";
+import Dialog from "@mui/material/Dialog";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import SearchIcon from "@mui/icons-material/Search";
+import CloseIcon from "@mui/icons-material/Close";
+import useFocusTrap from "../hooks/useFocusTrap";
+import { mergeLabels } from "../utils/mergeLabels";
+
+/**
+ * CommandPalette - Portnet UI v2
+ *
+ * Charter §03 / §07 · ⌘K command palette. Keyboard-first launcher for pages
+ * and actions across the app.
+ *
+ *   const [open, setOpen] = useState(false);
+ *   useEffect(() => {
+ *     const onKey = (e) => {
+ *       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+ *         e.preventDefault();
+ *         setOpen(true);
+ *       }
+ *     };
+ *     window.addEventListener("keydown", onKey);
+ *     return () => window.removeEventListener("keydown", onKey);
+ *   }, []);
+ *
+ *   <CommandPalette
+ *     open={open}
+ *     onClose={() => setOpen(false)}
+ *     groups={[
+ *       { id: "pages", title: "Pages", items: [
+ *           { id: "dashboard", label: "Tableau de bord", icon: <DashboardIcon />, onSelect: () => nav("/") },
+ *           { id: "titres",    label: "Titres d'importation",                    onSelect: () => nav("/titres") },
+ *       ]},
+ *       { id: "actions", title: "Actions", items: [
+ *           { id: "new-titre", label: "Nouveau titre", icon: <AddIcon />, shortcut: "C", onSelect: createTitre },
+ *       ]},
+ *     ]}
+ *   />
+ *
+ * Recent + Pinned items (Batch 16 / H4)
+ * -------------------------------------
+ *   <CommandPalette
+ *     pinnedItems={[
+ *       { id: "dashboard", label: "Tableau de bord", icon: <DashboardIcon />, onSelect: () => nav("/") },
+ *     ]}
+ *     recentItems={[
+ *       { id: "titre-2025-IM-0042", label: "2025-IM-0042 (SOFRANE SA)", onSelect: () => nav("/titres/2025-IM-0042") },
+ *     ]}
+ *     groups={[ ... ]}
+ *   />
+ *
+ *   Both extras are HOST-MANAGED. Lib does NOT track selections or
+ *   pinning state — track in your per-item onSelect handler and
+ *   persist to localStorage / server prefs as a host concern.
+ *
+ * Localisation (FR / EN / AR):
+ *   <CommandPalette
+ *     placeholder="Search a page or action…"
+ *     emptyState="No result."
+ *     labels={{
+ *       title:        "Command palette",
+ *       footerHint:   "↑↓ to navigate · ↵ to select · Esc to close",
+ *       closeButton:  "Close palette",
+ *       resultsCount: (n) => `${n} result${n === 1 ? "" : "s"}`,
+ *       pinnedTitle:  "Pinned",
+ *       recentTitle:  "Recent",
+ *     }}
+ *   />
+ *
+ *   `resultsCount` is a function so the host can plug in proper plural
+ *   rules (Intl.PluralRules, ICU MessageFormat, i18next, …).
+ *
+ * Matching behaviour (Batch 13 / D2):
+ *   The search is fuzzy. Each match is scored across four tiers
+ *   (prefix > word-boundary > substring > subsequence) and within
+ *   each group items are surfaced in descending score order.
+ *   Multi-token queries ("tit imp") split on whitespace and require
+ *   every token to hit somewhere; final score is the per-token
+ *   average. Diacritics are folded — "Emile" matches "Émile".
+ *
+ * Focus management (R-F.2):
+ *   Backed by the v2 useFocusTrap hook (Batch 3). The search <input>
+ *   declares `autoFocus`, so on open the trap's initial-focus rAF
+ *   lands directly on it. The input is a role="combobox" and carries an
+ *   aria-label (CP-1) so screen readers announce a name, not just a role.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DEBOUNCE_MS = 80;
+var DEFAULT_LABELS = Object.freeze({
+  title: "Palette de commandes",
+  footerHint: "↑↓ pour naviguer · ↵ pour sélectionner · Esc pour fermer",
+  closeButton: "Fermer la palette",
+  resultsCount: function resultsCount(n) {
+    return "".concat(n, " r\xE9sultat").concat(n > 1 ? "s" : "");
+  },
+  pinnedTitle: "Épinglés",
+  recentTitle: "Récents"
+});
+
+// MUI v9: backdrop slot bag. Hoisted — its content (only an sx token)
+// is independent of any palette instance state.
+var BACKDROP_SLOT_PROPS = Object.freeze({
+  // R-G.2 / R-AI.1 - backdrop derived from the live --fg token (matches
+  // Modal). Adapts to any future theme override.
+  sx: {
+    backgroundColor: "color-mix(in srgb, var(--fg) 45%, transparent)"
+  }
+});
+function useDebounced(value, ms) {
+  var _React$useState = React.useState(value),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    out = _React$useState2[0],
+    setOut = _React$useState2[1];
+  React.useEffect(function () {
+    var t = setTimeout(function () {
+      return setOut(value);
+    }, ms);
+    return function () {
+      return clearTimeout(t);
+    };
+  }, [value, ms]);
+  return out;
+}
+
+/* ── Fuzzy matching (D2) ───────────────────────────────────────────────
+ * Module-level pure helpers. No external dep, no allocation per match
+ * beyond the obligatory tokenisation Array.
+ *
+ * Score scale is conventional, NOT meaningful in absolute terms:
+ *   - 0       → no match (filtered out)
+ *   - higher  → more relevant (sorted descending within each group)
+ */
+
+/**
+ * NFD-normalise + strip combining marks + lowercase. Folds diacritics
+ * so "Émile" → "emile" and "Café" → "cafe", letting users search
+ * without typing accents. The unicode range \u0300-\u036F covers the
+ * Combining Diacritical Marks block (U+0300..U+036F).
+ */
+function normalize(s) {
+  if (!s) return "";
+  return String(s).normalize("NFD").replace(/[\u0300-\u036F]/g, "").toLowerCase();
+}
+
+/**
+ * Subsequence match score — how well does `token` appear (in order,
+ * not necessarily contiguous) inside `hay`?
+ *
+ *   - Returns 0 if any character is missing.
+ *   - Otherwise returns the longest CONSECUTIVE run divided by the
+ *     token length. So "imp" inside "important" gets ratio 1.0
+ *     (whole word matched contiguously), while "imp" inside
+ *     "i_m_p" (gaps) gets a low ratio.
+ *
+ * The contiguous-run heuristic is much cheaper than a full Smith-
+ * Waterman and good enough for command-palette UX.
+ */
+function subsequenceRun(hay, token) {
+  var i = 0;
+  var consecutive = 0;
+  var bestConsecutive = 0;
+  for (var h = 0; h < hay.length && i < token.length; h += 1) {
+    if (hay[h] === token[i]) {
+      i += 1;
+      consecutive += 1;
+      if (consecutive > bestConsecutive) bestConsecutive = consecutive;
+    } else {
+      consecutive = 0;
+    }
+  }
+  if (i < token.length) return 0;
+  return bestConsecutive / token.length;
+}
+
+/**
+ * Score a single token against a haystack. Four tiers, best wins.
+ * Both inputs are assumed already normalised (lowercase, no diacritics).
+ */
+function scoreToken(hay, token) {
+  if (hay.startsWith(token)) return 100;
+  var wbIdx = hay.indexOf(" " + token);
+  if (wbIdx >= 0) return 80;
+  var subIdx = hay.indexOf(token);
+  if (subIdx >= 0) {
+    return 60 - Math.min(20, subIdx * 0.1);
+  }
+  var run = subsequenceRun(hay, token);
+  if (run > 0) return 40 * run;
+  return 0;
+}
+
+/**
+ * Score a multi-token query. Splits on whitespace; every token must hit
+ * somewhere. Returns the average across tokens, or 0 if any token misses.
+ */
+function scoreQuery(haystack, query) {
+  var hay = normalize(haystack);
+  var tokens = normalize(query).split(/\s+/).filter(Boolean);
+  if (tokens.length === 0) return 1;
+  if (!hay) return 0;
+  var total = 0;
+  var _iterator = _createForOfIteratorHelper(tokens),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var token = _step.value;
+      var s = scoreToken(hay, token);
+      if (s === 0) return 0;
+      total += s;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return total / tokens.length;
+}
+
+/**
+ * Filter `groups` against the query. Within each group, items are
+ * surfaced in descending score order (most relevant first). Group
+ * order itself is preserved — groups are author-defined categories,
+ * not relevance buckets.
+ *
+ * Empty / whitespace-only query → return groups untouched (just drop
+ * the empty ones). Preserves the original "no query = browse" UX.
+ */
+function filterGroups(groups, query) {
+  var q = query.trim();
+  if (!q) {
+    return groups.map(function (g) {
+      return {
+        id: g.id,
+        title: g.title,
+        items: g.items
+      };
+    }).filter(function (g) {
+      return g.items.length > 0;
+    });
+  }
+  var out = [];
+  var _iterator2 = _createForOfIteratorHelper(groups),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var g = _step2.value;
+      var scored = [];
+      var _iterator3 = _createForOfIteratorHelper(g.items),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var it = _step3.value;
+          var hay = "".concat(it.label, " ").concat(it.keywords || "");
+          var s = scoreQuery(hay, q);
+          if (s > 0) scored.push({
+            item: it,
+            score: s
+          });
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      if (scored.length === 0) continue;
+      scored.sort(function (a, b) {
+        return b.score - a.score;
+      });
+      out.push({
+        id: g.id,
+        title: g.title,
+        items: scored.map(function (s) {
+          return s.item;
+        })
+      });
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return out;
+}
+function CommandPalette(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    _ref$groups = _ref.groups,
+    groups = _ref$groups === void 0 ? [] : _ref$groups,
+    recentItems = _ref.recentItems,
+    pinnedItems = _ref.pinnedItems,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Rechercher une page, une action…" : _ref$placeholder,
+    _ref$emptyState = _ref.emptyState,
+    emptyState = _ref$emptyState === void 0 ? "Aucun résultat." : _ref$emptyState,
+    onQueryChange = _ref.onQueryChange,
+    labels = _ref.labels;
+  var L = React.useMemo(function () {
+    return mergeLabels(DEFAULT_LABELS, labels);
+  }, [labels]);
+  var _React$useState3 = React.useState(""),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    query = _React$useState4[0],
+    setQuery = _React$useState4[1];
+  var debouncedQuery = useDebounced(query, DEBOUNCE_MS);
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    highlight = _React$useState6[0],
+    setHighlight = _React$useState6[1];
+  var inputRef = React.useRef(null);
+  var listRef = React.useRef(null);
+  var titleId = React.useId();
+  var listId = React.useId();
+  var inputId = React.useId();
+
+  // R-F.2 - the v2 trap is wired on the Dialog Paper element, activated
+  // only while the palette is open. MUI's own trap is disabled below.
+  var paperRef = React.useRef(null);
+  useFocusTrap(paperRef, !!open);
+
+  // H4 — synthetic groups for pinnedItems / recentItems prepended to
+  // the host's groups. Empty extras collapse the array to `groups`
+  // verbatim — same reference when neither prop is set, so downstream
+  // memoisation stays valid for the no-op case.
+  var allGroups = React.useMemo(function () {
+    var hasPinned = Array.isArray(pinnedItems) && pinnedItems.length > 0;
+    var hasRecent = Array.isArray(recentItems) && recentItems.length > 0;
+    if (!hasPinned && !hasRecent) return groups;
+    var out = [];
+    if (hasPinned) {
+      out.push({
+        id: "_pinned",
+        title: L.pinnedTitle,
+        items: pinnedItems !== null && pinnedItems !== void 0 ? pinnedItems : []
+      });
+    }
+    if (hasRecent) {
+      out.push({
+        id: "_recent",
+        title: L.recentTitle,
+        items: recentItems !== null && recentItems !== void 0 ? recentItems : []
+      });
+    }
+    return [].concat(out, _toConsumableArray(groups));
+  }, [pinnedItems, recentItems, groups, L.pinnedTitle, L.recentTitle]);
+  var visibleGroups = React.useMemo(function () {
+    return filterGroups(allGroups, debouncedQuery);
+  }, [allGroups, debouncedQuery]);
+  var itemsOnly = React.useMemo(function () {
+    return visibleGroups.flatMap(function (g) {
+      return g.items;
+    });
+  }, [visibleGroups]);
+
+  // Reset state on (re)open. Initial focus on the input is handled by
+  // useFocusTrap above (the input carries `autoFocus`).
+  React.useEffect(function () {
+    if (!open) return;
+    setQuery("");
+    setHighlight(0);
+  }, [open]);
+
+  // Keep highlight valid when results shrink/grow
+  React.useEffect(function () {
+    if (highlight >= itemsOnly.length) {
+      setHighlight(Math.max(0, itemsOnly.length - 1));
+    }
+  }, [itemsOnly.length, highlight]);
+
+  // Scroll the highlighted item into view
+  React.useEffect(function () {
+    var _listRef$current;
+    if (!open || itemsOnly.length === 0) return;
+    var node = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelector("[data-item-index=\"".concat(highlight, "\"]"));
+    if (node) node.scrollIntoView({
+      block: "nearest"
+    });
+  }, [highlight, open, itemsOnly.length]);
+  var activate = function activate(index) {
+    var it = itemsOnly[index];
+    if (!it) return;
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    // Defer the action one tick so onClose can restore focus before any
+    // navigation happens (consumer-side routing).
+    setTimeout(function () {
+      var _it$onSelect;
+      return (_it$onSelect = it.onSelect) === null || _it$onSelect === void 0 ? void 0 : _it$onSelect.call(it);
+    }, 0);
+  };
+  var onInputKeyDown = function onInputKeyDown(e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlight(function (h) {
+        return itemsOnly.length === 0 ? 0 : (h + 1) % itemsOnly.length;
+      });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlight(function (h) {
+        return itemsOnly.length === 0 ? 0 : (h - 1 + itemsOnly.length) % itemsOnly.length;
+      });
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      activate(highlight);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setHighlight(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setHighlight(Math.max(0, itemsOnly.length - 1));
+    }
+  };
+  var onInputChange = function onInputChange(e) {
+    setQuery(e.target.value);
+    onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(e.target.value);
+    setHighlight(0);
+  };
+  var activeItemId = itemsOnly[highlight] ? "".concat(listId, "-opt-").concat(highlight) : undefined;
+
+  // MUI v9: Dialog paper + backdrop bags forwarded through slotProps.
+  // The paper slot embeds the per-instance focus-trap ref so we
+  // useMemo it for reference stability across renders.
+  var slotProps = React.useMemo(function () {
+    return {
+      paper: {
+        ref: paperRef,
+        sx: {
+          width: "100%",
+          maxWidth: 640,
+          borderRadius: "var(--r-lg)",
+          boxShadow: "var(--shadow-lg)",
+          margin: "var(--s-3)",
+          overflow: "hidden"
+        }
+      },
+      backdrop: BACKDROP_SLOT_PROPS
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: !!open,
+    onClose: onClose,
+    maxWidth: false,
+    "aria-labelledby": titleId
+    // Hand over focus management to useFocusTrap above.
+    ,
+    disableAutoFocus: true,
+    disableEnforceFocus: true,
+    disableRestoreFocus: true,
+    slotProps: slotProps,
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: "pui-sr-only",
+      id: titleId,
+      children: L.title
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--s-2)",
+        padding: "var(--s-3) var(--s-4)",
+        borderBottom: "1px solid var(--border)"
+      },
+      children: [/*#__PURE__*/_jsx(SearchIcon, {
+        "aria-hidden": "true",
+        sx: {
+          color: "var(--fg-subtle)",
+          fontSize: 20
+        }
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "input",
+        ref: inputRef,
+        id: inputId,
+        type: "text",
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeItemId
+        // CP-1 — accessible name for the combobox input. The sr-only title
+        // labels the Dialog, not this input, and a placeholder is not a
+        // reliable accessible name; expose the placeholder text as the name.
+        ,
+        "aria-label": placeholder,
+        autoFocus: true,
+        value: query,
+        onChange: onInputChange,
+        onKeyDown: onInputKeyDown,
+        placeholder: placeholder,
+        sx: {
+          flex: 1,
+          border: 0,
+          outline: "none",
+          background: "transparent",
+          fontFamily: "inherit",
+          fontSize: "var(--text-body, 14px)",
+          color: "var(--fg)",
+          "&::placeholder": {
+            color: "var(--fg-subtle)"
+          }
+        }
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "kbd",
+        "aria-hidden": "true",
+        sx: {
+          fontSize: "var(--text-xs)",
+          fontWeight: "var(--fw-semibold)",
+          color: "var(--fg-subtle)",
+          background: "var(--bg-subtle)",
+          border: "1px solid var(--border)",
+          borderRadius: "var(--r-sm)",
+          padding: "1px var(--s-2)",
+          fontFamily: "var(--font-mono)"
+        },
+        children: "ESC"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: onClose,
+        "aria-label": L.closeButton,
+        sx: {
+          color: "var(--fg-muted)"
+        },
+        children: /*#__PURE__*/_jsx(CloseIcon, {
+          fontSize: "small"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      ref: listRef,
+      role: "listbox",
+      id: listId,
+      "aria-labelledby": titleId,
+      sx: {
+        maxHeight: 360,
+        overflowY: "auto",
+        padding: "var(--s-2) 0"
+      },
+      children: [visibleGroups.length === 0 && /*#__PURE__*/_jsx(Box, {
+        sx: {
+          padding: "var(--s-5) var(--s-4)",
+          textAlign: "center",
+          color: "var(--fg-muted)",
+          fontSize: "var(--text-sm)"
+        },
+        children: emptyState
+      }), function () {
+        var i = -1;
+        return visibleGroups.map(function (g) {
+          var headerId = "".concat(listId, "-h-").concat(g.id);
+          return /*#__PURE__*/_jsxs(Box, {
+            role: "group",
+            "aria-labelledby": headerId,
+            children: [/*#__PURE__*/_jsx(Box, {
+              id: headerId,
+              sx: {
+                fontSize: "var(--text-xs)",
+                fontWeight: "var(--fw-semibold)",
+                color: "var(--fg-subtle)",
+                textTransform: "uppercase",
+                letterSpacing: "0.06em",
+                padding: "var(--s-2) var(--s-4) var(--s-1)"
+              },
+              children: g.title
+            }), g.items.map(function (entry) {
+              i += 1;
+              var isActive = i === highlight;
+              var idx = i;
+              return /*#__PURE__*/_jsxs(Box, {
+                role: "option",
+                id: "".concat(listId, "-opt-").concat(idx),
+                "aria-selected": isActive,
+                "data-item-index": idx,
+                onMouseEnter: function onMouseEnter() {
+                  return setHighlight(idx);
+                },
+                onClick: function onClick() {
+                  return activate(idx);
+                },
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "var(--s-2)",
+                  padding: "var(--s-2) var(--s-4)",
+                  cursor: "pointer",
+                  background: isActive ? "var(--accent-soft)" : "transparent",
+                  color: isActive ? "var(--accent)" : "var(--fg)",
+                  fontSize: "var(--text-sm)",
+                  fontWeight: "var(--fw-medium)"
+                },
+                children: [entry.icon && /*#__PURE__*/_jsx(Box, {
+                  "aria-hidden": "true",
+                  sx: {
+                    display: "inline-flex",
+                    color: isActive ? "var(--accent)" : "var(--fg-muted)"
+                  },
+                  children: entry.icon
+                }), /*#__PURE__*/_jsx(Box, {
+                  sx: {
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: entry.label
+                }), entry.shortcut && /*#__PURE__*/_jsx(Box, {
+                  component: "kbd",
+                  "aria-hidden": "true",
+                  sx: {
+                    fontSize: "var(--text-xs)",
+                    fontWeight: "var(--fw-semibold)",
+                    color: "var(--fg-subtle)",
+                    background: "var(--bg-subtle)",
+                    border: "1px solid var(--border)",
+                    borderRadius: "var(--r-sm)",
+                    padding: "1px var(--s-2)",
+                    fontFamily: "var(--font-mono)"
+                  },
+                  children: entry.shortcut
+                })]
+              }, entry.id);
+            })]
+          }, g.id);
+        });
+      }()]
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "var(--s-3)",
+        padding: "var(--s-2) var(--s-4)",
+        borderTop: "1px solid var(--border)",
+        background: "var(--bg-subtle)",
+        fontSize: "var(--text-xs)",
+        color: "var(--fg-subtle)"
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        "aria-hidden": "true",
+        children: L.footerHint
+      }), /*#__PURE__*/_jsx(Box, {
+        role: "status",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
+        "aria-atomic": "true",
+        children: L.resultsCount(itemsOnly.length)
+      })]
+    })]
+  });
+}
+export default CommandPalette;
+//# sourceMappingURL=CommandPalette.js.map