npm - @brftech/filex-core - Versions diffs - 0.4.2 → 0.6.0 - Mend

@brftech/filex-core 0.4.2 → 0.6.0

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

Files changed (58) hide show

package/dist/{ArchiveViewer-B_0IQExT.js → ArchiveViewer-EGgNqLPE.js} +2 -2
package/dist/{ArchiveViewer-B_0IQExT.js.map → ArchiveViewer-EGgNqLPE.js.map} +1 -1
package/dist/{CsvViewer-maMfUy5i.js → CsvViewer-BvriJ42M.js} +2 -2
package/dist/{CsvViewer-maMfUy5i.js.map → CsvViewer-BvriJ42M.js.map} +1 -1
package/dist/{DrawioViewer-DP_pXI00.js → DrawioViewer-B_bSPsWX.js} +2 -2
package/dist/{DrawioViewer-DP_pXI00.js.map → DrawioViewer-B_bSPsWX.js.map} +1 -1
package/dist/{EpubViewer-DSaqGnVx.js → EpubViewer-hl68h4gG.js} +2 -2
package/dist/{EpubViewer-DSaqGnVx.js.map → EpubViewer-hl68h4gG.js.map} +1 -1
package/dist/{IpynbViewer-BmdBanF1.js → IpynbViewer-lhwOjXK7.js} +2 -2
package/dist/{IpynbViewer-BmdBanF1.js.map → IpynbViewer-lhwOjXK7.js.map} +1 -1
package/dist/{MermaidViewer-Drlkl0Z5.js → MermaidViewer-H2Z6AYXg.js} +2 -2
package/dist/{MermaidViewer-Drlkl0Z5.js.map → MermaidViewer-H2Z6AYXg.js.map} +1 -1
package/dist/{PsdViewer-gftUJrsm.js → PsdViewer-Bsk-11yH.js} +2 -2
package/dist/{PsdViewer-gftUJrsm.js.map → PsdViewer-Bsk-11yH.js.map} +1 -1
package/dist/{TiffViewer-0Uv0-Lxh.js → TiffViewer-D-j9vycG.js} +2 -2
package/dist/{TiffViewer-0Uv0-Lxh.js.map → TiffViewer-D-j9vycG.js.map} +1 -1
package/dist/{Viewer3D-Gu3kUpxV.js → Viewer3D-Bcr70rTe.js} +2 -2
package/dist/{Viewer3D-Gu3kUpxV.js.map → Viewer3D-Bcr70rTe.js.map} +1 -1
package/dist/filex-core.js +50 -25
package/dist/filex-core.umd.cjs +59 -58
package/dist/filex-core.umd.cjs.map +1 -1
package/dist/index-C_ZSnk_I.js +11109 -0
package/dist/index-C_ZSnk_I.js.map +1 -0
package/dist/index.d.ts +597 -4
package/dist/style.css +1 -1
package/package.json +1 -1
package/src/FileExplorer.vue +636 -15
package/src/components/CommandPalette.vue +24 -1
package/src/components/ContextMenu.vue +114 -8
package/src/components/GalleryView.vue +214 -0
package/src/components/GridView.vue +34 -1
package/src/components/InspectorPanel.vue +170 -0
package/src/components/ListView.vue +40 -6
package/src/components/OnboardingTour.vue +332 -0
package/src/components/OperationsCenter.vue +284 -0
package/src/components/PendingOpsTray.vue +50 -66
package/src/components/QuickLook.vue +142 -0
package/src/components/SecondaryPane.vue +411 -0
package/src/components/ShortcutSettings.vue +270 -0
package/src/components/ShortcutsHelp.vue +30 -9
package/src/components/TabBar.vue +174 -0
package/src/components/ThemeGallery.vue +253 -0
package/src/components/Toolbar.vue +75 -11
package/src/components/UploadProgress.vue +49 -57
package/src/composables/useFileApi.ts +53 -0
package/src/composables/useKeyboardShortcuts.ts +340 -137
package/src/composables/useOperations.ts +291 -0
package/src/composables/useTabs.ts +222 -0
package/src/index.ts +51 -0
package/src/lib/dragGhost.ts +41 -0
package/src/lib/themes.ts +505 -0
package/src/locales/en.ts +125 -0
package/src/locales/tr.ts +125 -0
package/src/modals/Modal.vue +41 -5
package/src/styles/base.css +1210 -0
package/src/types/FileNode.ts +1 -1
package/dist/index-BLocdbmc.js +0 -7993
package/dist/index-BLocdbmc.js.map +0 -1

package/src/components/CommandPalette.vue CHANGED Viewed

@@ -39,6 +39,8 @@ const props = defineProps<{
   canGoUp?: boolean;
   /* bul:s3 — global search callback; absent = older host, group hidden. */
   globalSearch?: (q: string) => Promise<GlobalSearchHit[]>;
+  /* wiring:d1 — false hides the split command (narrow embeds). */
+  splitEnabled?: boolean;
 }>();
 const emit = defineEmits<{
@@ -53,6 +55,13 @@ 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;
+  /* wiring:d1 — tab / split commands */
+  (e: 'tab-new'): void;
+  (e: 'split-toggle'): void;
 }>();
 const { t, nodeDisplayName } = useLocale(() => props.locale);
@@ -122,10 +131,17 @@ const commandItems = computed<PaletteItem[]>(() => {
   const defs: Array<{ command: string; label: string; icon: string; enabled: boolean }> = [
     { command: 'new-folder', label: t('toolbar.new_folder'), icon: '📁', enabled: props.canWrite !== false },
     { command: 'upload', label: t('toolbar.upload'), icon: '⬆', enabled: props.canWrite !== false },
-    { command: 'toggle-view', label: t('cmd.view_toggle'), icon: props.viewMode === 'list' ? '▦' : '☰', enabled: true },
+    { command: 'toggle-view', label: t('cmd.view_toggle'), icon: props.viewMode === 'list' ? '▦' : props.viewMode === 'grid' ? '▣' : '☰', enabled: true /* wiring:d2 — sıradaki mod ikonu (list→grid→galeri→list) */ },
     { 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 },
+    /* wiring:d1 — sekme + split */
+    { command: 'tab-new', label: t('cmd.tab_new'), icon: '⧉', enabled: true },
+    { command: 'split-toggle', label: t('cmd.split_toggle'), icon: '◫', enabled: props.splitEnabled !== false },
   ];
   return defs
     .filter((d) => d.enabled && matchScore(d.label, q) >= 0)
@@ -310,6 +326,13 @@ 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;
+      /* wiring:d1 */
+      case 'tab-new': emit('tab-new'); break;
+      case 'split-toggle': emit('split-toggle'); break;
     }
   }
 }

package/src/components/ContextMenu.vue CHANGED Viewed

@@ -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/GalleryView.vue ADDED Viewed

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+// (unscoped styles by design — see base.css wiring:d2 block; SFC scoped
+// styles are banned for webcomponent data-v hash mismatch reasons.)
+/**
+ * GalleryView — wiring:d2. Third view mode: large-thumbnail gallery for
+ * visual browsing (photos/videos). Derived from GridView (same props/emits,
+ * same listbox a11y, same selection/drag/touch contract) but renders big
+ * square tiles: thumbnail (or SVG file-type icon fallback) with the name
+ * below and size+date revealed on hover/focus. GridView itself is untouched.
+ */
+import { ref } from 'vue';
+import type { FileNode } from '../types/FileNode';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { fileIconSvg } from '../lib/fileIcons';
+import { applyDragGhost } from '../lib/dragGhost';
+const props = defineProps<{
+  files: FileNode[];
+  selected: Set<string>;
+  clipped?: Set<string>;
+  showParentPath?: boolean;
+  locale: LocaleCode;
+  loading?: boolean;
+  /** Authenticated thumb resolver (useThumbs.src) — same contract as
+   *  GridView: raw `thumb_url` is root-relative and unauthenticated, so
+   *  embedded hosts NEED this. null = icon fallback. */
+  thumbSrc?: (n: FileNode) => string | null;
+}>();
+const emit = defineEmits<{
+  (e: 'click-card', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
+  (e: 'dbl-card', node: FileNode): void;
+  (e: 'context-card', node: FileNode, ev: MouseEvent): void;
+  (e: 'item-drag-start', node: FileNode, ev: DragEvent): void;
+  (e: 'item-drop-into', target: FileNode, ev: DragEvent): void;
+}>();
+const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
+function thumbOf(n: FileNode): string | null {
+  return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
+}
+function isSelected(n: FileNode): boolean {
+  return props.selected.has(n.path);
+}
+function onClick(n: FileNode, ev: MouseEvent) {
+  emit('click-card', n, { ctrl: ev.ctrlKey || ev.metaKey, shift: ev.shiftKey });
+}
+function onDbl(n: FileNode) {
+  emit('dbl-card', n);
+}
+function onCtx(n: FileNode, ev: MouseEvent) {
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('context-card', n, ev);
+}
+function onItemDragStart(n: FileNode, ev: DragEvent) {
+  applyDragGhost(
+    ev,
+    nodeDisplayName(n),
+    props.selected.has(n.path) ? props.selected.size : 1,
+  );
+  emit('item-drag-start', n, ev);
+}
+// Drop-target highlight — mirrors GridView (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;
+}
+function onItemDragLeave(n: FileNode) {
+  if (dropTargetPath.value === n.path) dropTargetPath.value = null;
+}
+function onItemDrop(n: FileNode, ev: DragEvent) {
+  dropTargetPath.value = null;
+  if (n.type !== 'dir') return;
+  if (!ev.dataTransfer?.types.includes('application/x-brf-files')) return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  emit('item-drop-into', n, ev);
+}
+// Long-press → context menu, same as GridView (touch parity).
+let pressTimer: ReturnType<typeof setTimeout> | undefined;
+let pressTarget: FileNode | null = null;
+function onTouchStart(n: FileNode, ev: TouchEvent) {
+  pressTarget = n;
+  if (pressTimer) clearTimeout(pressTimer);
+  pressTimer = setTimeout(() => {
+    if (pressTarget) {
+      const t0 = ev.touches[0];
+      emit('context-card', pressTarget, {
+        clientX: t0.clientX,
+        clientY: t0.clientY,
+        preventDefault: () => {},
+      } as unknown as MouseEvent);
+    }
+  }, 500);
+}
+function cancelPress() {
+  if (pressTimer) clearTimeout(pressTimer);
+  pressTarget = null;
+}
+function parentDir(path: string): string {
+  const stripped = path.replace(/^[a-z][a-z0-9+.-]*:\/\//i, '');
+  const idx = stripped.lastIndexOf('/');
+  if (idx === -1) return '';
+  return stripped.slice(0, idx);
+}
+// Special rows keep their emoji (trash/storage are not file-TYPE icons).
+function specialEmojiFor(n: FileNode): string | null {
+  if (n.basename === '.trash') return '🗑';
+  if (n.mime_type === 'inode/storage') return '💾';
+  return null;
+}
+function displayDate(ms: number | undefined): string {
+  if (!ms) return '';
+  const d = new Date(ms * (ms < 1e12 ? 1000 : 1));
+  return d.toLocaleString();
+}
+// Hover meta line: size for files, entry count (when known) for dirs.
+function metaFor(n: FileNode): string {
+  const date = displayDate(n.last_modified);
+  const size = n.type === 'dir' ? '' : formatSize(n.size);
+  return [size, date].filter((s) => !!s).join(' · ');
+}
+</script>
+<template>
+  <div
+    class="fe-gal"
+    :class="{ 'is-loading': loading }"
+    role="listbox"
+    aria-multiselectable="true"
+    :aria-label="t('gallery.aria')"
+    :aria-busy="loading ? 'true' : undefined"
+  >
+    <div
+      v-for="n in files"
+      :key="n.path"
+      class="fe-gal__card"
+      :class="{
+        'is-selected': isSelected(n),
+        'is-dir': n.type === 'dir',
+        'is-trash': n.trashed,
+        'is-clipped': clipped?.has(n.path),
+        'is-droptarget': dropTargetPath === n.path,
+      }"
+      tabindex="0"
+      role="option"
+      :aria-selected="isSelected(n) ? 'true' : 'false'"
+      :aria-label="nodeDisplayName(n)"
+      draggable="true"
+      @click="onClick(n, $event)"
+      @dblclick="onDbl(n)"
+      @contextmenu="onCtx(n, $event)"
+      @dragstart="onItemDragStart(n, $event)"
+      @dragover="onItemDragOver(n, $event)"
+      @dragleave="onItemDragLeave(n)"
+      @drop="onItemDrop(n, $event)"
+      @touchstart.passive="onTouchStart(n, $event)"
+      @touchend="cancelPress"
+      @touchmove="cancelPress"
+    >
+      <div class="fe-gal__thumb">
+        <!-- draggable="false" for the same reason as GridView: HTML5 image
+             drag adds a 'Files' MIME to dataTransfer, which would trip the
+             parent's upload handler on internal drags. -->
+        <img
+          v-if="thumbOf(n)"
+          :src="thumbOf(n)!"
+          :alt="n.basename"
+          loading="lazy"
+          draggable="false"
+        />
+        <span v-else-if="specialEmojiFor(n)" class="fe-gal__icon">{{ specialEmojiFor(n) }}</span>
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+        <span v-else class="fe-gal__icon fe-gal__icon--svg" v-html="fileIconSvg(n)"></span>
+        <div class="fe-gal__meta" aria-hidden="true">
+          <span v-if="metaFor(n)" class="fe-gal__meta-line">{{ metaFor(n) }}</span>
+          <span
+            v-if="showParentPath && parentDir(n.path)"
+            class="fe-gal__meta-line fe-gal__meta-line--path"
+            :title="parentDir(n.path)"
+          >{{ parentDir(n.path) }}</span>
+        </div>
+      </div>
+      <div class="fe-gal__label" :title="n.basename">
+        {{ nodeDisplayName(n) }}
+      </div>
+    </div>
+    <div v-if="!loading && files.length === 0" class="fe-gal__empty">
+      {{ t('empty.folder') }}
+    </div>
+  </div>
+</template>

package/src/components/GridView.vue CHANGED Viewed

@@ -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,20 @@ 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 */"
+      :data-fe-path="n.path /* wiring:d1 — orta-tık yeni sekme delegasyonu */"
       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"