npm - @brftech/filex-core - Versions diffs - 0.1.56 → 0.1.60 - Mend

@brftech/filex-core 0.1.56 → 0.1.60

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 (82) hide show

package/LICENSE +21 -21
package/README.md +108 -108
package/dist/{ArchiveViewer-CJdaw5x3.js → ArchiveViewer-CbUUEREI.js} +20 -20
package/dist/ArchiveViewer-CbUUEREI.js.map +1 -0
package/dist/{CsvViewer-QYx_tePQ.js → CsvViewer-72rDsQJX.js} +3 -3
package/dist/CsvViewer-72rDsQJX.js.map +1 -0
package/dist/{DrawioViewer-GWt0TyB7.js → DrawioViewer-DSyMwGvg.js} +7 -7
package/dist/DrawioViewer-DSyMwGvg.js.map +1 -0
package/dist/{EpubViewer-Je0ywklQ.js → EpubViewer-DvDa17d7.js} +3 -3
package/dist/EpubViewer-DvDa17d7.js.map +1 -0
package/dist/{IpynbViewer-TsB4gqP-.js → IpynbViewer-DibIkdsz.js} +3 -3
package/dist/IpynbViewer-DibIkdsz.js.map +1 -0
package/dist/{MermaidViewer-CXfeDS-7.js → MermaidViewer-BoFLtGvl.js} +3 -3
package/dist/MermaidViewer-BoFLtGvl.js.map +1 -0
package/dist/{PsdViewer-VtPpxKVe.js → PsdViewer-K2iZkwax.js} +3 -3
package/dist/PsdViewer-K2iZkwax.js.map +1 -0
package/dist/{TiffViewer-OINn9bbb.js → TiffViewer-JzDzbqpO.js} +3 -3
package/dist/TiffViewer-JzDzbqpO.js.map +1 -0
package/dist/{Viewer3D-xvvyiWHd.js → Viewer3D-WEMYCP8l.js} +7 -7
package/dist/Viewer3D-WEMYCP8l.js.map +1 -0
package/dist/filex-core.js +1 -1
package/dist/filex-core.umd.cjs +4 -4
package/dist/filex-core.umd.cjs.map +1 -1
package/dist/{index-CmSYzt6L.js → index-B5YT-m5Q.js} +209 -209
package/dist/index-B5YT-m5Q.js.map +1 -0
package/dist/style.css +1 -1
package/dist/useViewerFetch-czqbd2Lj.js.map +1 -1
package/package.json +1 -1
package/src/components/Breadcrumb.vue +282 -282
package/src/components/ContextMenu.vue +152 -152
package/src/components/GridView.vue +166 -166
package/src/components/ListView.vue +212 -212
package/src/components/PendingOpsTray.vue +91 -91
package/src/components/RecentlyOpened.vue +155 -155
package/src/components/StarButton.vue +101 -101
package/src/components/TagPicker.vue +184 -184
package/src/components/Toolbar.vue +220 -220
package/src/components/UploadProgress.vue +78 -78
package/src/composables/useFileApi.ts +692 -692
package/src/composables/useKeyboardShortcuts.ts +144 -144
package/src/composables/useLocale.ts +60 -60
package/src/composables/useMonacoLoader.ts +98 -98
package/src/composables/usePendingOps.ts +200 -200
package/src/composables/useSelection.ts +81 -81
package/src/composables/useUploadChunked.ts +250 -250
package/src/composables/useViewerFetch.ts +58 -58
package/src/index.ts +80 -80
package/src/locales/en.ts +122 -122
package/src/locales/index.ts +12 -12
package/src/locales/tr.ts +122 -122
package/src/modals/DeleteConfirmModal.vue +32 -32
package/src/modals/Modal.vue +104 -104
package/src/modals/NewFolderModal.vue +64 -64
package/src/modals/PermissionsModal.vue +815 -815
package/src/modals/PreviewModal.vue +1070 -1070
package/src/modals/RenameModal.vue +58 -58
package/src/modals/ShareModal.vue +135 -135
package/src/styles/base.css +1224 -1224
package/src/styles/variables.css +90 -90
package/src/types/FileNode.ts +136 -136
package/src/types/index.ts +27 -27
package/src/types/peers.d.ts +45 -45
package/src/viewers/ArchiveViewer.vue +186 -186
package/src/viewers/CsvViewer.vue +319 -319
package/src/viewers/DrawioViewer.vue +243 -243
package/src/viewers/EpubViewer.vue +307 -307
package/src/viewers/IpynbViewer.vue +365 -365
package/src/viewers/MermaidViewer.vue +259 -259
package/src/viewers/PdfViewer.vue +562 -562
package/src/viewers/PsdViewer.vue +264 -264
package/src/viewers/TiffViewer.vue +273 -273
package/src/viewers/Viewer3D.vue +120 -120
package/dist/ArchiveViewer-CJdaw5x3.js.map +0 -1
package/dist/CsvViewer-QYx_tePQ.js.map +0 -1
package/dist/DrawioViewer-GWt0TyB7.js.map +0 -1
package/dist/EpubViewer-Je0ywklQ.js.map +0 -1
package/dist/IpynbViewer-TsB4gqP-.js.map +0 -1
package/dist/MermaidViewer-CXfeDS-7.js.map +0 -1
package/dist/PsdViewer-VtPpxKVe.js.map +0 -1
package/dist/TiffViewer-OINn9bbb.js.map +0 -1
package/dist/Viewer3D-xvvyiWHd.js.map +0 -1
package/dist/index-CmSYzt6L.js.map +0 -1

package/src/components/ContextMenu.vue CHANGED Viewed

@@ -1,152 +1,152 @@
-<script setup lang="ts">
-/**
- * ContextMenu — Teleport-based menu.
- *
- * Teleported under <body> so no parent (Ionic <ion-page>, Filament's
- * transformed flex containers, panel sidebars, …) can shift the
- * `position: fixed` backdrop off-window.
- */
-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';
-export interface ContextAction {
-  key: string;
-  label: string;
-  icon?: string;
-  danger?: boolean;
-  disabled?: boolean;
-  hidden?: boolean;
-  divider?: boolean;
-}
-const props = defineProps<{
-  locale: LocaleCode;
-  actions: ContextAction[];
-  /**
-   * Resolved theme. Teleported into <body> we lose the `.fe` parent
-   * that scopes CSS vars, so we tag the backdrop with the current
-   * theme so variables.css can re-apply dark overrides outside the
-   * explorer tree.
-   */
-  theme?: ThemeMode;
-}>();
-const emit = defineEmits<{
-  (e: 'select', action: ContextAction, target: FileNode[]): void;
-}>();
-void useLocale(() => props.locale); // eager-instantiate t/lookup so future templates can reuse
-const open = ref(false);
-const x = ref(0);
-const y = ref(0);
-const targetNodes = ref<FileNode[]>([]);
-const menuEl = ref<HTMLElement | null>(null);
-async function show(ev: { clientX: number; clientY: number }, nodes: FileNode[]) {
-  open.value = true;
-  x.value = ev.clientX;
-  y.value = ev.clientY;
-  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
-  // from the cursor by default).
-  await nextTick();
-  clampToViewport();
-}
-function clampToViewport() {
-  const el = menuEl.value;
-  if (!el || typeof window === 'undefined') return;
-  const rect = el.getBoundingClientRect();
-  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);
-  }
-  if (x.value + rect.width > vw - margin) {
-    x.value = Math.max(margin, vw - rect.width - margin);
-  }
-}
-function hide() {
-  open.value = false;
-}
-function pick(a: ContextAction) {
-  if (a.disabled) return;
-  emit('select', a, targetNodes.value);
-  hide();
-}
-function onKey(e: KeyboardEvent) {
-  if (e.key === 'Escape') hide();
-}
-const visibleActions = computed(() => props.actions.filter((a) => !a.hidden));
-const prefersDark = ref(false);
-let mq: MediaQueryList | undefined;
-function syncPrefersDark(e?: MediaQueryListEvent | MediaQueryList) {
-  prefersDark.value = !!(e && 'matches' in e && e.matches);
-}
-onMounted(() => {
-  if (typeof window === 'undefined') return;
-  mq = window.matchMedia('(prefers-color-scheme: dark)');
-  syncPrefersDark(mq);
-  mq.addEventListener?.('change', syncPrefersDark);
-});
-onBeforeUnmount(() => {
-  mq?.removeEventListener?.('change', syncPrefersDark);
-});
-const themeClass = computed(() => {
-  const t = props.theme || 'auto';
-  return `fe-ctx-backdrop--theme-${t}`;
-});
-defineExpose({ show, hide });
-</script>
-<template>
-  <Teleport to="body">
-    <transition name="fe-ctx">
-      <div
-        v-if="open"
-        class="fe-ctx-backdrop"
-        :class="themeClass"
-        :data-prefers-dark="prefersDark ? '1' : '0'"
-        @click="hide"
-        @contextmenu.prevent="hide"
-        @keydown="onKey"
-      >
-        <div
-          ref="menuEl"
-          class="fe-ctx"
-          role="menu"
-          :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" />
-            <button
-              v-else
-              type="button"
-              class="fe-ctx__item"
-              :class="{ 'is-danger': a.danger, 'is-disabled': a.disabled }"
-              :disabled="a.disabled"
-              role="menuitem"
-              @click="pick(a)"
-            >
-              <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
-              <span class="fe-ctx__label">{{ a.label }}</span>
-            </button>
-          </template>
-        </div>
-      </div>
-    </transition>
-  </Teleport>
-</template>
+<script setup lang="ts">
+/**
+ * ContextMenu — Teleport-based menu.
+ *
+ * Teleported under <body> so no parent (Ionic <ion-page>, Filament's
+ * transformed flex containers, panel sidebars, …) can shift the
+ * `position: fixed` backdrop off-window.
+ */
+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';
+export interface ContextAction {
+  key: string;
+  label: string;
+  icon?: string;
+  danger?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  divider?: boolean;
+}
+const props = defineProps<{
+  locale: LocaleCode;
+  actions: ContextAction[];
+  /**
+   * Resolved theme. Teleported into <body> we lose the `.fe` parent
+   * that scopes CSS vars, so we tag the backdrop with the current
+   * theme so variables.css can re-apply dark overrides outside the
+   * explorer tree.
+   */
+  theme?: ThemeMode;
+}>();
+const emit = defineEmits<{
+  (e: 'select', action: ContextAction, target: FileNode[]): void;
+}>();
+void useLocale(() => props.locale); // eager-instantiate t/lookup so future templates can reuse
+const open = ref(false);
+const x = ref(0);
+const y = ref(0);
+const targetNodes = ref<FileNode[]>([]);
+const menuEl = ref<HTMLElement | null>(null);
+async function show(ev: { clientX: number; clientY: number }, nodes: FileNode[]) {
+  open.value = true;
+  x.value = ev.clientX;
+  y.value = ev.clientY;
+  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
+  // from the cursor by default).
+  await nextTick();
+  clampToViewport();
+}
+function clampToViewport() {
+  const el = menuEl.value;
+  if (!el || typeof window === 'undefined') return;
+  const rect = el.getBoundingClientRect();
+  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);
+  }
+  if (x.value + rect.width > vw - margin) {
+    x.value = Math.max(margin, vw - rect.width - margin);
+  }
+}
+function hide() {
+  open.value = false;
+}
+function pick(a: ContextAction) {
+  if (a.disabled) return;
+  emit('select', a, targetNodes.value);
+  hide();
+}
+function onKey(e: KeyboardEvent) {
+  if (e.key === 'Escape') hide();
+}
+const visibleActions = computed(() => props.actions.filter((a) => !a.hidden));
+const prefersDark = ref(false);
+let mq: MediaQueryList | undefined;
+function syncPrefersDark(e?: MediaQueryListEvent | MediaQueryList) {
+  prefersDark.value = !!(e && 'matches' in e && e.matches);
+}
+onMounted(() => {
+  if (typeof window === 'undefined') return;
+  mq = window.matchMedia('(prefers-color-scheme: dark)');
+  syncPrefersDark(mq);
+  mq.addEventListener?.('change', syncPrefersDark);
+});
+onBeforeUnmount(() => {
+  mq?.removeEventListener?.('change', syncPrefersDark);
+});
+const themeClass = computed(() => {
+  const t = props.theme || 'auto';
+  return `fe-ctx-backdrop--theme-${t}`;
+});
+defineExpose({ show, hide });
+</script>
+<template>
+  <Teleport to="body">
+    <transition name="fe-ctx">
+      <div
+        v-if="open"
+        class="fe-ctx-backdrop"
+        :class="themeClass"
+        :data-prefers-dark="prefersDark ? '1' : '0'"
+        @click="hide"
+        @contextmenu.prevent="hide"
+        @keydown="onKey"
+      >
+        <div
+          ref="menuEl"
+          class="fe-ctx"
+          role="menu"
+          :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" />
+            <button
+              v-else
+              type="button"
+              class="fe-ctx__item"
+              :class="{ 'is-danger': a.danger, 'is-disabled': a.disabled }"
+              :disabled="a.disabled"
+              role="menuitem"
+              @click="pick(a)"
+            >
+              <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
+              <span class="fe-ctx__label">{{ a.label }}</span>
+            </button>
+          </template>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>

package/src/components/GridView.vue CHANGED Viewed

@@ -1,166 +1,166 @@
-<script setup lang="ts">
-/**
- * GridView — card grid. Thumbnails preferred, fall back to icon.
- */
-import type { FileNode } from '../types/FileNode';
-import type { LocaleCode } from '../types/ExplorerConfig';
-import { useLocale } from '../composables/useLocale';
-const props = defineProps<{
-  files: FileNode[];
-  selected: Set<string>;
-  clipped?: Set<string>;
-  showParentPath?: boolean;
-  locale: LocaleCode;
-  loading?: boolean;
-}>();
-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 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) {
-  emit('item-drag-start', n, ev);
-}
-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';
-}
-function onItemDrop(n: FileNode, ev: DragEvent) {
-  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);
-}
-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);
-}
-function iconFor(n: FileNode): string {
-  if (n.mime_type === 'inode/storage') return '💾';
-  if (n.type === 'dir') return '📁';
-  const e = (n.extension || '').toLowerCase();
-  if (['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp', 'svg'].includes(e)) return '🖼';
-  if (['mp4', 'webm', 'mov', 'mkv'].includes(e)) return '🎞';
-  if (['mp3', 'wav', 'flac', 'ogg'].includes(e)) return '🎵';
-  if (e === 'pdf') return '📕';
-  if (['doc', 'docx', 'odt'].includes(e)) return '📄';
-  if (['xls', 'xlsx', 'csv'].includes(e)) return '📊';
-  if (['ppt', 'pptx'].includes(e)) return '📽';
-  if (['zip', 'tar', 'gz', '7z'].includes(e)) return '🗜';
-  return '📎';
-}
-</script>
-<template>
-  <div class="fe-grid" :class="{ 'is-loading': loading }">
-    <div
-      v-for="n in files"
-      :key="n.path"
-      class="fe-grid__card"
-      :class="{
-        'is-selected': isSelected(n),
-        'is-dir': n.type === 'dir',
-        'is-trash': n.trashed,
-        'is-clipped': clipped?.has(n.path),
-      }"
-      tabindex="0"
-      draggable="true"
-      @click="onClick(n, $event)"
-      @dblclick="onDbl(n)"
-      @contextmenu="onCtx(n, $event)"
-      @dragstart="onItemDragStart(n, $event)"
-      @dragover="onItemDragOver(n, $event)"
-      @drop="onItemDrop(n, $event)"
-      @touchstart.passive="onTouchStart(n, $event)"
-      @touchend="cancelPress"
-      @touchmove="cancelPress"
-    >
-      <div class="fe-grid__thumb">
-        <!--
-          draggable="false" — HTML5 image drag dataTransfer adds 'Files'
-          MIME, which trips the parent's upload handler; without this
-          the user dragging an item with a thumbnail re-uploads it.
-          Parent card stays draggable=true so internal move works.
-        -->
-        <img
-          v-if="n.thumb_url"
-          :src="n.thumb_url"
-          :alt="n.basename"
-          loading="lazy"
-          draggable="false"
-        />
-        <span v-else class="fe-grid__icon">{{ iconFor(n) }}</span>
-      </div>
-      <div class="fe-grid__label" :title="n.basename">
-        {{ nodeDisplayName(n) }}
-      </div>
-      <div
-        v-if="showParentPath"
-        class="fe-grid__parent"
-        :title="parentDir(n.path)"
-      >{{ parentDir(n.path) || '—' }}</div>
-      <div class="fe-grid__meta">
-        {{ n.type === 'dir' ? '—' : formatSize(n.size) }}
-      </div>
-    </div>
-    <div v-if="!loading && files.length === 0" class="fe-grid__empty">
-      {{ t('empty.folder') }}
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * GridView — card grid. Thumbnails preferred, fall back to icon.
+ */
+import type { FileNode } from '../types/FileNode';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+const props = defineProps<{
+  files: FileNode[];
+  selected: Set<string>;
+  clipped?: Set<string>;
+  showParentPath?: boolean;
+  locale: LocaleCode;
+  loading?: boolean;
+}>();
+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 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) {
+  emit('item-drag-start', n, ev);
+}
+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';
+}
+function onItemDrop(n: FileNode, ev: DragEvent) {
+  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);
+}
+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);
+}
+function iconFor(n: FileNode): string {
+  if (n.mime_type === 'inode/storage') return '💾';
+  if (n.type === 'dir') return '📁';
+  const e = (n.extension || '').toLowerCase();
+  if (['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp', 'svg'].includes(e)) return '🖼';
+  if (['mp4', 'webm', 'mov', 'mkv'].includes(e)) return '🎞';
+  if (['mp3', 'wav', 'flac', 'ogg'].includes(e)) return '🎵';
+  if (e === 'pdf') return '📕';
+  if (['doc', 'docx', 'odt'].includes(e)) return '📄';
+  if (['xls', 'xlsx', 'csv'].includes(e)) return '📊';
+  if (['ppt', 'pptx'].includes(e)) return '📽';
+  if (['zip', 'tar', 'gz', '7z'].includes(e)) return '🗜';
+  return '📎';
+}
+</script>
+<template>
+  <div class="fe-grid" :class="{ 'is-loading': loading }">
+    <div
+      v-for="n in files"
+      :key="n.path"
+      class="fe-grid__card"
+      :class="{
+        'is-selected': isSelected(n),
+        'is-dir': n.type === 'dir',
+        'is-trash': n.trashed,
+        'is-clipped': clipped?.has(n.path),
+      }"
+      tabindex="0"
+      draggable="true"
+      @click="onClick(n, $event)"
+      @dblclick="onDbl(n)"
+      @contextmenu="onCtx(n, $event)"
+      @dragstart="onItemDragStart(n, $event)"
+      @dragover="onItemDragOver(n, $event)"
+      @drop="onItemDrop(n, $event)"
+      @touchstart.passive="onTouchStart(n, $event)"
+      @touchend="cancelPress"
+      @touchmove="cancelPress"
+    >
+      <div class="fe-grid__thumb">
+        <!--
+          draggable="false" — HTML5 image drag dataTransfer adds 'Files'
+          MIME, which trips the parent's upload handler; without this
+          the user dragging an item with a thumbnail re-uploads it.
+          Parent card stays draggable=true so internal move works.
+        -->
+        <img
+          v-if="n.thumb_url"
+          :src="n.thumb_url"
+          :alt="n.basename"
+          loading="lazy"
+          draggable="false"
+        />
+        <span v-else class="fe-grid__icon">{{ iconFor(n) }}</span>
+      </div>
+      <div class="fe-grid__label" :title="n.basename">
+        {{ nodeDisplayName(n) }}
+      </div>
+      <div
+        v-if="showParentPath"
+        class="fe-grid__parent"
+        :title="parentDir(n.path)"
+      >{{ parentDir(n.path) || '—' }}</div>
+      <div class="fe-grid__meta">
+        {{ formatSize(n.size) }}
+      </div>
+    </div>
+    <div v-if="!loading && files.length === 0" class="fe-grid__empty">
+      {{ t('empty.folder') }}
+    </div>
+  </div>
+</template>