@brftech/filex-core 0.13.4 → 0.15.0

package/src/FileExplorer.vue

@@ -15,7 +15,7 @@
  * the difference.
  */
 import { computed, customRef, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import type { ExplorerConfig } from './types/ExplorerConfig';
+import type { ExplorerConfig, ThemeMode } from './types/ExplorerConfig';
 import type {
   FileNode,
   ShareInfo,
@@ -53,7 +53,13 @@ import ShortcutsHelp from './components/ShortcutsHelp.vue';
 /* /cila:c wiring */
 /* wiring:c1 — tema galerisi */
 import ThemeGallery from './components/ThemeGallery.vue';
-import { useThemeState, applyThemeToEl, syncThemeStyle } from './lib/themes';
+import {
+  useThemeState,
+  useThemeModeState,
+  applyThemeToEl,
+  syncThemeStyle,
+  type ThemeModePref,
+} from './lib/themes';
 /* /wiring:c1 */
 /* wiring:c2 — shortcut settings modal + Space quick-look overlay */
 import ShortcutSettings from './components/ShortcutSettings.vue';
@@ -1372,9 +1378,10 @@ function openNodeInNewTab(n: FileNode) {
   // mode so OnlyOffice / Monaco mount with write permissions.
   // Read-only inspection lives on the "Önizle" entry + the dbl-click
   // in-page modal.
-  const sep = base.includes('?') ? '&' : '?';
+  const abs = absolutePageUrl(base);
+  const sep = abs.includes('?') ? '&' : '?';
   const url =
-    `${base}${sep}path=${encodeURIComponent(n.path)}` +
+    `${abs}${sep}path=${encodeURIComponent(n.path)}` +
     `&type=${encodeURIComponent(ext)}` +
     `&mode=edit`;
   window.open(url, '_blank', 'noopener');
@@ -2287,14 +2294,50 @@ async function onCopyPath(adapterPath: string) {
   }
 }
 
-// Sync auth-headers builder for PreviewModal — fetches against the
-// OnlyOffice config endpoint and the saveText endpoint need real
-// headers, not promises. Function-token bearers will use the cached
-// token; first-call resolution happens via the async path elsewhere.
+// Auth-headers builder handed to PreviewModal, QuickLook and every viewer.
+//
+// ⚠⚠ ASYNC on purpose. This used to call `authHeadersSync`, which drops the
+// bearer entirely when the embedder supplies a token FUNCTION rather than a
+// string — the shape the desktop app uses so the credential is fetched per
+// call instead of sitting in the page. The result was an Authorization-less
+// request and a 401 on the OnlyOffice config endpoint, the starred list, the
+// recently-opened POST and every viewer that fetches its own bytes. Consumers
+// must `await` this; the guard test in web/tests/api/authHeaders.test.ts fails
+// the build if one forgets.
 function buildAuthHeaders(extra: Record<string, string> = {}) {
-  return api.authHeadersSync({ ...extra });
+  return api.authHeaders({ ...extra });
 }
 
+/** The standalone viewer/editor route the backend serves next to the API. */
+const STANDALONE_ROUTE = '/files/edit';
+
+/**
+ * Makes a page route absolute against the API host.
+ *
+ * ⚠ A root-relative route like `/files/edit` is resolved by the browser
+ * against the PAGE, not the API — which is right when the explorer is embedded
+ * in the same app that serves the route, and wrong for every embed served from
+ * a different origin. In the desktop app the page origin is `app://filex`, so
+ * "Open in new tab" asked the OS to open `app://filex/files/edit?…`: no handler
+ * for that scheme exists, so the click did nothing at all, silently. Measured
+ * 2026-08-10.
+ */
+function absolutePageUrl(base: string): string {
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(base)) return base; // already absolute
+  const api = props.config.apiBase;
+  if (!api) return base; // same-origin embed — the browser resolves it correctly
+  try {
+    return new URL(base, api.endsWith('/') ? api : `${api}/`).toString();
+  } catch {
+    return base;
+  }
+}
+
+/** Where the modal's "Open in new tab" / "Edit" buttons should land. */
+const effectiveViewerBaseUrl = computed(() =>
+  absolutePageUrl(props.config.viewerBaseUrl || STANDALONE_ROUTE),
+);
+
 /* === wiring:c1 — tema galerisi ===
  * Selected theme (shared module state, localStorage `filex.theme`) is applied
  * as inline `--fe-*` variables on the explorer root, resolved to the active
@@ -2304,8 +2347,20 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
  * WHICH variant of the theme paints. */
 const showThemeGallery = ref(false);
 const { themeId: activeThemeId, setTheme: setActiveTheme } = useThemeState();
-// Resolved mode: explicit config wins, otherwise the OS preference — the same
-// logic variables.css encodes in CSS. The inline root variables beat every
+// The light/dark MODE the person looking at it picked in the gallery. 'host'
+// (the default) defers to whatever the embedder passed, so no existing embed
+// changes appearance until someone actually chooses.
+//
+// ⚠ Everything that used to read `config.theme` reads `themeMode` instead — a
+// choice that only reached the token resolution would leave the root class, the
+// modals and the teleported menus painting the OLD mode, which is exactly the
+// half-dark UI that bug looks like.
+const { themeMode: themeModePref, setThemeMode: setThemeModePref } = useThemeModeState();
+const themeMode = computed<ThemeMode>(() =>
+  themeModePref.value === 'host' ? props.config.theme || 'auto' : themeModePref.value,
+);
+// Resolved mode: an explicit choice wins, otherwise the OS preference — the
+// same logic variables.css encodes in CSS. The inline root variables beat every
 // stylesheet rule, so they must track this resolution at runtime.
 const themeMq =
   typeof window !== 'undefined' && window.matchMedia
@@ -2318,7 +2373,7 @@ function onThemeMqChange(e: MediaQueryListEvent) {
 onMounted(() => themeMq?.addEventListener?.('change', onThemeMqChange));
 onBeforeUnmount(() => themeMq?.removeEventListener?.('change', onThemeMqChange));
 const themeResolvedDark = computed(
-  () => props.config.theme === 'dark' || (props.config.theme !== 'light' && themeOsDark.value),
+  () => themeMode.value === 'dark' || (themeMode.value !== 'light' && themeOsDark.value),
 );
 watch(
   [activeThemeId, themeResolvedDark, rootEl],
@@ -2527,7 +2582,6 @@ const tabsApi = useTabs({ storageKey: tabsStorageKey() });
 const tabsRestored = tabsApi.restore();
 const tabsActiveId = tabsApi.activeId;
 
-const tabsVisible = computed(() => tabsApi.hasMultiple.value);
 const activeSplit = computed(() => tabsApi.activeTab.value?.split ?? null);
 
 // Sekme adı OTOMATİK = güncel klasör adı (kök = depo adı / kök etiketi).
@@ -2541,6 +2595,17 @@ const tabItems = computed(() =>
   tabsApi.tabs.value.map((tb) => ({ id: tb.id, label: tabLabel(tb.path), split: !!tb.split })),
 );
 
+// A second tab always shows the strip; `tabStrip: 'always'` keeps it there for
+// the first one too (see ExplorerConfig).
+// ⚠ Gated on there being a tab at all, not on the flag alone: tabs are seeded
+// in onMounted, so an 'always' host would otherwise paint one frame of an empty
+// strip — a lone `+` floating above the toolbar.
+const tabsVisible = computed(
+  () =>
+    tabsApi.hasMultiple.value ||
+    (props.config.tabStrip === 'always' && tabItems.value.length > 0),
+);
+
 // Aktif tab kullanıcıyı izler: gezinme + görünüm değişimi snapshot'a yazılır.
 watch(currentPath, (p) => tabsApi.syncActive({ path: p }));
 watch(viewMode, (v) => tabsApi.syncActive({ viewMode: v }));
@@ -2994,8 +3059,8 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
     ref="rootEl"
     class="fe"
     :class="{
-      'fe--theme-light': config.theme === 'light',
-      'fe--theme-dark': config.theme === 'dark',
+      'fe--theme-light': themeMode === 'light',
+      'fe--theme-dark': themeMode === 'dark',
       'fe--is-dragover': dragOver,
       'fe--density-compact': density === 'compact' /* cila:a density */,
       'fe--narrow': isNarrow /* bag:b4 */,
@@ -3036,7 +3101,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       :can-write="canWriteHere"
       :locale="locale"
       :narrow="isNarrow /* bag:b4 */"
-      :theme="config.theme || 'auto' /* bag:b4 */"
+      :theme="themeMode /* bag:b4 */"
       :inspector-open="showInspector /* koru:k1 */"
       @toggle-inspector="toggleInspector /* koru:k1 */"
       @open-theme="showThemeGallery = true /* wiring:c1 */"
@@ -3474,7 +3539,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
     <ContextMenu
       ref="ctxRef"
       :locale="locale"
-      :theme="config.theme || 'auto'"
+      :theme="themeMode"
       :sheet="isCoarse /* bag:b4 */"
       :actions="contextActions"
       @select="onContextAction"
@@ -3523,7 +3588,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       :open="showPreview"
       :locale="locale"
       :file="previewTarget"
-      :theme="config.theme || 'auto'"
+      :theme="themeMode"
       :preview-url="(p) => e2ePreviewSrc(p) /* wiring:e2 — çözülmüş blob > ham URL */"
       :download-url="(p) => (e2eUnlocked ? e2ePreviewSrc(p) : api.downloadUrl(p)) /* wiring:e2 */"
       :only-office-base="e2eActive ? null : effectiveOnlyOfficeBase /* wiring:e2 — OO ciphertext açamaz */"
@@ -3536,7 +3601,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       :drawio-url="effectiveDrawioUrl"
       :pdf-worker-url="props.config.pdfWorkerUrl || null"
       :pdf-save-url="props.config.pdfSaveUrl || null"
-      :viewer-base-url="props.config.viewerBaseUrl || null"
+      :viewer-base-url="effectiveViewerBaseUrl"
       @close="showPreview = false"
     />
     <ConvertModal
@@ -3568,8 +3633,8 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
         v-if="showRecents"
         class="fe fe-modal__backdrop fe-recents__backdrop"
         :class="{
-          'fe--theme-light': config.theme === 'light',
-          'fe--theme-dark': config.theme === 'dark',
+          'fe--theme-light': themeMode === 'light',
+          'fe--theme-dark': themeMode === 'dark',
         }"
         @click="showRecents = false"
       >
@@ -3656,11 +3721,14 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
     <ThemeGallery
       :open="showThemeGallery"
       :locale="locale"
-      :theme="config.theme || 'auto'"
+      :theme="themeMode"
       :dark="themeResolvedDark"
       :current="activeThemeId"
+      :mode="themeModePref"
+      :host-mode="config.theme || 'auto'"
       @close="showThemeGallery = false"
       @select="setActiveTheme"
+      @mode="(m: ThemeModePref) => setThemeModePref(m)"
     />
     <!-- /wiring:c1 -->
 
@@ -3694,14 +3762,14 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
     <ShortcutSettings
       :open="showShortcutSettings"
       :locale="locale"
-      :theme="config.theme || 'auto'"
+      :theme="themeMode"
       @close="showShortcutSettings = false"
     />
     <QuickLook
       :open="quickLookOpen"
       :locale="locale"
       :file="quickLookTarget"
-      :theme="config.theme || 'auto'"
+      :theme="themeMode"
       :preview-url="(p: string) => e2ePreviewSrc(p) /* wiring:e2 */"
       :download-url="(p: string) => (e2eUnlocked ? e2ePreviewSrc(p) : api.downloadUrl(p)) /* wiring:e2 */"
       :only-office-base="e2eActive ? null : effectiveOnlyOfficeBase /* wiring:e2 */"
@@ -3710,7 +3778,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       :auth-credentials="api.credentialsMode()"
       :drawio-url="effectiveDrawioUrl"
       :pdf-worker-url="props.config.pdfWorkerUrl || null"
-      :viewer-base-url="props.config.viewerBaseUrl || null"
+      :viewer-base-url="effectiveViewerBaseUrl"
       @close="quickLookOpen = false"
       @nav="quickLookNav"
       @open-full="quickLookOpenFull"
@@ -3721,7 +3789,7 @@ async function submitEncryptedFolder(payload: { name: string; password: string }
       :open="showTour"
       :locale="locale"
       :root="rootEl"
-      :theme="config.theme || 'auto'"
+      :theme="themeMode"
       @close="onTourClose"
     />
     <!-- /wiring:c4 -->

package/src/components/QuickLook.vue

@@ -32,7 +32,7 @@ const props = defineProps<{
   downloadUrl: (path: string) => string;
   onlyOfficeBase?: string | null;
   onlyOfficeConfigEndpoint?: string | null;
-  authHeaders?: () => Record<string, string>;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
   authCredentials?: RequestCredentials;
   drawioUrl?: string | null;
   pdfWorkerUrl?: string | null;

package/src/components/ThemeGallery.vue

@@ -11,9 +11,10 @@
  * Presentational only — selection state + persistence live in
  * lib/themes.ts (shared across instances); the parent forwards `select`.
  */
+import { computed } from 'vue';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { THEMES, DEFAULT_THEME_ID, type ThemeDef } from '../lib/themes';
+import { THEMES, DEFAULT_THEME_ID, type ThemeDef, type ThemeModePref } from '../lib/themes';
 import Modal from '../modals/Modal.vue';
 
 const props = defineProps<{
@@ -25,15 +26,37 @@ const props = defineProps<{
   dark: boolean;
   /** Currently selected theme id. */
   current: string;
+  /** The user's own light/dark preference; 'host' = never chosen. */
+  mode: ThemeModePref;
+  /** What the embedder asked for — what 'host' resolves to. */
+  hostMode: ThemeMode;
 }>();
 
 const emit = defineEmits<{
   (e: 'close'): void;
   (e: 'select', id: string): void;
+  (e: 'mode', mode: ThemeModePref): void;
 }>();
 
 const { t } = useLocale(() => props.locale);
 
+/* ---- light / dark / auto -------------------------------------------
+ * A theme says which palette; this says whether it paints its light or its
+ * dark variant. Two separate questions, one place to answer both — the theme
+ * button is where people come looking for "night mode".
+ *
+ * Only three choices are ever offered. 'host' is an internal default, not an
+ * option: when it is still in force the control highlights whichever of the
+ * three the embedder asked for, so the strip always shows the truth, and the
+ * first click pins an explicit choice. */
+const MODES: { id: Exclude<ThemeModePref, 'host'>; labelKey: string }[] = [
+  { id: 'light', labelKey: 'theme.mode.light' },
+  { id: 'dark', labelKey: 'theme.mode.dark' },
+  { id: 'auto', labelKey: 'theme.mode.auto' },
+];
+
+const shownMode = computed(() => (props.mode === 'host' ? props.hostMode : props.mode));
+
 /** Inline variables for one card — a self-contained mini `--fe-*` scope,
  *  so the preview markup can use the exact same tokens the real UI uses. */
 function cardVars(th: ThemeDef): Record<string, string> {
@@ -45,6 +68,46 @@ const DEFAULT_ID = DEFAULT_THEME_ID;
 
 <template>
   <Modal :open="open" :title="t('theme.title')" size="lg" :theme="theme" @close="emit('close')">
+    <div class="fe-thememode" role="group" :aria-label="t('theme.mode.label')">
+      <span class="fe-thememode__label">{{ t('theme.mode.label') }}</span>
+      <div class="fe-thememode__seg">
+        <button
+          v-for="m in MODES"
+          :key="m.id"
+          type="button"
+          class="fe-thememode__opt"
+          :class="{ 'is-active': shownMode === m.id }"
+          :aria-pressed="shownMode === m.id"
+          @click="emit('mode', m.id)"
+        >
+          <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"
+          >
+            <template v-if="m.id === 'light'">
+              <circle cx="12" cy="12" r="4" />
+              <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+            </template>
+            <template v-else-if="m.id === 'dark'">
+              <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
+            </template>
+            <template v-else>
+              <!-- Half-filled disc: the mode that is neither, decided elsewhere. -->
+              <circle cx="12" cy="12" r="9" />
+              <path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor" stroke="none" />
+            </template>
+          </svg>
+          <span>{{ t(m.labelKey) }}</span>
+        </button>
+      </div>
+    </div>
     <p class="fe-themes__hint">{{ t('theme.hint') }}</p>
     <div class="fe-themes" role="listbox" :aria-label="t('theme.title')">
       <button

package/src/composables/useFileApi.ts

@@ -259,11 +259,27 @@ export function useFileApi(config: ExplorerConfig) {
   const endpoints = resolveEndpoints(config);
   const authConf = normalizeAuth(config.auth);
 
+  /**
+   * Last bearer value a function-token actually produced.
+   *
+   * ⚠ Exists for `authHeadersSync` only. A function token is resolved
+   * asynchronously (the desktop app fetches it from the main process per
+   * call), and a synchronous caller cannot wait for that — before this cache
+   * it simply emitted NO Authorization header, so the request went out
+   * anonymous and came back 401. Remembering the last value turns "no
+   * credential at all" into "the credential we last held", which is the
+   * difference between a dead feature and a stale-token retry.
+   */
+  let lastBearer: string | null = null;
+
   async function authHeaders(extra: Record<string, string> = {}): Promise<Record<string, string>> {
     const h: Record<string, string> = { Accept: 'application/json', ...extra };
     if (authConf.kind === 'bearer') {
       const token = await resolveToken(authConf.token);
-      if (token) h.Authorization = `Bearer ${token}`;
+      if (token) {
+        h.Authorization = `Bearer ${token}`;
+        lastBearer = token;
+      }
     } else if (authConf.kind === 'csrf') {
       h['X-CSRF-TOKEN'] = authConf.csrf;
       h['X-Requested-With'] = 'XMLHttpRequest';
@@ -275,17 +291,21 @@ export function useFileApi(config: ExplorerConfig) {
   }
 
   /**
-   * Sync auth-header builder for callers that need headers in a
-   * non-async context (XMLHttpRequest, OnlyOffice config endpoint
-   * post-mounted PreviewModal). Function-token bearers are *resolved
-   * lazily* via the async path; here we just include the cached value
-   * if any. Component code should prefer the async `authHeaders()` —
-   * this is a defensive escape hatch.
+   * Sync auth-header builder for the few callers that genuinely cannot await
+   * (XMLHttpRequest's `setRequestHeader` loop).
+   *
+   * ⚠ Prefer `authHeaders()`. A function token can only be *resolved*
+   * asynchronously, so this returns the last value one produced — which is
+   * nothing at all until the first async call has run. Measured on 2026-08-10
+   * in the desktop app: the OnlyOffice config POST, the starred list and the
+   * recently-opened POST all went out with no Authorization header and came
+   * back 401, because every one of them reached the API through this function.
    */
   function authHeadersSync(extra: Record<string, string> = {}): Record<string, string> {
     const h: Record<string, string> = { Accept: 'application/json', ...extra };
-    if (authConf.kind === 'bearer' && typeof authConf.token === 'string') {
-      h.Authorization = `Bearer ${authConf.token}`;
+    if (authConf.kind === 'bearer') {
+      const token = typeof authConf.token === 'string' ? authConf.token : lastBearer;
+      if (token) h.Authorization = `Bearer ${token}`;
     } else if (authConf.kind === 'csrf') {
       h['X-CSRF-TOKEN'] = authConf.csrf;
       h['X-Requested-With'] = 'XMLHttpRequest';

package/src/composables/useMonacoLoader.ts

@@ -45,7 +45,7 @@ export function preloadEditor(): void {
       });
   }
   if (!highlightPromise) {
-    highlightPromise = import(/* @vite-ignore */ 'highlight.js')
+    highlightPromise = import(/* @vite-ignore */ 'highlight.js/lib/common')
       .then((mod) => {
         highlightCached = (mod as { default?: unknown }).default ?? mod;
         return highlightCached;

package/src/lib/themes.ts

@@ -403,6 +403,73 @@ export function useThemeState(): { themeId: Ref<string>; setTheme: (id: string)
   return { themeId, setTheme };
 }
 
+/* ------------------------------------------------------------------ */
+/* Light / dark MODE preference                                        */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The user's own light/dark choice — a different question from WHICH theme
+ * paints (that is `themeId` above).
+ *
+ * `'host'` is the default and means "whatever the embedder passed in
+ * `config.theme`". That is what keeps every existing embed unchanged: work and
+ * the fishapp hand the explorer the mode their own page is in, and an explorer
+ * that silently overrode it would sit as a dark rectangle inside a light page.
+ * The other three are an explicit choice by the person looking at it and
+ * outrank the host: `'auto'` follows the operating system, `'light'`/`'dark'`
+ * are fixed.
+ */
+export type ThemeModePref = 'host' | 'auto' | 'light' | 'dark';
+
+export const THEME_MODE_LS_KEY = 'filex.thememode';
+
+const MODE_VALUES: ThemeModePref[] = ['host', 'auto', 'light', 'dark'];
+
+function readStoredThemeMode(): ThemeModePref {
+  try {
+    const v = localStorage.getItem(THEME_MODE_LS_KEY) as ThemeModePref | null;
+    return v && MODE_VALUES.includes(v) ? v : 'host';
+  } catch {
+    return 'host';
+  }
+}
+
+const themeMode: Ref<ThemeModePref> = ref(
+  typeof window === 'undefined' ? 'host' : readStoredThemeMode(),
+);
+
+export function setThemeMode(mode: ThemeModePref): void {
+  const valid = MODE_VALUES.includes(mode) ? mode : 'host';
+  themeMode.value = valid;
+  try {
+    if (valid === 'host') localStorage.removeItem(THEME_MODE_LS_KEY);
+    else localStorage.setItem(THEME_MODE_LS_KEY, valid);
+  } catch {
+    /* quota / private mode */
+  }
+}
+
+/** Reactive handle for components: `{ themeMode, setThemeMode }`. */
+export function useThemeModeState(): {
+  themeMode: Ref<ThemeModePref>;
+  setThemeMode: (mode: ThemeModePref) => void;
+} {
+  return { themeMode, setThemeMode };
+}
+
+// Cross-tab sync, same contract as the theme id above.
+if (typeof window !== 'undefined') {
+  try {
+    window.addEventListener('storage', (e) => {
+      if (e.key !== THEME_MODE_LS_KEY) return;
+      const v = e.newValue as ThemeModePref | null;
+      themeMode.value = v && MODE_VALUES.includes(v) ? v : 'host';
+    });
+  } catch {
+    /* non-browser env */
+  }
+}
+
 // Cross-tab sync — another tab changing the preference updates this one live.
 if (typeof window !== 'undefined') {
   try {

package/src/locales/en.ts

@@ -248,7 +248,11 @@ export const en: Record<string, string> = {
   /* wiring:c1 — theme gallery */
   'theme.menu': 'Theme',
   'theme.title': 'Theme Gallery',
-  'theme.hint': 'Themes only change the color palette; light/dark mode still applies separately.',
+  'theme.hint': 'A theme only changes the colour palette — day or night is the choice above.',
+  'theme.mode.label': 'Appearance',
+  'theme.mode.light': 'Day',
+  'theme.mode.dark': 'Night',
+  'theme.mode.auto': 'Automatic',
   'theme.reset': 'Reset to default',
   'theme.close': 'Close',
   'theme.selected': 'Selected',

package/src/locales/tr.ts

@@ -248,7 +248,11 @@ export const tr: Record<string, string> = {
   /* wiring:c1 — tema galerisi */
   'theme.menu': 'Tema',
   'theme.title': 'Tema Galerisi',
-  'theme.hint': 'Tema yalnız renk paletini değiştirir; açık/koyu mod ayrı çalışmaya devam eder.',
+  'theme.hint': 'Tema yalnız renk paletini değiştirir; gündüz mü gece mi olduğu yukarıdaki seçim.',
+  'theme.mode.label': 'Görünüm',
+  'theme.mode.light': 'Gündüz',
+  'theme.mode.dark': 'Gece',
+  'theme.mode.auto': 'Otomatik',
   'theme.reset': 'Varsayılana dön',
   'theme.close': 'Kapat',
   'theme.selected': 'Seçili',

package/src/modals/PreviewModal.vue

@@ -38,7 +38,7 @@ const props = defineProps<{
   onlyOfficeConfigEndpoint?: string | null;
   saveTextEndpoint?: string | null;
   openMode?: 'edit' | 'view';
-  authHeaders?: () => Record<string, string>;
+  authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
   authCredentials?: RequestCredentials;
   /** New rich-viewer config (forwarded by FileExplorer from ExplorerConfig). */
   drawioUrl?: string | null;
@@ -351,7 +351,7 @@ async function fetchText(url: string): Promise<void> {
   tooLarge.value = false;
   try {
     const headers: Record<string, string> = {};
-    if (props.authHeaders) Object.assign(headers, props.authHeaders());
+    if (props.authHeaders) Object.assign(headers, await props.authHeaders());
     const res = await fetch(url, {
       credentials: props.authCredentials || 'same-origin',
       headers,
@@ -390,14 +390,25 @@ async function fetchText(url: string): Promise<void> {
 
 const markdownHtml = ref<string>('');
 const markdownEl = ref<HTMLDivElement | null>(null);
+/**
+ * The renderer could not be loaded at all.
+ *
+ * ⚠ Tracked separately from "nothing to render". In view mode a missing
+ * renderer falls through to the raw source, which is honest; in the split
+ * editor the preview pane simply stayed BLANK — a white half-window with no
+ * explanation, measured in the desktop app on 2026-08-10.
+ */
+const markdownUnavailable = ref(false);
 
 async function renderMarkdown(text: string): Promise<void> {
   try {
     const mod = (await import(/* @vite-ignore */ 'markdown-it').catch(() => null)) as any;
     if (!mod) {
       markdownHtml.value = '';
+      markdownUnavailable.value = true;
       return;
     }
+    markdownUnavailable.value = false;
     const Md = (mod as { default: any }).default ?? (mod as any);
     // html: true so inline HTML in README.md / docs renders (the
     // GitHub / GitLab contract — operators expect `<img>`, tables,
@@ -552,6 +563,8 @@ const monacoEl = ref<HTMLDivElement | null>(null);
 let monacoEditor: any = null;
 let codeAutosaveTimer: ReturnType<typeof setTimeout> | undefined;
 const monacoReady = ref(false);
+/** Monaco resolved to nothing — the peer is not in this build at all. */
+const monacoUnavailable = ref(false);
 const saving = ref(false);
 const saveOk = ref(false);
 const saveError = ref<string | null>(null);
@@ -596,6 +609,12 @@ function monacoLanguageFor(extension: string): string {
 
 async function tryMountMonaco(text: string, extension: string): Promise<boolean> {
   const monaco = (await ensureMonaco()) as any;
+  // ⚠ "Not installed" is not "still loading". Monaco is an optional peer that
+  // most embeds do not ship, and the toolbar label was gated only on "not ready
+  // yet" — so a bundle without it showed "Editor loading…" forever, over a
+  // perfectly good read-only view. Measured in the desktop app once syntax
+  // highlighting started working and that label finally had something to sit on.
+  if (!monaco) monacoUnavailable.value = true;
   if (!monaco || !monacoEl.value) return false;
   try {
     disposeMonaco();
@@ -653,7 +672,7 @@ async function saveCode(): Promise<void> {
   try {
     const text = monacoEditor ? monacoEditor.getValue() : '';
     const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-    if (props.authHeaders) Object.assign(headers, props.authHeaders());
+    if (props.authHeaders) Object.assign(headers, await props.authHeaders());
     const res = await fetch(props.saveTextEndpoint, {
       method: 'POST',
       headers,
@@ -718,7 +737,10 @@ async function runOrchestration(open: boolean, url: string, k: string): Promise<
       // kick off the Monaco load and swap it in once ready.
       if (k === 'code') await highlightCode(rawText.value, lang);
       ensureMonaco().then(async (m) => {
-        if (!m) return;
+        // ⚠ Record the "never coming" case here too. This branch returns early
+        // without ever reaching tryMountMonaco, so a build with no Monaco left
+        // the toolbar saying "Editor loading…" indefinitely.
+        if (!m) { monacoUnavailable.value = true; return; }
         if (!props.open) return;
         // Wait one tick so the placeholder DOM exists before swapping.
         await new Promise<void>((r) => setTimeout(r, 0));
@@ -770,7 +792,7 @@ async function mountOnlyOfficeEditor(): Promise<void> {
 
   try {
     const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-    if (props.authHeaders) Object.assign(headers, props.authHeaders());
+    if (props.authHeaders) Object.assign(headers, await props.authHeaders());
     const res = await fetch(props.onlyOfficeConfigEndpoint, {
       method: 'POST',
       headers,
@@ -932,6 +954,11 @@ function loadOnlyOfficeScript(base: string): Promise<void> {
               placeholder="# Markdown buraya…"
             />
             <div
+              v-if="markdownUnavailable"
+              class="fe-preview__md-split-output fe-preview__md"
+            >{{ t('viewer.peer_not_installed') }}</div>
+            <div
+              v-else
               ref="markdownEl"
               class="fe-preview__md-split-output fe-preview__md"
               v-html="markdownHtml"
@@ -978,7 +1005,7 @@ function loadOnlyOfficeScript(base: string): Promise<void> {
           <div class="fe-preview__code-toolbar">
             <span class="fe-preview__code-lang">{{ codeLanguage }}</span>
             <span v-if="!monacoReady && codeHtml" class="fe-preview__code-status">
-              {{ saveTextEndpoint ? t('viewer.editor_loading') : t('viewer.read_only') }}
+              {{ saveTextEndpoint && !monacoUnavailable ? t('viewer.editor_loading') : t('viewer.read_only') }}
             </span>
             <span v-if="saveOk" class="fe-preview__code-status fe-preview__code-status--ok">✓ {{ t('viewer.saved') }}</span>
             <span v-if="saveError" class="fe-preview__code-status fe-preview__code-status--err" :title="saveError">✗ {{ t('viewer.save_error') }}</span>