@brftech/filex-core 0.39.1 → 0.41.0

package/src/components/TabBar.vue

@@ -35,6 +35,35 @@ const props = defineProps<{
   splitEnabled?: boolean;
   /** true → the split toggle renders pressed (active tab has a pane). */
   splitActive?: boolean;
+  /**
+   * gorunum:v5-panerow — the details (inspector) toggle lives in this row too.
+   *
+   * ⚠ Opt-in, and absent means NOT DRAWN rather than "closed": until the host
+   * moves its own copy out of the breadcrumb row there would otherwise be two
+   * of the same button on screen, which is the duplicate this wave removes.
+   */
+  inspectorEnabled?: boolean;
+  /** true → the details toggle renders pressed (the panel is open). */
+  inspectorOpen?: boolean;
+  /**
+   * gorunum:v5-panerow — hide the tabs themselves (and "+"), keeping the row.
+   *
+   * ⚠ True is not "no tabs exist", it is "this deployment does not offer
+   * them": the `simple` profile drops tabs deliberately (#14 named them as
+   * power-user chrome) but still needs this row, because the details toggle
+   * lives in it. Without the flag the row could only be all-or-nothing, and
+   * the ⓘ would have to keep a second home in the breadcrumb row for that one
+   * profile — a control with two homes is how the two drift.
+   *
+   * ⚠⚠ Phrased as HIDE, not SHOW, and that is not taste. A prop declared
+   * `showTabs?: boolean` compiles to a runtime Boolean prop, and Vue casts an
+   * ABSENT Boolean prop to `false` — not to `undefined`. So `showTabs !== false`
+   * read false for every host that passed nothing, and the strip rendered with
+   * no tabs and no "+" at all. Measured in a real browser: `.fe-tabs__tab`
+   * count went from 1 to 0 the moment the prop was added, in both themes at
+   * both widths. Negative default = safe default.
+   */
+  hideTabs?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -43,6 +72,7 @@ const emit = defineEmits<{
   (e: 'new'): void;
   (e: 'reorder', from: number, to: number): void;
   (e: 'toggle-split'): void;
+  (e: 'toggle-inspector'): void /* gorunum:v5-panerow */;
 }>();
 
 const { t } = useLocale(() => props.locale);
@@ -97,13 +127,17 @@ function onAux(id: string, ev: MouseEvent) {
   if (ev.button !== 1) return;
   ev.preventDefault();
   ev.stopPropagation();
+  // ⚠ The same guard the × has. `useTabs.closeTab()` refuses the last tab, so
+  // middle-clicking it was already a no-op; leaving it live while the × is
+  // hidden would be two doors to one verb disagreeing about whether it exists.
+  if (props.tabs.length <= 1) return;
   emit('close', id);
 }
 </script>
 
 <template>
   <div class="fe-tabs" role="tablist" :aria-label="t('tabs.strip')">
-    <div class="fe-tabs__scroll">
+    <div v-if="!hideTabs" class="fe-tabs__scroll">
       <div
         v-for="(tab, i) in tabs"
         :key="tab.id"
@@ -129,7 +163,14 @@ function onAux(id: string, ev: MouseEvent) {
       >
         <span v-if="tab.split" class="fe-tabs__splitdot" aria-hidden="true"></span>
         <span class="fe-tabs__label">{{ tab.label }}</span>
+        <!-- ⚠ Not drawn when this is the only tab. Owner's decision,
+             2026-09-13, verbatim: *"tek kalan tab'de x gözükmemeli, onu da
+             kaldırırsın."* It is not a style choice — `useTabs.closeTab()`
+             opens with `if (tabs.length <= 1) return null`, so at one tab the
+             × has always been a control that cannot do anything. Drawing it
+             was inviting a dead click. -->
         <button
+          v-if="tabs.length > 1"
           type="button"
           class="fe-tabs__close"
           :aria-label="t('tabs.close')"
@@ -143,12 +184,23 @@ function onAux(id: string, ev: MouseEvent) {
          the only way back to it was scrolling a strip most people do not know
          scrolls. Pinned here it is always where it was. -->
     <button
+      v-if="!hideTabs"
       type="button"
       class="fe-tabs__new"
       :aria-label="t('tabs.new')"
       :title="t('tabs.new')"
       @click="emit('new')"
     >+</button>
+    <!-- gorunum:v5-panerow — back in THIS row, where it was.
+         ⚠ It spent one round teleported up into the breadcrumb row beside the
+         details toggle. The reasoning was sound (that row is always drawn,
+         this strip is `v-if`'d) and it was approved, but the owner looked at
+         the result and rejected it: *"kanka split pane ve info butonunu alt
+         kısımda bırak"*. He decides. The reachability problem the teleport was
+         solving is real and is answered properly in the handover diff instead:
+         this row becomes the WINDOW's row — tabs, +, split and the details
+         toggle — and is drawn whenever any of the four has something to do,
+         rather than only when a second tab exists. -->
     <button
       v-if="splitEnabled !== false"
       type="button"
@@ -157,6 +209,7 @@ function onAux(id: string, ev: MouseEvent) {
       :aria-label="splitActive ? t('tabs.split_off') : t('tabs.split')"
       :title="splitActive ? t('tabs.split_off') : t('tabs.split')"
       :aria-pressed="splitActive ? 'true' : 'false'"
+      data-testid="tabs-split"
       @click="emit('toggle-split')"
     >
       <svg
@@ -174,5 +227,38 @@ function onAux(id: string, ev: MouseEvent) {
         <path d="M12 4v16" />
       </svg>
     </button>
+
+    <!-- gorunum:v5-panerow — the details toggle's home in this row.
+         ⚠ Rendered ONLY when the host passes `inspectorEnabled`, which nothing
+         does yet: until the FileExplorer diff in the handover is applied, the
+         ⓘ is still drawn in the breadcrumb row and this must stay silent, or
+         there would be two of it. When the diff lands, `infoPanelToggle` is
+         passed here and the subhead's copy is deleted in the same change. -->
+    <button
+      v-if="inspectorEnabled"
+      type="button"
+      class="fe-tabs__inspector"
+      :class="{ 'is-active': inspectorOpen }"
+      :aria-pressed="inspectorOpen ? 'true' : 'false'"
+      :title="t('toolbar.inspector')"
+      :aria-label="t('toolbar.inspector')"
+      data-testid="tabs-inspector"
+      @click="emit('toggle-inspector')"
+    >
+      <svg
+        class="fe-ficon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 11v5" />
+        <circle cx="12" cy="7.6" r="1" fill="currentColor" stroke="none" />
+      </svg>
+    </button>
   </div>
 </template>

package/src/components/TagPicker.vue

@@ -7,11 +7,39 @@
  *
  * Tag colors are deterministic: hash(name) → palette index. Consumers
  * can override with the `palette` prop.
+ *
+ * === etiket:t1 — THE CHIP IS A DOOR ==================================
+ * ⚠⚠ Owner, 2026-09-13: "taglediğim dosya klasör tag'ine gitmiyor." The tag
+ * VIEW existed and the panel listed every tag, but from a file there was no way
+ * into the one it carries: the chip was a `<span>`, so the only route from
+ * "this file is tagged invoices" to "what else is tagged invoices" was to read
+ * the word, find it again in the panel and click it there.
+ *
+ * ⚠ The name is the button and the × stays its own. Two targets in one chip,
+ * neither of which may fire the other's action — a mis-hit here either loses a
+ * tag or navigates away from the file you were reading about.
+ *
+ * ⚠ It navigates from BOTH mounts, the details panel's and the modal the
+ * right-click menu opens. One component, one behaviour: a chip that led
+ * somewhere in one place and was inert three inches away in another would be
+ * the surface-specific split this package exists to avoid. The host closes the
+ * modal on the way (it opened it).
  */
 import { ref, watch, onMounted, computed } from 'vue';
+import { useLocale } from '../composables/useLocale';
+import type { LocaleCode } from '../types/ExplorerConfig';
 
 const props = defineProps<{
   nodeId: number;
+  /**
+   * ⚠ Added 2026-09-13 with the chip's new "open this tag" affordance, and it
+   * pulls three OLDER strings out of English with it: this component printed
+   * "+ Add tag", "tag name" and "Remove tag" literally, so a Turkish user
+   * reading "Etiketler" as the section heading got three English controls under
+   * it. Optional, defaulting to the catalogue's own default, so an embedder
+   * that never passed one is unaffected.
+   */
+  locale?: LocaleCode;
   apiBase?: string;
   authHeaders?: () => Record<string, string> | Promise<Record<string, string>>;
   /** Credentials mode, from the explorer's auth kind. ⚠ Defaults to
@@ -26,8 +54,18 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'change', tags: string[]): void;
   (e: 'error', message: string): void;
+  /** etiket:t1 — "show me everything tagged this". The host owns navigation. */
+  (e: 'open', tag: string): void;
 }>();
 
+const { t } = useLocale(() => props.locale ?? 'en');
+
+/** "Open tag: invoices" — the chip's title and its accessible name, one value
+ *  so the two cannot say different things. */
+function openTitle(tag: string): string {
+  return t('tags.open', { tag });
+}
+
 const tags = ref<string[]>([]);
 const loading = ref(false);
 const adding = ref(false);
@@ -115,20 +153,30 @@ watch(() => props.nodeId, load);
       class="filex-tag"
       :style="{ '--filex-tag-color': colorFor(tag) }"
     >
-      {{ tag }}
-      <button class="filex-tag-x" type="button" @click="remove(tag)" aria-label="Remove tag">×</button>
+      <button
+        class="filex-tag-open"
+        type="button"
+        :title="openTitle(tag)"
+        :aria-label="openTitle(tag)"
+        :data-testid="`tag-open-${tag}`"
+        @click="emit('open', tag)"
+      >{{ tag }}</button>
+      <button class="filex-tag-x" type="button" @click="remove(tag)" :aria-label="t('tags.remove')">×</button>
     </span>
 
     <form v-if="adding" class="filex-tag-add" @submit.prevent="add">
       <input
         v-model="newTag"
         autofocus
-        placeholder="tag name"
+        :placeholder="t('tags.name')"
+        :aria-label="t('tags.name')"
         @blur="add"
         @keydown.escape="adding = false; newTag = ''"
       />
     </form>
-    <button v-else class="filex-tag-add-btn" type="button" @click="adding = true">+ Add tag</button>
+    <button v-else class="filex-tag-add-btn" type="button" @click="adding = true">
+      {{ t('tags.add') }}
+    </button>
   </div>
 </template>
 
@@ -162,6 +210,24 @@ watch(() => props.nodeId, load);
   color: #fff;
   background: var(--filex-tag-color);
 }
+/* etiket:t1 — the tag's NAME is the door to its view. A bare button: it
+   inherits the chip's own colour and type so the chip still reads as one
+   object, and the underline appears only under the pointer, where the chip has
+   already said it is interactive by changing the cursor. */
+.filex-tag-open {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+.filex-tag-open:hover,
+.filex-tag-open:focus-visible {
+  text-decoration: underline;
+}
 .filex-tag-x {
   background: transparent;
   border: none;
@@ -190,8 +256,13 @@ watch(() => props.nodeId, load);
   color: var(--filex-text-muted, #6b7280);
   cursor: pointer;
 }
+/* gorunum:v1 — a host override still wins, but the fallback chain now ends at
+   the product blue instead of the old indigo, and it asks the palette first:
+   in a themed context this hover follows --fe-primary (and so goes light blue
+   in dark mode), and only a context with no stylesheet at all — the very case
+   where a fallback is the only thing painting — lands on the literal. */
 .filex-tag-add-btn:hover {
-  border-color: var(--filex-accent, #6366f1);
-  color: var(--filex-accent, #6366f1);
+  border-color: var(--filex-accent, var(--fe-primary, #2f6ceb));
+  color: var(--filex-accent, var(--fe-primary, #2f6ceb));
 }
 </style>

package/src/components/ThemeGallery.vue

@@ -10,12 +10,18 @@
  *
  * Presentational only — selection state + persistence live in
  * lib/themes.ts (shared across instances); the parent forwards `select`.
+ *
+ * ⚠ The cards themselves live in `ThemePalette.vue` and are mounted, not
+ * copied: the web app's user-settings modal shows the same grid inside a pane
+ * and cannot mount this component, because this one IS a modal. See that
+ * file's header.
  */
 import { computed } from 'vue';
 import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { THEMES, DEFAULT_THEME_ID, type ThemeDef, type ThemeModePref } from '../lib/themes';
+import { DEFAULT_THEME_ID, type ThemeModePref } from '../lib/themes';
 import Modal from '../modals/Modal.vue';
+import ThemePalette from './ThemePalette.vue';
 
 const props = defineProps<{
   open: boolean;
@@ -57,12 +63,6 @@ const MODES: { id: Exclude<ThemeModePref, 'host'>; labelKey: string }[] = [
 
 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> {
-  return props.dark ? th.dark : th.light;
-}
-
 const DEFAULT_ID = DEFAULT_THEME_ID;
 </script>
 
@@ -108,44 +108,12 @@ const DEFAULT_ID = DEFAULT_THEME_ID;
         </button>
       </div>
     </div>
-    <p class="fe-themes__hint">{{ t('theme.hint') }}</p>
-    <div class="fe-themes" role="listbox" :aria-label="t('theme.title')">
-      <button
-        v-for="th in THEMES"
-        :key="th.id"
-        type="button"
-        class="fe-themecard"
-        :class="{ 'is-selected': th.id === current }"
-        role="option"
-        :aria-selected="th.id === current"
-        :style="cardVars(th)"
-        @click="emit('select', th.id)"
-      >
-        <span class="fe-themecard__preview" aria-hidden="true">
-          <span class="fe-themecard__topbar">
-            <span class="fe-themecard__chip fe-themecard__chip--primary"></span>
-            <span class="fe-themecard__chip"></span>
-            <span class="fe-themecard__chip fe-themecard__chip--ghost"></span>
-          </span>
-          <span class="fe-themecard__row">
-            <span class="fe-themecard__dot"></span>
-            <span class="fe-themecard__line" style="width: 62%"></span>
-          </span>
-          <span class="fe-themecard__row fe-themecard__row--selected">
-            <span class="fe-themecard__dot fe-themecard__dot--primary"></span>
-            <span class="fe-themecard__line" style="width: 44%"></span>
-          </span>
-          <span class="fe-themecard__row">
-            <span class="fe-themecard__dot fe-themecard__dot--muted"></span>
-            <span class="fe-themecard__line fe-themecard__line--muted" style="width: 74%"></span>
-          </span>
-        </span>
-        <span class="fe-themecard__name">
-          {{ t(th.nameKey) }}
-          <span v-if="th.id === current" class="fe-themecard__check" :title="t('theme.selected')">✓</span>
-        </span>
-      </button>
-    </div>
+    <ThemePalette
+      :locale="locale"
+      :dark="dark"
+      :current="current"
+      @select="(id: string) => emit('select', id)"
+    />
     <template #actions>
       <button
         type="button"
@@ -161,156 +129,3 @@ const DEFAULT_ID = DEFAULT_THEME_ID;
     </template>
   </Modal>
 </template>
-
-<!-- Deliberately NOT scoped: the webcomponent injects the CORE package's
-     built style.css, whose data-v scope ids don't match the ids the
-     webcomponent's own compile assigns (verified: fe-themecard got
-     data-v-99a95ed7 in core vs data-v-5d4cc1fd in the wc bundle) — scoped
-     rules would silently not apply in embeds. Class names are fe-*
-     namespaced, so global is collision-safe (same approach as base.css). -->
-<style>
-.fe-themes__hint {
-  margin: 0 0 12px;
-  font-size: 12.5px;
-  color: var(--fe-text-muted);
-}
-
-.fe-themes {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 12px;
-}
-
-/* Each card is its own mini token scope (inline --fe-* vars from the theme
-   definition), so every color below refers to the CARD's theme — not the
-   active page theme. */
-.fe-themecard {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  border: 2px solid var(--fe-border-strong);
-  border-radius: var(--fe-radius, 8px);
-  background: var(--fe-bg);
-  cursor: pointer;
-  overflow: hidden;
-  text-align: left;
-  transition: transform 0.12s ease, box-shadow 0.12s ease;
-  font: inherit;
-}
-
-.fe-themecard:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--fe-shadow-sm, 0 2px 6px rgba(15, 23, 42, 0.08));
-}
-
-.fe-themecard:focus-visible {
-  outline: 2px solid var(--fe-primary);
-  outline-offset: 2px;
-}
-
-.fe-themecard.is-selected {
-  border-color: var(--fe-primary);
-  box-shadow: 0 0 0 2px var(--fe-primary);
-}
-
-.fe-themecard__preview {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 10px;
-  background: var(--fe-bg);
-  border-bottom: 1px solid var(--fe-border);
-  min-height: 84px;
-}
-
-.fe-themecard__topbar {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 2px;
-}
-
-.fe-themecard__chip {
-  height: 8px;
-  width: 22px;
-  border-radius: 4px;
-  background: var(--fe-bg-hover);
-  border: 1px solid var(--fe-border);
-}
-
-.fe-themecard__chip--primary {
-  background: var(--fe-primary);
-  border-color: var(--fe-primary);
-}
-
-.fe-themecard__chip--ghost {
-  background: var(--fe-bg-elev);
-}
-
-.fe-themecard__row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 4px;
-  border-radius: 4px;
-}
-
-.fe-themecard__row--selected {
-  background: var(--fe-bg-selected);
-}
-
-.fe-themecard__dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--fe-text);
-  opacity: 0.75;
-  flex: none;
-}
-
-.fe-themecard__dot--primary {
-  background: var(--fe-primary);
-  opacity: 1;
-}
-
-.fe-themecard__dot--muted {
-  background: var(--fe-text-muted);
-}
-
-.fe-themecard__line {
-  height: 6px;
-  border-radius: 3px;
-  background: var(--fe-text);
-  opacity: 0.55;
-}
-
-.fe-themecard__line--muted {
-  background: var(--fe-text-muted);
-}
-
-.fe-themecard__name {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 10px;
-  font-size: 12.5px;
-  font-weight: 600;
-  color: var(--fe-text);
-  background: var(--fe-bg-elev);
-  font-family: var(--fe-font, inherit);
-}
-
-.fe-themecard__check {
-  flex: none;
-  width: 18px;
-  height: 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: var(--fe-primary);
-  color: var(--fe-text-on-primary);
-  font-size: 11px;
-  line-height: 1;
-}
-</style>