@dnax/ui 0.0.53 → 0.0.55

package/components/QAutocomplete.vue

@@ -9,6 +9,7 @@ import { cn } from "../lib/utils"
 import { radiusStyle, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
+import { optionsOf } from "../lib/select"
 
 interface Props {
   /** Valeur sélectionnée */
@@ -230,18 +231,23 @@ const getLabel = (opt: any): string => {
   return v === undefined || v === null ? "" : String(v)
 }
 
+// `options` peut arriver `false` (v-if/&&, config non chargée) : sans cette coercition,
+// `.find` / `.filter` / `.some` jetteraient et le popup cesserait de se rendre
+// (même classe de bug que `q-select multiple` — cf. `.memory/knowledges.md`).
+const optionList = computed<any[]>(() => optionsOf(props.options))
+
 const selectedLabel = computed(() => {
   if (props.modelValue === undefined || props.modelValue === null) return ""
-  const opt = props.options.find((o) => getValue(o) === props.modelValue)
+  const opt = optionList.value.find((o) => getValue(o) === props.modelValue)
   return opt ? getLabel(opt) : String(props.modelValue)
 })
 
 // — Filtre client (sauté en mode serveur @filter) —
 const filtered = computed(() => {
-  if (hasFilter.value) return props.options
+  if (hasFilter.value) return optionList.value
   const q = query.value.trim().toLowerCase()
-  if (!q) return props.options
-  return props.options.filter((o) => getLabel(o).toLowerCase().includes(q))
+  if (!q) return optionList.value
+  return optionList.value.filter((o) => getLabel(o).toLowerCase().includes(q))
 })
 
 // — Affichage du champ —
@@ -323,7 +329,7 @@ const commit = () => {
   const q = query.value.trim()
   if (!q) return
   const label = q.toLowerCase()
-  const matches = props.options.some((o) => getLabel(o).toLowerCase() === label)
+  const matches = optionList.value.some((o) => getLabel(o).toLowerCase() === label)
   if (!matches) {
     query.value = ""
     emit("update:inputValue", "")

package/components/QConfigProvider.vue

@@ -13,7 +13,7 @@ import QBottomSheetProvider from "./QBottomSheetProvider.vue"
 import QImagePreviewProvider from "./QImagePreviewProvider.vue"
 import { qConfigKey, qProvidersKey } from "../lib/config"
 import type { QAppLang, QConfigContext, QTheme, ThemeMode } from "../lib/config"
-import { isRadiusScale, RADIUS_VALUES } from "../lib/useComponentProps"
+import { themeVars } from "../lib/themeVars"
 
 interface Props {
   /**
@@ -119,40 +119,51 @@ watch(
 
 provide<QConfigContext>(qConfigKey, { theme: mergedTheme, isDark, lang })
 
+// — Dev : `componentProps` n'est PAS un spread de props — une clé non lue est ignorée
+// silencieusement (cf. `.memory/knowledges.md`). On le signale, une fois par clé.
+/** Clés de `componentProps.<Nom>` réellement lues, en plus du `radius` générique. */
+const EXTRA_COMPONENT_PROP_KEYS: Record<string, readonly string[]> = { QMap: ["apiKey"] }
+
+const IS_DEV = !!((import.meta as any).env?.DEV ?? (import.meta as any).dev)
+if (IS_DEV) {
+  const warned = new Set<string>()
+  watch(
+    mergedTheme,
+    (theme) => {
+      if (typeof document === "undefined") return // pas de bruit au SSR/build
+      for (const [name, entry] of Object.entries(theme.componentProps ?? {})) {
+        if (!entry || typeof entry !== "object") continue
+        const allowed = new Set<string>(["radius", ...(EXTRA_COMPONENT_PROP_KEYS[name] ?? [])])
+        const ignored = Object.keys(entry).filter((key) => !allowed.has(key))
+        if (!ignored.length) continue
+        const signature = `${name}:${ignored.join(",")}`
+        if (warned.has(signature)) continue
+        warned.add(signature)
+        console.warn(
+          `[dnax/ui] componentProps.${name} : clé(s) ignorée(s) → ${ignored.map((k) => `"${k}"`).join(", ")}.\n` +
+            `  Ces clés sont lues pour ${name} : ${[...allowed].map((k) => `"${k}"`).join(", ")}.\n` +
+            `  Pour une couleur/un fond, passez par theme.vars (ex. { "--q-field-bg": "#eef7ee" }) ou du CSS.`,
+        )
+      }
+    },
+    { immediate: true, deep: true },
+  )
+}
+
 // Providers intégrés ($q.dialog + $q.notify) : rendus UNE fois par le
 // QConfigProvider le plus externe (les imbriqués ne re-rendent pas → pas de doublons)
 const hasProviders = inject(qProvidersKey, false)
 provide(qProvidersKey, true)
 const isProvidersRoot = computed(() => !hasProviders)
 
-/** Calcule un foreground lisible (blanc ou sombre) pour un fond donné. */
-const textColorFor = (bg: string): string => {
-  let hex = bg.trim().replace(/^#/, "")
-  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("")
-  if (!/^[0-9a-f]{6}$/i.test(hex)) return "#ffffff"
-  const r = parseInt(hex.slice(0, 2), 16)
-  const g = parseInt(hex.slice(2, 4), 16)
-  const b = parseInt(hex.slice(4, 6), 16)
-  const luminance = 0.299 * r + 0.587 * g + 0.114 * b
-  return luminance > 150 ? "#1d1d1d" : "#ffffff"
-}
-
-const themeStyle = computed<Record<string, string>>(() => {
-  const style: Record<string, string> = {
-    "color-scheme": isDark.value ? "dark" : "light",
-  }
-  for (const [token, value] of Object.entries(mergedTheme.value.colors ?? {})) {
-    if (!value) continue
-    style[`--${token}`] = value
-    style[`--${token}-foreground`] = textColorFor(value)
-  }
-  // Arrondi global : composantProps.default.radius → --q-radius hérité par TOUS
-  // les composants dont le CSS utilise var(--q-radius). Une prop/override
-  // spécifique (useRadius) pose son propre --q-radius inline et prime.
-  const global = mergedTheme.value.componentProps?.default?.radius
-  if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
-  return style
-})
+/**
+ * Variables CSS du thème : `color-scheme` + couleurs, `--q-radius` et `vars` libres
+ * (logique partagée avec les providers d'overlays téléportés, cf. `themeVars`).
+ */
+const themeStyle = computed<Record<string, string>>(() => ({
+  "color-scheme": isDark.value ? "dark" : "light",
+  ...themeVars(mergedTheme.value),
+}))
 
 // Thème GLOBAL (provider racine) : pose aussi les variables sur <html> — les
 // overlays téléportés au body (dialogs $q.dialog, …) perdent l'héritage du div

package/components/QSelect.vue

@@ -60,6 +60,7 @@ import { radiusStyle, radiusValue, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
 import { createSearcher } from "../lib/search"
+import { optionsOf, selectionOf } from "../lib/select"
 
 interface Props {
   /** Valeur sélectionnée : option, valeur (emit-value), ou tableau (multiple) */
@@ -337,7 +338,9 @@ watch([popupPlacement, popupOffset], onPopupViewportChange)
 const isObjectOption = (o: any): boolean => o !== null && typeof o === "object"
 
 const normalizedOptions = computed<any[]>(() =>
-  props.options.map((o) => {
+  // `options` peut arriver `false` (v-if/&&, config non chargée) : sans garde,
+  // `props.options.map` jetait et l'option par défaut ne s'affichait plus.
+  optionsOf(props.options).map((o) => {
     if (isObjectOption(o)) return o
     // Objet normalisé : garde la valeur d'origine (non-énumérable → invisible
     // pour l'affichage, la recherche fuse et les clés de rendu)
@@ -361,8 +364,9 @@ const getOptionLabel = (opt: any): string => {
 
 // — Sélection (dérivée du modèle) —
 const selectedOptions = computed<any[]>(() => {
-  if (props.modelValue === undefined || props.modelValue === null) return []
-  const list = props.multiple ? (props.modelValue as any[]) : [props.modelValue]
+  // En `multiple`, un modèle scalaire (ex. `false`) ne doit PAS faire jeter `list.map`
+  // (tout le popup cessait de se rendre) : `selectionOf` le traite comme vide.
+  const list = selectionOf(props.modelValue, props.multiple)
   return list
     .map((v) => {
       if (props.emitValue) return normalizedOptions.value.find((o) => getOptionValue(o) === v)
@@ -417,7 +421,9 @@ const clear = () => {
 }
 
 const hasValue = computed(() =>
-  props.multiple ? (props.modelValue as any[])?.length > 0 : props.modelValue !== undefined && props.modelValue !== null,
+  props.multiple
+    ? Array.isArray(props.modelValue) && props.modelValue.length > 0
+    : props.modelValue !== undefined && props.modelValue !== null,
 )
 
 // — Recherche floue (fuse.js) —

package/components/QSpreadsheet.vue

@@ -8,6 +8,16 @@
 // Suivi des modifications : `v-model:dirty` (état) + `v-model:changes` (delta lignes / feuilles
 // ajoutées, modifiées, supprimées), calculé en comparant le document à une **référence**
 // (`lib/spreadsheetChanges.ts`).
+import type {
+  QSpreadsheetValidation,
+  QSpreadsheetValidationRule,
+} from "../lib/spreadsheetValidation"
+
+export type {
+  QSpreadsheetValidation,
+  QSpreadsheetValidationRule,
+} from "../lib/spreadsheetValidation"
+
 export type QSpreadsheetCellType =
   | "string"
   | "text"
@@ -52,8 +62,8 @@ export interface QSpreadsheetColumn {
   options?: QSpreadsheetCellOption[]
   /** Pour type "select" / "multiselect" : rend les options actives en badge coloré (sinon texte) */
   chip?: boolean
-  /** Validation à la saisie : { min, max, integer?, pattern?, message? } */
-  validation?: QSpreadsheetValidation
+  /** Validation à la saisie : objet `{ min, max, … }` ou expression ArkType (`"number < 4"`) */
+  validation?: QSpreadsheetValidationRule
   /** Formatteur de la valeur affichée */
   format?: (val: any, row: Record<string, any>) => any
   /** Classe CSS de la cellule (défaut : ) */
@@ -64,24 +74,9 @@ export interface QSpreadsheetColumn {
   headerStyle?: string
 }
 
-export interface QSpreadsheetValidation {
-  /** Valeur minimale (types numériques / entiers) */
-  min?: number
-  /** Valeur maximale (types numériques / entiers) */
-  max?: number
-  /** Exige un entier (si présent, valide les entiers) */
-  integer?: boolean
-  /** Expression régulière validée contre le texte */
-  pattern?: string
-  /** Champ obligatoire (vide refusé) */
-  required?: boolean
-  /** Valeurs autorisées (liste) */
-  list?: any[]
-  /** Message d'erreur affiché (sinon message générique) */
-  message?: string
-  /** Schéma ArkType (string) — ex. "number.integer & >= 0 & <= 100" (optionnel) */
-  schema?: string
-}
+// `QSpreadsheetValidation` et `QSpreadsheetValidationRule` vivent dans
+// `lib/spreadsheetValidation.ts` (source unique, testée hors navigateur) et sont
+// ré-exportées en tête de ce bloc.
 
 /** Validation par plage de cellules (rows/cols 0-based) */
 export interface QSpreadsheetRangeValidator {
@@ -89,7 +84,7 @@ export interface QSpreadsheetRangeValidator {
   c0: number
   r1: number
   c1: number
-  validation: QSpreadsheetValidation
+  validation: QSpreadsheetValidationRule
 }
 
 export interface QSpreadsheetSelection {
@@ -161,6 +156,7 @@ import {
   deriveCols,
   parseCsv,
 } from "../lib/spreadsheet"
+import { checkValidation, type ArkCheck } from "../lib/spreadsheetValidation"
 import {
   DEFAULT_ROW_KEY,
   diffDocuments,
@@ -1676,7 +1672,7 @@ const toggleMultiOption = (opt: QSpreadsheetCellOption) => {
   const next = multiSelected(opt)
     ? current.filter((v) => v !== opt.value)
     : [...current, opt.value]
-  validateAndSet(row, column, old, next)
+  void validateAndSet(row, column, old, next)
 }
 
 // ─── Barre de formule (fx) ───
@@ -3854,60 +3850,50 @@ const condStyleOf = (r: number, c: number, name: string) => {
   return Object.keys(st).length ? st : undefined
 }
 
-// ════════ Validation de colonne (min / max / entier / pattern) ════════
+// ════════ Validation de colonne (min / max / entier / pattern / ArkType) ════════
 const valErrors = ref<Record<string, string>>({})
 const valKey = (r: number, name: string) => r + ":" + name
+
+// ArkType : import **dynamique** (jamais dans le graphe du barrel) mémoïsé au niveau
+// module — une seule promesse pour toute la session, et non une par édition de cellule.
+let arkModule: Promise<any | null> | null = null
+const loadArk = (): Promise<any | null> => {
+  arkModule ??= import("arktype")
+    .then((m) => m as any)
+    .catch(() => null)
+  return arkModule
+}
+
+/**
+ * Vérifie une expression ArkType. Une expression **invalide** (faute de syntaxe) ne doit
+ * JAMAIS jeter : l'exception remonterait en rejet non géré et la cellule ne serait ni
+ * validée ni commitée, sans aucun message (cf. `.memory/knowledges.md`).
+ */
+const arkCheck: ArkCheck = async (schema, value) => {
+  const m = await loadArk()
+  if (!m) return "ArkType unavailable"
+  try {
+    const problems = m.type(schema)(value)
+    const p = Array.isArray(problems) ? problems[0] : undefined
+    return p?.message ?? null
+  } catch (e) {
+    return `Invalid ArkType schema: ${(e as Error)?.message ?? String(e)}`
+  }
+}
+
+/** Validation d'une cellule : règles de la colonne, puis celles des plages qui la couvrent. */
 const guardValidation = async (
   row: number,
   col: QSpreadsheetColumn | undefined,
   value: any,
 ): Promise<string | null> => {
-  let ark: Promise<{ type: (s: string) => (v: unknown) => { message?: string }[] } | null> | null = null
-  const arkCheck = async (schema: string): Promise<string | null> => {
-    if (!ark)
-      ark = import("arktype")
-        .then((m) => m as any)
-        .catch(() => null)
-    const m = await ark
-    if (!m) return "ArkType unavailable"
-    const problems = m.type(schema)(value)
-    const p = Array.isArray(problems) ? problems[0] : undefined
-    return p?.message ?? null
-  }
-  const check = async (v: QSpreadsheetValidation | undefined): Promise<string | null> => {
-    if (!v) return null
-    const multi = Array.isArray(value)
-    const blank =
-      value === null || value === undefined || value === "" || (multi && value.length === 0)
-    if (v.required && blank) return v.message ?? "Required"
-    if (blank) return null // champ vide autorisé (sauf required)
-    if (v.list) {
-      // Choix multiples : chacune des valeurs doit être dans la liste
-      const values = multi ? value : [value]
-      if (values.some((x) => !v.list!.some((y) => String(y) === String(x))))
-        return v.message ?? "Not in the allowed list"
-    }
-    if (v.integer && typeof value === "number" && !Number.isInteger(value))
-      return v.message ?? "Integer required"
-    if (typeof value === "number") {
-      if (v.min !== undefined && value < v.min) return v.message ?? "Value below minimum (" + v.min + ")"
-      if (v.max !== undefined && value > v.max) return v.message ?? "Value above maximum (" + v.max + ")"
-    }
-    if (v.pattern && typeof value === "string" && !new RegExp(v.pattern).test(value))
-      return v.message ?? "Value does not match the required format"
-    if (v.schema) {
-      const e = await arkCheck(v.schema)
-      if (e) return v.message ?? e
-    }
-    return null
-  }
-  const colErr = await check(col?.validation)
+  const colErr = await checkValidation(col?.validation, value, arkCheck)
   if (colErr) return colErr
   if (props.validators?.length && col) {
     const ci = colIndex(col.name)
     for (const rv of props.validators) {
       if (row >= rv.r0 && row <= rv.r1 && ci >= rv.c0 && ci <= rv.c1) {
-        const e = await check(rv.validation)
+        const e = await checkValidation(rv.validation, value, arkCheck)
         if (e) return e
       }
     }

package/lib/config.ts

@@ -24,6 +24,14 @@ export interface QTheme {
   lang?: QAppLang
   /** Props par défaut par composant (clé = nom du composant, ex. "QBtn") */
   componentProps?: Record<string, Record<string, unknown>>
+  /**
+   * Variables CSS libres posées avec le thème, puis héritées par tout le sous-arbre
+   * (overlays téléportés compris : dialogs, bottom sheets). Clé avec ou sans `--`
+   * (ex. `{ "q-field-bg": "#eef7ee" }`). Appliquées **en dernier**, elles peuvent donc
+   * surcharger les tokens de `colors`. Utile pour ce qu'aucun token ne couvre
+   * (ex. le fond des champs, cf. `--q-field-bg`).
+   */
+  vars?: Record<string, string>
 }
 
 export interface QConfigContext {

package/lib/qrcode.ts

@@ -1,11 +1,13 @@
-// qrcode — encodage QR et tracé SVG. Le moteur d'encodage est la dépendance `qrcode`
-// (déjà présente, sans types — cf. `shims.d.ts`) : elle fournit la matrice de modules, ce
-// module la traduit en **chemin SVG** (une suite de rectangles horizontaux, bien plus
-// compact qu'un carré par module) — d'où un rendu net à toutes les tailles, thémable et
-// rendable en SSR.
+// qrcode — encodage QR et tracé SVG. Le moteur d'encodage est `uqr` (ESM pur, sans
+// dépendance) : il fournit la matrice de modules, ce module la traduit en **chemin SVG**
+// (une suite de rectangles horizontaux, bien plus compact qu'un carré par module) — d'où
+// un rendu net à toutes les tailles, thémable et rendable en SSR.
+//
+// `uqr` est **ESM** (contrairement à l'ancien `qrcode`, CJS sans `default`, qui cassait le
+// bundle client — cf. `.memory/warnings.md`) : aucun interop esbuild, aucun `optimizeDeps`.
 //
 // Pur (aucun DOM) → testable hors navigateur, comme `lib/pagePadding.ts`.
-import QRCode from "qrcode"
+import { encode } from "uqr"
 
 /** Niveau de correction d'erreur : L (~7 %) → H (~30 %) */
 export type QrEcc = "L" | "M" | "Q" | "H"
@@ -39,10 +41,25 @@ export function encodeQr(value: string, options: QrEncodeOptions = {}): QrMatrix
   if (typeof value !== "string" || value === "") return undefined
 
   try {
-    const settings: Record<string, unknown> = { errorCorrectionLevel: options.ecc ?? "M" }
-    if (typeof options.version === "number") settings.version = options.version
+    const { size, data } = encode(value, {
+      ecc: options.ecc ?? "M",
+      // La zone de silence est gérée par dnax.ui (`margin`) : on demande la matrice nue.
+      border: 0,
+      // `uqr` raisonne en bornes de version, pas en version forcée.
+      ...(typeof options.version === "number"
+        ? { minVersion: options.version, maxVersion: options.version }
+        : {}),
+    })
+
+    // `uqr` renvoie un `boolean[][]` ; on l'aplatit au contrat `data[y * size + x]`
+    // (1 = module sombre) attendu par `isDark` et le tracé.
+    const flat = new Uint8Array(size * size)
+    let i = 0
+    for (const row of data) {
+      for (let x = 0; x < size; x++) flat[i++] = row[x] ? 1 : 0
+    }
 
-    return QRCode.create(value, settings).modules
+    return { size, data: flat }
   } catch {
     return undefined
   }

package/lib/select.test.ts

@@ -0,0 +1,42 @@
+// Tests unitaires des coercitions défensives de QSelect (`optionsOf` / `selectionOf`).
+// Régression : `multiple` + modèle scalaire (`false`) faisait jeter `list.map` et
+// empêchait le popup entier de se rendre.
+import { describe, expect, it } from "bun:test"
+import { optionsOf, selectionOf } from "./select"
+
+describe("optionsOf", () => {
+  it("laisse passer un tableau (même vide)", () => {
+    expect(optionsOf(["a", "b"])).toEqual(["a", "b"])
+    expect(optionsOf([])).toEqual([])
+  })
+
+  it("traite toute valeur non-tableau comme vide (au lieu de planter)", () => {
+    expect(optionsOf(false)).toEqual([])
+    expect(optionsOf(undefined)).toEqual([])
+    expect(optionsOf(null)).toEqual([])
+    expect(optionsOf("oops")).toEqual([])
+    expect(optionsOf({ value: 1 })).toEqual([])
+  })
+})
+
+describe("selectionOf", () => {
+  it("multiple : accepte un tableau", () => {
+    expect(selectionOf(["a", "b"], true)).toEqual(["a", "b"])
+    expect(selectionOf([], true)).toEqual([])
+  })
+
+  it("multiple + scalaire → rien de sélectionné (le bug d'origine : `false`)", () => {
+    expect(selectionOf(false, true)).toEqual([])
+    expect(selectionOf(true, true)).toEqual([])
+    expect(selectionOf("a", true)).toEqual([])
+    expect(selectionOf(0, true)).toEqual([])
+  })
+
+  it("simple : emballe la valeur, sauf null/undefined", () => {
+    expect(selectionOf("a", false)).toEqual(["a"])
+    expect(selectionOf(0, false)).toEqual([0])
+    expect(selectionOf(false, false)).toEqual([false])
+    expect(selectionOf(null, false)).toEqual([])
+    expect(selectionOf(undefined, false)).toEqual([])
+  })
+})

package/lib/select.ts

@@ -0,0 +1,30 @@
+// Coercitions défensives des composants de sélection (QSelect, QAutocomplete) (`lib/select.ts`).
+//
+// Un `v-model` ou des `options` mal formés ne doivent **jamais** casser le rendu : un
+// `list.map is not a function` dans un `computed` du template tue tout le popup, sans
+// message utile. Cas réel : `<q-select multiple v-model="x">` avec `x` initialisé à
+// `false` (défaut d'un `ref` booléen, retour d'un `&&`, config non chargée) — le garde
+// `=== null`/`=== undefined` ne l'attrape pas, puis `false.map(...)` jette. Idem
+// `:options` arrivant `false` (`props.options.map` / `.filter` / `.find`).
+//
+// Pur (aucun DOM) → testable hors navigateur, comme `lib/pagePadding.ts`.
+
+/**
+ * Tableau des options. `options` doit être un tableau : toute autre valeur (ex. `false`,
+ * `0`, un objet isolé) est traitée comme **vide** plutôt que de faire planter
+ * `normalizedOptions`.
+ */
+export const optionsOf = (value: unknown): any[] => (Array.isArray(value) ? value : [])
+
+/**
+ * Tableau de sélection dérivé du `v-model` :
+ * - `null` / `undefined` → rien ;
+ * - `multiple` → le modèle **doit** être un tableau ; une valeur scalaire (ex. `false`)
+ *   vaut « rien de sélectionné » (et non une sélection de cette valeur) ;
+ * - mode simple → on emballe la valeur.
+ */
+export const selectionOf = (value: unknown, multiple: boolean): any[] => {
+  if (value === undefined || value === null) return []
+  if (multiple) return Array.isArray(value) ? value : []
+  return [value]
+}

package/lib/spreadsheetValidation.test.ts

@@ -0,0 +1,106 @@
+// Tests unitaires de la validation de colonne de QSpreadsheet (`lib/spreadsheetValidation.ts`).
+// L'accès à ArkType est **injecté** : on teste l'ordonnancement des règles sans bundler
+// ni navigateur, et on vérifie qu'une expression est bien transmise telle quelle.
+import { describe, expect, it } from "bun:test"
+import { checkValidation, normalizeValidation, type ArkCheck } from "./spreadsheetValidation"
+
+/** Faux ArkType : échoue pour toute valeur >= 4 (comme une règle `"number < 4"`). */
+const fakeArk: ArkCheck = async (schema, value) =>
+  schema === "number < 4" && typeof value === "number" && value >= 4 ? "must be < 4" : null
+
+const noArk: ArkCheck = async () => {
+  throw new Error("arkCheck ne devait pas être appelé")
+}
+
+describe("normalizeValidation", () => {
+  it("une chaîne devient un schéma ArkType", () => {
+    expect(normalizeValidation("number < 4")).toEqual({ schema: "number < 4" })
+  })
+
+  it("un objet est laissé tel quel", () => {
+    const rule = { min: 0, max: 10 }
+    expect(normalizeValidation(rule)).toBe(rule)
+  })
+
+  it("undefined → undefined", () => {
+    expect(normalizeValidation(undefined)).toBeUndefined()
+  })
+})
+
+describe("checkValidation — expression directe (« number < 4 »)", () => {
+  it("transmet l'expression à ArkType et remonte son message", async () => {
+    expect(await checkValidation("number < 4", 3, fakeArk)).toBeNull()
+    expect(await checkValidation("number < 4", 4, fakeArk)).toBe("must be < 4")
+  })
+
+  it("`message` surcharge le message d'ArkType", async () => {
+    const rule = { schema: "number < 4", message: "Trop grand" }
+    expect(await checkValidation(rule, 9, fakeArk)).toBe("Trop grand")
+  })
+
+  it("une valeur vide passe (comme la forme objet)", async () => {
+    expect(await checkValidation("number < 4", null, noArk)).toBeNull()
+    expect(await checkValidation("number < 4", "", noArk)).toBeNull()
+  })
+
+  it("`required` refuse le vide **avant** d'appeler ArkType", async () => {
+    expect(await checkValidation({ required: true, schema: "number < 4" }, null, noArk)).toBe(
+      "Required",
+    )
+  })
+})
+
+describe("checkValidation — règle objet", () => {
+  it("sans règle → null", async () => {
+    expect(await checkValidation(undefined, 42, noArk)).toBeNull()
+  })
+
+  it("required + message", async () => {
+    expect(await checkValidation({ required: true }, "", noArk)).toBe("Required")
+    expect(await checkValidation({ required: true, message: "Obligatoire" }, [], noArk)).toBe(
+      "Obligatoire",
+    )
+  })
+
+  it("list : une valeur (mode simple)", async () => {
+    const rule = { list: ["a", "b"] }
+    expect(await checkValidation(rule, "a", noArk)).toBeNull()
+    expect(await checkValidation(rule, "z", noArk)).toBe("Not in the allowed list")
+  })
+
+  it("list : chaque valeur (multiselect)", async () => {
+    const rule = { list: [1, 2, 3] }
+    expect(await checkValidation(rule, [1, 3], noArk)).toBeNull()
+    expect(await checkValidation(rule, [1, 9], noArk)).toBe("Not in the allowed list")
+  })
+
+  it("list : compare en texte (1 ≡ « 1 »)", async () => {
+    expect(await checkValidation({ list: ["1", "2"] }, 1, noArk)).toBeNull()
+  })
+
+  it("integer / min / max", async () => {
+    expect(await checkValidation({ integer: true }, 2.5, noArk)).toBe("Integer required")
+    expect(await checkValidation({ min: 0 }, -1, noArk)).toBe("Value below minimum (0)")
+    expect(await checkValidation({ max: 100 }, 150, noArk)).toBe("Value above maximum (100)")
+    expect(await checkValidation({ min: 0, max: 100 }, 42, noArk)).toBeNull()
+  })
+
+  it("min/max ne s'appliquent qu'aux nombres", async () => {
+    expect(await checkValidation({ min: 0 }, "abc", noArk)).toBeNull()
+  })
+
+  it("pattern (texte seulement)", async () => {
+    const rule = { pattern: "^\\d{4}$" }
+    expect(await checkValidation(rule, "2026", noArk)).toBeNull()
+    expect(await checkValidation(rule, "26", noArk)).toBe(
+      "Value does not match the required format",
+    )
+    expect(await checkValidation(rule, 2026 as any, noArk)).toBeNull() // non-string : ignoré
+  })
+
+  it("le schéma est évalué en dernier (min échoue avant)", async () => {
+    const rule = { min: 0, schema: "number < 4" }
+    expect(await checkValidation(rule, -1, fakeArk)).toBe("Value below minimum (0)")
+    expect(await checkValidation(rule, 9, fakeArk)).toBe("must be < 4")
+  })
+})

package/lib/spreadsheetValidation.ts

@@ -0,0 +1,102 @@
+// Validation de colonne de QSpreadsheet (`<q-spreadsheet>`).
+//
+// Vit dans `lib/` — et non dans le SFC — pour être **testable sans navigateur** : c'est
+// exactement le code du composant, seul l'accès à ArkType est **injecté** (`ArkCheck`).
+//
+// Deux écritures possibles pour une colonne (ou une plage) :
+//
+//   { name: "score",    validation: { min: 0, max: 100, integer: true } }   // objet
+//   { name: "priority", validation: "number < 4" }                         // expression ArkType
+//
+// Une **chaîne** est une expression ArkType : c'est le raccourci de `{ schema: "…" }`.
+// Les deux formes se combinent (`{ required: true, schema: "number < 4" }`) et `message`
+// surcharge le message de la règle qui échoue.
+
+/** Règles de validation d'une colonne (ou d'une plage de cellules). */
+export interface QSpreadsheetValidation {
+  /** Valeur minimale (types numériques / entiers) */
+  min?: number
+  /** Valeur maximale (types numériques / entiers) */
+  max?: number
+  /** Exige un entier (si présent, valide les entiers) */
+  integer?: boolean
+  /** Expression régulière validée contre le texte */
+  pattern?: string
+  /** Champ obligatoire (vide refusé) */
+  required?: boolean
+  /** Valeurs autorisées (liste) */
+  list?: any[]
+  /** Message d'erreur affiché (sinon message générique) */
+  message?: string
+  /**
+   * Expression **ArkType** — ex. `"number < 4"`,
+   * `"number.integer & number >= 0 & number <= 100"`, `"string.email"`.
+   * Équivalent d'une règle écrite directement en chaîne.
+   */
+  schema?: string
+}
+
+/**
+ * Règle de validation : objet `{ min, max, … }` **ou** expression ArkType écrite
+ * directement (`validation: "number < 4"`).
+ */
+export type QSpreadsheetValidationRule = QSpreadsheetValidation | string
+
+/**
+ * Vérification d'un schéma ArkType, **injectée** par le composant (import dynamique +
+ * mémoïsation + `try/catch`) : renvoie un message d'erreur, ou `null` si la valeur passe.
+ */
+export type ArkCheck = (schema: string, value: unknown) => Promise<string | null>
+
+/** Normalise une règle : une chaîne devient un schéma ArkType (`{ schema }`). */
+export const normalizeValidation = (
+  rule: QSpreadsheetValidationRule | undefined,
+): QSpreadsheetValidation | undefined => (typeof rule === "string" ? { schema: rule } : rule)
+
+/**
+ * Valide une valeur contre une règle. Renvoie le message d'erreur, ou `null`.
+ *
+ * Ordre : `required` → vide toléré → `list` → `integer` → `min` / `max` → `pattern` →
+ * `schema` (ArkType). Une valeur **vide** passe toutes les règles sauf `required`.
+ * En `multiselect` (valeur = tableau), `list` s'applique **à chaque valeur** et un tableau
+ * vide compte comme vide, donc `required` le refuse.
+ */
+export async function checkValidation(
+  rule: QSpreadsheetValidationRule | undefined,
+  value: any,
+  arkCheck: ArkCheck,
+): Promise<string | null> {
+  const v = normalizeValidation(rule)
+  if (!v) return null
+
+  const multi = Array.isArray(value)
+  const blank =
+    value === null || value === undefined || value === "" || (multi && value.length === 0)
+  if (v.required && blank) return v.message ?? "Required"
+  if (blank) return null // champ vide autorisé (sauf required)
+
+  if (v.list) {
+    // Choix multiples : chacune des valeurs doit être dans la liste
+    const values = multi ? value : [value]
+    if (values.some((x) => !v.list!.some((y) => String(y) === String(x))))
+      return v.message ?? "Not in the allowed list"
+  }
+
+  if (v.integer && typeof value === "number" && !Number.isInteger(value))
+    return v.message ?? "Integer required"
+
+  if (typeof value === "number") {
+    if (v.min !== undefined && value < v.min) return v.message ?? `Value below minimum (${v.min})`
+    if (v.max !== undefined && value > v.max) return v.message ?? `Value above maximum (${v.max})`
+  }
+
+  if (v.pattern && typeof value === "string" && !new RegExp(v.pattern).test(value))
+    return v.message ?? "Value does not match the required format"
+
+  if (v.schema) {
+    const e = await arkCheck(v.schema, value)
+    if (e) return v.message ?? e
+  }
+
+  return null
+}

package/lib/themeVars.test.ts

@@ -0,0 +1,42 @@
+// Tests unitaires des variables CSS du thème (`themeVars`) — partagées par
+// QConfigProvider et les providers d'overlays téléportés.
+import { describe, expect, it } from "bun:test"
+import { themeVars } from "./themeVars"
+
+describe("themeVars", () => {
+  it("expose les couleurs en `--token` + `--token-foreground`", () => {
+    const style = themeVars({ colors: { primary: "#1976d2" } })
+    expect(style["--primary"]).toBe("#1976d2")
+    // foreground lisible calculé (clair sur fond sombre)
+    expect(style["--primary-foreground"]).toBe("#ffffff")
+  })
+
+  it("traduit `componentProps.default.radius` en `--q-radius`", () => {
+    expect(themeVars({ componentProps: { default: { radius: "md" } } })["--q-radius"]).toBe("8px")
+  })
+
+  it("ignore un `default.radius` non-échelle (`true` = forme native)", () => {
+    expect(themeVars({ componentProps: { default: { radius: true } } })["--q-radius"]).toBeUndefined()
+  })
+
+  it("pose les `vars` libres, avec ou sans préfixe `--`", () => {
+    const style = themeVars({ vars: { "--q-field-bg": "#eef7ee", "q-field-bg-filled": "red" } })
+    expect(style["--q-field-bg"]).toBe("#eef7ee")
+    expect(style["--q-field-bg-filled"]).toBe("red")
+  })
+
+  it("donne le dernier mot aux `vars` sur les tokens de `colors`", () => {
+    const style = themeVars({ colors: { primary: "#111" }, vars: { "--primary": "#222" } })
+    expect(style["--primary"]).toBe("#222")
+  })
+
+  it("ignore les valeurs vides", () => {
+    const style = themeVars({ colors: { primary: "" }, vars: { "--x": "" } })
+    expect(style["--primary"]).toBeUndefined()
+    expect(style["--x"]).toBeUndefined()
+  })
+
+  it("renvoie un objet vide pour un thème vide", () => {
+    expect(themeVars({})).toEqual({})
+  })
+})

package/lib/themeVars.ts

@@ -1,22 +1,40 @@
-// themeVarsStyle — variables CSS du thème (couleurs + radius) pour les contenus
-// téléportés (dialogs, bottom sheets) qui sortent du div .q-config-provider.
+// themeVars — variables CSS du thème (couleurs, radius global, `vars` libres) pour les
+// contenus téléportés (dialogs, bottom sheets) qui sortent du div .q-config-provider.
 import { computed } from "vue"
 import type { ComputedRef } from "vue"
 import { contrastText } from "./colors"
 import { isRadiusScale, RADIUS_VALUES } from "./useComponentProps"
 import type { QTheme } from "./config"
 
-/** Computed des variables --token / --token-foreground / --q-radius du thème. */
+/**
+ * Variables CSS d'un thème : `--<token>` (+ `--<token>-foreground` calculé) pour
+ * `colors`, `--q-radius` pour `componentProps.default.radius`, puis les `vars` libres
+ * **en dernier** (elles ont le dernier mot). Pur → testable hors navigateur.
+ */
+export function themeVars(theme: QTheme): Record<string, string> {
+  const style: Record<string, string> = {}
+
+  for (const [token, value] of Object.entries(theme.colors ?? {})) {
+    if (!value) continue
+    style[`--${token}`] = value
+    style[`--${token}-foreground`] = contrastText(value)
+  }
+
+  // Arrondi global : hérité par TOUS les composants dont le CSS lit var(--q-radius).
+  // Une prop/override spécifique (`useRadius`) pose son propre --q-radius inline et prime.
+  const global = theme.componentProps?.default?.radius
+  if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
+
+  // Échappatoire : toute variable CSS, avec ou sans préfixe `--`.
+  for (const [name, value] of Object.entries(theme.vars ?? {})) {
+    if (!value) continue
+    style[name.startsWith("--") ? name : `--${name}`] = value
+  }
+
+  return style
+}
+
+/** Computed des variables du thème (cf. `themeVars`). */
 export function themeVarsStyle(theme: ComputedRef<QTheme>): ComputedRef<Record<string, string>> {
-  return computed(() => {
-    const style: Record<string, string> = {}
-    for (const [token, value] of Object.entries(theme.value.colors ?? {})) {
-      if (!value) continue
-      style[`--${token}`] = value
-      style[`--${token}-foreground`] = contrastText(value)
-    }
-    const global = theme.value.componentProps?.default?.radius
-    if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
-    return style
-  })
+  return computed(() => themeVars(theme.value))
 }

package/module.ts

@@ -50,6 +50,17 @@ export default defineNuxtModule<DnaxUiModuleOptions>({
       })
     }
 
+    // Dépendances CJS sans export ESM `default` explicite : esbuild doit les pré-bundler
+    // (interop) sinon, servies brutes, le navigateur échoue sur « does not provide an
+    // export named 'default' ». `leaflet` (lib/mapLeaflet.ts) est dans ce cas ; le code
+    // tolère déjà les deux formes (`default ?? module`), ceci est une ceinture-bretelles
+    // côté hôte. Ne pas pointer une sous-entrée sur `index.ts` (cf. warnings en mémoire).
+    nuxt.hook("vite:extendConfig", (config) => {
+      const optimizeDeps = ((config as any).optimizeDeps ||= {})
+      const include: string[] = (optimizeDeps.include ||= [])
+      if (!include.includes("leaflet")) include.push("leaflet")
+    })
+
     // « Retour » navigateur → ferme l'overlay ouvert (dialog, sheet, sidebar…)
     // addPluginTemplate : le template est compilé dans l'app (où #imports existe),
     // évitant une dépendance `nuxt` dans ce package pour les types du plugin.

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
   "exports": {
     ".": "./index.ts",
-    "./runtime": "./index.ts",
+    "./registry": "./index.ts",
+    "./runtime": "./runtime.ts",
     "./module": "./module.ts",
     "./styles/main.css": "./styles/main.css"
   },
@@ -36,11 +37,11 @@
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.24.0",
     "moment": "^2.30.1",
-    "qrcode": "^1.5.4",
     "shiki": "^3.0.0",
     "swiper": "^14.2.0",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0",
+    "uqr": "^0.1.3",
     "uuid": "^14.0.2",
     "vue-router": "^5.3.0",
     "vue-sonner": "^2.0.9"

package/runtime.ts

@@ -0,0 +1,48 @@
+// runtime.ts — **surface runtime** consommée par les plugins (module Nuxt + plugins de
+// l'app hôte). Elle contient, et rien de plus :
+//   - l'API directive / overlay (`installOverlayBackHandler`, `v-close`, `v-ripple`,
+//     `v-touch-*`, `v-intersection`) ;
+//   - l'API impérative `$q` (composables `usePlugin` / `useDialogPluginComponent`…) ;
+//   - les **providers** de `$q` (dialog, bottom sheet, notify, loading, image preview),
+//     montés au boot par l'app hôte.
+//
+// ⚠️ Ne JAMAIS réexporter `index.ts` ici. Le barrel importe **tous** les composants et,
+// avec eux, leurs dépendances lourdes (echarts, @maptiler/sdk, swiper, shiki, uqr…) : une
+// sous-entrée qui pointe sur `index.ts` les évalue au boot, même si l'app n'utilise aucun
+// de ces composants. C'est tout l'intérêt de ce fichier — voir `.memory/warnings.md`.
+//
+// Pour *résoudre un composant par son nom* (tableaux d'API, docs), importer le barrel
+// `@dnax/ui` — pas cette entrée.
+export {
+  installOverlayBackHandler,
+  registerOverlay,
+  unregisterOverlay,
+  hasOpenOverlays,
+  closeTopmostOverlay,
+  useOverlayBack,
+} from "./lib/overlayBack"
+export type { OverlayHandle } from "./lib/overlayBack"
+export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
+export { vRipple } from "./lib/ripple"
+export { vTouchPan } from "./lib/touchPan"
+export { vTouchHold } from "./lib/touchHold"
+export { vTouchSwipe } from "./lib/touchSwipe"
+export { vTouchRepeat } from "./lib/touchRepeat"
+export { vIntersection } from "./lib/intersection"
+
+// — API impérative `$q` (composables) —
+export {
+  $q,
+  usePlugin,
+  useQ,
+  QPlugin,
+  useDialogPluginComponent,
+  useBottomSheetPluginComponent,
+} from "./lib/q"
+
+// — Providers de `$q` (montés au boot par l'app hôte) —
+export { default as QDialogProvider } from "./components/QDialogProvider.vue"
+export { default as QBottomSheetProvider } from "./components/QBottomSheetProvider.vue"
+export { default as QNotifyProvider } from "./components/QNotifyProvider.vue"
+export { default as QLoadingProvider } from "./components/QLoadingProvider.vue"
+export { default as QImagePreviewProvider } from "./components/QImagePreviewProvider.vue"

package/shims.d.ts

@@ -7,19 +7,13 @@ declare module "*.css?raw" {
 
 // Leaflet ne publie pas de types (ils vivent dans `@types/leaflet`, un paquet séparé) :
 // le moteur `lib/mapLeaflet.ts` le manipule donc en `any`, comme le SDK MapTiler.
+//
+// ⚠️ Ce `default` est une commodité de **typage** : au runtime `leaflet` est un UMD, sans
+// export ESM `default` garanti (selon la pré-bundlisation Vite). C'est pourquoi
+// `lib/mapLeaflet.ts` importe en **dynamique** puis prend `leaflet.default ?? leaflet` —
+// jamais un `import L from "leaflet"` statique (même piège que l'ancien `qrcode`, cf.
+// `.memory/warnings.md`).
 declare module "leaflet" {
   const leaflet: any
   export default leaflet
 }
-
-// Même situation pour `qrcode` (=`@types/qrcode` séparé) : seul `create()` est utilisé
-// (matrice de modules) — le rendu est fait par dnax.ui (`lib/qrcode.ts`).
-declare module "qrcode" {
-  const qrcode: {
-    create: (
-      text: string,
-      options?: { errorCorrectionLevel?: "L" | "M" | "Q" | "H"; version?: number },
-    ) => { modules: { size: number; data: ArrayLike<number> } }
-  }
-  export default qrcode
-}

package/styles/main.css

@@ -400,7 +400,7 @@ html.dark body {
 }
 
 .dark .q-field__control {
-  background-color: var(--muted);
+  background-color: var(--q-field-bg, var(--muted));
   border-color: var(--border);
   color: var(--foreground);
 }
@@ -2021,7 +2021,11 @@ html.dark body {
   gap: 6px;
   min-height: 40px;
   padding: 0 12px;
-  background-color: #fff;
+  /* Fond du champ, partagé par TOUS les champs (QInput, QSelect, QAutocomplete,
+     QDatePicker, QCountryPicker, QInputTag, QInputOtp…). Surchargeable globalement via
+     `--q-field-bg` (héritée par le sous-arbre) — `theme.vars: { "--q-field-bg": "…" }` —
+     ou localement par CSS. La variante `filled` lit `--q-field-bg-filled`. */
+  background-color: var(--q-field-bg, #fff);
   border: 1px solid rgb(0 0 0 / 0.22);
   border-radius: var(--q-radius);
   transition:
@@ -2031,18 +2035,18 @@ html.dark body {
 }
 
 .q-field--outlined .q-field__control {
-  background-color: transparent;
+  background-color: var(--q-field-bg, transparent);
 }
 
 .q-field--filled .q-field__control {
-  background-color: rgb(0 0 0 / 0.05);
+  background-color: var(--q-field-bg-filled, rgb(0 0 0 / 0.05));
   border-color: transparent;
   border-bottom: 1px solid rgb(0 0 0 / 0.3);
   border-radius: var(--q-radius) var(--q-radius) 0 0;
 }
 
 .q-field--borderless .q-field__control {
-  background-color: transparent;
+  background-color: var(--q-field-bg, transparent);
   border-color: transparent;
 }