@brftech/filex-core 0.14.0 → 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';
@@ -2341,8 +2347,20 @@ const effectiveViewerBaseUrl = computed(() =>
  * 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
@@ -2355,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],
@@ -2564,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).
@@ -2578,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 }));
@@ -3031,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 */,
@@ -3073,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 */"
@@ -3511,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"
@@ -3560,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 */"
@@ -3605,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"
       >
@@ -3693,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 -->
 
@@ -3731,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 */"
@@ -3758,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/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/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/styles/base.css

@@ -3760,3 +3760,128 @@ filex-explorer {
   flex: none;
 }
 /* === /ui-fix ========================================================= */
+
+/* === ui-fix — kaydırma çubukları ======================================
+   The platform scrollbar ignores the theme completely: on Terminal Green or
+   any dark variant it paints a wide light-grey slab down the edge of the
+   panel. Chromium/WebKit honour the -webkit pseudo-elements and Firefox the
+   two standard properties, so both are declared — the standard pair first, so
+   the rules survive an engine that drops the prefixed set.
+
+   ⚠ SCOPED TO `.fe`, never to `*`. base.css is loaded by embedders (work,
+   fishapp, the admin SPA), and a bare `*` rule would repaint the HOST page's
+   scrollbars from inside an embedded file browser. The two teleported
+   surfaces are listed explicitly because they are children of <body>, not of
+   the explorer root.
+
+   Colours come from the existing tokens rather than from new ones, so every
+   theme — including ones added later — gets a matching bar for free. */
+.fe,
+.fe *,
+.fe-ctx-backdrop,
+.fe-ctx-backdrop *,
+.fe-tour,
+.fe-tour * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--fe-border-strong) transparent;
+}
+.fe ::-webkit-scrollbar,
+.fe-ctx-backdrop ::-webkit-scrollbar,
+.fe-tour ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.fe ::-webkit-scrollbar-track,
+.fe-ctx-backdrop ::-webkit-scrollbar-track,
+.fe-tour ::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fe ::-webkit-scrollbar-thumb,
+.fe-ctx-backdrop ::-webkit-scrollbar-thumb,
+.fe-tour ::-webkit-scrollbar-thumb {
+  background: var(--fe-border-strong);
+  /* Inset with a transparent border instead of a narrower width: a thin thumb
+     inside a wide gutter drifts away from the content edge. */
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: 8px;
+}
+.fe ::-webkit-scrollbar-thumb:hover,
+.fe-ctx-backdrop ::-webkit-scrollbar-thumb:hover,
+.fe-tour ::-webkit-scrollbar-thumb:hover {
+  background: var(--fe-text-muted);
+  background-clip: padding-box;
+}
+/* Unstyled, the meeting point of a vertical and a horizontal bar paints as a
+   white square in the corner of a dark panel. */
+.fe ::-webkit-scrollbar-corner,
+.fe-ctx-backdrop ::-webkit-scrollbar-corner,
+.fe-tour ::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* === wiring:c1 — gündüz / gece / otomatik =============================
+   Lives at the top of the theme gallery: "night mode" is what people open the
+   theme button looking for, and a palette picker that cannot answer that
+   question is the wrong place to stop. */
+.fe-thememode {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+.fe-thememode__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fe-text-muted);
+}
+.fe-thememode__seg {
+  display: inline-flex;
+  padding: 3px;
+  gap: 2px;
+  border: 1px solid var(--fe-border);
+  border-radius: var(--fe-radius-lg);
+  background: var(--fe-bg-elev);
+}
+.fe-thememode__opt {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 0;
+  border-radius: calc(var(--fe-radius-lg) - 4px);
+  background: transparent;
+  color: var(--fe-text-muted);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.14s ease, color 0.14s ease;
+}
+.fe-thememode__opt:hover {
+  background: var(--fe-bg-hover);
+  color: var(--fe-text);
+}
+.fe-thememode__opt.is-active {
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  box-shadow: var(--fe-shadow-sm);
+}
+.fe-thememode__opt .fe-ficon {
+  width: 15px;
+  height: 15px;
+  flex: none;
+}
+/* Under ~360px the label and the three options cannot share a line; the strip
+   takes the width and the options divide it rather than overflowing. */
+@media (max-width: 420px) {
+  .fe-thememode__seg {
+    flex: 1 1 100%;
+  }
+  .fe-thememode__opt {
+    flex: 1;
+    justify-content: center;
+  }
+}
+/* === /ui-fix ========================================================= */

package/src/types/ExplorerConfig.ts

@@ -207,6 +207,19 @@ export interface ExplorerConfig {
   /** Theme. */
   theme?: ThemeMode;
 
+  /**
+   * When the tab strip is on screen.
+   *
+   * `'auto'` (default) shows it only once a second tab exists — the historical
+   * behaviour, and what a small embed wants: a fixed strip above a short panel
+   * is a lot of chrome to spend on a feature nobody has asked for yet.
+   *
+   * `'always'` keeps it visible with a single tab open. That is what a full
+   * window wants, because the strip is also where `+` lives: hide it and tabs
+   * are a feature you can only find by guessing the keyboard shortcut.
+   */
+  tabStrip?: 'auto' | 'always';
+
   /** Initial path (storage-prefix included: `local://`). Default: root. */
   initialPath?: string;