@brftech/filex-core 0.41.2 → 0.41.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brftech/filex-core",
-  "version": "0.41.2",
+  "version": "0.41.4",
   "description": "filex core — Vue 3 source of truth for the filex file manager (FileExplorer + ConnectionsPanel SFCs, composables, types)",
   "type": "module",
   "main": "./dist/filex-core.umd.cjs",

package/src/components/FilePane.vue

@@ -237,7 +237,7 @@ const emit = defineEmits<{
   /** The virtual `.trash` row was opened — the trash view carries the restore
    *  actions and belongs to the main pane, so the host decides. */
   (e: 'open-trash'): void;
-  (e: 'click-row', node: FileNode, mod: { ctrl: boolean; shift: boolean; touch?: boolean }): void;
+  (e: 'click-row', node: FileNode, mod: { ctrl: boolean; shift: boolean }): void;
   /** Right-click. `null` = empty space (nothing selected → "Paste" only). */
   (e: 'context', node: FileNode | null, ev: MouseEvent): void;
   (e: 'clear-selection'): void;
@@ -444,48 +444,36 @@ const paneSubfolders = computed(() =>
  * `useSelection` instance for this pane answers. One set of Ctrl/Shift
  * semantics for both panes — the old right pane had a simplified copy in
  * which Shift behaved as Ctrl. */
-/* issue #26, second round — a press on the NAME opens, so the second click of
- * a habitual double-click lands on whatever the NEW listing put under the
+/* issue #26 — any click that is not on the checkbox OPENS, so the second click
+ * of a habitual double-click lands on whatever the NEW listing put under the
  * pointer (the folder already opened on the first click). Without this guard
- * that click would open or select a row the user never aimed at, and a file's
- * name would open twice (two viewer tabs). */
-const NAME_OPEN_GUARD_MS = 500;
-let nameOpenedAt = 0;
+ * that click would open a row the user never aimed at — or tick its box — and
+ * a file would open twice (two viewer tabs). */
+const OPEN_GUARD_MS = 500;
+let openedAt = 0;
 
-function withinNameOpenGuard(): boolean {
-  return Date.now() - nameOpenedAt < NAME_OPEN_GUARD_MS;
+function withinOpenGuard(): boolean {
+  return Date.now() - openedAt < OPEN_GUARD_MS;
 }
 
 function onViewClick(n: FileNode, mod: ClickMod) {
-  if (withinNameOpenGuard()) return;
-  /* issue #26, second round — the reporter's rule on every device: a press on
-   * the item's name opens it, mouse or finger, selection or not. Ctrl/shift
-   * still mean "add to / extend the selection", so a modifier click on a name
-   * selects as it always did. The checkbox selects on its own path. */
-  if (mod.name && !mod.ctrl && !mod.shift) {
-    nameOpenedAt = Date.now();
-    onRowOpen(n);
+  if (withinOpenGuard()) return;
+  /* issue #26, fourth round — the reporter's rule, on every device: "only
+   * clicking on checkbox selects it, any other click will open". The checkbox
+   * is the one click that reaches the selection; a click or tap anywhere else
+   * on the item opens it, Ctrl/Shift held or not, selection or not. See
+   * composables/useRowTouch. */
+  if (mod.check) {
+    emit('activate');
+    emit('click-row', n, { ctrl: true, shift: mod.shift });
     return;
   }
-  /* issue #26 — a finger has no double-click, so a TAP elsewhere on the item
-   * is the open gesture too: with nothing selected it opens what it lands on,
-   * exactly as a double-click would. Once something is selected (a long press
-   * selects, via its menu) such a tap adds to or removes from the selection,
-   * so picking several files still works. A mouse click beside the name keeps
-   * click-to-select; see composables/useRowTouch. */
-  if (mod.touch && !mod.ctrl && !mod.shift) {
-    if (props.selected.size === 0) {
-      onRowOpen(n);
-      return;
-    }
-    mod = { ...mod, ctrl: true };
-  }
-  emit('activate');
-  emit('click-row', n, mod);
+  openedAt = Date.now();
+  onRowOpen(n);
 }
 
 function onViewDbl(n: FileNode) {
-  if (withinNameOpenGuard()) return;
+  if (withinOpenGuard()) return;
   onRowOpen(n);
 }
 

package/src/components/GalleryView.vue

@@ -13,7 +13,8 @@ import { hasInternalDrag } from '../lib/dragOut';
 import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
+import { checkMod, clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
+import ItemCheck from './ItemCheck.vue';
 import { encryptedFolderTile, fileIconTile, isEncryptedFolder } from '../lib/fileIcons';
 import {
   createFilePreviews,
@@ -30,7 +31,7 @@ import {
 } from '../lib/dateGroups'; /* gruplama */
 import { useSortStore, type ListingOrder } from '../lib/sortOrder'; /* gruplama */
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   files: FileNode[];
   selected: Set<string>;
   clipped?: Set<string>;
@@ -74,7 +75,16 @@ const props = defineProps<{
    * order the tiles are not in. Omitted = an ordinary folder listing.
    */
   order?: ListingOrder;
-}>();
+  /**
+   * issue #26 — draw the checkbox on each card, the one click that selects.
+   * Default on. Same prop, same meaning as GridView's.
+   */
+  selectable?: boolean;
+}>(), {
+  // ⚠ Not left to `undefined`: Vue casts an absent boolean prop to false, and
+  // the listing would lose its checkboxes wherever the host said nothing.
+  selectable: true,
+});
 
 const emit = defineEmits<{
   (e: 'click-card', node: FileNode, mod: ClickMod): void;
@@ -158,8 +168,17 @@ function isSelected(n: FileNode): boolean {
   return props.selected.has(n.path);
 }
 
+/**
+ * issue #26 — the card's checkbox is the one click that selects (a click
+ * anywhere else on the card opens it), routed exactly like the list row's:
+ * one `click-card` emit marked `check`, one `useSelection.click`.
+ */
+function onCheckClick(n: FileNode, ev: MouseEvent) {
+  emit('click-card', n, checkMod(ev));
+}
+
 function onClick(n: FileNode, ev: MouseEvent) {
-  emit('click-card', n, clickMod(ev, touch.isTap(ev), '.fe-gal__label'));
+  emit('click-card', n, clickMod(ev, touch.isTap(ev)));
 }
 
 function onDbl(n: FileNode) {
@@ -207,8 +226,13 @@ function onItemDrop(n: FileNode, ev: DragEvent) {
 }
 
 /* Long press → the card's menu; a tap is reported as a tap (issue #26). */
-const touch = useRowTouch<FileNode>((n, at) =>
-  emit('context-card', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+const touch = useRowTouch<FileNode>(
+  (n, at) =>
+    emit('context-card', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+  {
+    // A finger lifted on the item, off its controls, opens at touchend — see useRowTouch.
+    onTap: (n) => emit('click-card', n, { ctrl: false, shift: false, touch: true }),
+  },
 );
 
 /**
@@ -233,7 +257,7 @@ function metaFor(n: FileNode): string {
 <template>
   <div
     class="fe-gal"
-    :class="{ 'is-loading': loading }"
+    :class="{ 'is-loading': loading, 'has-selection': selectable && selected.size > 0 }"
     role="listbox"
     aria-multiselectable="true"
     :aria-label="t('gallery.aria')"
@@ -268,7 +292,7 @@ function metaFor(n: FileNode): string {
       @dragleave="onItemDragLeave(n)"
       @drop="onItemDrop(n, $event)"
       @touchstart.passive="touch.onTouchStart(n, $event)"
-      @touchend.passive="touch.onTouchEnd"
+      @touchend="touch.onTouchEnd"
       @touchmove.passive="touch.onTouchMove"
     >
       <div class="fe-gal__thumb" :ref="(el) => bindPreview(el, n)">
@@ -346,6 +370,18 @@ function metaFor(n: FileNode): string {
           class="fe-thumb__play"
           aria-hidden="true"
         ></span>
+        <!-- issue #26 — the card's checkbox, the one click that selects: the
+             corner opposite the star, on the same reveal rule plus "anything
+             is selected" (styles/base.css .fe-item-check). -->
+        <span
+          v-if="selectable"
+          class="fe-item-check fe-gal__check"
+          data-fe-control
+          @click.stop="onCheckClick(n, $event)"
+          @dblclick.stop
+        >
+          <ItemCheck :on="isSelected(n)" :label="nodeDisplayName(n)" />
+        </span>
         <div v-if="canStar(n)" class="fe-gal__star" @click.stop @dblclick.stop>
           <StarButton
             :starred="!!starredIds?.has(n.id!)"

package/src/components/GridView.vue

@@ -20,7 +20,8 @@ import type { FileNode } from '../types/FileNode';
 import { hasInternalDrag } from '../lib/dragOut';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
+import { checkMod, clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
+import ItemCheck from './ItemCheck.vue';
 import { encryptedFolderTile, fileIconTile, isEncryptedFolder } from '../lib/fileIcons';
 import {
   createFilePreviews,
@@ -38,7 +39,7 @@ import StarButton from './StarButton.vue';
 import { snippetSegments } from '../lib/snippet'; /* bul:s3 */
 import { applyDragGhost } from '../lib/dragGhost'; /* wiring:c4 */
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   files: FileNode[];
   selected: Set<string>;
   clipped?: Set<string>;
@@ -108,7 +109,17 @@ const props = defineProps<{
    * type tiles. Absent/false = the ordinary case.
    */
   e2eActive?: boolean;
-}>();
+  /**
+   * issue #26 — draw the checkbox on each card, the one click that selects.
+   * Default on. Home passes false: its cards open on a click and there is no
+   * selection there to put anything into.
+   */
+  selectable?: boolean;
+}>(), {
+  // ⚠ Not left to `undefined`: Vue casts an absent boolean prop to false, and
+  // the listing would lose its checkboxes wherever the host said nothing.
+  selectable: true,
+});
 
 const emit = defineEmits<{
   (e: 'click-card', node: FileNode, mod: ClickMod): void;
@@ -267,8 +278,17 @@ function isSelected(n: FileNode): boolean {
   return props.selected.has(n.path);
 }
 
+/**
+ * issue #26 — the card's checkbox is the one click that selects (a click
+ * anywhere else on the card opens it), routed exactly like the list row's:
+ * one `click-card` emit marked `check`, one `useSelection.click`.
+ */
+function onCheckClick(n: FileNode, ev: MouseEvent) {
+  emit('click-card', n, checkMod(ev));
+}
+
 function onClick(n: FileNode, ev: MouseEvent) {
-  emit('click-card', n, clickMod(ev, touch.isTap(ev), '.fe-grid__label'));
+  emit('click-card', n, clickMod(ev, touch.isTap(ev)));
 }
 
 function onDbl(n: FileNode) {
@@ -329,8 +349,13 @@ function onItemDrop(n: FileNode, ev: DragEvent) {
 }
 
 /* Long press → the card's menu; a tap is reported as a tap (issue #26). */
-const touch = useRowTouch<FileNode>((n, at) =>
-  emit('context-card', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+const touch = useRowTouch<FileNode>(
+  (n, at) =>
+    emit('context-card', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+  {
+    // A finger lifted on the item, off its controls, opens at touchend — see useRowTouch.
+    onTap: (n) => emit('click-card', n, { ctrl: false, shift: false, touch: true }),
+  },
 );
 
 /**
@@ -382,7 +407,7 @@ function snippetTitle(snippet: string): string {
        localized label + busy state. Structure/layout untouched. -->
   <div
     class="fe-grid"
-    :class="{ 'is-loading': loading }"
+    :class="{ 'is-loading': loading, 'has-selection': selectable && selected.size > 0 }"
     role="listbox"
     aria-multiselectable="true"
     :aria-label="t('grid.aria')"
@@ -418,7 +443,7 @@ function snippetTitle(snippet: string): string {
       @dragleave="onItemDragLeave(n) /* wiring:c4 */"
       @drop="onItemDrop(n, $event)"
       @touchstart.passive="touch.onTouchStart(n, $event)"
-      @touchend.passive="touch.onTouchEnd"
+      @touchend="touch.onTouchEnd"
       @touchmove.passive="touch.onTouchMove"
     >
       <!-- gorunum:v1 — the preview, files only: 184×108. A thumbnail when
@@ -496,7 +521,7 @@ function snippetTitle(snippet: string): string {
              the person looking for what they starred, so the chip is always
              painted once the file IS starred and only appears on hover/focus
              otherwise (see .fe-grid__star in styles/base.css). @click.stop so
-             starring never doubles as a card selection. -->
+             starring never doubles as opening the card. -->
         <!-- gorunum:v1-preview — a frame lifted out of a video is, on a card,
              indistinguishable from a photograph. The badge is the difference,
              and it is drawn only over a real frame: a video that fell back to
@@ -525,16 +550,30 @@ function snippetTitle(snippet: string): string {
            On a file it is the 56px footer under the preview; on a folder it is
            the whole 56px card. -->
       <div class="fe-grid__foot">
-        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
-        <span
-          v-if="isEncryptedFolder(n)"
-          class="fe-grid__tile fe-grid__tile--svg"
-          role="img"
-          :aria-label="t('e2e.badge')"
-          v-html="encryptedFolderTile()"
-        ></span>
-        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
-        <span v-else class="fe-grid__tile fe-grid__tile--svg" v-html="fileIconTile(n)"></span>
+        <!-- issue #26 — the checkbox takes the tile's place while it shows
+             (hovered, focused, selected, or once anything is selected), so
+             the name does not move when it appears. -->
+        <span class="fe-grid__lead" :class="{ 'fe-grid__lead--pick': selectable }">
+          <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+          <span
+            v-if="isEncryptedFolder(n)"
+            class="fe-grid__tile fe-grid__tile--svg"
+            role="img"
+            :aria-label="t('e2e.badge')"
+            v-html="encryptedFolderTile()"
+          ></span>
+          <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/fileIcons -->
+          <span v-else class="fe-grid__tile fe-grid__tile--svg" v-html="fileIconTile(n)"></span>
+          <span
+            v-if="selectable"
+            class="fe-item-check"
+            data-fe-control
+            @click.stop="onCheckClick(n, $event)"
+            @dblclick.stop
+          >
+            <ItemCheck :on="isSelected(n)" :label="nodeDisplayName(n)" />
+          </span>
+        </span>
         <div class="fe-grid__main">
           <div class="fe-grid__label" :title="n.basename">
             {{ nodeDisplayName(n) }}

package/src/components/HomeView.vue

@@ -152,10 +152,9 @@ function storageCaption(s: HomeStorage): string {
 /**
  * A card opens what it names.
  *
- * ⚠ SINGLE click, and that is not an inconsistency with the listing behind it.
- * A card in the listing has two jobs — click selects, double click opens — and
- * on Home the first of those does not exist (see NO_SELECTION), so a click
- * that only selected would be a click that did nothing at all.
+ * A single click, exactly as in the listing behind it (issue #26: a click
+ * anywhere but the checkbox opens). Home's cards carry no checkbox at all —
+ * there is no selection here to tick anything into (see NO_SELECTION).
  *
  * ⚠ Which is why the double click has to be swallowed: a real double click
  * fires `click-card` twice, and two opens of a file are two viewer tabs. The
@@ -246,6 +245,7 @@ function openNode(n: FileNode) {
         v-if="shownRecent.length"
         :files="shownRecent"
         :selected="NO_SELECTION"
+        :selectable="false"
         :locale="locale"
         :thumb-src="thumbSrc"
         @click-card="openNode"
@@ -292,6 +292,7 @@ function openNode(n: FileNode) {
         v-if="shownStarred.length"
         :files="shownStarred"
         :selected="NO_SELECTION"
+        :selectable="false"
         :locale="locale"
         :thumb-src="thumbSrc"
         @click-card="openNode"

package/src/components/ItemCheck.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * ItemCheck — the checkbox on a listing item: the list row's tick column and
+ * the grid and gallery cards' corner (issue #26, fourth round: "only clicking
+ * on checkbox selects it"). One element for the three views, so the tick a
+ * card shows cannot drift from the one a row shows.
+ *
+ * The view binds the click on the wrapper around it and routes it through
+ * `checkMod` — the same `click-row` emit and the same `useSelection.click`
+ * every selection goes through, so shift ranges and toggles are one
+ * implementation, not two.
+ *
+ * ⚠ A button with role="checkbox", NOT an <input type="checkbox">. The input
+ * owns a `checked` state of its own: the browser flips it before the click
+ * handler runs and, if the default is prevented, flips it back AFTER Vue has
+ * patched — so the row went selected while the box stayed empty (measured:
+ * rowSelected=true, domChecked=false). Drawing the state from the selection
+ * leaves nothing to drift. Space and Enter still tick it, because a button
+ * fires `click` for both.
+ *
+ * ⚠ A mouse press does not move focus onto it (`mousedown.prevent`). The tick
+ * is now the ONLY click that selects, so "tick, then Space" is the way to
+ * quick-look a file — and Space on a focused button is that button's own
+ * activation, which the shortcut layer rightly leaves alone: the peek would
+ * never open and the tick would flip back off. Tab still reaches it, and Space
+ * still ticks it from the keyboard.
+ */
+defineProps<{
+  /** Whether the item is selected. */
+  on: boolean;
+  /** The item's display name — the checkbox's accessible name. */
+  label: string;
+}>();
+</script>
+
+<template>
+  <button
+    type="button"
+    class="fe-list__check"
+    :class="{ 'is-on': on }"
+    role="checkbox"
+    :aria-checked="on ? 'true' : 'false'"
+    :aria-label="label"
+    :title="label"
+    @mousedown.prevent
+  ></button>
+</template>

package/src/components/ListView.vue

@@ -11,7 +11,8 @@ import { hasInternalDrag } from '../lib/dragOut';
 import type { FileNode } from '../types/FileNode';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
+import { checkMod, clickMod, useRowTouch, type ClickMod } from '../composables/useRowTouch';
+import ItemCheck from './ItemCheck.vue';
 import {
   arrivedFromOutside,
   ownedByViewer,
@@ -174,7 +175,7 @@ function isSelected(n: FileNode): boolean {
 }
 
 function onRowClick(n: FileNode, ev: MouseEvent) {
-  emit('click-row', n, clickMod(ev, touch.isTap(ev), '.fe-list__name'));
+  emit('click-row', n, clickMod(ev, touch.isTap(ev)));
 }
 
 function onRowDbl(n: FileNode) {
@@ -212,17 +213,14 @@ function onRowMenu(n: FileNode, ev: MouseEvent) {
 }
 
 /**
- * gorunum:v1 — the row checkbox drives THE SAME selection the row click
- * drives: one `click-row` emit, one `useSelection.click`, one anchor. A
- * checkbox that kept its own Set would disagree with the row the first time
- * someone mixed the two, and the context menu acts on the row's set.
- *
- * `ctrl: true` because ticking a box adds to a selection rather than replacing
- * it; `shift` is passed through so shift-clicking a box still extends the
- * range from the anchor (the composable answers shift before ctrl).
+ * issue #26 — the checkbox is the one click that selects (a click anywhere
+ * else on the row opens it). It goes out as the same `click-row` emit every
+ * other gesture uses, marked `check`, so FilePane routes it to the one
+ * `useSelection.click` — one anchor, one set, the one the context menu acts
+ * on. See composables/useRowTouch `checkMod`.
  */
 function onCheckClick(n: FileNode, ev: MouseEvent) {
-  emit('click-row', n, { ctrl: true, shift: ev.shiftKey });
+  emit('click-row', n, checkMod(ev));
 }
 
 function onItemDragStart(n: FileNode, ev: DragEvent) {
@@ -266,8 +264,13 @@ function onItemDrop(n: FileNode, ev: DragEvent) {
 }
 
 /* Long press → the row's menu; a tap is reported as a tap (issue #26). */
-const touch = useRowTouch<FileNode>((n, at) =>
-  emit('context-row', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+const touch = useRowTouch<FileNode>(
+  (n, at) =>
+    emit('context-row', n, { ...at, preventDefault: () => {}, stopPropagation: () => {} } as unknown as MouseEvent),
+  {
+    // A finger lifted on the item, off its controls, opens at touchend — see useRowTouch.
+    onTap: (n) => emit('click-row', n, { ctrl: false, shift: false, touch: true }),
+  },
 );
 
 function keepGlyph(b: 'kept' | 'syncing' | 'cloud' | 'partial'): string {
@@ -1226,31 +1229,21 @@ const segments = computed<DateRun<FileNode>[]>(() =>
         @dragleave="onItemDragLeave(n) /* wiring:c4 */"
         @drop="onItemDrop(n, $event)"
         @touchstart.passive="touch.onTouchStart(n, $event)"
-        @touchend.passive="touch.onTouchEnd"
+        @touchend="touch.onTouchEnd"
         @touchmove.passive="touch.onTouchMove"
       >
-        <!-- gorunum:v1 — the tick drives the SAME selection the row click
-             does (onCheckClick → click-row → useSelection.click), so shift
-             ranges and ctrl toggles are one implementation, not two.
-             ⚠ A button with role="checkbox", NOT an <input type="checkbox">.
-             The input owns a `checked` state of its own: the browser flips it
-             before the click handler runs and, if the default is prevented,
-             flips it back AFTER Vue has patched — so the row went selected
-             while the box stayed empty (measured: rowSelected=true,
-             domChecked=false). Drawing the state from the selection leaves
-             nothing to drift. Space and Enter still tick it, because a button
-             fires `click` for both. -->
-        <div class="fe-list__col fe-list__col--check" role="gridcell" @click.stop @dblclick.stop>
-          <button
-            type="button"
-            class="fe-list__check"
-            :class="{ 'is-on': isSelected(n) }"
-            role="checkbox"
-            :aria-checked="isSelected(n) ? 'true' : 'false'"
-            :aria-label="nodeDisplayName(n)"
-            :title="nodeDisplayName(n)"
-            @click.stop="onCheckClick(n, $event)"
-          ></button>
+        <!-- issue #26 — the tick is the one click that selects; the whole
+             cell is its target, so a click that just misses the box does not
+             open the row instead. `data-fe-control` keeps a finger on the
+             cell from counting as a tap on the row (useRowTouch). -->
+        <div
+          class="fe-list__col fe-list__col--check"
+          role="gridcell"
+          data-fe-control
+          @click.stop="onCheckClick(n, $event)"
+          @dblclick.stop
+        >
+          <ItemCheck :on="isSelected(n)" :label="nodeDisplayName(n)" />
         </div>
         <div class="fe-list__col fe-list__col--name" role="gridcell" :style="colStyle('name')">
           <!-- ikon:emoji — an encrypted folder is still a FOLDER: it keeps the
@@ -1323,25 +1316,35 @@ const segments = computed<DateRun<FileNode>[]>(() =>
             class="fe-list__col fe-list__col--star"
             role="gridcell"
             :style="colStyle(id)"
-            @click.stop
           >
-            <StarButton
+            <!-- issue #26 — only the star itself is a control; the rest of the
+                 cell (all of it on a folder, which has no star) opens the row
+                 like any other empty space on it. `display: contents`, so the
+                 wrapper stops the click without moving the star. -->
+            <span
               v-if="starEnabled !== false && typeof n.id === 'number' && n.type === 'file'"
-              :starred="!!starredIds?.has(n.id)"
-              :node-id="n.id"
-              :api-base="apiBase"
-              :auth-headers="authHeaders"
-              :auth-credentials="authCredentials"
-              :locale="locale"
-              compact
-              @change="(val: boolean) => emit('star-change', n, val)"
-            />
+              class="fe-list__star-hit"
+              data-fe-control
+              @click.stop
+              @dblclick.stop
+            >
+              <StarButton
+                :starred="!!starredIds?.has(n.id)"
+                :node-id="n.id"
+                :api-base="apiBase"
+                :auth-headers="authHeaders"
+                :auth-credentials="authCredentials"
+                :locale="locale"
+                compact
+                @change="(val: boolean) => emit('star-change', n, val)"
+              />
+            </span>
           </div>
           <div v-else :class="colClass(id)" role="gridcell" :style="colStyle(id)" :title="cellTitle(id, n)">
             {{ cellText(id, n) }}
           </div>
         </template>
-        <div class="fe-list__col fe-list__col--menu" role="gridcell" @click.stop @dblclick.stop>
+        <div class="fe-list__col fe-list__col--menu" role="gridcell" data-fe-control @click.stop @dblclick.stop>
           <button
             type="button"
             class="fe-list__menu"