@brftech/filex-core 0.30.1 → 0.32.0

package/src/components/Breadcrumb.vue

@@ -21,7 +21,7 @@
  */
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { hasInternalDrag } from '../lib/dragOut';
-import { VIRTUAL_SEGMENTS } from '../lib/listing';
+import { virtualSegmentLabel } from '../lib/listing';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 
@@ -125,7 +125,9 @@ const crumbs = computed<Crumb[]>(() => {
     // gezinti:g1 — the sentinel segments the virtual views park in `dirname`
     // (`.trash` predates them). Without a mapping the crumb reads ".starred",
     // which is a filename the user never typed and cannot navigate to.
-    const label = VIRTUAL_SEGMENTS[part] ? t(VIRTUAL_SEGMENTS[part]) : part;
+    // etiket:t1 — via the shared resolver, which also knows the tag view's
+    // `.tag~<name>` segment; the raw map only covers the fixed-label views.
+    const label = virtualSegmentLabel(part, t) || part;
     out.push({ label, adapterPath: `${adapterPrefix}${acc}` });
   }
   return out;

package/src/components/CommandPalette.vue

@@ -41,6 +41,15 @@ const props = defineProps<{
   globalSearch?: (q: string) => Promise<GlobalSearchHit[]>;
   /* wiring:d1 — false hides the split command (narrow embeds). */
   splitEnabled?: boolean;
+  /**
+   * surucu:d1 — the query this palette opens WITH.
+   *
+   * The drive shell's header field searches the folder you are in; ⌘K from
+   * inside it opens this palette carrying the same words, so "not in this
+   * folder — try everywhere" costs no retyping. Empty (the default) is the
+   * behaviour every other caller has had: a blank palette.
+   */
+  initialQuery?: string;
 }>();
 
 const emit = defineEmits<{
@@ -367,14 +376,21 @@ watch(
   () => props.open,
   (v) => {
     if (v) {
-      query.value = '';
+      // ⚠ Read at OPEN, not watched: a seed that kept overwriting the field
+      // would undo every keystroke of whoever is typing here now.
+      query.value = props.initialQuery ?? '';
       active.value = 0;
       /* bul:s3 — fresh session state for the new groups. */
       everywhere.value = [];
       everywhereLoading.value = false;
       savedSearches.value = readSavedSearches();
       document.addEventListener('keydown', onDocKeydown, true);
-      void nextTick(() => inputEl.value?.focus());
+      void nextTick(() => {
+        inputEl.value?.focus();
+        // Selected, not appended to: the seed is a starting point, and the
+        // next keystroke should be able to replace it outright.
+        inputEl.value?.select();
+      });
     } else {
       if (everywhereTimer) clearTimeout(everywhereTimer); /* bul:s3 */
       document.removeEventListener('keydown', onDocKeydown, true);

package/src/components/E2eRecoveryUnlockModal.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+/**
+ * E2eRecoveryUnlockModal — open an encrypted folder without its password.
+ *
+ * Two doors, and the dialog is explicit about which one you are using
+ * because they are not equivalent:
+ *
+ *   - the USER RECOVERY KEY, shown once when the folder was created. Opens
+ *     the folder and nobody is told, because it is your key.
+ *   - the ESCROW KEY, held by the operator of this installation. Opening a
+ *     folder with it NOTIFIES the folder's owner. The dialog says so before
+ *     the key is typed, not after.
+ *
+ * The component collects input and validates its shape. All crypto and all
+ * network calls happen in the parent (FileExplorer), which owns the marker
+ * and the key ring — same division as the password lock screen.
+ */
+import { computed, ref, watch } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { parseRecoveryKey } from '../lib/e2ecrypto';
+import type { EscrowAvailability } from '../lib/e2ecrypto';
+import Modal from '../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  /** The folder has a user recovery key slot (v2 markers created since 0.31). */
+  hasRecovery: boolean;
+  /**
+   * Whether the escrow door applies to THIS folder — see escrowAvailability.
+   * 'predates' and 'other-key' are not "no escrow tab"; they are two
+   * different facts the dialog has to state, because an admin who knows the
+   * installation has escrow reads a missing tab as a bug and tries the key
+   * anyway.
+   */
+  escrowState: EscrowAvailability;
+  /** Short id of the escrow key THIS FOLDER was sealed to, when it has one. */
+  escrowKid?: string | null;
+  busy?: boolean;
+  /** Set by the parent after a failed attempt. */
+  error?: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'submit', payload: { mode: 'recovery' | 'escrow'; value: string }): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+/** The escrow tab is offered only when the key can actually open this
+ *  folder. Every other state is explained in words instead. */
+const hasEscrow = computed(() => props.escrowState === 'available');
+/** The installation has an escrow key that does NOT apply here. Saying so
+ *  is the whole point: silence reads as "not enabled". */
+const escrowUnavailableReason = computed(() => {
+  if (props.escrowState === 'predates') return t('e2e.recover.escrow_predates');
+  if (props.escrowState === 'other-key') return t('e2e.recover.escrow_other_key');
+  return null;
+});
+const mode = ref<'recovery' | 'escrow'>('recovery');
+const recoveryValue = ref('');
+const escrowValue = ref('');
+const localErr = ref<string | null>(null);
+
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      mode.value = props.hasRecovery ? 'recovery' : 'escrow';
+      recoveryValue.value = '';
+      escrowValue.value = '';
+      localErr.value = null;
+    }
+  },
+);
+
+/** A folder with neither slot is a pre-0.31 folder: the password is the
+ *  only way in, and saying so is more useful than an empty dialog. */
+const nothingAvailable = computed(() => !props.hasRecovery && !hasEscrow.value);
+
+const shownError = computed(() => localErr.value || props.error || null);
+
+function submit() {
+  if (props.busy || nothingAvailable.value) return;
+  localErr.value = null;
+  if (mode.value === 'recovery') {
+    // Check the shape locally so a typo reads as a typo rather than as a
+    // wrong key — the two failures call for different next steps.
+    if (!parseRecoveryKey(recoveryValue.value)) {
+      localErr.value = t('e2e.recover.bad_format');
+      return;
+    }
+    emit('submit', { mode: 'recovery', value: recoveryValue.value });
+    return;
+  }
+  if (!escrowValue.value.trim()) {
+    localErr.value = t('e2e.recover.escrow_required');
+    return;
+  }
+  emit('submit', { mode: 'escrow', value: escrowValue.value });
+}
+</script>
+
+<template>
+  <Modal :open="open" :title="t('e2e.recover.title')" size="sm" @close="emit('close')">
+    <div class="fe-e2e-recover">
+      <p v-if="nothingAvailable" class="fe-e2e-recover__none">
+        {{ t('e2e.recover.none') }}
+      </p>
+
+      <template v-else>
+        <div v-if="hasRecovery && hasEscrow" class="fe-e2e-recover__tabs" role="tablist">
+          <button
+            type="button"
+            role="tab"
+            class="fe-e2e-recover__tab"
+            :class="{ 'fe-e2e-recover__tab--on': mode === 'recovery' }"
+            :aria-selected="mode === 'recovery'"
+            @click="mode = 'recovery'"
+          >
+            {{ t('e2e.recover.tab_recovery') }}
+          </button>
+          <button
+            type="button"
+            role="tab"
+            class="fe-e2e-recover__tab"
+            :class="{ 'fe-e2e-recover__tab--on': mode === 'escrow' }"
+            :aria-selected="mode === 'escrow'"
+            @click="mode = 'escrow'"
+          >
+            {{ t('e2e.recover.tab_escrow') }}
+          </button>
+        </div>
+
+        <form v-if="mode === 'recovery'" class="fe-e2e-form" @submit.prevent="submit">
+          <p class="fe-e2e-recover__hint">{{ t('e2e.recover.recovery_hint') }}</p>
+          <input
+            v-model="recoveryValue"
+            type="text"
+            class="fe-input fe-e2e-recover__key"
+            :placeholder="t('e2e.recover.recovery_placeholder')"
+            autocomplete="off"
+            spellcheck="false"
+            :disabled="busy"
+          />
+        </form>
+
+        <form v-else class="fe-e2e-form" @submit.prevent="submit">
+          <div class="fe-e2e-warn" role="alert">
+            <strong>{{ t('e2e.recover.escrow_warn_title') }}</strong>
+            <p>{{ t('e2e.recover.escrow_warn_body') }}</p>
+          </div>
+          <p v-if="escrowKid" class="fe-e2e-recover__hint">
+            {{ t('e2e.recover.escrow_kid') }}: <code>{{ escrowKid }}</code>
+          </p>
+          <textarea
+            v-model="escrowValue"
+            class="fe-input fe-e2e-recover__escrow"
+            rows="5"
+            :placeholder="t('e2e.recover.escrow_placeholder')"
+            autocomplete="off"
+            spellcheck="false"
+            :disabled="busy"
+          ></textarea>
+        </form>
+      </template>
+
+      <!-- ⚠ Shown whenever the installation has an escrow key that cannot
+           open THIS folder. A folder created before escrow was adopted must
+           not merely lack a tab; it must say why, or the absence reads as a
+           bug and the operator burns an afternoon on it. -->
+      <p v-if="escrowUnavailableReason" class="fe-e2e-recover__note">
+        {{ escrowUnavailableReason }}
+      </p>
+
+      <p v-if="shownError" class="fe-form__error">{{ shownError }}</p>
+    </div>
+    <template #actions>
+      <button type="button" class="fe-btn" :disabled="busy" @click="emit('close')">
+        {{ t('modal.newfolder.cancel') }}
+      </button>
+      <button
+        type="button"
+        class="fe-btn fe-btn--primary"
+        :disabled="busy || nothingAvailable"
+        @click="submit"
+      >
+        {{ busy ? t('e2e.recover.busy') : t('e2e.recover.unlock') }}
+      </button>
+    </template>
+  </Modal>
+</template>

package/src/components/EncryptedFolderModal.vue

@@ -20,6 +20,10 @@ const props = defineProps<{
   locale: LocaleCode;
   /** True while the parent is creating the folder + uploading the marker. */
   busy?: boolean;
+  /** Short id of this installation's E2E escrow key, when one is configured.
+   *  Shown BEFORE the folder is created: escrow means the operator can open
+   *  it without the password, and that is not a detail to discover later. */
+  escrowKid?: string | null;
 }>();
 
 const emit = defineEmits<{
@@ -107,6 +111,12 @@ function submit() {
         <strong>{{ t('e2e.create.warn_title') }}</strong>
         <p>{{ t('e2e.create.warn_body') }}</p>
       </div>
+      <!-- wiring:e2 recovery — disclosure, not a setting. The user cannot
+           turn escrow off for their folder; they can only know about it. -->
+      <div v-if="escrowKid" class="fe-e2e-rk__escrow" role="note">
+        <strong>{{ t('e2e.create.escrow_title') }}</strong>
+        <p>{{ t('e2e.create.escrow_body') }}</p>
+      </div>
       <label class="fe-e2e-ack">
         <input v-model="ack" type="checkbox" :disabled="busy" />
         <span>{{ t('e2e.create.ack') }}</span>

package/src/components/FilterBar.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+/**
+ * FilterBar — surucu:d1, the chip row under the breadcrumb in the `drive`
+ * profile.
+ *
+ * Three chips: Type · Modified · Size. Each opens a small single-choice
+ * popover; a chip with a choice made carries that choice as its label, so the
+ * row says what is being filtered without opening anything.
+ *
+ * ⚠ THREE, not the four the mockup draws. There is no **People** chip because
+ * there is nothing behind one: a listing row carries no owner
+ * (`projectFileNodes` emits id/path/basename/type/extension/size/mime_type/
+ * storage/etag/perm/thumb_url/last_modified and nothing else), `nodes.owner_id`
+ * is quota bookkeeping that is nil for everything a sync discovered, and the
+ * listing endpoint reads no owner parameter. A People chip would be a control
+ * that opens, offers names, and changes nothing — see docs and the report on
+ * this branch; the advanced-search round owns that question.
+ *
+ * ⚠ Popovers are TELEPORTED to <body>, like ContextMenu, and positioned
+ * `fixed`. An absolutely-positioned panel inside the explorer is clipped by
+ * `.fe__body`'s own scroll container, which is how a menu ends up half visible
+ * with its own scrollbar.
+ *
+ * ⚠ No `<style>` block. Package CSS lives in `styles/base.css` — a scoped block
+ * compiles to `.cls[data-v-HASH]` and the hash does not match in the
+ * web-component build, so the rules silently stop applying in every embed.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useLocale } from '../composables/useLocale';
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import type { DriveFilters, ModifiedFilter, SizeFilter, TypeFilter } from '../lib/fileFilters';
+import { activeFilterCount } from '../lib/fileFilters';
+
+const props = defineProps<{
+  value: DriveFilters;
+  locale: LocaleCode;
+  /** Resolved theme — the teleported popover leaves the `.fe` variable scope. */
+  theme?: ThemeMode;
+  /** Rows currently shown / rows the folder holds, for the count chip. */
+  shown?: number;
+  total?: number;
+}>();
+
+const emit = defineEmits<{ (e: 'update:value', v: DriveFilters): void }>();
+
+const { t } = useLocale(() => props.locale);
+
+type Group = 'type' | 'modified' | 'size';
+
+const TYPE_OPTIONS: TypeFilter[] = [
+  'any', 'folder', 'document', 'spreadsheet', 'presentation', 'pdf',
+  'image', 'video', 'audio', 'archive', 'code',
+];
+const MODIFIED_OPTIONS: ModifiedFilter[] = ['any', 'today', '7d', '30d', 'year'];
+const SIZE_OPTIONS: SizeFilter[] = ['any', 'lt1', '1to10', '10to100', 'gt100'];
+
+function optionsFor(g: Group): string[] {
+  if (g === 'type') return TYPE_OPTIONS;
+  if (g === 'modified') return MODIFIED_OPTIONS;
+  return SIZE_OPTIONS;
+}
+
+function optionLabel(g: Group, v: string): string {
+  return t(`filter.${g}.${v}`);
+}
+
+/** The chip's own label: the group name until a choice is made, then the
+ *  choice — a row of three identical words tells the reader nothing. */
+function chipLabel(g: Group): string {
+  const v = props.value[g];
+  return v === 'any' ? t(`filter.${g}`) : optionLabel(g, v);
+}
+
+const activeCount = computed(() => activeFilterCount(props.value));
+
+// ── the popover ──────────────────────────────────────────────────────
+const openGroup = ref<Group | null>(null);
+const pos = ref({ x: 0, y: 0 });
+const panelEl = ref<HTMLElement | null>(null);
+const chipEls = ref<Record<string, HTMLElement | null>>({});
+
+function setChipEl(g: Group, el: unknown) {
+  chipEls.value[g] = (el as HTMLElement | null) ?? null;
+}
+
+// The open popover's data, precomputed. Reading `value[openGroup]` straight
+// from the template would lean on template narrowing across a Teleport, and
+// `vue-tsc --noEmit` is part of this package's build.
+const popOptions = computed<string[]>(() => (openGroup.value ? optionsFor(openGroup.value) : []));
+const popTitle = computed(() => (openGroup.value ? t(`filter.${openGroup.value}`) : ''));
+function popChecked(opt: string): boolean {
+  return !!openGroup.value && props.value[openGroup.value] === opt;
+}
+function popLabel(opt: string): string {
+  return openGroup.value ? optionLabel(openGroup.value, opt) : opt;
+}
+function popPick(opt: string): void {
+  if (openGroup.value) pick(openGroup.value, opt);
+}
+
+async function toggle(g: Group) {
+  if (openGroup.value === g) {
+    close();
+    return;
+  }
+  const r = chipEls.value[g]?.getBoundingClientRect();
+  pos.value = { x: r ? r.left : 8, y: r ? r.bottom + 6 : 8 };
+  openGroup.value = g;
+  await nextTick();
+  // Keep it on screen: a chip near the right edge would otherwise open a panel
+  // that runs off it, and the row is right beside the info panel.
+  const panel = panelEl.value;
+  if (panel) {
+    const box = panel.getBoundingClientRect();
+    if (box.right > window.innerWidth - 8) {
+      pos.value = { ...pos.value, x: Math.max(8, window.innerWidth - 8 - box.width) };
+    }
+    if (box.bottom > window.innerHeight - 8) {
+      const r2 = chipEls.value[g]?.getBoundingClientRect();
+      pos.value = { ...pos.value, y: Math.max(8, (r2 ? r2.top : 0) - box.height - 6) };
+    }
+    panel.querySelector<HTMLElement>('[data-checked="true"]')?.focus();
+  }
+}
+
+function close(restoreFocus = false) {
+  const g = openGroup.value;
+  openGroup.value = null;
+  if (restoreFocus && g) chipEls.value[g]?.focus();
+}
+
+function pick(g: Group, v: string) {
+  emit('update:value', { ...props.value, [g]: v } as DriveFilters);
+  close(true);
+}
+
+function clearAll() {
+  emit('update:value', { type: 'any', modified: 'any', size: 'any' });
+}
+
+function onDocPointer(ev: PointerEvent) {
+  if (!openGroup.value) return;
+  const el = ev.target as Node;
+  if (panelEl.value?.contains(el)) return;
+  if (Object.values(chipEls.value).some((c) => c?.contains(el))) return;
+  close();
+}
+
+function onKey(ev: KeyboardEvent) {
+  if (ev.key === 'Escape' && openGroup.value) {
+    ev.stopPropagation();
+    close(true);
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocPointer, true);
+  document.addEventListener('keydown', onKey, true);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onDocPointer, true);
+  document.removeEventListener('keydown', onKey, true);
+});
+</script>
+
+<template>
+  <div class="fe-filterbar" role="group" :aria-label="t('filter.aria')" data-testid="filterbar">
+    <button
+      v-for="g in (['type', 'modified', 'size'] as Group[])"
+      :key="g"
+      :ref="(el) => setChipEl(g, el)"
+      type="button"
+      class="fe-filterbar__chip"
+      :class="{ 'is-set': value[g] !== 'any', 'is-open': openGroup === g }"
+      :aria-expanded="openGroup === g"
+      aria-haspopup="listbox"
+      :data-testid="`filter-${g}`"
+      @click="toggle(g)"
+    >
+      <span class="fe-filterbar__label">{{ chipLabel(g) }}</span>
+      <svg
+        class="fe-ficon fe-filterbar__caret"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M7 10l5 5 5-5" />
+      </svg>
+    </button>
+
+    <button
+      v-if="activeCount > 0"
+      type="button"
+      class="fe-filterbar__clear"
+      data-testid="filter-clear"
+      @click="clearAll"
+    >
+      {{ t('filter.clear') }}
+    </button>
+
+    <span
+      v-if="activeCount > 0 && typeof shown === 'number' && typeof total === 'number'"
+      class="fe-filterbar__count"
+      role="status"
+      data-testid="filter-count"
+      >{{ t('filter.count', { shown: String(shown), total: String(total) }) }}</span
+    >
+
+    <Teleport to="body">
+      <div
+        v-if="openGroup"
+        ref="panelEl"
+        class="fe-filterpop"
+        :class="{
+          'fe--theme-light': theme === 'light',
+          'fe--theme-dark': theme === 'dark',
+        }"
+        role="listbox"
+        :aria-label="popTitle"
+        :style="{ left: pos.x + 'px', top: pos.y + 'px' }"
+      >
+        <button
+          v-for="opt in popOptions"
+          :key="opt"
+          type="button"
+          class="fe-filterpop__item"
+          role="option"
+          :aria-selected="popChecked(opt)"
+          :data-checked="popChecked(opt) ? 'true' : 'false'"
+          :data-testid="`filter-opt-${opt}`"
+          @click="popPick(opt)"
+        >
+          <span class="fe-filterpop__tick" aria-hidden="true">{{ popChecked(opt) ? '✓' : '' }}</span>
+          <span>{{ popLabel(opt) }}</span>
+        </button>
+      </div>
+    </Teleport>
+  </div>
+</template>

package/src/components/GalleryView.vue

@@ -14,6 +14,7 @@ import type { FileNode } from '../types/FileNode';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
 import { fileIconSvg } from '../lib/fileIcons';
+import StarButton from './StarButton.vue';
 import { applyDragGhost } from '../lib/dragGhost';
 
 const props = defineProps<{
@@ -27,6 +28,28 @@ const props = defineProps<{
    *  GridView: raw `thumb_url` is root-relative and unauthenticated, so
    *  embedded hosts NEED this. null = icon fallback. */
   thumbSrc?: (n: FileNode) => string | null;
+  /**
+   * Starring on a card. Same contract as ListView: the id set the explorer
+   * keeps, plus the API wiring StarButton needs. Absent apiBase → no star is
+   * rendered at all, exactly as in the list.
+   *
+   * ⚠ Not list-only. The Starred VIEW shipped before starring was reachable
+   * from anywhere but the list, so a user in grid view — the mode the panel's
+   * own screenshots show — had a view they could not fill.
+   */
+  starredIds?: Set<number>;
+  /**
+   * Offer the star affordance at all. Follows the Starred view: when the panel
+   * leaves that view out — a shared app token has no single person behind it,
+   * so "your starred files" is one list shown to strangers — offering to star
+   * something is offering to write into that same shared list. Owner's call,
+   * 2026-09-05: "yıldızlı yeri gözükmüyorsa o zaman yıldızla/yıldızı kaldır da
+   * gözükmemeli".
+   */
+  starEnabled?: boolean;
+  apiBase?: string;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
+  authCredentials?: RequestCredentials;
 }>();
 
 const emit = defineEmits<{
@@ -35,6 +58,7 @@ const emit = defineEmits<{
   (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;
+  (e: 'star-change', node: FileNode, value: boolean): void;
 }>();
 
 const { t, formatSize, nodeDisplayName } = useLocale(() => props.locale);
@@ -43,6 +67,13 @@ function thumbOf(n: FileNode): string | null {
   return props.thumbSrc ? props.thumbSrc(n) : (n.thumb_url ?? null);
 }
 
+/** A card carries a star when the host wired the API and the node is a file
+ *  with a server id — the same rule the list row uses. */
+function canStar(n: FileNode): boolean {
+  if (props.starEnabled === false) return false;
+  return props.apiBase !== undefined && typeof n.id === 'number' && n.type === 'file';
+}
+
 function isSelected(n: FileNode): boolean {
   return props.selected.has(n.path);
 }
@@ -170,6 +201,7 @@ function metaFor(n: FileNode): string {
       role="option"
       :aria-selected="isSelected(n) ? 'true' : 'false'"
       :aria-label="nodeDisplayName(n)"
+      :data-fe-path="n.path /* wiring:d1 - middle-click new-tab delegation */"
       draggable="true"
       @click="onClick(n, $event)"
       @dblclick="onDbl(n)"
@@ -196,6 +228,22 @@ function metaFor(n: FileNode): string {
         <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>
+        <!-- Same star chip as the grid, same component, same rule: painted
+             when starred, on hover/focus otherwise. It sits above .fe-gal__meta
+             (which is aria-hidden and covers the tile's foot on hover). -->
+        <div v-if="canStar(n)" class="fe-gal__star" @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
+            card
+            @change="(val: boolean) => emit('star-change', n, val)"
+          />
+        </div>
         <div class="fe-gal__meta" aria-hidden="true">
           <span v-if="metaFor(n)" class="fe-gal__meta-line">{{ metaFor(n) }}</span>
           <span