@brftech/filex-core 0.4.1 → 0.5.0

package/src/components/ShortcutSettings.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+/**
+ * ShortcutSettings — wiring:c2 keyboard-shortcut customization modal.
+ *
+ * Category-grouped rows from the shortcut registry; each row shows the
+ * action label + current combo badge(s) + "Change" (press-to-capture:
+ * the next key combination is recorded, Esc cancels) + a per-row
+ * "reset to default" and a header "reset all".
+ *
+ * Conflicts: assigning a combo that another action already uses turns
+ * the row into a red warning with two choices — unbind the old action
+ * and take the combo, or cancel. Combos reserved by fixed shortcuts
+ * (Backspace, Esc) can never be taken.
+ *
+ * While the modal is open a window-level CAPTURE listener swallows
+ * keydowns (except Esc/Tab) so experimenting with keys can't trigger
+ * explorer actions behind the modal; native button activation (Enter/
+ * Space on a focused button) is a default action and still works.
+ */
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import {
+  comboFromEvent,
+  effectiveCombo,
+  findShortcutConflict,
+  resetAllShortcuts,
+  resetShortcut,
+  setShortcutOverride,
+  useShortcutList,
+  SHORTCUT_ACTIONS,
+  type ShortcutView,
+} from '../composables/useKeyboardShortcuts';
+import Modal from '../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  theme?: 'light' | 'dark' | 'auto';
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+const list = useShortcutList();
+
+const groups = computed(() => {
+  const order: string[] = [];
+  const map = new Map<string, ShortcutView[]>();
+  for (const s of list.value) {
+    if (!map.has(s.groupKey)) {
+      map.set(s.groupKey, []);
+      order.push(s.groupKey);
+    }
+    map.get(s.groupKey)!.push(s);
+  }
+  return order.map((key) => ({ key, items: map.get(key)! }));
+});
+
+const anyOverridden = computed(() => list.value.some((s) => s.overridden));
+
+// --- capture / conflict state ---
+
+const capturingId = ref<string | null>(null);
+const conflict = ref<{ id: string; combo: string; conflictId: string; fixed: boolean } | null>(null);
+
+function labelOf(id: string): string {
+  const def = SHORTCUT_ACTIONS.find((a) => a.id === id);
+  return def ? t(def.labelKey) : id;
+}
+
+function beginCapture(id: string) {
+  conflict.value = null;
+  capturingId.value = id;
+}
+
+function cancelCapture() {
+  capturingId.value = null;
+}
+
+function attemptAssign(id: string, combo: string) {
+  capturingId.value = null;
+  if (combo === effectiveCombo(id)) return; // unchanged
+  const clash = findShortcutConflict(combo, id);
+  if (clash) {
+    conflict.value = { id, combo, conflictId: clash.id, fixed: clash.fixed };
+    return;
+  }
+  setShortcutOverride(id, combo);
+}
+
+function confirmConflictTake() {
+  const c = conflict.value;
+  if (!c || c.fixed) return;
+  setShortcutOverride(c.conflictId, ''); // unbind the old owner
+  setShortcutOverride(c.id, c.combo);
+  conflict.value = null;
+}
+
+function dismissConflict() {
+  conflict.value = null;
+}
+
+function onReset(id: string) {
+  conflict.value = null;
+  resetShortcut(id);
+}
+
+function onResetAll() {
+  conflict.value = null;
+  capturingId.value = null;
+  resetAllShortcuts();
+}
+
+// --- window capture listener (only while open) ---
+
+function onWindowKeydown(e: KeyboardEvent) {
+  if (capturingId.value) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.key === 'Escape') {
+      cancelCapture();
+      return;
+    }
+    const combo = comboFromEvent(e);
+    if (!combo) return; // bare modifier — keep listening
+    attemptAssign(capturingId.value, combo);
+    return;
+  }
+  // Modal open but idle: let Esc (close) and Tab (focus nav) through,
+  // swallow everything else so explorer shortcuts can't fire behind us.
+  if (e.key === 'Escape' || e.key === 'Tab') return;
+  e.stopPropagation();
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      window.addEventListener('keydown', onWindowKeydown, true);
+    } else {
+      window.removeEventListener('keydown', onWindowKeydown, true);
+      capturingId.value = null;
+      conflict.value = null;
+    }
+  },
+);
+
+onBeforeUnmount(() => window.removeEventListener('keydown', onWindowKeydown, true));
+
+function onClose() {
+  if (capturingId.value) {
+    cancelCapture();
+    return;
+  }
+  emit('close');
+}
+</script>
+
+<template>
+  <Modal :open="open" :title="t('shortcuts.settings.title')" size="lg" :theme="theme" @close="onClose">
+    <div class="fe-shortset">
+      <div class="fe-shortset__topbar">
+        <p class="fe-shortset__hint">{{ t('shortcuts.settings.hint') }}</p>
+        <button
+          type="button"
+          class="fe-btn fe-shortset__reset-all"
+          :disabled="!anyOverridden"
+          @click="onResetAll"
+        >
+          ↺ {{ t('shortcuts.settings.reset_all') }}
+        </button>
+      </div>
+
+      <section v-for="g in groups" :key="g.key" class="fe-shortset__group">
+        <h3 class="fe-shortcuts__heading">{{ t(g.key) }}</h3>
+        <div
+          v-for="s in g.items"
+          :key="s.id"
+          class="fe-shortset__item"
+          :class="{
+            'is-capturing': capturingId === s.id,
+            'is-conflict': conflict?.id === s.id,
+          }"
+        >
+          <div class="fe-shortset__row">
+            <span class="fe-shortset__label">
+              {{ t(s.labelKey) }}
+              <span v-if="s.overridden" class="fe-shortcuts__custom" :title="t('shortcuts.settings.customized')">●</span>
+            </span>
+            <span class="fe-shortset__keys">
+              <span v-if="capturingId === s.id" class="fe-shortset__capture" role="status">
+                {{ t('shortcuts.settings.capture') }}
+              </span>
+              <template v-else>
+                <span v-if="s.keys.length === 0" class="fe-shortcuts__unbound">
+                  {{ t('shortcuts.settings.unbound') }}
+                </span>
+                <template v-for="(combo, i) in s.keys" v-else :key="combo">
+                  <kbd class="fe-kbd">{{ combo }}</kbd>
+                  <span v-if="i < s.keys.length - 1" class="fe-shortcuts__or" aria-hidden="true">/</span>
+                </template>
+              </template>
+            </span>
+            <span class="fe-shortset__actions">
+              <template v-if="s.customizable">
+                <button
+                  v-if="capturingId !== s.id"
+                  type="button"
+                  class="fe-btn fe-shortset__btn"
+                  @click="beginCapture(s.id)"
+                >
+                  {{ t('shortcuts.settings.change') }}
+                </button>
+                <button
+                  v-else
+                  type="button"
+                  class="fe-btn fe-shortset__btn"
+                  @click="cancelCapture"
+                >
+                  {{ t('shortcuts.settings.conflict_cancel') }}
+                </button>
+                <button
+                  v-if="s.overridden"
+                  type="button"
+                  class="fe-btn fe-btn--icon-only fe-shortset__btn"
+                  :title="t('shortcuts.settings.reset')"
+                  :aria-label="t('shortcuts.settings.reset')"
+                  @click="onReset(s.id)"
+                >
+                  ↺
+                </button>
+              </template>
+              <span v-else class="fe-shortset__fixed">{{ t('shortcuts.settings.fixed') }}</span>
+            </span>
+          </div>
+          <div v-if="conflict && conflict.id === s.id" class="fe-shortset__conflict" role="alert">
+            <span class="fe-shortset__conflict-msg">
+              <kbd class="fe-kbd">{{ conflict.combo }}</kbd>
+              {{
+                conflict.fixed
+                  ? t('shortcuts.settings.conflict_fixed', { name: labelOf(conflict.conflictId) })
+                  : t('shortcuts.settings.conflict', { name: labelOf(conflict.conflictId) })
+              }}
+            </span>
+            <span class="fe-shortset__conflict-actions">
+              <button
+                v-if="!conflict.fixed"
+                type="button"
+                class="fe-btn fe-btn--danger fe-shortset__btn"
+                @click="confirmConflictTake"
+              >
+                {{ t('shortcuts.settings.conflict_take') }}
+              </button>
+              <button type="button" class="fe-btn fe-shortset__btn" @click="dismissConflict">
+                {{ t('shortcuts.settings.conflict_cancel') }}
+              </button>
+            </span>
+          </div>
+        </div>
+      </section>
+    </div>
+    <template #actions>
+      <button type="button" class="fe-btn" @click="onClose">{{ t('viewer.close') }}</button>
+    </template>
+  </Modal>
+</template>

package/src/components/ShortcutsHelp.vue

@@ -2,14 +2,16 @@
 /**
  * ShortcutsHelp — "?" cheat-sheet modal.
  *
- * Renders the SHORTCUTS table exported by useKeyboardShortcuts (single
- * source of truth) grouped by section. Modal.vue supplies Esc handling,
- * backdrop, focus and the close button.
+ * wiring:c2 — renders the live shortcut registry (useShortcutList) so
+ * user remaps show up here too, grouped by section. Unbound actions are
+ * listed with an "unassigned" chip. The footer carries a "Customize"
+ * button that asks the host to open ShortcutSettings. Modal.vue
+ * supplies Esc handling, backdrop, focus and the close button.
  */
 import { computed } from 'vue';
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { SHORTCUTS, type ShortcutDef } from '../composables/useKeyboardShortcuts';
+import { useShortcutList, type ShortcutView } from '../composables/useKeyboardShortcuts';
 import Modal from '../modals/Modal.vue';
 
 const props = defineProps<{
@@ -19,14 +21,17 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'close'): void;
+  (e: 'customize'): void;
 }>();
 
 const { t } = useLocale(() => props.locale);
 
+const list = useShortcutList();
+
 const groups = computed(() => {
   const order: string[] = [];
-  const map = new Map<string, ShortcutDef[]>();
-  for (const s of SHORTCUTS) {
+  const map = new Map<string, ShortcutView[]>();
+  for (const s of list.value) {
     if (!map.has(s.groupKey)) {
       map.set(s.groupKey, []);
       order.push(s.groupKey);
@@ -43,17 +48,33 @@ const groups = computed(() => {
       <section v-for="g in groups" :key="g.key" class="fe-shortcuts__group">
         <h3 class="fe-shortcuts__heading">{{ t(g.key) }}</h3>
         <div class="fe-shortcuts__table">
-          <div v-for="s in g.items" :key="s.labelKey" class="fe-shortcuts__row">
+          <div v-for="s in g.items" :key="s.id" class="fe-shortcuts__row">
             <span class="fe-shortcuts__keys">
-              <template v-for="(combo, i) in s.keys" :key="combo">
+              <template v-if="s.keys.length === 0">
+                <span class="fe-shortcuts__unbound">{{ t('shortcuts.settings.unbound') }}</span>
+              </template>
+              <template v-for="(combo, i) in s.keys" v-else :key="combo">
                 <kbd class="fe-kbd">{{ combo }}</kbd>
                 <span v-if="i < s.keys.length - 1" class="fe-shortcuts__or" aria-hidden="true">/</span>
               </template>
             </span>
-            <span class="fe-shortcuts__desc">{{ t(s.labelKey) }}</span>
+            <span class="fe-shortcuts__desc">
+              {{ t(s.labelKey) }}
+              <span
+                v-if="s.overridden"
+                class="fe-shortcuts__custom"
+                :title="t('shortcuts.settings.customized')"
+              >●</span>
+            </span>
           </div>
         </div>
       </section>
     </div>
+    <template #actions>
+      <button type="button" class="fe-btn fe-btn--primary" @click="emit('customize')">
+        ⌨ {{ t('shortcuts.customize') }}
+      </button>
+      <button type="button" class="fe-btn" @click="emit('close')">{{ t('viewer.close') }}</button>
+    </template>
   </Modal>
 </template>

package/src/components/ThemeGallery.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+/**
+ * ThemeGallery — wiring:c1 theme picker modal.
+ *
+ * A grid of theme cards, each rendering a mini live preview (surface +
+ * toolbar chips + sample rows) painted with that theme's tokens for the
+ * CURRENTLY resolved light/dark mode — so the card shows exactly what
+ * you'd get. Click applies instantly (live preview behind the modal) and
+ * persists; the selected card carries a ✓. "Varsayılana dön" resets.
+ *
+ * Presentational only — selection state + persistence live in
+ * lib/themes.ts (shared across instances); the parent forwards `select`.
+ */
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { THEMES, DEFAULT_THEME_ID, type ThemeDef } from '../lib/themes';
+import Modal from '../modals/Modal.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  /** Host mode (forwarded to Modal so the backdrop themes correctly). */
+  theme?: ThemeMode;
+  /** Resolved mode — decides which variant the preview cards paint. */
+  dark: boolean;
+  /** Currently selected theme id. */
+  current: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'select', id: string): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+/** 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>
+
+<template>
+  <Modal :open="open" :title="t('theme.title')" size="lg" :theme="theme" @close="emit('close')">
+    <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>
+    <template #actions>
+      <button
+        type="button"
+        class="fe-btn"
+        :disabled="current === DEFAULT_ID"
+        @click="emit('select', DEFAULT_ID)"
+      >
+        {{ t('theme.reset') }}
+      </button>
+      <button type="button" class="fe-btn fe-btn--primary" @click="emit('close')">
+        {{ t('theme.close') }}
+      </button>
+    </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>