@dnax/ui 0.0.48 → 0.0.49

package/lib/color.ts

@@ -1,5 +1,6 @@
 // Normalisation des couleurs CSS → une forme que **zrender** (le moteur d'ECharts) sait
 // relire : `#rrggbb`, `rgb(a,b,c)`, `rgba(a,b,c,a)`, `hsl(h,s%,l%)` ou un nom CSS.
+// (`<q-map>` s'en sert aussi : la couleur d'un marqueur part dans un attribut SVG.)
 //
 // Pourquoi c'est vital : au survol, ECharts **recalcule** la couleur de l'élément —
 //   `emphasisStyle.fill = liftColor(fromFill)`   (`echarts/lib/util/states.js`)
@@ -16,6 +17,18 @@
 /** Sentinelles : une couleur invalide laisse `fillStyle` inchangé */
 const SENTINELS = ["#010203", "#040506"]
 
+/** Canvas 2D de 1×1 px, mémoïsé : le support de `normalizeCssColor` (créé au premier
+ *  besoin, `null` hors navigateur). Un seul canvas pour toute l'application. */
+let probe: CanvasRenderingContext2D | null | undefined
+export function probeContext(): CanvasRenderingContext2D | null {
+  if (probe !== undefined) return probe
+  if (typeof document === "undefined") return (probe = null)
+  const canvas = document.createElement("canvas")
+  canvas.width = canvas.height = 1
+  probe = canvas.getContext("2d")
+  return probe
+}
+
 /** Octets sRGB → CSS relisible par zrender : `#rrggbb` si opaque, sinon `rgba(…)` */
 export function rgbaFromBytes(r: number, g: number, b: number, a: number): string {
   const clamp = (n: number) => Math.max(0, Math.min(255, Math.round(n)))

package/lib/currency.test.ts

@@ -0,0 +1,193 @@
+// Tests unitaires de la saisie/formatage des montants (`<q-input-currency>`).
+import { describe, expect, it } from "bun:test"
+import {
+  applyLimits,
+  caretForDigitCount,
+  currencyFormat,
+  digitCountBefore,
+  draftValue,
+  formatAmount,
+  formatDraft,
+  localeOf,
+  parseAmount,
+  roundTo,
+  stepValue,
+} from "./currency"
+
+/** Neutralise les différentes espaces de groupement (fine insécable selon ICU) */
+const plain = (text: string) => text.replace(/[\s\u00a0\u202f]/g, " ")
+
+describe("localeOf", () => {
+  it("déduit la locale de la langue du design system", () => {
+    expect(localeOf("fr")).toBe("fr-FR")
+    expect(localeOf("en")).toBe("en-US")
+  })
+
+  it("garde une locale complète et retombe sur en-US", () => {
+    expect(localeOf("de-DE")).toBe("de-DE")
+    expect(localeOf()).toBe("en-US")
+  })
+})
+
+describe("currencyFormat", () => {
+  it("lit séparateurs et devise de la locale français", () => {
+    const format = currencyFormat({ locale: "fr-FR", currency: "EUR" })
+
+    expect(format.decimal).toBe(",")
+    expect(format.symbol).toBe("€")
+    expect(format.position).toBe("after")
+    expect(format.spaced).toBe(true)
+    expect(format.decimals).toBe(2)
+    expect(/[\s\u00a0\u202f]/.test(format.group)).toBe(true)
+  })
+
+  it("lit les conventions anglo-saxonnes", () => {
+    const format = currencyFormat({ locale: "en-US", currency: "USD" })
+
+    expect(format.decimal).toBe(".")
+    expect(format.group).toBe(",")
+    expect(format.symbol).toBe("$")
+    expect(format.position).toBe("before")
+    expect(format.spaced).toBe(false)
+  })
+
+  it("prend les décimales de la devise, surchargeables", () => {
+    expect(currencyFormat({ locale: "fr-FR", currency: "JPY" }).decimals).toBe(0)
+    expect(currencyFormat({ locale: "fr-FR", currency: "EUR", decimals: 3 }).decimals).toBe(3)
+    expect(currencyFormat({ locale: "fr-FR" }).decimals).toBe(2)
+  })
+
+  it("suit le mode d'affichage demandé", () => {
+    expect(currencyFormat({ locale: "fr-FR", currency: "EUR", currencyDisplay: "code" }).symbol).toBe("EUR")
+    expect(
+      plain(currencyFormat({ locale: "fr-FR", currency: "EUR", currencyDisplay: "name" }).symbol),
+    ).toContain("euro")
+  })
+
+  it("reste utilisable sans devise et ne jette pas sur une devise inconnue", () => {
+    const bare = currencyFormat({ locale: "fr-FR" })
+    expect(bare.symbol).toBe("")
+    expect(bare.position).toBe("after")
+
+    // Un code inconnu n'est pas une erreur pour `Intl` : il ressort tel quel
+    const bogus = currencyFormat({ locale: "fr-FR", currency: "ZZZ" })
+    expect(bogus.currency).toBe("ZZZ")
+    expect(bogus.symbol).toBe("ZZZ")
+  })
+})
+
+describe("parseAmount", () => {
+  const fr = { locale: "fr-FR", currency: "EUR", allowNegative: true } as const
+  const en = { locale: "en-US", currency: "USD", allowNegative: true } as const
+
+  it("garde les chiffres et le séparateur de la locale", () => {
+    expect(parseAmount("1 234,56", fr)).toEqual({
+      negative: false,
+      integer: "1234",
+      fraction: "56",
+      hasSeparator: true,
+    })
+  })
+
+  it("borne le nombre de décimales", () => {
+    expect(parseAmount("12,3456", fr).fraction).toBe("34")
+    expect(parseAmount("12,3456", { ...fr, decimals: 3 }).fraction).toBe("345")
+  })
+
+  it("accepte l'autre séparateur quand il est sans ambiguïté", () => {
+    // Collage d'une valeur anglo-saxonne, saisie au point en français
+    expect(draftValue(parseAmount("$1,234.56", en))).toBe(1234.56)
+    expect(draftValue(parseAmount("1.234,56 €", fr))).toBe(1234.56)
+    expect(draftValue(parseAmount("1.5", fr))).toBe(1.5)
+    expect(draftValue(parseAmount("12,50", en))).toBe(12.5)
+    // Trop de chiffres après le point en français → c'est un séparateur de groupe
+    expect(parseAmount("1.234", fr).integer).toBe("1234")
+    expect(parseAmount("1.234", fr).hasSeparator).toBe(false)
+  })
+
+  it("gère le signe selon allowNegative", () => {
+    expect(parseAmount("-12,5", fr).negative).toBe(true)
+    expect(parseAmount("-12,5", { ...fr, allowNegative: false }).negative).toBe(false)
+    expect(parseAmount("12-5", fr).integer).toBe("125")
+  })
+
+  it("ignore tout le reste (lettres, devise, espaces)", () => {
+    expect(parseAmount("12 abc 345", fr).integer).toBe("12345")
+    expect(parseAmount("", fr)).toEqual({ negative: false, integer: "", fraction: "", hasSeparator: false })
+  })
+})
+
+describe("draftValue / formatDraft / formatAmount", () => {
+  const fr = { locale: "fr-FR", currency: "EUR" } as const
+  const en = { locale: "en-US", currency: "USD" } as const
+
+  it("rend null tant que rien n'est saisi", () => {
+    expect(draftValue(parseAmount("", fr))).toBeNull()
+    expect(draftValue(parseAmount("-", fr))).toBeNull()
+    expect(draftValue(parseAmount(",", fr))).toBeNull()
+    expect(draftValue(parseAmount("0", fr))).toBe(0)
+    expect(draftValue(parseAmount("0,05", fr))).toBe(0.05)
+  })
+
+  it("groupe les milliers et conserve le séparateur final", () => {
+    expect(plain(formatDraft(parseAmount("1234", fr), fr))).toBe("1 234")
+    expect(plain(formatDraft(parseAmount("1234,", fr), fr))).toBe("1 234,")
+    expect(plain(formatDraft(parseAmount("1234,5", fr), fr))).toBe("1 234,5")
+    expect(formatDraft(parseAmount("1234567.89", en), en)).toBe("1,234,567.89")
+  })
+
+  it("formate un montant avec ses décimales complètes", () => {
+    expect(plain(formatAmount(1234.5, fr))).toBe("1 234,50")
+    expect(formatAmount(1234.5, en)).toBe("1,234.50")
+    expect(plain(formatAmount(-12.5, fr))).toBe("-12,50")
+    expect(plain(formatAmount(1234.5, { locale: "fr-FR", currency: "JPY" }))).toBe("1 235")
+    expect(formatAmount(null, fr)).toBe("")
+  })
+})
+
+describe("roundTo / applyLimits / stepValue", () => {
+  const fr = { locale: "fr-FR", currency: "EUR" } as const
+
+  it("arrondit sans erreur binaire", () => {
+    expect(roundTo(1.005, 2)).toBe(1.01)
+    expect(roundTo(12.345, 2)).toBe(12.35)
+    expect(roundTo(2.675, 2)).toBe(2.68)
+    expect(roundTo(1234.5, 0)).toBe(1235)
+  })
+
+  it("applique l'arrondi de la devise puis les bornes", () => {
+    expect(applyLimits(1.005, fr)).toBe(1.01)
+    expect(applyLimits(12.5, { ...fr, max: 10 })).toBe(10)
+    expect(applyLimits(-3, { ...fr, min: 0 })).toBe(0)
+    expect(applyLimits(null, fr)).toBeNull()
+  })
+
+  it("avance par pas, en bornant", () => {
+    expect(stepValue(10, 1, 1, false, fr)).toBe(11)
+    expect(stepValue(10, 0.5, -1, false, fr)).toBe(9.5)
+    expect(stepValue(null, 1, 1, false, fr)).toBe(1)
+    expect(stepValue(10, 1, 1, true, fr)).toBe(20)
+    expect(stepValue(10, 1, 1, false, { ...fr, max: 10 })).toBe(10)
+  })
+})
+
+describe("curseur", () => {
+  it("compte les chiffres avant une position", () => {
+    expect(digitCountBefore("1 234,56", 3)).toBe(2)
+    expect(digitCountBefore("1 234,56", 0)).toBe(0)
+    expect(digitCountBefore("1 234,56", 99)).toBe(6)
+  })
+
+  it("replace le curseur après n chiffres, même après reformatage", () => {
+    expect(caretForDigitCount("1 234", 2)).toBe(3)
+    expect(caretForDigitCount("12 345", 6)).toBe(6)
+    expect(caretForDigitCount("1 234", 0)).toBe(0)
+    expect(caretForDigitCount("1 234", 99)).toBe(5)
+  })
+
+  it("survit à l'ajout d'un séparateur de groupe", () => {
+    // « 1234 » + « 5 » tapé après 4 chiffres → « 12 345 », curseur après le 5e chiffre
+    const digits = digitCountBefore("1234", 4) + 1
+    expect(caretForDigitCount(plain("12 345"), digits)).toBe(6)
+  })
+})

package/lib/currency.ts

@@ -0,0 +1,301 @@
+// currency — saisie et formatage d'un montant en devise : analyse de la frappe (chiffres,
+// séparateurs, signe), formatage avec groupement et décimales locales, position du symbole
+// (`Intl.NumberFormat.formatToParts`), bornes et arrondi.
+//
+// Pur (aucun DOM) → testable hors navigateur, comme `lib/layout.ts` ou `lib/pagePadding.ts`.
+// La saisie est conservée sous forme de **brouillon canonique** (`AmountDraft`) : signe,
+// chiffres entiers, chiffres décimaux — indépendant de la locale, ce qui rend le parsing,
+// l'émission et la restitution du curseur triviaux.
+
+/** Ce qui peut partir dans un champ montant : vide, signe, chiffres, séparateurs. */
+export interface AmountDraft {
+  /** Montant négatif (signe « - » tapé) */
+  negative: boolean
+  /** Chiffres de la partie entière ("" si la saisie commence par le séparateur) */
+  integer: string
+  /** Chiffres de la partie décimale */
+  fraction: string
+  /** Un séparateur décimal a été tapé (pour conserver « 12, » à l'écran) */
+  hasSeparator: boolean
+}
+
+export interface CurrencyOptions {
+  /** Locale BCP-47 (ex. `"fr-FR"`) — sert au groupement, au séparateur et au symbole */
+  locale?: string
+  /** Code ISO 4217 (ex. `"EUR"`) — absent : montant « nu », sans devise */
+  currency?: string
+  /** Décimales forcées (défaut : celles de la devise, ex. 2 pour EUR, 0 pour JPY) */
+  decimals?: number
+  /** Le champ accepte un montant négatif */
+  allowNegative?: boolean
+  /** Affichage de la devise : symbole (défaut), code ISO ou nom localisé */
+  currencyDisplay?: "symbol" | "code" | "name"
+  /** Borne basse (appliquée au relâchement, pas pendant la frappe) */
+  min?: number
+  /** Borne haute (idem) */
+  max?: number
+}
+
+/** Locale par défaut du design system (langue de QConfigProvider : "en" | "fr"). */
+export function localeOf(lang?: string): string {
+  if (!lang) return "en-US"
+  if (lang === "fr") return "fr-FR"
+  if (lang === "en") return "en-US"
+  return lang.includes("-") ? lang : lang
+}
+
+/** Séparateurs (décimal et de groupement) et nombre de décimales d'une devise. */
+export interface CurrencyFormat {
+  /** Locale effectivement utilisée */
+  locale: string
+  /** Code ISO, ou "" pour un montant nu */
+  currency: string
+  /** Décimales retenues */
+  decimals: number
+  /** Séparateur décimal de la locale ("." ou ",") */
+  decimal: string
+  /** Espace (ou espace insécable) de groupement — "" si la locale n'en met pas */
+  group: string
+  /** Texte de la devise ("€", "EUR", "euro"…), "" si `currency` est absent */
+  symbol: string
+  /** La devise se place-t-elle avant (en-US) ou après (fr-FR) le montant ? */
+  position: "before" | "after"
+  /** Une espace sépare-t-elle la devise du montant ? ("12,50 €" oui, "$12.50" non) */
+  spaced: boolean
+}
+
+/** Bornes numériques d'une devise via `Intl` (JPY → 0, EUR → 2…) */
+const currencyDecimals = (locale: string, currency: string): number => {
+  try {
+    const resolved = new Intl.NumberFormat(locale, { style: "currency", currency }).resolvedOptions()
+    return resolved.maximumFractionDigits ?? 2
+  } catch {
+    return 2
+  }
+}
+
+/**
+ * Réglages de formatage d'un champ montant : séparateurs et devise de la locale, décimale
+ * retenue et place du symbole. `formatToParts` donne la position **réelle** du symbole
+ * ("1 234,56 €" en français, "$1,234.56" en anglais) — inutile de la coder en dur.
+ */
+export function currencyFormat(options: CurrencyOptions = {}): CurrencyFormat {
+  const locale = options.locale || localeOf()
+  const currency = (options.currency || "").trim().toUpperCase()
+  const display = options.currencyDisplay ?? "symbol"
+
+  const decimals =
+    typeof options.decimals === "number" && options.decimals >= 0
+      ? Math.floor(options.decimals)
+      : currency
+        ? currencyDecimals(locale, currency)
+        : 2
+
+  let decimal = "."
+  let group = ","
+  let symbol = ""
+  let position: "before" | "after" = "after"
+  let spaced = true
+
+  try {
+    const bare = new Intl.NumberFormat(locale)
+    bare.formatToParts(1234.5).forEach((part) => {
+      if (part.type === "decimal") decimal = part.value
+      if (part.type === "group") group = part.value
+    })
+
+    if (currency) {
+      const parts = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        currencyDisplay: display,
+        maximumFractionDigits: decimals,
+        minimumFractionDigits: decimals,
+      }).formatToParts(1234.5)
+      const index = parts.findIndex((part) => part.type === "currency")
+      symbol = parts[index]?.value ?? currency
+      position = index <= 1 ? "before" : "after"
+      const neighbour = parts[position === "before" ? index + 1 : index - 1]
+      spaced = !neighbour || neighbour.type === "literal" ? /\s|\u00a0/.test(neighbour?.value ?? "") : false
+    }
+  } catch {
+    /* locale ou devise inconnue : on garde les valeurs par défaut */
+  }
+
+  return { locale, currency, decimals, decimal, group, symbol, position, spaced }
+}
+
+/** Ajoute les séparateurs de groupes au chiffre (via `Intl`, sans décimales ni devise). */
+function groupDigits(integer: string, format: CurrencyFormat): string {
+  if (!integer) return ""
+  const asNumber = Number(integer)
+  if (!Number.isFinite(asNumber)) return integer
+  try {
+    return new Intl.NumberFormat(format.locale, { maximumFractionDigits: 0 }).format(asNumber)
+  } catch {
+    return integer
+  }
+}
+
+/**
+ * Analyse une frappe en brouillon : chiffres, un séparateur décimal et (si autorisé) un
+ * signe. Le séparateur décimal est celui de la locale ; l'autre caractère (« . » ou « , »)
+ * est accepté **quand c'est le dernier séparateur et qu'il est suivi d'au plus `decimals`
+ * chiffres** — coller `"$1,234.56"` en en-US comme `"1.234,56 €"` en fr-FR donne donc le
+ * bon montant, et un « . » isolé en fr-FR reste une décimale (← tolérance d'usage).
+ */
+export function parseAmount(text: string, options: CurrencyOptions = {}): AmountDraft {
+  const format = currencyFormat(options)
+  const source = String(text ?? "")
+
+  // Emplacement du séparateur décimal : celui de la locale, sinon l'autre caractère
+  // uniquement s'il est le dernier séparateur et suivi d'assez peu de chiffres.
+  const other = format.decimal === "." ? "," : "."
+  let separatorIndex = -1
+  const localeIndex = source.lastIndexOf(format.decimal)
+  const otherIndex = source.lastIndexOf(other)
+  if (localeIndex >= 0) separatorIndex = localeIndex
+  if (localeIndex < 0 && otherIndex >= 0 && format.decimals > 0) {
+    const tail = source.slice(otherIndex + 1).replace(/[^0-9]/g, "")
+    if (!source.slice(otherIndex + 1).includes(format.decimal) && tail.length <= format.decimals) {
+      separatorIndex = otherIndex
+    }
+  }
+
+  let negative = false
+  let integer = ""
+  let fraction = ""
+  const hasSeparator = separatorIndex >= 0
+
+  for (let i = 0; i < source.length; i++) {
+    const char = source[i]!
+
+    if (char === "-" || char === "\u2212") {
+      // Un signe ne compte que sur une partie entière vide (les suivants sont ignorés)
+      if (options.allowNegative && !integer && !fraction) negative = !negative
+      continue
+    }
+
+    if (!/[0-9]/.test(char)) continue // séparateurs de groupe, devise, espaces… ignorés
+
+    if (i > separatorIndex && hasSeparator) {
+      if (fraction.length < format.decimals) fraction += char
+    } else if (integer.length < 15) {
+      integer += char
+    }
+  }
+
+  return { negative: negative && options.allowNegative === true, integer, fraction, hasSeparator }
+}
+
+/** Montant d'un brouillon : `null` quand rien n'est saisi (`""`, `"-"`, `","`). */
+export function draftValue(draft: AmountDraft): number | null {
+  if (!draft.integer && !draft.fraction) return null
+  const value = Number(`${draft.integer || "0"}.${draft.fraction || "0"}`)
+  if (!Number.isFinite(value)) return null
+  return draft.negative ? -value : value
+}
+
+/**
+ * Arrondit au nombre de décimales de la devise (1,005 € → 1,01 €). Passer par la notation
+ * exponentielle évite l'erreur binaire de `value * 10**n` : `Number("1.005e2")` vaut
+ * exactement 100,5, donc l'arrondi est correct là où `Math.round(1.005 * 100)` donne 100.
+ */
+export function roundTo(value: number, decimals: number): number {
+  const places = Math.max(0, Math.floor(decimals))
+  if (!Number.isFinite(value)) return value
+  const shifted = Number(`${value}e${places}`)
+  if (!Number.isFinite(shifted)) return value
+  return Number(`${Math.round(shifted)}e-${places}`)
+}
+
+/** Applique l'arrondi de la devise puis les bornes `min` / `max` (relâchement du champ). */
+export function applyLimits(
+  value: number | null,
+  options: CurrencyOptions = {},
+): number | null {
+  if (value === null) return null
+  const format = currencyFormat(options)
+  let next = roundTo(value, format.decimals)
+  if (typeof options.min === "number" && next < options.min) next = options.min
+  if (typeof options.max === "number" && next > options.max) next = options.max
+  return roundTo(next, format.decimals)
+}
+
+/**
+ * Affichage d'une frappe : groupement de la partie entière, séparateur local, décimales
+ * frappées — le séparateur final est conservé (« 12, » reste « 12, »). Le signe n'apparaît
+ * que sur un montant non vide (« - » seul n'affiche rien d'utile, on le garde quand même).
+ */
+export function formatDraft(draft: AmountDraft, options: CurrencyOptions = {}): string {
+  const format = currencyFormat(options)
+  const grouped = groupDigits(draft.integer, format)
+  const sign = draft.negative ? "-" : ""
+  if (!draft.hasSeparator) return `${sign}${grouped}`
+  return `${sign}${grouped}${format.decimal}${draft.fraction}`
+}
+
+/** Affichage d'un montant (état non focalisé) : décimales toujours complètes. */
+export function formatAmount(value: number | null, options: CurrencyOptions = {}): string {
+  if (value === null || !Number.isFinite(value)) return ""
+  return formatDraft(draftFromValue(value, options), options)
+}
+
+/**
+ * Brouillon correspondant à un montant : c'est ce qu'un champ affiche quand il prend la
+ * main (au montage, à la sortie du champ, ou quand le modèle change de l'extérieur).
+ * Décimales complétées et arrondies selon la devise.
+ */
+export function draftFromValue(value: number | null, options: CurrencyOptions = {}): AmountDraft {
+  if (value === null || !Number.isFinite(value)) {
+    return { negative: false, integer: "", fraction: "", hasSeparator: false }
+  }
+
+  const format = currencyFormat(options)
+  const [integer = "0", fraction = ""] = roundTo(Math.abs(value), format.decimals)
+    .toFixed(format.decimals)
+    .split(".")
+
+  return {
+    negative: value < 0,
+    integer,
+    fraction: format.decimals > 0 ? (fraction || "").padEnd(format.decimals, "0") : "",
+    hasSeparator: format.decimals > 0,
+  }
+}
+
+/** Nombre de chiffres contenus dans `text` avant l'index `caret`. */
+export function digitCountBefore(text: string, caret: number): number {
+  let count = 0
+  for (let i = 0; i < Math.min(caret, text.length); i++) if (/[0-9]/.test(text[i]!)) count++
+  return count
+}
+
+/**
+ * Index du curseur dans `text` placé après `digits` chiffres — la façon de ne pas perdre
+ * l'utilisateur quand on reformate la valeur à chaque frappe.
+ */
+export function caretForDigitCount(text: string, digits: number): number {
+  if (digits <= 0) return 0
+  let count = 0
+  for (let i = 0; i < text.length; i++) {
+    if (/[0-9]/.test(text[i]!)) {
+      count++
+      if (count === digits) return i + 1
+    }
+  }
+  return text.length
+}
+
+/** Montant enrichi d'un pas (`step`, ×10 avec `coarse`) puis borné. */
+export function stepValue(
+  value: number | null,
+  step: number,
+  direction: 1 | -1,
+  coarse = false,
+  options: CurrencyOptions = {},
+): number | null {
+  const increment = (Number.isFinite(step) && step > 0 ? step : 1) * (coarse ? 10 : 1)
+  const base = value ?? 0
+  return applyLimits(roundTo(base + direction * increment, currencyFormat(options).decimals), options)
+}

package/lib/fixedLayout.ts

@@ -3,10 +3,14 @@
 //
 // Problème : les barres fixed sortent du flux (position: fixed) → le contenu de
 // q-page passe dessous. Ce module :
-//  - q-page (mode "page") reçoit un padding-top = hauteur cumulée des barres
-//    fixed HAUT qui le précèdent ET un padding-bottom = hauteur cumulée des
-//    barres fixed BAS qui le suivent (le contenu n'est masqué ni en haut ni en
-//    bas au scroll)
+//  - q-page et q-page-container (mode "page") publient la hauteur cumulée des barres
+//    fixed HAUT qui les précèdent et des barres fixed BAS qui les suivent dans les
+//    variables CSS `--q-page-offset` / `--q-page-offset-bottom` (le contenu n'est masqué
+//    ni en haut ni en bas au scroll). Le padding lui-même est composé dans
+//    `styles/main.css`, avec la safe-area et le padding utilisateur de la prop `padding`
+//    (`--q-page-padding`) — d'où des variables et non un style inline : deux sources de
+//    padding ne peuvent pas s'écraser mutuellement. Le conteneur ne s'en sert que s'il
+//    ne contient pas de q-page (règle `:has()`), pour ne jamais additionner les deux.
 //  - chaque barre fixed suivante (mode "bar") s'empile sous la précédente (top)
 //  - chaque barre fixed basse (mode "bar-bottom") s'empile au-dessus de la
 //    suivante (bottom)
@@ -79,9 +83,10 @@ function fixedBarsInRoot(el: HTMLElement): HTMLElement[] {
 
 /**
  * Applique l'offset lié aux barres fixed qui entourent `el` :
- * - mode "page"       : padding-top = barres HAUT précédentes,
- *                       padding-bottom = barres BAS suivantes
- *                       (+ variables --q-page-offset / --q-page-offset-bottom)
+ * - mode "page"       : variables `--q-page-offset` (barres HAUT précédentes) et
+ *                       `--q-page-offset-bottom` (barres BAS suivantes) — le padding
+ *                       est composé par les règles `.q-page` / `.q-page-container`
+ *                       (`styles/main.css`)
  * - mode "bar"        : top = hauteur cumulée (empilement des barres fixed HAUT)
  * - mode "bar-bottom" : bottom = hauteur cumulée (empilement des footers fixed
  *                       depuis le bas de l'écran)
@@ -113,8 +118,6 @@ export function useFixedBarOffset(
       const bottom = fixedBarsHeightAfter(node)
       node.style.setProperty("--q-page-offset", top ? `${top}px` : "0px")
       node.style.setProperty("--q-page-offset-bottom", bottom ? `${bottom}px` : "0px")
-      node.style.paddingTop = top ? `${top}px` : ""
-      node.style.paddingBottom = bottom ? `${bottom}px` : ""
     }
     else if (mode === "bar") {
       const h = fixedBarsHeightBefore(node)
@@ -132,8 +135,6 @@ export function useFixedBarOffset(
     if (mode === "page") {
       node.style.removeProperty("--q-page-offset")
       node.style.removeProperty("--q-page-offset-bottom")
-      node.style.paddingTop = ""
-      node.style.paddingBottom = ""
     }
     else if (mode === "bar") {
       node.style.top = ""

package/lib/icons.ts

@@ -37,32 +37,15 @@ export const icons = {
   search: "lucide:search",
   star: "lucide:star",
   x: "lucide:x",
-  // — éditeur de texte (QTiptap) —
+  // — clavier numérique —
+  backspace: "lucide:delete",
+  // — formatage / édition de cellule (tableur) —
   undo2: "lucide:undo-2",
   redo2: "lucide:redo-2",
-  pilcrow: "lucide:pilcrow",
-  heading1: "lucide:heading-1",
-  heading2: "lucide:heading-2",
-  heading3: "lucide:heading-3",
   bold: "lucide:bold",
   italic: "lucide:italic",
-  underline: "lucide:underline",
-  strikethrough: "lucide:strikethrough",
-  code: "lucide:code",
-  link: "lucide:link",
-  unlink: "lucide:unlink",
-  list: "lucide:list",
-  listOrdered: "lucide:list-ordered",
-  quote: "lucide:quote",
-  codeXml: "lucide:code-xml",
-  removeFormatting: "lucide:remove-formatting",
-  palette: "lucide:palette",
   eraser: "lucide:eraser",
   alignLeft: "lucide:align-left",
-  alignCenter: "lucide:align-center",
-  alignRight: "lucide:align-right",
-  listChecks: "lucide:list-checks",
-  table: "lucide:table",
   // — tableur (QSpreadsheet) —
   trash2: "lucide:trash-2",
   clipboardPaste: "lucide:clipboard-paste",