@brftech/filex-core 0.40.0 → 0.41.1

package/src/components/Breadcrumb.vue

@@ -24,6 +24,7 @@ import { hasInternalDrag } from '../lib/dragOut';
 import { virtualSegmentLabel } from '../lib/listing';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { actionIconSvg } from '../lib/actionIcons';
 
 const props = defineProps<{
   dirname: string;
@@ -43,6 +44,17 @@ const props = defineProps<{
    * relative to it (`/`, `/sub`). Pairs with FileExplorer's rootPath clamp.
    */
   rootPath?: string;
+  /**
+   * gorunum:v2-topbar — what is INSIDE the folder the last crumb names, for
+   * the chevron the reference shell puts there ("Subfolders"). Supplied by
+   * the parent, because the listing it comes from is the parent's: a second
+   * fetch from here would be a second answer to "what is in this folder".
+   *
+   * ⚠ The affordance is drawn whenever the array is PRESENT, empty or not —
+   * a control that appears and disappears as you walk the tree is a control
+   * nobody learns. An empty folder says so in the menu instead.
+   */
+  subfolders?: { label: string; adapterPath: string }[];
 }>();
 
 // Confined root parsed into its adapter-relative form ("projeler/acme") and
@@ -76,8 +88,13 @@ interface Crumb {
 }
 
 const crumbs = computed<Crumb[]>(() => {
-  const adapterPrefix = `${props.adapter}://`;
-  const raw = props.dirname.startsWith(adapterPrefix)
+  /* ⚠ Empty adapter → EMPTY prefix, not a bare `://`. A virtual view
+     (`.starred`, `.tag~invoices`) belongs to no storage, so the pane hands us
+     the sentinel with no adapter at all; gluing `://` onto it would make every
+     crumb's `adapterPath` read `://.starred`, which navigates nowhere — the
+     view's own address is the bare sentinel. */
+  const adapterPrefix = props.adapter ? `${props.adapter}://` : '';
+  const raw = adapterPrefix && props.dirname.startsWith(adapterPrefix)
     ? props.dirname.slice(adapterPrefix.length)
     : props.dirname;
   const parts = raw.split('/').filter(Boolean);
@@ -96,7 +113,14 @@ const crumbs = computed<Crumb[]>(() => {
     let acc = floor;
     for (const part of below.split('/').filter(Boolean)) {
       acc = acc ? `${acc}/${part}` : part;
-      out.push({ label: part === '.trash' ? t('node.trash') : part, adapterPath: `${adapterPrefix}${acc}` });
+      /* ⚠ THE SAME resolver the unconfined branch below uses. This line used to
+         carry a private `part === '.trash' ? t('node.trash') : part` — a second
+         copy of the sentinel mapping that knew about exactly one sentinel, so a
+         confined embed printed `.starred`, `.shared`, `.recent` and
+         `.tag~invoices` raw while the panel three inches away named them
+         properly. One resolver, and a sentinel added to `lib/listing` reaches
+         both branches on the day it lands. */
+      out.push({ label: virtualSegmentLabel(part, t) || part, adapterPath: `${adapterPrefix}${acc}` });
     }
     return out;
   }
@@ -110,9 +134,12 @@ const crumbs = computed<Crumb[]>(() => {
       // root regardless of where we are now.
       out.push({ label: props.rootLabel || props.adapter, adapterPath: adapterPrefix });
     }
-  } else {
+  } else if (props.adapter || props.rootLabel) {
     // Single-storage mode: the storage name IS the root, no "/"
     // above it.
+    // ⚠ …and with NEITHER a storage nor a branded label there is nothing to
+    // name: that is a virtual view in a single-storage explorer, where the
+    // crumb would otherwise be an empty, clickable box in front of "Starred".
     out.push({
       label: props.rootLabel || props.adapter,
       adapterPath: adapterPrefix,
@@ -139,40 +166,83 @@ const crumbs = computed<Crumb[]>(() => {
 // into a dropdown. Visible crumbs keep their full click/drag-drop/context
 // behavior; dropdown entries only navigate.
 // ------------------------------------------------------------------
+/* gorunum:v2-topbar — the home crumb.
+ *
+ * ⚠ It REPLACES the root crumb, it is not added beside it. In multi-storage
+ * mode `crumbs[0]` is a bare "/" whose only job is "back to the storage
+ * list" — exactly what a house glyph says, and better than a slash nobody
+ * reads as a button. Drawing both would be two controls for one destination,
+ * which is the duplicate this pass exists to remove.
+ * ⚠ Only that "/" crumb is swallowed. A single-storage explorer's first crumb
+ * is the storage's NAME and a confined one's is the folder's — information a
+ * tooltip on a house cannot carry, so those keep their text. */
+const homeCrumb = computed<Crumb | null>(() => {
+  const first = crumbs.value[0];
+  if (!first) return null;
+  return props.multiStorageRoot && first.adapterPath === '' ? first : null;
+});
+/** The crumbs drawn as text — everything the home button did not swallow. */
+const trail = computed<Crumb[]>(() =>
+  homeCrumb.value ? crumbs.value.slice(1) : crumbs.value,
+);
+/** True while the home button is the current folder (nothing below it). */
+const homeIsCurrent = computed(() => !!homeCrumb.value && trail.value.length === 0);
+
 const OVERFLOW_THRESHOLD = 4;
-const collapsed = computed(() => crumbs.value.length > OVERFLOW_THRESHOLD);
+const collapsed = computed(() => trail.value.length > OVERFLOW_THRESHOLD);
 const leadCrumbs = computed<Crumb[]>(() =>
-  collapsed.value ? crumbs.value.slice(0, 1) : crumbs.value,
+  collapsed.value ? trail.value.slice(0, 1) : trail.value,
 );
 const middleCrumbs = computed<Crumb[]>(() =>
-  collapsed.value ? crumbs.value.slice(1, -2) : [],
+  collapsed.value ? trail.value.slice(1, -2) : [],
 );
 const tailCrumbs = computed<Crumb[]>(() =>
-  collapsed.value ? crumbs.value.slice(-2) : [],
+  collapsed.value ? trail.value.slice(-2) : [],
 );
 
 const overflowOpen = ref(false);
 const moreWrapEl = ref<HTMLElement | null>(null);
+/* gorunum:v2-topbar — the "Subfolders" chevron's own menu. Separate state
+   from the overflow "…", because the two open different lists (crumbs ABOVE
+   this folder vs folders INSIDE it) and only ever one at a time. */
+const subOpen = ref(false);
+const subWrapEl = ref<HTMLElement | null>(null);
 
-function onOverflowPick(crumb: Crumb) {
+const anyMenuOpen = computed(() => overflowOpen.value || subOpen.value);
+
+function closeMenus() {
   overflowOpen.value = false;
+  subOpen.value = false;
+}
+
+function onOverflowPick(crumb: Crumb) {
+  closeMenus();
   emit('navigate', crumb.adapterPath);
 }
 
-function onDocClick(e: MouseEvent) {
-  const wrap = moreWrapEl.value;
-  if (wrap && e.target instanceof Node && wrap.contains(e.target)) return;
+function toggleSub() {
   overflowOpen.value = false;
+  subOpen.value = !subOpen.value;
+}
+
+function onDocClick(e: MouseEvent) {
+  const t = e.target;
+  if (!(t instanceof Node)) {
+    closeMenus();
+    return;
+  }
+  if (moreWrapEl.value?.contains(t) || subWrapEl.value?.contains(t)) return;
+  closeMenus();
 }
 
 function onDocKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape') {
     e.stopPropagation();
-    overflowOpen.value = false;
+    closeMenus();
   }
 }
 
-watch(overflowOpen, (v) => {
+watch(anyMenuOpen, (v) => {
   if (v) {
     document.addEventListener('click', onDocClick, true);
     document.addEventListener('keydown', onDocKeydown, true);
@@ -182,10 +252,8 @@ watch(overflowOpen, (v) => {
   }
 });
 // Navigation rebuilds the trail — a stale open menu would list crumbs of
-// the previous folder.
-watch(crumbs, () => {
-  overflowOpen.value = false;
-});
+// the previous folder (and subfolders of the one we just left).
+watch(crumbs, closeMenus);
 onBeforeUnmount(() => {
   document.removeEventListener('click', onDocClick, true);
   document.removeEventListener('keydown', onDocKeydown, true);
@@ -195,6 +263,19 @@ function onClick(crumb: Crumb) {
   emit('navigate', crumb.adapterPath);
 }
 
+/* The home button's three handlers, null-guarded here rather than in the
+ * template: `v-if="homeCrumb"` does not narrow the ref inside an event
+ * binding, and a `!` in markup is an assertion no reader can check. */
+function onHomeClick() {
+  if (homeCrumb.value) onClick(homeCrumb.value);
+}
+function onHomeContext(ev: MouseEvent) {
+  if (homeCrumb.value) onContext(ev, homeCrumb.value);
+}
+function onHomeDrop(ev: DragEvent) {
+  if (homeCrumb.value) onCrumbDrop(ev, homeCrumb.value);
+}
+
 function onContext(ev: MouseEvent, crumb: Crumb) {
   ev.preventDefault();
   ev.stopPropagation();
@@ -307,6 +388,53 @@ function cancelEdit() {
 <template>
   <nav class="fe-breadcrumb" aria-label="Breadcrumb">
     <template v-if="!editing">
+      <!-- gorunum:v2-topbar — the root crumb. It IS `crumbs[0]` (see the
+           script), drawn as a house instead of a "/" nobody reads as a
+           button; it is never an extra control beside the root.
+
+           ⚠⚠ It is named `breadcrumb.root`, NOT `breadcrumb.home`, and that
+           was a real collision rather than a synonym. This button goes to
+           `adapterPath: ''` — the top of the tree: the DRIVES listing where
+           several storages are visible, the storage root where one is. The
+           panel's own "Home" row goes somewhere else entirely (the overview
+           with Storages · Recent · Starred). Two controls, one word, two
+           destinations — and the word belonged to the other one. It mattered
+           more from 2026-09-13, when "My files" stopped being drawn for a
+           multi-storage deployment: this button became the only door to that
+           listing, so the one thing it must not do is point at a different
+           row in the panel.
+
+           `breadcrumb.root` rather than a new string because the product
+           ALREADY names this destination: FileExplorer labels the tab you
+           land on with exactly this key ("Root" / "Kök"). Hovering the house
+           and reading the tab now say the same word instead of two.
+
+           ⚠ Relabelled, NOT repointed. Sending it to the Home overview would
+           break two things that are measured: `crumbs[0]` is this crumb, and
+           `trail` is `crumbs.slice(1)`, so the root would lose its only crumb
+           and (post-"My files") its last door; and `goUp()`/Alt+↑ from a
+           storage root loads `''`, so Up and the crumb would then disagree
+           about what sits above a storage.
+           ⚠ `data-testid` stays `breadcrumb-home`: it is a selector other
+           surfaces already use, and renaming it buys nothing. -->
+      <button
+        v-if="homeCrumb"
+        type="button"
+        class="fe-breadcrumb__crumb fe-breadcrumb__home"
+        :class="{ 'is-last': homeIsCurrent }"
+        :aria-current="homeIsCurrent ? 'page' : undefined"
+        :title="t('breadcrumb.root')"
+        :aria-label="t('breadcrumb.root')"
+        data-testid="breadcrumb-home"
+        @click="onHomeClick"
+        @contextmenu="onHomeContext"
+        @dragover="onCrumbDragOver"
+        @drop="onHomeDrop"
+      >
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+        <span class="fe-icon" aria-hidden="true" v-html="actionIconSvg('home')"></span>
+        <span v-if="!homeIsCurrent" class="fe-breadcrumb__sep" aria-hidden="true">›</span>
+      </button>
       <button
         v-for="(c, i) in leadCrumbs"
         :key="c.adapterPath"
@@ -359,13 +487,57 @@ function cancelEdit() {
         <span>{{ c.label }}</span>
         <span v-if="i < tailCrumbs.length - 1" class="fe-breadcrumb__sep" aria-hidden="true">›</span>
       </button>
+      <!-- gorunum:v2-topbar — "Subfolders": the chevron the reference shell
+           hangs on the LAST crumb, opening what is inside the folder you are
+           standing in. Drawn whenever the parent supplies the list, empty or
+           not (see the prop's note). -->
+      <span v-if="subfolders" ref="subWrapEl" class="fe-breadcrumb__sub-wrap">
+        <button
+          type="button"
+          class="fe-breadcrumb__sub"
+          aria-haspopup="menu"
+          :aria-expanded="subOpen"
+          :title="t('breadcrumb.subfolders')"
+          :aria-label="t('breadcrumb.subfolders')"
+          data-testid="breadcrumb-subfolders"
+          @click="toggleSub"
+        >
+          <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+          <span class="fe-icon" aria-hidden="true" v-html="actionIconSvg('subfolders')"></span>
+        </button>
+        <div v-if="subOpen" class="fe-breadcrumb__menu" role="menu">
+          <button
+            v-for="c in subfolders"
+            :key="c.adapterPath"
+            type="button"
+            class="fe-breadcrumb__menu-item"
+            role="menuitem"
+            @click="onOverflowPick(c)"
+          >{{ c.label }}</button>
+          <p v-if="!subfolders.length" class="fe-breadcrumb__menu-empty">
+            {{ t('breadcrumb.subfolders.empty') }}
+          </p>
+        </div>
+      </span>
+      <!-- gorunum:v1 — "type a path and go". The glyph was the ✏ emoji, which
+           this row draws from whichever emoji font the machine has: on a
+           headless Chromium and on a Linux box without one it comes out as a
+           stray dash beside the crumbs. An inline SVG is the same mark
+           everywhere and inherits the row's colour.
+           gorunum:v2-topbar — the mark now comes from lib/actionIcons with
+           every other glyph in the row; the reference shell has no path
+           editor at all, so this is ours and it stays. -->
       <button
         type="button"
         class="fe-breadcrumb__edit"
         :title="t('breadcrumb.go_to_path')"
         :aria-label="t('breadcrumb.go_to_path')"
+        data-testid="breadcrumb-edit-path"
         @click="startEdit"
-      >✏</button>
+      >
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+        <span class="fe-icon" aria-hidden="true" v-html="actionIconSvg('edit-path')"></span>
+      </button>
     </template>
     <template v-else>
       <input

package/src/components/CommandPalette.vue

@@ -26,6 +26,8 @@ import type { LocaleCode } from '../types/ExplorerConfig';
 import type { FileNode, ViewMode } from '../types/FileNode';
 import type { GlobalSearchHit } from '../composables/useFileApi';
 import { matchedInContent, snippetSegments } from '../lib/snippet';
+import { actionIconSvg } from '../lib/actionIcons';
+import { fileIconTile } from '../lib/fileIcons';
 import { useLocale } from '../composables/useLocale';
 
 const props = defineProps<{
@@ -93,6 +95,41 @@ type PaletteItem =
 type HitItem = Extract<PaletteItem, { kind: 'hit' }>;
 type SavedGroupItem = Extract<PaletteItem, { kind: 'saved' | 'save' }>;
 
+/* === ikon:emoji — the palette's marks =================================
+ *
+ * `icon` used to be the glyph itself and the template printed it as TEXT:
+ * `➜ 📁 📄 ⬆ ▦ 🗑 ⟳ ↑ 🎨 ⌨ 🎓 ⧉ ◫ 💾 🔖`, i.e. two colour-emoji sets, a
+ * geometric-shapes set and an arrows set, in one 20px column — beside a
+ * context menu and a toolbar that draw the same actions from
+ * `lib/actionIcons`. It is a KEY now, resolved the way ContextMenu resolves
+ * a row's key, and the two groups that list FILES resolve through
+ * `lib/fileIcons` instead, so a result row in the palette wears the same
+ * tile as the same file in the listing behind it.
+ */
+
+/** `name.ext` → `ext`, for a search hit (which carries no `extension`). */
+function extOf(name: string): string {
+  const dot = name.lastIndexOf('.');
+  return dot > 0 ? name.slice(dot + 1) : '';
+}
+
+/**
+ * The row's mark. Static markup from our own two icon modules — never a
+ * string that came off the wire, which is what lets the template v-html it.
+ */
+function iconHtml(it: PaletteItem): string {
+  if (it.kind === 'file') return fileIconTile(it.node);
+  if (it.kind === 'hit') {
+    const name = String(it.hit.name ?? '');
+    return fileIconTile({
+      type: it.hit.type === 'dir' ? 'dir' : 'file',
+      extension: extOf(name),
+      basename: name,
+    });
+  }
+  return actionIconSvg(it.icon);
+}
+
 /**
  * Scored includes: -1 = no match; otherwise earlier + prefix matches rank
  * higher and shorter names get a small edge. Good enough without a fuzzy
@@ -116,7 +153,7 @@ const gotoItems = computed<PaletteItem[]>(() => {
   const clean = q.replace(/^\/+|\/+$/g, '');
   if (!clean) return [];
   return [
-    { kind: 'goto', id: `goto:${clean}`, label: `${t('palette.goto')}: ${clean}`, icon: '➜', path: clean },
+    { kind: 'goto', id: `goto:${clean}`, label: `${t('palette.goto')}: ${clean}`, icon: 'goto', path: clean },
   ];
 });
 
@@ -130,7 +167,7 @@ const fileItems = computed<PaletteItem[]>(() => {
     kind: 'file' as const,
     id: `file:${r.f.path}`,
     label: r.name,
-    icon: r.f.type === 'dir' ? '📁' : '📄',
+    icon: '', // file rows draw their real tile — see iconHtml()
     node: r.f,
   }));
 });
@@ -138,19 +175,21 @@ const fileItems = computed<PaletteItem[]>(() => {
 const commandItems = computed<PaletteItem[]>(() => {
   const q = query.value.trim();
   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' ? '▦' : props.viewMode === 'grid' ? '▣' : '☰', enabled: true /* wiring:d2 — icon of the NEXT mode (list→grid→gallery→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 },
+    { command: 'new-folder', label: t('toolbar.new_folder'), icon: 'new-folder', enabled: props.canWrite !== false },
+    { command: 'upload', label: t('toolbar.upload'), icon: 'upload', enabled: props.canWrite !== false },
+    /* wiring:d2 — the mark is the NEXT mode (list→grid→gallery→list), which is
+       what pressing the row gets you; the three keys are the ViewSwitcher's own. */
+    { command: 'toggle-view', label: t('cmd.view_toggle'), icon: props.viewMode === 'list' ? 'view-grid' : props.viewMode === 'grid' ? 'view-gallery' : 'view-list', enabled: true },
+    { command: 'open-trash', label: t('cmd.trash'), icon: 'open-trash', enabled: true },
+    { command: 'refresh', label: t('toolbar.refresh'), icon: 'refresh', enabled: true },
+    { command: 'go-up', label: t('toolbar.go_up'), icon: 'go-up', 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 },
+    { command: 'open-theme', label: t('theme.menu'), icon: 'theme', enabled: true },
+    { command: 'open-shortcut-settings', label: t('shortcuts.settings.menu'), icon: 'shortcut-settings', enabled: true },
+    { command: 'start-tour', label: t('tour.restart'), icon: 'tour', enabled: true },
     /* wiring:d1 — tabs + 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 },
+    { command: 'tab-new', label: t('cmd.tab_new'), icon: 'tab-new', enabled: true },
+    { command: 'split-toggle', label: t('cmd.split_toggle'), icon: 'split', enabled: props.splitEnabled !== false },
   ];
   return defs
     .filter((d) => d.enabled && matchScore(d.label, q) >= 0)
@@ -210,7 +249,7 @@ const hitItems = computed<HitItem[]>(() =>
     kind: 'hit' as const,
     id: `hit:${h.storage_id ?? ''}:${h.path ?? ''}:${h.id ?? ''}`,
     label: String(h.name ?? h.path ?? ''),
-    icon: h.type === 'dir' ? '📁' : '📄',
+    icon: '', // hit rows draw their real tile — see iconHtml()
     hit: h,
     crumb: hitCrumb(h),
     inContent: matchedInContent(h.matched),
@@ -264,13 +303,13 @@ const savedItems = computed<SavedGroupItem[]>(() => {
   const out: SavedGroupItem[] = [];
   // "Save this query" command — only when there IS a query and it isn't saved yet.
   if (q && !savedSearches.value.includes(q)) {
-    out.push({ kind: 'save', id: `save:${q}`, label: `${t('palette.save')}: ${q}`, icon: '💾', query: q });
+    out.push({ kind: 'save', id: `save:${q}`, label: `${t('palette.save')}: ${q}`, icon: 'save-search', query: q });
   }
   const scored = savedSearches.value
     .map((s) => ({ s, sc: matchScore(s, q) }))
     .filter((r) => r.sc >= 0 || !q);
   for (const r of scored) {
-    out.push({ kind: 'saved', id: `saved:${r.s}`, label: r.s, icon: '🔖', query: r.s });
+    out.push({ kind: 'saved', id: `saved:${r.s}`, label: r.s, icon: 'bookmark', query: r.s });
   }
   return out;
 });
@@ -457,7 +496,8 @@ onBeforeUnmount(() => {
             @mouseenter="active = i"
             @click="choose(it)"
           >
-            <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+            <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons + lib/fileIcons -->
+            <span class="fe-cmdp__icon" aria-hidden="true" v-html="iconHtml(it)"></span>
             <span class="fe-cmdp__label">{{ it.label }}</span>
           </button>
 
@@ -474,7 +514,8 @@ onBeforeUnmount(() => {
               @mouseenter="active = fileOffset + i"
               @click="choose(it)"
             >
-              <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+              <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons + lib/fileIcons -->
+              <span class="fe-cmdp__icon" aria-hidden="true" v-html="iconHtml(it)"></span>
               <span class="fe-cmdp__label">{{ it.label }}</span>
             </button>
           </template>
@@ -496,7 +537,8 @@ onBeforeUnmount(() => {
               @mouseenter="active = hitOffset + i"
               @click="choose(it)"
             >
-              <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+              <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons + lib/fileIcons -->
+              <span class="fe-cmdp__icon" aria-hidden="true" v-html="iconHtml(it)"></span>
               <span class="fe-cmdp__hitbody">
                 <span class="fe-cmdp__hitline">
                   <span class="fe-cmdp__label">{{ it.label }}</span>
@@ -529,7 +571,8 @@ onBeforeUnmount(() => {
               @click="choose(it)"
               @keydown.enter.prevent="choose(it)"
             >
-              <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+              <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons + lib/fileIcons -->
+              <span class="fe-cmdp__icon" aria-hidden="true" v-html="iconHtml(it)"></span>
               <span class="fe-cmdp__label">{{ it.label }}</span>
               <button
                 v-if="it.kind === 'saved'"
@@ -538,7 +581,7 @@ onBeforeUnmount(() => {
                 :title="t('palette.saved.delete')"
                 :aria-label="t('palette.saved.delete')"
                 @click.stop="removeSavedSearch(it.query)"
-              >🗑</button>
+              ><!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons --><span aria-hidden="true" v-html="actionIconSvg('delete')"></span></button>
             </div>
           </template>
 
@@ -555,7 +598,8 @@ onBeforeUnmount(() => {
               @mouseenter="active = cmdOffset + i"
               @click="choose(it)"
             >
-              <span class="fe-cmdp__icon" aria-hidden="true">{{ it.icon }}</span>
+              <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons + lib/fileIcons -->
+              <span class="fe-cmdp__icon" aria-hidden="true" v-html="iconHtml(it)"></span>
               <span class="fe-cmdp__label">{{ it.label }}</span>
             </button>
           </template>

package/src/components/ConnectionsPanel.vue

@@ -26,6 +26,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { ExplorerConfig, LocaleCode } from '../types/ExplorerConfig';
 import type { StorageRow } from '../types/Connections';
 import { useLocale } from '../composables/useLocale';
+import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
 import { useConnections, connectionsOrigin } from '../composables/useConnections';
 import {
   buildGuide,
@@ -68,6 +69,7 @@ const {
   storages,
   visible,
   me,
+  publicUrl,
   loading,
   loaded,
   error,
@@ -274,7 +276,7 @@ const protocols = guideProtocols();
 const protocol = ref(protocols[0] ?? 'webdav');
 const guideStorage = ref<string>('');
 
-const origin = computed(() => connectionsOrigin(props.config));
+const origin = computed(() => connectionsOrigin(props.config, publicUrl.value));
 
 /**
  * What the S3 key panel published: the caller's own key, the endpoint the
@@ -387,7 +389,8 @@ watch(
         :aria-label="t('conn.close')"
         @click="emit('close')"
       >
-        ✕
+        <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+        <span aria-hidden="true" v-html="actionIconSvg('close')"></span>
       </button>
     </header>
 
@@ -670,6 +673,7 @@ watch(
         v-if="protocol === 'ftps' || protocol === 'webdav' || protocol === 'mount'"
         :config="config"
         :protocol="protocol"
+        :host="hostOf(origin)"
       />
 
       <ConnectionGuideView v-if="guide" :guide="guide" :locale="locale" />

package/src/components/ContextMenu.vue

@@ -11,13 +11,35 @@ import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import type { FileNode } from '../types/FileNode';
 import { useLocale } from '../composables/useLocale';
 import { menuShortcutHint } from '../composables/useKeyboardShortcuts';
+import { actionIconSvg } from '../lib/actionIcons';
 
 export interface ContextAction {
   key: string;
   label: string;
+  /**
+   * gorunum:v1-icons — OPTIONAL icon override. Rows normally need nothing
+   * here: the glyph is looked up by `key` in lib/actionIcons. Set this to
+   *   • another icon key, when one action has two faces (`star` / `unstar`);
+   *   • any literal string (an emoji), when an embedder wants its own mark —
+   *     an unknown name draws no SVG and the string is printed as-is.
+   */
   icon?: string;
   danger?: boolean;
   disabled?: boolean;
+  /**
+   * tasi:m1 — WHY, in one sentence, for a row that is greyed out.
+   *
+   * ⚠ A disabled control has to explain itself or it is indistinguishable from
+   * a broken one. Sharing works on one item at a time, so "Paylaş / İzinler"
+   * greys out above a multi-selection — grey with a reason reads as a rule,
+   * grey without one reads as a bug, and HIDING it (which is what this row did
+   * until 2026-09-13) reads as the feature not existing.
+   *
+   * Rendered as the native `title` on both surfaces. Absent leaves the
+   * tooltip each surface already builds — the label plus its shortcut in the
+   * selection bar, nothing in the menu.
+   */
+  title?: string;
   hidden?: boolean;
   divider?: boolean;
   /**
@@ -61,6 +83,15 @@ function hintFor(a: ContextAction): string {
   return menuShortcutHint(a.shortcutId ?? a.key);
 }
 
+/* gorunum:v1-icons — the row's glyph. `icon` is consulted FIRST because that
+ * is where a two-faced action names its variant (`star` vs `unstar`) and where
+ * an embedder puts its own mark; the action's own key is the default. An
+ * unrecognised name returns '' and the template falls back to printing the
+ * string, so a host that still passes an emoji keeps it. */
+function iconFor(a: ContextAction): string {
+  return actionIconSvg(a.icon || a.key);
+}
+
 const open = ref(false);
 const x = ref(0);
 const y = ref(0);
@@ -328,10 +359,13 @@ defineExpose({ show, hide });
                 class="fe-ctx__item fe-sheet__item"
                 :class="{ 'is-danger': a.danger, 'is-disabled': a.disabled }"
                 :disabled="a.disabled"
+                :title="a.title"
                 role="menuitem"
                 @click="pick(a)"
               >
-                <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
+                <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+                <span v-if="iconFor(a)" class="fe-ctx__icon" aria-hidden="true" v-html="iconFor(a)"></span>
+                <span v-else-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
                 <span class="fe-ctx__label">{{ a.label }}</span>
                 <span v-if="hintFor(a)" class="fe-ctx__key" aria-hidden="true">{{ hintFor(a) }}</span>
               </button>
@@ -356,10 +390,13 @@ defineExpose({ show, hide });
               class="fe-ctx__item"
               :class="{ 'is-danger': a.danger, 'is-disabled': a.disabled }"
               :disabled="a.disabled"
+              :title="a.title"
               role="menuitem"
               @click="pick(a)"
             >
-              <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
+              <!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons -->
+              <span v-if="iconFor(a)" class="fe-ctx__icon" aria-hidden="true" v-html="iconFor(a)"></span>
+              <span v-else-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
               <span class="fe-ctx__label">{{ a.label }}</span>
               <!-- tus:t1 — the key that does this from the keyboard, read from
                    the registry so a remap reaches it. Empty for a verb with no