npm - @brftech/filex-core - Versions diffs - 0.1.84 → 0.3.0 - Mend

@brftech/filex-core 0.1.84 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/dist/{ArchiveViewer-wg4uE-3C.js → ArchiveViewer-CYrKPEbE.js} +2 -2
package/dist/{ArchiveViewer-wg4uE-3C.js.map → ArchiveViewer-CYrKPEbE.js.map} +1 -1
package/dist/{CsvViewer-57uz4UKk.js → CsvViewer-C3ZU4Uua.js} +2 -2
package/dist/{CsvViewer-57uz4UKk.js.map → CsvViewer-C3ZU4Uua.js.map} +1 -1
package/dist/{DrawioViewer-BfL9Hbyp.js → DrawioViewer-15ZL4ken.js} +2 -2
package/dist/{DrawioViewer-BfL9Hbyp.js.map → DrawioViewer-15ZL4ken.js.map} +1 -1
package/dist/{EpubViewer-CYG2CV_3.js → EpubViewer-CrXcDgmo.js} +2 -2
package/dist/{EpubViewer-CYG2CV_3.js.map → EpubViewer-CrXcDgmo.js.map} +1 -1
package/dist/{IpynbViewer-DJw34-wV.js → IpynbViewer-BAb9rV2Q.js} +2 -2
package/dist/{IpynbViewer-DJw34-wV.js.map → IpynbViewer-BAb9rV2Q.js.map} +1 -1
package/dist/{MermaidViewer-C86jjm27.js → MermaidViewer-BN8GN4FY.js} +2 -2
package/dist/{MermaidViewer-C86jjm27.js.map → MermaidViewer-BN8GN4FY.js.map} +1 -1
package/dist/{PsdViewer-DGHIqv-x.js → PsdViewer-o-kWQExw.js} +2 -2
package/dist/{PsdViewer-DGHIqv-x.js.map → PsdViewer-o-kWQExw.js.map} +1 -1
package/dist/{TiffViewer-gct9Ub3o.js → TiffViewer-AjMVBzxp.js} +2 -2
package/dist/{TiffViewer-gct9Ub3o.js.map → TiffViewer-AjMVBzxp.js.map} +1 -1
package/dist/{Viewer3D-BVt4l2a9.js → Viewer3D-BR3WDbxQ.js} +2 -2
package/dist/{Viewer3D-BVt4l2a9.js.map → Viewer3D-BR3WDbxQ.js.map} +1 -1
package/dist/filex-core.js +17 -15
package/dist/filex-core.umd.cjs +41 -41
package/dist/filex-core.umd.cjs.map +1 -1
package/dist/index-BG5upYlH.js +7392 -0
package/dist/index-BG5upYlH.js.map +1 -0
package/dist/index.d.ts +106 -2
package/dist/style.css +1 -1
package/package.json +1 -1
package/src/FileExplorer.vue +109 -1
package/src/components/CommandPalette.vue +239 -5
package/src/components/ContextMenu.vue +101 -3
package/src/components/ListView.vue +26 -1
package/src/components/Toolbar.vue +216 -5
package/src/composables/useFileApi.ts +45 -0
package/src/index.ts +4 -0
package/src/lib/snippet.ts +43 -0
package/src/locales/en.ts +14 -0
package/src/locales/tr.ts +14 -0
package/src/styles/base.css +238 -0
package/dist/index-BeUoODQq.js +0 -6871
package/dist/index-BeUoODQq.js.map +0 -1

package/src/components/Toolbar.vue CHANGED Viewed

@@ -11,10 +11,10 @@
  * Presentational only — all logic (rename, share, …) lives in
  * FileExplorer.vue, which listens for `action` emits.
  */
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { ViewMode } from '../types/FileNode';
-import type { LocaleCode } from '../types/ExplorerConfig';
-import type { ContextAction } from './ContextMenu.vue';
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import ContextMenu, { type ContextAction } from './ContextMenu.vue';
 import { useLocale } from '../composables/useLocale';
 export type SelectionMode = 'none' | 'single-file' | 'single-dir' | 'multi';
@@ -58,6 +58,19 @@ const props = defineProps<{
    */
   canWrite?: boolean;
   locale: LocaleCode;
+  /**
+   * bag:b4 — narrow/embed mini mode. When true the toolbar collapses to
+   * [↑?] [🔍] [⬆] [⋯]: secondary actions (New Folder, Refresh, density,
+   * view switcher, selection actions, Paste) move into the "⋯" overflow
+   * menu and search expands from an icon to a full-width input. When
+   * absent/false the classic wide layout renders unchanged.
+   */
+  narrow?: boolean;
+  /**
+   * bag:b4 — resolved theme, forwarded to the teleported overflow menu
+   * (which loses the `.fe` variable scope under <body>).
+   */
+  theme?: ThemeMode;
 }>();
 const emit = defineEmits<{
@@ -114,7 +127,12 @@ function onSearchInput(ev: Event) {
   debounce = setTimeout(() => emit('update:searchQuery', v), 200);
 }
-function focusSearch() {
+async function focusSearch() {
+  /* bag:b4 — in narrow mode the input is collapsed behind the icon. */
+  if (props.narrow && !searchOpen.value) {
+    searchOpen.value = true;
+    await nextTick();
+  }
   searchEl.value?.focus();
   searchEl.value?.select();
 }
@@ -132,10 +150,120 @@ const toolbarItems = computed(() => props.actions.filter((a) => !a.divider && !a
 function fire(key: string) {
   emit('action', key);
 }
+/* === bag:b4 — narrow-mode state: expandable search + "⋯" overflow menu === */
+const searchOpen = ref(false);
+// Leaving narrow mode discards the transient expanded-search state so the
+// wide layout always comes back exactly as it was.
+watch(
+  () => props.narrow,
+  (n) => {
+    if (!n) searchOpen.value = false;
+  },
+);
+async function openSearch() {
+  searchOpen.value = true;
+  await nextTick();
+  searchEl.value?.focus();
+}
+function closeSearch() {
+  // Keep the query (it still filters the listing); the icon shows an
+  // active state while a query is set.
+  searchOpen.value = false;
+}
+// Coarse-pointer detection — the overflow menu renders as a bottom sheet on
+// touch devices, matching the file context menu.
+const coarse = ref(false);
+let coarseMq: MediaQueryList | undefined;
+function syncCoarse(e?: MediaQueryListEvent | MediaQueryList) {
+  coarse.value = !!(e && 'matches' in e && e.matches);
+}
+onMounted(() => {
+  if (typeof window === 'undefined' || !window.matchMedia) return;
+  coarseMq = window.matchMedia('(pointer: coarse)');
+  syncCoarse(coarseMq);
+  coarseMq.addEventListener?.('change', syncCoarse);
+});
+onBeforeUnmount(() => {
+  coarseMq?.removeEventListener?.('change', syncCoarse);
+});
+const moreBtnEl = ref<HTMLElement | null>(null);
+const moreRef = ref<InstanceType<typeof ContextMenu> | null>(null);
+// Everything the wide toolbar renders as standalone buttons, folded into one
+// action list: folder-level writes (New Folder / Paste), the shared
+// selection actions, then the view utilities (Refresh / density / view mode).
+const moreActions = computed<ContextAction[]>(() => {
+  const list: ContextAction[] = [];
+  const writable =
+    !props.trashActive && !props.atVirtualRoot && props.canWrite !== false;
+  if (mode.value === 'none' && writable) {
+    list.push({ key: 'new-folder', label: t('toolbar.new_folder'), icon: '📁' });
+    if (props.pasteEnabled) list.push({ key: 'paste', label: t('ctx.paste'), icon: '📋' });
+  }
+  list.push(...toolbarItems.value);
+  if (list.length) list.push({ divider: true, key: 'bag-sep', label: '' });
+  list.push({ key: 'refresh', label: t('toolbar.refresh'), icon: '↻' });
+  list.push({
+    key: 'density',
+    label:
+      density.value === 'compact'
+        ? t('toolbar.density.comfortable')
+        : t('toolbar.density.compact'),
+    icon: '⇅',
+  });
+  list.push(
+    props.viewMode === 'list'
+      ? { key: 'view-grid', label: t('toolbar.view.grid'), icon: '▦' }
+      : { key: 'view-list', label: t('toolbar.view.list'), icon: '☰' },
+  );
+  return list;
+});
+function openMore() {
+  const r = moreBtnEl.value?.getBoundingClientRect();
+  moreRef.value?.show({ clientX: r ? r.right : 0, clientY: r ? r.bottom + 4 : 0 }, []);
+}
+function onMoreSelect(a: ContextAction) {
+  switch (a.key) {
+    case 'new-folder':
+      emit('new-folder');
+      break;
+    case 'refresh':
+      emit('refresh');
+      break;
+    case 'density':
+      toggleDensity();
+      break;
+    case 'view-list':
+      emit('update:viewMode', 'list');
+      break;
+    case 'view-grid':
+      emit('update:viewMode', 'grid');
+      break;
+    default:
+      fire(a.key);
+  }
+}
+/* === /bag:b4 === */
 </script>
 <template>
-  <div class="fe-toolbar">
+  <div
+    class="fe-toolbar"
+    :class="{
+      'fe-toolbar--narrow': narrow /* bag:b4 */,
+      'fe-toolbar--searching': narrow && searchOpen /* bag:b4 */,
+    }"
+  >
+    <!-- bag:b4 — wide layout, untouched; renders exactly as before when not narrow -->
+    <template v-if="!narrow">
     <div class="fe-toolbar__primary">
       <button
         v-if="canGoUp"
@@ -280,5 +408,88 @@ function fire(key: string) {
         <span class="fe-icon">▦</span>
       </button>
     </div>
+    </template>
+    <!-- bag:b4 — narrow layout: [↑?] ... [🔍] [⬆] [⋯], search expands full-width -->
+    <template v-else>
+      <template v-if="searchOpen">
+        <div class="fe-search fe-search--full">
+          <input
+            ref="searchEl"
+            type="search"
+            class="fe-search__input"
+            :placeholder="t('toolbar.search.placeholder')"
+            :value="localSearch"
+            :aria-label="t('toolbar.search')"
+            @input="onSearchInput"
+            @keydown.esc.stop.prevent="closeSearch"
+          />
+        </div>
+        <button
+          type="button"
+          class="fe-btn fe-btn--icon-only"
+          :title="t('toolbar.search.close')"
+          :aria-label="t('toolbar.search.close')"
+          @click="closeSearch"
+        >
+          <span class="fe-icon">✕</span>
+        </button>
+      </template>
+      <template v-else>
+        <button
+          v-if="canGoUp"
+          type="button"
+          class="fe-btn fe-btn--icon-only"
+          :title="t('toolbar.go_up')"
+          :aria-label="t('toolbar.go_up')"
+          @click="emit('go-up')"
+        >
+          <span class="fe-icon">↑</span>
+        </button>
+        <div class="fe-toolbar__spacer" />
+        <button
+          type="button"
+          class="fe-btn fe-btn--icon-only fe-toolbar__search-toggle"
+          :class="{ 'is-active': !!localSearch }"
+          :title="t('toolbar.search')"
+          :aria-label="t('toolbar.search')"
+          @click="openSearch"
+        >
+          <span class="fe-icon">🔍</span>
+        </button>
+        <button
+          v-if="!atVirtualRoot && canWrite !== false"
+          type="button"
+          class="fe-btn fe-btn--icon-only"
+          :title="t('toolbar.upload')"
+          :aria-label="t('toolbar.upload')"
+          @click="emit('upload')"
+        >
+          <span class="fe-icon">⬆</span>
+        </button>
+        <button
+          ref="moreBtnEl"
+          type="button"
+          class="fe-btn fe-btn--icon-only fe-toolbar__more"
+          :title="t('toolbar.more')"
+          :aria-label="t('toolbar.more')"
+          aria-haspopup="menu"
+          @click="openMore"
+        >
+          <span class="fe-icon">⋯</span>
+        </button>
+      </template>
+      <ContextMenu
+        ref="moreRef"
+        :locale="locale"
+        :theme="theme || 'auto'"
+        :sheet="coarse"
+        :actions="moreActions"
+        @select="onMoreSelect"
+      />
+    </template>
   </div>
 </template>

package/src/composables/useFileApi.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -187,4 +187,18 @@ 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',
+  /* === bag:b4 === */
+  'toolbar.more': 'More actions',
+  'toolbar.search.close': 'Close search',
+  'sheet.menu': 'Actions',
+  'sheet.close': 'Close',
 };

package/src/locales/tr.ts CHANGED Viewed

@@ -187,4 +187,18 @@ 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',
+  /* === bag:b4 === */
+  'toolbar.more': 'Diğer işlemler',
+  'toolbar.search.close': 'Aramayı kapat',
+  'sheet.menu': 'İşlemler',
+  'sheet.close': 'Kapat',
 };

package/src/styles/base.css CHANGED Viewed

@@ -1830,3 +1830,241 @@ 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%;
+}
+/* === bag:b4 — narrow/embed mini mode === */
+/* Everything below is scoped to `.fe--narrow`, `.fe-toolbar--narrow`,
+ * `.fe-fab` or `.fe-sheet` — none of which exist in the wide desktop
+ * layout, so the classic look is untouched when the mode is off. */
+/* Narrow toolbar: a single non-wrapping row of icon buttons. */
+.fe-toolbar--narrow {
+  flex-wrap: nowrap;
+  gap: 6px;
+}
+.fe-toolbar--narrow .fe-btn.is-active {
+  background: var(--fe-bg-selected);
+}
+/* Expanded search: the input takes the whole row. */
+.fe-toolbar--narrow .fe-search--full {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fe-toolbar--narrow .fe-search--full .fe-search__input {
+  width: 100%;
+  min-width: 0;
+}
+/* Upload FAB — bottom-right corner of the explorer (narrow mode only). */
+.fe-fab {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  width: 56px;
+  height: 56px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--fe-primary);
+  color: var(--fe-text-on-primary);
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--fe-shadow);
+  cursor: pointer;
+  z-index: 45;
+  transition: background 0.15s, transform 0.15s;
+}
+.fe-fab:hover {
+  background: var(--fe-primary-hover);
+}
+.fe-fab:active {
+  transform: scale(0.94);
+}
+.fe-fab:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 3px;
+}
+/* Keep the corner trays clear of the FAB while narrow. */
+.fe--narrow .fe-upload,
+.fe--narrow .fe-ops {
+  bottom: 84px;
+}
+/* Bottom sheet (ContextMenu sheet variant, coarse-pointer devices). */
+.fe-ctx-backdrop--sheet {
+  background: rgba(13, 19, 27, 0.42);
+}
+.fe-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  border: 1px solid var(--fe-border);
+  border-bottom: 0;
+  border-top-left-radius: var(--fe-radius-lg);
+  border-top-right-radius: var(--fe-radius-lg);
+  box-shadow: 0 -10px 32px rgba(15, 23, 42, 0.28);
+  padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
+  outline: none;
+  z-index: 90;
+}
+.fe-sheet__handle {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 0 8px;
+  cursor: grab;
+  touch-action: none;
+}
+.fe-sheet__handle::before {
+  content: '';
+  width: 40px;
+  height: 4px;
+  border-radius: 99px;
+  background: var(--fe-border-strong);
+}
+.fe-sheet__items {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+/* Big touch targets (≥44px) on sheet entries. */
+.fe-sheet__item {
+  min-height: 44px;
+  padding: 10px 14px;
+  font-size: 15px;
+  gap: 12px;
+}
+/* Sheet transitions: backdrop fades, panel slides up from the bottom. */
+.fe-sheet-enter-active,
+.fe-sheet-leave-active {
+  transition: opacity 0.18s ease;
+}
+.fe-sheet-enter-active .fe-sheet,
+.fe-sheet-leave-active .fe-sheet {
+  transition: transform 0.22s ease;
+}
+.fe-sheet-enter-from,
+.fe-sheet-leave-to {
+  opacity: 0;
+}
+.fe-sheet-enter-from .fe-sheet,
+.fe-sheet-leave-to .fe-sheet {
+  transform: translateY(100%);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fe-sheet-enter-active,
+  .fe-sheet-leave-active,
+  .fe-sheet-enter-active .fe-sheet,
+  .fe-sheet-leave-active .fe-sheet,
+  .fe-fab {
+    transition: none;
+  }
+}