@freegridjs/core 1.9.1 → 1.9.3

package/dist/index.js

@@ -1540,6 +1540,238 @@ var FilterRow = class {
   }
 };
 
+// src/conditional.ts
+var NUMERIC = (v) => {
+  if (typeof v === "number") return Number.isFinite(v) ? v : null;
+  if (typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v))) return Number(v);
+  if (v instanceof Date) return v.getTime();
+  return null;
+};
+var STAT_TYPES = /* @__PURE__ */ new Set(["top", "bottom", "aboveAverage", "belowAverage", "duplicate", "unique", "dataBar", "colorScale", "iconSet"]);
+var ICON_SETS = {
+  // high, middle, low
+  arrows: [{ char: "\u25B2", color: "#16a34a", label: "up" }, { char: "\u25B6", color: "#d97706", label: "level" }, { char: "\u25BC", color: "#dc2626", label: "down" }],
+  traffic: [{ char: "\u25CF", color: "#16a34a", label: "good" }, { char: "\u25CF", color: "#f59e0b", label: "fair" }, { char: "\u25CF", color: "#dc2626", label: "poor" }],
+  signs: [{ char: "\u2714", color: "#16a34a", label: "good" }, { char: "!", color: "#d97706", label: "fair" }, { char: "\u2716", color: "#dc2626", label: "poor" }]
+};
+function hex(c) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(c.trim());
+  if (!m) return null;
+  const h = m[1].length === 3 ? [...m[1]].map((x) => x + x).join("") : m[1];
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+}
+function mixColor(a, b, t) {
+  const x = hex(a), y = hex(b);
+  if (!x || !y) return t < 0.5 ? a : b;
+  const c = x.map((v, i) => Math.round(v + (y[i] - v) * Math.max(0, Math.min(1, t))));
+  return `#${c.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+function textOf(v) {
+  return v == null ? "" : v instanceof Date ? v.toISOString() : String(v);
+}
+function valueMatches(rule, value) {
+  const op = rule.op ?? "eq";
+  if (op === "blank") return isBlank(value);
+  if (op === "notBlank") return !isBlank(value);
+  if (op === "contains" || op === "notContains" || op === "startsWith" || op === "endsWith") {
+    const s2 = textOf(value).toLowerCase(), q = textOf(rule.value).toLowerCase();
+    const hit = op === "startsWith" ? s2.startsWith(q) : op === "endsWith" ? s2.endsWith(q) : s2.includes(q);
+    return op === "notContains" ? !hit : hit;
+  }
+  if (isBlank(value)) return op === "ne";
+  const a = NUMERIC(value), b = NUMERIC(rule.value), c = NUMERIC(rule.valueTo);
+  if (a !== null && b !== null) {
+    switch (op) {
+      case "eq":
+        return a === b;
+      case "ne":
+        return a !== b;
+      case "gt":
+        return a > b;
+      case "gte":
+        return a >= b;
+      case "lt":
+        return a < b;
+      case "lte":
+        return a <= b;
+      case "between":
+      case "notBetween": {
+        if (c === null) return false;
+        const inside = a >= Math.min(b, c) && a <= Math.max(b, c);
+        return op === "between" ? inside : !inside;
+      }
+    }
+  }
+  const s = textOf(value).toLowerCase(), t = textOf(rule.value).toLowerCase(), u = textOf(rule.valueTo).toLowerCase();
+  switch (op) {
+    case "eq":
+      return s === t;
+    case "ne":
+      return s !== t;
+    case "gt":
+      return s > t;
+    case "gte":
+      return s >= t;
+    case "lt":
+      return s < t;
+    case "lte":
+      return s <= t;
+    case "between":
+      return s >= t && s <= u;
+    case "notBetween":
+      return s < t || s > u;
+  }
+  return false;
+}
+var ConditionalFormatter = class {
+  constructor(deps) {
+    this.deps = deps;
+    this.stats = /* @__PURE__ */ new Map();
+    this.statsKey = [];
+    this.rowCache = /* @__PURE__ */ new WeakMap();
+  }
+  /** True when any rule looks at other rows (an update to one row can restyle others). */
+  dependsOnOtherRows() {
+    return this.deps.rules().some((r) => r && (STAT_TYPES.has(r.type ?? "value") || r.type === "formula"));
+  }
+  fresh() {
+    const key = [this.deps.rows(), this.deps.version(), this.deps.rules()];
+    if (key.every((k, i) => k === this.statsKey[i])) return;
+    this.statsKey = key;
+    this.stats.clear();
+    this.rowCache = /* @__PURE__ */ new WeakMap();
+  }
+  statsOf(colId) {
+    let s = this.stats.get(colId);
+    if (!s) {
+      const nums = [];
+      const counts = /* @__PURE__ */ new Map();
+      for (const row of this.deps.rows()) {
+        const v = this.deps.value(colId, row);
+        const n = NUMERIC(v);
+        if (n !== null) nums.push(n);
+        if (!isBlank(v)) {
+          const k = setKey(v);
+          counts.set(k, (counts.get(k) ?? 0) + 1);
+        }
+      }
+      nums.sort((a, b) => a - b);
+      const sum = nums.reduce((a, b) => a + b, 0);
+      s = { min: nums[0] ?? 0, max: nums[nums.length - 1] ?? 0, avg: nums.length ? sum / nums.length : 0, sorted: nums, counts };
+      this.stats.set(colId, s);
+    }
+    return s;
+  }
+  test(rule, colId, value, row) {
+    const type = rule.type ?? "value";
+    switch (type) {
+      case "value":
+        return valueMatches(rule, value);
+      case "formula": {
+        if (typeof rule.formula !== "string") return false;
+        const r = this.deps.formula(rule.formula.startsWith("=") ? rule.formula : `=${rule.formula}`, row);
+        return r === true || typeof r === "number" && r !== 0;
+      }
+      case "top":
+      case "bottom": {
+        const n = NUMERIC(value);
+        if (n === null) return false;
+        const s = this.statsOf(colId);
+        if (!s.sorted.length) return false;
+        const k = Math.max(1, rule.percent ? Math.ceil(s.sorted.length * (rule.rank ?? 10) / 100) : Math.floor(rule.rank ?? 10));
+        return type === "top" ? n >= s.sorted[Math.max(0, s.sorted.length - k)] : n <= s.sorted[Math.min(s.sorted.length - 1, k - 1)];
+      }
+      case "aboveAverage":
+      case "belowAverage": {
+        const n = NUMERIC(value);
+        if (n === null) return false;
+        const avg = this.statsOf(colId).avg;
+        return type === "aboveAverage" ? n > avg : n < avg;
+      }
+      case "duplicate":
+      case "unique": {
+        if (isBlank(value)) return false;
+        const c = this.statsOf(colId).counts.get(setKey(value)) ?? 0;
+        return type === "duplicate" ? c > 1 : c === 1;
+      }
+    }
+    return false;
+  }
+  /** Style from rules with `row: true`, for every cell of the row. */
+  rowStyle(row) {
+    if (this.rowCache.has(row)) return this.rowCache.get(row);
+    let style = null;
+    for (const rule of this.deps.rules()) {
+      if (!rule?.row || !Array.isArray(rule.columns) || !rule.columns.length) continue;
+      const colId = rule.columns[0];
+      if (this.test(rule, colId, this.deps.value(colId, row), row)) {
+        style = mergeStyle(style ?? {}, rule.style);
+        if (rule.stopIfTrue) break;
+      }
+    }
+    this.rowCache.set(row, style);
+    return style;
+  }
+  /** Format of one cell; null when no rule applies. */
+  cell(colId, row, value) {
+    const rules = this.deps.rules();
+    if (!rules.length) return null;
+    this.fresh();
+    let out = null;
+    const rs = this.rowStyle(row);
+    if (rs) out = { style: { ...rs } };
+    for (const rule of rules) {
+      if (!rule || rule.row || !Array.isArray(rule.columns) || !rule.columns.includes(colId)) continue;
+      const type = rule.type ?? "value";
+      if (type === "dataBar" || type === "colorScale" || type === "iconSet") {
+        const n = NUMERIC(value);
+        if (n === null) continue;
+        const s = this.statsOf(colId);
+        const lo = typeof rule.min === "number" ? rule.min : s.min;
+        const hi = typeof rule.max === "number" ? rule.max : s.max;
+        const t = hi === lo ? 1 : Math.max(0, Math.min(1, (n - lo) / (hi - lo)));
+        out ?? (out = { style: {} });
+        if (type === "dataBar") {
+          const zero = lo < 0 && hi > 0 ? -lo / (hi - lo) : lo >= 0 ? 0 : 1;
+          const at = hi === lo ? 1 : t;
+          out.bar = { from: Math.min(zero, at), to: Math.max(zero, at), color: rule.color || "var(--fg-accent)" };
+        } else if (type === "colorScale") {
+          const cs = Array.isArray(rule.colors) && rule.colors.length >= 2 ? rule.colors : ["#f8696b", "#ffeb84", "#63be7b"];
+          const bg = cs.length >= 3 ? t < 0.5 ? mixColor(cs[0], cs[1], t * 2) : mixColor(cs[1], cs[2], (t - 0.5) * 2) : mixColor(cs[0], cs[1], t);
+          out.style = { ...out.style, background: bg };
+        } else {
+          const set = ICON_SETS[rule.icons ?? "arrows"] ?? ICON_SETS.arrows;
+          out.icon = t >= 2 / 3 ? set[0] : t >= 1 / 3 ? set[1] : set[2];
+        }
+        continue;
+      }
+      if (this.test(rule, colId, value, row)) {
+        out ?? (out = { style: {} });
+        out.style = mergeStyle(out.style, rule.style);
+        if (rule.stopIfTrue) break;
+      }
+    }
+    return out;
+  }
+};
+function styleAlign(s) {
+  const a = s?.align;
+  return a === "left" || a === "center" || a === "right" ? a : void 0;
+}
+function mergeStyle(base, add) {
+  if (!add || typeof add !== "object") return { ...base };
+  const out = { ...base, ...add };
+  if (!styleAlign(add)) {
+    if (styleAlign(base)) out.align = base.align;
+    else delete out.align;
+  }
+  return out;
+}
+function argbOf(c) {
+  const x = c ? hex(c) : null;
+  return x ? `FF${x.map((v) => v.toString(16).padStart(2, "0")).join("").toUpperCase()}` : void 0;
+}
+
 // src/summary.ts
 function numbers(values) {
   const out = [];
@@ -1650,6 +1882,23 @@ function computeSpans(rows, def) {
   }
   return { start, end };
 }
+function mergeBlocks(rows, defs) {
+  const n = rows.length;
+  const block = new Int32Array(n);
+  if (!n || !defs.length) return block;
+  const starts = defs.map((def) => computeSpans(rows, def).start);
+  let b = 0;
+  for (let i = 1; i < n; i++) {
+    for (let k = 0; k < starts.length; k++) {
+      if (starts[k][i] === i) {
+        b++;
+        break;
+      }
+    }
+    block[i] = b;
+  }
+  return block;
+}
 
 // src/viewport.ts
 function rowRange(scrollTop, height, rowHeight, count, overscan = 4) {
@@ -2166,7 +2415,9 @@ var Renderer = class {
     const def = c.node.def;
     if (def.wrapHeaderText ?? this.grid.options.wrapHeaderText) cell.classList.add("fg-header-wrap");
     cell.setAttribute("aria-colindex", String(c.column.index + 1));
-    if ((def.align ?? (def.type === "number" ? "right" : "left")) === "right") cell.classList.add("fg-align-right");
+    const headAlign = def.align ?? (def.type === "number" ? "right" : "left");
+    if (headAlign === "right") cell.classList.add("fg-align-right");
+    else if (headAlign === "center") cell.classList.add("fg-align-center");
     const si = sort.findIndex((s) => s.colId === c.id);
     cell.setAttribute("aria-sort", si < 0 ? "none" : sort[si].dir === "asc" ? "ascending" : "descending");
     if (isSortable(def)) cell.classList.add("fg-sortable");
@@ -2271,6 +2522,50 @@ var Renderer = class {
         else this.paintRow(row.el, node, i, cols, isSel, focusCol, hits, spans, range.first);
       }
     }
+    if (spans.size) this.stickMergedText(geo.top, geo.ch || Number.MAX_SAFE_INTEGER / 4);
+  }
+  /**
+   * A vertically merged cell taller than the view keeps its text in sight: the text moves down to the top of the
+   * visible part of the block and stops in the block's last row. Runs on every scroll, also for rows not repainted.
+   */
+  stickMergedText(viewTop, viewHeight) {
+    for (const r of REGIONS3) {
+      const ends = /* @__PURE__ */ new Map();
+      for (const [i, row] of this.painted[r]) {
+        let end = -1;
+        for (const c of row.el.querySelectorAll(".fg-cell-merged")) end = Math.max(end, Number(c.dataset.mergeEnd));
+        if (end > i) ends.set(i, end);
+      }
+      const z = /* @__PURE__ */ new Map();
+      for (const i of [...ends.keys()].sort((a, b) => b - a)) {
+        let top = 0;
+        for (const [j, zj] of z) if (j > i && j <= ends.get(i)) top = Math.max(top, zj);
+        z.set(i, top + 1);
+      }
+      for (const [i, row] of this.painted[r]) {
+        const want = z.has(i) ? String(z.get(i)) : "";
+        if (row.el.style.zIndex !== want && (want || row.el.querySelector(".fg-cell-merged, .fg-cell-merge-hidden"))) row.el.style.zIndex = want;
+      }
+      for (const row of this.painted[r].values()) {
+        for (const c of row.el.querySelectorAll(".fg-cell-merged")) {
+          const blockTop = Number(c.dataset.mergeTop);
+          const last = Number(c.dataset.mergeLast);
+          if (!Number.isFinite(blockTop) || !Number.isFinite(last)) continue;
+          let top = Math.min(last, Math.max(0, viewTop - blockTop));
+          let bottom = 0;
+          if (c.classList.contains("fg-cell-merged-middle") || c.classList.contains("fg-cell-merged-bottom")) {
+            const height = Number(c.dataset.mergeHeight);
+            const room = height - last;
+            bottom = Math.max(0, Math.min(height - top - room, blockTop + height - (viewTop + viewHeight)));
+            top = Math.min(top, height - bottom - room);
+          }
+          const shift = `${Math.round(top)}px`;
+          if (c.style.getPropertyValue("--fg-merge-shift") !== shift) c.style.setProperty("--fg-merge-shift", shift);
+          const shiftBottom = `${Math.round(bottom)}px`;
+          if (c.style.getPropertyValue("--fg-merge-shift-bottom") !== shiftBottom) c.style.setProperty("--fg-merge-shift-bottom", shiftBottom);
+        }
+      }
+    }
   }
   /**
    * Same row, only the column window moved: drop the cells that left and paint the ones that came in.
@@ -2349,9 +2644,24 @@ var Renderer = class {
           cellEl.style.top = `${-(this.rowTop(i) - this.rowTop(s.start[i]))}px`;
           cellEl.style.height = `${this.rowTop(s.end[i]) + this.rowH(s.end[i]) - this.rowTop(s.start[i])}px`;
           cellEl.style.bottom = "auto";
+          cellEl.dataset.mergeTop = String(this.rowTop(s.start[i]));
+          cellEl.dataset.mergeLast = String(this.rowTop(s.end[i]) - this.rowTop(s.start[i]));
+          cellEl.dataset.mergeEnd = String(s.end[i]);
+          cellEl.dataset.mergeHeight = String(this.rowTop(s.end[i]) + this.rowH(s.end[i]) - this.rowTop(s.start[i]));
+          cellEl.classList.toggle("fg-cell-merged-middle", col.def.mergeAlign === "middle");
+          cellEl.classList.toggle("fg-cell-merged-bottom", col.def.mergeAlign === "bottom");
           drawsMerge = true;
         } else cellEl.classList.add("fg-cell-merge-hidden");
       }
+      if (!cellEl.classList.contains("fg-cell-merged") && cellEl.dataset.mergeTop !== void 0) {
+        delete cellEl.dataset.mergeTop;
+        delete cellEl.dataset.mergeLast;
+        delete cellEl.dataset.mergeEnd;
+        delete cellEl.dataset.mergeHeight;
+        cellEl.classList.remove("fg-cell-merged-middle", "fg-cell-merged-bottom");
+        cellEl.style.removeProperty("--fg-merge-shift");
+        cellEl.style.removeProperty("--fg-merge-shift-bottom");
+      }
       if (!isSystemCol(col.id) && bounds.some((b) => col.index >= b.c1 && col.index <= b.c2)) cellEl.classList.add("fg-cell-range");
     });
     rowEl.style.zIndex = drawsMerge ? "1" : "";
@@ -2390,7 +2700,8 @@ var Renderer = class {
     const def = col.def;
     const value = getCellValue(def, node.data);
     const formatted = getFormatter(def, locale.code)(value);
-    cls += ` fg-align-${def.align ?? (def.type === "number" ? "right" : def.type === "boolean" ? "center" : "left")}`;
+    const cf = i >= 0 && !node.kind ? this.grid.cellFormat(node.data, col.id, value) : null;
+    cls += ` fg-align-${styleAlign(cf?.style) ?? def.align ?? (def.type === "number" ? "right" : def.type === "boolean" ? "center" : "left")}`;
     const params = { value, formatted, row: node.data, rowIndex: i, column: def };
     if (def.cellClass) {
       try {
@@ -2405,7 +2716,6 @@ var Renderer = class {
     if (typeof def.editable === "function" && i >= 0 && !cellEditable(def, node.data, i)) cls += " fg-cell-readonly";
     if (i >= 0) cls += this.grid.finder.classFor(i, col.id);
     cls += this.grid.flashClass(node.id, col.id);
-    const cf = i >= 0 && !node.kind ? this.grid.cellFormat(node.data, col.id, value) : null;
     if (cf?.bar) cls += " fg-cf-bar";
     cell.className = cls;
     this.applyFormat(cell, cf);
@@ -3298,6 +3608,8 @@ var en = {
     style: "Format",
     wholeRow: "Whole row",
     count: "Count",
+    align: "Align",
+    aligns: { none: "Default", left: "Left", center: "Center", right: "Right" },
     types: { value: "Cell value", formula: "Formula", top: "Top", bottom: "Bottom", aboveAverage: "Above average", belowAverage: "Below average", duplicate: "Duplicate values", unique: "Unique values", dataBar: "Data bars", colorScale: "Color scale", iconSet: "Icon set" },
     ops: { notBetween: "Not between", notContains: "Does not contain" },
     styles: { red: "Light red fill", yellow: "Yellow fill", green: "Green fill", blue: "Blue fill", redText: "Red text", bold: "Bold" }
@@ -5830,225 +6142,6 @@ ${xref}
   return out;
 }
 
-// src/conditional.ts
-var NUMERIC = (v) => {
-  if (typeof v === "number") return Number.isFinite(v) ? v : null;
-  if (typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v))) return Number(v);
-  if (v instanceof Date) return v.getTime();
-  return null;
-};
-var STAT_TYPES = /* @__PURE__ */ new Set(["top", "bottom", "aboveAverage", "belowAverage", "duplicate", "unique", "dataBar", "colorScale", "iconSet"]);
-var ICON_SETS = {
-  // high, middle, low
-  arrows: [{ char: "\u25B2", color: "#16a34a", label: "up" }, { char: "\u25B6", color: "#d97706", label: "level" }, { char: "\u25BC", color: "#dc2626", label: "down" }],
-  traffic: [{ char: "\u25CF", color: "#16a34a", label: "good" }, { char: "\u25CF", color: "#f59e0b", label: "fair" }, { char: "\u25CF", color: "#dc2626", label: "poor" }],
-  signs: [{ char: "\u2714", color: "#16a34a", label: "good" }, { char: "!", color: "#d97706", label: "fair" }, { char: "\u2716", color: "#dc2626", label: "poor" }]
-};
-function hex(c) {
-  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(c.trim());
-  if (!m) return null;
-  const h = m[1].length === 3 ? [...m[1]].map((x) => x + x).join("") : m[1];
-  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
-}
-function mixColor(a, b, t) {
-  const x = hex(a), y = hex(b);
-  if (!x || !y) return t < 0.5 ? a : b;
-  const c = x.map((v, i) => Math.round(v + (y[i] - v) * Math.max(0, Math.min(1, t))));
-  return `#${c.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
-}
-function textOf(v) {
-  return v == null ? "" : v instanceof Date ? v.toISOString() : String(v);
-}
-function valueMatches(rule, value) {
-  const op = rule.op ?? "eq";
-  if (op === "blank") return isBlank(value);
-  if (op === "notBlank") return !isBlank(value);
-  if (op === "contains" || op === "notContains" || op === "startsWith" || op === "endsWith") {
-    const s2 = textOf(value).toLowerCase(), q = textOf(rule.value).toLowerCase();
-    const hit = op === "startsWith" ? s2.startsWith(q) : op === "endsWith" ? s2.endsWith(q) : s2.includes(q);
-    return op === "notContains" ? !hit : hit;
-  }
-  if (isBlank(value)) return op === "ne";
-  const a = NUMERIC(value), b = NUMERIC(rule.value), c = NUMERIC(rule.valueTo);
-  if (a !== null && b !== null) {
-    switch (op) {
-      case "eq":
-        return a === b;
-      case "ne":
-        return a !== b;
-      case "gt":
-        return a > b;
-      case "gte":
-        return a >= b;
-      case "lt":
-        return a < b;
-      case "lte":
-        return a <= b;
-      case "between":
-      case "notBetween": {
-        if (c === null) return false;
-        const inside = a >= Math.min(b, c) && a <= Math.max(b, c);
-        return op === "between" ? inside : !inside;
-      }
-    }
-  }
-  const s = textOf(value).toLowerCase(), t = textOf(rule.value).toLowerCase(), u = textOf(rule.valueTo).toLowerCase();
-  switch (op) {
-    case "eq":
-      return s === t;
-    case "ne":
-      return s !== t;
-    case "gt":
-      return s > t;
-    case "gte":
-      return s >= t;
-    case "lt":
-      return s < t;
-    case "lte":
-      return s <= t;
-    case "between":
-      return s >= t && s <= u;
-    case "notBetween":
-      return s < t || s > u;
-  }
-  return false;
-}
-var ConditionalFormatter = class {
-  constructor(deps) {
-    this.deps = deps;
-    this.stats = /* @__PURE__ */ new Map();
-    this.statsKey = [];
-    this.rowCache = /* @__PURE__ */ new WeakMap();
-  }
-  /** True when any rule looks at other rows (an update to one row can restyle others). */
-  dependsOnOtherRows() {
-    return this.deps.rules().some((r) => r && (STAT_TYPES.has(r.type ?? "value") || r.type === "formula"));
-  }
-  fresh() {
-    const key = [this.deps.rows(), this.deps.version(), this.deps.rules()];
-    if (key.every((k, i) => k === this.statsKey[i])) return;
-    this.statsKey = key;
-    this.stats.clear();
-    this.rowCache = /* @__PURE__ */ new WeakMap();
-  }
-  statsOf(colId) {
-    let s = this.stats.get(colId);
-    if (!s) {
-      const nums = [];
-      const counts = /* @__PURE__ */ new Map();
-      for (const row of this.deps.rows()) {
-        const v = this.deps.value(colId, row);
-        const n = NUMERIC(v);
-        if (n !== null) nums.push(n);
-        if (!isBlank(v)) {
-          const k = setKey(v);
-          counts.set(k, (counts.get(k) ?? 0) + 1);
-        }
-      }
-      nums.sort((a, b) => a - b);
-      const sum = nums.reduce((a, b) => a + b, 0);
-      s = { min: nums[0] ?? 0, max: nums[nums.length - 1] ?? 0, avg: nums.length ? sum / nums.length : 0, sorted: nums, counts };
-      this.stats.set(colId, s);
-    }
-    return s;
-  }
-  test(rule, colId, value, row) {
-    const type = rule.type ?? "value";
-    switch (type) {
-      case "value":
-        return valueMatches(rule, value);
-      case "formula": {
-        if (typeof rule.formula !== "string") return false;
-        const r = this.deps.formula(rule.formula.startsWith("=") ? rule.formula : `=${rule.formula}`, row);
-        return r === true || typeof r === "number" && r !== 0;
-      }
-      case "top":
-      case "bottom": {
-        const n = NUMERIC(value);
-        if (n === null) return false;
-        const s = this.statsOf(colId);
-        if (!s.sorted.length) return false;
-        const k = Math.max(1, rule.percent ? Math.ceil(s.sorted.length * (rule.rank ?? 10) / 100) : Math.floor(rule.rank ?? 10));
-        return type === "top" ? n >= s.sorted[Math.max(0, s.sorted.length - k)] : n <= s.sorted[Math.min(s.sorted.length - 1, k - 1)];
-      }
-      case "aboveAverage":
-      case "belowAverage": {
-        const n = NUMERIC(value);
-        if (n === null) return false;
-        const avg = this.statsOf(colId).avg;
-        return type === "aboveAverage" ? n > avg : n < avg;
-      }
-      case "duplicate":
-      case "unique": {
-        if (isBlank(value)) return false;
-        const c = this.statsOf(colId).counts.get(setKey(value)) ?? 0;
-        return type === "duplicate" ? c > 1 : c === 1;
-      }
-    }
-    return false;
-  }
-  /** Style from rules with `row: true`, for every cell of the row. */
-  rowStyle(row) {
-    if (this.rowCache.has(row)) return this.rowCache.get(row);
-    let style = null;
-    for (const rule of this.deps.rules()) {
-      if (!rule?.row || !Array.isArray(rule.columns) || !rule.columns.length) continue;
-      const colId = rule.columns[0];
-      if (this.test(rule, colId, this.deps.value(colId, row), row)) {
-        style = { ...style ?? {}, ...rule.style };
-        if (rule.stopIfTrue) break;
-      }
-    }
-    this.rowCache.set(row, style);
-    return style;
-  }
-  /** Format of one cell; null when no rule applies. */
-  cell(colId, row, value) {
-    const rules = this.deps.rules();
-    if (!rules.length) return null;
-    this.fresh();
-    let out = null;
-    const rs = this.rowStyle(row);
-    if (rs) out = { style: { ...rs } };
-    for (const rule of rules) {
-      if (!rule || rule.row || !Array.isArray(rule.columns) || !rule.columns.includes(colId)) continue;
-      const type = rule.type ?? "value";
-      if (type === "dataBar" || type === "colorScale" || type === "iconSet") {
-        const n = NUMERIC(value);
-        if (n === null) continue;
-        const s = this.statsOf(colId);
-        const lo = typeof rule.min === "number" ? rule.min : s.min;
-        const hi = typeof rule.max === "number" ? rule.max : s.max;
-        const t = hi === lo ? 1 : Math.max(0, Math.min(1, (n - lo) / (hi - lo)));
-        out ?? (out = { style: {} });
-        if (type === "dataBar") {
-          const zero = lo < 0 && hi > 0 ? -lo / (hi - lo) : lo >= 0 ? 0 : 1;
-          const at = hi === lo ? 1 : t;
-          out.bar = { from: Math.min(zero, at), to: Math.max(zero, at), color: rule.color || "var(--fg-accent)" };
-        } else if (type === "colorScale") {
-          const cs = Array.isArray(rule.colors) && rule.colors.length >= 2 ? rule.colors : ["#f8696b", "#ffeb84", "#63be7b"];
-          const bg = cs.length >= 3 ? t < 0.5 ? mixColor(cs[0], cs[1], t * 2) : mixColor(cs[1], cs[2], (t - 0.5) * 2) : mixColor(cs[0], cs[1], t);
-          out.style = { ...out.style, background: bg };
-        } else {
-          const set = ICON_SETS[rule.icons ?? "arrows"] ?? ICON_SETS.arrows;
-          out.icon = t >= 2 / 3 ? set[0] : t >= 1 / 3 ? set[1] : set[2];
-        }
-        continue;
-      }
-      if (this.test(rule, colId, value, row)) {
-        out ?? (out = { style: {} });
-        out.style = { ...out.style, ...rule.style };
-        if (rule.stopIfTrue) break;
-      }
-    }
-    return out;
-  }
-};
-function argbOf(c) {
-  const x = c ? hex(c) : null;
-  return x ? `FF${x.map((v) => v.toString(16).padStart(2, "0")).join("").toUpperCase()}` : void 0;
-}
-
 // src/rows/sort.ts
 var PLAIN_NUMBER = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i;
 function numeric(v) {
@@ -6093,7 +6186,7 @@ function compareGroupValues(a, b, collator, dir) {
   if (ba || bb) return ba === bb ? 0 : ba ? 1 : -1;
   return compareNonBlank(a, b, collator) * dir;
 }
-function sortNodes(nodes, sort, resolve, collator) {
+function sortNodes(nodes, sort, resolve, collator, blocks) {
   const keys = sort.map((s) => ({ def: resolve(s.colId), mul: s.dir === "desc" ? -1 : 1 })).filter((k) => !!k.def);
   if (!keys.length) return nodes;
   const values = keys.map((k) => nodes.map((n) => {
@@ -6102,6 +6195,7 @@ function sortNodes(nodes, sort, resolve, collator) {
   }));
   const order = nodes.map((_, i) => i);
   order.sort((i, j) => {
+    if (blocks && blocks[i] !== blocks[j]) return blocks[i] - blocks[j];
     for (let k = 0; k < keys.length; k++) {
       const { def, mul } = keys[k];
       const a = values[k][i], b = values[k][j];
@@ -6696,6 +6790,8 @@ function printModel(grid, opts = {}) {
           if (s.bold) cell.bold = true;
           if (s.italic) cell.italic = true;
           if (s.strike) cell.strike = true;
+          const align2 = styleAlign(s);
+          if (align2) cell.align = align2;
           if (cf.bar) cell.bar = { from: cf.bar.from, to: cf.bar.to, color: /^#[0-9a-f]{3,8}$/i.test(cf.bar.color) ? cf.bar.color : "#93c5fd" };
           if (cf.icon) cell.icon = { char: cf.icon.char, color: cf.icon.color };
         }
@@ -7012,6 +7108,8 @@ function buildXlsxSheet(grid, opts = {}) {
           if (color) style.color = color;
           if (fill) style.fill = fill;
           if (cf.style.bold) style.bold = true;
+          const align = styleAlign(cf.style);
+          if (align) style.align = align;
         }
         if (!Object.keys(style).length) return cell;
         return cell !== null && typeof cell === "object" && !(cell instanceof Date) ? { ...cell, ...style } : { v: cell, ...style };
@@ -7644,7 +7742,7 @@ var PAID_FEATURES = {
 };
 
 // src/version.ts
-var version = "1.9.1";
+var version = "1.9.3";
 
 // src/license.ts
 var PUBLIC_KEY = { kty: "EC", crv: "P-256", x: "sUTKkglZmk-HMKPNub8p7AeLBKesHCU8irIkw9rJlbE", y: "j0U_aKRDR7iApY9UpaD3hUemhBLZJwDv9-QiT_hUyw8" };
@@ -8217,7 +8315,9 @@ var RowModel = class {
       this.stats.filterRuns++;
     }
     if (sortChanged) {
-      this.sorted = sortNodes(this.filtered, input.sort, (id) => this.deps.columnDef(id), collator);
+      const blockDefs = input.sort.length ? this.deps.sortBlocks?.(input.sort) : null;
+      const blocks = blockDefs?.length ? mergeBlocks(this.filtered.map((n) => n.data), blockDefs) : void 0;
+      this.sorted = sortNodes(this.filtered, input.sort, (id) => this.deps.columnDef(id), collator, blocks);
       this.stats.sortRuns++;
     }
     if (displayChanged) this.full = d ? this.buildDisplay(d, input.sort, collator) : this.sorted;
@@ -9234,7 +9334,7 @@ var FormatDialog = class {
     const node = grid.columns.getNode(colId);
     if (!node || node.children || isSystemCol(colId)) return;
     const loc = grid.store.state.locale;
-    const cf = loc.cf;
+    const cf = { ...en_default.cf, ...loc.cf, aligns: { ...en_default.cf.aligns, ...loc.cf?.aligns } };
     const label = node.def.header ?? node.def.field ?? colId;
     const popup = el("div", `fg-menu fg-cf-dialog fg-theme-${grid.store.state.theme}`, { role: "dialog", "aria-label": `${cf.title}: ${label}` });
     grid.applyFontTo(popup);
@@ -9276,9 +9376,14 @@ var FormatDialog = class {
         if (r2.style?.background) sample.style.background = r2.style.background;
         if (r2.style?.color) sample.style.color = r2.style.color;
         if (r2.style?.bold) sample.style.fontWeight = "700";
+        const align = styleAlign(r2.style);
+        if (align && align !== "center") {
+          sample.style.justifyItems = align === "left" ? "start" : "end";
+          sample.style.padding = "0 3px";
+        }
         if (r2.type === "colorScale") sample.style.background = `linear-gradient(to right, ${(r2.colors ?? ["#f8696b", "#ffeb84", "#63be7b"]).join(",")})`;
         const text2 = el("span", "fg-cf-rule-text");
-        text2.textContent = `${describe(r2)}${r2.row ? ` \xB7 ${cf.wholeRow}` : ""}`;
+        text2.textContent = `${describe(r2)}${r2.row ? ` \xB7 ${cf.wholeRow}` : ""}${align ? ` \xB7 ${cf.align}: ${cf.aligns[align]}` : ""}`;
         text2.title = text2.textContent;
         const del = el("button", "fg-chooser-close", { type: "button", "aria-label": `${loc.close}: ${text2.textContent}` });
         del.textContent = "\xD7";
@@ -9330,10 +9435,17 @@ var FormatDialog = class {
       });
       swatches.append(b);
     });
+    const alignSel = el("select", "fg-filter-op fg-cf-wide fg-cf-align", { "aria-label": cf.align, title: cf.align });
+    for (const a of ["", "left", "center", "right"]) {
+      const o = el("option");
+      o.value = a;
+      o.textContent = a ? `${cf.align}: ${cf.aligns[a]}` : `${cf.align}: ${cf.aligns.none}`;
+      alignSel.append(o);
+    }
     const rowLabel = el("label", "fg-cf-wide fg-cf-row");
     const rowBox = el("input", "", { type: "checkbox" });
     rowLabel.append(rowBox, ` ${cf.wholeRow}`);
-    form.append(typeSel, opSel, v1, v2, formula, rank, pctLabel, swatches, rowLabel);
+    form.append(typeSel, opSel, v1, v2, formula, rank, pctLabel, swatches, alignSel, rowLabel);
     const sync = () => {
       const t = typeSel.value;
       const op = opSel.value;
@@ -9342,7 +9454,7 @@ var FormatDialog = class {
       v2.hidden = t !== "value" || op !== "between" && op !== "notBetween";
       formula.hidden = t !== "formula";
       rank.hidden = pctLabel.hidden = t !== "top" && t !== "bottom";
-      swatches.hidden = SCALES.includes(t);
+      swatches.hidden = alignSel.hidden = SCALES.includes(t);
       rowLabel.hidden = t !== "value" && t !== "formula";
     };
     typeSel.addEventListener("change", sync);
@@ -9370,7 +9482,11 @@ var FormatDialog = class {
         rule.rank = Math.max(1, Math.floor(Number(rank.value) || 10));
         if (pct.checked) rule.percent = true;
       }
-      if (!SCALES.includes(type)) rule.style = { ...CF_PRESETS[preset].style };
+      if (!SCALES.includes(type)) {
+        rule.style = { ...CF_PRESETS[preset].style };
+        const a = styleAlign({ align: alignSel.value });
+        if (a) rule.style.align = a;
+      }
       if (rowBox.checked && (type === "value" || type === "formula")) rule.row = true;
       return rule;
     };
@@ -9399,7 +9515,12 @@ var FormatDialog = class {
     const r = grid.renderer.root.getBoundingClientRect();
     const w = popup.offsetWidth || 340;
     popup.style.left = `${Math.max(4, Math.min(r.left + 24, (window.innerWidth || 1024) - w - 4))}px`;
-    popup.style.top = `${Math.max(4, r.top + 24)}px`;
+    const vh = window.innerHeight || 768;
+    const h = popup.offsetHeight || 0;
+    const top = Math.max(4, Math.min(r.top + 24, vh - h - 4));
+    popup.style.top = `${top}px`;
+    popup.style.maxHeight = `${Math.max(160, vh - top - 8)}px`;
+    popup.style.overflowY = "auto";
     this.popup = popup;
     typeSel.focus();
     const onDown = (e) => {
@@ -9916,6 +10037,9 @@ var Grid = class {
       }
     };
     this.density = "normal";
+    // ── merge, aggregates, fill, pinned rows ────────────────────
+    /** `sortWithinMerges` is on. */
+    this.sortWithin = false;
     /** Count / sum / min / max over the selected range (numbers only for the math). */
     this.aggMemo = null;
     /** Bumped on every selection change (group row checkboxes depend on their rows). */
@@ -9962,8 +10086,11 @@ var Grid = class {
       quickColumns: () => this.columns.displayed().filter((c) => !isSystemCol(c.id)).map((c) => c.def),
       format: (def, v) => getFormatter(def, this.store.state.locale.code)(v),
       collator: () => this.collator(),
-      textVersion: () => `${this.store.state.locale.code}|${this.editVersion}`
+      textVersion: () => `${this.store.state.locale.code}|${this.editVersion}`,
+      sortBlocks: (sort) => this.sortBlocks(sort)
     });
+    this.sortWithin = !!options.sortWithinMerges;
+    if (this.sortWithin && this.rowModel.server) warn("sortWithinMerges is ignored with a datasource: the server sorts the rows");
     if (options.groupBy?.length && this.allow(this.rowModel.server ? "serverGroups" : "grouping")) this.groupBy = this.validGroupBy(options.groupBy);
     if (Array.isArray(options.conditionalFormats) && options.conditionalFormats.length && this.allow("conditional")) this.cfRules = options.conditionalFormats.filter((r) => r && typeof r === "object" && Array.isArray(r.columns)).map((r) => ({ ...r, columns: [...r.columns] }));
     this.defaultExpanded = options.treeData || this.paid ? options.groupDefaultExpanded ?? 0 : 0;
@@ -10308,8 +10435,9 @@ var Grid = class {
     const st = this.store.state;
     if (this.pivotCfg || this.options.treeData || st.quickFilter || st.advancedFilter || this.groupBy.length) return true;
     const ids = [...st.sort.map((x) => x.colId), ...Object.keys(st.filters)];
-    return ids.some((id) => {
-      const def = this.columns.getNode(id)?.def;
+    const defs = ids.map((id) => this.columns.getNode(id)?.def);
+    if (st.sort.length) defs.push(...this.sortBlocks(st.sort) ?? []);
+    return defs.some((def) => {
       if (!def) return false;
       if (def.valueGetter || def.formulas || def.formula) return true;
       return def.field != null && fields.has(def.field);
@@ -10626,6 +10754,7 @@ var Grid = class {
     this.groupBy = next;
     this.page = 0;
     this.groupPanel?.refresh();
+    if (this.sortWithin) this.rowModel.invalidate();
     this.displayChanged();
     this.events.emit("groupChange", { groupBy: [...next] });
   }
@@ -11196,7 +11325,32 @@ var Grid = class {
     });
     return out;
   }
-  // ── merge, aggregates, fill, pinned rows ────────────────────
+  /**
+   * Merge columns the client sort must stay inside: the displayed `merge` columns that are
+   * not sort keys. Nothing (a plain sort) when the option is off, merging is not allowed,
+   * or rows are grouped, pivoted or shown as a tree.
+   */
+  sortBlocks(sort) {
+    if (!this.sortWithin || !this.paid) return null;
+    if (this.pivotCfg || this.options.treeData || this.groupBy.length) {
+      warn("sortWithinMerges is ignored while rows are grouped, pivoted or shown as a tree");
+      return null;
+    }
+    const keys = new Set(sort.map((s) => s.colId));
+    return this.columns.displayed().filter((c) => c.def.merge && !c.def.rowSpan && !isSystemCol(c.id) && !keys.has(c.id)).map((c) => c.def);
+  }
+  setSortWithinMerges(on) {
+    const next = !!on;
+    if (next === this.sortWithin) return;
+    this.sortWithin = next;
+    if (this.rowModel.server) {
+      if (next) warn("sortWithinMerges is ignored with a datasource: the server sorts the rows");
+      return;
+    }
+    this.rowModel.invalidate();
+    this.updateRows();
+    this.renderer.invalidate({ rows: true });
+  }
   /** Merge blocks for every `merge` column over the displayed rows (memoized). */
   mergeSpans() {
     if (this.rowModel.server || !this.columns.displayed().some((c) => c.def.merge || c.def.rowSpan)) return NO_SPANS;
@@ -11836,6 +11990,8 @@ var Grid = class {
       validate: guard(() => this.validateAll()),
       setDensity: guard((d) => this.setDensity(d)),
       getDensity: guard(() => this.density),
+      setSortWithinMerges: guard((on) => this.setSortWithinMerges(on)),
+      getSortWithinMerges: guard(() => this.sortWithin),
       showOverlay: guard((kind) => {
         this.forcedOverlay = kind === "loading" || kind === "noRows" ? kind : null;
         this.renderer.invalidate();