@brftech/filex-core 0.40.0 → 0.41.1

package/src/components/ThemePalette.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+/**
+ * ThemePalette — the grid of palette cards, and nothing else.
+ *
+ * Each card is a mini live preview (surface + toolbar chips + sample rows)
+ * painted with that palette's own tokens for the currently resolved light/dark
+ * mode, so the card shows exactly what you would get. Click emits `select`;
+ * the selected card carries a ✓.
+ *
+ * ⚠ Split out of `ThemeGallery.vue` rather than copied: the appearance
+ * controls now have TWO hosts — the explorer's own gallery modal, and the web
+ * app's user-settings modal, which cannot mount the gallery because the
+ * gallery IS a modal (`modals/Modal.vue`, a fixed full-viewport backdrop) and
+ * a dialog inside a dialog is not a settings pane. Duplicating thirty lines of
+ * card markup into `web/` would have meant the two pickers drift apart the
+ * first time a token is added to a preview — the same split this package
+ * exists to prevent. One component, two hosts.
+ *
+ * Presentational only. Selection state + persistence live in lib/themes.ts,
+ * shared across every instance on the page; the host forwards `select` to it.
+ *
+ * `default` is the first card and IS the reset: applying it clears every
+ * override. A host therefore needs no separate "reset" control (the gallery
+ * keeps one in its footer because a modal has a footer to keep it in).
+ */
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+import { THEMES, type ThemeDef } from '../lib/themes';
+
+const props = defineProps<{
+  locale: LocaleCode;
+  /** Resolved mode — decides which variant the preview cards paint. */
+  dark: boolean;
+  /** Currently selected theme id. */
+  current: string;
+  /** Draw the explanatory line above the grid. Default true. */
+  hint?: boolean;
+}>();
+
+const emit = defineEmits<{ (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;
+}
+</script>
+
+<template>
+  <p v-if="hint !== false" 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"
+      :data-theme-id="th.id"
+      :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>
+
+<!-- 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>

package/src/components/TimeZoneDialog.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+/**
+ * TimeZoneDialog — zaman:z3, the embed's own time-zone setting.
+ *
+ * The owner, 2026-09-14: *"gömme için ayar bırakmamız lazım; basitçe tarayıcıda
+ * tutulan bir ayar olması lazım."* An embed has no user-settings dialog — its
+ * "⋯" menu (theme, density, shortcuts) is where its settings live — so the menu
+ * opens this, and a pick is stored in THIS browser (`lib/timezone`, tier
+ * `viewer`). Nothing is sent anywhere: an embed's credential may be shared by
+ * every visitor, and there is no account of the visitor's to write to.
+ *
+ * ⚠ The picker is `TimeZonePicker`, the same component the web app's settings
+ * modal mounts. Not a second one.
+ *
+ * ⚠ The first row is "use the default", and it names what the default IS on
+ * this page — the zone the embedder configured, the account's zone, or this
+ * device's — by asking the resolver with the viewer tier blanked. A reset
+ * whose outcome you have to guess is not a reset.
+ */
+import { computed, inject, onBeforeUnmount, ref, watch } from 'vue';
+import type { LocaleCode, ThemeMode } from '../types/ExplorerConfig';
+import { formatInstant, useLocale } from '../composables/useLocale';
+import {
+  EXPLORER_CLOCK,
+  deviceTimeZone,
+  resolveTimeZone,
+  resolvedTimeZoneFor,
+  setViewerTimeZone,
+  timeZoneSourcesFor,
+  viewerTimeZone,
+} from '../lib/timezone';
+import Modal from '../modals/Modal.vue';
+import TimeZonePicker from './TimeZonePicker.vue';
+
+const props = defineProps<{
+  open: boolean;
+  locale: LocaleCode;
+  theme?: ThemeMode;
+}>();
+
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const { t } = useLocale(() => props.locale);
+
+const inputId = `fe-tzdialog-${Math.random().toString(36).slice(2, 9)}`;
+
+// This explorer's clock, not the page's newest (lib/timezone, timeZoneSourcesFor).
+const clock = inject(EXPLORER_CLOCK, undefined);
+const fallback = computed(() => resolveTimeZone({ ...timeZoneSourcesFor(clock), viewer: '' }));
+const inForce = computed(() => resolvedTimeZoneFor(clock));
+const inForceZone = computed(() => inForce.value.zone ?? deviceTimeZone());
+
+/** "Right now in Asia/Tokyo: 14:05:09" — the fastest way to see a wrong pick. */
+const now = ref('');
+let timer: ReturnType<typeof setInterval> | undefined;
+function refresh(): void {
+  // Through the shared formatter, which reads the RESOLVED zone — the readout
+  // must say what every date on the page is actually drawn in, not what this
+  // dialog thinks it chose.
+  now.value = formatInstant(
+    new Date(),
+    props.locale,
+    {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    },
+    clock,
+  );
+}
+watch(
+  () => props.open,
+  (open) => {
+    if (timer) clearInterval(timer);
+    timer = undefined;
+    if (!open) return;
+    refresh();
+    timer = setInterval(refresh, 1000);
+  },
+  { immediate: true },
+);
+watch(inForce, refresh);
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer);
+});
+</script>
+
+<template>
+  <Modal :open="open" :title="t('tz.title')" size="md" :theme="theme" @close="emit('close')">
+    <div class="fe-tzdialog" data-testid="fe-tz-dialog">
+      <label class="fe-tzdialog__label" :for="inputId">{{ t('tz.label') }}</label>
+      <TimeZonePicker
+        :input-id="inputId"
+        :locale="locale"
+        :model-value="viewerTimeZone()"
+        :fallback="fallback"
+        :label="t('tz.label')"
+        testid="fe-tz"
+        @update:model-value="setViewerTimeZone"
+      />
+      <p class="fe-tzdialog__hint">{{ t('tz.hint') }}</p>
+      <p class="fe-tzdialog__now" data-testid="fe-tz-now" :data-tier="inForce.tier">
+        {{ t('tz.now', { zone: inForceZone, time: now }) }}
+      </p>
+    </div>
+  </Modal>
+</template>
+
+<!-- Not scoped — see TimeZonePicker.vue / ThemePalette.vue. -->
+<style>
+/* Tall enough that the zone list opens downward inside the dialog instead of
+   being clipped by the body's own scroll box. */
+.fe-tzdialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fe-gap-sm);
+  min-height: 340px;
+}
+.fe-tzdialog__label {
+  font-size: var(--fe-text-sm);
+  font-weight: 500;
+  color: var(--fe-text);
+}
+.fe-tzdialog__hint,
+.fe-tzdialog__now {
+  margin: 0;
+  font-size: var(--fe-text-xs);
+  line-height: 1.45;
+  color: var(--fe-text-muted);
+}
+.fe-tzdialog__now {
+  font-size: var(--fe-text-sm);
+  font-variant-numeric: tabular-nums;
+}
+</style>