@brftech/filex-core 0.28.0 → 0.30.0

package/src/components/Toolbar.vue

@@ -73,6 +73,23 @@ const props = defineProps<{
   theme?: ThemeMode;
   /* koru:k1 — inspector (details panel) toggle state, for the pressed style. */
   inspectorOpen?: boolean;
+  /**
+   * gezinti:g1 — navigation panel state, for the pressed style on the toggle.
+   * The panel has its own collapse control, but a narrow explorer renders it
+   * as a drawer that is off screen when closed, so the only way back to it is
+   * from here.
+   */
+  navOpen?: boolean;
+  /** gezinti:g1 — false when the deployment has no navigation panel; the
+   *  toggle then has nothing to toggle and is not rendered. */
+  navEnabled?: boolean;
+  /**
+   * gezinti:g1 — view modes to offer. Absent = all three (the historical
+   * behaviour). `ExplorerConfig.uiProfile: 'simple'` narrows it to list+grid:
+   * a four-way switcher is one of the things the reporter in #14 named as
+   * "power user tool", and gallery is the one nobody outside photos asks for.
+   */
+  viewModes?: ViewMode[];
 }>();
 
 const emit = defineEmits<{
@@ -86,6 +103,7 @@ const emit = defineEmits<{
   (e: 'open-recents'): void;
   (e: 'update:density', v: Density): void;
   (e: 'toggle-inspector'): void /* koru:k1 */;
+  (e: 'toggle-nav'): void /* gezinti:g1 */;
   (e: 'open-theme'): void /* wiring:c1 — tema galerisi */;
   (e: 'open-shortcut-settings'): void /* wiring:c2 */;
 }>();
@@ -270,6 +288,12 @@ 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).
+/* gezinti:g1 — is this view mode on offer? No prop = all of them, so every
+   embedder that predates uiProfile keeps the switcher it had. */
+function offersView(v: ViewMode): boolean {
+  return !props.viewModes || props.viewModes.includes(v);
+}
+
 const moreActions = computed<ContextAction[]>(() => {
   const list: ContextAction[] = [];
   const writable =
@@ -291,10 +315,15 @@ const moreActions = computed<ContextAction[]>(() => {
   });
   /* wiring:d2 — dar mod ⋯ menüsü: aktif olmayan İKİ görünüm de listelenir
      (list/grid/gallery); eski tekli toggle üç modda eksik kalıyordu. */
-  if (props.viewMode !== 'list') list.push({ key: 'view-list', label: t('toolbar.view.list'), icon: '☰' });
-  if (props.viewMode !== 'grid') list.push({ key: 'view-grid', label: t('toolbar.view.grid'), icon: '▦' });
-  if (props.viewMode !== 'gallery') list.push({ key: 'view-gallery', label: t('toolbar.view.gallery'), icon: '▣' });
+  if (props.viewMode !== 'list' && offersView('list')) list.push({ key: 'view-list', label: t('toolbar.view.list'), icon: '☰' });
+  if (props.viewMode !== 'grid' && offersView('grid')) list.push({ key: 'view-grid', label: t('toolbar.view.grid'), icon: '▦' });
+  if (props.viewMode !== 'gallery' && offersView('gallery')) list.push({ key: 'view-gallery', label: t('toolbar.view.gallery'), icon: '▣' });
   /* /wiring:d2 */
+  /* gezinti:g1 — reachable from the overflow menu too, because the toolbar's
+     own toggle is hidden while the narrow search field is expanded. */
+  if (props.navEnabled !== false) {
+    list.push({ key: 'nav', label: t('toolbar.nav'), icon: '☰' });
+  }
   /* koru:k1 — inspector toggle also reachable from the narrow overflow menu */
   list.push({ key: 'inspector', label: t('toolbar.inspector'), icon: 'ℹ' });
   /* wiring:c1 — tema galerisi de dar modda ⋯ menüsünden açılır */
@@ -332,6 +361,9 @@ function onMoreSelect(a: ContextAction) {
     case 'inspector' /* koru:k1 */:
       emit('toggle-inspector');
       break;
+    case 'nav' /* gezinti:g1 */:
+      emit('toggle-nav');
+      break;
     case 'theme' /* wiring:c1 */:
       emit('open-theme');
       break;
@@ -360,6 +392,36 @@ function onMoreSelect(a: ContextAction) {
     <!-- bag:b4 — wide layout, untouched; renders exactly as before when not narrow -->
     <template v-if="!narrow">
     <div ref="primaryEl" class="fe-toolbar__primary">
+      <!-- gezinti:g1 — navigation panel toggle. Leftmost, the position every
+           Drive-shaped UI puts it in; the panel's own header carries the same
+           action, and in narrow mode where the panel is an off-screen drawer
+           this is the ONLY way back to it. -->
+      <button
+        v-if="navEnabled !== false"
+        type="button"
+        class="fe-btn fe-btn--icon-only fe-toolbar__nav"
+        :class="{ 'is-active': navOpen }"
+        :aria-pressed="!!navOpen"
+        :title="t('toolbar.nav')"
+        :aria-label="t('toolbar.nav')"
+        data-testid="toolbar-nav"
+        @click="emit('toggle-nav')"
+      >
+        <svg
+          class="fe-ficon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <rect x="3.5" y="4.5" width="17" height="15" rx="2" />
+          <path d="M9.5 4.5v15" />
+        </svg>
+      </button>
+
       <button
         v-if="canGoUp"
         type="button"
@@ -567,6 +629,7 @@ function onMoreSelect(a: ContextAction) {
     <div class="fe-toolbar__view" role="tablist" :aria-label="t('toolbar.view_label') /* wiring:c4 — was hardcoded EN */">
       <button
         type="button"
+        v-if="offersView('list')"
         class="fe-btn fe-btn--icon-only"
         :class="{ 'is-active': viewMode === 'list' }"
         role="tab"
@@ -579,6 +642,7 @@ function onMoreSelect(a: ContextAction) {
       </button>
       <button
         type="button"
+        v-if="offersView('grid')"
         class="fe-btn fe-btn--icon-only"
         :class="{ 'is-active': viewMode === 'grid' }"
         role="tab"
@@ -592,6 +656,7 @@ function onMoreSelect(a: ContextAction) {
       <!-- wiring:d2 — üçüncü görünüm: galeri -->
       <button
         type="button"
+        v-if="offersView('gallery')"
         class="fe-btn fe-btn--icon-only"
         :class="{ 'is-active': viewMode === 'gallery' }"
         role="tab"
@@ -632,6 +697,36 @@ function onMoreSelect(a: ContextAction) {
         </button>
       </template>
       <template v-else>
+        <!-- gezinti:g1 — navigation panel toggle. Leftmost, the position every
+             Drive-shaped UI puts it in; the panel's own header carries the same
+             action, and in narrow mode where the panel is an off-screen drawer
+             this is the ONLY way back to it. -->
+        <button
+          v-if="navEnabled !== false"
+          type="button"
+          class="fe-btn fe-btn--icon-only fe-toolbar__nav"
+          :class="{ 'is-active': navOpen }"
+          :aria-pressed="!!navOpen"
+          :title="t('toolbar.nav')"
+          :aria-label="t('toolbar.nav')"
+          data-testid="toolbar-nav"
+          @click="emit('toggle-nav')"
+        >
+          <svg
+            class="fe-ficon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            stroke-linecap="round"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <rect x="3.5" y="4.5" width="17" height="15" rx="2" />
+          <path d="M9.5 4.5v15" />
+          </svg>
+        </button>
+
         <button
           v-if="canGoUp"
           type="button"

package/src/lib/listing.ts

@@ -19,14 +19,22 @@ export function stripAdapter(p: string): string {
 
 /**
  * Hide system/internal entries the user must never see as files:
- * thumbnails, version history, the soft-delete store, keepdir markers
- * and the E2E marker. Shared by both panes' listing filters.
+ * thumbnails, version history, the soft-delete store, keepdir markers,
+ * the desktop app's open-with scratch area and the E2E marker. Shared by
+ * both panes' listing filters.
  */
 export function filterInternalEntries(files: FileNode[]): FileNode[] {
   return (files || []).filter((f) => {
     if (f.path.includes('.thumbs')) return false;
     if (f.path.includes('.versions') || f.basename === '.versions') return false;
     if (f.basename === '.trash') return false;
+    // The desktop app's "open this document with filex" scratch area. Real
+    // files live in it for the length of one editing session, but they are the
+    // app's plumbing, not the user's documents -- and a user who has switched
+    // hidden files on is asking to see their OWN dotfiles, not ours. Hidden
+    // absolutely, like .filex-trash and .versions; stale copies are swept by
+    // the desktop app itself, not by hand.
+    if (f.basename === '.filex-open') return false;
     if (f.basename === '.keepdir') return false;
     if (f.basename === E2E_MARKER_NAME) return false;
     return true;

package/src/locales/en.ts

@@ -3,7 +3,7 @@ export const en: Record<string, string> = {
   'toolbar.new_folder': 'New Folder',
   'toolbar.upload': 'Upload',
   'toolbar.search': 'Search',
-  'toolbar.search.placeholder': 'File name…',
+  'toolbar.search.placeholder': 'Search by name or tag:…',
   'toolbar.view.list': 'List',
   'toolbar.view.grid': 'Grid',
   'toolbar.refresh': 'Refresh',
@@ -342,7 +342,7 @@ export const en: Record<string, string> = {
     'Pick files with this button — or simply drag & drop them anywhere in the window.',
   'tour.step.search.title': 'Search',
   'tour.step.search.desc':
-    'This box filters the current folder. The Ctrl+K command palette searches across all storages and runs commands.',
+    'This box searches the whole storage by name — separators and one typo are forgiven, so "invoice 2026" finds invoice_2026.pdf. Add tag:invoice to filter by tag. The Ctrl+K command palette also runs commands.',
   'tour.step.view.title': 'Switch views',
   'tour.step.view.desc':
     'Toggle between the list and grid layout; your choice is remembered.',
@@ -840,4 +840,38 @@ export const en: Record<string, string> = {
   'storages.fields.url': 'Base URL',
   'storages.fields.user': 'User',
 
+
+  /* === gezinti:g1 — navigation panel (SideNav) === */
+  'sidenav.title': 'Navigation',
+  'sidenav.views': 'Views',
+  'sidenav.storages': 'Storages',
+  'sidenav.recent': 'Recent',
+  'sidenav.starred': 'Starred',
+  'sidenav.shared': 'Shared with me',
+  'sidenav.trash': 'Trash',
+  'sidenav.collapse': 'Collapse navigation',
+  'sidenav.expand': 'Expand navigation',
+  'sidenav.close': 'Close navigation',
+  'sidenav.storage.shared': 'Shared',
+  'toolbar.nav': 'Navigation',
+  'node.recent': 'Recent',
+  'node.starred': 'Starred',
+  'node.shared': 'Shared with me',
+  'empty.recent.title': 'Nothing opened yet',
+  'empty.recent.hint': 'Files you open show up here',
+  'empty.starred.title': 'Nothing starred yet',
+  'empty.starred.hint': 'Star a file to find it here',
+  'empty.shared.title': 'Nothing has been shared with you',
+  'empty.shared.hint': 'Folders and files other people share appear here',
+  'sidenav.connections': 'Connections',
+  'sidenav.connect': 'How to connect',
+  'sidenav.apikeys': 'API keys',
+  'overlay.close': 'Close',
+  'conn.tokens.scopes': 'Permissions',
+  'conn.tokens.root': 'Limit to one folder (optional)',
+  'conn.tokens.rootPlaceholder': 'storage://folder',
+  'conn.tokens.expiry': 'Expires in (days)',
+  'conn.tokens.expiryNever': 'never',
+  'conn.tokens.capNote': 'Your account and its permissions are the ceiling — asking for more than you have is refused, not granted.',
+  /* === /gezinti:g1 === */
 };

package/src/locales/tr.ts

@@ -3,7 +3,7 @@ export const tr: Record<string, string> = {
   'toolbar.new_folder': 'Yeni Klasör',
   'toolbar.upload': 'Yükle',
   'toolbar.search': 'Ara',
-  'toolbar.search.placeholder': 'Dosya adı…',
+  'toolbar.search.placeholder': 'Ada ya da tag: ile ara…',
   'toolbar.view.list': 'Liste',
   'toolbar.view.grid': 'Izgara',
   'toolbar.refresh': 'Yenile',
@@ -342,7 +342,7 @@ export const tr: Record<string, string> = {
     'Bu düğmeyle dosya seçebilirsin; dosyaları doğrudan pencereye sürükleyip bırakmak da çalışır.',
   'tour.step.search.title': 'Arama',
   'tour.step.search.desc':
-    'Bu kutu bulunduğun klasörü filtreler. Ctrl+K komut paleti ile tüm depolarda arama yapabilir ve komut çalıştırabilirsin.',
+    'Bu kutu deponun tamamında ada göre arar; ayraçları ve bir harflik yazım hatasını affeder, yani "fatura 2026" yazdığında fatura_2026.pdf gelir. tag:fatura yazarak etikete göre süzebilirsin. Ctrl+K komut paleti ayrıca komut da çalıştırır.',
   'tour.step.view.title': 'Görünümü değiştir',
   'tour.step.view.desc':
     'Liste ve ızgara görünümü arasında geçiş yapabilirsin; seçimin hatırlanır.',
@@ -843,4 +843,38 @@ export const tr: Record<string, string> = {
   'storages.fields.url': 'Temel URL',
   'storages.fields.user': 'Kullanıcı',
 
+
+  /* === gezinti:g1 — gezinti paneli (SideNav) === */
+  'sidenav.title': 'Gezinti',
+  'sidenav.views': 'Görünümler',
+  'sidenav.storages': 'Depolar',
+  'sidenav.recent': 'Son kullanılanlar',
+  'sidenav.starred': 'Yıldızlılar',
+  'sidenav.shared': 'Benimle paylaşılanlar',
+  'sidenav.trash': 'Çöp Kutusu',
+  'sidenav.collapse': 'Gezintiyi daralt',
+  'sidenav.expand': 'Gezintiyi genişlet',
+  'sidenav.close': 'Gezintiyi kapat',
+  'sidenav.storage.shared': 'Paylaşılan',
+  'toolbar.nav': 'Gezinti',
+  'node.recent': 'Son kullanılanlar',
+  'node.starred': 'Yıldızlılar',
+  'node.shared': 'Benimle paylaşılanlar',
+  'empty.recent.title': 'Henüz hiçbir şey açılmadı',
+  'empty.recent.hint': 'Açtığın dosyalar burada görünür',
+  'empty.starred.title': 'Henüz yıldızlı dosya yok',
+  'empty.starred.hint': 'Bir dosyayı yıldızla, burada bulasın',
+  'empty.shared.title': 'Seninle henüz bir şey paylaşılmadı',
+  'empty.shared.hint': 'Başkalarının paylaştığı klasör ve dosyalar burada görünür',
+  'sidenav.connections': 'Bağlantılar',
+  'sidenav.connect': 'Nasıl bağlanılır',
+  'sidenav.apikeys': 'API anahtarları',
+  'overlay.close': 'Kapat',
+  'conn.tokens.scopes': 'İzinler',
+  'conn.tokens.root': 'Tek bir klasörle sınırla (isteğe bağlı)',
+  'conn.tokens.rootPlaceholder': 'depo://klasör',
+  'conn.tokens.expiry': 'Geçerlilik (gün)',
+  'conn.tokens.expiryNever': 'süresiz',
+  'conn.tokens.capNote': 'Tavan hesabın ve yetkilerin — sahip olduğundan fazlasını istemek reddedilir, verilmez.',
+  /* === /gezinti:g1 === */
 };

package/src/styles/base.css

@@ -4010,3 +4010,363 @@ filex-explorer {
   background: var(--fe-primary);
   transition: width 0.3s ease;
 }
+
+/* === gezinti:g1 — SideNav (navigation panel) ==========================
+   A left column inside .fe__main, the mirror of .fe-inspector on the right:
+   same flex slot, same overlay trick when the explorer is narrow. .fe__primary
+   already carries `flex: 1 1 auto; min-width: 0`, so it absorbs the width
+   change with no rule of its own. */
+.fe-sidenav {
+  flex: 0 0 232px;
+  width: 232px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--fe-border);
+  /* No `background: var(--fe-bg)` here on purpose — see .fe-conn. This one IS
+     inside the full-screen explorer, whose root already paints --fe-bg, so a
+     second identical fill would only be a second chance to disagree with it. */
+  color: var(--fe-text);
+  transition: flex-basis 0.14s ease, width 0.14s ease;
+}
+/* Collapsed: an icon rail, not nothing. A panel that disappears takes its own
+   re-open affordance with it. Width is one 32px control plus its padding. */
+.fe-sidenav--rail {
+  flex: 0 0 56px;
+  width: 56px;
+}
+.fe-sidenav__head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  /* Same height as .fe-breadcrumb (37px) so the panel head and the crumb bar
+     sit on one line across the top of .fe__main. */
+  min-height: 37px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--fe-border);
+}
+.fe-sidenav--rail .fe-sidenav__head {
+  justify-content: center;
+  padding: 4px;
+}
+.fe-sidenav__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--fe-radius-sm);
+  background: transparent;
+  color: var(--fe-text-muted);
+  font: inherit;
+  font-size: 17px;
+  cursor: pointer;
+}
+.fe-sidenav__toggle:hover {
+  background: var(--fe-bg-hover);
+  color: var(--fe-text);
+}
+.fe-sidenav__toggle:focus-visible,
+.fe-sidenav__item:focus-visible,
+.fe-sidenav__upload:focus-visible,
+.fe-sidenav__secondary:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 1px;
+}
+
+/* Primary action block. */
+.fe-sidenav__primary {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 10px 6px;
+}
+.fe-sidenav--rail .fe-sidenav__primary {
+  padding: 10px 8px 6px;
+  align-items: center;
+}
+.fe-sidenav__upload,
+.fe-sidenav__secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 12px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font: inherit;
+  font-size: 13.5px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.fe-sidenav__upload {
+  background: var(--fe-primary);
+  border-color: var(--fe-primary);
+  color: var(--fe-text-on-primary);
+  font-weight: 600;
+  box-shadow: var(--fe-shadow-sm);
+}
+.fe-sidenav__upload:hover:not(:disabled) {
+  background: var(--fe-primary-hover);
+  border-color: var(--fe-primary-hover);
+}
+.fe-sidenav__secondary {
+  background: transparent;
+  border-color: var(--fe-border);
+  color: var(--fe-text);
+}
+.fe-sidenav__secondary:hover:not(:disabled) {
+  background: var(--fe-bg-hover);
+  border-color: var(--fe-border-strong);
+}
+.fe-sidenav__upload:disabled,
+.fe-sidenav__secondary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.fe-sidenav__upload .fe-ficon,
+.fe-sidenav__secondary .fe-ficon,
+.fe-sidenav__item .fe-ficon {
+  font-size: 17px;
+}
+/* On the rail the two buttons become squares — a pill with no label reads as
+   a stretched blob. */
+.fe-sidenav--rail .fe-sidenav__upload,
+.fe-sidenav--rail .fe-sidenav__secondary {
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  justify-content: center;
+  border-radius: var(--fe-radius-md);
+}
+
+.fe-sidenav__scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 8px 10px;
+}
+.fe-sidenav__group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.fe-sidenav__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 10px;
+  margin: 1px 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--fe-text);
+  font: inherit;
+  font-size: 13.5px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.fe-sidenav__item:hover {
+  background: var(--fe-bg-hover);
+}
+.fe-sidenav__item.is-active {
+  background: var(--fe-bg-selected);
+  font-weight: 600;
+}
+.fe-sidenav--rail .fe-sidenav__item {
+  justify-content: center;
+  padding: 8px 0;
+  border-radius: var(--fe-radius-md);
+}
+.fe-sidenav__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fe-sidenav__section {
+  margin-top: 10px;
+}
+.fe-sidenav__heading {
+  margin: 4px 0 2px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--fe-text-muted);
+}
+.fe-sidenav__rule {
+  margin: 8px 6px;
+  border: 0;
+  border-top: 1px solid var(--fe-border);
+}
+/* "Shared" marker on a storage the caller only reaches through a grant. */
+.fe-sidenav__tag {
+  margin-left: auto;
+  flex: 0 0 auto;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--fe-primary) 16%, transparent);
+  color: var(--fe-primary);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+/* Narrow (<560px): a drawer over the listing, never a column. At 390px a
+   232px column leaves 158px for the files, and a 56px rail still takes an
+   eighth of the screen from a listing that is already tight. */
+.fe-sidenav--drawer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: min(280px, 84%);
+  flex: none;
+  /* Same layer as .fe-inspector--overlay: above the listing and the FAB (45),
+     below the context menus (90) and the onboarding tour (96), which are
+     appended to <body> and would paint over anything lower anyway. */
+  z-index: 60;
+  background: var(--fe-bg);
+  border-right: 1px solid var(--fe-border);
+  box-shadow: var(--fe-shadow);
+}
+.fe-sidenav__scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 59;
+  border: 0;
+  padding: 0;
+  background: rgba(13, 19, 27, 0.42);
+  cursor: pointer;
+}
+/* === /gezinti:g1 === */
+
+/* --- gezinti:g1 — the panel's Connections / API-keys overlay --- */
+/* ⚠ z-index 130. The explorer's onboarding tour (96) and its teleported menus
+   (90) are appended to <body> and are `fixed`, so they paint over anything in
+   the normal stacking order — measured in the web app, where the tour card
+   landed on top of this very surface and swallowed its clicks; that page went
+   to z-[120] for the same reason and this has to clear it. */
+.fe-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 32px 16px;
+  overflow: auto;
+  background: rgba(13, 19, 27, 0.45);
+}
+.fe-overlay__card {
+  width: min(880px, 100%);
+  max-height: calc(100vh - 64px);
+  overflow: auto;
+  padding: 18px;
+  border-radius: var(--fe-radius-lg);
+  border: 1px solid var(--fe-border);
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  box-shadow: var(--fe-shadow);
+}
+.fe-overlay__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.fe-overlay__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+.fe-overlay__close {
+  border: 0;
+  background: transparent;
+  color: var(--fe-text-muted);
+  font-size: 20px;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: var(--fe-radius-sm);
+  cursor: pointer;
+}
+.fe-overlay__close:hover {
+  background: var(--fe-bg-hover);
+  color: var(--fe-text);
+}
+.fe-overlay__close:focus-visible {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: 1px;
+}
+@media (max-width: 560px) {
+  .fe-overlay {
+    padding: 12px 8px;
+  }
+  .fe-overlay__card {
+    padding: 12px;
+    max-height: calc(100vh - 24px);
+  }
+}
+
+/* The full API-key form (TokensPanel `full`). */
+.fe-tokform {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 8px 0 4px;
+}
+.fe-tokform__scopes {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--fe-border);
+  border-radius: var(--fe-radius-sm);
+}
+.fe-tokform__legend {
+  padding: 0 4px;
+  font-size: 12px;
+  color: var(--fe-text-muted);
+}
+.fe-tokform__scope {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+  font-family: var(--fe-font-mono);
+  cursor: pointer;
+}
+.fe-tokform__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.fe-tokform__field--narrow {
+  flex: 0 0 180px;
+}
+.fe-tokform__label {
+  font-size: 12px;
+  color: var(--fe-text-muted);
+}
+.fe-tokform__row {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.fe-tokform__row .fe-s3keys__btn {
+  margin-left: auto;
+}
+/* --- /gezinti:g1 --- */