@brftech/filex-core 0.44.2 → 0.45.1

package/src/components/CommandPalette.vue

@@ -20,11 +20,28 @@
  *      rendered as pure text nodes (no innerHTML).
  *   5. Saved searches — localStorage-backed (`filex.saved-searches`, max 10);
  *      "save current query" command + per-row delete.
+ *
+ * #47 — a hit is something to act on, not only to open:
+ *   6. Each hit row carries a Download button (`download-hit`) and drags out
+ *      (`drag-hit`, with the DragEvent). The palette only says WHICH hit; the
+ *      explorer answers through the same hooks a listing row uses, and
+ *      `hitCan` lets it withhold a verb it cannot serve for that hit.
+ *   7. Hits stamped with an `account` (a host with several accounts — the
+ *      desktop rail) are drawn one group per account under a badge, each
+ *      group capped on its own. Unstamped hits draw exactly as before.
+ *   8. A drag let go INSIDE the palette is swallowed (`drop-inside`): the
+ *      explorer's root turns an OS file drop into an UPLOAD, and the palette
+ *      sits inside that root.
+ *
+ * #71 — `warm-hit` when the pointer rests on / presses a draggable hit: the
+ *   explorer may need a server-minted link for the drag, and `dragstart` is
+ *   too late to ask (lib/dragOut createDragLinks).
  */
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
-import type { LocaleCode } from '../types/ExplorerConfig';
+import type { LocaleCode, SearchAccount } from '../types/ExplorerConfig';
 import type { FileNode, ViewMode } from '../types/FileNode';
 import type { GlobalSearchHit } from '../composables/useFileApi';
+import { groupHitsByAccount } from '../lib/searchHit';
 import { matchedInContent, snippetSegments } from '../lib/snippet';
 import { actionIconSvg } from '../lib/actionIcons';
 import { fileIconTile } from '../lib/fileIcons';
@@ -52,6 +69,13 @@ const props = defineProps<{
    * behaviour every other caller has had: a blank palette.
    */
   initialQuery?: string;
+  /**
+   * #47 — may this hit be downloaded / dragged out? Absent = yes to both.
+   * The explorer knows what a hit's account and this host can do (a folder
+   * cannot ride the browser's single-file drag; another account's hit needs
+   * the host's hook); the palette only draws the answer.
+   */
+  hitCan?: (hit: GlobalSearchHit, action: 'download' | 'drag') => boolean;
 }>();
 
 const emit = defineEmits<{
@@ -66,6 +90,13 @@ const emit = defineEmits<{
   (e: 'go-up'): void;
   /* bul:s3 — an "everywhere" hit was chosen. */
   (e: 'open-hit', hit: GlobalSearchHit): void;
+  /* #47 — the hit's Download button / a drag started on its row / a drag let
+     go inside the palette (swallowed here — see the file header, point 8). */
+  (e: 'download-hit', hit: GlobalSearchHit): void;
+  (e: 'drag-hit', hit: GlobalSearchHit, ev: DragEvent): void;
+  (e: 'drop-inside'): void;
+  /* #71 — the pointer rests on / presses a draggable hit. */
+  (e: 'warm-hit', hit: GlobalSearchHit): void;
   /* wiring:int — settings surfaces reachable from anywhere via the palette */
   (e: 'open-theme'): void;
   (e: 'open-shortcut-settings'): void;
@@ -87,7 +118,13 @@ type PaletteItem =
   | { kind: 'file'; id: string; label: string; icon: string; node: FileNode }
   | { kind: 'command'; id: string; label: string; icon: string; command: string }
   /* bul:s3 — everywhere hit / saved search / save-current-query. */
-  | { kind: 'hit'; id: string; label: string; icon: string; hit: GlobalSearchHit; crumb: string; inContent: boolean; snippet: string }
+  | {
+      kind: 'hit'; id: string; label: string; icon: string; hit: GlobalSearchHit; crumb: string; inContent: boolean; snippet: string;
+      /* #47 — the account badge drawn ABOVE this row (first row of its group only). */
+      groupHead?: SearchAccount;
+      canDownload: boolean;
+      canDrag: boolean;
+    }
   | { kind: 'saved'; id: string; label: string; icon: string; query: string }
   | { kind: 'save'; id: string; label: string; icon: string; query: string };
 
@@ -221,7 +258,9 @@ function scheduleEverywhere(q: string) {
     try {
       const hits = await fn(q);
       if (seq !== everywhereSeq) return; // stale response — a newer query won
-      everywhere.value = Array.isArray(hits) ? hits.slice(0, EVERYWHERE_LIMIT) : [];
+      // #47 — capped per ACCOUNT in hitItems (groupHitsByAccount), not here: a
+      // flat cut would let the first account's eight rows hide every other.
+      everywhere.value = Array.isArray(hits) ? hits : [];
     } catch {
       if (seq === everywhereSeq) everywhere.value = [];
     } finally {
@@ -244,18 +283,66 @@ function hitCrumb(h: GlobalSearchHit): string {
   return parent || '/';
 }
 
-const hitItems = computed<HitItem[]>(() =>
-  everywhere.value.map((h) => ({
-    kind: 'hit' as const,
-    id: `hit:${h.storage_id ?? ''}:${h.path ?? ''}:${h.id ?? ''}`,
-    label: String(h.name ?? h.path ?? ''),
-    icon: '', // hit rows draw their real tile — see iconHtml()
-    hit: h,
-    crumb: hitCrumb(h),
-    inContent: matchedInContent(h.matched),
-    snippet: typeof h.snippet === 'string' ? h.snippet : '',
-  })),
-);
+/* #47 — flattened in DRAWN order: group by group, so the keyboard's ↑/↓ and
+   the rows on screen walk the same sequence. */
+const hitItems = computed<HitItem[]>(() => {
+  const can = props.hitCan;
+  const out: HitItem[] = [];
+  for (const group of groupHitsByAccount(everywhere.value, EVERYWHERE_LIMIT)) {
+    group.hits.forEach((h, i) => {
+      out.push({
+        kind: 'hit' as const,
+        // The account is part of the key: two accounts can both hold node 7
+        // at `a.txt` on storage 1.
+        id: `hit:${h.account?.id ?? ''}:${h.storage_id ?? ''}:${h.path ?? ''}:${h.id ?? ''}`,
+        label: String(h.name ?? h.path ?? ''),
+        icon: '', // hit rows draw their real tile — see iconHtml()
+        hit: h,
+        crumb: hitCrumb(h),
+        inContent: matchedInContent(h.matched),
+        snippet: typeof h.snippet === 'string' ? h.snippet : '',
+        groupHead: i === 0 ? group.account : undefined,
+        canDownload: can ? can(h, 'download') : true,
+        canDrag: can ? can(h, 'drag') : true,
+      });
+    });
+  }
+  return out;
+});
+
+/* === #47 — hit verbs ==================================================== */
+
+function downloadHit(it: HitItem) {
+  if (!it.canDownload) return;
+  emit('download-hit', it.hit);
+}
+
+function warmHit(it: HitItem) {
+  if (it.canDrag) emit('warm-hit', it.hit);
+}
+
+function onHitDragStart(it: HitItem, ev: DragEvent) {
+  if (!it.canDrag) {
+    ev.preventDefault();
+    return;
+  }
+  emit('drag-hit', it.hit, ev);
+}
+
+/**
+ * Everything dragged over the palette stops here. The explorer's root owns
+ * `dragenter`/`dragover`/`drop` for uploads, and the palette is inside it: a
+ * hit dragged out through the desktop shell is an OS FILE drag, so letting it
+ * bubble would light the upload overlay and, on release, upload the shell's
+ * stand-in copy into whatever folder is open behind the palette.
+ */
+function onBackdropDragOver(ev: DragEvent) {
+  ev.preventDefault();
+}
+function onBackdropDrop(ev: DragEvent) {
+  ev.preventDefault();
+  emit('drop-inside');
+}
 
 /* === bul:s3 — saved searches (localStorage) ============================= */
 
@@ -450,6 +537,10 @@ onBeforeUnmount(() => {
       class="fe-modal__backdrop fe-cmdp__backdrop"
       role="presentation"
       @click="emit('close')"
+      @dragenter.stop="onBackdropDragOver"
+      @dragover.stop="onBackdropDragOver"
+      @dragleave.stop
+      @drop.stop="onBackdropDrop"
     >
       <div
         class="fe-cmdp"
@@ -526,34 +617,67 @@ onBeforeUnmount(() => {
             <div v-if="everywhereLoading && !hitItems.length" class="fe-cmdp__loading">
               {{ t('palette.searching') }}
             </div>
-            <button
-              v-for="(it, i) in hitItems"
-              :key="it.id"
-              type="button"
-              class="fe-cmdp__item fe-cmdp__item--hit"
-              :class="{ 'is-active': hitOffset + i === active }"
-              role="option"
-              :aria-selected="hitOffset + i === active"
-              @mouseenter="active = hitOffset + i"
-              @click="choose(it)"
-            >
-              <!-- 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"><bdi>{{ it.label }}</bdi></span>
-                  <span v-if="it.inContent" class="fe-cmdp__badge">{{ t('search.in_content') }}</span>
+            <template v-for="(it, i) in hitItems" :key="it.id">
+              <!-- #47 — one badge per signed-in account, above its first row. -->
+              <div
+                v-if="it.groupHead"
+                class="fe-cmdp__acct"
+                data-testid="palette-account-group"
+                :data-account="it.groupHead.id"
+              >
+                <span
+                  class="fe-cmdp__acct-dot"
+                  aria-hidden="true"
+                  :style="it.groupHead.color ? { background: it.groupHead.color } : undefined"
+                ></span>
+                <span class="fe-cmdp__acct-label"><bdi>{{ it.groupHead.label }}</bdi></span>
+                <span v-if="it.groupHead.detail" class="fe-cmdp__acct-detail"><bdi>{{ it.groupHead.detail }}</bdi></span>
+              </div>
+              <!-- A div, not a button: the row now holds its own Download button,
+                   and a button inside a button is not HTML (same shape as the
+                   saved-search rows below). -->
+              <div
+                class="fe-cmdp__item fe-cmdp__item--hit"
+                :class="{ 'is-active': hitOffset + i === active }"
+                role="option"
+                tabindex="-1"
+                :aria-selected="hitOffset + i === active"
+                :data-account="it.hit.account?.id"
+                :draggable="it.canDrag ? 'true' : 'false'"
+                @mouseenter="active = hitOffset + i; warmHit(it)"
+                @pointerdown="warmHit(it)"
+                @click="choose(it)"
+                @keydown.enter.prevent="choose(it)"
+                @dragstart="onHitDragStart(it, $event)"
+              >
+                <!-- 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"><bdi>{{ it.label }}</bdi></span>
+                    <span v-if="it.inContent" class="fe-cmdp__badge">{{ t('search.in_content') }}</span>
+                  </span>
+                  <span v-if="it.crumb" class="fe-cmdp__crumb" :title="it.crumb">{{ it.crumb }}</span>
+                  <!-- Snippet: «»-highlights become <mark> via TEXT segments — never innerHTML. -->
+                  <span v-if="it.snippet" class="fe-cmdp__snippet">
+                    <template v-for="(seg, si) in snippetSegments(it.snippet)" :key="si">
+                      <mark v-if="seg.match" class="fe-cmdp__mark">{{ seg.text }}</mark>
+                      <template v-else>{{ seg.text }}</template>
+                    </template>
+                  </span>
                 </span>
-                <span v-if="it.crumb" class="fe-cmdp__crumb" :title="it.crumb">{{ it.crumb }}</span>
-                <!-- Snippet: «»-highlights become <mark> via TEXT segments — never innerHTML. -->
-                <span v-if="it.snippet" class="fe-cmdp__snippet">
-                  <template v-for="(seg, si) in snippetSegments(it.snippet)" :key="si">
-                    <mark v-if="seg.match" class="fe-cmdp__mark">{{ seg.text }}</mark>
-                    <template v-else>{{ seg.text }}</template>
-                  </template>
-                </span>
-              </span>
-            </button>
+                <button
+                  v-if="it.canDownload"
+                  type="button"
+                  class="fe-cmdp__hitact"
+                  data-testid="palette-hit-download"
+                  :title="t('ctx.download')"
+                  :aria-label="t('ctx.download')"
+                  draggable="false"
+                  @click.stop="downloadHit(it)"
+                ><!-- eslint-disable-next-line vue/no-v-html — static markup from lib/actionIcons --><span aria-hidden="true" v-html="actionIconSvg('download')"></span></button>
+              </div>
+            </template>
           </template>
 
           <!-- bul:s3 — saved searches -->

package/src/components/ConnectionsPanel.vue

@@ -24,9 +24,10 @@
  * copy of the first in the screen that answers the OTHER question was the
  * whole complaint; do not bring it back, extend Admin → Storages instead.
  */
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import type { ExplorerConfig, LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
+import { useSystemDark } from '../composables/useSystemDark';
 import { actionIconSvg } from '../lib/actionIcons'; /* ikon:emoji */
 import { useConnections, connectionsOrigin } from '../composables/useConnections';
 import {
@@ -71,14 +72,7 @@ const { visible, me, publicUrl, error, load } = useConnections(props.config);
 // Resolved in JS rather than left to `prefers-color-scheme`, because the
 // stylesheet's auto rule keys off the explorer's own `.fe` root and this
 // panel is mounted on its own.
-const mq =
-  typeof window !== 'undefined' && window.matchMedia
-    ? window.matchMedia('(prefers-color-scheme: dark)')
-    : undefined;
-const osDark = ref(!!mq?.matches);
-function onMq(e: MediaQueryListEvent) {
-  osDark.value = e.matches;
-}
+const osDark = useSystemDark();
 const themeResolved = computed(() => {
   const mode = props.config.theme ?? 'auto';
   if (mode === 'light' || mode === 'dark') return mode;
@@ -169,10 +163,8 @@ watch(
 
 // ── lifecycle ────────────────────────────────────────────────────────
 onMounted(() => {
-  mq?.addEventListener?.('change', onMq);
   void load();
 });
-onBeforeUnmount(() => mq?.removeEventListener?.('change', onMq));
 
 // The panel is often mounted once and re-pointed (the desktop app switches
 // accounts without tearing the window down), so a changed server must

package/src/components/SideNav.vue

@@ -172,16 +172,17 @@ const props = defineProps<{
    */
   canNewDocument?: boolean;
   /**
-   * The signed-in person's storage line, from `GET /api/files/quota/me`. Null
-   * (the default) renders nothing at all.
+   * The storage line, as `lib/storageLine` decided it. Null (the default)
+   * renders nothing at all.
    *
-   * ⚠ It is a PER-USER figure, not this storage's — `quota.Snapshot` sums
-   * `nodes.size WHERE owner_id = me`, and there is no per-provider quota
-   * (internal/quota/service.go). The mockup labels it with the drive's name;
-   * that would be a lie about which number this is, so the label says
-   * "Storage" and the drive name stays out of it.
+   * ⚠ Which number it is depends on the person, and the label covers both:
+   * with a quota, their own uploads against it ("X of Y"); without one, the
+   * size of the drives listed above — the figure Home's cards print, in the
+   * same sentence. `partial` makes that size a lower bound ("at least X").
+   * The mockup labels it with one drive's name; the line may sum several, so
+   * the label says "Storage" and the drive names stay out of it.
    */
-  quota?: { used: number; total: number; unlimited: boolean } | null;
+  quota?: { used: number; total: number; unlimited: boolean; partial?: boolean } | null;
   /** Resolved theme — the teleported New menu leaves the `.fe` variable scope. */
   theme?: ThemeMode;
   /**
@@ -454,9 +455,13 @@ const quotaPercent = computed(() => {
 const quotaText = computed(() => {
   const q = props.quota;
   if (!q) return '';
-  return q.unlimited || q.total <= 0
-    ? t('drive.storage.used_unlimited', { used: formatSize(q.used) })
-    : t('drive.storage.used', { used: formatSize(q.used), total: formatSize(q.total) });
+  if (q.unlimited || q.total <= 0) {
+    // The drives' size — said as Home's card says it (HomeView.storageCaption).
+    return q.partial
+      ? t('drive.storage.used_partial', { used: formatSize(q.used) })
+      : t('drive.storage.used_unlimited', { used: formatSize(q.used) });
+  }
+  return t('drive.storage.used', { used: formatSize(q.used), total: formatSize(q.total) });
 });
 
 /** Only the drawer draws this control now (see the template). */

package/src/components/plugin/PluginViewModal.vue

@@ -40,6 +40,12 @@ const props = defineProps<{
   surface: PluginSurface | null;
   /** Adapter-qualified path of the row the view was opened on (echoed on every event). */
   path?: string;
+  /**
+   * Every row of the selection the view was opened on (echoed on every
+   * event as `paths`). ⚠ Without it a screen opened on three files talks
+   * about the first one from its second event on (#64).
+   */
+  paths?: string[];
   /** Storage names a file-chooser may span; where its picker opens. */
   storages?: string[];
   startAt?: string;
@@ -69,6 +75,7 @@ const conv = usePluginSurface(
     plugin: props.plugin,
     view: props.view,
     path: () => props.path,
+    paths: () => props.paths,
     locale: () => props.locale,
     errorText: () => t('plugin.view.error'),
   },

package/src/components/plugin/nodes/SurfacePdfFields.vue

@@ -50,6 +50,7 @@ import type { FileRefResolver, PdfFieldsSource } from '../../../types/Plugins';
 import { useLocale } from '../../../composables/useLocale';
 import { fetchViewerArrayBuffer } from '../../../composables/useViewerFetch';
 import { labelOf } from '../../../lib/pluginLabel';
+import { inkOn } from '../../../composables/usePublicBranding';
 import { loadPdfjs } from '../../../lib/pdfjsLoader';
 import { actionIconSvg } from '../../../lib/actionIcons';
 import {
@@ -206,6 +207,20 @@ function fieldColor(f: PdfField): string {
   return signerColor(signers.value, f.assignee);
 }
 
+/**
+ * A box card's colours: its signer's, and the ink that reads on THAT colour.
+ *
+ * ⚠ Not `--fe-text-on-primary`. A signer's colour is an identity colour, the
+ * same in every theme, so the ink on it must be the colour's own — the theme
+ * token is dark in dark mode and measured 3.5:1 on the first signer's blue
+ * (#57). A colour that is not hex (a plugin may name its own) keeps the token.
+ */
+function cardStyle(f: PdfField): Record<string, string> {
+  const color = fieldColor(f);
+  const ink = inkOn(color);
+  return ink ? { '--spdf-color': color, '--spdf-ink': ink } : { '--spdf-color': color };
+}
+
 function signerLabel(assignee: string | undefined): string {
   const s = signers.value.find((x) => x.id === assignee);
   return s ? labelOf(s.label, props.locale) || s.id : assignee || '';
@@ -1042,7 +1057,7 @@ const checkIcon = actionIconSvg('check');
         v-for="(f, i) in local"
         :key="f.id"
         class="fe-spdf__card"
-        :style="{ '--spdf-color': fieldColor(f) }"
+        :style="cardStyle(f)"
         :data-testid="`surface-pdf-card-${f.id}`"
       >
         <span class="fe-spdf__cardno" aria-hidden="true">{{ i + 1 }}</span>

package/src/components/public/PublicLinkPage.vue

@@ -24,6 +24,7 @@ import type { LocaleCode, ThemeMode } from '../../types/ExplorerConfig';
 import type { PublicRequestInfo, PublicShareInfo } from '../../types/Public';
 import { useLocale } from '../../composables/useLocale';
 import { usePublicBranding } from '../../composables/usePublicBranding';
+import { useSystemDark } from '../../composables/useSystemDark';
 import { usePublicRequest, usePublicShare } from '../../composables/usePublicLink';
 import { hasLocale, normalizeLocaleCode } from '../../lib/uiLocales';
 import { localPref, setLocalPref } from '../../lib/prefs';
@@ -81,6 +82,10 @@ const { t, formatSize } = useLocale(() => locale.value);
 
 const brand = usePublicBranding({ base: props.base });
 
+/* ⚠ The system's answer as a LIVE ref (#57): read inside the computed below
+   it was read once, and an open page kept the mode it was opened in. */
+const systemDark = useSystemDark();
+
 /**
  * Light or dark.
  *
@@ -92,11 +97,7 @@ const brand = usePublicBranding({ base: props.base });
 const resolvedTheme = computed<'light' | 'dark'>(() => {
   const want = props.theme && props.theme !== 'auto' ? props.theme : localPref('theme') || brand.themeDefault.value;
   if (want === 'light' || want === 'dark') return want;
-  try {
-    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  } catch {
-    return 'light';
-  }
+  return systemDark.value ? 'dark' : 'light';
 });
 
 /* ── the link itself ──────────────────────────────────────────────────── */

package/src/composables/useFileApi.ts

@@ -22,7 +22,8 @@
  */
 
 import type { StorageInfo } from '../lib/catalogCoverage';
-import type { ExplorerConfig, AuthConfig, EndpointMap } from '../types/ExplorerConfig';
+import type { MeasuredDrive } from '../lib/storageLine';
+import type { ExplorerConfig, AuthConfig, EndpointMap, SearchAccount } from '../types/ExplorerConfig';
 import { resolveLocale } from '../locales/resolve';
 import { listingAddress } from '../lib/internalPaths';
 import { localeTag } from './useLocale';
@@ -212,6 +213,15 @@ export interface GlobalSearchHit {
   snippet?: string;
   /** Where the hit matched: name | content | both. */
   matched?: 'name' | 'content' | 'both';
+  /** Drive NAME the hit lives on (the server fills it; older ones did not). */
+  storage?: string;
+  /**
+   * #47 — which signed-in account the hit came from. Never on the wire: the
+   * explorer stamps it when the host searches several accounts
+   * (`ExplorerConfig.accountSearch`). Absent = this mount's own account, with
+   * no other account in play.
+   */
+  account?: SearchAccount;
   [k: string]: unknown;
 }
 
@@ -555,6 +565,26 @@ export function useFileApi(config: ExplorerConfig) {
     }
   }
 
+  /**
+   * `GET /api/files/quota/storages` → `{storages: [{name, used_bytes,
+   * file_count, coverage?}]}` — how full each drive the caller can open is
+   * (handlers/quota_storages.go, RBAC-filtered server-side). The storage line
+   * asks for it when the host handed over no size for some drive — the
+   * desktop app hands over names only (lib/storageLine).
+   *
+   * ⚠ Null on ANY failure, for the reason `quotaMe()` is: a server without the
+   * route must leave the panel as it was.
+   */
+  async function storageUsage(): Promise<MeasuredDrive[] | null> {
+    const base = endpoints.manager.replace(/\/manager(\?.*)?$/, '/quota/storages');
+    try {
+      const body = await jsonFetch<{ storages?: unknown }>(base);
+      return Array.isArray(body?.storages) ? (body.storages as MeasuredDrive[]) : null;
+    } catch {
+      return null;
+    }
+  }
+
   async function subfolders(path: string): Promise<{ folders: FileNode[] }> {
     return jsonFetch<{ folders: FileNode[] }>(managerUrl('subfolders', { path }));
   }
@@ -1141,6 +1171,7 @@ export function useFileApi(config: ExplorerConfig) {
     search,
     globalSearch /* bul:s3 */,
     quotaMe /* surucu:d1 */,
+    storageUsage /* surucu:d1 */,
     subfolders,
     newFolder,
     newFile,

package/src/composables/usePluginSurface.ts

@@ -38,6 +38,13 @@ export interface PluginSurfaceHost {
   view: string;
   /** Adapter-qualified path the view was opened on — echoed on every event. */
   path?: () => string | undefined;
+  /**
+   * Every row the view was opened on (a selection) — echoed on every event
+   * as `paths`, beside `path`. Absent or empty for a frame opened on one
+   * row or on none (a deep link, a home page, the inspector, a public page),
+   * which then sends `path` alone, exactly as before.
+   */
+  paths?: () => readonly string[] | undefined;
   locale: () => string;
   /** The words for an answer without a surface. */
   errorText: () => string;
@@ -128,9 +135,14 @@ export function usePluginSurface(host: PluginSurfaceHost, events: PluginSurfaceE
     }
     const mine = ++seq;
     failure.value = '';
+    // ⚠⚠ The WHOLE selection, on every event (#64). The opening `run` carried
+    // it; echoing only `path` here made the server answer every later event
+    // about the first file, and the submit queue the job on that file alone.
+    const selection = host.paths?.();
     try {
       const res = await host.api.pluginViewEvent(host.plugin, host.view, {
         path: host.path?.(),
+        ...(selection?.length ? { paths: [...selection] } : {}),
         state: current.value?.state ?? {},
         event,
         action_id: actionId,

package/src/composables/useSystemDark.ts

@@ -0,0 +1,32 @@
+/**
+ * useSystemDark — is the operating system in dark mode, as a ref that turns
+ * with it while the component is mounted.
+ *
+ * ⚠⚠ `window.matchMedia('(prefers-color-scheme: dark)').matches` read inside
+ * a `computed` is read ONCE: Vue cannot track a media query, so a page that
+ * resolves "auto" that way keeps the mode it was opened in. The public page
+ * (a share, a file request, an app's signing page) did exactly that — opened
+ * dark, the OS turned light, and the page stayed dark with `fe--theme-dark`
+ * pinned on its root (#57, measured in a browser). Every screen that resolves
+ * `auto` in script takes it from here, so the listener and its cleanup exist
+ * once.
+ */
+import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue';
+
+export function useSystemDark(): Readonly<Ref<boolean>> {
+  let mq: MediaQueryList | undefined;
+  try {
+    mq = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+      ? window.matchMedia('(prefers-color-scheme: dark)')
+      : undefined;
+  } catch {
+    mq = undefined;
+  }
+  const dark = ref(!!mq?.matches);
+  const onChange = (e: { matches: boolean }) => {
+    dark.value = e.matches;
+  };
+  onMounted(() => mq?.addEventListener?.('change', onChange));
+  onBeforeUnmount(() => mq?.removeEventListener?.('change', onChange));
+  return dark;
+}

package/src/index.ts

@@ -43,6 +43,17 @@ export {
   type CoverageReason,
   type StorageInfo,
 } from './lib/catalogCoverage';
+/* surucu:d1 — which number a storage line prints: the explorer panel's, and
+ * the admin top bar's chip, by one rule. */
+export {
+  hasCeiling,
+  needsMeasuredDrives,
+  storageLine,
+  type MeasuredDrive,
+  type PanelDrive,
+  type PersonUsage,
+  type StorageLine,
+} from './lib/storageLine';
 // tablo:t3 — the row's ONE action control ("Actions" / "Aksiyon"). DataTable
 // draws it for every table (`rowActions`); it stays exported for a host that
 // needs the same control outside a table. A second menu built beside
@@ -394,6 +405,11 @@ export { useFileApi, resolveEndpoints } from './composables/useFileApi';
 export type { FileApi, ManagerResponse, PendingOpDto } from './composables/useFileApi';
 /* bul:s3 — global-search contract types + snippet helpers */
 export type { GlobalSearchHit, GlobalSearchScope } from './composables/useFileApi';
+/* #47 — several accounts in one ⌘K (the desktop rail), and the one place a
+   search hit becomes an address. */
+export type { AccountSearchHook, SearchAccount, SearchHitItem } from './types/ExplorerConfig';
+export { groupHitsByAccount, hitItem, hitStorageName, hitToNode } from './lib/searchHit';
+export type { HitDriveContext, HitGroup } from './lib/searchHit';
 /* Browser-side reachability probe for external services (OnlyOffice, drawio).
    Lives here, not in the admin app, because the admin page and every embedder
    need the same answer to "can THIS browser reach the document server?" — see