@brftech/filex-core 0.1.84 → 0.2.0

package/src/components/CommandPalette.vue

@@ -12,10 +12,20 @@
  * Keyboard: ↑/↓ move, Enter selects, Esc closes; the listener sits on the
  * document in CAPTURE phase so it wins over useKeyboardShortcuts' window
  * handler (otherwise Enter would also fire the explorer's own onOpen).
+ *
+ * bul:s3 additions:
+ *   4. "Everywhere" group — ≥3-char queries also hit the global files-search
+ *      endpoint (debounced 250ms, max 8 rows) via the `globalSearch` prop.
+ *      Content matches get an "İçerikte" badge + a «»-highlighted snippet
+ *      rendered as pure text nodes (no innerHTML).
+ *   5. Saved searches — localStorage-backed (`filex.saved-searches`, max 10);
+ *      "save current query" command + per-row delete.
  */
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import type { FileNode, ViewMode } from '../types/FileNode';
+import type { GlobalSearchHit } from '../composables/useFileApi';
+import { matchedInContent, snippetSegments } from '../lib/snippet';
 import { useLocale } from '../composables/useLocale';
 
 const props = defineProps<{
@@ -27,6 +37,8 @@ const props = defineProps<{
   canWrite?: boolean;
   /** Gates the "up one level" command. */
   canGoUp?: boolean;
+  /* bul:s3 — global search callback; absent = older host, group hidden. */
+  globalSearch?: (q: string) => Promise<GlobalSearchHit[]>;
 }>();
 
 const emit = defineEmits<{
@@ -39,6 +51,8 @@ const emit = defineEmits<{
   (e: 'open-trash'): void;
   (e: 'refresh'): void;
   (e: 'go-up'): void;
+  /* bul:s3 — an "everywhere" hit was chosen. */
+  (e: 'open-hit', hit: GlobalSearchHit): void;
 }>();
 
 const { t, nodeDisplayName } = useLocale(() => props.locale);
@@ -51,7 +65,15 @@ const listEl = ref<HTMLElement | null>(null);
 type PaletteItem =
   | { kind: 'goto'; id: string; label: string; icon: string; path: string }
   | { kind: 'file'; id: string; label: string; icon: string; node: FileNode }
-  | { kind: 'command'; id: string; label: string; icon: string; command: string };
+  | { kind: 'command'; id: string; label: string; icon: string; command: string }
+  /* bul:s3 — everywhere hit / saved search / save-current-query. */
+  | { kind: 'hit'; id: string; label: string; icon: string; hit: GlobalSearchHit; crumb: string; inContent: boolean; snippet: string }
+  | { kind: 'saved'; id: string; label: string; icon: string; query: string }
+  | { kind: 'save'; id: string; label: string; icon: string; query: string };
+
+/* bul:s3 — narrowed aliases so the template doesn't need kind-guards. */
+type HitItem = Extract<PaletteItem, { kind: 'hit' }>;
+type SavedGroupItem = Extract<PaletteItem, { kind: 'saved' | 'save' }>;
 
 /**
  * Scored includes: -1 = no match; otherwise earlier + prefix matches rank
@@ -110,16 +132,141 @@ const commandItems = computed<PaletteItem[]>(() => {
     .map((d) => ({ kind: 'command' as const, id: `cmd:${d.command}`, label: d.label, icon: d.icon, command: d.command }));
 });
 
+/* === bul:s3 — "everywhere" global search ================================ */
+
+const EVERYWHERE_MIN_CHARS = 3;
+const EVERYWHERE_LIMIT = 8;
+const EVERYWHERE_DEBOUNCE_MS = 250;
+
+const everywhere = ref<GlobalSearchHit[]>([]);
+const everywhereLoading = ref(false);
+let everywhereTimer: ReturnType<typeof setTimeout> | undefined;
+let everywhereSeq = 0;
+
+function scheduleEverywhere(q: string) {
+  if (everywhereTimer) clearTimeout(everywhereTimer);
+  const fn = props.globalSearch;
+  if (!fn || q.length < EVERYWHERE_MIN_CHARS) {
+    everywhere.value = [];
+    everywhereLoading.value = false;
+    return;
+  }
+  everywhereLoading.value = true;
+  everywhereTimer = setTimeout(async () => {
+    const seq = ++everywhereSeq;
+    try {
+      const hits = await fn(q);
+      if (seq !== everywhereSeq) return; // stale response — a newer query won
+      everywhere.value = Array.isArray(hits) ? hits.slice(0, EVERYWHERE_LIMIT) : [];
+    } catch {
+      if (seq === everywhereSeq) everywhere.value = [];
+    } finally {
+      if (seq === everywhereSeq) everywhereLoading.value = false;
+    }
+  }, EVERYWHERE_DEBOUNCE_MS);
+}
+
+/** Parent-path crumb for a hit row (storage label when the hit carries one). */
+function hitCrumb(h: GlobalSearchHit): string {
+  const rel = String(h.path ?? '').replace(/^\/+|\/+$/g, '');
+  const slash = rel.lastIndexOf('/');
+  const parent = slash === -1 ? '' : rel.slice(0, slash);
+  const storage =
+    (typeof h.storage === 'string' && h.storage) ||
+    (typeof h.storage_name === 'string' && h.storage_name) ||
+    '';
+  if (storage && parent) return `${storage}/${parent}`;
+  if (storage) return storage;
+  return parent || '/';
+}
+
+const hitItems = computed<HitItem[]>(() =>
+  everywhere.value.map((h) => ({
+    kind: 'hit' as const,
+    id: `hit:${h.storage_id ?? ''}:${h.path ?? ''}:${h.id ?? ''}`,
+    label: String(h.name ?? h.path ?? ''),
+    icon: h.type === 'dir' ? '📁' : '📄',
+    hit: h,
+    crumb: hitCrumb(h),
+    inContent: matchedInContent(h.matched),
+    snippet: typeof h.snippet === 'string' ? h.snippet : '',
+  })),
+);
+
+/* === bul:s3 — saved searches (localStorage) ============================= */
+
+const SAVED_LS_KEY = 'filex.saved-searches';
+const SAVED_MAX = 10;
+
+const savedSearches = ref<string[]>([]);
+
+function readSavedSearches(): string[] {
+  try {
+    const raw = localStorage.getItem(SAVED_LS_KEY);
+    if (!raw) return [];
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((x): x is string => typeof x === 'string' && x.trim() !== '').slice(0, SAVED_MAX);
+  } catch {
+    return [];
+  }
+}
+
+function writeSavedSearches(list: string[]) {
+  savedSearches.value = list.slice(0, SAVED_MAX);
+  try {
+    localStorage.setItem(SAVED_LS_KEY, JSON.stringify(savedSearches.value));
+  } catch {
+    /* private mode / quota — the in-memory list still works this session */
+  }
+}
+
+function saveSearch(q: string) {
+  const clean = q.trim();
+  if (!clean) return;
+  const list = savedSearches.value.filter((s) => s !== clean);
+  list.unshift(clean); // newest first; cap enforced by writeSavedSearches
+  writeSavedSearches(list);
+}
+
+function removeSavedSearch(q: string) {
+  writeSavedSearches(savedSearches.value.filter((s) => s !== q));
+  if (active.value >= flat.value.length) active.value = Math.max(0, flat.value.length - 1);
+}
+
+const savedItems = computed<SavedGroupItem[]>(() => {
+  const q = query.value.trim();
+  const out: SavedGroupItem[] = [];
+  // "Save this query" command — only when there IS a query and it isn't saved yet.
+  if (q && !savedSearches.value.includes(q)) {
+    out.push({ kind: 'save', id: `save:${q}`, label: `${t('palette.save')}: ${q}`, icon: '💾', query: q });
+  }
+  const scored = savedSearches.value
+    .map((s) => ({ s, sc: matchScore(s, q) }))
+    .filter((r) => r.sc >= 0 || !q);
+  for (const r of scored) {
+    out.push({ kind: 'saved', id: `saved:${r.s}`, label: r.s, icon: '🔖', query: r.s });
+  }
+  return out;
+});
+
+/* ======================================================================== */
+
 const flat = computed<PaletteItem[]>(() => [
   ...gotoItems.value,
   ...fileItems.value,
+  ...hitItems.value,
+  ...savedItems.value,
   ...commandItems.value,
 ]);
 const fileOffset = computed(() => gotoItems.value.length);
-const cmdOffset = computed(() => gotoItems.value.length + fileItems.value.length);
+const hitOffset = computed(() => fileOffset.value + fileItems.value.length);
+const savedOffset = computed(() => hitOffset.value + hitItems.value.length);
+const cmdOffset = computed(() => savedOffset.value + savedItems.value.length);
 
-watch(query, () => {
+watch(query, (q) => {
   active.value = 0;
+  scheduleEverywhere(q.trim()); /* bul:s3 */
 });
 
 function move(delta: number) {
@@ -134,7 +281,23 @@ function move(delta: number) {
 function choose(item?: PaletteItem) {
   const it = item ?? flat.value[active.value];
   if (!it) return;
+  /* bul:s3 — saved-search rows keep the palette OPEN: picking one re-runs
+   * the palette with that query; saving just persists it. */
+  if (it.kind === 'saved') {
+    query.value = it.query;
+    void nextTick(() => inputEl.value?.focus());
+    return;
+  }
+  if (it.kind === 'save') {
+    saveSearch(it.query);
+    void nextTick(() => inputEl.value?.focus());
+    return;
+  }
   emit('close');
+  if (it.kind === 'hit') {
+    emit('open-hit', it.hit);
+    return;
+  }
   if (it.kind === 'file') {
     emit('open-node', it.node);
   } else if (it.kind === 'goto') {
@@ -183,15 +346,23 @@ watch(
     if (v) {
       query.value = '';
       active.value = 0;
+      /* bul:s3 — fresh session state for the new groups. */
+      everywhere.value = [];
+      everywhereLoading.value = false;
+      savedSearches.value = readSavedSearches();
       document.addEventListener('keydown', onDocKeydown, true);
       void nextTick(() => inputEl.value?.focus());
     } else {
+      if (everywhereTimer) clearTimeout(everywhereTimer); /* bul:s3 */
       document.removeEventListener('keydown', onDocKeydown, true);
     }
   },
 );
 
-onBeforeUnmount(() => document.removeEventListener('keydown', onDocKeydown, true));
+onBeforeUnmount(() => {
+  if (everywhereTimer) clearTimeout(everywhereTimer); /* bul:s3 */
+  document.removeEventListener('keydown', onDocKeydown, true);
+});
 </script>
 
 <template>
@@ -269,6 +440,69 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onDocKeydown, true
             </button>
           </template>
 
+          <!-- bul:s3 — "Everywhere" global-search hits -->
+          <template v-if="hitItems.length || everywhereLoading">
+            <div class="fe-cmdp__group">{{ t('palette.everywhere') }}</div>
+            <div v-if="everywhereLoading && !hitItems.length" class="fe-cmdp__loading">
+              {{ t('palette.searching') }}
+            </div>
+            <button
+              v-for="(it, i) in hitItems"
+              :key="it.id"
+              type="button"
+              class="fe-cmdp__item fe-cmdp__item--hit"
+              :class="{ 'is-active': hitOffset + i === active }"
+              role="option"
+              :aria-selected="hitOffset + i === active"
+              @mouseenter="active = hitOffset + i"
+              @click="choose(it)"
+            >
+              <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+              <span class="fe-cmdp__hitbody">
+                <span class="fe-cmdp__hitline">
+                  <span class="fe-cmdp__label">{{ it.label }}</span>
+                  <span v-if="it.inContent" class="fe-cmdp__badge">{{ t('search.in_content') }}</span>
+                </span>
+                <span v-if="it.crumb" class="fe-cmdp__crumb" :title="it.crumb">{{ it.crumb }}</span>
+                <!-- Snippet: «»-highlights become <mark> via TEXT segments — never innerHTML. -->
+                <span v-if="it.snippet" class="fe-cmdp__snippet">
+                  <template v-for="(seg, si) in snippetSegments(it.snippet)" :key="si">
+                    <mark v-if="seg.match" class="fe-cmdp__mark">{{ seg.text }}</mark>
+                    <template v-else>{{ seg.text }}</template>
+                  </template>
+                </span>
+              </span>
+            </button>
+          </template>
+
+          <!-- bul:s3 — saved searches -->
+          <template v-if="savedItems.length">
+            <div class="fe-cmdp__group">{{ t('palette.saved') }}</div>
+            <div
+              v-for="(it, i) in savedItems"
+              :key="it.id"
+              class="fe-cmdp__item fe-cmdp__item--saved"
+              :class="{ 'is-active': savedOffset + i === active }"
+              role="option"
+              :aria-selected="savedOffset + i === active"
+              tabindex="-1"
+              @mouseenter="active = savedOffset + i"
+              @click="choose(it)"
+              @keydown.enter.prevent="choose(it)"
+            >
+              <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+              <span class="fe-cmdp__label">{{ it.label }}</span>
+              <button
+                v-if="it.kind === 'saved'"
+                type="button"
+                class="fe-cmdp__del"
+                :title="t('palette.saved.delete')"
+                :aria-label="t('palette.saved.delete')"
+                @click.stop="removeSavedSearch(it.query)"
+              >🗑</button>
+            </div>
+          </template>
+
           <template v-if="commandItems.length">
             <div class="fe-cmdp__group">{{ t('palette.commands') }}</div>
             <button
@@ -287,7 +521,7 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onDocKeydown, true
             </button>
           </template>
 
-          <div v-if="flat.length === 0" class="fe-cmdp__empty">
+          <div v-if="flat.length === 0 && !everywhereLoading" class="fe-cmdp__empty">
             {{ t('palette.empty') }}
           </div>
         </div>

package/src/components/ListView.vue

@@ -11,6 +11,7 @@ import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { fileIconSvg } from '../lib/fileIcons';
+import { matchedInContent, snippetSegments } from '../lib/snippet'; /* bul:s3 */
 import StarButton from './StarButton.vue';
 
 const props = defineProps<{
@@ -137,6 +138,19 @@ function parentDir(path: string): string {
   return stripped.slice(0, idx);
 }
 
+/* bul:s3 — search-result enrichment. The v0.2 backend inlines `snippet`
+ * (plain text, «» highlights) + `matched` on search hits; regular listings
+ * never carry them, so presence-gating keeps normal rows untouched and an
+ * older backend simply renders nothing extra. */
+function rowSnippet(n: FileNode): string {
+  const s = (n as Record<string, unknown>).snippet;
+  return typeof s === 'string' ? s : '';
+}
+
+function rowInContent(n: FileNode): boolean {
+  return matchedInContent((n as Record<string, unknown>).matched);
+}
+
 // ------------------------------------------------------------------
 // Column sorting — local to the list view. Default (null) keeps the
 // backend order, i.e. exactly the pre-existing behavior.
@@ -342,12 +356,23 @@ const segments = computed<Segment[]>(() => {
           <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
           <span v-else class="fe-list__icon fe-list__icon--svg" aria-hidden="true" v-html="fileIconSvg(n)"></span>
           <div class="fe-list__name-wrap">
-            <span class="fe-list__name" :title="n.basename">{{ nodeDisplayName(n) }}</span>
+            <span class="fe-list__name" :title="n.basename">
+              {{ nodeDisplayName(n) }}
+              <!-- bul:s3 — content-match badge -->
+              <span v-if="rowInContent(n)" class="fe-list__badge">{{ t('search.in_content') }}</span>
+            </span>
             <span
               v-if="showParentPath"
               class="fe-list__parent"
               :title="parentDir(n.path)"
             >{{ parentDir(n.path) || '—' }}</span>
+            <!-- bul:s3 — content snippet («» → <mark> via TEXT segments, no innerHTML) -->
+            <span v-if="rowSnippet(n)" class="fe-list__snippet">
+              <template v-for="(seg, si) in snippetSegments(rowSnippet(n))" :key="si">
+                <mark v-if="seg.match" class="fe-list__mark">{{ seg.text }}</mark>
+                <template v-else>{{ seg.text }}</template>
+              </template>
+            </span>
           </div>
         </div>
         <div class="fe-list__col fe-list__col--size">

package/src/composables/useFileApi.ts

@@ -101,6 +101,34 @@ export interface InviteResponse {
   emailed: boolean;
 }
 
+/* === bul:s3 — global search (GET /api/files/search) === */
+
+export type GlobalSearchScope = 'name' | 'content' | 'all';
+
+/**
+ * One hit from the dedicated files-search endpoint. The backend returns raw
+ * node rows (`{results: [...]}`), so `path` is the IN-STORAGE relative path
+ * (no `adapter://` prefix) and the storage comes back as a numeric
+ * `storage_id`. `snippet`/`matched` are the v0.2 "Bul" contract additions —
+ * older backends simply omit them, so every consumer must stay
+ * undefined-safe.
+ */
+export interface GlobalSearchHit {
+  id?: number;
+  storage_id?: number;
+  name?: string;
+  path?: string;
+  /** `file` | `dir` (backend NodeType). */
+  type?: string;
+  size?: number;
+  mime?: string;
+  /** Plain-text content snippet; matches wrapped in «» (never HTML). */
+  snippet?: string;
+  /** Where the hit matched: name | content | both. */
+  matched?: 'name' | 'content' | 'both';
+  [k: string]: unknown;
+}
+
 /**
  * Resolve a Vuefinder-compatible endpoint map from the user's config.
  * Either `apiBase` is set (auto-derive everything) or each route is
@@ -340,6 +368,22 @@ export function useFileApi(config: ExplorerConfig) {
     return jsonFetch<ManagerResponse>(managerUrl('search', { path, filter }));
   }
 
+  /* === bul:s3 — global "search everywhere" ===
+   * Derived from the manager endpoint by swapping `/manager` for `/search`
+   * (same trick permissionsUrl uses), so embedded proxies that forward the
+   * whole /api/files/* subtree keep working. Errors and legacy backends
+   * degrade to an empty result list — the palette just shows nothing. */
+  async function globalSearch(
+    query: string,
+    opts: { limit?: number; scope?: GlobalSearchScope } = {},
+  ): Promise<GlobalSearchHit[]> {
+    const base = endpoints.manager.replace(/\/manager(\?.*)?$/, '/search');
+    const sep = base.includes('?') ? '&' : '?';
+    const url = `${base}${sep}${qs({ q: query, limit: opts.limit, scope: opts.scope })}`;
+    const data = await jsonFetch<{ results?: GlobalSearchHit[] | null }>(url);
+    return Array.isArray(data?.results) ? data.results : [];
+  }
+
   async function subfolders(path: string): Promise<{ folders: FileNode[] }> {
     return jsonFetch<{ folders: FileNode[] }>(managerUrl('subfolders', { path }));
   }
@@ -661,6 +705,7 @@ export function useFileApi(config: ExplorerConfig) {
     // Manager
     index,
     search,
+    globalSearch /* bul:s3 */,
     subfolders,
     newFolder,
     rename,

package/src/index.ts

@@ -57,6 +57,10 @@ export { isExternalUsable } from './types/FileNode';
 // ——— Composables (consumers can roll their own UI on top) ———
 export { useFileApi, resolveEndpoints } from './composables/useFileApi';
 export type { FileApi, ManagerResponse, PendingOpDto } from './composables/useFileApi';
+/* bul:s3 — global-search contract types + snippet helpers */
+export type { GlobalSearchHit, GlobalSearchScope } from './composables/useFileApi';
+export { snippetSegments, matchedInContent } from './lib/snippet';
+export type { SnippetSegment, SearchMatched } from './lib/snippet';
 
 export { useUploadChunked } from './composables/useUploadChunked';
 export type { UploadJob, UploadOptions } from './composables/useUploadChunked';

package/src/lib/snippet.ts

@@ -0,0 +1,43 @@
+/* bul:s3 */
+/**
+ * Snippet segment parser — the search backend returns content snippets as
+ * PLAIN TEXT with matched words wrapped in «guillemets» (contract: no HTML
+ * ever crosses the wire). The UI renders highlights by splitting the string
+ * into segments and emitting each one as a TEXT node (a <mark> wrapper for
+ * matches) — never via innerHTML, so a file whose content contains markup
+ * can't inject anything into the page.
+ */
+
+export interface SnippetSegment {
+  /** Literal text of this segment. Always rendered as a text node. */
+  text: string;
+  /** True when the segment was «wrapped» — render inside <mark>. */
+  match: boolean;
+}
+
+/**
+ * Split a `«»`-annotated snippet into render segments. An unpaired `«`
+ * degrades gracefully: the rest of the string is treated as plain text.
+ */
+export function snippetSegments(snippet: string): SnippetSegment[] {
+  const out: SnippetSegment[] = [];
+  if (!snippet) return out;
+  const re = /«([^«»]*)»/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(snippet)) !== null) {
+    if (m.index > last) out.push({ text: snippet.slice(last, m.index), match: false });
+    if (m[1]) out.push({ text: m[1], match: true });
+    last = m.index + m[0].length;
+  }
+  if (last < snippet.length) out.push({ text: snippet.slice(last), match: false });
+  return out;
+}
+
+/** Matched-in values the search contract allows on a hit. */
+export type SearchMatched = 'name' | 'content' | 'both';
+
+/** True when the hit matched (at least partly) inside file CONTENT. */
+export function matchedInContent(matched: unknown): boolean {
+  return matched === 'content' || matched === 'both';
+}

package/src/locales/en.ts

@@ -187,4 +187,12 @@ export const en: Record<string, string> = {
   'toast.trashed': 'Moved to trash',
   'conn.offline': 'No live connection — changes may be delayed',
   'conn.tooltip': 'Live connection to the server is unavailable; the list refreshes periodically. This notice disappears once the connection is back.',
+
+  /* === bul:s3 === */
+  'palette.everywhere': 'Everywhere',
+  'palette.searching': 'Searching…',
+  'palette.saved': 'Saved searches',
+  'palette.save': 'Save search',
+  'palette.saved.delete': 'Delete saved search',
+  'search.in_content': 'In content',
 };

package/src/locales/tr.ts

@@ -187,4 +187,12 @@ export const tr: Record<string, string> = {
   'toast.trashed': 'Çöpe taşındı',
   'conn.offline': 'Canlı bağlantı yok — değişiklikler gecikebilir',
   'conn.tooltip': 'Sunucuyla canlı bağlantı kurulamadı; liste belirli aralıklarla otomatik yenilenir. Bağlantı geri gelince bu uyarı kaybolur.',
+
+  /* === bul:s3 === */
+  'palette.everywhere': 'Her yerde',
+  'palette.searching': 'Aranıyor…',
+  'palette.saved': 'Kayıtlı aramalar',
+  'palette.save': 'Aramayı kaydet',
+  'palette.saved.delete': 'Kayıtlı aramayı sil',
+  'search.in_content': 'İçerikte',
 };

package/src/styles/base.css

@@ -1830,3 +1830,104 @@ filex-explorer {
   border-radius: 50%;
   background: var(--fe-warning, #f59e0b);
 }
+
+/* === bul:s3 === */
+
+/* Palette — "Everywhere" hit rows (name + crumb + snippet stack). */
+.fe-cmdp__item--hit {
+  align-items: flex-start;
+}
+.fe-cmdp__item--hit .fe-cmdp__icon {
+  margin-top: 1px;
+}
+.fe-cmdp__hitbody {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fe-cmdp__hitline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.fe-cmdp__badge,
+.fe-list__badge {
+  flex: 0 0 auto;
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--fe-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--fe-primary) 12%, transparent);
+  color: var(--fe-primary);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.fe-cmdp__crumb {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+  color: var(--fe-text-muted);
+}
+.fe-cmdp__snippet,
+.fe-list__snippet {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--fe-text-muted);
+}
+.fe-cmdp__mark,
+.fe-list__mark {
+  background: color-mix(in srgb, var(--fe-primary) 22%, transparent);
+  color: var(--fe-text);
+  border-radius: 2px;
+  padding: 0 1px;
+  font-weight: 600;
+}
+.fe-cmdp__loading {
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--fe-text-muted);
+}
+
+/* Palette — saved-search rows (div-based so the delete button nests legally). */
+.fe-cmdp__item--saved {
+  user-select: none;
+}
+.fe-cmdp__del {
+  flex: 0 0 auto;
+  background: transparent;
+  border: 0;
+  border-radius: var(--fe-radius-sm);
+  padding: 2px 6px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--fe-text-muted);
+  cursor: pointer;
+  opacity: 0.55;
+}
+.fe-cmdp__item--saved:hover .fe-cmdp__del,
+.fe-cmdp__item--saved.is-active .fe-cmdp__del {
+  opacity: 1;
+}
+.fe-cmdp__del:hover {
+  background: var(--fe-bg-elev);
+  color: var(--fe-danger, #dc2626);
+}
+.fe-cmdp__del:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: -2px;
+}
+
+/* List view — search-result snippet line under the filename. */
+.fe-list__snippet {
+  max-width: 100%;
+}