@dnax/ui 0.0.58 → 0.0.60

package/components/QSpreadsheet.vue

@@ -193,6 +193,7 @@ import {
 import { checkValidation, type ArkCheck } from "../lib/spreadsheetValidation"
 import { normalizeCellOptions } from "../lib/spreadsheetOptions"
 import { inLockRect, lockRects, prefillForRow } from "../lib/spreadsheetZones"
+import { canAddRows, canRemoveRows, clampRows } from "../lib/spreadsheetRows"
 import {
   DEFAULT_ROW_KEY,
   diffDocuments,
@@ -264,6 +265,27 @@ interface Props {
    * les noms de colonnes inconnus sont ignorés.
    */
   prefill?: QSpreadsheetFill[]
+  /**
+   * Applique `prefill` **automatiquement** aux cellules **vides** dès que le document est prêt
+   * (chargement, remplacement de `rows` / `columns`) — sans avoir à appeler `applyPrefill()`.
+   * Le résultat est **écrit dans `rows`** (`update:rows`) : utiliser `v-model:rows` (ou écouter
+   * `@update:rows`) pour le recevoir. Sans historique ni marquage « modifié ». Une ligne
+   * **neuve** naît de toute façon préremplie. `false` → application sur appel explicite
+   * uniquement. (Défaut : `true`.)
+   */
+  autoPrefill?: boolean
+  /**
+   * Nombre **minimum** de lignes : impossible de descendre en dessous (la suppression des lignes
+   * sélectionnées est refusée si elle passerait sous le plancher). Combiné avec `maxRows` à la
+   * **même** valeur, le nombre de lignes est **figé**. (Défaut : aucune limite.)
+   */
+  minRows?: number
+  /**
+   * Nombre **maximum** de lignes : le bouton « + », l'insertion au curseur et l'import CSV
+   * s'arrêtent à cette limite (`:max-rows="1"` → feuille à **une seule** ligne). Les chargements
+   * programmatiques (`loadDocument`) ne sont pas bornés. (Défaut : aucune limite.)
+   */
+  maxRows?: number
   /** Affiche le numéro de ligne (colonne de gauche) */
   showRowNumbers?: boolean
   /** Affiche l'en-tête de colonne (lettre + label) */
@@ -499,6 +521,7 @@ const emit = defineEmits<{
   "cell-edit-end": [payload: { row: number; column: string; canceled: boolean }]
   "selection-change": [value: QSpreadsheetSelection | null]
   "structure-change": [payload: { rows: Record<string, any>[]; columns: QSpreadsheetColumn[]; reason: string }]
+  "prefill": [payload: { count: number; mode: "auto" | "manual" }]
   "update:dirty": [value: boolean]
   "update:changes": [value: QSpreadsheetChanges]
 }>()
@@ -542,6 +565,8 @@ const ensureRowKeys = (rows: Record<string, any>[] | undefined) => {
 }
 
 // ─── Données internes (copie éditable des rows) ───
+// Préremplissage : tant que `false`, toute application auto est ignorée (avant montage).
+let prefillReady = false
 const state = ref<Record<string, any>[]>([])
 watch(
   () => props.rows,
@@ -553,6 +578,8 @@ watch(
       state.value = v.map((r) => ({ ...r }))
       // Lignes **externes** (nouveau document) → nouvelle référence de comparaison
       if (trackReady) acceptChanges()
+      // Nouveau document → applique les défauts sur les cellules vides.
+      autoPrefill()
     }
   },
   { immediate: true },
@@ -571,6 +598,8 @@ watch(
       cols.value = v.map((c) => ({ ...c }))
       // Colonnes **externes** (nouveau schéma) → nouvelle référence de comparaison
       if (trackReady) acceptChanges()
+      // Les zones de `prefill` dépendent des noms de colonnes → (re)applique.
+      autoPrefill()
     }
   },
   { immediate: true },
@@ -580,6 +609,12 @@ const pushCols = (next: QSpreadsheetColumn[]) => {
   emit("update:columns", next)
 }
 
+// ─── Limites de lignes (`minRows` / `maxRows`) ───
+/** Peut-on encore ajouter une ligne ? (bouton « + », insertion au curseur) */
+const canAddRow = computed(() => canAddRows(state.value.length, 1, props.maxRows))
+/** Peut-on retirer au moins une ligne ? (plancher `minRows`) */
+const canRemoveRow = computed(() => canRemoveRows(state.value.length, 1, props.minRows))
+
 const colIndex = (name: string) => cols.value.findIndex((c) => c.name === name)
 const colNameAt = (i: number) => cols.value[i]?.name ?? ""
 const colOf = (name: string) => cols.value.find((c) => c.name === name)
@@ -1279,11 +1314,11 @@ const blankRow = (at = state.value.length): Record<string, any> => {
 }
 
 /**
- * Comble les cellules **vides** d'après `prefill` (sans jamais écraser une valeur
- * existante) et renvoie le nombre de cellules remplies. Utile après avoir chargé
- * `rows` : les données déjà présentes ne sont pas touchées à l'initialisation.
+ * Cœur du préremplissage : ne remplit que les cellules **vides** et renvoie le nombre rempli.
+ * `mode` distingue l'application **automatique** (silencieuse) de l'appel **explicite**
+ * (avec historique). Émet `update:rows` (si quelque chose a changé) puis `prefill`.
  */
-const applyPrefill = (): number => {
+function runPrefill(mode: "auto" | "manual"): number {
   const fills = props.prefill
   if (!fills?.length || props.disable) return 0
   const names = cols.value.map((c) => c.name)
@@ -1300,14 +1335,35 @@ const applyPrefill = (): number => {
     return out
   })
   if (!count) return 0
-  pushHistory()
+  if (mode === "manual") pushHistory()
   state.value = next
   emit("update:rows", next)
+  emit("prefill", { count, mode })
   return count
 }
 
+/**
+ * Comble les cellules **vides** d'après `prefill` (jamais une valeur existante) et renvoie le
+ * nombre de cellules remplies. Appel **explicite** (avec historique) — l'application au
+ * chargement est automatique (cf. `autoPrefill`).
+ */
+function applyPrefill(): number {
+  return runPrefill("manual")
+}
+
+/**
+ * Application **automatique** (document prêt, nouveau document) : silencieuse — sans
+ * historique, pour ne pas polluer l'annulation ni marquer la grille « modifiée ». **Écrit le
+ * résultat dans `rows`** (`update:rows`). Désactivable via `:auto-prefill="false"`.
+ */
+function autoPrefill(): void {
+  if (!prefillReady || props.autoPrefill === false) return
+  runPrefill("auto")
+}
+
 const addRow = (at?: number) => {
   if (props.readonly || props.disable) return
+  if (!canAddRow.value) return
   pushHistory()
   const idx = at ?? state.value.length
   const next = [...state.value]
@@ -1320,12 +1376,14 @@ const addRow = (at?: number) => {
 
 const removeSelectedRows = () => {
   if (props.readonly || props.disable) return
-  pushHistory()
-  purgeMergesAndRules()
   const rect = selRect.value
   if (!rect || !state.value.length) return
   const indexes = new Set<number>()
   for (let r = rect.r0; r <= rect.r1; r++) indexes.add(r)
+  // Plancher `minRows` : on refuse si la suppression descendrait en dessous.
+  if (!canRemoveRows(state.value.length, indexes.size, props.minRows)) return
+  pushHistory()
+  purgeMergesAndRules()
   const sorted = [...indexes].sort((a, b) => b - a)
   const next = [...state.value]
   for (const i of sorted) next.splice(i, 1)
@@ -2591,6 +2649,7 @@ const doSortBy = (desc = false) => {
 // ─── Insertion au curseur (lignes / colonnes) ───
 const insertRowAt = (pos: "above" | "below") => {
   if (!canEdit.value) return
+  if (!canAddRow.value) return
   pushHistory()
   purgeMergesAndRules()
   if (!state.value.length) {
@@ -2986,6 +3045,10 @@ const onFilterSearch = (e: Event) => {
 }
 
 onMounted(() => {
+  // Préremplissage automatique en premier : la référence initiale ci-dessous doit
+  // l'inclure, sinon les défauts compteraient comme des « modifications ».
+  prefillReady = true
+  autoPrefill()
   // Référence initiale : à partir d'ici, toute différence avec elle = « modifié »
   trackReady = true
   acceptChanges()
@@ -3159,15 +3222,16 @@ watch(
     const prevKey = localSheets.value[sheetIdx.value]?.key
     let n = 1
     localSheets.value = v.map((s) => {
-      const key = s.key ?? "sheet-" + n
-      n++
+      // `num` capturé AVANT l'incrément : clé **et** nom par défaut partagent le même numéro
+      // (sinon le 1er onglet s'appelait « Sheet 2 »).
+      const num = n++
       // Clés injectées sur les objets du parent (comme pour `rows`) : chaque feuille est
       // identifiable avant même d'être ouverte
       ensureRowKeys(s.rows)
       return {
         ...s,
-        key,
-        name: s.name ?? sheetName(n),
+        key: s.key ?? "sheet-" + num,
+        name: s.name ?? sheetName(num),
         rows: (s.rows ?? []).map((r) => ({ ...r })),
         columns: s.columns ? canonicalColumns(s.columns) : undefined,
       }
@@ -3192,7 +3256,7 @@ watch([state, cols], () => {
 
 const activeSheetName = computed(() => {
   const s = localSheets.value[sheetIdx.value]
-  if (s) return s.name ?? "Sheet " + (sheetIdx.value + 1)
+  if (s) return s.name ?? sheetName(sheetIdx.value + 1)
   return props.sheets?.[0]?.name ?? sheetName(1)
 })
 const sheetRename = ref<{ idx: number; val: string } | null>(null)
@@ -3225,7 +3289,7 @@ const addSheet = () => {
     // premier onglet (propriété sheets vide) — devient multi
     const first: QSpreadsheetSheet = {
       key: "sheet-1",
-      name: "Sheet 1",
+      name: sheetName(1),
       columns: cols.value.map((c) => ({ ...c })),
       rows: state.value.map((r) => ({ ...r })),
     }
@@ -3622,6 +3686,8 @@ const importCsv = (text: string, opts: { delimiter?: string; headers?: boolean }
     }))
     data = rows
   }
+  // Plafond `maxRows` : l'import ne crée pas plus de lignes que la limite.
+  data = clampRows(data, props.maxRows)
   const rowObjs = data.map((row) => {
     const obj: Record<string, any> = { [ROW_KEY]: newRowKey() }
     colsArr.forEach((c, ci) => {
@@ -4395,11 +4461,11 @@ defineExpose({
       </span>
 
       <span class="q-spreadsheet__tb-group">
-        <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable" title="Add row" aria-label="Add row" @click="addRow()">
+        <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable || !canAddRow" title="Add row" aria-label="Add row" @click="addRow()">
           <Icon :icon="icons.rows3" aria-hidden="true" />
           <Icon :icon="icons.plus" class="q-spreadsheet__tool-badge" aria-hidden="true" />
         </button>
-        <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable || !selRect" title="Remove selected row(s)" aria-label="Remove rows" @click="removeSelectedRows">
+        <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable || !selRect || !canRemoveRow" title="Remove selected row(s)" aria-label="Remove rows" @click="removeSelectedRows">
           <Icon :icon="icons.minus" aria-hidden="true" />
         </button>
         <button class="q-spreadsheet__tool" type="button" :disabled="readonly || disable" title="Add column" aria-label="Add column" @click="addColumn()">
@@ -5012,13 +5078,13 @@ defineExpose({
         </button>
 
         <div class="q-spreadsheet__sep" />
-        <button type="button" class="q-spreadsheet__mi" :disabled="!canEdit" @click="insertRowAt('above')">
+        <button type="button" class="q-spreadsheet__mi" :disabled="!canEdit || !canAddRow" @click="insertRowAt('above')">
           <Icon :icon="icons.arrowUp" aria-hidden="true" /> {{ t('insertRowAbove') }}
         </button>
-        <button type="button" class="q-spreadsheet__mi" :disabled="!canEdit" @click="insertRowAt('below')">
+        <button type="button" class="q-spreadsheet__mi" :disabled="!canEdit || !canAddRow" @click="insertRowAt('below')">
           <Icon :icon="icons.arrowDown" aria-hidden="true" /> {{ t('insertRowBelow') }}
         </button>
-        <button type="button" class="q-spreadsheet__mi" :disabled="!canEdit || !selRect" @click="removeSelectedRows">
+        <button type="button" class="q-spreadsheet__mi" :disabled="!canEdit || !selRect || !canRemoveRow" @click="removeSelectedRows">
           <Icon :icon="icons.trash2" aria-hidden="true" /> {{ t('deleteRows') }}
         </button>
         <div class="q-spreadsheet__sep" />

package/lib/chart.axis.test.ts

@@ -0,0 +1,127 @@
+// Tests du **placement des noms d'axes** de `<q-chart>` : `chartToECharts()` produit bien des
+// noms dans le cadre. Vérifié en rendant l'option en SVG via l'**SSR d'ECharts** — du JS pur,
+// aucun navigateur (cf. règle projet).
+//
+// Rappel du bug corrigé : sans `nameLocation`, le moteur place le nom **à la fin** de l'axe —
+// le nom X s'écrivait vers la droite (hors cadre) et le nom Y, centré sur la ligne d'axe,
+// débordait à gauche (rogné) dès que le libellé était large.
+import { describe, expect, it } from "bun:test"
+import * as echarts from "echarts"
+import { chartToECharts } from "./chart"
+
+const THEME = { text: "#000000", muted: "#666666", grid: "#dddddd" }
+/** Largeur approximative d'un caractère à 12px (mesure faite sur le rendu ECharts). */
+const CHAR_W = 7
+const FONT_H = 12
+
+interface Box {
+  x0: number
+  x1: number
+  y0: number
+  y1: number
+}
+
+function renderSvg(config: Record<string, any>, width: number, height: number): string {
+  const chart = echarts.init(null as any, null, {
+    renderer: "svg",
+    ssr: true,
+    width,
+    height,
+  })
+  chart.setOption(chartToECharts({ theme: THEME, ...config }))
+  const svg = chart.renderToSVGString()
+  chart.dispose()
+  return svg
+}
+
+/** Boîte approximative du `<text>` d'un nom d'axe (via `translate` + `text-anchor`). */
+function nameBox(svg: string, name: string): Box | undefined {
+  for (const line of svg.split("\n")) {
+    if (!line.includes("<text")) continue
+    const text = (line.match(/>([^<]*)<\/text>/) ?? [, ""])[1]
+    if (text !== name) continue
+    const m = line.match(/translate\(([-\d.]+) ([-\d.]+)\)/)
+    if (!m) continue
+    const x = Number(m[1])
+    const y = Number(m[2])
+    const anchor = (line.match(/text-anchor="([^"]+)"/) ?? [, "middle"])[1]
+    const w = text.length * CHAR_W
+    const x0 = anchor === "start" ? x : anchor === "end" ? x - w : x - w / 2
+    return { x0, x1: x0 + w, y0: y - FONT_H / 2, y1: y + FONT_H / 2 }
+  }
+  return undefined
+}
+
+const inside = (b: Box, w: number, h: number) =>
+  b.x0 >= 0 && b.x1 <= w && b.y0 >= 0 && b.y1 <= h
+
+const verticalConfig = {
+  marks: [
+    {
+      type: "line",
+      data: [
+        { month: "Jan", value: 1_200_000 },
+        { month: "Feb", value: 3_400_000 },
+        { month: "Mar", value: 2_600_000 },
+      ],
+      x: "month",
+      y: "value",
+    },
+  ],
+  // libellés volontairement larges (le cas qui rognait le nom Y)
+  x: { label: "Month of the year" },
+  y: { label: "Revenue in thousands" },
+}
+
+const horizontalConfig = {
+  marks: [
+    {
+      type: "bar",
+      orientation: "horizontal",
+      data: [
+        { dept: "Engineering", value: 34 },
+        { dept: "Sales", value: 26 },
+      ],
+      x: "dept",
+      y: "value",
+    },
+  ],
+  x: { label: "Headcount" },
+  y: { label: "Department" },
+}
+
+describe("noms d'axes — placement dans le cadre", () => {
+  it("X et Y restent dans le cadre (vertical, horizontal, petit canevas)", () => {
+    const cases: [Record<string, any>, number, number][] = [
+      [verticalConfig, 520, 280],
+      [horizontalConfig, 520, 280],
+      [verticalConfig, 300, 160],
+    ]
+    for (const [config, w, h] of cases) {
+      const svg = renderSvg(config, w, h)
+      const bx = nameBox(svg, config.x.label)
+      const by = nameBox(svg, config.y.label)
+      expect(bx).toBeDefined()
+      expect(by).toBeDefined()
+      expect(inside(bx!, w, h)).toBe(true)
+      expect(inside(by!, w, h)).toBe(true)
+    }
+  })
+
+  it("le nom X est centré sous l'axe, pas collé au bord droit", () => {
+    const svg = renderSvg(verticalConfig, 520, 280)
+    const bx = nameBox(svg, verticalConfig.x.label)!
+    // centré : commence bien après le bord gauche et finit bien avant le bord droit
+    expect(bx.x0).toBeGreaterThan(60)
+    expect(bx.x1).toBeLessThan(520 - 60)
+    // sous la zone de tracé
+    expect(bx.y0).toBeGreaterThan(200)
+  })
+
+  it("le nom Y est ancré à gauche sur la ligne d'axe (jamais rogné), en haut", () => {
+    const svg = renderSvg(verticalConfig, 520, 280)
+    const by = nameBox(svg, verticalConfig.y.label)!
+    expect(by.x0).toBeGreaterThan(0)
+    expect(by.y1).toBeLessThan(160)
+  })
+})

package/lib/chart.ts

@@ -1180,7 +1180,7 @@ export function chartToECharts(config: QChartConfig): Record<string, any> {
   const scaleBand = visualMaps.some((vm) => vm.show !== false) ? 30 : 0
   /** Bandeau du **nom d'axe** (nom de l'axe y au-dessus, nom de l'axe x en dessous) */
   const axisNameTop = config.y?.label ? 16 : 0
-  const axisNameBottom = config.x?.label ? 16 : 0
+  const axisNameBottom = config.x?.label ? 22 : 0
   const legendOption = !legendOn
     ? { show: false }
     : {
@@ -1241,22 +1241,36 @@ export function chartToECharts(config: QChartConfig): Record<string, any> {
     splitLine: { show: axis?.grid ?? true, lineStyle: { color: theme.grid } },
   })
 
+  // ─── Nom d'axe : placement **toujours dans le cadre** ───
+  // Axe **horizontal** : centré sous l'axe (`middle`). À la fin de l'axe (`end`, le défaut
+  // ECharts) le nom s'écrivait vers la droite, hors du cadre.
+  const axisNameX = { nameLocation: "middle" as const, nameGap: 32 }
+  // Axe **vertical** : ancré à **gauche** (`align: left`) sur la ligne d'axe, en haut.
+  // Un `nameGap` fixe ne peut pas convenir : un nom centré sur l'axe déborde à gauche, un nom
+  // rotaté au milieu recouvre/est rogné par les nombres (largeur variable : `1,000` vs
+  // `1,000,000`). Ancré à gauche, il s'étend vers la droite → jamais rogné, jamais superposé.
+  const axisNameY = {
+    nameLocation: "end" as const,
+    nameTextStyle: { ...axisLabel, align: "left" as const },
+  }
   // Orientation horizontale : catégories sur l'axe Y
   const hasBar = series.some((s) => s.type === "bar")
-  const xAxis = hasHeatmap
+  const xAxisBase = hasHeatmap
     ? categoryAxis(config.x, categories, true)
     : horizontal
       ? valueAxis(config.x, hasBar)
       : axisType === "category"
         ? categoryAxis(config.x)
         : valueAxis(config.x, false)
-  const yAxis = hasHeatmap
+  const yAxisBase = hasHeatmap
     ? categoryAxis(config.y, rowCategories, true)
     : horizontal
       ? axisType === "category"
         ? categoryAxis(config.y)
         : valueAxis(config.y, false)
       : valueAxis(config.y, hasBar)
+  const xAxis = config.x?.label ? { ...xAxisBase, ...axisNameX } : xAxisBase
+  const yAxis = config.y?.label ? { ...yAxisBase, ...axisNameY } : yAxisBase
 
   // Familles **hors axes** (`pie` seul) : ni grid ni xAxis/yAxis — sinon ECharts laisse
   // un cadre fantôme et décale le titre.

package/lib/spreadsheetRows.test.ts

@@ -0,0 +1,53 @@
+// Tests unitaires des **limites de lignes** (`lib/spreadsheetRows.ts`) : `maxRows` / `minRows`.
+import { describe, expect, it } from "bun:test"
+import { canAddRows, canRemoveRows, clampRows, removalsAllowed, rowRoom } from "./spreadsheetRows"
+
+describe("rowRoom / canAddRows", () => {
+  it("sans max : illimité", () => {
+    expect(rowRoom(3, undefined)).toBe(Number.POSITIVE_INFINITY)
+    expect(canAddRows(3, 99, undefined)).toBe(true)
+  })
+
+  it("borne par le max", () => {
+    expect(rowRoom(0, 1)).toBe(1)
+    expect(rowRoom(1, 1)).toBe(0)
+    expect(rowRoom(5, 1)).toBe(0)
+    expect(canAddRows(0, 1, 1)).toBe(true)
+    expect(canAddRows(1, 1, 1)).toBe(false)
+    expect(canAddRows(0, 2, 1)).toBe(false)
+  })
+
+  it("ignore un max non fini (Infinity / NaN)", () => {
+    expect(rowRoom(4, Number.POSITIVE_INFINITY)).toBe(Number.POSITIVE_INFINITY)
+    expect(rowRoom(4, Number.NaN)).toBe(Number.POSITIVE_INFINITY)
+  })
+})
+
+describe("removalsAllowed / canRemoveRows", () => {
+  it("sans min : on peut tout retirer", () => {
+    expect(removalsAllowed(3, undefined)).toBe(3)
+    expect(canRemoveRows(3, 3, undefined)).toBe(true)
+  })
+
+  it("plancher par le min", () => {
+    expect(removalsAllowed(3, 1)).toBe(2)
+    expect(removalsAllowed(1, 1)).toBe(0)
+    expect(removalsAllowed(0, 1)).toBe(0)
+    expect(canRemoveRows(3, 2, 1)).toBe(true)
+    expect(canRemoveRows(3, 3, 1)).toBe(false)
+  })
+})
+
+describe("clampRows", () => {
+  it("tronque au-delà du max", () => {
+    expect(clampRows([1, 2, 3], 2)).toEqual([1, 2])
+    expect(clampRows([1], 5)).toEqual([1])
+  })
+
+  it("renvoie la **même** référence si rien à couper (ou sans max)", () => {
+    const rows = [1, 2]
+    expect(clampRows(rows, 2)).toBe(rows)
+    expect(clampRows(rows, 5)).toBe(rows)
+    expect(clampRows(rows, undefined)).toBe(rows)
+  })
+})

package/lib/spreadsheetRows.ts

@@ -0,0 +1,34 @@
+// **Limites du nombre de lignes** de QSpreadsheet (`<q-spreadsheet>`) : props `maxRows` /
+// `minRows`. Elles bornent les opérations **utilisateur** (ajout / insertion / suppression de
+// lignes, import CSV) — jamais les chargements programmatiques (`loadDocument`), comme
+// `readonly` / `disable` bornent les éditions.
+//
+// Logique **pure**, testable hors navigateur — comme `spreadsheetZones.ts`.
+
+/** Nombre de lignes qu'on peut encore **ajouter** avant `max` (`Infinity` si pas de limite). */
+export function rowRoom(current: number, max?: number): number {
+  if (typeof max !== "number" || !Number.isFinite(max)) return Number.POSITIVE_INFINITY
+  return Math.max(0, max - current)
+}
+
+/** Peut-on ajouter `count` lignes à un document de `current` lignes ? */
+export function canAddRows(current: number, count = 1, max?: number): boolean {
+  return count <= rowRoom(current, max)
+}
+
+/** Nombre de lignes qu'on peut **retirer** au maximum avant d'atteindre `min` (plancher 0). */
+export function removalsAllowed(current: number, min?: number): number {
+  if (typeof min !== "number" || !Number.isFinite(min)) return Math.max(0, current)
+  return Math.max(0, current - Math.max(0, min))
+}
+
+/** Peut-on retirer `count` lignes d'un document de `current` lignes (il en reste ≥ `min`) ? */
+export function canRemoveRows(current: number, count = 1, min?: number): boolean {
+  return count <= removalsAllowed(current, min)
+}
+
+/** Plafonne une liste de lignes à `max` (renvoie la **même** référence si rien à couper). */
+export function clampRows<T>(rows: T[], max?: number): T[] {
+  if (typeof max !== "number" || !Number.isFinite(max) || rows.length <= max) return rows
+  return rows.slice(0, max)
+}

package/package.json

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