@dnax/ui 0.0.44 → 0.0.46

package/lib/layout.test.ts

@@ -0,0 +1,125 @@
+// Tests unitaires de l'analyse du prop `view` de QLayout (matrice 3×3).
+import { describe, expect, it } from "bun:test"
+import { DEFAULT_LAYOUT_VIEW, parseView } from "./layout"
+
+describe("parseView", () => {
+  it("applique la vue par défaut sans argument", () => {
+    const v = parseView()
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.view).toBe("hHh LpR fFf")
+    expect(v.error).toBeUndefined()
+    // Header et footer pleine largeur, drawers dans la rangée du milieu
+    expect(v.gridTemplateAreas).toBe('"h h h" "l p r" "f f f"')
+  })
+
+  it("déduit l'aire de chaque zone", () => {
+    const v = parseView("hHh LpR fFf")
+
+    expect(v.zones.header.area).toBe("h")
+    expect(v.zones.footer.area).toBe("f")
+    expect(v.zones.left.area).toBe("l")
+    expect(v.zones.right.area).toBe("r")
+    expect(v.zones.page.area).toBe("p")
+    expect(v.zones.page.cells).toEqual([[1, 1]])
+  })
+
+  it("lit la casse comme « reste en place » (majuscule) ou « défile » (minuscule)", () => {
+    const fixed = parseView("hHh LpR fFf")
+    expect(fixed.zones.header.fixed).toBe(true)
+    expect(fixed.zones.footer.fixed).toBe(true)
+    expect(fixed.zones.left.fixed).toBe(true)
+    expect(fixed.zones.right.fixed).toBe(true)
+
+    const flowing = parseView("hhh lpR fff")
+    expect(flowing.zones.header.fixed).toBe(false)
+    expect(flowing.zones.footer.fixed).toBe(false)
+    expect(flowing.zones.left.fixed).toBe(false)
+    expect(flowing.zones.right.fixed).toBe(true) // une seule majuscule suffit
+    expect(flowing.gridTemplateAreas).toBe('"h h h" "l p r" "f f f"')
+  })
+
+  it("fait démarrer le drawer gauche au-dessus du header (lhh)", () => {
+    const v = parseView("lhh LpR fff")
+
+    expect(v.gridTemplateAreas).toBe('"l h h" "l p r" "f f f"')
+    expect(v.zones.left.cells).toEqual([
+      [0, 0],
+      [1, 0],
+    ])
+    expect(v.zones.header.cells).toEqual([
+      [0, 1],
+      [0, 2],
+    ])
+  })
+
+  it("fait descendre le drawer droit jusqu'au footer (ffR)", () => {
+    const v = parseView("hhr lpR ffR")
+
+    expect(v.gridTemplateAreas).toBe('"h h r" "l p r" "f f r"')
+    expect(v.zones.right.cells).toEqual([
+      [0, 2],
+      [1, 2],
+      [2, 2],
+    ])
+    expect(v.zones.right.fixed).toBe(true)
+  })
+
+  it("accepte les cellules vides (.)", () => {
+    const v = parseView("hHh .p. fFf")
+
+    expect(v.gridTemplateAreas).toBe('"h h h" ". p ." "f f f"')
+    expect(v.zones.left.cells).toEqual([])
+    expect(v.zones.left.area).toBeUndefined()
+    expect(v.zones.right.cells).toEqual([])
+  })
+
+  it("marque la page « en place » si son p est majuscule", () => {
+    expect(parseView("hhh LPR fff").zones.page.fixed).toBe(true)
+    expect(parseView("hhh LpR fff").zones.page.fixed).toBe(false)
+  })
+
+  it("rejette une chaîne de mauvaise longueur", () => {
+    const v = parseView("hHh lpR")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain("3 groupes de 3 caractères")
+  })
+
+  it("rejette une lettre inconnue", () => {
+    const v = parseView("hHh xpR fFf")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain('lettre "x" inconnue')
+  })
+
+  it("rejette une zone hors de sa rangée", () => {
+    const v = parseView("fhf LpR fFf")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain("rangée 1")
+  })
+
+  it("exige une page dans la rangée du milieu", () => {
+    const v = parseView("hHh lrr fFf")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain('au moins un "p"')
+  })
+
+  it("rejette une zone non rectangulaire", () => {
+    // `l` en (0,0) et (2,0) sans (1,0) : grid-template-areas serait invalide
+    const v = parseView("lhr plr lfr")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain('zone "left"')
+  })
+
+  it("retombe toujours sur une vue utilisable", () => {
+    const v = parseView("n'importe quoi")
+
+    expect(v.error).toBeDefined()
+    expect(v.zones.page.cells).toEqual([[1, 1]])
+    expect(v.gridTemplateAreas).toBe('"h h h" "l p r" "f f f"')
+  })
+})

package/lib/layout.ts

@@ -0,0 +1,181 @@
+// Analyse du prop `view` de QLayout — matrice 3×3 de la fenêtre (modèle Quasar).
+//
+// `view` = 11 caractères : 3 (rangée header) + espace + 3 (rangée milieu) + espace +
+// 3 (rangée footer). Chaque caractère dit quelle zone occupe cette cellule :
+//   l = drawer gauche, h = header, r = drawer droit, f = footer, p = page (centre),
+//   . = cellule vide.
+// La casse compte : **majuscule = la zone reste en place** au scroll (Quasar :
+// « position fixe »), **minuscule = elle défile avec la page**. Une zone qui occupe
+// plusieurs cellules les occupe forcément en rectangle (exigence de
+// `grid-template-areas`) ; `hHh lpR fFf` donne donc un header pleine largeur, un
+// drawer gauche sous le header et un drawer droit pleine hauteur.
+//
+// Aucune dépendance au DOM : le SFC pose `grid-template-areas` sur `.q-layout`, et
+// chaque enfant (q-header, q-footer, q-sidebar) lit sa cellule dans le contexte
+// injecté — d'où l'export de `qLayoutKey`.
+//
+// Modèle retenu par dnax.ui (« A ») : **scroll du document + `position: sticky`**,
+// pas le scroll interne de Quasar. Conséquence sur les lettres : la casse se voit
+// sur le header (`H` reste collé / `h` défile) et sur les drawers (`L`/`R` collés et
+// hauts de 100dvh / `l`/`r` dans le flux), alors que `F`/`f` sont **équivalents** (la
+// rangée footer est la dernière : le footer tombe en fin de page dans les deux cas) et
+// que `P` est sans effet (la page EST ce qui défile).
+
+import type { InjectionKey, Ref } from "vue"
+
+/** Zone de la matrice (une par composant concerné) */
+export type LayoutZone = "left" | "header" | "right" | "page" | "footer"
+
+/** Vue par défaut : header et footer pleine largeur, les deux drawers restent en place */
+export const DEFAULT_LAYOUT_VIEW = "hHh LpR fFf"
+
+/** Lettres acceptées par rangée — la matrice n'a de sens qu'avec ces zones-là */
+const ROW_LETTERS: readonly (readonly string[])[] = [
+  ["l", "h", "r"], // rangée header : drawer gauche, header, drawer droit
+  ["l", "p", "r"], // rangée milieu : drawer gauche, page, drawer droit
+  ["l", "f", "r"], // rangée footer : drawer gauche, footer, drawer droit
+]
+
+/** Lettre → zone */
+const LETTER_ZONE: Record<string, LayoutZone> = {
+  l: "left",
+  h: "header",
+  r: "right",
+  p: "page",
+  f: "footer",
+}
+
+/** Cellule vide (aucune zone) */
+const EMPTY_CELL = "."
+
+export interface LayoutZonePlacement {
+  /** Nom d'aire CSS à passer à `grid-area` — `undefined` si la zone n'occupe aucune cellule */
+  area?: string
+  /** La zone reste en place au scroll (au moins une de ses lettres en majuscule) */
+  fixed: boolean
+  /** Cellules occupées, `[ligne, colonne]` en base 0 */
+  cells: Array<[number, number]>
+}
+
+export interface LayoutView {
+  /** Chaîne retenue — la vue par défaut quand la chaîne fournie est invalide */
+  view: string
+  /** `grid-template-areas` prêt à poser sur `.q-layout` */
+  gridTemplateAreas: string
+  /** Placement de chaque zone */
+  zones: Record<LayoutZone, LayoutZonePlacement>
+  /** Raison du rejet de la chaîne fournie (`undefined` si elle était valide) */
+  error?: string
+}
+
+/** Contexte fourni par QLayout à ses enfants (q-header, q-footer, q-sidebar) */
+export interface QLayoutContext {
+  /** Placement de chaque zone, déduit de `view` (suit les changements de `view`) */
+  zones: Readonly<Ref<Record<LayoutZone, LayoutZonePlacement>>>
+  /** QLayout est utilisé comme conteneur (hauteur explicite requise) */
+  container: Readonly<Ref<boolean>>
+}
+
+/** Clé d'injection du contexte QLayout — lue par les composants enfants */
+export const qLayoutKey: InjectionKey<QLayoutContext> = Symbol("q-layout")
+
+const emptyZones = (): Record<LayoutZone, LayoutZonePlacement> => ({
+  left: { fixed: false, cells: [] },
+  header: { fixed: false, cells: [] },
+  right: { fixed: false, cells: [] },
+  page: { fixed: false, cells: [] },
+  footer: { fixed: false, cells: [] },
+})
+
+/** Les 3 rangées de 3 lettres d'une vue (chaîne déjà validée) */
+const rowsOf = (view: string) => view.trim().split(/\s+/) as [string, string, string]
+
+/**
+ * Construit le résultat à partir d'une vue **valide** : cellules de chaque zone,
+ * drapeau « reste en place », aires CSS.
+ */
+function build(view: string): LayoutView {
+  const rows = rowsOf(view)
+  const zones = emptyZones()
+  const areas: string[][] = []
+
+  rows.forEach((row, r) => {
+    const cells = [...row]
+    areas.push(cells.map((char) => (char === EMPTY_CELL ? EMPTY_CELL : char.toLowerCase())))
+    cells.forEach((char, c) => {
+      if (char === EMPTY_CELL) return
+      const zone = LETTER_ZONE[char.toLowerCase()]!
+      zones[zone].cells.push([r, c])
+      // Casse : au moins une majuscule → la zone reste en place
+      if (char === char.toUpperCase()) zones[zone].fixed = true
+    })
+  })
+
+  for (const zone of Object.keys(zones) as LayoutZone[]) {
+    if (zones[zone].cells.length) {
+      const [r, c] = zones[zone].cells[0]!
+      zones[zone].area = areas[r]![c]!
+    }
+  }
+
+  return {
+    view: rows.join(" "),
+    gridTemplateAreas: areas.map((row) => `"${row.join(" ")}"`).join(" "),
+    zones,
+  }
+}
+
+/** Vérifie qu'une zone occupe bien un rectangle plein (sinon `grid-template-areas` est invalide) */
+function isRectangle(cells: Array<[number, number]>): boolean {
+  const rows = cells.map(([r]) => r)
+  const cols = cells.map(([, c]) => c)
+  const height = Math.max(...rows) - Math.min(...rows) + 1
+  const width = Math.max(...cols) - Math.min(...cols) + 1
+  return new Set(rows).size === height && new Set(cols).size === width && height * width === cells.length
+}
+
+/** Vue par défaut + la raison du rejet, pour rester utilisable en production */
+const fallback = (error: string): LayoutView => ({ ...build(DEFAULT_LAYOUT_VIEW), error })
+
+/**
+ * Analyse le prop `view`. Toute chaîne invalide est **rejetée** (jamais de crash) :
+ * la vue par défaut s'applique et `error` porte la raison (affichée en dev par le SFC).
+ */
+export function parseView(view?: string): LayoutView {
+  if (!view) return build(DEFAULT_LAYOUT_VIEW)
+
+  const groups = view.trim().split(/\s+/)
+  if (groups.length !== 3 || groups.some((group) => group.length !== 3)) {
+    return fallback(
+      `view "${view}" : attendu 3 groupes de 3 caractères (ex. "${DEFAULT_LAYOUT_VIEW}")`,
+    )
+  }
+
+  const rows = groups as [string, string, string]
+  for (let r = 0; r < 3; r++) {
+    for (const char of rows[r]!) {
+      if (char === EMPTY_CELL) continue
+      const letter = char.toLowerCase()
+      if (!LETTER_ZONE[letter]) {
+        return fallback(`view "${view}" : lettre "${char}" inconnue (attendu l, h, r, f, p ou .)`)
+      }
+      if (!ROW_LETTERS[r]!.includes(letter)) {
+        return fallback(
+          `view "${view}" : "${char}" n'a pas sa place dans la rangée ${r + 1} (attendu ${ROW_LETTERS[r]!.join(", ")} ou .)`,
+        )
+      }
+    }
+  }
+
+  const parsed = build(rows.join(" "))
+  if (!parsed.zones.page.cells.length) {
+    return fallback(`view "${view}" : la rangée du milieu doit contenir au moins un "p" (page)`)
+  }
+  for (const zone of Object.keys(parsed.zones) as LayoutZone[]) {
+    const cells = parsed.zones[zone].cells
+    if (cells.length > 1 && !isRectangle(cells)) {
+      return fallback(`view "${view}" : la zone "${zone}" n'occupe pas un rectangle plein`)
+    }
+  }
+  return parsed
+}

package/lib/useComponentProps.test.ts

@@ -0,0 +1,36 @@
+// Tests unitaires de la résolution du radius (échelle + style CSS).
+import { describe, expect, it } from "bun:test"
+import { RADIUS_VALUES, radiusStyle, radiusValue } from "./useComponentProps"
+
+describe("radiusValue", () => {
+  it("traduit chaque barreau de l'échelle", () => {
+    expect(radiusValue("none")).toBe("0px")
+    expect(radiusValue("xs")).toBe("2px")
+    expect(radiusValue("sm")).toBe("4px")
+    expect(radiusValue("md")).toBe("8px")
+    expect(radiusValue("lg")).toBe("16px")
+  })
+
+  it("ne traduit ni la forme native (true) ni l'absence de valeur", () => {
+    expect(radiusValue(true)).toBeUndefined()
+    expect(radiusValue(false)).toBeUndefined()
+    expect(radiusValue(undefined)).toBeUndefined()
+  })
+
+  it("reste aligné sur RADIUS_VALUES", () => {
+    for (const [scale, value] of Object.entries(RADIUS_VALUES)) {
+      expect(radiusValue(scale as keyof typeof RADIUS_VALUES)).toBe(value)
+    }
+  })
+})
+
+describe("radiusStyle", () => {
+  it("pose --q-radius pour une valeur d'échelle", () => {
+    expect(radiusStyle("lg")).toEqual({ "--q-radius": "16px" })
+  })
+
+  it("ne pose rien pour true (forme native) ou undefined", () => {
+    expect(radiusStyle(true)).toBeUndefined()
+    expect(radiusStyle(undefined)).toBeUndefined()
+  })
+})

package/lib/useComponentProps.ts

@@ -55,7 +55,13 @@ export function useRadius(
   return computed(() => toValue(own) ?? (defaults.value.radius as RadiusProp | undefined))
 }
 
+/** Valeur CSS concrète d'une échelle de radius (`undefined` si `true` (forme native) ou absent) */
+export function radiusValue(radius: RadiusProp | undefined): string | undefined {
+  return isRadiusScale(radius) ? RADIUS_VALUES[radius] : undefined
+}
+
 /** Style `--q-radius` à poser sur la racine du composant pour une valeur d'échelle. */
 export function radiusStyle(radius: RadiusProp | undefined): Record<string, string> | undefined {
-  return isRadiusScale(radius) ? { "--q-radius": RADIUS_VALUES[radius] } : undefined
+  const value = radiusValue(radius)
+  return value ? { "--q-radius": value } : undefined
 }

package/module.ts

@@ -20,15 +20,6 @@ export interface DnaxUiModuleOptions {
   overlayBack?: boolean
 }
 
-/** Custom elements du framework HTML Video.js v10 (@videojs/html) — balises non-Vue */
-const VIDEOJS_CUSTOM_ELEMENTS = [
-  "video-player",
-  "video-skin",
-  "youtube-video",
-  "hlsjs-video",
-  "mux-video",
-]
-
 export default defineNuxtModule<DnaxUiModuleOptions>({
   meta: {
     name: "@dnax/ui",
@@ -43,15 +34,6 @@ export default defineNuxtModule<DnaxUiModuleOptions>({
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
-    // Les balises <video-player>/<youtube-video>… sont des custom elements @videojs/html,
-    // pas des composants Vue → les exclure de la résolution (évite le warn
-    // « Failed to resolve component »).
-    nuxt.options.vue.compilerOptions ??= {}
-    const existing = nuxt.options.vue.compilerOptions.isCustomElement
-    nuxt.options.vue.compilerOptions.isCustomElement = (tag: string) =>
-      VIDEOJS_CUSTOM_ELEMENTS.includes(tag) ||
-      (typeof existing === "function" ? existing(tag) : false)
-
     if (options.css) {
       const cssPath = resolve("./styles/main.css")
       if (!nuxt.options.css.includes(cssPath)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -40,7 +40,6 @@
     "@tiptap/starter-kit": "^3.31.3",
     "@tiptap/suggestion": "^3.31.3",
     "@tiptap/vue-3": "^3.31.3",
-    "@videojs/html": "^10.0.0-beta.32",
     "@vueuse/core": "^14.4.0",
     "arktype": "^2.2.3",
     "class-variance-authority": "^0.7.1",

package/scripts/generate-exports.ts

@@ -54,6 +54,15 @@ export {
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
 export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
+export { placePopover } from "./lib/datePicker"
+export type {
+  PlacePopoverOptions,
+  PopoverAnchor,
+  PopoverPlacement,
+  PopoverViewport,
+} from "./lib/datePicker"
+export { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "./lib/layout"
+export type { LayoutView, LayoutZone, LayoutZonePlacement, QLayoutContext } from "./lib/layout"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
 export { chartToECharts, channelValue, pickFromEvent, tableModel, textValue } from "./lib/chart"

package/styles/main.css

@@ -32,18 +32,22 @@ body {
 /* ===== Échelle des z-index =====
    Règle : un menu superposé ne doit JAMAIS passer sous un overlay. Les menus
    téléportés dans <body> sont donc au-dessus de la couche modale.
-     1000        popups en flux (`position: absolute` dans leur champ : select,
-                 autocomplete, nav-menu…) → pas concernés par les overlays
+     1000        popups en flux (`position: absolute` dans leur champ : autocomplete,
+                 nav-menu…) → pas concernés par les overlays
      1999/2000   sidebar offcanvas + backdrop
      3000        overlays modaux : dialog, bottom sheet, action sheet,
                  date-picker, country-picker, select sheet
      3200        menus téléportés dans <body> : panneau QBtnActions, menu
                  contextuel / filtre / suggestions du tableur → --q-z-menu
+     3500        popup inline de QSelect (téléporté dans <body> : il doit passer
+                 au-dessus d'un overlay quand le champ est dans un dialog/sheet)
+                 → --q-z-popup
      4000        palettes tiptap · 7000 loading global · 9999 tooltip ·
                  10000 image preview
-   Surchargez --q-z-menu si votre application a un overlay plus haut que 3200. */
+   Surchargez --q-z-menu ou --q-z-popup si votre application a un overlay plus haut. */
 :root {
   --q-z-menu: 3200;
+  --q-z-popup: 3500;
 }
 
 /* ===== Safe-area insets (encoche & barre d'accueil) =====
@@ -52,8 +56,13 @@ body {
 .q-app {
   display: flex;
   flex-direction: column; /* header en haut, contenu au milieu, footer en bas */
-  min-height: 100vh;
-  min-height: 100dvh; /* barres de navigateur dynamiques (mobile) */
+  width: 100%; /* prend toute la largeur disponible */
+  /* Équivalent PUR CSS de `flex h-screen w-full` (les classes sont aussi sur la
+     div) : le conteneur fait exactement un écran. Ce qui dépasse doit donc défiler
+     dans un enfant (`min-height: 0` + `overflow: auto`), sinon le document scrolle
+     sous les barres. */
+  height: 100vh; /* fallback vieux navigateurs */
+  height: 100dvh; /* barres de navigateur dynamiques (mobile) */
 }
 
 /* Safe-area intégrées aux règles de base (pas de conflit de cascade) */
@@ -79,6 +88,16 @@ body {
   z-index: 100;
 }
 
+/* sticky : opt-in (prop `sticky`, ou automatique dans un QLayout quand la lettre du
+   `view` est en majuscule) — la barre reste visible, le contenu défile dessous.
+   Dans un QLayout elle est close dans sa cellule : elle ne peut pas passer au-dessus
+   d'une colonne voisine (drawer, rangée du milieu). */
+.q-header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
 /* Barre d'action basse */
 /* Safe-area intégrées à la règle de base .q-footer (plus bas) */
 
@@ -105,6 +124,49 @@ body {
   padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
 }
 
+/* ===== QLayout — matrice 3×3 pilotée par `view` =====
+   Colonnes : drawer gauche / contenu / drawer droit. Rangées : header / milieu /
+   footer. `grid-template-areas` vient du prop `view` (variable CSS posée par le
+   composant). `minmax(0, 1fr)` sur la colonne du milieu = l'équivalent de
+   `min-width: 0` : un enfant large (tableau à colonnes nombreuses) ne pousse plus
+   les drawers hors de l'écran. */
+.q-layout {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas: var(--q-layout-areas);
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+/* Tout enfant direct sans cellule explicite (le contenu) va dans la cellule « page ».
+   q-header / q-footer / q-sidebar posent la leur en style inline — l'ordre
+   d'écriture dans le template est donc libre. */
+.q-layout > * {
+  grid-area: var(--q-layout-page-area, p);
+}
+
+/* Mode conteneur (comme Quasar) : le layout gère son propre cadre — une hauteur
+   explicite est requise et le conteneur devient la zone de scroll (les barres
+   sticky s'y accrochent, pas à la fenêtre). */
+.q-layout--container {
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Drawer sticky dans un QLayout : accroché sous les barres qui le surplombent
+   seulement (les variables `--q-sidebar-sticky-*` sont posées par QSidebar d'après
+   les cellules de sa zone), sur la hauteur visible entre les deux barres — il ne
+   glisse donc jamais sous le header. */
+.q-layout > .q-sidebar--static.q-sidebar--sticky {
+  top: var(--q-sidebar-sticky-top, var(--q-layout-header-h, 0px));
+  height: calc(
+    var(--q-layout-viewport-h, 100dvh) -
+      var(--q-sidebar-sticky-top, var(--q-layout-header-h, 0px)) -
+      var(--q-sidebar-sticky-bottom, var(--q-layout-footer-h, 0px))
+  );
+}
+
 .q-toolbar {
   position: relative;
   display: flex;
@@ -258,7 +320,10 @@ body {
     --muted: #1c2128;
     --border: rgb(255 255 255 / 0.12);
     --q-table-border: rgb(255 255 255 / 0.12);
-    --q-table-header-bg: rgb(255 255 255 / 0.04);
+    /* Opaque (4 % de blanc composé sur la surface) : un en-tête sticky ne doit pas
+       laisser voir les lignes qui défilent dessous. Fallback avant color-mix. */
+    --q-table-header-bg: #1f242b;
+    --q-table-header-bg: color-mix(in srgb, #fff 4%, var(--card, #161b22));
     --q-table-hover-bg: rgb(255 255 255 / 0.06);
     --q-sidebar-border: rgb(255 255 255 / 0.12);
     --q-translucent-bg: #0f1115;
@@ -352,7 +417,9 @@ html.dark body {
 }
 .dark .q-data-grid {
   --q-data-grid-border: rgb(255 255 255 / 0.12);
-  --q-data-grid-header-bg: rgb(255 255 255 / 0.04);
+  /* Opaque (cf. QTable : en-tête sticky sur surface composée) */
+  --q-data-grid-header-bg: #1f242b;
+  --q-data-grid-header-bg: color-mix(in srgb, #fff 4%, var(--card, #161b22));
 }
 
 /* Footer de table (pagination) en dark : range + sélecteur lignes/page */
@@ -653,6 +720,15 @@ html.dark body {
   z-index: 100;
 }
 
+/* sticky (prop `sticky`, ou automatique dans un QLayout avec une lettre majuscule) :
+   la rangée footer étant la dernière, elle tombe en fin de page dans les deux cas —
+   `F` ne change donc rien de visible, contrairement à `H` sur le header. */
+.q-footer--sticky {
+  position: sticky;
+  bottom: 0;
+  z-index: 100;
+}
+
 /* no-padding : horizontal collé aux bords — safe-area conservées */
 .q-footer--no-padding {
   padding: 4px 0;
@@ -3142,7 +3218,10 @@ html.dark body {
 /* ===== QTable ===== */
 .q-table {
   --q-table-border: rgb(0 0 0 / 0.1);
-  --q-table-header-bg: rgb(0 0 0 / 0.03);
+  /* Opaque : 3 % de noir **composé sur la surface** (un en-tête sticky laissait
+     sinon voir les lignes qui défilent dessous). Fallback avant color-mix. */
+  --q-table-header-bg: #f7f7f7;
+  --q-table-header-bg: color-mix(in srgb, #000 3%, #fff);
   --q-table-hover-bg: rgb(0 0 0 / 0.04);
 
   position: relative;
@@ -3166,7 +3245,8 @@ html.dark body {
 
 .q-table--dark {
   --q-table-border: rgb(255 255 255 / 0.15);
-  --q-table-header-bg: rgb(255 255 255 / 0.06);
+  --q-table-header-bg: #2b2b2b;
+  --q-table-header-bg: color-mix(in srgb, #fff 6%, #1d1d1d);
   --q-table-hover-bg: rgb(255 255 255 / 0.06);
   background-color: #1d1d1d;
   color: #fff;
@@ -4768,12 +4848,16 @@ a.q-breadcrumbs__el:hover {
   transform: rotate(180deg);
 }
 
+/* Popup inline : téléporté dans <body> et en `position: fixed` — en `position:
+   absolute` il restait **rogné** par le premier ancêtre en `overflow: hidden` (un
+   q-card, par exemple), et un `z-index` ne franchit JAMAIS un clip. Les coordonnées
+   fenêtre (top/bottom/left/width) sont posées en inline par `positionPopup()`, qui
+   le repositionne aussi au scroll et au resize. */
 .q-select__popup {
-  position: absolute;
-  top: calc(100% + 8px);
+  position: fixed;
+  top: 0;
   left: 0;
-  right: 0;
-  z-index: 1000;
+  z-index: var(--q-z-popup, 3500);
   max-height: 240px;
   overflow-y: auto;
   padding: 4px 0;
@@ -8581,7 +8665,9 @@ a.q-breadcrumbs__el:hover {
 /* ===== QDataGrid — grille type tableur (formules, édition, sélection clavier) ===== */
 .q-data-grid {
   --q-data-grid-border: rgb(0 0 0 / 0.1);
-  --q-data-grid-header-bg: rgb(0 0 0 / 0.03);
+  /* Opaque (cf. QTable : en-tête sticky sur surface composée) */
+  --q-data-grid-header-bg: #f7f7f7;
+  --q-data-grid-header-bg: color-mix(in srgb, #000 3%, #fff);
 
   position: relative;
   display: flex;
@@ -8600,7 +8686,8 @@ a.q-breadcrumbs__el:hover {
 }
 .q-data-grid--dark {
   --q-data-grid-border: rgb(255 255 255 / 0.15);
-  --q-data-grid-header-bg: rgb(255 255 255 / 0.06);
+  --q-data-grid-header-bg: #2b2b2b;
+  --q-data-grid-header-bg: color-mix(in srgb, #fff 6%, #1d1d1d);
   background: #1d1d1d;
   color: #fff;
 }
@@ -9516,11 +9603,13 @@ a.q-breadcrumbs__el:hover {
   width: 14px;
   height: 14px;
 }
-.q-tiptap__font-size .q-select__popup {
-  width: 100px;
+/* Popup inline téléporté dans <body> : impossible de le styler depuis le parent — on
+   passe par la classe du popup (`inline-options.class`) ; la largeur, elle, vient de
+   `inline-options.width` (l'inline posé par positionPopup() prime sur ce CSS). */
+.q-tiptap__font-size-popup {
   min-width: 100px;
 }
-.q-tiptap__font-size .q-select__option-label {
+.q-tiptap__font-size-popup .q-select__option-label {
   font-size: 12px;
 }
 
@@ -9710,7 +9799,9 @@ a.q-breadcrumbs__el:hover {
 /* ===== QSpreadsheet (tableur type Excel) ===== */
 .q-spreadsheet {
   --q-spreadsheet-border: rgb(0 0 0 / 0.1);
-  --q-spreadsheet-header-bg: rgb(0 0 0 / 0.03);
+  /* Opaque (cf. QTable : entêtes sticky des colonnes/lignes) */
+  --q-spreadsheet-header-bg: #f7f7f7;
+  --q-spreadsheet-header-bg: color-mix(in srgb, #000 3%, #fff);
   --q-spreadsheet-row-alt: rgb(0 0 0 / 0.015);
   --q-spreadsheet-range: rgb(25 118 210 / 0.1);
   --q-spreadsheet-range-brd: var(--primary, #1976d2);
@@ -9739,7 +9830,8 @@ a.q-breadcrumbs__el:hover {
 .q-spreadsheet--dark,
 .dark .q-spreadsheet {
   --q-spreadsheet-border: rgb(255 255 255 / 0.12);
-  --q-spreadsheet-header-bg: rgb(255 255 255 / 0.05);
+  --q-spreadsheet-header-bg: #22262d;
+  --q-spreadsheet-header-bg: color-mix(in srgb, #fff 5%, var(--card, #1d1d1d));
   --q-spreadsheet-row-alt: rgb(255 255 255 / 0.02);
   background: var(--card, #1d1d1d);
   color: var(--foreground, #ececef);