@dnax/ui 0.0.69 → 0.0.71

package/components/QChart.vue

@@ -11,12 +11,15 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
-import { chartToECharts, COLOR_TOKENS } from "../lib/chart"
+import { chartToECharts, COLOR_TOKENS, tokenCss } from "../lib/chart"
 import { normalizeCssColor } from "../lib/color"
 import { legendPickOf, nextLegendPick, pickFromEvent, sameSelection, tableCsv, tableModel } from "../lib/chart"
+import { cellBarGeometry, cellVisualOf, sparklineGeometry } from "../lib/chartTable"
+import { formatValue } from "../lib/chartFormat"
 import { useConfigLang } from "../lib/useComponentProps"
 import type {
   QChartAxis,
+  QChartCellVisual,
   QChartColumn,
   QChartLegend,
   QChartMark,
@@ -295,8 +298,11 @@ const columnStyle = (column: QChartColumn) => ({
 })
 
 /** Tri suivant : `asc` → `desc` → aucun (l'ordre d'origine revient) */
+const isSortable = (column: QChartColumn) =>
+  column.sortable ?? cellVisualOf(column.cell)?.type !== "sparkline"
+
 const toggleSort = (column: QChartColumn) => {
-  if (column.sortable === false) return
+  if (!isSortable(column)) return
   const base =
     sortState.value ??
     (tableMark.value?.sortBy
@@ -315,8 +321,8 @@ const sortIndicator = (column: QChartColumn) => {
 }
 
 const sortTitle = (column: QChartColumn) => {
-  if (column.sortable === false) return ""
-  return sortIndicator(column) === "\u2191" ? t("sortDescending") : t("sortAscending")
+  if (!isSortable(column)) return ""
+  return sortIndicator(column) === "↑" ? t("sortDescending") : t("sortAscending")
 }
 
 const goPage = (delta: number) => {
@@ -376,12 +382,102 @@ const isSelected = (row: any) => {
   return key !== undefined && !!selected && typeof selected === "object" && String(selected.name) === String(key)
 }
 
-/** Valeur affichée d'une cellule : `format` de la colonne sinon la valeur telle quelle */
-const cellValue = (column: QChartColumn, row: any) => {
-  const value = row?.[column.field]
-  const formatted = column.format?.(value, row)
-  if (formatted !== undefined) return formatted
-  return value === null || value === undefined ? "" : String(value)
+// ─── Micro-visualisations de cellule (barres / delta / heat / sparkline) ──────
+
+/** Cellule prête à rendre (le composant ne calcule plus rien dans le template) */
+interface RenderedCell {
+  kind: "text" | "bar" | "delta" | "heat" | "sparkline"
+  text: string
+  bar?: { style: Record<string, string | number> }
+  textStyle?: Record<string, string>
+  arrow?: string
+  spark?: { path: string; areaPath: string; marker?: { x: number; y: number } }
+  lineColor: string
+  pointColor: string
+  area: boolean
+}
+
+/** Couleur CSS d'un token (`primary` → `var(--primary, #1976d2)`) ou d'une couleur libre */
+const cssColor = (value: string | undefined, fallback: string) => tokenCss(value, fallback)
+
+/** Rend une cellule : texte + (optionnellement) une barre, un delta ou une sparkline.
+ *
+ *  `override` sert à la ligne de **totaux** : on lui donne la valeur brute agrégée et le
+ *  texte déjà formaté par `tableModel`. */
+const renderCell = (
+  column: QChartColumn,
+  row: any,
+  override?: { value?: any; text?: string },
+): RenderedCell => {
+  const visual: QChartCellVisual | undefined = cellVisualOf(column.cell)
+  const rawValue = override ? override.value : row?.[column.field]
+  const numeric = typeof rawValue === "number" && Number.isFinite(rawValue)
+  /** Un `delta` affiche la valeur **absolue** : la flèche porte le signe */
+  const shown = visual?.type === "delta" && visual.absolute !== false && numeric ? Math.abs(rawValue) : rawValue
+  const text =
+    override?.text ??
+    column.format?.(shown, row) ??
+    (visual?.format ? formatValue(shown, visual.format, { locale: locale.value }) : undefined) ??
+    // Sparkline : le texte de repli (accessibilité, CSV) est la **dernière valeur**
+    (Array.isArray(shown)
+      ? shown.length
+        ? String(shown[shown.length - 1])
+        : ""
+      : shown === null || shown === undefined
+        ? ""
+        : String(shown))
+
+  if (visual?.type === "sparkline") {
+    const series = override
+      ? undefined
+      : visual.values
+        ? visual.values(row)
+        : visual.field
+          ? row?.[visual.field]
+          : undefined
+    const spark = sparklineGeometry(Array.isArray(series) ? series : [], { point: visual.point ?? "last" })
+    return {
+      kind: "sparkline",
+      text,
+      spark,
+      lineColor: cssColor(visual.color, "var(--muted-foreground, #71717a)"),
+      pointColor: cssColor(visual.pointColor ?? visual.negativeColor, "var(--negative, #c10015)"),
+      area: visual.area === true,
+    }
+  }
+
+  if (visual) {
+    const scale = table.value?.cellScales?.[column.field]
+    const bar = numeric && scale ? cellBarGeometry(rawValue, visual, scale) : undefined
+    const positive = cssColor(
+      visual.color,
+      visual.type === "delta" ? "var(--primary, #1976d2)" : "var(--muted-foreground, #71717a)",
+    )
+    const negative = cssColor(visual.negativeColor, "var(--negative, #c10015)")
+    if (bar) {
+      const color = bar.sign < 0 ? negative : positive
+      const opacity = visual.opacity ?? (visual.type === "delta" ? 0.85 : visual.type === "heat" ? bar.ratio : 0.18)
+      const showArrow = (visual.arrow ?? visual.type === "delta") && bar.sign !== 0
+      return {
+        kind: visual.type,
+        text,
+        bar: { style: { left: `${bar.left}%`, width: `${bar.width}%`, background: color, opacity } },
+        ...(visual.type === "delta" && bar.sign !== 0 ? { textStyle: { color } } : {}),
+        ...(showArrow ? { arrow: bar.sign > 0 ? "▲" : "▼" } : {}),
+        lineColor: color,
+        pointColor: negative,
+        area: false,
+      }
+    }
+  }
+
+  return {
+    kind: "text",
+    text,
+    lineColor: "currentColor",
+    pointColor: "var(--negative, #c10015)",
+    area: false,
+  }
 }
 
 /** Sélection émise pour un élément — avec la même règle de re-clic que le reste */
@@ -610,7 +706,7 @@ defineExpose({
             :key="column.field"
             :style="columnStyle(column)"
             :title="sortTitle(column)"
-            :class="{ 'is-sortable': column.sortable !== false }"
+            :class="{ 'is-sortable': isSortable(column) }"
             :aria-sort="sortIndicator(column) === '↑' ? 'ascending' : sortIndicator(column) === '↓' ? 'descending' : 'none'"
             @click="toggleSort(column)"
           >
@@ -628,14 +724,76 @@ defineExpose({
           @click="pickRow(row, index)"
         >
           <td v-for="column in table.columns" :key="column.field" :style="columnStyle(column)">
-            {{ cellValue(column, row) }}
+            <div
+              v-for="cell in [renderCell(column, row)]"
+              :key="column.field"
+              class="q-chart__cell"
+              :class="{
+                'q-chart__cell--num': column.align === 'end',
+                'q-chart__cell--delta': cell.kind === 'delta',
+                'q-chart__cell--sparkline': cell.kind === 'sparkline',
+              }"
+              :role="cell.kind === 'sparkline' ? 'img' : undefined"
+              :aria-label="cell.kind === 'sparkline' ? cell.text : undefined"
+              :title="cell.kind === 'sparkline' ? cell.text : undefined"
+            >
+              <span v-if="cell.bar" class="q-chart__cell-bar" :style="cell.bar.style" aria-hidden="true" />
+              <svg
+                v-if="cell.kind === 'sparkline' && cell.spark"
+                class="q-chart__spark"
+                viewBox="0 0 100 24"
+                preserveAspectRatio="none"
+                aria-hidden="true"
+              >
+                <path v-if="cell.area" :d="cell.spark.areaPath" :fill="cell.lineColor" opacity="0.15" />
+                <path
+                  :d="cell.spark.path"
+                  fill="none"
+                  :stroke="cell.lineColor"
+                  stroke-width="1.5"
+                  vector-effect="non-scaling-stroke"
+                />
+                <circle
+                  v-if="cell.spark.marker"
+                  :cx="cell.spark.marker.x"
+                  :cy="cell.spark.marker.y"
+                  r="2.4"
+                  :fill="cell.pointColor"
+                />
+              </svg>
+              <span
+                v-if="cell.kind !== 'sparkline' || !cell.spark"
+                class="q-chart__cell-value"
+                :style="cell.textStyle"
+              >
+                {{ cell.text }}<span v-if="cell.arrow" class="q-chart__cell-arrow">{{ cell.arrow }}</span>
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
       <tfoot v-if="table.totals">
         <tr>
           <td v-for="column in table.columns" :key="column.field" :style="columnStyle(column)">
-            {{ table.totals[column.field] ?? "" }}
+            <div
+              v-for="cell in [
+                renderCell(column, undefined, {
+                  value: table.totalValues?.[column.field],
+                  text: table.totals?.[column.field] ?? '',
+                }),
+              ]"
+              :key="column.field"
+              class="q-chart__cell"
+              :class="{
+                'q-chart__cell--num': column.align === 'end',
+                'q-chart__cell--delta': cell.kind === 'delta',
+              }"
+            >
+              <span v-if="cell.bar" class="q-chart__cell-bar" :style="cell.bar.style" aria-hidden="true" />
+              <span class="q-chart__cell-value" :style="cell.textStyle">
+                {{ cell.text }}<span v-if="cell.arrow" class="q-chart__cell-arrow">{{ cell.arrow }}</span>
+              </span>
+            </div>
           </td>
         </tr>
       </tfoot>
@@ -748,6 +906,63 @@ defineExpose({
   background: var(--accent, #f4f4f5);
 }
 
+/* ─── Micro-visualisations de cellule (barres, delta, sparkline) ─── */
+.q-chart__cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 20px;
+}
+
+.q-chart__cell--num {
+  justify-content: flex-end;
+}
+
+.q-chart__cell-bar {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  left: 0;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.q-chart__cell-value {
+  position: relative;
+  z-index: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* `delta` : axe médian, les barres divergent de part et d'autre */
+.q-chart__cell--delta::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 50%;
+  width: 1px;
+  background: var(--border, #e4e4e7);
+}
+
+.q-chart__cell-arrow {
+  margin-left: 4px;
+  font-size: 9px;
+  vertical-align: 1px;
+}
+
+.q-chart__cell--sparkline {
+  justify-content: stretch;
+}
+
+.q-chart__spark {
+  display: block;
+  width: 100%;
+  height: 22px;
+  min-width: 46px;
+  overflow: visible;
+}
+
 .q-chart__empty {
   margin: 8px 10px;
   font-size: 12px;

package/components/QSpreadsheet.vue

@@ -4,7 +4,8 @@
 // édition en place (Entrée / F2 / double-clic / frappe directe),
 // lignes & colonnes (ajouter / insérer / supprimer),
 // tri, copier/coller, undo/redo, et cellules typées
-// (texte, nombre, entier, booléen, date, datetime, select / multiselect avec badges colorés).
+// texte, nombre, entier, booléen, date, datetime, **time (heure)**, select / multiselect avec
+// badges colorés).
 // 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`).
@@ -44,6 +45,7 @@ export type QSpreadsheetCellType =
   | "boolean"
   | "date"
   | "datetime"
+  | "time"
   | "select"
   | "multiselect"
 
@@ -185,6 +187,9 @@ import {
   isBlankValue,
   ISO_DATE,
   isoAddDays,
+  normalizeTime,
+  secondsToTime,
+  timeToSeconds,
   shiftFormulaRefs,
   functionQueryAt,
   rankSuggestions,
@@ -877,6 +882,8 @@ const cellText = (row: number, column: string): string => {
   let out: any = ev === null || ev === undefined ? "" : ev
   // Apostrophe littérale (paste values) : affichée sans le préfixe
   if (typeof out === "string" && out.startsWith("'")) out = out.slice(1)
+  // Heure : toujours `HH:MM` à l'affichage (données importées ou anciennes comprises)
+  if (col?.type === "time" && typeof out === "string") out = normalizeTime(out) ?? out
   if (col?.format && out !== "") out = col.format(out, state.value[row] ?? {})
   if (out === null || out === undefined || out === "") return ""
   return String(out)
@@ -988,6 +995,8 @@ const editorInputType = computed(() => {
       return "date"
     case "datetime":
       return "datetime-local"
+    case "time":
+      return "time"
     default:
       // PAS de `type="number"` pour number/integer : (1) le navigateur refuse
       // `=` (formule) ou un "-" isolé dans un input number, (2) `v-model` sur
@@ -1022,6 +1031,8 @@ const startEdit = (row: number, column: string, initial?: string) => {
   } else {
     let rawStr = String(raw ?? "")
     if (rawStr.startsWith("'")) rawStr = rawStr.slice(1)
+    // Heure : l'input natif n'accepte que `HH:MM` — on normalise dès l'ouverture
+    if (col?.type === "time") rawStr = normalizeTime(rawStr) ?? rawStr
     draft.value = String(initial ?? rawStr)
   }
   editing.value = { row, column }
@@ -1099,6 +1110,11 @@ const coerceValue = (col: QSpreadsheetColumn | undefined, text: unknown, old: an
   if (col?.type === "boolean") {
     return raw === "true" ? true : raw === "false" ? false : old
   }
+  if (col?.type === "time") {
+    // Heure valide → `HH:MM` (`HH:MM:SS` si les secondes sont non nulles) ; invalide → ancienne
+    const time = normalizeTime(raw)
+    return time === undefined ? old : time
+  }
   if (col?.type === "select") {
     const opt = cellOptionsOf(col).find(
       (o) => String(o.label ?? "") === raw || String(o.value) === raw,
@@ -3065,6 +3081,19 @@ const applyFill = () => {
           const d1 = +new Date(s1 + "T00:00:00Z")
           const step = Math.round((d1 - d0) / 86400000)
           if (step !== 0) val = isoAddDays(s1, step * (rr - b.r1))
+        } else if (
+          b.r1 > b.r0 &&
+          col?.type === "time" &&
+          typeof s0 === "string" &&
+          typeof s1 === "string"
+        ) {
+          // Série d'heures : 09:00 puis 10:00 → 11:00, 12:00… (modulo 24 h)
+          const t0 = timeToSeconds(s0)
+          const t1 = timeToSeconds(s1)
+          if (t0 !== undefined && t1 !== undefined && t1 !== t0) {
+            const step = (t1 - t0) / (b.r1 - b.r0)
+            val = secondsToTime(t1 + step * (rr - b.r1))
+          }
         }
       } else if (
         !fillCopy.value &&
@@ -3081,6 +3110,18 @@ const applyFill = () => {
         if (b.c1 > b.c0 && typeof s0 === "number" && typeof s1 === "number" && s1 !== s0) {
           const step = (s1 - s0) / (b.c1 - b.c0)
           val = s1 + step * (cc - b.c1)
+        } else if (
+          b.c1 > b.c0 &&
+          col?.type === "time" &&
+          typeof s0 === "string" &&
+          typeof s1 === "string"
+        ) {
+          const t0 = timeToSeconds(s0)
+          const t1 = timeToSeconds(s1)
+          if (t0 !== undefined && t1 !== undefined && t1 !== t0) {
+            const step = (t1 - t0) / (b.c1 - b.c0)
+            val = secondsToTime(t1 + step * (cc - b.c1))
+          }
         }
       }
       // Recopie du motif (source cyclique) — vers le bas, la droite, le haut,
@@ -3158,10 +3199,17 @@ const endResize = () => {
   window.removeEventListener("pointerup", endResize)
 }
 
-const onPointerUpGlobal = () => {
+const onPointerUpGlobal = (e: PointerEvent) => {
   isPointerDown.value = false
   endResize()
   endRowResize()
+  const target = e.target as HTMLElement | null
+  // Ne restaurer le focus de la grille que si le geste se termine **dans la grille**,
+  // et jamais depuis l'éditeur / ses listes. Sinon `td.focus()` déclenche le `blur`
+  // de l'input **avant** le `click` de l'option : `commitEdit()` ferme l'éditeur et
+  // la valeur cliquée (`select` / `multiselect`) était perdue.
+  if (!target?.closest?.(".q-spreadsheet__viewport")) return
+  if (target.closest(".q-spreadsheet__editor")) return
   const s = sel.value
   if (s) focusCell(s.row, s.column)
 }

package/index.ts

@@ -203,7 +203,7 @@ 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, tableCsv, tableModel, textValue } from "./lib/chart"
+export { chartToECharts, channelValue, pickFromEvent, tableCsv, tableModel, textValue, tokenCss } from "./lib/chart"
 export type {
   QChartAxis,
   QChartChannel,
@@ -226,6 +226,15 @@ export type {
 } from "./lib/chart"
 export { DEFAULT_CURRENCY, DEFAULT_LOCALE, formatValue } from "./lib/chartFormat"
 export { boxStats, histogram, linearFit, waterfallSteps } from "./lib/chartStats"
+export { cellBarGeometry, cellScale, cellVisualOf, sparklineGeometry } from "./lib/chartTable"
+export type {
+  QChartCellBar,
+  QChartCellKind,
+  QChartCellScale,
+  QChartCellVisual,
+  QChartSparkPoint,
+  QChartSparkline,
+} from "./lib/chartTable"
 export { vTouchPan } from "./lib/touchPan"
 export type { PanDetails, TouchPanHandler, PanDirection } from "./lib/touchPan"
 export { vTouchHold } from "./lib/touchHold"

package/lib/chart.ts

@@ -32,8 +32,11 @@
 import { axisFormatter, DEFAULT_LOCALE, formatValue, timeTickFormatter } from "./chartFormat"
 import type { QChartFormat } from "./chartFormat"
 import { boxStats, categoryTotals, histogram, linearFit, waterfallSteps } from "./chartStats"
+import { cellScale, cellVisualOf } from "./chartTable"
+import type { QChartCellScale, QChartCellVisual } from "./chartTable"
 
 export type { QChartFormat, QChartFormatKind, QChartFormatOptions } from "./chartFormat"
+export type { QChartCellKind, QChartCellScale, QChartCellVisual } from "./chartTable"
 
 /** Valeur d'un canal : nom de champ, valeurs explicites ou fonction d'accès */
 export type QChartChannel = string | readonly any[] | ((d: any, i: number) => any) | number
@@ -94,6 +97,9 @@ export interface QChartColumn {
   sortable?: boolean
   /** Agrégat de la ligne de **totaux** (`sum`, `avg`, `min`, `max`, `count`) */
   summary?: "sum" | "avg" | "min" | "max" | "count"
+  /** **Micro-visualisation** de la cellule (façon Power BI) : barre de données, barre
+   *  divergente `delta`, intensité `heat` ou `sparkline`. `true` = barre de données. */
+  cell?: QChartCellVisual | boolean
 }
 
 /** Séparateurs d'une marque `table` : `horizontal` (défaut — un trait sous chaque rangée),
@@ -118,6 +124,10 @@ export interface QChartTable {
   sortDesc?: boolean
   /** Ligne de **totaux** déjà formatée (clé = champ) */
   totals?: Record<string, string>
+  /** Valeurs **brutes** des agrégats de la ligne de totaux (pour ses barres de cellule) */
+  totalValues?: Record<string, number>
+  /** Bornes par colonne, calculées sur les lignes visibles (barres / heat / delta) */
+  cellScales?: Record<string, QChartCellScale>
 }
 
 /** État de vue d'une table (tri / page), piloté par le composant */
@@ -138,14 +148,16 @@ function compareCells(a: any, b: any): number {
   return sa < sb ? -1 : sa > sb ? 1 : 0
 }
 
-/** Agrège une colonne pour la ligne de totaux (`undefined` = pas d'agrégat) */
-function summarize(column: QChartColumn, rows: any[]): string | undefined {
+/** Agrège une colonne pour la ligne de totaux (`undefined` = pas d'agrégat).
+ *  Renvoie la valeur **brute** (pour les barres du pied de table) et son texte formaté. */
+function aggregate(column: QChartColumn, rows: any[]): { value?: number; formatted?: string } | undefined {
   const raw = rows.map((row) => row?.[column.field])
   const nums = raw.filter((v): v is number => typeof v === "number" && Number.isFinite(v))
-  const mode = column.summary ?? (nums.length === raw.filter((v) => v !== null && v !== undefined).length && nums.length > 0 ? "sum" : undefined)
+  const nonEmpty = raw.filter((v) => v !== null && v !== undefined).length
+  const mode = column.summary ?? (nums.length === nonEmpty && nums.length > 0 ? "sum" : undefined)
   if (!mode) return undefined
-  if (mode === "count") return String(rows.length)
-  if (nums.length === 0) return ""
+  if (mode === "count") return { value: rows.length, formatted: String(rows.length) }
+  if (nums.length === 0) return { formatted: "" }
   const value =
     mode === "sum"
       ? nums.reduce((s, v) => s + v, 0)
@@ -154,7 +166,10 @@ function summarize(column: QChartColumn, rows: any[]): string | undefined {
         : mode === "min"
           ? Math.min(...nums)
           : Math.max(...nums)
-  return column.format ? column.format(value, undefined) : String(Number(value.toPrecision(12)))
+  return {
+    value,
+    formatted: column.format ? column.format(value, undefined) : String(Number(value.toPrecision(12))),
+  }
 }
 
 /** Modèle d'une marque `table` : colonnes déclarées ou déduites des lignes, lignes jointes à la
@@ -198,14 +213,36 @@ export function tableModel(
 
   // ── Totaux (sur toutes les lignes visibles, pas seulement la page) ──
   let totals: Record<string, string> | undefined
+  let totalValues: Record<string, number> | undefined
   if (mark.totals) {
     const label = typeof mark.totals === "object" ? (mark.totals.label ?? "") : ""
     const out: Record<string, string> = {}
+    const raw: Record<string, number> = {}
     columns.forEach((column, i) => {
-      const value = i === 0 && label ? label : summarize(column, sorted)
-      if (value !== undefined) out[column.field] = value
+      const agg = aggregate(column, sorted)
+      if (i === 0 && label) out[column.field] = label
+      else if (agg?.formatted !== undefined) out[column.field] = agg.formatted
+      if (agg?.value !== undefined) raw[column.field] = agg.value
     })
     if (Object.keys(out).length) totals = out
+    if (Object.keys(raw).length) totalValues = raw
+  }
+
+  // ── Échelles des micro-visualisations (barres / heat / delta) ──
+  let cellScales: Record<string, QChartCellScale> | undefined
+  const visualColumns = columns.filter((column) => {
+    const visual = cellVisualOf(column.cell)
+    return !!visual && visual.type !== "sparkline"
+  })
+  if (visualColumns.length) {
+    cellScales = {}
+    for (const column of visualColumns) {
+      const visual = cellVisualOf(column.cell)!
+      cellScales[column.field] = cellScale(
+        sorted.map((row) => row?.[column.field]),
+        visual,
+      )
+    }
   }
 
   // ── Pagination ──
@@ -228,6 +265,8 @@ export function tableModel(
     model.allRows = sorted
   }
   if (totals) model.totals = totals
+  if (totalValues) model.totalValues = totalValues
+  if (cellScales) model.cellScales = cellScales
   return model
 }
 
@@ -1027,6 +1066,18 @@ const TOKEN_FALLBACKS: Record<string, string> = {
 
 const isToken = (v: any): v is string => typeof v === "string" && v in TOKEN_FALLBACKS
 
+/** Couleur de **cellule de table** (CSS) : un token `primary` / `chart-1` devient
+ *  `var(--primary, #1976d2)` ; toute autre valeur CSS est rendue telle quelle.
+ *  Les tokens d'un thème hôte qui ne sont pas dans `TOKEN_FALLBACKS` (ex. `muted-foreground`)
+ *  sont acceptés dès qu'ils contiennent un tiret — on leur donne `fallback` pour repli. */
+export function tokenCss(value: string | undefined, fallback = "currentColor"): string {
+  if (!value) return fallback
+  if (isToken(value) || /^[a-z][a-z0-9-]*-[a-z0-9-]+$/i.test(value)) {
+    return `var(--${value}, ${TOKEN_FALLBACKS[value] ?? fallback})`
+  }
+  return value
+}
+
 /** Style de l'info-bulle : carte translucide floutée (verre), rayon 3px, ombre portée.
  *  `var(--card)` rend la surface solidaire du thème hôte (clair/sombre) sans relecture. */
 const TOOLTIP_EXTRA_CSS = [

package/lib/chartTable.test.ts

@@ -0,0 +1,140 @@
+// Tests des **micro-visualisations de cellule** de la marque `table` (barres de données,
+// barres divergentes, heat, sparklines) — purs, sans DOM.
+import { describe, expect, it } from "bun:test"
+import { cellBarGeometry, cellScale, cellVisualOf, sparklineGeometry } from "./chartTable"
+import { tableModel } from "./chart"
+
+describe("cellVisualOf", () => {
+  it("`true` = barre de données, objet rendu tel quel, absent = rien", () => {
+    expect(cellVisualOf(true)).toEqual({ type: "bar" })
+    expect(cellVisualOf(undefined)).toBeUndefined()
+    expect(cellVisualOf(false)).toBeUndefined()
+    expect(cellVisualOf({ type: "delta" })).toEqual({ type: "delta" })
+  })
+})
+
+describe("cellScale", () => {
+  it("bornes observées, ramenées à zéro", () => {
+    expect(cellScale([10, 50, 100], { type: "bar" })).toEqual({ min: 0, max: 100, maxAbs: 100 })
+    expect(cellScale([-10, 20], { type: "delta" })).toEqual({ min: -10, max: 20, maxAbs: 20 })
+  })
+
+  it("bornes explicites (`min` / `max`) et valeurs non numériques ignorées", () => {
+    expect(cellScale([10, null, "x", 30], { type: "bar", min: 0, max: 200 })).toEqual({
+      min: 0,
+      max: 200,
+      maxAbs: 200,
+    })
+    expect(cellScale([], { type: "bar" })).toEqual({ min: 0, max: 0, maxAbs: Number.EPSILON })
+  })
+})
+
+describe("cellBarGeometry", () => {
+  const scale = { min: 0, max: 100, maxAbs: 100 }
+
+  it("`bar` : barre à gauche proportionnelle à la valeur", () => {
+    expect(cellBarGeometry(50, { type: "bar" }, scale)).toEqual({
+      width: 50,
+      left: 0,
+      ratio: 0.5,
+      diverging: false,
+      sign: 1,
+    })
+    expect(cellBarGeometry(-25, { type: "bar" }, scale)?.width).toBe(25)
+    expect(cellBarGeometry(0, { type: "bar" }, scale)?.width).toBe(0)
+  })
+
+  it("`delta` : divergente depuis 50 %, positives à droite", () => {
+    expect(cellBarGeometry(25, { type: "delta" }, scale)).toMatchObject({
+      left: 50,
+      width: 12.5,
+      diverging: true,
+      sign: 1,
+    })
+    expect(cellBarGeometry(-25, { type: "delta" }, scale)).toMatchObject({
+      left: 37.5,
+      width: 12.5,
+      diverging: true,
+      sign: -1,
+    })
+  })
+
+  it("`heat` : barre pleine largeur, l'intensité porte la valeur", () => {
+    expect(cellBarGeometry(25, { type: "heat" }, scale)).toMatchObject({ left: 0, width: 100, ratio: 0.25 })
+  })
+
+  it("aucune barre pour une sparkline ou une valeur manquante", () => {
+    expect(cellBarGeometry(10, { type: "sparkline" }, scale)).toBeUndefined()
+    expect(cellBarGeometry(undefined, { type: "bar" }, scale)).toBeUndefined()
+    expect(cellBarGeometry("x", { type: "bar" }, scale)).toBeUndefined()
+  })
+})
+
+describe("sparklineGeometry", () => {
+  it("trace la ligne, la surface et le point final", () => {
+    const spark = sparklineGeometry([1, 2, 3], { point: "last" })!
+    expect(spark.points.length).toBe(3)
+    expect(spark.path.startsWith("M2,")).toBe(true)
+    expect(spark.path).toContain("L98,2")
+    expect(spark.areaPath).toContain("Z")
+    expect(spark.marker).toEqual(spark.points[2]!)
+  })
+
+  it("met en évidence `first`, `high`, `low` ou rien", () => {
+    const first = sparklineGeometry([3, 1, 7], { point: "first" })!
+    expect(first.marker).toEqual(first.points[0]!)
+    const high = sparklineGeometry([3, 1, 7], { point: "high" })!
+    expect(high.marker).toEqual(high.points[2]!)
+    const low = sparklineGeometry([3, 1, 7], { point: "low" })!
+    expect(low.marker).toEqual(low.points[1]!)
+    expect(sparklineGeometry([3, 1, 7], { point: false })!.marker).toBeUndefined()
+  })
+
+  it("valeurs constantes : ligne au milieu ; aucune valeur : rien", () => {
+    const flat = sparklineGeometry([5, 5, 5])!
+    expect(flat.points.every((p) => p.y === flat.points[0]!.y)).toBe(true)
+    expect(flat.points[0]!.y).toBe(12)
+    expect(sparklineGeometry([])).toBeUndefined()
+    expect(sparklineGeometry(undefined)).toBeUndefined()
+  })
+})
+
+describe("tableModel — échelles et totaux des micro-visualisations", () => {
+  const rows = [
+    { type: "A", orders: 100, target: 10, trend: [1, 2, 3] },
+    { type: "B", orders: 50, target: -5, trend: [3, 2, 1] },
+  ]
+  const mark = {
+    type: "table" as const,
+    data: rows,
+    totals: { label: "Total" },
+    columns: [
+      { field: "type", label: "Type" },
+      { field: "orders", label: "Orders", cell: { type: "bar" as const } },
+      { field: "target", label: "vs Target", cell: { type: "delta" as const } },
+      { field: "trend", label: "Trend", cell: { type: "sparkline" as const } },
+    ],
+  }
+
+  it("calcule une échelle par colonne visualisée (jamais pour une sparkline)", () => {
+    const model = tableModel(mark)
+    expect(model.cellScales).toEqual({
+      orders: { min: 0, max: 100, maxAbs: 100 },
+      target: { min: -5, max: 10, maxAbs: 10 },
+    })
+    expect(model.cellScales?.trend).toBeUndefined()
+  })
+
+  it("expose les valeurs **brutes** des totaux pour les barres du pied de table", () => {
+    const model = tableModel(mark)
+    expect(model.totalValues).toEqual({ orders: 150, target: 5 })
+    expect(model.totals).toEqual({ type: "Total", orders: "150", target: "5" })
+  })
+
+  it("sans `cell`, pas d'échelle (modèle inchangé)", () => {
+    const model = tableModel({ type: "table", data: rows, columns: ["type", "orders"] })
+    expect(model.cellScales).toBeUndefined()
+    expect(model.totalValues).toBeUndefined()
+    expect(model.totals).toBeUndefined()
+  })
+})

package/lib/chartTable.ts

@@ -0,0 +1,193 @@
+// Micro-visualisations **dans les cellules** d'une marque `table` (façon Power BI) :
+// barres de données, barres divergentes (`vs. target`), intensité de cellule et sparklines.
+//
+// Tout est **pur** : les échelles sont calculées sur les lignes visibles et la géométrie est
+// renvoyée en pourcentages / en tracé SVG. `QChart.vue` ne fait que poser des styles.
+
+import type { QChartFormat } from "./chartFormat"
+
+/** Famille de visualisation d'une cellule */
+export type QChartCellKind = "bar" | "delta" | "heat" | "sparkline"
+
+/** Configuration d'une cellule (`column.cell`). `cell: true` équivaut à `{ type: "bar" }`. */
+export interface QChartCellVisual {
+  /** Type de micro-visualisation */
+  type: QChartCellKind
+  /** Couleur principale : barre, ligne de sparkline, valeurs positives */
+  color?: string
+  /** Couleur des valeurs **négatives** (type `delta`) et des barres descendantes */
+  negativeColor?: string
+  /** Couleur du point de sparkline (défaut : `color`) */
+  pointColor?: string
+  /** Borne basse de l'échelle (défaut : `min(0, valeurs)`) */
+  min?: number
+  /** Borne haute de l'échelle (défaut : `max(0, valeurs)`) */
+  max?: number
+  /** Opacité de la barre (défauts : `bar` 0.18, `delta` 0.85, `heat` calculée) */
+  opacity?: number
+  /** `sparkline` : champ de la ligne qui porte la série (tableau de nombres) */
+  field?: string
+  /** `sparkline` : accès direct à la série (prioritaire sur `field`) */
+  values?: (row: any) => readonly number[] | undefined
+  /** `sparkline` : point mis en évidence (défaut : `last`) */
+  point?: "last" | "first" | "high" | "low" | false
+  /** `sparkline` : remplir la surface sous la ligne */
+  area?: boolean
+  /** `delta` : afficher ▲ / ▼ (défaut : oui pour `delta`, non sinon) */
+  arrow?: boolean
+  /** `delta` : imprimer la valeur **absolue** (défaut : oui — la flèche porte le signe) */
+  absolute?: boolean
+  /** Format de la valeur affichée (`compact`, `percent`, `currency`…) si la colonne n'a pas de `format` */
+  format?: QChartFormat
+}
+
+/** Bornes d'une colonne, calculées sur les lignes visibles */
+export interface QChartCellScale {
+  min: number
+  max: number
+  /** Plus grande amplitude par rapport à zéro (barres divergentes) */
+  maxAbs: number
+}
+
+const finite = (v: any): v is number => typeof v === "number" && Number.isFinite(v)
+
+/** Normalise `column.cell` : `true` → barre de données, objet → tel quel. */
+export function cellVisualOf(
+  cell: QChartCellVisual | boolean | undefined,
+): QChartCellVisual | undefined {
+  if (cell === true) return { type: "bar" }
+  return cell || undefined
+}
+
+const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v))
+
+/** Échelle d'une colonne : bornes explicites (`cell.min` / `cell.max`) ou observées. */
+export function cellScale(values: readonly any[], cell: QChartCellVisual): QChartCellScale {
+  const nums = values.filter(finite)
+  const min = cell.min ?? (nums.length ? Math.min(0, ...nums) : 0)
+  const max = cell.max ?? (nums.length ? Math.max(0, ...nums) : 0)
+  const maxAbs = Math.max(Math.abs(min), Math.abs(max), Number.EPSILON)
+  return { min, max, maxAbs }
+}
+
+/** Géométrie d'une barre de cellule (en % de la largeur / hauteur de la cellule). */
+export interface QChartCellBar {
+  /** Largeur, en % de la cellule */
+  width: number
+  /** Décalage depuis la gauche, en % */
+  left: number
+  /** Part de l'échelle (0 → 1) — sert à l'intensité du type `heat` */
+  ratio: number
+  /** Barre **divergente** (part de 50 %, négatifs vers la gauche) ? */
+  diverging: boolean
+  /** Signe de la valeur (-1, 0, 1) */
+  sign: -1 | 0 | 1
+}
+
+/** Positionne la barre d'une cellule.
+ *
+ *  - `bar` : barre **à gauche**, longueur proportionnelle à `|valeur| / maxAbs` ;
+ *  - `delta` : barre **divergente** depuis le centre (50 %), positives à droite ;
+ *  - `heat` : barre pleine largeur, l'opacité porte l'intensité ;
+ *  - `sparkline` : pas de barre (`undefined`). */
+export function cellBarGeometry(
+  value: any,
+  cell: QChartCellVisual,
+  scale: QChartCellScale,
+): QChartCellBar | undefined {
+  if (cell.type === "sparkline" || !finite(value)) return undefined
+  const sign: -1 | 0 | 1 = value > 0 ? 1 : value < 0 ? -1 : 0
+  const span = scale.max - scale.min
+  const ratio = span > 0 ? clamp((value - scale.min) / span, 0, 1) : 0
+  if (cell.type === "delta") {
+    const half = clamp((Math.abs(value) / scale.maxAbs) * 50, 0, 50)
+    return {
+      width: half,
+      left: value >= 0 ? 50 : 50 - half,
+      ratio: clamp(Math.abs(value) / scale.maxAbs, 0, 1),
+      diverging: true,
+      sign,
+    }
+  }
+  if (cell.type === "heat") {
+    return { width: 100, left: 0, ratio, diverging: false, sign }
+  }
+  // `bar` : longueur proportionnelle à l'amplitude, ancrée à gauche
+  return {
+    width: clamp((Math.abs(value) / scale.maxAbs) * 100, 0, 100),
+    left: 0,
+    ratio: clamp(Math.abs(value) / scale.maxAbs, 0, 1),
+    diverging: false,
+    sign,
+  }
+}
+
+/** Point d'un tracé de sparkline */
+export interface QChartSparkPoint {
+  x: number
+  y: number
+}
+
+/** Tracé d'une sparkline, dans un `viewBox` de `width` × `height` */
+export interface QChartSparkline {
+  path: string
+  areaPath: string
+  points: QChartSparkPoint[]
+  /** Point mis en évidence (`point: false` → aucun) */
+  marker?: QChartSparkPoint
+}
+
+const round2 = (v: number) => Math.round(v * 100) / 100
+
+/** Construit la polyligne d'une sparkline.
+ *
+ *  `viewBox` par défaut : `100 × 24`, avec 2 px de marge. Les valeurs non finies sont
+ *  ignorées. Sans aucune valeur, `undefined` (la cellule affiche son texte). */
+export function sparklineGeometry(
+  values: readonly any[] | undefined,
+  options: {
+    point?: "last" | "first" | "high" | "low" | false
+    width?: number
+    height?: number
+    padding?: number
+  } = {},
+): QChartSparkline | undefined {
+  const nums = (values ?? []).filter(finite)
+  if (nums.length === 0) return undefined
+  const width = options.width ?? 100
+  const height = options.height ?? 24
+  const padding = options.padding ?? 2
+  const innerW = Math.max(1, width - padding * 2)
+  const innerH = Math.max(1, height - padding * 2)
+  const min = Math.min(...nums)
+  const max = Math.max(...nums)
+  const flat = max === min
+  const span = max - min || 1
+  const stepX = nums.length > 1 ? innerW / (nums.length - 1) : 0
+  const points: QChartSparkPoint[] = nums.map((v, i) => ({
+    x: padding + i * stepX,
+    y: padding + (flat ? innerH / 2 : (1 - (v - min) / span) * innerH),
+  }))
+  const path = points.map((p, i) => `${i === 0 ? "M" : "L"}${round2(p.x)},${round2(p.y)}`).join(" ")
+  const first = points[0]!
+  const last = points[points.length - 1]!
+  const areaPath = `${path} L${round2(last.x)},${round2(height - padding)} L${round2(first.x)},${round2(
+    height - padding,
+  )} Z`
+  const markerIndex =
+    options.point === false
+      ? undefined
+      : options.point === "first"
+        ? 0
+        : options.point === "high"
+          ? nums.indexOf(max)
+          : options.point === "low"
+            ? nums.indexOf(min)
+            : points.length - 1
+  return {
+    path,
+    areaPath,
+    points,
+    ...(markerIndex !== undefined && points[markerIndex] ? { marker: points[markerIndex] } : {}),
+  }
+}

package/lib/spreadsheet.test.ts

@@ -14,8 +14,47 @@ import {
   csvSplitLine,
   parseCsv,
   deriveCols,
+  normalizeTime,
+  parseTimeOfDay,
+  secondsToTime,
+  timeToSeconds,
 } from "./spreadsheet"
 
+describe("heures (type `time`)", () => {
+  it("décompose les formes usuelles", () => {
+    expect(parseTimeOfDay("09:30")).toEqual({ hours: 9, minutes: 30, seconds: 0 })
+    expect(parseTimeOfDay("9h5")).toEqual({ hours: 9, minutes: 5, seconds: 0 })
+    expect(parseTimeOfDay("9")).toEqual({ hours: 9, minutes: 0, seconds: 0 })
+    expect(parseTimeOfDay("23:59:58")).toEqual({ hours: 23, minutes: 59, seconds: 58 })
+    // vide → cellule effacée ; null/undefined → pas une heure
+    expect(parseTimeOfDay("")).toBeNull()
+    expect(parseTimeOfDay(null)).toBeUndefined()
+  })
+
+  it("refuse les heures invalides", () => {
+    for (const value of ["24:00", "9:75", "9:30:75", "abc", "1:2:3:4", "-1:00"]) {
+      expect(parseTimeOfDay(value), value).toBeUndefined()
+    }
+  })
+
+  it("normalise en `HH:MM` (secondes conservées si non nulles)", () => {
+    expect(normalizeTime("9:5")).toBe("09:05")
+    expect(normalizeTime("9h30")).toBe("09:30")
+    expect(normalizeTime("09:30:00")).toBe("09:30")
+    expect(normalizeTime("09:30:07")).toBe("09:30:07")
+    expect(normalizeTime("")).toBeNull()
+    expect(normalizeTime("nope")).toBeUndefined()
+  })
+
+  it("séries d'heures : secondes, modulo 24 h, valeurs négatives", () => {
+    expect(timeToSeconds("01:00")).toBe(3600)
+    expect(secondsToTime(3600)).toBe("01:00")
+    expect(secondsToTime(25 * 3600)).toBe("01:00")
+    expect(secondsToTime(-3600)).toBe("23:00")
+    expect(secondsToTime(3661)).toBe("01:01:01")
+  })
+})
+
 describe("lettres de colonnes", () => {
   it("colLetter : 0→A, 25→Z, 26→AA, 27→AB, 701→ZZ, 702→AAA", () => {
     expect(colLetter(0)).toBe("A")

package/lib/spreadsheet.ts

@@ -247,6 +247,74 @@ export const isoAddDays = (iso: string, days: number): string => {
   return d.toISOString().slice(0, 10)
 }
 
+/** Heure du jour : `HH:MM` ou `HH:MM:SS` (toujours sur deux chiffres) */
+export const TIME_OF_DAY = /^\d{2}:\d{2}(?::\d{2})?$/
+
+/**
+ * Décompose une **heure** saisie librement. Accepte `9`, `09:30`, `9:5`, `9h30`, `09:30:15`.
+ *
+ * - `null` → chaîne vide (cellule effacée) ;
+ * - `undefined` → ce n'est pas une heure valide (`24:00`, `9:75`, `abc`…).
+ *
+ * Le parsing est volontairement **local** (pas de `Date`) : aucune conversion de fuseau ne
+ * doit intervenir sur une heure de la journée.
+ */
+export function parseTimeOfDay(
+  value: any,
+): { hours: number; minutes: number; seconds: number } | null | undefined {
+  if (value === null || value === undefined) return undefined
+  const raw = String(value).trim()
+  if (raw === "") return null
+  const match = raw.match(/^(\d{1,2})(?:[:h](\d{1,2}))?(?::(\d{1,2}))?$/i)
+  if (!match) return undefined
+  const hours = Number(match[1])
+  const minutes = match[2] === undefined ? 0 : Number(match[2])
+  const seconds = match[3] === undefined ? 0 : Number(match[3])
+  if (
+    !Number.isInteger(hours) ||
+    !Number.isInteger(minutes) ||
+    !Number.isInteger(seconds) ||
+    hours > 23 ||
+    minutes > 59 ||
+    seconds > 59
+  ) {
+    return undefined
+  }
+  return { hours, minutes, seconds }
+}
+
+const two = (n: number) => String(n).padStart(2, "0")
+
+/**
+ * Normalise une heure en `HH:MM` — les secondes ne sont conservées que si elles sont non
+ * nulles (`HH:MM:SS`). `null` = vide, `undefined` = invalide (l'appelant garde l'ancienne
+ * valeur, comme pour un nombre refusé).
+ */
+export function normalizeTime(value: any): string | null | undefined {
+  const parsed = parseTimeOfDay(value)
+  if (parsed === null || parsed === undefined) return parsed
+  const base = `${two(parsed.hours)}:${two(parsed.minutes)}`
+  return parsed.seconds ? `${base}:${two(parsed.seconds)}` : base
+}
+
+/** Secondes depuis minuit (séries d'auto-remplissage) — `undefined` si invalide */
+export function timeToSeconds(value: any): number | undefined {
+  const parsed = parseTimeOfDay(value)
+  if (!parsed) return undefined
+  return parsed.hours * 3600 + parsed.minutes * 60 + parsed.seconds
+}
+
+/** Secondes depuis minuit → `HH:MM` (`HH:MM:SS` si nécessaire), **modulo 24 h** */
+export function secondsToTime(total: number): string {
+  if (!Number.isFinite(total)) return "00:00"
+  const day = 86400
+  const normalized = ((Math.round(total) % day) + day) % day
+  const hours = Math.floor(normalized / 3600)
+  const minutes = Math.floor((normalized % 3600) / 60)
+  const seconds = normalized % 60
+  return seconds ? `${two(hours)}:${two(minutes)}:${two(seconds)}` : `${two(hours)}:${two(minutes)}`
+}
+
 /** Échappe une valeur pour un CSV (quote si délimiteur / guillemet / newline) */
 export const csvEscape = (s: unknown, delim: string): string => {
   const str = s === null || s === undefined ? "" : String(s)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",