@eifi1/ui-kit 0.8.1 → 0.10.0

package/src/i18n/locales/zh.ts

@@ -231,6 +231,11 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
     dialogFrame: {
       close: "关闭",
     },
+    bulkActionBar: {
+      selected: (count) => `已选择 ${n(count)} 项`,
+      clear: "清除选择",
+      cleared: "已清除选择",
+    },
     swipeableRow: {
       actions: "行操作",
     },
@@ -287,12 +292,22 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       step: (current, total) => `${n(current)} / ${n(total)}`,
     },
     commandPalette: {
+      clear: "清除搜索",
+      submit: "搜索",
+      close: "关闭",
       placeholder: "搜索…",
       empty: "无结果",
       loading: "搜索中…",
       dialog: "搜索",
       error: "搜索失败，请重试。",
     },
+    globalSearch: {
+      trigger: "搜索",
+      placeholder: "搜索或跳转到…",
+      shortcut: (keys) => `搜索（${keys}）`,
+      suggestions: "试试",
+      results: "结果",
+    },
     sparkline: {
       rising: (first, last) => `从 ${first} 上升到 ${last}`,
       falling: (first, last) => `从 ${first} 下降到 ${last}`,
@@ -352,6 +367,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
         "拖动以缩放：近似正方形的选区同时缩放两条坐标轴，细长的选区只缩放其所沿的那条轴。双击可重置。",
       empty: "无数据",
       legend: "数据系列",
+      points: "图表数值",
     },
     confirmDialog: {
       confirm: "确认",
@@ -367,6 +383,20 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       copiedAnnouncement: "已复制到剪贴板",
       failedAnnouncement: "无法复制到剪贴板",
     },
+    list: {
+      unread: "未读",
+      opensInNewTab: "在新标签页中打开",
+    },
+    breadcrumbs: {
+      label: "面包屑导航",
+      showAll: "显示完整路径",
+    },
+    toast: {
+      close: "关闭通知",
+      notifications: "通知",
+      undo: "撤销",
+      redo: "重做",
+    },
   };
 }
 

package/src/index.ts

@@ -96,6 +96,8 @@ export * from "./components/danger-confirm";
 export * from "./components/confirm-dialog";
 // A non-modal corner panel and its round trigger (keksdose's assistant launcher).
 export * from "./components/floating-panel";
+// The count / clear / actions bar a selection brings up (keksdose's three copies).
+export * from "./components/bulk-action-bar";
 export * from "./components/swatch-picker";
 export * from "./components/icon-picker";
 export * from "./components/choice-card";
@@ -151,6 +153,30 @@ export * from "./components/separator";
 // Named: scroll-area.tsx also holds the overflow hook and scrollbar class Table shares.
 export { ScrollArea } from "./components/scroll-area";
 export type { ScrollAreaProps } from "./components/scroll-area";
+// 0.10.0 rows, menu rows, text primitives and page chrome the apps drew by hand.
+export * from "./components/list";
+export * from "./components/menu-item";
+export * from "./components/text";
+export * from "./components/status-dot";
+export * from "./components/page-header";
+export * from "./components/breadcrumbs";
+// The toast layer over sonner (an OPTIONAL peer, loaded lazily): `toast` mirrors sonner's
+// API so apps migrate by swapping the import; `<Toaster>` carries the placement, theme,
+// tones and z-index both apps had wired by hand.
+export { toast, Toaster, DEFAULT_TOAST_LABELS, TOAST_ACTION_DURATION } from "./components/toast";
+export type {
+  ToastId,
+  ToastAction,
+  ToastOptions,
+  ToastPromiseOptions,
+  ToastUndoOptions,
+  ToastRedoOptions,
+  ToastLabels,
+  ToastPosition,
+  ToastSwipeDirection,
+  ToasterOffset,
+  ToasterProps,
+} from "./components/toast";
 
 // ── data-table suite ─────────────────────────────────────────────────────────
 export * from "./components/data-table-labels";
@@ -163,6 +189,8 @@ export { FilterPopover } from "./components/data-table-filter-popover";
 export { DataTable } from "./components/data-table";
 export type {
   DataTableColumn,
+  DataTableCellProps,
+  DataTableHeadProps,
   DataTableProps,
   ServerPagination,
   FilterState,
@@ -217,6 +245,8 @@ export * from "./tour/tour";
 
 // ── command palette / global search ──────────────────────────────────────────
 export * from "./search/command-palette";
+export * from "./search/search-index";
+export * from "./search/global-search";
 
 // ── i18n: one label tree, one optional provider ──────────────────────────────
 // `UiKitLabels` names every string the kit renders; `<UiKitProvider labels locale>`

package/src/lib/clipping.ts

@@ -0,0 +1,16 @@
+/** Internal (not exported from the package): the Tooltip's auto-portal check. */
+
+/** Whether anything between `el` and `<body>` clips or scrolls its content — the
+ *  containers an absolutely positioned bubble would be cut off by, or would widen.
+ *  `<body>` and `<html>` are not counted: their `overflow` belongs to the viewport (a
+ *  dialog's scroll lock sets it), and the viewport clips a portalled bubble just the
+ *  same. */
+export function hasClippingAncestor(el: Element | null): boolean {
+  if (typeof window === "undefined" || !el) return false;
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node === document.body || node === document.documentElement) return false;
+    const style = window.getComputedStyle(node);
+    if (style.overflowX !== "visible" || style.overflowY !== "visible") return true;
+  }
+  return false;
+}

package/src/search/command-palette.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
-import { Search } from "lucide-react";
+import { CornerDownLeft, Search, X } from "lucide-react";
 import { cn } from "../lib/cn";
+import { PHONE_QUERY } from "../components/ui";
+import { useMediaQuery } from "../hooks/use-media-query";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { useFocusTrap } from "../hooks/use-focus-trap";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
@@ -27,6 +29,35 @@ export interface CommandItem {
    *  with a link and JavaScript cannot fake — the rejected alternative, an
    *  `onAuxClick` calling `window.open`, gets the middle click and nothing else. */
   href?: string;
+  /** Marks this row's label and hint `data-private`, so session replay and screenshot
+   *  tooling masks them — a payee, an account name, an amount. Overrides the palette's
+   *  {@link CommandPaletteProps.redactLabels} either way, so `false` un-masks one
+   *  harmless row ("Settings") in a palette that masks by default. */
+  redact?: boolean;
+  /**
+   * `"status"` makes the row a line of text rather than a choice — a group's
+   * "Searching…" while its source is still out, or its error. It is skipped by the
+   * arrow keys and ↵, has no hover highlight, and its `onSelect` is never called.
+   * Default `"option"`.
+   */
+  kind?: "option" | "status";
+}
+
+/** Group items preserving first-seen group order; `flat` is the navigable rows only. */
+function groupItems(items: CommandItem[]) {
+  const order: string[] = [];
+  const byGroup = new Map<string, CommandItem[]>();
+  for (const item of items) {
+    if (!byGroup.has(item.group)) {
+      byGroup.set(item.group, []);
+      order.push(item.group);
+    }
+    byGroup.get(item.group)!.push(item);
+  }
+  return {
+    groups: order.map((g) => ({ group: g, items: byGroup.get(g)! })),
+    flat: order.flatMap((g) => byGroup.get(g)!).filter((item) => item.kind !== "status"),
+  };
 }
 
 export interface CommandPaletteLabels {
@@ -49,6 +80,13 @@ export interface CommandPaletteLabels {
    * rejects. Optional for the same reason as `dialog`; the default always carries it.
    */
   error?: string;
+  /** Names the "×" that empties the field. Optional like `dialog`. */
+  clear?: string;
+  /** Names the button that commits the typed text when `searchOn="submit"`. */
+  submit?: string;
+  /** Names the close button of the full-screen phone presentation, which has no
+   *  backdrop to tap and, on a phone, no Escape key. */
+  close?: string;
 }
 
 export const DEFAULT_COMMAND_PALETTE_LABELS: CommandPaletteLabels = {
@@ -57,8 +95,23 @@ export const DEFAULT_COMMAND_PALETTE_LABELS: CommandPaletteLabels = {
   loading: "Searching…",
   dialog: "Search",
   error: "Search failed. Try again.",
+  clear: "Clear search",
+  submit: "Search",
+  close: "Close",
 };
 
+/**
+ * How tall the palette's rows are. `"compact"` (the default) is the desktop list the
+ * palette always drew, 36px a row; `"comfortable"` gives every row the kit's 44px touch
+ * target (`min-h-11`) and body-size text — keksdose's phone search, where a 36px row
+ * under a thumb picks its neighbour.
+ */
+export type CommandPaletteDensity = "compact" | "comfortable";
+
+/** A provider's answer is a promise — the only case with anything to wait for. */
+const isThenable = (value: unknown): value is PromiseLike<unknown> =>
+  typeof (value as PromiseLike<unknown> | null)?.then === "function";
+
 /** The defaults minus `dialog`, so a resolved `dialog` means someone SUPPLIED one —
  *  see the dialog's `aria-label` for why that distinction matters. */
 const { dialog: DEFAULT_DIALOG_NAME, ...DEFAULTS_WITHOUT_DIALOG } = DEFAULT_COMMAND_PALETTE_LABELS;
@@ -71,6 +124,14 @@ interface CommandPaletteProps {
    * query is allowed — return defaults like pages/recent). Sync or async; stale
    * async responses are ignored.
    *
+   * A SYNCHRONOUS provider (one returning an array, not a promise) never shows the
+   * "Searching…" hint: its answer is there the moment it is asked, and the hint only
+   * flashed through the debounce before results that were never late — keksdose's
+   * transaction search filters a list already in memory. The palette tells the two
+   * apart by what the provider RETURNS, call by call, so there is no prop to keep in
+   * step with the implementation: an async provider shows the hint from the first
+   * promise on (and during the debounce of every later query), a sync one never.
+   *
    * Its IDENTITY is not a re-run signal — it is read through a ref, so the palette
    * never re-searches merely because the caller rebuilt the callback. That is
    * deliberate: a provider closing over a list rendered from a query allocates a new
@@ -105,6 +166,37 @@ interface CommandPaletteProps {
   /** Every edit of the field's text. Fires in both modes — uncontrolled, it only
    *  observes. */
   onQueryChange?: (query: string) => void;
+  /**
+   * When the typed text becomes THE query — the one `search` runs on and
+   * `onQueryChange` reports.
+   *
+   * - `"input"` (default): every keystroke, debounced for the search, as before.
+   * - `"submit"`: typing edits a draft; the query is committed by ↵ or the submit
+   *   button beside the field. Until then the results stay on the last committed query
+   *   and `onQueryChange` stays quiet — which is what an owner binding `query` to the
+   *   URL's `q` needs, or every keystroke re-filters the page behind and pushes history.
+   *   ↵ with a draft that differs from the committed query COMMITS; ↵ with nothing new
+   *   typed chooses the highlighted row, as in `"input"` mode. The draft follows any
+   *   outside change of the committed query (Back through the URL), and an uncommitted
+   *   draft is dropped when the palette is closed.
+   *
+   * The clear "×" commits the empty query in both modes: an emptied box over results
+   * (or a page) still filtered by the old text is the stuck state Keksdose #423 was.
+   */
+  searchOn?: "input" | "submit";
+  /** Mark every row's label and hint `data-private` (see {@link CommandItem.redact},
+   *  which overrides it per row). Off by default. */
+  redactLabels?: boolean;
+  /**
+   * Below the phone breakpoint ({@link PHONE_QUERY}) the palette fills the screen:
+   * no inset, no rounded panel, the field pinned at the top inside the safe areas and
+   * the list scrolling under it, with a close button since there is no backdrop to tap.
+   * On by default — a top-centred card at 70vh leaves little room once the keyboard is
+   * up. `false` keeps the card on every viewport.
+   */
+  fullScreenOnPhone?: boolean;
+  /** Row height — see {@link CommandPaletteDensity}. Default `"compact"`. */
+  density?: CommandPaletteDensity;
   labels?: Partial<CommandPaletteLabels>;
 }
 
@@ -135,6 +227,10 @@ export function CommandPalette({
   revision,
   query: queryProp,
   onQueryChange,
+  searchOn = "input",
+  redactLabels = false,
+  fullScreenOnPhone = true,
+  density = "compact",
   labels,
 }: CommandPaletteProps) {
   const l = useKitLabels("commandPalette", DEFAULTS_WITHOUT_DIALOG, labels);
@@ -152,6 +248,23 @@ export function CommandPalette({
     if (!controlled) setOwnQuery(next);
     onQueryChange?.(next);
   };
+  const submitMode = searchOn === "submit";
+  // The field's text in `"submit"` mode. It follows the committed query whenever that
+  // changes — adjusted during render, React's pattern for state derived from a prop,
+  // rather than in an effect that would paint the stale draft first.
+  const [draft, setDraft] = useState(query);
+  const [draftBase, setDraftBase] = useState(query);
+  if (draftBase !== query) {
+    setDraftBase(query);
+    setDraft(query);
+  }
+  const fieldText = submitMode ? draft : query;
+  const commit = (next: string) => {
+    setDraft(next);
+    setQuery(next);
+  };
+  const dirty = submitMode && draft !== query;
+  const isPhone = useMediaQuery(PHONE_QUERY, false) && fullScreenOnPhone;
   const [results, setResults] = useState<CommandItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [failed, setFailed] = useState(false);
@@ -169,6 +282,15 @@ export function CommandPalette({
   const searchRef = useRef(search);
   searchRef.current = search;
   const reqId = useRef(0);
+  /** What the provider's last answer was: a promise (`false`), an array (`true`), or
+   *  not known yet. Only a provider known to be async shows "Searching…" while the
+   *  debounce runs — see `search`. */
+  const syncRef = useRef<boolean | undefined>(undefined);
+  /** The query the results on screen answer, and the row highlighted in them — so a
+   *  re-run for the SAME query (a `revision` change: a source streaming in) keeps the
+   *  highlight on its row instead of throwing it back to the top mid-arrow. */
+  const shownQuery = useRef<string | null>(null);
+  const activeIdRef = useRef<string | undefined>(undefined);
 
   // Back dismisses the palette (Keksdose feedback #172). Declared with the other
   // hooks, above the `if (!open) return null` below — a hook past a conditional
@@ -187,7 +309,10 @@ export function CommandPalette({
   useEffect(() => {
     if (!open) return;
     if (!controlled) setOwnQuery("");
+    // An uncommitted draft does not outlive the open it was typed in.
+    setDraft(controlled ? query : "");
     setActive(0);
+    shownQuery.current = null;
     // `controlled` is read at the open, not watched: a caller switching modes while
     // the palette is open is not a reason to wipe what is typed.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -197,19 +322,26 @@ export function CommandPalette({
   useEffect(() => {
     if (!open) return;
     const id = ++reqId.current;
-    setLoading(true);
+    if (syncRef.current === false) setLoading(true);
     const run = async () => {
       try {
-        const r = await Promise.resolve(searchRef.current(query));
+        const answer = searchRef.current(query);
+        syncRef.current = !isThenable(answer);
+        if (!syncRef.current) setLoading(true);
+        const r = await answer;
         if (reqId.current === id) {
+          const keep = shownQuery.current === query ? activeIdRef.current : undefined;
+          const at = keep === undefined ? -1 : groupItems(r).flat.findIndex((item) => item.id === keep);
+          shownQuery.current = query;
           setResults(r);
           setFailed(false);
-          setActive(0);
+          setActive(Math.max(at, 0));
         }
       } catch (err) {
         // There was no catch: the previous query's results stayed on screen as if they
         // answered this one, and the rejection went unhandled. Clear them and say so.
         if (reqId.current === id) {
+          shownQuery.current = null;
           setResults([]);
           setFailed(true);
           setActive(0);
@@ -227,21 +359,10 @@ export function CommandPalette({
   }, [query, open, revision]);
 
   // Group results, preserving first-seen group order; keep a flat list for nav.
-  const { groups, flat } = useMemo(() => {
-    const order: string[] = [];
-    const byGroup = new Map<string, CommandItem[]>();
-    for (const item of results) {
-      if (!byGroup.has(item.group)) {
-        byGroup.set(item.group, []);
-        order.push(item.group);
-      }
-      byGroup.get(item.group)!.push(item);
-    }
-    return {
-      groups: order.map((g) => ({ group: g, items: byGroup.get(g)! })),
-      flat: order.flatMap((g) => byGroup.get(g)!),
-    };
-  }, [results]);
+  const { groups, flat } = useMemo(() => groupItems(results), [results]);
+  useEffect(() => {
+    activeIdRef.current = flat[active]?.id;
+  });
 
   const choose = (item: CommandItem | undefined) => {
     if (!item) return;
@@ -258,7 +379,8 @@ export function CommandPalette({
       setActive((i) => Math.max(i - 1, 0));
     } else if (e.key === "Enter") {
       e.preventDefault();
-      choose(flat[active]);
+      if (dirty) commit(draft);
+      else choose(flat[active]);
     }
   };
 
@@ -274,15 +396,21 @@ export function CommandPalette({
   // Keep the active row scrolled into view.
   useEffect(() => {
     const el = listRef.current?.querySelector<HTMLElement>(`[data-index="${active}"]`);
-    el?.scrollIntoView({ block: "nearest" });
+    // Optional-called, as in combobox-core: jsdom has no scrollIntoView, and every
+    // consumer's tests crashed on the first highlighted row (kastlan stubbed it).
+    el?.scrollIntoView?.({ block: "nearest" });
   }, [active]);
 
   if (!open) return null;
 
+  const comfortable = density === "comfortable";
   let flatIndex = -1;
   return createPortal(
     <div
-      className="fixed inset-0 z-[70] flex items-start justify-center bg-black/40 p-4 pt-[10vh]"
+      className={cn(
+        "fixed inset-0 z-[70] flex items-start justify-center bg-black/40",
+        isPhone ? "p-0" : "p-4 pt-[10vh]",
+      )}
       onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
@@ -297,9 +425,27 @@ export function CommandPalette({
         tabIndex={-1}
         // Escape bubbling up from anything inside — a dialog is where it belongs.
         onKeyDown={onDialogKeyDown}
-        className="flex max-h-[70vh] w-full max-w-xl flex-col overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-2xl outline-none"
+        data-fullscreen={isPhone || undefined}
+        className={cn(
+          "flex w-full flex-col overflow-hidden bg-[var(--bg-surface)] outline-none",
+          isPhone
+            ? "h-full"
+            : "max-h-[70vh] max-w-xl rounded-xl border border-[var(--border)] shadow-2xl",
+        )}
+        // Full screen means edge to edge, so the notch, the home indicator and the
+        // rounded corners are the panel's to keep clear of.
+        style={
+          isPhone
+            ? {
+                paddingTop: "max(0px, env(safe-area-inset-top))",
+                paddingBottom: "max(0px, env(safe-area-inset-bottom))",
+                paddingLeft: "max(0px, env(safe-area-inset-left))",
+                paddingRight: "max(0px, env(safe-area-inset-right))",
+              }
+            : undefined
+        }
       >
-        <div className="flex items-center gap-2 border-b border-[var(--border)] px-3">
+        <div className="flex shrink-0 items-center gap-2 border-b border-[var(--border)] px-3">
           <Search className="size-4 shrink-0 text-[var(--text-placeholder)]" />
           <input
             ref={inputRef}
@@ -307,13 +453,54 @@ export function CommandPalette({
             aria-expanded
             aria-controls={listId}
             aria-activedescendant={flat[active] ? itemId(flat[active].id) : undefined}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
+            value={fieldText}
+            onChange={(e) => (submitMode ? setDraft(e.target.value) : setQuery(e.target.value))}
             onKeyDown={onKeyDown}
             placeholder={l.placeholder}
-            className="w-full bg-transparent py-3 text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]"
+            enterKeyHint={submitMode ? "search" : undefined}
+            className={cn(
+              "w-full bg-transparent py-3 outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]",
+              // 16px on a phone, or iOS zooms the page in on focus.
+              isPhone ? "text-base" : "text-sm",
+            )}
           />
           {loading && <span className="shrink-0 text-[11px] text-[var(--text-placeholder)]">{l.loading}</span>}
+          {fieldText !== "" && (
+            <button
+              type="button"
+              aria-label={l.clear ?? DEFAULT_COMMAND_PALETTE_LABELS.clear}
+              onClick={() => {
+                commit("");
+                // Clearing starts the next query far more often than it ends this one.
+                inputRef.current?.focus();
+              }}
+              className="shrink-0 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]"
+            >
+              <X className="size-4" />
+            </button>
+          )}
+          {dirty && (
+            <button
+              type="button"
+              aria-label={l.submit ?? DEFAULT_COMMAND_PALETTE_LABELS.submit}
+              onClick={() => {
+                commit(draft);
+                inputRef.current?.focus();
+              }}
+              className="shrink-0 rounded p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+            >
+              <CornerDownLeft className="size-4" />
+            </button>
+          )}
+          {isPhone && (
+            <button
+              type="button"
+              onClick={onClose}
+              className="-me-1 shrink-0 rounded px-1 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+            >
+              {l.close ?? DEFAULT_COMMAND_PALETTE_LABELS.close}
+            </button>
+          )}
         </div>
 
         {/* The status lines sit outside the listbox: a listbox owns options and groups,
@@ -323,7 +510,9 @@ export function CommandPalette({
             {l.error ?? DEFAULT_COMMAND_PALETTE_LABELS.error}
           </div>
         )}
-        {!failed && flat.length === 0 && !loading && (
+        {/* `results`, not `flat`: a group whose only row is its "Searching…" line is not
+            an empty result. */}
+        {!failed && results.length === 0 && !loading && (
           <div className="px-3 py-6 text-center text-sm text-[var(--text-muted)]">{l.empty}</div>
         )}
         {/* Listbox grouping: each group is a `role="group"` named by its heading, and
@@ -342,9 +531,25 @@ export function CommandPalette({
               </div>
               <ul role="group" aria-labelledby={groupId(groupIndex)}>
                 {items.map((item) => {
+                  if (item.kind === "status") {
+                    return (
+                      <li
+                        key={item.id}
+                        role="presentation"
+                        className={cn(
+                          "flex items-center gap-2.5 px-3 text-xs text-[var(--text-placeholder)]",
+                          comfortable ? "min-h-11 py-2.5" : "py-2",
+                        )}
+                      >
+                        {item.icon && <span className="flex size-4 shrink-0 items-center justify-center">{item.icon}</span>}
+                        <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                      </li>
+                    );
+                  }
                   flatIndex += 1;
                   const idx = flatIndex;
                   const isActive = idx === active;
+                  const redact = item.redact ?? redactLabels;
                   // Written once and worn by either tag below, so the anchor and the
                   // button can never drift apart in looks or in listbox semantics.
                   // `role="option"` on an <a href> is fine: the browser's middle-click
@@ -356,7 +561,8 @@ export function CommandPalette({
                     "data-index": idx,
                     onMouseMove: () => setActive(idx),
                     className: cn(
-                      "flex w-full items-center gap-2.5 px-3 py-2 text-start text-sm",
+                      "flex w-full items-center gap-2.5 px-3 text-start",
+                      comfortable ? "min-h-11 py-2.5 text-base" : "py-2 text-sm",
                       isActive
                         ? "bg-[var(--bg-active)] text-[var(--text-primary)]"
                         : "text-[var(--text-secondary)]",
@@ -369,9 +575,13 @@ export function CommandPalette({
                           {item.icon}
                         </span>
                       )}
-                      <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                      <span data-private={redact || undefined} className="min-w-0 flex-1 truncate">
+                        {item.label}
+                      </span>
                       {item.hint && (
-                        <span className="shrink-0 text-xs text-[var(--text-placeholder)]">{item.hint}</span>
+                        <span data-private={redact || undefined} className="shrink-0 text-xs text-[var(--text-placeholder)]">
+                          {item.hint}
+                        </span>
                       )}
                     </>
                   );