@brftech/filex-core 0.39.0 → 0.40.0

package/src/composables/useKeyboardShortcuts.ts

@@ -47,6 +47,22 @@ export interface ShortcutHandlers {
   onTabNext?: () => void; // Ctrl+Tab
   onTabPrev?: () => void; // Ctrl+Shift+Tab
   /* /wiring:d1 */
+  /* tus:t1 — the verbs that were only ever reachable from the menus. Every
+   * one of them is remappable like the rest; the ones that ship unbound are
+   * there so the user can give them a key, not because they do less. */
+  onNewFolder?: () => void; // Shift+N
+  onUpload?: () => void; // U
+  onRefresh?: () => void; // R
+  onDownload?: () => void; // D
+  onPreview?: () => void; // P
+  onShare?: () => void; // Shift+S
+  onTags?: () => void; // T
+  onConvert?: () => void; // (unbound)
+  onOpenTab?: () => void; // (unbound)
+  onCopyPath?: () => void; // (unbound)
+  onCopyId?: () => void; // (unbound)
+  onRestore?: () => void; // (unbound)
+  /* /tus:t1 */
   hasSelection?: () => boolean; // disambiguates Backspace
 }
 
@@ -77,6 +93,33 @@ export interface ShortcutActionDef {
   inForms?: boolean;
 }
 
+/**
+ * Combos the BROWSER takes before the page sees them. `preventDefault()`
+ * cannot stop these in an ordinary tab — Chrome and Firefox handle them at
+ * the window level — so an action bound to one of them only ever fires in
+ * the desktop app, an installed PWA or a kiosk window.
+ *
+ * They are not forbidden as DEFAULTS (the tab actions have shipped on
+ * Ctrl+T/W/Tab since wiring:d1 and work in the desktop app), but the
+ * settings modal refuses to let a user assign one: choosing a key that
+ * silently does nothing where you are standing is not a choice, it is a
+ * trap. `isReservedCombo` is the one place that list lives.
+ */
+const RESERVED_COMBOS = new Set([
+  'Ctrl+N', 'Ctrl+Shift+N',
+  'Ctrl+T', 'Ctrl+Shift+T',
+  'Ctrl+W', 'Ctrl+Shift+W',
+  'Ctrl+Tab', 'Ctrl+Shift+Tab',
+  'Ctrl+Q',
+  'Ctrl+Shift+I', 'Ctrl+Shift+J', 'Ctrl+Shift+C',
+  'F11', 'F12',
+]);
+
+/** Does the browser eat this combo before the page can see it? */
+export function isReservedCombo(combo: string): boolean {
+  return RESERVED_COMBOS.has(combo);
+}
+
 /** Registry order = help/settings display order. */
 export const SHORTCUT_ACTIONS: ShortcutActionDef[] = [
   // Navigation
@@ -109,6 +152,25 @@ export const SHORTCUT_ACTIONS: ShortcutActionDef[] = [
   { id: 'tab-next', defaultCombo: 'Ctrl+Tab', labelKey: 'shortcuts.tab_next', groupKey: 'shortcuts.group.tabs' },
   { id: 'tab-prev', defaultCombo: 'Ctrl+Shift+Tab', labelKey: 'shortcuts.tab_prev', groupKey: 'shortcuts.group.tabs' },
   /* /wiring:d1 */
+  /* tus:t1 — the rest of the menu verbs. Until now these were reachable only
+   * by right-clicking, and the right-click menu named no keys at all, so 16 of
+   * the registry's actions were invisible unless somebody opened the `?` sheet
+   * on their own. The ones with no default are deliberate: they are rare
+   * enough that taking a key from the user by default is the wrong trade, and
+   * they are in the registry so the user can take one. */
+  { id: 'new-folder', defaultCombo: 'Shift+N', labelKey: 'shortcuts.new_folder', groupKey: 'shortcuts.group.file' },
+  { id: 'upload', defaultCombo: 'U', labelKey: 'shortcuts.upload', groupKey: 'shortcuts.group.file' },
+  { id: 'refresh', defaultCombo: 'R', labelKey: 'shortcuts.refresh', groupKey: 'shortcuts.group.nav' },
+  { id: 'download', defaultCombo: 'D', labelKey: 'shortcuts.download', groupKey: 'shortcuts.group.file' },
+  { id: 'preview', defaultCombo: 'P', labelKey: 'shortcuts.preview', groupKey: 'shortcuts.group.nav' },
+  { id: 'share', defaultCombo: 'Shift+S', labelKey: 'shortcuts.share', groupKey: 'shortcuts.group.file' },
+  { id: 'tags', defaultCombo: 'T', labelKey: 'shortcuts.tags', groupKey: 'shortcuts.group.file' },
+  { id: 'convert', defaultCombo: '', labelKey: 'shortcuts.convert', groupKey: 'shortcuts.group.file' },
+  { id: 'open-tab', defaultCombo: '', labelKey: 'shortcuts.open_tab', groupKey: 'shortcuts.group.tabs' },
+  { id: 'copy-path', defaultCombo: '', labelKey: 'shortcuts.copy_path', groupKey: 'shortcuts.group.file' },
+  { id: 'copy-id', defaultCombo: '', labelKey: 'shortcuts.copy_id', groupKey: 'shortcuts.group.file' },
+  { id: 'restore', defaultCombo: '', labelKey: 'shortcuts.restore', groupKey: 'shortcuts.group.file' },
+  /* /tus:t1 */
 ];
 
 /** action id → ShortcutHandlers callback name. */
@@ -134,6 +196,19 @@ const HANDLER_KEY: Record<string, keyof ShortcutHandlers> = {
   'tab-close': 'onTabClose',
   'tab-next': 'onTabNext',
   'tab-prev': 'onTabPrev',
+  /* tus:t1 */
+  'new-folder': 'onNewFolder',
+  upload: 'onUpload',
+  refresh: 'onRefresh',
+  download: 'onDownload',
+  preview: 'onPreview',
+  share: 'onShare',
+  tags: 'onTags',
+  convert: 'onConvert',
+  'open-tab': 'onOpenTab',
+  'copy-path': 'onCopyPath',
+  'copy-id': 'onCopyId',
+  restore: 'onRestore',
 };
 
 // --------------------------------------------------------------------
@@ -314,6 +389,106 @@ export function useShortcutList(): ComputedRef<ShortcutView[]> {
   );
 }
 
+// --------------------------------------------------------------------
+// Hint surfaces
+// --------------------------------------------------------------------
+
+/**
+ * Is this a Mac-style keyboard? Only affects how a combo is PRINTED —
+ * the canonical form folds Meta into Ctrl, so one saved combo works on
+ * every platform and only the label differs.
+ */
+export function isMacLike(): boolean {
+  return (
+    typeof navigator !== 'undefined' &&
+    /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent || '')
+  );
+}
+
+/** Canonical combo → what a human should see. '' stays ''. */
+export function comboLabel(combo: string): string {
+  if (!combo) return '';
+  return isMacLike() ? combo.replace(/\bCtrl\b/g, '⌘') : combo;
+}
+
+/**
+ * Menu action key → registry action id.
+ *
+ * The right-click menu, the toolbar and the keyboard all name the same verbs,
+ * but the menu's `key` and the registry's `id` are separate vocabularies and
+ * two of them genuinely differ (`access` is the share dialog, `details` is the
+ * inspector). One map, in one place: a second copy is a second chance to
+ * forget, and the symptom would be a menu row that silently stops naming its
+ * key while every other row keeps working.
+ */
+export const MENU_ACTION_SHORTCUTS: Record<string, string> = {
+  open: 'open',
+  'open-tab': 'open-tab',
+  preview: 'preview',
+  download: 'download',
+  convert: 'convert',
+  access: 'share',
+  details: 'inspector',
+  'copy-id': 'copy-id',
+  'copy-path': 'copy-path',
+  rename: 'rename',
+  cut: 'cut',
+  copy: 'copy',
+  paste: 'paste',
+  star: 'star',
+  tags: 'tags',
+  delete: 'delete',
+  restore: 'restore',
+  'new-folder': 'new-folder',
+  'toggle-hidden': 'toggle-hidden',
+  upload: 'upload',
+  refresh: 'refresh',
+};
+
+/**
+ * What a menu row or a toolbar button should print beside its label: the
+ * current combo for the verb it triggers, or '' when it has none (unbound, or
+ * not a registry action at all — `keep-local`, the E2E entries and so on).
+ */
+export function menuShortcutHint(menuKey: string): string {
+  /* Fall back to the key itself: the toolbar's own buttons (go-up, upload,
+   * refresh…) pass a registry id directly, and an id nothing knows returns ''
+   * rather than throwing. */
+  const id = MENU_ACTION_SHORTCUTS[menuKey] ?? menuKey;
+  return SHORTCUT_ACTIONS.some((a) => a.id === id) ? shortcutHint(id) : '';
+}
+
+/**
+ * The one way a hint may name a key.
+ *
+ * ⚠ Never write a key into a hint by hand — not in a template, not in a
+ * locale string. Every combo in this registry is remappable, so a
+ * hardcoded "Ctrl+K" is true only until someone opens the shortcut
+ * settings, and then it is a label that tells the user to press a key
+ * that does nothing. Call this instead and interpolate the result;
+ * `web/tests/ui/shortcutHints.test.ts` fails the build on a literal.
+ *
+ * Returns '' when the action is unbound, so a caller can drop the whole
+ * segment rather than print an empty key cap.
+ */
+export function shortcutHint(id: string): string {
+  return comboLabel(effectiveCombo(id));
+}
+
+/**
+ * Does this event fire the given registry action? For overlays that
+ * handle their own keys (the quick-look peek) rather than going through
+ * the global binder — without this they keep answering to the DEFAULT
+ * key after the user has remapped the action.
+ */
+export function eventMatchesShortcut(e: KeyboardEvent, id: string): boolean {
+  const combo = effectiveCombo(id);
+  if (!combo) return false;
+  const fired = comboFromEvent(e);
+  if (fired === combo) return true;
+  return defOf(id)?.fixedCombos?.includes(fired ?? '') ?? false;
+}
+
 /**
  * @deprecated Legacy static cheat-sheet shape (pre-registry). Kept for
  * API compatibility; use `useShortcutList()` for the live, remap-aware

package/src/index.ts

@@ -139,6 +139,18 @@ export {
   resetAllShortcuts,
   findShortcutConflict,
   comboFromEvent,
+  /* Hint surfaces: the only sanctioned way to NAME a key on screen. A hint
+   * written by hand is true until the user remaps that action, and then the
+   * product is telling them to press something that does nothing. */
+  shortcutHint,
+  comboLabel,
+  eventMatchesShortcut,
+  isMacLike,
+  /* tus:t1 — menu/toolbar rows name their key from the same registry, and the
+   * combos a browser tab never receives are declared in one place. */
+  menuShortcutHint,
+  MENU_ACTION_SHORTCUTS,
+  isReservedCombo,
 } from './composables/useKeyboardShortcuts';
 export type {
   ShortcutActionDef,

package/src/lib/themes.ts

@@ -83,7 +83,11 @@ export const THEMES: ThemeDef[] = [
       '--fe-text': '#1a1e27',
       '--fe-text-muted': '#5a6475',
       '--fe-text-on-primary': '#ffffff',
-      '--fe-primary': '#3b82f6',
+      /* ⚠ Mirrors styles/variables.css. It drifted once: the stock primary was
+       * darkened to #2f6fe0 for WCAG AA against white text and this preview
+       * map kept the old #3b82f6, so the gallery card advertised a blue the
+       * product no longer used. */
+      '--fe-primary': '#2f6fe0',
       '--fe-primary-hover': '#2563eb',
       '--fe-danger': '#dc2626',
       '--fe-danger-hover': '#b91c1c',
@@ -97,7 +101,9 @@ export const THEMES: ThemeDef[] = [
       '--fe-border-strong': '#3a4453',
       '--fe-text': '#e5e9f0',
       '--fe-text-muted': '#8b95a7',
-      '--fe-text-on-primary': '#ffffff',
+      /* Dark ink, not white: white on #60a5fa measures 2.54 against the 4.5
+       * this file claims. Mirrors styles/variables.css. */
+      '--fe-text-on-primary': '#0f1419',
       '--fe-primary': '#60a5fa',
       '--fe-primary-hover': '#3b82f6',
       '--fe-danger': '#f87171',
@@ -355,6 +361,94 @@ export const THEMES: ThemeDef[] = [
       '--fe-font': 'ui-monospace, "SF Mono", Consolas, Menlo, monospace',
     },
   },
+  {
+    /**
+     * Drive — the palette of the end-user shell alfatm built on top of filex
+     * and put on a demo stand for review (GitHub #14). The drive profile's
+     * layout came out of their mockups; this is the colour and shape half of
+     * the same look, mapped onto our own tokens so every surface the explorer
+     * has — not just the drive shell — can wear it.
+     *
+     * Measured from their demo rather than eyeballed: 43 custom properties,
+     * of which the ones with a home here are the palette, the radii (6/8/10)
+     * and the per-file-type accents. Inter leads the font stack because that
+     * is what the demo uses; nothing is downloaded for it, so a machine
+     * without Inter installed falls back to the same system face as every
+     * other theme.
+     */
+    id: 'drive',
+    nameKey: 'theme.name.drive',
+    light: {
+      '--fe-bg': '#ffffff',
+      '--fe-bg-elev': '#f7f8fb',
+      '--fe-bg-hover': '#f3f4f6',
+      '--fe-bg-selected': '#eef3ff',
+      '--fe-border': '#e5e7eb',
+      '--fe-border-strong': '#d1d5db',
+      '--fe-text': '#1f2937',
+      '--fe-text-muted': '#6b7280',
+      '--fe-text-on-primary': '#ffffff',
+      '--fe-primary': '#2f6ceb',
+      '--fe-primary-hover': '#2559c9',
+      '--fe-danger': '#dc2626',
+      '--fe-danger-hover': '#b91c1c',
+      '--fe-font': 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+      '--fe-radius-sm': '6px',
+      '--fe-radius': '8px',
+      '--fe-radius-md': '10px',
+      '--fe-radius-lg': '12px',
+      '--fe-shadow': '0 20px 60px rgba(17, 24, 39, 0.18)',
+      '--fe-shadow-sm': '0 8px 24px rgba(17, 24, 39, 0.12)',
+      '--fe-icon-folder': '#f4b400',
+      '--fe-icon-image': '#2f6ceb',
+      '--fe-icon-video': '#7c3aed',
+      '--fe-icon-audio': '#0d9488',
+      '--fe-icon-pdf': '#dc2626',
+      '--fe-icon-doc': '#2f6ceb',
+      '--fe-icon-sheet': '#16a34a',
+      '--fe-icon-slides': '#ea580c',
+      '--fe-icon-archive': '#6b7280',
+      '--fe-icon-code': '#2f6ceb',
+      '--fe-icon-text': '#374151',
+      '--fe-icon-unknown': '#6b7280',
+    },
+    dark: {
+      '--fe-bg': '#15171c',
+      '--fe-bg-elev': '#1a1d23',
+      '--fe-bg-hover': '#1f232a',
+      '--fe-bg-selected': '#1c2740',
+      '--fe-border': '#2e333c',
+      '--fe-border-strong': '#3d444f',
+      '--fe-text': '#e6e8ec',
+      '--fe-text-muted': '#888f9b',
+      /* Dark ink on a light-blue button: white on #5b8cff measures 3.16, and
+       * the bar this file documents is 4.5. */
+      '--fe-text-on-primary': '#15171c',
+      '--fe-primary': '#5b8cff',
+      '--fe-primary-hover': '#7ba3ff',
+      '--fe-danger': '#f87171',
+      '--fe-danger-hover': '#ef4444',
+      '--fe-font': 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+      '--fe-radius-sm': '6px',
+      '--fe-radius': '8px',
+      '--fe-radius-md': '10px',
+      '--fe-radius-lg': '12px',
+      '--fe-shadow': '0 20px 60px rgba(0, 0, 0, 0.6)',
+      '--fe-shadow-sm': '0 8px 24px rgba(0, 0, 0, 0.5)',
+      '--fe-icon-folder': '#f4b400',
+      '--fe-icon-image': '#4d7ff0',
+      '--fe-icon-video': '#9061f0',
+      '--fe-icon-audio': '#2dd4bf',
+      '--fe-icon-pdf': '#e05252',
+      '--fe-icon-doc': '#4d7ff0',
+      '--fe-icon-sheet': '#2eab63',
+      '--fe-icon-slides': '#fb923c',
+      '--fe-icon-archive': '#79808d',
+      '--fe-icon-code': '#4d7ff0',
+      '--fe-icon-text': '#5b6472',
+      '--fe-icon-unknown': '#79808d',
+    },
+  },
 ];
 
 export function themeById(id: string | null | undefined): ThemeDef | undefined {

package/src/locales/en.ts

@@ -306,6 +306,7 @@ export const en: Record<string, string> = {
   'theme.name.contrast': 'High Contrast',
   'theme.name.gray': 'Soft Gray',
   'theme.name.terminal': 'Terminal Green',
+  'theme.name.drive': 'Drive',
   /* === wiring:c2 — customizable shortcuts + quick look === */
   'shortcuts.quicklook': 'Quick look',
   'shortcuts.customize': 'Customize',
@@ -366,7 +367,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 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.',
+    '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 {palette} 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.',
@@ -375,7 +376,7 @@ export const en: Record<string, string> = {
     'Right-click any file and use "Share / Permissions" to create a link with an optional PIN and expiry.',
   'tour.step.help.title': 'Shortcuts',
   'tour.step.help.desc':
-    'Press ? for the shortcut cheat-sheet and Ctrl+K for the command palette. Replay this tour any time via "Restart the tour" in the menu.',
+    'Press {help} for the shortcut cheat-sheet and {palette} for the command palette. Replay this tour any time via "Restart the tour" in the menu.',
   'error.hint': 'This may be a temporary network or server problem. Please try again.',
   'error.details': 'Technical details',
   'col.star': 'Star',
@@ -395,6 +396,24 @@ export const en: Record<string, string> = {
   'shortcuts.tab_close': 'Close tab',
   'shortcuts.tab_next': 'Next tab',
   'shortcuts.tab_prev': 'Previous tab',
+  /* tus:t1 — the menu verbs */
+  'shortcuts.new_folder': 'New folder',
+  'shortcuts.upload': 'Upload files',
+  'shortcuts.refresh': 'Refresh the listing',
+  'shortcuts.download': 'Download',
+  'shortcuts.preview': 'Preview',
+  'shortcuts.share': 'Share / permissions',
+  'shortcuts.tags': 'Tags',
+  'shortcuts.convert': 'Convert',
+  'shortcuts.open_tab': 'Open in a new tab',
+  'shortcuts.copy_path': 'Copy path',
+  'shortcuts.copy_id': 'Copy id',
+  'shortcuts.restore': 'Restore from trash',
+  'shortcuts.settings.reserved':
+    'is taken by the browser before the page sees it, so it would do nothing here. Pick another key.',
+  'shortcuts.settings.reserved_badge': 'Desktop app only',
+  'shortcuts.settings.reserved_title':
+    'The browser handles this combination itself. It fires in the desktop app and in an installed PWA, not in a browser tab.',
   'cmd.tab_new': 'Open a new tab',
   'cmd.split_toggle': 'Toggle split view',
   'split.pane': 'Secondary pane',

package/src/locales/tr.ts

@@ -306,6 +306,7 @@ export const tr: Record<string, string> = {
   'theme.name.contrast': 'Yüksek Kontrast',
   'theme.name.gray': 'Yumuşak Gri',
   'theme.name.terminal': 'Terminal Yeşili',
+  'theme.name.drive': 'Drive',
   /* === wiring:c2 — özelleştirilebilir kısayollar + hızlı bakış === */
   'shortcuts.quicklook': 'Hızlı bakış',
   'shortcuts.customize': 'Özelleştir',
@@ -366,7 +367,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 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.',
+    '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. {palette} 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.',
@@ -375,7 +376,7 @@ export const tr: Record<string, string> = {
     'Bir dosyaya sağ tıklayıp "Paylaş / İzinler" ile bağlantı oluşturabilir, PIN ve son kullanma süresi ekleyebilirsin.',
   'tour.step.help.title': 'Kısayollar',
   'tour.step.help.desc':
-    '? tuşu kısayol kartını, Ctrl+K komut paletini açar. Bu turu menüdeki "Turu tekrar başlat" ile dilediğinde yeniden izleyebilirsin.',
+    '{help} tuşu kısayol kartını, {palette} komut paletini açar. Bu turu menüdeki "Turu tekrar başlat" ile dilediğinde yeniden izleyebilirsin.',
   'error.hint': 'Bağlantı ya da sunucu kaynaklı geçici bir sorun olabilir. Yeniden deneyin.',
   'error.details': 'Teknik ayrıntılar',
   'col.star': 'Yıldız',
@@ -395,6 +396,24 @@ export const tr: Record<string, string> = {
   'shortcuts.tab_close': 'Sekmeyi kapat',
   'shortcuts.tab_next': 'Sonraki sekme',
   'shortcuts.tab_prev': 'Önceki sekme',
+  /* tus:t1 — menü fiilleri */
+  'shortcuts.new_folder': 'Yeni klasör',
+  'shortcuts.upload': 'Dosya yükle',
+  'shortcuts.refresh': 'Listeyi yenile',
+  'shortcuts.download': 'İndir',
+  'shortcuts.preview': 'Önizle',
+  'shortcuts.share': 'Paylaş / izinler',
+  'shortcuts.tags': 'Etiketler',
+  'shortcuts.convert': 'Dönüştür',
+  'shortcuts.open_tab': 'Yeni sekmede aç',
+  'shortcuts.copy_path': 'Yolu kopyala',
+  'shortcuts.copy_id': 'Kimliği kopyala',
+  'shortcuts.restore': 'Çöp kutusundan geri al',
+  'shortcuts.settings.reserved':
+    'tarayıcı tarafından sayfaya ulaşmadan yakalanıyor, burada hiçbir şey yapmaz. Başka bir tuş seçin.',
+  'shortcuts.settings.reserved_badge': 'Yalnız masaüstü uygulamasında',
+  'shortcuts.settings.reserved_title':
+    'Bu kombinasyonu tarayıcının kendisi işliyor. Masaüstü uygulamasında ve kurulu PWA’da çalışır, tarayıcı sekmesinde çalışmaz.',
   'cmd.tab_new': 'Yeni sekme aç',
   'cmd.split_toggle': 'Görünümü böl / birleştir',
   'split.pane': 'İkincil panel',

package/src/styles/base.css

@@ -866,6 +866,22 @@ filex-explorer {
   width: 1.2em;
   text-align: center;
 }
+/* tus:t1 — the key that runs this row, pushed to the trailing edge. Muted and
+ * smaller: it is a reminder, not a second label, and it must never win the
+ * row's width from the label (hence auto margin + no shrink on the label). */
+.fe-ctx__label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fe-ctx__key {
+  flex: 0 0 auto;
+  margin-left: auto;
+  padding-left: 16px;
+  color: var(--fe-text-muted);
+  font-size: 11px;
+  font-family: var(--fe-font-mono);
+  white-space: nowrap;
+}
 .fe-ctx__sep {
   height: 1px;
   background: var(--fe-border);
@@ -2588,6 +2604,16 @@ filex-explorer {
   padding: 3px 9px;
   font-size: 12px;
 }
+/* tus:t1 — "Desktop app only" on a combo the browser keeps for itself. */
+.fe-shortset__reserved {
+  margin-left: 6px;
+  font-size: 10.5px;
+  color: var(--fe-text-muted);
+  border: 1px dashed var(--fe-border);
+  border-radius: var(--fe-radius-sm);
+  padding: 1px 6px;
+  white-space: nowrap;
+}
 .fe-shortset__fixed {
   font-size: 11px;
   text-transform: uppercase;
@@ -2622,8 +2648,15 @@ filex-explorer {
 /* Quick-look hint bar — floats above the PreviewModal backdrop (z 70).
  * Carries the `.fe` class for the theme-variable cascade, so the `.fe`
  * root layout defaults (column flex, min-height 420px, 100% height)
- * must be explicitly neutralised here. */
-.fe-ql-hint {
+ * must be explicitly neutralised here.
+ *
+ * Written as `.fe.fe-ql-hint` on purpose: a single class ties with the
+ * `.fe` root rule and would be decided by source order alone, which is
+ * not something a host embed can be trusted to preserve. The hint is
+ * also Teleported under <body> (QuickLook.vue) so a host container's
+ * own `.fe` override cannot reach it by descendant — issue #22, where
+ * the pill grew to the full viewport height inside the admin UI. */
+.fe.fe-ql-hint {
   position: fixed;
   left: 50%;
   bottom: 14px;
@@ -2653,6 +2686,13 @@ filex-explorer {
 .fe-ql-hint__sep {
   opacity: 0.5;
 }
+/* One key-cap group plus its label, kept together so the pill can only
+ * break between segments. */
+.fe-ql-hint__seg {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
 /* /wiring:c2 */
 /* =========================================================
  * wiring:c3 — Operations center (unified upload + ops-queue surface)

package/src/styles/variables.css

@@ -62,6 +62,10 @@
   --fe-border-strong: #3a4453;
   --fe-text: #e5e9f0;
   --fe-text-muted: #8b95a7;
+  /* Dark ink on the light-blue button. White measured 2.54:1 against it —
+   * the palette's own bar for text on a primary surface is 4.5, and every
+   * other themed palette clears it. #0f1419 measures 7.28. */
+  --fe-text-on-primary: #0f1419;
   --fe-primary: #60a5fa;
   --fe-primary-hover: #3b82f6;
   --fe-danger: #f87171;
@@ -83,6 +87,8 @@
     --fe-border-strong: #3a4453;
     --fe-text: #e5e9f0;
     --fe-text-muted: #8b95a7;
+    /* See the note on the class-based dark block above. */
+    --fe-text-on-primary: #0f1419;
     --fe-primary: #60a5fa;
     --fe-primary-hover: #3b82f6;
     --fe-danger: #f87171;