@brftech/filex-core 0.30.1 → 0.31.0

package/src/components/SideNav.vue

@@ -28,12 +28,12 @@
  * hash does not match in the web-component build, so the rules silently stop
  * applying in every embed (measured on the share dialog: raw unstyled HTML).
  */
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useLocale } from '../composables/useLocale';
 import type { LocaleCode } from '../types/ExplorerConfig';
 
 /** The virtual listings the panel can open. '' = an ordinary folder. */
-export type NavView = '' | 'recent' | 'starred' | 'shared' | 'trash';
+export type NavView = '' | 'recent' | 'starred' | 'shared' | 'trash' | 'tag';
 
 export interface NavStorage {
   name: string;
@@ -61,6 +61,20 @@ const props = defineProps<{
   sharedStorages?: string[];
   /** Show the Trash entry (mirrors ExplorerConfig.trashVisible). */
   trashVisible?: boolean;
+  /* === etiket:t1 — the Tags section ==================================
+   * "Tagged files should show up inside the tag." Tags are the one
+   * navigation family whose entries are USER data: unbounded in number and
+   * dynamic in name. Still presentational here — the host fetches
+   * `tags/all` (once, cached) and hands the list over, exactly as it does
+   * for storages. */
+  /** Every tag that exists, alphabetical. Empty → the section shows its own
+   *  "no tags yet" line rather than disappearing. */
+  tags?: string[];
+  /** False until the first answer arrives, so "no tags yet" is never shown
+   *  to somebody who is simply still waiting. */
+  tagsLoaded?: boolean;
+  /** The tag currently on screen (activeView === 'tag'). */
+  activeTag?: string;
   /**
    * Show the Connections entries — "How to connect" and "API keys".
    * ⚠ Never derived from a role here or anywhere: the backend decides what a
@@ -68,6 +82,19 @@ const props = defineProps<{
    * accounts that need it (see ExplorerConfig.connections).
    */
   showConnections?: boolean;
+  /**
+   * Draw the surfaces that only mean something for ONE person: API keys,
+   * Recent, Starred, Shared with me. False when the caller is an app token —
+   * a host proxy's shared credential, where "your keys" would be the proxy's
+   * own and "your Recent" would be the token owner's history shown to a
+   * stranger (see ExplorerConfig.callerKind).
+   *
+   * ⚠ This is a KIND check, not the role check the comment above forbids, and
+   * it is not the whole panel: Upload, the storages, Trash and "How to
+   * connect" stay — an embed's users still upload and still mount. An embedder
+   * who wants no panel at all already has `sideNav: false`.
+   */
+  showIdentitySurfaces?: boolean;
   /** RBAC/root state — false hides the write affordances. */
   canWrite?: boolean;
   locale: LocaleCode;
@@ -75,7 +102,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'toggle'): void;
-  (e: 'open-view', view: Exclude<NavView, ''>): void;
+  (e: 'open-view', view: Exclude<NavView, '' | 'tag'>): void;
+  (e: 'open-tag', tag: string): void;
   (e: 'open-storage', name: string): void;
   (e: 'open-root'): void;
   (e: 'upload'): void;
@@ -95,18 +123,51 @@ const showLabels = computed(() => props.expanded || !!props.narrow);
 
 const sharedSet = computed(() => new Set(props.sharedStorages ?? []));
 
+/** The views that answer "what did *I* do" — dropped for an app token. */
+const IDENTITY_VIEWS = new Set<string>(['recent', 'starred', 'shared']);
+
 const views = computed(() => {
-  const list: Array<{ key: Exclude<NavView, ''>; label: string }> = [
+  const list: Array<{ key: Exclude<NavView, '' | 'tag'>; label: string }> = [
     { key: 'recent', label: t('sidenav.recent') },
     { key: 'starred', label: t('sidenav.starred') },
     { key: 'shared', label: t('sidenav.shared') },
   ];
   if (props.trashVisible !== false) list.push({ key: 'trash', label: t('sidenav.trash') });
+  // Filtered at the end rather than built conditionally: Trash is shared by
+  // everyone and the list keeps growing, so one rule at the bottom beats a
+  // condition wrapped around each entry.
+  if (props.showIdentitySurfaces === false) return list.filter((v) => !IDENTITY_VIEWS.has(v.key));
   return list;
 });
 
 const writable = computed(() => props.canWrite !== false);
 
+/* === etiket:t1 — an unbounded list in a fixed panel ====================
+ * A user with sixty tags must not push Storages and Connections off the
+ * bottom of the panel, and must not be handed sixty identical glyphs on a
+ * 56px rail either.
+ *
+ *   expanded / drawer → the first TAG_PEEK, then "Show all (N)". Both states
+ *                       scroll (.fe-sidenav__scroll), so this is about the
+ *                       sections BELOW staying reachable, not about overflow.
+ *   rail             → ONE "Tags" button that opens the panel. Sixty rail
+ *                       icons would be sixty copies of the same glyph with no
+ *                       label — the rail's contract is "every destination one
+ *                       click away", and this keeps it with one click more.
+ */
+const TAG_PEEK = 8;
+const tagsExpanded = ref(false);
+const allTags = computed(() => props.tags ?? []);
+const visibleTags = computed(() =>
+  tagsExpanded.value ? allTags.value : allTags.value.slice(0, TAG_PEEK),
+);
+const hiddenTagCount = computed(() => Math.max(0, allTags.value.length - visibleTags.value.length));
+/* The section is rendered as soon as the panel knows there ARE tags, and also
+ * once the answer came back empty — an empty section that says why is how a
+ * user learns the feature exists at all. It stays hidden only while the first
+ * answer is still in flight. */
+const showTags = computed(() => !!props.tagsLoaded || allTags.value.length > 0);
+
 const toggleLabel = computed(() =>
   props.narrow
     ? t('sidenav.close')
@@ -278,6 +339,105 @@ const toggleLabel = computed(() =>
         </li>
       </ul>
 
+      <!-- etiket:t1 — Tags. Between the views and the storages because a tag
+           IS a view (a listing with no folder behind it), not a place files
+           live. On the rail it collapses to one button that opens the panel:
+           sixty tags would otherwise be sixty copies of one glyph with no
+           label, and the rail's promise is that every destination stays one
+           click away. -->
+      <div v-if="showTags" class="fe-sidenav__section">
+        <template v-if="showLabels">
+          <p class="fe-sidenav__heading">{{ t('sidenav.tags') }}</p>
+          <ul class="fe-sidenav__group" :aria-label="t('sidenav.tags')">
+            <li v-for="tag in visibleTags" :key="tag">
+              <button
+                type="button"
+                class="fe-sidenav__item fe-sidenav__item--tag"
+                :class="{ 'is-active': activeView === 'tag' && activeTag === tag }"
+                :aria-current="activeView === 'tag' && activeTag === tag ? 'page' : undefined"
+                :title="tag"
+                :aria-label="tag"
+                :data-testid="`sidenav-tag-${tag}`"
+                @click="emit('open-tag', tag)"
+              >
+                <svg
+                  class="fe-ficon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  focusable="false"
+                >
+                  <path d="M4 4.5h7l9 9-6.5 6.5-9-9z" />
+                  <circle cx="8" cy="8.5" r="1.4" />
+                </svg>
+                <span class="fe-sidenav__text">{{ tag }}</span>
+              </button>
+            </li>
+            <!-- Nothing tagged yet: the section stays, and says how tags get
+                 made. A section that only exists once you already know the
+                 feature teaches nobody. -->
+            <li v-if="allTags.length === 0">
+              <p class="fe-sidenav__hint">{{ t('sidenav.tags.empty') }}</p>
+            </li>
+            <li v-if="hiddenTagCount > 0">
+              <button
+                type="button"
+                class="fe-sidenav__more"
+                data-testid="sidenav-tags-more"
+                @click="tagsExpanded = true"
+              >
+                {{ t('sidenav.tags.more', { count: hiddenTagCount }) }}
+              </button>
+            </li>
+            <li v-else-if="tagsExpanded && allTags.length > 8">
+              <button
+                type="button"
+                class="fe-sidenav__more"
+                data-testid="sidenav-tags-less"
+                @click="tagsExpanded = false"
+              >
+                {{ t('sidenav.tags.less') }}
+              </button>
+            </li>
+          </ul>
+        </template>
+        <template v-else>
+          <hr class="fe-sidenav__rule" aria-hidden="true" />
+          <ul class="fe-sidenav__group" :aria-label="t('sidenav.tags')">
+            <li>
+              <button
+                type="button"
+                class="fe-sidenav__item"
+                :class="{ 'is-active': activeView === 'tag' }"
+                :title="t('sidenav.tags')"
+                :aria-label="t('sidenav.tags')"
+                data-testid="sidenav-tags-rail"
+                @click="emit('toggle')"
+              >
+                <svg
+                  class="fe-ficon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  focusable="false"
+                >
+                  <path d="M4 4.5h7l9 9-6.5 6.5-9-9z" />
+                  <circle cx="8" cy="8.5" r="1.4" />
+                </svg>
+              </button>
+            </li>
+          </ul>
+        </template>
+      </div>
+
       <div v-if="storages.length" class="fe-sidenav__section">
         <p v-if="showLabels" class="fe-sidenav__heading">{{ t('sidenav.storages') }}</p>
         <hr v-else class="fe-sidenav__rule" aria-hidden="true" />
@@ -375,7 +535,10 @@ const toggleLabel = computed(() =>
               <span v-if="showLabels" class="fe-sidenav__text">{{ t('sidenav.connect') }}</span>
             </button>
           </li>
-          <li>
+          <!-- API keys is the person half of this section: "How to connect"
+               stays for an app token (mount instructions are not identity),
+               the keys go. -->
+          <li v-if="showIdentitySurfaces !== false">
             <button
               type="button"
               class="fe-sidenav__item"

package/src/components/StarButton.vue

@@ -6,7 +6,10 @@
  * `POST /api/files/manager/star`). Optimistic update — flips the local
  * state immediately and rolls back on API error.
  */
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
+import { setNodeStarred } from '../lib/star';
+import { useLocale } from '../composables/useLocale';
+import type { LocaleCode } from '../types/ExplorerConfig';
 
 const props = defineProps<{
   starred: boolean;
@@ -21,6 +24,17 @@ const props = defineProps<{
   authCredentials?: RequestCredentials;
   /** Compact mode for grid view (no label, just the icon). */
   compact?: boolean;
+  /**
+   * Card mode — the same button sitting ON a grid/gallery tile instead of in
+   * a list cell: a round translucent chip in the tile's corner. It is the SAME
+   * component, deliberately: a card star written separately is a second
+   * starring path, and the two drift the first time one of them is fixed.
+   */
+  card?: boolean;
+  /** Locale for the title/label. ⚠ The strings used to be hardcoded English
+   *  ("Star"/"Unstar"), which is a Turkish user's only untranslated control in
+   *  the row. */
+  locale?: LocaleCode;
 }>();
 
 const emit = defineEmits<{
@@ -31,22 +45,18 @@ const emit = defineEmits<{
 const local = ref(props.starred);
 watch(() => props.starred, (v) => { local.value = v; });
 
+const { t } = useLocale(() => props.locale ?? 'tr');
+const label = computed(() => t(local.value ? 'ctx.unstar' : 'ctx.star'));
+
 async function toggle() {
   const next = !local.value;
   local.value = next; // optimistic
   try {
-    const headers = {
-      'Content-Type': 'application/json',
-      ...(await (props.authHeaders ?? (() => ({})))()),
-    };
-    const base = props.apiBase ?? '';
-    const res = await fetch(`${base}/api/files/manager/star`, {
-      method: 'POST',
-      headers,
-      credentials: props.authCredentials ?? 'same-origin',
-      body: JSON.stringify({ node_id: props.nodeId, starred: next }),
+    await setNodeStarred(props.nodeId, next, {
+      apiBase: props.apiBase,
+      authHeaders: props.authHeaders,
+      authCredentials: props.authCredentials,
     });
-    if (!res.ok) throw new Error(`star toggle failed: ${res.status}`);
     emit('change', next);
   } catch (err) {
     local.value = !next; // rollback
@@ -59,9 +69,11 @@ async function toggle() {
   <button
     type="button"
     class="filex-star-btn"
-    :class="{ 'is-starred': local, 'is-compact': compact }"
+    :class="{ 'is-starred': local, 'is-compact': compact, 'is-card': card }"
     :aria-pressed="local"
-    :title="local ? 'Unstar' : 'Star'"
+    :title="label"
+    :aria-label="label"
+    data-testid="star-toggle"
     @click.stop="toggle"
   >
     <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
@@ -73,7 +85,7 @@ async function toggle() {
         d="M12 2.5l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 18.27l-6.18 3.23L7 14.63 2 9.76l6.91-1z"
       />
     </svg>
-    <span v-if="!compact" class="filex-star-label">{{ local ? 'Starred' : 'Star' }}</span>
+    <span v-if="!compact" class="filex-star-label">{{ label }}</span>
   </button>
 </template>
 

package/src/composables/useFileApi.ts

@@ -226,6 +226,9 @@ export function resolveEndpoints(config: ExplorerConfig): EndpointMap {
     // filex trash: list soft-deleted nodes + restore one by node id.
     trashList: derive(config.trashList, '/api/files/manager/trash'),
     trashRestore: derive(config.trashRestore, '/api/files/manager/restore'),
+    /* wiring:e2 — escrow proof-of-possession, then the owner is told. */
+    e2eEscrowChallenge: derive(config.e2eEscrowChallenge, '/api/files/e2e/escrow/challenge'),
+    e2eEscrowUsed: derive(config.e2eEscrowUsed, '/api/files/e2e/escrow/used'),
   };
 }
 
@@ -687,6 +690,38 @@ export function useFileApi(config: ExplorerConfig) {
     return jsonFetch<Capabilities>(endpoints.capabilities);
   }
 
+  /* wiring:e2 — escrow use is announced, not merely performed.
+   *
+   * Ask the server for a nonce sealed to the escrow public key; only the
+   * holder of the private half can read it back. Returning it is what earns
+   * the notification to the folder's owner — a bare "I used escrow" POST
+   * would be a string anyone could send.
+   *
+   * ⚠ This is an announcement, not a gate. An operator holding the private
+   * key can decrypt the folder offline with a script and never come here.
+   * docs/E2E-ENCRYPTION.md says so plainly and must keep saying so. */
+  async function e2eEscrowChallenge(
+    path: string,
+  ): Promise<{ id: string; challenge: string; kid: string }> {
+    if (!endpoints.e2eEscrowChallenge) throw new Error('e2e escrow endpoint not configured');
+    return jsonFetch(endpoints.e2eEscrowChallenge, {
+      method: 'POST',
+      body: JSON.stringify({ path }),
+    });
+  }
+
+  async function e2eEscrowUsed(payload: {
+    path: string;
+    id: string;
+    nonce: string;
+  }): Promise<{ ok: boolean; notified: boolean }> {
+    if (!endpoints.e2eEscrowUsed) throw new Error('e2e escrow endpoint not configured');
+    return jsonFetch(endpoints.e2eEscrowUsed, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+  }
+
   async function createShare(payload: {
     path: string;
     password?: boolean;
@@ -869,6 +904,9 @@ export function useFileApi(config: ExplorerConfig) {
     // Peripheral
     limits,
     capabilities,
+    /* wiring:e2 */
+    e2eEscrowChallenge,
+    e2eEscrowUsed,
     createShare,
     listShares,
     revokeShare,

package/src/composables/useKeyboardShortcuts.ts

@@ -38,6 +38,8 @@ export interface ShortcutHandlers {
   onShowHelp?: () => void; // ? (Shift+/ on most layouts)
   onToggleInspector?: () => void; // i (koru:k1 details panel)
   onToggleHidden?: () => void; // Ctrl+Shift+. — dot-file visibility
+  /* yildiz:s1 */
+  onStar?: () => void; // S — star / unstar the selection
   onQuickLook?: () => void; // Space (wiring:c2 quick-look overlay)
   /* wiring:d1 — tab strip actions */
   onTabNew?: () => void; // Ctrl+T
@@ -87,6 +89,10 @@ export const SHORTCUT_ACTIONS: ShortcutActionDef[] = [
   { id: 'inspector', defaultCombo: 'I', labelKey: 'shortcuts.inspector', groupKey: 'shortcuts.group.nav' } /* koru:k1 */,
   { id: 'help', defaultCombo: '?', labelKey: 'shortcuts.help', groupKey: 'shortcuts.group.nav' },
   { id: 'toggle-hidden', defaultCombo: 'Ctrl+Shift+.', labelKey: 'shortcuts.toggle_hidden', groupKey: 'shortcuts.group.nav' },
+  /* yildiz:s1 — starring is an action, so it belongs where the other verbs
+   * are. A bare letter like the inspector's `I`; the handler ignores events
+   * from form controls, so it never eats a keystroke meant for a filename. */
+  { id: 'star', defaultCombo: 'S', labelKey: 'shortcuts.star', groupKey: 'shortcuts.group.file' },
   // Selection
   { id: 'select-all', defaultCombo: 'Ctrl+A', labelKey: 'shortcuts.select_all', groupKey: 'shortcuts.group.selection' },
   // File operations
@@ -115,6 +121,7 @@ const HANDLER_KEY: Record<string, keyof ShortcutHandlers> = {
   close: 'onClose',
   inspector: 'onToggleInspector',
   'toggle-hidden': 'onToggleHidden',
+  star: 'onStar' /* yildiz:s1 */,
   help: 'onShowHelp',
   'select-all': 'onSelectAll',
   rename: 'onRename',

package/src/index.ts

@@ -155,21 +155,47 @@ export {
   E2E_MARKER_NAME,
   E2E_MAGIC,
   E2E_VERSION,
+  E2E_MARKER_VERSION,
   E2E_DEFAULT_ITERATIONS,
   E2E_MAX_FILE_BYTES,
   E2E_MIN_PASSWORD_LEN,
+  E2E_RECOVERY_KEY_BYTES,
+  E2E_ESCROW_ALG,
   E2eDecryptError,
   deriveKek,
   createMarker,
+  createEncryptedFolder,
+  upgradeMarkerV1,
   parseMarker,
   verifyPassword,
+  unlockWithPassword,
+  unlockWithRecoveryKey,
+  unlockWithEscrowKey,
+  markerHasRecovery,
+  markerHasEscrow,
+  generateRecoveryKey,
+  formatRecoveryKey,
+  parseRecoveryKey,
+  importEscrowPublicKey,
+  importEscrowPrivateKey,
+  escrowKeyId,
   hasMagic,
   encryptFile,
   decryptFile,
   createKeyRing,
 } from './lib/e2ecrypto';
-export type { E2eMarker, E2eKeyRing } from './lib/e2ecrypto';
+export type {
+  E2eMarker,
+  E2eKeyRing,
+  E2eFmkMode,
+  E2eRecoverySlot,
+  E2eEscrowSlot,
+  CreateFolderOptions,
+  CreatedFolder,
+} from './lib/e2ecrypto';
 export { default as EncryptedFolderModal } from './components/EncryptedFolderModal.vue';
+export { default as RecoveryKeyModal } from './components/RecoveryKeyModal.vue';
+export { default as E2eRecoveryUnlockModal } from './components/E2eRecoveryUnlockModal.vue';
 /* /wiring:e2 */
 
 /* ── connections ────────────────────────────────────────────────────