@dnax/ui 0.0.66 → 0.0.67

package/components/QSpreadsheet.vue

@@ -186,6 +186,10 @@ import {
   ISO_DATE,
   isoAddDays,
   shiftFormulaRefs,
+  functionQueryAt,
+  rankSuggestions,
+  functionCallAt,
+  signatureArgs,
   csvEscape,
   deriveCols,
   parseCsv,
@@ -349,6 +353,9 @@ const I18N = {
     sheet: "Sheet",
     fxPlaceholder: "Value or formula (=SUM(A1:A3)…)",
     fxNoSel: "Select a cell…",
+    fxSyntax: "Syntax error",
+    fxEmpty: "empty",
+    fxColumn: "column",
     cut: "Cut",
     copy: "Copy",
     paste: "Paste",
@@ -427,6 +434,9 @@ const I18N = {
     sheet: "Feuille",
     fxPlaceholder: "Valeur ou formule (=SOMME(A1:A3)…)",
     fxNoSel: "Sélectionnez une cellule…",
+    fxSyntax: "Erreur de syntaxe",
+    fxEmpty: "vide",
+    fxColumn: "colonne",
     cut: "Couper",
     copy: "Copier",
     paste: "Coller",
@@ -1069,11 +1079,13 @@ const coerceValue = (col: QSpreadsheetColumn | undefined, text: unknown, old: an
   const raw = String(text ?? "")
   const t = raw.trim()
   if (t === "") return null
-  // Formule A1 : conservée brute dans la cellule (booléen/choix exclus)
+  // Formule A1 : conservée brute dans la cellule (booléen/choix exclus) —
+  // `t` (déjà trimé) évite qu'un `"  =…"` ne soit traité comme une formule par
+  // `isFormulaRaw` tout en échouant au parsing du moteur.
   if (t.startsWith("=")) {
     if (col?.type === "boolean" || col?.type === "select" || col?.type === "multiselect")
       return old
-    return raw
+    return t
   }
   if (col?.type === "number") {
     const n = Number(raw)
@@ -1924,6 +1936,41 @@ const fxCanEdit = computed(() => {
   )
 })
 
+/**
+ * Aperçu **live** du résultat de la formule en cours de saisie dans la barre fx.
+ * Évaluée dans le contexte de la ligne sélectionnée (références par nom de colonne
+ * et A1 résolues sur la grille mémorisée). `null` si la saisie n'est pas une formule.
+ */
+const fxPreview = computed<{ text: string; error: boolean; hint: string } | null>(() => {
+  // Pendant l'édition en cellule, la grille affiche déjà le résultat.
+  if (editing.value || !sel.value || !fxCanEdit.value) return null
+  const source = fxDraft.value
+  if (!isFormulaRaw(source)) return null
+  const row = sel.value.row
+  const value = evaluateFormula(source, {
+    row,
+    resolveField: (name) => {
+      const i = colIndex(name)
+      return i === -1 ? undefined : evaluated.value[row]?.[i]
+    },
+    resolveCell: (r, c) => evaluated.value[r]?.[c],
+  })
+  if (isError(value)) {
+    return {
+      text: value.code,
+      error: true,
+      hint: value.code === "#ERROR!" ? t("fxSyntax") : value.code,
+    }
+  }
+  if (value === null || value === undefined || value === "") {
+    return { text: t("fxEmpty"), error: false, hint: "" }
+  }
+  const text = typeof value === "number"
+    ? new Intl.NumberFormat(lang.value, { maximumFractionDigits: 6 }).format(value)
+    : String(value)
+  return { text: text.length > 60 ? text.slice(0, 59) + "…" : text, error: false, hint: "" }
+})
+
 const commitFx = async () => {
   if (!sel.value) return
   if (!fxCanEdit.value) {
@@ -1939,7 +1986,21 @@ const commitFx = async () => {
 }
 
 const onFxInput = (e: Event) => {
-  fxDraft.value = (e.target as HTMLInputElement).value
+  const el = e.target as HTMLInputElement
+  fxDraft.value = el.value
+  fxCaret.value = el.selectionStart
+}
+
+/** Position du curseur depuis un événement (`null` si indisponible). */
+const caretFrom = (e: Event): number | null => {
+  const el = e.target as HTMLInputElement | HTMLTextAreaElement | null
+  return el && typeof el.selectionStart === "number" ? el.selectionStart : null
+}
+const syncFxCaret = (e: Event) => {
+  fxCaret.value = caretFrom(e)
+}
+const syncEditCaret = (e: Event) => {
+  editCaret.value = caretFrom(e)
 }
 
 const onFxKeydown = (e: KeyboardEvent) => {
@@ -2084,16 +2145,38 @@ const FORMULA_FNS: { name: string; sig: string }[] = [
 // La source alimente des méthodes de chaîne (`.trim()`, `.startsWith()`) :
 // la valeur brute d'une cellule peut être un nombre / booléen → on coerce.
 const fxSource = computed(() => String((editing.value ? draft.value : fxDraft.value) ?? ""))
-const fxQuery = computed(() => {
-  const s = fxSource.value
-  if (!s.trim().startsWith("=")) return ""
-  const m = s.match(/[A-Za-z]{1,}$/)
-  return m ? m[0].toLowerCase() : ""
-})
+/** Position du curseur (fx bar / éditeur de cellule) — pilote les suggestions. */
+const fxCaret = ref<number | null>(null)
+const editCaret = ref<number | null>(null)
+const fxQuery = computed(() =>
+  functionQueryAt(
+    fxSource.value,
+    (editing.value ? editCaret.value : fxCaret.value) ?? undefined,
+  ),
+)
 const fxSuggestions = computed(() => {
   const q = fxQuery.value
   if (!q) return []
-  return FORMULA_FNS.filter((f) => f.name.toLowerCase().startsWith(q)).slice(0, 12)
+  const fns = rankSuggestions(FORMULA_FNS, q, 8).map((f) => ({
+    kind: "fn" as const,
+    name: f.name,
+    detail: f.sig,
+    insert: f.name + "(",
+  }))
+  // Colonnes de la feuille : les formules acceptent `=price * qty`
+  const fields = rankSuggestions(
+    cols.value.map((col) => ({
+      name: col.name,
+      detail:
+        col.label !== undefined && String(col.label) !== col.name
+          ? String(col.label)
+          : t("fxColumn"),
+      insert: col.name,
+    })),
+    q,
+    4,
+  ).map((f) => ({ kind: "field" as const, ...f }))
+  return [...fns, ...fields]
 })
 const fxHide = ref(false)
 const fxActive = ref(0)
@@ -2102,6 +2185,23 @@ watch(fxQuery, () => {
   fxActive.value = 0
   fxHide.value = false
 })
+/** Signature de la fonction au curseur (argument courant surligné). */
+const fxHint = computed<{ name: string; args: string[]; active: number } | null>(() => {
+  const source = fxSource.value
+  if (!isFormulaRaw(source)) return null
+  const caret = Math.min(
+    (editing.value ? editCaret.value : fxCaret.value) ?? source.length,
+    source.length,
+  )
+  const call = functionCallAt(source, caret, FORMULA_FNS.map((f) => f.name))
+  if (!call) return null
+  const fn = FORMULA_FNS.find((f) => f.name.toLowerCase() === call.name)
+  if (!fn) return null
+  const args = signatureArgs(fn.sig)
+  if (!args.length) return null
+  return { name: fn.name, args, active: Math.min(call.index, args.length - 1) }
+})
+
 const fxPopStyle = ref<Record<string, string>>({})
 const refreshFxPop = () => {
   if (!fxOpen.value || !fxInputEl.value) return
@@ -2123,9 +2223,18 @@ const stepFx = (d: number) => {
 const acceptFx = () => {
   const f = fxSuggestions.value[fxActive.value]
   if (!f) return
-  const replaceTail = (s: string) => s.replace(/[A-Za-z]+$/, f.name + "(")
-  if (editing.value) draft.value = replaceTail(String(draft.value ?? ""))
-  else fxDraft.value = replaceTail(String(fxDraft.value ?? ""))
+  const source = editing.value ? String(draft.value ?? "") : String(fxDraft.value ?? "")
+  const caret = Math.min(
+    (editing.value ? editCaret.value : fxCaret.value) ?? source.length,
+    source.length,
+  )
+  const query = functionQueryAt(source, caret)
+  if (!query) return
+  const start = caret - query.length
+  const inserted = f.insert
+  const next = source.slice(0, start) + inserted + source.slice(caret)
+  if (editing.value) draft.value = next
+  else fxDraft.value = next
   fxActive.value = 0
   nextTick(() => {
     const el = editing.value
@@ -2133,7 +2242,12 @@ const acceptFx = () => {
         ? editAreaEl.value
         : editInputEl.value
       : fxInputEl.value
-    el?.focus({ preventScroll: true })
+    if (!el) return
+    el.focus({ preventScroll: true })
+    const pos = start + inserted.length
+    el.setSelectionRange(pos, pos)
+    if (editing.value) editCaret.value = pos
+    else fxCaret.value = pos
   })
 }
 const acceptFxAt = (i: number) => {
@@ -2960,8 +3074,8 @@ const applyFill = () => {
         const sr = b.r0 + (((rr - b.r0) % h) + h) % h
         const sc = b.c0 + (((cc - b.c0) % w) + w) % w
         let raw = state.value[sr]?.[colNameAt(sc)]
-        if (typeof raw === "string" && raw.startsWith("=")) {
-          raw = shiftFormulaRefs(raw, rr - sr, cc - sc)
+        if (typeof raw === "string" && raw.trim().startsWith("=")) {
+          raw = shiftFormulaRefs(raw.trim(), rr - sr, cc - sc)
         }
         val = raw
       }
@@ -4572,9 +4686,23 @@ defineExpose({
         :placeholder="fxCanEdit ? t('fxPlaceholder') : t('fxNoSel')"
         spellcheck="false"
         @input="onFxInput"
+        @keyup="syncFxCaret"
+        @click="syncFxCaret"
         @keydown="onFxKeydown"
         @blur="commitFx"
       />
+      <span v-if="fxHint && !fxOpen && !editing" class="q-spreadsheet__fxhint">
+        <strong>{{ fxHint.name }}</strong>(<template v-for="(arg, i) in fxHint.args" :key="i"><span
+          class="q-spreadsheet__fxhint-arg"
+          :class="{ 'q-spreadsheet__fxhint-arg--on': i === fxHint.active }"
+        >{{ arg }}</span><span v-if="i < fxHint.args.length - 1">, </span></template>)
+      </span>
+      <span
+        v-if="fxPreview"
+        class="q-spreadsheet__fx-preview"
+        :class="{ 'q-spreadsheet__fx-preview--error': fxPreview.error }"
+        :title="fxPreview.hint"
+      ><span class="q-spreadsheet__fx-preview-eq" aria-hidden="true">=</span>{{ fxPreview.text }}</span>
     </div>
 
     <!-- ═══════ Barre Find & Replace ═══════ -->
@@ -4954,6 +5082,9 @@ defineExpose({
           class="q-spreadsheet__editor-input q-spreadsheet__editor-area"
           :rows="draftLines"
           spellcheck="false"
+          @input="syncEditCaret"
+          @keyup="syncEditCaret"
+          @click="syncEditCaret"
           @keydown="onEditKeydown"
           @blur="commitEdit"
         />
@@ -4968,6 +5099,12 @@ defineExpose({
           @keydown="onEditKeydown"
           @blur="commitEdit"
         />
+        <div v-if="editingIsFormula && fxHint && !fxOpen" class="q-spreadsheet__fxhint q-spreadsheet__fxhint--editor">
+          <strong>{{ fxHint.name }}</strong>(<template v-for="(arg, i) in fxHint.args" :key="i"><span
+            class="q-spreadsheet__fxhint-arg"
+            :class="{ 'q-spreadsheet__fxhint-arg--on': i === fxHint.active }"
+          >{{ arg }}</span><span v-if="i < fxHint.args.length - 1">, </span></template>)
+        </div>
         <div v-if="editingIsChoice && selectOptions.length" class="q-spreadsheet__options">
           <button
             v-for="opt in selectOptions"
@@ -4992,7 +5129,7 @@ defineExpose({
         <div v-if="editingIsFormula && fxOpen" class="q-spreadsheet__fnsug">
           <button
             v-for="(f, fi) in fxSuggestions"
-            :key="f.name"
+            :key="`${f.kind}:${f.name}`"
             type="button"
             class="q-spreadsheet__fnsug-item"
             :class="{ 'q-spreadsheet__fnsug-item--on': fxActive === fi }"
@@ -5000,7 +5137,8 @@ defineExpose({
             @click="acceptFxAt(fi)"
           >
             <code>{{ f.name }}</code>
-            <span>({{ f.sig }})</span>
+            <span v-if="f.kind === 'fn'">({{ f.detail }})</span>
+            <span v-else class="q-spreadsheet__fnsug-kind">{{ f.detail }}</span>
           </button>
         </div>
       </div>
@@ -5297,7 +5435,7 @@ defineExpose({
       >
         <button
           v-for="(f, fi) in fxSuggestions"
-          :key="f.name"
+          :key="`${f.kind}:${f.name}`"
           type="button"
           class="q-spreadsheet__fnsug-item"
           :class="{ 'q-spreadsheet__fnsug-item--on': fxActive === fi }"
@@ -5305,7 +5443,8 @@ defineExpose({
           @click="acceptFxAt(fi)"
         >
           <code>{{ f.name }}</code>
-          <span>({{ f.sig }})</span>
+          <span v-if="f.kind === 'fn'">({{ f.detail }})</span>
+          <span v-else class="q-spreadsheet__fnsug-kind">{{ f.detail }}</span>
         </button>
       </div>
     </Teleport>

package/lib/formula.test.ts

@@ -184,6 +184,14 @@ describe("fonctions dates", () => {
   })
 })
 
+describe("espaces autour de la formule", () => {
+  const e = harness([[]])
+  it("accepte des espaces avant le `=` (isFormulaRaw les tolère)", () => {
+    expect(e("  =1+2")).toBe(3)
+    expect(e(" =SUM(1,2) ")).toBe(3)
+  })
+})
+
 describe("math & erreurs de type", () => {
   const e = harness([[]])
   it("ABS / ROUND / INT / MOD / SQRT / POWER", () => {

package/lib/formula.ts

@@ -1349,9 +1349,11 @@ export const FORMULA_FUNCTION_NAMES: string[] = [
   ]),
 ].sort()
 
-/** Évalue une formule ("=…" optionnel). Retourne une valeur ou une FormulaError. */
+/** Évalue une formule ("=…" optionnel, espaces ignorés). Retourne une valeur ou une FormulaError. */
 export function evaluateFormula(source: string, ctx: FormulaContext): FormulaValue {
-  const src = source.startsWith("=") ? source.slice(1) : source
+  // `isFormulaRaw` accepte des espaces avant le `=` : le moteur doit en faire autant.
+  const trimmed = source.trim()
+  const src = trimmed.startsWith("=") ? trimmed.slice(1) : trimmed
   try {
     const parser = new Parser(src)
     const node = parser.parseExpr()

package/lib/spreadsheet.test.ts

@@ -6,6 +6,10 @@ import {
   isBlankValue,
   isoAddDays,
   shiftFormulaRefs,
+  functionQueryAt,
+  rankSuggestions,
+  functionCallAt,
+  signatureArgs,
   csvEscape,
   csvSplitLine,
   parseCsv,
@@ -44,6 +48,112 @@ describe("shiftFormulaRefs (autofill)", () => {
   it("laisse les valeurs sans lettres intactes", () => {
     expect(shiftFormulaRefs("=1+2", 1, 1)).toBe("=1+2")
   })
+  it("ne touche pas aux littéraux de chaîne", () => {
+    expect(shiftFormulaRefs('=IF(A1>0,"A1","x")', 1, 0)).toBe('=IF(A2>0,"A1","x")')
+    expect(shiftFormulaRefs("=CONCAT('B2',A1)", 0, 1)).toBe("=CONCAT('B2',B1)")
+  })
+  it("ne confond pas un identifiant avec une référence", () => {
+    expect(shiftFormulaRefs("=LOG10(A1)", 1, 0)).toBe("=LOG10(A2)")
+    expect(shiftFormulaRefs("=price1+A1", 1, 0)).toBe("=price1+A2")
+    expect(shiftFormulaRefs("=A1:price2", 1, 0)).toBe("=A2:price2")
+  })
+})
+
+describe("functionQueryAt (autocomplétion fx)", () => {
+  it("rend l'identifiant en cours de frappe, en minuscules", () => {
+    expect(functionQueryAt("=SU")).toBe("su")
+    expect(functionQueryAt("=sum(")).toBe("")
+    expect(functionQueryAt("=SUM(A1)+IF")).toBe("if")
+  })
+
+  it("ne suggère rien hors d'une formule ou dans une chaîne", () => {
+    expect(functionQueryAt("SUM")).toBe("")
+    expect(functionQueryAt('="hello wor')).toBe("")
+    expect(functionQueryAt("='hello wor")).toBe("")
+  })
+
+  it("ne suggère pas au milieu d'une référence ou d'une plage", () => {
+    expect(functionQueryAt("=A1", 2)).toBe("")
+    expect(functionQueryAt("=A1:B")).toBe("")
+    expect(functionQueryAt("=$AB")).toBe("")
+    expect(functionQueryAt("=A1+B")).toBe("b")
+    expect(functionQueryAt("=SUM(A")).toBe("a")
+  })
+
+  it("suit le curseur, pas seulement la fin du texte", () => {
+    expect(functionQueryAt("=SU+1", 3)).toBe("su")
+    expect(functionQueryAt("=SU+1", 5)).toBe("")
+  })
+})
+
+describe("rankSuggestions (autocomplétion)", () => {
+  const items = [
+    { name: "SUM" },
+    { name: "SUMIF" },
+    { name: "SUMPRODUCT" },
+    { name: "MID" },
+    { name: "MEDIAN" },
+    { name: "IF" },
+    { name: "IFS" },
+  ]
+
+  it("classe égalité > préfixe, puis nom le plus court", () => {
+    expect(rankSuggestions(items, "sum").map((i) => i.name)).toEqual([
+      "SUM",
+      "SUMIF",
+      "SUMPRODUCT",
+    ])
+    expect(rankSuggestions(items, "if").map((i) => i.name)).toEqual(["IF", "IFS", "SUMIF"])
+  })
+
+  it("trouve une sous-chaîne", () => {
+    expect(rankSuggestions(items, "edian").map((i) => i.name)).toEqual(["MEDIAN"])
+    expect(rankSuggestions(items, "ia").map((i) => i.name)).toEqual(["MEDIAN"])
+  })
+
+  it("trouve une sous-séquence (fuzzy)", () => {
+    expect(rankSuggestions(items, "sm").map((i) => i.name)).toEqual([
+      "SUM",
+      "SUMIF",
+      "SUMPRODUCT",
+    ])
+  })
+
+  it("respecte la limite et ignore une requête vide", () => {
+    expect(rankSuggestions(items, "s", 1)).toHaveLength(1)
+    expect(rankSuggestions(items, "")).toEqual([])
+    expect(rankSuggestions(items, "zzz")).toEqual([])
+  })
+})
+
+describe("functionCallAt / signatureArgs (aide à l'argument)", () => {
+  const known = ["SUM", "IF", "MAX"]
+
+  it("détecte la fonction et l'index de l'argument courant", () => {
+    expect(functionCallAt("=SUM(", 5, known)).toEqual({ name: "sum", index: 0 })
+    expect(functionCallAt("=SUM(A1,", 8, known)).toEqual({ name: "sum", index: 1 })
+    expect(functionCallAt("=IF(A1>0,", 9, known)).toEqual({ name: "if", index: 1 })
+  })
+
+  it("prend la fonction la plus interne", () => {
+    expect(functionCallAt("=SUM(IF(A1>0,", 13, known)).toEqual({ name: "if", index: 1 })
+  })
+
+  it("ignore les virgules des chaînes et les appels fermés", () => {
+    expect(functionCallAt('=IF(A1,"x,y",', 7, known)).toEqual({ name: "if", index: 1 })
+    expect(functionCallAt('=IF(A1,"x,y",', 13, known)).toEqual({ name: "if", index: 2 })
+    expect(functionCallAt("=A1+B1", 6, known)).toBeNull()
+    expect(functionCallAt("=SUM(A1)", 9, known)).toBeNull()
+  })
+
+  it("signatureArgs découpe les paramètres", () => {
+    expect(signatureArgs("range, criteria, [sum_range]")).toEqual([
+      "range",
+      "criteria",
+      "[sum_range]",
+    ])
+    expect(signatureArgs("")).toEqual([])
+  })
 })
 
 describe("dates ISO", () => {

package/lib/spreadsheet.ts

@@ -26,14 +26,213 @@ export const isBlankValue = (v: any): boolean =>
 /**
  * Décale les références A1 non absolues d'une formule de (dr, dc) —
  * plages incluses, `$` préservés (copie / autofill).
+ *
+ * Les **littéraux de chaîne** sont laissés intacts (`"A1"` reste `"A1"`) et les
+ * **identifiants** contenant des chiffres ne sont pas pris pour des références
+ * (`LOG10(...)`, `price1`…).
  */
 export const shiftFormulaRefs = (src: string, dr: number, dc: number): string =>
-  src.replace(
+  splitFormulaSegments(src)
+    .map((segment) => (segment.code ? shiftCodeRefs(segment.text, dr, dc) : segment.text))
+    .join("")
+
+/**
+ * Requête de suggestion de **fonction** à la position du curseur.
+ *
+ * Ne suggère que si le curseur est en train de taper un identifiant de fonction :
+ * hors littéral de chaîne, commençant un token (`=`, `(`, `,`, opérateur, espace…)
+ * et **pas** au milieu d'une référence de cellule (`A` devant `1`). Retourne `""`
+ * quand il n'y a rien à suggérer (ex. `=SUM(`).
+ */
+export function functionQueryAt(text: string, caret: number = text.length): string {
+  if (!text.trim().startsWith("=")) return ""
+  const end = Math.max(0, Math.min(caret, text.length))
+
+  // Curseur dans une chaîne littérale → aucune suggestion
+  let quote = ""
+  for (let i = 0; i < end; i++) {
+    const ch = text[i]!
+    if (quote) {
+      if (ch === quote) {
+        if (text[i + 1] === quote) {
+          i++
+          continue
+        }
+        quote = ""
+      }
+      continue
+    }
+    if (ch === '"' || ch === "'") quote = ch
+  }
+  if (quote) return ""
+
+  let start = end
+  while (start > 0 && /[A-Za-z]/.test(text[start - 1]!)) start--
+  if (start === end) return ""
+  // « A » devant « 1 » : référence de cellule en cours de frappe, pas une fonction
+  if (/[0-9]/.test(text[end] ?? "")) return ""
+  // Doit commencer un token (évite `A1:B`, `$AB`, `sheet!SUM`…)
+  const before = start > 0 ? text[start - 1]! : ""
+  if (before && !/[=(,;\s+\-*/^%&<>]/.test(before)) return ""
+  return text.slice(start, end).toLowerCase()
+}
+
+/** Pose d'une sous-séquence : les lettres de `query` apparaissent dans l'ordre. */
+const isSubsequence = (query: string, name: string): boolean => {
+  let i = 0
+  for (const ch of name) {
+    if (ch === query[i]) i++
+    if (i === query.length) return true
+  }
+  return query.length === 0
+}
+
+/**
+ * Classe des suggestions par pertinence :
+ * égalité > préfixe > sous-chaîne > sous-séquence, puis nom le plus court,
+ * puis ordre d'origine. `query` vide → aucun résultat.
+ */
+export function rankSuggestions<T extends { name: string }>(
+  items: T[],
+  query: string,
+  limit = 8,
+): T[] {
+  const q = query.trim().toLowerCase()
+  if (!q) return []
+  return items
+    .map((item, index) => {
+      const name = item.name.toLowerCase()
+      const score = name === q
+        ? 0
+        : name.startsWith(q)
+          ? 1
+          : name.includes(q)
+            ? 2
+            : isSubsequence(q, name)
+              ? 3
+              : -1
+      return { item, index, score, length: name.length }
+    })
+    .filter((entry) => entry.score >= 0)
+    .sort((a, b) => a.score - b.score || a.length - b.length || a.index - b.index)
+    .slice(0, limit)
+    .map((entry) => entry.item)
+}
+
+/** Arguments d'une signature (`"range, criteria, [sum_range]"` → 3 entrées). */
+export function signatureArgs(sig: string): string[] {
+  return sig
+    .split(",")
+    .map((part) => part.trim())
+    .filter(Boolean)
+}
+
+export interface FunctionCallAtResult {
+  /** Nom de la fonction (minuscules) */
+  name: string
+  /** Index de l'argument courant (0-based) */
+  index: number
+}
+
+/**
+ * Fonction (parmi `known`) dans les parenthèses de laquelle se trouve le curseur.
+ * Gère l'imbrication, les littéraux et les virgules de chaque niveau.
+ */
+export function functionCallAt(
+  text: string,
+  caret: number,
+  known: Iterable<string>,
+): FunctionCallAtResult | null {
+  const names = new Set([...known].map((name) => name.toLowerCase()))
+  const end = Math.max(0, Math.min(caret, text.length))
+  const stack: { name: string; index: number }[] = []
+  let quote = ""
+  for (let i = 0; i < end; i++) {
+    const ch = text[i]!
+    if (quote) {
+      if (ch === quote) {
+        if (text[i + 1] === quote) {
+          i++
+          continue
+        }
+        quote = ""
+      }
+      continue
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch
+      continue
+    }
+    if (ch === "(") {
+      let j = i - 1
+      while (j >= 0 && /[A-Za-z0-9_]/.test(text[j]!)) j--
+      stack.push({ name: text.slice(j + 1, i).toLowerCase(), index: 0 })
+      continue
+    }
+    if (ch === ")") {
+      stack.pop()
+      continue
+    }
+    if (ch === "," && stack.length) stack[stack.length - 1]!.index++
+  }
+  for (let k = stack.length - 1; k >= 0; k--) {
+    const frame = stack[k]!
+    if (names.has(frame.name)) return { name: frame.name, index: frame.index }
+  }
+  return null
+}
+
+/** Segments d'une formule : `code: false` = littéral de chaîne (guillemets simples/doubles). */
+const splitFormulaSegments = (src: string): { code: boolean; text: string }[] => {
+  const out: { code: boolean; text: string }[] = []
+  let code = ""
+  let i = 0
+  while (i < src.length) {
+    const ch = src[i]!
+    if (ch !== '"' && ch !== "'") {
+      code += ch
+      i++
+      continue
+    }
+    if (code) {
+      out.push({ code: true, text: code })
+      code = ""
+    }
+    let literal = ch
+    i++
+    while (i < src.length) {
+      const c = src[i]!
+      literal += c
+      i++
+      if (c !== ch) continue
+      // Guillemet doublé = caractère littéral (cf. parseString du moteur)
+      if (src[i] === ch) {
+        literal += src[i]
+        i++
+        continue
+      }
+      break
+    }
+    out.push({ code: false, text: literal })
+  }
+  if (code) out.push({ code: true, text: code })
+  return out
+}
+
+/** Décalage des références dans un segment de code (jamais dans une chaîne). */
+const shiftCodeRefs = (code: string, dr: number, dc: number): string =>
+  code.replace(
     /(\$?)([A-Za-z]{1,3})(\$?)(\d+)/g,
-    (_m: string, ca: string, L: string, ra: string, D: string) => {
-      const col = colFromLetters(L) + (ca === "$" ? 0 : dc)
-      const row = Number(D) - 1 + (ra === "$" ? 0 : dr)
-      if (col < 0 || row < 0) return _m
+    (match: string, ca: string, letters: string, ra: string, digits: string, offset: number) => {
+      // Borne gauche : la ref doit commencer un token (pas « LOG10 », « price1 »…)
+      const before = offset > 0 ? code[offset - 1]! : ""
+      if (before && /[A-Za-z0-9_.]/.test(before)) return match
+      // Borne droite : pas de suite alphanumérique, pas un appel de fonction
+      const after = code[offset + match.length] ?? ""
+      if (after && /[A-Za-z0-9_(]/.test(after)) return match
+      const col = colFromLetters(letters) + (ca === "$" ? 0 : dc)
+      const row = Number(digits) - 1 + (ra === "$" ? 0 : dr)
+      if (col < 0 || row < 0) return match
       return ca + colLetter(col) + ra + (row + 1)
     },
   )

package/package.json

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

package/styles/main.css

@@ -9934,6 +9934,67 @@ a.q-breadcrumbs__el:hover {
   opacity: 0.55;
 }
 
+/* Aperçu live du résultat (barre fx) — discret, monospace, rouge si erreur */
+.q-spreadsheet__fx-preview {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 40%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 8px;
+  border-left: 1px solid var(--q-spreadsheet-border);
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+.q-spreadsheet__fx-preview-eq {
+  margin-right: 4px;
+  opacity: 0.6;
+}
+.q-spreadsheet__fx-preview--error {
+  color: var(--negative, #c10015);
+  font-weight: 600;
+}
+.dark .q-spreadsheet__fx-preview,
+.q-spreadsheet--dark .q-spreadsheet__fx-preview {
+  color: rgb(255 255 255 / 0.6);
+}
+
+/* Aide à l'argument : signature de la fonction au curseur */
+.q-spreadsheet__fxhint {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted-foreground, rgb(0 0 0 / 0.6));
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+.q-spreadsheet__fxhint strong {
+  color: var(--foreground, #1d1d1d);
+}
+.q-spreadsheet__fxhint-arg--on {
+  color: var(--primary, #1976d2);
+  font-weight: 700;
+}
+/* Dans l'éditeur de cellule : sous le textarea, séparateur discret */
+.q-spreadsheet__fxhint--editor {
+  flex: 0 0 auto;
+  padding: 3px 8px 5px;
+  border-top: 1px dashed var(--q-spreadsheet-border);
+  white-space: normal;
+}
+.dark .q-spreadsheet__fxhint,
+.q-spreadsheet--dark .q-spreadsheet__fxhint {
+  color: rgb(255 255 255 / 0.6);
+}
+.dark .q-spreadsheet__fxhint strong,
+.q-spreadsheet--dark .q-spreadsheet__fxhint strong {
+  color: #fff;
+}
+
 /* ─── Éditeur formule (textarea monospace) ─── */
 .q-spreadsheet__editor--formula {
   align-items: stretch;
@@ -10324,6 +10385,10 @@ a.q-breadcrumbs__el:hover {
   color: #8b93a1;
   font-size: 11.5px;
 }
+.q-spreadsheet__fnsug-kind {
+  font-style: italic;
+  opacity: 0.85;
+}
 .q-spreadsheet__fnsug-item:hover,
 .q-spreadsheet__fnsug-item--on {
   background: rgb(25 118 210 / 0.1);