@brftech/filex-core 0.39.0 → 0.40.0

package/src/FileExplorer.vue

@@ -2029,9 +2029,39 @@ useKeyboardShortcuts(rootEl, {
   onTabNext: () => nextTab(),
   onTabPrev: () => prevTab(),
   /* /wiring:d1 */
+  /* tus:t1 — the menu verbs, routed through the SAME dispatcher the right-click
+   * menu and the toolbar use (dispatchItemAction), so a key and a click cannot
+   * drift apart. The ones that act on a selection do nothing without one, which
+   * is what the menu does too. */
+  onNewFolder: () => {
+    showNewFolder.value = true;
+  },
+  onUpload: () => triggerUpload(),
+  onRefresh: () => void load(),
+  onDownload: () => void dispatchItemAction('download', shortcutTargets()),
+  onPreview: () => void dispatchItemAction('preview', shortcutTargets()),
+  onShare: () => void dispatchItemAction('access', shortcutTargets()),
+  onTags: () => void dispatchItemAction('tags', shortcutTargets()),
+  onConvert: () => void dispatchItemAction('convert', shortcutTargets()),
+  onOpenTab: () => void dispatchItemAction('open-tab', shortcutTargets()),
+  onCopyPath: () => {
+    const n = shortcutTargets()[0];
+    if (n) void onCopyPath(n.path);
+  },
+  onCopyId: () => void dispatchItemAction('copy-id', shortcutTargets()),
+  onRestore: () => void dispatchItemAction('restore', shortcutTargets()),
+  /* /tus:t1 */
   hasSelection: () => !selection.isEmpty.value,
 });
 
+/* tus:t1 — which rows a keyboard verb acts on: the active pane's selection when
+ * the split pane has focus, otherwise the main listing's. Same rule the delete
+ * and rename shortcuts have followed since wiring:d1. */
+function shortcutTargets(): FileNode[] {
+  if (paneIsActive.value) return splitPaneRef.value?.selectedNodes() ?? [];
+  return selection.nodes.value;
+}
+
 // --------------------------------------------------------------------
 // Actions
 // --------------------------------------------------------------------

package/src/components/ContextMenu.vue

@@ -10,6 +10,7 @@ import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import type { FileNode } from '../types/FileNode';
 import { useLocale } from '../composables/useLocale';
+import { menuShortcutHint } from '../composables/useKeyboardShortcuts';
 
 export interface ContextAction {
   key: string;
@@ -19,6 +20,12 @@ export interface ContextAction {
   disabled?: boolean;
   hidden?: boolean;
   divider?: boolean;
+  /**
+   * tus:t1 — registry action id whose key this row should print. Optional:
+   * rows whose `key` already matches the registry (rename, delete, copy…)
+   * are resolved from the shared map and need nothing here.
+   */
+  shortcutId?: string;
 }
 
 const props = defineProps<{
@@ -48,6 +55,12 @@ const emit = defineEmits<{
 
 const { t } = useLocale(() => props.locale); // bag:b4 — sheet aria labels need t()
 
+/* tus:t1 — a row's key label. `shortcutId` wins when an embedder sets one;
+ * otherwise the row's own key is looked up in the shared menu map. */
+function hintFor(a: ContextAction): string {
+  return menuShortcutHint(a.shortcutId ?? a.key);
+}
+
 const open = ref(false);
 const x = ref(0);
 const y = ref(0);
@@ -320,6 +333,7 @@ defineExpose({ show, hide });
               >
                 <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
                 <span class="fe-ctx__label">{{ a.label }}</span>
+                <span v-if="hintFor(a)" class="fe-ctx__key" aria-hidden="true">{{ hintFor(a) }}</span>
               </button>
             </template>
           </div>
@@ -347,6 +361,10 @@ defineExpose({ show, hide });
             >
               <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
               <span class="fe-ctx__label">{{ a.label }}</span>
+              <!-- tus:t1 — the key that does this from the keyboard, read from
+                   the registry so a remap reaches it. Empty for a verb with no
+                   binding, and the span then does not render at all. -->
+              <span v-if="hintFor(a)" class="fe-ctx__key" aria-hidden="true">{{ hintFor(a) }}</span>
             </button>
           </template>
         </div>

package/src/components/OnboardingTour.vue

@@ -19,6 +19,7 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { shortcutHint } from '../composables/useKeyboardShortcuts';
 
 const props = defineProps<{
   open: boolean;
@@ -34,6 +35,15 @@ const emit = defineEmits<{
 
 const { t } = useLocale(() => props.locale);
 
+/* The tour teaches two keys by name, and both are remappable. Read them
+ * from the registry so the sentence stays true for whoever is taking the
+ * tour — a walkthrough that names the wrong key is worse than one that
+ * names none. */
+const hintCombos = computed(() => ({
+  palette: shortcutHint('palette'),
+  help: shortcutHint('help'),
+}));
+
 // ------------------------------------------------------------------
 // Step definitions. `target` returns the element to spotlight (null =
 // centered card, e.g. the closing shortcuts step). Buttons without a
@@ -299,7 +309,7 @@ const themeClass = computed(() => `fe-ctx-backdrop--theme-${props.theme || 'auto
             {{ t('tour.progress', { n: stepIdx + 1, m: total }) }}
           </p>
           <h3 class="fe-tour__title">{{ t(step.titleKey) }}</h3>
-          <p class="fe-tour__desc">{{ t(step.descKey) }}</p>
+          <p class="fe-tour__desc">{{ t(step.descKey, hintCombos) }}</p>
           <div class="fe-tour__dots" aria-hidden="true">
             <span
               v-for="(s, i) in activeSteps"

package/src/components/QuickLook.vue

@@ -6,11 +6,15 @@
  * mode), so every viewer the modal knows (image/video/pdf/office/code/
  * 3D/archive/…) works in quick-look for free. What this layer adds:
  *
- *   - Space closes again (macOS Quick Look convention)
+ *   - the quick-look key closes the peek again (Space by default — macOS
+ *     Quick Look convention), and the open key promotes it into the full
+ *     open flow (Enter by default, emit 'open-full'). Both come from the
+ *     shortcut registry rather than from a comparison against the default
+ *     key, so a remap reaches the overlay too
  *   - ← ↑ / → ↓ ask the host to move the selection; the host keeps the
- *     `file` prop in sync so the preview follows the selection
- *   - Enter promotes the peek into the full open flow (emit 'open-full')
- *   - a small floating hint bar with the key legend
+ *     `file` prop in sync so the preview follows the selection. These are
+ *     the peek's own arrows, not registry actions
+ *   - a small floating hint bar naming those keys, read from the registry
  *
  * Keys are handled in window CAPTURE phase with stopPropagation so the
  * global shortcut registry never double-handles them; events that
@@ -18,10 +22,11 @@
  * input) are left alone. Esc is untouched — PreviewModal's own Modal
  * already closes on it.
  */
-import { onBeforeUnmount, watch } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
 import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { eventMatchesShortcut, shortcutHint } from '../composables/useKeyboardShortcuts';
 import PreviewModal from '../modals/PreviewModal.vue';
 
 const props = defineProps<{
@@ -61,16 +66,38 @@ function inFormControl(target: EventTarget | null): boolean {
   );
 }
 
+/**
+ * The peek's own arrows. These are NOT registry actions — they only
+ * mean anything while the overlay is up — so they are declared once
+ * here and the hint bar prints this same constant. Two copies of a key
+ * name is how a legend starts lying about the key it names.
+ */
+const NAV_KEYS = ['↑', '↓'] as const;
+
 function onKeydown(e: KeyboardEvent) {
   if (!props.open) return;
-  if (e.ctrlKey || e.metaKey || e.altKey) return;
   if (inFormControl(e.target)) return;
+
+  // ⚠ The registry first, and BEFORE the modifier bail-out: the user may
+  // have remapped quick-look onto a combo that carries Ctrl or Alt. The
+  // old version compared `e.key` to a hardcoded ' ' / 'Enter', so after a
+  // remap the peek opened on the new key and still closed on the old one
+  // — and the hint bar named the old one.
+  if (eventMatchesShortcut(e, 'quicklook')) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close');
+    return;
+  }
+  if (eventMatchesShortcut(e, 'open')) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('open-full');
+    return;
+  }
+
+  if (e.ctrlKey || e.metaKey || e.altKey) return;
   switch (e.key) {
-    case ' ':
-      e.preventDefault();
-      e.stopPropagation();
-      emit('close');
-      break;
     case 'ArrowRight':
     case 'ArrowDown':
       e.preventDefault();
@@ -83,14 +110,23 @@ function onKeydown(e: KeyboardEvent) {
       e.stopPropagation();
       emit('nav', -1);
       break;
-    case 'Enter':
-      e.preventDefault();
-      e.stopPropagation();
-      emit('open-full');
-      break;
   }
 }
 
+/**
+ * The legend, read from the live registry. A segment whose action the
+ * user has unbound disappears rather than printing an empty key cap.
+ */
+const hintSegments = computed(() => {
+  const segs: Array<{ id: string; keys: string[]; label: string }> = [];
+  const close = shortcutHint('quicklook');
+  if (close) segs.push({ id: 'quicklook', keys: [close], label: t('quicklook.hint_close') });
+  segs.push({ id: 'nav', keys: [...NAV_KEYS], label: t('quicklook.hint_nav') });
+  const open = shortcutHint('open');
+  if (open) segs.push({ id: 'open', keys: [open], label: t('quicklook.hint_open') });
+  return segs;
+});
+
 watch(
   () => props.open,
   (open) => {
@@ -122,21 +158,37 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown, true));
     :viewer-base-url="viewerBaseUrl"
     @close="emit('close')"
   />
-  <transition name="fe-toast">
-    <div
-      v-if="open"
-      class="fe fe-ql-hint"
-      :class="{
-        'fe--theme-light': theme === 'light',
-        'fe--theme-dark': theme === 'dark',
-      }"
-      aria-hidden="true"
-    >
-      <kbd class="fe-kbd">Space</kbd> {{ t('quicklook.hint_close') }}
-      <span class="fe-ql-hint__sep">·</span>
-      <kbd class="fe-kbd">↑</kbd><kbd class="fe-kbd">↓</kbd> {{ t('quicklook.hint_nav') }}
-      <span class="fe-ql-hint__sep">·</span>
-      <kbd class="fe-kbd">Enter</kbd> {{ t('quicklook.hint_open') }}
-    </div>
-  </transition>
+  <!--
+    Teleported under <body> for the same reason as ContextMenu and
+    OnboardingTour: the hint carries the `fe` root class (that is how it
+    reaches the `--fe-*` theme variables), so while it sits inside the
+    explorer tree ANY host rule that reaches `.fe` by descendant also
+    reaches the hint — and a host selector is always more specific than
+    our own single class. web/src/views/Explore.vue sizes the embedded
+    explorer with `.explore-host[data-v-…] .fe { height: 100% }`; that
+    stretched the hint pill to the full viewport height (issue #22).
+    Teleporting takes it out of every host container, so only the
+    package's own rules can reach it.
+  -->
+  <Teleport to="body">
+    <transition name="fe-toast">
+      <div
+        v-if="open"
+        class="fe fe-ql-hint"
+        :class="{
+          'fe--theme-light': theme === 'light',
+          'fe--theme-dark': theme === 'dark',
+        }"
+        aria-hidden="true"
+      >
+        <template v-for="(seg, i) in hintSegments" :key="seg.id">
+          <span v-if="i > 0" class="fe-ql-hint__sep">·</span>
+          <span class="fe-ql-hint__seg">
+            <kbd v-for="k in seg.keys" :key="k" class="fe-kbd">{{ k }}</kbd>
+            {{ seg.label }}
+          </span>
+        </template>
+      </div>
+    </transition>
+  </Teleport>
 </template>

package/src/components/ShortcutSettings.vue

@@ -24,6 +24,7 @@ import {
   comboFromEvent,
   effectiveCombo,
   findShortcutConflict,
+  isReservedCombo,
   resetAllShortcuts,
   resetShortcut,
   setShortcutOverride,
@@ -66,6 +67,8 @@ const anyOverridden = computed(() => list.value.some((s) => s.overridden));
 
 const capturingId = ref<string | null>(null);
 const conflict = ref<{ id: string; combo: string; conflictId: string; fixed: boolean } | null>(null);
+/* tus:t1 — the user pressed something the browser keeps for itself. */
+const reserved = ref<{ id: string; combo: string } | null>(null);
 
 function labelOf(id: string): string {
   const def = SHORTCUT_ACTIONS.find((a) => a.id === id);
@@ -74,6 +77,7 @@ function labelOf(id: string): string {
 
 function beginCapture(id: string) {
   conflict.value = null;
+  reserved.value = null;
   capturingId.value = id;
 }
 
@@ -84,6 +88,13 @@ function cancelCapture() {
 function attemptAssign(id: string, combo: string) {
   capturingId.value = null;
   if (combo === effectiveCombo(id)) return; // unchanged
+  /* tus:t1 — a combo the browser takes before the page sees it would be a key
+   * that does nothing where the user is standing. Refuse it and say why,
+   * rather than storing a binding that never fires. */
+  if (isReservedCombo(combo)) {
+    reserved.value = { id, combo };
+    return;
+  }
   const clash = findShortcutConflict(combo, id);
   if (clash) {
     conflict.value = { id, combo, conflictId: clash.id, fixed: clash.fixed };
@@ -104,13 +115,19 @@ function dismissConflict() {
   conflict.value = null;
 }
 
+function dismissReserved() {
+  reserved.value = null;
+}
+
 function onReset(id: string) {
   conflict.value = null;
+  reserved.value = null;
   resetShortcut(id);
 }
 
 function onResetAll() {
   conflict.value = null;
+  reserved.value = null;
   capturingId.value = null;
   resetAllShortcuts();
 }
@@ -145,6 +162,7 @@ watch(
       window.removeEventListener('keydown', onWindowKeydown, true);
       capturingId.value = null;
       conflict.value = null;
+      reserved.value = null;
     }
   },
 );
@@ -201,6 +219,14 @@ function onClose() {
                 </span>
                 <template v-for="(combo, i) in s.keys" v-else :key="combo">
                   <kbd class="fe-kbd">{{ combo }}</kbd>
+                  <!-- tus:t1 — this combo never reaches a browser tab. Say so
+                       on the row rather than letting the user discover it by
+                       pressing the key and watching nothing happen. -->
+                  <span
+                    v-if="isReservedCombo(combo)"
+                    class="fe-shortset__reserved"
+                    :title="t('shortcuts.settings.reserved_title')"
+                  >{{ t('shortcuts.settings.reserved_badge') }}</span>
                   <span v-if="i < s.keys.length - 1" class="fe-shortcuts__or" aria-hidden="true">/</span>
                 </template>
               </template>
@@ -260,6 +286,17 @@ function onClose() {
               </button>
             </span>
           </div>
+          <div v-if="reserved && reserved.id === s.id" class="fe-shortset__conflict" role="alert">
+            <span class="fe-shortset__conflict-msg">
+              <kbd class="fe-kbd">{{ reserved.combo }}</kbd>
+              {{ t('shortcuts.settings.reserved') }}
+            </span>
+            <span class="fe-shortset__conflict-actions">
+              <button type="button" class="fe-btn fe-shortset__btn" @click="dismissReserved">
+                {{ t('shortcuts.settings.conflict_cancel') }}
+              </button>
+            </span>
+          </div>
         </div>
       </section>
     </div>

package/src/components/Toolbar.vue

@@ -17,6 +17,7 @@ import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import ContextMenu, { type ContextAction } from './ContextMenu.vue';
 import ViewSwitcher from './ViewSwitcher.vue';
 import { useLocale } from '../composables/useLocale';
+import { eventMatchesShortcut, menuShortcutHint, shortcutHint } from '../composables/useKeyboardShortcuts';
 
 export type SelectionMode = 'none' | 'single-file' | 'single-dir' | 'multi';
 
@@ -381,10 +382,20 @@ const moreActions = computed<ContextAction[]>(() => {
  * what the hint says, and Ctrl+K from anywhere else still opens the palette
  * as it has since cila:c.
  */
-const macLike =
-  typeof navigator !== 'undefined' &&
-  /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent || '');
-const paletteCombo = computed(() => (macLike ? '⌘ K' : 'Ctrl K'));
+/* ⚠ Read from the registry, not written here. This chip used to print a
+ * hardcoded `⌘ K` / `Ctrl K`, which stopped being true the moment anyone
+ * remapped the palette in the shortcut settings — the chip then named a
+ * key that did nothing, on the one control whose whole job is to teach
+ * that key. */
+const paletteCombo = computed(() => shortcutHint('palette'));
+
+/* tus:t1 — a button's tooltip names its key. Same source as the right-click
+ * menu's key column, so the two can only ever say the same thing, and a verb
+ * with no binding gets its plain label back rather than an empty bracket. */
+function withKey(label: string, key: string): string {
+  const combo = menuShortcutHint(key);
+  return combo ? `${label} (${combo})` : label;
+}
 
 const drivePlaceholder = computed(() =>
   props.scopeLabel
@@ -396,7 +407,9 @@ const drivePlaceholder = computed(() =>
  *  keystrokes aimed at an input — which is correct, and it would otherwise
  *  make the hint on this very field a lie. */
 function onSearchKeydown(ev: KeyboardEvent) {
-  if ((ev.ctrlKey || ev.metaKey) && (ev.key === 'k' || ev.key === 'K')) {
+  // The registry decides, so the chip beside this field and the key that
+  // actually escalates stay the same key after a remap.
+  if (eventMatchesShortcut(ev, 'palette')) {
     ev.preventDefault();
     ev.stopPropagation();
     emit('open-palette', localSearch.value);
@@ -504,7 +517,7 @@ function onMoreSelect(a: ContextAction) {
         v-if="canGoUp"
         type="button"
         class="fe-btn fe-btn--icon-only"
-        :title="t('toolbar.go_up')"
+        :title="withKey(t('toolbar.go_up'), 'go-up')"
         :aria-label="t('toolbar.go_up')"
         @click="emit('go-up')"
       >
@@ -518,7 +531,7 @@ function onMoreSelect(a: ContextAction) {
         v-if="shell !== 'drive' && mode === 'none' && !trashActive && !atVirtualRoot && canWrite !== false"
         type="button"
         class="fe-btn fe-btn--primary"
-        :title="t('toolbar.new_folder')"
+        :title="withKey(t('toolbar.new_folder'), 'new-folder')"
         @click="emit('new-folder')"
       >
         <span class="fe-icon">📁</span>
@@ -532,7 +545,7 @@ function onMoreSelect(a: ContextAction) {
         class="fe-btn fe-btn--fold"
         :class="{ 'fe-btn--danger': a.danger, 'is-disabled': a.disabled }"
         :disabled="a.disabled"
-        :title="a.label"
+        :title="withKey(a.label, a.key)"
         @click="fire(a.key)"
       >
         <span class="fe-icon">{{ a.icon }}</span>
@@ -573,7 +586,7 @@ function onMoreSelect(a: ContextAction) {
         v-if="pasteEnabled && mode === 'none' && !trashActive && !atVirtualRoot && canWrite !== false"
         type="button"
         class="fe-btn"
-        :title="t('ctx.paste')"
+        :title="withKey(t('ctx.paste'), 'paste')"
         @click="fire('paste')"
       >
         <span class="fe-icon">📋</span>
@@ -636,7 +649,7 @@ function onMoreSelect(a: ContextAction) {
         v-if="shell !== 'drive' && !atVirtualRoot && canWrite !== false"
         type="button"
         class="fe-btn fe-btn--icon-only"
-        :title="t('toolbar.upload')"
+        :title="withKey(t('toolbar.upload'), 'upload')"
         :aria-label="t('toolbar.upload') /* wiring:c4 */"
         @click="emit('upload')"
       >
@@ -645,7 +658,7 @@ function onMoreSelect(a: ContextAction) {
       <button
         type="button"
         class="fe-btn fe-btn--icon-only"
-        :title="t('toolbar.refresh')"
+        :title="withKey(t('toolbar.refresh'), 'refresh')"
         :aria-label="t('toolbar.refresh') /* wiring:c4 */"
         @click="emit('refresh')"
       >
@@ -717,7 +730,7 @@ function onMoreSelect(a: ContextAction) {
       class="fe-btn fe-btn--icon-only fe-toolbar__inspector"
       :class="{ 'is-active': inspectorOpen }"
       :aria-pressed="!!inspectorOpen"
-      :title="t('toolbar.inspector')"
+      :title="withKey(t('toolbar.inspector'), 'inspector')"
       :aria-label="t('toolbar.inspector')"
       @click="emit('toggle-inspector')"
     >
@@ -917,7 +930,7 @@ function onMoreSelect(a: ContextAction) {
           v-if="canGoUp"
           type="button"
           class="fe-btn fe-btn--icon-only"
-          :title="t('toolbar.go_up')"
+          :title="withKey(t('toolbar.go_up'), 'go-up')"
           :aria-label="t('toolbar.go_up')"
           @click="emit('go-up')"
         >
@@ -930,7 +943,7 @@ function onMoreSelect(a: ContextAction) {
           type="button"
           class="fe-btn fe-btn--icon-only fe-toolbar__search-toggle"
           :class="{ 'is-active': !!localSearch }"
-          :title="t('toolbar.search')"
+          :title="withKey(t('toolbar.search'), 'search')"
           :aria-label="t('toolbar.search')"
           @click="openSearch"
         >
@@ -940,7 +953,7 @@ function onMoreSelect(a: ContextAction) {
           v-if="!atVirtualRoot && canWrite !== false"
           type="button"
           class="fe-btn fe-btn--icon-only"
-          :title="t('toolbar.upload')"
+          :title="withKey(t('toolbar.upload'), 'upload')"
           :aria-label="t('toolbar.upload')"
           @click="emit('upload')"
         >