@dnax/ui 0.0.64 → 0.0.66

package/components/QDatePicker.vue

@@ -9,6 +9,8 @@ import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
 import { placePopover, type PopoverPlacement } from "../lib/datePicker"
+import { useConfigLang } from "../lib/useComponentProps"
+import { dateLabels, dateLocale } from "../lib/dateI18n"
 import QDateCalendar from "./internal/QDateCalendar.vue"
 
 interface Props {
@@ -43,7 +45,7 @@ interface Props {
   width?: string
   /** Titre du panneau (modes à voile : sheet/modal/dialog) */
   title?: string
-  /** Raccourci « Today » sous le calendrier (tous les modes) */
+  /** Raccourci « aujourd'hui » sous le calendrier (tous les modes) */
   todayBtn?: boolean
   /** En-tête : libellé cliquable ouvrant le choix du mois (tous les modes) */
   monthDropdown?: boolean
@@ -75,6 +77,11 @@ const emit = defineEmits<{
   clear: []
 }>()
 
+// Langue de l'app (`QConfigProvider lang`) : format d'affichage et libellés.
+const configLang = useConfigLang()
+const locale = computed(() => dateLocale(configLang.value))
+const labels = computed(() => dateLabels(configLang.value))
+
 /** Champ déclencheur (tout sauf `inline`) */
 const isPanelMode = computed(() => props.mode !== "inline")
 /** Panneau ancré au champ : ni voile, ni blocage du scroll, ni retour navigateur */
@@ -98,7 +105,7 @@ const formatFn = computed(
   () =>
     props.format ??
     ((d: Date) =>
-      new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "short", year: "numeric" }).format(d)),
+      new Intl.DateTimeFormat(locale.value, { day: "2-digit", month: "short", year: "numeric" }).format(d)),
 )
 
 const displayText = computed(() => (props.modelValue ? formatFn.value(props.modelValue) : ""))
@@ -139,7 +146,7 @@ const closePopup = () => {
   open.value = false
 }
 
-const sheetTitle = computed(() => props.title || props.label || "Sélectionner une date")
+const sheetTitle = computed(() => props.title || props.label || labels.value.selectDate)
 
 const sheetStyle = computed<Record<string, string> | undefined>(() =>
   props.width ? { width: props.width, maxWidth: props.width } : undefined,
@@ -263,7 +270,7 @@ onBeforeUnmount(() => {
           v-if="clearable && modelValue && !disable && !readonly"
           class="q-field__clear"
           type="button"
-          aria-label="Effacer"
+          :aria-label="labels.clear"
           @click.stop="onClear"
         >
           <Icon :icon="icons.x" aria-hidden="true" />
@@ -304,7 +311,7 @@ onBeforeUnmount(() => {
                 <button
                   type="button"
                   class="q-date-picker__sheet-close"
-                  :aria-label="`Fermer ${sheetTitle}`"
+                  :aria-label="`${labels.close} ${sheetTitle}`"
                   @click="closePopup"
                 >
                   <Icon :icon="icons.x" aria-hidden="true" />

package/components/QSpreadsheet.vue

@@ -1984,12 +1984,30 @@ const onFxKeydown = (e: KeyboardEvent) => {
 
 // ─── Autocomplétion des fonctions (barre fx + éditeur formule) ───
 const FORMULA_FNS: { name: string; sig: string }[] = [
+  // Agrégats & critères
   { name: "SUM", sig: "a, b, …" },
+  { name: "SUMIF", sig: "range, criteria, [sum_range]" },
+  { name: "SUMIFS", sig: "sum_range, range1, crit1…" },
   { name: "AVERAGE", sig: "a, b, …" },
-  { name: "MIN", sig: "a, b, …" },
-  { name: "MAX", sig: "a, b, …" },
+  { name: "AVERAGEIF", sig: "range, criteria, [avg_range]" },
+  { name: "AVERAGEIFS", sig: "avg_range, range1, crit1…" },
   { name: "COUNT", sig: "a, b, …" },
   { name: "COUNTA", sig: "a, b, …" },
+  { name: "COUNTIF", sig: "range, criteria" },
+  { name: "COUNTIFS", sig: "range1, crit1…" },
+  { name: "SUMPRODUCT", sig: "range1, range2…" },
+  { name: "MIN", sig: "a, b, …" },
+  { name: "MAX", sig: "a, b, …" },
+  { name: "MEDIAN", sig: "a, b, …" },
+  // Statistiques
+  { name: "LARGE", sig: "range, k" },
+  { name: "SMALL", sig: "range, k" },
+  { name: "RANK", sig: "value, range, [order]" },
+  { name: "STDEV", sig: "a, b, …" },
+  { name: "STDEVP", sig: "a, b, …" },
+  { name: "VAR", sig: "a, b, …" },
+  { name: "VARP", sig: "a, b, …" },
+  // Logique
   { name: "IF", sig: "cond, yes, no" },
   { name: "IFS", sig: "cond1, v1, cond2, v2…" },
   { name: "IFERROR", sig: "value, fallback" },
@@ -1998,7 +2016,22 @@ const FORMULA_FNS: { name: string; sig: string }[] = [
   { name: "AND", sig: "a, b…" },
   { name: "OR", sig: "a, b…" },
   { name: "NOT", sig: "v" },
-  { name: "VLOOKUP", sig: "key, range, col, [approx]" },
+  { name: "TRUE", sig: "" },
+  { name: "FALSE", sig: "" },
+  // Info / erreurs
+  { name: "ISBLANK", sig: "v" },
+  { name: "ISNUMBER", sig: "v" },
+  { name: "ISTEXT", sig: "v" },
+  { name: "ISERROR", sig: "v" },
+  { name: "ISERR", sig: "v" },
+  { name: "ISNA", sig: "v" },
+  { name: "NA", sig: "" },
+  // Recherche
+  { name: "VLOOKUP", sig: "key, range, col" },
+  { name: "XLOOKUP", sig: "key, table, return_range, [not_found]" },
+  { name: "INDEX", sig: "range, row, [col]" },
+  { name: "MATCH", sig: "key, range, [type]" },
+  // Maths
   { name: "ABS", sig: "n" },
   { name: "ROUND", sig: "n, [digits]" },
   { name: "ROUNDUP", sig: "n, [digits]" },
@@ -2011,23 +2044,26 @@ const FORMULA_FNS: { name: string; sig: string }[] = [
   { name: "POWER", sig: "n, exp" },
   { name: "PI", sig: "" },
   { name: "RAND", sig: "" },
+  // Texte
   { name: "CONCAT", sig: "a, b…" },
   { name: "CONCATENATE", sig: "a, b…" },
+  { name: "TEXTJOIN", sig: "delim, ignore_empty, a, b…" },
   { name: "UPPER", sig: "text" },
   { name: "LOWER", sig: "text" },
+  { name: "PROPER", sig: "text" },
   { name: "TRIM", sig: "text" },
   { name: "LEN", sig: "text" },
   { name: "LEFT", sig: "text, [n]" },
   { name: "RIGHT", sig: "text, [n]" },
   { name: "MID", sig: "text, start, n" },
+  { name: "SEARCH", sig: "find, text, [start]" },
   { name: "FIND", sig: "find, text, [start]" },
   { name: "SUBSTITUTE", sig: "text, old, new, [n]" },
   { name: "REPLACE", sig: "text, start, n, new" },
+  { name: "EXACT", sig: "a, b" },
   { name: "VALUE", sig: "text" },
   { name: "N", sig: "v" },
-  { name: "ISBLANK", sig: "v" },
-  { name: "ISNUMBER", sig: "v" },
-  { name: "ISTEXT", sig: "v" },
+  // Dates
   { name: "TODAY", sig: "" },
   { name: "NOW", sig: "" },
   { name: "DATE", sig: "y, m, d" },
@@ -2035,6 +2071,15 @@ const FORMULA_FNS: { name: string; sig: string }[] = [
   { name: "MONTH", sig: "date" },
   { name: "DAY", sig: "date" },
   { name: "EDATE", sig: "date, months" },
+  { name: "EOMONTH", sig: "date, months" },
+  { name: "DATEDIF", sig: "start, end, unit" },
+  { name: "DAYS", sig: "end, start" },
+  { name: "WEEKDAY", sig: "date, [type]" },
+  { name: "WEEKNUM", sig: "date, [type]" },
+  { name: "ISOWEEKNUM", sig: "date" },
+  { name: "WORKDAY", sig: "start, days, [holidays]" },
+  { name: "NETWORKDAYS", sig: "start, end, [holidays]" },
+  { name: "TEXT", sig: "value, format" },
 ]
 // La source alimente des méthodes de chaîne (`.trim()`, `.startsWith()`) :
 // la valeur brute d'une cellule peut être un nombre / booléen → on coerce.

package/components/QTable.vue

@@ -35,6 +35,7 @@ import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
 import { radiusStyle, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
+import QSelect from "./QSelect.vue"
 
 interface Props {
   /** Lignes de données */
@@ -164,6 +165,13 @@ const rowsPerPage = computed({
   get: () => pagination.value.rowsPerPage,
   set: (v) => setPagination({ page: 1, rowsPerPage: v }),
 })
+
+/** Libellé d'une option « lignes par page » (0 = tout afficher).
+ *  Reçoit l'option normalisée par QSelect (`{ value, label }`) ou la valeur brute. */
+const rowsPerPageOptionLabel = (opt: any): string => {
+  const value = opt !== null && typeof opt === "object" ? opt.value : opt
+  return value === 0 ? "All" : String(value)
+}
 const sortBy = computed(() => pagination.value.sortBy)
 const descending = computed(() => pagination.value.descending)
 
@@ -729,12 +737,18 @@ const virtual = computed(() => {
       <slot name="bottom" />
       <div class="q-table__pagination">
         <span class="q-table__range">{{ rangeLabel }}</span>
-        <label class="q-table__rows-select">
-          Rows per page
-          <select :value="rowsPerPage" @change="(e) => (rowsPerPage = Number((e.target as HTMLSelectElement).value))">
-            <option v-for="n in rowsPerPageOptions" :key="n" :value="n">{{ n === 0 ? 'All' : n }}</option>
-          </select>
-        </label>
+        <div class="q-table__rows-select">
+          <span>Rows per page</span>
+          <q-select
+            v-model="rowsPerPage"
+            class="q-table__rows-field"
+            :options="rowsPerPageOptions"
+            :option-label="rowsPerPageOptionLabel"
+            emit-value
+            dense
+            aria-label="Rows per page"
+          />
+        </div>
         <div class="q-table__page-nav">
           <button
             type="button"

package/components/QTabs.vue

@@ -183,6 +183,9 @@ const scrollArrows = (dir: -1 | 1) => {
   el.scrollBy(props.vertical ? { top: delta, behavior: "smooth" } : { left: delta, behavior: "smooth" })
 }
 
+/** Débordement réel → les deux flèches existent (celle du côté bloqué est **désactivée**). */
+const scrollable = computed(() => canScrollStart.value || canScrollEnd.value)
+
 // Recalcule la position de l'indicateur (et les flèches) après chaque changement de DOM
 const measure = async () => {
   await nextTick()
@@ -285,6 +288,10 @@ const tabsClasses = computed(() =>
     props.animated && `q-tabs--anim-${props.transition}`,
     props.collapseInactive && "q-tabs--collapse-inactive",
     props.showArrows && "q-tabs--arrows",
+    // Fondu des bords : uniquement du côté où il reste du contenu à révéler (le CSS
+    // n'utilise qu'un masque alpha → rendu identique en thème clair et sombre).
+    props.showArrows && canScrollStart.value && "q-tabs--scroll-start",
+    props.showArrows && canScrollEnd.value && "q-tabs--scroll-end",
   ),
 )
 </script>
@@ -299,9 +306,10 @@ const tabsClasses = computed(() =>
     :aria-orientation="vertical ? 'vertical' : 'horizontal'"
   >
     <button
-      v-if="showArrows && canScrollStart"
+      v-if="showArrows && scrollable"
       type="button"
       class="q-tabs__arrow q-tabs__arrow--start"
+      :disabled="!canScrollStart"
       :aria-label="vertical ? 'Defiler les onglets vers le haut' : 'Defiler les onglets vers la gauche'"
       @click="scrollArrows(-1)"
     >
@@ -317,9 +325,10 @@ const tabsClasses = computed(() =>
       <div class="q-tabs__indicator" :style="indicatorStyle" aria-hidden="true" />
     </div>
     <button
-      v-if="showArrows && canScrollEnd"
+      v-if="showArrows && scrollable"
       type="button"
       class="q-tabs__arrow q-tabs__arrow--end"
+      :disabled="!canScrollEnd"
       :aria-label="vertical ? 'Defiler les onglets vers le bas' : 'Defiler les onglets vers la droite'"
       @click="scrollArrows(1)"
     >

package/components/internal/QDateCalendar.vue

@@ -4,6 +4,14 @@ import { computed, ref, watch } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../../lib/icons"
 import { cn } from "../../lib/utils"
+import { useConfigLang } from "../../lib/useComponentProps"
+import {
+  dateLabels,
+  dateLocale,
+  monthShortNames,
+  monthYearLabel,
+  weekdayShortNames,
+} from "../../lib/dateI18n"
 
 interface Props {
   modelValue?: Date | null
@@ -15,7 +23,7 @@ interface Props {
   disabledDates?: (d: Date) => boolean
   /** Premier jour de la semaine : 0 = dimanche, 1 = lundi (défaut) */
   firstDayOfWeek?: number
-  /** Raccourci « Today » sous la grille */
+  /** Libellé du raccourci « aujourd'hui » (texte selon `lang`) */
   todayBtn?: boolean
   /** En-tête : libellé cliquable ouvrant le choix du mois (et de l'année) */
   monthDropdown?: boolean
@@ -30,6 +38,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ select: [date: Date] }>()
 
+// Langue de l'app (`QConfigProvider lang`) : mois, jours et libellés suivent.
+const configLang = useConfigLang()
+const locale = computed(() => dateLocale(configLang.value))
+const labels = computed(() => dateLabels(configLang.value))
+
 const today = new Date()
 const viewYear = ref(props.modelValue?.getFullYear() ?? today.getFullYear())
 const viewMonth = ref(props.modelValue?.getMonth() ?? today.getMonth())
@@ -51,10 +64,7 @@ const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDat
 const sameDay = (a: Date, b: Date) =>
   a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
 
-const weekdayLabels = computed(() => {
-  const names = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"] as const
-  return Array.from({ length: 7 }, (_, i) => names[(props.firstDayOfWeek + i) % 7])
-})
+const weekdayLabels = computed(() => weekdayShortNames(locale.value, props.firstDayOfWeek))
 
 const weeks = computed<(Date | null)[][]>(() => {
   const y = viewYear.value
@@ -70,18 +80,10 @@ const weeks = computed<(Date | null)[][]>(() => {
   return result
 })
 
-const monthLabel = computed(() =>
-  new Intl.DateTimeFormat(undefined, { month: "long", year: "numeric" }).format(
-    new Date(viewYear.value, viewMonth.value, 1),
-  ),
-)
+const monthLabel = computed(() => monthYearLabel(locale.value, viewYear.value, viewMonth.value))
 
-/** Noms courts des 12 mois, dans la langue du navigateur (comme `monthLabel`) */
-const monthNames = computed(() =>
-  Array.from({ length: 12 }, (_, i) =>
-    new Intl.DateTimeFormat(undefined, { month: "short" }).format(new Date(2000, i, 1)),
-  ),
-)
+/** Noms courts des 12 mois, dans la langue de l'app (comme `monthLabel`) */
+const monthNames = computed(() => monthShortNames(locale.value))
 
 const prevMonth = () => {
   if (viewMonth.value === 0) {
@@ -126,7 +128,7 @@ const onSelectDate = (d: Date) => {
   emit("select", d)
 }
 
-/** Raccourci « Today » : désactivé quand aujourd'hui est hors bornes / désactivé */
+/** Raccourci « aujourd'hui » : désactivé quand aujourd'hui est hors bornes / désactivé */
 const todaySelectable = computed(() => !isDisabled(startOfDay(new Date())))
 
 const selectToday = () => {
@@ -141,7 +143,7 @@ const selectToday = () => {
       <button
         type="button"
         class="q-date-calendar__nav-btn"
-        aria-label="Mois précédent"
+        :aria-label="labels.prevMonth"
         @click="prevMonth"
       >
         <Icon :icon="icons.chevronLeft" aria-hidden="true" />
@@ -152,7 +154,7 @@ const selectToday = () => {
         class="q-date-calendar__nav-label q-date-calendar__nav-label--button"
         :class="{ 'q-date-calendar__nav-label--open': monthPickerOpen }"
         :aria-expanded="monthPickerOpen"
-        aria-label="Choisir le mois"
+        :aria-label="labels.chooseMonth"
         @click="monthPickerOpen = !monthPickerOpen"
       >
         <span class="q-date-calendar__nav-text">{{ monthLabel }}</span>
@@ -162,7 +164,7 @@ const selectToday = () => {
       <button
         type="button"
         class="q-date-calendar__nav-btn"
-        aria-label="Mois suivant"
+        :aria-label="labels.nextMonth"
         @click="nextMonth"
       >
         <Icon :icon="icons.chevronRight" aria-hidden="true" />
@@ -175,7 +177,7 @@ const selectToday = () => {
         <button
           type="button"
           class="q-date-calendar__nav-btn"
-          aria-label="Année précédente"
+          :aria-label="labels.prevYear"
           @click="prevYear"
         >
           <Icon :icon="icons.chevronLeft" aria-hidden="true" />
@@ -184,7 +186,7 @@ const selectToday = () => {
         <button
           type="button"
           class="q-date-calendar__nav-btn"
-          aria-label="Année suivante"
+          :aria-label="labels.nextYear"
           @click="nextYear"
         >
           <Icon :icon="icons.chevronRight" aria-hidden="true" />
@@ -239,7 +241,7 @@ const selectToday = () => {
         :disabled="!todaySelectable"
         @click="selectToday"
       >
-        Today
+        {{ labels.today }}
       </button>
     </div>
   </div>

package/index.ts

@@ -164,6 +164,22 @@ export { screen } from "./lib/screen"
 export type { QScreen } from "./lib/screen"
 export { loading } from "./lib/loading"
 export type { LoadingOptions, QLoadingPlugin } from "./lib/loading"
+export { network, createNetwork, resolveOnline, onlineAfterEvent } from "./lib/network"
+export type { QNetwork, NetworkEvent, NetworkOptions, NetworkEventTarget, NetworkNavigator } from "./lib/network"
+export {
+  wakeLock,
+  createWakeLock,
+  isWakeLockCapable,
+  isDocumentVisible,
+  shouldReacquire,
+} from "./lib/wakeLock"
+export type {
+  QWakeLock,
+  WakeLockOptions,
+  WakeLockApiLike,
+  WakeLockSentinelLike,
+  WakeLockVisibilityLike,
+} from "./lib/wakeLock"
 export { localStorage, sessionStorage } from "./lib/storage"
 export type { QWebStorage } from "./lib/storage"
 export {

package/lib/dateI18n.test.ts

@@ -0,0 +1,91 @@
+// Libellés / locale des composants de date — pilotés par le `lang` du provider.
+import { describe, expect, it } from "bun:test"
+import {
+  dateLabels,
+  dateLocale,
+  monthShortNames,
+  monthYearLabel,
+  weekdayShortNames,
+} from "./dateI18n"
+
+describe("dateLocale", () => {
+  it("mappe la langue de l'app sur une locale BCP 47 déterministe", () => {
+    expect(dateLocale("fr")).toBe("fr-FR")
+    expect(dateLocale("en")).toBe("en-US")
+  })
+})
+
+describe("dateLabels", () => {
+  it("« Today » devient « Aujourd'hui » en français", () => {
+    expect(dateLabels("fr").today).toBe("Aujourd'hui")
+    expect(dateLabels("en").today).toBe("Today")
+  })
+
+  it("couvre les libellés du panneau et de la navigation", () => {
+    expect(dateLabels("fr").selectDate).toBe("Sélectionner une date")
+    expect(dateLabels("fr").clear).toBe("Effacer")
+    expect(dateLabels("fr").close).toBe("Fermer")
+    expect(dateLabels("fr").prevMonth).toBe("Mois précédent")
+    expect(dateLabels("fr").nextMonth).toBe("Mois suivant")
+    expect(dateLabels("en").selectDate).toBe("Select a date")
+  })
+
+  it("retombe sur l'anglais pour une langue inconnue (JS non typé)", () => {
+    expect(dateLabels("de" as never).today).toBe("Today")
+  })
+})
+
+describe("weekdayShortNames", () => {
+  it("suit la locale demandée, pas celle du navigateur", () => {
+    expect(weekdayShortNames("fr-FR", 1)[0]).toMatch(/^lun/i)
+    expect(weekdayShortNames("en-US", 1)[0]).toMatch(/^mon/i)
+  })
+
+  it("commence par le jour demandé (0 = dimanche)", () => {
+    const monday = weekdayShortNames("en-US", 1)
+    const sunday = weekdayShortNames("en-US", 0)
+    expect(sunday[0]).toMatch(/^sun/i)
+    expect(sunday[0]).toBe(monday[6])
+    expect(sunday[6]).toBe(monday[5])
+  })
+
+  it("rend 7 jours sans point final ni minuscule initiale", () => {
+    const names = weekdayShortNames("fr-FR")
+    expect(names).toHaveLength(7)
+    for (const name of names) {
+      expect(name.endsWith(".")).toBe(false)
+      expect(name[0]).toBe(name[0]!.toUpperCase())
+    }
+  })
+})
+
+describe("monthShortNames", () => {
+  it("rend les 12 mois dans la langue demandée", () => {
+    const fr = monthShortNames("fr-FR")
+    const en = monthShortNames("en-US")
+    expect(fr).toHaveLength(12)
+    expect(en).toEqual([
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ])
+    expect(fr[0]).toMatch(/^janv/i)
+    expect(fr[11]).toMatch(/^déc/i)
+  })
+})
+
+describe("monthYearLabel", () => {
+  it("en-tête long dans la langue demandée", () => {
+    expect(monthYearLabel("en-US", 2026, 0)).toBe("January 2026")
+    expect(monthYearLabel("fr-FR", 2026, 0)).toContain("janvier 2026")
+  })
+})

package/lib/dateI18n.ts

@@ -0,0 +1,85 @@
+// Libellés et locale des composants de date (QDatePicker / QDateCalendar).
+//
+// La langue vient du `QConfigProvider` (`lang`, défaut "en") et arrive ici via
+// `useConfigLang()`. On ne s'appuie **pas** sur la locale du navigateur : le rendu
+// doit être déterministe (serveur ↔ client) et suivre la langue choisie dans l'app.
+import type { QAppLang } from "./config"
+
+/** Clés d'interface des composants de date. */
+export type DateUiKey =
+  | "today"
+  | "prevMonth"
+  | "nextMonth"
+  | "chooseMonth"
+  | "prevYear"
+  | "nextYear"
+  | "selectDate"
+  | "clear"
+  | "close"
+
+const DATE_UI: Record<QAppLang, Record<DateUiKey, string>> = {
+  en: {
+    today: "Today",
+    prevMonth: "Previous month",
+    nextMonth: "Next month",
+    chooseMonth: "Choose month",
+    prevYear: "Previous year",
+    nextYear: "Next year",
+    selectDate: "Select a date",
+    clear: "Clear",
+    close: "Close",
+  },
+  fr: {
+    today: "Aujourd'hui",
+    prevMonth: "Mois précédent",
+    nextMonth: "Mois suivant",
+    chooseMonth: "Choisir le mois",
+    prevYear: "Année précédente",
+    nextYear: "Année suivante",
+    selectDate: "Sélectionner une date",
+    clear: "Effacer",
+    close: "Fermer",
+  },
+}
+
+/** Locale BCP 47 associée à la langue de l'app (déterministe, contrairement à `undefined`). */
+export function dateLocale(lang: QAppLang): string {
+  return lang === "fr" ? "fr-FR" : "en-US"
+}
+
+/** Libellés d'interface des composants de date. */
+export function dateLabels(lang: QAppLang): Record<DateUiKey, string> {
+  return DATE_UI[lang] ?? DATE_UI.en
+}
+
+/** Abréviation : initiale en majuscule, sans point final (`dim.` → `Dim`). */
+function shortName(value: string): string {
+  const clean = value.replace(/[.,]+$/, "").trim()
+  return clean.charAt(0).toUpperCase() + clean.slice(1)
+}
+
+/**
+ * Jours de la semaine abrégés, en commençant par `firstDayOfWeek`
+ * (0 = dimanche, 1 = lundi).
+ */
+export function weekdayShortNames(locale: string, firstDayOfWeek = 1): string[] {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" })
+  // 2024-01-07 est un dimanche — référence stable, indépendante de la date du jour.
+  const names = Array.from({ length: 7 }, (_, i) =>
+    shortName(fmt.format(new Date(2024, 0, 7 + i))),
+  )
+  const start = ((firstDayOfWeek % 7) + 7) % 7
+  return Array.from({ length: 7 }, (_, i) => names[(start + i) % 7]!)
+}
+
+/** Mois abrégés, dans l'ordre de l'année (`Janv.` / `Jan`). */
+export function monthShortNames(locale: string): string[] {
+  const fmt = new Intl.DateTimeFormat(locale, { month: "short" })
+  return Array.from({ length: 12 }, (_, i) => shortName(fmt.format(new Date(2024, i, 1))))
+}
+
+/** En-tête du calendrier : « janvier 2026 » / « January 2026 ». */
+export function monthYearLabel(locale: string, year: number, month: number): string {
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" })
+    .format(new Date(year, month, 1))
+}