@brftech/filex-core 0.4.2 → 0.5.0

package/src/FileExplorer.vue

@@ -50,6 +50,21 @@ import InspectorPanel from './components/InspectorPanel.vue'; /* koru:k1 */
 import CommandPalette from './components/CommandPalette.vue';
 import ShortcutsHelp from './components/ShortcutsHelp.vue';
 /* /cila:c wiring */
+/* wiring:c1 — tema galerisi */
+import ThemeGallery from './components/ThemeGallery.vue';
+import { useThemeState, applyThemeToEl, syncThemeStyle } from './lib/themes';
+/* /wiring:c1 */
+/* wiring:c2 — shortcut settings modal + Space quick-look overlay */
+import ShortcutSettings from './components/ShortcutSettings.vue';
+import QuickLook from './components/QuickLook.vue';
+/* /wiring:c2 */
+/* wiring:c3 — unified operations center */
+import OperationsCenter from './components/OperationsCenter.vue';
+import { useOperations } from './composables/useOperations';
+/* /wiring:c3 */
+/* wiring:c4 */
+import OnboardingTour from './components/OnboardingTour.vue';
+/* /wiring:c4 */
 
 import NewFolderModal from './modals/NewFolderModal.vue';
 import RenameModal from './modals/RenameModal.vue';
@@ -1099,6 +1114,7 @@ useKeyboardShortcuts(rootEl, {
     showShortcutsHelp.value = true;
   },
   /* /cila:c wiring */
+  onQuickLook: () => quickLookToggle() /* wiring:c2 */,
   onToggleInspector: () => toggleInspector() /* koru:k1 */,
   hasSelection: () => !selection.isEmpty.value,
 });
@@ -2052,6 +2068,183 @@ async function onCopyPath(adapterPath: string) {
 function buildAuthHeaders(extra: Record<string, string> = {}) {
   return api.authHeadersSync({ ...extra });
 }
+
+/* === wiring:c1 — tema galerisi ===
+ * Selected theme (shared module state, localStorage `filex.theme`) is applied
+ * as inline `--fe-*` variables on the explorer root, resolved to the active
+ * light/dark variant — plus a mirrored injected stylesheet for the surfaces
+ * that re-declare tokens (teleported context menu, modal backdrops). Theme
+ * selection is independent from the light/dark mode: the mode only picks
+ * WHICH variant of the theme paints. */
+const showThemeGallery = ref(false);
+const { themeId: activeThemeId, setTheme: setActiveTheme } = useThemeState();
+// Resolved mode: explicit config wins, otherwise the OS preference — the same
+// logic variables.css encodes in CSS. The inline root variables beat every
+// stylesheet rule, so they must track this resolution at runtime.
+const themeMq =
+  typeof window !== 'undefined' && window.matchMedia
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : undefined;
+const themeOsDark = ref(!!themeMq?.matches);
+function onThemeMqChange(e: MediaQueryListEvent) {
+  themeOsDark.value = e.matches;
+}
+onMounted(() => themeMq?.addEventListener?.('change', onThemeMqChange));
+onBeforeUnmount(() => themeMq?.removeEventListener?.('change', onThemeMqChange));
+const themeResolvedDark = computed(
+  () => props.config.theme === 'dark' || (props.config.theme !== 'light' && themeOsDark.value),
+);
+watch(
+  [activeThemeId, themeResolvedDark, rootEl],
+  () => {
+    syncThemeStyle(activeThemeId.value);
+    if (rootEl.value) applyThemeToEl(rootEl.value, activeThemeId.value, themeResolvedDark.value);
+  },
+  { immediate: true },
+);
+/* === /wiring:c1 === */
+/* === wiring:c2 — shortcut settings modal + Space quick-look ===
+ * quickLookTarget follows the selection while the peek is open: arrow
+ * keys emitted by QuickLook move the selection here, and the watcher
+ * below syncs the previewed file. Space toggles (registry action
+ * `quicklook`); Enter promotes the peek into the normal open flow. */
+const showShortcutSettings = ref(false);
+const quickLookOpen = ref(false);
+const quickLookTarget = ref<FileNode | null>(null);
+
+function quickLookToggle() {
+  if (quickLookOpen.value) {
+    quickLookOpen.value = false;
+    return;
+  }
+  const sel = selection.nodes.value;
+  const n = sel.length === 1 ? sel[0] : null;
+  if (!n || n.type !== 'file' || n.basename === '.trash') return;
+  quickLookTarget.value = n;
+  quickLookOpen.value = true;
+  void markRecent(n);
+}
+
+function quickLookNav(delta: number) {
+  const onlyFiles = files.value.filter((f) => f.type === 'file');
+  if (onlyFiles.length === 0) return;
+  const cur = quickLookTarget.value;
+  let idx = cur ? onlyFiles.findIndex((f) => f.path === cur.path) : -1;
+  idx = idx === -1 ? (delta > 0 ? 0 : onlyFiles.length - 1) : (idx + delta + onlyFiles.length) % onlyFiles.length;
+  const next = onlyFiles[idx];
+  if (!next || next.path === cur?.path) return;
+  selection.click(next.path);
+}
+
+function quickLookOpenFull() {
+  const n = quickLookTarget.value;
+  quickLookOpen.value = false;
+  if (n) openNode(n);
+}
+
+watch(
+  () => selection.nodes.value,
+  (nodes) => {
+    if (!quickLookOpen.value) return;
+    const n = nodes.length === 1 && nodes[0].type === 'file' ? nodes[0] : null;
+    if (n && n.path !== quickLookTarget.value?.path) {
+      quickLookTarget.value = n;
+      void markRecent(n);
+    }
+  },
+);
+/* === /wiring:c2 === */
+/* wiring:c3 — operations center store + failed-upload retry */
+const opsCenter = useOperations();
+
+/**
+ * Retry a failed upload from the operations center. The failed row is
+ * already retired by the store; re-run the upload against the job's ORIGINAL
+ * target folder (the user may have navigated away since) via the legacy
+ * single-POST path — works for any storage / size, no chunked precondition.
+ */
+function retryUploadJob(job: UploadJob) {
+  uploadJobs.value = uploadJobs.value.filter((j) => j.id !== job.id);
+  const file = job.file;
+  const target = job.path || qualify(currentPath.value);
+  const id = crypto.randomUUID();
+  uploadJobs.value = [
+    ...uploadJobs.value,
+    { id, file, path: target, totalBytes: file.size, uploadedBytes: 0, percent: 0, status: 'uploading', cancel() {} },
+  ];
+  const patchRetry = (p: Partial<UploadJob>) => {
+    const idx = uploadJobs.value.findIndex((j) => j.id === id);
+    if (idx === -1) return;
+    const next = [...uploadJobs.value];
+    next[idx] = { ...next[idx], ...p };
+    uploadJobs.value = next;
+  };
+  api
+    .uploadMultipart(target, [file], (percent) => {
+      patchRetry({ percent, uploadedBytes: Math.round((percent / 100) * file.size) });
+      emit('upload-progress', { uploadId: id, percent, done: percent >= 100 });
+    })
+    .then(() => {
+      patchRetry({ percent: 100, uploadedBytes: file.size, status: 'done' });
+      emit('upload-progress', { uploadId: id, percent: 100, done: true });
+      void load();
+    })
+    .catch((err: Error) => {
+      patchRetry({ status: 'error', error: err.message });
+      emit('error', { message: err.message, context: { op: 'upload-retry', file: file.name } });
+    });
+}
+/* /wiring:c3 */
+/* === wiring:c4 — onboarding coach-mark tour ===
+ * First mount with no `filex.tourDone` flag auto-starts the tour (short
+ * delay so the listing/toolbar are laid out). Closing it — finished OR
+ * skipped — stamps the flag; "Turu tekrar başlat" re-opens it any time.
+ * Restart arrives as a bubbled `fe:tour-restart` CustomEvent from the
+ * Toolbar overflow menu, so no extra prop/emit threading through the
+ * shared component tags is needed. */
+const TOUR_LS_KEY = 'filex.tourDone';
+const showTour = ref(false);
+let tourTimer: ReturnType<typeof setTimeout> | undefined;
+
+function tourAlreadyDone(): boolean {
+  try {
+    return localStorage.getItem(TOUR_LS_KEY) === '1';
+  } catch {
+    return true; // no storage → never auto-nag
+  }
+}
+
+function startTour() {
+  showTour.value = true;
+}
+
+function onTourClose() {
+  showTour.value = false;
+  try {
+    localStorage.setItem(TOUR_LS_KEY, '1');
+  } catch {
+    /* private mode / quota */
+  }
+  rootEl.value?.focus();
+}
+
+function onTourRestartEvent() {
+  startTour();
+}
+
+onMounted(() => {
+  rootEl.value?.addEventListener('fe:tour-restart', onTourRestartEvent);
+  if (!tourAlreadyDone()) {
+    tourTimer = setTimeout(() => {
+      if (!showTour.value) startTour();
+    }, 900);
+  }
+});
+onBeforeUnmount(() => {
+  if (tourTimer) clearTimeout(tourTimer);
+  rootEl.value?.removeEventListener('fe:tour-restart', onTourRestartEvent);
+});
+/* === /wiring:c4 === */
 </script>
 
 <template>
@@ -2089,9 +2282,11 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       :theme="config.theme || 'auto' /* bag:b4 */"
       :inspector-open="showInspector /* koru:k1 */"
       @toggle-inspector="toggleInspector /* koru:k1 */"
+      @open-theme="showThemeGallery = true /* wiring:c1 */"
       @update:view-mode="viewMode = $event"
       @update:search-query="searchQuery = $event"
       @update:density="density = $event"
+      @open-shortcut-settings="showShortcutSettings = true /* wiring:c2 */"
       @new-folder="showNewFolder = true"
       @upload="triggerUpload"
       @refresh="() => load()"
@@ -2204,12 +2399,19 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
           <path d="M24 88h72" stroke-dasharray="3 5" />
         </svg>
         <p class="fe-state__title">{{ t('error.title') }}</p>
-        <p class="fe-state__hint">{{ loadError }}</p>
+        <!-- wiring:c4 — friendly hint + collapsible technical detail; the raw
+             error message used to sit in the hint slot and read like UI copy. -->
+        <p class="fe-state__hint">{{ t('error.hint') }}</p>
         <div class="fe-state__actions">
           <button type="button" class="fe-btn fe-btn--primary" @click="retryLoad">
             {{ t('error.retry') }}
           </button>
         </div>
+        <details class="fe-state__details">
+          <summary class="fe-state__details-summary">{{ t('error.details') }}</summary>
+          <pre class="fe-state__details-pre">{{ loadError }}</pre>
+        </details>
+        <!-- /wiring:c4 -->
       </div>
       <!-- Search with zero hits — its own message, not "folder is empty". -->
       <div v-else-if="!loading && files.length === 0 && searchQuery" class="fe-state">
@@ -2345,19 +2547,33 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       </div>
     </div>
 
+    <!-- wiring:c3 — unified operations center. UploadProgress + PendingOpsTray
+         no longer draw their own corner UIs: they are renderless publishers
+         feeding the opsCenter store; the single visible surface is the
+         OperationsCenter badge + panel below. -->
     <UploadProgress
       :jobs="uploadJobs"
       :locale="locale"
+      :center="opsCenter"
       @cancel="onCancelUpload"
       @dismiss="onDismissUpload"
+      @retry="retryUploadJob"
     />
 
     <PendingOpsTray
       :ops="pendingOps.ops.value"
       :locale="locale"
+      :center="opsCenter"
       @dismiss="(id) => pendingOps.dismiss(id)"
     />
 
+    <OperationsCenter
+      :center="opsCenter"
+      :locale="locale"
+      :narrow="isNarrow"
+    />
+    <!-- /wiring:c3 -->
+
     <!-- bag:b4 — narrow-mode upload FAB (hidden in trash / read-only /
          virtual root; PendingOpsTray+UploadProgress shift up via CSS). -->
     <button
@@ -2534,14 +2750,30 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       @open-trash="loadTrash"
       @refresh="() => load()"
       @go-up="goUp"
+      @open-theme="showThemeGallery = true /* wiring:int */"
+      @open-shortcut-settings="showShortcutSettings = true /* wiring:int */"
+      @start-tour="startTour() /* wiring:int */"
     />
     <ShortcutsHelp
       :open="showShortcutsHelp"
       :locale="locale"
       @close="showShortcutsHelp = false"
+      @customize="showShortcutsHelp = false; showShortcutSettings = true /* wiring:c2 */"
     />
     <!-- /cila:c wiring -->
 
+    <!-- wiring:c1 — tema galerisi -->
+    <ThemeGallery
+      :open="showThemeGallery"
+      :locale="locale"
+      :theme="config.theme || 'auto'"
+      :dark="themeResolvedDark"
+      :current="activeThemeId"
+      @close="showThemeGallery = false"
+      @select="setActiveTheme"
+    />
+    <!-- /wiring:c1 -->
+
     <input
       ref="fileInputEl"
       type="file"
@@ -2567,6 +2799,42 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
         >{{ toast.actionLabel }}</button>
       </div>
     </transition>
+
+    <!-- wiring:c2 — shortcut settings modal + Space quick-look overlay -->
+    <ShortcutSettings
+      :open="showShortcutSettings"
+      :locale="locale"
+      :theme="config.theme || 'auto'"
+      @close="showShortcutSettings = false"
+    />
+    <QuickLook
+      :open="quickLookOpen"
+      :locale="locale"
+      :file="quickLookTarget"
+      :theme="config.theme || 'auto'"
+      :preview-url="(p: string) => api.previewUrl(p)"
+      :download-url="(p: string) => api.downloadUrl(p)"
+      :only-office-base="effectiveOnlyOfficeBase"
+      :only-office-config-endpoint="effectiveOnlyOfficeConfigEndpoint"
+      :auth-headers="() => buildAuthHeaders({ 'Content-Type': 'application/json' })"
+      :auth-credentials="api.credentialsMode()"
+      :drawio-url="effectiveDrawioUrl"
+      :pdf-worker-url="props.config.pdfWorkerUrl || null"
+      :viewer-base-url="props.config.viewerBaseUrl || null"
+      @close="quickLookOpen = false"
+      @nav="quickLookNav"
+      @open-full="quickLookOpenFull"
+    />
+    <!-- /wiring:c2 -->
+    <!-- wiring:c4 — onboarding coach-mark tour (teleports itself to body) -->
+    <OnboardingTour
+      :open="showTour"
+      :locale="locale"
+      :root="rootEl"
+      :theme="config.theme || 'auto'"
+      @close="onTourClose"
+    />
+    <!-- /wiring:c4 -->
   </div>
 </template>
 

package/src/components/CommandPalette.vue

@@ -53,6 +53,10 @@ const emit = defineEmits<{
   (e: 'go-up'): void;
   /* bul:s3 — an "everywhere" hit was chosen. */
   (e: 'open-hit', hit: GlobalSearchHit): void;
+  /* wiring:int — settings surfaces reachable from anywhere via the palette */
+  (e: 'open-theme'): void;
+  (e: 'open-shortcut-settings'): void;
+  (e: 'start-tour'): void;
 }>();
 
 const { t, nodeDisplayName } = useLocale(() => props.locale);
@@ -126,6 +130,10 @@ const commandItems = computed<PaletteItem[]>(() => {
     { command: 'open-trash', label: t('cmd.trash'), icon: '🗑', enabled: true },
     { command: 'refresh', label: t('toolbar.refresh'), icon: '⟳', enabled: true },
     { command: 'go-up', label: t('toolbar.go_up'), icon: '↑', enabled: props.canGoUp !== false },
+    /* wiring:int */
+    { command: 'open-theme', label: t('theme.menu'), icon: '🎨', enabled: true },
+    { command: 'open-shortcut-settings', label: t('shortcuts.settings.menu'), icon: '⌨', enabled: true },
+    { command: 'start-tour', label: t('tour.restart'), icon: '🎓', enabled: true },
   ];
   return defs
     .filter((d) => d.enabled && matchScore(d.label, q) >= 0)
@@ -310,6 +318,10 @@ function choose(item?: PaletteItem) {
       case 'open-trash': emit('open-trash'); break;
       case 'refresh': emit('refresh'); break;
       case 'go-up': emit('go-up'); break;
+      /* wiring:int */
+      case 'open-theme': emit('open-theme'); break;
+      case 'open-shortcut-settings': emit('open-shortcut-settings'); break;
+      case 'start-tour': emit('start-tour'); break;
     }
   }
 }

package/src/components/ContextMenu.vue

@@ -54,10 +54,23 @@ const y = ref(0);
 const targetNodes = ref<FileNode[]>([]);
 const menuEl = ref<HTMLElement | null>(null);
 
+/* wiring:c4 — where the pointer opened the menu; kept separate from x/y so
+ * the edge-flip can re-anchor ABOVE/LEFT of the cursor instead of merely
+ * clamping (a clamp near the bottom edge used to leave the menu covering
+ * the clicked row). */
+let anchorX = 0;
+let anchorY = 0;
+/* wiring:c4 — focus restore: whatever had focus before the menu opened gets
+ * it back on hide, so keyboard users don't fall back to <body>. */
+let prevFocus: HTMLElement | null = null;
+
 async function show(ev: { clientX: number; clientY: number }, nodes: FileNode[]) {
+  prevFocus = (document.activeElement as HTMLElement | null) ?? null; /* wiring:c4 */
   open.value = true;
   x.value = ev.clientX;
   y.value = ev.clientY;
+  anchorX = ev.clientX; /* wiring:c4 */
+  anchorY = ev.clientY; /* wiring:c4 */
   targetNodes.value = nodes;
   // After the menu renders, clamp it inside the viewport so a click near the
   // bottom/right edge doesn't push the menu off-screen (it opens down-right
@@ -70,6 +83,7 @@ async function show(ev: { clientX: number; clientY: number }, nodes: FileNode[])
     return;
   }
   clampToViewport();
+  focusItem(0); /* wiring:c4 — keyboard nav starts on the first item */
 }
 
 function clampToViewport() {
@@ -79,11 +93,16 @@ function clampToViewport() {
   const margin = 8;
   const vw = window.innerWidth;
   const vh = window.innerHeight;
-  if (y.value + rect.height > vh - margin) {
-    y.value = Math.max(margin, vh - rect.height - margin);
+  /* wiring:c4 — edge flip: overflowing the bottom/right edge re-anchors the
+   * menu above/left of the cursor when there's room; clamping stays as the
+   * fallback for tiny viewports. */
+  if (anchorY + rect.height > vh - margin) {
+    const flipped = anchorY - rect.height;
+    y.value = flipped >= margin ? flipped : Math.max(margin, vh - rect.height - margin);
   }
-  if (x.value + rect.width > vw - margin) {
-    x.value = Math.max(margin, vw - rect.width - margin);
+  if (anchorX + rect.width > vw - margin) {
+    const flipped = anchorX - rect.width;
+    x.value = flipped >= margin ? flipped : Math.max(margin, vw - rect.width - margin);
   }
 }
 
@@ -92,7 +111,42 @@ function hide() {
   /* bag:b4 — reset any in-flight sheet drag so reopening starts clean. */
   sheetDragging.value = false;
   sheetDragY.value = 0;
+  /* wiring:c4 — give focus back to the opener (row/card/⋯ button). */
+  prevFocus?.focus?.();
+  prevFocus = null;
+}
+
+/* === wiring:c4 — keyboard navigation (menu + sheet) ===
+ * Arrow keys cycle through enabled items, Home/End jump, Enter/Space
+ * activate the focused <button> natively, Esc closes (see onKey). Disabled
+ * buttons are unfocusable, so the query skips them by construction. */
+function menuItems(): HTMLElement[] {
+  const host = props.sheet ? sheetEl.value : menuEl.value;
+  if (!host) return [];
+  return Array.from(
+    host.querySelectorAll<HTMLElement>('.fe-ctx__item:not(:disabled)'),
+  );
+}
+
+function focusItem(idx: number) {
+  const items = menuItems();
+  if (items.length === 0) return;
+  const i = ((idx % items.length) + items.length) % items.length;
+  items[i]?.focus();
+}
+
+function moveFocus(delta: number) {
+  const items = menuItems();
+  if (items.length === 0) return;
+  const active = document.activeElement as HTMLElement | null;
+  const cur = active ? items.indexOf(active) : -1;
+  if (cur === -1) {
+    focusItem(delta > 0 ? 0 : items.length - 1);
+    return;
+  }
+  focusItem(cur + delta);
 }
+/* === /wiring:c4 === */
 
 /* bag:b4 — sheet drag-to-dismiss. Bound to the grab handle only, so the
  * scrollable item list keeps its native touch scrolling. Dragging past the
@@ -139,10 +193,60 @@ function pick(a: ContextAction) {
 }
 
 function onKey(e: KeyboardEvent) {
-  if (e.key === 'Escape') hide();
+  if (e.key === 'Escape') {
+    // Scoped close: Esc with the menu open closes ONLY the menu — the
+    // explorer's global onClose (which also dismisses modals/toasts)
+    // shouldn't fire underneath.
+    e.stopPropagation();
+    hide();
+    return;
+  }
+  if (e.key === 'Enter' || e.key === ' ') {
+    // Native button activation handles the pick; stop the bubble so the
+    // explorer's global Enter=open shortcut doesn't double-fire and pop
+    // the preview modal on top of the chosen action.
+    e.stopPropagation();
+    return;
+  }
+  /* wiring:c4 — arrow-key navigation; stopPropagation keeps the explorer's
+   * global shortcut handler (Enter=open, Backspace=up…) out of the loop
+   * while the menu is up. */
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    e.stopPropagation();
+    moveFocus(1);
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    e.stopPropagation();
+    moveFocus(-1);
+  } else if (e.key === 'Home') {
+    e.preventDefault();
+    focusItem(0);
+  } else if (e.key === 'End') {
+    e.preventDefault();
+    focusItem(-1);
+  } else if (e.key === 'Tab') {
+    // A menu is not a tab-stop container — Tab closes it (WAI-ARIA menu
+    // pattern) instead of tabbing behind the backdrop.
+    e.preventDefault();
+    hide();
+  }
 }
 
-const visibleActions = computed(() => props.actions.filter((a) => !a.hidden));
+/* wiring:c4 — hidden-entry filtering used to leave orphaned separators
+ * (leading/trailing/doubled) when the entries around a divider were hidden
+ * by RBAC or selection shape. Collapse them here so every visible divider
+ * actually separates two groups. */
+const visibleActions = computed(() => {
+  const vis = props.actions.filter((a) => !a.hidden);
+  const out: ContextAction[] = [];
+  for (const a of vis) {
+    if (a.divider && (out.length === 0 || out[out.length - 1].divider)) continue;
+    out.push(a);
+  }
+  while (out.length > 0 && out[out.length - 1].divider) out.pop();
+  return out;
+});
 
 const prefersDark = ref(false);
 let mq: MediaQueryList | undefined;
@@ -204,7 +308,7 @@ defineExpose({ show, hide });
           />
           <div class="fe-sheet__items">
             <template v-for="(a, i) in visibleActions" :key="a.key || i">
-              <div v-if="a.divider" class="fe-ctx__sep" />
+              <div v-if="a.divider" class="fe-ctx__sep" role="separator" />
               <button
                 v-else
                 type="button"
@@ -225,11 +329,13 @@ defineExpose({ show, hide });
           ref="menuEl"
           class="fe-ctx"
           role="menu"
+          aria-orientation="vertical"
+          :aria-label="t('sheet.menu') /* wiring:c4 */"
           :style="{ top: y + 'px', left: x + 'px' }"
           @click.stop
         >
           <template v-for="(a, i) in visibleActions" :key="a.key || i">
-            <div v-if="a.divider" class="fe-ctx__sep" />
+            <div v-if="a.divider" class="fe-ctx__sep" role="separator" />
             <button
               v-else
               type="button"

package/src/components/GridView.vue

@@ -2,11 +2,13 @@
 /**
  * GridView — card grid. Thumbnails preferred, fall back to icon.
  */
+import { ref } from 'vue'; /* wiring:c4 */
 import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { fileIconSvg } from '../lib/fileIcons';
 import { snippetSegments } from '../lib/snippet'; /* bul:s3 */
+import { applyDragGhost } from '../lib/dragGhost'; /* wiring:c4 */
 
 const props = defineProps<{
   files: FileNode[];
@@ -56,18 +58,34 @@ function onCtx(n: FileNode, ev: MouseEvent) {
 }
 
 function onItemDragStart(n: FileNode, ev: DragEvent) {
+  /* wiring:c4 — custom ghost (name + multi-select count badge), visual only. */
+  applyDragGhost(
+    ev,
+    nodeDisplayName(n),
+    props.selected.has(n.path) ? props.selected.size : 1,
+  );
   emit('item-drag-start', n, ev);
 }
 
+/* wiring:c4 — droptarget highlight, mirrors ListView (visual layer only). */
+const dropTargetPath = ref<string | null>(null);
+
 function onItemDragOver(n: FileNode, ev: DragEvent) {
   if (n.type !== 'dir') return;
   if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
   ev.preventDefault();
   ev.stopPropagation();
   if (ev.dataTransfer) ev.dataTransfer.dropEffect = 'move';
+  dropTargetPath.value = n.path; /* wiring:c4 */
+}
+
+/* wiring:c4 */
+function onItemDragLeave(n: FileNode) {
+  if (dropTargetPath.value === n.path) dropTargetPath.value = null;
 }
 
 function onItemDrop(n: FileNode, ev: DragEvent) {
+  dropTargetPath.value = null; /* wiring:c4 */
   if (n.type !== 'dir') return;
   if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
   ev.preventDefault();
@@ -128,7 +146,16 @@ function snippetTitle(snippet: string): string {
 </script>
 
 <template>
-  <div class="fe-grid" :class="{ 'is-loading': loading }">
+  <!-- wiring:c4 — listbox semantics (multi-selectable cards as options);
+       localized label + busy state. Structure/layout untouched. -->
+  <div
+    class="fe-grid"
+    :class="{ 'is-loading': loading }"
+    role="listbox"
+    aria-multiselectable="true"
+    :aria-label="t('grid.aria')"
+    :aria-busy="loading ? 'true' : undefined"
+  >
     <div
       v-for="n in files"
       :key="n.path"
@@ -138,14 +165,19 @@ function snippetTitle(snippet: string): string {
         'is-dir': n.type === 'dir',
         'is-trash': n.trashed,
         'is-clipped': clipped?.has(n.path),
+        'is-droptarget': dropTargetPath === n.path /* wiring:c4 */,
       }"
       tabindex="0"
+      role="option"
+      :aria-selected="isSelected(n) ? 'true' : 'false'"
+      :aria-label="nodeDisplayName(n) /* wiring:c4 */"
       draggable="true"
       @click="onClick(n, $event)"
       @dblclick="onDbl(n)"
       @contextmenu="onCtx(n, $event)"
       @dragstart="onItemDragStart(n, $event)"
       @dragover="onItemDragOver(n, $event)"
+      @dragleave="onItemDragLeave(n) /* wiring:c4 */"
       @drop="onItemDrop(n, $event)"
       @touchstart.passive="onTouchStart(n, $event)"
       @touchend="cancelPress"